/* Refugio: hoja de estilos. Las variables de color cambian con el modo oscuro. */
:root{
  --papel:#DCE3DF; --panel:#EBF0ED; --tinta:#1E2B2A; --tenue:#52625F; --linea:#B1BEB8;
  --musgo:#3A5E45; --ocre:#96610A; --oxido:#99392A; --agua:#2B6480;
  --sobre:#F3F6F4; --velo:rgba(20,30,29,.55);
  --noche-bg:#1E2B2A; --noche-tx:#DCE3DF; --tarde-bg:#E6DFC9;
  --z-suburbio:#D9CFA8; --z-centro:#DDB9AE; --z-industrial:#B9C6CF; --z-rural:#D3DBA4; --z-bosque:#A9C4AB;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --papel:#141D1C; --panel:#1D2927; --tinta:#DCE4DF; --tenue:#98A8A3; --linea:#35443F;
    --musgo:#8AB595; --ocre:#E0A83A; --oxido:#E38472; --agua:#82BAD4;
    --sobre:#10201A; --velo:rgba(0,0,0,.6);
    --noche-bg:#0C1312; --noche-tx:#DCE4DF; --tarde-bg:#2B2A1E;
    --z-suburbio:#4B4630; --z-centro:#553A33; --z-industrial:#36444E; --z-rural:#434B26; --z-bosque:#2C4634;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --papel:#141D1C; --panel:#1D2927; --tinta:#DCE4DF; --tenue:#98A8A3; --linea:#35443F;
  --musgo:#8AB595; --ocre:#E0A83A; --oxido:#E38472; --agua:#82BAD4;
  --sobre:#10201A; --velo:rgba(0,0,0,.6);
  --noche-bg:#0C1312; --noche-tx:#DCE4DF; --tarde-bg:#2B2A1E;
  --z-suburbio:#4B4630; --z-centro:#553A33; --z-industrial:#36444E; --z-rural:#434B26; --z-bosque:#2C4634;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--papel);color:var(--tinta);
  font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:16px;line-height:1.45}
h1,h2,h3,.slab{font-family:'Zilla Slab',Rockwell,Georgia,serif}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}

.app{max-width:560px;margin:0 auto;padding:12px 14px 110px;display:grid;gap:12px}
@media (min-width:900px){
  .app{max-width:1000px;grid-template-columns:360px 1fr;align-items:start;gap:20px;padding-top:24px}
  .col-estado{position:sticky;top:16px}
}
.col-estado,.col-vista{display:grid;gap:12px;min-width:0}

/* Cabecera: el cielo cambia con el momento del día */
.cab{border-radius:14px;padding:14px 16px;background:var(--panel);border:1px solid var(--linea)}
.cab.b1{background:var(--tarde-bg)}
.cab.b2{background:var(--noche-bg);color:var(--noche-tx);border-color:var(--noche-bg)}
.cab-fila{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cab h1{font-size:2rem;line-height:1.1;font-weight:700}
.cab-zona{font-size:.95rem;opacity:.85}
.bloques{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0 10px}
.bloques li{font-size:.85rem;text-align:center;padding:5px 4px;border-radius:999px;border:1px solid currentColor;opacity:.45}
.bloques li.ahora{opacity:1;background:var(--tinta);color:var(--papel);border-color:var(--tinta);font-weight:600}
.cab.b2 .bloques li.ahora{background:var(--noche-tx);color:var(--noche-bg);border-color:var(--noche-tx)}
.estado{font-size:.95rem}

/* Vitales */
.vitales{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.vital-top{display:flex;justify-content:space-between;font-size:.88rem}
.vital-top b{font-weight:600}
.barra{height:8px;border-radius:999px;background:var(--linea);overflow:hidden;margin-top:3px}
.barra i{display:block;height:100%;border-radius:999px;background:var(--musgo)}
.barra i.medio{background:var(--ocre)}
.barra i.mal{background:var(--oxido)}

/* Reservas */
.reservas{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.res{background:var(--panel);border:1px solid var(--linea);border-radius:10px;padding:6px 2px;text-align:center}
.res b{display:block;font-family:'Zilla Slab',Rockwell,Georgia,serif;font-size:1.35rem;line-height:1.1}
.res span{font-size:.72rem;color:var(--tenue)}
.equipo{font-size:.88rem;color:var(--tenue)}

.rapidas{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}

/* Botones */
.btn{min-height:44px;padding:8px 12px;border-radius:10px;border:1px solid var(--tinta);background:transparent;cursor:pointer;
  text-align:center;line-height:1.2}
.btn small{display:block;font-size:.78rem;color:var(--tenue);margin-top:2px}
.btn.lleno{background:var(--tinta);color:var(--papel)}
.btn.lleno small{color:inherit;opacity:.8}
.btn.peligro{border-color:var(--oxido);color:var(--oxido)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn:focus-visible,.pest button:focus-visible,.hex:focus-visible{outline:3px solid var(--ocre);outline-offset:2px}
.btn:active:not(:disabled){transform:translateY(1px)}

/* Pestañas */
.pest{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:2px solid var(--tinta)}
.pest button{min-height:44px;background:none;border:0;border-radius:8px 8px 0 0;cursor:pointer;font-family:'Zilla Slab',Rockwell,Georgia,serif;font-size:1.05rem}
.pest button[aria-selected="true"]{background:var(--tinta);color:var(--papel);font-weight:700}

.vista{display:grid;gap:12px;min-width:0}
.nota{font-size:.92rem;color:var(--tenue)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.prio{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.9rem}
.seg{display:inline-grid;grid-template-columns:1fr 1fr;border:1px solid var(--tinta);border-radius:999px;overflow:hidden}
.seg button{min-height:36px;padding:4px 14px;border:0;background:none;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--tinta);color:var(--papel)}

.fichas{display:grid;gap:8px}
.ficha{background:var(--panel);border:1px solid var(--linea);border-radius:12px;padding:12px;display:grid;gap:8px}
.ficha.hecha{border-left:5px solid var(--musgo)}
.ficha.agotada{opacity:.6}
.ficha h3{font-size:1.12rem;line-height:1.2}
.ficha-meta{font-size:.88rem;color:var(--tenue)}
.riesgo-alto{color:var(--oxido);font-weight:600}
.marca{font-size:.85rem;font-weight:600;color:var(--musgo)}

.medidor{background:var(--panel);border:1px solid var(--linea);border-radius:12px;padding:12px}
.medidor h2{font-size:1.2rem}
.medidor .barra{height:12px;margin:8px 0}

.mapa{background:var(--panel);border:1px solid var(--linea);border-radius:12px;padding:8px}
.mapa svg{display:block;width:100%;height:auto;max-height:60vh}
.hex polygon{stroke:var(--linea);stroke-width:1.5;fill:var(--papel)}
.hex text{font-family:'Public Sans',system-ui,sans-serif;font-size:9.5px;fill:var(--tinta);text-anchor:middle;pointer-events:none}
.hex.z-suburbio polygon{fill:var(--z-suburbio)} .hex.z-centro polygon{fill:var(--z-centro)}
.hex.z-industrial polygon{fill:var(--z-industrial)} .hex.z-rural polygon{fill:var(--z-rural)} .hex.z-bosque polygon{fill:var(--z-bosque)}
.hex.oculta polygon{stroke-dasharray:4 3}
.hex.vecina{cursor:pointer}
.hex.vecina polygon{stroke:var(--tinta)}
.hex.aqui polygon{stroke:var(--tinta);stroke-width:4}
.hex.sel polygon{stroke:var(--ocre);stroke-width:4}
.hex circle{fill:var(--tinta)}

.diario li{padding:8px 0;border-bottom:1px solid var(--linea);font-size:.95rem}
.diario time{display:block;font-size:.8rem;color:var(--tenue)}
.t-mal{color:var(--oxido)} .t-bien{color:var(--musgo)} .t-aviso{color:var(--ocre)}

.pie{display:grid;gap:8px;margin-top:8px}
details{background:var(--panel);border:1px solid var(--linea);border-radius:12px;padding:10px 12px}
summary{cursor:pointer;font-weight:600;min-height:28px}
details ul{list-style:disc;padding-left:20px;margin-top:8px;font-size:.92rem;display:grid;gap:4px}

/* Aviso de lo último que pasó */
.aviso{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;pointer-events:none;
  padding:0 10px calc(10px + env(safe-area-inset-bottom,0px))}
.aviso-caja{pointer-events:auto;max-width:540px;width:100%;background:var(--tinta);color:var(--papel);border-radius:12px;padding:12px 14px;
  font-size:.95rem;display:grid;gap:4px;cursor:pointer;border:0;text-align:left}
.aviso-caja p.t-mal{color:#F0A596} .aviso-caja p.t-bien{color:#A9D4B3} .aviso-caja p.t-aviso{color:#EBC574}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .aviso-caja p.t-mal{color:#8E2F21}
  :root:not([data-theme="light"]) .aviso-caja p.t-bien{color:#2F5A3B}
  :root:not([data-theme="light"]) .aviso-caja p.t-aviso{color:#7A4E05}
}
:root[data-theme="dark"] .aviso-caja p.t-mal{color:#8E2F21}
:root[data-theme="dark"] .aviso-caja p.t-bien{color:#2F5A3B}
:root[data-theme="dark"] .aviso-caja p.t-aviso{color:#7A4E05}
@media (prefers-reduced-motion:no-preference){
  .aviso-caja{animation:sube .18s ease-out}
  @keyframes sube{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
}

/* Diálogo de eventos */
.velo{position:fixed;inset:0;z-index:30;background:var(--velo);display:flex;align-items:flex-end;justify-content:center;
  padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px))}
.velo[hidden]{display:none}
@media (min-width:700px){.velo{align-items:center}}
.dialogo{background:var(--papel);color:var(--tinta);border:2px solid var(--tinta);border-radius:16px;padding:18px;max-width:480px;width:100%;
  display:grid;gap:12px;max-height:90vh;overflow:auto}
.dialogo h2{font-size:1.4rem;line-height:1.15}
.dialogo .pista{border-left:4px solid var(--ocre);padding-left:10px;font-style:italic}
.dialogo .ops{display:grid;gap:8px}
.paso{display:grid;grid-template-columns:1fr 44px 40px 44px;align-items:center;gap:6px}
.paso b{text-align:center;font-family:'Zilla Slab',Rockwell,Georgia,serif;font-size:1.2rem}
.paso .btn{padding:0}

/* Mapa táctico */
.dialogo.tactico{max-width:560px;padding:14px;gap:10px}
.tac-cab h2{font-size:1.3rem}
.tac-datos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tac-datos li{background:var(--panel);border:1px solid var(--linea);border-radius:10px;padding:4px 2px;text-align:center}
.tac-datos b{display:block;font-family:'Zilla Slab',Rockwell,Georgia,serif;font-size:1.15rem;line-height:1.1}
.tac-datos span{font-size:.72rem;color:var(--tenue)}
#tac-lienzo{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--linea);touch-action:manipulation;cursor:pointer}
.tac-msg{min-height:1.4em;font-size:.95rem}
.tac-ops{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tactico details{padding:8px 10px}