/* Encuestas PRODE. Objetivo: dedos, no ratón. Nada mide menos de 48 px de alto. */

/* Identidad de Fundación PRODE: azul marino como color de interfaz, amarillo SOLO como
   acento puntual (nunca como texto sobre blanco, nunca como color de estado). Los hex son
   de prode.es a ojo; si existe manual de marca, se sustituyen aquí y el cambio llega a
   toda la app porque nada se escribe a mano dentro de los componentes. */
:root {
  --azul-900: #0a3549; /* cabeceras oscuras, texto sobre amarillo */
  --azul-800: #0e4a66; /* azul principal: cabecera de la app */
  --azul-700: #12597a; /* botones primarios, iconos, avatares */
  --azul-600: #1a6e93; /* hover, anillo de foco */
  --azul-100: #e3eef4; /* fondo de iconos, filas seleccionadas */
  --azul-50: #f2f7fa; /* hover suave de tarjetas */

  --amarillo: #ffc629; /* acento de marca: nunca como texto sobre blanco */
  --amarillo-700: #e0a800; /* borde/hover del amarillo */
  --ambar: #ee9b24; /* detalle puntual del logotipo, no un color de estado */

  --texto-1: #1b2b33;
  --texto-2: #5a6b74;
  --texto-3: #8a99a1;
  --fondo: #f5f7f9;
  --superficie: #ffffff;
  --borde: #dfe6ea;

  --error: #b3261e;
  --exito: #1e7a52;
  --aviso: #8a5a00;

  /* Solo para la insignia de "pendientes" de encuestas (usuarios del centro), que no forma
     parte de este rediseño: se mantienen para no romperla, no se usan en nada nuevo. */
  --ambar-texto: #8a4f08;
  --ambar-superficie: #fbe9d3;

  --radio: 12px;
  --radio-chico: 8px;
  --sombra: 0 1px 2px rgba(10, 53, 73, 0.06);
  --sombra-hover: 0 4px 12px rgba(10, 53, 73, 0.12);
  --cabecera-texto-apoyo: rgba(255, 255, 255, 0.82);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* El azul de marca se mantiene igual en los dos temas (es fondo sólido con texto
       blanco encima, no depende del fondo de la página); solo cambian los neutros y los
       tintes claros que, en oscuro, tienen que ser tintes oscuros. */
    --azul-100: #163040;
    --azul-50: #11262f;

    --texto-1: #eef2f4;
    --texto-2: #a9b7bd;
    --texto-3: #77878e;
    --fondo: #10171b;
    --superficie: #1a2226;
    --borde: #2c383e;

    --ambar-texto: #e0993f;
    --ambar-superficie: #3a2712;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.35);
    --sombra-hover: 0 4px 16px rgba(0, 0, 0, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

* {
  box-sizing: border-box;
}

/* Necesario: las reglas de .pantalla y .aviso fijan display y, sin esto, ganarían al
   [hidden] de la hoja del navegador y se maquetarían todas las pantallas a la vez. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.45;
  color: var(--texto-1);
  background: var(--fondo);
  -webkit-text-size-adjust: 100%;
}

.pantalla {
  min-height: 100vh;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pantalla:has(> .tarjeta--estrecha) {
  justify-content: center;
  align-items: center;
}

h1 {
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}

.apoyo {
  margin: 0;
  color: var(--texto-2);
  font-size: 0.9rem;
}

/* Foco de teclado visible en cualquier control interactivo. Dentro de la cabecera (fondo
   verde) se sobrescribe a blanco: el verde-claro sobre verde no se distinguiría. */
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--azul-600);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ marca */

.marca {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--azul-800);
  box-shadow: var(--sombra);
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  flex: 0 0 auto;
}

.marca svg {
  width: 30px;
  height: 30px;
}

.marca-texto {
  color: var(--azul-700);
}

/* ------------------------------------------------------------------ tarjetas */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.tarjeta--estrecha {
  max-width: 420px;
}

/* ------------------------------------------------------------------ formularios */

label {
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 6px;
}

input,
select,
textarea {
  width: 100%;
  font: inherit;
  min-height: 52px;
  padding: 0 14px;
  color: var(--texto-1);
  background: var(--superficie);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
}

textarea {
  padding: 12px 14px;
  resize: vertical;
}

input[type='checkbox'] {
  width: 28px;
  height: 28px;
  min-height: 28px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--azul-600);
  outline-offset: 1px;
  border-color: var(--azul-600);
}

/* ------------------------------------------------------------------ botones */

.boton {
  font: inherit;
  min-height: 52px;
  padding: 0 20px;
  border: 2px solid transparent;
  border-radius: var(--radio);
  background: none;
  color: var(--texto-1);
  cursor: pointer;
  transition: transform 0.1s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.boton:active {
  transform: scale(0.97);
}

.boton--principal {
  margin-top: 14px;
  background: var(--azul-700);
  border-color: var(--azul-700);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--sombra);
}

.boton--principal:hover {
  background: var(--azul-600);
  border-color: var(--azul-600);
}

.boton--secundario {
  background: var(--superficie);
  border-color: var(--azul-700);
  color: var(--azul-700);
  font-weight: 600;
}

.boton--secundario:hover {
  background: var(--azul-50);
}

/* Sobre fondo oscuro (dentro de .cabecera): borde blanco tenue, no azul sobre azul. */
.cabecera .boton--secundario {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.cabecera .boton--secundario:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Deshabilitado = gris neutro, no verde apagado: que "no se puede pulsar todavía" se
   distinga a simple vista de "listo para pulsar", sin depender solo del cursor. */
.boton--principal:disabled {
  background: var(--borde);
  border-color: var(--borde);
  color: var(--texto-2);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.boton--enlace {
  min-height: 44px;
  padding: 0 8px;
  color: var(--azul-700);
  text-decoration: underline;
}

/* ------------------------------------------------------------------ menú */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: -16px -16px 16px;
  padding: 16px 16px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  background: var(--azul-800);
  color: #fff;
  box-shadow: var(--sombra);
}

/* Detalle de marca: el guiño a la identidad de PRODE sin invadir la interfaz. */
.cabecera::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--amarillo);
}

.cabecera strong {
  display: block;
  color: #fff;
}

.cabecera .apoyo {
  color: var(--cabecera-texto-apoyo);
}

.cabecera .boton--enlace {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

.cabecera button:focus-visible,
.cabecera a:focus-visible {
  outline-color: #fff;
}

.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* Cabecera de los 4 formularios de alta: icono de inicio, título de la categoría, y a la
   derecha ficha + foto de la persona (y listado, solo en Reg. Contacto). */
.cabecera--formulario strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icono-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
}

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

.icono-boton:hover {
  background: rgba(255, 255, 255, 0.25);
}

.icono-boton:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.cabecera__foto {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

/* Dos desplegables (horas y minutos) en vez de un <input type="time">: se comporta de forma
   irregular entre tablets (ver selectorHora() en app.js). Estrechos a propósito: con
   flex:1 cada uno llegaba a ocupar media pantalla en un formulario ancho. */
.selector-hora {
  display: flex;
  align-items: center;
  gap: 6px;
}

.selector-hora select {
  flex: 0 0 auto;
  width: 90px;
}

/* Componente de firma manuscrita (Intervención CAIT): ver crearLienzoFirma() en app.js. La
   firma nunca se manda a /api/incidencias, solo la lee quien la incluye en el informe. */
.bloque-firma {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
}

.bloque-firma__etiqueta {
  font-weight: 600;
  margin: 0 0 8px;
}

.lienzo-firma {
  display: block;
  width: 100%;
  height: 180px;
  /* Sin esto, el navegador interpreta los gestos de dibujo como scroll/zoom de la página en
     táctil, y el trazo se pierde a mitad de camino. */
  touch-action: none;
  border: 2px dashed var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}

.lienzo-firma__controles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.lienzo-firma__controles .boton {
  min-height: 44px;
  padding: 0 16px;
}

.bloque-firma__aviso {
  font-size: 0.85rem;
  color: var(--texto-2);
  margin: 10px 0 0;
}

.bloque-firma__no-recogida {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.bloque-firma__no-recogida label {
  margin: 0;
}

.rejilla {
  display: grid;
  gap: 16px;
  /* min(260px, 100%): sin el min(), con auto-fit el suelo de 260px puede sumar más que
     el ancho disponible en un móvil y la rejilla desborda a lo ancho. */
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.rejilla > * {
  min-width: 0;
}

/* Título + rejilla se mueven como un solo bloque centrado verticalmente en el hueco que deja
   la cabecera (antes cada uno centraba lo suyo por separado y quedaban descolgados uno del
   otro). Ver pantalla-categorias-incidencia en index.html. */
.bloque-categorias {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 24px;
}

/* Menú de categorías de incidencias: icono arriba y etiqueta debajo, centrado, en vez del
   icono+título en fila que usan las demás tarjeta-accion (inicio/menú). auto-fill (no
   auto-fit) para que las tarjetas no se estiren a ocupar el ancho libre de la última fila:
   se quiere una rejilla de iconos compacta, no tarjetas anchas. justify-content: center
   reparte ese hueco a los dos lados en vez de dejarlo todo en las columnas sobrantes de un
   extremo (por eso se veía la rejilla pegada a un borde). */
.rejilla--categorias {
  justify-content: center;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.rejilla--categorias .tarjeta-accion {
  min-height: 132px;
  align-items: center;
  text-align: center;
}

.rejilla--categorias .tarjeta-accion__cabecera {
  flex-direction: column;
  gap: 10px;
}

.rejilla--categorias .tarjeta-accion__icono {
  width: 44px;
  height: 44px;
}

.rejilla--categorias .tarjeta-accion__icono svg {
  width: 22px;
  height: 22px;
}

.rejilla--categorias .tarjeta-accion__titulo {
  font-size: 0.95rem;
  /* Reserva sitio para dos líneas aunque el texto ocupe solo una: así "Sueño" y
     "Reg. Contacto" acaban con la misma altura de tarjeta (problema nº 3 del encargo). */
  min-height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seccion-titulo {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--texto-1);
}

.seccion-titulo + .apoyo {
  margin-top: -8px;
}

.tarjeta-accion {
  font: inherit;
  text-align: left;
  min-height: 132px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  color: var(--texto-1);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 4px solid transparent;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Franja de aviso: mientras queden pendientes, la tarjeta se distingue a simple vista de
   la que ya está al día (borde neutro). No implica urgencia, solo "aquí hay trabajo". Es
   un estado real de "queda algo por hacer" (preguntas sin responder) — distinto de
   ".tarjeta-accion--proximamente", que es "esto todavía no existe".*/
.tarjeta-accion--pendiente {
  border-left-color: var(--ambar);
}

.tarjeta-accion:hover,
.tarjeta-accion:focus-visible {
  box-shadow: var(--sombra-hover);
  border-color: var(--azul-600);
  background: var(--azul-50);
  transform: translateY(-2px);
}

.tarjeta-accion:focus-visible {
  outline: 2px solid var(--azul-600);
  outline-offset: 2px;
}

.tarjeta-accion:active {
  transform: translateY(0);
  box-shadow: var(--sombra);
}

/* "Próximamente" (Pautas, Pertenencias, Perfil Personal): la función no existe todavía,
   no es un aviso — por eso NO lleva el borde ámbar de ".tarjeta-accion--pendiente" ni
   ninguna de las señales de "tarjeta activa" (sombra, hover, cursor). */
.tarjeta-accion--proximamente {
  background: var(--fondo);
  border-left-color: transparent;
  box-shadow: none;
  color: var(--texto-3);
  cursor: not-allowed;
}

.tarjeta-accion--proximamente:hover,
.tarjeta-accion--proximamente:focus-visible {
  transform: none;
  box-shadow: none;
  background: var(--fondo);
  border-color: var(--borde);
}

.tarjeta-accion--proximamente .tarjeta-accion__icono {
  background: var(--fondo);
  color: var(--texto-3);
}

.tarjeta-accion--proximamente .tarjeta-accion__titulo {
  color: var(--texto-3);
}

.tarjeta-accion__pildora {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--borde);
  color: var(--texto-2);
  font-size: 0.75rem;
  font-weight: 600;
}

.tarjeta-accion__cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tarjeta-accion__icono {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--radio-chico);
  background: var(--azul-100);
  color: var(--azul-700);
  display: grid;
  place-items: center;
}

.tarjeta-accion__icono svg {
  width: 19px;
  height: 19px;
}

.tarjeta-accion__titulo {
  font-size: 1.1rem;
  font-weight: 600;
}

.tarjeta-accion__dato {
  color: var(--texto-2);
  font-size: 0.92rem;
  line-height: 1.35;
}

/* Rellenados por JS con innerHTML (valores numéricos/vocabulario fijo, sin datos de
   usuario): el número es lo primero que hay que ver, el resto es apoyo. */
.dato-numero {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--texto-1);
  line-height: 1.2;
}

/* --ambar-texto y no --ambar: el ámbar del logotipo, como texto sobre blanco, se queda en
   torno a 2,2:1 de contraste y no se lee bien. El borde sí sigue en --ambar. */
.tarjeta-accion--pendiente .dato-numero {
  color: var(--ambar-texto);
}

.dato-etiqueta {
  color: var(--texto-2);
}

/* ------------------------------------------------------------------ opciones */

.lista-opciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.lista-opciones button {
  font: inherit;
  text-align: left;
  min-height: 60px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--texto-1);
  background: var(--superficie);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.lista-opciones button:hover:not(:disabled),
.lista-opciones button:focus-visible {
  border-color: var(--azul-600);
  background: var(--azul-50);
}

.lista-opciones button:active {
  transform: scale(0.99);
}

.lista-opciones button:disabled {
  opacity: 0.55;
  cursor: default;
}

.lista-opciones .dato {
  color: var(--texto-2);
  font-size: 0.9rem;
  white-space: nowrap;
}

.lista-opciones button[aria-pressed='true'] {
  border-color: var(--azul-700);
  box-shadow: inset 0 0 0 1px var(--azul-700);
}

/* Fila de usuario con avatar (§ usuarios del centro). El texto/dato ya definidos arriba
   se reutilizan; esto añade la franja izquierda con las iniciales. */
.fila-usuario {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
}

.fila-usuario__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fila-usuario__nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--azul-700);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 700;
}

/* Si la foto carga, tapa las iniciales; si falla, se retira sola (ver app.js) y quedan
   las iniciales que ya estaban debajo. */
.avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lista-opciones button:disabled .avatar {
  background: var(--texto-2);
}

/* Insignia de pendientes: ámbar cuando hay trabajo, neutra cuando no. Mismo lenguaje de
   color que las tarjetas del menú (§ .tarjeta-accion--pendiente). */
.insignia {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.insignia--pendiente {
  background: var(--ambar-superficie);
  color: var(--ambar-texto);
}

.insignia--ok {
  background: var(--azul-100);
  color: var(--texto-2);
}

/* ------------------------------------------------------------------ cuestionario */

.lista-preguntas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Hueco para que la barra de guardar no tape la última pregunta */
  padding-bottom: 88px;
}

.pregunta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.15s ease;
}

.pregunta--respondida {
  border-color: var(--azul-700);
}

.pregunta--error {
  border-color: var(--error);
}

.pregunta__texto {
  font-size: 1.05rem;
  font-weight: 600;
}

.pregunta__aviso {
  color: var(--error);
  font-size: 0.9rem;
}

.escala {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
}

.escala button {
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 68px;
  padding: 6px 4px;
  color: var(--texto-1);
  background: var(--superficie);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  cursor: pointer;
  transition: transform 0.1s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.escala button:active {
  transform: scale(0.94);
}

.escala .cara {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}

.escala .cara-numero {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}

/* El color de la cara y el número heredan de "color" (currentColor / texto normal): al
   marcarse, cambian a blanco solos, junto con el fondo verde del botón. */
.escala button[aria-pressed='true'] {
  color: #fff;
  background: var(--azul-700);
  border-color: var(--azul-700);
}

.barra {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  box-shadow: 0 -6px 16px rgba(17, 24, 20, 0.06);
}

.boton--barra {
  margin-top: 0;
  min-width: 160px;
}

.barra__acciones {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Barra del alta de incidencias: en móvil, fija al fondo y a todo el ancho (aviso de a quién
   se guarda arriba, Cancelar + Guardar abajo, Guardar como botón dominante). En escritorio
   (media query más abajo) deja de ser una barra fija de pantalla completa y pasa a alinearse
   con el ancho del propio formulario. */
.barra--ancha {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.barra__botones {
  display: flex;
  align-items: center;
  gap: 12px;
}

.barra--ancha .barra__botones .boton--secundario {
  flex: 0 0 auto;
}

.barra--ancha .boton--barra {
  flex: 1;
  width: auto;
  min-width: 0;
}

#nueva-incidencia-confirmacion {
  margin: 0;
  font-size: 0.85rem;
}

/* Hueco para que la barra fija no tape el último campo del formulario. */
.tarjeta--con-barra {
  margin-bottom: 108px;
}

/* Ancho cómodo de lectura para los campos del formulario, en vez de estirarse a toda la
   pantalla en un monitor grande. */
.tarjeta--formulario {
  max-width: 680px;
  margin: 0 auto;
}

.leyenda-obligatorio {
  margin: 0 0 4px;
  font-size: 0.85rem;
}

@media (min-width: 700px) {
  /* La barra fija a todo lo ancho es cosa de móvil: en pantallas más anchas se alinea con el
     formulario y deja de estar pegada al fondo. */
  .barra--ancha {
    position: static;
    max-width: 680px;
    margin: 0 auto;
    padding: 0 0 32px;
    background: none;
    border-top: none;
    box-shadow: none;
  }

  .barra--ancha .barra__botones {
    justify-content: flex-end;
  }

  .barra--ancha .boton--barra,
  .barra--ancha .boton--secundario {
    flex: 0 0 auto;
  }

  .barra--ancha .boton--barra {
    min-width: 160px;
  }

  .tarjeta--con-barra {
    margin-bottom: 24px;
  }
}

/* ------------------------------------------------------------------ histórico */

.lista-registros {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.registro {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.registro__valor {
  flex: 0 0 auto;
  min-width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  background: var(--azul-700);
}

.registro__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.registro__meta {
  color: var(--texto-2);
  font-size: 0.85rem;
}

.vacio {
  padding: 32px 16px;
  text-align: center;
  color: var(--texto-2);
}

/* ------------------------------------------------------------------ kiosco público */

/* Pantalla completa, todo más grande: se usa de pie, de paso, a un brazo de distancia. */
.pantalla--kiosco {
  justify-content: center;
  align-items: center;
  padding: 24px;
}

.kiosco {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.kiosco__pregunta {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 600;
  line-height: 1.3;
}

.kiosco__gracias {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.2rem);
  font-weight: 700;
  color: var(--exito);
}

/* La marca de visto del "¡Gracias!": a esta distancia, un icono grande se entiende antes
   que cualquier texto. Verde de éxito (semántico), no azul de marca: esto confirma que
   algo se ha guardado bien, no es una acción de interfaz. */
.kiosco__marca {
  display: grid;
  place-items: center;
  width: clamp(88px, 14vw, 128px);
  height: clamp(88px, 14vw, 128px);
  border-radius: 50%;
  color: #fff;
  background: var(--exito);
  box-shadow: var(--sombra);
  animation: marca-entra 260ms cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

.kiosco__marca svg {
  width: 55%;
  height: 55%;
}

.kiosco__tipos {
  display: grid;
  gap: 14px;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

/* ------------------------------------------------------------------ a quién se avisa */

.contacto-referencia {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
}

.contacto-referencia + .contacto-referencia {
  border-top: 1px solid var(--borde);
}

.contacto-referencia__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.contacto-referencia__cabecera strong {
  font-size: 1.05rem;
}

.contacto-referencia__relacion {
  margin: 0;
  color: var(--texto-2);
  font-size: 0.9rem;
}

.contacto-referencia__observaciones {
  margin: 0;
  color: var(--texto-2);
  font-size: 0.85rem;
}

.chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.chip--referencia {
  color: var(--azul-800);
  background: var(--azul-50);
}

/* Enlace tel:/mailto: tocable: 44px de alto mínimo (objetivo táctil), icono + texto
   alineados a la izquierda, sin subrayado — es un dato de contacto, no un link de texto. */
.contacto-referencia__enlace {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--azul-700);
  text-decoration: none;
  font-size: 0.95rem;
}

.contacto-referencia__enlace:hover,
.contacto-referencia__enlace:focus-visible {
  text-decoration: underline;
}

.contacto-referencia__enlace svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.contacto-referencia__vacio {
  margin: 0;
  color: var(--texto-3);
  font-weight: 600;
}

.kiosco__tipo {
  font: inherit;
  font-size: 1.2rem;
  font-weight: 600;
  min-height: 96px;
  color: var(--texto-1);
  background: var(--superficie);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.15s ease;
}

.kiosco__tipo:active {
  transform: scale(0.97);
}

.kiosco__tipo:hover,
.kiosco__tipo:focus-visible {
  border-color: var(--azul-600);
}

/* Caras mucho más grandes que en el cuestionario del profesional. */
.escala--kiosco {
  width: 100%;
  gap: 14px;
}

.escala--kiosco button {
  min-height: 130px;
  gap: 6px;
}

.escala--kiosco .cara {
  width: 64px;
  height: 64px;
}

.escala--kiosco .cara-numero {
  font-size: 1.15rem;
}

/* ------------------------------------------------------------------ avisos */

.aviso {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  padding: 14px 16px;
  color: #fff;
  background: var(--error);
  text-align: center;
  box-shadow: var(--sombra);
}

.aviso--exito {
  background: var(--exito);
}

/* ------------------------------------------------------------------ incidencias */

/* Filtros del listado: en una fila en PC, apilados en móvil. Se quedan arriba y visibles
   porque en un centro se filtra constantemente por persona. */
.filtros {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  padding: 0 4px 4px;
}

.filtro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--texto-2);
}

.filtro--ancho {
  grid-column: 1 / -1;
}

.filtro select,
.filtro input {
  min-height: 48px;
  padding: 10px 12px;
  font: inherit;
  color: var(--texto-1);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
}

.registro__titulo {
  margin: 0 0 4px;
  font-weight: 600;
}

/* Ficha de persona: dato a la izquierda, valor a la derecha, y en móvil uno debajo del otro. */
.fichas {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: start;
}

.dato {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  justify-content: space-between;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--borde);
}

.dato:last-child {
  border-bottom: 0;
}

.dato strong {
  text-align: right;
}

/* Confirmación de guardado. Antes era la misma franja roja de los errores pintada de verde,
   arriba y fuera de la vista de quien acababa de pulsar abajo. Ahora aparece en el centro,
   donde está mirando, y se va sola sin pedir nada. */
.confirmacion {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(17, 24, 20, 0.28);
  /* No intercepta pulsaciones: si alguien va rápido, puede seguir sin esperar a que se vaya. */
  pointer-events: none;
  animation: confirmacion-entra 140ms ease-out;
}

.confirmacion__tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 36px;
  min-width: min(320px, 100%);
  border-radius: 20px;
  background: var(--superficie);
  box-shadow: var(--sombra);
  text-align: center;
}

.confirmacion__marca {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  color: #fff;
  background: var(--exito);
  animation: marca-entra 220ms cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

.confirmacion__marca svg {
  width: 40px;
  height: 40px;
}

.confirmacion__texto {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
}

@keyframes confirmacion-entra {
  from {
    opacity: 0;
  }
}

@keyframes marca-entra {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
}


/* ================================================================ inicio unificado
   Una sola forma de pantalla para el inicio y para encuestas: cabecera común, contenido
   centrado con ancho máximo, y cada tarjeta con tres líneas que se leen igual en todas —
   qué es, cuánto hay, para qué sirve. */

.inicio {
  width: 100%;
  max-width: 1040px;
  margin: 8px auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* La acción de cada turno. Ancho completo y alta, para que no haya que buscarla. */
.accion-principal {
  font: inherit;
  width: 100%;
  min-height: 64px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  color: #fff;
  background: var(--azul-700);
  border: 0;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.accion-principal:hover {
  background: var(--azul-600);
  box-shadow: var(--sombra-hover);
}

.accion-principal:focus-visible {
  outline: 2px solid var(--azul-600);
  outline-offset: 3px;
}

.accion-principal__icono {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
}

.accion-principal__icono svg {
  width: 20px;
  height: 20px;
}

.accion-principal__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.accion-principal__titulo {
  font-size: 1.08rem;
  font-weight: 600;
}

.accion-principal__apoyo {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.82);
}

/* Rótulo pequeño de sección: agrupa sin competir con las tarjetas. */
.seccion-titulo {
  margin: 8px 2px 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--texto-2);
}

/* Titular de una sección (Encuestas): dice dónde estás, que es lo que faltaba. */
.seccion-titular {
  margin: 0;
  font-size: 1.35rem;
}

.seccion-apoyo {
  margin: 4px 0 0;
  color: var(--texto-2);
}

/* La tercera línea de cada tarjeta: para qué sirve. Siempre abajo, siempre igual. */
.tarjeta-accion__para {
  font-size: 0.85rem;
  color: var(--texto-3);
}

/* Miga de pan: sustituye al "Volver al inicio" de la cabecera, que hacía que encuestas
   pareciera un segundo inicio en vez de una sección. */
.miga {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--texto-2);
  font-size: 0.95rem;
}

.miga[hidden] {
  display: none;
}

.miga__volver {
  font: inherit;
  min-height: 48px;
  padding: 0 10px 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--azul-700);
  font-weight: 600;
  background: none;
  border: 0;
  border-radius: var(--radio-chico);
  cursor: pointer;
}

.miga__volver:hover {
  background: var(--azul-50);
}

.miga__volver:focus-visible {
  outline: 2px solid var(--azul-600);
  outline-offset: 2px;
}

.miga__volver svg {
  width: 20px;
  height: 20px;
}

.miga__separador {
  color: var(--texto-3);
}

/* En oscuro el icono azul se pierde sobre su fondo, que ahí es un azul casi negro. Se aclara
   solo el trazo del icono; el azul de botones y cabecera no cambia. */
@media (prefers-color-scheme: dark) {
  .tarjeta-accion__icono {
    color: #8cc3dc;
  }
}

/* ================================================================ entrar con Microsoft 365 */

.separador-login {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 2px;
  color: var(--texto-3);
  font-size: 0.9rem;
}

.separador-login::before,
.separador-login::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--borde);
}

.separador-login[hidden],
.boton--microsoft[hidden] {
  display: none;
}

/* Es un enlace con aspecto de botón: mismo alto y mismo borde que los botones de la web. */
.boton--microsoft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
}

.boton--microsoft svg {
  width: 20px;
  height: 20px;
}

.boton--microsoft:hover {
  background: var(--azul-50);
}

.boton--microsoft:focus-visible {
  outline: 2px solid var(--azul-600);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ cuadro de indicadores */

.pestanas {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.pestana {
  flex: 1 1 0;
  min-height: 48px;
  padding: 8px 14px;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  color: var(--texto-2);
  background: transparent;
  border: 0;
  border-radius: var(--radio-chico);
  cursor: pointer;
}

.pestana[aria-selected='true'] {
  color: #fff;
  background: var(--azul-700);
}

.pestana:focus-visible {
  outline: 3px solid var(--azul-600);
  outline-offset: 2px;
}

.panel-indicadores {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kpis {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.kpi__titulo {
  font-size: 0.85rem;
  color: var(--texto-2);
}

.kpi__valor {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--texto-1);
}

.kpi__apoyo {
  font-size: 0.82rem;
  color: var(--texto-3);
}

.tarjeta-dimension {
  font: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 12px;
  color: var(--texto-1);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

.tarjeta-dimension:hover {
  background: var(--azul-50);
  box-shadow: var(--sombra-hover);
}

.tarjeta-dimension__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.tarjeta-dimension__nombre {
  font-weight: 600;
}

.tarjeta-dimension__valor {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tarjeta-dimension__apoyo {
  font-size: 0.82rem;
  color: var(--texto-2);
}

.cabecera-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 8px 16px;
}

.filtro--en-linea {
  min-width: min(260px, 100%);
}

.registro--indicador {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px auto;
  gap: 8px 18px;
}

.registro__titulo-indicador {
  font-weight: 500;
}

.indicador-cifra {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  /* Ancho fijo: así todos los gráficos de la lista quedan alineados en la misma columna. */
  min-width: 150px;
}

.indicador-cifra__valor {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Móvil: el texto arriba a todo lo ancho; gráfico y cifra debajo, uno al lado del otro. */
@media (max-width: 640px) {
  .registro--indicador {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .registro--indicador .registro__texto {
    grid-column: 1 / -1;
  }
  .indicador-cifra {
    min-width: 0;
  }
}

.grafico {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.grafico__base {
  stroke: var(--borde);
  stroke-width: 1;
}

.grafico__objetivo {
  stroke: var(--texto-3);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}

.grafico__linea {
  fill: none;
  stroke: var(--azul-700);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.grafico__punto {
  fill: var(--azul-700);
  stroke: var(--superficie);
  stroke-width: 2;
}

.grafico__barra {
  fill: var(--azul-100);
}

.grafico__barra--actual {
  fill: var(--azul-700);
}

.grafico__eje {
  font-size: 10px;
  fill: var(--texto-3);
}

/* Estado frente al objetivo: siempre con icono y texto, nunca solo color. */
.chip--cumple {
  color: var(--exito);
  background: color-mix(in srgb, var(--exito) 14%, transparent);
}

.chip--cerca {
  color: var(--aviso);
  background: color-mix(in srgb, var(--aviso) 14%, transparent);
}

.chip--lejos {
  color: var(--error);
  background: color-mix(in srgb, var(--error) 12%, transparent);
}

.indicadores-pie {
  font-size: 0.82rem;
  color: var(--texto-3);
}

@media (prefers-color-scheme: dark) {
  .grafico__linea,
  .grafico__barra--actual {
    stroke: #6fb3d6;
  }
  .grafico__punto,
  .grafico__barra--actual {
    fill: #6fb3d6;
  }
  .chip--cumple { color: #5fcf9a; }
  .chip--cerca { color: #e6b04a; }
  .chip--lejos { color: #f08a82; }
}

/* En la ficha de la persona: a todo lo ancho, debajo de los bloques de datos. */
.bloque-indicadores-persona {
  grid-column: 1 / -1;
  /* Que la cabecera fija no tape el título al bajar con el botón "Indicadores". */
  scroll-margin-top: 96px;
}

.bloque-indicadores-persona .registro {
  box-shadow: none;
}

/* ------------------------------------------------------------------ tabla mes a mes */

.tabla-indicadores__marco {
  overflow-x: auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.tabla-indicadores {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.tabla-indicadores th,
.tabla-indicadores td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--borde);
  text-align: right;
  white-space: nowrap;
}

.tabla-indicadores thead th {
  position: sticky;
  top: 0;
  color: var(--texto-2);
  font-weight: 600;
  background: var(--superficie);
}

/* La primera columna se queda fija al desplazar en horizontal (móvil). */
.tabla-indicadores tbody th,
.tabla-indicadores thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 220px;
  max-width: 340px;
  text-align: left;
  white-space: normal;
  font-weight: 500;
  background: var(--superficie);
}

.tabla-indicadores__codigo {
  display: block;
  font-size: 0.78rem;
  color: var(--texto-3);
}

.tabla-indicadores__dimension th,
.tabla-indicadores__dimension td {
  font-weight: 700;
  background: var(--azul-50);
}

.tabla-indicadores__dimension th {
  background: var(--azul-50);
}

.tabla-indicadores__objetivo {
  color: var(--texto-2);
}

.celda--cumple { background: color-mix(in srgb, var(--exito) 14%, transparent); }
.celda--cerca { background: color-mix(in srgb, var(--aviso) 14%, transparent); }
.celda--lejos { background: color-mix(in srgb, var(--error) 12%, transparent); }

@media (max-width: 640px) {
  .tabla-indicadores tbody th,
  .tabla-indicadores thead th:first-child {
    min-width: 150px;
  }
}