/* ==========================================================================
   Conduce-Fácil · Hoja de estilos
   Identidad Gamonal: paleta oficial, tipografía Roboto y radio uniforme de 8 px.
   Cuadrícula: contenido de 1000 px con 100 px de margen a cada lado.
   ========================================================================== */

:root {
  /* Colores base */
  --azul: #040764;
  --azul-oscuro: #04065a;
  --azul-secundario: #1c73cb;
  --azul-secundario-oscuro: #11457a;
  --azul-secundario-claro: #378ce3;
  --turquesa: #20b6b6;
  --turquesa-oscuro: #1da4a4;
  --turquesa-claro: #b1f1f1;
  --amarillo: #fce865;
  --amarillo-oscuro: #fadb0e;
  --amarillo-claro: #fdef97;
  --magenta: #b318a3;
  --magenta-oscuro: #a11693;
  --gris-oscuro: #3b3b3b;
  --gris-medio: #545454;
  --gris-claro: #f5f5f5;
  --blanco: #ffffff;
  --verde-agua: #f2fdfd;
  --amarillo-tenue: #fefbe2;

  /* Estados semánticos */
  --exito-fondo: #c2f0d3;
  --exito: #22c35d;
  --exito-fuerte: #0d7332;
  --alerta-fondo: #f7eed4;
  --alerta: #e8ba30;
  --alerta-fuerte: #a57f0d;
  --error-fondo: #f5d6d6;
  --error: #cf1717;
  --error-fuerte: #760a0a;
  --info-fondo: #d6e5f5;
  --info: #2273c3;
  --info-fuerte: #0d4073;

  /* Sistema */
  --radio: 8px;
  --contenido: 1000px;
  --margen-lateral: 100px;
  --e1: 8px;
  --e2: 16px;
  --e3: 24px;
  --e4: 32px;
  --e5: 48px;
  --e6: 64px;
  --alto-topbar: 64px;
  --alto-nav: 52px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--gris-oscuro);
  background: var(--gris-claro);
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-weight: 600; color: var(--azul); margin: 0 0 var(--e2); line-height: 1.25; }
h1 { font-size: 34px; }
h2 { font-size: 25px; }
h3 { font-size: 20px; }
h4 { font-size: 17px; }
p { margin: 0 0 var(--e2); }
a { color: var(--azul-secundario); }
img { max-width: 100%; }

.oculto { display: none !important; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

/* --------------------------------------------------------------- Cuadrícula */
.contenedor {
  width: 100%;
  max-width: calc(var(--contenido) + var(--margen-lateral) * 2);
  margin: 0 auto;
  /* En pantallas con muescas o bordes curvos (iPhone con Dynamic Island, por
     ejemplo) el margen nunca baja del área segura que reserva el sistema. */
  padding-left: max(var(--margen-lateral), env(safe-area-inset-left));
  padding-right: max(var(--margen-lateral), env(safe-area-inset-right));
}

.rejilla { display: grid; gap: var(--e3); }
.rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ----------------------------------------------------------------- Top bar */
.barra-superior {
  height: var(--alto-topbar);
  background: var(--blanco);
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 40;
}
.barra-superior .contenedor { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); }
.marca-app { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca-app svg { width: 34px; height: 34px; display: block; }
.marca-app .palabra { font-weight: 600; font-size: 20px; color: var(--azul); letter-spacing: -0.2px; }
.marca-app .palabra em { font-style: normal; color: var(--turquesa); }

.usuario-menu { display: flex; align-items: center; gap: var(--e2); }
.usuario-chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--gris-claro); border-radius: var(--radio);
  padding: 6px 12px; font-size: 14px; font-weight: 500; color: var(--azul);
}
.usuario-avatar {
  width: 30px; height: 30px; border-radius: var(--radio);
  background: var(--turquesa); color: var(--blanco);
  display: grid; place-items: center; font-weight: 600; font-size: 14px;
}

/* -------------------------------------------------------------- Navegación */
.navegacion { background: var(--azul); position: sticky; top: var(--alto-topbar); z-index: 39; }
/* La barra reparte los destinos en las filas que hagan falta. Nunca se desplaza
   en horizontal: todas las secciones quedan visibles en cualquier ancho. */
.navegacion .contenedor { display: flex; flex-wrap: wrap; gap: 4px; }
.nav-enlace {
  display: inline-flex; align-items: center; gap: 8px;
  height: var(--alto-nav); padding: 0 14px;
  color: var(--blanco); text-decoration: none;
  font-size: 15px; font-weight: 500; white-space: nowrap;
  border-radius: var(--radio) var(--radio) 0 0;
}
.nav-enlace svg { width: 18px; height: 18px; flex: 0 0 auto; }
.nav-enlace:hover { background: var(--azul-secundario-oscuro); }
.nav-enlace[aria-current="page"] { background: var(--amarillo); color: var(--azul); }
.nav-enlace[aria-current="page"] svg { color: var(--azul); }

/* ------------------------------------------------------------------ Página */
main { min-height: 60vh; padding: var(--e5) 0 var(--e6); }
.cabecera-pagina { margin-bottom: var(--e4); }
.cabecera-pagina p { color: var(--gris-medio); max-width: 68ch; margin-bottom: 0; }
.migas { font-size: 14px; color: var(--gris-medio); margin-bottom: var(--e1); }
.migas a { color: var(--azul-secundario); text-decoration: none; }
.migas a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------- Cards */
.tarjeta {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: var(--e3);
}
.tarjeta-plana { background: var(--gris-claro); border-radius: var(--radio); padding: var(--e3); }
.tarjeta-turquesa { background: var(--turquesa-claro); border-radius: var(--radio); padding: var(--e3); }
.tarjeta-amarilla { background: var(--amarillo-claro); border-radius: var(--radio); padding: var(--e3); }
.tarjeta-azul { background: var(--azul); color: var(--blanco); border-radius: var(--radio); padding: var(--e3); }
.tarjeta-azul h1, .tarjeta-azul h2, .tarjeta-azul h3 { color: var(--blanco); }

.enlace-tarjeta { display: block; text-decoration: none; color: inherit; }
.enlace-tarjeta:hover { background: var(--verde-agua); }
.enlace-tarjeta:hover h3 { color: var(--azul-secundario); }

/* ------------------------------------------------------------------- Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  border: 0; border-radius: var(--radio);
  font-family: inherit; font-size: 15px; font-weight: 500;
  cursor: pointer; text-decoration: none;
  /* Un rótulo largo —el nombre de un capítulo, por ejemplo— se reparte en dos
     líneas antes que ensanchar la página en un teléfono estrecho. */
  max-width: 100%; text-align: center;
}
.boton:disabled { background: var(--gris-claro); color: var(--gris-medio); cursor: not-allowed; }
.boton svg { width: 18px; height: 18px; }

.boton-principal { background: var(--azul); color: var(--blanco); }
.boton-principal:hover:not(:disabled) { background: var(--azul-oscuro); }

.boton-secundario { background: var(--blanco); color: var(--azul); box-shadow: inset 0 0 0 2px var(--azul); }
.boton-secundario:hover:not(:disabled) { background: var(--gris-claro); }

.boton-acento { background: var(--magenta); color: var(--blanco); }
.boton-acento:hover:not(:disabled) { background: var(--magenta-oscuro); }

.boton-amarillo { background: var(--amarillo); color: var(--azul); }
.boton-amarillo:hover:not(:disabled) { background: var(--amarillo-oscuro); }

.boton-turquesa { background: var(--turquesa); color: var(--blanco); }
.boton-turquesa:hover:not(:disabled) { background: var(--turquesa-oscuro); }

.boton-texto { background: transparent; color: var(--azul-secundario); padding: 0 6px; min-height: 36px; }
.boton-texto:hover:not(:disabled) { text-decoration: underline; background: transparent; }

.boton-bloque { width: 100%; }
.grupo-botones { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* ---------------------------------------------------------------- Formularios */
.campo { margin-bottom: var(--e3); }
.campo label { display: block; font-size: 14px; font-weight: 500; color: var(--azul); margin-bottom: 6px; }
.campo .ayuda { font-size: 13px; color: var(--gris-medio); margin-top: 6px; }
input[type="text"], input[type="password"], input[type="number"], select, textarea {
  width: 100%; min-height: 46px; padding: 10px 14px;
  font-family: inherit; font-size: 16px; color: var(--gris-oscuro);
  background: var(--blanco); border: 2px solid #d8d8d8; border-radius: var(--radio);
}
input:focus, select:focus, textarea:focus { border-color: var(--azul-secundario); outline: none; }
input[aria-invalid="true"] { border-color: var(--error); }

.opcion-caja { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; }
.opcion-caja input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--azul); }
.opcion-caja label { margin: 0; font-weight: 400; color: var(--gris-oscuro); font-size: 15px; }

.lista-chips { display: flex; flex-wrap: wrap; gap: var(--e1); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px; border-radius: var(--radio);
  background: var(--gris-claro); color: var(--azul);
  font-size: 14px; font-weight: 500; border: 0; cursor: pointer; font-family: inherit;
}
.chip[aria-pressed="true"] { background: var(--azul); color: var(--blanco); }

/* -------------------------------------------------------------------- Avisos */
.aviso { border-radius: var(--radio); padding: 14px var(--e2); margin-bottom: var(--e3); font-size: 15px; }
.aviso-info { background: var(--info-fondo); color: var(--info-fuerte); }
.aviso-exito { background: var(--exito-fondo); color: var(--exito-fuerte); }
.aviso-alerta { background: var(--alerta-fondo); color: var(--alerta-fuerte); }
.aviso-error { background: var(--error-fondo); color: var(--error-fuerte); }

.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radio);
  font-size: 12.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px;
}
.etiqueta-neutra { background: var(--gris-claro); color: var(--gris-medio); }
.etiqueta-info { background: var(--info-fondo); color: var(--info-fuerte); }
.etiqueta-exito { background: var(--exito-fondo); color: var(--exito-fuerte); }
.etiqueta-error { background: var(--error-fondo); color: var(--error-fuerte); }
.etiqueta-alerta { background: var(--alerta-fondo); color: var(--alerta-fuerte); }
.etiqueta-turquesa { background: var(--turquesa-claro); color: var(--info-fuerte); }

/* --------------------------------------------------------------------- Login */
.pantalla-acceso { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
/* En móvil la barra del navegador altera la altura de 100vh y desplaza el
   formulario; svh mide el alto realmente visible. */
@supports (min-height: 100svh) { .pantalla-acceso { min-height: 100svh; } }
.acceso-formulario {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--e6) 8%; background: var(--blanco);
}
.acceso-formulario .interior { width: 100%; max-width: 400px; margin: 0 auto; }
.acceso-marca { display: flex; align-items: center; gap: 12px; margin-bottom: var(--e5); }
.acceso-marca svg { width: 52px; height: 52px; }
.acceso-marca .palabra { font-size: 26px; font-weight: 600; color: var(--azul); }
.acceso-marca .palabra em { font-style: normal; color: var(--turquesa); }
.acceso-visual { position: relative; background: var(--azul); display: flex; align-items: flex-end; overflow: hidden; }
.acceso-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acceso-visual .mensaje {
  position: relative; margin: var(--e5); background: var(--azul); color: var(--blanco);
  border-radius: var(--radio); padding: var(--e3); max-width: 420px;
}
.acceso-visual .mensaje p { margin: 0; font-size: 17px; }
.acceso-visual .mensaje strong { display: block; font-size: 21px; font-weight: 600; margin-bottom: 6px; }
.pie-desarrollo { margin-top: var(--e5); font-size: 13px; color: var(--gris-medio); }
.pie-desarrollo strong { color: var(--azul); font-weight: 600; }

/* --------------------------------------------------------------------- Home */
.portada-home {
  background: var(--azul); color: var(--blanco); border-radius: var(--radio);
  padding: var(--e5); margin-bottom: var(--e4);
  display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--e5); align-items: center;
}
.portada-home h1 { color: var(--blanco); font-size: 38px; margin-bottom: var(--e2); }
.portada-home p { color: var(--blanco); font-size: 17px; margin-bottom: var(--e3); max-width: 46ch; }
.portada-figura { border-radius: var(--radio); overflow: hidden; background: var(--blanco); }
.portada-figura img { display: block; width: 100%; height: 260px; object-fit: cover; }

.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e2); }
.cifra { background: var(--blanco); border-radius: var(--radio); padding: var(--e3); }
.cifra .valor { font-size: 32px; font-weight: 600; color: var(--azul); line-height: 1.1; }
.cifra .rotulo { font-size: 14px; color: var(--gris-medio); }

.modulo-acceso { display: flex; gap: var(--e3); align-items: flex-start; }
.modulo-icono {
  width: 48px; height: 48px; border-radius: var(--radio); flex: 0 0 auto;
  display: grid; place-items: center; color: var(--blanco);
}
.modulo-icono svg { width: 26px; height: 26px; }
.icono-azul { background: var(--azul); }
.icono-turquesa { background: var(--turquesa); }
.icono-magenta { background: var(--magenta); }
.icono-secundario { background: var(--azul-secundario); }
.icono-amarillo { background: var(--amarillo); color: var(--azul); }

/* ------------------------------------------------------------------ Estudio */
.tarjeta-estudio { background: var(--blanco); border-radius: var(--radio); padding: var(--e3); margin-bottom: var(--e2); }
.tarjeta-estudio .pregunta { font-size: 18px; font-weight: 600; color: var(--azul); margin-bottom: var(--e2); }
.tarjeta-estudio .respuesta { background: var(--verde-agua); border-radius: var(--radio); padding: var(--e3); }
.tarjeta-estudio .respuesta p { margin: 0; }
.tarjeta-estudio .cita { font-size: 13px; color: var(--gris-medio); margin-top: var(--e2); }
.figuras-manual { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.figuras-manual figure { margin: 0; background: var(--blanco); border-radius: var(--radio); padding: var(--e1); }
.figuras-manual img { display: block; max-height: 190px; width: auto; border-radius: 4px; }
.acciones-estudio { display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: var(--e3); align-items: center; }

.barra-progreso { height: 10px; background: var(--gris-claro); border-radius: var(--radio); overflow: hidden; }
.barra-progreso span { display: block; height: 100%; background: var(--turquesa); border-radius: var(--radio); }
.barra-progreso.sobre-azul { background: var(--azul-secundario-oscuro); }
.barra-progreso.sobre-azul span { background: var(--amarillo); }

/* ------------------------------------------------------- Trivia y test */
.escenario {
  background: var(--blanco); border-radius: var(--radio); padding: var(--e4);
  display: grid; gap: var(--e3);
}
.marco-senal {
  background: var(--gris-claro); border-radius: var(--radio);
  display: grid; place-items: center; padding: var(--e4); min-height: 300px;
}
.marco-senal img { max-height: 260px; width: auto; }
.opciones { display: grid; gap: var(--e2); }
.opcion {
  display: flex; align-items: center; gap: var(--e2); width: 100%;
  min-height: 56px; padding: 12px var(--e2);
  background: var(--gris-claro); color: var(--gris-oscuro);
  border: 0; border-radius: var(--radio);
  font-family: inherit; font-size: 16px; text-align: left; cursor: pointer;
}
.opcion:hover:not(:disabled) { background: var(--turquesa-claro); }
.opcion .letra {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--radio);
  background: var(--blanco); color: var(--azul);
  display: grid; place-items: center; font-weight: 600; font-size: 15px;
}
.opcion.correcta { background: var(--exito-fondo); color: var(--exito-fuerte); }
.opcion.correcta .letra { background: var(--exito); color: var(--blanco); }
.opcion.incorrecta { background: var(--error-fondo); color: var(--error-fuerte); }
.opcion.incorrecta .letra { background: var(--error); color: var(--blanco); }
.opcion:disabled { cursor: default; }

/* Ilustración del manual que plantea el caso de la pregunta. */
.caso-manual { margin: 0; background: var(--gris-claro); border-radius: var(--radio); padding: var(--e3); }
.caso-manual-imagenes { display: flex; flex-wrap: wrap; gap: var(--e2); justify-content: center; align-items: center; }
.caso-manual-imagenes img { max-height: 230px; max-width: 100%; width: auto; border-radius: 4px; }
.caso-manual figcaption { margin-top: var(--e2); font-size: 13px; color: var(--gris-medio); text-align: center; }

/* Catálogo de señales: cuadrícula fluida que muestra la familia completa. */
.catalogo-senales {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--e2);
  margin-top: var(--e3);
}
.ficha-senal { margin: 0; background: var(--gris-claro); border-radius: var(--radio); padding: var(--e2); text-align: center; }
.ficha-senal-imagen { display: grid; place-items: center; height: 78px; }
.ficha-senal-imagen img { max-height: 78px; max-width: 100%; width: auto; }
.ficha-senal figcaption { display: block; margin-top: 10px; }
.ficha-senal-codigo { display: block; font-size: 12.5px; font-weight: 600; color: var(--azul); }
.ficha-senal-nombre { display: block; font-size: 11.5px; line-height: 1.3; color: var(--gris-medio); margin-top: 2px; }

.cabecera-ejercicio {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e2); margin-bottom: var(--e3);
}
.cronometro {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--azul); color: var(--blanco); border-radius: var(--radio);
  padding: 8px 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.cronometro.alerta { background: var(--alerta-fuerte); }
.contador-preguntas { font-weight: 500; color: var(--azul); }

/* ---------------------------------------------------------------- Tablas */
.tabla-envoltorio { overflow-x: auto; border-radius: var(--radio); background: var(--blanco); }
table.tabla { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
table.tabla th, table.tabla td { padding: 12px var(--e2); text-align: left; }
table.tabla thead th { background: var(--azul); color: var(--blanco); font-weight: 500; font-size: 14px; }
table.tabla tbody tr + tr td { border-top: 1px solid #e6e6e6; }
table.tabla tbody tr:hover td { background: var(--verde-agua); }
table.tabla td.num, table.tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Resultados */
.resumen-resultado {
  display: grid; grid-template-columns: 200px 1fr; gap: var(--e4); align-items: center;
  border-radius: var(--radio); padding: var(--e4); margin-bottom: var(--e4);
}
.resumen-aprobado { background: var(--exito-fondo); }
.resumen-reprobado { background: var(--error-fondo); }
.puntaje { text-align: center; }
.puntaje .valor { font-size: 56px; font-weight: 600; line-height: 1; color: var(--azul); }
.puntaje .total { font-size: 15px; color: var(--gris-medio); }

.lista-debilidades { display: grid; gap: var(--e2); }
.fila-debilidad {
  display: grid; grid-template-columns: 1fr 160px auto; gap: var(--e2);
  align-items: center; background: var(--blanco); border-radius: var(--radio); padding: var(--e2) var(--e3);
}

/* ------------------------------------------------------------------ Vacíos */
.estado-vacio { background: var(--blanco); border-radius: var(--radio); padding: var(--e5); text-align: center; }
.estado-vacio p { color: var(--gris-medio); max-width: 52ch; margin: 0 auto var(--e3); }

/* --------------------------------------------------------------------- Pie */
.pie {
  background: var(--blanco); padding: var(--e4) 0; margin-top: var(--e6);
  font-size: 14px; color: var(--gris-medio);
}
.pie .contenedor { display: flex; flex-wrap: wrap; gap: var(--e3); justify-content: space-between; align-items: center; }
.pie .endoso { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.pie .endoso svg { width: 22px; height: 22px; }
.pie strong { color: var(--azul); font-weight: 600; }

/* -------------------------------------------------------------- Cargando */
.cargando { display: grid; place-items: center; padding: var(--e6) 0; color: var(--gris-medio); }

/* --------------------------------------------------------------- Responsive */
@media (max-width: 1200px) {
  :root { --margen-lateral: 40px; }
}

/* Tablet y teléfono en horizontal: los ocho destinos no caben en una sola línea,
   así que la barra se reparte en dos filas completas en vez de recortarse. */
@media (min-width: 641px) and (max-width: 1023px) {
  .navegacion { padding: 6px 0; }
  .navegacion .contenedor { row-gap: 4px; }
  .nav-enlace { height: 44px; border-radius: var(--radio); flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 900px) {
  :root { --margen-lateral: 24px; }
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  .rejilla-3, .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portada-home { grid-template-columns: 1fr; padding: var(--e4); }
  .portada-home h1 { font-size: 30px; }
  .pantalla-acceso { grid-template-columns: 1fr; }
  .acceso-visual { min-height: 240px; order: -1; }
  .acceso-visual .mensaje { margin: var(--e3); }
  .acceso-formulario { padding: var(--e5) var(--e3); }
  .resumen-resultado { grid-template-columns: 1fr; text-align: center; }
  .fila-debilidad { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --margen-lateral: 16px; --e5: 32px; --e6: 40px; }
  body { font-size: 15.5px; }
  h1 { font-size: 25px; }
  .rejilla-2, .rejilla-3, .rejilla-4 { grid-template-columns: 1fr; }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main { padding: var(--e4) 0 calc(96px + env(safe-area-inset-bottom)); }
  .escenario { padding: var(--e3); }
  .marco-senal { min-height: 220px; padding: var(--e3); }
  .marco-senal img { max-height: 190px; }
  .caso-manual { padding: var(--e2); }
  .caso-manual-imagenes img { max-height: 170px; }
  .grupo-botones .boton { flex: 1 1 100%; }

  /* Navegación inferior táctil */
  .navegacion {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.08);
  }
  .navegacion .contenedor {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
  .nav-enlace {
    flex-direction: column; gap: 2px; height: auto; min-height: 56px;
    /* Reparto en partes iguales: los seis destinos entran incluso en 320 px. */
    flex: 1 1 0; min-width: 0;
    padding: 6px 4px; border-radius: var(--radio);
    font-size: clamp(9.5px, 2.6vw, 11px); text-align: center;
  }
  .nav-enlace svg { width: 22px; height: 22px; }
  .barra-superior { position: static; }
  .marca-app .palabra { font-size: 18px; }
  .usuario-chip .nombre { display: none; }
}

/* Teléfonos muy estrechos (320–360 px): la barra inferior se comprime para que
   los seis destinos sigan cabiendo sin desplazamiento horizontal. */
@media (max-width: 360px) {
  :root { --margen-lateral: 12px; }
  .navegacion .contenedor {
    gap: 2px;
    padding-left: max(4px, env(safe-area-inset-left));
    padding-right: max(4px, env(safe-area-inset-right));
  }
  .nav-enlace { padding: 6px 2px; font-size: 9px; }
  .nav-enlace svg { width: 20px; height: 20px; }
}

@media print {
  .navegacion, .barra-superior, .pie, .grupo-botones { display: none !important; }
}

/* --------------------------------- Barra inferior móvil: agrupador «Más» --- */
.nav-mas { display: none; background: transparent; border: 0; font-family: inherit; cursor: pointer; }

@media (max-width: 640px) {
  .nav-secundario { display: none; }
  .nav-mas { display: inline-flex; }
  .navegacion.expandida .nav-secundario {
    display: flex; order: -1; flex: 1 1 100%;
    flex-direction: row; justify-content: flex-start; gap: 12px;
    min-height: 48px; padding: 6px 14px; font-size: 15px;
    background: var(--azul-secundario-oscuro); border-radius: var(--radio);
    margin-bottom: 4px;
  }
  .navegacion.expandida .nav-secundario[aria-current="page"] { background: var(--amarillo); }
}