/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   App de beneficiarias · Fundación Madrina
   ══════════════════════════════════════════════════════════════════════════════════════════════════

   Escrito el 28-ago-2026 imitando el lenguaje visual del prototipo, a petición del cliente: su aspecto
   era mejor que el de la primera versión. Lo que se imita es el LENGUAJE —radios generosos, sombras
   suaves, degradados, azul marino, chapas pastel—; el código es propio.

   ── LO QUE ARREGLA ESTA VERSIÓN, Y CONVIENE NO REPETIR ──

   La hoja anterior estilaba `.cuerpo` con lo que le toca al `<body>` —tipografía, fondo, márgenes,
   `min-height`— pero la cáscara pone `<body class="app-body">`. **Esa regla no se aplicaba a nada**, y
   la app se veía con los valores por defecto del navegador: Times New Roman, fondo blanco y 8 px de
   margen. Ni un error en consola; solo un aspecto peor que no se explicaba.

   Aquí el `<body>` se estila **por su etiqueta**, no por una clase: una etiqueta no se puede
   desincronizar con el HTML.

   ── La estructura, desde el 28-ago-2026 ──

       <header class="cabecera">   azul, con el logo y su nombre
       <main class="cuerpo">       lo que cambia
       <nav class="menu">          fija abajo, tres iconos

   La barra abajo y no arriba porque es la zona que alcanza el pulgar con una mano, que es como se usa
   un móvil de pie en la cola de una recogida.

   ── Lo que NO se copia del prototipo, con su motivo ──

   1. **La fuente «Outfit» de Google Fonts.** Es una petición a un tercero desde una app con datos
      personales, y con mala cobertura deja el texto invisible o cambiando de forma a media lectura.
      Se usa una pila del sistema con el mismo aire geométrico —Avenir Next en Apple, Segoe UI Variable
      en Windows 11, Roboto en Android— que se ve al instante y no sale de aquí. Si la fundación quiere
      Outfit de verdad, hace falta **el fichero** `.woff2` para servirlo desde este mismo servidor.

   2. **14 px de texto y 44 px de alto.** Aquí son **16 y 48**, y no es preferencia:
        · por debajo de 16 px, **Safari en iOS hace zoom automático** al enfocar un campo y la pantalla
          salta de sitio mientras se escribe;
        · por debajo de 48 px, el dedo falla — y aquí lo de al lado puede ser «Cancelar mi cita».

   3. **El marco de móvil de pega** (`.device-container`, `.device-notch`). Servía para enseñar la app
      en un ordenador; en un móvil real roba pantalla.

   Sin marcos de estilos y sin compilación, como el resto del proyecto.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
    /* Los colores de la fundación, los mismos del panel. */
    --rojo: #e63946;
    --rojo-oscuro: #c1121f;
    --azul: #1d3557;
    --azul-medio: #457b9d;

    --peligro: #d90429;

    --fondo: #f2f4f7;
    --blanco: #fff;
    --tinta: #2b2d42;
    --apagado: #6c757d;
    --linea: #e9ecef;
    --borde-campo: #cbd5e1;
    --fondo-campo: #f8fafc;

    --radio-g: 16px;
    --radio-m: 12px;
    --radio-p: 10px;

    --sombra-p: 0 2px 8px rgba(0, 0, 0, .06);
    --sombra-m: 0 4px 16px rgba(0, 0, 0, .1);
    --sombra-g: 0 10px 30px rgba(0, 0, 0, .15);

    /* El alto mínimo de todo lo pulsable, en una sola variable para que no se pueda bajar en un sitio
       sin darse cuenta. */
    --alto-tocable: 48px;

    /* Lo que mide la barra de abajo. El `<main>` reserva este hueco para que el último botón de la
       página no quede tapado por ella — un fallo que solo se ve al llegar al final y scrollear. */
    --alto-menu: 66px;
}

/*
 * La clase de ocultar del proyecto (convencion de `CLAUDE.md`). Faltaba en esta hoja: el campo del
 * tema libre del SOS la usaba y no hacia nada, asi que salia siempre visible.
 */
.oculto { display: none !important; }

* {
    box-sizing: border-box;
    /* Sin el destello gris al tocar en Android: se ve como si la app fuera lenta. */
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    /* Pila geométrica del sistema: Apple, Windows 11, Android. Cero peticiones a terceros. */
    font-family: "Avenir Next", Avenir, "Segoe UI Variable Text", "Segoe UI",
                 system-ui, Roboto, "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--tinta);
    background: var(--fondo);
    min-height: 100vh;
    /* Sin el rebote elástico de iOS al llegar al final: deja ver el fondo blanco por debajo. */
    overscroll-behavior-y: none;
}

/* ── La cabecera ───────────────────────────────────────────────────────────────────────────────── */

/*
 * Azul de la fundación, con las esquinas de abajo redondeadas para que la primera tarjeta parezca
 * asomar por debajo. `padding-top` con la zona segura: en un móvil con muesca, sin eso el logo queda
 * medio tapado por el reloj del sistema.
 */
.cabecera {
    background: linear-gradient(135deg, var(--azul) 0%, var(--azul-medio) 100%);
    color: var(--blanco);
    padding: calc(env(safe-area-inset-top) + 14px) 16px 20px;
    border-radius: 0 0 24px 24px;
    box-shadow: var(--sombra-m);
    position: relative;
    z-index: 5;
}

.cabecera-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
}

/*
 * El logo, sobre una pastilla blanca.
 *
 * El PNG de la fundación está pensado para fondo claro: puesto directamente sobre el azul se pierde.
 * La pastilla no es adorno, es lo que lo hace legible.
 */
.cabecera-logo {
    height: 26px;
    width: auto;
    display: block;
    background: var(--blanco);
    padding: 6px 10px;
    border-radius: var(--radio-p);
    box-sizing: content-box;
}

.cabecera-titulo {
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -.01em;
}

/* Empuja el botón de actualizar al extremo derecho, quede lo que quede a su izquierda. */
.cabecera-icono-fin { margin-left: auto; }

.cabecera-icono {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: var(--blanco);
    cursor: pointer;
    transition: background .2s ease;
}

.cabecera-icono:active { background: rgba(255, 255, 255, .3); }

.cabecera-saludo {
    margin-top: 16px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    /* Los nombres llevan dos apellidos: se recorta en vez de romper la cabecera. */
    min-width: 0;
}

.cabecera-hola { font-size: 15px; opacity: .85; flex-shrink: 0; }

.cabecera-nombre {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* La cabecera de la pantalla de acceso: sin nombre, porque todavía no se sabe quién es. */
.cabecera-sola {
    text-align: center;
    padding-bottom: 26px;
}

.cabecera-sola .cabecera-logo { margin: 0 auto; }

/* El logo, cuando es enlace (17-sep-2026). `display:block` porque un `<a>` es en línea por defecto y
   dentro de la fila de la cabecera —que es un flex— metería el hueco de la línea base debajo del logo y
   lo descolocaría un par de píxeles. `line-height:0` remata lo mismo.

   Solo en la cabecera de dentro: en la pantalla de acceso el logo sigue sin enlace a propósito, porque
   ahí todavía no ha entrado y un enlace hacia fuera es una forma de perderla. */
.cabecera-logo-enlace { display: block; line-height: 0; text-decoration: none; }
.cabecera-lema { margin-top: 12px; font-size: 15px; opacity: .9; }

/* ── El cuerpo ─────────────────────────────────────────────────────────────────────────────────── */

.cuerpo {
    padding: 18px 16px calc(var(--alto-menu) + env(safe-area-inset-bottom) + 20px);
    max-width: 620px;
    margin: 0 auto;
    animation: aparecer .25s ease;
}

/* Sin barra abajo (la pantalla de acceso) no hace falta reservarle sitio. */
.cuerpo-sin-barra { padding-bottom: calc(env(safe-area-inset-bottom) + 24px); }

/* ── La barra de menú ──────────────────────────────────────────────────────────────────────────── */

/*
 * Fija abajo. `position: fixed` y no `sticky` a propósito: con `sticky` desaparecería en las pantallas
 * cortas —que son casi todas—, y la barra tiene que estar SIEMPRE, porque es el único camino entre
 * pestañas.
 */
.menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    background: var(--blanco);
    border-top: 1px solid var(--linea);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
    padding-bottom: env(safe-area-inset-bottom);
}

.menu-op {
    flex: 1;
    min-height: var(--alto-menu);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    background: none;
    color: var(--apagado);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    /* Relativo para que la marquita roja de la pestaña activa se pueda colocar sobre su borde. */
    position: relative;
    transition: color .2s ease;
}

.menu-op:focus-visible { outline: 2px solid var(--azul-medio); outline-offset: -2px; }
.menu-op-activa { color: var(--rojo); }

/* El punto que marca la pestaña activa: se ve de un vistazo aunque el color no se distinga bien. */
.menu-op-activa::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--rojo);
}

.icono { width: 24px; height: 24px; display: block; flex-shrink: 0; }

/* ── Tarjetas ──────────────────────────────────────────────────────────────────────────────────── */

.tarjeta {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio-g);
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: var(--sombra-p);
}

/* La tarjeta de una cita: con el filo azul a la izquierda, que es lo que la distingue de un aviso. */
.tarjeta-cita { border-left: 4px solid var(--azul-medio); position: relative; }

/* La de HOY manda: filo rojo y un fondo apenas teñido. Es la pregunta con la que se abre la app. */
.tarjeta-hoy {
    border-left-color: var(--rojo);
    background: linear-gradient(180deg, #fff5f6 0%, var(--blanco) 60%);
}

.tarjeta-apagada { background: #fafbfc; box-shadow: none; }

.tarjeta-vacia { text-align: center; padding: 28px 20px; color: var(--apagado); }
.tarjeta-vacia .icono { width: 34px; height: 34px; margin: 0 auto 12px; opacity: .45; }
.tarjeta-vacia p { margin: 4px 0; }

/* La lista del historial: sin `padding` abajo, porque la última línea ya trae su propio hueco. */
.tarjeta-lista { padding-bottom: 8px; }

/* ── La ficha de Perfil ────────────────────────────────────────────────────────────────────────── */

.tarjeta-perfil { text-align: center; padding: 24px 16px; }

/*
 * La inicial de su nombre en un círculo. No es una foto: aquí no hay fotos de las beneficiarias, y no
 * las va a haber — pedirlas para una app sería recoger un dato biométrico que nadie necesita.
 */
.perfil-inicial {
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--azul) 0%, var(--azul-medio) 100%);
    color: var(--blanco);
    font-size: 30px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.perfil-nombre { font-size: 19px; font-weight: 700; color: var(--azul); letter-spacing: -.01em; }

/* ── Los datos de una cita ─────────────────────────────────────────────────────────────────────── */

.cita-fecha {
    font-size: 18px;
    font-weight: 700;
    color: var(--azul);
    letter-spacing: -.01em;
    /* Las fechas largas vienen del servidor en minúscula («jueves 04 de septiembre»). */
    text-transform: capitalize;
    margin-bottom: 10px;
}

.cita-datos { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }

.cita-dato {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.cita-dato .icono { width: 18px; height: 18px; color: var(--azul-medio); }

/* ── Textos ────────────────────────────────────────────────────────────────────────────────────── */

.titulo {
    font-size: 17px;
    font-weight: 700;
    color: var(--azul);
    letter-spacing: -.01em;
    margin: 4px 0 12px;
}

.apagado { color: var(--apagado); font-size: 14px; }

/*
 * Un título que ocupa lo justo. Para las pantallas que ya se identifican solas —el tablón, con sus
 * pestañas debajo— y donde el título es una etiqueta, no una separación entre bloques.
 */
.titulo-compacto { font-size: 15px; margin: 0 0 10px; }

/* Las cabeceras de las DOS secciones de la pantalla de inicio: «Tus citas de Recogida» y «Otras citas»
   (16-sep-2026, cliente). Centradas para que se lean como dos bloques hermanos y no como una lista con
   subtítulos. El peso ya lo trae `.titulo`; aquí solo cambia la alineación y el aire. */
.titulo-seccion { text-align: center; margin: 4px 0 14px; }

/* ── Botones ───────────────────────────────────────────────────────────────────────────────────── */

.boton {
    display: block;
    width: 100%;
    min-height: var(--alto-tocable);
    padding: 12px 16px;
    margin-bottom: 10px;
    border: 0;
    border-radius: var(--radio-p);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}

.boton:last-child { margin-bottom: 0; }
.boton:active { transform: scale(.985); }
.boton:disabled { opacity: .6; cursor: default; transform: none; }

.boton-principal {
    background: linear-gradient(135deg, var(--rojo) 0%, var(--rojo-oscuro) 100%);
    color: var(--blanco);
    box-shadow: 0 4px 14px rgba(230, 57, 70, .3);
}

.boton-secundario { background: #e2e8f0; color: #334155; }

.boton-borde {
    background: var(--blanco);
    border: 1.5px solid var(--rojo);
    color: var(--rojo);
}

.boton-peligro {
    background: var(--blanco);
    border: 1.5px solid var(--peligro);
    color: var(--peligro);
}

/*
 * Dos botones en fila, y **solo si caben**.
 *
 * Por debajo de 200 px cada uno, «Cambiar quién recoge» se parte en tres líneas y la tarjeta crece más
 * que si fueran apilados. `flex-wrap` los apila solos en las pantallas estrechas.
 */
.fila-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    margin-bottom: 10px;
}

.fila-botones > .boton {
    flex: 1 1 150px;
    margin-bottom: 0;
    font-size: 15px;
}

/* ── Campos ────────────────────────────────────────────────────────────────────────────────────── */

.campo { margin-bottom: 16px; }

.campo label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--azul);
}

.entrada,
.selector {
    width: 100%;
    min-height: var(--alto-tocable);
    padding: 12px 14px;
    border: 1.5px solid var(--borde-campo);
    border-radius: var(--radio-p);
    background: var(--fondo-campo);
    font-family: inherit;
    /* 16 px exactos: por debajo, Safari en iOS hace zoom al enfocar y la pantalla salta. */
    font-size: 16px;
    color: var(--tinta);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.entrada:focus,
.selector:focus {
    outline: 0;
    border-color: var(--azul-medio);
    box-shadow: 0 0 0 3px rgba(69, 123, 157, .18);
    background: var(--blanco);
}

/* La flecha del desplegable, dibujada aquí: la del sistema cambia de un móvil a otro. */
.selector {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231d3557' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

/* ── Avisos ────────────────────────────────────────────────────────────────────────────────────── */

.aviso {
    padding: 12px 14px;
    border-radius: var(--radio-m);
    border-left: 4px solid;
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 1.45;
}

.aviso-info { background: #e0f2fe; border-left-color: #0284c7; color: #0c5c8a; }
.aviso-ojo { background: #fff3cd; border-left-color: #e76f51; color: #7a5a03; }
.aviso-mal { background: #ffe5e5; border-left-color: var(--peligro); color: #900c3f; }

/* ── Chapas ────────────────────────────────────────────────────────────────────────────────────── */

.chapa-ok,
.chapa-ojo {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.chapa-ok { background: #d1fae5; color: #065f46; }
.chapa-ojo { background: #fef3c7; color: #92400e; }

/* «ES HOY» va arriba a la derecha de la tarjeta, fuera del flujo, para que no empuje la fecha. */
.chapa-hoy {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--rojo);
    color: var(--blanco);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
}

.chapa-autorizada {
    margin-top: 10px;
    padding: 9px 12px;
    background: #eef2f7;
    border-radius: var(--radio-p);
    font-size: 14px;
    color: var(--azul);
}

/* ── Líneas del historial ──────────────────────────────────────────────────────────────────────── */

.linea {
    padding: 10px 0;
    border-bottom: 1px solid var(--linea);
}

.linea:last-child { border-bottom: 0; }
.linea-fecha { font-weight: 600; font-size: 15px; color: var(--azul); text-transform: capitalize; }

.linea-texto {
    font-size: 14px;
    color: var(--apagado);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

/* ── Cargando ──────────────────────────────────────────────────────────────────────────────────── */

.cargando { padding: 80px 16px; text-align: center; }

.rueda {
    width: 34px;
    height: 34px;
    margin: 0 auto 14px;
    border: 3px solid var(--linea);
    border-top-color: var(--rojo);
    border-radius: 50%;
    animation: girar .8s linear infinite;
}

/* ── Modal ─────────────────────────────────────────────────────────────────────────────────────── */

/*
 * La hoja sube desde abajo y se pega abajo, no en el centro. En un móvil, un cuadro centrado deja los
 * botones en mitad de la pantalla, fuera del alcance del pulgar.
 */
.fondo-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: fundir .2s ease;
}

.hoja-modal {
    width: 100%;
    max-width: 620px;
    max-height: 88vh;
    overflow-y: auto;
    background: var(--blanco);
    border-radius: 24px 24px 0 0;
    padding: 24px 16px calc(env(safe-area-inset-bottom) + 24px);
    box-shadow: var(--sombra-g);
    animation: subir .25s ease;
}

/* ── El mensaje flotante ───────────────────────────────────────────────────────────────────────── */

/*
 * Encima de la barra de menú, no debajo: puesto abajo del todo quedaría tapado por ella justo cuando
 * dice «Tu cita se ha cambiado», que es lo que hay que leer.
 */
.aviso-flotante {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(var(--alto-menu) + env(safe-area-inset-bottom) + 14px);
    z-index: 90;
    max-width: 588px;
    margin: 0 auto;
    padding: 14px 16px;
    border-radius: var(--radio-m);
    background: var(--azul);
    color: var(--blanco);
    font-size: 15px;
    font-weight: 500;
    box-shadow: var(--sombra-g);
    animation: subir .25s ease;
}

/* ── El chip de la derivación, en la cabecera ───────────────────────────────────────────────────── */

/*
 * Al lado del logo, pequeño, en dos líneas apretadas: qué estado y desde/hasta cuándo.
 *
 * ── Por qué el color va SOBRE fondo azul y aun así se lee ──
 *
 * La cabecera es azul oscuro, así que los tonos pastel de los avisos (que están pensados para fondo
 * blanco) desaparecerían. Aquí el chip lleva **fondo propio, claro y opaco**, y el texto en el tono
 * oscuro del estado. Es la misma familia de colores que el resto de la app, no una paleta nueva.
 *
 * ── Y por qué puede encogerse hasta desaparecer ──
 *
 * `min-width: 0` y `flex-shrink: 1`: en un móvil muy estrecho, entre el logo y el botón de actualizar
 * puede no quedar sitio. Antes de romper la cabecera, el chip se recorta — el estado de la derivación
 * importa, pero menos que poder pulsar «actualizar».
 */
.chip-deriv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex-shrink: 1;
    padding: 5px 10px;
    border-radius: 999px;
    line-height: 1.25;
    /* Sobre el azul, un borde claro lo despega del fondo sin necesidad de sombra. */
    border: 1px solid rgba(255, 255, 255, .35);
}

.chip-deriv-que {
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip-deriv-cuando {
    font-size: 10.5px;
    opacity: .85;
    white-space: nowrap;
}

/*
 * Los tres colores. El nivel lo decide el servidor por la CONSECUENCIA, no por la fecha: el rojo se
 * reserva para quien de verdad no puede pedir cita. Está razonado en `chipDerivacion()` de `app.js`,
 * con los números que lo motivaron.
 */
.chip-verde { background: #d7f2e3; color: #14532d; }
.chip-ambar { background: #fdedc8; color: #7a5a03; }
.chip-rojo  { background: #ffd9dd; color: #900c3f; }

/* ── El botón de llamar ────────────────────────────────────────────────────────────────────────── */

/*
 * Es un `<a href="tel:">` y no un `<button>`: así el navegador abre el marcador con el número puesto,
 * que es el gesto que la pantalla le está pidiendo. Un botón que copiara el número al portapapeles
 * dejaría el último paso —pegarlo en el marcador— en manos de quien probablemente no sepa hacerlo.
 *
 * Verde y no rojo, aunque el aviso de al lado sea rojo: aquí llamar es LA SALIDA, no el problema.
 */
.boton-llamar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    background: linear-gradient(135deg, #15803d 0%, #166534 100%);
    color: var(--blanco);
    box-shadow: 0 4px 14px rgba(21, 128, 61, .28);
}

.boton-llamar .icono { width: 20px; height: 20px; }

/* ── Los datos de Perfil, en modo lectura ──────────────────────────────────────────────────────── */

.dato { padding: 10px 0; border-bottom: 1px solid var(--linea); }
.dato:last-child { border-bottom: 0; }
.dato-etiqueta { font-size: 13px; color: var(--apagado); }
.dato-valor { font-size: 16px; margin-top: 2px; overflow-wrap: anywhere; }

/* Un hueco vacío se marca, no se deja en blanco: en blanco parece que la app no cargó el dato. */
.dato-vacio { color: var(--apagado); font-style: italic; }

/* El botón de editar lleva icono, así que necesita alinear como el de llamar. */
.boton .icono { width: 19px; height: 19px; }
.boton:has(.icono) { display: flex; align-items: center; justify-content: center; gap: 9px; }

/* ── Instalar en la pantalla de inicio ─────────────────────────────────────────────────────────── */

.tarjeta-instalar { border-left: 4px solid var(--azul-medio); }
.instalar-fila { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.instalar-fila .icono { width: 30px; height: 30px; color: var(--azul-medio); flex-shrink: 0; }

.pasos { margin: 4px 0 18px; }

.paso {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    font-size: 15px;
    line-height: 1.45;
}

.paso > span {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--azul);
    color: var(--blanco);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Las reglas, plegadas ──────────────────────────────────────────────────────────────────────── */

/*
 * `<details>` del propio navegador, sin una línea de JavaScript: se abre y se cierra solo, funciona con
 * el lector de pantalla, y no hay estado que mantener ni que se pueda desincronizar al repintar.
 */
.plegable {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    margin-bottom: 14px;
    overflow: hidden;
}

.plegable > summary {
    padding: 13px 16px;
    min-height: var(--alto-tocable);
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--azul);
    cursor: pointer;
    list-style: none;
}

/* La flecha por defecto se ve distinta en cada navegador; esta es la misma en todos. */
.plegable > summary::-webkit-details-marker { display: none; }

.plegable > summary::after {
    content: '';
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--azul-medio);
    border-bottom: 2px solid var(--azul-medio);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}

.plegable[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.lista-reglas {
    margin: 0;
    padding: 0 16px 14px 34px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--tinta);
}

.lista-reglas li { margin-bottom: 6px; }
.lista-reglas li:last-child { margin-bottom: 0; }

/*
 * La casilla «este móvil es mío» se retiró el 29-ago-2026 y su estilo con ella: la sesión ya no caduca,
 * así que no hay nada que preguntar al entrar. Queda anotado para que nadie busque `.casilla` y crea
 * que se perdió por descuido.
 */

/* ── El SOS en la barra de menú ────────────────────────────────────────────────────────────────── */

/*
 * En rojo y en el centro, que es donde lo puso el prototipo y donde tiene sentido: el centro de la
 * barra es el punto que el pulgar alcanza sin mirar, y esto se pulsa en el peor momento del día de
 * alguien.
 *
 * No lleva la marca de pestaña activa porque **no es una pestaña**: abre una hoja y la pantalla de
 * debajo se queda donde estaba.
 */
.menu-op-sos { color: var(--peligro); }
.menu-op-sos .icono { color: var(--peligro); }
.menu-op-sos:active { background: #fff1f2; }

/* ── Las pestañas del tablón ───────────────────────────────────────────────────────────────────── */

/*
 * Se ENVUELVEN a otra línea, no se deslizan.
 *
 * Hasta el 29-ago-2026 se deslizaban en horizontal con `scroll-snap`, y el cliente vio el problema al
 * usarlo: **las últimas quedaban fuera de la pantalla y no se veían**. Un carrusel solo funciona cuando
 * algo asoma por el borde e invita a arrastrar; con cuatro pestañas ajustadas, la cuarta desaparecía.
 *
 * Envolviendo se ven todas, y además esto aguanta que la fundación añada categorías: la fila de más
 * cuesta unos píxeles y nada se pierde por la derecha.
 */
.pestanas-avisos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.pestana-aviso {
    flex-shrink: 0;
    min-height: 40px;
    padding: 9px 15px;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: var(--blanco);
    color: var(--apagado);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.pestana-aviso-activa {
    background: var(--azul);
    border-color: var(--azul);
    color: var(--blanco);
}

/* Cuántos hay en esa categoría: evita entrar en una pestaña para descubrir que está vacía. */
.pestana-cuenta {
    display: inline-block;
    min-width: 19px;
    padding: 0 5px;
    margin-left: 3px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .09);
    font-size: 12px;
    line-height: 19px;
    text-align: center;
}

.pestana-aviso-activa .pestana-cuenta { background: rgba(255, 255, 255, .25); }

/* ── Un aviso del tablón ───────────────────────────────────────────────────────────────────────── */

.tarjeta-aviso { border-left: 4px solid var(--azul-medio); }

.aviso-titulo {
    font-size: 16px;
    font-weight: 700;
    color: var(--azul);
    line-height: 1.35;
    margin-bottom: 2px;
}

/*
 * `pre-wrap`: los avisos los escribe una persona en un `textarea` del panel, con sus saltos de línea y
 * sus listas a mano. Sin esto, un aviso de cinco puntos llega al móvil como un párrafo corrido.
 *
 * Y `overflow-wrap: anywhere` por si alguien pega una dirección web larguísima, que si no desborda la
 * tarjeta y saca una barra de desplazamiento horizontal a la página entera.
 */
.aviso-texto {
    font-size: 15px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ── La puesta en marcha ───────────────────────────────────────────────────────────────────────── */

/*
 * Tres pantallas centradas y con aire, la primera vez que entra. Se ven una sola vez en la vida de esa
 * clave, así que pueden permitirse ser generosas: no compiten con nada.
 */
.bienvenida {
    text-align: center;
    padding: 28px 20px 24px;
}

.bienvenida p { margin: 0 0 10px; }
.bienvenida p:last-child { margin-bottom: 0; }

/* El icono, dentro de un círculo azul claro: da un punto donde posar la vista al abrir la pantalla. */
.bienvenida-icono {
    width: 66px;
    height: 66px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #e7edf5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bienvenida-icono .icono { width: 32px; height: 32px; color: var(--azul); }

.bienvenida-titulo {
    font-size: 21px;
    font-weight: 700;
    color: var(--azul);
    letter-spacing: -.02em;
    margin-bottom: 10px;
}

/*
 * Los dos puntos de «vas por aquí».
 *
 * Solo desde el paso 1: en la bienvenida no hay nada que contar todavía, y unos puntos ahí darían la
 * impresión de un formulario largo justo cuando lo que se quiere es que pulse «Comencemos».
 */
.pasos-puntos {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
}

.punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--borde-campo);
    transition: background .2s ease, width .2s ease;
}

.punto-activo { width: 22px; border-radius: 999px; background: var(--rojo); }

/* ── La barra de «hay novedades» ───────────────────────────────────────────────────────────────── */

/*
 * Aparece abajo cuando algo cambia y ella tiene algo abierto —escribiendo un SOS, por ejemplo—, porque
 * repintar en ese momento le borraria lo que esta escribiendo.
 *
 * Encima de la barra de menu, no debajo: puesta abajo del todo quedaria tapada por ella justo cuando
 * dice lo unico que tiene que decir. Y ocupa el ancho para que se pueda tocar sin apuntar.
 */
.barra-novedades {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(var(--alto-menu) + env(safe-area-inset-bottom) + 14px);
    z-index: 95;
    max-width: 588px;
    margin: 0 auto;
    min-height: var(--alto-tocable);
    padding: 13px 16px;
    border: 0;
    border-radius: var(--radio-m);
    background: var(--azul-medio);
    color: var(--blanco);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--sombra-g);
    animation: subir .25s ease;
}

.barra-novedades:active { background: var(--azul); }

/* ── Animaciones ───────────────────────────────────────────────────────────────────────────────── */

@keyframes aparecer {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes subir {
    from { transform: translateY(100%); }
    to { transform: none; }
}

@keyframes fundir {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes girar { to { transform: rotate(360deg); } }

/*
 * Quien haya pedido en su móvil «reducir movimiento» normalmente lo hace porque el movimiento le marea
 * o le dificulta leer. Se quitan todas, incluida la rueda de cargando.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ══════════════════════════════════ La zona de «Otras citas» ══════════════════════════════════

   15-sep-2026, a petición del cliente tras verlo en su móvil.

   Las citas que NO son recogida —con un profesional, y mañana las convocatorias— solo se informan: ahí
   no hay nada que pulsar, porque cambiarlas o anularlas se hace llamando. El problema era que se veían
   igual que la recogida, y la recogida sí se gestiona sola. Mismo aspecto para dos cosas que se
   comportan distinto.

   La separación es una **franja a todo el ancho**, no un margen ni una línea: al romper los 16px de aire
   que tiene el resto de la pantalla, deja de leerse como «otro apartado de lo mismo» y pasa a leerse
   como otra zona. Es lo que eligió el cliente entre siete propuestas.

   ⚠️ El sangrado se hace con margen negativo contra el relleno de `.cuerpo`, **no con `100vw`**: con
   `100vw` la franja se sale por la derecha en cuanto aparece la barra de desplazamiento, y en un móvil
   con `max-width: 620px` tampoco quedaría centrada. Si algún día cambia el relleno de `.cuerpo`, estos
   16px cambian con él. */
.zona-otras {
    /* Justo el relleno lateral de `.cuerpo`, en negativo y devuelto como relleno propio.
       Los 28px de arriba son más que los de abajo a propósito: el aire por encima del título es lo que
       separa esta zona de la recogida, y el cliente lo pidió más holgado el 16-sep. */
    margin: 38px -16px 0;
    padding: 28px 16px 20px;
    background: var(--azul);
}

/* Centrado, igual que el título de la primera sección: las dos cabeceras se leen como pareja. */
.zona-otras-cab { text-align: center; margin-bottom: 16px; }
.zona-otras-cab .icono { width: 18px; height: 18px; color: #a8c0d8; }
.zona-otras-titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--blanco);
}
/* «No se piden desde aquí», debajo del título y también centrado: dicho UNA vez para toda la zona y no
   repetido en cada tarjeta. Con tres citas el mismo día —el caso real medido— tres avisos seguidos son
   ruido, no ayuda. */
.zona-otras-nota { font-size: 12px; color: #a8c0d8; margin-top: 4px; }

/* Dentro de la franja la tarjeta va sin filo azul: sobre fondo oscuro no se distingue y además ese filo
   significa otra cosa (el rojo de `.tarjeta-hoy`, que sí se respeta si la cita es hoy). */
.zona-otras .tarjeta-cita { border-left-color: var(--linea); }
.zona-otras .tarjeta-cita:last-of-type { margin-bottom: 0; }

/* El pie: la salida, también una sola vez. */
.zona-otras-pie { margin-top: 14px; }
.zona-otras-pie p { font-size: 13px; color: #cbd8e6; margin: 0 0 10px; line-height: 1.45; }