/* ============================================================
   AccesPub — Design System v2
   Palette  : Slate + Indigo  |  Font: Inter  |  Icons: Lucide
   ============================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --font:      'Inter', -apple-system, system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;

  /* Page chrome */
  --bg:        #f8fafc;
  --surface:   #ffffff;
  --border:    #e2e8f0;
  --border-md: #cbd5e1;

  /* Text */
  --text:    #0f172a;
  --text-md: #475569;
  --text-sm: #5b6779;   /* antes #94a3b8 (2,6:1); 5,2:1 o más en todos los fondos claros */

  /* Accent — Indigo */
  /* Un tono más oscuro que v2 para llegar a 4,5:1 con texto blanco y como color de enlace */
  --accent:    #4f46e5;
  --accent-d:  #4338ca;
  --accent-dk: #3730a3;
  --accent-l:  #e0e7ff;
  --accent-ll: #eef2ff;

  /* Success — Green */
  --success:      #15803d;   /* antes #16a34a: 5,0:1 con texto blanco */
  --success-l:    #dcfce7;
  --success-ll:   #f0fdf4;
  --success-bd:   #bbf7d0;
  --success-text: #166534;

  /* Warning — Amber */
  --warn:      #d97706;
  --warn-l:    #fde68a;
  --warn-ll:   #fffbeb;
  --warn-bd:   #fde68a;
  --warn-text: #92400e;
  --warn-dark: #78350f;

  /* Error — Red */
  --error:      #ef4444;
  --error-l:    #fecaca;
  --error-ll:   #fff5f5;
  --error-text: #991b1b;
  --error-dark: #7f1d1d;

  /* Neutrals */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #5b6779;   /* antes #64748b: 4,5:1 también sobre fondos tintados */
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(15,23,42,.04);
  --sh-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.03);
  --sh-md: 0 4px 6px -1px rgba(15,23,42,.07), 0 2px 4px -2px rgba(15,23,42,.04);
  --sh-lg: 0 10px 15px -3px rgba(15,23,42,.07), 0 4px 6px -4px rgba(15,23,42,.04);
  --sh-xl: 0 20px 25px -5px rgba(15,23,42,.08), 0 8px 10px -6px rgba(15,23,42,.04);

  /* Border radius */
  --r4:    4px;
  --r6:    6px;
  --r8:    8px;
  --r10:   10px;
  --r12:   12px;
  --r16:   16px;
  --r-full: 9999px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.hidden { display: none !important; }

/* ── Base ──────────────────────────────────────────────────── */
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Header ────────────────────────────────────────────────── */
header {
  background: var(--slate-800);
  padding: 0 2rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), var(--sh-md);
  position: sticky;
  top: 0;
  z-index: 100;
}
nav {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
}
.logo {
  color: #fff;
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
}
.logo-sub {
  font-size: 0.6em;
  font-weight: 400;
  opacity: 0.8;
  letter-spacing: 0.05em;
}
.nav-links a {
  color: var(--slate-300);
  text-decoration: none;
  margin-left: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color .15s;
}
.nav-links a:hover { color: #fff; }
.nav-links a.active { color: #fff; }

/* ── Language selector ─────────────────────────────────────── */
.lang-selector {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 1.5rem;
  font-size: 0.78rem;
}
.lang-link {
  color: var(--slate-300);
  text-decoration: none;
  padding: .2rem .45rem;
  border-radius: var(--r4);
  transition: color .15s, background .15s;
  font-weight: 500;
}
.lang-link:hover { color: #fff; background: rgba(255,255,255,.1); }
.lang-active {
  color: #fff;
  font-weight: 700;
  padding: .2rem .45rem;
  background: rgba(99,102,241,.4);
  border-radius: var(--r4);
}
.lang-sep { color: var(--slate-700); }

/* ── Main / Footer ─────────────────────────────────────────── */
main { flex: 1; padding: 2rem; }
footer {
  padding: .75rem 2rem;
  color: var(--slate-600);
  font-size: 0.78rem;
  background: var(--slate-100);
  border-top: 1px solid var(--border);
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .4rem;
}
.footer-copy { margin: 0; }
.footer-copy a { color: var(--slate-600); text-decoration: none; font-weight: 500; }
.footer-copy a:hover { color: var(--accent); }
.footer-legal { display: flex; gap: 1.25rem; }
.footer-legal a {
  color: var(--slate-600); text-decoration: none;
  transition: color .15s;
}
.footer-legal a:hover { color: var(--accent); }

/* ── Cookie banner ─────────────────────────────────────────── */
#cookie-banner {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #e2e8f0;
  border-radius: 10px;
  padding: .75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 4px 24px rgba(0,0,0,.25);
  font-size: .85rem;
  z-index: 9999;
  max-width: 90vw;
  white-space: nowrap;
}
#cookie-banner p { margin: 0; }
#cookie-banner a { color: #93c5fd; }
.btn-cookie-ok {
  background: #2563eb; color: #fff; border: none;
  padding: .3rem .85rem; border-radius: 6px;
  font-size: .82rem; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: background .15s;
}
.btn-cookie-ok:hover { background: #1d4ed8; }

@media (max-width: 600px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  #cookie-banner { white-space: normal; flex-direction: column; align-items: flex-start; bottom: 0; border-radius: 10px 10px 0 0; left: 0; right: 0; transform: none; max-width: 100%; }
}

/* ── Page layouts ──────────────────────────────────────────── */
.page-center {
  max-width: 700px;
  margin: 2.5rem auto;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.page-wide {
  max-width: 1100px;
  margin: 0 auto;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border-radius: var(--r16);
  padding: 2.5rem;
  box-shadow: var(--sh-md);
  border: 1px solid var(--border);
}
.upload-card h1 {
  font-size: 1.75rem;
  color: var(--text);
  margin-bottom: 0.4rem;
  letter-spacing: -0.025em;
  font-weight: 800;
}
.subtitle {
  color: var(--text-md);
  margin-bottom: 1.25rem;
  line-height: 1.65;
  font-size: 0.95rem;
}

/* ── Credit status pill (upload page) ─────────────────────── */
.credit-status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 500;
  padding: .3rem .75rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
  line-height: 1;
  border: 1px solid transparent;
}
.credit-status svg, .credit-status i { width: 13px; height: 13px; flex-shrink: 0; }
.credit-status--ok {
  background: var(--accent-ll);
  color: var(--accent-d);
  border-color: var(--accent-l);
}
.credit-status--low {
  background: var(--warn-ll);
  color: var(--warn-text);
  border-color: var(--warn-l);
}
.credit-status--critical {
  background: var(--error-ll);
  color: var(--error-text);
  border-color: var(--error-l);
  font-weight: 600;
}
.credit-status a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  margin-left: .25rem;
  white-space: nowrap;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .575rem 1.35rem;
  border-radius: var(--r8);
  border: none;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  font-family: var(--font);
  text-decoration: none;
  transition: background .15s, transform .12s, box-shadow .12s;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn svg, .btn i { width: .95rem; height: .95rem; flex-shrink: 0; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-d); transform: translateY(-1px); box-shadow: var(--sh-md); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.btn-primary:disabled:hover { background: var(--accent); transform: none; box-shadow: none; }

.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: var(--success-text); transform: translateY(-1px); box-shadow: var(--sh-md); }

.btn-secondary { background: var(--slate-100); color: var(--slate-700); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--slate-200); }

/* "Edit →" button — accent outline so it reads as an action, not disabled */
.btn-edit-action {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.btn-edit-action:hover { background: var(--accent); color: #fff; }

/* "Back to Report" button — subtle outline link style */
.btn-outline-report {
  background: transparent;
  color: var(--slate-500);
  border: 1px solid var(--slate-300);
  margin-left: auto;          /* push to the far right of the actions row */
}
.btn-outline-report:hover { background: var(--slate-100); color: var(--slate-700); }

.btn-large { padding: .85rem 2rem; font-size: 1rem; }

/* ── Lucide icon defaults ──────────────────────────────────── */
svg.lucide, i[data-lucide] { flex-shrink: 0; }

/* ── Drop zone ─────────────────────────────────────────────── */
.drop-zone {
  border: 2px dashed var(--border-md);
  border-radius: var(--r12);
  padding: 2.75rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  background: var(--slate-50);
}
.drop-zone:hover { border-color: var(--accent); background: var(--accent-ll); }
.drop-zone.drag-over { border-color: var(--accent); background: var(--accent-ll); border-style: dashed; }
.drop-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--accent);
}
.drop-icon svg, .drop-icon i { width: 2.5rem; height: 2.5rem; stroke-width: 1.5; }
.drop-zone p { color: var(--text-md); margin-bottom: 0.4rem; font-size: 0.95rem; }
.hint { font-size: 0.8rem; color: var(--text-sm); }
.drop-zone input[type="file"] { display: none; }
.file-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--success-ll);
  border: 1px solid var(--success-bd);
  border-radius: var(--r8);
  padding: .9rem 1.25rem;
  margin-top: 1rem;
}
#file-name { font-weight: 600; color: var(--success-text); font-size: 0.9rem; }

/* ── Upload privacy note ────────────────────────────────────── */
.upload-privacy-note {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: .9rem auto 0; max-width: 480px;
  font-size: .78rem; color: var(--text-sm); line-height: 1.45;
}
.upload-privacy-note svg, .upload-privacy-note i {
  flex-shrink: 0; width: 1rem; height: 1rem; margin-top: .1rem;
  color: var(--success-text); stroke-width: 2;
}

/* ── Process steps ─────────────────────────────────────────── */
.process-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.step { text-align: center; }
.step-num {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dk));
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .875rem;
  margin: 0 auto .35rem;
  box-shadow: 0 2px 8px rgba(99,102,241,.3);
}
.step-label { font-size: 0.72rem; color: var(--text-sm); font-weight: 500; }
.step-arrow { color: var(--slate-300); font-size: 1.1rem; }

/* ── "What we do" feature grid ─────────────────────────────── */
.what-we-do h2 {
  font-size: 1.25rem;
  color: var(--text);
  margin-bottom: .5rem;
  letter-spacing: -.02em;
  font-weight: 700;
}
.what-intro {
  color: var(--text-md);
  line-height: 1.7;
  margin-bottom: 1.75rem;
  font-size: 0.925rem;
}
.what-outro {
  color: var(--text-md);
  line-height: 1.7;
  margin-top: 1.75rem;
  font-size: 0.925rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
/* ── Coverage note (<details> between upload card and feature card) ── */
.coverage-note {
  border: 1px solid var(--accent-l);
  border-left: 3px solid var(--accent);
  border-radius: var(--r8);
  background: var(--accent-ll);
  padding: 0;
  font-size: .875rem;
  color: var(--text-md);
}
.coverage-note summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1rem;
  cursor: pointer;
  font-weight: 500;
  color: var(--accent-d);
  list-style: none;
  user-select: none;
}
.coverage-note summary::-webkit-details-marker { display: none; }
.coverage-note summary .coverage-chevron {
  margin-left: auto;
  transition: transform .2s ease;
  width: 15px; height: 15px; flex-shrink: 0;
  color: var(--accent-d);
}
.coverage-note[open] summary .coverage-chevron { transform: rotate(180deg); }
.coverage-note summary svg,
.coverage-note summary i { width: 15px; height: 15px; flex-shrink: 0; }
.coverage-note-body {
  padding: 0 1rem .85rem 2.45rem;
  line-height: 1.65;
  color: var(--text-md);
}

.feature-grid { display: flex; flex-direction: column; gap: 0.5rem; }

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--r8);
  transition: background .15s;
}
.feature-item:hover { background: var(--slate-50); }

.feature-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  background: var(--accent-ll);
  border-radius: var(--r8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-top: .1rem;
}
.feature-icon svg, .feature-icon i { width: 1.05rem; height: 1.05rem; }

.feature-body {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  font-size: .875rem;
  line-height: 1.55;
}
.feature-body strong { color: var(--slate-800); font-size: .9rem; font-weight: 600; }
.feature-body span   { color: var(--text-md); }

.feature-item--highlight {
  background: var(--warn-ll);
  border: 1.5px solid var(--warn-l);
  padding: 0.65rem 0.75rem;
}
.feature-item--highlight:hover { background: var(--warn-ll); }
.feature-item--highlight .feature-icon { background: #fef3c7; color: var(--warn); }
.feature-item--highlight .feature-body strong { color: var(--warn-text); }
.feature-item--highlight .feature-body span   { color: var(--warn-dark); }

/* ── Loading overlay ───────────────────────────────────────── */
.loading-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 999;
}
.loading-box {
  background: var(--surface);
  border-radius: var(--r16);
  padding: 2.5rem;
  text-align: center;
  box-shadow: var(--sh-xl);
  border: 1px solid var(--border);
  min-width: 220px;
}
.spinner {
  width: 44px; height: 44px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .75s linear infinite;
  margin: 0 auto 1.5rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Fases de la pantalla de carga */
.progress-steps {
  display: none; list-style: none; margin: 1.2rem 0 0; padding: 0;
  text-align: left; font-size: .85rem; line-height: 1.45;
  max-width: 420px; color: var(--slate-500);
}
.pstep { display: flex; align-items: baseline; gap: .55rem; padding: .18rem 0; }
.pstep-mark {
  flex: 0 0 auto; width: .7rem; height: .7rem; border-radius: 50%;
  border: 2px solid var(--border-md); transform: translateY(.05rem);
}
.pstep-active { color: var(--slate-800); font-weight: 600; }
.pstep-active .pstep-mark { border-color: var(--accent); background: var(--accent); }
.pstep-done { color: var(--slate-600); }
.pstep-done .pstep-mark { border-color: var(--success, #16a34a); background: var(--success, #16a34a); }
.pstep-text { min-width: 0; }
.pstep-count { display: block; font-weight: 400; font-size: .78rem; color: var(--slate-500); }
.pstep-count:empty { display: none; }
.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;
}

/* ── Stats grid ────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .875rem;
  margin: 1.5rem 0;
}
.stat-card {
  background: var(--surface);
  border-radius: var(--r12);
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow: var(--sh-sm);
  border: 1px solid var(--border);
  border-top: 3px solid transparent;
  transition: box-shadow .15s, transform .15s;
}
.stat-card:hover { box-shadow: var(--sh-md); transform: translateY(-1px); }
.stat-card.stat-green  { border-top-color: #22c55e; }
.stat-card.stat-orange { border-top-color: var(--warn); }
.stat-card.stat-red    { border-top-color: var(--error); }
.stat-card.stat-blue   { border-top-color: var(--accent); }
.stat-num {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.stat-label { font-size: .75rem; color: var(--text-sm); margin-top: .3rem; font-weight: 500; }

/* ── Info bar ──────────────────────────────────────────────── */
.info-bar {
  background: var(--accent-ll);
  border-left: 3px solid var(--accent);
  padding: .7rem 1.1rem;
  border-radius: 0 var(--r8) var(--r8) 0;
  margin-bottom: 1.5rem;
  font-size: .875rem;
  color: var(--slate-700);
}

/* ── Language inline editor ────────────────────────────────── */
.lang-info-group        { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.btn-lang-edit          { background: none; border: none; cursor: pointer;
                          color: var(--accent); padding: 0 .25rem; line-height: 1;
                          display: inline-flex; align-items: center; }
.btn-lang-edit:hover    { color: var(--accent-d); }
.btn-lang-edit svg, .btn-lang-edit i { width: .85rem; height: .85rem; }
.lang-edit-form         { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.lang-edit-form.hidden  { display: none; }
.lang-edit-input        { border: 1px solid var(--border-md); border-radius: var(--r6);
                          padding: .2rem .4rem; font-size: .85rem;
                          width: 7rem; font-family: var(--font-mono); }
.lang-override-badge    { display: inline-block; background: #fef3c7; color: var(--warn-text);
                          border: 1px solid var(--warn-l); border-radius: var(--r4);
                          font-size: .7rem; padding: .05rem .35rem;
                          vertical-align: middle; font-weight: 600; }

/* ── Action banner ─────────────────────────────────────────── */
.action-banner {
  background: var(--warn-ll);
  border: 1px solid var(--warn-l);
  border-radius: var(--r10);
  padding: .9rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

/* ── Export section ────────────────────────────────────────── */
.export-section {
  background: linear-gradient(135deg, var(--success-ll), #fff);
  border: 1px solid var(--success-bd);
  border-radius: var(--r12);
  padding: 2rem;
  text-align: center;
  margin: 1.5rem 0;
}
.export-section h2 { color: var(--success-text); margin-bottom: .75rem; }

/* ── Page source notice ────────────────────────────────────── */
.page-source-notice {
  background: var(--accent-l); border: 1px solid var(--accent-bd, #c7d2fe);
  border-radius: var(--r12); padding: 1.25rem 1.5rem; margin: 1rem 0;
}
.page-source-header {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem;
}
.page-source-header svg, .page-source-header i {
  width: 1.1rem; height: 1.1rem; color: var(--accent); flex-shrink: 0;
}
.page-source-badge {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--accent-dk); background: rgba(99,102,241,.12);   /* accent-dk: 4,47:1 → >7:1 */
  padding: .15em .55em; border-radius: var(--r4);
}
.page-source-notice > p {
  font-size: .85rem; color: var(--slate-700); margin-bottom: .9rem; line-height: 1.5;
}
.page-source-form label {
  display: block; font-size: .8rem; font-weight: 600; color: var(--slate-700);
  margin-bottom: .35rem;
}
.page-source-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.page-source-input {
  padding: .38rem .65rem; border: 1px solid var(--border-md); border-radius: var(--r6);
  font-size: .875rem; width: 14rem; font-family: var(--font);
  transition: border-color .15s;
}
.page-source-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.page-source-saved {
  display: flex; align-items: center; gap: .4rem; margin-top: .75rem;
  font-size: .82rem; color: var(--success-text); font-weight: 600;
}
.page-source-saved svg, .page-source-saved i { width: .95rem; height: .95rem; }

/* ── Report sections (collapsible) ────────────────────────── */
.report-section {
  margin: 1.25rem 0;
  border-radius: var(--r12);
  /* No overflow:hidden here — would clip tooltips. Border-radius applied to children. */
  box-shadow: var(--sh-sm);
  border: 1px solid var(--border);
}
.report-section-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: .875rem 1.1rem;
  font-size: .975rem; font-weight: 700;
  cursor: pointer; user-select: none;
  list-style: none;
  letter-spacing: -.01em;
  border-radius: var(--r12) var(--r12) 0 0;
}
/* Round all corners when accordion is closed */
details.report-section:not([open]) > .report-section-header {
  border-radius: var(--r12);
}
.report-section-header::-webkit-details-marker { display: none; }
.report-section-header::after {
  content: '▾'; font-size: 1.1rem; line-height: 1; transition: transform .2s; opacity: 0.75;
}
details[open] .report-section-header::after { transform: rotate(-180deg); }
/* Group: section title + help button side by side as one flex item */
.rsec-heading {
  display: inline-flex; align-items: center; gap: .35rem;
}
/* Round bottom of issues list */
.report-section .issues-list {
  border-radius: 0 0 var(--r12) var(--r12);
  overflow: hidden;
}

.report-section-manual { background: #fff5f0; color: #7b341e; }
.report-section-fixed  { background: var(--success-ll); color: var(--success-text); }
.section-count {
  background: rgba(0,0,0,0.08); border-radius: var(--r-full);
  padding: .1rem .5rem; font-size: .8rem; margin-right: .5rem;
}
.report-section-ok {
  margin: 1.25rem 0; padding: .9rem 1.1rem;
  background: var(--success-ll); border: 1px solid var(--success-bd);
  border-radius: var(--r10); color: var(--success-text);
  font-weight: 600; display: flex; align-items: center; gap: .5rem;
}
.report-section-empty {
  margin: 1.25rem 0; padding: .9rem 1.1rem;
  background: var(--slate-100); border: 1px solid var(--border);
  border-radius: var(--r10); color: var(--text-sm);
}

/* ── Review subsections ────────────────────────────────────── */
.review-subsection {
  border-radius: var(--r8); border: 1px solid var(--border);
  overflow: hidden; background: var(--surface);
}
.review-subsection-header {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .9rem;
  cursor: pointer; user-select: none; list-style: none;
  font-size: .9rem; font-weight: 700;
}
.review-subsection-header::-webkit-details-marker { display: none; }
.review-subsection-header::before {
  content: '\25B8'; font-size: 1.15rem; line-height: 1; flex-shrink: 0;
  transition: transform .2s; opacity: 0.75;
}
details[open] > .review-subsection-header::before { transform: rotate(90deg); }
.rsub-title { flex: 1; display: inline-flex; align-items: center; gap: .35rem; }
.rsub-right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.rsub-count {
  background: rgba(0,0,0,0.1); border-radius: var(--r-full);
  padding: .1rem .45rem; font-size: .75rem; font-weight: 700;
}
.review-subsection-images { background: #fffbeb; color: #92400e; border-color: var(--warn-l); }
.review-subsection-tables { background: var(--accent-ll); color: #1e40af; border-color: var(--accent-l); }
.review-subsection-lang   { background: #f0fdf4; color: #14532d; border-color: #bbf7d0; }

/* ── Review item rows ──────────────────────────────────────── */
.review-items-list {
  display: flex; flex-direction: column;
  background: var(--surface); border-top: 1px solid var(--border);
}
.review-item-row {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .4rem .9rem;
  font-size: .82rem;
  border-bottom: 1px solid var(--slate-100);
}
.review-item-row:last-child { border-bottom: none; }
.review-item-icon { flex-shrink: 0; opacity: 0.55; }
.review-item-icon svg, .review-item-icon i { width: .9rem; height: .9rem; }
.review-item-thumb {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 4px;
  overflow: hidden; background: var(--surface); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
}
.review-item-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.review-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.review-item-label {
  color: var(--text-md); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.review-item-alt {
  color: var(--text-sm); font-style: italic; line-height: 1.35;
  white-space: normal; overflow-wrap: anywhere;
}

/* ── Issues list ───────────────────────────────────────────── */
.other-issues-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-sm);
  padding: .75rem .9rem .15rem;
}
.issues-list { display: flex; flex-direction: column; gap: .4rem; padding: .65rem; }
.issue-row {
  display: flex; align-items: flex-start; gap: .875rem;
  background: var(--surface); border-radius: var(--r8);
  padding: .8rem .9rem;
  box-shadow: var(--sh-xs);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  transition: box-shadow .15s;
}
.issue-row:hover { box-shadow: var(--sh-sm); }
.issue-row.issue-critical { border-left-color: var(--error); }
.issue-row.issue-serious  { border-left-color: var(--warn); }
.issue-row.issue-moderate { border-left-color: #ecc94b; }
.issue-row.issue-minor    { border-left-color: #22c55e; }
.issue-row.issue-fixed    { border-left-color: #22c55e; }   /* sin opacity: bajaba el contraste del texto por debajo de 4,5:1 */
.issue-status {
  flex-shrink: 0; display: flex; align-items: flex-start; padding-top: .05rem;
}
.issue-status svg, .issue-status i { width: 1.1rem; height: 1.1rem; }
.issue-body { flex: 1; min-width: 0; }
.issue-meta { display: flex; align-items: center; gap: .35rem; margin-bottom: .25rem; flex-wrap: wrap; }
.issue-type-tag {
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--slate-600); background: var(--slate-100);
  padding: .12rem .4rem; border-radius: var(--r4);
}
.issue-sev-badge {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  padding: .12rem .4rem; border-radius: var(--r4);
}
.issue-location { font-size: .72rem; color: var(--text-sm); margin-bottom: .15rem; }
.issue-desc { font-size: .875rem; color: var(--text); }
.issue-fix  { font-size: .8rem; color: var(--success-text); margin-top: .2rem; font-style: italic; }
.issue-badge {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  padding: .15rem .45rem; border-radius: var(--r4); flex-shrink: 0;
}
.badge-critical { background: var(--error-l); color: #9b2c2c; }   /* 5,2:1 (antes 3,8:1) */
.badge-serious  { background: #feebc8; color: #9c4221; }   /* 5,6:1 (antes 3,9:1) */
.badge-moderate { background: #fefcbf; color: #744210; }
.badge-minor    { background: var(--success-l); color: var(--success-text); }
.btn-sm { font-size: .78rem; padding: .28rem .7rem; }

/* ── Review layout ─────────────────────────────────────────── */
.review-layout {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 768px) { .review-layout { grid-template-columns: 1fr; } }

.review-sidebar {
  background: var(--surface);
  border-radius: var(--r12);
  padding: 1.5rem;
  box-shadow: var(--sh-md);
  border: 1px solid var(--border);
  position: sticky; top: 1rem;
}
.progress-section { margin-bottom: 1.5rem; }
.progress-section h3 { font-size: .95rem; margin-bottom: .65rem; font-weight: 700; }
.progress-bar {
  background: var(--slate-200); border-radius: var(--r-full); height: 6px;
  overflow: hidden; margin-bottom: .4rem;
}
.progress-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent-dk));
  height: 100%; transition: width .4s ease;
}
.progress-section p { font-size: .82rem; color: var(--text-sm); }

.context-section h4 {
  font-size: .75rem; color: var(--text-sm); margin-bottom: .4rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.context-box {
  background: var(--slate-50); border: 1px solid var(--border);
  border-radius: var(--r8); padding: .65rem;
  font-size: .8rem; line-height: 1.5;
}
.context-before, .context-after { color: var(--text-sm); }
.context-image-marker {
  text-align: center; font-weight: 700; color: var(--accent);
  padding: .25rem; background: var(--accent-l);
  border-radius: var(--r4); margin: .35rem 0; font-size: .8rem;
}

.review-main {
  background: var(--surface); border-radius: var(--r12); padding: 2rem;
  box-shadow: var(--sh-md); border: 1px solid var(--border);
}
.review-header { margin-bottom: 1.5rem; }
.review-header h2 { font-size: 1.2rem; margin-bottom: .25rem; letter-spacing: -.01em; }
.img-src { font-size: .75rem; color: var(--text-sm); }

.image-display {
  background: var(--slate-50); border: 1px solid var(--border);
  border-radius: var(--r10); padding: 1.5rem; text-align: center;
  margin-bottom: 1.5rem; min-height: 200px;
  display: flex; align-items: center; justify-content: center;
}
.preview-img { max-width: 100%; max-height: 400px; object-fit: contain; border-radius: var(--r4); }
.image-unavailable { color: var(--text-sm); font-style: italic; }

/* ── Table preview ─────────────────────────────────────────── */
.table-preview-wrap {
  background: var(--slate-50); border-radius: var(--r8);
  padding: .4rem; margin-bottom: 1.5rem;
  border: 1px solid var(--border); overflow: hidden;
}
.table-preview-frame {
  width: 100%; min-height: 60px; max-height: 320px;
  border: none; display: block; border-radius: var(--r4); overflow: auto;
}
.caption-textarea {
  width: 100%; padding: .55rem .7rem;
  border: 1px solid var(--border-md); border-radius: var(--r6);
  font-size: .875rem; font-family: var(--font);
  resize: vertical; min-height: 3rem;
  margin-top: .5rem; margin-bottom: .25rem;
  box-sizing: border-box; transition: border-color .15s;
}
.caption-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.field-label { font-weight: 600; font-size: .875rem; color: var(--slate-700); display: block; margin-top: 1rem; }

.current-alt {
  display: flex; align-items: center; gap: .65rem;
  background: var(--slate-50); padding: .55rem .9rem;
  border-radius: var(--r6); margin-bottom: 1.1rem;
  font-size: .83rem; border: 1px solid var(--border);
}
.current-alt label { color: var(--text-sm); flex-shrink: 0; }

.alt-options { margin-bottom: 1.5rem; }
.header-row-section {
  margin: .75rem 0 1rem;
  padding: .85rem 1rem;
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: var(--r8);
}
.header-row-section .field-label { margin-top: 0; }
.option-group {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .7rem .85rem; border-radius: var(--r8);
  margin-bottom: .4rem;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: background .12s, border-color .12s;
}
.option-group:hover { background: var(--slate-50); border-color: var(--accent); }
.option-group input { margin-top: 2px; accent-color: var(--accent); }
.option-group label { cursor: pointer; font-size: .9rem; }

#alt-text-section { padding: .65rem 0; }
textarea {
  width: 100%; border: 1px solid var(--border);
  border-radius: var(--r8); padding: .65rem .75rem;
  font-size: .875rem; font-family: var(--font);
  resize: vertical; transition: border-color .15s; color: var(--text);
}
textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.char-counter { font-size: .72rem; color: var(--text-sm); margin-top: .25rem; }

.review-actions {
  display: flex; gap: .65rem; align-items: center;
  padding-top: 1.1rem; border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

/* ── Alerts ────────────────────────────────────────────────── */
.alert {
  padding: .7rem .95rem; border-radius: var(--r8);
  margin-bottom: 1rem; font-size: .875rem;
}
.alert-error   { background: var(--error-ll); border: 1px solid var(--error-l); color: #c53030; }
.alert-info    { background: var(--accent-ll); border: 1px solid var(--accent-l); color: #1e40af; }
.alert-warning { background: var(--warn-ll); border: 1px solid var(--warn-l); color: var(--warn-text); }

/* ── AI badge ──────────────────────────────────────────────── */
.review-header { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin-bottom: .9rem; }
.review-header h2 { margin: 0; }
.ai-badge {
  font-size: .72rem; padding: .18rem .55rem; border-radius: var(--r-full);
  font-weight: 600; white-space: nowrap;
}
.ai-badge-claude  { background: var(--accent-l); color: var(--accent-dk); border: 1px solid #c7d2fe; }
.ai-badge-openai  { background: var(--success-l); color: #065f46; border: 1px solid var(--success-bd); }
.ai-badge-google  { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.ai-badge-none    { background: var(--slate-100); color: var(--slate-500); border: 1px solid var(--border); }

/* ── Alt-input row / AI button ─────────────────────────────── */
.alt-input-row {
  display: flex; align-items: center;
  justify-content: space-between; gap: .5rem; margin-bottom: .4rem;
}
.alt-input-row label { font-size: .83rem; color: var(--text-md); margin: 0; }

.btn-ai {
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  color: #fff; border: none; border-radius: var(--r6);
  padding: .28rem .7rem; font-size: .78rem; font-weight: 600;
  font-family: var(--font); cursor: pointer;
  white-space: nowrap; transition: opacity .15s, transform .12s;
  display: inline-flex; align-items: center; gap: .3rem;
}
.btn-ai:hover   { opacity: .88; transform: translateY(-1px); }
.btn-ai:disabled { opacity: .5; cursor: default; transform: none; }

/* ── AI status ─────────────────────────────────────────────── */
.ai-status {
  font-size: .8rem; padding: .35rem .65rem; border-radius: var(--r6);
  margin-bottom: .45rem; display: flex; align-items: center; gap: .4rem;
}
.ai-status-ok   { background: var(--success-ll); color: var(--success-text); border: 1px solid var(--success-bd); }
.ai-status-err  { background: var(--error-ll); color: #c53030; border: 1px solid var(--error-l); }
.ai-status-warn { background: var(--warn-ll); color: var(--warn-text); border: 1px solid var(--warn-l); }

/* ── Code ──────────────────────────────────────────────────── */
code {
  background: var(--slate-100); padding: .1em .35em;
  border-radius: var(--r4); font-size: .83em;
  font-family: var(--font-mono); color: var(--slate-700);
}
.review-sidebar .hint code,
.review-sidebar .img-src {
  word-break: break-all; overflow-wrap: anywhere; white-space: normal;
}
h1 { margin-bottom: 1rem; letter-spacing: -.02em; }
h2 { margin: 1.5rem 0 .65rem; font-size: 1.2rem; letter-spacing: -.015em; }

/* ── Validation page ───────────────────────────────────────── */
.val-page { max-width: 860px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.val-page h2 { font-size: 1.35rem; margin-bottom: .9rem; color: var(--text); letter-spacing: -.02em; }

.val-banner {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .8rem 1rem; border-radius: var(--r8); margin-bottom: 1.1rem;
  font-size: .9rem; line-height: 1.5;
}
.val-icon { flex-shrink: 0; margin-top: .05rem; display: flex; align-items: center; }
.val-icon svg, .val-icon i { width: 1.1rem; height: 1.1rem; }
.val-banner-ok      { background: var(--success-ll); color: var(--success-text); border: 1px solid var(--success-bd); }
.val-banner-error   { background: var(--error-ll); color: var(--error-text); border: 1px solid var(--error-l); }
.val-banner-unknown { background: #fefce8; color: #854d0e; border: 1px solid #fde047; }

.val-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r10); padding: 1rem 1.15rem; margin-bottom: .9rem;
  box-shadow: var(--sh-xs);
}
.val-section h3 { font-size: .95rem; margin-bottom: .65rem; color: var(--text); font-weight: 700; letter-spacing: -.01em; }
.val-section details > summary { cursor: pointer; list-style: none; }
.val-section details > summary::-webkit-details-marker { display: none; }

.val-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.val-list li { padding: .4rem .7rem; border-radius: var(--r6); font-size: .85rem; line-height: 1.45; }
.val-error   { background: var(--error-ll); color: var(--error-dark); border-left: 3px solid var(--error); }
.val-warning { background: var(--warn-ll); color: var(--warn-dark); border-left: 3px solid var(--warn); }
.val-info    { background: #f0f9ff; color: #075985; border-left: 3px solid #38bdf8; }

.val-code { font-size: .73em; background: rgba(0,0,0,0.06); padding: .1em .4em; border-radius: var(--r4); margin-right: .35em; }
.val-loc  { font-size: .75em; opacity: .6; margin-left: .5em; font-family: var(--font-mono); }
.val-hint { font-size: .85rem; color: var(--slate-500); margin-bottom: .85rem; }

.val-field-row { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .85rem; }
.val-field-row label { font-size: .85rem; font-weight: 600; color: var(--slate-700); }
.val-field-row input {
  padding: .42rem .65rem; border: 1px solid var(--border-md); border-radius: var(--r6);
  font-size: .875rem; width: 100%; max-width: 480px; font-family: var(--font);
  transition: border-color .15s;
}
.val-field-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }

.val-field-summary { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: .5rem; }
.val-field-caption {
  font-size: .78rem; color: var(--slate-500); background: var(--slate-50);
  border-left: 3px solid #c7d2fe; padding: .45rem .7rem;
  border-radius: 0 var(--r6) var(--r6) 0; margin: .15rem 0 .45rem; max-width: 640px;
}
.val-field-caption code { font-size: .76rem; background: var(--accent-l); color: var(--accent-dk); }
.val-field-row textarea {
  padding: .45rem .65rem; border: 1px solid var(--border-md); border-radius: var(--r6);
  font-size: .875rem; width: 100%; max-width: 640px;
  resize: vertical; font-family: var(--font); line-height: 1.5;
  transition: border-color .15s;
}
.val-field-row textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }

.val-required     { font-size: .7rem; background: var(--error-l); color: var(--error-text); padding: .1em .4em; border-radius: var(--r4); margin-left: .35em; font-weight: 700; }
.val-optional     { font-size: .7rem; background: var(--slate-100); color: var(--slate-500); padding: .1em .4em; border-radius: var(--r4); margin-left: .35em; }
.val-distribution { font-size: .7rem; background: var(--warn-l); color: var(--warn-dark); padding: .1em .4em; border-radius: var(--r4); margin-left: .35em; font-weight: 600; }
.val-field-readonly { display: flex; align-items: center; gap: .75rem; padding: .45rem .65rem;
  background: var(--slate-100); border: 1px solid var(--border); border-radius: var(--r6);
  color: var(--slate-500); font-size: .9rem; width: 100%; max-width: 480px; }
.val-field-readonly code { font-size: .88rem; color: var(--slate-700); }
.val-field-edit-link { font-size: .8rem; color: var(--accent); text-decoration: none; margin-left: auto; white-space: nowrap; }
.val-field-edit-link:hover { text-decoration: underline; }
.val-actions  { margin-top: .5rem; }
.val-continue { margin-top: 1.5rem; text-align: center; }
.val-continue .btn-secondary {
  display: inline-block; padding: .65rem 1.4rem; font-size: .95rem;
  background: var(--accent); color: #fff; border-radius: var(--r8);
  text-decoration: none; font-weight: 600;
  transition: background .15s, transform .12s;
}
.val-continue .btn-secondary:hover { background: var(--accent-d); transform: translateY(-1px); }

/* ── Nav settings link ─────────────────────────────────────── */
.nav-settings {
  margin-left: auto; font-size: .78rem; opacity: 1;
  padding: .2rem .55rem; border-radius: var(--r6);
  transition: opacity .15s, background .15s;
  display: inline-flex; align-items: center; gap: .3rem;
}
.nav-settings:hover, .nav-settings-active { opacity: 1; background: rgba(255,255,255,.12); }
.nav-settings svg, .nav-settings i { width: .85rem; height: .85rem; }

/* ── Hamburger / Mobile nav ────────────────────────────────── */
.nav-burger {
  display: none;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: .35rem .4rem;
  border-radius: 6px;
  transition: background .15s;
  margin-left: auto;
  align-items: center;
  justify-content: center;
}
.nav-burger:hover { background: rgba(255,255,255,.12); }
.nav-burger i, .nav-burger svg { width: 22px; height: 22px; display: block; }

@media (max-width: 768px) {
  header { position: relative; }
  nav { flex-wrap: wrap; height: auto; min-height: 58px; padding: 0; }
  .logo { padding: 0 1rem; height: 58px; justify-content: center; }
  .nav-burger { display: flex; height: 58px; padding: 0 1rem; border-radius: 0; }

  .nav-links {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    background: var(--slate-800);
    border-top: 1px solid rgba(255,255,255,.08);
    padding: .4rem 0 .75rem;
  }
  .nav-links a {
    margin-left: 0;
    padding: .7rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
    display: block;
    font-size: .9rem;
  }
  .nav-links a:last-child { border-bottom: none; }

  .lang-selector {
    display: none;
    order: 4;
    width: 100%;
    margin-left: 0;
    padding: .6rem 1.25rem .85rem;
    border-top: 1px solid rgba(255,255,255,.08);
    background: var(--slate-800);
    justify-content: flex-start;
    gap: .3rem;
  }

  nav.nav-open .nav-links { display: flex; }
  nav.nav-open .lang-selector { display: flex; }
  nav.nav-open .nav-burger { background: rgba(255,255,255,.1); }
}

/* ── Export download — success finale ─────────────────────── */
.export-download-section {
  margin-top: 2.5rem;
  padding: 2rem 2.25rem 2.25rem;
  border-radius: var(--r16);
  border: 1.5px solid var(--success-bd);
  background: linear-gradient(135deg, var(--success-ll) 0%, #f0fdf8 60%, #e6faf2 100%);
  box-shadow: 0 4px 24px rgba(22,163,74,.10), 0 1px 4px rgba(22,163,74,.07);
  text-align: center;
}
.export-download-section h3 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--success-text) !important;
  margin-bottom: .5rem !important;
  letter-spacing: -.02em;
}
.export-download-section p {
  font-size: .925rem;
  color: #166534cc;
  margin: 0 auto .1rem;
  max-width: 38rem;
  line-height: 1.6;
}
.export-download-section .btn-success {
  margin-top: 1.4rem;
  padding: .95rem 2.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
  box-shadow: 0 4px 16px rgba(22,163,74,.30);
  transition: transform .15s, box-shadow .15s;
}
.export-download-section .btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(22,163,74,.38);
}
.export-session-info {
  display: flex;
  align-items: flex-start;
  gap: .4em;
  margin-top: 1.1rem !important;
  padding: .7rem 1rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: .5rem;
  font-size: .875rem;
  color: #1e40af;
  line-height: 1.55;
  text-align: left;
  max-width: 38rem;
}
.export-session-info a { color: #1d4ed8; }
.export-session-info a:hover { text-decoration: underline; }

/* ── Review status badges ──────────────────────────────────── */
.review-status-badge {
  font-size: .7rem; font-weight: 700; padding: .13em .55em;
  border-radius: var(--r-full); white-space: nowrap; flex-shrink: 0;
}
.status-reviewed    { background: var(--success-l); color: var(--success-text); }
.status-pending     { background: #fff7ed; color: #9a3412; }
.status-decorative  { background: #f1f5f9; color: #475569; }   /* slate-100/600 — neutral */
.status-layout      { background: #f1f5f9; color: #475569; }
.rsub-pending    { background: #fef3c7; color: #856404; }
.rsub-done       { background: var(--success-l); color: #065f46; margin-left: .3rem; }

/* ── Skip section ──────────────────────────────────────────── */
.skip-section {
  margin: 2rem auto 0; max-width: 860px;
  padding: 1rem 1.5rem;
  border: 1px dashed var(--border-md);
  border-radius: var(--r10);
  background: var(--slate-50);
  text-align: center;
}
.btn-skip-all {
  border: 1.5px solid var(--border-md); background: transparent; color: var(--slate-600);
  padding: .45rem 1.3rem; border-radius: var(--r8); font-size: .875rem;
  font-weight: 600; cursor: pointer; transition: all .15s; font-family: var(--font);
}
.btn-skip-all:hover { background: var(--slate-100); border-color: var(--slate-500); color: var(--slate-800); }
.skip-desc {
  margin: .55rem auto 0; max-width: 560px;
  font-size: .78rem; color: var(--slate-500); line-height: 1.5;
}

/* Panel de confirmación de «Saltar revisión» */
.skip-confirm {
  margin: 1rem auto 0; max-width: 640px; text-align: left; line-height: 1.55;
}
.skip-confirm-title { font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; }
.skip-confirm-title:focus { outline: 2px solid var(--warn-text); outline-offset: 2px; }
.skip-confirm-list { margin: 0 0 .6rem; padding-left: 1.2rem; }
.skip-confirm-list li { margin-bottom: .35rem; }
.skip-confirm p { margin: 0 0 .6rem; }
.skip-confirm-noalt { font-weight: 500; }
.skip-confirm-option {
  margin: .4rem 0 .7rem; padding: .6rem .75rem;
  border: 1px solid var(--warn-l); border-radius: var(--r8); background: var(--slate-50);
}
.skip-confirm-check { display: flex; gap: .55rem; align-items: flex-start; cursor: pointer; font-weight: 500; }
.skip-confirm-check input { margin-top: .25rem; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; }
.skip-confirm-effect { margin: .4rem 0 0 1.6rem !important; font-size: .82rem; }
.skip-confirm-actions .btn[disabled] { opacity: .55; cursor: not-allowed; }
.skip-confirm-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.skip-report-warn p { margin: 0 0 .4rem; }
.skip-report-warn p:last-child { margin-bottom: 0; }

/* ── Incompatibility alert ─────────────────────────────────── */
.incompat-alert {
  background: var(--warn-ll); border: 1.5px solid var(--warn-l);
  border-radius: var(--r10); padding: 1rem 1.2rem; margin: .9rem 0;
}
.incompat-header { display: flex; align-items: center; gap: .55rem; margin-bottom: .45rem; }
.incompat-icon { display: flex; color: var(--warn); }
.incompat-icon svg, .incompat-icon i { width: 1.2rem; height: 1.2rem; }
.incompat-header strong { font-size: .95rem; color: var(--warn-text); }
.incompat-body { font-size: .875rem; color: var(--warn-dark); margin: 0 0 .45rem; line-height: 1.6; }
.incompat-details summary { cursor: pointer; font-size: .875rem; color: var(--warn-text); }
.incompat-to { font-size: .83rem; margin: .45rem 0; }
.incompat-textarea {
  width: 100%; height: 12rem;
  font-family: var(--font-mono); font-size: .76rem;
  border: 1px solid var(--border-md); border-radius: var(--r6);
  padding: .5rem; resize: vertical; background: var(--surface); margin-top: .55rem;
}
.incompat-actions { display: flex; gap: .65rem; align-items: center; margin-top: .65rem; flex-wrap: wrap; }

/* ── Settings/val-section spacing ─────────────────────────── */
.val-section + .val-section { margin-top: 1.25rem; }

/* ── Login / first-run ─────────────────────────────────────── */
.login-page {
  max-width: 420px; margin: 3rem auto;
  padding: 2.25rem 2.5rem;
  background: var(--surface); border-radius: var(--r16);
  box-shadow: var(--sh-xl); border: 1px solid var(--border);
}
.login-page h2 { margin: 0 0 1.25rem; font-size: 1.2rem; color: var(--text); letter-spacing: -.015em; font-weight: 700; }
.login-form .form-group { margin-bottom: .9rem; }
.login-form label { display: block; font-size: .83rem; font-weight: 600; color: var(--slate-700); margin-bottom: .3rem; }
.login-form .form-control {
  width: 100%; padding: .5rem .7rem;
  border: 1px solid var(--border-md); border-radius: var(--r8);
  font-size: .925rem; box-sizing: border-box; font-family: var(--font);
  transition: border-color .15s;
}
.login-form .form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.login-form .btn { margin-top: .5rem; width: 100%; justify-content: center; }
.login-error {
  background: var(--error-ll); border: 1px solid var(--error-l);
  border-radius: var(--r8); padding: .55rem .85rem;
  color: var(--error-text); font-size: .85rem; margin-bottom: .9rem;
}

/* ── Fixed Layout note ─────────────────────────────────────── */
.upload-fixed-note {
  color: var(--warn-text); font-size: .77rem; margin-top: .2rem;
}
.upload-size-note {
  color: var(--muted); font-size: .77rem; margin-top: .15rem;
}
.upload-size-note a { color: var(--primary); }

/* ── Suspicious URL alert ──────────────────────────────────── */
.sus-url-alert {
  background: var(--warn-ll); border: 1.5px solid var(--warn-l);
  border-radius: var(--r10); padding: 1rem 1.2rem; margin: .9rem 0;
}
.sus-url-header { display: flex; align-items: center; gap: .55rem; margin-bottom: .45rem; }
.sus-url-icon { display: flex; color: var(--warn); }
.sus-url-icon svg, .sus-url-icon i { width: 1.15rem; height: 1.15rem; }
.sus-url-header strong { font-size: .95rem; color: var(--warn-text); }
.sus-url-body { font-size: .85rem; color: var(--warn-dark); margin: 0 0 .55rem; line-height: 1.6; }
.sus-url-list { margin: 0 0 .55rem 1.1rem; padding: 0; list-style: disc; font-size: .8rem; }
.sus-url-item { margin-bottom: .3rem; word-break: break-all; }
.sus-url-chars { margin-right: .35rem; }
.sus-url-chars code { background: var(--warn-l); border-radius: var(--r4); padding: .08em .3em; font-weight: 700; color: var(--warn-text); }
.sus-url-orig  { color: var(--slate-700); }
.sus-url-hint  { font-size: .8rem; color: var(--warn-text); margin: 0; font-style: italic; }

/* ── Export — computed a11y metadata panel ─────────────────── */
.a11y-computed-section { margin-top: 1.5rem; }

.a11y-checklist {
  display: flex; flex-direction: column; gap: .45rem;
  margin: .75rem 0 1rem;
}

.a11y-check-item {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .55rem .8rem; border-radius: var(--r8);
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: .875rem;
}

.a11y-check-ok   { border-color: var(--success-bd); background: var(--success-ll); }
.a11y-check-warn { border-color: var(--warn-l);     background: var(--warn-ll); }

.a11y-check-icon {
  flex-shrink: 0; width: 1.2rem; height: 1.2rem;
  font-size: 1rem; line-height: 1.2;
  color: var(--success-text);
}
.a11y-check-warn .a11y-check-icon { color: var(--warn-text); }

.a11y-check-body {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .25rem .5rem; flex: 1;
}

.a11y-check-prop {
  font-weight: 600; font-size: .8rem; font-family: var(--font-mono);
  color: var(--text); letter-spacing: -.01em;
}

.a11y-check-val {
  font-size: .83rem; color: var(--text-md);
  flex: 1; min-width: 0;
}

.a11y-check-note {
  font-size: .78rem; color: var(--text-sm);
  width: 100%; margin-top: .15rem; font-style: italic;
}

.a11y-note-ok   { font-size: .78rem; color: var(--success-text); font-style: italic; margin-left: .25rem; }
.a11y-note-warn { font-size: .78rem; color: var(--warn-text);    font-style: italic; margin-left: .25rem; }

/* Summary textarea block */
.a11y-summary-block {
  margin-top: 1rem;
  padding: .8rem 1rem;
  border: 1px solid var(--border-md);
  border-radius: var(--r10);
  background: var(--surface);
}
.a11y-summary-block label {
  display: flex; align-items: baseline; gap: .4rem;
  font-size: .875rem; margin-bottom: .2rem;
}
.a11y-summary-block textarea {
  width: 100%; box-sizing: border-box;
  font-size: .875rem; font-family: var(--font);
  border: 1px solid var(--border-md); border-radius: var(--r8);
  padding: .5rem .7rem; resize: vertical;
  transition: border-color .15s;
}
.a11y-summary-block textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}

/* Pending review warning banner */
.export-pending-warn {
  border-left: 4px solid var(--warn);
  padding: .75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: .875rem;
}

/* ── Help tooltip button & popover ──────────────────────────── */
.help-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: transparent;
  color: inherit;        /* inherit colour from parent section header */
  opacity: .65;
  font-size: .65rem; font-weight: 700; line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: opacity .15s, background .15s, color .15s;
  vertical-align: middle;
}
.help-btn:hover, .help-btn[aria-expanded="true"] {
  opacity: 1;
  background: currentColor;
}
/* Con el círculo relleno (hover, foco de teclado o abierto) el «?» pasa a
   blanco: antes heredaba el mismo color que el relleno y desaparecía. */
.help-btn:focus-visible { opacity: 1; background: currentColor; outline: 2px solid currentColor; outline-offset: 2px; }
.help-btn:hover .help-btn-label,
.help-btn:focus-visible .help-btn-label,
.help-btn[aria-expanded="true"] .help-btn-label {
  color: #fff;
}
.help-btn-label {
  pointer-events: none;
}
/* The popover is positioned: fixed via JS, hidden by default */
.help-popover {
  display: none;
  position: fixed;      /* escape any overflow:hidden ancestor */
  z-index: 9000;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border-md);
  border-radius: var(--r8);
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  padding: .85rem 1rem;
  font-size: .82rem; line-height: 1.55;
  color: var(--text-md);
  text-align: left;
  font-weight: 400;
  pointer-events: none; /* visible but non-interactive (just informational) */
}
/* Caret arrow (positioned by JS via --caret-x custom property) */
.help-popover::before {
  content: '';
  position: absolute;
  top: -7px;
  left: var(--caret-x, 50%);
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid var(--border-md);
}
.help-popover::after {
  content: '';
  position: absolute;
  top: -6px;
  left: var(--caret-x, 50%);
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--surface);
}
.help-popover.open {
  display: block;
}

/* ── Workflow summary panel ─────────────────────────────────── */
.workflow-panel {
  background: var(--accent-ll);
  border: 1px solid var(--accent-l);
  border-radius: var(--r12);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.workflow-panel-title {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--accent-d);
  margin: 0 0 .75rem;
}
.workflow-steps {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; margin: 0; padding: 0;
}
.workflow-step {
  display: flex; align-items: center; gap: .4rem;
  padding: .35rem .65rem;
  border-radius: var(--r8);
  font-size: .8rem; font-weight: 500;
  border: 1.5px solid transparent;
}
.workflow-step.step-done {
  background: var(--success-ll); border-color: var(--success-bd);
  color: var(--success-text);
}
.workflow-step.step-active {
  background: var(--accent-l); border-color: var(--accent);
  color: var(--accent-dk); font-weight: 700;
}
.workflow-step.step-pending {
  background: var(--surface); border-color: var(--border);
  color: var(--text-sm);
}
.workflow-step svg { flex-shrink: 0; }

/* ── FAQ / Help page ────────────────────────────────────────── */
.help-page { max-width: 760px; margin: 0 auto; padding: 2rem 1.5rem; }
.help-page h1 {
  font-size: 1.6rem; font-weight: 800; color: var(--text);
  margin: 0 0 .5rem;
}
.help-page .help-intro {
  font-size: .95rem; color: var(--text-md); margin: 0 0 2rem;
}
.help-section { margin-bottom: 2.5rem; }
.help-section h2 {
  font-size: 1rem; font-weight: 700; color: var(--accent-d);
  border-bottom: 2px solid var(--accent-l);
  padding-bottom: .4rem; margin: 0 0 1rem;
}
.faq-item { margin-bottom: 1.25rem; }
.faq-q {
  font-size: .925rem; font-weight: 600; color: var(--text);
  margin: 0 0 .35rem;
}
.faq-a {
  font-size: .875rem; color: var(--text-md); line-height: 1.6;
  margin: 0;
}
.faq-a a { color: var(--accent); }
.faq-a code {
  font-family: var(--font-mono); font-size: .82em;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px;
}

/* ── ACE by DAISY guide (export page) ───────────────────────── */
.ace-guide-section { margin-top: 1.5rem; }
.ace-guide-note {
  display: flex; align-items: flex-start; gap: .4rem;
  font-size: .875rem; color: var(--text-md);
  background: var(--bg); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px; padding: .6rem .85rem;
  margin: .75rem 0 1.25rem; line-height: 1.5;
}
.ace-guide-steps {
  padding-left: 1.4rem; margin: 0 0 .5rem;
  display: flex; flex-direction: column; gap: .9rem;
}
.ace-guide-steps li { font-size: .925rem; line-height: 1.6; }
.ace-guide-steps li p { margin: 0 0 .5rem; }
.ace-dl-buttons {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem;
}
.ace-dl-btn {
  font-size: .85rem; padding: .35rem .8rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); color: var(--text);
  text-decoration: none; transition: border-color .15s, background .15s;
}
.ace-dl-btn:hover {
  border-color: var(--accent); background: var(--accent-l);
}
.ace-link {
  color: var(--accent); text-decoration: none; font-size: .85rem;
}
.ace-link:hover { text-decoration: underline; }

/* ── ACE limitations collapsible (export page) ──────────────── */
.ace-limits-details {
  margin-top: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.ace-limits-details summary {
  cursor: pointer;
  padding: .65rem 1rem;
  font-size: .875rem; font-weight: 600;
  color: var(--text-md);
  background: var(--bg);
  list-style: none;
  display: flex; align-items: center; gap: .4rem;
  user-select: none;
}
.ace-limits-details summary::-webkit-details-marker { display: none; }
.ace-limits-details summary::before {
  content: '▶';
  font-size: .7em;
  transition: transform .2s;
  display: inline-block;
}
.ace-limits-details[open] summary::before { transform: rotate(90deg); }
.ace-limits-details[open] summary {
  border-bottom: 1px solid var(--border);
}
.ace-limits-body {
  padding: .85rem 1rem 1rem;
  font-size: .875rem; color: var(--text-md); line-height: 1.6;
}
.ace-limits-body p { margin: 0 0 .6rem; }
.ace-limits-body ul {
  margin: .5rem 0 .75rem 1.2rem;
  display: flex; flex-direction: column; gap: .4rem;
}
.ace-limits-footer {
  margin-top: .75rem !important;
  padding-top: .65rem;
  border-top: 1px solid var(--border);
  font-size: .825rem !important;
  color: var(--text-md);
  font-style: italic;
}

/* ── Lang review page ──────────────────────────────────────── */
.lang-review-list {
  display: flex; flex-direction: column; gap: 1rem;
  margin: 1.25rem 0;
}
.lang-review-row {
  border: 1px solid var(--border);
  border-radius: var(--r8);
  background: var(--surface);
  padding: .9rem 1rem;
}
.lang-review-header {
  display: flex; align-items: center; gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .55rem;
}
.lang-review-badge {
  font-size: .9rem; font-weight: 700;
}
.lang-review-count {
  font-size: .82rem; color: var(--text-md);
}
.lang-toggle-samples {
  background: none; border: 1px solid var(--border);
  border-radius: var(--r4); padding: .2rem .5rem;
  font-size: .78rem; color: var(--text-md);
  cursor: pointer; display: inline-flex; align-items: center; gap: .3rem;
}
.lang-toggle-samples:hover { background: var(--slate-100); }
.lang-samples { margin: .5rem 0 .75rem; }
.lang-sample-list {
  margin: 0; padding: .6rem .75rem;
  background: var(--slate-50); border-radius: var(--r4);
  border: 1px solid var(--border); list-style: none;
  display: flex; flex-direction: column; gap: .3rem;
}
.lang-sample-item {
  font-size: .82rem; color: var(--text-md);
  font-style: italic;
  border-left: 3px solid var(--accent-l); padding-left: .5rem;
}
.lang-review-actions {
  display: flex; gap: 1.25rem; flex-wrap: wrap;
  margin-top: .4rem;
}
.lang-radio-label {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .875rem; cursor: pointer;
}
.lang-radio-remove { color: #dc2626; }
.lang-radio-keep   { color: var(--text-md); }
.lang-review-footer {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.review-tip-box {
  display: flex; align-items: flex-start; gap: .6rem;
  background: var(--accent-ll); border: 1px solid var(--accent-l);
  border-radius: var(--r8); padding: .75rem 1rem;
  font-size: .875rem; color: #1e3a5f; margin-bottom: 1rem;
}

/* ── Export accordions ──────────────────────────────────────── */
.export-accordion {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r10);
  box-shadow: var(--sh-xs);
  margin-bottom: .75rem;
  overflow: hidden;
}

.export-accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1.1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  gap: .75rem;
  background: var(--surface);
  transition: background .15s;
}
.export-accordion-head::-webkit-details-marker { display: none; }
.export-accordion-head:hover { background: var(--slate-50); }

.export-accordion-label {
  display: flex;
  align-items: center;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}

.export-accordion-chevron {
  width: 1.1em; height: 1.1em;
  color: var(--text-sm);
  flex-shrink: 0;
  transition: transform .22s ease;
}
details[open] > .export-accordion-head .export-accordion-chevron {
  transform: rotate(180deg);
}

.export-accordion-body {
  padding: .9rem 1.1rem 1.1rem;
  border-top: 1px solid var(--border);
}
.export-accordion-intro { margin-bottom: 1rem; }

/* Sub-secciones dentro de un acordeón */
.exp-sub { margin-bottom: 1.4rem; }
.exp-sub:last-child { margin-bottom: 0; }
.exp-sub + .exp-sub {
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.exp-sub-title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--slate-700);
  margin: 0 0 .5rem;
  display: flex;
  align-items: center;
}

/* ── Acordeón de descarga (variante verde) ──────────────────── */
.export-accordion--download {
  border-color: var(--success-bd);
  background: linear-gradient(135deg, var(--success-ll) 0%, #f0fdf8 60%, #e6faf2 100%);
  box-shadow: 0 4px 24px rgba(22,163,74,.10), 0 1px 4px rgba(22,163,74,.07);
}
.export-accordion--download .export-accordion-head {
  background: transparent;
}
.export-accordion--download .export-accordion-head:hover {
  background: rgba(22,163,74,.06);
}
.export-accordion--download .export-accordion-label {
  color: var(--success-text);
}
.export-accordion--download .export-accordion-chevron {
  color: #4ade80;
}
.export-accordion--download .export-accordion-body {
  border-top-color: var(--success-bd);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 1.5rem;
  padding-bottom: 1.75rem;
}
.export-accordion--download p {
  font-size: .925rem;
  color: #166534cc;
  margin: 0 auto .1rem;
  max-width: 38rem;
  line-height: 1.6;
}
.export-accordion--download .btn-success {
  margin-top: 1.25rem;
  margin-bottom: .25rem;
  padding: .95rem 2.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
  box-shadow: 0 4px 16px rgba(22,163,74,.30);
  transition: transform .15s, box-shadow .15s;
}
.export-accordion--download .btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(22,163,74,.38);
}
.export-accordion--download .export-session-info {
  display: flex;
  text-align: left;
  margin-top: .85rem;
  max-width: 38rem;
}

/* Texto introductorio de la página de exportación */
.export-page-intro {
  font-size: .9rem;
  color: var(--slate-500);
  line-height: 1.65;
  margin-bottom: 1.25rem;
  max-width: 54rem;
}

/* ── ONIX section ───────────────────────────────────────────── */
.onix-section h3 { margin-bottom: .5rem; }

/* Aviso ONIX parcial */
.onix-partial-notice {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  background: var(--amber-50, #fffbeb);
  border: 1px solid var(--amber-200, #fde68a);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-size: .85rem;
  color: var(--slate-700);
  margin-bottom: 1.25rem;
  line-height: 1.5;
}
.onix-partial-notice i[data-lucide] {
  color: var(--amber-600, #d97706);
  margin-top: .1em;
}

/* Preview de códigos a11y */
.onix-a11y-preview {
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: var(--r8);
  padding: .85rem 1rem;
  margin-bottom: 1.1rem;
}
.onix-a11y-preview h4 {
  font-size: .85rem; font-weight: 700;
  color: var(--slate-700); margin: 0 0 .25rem;
}

/* Badges de conformidad */
.onix-conforms-ok {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 600;
  color: var(--success-text);
  background: var(--success-ll); border: 1px solid var(--success-bd);
  border-radius: var(--r-full);
  padding: .2em .75em; margin: .45rem 0 .75rem; line-height: 1;
}
.onix-conforms-warn {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 600;
  color: var(--warn-text);
  background: var(--warn-ll); border: 1px solid var(--warn-bd);
  border-radius: var(--r-full);
  padding: .2em .75em; margin: .45rem 0 .75rem; line-height: 1;
}

/* Tabla de códigos codelist 196 */
.onix-codes-table {
  width: 100%; border-collapse: collapse;
  font-size: .82rem; margin-top: .1rem;
}
.onix-codes-table thead tr {
  background: var(--slate-100);
}
.onix-codes-table th {
  text-align: left; padding: .35rem .65rem;
  font-weight: 600; color: var(--slate-600);
  border-bottom: 1px solid var(--border-md);
  font-size: .78rem; letter-spacing: .02em; text-transform: uppercase;
}
.onix-codes-table td {
  padding: .38rem .65rem;
  border-bottom: 1px solid var(--border);
  color: var(--slate-700); vertical-align: top;
}
.onix-codes-table tbody tr:last-child td { border-bottom: none; }
.onix-codes-table tbody tr:hover td { background: var(--accent-ll); }

/* Columna de código: monoespaciado + badge indigo */
.onix-code {
  font-family: var(--font-mono); font-size: .8rem; font-weight: 700;
  color: var(--accent-dk);
  background: var(--accent-l); border-radius: var(--r4);
  padding: .1em .45em; white-space: nowrap;
}

/* Columna fuente schema.org: texto tenue */
.onix-source {
  font-family: var(--font-mono); font-size: .76rem;
  color: var(--text-sm); white-space: nowrap;
}

/* Inputs/textarea en la sección ONIX — ancho completo */
.onix-section .val-field-row input,
.onix-section .val-field-row textarea { max-width: 100%; }

/* Bloque de materias */
.onix-subjects-block { margin-top: .75rem; }
.onix-subjects-note {
  font-size: .82rem; color: var(--slate-500);
  background: var(--warn-ll); border: 1px solid var(--warn-bd);
  border-radius: var(--r6); padding: .5rem .75rem;
  margin-bottom: .75rem; display: flex; align-items: center; gap: .35rem;
}

/* Enlace de referencia estándar (Thema, BISAC) junto al label */
.onix-ref-link {
  font-size: .75rem; font-weight: 400; color: var(--accent);
  text-decoration: none; margin-left: .35rem;
  white-space: nowrap;
}
.onix-ref-link:hover { text-decoration: underline; }

/* Área de descarga al pie de la sección */
.onix-download-area {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
}
.onix-download-area .val-hint { margin-bottom: 0; }

/* ── Acordeón ONIX (índigo) ─────────────────────────────────── */
.export-accordion--onix {
  border-color: var(--accent-l);
  background: var(--accent-ll);
}
.export-accordion--onix .export-accordion-head { background: transparent; }
.export-accordion--onix .export-accordion-head:hover { background: rgba(99,102,241,.06); }
.export-accordion--onix .export-accordion-label { color: var(--accent-dk); }
.export-accordion--onix .export-accordion-chevron { color: var(--accent); }
.export-accordion--onix .export-accordion-body { border-top-color: var(--accent-l); }

/* ── Acordeón Informe/Verificación (ámbar) ──────────────────── */
.export-accordion--validation {
  border-color: var(--warn-bd);
  background: var(--warn-ll);
}
.export-accordion--validation .export-accordion-head { background: transparent; }
.export-accordion--validation .export-accordion-head:hover { background: rgba(217,119,6,.06); }
.export-accordion--validation .export-accordion-label { color: var(--warn-dark); }
.export-accordion--validation .export-accordion-chevron { color: var(--warn); }
.export-accordion--validation .export-accordion-body { border-top-color: var(--warn-bd); }

/* Botones de descarga secundaria (ONIX, Informe): bloque, izquierda */
.exp-sub .btn { display: inline-flex; margin-top: .75rem; }

/* Tamaño de texto uniforme en sub-secciones */
.exp-sub p { font-size: .85rem; line-height: 1.6; }

/* ── Overrides ámbar para acordeón de verificación ──────────── */
.export-accordion--validation .ace-guide-note {
  color: var(--warn-dark);
  background: rgba(253,230,138,.35);
  border-color: var(--warn-bd);
  border-left-color: var(--warn);
}
.export-accordion--validation .ace-limits-details {
  border-color: var(--warn-bd);
}
.export-accordion--validation .ace-limits-details summary {
  background: rgba(253,230,138,.3);
  color: var(--warn-dark);
  border-bottom-color: var(--warn-bd);
}
.export-accordion--validation .ace-limits-details[open] summary {
  border-bottom-color: var(--warn-bd);
}
.export-accordion--validation .ace-limits-body {
  color: var(--warn-text);
}
.export-accordion--validation .ace-limits-footer {
  color: var(--warn-text);
  border-top-color: var(--warn-bd);
}

@media (max-width: 600px) {
  .onix-codes-table th:last-child,
  .onix-codes-table td:last-child { display: none; }  /* oculta col fuente en móvil */
  .onix-download-area { flex-direction: column; align-items: flex-start; }
}

/* ── ONIX AI block ──────────────────────────────────────────── */
.onix-ai-block {
  margin-top: 1.25rem;
  border: 1.5px solid var(--accent-l);
  border-radius: var(--r10);
  background: var(--accent-ll);
  overflow: hidden;
}
.onix-ai-summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1rem; cursor: pointer; list-style: none;
  font-size: .9rem; font-weight: 700; color: var(--accent-dk);
  user-select: none;
}
.onix-ai-summary::-webkit-details-marker { display: none; }
.onix-ai-summary:hover { background: rgba(99,102,241,.06); }
details[open] > .onix-ai-summary .export-accordion-chevron { transform: rotate(180deg); }

.onix-ai-body {
  padding: 1rem 1.1rem 1.25rem;
  border-top: 1px solid var(--accent-l);
  display: flex; flex-direction: column; gap: 1rem;
}

.onix-ai-section-title {
  font-size: .82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--accent-dk);
  margin: 0 0 .5rem; display: flex; align-items: center;
}

/* Propuesta de valor */
.onix-ai-value { background: rgba(255,255,255,.65); border-radius: var(--r8); padding: .75rem .9rem; }
.onix-ai-value-text { font-size: .875rem; line-height: 1.65; color: var(--slate-700); margin: 0; }

/* Transparencia */
.onix-ai-transparency { background: rgba(255,255,255,.65); border-radius: var(--r8); padding: .75rem .9rem; }
.onix-ai-loading { font-size: .85rem; color: var(--slate-500); display: flex; align-items: center; gap: .35rem; }
.onix-ai-send-table { font-size: .85rem; border-collapse: collapse; width: 100%; }
.onix-ai-send-table td { padding: .2rem .4rem .2rem 0; vertical-align: top; }
.onix-ai-send-label { color: var(--slate-500); white-space: nowrap; padding-right: .75rem; font-weight: 600; }
.onix-ai-text-pre {
  margin: .5rem 0 0; padding: .6rem .75rem;
  background: var(--slate-50); border: 1px solid var(--border);
  border-radius: var(--r6); font-size: .76rem; color: var(--slate-600);
  white-space: pre-wrap; word-break: break-word; max-height: 10rem; overflow-y: auto;
}

/* Privacidad */
.onix-ai-privacy { background: rgba(255,255,255,.65); border-radius: var(--r8); padding: .75rem .9rem; }
.onix-ai-privacy-text {
  font-size: .82rem; line-height: 1.65; color: var(--slate-600); margin: 0;
}
.onix-ai-privacy-text a { color: var(--accent); }

/* Consentimiento */
.onix-ai-consent-area { padding: .25rem 0; }
.onix-ai-consent-label {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .85rem; color: var(--slate-700); cursor: pointer; line-height: 1.5;
}
.onix-ai-consent-label input[type="checkbox"] { margin-top: .15rem; flex-shrink: 0; }

/* Resultados */
.onix-ai-divider { border: none; border-top: 1px solid var(--accent-l); margin: .5rem 0 1rem; }
.onix-ai-result-block {
  background: rgba(255,255,255,.8); border-radius: var(--r8);
  padding: .75rem .9rem; margin-bottom: .5rem;
}
.onix-ai-result-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: .5rem;
}
.onix-ai-col-label {
  display: block; font-size: .8rem; font-weight: 700;
  color: var(--slate-600); margin-bottom: .35rem; text-transform: uppercase; letter-spacing: .03em;
}
.onix-ai-current-text {
  font-size: .825rem; color: var(--slate-500); line-height: 1.55;
  padding: .45rem .6rem; background: var(--slate-50);
  border: 1px solid var(--border); border-radius: var(--r6); min-height: 4rem;
  margin: 0;
}
.onix-ai-textarea {
  width: 100%; padding: .45rem .6rem;
  border: 1px solid var(--border-md); border-radius: var(--r6);
  font-size: .825rem; font-family: var(--font); line-height: 1.55; resize: vertical;
}
.onix-ai-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }

/* Chips de keywords */
.onix-ai-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.onix-ai-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; background: var(--accent-l); color: var(--accent-dk);
  border-radius: var(--r-full); padding: .2em .65em;
}
.onix-ai-chip button {
  background: none; border: none; color: var(--accent-dk); cursor: pointer;
  font-size: .9em; line-height: 1; padding: 0; opacity: .7;
}
.onix-ai-chip button:hover { opacity: 1; }

/* Thema items */
.onix-ai-thema-list { display: flex; flex-direction: column; gap: .35rem; margin-top: .35rem; }
.onix-ai-thema-item {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem;
  font-size: .85rem; padding: .4rem .6rem;
  background: var(--slate-50); border: 1px solid var(--border);
  border-radius: var(--r6); cursor: pointer; line-height: 1.4;
}
.onix-ai-thema-item:hover { background: var(--accent-ll); border-color: var(--accent-l); }
.onix-ai-thema-code {
  font-family: var(--font-mono); font-weight: 700; font-size: .82rem;
  color: var(--accent-dk); background: var(--accent-l);
  border-radius: var(--r4); padding: .05em .4em;
}
.onix-ai-thema-label { color: var(--slate-700); }
.onix-ai-thema-confidence { font-size: .75rem; color: var(--text-sm); }
.onix-ai-verified {
  font-size: .72rem; color: var(--success-text);
  background: var(--success-ll); border: 1px solid var(--success-bd);
  border-radius: var(--r-full); padding: .05em .5em; margin-left: auto;
}
.onix-ai-thema-reason { font-size: .78rem; color: var(--slate-500); width: 100%; }
.confidence-high   .onix-ai-thema-code { background: #dcfce7; color: #166534; }
.confidence-low    .onix-ai-thema-item { opacity: .8; }

/* BISAC */
.onix-ai-bisac-text {
  font-size: .875rem; color: var(--slate-600);
  background: var(--slate-50); border: 1px solid var(--border);
  border-radius: var(--r6); padding: .45rem .6rem; margin: .25rem 0 0;
}

/* Sin datos Thema */
.onix-ai-nodata {
  margin-top: .75rem; padding: .6rem .85rem; font-size: .82rem;
  color: var(--warn-text); background: var(--warn-ll);
  border: 1px solid var(--warn-bd); border-radius: var(--r8);
}

@media (max-width: 640px) {
  .onix-ai-result-cols { grid-template-columns: 1fr; }
}

/* ── ONIX N1 · formulario de metadatos y Zona B (Fases 3–7) ───────────────── */
.onixf-page { max-width: 760px; }
.onixf-group { border: 1px solid var(--border, #dcdce3); border-radius: 10px;
  padding: 1rem 1.1rem; margin: 1rem 0; }
.onixf-group > legend { font-weight: 600; padding: 0 .4rem; }
.onixf-ro { display: flex; gap: .6rem; padding: .2rem 0; font-size: .92rem; }
.onixf-ro-label { min-width: 130px; color: var(--slate-500, #667085); }
.onixf-ro-val { flex: 1; word-break: break-word; }
.onixf-field { margin: .55rem 0; }
.onixf-field label { display: block; font-size: .9rem; margin-bottom: .2rem; }
.onixf-field input, .onixf-field textarea { width: 100%; box-sizing: border-box; }
.onixf-ai-sug { display: flex; align-items: center; gap: .5rem;
  font-size: .9rem; margin: .3rem 0; }

/* ── ONIX N1 · desplegables, sugerencias IA y filas de solo lectura ───────── */
.val-field-row select {
  padding: .42rem .65rem; border: 1px solid var(--border-md); border-radius: var(--r6);
  font-size: .875rem; width: 100%; max-width: 480px; font-family: var(--font);
  background: #fff; transition: border-color .15s;
}
.val-field-row select:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.btn-small { padding: .2rem .6rem; font-size: .78rem; }
.om-ai-slot:empty { display: none; }
.om-ai-sug {
  display: flex; gap: .5rem; align-items: flex-start; max-width: 640px;
  background: var(--slate-50); border-left: 3px solid #c7d2fe;
  border-radius: 0 var(--r6) var(--r6) 0; padding: .4rem .6rem; margin: .3rem 0 0;
  font-size: .82rem;
}
.om-ai-sug-txt { flex: 1; color: var(--slate-600); white-space: pre-wrap; }
.onixf-ro { display: flex; gap: .6rem; padding: .22rem 0; font-size: .9rem;
  border-bottom: 1px dashed var(--border, #e5e7eb); }
.onixf-ro:last-child { border-bottom: none; }
.onixf-ro-label { min-width: 150px; color: var(--slate-500); font-weight: 600; }
.onixf-ro-val { flex: 1; word-break: break-word; }

/* ── ONIX N1 · campos precargados y rango de edad ─────────────────────────── */
.om-prefilled { background: var(--accent-l, #eef2ff); border-color: #c7d2fe !important; }
.om-age-range { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.om-age-range label { font-weight: 400; color: var(--slate-500); font-size: .82rem; margin: 0; }
.om-age-range input { max-width: 6rem; }
.om-age-range[hidden] { display: none; }
#om_age_preset { margin-bottom: .4rem; }
.om-url-invalid { display: block; color: var(--error, #b91c1c); font-weight: 600; margin-top: .3rem; }
/* Kit GEO: direcciones web y estado del kit */
.onixf-block--urls { background: var(--warn-ll, #fffbeb); border-color: var(--warn-l, #fde68a); }
.geo-status { border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 1rem 1.2rem; margin-top: 1rem; background: #fff; }
.geo-status-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.geo-st { display: grid; grid-template-columns: 1.4rem 1fr; gap: .4rem; font-size: .9rem; line-height: 1.45; }
.geo-st-mark { font-weight: 700; text-align: center; }
.geo-st--ok .geo-st-mark { color: #047857; }
.geo-st--ko .geo-st-mark { color: #b91c1c; }
.geo-st--opt .geo-st-mark { color: #64748b; }

/* ── /export · pestañas como tarjetas (rediseño 2026-10, criterio del portal) ──
   Cada pestaña es una tarjeta con icono, título, una línea de descripción y su
   estado en texto. La activa se rellena y apunta al panel con una flecha.     */
.exp-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: .85rem; margin: 1.25rem 0 0; padding: 0 0 1.1rem; border-bottom: 2px solid var(--accent-l); }
.exp-tab { position: relative; display: flex; gap: .9rem; align-items: flex-start; text-align: left;
  font: inherit; color: var(--text); background: var(--surface); cursor: pointer;
  border: 1px solid var(--border-md); border-radius: 14px; padding: 1rem 1.1rem;
  box-shadow: var(--sh-xs); transition: border-color .15s, background .15s, box-shadow .15s; }
.exp-tab:hover { border-color: var(--accent); background: var(--accent-ll); }
.exp-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.exp-tab.active { border: 2px solid var(--accent); background: var(--accent-ll); box-shadow: var(--sh-md);
  padding: calc(1rem - 1px) calc(1.1rem - 1px); }
.exp-tab.active::after { content: ""; position: absolute; left: 2.35rem; bottom: -1.62rem; width: 0; height: 0;
  border: 10px solid transparent; border-bottom-color: var(--accent); }
.exp-tab-icon { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--accent-ll); color: var(--accent-d); }
.exp-tab.active .exp-tab-icon { background: var(--accent); color: #fff; }
.exp-tab .exp-tab-icon i[data-lucide], .exp-tab .exp-tab-icon svg { width: 1.4rem; height: 1.4rem; margin: 0; }
.exp-tab-body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.exp-tab-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-weight: 700; font-size: 1.08rem; color: var(--slate-900); }
.exp-tab.active .exp-tab-title { color: var(--accent-dk); }
.exp-tab-desc { font-size: .88rem; line-height: 1.45; color: var(--text-md); }
.exp-tabpanel { padding-top: 1.25rem; }
.exp-tabpanel:focus { outline: none; }
.exp-tabpanel[hidden] { display: none; }

/* Etiqueta de estado (texto + color; nunca solo color). */
.exp-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 600;
  line-height: 1.2; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap;
  background: var(--slate-100); color: var(--slate-700); border: 1px solid var(--slate-200); }
.exp-badge--ok   { background: var(--success-ll); color: var(--success-text); border-color: var(--success-bd); }
.exp-badge--ok::before { content: "✓"; }
.exp-badge--wait { background: var(--warn-ll); color: var(--warn-dark); border-color: var(--warn-bd); }
.exp-badge--wait::before { content: "●"; font-size: .8em; }
.exp-badge--ai   { background: #f5f3ff; color: #5b21b6; border-color: #ddd6fe; }
.export-accordion-label .exp-badge { margin-left: .5rem; vertical-align: .1em; }

/* ── /export · ayuda, intros de pestaña e iconos ─────────────────────────── */
.exp-help { display: flex; gap: .5rem; align-items: flex-start; background: var(--slate-50);
  border: 1px solid var(--border, #e5e7eb); border-radius: var(--r8, 10px);
  padding: .7rem .9rem; margin: .5rem 0 1rem; font-size: .9rem; color: var(--slate-600); }
.exp-help i { flex-shrink: 0; color: var(--accent, #4f46e5); }
.exp-tab-intro { margin: .25rem 0 1.1rem; }
.exp-tab-intro > p { margin: .25rem 0; }
.exp-section-title { display: flex; align-items: center; font-size: 1.15rem; margin: .2rem 0 .5rem; }
.exp-tab i[data-lucide] { width: 1em; height: 1em; vertical-align: -.12em; margin-right: .35em; }

/* ── /export · post-it de ayuda y bloques del formulario N1 ───────────────── */
.exp-help { background: #fffbeb; border: 1px solid #fde68a; color: #713f12; }
.exp-help i { color: #d97706; }

.onixf-block { border: 1px solid var(--border, #e5e7eb); border-radius: 12px;
  padding: 1.15rem 1.3rem 1.35rem; margin: 1.35rem 0; background: #fff; }
.onixf-block > .exp-sub-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 .6rem;
  display: flex; align-items: center; gap: .45rem; }
.onixf-block--pre,
.onixf-block--a11y { background: #f0fdf4; border-color: #bbf7d0; }   /* verde: ya OK / del EPUB */
.onixf-block--req  { background: #ffffff; border-color: #c7d2fe; }   /* imprescindible */
.onixf-block--ai   { background: #f5f3ff; border-color: #ddd6fe; }   /* sugerido por IA */
.onixf-block--opt  { background: var(--slate-50, #f8fafc); border-color: #e5e7eb; }
.onixf-block--pre .onixf-ro,
.onixf-block--a11y .onixf-ro { border-bottom-color: #bbf7d0; }

/* ── Kit GEO · desplegable "¿Qué es?" ─────────────────────────────────────── */
.exp-geo-details { margin: .4rem 0 0; border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px; background: #fff; padding: 0 .9rem; }
.exp-geo-details > summary { cursor: pointer; font-weight: 600; padding: .7rem 0;
  color: var(--accent, #4f46e5); list-style: none; }
.exp-geo-details > summary::-webkit-details-marker { display: none; }
.exp-geo-details[open] > summary { border-bottom: 1px solid var(--border, #e5e7eb); }
.exp-geo-body { padding: .6rem 0 .9rem; }
.exp-geo-body > p { margin: .5rem 0; line-height: 1.55; }
.exp-geo-body > h4 { margin: .9rem 0 .4rem; font-size: 1rem; }
.exp-geo-items { list-style: none; margin: 0; padding: 0; }
.exp-geo-items li { display: flex; gap: .55rem; align-items: flex-start;
  padding: .4rem 0; border-bottom: 1px dashed var(--border, #e5e7eb); font-size: .9rem; }
.exp-geo-items li:last-child { border-bottom: none; }
.exp-geo-items i { flex-shrink: 0; width: 1.05em; height: 1.05em; margin-top: .15em; color: var(--accent, #4f46e5); }

/* ── Diagnóstico ONIX: mensajes de ayuda por campo/bloque ─────────────── */
.onix-issues { margin: 1rem 0; display: flex; flex-direction: column; gap: .6rem; }
.onix-issues-intro { margin: 0 0 .2rem; color: #475569; font-size: .95rem; }
.onix-issue { border: 1px solid #e2e8f0; border-left-width: 4px; border-radius: 8px;
  padding: .7rem .9rem; background: #f8fafc; }
.onix-issue--error { border-left-color: #dc2626; background: #fef2f2; }
.onix-issue--warn  { border-left-color: #d97706; background: #fffbeb; }
.onix-issue-h { display: flex; align-items: center; gap: .45rem; font-size: 1rem; }
.onix-issue-h i { width: 1.05em; height: 1.05em; }
.onix-issue--error .onix-issue-h i { color: #dc2626; }
.onix-issue--warn  .onix-issue-h i { color: #d97706; }
.onix-issue-badge { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 700; padding: .1rem .4rem; border-radius: 999px; color: #fff; }
.onix-issue--error .onix-issue-badge { background: #dc2626; }
.onix-issue--warn  .onix-issue-badge { background: #d97706; }
.onix-issue-c, .onix-issue-fx { margin: .35rem 0 0; font-size: .92rem; line-height: 1.45; color: #334155; }
.onix-issue-lbl { font-weight: 700; color: #1e293b; }
.onix-issue-fix { display: inline-block; margin-left: .3rem; font-weight: 600;
  color: #4f46e5; text-decoration: none; white-space: nowrap; }
.onix-issue-fix:hover { text-decoration: underline; }

/* ── Botón "Cargar datos del libro" (tab comercial) ──────────────────── */
.onixf-loadbook { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 1rem; }
.onixf-loadbook-hint { flex: 1 1 240px; min-width: 200px; }

/* ── Cubo IA comercial: transparencia + copyright + consentimiento ────── */
.om-ai-transparency, .om-ai-privacy { margin: .6rem 0; padding: .6rem .75rem;
  background: #faf5ff; border: 1px solid #ede9fe; border-radius: 8px; }
.om-ai-subtitle { margin: 0 0 .35rem; font-size: .85rem; font-weight: 700; color: var(--slate-700); }
.om-ai-transparency .onix-ai-send-table { width: 100%; font-size: .85rem; border-collapse: collapse; }
.om-ai-transparency .onix-ai-send-label { color: var(--slate-500); padding: .15rem .5rem .15rem 0; vertical-align: top; white-space: nowrap; }


/* ── Editor de idiomas (multiidioma) ─────────────────────────── */
.multilang-order-note { font-size:.8rem; color:var(--text-md); margin:.25rem 0 .55rem; }
.ml-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:.4rem 0; }
.ml-chip { display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .55rem; border:1px solid var(--border-md); border-radius:999px; background:var(--surface); font-size:.8rem; }
.ml-chip-primary { border-color:var(--accent); background:var(--accent-l); }
.ml-chip-code { font-family:var(--font-mono); font-weight:600; }
.ml-chip-badge { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent-dk); background:#fff; border-radius:999px; padding:.05rem .4rem; }
.ml-chip-mk { border:none; background:transparent; color:var(--accent-d); cursor:pointer; font-size:.72rem; text-decoration:underline; padding:0; }
.ml-chip-x { border:none; background:transparent; color:var(--text-sm); cursor:pointer; font-size:1rem; line-height:1; padding:0 .1rem; }
.ml-chip-x:hover { color:var(--error); }
.ml-add-row { display:flex; gap:.4rem; align-items:center; margin-top:.3rem; }
.multilang-msg { font-size:.8rem; color:var(--error); }
.input-error { border-color:var(--error) !important; }
/* ── Panel idioma por documento (Fase 2b) ────────────────────── */
.doclang-panel .dl-group { margin:.4rem 0; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--surface); }
.doclang-panel .dl-group-h { cursor:pointer; padding:.45rem .7rem; font-weight:600; font-size:.85rem; list-style:none; user-select:none; }
.doclang-panel .dl-group-h::-webkit-details-marker { display:none; }
.dl-group-title code { background:var(--accent-l); color:var(--accent-dk); border-radius:4px; padding:.05rem .35rem; }
.dl-rows { border-top:1px solid var(--border); }
.dl-row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; padding:.4rem .7rem; border-bottom:1px solid var(--slate-100); font-size:.8rem; }
.dl-row:last-child { border-bottom:none; }
.dl-doc { flex:1; min-width:0; font-family:var(--font-mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-cur { color:var(--text-sm); white-space:nowrap; }
.dl-sel { padding:.15rem .4rem; border:1px solid var(--border-md); border-radius:6px; background:var(--surface); font-size:.8rem; }
.dl-done { font-size:.8rem; color:var(--text-sm); margin:.3rem 0; }

/* ── Bloque Idioma: línea del idioma principal ───────────────── */
.lang-primary-line { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; padding:.5rem .2rem .7rem; font-size:.85rem; }
.rsub-lang-body { padding: .3rem .75rem .75rem; display: block; }
.rsub-lang-code {
  font-family: var(--font-mono); font-size: .75rem; font-weight: 600;
  background: var(--surface); border: 1px solid #bbf7d0; border-radius: 4px; padding: .05rem .35rem;
}

/* ── Licencias: subida grande temporal (EPUB > 50 MB) ─────────── */
.lic-big-note { margin-top: .3rem; font-size: .75rem; color: var(--warn-text); }

/* ── Ayuda de las secciones del informe, fuera del <summary> ───── */
/* Cabecera: [icono + título] ··· [contador] [?] [flecha]. El «?» no puede ir
   dentro del <summary> (control dentro de control, WCAG 4.1.2): se coloca
   encima y el contador le deja sitio. */
.report-section-header > .section-count { margin-left: auto; }
.rsec-wrap > details > .report-section-header > .section-count { margin-right: 2.7rem; }
.rsec-heading svg, .rsec-heading i[data-lucide] { width: 20px; height: 20px; }
.rsec-wrap { position: relative; }
.rsec-wrap > .help-btn {
  position: absolute; top: 1.1rem; right: 2.75rem;   /* entre el contador y la flecha */
  opacity: 1;
}
.report-manual-ok {
  display: flex; align-items: center; gap: .5rem; margin: 0;
  padding: .7rem .9rem; border-radius: var(--r8);
  background: var(--success-ll); color: var(--success-text); font-weight: 600;
}
.report-manual-ok svg, .report-manual-ok i[data-lucide] { width: 18px; height: 18px; }
.rsec-wrap--manual > .help-btn { color: #7b341e; }
.rsec-wrap--fixed  > .help-btn { color: var(--success-text); }

/* ── Subsecciones del informe: ayuda y botón fuera del <summary> ──── */
/* [▸ icono título] ··· [contadores] [?] [Iniciar revisión]. El JS del informe
   mide el ancho real de .rsub-actions (--rsub-act-w) y la altura de la
   cabecera (--rsub-head-h); sin JS se usan estos valores por defecto. */
.rsub-wrap { position: relative; }
.rsub-wrap > details > .review-subsection-header { padding-right: var(--rsub-act-w, 2.6rem); }
.rsub-wrap--btn > details > .review-subsection-header { padding-right: var(--rsub-act-w, 17rem); }
.rsub-actions {
  position: absolute; top: 0; right: .9rem; height: var(--rsub-head-h, 2.75rem);
  display: flex; align-items: center; gap: .5rem;
}
.rsub-wrap--images > .rsub-actions { color: #92400e; }
.rsub-wrap--tables > .rsub-actions { color: #1e40af; }
.rsub-wrap--lang   > .rsub-actions { color: #14532d; }
.rsub-actions .help-btn { opacity: 1; }

/* ── Informe en móvil: las cabeceras de las subsecciones bajan de línea ── */
@media (max-width: 600px) {
  .review-subsection-header { flex-wrap: wrap; }
  .review-subsection-header .rsub-right { flex-wrap: wrap; margin-left: auto; }
  /* La ayuda y el botón pasan a una fila propia, encima de la cabecera */
  .rsub-wrap { display: flex; flex-direction: column; }
  .rsub-wrap > .rsub-actions { position: static; order: -1; height: auto; justify-content: flex-end; padding: 0 0 .35rem; }
  .rsub-wrap > details > .review-subsection-header,
  .rsub-wrap--btn > details > .review-subsection-header { padding-right: .9rem; }
}

/* Idioma principal del libro: origen del valor y enlace desde las alertas */
.lang-primary-label { font-weight: 600; }
.lang-origin { font-size: .75rem; color: var(--slate-500); }
.issue-goto  { white-space: nowrap; font-weight: 600; }
@keyframes gotoFlash { 0%, 60% { box-shadow: 0 0 0 3px var(--accent, #4f46e5); } 100% { box-shadow: 0 0 0 0 transparent; } }
.goto-flash { animation: gotoFlash 2.2s ease-out; border-radius: var(--r6, 6px); }
@media (prefers-reduced-motion: reduce) { .goto-flash { animation: none; outline: 3px solid var(--accent, #4f46e5); } }


/* ── /export · pestaña «Metadatos comerciales» (rediseño 2026-10) ─────────── */
.com-intro > p { font-size: .95rem; line-height: 1.55; color: var(--slate-700); }
/* Recorrido en tres pasos */
.com-road { list-style: none; margin: 1.1rem 0 1.25rem; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: .6rem; counter-reset: none; }
.com-road-step { display: flex; gap: .65rem; align-items: flex-start; padding: .7rem .85rem;
  border: 1px solid var(--border); border-radius: 12px; background: var(--slate-50); font-size: .9rem; }
.com-road-step strong { display: block; color: var(--slate-900); }
.com-road-d { display: block; color: var(--text-md); font-size: .82rem; line-height: 1.4; margin-top: .1rem; }
.com-road-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem;
  border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: .85rem; }
.com-road-step.is-done .com-road-n { background: var(--success); }
/* Datos del EPUB: ficha compacta */
.com-facts { border: 1px solid var(--success-bd); background: var(--success-ll); border-radius: 12px;
  padding: .9rem 1.1rem 1rem; margin: 0 0 1rem; }
.com-facts-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.com-facts-head h3 { margin: 0; font-size: 1rem; color: var(--success-text); }
.com-facts-edit { font-size: .85rem; font-weight: 600; color: var(--accent-d); }
.com-facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: .5rem; margin: 0; }
.com-fact { background: var(--surface); border: 1px solid var(--success-bd); border-radius: 8px; padding: .45rem .65rem; min-width: 0; }
.com-fact dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-600); font-weight: 600; }
.com-fact dd { margin: .15rem 0 0; font-size: .9rem; overflow-wrap: anywhere; }
.com-facts-note { margin: .6rem 0 0; }
/* Pasos (reutilizan .export-accordion) */
.com-step { scroll-margin-top: 1rem; }
.com-step-desc { margin: 0 0 1rem; font-size: .9rem; }
.com-step--ai  { border-color: #ddd6fe; }
.com-step--ai > .export-accordion-head { background: #faf8ff; }
.com-step--opt > .export-accordion-head, .com-step--epub > .export-accordion-head { background: var(--slate-50); }
.com-step--epub { border-color: var(--success-bd); }
/* Grupos de campos en rejilla de 2 columnas */
.com-group { border: 0; border-top: 1px solid var(--border); margin: 0; padding: .9rem 0 .2rem; min-width: 0; }
.com-group:first-of-type { border-top: 0; padding-top: 0; }
.com-group > legend { float: left; width: 100%; padding: 0; margin: 0 0 .7rem; font-weight: 700; font-size: .95rem; color: var(--slate-800); }
.com-group > legend + * { clear: both; }
.com-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; align-items: start; }
@media (max-width: 640px) { .com-grid { grid-template-columns: 1fr; } }
.com-grid .val-field-row { margin-bottom: .95rem; min-width: 0; }
.com-grid .val-field-row input, .com-grid .val-field-row select, .com-grid .val-field-row textarea { max-width: 100%; width: 100%; box-sizing: border-box; }
.com-wide { grid-column: 1 / -1; }
.com-help { font-size: .8rem; line-height: 1.4; }
.com-ro-label { font-size: .85rem; font-weight: 600; color: var(--slate-700); }
.com-ro-val { font-size: .92rem; }
.com-callout { background: var(--warn-ll); border: 1px solid var(--warn-bd); border-radius: 10px; padding: .7rem .9rem; margin: 0 0 1rem; font-size: .88rem; }
.com-callout p { margin: .25rem 0; line-height: 1.5; }
/* Ayuda de IA */
.com-ai { border: 1px dashed #c4b5fd; background: #faf8ff; border-radius: 12px; padding: .9rem 1rem; margin: 0 0 1.2rem; }
.com-ai-head { display: flex; gap: .75rem; align-items: flex-start; }
.com-ai-head p { margin: .15rem 0 0; }
.com-ai-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem;
  border-radius: 10px; background: #ede9fe; color: #6d28d9; }
.com-ai-icon i, .com-ai-icon svg { width: 1.15rem; height: 1.15rem; }
.com-ai-more { margin: .6rem 0 0 2.95rem; }
.com-ai-more > summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--accent-d); }
.com-ai-consent { display: flex !important; gap: .5rem; align-items: flex-start; margin: .75rem 0 .5rem 2.95rem !important; font-size: .88rem; }
.com-ai-consent input { margin-top: .2rem; }
.com-ai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-left: 2.95rem; }
#om-ai-suggest:disabled { opacity: .45; cursor: not-allowed; }
/* Accesibilidad (del EPUB) en etiquetas */
.com-a11y { margin: 0; display: grid; gap: .55rem; }
.com-a11y-row { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: .25rem .75rem; align-items: start; }
.com-a11y-row dt { font-size: .85rem; font-weight: 600; color: var(--slate-600); padding-top: .2rem; }
.com-a11y-row dd { margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.com-chip { display: inline-block; font-size: .8rem; padding: .18rem .55rem; border-radius: 999px;
  background: var(--success-ll); border: 1px solid var(--success-bd); color: var(--success-text); }
@media (max-width: 560px) { .com-a11y-row { grid-template-columns: 1fr; } }
/* Barra de guardado fija */
.com-savebar { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  margin: 1rem -.25rem 0; padding: .8rem 1rem; background: rgba(255,255,255,.96); border: 1px solid var(--border-md);
  border-radius: 12px; box-shadow: 0 -4px 14px rgba(15,23,42,.08); backdrop-filter: blur(4px); }
.com-savebar .btn { flex: none; }
.com-dirty { font-size: .85rem; font-weight: 600; color: var(--warn-dark); }
.com-dirty[hidden] { display: none; }
.com-savebar-hint { flex: 1 1 16rem; font-size: .82rem; }
/* Descargas, como filas de fichero */
.com-panel { margin: 1.75rem 0 1rem; padding: 1.2rem 1.3rem; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); box-shadow: var(--sh-sm); }
.com-panel-head h3 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; }
.com-panel-head p { margin: .2rem 0 .6rem; }
.com-files { list-style: none; margin: 0; padding: 0; }
.com-file { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .9rem 0; border-bottom: 1px solid var(--border); }
.com-file:last-child { border-bottom: 0; }
.com-file-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border-radius: 10px; background: var(--accent-ll); color: var(--accent-d); }
.com-file-icon i, .com-file-icon svg { width: 1.25rem; height: 1.25rem; }
.com-file-body { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.com-file-name { font-weight: 700; }
.com-file-desc { font-size: .85rem; color: var(--text-md); line-height: 1.45; }
.com-file .btn { display: inline-flex; align-items: center; margin: 0; }
.com-dl-note { display: flex; align-items: center; margin: .2rem 0 .4rem; padding: .6rem .8rem; border-radius: 10px;
  background: var(--slate-50); border: 1px solid var(--border); font-size: .88rem; color: var(--slate-700); }
.com-geo-st { margin-top: .4rem; font-size: .85rem; }
.com-geo-st > summary { cursor: pointer; font-weight: 600; color: var(--accent-d); }
.com-geo-st .geo-status { margin-top: .5rem; }
.com-geo-st .geo-status .exp-sub-title { display: none; }
.com-saved { display: flex; align-items: center; margin: .2rem 0 .6rem; }
.com-step--publish .pub-card { margin: 0; }
.com-step--publish .pub-card > h3 { display: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.alert-success { background: var(--success-ll); border: 1px solid var(--success-bd); color: var(--success-text); }
.com-a11y-text { font-size: .88rem; line-height: 1.5; color: var(--slate-700); }

/* Contador de dc:description por encima del límite de distribuidoras */
.val-hint.val-hint-warn {
  color: var(--warn-text);
  font-weight: 600;
}

/* ── Novedades: aviso de actualización y página (web y portal) ─────────── */
.news-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto 1.25rem;
  padding: .7rem 1rem;
  background: var(--accent-ll);
  border: 1px solid var(--accent-l);
  border-radius: 10px;
  color: var(--text);
}
.news-banner[hidden] { display: none; }
.news-banner p { margin: 0; }
.news-banner a { color: var(--accent-dk); font-weight: 600; }
.news-banner-close {
  flex: none;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-md);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.news-banner-close:hover { background: var(--accent-l); color: var(--text); }
.news-banner-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.news-page { max-width: 820px; margin: 0 auto; }
.news-page h1 { margin-bottom: 1rem; }
.news-page p { margin: 0 0 .9rem; line-height: 1.6; }
.news-page .news-feed { font-size: .95rem; }
.news-page .news-release { border-top: 1px solid var(--border); padding-top: 1.25rem; margin-top: 1.5rem; }
.news-page .news-release h2 { font-size: 1.25rem; margin: 0 0 .5rem; padding-top: 0; border-top: 0; scroll-margin-top: 5rem; }
.news-page h3.news-kind {
  display: inline-block;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: .9rem 0 .35rem;
  padding: .15rem .55rem;
  border-radius: 6px;
  background: var(--slate-100);
  color: var(--slate-700);
}
.news-page h3.news-kind-added { background: var(--success-ll); color: var(--success-text); }
.news-page h3.news-kind-fixed { background: var(--accent-ll); color: var(--accent-dk); }
.news-page h3.news-kind-security { background: var(--warn-ll); color: var(--warn-text); }
.news-page ul { margin: 0 0 .5rem; padding-left: 1.25rem; }
.news-page li { margin-bottom: .35rem; line-height: 1.55; }
.news-page .news-release + .news-release { margin-top: 1.75rem; }

/* Filas que se añaden y quitan (autoría en el ONIX comercial; también en el portal) */
.rows-box > .field-label { margin-top: 0; }
.row-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .6rem; }
.contrib-row {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(10rem, 1fr) auto;
  gap: .5rem .75rem; align-items: end;
}
.contrib-row .field { margin: 0; }
.contrib-row .field input, .contrib-row .field select { max-width: none; }
.row-remove {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-width: 2.75rem; min-height: 2.75rem; padding: 0 .6rem;
  background: transparent; color: var(--slate-600); cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r8); font: inherit; font-size: .85rem;
}
.row-remove:hover { color: var(--error-dark, #b91c1c); border-color: var(--error-dark, #b91c1c); background: var(--error-ll); }
.row-remove .icon, .row-remove svg { width: 1.05rem; height: 1.05rem; flex: none; }
.row-remove[hidden] { display: none; }
.contrib-row .val-field-row { margin: 0; }
.rows-box .row-add { margin: .6rem 0 .25rem; }
@media (max-width: 40rem) {
  .contrib-row { grid-template-columns: minmax(0, 1fr) auto; }
  .contrib-row > :first-child { grid-column: 1 / -1; }
}
.com-form .row-remove { min-width: 2.25rem; min-height: 2.25rem; padding: 0 .45rem; }

/* ONIX comercial (web): dos grupos — ONIX completo y, aparte, Kit GEO */
.com-group-head { margin: 1.25rem 0 .6rem; }
.com-group-head .val-hint { margin: .2rem 0 0; }
.com-group-h { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: 1rem; color: var(--text); }
.com-group-h svg, .com-group-h i { width: 1.1rem; height: 1.1rem; color: var(--accent); flex: none; }
.com-group-head--geo { margin-top: 2rem; padding-top: 1.25rem; border-top: 2px dashed var(--border); }
.com-group-head--geo .com-group-h svg, .com-group-head--geo .com-group-h i { color: #0f766e; }
.com-step--geo { border-color: #99f6e4; }
.com-step--geo > .export-accordion-head { background: #f0fdfa; }
.com-cover-epub { background: var(--slate-50); border-color: var(--border); }
.com-cover-epub p { margin: 0 0 .45rem; }
.com-cover-epub p:last-child { margin-bottom: 0; }
.com-cover-warn { display: flex; gap: .45rem; align-items: flex-start; color: #92400e; font-weight: 600; }
.com-cover-warn svg, .com-cover-warn i { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .1rem; }
#om_geo_cover[readonly] { cursor: default; }