/* ATERRIZA EU — R2: el armazón de la app «Hola, María».
 *
 * Carga DESPUÉS de tokens.css + aterriza.css + componentes.css (R1) y no
 * redefine ni un color ni un tamaño: todo sale de las variables de R1. Aquí
 * solo vive lo que es propio de la app y no del sistema de diseño — el marco
 * con barra inferior en móvil y lateral en escritorio, y las cinco o seis
 * piezas que solo existen dentro de `/mi/`.
 *
 * NO sustituye a `/css/mi.css` (S2–S7): ese fichero se queda servido para los
 * navegadores que todavía tengan la app vieja en caché, y esta hoja no lo
 * carga ni lo necesita.
 */

/* =========================================================================
   🐛 EL BUG QUE CAZÓ LA PRIMERA CAPTURA DE PLAYWRIGHT
   =========================================================================
   `hidden` es un atributo que el navegador implementa con `display: none` en
   su hoja por defecto — y CUALQUIER `display` propio lo pisa. Como aquí casi
   todo lo que se esconde tiene su propio `display` (`.pantalla` es flex,
   `.nav-lateral` es flex en escritorio, `.franja-version` es flex siempre),
   la primera versión de esta hoja enseñaba LAS ONCE PANTALLAS A LA VEZ, una
   debajo de otra, más la franja de "hay una versión nueva" permanente.
   Las pruebas no lo vieron porque miraban el atributo (`:not([hidden])`), que
   estaba perfectamente puesto: lo que fallaba era el CSS. Se vio en la
   captura, y desde entonces la prueba comprueba VISIBILIDAD de verdad.
   Va arriba del todo y con `!important` a propósito: es una corrección de la
   hoja del navegador, no un estilo de la app. */
[hidden] { display: none !important; }

/* Dentro de la app, una tarjeta entera que es un enlace NO se subraya: el
   subrayado es para el texto que se lee, no para una caja que se toca. Los
   enlaces de texto de verdad (fuentes, «ver todo», las legales) lo conservan. */
.resumen-personal__item,
.tarjeta-area,
.tarjeta-accion,
.evento,
.lista-mas a,
.entrada-agente,
.app-cabecera__marca,
.nav-lateral__marca { text-decoration: none; }

/* =========================================================================
   MARCO
   ========================================================================= */
.app-cuerpo {
  min-height: 100dvh;
  /* Hueco para la barra inferior: sin esto, lo último de cada pantalla queda
     debajo de la barra y no se puede tocar. */
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
}
@media (min-width: 960px) {
  .app-cuerpo { padding-bottom: 0; }
}

.app-marco {
  display: flex;
  gap: var(--espacio-5);
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  padding-inline: var(--gutter);
  align-items: flex-start;
}
@media (min-width: 960px) {
  .app-marco { padding-block: var(--espacio-5); }
}

.app-columna {
  flex: 1 1 auto;
  min-width: 0;   /* sin esto, una tabla o una URL larga desborda la columna */
}

/* Navegación lateral pegajosa en escritorio (componentes.css la oculta en
   móvil y le da el fondo carbón). */
@media (min-width: 960px) {
  .nav-lateral {
    position: sticky;
    top: var(--espacio-5);
    max-height: calc(100dvh - var(--espacio-10));
  }
}
.nav-lateral__marca { padding: var(--espacio-2) var(--espacio-3) var(--espacio-5); }
.nav-lateral__marca img { width: 100%; height: auto; }
.nav-lateral__enlaces { display: flex; flex-direction: column; gap: var(--espacio-1); }
.nav-lateral__pie {
  margin-top: auto;
  padding: var(--espacio-5) var(--espacio-3) var(--espacio-2);
  font-size: var(--texto-sm);
  color: var(--color-crema);
  opacity: 0.6;
}

/* =========================================================================
   CABECERA (móvil)
   ========================================================================= */
.app-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding-block: var(--espacio-4) var(--espacio-2);
}
@media (min-width: 960px) { .app-cabecera { display: none; } }
.app-cabecera__marca img { width: 160px; height: auto; }
.app-cabecera__ajustes {
  display: inline-flex;
  padding: var(--espacio-2);
  border-radius: var(--radio-completo);
  color: var(--color-carbon-70);
}

/* =========================================================================
   PANTALLAS
   ========================================================================= */
.app-principal { padding-bottom: var(--espacio-8); }
.app-cargando { padding-block: var(--espacio-8); color: var(--color-carbon-50); }

.pantalla-titulo { font-size: var(--texto-xl); margin-block: var(--espacio-3) var(--espacio-1); }
@media (min-width: 960px) { .pantalla-titulo { font-size: var(--texto-2xl); } }
.pantalla-entradilla { color: var(--color-carbon-70); margin-bottom: var(--espacio-5); }
.pantalla { display: flex; flex-direction: column; gap: var(--espacio-6); }
.pantalla-volver { font-size: var(--texto-sm); }
.pantalla-pie { font-size: var(--texto-sm); color: var(--color-carbon-50); }

.bloque { display: flex; flex-direction: column; gap: var(--espacio-4); }
.bloque__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espacio-3); }
.bloque__cabecera h2 { font-size: var(--texto-lg); }
.bloque h2 { font-size: var(--texto-lg); }
.bloque__mas { font-size: var(--texto-sm); font-weight: var(--peso-semibold); color: var(--color-carbon-70); white-space: nowrap; }
.bloque--peligro { border-top: 1px solid var(--color-borde); padding-top: var(--espacio-5); }

.ayuda { font-size: var(--texto-sm); color: var(--color-carbon-50); }
.vacio {
  padding: var(--espacio-5);
  border: 1px dashed var(--color-borde);
  border-radius: var(--radio-md);
  color: var(--color-carbon-50);
  font-size: var(--texto-sm);
  text-align: center;
}

/* =========================================================================
   MAPA DE VIDA
   ========================================================================= */
.rejilla-areas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espacio-3);
}
@media (min-width: 720px)  { .rejilla-areas { grid-template-columns: repeat(4, 1fr); } }
.tarjeta-area { text-decoration: none; }
.tarjeta-area__icono svg { width: 22px; height: 22px; }
.tarjeta-area[data-estado="requiere_atencion"] .tarjeta-area__estado { color: var(--color-alerta-fg); font-weight: var(--peso-bold); }
.tarjeta-area[data-estado="proximo"] .tarjeta-area__estado { color: var(--color-info-fg); font-weight: var(--peso-semibold); }
.tarjeta-area[data-estado="en_curso"] .tarjeta-area__estado { color: var(--color-progreso-fg); font-weight: var(--peso-semibold); }
.tarjeta-area[data-estado="sin_pendientes"] .tarjeta-area__estado { color: var(--color-carbon-50); }

/* =========================================================================
   PIEZAS (una fila dentro de un área)
   ========================================================================= */
.lista-piezas { display: flex; flex-direction: column; gap: var(--espacio-3); }
.pieza {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  padding: var(--espacio-4);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
.pieza__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--espacio-3); }
.pieza__titulo { font-weight: var(--peso-bold); font-size: var(--texto-md); }
.pieza__titulo a { text-decoration: none; }
.pieza__titulo a:hover { text-decoration: underline; }
.pieza__resumen { font-size: var(--texto-sm); color: var(--color-carbon-70); }
.pieza__porque { font-size: var(--texto-sm); color: var(--color-carbon-50); font-style: italic; }
.pieza__acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-2); }
.pieza[data-estado="requiere_atencion"] { border-left: 4px solid var(--color-alerta-fg); }
.pieza[data-estado="proximo"] { border-left: 4px solid var(--color-amarillo); }
.pieza[data-estado="completado"] { opacity: 0.75; }
.pieza[data-estado="no_aplica"] { opacity: 0.6; }

/* =========================================================================
   CALENDARIO
   ========================================================================= */
.mes { display: flex; flex-direction: column; gap: var(--espacio-2); margin-bottom: var(--espacio-5); }
.mes__titulo {
  font-size: var(--texto-sm);
  font-weight: var(--peso-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-carbon-50);
  position: sticky;
  top: 0;
  background: var(--color-crema);
  padding-block: var(--espacio-2);
  z-index: 1;
}
.evento { align-items: flex-start; }
.evento__cuerpo { display: flex; flex-direction: column; gap: var(--espacio-1); flex: 1 1 auto; min-width: 0; }
.evento__titulo { display: block; }
.evento__acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-2); margin-top: var(--espacio-1); }
.evento[data-origen="propio"] .evento__fecha { background: var(--color-info-bg); color: var(--color-info-fg); }
.evento[data-estado="cumplido"] { opacity: 0.6; }

/* =========================================================================
   ALERTAS
   ========================================================================= */
.tarjeta-alerta { position: relative; }
.tarjeta-alerta[data-leida="1"] { opacity: 0.8; }
.tarjeta-alerta__acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-2); margin-top: var(--espacio-2); }
.tarjeta-alerta__fuente { font-size: var(--texto-xs); color: var(--color-carbon-50); }
.tarjeta-alerta__revisar { font-size: var(--texto-sm); color: var(--color-carbon-70); }
.lista-alertas { display: flex; flex-direction: column; gap: var(--espacio-3); }

/* =========================================================================
   SITUACIÓN Y AGENTE QUE PREGUNTA
   ========================================================================= */
.rejilla-puertas { display: grid; gap: var(--espacio-3); grid-template-columns: 1fr; }
@media (min-width: 600px) { .rejilla-puertas { grid-template-columns: repeat(2, 1fr); } }
.puerta {
  text-align: left;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  padding: var(--espacio-4);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}
.puerta:hover { border-color: var(--color-salvia); }
.puerta[aria-pressed="true"] { border-color: var(--color-carbon); box-shadow: inset 0 0 0 1px var(--color-carbon); }
.puerta__titulo { font-weight: var(--peso-bold); }
.puerta__detalle { font-size: var(--texto-sm); color: var(--color-carbon-50); }

.etiqueta-contador { font-size: var(--texto-xs); font-weight: var(--peso-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-carbon-50); }
.confirmacion {
  background: var(--color-progreso-bg);
  border: 1px solid var(--color-progreso-borde);
  color: var(--color-progreso-fg);
  border-radius: var(--radio-sm);
  padding: var(--espacio-3);
  font-size: var(--texto-sm);
}
.opciones { display: flex; flex-direction: column; gap: var(--espacio-2); }
.opcion {
  display: flex; align-items: center; gap: var(--espacio-3);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  padding: var(--espacio-3);
  cursor: pointer;
}
.opcion--elegida { border-color: var(--color-carbon); background: var(--color-crema); }
.acciones-paso { display: flex; flex-wrap: wrap; gap: var(--espacio-3); align-items: center; }
.ficha-completa { margin-top: var(--espacio-4); }
.ficha-completa > summary { cursor: pointer; font-weight: var(--peso-semibold); padding: var(--espacio-3) 0; }
.ficha-completa[open] > summary { margin-bottom: var(--espacio-4); }
.grupo-fechas { border: 1px solid var(--color-borde); border-radius: var(--radio-md); padding: var(--espacio-4); margin-bottom: var(--espacio-4); }
.grupo-fechas legend { font-weight: var(--peso-bold); padding-inline: var(--espacio-2); }
.enciende { font-size: var(--texto-xs); color: var(--color-carbon-50); }
.lista-filas { display: flex; flex-direction: column; gap: var(--espacio-2); margin-bottom: var(--espacio-3); }
.lista-filas li {
  display: flex; align-items: center; gap: var(--espacio-3);
  font-size: var(--texto-sm);
  flex-wrap: wrap;                 /* en móvil el botón baja, no se aplasta */
  justify-content: space-between;
}
/* El botón de la derecha nunca se encoge: en «Nos falta un dato» las preguntas
   son largas y la primera versión dejaba los «Contestar» aplastados contra el
   borde, medio cortados. El texto se queda con lo que sobra. */
.lista-filas li > .boton { flex-shrink: 0; margin-left: auto; }
.lista-filas li > span:first-child { flex: 1 1 14rem; min-width: 0; }
.lista-filas li small { display: block; color: var(--color-carbon-50); }
.lista-filas--vacia { color: var(--color-carbon-50); }
.fila-etiqueta { color: var(--color-carbon-50); }

/* =========================================================================
   FORMULARIOS Y AVISOS
   ========================================================================= */
.formulario { display: flex; flex-direction: column; gap: var(--espacio-4); }
.formulario-en-linea { display: flex; flex-direction: column; gap: var(--espacio-3); }
.campo--casilla { flex-direction: row; align-items: center; gap: var(--espacio-3); }
.campo--casilla input { width: auto; }
/* 🐛 Desborde horizontal de 91px en movil, cazado por la suite de la S6 al
   correrla contra la app nueva. Dos causas juntas: un <fieldset> tiene
   min-width: min-content por defecto y NO encoge (es una regla vieja del
   navegador, no del CSS de nadie), y un input date/time trae un ancho
   intrinseco mayor que la columna en 390px. Una pagina que se mueve de lado
   en el movil es de las cosas que mas cansan de usar. */
fieldset { min-width: 0; }
.campo input, .campo select, .campo textarea { width: 100%; max-width: 100%; min-width: 0; }
.campo--casilla input { width: auto; max-width: none; }
.aviso-formulario:empty { display: none; }
.aviso-formulario { font-size: var(--texto-sm); }
.es-ok { color: var(--color-progreso-fg); }
.es-error { color: var(--color-alerta-fg); }
.consentimiento { border: 1px solid var(--color-borde); border-radius: var(--radio-md); padding: var(--espacio-4); }
.texto-legal { font-size: var(--texto-sm); color: var(--color-carbon-70); }
.texto-legal ul { list-style: disc; padding-left: 1.2em; margin-block: var(--espacio-2); }
.boton--pequeno { padding: var(--espacio-2) var(--espacio-3); font-size: var(--texto-sm); }
.boton--peligro { background: var(--color-alerta-fg); color: var(--color-crema); }
.enlace-boton { color: var(--color-carbon-70); text-decoration: underline; font-size: var(--texto-sm); }

/* =========================================================================
   GUÍA DENTRO DE LA APP
   ========================================================================= */
.guia-articulo { display: flex; flex-direction: column; gap: var(--espacio-4); }
.articulo-leible { display: flex; flex-direction: column; gap: var(--espacio-4); }
.articulo-leible h2 { font-size: var(--texto-lg); margin-top: var(--espacio-4); }
.articulo-leible h3 { font-size: var(--texto-md); }
.articulo-leible ul, .articulo-leible ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--espacio-2); }
.articulo-leible ul { list-style: disc; }
.articulo-leible ol { list-style: decimal; }
.articulo-leible table { width: 100%; border-collapse: collapse; font-size: var(--texto-sm); }
.articulo-leible th, .articulo-leible td { border: 1px solid var(--color-borde); padding: var(--espacio-2) var(--espacio-3); text-align: left; }
.articulo-leible blockquote {
  border-left: 3px solid var(--color-amarillo);
  padding-left: var(--espacio-4);
  color: var(--color-carbon-70);
}
.guia-etiquetas { display: flex; flex-wrap: wrap; gap: var(--espacio-2); }
.compartir-envoltura { margin-top: var(--espacio-3); }

/* =========================================================================
   ENTRADAS AL AGENTE Y A LA COMUNIDAD
   ========================================================================= */
.entradas-pie { display: grid; gap: var(--espacio-3); grid-template-columns: 1fr; }
@media (min-width: 600px) { .entradas-pie { grid-template-columns: repeat(2, 1fr); } }
/* El icono va sobre fondo carbón: en crema no se vería. */
.entrada-agente__marca { color: var(--color-amarillo); }
.entrada-agente__marca svg { width: 20px; height: 20px; }
/* Sin esto, «Comunidad» y su explicación salían pegadas en la misma línea
   («ComunidadLo que han contado…»): son dos <span> en línea dentro del enlace. */
.entrada-agente > span:last-child { display: flex; flex-direction: column; gap: 2px; }

/* =========================================================================
   «MÁS» (solo móvil)
   ========================================================================= */
.lista-mas { display: flex; flex-direction: column; gap: var(--espacio-2); }
.lista-mas a {
  display: flex; align-items: center; gap: var(--espacio-4);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  padding: var(--espacio-4);
  text-decoration: none;
}
.lista-mas a > span:last-child { display: flex; flex-direction: column; }
.lista-mas small { color: var(--color-carbon-50); font-size: var(--texto-sm); }

/* =========================================================================
   ICONOS Y CONTADORES DE LA NAVEGACIÓN
   ========================================================================= */
.nav-icono { display: inline-flex; flex-shrink: 0; }
.nav-icono svg { width: 22px; height: 22px; }
.nav-contador {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding-inline: 5px;
  margin-left: auto;
  background: var(--color-amarillo); color: var(--color-carbon);
  border-radius: var(--radio-completo);
  font-size: var(--texto-xs); font-weight: var(--peso-bold);
}
.nav-movil { z-index: var(--z-nav-movil); }
@media (min-width: 960px) { .nav-movil { display: none; } }

/* =========================================================================
   ENLACE FIJO A LA GUÍA PÚBLICA (directiva de María, S10)
   ========================================================================= */
.enlace-guia {
  margin-top: var(--espacio-8);
  padding-top: var(--espacio-5);
  border-top: 1px solid var(--color-borde);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
}

/* =========================================================================
   FRANJA DE VERSIÓN NUEVA (S10)
   ========================================================================= */
.franja-version {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-franja-aviso);
  display: flex; align-items: center; justify-content: center;
  gap: var(--espacio-4);
  background: var(--color-amarillo);
  color: var(--color-carbon);
  padding: var(--espacio-2) var(--espacio-4);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
}