/* /visibilidad-ia — diagnóstico de qué tan legible es una web para la IA.
   Solo tokens del sistema: hereda claro y oscuro de premium.css. */

.vi-form { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; max-width: 640px; }
.vi-form input {
    flex: 1 1 280px; min-width: 0; padding: 14px 16px; font: inherit; font-size: 16px;
    color: var(--text-primary); background: var(--bg-card);
    border: 1px solid var(--px-line-strong); border-radius: 10px;
}
.vi-form input:focus { outline: 2px solid var(--accent-primary); outline-offset: 1px; }
.vi-ayuda { margin-top: 10px; font-size: 14px; color: var(--px-faint); }
.vi-error { margin-top: 14px; color: var(--px-warm); font-weight: 500; }

.vi-espera { display: flex; align-items: center; gap: 12px; margin-top: 24px; color: var(--text-secondary); }
.vi-espera i { animation: vi-gira 1.2s linear infinite; }
@keyframes vi-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vi-espera i { animation: none; } }

.vi-resultado { margin-top: 8px; }
.vi-cabecera { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; padding: 28px; border: 1px solid var(--px-line-strong); border-radius: 16px; background: var(--bg-card); }
.vi-nivel { font-family: var(--px-label); font-variant-numeric: tabular-nums; text-align: center; min-width: 96px; }
.vi-nivel b { display: block; font-size: 56px; line-height: 1; color: var(--accent-primary); }
.vi-nivel span { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--px-faint); }
.vi-cabecera h2 { margin: 0 0 6px; font-size: 22px; }
.vi-cabecera p { margin: 0; color: var(--text-secondary); }
.vi-meta { margin-top: 10px !important; color: var(--px-warm) !important; font-weight: 500; }

.vi-escala { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 20px 0 8px; }
.vi-escala span { height: 8px; border-radius: 4px; background: var(--px-line-strong); }
.vi-escala span.on { background: var(--accent-primary); }

.vi-siguiente { margin: 24px 0 0; padding: 16px 20px; border-left: 3px solid var(--accent-primary); background: var(--px-accent-dim); border-radius: 0 10px 10px 0; }

.vi-grupos { display: grid; gap: 16px; margin-top: 28px; }
.vi-grupo { padding: 20px 24px; border: 1px solid var(--px-line); border-radius: 14px; background: var(--bg-card); }
.vi-grupo h3 { margin: 0 0 4px; font-size: 17px; }
.vi-grupo .vi-nota { margin: 0 0 8px; font-size: 13px; color: var(--px-faint); }
.vi-item { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--px-line); }
.vi-item:first-of-type { border-top: 0; }
.vi-item svg, .vi-item i { width: 20px; height: 20px; margin-top: 2px; }
.vi-item.ok { color: var(--accent-primary); }
.vi-item.falta { color: var(--px-warm); }
.vi-item.sin-dato { color: var(--px-faint); }
.vi-item b { display: block; color: var(--text-primary); font-weight: 600; }
.vi-item p { margin: 2px 0 0; color: var(--text-secondary); font-size: 15px; }

.vi-pie { margin-top: 16px; font-size: 13px; color: var(--px-faint); }

@media (max-width: 560px) {
    .vi-cabecera { grid-template-columns: 1fr; text-align: center; padding: 22px; }
}

.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; }