/* ==========================================================================
   auditor-ia.css — Auditor SEO e IA (Fase 4)
   Se apoya en /assets/styles.css: usa sus tokens y sus clases (.prompt-tool,
   .btn-action, .l-container…). Aquí solo va lo que es propio del auditor.
   Contraste comprobado: los cinco colores de rango pasan AA (>= 4,5:1) tanto
   como texto sobre el fondo claro como de fondo con texto blanco.
   ========================================================================== */

:root {
  --r-critico:      #A32118;  /* 7,5:1 sobre blanco */
  --r-insuficiente: #8A5A0B;  /* 5,9:1 */
  --r-correcto:     #0B6675;  /* 6,6:1 */
  --r-bueno:        #3F7A12;  /* 5,2:1 */
  --r-excelente:    #26611F;  /* 7,5:1 */
}

/* --------------------------------------------------------- el formulario */

.aud-campo { margin-block-end: 8px; }

.aud-input {
  inline-size: 100%;
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--c-fg);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radio-card);
}
.aud-input::placeholder { color: color-mix(in srgb, var(--c-fg) 45%, var(--c-bg)); }
.aud-input:focus-visible { outline: 3px solid var(--c-accent-ink); outline-offset: 2px; }

.aud-rivales { margin-block: 20px 4px; }
.aud-rivales > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--c-accent-ink);
  padding-block: 8px;
}
.aud-rivales__ayuda {
  font-size: 0.9rem;
  color: var(--c-fg-dim);
  margin-block: 8px 14px;
}

.aud-error {
  margin-block-start: 16px;
  padding: 14px 16px;
  border-radius: var(--radio-card);
  border-inline-start: 4px solid var(--r-critico);
  background: color-mix(in srgb, var(--r-critico) 8%, var(--c-surface));
  color: var(--c-fg);
}
.aud-error:focus-visible { outline: 3px solid var(--c-accent-ink); outline-offset: 2px; }

/* `hidden` tiene que ganarle a `display:flex`: sin esto el atributo no oculta
   nada y el «Analizando…» se queda debajo del resultado. Pasó en la primera
   prueba de la Fase 4. */
.aud-error[hidden], .aud-cargando[hidden] { display: none; }

.aud-cargando {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-start: 16px;
  color: var(--c-fg-dim);
}
.aud-spinner {
  inline-size: 18px; block-size: 18px;
  border: 2px solid var(--c-border-strong);
  border-block-start-color: var(--c-accent-strong);
  border-radius: 50%;
  animation: aud-giro 0.8s linear infinite;
  flex: none;
}
@keyframes aud-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .aud-spinner { animation: none; } }

/* ------------------------------------------------------------ el resultado */

#aud-resultado:focus-visible { outline: none; }
#aud-resultado:empty { display: none; }

.aud-general {
  margin-block-start: 32px;
  padding: 28px 24px;
  text-align: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-block-start: 5px solid var(--c-border-strong);
  border-radius: var(--radio-card);
  box-shadow: 0 2px 12px var(--c-shadow);
}
.aud-general__host { font-weight: 600; color: var(--c-fg-dim); word-break: break-all; }
.aud-general__num {
  font-family: var(--font-title);
  font-size: clamp(3rem, 12vw, 4.5rem);
  line-height: 1.05;
  font-weight: 700;
}
.aud-general__de { font-size: 0.35em; color: var(--c-fg-dim); }
.aud-general__rango { font-size: 1.15rem; font-weight: 600; }
.aud-general__etiqueta {
  font-size: 0.85rem;
  color: var(--c-fg-dim);
  margin-block-start: 4px;
}
.aud-general .aud-escala { text-align: start; max-inline-size: 460px; margin-inline: auto; }
.aud-nota-fina {
  font-size: 0.88rem;
  color: var(--c-fg-dim);
  margin-block-start: 14px;
  text-align: start;
}

/* Un color por rango, en el filo de arriba y en el número. */
.aud-general--critico      { border-block-start-color: var(--r-critico); }
.aud-general--insuficiente { border-block-start-color: var(--r-insuficiente); }
.aud-general--correcto     { border-block-start-color: var(--r-correcto); }
.aud-general--bueno        { border-block-start-color: var(--r-bueno); }
.aud-general--excelente    { border-block-start-color: var(--r-excelente); }
.aud-general--critico      .aud-general__num, .aud-general--critico      .aud-general__rango { color: var(--r-critico); }
.aud-general--insuficiente .aud-general__num, .aud-general--insuficiente .aud-general__rango { color: var(--r-insuficiente); }
.aud-general--correcto     .aud-general__num, .aud-general--correcto     .aud-general__rango { color: var(--r-correcto); }
.aud-general--bueno        .aud-general__num, .aud-general--bueno        .aud-general__rango { color: var(--r-bueno); }
.aud-general--excelente    .aud-general__num, .aud-general--excelente    .aud-general__rango { color: var(--r-excelente); }

/* ------------------------------------------------------- los cuatro bloques */

.aud-bloques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-block-start: 16px;
}

.aud-bloque {
  padding: 20px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-inline-start: 5px solid var(--c-border-strong);
  border-radius: var(--radio-card);
}
.aud-bloque--critico      { border-inline-start-color: var(--r-critico); }
.aud-bloque--insuficiente { border-inline-start-color: var(--r-insuficiente); }
.aud-bloque--correcto     { border-inline-start-color: var(--r-correcto); }
.aud-bloque--bueno        { border-inline-start-color: var(--r-bueno); }
.aud-bloque--excelente    { border-inline-start-color: var(--r-excelente); }

.aud-bloque__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 12px;
}
.aud-bloque__titulo { font-size: 1.15rem; grid-column: 1; }
.aud-bloque__nota { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.aud-bloque__num { font-family: var(--font-title); font-size: 2.2rem; font-weight: 700; }
.aud-bloque__de { font-size: 0.85rem; color: var(--c-fg-dim); }
.aud-bloque__etiqueta { grid-column: 1; font-weight: 600; font-size: 0.92rem; }

.aud-bloque--critico      .aud-bloque__num, .aud-bloque--critico      .aud-bloque__etiqueta { color: var(--r-critico); }
.aud-bloque--insuficiente .aud-bloque__num, .aud-bloque--insuficiente .aud-bloque__etiqueta { color: var(--r-insuficiente); }
.aud-bloque--correcto     .aud-bloque__num, .aud-bloque--correcto     .aud-bloque__etiqueta { color: var(--r-correcto); }
.aud-bloque--bueno        .aud-bloque__num, .aud-bloque--bueno        .aud-bloque__etiqueta { color: var(--r-bueno); }
.aud-bloque--excelente    .aud-bloque__num, .aud-bloque--excelente    .aud-bloque__etiqueta { color: var(--r-excelente); }

.aud-bloque__sub { font-size: 0.9rem; color: var(--c-fg-dim); margin-block: 10px 12px; }
.aud-veredicto { margin-block-end: 14px; }
.aud-bloque__aviso {
  margin-block-start: 12px;
  padding: 12px;
  font-size: 0.85rem;
  color: var(--c-fg);
  background: var(--c-accent-soft);
  border-radius: 8px;
}
.aud-bloque__aviso a { color: var(--c-accent-ink); text-decoration: underline; }

/* ---------------------------------------------------- la escala real -----
   La pista entera es 0-100. El tramo coloreado es lo que ESA web puede sacar
   de verdad; la marca, dónde ha caído. Los dos números van debajo de sus
   extremos, no en los bordes de la pista: si no, parece que la escala es de
   0 a 100 y es justo lo contrario de lo que queremos decir. */

.aud-escala { margin-block: 14px 0; }
.aud-escala__pista {
  position: relative;
  block-size: 10px;
  background: color-mix(in srgb, var(--c-fg) 8%, transparent);
  border-radius: 5px;
}
.aud-escala__tramo {
  position: absolute;
  inset-block: 0;
  background: color-mix(in srgb, var(--c-accent) 28%, var(--c-surface));
  border-radius: 5px;
}
.aud-escala__marca {
  position: absolute;
  inset-block: -3px;
  inline-size: 4px;
  margin-inline-start: -2px;
  background: var(--c-accent-strong);
  border-radius: 2px;
}
.aud-escala__topes {
  position: relative;
  block-size: 1.1rem;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-fg-dim);
}
.aud-escala__topes span { position: absolute; transform: translateX(-50%); }
.aud-escala__frase { font-size: 0.85rem; margin-block-start: 2px; }

.aud-porque { margin-block-start: 8px; }
.aud-porque > summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-accent-ink);
}
.aud-porque > summary:focus-visible { outline: 3px solid var(--c-accent-ink); outline-offset: 2px; }
.aud-porque > p {
  margin-block-start: 8px;
  padding: 12px;
  font-size: 0.85rem;
  background: color-mix(in srgb, var(--c-fg) 4%, var(--c-surface));
  border-radius: 8px;
}

/* ------------------------------------------------------------- los paneles */

.aud-panel {
  margin-block-start: 24px;
  padding: 24px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radio-card);
}
.aud-panel--neutro { background: color-mix(in srgb, var(--c-fg) 3%, var(--c-surface)); }
.aud-panel--aviso { border-inline-start: 5px solid var(--r-insuficiente); }
.aud-panel__titulo { font-size: 1.3rem; }
.aud-panel__sub { font-size: 0.9rem; color: var(--c-fg-dim); margin-block: 8px 18px; }
.aud-panel__resumen { font-weight: 600; margin-block-end: 14px; }

.aud-arreglos { list-style: none; display: grid; gap: 14px; }
.aud-arreglo { display: flex; gap: 14px; align-items: flex-start; }
.aud-arreglo__pts {
  flex: none;
  min-inline-size: 62px;
  padding: 6px 10px;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--c-on-accent);
  background: var(--c-accent-strong);
  border-radius: 999px;
}
.aud-arreglo__cuerpo { display: grid; gap: 2px; }
.aud-arreglo__bloque { font-size: 0.8rem; color: var(--c-fg-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.aud-arreglo__detalle { font-size: 0.9rem; color: var(--c-fg-dim); }

.aud-nomedible { list-style: none; display: grid; gap: 12px; }
.aud-nomedible__item { padding-inline-start: 14px; border-inline-start: 2px solid var(--c-border-strong); }
.aud-nomedible__bloque { font-size: 0.8rem; color: var(--c-fg-dim); }
.aud-nomedible__motivo { display: block; font-size: 0.88rem; color: var(--c-fg-dim); margin-block-start: 2px; }

.aud-sinmedir { list-style: none; display: grid; gap: 12px; }
.aud-sinmedir__item span { display: block; font-size: 0.9rem; color: var(--c-fg-dim); margin-block-start: 2px; }

/* ------------------------------------------------------------- la tabla */

.aud-tabla__caja { overflow-x: auto; }
.aud-tabla { inline-size: 100%; border-collapse: collapse; min-inline-size: 520px; }
.aud-tabla th, .aud-tabla td {
  padding: 12px 10px;
  text-align: start;
  border-block-end: 1px solid var(--c-border);
}
.aud-tabla thead th { font-size: 0.82rem; color: var(--c-fg-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.aud-tabla tbody th { font-weight: 600; word-break: break-all; }
.aud-tabla__mia { background: var(--c-accent-soft); }
.aud-tabla__yo { font-size: 0.75rem; font-weight: 400; color: var(--c-fg-dim); }

.aud-pill {
  display: inline-block;
  min-inline-size: 42px;
  padding: 4px 10px;
  text-align: center;
  font-weight: 700;
  color: var(--c-on-accent);
  border-radius: 999px;
}
.aud-pill--critico      { background: var(--r-critico); }
.aud-pill--insuficiente { background: var(--r-insuficiente); }
.aud-pill--correcto     { background: var(--r-correcto); }
.aud-pill--bueno        { background: var(--r-bueno); }
.aud-pill--excelente    { background: var(--r-excelente); }

/* --------------------------------------------------- el detalle de 33 puntos */

.aud-detalle { margin-block-start: 14px; }
.aud-detalle > summary { cursor: pointer; font-size: 0.9rem; color: var(--c-accent-ink); font-weight: 600; }
.aud-detalle__lista { list-style: none; display: grid; gap: 10px; margin-block-start: 12px; }
.aud-detalle__item {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  font-size: 0.88rem;
  padding-block-end: 10px;
  border-block-end: 1px solid var(--c-border);
}
.aud-detalle__item--neutro { color: var(--c-fg-dim); }
.aud-detalle__pts { white-space: nowrap; font-variant-numeric: tabular-nums; }
.aud-detalle__nota { grid-column: 1 / -1; font-size: 0.82rem; color: var(--c-fg-dim); margin-block-start: 2px; }

@media (max-width: 480px) {
  .aud-arreglo { flex-direction: column; gap: 6px; }
  .aud-arreglo__pts { min-inline-size: 0; align-self: flex-start; }
}