/* ═══════════════════════════════════════════════════════════════════════════
   AERO Portal Ecuador · SISTEMA BASE (desde cero, 5-sep-2026)
   Daniel: «tipo Apple: bonito pero funcional y útil; la info que hay que leer
   es la más grande y clara; teléfono y computador».
   Reglas: fondo gris claro, tarjetas blancas sin sombra, tinta casi negra,
   UN acento (rojo Aéropostale), letra del sistema (la de Apple en iPhone),
   radios 12-24, botones 48-56 px, hairlines en vez de bordes. Nada de
   ilustraciones, mascotas, gradientes ni mayúsculas gritadas.
   Los selectores viejos (header.hub, .card, .accion, .etq, .sel…) se conservan
   para que las 40 pantallas cambien de piel sin tocarlas una por una.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#F5F5F7;    --card:#FFFFFF;   --bg-2:#EBEBF0;
  --ink:#1D1D1F;   --ink-2:#6E6E73;  --ink-3:#8E8E93;  --ink-4:#C7C7CC;
  --line:rgba(0,0,0,.08); --hair:rgba(0,0,0,.06);
  --red:#E8442E;   --red-dark:#C4321E; --red-soft:#FDECE9;
  --ok:#1F9D55;    --ok-soft:#E6F6EC;
  --warn:#B7791F;  --warn-soft:#FDF3E1;
  --blue:#1D1D1F;  --blue-soft:#EBEBF0;      /* el «azul» de antes ahora es tinta: un solo acento */
  --navy:#1D1D1F;  --navy-2:#2C2C2E; --navy-3:#3A3A3C;  /* compatibilidad: navy = tinta */
  --radius:20px;   --radius-s:12px;  --shadow:none;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --disp:-apple-system,"SF Pro Display","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  --font:-apple-system,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",Roboto,system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{overscroll-behavior-x:none}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 var(--font);
  -webkit-font-smoothing:antialiased;letter-spacing:-.005em}
@media (max-width:600px){ body{font-size:16px} }
a{color:var(--ink)}
h1,h2,h3,h4{letter-spacing:-.02em}

/* ── LA BARRA DE ARRIBA: blanca, un pelo abajo, el título grande ───────────── */
header.hub{background:rgba(245,245,247,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--ink);display:flex;align-items:center;gap:10px;padding:14px 18px;
  border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:30}
header.hub h1{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:-.02em;
  text-transform:none;margin:0;flex:none}
header.hub .quien{margin-left:auto;text-align:right;font-size:12.5px;color:var(--ink-3);line-height:1.2;min-width:0}
header.hub .quien b{display:block;color:var(--ink);font-size:13.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header.hub .quien span{display:none}
header.hub button{background:#fff;color:var(--ink);border:0;border-radius:12px;
  min-height:42px;padding:0 14px;font:600 14px var(--font);cursor:pointer;
  box-shadow:0 0 0 1px var(--hair);white-space:nowrap}
header.hub button:hover{background:var(--bg-2)}

main{max-width:1080px;margin:18px auto;padding:0 16px 96px;display:grid;gap:16px}
main > *, .card{min-width:0}
/* La barra de abajo FLOTA sobre el contenido (Daniel, 5-sep, en la Escuela desde
   el iPhone: tapaba el texto). En el teléfono, todo lo que se desplaza deja
   abajo el alto de la barra más el borde seguro del iPhone. En el computador la
   barra es un riel a la izquierda y no hace falta. */
body.con-barra main, body.con-barra .main, body.con-barra #main{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
@media (min-width:900px){ main{padding-bottom:40px} body.con-barra main, body.con-barra .main, body.con-barra #main{padding-bottom:40px} }
.card{background:var(--card);border:0;border-radius:var(--radius);box-shadow:0 0 0 1px var(--hair);padding:20px}
.card h2{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.02em;
  text-transform:none;color:var(--ink);margin:0 0 12px}

/* ── ETIQUETAS DE SECCIÓN Y NÚMEROS GRANDES ──────────────────────────────── */
.secc,.k{font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:.02em;text-transform:uppercase;margin:0 0 8px 6px}
.num-g{font-size:56px;font-weight:700;letter-spacing:-.04em;line-height:1}

/* ── FORMULARIOS ──────────────────────────────────────────────────────────── */
label{display:block;font-size:13.5px;color:var(--ink-2);margin:12px 0 6px;font-weight:500}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=tel],
input[type=number],input[type=search],textarea,select{
  width:100%;min-height:48px;padding:11px 14px;border:0;box-shadow:0 0 0 1px var(--line);
  border-radius:12px;font:inherit;background:#fff;color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus-visible,textarea:focus-visible,.sel-btn:focus-visible,button:focus-visible{
  outline:0;box-shadow:0 0 0 2px var(--ink)}
.mono{font-family:var(--mono)}

/* ── BOTONES: el principal es oscuro y sólido; el secundario, gris ────────── */
button{font-family:var(--font)}
button.accion{background:var(--ink);color:#fff;border:0;border-radius:14px;
  min-height:52px;padding:0 22px;font-size:16px;font-weight:600;cursor:pointer;width:100%;
  letter-spacing:-.01em;transition:transform .08s,opacity .15s}
button.accion:hover{opacity:.92}
button.accion:active{transform:scale(.985)}
button.accion:disabled{background:var(--ink-4);cursor:default}
button.secundario{background:var(--bg-2);color:var(--ink);border:0;
  border-radius:12px;min-height:46px;padding:0 16px;font-size:14.5px;font-weight:600;cursor:pointer}
button.secundario:hover{background:#E0E0E6}

/* ── ETIQUETAS (estado, prioridad): pequeñas, sin monoespaciado ni gritos ── */
.etq{display:inline-block;font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:0;
  padding:4px 9px;border-radius:8px;text-transform:none;background:var(--bg-2);color:var(--ink-2)}
.etq.ok{background:var(--ok-soft);color:var(--ok)}
.etq.warn{background:var(--warn-soft);color:var(--warn)}
.etq.rojo{background:var(--red-soft);color:var(--red-dark)}
.etq.azul{background:var(--bg-2);color:var(--ink)}
.etq.gris{background:var(--bg-2);color:var(--ink-2)}

/* chips (2-3 opciones fijas) */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{min-height:44px;padding:0 16px;border:0;box-shadow:0 0 0 1px var(--line);border-radius:12px;
  background:#fff;color:var(--ink-2);font:600 14px var(--font);cursor:pointer}
.chip.activa,.chip.on{box-shadow:none;background:var(--ink);color:#fff}

/* ── LISTAS AGRUPADAS (el patrón de ajustes del teléfono) ─────────────────── */
.lista{background:#fff;border-radius:var(--radius);box-shadow:0 0 0 1px var(--hair);overflow:hidden}
.fila-l{display:flex;align-items:center;gap:14px;padding:15px 18px;min-height:64px;
  text-decoration:none;color:var(--ink);border-top:1px solid var(--hair);background:#fff;
  transition:background .12s}
.fila-l:first-child{border-top:0}
.fila-l:hover{background:#FAFAFC}
.fila-l .ic{width:44px;height:44px;border-radius:13px;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:none}
.fila-l .ic.rojo{background:var(--red)}
.fila-l .ic svg{width:22px;height:22px}
.fila-l .tx{flex:1;min-width:0}
.fila-l b{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.fila-l small{display:block;font-size:13.5px;color:var(--ink-2);margin-top:2px;line-height:1.35}
.fila-l .n{background:var(--red);color:#fff;font-size:13px;font-weight:700;border-radius:12px;
  min-width:24px;height:24px;display:flex;align-items:center;justify-content:center;padding:0 8px;flex:none}
.fila-l .chev{color:var(--ink-4);flex:none;width:20px;height:20px}

/* ── DESPLEGABLE DE LA CASA (skill desplegables) ──────────────────────────── */
.sel{position:relative}
.sel-btn{width:100%;min-height:48px;display:flex;align-items:center;gap:8px;
  padding:11px 14px;border:0;box-shadow:0 0 0 1px var(--line);border-radius:12px;background:#fff;
  font:inherit;color:var(--ink);cursor:pointer;text-align:left}
.sel-val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-val.sel-vacio{color:var(--ink-3)}
.sel-flecha{color:var(--ink-3);transition:transform .15s}
.sel-btn[aria-expanded="true"] .sel-flecha{transform:rotate(180deg)}
.sel-menu{position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:100%;
  background:#fff;border:0;border-radius:16px;
  box-shadow:0 0 0 1px var(--hair),0 16px 40px rgba(0,0,0,.12);padding:8px;max-height:290px;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s}
.sel-menu.abierto{opacity:1;visibility:visible;pointer-events:auto}
.sel-menu[hidden]{display:flex}
.sel-buscar{min-height:42px;margin-bottom:6px;border:0;background:var(--bg);
  border-radius:10px;padding:8px 12px;font:inherit}
.sel-ops{overflow-y:auto}
.sel-op{padding:12px 12px;border-radius:10px;cursor:pointer;font-size:15px}
.sel-op:hover{background:var(--bg)}
.sel-op[aria-selected="true"]{background:var(--ink);color:#fff;font-weight:600}
.sel-op.sel-nuevo{color:var(--ink);font-weight:600}
.sel-op.sel-vacia{color:var(--ink-3);cursor:default}

/* ── TOAST: una pastilla oscura, centrada ─────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:-90px;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:15px;font-weight:500;padding:13px 20px;border-radius:14px;
  box-shadow:0 12px 32px rgba(0,0,0,.18);transition:bottom .2s;z-index:99;max-width:92vw}
.toast.ok{bottom:96px}
.toast.error{bottom:96px;background:var(--red-dark)}
@media (min-width:900px){ .toast.ok,.toast.error{bottom:28px} }

/* ── LA BARRA DE LA APP — la pone comun.js ─────────────────────────────────
   Teléfono: pastilla flotante abajo. Computador (≥900 px): riel fino a la
   izquierda, y «Chat» acopla el chat a la derecha sin cambiar de página. */
#barra-app{position:fixed;left:12px;right:12px;bottom:12px;z-index:90;display:flex;
  justify-content:space-around;align-items:center;background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:26px;
  box-shadow:0 0 0 1px var(--hair),0 10px 30px rgba(0,0,0,.10);padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
#barra-app a{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:64px;
  text-decoration:none;color:var(--ink-3);font-size:11px;font-weight:600;padding:4px 6px;border-radius:14px}
#barra-app a svg{width:24px;height:24px;stroke:currentColor}
#barra-app a.on{color:var(--ink)}
#barra-app .marca{display:none}
#chat-fijo{display:none}
#chat-acoplado{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);z-index:80;background:var(--bg);
  box-shadow:-1px 0 0 var(--hair),-16px 0 48px rgba(0,0,0,.07);display:none}
#chat-acoplado iframe{width:100%;height:100%;border:0;display:block}
@media (min-width:900px){
  body{padding-left:84px}
  #barra-app{left:0;top:0;bottom:0;right:auto;width:84px;flex-direction:column;justify-content:flex-start;gap:4px;
    background:#fff;border-radius:0;box-shadow:1px 0 0 var(--hair);padding:14px 8px;backdrop-filter:none;-webkit-backdrop-filter:none}
  #barra-app .marca{display:flex;align-items:center;justify-content:center;height:44px;margin:0 0 10px;border-radius:12px;
    font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.08em;color:#fff;background:var(--ink)}
  #barra-app a{width:68px;min-width:0;padding:9px 0 7px;gap:5px;font-size:11px}
  #barra-app a:hover{background:var(--bg)}
  #barra-app a.on{background:var(--bg);color:var(--ink)}
  body.chat-abierto #chat-acoplado{display:block}
}
@media (min-width:1280px){ body.chat-abierto{padding-right:440px} body.chat-abierto #chat-acoplado{box-shadow:-1px 0 0 var(--hair)} }
@media print{ header.hub, button, .sel-menu, #barra-app, #chat-fijo, #chat-acoplado {display:none!important} body{background:#fff;padding:0!important} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }