/* Paleta v6 (03-10-2026): azul eléctrico sobre azul medianoche, tipografía Red Hat.
   Los nombres de las variables son los históricos: --teal es hoy el color de acción (azul eléctrico)
   y --navy* son los fondos oscuros. Se conservan para no tocar cada página. */
:root{
  --bg:#F5F7FB; --surface:#FFFFFF; --surface-2:#E8ECF6;
  --ink:#0A1024; --ink-2:#414A63; --ink-3:#667089;
  --line:#D5DBE8; --line-2:#E8ECF6;
  --navy:#0A1230; --navy-deep:#070B1A; --navy-800:#111A38;
  --teal:#2456F0; --teal-bright:#4F7BFF; --blue:#2456F0; --sobre:#FFFFFF;
  --teal-fuerte:#1840C4;  /* hover del botón principal: se oscurece como en la portada (texto blanco 8,2:1; con --teal-bright quedaba en 3,7:1). Decisión de Manuel, 04-10-2026 */
  --alta:#C0392B; --ok:#1E8E5A;
  /* etiquetas de estado (fondo y texto), con versión oscura: decisión de Manuel, 04-10-2026 */
  --estado-espera-bg:#FFF1D6; --estado-espera:#8A5A00; --estado-curso-bg:#DCEFFB; --estado-curso:#0F5B8A;
  --estado-listo-bg:#E3F3EA; --estado-listo:#1E6B45; --estado-alerta-bg:#FBE3DF; --estado-alerta:#9A2A1C;
  --radius:8px; --radius-sm:6px;
  --shadow: 0 1px 2px rgba(10,16,36,.04), 0 8px 24px rgba(10,16,36,.07);
  --font-display:'Red Hat Display', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-body:'Red Hat Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'Red Hat Mono', ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#070B1A; --surface:#0E1530; --surface-2:#151E40;
    --ink:#EEF2FB; --ink-2:#B5BFDA; --ink-3:#8793B3;
    --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.08);
    --navy-deep:#04060F; --navy-800:#111A38;
    --teal:#8FADFF; --teal-bright:#B4C8FF; --blue:#8FADFF; --sobre:#06102E; --teal-fuerte:#B4C8FF;
    --estado-espera-bg:rgba(221,176,103,.16); --estado-espera:#F2CB80; --estado-curso-bg:rgba(143,173,255,.16); --estado-curso:#B4C8FF;
    --estado-listo-bg:rgba(53,224,180,.14); --estado-listo:#7BEFD0; --estado-alerta-bg:rgba(255,140,120,.16); --estado-alerta:#FFB4A8;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#070B1A; --surface:#0E1530; --surface-2:#151E40;
  --ink:#EEF2FB; --ink-2:#B5BFDA; --ink-3:#8793B3;
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.08);
  --navy-deep:#04060F; --navy-800:#111A38;
  --teal:#8FADFF; --teal-bright:#B4C8FF; --blue:#8FADFF; --sobre:#06102E; --teal-fuerte:#B4C8FF;
    --estado-espera-bg:rgba(221,176,103,.16); --estado-espera:#F2CB80; --estado-curso-bg:rgba(143,173,255,.16); --estado-curso:#B4C8FF;
    --estado-listo-bg:rgba(53,224,180,.14); --estado-listo:#7BEFD0; --estado-alerta-bg:rgba(255,140,120,.16); --estado-alerta:#FFB4A8;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.4);
  color-scheme: dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}  /* sin esto, una clase con display propio (.btn) deja visible un elemento oculto */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15.5px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0 0 .4em}
h1{font-size:clamp(26px,3.4vw,36px)}
h2{font-size:22px}
h3{font-size:17px}
p{margin:0 0 1em;color:var(--ink-2)}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
.eyebrow{font-family:var(--font-mono);font-size:12px;line-height:1.5;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}

/* fondo dinámico */
.fondo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fondo img{width:100%;height:100%;object-fit:cover;animation:netbgPan 34s ease-in-out infinite}
.fondo.claro img{opacity:.45}
@keyframes netbgPan{0%,100%{transform:scale(1) translate(0,0)}50%{transform:scale(1.03) translate(-.8%,.8%)}}
@media (prefers-reduced-motion: reduce){.fondo img{animation:none}}
.contenido{position:relative;z-index:1}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 14.5px/1 var(--font-body);
  padding:12px 20px;border-radius:6px;border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .15s ease, background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.btn.primary{background:var(--teal);color:var(--sobre)}
.btn.primary:hover{background:var(--teal-fuerte)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.danger{background:transparent;border-color:var(--alta);color:var(--alta)}
.btn.sm{padding:8px 14px;font-size:13px}

/* formularios */
label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
input,select,textarea{width:100%;background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:6px;
  padding:11px 13px;font:15px/1.4 var(--font-body)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(36,86,240,.18)}
textarea{resize:vertical;min-height:90px}
.campo{margin-bottom:14px}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.fila{grid-template-columns:1fr}}
.msg{font-size:13.5px;font-weight:600;color:var(--ok);min-height:1.2em}
.msg.err{color:var(--alta)}

/* header de app */
.appbar{position:sticky;top:0;z-index:5;background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.appbar .wrap{display:flex;align-items:center;gap:16px;min-height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:38px;width:auto;animation:logoBob 4s ease-in-out infinite}
@keyframes logoBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion: reduce){.brand img{animation:none}}
.brand b{font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.appbar .derecha{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--ink-2)}

/* tarjetas y tablas */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 10px;border-bottom:1px solid var(--line-2);vertical-align:top}
td{overflow-wrap:anywhere}  /* correos y palabras largas se parten dentro de la celda en vez de sacar la tabla de su tarjeta */
code{overflow-wrap:anywhere}
th{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--surface-2)}
.pill{display:inline-block;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 9px;border-radius:4px;background:var(--surface-2);color:var(--ink-2);overflow-wrap:normal}  /* td{overflow-wrap:anywhere} se hereda: a 320 px «PENDIENTE» se partía en «PENDIE / NTE». La etiqueta pasa a otra línea solo entre palabras */
.pill.pendiente{background:var(--estado-espera-bg);color:var(--estado-espera)}
.pill.en_gestion{background:var(--estado-curso-bg);color:var(--estado-curso)}
.pill.propuesta_enviada{background:var(--estado-listo-bg);color:var(--estado-listo)}
.pill.cerrado{background:var(--surface-2);color:var(--ink-3)}
.vacio{color:var(--ink-3);font-size:14px;padding:20px 0;text-align:center}

/* menú de tres puntos en triángulo (decisión de Manuel, 03-10-2026): reemplaza al ícono de tres líneas */
.menu-puntos{position:relative}
.menu-puntos summary{list-style:none;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;color:var(--ink)}
.menu-puntos summary::-webkit-details-marker{display:none}
.puntos{display:block;width:18px;height:16px;background:
  radial-gradient(circle,currentColor 2.6px,transparent 3.1px) 50% 0/7px 7px no-repeat,
  radial-gradient(circle,currentColor 2.6px,transparent 3.1px) 0 100%/7px 7px no-repeat,
  radial-gradient(circle,currentColor 2.6px,transparent 3.1px) 100% 100%/7px 7px no-repeat}
.menu-puntos .menu-lista{position:absolute;right:0;top:calc(100% + 10px);z-index:30;min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px;display:flex;flex-direction:column;box-shadow:0 14px 36px rgba(4,8,18,.18)}
.menu-puntos .menu-lista a,.menu-puntos .menu-lista button{display:block;width:100%;text-align:left;padding:11px 12px;border:0;border-radius:6px;background:none;font:500 14.5px var(--font-body);color:var(--ink);text-decoration:none;cursor:pointer}
.menu-puntos .menu-lista a:hover,.menu-puntos .menu-lista button:hover{background:var(--surface-2)}
.icono-btn{width:40px;height:40px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--ink);cursor:pointer;padding:0}
.icono-btn:hover{background:var(--surface-2)}
.icono-btn svg{width:20px;height:20px}
@media (max-width:520px){.appbar .brand b{font-size:13px;letter-spacing:.04em}.appbar .brand{gap:7px}.appbar .derecha{gap:6px}.appbar .derecha .btn.sm{padding:9px 11px}}
@media (max-width:374px){.appbar .brand b{display:none}}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--surface-2);display:inline-grid;place-items:center;font:700 13px var(--font-display);color:var(--ink-2)}

/* llaves de acceso (huella o rostro): lista de aparatos de «Mi cuenta» y del portal (assets/llaves.js) */
.llaves-lista{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.llaves-lista li{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface-2);border-radius:8px;padding:10px 12px;font-size:14px}
.llaves-lista li > div{min-width:0;overflow-wrap:anywhere}
.llaves-lista small{display:block;color:var(--ink-3);font-size:12.5px}
.llaves-lista .btn{flex:0 0 auto}
.llaves-alta .acciones{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* móvil */
@media (max-width:760px){
  input,select,textarea{font-size:16px}  /* 16 px o más: el iPhone no amplía la página al tocar un campo */
  .wrap{padding-inline:14px}
  .card{padding:16px 14px}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .appbar .derecha > span{display:none}
  .appbar .wrap{gap:10px}
  .btn.sm{padding:8px 11px}
}