/* TEKOARANDU · estilos generales */
/* Layout: barra de marca + riel de módulos a la izquierda + mesa de trabajo; croquis en metros reales */
/* Fuentes alojadas en el propio sistema (licencia SIL OFL): funcionan sin conexión */
@font-face{font-family:"Barlow Condensed";font-weight:500;font-display:swap;src:url(../fonts/barlow-condensed-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:400;font-display:swap;src:url(../fonts/source-sans-3-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:400;font-display:swap;src:url(../fonts/source-sans-3-greek-400-normal.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:"Source Sans 3";font-weight:600;font-display:swap;src:url(../fonts/source-sans-3-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:700;font-display:swap;src:url(../fonts/source-sans-3-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-greek-400-normal.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2")}

/* ---------- Temas ----------
   claro (predeterminado) · institucional · nocturno · grafito · contraste (para usar al sol en el lugar del hecho)
   El tema se guarda por usuario en este dispositivo (js/temas.js) y se aplica como data-tema en <html>. */
:root{
  --bg:#EDF0F3; --panel:#FFFFFF; --ink:#18222B; --muted:#5A6774; --line:#D2D9E0; --soft:#F5F7F9;
  --accent:#C98200; --accent-ink:#1A1300; --navy:#1F4E79; --ok:#1E7B4F; --danger:#B42318;
  --road:#C7CDD3; --marking:#FFFFFF; --skid:#2A2F35; --grid:#E2E7EB; --grid2:#CFD6DD; --paper:#FAFBFC;
  --vA:#1F4E79; --vB:#0F7C80; --vC:#7A4E9C;
  --brass:#B0892A; --fire:#D9480F; --tree:#3D7A3A; --wall:#2B3138;
  --head:#FFFFFF; --fondo-op:.05; --sombra:0 1px 2px rgba(16,24,40,.06);
  --f-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"Source Sans 3","Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
:root[data-tema="institucional"]{
  --bg:#ECF2F8; --panel:#FFFFFF; --ink:#0E1E33; --muted:#4F6178; --line:#CDD9E6; --soft:#F2F6FB;
  --accent:#0B63C4; --accent-ink:#FFFFFF; --navy:#0B3D6E; --ok:#13795B; --danger:#B42318;
  --road:#C6D0DB; --marking:#FFFFFF; --skid:#1F2A37; --grid:#E3EAF2; --grid2:#C8D4E2; --paper:#FBFCFE;
  --vA:#0B3D6E; --vB:#0E7490; --vC:#6D28D9; --brass:#A16207; --fire:#C2410C; --tree:#2F7D32; --wall:#1E293B;
  --head:#0B2A4A; --head-ink:#EAF2FB; --fondo-op:.05; color-scheme:light}
:root[data-tema="nocturno"]{
  --bg:#06111F; --panel:#0B1B2E; --ink:#DCEBF6; --muted:#86A3BC; --line:#1A3653; --soft:#0F2339;
  --accent:#22D3EE; --accent-ink:#03121C; --navy:#7CC4F2; --ok:#34D399; --danger:#FB7185;
  --road:#18304A; --marking:#9FC0DA; --skid:#E2EEF7; --grid:#0E2236; --grid2:#17324F; --paper:#081729;
  --vA:#60A5FA; --vB:#2DD4BF; --vC:#C4B5FD; --brass:#E9C46A; --fire:#FB923C; --tree:#4ADE80; --wall:#CFE3F2;
  --head:#081A2C; --fondo-op:.11; --sombra:0 0 0 1px rgba(34,211,238,.05),0 8px 24px rgba(0,0,0,.25); color-scheme:dark}
:root[data-tema="grafito"]{
  --bg:#0F151B; --panel:#17202A; --ink:#E5EBF0; --muted:#93A1AE; --line:#2A3541; --soft:#1C2731;
  --accent:#F0B03A; --accent-ink:#1A1300; --navy:#86B6E6; --ok:#5CC08A; --danger:#F07167;
  --road:#2C3640; --marking:#C9D1D8; --skid:#E6E9EC; --grid:#1B242D; --grid2:#26313C; --paper:#121A21;
  --vA:#6FA5DB; --vB:#4FC1C4; --vC:#B790D8; --brass:#D9B451; --fire:#FF8A4C; --tree:#72C26C; --wall:#C9D1D8;
  --head:#17202A; --fondo-op:.06; color-scheme:dark}
:root[data-tema="contraste"]{
  --bg:#FFFFFF; --panel:#FFFFFF; --ink:#000000; --muted:#262626; --line:#000000; --soft:#F0F0F0;
  --accent:#0033CC; --accent-ink:#FFFFFF; --navy:#002080; --ok:#006B2E; --danger:#B00000;
  --road:#BDBDBD; --marking:#FFFFFF; --skid:#000000; --grid:#DDDDDD; --grid2:#8A8A8A; --paper:#FFFFFF;
  --vA:#002080; --vB:#00665C; --vC:#5A1A8C; --brass:#7A5A00; --fire:#B23C00; --tree:#1E6B1E; --wall:#000000;
  --head:#FFFFFF; --fondo-op:0; --sombra:none; color-scheme:light}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--bg);color:var(--ink);margin:0}
body{font-family:var(--f-body);font-size:15px;line-height:1.45}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

.top{background:var(--panel);border-bottom:1px solid var(--line);padding-block:12px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:10px}
.brand b{font-family:var(--f-display);font-weight:700;font-size:1.7rem;letter-spacing:.06em}
.brand b span{color:var(--accent)}
.brand small{color:var(--muted);font-size:.85rem}
.caseTag{margin-left:auto;font-family:var(--f-mono);font-size:.8rem;color:var(--muted);border:1px dashed var(--line);padding:4px 8px;border-radius:4px}

.shell{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 60px)}
nav.rail{background:var(--panel);border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:4px}
.rail .grp{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;color:var(--muted);padding:12px 10px 4px}
.tab{display:flex;align-items:center;gap:10px;border:0;background:none;text-align:left;padding:9px 10px;border-radius:6px;cursor:pointer;color:var(--ink)}
.tab:hover{background:var(--soft)}
.tab[aria-selected="true"]{background:var(--soft);box-shadow:inset 3px 0 0 var(--accent);font-weight:600}
.tab .n{font-family:var(--f-mono);font-size:.72rem;color:var(--muted);width:22px}
.tab .st{margin-left:auto;font-size:.68rem;font-family:var(--f-mono);color:var(--muted)}
.tab .st.on{color:var(--ok)}

main{min-width:0;padding-block:20px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1{font-family:var(--f-display);font-weight:600;font-size:1.9rem;letter-spacing:.02em;margin:0 0 4px;text-wrap:balance}
h2{font-family:var(--f-display);font-weight:600;font-size:1.25rem;letter-spacing:.03em;margin:0 0 10px}
.lead{color:var(--muted);margin:0 0 18px;max-width:70ch}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px}
.label{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;color:var(--muted)}

/* Cálculo */
.calc{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start}
.flist{display:flex;flex-direction:column;gap:2px}
.flist .g{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--muted);padding:10px 8px 2px}
.fbtn{border:0;background:none;text-align:left;padding:7px 8px;border-radius:5px;cursor:pointer}
.fbtn:hover{background:var(--soft)}
.fbtn[aria-current="true"]{background:var(--soft);font-weight:600;color:var(--navy)}
.expr{font-family:var(--f-mono);background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin:10px 0;overflow-x:auto;white-space:nowrap}
.ref{font-size:.85rem;color:var(--muted);margin:0}
.inputs{display:grid;gap:8px;margin:14px 0}
.irow{display:grid;grid-template-columns:minmax(0,1fr) 110px 18px 80px 54px;gap:8px;align-items:center}
.irow label{min-width:0}
.irow input{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:5px;background:var(--paper);font-family:var(--f-mono);text-align:right}
.irow .pm{color:var(--muted);text-align:center}
.irow .u{color:var(--muted);font-size:.85rem;font-family:var(--f-mono)}
.ihead{font-size:.75rem;color:var(--muted)}
.res{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px;border-top:1px solid var(--line);padding-top:14px}
.big{font-family:var(--f-display);font-weight:700;font-size:3rem;line-height:1;letter-spacing:.01em}
.big small{font-size:1.1rem;font-weight:500;color:var(--muted);margin-left:4px}
.range{font-family:var(--f-mono);font-size:.9rem;margin-top:6px}
.extra{display:grid;gap:6px;margin-top:12px}
.extra div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dotted var(--line);padding-bottom:4px}
.chip{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.8rem;font-weight:600;margin-top:10px}
.chip.ok{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.chip.bad{background:color-mix(in srgb,var(--danger) 15%,transparent);color:var(--danger)}
.chip.warn{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.hist svg{width:100%;height:auto;display:block}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.btn{border:1px solid var(--line);background:var(--panel);padding:7px 12px;border-radius:6px;cursor:pointer;font-weight:600}
.btn:hover{border-color:var(--muted)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.sm{padding:4px 8px;font-size:.82rem}
.btn.danger{color:var(--danger)}
.saved{margin-top:16px}
table.t{width:100%;border-collapse:collapse;font-size:.88rem}
table.t th{text-align:left;font-weight:600;color:var(--muted);font-size:.78rem;border-bottom:1px solid var(--line);padding:6px}
table.t td{border-bottom:1px solid var(--line);padding:6px;vertical-align:top}
.tw{overflow-x:auto}
.toast{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:6px;font-weight:600;z-index:20}

/* Croquis */
.cq{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;align-items:start}
.tools{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tool{border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:6px 10px;cursor:pointer;font-size:.88rem}
.tool[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--panel));font-weight:600}
.stage{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper)}
#cq{display:block;width:100%;height:auto;aspect-ratio:60/34;touch-action:none;cursor:crosshair}
#cq.sel{cursor:default}
.overlay{position:absolute;left:10px;bottom:8px;font-family:var(--f-mono);font-size:.75rem;color:var(--muted);pointer-events:none}
.hint{font-size:.85rem;color:var(--muted);margin-top:8px}
.props{display:grid;gap:10px}
.props .f{display:grid;gap:4px}
.props input,.props select,.props textarea,.exp input,.exp select,.exp textarea{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:5px;background:var(--paper)}
.legend{display:grid;gap:6px;font-size:.85rem}
.legend span{display:flex;align-items:center;gap:8px}
.sw{width:22px;height:10px;border-radius:2px;display:inline-block}

/* Expediente */
.exp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.exp .f{display:grid;gap:4px}
.exp .wide{grid-column:1/-1}

/* Fases */
.phase{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.phase .panel h3{font-family:var(--f-display);font-weight:600;margin:0 0 6px;font-size:1.1rem}
.phase ul{margin:0;padding-left:18px;color:var(--muted)}

/* Informe */
.report{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:24px;max-width:900px}
.report h2{border-bottom:2px solid var(--ink);padding-bottom:6px}
.report h3{font-family:var(--f-display);font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;margin:20px 0 8px}
.report dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 16px;margin:0}
.report dt{color:var(--muted)}
.report dd{margin:0}
.report .cqwrap svg{width:100%;height:auto;border:1px solid var(--line)}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  nav.rail{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px}
  .rail .grp{display:none}
  .tab{white-space:nowrap}
  .tab .st{display:none}
  .tab[aria-selected="true"]{box-shadow:inset 0 -3px 0 var(--accent)}
  .calc,.cq,.res{grid-template-columns:1fr}
  .exp{grid-template-columns:1fr}
}
@media (max-width:520px){
  .irow{grid-template-columns:minmax(0,1fr) 84px 14px 62px;}
  .irow .u{grid-column:1/-1;margin-top:-6px;text-align:right}
  .big{font-size:2.4rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.estado{font-size:.75rem;font-family:var(--f-mono);padding:3px 8px;border-radius:999px;border:1px solid var(--line)}
.estado.on{color:var(--ok);border-color:var(--ok)}

/* ---------- v0.2.0 · usuarios, acceso y auditoría ---------- */
.top-der{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.top-der .caseTag{margin-left:0}
.usuario{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.usuario-nombre{display:grid;line-height:1.15;text-align:right}
.usuario-nombre small{color:var(--muted);font-size:.75rem}
.btn:disabled{opacity:.55;cursor:not-allowed}
.error{color:var(--danger);font-weight:600;margin:0}
.hint{color:var(--muted);font-size:.88rem}
.chip{background:var(--soft);color:var(--muted)}

.acceso{min-height:100vh;display:grid;place-items:center;padding-block:32px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px}
.acceso-caja{width:min(420px,100%);display:grid;gap:18px}
.acceso-marca{flex-direction:column;align-items:flex-start;gap:2px}
.acceso-form{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:8px;padding:24px;display:grid;gap:14px}
.acceso-form h1{font-size:1.6rem;margin:0}
.acceso-form .f{display:grid;gap:4px}
.acceso-form input{padding:9px 10px;border:1px solid var(--line);border-radius:6px;background:var(--paper);font-size:1rem}
.acceso-form .btn.pri{padding:10px;font-size:1rem}

.estado-caso{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;padding-block:10px}
.estado-caso .chip{margin-top:0}
.fila{display:flex;gap:8px;align-items:center}
.fila select{flex:1;min-width:0}
tr.actual td{background:color-mix(in srgb,var(--accent) 10%,transparent)}
tr.baja td{color:var(--muted)}
.t select{padding:4px 6px;border:1px solid var(--line);border-radius:5px;background:var(--paper)}

.aviso-clave{border-color:var(--accent);margin-bottom:16px}
.clave-linea{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.clave-linea b{font-size:1.15rem;letter-spacing:.04em}

.filtros{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.filtros .f{display:grid;gap:4px}
.filtros input,.filtros select{padding:6px 8px;border:1px solid var(--line);border-radius:5px;background:var(--paper)}
.verif{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.audit td.mono{white-space:nowrap}
.audit td.detalle{min-width:240px;max-width:520px}
.audit .huella{font-size:.72rem;color:var(--muted);margin-top:2px}
.audit .accion{font-weight:600}
.audit tr.ac-ingreso_fallido .accion,.audit tr.ac-anular .accion{color:var(--danger)}
.audit tr.ac-modificar .accion,.audit tr.ac-crear .accion{color:var(--navy)}
body.solo-lectura #main .irow input,body.solo-lectura #main .exp input,body.solo-lectura #main textarea{background:var(--soft)}
@media (max-width:900px){.usuario-nombre{text-align:left}.top-der{margin-left:0;width:100%}}

tr.edicion td{background:var(--soft)}
.ed-form{padding-block:6px}
td.acciones{white-space:nowrap}
td.acciones .btn{margin:2px 0}

/* v0.3.0 · especialidades, croquis ampliado e indicios */
.esp-chip{font-family:var(--f-display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;padding:4px 10px;border-radius:4px;background:var(--navy);color:var(--panel)}
.esp-elegir{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:14px;align-items:center;margin-bottom:12px}
.esp-elegir select{width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:5px;background:var(--paper);font-weight:600}
.esp-elegir .f{display:grid;gap:4px}
.esp-elegir .hint{margin:0}
.esp-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:12px;margin-bottom:14px}
.esp-item{display:flex;gap:14px;align-items:flex-start;cursor:pointer}
.esp-item.on{border-color:var(--navy)}
.esp-txt{display:grid;gap:4px;min-width:0}
.esp-mods{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.esp-mods i{font-style:normal;font-size:.75rem;background:var(--soft);border:1px solid var(--line);border-radius:3px;padding:1px 6px}
.interruptor{position:relative;flex:none;width:42px;height:24px}
.interruptor input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.interruptor span{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:background .15s}
.interruptor span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--panel);transition:transform .15s}
.interruptor input:checked+span{background:var(--ok)}
.interruptor input:checked+span::after{transform:translateX(18px)}
.interruptor input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.tool-ind{border-color:var(--accent);font-weight:600}
#cq{aspect-ratio:auto}

.ind-lista{display:grid;gap:10px}
.ind{border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.ind summary{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 14px;cursor:pointer;list-style:none}
.ind summary::-webkit-details-marker{display:none}
.ind-num{display:grid;place-items:center;width:38px;height:34px;background:var(--accent);color:var(--accent-ink);font-family:var(--f-mono);font-weight:700;clip-path:polygon(0 0,100% 0,50% 100%);padding-bottom:10px}
.ind-tit{min-width:0}
.ind-tit b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ind-cuerpo{border-top:1px solid var(--line);padding:14px;display:grid;gap:14px}
.ind-cuerpo h3{font-family:var(--f-display);font-size:1rem;letter-spacing:.06em;text-transform:uppercase;margin:0}
.ind-estado{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ind .chip{margin-top:0}
.custodia-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:8px;align-items:end}
.custodia-form .f{display:grid;gap:4px}
.custodia-form input{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:5px;background:var(--paper)}
.exp select{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:5px;background:var(--paper)}
@media (max-width:700px){.esp-elegir{grid-template-columns:1fr}}

/* =========================================================
   v0.4.0 · diseño profesional, fondos, menú de usuario y responsive
   ========================================================= */
body{min-height:100vh}
/* Fondo interno: huella en escaneo, tenue y fijo detrás del contenido */
#app{position:relative;isolation:isolate}
#app::before{content:"";position:fixed;z-index:-1;pointer-events:none;right:-6vmin;bottom:-8vmin;width:min(78vmin,760px);aspect-ratio:1;
  background:url(../img/fondo-app.svg) center/contain no-repeat;opacity:var(--fondo-op)}
.panel{box-shadow:var(--sombra)}

/* Encabezado */
.top{position:sticky;top:0;z-index:20;background:var(--head);color:var(--ink);gap:12px;padding-block:8px;box-shadow:var(--sombra)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:var(--head)}
.top{top:env(safe-area-inset-top,0px)}
:root[data-tema="institucional"] .top{--ink:#EAF2FB;--muted:#A9BDD3;--line:#2B4E73;--panel:#0F3459;--soft:#123A63;--accent:#5FB0FF;--accent-ink:#04182C;--navy:#9CCBFF;--ok:#5EE0A8}
.brand{align-items:center;gap:12px;text-decoration:none;color:inherit;min-width:0}
.brand .logo{width:44px;height:44px;flex:none;filter:drop-shadow(0 0 6px rgba(34,211,238,.25))}
.brand-txt{display:grid;line-height:1.05;min-width:0}
.brand-txt small{margin-top:2px}
.estado{cursor:default;white-space:nowrap}
.estado.off{color:var(--danger);border-color:var(--danger)}
.estado.pend{color:var(--accent);border-color:var(--accent);cursor:pointer}
.top-der{gap:8px}

/* Menú de usuario (opciones, tema, instalar, clave, salir) */
.menu-usuario{position:relative}
.menu-usuario summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 8px 4px 4px;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.menu-usuario summary::-webkit-details-marker{display:none}
.menu-usuario[open] summary{border-color:var(--accent)}
.avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--navy);color:var(--panel);font-family:var(--f-display);font-weight:700;letter-spacing:.04em;flex:none}
.menu-panel{position:absolute;right:0;top:calc(100% + 6px);width:min(280px,calc(100vw - 32px));background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.18);padding:12px;display:grid;gap:8px;z-index:30}
.menu-panel .btn{width:100%;text-align:left}
.menu-panel .f{display:grid;gap:4px}
.menu-panel select{width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink)}
.temas{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.tema-op{border:2px solid var(--line);border-radius:8px;padding:0;height:40px;cursor:pointer;overflow:hidden;display:grid;grid-template-rows:1fr 6px;background:none}
.tema-op[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.tema-op i{display:block}
.menu-sep{height:1px;background:var(--line);margin:2px 0}

/* Navegación */
nav.rail{position:sticky;top:calc(61px + env(safe-area-inset-top,0px));align-self:start;max-height:calc(100vh - 61px);overflow:auto;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(6px)}
.tab{transition:background .12s}

/* Pantalla de ingreso: siempre en estilo nocturno sobre el fondo con huella */
.acceso{--panel:#0B1B2EE6;--ink:#E3F1FA;--muted:#93B3CB;--line:#1F4A6E;--soft:#0F2339;--paper:#07182A;--accent:#22D3EE;--accent-ink:#03121C;--danger:#FB7185;
  color:var(--ink);background:#040C18 url(../img/fondo-login.svg) 62% 50%/cover no-repeat;place-items:center start;
  padding-left:max(6vw,16px,env(safe-area-inset-left,0px));color-scheme:dark}
.acceso::after{content:"";position:fixed;inset:0;background:linear-gradient(90deg,rgba(4,12,24,.92) 0,rgba(4,12,24,.7) 38%,rgba(4,12,24,0) 70%);pointer-events:none}
.acceso-caja{position:relative;z-index:1;width:min(400px,100%)}
.acceso-marca{flex-direction:row!important;align-items:center!important;gap:14px!important}
.acceso-marca .logo{width:76px;height:76px;filter:drop-shadow(0 0 14px rgba(34,211,238,.35))}
.acceso-marca b{font-size:2.2rem!important}
.acceso-form{background:var(--panel);backdrop-filter:blur(10px);border-color:var(--line);border-top:3px solid var(--accent);box-shadow:0 20px 60px rgba(0,0,0,.45)}
.acceso-form input{background:var(--paper);color:var(--ink);border-color:var(--line)}
.acceso-form input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(34,211,238,.2)}
.acceso .hint{color:var(--muted)}
.acceso-pie{position:relative;z-index:1;color:var(--muted);font-size:.8rem;margin-top:4px}

/* Aviso de sincronización */
.sync-panel{border-color:var(--accent)}
.sync-panel .fila-sync{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 0;border-bottom:1px dotted var(--line)}
.sync-panel .fila-sync:last-child{border-bottom:0}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .top{padding-block:6px}
  .brand .logo{width:36px;height:36px}
  .brand b{font-size:1.35rem}
  .brand small{display:none}
  .top-der{margin-left:auto;width:auto}
  .usuario-nombre{display:none}
  .menu-usuario summary{padding:3px}
  nav.rail{top:calc(53px + env(safe-area-inset-top,0px));max-height:none;z-index:15;padding:6px max(8px,env(safe-area-inset-right,0px)) 6px max(8px,env(safe-area-inset-left,0px));gap:2px;scrollbar-width:none}
  nav.rail::-webkit-scrollbar{display:none}
  .tab{padding:8px 10px}
  .tab .n{display:none}
  main{padding-block:14px}
  h1{font-size:1.55rem}
  .acceso{place-items:end center;padding-bottom:max(24px,env(safe-area-inset-bottom,0px));background-position:70% 30%}
  .acceso::after{background:linear-gradient(0deg,rgba(4,12,24,.95) 0,rgba(4,12,24,.75) 55%,rgba(4,12,24,.2) 100%)}
}
@media (max-width:600px){
  .top{flex-wrap:nowrap}
  .top-der{flex-wrap:nowrap;gap:6px}
  .brand{gap:8px}
  .brand b{font-size:1.2rem}
  .brand-txt small,.estado{display:none}
  .top-der .caseTag{display:none}
  .esp-chip{display:none}
  #btnGuardar{padding:7px 10px}
  input,select,textarea{font-size:16px}          /* evita el zoom automático en iPhone */
  .panel{padding:12px}
  .btns .btn{flex:1 1 auto}
  .tools{gap:4px}
  .tool{padding:6px 8px;font-size:.82rem}
  .acceso-marca .logo{width:58px;height:58px}
  .acceso-marca b{font-size:1.8rem!important}
}
@media (prefers-reduced-motion:no-preference){
  .acceso-marca .logo{animation:latido 4s ease-in-out infinite}
  @keyframes latido{50%{filter:drop-shadow(0 0 22px rgba(34,211,238,.55))}}
}
:root[data-tema="institucional"] .menu-panel{--ink:#0E1E33;--muted:#4F6178;--line:#CDD9E6;--panel:#FFFFFF;--paper:#FBFCFE;--accent:#0B63C4;--accent-ink:#FFFFFF;--danger:#B42318}
.menu-panel a{color:var(--accent)}

/* =========================================================
   v0.4.1 · menú lateral: buscador, grupos plegables, más usados, ayuda y cajón en celular
   ========================================================= */
nav.rail{display:flex;flex-direction:column;gap:6px;padding:12px 10px 20px}
.rail-top{display:grid;gap:8px;position:sticky;top:-12px;z-index:2;background:inherit;padding-block:4px 6px;margin-top:-4px}
.busca{position:relative}
.busca input{width:100%;padding:8px 30px 8px 10px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink)}
.busca input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.busca kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:var(--f-mono);font-size:.72rem;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 5px;pointer-events:none}
.busca input:not(:placeholder-shown)+kbd{display:none}
.rail-ctrl{display:flex;gap:4px}
.rail-ctrl button{flex:1;border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:6px;padding:4px 6px;font-size:.76rem;cursor:pointer}
.rail-ctrl button:hover{color:var(--ink);border-color:var(--muted)}
.rail-ctrl #navCompacto{flex:0 0 32px;font-size:.95rem}

.grupo{display:grid;gap:2px}
.grp-btn{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;cursor:pointer;padding:8px 8px 4px;color:var(--muted);
  font-family:var(--f-display);text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;text-align:left}
.grp-btn:hover{color:var(--ink)}
.grp-btn .cuenta{font-family:var(--f-mono);letter-spacing:0;font-size:.68rem;opacity:.7}
.grp-btn i{margin-left:auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s;margin-right:4px}
.grupo.plegado .grp-btn i{transform:rotate(-45deg)}
.grupo.plegado .grp-items{display:none}
.rail.buscando .grupo.plegado .grp-items{display:grid}     /* al buscar se ven todos los resultados */
.rail.buscando .grupo.sin-coincidencias,.rail.buscando .grupo.usados{display:none}
.grp-items{display:grid;gap:2px}
.usados .grp-btn{color:var(--accent)}
.usados{border-bottom:1px dashed var(--line);padding-bottom:6px}

.nav-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px}
.nav-item.oculto{display:none}
.nav-item .tab{min-width:0}
.tab-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.info{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;
  font-family:Georgia,serif;font-style:italic;font-weight:700;font-size:.8rem;display:grid;place-items:center;opacity:.55}
.nav-item:hover .info,.info[aria-expanded="true"],.info:focus-visible{opacity:1}
.info[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.ayuda-item{grid-column:1/-1;margin:2px 4px 8px 32px;padding:8px 10px;border-left:3px solid var(--accent);background:var(--soft);border-radius:0 6px 6px 0;font-size:.82rem;line-height:1.4}
.ayuda-item p{margin:0 0 4px}
.ayuda-item p:last-child{margin:0}
.sin-res{padding:6px 8px;margin:0}

.ayuda-modulo{margin:-8px 0 16px;max-width:80ch;font-size:.9rem}
.ayuda-modulo summary{cursor:pointer;color:var(--navy);font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:6px}
.ayuda-modulo summary::-webkit-details-marker{display:none}
.ayuda-modulo summary::before{content:"i";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1px solid currentColor;font-family:Georgia,serif;font-style:italic;font-size:.72rem}
.ayuda-modulo[open]{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:10px 14px}
.ayuda-modulo p{margin:6px 0 0}

/* Menú achicado (solo escritorio): se ven los códigos M1…A3 */
.shell{transition:grid-template-columns .18s}
.shell.rail-compacta{grid-template-columns:72px 1fr}
.rail-compacta nav.rail{padding-inline:6px}
.rail-compacta .busca,.rail-compacta .grp-btn span,.rail-compacta .grp-btn .cuenta,.rail-compacta .tab-txt,.rail-compacta .tab .st,
.rail-compacta .info,.rail-compacta .ayuda-item,.rail-compacta #navPlegar,.rail-compacta #navDesplegar,.rail-compacta .usados{display:none!important}
.rail-compacta .grp-btn{justify-content:center;padding:8px 0 2px}
.rail-compacta .grp-btn i{margin:0}
.rail-compacta .nav-item{grid-template-columns:1fr}
.rail-compacta .tab{justify-content:center;padding:9px 0}
.rail-compacta .tab .n{width:auto;font-size:.8rem;color:var(--ink)}
.rail-compacta .rail-ctrl{justify-content:center}
.rail-compacta .rail-ctrl #navCompacto{flex:0 0 40px}

/* Botón de menú y cajón (celular y tablet) */
.btn-menu{display:none;flex:none;width:40px;height:40px;border:1px solid var(--line);border-radius:8px;background:var(--panel);cursor:pointer;padding:9px 8px;flex-direction:column;justify-content:space-between}
.btn-menu span{display:block;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.cajon-abierto .btn-menu span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.cajon-abierto .btn-menu span:nth-child(2){opacity:0}
.cajon-abierto .btn-menu span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.velo{display:none}
@media (max-width:900px){
  .btn-menu{display:flex}
  .solo-escritorio{display:none}
  .shell,.shell.rail-compacta{grid-template-columns:1fr}
  nav.rail{position:fixed;z-index:40;top:0;bottom:0;left:0;align-self:stretch;height:100dvh;width:min(86vw,330px);max-height:none;overflow:auto;flex-direction:column;
    padding:calc(14px + env(safe-area-inset-top,0px)) 12px calc(20px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));
    background:var(--panel);border-right:1px solid var(--line);transform:translateX(-105%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.35)}
  .cajon-abierto nav.rail{transform:none}
  .velo{display:block;position:fixed;inset:0;z-index:35;background:rgba(3,10,20,.5);opacity:0;pointer-events:none;transition:opacity .2s}
  .cajon-abierto .velo{opacity:1;pointer-events:auto}
  .rail .grp{display:block}
  .tab{white-space:normal}
  .tab .n{display:inline}
  .rail-top{top:-14px}
  .info{opacity:1}
}
@media (prefers-reduced-motion:reduce){nav.rail,.shell,.btn-menu span{transition:none}}
@media (max-width:900px){.tab[aria-selected="true"]{box-shadow:inset 3px 0 0 var(--accent)}}
.rail-compacta .grupo.plegado .grp-items{display:grid}
.rail-compacta .grp-btn{pointer-events:none;padding:4px 0}
.rail-compacta .grp-btn i{display:none}
.rail-compacta .grp-btn::after{content:"";display:block;width:28px;height:1px;background:var(--line)}

/* v0.5.0 · informe en PDF y Word */
.inf-acciones{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.inf-estado{display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-width:0}
.inf-estado .chip{margin-top:0}
.report{background:#FFFFFF;color:#18222B;--muted:#5A6774;--line:#D2D9E0;--navy:#1F4E79;box-shadow:0 2px 12px rgba(0,0,0,.12)}
.report .hint{color:#5A6774}
.rep-membrete{display:flex;align-items:center;gap:12px;border-bottom:2px solid #1F4E79;padding-bottom:10px;margin-bottom:18px}
.rep-membrete img{width:44px;height:44px}
.rep-membrete div{display:grid;line-height:1.25}
.rep-membrete b{color:#1F4E79;font-size:1.1rem}
.rep-membrete span{color:#5A6774;font-size:.82rem}
.rep-membrete em{margin-left:auto;color:#B42318;font-style:normal;font-weight:700;letter-spacing:.08em}
.report h2{border:0;padding:0;margin:0;text-transform:uppercase;letter-spacing:.03em}
.rep-sub{color:#1F4E79;margin:2px 0 8px}
.report h3{color:#1F4E79}
.rep-firma{display:grid;justify-items:center;gap:2px;margin-top:34px}
.rep-firma p{justify-self:end;margin:0 0 44px}
.rep-firma .raya{width:240px;border-top:1px solid #18222B;margin-bottom:4px}
.rep-pie{margin-top:28px;padding-top:8px;border-top:1px solid #D2D9E0;font-size:.75rem;color:#5A6774;word-break:break-all}

/* v0.6.0 · fotografías */
.foto-carga{display:flex;gap:16px;align-items:end;flex-wrap:wrap;margin-bottom:12px}
.foto-carga .f{display:grid;gap:4px;min-width:min(260px,100%)}
.foto-carga select,.filtro-fotos select{padding:7px 8px;border:1px solid var(--line);border-radius:6px;background:var(--paper)}
.foto-carga label.btn{display:inline-flex;align-items:center}
.filtro-fotos{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0 12px}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px}
.foto{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sombra)}
.foto.anulada{opacity:.6}
.foto.anulada img{filter:grayscale(1)}
.foto-img{border:0;padding:0;background:var(--soft);cursor:zoom-in;display:block;aspect-ratio:4/3;width:100%}
.foto-img img{width:100%;height:100%;object-fit:cover;display:block}
.foto figcaption{padding:10px;display:grid;gap:6px}
.foto-cab{display:flex;justify-content:space-between;align-items:center;gap:8px}
.foto-cab .chip{margin-top:0}
.foto select,.foto input{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:5px;background:var(--paper)}
.foto-meta{margin:0;font-size:.72rem;word-break:break-all}
.foto-acc{display:flex;gap:6px;flex-wrap:wrap}
.foto-acc a.btn{text-decoration:none;color:inherit}
.anular-box{display:flex;gap:6px}
.visor{border:0;padding:0;max-width:min(96vw,1400px);max-height:94vh;background:#000;border-radius:8px}
.visor::backdrop{background:rgba(0,0,0,.8)}
.visor img{display:block;max-width:100%;max-height:calc(94vh - 56px);margin:auto}
.visor-pie{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;background:#111;color:#ddd;font-size:.8rem;word-break:break-all}
.rep-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.rep-fotos figure{margin:0}
.rep-fotos img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid #D2D9E0}
.rep-fotos figcaption{display:grid;font-size:.78rem;gap:2px}
.rep-fotos .mono{font-size:.7rem;color:#5A6774}

/* v0.7.0 · ubicación en el mapa */
.ubic-datos{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.ubic-datos .f{display:grid;gap:4px;width:min(170px,100%)}
.ubic-datos input{padding:6px 8px;border:1px solid var(--line);border-radius:5px;background:var(--paper);font-family:var(--f-mono)}
.ubic-ctrl{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:12px 0 8px}
.ubic-ctrl a{color:var(--navy)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.seg-b{border:0;background:var(--panel);padding:6px 12px;cursor:pointer;font-weight:600;color:var(--muted)}
.seg-b[aria-pressed="true"]{background:var(--navy);color:var(--panel)}
.mapa{height:min(420px,60vh);border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--soft);display:grid;place-items:center;isolation:isolate}
.mapa .hint{padding:16px;text-align:center}
.mapa.leaflet-container{display:block}