/* ═══════════════════════════════════════════════
   ObraTarget — Estilos Base Compartilhados
   ═══════════════════════════════════════════════ */

:root {
  --bg:#eef0f7;--sur:#fff;--sur2:#f0f2f9;--sur3:#e4e7f5;--bor:#d4d8ee;
  --tx:#0d0f1a;--muted:#6b7494;
  --ac:#4f46e5;--ac2:#ea580c;--good:#0f7a5a;--bad:#dc2626;--warn:#d97706;
  --bprev:#b8c0dc;--bprevtx:#4a5270;--bcost:#4f46e5;--bphys:#0f7a5a;
  --l1-bg:#ede9fe;--l1-tx:#3730a3;--l1-bor:#c4b5fd;
  --l2-bg:#f0fdf4;--l2-tx:#166534;
  --r:12px;
  --fm:'Space Mono',monospace;--fb:'Outfit',sans-serif;
  --sw:64px;
}
[data-theme="dark"] {
  --bg:#08090d;--sur:#111318;--sur2:#181c24;--sur3:#1e2230;--bor:#1e2436;
  --tx:#dde3f0;--muted:#5a6380;
  --ac:#7c6af7;--ac2:#f7a26a;--good:#4ecca3;--bad:#f75a6a;--warn:#f7c26a;
  --bprev:#2a3050;--bprevtx:#8896b0;--bcost:#7c6af7;--bphys:#4ecca3;
  --l1-bg:#1e1a3a;--l1-tx:#a5b4fc;--l1-bor:#3730a3;
  --l2-bg:#052e16;--l2-tx:#86efac;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--tx);font-family:var(--fb);font-size:14px;min-height:100vh;}

/* ── LAYOUT ──────────────────────────────────── */
.ot-main{margin-left:var(--sw);padding:22px 26px;}

/* ── PANEL ───────────────────────────────────── */
.panel{background:var(--sur);border:1px solid var(--bor);border-radius:var(--r);padding:16px 18px;box-shadow:0 1px 4px rgba(0,0,0,.05);margin-bottom:16px;}
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;flex-wrap:wrap;gap:8px;}
.pt{font-family:var(--fm);font-size:11px;font-weight:700;display:flex;align-items:center;gap:7px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.pt i{color:var(--ac);}

/* ── BUTTONS ─────────────────────────────────── */
.btn-primary{background:var(--ac);border:none;color:#fff;border-radius:8px;padding:7px 15px;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-family:var(--fb);}
.btn-primary:hover{opacity:.88;}
.btn-outline{background:var(--sur);border:1px solid var(--bor);color:var(--muted);border-radius:8px;padding:6px 13px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .2s;font-family:var(--fb);}
.btn-outline:hover{border-color:var(--ac);color:var(--ac);}
.btn-sm{background:var(--sur2);border:1px solid var(--bor);color:var(--muted);border-radius:8px;padding:5px 11px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .2s;}
.btn-sm:hover{color:var(--tx);}
.btn-danger{background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.2);color:var(--bad);border-radius:8px;padding:6px 13px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .2s;}
.btn-danger:hover{background:rgba(220,38,38,.15);}
.btn-success{background:rgba(78,204,163,.08);border:1px solid rgba(78,204,163,.25);color:var(--good);border-radius:8px;padding:6px 13px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .2s;}
.btn-success:hover{background:rgba(78,204,163,.15);}

/* ── TABS ────────────────────────────────────── */
.tabs{display:flex;gap:3px;}
.tab{padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--bor);color:var(--muted);background:transparent;transition:all .2s;font-family:var(--fb);}
.tab.active{background:var(--ac);color:#fff;border-color:var(--ac);}

/* ── SUB-NAV (pills) ─────────────────────────── */
.subnav{display:flex;gap:4px;margin-bottom:14px;flex-wrap:wrap;}
.subnav a,.subnav span{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;padding:5px 12px;border-radius:8px;border:1px solid var(--bor);background:var(--sur);color:var(--muted);text-decoration:none;}
.subnav a:hover{border-color:var(--ac);color:var(--ac);}
.subnav .active{font-weight:600;border-color:var(--ac);background:var(--ac);color:#fff;}

/* ── CHIPS ───────────────────────────────────── */
.chip{padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;font-family:var(--fm);}
.chip-ok{background:rgba(15,122,90,.1);color:var(--good);}
.chip-nok{background:rgba(220,38,38,.1);color:var(--bad);}
.chip-warn{background:rgba(217,119,6,.1);color:var(--warn);}
.chip-neu{background:var(--sur2);color:var(--muted);}

/* ── STATUS BADGES ───────────────────────────── */
.bs{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap;}
.bs::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;}
.s-and{background:rgba(15,122,90,.1);color:var(--good);}
.s-par{background:rgba(217,119,6,.1);color:var(--warn);}
.s-con{background:rgba(79,70,229,.1);color:var(--ac);}
.s-nin{background:rgba(107,116,148,.1);color:var(--muted);}
.s-can{background:rgba(220,38,38,.1);color:var(--bad);}
.s-halt{background:rgba(220,38,38,.1);color:var(--bad);}
[data-theme="dark"] .s-and{background:rgba(78,204,163,.1);color:var(--good);}
[data-theme="dark"] .s-par{background:rgba(247,194,106,.1);color:var(--warn);}
[data-theme="dark"] .s-con{background:rgba(124,106,247,.1);color:var(--ac);}
[data-theme="dark"] .s-can{background:rgba(247,90,106,.1);color:var(--bad);}
[data-theme="dark"] .s-halt{background:rgba(247,90,106,.1);color:var(--bad);}

/* ── TABLE ───────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;}
.tbl th{padding:9px 12px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;border-bottom:2px solid var(--bor);white-space:nowrap;background:var(--sur2);}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--bor);font-size:12px;vertical-align:middle;}
.tbl tbody tr:last-child td{border-bottom:none;}
.tbl tbody tr{transition:background .15s;}
.tbl tbody tr.clickable{cursor:pointer;}
.tbl tbody tr.clickable:hover td{background:var(--sur2);}
.tbl th.r,.tbl td.r{text-align:right;}
.tbl-wrap{border-radius:var(--r);overflow:hidden;border:1px solid var(--bor);}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.tbl-scroll::-webkit-scrollbar{height:4px;}
.tbl-scroll::-webkit-scrollbar-track{background:var(--sur2);}
.tbl-scroll::-webkit-scrollbar-thumb{background:var(--bor);border-radius:2px;}

/* ── MODAL ───────────────────────────────────── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--sur);border-radius:14px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2);}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--bor);position:sticky;top:0;background:var(--sur);z-index:1;}
.modal-title{font-family:var(--fm);font-size:14px;font-weight:700;}
.modal-close{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;padding:4px;}
.modal-body{padding:20px;}
.modal-footer{padding:12px 20px;border-top:1px solid var(--bor);display:flex;gap:8px;justify-content:flex-end;position:sticky;bottom:0;background:var(--sur);}
/* Inputs de modal fora de .fg (inputs em .fg herdam de .fg input) */
.modal-body input:not([readonly]),.modal-body select,.modal-body textarea{background:var(--sur2);border:1px solid var(--bor);border-radius:8px;outline:none;transition:border-color .2s;}
.modal-body input:not([readonly]):focus,.modal-body select:focus,.modal-body textarea:focus{border-color:var(--ac);}

/* ── FORM ────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.form-grid-3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:13px;}
.fg{display:flex;flex-direction:column;gap:5px;min-width:0;}
.fg.full{grid-column:span 2;}
.fg label{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;}
.fg input,.fg select,.fg textarea{width:100%;box-sizing:border-box;background:var(--sur2);border:1px solid var(--bor);border-radius:8px;color:var(--tx);padding:8px 10px;font-size:13px;font-family:var(--fb);transition:border-color .2s;}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--ac);}
.fg input[readonly]{background:var(--sur3);color:var(--muted);}
.f-sep{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;padding-bottom:6px;border-bottom:1px solid var(--bor);grid-column:span 2;margin-top:4px;}
.pw-wrap-app{position:relative;}
.pw-wrap-app input{width:100%;box-sizing:border-box;padding-right:42px;}
.pw-toggle-app{position:absolute;right:0;top:0;bottom:0;width:40px;display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;transition:color .2s;}
.pw-toggle-app:hover{color:var(--ac);}
.sec-layout{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;}
.form-actions{display:flex;gap:8px;margin-top:20px;}
.form-actions.end{justify-content:flex-end;}

/* ── PROGRESS ────────────────────────────────── */
.prog-bg{height:5px;background:var(--sur3);border-radius:3px;overflow:hidden;}
.prog-fill{height:5px;border-radius:3px;}

/* ── MISC ────────────────────────────────────── */
.good{color:var(--good);}.bad{color:var(--bad);}.warn{color:var(--warn);}
.hidden{display:none!important;}
.mono{font-family:var(--fm);}
@keyframes skel-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.skel{background:var(--bor);border-radius:5px;animation:skel-pulse 1.4s ease-in-out infinite;}
@keyframes ot-spin{to{transform:rotate(360deg)}}
.lai-del{background:none;border:none;color:var(--muted);cursor:pointer;padding:2px 4px;border-radius:4px;line-height:1}
.lai-del:hover{color:var(--bad)}

/* ── PAGE HEADER / FILTERS ───────────────────── */
.ph-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:0;flex-wrap:nowrap;gap:10px;}
.page-title{font-size:clamp(15px,2vw,18px);font-weight:700;color:var(--tx);}
.page-subtitle{font-size:12px;color:var(--muted);margin-top:2px;}
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
.si{background:var(--sur2);border:1px solid var(--bor);border-radius:8px;color:var(--tx);padding:7px 10px 7px 30px;font-size:12px;font-family:var(--fb);width:200px;transition:border-color .2s;}
.si:focus{outline:none;border-color:var(--ac);}
.si::placeholder{color:var(--muted);}
.sw{position:relative;}
.sw i{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:12px;}
.fi{background:var(--sur2);border:1px solid var(--bor);border-radius:8px;color:var(--tx);padding:7px 10px;font-size:12px;font-family:var(--fb);cursor:pointer;transition:border-color .2s;}
.fi:focus{outline:none;border-color:var(--ac);}

/* ── SIDEBAR DESKTOP ─────────────────────────── */
.ot-sidebar{width:64px;background:var(--sur);border-right:1px solid var(--bor);position:fixed;top:0;left:0;bottom:0;display:flex;flex-direction:column;align-items:center;padding:20px 0 0;gap:5px;z-index:200;transition:width .25s ease;overflow:hidden;box-shadow:2px 0 8px rgba(0,0,0,.06);}
.ot-sidebar:hover{width:230px;}
.ot-slogo{width:36px;height:36px;background:var(--ac);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--fm);font-weight:700;font-size:13px;flex-shrink:0;margin-bottom:12px;}
.ot-sl{width:100%;display:flex;align-items:center;gap:13px;padding:9px 14px;border-radius:8px;cursor:pointer;color:var(--muted);text-decoration:none;transition:all .2s;overflow:hidden;white-space:nowrap;}
.ot-sl:hover,.ot-sl.active{background:var(--sur2);color:var(--ac);}
.ot-sl i{font-size:16px;flex-shrink:0;}
.ot-sl span{opacity:0;transition:opacity .2s;font-size:13px;font-weight:500;}
.ot-sidebar:hover .ot-sl span{opacity:1;}
.ot-spacer{flex:1;}
.ot-user-footer{width:100%;border-top:1px solid var(--bor);padding:8px 0 10px;position:relative;}
.ot-user-btn{width:100%;display:flex;align-items:center;gap:11px;padding:8px 14px;cursor:pointer;background:none;border:none;color:var(--tx);text-align:left;overflow:hidden;white-space:nowrap;transition:background .2s;}
.ot-user-btn:hover{background:var(--sur2);}
.ot-uav{width:32px;height:32px;border-radius:50%;background:var(--ac);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--fm);font-size:11px;font-weight:700;flex-shrink:0;}
.ot-uinfo{opacity:0;transition:opacity .2s;min-width:0;}
.ot-sidebar:hover .ot-uinfo{opacity:1;}
.ot-uname{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ot-urole{font-size:10px;color:var(--muted);}
.ot-uchev{margin-left:auto;font-size:11px;color:var(--muted);opacity:0;transition:opacity .2s,transform .2s;flex-shrink:0;}
.ot-sidebar:hover .ot-uchev{opacity:1;}
.ot-uchev.open{transform:rotate(180deg);}

/* ── USER DROPDOWN ───────────────────────────── */
.ot-udrop{position:absolute;bottom:calc(100% + 4px);left:8px;right:8px;background:var(--sur);border:1px solid var(--bor);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);overflow:hidden;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s,transform .2s;z-index:300;}
.ot-udrop.open{opacity:1;transform:translateY(0);pointer-events:all;}
.ot-udh{padding:10px 14px;border-bottom:1px solid var(--bor);background:var(--sur2);}
.ot-udn{font-size:12px;font-weight:700;}
.ot-ude{font-size:10px;color:var(--muted);margin-top:1px;}
.ot-udi{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;color:var(--tx);transition:background .15s;font-size:13px;text-decoration:none;}
.ot-udi:hover{background:var(--sur2);}
.ot-udi i{font-size:14px;color:var(--muted);flex-shrink:0;}
.ot-udi.danger{color:var(--bad);}
.ot-udi.danger i{color:var(--bad);}
.ot-udiv{height:1px;background:var(--bor);margin:2px 0;}

/* ── MOBILE OVERLAY + DRAWER ─────────────────── */
.ot-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:300;opacity:0;transition:opacity .25s;}
.ot-overlay.open{opacity:1;}
.ot-drawer{position:fixed;top:0;left:0;bottom:0;width:270px;background:var(--sur);z-index:301;transform:translateX(-100%);transition:transform .28s ease;display:flex;flex-direction:column;box-shadow:4px 0 20px rgba(0,0,0,.15);}
.ot-drawer.open{transform:translateX(0);}
.ot-dh{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--bor);}
.ot-dlogo{display:flex;align-items:center;gap:10px;}
.ot-dlogob{width:32px;height:32px;background:var(--ac);border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--fm);font-weight:700;font-size:12px;}
.ot-dtit{font-family:var(--fm);font-size:14px;font-weight:700;}
.ot-dclose{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;}
.ot-dnav{flex:1;padding:10px;display:flex;flex-direction:column;gap:3px;overflow-y:auto;}
.ot-dl{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer;color:var(--muted);text-decoration:none;transition:all .2s;font-size:13px;font-weight:500;}
.ot-dl:hover,.ot-dl.active{background:var(--sur2);color:var(--ac);}
.ot-dl i{font-size:16px;flex-shrink:0;}
.ot-duser{border-top:1px solid var(--bor);padding:12px 16px;}
.ot-dcard{display:flex;align-items:center;gap:11px;padding:10px 12px;background:var(--sur2);border-radius:10px;margin-bottom:8px;}
.ot-dav{width:36px;height:36px;border-radius:50%;background:var(--ac);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--fm);font-size:13px;font-weight:700;flex-shrink:0;}
.ot-dname{font-size:13px;font-weight:600;}
.ot-drole{font-size:11px;color:var(--muted);}
.ot-dacts{display:flex;flex-direction:column;gap:5px;}
.ot-dact{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;background:var(--sur);border:1px solid var(--bor);color:var(--muted);font-size:13px;cursor:pointer;text-decoration:none;transition:all .2s;}
.ot-dact:hover{border-color:var(--ac);color:var(--ac);}
.ot-dact.danger{color:var(--bad);}
.ot-dact.danger:hover{border-color:var(--bad);}
.ot-dact i{font-size:15px;}

/* ── MOBILE TOPBAR ───────────────────────────── */
.ot-tbm{display:none;background:var(--sur);border-bottom:1px solid var(--bor);padding:0 16px;height:52px;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.ot-tbmbrand{font-family:var(--fm);font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;}
.ot-tbmdot{width:8px;height:8px;border-radius:50%;background:var(--ac);}
.ot-tbmr{display:flex;gap:8px;}
.ot-ham{background:none;border:none;color:var(--tx);font-size:22px;cursor:pointer;}
.ot-tbmbtn{background:var(--sur2);border:1px solid var(--bor);color:var(--muted);border-radius:8px;padding:5px 9px;cursor:pointer;font-size:14px;}

/* ── TOASTS ──────────────────────────────────── */
.ot-toast-container{position:fixed;bottom:24px;right:24px;z-index:1000;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.ot-toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:10px;font-size:13px;box-shadow:0 4px 16px rgba(0,0,0,.15);min-width:260px;max-width:380px;animation:otToastIn .3s ease;background:var(--sur);border:1px solid var(--bor);pointer-events:all;}
.ot-toast.success{background:rgba(15,122,90,.1);border-color:rgba(15,122,90,.3);color:var(--good);}
.ot-toast.danger{background:rgba(220,38,38,.1);border-color:rgba(220,38,38,.3);color:var(--bad);}
.ot-toast.warning{background:rgba(217,119,6,.1);border-color:rgba(217,119,6,.3);color:var(--warn);}
.ot-toast.info{background:rgba(79,70,229,.1);border-color:rgba(79,70,229,.3);color:var(--ac);}
.ot-toast-icon{font-size:16px;flex-shrink:0;}
.ot-toast-msg{flex:1;}
.ot-toast-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.ot-toast-title{font-weight:700;font-size:12px;line-height:1.3;}
.ot-toast-body .ot-toast-msg{font-size:11px;opacity:.8;}
@keyframes otToastIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}

/* ── MSG TOASTS (topo central – django messages) */
.ot-msg-container{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:1100;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:min(480px,calc(100vw - 32px));}
.ot-msg{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:8px;font-size:13px;font-weight:400;box-shadow:0 4px 20px rgba(0,0,0,.22);width:100%;min-width:280px;animation:otMsgIn .3s ease;background:var(--sur);border:1px solid var(--bor);color:var(--tx);pointer-events:all;}
.ot-msg.success{background:#198754;border-color:#146c43;color:#fff;}
.ot-msg.danger{background:#dc3545;border-color:#b02a37;color:#fff;}
.ot-msg.warning{background:#ffc107;border-color:#d39e00;color:#212529;}
.ot-msg.info{background:#0d6efd;border-color:#0a58ca;color:#fff;}
.ot-msg-close{margin-left:auto;background:none;border:none;cursor:pointer;padding:0 0 0 10px;color:inherit;opacity:.65;line-height:1;font-size:14px;flex-shrink:0;}
.ot-msg-close:hover{opacity:1;}
@keyframes otMsgIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}

/* ── RESPONSIVE ──────────────────────────────── */
@media(max-width:768px){
  .ot-sidebar{display:none!important;}
  .ot-tbm{display:flex!important;}
  .ot-main{margin-left:0;padding:16px;}
  .form-grid,.form-grid-3{grid-template-columns:1fr;}
  .fg.full,.f-sep{grid-column:span 1;}
  .sec-layout{grid-template-columns:1fr;}
  .ph-row{flex-wrap:wrap;}
  .si{width:100%;}
  .fi{width:100%;}
}
@media(max-width:480px){
  .ot-main{padding:12px;}
  .panel{padding:12px 14px;}
  .modal-overlay{padding:8px;}
  .modal-box{border-radius:10px;}
  .btn-primary,.btn-outline,.btn-sm,.btn-danger{font-size:12px;}
}