/* ==========================================================================
   Medicinas — sistema de diseño "clínico sereno"
   Pantalla. Las reglas de impresión viven en print.css
   ========================================================================== */

:root {
    /* Color */
    --bg: #eaf0ee;
    --surface: #ffffff;
    --surface-2: #f6faf9;
    --ink: #13201d;
    --ink-2: #4a5d59;
    --ink-3: #7d908b;
    --line: #dde6e3;
    --line-fuerte: #c6d4d0;

    --sage: #2f6f5e;
    --sage-600: #245747;
    --sage-100: #d9ebe4;
    --sage-50: #eaf4f0;

    --amber: #9a5b12;
    --amber-100: #f7e6cf;
    --amber-50: #fdf4e8;

    --rose: #a33a3a;
    --rose-50: #fbeceb;

    --violeta: #5b4b8a;
    --violeta-50: #efecf7;

    /* Espaciado */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;

    /* Radios */
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-full: 999px;

    /* Tipografía */
    --font-cuerpo: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Instrument Serif", Georgia, serif;

    --fs-xs: 13px;
    --fs-sm: 15px;
    --fs-md: 17px;
    --fs-lg: 20px;
    --fs-xl: 25px;
    --fs-2xl: 32px;

    /* Sombras: muy suaves, tinte verdoso */
    --sh-1: 0 1px 2px rgba(19, 32, 29, .05);
    --sh-2: 0 2px 10px rgba(19, 32, 29, .07);
    --sh-3: 0 12px 32px rgba(19, 32, 29, .12);
}

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

html {
    /* Quita el zoom por doble toque en móvil; el zoom con pellizco sigue */
    touch-action: manipulation;
}

body {
    font-family: var(--font-cuerpo);
    font-size: var(--fs-md);
    line-height: 1.45;
    color: var(--ink);
    background: var(--bg);
    padding: var(--sp-5) var(--sp-4) var(--sp-7);
    -webkit-text-size-adjust: 100%;
    /* Quita el zoom por doble toque en móvil (el zoom con pellizco sigue) */
    touch-action: manipulation;
}

/* Se debe comportar como una app, no como una web: nada de zoom.
   iOS no respeta el touch-action del ancestro para el doble-toque (lo decide
   por el elemento tocado), así que va en todos. `pan-x pan-y` deja desplazar
   pero quita el doble-toque Y el pellizco. El remate para iOS, que ignora
   incluso esto, está en el guard JS de index.php. */
* {
    touch-action: pan-x pan-y;
}

/* Mantener pulsado no selecciona texto ni saca el menú de copiar, como en una
   app nativa. Los campos del formulario sí deben poder seleccionarse. */
body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

input, textarea, select, [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
}

:focus-visible {
    outline: 3px solid var(--sage);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */

.login-panel {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 75vh;
}

.login-content {
    background: var(--surface);
    padding: var(--sp-7) var(--sp-6);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
    text-align: center;
    max-width: 420px;
    width: 100%;
}

.login-content h1 {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 400;
    letter-spacing: -.01em;
    color: var(--ink);
    margin-bottom: var(--sp-2);
}

.login-content h1 i {
    color: var(--sage);
}

.login-content p {
    color: var(--ink-2);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-6);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

input {
    font-family: inherit;
    padding: var(--sp-4);
    font-size: var(--fs-md);
    color: var(--ink);
    background: var(--surface-2);
    border: 1.5px solid var(--line-fuerte);
    border-radius: var(--r-md);
    transition: border-color .15s, background .15s;
}

input:focus {
    outline: none;
    border-color: var(--sage);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--sage-50);
}

.btn-login {
    font-family: inherit;
    background: var(--sage);
    color: #fff;
    padding: var(--sp-4);
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: .02em;
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background .15s;
}

.btn-login:hover {
    background: var(--sage-600);
}

.mensaje-error {
    color: var(--rose);
    font-size: var(--fs-sm);
    font-weight: 600;
    margin-top: var(--sp-4);
    min-height: 20px;
}

/* --------------------------------------------------------------------------
   Estructura general
   -------------------------------------------------------------------------- */

.main-content {
    display: none;
}

.seccion {
    background: var(--surface);
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    box-shadow: var(--sh-1);
    margin-bottom: var(--sp-5);
}

.seccion h2 {
    font-size: var(--fs-lg);
    font-weight: 650;
    letter-spacing: -.015em;
    color: var(--ink);
    margin-bottom: var(--sp-4);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.seccion h2 i {
    color: var(--sage);
    font-weight: 400;
}

.seccion-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.seccion-cabecera h2 {
    margin-bottom: 0;
}

/* Barras de acciones de las cabeceras: siempre envuelven, nunca se solapan */
.cabecera-acciones,
.cabecera-nav {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    align-items: center;
}

.cabecera-nav {
    flex-wrap: nowrap;
}

.fecha-actual {
    color: var(--ink-3);
    font-size: var(--fs-sm);
    text-transform: lowercase;
}

/* Pantallas: solo una visible. La barra de navegación decide cuál. */
.pantalla {
    display: none;
}

.pantalla.activa {
    display: block;
}

.mes-label {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    min-width: 8ch;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Resumen del día — elemento firma (tira de blíster)
   -------------------------------------------------------------------------- */

.resumen {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--sp-5);
}

.resumen-cifra {
    font-family: var(--font-display);
    font-size: 96px;
    line-height: .85;
    font-weight: 400;
    color: var(--amber);
    font-variant-numeric: tabular-nums;
    min-width: 1.4ch;
    text-align: center;
}

.resumen.completo .resumen-cifra {
    color: var(--sage);
}

.resumen-titulo {
    font-size: var(--fs-lg);
    font-weight: 650;
    letter-spacing: -.015em;
    color: var(--ink);
}

.resumen-sub {
    font-size: var(--fs-sm);
    color: var(--ink-2);
    margin-top: var(--sp-1);
}

.blister {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
}

.blister-celda {
    width: 26px;
    height: 34px;
    border-radius: 7px 7px 9px 9px;
    background: var(--amber-100);
    border: 1px solid #e6c99b;
    transition: background .2s, border-color .2s, transform .2s;
}

.blister-celda.tomada {
    background: var(--surface-2);
    border: 1px dashed var(--line-fuerte);
    transform: scale(.9);
}

/* --------------------------------------------------------------------------
   Tarjetas de medicina
   -------------------------------------------------------------------------- */

.med-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--sp-3);
}

.med-card {
    display: flex;
    flex-direction: column;
    background: var(--amber-50);
    border: 1.5px solid var(--amber-100);
    border-left: 5px solid var(--amber);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: background .18s, border-color .18s, opacity .18s;
}

.med-main {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4);
    cursor: pointer;
    flex: 1;
}

.med-main .checkbox-medicina {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.med-box {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 2px solid var(--line-fuerte);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 20px;
    transition: background .15s, border-color .15s, color .15s;
}

.checkbox-medicina:focus-visible + .med-box {
    outline: 3px solid var(--sage);
    outline-offset: 2px;
}

.med-txt {
    min-width: 0;
}

.med-num {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    margin-right: var(--sp-2);
}

.med-nombre {
    font-size: var(--fs-md);
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--ink);
}

.med-meta {
    display: block;
    margin-top: var(--sp-1);
}

.medicina-tipo {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sage-600);
    background: var(--sage-100);
    border-radius: var(--r-full);
    padding: 2px 10px;
}

.medicina-notas-adicionales {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--amber);
    font-weight: 500;
}

.med-acciones {
    display: flex;
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
}

.btn-mini {
    font-family: inherit;
    flex: 1;
    background: var(--surface);
    color: var(--ink-2);
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.btn-mini:hover {
    background: var(--sage-50);
    color: var(--sage-600);
}

.btn-mini.eliminar:hover {
    background: var(--rose-50);
    color: var(--rose);
}

/* Estado: marcada = ya la tengo, no hay que comprarla */
.med-card.tengo {
    background: var(--surface-2);
    border-color: var(--line);
    border-left-color: var(--sage);
}

.med-card.tengo .med-box {
    background: var(--sage);
    border-color: var(--sage);
    color: #fff;
}

.med-card.tengo .med-nombre {
    color: var(--ink-3);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.med-card.tengo .medicina-tipo {
    color: var(--ink-3);
    background: var(--surface);
    border: 1px solid var(--line);
}

.med-card.tengo .medicina-notas-adicionales {
    color: var(--ink-3);
}

.lista-vacia {
    text-align: center;
    color: var(--ink-3);
    padding: var(--sp-7) var(--sp-4);
    font-size: var(--fs-sm);
}

.lista-vacia i {
    display: block;
    font-size: 40px;
    color: var(--line-fuerte);
    margin-bottom: var(--sp-3);
}

/* --------------------------------------------------------------------------
   Otros productos
   -------------------------------------------------------------------------- */

.prod-lista {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.prod-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.prod-main {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

.prod-main .checkbox-producto {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.prod-nombre {
    font-size: var(--fs-md);
    font-weight: 600;
}

.prod-item.tengo .med-box {
    background: var(--sage);
    border-color: var(--sage);
    color: #fff;
}

.prod-item.tengo .prod-nombre {
    color: var(--ink-3);
    text-decoration: line-through;
}

.prod-acciones {
    display: flex;
    gap: var(--sp-2);
    flex: 0 0 auto;
}

.prod-acciones .btn-mini {
    background: transparent;
    padding: 8px 12px;
    border-radius: var(--r-sm);
}

.leyenda {
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-size: var(--fs-xs);
    color: var(--ink-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
}

.leyenda span {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.leyenda .pastilla {
    width: 14px;
    height: 18px;
    border-radius: 4px 4px 5px 5px;
    flex: 0 0 auto;
}

.leyenda .pastilla.falta {
    background: var(--amber-100);
    border: 1px solid #e6c99b;
}

.leyenda .pastilla.tengo {
    background: var(--surface);
    border: 1px dashed var(--line-fuerte);
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.btn {
    font-family: inherit;
    padding: 14px var(--sp-5);
    font-size: var(--fs-md);
    font-weight: 600;
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    text-align: center;
}

.btn-agregar {
    background: var(--sage-50);
    color: var(--sage-600);
    border: 1.5px solid var(--sage-100);
}

.btn-agregar:hover {
    background: var(--sage-100);
}

.btn-imprimir {
    background: var(--sage);
    color: #fff;
    box-shadow: var(--sh-2);
}

.btn-imprimir:hover {
    background: var(--sage-600);
}

.botones-principales {
    display: flex;
    gap: var(--sp-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--sp-5);
}

.botones-principales .btn {
    min-width: 280px;
}

/* Botón secundario / de barra (antes .btn-pasadas) */
.btn-pasadas {
    font-family: inherit;
    background: var(--surface);
    color: var(--ink-2);
    border: 1.5px solid var(--line-fuerte);
    padding: 9px 14px;
    border-radius: var(--r-md);
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s, border-color .15s, color .15s;
}

.btn-pasadas:hover {
    background: var(--sage-50);
    border-color: var(--sage-100);
    color: var(--sage-600);
}

.btn-logout {
    font-family: inherit;
    background: transparent;
    color: var(--ink-3);
    padding: 10px 16px;
    font-size: var(--fs-sm);
    font-weight: 600;
    border: 1.5px solid var(--line-fuerte);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

.btn-logout:hover {
    color: var(--rose);
    border-color: var(--rose);
}

.btn-salir-desktop {
    display: inline-block;
}

.seccion-salir-movil {
    display: none;
}

.btn-logout-movil {
    font-family: inherit;
    background: var(--surface);
    color: var(--ink-2);
    padding: var(--sp-4);
    font-size: var(--fs-md);
    font-weight: 600;
    border: 1.5px solid var(--line-fuerte);
    border-radius: var(--r-md);
    cursor: pointer;
    width: 100%;
}

/* --------------------------------------------------------------------------
   Navegación principal (barra de pestañas)
   -------------------------------------------------------------------------- */

.nav-app {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 400;
    display: flex;
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 16px rgba(19, 32, 29, .08);
    padding-bottom: env(safe-area-inset-bottom);
}

.nav-item {
    font-family: inherit;
    position: relative;       /* ancla de la marca ::before de pestaña activa */
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 62px;
    padding: 8px 2px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
    transition: color .15s, background .15s;
}

.nav-item i {
    font-size: 24px;
    line-height: 1;
}

.nav-item:hover {
    color: var(--sage-600);
    background: var(--sage-50);
}

.nav-item.activa {
    color: var(--sage);
}

/* Marca la pestaña activa sin depender solo del color */
.nav-item.activa::before {
    content: '';
    position: absolute;
    top: 0;
    width: 34px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--sage);
}

/* Sitio para que la barra no tape el final del contenido */
body.con-nav {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
}

/* --------------------------------------------------------------------------
   Citas médicas
   -------------------------------------------------------------------------- */

.seccion-citas {
    background: var(--surface);
}

.lista-citas {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.citas-mes {
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: capitalize;
    color: var(--ink);
    margin: var(--sp-4) 0 var(--sp-2);
}

.citas-mes:first-child {
    margin-top: 0;
}

.cita-card {
    display: flex;
    gap: var(--sp-3);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-left: 4px solid var(--line-fuerte);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);
}

/* El JS genera la clase desde el nombre del paciente ("mamá"/"papá", con tilde) */
.cita-card.mama,
.cita-card.mamá {
    border-left-color: #a8497a;
}

.cita-card.papa,
.cita-card.papá {
    border-left-color: #2f6f9f;
}

.cita-card.proxima {
    background: var(--sage-50);
    border-color: var(--sage-100);
}

.cita-card.pasada {
    opacity: .55;
}

.cita-card.pasada .cita-hora {
    text-decoration: line-through;
}

/* Bloque de fecha: el número de día es el ancla visual */
.cita-dia {
    flex: 0 0 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 2px;
    text-align: center;
}

.cita-dia strong {
    font-size: 46px;
    font-weight: 650;
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.cita-dia small {
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: capitalize;
    color: var(--ink-2);
    margin-top: 4px;
}

.cita-dia .cita-dia-mes {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-3);
}

.cita-cuerpo {
    flex: 1;
    min-width: 0;
}

.cita-linea {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: 5px;
}

.cita-hora {
    font-size: var(--fs-md);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.cita-paciente {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: var(--r-full);
}

.cita-paciente.mama,
.cita-paciente.mamá {
    background: #f7e4ee;
    color: #8d3363;
}

.cita-paciente.papa,
.cita-paciente.papá {
    background: #e0edf7;
    color: #22587f;
}

.cita-cuenta {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--sage-600);
    background: var(--sage-100);
    border-radius: var(--r-full);
    padding: 2px 9px;
}

.cita-medico {
    font-size: var(--fs-md);
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--ink);
}

.cita-hospital {
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

.cita-especialidad {
    display: inline-block;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink-2);
    padding: 2px 11px;
    border-radius: var(--r-full);
    margin-top: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Las notas se escriben con saltos de línea: hay que respetarlos */
.cita-notas {
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--ink-2);
    white-space: pre-line;
}

.cita-botones {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--line);
}

.cita-botones .btn-mini {
    background: transparent;
    border-radius: var(--r-sm);
    padding: 7px 10px;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Pantalla de Salud: peso, orina, tensión, azúcar, oxígeno y temperatura
   -------------------------------------------------------------------------- */

.seccion-control h2 i {
    color: var(--violeta);
}

#seccion-salud {
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   Listado por días: una tarjeta por día, con todo lo medido ese día
   -------------------------------------------------------------------------- */

.dias-lista {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/* Filtros por tipo de medición. En móvil ruedan en horizontal: caben seis y no
   deben robarle dos líneas a la lista. */
.filtros-medida {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.chip-filtro {
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 8px 13px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-2);
    background: var(--surface);
    border: 1.5px solid var(--line-fuerte);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}

.chip-filtro:hover {
    border-color: var(--violeta);
    color: var(--ink);
}

.chip-filtro.activo {
    background: var(--violeta);
    border-color: var(--violeta);
    color: #fff;
}

.chip-num {
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-xs);
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-2);
}

.chip-filtro.activo .chip-num {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.btn-nueva-medicion {
    width: 100%;
    background: var(--violeta);
}

.btn-nueva-medicion:hover {
    background: #4a3d74;
}

.dia-card {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
}

.dia-card.hoy {
    border-color: var(--violeta);
    background: var(--violeta-50);
}

.dia-titulo {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: capitalize;
    color: var(--ink-2);
    margin-bottom: var(--sp-2);
}

.dia-hoy {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--violeta);
    border-radius: var(--r-full);
    padding: 2px 9px;
}

.medicion {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    margin-top: var(--sp-2);
}

.medicion-hora {
    display: inline-block;
    font-size: var(--fs-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--violeta);
    background: var(--violeta-50);
    border-radius: var(--r-full);
    padding: 2px 10px;
    margin-bottom: var(--sp-2);
}

.medicion-valores {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
}

.medicion-dato {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.medicion-dato strong {
    font-size: var(--fs-xl);
    font-weight: 650;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.medicion-dato small {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: 2px;
}

.medicion-nota {
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

.medicion-acciones {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--line);
}

.medicion-acciones .btn-mini {
    background: transparent;
    border-radius: var(--r-sm);
    padding: 8px;
}

/* --------------------------------------------------------------------------
   Móvil
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    body {
        padding: var(--sp-3) var(--sp-3) var(--sp-6);
    }

    .seccion {
        padding: var(--sp-4);
        margin-bottom: var(--sp-4);
    }

    .resumen {
        padding: var(--sp-4);
        gap: var(--sp-4);
    }

    .resumen-cifra {
        font-size: 58px;
    }

    .med-grid {
        grid-template-columns: 1fr;
    }

    .seccion-cabecera {
        flex-direction: column;
        align-items: stretch;
    }

    /* Dos botones por fila: caben enteros y no se pisan con el menú flotante */
    .cabecera-acciones .btn,
    .cabecera-acciones .btn-pasadas {
        flex: 1 1 calc(50% - var(--sp-2));
        min-width: 0;
        justify-content: center;
    }

    .cabecera-nav {
        justify-content: center;
    }

    .nav-item span {
        font-size: 11px;
    }

    .botones-principales .btn {
        width: 100%;
        min-width: 0;
    }

    .btn-salir-desktop {
        display: none !important;
    }

    .seccion-salir-movil {
        display: block;
        margin-top: var(--sp-5);
        text-align: center;
    }

    .prod-item {
        flex-wrap: wrap;
    }

    .blister-celda {
        width: 22px;
        height: 29px;
    }
}

/* --------------------------------------------------------------------------
   Valoración de mediciones y resumen del mes
   -------------------------------------------------------------------------- */

.medicion-estado {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: var(--sp-3);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .01em;
    padding: 4px 12px 4px 10px;
    border-radius: var(--r-full);
}

/* Nunca solo color: cada nivel lleva además su propio símbolo */
.medicion-estado::before {
    font-family: 'remixicon';
    font-weight: 400;
    font-size: 15px;
    line-height: 1;
}

.nivel-ok {
    color: #1f5d4e;
    background: var(--sage-100);
}

/* El icono es cosa de la etiqueta de estado, no del nivel: si el content va en
   .nivel-* suelto, otros elementos con esa clase (el reparto del resumen) heredan
   el carácter sin la fuente de iconos y pintan un cuadrado vacío. */
.medicion-estado.nivel-ok::before { content: '\eb80'; }        /* check */

.nivel-atencion {
    color: var(--amber);
    background: var(--amber-100);
}

.medicion-estado.nivel-atencion::before { content: '\eaa1'; }  /* alerta */

.nivel-alerta {
    color: #8a2f2f;
    background: #f6d9d7;
}

.medicion-estado.nivel-alerta::before { content: '\eaa1'; }

.resumen-salud {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-4);
}

.resumen-salud-titulo {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: var(--sp-3);
}

.resumen-cifras {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5);
}

.cifra {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.cifra strong {
    font-size: var(--fs-2xl);
    font-weight: 650;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
}

.cifra small {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: 3px;
}

.cifra-delta {
    font-size: var(--fs-xs);
    font-weight: 600;
    margin-top: 5px;
    color: var(--ink-2);
}

.resumen-reparto {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

.reparto-item {
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 3px 11px;
    border-radius: var(--r-full);
}

.gr-tension {
    width: 100%;
    height: auto;
    margin-top: var(--sp-4);
    overflow: visible;
}

.gr-guia {
    stroke: var(--line);
    stroke-width: 1;
}

.gr-eje {
    font-size: 9px;
    font-weight: 600;
    fill: var(--ink-3);
    font-family: var(--font-cuerpo);
}

.gr-valor {
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-cuerpo);
}

.gr-leyenda {
    display: flex;
    gap: var(--sp-4);
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--ink-2);
    font-weight: 600;
}

.gr-leyenda span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gr-leyenda i {
    width: 11px;
    height: 11px;
    border-radius: 3px;
}

.resumen-consulta {
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    background: var(--amber-50);
    border-left: 3px solid var(--amber);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--amber);
}

.resumen-pie {
    margin-top: var(--sp-3);
    font-size: 11px;
    color: var(--ink-3);
    line-height: 1.4;
}

/* ==========================================================================
   Gotas: colirios y su pauta
   El color de cada colirio (--color-colirio) lo inyecta el JS, para que sea el
   mismo en pantalla y en la hoja impresa.
   ========================================================================== */

#lista-colirios {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.colirio-card {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-left: 5px solid var(--color-colirio, var(--sage));
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
}

.colirio-cabecera {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
}

.colirio-nombre {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--ink);
}

/* En qué ojo va: es lo que no se puede equivocar, así que va destacado */
.colirio-ojo {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--color-colirio, var(--sage));
    border-radius: var(--r-full);
    padding: 3px 10px;
}

.colirio-hoy {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-md);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.colirio-hoy.apagado {
    font-weight: 500;
    color: var(--ink-3);
}

.colirio-notas {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

.colirio-pautas {
    list-style: none;
    margin: var(--sp-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.colirio-pauta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-3);
}

/* El tramo que se está aplicando estos días */
.colirio-pauta.vigente {
    border-color: var(--color-colirio, var(--sage));
    background: var(--surface);
    box-shadow: var(--sh-1);
}

.colirio-pauta-textos {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.colirio-pauta-textos strong {
    font-size: var(--fs-md);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.colirio-pauta-textos small {
    font-size: var(--fs-xs);
    color: var(--ink-3);
    margin-top: 2px;
}

.colirio-pauta-acciones,
.colirio-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.colirio-acciones {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line);
}