/* =========================================================
   CARNET DIGITAL — Hoja de estilos
   Identidad: azul marino + teal sobre fondos claros
   Version 2: tipografia y controles de mayor tamano, con iconos

   Criterio de diseno: el sistema se opera en un puesto de salud,
   con frecuencia desde telefono y a veces con prisa entre paciente
   y paciente. Los textos y botones son grandes y los objetivos
   tactiles superan los 44 pixeles de alto, conforme a las pautas
   de accesibilidad para uso tactil.
   ========================================================= */

:root {
    --marino: #14304a;
    --marino-2: #1f4468;
    --teal: #1d9e75;
    --teal-osc: #0f6e56;
    --teal-claro: #eef7f3;
    --teal-borde: #b5ddce;
    --gris-texto: #2b3947;
    --gris-suave: #6b7b8b;
    --fondo: #f3f6fa;
    --linea: #dfe6ee;

    /* Escala tipografica */
    --txt-base: 17px;
    --txt-chico: 0.92rem;
    --txt-grande: 1.12rem;
    --radio: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: var(--txt-base); }

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: var(--fondo);
    color: var(--gris-texto);
    line-height: 1.6;
    font-size: 1rem;
}

/* ---------- Iconos ---------- */
.icono {
    flex-shrink: 0;
    vertical-align: -0.2em;
}

/* ---------- Login y pantallas centradas ---------- */
/* Fondo con una franja diagonal suave, en los colores del sistema. */
/* Se centra con márgenes automáticos (no con justify-content), para que en
   pantallas bajas el contenido no quede cortado arriba sin poder desplazarse. */
.pagina-login {
    display: flex; flex-direction: column; align-items: center;
    min-height: 100vh; padding: 1.25rem;
    background:
        linear-gradient(162deg, transparent 0 56%, rgba(29,158,117,0.07) 56% 100%),
        linear-gradient(20deg, #f3f6fa 0 42%, #ffffff 42% 100%);
    background-attachment: fixed;
}

/* ---------- Pantalla de ingreso ----------
   El nombre del sistema hace de logo: va arriba, con un emblema, y flota
   suavemente hacia arriba y hacia abajo. */
.ingreso {
    width: 100%; max-width: 440px; margin-top: auto; padding-top: 1rem;
    display: flex; flex-direction: column; align-items: center;
}
.ingreso-logo {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    animation: flotar 4s ease-in-out infinite;
}
@keyframes flotar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
.ingreso-emblema {
    width: 76px; height: 76px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--teal); color: #fff; margin-bottom: 0.9rem;
    box-shadow: 0 10px 24px rgba(29,158,117,0.30);
}
.ingreso-nombre {
    font-size: 2.6rem; font-weight: 800; line-height: 1.05;
    color: var(--marino); letter-spacing: -1px;
}
.ingreso-nombre .marca-2 { color: var(--teal); }
.ingreso-lema {
    font-size: 1.05rem; font-weight: 600; color: var(--teal-osc);
    margin-top: 0.35rem; letter-spacing: 0.2px;
}
.ingreso-puesto {
    text-align: center; color: var(--gris-suave); font-size: 0.95rem;
    margin: 1.1rem 0 1.6rem; line-height: 1.45;
}
.ingreso-puesto span { display: block; }
.ingreso .tarjeta-login { border-top-width: 4px; }
/* Pantallas que solo tienen la tarjeta (cambiar contraseña): centrada. */
.pagina-login > .tarjeta-login { margin-top: auto; margin-bottom: auto; }
/* Iconos dentro de los campos y botón del ojo para ver la contraseña. */
.tarjeta-login .con-icono input { padding-left: 2.85rem; }
.tarjeta-login .con-boton input { padding-right: 3.2rem; }
.tarjeta-login .boton-ver {
    position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0;
    background: none; color: var(--gris-suave); border-radius: var(--radio);
}
.tarjeta-login .boton-ver .icono { position: static; transform: none; color: inherit; }
.tarjeta-login .boton-ver:hover { background: var(--teal-claro); color: var(--teal-osc); }
.tarjeta-login .boton-ver[aria-pressed="true"] { color: var(--teal); }
/* Aviso de si las dos contraseñas coinciden (cambiar contraseña). */
.coincidencia { min-height: 1.3rem; margin: -0.4rem 0 0.9rem; font-size: 0.92rem; font-weight: 600; }
.coincidencia-ok { color: var(--teal-osc); }
.coincidencia-mal { color: #b42318; }
.salir-cambio { text-align: center; margin-top: 1rem; font-size: 0.92rem; }
.salir-cambio a { color: var(--gris-suave); }
.ingreso-pie {
    margin-top: 2rem; margin-bottom: auto; text-align: center;
    color: var(--gris-suave); font-size: 0.82rem; letter-spacing: 0.3px;
}
@media (min-width: 701px) {
    .ingreso-nombre { font-size: 3.4rem; }
    .ingreso-emblema { width: 88px; height: 88px; }
}
/* Quien pidió a su teléfono reducir el movimiento no ve la animación. */
@media (prefers-reduced-motion: reduce) {
    .ingreso-logo { animation: none; }
}
.tarjeta-login {
    background: #fff; padding: 2.5rem 2.25rem; border-radius: 16px;
    box-shadow: 0 8px 32px rgba(20,48,74,0.13);
    width: 100%; max-width: 420px;
    border-top: 5px solid var(--teal);
}
.tarjeta-login h1 {
    font-size: 1.9rem; color: var(--marino); text-align: center;
    letter-spacing: -0.4px; line-height: 1.2;
}
.tarjeta-login h1 .marca-2 { color: var(--teal); }
.subtitulo {
    text-align: center; color: var(--gris-suave);
    font-size: 1rem; margin-bottom: 1.75rem;
}
.tarjeta-login label {
    display: block; margin: 1rem 0 0.35rem;
    font-size: 1rem; font-weight: 600; color: var(--marino);
}
.tarjeta-login input {
    width: 100%; padding: 0.85rem 0.95rem; border: 1.5px solid #cdd7e2;
    border-radius: var(--radio); font-size: 1.05rem;
    min-height: 50px;
}
.tarjeta-login input:focus {
    outline: none; border-color: var(--teal);
    box-shadow: 0 0 0 4px rgba(29,158,117,0.16);
}
.tarjeta-login .medidor-fuerza { max-width: 100%; }
.tarjeta-login button {
    width: 100%; margin-top: 1.75rem; padding: 0.95rem;
    background: var(--teal); color: #fff; border: none;
    border-radius: var(--radio); font-size: 1.1rem; cursor: pointer;
    font-weight: 600; min-height: 54px;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    transition: background 0.2s;
}
.tarjeta-login button:hover { background: var(--teal-osc); }

/* ---------- Barra superior ---------- */
.barra-superior {
    display: flex; align-items: center; gap: 1.75rem;
    background: #fff;
    border-bottom: 4px solid var(--teal);
    padding: 0.9rem 1.75rem; flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(20,48,74,0.07);
}
.barra-titulo {
    display: flex; flex-direction: column;
    border-left: 5px solid var(--teal); padding-left: 0.85rem;
    text-decoration: none; border-radius: 2px;
}
.barra-titulo:hover { border-left-color: var(--teal-osc); }
.barra-titulo:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.barra-titulo strong {
    color: var(--marino); font-size: 1.4rem; letter-spacing: -0.3px;
    line-height: 1.15;
}
.barra-titulo strong .marca-2 { color: var(--teal); }
.barra-sub { font-size: 0.82rem; color: var(--gris-suave); }

.barra-nav { display: flex; gap: 0.5rem; margin-left: 0.5rem; flex-wrap: wrap; }
.barra-nav a {
    color: var(--marino); text-decoration: none;
    font-size: 1.02rem; font-weight: 500;
    padding: 0.6rem 0.9rem; border-radius: var(--radio);
    display: inline-flex; align-items: center; gap: 0.5rem;
    min-height: 46px;
    transition: background 0.15s, color 0.15s;
}
.barra-nav a:hover { background: var(--teal-claro); color: var(--teal-osc); }
.barra-nav a.activo {
    background: var(--teal-claro); color: var(--teal-osc);
    box-shadow: inset 0 -3px 0 var(--teal);
}

.barra-usuario {
    margin-left: auto; display: flex; align-items: center; gap: 1rem;
    font-size: 0.95rem; color: var(--gris-texto);
}
.btn-salir {
    background: var(--marino); color: #fff; padding: 0.6rem 1.1rem;
    border-radius: var(--radio); text-decoration: none; font-size: 0.98rem;
    display: inline-flex; align-items: center; gap: 0.5rem;
    min-height: 46px; font-weight: 500;
}
.btn-salir:hover { background: var(--marino-2); }

/* ---------- Contenido ---------- */
.contenido { max-width: 1080px; margin: 2rem auto; padding: 0 1.4rem; }
.titulo-pagina {
    font-size: 1.85rem; color: var(--marino); margin-bottom: 1.2rem;
    font-weight: 700; line-height: 1.25;
    display: flex; align-items: center; gap: 0.7rem;
}
.subtitulo-seccion {
    font-size: 1.35rem; color: var(--marino); margin: 2rem 0 0.9rem;
    font-weight: 600;
    display: flex; align-items: center; gap: 0.6rem;
    padding-bottom: 0.5rem; border-bottom: 2px solid var(--linea);
}
/* El texto ocupa el mismo ancho que las tarjetas que siguen, para que en la
   computadora quede alineado con ellas (antes se cortaba a 75 caracteres). */
.intro-panel {
    color: var(--gris-suave); font-size: 1rem; margin-bottom: 1.4rem;
}
@media (min-width: 701px) {
    .intro-panel { text-align: justify; hyphens: auto; }
}
.intro-panel a { color: var(--teal-osc); font-weight: 600; }

/* ---------- Mensajes ---------- */
.mensaje-error, .mensaje-ok {
    padding: 1rem 1.2rem; border-radius: var(--radio);
    margin-bottom: 1.25rem; font-size: 1rem;
    display: flex; gap: 0.7rem; align-items: flex-start;
}
.mensaje-error {
    background: #fdecea; color: #a4231a; border-left: 5px solid #e0685e;
}
.mensaje-error ul { margin: 0.5rem 0 0 1.3rem; }
.mensaje-ok {
    background: var(--teal-claro); color: var(--teal-osc);
    border-left: 5px solid var(--teal);
}

/* Pantalla tras registrar un niño (views/ninos/registrado.php).
   Primero el teléfono: una columna de botones grandes; en pantallas
   anchas, dos columnas. */
.registro-listo {
    background: #fff; border-radius: 14px; text-align: center;
    padding: 1.6rem 1.2rem; margin-bottom: 1.5rem;
    border-top: 5px solid var(--teal);
    box-shadow: 0 2px 12px rgba(20,48,74,0.07);
}
.registro-listo-icono { color: var(--teal); margin-bottom: 0.4rem; }
.registro-listo-mensaje { color: var(--teal-osc); font-weight: 600; }
.registro-listo-nombre {
    font-size: 1.6rem; color: var(--marino); line-height: 1.25;
    margin: 0.3rem 0 0.4rem;
}
.registro-listo-datos { color: var(--gris-suave); font-size: 0.95rem; }
.opciones-titulo { font-size: 1.15rem; color: var(--marino); margin-bottom: 0.8rem; }
.opciones-siguientes { display: grid; grid-template-columns: 1fr; gap: 0.7rem; }
.opciones-siguientes a { justify-content: flex-start; min-height: 56px; }
@media (min-width: 701px) {
    .opciones-siguientes { grid-template-columns: 1fr 1fr; }
}

/* ---------- Fichas y avisos ---------- */
.ficha-nino {
    background: #fff; border-left: 5px solid var(--teal);
    padding: 1.1rem 1.4rem; border-radius: 12px;
    box-shadow: 0 2px 10px rgba(20,48,74,0.07);
    margin-bottom: 1.4rem; display: flex; flex-wrap: wrap;
    gap: 0.6rem 1.5rem; align-items: center;
}
.ficha-nino strong { color: var(--marino); font-size: 1.25rem; }
.ficha-nino span { font-size: 0.98rem; color: #4b5866; }

.aviso-instrumento {
    background: var(--teal-claro); color: var(--teal-osc);
    padding: 0.85rem 1.1rem; border-radius: var(--radio);
    font-size: 1rem; margin-bottom: 1.25rem;
    border-left: 4px solid var(--teal);
    display: flex; gap: 0.7rem; align-items: flex-start;
}

/* ---------- Formularios ---------- */
.formulario {
    background: #fff; padding: 1.9rem; border-radius: 14px;
    box-shadow: 0 2px 12px rgba(20,48,74,0.07);
}
.formulario fieldset {
    border: 1.5px solid var(--linea); border-radius: 12px;
    padding: 1.3rem 1.5rem; margin-bottom: 1.5rem;
}
.formulario legend {
    font-weight: 700; color: var(--teal-osc); padding: 0 0.6rem;
    font-size: 1.08rem;
}
.fila { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.campo { flex: 1; min-width: 200px; margin-bottom: 1rem; }
.campo label {
    display: block; font-size: 0.98rem; font-weight: 600;
    margin-bottom: 0.4rem; color: var(--marino);
}
.campo small { font-weight: normal; color: var(--gris-suave); font-size: 0.85rem; }
/* Nota bajo un grupo de campos; el margen negativo la acerca a los campos de arriba. */
.ayuda-grupo { color: var(--gris-suave); font-size: 0.92rem; margin: -0.65rem 0 1.5rem; }
/* Edad que resulta de la fecha de nacimiento escrita (formulario del niño). */
.edad-calculada { display: block; min-height: 1.2rem; margin-top: 0.35rem; font-size: 0.9rem; font-weight: 600; color: var(--teal-osc); }
.edad-calculada-mal { color: #b42318; }

/* Casilla para confirmar una medición fuera de los límites de la OMS. */
.confirmar-valores {
    display: flex; gap: 0.7rem; align-items: flex-start;
    background: #fff3cd; color: #7a5900; border-left: 5px solid #e0b100;
    padding: 0.9rem 1rem; border-radius: var(--radio); margin: 0.5rem 0 1.2rem;
    font-weight: 600; cursor: pointer;
}
.confirmar-valores input { width: 22px; height: 22px; flex-shrink: 0; margin-top: 0.1rem; }
.campo input, .campo select, .formulario textarea, .filtros input, .filtros select {
    width: 100%; padding: 0.75rem 0.85rem; border: 1.5px solid #cdd7e2;
    border-radius: var(--radio); font-size: 1.02rem; font-family: inherit;
    min-height: 50px; background: #fff; color: var(--gris-texto);
}
.campo input:focus, .campo select:focus, .formulario textarea:focus,
.filtros input:focus, .filtros select:focus {
    outline: none; border-color: var(--teal);
    box-shadow: 0 0 0 4px rgba(29,158,117,0.14);
}
.formulario textarea { resize: vertical; min-height: 90px; }
.campo-telefono { max-width: 230px; }

/* Campo con icono dentro del recuadro, a la izquierda del texto.
   El icono no recibe clics, para que al tocarlo se active el campo. */
.con-icono { position: relative; }
.con-icono .icono {
    position: absolute; left: 0.9rem; top: 50%;
    transform: translateY(-50%);
    color: var(--gris-suave); pointer-events: none;
}
.campo .con-icono input,
.campo .con-icono select { padding-left: 2.85rem; }
.con-icono:focus-within .icono { color: var(--teal); }
.formulario input#contrasena,
.formulario .medidor-fuerza { max-width: 280px; }

/* ---------- Botones ---------- */
.acciones {
    display: flex; justify-content: flex-end; gap: 0.9rem;
    margin-top: 0.75rem; flex-wrap: wrap;
}
.btn-primario, .btn-secundario, .btn-peligro {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.6rem;
    padding: 0.8rem 1.7rem; border-radius: var(--radio);
    font-size: 1.05rem; font-weight: 600; cursor: pointer;
    text-decoration: none; border: none; min-height: 52px;
    font-family: inherit; line-height: 1.2;
    transition: background 0.18s, transform 0.08s;
}
.btn-primario:active, .btn-secundario:active, .btn-peligro:active { transform: scale(0.985); }

.btn-primario { background: var(--teal); color: #fff; }
.btn-primario:hover { background: var(--teal-osc); }

.btn-secundario {
    background: var(--teal-claro); color: var(--teal-osc);
    border: 1.5px solid var(--teal-borde);
}
.btn-secundario:hover { background: #e0f0e9; }

.btn-peligro { background: #fdecea; color: #a4231a; border: 1.5px solid #f0b8b2; }
.btn-peligro:hover { background: #f9dcd8; }

.barra-acciones {
    display: flex; gap: 0.9rem; margin-bottom: 1.6rem; flex-wrap: wrap;
}

/* ---------- Filtros ---------- */
.filtros {
    display: flex; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1.4rem;
    align-items: flex-end;
}
.filtros input, .filtros select { width: auto; min-width: 190px; }
.filtros .btn-primario { min-width: 140px; }

/* ---------- Tablas ---------- */
.tabla {
    width: 100%; border-collapse: collapse; background: #fff;
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 2px 12px rgba(20,48,74,0.07);
    font-size: 1rem;
}
.tabla th, .tabla td {
    padding: 0.95rem 1rem; text-align: left;
    border-bottom: 1px solid var(--linea);
}
.tabla th {
    background: var(--marino); color: #fff; font-weight: 600;
    font-size: 0.98rem; letter-spacing: 0.2px;
}
.tabla tbody tr:hover { background: var(--teal-claro); }
.tabla a {
    color: var(--teal-osc); text-decoration: none; font-weight: 600;
    display: inline-flex; align-items: center; gap: 0.35rem;
}
.tabla a:hover { text-decoration: underline; }

/* Encabezados ordenables (lista de niños). Se antepone .tabla th para
   ganarle a la regla ".tabla a", que pintaria el texto de teal. */
.tabla th a.orden {
    color: #fff; font-weight: 600; text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap;
}
.tabla th a.orden:hover { text-decoration: underline; }
.tabla th a.orden .icono { opacity: 0.45; }
.tabla th a.orden.activa .icono { opacity: 1; }
.ayuda-tabla { color: var(--gris-suave); font-size: 0.92rem; margin-bottom: 0.6rem; }
/* Tabla con muchas columnas: menos relleno para que quepa sin desplazarse. */
.tabla-compacta th, .tabla-compacta td { padding: 0.85rem 0.7rem; }

.acciones-fila { white-space: nowrap; }
.acciones-fila a { margin-right: 0.85rem; }
.acciones-fila form { display: inline; margin-right: 0.85rem; }

/* ---------- Etiquetas de estado ---------- */
.etiqueta {
    display: inline-block;
    padding: 0.35rem 0.85rem; border-radius: 20px;
    font-size: 0.9rem; font-weight: 600; white-space: nowrap;
}
.etiqueta-activo { background: #e6f4ea; color: #1b7030; }
.etiqueta-egresado { background: #eef1f4; color: #5d6874; }
.etiqueta-aviso { background: #fff3cd; color: #7a5900; }

.nivel-normal { background: #e6f4ea; color: #1b7030; }
.nivel-cerca  { background: #fff3cd; color: #7a5900; }
.nivel-riesgo { background: #fdecea; color: #a4231a; }

.conteo, .vacio {
    margin-top: 1rem; font-size: 0.98rem; color: var(--gris-suave);
}
.vacio {
    background: #fff; padding: 1.5rem; border-radius: 12px;
    text-align: center; border: 2px dashed var(--linea);
}

/* ---------- Enlaces con apariencia de boton en tablas ---------- */
.enlace-boton {
    background: none; border: none; color: var(--teal-osc);
    cursor: pointer; font-size: 0.98rem; padding: 0.35rem 0;
    text-decoration: none; font-weight: 600; font-family: inherit;
}
.enlace-boton:hover { text-decoration: underline; }

/* ---------- Caja de contrasena temporal ---------- */
.caja-temporal {
    background: var(--teal-claro); border: 2px solid var(--teal-borde);
    border-radius: 12px; padding: 1.3rem 1.5rem; margin-bottom: 1.4rem;
    font-size: 1.05rem;
}
.caja-temporal p { font-size: 0.95rem; color: var(--teal-osc); margin-top: 0.7rem; }
.caja-temporal .dato-temporal {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem;
    font-size: 1.05rem; color: var(--marino); font-weight: 600; margin: 0 0 0.6rem;
}
.caja-temporal .dato-temporal .pass-temporal { margin-left: 0; }
.acciones-temporal { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
.acciones-temporal .btn-secundario,
.acciones-temporal .btn-whatsapp { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; }
.pass-temporal {
    display: inline-block; background: var(--marino); color: #fff;
    padding: 0.45rem 1.1rem; border-radius: 8px; font-size: 1.4rem;
    letter-spacing: 2px; margin-left: 0.6rem; font-weight: 600;
}

/* ---------- Indicador de fuerza de contrasena ---------- */
.medidor-fuerza { margin: 0.7rem 0 0.35rem; }
.barra-fuerza {
    height: 9px; background: #e2e8f0; border-radius: 5px;
    overflow: hidden; margin-bottom: 0.45rem;
}
.barra-fuerza-relleno {
    height: 100%; width: 0%; background: #ddd;
    transition: width 0.25s ease, background 0.25s ease;
}
.texto-fuerza {
    font-size: 0.92rem; font-weight: 700; min-height: 1.2rem; margin-bottom: 0.45rem;
}
.reglas-fuerza {
    list-style: none; padding: 0; margin: 0;
    font-size: 0.9rem; color: var(--gris-suave);
}
.reglas-fuerza li { padding: 0.2rem 0 0.2rem 1.4rem; position: relative; }
.reglas-fuerza li::before { content: 'o'; position: absolute; left: 0; color: #bbb; }
.reglas-fuerza li.regla-ok { color: var(--teal-osc); font-weight: 600; }
.reglas-fuerza li.regla-ok::before { content: '*'; color: var(--teal); }

/* ---------- Panel de seguimiento ---------- */
.tarjetas-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem; margin-bottom: 1.75rem;
}
.tarjeta-r {
    border-radius: 14px; padding: 1.2rem 1.3rem;
    display: flex; flex-direction: column;
    box-shadow: 0 2px 10px rgba(20,48,74,0.07);
}
.tarjeta-r .tr-num { font-size: 2.4rem; font-weight: 700; line-height: 1; }
.tarjeta-r .tr-lbl { font-size: 0.95rem; margin-top: 0.45rem; font-weight: 600; }

.tr-roja    { background: #fdecea; color: #a4231a; }
.tr-amarilla{ background: #fff3cd; color: #7a5900; }
.tr-naranja { background: #ffe8d6; color: #a8551a; }
.tr-azul    { background: var(--teal-claro); color: var(--teal-osc); }

.detalle-alerta { font-size: 0.93rem; color: #4b5866; max-width: 320px; }

.aviso-alerta {
    padding: 1rem 1.2rem; border-radius: 12px; margin-bottom: 1.4rem;
    font-size: 1rem; border-left: 5px solid;
    display: flex; gap: 0.7rem; align-items: flex-start;
}
.aviso-alerta.nivel-riesgo { background: #fdecea; color: #8f1d16; border-color: #d9534f; }
.aviso-alerta.nivel-cerca  { background: #fff3cd; color: #7a5900; border-color: #e0a800; }
.aviso-alerta.nivel-normal { background: var(--teal-claro); color: var(--teal-osc); border-color: var(--teal); }

/* ---------- Graficas de crecimiento ----------
   Una gráfica por fila, a todo el ancho. El alto lo fija .lienzo-grafica
   (Chart.js con maintainAspectRatio: false). */
.grid-graficas {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem; margin-top: 1.2rem;
}
.tarjeta-grafica {
    background: #fff; border-radius: 14px; padding: 1.1rem 1.2rem 1.2rem;
    box-shadow: 0 2px 12px rgba(20,48,74,0.07);
    display: flex; flex-direction: column;
}
.tarjeta-grafica-cabecera {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.8rem; margin-bottom: 0.8rem;
}
.tarjeta-grafica h3 { color: var(--marino); font-size: 1.15rem; font-weight: 600; }
.boton-ampliar { padding: 0.5rem 0.9rem; min-height: 44px; font-size: 0.95rem; }
.boton-ampliar .icono-cerrar,
.ampliada .boton-ampliar .icono-ampliar { display: none; }
.ampliada .boton-ampliar .icono-cerrar { display: inline-flex; }
.lienzo-grafica { position: relative; height: 320px; }
.aviso-girar { display: none; }
@media (min-width: 760px) {
    .lienzo-grafica { height: 430px; }
}

/* Selector "Edad del niño / Curva completa" */
.vista-graficas {
    display: inline-flex; background: #fff; border: 1.5px solid var(--teal-borde);
    border-radius: var(--radio); padding: 3px; gap: 3px; margin-bottom: 0.4rem;
}
.vista-graficas button {
    border: none; background: none; cursor: pointer; font-family: inherit;
    font-size: 0.95rem; font-weight: 600; color: var(--teal-osc);
    padding: 0.55rem 0.9rem; min-height: 42px; border-radius: 7px;
}
.vista-graficas button.activa { background: var(--teal); color: #fff; }

/* Gráfica ampliada: ocupa toda la pantalla, por encima del menú de abajo. */
.tarjeta-grafica.ampliada {
    position: fixed; inset: 0; z-index: 100; border-radius: 0;
    padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
}
.tarjeta-grafica.ampliada .lienzo-grafica { flex: 1; height: auto; min-height: 0; }
body.con-grafica-ampliada { overflow: hidden; }
@media (max-width: 700px) {
    .vista-graficas { display: flex; }
    .vista-graficas button { flex: 1; }
}
/* En el teléfono vertical, se sugiere girarlo para ver la gráfica más ancha. */
@media (orientation: portrait) and (max-width: 700px) {
    .tarjeta-grafica.ampliada .aviso-girar {
        display: block; text-align: center; color: var(--gris-suave);
        font-size: 0.88rem; margin: -0.3rem 0 0.5rem;
    }
}

/* ---------- Panel de indicadores ----------
   Primero el teléfono: tarjetas en dos columnas, gráficas una debajo de
   otra y filtros plegados. En la computadora: cuatro columnas y gráficas
   de dos en dos. */
.barra-exportar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem;
}
.barra-exportar > span { font-weight: 600; color: var(--marino); margin-right: 0.2rem; }
.barra-exportar .btn-secundario { padding: 0.55rem 1rem; min-height: 46px; font-size: 0.98rem; }
@media (max-width: 700px) {
    /* En el teléfono: "Exportar" arriba y los tres botones en un renglón. */
    .barra-exportar > span { flex-basis: 100%; }
    .barra-exportar .btn-secundario { flex: 1; padding: 0.5rem 0.4rem; gap: 0.35rem; }
}

.panel-filtros {
    background: #fff; border-radius: 12px; margin-bottom: 1.2rem;
    box-shadow: 0 2px 10px rgba(20,48,74,0.07);
}
.panel-filtros summary {
    display: flex; align-items: center; gap: 0.6rem; cursor: pointer;
    padding: 0.85rem 1rem; color: var(--marino); font-size: 0.95rem; min-height: 48px;
    list-style: none;
}
.panel-filtros summary::-webkit-details-marker { display: none; }
.panel-filtros summary .icono { color: var(--teal); }
.formulario-filtros {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.6rem 0.8rem; padding: 0 1rem 1rem;
}
.formulario-filtros label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.88rem; font-weight: 600; color: var(--marino); }
.formulario-filtros select, .formulario-filtros input {
    min-height: 46px; padding: 0.5rem 0.6rem; border: 1.5px solid #cdd7e2; border-radius: var(--radio);
    font-family: inherit; font-size: 0.98rem; background: #fff; color: var(--gris-texto); min-width: 0; width: 100%;
}
.filtros-botones { grid-column: 1 / -1; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.filtros-botones .btn-primario, .filtros-botones .btn-secundario { flex: 1; min-height: 48px; padding: 0.6rem 1rem; }

.tarjetas-panel {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.6rem; margin-bottom: 1.2rem;
}
.kpi {
    display: flex; flex-direction: column; align-items: flex-start; text-align: left;
    background: #fff; border: 1.5px solid var(--linea); border-radius: 12px;
    padding: 0.75rem 0.9rem; font-family: inherit; cursor: pointer; min-height: 76px;
    box-shadow: 0 2px 8px rgba(20,48,74,0.05);
}
.kpi:hover { border-color: var(--teal); }
.kpi-numero { font-size: 1.7rem; font-weight: 700; color: var(--marino); line-height: 1.1; }
.kpi-nombre { font-size: 0.85rem; color: var(--gris-suave); margin-top: 0.25rem; font-weight: 600; }
.kpi-alerta .kpi-numero { color: #a4231a; }
.kpi-cerca { border: 2px solid #e0a800; background: #fffbea; }
.kpi-cerca .kpi-numero { color: #7a5900; }
/* Las cuatro de estado nutricional, con los colores del panel de seguimiento. */
.kpi-nivel { border-color: transparent; }
.kpi-nivel .kpi-numero, .kpi-nivel .kpi-nombre { color: inherit; }
.kpi-fijo { cursor: default; }
.kpi-fijo:hover { border-color: var(--linea); }

.grid-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.grafica-ayuda { color: var(--gris-suave); font-size: 0.85rem; margin: 0.15rem 0 0.7rem; }
.lienzo-panel { position: relative; height: 280px; }
.lienzo-alto { height: 320px; }
.detalle-panel { margin-top: 0.5rem; scroll-margin-top: 1rem; }
.detalle-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.detalle-cabecera .subtitulo-seccion { flex: 1; }
.etiqueta-nivel {
    background: color-mix(in srgb, var(--color-nivel) 16%, white);
    color: color-mix(in srgb, var(--color-nivel) 75%, black);
}
.etiqueta + .etiqueta { margin-left: 0.3rem; }

@media (min-width: 701px) {
    .tarjetas-panel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .formulario-filtros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .filtros-botones { grid-column: auto / span 4; justify-content: flex-end; }
    .filtros-botones .btn-primario, .filtros-botones .btn-secundario { flex: 0 0 auto; }
}
@media (min-width: 900px) {
    .grid-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .tarjeta-ancha { grid-column: 1 / -1; }
}

/* Tabla ancha que se desliza de lado dentro de su recuadro. */
.tabla-scroll { overflow-x: auto; border-radius: 12px; }

/* ---------- Vacunacion, suplementacion y citas ---------- */
/* Se antepone .tabla para ganarle a la regla ".tabla a", que pintaria el texto de teal. */
.btn-whatsapp,
.tabla a.btn-whatsapp {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: #25d366; color: #fff;
    padding: 0.6rem 1.15rem; border-radius: var(--radio);
    text-decoration: none; font-size: 0.98rem; font-weight: 600;
    margin-right: 0.7rem; min-height: 46px;
}
.btn-whatsapp:hover,
.tabla a.btn-whatsapp:hover { background: #1da851; text-decoration: none; }

.sin-telefono {
    color: var(--gris-suave); font-size: 0.92rem;
    font-style: italic; margin-right: 0.7rem;
}
.sub-dato { color: var(--gris-suave); font-size: 0.86rem; }

/* Aviso de dato no registrado (Formato::dato). Gris e inclinado para
   distinguirlo a simple vista de un valor real. */
.sin-dato { color: var(--gris-suave); font-style: italic; }

/* ---------- Pestanas (Citas: calendario y lista) ---------- */
.pestanas {
    display: flex; gap: 0.4rem; margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--linea);
}
.pestanas a {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 1.2rem; min-height: 48px; margin-bottom: -2px;
    color: var(--gris-suave); font-weight: 600; text-decoration: none;
    border-bottom: 3px solid transparent;
}
.pestanas a:hover { color: var(--marino); }
.pestanas a.activa { color: var(--teal-osc); border-bottom-color: var(--teal); }

/* ---------- Calendario de citas ---------- */
.cal-encabezado {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem;
}
.cal-mes { font-size: 1.45rem; color: var(--marino); font-weight: 700; }
.cal-navegacion { display: flex; gap: 0.5rem; }
.cal-navegacion .btn-secundario { padding: 0.6rem 1rem; min-height: 46px; }

.cal-leyenda {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem;
    font-size: 0.92rem; color: var(--gris-suave); margin-bottom: 1rem;
}
.cal-leyenda > span { display: inline-flex; align-items: center; gap: 0.45rem; }
.cal-muestra {
    width: 16px; height: 16px; border-radius: 4px; display: inline-block;
    border: 2px solid currentColor;
}

.calendario {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 2px 12px rgba(20,48,74,0.07);
}
.cal-dia-semana {
    background: var(--marino); color: #fff; text-align: center;
    font-weight: 600; font-size: 0.92rem; padding: 0.6rem 0.2rem;
}
.cal-dia {
    display: flex; flex-direction: column; gap: 0.35rem;
    min-height: 96px; padding: 0.45rem 0.5rem;
    border-top: 1px solid var(--linea); border-left: 1px solid var(--linea);
    color: var(--gris-texto); text-decoration: none;
}
.cal-dia:nth-child(7n+1) { border-left: none; }
.cal-dia:hover { background: var(--teal-claro); }
.cal-numero { text-align: right; font-weight: 600; font-size: 0.98rem; }
.cal-dia.fuera-mes { background: #f7f9fb; color: #aab6c2; }
.cal-dia.pasado .cal-carga { opacity: 0.6; }
.cal-dia.hoy { background: #fff8e1; }
.cal-dia.hoy .cal-numero { color: var(--teal-osc); }
.cal-dia.elegido { box-shadow: inset 0 0 0 3px var(--teal); }
.cal-carga {
    display: block; text-align: center; border-radius: 6px;
    padding: 0.2rem 0.3rem; font-size: 0.88rem; font-weight: 700;
}

/* Colores de carga diaria (Cita::nivelCarga) */
.carga-normal   { background: #e6f4ea; color: #1b7030; }
.carga-alta     { background: #fff3cd; color: #7a5900; }
.carga-excedida { background: #fdecea; color: #a4231a; }

/* Aviso de carga en el formulario de cita. Sin "display" para que
   el atributo hidden lo pueda ocultar. */
.aviso-carga {
    margin-top: 0.55rem; padding: 0.6rem 0.85rem;
    border-radius: var(--radio); font-size: 0.95rem; font-weight: 600;
}

.bloque-esquema {
    background: #fff; border-radius: 12px; padding: 1.1rem 1.4rem;
    margin: 1.2rem 0 1.75rem; box-shadow: 0 2px 10px rgba(20,48,74,0.07);
}
.bloque-esquema summary {
    cursor: pointer; font-weight: 700; color: var(--teal-osc);
    font-size: 1.02rem; padding: 0.35rem 0;
}
.grid-esquema {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.7rem; margin-top: 1.1rem;
}
.item-esquema {
    display: flex; gap: 0.6rem; align-items: flex-start;
    padding: 0.7rem 0.9rem; border-radius: var(--radio); font-size: 0.92rem;
}
.item-esquema strong { display: block; font-size: 0.98rem; }
.item-esquema small { display: block; color: var(--gris-suave); font-size: 0.85rem; }
.item-esquema .esq-fecha { color: var(--teal-osc); font-weight: 700; }
.esq-marca { font-size: 1rem; line-height: 1.3; color: #b9c2cc; }
/* Tres estados: aplicada (teal), pendiente porque ya le tocaba (naranja)
   y todavía no le toca (gris). */
.esq-aplicada { background: var(--teal-claro); }
.esq-aplicada .esq-marca, .esq-marca-ok { color: var(--teal); }
.esq-cubierta { background: #e8eef7; }
.esq-cubierta .esq-marca, .esq-marca-cubierta { color: #4a6fa5; }
.item-esquema .esq-cubierta-texto { color: #34527d; font-weight: 600; }
.esq-pendiente { background: #ffe8d6; }
.esq-pendiente .esq-marca, .esq-marca-pendiente { color: #d9822b; }
.item-esquema .esq-falta { color: #a8551a; font-weight: 700; }
.esq-proxima { background: #f4f6f9; }
.esq-aviso {
    display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.6rem;
    border-radius: 999px; background: #ffe8d6; color: #a8551a;
    font-size: 0.85rem; font-weight: 700;
}
.leyenda-esquema {
    display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-top: 0.9rem;
    font-size: 0.88rem; color: var(--gris-suave);
}
.nota-esquema {
    font-size: 0.88rem; color: var(--gris-suave);
    margin-top: 1rem; font-style: italic;
}

/* ---------- Pie ---------- */
.pie {
    text-align: center; padding: 2.25rem 1rem;
    color: var(--gris-suave); font-size: 0.9rem;
}

/* ---------- Responsivo ---------- */
/* Etiquetas cortas del menú: solo se muestran en el teléfono. */
.texto-tel { display: none; }

/* Lista desplegable "Ordenar por" de la lista de niños: solo en el teléfono
   (se activa en la sección de abajo). Va antes de esa sección para que
   la regla del teléfono, que viene después, tenga prioridad. */
.orden-tel { display: none; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.orden-tel label { font-weight: 600; color: var(--marino); white-space: nowrap; }
.orden-tel select {
    flex: 1; min-width: 0; width: 100%; min-height: 46px; padding: 0.5rem 0.7rem; font-size: 1rem;
    border: 1.5px solid #cdd7e2; border-radius: var(--radio); background: #fff;
    font-family: inherit; color: var(--gris-texto);
}

@media (max-width: 700px) {
    html { font-size: 16px; }

    /* ---------- Teléfono: barra superior compacta ----------
       Solo el nombre del sistema, el usuario y el botón de salir, en una
       línea. Antes el encabezado ocupaba un tercio de la pantalla. */
    .barra-superior {
        flex-wrap: nowrap; gap: 0.75rem; padding: 0.55rem 0.9rem;
        border-bottom-width: 3px;
    }
    .barra-titulo { flex-shrink: 0; padding-left: 0.6rem; border-left-width: 4px; }
    .barra-titulo strong { font-size: 1.15rem; }
    .barra-sub { display: none; }
    .barra-usuario { margin-left: auto; gap: 0.6rem; min-width: 0; font-size: 0.85rem; }
    .usuario-datos { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .usuario-rol { display: none; }
    .btn-salir { padding: 0.5rem 0.7rem; min-height: 44px; min-width: 44px; justify-content: center; }
    .texto-pc { display: none; }
    .texto-tel { display: inline; }

    /* ---------- Teléfono: menú como barra fija abajo ----------
       Al alcance del pulgar; un toque para cambiar de pantalla.
       El cuerpo deja espacio abajo para que la barra no tape el contenido. */
    body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
    .barra-nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        margin: 0; gap: 0; flex-wrap: nowrap;
        background: #fff; border-top: 1px solid var(--linea);
        box-shadow: 0 -2px 10px rgba(20,48,74,0.08);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .barra-nav a {
        flex: 1 1 0; min-width: 0; min-height: 62px;
        flex-direction: column; justify-content: center; gap: 0.15rem;
        padding: 0.35rem 0.1rem; border-radius: 0;
        font-size: 0.72rem; font-weight: 600; color: var(--gris-suave);
        white-space: nowrap; letter-spacing: -0.2px;
    }
    .barra-nav a span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .barra-nav a .icono { width: 24px; height: 24px; }
    .barra-nav a:hover { background: none; color: var(--teal-osc); }
    .barra-nav a.activo { background: none; color: var(--teal-osc); box-shadow: inset 0 3px 0 var(--teal); }
    .barra-nav a[data-orden="1"] { order: 1; }
    .barra-nav a[data-orden="2"] { order: 2; }
    .barra-nav a[data-orden="3"] { order: 3; }
    .barra-nav a[data-orden="4"] { order: 4; }
    .barra-nav a[data-orden="5"] { order: 5; }
    /* Registrar va al centro y más grande: es la acción más frecuente. */
    .barra-nav a[data-destacado] { color: var(--teal); }
    .barra-nav a[data-destacado] .icono { width: 30px; height: 30px; margin: -3px 0; }

    .fila { flex-direction: column; gap: 0; }
    .contenido { margin: 1.2rem auto; padding: 0 1rem; }
    .titulo-pagina { font-size: 1.55rem; }
    .acciones { flex-direction: column-reverse; }
    .acciones .btn-primario, .acciones .btn-secundario { width: 100%; }
    .filtros input, .filtros select, .filtros .btn-primario { width: 100%; }
    /* Filtros en dos columnas: ocupan dos renglones en lugar de cuatro. */
    .filtros {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.55rem;
    }
    .filtros input, .filtros select { min-width: 0; }
    .filtros .btn-primario { padding-left: 0.8rem; padding-right: 0.8rem; }
    /* Si el botón quedaría solo en su renglón, usa el ancho completo. El primer
       hijo del formulario es el campo oculto "accion", por eso el botón queda
       solo cuando su posición es par. */
    .filtros .btn-primario:nth-child(even) { grid-column: 1 / -1; }
    .tabla { font-size: 0.95rem; }
    .tabla th, .tabla td { padding: 0.8rem 0.7rem; }

    /* En el celular cada dia mide unos 45 pixeles: solo numero y cantidad. */
    .cal-dia { min-height: 62px; padding: 0.3rem 0.2rem; gap: 0.25rem; }
    .cal-dia-semana { font-size: 0.78rem; padding: 0.45rem 0; }
    .cal-numero { text-align: center; font-size: 0.9rem; }
    .cal-texto-citas { display: none; }
    .cal-carga { padding: 0.15rem 0; font-size: 0.85rem; }
    .pestanas a { flex: 1; justify-content: center; padding: 0.7rem 0.5rem; }

    /* ---------- Teléfono: tablas como tarjetas ----------
       Cada fila de una tabla con la clase tabla-tarjetas se muestra como una
       tarjeta, con los datos uno debajo del otro: así no hay que mover la
       pantalla de lado. El título de cada dato sale del atributo data-label
       de la celda. La celda con la clase celda-titulo va arriba, en grande. */
    .tabla-tarjetas { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
    .tabla-tarjetas thead {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }
    .tabla-tarjetas tbody { display: block; }
    /* Cada tarjeta acomoda sus datos en dos columnas, con el título pequeño
       encima de cada valor; así una tarjeta mide menos de media pantalla. */
    .tabla-tarjetas tr {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 0.9rem;
        background: #fff; border-radius: 12px; margin-bottom: 0.85rem;
        padding: 0.3rem 1rem 0.5rem; box-shadow: 0 2px 10px rgba(20,48,74,0.08);
        border-left: 4px solid var(--teal);
    }
    .tabla-tarjetas tbody tr:hover { background: #fff; }
    .tabla-tarjetas td,
    .tabla-compacta.tabla-tarjetas td {
        display: block; min-width: 0; padding: 0.35rem 0;
        border-bottom: none; text-align: left; line-height: 1.35;
    }
    .tabla-tarjetas td::before {
        content: attr(data-label); display: block; margin-bottom: 0.1rem;
        font-weight: 600; font-size: 0.78rem; color: var(--gris-suave);
    }
    .tabla-tarjetas td.celda-titulo {
        grid-column: 1 / -1; order: -1;
        font-weight: 700; font-size: 1.08rem; color: var(--marino);
        padding-top: 0.5rem; padding-bottom: 0.3rem;
    }
    .tabla-tarjetas td.celda-titulo::before,
    .tabla-tarjetas td:not([data-label])::before { content: none; }
    /* Textos largos ocupan el ancho completo de la tarjeta. */
    .tabla-tarjetas td.celda-larga { grid-column: 1 / -1; }
    /* Acciones al pie de la tarjeta, como botones grandes para el dedo. */
    .tabla-tarjetas td.acciones-fila {
        grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem;
        white-space: normal; margin-top: 0.35rem; padding-top: 0.65rem;
        border-top: 1px solid var(--linea);
    }
    .tabla-tarjetas td.acciones-fila a:not(.btn-whatsapp),
    .tabla-tarjetas td.acciones-fila .enlace-boton {
        min-height: 44px; margin: 0; padding: 0.5rem 0.95rem;
        background: var(--teal-claro); border: 1.5px solid var(--teal-borde);
        border-radius: var(--radio); text-decoration: none;
    }
    .tabla-tarjetas td.acciones-fila form { margin: 0; }
    /* Si una fila no tiene acciones (por ejemplo, una cita ya cumplida), no se
       deja el pie vacío de la tarjeta. */
    .tabla-tarjetas td.acciones-fila:not(:has(a, button)) { display: none; }
    .tabla-tarjetas td.acciones-fila .btn-whatsapp { margin: 0; }

    /* Resumen del panel de seguimiento: dos tarjetas por renglón. Con su
       ancho mínimo de 170 px solo cabía una, y el resumen ocupaba más de
       una pantalla antes de llegar a la lista de niños. */
    .tarjetas-resumen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; margin-bottom: 1.2rem; }
    .tarjeta-r { padding: 0.8rem 0.9rem; }
    .tarjeta-r .tr-num { font-size: 1.9rem; }
    .tarjeta-r .tr-lbl { font-size: 0.86rem; margin-top: 0.3rem; }

    /* El orden de la lista de niños se elige con una lista desplegable,
       porque en las tarjetas no hay encabezados que tocar. */
    .orden-tel { display: flex; }
    .ayuda-tabla { display: none; }
}

/* ---------- Listas desplegables con flecha propia ----------
   En el iPhone (Safari), con la apariencia nativa, el relleno izquierdo no se
   respeta y el icono del campo quedaba encima de "Seleccione" (visita del 16
   de octubre de 2026). Sin la apariencia nativa, la lista se ve igual en
   Android, iPhone y computadora. Va al final para ganar a los estilos de cada
   pantalla; la flecha es un SVG incrustado, sin servicios externos. */
select:not([multiple]) {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235b6b7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 12px 8px;
    padding-right: 2.3rem;
}

/* ---------- Registros anulados ----------
   Como la línea roja en el carnet: el registro anulado sigue a la vista,
   tachado, con la nota de quién lo anuló, cuándo y por qué. */
.fila-anulada td:not(.acciones-fila) { text-decoration: line-through; color: #8a96a3; }
.fila-anulada td:not(.acciones-fila) .etiqueta { opacity: 0.55; }
.fila-anulada { background: #fbf5f4; }
.nota-anulado { display: block; color: #a4231a; font-size: 0.88rem; font-weight: 600; line-height: 1.4; }
.enlace-boton.enlace-anular { color: #a4231a; }
.aviso-mes {
    background: #fff4e5; border: 1.5px solid #f2c27a; border-left-width: 5px;
    border-radius: var(--radio); padding: 0.85rem 1rem; margin-bottom: 1.2rem; color: #7a4b0c;
}
/* La nota de anulación no es un botón: se muestra aunque en el teléfono se
   oculten las celdas de acciones vacías, y en la computadora se parte en
   varias líneas. */
.fila-anulada td.acciones-fila { white-space: normal; min-width: 14rem; }
.tabla-tarjetas .fila-anulada td.acciones-fila { display: block; }

/* Presentación, indicación y edad del suplemento elegido (formulario de entrega). */
.detalle-suplemento { display: block; min-height: 1.2rem; margin-top: 0.35rem; }

/* ---------- Varias vacunas a la vez ----------
   Cada dosis es una casilla grande, fácil de tocar en el teléfono; su lote
   aparece debajo al marcarla. */
.lista-dosis {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.6rem;
}
.dosis-item { border: 1.5px solid var(--linea); border-radius: var(--radio); background: #fff; }
.dosis-item:has(input[type="checkbox"]:checked) { border-color: var(--teal); background: var(--teal-claro); }
.dosis-casilla {
    display: flex; gap: 0.75rem; align-items: center;
    padding: 0.75rem 0.9rem; cursor: pointer; color: var(--marino);
}
.dosis-casilla input { width: 1.35rem; height: 1.35rem; flex-shrink: 0; accent-color: var(--teal); }
.dosis-casilla small { display: block; color: var(--gris-suave); font-size: 0.85rem; }
.dosis-lote { display: none; padding: 0 0.9rem 0.85rem; }
.dosis-lote label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--marino); }
.dosis-lote input {
    width: 100%; padding: 0.6rem 0.8rem; border: 1.5px solid var(--linea);
    border-radius: var(--radio); font-size: 1rem; font-family: inherit;
}
.dosis-item:has(input[type="checkbox"]:checked) .dosis-lote { display: block; }
/* Navegadores antiguos sin :has(): el lote siempre a la vista. */
@supports not selector(:has(*)) { .dosis-lote { display: block; } }
.dosis-ayuda { margin: 0.8rem 0 0; }
.bloque-dosis {
    border: 1.5px solid var(--linea); border-radius: 12px;
    padding: 0.9rem 1.2rem; margin-bottom: 1.2rem;
}
.bloque-dosis summary { cursor: pointer; font-weight: 700; color: var(--teal-osc); }
.bloque-dosis[open] summary { margin-bottom: 0.9rem; }

/* Número de carnet debajo del nombre, en la lista de niños. */
.celda-carnet { display: block; font-size: 0.85rem; font-weight: normal; color: var(--gris-suave); }

/* ---------- Código de ingreso y recuperación por correo ---------- */
.tarjeta-login .campo-codigo {
    font-size: 1.7rem; letter-spacing: 0.55rem; text-align: center;
    font-variant-numeric: tabular-nums;
}
.tarjeta-login .casilla-recordar {
    display: flex; gap: 0.7rem; align-items: flex-start; cursor: pointer;
    font-weight: normal; font-size: 0.95rem; color: var(--gris-texto); margin-top: 1.1rem;
}
.tarjeta-login .casilla-recordar input {
    width: 22px; height: 22px; min-height: 0; padding: 0; flex-shrink: 0;
    margin-top: 0.1rem; accent-color: var(--teal);
}
.form-reenviar { text-align: center; }
.tarjeta-login .boton-enlace {
    width: auto; min-height: 0; margin-top: 1.1rem; padding: 0.45rem 0.7rem;
    background: none; color: var(--teal-osc); font-size: 0.98rem; text-decoration: underline;
}
.tarjeta-login .boton-enlace:hover { background: var(--teal-claro); }
.tarjeta-login .boton-enlace:disabled { color: var(--gris-suave); text-decoration: none; cursor: default; background: none; }
.subtitulo strong { color: var(--marino); }
.nota-recuperar { margin: 1.2rem 0 0; font-size: 0.92rem; }
/* Un correo largo se parte en la tarjeta del teléfono en lugar de salirse. */
.celda-correo { overflow-wrap: anywhere; }