/* Panel de ParaAyudar · móvil primero, letra grande, contraste alto. Colores y letras del logotipo. */
@font-face{font-family:"Nunito";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/nunito-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:900;font-display:swap;src:url("fonts/nunito-latin-900-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/figtree-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/figtree-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/figtree-latin-700-normal.woff2") format("woff2")}
:root{
  --tinta:#061433; --tinta2:#102A57; --borde-osc:#2A4A86; --fondo:#EEF4FD; --blanco:#FFFFFF;
  --texto:#0B1E3D; --suave:#4E5E7A; --linea:#E1E8F4;
  --azul:#0743D9; --azul-vivo:#0A5BFF; --azul-claro:#E3EEFF; --cian:#19C3FF;
  --grad:linear-gradient(135deg,#19C3FF 0%,#0A5BFF 62%,#0743D9 100%);
  --noche:radial-gradient(70% 80% at 90% 0%,rgba(25,195,255,.30),transparent 70%),linear-gradient(160deg,#04102B 0%,#071E52 55%,#0A3AA8 100%);
  --verde:#0B7A45; --verde-claro:#DDF6EA; --naranja:#B85400; --naranja-claro:#FFF1DE;
  --rojo:#C8261B; --rojo-claro:#FDE4E1; --amarillo:#6E5000; --amarillo-claro:#FFF6D6;
  --sombra:0 1px 2px rgba(16,24,40,.06),0 10px 28px rgba(16,24,40,.07);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:'Figtree','Segoe UI',system-ui,sans-serif;font-size:19px;line-height:1.4}
a{color:var(--azul)}a:hover{color:#0F348F}
.num,h1,h2,.marca{font-family:'Nunito','Segoe UI',sans-serif;font-weight:900;letter-spacing:-.015em}
h1{margin:0;font-size:32px;line-height:1.1}
h2{margin:0;font-size:22px}
.contenedor{max-width:760px;margin:0 auto}

/* Cabecera oscura */
.cabecera{background:var(--noche);color:#fff;padding:22px 20px 92px;position:relative;overflow:hidden}
.cabecera.baja{padding-bottom:22px}
.cabecera .aros{position:absolute;right:-120px;top:-110px;opacity:.18}
.fila{display:flex;align-items:center;gap:12px}
.entre{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{width:46px;height:46px;border-radius:14px;background:var(--grad);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-img{height:42px;width:auto;display:block}
.entrada .logo-img{height:46px}
.marca{font-size:19px;color:#fff}
.sub-marca{font-size:15px;color:#9FB0C8}
.fecha{font-size:18px;color:#9FB0C8;margin-top:20px}
.gran-num{font-size:72px;line-height:.95;color:#fff}
.vivo-pill{display:inline-flex;align-items:center;gap:10px;background:rgba(52,211,153,.14);border:1px solid rgba(52,211,153,.35);padding:8px 14px;border-radius:999px;margin-top:12px;color:#B6F2D9;font-weight:700;font-size:17px}
.vivo-pill.caido{background:rgba(255,120,110,.14);border-color:rgba(255,120,110,.4);color:#FFC2BC}
.punto{width:11px;height:11px;border-radius:50%;background:#34D399;flex-shrink:0}
.caido .punto{background:#FF7A6E}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 12px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.vivo-pill:not(.caido) .punto{animation:pulso 2s infinite}
.volver{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:18px;font-weight:700;text-decoration:none;color:#9FC0FF}

/* Contenido */
main{padding:0 16px 130px;margin-top:-72px;display:flex;flex-direction:column;gap:16px;position:relative}
.cabecera.baja + main{margin-top:18px}
.tarjeta{background:var(--blanco);border-radius:22px;box-shadow:var(--sombra);padding:20px;display:flex;flex-direction:column;gap:14px}
.tarjeta.enlace{text-decoration:none;color:var(--texto)}
.tarjeta.borde-naranja{border:2px solid #F2B266}
.tarjeta.borde-rojo{border:2px solid #EFA29A}
.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:18px 10px}
.tres > div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}
.tres > div + div{border-left:1px solid var(--linea)}
.tres .num{font-size:32px}
.dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.etq{font-size:16px;color:var(--suave)}
.dato{font-size:20px;font-weight:700}
.peq{font-size:13px;color:var(--suave)}
.avatar{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.avatar.redondo{border-radius:50%}
.avatar.chico{width:44px;height:44px;font-size:17px;border-radius:14px}
.pastilla{display:inline-block;align-self:flex-start;font-size:15px;font-weight:700;padding:4px 12px;border-radius:999px}
.verde{background:var(--verde-claro);color:#0B6A3C}
.naranja{background:var(--naranja-claro);color:#8A4100}
.rojo{background:var(--rojo-claro);color:#9A1B12}
.amarillo{background:var(--amarillo-claro);color:var(--amarillo)}
.azul{background:var(--azul-claro);color:var(--azul)}
.gris{background:var(--fondo);color:var(--suave)}
.barra{height:10px;border-radius:5px;background:var(--linea)}
.barra > div{height:10px;border-radius:5px;background:var(--azul)}
.barra.gruesa,.barra.gruesa > div{height:12px;border-radius:6px}
.lista > *{display:flex;align-items:center;gap:14px;min-height:64px;border-bottom:1px solid var(--fondo)}
.lista > *:last-child{border-bottom:none}
.col{display:flex;flex-direction:column;gap:3px;flex-grow:1;min-width:0}
.col strong{font-size:19px;overflow-wrap:anywhere}
.col span{font-size:16px;color:var(--suave)}
.en-linea{color:#0B6A3C !important}
.vacio{color:var(--suave);font-size:18px;text-align:center;padding:10px 0}

/* Botones y formularios */
.boton{font-family:inherit;min-height:56px;border-radius:16px;border:none;font-size:19px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 18px;cursor:pointer;text-decoration:none;width:100%}
.boton.primario{background:var(--grad);color:#fff;font-family:'Nunito',sans-serif;font-weight:900;box-shadow:0 10px 22px -10px rgba(10,91,255,.7)}
.boton.suave{background:var(--azul-claro);color:var(--azul)}
.boton.peligro{background:var(--rojo);color:#fff;min-height:66px;font-size:22px;box-shadow:0 8px 20px rgba(200,38,27,.28)}
.boton.exito{background:var(--verde);color:#fff;min-height:66px;font-size:22px;box-shadow:0 8px 20px rgba(11,122,69,.28)}
.boton.borde{background:#fff;color:var(--azul);border:2px dashed #A9B9E8}
.boton.mini{min-height:44px;font-size:16px;width:auto;border-radius:12px;padding:0 14px}
label.campo{display:flex;flex-direction:column;gap:6px;font-size:17px;color:var(--suave)}
.campo input,.campo select,.campo textarea{font-family:inherit;font-size:20px;min-height:56px;padding:0 16px;border:2px solid #8B93A1;border-radius:14px;color:var(--texto);background:#fff;width:100%}
.campo textarea{padding:12px 16px;min-height:100px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:3px solid var(--azul-vivo);outline-offset:1px;border-color:var(--azul)}
.check{display:flex;align-items:center;gap:12px;font-size:19px;min-height:48px}
.check input{width:28px;height:28px}
.buscador{display:flex;align-items:center;gap:10px;background:var(--tinta2);border:1px solid var(--borde-osc);border-radius:16px;padding:0 16px;min-height:58px;margin-top:16px}
.buscador input{font-family:inherit;font-size:19px;border:none;outline:none;background:transparent;color:#fff;flex-grow:1;min-width:0}
.segmento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;background:var(--tinta2);padding:5px;border-radius:16px;margin-top:14px}
.segmento a{font-size:17px;min-height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;text-decoration:none;color:#C9D4E5;font-weight:700}
.segmento a.activo{background:#fff;color:var(--tinta)}
.boton-redondo{width:52px;height:52px;border-radius:16px;border:none;background:var(--grad);display:flex;align-items:center;justify-content:center;text-decoration:none}

/* Aviso */
.aviso{border-radius:18px;padding:16px 18px;font-size:18px;font-weight:700}
.aviso.ok{background:var(--verde-claro);color:#0B6A3C}
.aviso.error{background:var(--rojo-claro);color:#9A1B12}

/* Gráfico de barras */
.barras{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:end;height:130px}
.barras > div{display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.barras > div > div{background:#C9D7F6;border-radius:8px;min-height:4px}
.barras > div.hoy > div{background:var(--grad)}
.dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;text-align:center;font-size:16px;color:var(--suave)}

/* Navegación inferior */
nav.abajo{position:fixed;left:16px;right:16px;bottom:16px;max-width:728px;margin:0 auto;border-radius:26px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:8px;gap:6px;background:var(--tinta);box-shadow:0 10px 30px rgba(14,23,38,.35);z-index:10}
nav.abajo a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:64px;border-radius:18px;text-decoration:none;color:#C9D4E5;font-size:15px}
nav.abajo a.activo{background:var(--grad);color:#fff;font-weight:700}

/* Pantalla de entrada */
.entrada{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:24px 16px;background:var(--noche)}
.entrada .tarjeta{max-width:440px;margin:0 auto;width:100%}

@media (min-width:700px){ .gran-num{font-size:88px} }