/* Gestión de Obra — Expoluz Mar del Plata
   Los tres temas son los mismos que los de la aplicación de técnicos,
   con la misma paleta, para que las dos se vean iguales. */

/* ══ Tema oscuro (el de arranque) ══ */
:root{
  --bg:#0b0e14;--surface:#121620;--surface2:#1a1f2b;--border:#232a37;--border2:#2f3746;
  --text:#e7eaf0;--muted:#8b93a7;--dim:#566076;
  --accent:#f0a500;--accent-2:#ffbb33;--success:#3fb950;--danger:#f85149;--warn:#d8a02a;
  --green-bg:rgba(63,185,80,.1);--green-bd:rgba(63,185,80,.24);
  --amber-bg:rgba(240,165,0,.1);--amber-bd:rgba(240,165,0,.26);
  --red-bg:rgba(248,81,73,.1);--red-bd:rgba(248,81,73,.28);
  --blue-bg:rgba(110,164,255,.1);--blue-bd:rgba(110,164,255,.26);--blue:#6ea4ff;
  --violet:#a371f7;
  --radius:12px;--radius-sm:8px;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.25);
  --overlay:rgba(3,5,10,.62);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f4f5f7;--surface:#ffffff;--surface2:#eef0f3;--border:#e2e5ea;--border2:#cfd5de;
  --text:#1c2330;--muted:#5d6879;--dim:#98a1b0;
  --accent:#d99400;--accent-2:#eaa200;--success:#1f8a3b;--danger:#cf2e36;--warn:#9a6700;
  --green-bg:rgba(31,138,59,.1);--green-bd:rgba(31,138,59,.28);
  --amber-bg:rgba(217,148,0,.12);--amber-bd:rgba(217,148,0,.34);
  --red-bg:rgba(207,46,54,.08);--red-bd:rgba(207,46,54,.3);
  --blue-bg:rgba(37,99,201,.08);--blue-bd:rgba(37,99,201,.28);--blue:#2563c9;
  --violet:#7c3aed;
  --overlay:rgba(20,26,38,.32);
  --shadow:0 1px 2px rgba(16,24,40,.06),0 10px 28px rgba(16,24,40,.1);
  color-scheme:light;
}
:root[data-theme="sepia"]{
  --bg:#f1e8d4;--surface:#faf4e6;--surface2:#ede1c7;--border:#e0d1b1;--border2:#cfbc97;
  --text:#43362a;--muted:#78644d;--dim:#a69277;
  --accent:#b8700c;--accent-2:#c98012;--success:#4d7a2a;--danger:#b0412c;--warn:#94600f;
  --green-bg:rgba(77,122,42,.12);--green-bd:rgba(77,122,42,.3);
  --amber-bg:rgba(184,112,12,.12);--amber-bd:rgba(184,112,12,.32);
  --red-bg:rgba(176,65,44,.1);--red-bd:rgba(176,65,44,.3);
  --blue-bg:rgba(52,98,138,.1);--blue-bd:rgba(52,98,138,.3);--blue:#34628a;
  --violet:#7a5ea8;
  --overlay:rgba(60,45,25,.3);
  --shadow:0 1px 2px rgba(80,60,30,.08),0 10px 28px rgba(80,60,30,.12);
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html,body{height:100%;background:var(--bg);color:var(--text);font-size:13px;-webkit-font-smoothing:antialiased}

/* ── Estructura ── */
.app-layout{display:flex;min-height:100vh}
.sidebar{width:232px;background:var(--surface);border-right:1px solid var(--border);flex-shrink:0;display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;overflow-y:auto;z-index:10}
.main{flex:1;margin-left:232px;display:flex;flex-direction:column;overflow:auto;min-width:0}
.slogo{padding:16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.slogo-ic{width:32px;height:32px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;flex-shrink:0}
.slogo-nm{font-size:14px;font-weight:600}
.slogo-sb{font-size:10px;color:var(--muted)}
.user-bar{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.uav{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0;background:var(--amber-bg);color:var(--accent);border:1px solid var(--amber-bd)}
.unm{font-size:12px;font-weight:500}
.url{font-size:10px;color:var(--muted)}
.rb{font-size:9px;padding:2px 6px;border-radius:10px;font-weight:600;background:var(--amber-bg);color:var(--accent);border:1px solid var(--amber-bd)}
.snav{padding:8px;flex:1;overflow-y:auto}
.sec{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.07em;padding:10px 8px 4px}
.ni{display:flex;align-items:center;gap:8px;padding:8px;border-radius:7px;cursor:pointer;color:var(--muted);margin-bottom:1px;font-size:12px}
.ni:hover,.ni.on{background:var(--surface2);color:var(--text)}
.ni.on{border-left:2px solid var(--accent);padding-left:6px}
.ni i{font-size:15px;width:18px;flex-shrink:0}
.oi{padding:6px 8px;border-radius:6px;cursor:pointer;margin-bottom:1px}
.oi:hover{background:var(--surface2)}
.oi-nm{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oi-sb{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:4px;margin-top:2px}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0}
.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:sticky;top:0;z-index:5;gap:12px}
.tb-title{font-size:15px;font-weight:600}
.tb-sub{font-size:11px;color:var(--muted);margin-top:1px}
.tb-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.content{padding:20px;flex:1;min-width:0}
.pg{display:none}.pg.on{display:block}

/* ── Botones y campos ── */
.btn-d{background:var(--surface2);border:1px solid var(--border2);color:var(--muted);padding:6px 12px;border-radius:var(--radius-sm);cursor:pointer;font-size:12px;display:inline-flex;align-items:center;gap:6px;font-family:inherit}
.btn-d:hover{background:var(--border);color:var(--text)}
.btn-a{background:var(--accent);border:none;color:#fff;padding:6px 14px;border-radius:var(--radius-sm);cursor:pointer;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px;font-family:inherit}
.btn-a:hover{background:var(--accent-2)}
.btn-sm{padding:4px 9px;font-size:11px}
.btn-rojo{color:var(--danger)}
button:disabled{opacity:.45;cursor:not-allowed}
.fi{background:var(--bg);border:1px solid var(--border2);color:var(--text);border-radius:var(--radius-sm);padding:7px 10px;font-size:12px;font-family:inherit}
.fi::placeholder{color:var(--dim)}
.fi:focus{outline:none;border-color:var(--accent)}
.fi-sm{padding:4px 7px;font-size:11px}
input[type=number].fi{text-align:right}
label.lb,.lb{font-size:11px;color:var(--muted);margin-bottom:5px;display:block}
textarea.fi{resize:vertical;font-family:inherit}
select.fi{appearance:none;padding-right:26px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%;background-size:5px 5px;background-repeat:no-repeat}

/* ── Tarjetas y paneles ── */
.mg{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.mc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;position:relative;overflow:hidden}
.mc-ic{position:absolute;top:12px;right:12px;font-size:20px;opacity:.28}
.mc-lb{font-size:10px;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em}
.mc-vl{font-size:20px;font-weight:600}
.mc-sb{font-size:11px;margin-top:4px;color:var(--muted)}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px}
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px;flex-wrap:wrap}
.pt{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:7px}
.pt i{font-size:14px;color:var(--muted)}
.ps{font-size:11px;color:var(--muted);margin-top:2px;font-weight:400}
.oc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;cursor:pointer;transition:border-color .15s}
.oc:hover{border-color:var(--accent);background:var(--surface2)}
.oct{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;gap:8px}
.ocn{font-size:13px;font-weight:600;color:var(--text)}
.occ{font-size:11px;color:var(--muted);margin-top:2px}

/* ── Píldoras y barras ── */
.pill{font-size:10px;padding:3px 8px;border-radius:10px;font-weight:600;white-space:nowrap;display:inline-block}
.pk{background:var(--green-bg);color:var(--success);border:1px solid var(--green-bd)}
.pw{background:var(--amber-bg);color:var(--accent);border:1px solid var(--amber-bd)}
.pi{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-bd)}
.pe{background:var(--red-bg);color:var(--danger);border:1px solid var(--red-bd)}
.pn{background:var(--surface2);color:var(--muted);border:1px solid var(--border2)}
.pb{height:5px;background:var(--surface2);border-radius:3px;overflow:hidden}
.pf{height:100%;border-radius:3px;transition:width .3s}
.fok{background:var(--success)}.fwn{background:var(--accent)}.fin{background:var(--blue)}.fer{background:var(--danger)}

/* ── Solapas ── */
.tbar{display:flex;gap:2px;margin-bottom:14px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:3px;flex-wrap:wrap}
.td{padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:5px}
.td.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.tab{display:none}.tab.on{display:block}

/* ── Tablas ── */
.tb{width:100%;border-collapse:collapse;font-size:11.5px}
.tb th{text-align:left;font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;padding:6px 8px;font-weight:600;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--surface);position:sticky;top:0;z-index:1}
.tb td{padding:6px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
.tb tbody tr:hover{background:var(--surface2)}
.tb .num{text-align:right;font-variant-numeric:tabular-nums}
.tb .chico{color:var(--muted);font-size:10.5px}
.scroll-x{overflow-x:auto}
.scroll-y{max-height:470px;overflow-y:auto}
.fila-titulo td{background:var(--surface2);font-weight:600;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.05em}
.sin-datos{padding:28px;text-align:center;color:var(--dim);font-size:12px}
.cod{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;color:var(--accent)}

/* ── Varios ── */
.uz{border:1px dashed var(--border2);border-radius:var(--radius-sm);padding:20px;text-align:center;cursor:pointer;color:var(--muted);font-size:12px;background:var(--surface2);margin-bottom:10px}
.uz:hover{border-color:var(--accent)}
.gr2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.gr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:10px}
.gr4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}
.notif{position:fixed;top:16px;right:16px;background:var(--success);color:#fff;padding:10px 16px;border-radius:var(--radius-sm);font-size:12px;display:none;align-items:center;gap:8px;z-index:9999;box-shadow:var(--shadow);max-width:420px}
.notif.err{background:var(--danger)}
.aviso{background:var(--amber-bg);border:1px solid var(--amber-bd);color:var(--accent);border-radius:var(--radius-sm);padding:10px 12px;font-size:11.5px;margin-bottom:12px;display:flex;gap:8px;align-items:flex-start}
.aviso.info{background:var(--blue-bg);border-color:var(--blue-bd);color:var(--blue)}
.aviso.err{background:var(--red-bg);border-color:var(--red-bd);color:var(--danger)}
.aviso.ok{background:var(--green-bg);border-color:var(--green-bd);color:var(--success)}
.loader{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;padding:18px;justify-content:center}
.spin{width:14px;height:14px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite;flex-shrink:0}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── Ingreso ── */
.login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login-box{background:var(--surface);border:1px solid var(--border2);border-radius:14px;padding:32px;width:390px;box-shadow:var(--shadow)}

/* ── Menú de temas ── */
.theme-wrap{position:relative}
.theme-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:var(--shadow);padding:4px;min-width:152px;z-index:60;display:flex;flex-direction:column}
.theme-menu[hidden]{display:none}
.theme-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;border:none;background:transparent;color:var(--text);font-size:12.5px;cursor:pointer;text-align:left;font-family:inherit}
.theme-opt:hover{background:var(--surface2)}
.theme-opt.on{font-weight:600}
.theme-opt.on::after{content:'✓';margin-left:auto;color:var(--accent)}
.theme-sw{width:16px;height:16px;border-radius:50%;border:1px solid var(--border2);flex-shrink:0}
.login-theme{position:fixed;top:14px;right:14px;z-index:5}

/* ── Modales ── */
.modal-bg{position:fixed;inset:0;background:var(--overlay);display:none;align-items:center;justify-content:center;z-index:2000;padding:20px}
.modal-bg.on{display:flex}
.modal-box{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);padding:22px;max-width:780px;width:100%;max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.modal-box.ancho{max-width:1060px}
.modal-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-shrink:0;gap:10px}
.modal-body{overflow-y:auto;flex:1;min-height:0}
.modal-pie{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;flex-shrink:0;padding-top:12px;border-top:1px solid var(--border)}

/* ── Parámetros: materiales de cada boca ── */
.mat-fila{display:grid;grid-template-columns:1fr 96px 34px;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--border)}
.mat-fila:last-child{border-bottom:none}
.buscador{position:relative}
.sugerencias{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-sm);margin-top:2px;max-height:240px;overflow-y:auto;z-index:50;display:none;box-shadow:var(--shadow)}
.sugerencias.on{display:block}
.sug{padding:7px 10px;cursor:pointer;font-size:11.5px;border-bottom:1px solid var(--border)}
.sug:hover{background:var(--surface2)}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--surface2);border:1px solid var(--border2);border-radius:20px;padding:3px 10px;font-size:11px;margin:0 4px 4px 0}
.chip b{color:var(--accent);font-weight:600}

/* ── Presupuestos ── */
.pcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:10px;display:grid;grid-template-columns:110px 1fr auto auto;align-items:center;gap:12px}
.pcard:hover{border-color:var(--border2)}
.pnum{font-size:11px;font-weight:700;color:var(--accent);font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.04em}
.ptog{display:inline-flex;background:var(--bg);border:1px solid var(--border2);border-radius:var(--radius-sm);padding:3px;gap:2px;flex-wrap:wrap}
.ptog-btn{padding:5px 12px;border-radius:6px;cursor:pointer;font-size:11px;font-weight:500;border:none;background:transparent;color:var(--muted);font-family:inherit}
.ptog-btn.on{background:var(--surface2);color:var(--text)}
.bsec{margin-bottom:10px;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.bsh{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface2);cursor:pointer;font-size:12px}

@media (max-width:900px){
  .sidebar{width:58px}
  .main{margin-left:58px}
  .slogo-nm,.slogo-sb,.unm,.url,.rb,.ni span,.sec,.oi{display:none}
  .ni{justify-content:center}
  .gr2,.gr3,.gr4{grid-template-columns:1fr}
  .pcard{grid-template-columns:1fr}
}
