/* ==========================================================================
   Guardio PWA — hoja de estilo única
   ==========================================================================
   Identidad ya decidida (Master Manual §6b): navy #203A5B + teal #5CB8B2,
   Manrope autohospedada, tarjetas suaves y redondeadas.

   Dos reglas de fondo, porque quien usa esto no es técnico:
     · Mobile-first. La app se usa de pie, en la calle, con una mano.
     · Objetivos grandes. La usan un niño y una persona mayor: nada por debajo
       de 48px de alto, y los botones de la pantalla sencilla mucho más.
   ========================================================================== */

/* Manrope variable, autohospedada (nunca Google Fonts CDN — regla de la Factory). */
@font-face {
  font-family: 'Manrope';
  src: url('/app/fonts/manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
}

:root {
  --navy: #203A5B;
  --navy-900: #16283f;
  --navy-100: #e6ecf3;
  --teal: #5CB8B2;
  --teal-700: #3d938d;
  --teal-100: #e2f3f1;
  --exito: #2E9E5B;
  --atencion: #F2B94B;
  --emergencia: #D64545;
  --emergencia-700: #ab3535;
  --fondo: #F5F8F9;
  --blanco: #ffffff;
  --tinta: #1d2733;
  --tinta-suave: #5a6875;
  --borde: #dde5ea;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --sombra: 0 2px 10px rgba(32, 58, 91, .08);
  --sombra-alta: 0 8px 28px rgba(32, 58, 91, .16);

  --toque: 48px;   /* altura mínima de cualquier cosa que se pueda tocar */
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* 05/09/2026 (v31, feedback de María): «el texto de "¿Cómo estás?" es más
     pequeño que el resto — prefiero REDUCIR el resto a ese tamaño». Era
     verdad: las burbujas de la conversación iban a .9rem (≈14 px) mientras un
     párrafo cualquiera del panel del cuidador iba a 17 px, y casi todos los
     controles (labels, botones, chips) ya vivían en .9-.95rem. El outlier era
     el texto corrido. Se baja la base del panel del cuidador a .95rem para
     que TODO caiga en la misma banda, en vez de agrandar la conversación.
     ⚠️ Esto NO encoge la pantalla de Dylan: `.sencilla` (y todo lo que hay
     dentro) declara sus tamaños en `rem` — relativos a la raíz, no a `body` —
     así que sigue exactamente igual de grande. De hecho ahora la diferencia
     cuidador/Dylan es MAYOR, que es justo lo que pedía el punto 7 del 31/08. */
  font-size: .95rem;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0 0 .4em; line-height: 1.25; font-weight: 800; color: var(--navy); }
/* 02/09/2026 (feedback María, punto 2 — "mi letra sigue saliendo grande; la
   de Dylan tiene un tamaño apropiado"): el 31/08 se subió el suelo de
   `.sencilla` (arriba) pero el panel del CUIDADOR (mapa/menú/ficha/alertas/
   zonas/cuenta...) se dejó "tal cual" dando por sentado que su densidad ya
   era "normal" — y para María, en su móvil, seguía sin serlo. `h1`/`h2` aquí
   son los que ponen el título de CADA pantalla del cuidador (`Cabecera` de
   `ui.js` y las `.tarjeta__titulo` de cada tarjeta) — se bajan un peldaño.
   `h3` se deja intacto a propósito: su único uso en toda la app son los
   subtítulos de la Ficha de Emergencia DENTRO de `.sencilla` (cuidado.js) —
   tocarlo no ayudaría al cuidador y sí encogería la pantalla de Dylan. Los
   pocos sitios donde `h2` SÍ vive dentro de `.sencilla` (SOS, PIN de salida,
   Ficha) quedan protegidos explícitamente más abajo, junto al resto de reglas
   de esa pantalla — ver ".sencilla .tarjeta__titulo" y vecinas. */
h1 { font-size: 1.3rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 .8em; }

a { color: var(--teal-700); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: #fff; padding: .8em 1.2em; z-index: 100;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* --- Arranque / estados generales ---------------------------------------- */
.arranque {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem;
}
.arranque__logo { width: 96px; height: 96px; object-fit: contain; }
.arranque__texto { color: var(--tinta-suave); }
.fallback { padding: 2rem; max-width: 34rem; margin: 0 auto; }

.cargando, .vacio {
  padding: 1.6rem 1rem; text-align: center; color: var(--tinta-suave);
}
.error-caja {
  background: #fdecec; border: 1px solid #f5c2c2; color: #8f2c2c;
  border-radius: var(--r-md); padding: .9rem 1rem; margin: 0 0 1rem;
}
.exito-caja {
  background: #e7f5e9; border: 1px solid #b8e0c0; color: #1f6b3d;
  border-radius: var(--r-md); padding: .9rem 1rem; margin: 0 0 1rem;
}
/* v37 (07/09/2026) — la respuesta de "Dile a Guardio": el backend contesta en
   varias líneas ("No te he entendido.\nPuedo: · …"), y se respetan tal cual. */
.respuesta-agente { white-space: pre-line; margin: .8rem 0 0; }
/* 02/09/2026 (punto 2): .92rem (~14.7px) ya era más pequeño que el body — se
   baja un poco más porque en la práctica es el texto secundario de TODAS las
   tarjetas del cuidador (el que más se repite en pantalla). `.sencilla .muted`
   (arriba, 31/08) sigue con su propio 1rem — no depende de este valor. */
.muted { color: var(--tinta-suave); font-size: .85rem; }

/* --- Botones -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: var(--toque); padding: .7em 1.3em;
  font: inherit; font-weight: 700; border-radius: var(--r-md);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, transform .06s ease;
}
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover:not([disabled]) { background: var(--navy-900); }
.btn--teal { background: var(--teal); color: #10322f; }
.btn--teal:hover:not([disabled]) { background: var(--teal-700); color: #fff; }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--borde); }
.btn--ghost:hover:not([disabled]) { background: var(--navy-100); }
.btn--peligro { background: var(--emergencia); color: #fff; }
.btn--bloque { width: 100%; }

/* --- Cabecera ------------------------------------------------------------- */
.cab {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .8rem;
  padding-top: calc(.55rem + env(safe-area-inset-top));
  background: var(--navy); color: #fff;
  box-shadow: var(--sombra);
}
.cab__logo { width: 34px; height: 34px; object-fit: contain; flex: none; }
/* 02/09/2026 (punto 2): la cabecera de TODAS las pantallas del cuidador
   (nunca aparece dentro de `.sencilla` — cuidado.js no importa `Cabecera`). */
.cab__titulo { font-size: .95rem; font-weight: 800; margin: 0; color: #fff; }
.cab__sub { font-size: .72rem; opacity: .85; display: block; font-weight: 500; }
.cab__hueco { flex: 1 1 auto; }
.cab__btn {
  min-height: 42px; min-width: 42px; padding: .35em .7em;
  background: rgba(255,255,255,.14); color: #fff; border: 0;
  border-radius: var(--r-sm); font: inherit; font-weight: 700; cursor: pointer;
}
.cab__btn:hover { background: rgba(255,255,255,.24); }

/* --- Contenedor ----------------------------------------------------------- */
.contenido {
  padding: 1rem .8rem calc(1.5rem + env(safe-area-inset-bottom));
  max-width: 46rem; margin: 0 auto;
}

/* --- Tarjetas ------------------------------------------------------------- */
.tarjeta {
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--r-lg); padding: 1rem;
  box-shadow: var(--sombra); margin: 0 0 .85rem;
}
.tarjeta--teal { border-left: 5px solid var(--teal); }
.tarjeta--navy { border-left: 5px solid var(--navy); }
.tarjeta--alerta { border-left: 5px solid var(--emergencia); background: #fff7f7; }
/* v36 (07/09/2026) — excepción de calendario ABIERTA ("🤒 Dylan en casa por
   enfermedad desde el 07/09, hasta que tú avises"). Se destaca porque está
   cambiando el comportamiento de los avisos y eso no puede quedar escondido,
   pero en TEAL y nunca en el rojo de `--alerta`: un niño enfermo en casa no es
   una emergencia, y pintarlo como tal enseñaría a ignorar el rojo de verdad. */
.tarjeta--cuidado { border-left: 5px solid var(--teal); background: var(--teal-100); }
.tarjeta__cab { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
/* 02/09/2026 (punto 2): título de cada tarjeta del cuidador — el texto más
   repetido de cada pantalla. Las 2 tarjetas que SÍ viven dentro de
   `.sencilla` (cuidado.js: "Te preguntan cómo estás" / "👍 Enviado") quedan
   protegidas explícitamente en ".sencilla .tarjeta__titulo" (más abajo). */
.tarjeta__titulo { margin: 0; font-size: .95rem; }
.tarjeta__hueco { flex: 1 1 auto; }

.avatar {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: var(--teal-100); color: var(--teal-700);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem; overflow: hidden;
}
.avatar--navy { background: var(--navy-100); color: var(--navy); }
/* 30/08/2026 — foto real de perfil (persona/usuario), llenando el círculo. */
.avatar__foto { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Input de archivo del selector de foto (fotos.js): oculto visualmente pero
   accesible (nunca display:none puro para que un lector de pantalla lo vea
   si hace foco por teclado) — el click real lo dispara el botón visible. */
.campo-archivo-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.etiqueta {
  display: inline-block; padding: .18em .6em; border-radius: 999px;
  font-size: .76rem; font-weight: 700; background: var(--navy-100); color: var(--navy);
}
.etiqueta--teal { background: var(--teal-100); color: var(--teal-700); }
.etiqueta--ok { background: #e3f5ea; color: var(--exito); }
.etiqueta--aviso { background: #fdf3e0; color: #96690f; }
/* 31/08/2026 (v18) — "no sé" ≠ "hay un problema": deliberadamente el mismo
   par navy/navy-100 que el resto de información neutra de la app (nunca el
   ámbar/rojo de aviso real), para que un dato rancio se lea como
   incertidumbre, no como alarma. */
.etiqueta--incierto { background: var(--navy-100); color: var(--navy); }

.lista-datos { margin: 0; padding: 0; list-style: none; }
.lista-datos li { padding: .5rem 0; border-bottom: 1px solid var(--borde); }
.lista-datos li:last-child { border-bottom: 0; }
.lista-datos .clave { display: block; font-size: .8rem; color: var(--tinta-suave); font-weight: 600; }

.acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }

/* 31/08/2026 — 🐛 bug real cazado en el rediseño de la pantalla principal:
   mapa.js pintaba `class="senal senal--ok/aviso/mal"` y `"punto punto--…"`
   desde el 27/08 (el semáforo de "¿sigue vivo el móvil?") pero NINGUNA de las
   dos clases tenía estilo — el punto de color nunca existió, solo texto plano
   sin matiz. Es justo la pieza que hace falta para "honestidad de un vistazo". */
.senal { display: flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 700; margin: .2rem 0; }
.senal--ok { color: var(--exito); }
.senal--aviso { color: #96690f; }
.senal--mal { color: var(--emergencia-700); }
.punto { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.punto--ok { background: var(--exito); }
.punto--aviso { background: var(--atencion); }
.punto--mal { background: var(--emergencia); }
.senal__bateria { font-weight: 600; color: var(--tinta-suave); margin-left: .3rem; }

/* Línea de ubicación honesta (31/08/2026) — dice DÓNDE (si cae dentro de una
   zona guardada) y HACE CUÁNTO, siempre las dos cosas juntas: un "En casa"
   sin la antigüedad al lado puede leerse como "ahí AHORA", que es justo lo
   que pasó la mañana del bus (última posición real, pero de hace 46 min). */
.estado-linea { margin: .3rem 0; font-size: .92rem; font-weight: 600; }
.estado-linea--ok { color: var(--tinta); }
.estado-linea--aviso { color: #96690f; }
.estado-linea--mal { color: var(--tinta); }
.estado-linea__aviso {
  margin: .3rem 0 0; padding: .55rem .7rem; font-size: .84rem; font-weight: 600;
  background: #fdf3e0; color: #7a5407; border-radius: var(--r-sm);
}

/* Interruptor grande (checkbox + texto) — "Compartir mi ubicación" (familia.js)
   y "mantener la pantalla encendida" (persona.js). Sin esta regla el checkbox
   nativo se veía a tamaño de sistema (~13px), fuera del --toque mínimo. */
.wake-toggle {
  display: flex; align-items: center; gap: .7rem; margin: .8rem 0 .2rem;
  font-weight: 700; color: var(--navy); cursor: pointer;
}
.wake-toggle input {
  width: 26px; height: 26px; flex: none; accent-color: var(--teal); cursor: pointer;
}

/* Tarjeta flotante y descartable (31/08/2026) — hoy solo la usa
   BannerInstalarApk (instalarApk.js), punto 4 del feedback de María: antes
   vivía metida en el flujo de `panel-inferior`, empujando hacia abajo la
   lista de personas. `position: fixed` la saca del scroll de ese panel (que
   solo recorta lo que está posicionado DENTRO de su propio containing block,
   nunca un `fixed`) y la deja siempre visible, con su propia cruz de cerrar
   además del botón "Ahora no" que ya tenía. z-index por encima de los
   controles de Leaflet (hasta 1000, ver comentario de .pwa-nueva) pero por
   debajo de los avisos a pantalla completa (.pwa-modal 1999, .pwa-nueva 2000). */
.tarjeta-flotante {
  position: fixed; z-index: 1100;
  top: calc(64px + env(safe-area-inset-top));
  left: .8rem; right: .8rem;
  max-width: 46rem; margin: 0 auto;
  box-shadow: var(--sombra-alta);
  padding-right: 2.6rem;   /* sitio para la cruz de cerrar */
}
.tarjeta-flotante__cerrar {
  position: absolute; top: .6rem; right: .6rem;
  min-width: 36px; min-height: 36px; border: 0; border-radius: var(--r-sm);
  background: var(--navy-100); color: var(--navy); font-size: 1rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.tarjeta-flotante__cerrar:hover { background: var(--teal-100); color: var(--teal-700); }

/* --- Alertas activas, arriba del todo (31/08/2026) ------------------------ */
/* Encargo de María: "lo más urgente debería verse nada más abrir la app".
   Vive por encima de la lista de personas, dentro del panel inferior. */
.alertas-top {
  border: 2px solid var(--emergencia); background: #fff2f2;
  border-radius: var(--r-lg); padding: .8rem .9rem; margin: 0 0 .85rem;
}
.alertas-top h2 { color: var(--emergencia-700); display: flex; align-items: center; gap: .4rem; }
.alertas-top__item {
  display: flex; align-items: center; gap: .6rem; padding: .5rem 0;
  border-top: 1px solid #f3c8c8;
}
.alertas-top__item:first-of-type { border-top: 0; }
.alertas-top__texto { flex: 1 1 auto; font-size: .92rem; }
.alertas-top__texto strong { display: block; color: var(--tinta); }
.alertas-top__texto span { color: var(--tinta-suave); font-size: .82rem; }

/* --- "¿Cómo estás?" en la misma vista, sin abrir-cerrar ficha (31/08/2026) - */
/* Patrón conversación: la pregunta y la respuesta se ven juntas, como un chat
   de 2 mensajes — encargo literal de María tras probar la app esta mañana. */
.conversacion { margin: .7rem 0; }
/* v31 — la burbuja ya no lleva tamaño propio: hereda el del panel del
   cuidador. Ese era el objetivo del encargo de María ("que el resto tenga el
   tamaño de este texto"): un solo tamaño para toda la pantalla, no dos. */
.conversacion__burbuja {
  display: inline-block; max-width: 100%; padding: .55rem .8rem;
  border-radius: var(--r-md); margin: 0 0 .4rem;
}
.conversacion__burbuja--pregunta { background: var(--navy-100); color: var(--navy); }
.conversacion__burbuja--respuesta { background: var(--teal-100); color: var(--teal-700); display: block; }
.conversacion__burbuja--ayuda { background: #fdecec; color: #8f2c2c; }   /* mismo par que .error-caja: contraste ya verificado */
.conversacion__cuando { display: block; font-size: .76rem; font-weight: 600; opacity: .75; margin-top: .15rem; }

/* --- Login ---------------------------------------------------------------- */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.login__caja {
  width: 100%; max-width: 25rem; background: var(--blanco);
  border-radius: var(--r-lg); padding: 1.6rem; box-shadow: var(--sombra-alta);
}
.login__logo { display: block; width: 76px; height: 76px; margin: 0 auto .8rem; object-fit: contain; }
.login__titulo { text-align: center; }
.login__lead { text-align: center; color: var(--tinta-suave); margin-bottom: 1.2rem; }

.campo { margin-bottom: .9rem; }
.campo label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .3rem; color: var(--navy); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: var(--toque); padding: .6em .8em;
  font: inherit; color: var(--tinta);
  /* 08/09/2026 — 16px CLAVADOS en todos los campos de texto de la app. La base
     es .95rem (≈15,2 px) y Safari/iOS hace zoom automático al enfocar
     cualquier campo por debajo de 16 px: la pantalla se descuadra y hay que
     volver a alejarla con dos dedos. Es la diferencia entre poder rellenar un
     formulario con una mano y no poder. Los 0,8 px de más son imperceptibles;
     el zoom, no. NO afecta a `.sencilla` (la pantalla de Dylan), que declara
     sus tamaños aparte. */
  font-size: 16px;
  border: 2px solid var(--borde); border-radius: var(--r-md);
  background: var(--blanco);
}
.campo input:focus { border-color: var(--teal); outline: none; }

/* Radio de una zona segura (v9): un slider, no una caja de texto — min-height
   igual que el resto de campos para no bajar del tamaño de toque mínimo. */
.campo input[type="range"] {
  min-height: var(--toque); padding: 0; border: 0; background: transparent; accent-color: var(--teal);
}

/* Campo de contraseña con "Mostrar/Ocultar" (26/08) — mismo patrón de texto que
   el APK (`lib/ui.tsx::PasswordField`), no un icono, para que sea reconocible. */
.campo-clave__fila { position: relative; }
.campo-clave__fila input { padding-right: 5.2rem; }
.campo-clave__ojo {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  min-height: 38px; padding: 0 .7rem;
  background: var(--navy-100); color: var(--navy); border: 0; border-radius: var(--r-sm);
  font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.campo-clave__ojo:hover { background: var(--teal-100); color: var(--teal-700); }

/* Enlace secundario bajo el formulario (crear cuenta, unirme a una familia...). */
.enlace-secundario {
  display: block; width: 100%; margin-top: .5rem; padding: .6em;
  background: none; border: 0; color: var(--tinta-suave);
  font: inherit; text-decoration: underline; cursor: pointer; text-align: center;
}

/* Pestañas simples (crear familia / unirme con código). */
.pestanas { display: flex; gap: .4rem; margin-bottom: 1rem; }
.pestanas button {
  flex: 1 1 0; min-height: var(--toque); border: 2px solid var(--borde); background: var(--blanco);
  border-radius: var(--r-md); font: inherit; font-weight: 700; color: var(--tinta-suave); cursor: pointer;
}
.pestanas button.activa { border-color: var(--navy); color: var(--navy); background: var(--navy-100); }

/* Zona de peligro (eliminar cuenta) — mismo espíritu que el APK (danger zone). */
.zona-peligro {
  border: 2px solid var(--emergencia); border-radius: var(--r-lg);
  padding: 1rem; margin-top: 1.4rem;
}
.zona-peligro h2 { color: var(--emergencia); }
.zona-peligro__check {
  display: flex; align-items: flex-start; gap: .6rem; margin: .8rem 0;
  cursor: pointer; font-size: .92rem;
}
.zona-peligro__check input { width: 22px; height: 22px; flex: none; margin-top: 2px; }

/* Código de invitación generado: grande, para leerlo o dictarlo. */
.codigo-generado {
  text-align: center; font-size: 1.7rem; font-weight: 800; letter-spacing: .12em;
  color: var(--navy); background: var(--navy-100); border-radius: var(--r-md);
  padding: .7rem; margin: .6rem 0;
}

/* --- Mapa (pantalla de inicio del cuidador) ------------------------------- */
/* El mapa SIEMPRE visible fue un requisito explícito de María (19/07): abrir la
   app y ver dónde está su gente, sin pasar por ninguna sub-pantalla. */
.pantalla-mapa { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.mapa {
  flex: 1 1 auto; min-height: 220px; width: 100%;
  background: var(--navy-100);
}
.mapa__aviso {
  padding: .7rem .9rem; background: #fdf3e0; color: #7a5407;
  font-size: .9rem; text-align: center;
}

/* --- "Dile a Guardio" fija bajo el mapa (16/09/2026, sesión 2 §5) ---------- */
/* `flex: 0 0 auto` en el mismo eje que `.mapa`/`.panel-inferior`: siempre a
   la vista entre los dos, nunca se desplaza con la lista de personas de
   abajo (que es la que hace scroll). Fondo navy para que destaque como la
   "voz" de la app, distinta de las tarjetas blancas de debajo. */
.barra-decir {
  flex: 0 0 auto; position: relative; z-index: 6;
  background: var(--navy); padding: .7rem .8rem;
}
.barra-decir__form { display: flex; gap: .5rem; align-items: center; }
.barra-decir__input {
  flex: 1 1 auto; min-height: var(--toque); padding: .6em .9em;
  font: inherit; font-size: 16px; color: var(--tinta);
  border: 2px solid transparent; border-radius: var(--r-md);
  background: var(--blanco);
}
.barra-decir__input:focus { border-color: var(--teal); outline: none; }
.barra-decir__input::placeholder { color: var(--tinta-suave); }
.barra-decir__enviar {
  flex: 0 0 auto; width: var(--toque); min-height: var(--toque);
  padding: 0; font-size: 1.2rem;
}
.barra-decir__atajos {
  display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .55rem;
}
.chip {
  min-height: 36px; padding: .4em 1em; font: inherit; font-size: .85rem;
  font-weight: 700; color: #fff; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3); border-radius: 999px; cursor: pointer;
}
.chip:active { background: rgba(255,255,255,.26); }
.barra-decir .respuesta-agente {
  margin: .55rem 0 0; padding: .55rem .7rem; border-radius: var(--r-sm);
  font-size: .88rem;
}

.panel-inferior {
  flex: 0 0 auto; max-height: 46vh; overflow-y: auto;
  background: var(--fondo); border-top: 1px solid var(--borde);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  margin-top: -18px; position: relative; z-index: 5;
  padding: .8rem .8rem calc(1rem + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 18px rgba(32,58,91,.10);
}
.panel-inferior__asa {
  width: 42px; height: 5px; border-radius: 999px; background: var(--borde);
  margin: 0 auto .7rem;
}

/* Marcador propio del mapa: no usamos el icono por defecto de Leaflet, así el
   mapa no depende de ninguna imagen externa y cada persona se distingue. */
.marcador {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  background: var(--teal); color: #10322f;
  border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35);
  font-weight: 800; font-size: .95rem;
}
.marcador span { transform: rotate(45deg); }
.marcador--alerta { background: var(--emergencia); color: #fff; }
/* Fase 1 multifamilia (31/08/2026) — un adulto compartiendo su ubicación
   usa el MISMO marcador que una persona cuidada (misma foto/inicial), con
   un borde propio para distinguirlo de un vistazo sin necesitar leer el
   popup. */
.marcador--adulto { border-color: var(--navy); }
/* 30/08/2026 — carita real (foto de perfil) en vez de la inicial. */
.marcador--foto { padding: 0; overflow: hidden; background: #fff; }
.marcador--foto img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50% 50% 50% 4px;
  transform: rotate(45deg) scale(1.25);
}

/* --- 05/09/2026 (v31) — la ANTIGÜEDAD del punto, visible sin tocar nada ----
   Hasta v30 el "hace X" solo existía DENTRO del popup: había que tocar el
   marcador para descubrir que el punto era de ayer. Caso real (05/09): María
   mirando el mapa desde el barco en Mettlach y viendo su propio punto de la
   tarde anterior, en casa, pintado igual que uno en vivo. Ahora un punto NO
   fresco lleva su edad escrita debajo, y el marcador ya iba atenuado
   (`.marcador--alerta`, de siempre). Un punto fresco no lleva nada: el
   silencio significa "esto es de ahora".
   El envoltorio no tiene tamaño propio (el icono de Leaflet sigue midiendo
   38x38 y anclando igual): la píldora se posiciona ABSOLUTA por debajo, así
   no desplaza ni el ancla ni el popup. */
.marcador-envoltorio { position: relative; width: 38px; height: 38px; }
.marcador__edad {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 2px; white-space: nowrap;
  background: var(--blanco); color: var(--tinta-suave);
  font-size: .68rem; font-weight: 700; line-height: 1.4;
  padding: 0 .35rem; border-radius: 999px; box-shadow: var(--sombra);
}

/* 30/08/2026 — emoji de la zona (🏠 casa, 🏫 colegio…) en su centro, encima
   del contorno de color que ya existía. `interactive:false` en Leaflet: el
   popup lo sigue dando el propio contorno, esto es solo el dibujo. */
.marcador-zona {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; font-size: 1.15rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}

/* --- 🚌 Bus escolar de juguete (v28, 03/09/2026) ---------------------------
   Feedback literal de María: "me gustaría ver moverse a Dylan en un bus
   escolar de juguete en el mapa". El marcador se transforma en bus SOLO en
   tránsito real (movimiento sostenido, fresco, fuera de toda zona guardada —
   ver enTransito() en mapa.js); quieto o en el cole vuelve su avatar.
   Capas de transform SEPARADAS para que no se pisen:
     · contenedor  → volteo este/oeste (según el rumbo) + entrada solo-opacity
     · svg         → "pop" de aparición y luego un balanceo sutil de viaje
   El prefers-reduced-motion global (final del fichero) ya frena ambas. */
.marcador-bus {
  display: flex; align-items: flex-end; justify-content: center;
  width: 52px; height: 40px;
  animation: bus-entra 200ms cubic-bezier(.23, 1, .32, 1) both;
}
.marcador-bus--oeste { transform: scaleX(-1); }
.marcador-bus__svg {
  filter: drop-shadow(0 2px 3px rgba(32, 58, 91, .35));
  animation:
    bus-pop 260ms cubic-bezier(.23, 1, .32, 1),
    bus-viaja 1.8s ease-in-out 260ms infinite;
}
.bus-cuerpo, .bus-morro { fill: var(--atencion); stroke: var(--navy); stroke-opacity: .3; stroke-width: 1; }
.bus-ventana, .bus-tapacubos { fill: var(--fondo); }
.bus-franja, .bus-faro { fill: var(--blanco); }
.bus-rueda { fill: var(--navy); }
@keyframes bus-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes bus-pop {
  from { transform: scale(.88) translateY(2px); }
  70%  { transform: scale(1.03); }
  to   { transform: scale(1); }
}
@keyframes bus-viaja {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}

/* --- Zonas seguras con horario (v9, 28/08/2026) --------------------------- */
/* Mini-mapa para elegir el centro de una zona (zonas.js::SelectorMapa) — vive
   DENTRO de un formulario, pero María lo encontró "tan pequeño" probándolo en
   vivo (320px, antes 220px) + botón "Ampliar mapa" (.mapa-zona--grande, v13.1)
   para cuando hace falta afinar el círculo con más detalle. */
.mapa-zona {
  height: 320px; width: 100%; border-radius: var(--r-md);
  background: var(--navy-100); margin-bottom: .6rem; border: 1px solid var(--borde);
  transition: height .25s ease;
}
.mapa-zona--grande { height: 60vh; }

/* Buscador de direcciones — v39 (08/09/2026).
   Encargo de María: "el mapa debería moverse automáticamente cuando uno pone
   la dirección". El buscador existía desde el 30/08 pero era un campo de texto
   más, perdido entre el nombre y la rejilla de tipos de zona, y sin una sola
   palabra en pantalla cuando algo fallaba. Ahora es lo primero del formulario
   y tiene peso visual propio: un campo ancho + un botón 🔍 de verdad (para
   quien no se fía de que buscar solo con teclear funcione) y un renglón de
   estado que SIEMPRE dice algo. Pensado para el pulgar y sin zoom. */
.buscador-zona {
  margin-bottom: .8rem;
  /* 🔴 La cabecera de la pantalla es `position: sticky; top: 0`. Sin este
     margen de scroll, el `scrollIntoView()` que sube el buscador al aparecer
     las sugerencias lo dejaba MEDIO TAPADO por la cabecera: María veía la
     lista pero no lo que acababa de escribir. Cazado mirando la captura real
     en móvil emulado, no leyendo el código. */
  scroll-margin-top: 8rem;
}
.buscador-zona__label {
  display: block; font-weight: 700; font-size: .9rem; margin-bottom: .3rem; color: var(--navy);
}
.buscador-zona__fila { display: flex; gap: .4rem; align-items: stretch; }
.buscador-zona__campo {
  flex: 1 1 auto; min-width: 0;
  min-height: var(--toque); padding: .6em .8em;
  font: inherit;
  /* 🔴 16px CLAVADOS, no `inherit`: por debajo de 16px, Safari/iOS hace zoom
     solo al enfocar un campo y deja la pantalla descuadrada. La app corre a
     .95rem, así que sin esto el buscador haría zoom en cuanto María lo tocara
     — justo lo contrario del encargo ("con el pulgar y sin zoom"). */
  font-size: 16px;
  color: var(--tinta);
  border: 2px solid var(--borde); border-radius: var(--r-md);
  background: var(--blanco);
}
.buscador-zona__campo:focus { border-color: var(--teal); outline: none; }
/* La "x" que Safari/Chrome ponen dentro de un input[type=search] se queda: es
   útil para vaciar el campo de un toque. Solo se le da sitio. */
.buscador-zona__campo::-webkit-search-cancel-button { margin-left: .3rem; }
.buscador-zona__boton { flex: 0 0 auto; padding: .7em .9em; }
/* En pantallas muy estrechas el botón se queda solo con la lupa: el campo de
   texto es lo que tiene que respirar. */
@media (max-width: 360px) {
  .buscador-zona__boton-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* El renglón que nunca se queda callado: buscando / hay resultados / no hay
   nada / sin conexión / el buscador no responde. Los tres últimos son los que
   antes no existían y dejaban la pantalla muda. */
.buscador-zona__estado {
  margin: .35rem 0 0; font-size: .88rem; color: var(--tinta-suave); min-height: 1.2em;
}
.buscador-zona__estado:empty { margin: 0; min-height: 0; }
.buscador-zona__estado[data-estado-busqueda="vacio"],
.buscador-zona__estado[data-estado-busqueda="sin_red"],
.buscador-zona__estado[data-estado-busqueda="error"] {
  color: var(--navy); background: var(--navy-100);
  padding: .5rem .7rem; border-radius: var(--r-sm);
}

/* Sugerencias: una por fila, altura de toque, con el detalle en segunda línea
   (código postal, ciudad y a cuántos km está — así se distingue de un vistazo
   el Trier de al lado de un Hamburgo lejano). */
.lista-sugerencias {
  list-style: none; margin: .4rem 0 0; padding: 0;
  border: 1px solid var(--borde); border-radius: var(--r-md); overflow: hidden;
  background: var(--blanco);
}
.lista-sugerencias li + li { border-top: 1px solid var(--borde); }
.sugerencia-direccion {
  display: flex; flex-direction: column; gap: .1rem;
  width: 100%; text-align: left; min-height: var(--toque);
  padding: .6rem .8rem; background: var(--blanco); border: 0; font: inherit;
  color: var(--tinta); cursor: pointer;
  transition: background-color .15s ease;
}
.sugerencia-direccion__titulo { font-weight: 700; color: var(--navy); }
.sugerencia-direccion__detalle { font-size: .84rem; color: var(--tinta-suave); }
.sugerencia-direccion:focus-visible { background: var(--navy-100); outline: 2px solid var(--teal); outline-offset: -2px; }
.sugerencia-direccion:active { background: var(--teal-100); }
@media (hover: hover) and (pointer: fine) {
  .sugerencia-direccion:hover { background: var(--navy-100); }
}

/* Confirmación de que el mapa YA se movió: sin esto, la única señal de que la
   búsqueda funcionó es el propio mapa, y en un móvil el mapa puede quedar
   fuera de la pantalla mientras el teclado está abierto. */
.sitio-elegido {
  display: block; margin: .5rem 0 .6rem; padding: .55rem .7rem;
  background: var(--teal-100); color: #10322f;
  border-radius: var(--r-sm); font-weight: 700; font-size: .9rem;
}
.sitio-elegido--movido { background: var(--navy-100); color: var(--navy); }
.sitio-elegido__nota { display: block; font-weight: 400; font-size: .84rem; color: var(--tinta-suave); }

/* Agrupación del formulario de zona en dos preguntas ("¿Dónde está?" /
   "¿Cómo se llama?"): un <fieldset> de verdad, no un <div> con un título. */
.grupo-campos {
  margin: 0 0 1rem; padding: .9rem .8rem .3rem;
  border: 1px solid var(--borde); border-radius: var(--r-md);
  background: var(--blanco);
}
.grupo-campos__titulo {
  padding: 0 .4rem; margin-left: -.2rem;
  font-weight: 800; font-size: 1rem; color: var(--navy);
}

/* Selector de días de la semana de un horario: chips grandes, tocables con
   una mano (mismo criterio de --toque que el resto de la app). */
.dias-semana { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 .9rem; }
.dia-chip {
  min-width: 44px; min-height: var(--toque); padding: 0 .6rem;
  border: 2px solid var(--borde); border-radius: var(--r-md);
  background: var(--blanco); color: var(--tinta-suave); font: inherit; font-weight: 700; cursor: pointer;
}
.dia-chip.activo { border-color: var(--navy); background: var(--navy-100); color: var(--navy); }

/* Selector del tipo de zona (icono/emoji) — mismo criterio de tamaño táctil
   que dia-chip, con el emoji grande para que se distinga de un vistazo. */
.iconos-zona { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 .9rem; }
.icono-chip {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  min-width: 64px; min-height: var(--toque); padding: .3rem .5rem;
  border: 2px solid var(--borde); border-radius: var(--r-md);
  background: var(--blanco); color: var(--tinta-suave); font: inherit; font-weight: 700; cursor: pointer;
}
.icono-chip__emoji { font-size: 1.3rem; }
.icono-chip.activo { border-color: var(--navy); background: var(--navy-100); color: var(--navy); }

/* Adultos autorizados (30/08/2026) — sección con peso visual propio en la
   ficha de la persona cuidada: para verificar de un vistazo quién SÍ puede
   recoger a quien se cuida. */
.adultos-autorizados {
  display: flex; flex-wrap: wrap; gap: .8rem; margin: .6rem 0;
}
.adulto-autorizado {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  width: 84px; text-align: center;
}
.adulto-autorizado .avatar { width: 64px; height: 64px; font-size: 1.4rem; }
.adulto-autorizado__nombre { font-size: .82rem; font-weight: 700; color: var(--navy); }
.adulto-autorizado__rol { font-size: .74rem; color: var(--tinta-suave); }

/* --- Pantalla sencilla (persona cuidada) ---------------------------------- */
/* Botones enormes a propósito: los usa un niño o una persona mayor, muchas
   veces con prisa o nerviosa. Aquí el tamaño ES la función.

   31/08/2026 (feedback María, punto 7 — "en mi parte las letras son muy
   grandes, pero yo soy el adulto; en la de Dylan son más pequeñas, tendría
   que ser al revés"): la causa real no era `.sencilla__nombre` ni los botones
   gigantes (ya eran los tamaños más grandes de toda la hoja) — era que varios
   textos INFORMATIVOS de esta pantalla (estado de ubicación, avisos, pie,
   ficha de emergencia, PIN) usaban `.muted` y tamaños compartidos con el
   resto de la app (~.88-.92rem ≈ 14-15px), MÁS PEQUEÑOS que un párrafo normal
   del panel del cuidador (body: 17px). Aquí se sube el suelo de TODO lo que
   se lee en esta pantalla — el panel del cuidador (mapa/menú/ficha) se deja
   tal cual, esa es la densidad "normal" que pide el punto 7. */
.sencilla { font-size: 1.08rem; }
.sencilla .muted { font-size: 1rem; }
/* 02/09/2026 (punto 2): al bajar `h2`/`.tarjeta__titulo` para el panel del
   cuidador (ver sus reglas más arriba), estas 2 son las únicas piezas de
   `.sencilla` que dependían del valor COMPARTIDO de esos selectores sin tener
   ya su propia regla más específica — se fijan al valor que tenían el 01/09
   para que la pantalla de Dylan no encoja ni un pelo:
     · .sencilla .tarjeta__titulo → "Te preguntan cómo estás" / "👍 Enviado"
     · .pin-modal h2              → "PIN para salir" (SalidaPin)
   (La confirmación de AYUDA y la Ficha de Emergencia YA tenían su propia
   regla de siempre —`.pantalla-roja h2` y `.ficha-sos__cab h2`, más abajo—
   así que este cambio no las toca ni falta compensarlas aquí.) */
.sencilla .tarjeta__titulo,
.pin-modal h2 { font-size: 1.2rem; }
.sencilla {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  padding: 1rem .9rem calc(1.2rem + env(safe-area-inset-bottom));
  gap: .9rem; background: var(--fondo);
}
.sencilla__saludo { text-align: center; margin: .4rem 0 .2rem; }
.sencilla__nombre { font-size: 1.9rem; font-weight: 800; color: var(--navy); }
.sencilla__ubicacion {
  text-align: center; font-size: 1rem; font-weight: 700; color: var(--exito); margin: 0;
}
.sencilla__ubicacion--off { color: #96690f; }
.boton-gigante {
  width: 100%; min-height: 118px; border: 0; border-radius: var(--r-lg);
  font: inherit; font-size: 1.4rem; font-weight: 800; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; box-shadow: var(--sombra); color: #fff;
}
.boton-gigante .emoji { font-size: 2.4rem; line-height: 1; }
.boton-gigante--bien { background: var(--exito); }
.boton-gigante--ayuda { background: var(--emergencia); min-height: 150px; }
.boton-gigante:active { transform: scale(.98); }
.sencilla__pie { margin-top: auto; text-align: center; }
.sencilla__pie p { font-size: 1rem; }

/* --- 🃏 LAS TARJETAS (15/09/2026, sesión 1 de la reestructuración) ----------
   Sustituyen a los 2 botones gigantes ("Estoy bien" / "AYUDA") como forma de
   DECIR algo. Encargo de María tras observar a su hijo: "no le da la gana de
   hablar por teléfono, pero las tarjetas sí las marca bien".

   Decisiones de esta rejilla, todas por la persona que la usa:
     · DOS COLUMNAS FIJAS, nunca `auto-fit`: la posición de cada tarjeta no
       puede moverse entre una pantalla y otra — se memorizan por sitio, no
       por lectura. Un tablero que se recoloca solo es un tablero nuevo cada
       vez.
     · Cuadradas (`aspect-ratio: 1`) y con el dibujo ocupando más de la mitad:
       el dibujo es lo que se reconoce; la palabra la lee el adulto que mire
       por encima.
     · Blancas sobre el fondo gris de siempre, con el navy de la marca para
       trazo y texto. Sin color por tarjeta a propósito: el color en Guardio
       significa estado (verde/ámbar/rojo) y "tengo hambre" no es un estado.
       El único color fuerte de la pantalla sigue siendo el rojo de AYUDA.  */
.tarjetas-cuidado {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: .7rem;
}
.tarjeta-cuidado {
  position: relative;
  width: 100%; aspect-ratio: 1 / 1; min-height: 132px;
  border: 0; border-radius: var(--r-lg); cursor: pointer;
  font: inherit; font-weight: 800; font-size: 1.12rem; line-height: 1.2;
  color: var(--navy); background: var(--blanco); box-shadow: var(--sombra);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .45rem; padding: .7rem .5rem; text-align: center;
}
.tarjeta-cuidado:active { transform: scale(.97); }
.tarjeta-cuidado[disabled] { opacity: .7; cursor: default; }
.tarjeta-cuidado__dibujo { width: 54%; max-width: 88px; height: auto; color: var(--teal-700); }
.tarjeta-cuidado__texto { display: block; }
/* Confirmación DENTRO de la propia tarjeta: quien la tocó no debería tener que
   buscar en otra parte de la pantalla si su mensaje salió. */
.tarjeta-cuidado--enviada { background: var(--teal-100); box-shadow: var(--sombra-alta); }
.tarjeta-cuidado__enviado {
  display: block; font-size: .85rem; font-weight: 700; color: var(--teal-700);
}
/* El pie: el "Salir del modo sencillo" ya no se ve (§4.2 — "es un botón que él
   no entiende y que no debería ni ver"). Queda esta franja, que se mantiene
   pulsada 3 segundos para pedir el PIN de siempre. */
.sencilla__salida-oculta {
  width: 100%; min-height: 28px; border: 0; background: transparent;
  font: inherit; font-size: .85rem; color: var(--tinta-suave); opacity: .55;
  cursor: default; padding: .4rem;
}

/* --- Editor de tarjetas (lado del CUIDADOR, dentro de la ficha) ------------ */
.editor-tarjetas { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.editor-tarjetas__fila {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .7rem; border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--blanco);
}
.editor-tarjetas__dibujo { flex: none; width: 46px; color: var(--teal-700); display: block; }
.editor-tarjetas__dibujo svg { width: 46px; height: 46px; }
.editor-tarjetas__campos { flex: 1 1 auto; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.editor-tarjetas__etiqueta { font-size: .8rem; font-weight: 700; color: var(--tinta-suave); }
.editor-tarjetas__campos input[type="text"],
.editor-tarjetas__campos select {
  width: 100%; min-height: var(--toque); padding: .5em .7em;
  font: inherit; border: 1px solid var(--borde); border-radius: var(--r-sm); background: var(--blanco);
}
.editor-tarjetas__check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; }

/* Botón "Mi información" (31/08/2026, punto 6 — "si no bajas la pantalla no
   ves la información"): antes era un <button> SIN NINGÚN estilo propio —
   heredaba la letra diminuta que Chrome pone por defecto a los botones, de
   ahí la tira delgada. Ahora es una tarjeta tocable de verdad, proporcional
   como el resto de la pantalla, con la misma jerarquía título/subtítulo. */
.boton-info {
  width: 100%; min-height: 84px; border: 0; border-radius: var(--r-lg);
  font: inherit; cursor: pointer; text-align: left; color: var(--navy);
  display: flex; align-items: center; gap: .9rem;
  padding: .9rem 1.1rem; background: var(--blanco); box-shadow: var(--sombra);
}
.boton-info:active { transform: scale(.98); }
.boton-info .emoji { font-size: 2.1rem; line-height: 1; flex: none; }
.boton-info__texto { display: flex; flex-direction: column; font-weight: 800; font-size: 1.15rem; }
.boton-info__sub { font-weight: 600; font-size: .92rem; color: var(--tinta-suave); }

/* --- 🇩🇪🇪🇸 Pares bilingües de EMERGENCIA (05/09/2026, v30-pwa) ---------------
   Encargo literal de María: "imaginate que le pase algo a dylan si lo
   encuentra algun aleman no va a entender nada". El ALEMÁN arriba y grande
   (es el idioma del desconocido que puede ayudar aquí en Alemania), el
   español debajo, siempre legible (es el idioma de Dylan). Tamaños en `em`
   a propósito: el mismo par funciona dentro del botón gigante (1.4rem), del
   h2 de la pantalla roja (1.8rem) o de una tarjeta (1.15rem) sin reglas
   nuevas por contexto. Los textos viven como pares {de, es} en cuidado.js
   (EMER) — con `families.language` (otra sesión) se elegirá qué mitad
   se pinta, sin tocar estas reglas. */
.bi { display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.bi--izq { align-items: flex-start; }
.bi__es { font-size: .8em; font-weight: 700; opacity: .92; }
/* Párrafos de la pantalla roja de confirmación: alemán primero a tamaño
   normal, español debajo un punto menor — misma jerarquía que .bi. */
.pantalla-roja__texto { margin: 0 0 .5em; }
.pantalla-roja__texto--es { font-size: .92em; opacity: .94; }

/* --- 📞 Llamar a Mamá/Papá (04/09/2026, v29): emergencia al alcance de la
   persona cuidada, sin salir del modo sencillo. Mismo lenguaje visual que
   .boton-info (tarjeta tocable grande), en teal de acción: llamar es un acto,
   no una lectura. La palabra grande es para el niño; el número pequeño
   debajo, para el adulto que mire por encima. */
.llamar { display: flex; flex-direction: column; gap: .8rem; }
.boton-llamar {
  width: 100%; min-height: 84px; border-radius: var(--r-lg);
  display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem;
  background: var(--teal); color: #fff; text-decoration: none;
  box-shadow: var(--sombra); font-weight: 800; font-size: 1.25rem;
}
.boton-llamar:active { transform: scale(.98); background: var(--teal-700); }
.boton-llamar .emoji { font-size: 2.1rem; line-height: 1; flex: none; }
.boton-llamar__texto { display: flex; flex-direction: column; }
.boton-llamar__num { font-weight: 600; font-size: .95rem; opacity: .92; }

/* --- Reciprocidad: quién está cerca (31/08/2026, punto 5) ------------------ */
/* Encargo literal de María: "¿de qué sirve compartir mi ubicación con Dylan
   si él no me puede ver?". Tarjeta grande y sin mapa — mismo listón que el
   resto de esta pantalla: un adulto mayor que no ve bien tiene que
   entenderla de un vistazo. Solo aparece si hay al menos un adulto con el
   opt-in activo (lo filtra el propio backend, families.js:16). */
.cerca {
  background: var(--teal-100); border-radius: var(--r-lg);
  padding: 1rem 1.1rem; box-shadow: var(--sombra);
}
.cerca__titulo { color: var(--teal-700); font-size: 1.2rem; margin-bottom: .5rem; }
.cerca__persona {
  display: flex; align-items: center; gap: .8rem; padding: .5rem 0;
}
.cerca__persona + .cerca__persona { border-top: 1px solid rgba(61,147,141,.25); }
.cerca__persona .avatar { width: 58px; height: 58px; font-size: 1.35rem; flex: none; }
.cerca__persona p { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--navy); }
.cerca__texto { min-width: 0; }

/* 05/09/2026 (v31, honestidad de ubicación) — cuando el último punto de un
   adulto NO es fresco, se dice con todas las letras y se ve ATENUADO. Hasta
   v30 la frase era honesta pero la tarjeta parecía igual de "en vivo" que
   una fresca: María leyó "muy cerca de ti" estando a 14 km, en Mettlach. */
.cerca__persona--rancia .avatar { opacity: .55; filter: grayscale(.6); }
.cerca__persona--rancia p { color: var(--tinta-suave); }
.cerca__antiguedad {
  display: inline-block; margin-top: .15rem;
  background: var(--blanco); color: var(--tinta-suave);
  font-size: .9rem; font-weight: 700; line-height: 1.35;
  padding: .1rem .55rem; border-radius: 999px;
}
/* Nadie compartiendo: el mapa de lugares sigue ahí y hay que explicarlo. */
.cerca__nadie { margin: .2rem 0 0; font-size: 1.05rem; font-weight: 600; color: var(--navy); }

/* Mini-mapa del "Quién está cerca" (01/09/2026, v25 — punto 3 del feedback):
   el dibujo que responde "¿dónde está?" debajo de las frases. Sin controles
   de zoom ni popups — no es un mapa para explorar.
   05/09/2026 (v31): ya NO se esconde nunca. Encargo literal de María — los
   lugares seguros (casa, colegio…) tienen que verse SIEMPRE, aunque ningún
   adulto comparta ubicación, para que Dylan pueda guiarse solo. Por eso
   desaparece también la regla `[hidden]` que lo ocultaba. */
.cerca__mapa {
  height: 200px; width: 100%; border-radius: var(--r-md);
  background: var(--navy-100); border: 1px solid var(--borde);
  margin-top: .6rem;
}

/* Lugar seguro dibujado en el mini-mapa de Dylan (v31): el mismo emoji que
   usa el mapa del cuidador (🏠/🏫/…) + el nombre en una píldora legible. */
.mini-zona {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  pointer-events: none;
}
.mini-zona__emoji { font-size: 1.35rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.mini-zona__nombre {
  background: var(--teal-100); color: var(--teal-700);
  font-weight: 800; font-size: .85rem; line-height: 1.3;
  padding: .05rem .45rem; border-radius: 999px; box-shadow: var(--sombra);
  white-space: nowrap; max-width: 96px; overflow: hidden; text-overflow: ellipsis;
}

/* Marcador del mini-mapa: carita (o inicial) + el NOMBRE debajo en una
   píldora — el listón de esta pantalla: legible para un niño o un adulto
   mayor sin tocar nada. El propio niño sale como "Tú" en teal. */
.mini-marcador {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
}
.mini-marcador__punto {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  background: var(--navy); color: #fff; font-weight: 800; font-size: .95rem;
  border: 3px solid var(--blanco); box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.mini-marcador__punto img { width: 100%; height: 100%; object-fit: cover; }
.mini-marcador--yo .mini-marcador__punto { background: var(--teal); color: var(--navy-900); }
.mini-marcador__nombre {
  background: var(--blanco); color: var(--navy);
  font-weight: 800; font-size: .95rem; line-height: 1.3;
  padding: .05rem .5rem; border-radius: 999px; box-shadow: var(--sombra);
  white-space: nowrap;
}

/* --- Ficha de emergencia a pantalla completa (v6, 27/08/2026) --------------
   Faltaba por completo esta regla (🐛 real, cazado el 31/08 al auditar el
   feedback de María): sin `position: fixed`, el `role="dialog"` de
   FichaEmergencia (cuidado.js) se pintaba EN EL FLUJO normal de `.sencilla`,
   no como un modal — cualquier cosa detrás seguía siendo tocable. */
.ficha-sos {
  position: fixed; inset: 0; z-index: 1600; background: var(--fondo);
  display: flex; flex-direction: column; overflow-y: auto;
}
.ficha-sos__cab {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .9rem 1rem; padding-top: calc(.9rem + env(safe-area-inset-top));
  background: var(--navy); box-shadow: var(--sombra);
}
.ficha-sos__cab h2 { color: #fff; margin: 0; font-size: 1.3rem; }
.ficha-sos__cerrar {
  min-width: 44px; min-height: 44px; border: 0; border-radius: var(--r-sm);
  background: rgba(255,255,255,.16); color: #fff; font-size: 1.15rem; cursor: pointer;
}
.ficha-sos__cuerpo { padding: 1rem 1.1rem; flex: 1 1 auto; }
.ficha-sos__bloque {
  background: var(--blanco); border-radius: var(--r-lg);
  padding: 1rem 1.1rem; margin-bottom: .9rem; box-shadow: var(--sombra);
}
.ficha-sos__bloque--alerta { border-left: 5px solid var(--emergencia); }
.ficha-sos__condicion { font-size: 1.2rem; font-weight: 800; color: var(--navy); margin: 0 0 .3rem; }
.ficha-sos__dato { margin: .3rem 0; font-size: 1.08rem; }
.ficha-sos__vacio { color: var(--tinta-suave); margin: 0; }
.ficha-sos__tel {
  display: flex; justify-content: space-between; align-items: center;
  min-height: var(--toque); padding: .7rem .1rem; border-bottom: 1px solid var(--borde);
  text-decoration: none; color: var(--tinta); font-size: 1.08rem;
}
.ficha-sos__tel:last-child { border-bottom: 0; }
.ficha-sos__tel-quien { font-weight: 700; }
.ficha-sos__tel-num { color: var(--teal-700); font-weight: 800; }
.ficha-sos__meds { margin: 0; padding-left: 1.2rem; }
.ficha-sos__meds li { margin-bottom: .5rem; font-size: 1.05rem; }
.ficha-sos__cuando { display: block; font-size: .88rem; color: var(--tinta-suave); }
.ficha-sos__pie { color: var(--tinta-suave); font-size: .88rem; text-align: center; }
.ficha-sos__volver { margin: 0 1.1rem 1.1rem; width: calc(100% - 2.2rem); }

/* --- PIN de salida a pantalla completa (30/08/2026) ------------------------
   Mismo 🐛 que .ficha-sos: sin esta regla, el modal del PIN (SalidaPin en
   cuidado.js) también se pintaba en el flujo normal en vez de superpuesto. */
.pin-modal {
  position: fixed; inset: 0; z-index: 1998; background: rgba(22,40,63,.92);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
}
.pin-modal__caja {
  width: 100%; max-width: 22rem; background: var(--blanco);
  border-radius: var(--r-lg); padding: 1.6rem; text-align: center;
}
.pin-modal__input { text-align: center; font-size: 1.5rem; letter-spacing: .3em; }

/* Confirmación a pantalla completa tras pedir ayuda (patrón del APK, 19/07). */
.pantalla-roja {
  position: fixed; inset: 0; z-index: 1500; background: var(--emergencia);
  color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 2rem;
}
.pantalla-roja h2 { color: #fff; font-size: 1.8rem; }
.pantalla-roja .emoji { font-size: 4.4rem; }

/* --- Aviso de versión nueva: pantalla completa, un botón ------------------ */
/* Ver pwa.js. Un aviso que se puede ignorar, se ignora — por eso tapa todo. */
.pwa-nueva {
  /* z-index por encima de Leaflet: sus controles de zoom y la atribución usan
     hasta 1000, y con 999 se dibujaban ENCIMA del aviso (visto en la captura de
     la QA del 11/08). Un aviso que dice "tapo la pantalla" no puede tener los
     botones del mapa flotando por delante. */
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(22, 40, 63, .96);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
}
.pwa-nueva__caja {
  width: 100%; max-width: 24rem; background: var(--blanco);
  border-radius: var(--r-lg); padding: 1.8rem 1.4rem; text-align: center;
  box-shadow: var(--sombra-alta);
}
.pwa-nueva__icono { font-size: 2.6rem; line-height: 1; margin-bottom: .3rem; }
.pwa-nueva__titulo { font-size: 1.25rem; }
.pwa-nueva__texto { color: var(--tinta-suave); }
.pwa-nueva__btn {
  width: 100%; min-height: 58px; margin-top: .6rem;
  background: var(--teal); color: #10322f; border: 0; border-radius: var(--r-md);
  font: inherit; font-size: 1.12rem; font-weight: 800; cursor: pointer;
}
.pwa-nueva__btn[disabled] { opacity: .6; }
.pwa-nueva__ayuda {
  margin-top: .9rem; font-size: .88rem; color: #8f2c2c;
  background: #fdecec; border-radius: var(--r-sm); padding: .6rem .7rem;
}
.pwa-nueva__luego {
  display: block; width: 100%; margin-top: .8rem; padding: .6em;
  background: none; border: 0; color: var(--tinta-suave);
  font: inherit; text-decoration: underline; cursor: pointer;
}

/* Botón "Instalar la app" + su ayuda por plataforma. */
.pwa-install { margin: .6rem 0; }
.pwa-modal {
  position: fixed; inset: 0; z-index: 1999;   /* idem: por encima de Leaflet */ background: rgba(22,40,63,.9);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
}
.pwa-modal__box {
  width: 100%; max-width: 24rem; background: var(--blanco);
  border-radius: var(--r-lg); padding: 1.4rem;
}
.pwa-steps { padding-left: 1.2rem; margin: 0 0 1rem; }
.pwa-steps li { margin-bottom: .5rem; }
.pwa-buscar { margin-top: .5rem; }
.pwa-buscar__version { margin-top: .5rem; font-size: .85rem; }

/* --- Accesibilidad: quien pide menos movimiento, menos movimiento --------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .btn:active, .boton-gigante:active, .boton-llamar:active { transform: none; }
}

/* --- Pantallas grandes ---------------------------------------------------- */
@media (min-width: 48rem) {
  body { font-size: 18px; }
  .pantalla-mapa { flex-direction: row; }
  .mapa { flex: 1 1 60%; }
  .panel-inferior {
    flex: 0 0 24rem; max-height: none; margin-top: 0;
    border-radius: 0; border-top: 0; border-left: 1px solid var(--borde);
    box-shadow: none; overflow-y: auto;
  }
  .panel-inferior__asa { display: none; }
}

/* ---------------------------------------------------------------------------
   "Revisar mi ubicación" (v40, 08/09/2026) — revisarUbicacion.js
   El interruptor de "Compartir mi ubicación" solo dice que se dio el
   consentimiento. El 08/09 María lo tenía en verde y llevaba día y medio sin
   compartir nada: 20 posiciones en todo el día, todas el mismo punto de su
   casa con 100 m de margen, mientras estaba en el médico a 30 km. Este bloque
   es donde la app lo cuenta y dice qué tocar.
   Se apoya en las variables del sistema (nunca hex sueltos) y en el mismo
   amarillo de aviso que ya usa `.estado-linea__aviso`.
--------------------------------------------------------------------------- */
.revisar { margin: .6rem 0 .2rem; }
.revisar__abrir { width: 100%; }
.revisar__cuerpo { display: flex; flex-direction: column; gap: .55rem; margin-top: .5rem; }
.revisar__resumen {
  margin: 0; font-size: .88rem; font-weight: 600; color: var(--navy);
  background: var(--navy-100); padding: .55rem .7rem; border-radius: var(--r-sm);
}
.revisar__veredicto {
  margin: 0; padding: .55rem .7rem; font-size: .88rem; font-weight: 700;
  border-radius: var(--r-sm);
}
.revisar__veredicto--bien { background: var(--teal-100); color: var(--teal-700); }
.revisar__veredicto--regular { background: #fdf3e0; color: #7a5407; }
.revisar__veredicto--mal { background: #fbe6e6; color: var(--emergencia-700); }
.revisar__pasos {
  border: 1px solid var(--borde); border-radius: var(--r-sm);
  padding: .7rem .8rem; background: var(--blanco);
}
.revisar__pasos-titulo {
  margin: 0 0 .45rem; font-size: .92rem; color: var(--navy);
}
.revisar__lista { margin: 0 0 .5rem; padding-left: 1.1rem; }
.revisar__lista li { margin-bottom: .5rem; font-size: .88rem; line-height: 1.45; color: var(--tinta); }
.revisar__lista li:last-child { margin-bottom: 0; }

/* ==========================================================================
   v52 (16/09/2026) — PERFILES DE PERSONA CUIDADA (sesión 5, pieza 1)
   ==========================================================================
   María, 22:15: "Una persona adulta y una adolescente no pueden tener la misma
   pantalla que un niño con necesidades especiales." Hasta hoy la tenían: el
   mismo `.sencilla` para los tres. Aquí viven las diferencias, como
   MODIFICADORES de esa misma pantalla y no como hojas aparte — un arreglo en
   `.sencilla` sigue llegándoles a los cuatro perfiles a la vez.

   Regla que gobierna todo este bloque: lo que cambia es el TAMAÑO, el
   CONTRASTE y qué se enseña. Nunca la paleta (navy + teal sigue siendo Guardio
   para todo el mundo) ni la posición de las cosas: quien ya sabe dónde está el
   botón rojo lo sigue encontrando en el mismo sitio en cualquier perfil. */

/* --- La pregunta del alta ("¿Cómo se maneja mejor con el móvil?") ---------- */
/* Tres opciones grandes y tocables, no un desplegable: se leen las tres a la
   vez, que es lo que permite compararlas. `fieldset` de verdad (con `legend`)
   porque son un grupo de radios y eso es lo que un lector de pantalla necesita
   oír antes de las opciones. */
.pregunta-movil { border: 0; margin: 0 0 .9rem; padding: 0; }
.pregunta-movil__titulo {
  padding: 0; margin-bottom: .45rem;
  font-weight: 700; font-size: .9rem; color: var(--navy);
}
.pregunta-movil__opciones { display: flex; flex-direction: column; gap: .45rem; }
.pregunta-movil__opcion {
  display: flex; align-items: center; gap: .6rem;
  min-height: var(--toque); padding: .6rem .8rem;
  border: 1px solid var(--borde); border-radius: var(--r-sm);
  background: var(--blanco); cursor: pointer; line-height: 1.35;
}
.pregunta-movil__opcion--elegida { border-color: var(--teal); background: var(--teal-100); font-weight: 700; }
.pregunta-movil__opcion input { width: 20px; height: 20px; flex: none; accent-color: var(--teal-700); }

/* --- "Así se ve su pantalla: … [Cambiar]" (una línea, nunca un menú) ------- */
.linea-pantalla { margin: .3rem 0 0; font-size: .9rem; line-height: 1.45; }
.linea-pantalla--editando { margin-top: .6rem; }
/* Un botón que se lee como un enlace: es una acción secundaria dentro de una
   frase, y un botón de verdad ahí rompería la línea. Mantiene los 44px de
   objetivo táctil por el padding vertical del propio texto de la frase. */
.enlace-sobrio {
  border: 0; background: none; padding: 0; font: inherit;
  color: var(--teal-700); font-weight: 700; text-decoration: underline;
  cursor: pointer;
}
.acciones--columna { flex-direction: column; align-items: stretch; }

/* --- 🧓 PERFIL ADULTO MAYOR ------------------------------------------------
   §4.3: "Letra 18-22 px, alto contraste, sin mapa." La base de `.sencilla` es
   1.08rem (≈17px); aquí se sube a 1.25rem (20px) y las tarjetas a 1.35rem
   (≈21.6px), que es el techo que pedía el documento. El contraste sube
   cambiando el texto de las tarjetas de navy medio a navy-900 y engordando el
   borde: no es decoración, es lo que separa "lo veo" de "no lo veo" a los 76
   años y con el móvil al sol. */
.sencilla--mayor { font-size: 1.25rem; }
.sencilla--mayor .muted { font-size: 1.1rem; color: var(--tinta); }
.sencilla--mayor .sencilla__nombre { font-size: 2.1rem; }
.sencilla--mayor .sencilla__ubicacion { font-size: 1.15rem; }
.sencilla--mayor .tarjeta-cuidado {
  font-size: 1.35rem; color: var(--navy-900);
  border: 2px solid var(--navy-100); min-height: 148px;
}
.sencilla--mayor .tarjeta-cuidado__dibujo { color: var(--navy); width: 48%; }
.sencilla--mayor .boton-info__texto { font-size: 1.3rem; }
.sencilla--mayor .boton-info__sub { font-size: 1.05rem; }
.sencilla--mayor .boton-gigante { font-size: 1.6rem; }
.sencilla--mayor .sencilla__pie .btn { font-size: 1.05rem; min-height: 52px; }

/* El botón de llamada de este perfil: una sola llamada, con la cara de quien
   contesta. Más alto que el resto (96px) porque es lo que va a buscar con
   prisa quien no se encuentra bien. */
.boton-llamar--mayor { min-height: 96px; font-size: 1.35rem; }
.boton-llamar--mayor .avatar { flex: none; }
.boton-llamar--mayor .boton-llamar__num { font-size: 1.05rem; }

/* --- 🧑 PERFIL ADOLESCENTE -------------------------------------------------
   Discreta, no infantil y no "de vigilado": es la misma app, en su tamaño
   normal. Las tarjetas bajan a la altura de un botón cualquiera (nada de
   cuadrados gigantes de 148px, que en el móvil de una chica de 16 años en
   clase serían una vergüenza) y el nombre deja de ser un titular. */
.sencilla--adolescente { font-size: 1rem; }
.sencilla--adolescente .sencilla__nombre { font-size: 1.35rem; }
.sencilla--adolescente .tarjetas-cuidado { grid-template-columns: 1fr 1fr; gap: .6rem; }
.sencilla--adolescente .tarjeta-cuidado {
  aspect-ratio: auto; min-height: 84px; font-size: 1rem; padding: .7rem .6rem;
}
.sencilla--adolescente .tarjeta-cuidado__dibujo { width: 30px; max-width: 30px; }
.sencilla--adolescente .boton-gigante--ayuda { min-height: 110px; font-size: 1.2rem; }
.sencilla--adolescente .boton-info { min-height: 68px; }
.sencilla--adolescente .boton-info__texto { font-size: 1rem; }

/* --- 🧑 PERFIL AUTÓNOMO ---------------------------------------------------- */
.sencilla--autonomo { font-size: 1rem; }
.sencilla--autonomo .sencilla__nombre { font-size: 1.35rem; }

/* --- 🫱 La pantalla de transparencia / consentimiento ----------------------
   La primera vez que alguien abre SU pantalla. Sobria, sin emojis y sin
   dibujos: lo que dice es serio y se lee, no se decora. Un solo botón para el
   adolescente (no puede rechazar: lo deciden sus padres) y dos para el adulto
   autónomo, con "Sí" primero porque es lo que la mayoría querrá — pero el "No"
   con el mismo tamaño y sin esconderlo, que es lo que separa una elección real
   de un trámite. */
.transparencia {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center; gap: .9rem;
  padding: 1.6rem 1.1rem calc(1.6rem + env(safe-area-inset-bottom));
  background: var(--blanco);
}
.transparencia__titulo { font-size: 1.5rem; margin-bottom: .3rem; }
.transparencia__lista { margin: 0; padding-left: 1.2rem; font-size: 1.1rem; line-height: 1.6; }
.transparencia__lista li { margin-bottom: .45rem; }
.transparencia__texto { font-size: 1rem; line-height: 1.55; color: var(--tinta); }
.transparencia__texto--suave { color: var(--tinta-suave); font-size: .95rem; }
.transparencia .btn { min-height: 56px; font-size: 1.1rem; }