/* Estilos de Checkeala. Estética de informe impreso / certificado (DISEÑO.md §2). */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-papel);
  color: var(--color-tinta);
  font: 400 var(--texto-base)/1.6 var(--fuente-texto);
}

h1, h2, h3, h4 { font-family: var(--fuente-titulos); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; max-width: var(--ancho-lectura); }
a { color: var(--color-marca); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-marca); outline-offset: 3px; }
.mono { font-family: var(--fuente-mono); font-size: .88em; }
[hidden] { display: none !important; }

.contenedor { width: 100%; max-width: var(--ancho-pagina); margin: 0 auto; padding: 0 20px; }
.contenedor--estrecho { max-width: 820px; }

/* ---------- Cabecera y pie ---------- */
.cabecera { border-bottom: 1px solid var(--color-linea); }
/* Modo preapertura: franja fina bajo la cabecera, sin alarmismo */
.preapertura { padding: 8px 0; background: var(--color-superficie); border-bottom: 1px solid var(--color-linea);
  font-size: .9rem; color: var(--color-tinta-suave); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.logo {
  font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.5rem;
  color: var(--color-marca); text-decoration: none; display: flex; align-items: baseline; gap: 12px;
}
.logo__lema { font-family: var(--fuente-mono); font-weight: 400; font-size: .72rem; color: var(--color-tinta-suave); text-transform: uppercase; letter-spacing: .08em; }
.cabecera__nav { display: flex; gap: 24px; font-size: .95rem; }
.cabecera__nav a { color: var(--color-tinta); text-decoration: none; }
.cabecera__nav a:hover { text-decoration: underline; }
.cabecera__nav a[aria-current="page"] { color: var(--color-marca); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; }
@media (max-width: 640px) {
  .logo__lema { display: none; }
  .cabecera__fila { flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 12px; padding-bottom: 10px; }
  .cabecera__nav { flex-wrap: wrap; gap: 4px 16px; font-size: .92rem; }
  .cabecera__nav a { white-space: nowrap; }
}

.pie { border-top: 1px solid var(--color-linea); padding: 32px 0; color: var(--color-tinta-suave); font-size: .88rem; }
.pie__fila { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.pie__nota { flex-basis: 100%; }

/* ---------- Portada ---------- */
.portada { padding: clamp(48px, 9vw, 104px) 0 clamp(48px, 7vw, 88px); }
.portada__rejilla { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 900px) { .portada__rejilla { grid-template-columns: 1.6fr 1fr; } }
.portada__subtitulo { font-size: 1.2rem; color: var(--color-tinta-suave); }
.portada__sello { display: none; justify-content: center; }
@media (min-width: 900px) { .portada__sello { display: flex; } }

.etiqueta {
  font-family: var(--fuente-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--color-marca); margin-bottom: 20px;
}
.letra-pequena { font-size: .9rem; color: var(--color-tinta-suave); margin-top: 16px; }

/* Formulario del escaneo: el único elemento naranja de la pantalla */
.escaneo { margin-top: 32px; max-width: 620px; }
.escaneo__etiqueta { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 8px; }
.escaneo__fila { display: flex; gap: 8px; }
.escaneo__campo {
  flex: 1; min-width: 0; padding: 14px 16px; font: 400 1.1rem var(--fuente-mono);
  color: var(--color-tinta); background: var(--color-superficie);
  border: 2px solid var(--color-tinta); border-radius: var(--radio);
}
.escaneo__campo::placeholder { color: #8A919B; }
.escaneo__error { color: var(--color-critico); font-weight: 600; margin: 12px 0 0; }
@media (max-width: 560px) { .escaneo__fila { flex-direction: column; } }

.boton-accion {
  display: inline-block; text-decoration: none; text-align: center;
  padding: 14px 24px; font: 600 1.05rem var(--fuente-texto); cursor: pointer; white-space: nowrap;
  color: var(--color-accion-texto); background: var(--color-accion);
  border: 2px solid var(--color-tinta); border-radius: var(--radio);
  box-shadow: 3px 3px 0 var(--color-tinta); transition: transform .1s, box-shadow .1s;
}
.boton-accion:hover { background: var(--color-accion-hover); }
.boton-accion:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--color-tinta); }
.boton-accion:disabled { opacity: .6; cursor: wait; }

.boton-secundario {
  display: inline-block; padding: 12px 20px; font-weight: 600; text-decoration: none; text-align: center;
  color: var(--color-marca); border: 2px solid var(--color-marca); border-radius: var(--radio);
}
.boton-secundario:hover { background: var(--color-marca); color: var(--color-superficie); }
.enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--color-marca); text-decoration: underline; cursor: pointer; }

/* ---------- El sello: la nota dentro de un sello de inspección, algo girado ---------- */
.sello {
  --tinta-sello: var(--color-marca);
  position: relative; flex: none; width: 200px; height: 200px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--tinta-sello); border: 5px solid var(--tinta-sello);
  outline: 2px solid var(--tinta-sello); outline-offset: -16px;
  transform: rotate(-8deg);
}
.sello__letra { font: 700 5.5rem/1 var(--fuente-titulos); }
.sello__texto { font: 400 .72rem var(--fuente-mono); text-transform: uppercase; letter-spacing: .18em; margin-top: 6px; }
.sello--vacio { --tinta-sello: var(--color-linea); color: #B9B2A2; }
.sello--vacio .sello__texto { color: var(--color-tinta-suave); }
.sello--pequeno { width: 120px; height: 120px; margin-bottom: 32px; }
.sello--pequeno .sello__letra { font-size: 2.2rem; }
.sello--ok { --tinta-sello: var(--color-ok); }
.sello--aviso { --tinta-sello: var(--color-aviso-texto); }
.sello--critico { --tinta-sello: var(--color-critico); }
.sello--estampado { animation: estampar .35s ease-out; }
@keyframes estampar { from { transform: rotate(-8deg) scale(1.6); opacity: 0; } to { transform: rotate(-8deg) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sello--estampado { animation: none; } }

/* ---------- Resultado ---------- */
.resultado { padding-bottom: 72px; }
.resultado__cargando { display: flex; align-items: center; gap: 12px; font-family: var(--fuente-mono); font-size: .95rem; }
.girando { width: 18px; height: 18px; border: 3px solid var(--color-linea); border-top-color: var(--color-marca); border-radius: 50%; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.informe {
  background: var(--color-superficie); border: 1px solid var(--color-linea); border-top: 6px solid var(--color-marca);
  padding: clamp(20px, 4vw, 48px); box-shadow: 0 1px 0 var(--color-linea), 0 12px 32px -20px rgba(27, 36, 48, .35);
}
.informe__cabecera {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  font-family: var(--fuente-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-tinta-suave); padding-bottom: 16px; border-bottom: 1px dashed var(--color-linea);
}
.informe__cabecera .mono { text-transform: none; letter-spacing: 0; font-size: 1em; }
.informe__resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; padding: 40px 0; border-bottom: 1px solid var(--color-linea); }
.informe__resumen > div:last-child { flex: 1; min-width: 240px; }
.informe__nota-etiqueta { font-family: var(--fuente-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--color-tinta-suave); margin: 0; }
.informe__nota { font: 700 2.4rem/1.2 var(--fuente-titulos); margin: 0 0 8px; }
.informe__puntos { font: 400 1rem var(--fuente-mono); color: var(--color-tinta-suave); }
.informe__meta { font-size: 1.1rem; margin-bottom: 12px; }
.informe__subtitulo { margin-top: 40px; font-size: 1.4rem; }
.informe__mas { color: var(--color-tinta-suave); font-style: italic; }

.progreso { height: 10px; background: var(--color-papel); border: 1px solid var(--color-linea); border-radius: 5px; overflow: hidden; max-width: 420px; }
.progreso__barra { height: 100%; background: var(--color-marca); transition: width .6s ease-out; }

/* Cada línea del informe: estado · qué pasa · por qué te importa · cómo arreglarlo · tiempo */
.hallazgo { border-left: 4px solid var(--color-linea); padding: 4px 0 4px 20px; margin: 24px 0; }
.hallazgo--critico { border-left-color: var(--color-critico); }
.hallazgo--aviso { border-left-color: var(--color-aviso); }
.hallazgo__cabecera { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: 8px; }
.hallazgo__titulo { font: 600 1.1rem/1.35 var(--fuente-texto); margin: 0; flex: 1; min-width: 220px; }
.hallazgo__resumen { margin: 0 0 8px; }
.hallazgo__mas summary { cursor: pointer; color: var(--color-marca); font-weight: 600; font-size: .95rem; width: fit-content; }
.hallazgo__mas summary:hover { text-decoration: underline; }
.hallazgo__mas[open] summary { margin-bottom: 12px; }
.hallazgo__detalle { margin: 0; display: grid; gap: 8px; }
.hallazgo__detalle > div { display: grid; grid-template-columns: 1fr; }
@media (min-width: 720px) { .hallazgo__detalle > div { grid-template-columns: 190px 1fr; gap: 16px; } }
.hallazgo__detalle dt { font-family: var(--fuente-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-tinta-suave); padding-top: .3em; }
.hallazgo__detalle dd { margin: 0; max-width: var(--ancho-lectura); }
.hallazgo__tiempo dd { font-family: var(--fuente-mono); font-size: .95rem; }

.estado { display: inline-flex; align-items: center; gap: 6px; font: 600 .78rem var(--fuente-mono); text-transform: uppercase; letter-spacing: .06em; }
.estado__icono { width: 16px; height: 16px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 11px; line-height: 1; }
.estado--ok { color: var(--color-ok); }
.estado--ok .estado__icono { background: var(--color-ok); }
.estado--ok .estado__icono::after { content: "✓"; }
.estado--aviso { color: var(--color-aviso-texto); }
.estado--aviso .estado__icono { background: var(--color-aviso); color: var(--color-tinta); }
.estado--aviso .estado__icono::after { content: "!"; }
.estado--critico { color: var(--color-critico); }
.estado--critico .estado__icono { background: var(--color-critico); }
.estado--critico .estado__icono::after { content: "✕"; }

.correctos { list-style: none; padding: 0; margin: 0; columns: 2 260px; column-gap: 32px; }
.correctos li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; break-inside: avoid; }

/* Qué añade un plan: caja clara (tinte suave del verde de marca), texto ligero y "+" en vez de candados */
.bloqueado { margin-top: 40px; padding: 20px 24px; background: #EEF4F2; border-left: 4px solid var(--color-marca); border-radius: var(--radio); }
.bloqueado__titulo-caja { font: 600 1.05rem var(--fuente-texto); color: var(--color-marca); margin-bottom: 6px; }
.bloqueado__intro { margin: 0 0 10px; }
.bloqueado__lista { list-style: none; padding: 0; margin: 0 0 16px; }
.bloqueado__lista li { padding: 7px 0 7px 24px; position: relative; }
.bloqueado__lista li::before { content: "+"; position: absolute; left: 2px; top: 9px; font: 600 1.1rem var(--fuente-mono); color: var(--color-marca); }
.bloqueado__titulo { display: block; }
.bloqueado__ejemplo { display: block; font: .82rem var(--fuente-mono); color: var(--color-tinta-suave); margin-top: 1px; }
.bloqueado__accion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.bloqueado__accion .letra-pequena { margin: 0; }

/* ---------- Secciones ---------- */
.seccion { padding: clamp(56px, 8vw, 96px) 0; border-top: 1px solid var(--color-linea); }
.seccion--superficie { background: var(--color-superficie); }
.seccion__intro { font-size: 1.1rem; color: var(--color-tinta-suave); margin-bottom: 40px; }

/* Qué revisamos: ilustración + nombre + una frase */
.revisamos { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 48px; grid-template-columns: 1fr; border-top: 2px solid var(--color-tinta); }
@media (min-width: 760px) { .revisamos { grid-template-columns: 1fr 1fr; } }
.revisamos__item { display: flex; gap: 20px; align-items: flex-start; padding: 28px 0; border-bottom: 1px solid var(--color-linea); }
.revisamos__icono { flex: none; width: 64px; height: 64px; }
.revisamos__codigo { display: block; font-size: .72rem; color: var(--color-marca); letter-spacing: .08em; margin-bottom: 2px; }
.revisamos h3 { margin-bottom: .2em; }
.revisamos p { margin: 0; color: var(--color-tinta-suave); }

.pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.paso { border-top: 2px solid var(--color-tinta); padding-top: 20px; }
.paso__cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.paso__numero { font: 400 3rem/1 var(--fuente-titulos); color: var(--color-marca); }
.paso__icono { width: 72px; height: 72px; }
.paso p { color: var(--color-tinta-suave); margin: 0; }

.ejemplo { position: relative; background: var(--color-superficie); border: 1px solid var(--color-linea); padding: 28px 28px 8px; }
.ejemplo__etiqueta { position: absolute; top: -12px; left: 20px; background: var(--color-papel); padding: 2px 10px; border: 1px solid var(--color-linea); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--color-tinta-suave); }
.ejemplo .hallazgo { margin-top: 8px; }

/* Cabecera de las páginas interiores (Precios, Preguntas…) */
.cabecera-pagina { padding: clamp(40px, 7vw, 80px) 0 clamp(32px, 5vw, 56px); }
.seccion--pegada { border-top: 0; padding-top: 24px; }
.seccion--superficie.seccion--pegada { border-top: 1px solid var(--color-linea); padding-top: 64px; }
.aviso-planes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; }
.aviso-planes p { margin: 0; font-size: 1.15rem; }
.preguntas__mas { margin-top: 32px; }

/* Metodología y textos legales */
.metodo__titulo { margin-top: 56px; }
.revisamos--compacto { margin: 24px 0 0; }
.revisamos--compacto .revisamos__item { padding: 16px 0; align-items: center; }
.revisamos--compacto .revisamos__icono { width: 48px; height: 48px; }
.revisamos--compacto h3 { margin: 0; font-size: 1.1rem; }
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; margin-top: 16px; }
.tabla th { text-align: left; font: 400 .75rem var(--fuente-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--color-tinta-suave); padding: 8px 12px 8px 0; border-bottom: 2px solid var(--color-tinta); }
.tabla td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--color-linea); vertical-align: top; }
.tabla__numero { text-align: right; white-space: nowrap; }
.tabla--estrecha { max-width: 280px; }
.tabla__nota { font: 700 1.2rem var(--fuente-titulos); }
.texto-legal h2 { font-size: 1.35rem; margin-top: 40px; }
.texto-legal p { color: var(--color-tinta); }
.pie__legal a { color: var(--color-tinta-suave); }

/* ---------- Precios ---------- */
.planes { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 900px) { .planes { grid-template-columns: repeat(3, 1fr); align-items: center; } }
.plan { display: flex; flex-direction: column; background: var(--color-papel); border: 1px solid var(--color-linea); padding: 32px 28px; height: 100%; }
.plan--destacado { background: var(--color-superficie); border: 2px solid var(--color-marca); padding: 44px 28px; position: relative; box-shadow: 0 16px 40px -24px rgba(15, 76, 74, .5); }
@media (min-width: 900px) { .plan--destacado { height: calc(100% + 32px); } }
.plan__distintivo { position: absolute; top: -14px; left: 28px; margin: 0; padding: 3px 12px; background: var(--color-marca); color: var(--color-superficie); font: 600 .75rem var(--fuente-mono); text-transform: uppercase; letter-spacing: .08em; }
.plan__nombre { font-size: 1.6rem; margin-bottom: 4px; }
.plan__para { color: var(--color-tinta-suave); font-size: .95rem; }
.plan__precio { margin: 8px 0 0; }
.plan__cifra { font: 700 2.6rem/1 var(--fuente-titulos); }
.plan__iva { font-size: .85rem; color: var(--color-tinta-suave); }
.plan__anual { font-size: .9rem; color: var(--color-tinta-suave); margin: 12px 0 20px; }
.plan__anual strong { color: var(--color-tinta); }
.plan__tachado { font-size: .85rem; color: var(--color-tinta-suave); margin: 0 4px; }
.plan__ahorro { display: block; margin-top: 4px; font-size: .82rem; font-weight: 600; color: var(--color-ok); }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.plan__incluye { list-style: none; padding: 16px 0 0; margin: 0 0 28px; border-top: 1px dashed var(--color-linea); flex: 1; }
.plan__anterior { margin: 0; padding: 16px 0 0; border-top: 1px dashed var(--color-linea); font-weight: 600; color: var(--color-marca); }
.plan__anterior + .plan__incluye { border-top: 0; padding-top: 6px; }
.plan__incluye li { padding: 5px 0 5px 24px; position: relative; }
.plan__incluye li::before { content: "✓"; position: absolute; left: 0; color: var(--color-marca); font-weight: 700; }
.plan__boton { width: 100%; }
.plan__pronto { margin: 0; padding: 10px 0; text-align: center; font-weight: 600; color: var(--color-tinta-suave);
  border: 1px dashed var(--color-linea); border-radius: var(--radio); }
.planes__nota { text-align: center; margin: 32px auto 0; color: var(--color-tinta-suave); max-width: none; }
.planes__nota + .planes__nota { margin-top: 4px; }

/* ---------- Lista de espera (en /precios) ---------- */
.lista { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 24px; }
.lista .escaneo__campo { width: 100%; margin-bottom: 16px; }
.lista__plan { font-family: var(--fuente-texto); }
.casilla { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; cursor: pointer; }
.casilla input { flex: none; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--color-marca); }
.lista .letra-pequena { margin: 4px 0 16px; }
.lista__hecho { margin-top: 24px; padding: 20px 24px; background: var(--color-superficie);
  border: 2px solid var(--color-marca); border-radius: var(--radio); }
.lista__hecho h3 { margin-top: 0; }

/* ---------- Preguntas ---------- */
.pregunta { border-bottom: 1px solid var(--color-linea); }
.pregunta:first-of-type { border-top: 2px solid var(--color-tinta); }
.pregunta summary { cursor: pointer; padding: 20px 40px 20px 0; font-weight: 600; font-size: 1.08rem; list-style: none; position: relative; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font: 400 1.5rem var(--fuente-mono); color: var(--color-marca); }
.pregunta[open] summary::after { content: "−"; }
.pregunta p { color: var(--color-tinta-suave); padding-bottom: 12px; }

/* ---------- Cuentas: /entrar y /cuenta ---------- */
.aviso-caja { margin: 16px 0; padding: 14px 18px; background: var(--color-superficie);
  border: 1px solid var(--color-linea); border-left: 4px solid var(--color-aviso); border-radius: var(--radio); }
.aviso-caja--ok { border-left-color: var(--color-ok); }
.aviso-caja p { margin: 0 0 10px; }
.aviso-caja p:last-child { margin-bottom: 0; }
.boton-peligro { padding: 10px 18px; font: 600 .95rem var(--fuente-texto); cursor: pointer;
  color: var(--color-critico); background: none; border: 2px solid var(--color-critico); border-radius: var(--radio); }
.boton-peligro:hover { background: var(--color-critico); color: var(--color-superficie); }
.cuenta-gratis { margin-top: 32px; padding: 20px 24px; border: 2px solid var(--color-marca);
  border-radius: var(--radio); background: var(--color-papel); }
.cuenta-gratis p { margin: 8px 0 16px; }
.plan__boton-anual { display: block; margin: 10px auto 0; font-size: .92rem; }

.panel__cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.panel__cabecera h1 { margin-bottom: 4px; }
.panel__email { color: var(--color-tinta-suave); margin: 0; overflow-wrap: anywhere; }
.panel__plan { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 24px; background: var(--color-superficie); border: 1px solid var(--color-linea); border-radius: var(--radio); }
.panel__plan h2 { margin: 4px 0 8px; }
.panel__plan p { margin: 0; max-width: 60ch; }
.panel__plan-accion { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.panel__anadir { margin-top: 24px; max-width: 560px; }

.dominio { padding: 20px 24px; margin-bottom: 16px; background: var(--color-superficie);
  border: 1px solid var(--color-linea); border-radius: var(--radio); }
.dominio__cabecera { display: flex; align-items: center; gap: 18px; }
.dominio__nombre { font-size: 1.15rem; margin: 0 0 4px; overflow-wrap: anywhere; }
.dominio__meta { margin: 0; font-size: .92rem; color: var(--color-tinta-suave); }
.dominio__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.dominio__acciones .boton-secundario { padding: 8px 14px; font-size: .92rem; cursor: pointer; background: none; font-family: var(--fuente-texto); }
.dominio__quitar { margin-left: auto; color: var(--color-critico); }
.sello--mini { width: 64px; height: 64px; border-width: 3px; outline-width: 1px; outline-offset: -8px; }
.sello--mini .sello__letra { font-size: 1.8rem; }

.verificar { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--color-linea); }
.verificar__titulo { margin: 0 0 6px; font-size: 1rem; }
.verificar p { margin: 0 0 8px; max-width: 70ch; }
.verificar__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 4px 0 14px; }
.verificar__valor { padding: 8px 12px; background: var(--color-papel); border: 1px solid var(--color-linea);
  border-radius: var(--radio); font-size: .88rem; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .panel__cabecera { flex-direction: column; }
  .dominio { padding: 16px; }
  .dominio__quitar { margin-left: 0; }
}

/* ---------- Gráfica de evolución de la nota (pintar.js) ---------- */
.evolucion { margin-top: 18px; }
.evolucion__titulo { margin: 0 0 6px; font: 600 .95rem var(--fuente-texto); }
.evolucion__grafica { position: relative; }
.evolucion__svg { display: block; overflow: visible; outline-offset: 4px; }
.evolucion__rejilla { stroke: var(--color-linea); stroke-width: 1; }
.evolucion__eje { font: 400 11px var(--fuente-mono); fill: var(--color-tinta-suave); }
.evolucion__linea { fill: none; stroke: var(--color-marca); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.evolucion__punto { fill: var(--color-marca); stroke: var(--color-superficie); stroke-width: 2; }
.evolucion__punto--activo { r: 6; }
.evolucion__cruz { stroke: var(--color-tinta-suave); stroke-width: 1; }
.evolucion__etiqueta { font: 700 13px var(--fuente-titulos); fill: var(--color-tinta); }
.evolucion__globo { position: absolute; width: 140px; padding: 6px 10px; pointer-events: none;
  background: var(--color-superficie); border: 1px solid var(--color-linea); border-radius: var(--radio);
  box-shadow: 0 2px 6px rgba(27, 36, 48, .12); font-size: .85rem; }
.evolucion__globo strong { display: block; color: var(--color-tinta); }
.evolucion__globo span { color: var(--color-tinta-suave); }
.evolucion__tabla { margin-top: 6px; font-size: .9rem; }
.evolucion__tabla summary { cursor: pointer; color: var(--color-marca); }

/* ---------- Guías de proveedor (proveedores.py) ---------- */
.informe__proveedores { margin: 10px 0 0; font-size: .88rem; color: var(--color-tinta-suave); }
.informe__proveedores:empty { display: none; }
.hallazgo__ayuda ul { margin: 0; padding-left: 18px; }
.hallazgo__ayuda li { margin-bottom: 4px; }
.hallazgo__ayuda a { color: var(--color-marca); }

/* ---------- Distintivo: página /verificado y bloque del panel ---------- */
.verificado { display: flex; align-items: center; gap: 32px; margin-top: 16px; }
.verificado .sello { width: 150px; height: 150px; }
.verificado .sello__letra { font-size: 4rem; }
.verificado__titular { font: 700 1.3rem/1.35 var(--fuente-titulos); margin: 0 0 8px; }
@media (max-width: 560px) { .verificado { flex-direction: column; align-items: flex-start; } }
.distintivo__vista { display: block; margin: 8px 0 12px; }
.distintivo__codigo { width: 100%; min-height: 84px; padding: 8px 12px; font: .8rem/1.4 var(--fuente-mono);
  background: var(--color-papel); border: 1px solid var(--color-linea); border-radius: var(--radio); resize: vertical; }

/* ---------- Invita a un amigo (panel) ---------- */
.invita { margin-top: 16px; padding: 18px 24px; background: var(--color-superficie);
  border: 1px solid var(--color-linea); border-radius: var(--radio); }