/*
 * Sistema de estilos de Elora: moderno y limpio, fondos blancos/claros y la
 * paleta de marca aplicada como acento (mandato constitucional de UI, WCAG AA).
 * Sin librería de diseño de terceros: custom properties + utilidades simples.
 *
 * Los colores no se escriben sueltos en ninguna regla: todo sale de los tokens
 * de la sección 1, que son la única fuente de verdad de la marca en la app.
 */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */

:root {
  /* Colores tomados del arte de marca (app/assets/images/elora-isotipo.svg):
     el isotipo va del cian al violeta y el logotipo usa una tinta casi negra.
     El violeta no estaba en la paleta declarada por la constitución (#0AB6BC /
     #0E9E64 / #12D3D9): se incorpora como acento porque es la mitad del
     degradado del logotipo, y sin él la UI no se parece a la marca. */
  --marca-cian: #12D3D9;
  --marca-azul: #3F69CB;
  --marca-violeta: #6A2FD9;
  --marca-tinta: #0E1116;

  /* El degradado de marca, en un solo lugar: barras de acento, botón primario
     y estados activos lo reusan en vez de repetir los tres topes. */
  --degradado-marca: linear-gradient(
    100deg,
    var(--marca-cian) 0%,
    var(--marca-azul) 45%,
    var(--marca-violeta) 100%
  );

  /* Paleta declarada por la constitución: primario #0AB6BC, verde #0E9E64 y
     #12D3D9 —este último es exactamente --marca-cian de arriba—. Los dos
     primeros no alcanzan 4.5:1 contra blanco (2.49:1 y 3.45:1), así que la UI
     usa sus pares oscuros para todo lo que es texto o lleva texto encima. El
     #0AB6BC solo sobrevive como theme-color del navegador, en el layout. */
  --color-marca-verde: #0E9E64; /* solo bordes y rellenos, nunca texto */
  --color-primario-oscuro: #087E82; /* 4.86:1 sobre blanco y con blanco encima */
  --color-acento: var(--marca-violeta); /* 6.95:1 sobre blanco */
  --color-exito: #0A6B45; /* 6.56:1 sobre blanco; deriva de --color-marca-verde */

  --color-texto: #1F2933;
  --color-texto-suave: #52606D;
  --color-titulo: var(--marca-tinta);
  --color-fondo: #FFFFFF;
  --color-texto-invertido: #FFFFFF; /* texto sobre superficies de marca */
  --color-fondo-suave: #F5F7FA;
  --color-borde: #D9E2EC;
  --color-borde-suave: #EDF1F5;
  --color-error: #B3261E;
  --color-error-fondo: #FDECEA;
  --color-exito-fondo: #E6F6EF;

  /* Bandas del motor (RF-016). Son FONDOS y BORDES, nunca color de texto: cada
     banda escribe su nombre al lado en --color-titulo (#0E1116), que da 16:1 o
     más sobre los cinco fondos, así que la escala se lee igual en impresión y
     con daltonismo. El fondo de la banda 2 reutiliza --color-exito-fondo y el
     de la 5, --color-error-fondo: no se duplican valores existentes. */
  --banda-1-fondo: #E9F6F7;
  --banda-1-borde: #9ED8DB;
  --banda-2-fondo: var(--color-exito-fondo);
  --banda-2-borde: #8FD3B6;
  --banda-3-fondo: #FCF3DC;
  --banda-3-borde: #E4C671;
  --banda-4-fondo: #FDECE4;
  --banda-4-borde: #EFAF8C;
  --banda-5-fondo: var(--color-error-fondo);
  --banda-5-borde: #E4A19C;

  --radio: 8px;
  --radio-sm: 6px;
  --radio-pill: 999px;
  --sombra: 0 1px 3px rgba(31, 41, 51, 0.08);
  --sombra-elevada: 0 4px 16px rgba(31, 41, 51, 0.08);
  --ancho-contenido: 60rem;
}

* { box-sizing: border-box; }

/* ── 2. Base ─────────────────────────────────────────────────────────────── */

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--color-texto);
  background: var(--color-fondo-suave);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  color: var(--color-titulo);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: 1.5rem; margin-top: 0; }
h2 { font-size: 1.15rem; }

a { color: var(--color-primario-oscuro); }
a:hover { color: var(--color-acento); }

/* Un único anillo de foco para toda la UI: cualquier elemento enfocable lo
   hereda, así ningún control nuevo queda sin indicador visible (WCAG 2.4.7). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-primario-oscuro);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}

/* ── 3. Encabezado y marca ───────────────────────────────────────────────── */

.encabezado {
  background: var(--color-fondo);
  box-shadow: var(--sombra);
  /* Filete de marca en vez de un borde plano: es el degradado del isotipo. */
  border-bottom: 3px solid transparent;
  border-image: var(--degradado-marca) 1;
}

.encabezado__contenido {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* La marca es el logotipo, no texto: el parcial shared/_marca la dibuja y
   estas reglas solo fijan su tamaño según dónde aparece. */
.marca { display: inline-flex; align-items: center; }
.marca__logo { display: block; width: auto; }
.marca--encabezado .marca__logo { height: 2rem; }

.marca--portada {
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
  text-align: center;
}

.marca--portada .marca__logo { height: 3rem; }

/* Lema de marca: cian en cursiva, como en la papelería de Elora. */
.marca__lema {
  margin: 0;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--color-primario-oscuro);
}

.contenedor {
  max-width: var(--ancho-contenido);
  margin: 2rem auto;
  padding: 0 1rem;
}

/* ── 4. Superficies ──────────────────────────────────────────────────────── */

.tarjeta {
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.5rem;
}

.tarjeta--estrecha {
  position: relative;
  overflow: hidden;
  max-width: 26rem;
  margin: 3rem auto;
  box-shadow: var(--sombra-elevada);
}

/* Remate de marca en la tarjeta de acceso, que es la primera pantalla que ve
   el usuario y la que más carga de identidad soporta. Va como pseudoelemento
   y no como border-image porque este último teñiría los cuatro lados. */
.tarjeta--estrecha::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--degradado-marca);
}

/* ── 5. Formularios ──────────────────────────────────────────────────────── */

.campo { margin-bottom: 1rem; }

/* Agrupaciones de campos. El <legend> se saca del hueco que el navegador le
   abre en el borde y se apoya arriba como un título más.

   No es preferencia estética: el hueco del borde tiene la altura de UNA línea,
   así que un legend que envuelve —«¿Existe actividad de mitigación para este
   delito?» en la tarjeta estrecha de la ficha— quedaba partido en dos por la
   línea del recuadro, con la segunda mitad colgando dentro de la caja. Lo
   encontró el QA manual del 2026-08-09. Con `float` + `width: 100%` el legend
   se comporta como un bloque normal, el borde se dibuja entero y el problema no
   vuelve en ningún ancho ni con ningún tamaño de letra. */
fieldset {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 1rem;
  margin: 0 0 1rem;
}

fieldset > legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.75rem;
  font-weight: 600;
  color: var(--color-texto);
}

/* El float del legend hay que limpiarlo, o el primer campo se le sube al lado. */
fieldset > legend + * { clear: both; }

.campo label,
.etiqueta {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--color-texto);
}

/* Rótulo de un dato que se muestra pero no se edita: mismo peso visual que el
   <label> de un campo, para que el formulario no se vea desalineado. */
.etiqueta {
  margin-bottom: 0.35rem;
  font-size: 0.9375rem;
}

/* Sin regla de :focus propia: el anillo global de la sección 2 ya marca el
   campo enfocado, y teñir además el borde produce dos anillos concéntricos. */
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  font-size: 1rem;
  font-family: inherit;
  background: var(--color-fondo);
  color: var(--color-texto);
}

.campo .ayuda {
  font-size: 0.875rem;
  color: var(--color-texto-suave);
  margin-top: 0.25rem;
}

/* ── 6. Botones ──────────────────────────────────────────────────────────── */

.boton {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radio);
  /* Degradado de marca en su versión oscura: el cian del logotipo solo llega a
     2.5:1 con texto blanco, así que la banda arranca en el primario oscuro. */
  background: linear-gradient(100deg, var(--color-primario-oscuro), var(--color-acento));
  color: var(--color-texto-invertido);
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.boton:hover { filter: brightness(1.12); color: var(--color-texto-invertido); }

/* El secundario no define colores propios: recorta el mismo --degradado-marca
   como borde y deja el relleno claro. Comparte token con el primario, así que
   los dos cambian de marca en una sola línea. El relleno sale de una variable
   local para que el hover mueva un valor y no repita la receta de fondo. */
.boton--secundario {
  --relleno-boton: var(--color-fondo);
  background:
    linear-gradient(var(--relleno-boton), var(--relleno-boton)) padding-box,
    var(--degradado-marca) border-box;
  color: var(--color-primario-oscuro);
}

.boton--secundario:hover {
  --relleno-boton: var(--color-fondo-suave);
  filter: none;
  color: var(--color-acento);
}

/* Fila de botones con separación pareja: la usan tanto las acciones de la
   barra superior como los destinos de una tarjeta. */
.grupo-acciones {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* button_to genera un <form> que rompe la línea de la fila de acciones. */
.grupo-acciones form,
.barra-acciones form { margin: 0; }

/* ── 7. Avisos y errores ─────────────────────────────────────────────────── */

.aviso,
.errores {
  padding: 0.75rem 1rem;
  border-radius: var(--radio);
  margin-bottom: 1rem;
  border: 1px solid;
}

.aviso--exito {
  background: var(--color-exito-fondo);
  color: var(--color-exito);
  border-color: var(--color-marca-verde);
}

.aviso--alerta,
.errores {
  background: var(--color-error-fondo);
  color: var(--color-error);
  border-color: var(--color-error);
}

/* Constancia neutra: la política vigente, la fecha de emisión de un documento.
   No es éxito ni alerta —no hay nada que celebrar ni que corregir—, así que
   tampoco toma sus colores: el dato se lee con la tinta del cuerpo sobre el
   fondo suave (13,4:1). */
.aviso--dato {
  background: var(--color-fondo-suave);
  color: var(--color-texto);
  border-color: var(--color-borde);
}

.errores ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }

/* ── 8. Tablas ───────────────────────────────────────────────────────────── */

.tabla {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  overflow: hidden;
}

.tabla th, .tabla td {
  text-align: left;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--color-borde-suave);
}

/* Cabecera en tinta con texto blanco: es la firma de las tablas de la
   documentación metodológica de Elora, y da 18.9:1 de contraste.

   Acotada a `thead` a propósito. Sin el `thead`, la regla alcanzaba también a
   los `th scope="row"` del cuerpo —el nombre del delito en la grilla y en la
   reconstrucción, el de la barrera en el detalle de una fotografía— y ahí hacía
   dos cosas malas: ponía el nombre propio de un delito en MAYÚSCULAS, y dejaba
   su enlace (#087E82) sobre el fondo tinta en 3,89:1, bajo el 4,5:1 que exige
   AA. Se detectó en el QA manual de la matriz; ningún test lo veía. */
.tabla thead th {
  background: var(--marca-tinta);
  color: var(--color-texto-invertido);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: none;
}

/* El encabezado de FILA es contenido, no cabecera: se lee como celda, con más
   peso para que siga anclando la fila. */
.tabla tbody th { font-weight: 600; color: var(--color-texto); }

.tabla tbody tr:nth-child(even) { background: var(--color-fondo-suave); }
.tabla tr:last-child td { border-bottom: none; }

.etiqueta-estado {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: var(--radio-pill);
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--color-exito-fondo);
  color: var(--color-exito);
}

.barra-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
}

.barra-acciones h1 { margin-bottom: 0; }

.texto-suave { color: var(--color-texto-suave); }

/* ── 9. Árbol de la estructura organizacional ────────────────────────────── */

.arbol { list-style: none; margin: 0; padding-left: 0; }
.arbol .arbol {
  padding-left: 1.5rem;
  margin-left: 0.5rem;
  border-left: 2px solid var(--color-borde);
}
.arbol__nodo { margin: 0.15rem 0; }
.arbol__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radio);
}
.arbol__fila:hover { background: var(--color-fondo-suave); }
.arbol__nombre { font-weight: 600; }
.arbol__acciones { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.arbol__nodo--colapsado > .arbol { display: none; }

.enlace-accion {
  font-size: 0.85rem;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primario-oscuro);
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}
.enlace-accion:hover { color: var(--color-acento); }
.enlace-accion--peligro, .enlace-accion--peligro:hover { color: var(--color-error); }

/* Cargos y trabajadores dentro del árbol */
.arbol__cargo { color: var(--color-texto); }
.arbol__trabajador { color: var(--color-texto-suave); font-size: 0.92rem; }
.arbol__meta { color: var(--color-texto-suave); font-size: 0.8rem; }

/* ── 10. Matriz de riesgo ────────────────────────────────────────────────── */

/* Cifras del motor: tabulares para que la tríada quede alineada columna a
   columna y el «calor» de las bandas se lea de un vistazo. */
.tabla--matriz .cifra { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* La grilla crece a lo ancho con cada historia —la tríada, el tratamiento, la
   tolerancia— y no cabe en su tarjeta ni en una pantalla de escritorio normal.
   Se desplaza DENTRO de su tarjeta: el documento entero deslizándose de lado
   deja el encabezado y la barra fuera de cuadro y esconde justo la columna
   nueva. Detectado en el QA manual de la HU5, con 1.016 px de tabla en una
   tarjeta de 918 px.
   El contenedor va POR FUERA y la tabla sigue siendo tabla: con
   `display: block` sobre la propia tabla, su `width: 100%` deja de aplicar al
   layout interno y la franja del encabezado termina antes que las filas. */
.tabla-desplazable { overflow-x: auto; }
.tabla-desplazable .tabla { min-width: 44rem; }

/* El secreto de una credencial (006): 67 caracteres sin espacios. Se parte en
   varias líneas (break-all: no hay puntos naturales de corte) dentro de un
   bloque copiable, para no desbordar la tarjeta ni forzar desplazamiento. */
.secreto {
  display: block;
  word-break: break-all;
  font-size: 1.05em;
  line-height: 1.6;
  padding: 0.75rem 1rem;
  background: var(--color-fondo-suave);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  user-select: all;
}

/* Las tareas del plan traen dos columnas de texto largo —la descripción de la
   tarea y sus medios con los respaldos— junto a cuatro cortas. Sin un ancho
   mínimo propio, el navegador reparte a partes iguales y la descripción sale a
   una palabra por línea. Se le da aire a la primera columna y la tabla se
   desplaza dentro de su contenedor, como el resto. */
.tabla--tareas { min-width: 60rem; }
.tabla--tareas th[scope="row"] { min-width: 18rem; }

/* Capa visual de 5 niveles, común a RI, RR Actual y RR Proyectado (RF-016).
   El color NUNCA es el único portador: cada banda lleva su nombre escrito al
   lado, porque la escala se lee igual en escala de grises y con daltonismo.
   Por eso el texto va siempre en tinta sobre fondos claros —contraste AA— y no
   en el color de la banda (constitución §Identidad visual). */
.banda {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: var(--radio-pill);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-titulo);
  border: 1px solid var(--color-borde);
  background: var(--color-fondo-suave);
}

.banda--1 { background: var(--banda-1-fondo); border-color: var(--banda-1-borde); }
.banda--2 { background: var(--banda-2-fondo); border-color: var(--banda-2-borde); }
.banda--3 { background: var(--banda-3-fondo); border-color: var(--banda-3-borde); }
.banda--4 { background: var(--banda-4-fondo); border-color: var(--banda-4-borde); }
.banda--5 { background: var(--banda-5-fondo); border-color: var(--banda-5-borde); }

/* Banderas del riesgo: lista sin viñetas, en línea junto a su fila. */
.banderas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }

.bandera {
  padding: 0.05rem 0.5rem;
  border-radius: var(--radio-pill);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-error);
  background: var(--color-error-fondo);
  border: 1px solid var(--banda-5-borde);
}

.etiqueta-estado--alerta {
  background: var(--color-error-fondo);
  color: var(--color-error);
}

/* Neutra: un recuento, un plazo, una brecha que no es positiva. La escala de
   color queda reservada para lo que exige actuar. */
.etiqueta-estado--dato {
  background: var(--color-fondo-suave);
  color: var(--color-texto);
}

/* La brecha en PUNTOS del motor, nunca en banda (RF-028). Va en cifra tabular
   para que la columna se compare de un vistazo, y el signo se escribe: sin él,
   «6» y «−6» son la diferencia entre bloquear el cierre y no hacerlo. */
.brecha {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.brecha--positiva { color: var(--color-error); }
.brecha--cubierta { color: var(--color-exito); }

/* Sello de una fotografía del cálculo: pares término/valor. Rejilla y no lista
   corrida porque el dato importa junto a su etiqueta —«registrada por», «con
   qué reglas»— y en dos columnas se leen de un vistazo. */
.lista-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem 1.5rem;
  margin: 0;
}

.lista-datos dt {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lista-datos dd { margin: 0.15rem 0 0; }
.lista-datos dd .texto-suave { display: block; font-size: 0.85rem; }

/* Las dos fotografías comparadas, lado a lado en pantallas anchas y una sobre
   otra en angostas: apiladas siguen siendo legibles, en columnas estrechas no. */
.comparacion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* La tabla de la fotografía cabe en su tarjeta aunque la pantalla sea angosta:
   se desplaza dentro de su columna en vez de estirar la página. */
.comparacion .tabla { display: block; overflow-x: auto; }

/* ── Barra lateral del área de la empresa ────────────────────────────────── */

/* Solo las pantallas con barra cambian de disposición: las de plataforma, login
   e invitación siguen con el contenedor centrado de siempre. */
.disposicion--con-navegacion {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: calc(var(--ancho-contenido) + 16rem);
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

/* `min-width: 0` evita que una tabla ancha estire el flex item y desborde. */
.disposicion--con-navegacion .contenedor {
  flex: 1;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}

.barra-lateral {
  flex: 0 0 15rem;
  /* Acompaña el scroll del contenido en vez de irse hacia arriba: la
     navegación de una app de trabajo tiene que estar siempre a un clic. */
  position: sticky;
  top: 1.5rem;
  height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.25rem 1rem;
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.marca--barra .marca__logo { height: 1.75rem; }

/* El bloque de secciones empuja al pie hacia abajo del panel. */
.barra-lateral__nav { flex: 1; }

.barra-lateral__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.barra-lateral__nav a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radio-sm);
  color: var(--color-texto);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
}

.barra-lateral__nav a:hover {
  background: var(--color-fondo-suave);
  color: var(--color-acento);
}

/* La sección abierta lleva fondo, peso y filete de marca; el estado también
   viaja en aria-current, así que el color nunca es su único portador. */
.barra-lateral__nav a[aria-current="page"] {
  background: var(--color-fondo-suave);
  color: var(--color-acento);
  font-weight: 600;
  box-shadow: inset 3px 0 0 0 var(--color-acento);
}

.icono {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
}

.barra-lateral__pie {
  border-top: 1px solid var(--color-borde-suave);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.barra-lateral__usuario {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.barra-lateral__avatar {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--degradado-marca);
  color: var(--color-texto-invertido);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* `min-width: 0` habilita el recorte del correo dentro del flex. */
.barra-lateral__identidad {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Un correo corporativo no cabe en 15rem; se recorta y el título completo
   queda en el `title` del elemento. */
.barra-lateral__correo {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-titulo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barra-lateral__rol {
  font-size: 0.75rem;
  color: var(--color-texto-suave);
}

.boton--bloque {
  display: block;
  width: 100%;
  text-align: center;
}

/* En pantallas angostas el panel pasa arriba y las secciones se acomodan en
   fila: una columna fija de 15rem no deja ancho de lectura en un teléfono. */
@media (max-width: 56rem) {
  .disposicion--con-navegacion {
    display: block;
    padding: 1rem;
  }

  .barra-lateral {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
  }

  .barra-lateral__nav ul {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .barra-lateral__nav a[aria-current="page"] {
    box-shadow: inset 0 -3px 0 0 var(--color-acento);
  }

  .barra-lateral__pie {
    border-top: none;
    padding-top: 0;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
}

/* ── 11. Utilidades ──────────────────────────────────────────────────────── */

/* Texto disponible para lectores de pantalla y oculto a la vista: encabezados
   de columna que la tabla no necesita mostrar, sin dejar el <th> vacío. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}