/* Paleta y tipografia "Retro tecnico" (Paleta colores/propuesta-2-retro-tecnico.html,
 * elegida el 19-08-2026), aplicadas sobre la estructura utilitaria de F1. El
 * rediseno completo de componentes sigue siendo F7; esta hoja ya usa sus tokens.
 *
 * Reglas que esta hoja NO negocia, vengan de F1 o del brief:
 * - foco siempre visible;
 * - ningun estado se transmite solo por color: el texto lo dice y la FORMA del
 *   borde lo refuerza (doble = elegida, punteado = sin elegir, cortado = cerrado);
 * - --accent (rojo ladrillo) marca EXCLUSIVAMENTE la decision de la dupla y el
 *   foco de teclado; nada decorativo lo usa;
 * - sin fuentes remotas ni recursos de terceros (§12.6): las familias viven en
 *   /estaticos/fuentes/ via fuentes.css.
 */

:root {
  --paper: #e6efe9;     /* fondo de la aplicacion: menta grisacea */
  --surface: #ffffff;   /* tarjetas, paneles, controles */
  --ink: #12262b;       /* texto principal: tinta verde-petroleo */
  --ink-soft: #45595d;  /* texto secundario y metadatos */
  --rule: #c3d3ca;      /* lineas y bordes decorativos; nunca portan informacion */
  --primary: #0b5b4e;   /* estructura: botones, estados en regla, enlaces */
  --accent: #a62b17;    /* SOLO la decision de la dupla y el foco de teclado */
  --terciario: #9a6b10; /* ambar: etiquetas de seccion >= 18 px; no texto de lectura */
  --danger: #8c0f23;    /* errores de validacion; carmesi, distinto del acento */
  --warn: #8a6d1f;      /* advertencias */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Trebuchet MS", Verdana, sans-serif;
  --mono: "Roboto Mono", "Courier New", monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0 0 3rem;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
}

main,
.barra,
.aviso-fase,
.mensajes,
.pie {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1rem;
}

h1,
h2 {
  font-family: var(--serif);
  font-weight: 600;
}

a {
  color: var(--primary);
}

/* Foco visible siempre, y en el acento como pide el brief: quien navega con
 * teclado no puede perder de vista donde esta parado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Oculta a la vista sin sacar del arbol de accesibilidad. `display: none` y
 * `visibility: hidden` lo esconderian tambien del lector de pantalla, que es
 * justo lo contrario de lo que se busca aca. */
.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Contenedores que reciben el foco por programa y no por tabulacion
 * (`tabindex="-1"`): el resumen de errores y el bloque de mensajes. No son
 * controles, asi que no llevan el contorno de un control cuando el foco les
 * llega solo; si la persona llega ahi navegando, `:focus-visible` lo dibuja
 * igual. */
[tabindex="-1"]:focus {
  outline: none;
}

[tabindex="-1"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.salto {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  padding: 0.5rem 1rem;
  border: 2px solid var(--accent);
}

.salto:focus {
  left: 0;
  z-index: 10;
}

.barra {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}

.marca-grupo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.marca-simbolo {
  flex: none;
}

.marca {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

.marca-sub {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.navegacion a {
  margin-right: 1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.35rem 0.1rem;
  border-bottom: 2px solid transparent;
}

.navegacion a:hover {
  border-bottom-color: var(--primary);
}

.identidad {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  align-items: center;
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 3px;
  padding: 0.5rem 0.75rem;
}

.identidad form {
  margin: 0;
}

.identidad button {
  padding: 0.2rem 0.7rem;
  border-width: 1px;
}

.identidad__estado {
  margin: 0;
  font-size: 0.9rem;
}

.identidad__clave {
  font-size: 0.85rem;
}

/* Aviso de advertencia persistente. Borde solido con canto izquierdo: el
 * discontinuo queda reservado al estado «cerrado» (regla del sistema). */
.aviso-fase {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--warn);
  border-left: 4px solid var(--warn);
  border-radius: 3px;
  color: var(--warn);
  background: var(--surface);
}

/* El bloque `.mensajes` no se pinta cuando no hay nada que decir: la plantilla
 * no lo emite. No hace falta esconderlo vacio por CSS. */
.mensaje {
  border-left: 6px solid var(--ink-soft);
  padding: 0.5rem 0.75rem;
  background: var(--surface);
}

.mensaje--ok {
  border-left-color: var(--primary);
}

.mensaje--error {
  border-left-color: var(--danger);
}

.aviso {
  border: 2px solid var(--ink-soft);
  padding: 0.5rem 0.75rem;
  margin: 1rem 0;
  background: var(--surface);
  border-radius: 3px;
}

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

.aviso--advertencia {
  border-color: var(--warn);
  color: var(--warn);
}

/* Avisos de cobertura (ADR 0013). Deliberadamente mas suave que
   `.aviso--advertencia`: no dice que algo este mal, dice que hay una condicion
   del curso que conviene mirar antes de decidir. Si se viera igual de fuerte que
   «sin fundamentación validada», la dupla trataria las dos cosas como el mismo
   problema y aprenderia a ignorar las dos. */
.aviso--nota {
  border-color: currentColor;
  opacity: 0.9;
}

h1,
h2,
h3 {
  line-height: 1.25;
}

.explicacion,
.detalle,
.ayuda {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.vacio {
  font-style: italic;
  color: var(--ink-soft);
}

/* Marca de la guia de codocencia del establecimiento (ADR 0012). Deliberadamente
   sobria: no usa el color de acento, que esta reservado para marcar la decision
   de la dupla. Si la sugerencia de la guia se viera mas fuerte que la eleccion,
   la herramienta estaria decidiendo por ellas. */
.detalle--guia {
  border-left: 3px solid currentColor;
  padding-left: 0.75rem;
  opacity: 0.85;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.5rem 0 1.5rem;
  background: var(--surface);
}

caption {
  text-align: left;
  font-weight: 700;
  padding: 0.4rem 0;
}

th,
td {
  border: 1px solid var(--rule);
  padding: 0.4rem 0.6rem;
  text-align: left;
  vertical-align: top;
}

/* Encabezados de tabla como etiquetas tecnicas: mono, mayusculas, sin gritar. */
thead th {
  background: var(--paper);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* El estado nunca viaja solo en el color: el texto lo dice, y el borde lo
 * refuerza para quien no distingue tonos. */
.estado {
  display: inline-block;
  border: 1px solid var(--ink-soft);
  border-radius: 2px;
  padding: 0 0.35rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 500;
}

.estado--con-datos {
  border-color: var(--primary);
  color: var(--primary);
}

/* Grosor doble: lo pendiente se distingue tambien en escala de grises. */
.estado--sin-datos {
  border-color: var(--warn);
  border-width: 2px;
  color: var(--warn);
}

.estado--cerrado {
  border-style: dashed;
}

fieldset {
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 3px;
  margin: 1rem 0;
  padding: 0.75rem 1rem 1rem;
}

legend {
  font-weight: 700;
  padding: 0 0.4rem;
}

.campo {
  margin: 0.75rem 0;
  max-width: 34rem;
}

.campo label {
  display: block;
  font-weight: 600;
}

.campo--casilla {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.campo--casilla label {
  font-weight: 400;
}

/* Borde de los controles en --ink-soft y no en --rule: un control tiene que
 * distinguirse de su fondo con 3:1 (WCAG 1.4.11) y la linea decorativa no llega. */
input[type="number"],
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  font: inherit;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--ink-soft);
  border-radius: 2px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  max-width: 24rem;
}

textarea {
  max-width: 34rem;
}

/* Boton primario relleno, como en la propuesta: el acento no se gasta aca. */
button {
  font: inherit;
  font-weight: 500;
  padding: 0.4rem 1rem;
  border: 1px solid var(--primary);
  border-radius: 2px;
  background: var(--primary);
  color: var(--surface);
  cursor: pointer;
}

.campo--con-error {
  border-left: 6px solid var(--danger);
  padding-left: 0.6rem;
}

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

.error ul {
  margin: 0.2rem 0 0;
  padding-left: 1.2rem;
}

.contador {
  border: 2px solid var(--ink-soft);
  border-radius: 2px;
  padding: 0.5rem 0.75rem;
  font-family: var(--mono);
  font-weight: 500;
  background: var(--surface);
}

/* El exceso ya se anuncia con palabras ("Atencion, hay un error: ..."); esto
 * solo lo refuerza. Nunca es la unica senal. */
.contador--excede {
  border-color: var(--danger);
  border-width: 3px;
  color: var(--danger);
}

.tarjeta {
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--surface);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}

.notas {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.5rem 0.75rem;
}

.pie {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* --- Bocetos (F2) ---------------------------------------------------------
 *
 * Mismo criterio que el resto de la hoja: ningun estado se transmite solo por
 * color. La marca de "sin fundamentacion validada" ya lo dice con palabras y
 * ademas hereda el borde de `.aviso--advertencia`; esto solo la separa del
 * contenido del modulo, que sigue visible entero a proposito (§4.3). */

.modulo {
  border-top: 1px solid var(--rule);
  padding-top: 0.5rem;
  margin-top: 2rem;
}

.sin-validar {
  border-style: dashed;
}

.espera {
  border: 2px solid var(--ink-soft);
  border-radius: 3px;
  padding: 0.5rem 0.75rem;
  margin: 1rem 0;
  background: var(--surface);
}

.espera__estado {
  font-weight: 600;
  margin: 0 0 0.4rem;
}

/* La cifra de poblacion viene anclada desde el snapshot del contexto y se
 * imprime tal cual (§4.2). Se destaca porque es el dato que la dupla va a
 * citar, no porque la pagina la haya calculado: la pagina no calcula ninguna. */
.cifra {
  font-weight: 700;
  margin: 0.4rem 0;
}

/* El texto que la dupla lee con calma va en serif, como pide el brief. */
.fundamentacion {
  border-left: 4px solid var(--rule);
  padding-left: 0.6rem;
  margin: 0.4rem 0;
  font-family: var(--serif);
  line-height: 1.65;
}

.ficha-modulo {
  margin: 0.5rem 0;
}

.ficha-modulo dt {
  font-weight: 700;
}

.ficha-modulo dd {
  margin: 0 0 0.5rem;
}

.lista-barreras,
.lista-opciones {
  padding-left: 1.2rem;
}

.lista-barreras h3,
.lista-opciones h3 {
  margin-top: 0;
}

/* --- Decision y edicion (F3) ----------------------------------------------
 *
 * Regla dura de esta hoja: ningun estado se transmite solo por color. Cada
 * marca de abajo dice con palabras lo que pasa —"Elegida por la dupla", "Sin
 * elegir", "Modulo cerrado", "Editada por la dupla"— y ademas cambia la FORMA
 * del borde, que es lo que se ve en escala de grises, con daltonismo o en una
 * impresion: doble para lo elegido, punteado para lo que no se eligio, cortado
 * para lo cerrado. El color no agrega informacion nueva en ninguna de las
 * tres. */

.marca {
  margin: 0.4rem 0;
}

/* Borde doble: la opcion que la dupla eligio. Es EL lugar del acento. */
.estado--elegida {
  border-style: double;
  border-width: 4px;
  border-color: var(--accent);
  color: var(--accent);
}

.estado--sin-elegir {
  border-style: dotted;
}

/* Intervenir una opcion es merito y no demerito (§6.3), asi que la marca se ve
 * como las demas y no como una advertencia. */
.estado--intervenida {
  border-style: solid;
  border-width: 2px;
}

/* La tarjeta elegida se distingue tambien de lejos, sin leer la marca: la
 * barra lateral sigue siendo grosor ademas de color, para sobrevivir a la
 * escala de grises. El acento aca es la decision, su unico uso legitimo. */
.tarjeta--elegida {
  border-left: 8px solid var(--accent);
}

.intervenida {
  border-top: 1px dashed var(--rule);
  margin-top: 0.75rem;
  padding-top: 0.5rem;
}

.edicion {
  border-top: 1px solid var(--rule);
  margin-top: 1.5rem;
  padding-top: 0.5rem;
}

.edicion details {
  margin: 0.5rem 0;
}

.edicion summary {
  cursor: pointer;
  font-weight: 600;
}

/* El aviso del sello no se achica ni se manda al pie: hasta que exista el
 * registro de auditoria completo de F6, decirlo en letra chica seria la misma
 * promesa incumplida que se esta evitando. */
.sello p {
  font-size: 1rem;
}

/* --- Ingreso y panel de personas (F6) ------------------------------------ */

.formulario--angosto {
  max-width: 26rem;
}

.credencial {
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--surface);
  padding: 1rem 1.25rem;
  max-width: 26rem;
}

.credencial dt {
  font-weight: 600;
  margin-top: 0.5rem;
}

.credencial dd {
  margin: 0.15rem 0 0;
}

.credencial__clave {
  font-family: var(--mono);
  font-size: 1.6rem;
  letter-spacing: 0.06em;
}

.accion-en-linea {
  display: inline-block;
  margin: 0 0.5rem 0.25rem 0;
}

/* Compactos y secundarios: dentro de una tabla, una fila de botones rellenos
 * pesaria mas que los datos. */
.accion-en-linea button,
.identidad button {
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--primary);
  background: transparent;
  color: var(--primary);
  font-size: 0.9rem;
}

a.boton {
  display: inline-block;
  padding: 0.4rem 1rem;
  border: 1px solid var(--primary);
  border-radius: 2px;
  color: var(--primary);
  text-decoration: none;
}

/* --- Cierre operativo (módulos 4 y 6) ---------------------------------------
   Sección nueva, solo agregada al final: la línea de tiempo del reparto
   operativo y el subtítulo de referencia de cada módulo (P1.2). No cambia
   ninguna regla anterior. */

.referencia-modulo {
  font-style: italic;
}

.linea-tiempo {
  list-style: none;
  padding-left: 0;
}

.linea-tiempo__momento {
  margin-bottom: 1rem;
}

.linea-tiempo__momento h3 {
  margin-top: 0;
}

.linea-tiempo__carriles {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.linea-tiempo__carril {
  flex: 1 1 16rem;
  border-left: 3px solid var(--rule);
  padding-left: 0.75rem;
}

.linea-tiempo__carril h4 {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
}