/* SecretarIA VU — sistema visual
   Concepto: «el libro de la secretaría» — azul tinta y papel claro, dorado solo para lo oficial (votos, sellos),
   títulos en tipografía de libro (Literata) y la interfaz en una sans clara (Figtree). */
:root{
  --tinta:#16324f; --tinta-2:#21466d; --tinta-claro:#e8eef5;
  --oro:#a87b1f; --oro-claro:#f6edd9;
  --fondo:#f3f5f7; --papel:#ffffff; --linea:#dde3ea; --linea-2:#c9d2dc;
  --texto:#1b2430; --suave:#5b6878; --tenue:#8a96a5;
  --ok:#1f7a55; --ok-claro:#e3f3ec; --aviso:#9a6400; --aviso-claro:#fdf3dc; --mal:#b42318; --mal-claro:#fdecea;
  --radio:10px; --sombra:0 1px 2px rgba(22,50,79,.06),0 4px 14px rgba(22,50,79,.06);
  --serif:"Literata",Georgia,"Times New Roman",serif; --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:var(--fondo);color:var(--texto);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--tinta-2)}
h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--tinta);text-wrap:balance;line-height:1.25;margin:0}
h1{font-size:1.6rem} h2{font-size:1.2rem} h3{font-size:1.02rem}
:focus-visible{outline:3px solid #7aa7d6;outline-offset:2px}

/* ---- armazón ---- */
.app{display:grid;grid-template-columns:236px 1fr;min-height:100%}
.lado{background:var(--tinta);color:#dbe6f2;padding:18px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow:auto}
.marca{display:flex;align-items:center;gap:10px;padding:4px 8px 16px;color:#fff;text-decoration:none}
.marca-sello{width:36px;height:36px;border-radius:50%;border:2px solid var(--oro);display:grid;place-items:center;font:700 13px var(--serif);color:#f3dfae;flex:none}
.marca b{font:600 1.05rem var(--serif);display:block;letter-spacing:.2px}
.marca small{font-size:11.5px;color:#9fb3c9}
.nav-grupo{font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:#8ea5bd;padding:14px 10px 4px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:#dbe6f2;text-decoration:none;font-size:14.2px}
.nav a:hover{background:rgba(255,255,255,.07)}
.nav a.on{background:rgba(255,255,255,.12);color:#fff;font-weight:600}
.nav a .ico{width:18px;text-align:center;opacity:.9}
.nav a .pronto{margin-left:auto;font-size:10px;background:rgba(255,255,255,.12);padding:1px 7px;border-radius:99px;color:#c5d3e2}
.lado-pie{margin-top:auto;padding:12px 10px 0;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:#a9bdd2}
.lado-pie b{color:#fff;display:block;font-size:13.5px}
.lado-pie a{color:#f3dfae;text-decoration:none}
.main{padding:24px 28px 48px;min-width:0}
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.top .sub{color:var(--suave);margin-top:4px;font-size:14px}
.acciones{display:flex;gap:8px;flex-wrap:wrap}

/* ---- piezas ---- */
.card{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra)}
.pad{padding:18px 20px}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--tinta);background:var(--tinta);color:#fff;font:600 14px var(--sans);padding:8px 15px;border-radius:8px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--tinta-2)}
.btn.sec{background:var(--papel);color:var(--tinta);border-color:var(--linea-2)}
.btn.sec:hover{background:var(--tinta-claro)}
.btn.sm{padding:5px 11px;font-size:13px}
.btn.wa{background:#1f8f4e;border-color:#1f8f4e}
.btn[disabled]{opacity:.55;cursor:default}
.campo{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--suave);font-weight:500;min-width:0}
.campo input,.campo select,.campo textarea,.in{font:15px var(--sans);color:var(--texto);background:#fff;border:1px solid var(--linea-2);border-radius:8px;padding:8px 10px;width:100%}
.campo textarea{min-height:76px;resize:vertical}
.campo .ayuda{font-weight:400;color:var(--tenue);font-size:12px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px 14px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:99px;background:var(--tinta-claro);color:var(--tinta);white-space:nowrap}
.chip.ok{background:var(--ok-claro);color:var(--ok)} .chip.aviso{background:var(--aviso-claro);color:var(--aviso)} .chip.mal{background:var(--mal-claro);color:var(--mal)} .chip.oro{background:var(--oro-claro);color:var(--oro)}
.vacio{color:var(--suave);text-align:center;padding:30px 12px}
.toast{position:fixed;right:18px;bottom:76px;background:var(--tinta);color:#fff;padding:10px 16px;border-radius:9px;box-shadow:0 8px 24px rgba(0,0,0,.2);z-index:90;max-width:min(420px,calc(100vw - 36px))}
.toast.mal{background:var(--mal)}
.aviso-caja{border-radius:9px;padding:10px 14px;font-size:14px;background:var(--aviso-claro);color:#6b4600;border:1px solid #f0dcaa}
.aviso-caja.mal{background:var(--mal-claro);color:var(--mal);border-color:#f5c2bd}

/* ---- tablas ---- */
.tabla-env{overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{text-align:left;font-size:11.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--suave);font-weight:600;padding:9px 12px;border-bottom:1px solid var(--linea);background:#f8fafc;white-space:nowrap}
.tabla td{padding:9px 12px;border-bottom:1px solid var(--linea);vertical-align:middle}
.tabla tr:hover td{background:#f8fafc}
.tabla .nom{font-weight:600;color:var(--tinta);text-decoration:none}
.tabla .nom small{display:block;font-weight:400;color:var(--tenue);font-size:12px}
.num{font-variant-numeric:tabular-nums}

/* ---- indicadores del inicio ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.kpi{padding:14px 16px}
.kpi b{display:block;font:600 1.7rem var(--serif);color:var(--tinta);font-variant-numeric:tabular-nums}
.kpi span{font-size:13px;color:var(--suave)}
.kpi.oro{border-top:3px solid var(--oro)}
.dos{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.lista-s{list-style:none;margin:0;padding:0}
.lista-s li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--linea)}
.lista-s li:last-child{border-bottom:0}
.ger{display:flex;flex-direction:column;gap:8px}
.ger-fila{display:grid;grid-template-columns:150px 1fr 48px;gap:10px;align-items:center;font-size:13.5px}
.ger-barra{height:9px;background:var(--linea);border-radius:99px;overflow:hidden}
.ger-barra i{display:block;height:100%;background:var(--tinta-2);border-radius:99px}

/* ---- ficha ---- */
.ficha-cab{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.avatar{width:58px;height:58px;border-radius:50%;background:var(--tinta-claro);color:var(--tinta);display:grid;place-items:center;font:600 1.2rem var(--serif);flex:none}
.secc{margin-top:16px}
.secc h2{font-size:1.02rem;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--linea)}
.dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px 18px;margin:0}
.dl div{min-width:0} .dl dt{font-size:12px;color:var(--tenue)} .dl dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.mapa{height:360px;border-radius:var(--radio);border:1px solid var(--linea);z-index:0}
.mapa.grande{height:calc(100vh - 170px);min-height:420px}

/* ---- login ---- */
.login-env{min-height:100%;display:grid;place-items:center;padding:24px 16px;background:linear-gradient(160deg,#16324f 0%,#21466d 55%,#2b5a86 100%)}
.login{width:100%;max-width:400px;background:var(--papel);border-radius:14px;padding:30px 28px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.login .marca-sello{width:56px;height:56px;font-size:18px;margin:0 auto 12px;color:var(--oro)}
.login h1{text-align:center;font-size:1.5rem}
.login p.sub{text-align:center;color:var(--suave);margin:4px 0 20px;font-size:14px}
.login form{display:flex;flex-direction:column;gap:12px}

/* ---- móvil ---- */
.menu-movil{display:none}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .lado{position:fixed;inset:0 auto 0 0;width:250px;z-index:60;transform:translateX(-100%);transition:transform .2s}
  .lado.abierto{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
  .menu-movil{display:flex;align-items:center;gap:10px;background:var(--tinta);color:#fff;padding:10px 16px;position:sticky;top:0;z-index:50}
  .menu-movil button{background:none;border:0;color:#fff;font-size:22px;cursor:pointer}
  .main{padding:16px 16px 40px}
  .dos{grid-template-columns:1fr}
  .ger-fila{grid-template-columns:110px 1fr 40px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- celular, tablet e iPad ---- */
.tabbar{display:none}
@media (max-width:900px){
  /* iPhone: con letra menor a 16px hace zoom al escribir */
  input,select,textarea,.in,.campo input,.campo select,.campo textarea{font-size:16px!important}
  .menu-movil{padding-top:calc(10px + env(safe-area-inset-top))}
  .lado{padding-top:calc(18px + env(safe-area-inset-top));width:270px}
  .top{align-items:flex-start}
  .top h1{font-size:1.45rem}
  .acciones{width:100%}
  .tabla{font-size:13.5px} .tabla th,.tabla td{padding:8px 9px}
  .tabla-env{-webkit-overflow-scrolling:touch}
  .card-cab,.top{gap:10px}
}
/* pantallas táctiles: botones fáciles de tocar */
@media (pointer:coarse){
  .btn{min-height:42px} .btn.sm{min-height:36px;padding:6px 12px}
  .nav a{padding:11px 12px;font-size:15px}
}
/* celular: barra inferior tipo app */
@media (max-width:700px){
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:65;background:#fff;border-top:1px solid var(--linea);
          padding:4px 4px calc(4px + env(safe-area-inset-bottom));box-shadow:0 -6px 18px rgba(22,50,79,.08)}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border:0;background:none;color:var(--suave);font:600 11px var(--sans);text-decoration:none;border-radius:10px;cursor:pointer}
  .tabbar .i{font-size:20px;line-height:1}
  .tabbar .on{color:var(--tinta);background:var(--tinta-claro)}
  .main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  body .es-boton{bottom:calc(76px + env(safe-area-inset-bottom));right:12px;padding:8px}
  body .es-boton .es-nom{display:none}
  body .es-panel{right:0;left:0;bottom:0;width:100%;height:calc(100dvh - 40px);border-radius:16px 16px 0 0}
  .toast{left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));max-width:none}
  .menu-movil b{flex:1}
  .acciones .btn{flex:1 1 auto;justify-content:center}
}
@media print{ .tabbar,.menu-movil{display:none!important} }