@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Boldonse&display=swap');

/* Paleta y tipografía alineadas con carlosortega.page: tinta casi negra
   #1a1a1a, fondo gris cálido #e1e1e1, acento rojo #f11c41, Inter para
   texto y Boldonse (display, mayúsculas) para números/titulares grandes. */
:root {
  --bg: #141414;
  --bg-grad: none;
  --panel: #1c1c1c;
  --panel-alt: #242424;
  --panel-border: #333333;
  --panel-border-soft: #2a2a2a;
  --text: #f0f0f0;
  --text-dim: #b3b3b3;
  --text-faint: #808080;
  --accent: #f11c41;
  --accent-strong: #c4102f;
  --ink: #f0f0f0;
  --ink-invert: #141414;
  --pass: #34c77b;
  --warn: #e8b339;
  --fail: #f11c41;
  --na: #6b7280;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --font-display: "Boldonse", "Inter", sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #e1e1e1;
    --bg-grad: none;
    --panel: #ffffff;
    --panel-alt: #f2f2f2;
    --panel-border: #dcdcdc;
    --panel-border-soft: #ececec;
    --text: #1a1a1a;
    --text-dim: #55555a;
    --text-faint: #85858a;
    --ink: #1a1a1a;
    --ink-invert: #ffffff;
    --fail: #e01238;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-grad), var(--bg);
  color: var(--text);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Header ---------- */
.topbar { padding: 2rem 1.5rem 1.25rem; max-width: 980px; margin: 0 auto; }
.topbar-inner { display: flex; align-items: center; justify-content: center; position: relative; }
.brand {
  font-size: 3rem; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase;
  display: flex; align-items: center; gap: 0.6rem;
}
.brand-icon { font-size: 2.4rem; color: var(--accent); }
.tagline {
  color: var(--text); margin: 1rem 0 0; text-align: center;
  font-size: 1.3rem; font-weight: 600;
}
.intro-note {
  color: var(--text-dim); margin: 0.85rem auto 0.4rem; text-align: center;
  font-size: 0.92rem; line-height: 1.65; max-width: 660px;
}
.audit-counter-note {
  color: var(--text-dim); margin: 0.85rem auto 2.25rem; text-align: center;
  font-size: 0.88rem; font-weight: 700;
}
.audit-counter-highlight { color: var(--accent); }

.lang-switcher {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 999px; padding: 3px;
}
.lang-btn {
  border: none; background: none; color: var(--text-dim);
  font-size: 0.8rem; font-weight: 700; padding: 0.35rem 0.7rem;
  border-radius: 999px; cursor: pointer; transition: all 0.15s ease;
}
.lang-btn:hover { color: var(--text); }
.lang-btn.active { background: var(--ink); color: var(--ink-invert); }

body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; max-width: 980px; width: 100%; margin: 0 auto; padding: 0 1.25rem 4rem; display: flex; flex-direction: column; justify-content: center; }
body:has(#report:not(.hidden)) main,
body:has(#status-panel:not(.hidden)) main {
  justify-content: flex-start;
}

/* ---------- Buscador ---------- */
.search-panel { text-align: center; margin: 1.5rem 0 1.5rem; }
.search-panel-inner {
  display: flex; flex-direction: column; gap: 0.75rem;
  max-width: 600px; margin: 0 auto;
}
#audit-form { display: flex; gap: 0.6rem; width: 100%; }
#url-input {
  flex: 1;
  min-width: 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--text);
  font-size: 1rem;
  transition: border-color 0.15s ease, outline-color 0.15s ease;
}
#url-input:focus { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 1px; border-color: var(--accent); }
#submit-btn {
  flex-shrink: 0;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}
#submit-btn:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
#submit-btn:disabled { opacity: 0.65; cursor: default; }
.hint { color: var(--text-faint); font-size: 0.85rem; max-width: 600px; margin: 0.65rem auto 0; }

/* Crédito del autor: vive en el footer, no en la pantalla inicial (antes
   competía visualmente con el resto de bloques justo bajo el formulario). */
.credit-line { color: var(--text-faint); font-size: 0.8rem; margin: 0 0 0.75rem; }
.credit-line a { color: var(--accent); text-decoration: none; font-weight: 600; }
.credit-line a:hover { text-decoration: underline; }

/* ---------- Aviso de alcance + API key ----------
   Mismo ancho que el buscador (.search-panel-inner) para que las tres
   cajas (aviso, buscador, API key) se lean como un grupo alineado en vez
   de piezas sueltas con anchos distintos. */
.info-bar {
  box-sizing: border-box;
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  padding: 0.65rem 0.95rem; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--panel-border);
  text-align: left;
}
.info-bar-icon { flex-shrink: 0; color: var(--accent); font-size: 0.95rem; }
.disclaimer-bar { border-color: var(--accent); }
.disclaimer-bar p { margin: 0; font-size: 0.82rem; color: var(--text-dim); line-height: 1.45; }

.apikey-panel { width: 100%; }
.apikey-toggle {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  padding: 0.9rem 1.1rem; border-radius: var(--radius);
  background: var(--ink); color: var(--ink-invert);
  font-size: 0.85rem; font-weight: 700;
  border: 1px solid var(--ink);
  transition: border-color 0.15s ease;
}
.apikey-toggle:hover { border-color: var(--accent); }
.apikey-toggle-icon { flex-shrink: 0; color: var(--accent); font-size: 0.95rem; }
.apikey-chevron { margin-left: auto; color: currentColor; opacity: 0.6; transition: transform 0.2s ease; flex-shrink: 0; }
.apikey-toggle.open .apikey-chevron { transform: rotate(180deg); }
.apikey-body {
  margin-top: 0.6rem; padding: 1rem 1.1rem;
  background: var(--panel-alt); border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius);
  text-align: left;
}
.apikey-privacy {
  margin: 0 0 0.6rem; font-size: 0.8rem; color: var(--text-dim); line-height: 1.5;
}
.apikey-limitations {
  margin: 0 0 0.75rem; font-size: 0.78rem; color: var(--text-faint); line-height: 1.5;
  padding: 0.6rem 0.75rem; background: var(--panel); border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-sm);
}
.apikey-input-row { display: flex; gap: 0.5rem; }
#apikey-input {
  flex: 1; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm);
  border: 1px solid var(--panel-border); background: var(--panel); color: var(--text);
  font-size: 0.88rem; font-family: ui-monospace, "SF Mono", Consolas, monospace;
}
#apikey-input:focus { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 1px; border-color: var(--accent); }
.apikey-visibility-btn {
  flex-shrink: 0; width: 2.4rem; border-radius: var(--radius-sm);
  border: 1px solid var(--panel-border); background: var(--panel); cursor: pointer; font-size: 0.95rem;
}
.apikey-steps-title { margin: 0.9rem 0 0.35rem; font-size: 0.78rem; font-weight: 700; color: var(--text); }
.apikey-steps {
  margin: 0; padding-left: 1.2rem; font-size: 0.8rem; color: var(--text-dim);
  display: flex; flex-direction: column; gap: 0.25rem;
}
.apikey-console-link {
  display: inline-block; margin-top: 0.7rem; font-size: 0.82rem; font-weight: 600;
  color: var(--accent); text-decoration: none;
}
.apikey-console-link:hover { text-decoration: underline; }

/* ---------- Estado de carga ---------- */
.status-panel { text-align: center; padding: 2.5rem 1rem; color: var(--text-dim); font-size: 0.95rem; }
.status-panel.error { color: var(--fail); }
/* Al fallar la auditoría (límite diario, red, error del servidor...), el
   spinner y la lista de "pasos" se quedaban visibles debajo del mensaje de
   error como si siguiera cargando — stopLoaderSteps() solo paraba el
   temporizador, no ocultaba nada. Aquí sí, en cuanto el panel pasa a estado
   error. */
.status-panel.error .loader-ring,
.status-panel.error .loader-steps { display: none; }
.status-panel #status-text { margin: 1rem 0 0.25rem; font-weight: 500; font-size: 0.85rem; }
.hidden { display: none !important; }

/* Espera de auditoría: reserva visible, fases reales y actualización de estado. */
.status-panel:not(.hidden) {
  max-width: 660px; margin: 1.5rem auto 2.5rem; padding: 1.5rem 2rem 2rem;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-lg);
  box-shadow: 0 12px 35px #00000008; text-align: left;
}
.job-status-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.job-state-label { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 700; }
.job-state-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--pass); }
.status-panel.reconnecting .job-state-label::before { background: var(--warn); }
.status-panel.unreachable .job-state-label::before { background: var(--warn); }
.status-panel.unreachable .loader-ring, .status-panel.unreachable .loader-steps, .status-panel.unreachable #queue-metrics { display: none; }
.status-panel.error .job-state-label::before { background: var(--fail); }
.job-updated { color: var(--text-dim); font-size: .7rem; font-variant-numeric: tabular-nums; }
.status-panel:not(.hidden) .loader-ring { margin: 2rem 0 1.5rem; width: 32px; height: 32px; }
.status-panel #status-text { font-size: 1.4rem; font-weight: 700; line-height: 1.35; color: var(--text); margin: 0; text-wrap: balance; }
.job-target { font-size: .8rem; color: var(--text-dim); overflow-wrap: anywhere; margin: .6rem 0 1.5rem; }
.queue-metrics { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--panel-border-soft); border-bottom: 1px solid var(--panel-border-soft); margin: 1.75rem 0 1.25rem; }
.queue-metrics>div { padding: 1.25rem 0; }
.queue-metrics>div+div { padding-left: 1.5rem; border-left: 1px solid var(--panel-border-soft); }
.queue-metric-label { display: block; font-size: .72rem; color: var(--text-dim); margin-bottom: .5rem; }
.queue-metrics strong { color: var(--text); font-size: 1.9rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.queue-metrics #queue-position { color: var(--accent); }
.job-note { font-size: .83rem; line-height: 1.65; color: var(--text-dim); margin: 1rem 0 .25rem; }
.status-panel .loader-steps { margin: 1.5rem 0 0; width: 100%; max-width: none; text-align: left; }
.status-panel.error #queue-metrics, .status-panel.error #job-note { display: none; }
.job-retry { margin-top: 1rem; padding: .7rem 1rem; border-radius: var(--radius-sm); background: var(--accent); color: #fff; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.job-retry:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
@media (max-width: 600px) {
  .status-panel:not(.hidden) { margin-top: 1rem; padding: 1.25rem; }
  .status-panel #status-text { font-size: 1.2rem; }
  .queue-metrics strong { font-size: 1.55rem; }
  .queue-metrics>div+div { padding-left: 1rem; }
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.loader-ring {
  width: 42px; height: 42px; margin: 0 auto;
  border: 4px solid var(--panel-border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loader-steps {
  list-style: none; padding: 0; margin: 1.25rem auto 0;
  max-width: 380px; text-align: left; display: flex; flex-direction: column; gap: 0.5rem;
}
.loader-steps li {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.85rem; color: var(--text-faint);
  opacity: 0.4; transition: opacity 0.3s ease, color 0.3s ease;
}
.loader-steps li.active { opacity: 1; color: var(--text); }
.loader-steps li.done { opacity: 0.75; color: var(--text-dim); }
.loader-steps li .step-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--panel-border); flex-shrink: 0;
  transition: background 0.3s ease, transform 0.3s ease;
}
.loader-steps li.active .step-dot { background: var(--accent); transform: scale(1.6); }
.loader-steps li.done .step-dot { background: var(--pass); }

.report { animation: report-in 0.4s cubic-bezier(0.16,1,0.3,1); }
@keyframes report-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .report, .loader-ring, .score-ring-fg { animation: none !important; transition: none !important; }
}

/* ---------- Cobertura del análisis con Claude ---------- */
.claude-notice {
  background: color-mix(in srgb, var(--warn) 10%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--panel-border));
  border-left: 4px solid var(--warn);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin: 0 0 1.25rem;
  font-size: 0.92rem;
  line-height: 1.6;
  break-inside: avoid;
}
.claude-notice strong { display: block; color: var(--text); font-size: 1rem; }
.claude-notice p { margin: 0.35rem 0 0; color: var(--text-dim); }

/* ---------- Banner de bloqueo ---------- */
.blocked-banner {
  background: color-mix(in srgb, var(--fail) 10%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--fail) 45%, var(--panel-border));
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin: 0 0 1.25rem;
  font-size: 0.92rem;
  line-height: 1.6;
}
.blocked-banner strong { color: var(--fail); font-size: 1rem; }

/* ---------- Cabecera de puntuación ---------- */
.score-header {
  display: flex;
  gap: 1.75rem;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin: 0 0 1.25rem;
  flex-wrap: wrap;
}

.score-ring-wrap {
  position: relative;
  width: 176px; height: 176px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.score-ring { width: 100%; height: 100%; grid-area: 1 / 1; transform: rotate(-90deg); }
.score-ring-bg { fill: none; stroke: var(--panel-border-soft); stroke-width: 13; }
.score-ring-fg {
  fill: none;
  stroke: var(--accent);
  stroke-width: 13;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(0.4,0,0.2,1), stroke 0.4s ease;
}
.score-ring-label {
  grid-area: 1 / 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  width: 128px;
}
.score-ring-label span { font-family: var(--font-display); font-size: 2.1rem; font-weight: 400; line-height: 1.1; }
.score-ring-label small { font-size: 0.92rem; color: var(--text-dim); font-weight: 500; }
.score-grade { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.45rem; }

.score-meta { flex: 1; min-width: 240px; }
.score-actions { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.pdf-btn {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%;
  background: var(--accent); border: 1px solid var(--accent); color: #ffffff;
  font-family: inherit; font-size: 0.85rem; font-weight: 700;
  padding: 0.65rem 1.1rem; border-radius: 999px; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pdf-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.pdf-btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
/* Segundo botón (Markdown): mismo tamaño/forma que el de PDF pero en
   contorno, no relleno — evita dos llamadas a la acción idénticas
   compitiendo por la atención; el PDF sigue siendo la opción principal. */
.md-btn { background: transparent; border-color: var(--panel-border); color: var(--text-dim); }
.md-btn:hover { background: var(--panel-alt); border-color: var(--text-dim); color: var(--text); }
.coffee-link {
  font-size: 0.8rem; font-weight: 600; color: var(--text-dim);
  text-decoration: none; border-bottom: 1px dashed var(--panel-border);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.coffee-link:hover { color: var(--text); border-color: var(--text-dim); }
.report-url { color: var(--text-faint); font-size: 0.82rem; word-break: break-all; margin: 0 0 0.5rem; font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.report-summary { font-size: 1.08rem; margin: 0 0 0.4rem; font-weight: 500; }
.report-warnings { color: var(--warn); font-size: 0.82rem; margin: 0; }
.history-comparison {
  display: inline-flex; align-items: center; gap: 0.35rem; width: fit-content;
  font-size: 0.8rem; font-weight: 600; margin: 0.4rem 0 0;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  background: var(--panel-alt); border: 1px solid var(--panel-border-soft); color: var(--text-dim);
}
.history-comparison.up { color: var(--pass); }
.history-comparison.down { color: var(--fail); }

/* ---------- Problemas principales ---------- */
.top-issues {
  --issue-color: var(--fail);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-left: 4px solid var(--issue-color);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.4rem 0.7rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.top-issues.warn-variant { --issue-color: var(--warn); }
.top-issues h2 {
  margin: 0 0 0.85rem; font-size: 1rem; font-weight: 800;
  display: flex; align-items: center; gap: 0.6rem;
  letter-spacing: -0.01em;
}
.top-issues-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, var(--issue-color) 16%, transparent);
  color: var(--issue-color); font-size: 0.85rem;
}
.top-issues-count {
  margin-left: auto;
  background: color-mix(in srgb, var(--issue-color) 14%, transparent);
  color: var(--issue-color); font-size: 0.75rem; font-weight: 800;
  border-radius: 999px; padding: 0.15rem 0.55rem;
}
.top-issue-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.7rem 0.6rem;
  margin: 0 -0.4rem 0.65rem;
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--panel-alt);
  border: 1px solid var(--panel-border-soft);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.top-issue-row:hover {
  background: color-mix(in srgb, var(--issue-color) 7%, var(--panel-alt));
  border-color: var(--issue-color);
  transform: translateX(2px);
}
.top-issue-icon {
  flex-shrink: 0; font-size: 0.95rem; opacity: 0.9;
  width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel);
  border: 1px solid var(--panel-border-soft);
}
.top-issue-text { flex: 1; min-width: 0; }
.top-issue-cat { color: var(--text-faint); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.top-issue-name { font-weight: 600; font-size: 0.92rem; margin-top: 0.1rem; }
.top-issue-arrow {
  flex-shrink: 0; color: var(--text-faint); font-size: 1rem;
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.top-issue-row:hover .top-issue-arrow { opacity: 1; transform: translateX(0); color: var(--issue-color); }

/* ---------- Compartir resultado ---------- */
.share-panel {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin: 0 0 1.5rem; padding: 0.85rem 1.1rem;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius);
}
.share-label { font-size: 0.85rem; font-weight: 600; color: var(--text-dim); }
.share-buttons { display: flex; gap: 0.5rem; }
.share-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--panel-border); background: var(--panel-alt);
  color: var(--text-dim);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.share-btn svg { width: 17px; height: 17px; }
.share-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-1px); }

/* ---------- Navegación de categorías ---------- */
.categories-toolbar { margin-bottom: 0.75rem; }
.categories-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.cat-pill {
  --cat-color: var(--accent);
  position: relative;
  flex: 0 1 calc((100% - 4 * 0.6rem) / 5);
  min-width: 140px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 0.7rem 0.7rem 0.65rem;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: transform 0.16s cubic-bezier(.2,.7,.3,1.3), border-color 0.18s ease;
  font-family: inherit;
}
.cat-pill:hover { transform: translateY(-3px); border-color: var(--cat-color); }
.cat-pill.active {
  border-color: var(--cat-color);
  border-width: 2px;
}
.cat-icon-wrap {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--cat-color) 14%, transparent);
}
.cat-icon { font-size: 0.9rem; line-height: 1; }
.cat-pill .cat-name {
  font-size: 0.72rem; color: var(--text-dim); font-weight: 600; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-pill .cat-score {
  font-size: 1.35rem; font-weight: 800; line-height: 1; color: var(--cat-color);
  letter-spacing: -0.02em;
}
.cat-progress-track {
  display: block; width: 100%; height: 5px; border-radius: 999px;
  background: var(--panel-border-soft); overflow: hidden;
}
.cat-progress-fill {
  display: block; height: 100%; border-radius: 999px;
  background: var(--cat-color);
  transition: width 0.5s cubic-bezier(.2,.7,.3,1);
}
.cat-badges {
  position: absolute; top: -6px; right: -6px;
  display: flex; gap: 4px;
}
.cat-fail-badge, .cat-warn-badge {
  font-size: 0.7rem; font-weight: 800; line-height: 1;
  border-radius: 999px; padding: 0.32rem 0.5rem; min-width: 1.4em; text-align: center;
  border: 3px solid var(--panel);
}
.cat-fail-badge {
  background: var(--fail); color: white;
}
.cat-warn-badge {
  background: var(--warn); color: #1a1a1a;
}

/* ---------- Categoría "no aplica" (ningún check aplicable) ---------- */
.cat-pill.not-applicable { opacity: 0.72; }
.cat-pill.not-applicable .cat-score { font-size: 1.1rem; letter-spacing: 0; }
.cat-na-badge {
  font-size: 0.72rem; font-weight: 700; color: var(--text-faint);
  background: var(--panel-alt); border: 1px solid var(--panel-border-soft);
  border-radius: 999px; padding: 0.2rem 0.6rem; flex-shrink: 0;
}

/* ---------- Indicador de verificación en segundo plano ---------- */
.mini-spinner {
  display: inline-block; width: 12px; height: 12px; flex-shrink: 0;
  border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.cat-pill.pending { border-color: color-mix(in srgb, var(--accent) 35%, var(--panel-border)); }
.cat-pending-badge {
  position: absolute; top: -6px; right: -6px;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--panel); border: 3px solid var(--panel);
}
.pending-inline {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 600; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 999px; padding: 0.25rem 0.65rem;
}

/* ---------- Barra de herramientas del detalle ---------- */
.detail-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 1.1rem 0 0.6rem;
}

/* ---------- Botón flotante "volver arriba" ---------- */
.back-to-top {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 40;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--ink-invert); border: 1px solid var(--ink); cursor: pointer;
  transition: background 0.15s ease, opacity 0.2s ease;
}
.back-to-top:hover { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.back-to-top svg { width: 20px; height: 20px; }
.segmented {
  display: flex;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.segmented-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.segmented-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.segmented-btn:hover { color: var(--text); background: var(--panel-alt); }
.segmented-btn:active { color: white; background: var(--accent); }

/* ---------- Bloques de categoría (acordeón) ---------- */
.category-block {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  margin-bottom: 0.65rem;
  overflow: hidden;
}
.category-block-header {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem 1.25rem;
  cursor: pointer;
}
.category-block-header .cat-icon { font-size: 1.1rem; }
.category-block-header h2 { margin: 0; font-size: 1rem; font-weight: 700; flex: 1; }
.cat-score-inline { font-size: 0.92rem; font-weight: 700; flex-shrink: 0; }
.category-block-header .chevron {
  transition: transform 0.2s ease; color: var(--text-faint); flex-shrink: 0; font-size: 1rem; line-height: 1;
}
.category-block.open .chevron { transform: rotate(180deg); }
.category-block-body { padding: 0 1.25rem 0.5rem; display: none; }
.category-block.open .category-block-body { display: block; }

.check {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--panel-border-soft);
}
.check:first-of-type { border-top: none; }
.status-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 0.1rem; }
.status-icon svg { width: 100%; height: 100%; display: block; }

.check-body { flex: 1; min-width: 0; }
.check-name { font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.check-status-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.08rem 0.5rem; border-radius: 999px;
}
.check-status-pass { color: var(--pass); background: color-mix(in srgb, var(--pass) 14%, transparent); }
.check-status-warning { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.check-status-fail { color: var(--fail); background: color-mix(in srgb, var(--fail) 14%, transparent); }
.check-status-na, .check-status-no_api { color: var(--na); background: color-mix(in srgb, var(--na) 16%, transparent); }

.check-message { color: var(--text-dim); font-size: 0.92rem; margin-top: 0.25rem; word-break: break-word; }
.check-message a { color: var(--accent); text-decoration: none; }
.check-message a:hover { text-decoration: underline; }
.item-label a, .item-value a { color: inherit; text-decoration: none; }
.item-label a:hover, .item-value a:hover { text-decoration: underline; }

/* ---------- Cuadrícula visual de items (atributos, bots, listas...) ---------- */
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.item-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: var(--panel-alt);
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.6rem;
  font-size: 0.8rem;
  min-width: 0;
}
.item-icon { width: 14px; height: 14px; flex-shrink: 0; margin-top: 0.15rem; }
.item-icon svg { width: 100%; height: 100%; display: block; }
.item-text { min-width: 0; flex: 1; }
.item-label {
  font-weight: 600;
  min-width: 0;
  overflow-wrap: break-word; word-break: break-word;
}
.item-fail .item-label { color: var(--text-dim); }
.item-value {
  color: var(--text-faint);
  margin-top: 0.15rem;
  overflow-wrap: break-word; word-break: break-word;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.76rem;
}
.check-sources { margin-top: 0.5rem; font-size: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.check-sources a { color: var(--accent); text-decoration: none; }
.check-sources a:hover { text-decoration: underline; }
.check-evidence {
  margin-top: 0.5rem;
  font-size: 0.76rem;
  color: var(--text-faint);
  background: var(--panel-alt);
  border: 1px solid var(--panel-border-soft);
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}
.h1-highlight { color: var(--fail); font-weight: 800; }

footer {
  text-align: center;
  color: var(--text-faint);
  font-size: 0.8rem;
  padding: 2rem 1.5rem;
  max-width: 680px;
  margin: 0 auto;
}

@media (max-width: 560px) {
  .topbar { width: 100%; }
  .brand { font-size: clamp(1.75rem, 8vw, 2.7rem); }
  .brand-icon { font-size: 1.8rem; }
  .score-header { flex-direction: column; text-align: center; }
  .score-meta { text-align: center; }
  .lang-switcher { position: static; transform: none; margin: 0.75rem auto 0; width: fit-content; }
  .topbar-inner { flex-direction: column; }
}

.pdf-footer { display: none; }

/* ---------- Impresión / "Descargar PDF" ---------- */
@media print {
  @page { margin: 14mm 12mm; }

  /* Chrome deja de pintar background-color por defecto al imprimir salvo
     que se fuerce explícitamente — sin esto, todas las pastillas de estado
     (CORRECTO/MEJORABLE/CRÍTICO) y el acento de color de cada sección
     salían en blanco/gris, perdiendo la señal visual que da sentido al
     informe (cuáles son los problemas). */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  .pdf-footer {
    display: block; margin-top: 1.5rem; padding-top: 0.75rem;
    border-top: 1px solid #ddd; text-align: center;
    font-size: 0.78rem; color: #666;
  }
  :root {
    --bg: #ffffff; --panel: #ffffff; --panel-alt: #f7f7f7;
    --panel-border: #dddddd; --panel-border-soft: #eeeeee;
    --text: #1a1a1a; --text-dim: #444444; --text-faint: #666666;
  }
  body { background: #fff; }
  .topbar, .search-panel, .status-panel, .detail-toolbar, .back-to-top, footer, .lang-switcher,
  .share-panel, .pdf-btn, .md-btn, .coffee-link, .categories-toolbar, .chevron {
    display: none !important;
  }
  main { max-width: 100%; padding: 0; }
  .report { animation: none; }

  .score-header { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }

  /* "Problemas principales" / "Aspectos a mejorar": antes eran una única
     caja con borde redondeado que envolvía TODA la lista — al no caber
     entera en lo que quedaba de página, el navegador la partía en dos
     fragmentos que cada uno dibujaba su propio borde redondeado completo,
     pareciendo dos paneles inconexos con un salto en blanco entre medias.
     Quitamos la caja exterior (solo queda el título) y dejamos que cada
     fila individual, que sí lleva su propio borde, decida su propio salto
     de página sin partirse por la mitad. */
  .top-issues {
    border: none; background: none; padding: 0 0 0.9rem; margin-bottom: 0.9rem; overflow: visible;
  }
  .top-issue-row { break-inside: avoid; border: 1px solid #ddd; }

  /* Mismo problema con cada categoría: antes era una caja que envolvía
     todos sus checks, partiéndose igual de mal si no cabía entera. Ahora
     el título de categoría actúa de separador visual (línea superior) y el
     contenido fluye sin caja exterior — cada check individual sí evita
     partirse por la mitad. */
  .category-block {
    border: none; border-radius: 0; overflow: visible;
    border-top: 2px solid #1a1a1a; margin-bottom: 0; padding-top: 0.3rem;
  }
  .category-block-header { padding: 0.5rem 0; break-after: avoid; }
  .category-block-body { display: block !important; padding: 0; }
  .check { break-inside: avoid; }
  .item-row { break-inside: avoid; }

  /* Los enlaces (URL de una imagen, fuente de un check...) usan solo el
     nombre/etiqueta como texto en pantalla; en papel no hay forma de
     pulsarlos, así que al menos deben distinguirse visualmente como
     enlaces en vez de parecer texto plano sin más. */
  .item-label a, .check-message a, .check-evidence a { text-decoration: underline; }

  .categories-grid { display: none; } /* la nota por categoría ya sale repetida en cada bloque expandido */
}

.legal-links { margin-top: .4rem; font-size: .8rem; text-align: center; color: var(--text-faint); }
.legal-links a { color: inherit; text-decoration: underline; }