/* assets/css/admin.css — chasis de la aplicación de gestión (BACKOFFICE 1).
   Secciones: tokens · base · chasis · componentes · estados · responsive. */

/* ───────────── Tokens ─────────────

   La gestión es OSCURA por defecto (ver `applyTheme` en app.js). No es una
   preferencia estética: el panel se tiene abierto horas, el contraste alto
   sobre casi negro cansa menos, y —lo que de verdad importa— el diseño está
   pensado en oscuro, con el coral corporativo reservado para UNA acción por
   pantalla. En claro, ese mismo coral sobre blanco compite con todo.

   Los nombres (`--bg`, `--surface`, `--ink`…) se conservan tal cual: los usan
   las quince vistas del panel y renombrarlos por gusto habría sido tocar
   quince archivos para no cambiar nada. Lo que cambia son los valores. */
:root {
  --brand: var(--color-brand-coral, #FF3B2F);
  --brand-hover: #ff5b51; /* un punto más claro: el panel es oscuro */
  --brand-dark: var(--color-brand-coral-oscuro, #E02A1F);
  /* Coral al 12 % sobre el fondo: el relleno de lo que es coral pero no es
     el botón principal (el icono de «Próxima acción», la fila activa del
     menú). Un segundo botón coral en la misma pantalla deja de señalar. */
  --brand-suave: color-mix(in srgb, var(--brand) 14%, transparent);
  /* El campo rellenable tiene su propia terna, separada de la superficie:
     es blanco en los DOS temas, y su tinta y su borde van con él. */
  --campo-fondo: #ffffff;
  --campo-tinta: var(--color-brand-ink, #0B2742);
  --campo-mudo: var(--color-mudo, #4E617A);
  --campo-linea: #B9C6D4;

  /* Los neutros son la FAMILIA AZUL DE LA MARCA, no grises fríos.
     Antes eran carbón neutro (#101319, #1a1e26…): el coral corporativo
     estaba, pero flotando sobre un panel que no era de la marca. Ahora la
     escala sale del azul noche (--color-brand-night, #001B35), el mismo que
     usan las secciones oscuras de la portada.

     Cada tono se calculó para tener EXACTAMENTE la misma luminancia que el
     gris al que sustituye, así que los escalones de profundidad y —lo que
     importa— todos los contrastes se conservan intactos: --ink 14,11:1,
     --ink-2 6,67:1 y --muted 4,55:1 en el peor de los cinco fondos, que es
     justo el mínimo AA que documenta el comentario de --muted más abajo. */
  --bg: #001427;            /* fondo de página, azul noche apagado */
  --sidebar-bg: #001A32;    /* la columna izquierda, un punto por encima */
  --surface: #041F38;       /* tarjetas */
  --surface-2: #0D263F;     /* tarjeta al pasar por encima */
  --field: #011C36;         /* fondo de los campos: más oscuro que la tarjeta */
  --line: #193249;
  --line-strong: #2C4358;

  /* El texto también sale de la marca: crema papel sobre azul noche es la
     misma pareja que las secciones inmersivas de la portada. Los dos grises
     secundarios se han vuelto a teñir de azul CONSERVANDO su luminancia, así
     que el contraste no baja, sube un poco. Medido sobre el peor de los cinco
     fondos (--surface-2, la tarjeta al pasar por encima): #a6abb5 → #9FADBD
     (6.67 → 6.72:1), #868c98 → #808FA3 (4.55 → 4.67:1) y #f5f5f6 → crema
     (14.11 → 14.38:1). */
  --ink: var(--color-brand-cream, #FAF7F1);
  --ink-2: #9FADBD;
  /* El gris terciario de la referencia es #737985, y sobre la tarjeta se
     queda en 3.82:1 — por debajo del 4.5:1 que pide AA para texto normal, y
     este gris lleva las etiquetas de las métricas, las horas de la actividad
     y los textos de ayuda, que hay que poder leer. Subido lo justo para
     cumplir sobre los cinco fondos del panel (4.67:1 en el peor, la tarjeta
     al pasar por encima). La prueba lo mide y falla si alguien lo baja. */
  --muted: #808FA3;

  --ok: #31c96b;
  --warn: #ff9f32;
  --danger: #ff3855;
  --info: #63a5ff;

  --radius: 10px;
  --radius-lg: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -20px rgba(0,0,0,.8);
  --sidebar-w: 254px;
  --topbar-h: 66px;
  --contenido-max: 1440px;
  --sans: var(--font-brand, Inter, system-ui, -apple-system, 'Segoe UI', sans-serif);
  /* Serif SOLO para el título de una guía. La marca lo comparte porque es un
     nombre propio, no interfaz. */
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* El tema claro es una elección explícita, no lo que diga el sistema. */
:root[data-theme="light"] {
  /* El claro también es de la marca: crema papel de fondo, tinta para el
     texto y niebla para las separaciones, en lugar de los grises neutros de
     antes. Contrastes comprobados: --ink 13,49:1, --ink-2 9,24:1 y
     --muted 5,63:1 en el peor de los tres fondos. */
  --bg: var(--color-brand-cream, #FAF7F1);
  --sidebar-bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #EEF2F5;
  --field: #ffffff;
  --line: var(--color-linea, #DCE3E9);
  --line-strong: #C3CFDA;
  --campo-linea: #C3CFDA;
  --ink: var(--color-brand-ink, #0B2742);
  --ink-2: #2B4257;
  --muted: var(--color-mudo, #4E617A);
  --ok: #16a34a;
  --warn: #c2410c;
  --info: #4f46e5;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -16px rgba(0,0,0,.18);
}

/* ───────────── Base ───────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1 { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
h2 { font-size: 1rem; font-weight: 600; margin-bottom: 12px; }
h3 { font-size: .93rem; font-weight: 600; }
.muted { color: var(--muted); }
.text-ok { color: var(--ok); }
.text-danger { color: var(--danger); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 200;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px;
}
.skip-link:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* Los iconos son trazos que heredan el color del texto (assets/js/admin/iconos.js). */
.ico { width: 16px; height: 16px; flex: 0 0 auto; }
.ico--xs { width: 13px; height: 13px; }
.ico--lg { width: 20px; height: 20px; }
.ico--estado { width: 26px; height: 26px; color: var(--muted); }

/* ───────────── Chasis ───────────── */
.topbar {
  position: sticky; top: 0; z-index: 60;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; }
/* El logotipo va de FONDO y no como <img> a propósito: el panel tiene tema
   claro y oscuro, y la tinta del logo cambia con él. Con dos <img> habría que
   descargar los dos y esconder uno; así el navegador solo se baja el que toca.
   El nombre accesible lo pone el `aria-label` del propio nodo. */
.brand__logo {
  display: block; height: 30px; width: 210px; /* ratio 6.97:1 del arte con claim en español */
  background: url('/assets/img/marca/logo-claro.webp') left center / contain no-repeat;
}
:root[data-theme="light"] .brand__logo {
  background-image: url('/assets/img/marca/logo.webp');
}
.topbar__aside { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.usuario { display: flex; align-items: center; gap: 10px; font-size: .84rem; }
.usuario__email { color: var(--ink-2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.icon-btn {
  width: 36px; height: 36px; display: inline-grid; place-items: center;
  border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--ink-2); cursor: pointer;
}
.icon-btn:hover { background: var(--surface); color: var(--ink); border-color: var(--line); }
.menu-btn { display: none; }

.buscador-lanzador {
  display: inline-flex; align-items: center; gap: 9px;
  width: 262px; height: 38px; padding: 0 12px; margin-left: 8px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--field); color: var(--muted);
  font: inherit; font-size: .86rem; cursor: pointer; text-align: left;
}
.buscador-lanzador:hover { border-color: var(--line-strong); }
.buscador-lanzador__ico { color: var(--muted); }
.buscador-lanzador__txt { flex: 1 1 auto; }
.buscador-lanzador kbd {
  font-family: var(--sans); font-size: .72rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; background: var(--surface);
}

.layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); align-items: start; }
.sidebar {
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  display: flex; flex-direction: column; overflow-y: auto;
  padding: 14px 12px 12px;
  background: var(--sidebar-bg); border-right: 1px solid var(--line);
}
.sidebar ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.sidebar a {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 12px; border-radius: 10px;
  color: var(--ink-2); font-size: .89rem; font-weight: 500;
}
.sidebar a:hover { background: var(--surface); color: var(--ink); }
/* La sección actual. Sigue sin ser coral al 100 %: dos corales llenos en
   pantalla (este y el botón de publicar) y ninguno manda. Pero el 50 % de
   coral mezclado con el fondo daba un ladrillo turbio que no está en la
   paleta —sobre el carbón viejo pasaba, sobre el azul noche canta—, así que
   la superficie es azul humano (el token de marca, un escalón claro sobre la
   columna) y el coral queda de MARCA en el borde, que es su papel. */
.sidebar a.is-active {
  background: var(--color-brand-blue, #002D55);
  box-shadow: inset 3px 0 0 var(--brand);
  color: #fff; font-weight: 600;
}
:root[data-theme="light"] .sidebar a.is-active { background: var(--brand); }
.sidebar a:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.sidebar__icon { display: inline-flex; }
.sidebar__icon .ico { width: 18px; height: 18px; }
.sidebar__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sidebar__pie { margin-top: auto; padding: 12px 12px 0; border-top: 1px solid var(--line); font-size: .84rem; }
.sidebar__pie a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.sidebar__pie a:hover { color: var(--ink); }

.contenido { padding: 26px 30px 80px; min-height: calc(100vh - var(--topbar-h)); }
.contenido > * { max-width: var(--contenido-max); margin-inline: auto; }
.contenido:focus { outline: none; }
.page-head { margin-bottom: 22px; }
.page-head__sub { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.page-head__back { display: inline-block; color: var(--muted); font-size: .82rem; margin-bottom: 8px; }
.page-head__back:hover { color: var(--brand); }
section { margin-bottom: 26px; }

/* ───────────── Componentes ───────────── */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 18px;
}
.card--notice { border-color: var(--brand); }
.card__head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.card__head-aside { margin-left: auto; display: flex; gap: 6px; align-items: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .5; cursor: default; }
/* El coral es de UNA acción por pantalla: la que se espera que se pulse.
   Repartido entre cuatro botones deja de decir cuál era. */
.btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn--danger-ghost { background: var(--surface); color: var(--danger); border-color: var(--line); }
.btn--sm { min-height: 32px; padding: 0 11px; font-size: .8rem; border-radius: 8px; }
.btn--block { width: 100%; }
.btn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.btn-row--wrap { margin-top: 14px; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* LO QUE SE RELLENA VA EN BLANCO, TAMBIÉN EN EL TEMA OSCURO.
   Un campo del color del panel obliga a buscar el borde para saber dónde se
   escribe, y sobre todo obliga a mirar dos veces para ver qué está relleno y
   qué no. En blanco, el formulario se lee de un vistazo: lo blanco se rellena,
   lo demás no. En el tema claro ya era blanco, así que ahí no cambia nada. */
.field { display: flex; flex-direction: column; gap: 7px; font-size: .82rem; font-weight: 600; }
.field > span { color: var(--ink-2); }
.field input, .field select, .field textarea {
  border: 1px solid var(--campo-linea); border-radius: 9px; padding: 0 12px;
  min-height: 44px; line-height: 42px;
  font: inherit; font-size: .95rem; font-weight: 400;
  background: var(--campo-fondo); color: var(--campo-tinta); outline: none; width: 100%;
}
.field textarea { line-height: 1.55; padding: 10px 12px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--campo-mudo); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-suave);
}
/* Un campo desactivado deja de ser blanco: si lo siguiera siendo, seguiría
   pareciendo que hay que rellenarlo, que es justo lo que se viene a evitar. */
.field input:disabled, .field select:disabled, .field textarea:disabled {
  background: var(--surface-2); color: var(--muted); border-color: var(--line); cursor: default;
}
.field--inline { flex-direction: row; align-items: center; gap: 8px; }
.field--inline select { width: auto; }
.field--wide { grid-column: span 2; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.input-precio { width: 84px; border: 1.5px solid var(--line); border-radius: 7px; padding: 5px 8px; font: inherit; font-size: .82rem; background: var(--surface); color: var(--ink); text-align: right; }
.input-precio:disabled { opacity: .55; }
.chk-gratis { display: flex; align-items: center; gap: 5px; font-size: .76rem; color: var(--muted);   /* era `--ink-soft`, que nunca se definió */ justify-content: flex-end; margin-bottom: 4px; white-space: nowrap; }

.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.field--search { flex: 1; min-width: 220px; }
.toolbar__count { color: var(--muted); font-size: .8rem; margin-left: auto; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 22px; }
/* Las cifras del cuadro de mando y de las vistas de lista. Van acotadas a
   `.kpis` a propósito: la ficha de guía usa las mismas clases con otra forma
   (icono + etiqueta + valor en una fila), y sin acotar esto le colaba una
   MAYÚSCULA HERMÉTICA en cada etiqueta que allí no pinta nada. */
.kpis .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: block; }
.kpis .kpi__n { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.kpis .kpi__l { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }

.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.table th {
  text-align: left; padding: 11px 14px; background: var(--surface-2);
  border-bottom: 1px solid var(--line); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
}
.table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr.is-clickable { cursor: pointer; }
.table tr.is-clickable:hover td { background: var(--surface-2); }
.cell-sub { display: block; color: var(--muted); font-size: .76rem; margin-top: 2px; }

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: .74rem; font-weight: 600; white-space: nowrap;
}
/* Estado y rol: el color RELLENA, no solo tiñe el borde — un borde de un píxel
   al 35 % no llega a AA y el estado de una guía no puede depender de eso. */
.badge--ok { background: color-mix(in srgb, var(--ok) 16%, transparent); border-color: color-mix(in srgb, var(--ok) 38%, transparent); }
.badge--warn { background: color-mix(in srgb, var(--warn) 16%, transparent); border-color: color-mix(in srgb, var(--warn) 38%, transparent); }
.badge--danger { background: color-mix(in srgb, var(--danger) 16%, transparent); border-color: color-mix(in srgb, var(--danger) 38%, transparent); }
.badge--info, .badge--rol {
  background: color-mix(in srgb, var(--info) 16%, transparent);
  border-color: color-mix(in srgb, var(--info) 38%, transparent); color: var(--info);
}
.badge--ok { color: var(--ok); }
.badge--warn { color: var(--warn); }
.badge--danger { color: var(--danger); }
.badge--muted { color: var(--muted); }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.guide-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.guide-card__img { height: 120px; background: var(--surface-2) center/cover no-repeat; }
.guide-card__body { padding: 14px; }
.guide-card__body h3 { margin-bottom: 4px; }
.guide-card__body .btn { margin-top: 10px; }

/* ───────────── Estados ───────────── */
.skeleton { display: flex; flex-direction: column; gap: 10px; }
.skeleton__row {
  height: 46px; border-radius: var(--radius);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: sk 1.3s linear infinite;
}
@keyframes sk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton__row { animation: none; } }

.state { text-align: center; padding: 46px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.state__icon { font-size: 1.9rem; margin-bottom: 10px; }
.state__title { font-size: 1rem; margin-bottom: 6px; }
.state__body { color: var(--muted); font-size: .88rem; max-width: 46ch; margin: 0 auto 14px; }
.state--error { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }

/* ───────────── Avisos ───────────── */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 300; display: flex; flex-direction: column; gap: 8px; max-width: min(400px, calc(100vw - 32px)); }
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--bg);
  padding: 11px 13px; border-radius: var(--radius); font-size: .85rem;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.5);
  animation: toast-in .18s ease-out;
}
.toast--ok { background: var(--ok); color: #fff; }
.toast--error { background: var(--danger); color: #fff; }
.toast.is-out { opacity: 0; transform: translateY(6px); transition: .18s; }
.toast__action { background: rgba(255,255,255,.2); color: inherit; border: 0; border-radius: 7px; padding: 4px 9px; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.toast__close { margin-left: auto; background: none; border: 0; color: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; opacity: .7; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ───────────── Modal ───────────── */
.modal-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 20px; }
.modal { background: var(--surface); border-radius: var(--radius-lg); padding: 22px; width: min(440px, 100%); box-shadow: 0 20px 60px -20px rgba(0,0,0,.5); }
.modal__title { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; margin-bottom: 8px; }
.modal__body { color: var(--ink-2); font-size: .9rem; margin-bottom: 18px; }
.modal__actions { display: flex; gap: 10px; justify-content: flex-end; }
body.is-modal-open { overflow: hidden; }

/* ───────────── Panel de filtros (feature/catalog-filters) ─────────────
   Mismo fondo/scroll-lock que .modal-overlay; el panel en sí cuelga del
   borde derecho en vez de centrarse, igual que .sidebar en móvil. */
.drawer-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.45); }
.drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 100%);
  background: var(--surface); box-shadow: 0 20px 60px -20px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
}
.drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 18px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.drawer__title { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; }
.drawer__cerrar {
  border: 0; background: var(--surface-2); color: var(--ink); border-radius: 999px;
  width: 32px; height: 32px; font-size: 1rem; cursor: pointer; line-height: 1;
}
.drawer__cerrar:hover { background: var(--line); }
.drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px 90px; }
.drawer__pie {
  position: sticky; bottom: 0; display: flex; gap: 10px; justify-content: space-between;
  align-items: center; padding: 12px 18px; background: var(--surface);
  border-top: 1px solid var(--line);
}

.filtro-grupo { margin-bottom: 20px; }
.filtro-grupo:last-child { margin-bottom: 0; }
.filtro-grupo__titulo { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 8px; }
/* Filtro que el servidor no ha podido construir: se enseña apagado y con el
   motivo, en vez de como una lista vacía que parecería decir «no hay». */
.filtro-grupo--roto { opacity: .72; }
.filtro-grupo--roto .filtro-grupo__aviso { margin: 0; padding: 8px 10px; border-left: 3px solid var(--warn, #c98a2e); background: rgba(201,138,46,.08); font-size: .8rem; line-height: 1.45; }
.filtro-grupo__radios { display: flex; flex-wrap: wrap; gap: 6px; }
.filtro-radio {
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-2);
  border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .82rem; cursor: pointer;
}
.filtro-radio.is-activo { border-color: var(--brand); color: var(--brand); font-weight: 700; background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.filtro-rango { display: flex; align-items: center; gap: 8px; }
.filtro-rango input { width: 100%; }

/* Multiselección con buscador (msf = multiselect field) */
.msf__buscar { margin-bottom: 8px; }
.msf__opciones { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.msf__opcion {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; cursor: pointer; font-size: .86rem;
  border-bottom: 1px solid var(--line);
}
.msf__opcion:last-child { border-bottom: 0; }
.msf__opcion:hover { background: var(--surface-2); }
.msf__opcion input { width: 16px; height: 16px; accent-color: var(--brand); flex: 0 0 auto; }
.msf__avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--surface-2); }
.msf__etiqueta { flex: 1 1 auto; }
.msf__n { color: var(--muted); font-size: .76rem; }
.msf__vacio { padding: 14px; text-align: center; color: var(--muted); font-size: .84rem; }

/* Chips de filtros activos, junto al buscador del catálogo */
.filtros-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 12px; }
.filtro-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 11px; font-size: .8rem;
}
.filtro-chip button {
  border: 0; background: none; color: var(--muted); cursor: pointer; font-size: .95rem;
  line-height: 1; width: 20px; height: 20px; border-radius: 50%;
}
.filtro-chip button:hover { background: var(--line); color: var(--ink); }
.filtro-chip--limpiar { background: none; border-style: dashed; color: var(--brand); cursor: pointer; font-weight: 700; }

.filtros-btn { position: relative; }
.filtros-btn__n {
  position: absolute; top: -6px; right: -6px; background: var(--brand); color: #fff;
  border-radius: 999px; min-width: 18px; height: 18px; padding: 0 4px; font-size: .68rem;
  font-weight: 700; display: flex; align-items: center; justify-content: center;
}

@media (max-width: 480px) {
  .drawer { width: 100%; }
}

/* ───────────── Búsqueda global ───────────── */
.buscador { position: fixed; inset: 0; z-index: 350; }
.buscador__fondo { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.buscador__panel {
  position: relative; margin: 10vh auto 0; width: min(560px, calc(100% - 28px));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px -24px rgba(0,0,0,.55); overflow: hidden;
}
.buscador__panel input { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 15px 18px; font: inherit; font-size: .98rem; background: var(--surface); color: var(--ink); outline: none; }
.buscador__resultados { max-height: 60vh; overflow-y: auto; padding: 8px; }
.buscador__pista { color: var(--muted); font-size: .85rem; padding: 16px; text-align: center; }
.buscador__item { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border-radius: 9px; }
.buscador__item:hover { background: var(--surface-2); }
.buscador__tipo { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); min-width: 76px; }
.buscador__titulo { font-weight: 700; font-size: .88rem; }
.buscador__sub { color: var(--muted); font-size: .8rem; margin-left: auto; }

/* ───────────── Acceso ───────────── */
body.is-guest { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.acceso { width: 100%; display: grid; place-items: center; }
.acceso__caja { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 13px; }
.brand--acceso { margin-bottom: 14px; }
.brand--acceso .brand__logo { height: 34px; width: 238px; }
.acceso__caja h1 { font-size: 1.35rem; }
.acceso__error { color: var(--danger); font-size: .83rem; min-height: 1em; }
.acceso__links { font-size: .8rem; color: var(--muted); text-align: center; }
.acceso__links a { color: var(--brand); }

/* ───────────── Responsive ───────────── */
@media (max-width: 900px) {
  /* El lanzador de búsqueda deja de tener ancho fijo: 262 px en una pantalla
     de 390 se comían el interruptor de tema y el botón de salir, que se
     montaban unos encima de otros. */
  .buscador-lanzador { width: auto; flex: 0 1 auto; min-width: 40px; margin-left: 0; }
  .buscador-lanzador kbd, .usuario__email { display: none; }
  .topbar { gap: 10px; padding: 0 14px; }
}
@media (max-width: 560px) {
  .buscador-lanzador__txt { display: none; }
  .buscador-lanzador { width: 40px; justify-content: center; padding: 0; }
}

@media (max-width: 768px) {
  .menu-btn { display: block; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; top: var(--topbar-h); left: 0; width: 260px; z-index: 55;
    transform: translateX(-100%); transition: transform .18s ease-out;
    box-shadow: 0 20px 50px -20px rgba(0,0,0,.4);
  }
  body.is-nav-open .sidebar { transform: none; }
  .contenido { padding: 20px 16px 70px; }

  /* Las tablas se convierten en tarjetas: cada celda muestra su etiqueta. */
  .table-wrap { border: 0; background: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }
  .table tr {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); margin-bottom: 10px; padding: 6px 12px;
  }
  .table td { border: 0; padding: 7px 0; display: flex; gap: 12px; align-items: baseline; text-align: left !important; }
  .table td::before {
    content: attr(data-label);
    flex: 0 0 40%; color: var(--muted);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  }
  .table td.is-desktop-only { display: none; }
  .row-actions { justify-content: flex-start; }
  .toolbar__count { margin-left: 0; }
}

@media (max-width: 420px) {
  .topbar { gap: 8px; padding: 0 12px; }
  /* En móvil no cabe el nombre: se enseña solo el emblema. Ya no es un
     recorte por CSS del logotipo entero (frágil ante cualquier cambio de
     proporciones del arte): existe el símbolo como archivo propio, en las
     dos tintas, y pesa 4 KB. */
  .brand__logo {
    width: 34px; height: 24px;
    background-image: url('/assets/img/marca/simbolo-claro.webp');
  }
  :root[data-theme="light"] .brand__logo {
    background-image: url('/assets/img/marca/simbolo.webp');
  }
  h1 { font-size: 1.35rem; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .table td::before { flex-basis: 46%; }
}

/* Botones táctiles de al menos 44 px en pantallas de dedo. */
@media (pointer: coarse) {
  .btn, .icon-btn, .sidebar a { min-height: 44px; }
  .btn--sm { min-height: 38px; }
}

/* ───────────── Suplantación y matriz de permisos (BACKOFFICE 2) ───────────── */
.banda-suplantacion {
  position: sticky; top: 0; z-index: 70;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 16px; background: var(--warn); color: #fff; font-size: .84rem;
}
.banda-suplantacion .btn { background: #fff; color: var(--warn); }

.caps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.caps-fam { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.caps-fam legend { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 0 5px; }
.caps-item { display: flex; align-items: center; gap: 8px; font-size: .82rem; padding: 3px 0; cursor: pointer; }
.caps-item input { width: 16px; height: 16px; accent-color: var(--brand); }
code { font-family: ui-monospace, monospace; font-size: .82em; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }

/* ───────────── Usuarios: etiquetas y notas (BACKOFFICE 3) ───────────── */
.tag-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tag-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; }
.tag-x:hover { color: var(--danger); }
.nota { border-left: 3px solid var(--line); padding: 6px 0 6px 12px; margin-bottom: 10px; }
.nota__meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
.nota__cuerpo { font-size: .88rem; white-space: pre-wrap; margin-top: 3px; }
.lista-simple { list-style: none; display: grid; gap: 4px; margin-top: 10px; font-size: .86rem; }

/* ───────────── Catálogo y flujo editorial (BACKOFFICE 5) ───────────── */
.tabs {
  display: flex; gap: 4px; overflow-x: auto; margin-bottom: 14px;
  border-bottom: 1px solid var(--line); padding-bottom: 2px;
  scrollbar-width: thin;
}
.tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: none; color: var(--muted); cursor: pointer;
  font: inherit; font-size: .86rem; padding: 9px 12px; border-radius: 9px 9px 0 0;
  border-bottom: 2px solid transparent; margin-bottom: -3px;
}
.tab:hover { color: var(--ink); background: var(--surface-2); }
.tab--activa { color: var(--ink); font-weight: 600; border-bottom-color: var(--brand); }
.tab__n {
  font-size: .74rem; color: var(--muted); background: var(--surface-2);
  border-radius: 20px; padding: 1px 7px; min-width: 22px; text-align: center;
}
.tab--activa .tab__n { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }

/* Barra de acciones sobre la selección. Pegada abajo para no perderla al hacer scroll. */
.barra-seleccion {
  position: sticky; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 12px 0; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); font-size: .86rem;
}
.barra-seleccion[hidden] { display: none; }

/* Lista de comprobaciones antes de publicar. */
.checks { list-style: none; display: grid; gap: 7px; margin: 0 0 14px; }
.check { display: flex; align-items: flex-start; gap: 9px; font-size: .88rem; color: var(--danger); }
.check span:first-child { flex: 0 0 auto; width: 16px; text-align: center; }
.check--ok { color: var(--ink-2); }
.check--ok span:first-child { color: var(--ok); }
.checks--avisos .check { color: var(--warn); }
.checks--avisos .check--ok { color: var(--ink-2); }

.comentarios { list-style: none; display: grid; gap: 12px; margin: 0 0 16px; }
.comentario { border-left: 3px solid var(--warn); padding: 4px 0 4px 12px; }
.comentario p { font-size: .9rem; margin: 0 0 3px; white-space: pre-wrap; }
.comentario--resuelto { border-left-color: var(--line); opacity: .62; }
.comentario--resuelto p:first-child { text-decoration: line-through; }

.lista-fallos { list-style: none; display: grid; gap: 7px; font-size: .86rem; margin-top: 8px; }
.lista-fallos strong { font-family: ui-monospace, monospace; font-size: .92em; }

.aviso {
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-left: 3px solid var(--warn); padding: 8px 12px;
  border-radius: 0 8px 8px 0; font-size: .86rem; margin: 10px 0;
}

/* En móvil las pestañas se deslizan y la barra de selección se apila. */
@media (max-width: 560px) {
  .barra-seleccion { flex-direction: column; align-items: stretch; }
  .barra-seleccion .btn { width: 100%; }
}

/* ───────────── Editor de guías (BACKOFFICE 6) ───────────── */
.ed-estado { margin-left: 10px; color: var(--ok); font-size: .78rem; }
.ed-idiomas { display: flex; gap: 4px; margin-top: 12px; }

/* Bloques de contenido */
.bloques, .dias, .paradas, .lugares { list-style: none; display: grid; gap: 12px; margin: 0 0 14px; padding: 0; }
.bloque {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 10px 12px 12px;
}
.bloque.arrastrando { opacity: .45; border-style: dashed; }
.bloque--oculto { opacity: .55; }
.bloque__barra { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.bloque__tipo {
  flex: 1; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.bloque__titulo, .bloque__cuerpo, .dia__titulo, .parada__titulo, .parada__hora {
  width: 100%; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: inherit; font: inherit; padding: 6px 8px;
}
.bloque__titulo { font-weight: 600; font-size: 1rem; }
.bloque__cuerpo { font-size: .9rem; line-height: 1.55; resize: vertical; min-height: 90px; }
.bloque__titulo:focus, .bloque__cuerpo:focus, .dia__titulo:focus,
.parada__titulo:focus, .parada__hora:focus {
  border-color: var(--brand); background: var(--surface-2); outline: none;
}
.bloque__titulo:hover, .bloque__cuerpo:hover { border-color: var(--line); }

/* feature/unify-destinations: bloques cuyo contenido es JSON (mapa, clima,
   comparador, preguntas frecuentes) en vez de título+texto libre. */
/* Los formularios por tipo de bloque se retiraron en
   refactor/unified-guide-renderer: ahora los genera el componente
   compartido y su CSS vive en assets/css/blocks.css. */

/* Itinerario */
.dia { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 10px 12px 12px; }
.dia__cabecera { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dia__cabecera strong { flex: 0 0 auto; font-size: .82rem; color: var(--muted); }
.paradas { gap: 5px; margin-bottom: 8px; }
.parada {
  display: flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); border-radius: 9px; padding: 3px 5px; background: var(--surface-2);
}
.parada.arrastrando { opacity: .45; border-style: dashed; }
.parada__hora { flex: 0 0 74px; font-variant-numeric: tabular-nums; font-size: .84rem; }
.parada__titulo { flex: 1; font-size: .9rem; }

/* Lugares */
.lugar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid var(--line); padding: 8px 0; font-size: .9rem;
}
.lugar:last-child { border-bottom: 0; }

/* El arrastre necesita puntero: en táctil se usan ↑/↓, que hacen lo mismo. */
@media (pointer: coarse) {
  .bloque, .parada { cursor: default; }
}
@media (max-width: 560px) {
  .parada { flex-wrap: wrap; }
  .parada__hora { flex: 0 0 70px; }
  .parada__titulo { flex: 1 1 100%; order: 3; }
}

/* ───────────── Biblioteca de medios (BACKOFFICE 7) ───────────── */
.medios-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px;
}
.medio {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden; display: flex; flex-direction: column;
}
/* Un archivo sin licencia no se puede publicar: se ve de lejos. */
.medio--alerta { border-color: var(--danger); }
.medio__img {
  display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; padding: 0;
  background: var(--surface-2); cursor: pointer; overflow: hidden;
}
.medio__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.medio__img:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.medio__pie { padding: 8px 10px 10px; display: grid; gap: 3px; font-size: .84rem; }
.medio__pie strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.medio--alerta .cell-sub { color: var(--danger); }

.dup { margin-bottom: 22px; }
.dup h3 { font-size: .92rem; color: var(--muted); margin-bottom: 9px; }

.field--archivo input[type="file"] { font-size: .82rem; max-width: 230px; }
.ficha-img {
  max-width: 100%; max-height: 260px; object-fit: contain;
  border-radius: 9px; background: var(--surface-2); display: block; margin: 0 auto;
}

@media (max-width: 480px) {
  .medios-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 9px; }
}

/* ───────────── Solicitudes y cola (BACKOFFICE 9) ───────────── */
.cita {
  border-left: 3px solid var(--line); padding: 4px 0 4px 12px;
  font-size: .9rem; white-space: pre-wrap; color: var(--ink-2); margin-bottom: 12px;
}

/* ───────────── Cuadro de mando, ajustes y alertas (BACKOFFICE 10) ───────────── */
.panel-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin-top: 16px;
}
.lista-cifras { list-style: none; display: grid; gap: 6px; margin: 0 0 12px; font-size: .9rem; }
.lista-cifras strong { font-variant-numeric: tabular-nums; }

/* Un aviso crítico manda: va arriba y no se confunde con el resto. */
.aviso--critico {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-left-color: var(--danger);
}
.aviso--critico a { color: var(--danger); font-weight: 600; margin-left: 6px; }

/* feature/admin-gift-links: resultado del enlace de regalo recién generado. */
.aviso--ok {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border-left-color: var(--ok);
}

.campo-ayuda { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; margin-top: 2px; }
.field--check { flex-direction: row; align-items: flex-start; gap: 9px; }
.field--check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--brand); }
.check-inline { display: inline-flex; align-items: center; gap: 7px; font-size: .86rem; color: var(--muted); }
.check-inline input { width: 16px; height: 16px; accent-color: var(--brand); }

/* ─── Clases que sustituyen a los `style="..."` de las vistas (requisito 12) ───
   Un atributo de estilo dentro de una cadena de HTML es CSS en línea: la CSP
   lo bloquea igual que un `<style>`, y mientras quedara uno el sitio entero
   tenía que seguir concediendo 'unsafe-inline'. */
.mt-8  { margin: 8px 0 0; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.sin-margen { margin: 0; }
.oculto { display: none; }
.col-completa { grid-column: 1 / -1; }
.h3-compacto { font-size: .95rem; }
.ta-left { text-align: left; }
.ta-right { text-align: right; }
.ta-center { text-align: center; }

.vista-portada {
  max-width: 320px; max-height: 180px; object-fit: cover;
  border-radius: 10px; display: block;
}
.vista-regalo { max-width: 160px; border-radius: 8px; margin-top: 6px; }

.editor-html {
  width: 100%; min-height: 60vh;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem;
  line-height: 1.5; padding: 14px;
  border: 1px solid var(--line, var(--color-linea, #DCE3E9)); border-radius: 10px;
  background: var(--surface, #fff); color: inherit; resize: vertical;
}
.state--carga { margin: 80px auto; max-width: 420px; }

/* Panel operativo (feature/dynamic-widgets-platform). */
.panel--ok { opacity: .75; }
.op-arreglo { font-size: .85rem; margin: 8px 0 12px; }
/* El porcentaje de cuota consumida: al 80 % salta una alerta sola, así que
   ese es el umbral que hay que ver sin leer el número. */
.op-regular { color: #8a6400; font-weight: 700; }
.op-mal { color: #a32020; font-weight: 700; }

/* ═══════════════ Espacio de trabajo del editor de guías ═══════════════

   Antes el editor era una columna infinita: Cabecera, Contenido, Itinerario y
   Lugares uno debajo de otro, sin navegación y con las acciones al principio.
   Para tocar los Lugares de una guía con treinta bloques había que bajar a
   ciegas, y al llegar ya no se veía ni el botón de guardar ni en qué guía
   estabas.

   Ahora hay tres piezas fijas: una barra de acciones que no se va al hacer
   scroll, un índice vertical de secciones a la izquierda, y el contenido a la
   derecha. El índice marca en qué sección estás (`is-activa`, lo pone el JS
   con IntersectionObserver), así que la posición dentro de un documento largo
   deja de ser algo que haya que recordar. */

.ed-espacio { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 28px; align-items: start; }

/* La barra pegajosa vive por encima de la rejilla, no dentro: si estuviera en
   una columna, `position: sticky` se quedaría atrapado en su celda. */
.ed-barra {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 0 20px; padding: 12px 0;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.ed-barra__id { min-width: 0; flex: 1 1 260px; }
.ed-barra__id h1 { margin: 0; font-size: 1.25rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-barra__meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; color: var(--muted); font-size: .8rem; }
.ed-barra__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.ed-barra .ed-estado { color: var(--ok); font-size: .8rem; }

/* Índice de secciones. También pegajoso: es una tabla de contenidos, y una
   tabla de contenidos que se va con el scroll no sirve de nada. */
.ed-indice { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; }
.ed-indice__titulo {
  margin: 0 0 8px; padding: 0 10px; color: var(--muted);
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.ed-indice a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 10px; border-radius: 9px;
  color: var(--ink-2); font-size: .88rem; text-decoration: none;
  border-left: 2px solid transparent;
}
.ed-indice a:hover { background: var(--surface-2); }
.ed-indice a.is-activa { background: var(--surface); border-left-color: var(--brand); color: var(--ink); font-weight: 600; }
.ed-indice__n { color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; }
.ed-indice a.is-activa .ed-indice__n { color: var(--brand); }

/* `scroll-margin-top` para que al saltar a una sección no quede tapada por la
   barra pegajosa — el fallo clásico de un índice sobre una cabecera fija. */
.ed-seccion { scroll-margin-top: 92px; margin-bottom: 32px; }
.ed-seccion > h2 {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
  font-size: 1.05rem;
}
.ed-seccion > h2 .ed-seccion__n { color: var(--muted); font-size: .8rem; font-weight: 400; }

@media (max-width: 900px) {
  .ed-espacio { grid-template-columns: 1fr; gap: 16px; }
  /* En móvil el índice pasa a ser una tira horizontal desplazable: una columna
     lateral de 216px se comería la pantalla. */
  .ed-indice { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .ed-indice__titulo { display: none; }
  .ed-indice a { flex: 0 0 auto; border-left: 0; border-bottom: 2px solid transparent; border-radius: 9px 9px 0 0; }
  .ed-indice a.is-activa { border-left: 0; border-bottom-color: var(--brand); }
  .ed-barra { position: static; }
  .ed-seccion { scroll-margin-top: 12px; }
}

/* ── Línea de tiempo de una guía ──
   Sustituye a la tabla que solo enseñaba cambios de estado. Es una lista, no
   una tabla, porque las filas no comparten columnas: una compra lleva importe
   y un cambio de portada no, y forzarlas al mismo esqueleto deja la mitad de
   las celdas vacías. */
.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.lt { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lt:last-child { border-bottom: 0; }
.lt__icono {
  flex: 0 0 30px; display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface); font-size: .9rem;
}
.lt__cuerpo { min-width: 0; }
.lt__titulo { margin: 0; font-size: .92rem; }
.lt__detalle { margin: 3px 0 0; color: var(--ink-2); font-size: .82rem; overflow-wrap: anywhere; }
.lt__meta { margin: 3px 0 0; color: var(--muted); font-size: .76rem; }
/* Lo que mueve dinero o quita acceso se distingue de un vistazo: son las dos
   cosas que se buscan cuando alguien reclama. */
.lt[data-tipo="cobro"] .lt__icono { border-color: var(--ok); }
.lt[data-tipo="reembolso"] .lt__icono,
.lt[data-tipo="revocacion"] .lt__icono { border-color: var(--danger); }

/* ═══════════════ Editor de bloques ═══════════════ */

/* El «+» entre bloques. Discreto en reposo y evidente al pasar por encima:
   está repetido una vez por bloque, así que si gritara sería ruido. */
.ed-insertar { display: flex; justify-content: center; padding: 2px 0; }
.ed-insertar__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border: 1px dashed transparent; border-radius: 999px;
  background: transparent; color: var(--muted);
  font-family: inherit; font-size: .76rem; cursor: pointer; opacity: .45;
  transition: opacity .15s ease, border-color .15s ease, color .15s ease;
}
.ed-insertar:hover .ed-insertar__btn,
.ed-insertar__btn:focus-visible { opacity: 1; border-color: var(--line); color: var(--ink); }
.ed-insertar__btn span { font-size: 1rem; line-height: 1; }

.ed-bloques-acciones { display: flex; gap: 8px; margin-bottom: 8px; }

/* Cabecera de bloque: número, tipo y un resumen de lo que lleva dentro, para
   que plegado siga diciendo algo. */
.bloque__barra { display: flex; align-items: center; gap: 8px; }
.bloque__n {
  min-width: 22px; padding: 1px 6px; border-radius: 6px; background: var(--surface-2);
  color: var(--muted); font-family: var(--mono, ui-monospace, monospace); font-size: .72rem; text-align: center;
}
.bloque__resumen {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-size: .82rem;
}
.bloque__plegar { flex: 0 0 auto; }
.bloque--plegado .bloque__editor { display: none; }
.bloque--plegado { opacity: .85; }

/* Paleta de tipos de bloque. */
.paleta-fondo {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: start center;
  padding: 10vh 16px; background: rgba(0,0,0,.45);
}
.paleta {
  width: min(520px, 100%); max-height: 74vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
.paleta__buscar { margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.paleta__lista { flex: 1 1 auto; overflow-y: auto; padding: 8px; }
.paleta__op {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: var(--radius);
  background: transparent; color: var(--ink); text-align: left; cursor: pointer;
}
.paleta__op:hover, .paleta__op:focus-visible { background: var(--surface-2); }
.paleta__icono {
  flex: 0 0 30px; display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: .95rem;
}
.paleta__op strong { display: block; font-size: .92rem; }
.paleta__op small { display: block; margin-top: 2px; color: var(--muted); font-size: .8rem; }
.paleta__vacio { padding: 18px 12px; text-align: center; }
.paleta__pie { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); text-align: right; }

/* ───────────── Ficha de guía ─────────────

   Rejilla de 12 columnas, 16-24 px entre bloques, radio 10-12 px y el coral
   corporativo SOLO en la acción principal. Verde para lo correcto, naranja
   para las recomendaciones, rojo para lo que impide publicar y para lo
   destructivo — nunca como decoración.

   La columna principal ocupa 7 de las 12 y la lateral 5. Es lo que mide la
   referencia, y tiene motivo: con 8+4 el panel de preparación se queda en
   ~410 px y cada fila (icono + texto de dos líneas + botón «Revisar») parte
   el texto en tres renglones. La lista de lo que falta para publicar es
   justo lo que hay que poder leer de un vistazo. */

.ficha { max-width: var(--contenido-max); margin: 0 auto; }

/* Cabecera fija: al bajar por un formulario largo no se pierde de vista ni
   qué guía es ni si se puede publicar. */
.ficha__cab {
  position: sticky; top: 0; z-index: 30;
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding: 4px 0 18px; margin-bottom: 20px;
}
.ficha__miga { font-size: .8rem; color: var(--muted); margin-bottom: 14px; }
.ficha__miga a { color: var(--muted); }
.ficha__miga a:hover { color: var(--ink); }
.ficha__cab-fila { display: flex; align-items: flex-start; gap: 20px; }
.ficha__portada {
  width: 188px; height: 132px; object-fit: cover; border-radius: var(--radius-lg);
  border: 1px solid var(--line); flex: 0 0 auto; background: var(--surface-2);
}
/* Sin portada no se enseña un hueco roto: se enseña que falta, que además es
   uno de los bloqueos para publicar. */
.ficha__portada--vacia {
  display: grid; place-items: center; gap: 6px;
  color: var(--muted); font-size: .74rem; text-align: center;
  border-style: dashed; border-color: var(--line-strong);
}
.ficha__portada--vacia .ico { width: 22px; height: 22px; }
.ficha__cab-txt { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
/* Serif SOLO en el título de la guía. Lo demás es interfaz. */
.ficha__titulo {
  font-family: var(--serif); font-weight: 600;
  font-size: 2rem; line-height: 1.18; letter-spacing: -.01em;
  margin: 0 0 12px; max-width: 22ch;
}
.ficha__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .82rem; color: var(--ink-2); }
.ficha__meta .badge { margin-right: 2px; }
.ficha__slug { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.ficha__punto { color: var(--muted); }
.ficha__guardado {
  display: flex; align-items: center; gap: 6px;
  font-size: .8rem; color: var(--muted); margin-top: 10px; min-height: 18px;
}
.ficha__guardado--ok { color: var(--ok); }
.ficha__guardado--mal { color: var(--danger); }
.ficha__guardado .ico { width: 14px; height: 14px; }
/* `nowrap`: con `wrap`, a 1440 px el botón de «…» se caía a una segunda fila
   él solo y la cabecera crecía 40 px sin ganar nada. Por debajo de 1024 las
   acciones pasan a su propia fila entera, que es otra cosa. */
.ficha__cab-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; position: relative; padding-top: 2px; }
.ficha__cab-acciones .btn { min-height: 40px; padding-inline: 13px; }
.btn--icono { padding-inline: 0; width: 40px; }

/* Menú de más opciones */
.ficha__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 330px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 6px; display: grid; gap: 2px;
}
.ficha__menu-op {
  display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 8px;
  background: transparent; border: 0; color: var(--ink); cursor: pointer; width: 100%; font: inherit;
}
.ficha__menu-op strong { font-size: .86rem; font-weight: 600; }
.ficha__menu-op:hover, .ficha__menu-op:focus-visible { background: var(--surface-2); outline: none; }
.ficha__menu-op small { color: var(--muted); font-size: .76rem; line-height: 1.4; }
.ficha__menu-op.is-peligro strong { color: var(--danger); }

/* ── Métricas ── */
.ficha__metricas {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px; margin-bottom: 22px;
}
.ficha__metricas--interna { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 12px 0; }
.kpi {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 15px 16px; min-width: 0;
}
.kpi__ico {
  flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; background: var(--surface-2); color: var(--ink-2);
}
.kpi__ico .ico { width: 19px; height: 19px; }
.kpi__ico--ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.kpi__ico--info { color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); }
.kpi__ico--brand { color: var(--brand); background: var(--brand-suave); }
.kpi__txt { min-width: 0; }
.kpi__l { font-size: .76rem; color: var(--muted); margin-bottom: 2px; }
.kpi__v { font-size: .95rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi--ok .kpi__v { color: var(--ok); }
.kpi--mal .kpi__v { color: var(--danger); }
.sin-dato { color: var(--muted); font-style: italic; font-size: .9em; font-weight: 400; }

/* El anillo de progreso. `--pct` lo pone el JS por CSSOM: un `style=` dentro
   de una cadena de HTML lo bloquea la CSP de /admin/*. */
.aro {
  position: relative; display: grid; place-items: center; flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 50%;
  background: conic-gradient(var(--aro-color, var(--brand)) var(--pct, 0%), var(--line) 0);
}
.aro::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface);
}
.aro > b { position: relative; z-index: 1; font-size: .7rem; font-weight: 600; }
.aro--grande { width: 92px; height: 92px; }
.aro--grande::after { inset: 9px; }
.aro--grande > b { font-size: 1.15rem; }
.aro--ok { --aro-color: var(--ok); }

/* ── Pestañas ── */
.ficha__tabs {
  display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line);
  margin-bottom: 22px; scrollbar-width: thin;
}
.ficha__tab {
  flex: 0 0 auto; padding: 11px 14px; background: transparent; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--muted); cursor: pointer; font: inherit; font-size: .87rem; white-space: nowrap;
}
.ficha__tab:hover { color: var(--ink); }
.ficha__tab.is-actual { color: var(--ink); font-weight: 600; border-bottom-color: var(--brand); }
.ficha__tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -4px; }

/* ── Rejilla de 12: 7 + 5 ── */
.ficha__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ficha__col { grid-column: span 7; display: grid; gap: 16px; min-width: 0; }
.ficha__lateral { grid-column: span 5; display: grid; gap: 16px; min-width: 0; align-content: start; }
.ficha__col > .card, .ficha__lateral > .card { margin-bottom: 0; }
.card--sticky { position: sticky; top: 210px; }
.card__t { font-size: .95rem; font-weight: 600; margin-bottom: 16px; }

/* ── Ficha pública: formulario y portada, lado a lado ── */
.ficha-publica { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 26px; }
.ficha-publica__form { display: grid; gap: 12px; align-content: start; }
.ficha-publica__par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ficha-publica__portada { display: grid; gap: 10px; align-content: start; }
.sub-t { font-size: .78rem; font-weight: 600; color: var(--ink-2); }

.portada__zona {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg);
  aspect-ratio: 16 / 10; overflow: hidden; background: var(--field);
  display: grid; place-items: center; cursor: pointer;
}
.portada__zona:hover, .portada__zona.is-sobre, .portada__zona:focus-visible {
  border-color: var(--brand); outline: none;
}
.portada__zona.is-sobre { background: var(--brand-suave); }
.portada__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portada__vacia { display: grid; justify-items: center; gap: 8px; color: var(--muted); font-size: .8rem; padding: 20px; text-align: center; }
.portada__vacia .ico { width: 24px; height: 24px; }
.portada__pista { font-size: .75rem; color: var(--muted); line-height: 1.45; }
.portada__error { color: var(--danger); font-size: .78rem; }
.portada__acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.portada__avanzado summary { cursor: pointer; font-size: .78rem; color: var(--muted); }
.portada__avanzado[open] { display: grid; gap: 10px; }
.portada__avanzado .form-grid { margin-top: 10px; }
.regalo__foto { max-width: 200px; border-radius: 10px; margin-top: 8px; }

/* Etiquetas: fichas que se quitan de una, no una lista separada por comas. */
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 6px 5px 10px; font-size: .78rem;
}
.etiqueta__x {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px;
  border: 0; background: none; color: var(--muted); cursor: pointer;
}
.etiqueta__x:hover { background: var(--line); color: var(--ink); }
.etiqueta__x .ico { width: 11px; height: 11px; }
.etiqueta--anadir {
  border-style: dashed; color: var(--ink-2); cursor: pointer; font: inherit; font-size: .78rem;
  padding: 5px 10px; background: transparent;
}
.etiqueta--anadir:hover { border-color: var(--brand); color: var(--brand); }
.etiqueta__campo { width: 150px; }

/* ── Vista previa en el catálogo ── */
.tarjeta-prev { display: flex; gap: 16px; align-items: stretch; }
.tarjeta-prev__img {
  width: 148px; flex: 0 0 auto; border-radius: var(--radius); min-height: 104px;
  background: var(--surface-2) center/cover no-repeat; border: 1px solid var(--line);
}
.tarjeta-prev__txt { min-width: 0; display: grid; align-content: start; gap: 6px; }
.tarjeta-prev__txt h3 { font-size: 1rem; font-weight: 600; }
.tarjeta-prev__txt p { font-size: .82rem; color: var(--muted); line-height: 1.45; }
.tarjeta-prev__pie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.tarjeta-prev__estrellas { margin-left: auto; color: var(--muted); font-size: .78rem; display: inline-flex; align-items: center; gap: 3px; }
.tarjeta-prev__estrellas .ico { width: 12px; height: 12px; }
.chip {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); font-size: .74rem; color: var(--ink-2);
}
.chip--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 38%, transparent); background: color-mix(in srgb, var(--ok) 14%, transparent); }

/* ── Estructura del contenido ── */
.estructura { display: flex; align-items: center; gap: 34px; }
.estructura__d { display: flex; align-items: center; gap: 12px; }
.estructura__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius); color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); }
.estructura__ico .ico { width: 22px; height: 22px; }
.estructura__n { font-size: 1.35rem; font-weight: 600; line-height: 1.1; }
.estructura__l { font-size: .78rem; color: var(--muted); }
.estructura__ir { margin-left: auto; }

/* ── Preparación para publicar ── */
.prep { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.prep__nums { list-style: none; display: grid; gap: 12px; min-width: 0; }
.prep__nums li { display: grid; gap: 1px; font-size: .84rem; }
.prep__nums strong { font-weight: 600; }
.prep__nums small { color: var(--muted); font-size: .77rem; }
.prep__nums .is-mal strong { color: var(--danger); }
.prep__nums .is-aviso strong { color: var(--warn); }
.prep__nums .is-ok strong { color: var(--ok); }

.prep__lista { list-style: none; display: grid; gap: 2px; border-top: 1px solid var(--line); padding-top: 10px; }
.prep__lista li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px;
  align-items: center; padding: 6px 0; font-size: .84rem;
}
.prep__lista .ico { width: 16px; height: 16px; }
.prep__lista .is-mal > .ico { color: var(--danger); }
.prep__lista .is-aviso > .ico { color: var(--warn); }
.prep__lista .is-ok > .ico { color: var(--ok); }
.prep__txt { min-width: 0; }
.prep__grupo { margin-top: 10px; }
.prep__grupo summary { cursor: pointer; font-size: .8rem; color: var(--muted); padding: 6px 0; }
.prep__grupo[open] summary { margin-bottom: 4px; }
.prep__acabar { margin-top: 14px; }

/* Próxima acción: un solo siguiente paso, el primer bloqueo real. */
.siguiente { display: flex; align-items: center; gap: 14px; }
.siguiente__ico {
  flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--brand-suave); color: var(--brand);
}
.siguiente__ico .ico { width: 21px; height: 21px; }
.siguiente__txt { min-width: 0; display: grid; gap: 2px; }
.siguiente__t { font-size: .88rem; font-weight: 600; }
.siguiente__d { font-size: .78rem; color: var(--muted); line-height: 1.4; }
.siguiente .btn { margin-left: auto; }

/* Actividad reciente: hora, qué pasó y quién. Sin inventar nada: si no hay
   registro, se dice que no lo hay. */
.actividad { list-style: none; display: grid; gap: 2px; }
.actividad li {
  display: grid; grid-template-columns: 9px 88px minmax(0, 1fr) auto; gap: 10px;
  align-items: baseline; padding: 6px 0; font-size: .82rem;
}
.actividad__p { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); align-self: center; }
.actividad__p--ok { background: var(--ok); }
.actividad__p--brand { background: var(--brand); }
.actividad__p--info { background: var(--info); }
.actividad__cuando { color: var(--muted); }
.actividad__que { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actividad__quien { color: var(--muted); }
.actividad__ver { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; color: var(--brand); font-size: .82rem; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.actividad__ver .ico { width: 13px; height: 13px; }

.quien-ve { list-style: none; display: grid; gap: 10px; font-size: .82rem; }
.quien-ve li { display: grid; gap: 2px; }
.quien-ve span { color: var(--muted); }

/* SEO */
.goog__u { font-size: .76rem; color: var(--muted); }
.goog__t { font-size: 1.05rem; color: #8ab4f8; margin: 2px 0; }
.goog__d { font-size: .82rem; color: var(--muted); }
.field em { color: var(--muted); font-style: normal; font-size: .74rem; float: right; }

/* Notas de revisión */
.notas { list-style: none; display: grid; gap: 12px; }
.nota { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.nota__cab { display: flex; gap: 8px; align-items: center; font-size: .76rem; color: var(--muted); margin-bottom: 6px; }
.nota__cuerpo { font-size: .86rem; }
.nota__acc { margin-top: 8px; }
.notas--res .nota { opacity: .7; }
.nota-nueva { display: grid; gap: 12px; }

/* Línea temporal de la pestaña de actividad */
.linea { list-style: none; display: grid; gap: 0; }
.linea__i { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px 0 12px 16px; border-left: 1px solid var(--line); margin-left: 4px; position: relative; }
.linea__p { position: absolute; left: -4px; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.linea__t { font-size: .86rem; }
.linea__n { font-size: .8rem; color: var(--ink-2); }
.linea__m { font-size: .76rem; color: var(--muted); }

.medios-elegir { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; max-height: 320px; overflow: auto; }
.medios-elegir__i { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: none; padding: 0; cursor: pointer; }
.medios-elegir__i img { width: 100%; height: 70px; object-fit: cover; display: block; }
.medios-elegir__i:hover { border-color: var(--brand); }

.card--aviso { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
.card--ok { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); }
.tabla-envoltorio { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tabla th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tabla tr:last-child td { border-bottom: 0; }
.ta-right { text-align: right; }
.btn--xs { min-height: 28px; padding: 0 9px; font-size: .76rem; border-radius: 7px; }
.field--sm { max-width: 200px; }

/* El campo que el servidor ha rechazado: en rojo, con el motivo debajo y
   enlazado por aria-describedby desde el JS. Un aviso genérico arriba obliga
   a adivinar cuál de los quince campos era. */
.campo-error { color: var(--danger); font-size: .76rem; font-weight: 400; margin-top: 4px; }
.field--mal input, .field--mal select, .field--mal textarea { border-color: var(--danger); }

/* La acción principal cuando todavía no se puede hacer: sigue estando —para
   que la pantalla tenga objetivo— pero apagada y con el motivo en `title`. */
.btn--primary:disabled { opacity: .5; }
.btn--primary:disabled:hover { background: var(--brand); }

/* Barra inferior de móvil: en escritorio no existe. */
.ficha__movil { display: none; }

/* ── Tablet ── */
@media (max-width: 1180px) {
  .ficha__metricas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .ficha__rejilla { grid-template-columns: minmax(0, 1fr); }
  .ficha__col, .ficha__lateral { grid-column: 1 / -1; }
  .card--sticky { position: static; }
  .ficha__titulo { font-size: 1.75rem; max-width: none; }
  .ficha__cab-fila { flex-wrap: wrap; }
  /* Las acciones bajan a su propia fila en vez de comprimir el título. */
  .ficha__cab-acciones { flex-basis: 100%; flex-wrap: wrap; }
  .ficha-publica { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* ── Móvil ── */
@media (max-width: 640px) {
  .ficha__cab { padding-top: 0; margin-bottom: 16px; }
  .ficha__cab-fila { gap: 14px; }
  .ficha__titulo { font-size: 1.4rem; }
  .ficha__portada { width: 96px; height: 68px; }
  /* Las acciones se van a la barra inferior fija: cuatro botones en la
     cabecera de un móvil se parten en tres filas. */
  .ficha__cab-acciones { display: none; }
  .ficha__metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 12px; gap: 10px; }
  .kpi__ico, .aro { width: 32px; height: 32px; }
  .ficha__movil {
    display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--line);
  }
  .ficha__movil .btn { flex: 1; justify-content: center; min-height: 44px; }
  .ficha__panel { padding-bottom: 80px; }
  .form-grid, .ficha-publica__par { grid-template-columns: 1fr; }
  .estructura { flex-wrap: wrap; gap: 18px; }
  .estructura__ir { margin-left: 0; flex-basis: 100%; }
  .estructura__ir .btn { width: 100%; }
  .tarjeta-prev { flex-direction: column; }
  .tarjeta-prev__img { width: 100%; height: 140px; }
  .actividad li { grid-template-columns: 9px minmax(0, 1fr); row-gap: 2px; }
  .actividad__quien, .actividad__cuando { grid-column: 2; font-size: .76rem; }
}

/* Quien pide menos movimiento no ve ninguno. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ───────────── Asistente de creación de guías ─────────────
   Sin `style=` en línea por ninguna parte: la CSP de /admin/* no concede
   'unsafe-inline' y un atributo de estilo escrito por JavaScript lo bloquea
   el navegador igual que uno escrito a mano. Lo que depende de los datos
   —el ancho de la barra de progreso, la foto de la vista previa— se aplica
   con `style.setProperty()`, que es CSSOM y la CSP no mira. */

.page-head--con-accion {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.page-head__accion { flex-shrink: 0; }
/* En móvil el botón pasa a ocupar el ancho: un botón primario de 90 px en la
   esquina se falla con el pulgar. */
@media (max-width: 640px) {
  .page-head--con-accion { flex-direction: column; align-items: stretch; }
  .page-head__accion { width: 100%; text-align: center; }
}

.asis {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow);
}

.asis__pasos { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 12px; }
.asis__paso {
  flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  font-size: .82rem; white-space: nowrap;
}
.asis__paso:hover:not(:disabled) { color: var(--ink); border-color: var(--brand); }
.asis__paso:disabled { opacity: .45; cursor: not-allowed; }
.asis__paso.is-actual { background: var(--brand); border-color: var(--brand); color: #fff; }
.asis__paso.is-hecho { color: var(--ink); border-color: var(--brand); }
/* El foco tiene que verse: media docena de estos pasos se recorren con Tab. */
.asis__paso:focus-visible,
.asis .btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.asis__estado { min-height: 20px; font-size: .82rem; color: var(--muted); margin-bottom: 10px; }
.asis__estado--guardando { color: var(--muted); }
.asis__estado--ok { color: #4ade80; }
.asis__estado--mal { color: #f87171; }

.asis__barra { margin-bottom: 14px; }
.asis__progreso { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.asis__progreso > span { display: block; height: 100%; width: 0; background: var(--brand); transition: width .25s; }
.asis__progreso > span.is-medido { width: var(--pct, 0%); }
.asis__progreso-txt { font-size: .8rem; color: var(--muted); margin-top: 6px; }

.asis__errores {
  border: 1px solid #f87171; border-radius: var(--radius); padding: 10px 12px;
  margin-bottom: 14px; font-size: .85rem; color: #fca5a5;
}
.asis__err { color: #f87171; font-size: .78rem; margin-top: 4px; }
.field--mal input, .field--mal textarea, .field--mal select { border-color: #f87171; }

.asis__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.field--ancho { grid-column: 1 / -1; }
.field--check { flex-direction: row; align-items: center; gap: 8px; }
.asis__ayuda { display: block; font-size: .76rem; color: var(--muted); margin-top: 4px; }
.asis__req { color: var(--brand); }
.asis__slug-estado { display: block; font-size: .76rem; margin-top: 4px; }
.asis__slug-estado.is-ok { color: #4ade80; }
.asis__slug-estado.is-mal { color: #f87171; }
.asis__cargando { color: var(--muted); font-size: .85rem; }

.asis__opciones { border: 0; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.asis__opciones legend { font-size: .9rem; margin-bottom: 8px; }
.asis__opcion {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.asis__opcion:hover { border-color: var(--brand); }
.asis__opcion small { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }

.asis__bloques { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; }
.asis__bloques legend { font-size: .82rem; color: var(--muted); padding: 0 6px; }
/* Cada clase de bloque se distingue por color de borde: editable, fijo,
   alimentado por API u opcional no son lo mismo y el paso 6 tiene que
   dejarlo ver sin leer una leyenda. */
.asis__bloques--fijo { border-style: dashed; }
.asis__bloques--api { border-color: #60a5fa; }
.asis__bloques--opcional { opacity: .85; }
.asis__bloque { display: inline-flex; align-items: center; gap: 6px; margin: 4px 10px 4px 0; font-size: .85rem; }

.asis__checks { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; }
.asis__check { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; font-size: .86rem; }
.asis__check.is-ok > span:first-child { color: #4ade80; }
.asis__check.is-mal > span:first-child { color: #f87171; }
.asis__check.is-aviso > span:first-child { color: #fbbf24; }
.asis__check small { color: var(--muted); font-size: .74rem; }

.asis__preview { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.asis__preview h2 { font-size: .9rem; color: var(--muted); margin-bottom: 10px; }
.asis__tarjeta { max-width: 320px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.asis__tarjeta-img { height: 160px; background: var(--line) center/cover no-repeat; }

/* ── Bloques dentro de un paso ──
   Quince campos seguidos se leen como una lista de la compra: no se ve dónde
   acaba «cuánto cuesta» y dónde empieza «quién puede verla». */
/* `asis__grupo` y no `asis__bloque`: ese nombre YA lo usa el paso 6 para sus
   píldoras de bloques de contenido, y es `inline-flex`. Reutilizarlo dejaba
   cada grupo del formulario como una píldora de 349 px con la cabecera al lado
   de los campos. Dos cosas distintas, dos nombres. */
.asis__grupo { margin-bottom: 22px; }
.asis__grupo + .asis__grupo { padding-top: 20px; border-top: 1px solid var(--line); }
.asis__grupo-cab { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; }
.asis__grupo-ico {
  display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 10px; background: var(--brand-suave); color: var(--brand);
}
.asis__grupo-ico svg { width: 18px; height: 18px; }
.asis__grupo-cab h2 { font-size: 1rem; font-weight: 700; color: var(--ink); }
.asis__grupo-cab p { margin-top: 2px; font-size: .8rem; color: var(--muted); }

/* ── «Otros…» ── */
/* Aparece pegado a lo que lo abre, no al final del formulario: si saliera
   lejos, elegir «Otros» parecería no hacer nada. */
.asis__otro { margin-top: 6px; }
.asis__chip--otro { border-style: dashed; }
.asis__ayuda--aviso { flex: 0 0 100%; color: var(--warn); }

/* ── Paso 3 · casillas de clasificación ── */
/* Un `<select multiple>` obliga a saber que hay que pulsar Ctrl, y en móvil
   es directamente impracticable. Casillas: se ve todo y se marca con el dedo. */
/* LAS PÍLDORAS IBAN UNA POR LÍNEA, ocupando el ancho entero. El fieldset
   lleva también la clase `.field`, que es `display:flex; flex-direction:
   column`: dentro de una columna flex, un hijo `inline-flex` se estira porque
   `align-items` es `stretch` por defecto. Se declara la fila aquí. */
.asis__chips { border: 0; padding: 0; margin: 0; display: flex; flex-flow: row wrap; gap: 0; }
.asis__chips legend { flex: 0 0 100%; font-size: .82rem; color: var(--ink-2); margin-bottom: 8px; padding: 0; }
.asis__chips .asis__ayuda { flex: 0 0 100%; }
.asis__chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; margin: 0 7px 7px 0; border-radius: 99px;
  border: 1.5px solid var(--line); background: var(--field);
  font-size: .84rem; cursor: pointer; user-select: none;
}
.asis__chip:hover { border-color: var(--line-strong); }
/* El estado marcado NO va solo por color: la casilla sigue ahí y se ve. */
.asis__chip:has(input:checked) { border-color: var(--brand); background: var(--brand-suave); color: var(--ink); }
.asis__chip:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.asis__chip input { width: 15px; height: 15px; accent-color: var(--brand); flex: 0 0 auto; }

/* ── Paso 4 · subir la portada ── */
.asis__portada { border: 0; padding: 0; margin: 0; display: block; }
.asis__portada legend { font-size: .82rem; color: var(--ink-2); margin-bottom: 8px; padding: 0; }
.asis__portada-zona {
  display: grid; place-items: center; min-height: 190px; overflow: hidden;
  border: 2px dashed var(--line-strong); border-radius: 12px;
  background: var(--field); cursor: pointer; text-align: center;
}
.asis__portada-zona.is-sobre { border-color: var(--brand); background: var(--brand-suave); }
.asis__portada-zona:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.asis__portada-zona.tiene { border-style: solid; padding: 0; }
.asis__portada-img { display: block; width: 100%; max-height: 300px; object-fit: cover; }
.asis__portada-vacia { color: var(--muted); font-size: .86rem; padding: 20px; margin: 0; }
.asis__portada-pie { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.asis__portada-pie .asis__ayuda { margin-top: 0; }
.asis__portada-error { margin-top: 8px; font-size: .82rem; color: var(--danger); }

/* ── Paso 4 · la misma foto en las tres formas ── */
.asis__formas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.asis__forma { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.asis__forma figcaption { padding: 8px 11px; font-size: .74rem; color: var(--muted); }
/* Las proporciones reales de cada hueco: 16:9 en la cabecera, 1.91:1 en redes.
   Si no son las de verdad, la vista previa miente sobre dónde corta. */
.asis__tarjeta-img--ancha { height: auto; aspect-ratio: 16 / 9; }
.asis__tarjeta-img--social { height: auto; aspect-ratio: 1.91 / 1; }
.asis__tarjeta-txt { padding: 12px; }
.asis__tarjeta-txt h3 { font-size: 1rem; margin-bottom: 4px; }
.asis__tarjeta-txt p { font-size: .82rem; color: var(--muted); }
.asis__google { max-width: 560px; }
.asis__google-url { font-size: .78rem; color: #9aa0a6; }
.asis__google-t { font-size: 1.05rem; color: #8ab4f8; margin: 2px 0; }
.asis__google-d { font-size: .84rem; color: var(--muted); }

.asis__pie, .asis__acciones {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
}
/* Los botones se quedan a la vista al hacer scroll: un formulario de veinte
   campos deja «Siguiente» fuera de pantalla, y entonces nadie lo encuentra. */
.asis__pie { position: sticky; bottom: 0; background: var(--surface); }
@media (max-width: 640px) {
  .asis__pie { flex-direction: column-reverse; }
  .asis__pie .btn { width: 100%; }
  .asis__rejilla { grid-template-columns: 1fr; }
}

/* ═════════════ Catálogo ═════════════
 *
 * Mismos tokens oscuros que la ficha de guía: el catálogo y la ficha son la
 * misma herramienta en dos pantallas, y una diferencia de fondo o de radio
 * entre ellas se lee como «esto es otra aplicación».
 *
 * Nada de esto usa `style=` en línea: `/admin/*` no concede 'unsafe-inline'
 * (ver `_headers`). Lo que depende de los datos —el ancho de la barra de
 * preparación— entra por variable CSS puesta con `style.setProperty()`.
 */

.miga { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--muted); font-size: .82rem; }
.miga a { color: var(--muted); }
.miga a:hover { color: var(--ink); }

.cat__cab { align-items: flex-start; }
.cat__cab-acciones { display: flex; align-items: center; gap: 8px; }

/* ── Resumen operativo ── */
.cat__resumen {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin: 20px 0 24px;
}
.cat__tarjeta {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px 18px; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  color: var(--ink); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.cat__tarjeta:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line); }
.cat__tarjeta:disabled { cursor: default; }
.cat__tarjeta--cargando { height: 78px; background: var(--surface-2); border-style: dashed; }
.cat__tarjeta-ico {
  display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 11px; background: rgba(255, 56, 85, .12); color: var(--brand);
}
.cat__tarjeta--alerta .cat__tarjeta-ico { background: rgba(255, 159, 50, .14); color: var(--warn); }
.cat__tarjeta--ok .cat__tarjeta-ico { background: rgba(49, 201, 107, .13); color: var(--ok); }
.cat__tarjeta-txt { min-width: 0; }
.cat__tarjeta-txt small { display: block; color: var(--muted); font-size: .8rem; }
.cat__tarjeta-txt strong { display: block; font-size: 1.6rem; font-weight: 600; line-height: 1.15; }
.cat__tarjeta-pie { display: block; color: var(--muted); font-size: .74rem; }

/* ── Selector de tipo ── */
.cat__vistas {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--surface);
}
.cat__vista {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 8px;
  background: transparent; color: var(--muted); font-size: .88rem;
}
.cat__vista:hover { color: var(--ink); }
.cat__vista.es-activa { background: rgba(255, 56, 85, .12); color: var(--brand); font-weight: 600; }
.cat__vista-n { color: inherit; opacity: .7; font-size: .78rem; }

.tabs--compactas { margin-bottom: 18px; }

/* ── Barra de búsqueda y filtros ── */
.cat__barra {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.cat__buscar {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 260px;
  padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
}
.cat__buscar .ico { color: var(--muted); flex: 0 0 auto; }
.cat__buscar input {
  flex: 1; min-width: 0; padding: 11px 0; border: 0; background: transparent;
  color: var(--ink); font: inherit; font-size: .9rem; outline: none;
}
.cat__buscar:focus-within { border-color: var(--brand); }
.cat__buscar-x { display: grid; place-items: center; padding: 4px; color: var(--muted); }
.cat__buscar-x:hover { color: var(--ink); }
.cat__barra-btns { display: flex; align-items: center; gap: 8px; }
.cat__total { color: var(--muted); font-size: .84rem; white-space: nowrap; }

/* ── Tabla ── */
/* Once columnas no caben en 1024 px por mucho que se aprieten: el envoltorio
   scrollea en horizontal y la tabla declara un ancho mínimo, en vez de
   estrangular la columna del título hasta partir cada palabra en una línea
   —que es lo que hacía sin esto—. */
.cat__lista .table-wrap { overflow-x: auto; }
.cat__lista .table { --fila: 68px; min-width: 1180px; }
/* NADA de `table-layout: fixed`: repartía el ancho a partes iguales y dejaba
   «PREP…», «INSTANCI…» y los botones de acciones cortados. Con el reparto
   automático manda el contenido, y lo que no debe partirse se declara. */
.cat__lista .table th, .cat__lista .table td { white-space: nowrap; }
/* El título sí puede ocupar dos líneas: es lo único largo de verdad. */
.cat__lista .table td:nth-child(2) { white-space: normal; }
.cat__lista .table th:nth-child(1), .cat__lista .table td:nth-child(1) { width: 44px; }
.cat__lista .table th:nth-child(2), .cat__lista .table td:nth-child(2) { min-width: 280px; }
.cat__guia-txt strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* El correo del autor se recorta con puntos suspensivos, no con la columna. */
.cat__autor { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.cat__lista .table tbody tr { height: var(--fila); }
.cat__lista .table tbody tr:hover { background: var(--surface-2); }
.cat__lista .table th { position: sticky; top: 0; z-index: 2; background: var(--surface); }

.cat__guia { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cat__portada {
  flex: 0 0 44px; width: 44px; height: 58px; overflow: hidden;
  border-radius: 6px; background: var(--surface-2); display: grid; place-items: center;
}
.cat__portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat__portada-vacia { color: var(--muted); }
.cat__guia-txt { min-width: 0; }
.cat__guia-txt strong { display: block; font-size: .92rem; line-height: 1.3; }
.cat__guia-txt small { display: block; margin-top: 3px; color: var(--muted); font-size: .78rem; }
.cat__aviso { display: inline-flex; align-items: center; gap: 3px; color: var(--warn); font-size: .78rem; }

.pill {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 600; border: 1px solid var(--line); color: var(--muted);
}
.pill--maestra { border-color: rgba(99, 165, 255, .4); color: var(--info); }
.pill--copia { border-color: rgba(255, 159, 50, .4); color: var(--warn); }
.pill--gratis { border-color: rgba(49, 201, 107, .4); color: var(--ok); }

.cat__autor { font-size: .84rem; }

.cat__prep { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 2px 8px; }
.cat__prep-bloqueos { grid-column: 1 / -1; }
.cat__prep-barra { width: 74px; height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.cat__prep-barra > i { display: block; height: 100%; width: calc(var(--pct, 0) * 1%); background: var(--brand); border-radius: 999px; }
.cat__prep-n { font-size: .8rem; color: var(--muted); }
.cat__prep-bloqueos { color: var(--warn); font-size: .74rem; }

.cat__orden {
  display: inline-flex; align-items: center; gap: 4px; padding: 0;
  border: 0; background: transparent; color: inherit; font: inherit;
  text-transform: inherit; letter-spacing: inherit;
}
.cat__orden:hover { color: var(--ink); }
.cat__orden.es-activa { color: var(--brand); }
.cat__orden .ico { width: 14px; height: 14px; }

.cat__acciones { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.cat__mas { padding: 6px 8px; }
.cat__menu {
  position: absolute; right: 0; z-index: 30; min-width: 210px; padding: 6px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  box-shadow: 0 20px 44px -22px rgba(0, 0, 0, .8);
  display: flex; flex-direction: column;
}
.cat__menu button { padding: 9px 11px; border-radius: 8px; text-align: left; font-size: .86rem; color: var(--ink); }
.cat__menu button:hover { background: var(--surface-2); }
.cat__menu .es-destructiva { color: var(--danger); }

/* ── Pie: paginación ── */
.cat__pie {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 4px 0; margin-top: 4px;
}
.cat__pie-rango { color: var(--muted); font-size: .84rem; }
.cat__pie-tam { margin-left: auto; }
.cat__paginas { display: flex; align-items: center; gap: 6px; }
.cat__pag {
  min-width: 34px; height: 34px; padding: 0 9px; border-radius: 8px;
  border: 1px solid transparent; background: transparent; color: var(--muted); font-size: .85rem;
}
.cat__pag:hover { background: var(--surface-2); color: var(--ink); }
.cat__pag.es-activa { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.cat__salto { color: var(--muted); padding: 0 2px; }

/* ── Barra flotante de selección ── */
.cat__masiva {
  position: sticky; bottom: 16px; z-index: 20;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  width: fit-content; max-width: 100%; margin: 16px auto 0; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .85);
}
.cat__masiva-n { font-size: .86rem; }
.cat__masiva .es-destructiva { color: var(--danger); }

/* ── Modal de creación ── */
.cat__crear { display: grid; gap: 12px; }
.cat__crear-op {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; align-items: center;
  padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
  cursor: pointer;
}
.cat__crear-op:hover { border-color: var(--line); }
.cat__crear-op:focus-within { border-color: var(--brand); }
.cat__crear-op input { grid-row: 1 / 3; grid-column: 1; justify-self: center; }
.cat__crear-ico { display: none; }
.cat__crear-op strong { grid-column: 2; font-size: .95rem; }
.cat__crear-txt { grid-column: 2; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.codigo-grande { text-align: center; margin: 12px 0; }
.codigo-grande code { font-size: 1.3rem; letter-spacing: .12em; }
.cols-lista { display: grid; gap: 4px; }
.cols-op { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; cursor: pointer; }
.cols-op:hover { background: var(--surface-2); }
.cols-op--reset { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 12px; }

/* ── Tablet ── */
@media (max-width: 1100px) {
  .cat__resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Móvil: la tabla pasa a tarjetas ── */
@media (max-width: 760px) {
  .cat__resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cat__tarjeta { padding: 12px; gap: 10px; }
  .cat__tarjeta-ico { width: 34px; height: 34px; flex-basis: 34px; }
  .cat__tarjeta-txt strong { font-size: 1.25rem; }
  .cat__tarjeta-pie { display: none; }

  .cat__vistas { width: 100%; overflow-x: auto; }
  .cat__barra { padding: 10px; }
  .cat__buscar { min-width: 100%; }
  .cat__barra-btns { width: 100%; }
  .cat__total { margin-left: auto; }

  /* Cada fila se convierte en una tarjeta: una tabla de once columnas en 390
     px o desborda o se lee con lupa. */
  /* El `min-width` de escritorio tiene que morir aquí: si no, cada «tarjeta»
     mide 1180 px y el título se corta contra el borde de la pantalla. */
  .cat__lista .table { min-width: 0; }
  .cat__lista .table-wrap { overflow-x: visible; }
  .cat__lista .table th, .cat__lista .table td { white-space: normal; }
  .cat__lista .table, .cat__lista .table tbody, .cat__lista .table tr, .cat__lista .table td { display: block; width: 100%; }
  .cat__lista .table thead { display: none; }
  .cat__lista .table tbody tr {
    height: auto; margin-bottom: 10px; padding: 12px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  }
  .cat__lista .table td { padding: 4px 0; border: 0; }
  .cat__lista .table td::before {
    content: attr(data-label); display: inline-block; min-width: 96px;
    color: var(--muted); font-size: .76rem;
  }
  .cat__lista .table td:first-child, .cat__lista .table td[data-label="Guía"] { }
  .cat__lista .table td[data-label="Guía"]::before, .cat__lista .table td[data-label=""]::before { content: none; }
  .cat__acciones { justify-content: flex-start; }
  .cat__acciones .btn { min-height: 44px; }
  .cat__pie { flex-direction: column; align-items: stretch; }
  .cat__pie-tam { margin-left: 0; }
  .cat__paginas { justify-content: center; flex-wrap: wrap; }
  .cat__pag { min-width: 44px; height: 44px; }
}


/* ── Correcciones de desbordamiento del catálogo ──
   Encontradas midiendo qué elemento se salía en cada ancho, no a ojo. */

/* `hidden` tiene que ganar a cualquier `display` de una clase. Sin esto, la
   insignia del contador de filtros se pintaba con `hidden` puesto y empujaba
   la barra fuera de la pantalla. */
[hidden] { display: none !important; }

/* Las pestañas de estado se desplazan en horizontal en vez de empujar la
   página: en 1024 px son seis y no caben. */
.tabs--compactas {
  display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  gap: 4px; padding-bottom: 2px;
}
.tabs--compactas::-webkit-scrollbar { display: none; }
.tabs--compactas .tab { white-space: nowrap; flex: 0 0 auto; }

/* El scroll de la tabla vive DENTRO de su envoltorio: sin `min-width: 0` un
   hijo de grid/flex se niega a encogerse y arrastra a la página entera. */
.cat__lista { min-width: 0; }
.cat__lista .table-wrap { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.cat__vistas { max-width: 100%; }


/* La columna de acciones se queda pegada a la derecha mientras la tabla se
   desplaza: con once columnas, «Abrir» se iba fuera de la pantalla y había
   que descubrir que la tabla scrolleaba para encontrarlo. */
.cat__lista .table th:last-child, .cat__lista .table td:last-child {
  position: sticky; right: 0; z-index: 1;
  background: var(--surface);
  box-shadow: -12px 0 12px -12px rgba(0, 0, 0, .6);
}
.cat__lista .table th:last-child { background: var(--surface-2); z-index: 3; }
.cat__lista .table tbody tr:hover td:last-child { background: var(--surface-2); }
@media (max-width: 760px) {
  /* En móvil la tabla ya son tarjetas: pegar la última celda no tiene sentido. */
  .cat__lista .table td:last-child { position: static; box-shadow: none; background: none; }
}

/* ── Bandeja de entregas (views/pedidos.js, feature/entrega-manual) ── */
.pedido { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 14px; background: var(--surface); }
.pedido--entregado { opacity: .55; }
.pedido__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.pedido__cab h2 { margin: 0 0 4px; font-size: 1.05rem; }
.pedido__meta { margin: 0; font-size: .82rem; color: var(--muted); }
.pedido__chip { flex: none; font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: 5px 10px; border-radius: 99px; background: var(--field); color: var(--muted); }
.pedido__chip--ok { background: var(--brand-suave); color: var(--ink); }
.pedido__viaje { margin: 12px 0 0; padding: 0 0 0 2px; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: .88rem; }
.pedido__viaje strong { font-weight: 700; margin-right: 6px; }
.pedido__sin { margin: 12px 0 0; font-size: .85rem; color: var(--muted); font-style: italic; }
.pedido__acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pedido__estado { font-size: .82rem; color: var(--muted); }
.vacio-ok { padding: 40px 20px; text-align: center; color: var(--muted); }
.pedido__contexto { margin-top: 14px; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--field); font-size: .86rem; }
.pedido__contexto h3 { margin: 10px 0 6px; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pedido__contexto h3:first-child { margin-top: 0; }
.pedido__contexto ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.pedido__contexto strong { font-weight: 700; margin-right: 6px; }

/* ── Biblioteca de bloques canónicos (fase 2 · plataforma de conocimiento) ── */
/* La opción fija de la paleta va destacada: buscar antes de redactar. */
.paleta__op--biblio { border-bottom: 1px solid var(--line); }
.paleta__op--biblio strong { color: var(--brand); }
/* La insignia del bloque ya guardado: informa, no es botón. */
.bloque__biblio { font-size: 14px; opacity: .7; cursor: default; padding: 0 4px; }

/* ── Cobertura de conocimiento en la ficha de solicitud (fase 4) ── */
.cob { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.cob__fila { display: flex; align-items: center; gap: 8px; }
.cob__area { flex: 0 0 96px; font-size: 12.5px; color: var(--muted); text-transform: capitalize; }
.cob__barra { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.cob__lleno { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.cob__pct { flex: 0 0 38px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; }

/* ══════════ Editor de la tarjeta del catálogo ══════════
   Los destacados se editan como lo que son: filas de etiqueta + cifra, con
   su orden. Nada de una caja de texto libre — el orden y la cifra tienen que
   poder validarse por separado. */
.dest { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.dest__fila { display: grid; grid-template-columns: 1fr 92px auto; gap: 8px; align-items: center; }
.dest__fila input { width: 100%; }
.dest__count { text-align: right; }
.dest__acc { display: flex; gap: 4px; }
.dest__pie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chips-edit { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.chip-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.card__sub { margin: 20px 0 4px; font-size: 15px; }
@media (max-width: 620px) {
  .dest__fila { grid-template-columns: 1fr 76px; grid-template-areas: "l c" "a a"; }
  .dest__acc { grid-area: a; justify-content: flex-end; }
}