/* ===========================================================================
   Bitacora de Ascenso · sistema de componentes
   Depende de /css/tokens.css: aqui no se define ningun color ni ninguna fuente
   nueva, solo se consumen las variables del sistema de diseno.

   Orden del archivo
     01 base y reinicio          09 bloque de campamento
     02 utilidades               10 tarjeta de bitacora y campos
     03 tipografia               11 semaforo
     04 controles                12 narrativa y adjuntos
     05 lockup de co-branding    13 modal de lectura
     06 barra superior           14 administracion
     07 riel de rutas            15 banda de ayuda, pie y avisos
     08 portada y cifras         16 acceso y responsive
   =========================================================================== */

/* --- 01 · Base: caja predecible, cero margenes heredados, tipo del cuerpo. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* --- 01 · El atributo hidden manda siempre, incluso sobre display de flex. */
[hidden] {
  display: none !important;
}

img,
svg {
  max-width: 100%;
}

svg {
  display: block;
}

/* --- 01 · Los iconos son de trazo 1.5 en caja de 24, dibujados en el HTML. */
.icono {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icono--sm {
  width: 16px;
  height: 16px;
}

/* --- 01 · Foco visible de 2 px con desplazamiento, en todo lo interactivo. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* --- 02 · Utilidades: salto al contenido, texto para lectores, impresion. */
.salto {
  position: absolute;
  left: var(--sp-2xs);
  top: var(--sp-2xs);
  z-index: 60;
  transform: translateY(-200%);
  padding: var(--sp-2xs) var(--sp-sm);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease);
}

.salto:focus {
  transform: translateY(0);
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.solo-impresion {
  display: none;
}

/* --- 03 · Tipografia: display Fraunces, cuerpo Hanken, etiquetas mono. */
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
}

h1 {
  font-size: var(--fs-display-l);
}

h2 {
  font-size: var(--fs-display-m);
}

h3 {
  font-size: var(--fs-h3);
}

p {
  margin: 0;
}

a {
  color: var(--accent-ink);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--ink);
}

/* --- 03 · Etiqueta mono en mayusculas: cifras, rotulos y estados cortos. */
.eyebrow,
.etiqueta {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- 03 · La pastilla se reserva a las etiquetas mono, nunca a los botones. */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  background: var(--surface-2);
  white-space: nowrap;
}

.etiqueta--verde {
  color: var(--verde);
  background: var(--verde-wash);
  border-color: var(--verde);
}

.etiqueta--ambar {
  color: var(--ambar);
  background: var(--ambar-wash);
  border-color: var(--ambar);
}

.etiqueta--rojo {
  color: var(--rojo);
  background: var(--rojo-wash);
  border-color: var(--rojo);
}

.etiqueta--acento {
  color: var(--accent-ink);
  background: var(--accent-wash);
  border-color: var(--accent);
}

/* --- 03 · Teclas del bloque de atajos. */
kbd {
  display: inline-block;
  min-width: 1.75rem;
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  text-align: center;
  color: var(--ink-soft);
}

/* --- 04 · Boton: rectangulo casi recto, area de toque de 44 px, sin sombra. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2xs);
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.5rem var(--sp-sm);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.boton:hover {
  background: var(--surface-2);
  border-color: var(--accent);
}

.boton:active {
  background: var(--surface-3);
}

.boton--primario {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: var(--on-accent);
}

.boton--primario:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-accent);
}

.boton--fantasma {
  background: transparent;
  border-color: transparent;
  color: var(--ink-soft);
}

.boton--fantasma:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--ink);
}

.boton--peligro {
  color: var(--rojo);
  border-color: var(--rojo);
  background: var(--surface);
}

.boton--peligro:hover {
  background: var(--rojo-wash);
  border-color: var(--rojo);
}

/* --- 04 · Boton de solo icono: cuadrado de 44 px, el nombre va en aria-label. */
.boton--icono {
  padding: 0;
  width: 2.75rem;
  height: 2.75rem;
}

.boton--sm {
  min-height: 2.25rem;
  padding: 0.25rem 0.625rem;
  font-size: var(--fs-eyebrow);
}

/* --- 04 · Deshabilitado: sin puntero, contraste bajo pero legible. */
.boton:disabled,
.boton[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--ink-faint);
}

.boton:disabled:hover,
.boton[aria-disabled="true"]:hover {
  background: var(--surface-2);
  border-color: var(--border);
}

/* --- 04 · Campo de formulario: rotulo mono arriba, control de 44 px de alto. */
.campo {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

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

.campo__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.campo__ayuda {
  font-size: var(--fs-small);
  color: var(--ink-faint);
}

.campo__error {
  font-size: var(--fs-small);
  color: var(--rojo);
  font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.45;
  transition:
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}

textarea {
  min-height: 6rem;
  resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--accent);
}

input:disabled,
select:disabled,
textarea:disabled,
input[readonly],
textarea[readonly] {
  background: var(--surface-2);
  color: var(--ink-faint);
  cursor: not-allowed;
  border-color: var(--border);
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-faint);
  opacity: 1;
}

/* --- 04 · Campo con cifra corta: se compone en mono para leerse de un vistazo. */
.campo__control--cifra {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

/* --- 05 · Lockup de co-branding: Jaime, linea de 1 px, la A de AXENOR. */
.lockup {
  --lockup-h: 1.375rem;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
}

/* --- 05 · La marca de Jaime se pinta con mascara para heredar el color de texto. */
.lockup__jaime {
  display: block;
  height: var(--lockup-h);
  width: calc(var(--lockup-h) * 1.8164);
  background-color: currentColor;
  -webkit-mask: url("/brand/jaime-mark.svg") center / contain no-repeat;
  mask: url("/brand/jaime-mark.svg") center / contain no-repeat;
}

/* --- 05 · Separacion igual a la altura del simbolo a cada lado de la linea. */
.lockup__linea {
  display: block;
  flex: none;
  width: 1px;
  height: calc(var(--lockup-h) * 1.6);
  margin-inline: var(--lockup-h);
  background: var(--border-strong);
}

.lockup__axenor {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.lockup__a {
  height: calc(var(--lockup-h) * 1.55);
  width: auto;
}

.lockup__texto {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* --- 05 · Version de navegacion: marca de Jaime mas el nombre del producto. */
.lockup--nav {
  --lockup-h: 1.125rem;
  gap: var(--sp-2xs);
}

.lockup__producto {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}

/* --- 06 · Barra superior: tres zonas, se queda fija y nunca tapa el foco. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  min-height: var(--topbar-h);
  padding: var(--sp-2xs) var(--gutter);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}

.topbar__marca {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex: 1 1 16rem;
  min-width: 0;
}

.topbar__espacio {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-left: 1px solid var(--border);
  padding-left: var(--sp-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 06 · Cronometro: etapa, reloj en mono tabular y tres mandos de 44 px. */
.cronometro {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  padding: 0.25rem 0.25rem 0.25rem var(--sp-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.cronometro__etapa {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cronometro__reloj {
  font-family: var(--font-mono);
  font-size: var(--fs-lead);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  min-width: 6ch;
  text-align: center;
}

/* --- 06 · Cuando quedan menos de dos minutos el reloj se marca en rojo. */
.cronometro__reloj[data-estado="urgente"],
.cronometro__reloj--urgente {
  color: var(--rojo);
}

.topbar__acciones {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  flex-wrap: wrap;
  margin-left: auto;
}

/* --- 06 · Ficha de la persona conectada: nombre y rol, sin fotografia. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 16ch;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-size: var(--fs-small);
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 06 · Indicador de guardado: punto mas texto, nunca solo color. */
.save-state {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 9ch;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.save-state::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--ink-faint);
  flex: none;
}

.save-state[data-estado="guardando"]::before,
.save-state--guardando::before {
  background: var(--ambar);
}

.save-state[data-estado="guardado"]::before,
.save-state--guardado::before {
  background: var(--verde);
}

.save-state[data-estado="error"]::before,
.save-state--error::before,
.save-state[data-estado="offline"]::before,
.save-state--offline::before {
  background: var(--rojo);
}

.save-state[data-estado="error"],
.save-state--error,
.save-state[data-estado="offline"],
.save-state--offline {
  color: var(--rojo);
}

/* --- 06 · Aviso sin conexion: banda fija bajo la barra, con icono y texto. */
.banner-offline {
  position: sticky;
  top: var(--topbar-h);
  z-index: 35;
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  padding: var(--sp-2xs) var(--gutter);
  background: var(--ambar-wash);
  color: var(--ambar);
  border-bottom: 1px solid var(--ambar);
  font-size: var(--fs-small);
  font-weight: 600;
}

/* --- 07 · Estructura general: riel a la izquierda, contenido a la derecha. */
.disposicion {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: var(--sp-lg);
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-lg) var(--gutter) var(--sp-xl);
  align-items: start;
}

/* --- 07 · Variante sin riel: administracion usa una sola columna de ancho. */
.disposicion--simple {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--container);
}

.contenido {
  min-width: 0;
}

.contenido:focus {
  outline: none;
}

/* --- 07 · Riel de rutas: linea de progreso continua y un punto por ruta. */
.rail {
  position: sticky;
  top: calc(var(--topbar-h) + var(--sp-sm));
  padding: var(--sp-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.rail__titulo {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--sp-xs);
}

.rail__lista {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--sp-md);
}

/* --- 07 · La linea vertical de 1 px que hilvana todos los puntos del riel. */
.rail__lista::before {
  content: "";
  position: absolute;
  left: 0.4375rem;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 1px;
  background: var(--border-strong);
}

.rail__item {
  position: relative;
}

.rail__enlace {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.5rem 0.5rem 0;
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}

.rail__enlace:hover {
  color: var(--ink);
}

/* --- 07 · Punto del riel: vacio, medio o lleno segun el avance de la ruta. */
.rail__punto {
  position: absolute;
  left: calc(var(--sp-md) * -1 + 0.1875rem);
  top: 1.0625rem;
  width: 9px;
  height: 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
}

.rail__item[data-estado="verde"] .rail__punto,
.rail__item--verde .rail__punto {
  background: var(--verde);
  border-color: var(--verde);
}

.rail__item[data-estado="parcial"] .rail__punto,
.rail__item--parcial .rail__punto {
  background: var(--ambar);
  border-color: var(--ambar);
}

.rail__item[data-estado="rojo"] .rail__punto,
.rail__item--rojo .rail__punto {
  background: var(--rojo);
  border-color: var(--rojo);
}

.rail__item[aria-current="true"] .rail__enlace,
.rail__item--activa .rail__enlace {
  color: var(--ink);
  font-weight: 600;
}

.rail__num {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  flex: none;
}

.rail__nombre {
  min-width: 0;
}

.rail__cuenta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  flex: none;
}

/* --- 08 · Portada del espacio: rotulo, titular en display y texto de apoyo. */
.hero {
  padding-bottom: var(--sp-md);
  border-bottom: 1px solid var(--border);
}

.hero__titulo {
  margin-top: var(--sp-2xs);
  max-width: 20ch;
}

.hero__texto {
  margin-top: var(--sp-sm);
  max-width: 62ch;
  font-size: var(--fs-lead);
  color: var(--ink-soft);
}

/* --- 08 · Tres cifras de cabecera: total, rutas en verde y rutas en riesgo. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-sm);
  margin: var(--sp-md) 0 0;
}

.stat {
  padding: var(--sp-xs) var(--sp-sm);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.stat dt {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.stat dd {
  margin: 0.25rem 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.stat--verde {
  border-left-color: var(--verde);
}

.stat--verde dd {
  color: var(--verde);
}

.stat--rojo {
  border-left-color: var(--rojo);
}

.stat--rojo dd {
  color: var(--rojo);
}

/* --- 09 · Tarjeta de ruta plegable: cabecera pulsable y cuerpo desplegable. */
.rutas {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  margin-top: var(--sp-md);
}

.ruta {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.ruta__cabecera {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  width: 100%;
  min-height: 3.5rem;
  padding: var(--sp-xs) var(--sp-sm);
  border: 0;
  border-left: 3px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur-fast) var(--ease);
}

.ruta__cabecera::-webkit-details-marker {
  display: none;
}

.ruta__cabecera:hover {
  background: var(--surface-3);
}

.ruta__num {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  flex: none;
}

.ruta__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  min-width: 0;
}

.ruta__meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  flex: none;
}

/* --- 09 · La flecha gira 90 grados cuando la ruta esta desplegada. */
.ruta__chevron {
  transition: transform var(--dur) var(--ease);
}

.ruta[open] .ruta__chevron,
.ruta--abierta .ruta__chevron,
.ruta__cabecera[aria-expanded="true"] .ruta__chevron {
  transform: rotate(90deg);
}

.ruta[data-estado="verde"] > .ruta__cabecera,
.ruta--verde > .ruta__cabecera {
  border-left-color: var(--verde);
}

.ruta[data-estado="parcial"] > .ruta__cabecera,
.ruta--parcial > .ruta__cabecera {
  border-left-color: var(--ambar);
}

.ruta[data-estado="rojo"] > .ruta__cabecera,
.ruta--rojo > .ruta__cabecera {
  border-left-color: var(--rojo);
}

.ruta__cuerpo {
  padding: var(--sp-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

/* --- 09 · Meta a 2030 y perspectiva: contexto fijo de la ruta, en cursiva. */
.ruta__contexto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-xs) var(--sp-sm);
  padding: var(--sp-xs) var(--sp-sm);
  border-left: 1px solid var(--accent);
  background: var(--accent-wash);
  border-radius: var(--radius);
}

.ruta__contexto dt {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.ruta__contexto dd {
  margin: 0.25rem 0 0;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

/* --- 10 · Bloque de campamento: un objetivo anual con sus bitacoras. */
.campamento {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.campamento__cabecera {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.campamento__area {
  flex: none;
}

.campamento__texto {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  min-width: 0;
}

.campamento__acciones {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  flex: none;
}

/* --- 10 · Alerta del campamento: barra ambar con rotulo, no solo color. */
.campamento__alerta {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2xs);
  margin: var(--sp-sm) var(--sp-sm) 0;
  padding: var(--sp-2xs) var(--sp-xs);
  border-left: 3px solid var(--ambar);
  background: var(--ambar-wash);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  color: var(--ambar);
}

/* --- 10 · Nota de precarga: avisa de que un valor vino del documento base
   y hay que ajustarlo, no aceptarlo tal cual. */
.nota-ejemplo {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2xs);
  margin-top: var(--sp-2xs);
  padding: var(--sp-2xs) var(--sp-xs);
  border-left: 2px solid var(--border-strong);
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--ink-soft);
}

.nota-ejemplo .icono {
  flex: none;
  color: var(--ink-faint);
}

.campamento__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
}

.campamento__pie {
  display: flex;
  gap: var(--sp-2xs);
  padding: 0 var(--sp-sm) var(--sp-sm);
}

/* --- 10 · Tarjeta de bitacora: cabecera, rejilla de campos y acciones. */
.bitacora {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--sp-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.bitacora--bloqueada {
  background: var(--surface-2);
}

.bitacora__cabecera {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  flex-wrap: wrap;
}

.bitacora__orden {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.bitacora__acciones {
  margin-left: auto;
  display: flex;
  gap: var(--sp-2xs);
}

/* --- 10 · Rejilla de campos: dos columnas, los textos largos ocupan las dos. */
.bitacora__rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-sm);
}

.bitacora__firma {
  font-size: var(--fs-small);
  color: var(--ink-faint);
  border-top: 1px solid var(--border);
  padding-top: var(--sp-2xs);
}

/* --- 11 · Semaforo: grupo de radio real con punto, texto y tres estados. */
.semaforo {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.semaforo__titulo {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.semaforo__grupo {
  display: flex;
  gap: var(--sp-2xs);
  flex-wrap: wrap;
}

.semaforo__opcion {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

/* --- 11 · El radio real queda invisible pero recibe teclado y foco. */
.semaforo__radio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.semaforo__cara {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem var(--sp-xs);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--fs-small);
  font-weight: 600;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.semaforo__punto {
  width: 12px;
  height: 12px;
  flex: none;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
}

.semaforo__opcion:hover .semaforo__cara {
  background: var(--surface-2);
}

.semaforo__radio:focus-visible + .semaforo__cara {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.semaforo__radio:disabled + .semaforo__cara {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface-2);
}

/* --- 11 · Estado verde: en ruta. */
.semaforo__opcion--verde .semaforo__punto {
  color: var(--verde);
}

.semaforo__opcion--verde .semaforo__radio:checked + .semaforo__cara {
  background: var(--verde-wash);
  border-color: var(--verde);
  color: var(--verde);
}

/* --- 11 · Estado amarillo: atencion. */
.semaforo__opcion--amarillo .semaforo__punto {
  color: var(--ambar);
}

.semaforo__opcion--amarillo .semaforo__radio:checked + .semaforo__cara {
  background: var(--ambar-wash);
  border-color: var(--ambar);
  color: var(--ambar);
}

/* --- 11 · Estado rojo: desvio. */
.semaforo__opcion--rojo .semaforo__punto {
  color: var(--rojo);
}

.semaforo__opcion--rojo .semaforo__radio:checked + .semaforo__cara {
  background: var(--rojo-wash);
  border-color: var(--rojo);
  color: var(--rojo);
}

/* --- 11 · El punto se rellena solo en la opcion marcada. */
.semaforo__radio:checked + .semaforo__cara .semaforo__punto {
  background: currentColor;
}

/* --- 12 · Bloque de narrativa: el relato compuesto, en cuerpo de lectura. */
.narrativa {
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  border-radius: var(--radius);
  padding: var(--sp-xs) var(--sp-sm);
}

.narrativa__titulo {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 0.375rem;
}

.narrativa__texto {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink);
  max-width: 68ch;
  white-space: pre-wrap;
}

.narrativa__vacia {
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--ink-faint);
}

/* --- 12 · Bloque de adjuntos: lista de archivos con peso y accion de borrado. */
.adjuntos {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2xs);
}

.adjuntos__titulo {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.adjuntos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.adjunto {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  min-height: 2.75rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.adjunto__nombre {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-small);
}

.adjunto__peso {
  margin-left: auto;
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}

/* --- 12 · Zona de subida: rectangulo punteado, tambien admite el teclado. */
.adjuntos__soltar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2xs);
  min-height: 3.5rem;
  padding: var(--sp-2xs) var(--sp-sm);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-faint);
  font-size: var(--fs-small);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}

.adjuntos__soltar:hover,
.adjuntos__soltar--activa {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent-ink);
}

/* --- 13 · Modal de lectura: dialogo nativo, centrado y con fondo atenuado. */
.lectura,
.dialogo {
  width: min(52rem, 92vw);
  max-height: min(86vh, 52rem);
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

.lectura::backdrop,
.dialogo::backdrop {
  background: var(--jb-ink);
  opacity: 0.62;
}

.lectura__caja,
.dialogo__caja {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

.lectura__cabecera,
.dialogo__cabecera {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.lectura__ruta {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.lectura__objetivo {
  margin-top: 0.25rem;
  font-size: var(--fs-h3);
}

.lectura__cerrar {
  margin-left: auto;
  flex: none;
}

/* --- 13 · El texto de lectura es la unica zona que desplaza en el modal. */
.lectura__texto {
  padding: var(--sp-md);
  overflow-y: auto;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.62;
  color: var(--ink);
  white-space: pre-wrap;
}

.lectura__texto:focus-visible {
  outline-offset: -2px;
}

.lectura__pie,
.dialogo__pie {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  padding: var(--sp-xs) var(--sp-md);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.lectura__pie .boton:last-child {
  margin-left: auto;
}

.dialogo__pie {
  justify-content: flex-end;
}

.dialogo__cuerpo {
  padding: var(--sp-md);
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-sm);
}

/* --- 14 · Formulario dentro de un dialogo: rejilla de una columna con el
   ritmo estandar. Se define aqui y no en JavaScript, para que la interfaz no
   escriba estilos en linea. */
.dialogo__form {
  display: grid;
  gap: var(--sp-sm);
}

/* --- 14 · Pestanas de administracion: botones reales con estado seleccionado. */
.tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin: var(--sp-md) 0;
  overflow-x: auto;
}

.tab {
  min-height: 2.75rem;
  padding: 0.5rem var(--sp-sm);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.tab:hover {
  color: var(--ink);
}

.tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent-ink);
}

.panel__cabecera {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  margin-bottom: var(--sp-sm);
}

.panel__cabecera .boton {
  margin-left: auto;
}

.panel__pie {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-sm);
}

/* --- 14 · Tablas de administracion: cabecera mono, filas con separador fino. */
.tabla__envoltura {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.tabla th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--sp-2xs) var(--sp-xs);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-strong);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

.tabla td {
  padding: var(--sp-2xs) var(--sp-xs);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--ink-soft);
}

.tabla tbody tr:hover td {
  background: var(--surface-2);
}

.tabla tbody tr:last-child td {
  border-bottom: 0;
}

.tabla__mono {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tabla__acciones {
  display: flex;
  gap: 0.25rem;
  justify-content: flex-end;
}

.tabla__vacia {
  padding: var(--sp-md);
  text-align: center;
  color: var(--ink-faint);
  font-style: italic;
}

/* --- 14 · Filtro de auditoria: campos en linea que envuelven sin romperse. */
.filtro {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  padding: var(--sp-sm);
  margin-bottom: var(--sp-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.filtro .campo {
  flex: 1 1 12rem;
}

/* --- 14 · Casilla dentro de una barra de filtro: control y rotulo en linea. */
.filtro__casilla {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  min-height: 2.75rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  cursor: pointer;
}

/* --- 14 · Arbol de contenido: rutas, objetivos y asignaciones anidadas. */
.arbol {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2xs);
}

.arbol__ruta {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.arbol__cabecera {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  min-height: 3rem;
  padding: var(--sp-2xs) var(--sp-sm);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.arbol__lista {
  list-style: none;
  margin: 0;
  padding: var(--sp-2xs) var(--sp-sm);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.arbol__objetivo {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  min-height: 2.75rem;
  padding: 0.25rem 0.5rem;
  border-left: 1px solid var(--border-strong);
}

/* --- 15 · Banda de ayuda: como se usa la sesion y los atajos de teclado. */
.ayuda {
  margin-top: var(--sp-lg);
  padding: var(--sp-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.ayuda__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-md);
  margin-top: var(--sp-sm);
}

.ayuda h3 {
  font-size: var(--fs-body);
  margin-bottom: 0.375rem;
}

.ayuda p,
.ayuda li {
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

.ayuda__atajos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.ayuda__atajos li {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
}

/* --- 15 · Pie de pagina: lockup conjunto y una linea de creditos discreta. */
.pie {
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.pie__interior {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  flex-wrap: wrap;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-md) var(--gutter);
}

/* --- 15 · Pie sin lockup: solo la linea legal, centrada en su ancho. */
.pie__interior--simple {
  justify-content: flex-end;
}

.pie__legal {
  margin-left: auto;
  font-size: var(--fs-small);
  color: var(--ink-faint);
}

/* --- 15 · Aviso en linea: barra lateral, rotulo mono y texto, nunca color solo. */
.aviso {
  display: block;
  padding: var(--sp-2xs) var(--sp-xs);
  border-left: 3px solid var(--border-strong);
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

.aviso--error {
  border-left-color: var(--rojo);
  background: var(--rojo-wash);
  color: var(--rojo);
  font-weight: 600;
}

.aviso--error::before {
  content: "Error";
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.125rem;
}

.aviso--ok {
  border-left-color: var(--verde);
  background: var(--verde-wash);
  color: var(--verde);
}

/* --- 15 · Toast: aviso momentaneo abajo a la derecha, sin tapar el foco. */
.toast {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 70;
  max-width: min(28rem, 90vw);
  padding: var(--sp-xs) var(--sp-sm);
  border: 1px solid var(--border-strong);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-small);
  box-shadow: var(--shadow-2);
  animation: toast-entra var(--dur) var(--ease-out);
}

.toast--error {
  border-left-color: var(--rojo);
  color: var(--rojo);
}

.toast--ok {
  border-left-color: var(--verde);
  color: var(--verde);
}

@keyframes toast-entra {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- 16 · Pagina de acceso: tarjeta unica centrada con el lockup conjunto. */
.pagina--acceso {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.acceso {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-lg) var(--gutter);
  gap: var(--sp-md);
}

.acceso__tarjeta {
  width: min(28rem, 100%);
  padding: var(--sp-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.acceso__lockup {
  padding-bottom: var(--sp-sm);
  margin-bottom: var(--sp-md);
  border-bottom: 1px solid var(--border);
}

.acceso__titulo {
  font-size: var(--fs-display-m);
  margin-bottom: 0.375rem;
}

.acceso__texto {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin-bottom: var(--sp-sm);
}

.acceso__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

/* --- 16 · Tramos del alta del segundo factor: heredan el ritmo del formulario
   que los contiene, porque son secciones suyas y no un bloque aparte. */
.acceso__tramo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.acceso__form .boton {
  width: 100%;
}

/* --- 16 · Codigo TOTP y secreto: mono, muy espaciado, facil de dictar. */
.acceso__codigo {
  font-family: var(--font-mono);
  font-size: var(--fs-lead);
  letter-spacing: 0.32em;
  text-align: center;
}

.acceso__secreto {
  display: block;
  padding: var(--sp-2xs) var(--sp-xs);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  word-break: break-all;
  color: var(--ink-soft);
}

.acceso__qr {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  padding: var(--sp-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.acceso__qr svg,
.acceso__qr img {
  width: 11rem;
  height: 11rem;
}

/* --- 16 · Responsive: por debajo de 900 px todo pasa a una sola columna. */
@media (max-width: 900px) {
  .disposicion {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-md);
    padding-top: var(--sp-md);
  }

  .rail {
    position: static;
  }

  .rail__lista {
    display: flex;
    gap: var(--sp-sm);
    overflow-x: auto;
    padding: 0 0 var(--sp-2xs) var(--sp-2xs);
  }

  .rail__lista::before {
    left: 0.4375rem;
    right: 0.4375rem;
    top: 1.0625rem;
    bottom: auto;
    width: auto;
    height: 1px;
  }

  .rail__punto {
    left: -0.5rem;
    top: 0.625rem;
  }

  .rail__enlace {
    padding-top: 1.25rem;
    white-space: nowrap;
  }

  .stats,
  .bitacora__rejilla,
  .ruta__contexto,
  .dialogo__cuerpo {
    grid-template-columns: minmax(0, 1fr);
  }

  .topbar {
    gap: var(--sp-2xs);
  }

  .topbar__espacio {
    border-left: 0;
    padding-left: 0;
    flex-basis: 100%;
  }

  .lectura,
  .dialogo {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    border: 0;
  }
}