/* =========================================================================================
   GenAI · Panel de revisión · Sistema visual «Galerada»
   Los colores, el espacio y la tipografía son tokens (custom properties de :root): ningún
   componente lleva un color propio. Contraste AA comprobado en tests/test_panel_a11y.py.
   Sin recursos externos: la CSP del panel solo permite 'self'.
   ========================================================================================= */

/* --- Fuentes -------------------------------------------------------------------------------
   Plex Sans, Plex Mono y Fraunces se usan si están instaladas en el equipo (local()). Los
   ficheros woff2 (licencia OFL) se servirían desde /static/fonts con la misma regla @font-face
   y un url(); hasta entonces la pila de reserva (system-ui, Georgia, ui-monospace) los cubre. */
@font-face { font-family: "IBM Plex Sans"; src: local("IBM Plex Sans"), local("IBMPlexSans-Regular"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: local("IBM Plex Sans Medium"), local("IBMPlexSans-Medium"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: local("IBM Plex Sans SemiBold"), local("IBMPlexSans-SemiBold"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: local("IBM Plex Mono"), local("IBMPlexMono-Regular"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: local("IBM Plex Mono Medium"), local("IBMPlexMono-Medium"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Fraunces"; src: local("Fraunces SemiBold"), local("Fraunces-SemiBold"), local("Fraunces 9pt SemiBold"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fraunces"; src: local("Fraunces Bold"), local("Fraunces-Bold"), local("Fraunces 9pt Bold"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light dark;
  /* color: roles */
  --color-bg: #F4EFE6;
  --color-surface: #FBF8F2;
  --color-surface-rest: #EAE3D6;
  --color-text: #23211F;
  --color-text-muted: #5C554B;
  --color-border: #23211F;
  --color-border-subtle: #CFC6B5;
  --color-border-control: #7D7468;
  --color-focus: #C8281E;
  --color-action-primary: #C8281E;
  --color-on-action-primary: #FFFFFF;
  --color-action-secondary: #23211F;
  --color-danger: #A3201A;
  --color-on-danger: #FFFFFF;
  --color-accent: #C8281E;
  --color-mark: rgba(200, 40, 30, .26);

  /* tipografía */
  --font-display: Fraunces, "Iowan Old Style", Georgia, serif;
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* espacio (base 4 px) */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem;

  /* tamaños */
  --target: 2.75rem;
  --thumb: 3.5rem;
  --margin-col: 11rem;
  --notes-col: 15rem;
  --sheet-max: 80rem;
  --day-col: 6rem;
  --measure-prose: 62ch;
  --measure-form: 34rem;
  --radius-control: 2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1A1917; --color-surface: #23211F; --color-surface-rest: #2E2B27;
    --color-text: #EDE6DA; --color-text-muted: #B3AA9C; --color-border: #EDE6DA;
    --color-border-subtle: #3D3934; --color-border-control: #948B7E;
    --color-focus: #FF6A5C; --color-action-primary: #FF6A5C; --color-on-action-primary: #1A1917;
    --color-action-secondary: #EDE6DA; --color-danger: #FF8A7E; --color-on-danger: #1A1917;
    --color-accent: #FF6A5C; --color-mark: rgba(255, 106, 92, .30);
  }
}
/* --- Base --------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 1rem/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
img, svg { display: block; max-width: 100%; }
pre, code { overflow-wrap: anywhere; }
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: var(--color-border-control);
}
a:hover { text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
main:focus { outline: none; }
code, time, .mono { font-family: var(--font-mono); }
::selection { background: var(--color-mark); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-3); top: -5rem; z-index: 20;
  display: inline-flex; align-items: center; min-height: var(--target);
  padding: 0 var(--space-4);
  background: var(--color-text); color: var(--color-surface);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--space-3); }

/* --- Cabecera ----------------------------------------------------------------------------- */
.site-header {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 var(--space-6);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.site-header__brand {
  display: inline-flex; align-items: center; gap: .625rem;
  min-height: var(--target);
  font: 700 1.25rem/1 var(--font-display); letter-spacing: -.01em;
  color: var(--color-text); text-decoration: none;
}
.site-header__brand svg { width: 1.75rem; height: 1.75rem; flex: none; }
.logo { color: var(--color-text); }
.logo__call { stroke: var(--color-accent); }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); list-style: none; padding: 0; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: var(--target);
  text-decoration: none; font-size: .9375rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--color-border-control); }
.site-nav a[aria-current="page"] { font-weight: 600; border-bottom-color: var(--color-accent); }
.site-header__session { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.site-header__user { font: 400 .8125rem/1 var(--font-mono); color: var(--color-text-muted); }

/* --- La hoja y la página (arquetipo editorial) -------------------------------------------- */
.sheet { display: block; background: var(--color-surface); }
.page { display: grid; grid-template-columns: minmax(0, 1fr); }
.page__body { min-width: 0; padding: var(--space-5) var(--space-4) var(--space-7); }
.page__margin {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  font: 400 .8125rem/1.5 var(--font-mono); color: var(--color-text-muted);
}
.page__notes {
  padding: var(--space-5) var(--space-4) var(--space-7);
  border-top: 1px solid var(--color-border-subtle);
  font-size: .875rem;
}
.page--plain .page__body { max-width: 52rem; }

@media (min-width: 48rem) {
  .sheet {
    width: calc(100% - var(--space-6) * 2);
    max-width: var(--sheet-max);
    margin: var(--space-6) auto var(--space-8);
    border: 1px solid var(--color-border);
    box-shadow: 8px 8px 0 var(--color-surface-rest);
  }
  .sheet--narrow { max-width: 40rem; }
  .page__body { padding: var(--space-6) var(--space-6) var(--space-8); }
  .page__margin { padding: var(--space-3) var(--space-7); }
  .page__notes { padding: var(--space-5) var(--space-7) var(--space-7); }
}
@media (min-width: 64rem) {
  .page:has(.page__margin) { grid-template-columns: var(--margin-col) minmax(0, 1fr); }
  .page__margin {
    grid-row: 1 / span 2; display: block;
    padding: var(--space-7) var(--space-4);
    border-bottom: 0; border-right: 1px solid var(--color-border-subtle);
  }
  .page__body { padding: var(--space-7) var(--space-7) var(--space-8); }
  .page__notes { grid-column: -2; }
  .page:has(.page__notes):not(:has(.page__margin)) { grid-template-columns: minmax(0, 1fr) var(--notes-col); }
  .page:has(.page__notes):not(:has(.page__margin)) .page__notes {
    grid-column: 2; padding: var(--space-7) var(--space-5);
    border-top: 0; border-left: 1px solid var(--color-border-subtle);
  }
}
/* .page--wide (calendario): las notas se quedan debajo para dar el ancho a las plataformas. */
@media (min-width: 80rem) {
  .page:not(.page--wide):has(.page__margin):has(.page__notes) { grid-template-columns: var(--margin-col) minmax(0, 1fr) var(--notes-col); }
  .page:not(.page--wide) .page__margin { grid-row: auto; }
  .page:not(.page--wide) .page__notes {
    grid-column: auto;
    padding: var(--space-7) var(--space-5);
    border-top: 0; border-left: 1px solid var(--color-border-subtle);
  }
}

/* Contenido del margen: datos cortos en mono, como las anotaciones de una galerada. */
.margin-facts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
.margin-facts div { display: flex; gap: .375rem; }
.margin-facts dt::after { content: ":"; }
.margin-facts dd { margin: 0; color: var(--color-text); }
.margin-facts .is-pending { color: var(--color-accent); }
@media (min-width: 64rem) {
  .margin-facts { display: block; }
  .margin-facts div { display: block; margin-bottom: var(--space-4); }
  .margin-facts dt::after { content: none; }
  .margin-facts dt { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
}

/* --- Tipografía -------------------------------------------------------------------------- */
.kicker {
  margin: 0 0 var(--space-3);
  font: 500 .8125rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-accent);
}
.title {
  margin: 0 0 var(--space-3);
  max-width: 22ch;
  font: 700 2.125rem/1.05 var(--font-display); letter-spacing: -.02em;
  text-wrap: balance;
}
@media (min-width: 48rem) { .title { font-size: 3rem; } }
.lede { max-width: var(--measure-prose); color: var(--color-text-muted); }
.mark { background: linear-gradient(transparent 60%, var(--color-mark) 60%); }
.prose { max-width: var(--measure-prose); }
.prose p + p { margin-top: var(--space-3); }
.muted { color: var(--color-text-muted); }
.data { font: 400 .8125rem/1.4 var(--font-mono); }

.page-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4);
}
.section { margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.section__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4);
}
.section__title { font: 600 1.25rem/1.3 var(--font-ui); }
.section__title--display { font: 600 1.625rem/1.1 var(--font-display); letter-spacing: -.015em; }
@media (min-width: 48rem) { .section__title--display { font-size: 2rem; } }

/* --- Migas y pestañas -------------------------------------------------------------------- */
.breadcrumbs ol {
  display: flex; flex-wrap: wrap; align-items: center;
  list-style: none; padding: 0; margin: calc(var(--space-3) * -1) 0 var(--space-3);
  font: 400 .8125rem/1.3 var(--font-mono); color: var(--color-text-muted);
}
.breadcrumbs li + li::before { content: "/"; content: "/" / ""; margin: 0 .625rem; color: var(--color-text-muted); }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: var(--target); color: var(--color-text); }
.breadcrumbs [aria-current="page"] { color: var(--color-text-muted); }

.tabs { margin: var(--space-5) 0 var(--space-6); border-bottom: 1px solid var(--color-border); }
.tabs ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); list-style: none; padding: 0; }
.tabs a {
  display: inline-flex; align-items: center; gap: .375rem; min-height: var(--target);
  margin-bottom: -1px;
  color: var(--color-text-muted); text-decoration: none; font-weight: 500;
  border-bottom: 2px solid transparent;
}
.tabs a:hover { color: var(--color-text); border-bottom-color: var(--color-border-control); }
.tabs a[aria-current="page"] { color: var(--color-text); font-weight: 600; border-bottom-color: var(--color-accent); }
.tabs__count { font: 400 .8125rem/1 var(--font-mono); }
.tabs__count.is-pending { color: var(--color-accent); }

/* --- Botones ----------------------------------------------------------------------------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--target); min-width: var(--target);
  padding: 0 var(--space-5);
  font: 600 1rem/1.2 var(--font-ui);
  color: var(--color-text); background: transparent;
  border: 1px solid transparent; border-radius: 0;
  text-decoration: none; cursor: pointer;
  transition: background-color 120ms, color 120ms, border-color 120ms;
}
.btn--primary { background: var(--color-action-primary); border-color: var(--color-action-primary); color: var(--color-on-action-primary); }
.btn--primary:hover { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-on-danger); }
.btn--secondary { border-color: var(--color-action-secondary); color: var(--color-action-secondary); }
.btn--secondary:hover { background: var(--color-surface-rest); }
.btn--danger { border-color: var(--color-danger); color: var(--color-danger); }
.btn--danger:hover { background: var(--color-danger); color: var(--color-on-danger); }
.btn--quiet { padding: 0 var(--space-2); text-decoration: underline; text-underline-offset: .2em; font-weight: 500; }
.btn--small { padding: 0 var(--space-4); font-size: .9375rem; }
.btn:disabled, .btn[aria-disabled="true"] {
  cursor: not-allowed; background: transparent;
  color: var(--color-text-muted); border: 1px dashed var(--color-border-control);
}
.btn__busy { display: none; }
.htmx-request .btn__label, .btn.htmx-request .btn__label, .btn.is-busy .btn__label { display: none; }
.htmx-request .btn__busy, .btn.htmx-request .btn__busy, .btn.is-busy .btn__busy { display: inline; }
.btn.is-busy, .btn.htmx-request { cursor: progress; }

/* --- Campos ------------------------------------------------------------------------------ */
.form { max-width: var(--measure-form); }
.field { margin: 0 0 var(--space-5); max-width: var(--measure-form); }
.field label, .field legend { display: block; margin-bottom: var(--space-1); font-weight: 600; }
.field__req { font: 400 .8125rem/1 var(--font-mono); color: var(--color-text-muted); }
.field__hint { margin: 0 0 var(--space-2); font-size: .875rem; color: var(--color-text-muted); }
.field input:not([type="checkbox"]):not([type="radio"]), .field textarea, .field select {
  display: block; width: 100%; min-height: var(--target);
  padding: .5625rem .75rem;
  font: inherit; color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border-control); border-radius: var(--radius-control);
}
.field input[type="file"] { padding: .5rem; font-size: .9375rem; }
.field textarea { min-height: 9rem; line-height: 1.6; resize: vertical; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--color-text); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline-offset: 1px; border-color: var(--color-text); }
.field__count { margin-top: var(--space-1); font: 400 .8125rem/1.3 var(--font-mono); color: var(--color-text-muted); text-align: right; }
.field__count.is-over { color: var(--color-danger); font-weight: 500; }
/* Error: la marca del corrector en el margen del campo. */
.field--error {
  margin-left: calc((var(--space-3) + 3px) * -1);
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-danger);
}
.field--error input:not([type="checkbox"]):not([type="radio"]), .field--error textarea, .field--error select { border: 2px solid var(--color-danger); }
.field__error { margin: var(--space-2) 0 0; font-weight: 600; font-size: .9375rem; color: var(--color-danger); }
.field__error::before { content: "✕ "; content: "✕ " / ""; }

fieldset.field { border: 0; padding: 0; min-width: 0; }
fieldset.field--error { padding-left: var(--space-3); }
.choices { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.choice, .choices label { display: inline-flex; align-items: center; gap: .625rem; min-height: var(--target); font-weight: 400 !important; margin: 0 !important; cursor: pointer; }
.choice input, .choices input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--color-text); }
.field-row { display: grid; gap: 0 var(--space-5); }
@media (min-width: 48rem) { .field-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Insignias de estado (texto + glifo + color; nunca solo color) ------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .0625rem .4375rem;
  font: 500 .8125rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text); background: var(--color-surface);
  border: 1px solid currentColor;
}
.badge::before { font-size: .875rem; line-height: 1; }
.badge--borrador { color: var(--color-accent); }
.badge--borrador::before { content: "✎"; content: "✎" / ""; }
.badge--aprobado::before, .badge--aprobada::before, .badge--ok::before, .badge--lista::before { content: "✓"; content: "✓" / ""; }
.badge--programado { background: var(--color-surface-rest); }
.badge--programado::before { content: "◷"; content: "◷" / ""; }
.badge--publicado { color: var(--color-text-muted); border-style: dotted; }
.badge--publicado::before { content: "●"; content: "●" / ""; }
.badge--fallido { color: var(--color-on-danger); background: var(--color-danger); border-color: var(--color-danger); }
.badge--fallido::before { content: "✕"; content: "✕" / ""; }
.badge--en-cola { color: var(--color-text-muted); border-style: dashed; }
.badge--en-cola::before { content: "○"; content: "○" / ""; }
.badge--ejecutando, .badge--generando { background: var(--color-surface-rest); }
.badge--ejecutando::before, .badge--generando::before { content: "◐"; content: "◐" / ""; }
.badge--cancelado { color: var(--color-text-muted); border-style: dotted; }
.badge--cancelado::before { content: "⊘"; content: "⊘" / ""; }
.badge--archivada { color: var(--color-text-muted); border-style: dotted; }
.badge--archivada::before { content: "◌"; content: "◌" / ""; }

/* --- Avisos (flash) y resumen de errores: nota al margen, sin cajas de color --------------- */
.flash, .error-summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3);
  max-width: var(--measure-prose);
  margin: 0 0 var(--space-5);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: 3px solid var(--color-text);
}
.flash::before {
  flex: none;
  font: 500 .8125rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
}
.flash--success::before { content: "✓ Hecho"; }
.flash--info::before { content: "Nota"; color: var(--color-text-muted); }
.flash--info { border-left-color: var(--color-border-control); }
.flash--warning::before { content: "Atención"; color: var(--color-danger); }
.flash--error::before { content: "✕ Error"; color: var(--color-danger); }
.flash--warning, .flash--error, .error-summary { border-left-color: var(--color-danger); }
.error-summary { display: block; }
.error-summary h2 { font: 600 1rem/1.4 var(--font-ui); color: var(--color-danger); margin-bottom: var(--space-2); }
.error-summary ul { padding-left: 1.1rem; }
.error-summary a { color: var(--color-text); }

/* --- Trabajos (estado, mensaje y Reintentar) ---------------------------------------------- */
.job-status {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) 0 calc(var(--space-3) + 3px);
  font-size: .9375rem;
}
.job-status + .job-status { border-top: 1px dotted var(--color-border-subtle); }
.job-status__type { font-weight: 600; }
.job-status__attempts, .job-status__time { font: 400 .8125rem/1.3 var(--font-mono); color: var(--color-text-muted); }
.job-status__error { flex-basis: 100%; margin: 0; color: var(--color-danger); font-size: .9375rem; }
.job-status__error::before { content: "✕ "; content: "✕ " / ""; }
.job-status__message { flex: 1 1 100%; margin: 0; font-size: .9375rem; }
.job-status__message .data { font: 400 .875rem/1.5 var(--font-mono); }
.job-status__message--error { color: var(--color-danger); }
.job-status__help { flex: 1 1 100%; margin: 0; color: var(--color-text-muted); font-size: .875rem; }
.job-status__action { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.job-status__action .btn { display: inline-flex; align-items: center; gap: var(--space-2); }
.job-status__sending { display: none; font: 400 .8125rem/1.3 var(--font-mono); color: var(--color-text-muted); }
.htmx-request > .job-status__sending, .htmx-request .job-status__sending { display: inline; }
.job-retry__notice { margin: 0 0 var(--space-2); }
@media (min-width: 48rem) {
  .job-status__message, .job-status__help { flex: 1 1 24rem; }
  .job-status__action { margin-left: auto; }
}
.job-status--en-cola::after, .job-status--ejecutando::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
}
.job-status--en-cola::after {
  background: repeating-linear-gradient(90deg, var(--color-text-muted) 0 6px, transparent 6px 11px);
}
.job-status--ejecutando::after {
  background:
    linear-gradient(var(--color-text), var(--color-text)) no-repeat,
    var(--color-border-subtle);
  background-size: 28% 100%, 100% 100%;
  animation: job-run 1.4s linear infinite;
}
@keyframes job-run { from { background-position: -40% 0, 0 0; } to { background-position: 140% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .job-status--ejecutando::after {
    animation: none;
    background: repeating-linear-gradient(90deg, var(--color-text) 0 14px, transparent 14px 18px);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
}

/* --- Índice de marcas (sumario de revista) ------------------------------------------------ */
.index { list-style: none; padding: 0; border-top: 1px solid var(--color-border); }
.index__item {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-4) 0 var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
}
.index__name { font: 600 1.625rem/1.15 var(--font-display); letter-spacing: -.01em; }
.index__name a { text-decoration: none; }
.index__name a::after { content: ""; position: absolute; inset: 0; }
.index__name a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.index__name a:focus-visible { outline: none; }
.index__name a:focus-visible::after { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.index__leader { display: none; }
.index__count { font: 500 .8125rem/1.3 var(--font-mono); white-space: nowrap; color: var(--color-text-muted); }
.index__count.is-pending { color: var(--color-accent); }
.index__meta { grid-column: 1 / -1; font-size: .875rem; color: var(--color-text-muted); }
.index__meta .badge { vertical-align: 1px; }
@media (min-width: 48rem) {
  .index__item { grid-template-columns: auto minmax(2rem, 1fr) auto; }
  .index__name { font-size: 2rem; }
  .index__leader {
    display: block; align-self: end; height: .9em; margin-bottom: .35em;
    background-image: radial-gradient(circle, var(--color-border-control) 1px, transparent 1.4px);
    background-size: 7px 4px; background-repeat: repeat-x; background-position: left bottom;
  }
}

/* --- Libro de campañas (tabla con filetes; en móvil, fichas por filas) -------------------- */
.ledger { width: 100%; border-collapse: collapse; }
.ledger th {
  padding: var(--space-2) var(--space-4) var(--space-2) 0; text-align: left;
  font: 500 .8125rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted); border-bottom: 2px solid var(--color-border);
}
.ledger td { padding: var(--space-4) var(--space-4) var(--space-4) 0; vertical-align: top; border-bottom: 1px solid var(--color-border-subtle); }
.ledger__name { font: 600 1.25rem/1.3 var(--font-ui); }
.ledger__name a { text-decoration: none; }
.ledger__name a:hover { text-decoration: underline; }
.ledger__sub { display: block; font-size: .875rem; color: var(--color-text-muted); }
@media (max-width: 47.99rem) {
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ledger, .ledger tbody, .ledger tr, .ledger td { display: block; }
  .ledger tr { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border-subtle); }
  .ledger td { padding: var(--space-1) 0; border: 0; }
  .ledger td[data-label]::before {
    content: attr(data-label); display: block;
    font: 500 .75rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
    color: var(--color-text-muted);
  }
}

/* Tira de contactos: un fotograma por post. Decorativa (aria-hidden): al lado va el texto. */
.strip { display: flex; flex-wrap: wrap; gap: 3px; list-style: none; padding: 0; margin-bottom: var(--space-1); }
.strip li { width: .625rem; height: .875rem; border: 1px solid var(--color-text); }
.strip .is-aprobado { background: var(--color-text); }
.strip .is-borrador { border-color: var(--color-accent); border-width: 2px; }
.strip .is-programado { background: repeating-linear-gradient(135deg, var(--color-text) 0 1.5px, transparent 1.5px 4px); }
.strip .is-publicado { background: var(--color-text-muted); border-color: var(--color-text-muted); }
.strip .is-fallido { background: var(--color-danger); border-color: var(--color-danger); }
.strip .is-pendiente { border-style: dashed; border-color: var(--color-border-control); }

/* --- Calendario por días × plataformas ---------------------------------------------------- */
.cal { --cal-cols: 3; }
.cal--p1 { --cal-cols: 1; } .cal--p2 { --cal-cols: 2; } .cal--p3 { --cal-cols: 3; } .cal--p4 { --cal-cols: 4; }
.cal__head { display: none; }
.cal__days { list-style: none; padding: 0; }
.cal__day { padding: var(--space-4) 0 var(--space-5); border-top: 1px solid var(--color-border); }
.cal__date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .625rem; margin-bottom: var(--space-1); font-weight: 400; }
.cal__num { font: 700 2rem/1 var(--font-display); letter-spacing: -.02em; }
.cal__weekday { font: 500 .8125rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.cal__pending { font: 500 .8125rem/1.3 var(--font-mono); color: var(--color-accent); }
.cal__done { font: 500 .8125rem/1.3 var(--font-mono); color: var(--color-text-muted); }
.cal__cells { list-style: none; padding: 0; }
.cal__cell { min-width: 0; }
.cal__platform {
  display: block; margin-top: var(--space-3);
  font: 500 .75rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.cal__cell--empty { display: none; }
.cal__none { font: 400 .8125rem/1.3 var(--font-mono); color: var(--color-text-muted); padding-top: var(--space-3); display: block; }

@media (min-width: 48rem) {
  .cal:not(.cal--p5plus) .cal__head {
    position: sticky; top: 0; z-index: 2;
    display: grid; grid-template-columns: var(--day-col) repeat(var(--cal-cols), minmax(0, 1fr));
    gap: var(--space-5);
    padding: var(--space-2) 0;
    background: var(--color-surface);
    border-bottom: 2px solid var(--color-border);
    font: 500 .8125rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  }
  .cal__head small { display: block; font-size: .75rem; color: var(--color-text-muted); letter-spacing: 0; text-transform: none; }
  .cal__day { display: grid; grid-template-columns: var(--day-col) minmax(0, 1fr); gap: var(--space-5); }
  .cal__head + .cal__days .cal__day:first-child { border-top: 0; }
  .cal__date { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .cal__cells { display: grid; grid-template-columns: repeat(var(--cal-cols), minmax(0, 1fr)); gap: 0 var(--space-5); }
  .cal:not(.cal--p5plus) .cal__platform {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .cal__cell { container-type: inline-size; }
  .cal__cell--empty { display: block; }
  .cal--p5plus .cal__cells { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
  .cal--p5plus .cal__cell--empty { display: none; }
}

/* --- Tarjeta de post: se abre (enlace a toda la tarjeta) ---------------------------------- */
.post-card {
  position: relative;
  display: grid; grid-template-columns: var(--thumb) minmax(0, 1fr);
  gap: var(--space-3); align-items: start;
  padding: var(--space-3) 0;
}
.post-card + .post-card { border-top: 1px dotted var(--color-border-subtle); }
.post-card__thumb {
  width: var(--thumb); aspect-ratio: 4 / 5; object-fit: cover;
  background: var(--color-surface-rest);
  outline: 1px solid var(--color-border-subtle); outline-offset: -1px;
}
.post-card__thumb--9x16 { aspect-ratio: 9 / 16; }
.post-card__thumb--16x9 { aspect-ratio: 16 / 9; }
.post-card__thumb--none { display: grid; place-items: center; font: 400 .6875rem/1.2 var(--font-mono); color: var(--color-text-muted); text-align: center; padding: .25rem; }
.post-card__title { font: 600 1rem/1.35 var(--font-ui); overflow-wrap: anywhere; }
.post-card__title a { text-decoration: none; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card__title a:hover { text-decoration: underline; }
.post-card__title a:focus-visible { outline: none; }
.post-card__title a:focus-visible::after { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.post-card__meta { margin-top: .125rem; font-size: .875rem; color: var(--color-text-muted); overflow-wrap: anywhere; }
.post-card__status { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.post-card__job { font: 400 .8125rem/1.3 var(--font-mono); color: var(--color-text-muted); }
/* La marca de corrección: lo que espera tu decisión lleva un trazo rojo en el margen. */
.post-card--borrador::before, .post-card--fallido::before {
  content: ""; position: absolute; left: calc(var(--space-2) * -1 - 3px); top: var(--space-3); bottom: var(--space-3);
  width: 3px; background: var(--color-accent);
}
.post-card--fallido::before { background: var(--color-danger); }
.post-card--skeleton .post-card__thumb { outline-style: dashed; outline-color: var(--color-border-control); }
@container (max-width: 12.5rem) {
  .post-card { grid-template-columns: minmax(0, 1fr); }
  .post-card__thumb { width: 3rem; }
}

/* --- Guía visual ------------------------------------------------------------------------- */
/* La barra de control de color de una imprenta: muestras unidas, código en mono. */
.swatches {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none; padding: 0;
  border: 1px solid var(--color-border);
}
.swatch { min-width: 0; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin: 0 -1px -1px 0; }
.swatch__chip { width: 100%; height: 5rem; border-bottom: 1px solid var(--color-border); }
.swatch__body { padding: var(--space-2) var(--space-3) var(--space-3); }
.swatch__index { font: 400 .75rem/1.3 var(--font-mono); color: var(--color-text-muted); }
.swatch__name { display: block; font-weight: 600; }
.swatch__hex { display: block; font: 500 .8125rem/1.3 var(--font-mono); }
.swatch__role { display: block; font-size: .875rem; color: var(--color-text-muted); }
@media (min-width: 48rem) { .swatches { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } .swatch__chip { height: 7rem; } }

.specimen { display: grid; gap: var(--space-4); }
.spec-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.spec-list div { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-subtle); }
.spec-list dt { font: 500 .8125rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-1); }
.spec-list dd { margin: 0; max-width: var(--measure-prose); }
@media (min-width: 48rem) {
  .spec-list div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-5); }
}
.avoid { list-style: none; padding: 0; }
.avoid li { padding: var(--space-1) 0 var(--space-1) 1.5rem; position: relative; }
.avoid li::before { content: "✕"; content: "✕" / ""; position: absolute; left: 0; color: var(--color-danger); }

.refs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); list-style: none; padding: 0; }
@media (min-width: 48rem) { .refs { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); } }
.ref__img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--color-surface-rest); outline: 1px solid var(--color-border-subtle); outline-offset: -1px; }
.ref figcaption { margin-top: var(--space-2); font-size: .875rem; }
.ref__kind { display: block; font: 500 .75rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }

.versions ol { list-style: none; padding: 0; }
.versions li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; padding: var(--space-1) 0; }
.versions a { display: inline-flex; align-items: center; min-height: var(--target); min-width: var(--target); font: 500 .9375rem/1 var(--font-mono); color: var(--color-text); }
.versions a[aria-current="page"] { font-weight: 700; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.versions .is-archived a { color: var(--color-text-muted); }

/* --- Detalle del post -------------------------------------------------------------------- */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.post-layout > * { min-width: 0; }
@media (min-width: 64rem) { .post-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.decision {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4);
  padding: var(--space-4) 0; border-top: 2px solid var(--color-border); border-bottom: 1px solid var(--color-border-subtle);
}
.decision__state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-right: auto; }
.decision__meta { font: 400 .8125rem/1.3 var(--font-mono); color: var(--color-text-muted); }
.decision + .job-status, .decision + .jobs { border-bottom: 1px solid var(--color-border-subtle); }
fieldset.editor { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.editor:disabled { opacity: 1; }
fieldset.editor:disabled input, fieldset.editor:disabled textarea {
  color: var(--color-text-muted); border-style: dashed; cursor: not-allowed; background: var(--color-surface);
}
.disclosure { border-top: 1px solid var(--color-border-subtle); }
.disclosure summary {
  display: flex; align-items: center; gap: .5rem; min-height: var(--target); cursor: pointer;
  font-weight: 600; list-style: none;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::before { content: "+"; content: "+" / ""; font: 500 1rem/1 var(--font-mono); width: 1rem; color: var(--color-accent); }
.disclosure[open] summary::before { content: "−"; content: "−" / ""; }
.disclosure pre {
  margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
  white-space: pre-wrap; overflow-wrap: anywhere;
  font: 400 .8125rem/1.6 var(--font-mono); background: var(--color-bg);
  border-left: 1px solid var(--color-border-control);
}

/* La prueba con marcas de corte; la regla roja marca el 6 % de altura del titular. */
.proof {
  --c: var(--color-text); --o: 1rem; --l: .75rem;
  position: relative; display: block; width: fit-content; max-width: 100%;
  padding: var(--o);
  background:
    linear-gradient(var(--c), var(--c)) 0 var(--o) / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) var(--o) 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% var(--o) / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - var(--o)) 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 calc(100% - var(--o)) / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) var(--o) 100% / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% calc(100% - var(--o)) / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - var(--o)) 100% / 1px var(--l) no-repeat;
}
.proof__img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; background: var(--color-surface-rest); }
.proof__limit {
  position: absolute; right: calc(var(--o) - .5rem); top: var(--o);
  width: .375rem; height: calc((100% - var(--o) * 2) * .06);
  border: 1px solid var(--color-accent); border-left: 0;
}
.proof__limit span {
  display: none;
  position: absolute; left: .625rem; top: 50%; transform: translateY(-50%);
  font: 500 .6875rem/1 var(--font-mono); color: var(--color-accent); white-space: nowrap;
}
@media (min-width: 48rem) { .proof__limit span { display: block; } }
.proof__empty { padding: var(--space-6) var(--space-4); font: 400 .875rem/1.4 var(--font-mono); color: var(--color-text-muted); text-align: center; outline: 1px dashed var(--color-border-control); outline-offset: -1px; }
.proof figcaption { margin-top: var(--space-2); font: 400 .8125rem/1.4 var(--font-mono); color: var(--color-text-muted); }

.checks { list-style: none; padding: 0; }
.checks li { padding: var(--space-2) 0 var(--space-2) 1.5rem; position: relative; border-bottom: 1px dotted var(--color-border-subtle); }
.checks li::before { content: "✓"; content: "✓" / ""; position: absolute; left: 0; }
.checks li.is-warn::before { content: "!"; content: "!" / ""; color: var(--color-accent); font-weight: 700; }
.checks li.is-warn { color: var(--color-text); }

.note { margin-bottom: var(--space-5); }
.note__label { display: block; margin-bottom: var(--space-1); font: 500 .75rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent); }
.note__label--ink { color: var(--color-text-muted); }

.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.facts div { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-subtle); }
.facts dt { font: 500 .75rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.facts dd { margin: 0; }
@media (min-width: 48rem) { .facts div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--space-4); } }

.source-list { list-style: none; padding: 0; border-top: 1px solid var(--color-border-subtle); }
.source-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); align-items: center;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-subtle);
}
.source-list__what { overflow-wrap: anywhere; }
.source-list__kind { display: block; font: 500 .75rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }

/* --- Estados de página -------------------------------------------------------------------- */
/* Vacío: el calderón ¶ del corrector («aquí empieza algo»). */
.empty { max-width: 46ch; padding: var(--space-6) 0 var(--space-7); }
.empty::before { content: "¶"; content: "¶" / ""; display: block; margin-bottom: var(--space-2); font: 700 3rem/1 var(--font-display); color: var(--color-accent); }
.empty__title { margin-bottom: var(--space-2); font: 600 1.625rem/1.15 var(--font-display); letter-spacing: -.01em; }
.empty p + p, .empty p + .actions { margin-top: var(--space-4); }

.skeleton { display: block; height: .875rem; margin: .375rem 0; background: var(--color-surface-rest); }
.skeleton--short { width: 45%; } .skeleton--mid { width: 70%; }

.error-page { padding: var(--space-6) 0 var(--space-7); max-width: 52ch; }
.error-page__code { font: 500 .8125rem/1.3 var(--font-mono); letter-spacing: .06em; color: var(--color-accent); }

/* --- Login ------------------------------------------------------------------------------- */
.login { position: relative; padding: var(--space-6) var(--space-4) var(--space-7); }
.login__mark { display: flex; align-items: flex-end; gap: 0; margin-bottom: var(--space-6); }
.login__mark svg { width: 4rem; height: 4rem; flex: none; }
.login__call { flex: 1; height: 0; margin: 0 0 3.125rem -.25rem; border-top: 2px solid var(--color-accent); min-width: 2rem; }
.login__note { margin: 0 0 2.6875rem var(--space-3); font: 500 .75rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent); white-space: nowrap; }
@media (min-width: 48rem) { .login { padding: var(--space-7) var(--space-8) var(--space-8); } }

/* --- Utilidades --------------------------------------------------------------------------- */
.is-pending { color: var(--color-accent); }
.legend, .plain { list-style: none; padding: 0; }
.legend li { padding: var(--space-1) 0; }
.plain a { display: inline-flex; align-items: center; min-height: var(--target); }
.page__margin .plain { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
@media (min-width: 64rem) { .page__margin .plain { display: block; } }
.note ol, .note ul:not(.checks):not(.legend) { padding-left: 1.1rem; }
.note p + p { margin-top: var(--space-2); }

/* --- Complementos para las pantallas del panel -------------------------------------------- */
.post-nav { margin: 0 0 var(--space-5); }
.post-nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); list-style: none; padding: 0; font-size: .9375rem; }
.post-nav a { display: inline-flex; align-items: center; min-height: var(--target); }
.post-detail__error { max-width: var(--measure-prose); margin: var(--space-3) 0 0; padding-left: var(--space-4); border-left: 3px solid var(--color-danger); color: var(--color-danger); font-size: .9375rem; }
.post-detail__error::before { content: "✕ "; content: "✕ " / ""; }
.jobs { min-width: 0; }
.jobs:empty { display: none; }
.filters { margin: 0 0 var(--space-5); }
.filters ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); list-style: none; padding: 0; font: 400 .8125rem/1.3 var(--font-mono); }
.filters a { display: inline-flex; align-items: center; min-height: var(--target); text-decoration: none; border-bottom: 2px solid transparent; }
.filters a:hover { border-bottom-color: var(--color-border-control); }
.filters a[aria-current] { font-weight: 500; border-bottom-color: var(--color-accent); }
.post-counts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); list-style: none; padding: 0; margin-bottom: var(--space-1); }
.post-counts li { display: inline-flex; align-items: center; gap: var(--space-2); }
.post-counts__number { font: 500 .8125rem/1 var(--font-mono); }
.post-card__error { font: 500 .8125rem/1.3 var(--font-mono); color: var(--color-danger); }
.job-status__time { font: 400 .8125rem/1.3 var(--font-mono); color: var(--color-text-muted); }
.hint { margin: 0 0 var(--space-4); max-width: var(--measure-prose); font-size: .875rem; color: var(--color-text-muted); }
.facts div { min-width: 0; }
.source-list .btn { flex: none; }
.ref figcaption .btn { margin-top: var(--space-1); }
.refs .ref { min-width: 0; }
.ledger caption { text-align: left; }
.ledger__name { overflow-wrap: anywhere; }
.page-head > * { min-width: 0; }
.field-row > * { min-width: 0; }
.field--error input[type="file"] { border-width: 2px; }
.login__form { margin-top: var(--space-6); }
.post-layout .section__title, .field-row .section__title { margin: 0 0 var(--space-3); }
legend { padding: 0; }
.sheet > .flashes { padding: var(--space-5) var(--space-4) 0; }
@media (min-width: 48rem) { .sheet > .flashes { padding: var(--space-6) var(--space-6) 0; } }
@media (min-width: 64rem) { .sheet > .flashes { padding: var(--space-7) var(--space-7) 0; } }
.sheet > .flashes + .page .page__body { padding-top: var(--space-4); }

/* --- Programar (barra .decision del post) ------------------------------------------------- */
/* El formulario ocupa su propia fila de la barra, bajo el estado y los botones: etiqueta,
   ayuda con la zona, [campo][Programar] y el error debajo del campo, en ese orden de lectura. */
.schedule { flex: 1 1 100%; min-width: 0; padding-top: var(--space-4); border-top: 1px dotted var(--color-border-subtle); }
.schedule .field { margin: 0; }
.schedule__control { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.schedule__control input { flex: 1 1 14rem; min-width: 0; max-width: 20rem; }
.field input[type="datetime-local"] { font-family: var(--font-mono); }
.field input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; }
.field input:not([type="checkbox"]):not([type="radio"]):disabled { cursor: not-allowed; border-style: dashed; color: var(--color-text-muted); background: var(--color-surface); }
.schedule__when { font: 500 1rem/1.4 var(--font-mono); overflow-wrap: anywhere; }
.schedule__zone { font: 400 .8125rem/1.4 var(--font-mono); color: var(--color-text-muted); }

/* Aviso de que aún no se publica solo: una nota al margen con su rótulo rojo, sin caja. */
.publish-notice {
  flex: 1 1 100%;
  max-width: var(--measure-prose);
  margin: 0 0 var(--space-5);
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  border-left: 3px solid var(--color-accent);
  font-size: .9375rem;
}
.decision .publish-notice { margin: 0; }
.publish-notice__label {
  display: block; margin-bottom: var(--space-1);
  font: 500 .8125rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-accent);
}

/* Fecha vencida: la marca del corrector. Va siempre con texto («Fecha vencida») y glifo. */
.badge--vencido { color: var(--color-accent); }
.badge--vencido::before { content: "!"; content: "!" / ""; font-weight: 700; }

/* --- Cola de programados (pestaña Programación) ------------------------------------------- */
/* ol de días (h3 con la fecha) > ul de posts. Sin tabla ni tarjetas: filetes y aire. */
.queue { list-style: none; padding: 0; }
.queue__day { padding: var(--space-4) 0 var(--space-5); border-top: 1px solid var(--color-border); }
.queue__date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .625rem; margin-bottom: var(--space-1); font-weight: 400; }
.queue__num { font: 700 2rem/1 var(--font-display); letter-spacing: -.02em; }
.queue__weekday { font: 500 .8125rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.queue__count { font: 400 .8125rem/1.3 var(--font-mono); color: var(--color-text-muted); }
.queue__overdue { font: 500 .8125rem/1.3 var(--font-mono); color: var(--color-accent); }
.queue__posts { list-style: none; padding: 0; min-width: 0; }
.queue__post {
  position: relative;
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--space-1) var(--space-3); align-items: baseline;
  padding: var(--space-3) 0;
}
.queue__post + .queue__post { border-top: 1px dotted var(--color-border-subtle); }
.queue__time { font: 500 1rem/1.35 var(--font-mono); }
.queue__body { min-width: 0; }
.queue__title { font: 600 1rem/1.35 var(--font-ui); overflow-wrap: anywhere; }
.queue__title a { text-decoration: none; }
.queue__title a::after { content: ""; position: absolute; inset: 0; }
.queue__title a:hover { text-decoration: underline; }
.queue__title a:focus-visible { outline: none; }
.queue__title a:focus-visible::after { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.queue__meta { margin-top: .125rem; font-size: .875rem; color: var(--color-text-muted); overflow-wrap: anywhere; }
.queue__platform { font: 500 .75rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.queue__status { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* Lo vencido lleva el trazo rojo en el margen, como un post por decidir en el calendario. */
.queue__post--vencido::before {
  content: ""; position: absolute; left: calc(var(--space-2) * -1 - 3px); top: var(--space-3); bottom: var(--space-3);
  width: 3px; background: var(--color-accent);
}
@media (min-width: 48rem) {
  .queue__day { display: grid; grid-template-columns: var(--day-col) minmax(0, 1fr); gap: var(--space-5); }
  .queue__date { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .queue__post { grid-template-columns: 4rem minmax(0, 1fr) auto; }
  .queue__status { grid-column: auto; justify-content: flex-end; }
}

/* Modo de contraste forzado: los bordes y el foco usan colores del sistema. */
@media (forced-colors: active) {
  .btn, .badge, .field input, .field textarea, .field select { border: 1px solid ButtonText; }
  .btn--primary { border-color: Highlight; }
  :focus-visible { outline-color: Highlight; }
  .post-card--borrador::before, .post-card--fallido::before, .queue__post--vencido::before { background: Highlight; }
  .publish-notice { border-left-color: Highlight; }
}

@media print {
  .site-header, .skip-link, .actions, .decision .btn { display: none; }
  .sheet { border: 0; box-shadow: none; }
}

/* Cuentas */
.accounts { list-style: none; padding: 0; }
.accounts__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5) 0; border-top: 1px solid var(--color-border); }
.accounts__item > *, .publication > * { min-width: 0; }
.accounts__title { font: 600 1.25rem/1.3 var(--font-ui); margin: 0 0 var(--space-2); }
.accounts__facts { margin: 0; }
.accounts__facts > div { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); }
.accounts__facts dt { font-weight: 600; }
.accounts__facts dd { margin: 0; overflow-wrap: anywhere; }
.accounts__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-3); }
.accounts__state { font: 500 .8125rem/1.5 var(--font-mono); letter-spacing: .02em; }
.accounts__state--sin-conectar, .accounts__state--caducada, .accounts__state--sin-permisos { color: var(--color-accent); }
.accounts__note { margin-top: var(--space-2); max-width: 62ch; }
.accounts__state--sin-configurar { color: var(--color-text); }
.accounts__page { margin-top: var(--space-2); }
.accounts__page span { font-family: var(--font-mono); font-size: .8125rem; }
.accounts__mode { border: 0; padding: 0; margin: var(--space-4) 0; }
.accounts__mode legend { font-weight: 600; margin-bottom: var(--space-2); }
.accounts__option { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target); }
.accounts__option input { width: 1.25rem; height: 1.25rem; accent-color: var(--color-text); flex: none; }
.accounts__confirmation { margin-top: var(--space-3); max-width: 62ch; }
.accounts__confirmation summary { cursor: pointer; min-height: var(--target); padding: var(--space-2) 0; text-decoration: underline; text-underline-offset: .2em; }
.accounts__confirmation[open] { border-top: 1px dotted var(--color-border); padding-top: var(--space-2); }
.accounts__feedback { padding: var(--space-4) 0; border-top: 1px solid var(--color-border); max-width: 62ch; }
.accounts__feedback--error { border-left: 3px solid var(--color-accent); padding-left: var(--space-4); }
.accounts__feedback strong { display: block; font-weight: 600; }
.accounts__action--attention { color: var(--color-accent); border-color: currentColor; }
@media (min-width: 48rem) {
  .accounts__item { grid-template-columns: minmax(0, 1fr) 12rem; gap: var(--space-6); }
  .accounts__state { text-align: right; }
}
/* El aviso de TikTok privado sigue la selección del formulario, sin JavaScript. */
.accounts__note--direct { display: none; }
form:has(input[name="tiktok_post_mode"][value="direct"]:checked) .accounts__note--direct { display: block; }

/* Publicación */
.publication { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); border-top: 1px solid var(--color-border); padding: var(--space-5) 0; }
.publication__title { font: 600 1.25rem/1.3 var(--font-ui); margin: 0 0 var(--space-3); }
.publication__facts { margin: 0; }
.publication__facts > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-1) 0; }
.publication__facts dt { font: 400 .8125rem/1.6 var(--font-mono); }
.publication__facts dd { margin: 0; overflow-wrap: anywhere; }
.publication__state { font: 500 .8125rem/1.5 var(--font-mono); letter-spacing: .02em; }
.publication__state--sin-cuenta, .publication__state--caducada, .publication__state--sin-url, .publication__state--vencido, .publication__state--fallido, .publication__state--sin-permisos { color: var(--color-accent); }
.publication__note { margin-top: var(--space-3); max-width: 62ch; }
.publication__note--attention { border-left: 3px solid var(--color-accent); padding-left: var(--space-4); }
.publication__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.publication__external { display: inline-flex; align-items: center; min-height: var(--target); padding: var(--space-2) 0; }
.publication__attempts { display: block; margin-top: var(--space-2); font: 400 .8125rem/1.5 var(--font-mono); }
.publication__retry { color: var(--color-accent); border-color: currentColor; }
.publication__summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-5); }
.publication__failed-count { display: inline-flex; align-items: center; min-height: var(--target); color: var(--color-accent); font: 500 .8125rem/1.5 var(--font-mono); }
.publication__failed-count--zero { color: var(--color-text); }
.queue__publication { max-width: 16rem; text-align: left; }
.queue__publication .publication__attempts { margin-top: var(--space-1); }
.queue__post--attention::before { content: ""; position: absolute; left: -.65rem; top: var(--space-3); bottom: var(--space-3); width: 3px; background: var(--color-accent); }
@media (min-width: 48rem) {
  .publication { grid-template-columns: minmax(0, 1fr) 12rem; gap: var(--space-6); }
  .publication > .publication__status { text-align: right; }
  .queue__publication { text-align: right; }
}
@media (forced-colors: active) {
  .queue__post--attention::before { background: Highlight; }
  .publication__note--attention, .accounts__feedback--error { border-color: Highlight; }
}

/* Zona horaria de la marca (ficha de marca) */
.zone { max-width: 36rem; padding: var(--space-4) 0; border-top: 1px solid var(--color-border-subtle); }
.zone__label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.zone__hint { font-size: .875rem; max-width: 52ch; margin: 0 0 var(--space-3); color: var(--color-text-muted); }
.zone__select { display: block; width: 100%; max-width: 24rem; min-height: var(--target); padding: var(--space-2) var(--space-3); background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border-control); border-radius: var(--radius-control); font: 400 .9375rem/1.4 var(--font-mono); }
.zone__select[aria-invalid="true"] { border: 3px solid var(--color-accent); }
.zone__now { margin: var(--space-3) 0 0; font: 400 .8125rem/1.6 var(--font-mono); }
.zone__error { margin: var(--space-2) 0 0; color: var(--color-accent); font-size: .875rem; font-weight: 600; max-width: 52ch; }
.zone__notice { margin-top: var(--space-3); max-width: 52ch; font-size: .875rem; }
.zone__notice--attention { border-left: 3px solid var(--color-accent); padding-left: var(--space-4); }
@media (forced-colors: active) {
  .zone__notice--attention { border-color: Highlight; }
}

/* TikTok */
.pub-icon { width: 1.25rem; height: 1.25rem; flex: none; }
.pub-icon--small { width: 1rem; height: 1rem; }
.tiktok { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); border-top: 1px solid var(--color-border); padding: var(--space-5) 0; }
.tiktok > * { min-width: 0; }
.tiktok__title { font: 600 1.25rem/1.3 var(--font-ui); margin: 0 0 var(--space-2); }
.tiktok__state { font: 500 .8125rem/1.5 var(--font-mono); letter-spacing: .02em; margin-bottom: var(--space-3); }
.tiktok__state--falta-privacidad, .tiktok__state--privada, .tiktok__state--sin-cuenta, .tiktok__state--caducada, .tiktok__state--error, .tiktok__state--sin-permisos { color: var(--color-accent); }
.tiktok__lede { max-width: 62ch; }
.tiktok__facts { margin: var(--space-3) 0 0; }
.tiktok__facts > div { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); }
.tiktok__facts dt { font-weight: 600; }
.tiktok__facts dd { margin: 0; overflow-wrap: anywhere; }
.tiktok__summary > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-1) 0; }
.tiktok__summary dt { font: 400 .8125rem/1.6 var(--font-mono); }
.tiktok__summary dd { margin: 0; overflow-wrap: anywhere; }
.tiktok__form { margin-top: var(--space-5); max-width: 36rem; }
.tiktok__groups { list-style: none; padding: 0; margin: 0; }
.tiktok__item { padding: var(--space-4) 0; border-top: 1px solid var(--color-border-subtle); }
.tiktok__group { border: 0; padding: 0; margin: 0; }
.tiktok__group legend { font-weight: 600; padding: 0; margin-bottom: var(--space-2); }
.tiktok__label { display: block; margin-bottom: var(--space-2); }
.tiktok__select { display: block; width: 100%; max-width: 24rem; min-height: var(--target); padding: var(--space-2) var(--space-3); background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border-control); border-radius: var(--radius-control); font: 400 1rem/1.4 var(--font-ui); }
.tiktok__select[aria-invalid="true"] { border: 3px solid var(--color-accent); }
.tiktok__check { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--target); padding: var(--space-2) 0; }
.tiktok__check input { width: 1.25rem; height: 1.25rem; margin: .2rem 0 0; accent-color: var(--color-text); flex: none; }
.tiktok__help { font-size: .875rem; max-width: 52ch; margin-top: var(--space-1); color: var(--color-text-muted); }
.tiktok__sub { list-style: none; margin: var(--space-3) 0 0 var(--space-3); padding: 0 0 0 var(--space-4); border-left: 1px solid var(--color-border-subtle); }
.tiktok__tag { font: 500 .8125rem/1.5 var(--font-mono); margin-top: var(--space-2); }
.tiktok__consent { max-width: 52ch; margin-top: var(--space-4); font-size: .875rem; line-height: 1.9; }
.tiktok__consent a { display: inline-flex; align-items: center; gap: .25rem; }
.tiktok__notice { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-4); max-width: 62ch; }
.tiktok__notice .pub-icon { margin-top: .2rem; }
.tiktok__notice--attention { border-left: 3px solid var(--color-accent); padding-left: var(--space-4); }
.tiktok__error { border-left: 3px solid var(--color-accent); padding-left: var(--space-4); max-width: 62ch; margin-top: var(--space-4); }
.tiktok__error strong { display: block; font-weight: 600; }
.tiktok__field-error { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-2); color: var(--color-accent); font-size: .875rem; font-weight: 600; max-width: 52ch; }
.tiktok__field-error .pub-icon { width: 1rem; height: 1rem; margin-top: .25rem; }
.tiktok__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.tiktok__preview { margin: 0; }
.tiktok__frame { display: block; width: 100%; max-width: 12rem; aspect-ratio: 9 / 16; object-fit: cover; border: 1px solid var(--color-border); background: var(--color-bg); }
.tiktok__caption { display: block; margin-top: var(--space-3); max-width: 24ch; font-weight: 600; }
.tiktok__counter { display: block; margin-top: var(--space-1); font: 400 .8125rem/1.5 var(--font-mono); }
/* Sin JavaScript: las opciones comerciales y el consentimiento de marca siguen las casillas. */
.tiktok__sub, .tiktok__consent--brand { display: none; }
.tiktok__group:has(input[name="tiktok_commercial"]:checked) .tiktok__sub { display: block; }
.tiktok__form:has(input[name="tiktok_brand_content"]:checked) .tiktok__consent--music { display: none; }
.tiktok__form:has(input[name="tiktok_brand_content"]:checked) .tiktok__consent--brand { display: block; }
@media (min-width: 48rem) {
  .tiktok { grid-template-columns: minmax(0, 1fr) 14rem; gap: var(--space-6); }
}
@media (forced-colors: active) {
  .tiktok__error, .tiktok__notice--attention { border-color: Highlight; }
}

/* LinkedIn */
.li-pages { margin-top: var(--space-4); border: 0; padding: 0; }
.li-pages legend { font-weight: 600; margin-bottom: var(--space-2); }
.li-pages__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.li-pages__item { border-bottom: 1px solid var(--color-border); }
.li-pages__option { display: flex; gap: var(--space-3); align-items: center; min-height: var(--target); padding: var(--space-3) 0; cursor: pointer; }
.li-pages__option input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--color-text); flex: none; }
.li-pages__name { font-weight: 600; }
.li-pages__id { margin-left: auto; font: 400 .8125rem/1.4 var(--font-mono); }
.li-pages__item:has(input:checked) { border-left: 3px solid var(--color-accent); padding-left: var(--space-3); }
.li-pages__hint { font-size: .875rem; max-width: 52ch; margin-top: var(--space-2); }
.li-pages__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.li-pages__notice { display: flex; gap: var(--space-3); align-items: flex-start; max-width: 52ch; padding: var(--space-4) 0 var(--space-4) var(--space-4); border-top: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); }
.li-pages__notice .pub-icon { margin-top: .2rem; color: var(--color-accent); flex: none; }
.li-pages__notice strong { display: block; font-weight: 600; }
.li-pages__notice + .li-pages__notice { margin-top: var(--space-4); }
@media (forced-colors: active) {
  .li-pages__item:has(input:checked), .li-pages__notice { border-color: Highlight; }
}

/* --- Vídeo del post ------------------------------------------------------------------------ */
.post-video { border-top: 1px solid var(--color-border); padding: var(--space-5) 0; }
.post-video__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.post-video__title { margin: 0; font: 600 1.25rem/1.3 var(--font-ui); }
.post-video__state { font: 500 .8125rem/1.5 var(--font-mono); }
.post-video__state--missing, .post-video__state--error, .publication__state--falta-video { color: var(--color-accent); }
.post-video__body { display: grid; gap: var(--space-5); min-width: 0; }
.post-video__body > * { min-width: 0; }
.post-video__preview { margin: 0; }
.post-video__player { display: block; width: 100%; max-width: 18rem; aspect-ratio: 9 / 16; object-fit: contain; background: var(--color-bg); border: 1px solid var(--color-border); }
.post-video__player--portrait { aspect-ratio: 4 / 5; }
.post-video__caption, .post-video__help { max-width: 62ch; margin: var(--space-2) 0 var(--space-3); font-size: .875rem; }
.post-video__facts { margin: 0 0 var(--space-5); font: 400 .8125rem/1.5 var(--font-mono); font-variant-numeric: tabular-nums; }
.post-video__facts > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.post-video__facts dd { margin: 0; overflow-wrap: anywhere; }
.post-video__form { margin-top: var(--space-4); }
.post-video__form label { display: block; font-weight: 600; }
.post-video__input { display: block; width: 100%; min-height: var(--target); padding: var(--space-2); border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); border-radius: var(--radius-control); }
.post-video__input::file-selector-button { min-height: var(--target); margin-right: var(--space-2); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-bg); color: var(--color-text); font: inherit; cursor: pointer; }
.post-video__input[aria-invalid="true"] { border-color: var(--color-accent); }
.post-video__notice { max-width: 62ch; margin: var(--space-3) 0; }
.post-video__notice--error { border-left: 3px solid var(--color-accent); padding-left: var(--space-4); }
.post-video__confirmation { margin-top: var(--space-4); }
.post-video__confirmation summary { display: list-item; width: fit-content; cursor: pointer; min-height: var(--target); padding: var(--space-2) 0; text-decoration: underline; text-underline-offset: .2em; }
.post-video__confirmation[open] { border-top: 1px solid var(--color-border); }
.post-video__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.post-video__remove { color: var(--color-accent); border-color: currentColor; }
@media (min-width: 48rem) { .post-video__body--preview { grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr); gap: var(--space-6); } }

/* --- Vídeo generado ----------------------------------------------------------------------- */
.post-card__video { display: flex; gap: var(--space-2); align-items: center; margin: var(--space-2) 0 0; font: 500 .8125rem/1.3 var(--font-mono); }
.post-video__generate { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.post-video__cost { margin: var(--space-3) 0; padding: var(--space-4); border: 1px solid var(--color-border); }
.post-video__cost-title { margin: 0 0 var(--space-2); font: 600 1rem/1.4 var(--font-ui); }
.post-video__cost dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: var(--space-3) 0; }
.post-video__cost dt { color: var(--color-text-muted); }
.post-video__cost dd { margin: 0; font-family: var(--font-mono); }
.post-video__origin { font: 500 .8125rem/1.5 var(--font-mono); margin: 0 0 var(--space-2); }

/* --- Material sugerido -------------------------------------------------------------------- */
/* Tira de pruebas: ul > li con filetes de 1 px, miniatura íntegra y el origen junto a la decisión. */
.suggested__search { margin: 0 0 var(--space-5); }
.suggested__all { margin: 0 0 var(--space-4); }
.suggested__list { list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.suggested__item { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--color-border); }
.suggested__item:last-child { border-bottom: 1px solid var(--color-border); }
.suggested__thumb { width: 5rem; height: 5rem; object-fit: contain; background: var(--color-surface-rest); outline: 1px solid var(--color-border-subtle); outline-offset: -1px; }
.suggested__body { min-width: 0; }
.suggested__name { margin: 0 0 var(--space-2); overflow-wrap: anywhere; font-weight: 600; }
.suggested__state { display: inline-block; margin-right: var(--space-2); font-weight: 500; }
.suggested__facts { margin: 0 0 var(--space-3); font-size: .9375rem; }
.suggested__facts > div { display: grid; gap: 0 var(--space-3); padding: var(--space-1) 0; }
.suggested__facts dt { font: 500 .8125rem/1.5 var(--font-mono); color: var(--color-text-muted); }
.suggested__facts dd { margin: 0; overflow-wrap: anywhere; }
.suggested__link { overflow-wrap: anywhere; }
.suggested__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.suggested__actions form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.suggested__actions label { font-weight: 600; }
.suggested__actions select { min-height: var(--target); padding: 0 var(--space-2); border: 1px solid var(--color-border-control); border-radius: var(--radius-control); background: var(--color-bg); color: var(--color-text); font: inherit; }
.suggested__discarded summary { display: list-item; width: fit-content; min-height: var(--target); padding: var(--space-2) 0; cursor: pointer; font: 500 .8125rem/1.5 var(--font-mono); }
.ref__origin { display: block; overflow-wrap: anywhere; }
@media (min-width: 48rem) {
  .suggested__item { grid-template-columns: 10rem minmax(0, 1fr); }
  .suggested__thumb { width: 10rem; height: 10rem; }
  .suggested__facts > div { grid-template-columns: 9rem minmax(0, 1fr); }
}