/* ut-content — panel.
 *
 * Esto no es una web: es la sala de control de un servicio editorial. Quien la
 * abre viene a responder tres preguntas — qué está en marcha, qué está atascado
 * y por qué, y qué puede aprobar ya. Todo lo de aquí sirve a eso.
 *
 * La forma es la de Metricool, que es la herramienta que esta gente ya sabe
 * usar: barra oscura arriba con las secciones, filete de color debajo, solapas
 * subrayadas dentro de cada vista, y todo lo demás en tarjetas blancas de borde
 * fino sobre gris muy claro. Los controles son pastillas de 38 px.
 *
 * El color NO es el de Metricool: sale del logo de UTIO — magenta #C10E8E y
 * añil #2D2763. El magenta es el acento (activo, primario, hoy); el añil es la
 * barra y la tinta. Donde Metricool pone su franja arcoíris, aquí va un
 * degradado añil → magenta.
 *
 * Sin recursos externos: la CSP del servicio es 'self'. La tipografía es la
 * misma que usa Metricool (Plus Jakarta Sans, SIL OFL) y se sirve desde
 * /panel/fuentes/.
 */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/panel/fuentes/jakarta-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/panel/fuentes/jakarta-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(/panel/fuentes/jakarta-latin-i.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(/panel/fuentes/jakarta-latin-ext-i.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light dark;

  /* --- Del logo ---------------------------------------------------------
   * Los dos únicos colores del logotipo, medidos sobre el JPG original.
   * Todo lo demás de la paleta se deriva de estos dos. */
  --magenta: #c10e8e;
  --anil: #2d2763;

  --magenta-oscuro: #a30b78;
  --magenta-tinta: #ffffff;
  --magenta-12: #fbe8f5;
  --magenta-06: #fdf3fa;

  --anil-barra: #241d52;
  --anil-claro: #4a3f96;

  --papel: #f3f3f6;
  --panel: #ffffff;
  --panel-2: #f7f7fa;
  --tinta: #241f47;
  --tinta-2: #6b6880;
  --filete: #e6e5ec;
  --filete-fuerte: #d4d2de;

  /* Estados. Verde/ámbar/rojo desaturados para convivir con el magenta. */
  --activa: #0e8a5f;
  --espera: #b26b00;
  --corte: #c4322b;

  /* Tipos de evento del calendario. */
  --tema: #6b4ee6;
  --hueco: #8e8ba3;
  --campana: #c10e8e;
  --publicacion: #b26b00;
  --publicado: #0e8a5f;

  /* Un radio por función, no uno para todo. */
  --r-control: 8px;
  --r-tarjeta: 12px;
  --r-marco: 14px;
  --r-pastilla: 999px;

  --sombra-1: 0 1px 2px rgba(36, 31, 71, 0.06);
  --sombra-2: 0 2px 4px rgba(36, 31, 71, 0.06), 0 8px 20px rgba(36, 31, 71, 0.08);

  /* Alias que usan partes añadidas después con otro nombre. Sin ellos, cuatro
     colores (enlaces de campaña, textos tenues, el contorno de una vivencia
     destacada) no se pintaban: una variable sin definir no avisa. Apuntan a
     los tokens de arriba, así que el modo oscuro los sigue solo. */
  --acento: var(--magenta);
  --tenue: var(--tinta-2);
  --borde: var(--filete);
  --error: var(--corte);
  --aviso: var(--espera);
  --ok: var(--activa);

  --tipo: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #14112b;
    --panel: #1d1940;
    --panel-2: #251f4d;
    --tinta: #ebe9f5;
    --tinta-2: #a29ec0;
    --filete: #322b60;
    --filete-fuerte: #453c78;

    --magenta: #f472c0;
    --magenta-oscuro: #f9a8d8;
    --magenta-tinta: #26082a;
    --magenta-12: #3a2158;
    --magenta-06: #2a2050;

    --anil-barra: #1a1540;
    --anil-claro: #8b7ede;

    --activa: #4ec99a;
    --espera: #e2a750;
    --corte: #f4867e;

    --tema: #a996f5;
    --hueco: #8e8ba3;
    --campana: #f472c0;
    --publicacion: #e2a750;
    --publicado: #4ec99a;

    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --sombra-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--tipo);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel);
  accent-color: var(--magenta);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { letter-spacing: -0.02em; }

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 2px;
  border-radius: 3px;
}

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

/* --- Barra superior -----------------------------------------------------
 *
 * Como la de Metricool: oscura, de lado a lado, con las secciones dentro.
 * Marca a la izquierda, secciones en medio, estado y salida a la derecha.
 */

.cabecera {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: nowrap;
  padding: 0 20px;
  min-height: 58px;
  background: var(--anil-barra);
  color: #fff;
}
.marca { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.marca h1 {
  font-size: 15.5px;
  margin: 0;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.marca .logo { width: 30px; height: 30px; flex: 0 0 auto; display: block; }
/* Si el SVG del logo no llega, queda el cuadrado magenta: la marca sigue ahí. */
span.logo { border-radius: 8px; background: var(--magenta); }

.estado-global {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  /* Envuelve y no se encoge: es lo que antes empujaba a las pestañas. */
  flex-wrap: wrap;
  flex: 0 0 auto;
  max-width: 100%;
  margin-inline-start: auto;
  padding: 6px 0;
}
/* El correo de quien ha entrado puede ser largo: se recorta antes que empujar
   las secciones fuera de la barra. */
.estado-global .pastilla {
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.estado-global .pastilla::before {
  display: inline-block;
  vertical-align: middle;
  margin: -1px 6px 0 0;
}

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--r-pastilla);
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.pastilla::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.pastilla.ok { color: #6ee7b7; }
.pastilla.error { color: #fda4a4; }
.pastilla.aviso { color: #fcd68a; }

.cabecera button,
.cabecera .boton {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-control);
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
}
.cabecera button:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
}

/* --- Secciones (dentro de la barra) ------------------------------------- */

.pestanas {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 6px 0;
  min-width: 0;
  flex: 0 1 auto;
}
.pestanas::-webkit-scrollbar { display: none; }

.pestana {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  appearance: none;
  background: none;
  border: 0;
  border-radius: var(--r-control);
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.68);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s, background-color 0.12s;
}
.pestana svg { width: 18px; height: 18px; flex: 0 0 auto; }
.pestana:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.pestana.activa { color: #fff; font-weight: 700; background: rgba(255, 255, 255, 0.14); }

/* El filete de color bajo la barra. Metricool pone ahí su arcoíris; aquí van
   los dos colores del logo y lo que hay entre ellos. */
.filete-marca {
  height: 3px;
  background: linear-gradient(90deg, var(--anil) 0%, var(--anil-claro) 28%, var(--tema) 48%, var(--magenta) 74%, #f0569f 100%);
}

/* --- Vistas ------------------------------------------------------------- */

/* Las vistas se ocultan con el atributo `hidden`, no con una clase: no se
   declara `display` aquí, porque cualquier valor ganaría al del navegador y
   dejaría todas visibles a la vez. */
.vista { max-width: 1180px; margin: 0 auto; padding: 26px 24px 80px; }
[hidden] { display: none !important; }

/* `.titulo-vista` envuelve encabezado, entradilla y botones. Unas vistas
   meten el texto en un `div` y otras lo cuelgan directamente, así que la
   regla tiene que servir para las dos formas: el `h2` ocupa siempre la
   línea entera y los controles se van al margen derecho. */
.titulo-vista {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 20px;
  margin: 0 0 22px;
}
.titulo-vista > div { flex: 1 1 460px; min-width: 0; }
.titulo-vista > h2 { flex: 1 1 100%; }
.titulo-vista > .lead { flex: 1 1 460px; }
.titulo-vista h2 { font-size: 24px; font-weight: 800; margin: 0 0 5px; }
.titulo-vista .controles { margin: 0 0 0 auto; }
.lead { color: var(--tinta-2); margin: 0; max-width: 72ch; font-size: 14px; }

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--filete);
  border-radius: var(--r-tarjeta);
  padding: 20px 22px;
  margin-bottom: 16px;
}
.tarjeta-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.tarjeta-cabecera h3 { font-size: 15.5px; margin: 0; font-weight: 700; }
.tarjeta-cabecera h4 { font-size: 14px; margin: 0; font-weight: 700; }

/* --- Tipografía de apoyo ------------------------------------------------ */

.meta { color: var(--tinta-2); font-size: 13px; margin: 4px 0; max-width: 76ch; }
.ayuda { color: var(--tinta-2); margin: 0 0 16px; max-width: 72ch; }
/* Una pista va dentro de la etiqueta a la que acompaña, así que tiene que
   distinguirse de ella sin depender del color: si hereda el peso de la
   etiqueta, «Modelo de texto» y su aclaración se leen como una sola cosa. */
.pista {
  color: var(--tinta-2);
  font-size: 11.5px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
}
.vacio, .vacia { color: var(--tinta-2); padding: 20px 0; }

code, .mono { font-family: var(--mono); font-size: 0.92em; }

.hallazgos { margin: 8px 0 0; padding-inline-start: 18px; }
.hallazgos li { margin-bottom: 6px; color: var(--tinta-2); }
.hallazgos code { color: var(--tinta); }
/* El motivo del bloqueo, en la tarjeta: la cita del artículo va en cursiva
   para que se distinga de lo que dice el auditor sobre ella. */
.bloqueo { max-width: 90ch; }
.bloqueo .hallazgos { margin-top: 4px; }
.bloqueo .cita, .evidencias .cita { font-style: italic; color: var(--tinta-2); }
/* Las evidencias: cada hallazgo con sus candidatas y una casilla por fuente. */
.evidencias { max-width: 90ch; margin-top: 10px; }
.evidencias .hallazgo-evidencia { margin-top: 10px; padding-inline-start: 10px; border-inline-start: 2px solid var(--borde, #d9d6e8); }
.evidencias .candidata { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; cursor: pointer; }
.evidencias .candidata input { margin: 0; }
.evidencias .hallazgos li p { margin: 2px 0 0 22px; }

.resultado { margin: 10px 0 0; font-size: 13px; font-weight: 500; }
.resultado.ok { color: var(--activa); }
.resultado.error { color: var(--corte); }
.resultado.aviso { color: var(--espera); }

/* Las etiquetas de estado son de relleno suave, no de contorno: en una lista
   larga, doce contornos de colores hacen ruido y doce manchas suaves no. */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pastilla);
  font-size: 11.5px;
  font-weight: 600;
  border: 0;
  background: color-mix(in srgb, currentColor 13%, transparent);
  white-space: nowrap;
}
.etiqueta.pendiente { color: var(--tinta-2); }
.etiqueta.ok { color: var(--activa); }
.etiqueta.error { color: var(--corte); }
.etiqueta.aviso { color: var(--espera); }

/* --- Controles ---------------------------------------------------------- */

button, .boton {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: inherit;
  font-weight: 600;
  height: 38px;
  padding: 0 15px;
  border-radius: var(--r-control);
  border: 1px solid var(--filete-fuerte);
  background: var(--panel);
  color: var(--tinta);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s, background-color 0.12s, box-shadow 0.12s;
}
button:hover:not(:disabled), .boton:hover {
  border-color: var(--tinta-2);
  background: var(--panel-2);
}
button:disabled { opacity: 0.45; cursor: not-allowed; }

button.primario, .boton.primario {
  background: var(--magenta);
  border-color: var(--magenta);
  color: var(--magenta-tinta);
}
button.primario:hover:not(:disabled), .boton.primario:hover {
  background: var(--magenta-oscuro);
  border-color: var(--magenta-oscuro);
}

/* Destructivo: se distingue del resto, no se esconde. */
button.peligro {
  color: var(--corte);
  border-color: color-mix(in srgb, var(--corte) 40%, transparent);
}
button.peligro:hover:not(:disabled) {
  background: color-mix(in srgb, var(--corte) 8%, transparent);
  border-color: var(--corte);
}

.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.controles { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }

input, select, textarea {
  font: inherit;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--r-control);
  border: 1px solid var(--filete-fuerte);
  background: var(--panel);
  color: var(--tinta);
  max-width: 100%;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px var(--magenta-12);
}
input[type="checkbox"], input[type="radio"] { height: auto; }
textarea { width: 100%; height: auto; resize: vertical; padding: 10px 12px; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: var(--tinta-2); opacity: 0.65; }

.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.campo > label, .campo > span:first-child {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta-2);
}

.rejilla, .rejilla-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }

/* Un interruptor de verdad, como los de Metricool: se ve encendido o apagado
   sin leer la etiqueta. Sigue siendo un checkbox, así que el JS no cambia. */
.interruptor { display: flex; align-items: flex-start; gap: 11px; margin: 14px 0; cursor: pointer; }
.interruptor input[type="checkbox"] {
  appearance: none;
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  margin: 1px 0 0;
  border-radius: var(--r-pastilla);
  border: 0;
  background: var(--filete-fuerte);
  position: relative;
  cursor: pointer;
  transition: background-color 0.15s;
}
.interruptor input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sombra-1);
  transition: transform 0.15s;
}
.interruptor input[type="checkbox"]:checked { background: var(--magenta); }
.interruptor input[type="checkbox"]:checked::after { transform: translateX(16px); }
.interruptor input:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }

.inline { display: inline-flex; align-items: center; gap: 7px; }
/* `.icono` marca un control que es solo un símbolo (las flechas del mes): es
   cuadrado, del alto de los demás controles. */
button.icono {
  width: 38px;
  padding: 0;
  font-size: 17px;
  line-height: 1;
  color: var(--tinta-2);
}
button.icono:hover:not(:disabled) { color: var(--tinta); }

/* El navegador de mes es un solo control segmentado, no tres sueltos. */
.navegador-mes {
  display: inline-flex;
  align-items: center;
  height: 38px;
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--r-control);
  background: var(--panel);
  overflow: hidden;
}
.navegador-mes button.icono {
  border: 0;
  border-radius: 0;
  height: 100%;
  background: none;
}
.navegador-mes button.icono:hover { background: var(--panel-2); }
.navegador-mes .mes-actual {
  min-width: 150px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 0 4px;
}
/* El mes llega como «septiembre de 2026»: se levanta la primera letra y ya.
   `text-transform: capitalize` ponía «Septiembre De 2026». */
.navegador-mes .mes-actual::first-letter { text-transform: uppercase; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--filete); vertical-align: top; }
thead th { font-size: 12px; color: var(--tinta-2); font-weight: 600; background: var(--panel-2); }
thead th:first-child { border-top-left-radius: var(--r-control); }
thead th:last-child { border-top-right-radius: var(--r-control); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tr.apagada { opacity: 0.55; }

.salida {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--panel-2);
  border: 1px solid var(--filete);
  border-radius: var(--r-control);
  padding: 14px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 340px;
  overflow: auto;
}

.toasts {
  position: fixed;
  inset-inline-end: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 40;
  max-width: min(420px, calc(100vw - 36px));
}
.toasts > div {
  background: var(--panel);
  border: 1px solid var(--filete);
  border-inline-start: 4px solid var(--tinta-2);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-2);
  padding: 12px 16px;
  font-size: 13px;
}
.toasts > div.ok { border-inline-start-color: var(--activa); }
.toasts > div.error { border-inline-start-color: var(--corte); }


/* --- Una campaña es una tarjeta con su filete de estado ----------------- */

.linea {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--filete);
  border-inline-start: 4px solid var(--filete-fuerte);
  border-radius: 5px var(--r-tarjeta) var(--r-tarjeta) 5px;
  padding: 16px 20px;
  margin-bottom: 12px;
  transition: box-shadow 0.12s, border-color 0.12s;
}
.linea:hover { box-shadow: var(--sombra-1); }
.linea.es-ok { border-inline-start-color: var(--activa); }
.linea.es-error { border-inline-start-color: var(--corte); }
.linea.es-pendiente { border-inline-start-color: var(--espera); }
/* Un fallo al publicar no es contenido rechazado: ámbar, no rojo. */
.linea.es-aviso { border-inline-start-color: var(--espera); }

.linea-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.linea-id {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--tinta-2);
  background: var(--panel-2);
  border-radius: 5px;
  padding: 2px 7px;
}
.linea-tema { font-size: 15.5px; font-weight: 700; margin: 0; flex: 1 1 320px; }

/* El recorrido: los 7 pasos son una secuencia real, por eso se ven como una
   barra segmentada que se va llenando de izquierda a derecha. */
.recorrido {
  display: flex;
  gap: 4px;
  margin: 16px 0 14px;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}
.recorrido li {
  flex: 1 1 60px;
  min-width: 52px;
  font-size: 11px;
  font-weight: 500;
  color: var(--tinta-2);
  border-top: 3px solid var(--filete);
  border-radius: 2px;
  padding-top: 6px;
}
.recorrido li.hecho { border-top-color: var(--activa); }
.recorrido li.actual { border-top-color: var(--magenta); color: var(--tinta); font-weight: 700; }
.recorrido li.corte { border-top-color: var(--corte); color: var(--corte); font-weight: 700; }

/* --- Calendario ---------------------------------------------------------
 *
 * El de Metricool: el día lleva su número grande arriba a la izquierda, la
 * columna de hoy va teñida, y cada evento es una tarjetita blanca con un
 * filete de color a la izquierda que dice de qué tipo es.
 */

.calendario {
  background: var(--panel);
  border: 1px solid var(--filete);
  border-radius: var(--r-marco);
  padding: 18px;
}
.mes-actual { font-size: 15px; font-weight: 700; margin: 0; }

.cabecera-dias, .rejilla-mes {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.rejilla-mes {
  gap: 1px;
  background: var(--filete);
  border: 1px solid var(--filete);
  border-radius: 10px;
  overflow: hidden;
}
.cabecera-dias { margin: 0 0 8px; gap: 1px; }
/* Los días de la semana en versal: es la convención de cualquier calendario,
   y aquí distingue la cabecera del número grande que va debajo. */
.cabecera-dias span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tinta-2);
  padding-inline-start: 10px;
}

.dia {
  min-width: 0;
  min-height: 108px;
  /* Una celda no crece con sus eventos: si crece, un día cargado descuadra la
     semana entera. Lo que no cabe se resume en «+N más». */
  max-height: 264px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  height: auto;
  padding: 7px 7px 8px;
  background: var(--panel);
  text-align: start;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
}
.dia:hover { background: var(--panel-2); }
.dia.fuera { background: var(--panel-2); }
.dia.fuera .numero { opacity: 0.45; }
.dia .numero {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  padding-inline-start: 3px;
}
/* Hoy se tiñe la celda entera, como la columna del día en Metricool. */
.dia.hoy { background: var(--magenta-12); }
.dia.hoy:hover { background: var(--magenta-06); }
.dia.hoy .numero { color: var(--magenta); font-weight: 800; }

/* Un evento del calendario es un botón con el texto dentro, sin envoltorios:
   se recorta él mismo en una línea. Antes ocupaba toda la celda y un jueves con
   cuatro eventos medía 500 px de alto. */
.evento {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  text-align: start;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  padding: 3px 7px 4px;
  border: 1px solid var(--filete);
  border-inline-start: 3px solid var(--hueco);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: var(--sombra-1);
  color: var(--tinta);
  /* La regla general de `button` pone nowrap: aquí hace falta lo contrario,
     o el clamp de dos líneas no tiene nada que recortar. */
  white-space: normal;
  display: block;
  overflow: hidden;
}
/* El recorte va en el span interior: sobre el botón Chromium lo ignora. */
.evento-texto {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.evento:hover { background: var(--panel); border-color: var(--filete-fuerte); box-shadow: var(--sombra-2); }
.evento.tema { border-inline-start-color: var(--tema); }
.evento.hueco { border-inline-start-color: var(--hueco); }
.evento.campana { border-inline-start-color: var(--campana); }
.evento.publicacion { border-inline-start-color: var(--publicacion); }
.evento.publicado { border-inline-start-color: var(--publicado); }

.fila-evento { font-size: 13px; display: flex; align-items: center; gap: 8px; min-width: 0; }

.punto { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.punto.tema { background: var(--tema); }
.punto.hueco { background: var(--hueco); }
.punto.campana { background: var(--campana); }
.punto.publicacion { background: var(--publicacion); }
.punto.publicado { background: var(--publicado); }

.leyenda {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  font-size: 12px;
  color: var(--tinta-2);
}
.leyenda span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--panel);
  border: 1px solid var(--filete);
  border-radius: var(--r-pastilla);
  padding: 4px 12px;
  font-weight: 500;
}

.detalle-dia { margin-top: 16px; box-shadow: var(--sombra-2); }

/* --- Detalle de campaña: solapas, artículo, enlaces, fuentes ------------ */

.solapas {
  display: flex;
  gap: 6px;
  margin: 16px 0;
  border-bottom: 1px solid var(--filete);
  flex-wrap: wrap;
}
.solapas button {
  background: none;
  border: 0;
  border-bottom: 2.5px solid transparent;
  border-radius: 0;
  height: auto;
  margin-bottom: -1px;
  padding: 9px 6px;
  color: var(--tinta-2);
  font: inherit;
  font-weight: 500;
  font-size: 14.5px;
  cursor: pointer;
}
.solapas button:hover { color: var(--tinta); background: none; border-color: transparent; }
.solapas button.activa { color: var(--tinta); border-bottom-color: var(--magenta); font-weight: 700; }

.articulo-cabecera { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 14px; flex-wrap: wrap; }
.articulo-cabecera h4 { margin: 0 0 4px; }
.portada {
  width: 200px;
  height: 112px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--filete);
  flex: 0 0 auto;
  background: var(--panel-2);
}
.portada.vacia {
  display: grid;
  place-items: center;
  color: var(--tinta-2);
  font-size: 12px;
  border-style: dashed;
  padding: 0;
}

.articulo-cuerpo {
  max-width: 68ch;
  line-height: 1.7;
  border-top: 1px solid var(--filete);
  padding-top: 16px;
}
.articulo-cuerpo h2 { font-size: 19px; margin: 28px 0 8px; }
.articulo-cuerpo h3 { font-size: 15.5px; margin: 20px 0 6px; }
.articulo-cuerpo p, .articulo-cuerpo li { font-size: 14.5px; }
.articulo-cuerpo blockquote {
  margin: 14px 0;
  padding-inline-start: 14px;
  border-inline-start: 3px solid var(--filete-fuerte);
  color: var(--tinta-2);
}
/* Un enlace interno mueve tráfico dentro; uno externo lo manda fuera. En un
   artículo de SEO no es lo mismo, y conviene verlo sin abrirlo. */
.articulo-cuerpo .enlace-externo { text-decoration-style: dotted; }

textarea.editor {
  min-height: 420px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
}

table.enlaces th { width: 30%; }
table.enlaces td input[type="url"] { width: 100%; }
table.enlaces .acciones { margin: 0; }

.tarjeta.fuente { margin: 10px 0; background: var(--panel-2); }
.tarjeta.fuente .campo { margin-bottom: 0; }
.tarjeta.fuente input, .tarjeta.fuente select { width: 100%; }

.vista-previa { border: 1px solid var(--filete); border-radius: 10px; padding: 12px; background: var(--panel-2); }
.lista { list-style: none; padding: 0; margin: 0; }
.lista li { padding: 8px 0; border-bottom: 1px solid var(--filete); }
.lista li:last-child { border-bottom: 0; }

/* Filtros del catálogo de modelos */
.filtros {
  border: 1px solid var(--filete);
  border-radius: var(--r-tarjeta);
  padding: 14px 16px 6px;
  margin: 16px 0;
  background: var(--panel-2);
}
.filtros legend { font-size: 12px; font-weight: 600; color: var(--tinta-2); padding: 0 6px; }
.filtros select { width: 100%; }

/* Comprobación de si el botón puede llegar a la web */
.comprobacion { margin: 14px 0; }
.comprobacion ul { list-style: none; padding: 0; margin: 8px 0 0; }
.comprobacion li { padding: 6px 0; display: flex; gap: 9px; align-items: flex-start; font-size: 13px; }
.comprobacion .marca { flex: 0 0 auto; font-weight: 700; line-height: 1.4; }
.comprobacion li.bien .marca { color: var(--activa); }
.comprobacion li.falta .marca { color: var(--corte); }
.comprobacion .arreglo { display: block; color: var(--tinta-2); font-size: 12px; margin-top: 2px; }

/* --- Entrar -------------------------------------------------------------
 *
 * El ancho estaba en un `style=` dentro del HTML y la CSP del servicio
 * (default-src 'self') bloquea los estilos inline: la tarjeta salía a sangre
 * completa y el navegador registraba una violación de CSP en cada carga.
 */
.entrada {
  max-width: 27rem;
  margin: 56px auto;
  padding: 0 20px;
}
.entrada .tarjeta { padding: 26px 28px; box-shadow: var(--sombra-2); }
.entrada .acciones button { width: 100%; }

/* --- Pantalla estrecha -------------------------------------------------- */

/* Nueve secciones, la campanita y tres pastillas no caben en una línea salvo
   en pantallas muy anchas. Antes se apretaban unas contra otras —las pestañas
   por debajo del estado— y la última quedaba medio tapada. Ahora la navegación
   baja a su propia fila en cuanto hay menos de 1.600 px, y el estado nunca se
   encoge. */
@media (max-width: 1600px) {
  .cabecera { flex-wrap: wrap; padding: 8px 16px; }
  .pestanas { order: 3; flex: 1 1 100%; padding: 0 0 4px; }
  .estado-global {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 100%; margin-inline-start: auto; }
}

@media (max-width: 760px) {
  .vista { padding: 20px 14px 64px; }
  .titulo-vista .controles { margin-inline-start: 0; }
  .articulo-cabecera { flex-direction: column; }
  .portada { width: 100%; height: 160px; }
  .recorrido li { flex-basis: 44px; min-width: 44px; font-size: 10px; }
  .calendario { padding: 10px; }
  .dia { min-height: 74px; padding: 5px; }
  .dia .numero { font-size: 14px; }
  .navegador-mes .mes-actual { min-width: 110px; font-size: 13px; }
}

/* --- Ritmo por plataforma ----------------------------------------------- */

.tarjeta > h4 { font-size: 14px; font-weight: 700; margin: 24px 0 6px; }

#plataformas th, #plataformas td { vertical-align: middle; }
#plataformas { overflow-x: auto; }
#plataformas td:first-child { width: 24%; }
#plataformas select { width: auto; }
#plataformas td .pista { display: block; }
#plataformas input[type="number"], #plataformas input[type="time"] { width: 100%; min-width: 92px; }
/* Un interruptor dentro de una celda no lleva el aire de un bloque suelto. */
#plataformas .interruptor { margin: 0; }
#plataformas input[type="number"], #plataformas input[type="time"] { max-width: 150px; }

/* Un ritmo se elige por su nombre —«cada semana»— y solo se escribe el número
   cuando se quiere uno que no está en la lista. */
.cadencia { display: flex; gap: 8px; align-items: center; min-width: 0; }
.cadencia select { flex: 1 1 auto; min-width: 0; }
.cadencia input[type="number"] { flex: 0 0 auto; width: 84px; }
#plataformas .cadencia select { min-width: 130px; }

/* --- En qué redes publica un perfil ------------------------------------- */

.redes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px; }
.redes .red {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid var(--filete);
  border-radius: var(--r-control);
  background: var(--panel);
  cursor: pointer;
}
.redes .red:hover { border-color: var(--filete-fuerte); }
.redes .red:has(input:checked) { border-color: var(--magenta); background: var(--magenta-06); }
.redes .red span:first-of-type { flex: 1 1 auto; font-weight: 500; }

/* --- Manual --------------------------------------------------------------
 *
 * Un texto para leer, no un panel de control: medida corta, más interlínea y
 * los mismos componentes (tarjetas, etiquetas, tablas) para que se reconozca
 * como la misma herramienta.
 */
.manual { max-width: 860px; margin: 0 auto; padding: 32px 24px 96px; }
.manual h2 { font-size: 30px; font-weight: 800; margin: 0 0 8px; }
.manual h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 44px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--filete);
}
.manual p { line-height: 1.7; max-width: 68ch; }
.manual ul { line-height: 1.7; padding-inline-start: 20px; }
.manual ul li { margin-bottom: 8px; }
.manual table { margin: 16px 0 8px; }
.manual .lead { font-size: 15.5px; margin-bottom: 24px; }

.indice { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.indice a {
  border: 1px solid var(--filete);
  border-radius: var(--r-pastilla);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tinta-2);
  text-decoration: none;
  background: var(--panel);
}
.indice a:hover { border-color: var(--magenta); color: var(--magenta); }

/* Los pasos SÍ son una secuencia, así que van numerados de verdad. */
.manual ol.pasos { list-style: none; counter-reset: paso; padding: 0; margin: 18px 0; }
.manual ol.pasos > li {
  counter-increment: paso;
  position: relative;
  padding: 0 0 18px 46px;
  border-inline-start: 2px solid var(--filete);
  margin-inline-start: 15px;
}
.manual ol.pasos > li:last-child { border-inline-start-color: transparent; padding-bottom: 0; }
.manual ol.pasos > li::before {
  content: counter(paso);
  position: absolute;
  inset-inline-start: -16px;
  top: -2px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--magenta);
  color: var(--magenta-tinta);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.manual ol.pasos > li > strong { display: block; font-size: 15.5px; margin-bottom: 2px; }
.manual ol.pasos > li > p { margin: 0; color: var(--tinta-2); }

@media (max-width: 760px) {
  .manual { padding: 22px 14px 72px; }
  .manual h2 { font-size: 24px; }
}

/* La imagen de una pieza. Se ve a tamaño de móvil a propósito: es el tamaño al
   que la van a mirar, y si a 260 px no se entiende, no sirve. */
.imagen-pieza { margin: 14px 0 0; max-width: 260px; }
.imagen-pieza img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--filete);
  background: var(--panel-2);
}
.imagen-pieza figcaption { margin-top: 6px; font-size: 12px; }

/* ---------------------------------------------------------------------------
   Registro de publicaciones (el CDR)

   Una tabla densa, no tarjetas: aquí se viene a buscar una línea concreta
   entre muchas, y para eso hacen falta columnas alineadas y poco aire. La
   tarjeta de siempre sigue existiendo, desplegada bajo su fila.
   ------------------------------------------------------------------------- */

#pub-filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px 16px;
  align-items: end;
  padding: 16px;
}
#pub-filtros .campo { margin: 0; }
#pub-filtros .campo.ancho { grid-column: span 2; }
#pub-filtros .acciones { margin: 0; align-self: end; }
#pub-filtros input, #pub-filtros select { width: 100%; }

@media (max-width: 720px) {
  #pub-filtros .campo.ancho { grid-column: span 1; }
}

#pub-cuenta { margin: 4px 2px 10px; }

table.registro { width: 100%; border-collapse: collapse; font-size: 13px; }
table.registro th {
  text-align: start;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tinta-2);
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--filete-fuerte);
  white-space: nowrap;
}
table.registro td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--filete);
  vertical-align: top;
}
table.registro tbody tr:hover td { background: var(--magenta-06); }
table.registro tr.es-aviso td:first-child { box-shadow: inset 3px 0 0 var(--espera); }
table.registro .cifra-celda { white-space: nowrap; color: var(--tinta-2); }
table.registro .mono { white-space: nowrap; }
table.registro tr.registro-detalle:hover td { background: transparent; }
table.registro tr.registro-detalle > td { padding: 0 10px 14px; }

/* Un botón que se lee como un enlace: abre la fila sin parecer una acción
   destructiva ni robarle peso a los botones de verdad. */
.enlace-boton {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--magenta);
  text-align: start;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: normal;
}
.enlace-boton:hover { color: var(--magenta-oscuro); }

/* ---------------------------------------------------------------------------
   Figuras del manual: capturas y diagramas.

   Las capturas van dentro de un marco con fondo blanco fijo, y no del papel
   del panel: son imágenes de una interfaz clara, y sobre fondo oscuro
   flotarían como un recorte. Lo mismo para los diagramas, que llevan sus
   colores escritos.
   ------------------------------------------------------------------------- */

.manual figure.captura,
.manual figure.diagrama {
  margin: 22px 0 26px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--r-marco);
}

.manual figure.captura img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-control);
  border: 1px solid #e6e5ec;
}

.manual figure.diagrama svg { display: block; width: 100%; height: auto; }

.manual figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tinta-2);
}

/* Un párrafo que avisa de algo que cuesta un día si no se sabe. Ámbar, no
   rojo: no está roto, es que hay que saberlo. */
.manual .aviso-caja {
  margin: 18px 0;
  padding: 12px 14px;
  border-inline-start: 3px solid var(--espera);
  background: #fff8ec;
  border-radius: 0 var(--r-control) var(--r-control) 0;
  color: var(--tinta);
}
.manual .aviso-caja code { background: rgba(0, 0, 0, .05); padding: 1px 5px; border-radius: 4px; }

.manual h4 {
  margin: 26px 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--tinta);
}

/* El <input type="file"> real va escondido detrás de su botón: cada navegador
   lo pinta a su manera y entre botones se ve como un remiendo. */
.subir { display: inline-flex; }
.imagen-pieza .pista { margin-top: 6px; }

/* ---------------------------------------------------------------------------
   Grupos plegables de Ajustes y Conexiones.

   Las dos vistas habían crecido a siete y cuatro tarjetas seguidas, y llegar a
   «Estándares por tipo de pieza» era bajar media pantalla leyendo títulos. Se
   usa <details> nativo: sin JavaScript, con el teclado funcionando y con el
   estado abierto/cerrado que el navegador ya sabe pintar.
--------------------------------------------------------------------------- */
.grupo { margin: 0 0 14px; border: 1px solid var(--filete); border-radius: 12px; background: var(--panel); }
.grupo > summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-radius: 12px;
}
.grupo > summary:hover { background: var(--panel-2); }
.grupo > summary:focus-visible { outline: 2px solid var(--magenta); outline-offset: -2px; }
.grupo > summary .pista { font-weight: 400; }
.grupo[open] > summary { border-bottom: 1px solid var(--filete); border-radius: 12px 12px 0 0; }
/* Las tarjetas de dentro ya no necesitan su propio marco: lo pone el grupo. */
.grupo > .tarjeta { border: 0; border-radius: 0; margin: 0; background: transparent; }
.grupo > .tarjeta + .tarjeta { border-top: 1px solid var(--filete); }

/* Las técnicas de imagen. Cada una es una fila con su clave, su peso y el
   texto que describe cómo está hecha; el peso lleva al lado el porcentaje que
   le toca, que es lo que de verdad se quiere saber al moverlo. */
.tecnica { border: 1px solid var(--filete); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.tecnica-cab { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 8px; }
.tecnica-cab .campo { margin: 0; }
.tecnica-cab .campo:first-child { flex: 1; max-width: 16rem; }
.tecnica-cab .campo:nth-child(2) { width: 6rem; }
.tecnica-cab .cuota { flex: 1; padding-bottom: 8px; }
.tecnica textarea { width: 100%; }


/* ---------------------------------------------------------------------------
   La campanita.

   El número solo cuenta lo que pide una decisión —roto y lo que no va a salir—.
   Lo publicado se enseña al abrir pero no suma: un contador que nunca baja de
   veinte deja de mirarse, y entonces no avisa de nada.
--------------------------------------------------------------------------- */
/* El botón se llama «boton-avisos» y no «campana»: «campana» es también el
   tipo de evento de campaña del calendario, y el estilo del botón se le
   pegaba a esos eventos (letra de 16 px en una celda de 11). */
.campana-envoltorio { position: relative; margin-inline-start: auto; }
.boton-avisos {
  position: relative;
  background: transparent;
  border: 1px solid var(--filete);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}
.boton-avisos:hover { background: var(--panel-2); }
.boton-avisos svg { width: 18px; height: 18px; display: block; }
.boton-avisos:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }
.campana-cuenta {
  position: absolute;
  top: -7px;
  inset-inline-end: -7px;
  min-width: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--error, #c0392b);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.avisos {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  width: min(30rem, calc(100vw - 2rem));
  max-height: 70vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--filete);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  padding: 12px 14px;
  z-index: 60;
}
.avisos h4 {
  margin: 12px 0 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tenue);
}
.avisos h4:first-child { margin-top: 0; }
.aviso {
  display: flex;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--filete);
  font-size: 13px;
  line-height: 1.45;
}
.aviso:last-child { border-bottom: 0; }
.aviso .punto { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; }
.aviso .punto.rojo { background: var(--error, #c0392b); }
.aviso .punto.ambar { background: var(--aviso, #b26b00); }
.aviso .punto.verde { background: var(--ok, #0e8a5f); }
.aviso .cuerpo { flex: 1; min-width: 0; }
.aviso .cuerpo strong { font-weight: 600; }
.aviso .cuerpo .meta { display: block; }
.avisos .vacio-avisos { font-size: 13px; color: var(--tenue); padding: 6px 0; }
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}


/* ---------------------------------------------------------------------------
   Conexiones: lo que ya funciona, plegado.

   La vista tenía nueve tarjetas abiertas de par en par y había que bajar media
   pantalla para llegar a la que fallaba. Ahora lo validado se pliega a una
   línea y lo que falta se queda abierto: el ojo va a lo que hay que atender.
--------------------------------------------------------------------------- */
.barra-conexiones {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.barra-conexiones input[type="search"] { flex: 1; min-width: 14rem; max-width: 24rem; }
.barra-conexiones .meta { margin-inline-start: auto; }
.interruptor.pequeno { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }

/* Plegada: se ve la cabecera y el resumen, nada más. */
.tarjeta.plegada > *:not(.tarjeta-cabecera):not(.resumen-plegado) { display: none; }
.tarjeta .tarjeta-cabecera { cursor: pointer; }
.tarjeta.plegada .tarjeta-cabecera { margin-bottom: 0; }
.tarjeta-cabecera .plegar {
  margin-inline-start: auto;
  background: transparent;
  border: 0;
  color: var(--tenue);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
}
.tarjeta-cabecera .plegar:hover { color: var(--tinta); }
.tarjeta .resumen-plegado { margin: 6px 0 0; font-size: 13px; color: var(--tenue); }
.tarjeta:not(.plegada) .resumen-plegado { display: none; }
.tarjeta[hidden] { display: none !important; }


/* ---------------------------------------------------------------------------
   Historial de imágenes de una pieza.

   Rehacer una imagen ya no pisa la anterior, así que hay que poder verlas y
   volver a cualquiera. Miniaturas pequeñas y en fila: es un cajón para
   rescatar algo, no una galería que compita con la imagen puesta.
--------------------------------------------------------------------------- */
.historial-imagenes { margin: 12px 0 0; }
.historial-imagenes .tira {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 0 2px;
}
.historial-imagenes .vieja-caja { margin: 0; flex: 0 0 auto; width: 116px; }
.historial-imagenes .vieja {
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.historial-imagenes .vieja:hover { border-color: var(--tinta); }
.historial-imagenes .vieja:disabled { opacity: .5; cursor: progress; }
.historial-imagenes .vieja img { width: 100%; height: 74px; object-fit: cover; display: block; }
.historial-imagenes figcaption { font-size: 11px; line-height: 1.35; margin-top: 4px; }

/* La imagen dentro de «Publicar a mano» y del editor: se mira y se copia. */
.imagen-a-mano { margin: 14px 0 0; }
.imagen-a-mano .imagen-pieza img { max-width: 320px; }


/* ---------------------------------------------------------------------------
   Revisión de uso (sept. 2026)
--------------------------------------------------------------------------- */

/* `hidden` manda. Un `display: flex` en una clase se lo saltaba, y así es como
   un desplegable oculto acabó pintado como una píldora vacía en la esquina. */
[hidden] { display: none !important; }

/* Campañas terminadas, a una línea. Doce tarjetas idénticas con sus siete
   barritas en verde no dicen nada: lo que hay que ver es la que espera. */
.linea.compacta { padding-top: 10px; padding-bottom: 10px; }
.linea.compacta .linea-cabecera { margin-bottom: 2px; }
.linea.compacta .meta { margin: 2px 0 6px; }
.linea.compacta .acciones { margin-top: 4px; }

/* Cola de temas: las acciones de cada fila, discretas hasta que se usan. Con
   veinte temas había veinte botones magenta y veinte campos de fecha a la
   vez; ahora la fecha se abre cuando se pide. */
.acciones-tema { gap: 6px; align-items: center; flex-wrap: wrap; }
.acciones-tema input[type="datetime-local"] { max-width: 15rem; }
button.discreto {
  background: transparent;
  border-color: transparent;
  color: var(--tinta-2);
}
button.discreto:hover { border-color: var(--filete); color: var(--tinta); }

/* El origen de una publicación («a mano», «el hub») no se parte en dos líneas. */
table.registro .nowrap { white-space: nowrap; }

/* La imagen de la pieza en su vista normal: pequeña, a la derecha del texto. */
.galeria-pieza { margin-top: 8px; }
.galeria-pieza .imagen-pieza img { max-width: 260px; }

/* Propuestas de rótulo: tres frases para elegir; la elegida pasa al campo. */
.propuestas-rotulo { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; }
.propuestas-rotulo:empty { display: none; }
.propuesta { border-radius: 999px; font-size: 13px; padding: 4px 12px; }

/* Campanita: acciones de leído y borrado. Una fila leída se atenúa, no se va:
   lo que se quiere fuera se quita con su aspa. */
/* La fila de acciones se queda arriba aunque la lista sea larga: «marcar todo
   como leído» no debería exigir bajar hasta el final. */
.avisos-acciones { position: sticky; top: 0; z-index: 1; background: var(--panel); display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--filete); margin-bottom: 4px; }
.avisos-acciones button { font-size: 12px; padding: 4px 8px; }
.aviso.leido { opacity: 0.55; }
.aviso.leido .punto { background: var(--tinta-2); }
.aviso .quitar { flex: 0 0 auto; align-self: flex-start; border: 0; background: transparent; color: var(--tinta-2); font-size: 16px; line-height: 1; padding: 2px 6px; cursor: pointer; border-radius: 6px; }
.aviso .quitar:hover { background: var(--panel-2); color: var(--tinta); }

/* Métricas: cifras grandes arriba, tarjetas debajo, barras sin librería. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--panel); border: 1px solid var(--filete); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.kpi-valor { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.kpi-etiqueta { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-2); }
.kpi-nota { font-size: 12.5px; color: var(--tinta-2); margin-top: 4px; }
.kpi.aviso { border-color: var(--espera); }
.kpi.aviso .kpi-valor { color: var(--espera); }
.kpi.ok .kpi-valor { color: var(--activa); }
.rejilla-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.tarjeta.metrica { margin: 0; }
.tabla-metricas { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 6px; }
.tabla-metricas th, .tabla-metricas td { text-align: start; padding: 5px 8px 5px 0; border-bottom: 1px solid var(--filete); vertical-align: top; }
.tabla-metricas thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-2); font-weight: 600; }
.tabla-metricas tbody th { font-weight: 500; }
.tabla-metricas td { font-variant-numeric: tabular-nums; }
.barras { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding-top: 18px; margin-top: 8px; }
.barra-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; min-width: 0; }
.barra-pila { width: 100%; max-width: 38px; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 2px 2px; overflow: hidden; min-height: 2px; background: var(--filete); }
.barra { width: 100%; }
.barra.articulos { background: var(--magenta); }
.barra.posts { background: color-mix(in srgb, var(--magenta) 40%, var(--panel)); }
.barra-etiqueta { font-size: 11px; color: var(--tinta-2); margin-top: 6px; white-space: nowrap; }
.barra-cifra { position: absolute; top: -18px; font-size: 11.5px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }

/* El reel dentro de la galería de la pieza: vertical, a un tamaño que se vea sin ocupar la pantalla. */
.video-pieza video { width: 100%; max-width: 270px; aspect-ratio: 9 / 16; background: #000; border-radius: 10px; display: block; }

/* --- Vivencias ------------------------------------------------------------ */

.rejilla-vivencias { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.viv-tarjeta { margin: 0; display: flex; flex-direction: column; }
.viv-tarjeta .tarjeta-cabecera h3 { font-size: 15px; overflow-wrap: anywhere; }
.viv-tarjeta .acciones { margin-top: auto; padding-top: 12px; }
.viv-texto { white-space: pre-wrap; margin: 6px 0 8px; font-size: 14px; line-height: 1.5; }
.viv-fotos { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
.viv-fotos img { width: 112px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--filete); display: block; }
.viv-fotos a:hover img { border-color: var(--magenta); }
.viv-audio { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.viv-audio audio { max-width: 100%; height: 36px; }
.viv-nueva { border-inline-start: 3px solid var(--espera); }
.viv-usada, .viv-archivada { opacity: 0.85; }
/* Los botones de elegir fichero van como pastillas normales: el input real queda escondido. */
.viv-adjuntos label.boton { cursor: pointer; }
.viv-adjuntos { margin-top: 0; }

/* --- Personas: rol, WhatsApp y plataformas ------------------------------- */

.casillas { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0; }
.casilla { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; }
.casilla input { width: 15px; height: 15px; margin: 0; }
.tabla-personas td { vertical-align: top; }
.tabla-personas select, .tabla-personas input[type="tel"] { width: 100%; max-width: 220px; }
.tabla-personas .pista { display: block; margin-top: 6px; }

/* --- Almacén ------------------------------------------------------------- */

.al-opciones { margin-top: 4px; }

@media (max-width: 760px) {
  .rejilla-vivencias { grid-template-columns: 1fr; }
  .viv-fotos img { width: 96px; height: 72px; }
  #viv-form .rejilla { grid-template-columns: 1fr; }
}
.tabla-personas td:nth-child(2) { min-width: 230px; }

/* --- Editor del reel ------------------------------------------------------ */

.reel-editor .escenas { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.reel-editor .escena { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: start; padding: 8px; border: 1px solid var(--filete); border-radius: 10px; background: var(--panel); }
.reel-editor .mini-fondo { width: 54px; height: 96px; object-fit: cover; border-radius: 6px; background: #000; display: block; }
.reel-editor .escena-cuerpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.reel-editor .escena-cuerpo input[type="text"] { width: 100%; font-size: 15px; }
.reel-editor .escena-pie { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.reel-editor .escena-pie select { flex: 1 1 200px; min-width: 0; font-size: 12px; }
.reel-editor .escena-botones { display: flex; flex-direction: column; gap: 2px; }
.reel-editor .estilo-reel { margin: 6px 0 10px; }
@media (max-width: 760px) {
  .reel-editor .escena { grid-template-columns: 44px 1fr auto; }
  .reel-editor .mini-fondo { width: 44px; height: 78px; }
}

/* Un aviso largo dentro de una tarjeta: párrafo de ayuda en ámbar, no una línea de resultado. */
.nota-aviso { color: var(--espera); }
.nota-aviso strong { color: inherit; }

/* --- Apps del hub -------------------------------------------------------- */
.nota-hub { color: var(--activa); }
button.enlace { appearance: none; background: none; border: 0; padding: 0; height: auto; color: var(--magenta); text-decoration: underline; font: inherit; cursor: pointer; }
.app-hub { border: 1px solid var(--filete); border-radius: 10px; padding: 14px 16px; margin: 0 0 12px; background: var(--panel); }
.app-hub h4 { margin: 0 0 4px; font-size: 14.5px; }
.app-hub .retornos code { display: inline-block; margin: 2px 6px 2px 0; }

/* --- Tu plan ------------------------------------------------------------- */
.plan-uso { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.cuota { border: 1px solid var(--filete); border-radius: 10px; padding: 10px 12px; background: var(--panel); }
.cuota-texto { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.cuota strong { font-size: 13.5px; }
.cuota .barra { height: 6px; border-radius: 999px; background: var(--panel-2); margin-top: 8px; overflow: hidden; }
.cuota .barra i { display: block; height: 100%; background: var(--magenta); border-radius: 999px; }
.cuota.agotada .barra i { background: var(--corte); }
.cuota.agotada strong { color: var(--corte); }

/* --- Estilos de escritura ------------------------------------------------ */
.rejilla-estilos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.estilo { border: 1px solid var(--filete); border-radius: 12px; padding: 14px 16px; background: var(--panel); display: flex; flex-direction: column; gap: 6px; }
.estilo.elegido { border-color: var(--magenta); box-shadow: 0 0 0 2px var(--magenta-12); }
.estilo-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.estilo-ejemplo { margin: 4px 0; padding: 8px 12px; border-inline-start: 3px solid var(--magenta); background: var(--panel-2); font-style: italic; font-size: 13.5px; border-radius: 0 8px 8px 0; }
.estilo .acciones { margin-top: auto; }


/* Métricas de una publicación y su registro a mano. */
.metricas-publicacion { margin: 6px 0 4px; }
/* Nombre propio: `rejilla-metricas` es la del panel de Métricas, y reutilizarlo
   aquí dejaba aquellas tarjetas a 9rem de ancho. */
.rejilla-cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 8px; margin: 8px 0; }
.rejilla-cifras .campo { margin: 0; }
.rejilla-cifras input { width: 100%; }


/* Métricas en portátil y tablet: las tarjetas nunca más estrechas de lo que
   necesita su tabla, y si aun así no cabe, la tabla se desplaza dentro de su
   tarjeta en vez de empujar la página entera hacia un lado. */
.rejilla-metricas > * { min-width: 0; overflow-x: auto; }
.tabla-metricas th, .tabla-metricas td { white-space: nowrap; }
.tabla-metricas td:first-child, .tabla-metricas th:first-child { white-space: normal; min-width: 7rem; }

/* Pestañas en tablet: en dos filas, a la vista, en lugar de una fila que se
   desliza con la barra oculta y deja Conexiones y Ajustes fuera sin avisar. */
@media (max-width: 1100px) {
  .pestanas { flex-wrap: wrap; overflow-x: visible; row-gap: 2px; }
}


/* Vivencias: dónde ha acabado cada una, y su historia. */
.viv-seguimiento { margin: 10px 0 4px; }
.viv-seguimiento h4 { margin: 0 0 6px; font-size: 13px; }
.viv-salidas { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 6px; }
.viv-salidas li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13.5px; }
.viv-salida-acciones { display: inline-flex; gap: 10px; margin-inline-start: auto; }
.viv-historial { margin: 6px 0 0; padding-inline-start: 18px; font-size: 13px; display: grid; gap: 3px; }
.linea.destacada { outline: 2px solid var(--acento); outline-offset: 2px; transition: outline-color .6s; }


/* Publicaciones propias. */
#propias .tarjeta-cabecera { display: flex; align-items: center; gap: 12px; }
#propias .tarjeta-cabecera button { margin-inline-start: auto; }
#propias-lista { display: grid; gap: 10px; margin-top: 12px; }
.linea.propia .linea-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.linea.propia .linea-cabecera .etiqueta:last-child { margin-inline-start: auto; }
.propia-imagen { max-width: 240px; border-radius: 8px; display: block; margin: 6px 0; }
.pista.error { color: var(--corte); }

.redes-propia { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.casilla-red { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--filete); border-radius: 999px; cursor: pointer; font-size: 14px; }
.casilla-red input { margin: 0; width: auto; }
.casilla-red:has(input:checked) { border-color: var(--acento); background: var(--magenta-06, transparent); }
#propia-form .dos-columnas > * { min-width: 0; }

/* El registro, con su columna de rendimiento, se desplaza dentro de su caja en tablet. */
#registro-publicaciones { overflow-x: auto; }
.casilla-red input[type="checkbox"] { flex: 0 0 16px; width: 16px; min-width: 0; height: 16px; padding: 0; }
.casilla-red span { white-space: nowrap; }

/* Piezas sin publicar: filtros y lista. */
#pendientes .tarjeta-cabecera { display: flex; align-items: baseline; gap: 12px; }
#pend-total { margin-inline-start: auto; }
.pend-situaciones { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.pend-situaciones button { padding: 5px 12px; border-radius: 999px; font-size: 13.5px; min-height: 0; }
.pend-situaciones button[aria-pressed="true"] { border-color: var(--acento); color: var(--acento); background: var(--magenta-06, transparent); font-weight: 600; }
.pend-situaciones button .n { margin-inline-start: 6px; opacity: .7; font-variant-numeric: tabular-nums; }
.pend-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 8px 12px; margin-bottom: 12px; }
.pend-filtros > * { min-width: 0; }
.pend-filtros select, .pend-filtros input { width: 100%; }
#pendientes-lista { display: grid; gap: 10px; }
.linea.pendiente .linea-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.linea.pendiente .linea-cabecera .etiqueta:last-child { margin-inline-start: auto; }
.pend-cuerpo { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0; }
.pend-cuerpo > div { min-width: 0; flex: 1; }
.pend-miniatura { width: 88px; height: 88px; object-fit: cover; border-radius: 6px; flex: 0 0 88px; }
.pend-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pend-panel { border-top: 1px solid var(--filete); margin-top: 8px; padding-top: 8px; display: grid; gap: 8px; }
button.enlace-campana { background: none; border: 0; padding: 0; min-height: 0; color: var(--acento); text-decoration: underline; font: inherit; cursor: pointer; }
@media (max-width: 560px) { .pend-miniatura { width: 64px; height: 64px; flex-basis: 64px; } }

/* Mandar el enlace de acceso: copiar, WhatsApp o correo, junto al enlace. */
.acciones-envio { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.acciones-envio button, .acciones-envio .boton { padding: 5px 12px; font-size: 13.5px; min-height: 0; }

/* Índice de manuales: tres caminos, uno por oficio. */
.rejilla-manuales { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 16px; margin: 20px 0 28px; }
.rejilla-manuales .tarjeta { margin: 0; }
.rejilla-manuales .titulo-manual { margin: 0 0 8px; font-size: 19px; }
.rejilla-manuales h3 a { text-decoration: none; }
.rejilla-manuales h3 a:hover { text-decoration: underline; }

/* Los vídeos cortos del manual, de dos en dos cuando hay sitio. */
.rejilla-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 16px; margin: 16px 0 28px; }
.rejilla-videos .tarjeta { margin: 0; }
.rejilla-videos h4 { margin: 0 0 10px; font-size: 16px; }
.rejilla-videos video { border-radius: 10px; background: #000; }
.rejilla-videos .meta { margin: 8px 0 0; }
/* La duración, con cifras de la misma anchura: puestas en columna, unos
   minutos y segundos que bailan se leen peor que los que se alinean. */
.duracion { font-variant-numeric: tabular-nums; }

/* Las muestras de voz, para elegir la del vídeo antes de grabarlo. */
.voces { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 14px; margin: 18px 0 28px; }
.voces .tarjeta { margin: 0; }
.voces h3 { margin: 0 0 4px; font-size: 17px; }
.voces audio { width: 100%; margin-top: 10px; }
.frase { border-inline-start: 3px solid var(--magenta, #C10E8E); padding-inline-start: 14px; font-size: 17px; }

/* El panel en árabe: se escribe de derecha a izquierda. Casi todo lo resuelve
   `dir="rtl"` porque el CSS usa propiedades lógicas (inline-start/end); aquí
   queda lo que no tiene lado lógico. */
[dir="rtl"] .interruptor input[type="checkbox"]:checked::after { transform: translateX(-16px); }
[dir="rtl"] .barra i { float: inline-start; }
[dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] .mono { direction: ltr; text-align: start; unicode-bidi: embed; }
[dir="rtl"] input[type="url"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"] { direction: ltr; text-align: start; }

/* El selector de idioma de la cabecera. */
.selector-idioma {
  height: 32px; padding: 0 8px; border-radius: 8px;
  border: 1px solid var(--filete-fuerte, rgba(255,255,255,.25));
  background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer;
}
.selector-idioma option { color: #1a1226; }

/* Las fuentes de un tema: una fila por fuente, sin JSON a la vista. */
.fuentes-filas { display: grid; gap: 8px; }
/* Solo las filas: `.tarjeta.fuente` es otra cosa (un formulario en tarjeta) y
   con esta rejilla se le ponían los campos en columnas. */
.fuente:not(.tarjeta) { display: grid; grid-template-columns: minmax(12rem, 1.4fr) minmax(10rem, 1fr) auto auto; gap: 8px; align-items: center; }
.fuente input, .fuente select { min-width: 0; }
.fuente .icono {
  width: 34px; height: 34px; padding: 0; border-radius: 9px; font-size: 20px; line-height: 1;
  border: 1px solid var(--filete); background: var(--panel); color: var(--tinta-2); cursor: pointer;
}
.fuente .icono:hover { border-color: var(--corte); color: var(--corte); }
.fuentes-acciones { margin-top: 10px; }
@media (max-width: 720px) {
  .fuente:not(.tarjeta) { grid-template-columns: 1fr auto; }
  .fuente .fuente-url, .fuente .fuente-titulo { grid-column: 1 / -1; }
}

/* Huecos del catálogo: una fila por página sin contar. */
.lista-huecos { display: grid; gap: 12px; }
.hueco { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: start;
         padding: 12px 0; border-top: 1px solid var(--filete); }
.hueco:first-child { border-top: 0; padding-top: 0; }
.hueco-pagina { display: grid; gap: 2px; min-width: 0; }
.hueco-pagina .meta { font-size: 13px; }
.hueco-temas { grid-column: 1 / -1; display: grid; gap: 8px; }
.hueco-tema { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
              padding: 10px 12px; border-radius: 10px; background: var(--panel-2); }
@media (max-width: 720px) {
  .hueco, .hueco-tema { grid-template-columns: 1fr; }
}


/* --- Pasada de UX, 24 sept. 2026 -----------------------------------------
   Lo que salió de mirar las nueve vistas en capturas reales. */

/* Las pestañas viven dentro de .cabecera, y `.cabecera button` —más
   específico que `.pestana`— les ponía borde y alto de botón: nueve cajas en
   fila compitiendo con el contenido. La sección activa ya se distingue por su
   fondo. */
.cabecera .pestana {
  height: auto;
  border: 0;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.68);
}
.cabecera .pestana:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, 0.08); }
.cabecera .pestana.activa { color: #fff; font-weight: 700; background: rgba(255, 255, 255, 0.14); }

/* Móvil: las secciones en UNA fila que se desliza con el dedo (antes, cuatro
   filas y medio pantallazo antes del contenido), con un fundido a la derecha
   que dice «hay más». Del estado solo queda lo que avisa de algo. */
@media (max-width: 760px) {
  .cabecera { gap: 4px 8px; padding: 6px 12px; }
  .pestanas {
    flex-wrap: nowrap;
    overflow-x: auto;
    row-gap: 0;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
    mask-image: linear-gradient(90deg, #000 86%, transparent);
    padding-inline-end: 28px;
  }
  [dir="rtl"] .pestanas {
    -webkit-mask-image: linear-gradient(270deg, #000 86%, transparent);
    mask-image: linear-gradient(270deg, #000 86%, transparent);
  }
  .cabecera .pestana { scroll-snap-align: start; padding: 8px 9px; font-size: 13.5px; }
  #estado-servicio.ok, #quien-soy { display: none; }
  .estado-global { padding: 2px 0; gap: 6px; }
}

/* Lo que se pliega dentro de una tarjeta (motivos de un bloqueo, evidencias,
   temas ya convertidos): el resumen se lee como algo que se abre, con su
   flecha, y no como un párrafo más. */
details.plegable { margin: 8px 0; }
details.plegable > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--magenta);
  padding: 4px 0;
}
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s;
  flex: 0 0 auto;
}
[dir="rtl"] details.plegable > summary::before { transform: rotate(135deg); }
details.plegable[open] > summary::before { transform: rotate(45deg); }
details.plegable > summary:hover { text-decoration: underline; }
details.plegable > summary:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; border-radius: 4px; }

/* Las acciones de un tema, en una fila: antes los temas con fecha partían
   «Quitar de la cola» a una segunda línea y la tabla parecía descuadrada. */
@media (min-width: 761px) {
  .tabla-temas .acciones-tema { flex-wrap: nowrap; justify-content: flex-end; }
}

.tabla-desplazable { overflow-x: auto; max-width: 100%; }

/* «Ver más» al final de una lista larga: ancho entero, que se vea que la
   lista sigue y no parezca un botón suelto. */
button.ver-mas { display: flex; width: 100%; justify-content: center; margin: 12px 0 4px; }

/* El calendario en el móvil: siete columnas en 390 px dejaban eventos de
   dos letras («1 6..»). Debajo de 760 px el mes se lee como agenda: un día
   por fila, con su nombre, y solo los días que tienen algo (y hoy). */
.dia .dia-semana { display: none; }
@media (max-width: 760px) {
  .calendario .cabecera-dias { display: none; }
  .rejilla-mes { grid-template-columns: minmax(0, 1fr); }
  .dia.sin-eventos:not(.hoy), .dia.fuera { display: none; }
  .dia { min-height: 0; max-height: none; padding: 10px 12px 12px; gap: 6px; }
  .dia .numero { display: flex; align-items: baseline; gap: 8px; font-size: 18px; }
  .dia .dia-semana {
    display: inline;
    font-size: 13px;
    font-weight: 600;
    color: var(--tinta-2);
    text-transform: capitalize;
  }
  .evento { font-size: 13px; padding: 6px 10px 7px; }
}
.tabla-temas td { vertical-align: middle; }

/* Días de la semana de cada red: siete casillas pequeñas con su letra. La
   marcada se ve rellena para leer la semana de un vistazo. */
.dias-semana { display: inline-flex; gap: 3px; flex-wrap: nowrap; }
.dia-semana-casilla { position: relative; display: inline-flex; cursor: pointer; }
.dia-semana-casilla input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dia-semana-casilla span {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px;
  border: 1px solid var(--filete-fuerte); font-size: 11.5px; font-weight: 700; color: var(--tinta-2);
}
.dia-semana-casilla input:checked + span { background: var(--magenta); border-color: var(--magenta); color: var(--magenta-tinta); }
.dia-semana-casilla input:focus-visible + span { outline: 2px solid var(--magenta); outline-offset: 2px; }
.casilla-fila { display: flex; margin-top: 4px; font-size: 12.5px; color: var(--tinta-2); }

/* ---------------------------------------------------------------------------
   Ajustes por secciones: índice a un lado y una sola sección a la vista.
   En el móvil el índice pasa a una fila de pastillas que se desliza.
--------------------------------------------------------------------------- */
.cuerpo-secciones {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.indice-secciones {
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--filete);
  border-radius: var(--r-tarjeta);
  background: var(--panel);
}
.indice-secciones button {
  justify-content: flex-start;
  text-align: start;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--r-control);
  background: none;
  color: var(--tinta-2);
  font-weight: 600;
}
.indice-secciones button:hover { background: var(--panel-2); color: var(--tinta); }
.indice-secciones button.activa {
  background: var(--panel-2);
  color: var(--tinta);
  box-shadow: inset 3px 0 0 var(--magenta);
}
[dir="rtl"] .indice-secciones button.activa { box-shadow: inset -3px 0 0 var(--magenta); }
.indice-secciones button[hidden] { display: none; }
.secciones > details.grupo:not([open]) { display: none; }
.secciones > details.grupo > summary {
  cursor: default;
  list-style: none;
  flex-wrap: wrap;
  font-size: 1.1rem;
}
.secciones > details.grupo > summary::-webkit-details-marker { display: none; }
.secciones > details.grupo > summary::marker { content: ""; }
.secciones > details.grupo > summary:hover { background: none; }
.secciones > details.grupo > summary .pista { font-size: .9rem; }

@media (max-width: 760px) {
  .cuerpo-secciones { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .indice-secciones {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px;
  }
  .indice-secciones button { flex: 0 0 auto; white-space: nowrap; }
  .indice-secciones button.activa,
  [dir="rtl"] .indice-secciones button.activa { box-shadow: inset 0 -3px 0 var(--magenta); }
}
/* Catálogo de estilos: una fila por estilo, plegada. */
details.plegable.app-hub { padding: 10px 16px; margin: 0 0 8px; }
details.plegable.app-hub > summary { display: flex; width: 100%; color: var(--tinta); min-height: 32px; }
details.plegable.app-hub > summary .etiqueta { margin-inline-start: auto; }
details.plegable.app-hub[open] > summary { margin-block-end: 10px; }

/* Publicaciones: solapas con contador y buscador arriba. */
#pub-solapas { gap: 14px; }
#pub-solapas button { padding-inline: 2px; min-height: 40px; }
.solapas .contador:not(:empty) {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 8px;
  border-radius: var(--r-pastilla);
  background: var(--panel-2);
  color: var(--tinta-2);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
#pub-publicadas > .filtros { margin-top: 0; }
#pub-filtros .acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
#pub-filtros .acciones .inline { margin-inline-end: auto; white-space: nowrap; }
#pub-filtros .acciones .inline input { width: auto; }
@media (max-width: 720px) {
  #pub-solapas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #pub-solapas button { white-space: nowrap; flex: 0 0 auto; }
  #pub-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  #pub-filtros .campo.ancho { grid-column: 1 / -1; }
  #pub-filtros .campo .pista { display: none; }
}

/* Cuántas conexiones faltan en cada sección del índice. */
.indice-secciones button { display: flex; align-items: center; gap: 8px; }
.indice-secciones .contador:not(:empty) {
  margin-inline-start: auto;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: var(--r-pastilla);
  background: color-mix(in srgb, var(--espera) 18%, transparent);
  color: var(--espera);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Los servicios son tarjetas sueltas dentro de la sección. */
#grupo-servicios > .lista { padding: 14px 16px; }

/* Métricas por secciones: las tarjetas de cada una, apiladas dentro. */
.metricas-seccion { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; padding: 16px; }
.metricas-seccion > * { min-width: 0; overflow-x: auto; }
.metricas-seccion > .tarjeta { margin: 0; }
.metricas-seccion > .kpis { margin: 0; grid-column: 1 / -1; }
#grupo-met-resumen .metricas-seccion > .tarjeta { grid-column: 1 / -1; }

/* Vivencias: solapas y, debajo, qué hay en la solapa y el buscador. */
#viv-solapas { gap: 14px; }
#viv-solapas button { padding-inline: 2px; min-height: 40px; }
.barra-solapa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 14px; }
.barra-solapa .meta { margin: 0; flex: 1 1 320px; }
.barra-solapa input[type="search"] { flex: 0 1 280px; min-width: 0; }
.barra-solapa .buscadores { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex: 0 1 760px; min-width: 0; }
.barra-solapa .buscadores select { flex: 1 1 190px; min-width: 0; }
.barra-solapa .buscadores input[type="search"] { flex: 1 1 260px; }
@media (max-width: 640px) { .barra-solapa .buscadores { flex-wrap: wrap; flex-basis: 100%; } .barra-solapa .buscadores > * { flex: 1 1 100%; } }
@media (max-width: 720px) {
  #viv-solapas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #viv-solapas button { white-space: nowrap; flex: 0 0 auto; }
  .barra-solapa input[type="search"] { flex: 1 1 100%; }
}

/* Campañas: solapas como Publicaciones y Vivencias. El número se tiñe con
   el color de lo que pide: verde lo que espera tu revisión, rojo lo
   bloqueado, ámbar lo que falló al publicar. */
#camp-solapas { gap: 14px; }
#camp-solapas button { padding-inline: 2px; min-height: 40px; }
.solapas .contador.ok:not(:empty) { background: color-mix(in srgb, var(--activa) 16%, transparent); color: var(--activa); }
.solapas .contador.corte:not(:empty) { background: color-mix(in srgb, var(--corte) 14%, transparent); color: var(--corte); }
.solapas .contador.espera:not(:empty) { background: color-mix(in srgb, var(--espera) 18%, transparent); color: var(--espera); }
@media (max-width: 720px) {
  #camp-solapas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #camp-solapas button { white-space: nowrap; flex: 0 0 auto; }
}

/* Temas: solapas como Campañas. La tarjeta de huecos es una solapa más. */
#temas-solapas { gap: 14px; }
#temas-solapas button { padding-inline: 2px; min-height: 40px; }
#tarjeta-huecos.panel-solapa { margin-top: 0; }
@media (max-width: 720px) {
  #temas-solapas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #temas-solapas button { white-space: nowrap; flex: 0 0 auto; }
}

/* Vídeos cortos del manual: uno por tarea, en grupos. */
.grupo-videos { margin: 26px 0 0; font-size: 15px; color: var(--tinta-2); }
.rejilla-videos.cortos { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin-top: 10px; }
.rejilla-videos h5 { margin: 0 0 10px; font-size: 15px; }

/* Enlace de cada tarjeta de Conexiones a su apartado de la guía. */
.guia-conexion { margin: 4px 0 10px; font-size: 13.5px; }

/* Consola de operación (/operador). */
main.operador { max-width: 1100px; margin: 0 auto; padding: 28px 20px 60px; }
.op-caja { max-width: 560px; margin: 24px auto; }
.clave-totp {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px; letter-spacing: .06em; word-break: break-all;
  background: var(--panel-2); border: 1px solid var(--filete); border-radius: var(--r-control);
  padding: 12px 14px; margin: 8px 0;
}
.op-empresa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.op-empresa h3 { margin: 0 0 4px; font-size: 16px; }
.op-empresa .meta { margin: 0; }
.op-empresa .acciones { margin: 0; }
/* Dentro de una empresa, quien entró desde la consola lo ve siempre. */
.banda-operador {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center;
  padding: 7px 16px; font-size: 13.5px; text-align: center;
  background: color-mix(in srgb, var(--espera) 16%, var(--papel)); color: var(--tinta);
  border-bottom: 1px solid color-mix(in srgb, var(--espera) 40%, transparent);
}

/* Probar estilos (Ajustes → Cómo escribe). */
.rotacion-estilos { border: 1px solid var(--filete); border-radius: var(--r-tarjeta); padding: 12px 16px; margin: 14px 0; }
.rotacion-estilos legend { font-weight: 700; padding: 0 6px; }
.casillas-estilos { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 6px 16px; margin: 8px 0; }

/* Lo que solo hace quien administra no se le enseña a quien no puede. */
body.sin-admin .solo-admin { display: none !important; }
.solo-usuario { display: none; }
body.sin-admin .solo-usuario { display: block; }

/* «Tengo una fuente para esto», en cada motivo de una campaña bloqueada. */
.hallazgo-fuente { margin: 4px 0 10px; }
.fuente-propia { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--filete); border-radius: var(--r-control); background: var(--panel); }
.fuente-propia-campos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px; }
.fuente-propia-campos input[type="text"] { grid-column: 1 / -1; }
@media (max-width: 720px) { .fuente-propia-campos { grid-template-columns: minmax(0, 1fr); } }

/* Consola de operación: la salida del rescate va dentro del propio aviso. */
#op-aviso-rescate button { display: block; margin-block-start: .75rem; }

/* Contestar comentarios de una publicación (Publicaciones → «Contestar un comentario»). */
.respuestas { display: grid; gap: .75rem; margin-block-start: .75rem; padding-block-start: .75rem; border-block-start: 1px solid var(--filete); }
.respuestas h5 { margin: 0; }
.respuestas .respuesta { display: grid; gap: .5rem; padding: .75rem; border: 1px solid var(--filete); border-radius: var(--r-control); background: var(--panel-2); }
.respuestas .respuesta.publicada { border-inline-start: 3px solid var(--activa); }
.respuestas .respuesta.nueva { background: transparent; }
.respuestas .fila-campos { display: grid; grid-template-columns: 1fr 2fr; gap: .5rem; }
.respuestas .fila-campos > :only-child { grid-column: 1 / -1; }
.respuestas textarea, .respuestas input { width: 100%; }
.comentario-citado { margin: 0; padding-inline-start: .75rem; border-inline-start: 3px solid var(--filete); color: var(--tinta-2); }
.comentario-citado p { margin: 0; white-space: pre-line; }
@media (max-width: 640px) { .respuestas .fila-campos { grid-template-columns: 1fr; } }

/* Mis publicaciones → «Escribir con IA a partir de una idea». */
.con-ia { border: 1px solid var(--filete); border-radius: var(--r-control); padding: .5rem .75rem; margin-block-end: .75rem; background: var(--panel-2); }
.con-ia > summary { cursor: pointer; font-weight: 600; color: var(--magenta); padding-block: .25rem; }
.con-ia[open] { display: grid; gap: .5rem; }
.con-ia textarea { width: 100%; }
/* El formulario de publicación propia: una columna, sin la rejilla de `.fuente`. */
.tarjeta.form-propia { display: grid; gap: .75rem; margin: 10px 0; background: var(--panel-2); }
.tarjeta.form-propia .campo { margin-bottom: 0; }
.tarjeta.form-propia input, .tarjeta.form-propia select, .tarjeta.form-propia textarea { width: 100%; min-width: 0; }
.tarjeta.form-propia .con-ia { margin-block-end: 0; background: var(--panel); }

/* Ajustes → Imágenes → Fotos de la empresa (técnica «foto propia»). */
.fotos-propias { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; margin-block-start: .75rem; }
.foto-propia { margin: 0; display: grid; gap: .5rem; padding: .5rem; border: 1px solid var(--filete); border-radius: var(--r-control); background: var(--panel-2); }
.foto-propia img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--r-control) - 2px); background: var(--filete); }
.foto-propia figcaption { display: grid; gap: .4rem; }
.foto-propia textarea { width: 100%; font-size: .85rem; }
.foto-propia .acciones { flex-wrap: wrap; align-items: center; gap: .4rem; }
.foto-propia.apagada img { opacity: .45; filter: grayscale(1); }
.fotos-propias > .vacio { grid-column: 1 / -1; }

/* --- Vídeos con avatar ---------------------------------------------------- */
.avatar-subida { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 10px 0; border-block-end: 1px solid var(--filete); }
.avatar-subida > div { flex: 1; min-width: 0; }
.avatar-subida .pista { margin: 2px 0 0; }
.avatar-ficheros { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 4px; font-size: 13px; }
.avatar-ficheros li { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.avatar-consentimiento { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0; font-size: 13px; line-height: 1.45; }
.avatar-consentimiento input { margin-block-start: 3px; flex: 0 0 auto; }
.videos-campana { display: grid; gap: 14px; }
.video-nuevo h4, .video-tarjeta h4 { margin: 0; }
.fila-campos { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.fila-campos .campo { flex: 1 1 160px; }
.video-tarjeta .campo textarea { width: 100%; }
.video-vista video { width: 100%; max-width: 300px; background: #000; border-radius: 10px; display: block; }
.video-vista video.video-vertical { aspect-ratio: 9 / 16; max-height: 70vh; width: auto; }
.video-vista video.video-cuadrado { aspect-ratio: 1; }
.video-vista video.video-retrato { aspect-ratio: 4 / 5; max-height: 70vh; width: auto; }
.video-vista video.video-horizontal { max-width: 560px; aspect-ratio: 16 / 9; }
.video-publicar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 10px; }
.pack-video { flex-wrap: wrap; align-items: center; }
.pack-video input[type="number"] { width: 90px; }
@media (max-width: 600px) { .avatar-subida { flex-direction: column; } }

/* --- Series de vídeo ------------------------------------------------------- */
#lista-series { display: grid; gap: 14px; }
.serie-nueva { margin-bottom: 14px; }
.serie-nueva h4, .serie-tarjeta h4 { margin: 0; }
.serie-indice { display: grid; gap: 14px; padding: 0; margin: 12px 0; list-style: none; }
.serie-enlace { margin: 10px 0 4px; max-width: 640px; }
.serie-enlace-fila { display: flex; gap: 8px; flex-wrap: wrap; }
.serie-enlace-fila input { flex: 1 1 260px; min-width: 0; }
.serie-n { min-width: 1.6em; }
.serie-capitulo { display: grid; gap: 4px; }
.serie-capitulo-cab { display: flex; gap: 6px; align-items: center; }
.serie-capitulo-cab input { flex: 1; min-width: 0; font-weight: 600; }
.serie-capitulo textarea { width: 100%; }
.tabla-scroll { overflow-x: auto; }
.tabla-serie td { vertical-align: top; }
.tabla-serie td[colspan] { padding: 0 0 12px; }
@media (max-width: 600px) {
  .tabla-serie thead { display: none; }
  .tabla-serie, .tabla-serie tbody, .tabla-serie tr, .tabla-serie td { display: block; width: auto; }
  .tabla-serie tr { padding: 10px 0; border-block-end: 1px solid var(--filete); }
  .tabla-serie td { border: 0; padding: 2px 0; }
  .tabla-serie tr[hidden] { display: none; }
}
#lista-series > *, #tarjeta-series, .serie-tarjeta, .tabla-scroll { min-width: 0; max-width: 100%; }
.tabla-serie { width: 100%; }
@media (max-width: 600px) {
  .serie-capitulo-cab { flex-wrap: wrap; }
  .serie-capitulo-cab input { flex-basis: calc(100% - 2.2em); }
}

/* Escucha previa del guion y voz de los vídeos */
.video-escucha { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 10px 0; }
.video-escucha audio { max-width: 100%; }
.video-escucha .pista { flex-basis: 100%; }
#vz-muestra { max-width: 100%; margin-top: 6px; }

/* Mis publicaciones programadas */
.mis-programadas-lista { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; font-size: 13px; }
.mis-programadas-lista li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.mis-programadas-lista li button { margin-inline-start: auto; }

/* Mis días de publicación (Mi perfil): siete pastillas que se marcan con el
   dedo; la marcada, rellena. */
.dias-persona { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 4px 0 12px; }
.dias-persona legend { font-size: 13px; color: var(--tinta-2); margin-block-end: 6px; padding: 0; }
.dias-persona label { position: relative; display: inline-flex; cursor: pointer; }
.dias-persona input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dias-persona span {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px;
  border: 1px solid var(--filete-fuerte); border-radius: var(--r-pastilla); font-size: 14px; color: var(--tinta);
}
.dias-persona input:checked + span { background: var(--magenta); border-color: var(--magenta); color: var(--magenta-tinta); font-weight: 600; }
.dias-persona input:focus-visible + span { outline: 2px solid var(--magenta); outline-offset: 2px; }

/* Vídeos: lo que conviene escuchar antes de aprobar (la voz no dijo exactamente el texto). */
.aviso-video { border-inline-start: 3px solid var(--espera); padding: .5rem .75rem; margin-block: .5rem; background: var(--panel-2); border-radius: var(--r-control); }
.aviso-video ul { margin: .25rem 0 0; padding-inline-start: 1.1rem; }
/* Las columnas se reparten el ancho de la tarjeta: con el ancho automático,
   los botones y los campos la empujaban fuera del cuadro. */
.tabla-personas { width: 100%; table-layout: fixed; }
.tabla-personas td { overflow-wrap: anywhere; }
.tabla-personas input[type="text"], .tabla-personas input[type="url"], .tabla-personas select { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.tabla-personas .acciones { flex-wrap: wrap; }
.tabla-personas .acciones button { white-space: normal; }
@media (max-width: 760px) {
  .tabla-personas thead { display: none; }
  .tabla-personas, .tabla-personas tbody, .tabla-personas tr, .tabla-personas td { display: block; width: 100%; }
  .tabla-personas tr { border-bottom: 1px solid var(--filete); padding-block: 8px; }
  .tabla-personas td:nth-child(2) { min-width: 0; }
}
.tabla-personas .etiqueta { white-space: normal; overflow-wrap: anywhere; }
.salida-enlace input { width: 100%; min-width: 0; margin-top: 6px; }
.salida-enlace .acciones-envio { display: flex; }
.aviso-caducidad { color: var(--espera); font-weight: 600; }

/* Correctores por tipo de negocio (Ajustes → Cómo escribe → Correctores). */
.lista-correctores { display: grid; gap: 10px; margin: 10px 0; }
.fila-corrector { padding: 10px 12px; border: 1px solid var(--filete); border-radius: var(--r-control); }
.fila-corrector .etiqueta { margin-inline-start: 8px; }
.fila-corrector .pista { margin: 4px 0 6px; }
.opciones-corrector { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.campo-en-linea { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta-2); }
.campo-en-linea select { width: auto; }
.correcciones { margin: 12px 0; }
.correcciones summary { cursor: pointer; font-weight: 600; }
.cambios-corrector del { color: var(--corte); }
.cambios-corrector ins { color: var(--activa); text-decoration: none; }

/* Plantilla de vídeo: el logo sobre un fondo neutro, para ver la transparencia. */
.logo-video img { max-width: 240px; max-height: 96px; padding: 12px; background: var(--panel-2); border: 1px solid var(--filete); border-radius: var(--r-control); }

/* Filtros de las piezas dentro de una campaña: red, tipo y quién firma. */
.filtros-piezas { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 8px; }
.filtros-piezas select { flex: 0 1 220px; min-width: 0; }