:root{--bg:#f4f6f5;--card:#fff;--tx:#14201d;--tx2:#5b6b66;--bd:#dbe3e0;--pri:#0f766e;--pri-tx:#fff;--pri-s:#e1f3f0;
--ok:#15803d;--ok-s:#dcfce7;--warn:#b45309;--warn-s:#fef3c7;--err:#b91c1c;--err-s:#fee2e2;--inf:#1d4ed8;--inf-s:#dbeafe;--sombra:0 1px 3px rgba(0,0,0,.08);--r:12px}
@media (prefers-color-scheme:dark){:root{--bg:#0e1513;--card:#17211e;--tx:#e8efed;--tx2:#9db0aa;--bd:#2a3a36;--pri:#2dd4bf;--pri-tx:#06201c;--pri-s:#14302b;
--ok:#4ade80;--ok-s:#10301c;--warn:#fbbf24;--warn-s:#33280a;--err:#f87171;--err-s:#3a1212;--inf:#93c5fd;--inf-s:#14233f;--sombra:none}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1,h2,h3{margin:0 0 .5rem;line-height:1.2}h1{font-size:1.35rem}h2{font-size:1.1rem}h3{font-size:1rem;color:var(--tx2);font-weight:600}
small,.suave{color:var(--tx2)}
button,input,select,textarea{font:inherit;color:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:.5rem 1rem;border-radius:10px;border:1px solid var(--bd);background:var(--card);cursor:pointer;text-decoration:none;font-weight:600}
.btn:hover{border-color:var(--pri)}.btn:disabled{opacity:.5;cursor:default}
.btn.pri{background:var(--pri);color:var(--pri-tx);border-color:var(--pri)}
.btn.peligro{color:var(--err);border-color:var(--err)}
.btn.chico{min-height:36px;padding:.25rem .75rem;font-size:.9rem}
.icono{border:0;background:transparent;font-size:1.2rem;cursor:pointer;min-width:44px;min-height:44px}
.acciones{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
/* Layout */
.shell{min-height:100vh;display:flex}
.lado{display:contents}.lado h1{display:none}
.logo{display:block;border-radius:50%;background:#fff;flex:none}
.caja-login .logo{margin:0 auto .75rem}
.marca-barra{display:inline-flex;align-items:center;gap:.5rem}
#instalar-slot{max-width:980px;margin:0 auto;padding:.75rem 16px 0}
#instalar-slot:empty{display:none}
.cuerpo{flex:1;min-width:0;padding-bottom:76px}
.barra{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.6rem 1rem;background:var(--card);border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:5}
.barra b{font-size:1.05rem}
#vista{max-width:980px;margin:0 auto;padding:1rem 16px}
nav.menu{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--card);border-top:1px solid var(--bd);z-index:6;padding-bottom:env(safe-area-inset-bottom)}
nav.menu button{flex:1;border:0;background:transparent;padding:.45rem .1rem;font-size:.7rem;color:var(--tx2);display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;min-height:56px}
nav.menu button span.ic{font-size:1.25rem}
nav.menu button.act{color:var(--pri);font-weight:700}
@media (min-width:900px){
  .lado{display:block;width:220px;background:var(--card);border-right:1px solid var(--bd);padding:1rem .75rem;position:sticky;top:0;height:100vh}
  .lado h1{display:flex;align-items:center;gap:.6rem;padding:0 .5rem 1rem;font-size:1.15rem}
  .cuerpo{padding-bottom:0}
  nav.menu{position:static;flex-direction:column;border:0;background:transparent;padding:0}
  nav.menu button{flex-direction:row;justify-content:flex-start;gap:.6rem;font-size:1rem;padding:.6rem .75rem;border-radius:10px;min-height:44px}
  nav.menu button.act{background:var(--pri-s)}
  .barra .solo-movil{display:none}
}
nav.menu button.solo-lado{display:none}
@media (min-width:900px){nav.menu button.solo-lado{display:flex}nav.menu button.solo-movil-nav{display:none}}
/* Tarjetas */
.titulo-fila{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem}
.lista{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.tarjeta{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:.9rem 1rem;box-shadow:var(--sombra)}
.tarjeta.click{cursor:pointer}.tarjeta.click:hover{border-color:var(--pri)}
.tarjeta .t{font-weight:700;margin-bottom:.15rem}
.tarjeta .l{font-size:.92rem;color:var(--tx2)}
.seccion{margin-top:1.4rem}
.fila{display:flex;justify-content:space-between;gap:.75rem;padding:.5rem 0;border-bottom:1px solid var(--bd);flex-wrap:wrap}
.fila:last-child{border-bottom:0}
.dato{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.5rem 1rem}
.dato div b{display:block;font-size:.78rem;color:var(--tx2);font-weight:600}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.75rem}
.cifra{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:.8rem 1rem}
.cifra b{display:block;font-size:1.6rem}.cifra span{color:var(--tx2);font-size:.85rem}
.badge{display:inline-block;padding:.1rem .55rem;border-radius:99px;font-size:.78rem;font-weight:700;background:var(--pri-s);color:var(--pri)}
.badge.ok{background:var(--ok-s);color:var(--ok)}.badge.warn{background:var(--warn-s);color:var(--warn)}
.badge.err{background:var(--err-s);color:var(--err)}.badge.inf{background:var(--inf-s);color:var(--inf)}.badge.gris{background:var(--bd);color:var(--tx2)}
.vacio{padding:1.5rem;text-align:center;color:var(--tx2);background:var(--card);border:1px dashed var(--bd);border-radius:var(--r)}
.grafica{position:relative;height:260px;margin:.5rem 0}.grafica.chica{height:220px}
.tabla-scroll{overflow-x:auto}.tabla-scroll table{width:100%;border-collapse:collapse}.tabla-scroll th,.tabla-scroll td{padding:.3rem .45rem;text-align:left;border-bottom:1px solid var(--bd);font-size:.9rem}
.pestanas{display:flex;gap:.4rem;margin-bottom:.75rem;flex-wrap:wrap}
.pestanas button{border:1px solid var(--bd);background:var(--card);border-radius:99px;padding:.3rem .9rem;cursor:pointer;min-height:36px}
.pestanas button.act{background:var(--pri);color:var(--pri-tx);border-color:var(--pri)}
/* Formularios */
.campo{display:block;margin-bottom:.8rem}
.campo .etq{display:block;font-size:.85rem;font-weight:600;margin-bottom:.2rem}
.campo input,.campo select,.campo textarea{width:100%;min-height:44px;padding:.5rem .65rem;border:1px solid var(--bd);border-radius:10px;background:var(--card)}
.campo textarea{min-height:80px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--pri);outline-offset:0}
.campo small{display:block;margin-top:.15rem}
.check{display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem;min-height:44px}
.check input{width:22px;height:22px}
.grid2{display:grid;grid-template-columns:1fr;gap:0 .75rem}@media (min-width:560px){.grid2{grid-template-columns:1fr 1fr}}
.aviso{padding:.6rem .8rem;border-radius:10px;background:var(--warn-s);color:var(--warn);margin-bottom:.8rem;font-size:.92rem}
.aviso.inf{background:var(--inf-s);color:var(--inf)}
.pin-grande{font-size:2.2rem;letter-spacing:.35rem;text-align:center;font-weight:800;padding:.8rem;background:var(--pri-s);border-radius:12px;margin:.5rem 0}
/* Modal */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center;z-index:50}
.modal{background:var(--bg);width:100%;max-width:640px;max-height:92vh;display:flex;flex-direction:column;border-radius:16px 16px 0 0}
.modal-cab{display:flex;align-items:center;justify-content:space-between;padding:.4rem .5rem .4rem 1rem;border-bottom:1px solid var(--bd)}
.modal-cab h2{margin:0}
.modal-cuerpo{padding:1rem;overflow:auto}
tr.alto td{color:var(--err);font-weight:700}
.tabla{width:100%;border-collapse:collapse}.tabla th,.tabla td{text-align:left;padding:.45rem .4rem;border-bottom:1px solid var(--bd);font-size:.92rem}.tabla th{color:var(--tx2);font-size:.78rem}
.scroll-x{overflow-x:auto}
@media (min-width:640px){.overlay{align-items:center}.modal{border-radius:16px}}
.visor{width:100%;height:65vh;border:0}.visor-img{max-width:100%;max-height:65vh;display:block;margin:0 auto}
/* Login */
.centro{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}
.caja-login{width:100%;max-width:380px;background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:1.5rem;box-shadow:var(--sombra)}
.caja-login h1{text-align:center;margin-bottom:1rem}
#cargando{position:fixed;inset:0;background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;z-index:100}
#cargando[hidden]{display:none}
.rueda{width:44px;height:44px;border:4px solid #fff;border-top-color:var(--pri);border-radius:50%;animation:giro .8s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
#toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:120;display:grid;gap:.4rem;width:min(92vw,420px)}
#toast div{padding:.7rem 1rem;border-radius:10px;background:var(--tx);color:var(--bg);box-shadow:0 4px 14px rgba(0,0,0,.25)}
#toast div.err{background:var(--err);color:#fff}#toast div.ok{background:var(--ok);color:#fff}
/* Fase 3: fotos, contadores, firma */
.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--pri-s);color:var(--pri);display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex:none;vertical-align:middle}
.avatar.g{width:84px;height:84px;font-size:1.6rem}
.portada{width:100%;max-height:220px;object-fit:cover;border-radius:var(--r);display:block;margin-bottom:.75rem;background:var(--pri-s)}
.cabeza{display:flex;gap:.75rem;align-items:center}
.cnt{display:inline-block;min-width:1.25rem;padding:0 .35rem;border-radius:99px;background:var(--err);color:#fff;font-size:.72rem;font-weight:700;text-align:center;margin-left:.3rem}
nav.menu button{position:relative}
.lienzo-firma{width:100%;height:150px;border:1px dashed var(--tx2);border-radius:10px;background:#fff;touch-action:none;display:block}
.fotos4{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.dano{border:1px solid var(--bd);border-radius:10px;padding:.6rem;margin-top:.5rem}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media (max-width:700px){.dos-col{grid-template-columns:1fr}}
.barra-km{height:8px;border-radius:99px;background:var(--bd);overflow:hidden;margin:.4rem 0}.barra-km i{display:block;height:100%;background:var(--ok)}
.barra-km.warn i{background:var(--warn)}.barra-km.err i{background:var(--err)}
.alerta.nueva{background:var(--inf-s);border-radius:8px;padding-left:.5rem}.err{color:var(--err)}#campana{position:relative}