/* Radar de riesgo: lo que se suma a la base (styles.css, copia de contrato-seguro/styles.css).
   Puntaje: 100 = sin riesgos detectados (al revés que Contrato Seguro). Verde ≥ 80, ámbar 50–79, rojo < 50.
   Sale del mockup aprobado, sin su barra de pantallas. */

/* El rojo de las pills y de la banda alta: --bad sobre --bad-bg da 3,95:1 en claro; este, 5,17:1. En oscuro
   --bad ya pasa (5,83:1). */
:root { --bad-ink: #b8304a; }
@media (prefers-color-scheme: dark) { :root { --bad-ink: var(--bad); } }

/* Campo de dominio (variante A) */
.dom { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); padding: 0 12px; }
.dom:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px var(--tint); }
.dom[aria-invalid="true"], .dom:has(input[aria-invalid="true"]) { border-color: var(--bad); }
.dom span { color: var(--faint); font: 14px var(--mono); }
.dom input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: 17px var(--sans); padding: 13px 4px; outline: none; }

/* Escaneando */
.scan { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; align-items: center; }
@media (max-width: 640px) { .scan { grid-template-columns: 1fr; } .scope { justify-self: center; } }
.scan .eyebrow { overflow-wrap: anywhere; }
.scope { width: 220px; max-width: 100%; aspect-ratio: 1; position: relative; border-radius: 50%; background: var(--sunk); border: 1px solid var(--line); overflow: hidden; }
.scope svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scope .sweep { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 300deg, var(--tint) 340deg, rgba(255, 82, 28, 0.55) 360deg);
  animation: sweep 2.4s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .scope .sweep { animation: none; } }

/* Resultado: cabecera */
.res { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 0; padding: 0; }
@media (max-width: 860px) { .res { grid-template-columns: 1fr; } }
.res > div { padding: 24px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 420px) { .res > div { padding: 18px; } }
.res > .lead { border-left: 1px solid var(--line); background: var(--sunk); border-radius: 0 14px 14px 0; }
@media (max-width: 860px) { .res > .lead { border-left: 0; border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; } }
.host { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; margin: 0; font-size: inherit; font-weight: inherit; }
.host b { font-size: 24px; letter-spacing: -0.01em; overflow-wrap: anywhere; min-width: 0; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--sunk); border: 1px solid var(--line); color: var(--ink-2); }
.tag.reg { background: var(--info-bg); border-color: transparent; color: var(--info-fg); font-weight: 700; }
.headline { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.big { display: flex; align-items: baseline; gap: 6px; }
.big .n { font: 400 64px/1 var(--mono); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.big .of { font: 400 18px var(--mono); color: var(--mute); }
.potline { font-size: 13.5px; color: var(--mute); }
.potline b { font: 400 22px var(--mono); color: var(--ok-fg); }
.band { font: 700 13px var(--sans); padding: 4px 10px; border-radius: 999px; align-self: flex-start; }
.band.hi { background: var(--ok-bg); color: var(--ok-fg); }
.band.mid { background: var(--warn-bg); color: var(--warn-fg); }
.band.lo { background: var(--bad-bg); color: var(--bad-ink); }
#radar { width: 100%; max-width: 460px; height: auto; display: block; align-self: center; overflow: visible; }
#radar .ring { fill: none; stroke: var(--line-2); }
#radar .spoke { stroke: var(--line-2); }
#radar .rl { fill: var(--mute); font: 10px var(--mono); }
#radar .ax { fill: var(--ink); font: 700 14px var(--sans); }
#radar .ax.hot { fill: var(--orange); }
#radar .ax.off { fill: var(--mute); }
#radar .axs { fill: var(--mute); font: 13px var(--mono); }
#radar .axs.off { fill: var(--mute); font-style: italic; }
#radar .shape { fill: var(--tint); stroke: var(--orange); stroke-width: 2; stroke-linejoin: round; }
#radar .pot { fill: none; stroke: var(--ok-fg); stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; stroke-linejoin: round; }
#radar .dot { fill: var(--orange); }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; font-size: 13px; color: var(--mute); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 24px; border-top: 2.5px solid var(--orange); }
.legend i.d { border-top: 2.5px dotted var(--ok-fg); }
.warns { list-style: none; margin: 0; padding: 10px 12px; display: grid; gap: 4px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-fg); font-size: 13px; }
.warns:empty { display: none; }

/* Ejes */
.axes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .axes { grid-template-columns: 1fr; } }
.axis { gap: 10px; min-width: 0; }
.axis header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.axis h3 { margin: 0; font-size: 16px; }
.axis .sc { font: 400 22px var(--mono); font-variant-numeric: tabular-nums; }
.axis .sc.ok { color: var(--ok-fg); }
.axis .sc.warn { color: var(--warn-fg); }
.axis .sc.bad { color: var(--bad); }
.axis .sc.off { color: var(--mute); font-size: 14px; font-family: var(--sans); }
.axis .q { margin: -4px 0 0; color: var(--mute); font-size: 13px; }
.bar { height: 6px; border-radius: 99px; background: var(--sunk); border: 1px solid var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 99px; }
.bar i.ok { background: var(--ok-fg); }
.bar i.warn { background: var(--warn-fg); }
.bar i.bad { background: var(--bad); }
ul.fx { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
ul.fx li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; font-size: 13.5px; color: var(--ink-2); overflow-wrap: anywhere; }
ul.fx .p { font: 13px var(--mono); color: var(--bad); text-align: right; font-variant-numeric: tabular-nums; }
ul.fx .p.z { color: var(--faint); }
.axis .none { margin: 0; font-size: 13.5px; color: var(--mute); }

/* Compliance a lo ancho, con evidencia y obligaciones */
.axis.wide { grid-column: 1 / -1; }
.cgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 760px) { .cgrid { grid-template-columns: 1fr; } }
dl.ev { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; font-size: 13px; align-content: start; }
@media (max-width: 420px) { dl.ev { grid-template-columns: 1fr; gap: 2px; } dl.ev dd { margin-bottom: 6px; } }
dl.ev dt { color: var(--mute); }
dl.ev dd { margin: 0; overflow-wrap: anywhere; }
.st { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.st.no { background: var(--bad-bg); color: var(--bad-ink); }
.st.yes { background: var(--ok-bg); color: var(--ok-fg); }
.st.part { background: var(--warn-bg); color: var(--warn-fg); }
.st.na { background: var(--sunk); color: var(--mute); border: 1px solid var(--line); }
.oblig { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--sunk); }
.oblig h4 { margin: 0; font-size: 13.5px; }
.oblig ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.oblig li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; font-size: 13px; }
.oblig li small { display: block; color: var(--mute); font-size: 12px; }
.oblig .none { margin: 0; font-size: 13px; color: var(--mute); }

/* Lead */
.lead h2 { font-size: 19px; }
.lead ul.gets { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.lead ul.gets li::before { content: "✓"; color: var(--orange); font-weight: 700; margin-right: 8px; }
.lead .sent b, .lead .sent span, .domain .chip { overflow-wrap: anywhere; min-width: 0; }

.limits { color: var(--mute); font-size: 13px; }
.limits ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }

/* Lo que en el mockup eran atributos style="": la CSP (style-src 'self') no los deja. */
.stack.results { gap: 20px; }
.stack.tight { gap: 6px; }
.stack.mid { gap: 14px; }
.stack.snug { gap: 12px; }
.leadsub { font-size: 13.5px; }
.section.next { padding-top: 12px; }
.limits h3 { margin: 0; color: var(--ink); font-size: 15px; }
.scope .grid { fill: none; stroke: var(--line-2); }
.scope .blip { fill: var(--orange); }