/* Panel Certifica — lenguaje Fluent / Microsoft 365 con paleta CAL.
   Reescrito desde `prototype/assets/styles.css`, que es la referencia visual
   validada; el prototipo no se importa (CLAUDE.md).
   Aquí vive solo el chasis: suite bar, sidebar, contenido, login y los
   componentes que usan el dashboard y el login. Cada fase añade los suyos. */

:root {
  /* Paleta institucional (prod.md §7) */
  --azul: #183292;
  --azul-osc: #122570;
  --azul-hover: #1a3aad;
  --celeste: #399ad7;
  --celeste-suave: #e8f4fb;
  --gris: #dbdbdb;
  --blanco: #ffffff;

  /* Semánticos */
  --ok: #1e7d4e;
  --ok-bg: #e7f3ec;
  --error: #b3362b;
  --error-bg: #faeee8;
  --aviso: #8a6d1a;
  --aviso-bg: #f7f1df;

  /* Neutrales Fluent del panel */
  --lienzo: #f8f7f6;
  --neutro-h: #f3f2f1;
  --neutro-d: #e1dfdd;
  --neutro-b: #a19f9d;
  --tinta-o: #201f1e;
  --tinta-o2: #605e5c;

  /* Acento por módulo (prod.md §3.1, ui.md §1): solo para detalles de
     sidebar/tarjetas del módulo activo — nunca reemplaza a --azul, que es
     marca institucional y no cambia. */
  --acento-modulo: var(--azul);
  --acento-modulo-suave: var(--celeste-suave);

  --sombra-2: 0 1px 2px rgba(0, 0, 0, 0.08);
  --sombra-4: 0 2px 6px rgba(0, 0, 0, 0.09), 0 0.5px 1.5px rgba(0, 0, 0, 0.07);
  --sombra-8: 0 4px 14px rgba(0, 0, 0, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  --sombra-btn: 0 1px 3px rgba(24, 50, 146, 0.30);

  --alto-suite: 4rem;
  --radio-control: 6px;
  --radio-caja: 10px;

  --trans-rapida: 0.12s ease;
  --trans-normal: 0.18s ease;
}

/* Módulo Incorporaciones: mismo chasis, acento propio (tech.md §2.1). */
body.modulo-incorporaciones {
  --acento-modulo: #0f6e5c;
  --acento-modulo-suave: #e5f3f0;
}

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

body.o365 {
  margin: 0;
  font-family: "Segoe UI", "Segoe UI Variable Text", -apple-system, Roboto, "Helvetica Neue", Arial,
    sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--tinta-o);
  background: var(--lienzo);
}

.o365 h1 {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 1rem;
  color: var(--tinta-o);
}
.o365 h2 {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.8rem;
}
.o365 h3 {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}

a {
  color: var(--azul);
  text-underline-offset: 2px;
}

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

/* Se ve solo al tabular: el panel se opera mucho con teclado. */
:focus-visible {
  outline: 2px solid var(--celeste);
  outline-offset: 2px;
  border-radius: 3px;
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Suite bar ---------- */

.suite {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--alto-suite);
  padding: 0 1.2rem;
  background: var(--azul);
  color: var(--blanco);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.suite-marca {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--blanco);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.suite-marca img {
  height: 1.9rem;
  width: auto;
}

.suite-marca small {
  display: block;
  font-weight: 400;
  font-size: 0.68rem;
  opacity: 0.8;
  letter-spacing: 0;
}

.suite-marca:hover {
  color: var(--blanco);
}

/* Switcher de módulo (prod.md §3.1): solo se pinta con los dos módulos —
   con uno solo no hay entre qué elegir, así que el header no lo muestra. */
.tabs-modulo {
  display: flex;
  gap: 0.2rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.tab-modulo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background var(--trans-rapida), color var(--trans-rapida);
}

.tab-modulo:hover {
  color: var(--blanco);
  background: rgba(255, 255, 255, 0.12);
}

.tab-modulo.activo {
  color: var(--azul);
  background: var(--blanco);
}

.tab-modulo.activo:hover {
  color: var(--azul);
}

.tab-modulo .icono {
  font-size: 0.95rem;
}

.quien {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.82rem;
}

.quien a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  transition: color var(--trans-rapida);
}

.quien a:hover {
  color: var(--blanco);
  text-decoration: underline;
}

.campana {
  position: relative;
  line-height: 1;
}

.pin {
  position: absolute;
  top: -0.45rem;
  right: -0.55rem;
  min-width: 1.05rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #e53e3e;
  color: var(--blanco);
  font-size: 0.62rem;
  font-weight: 700;
  text-align: center;
}

.avatar {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--celeste);
  color: var(--blanco);
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.rol-actual {
  padding: 0.15rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-size: 0.7rem;
  background: rgba(255, 255, 255, 0.1);
}

/* ---------- Estructura ---------- */

.panel {
  display: grid;
  grid-template-columns: 16.5rem 1fr;
  align-items: start;
}

.lateral {
  position: sticky;
  top: var(--alto-suite);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--alto-suite));
  overflow-y: auto;
  background: var(--blanco);
  border-right: 1px solid var(--neutro-d);
}

.lateral nav {
  flex: 1;
  padding: 0.5rem 0;
}

.lateral a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.52rem 1rem;
  color: var(--tinta-o);
  text-decoration: none;
  font-size: 0.875rem;
  border-radius: 0;
  transition: background var(--trans-rapida), color var(--trans-rapida);
}

.lateral a:hover {
  background: var(--neutro-h);
  color: var(--azul);
}

.lateral a.activo {
  background: var(--celeste-suave);
  color: var(--azul);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--azul);
}

/* Entrada cuya pantalla aún no existe: visible, pero no accionable. */
.lateral a.pendiente {
  color: var(--neutro-b);
  cursor: default;
}

.lateral a.pendiente:hover {
  background: none;
  color: var(--neutro-b);
}

.grupo {
  padding: 1rem 1rem 0.25rem;
  color: var(--tinta-o2);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.menu-grupo > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem 0.25rem;
  color: var(--tinta-o2);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.menu-grupo > summary::-webkit-details-marker {
  display: none;
}

.menu-grupo > summary::after {
  content: "▸";
  font-size: 0.8rem;
  transition: transform var(--trans-normal);
  opacity: 0.6;
}

.menu-grupo[open] > summary::after {
  transform: rotate(90deg);
}

.menu-grupo a {
  padding-left: 1.5rem;
}

.lateral-pie {
  padding: 0.5rem 0;
  border-top: 1px solid var(--neutro-d);
}

.lateral-pie a {
  font-size: 0.83rem;
  color: var(--tinta-o2);
}

.contenido {
  min-width: 0;
}

.barra {
  position: sticky;
  top: var(--alto-suite);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 2rem;
  background: var(--blanco);
  border-bottom: 1px solid var(--neutro-d);
  box-shadow: var(--sombra-2);
}

.miga {
  color: var(--tinta-o2);
  font-size: 0.82rem;
}

.miga a {
  color: var(--tinta-o2);
  text-decoration: none;
  transition: color var(--trans-rapida);
}

.miga a:hover {
  color: var(--azul);
  text-decoration: underline;
}

.hamb {
  display: none;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--neutro-d);
  border-radius: var(--radio-control);
  background: var(--blanco);
  cursor: pointer;
  transition: border-color var(--trans-rapida), background var(--trans-rapida);
}

.hamb:hover {
  border-color: var(--neutro-b);
  background: var(--neutro-h);
}

.zona {
  max-width: 76rem;
  padding: 1.6rem 2rem 2.5rem;
}

/* Páginas con tablas anchas (ej: listado global de documentos) */
.zona.amplia {
  max-width: 100%;
  padding-right: 1.5rem;
}

/* ---------- Componentes ---------- */

.caja {
  margin-bottom: 1.4rem;
  padding: 1.2rem 1.4rem;
  background: var(--blanco);
  border: 1px solid var(--neutro-d);
  border-radius: var(--radio-caja);
  box-shadow: var(--sombra-4);
}

.caja h2 {
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--neutro-d);
  margin-bottom: 1rem;
}

.accesos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.acceso {
  display: block;
  padding: 1.1rem;
  background: var(--blanco);
  border: 1px solid var(--neutro-d);
  border-radius: var(--radio-caja);
  box-shadow: var(--sombra-4);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--trans-normal), box-shadow var(--trans-normal), transform var(--trans-normal);
}

.acceso:hover {
  border-color: var(--celeste);
  box-shadow: var(--sombra-8);
  transform: translateY(-1px);
}

.paso-numero {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-bottom: 0.6rem;
  border-radius: 50%;
  background: var(--azul);
  color: var(--blanco);
  font-size: 0.75rem;
  font-weight: 700;
}

.acceso .titulo {
  display: block;
  font-weight: 600;
}

.acceso .paso {
  display: block;
  margin-top: 0.25rem;
  color: var(--tinta-o2);
  font-size: 0.8rem;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 0.55rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--neutro-d);
  vertical-align: middle;
}

th {
  background: var(--neutro-h);
  color: var(--tinta-o2);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

th:first-child {
  border-radius: var(--radio-control) 0 0 0;
}

th:last-child {
  border-radius: 0 var(--radio-control) 0 0;
}

td.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Cualquier tabla ancha desplaza dentro de su caja, nunca la página. */
.tabla-scroll {
  overflow-x: auto;
  border-radius: var(--radio-control);
}

.vacio {
  margin: 0;
  color: var(--tinta-o2);
  font-size: 0.85rem;
}

/* Badges de estado */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.estado::before {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.estado.borrador {
  background: var(--neutro-h);
  color: var(--tinta-o2);
}
.estado.publicado {
  background: var(--ok-bg);
  color: var(--ok);
}
.estado.despublicado {
  background: var(--error-bg);
  color: var(--error);
}
.estado.pendiente {
  background: var(--aviso-bg);
  color: var(--aviso);
}

/* Botón principal */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--azul);
  border-radius: var(--radio-control);
  background: var(--azul);
  color: var(--blanco);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--sombra-btn);
  transition: background var(--trans-rapida), border-color var(--trans-rapida),
    box-shadow var(--trans-rapida), transform var(--trans-rapida);
  user-select: none;
}

.btn:hover {
  background: var(--azul-hover);
  border-color: var(--azul-hover);
  color: var(--blanco);
  box-shadow: 0 2px 8px rgba(24, 50, 146, 0.35);
  transform: translateY(-1px);
}

.btn:active {
  background: var(--azul-osc);
  border-color: var(--azul-osc);
  box-shadow: none;
  transform: translateY(0);
}

.btn.sec {
  background: var(--blanco);
  color: var(--tinta-o);
  border-color: var(--neutro-b);
  box-shadow: var(--sombra-2);
}

.btn.sec:hover {
  background: var(--neutro-h);
  border-color: var(--tinta-o2);
  box-shadow: var(--sombra-4);
}

.btn.sec:active {
  background: var(--neutro-d);
  transform: translateY(0);
}

.btn.bloque {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* Campos de formulario */
.campo {
  margin-bottom: 1rem;
}

.campo label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--tinta-o);
}

/* Título de un `.campo` que agrupa varios controles: va en su propia línea,
   como las etiquetas de los campos sueltos de al lado. */
.campo > strong {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.875rem;
  color: var(--tinta-o);
}

/* Un check dentro de un `.campo`: la etiqueta va en línea con la casilla, y la
   casilla conserva su tamaño en vez de estirarse al 100% como los campos de
   texto de al lado. */
.campo label.campo-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
}

.campo label.campo-check input[type="checkbox"] {
  width: auto;
}

.campo input,
.campo textarea,
.campo select {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--neutro-b);
  border-radius: var(--radio-control);
  font: inherit;
  font-size: 0.875rem;
  background: var(--blanco);
  color: var(--tinta-o);
  transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
  appearance: auto;
}

.campo input:hover,
.campo textarea:hover,
.campo select:hover {
  border-color: var(--tinta-o2);
}

.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(24, 50, 146, 0.12);
  outline: none;
}

.campo.invalido input,
.campo.invalido textarea,
.campo.invalido select {
  border-color: var(--error);
}

.campo.invalido input:focus,
.campo.invalido textarea:focus,
.campo.invalido select:focus {
  box-shadow: 0 0 0 3px rgba(179, 54, 43, 0.12);
}

.reporte-error {
  padding: 0.75rem 1rem;
  border: 1px solid var(--error);
  border-left-width: 4px;
  border-radius: var(--radio-control);
  background: var(--error-bg);
  color: var(--error);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ---------- Login ---------- */

.login-fondo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
  background: linear-gradient(145deg, #eef1fa 0%, var(--neutro-h) 100%);
}

.login-caja {
  width: 100%;
  max-width: 25rem;
  padding: 2.4rem 2.2rem;
  background: var(--blanco);
  border: 1px solid var(--neutro-d);
  border-radius: 14px;
  box-shadow: var(--sombra-8);
}

.login-caja .logo {
  display: block;
  height: 3.4rem;
  width: auto;
  margin: 0 auto 1.1rem;
}

.login-caja h1 {
  margin-bottom: 1.6rem;
  text-align: center;
  font-size: 1.3rem;
}

.login-caja .sub {
  margin: 0 0 0.25rem;
  color: var(--tinta-o2);
  font-size: 0.875rem;
  text-align: center;
}

.login-caja .ayuda {
  margin: 1rem 0 0;
  color: var(--tinta-o2);
  font-size: 0.8rem;
  text-align: center;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .panel {
    grid-template-columns: 1fr;
  }

  .hamb {
    display: block;
  }

  .lateral {
    position: fixed;
    top: var(--alto-suite);
    left: 0;
    z-index: 40;
    width: 16.5rem;
    transform: translateX(-100%);
    transition: transform var(--trans-normal);
    box-shadow: var(--sombra-8);
  }

  .lateral.abierto {
    transform: none;
  }

  .barra,
  .zona {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .fila-acciones-fija {
    left: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Suite bar angosta: el switcher conserva el ícono y pierde la etiqueta
     de texto para no empujar el resto de la cabecera fuera de pantalla. */
  .tab-modulo .etiqueta {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ---------- Actividades ---------- */

/* Acento por tipo de actividad: da identidad visual a la tarjeta y al detalle
   sin recurrir a iconos, y hace reconocible el tipo de un vistazo. */
.tipo-diplomado     { --acento: #183292; --suave: #eef1fa; }
.tipo-curso         { --acento: #2b7db3; --suave: #e9f4fb; }
.tipo-seminario     { --acento: #1e7d4e; --suave: #e7f3ec; }
.tipo-taller        { --acento: #8a6d1a; --suave: #f7f1df; }
.tipo-conferencia   { --acento: #6b3fa0; --suave: #f1ecf8; }
.tipo-conversatorio { --acento: #b3552b; --suave: #faeee8; }
.tipo-mesa_redonda  { --acento: #0f766e; --suave: #e6f3f1; }
.tipo-todos         { --acento: var(--tinta-o); --suave: var(--neutro-h); }

.titulo-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.titulo-fila h1 {
  margin-bottom: 0;
}

.barra-filtros {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0 0.8rem;
}

.barra-filtros input {
  flex: 1;
  max-width: 24rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--neutro-b);
  border-radius: var(--radio-control);
  font: inherit;
  font-size: 0.875rem;
  transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
}

.barra-filtros input:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(24, 50, 146, 0.12);
  outline: none;
}

.filtros-tipo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
}

.filtro-tipo {
  padding: 0.2rem 0.75rem;
  border: 1px solid var(--neutro-d);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--tinta-o2);
  font-size: 0.8rem;
  text-decoration: none;
  transition: border-color var(--trans-rapida), background var(--trans-rapida), color var(--trans-rapida);
}

.filtro-tipo:hover {
  border-color: var(--acento);
  color: var(--acento);
}

.filtro-tipo.activo {
  border-color: var(--acento);
  background: var(--suave);
  color: var(--acento);
  font-weight: 700;
}

.tarjetas-act {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1rem;
}

.tarjeta-act {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem;
  background: var(--blanco);
  border: 1px solid var(--neutro-d);
  border-left: 4px solid var(--acento);
  border-radius: var(--radio-caja);
  box-shadow: var(--sombra-4);
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--trans-normal), transform var(--trans-normal), border-color var(--trans-normal);
}

.tarjeta-act:hover {
  box-shadow: var(--sombra-8);
  transform: translateY(-2px);
}

.tarjeta-act .cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.tarjeta-act .titulo {
  font-weight: 600;
  line-height: 1.35;
}

.tarjeta-act .pie {
  color: var(--tinta-o2);
  font-size: 0.8rem;
}

.codigo {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 0.8rem;
  color: var(--tinta-o2);
}

.tipo-badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--suave);
  color: var(--acento);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.caja-tipo {
  border-left: 4px solid var(--acento);
}

.btn-icono {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--neutro-d);
  border-radius: var(--radio-control);
  background: var(--blanco);
  color: var(--tinta-o2);
  text-decoration: none;
  font-size: 0.9rem;
  vertical-align: middle;
  transition: border-color var(--trans-rapida), color var(--trans-rapida), background var(--trans-rapida);
}

.btn-icono:hover {
  border-color: var(--azul);
  color: var(--azul);
  background: var(--celeste-suave);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 1.2rem;
}

.ayuda-campo {
  margin: 0.3rem 0 0;
  color: var(--tinta-o2);
  font-size: 0.8rem;
  line-height: 1.4;
}

.ayuda-campo.invalido {
  color: var(--error);
}

.fila-acciones {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
  flex-wrap: wrap;
}

/* Barra de guardar fija al pie del viewport (ej. configuracion.html, un
   formulario largo de varias secciones): evita bajar hasta el final para
   guardar. Ancho igual que `.barra` (edge-to-edge de `.contenido`, no
   limitado al `max-width` de `.zona`) para el mismo lenguaje visual que la
   cabecera sticky. Modificador de `.fila-acciones`, no un reemplazo — solo
   se usa en el formulario que lo pida, nunca global. */
.fila-acciones-fija {
  position: fixed;
  bottom: 0;
  left: 16.5rem;
  right: 0;
  z-index: 30;
  margin-top: 0;
  padding: 0.9rem 2rem;
  background: var(--blanco);
  border-top: 1px solid var(--neutro-d);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08);
}

/* El formulario necesita el mismo espacio libre al pie que ocupa la barra
   fija, para que su último campo no quede tapado al llegar al final. */
.con-barra-fija {
  padding-bottom: 4.5rem;
}

.datos {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.1rem;
  margin: 0;
}

.datos dt {
  color: var(--tinta-o2);
  font-size: 0.82rem;
}

.datos dd {
  margin: 0;
  font-size: 0.875rem;
}

.lista-acreditaciones {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
}

/* ---------- Cohortes ---------- */

/* Cinta de estado del ciclo de publicación: siempre visible en el detalle,
   porque de ella depende si los documentos resuelven en el portal. */
.cinta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
  padding: 0.8rem 1.1rem;
  border: 1px solid var(--neutro-d);
  border-left: 4px solid var(--neutro-b);
  border-radius: var(--radio-caja);
  background: var(--blanco);
  font-size: 0.875rem;
  box-shadow: var(--sombra-2);
}

.cinta.borrador { border-left-color: var(--neutro-b); }
.cinta.publicado { border-left-color: var(--ok); background: var(--ok-bg); }
.cinta.despublicado { border-left-color: var(--error); background: var(--error-bg); }

/* Sub-línea bajo la cinta principal: un estado que acompaña al ciclo de
   publicación (RN-10: firma especial pendiente) sin competir con él. */
.cinta-secundaria {
  margin-top: -0.8rem;
  margin-bottom: 1.4rem;
  font-size: 0.85rem;
  color: var(--tinta-o2);
}

/* Popup de aviso: veto de generación explicado de vuelta en el detalle. */
.popup-aviso {
  max-width: 22rem;
  margin: auto;
  padding: 1.6rem 1.8rem;
  border: none;
  border-radius: var(--radio-caja);
  box-shadow: var(--sombra-8);
  text-align: center;
}

.popup-aviso::backdrop {
  background: rgba(32, 31, 30, 0.45);
}

.popup-aviso-icono {
  font-size: 1.8rem;
  margin: 0 0 0.4rem;
}

.popup-aviso p:not(.popup-aviso-icono) {
  margin: 0 0 1.2rem;
  color: var(--tinta-o);
}

.popup-aviso .btn {
  margin: 0 auto;
}

.caja .titulo-fila {
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--neutro-d);
  margin-bottom: 1rem;
}

.caja .titulo-fila h2 {
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}

/* Matriz de disponibilidad: rejilla de casillas, densa y legible. */
.matriz th[scope="row"] {
  font-weight: 600;
  white-space: nowrap;
}

.matriz thead th {
  vertical-align: bottom;
}

.celda-matriz {
  text-align: center;
}

.celda-matriz input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--azul);
  cursor: pointer;
}

/* ---------- Configuración en cascada ---------- */

.campo-config {
  padding: 0.9rem 0;
  border-top: 1px solid var(--neutro-d);
}

.campo-config:first-of-type {
  border-top: none;
}

.campo-config-cabecera {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

/* De dónde sale hoy el valor efectivo: sin esto el operador no sabe qué está
   heredando antes de tocarlo. */
.origen {
  padding: 0.08rem 0.5rem;
  border-radius: 999px;
  background: var(--neutro-d);
  color: var(--tinta-o2);
  font-size: 0.7rem;
}

.campo-config label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 1.2rem;
  font-size: 0.875rem;
}

.campo-config table input[type="text"] {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--neutro-b);
  border-radius: var(--radio-control);
  font: inherit;
  font-size: 0.82rem;
  transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
}

.campo-config table input[type="text"]:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(24, 50, 146, 0.12);
  outline: none;
}

/* ---------- Wizard de importación ---------- */

.pasos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.4rem;
  font-size: 0.82rem;
}

.pasos span {
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--neutro-d);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--tinta-o2);
}

.pasos span.actual {
  border-color: var(--azul);
  background: var(--azul);
  color: var(--blanco);
  font-weight: 700;
  box-shadow: var(--sombra-btn);
}

.pasos span.hecho {
  border-color: var(--ok);
  color: var(--ok);
  background: var(--ok-bg);
}

.campo input[type="file"],
.campo input[type="url"] {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--neutro-b);
  border-radius: var(--radio-control);
  font: inherit;
  font-size: 0.875rem;
}

/* ---------- Participantes y checklists ---------- */

.tabla-cebra tbody tr {
  transition: background var(--trans-rapida);
}

.tabla-cebra tbody tr:nth-child(even) {
  background: var(--lienzo);
}

.tabla-cebra tbody tr:hover {
  background: var(--celeste-suave);
}

.celda-check {
  text-align: center;
}

.toggle-check {
  width: 2rem;
  height: 1.8rem;
  border: 1px solid var(--neutro-b);
  border-radius: var(--radio-control);
  background: var(--blanco);
  color: var(--tinta-o2);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--trans-rapida), background var(--trans-rapida), color var(--trans-rapida);
}

.toggle-check:hover {
  border-color: var(--tinta-o2);
  background: var(--neutro-h);
}

.toggle-check.marcado {
  border-color: var(--ok);
  background: var(--ok-bg);
  color: var(--ok);
}

.si { color: var(--ok); font-weight: 600; }
.no { color: var(--neutro-b); }

.estado.sin-pago {
  background: var(--aviso-bg);
  color: var(--aviso);
}

/* ---------- Plan de estudios ---------- */

/* Vista del contenido saneado: las etiquetas del allowlist y nada más. */
.vista-plan {
  padding: 1rem 1.1rem;
  border: 1px solid var(--neutro-d);
  border-radius: var(--radio-caja);
  background: var(--neutro-h);
  font-size: 0.875rem;
  line-height: 1.6;
}

.vista-plan table {
  background: var(--blanco);
}

.campo-config textarea {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--neutro-b);
  border-radius: var(--radio-control);
  font: inherit;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.82rem;
  transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
}

.campo-config textarea:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(24, 50, 146, 0.12);
  outline: none;
}

/* Acciones por fila en el listado de documentos */
.acciones-doc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.acciones-doc .sep { display: none; }

/* Cada acción: pequeño chip con borde */
.acciones-doc > a,
.acciones-doc > button.btn-enlace,
.acciones-doc .en-linea > button.btn-enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--neutro-d);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--tinta-o2);
  font: inherit;
  font-size: 0.78rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--trans-rapida), color var(--trans-rapida), background var(--trans-rapida);
}

.acciones-doc > a:hover,
.acciones-doc > button.btn-enlace:hover,
.acciones-doc .en-linea > button.btn-enlace:hover {
  border-color: var(--azul);
  color: var(--azul);
  background: var(--celeste-suave);
}

/* Acción destructiva (Anular) en rojo suave */
.acciones-doc .en-linea:has([name="motivo"]) button.btn-enlace {
  border-color: #f5c6c3;
  color: var(--error);
}

.acciones-doc .en-linea:has([name="motivo"]) button.btn-enlace:hover {
  border-color: var(--error);
  background: var(--error-bg);
}

/* Eliminar (borrado físico): mismo tono de peligro que Anular, sin motivo */
.acciones-doc button.btn-enlace.btn-peligro {
  border-color: #f5c6c3;
  color: var(--error);
}

.acciones-doc button.btn-enlace.btn-peligro:hover {
  border-color: var(--error);
  background: var(--error-bg);
}

.en-linea {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* Tabla de documentos: compacta, con scroll horizontal cuando no cabe */
.tabla-documentos {
  min-width: 80rem;   /* fuerza scroll en vez de comprimir columnas */
  font-size: 0.82rem;
}

.tabla-documentos th,
.tabla-documentos td {
  padding: 0.42rem 0.55rem;
}

/* Los anchos son posicionales, así que cada tabla lleva los suyos: el listado
   global y el de la cohorte comparten aspecto pero no columnas —una abre con
   «N.º» y la otra con «Reg. N°»—, y una sola serie de `nth-child` acababa
   estrechando en la cohorte columnas pensadas para otras. */
.tabla-documentos-global th:nth-child(1)  { width: 3rem;    }  /* N.º */
.tabla-documentos-global th:nth-child(2)  { width: 10.5rem; }  /* Reg. N° */
.tabla-documentos-global th:nth-child(3)  { width: 9.5rem;  }  /* Código de verificación */
.tabla-documentos-global th:nth-child(4)  { width: 13rem;   }  /* Acreditado */
.tabla-documentos-global th:nth-child(5)  { width: 11rem;   }  /* Correo */
.tabla-documentos-global th:nth-child(6)  { width: 11rem;   }  /* Actividad / cohorte */
.tabla-documentos-global th:nth-child(7)  { width: 6.5rem;  }  /* Tipo */
.tabla-documentos-global th:nth-child(8)  { width: 2.8rem;  }  /* Versión */
.tabla-documentos-global th:nth-child(9)  { width: 6.5rem;  }  /* Estado */
.tabla-documentos-global th:nth-child(10) { width: 5.5rem;  }  /* Emitido */
.tabla-documentos-global th:nth-child(11) { width: 6rem;    }  /* Envío */
.tabla-documentos-global th:nth-child(12) { }                  /* Acciones — flexible */

.tabla-documentos-cohorte th:nth-child(1) { width: 10.5rem; }  /* Reg. N° */
.tabla-documentos-cohorte th:nth-child(2) { width: 9.5rem;  }  /* Código de verificación */
.tabla-documentos-cohorte th:nth-child(3) { width: 15rem;   }  /* Acreditado */
.tabla-documentos-cohorte th:nth-child(4) { width: 13rem;   }  /* Correo */
.tabla-documentos-cohorte th:nth-child(5) { width: 8rem;    }  /* Tipo */
.tabla-documentos-cohorte th:nth-child(6) { width: 2.8rem;  }  /* Versión */
.tabla-documentos-cohorte th:nth-child(7) { width: 7rem;    }  /* Estado */
.tabla-documentos-cohorte th:nth-child(8) { width: 6rem;    }  /* Envío */
.tabla-documentos-cohorte th:nth-child(9) { }                  /* Acciones — flexible */

/* Los identificadores no se parten en dos líneas: se leen y se teclean de
   corrido, y un salto los vuelve dos cosas distintas a la vista. */
.tabla-documentos .codigo {
  white-space: nowrap;
}

/* Nombre y correo: truncan antes de romper el layout */
.tabla-documentos-global td:nth-child(4),
.tabla-documentos-global td:nth-child(5),
.tabla-documentos-cohorte td:nth-child(3),
.tabla-documentos-cohorte td:nth-child(4) {
  max-width: 0;        /* necesario para que text-overflow funcione en table-cell */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Input "Motivo" de anulación dentro de la celda de acciones */
.acciones-doc input[type="text"] {
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--neutro-b);
  border-radius: var(--radio-control);
  font: inherit;
  font-size: 0.8rem;
  width: 9rem;
  background: var(--blanco);
  color: var(--tinta-o);
  transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
}

.acciones-doc input[type="text"]:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(24, 50, 146, 0.12);
  outline: none;
}

/* Acción secundaria que vive dentro de un formulario: se lee como enlace
   porque compite con enlaces, pero es un botón porque muta. */
.btn-enlace {
  padding: 0;
  border: 0;
  background: none;
  color: var(--azul);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--trans-rapida);
}

.btn-enlace:hover {
  color: var(--azul-hover);
  text-decoration: underline;
}

/* Campana de notificaciones de la barra de marca: el contador solo aparece
   cuando hay algo pendiente, para que su ausencia también informe. */
.campana {
  position: relative;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-size: 1.15rem;
  transition: color var(--trans-rapida);
}

.campana:hover {
  color: var(--blanco);
}

.campana .pip {
  position: absolute;
  top: -0.35rem;
  right: -0.6rem;
  min-width: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--celeste);
  color: var(--blanco);
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
}

.lista-notificaciones {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-notificaciones li {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--neutro-d);
  font-size: 0.875rem;
}

.lista-notificaciones li:last-child {
  border-bottom: none;
}

.lista-notificaciones .no-leida .btn-enlace {
  font-weight: 700;
}

/* Visor de logs: texto crudo, con scroll propio para no empujar la página. */
pre.log {
  max-height: 60vh;
  overflow: auto;
  padding: 0.9rem 1rem;
  border-radius: var(--radio-control);
  background: var(--neutro-h);
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--neutro-d);
}

.diff {
  margin: 0;
  padding-left: 1rem;
  font-size: 0.875rem;
}

/* Caja de ayuda / aviso informativo (azul institucional) */
.aviso-info {
  display: flex;
  gap: 0.7rem;
  margin-bottom: 1.2rem;
  padding: 0.8rem 1rem;
  border: 1px solid #c5d5f5;
  border-left: 4px solid var(--azul);
  border-radius: var(--radio-caja);
  background: #eef1fa;
  color: var(--tinta-o);
  font-size: 0.875rem;
  line-height: 1.55;
}

.aviso-info a {
  color: var(--azul);
  font-weight: 600;
}

/* ---------- Patrón heredado: label.campo + control suelto ----------
   Varios templates usan <label class="campo"> seguido de un input/select/
   textarea sin envoltura .campo. Este bloque los estiliza sin tocar cada
   template individualmente. */

label.campo {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tinta-o2);
}

label.campo + input,
label.campo + select,
label.campo + textarea {
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--neutro-b);
  border-radius: var(--radio-control);
  font: inherit;
  font-size: 0.875rem;
  background: var(--blanco);
  color: var(--tinta-o);
  transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
}

label.campo + input:hover,
label.campo + select:hover,
label.campo + textarea:hover {
  border-color: var(--tinta-o2);
}

label.campo + input:focus,
label.campo + select:focus,
label.campo + textarea:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(24, 50, 146, 0.12);
  outline: none;
}

label.campo + textarea {
  width: 100%;
  resize: vertical;
}

/* Barra de filtros horizontal: campos compactos en fila */
.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

/* Cada campo del filtro es compacto: label encima, control abajo */
.filtro-campo {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  min-width: 0;
}

.filtro-campo label {
  margin-bottom: 0.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tinta-o2);
}

.filtro-campo input[type="search"],
.filtro-campo input[type="text"],
.filtro-campo select {
  width: auto;
  min-width: 10rem;
  max-width: 100%;
  padding: 0.42rem 0.65rem;
  border: 1px solid var(--neutro-b);
  border-radius: var(--radio-control);
  font: inherit;
  font-size: 0.875rem;
  background: var(--blanco);
  color: var(--tinta-o);
  transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
}

.filtro-campo input[type="search"]:hover,
.filtro-campo select:hover {
  border-color: var(--tinta-o2);
}

.filtro-campo input[type="search"]:focus,
.filtro-campo select:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(24, 50, 146, 0.12);
  outline: none;
}

/* Select con búsqueda integrada: el <select> nativo queda oculto pero
   sigue siendo el control que se envía con el formulario. */
.sel-busq {
  position: relative;
}

.sel-busq input[type="text"] {
  width: auto;
  min-width: 10rem;
}

.sel-busq:has(#actividad) input[type="text"] {
  min-width: 13.25rem;
}

.sel-busq-lista {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 100;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: var(--blanco);
  border: 1px solid var(--neutro-d);
  border-radius: var(--radio-control);
  box-shadow: var(--sombra-4);
  max-height: 14rem;
  overflow-y: auto;
}

.sel-busq-lista li {
  padding: 0.35rem 0.65rem;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sel-busq-lista li:hover,
.sel-busq-lista li.activo {
  background: var(--neutro-h);
  color: var(--azul);
}

/* Alinear el botón con los controles */
.filtro-accion {
  display: flex;
  align-items: flex-end;
  padding-bottom: 0;
}

/* Celda de la firma en la configuración: miniatura, quitar y subida conviven
   en poco espacio, y la muestra va sobre damero para que un PNG transparente
   se distinga de uno con fondo blanco. */
.celda-firma {
  min-width: 6rem;
  max-width: 25rem;
}

.celda-firma input[type="file"] {
  width: 100%;
  font-size: 0.8rem;
}

.celda-firma .ayuda-campo {
  font-size: 0.75rem;
  margin: 0.2rem 0 0;
}

.firma-muestra {
  display: block;
  max-width: 8rem;
  max-height: 2.75rem;
  margin-bottom: 0.3rem;
  padding: 0.2rem;
  border: 1px solid var(--neutro-d);
  border-radius: var(--radio-control);
  background-image: linear-gradient(45deg, var(--neutro-h) 25%, transparent 25%),
    linear-gradient(-45deg, var(--neutro-h) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--neutro-h) 75%),
    linear-gradient(-45deg, transparent 75%, var(--neutro-h) 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
}

/* Nombre del firmante especial: texto plano, nunca editable. */
.firma-especial-nombre {
  margin: 0 0 0.2rem;
  font-weight: 600;
  color: var(--tinta-o);
}

/* RN-10: lo que se pinta en vez de la imagen de un firmante especial en toda
   pantalla de configuración — nunca se ve ahí, la haya subido o no. */
.firma-marcador {
  display: flex;
  max-width: 8rem;
  min-height: 2.75rem;
  margin-bottom: 0.3rem;
  padding: 0.2rem 0.6rem;
  border: 1px dashed var(--neutro-d);
  border-radius: var(--radio-control);
  font-style: italic;
  color: var(--tinta-o2);
  align-items: center;
  justify-content: center;
  text-align: center;
}

.firma-especial-selector {
  background: var(--neutro-h, #f3f2f1);
}

.fondo-muestra {
  display: block;
  max-width: 20rem;
  width: 100%;
  height: auto;
  margin-bottom: 0.3rem;
  border: 1px solid var(--neutro-d);
  border-radius: var(--radio-control);
}

.celda-firma .quitar {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
}

/* Editor de posiciones de firma: el lienzo reproduce el documento a escala,
   con su proporción real, para que colocar aquí signifique colocar allí. */
.lienzo-firmas {
  position: relative;
  width: 100%;
  max-width: 60rem;
  margin: 0 auto 1rem;
  border: 1px solid var(--neutro-d);
  border-radius: var(--radio-caja);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
  touch-action: none;
  box-shadow: var(--sombra-4);
}

.lienzo-firmas.apaisado {
  aspect-ratio: 297 / 210;
}

.lienzo-firmas.vertical {
  aspect-ratio: 210 / 297;
  max-width: 42rem;
}

/* Guías de alineación (posiciones.js): cuadrícula y líneas centrales sobre el
   lienzo. Solo ayuda visual — no reciben el puntero. */
.guias {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(24, 50, 146, 0.3) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(24, 50, 146, 0.3) 1px, transparent 1px);
  background-size: var(--paso-x) var(--paso-y);
}

.guias[hidden] {
  display: none;
}

.guias-centro-v,
.guias-centro-h {
  position: absolute;
  background: rgba(57, 154, 215, 0.7);
}

.guias-centro-v {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
}

.guias-centro-h {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
}

.guias-controles {
  align-items: center;
  margin-bottom: 0.75rem;
}

/* Base compartida por firma/«Reg. N°»/QR/código/fecha (posiciones.js): solo
   lo que arrastra —`.arrastrable`— reacciona al puntero y al teclado; una caja
   no arrastrable se ve fija, de referencia (ui.md §3.8). */
.caja-posicion {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  border: 1px dashed var(--neutro-d);
  border-radius: 3px;
  background: rgba(120, 120, 120, 0.06);
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  color: var(--tinta-o2);
  overflow: hidden;
  transition: background var(--trans-rapida);
}

.caja-posicion.arrastrable {
  cursor: grab;
  border-color: var(--celeste);
  background: rgba(57, 154, 215, 0.08);
  color: inherit;
}

.caja-posicion.arrastrable:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 1px;
}

.caja-posicion.arrastrable.moviendo {
  cursor: grabbing;
  background: rgba(57, 154, 215, 0.2);
}

.tirador-ancho {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  cursor: ew-resize;
  background: var(--celeste);
  opacity: 0.5;
}

.tirador-alto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  cursor: ns-resize;
  background: var(--celeste);
  opacity: 0.5;
}

.tirador-ancho:hover,
.tirador-alto:hover {
  opacity: 1;
}

.firma-caja {
  flex-direction: column;
  justify-content: flex-end;
}

/* La firma se apoya en la línea, como en el PDF (`anchor="s"`): sin esto una
   firma baja flotaba a media altura en el editor mientras el documento la
   imprimía pegada a la línea. */
.firma-caja img {
  flex: 1;
  min-height: 0;
  max-width: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.firma-caja .linea {
  display: block;
  width: 100%;
  border-top: 1px solid var(--tinta-o);
}

.firma-caja .quien {
  font-weight: 700;
}

.firma-caja .cargo {
  color: var(--tinta-o2);
}

/* RN-10: el mismo marcador de .firma-marcador, pero encajado en la caja
   arrastrable del editor de posiciones en vez de la tabla de configuración. */
.firma-marcador-caja {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-style: italic;
  color: var(--tinta-o2);
  text-align: center;
}

/* Las dos exportaciones conviven en la cabecera del listado. */
.acciones-cabecera {
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ---------- Fuentes del selector de "Cuerpo del documento"/plan de estudios ----------
   Sin esto, CKEditor (el desplegable de fuente y el propio texto editable) cae al
   genérico serif/sans-serif/cursive del navegador para cualquier familia que no tenga
   instalada localmente — casi siempre ninguna de estas—, y lo que se ve en pantalla deja
   de parecerse a lo que ReportLab estampa en el PDF con estos mismos archivos
   (`apps/credentials/services/fuentes.py`). El `font-family` de cada regla es el nombre
   por el que el editor y el saneador ya conocen la fuente (fuentes.py::FUENTES): para
   Carlito/Caladea/Pagella es el alias con el que caen en el stack cuando el sistema no
   tiene la propietaria real (Calibri/Cambria/Book Antiqua), así que un usuario con esa
   propietaria instalada la sigue viendo a ella —coherente con el "clon métricamente
   compatible" del docstring—; para las tres caligráficas se declara el nombre exacto,
   porque no hay alternativa real que pueda tener nadie. */
@font-face {
  font-family: "Carlito";
  src: url("../fonts/carlito/Carlito-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Carlito";
  src: url("../fonts/carlito/Carlito-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Carlito";
  src: url("../fonts/carlito/Carlito-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Carlito";
  src: url("../fonts/carlito/Carlito-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Caladea";
  src: url("../fonts/caladea/Caladea-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Caladea";
  src: url("../fonts/caladea/Caladea-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Caladea";
  src: url("../fonts/caladea/Caladea-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Caladea";
  src: url("../fonts/caladea/Caladea-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}
/* "Book Antiqua" (no "Pagella"): es el nombre por el que el stack la pide
   (`"'Book Antiqua', Palatino, serif"`) — nadie fuera de un Office viejo la
   tiene instalada, así que forzarla aquí no le quita la fuente real a nadie. */
@font-face {
  font-family: "Book Antiqua";
  src: url("../fonts/pagella/Pagella-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Book Antiqua";
  src: url("../fonts/pagella/Pagella-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Book Antiqua";
  src: url("../fonts/pagella/Pagella-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Book Antiqua";
  src: url("../fonts/pagella/Pagella-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}
/* Sin cursiva propia (fuentes.py: "no tendría sentido en un guion caligráfico"),
   pero con la negrita artificial como peso 700: es el mismo archivo que usa el
   PDF, así que el editor muestra la negrita que de verdad se imprime — y el
   navegador no la engrosa una segunda vez por su cuenta. */
@font-face {
  font-family: "Edwardian Script ITC";
  src: url("../fonts/edwardian/Edwardian-Script-ITC-400.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "Edwardian Script ITC";
  src: url("../fonts/edwardian/Edwardian-Script-ITC-700.ttf") format("truetype");
  font-weight: 700;
}
@font-face {
  font-family: "English 111 Vivace BT";
  src: url("../fonts/english/EnglishVivace-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "English 111 Vivace BT";
  src: url("../fonts/english/EnglishVivace-Bold.ttf") format("truetype");
  font-weight: 700;
}
@font-face {
  font-family: "Petit Formal Script";
  src: url("../fonts/petitformalscript/PetitFormalScript-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "Petit Formal Script";
  src: url("../fonts/petitformalscript/PetitFormalScript-Bold.ttf") format("truetype");
  font-weight: 700;
}