/* Ruta NL — prototipo 024. Sin dependencias externas ni fuentes remotas.
   Paleta y tipografía tomadas de web/assets/css/estilos.css (solo lectura). */

:root {
  --azul-900: #0a1f3c;
  --azul-800: #10305a;
  --azul-600: #1d4f8f;
  --azul-100: #e9eff7;
  --azul-050: #f5f8fc;
  --verde-700: #17754f;
  --verde-300: #7fd6ae;
  --verde-050: #e8f6ef;
  --tinta: #16233a;
  --tinta-suave: #4a5a72;
  --linea: #d5dde8;
  --blanco: #ffffff;
  --ambar-fondo: #fff4d6;
  --ambar-texto: #5c4300;
  --rojo: #a8231c;
  --rojo-fondo: #fdecea;

  --fuente-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-titulo: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  --radio: 14px;
  --radio-s: 8px;
  --sombra: 0 1px 2px rgba(10, 31, 60, .06), 0 8px 24px rgba(10, 31, 60, .07);
  --ancho: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--azul-050);
}
h1, h2, h3 {
  font-family: var(--fuente-titulo);
  color: var(--azul-900);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.7rem, 4.4vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 .9em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
a { color: var(--azul-600); text-underline-offset: .18em; }
a:hover { color: var(--azul-900); }
:focus-visible { outline: 3px solid var(--verde-700); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.contenedor { width: min(100% - 2rem, var(--ancho)); margin-inline: auto; }
.estrecho { max-width: 44rem; }
.suave { color: var(--tinta-suave); }
.pequeno { font-size: .86rem; }
.centro { text-align: center; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar {
  position: absolute; left: 1rem; top: -5rem; z-index: 60;
  background: var(--blanco); color: var(--azul-900); border: 2px solid var(--azul-900);
  padding: .5rem .9rem; border-radius: var(--radio-s); font-weight: 700;
}
.saltar:focus { top: 3.2rem; }
h2.t3 { font-size: 1.1rem; }

/* ---------- Barra de demostración (siempre visible) ---------- */

.demo {
  position: sticky; top: 0; z-index: 40;
  background: var(--ambar-fondo); color: var(--ambar-texto);
  border-bottom: 2px solid #e2c56a;
  font-size: .84rem;
}
.demo__fila {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem;
  padding: .4rem 0;
}
.demo__aviso { font-weight: 800; letter-spacing: .03em; }
.demo__url {
  flex: 1 1 14rem; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--blanco); border: 1px solid #e2c56a; border-radius: 999px;
  padding: .15rem .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.demo__roles { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.demo__roles button, .demo__mapa {
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
  background: var(--blanco); color: var(--ambar-texto);
  border: 1px solid #c9a94a; border-radius: 999px; padding: .12rem .65rem;
  text-decoration: none;
}
.demo__roles button[aria-pressed="true"] { background: var(--ambar-texto); color: var(--blanco); }

/* ---------- Cabeceras de los tres espacios ---------- */

.cabecera { background: var(--blanco); border-bottom: 1px solid var(--linea); }
.cabecera__fila {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .4rem 1.2rem; min-height: 3.6rem; padding: .35rem 0;
}
.marca {
  display: inline-flex; align-items: center; gap: .55rem;
  text-decoration: none; color: var(--azul-900);
  font-family: var(--fuente-titulo); font-size: 1.3rem; font-weight: 700;
}
.marca__nl { color: var(--verde-700); }
.marca__espacio {
  font-family: var(--fuente-texto); font-size: .68rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .12rem .5rem; border-radius: 999px;
  background: var(--verde-050); color: var(--verde-700);
}
.menu { display: flex; flex-wrap: wrap; gap: .1rem; align-items: center; }
.menu a {
  display: block; padding: .45rem .7rem; border-radius: var(--radio-s);
  color: var(--tinta); text-decoration: none; font-weight: 500; font-size: .95rem;
}
.menu a:hover { background: var(--azul-100); }
.menu a[aria-current="page"] { color: var(--azul-900); font-weight: 700; box-shadow: inset 0 -3px 0 var(--verde-700); }

/* Administración: aspecto deliberadamente distinto del portal del usuario */
.cabecera--admin { background: var(--azul-900); border-bottom: 4px solid var(--rojo); }
.cabecera--admin .marca { color: var(--blanco); }
.cabecera--admin .marca__nl { color: var(--verde-300); }
.cabecera--admin .marca__espacio { background: var(--rojo); color: var(--blanco); }
.cabecera--admin .menu a { color: #dfe8f3; }
.cabecera--admin .menu a:hover { background: var(--azul-800); }
.cabecera--admin .menu a[aria-current="page"] { color: var(--blanco); box-shadow: inset 0 -3px 0 var(--verde-300); }
.espacio-admin { background: #eef1f6; }

main { padding: 1.6rem 0 3rem; min-height: 60vh; }
main:focus { outline: none; }

.pie { background: var(--azul-900); color: #c9d6e6; font-size: .86rem; padding: 1.2rem 0; }
.pie a { color: var(--verde-300); }

/* ---------- Piezas comunes ---------- */

.botones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: inherit; font-weight: 650; text-decoration: none; cursor: pointer;
  padding: .6rem 1.05rem; border-radius: var(--radio-s);
  border: 1.5px solid transparent; line-height: 1.2;
}
.boton--primario { background: var(--verde-700); color: var(--blanco); }
.boton--primario:hover { background: #0f5c3c; color: var(--blanco); }
.boton--secundario { background: var(--blanco); color: var(--azul-900); border-color: var(--azul-900); }
.boton--secundario:hover { background: var(--azul-900); color: var(--blanco); }
.boton--claro { background: transparent; color: var(--blanco); border-color: rgba(255,255,255,.7); }
.boton--claro:hover { background: var(--blanco); color: var(--azul-900); }
.boton--peligro { background: var(--blanco); color: var(--rojo); border-color: var(--rojo); }
.boton--peligro:hover { background: var(--rojo); color: var(--blanco); }
.boton--mini { padding: .3rem .6rem; font-size: .85rem; }
.boton[disabled] { opacity: .5; cursor: not-allowed; }

.tarjeta {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 1.1rem 1.2rem; box-shadow: var(--sombra);
  min-width: 0;
}
.tarjeta > :last-child { margin-bottom: 0; }
.rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
.dos-columnas { display: grid; gap: 1rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.pila { display: grid; gap: 1rem; min-width: 0; }
.fila-titulo { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; justify-content: space-between; margin-bottom: .8rem; }
.fila-titulo h1, .fila-titulo h2 { margin: 0; }

.aviso {
  border-left: 5px solid #c9a94a; background: var(--ambar-fondo); color: var(--ambar-texto);
  padding: .7rem .9rem; border-radius: var(--radio-s); margin: 0 0 1rem; font-size: .93rem;
}
.aviso--info { border-color: var(--azul-600); background: var(--azul-100); color: var(--azul-900); }
.aviso--ok { border-color: var(--verde-700); background: var(--verde-050); color: #0d4a31; }
.aviso--error { border-color: var(--rojo); background: var(--rojo-fondo); color: var(--rojo); }
.aviso > :last-child { margin-bottom: 0; }

.etiqueta {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .03em;
  padding: .12rem .55rem; border-radius: 999px; max-width: 100%;
  background: var(--azul-100); color: var(--azul-800);
}
.etiqueta--ficticio { background: var(--ambar-fondo); color: var(--ambar-texto); }
.etiqueta--futuro { background: #ece9f7; color: #43327a; }
.etiqueta--gratis { background: var(--verde-050); color: var(--verde-700); }
.etiqueta--interna { background: var(--rojo-fondo); color: var(--rojo); }
.estado { font-weight: 700; }
.estado--borrador { background: #eceff3; color: #45526a; }
.estado--recibida { background: var(--azul-100); color: var(--azul-800); }
.estado--revision { background: #e6e9fb; color: #2d3a94; }
.estado--pendiente { background: var(--ambar-fondo); color: var(--ambar-texto); }
.estado--curso { background: var(--verde-050); color: var(--verde-700); }
.estado--cerrado { background: #e4e4e4; color: #3b3b3b; }

.datos { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr); gap: .3rem 1rem; margin: 0; }
.datos dt { color: var(--tinta-suave); font-size: .9rem; }
.datos dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- Web comercial (maqueta) ---------- */

.heroe { background: var(--azul-900); color: #dfe8f3; padding: 2.6rem 0; margin-top: -1.6rem; margin-bottom: 1.6rem; }
/* Si hay un aviso encima, la franja no debe solaparlo */
.contenedor + .heroe { margin-top: 0; }
.heroe h1 { color: var(--blanco); }
.heroe p { max-width: 40rem; }
.puente { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.puente a {
  display: block; text-decoration: none; color: var(--tinta);
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: .9rem 1rem; box-shadow: var(--sombra);
}
.puente a:hover { border-color: var(--verde-700); }
.puente strong { display: block; color: var(--azul-900); font-family: var(--fuente-titulo); font-size: 1.08rem; }
.puente span { font-size: .86rem; color: var(--tinta-suave); }
.destino { display: block; margin-top: .4rem; font-size: .74rem; font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--verde-700); }

.esquema { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.esquema__caja { border: 2px solid var(--azul-600); border-radius: var(--radio); padding: .9rem; background: var(--blanco); }
.esquema__caja--admin { border-color: var(--rojo); }
.esquema__caja--app { border-color: var(--verde-700); }
.esquema__caja code { font-size: .82rem; overflow-wrap: anywhere; }

/* ---------- Formularios ---------- */

.campo { display: grid; gap: .25rem; margin-bottom: .95rem; min-width: 0; }
.campo label, .campo legend { font-weight: 650; font-size: .95rem; }
.campo .ayuda { font-size: .84rem; color: var(--tinta-suave); margin: 0; }
.campo .opcional { font-weight: 400; color: var(--tinta-suave); font-size: .84rem; }
input[type="text"], input[type="search"], input[type="number"], input[type="url"], input[type="email"], input[type="tel"], input[type="password"], input[type="date"], select, textarea {
  font: inherit; color: var(--tinta); width: 100%; max-width: 100%;
  padding: .55rem .7rem; border: 1.5px solid #6f7f96; border-radius: var(--radio-s); background: var(--blanco);
}
textarea { min-height: 5.5rem; resize: vertical; }
input[disabled], select[disabled], textarea[disabled] { background: #eef1f5; color: var(--tinta-suave); border-style: dashed; }
fieldset { border: 0; padding: 0; margin: 0 0 .95rem; min-width: 0; }
.opciones { display: flex; flex-wrap: wrap; gap: .35rem .5rem; }
.opcion {
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 400;
  border: 1.5px solid var(--linea); border-radius: 999px; padding: .28rem .8rem; background: var(--blanco); cursor: pointer;
}
.opcion input { margin: 0; }
.casilla { display: flex; gap: .55rem; align-items: flex-start; margin-bottom: .6rem; font-weight: 400; }
.casilla input { margin-top: .3rem; flex: none; }
.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--rojo); background: var(--rojo-fondo); }
.error { color: var(--rojo); font-size: .86rem; font-weight: 650; margin: 0; }
.campos-2 { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

.pasos { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; counter-reset: paso; }
.pasos li {
  counter-increment: paso; font-size: .82rem; font-weight: 650;
  padding: .25rem .7rem; border-radius: 999px; background: var(--blanco);
  border: 1.5px solid var(--linea); color: var(--tinta-suave);
}
.pasos li::before { content: counter(paso) ". "; }
.pasos li[aria-current="step"] { background: var(--azul-900); border-color: var(--azul-900); color: var(--blanco); }
.pasos li.hecho { border-color: var(--verde-700); color: var(--verde-700); }
.progreso { height: .5rem; background: var(--linea); border-radius: 999px; overflow: hidden; margin-bottom: 1rem; }
.progreso > span { display: block; height: 100%; background: var(--verde-700); }

.subida {
  border: 2px dashed #6f7f96; border-radius: var(--radio); padding: 1.2rem; text-align: center;
  background: repeating-linear-gradient(135deg, #f7f9fc, #f7f9fc 12px, #eef2f7 12px, #eef2f7 24px);
  color: var(--tinta-suave);
}

/* ---------- Estados, historial y tablero ---------- */

.linea-estados { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.linea-estados li {
  border: 1.5px solid var(--linea); border-radius: var(--radio-s); padding: .45rem .6rem;
  font-size: .84rem; background: var(--blanco); color: var(--tinta-suave);
}
.linea-estados li.pasado { border-color: var(--verde-700); color: var(--verde-700); }
.linea-estados li.actual { background: var(--azul-900); border-color: var(--azul-900); color: var(--blanco); font-weight: 700; }
.linea-estados small { display: block; font-weight: 400; opacity: .85; }

.historial { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--linea); }
.historial li { position: relative; padding: 0 0 .8rem 1rem; }
.historial li::before {
  content: ""; position: absolute; left: -8px; top: .45rem; width: 13px; height: 13px;
  border-radius: 50%; background: var(--blanco); border: 3px solid var(--azul-600);
}
.historial time { display: block; font-size: .78rem; color: var(--tinta-suave); }

.tablero { display: grid; gap: .7rem; grid-template-columns: repeat(6, minmax(11rem, 1fr)); overflow-x: auto; padding-bottom: .5rem; }
.tablero__col { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: .6rem; min-width: 0; }
.tablero__col h2 { font-family: var(--fuente-texto); font-size: .86rem; display: flex; justify-content: space-between; gap: .4rem; }
.ficha-mini { border: 1px solid var(--linea); border-left: 4px solid var(--azul-600); border-radius: var(--radio-s); padding: .45rem .55rem; margin-bottom: .45rem; font-size: .84rem; background: var(--azul-050); }
.ficha-mini a { font-weight: 700; text-decoration: none; }
.ficha-mini .botones { margin-top: .35rem; gap: .25rem; }

/* ---------- Cifras del panel ---------- */

.cifras { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin-bottom: 1rem; }
.cifra { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: .8rem .9rem; }
.cifra b { display: block; font-family: var(--fuente-titulo); font-size: 2rem; line-height: 1.1; color: var(--azul-900); font-variant-numeric: tabular-nums; }
.cifra span { font-size: .84rem; color: var(--tinta-suave); }

/* ---------- Tabla de candidatos ---------- */

.filtros { display: grid; gap: 0 .8rem; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.filtros .campo { margin-bottom: .6rem; }
.filtros label { font-size: .82rem; }
.tabla-caja { overflow-x: auto; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { background: var(--azul-100); color: var(--azul-900); font-size: .8rem; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td a { font-weight: 700; }

/* ---------- Mensajería ---------- */

.buzon { display: grid; gap: 1rem; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); align-items: start; }
.conversaciones { list-style: none; margin: 0; padding: 0; }
.conversaciones li { margin: 0 0 .4rem; }
.conversaciones button {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: var(--blanco); border: 1.5px solid var(--linea); border-radius: var(--radio-s); padding: .5rem .65rem;
}
.conversaciones button[aria-current="true"] { border-color: var(--azul-900); background: var(--azul-100); }
.conversaciones .nombre { font-weight: 700; display: flex; justify-content: space-between; gap: .4rem; }
.conversaciones .resumen { display: block; font-size: .82rem; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contador { background: var(--rojo); color: var(--blanco); border-radius: 999px; font-size: .72rem; font-weight: 800; padding: 0 .45rem; min-width: 1.3rem; text-align: center; }

.hilo { display: grid; gap: .6rem; }
.mensaje { max-width: 34rem; border-radius: var(--radio); padding: .6rem .8rem; border: 1px solid var(--linea); background: var(--blanco); }
.mensaje__meta { font-size: .76rem; color: var(--tinta-suave); margin-bottom: .2rem; display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; }
.mensaje p { margin: 0; overflow-wrap: anywhere; }
.mensaje--usuario { justify-self: end; background: var(--verde-050); border-color: #b9e2cd; }
.mensaje--admin { justify-self: start; background: var(--azul-100); border-color: #c5d4e8; }
.mensaje--solicitud { justify-self: start; background: var(--ambar-fondo); border-color: #e2c56a; border-left: 5px solid #c9a94a; }
.mensaje--aviso { justify-self: center; max-width: 100%; background: #f0f0f0; border-style: dashed; font-size: .86rem; text-align: center; }
.mensaje--noleido { box-shadow: 0 0 0 3px rgba(168, 35, 28, .25); }
.leyenda { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; font-size: .8rem; }

.nota-interna { border: 1px solid #f0b9b4; border-left: 5px solid var(--rojo); background: var(--rojo-fondo); border-radius: var(--radio-s); padding: .5rem .7rem; margin-bottom: .5rem; font-size: .9rem; }
.nota-interna time { display: block; font-size: .76rem; color: var(--rojo); }

.mapa { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); counter-reset: pantalla; }
.mapa li { counter-increment: pantalla; }
.mapa a { display: block; text-decoration: none; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-s); padding: .55rem .7rem; }
.mapa a::before { content: counter(pantalla) ". "; font-weight: 800; color: var(--verde-700); }
.mapa small { display: block; color: var(--tinta-suave); }

/* ---------- Encargo 024 ---------- */

.tostada {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 50;
  width: min(100% - 2rem, 38rem); display: flex; gap: .8rem; align-items: center; justify-content: space-between;
  padding: .7rem .9rem; border-radius: var(--radio); box-shadow: 0 6px 28px rgba(10, 31, 60, .28);
  background: var(--azul-900); color: var(--blanco); border-left: 6px solid var(--verde-300);
}
.tostada p { margin: 0; }
.tostada--error { border-left-color: #ff9d96; }
.tostada--info { border-left-color: #9cc2f0; }
.tostada .boton { flex: none; }

.prioridad--alta { background: var(--rojo-fondo); color: var(--rojo); }
.prioridad--media { background: var(--ambar-fondo); color: var(--ambar-texto); }
.prioridad--baja { background: #eceff3; color: #45526a; }
.cuenta--gratuito { background: var(--verde-050); color: var(--verde-700); }
.cuenta--orientacion { background: var(--azul-100); color: var(--azul-800); }
.cuenta--cliente { background: #ece9f7; color: #43327a; }
.estado--ninguna { background: var(--blanco); color: #45526a; border: 1px dashed #6f7f96; }
.tipo--usuario { background: var(--blanco); color: var(--verde-700); border: 1px solid #b9e2cd; }
.tipo--admin { background: var(--blanco); color: var(--azul-800); border: 1px solid #c5d4e8; }
.tipo--solicitud { background: var(--ambar-texto); color: var(--blanco); }
.tipo--aviso { background: #dcdcdc; color: #3b3b3b; }
.indicadores { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.eleccion { border-top: 6px solid var(--verde-700); }
.eleccion--b { border-top-color: var(--azul-600); }
.espera { border-left: 5px solid var(--azul-600); background: var(--azul-100); border-radius: var(--radio-s); padding: .6rem .8rem; margin: .8rem 0; }
.espera strong { color: var(--azul-900); }
caption { text-align: left; padding: .5rem .7rem; font-weight: 700; color: var(--azul-900); }
tbody th { background: var(--azul-050); white-space: normal; font-size: .9rem; }
.tabla-caja:focus-visible { outline-offset: -3px; }
.maqueta { border: 2px dashed #6f7f96; background: repeating-linear-gradient(135deg, #fff, #fff 14px, #f5f8fc 14px, #f5f8fc 28px); }

/* ---------- Móvil ---------- */

@media (max-width: 760px) {
  .dos-columnas, .buzon { grid-template-columns: minmax(0, 1fr); }
  .datos { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .datos dt { margin-top: .5rem; }
  .menu { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .2rem; }
  .menu a { white-space: nowrap; }
  .demo__url { flex-basis: 100%; order: 3; }
  .mensaje { max-width: 100%; }
  .demo__fila { gap: .25rem .5rem; }
  .demo__roles button, .demo__mapa { padding: .3rem .65rem; }
  .filtros { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
  .tostada { flex-direction: column; align-items: stretch; }
  main { padding-top: 1rem; }
  .heroe { margin-top: -1rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .boton, .puente a { transition: background-color .15s, border-color .15s, color .15s; }
}

/* ---------- Encargo 026: utilidades para no usar estilos en línea (lo exige la CSP) ---------- */
.sin-margen-superior { margin-top: 0; }
.margen-superior { margin-top: 1rem; }
.formulario p { margin: 0 0 .95rem; }
.formulario label { display: block; font-weight: 650; font-size: .95rem; margin-bottom: .25rem; }
.formulario input[type="checkbox"] { margin-right: .5rem; }
.formulario .helptext, .formulario .ayuda { display: block; font-size: .84rem; color: var(--tinta-suave); }
.formulario .errorlist { list-style: none; margin: 0 0 .3rem; padding: 0; color: var(--rojo); font-weight: 650; font-size: .86rem; }
.mensajes { list-style: none; margin: 0 0 1rem; padding: 0; }
.demo--desarrollo .demo__aviso { letter-spacing: .02em; }

/* ---------- Encargo 034: formularios de la biblioteca de autenticación ----------
   Sus plantillas generan <button> y casillas sin las clases del proyecto. */
.formulario button:not(.boton) {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 650; cursor: pointer; line-height: 1.2;
  padding: .6rem 1.05rem; margin: .2rem .5rem .4rem 0; border-radius: var(--radio-s);
  border: 1.5px solid transparent; background: var(--verde-700); color: var(--blanco);
}
.formulario button:not(.boton):hover { background: #0f5c3c; }
.formulario button[form]:not(.boton), .formulario button[name="action_send"], .formulario button[name="action_primary"] {
  background: var(--blanco); color: var(--azul-900); border-color: var(--azul-900);
}
.formulario button[form]:not(.boton):hover, .formulario button[name="action_send"]:hover, .formulario button[name="action_primary"]:hover { background: var(--azul-900); color: var(--blanco); }
.formulario button[name="action_remove"] { background: var(--blanco); color: var(--rojo); border-color: var(--rojo); }
.formulario button[name="action_remove"]:hover { background: var(--rojo); color: var(--blanco); }
/* La casilla, delante de su texto y en la misma línea */
.formulario p:has(> input[type="checkbox"]) { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: flex-start; gap: .55rem; }
.formulario p:has(> input[type="checkbox"]) label { font-weight: 400; margin: 0; }
.formulario p:has(> input[type="checkbox"]) input { margin: .3rem 0 0; flex: none; }
.formulario .helptext ul { margin: .2rem 0 0; }
.formulario textarea[readonly] { font-family: ui-monospace, Menlo, Consolas, monospace; }

/* ---------- Encargos 035 y 036: pantallas estrechas ----------
   Visto en Chromium a 320, 375 y 390 px: el menú se desplazaba de lado y «Salir» quedaba
   oculto o cortado. Ahora el menú salta de línea y todo queda a la vista.
   Tablas: en móvil ya se desplazan de lado dentro de su caja, así que sus celdas no se
   parten (filas compactas) y un texto avisa del desplazamiento. Por encima de 760 px no
   cambia nada: la tabla sigue ajustándose al ancho disponible. */
.solo-movil { display: none; }
@media (max-width: 760px) {
  .menu { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; }
  .tabla-caja td, .tabla-caja tbody th { white-space: nowrap; }
  .solo-movil { display: block; }
}
/* Visto en Chromium con un alias de 40 caracteres sin espacios: el saludo no cabía y, en
   móvil, el navegador encogía la página entera. Ahora el título se parte. */
h1, h2 { overflow-wrap: anywhere; }

/* ---------- Encargo 038: solicitudes, Mi ruta y CRM ---------- */
.progreso__50 { width: 50%; }
.progreso__100 { width: 100%; }
.estado--nueva { background: var(--azul-100); color: var(--azul-800); }
.estado--en_revision { background: #e6e9fb; color: #2d3a94; }
.estado--falta_informacion { background: var(--ambar-fondo); color: var(--ambar-texto); }
.estado--orientacion_preparada { background: #ece9f7; color: #43327a; }
.estado--respondida { background: var(--verde-050); color: var(--verde-700); }
.estado--cerrada { background: #e4e4e4; color: #3b3b3b; }
.tareas { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.tarea { display: flex; gap: .7rem; align-items: flex-start; }
.tarea form { flex: none; }
.tarea .boton { min-width: 4.6rem; }
.tarea--hecha > span { color: var(--tinta-suave); text-decoration: line-through; }
form.tarea { margin-bottom: .55rem; }
.subnav { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .2rem; }
.subnav a { padding: .35rem .8rem; border-radius: 999px; border: 1.5px solid var(--azul-900); color: var(--azul-900); text-decoration: none; font-weight: 600; font-size: .9rem; background: var(--blanco); }
.subnav a[aria-current="true"] { background: var(--azul-900); color: var(--blanco); }
.cifra a { text-decoration: none; color: inherit; display: block; }
.cifra a:hover b { color: var(--verde-700); }
.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li { padding: .45rem 0; border-bottom: 1px solid var(--linea); }
.lista-simple li:last-child { border-bottom: 0; }
.acciones-ficha form { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linea); }
.acciones-ficha form:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.acciones-ficha .botones { margin-top: .4rem; }
.interno { border-top: 6px solid var(--rojo); }
.visible-usuario { border-top: 6px solid var(--verde-700); }
.sugerencia { border: 1.5px dashed #6f7f96; border-radius: var(--radio-s); padding: .6rem .8rem; background: var(--azul-050); font-size: .93rem; }
.sugerencia > :last-child { margin-bottom: 0; }
.filtros--crm { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.filtros--crm p { margin: 0 0 .6rem; }
.mensaje p:not(:last-child) { margin-bottom: .6em; }
td .etiqueta { white-space: nowrap; }
td, tbody th { overflow-wrap: normal; }
.tabla-caja tbody th a, .tabla-caja td time { white-space: nowrap; }

/* ---------- Encargo 040 (050: en cualquier formulario, también el de registro): trampa contra envíos automáticos ---------- */
p:has(> input[name="sitio_web"]) { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Encargo 041: selector de idioma ---------- */
.idiomas { display: flex; gap: .15rem; align-items: center; margin-left: auto; }
.idiomas a { padding: .3rem .5rem; border-radius: var(--radio-s); font-size: .84rem; font-weight: 700; text-decoration: none; color: var(--tinta-suave); border: 1.5px solid transparent; }
.idiomas a:hover { background: var(--azul-100); color: var(--azul-900); }
.idiomas a[aria-current="true"] { color: var(--azul-900); border-color: var(--azul-900); }
.cabecera--admin .idiomas a { color: #dfe8f3; }
@media (min-width: 761px) { .cabecera__fila .idiomas { order: 3; margin-left: .4rem; } .cabecera__fila .menu { margin-left: auto; } }

/* ---------------------------------------------------------------- Comunidad (encargo 044) */
.lista-temas { list-style: none; padding: 0; display: grid; gap: .75rem; }
.tema h2 { margin: 0 0 .25rem; }
.autor { display: inline-flex; align-items: center; gap: .35rem; }
.avatar { display: inline-block; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid currentColor; vertical-align: middle; flex: none; }
.avatar--tulipan { background: #d9485f; } .avatar--bicicleta { background: #2f7d5b; } .avatar--molino { background: #3b6fb6; } .avatar--barco { background: #1d4f73; }
.avatar--canal { background: #4aa3b5; } .avatar--queso { background: #e2b33c; } .avatar--sol { background: #f08a24; } .avatar--estrella { background: #7b5cb8; }
h1 .avatar { width: 2rem; height: 2rem; }
.texto-usuario { overflow-wrap: anywhere; }
.texto-usuario p { margin: 0 0 .75rem; }
.respuesta--util { border-left: 4px solid var(--verde, #1d6f4f); }