/* =========================================================
   FONSI SEO AUDIT — HOJA DE ESTILOS PRINCIPAL
   =========================================================
   ÍNDICE POR PANTALLAS Y ELEMENTOS
   01. Sistema de diseño, tipografía y elementos base
   02. Nueva auditoría
   03. Auditoría en curso
   04. Informe: estructura principal
   05. Informe: cabecera
   06. Informe: adaptación de estructura y cabecera
   07. Componentes compartidos y compatibilidad
   08. Resumen ejecutivo y explorador de URLs
       08.1-08.8: métricas, paneles, estados y responsive
       Incluye: SEO On-Page, Datos estructurados, detalle URL
   09. Vistas de análisis
   10. Informe legado y módulos especializados
       Prioridades, rastreo, sitemap, arquitectura,
       canonical, tablas, indexabilidad y otros módulos
   11. Pie de página
   12. Pantalla de inicio de sesión

   CONVENCIONES
   - Los media queries se conservan cerca de cada módulo.
   - Breakpoints documentados junto a sus componentes.
   - Se conserva el orden de cascada para evitar regresiones.
   - Variables globales en :root; reglas de vista agrupadas.
   ========================================================= */

/* =========================================================
   01. SISTEMA DE DISEÑO
   ========================================================= */

/* Tipografía principal de la interfaz. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700;800&display=swap');

:root {
    /* =====================================================
       COLORES
       ===================================================== */

    /* Texto */
    --color-heading: #25344A;
    --color-text: #64748b;
    --color-text-muted: #8492a6;
    --color-text-subtle: #a8b3c2;

    /* Superficies */
    --color-background: #fefefe;
    --color-surface: #ffffff;
    --color-surface-soft: #f8fafc;
    --color-surface-dark: #111827;

    /* Bordes */
    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;

    /* Marca y acciones */
    --color-primary: #25344A;
    --color-accent: #4f7cac;
    --color-action: #3b6df6;

    /* Estados */
    --color-success: #55bf88;
    --color-success-soft: #ecfdf3;
    --color-success-dark: #067647;
   
    --color-warning: #ff9f1c;
    --color-warning-soft: #fffaeb;
    --color-warning-dark: #93370d;
   
    --color-danger: #ef4444;
    --color-danger-soft: #fef2f2;
    --color-danger-dark: #991b1b;
   
    --color-review: #3b82f6;
    --color-review-soft: #eff6ff;
   
    --color-info: #a7b5c7;
    --color-neutral: #e7edf5;

   /* Estado específico noindex */
    --color-noindex: #6941c6;
    --color-noindex-soft: #f4f3ff;

    /* =====================================================
       TIPOGRAFÍA
       ===================================================== */

    /* Encabezados */
    --font-size-h1: 30px;
    --font-size-h2: 24px;
    --font-size-h3: 22px;
    --font-size-h4: 20px;
    --font-size-h5: 18px;
    --font-size-h6: 16px;

    /* Texto */
    --font-size-body: 14px;
    --font-size-small: 12px;
    --font-size-micro: 10px;
    --font-size-lead: 16px;
    --font-size-large: 18px;
}

/* Modelo de caja global. */
* {
    box-sizing: border-box;
}

/* Base de la interfaz. */
body {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: var(--color-text);
    background: var(--color-background);
    font-family:
        "Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: var(--font-size-body);
    line-height: 1.6;
}

/* Jerarquía tipográfica global. */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    color: var(--color-heading);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

h1 {
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2);
}

h3 {
    font-size: var(--font-size-h3);
}

h4 {
    font-size: var(--font-size-h4);
}

h5 {
    font-size: var(--font-size-h5);
}

h6 {
    font-size: var(--font-size-h6);
}

/* Identidad FONSI compartida: informe, nueva auditoría y acceso. */
.app-brand-logo,
.audit-start-brand-logo,
.login-brand-logo {
    display: block;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.app-brand-name,
.audit-start-brand-text,
.login-brand-name {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
    font-family: "Inter", sans-serif;
}

.app-brand-name strong,
.audit-start-brand-text strong,
.login-brand-name strong,
.login-brand > strong {
    color: var(--color-heading);
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
}

.app-brand-name > span,
.audit-start-brand-text > span,
.login-brand-name > span,
.login-brand > span:not(.app-brand-name):not(.login-brand-name) {
    color: var(--color-text-subtle);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
}

/* =========================================================
   MÓDULO · TABLAS DE INFORMES
   ========================================================= */

/* Contenedor común */
.report-table {
    width: 100%;
    min-width: 0;
}

/* Estructura compartida de las filas */
.report-table-row {
    display: grid;
    gap: 12px;
    align-items: center;
    width: 100%;
}

/* Encabezados */
.report-table-head {
    padding: 10px 18px;
    color: var(--color-text-subtle);
    background: var(--color-surface-soft);
    border-radius: 8px 8px 0 0;
    font-size: var(--font-size-micro);
    font-weight: 600;
    line-height: 1;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Filas de datos */
.report-table-data {
    padding: 14px 18px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text);
    background: var(--color-surface);
    font-size: var(--font-size-body);
}

/* Evitar una línea adicional debajo del encabezado */
.report-table-head + .report-table-data {
    border-top: 0;
}

/* Celdas */
.report-table-row > * {
    min-width: 0;
}

/* Valores destacados */
.report-table-strong {
    color: var(--color-heading);
    font-weight: 600;
}

/* Valores secundarios */
.report-table-muted {
    color: var(--color-text-muted);
}

/* Filas interactivas: solo cuando corresponda */
.report-table-data--interactive {
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}

.report-table-data--interactive:hover {
    background: var(--color-background);
}

.report-table-data--interactive.activo {
    background: var(--color-surface-soft);
    box-shadow: inset 3px 0 0 var(--color-action);
}

/* Elementos ocultos por paginación o filtros */
.report-table-data[hidden] {
    display: none;
}

/* =========================================================
   BUSCADORES Y FILTROS DE INFORMES
   ========================================================= */

.report-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    margin: 20px 0 18px;
}

.report-filters-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    background: var(--color-surface);
}

.report-filters-search:focus-within {
    border-color: var(--color-action);
    outline: 2px solid rgba(59, 109, 246, 0.12);
}

.report-filters-search input {
    width: 100%;
    min-width: 0;
    padding: 9px 0;
    border: 0;
    outline: 0;
    color: var(--color-text);
    background: transparent;
    font: inherit;
    font-size: var(--font-size-body);
}

.report-filters-search input::placeholder {
    color: var(--color-text-muted);
}

.report-filters-controls {
    display: grid;
    grid-template-columns:
        repeat(var(--report-filter-columns, 3), minmax(0, 1fr))
        auto;
    gap: 10px;
    align-items: center;
    width: 100%;
}

.report-filters-controls label {
    display: block;
    min-width: 0;
}

.report-filters-controls select {
    width: 100%;
    min-height: 38px;
    padding: 0 34px 0 11px;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    color: var(--color-text);
    background: var(--color-surface);
    font: inherit;
    font-size: var(--font-size-body);
    font-weight: 600;
    cursor: pointer;
}

.report-filters-controls select:hover {
    border-color: var(--color-border-strong);
}

.report-filters-controls select:focus {
    border-color: var(--color-action);
    outline: 2px solid rgba(59, 109, 246, 0.12);
    outline-offset: 1px;
}

.report-filters-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid rgba(59, 109, 246, 0.18);
    border-radius: 7px;
    color: var(--color-accent);
    background: rgba(59, 109, 246, 0.06);
    font: inherit;
    font-size: var(--font-size-body);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.report-filters-reset:hover {
    background: rgba(59, 109, 246, 0.1);
    border-color: rgba(59, 109, 246, 0.3);
}

.report-filters-reset img {
    width: 15px;
    height: 15px;
}

@media (max-width: 900px) {
    .report-filters-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .report-filters-controls {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* =========================================================
   02. NUEVA AUDITORÍA
   ========================================================= */

/* Estructura general. */
.audit-start {
    width: 100%;
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(59, 130, 246, 0.07),
            transparent 34%
        ),
        var(--color-background);
}

/* Cabecera. */
.audit-start-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 76px;
    padding: 0 32px;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--color-border);
}

.audit-start-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--color-heading);
    text-decoration: none;
}

.audit-start-brand:hover {
    color: var(--color-heading);
}

/* Versión de la aplicación. */
.audit-start-version {
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-muted);
    background: var(--color-surface);
    font-size: var(--font-size-small);
    font-weight: 600;
}

/* Introducción. */
.audit-start-main {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    padding: 64px 24px 48px;
}

.audit-start-intro {
    width: 100%;
    max-width: 760px;
    margin-bottom: 28px;
    text-align: center;
}

.audit-start-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--color-action);
    font-size: var(--font-size-small);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.audit-start-intro h1 {
    margin: 0;
    color: var(--color-heading);
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.audit-start-intro p {
    max-width: 620px;
    margin: 14px auto 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-lead);
    line-height: 1.65;
}

/* Formulario principal. */
.formulario-auditoria.audit-start-card {
    width: 100%;
    max-width: 760px;
    margin: 0;
    padding: 30px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.06),
        0 2px 8px rgba(15, 23, 42, 0.03);
}

.audit-start-field {
    margin: 0 0 25px;
}

.audit-start-field:last-of-type {
    margin-bottom: 0;
}

.audit-start-field > label,
.audit-start-field legend,
.audit-start-label-row label {
    color: var(--color-heading);
    font-size: var(--font-size-body);
    font-weight: 600;
}

.audit-start-field legend {
    margin-bottom: 11px;
}

/* Campo URL. */
.audit-start-card input[type="url"] {
    width: 100%;
    height: 46px;
    margin-top: 8px;
    padding: 0 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    outline: none;
    color: var(--color-heading);
    background: var(--color-surface);
    font: inherit;
    font-size: var(--font-size-body);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.audit-start-card input[type="url"]::placeholder {
    color: var(--color-text-subtle);
}

.audit-start-card input[type="url"]:focus {
    border-color: var(--color-action);
    box-shadow: 0 0 0 3px rgba(59, 109, 246, 0.12);
}

/* Selector del tipo de auditoría. */
.audit-start-type {
    padding: 0;
    border: 0;
}

.audit-start-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.audit-start-option {
    position: relative;
    display: block;
    min-width: 0;
    cursor: pointer;
}

.audit-start-option > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.audit-start-option-content {
    display: block;
    min-height: 104px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}

.audit-start-option:hover .audit-start-option-content {
    border-color: var(--color-border-strong);
    background: var(--color-surface-soft);
}

.audit-start-option > input:checked + .audit-start-option-content {
    border-color: var(--color-action);
    background: var(--color-review-soft);
    box-shadow: 0 0 0 1px var(--color-action);
}

.audit-start-option > input:focus-visible + .audit-start-option-content {
    outline: 3px solid rgba(59, 109, 246, 0.2);
    outline-offset: 2px;
}

.audit-start-option-heading {
    display: flex;
    align-items: center;
    gap: 9px;
}

.audit-start-radio {
    position: relative;
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--color-text-subtle);
    border-radius: 50%;
    background: var(--color-surface);
}

.audit-start-option > input:checked
    + .audit-start-option-content
    .audit-start-radio {
    border-color: var(--color-action);
}

.audit-start-option > input:checked
    + .audit-start-option-content
    .audit-start-radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--color-action);
}

.audit-start-option-heading strong {
    color: var(--color-heading);
    font-size: var(--font-size-body);
    font-weight: 600;
}

.audit-start-option-description {
    display: block;
    margin: 9px 0 0 26px;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    line-height: 1.5;
}

/* Campo opcional. */
.audit-start-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.audit-start-optional {
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--color-text-muted);
    background: var(--color-surface-soft);
    font-size: var(--font-size-micro);
    font-weight: 600;
}

.audit-start-card small {
    display: block;
    margin-top: 8px;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    line-height: 1.5;
}

/* Acción principal. */
.audit-start-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--color-border);
}

.audit-start-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid var(--color-action);
    border-radius: 8px;
    color: var(--color-surface);
    background: var(--color-action);
    font: inherit;
    font-size: var(--font-size-body);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37, 87, 214, 0.18);
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}

.audit-start-actions button:hover {
    border-color: var(--color-accent);
    background: var(--color-accent);
}

.audit-start-actions button:active {
    transform: translateY(1px);
}

.audit-start-actions button:focus-visible {
    outline: 3px solid rgba(59, 109, 246, 0.22);
    outline-offset: 2px;
}

/* Nota inferior. */
.audit-start-note {
    max-width: 680px;
    margin: 20px auto 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    line-height: 1.5;
    text-align: center;
}

/* Responsive. */
@media (max-width: 700px) {

    .audit-start-topbar {
        min-height: 66px;
        padding: 0 18px;
    }

    .audit-start-main {
        padding: 42px 16px 32px;
    }

    .audit-start-intro {
        margin-bottom: 22px;
    }

    .audit-start-intro h1 {
        font-size: 32px;
    }

    .audit-start-intro p {
        font-size: var(--font-size-body);
    }

    .formulario-auditoria.audit-start-card {
        padding: 22px 18px;
        border-radius: 12px;
    }

    .audit-start-options {
        grid-template-columns: 1fr;
    }

    .audit-start-option-content {
        min-height: 0;
    }

    .audit-start-actions button {
        width: 100%;
    }
}


/* =========================================================
   03. AUDITORÍA EN CURSO
   ========================================================= */

/* Estructura general. */
.audit-running {
    position: fixed;
    inset: 0;
    z-index: 1000;
    width: 100%;
    min-height: 100vh;
    overflow-y: auto;
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(59, 109, 246, 0.10),
            transparent 32%
        ),
        var(--color-background);
}

.audit-running[hidden] {
    display: none;
}

.audit-running-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
}

/* Cabecera. */
.audit-running-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    width: 100%;
    min-height: 76px;
    padding: 0 32px;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(12px);
}

.audit-running-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

.audit-running-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: var(--color-surface);
    background: var(--color-action);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.audit-running-brand-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1;
}

.audit-running-brand-text strong {
    color: var(--color-heading);
    font-size: var(--font-size-large);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.audit-running-brand-text span {
    color: var(--color-text);
    font-size: var(--font-size-body);
    font-weight: 600;
}

.audit-running-version {
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-muted);
    background: var(--color-surface);
    font-size: var(--font-size-small);
    font-weight: 600;
}

/* Contenido principal. */
.audit-running-main {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 52px 28px 38px;
    text-align: center;
}

/* Indicador visual de actividad. */
.audit-running-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 116px;
    height: 116px;
    margin-bottom: 24px;
}

.audit-running-orbit {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(59, 109, 246, 0.24);
    border-top-color: var(--color-action);
    border-radius: 50%;
    animation: audit-running-spin 3s linear infinite;
}

.audit-running-orbit-secondary {
    inset: 12px;
    border-color: rgba(59, 109, 246, 0.13);
    border-right-color: #7aa0ff;
    animation-duration: 2.2s;
    animation-direction: reverse;
}

.audit-running-core {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    color: var(--color-surface);
    background:
        linear-gradient(
            145deg,
            #4778ff,
            #2453d4
        );
    font-size: 32px;
    font-weight: 700;
    box-shadow:
        0 12px 28px rgba(37, 87, 214, 0.22),
        0 0 0 8px rgba(59, 109, 246, 0.06);
    animation: audit-running-core-pulse 2s ease-in-out infinite;
}

/* Estado actual de la auditoría. */
.audit-running-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--color-action);
    font-size: var(--font-size-small);
    font-weight: 700;
    letter-spacing: 0.09em;
}

.audit-running-intro h1 {
    margin: 0;
    color: var(--color-heading);
    font-size: var(--font-size-h1);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.audit-running-description {
    max-width: 620px;
    margin: 12px auto 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    line-height: 1.6;
}

/* URL o elemento actualmente procesado. */
.audit-running-current {
    width: 100%;
    max-width: 720px;
    margin-top: 25px;
    padding: 13px 18px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.78);
    text-align: left;
}

.audit-running-current-label {
    display: block;
    margin-bottom: 4px;
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.audit-running-current strong {
    display: block;
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--font-size-small);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cronómetro. */
.audit-running-stopwatch {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    margin-top: 27px;
}

.audit-running-stopwatch-icon {
    color: var(--color-action);
    font-size: 22px;
}

.audit-running-stopwatch strong {
    color: var(--color-heading);
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.audit-running-stopwatch > span:last-child {
    grid-column: 1 / -1;
    margin-top: 8px;
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Indicador de progreso indeterminado. */
.audit-running-progress {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 3px;
    margin-top: 27px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-neutral);
}

.audit-running-progress-line {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(59, 109, 246, 0.18),
            transparent
        );
}

.audit-running-progress-pulse {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -22%;
    width: 22%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            rgba(59, 109, 246, 0),
            var(--color-action),
            rgba(59, 109, 246, 0)
        );
    animation: audit-running-progress 2s ease-in-out infinite;
}

/* Métricas de ejecución. */
.audit-running-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    max-width: 720px;
    margin: 27px 0 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.035);
}

.audit-running-stats div {
    padding: 17px 12px;
}

.audit-running-stats div + div {
    border-left: 1px solid var(--color-border);
}

.audit-running-stats dd {
    margin: 0;
    color: var(--color-heading);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.audit-running-stats dt {
    margin-top: 6px;
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
    font-weight: 600;
}

/* Fases de procesamiento. */
.audit-running-flow {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 640px;
    margin-top: 28px;
}

.audit-running-flow-item {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 7px;
    color: var(--color-text-subtle);
}

.audit-running-flow-item span {
    width: 9px;
    height: 9px;
    border: 2px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-background);
}

.audit-running-flow-item strong {
    font-size: var(--font-size-micro);
    font-weight: 600;
}

/* Fase actualmente en ejecución. */
.audit-running-flow-item.is-active {
    color: var(--color-action);
}

.audit-running-flow-item.is-active span {
    border-color: var(--color-action);
    background: var(--color-action);
    box-shadow: 0 0 0 5px rgba(59, 109, 246, 0.10);
    animation:
        audit-running-phase-pulse
        1.6s ease-in-out infinite;
}

/* Fases completadas. */
.audit-running-flow-item.is-complete {
    color: var(--color-action);
}

.audit-running-flow-item.is-complete span {
    position: relative;
    width: 13px;
    height: 13px;
    border-color: var(--color-action);
    background: var(--color-action);
}

.audit-running-flow-item.is-complete span::after {
    position: absolute;
    top: 50%;
    left: 50%;
    color: var(--color-surface);
    font-size: var(--font-size-micro);
    font-weight: 700;
    line-height: 1;
    content: "✓";
    transform: translate(-50%, -52%);
}

/* Conectores entre fases. */
.audit-running-flow i {
    flex: 1 1 auto;
    height: 1px;
    min-width: 30px;
    margin: 4px 10px 0;
    background: var(--color-border);
}

.audit-running-flow i.is-complete {
    background: var(--color-action);
}

/* Nota inferior. */
.audit-running-note {
    margin: 24px 0 0;
    color: var(--color-text-subtle);
    font-size: var(--font-size-micro);
}

/* Animaciones. */
@keyframes audit-running-phase-pulse {

    0%,
    100% {
        box-shadow:
            0 0 0 5px rgba(59, 109, 246, 0.10);
    }

    50% {
        box-shadow:
            0 0 0 9px rgba(59, 109, 246, 0);
    }
}

@keyframes audit-running-spin {

    to {
        transform: rotate(360deg);
    }
}

@keyframes audit-running-core-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.045);
    }
}

@keyframes audit-running-progress {

    0% {
        left: -22%;
    }

    100% {
        left: 100%;
    }
}

/* Respeta la preferencia del sistema para reducir movimiento. */
@media (prefers-reduced-motion: reduce) {

    .audit-running-orbit,
    .audit-running-core,
    .audit-running-progress-pulse,
    .audit-running-flow-item.is-active span {
        animation: none;
    }
}

/* Responsive. */
@media (max-width: 700px) {

    .audit-running-header {
        min-height: 66px;
        padding: 0 18px;
    }

    .audit-running-main {
        justify-content: flex-start;
        padding: 36px 16px 28px;
    }

    .audit-running-visual {
        width: 96px;
        height: 96px;
        margin-bottom: 20px;
    }

    .audit-running-core {
        width: 50px;
        height: 50px;
        border-radius: 15px;
        font-size: 27px;
    }

    .audit-running-intro h1 {
        font-size: var(--font-size-h1);
    }

    .audit-running-current {
        margin-top: 20px;
    }

    .audit-running-stopwatch {
        margin-top: 22px;
    }

    .audit-running-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .audit-running-stats div + div {
        border-left: 0;
    }

    .audit-running-stats div:nth-child(even) {
        border-left: 1px solid var(--color-border);
    }

    .audit-running-stats div:nth-child(n + 3) {
        border-top: 1px solid var(--color-border);
    }

    .audit-running-flow i {
        min-width: 8px;
        margin-right: 5px;
        margin-left: 5px;
    }

    .audit-running-flow-item strong {
        font-size: var(--font-size-micro);
    }
}


/* =========================================================
   04. INFORME — ESTRUCTURA PRINCIPAL
   ========================================================= */

/* Contenedor general del informe. */
.app-site-audit {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    background: var(--color-background);
}

/* Barra lateral. */
.app-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    flex: 0 0 260px;
    width: 260px;
    height: 100vh;
    padding: 24px 18px;
    overflow-y: auto;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
}

/* Identidad del producto. */
.app-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0 10px 24px;
    border-bottom: 1px solid var(--color-border);
}

/* El contenedor conserva el espacio flexible del menú lateral.
   Su apertura al volver a escritorio se gestionará en JavaScript. */
.app-navigation-disclosure {
    flex: 1 0 auto;
    min-width: 0;
}

.app-navigation-summary {
    display: none;
}

.app-navigation-summary:focus-visible,
.app-navigation a.app-nav-link:focus-visible {
    outline: 2px solid var(--color-action);
    outline-offset: 2px;
}

/* Navegación principal. */
.app-navigation {
    flex: 1 0 auto;
    padding-top: 22px;
}

.app-nav-group + .app-nav-group {
    margin-top: 26px;
}

.app-nav-title {
    display: block;
    margin: 0 10px 8px;
    color: var(--color-text-subtle);
    font-size: var(--font-size-small);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--color-text);
    font-size: var(--font-size-body);
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
}

a.app-nav-link:hover {
    color: var(--color-heading);
    background: var(--color-surface-soft);
}

/* Vista activa. */
.app-nav-link.activo {
    color: var(--color-action);
    background: var(--color-review-soft);
    font-weight: 600;
}

/* Elementos todavía no disponibles. */
.app-nav-link-pendiente {
    color: var(--color-text-subtle);
    cursor: default;
}

/* Contador asociado a una entrada de navegación. */
.app-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    color: var(--color-warning-dark);
    background: var(--color-warning-soft);
    font-size: var(--font-size-small);
    font-weight: 700;
}

/* Zona de usuario del menú lateral */
.app-nav-user {
    flex-shrink: 0;
    margin-top: 60px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
}

.app-nav-user-name {
    padding: 8px 10px 2px;
    color: var(--color-heading);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.app-nav-user-role {
    width: fit-content;
    margin: 4px 10px 10px;
    padding: 4px 8px;
    border-radius: 6px;
    color: var(--color-text-muted);
    background: var(--color-surface-soft);
    font-size: var(--font-size-small);
    font-weight: 500;
}

.app-nav-user form {
    margin: 8px 0 0;
}

.app-nav-logout {
    appearance: none;
    justify-content: flex-start;
    border: 0;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.app-nav-logout:hover {
    color: var(--color-heading);
    background: var(--color-surface-soft);
}

.app-nav-logout:focus-visible {
    outline: 2px solid var(--color-action);
    outline-offset: 2px;
}

/* Pie de la barra lateral. */
.app-sidebar-footer {
    margin-top: 30px;
    padding: 18px 10px 4px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-subtle);
    font-size: var(--font-size-small);
}

/* Área que contiene cabecera y vistas del informe. */
.app-shell {
    flex: 1 1 auto;
    min-width: 0;
}


/* =========================================================
   05. INFORME — CABECERA
   ========================================================= */

/* Estructura de la cabecera. */
.app-header {
    display: grid;
    grid-template-columns: max-content max-content 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 40px;
    row-gap: 0;
    width: 100%;
    min-height: 88px;
    padding: 14px 32px;
    background: var(--color-surface-soft);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

/* Identificación de la auditoría. */
.app-header-identidad {
    display: contents;
}

.app-header-kicker {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    color: var(--color-heading);
    font-size: var(--font-size-h2);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.app-header-url {
    display: flex;
    grid-column: 1;
    grid-row: 2;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.app-header-url h1 {
    margin: 0;
  overflow: hidden;
  color: var(--color-accent);
  font-size: var(--font-size-lead);
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-header-url-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--color-text-muted);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
}

.app-header-url-icono img {
    display: block;
    width: 14px;
    height: 14px;
   margin-top: 3px;
}

.app-header-url-icono:hover {
    background: transparent;
    opacity: 0.7;
}

/* Estado y metadatos de ejecución. */
.app-header-estado {
    display: contents;
}

.app-header-estado .app-status {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: start;
}

.app-status {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 5px;
    padding: 0;
    font-weight: 700;
    line-height: 1;
}

.app-status img {
    display: block;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
}

.app-status-completada {
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--color-success);
    background: var(--color-success-soft);
    font-size: var(--font-size-small);
}

.app-status-advertencia {
    padding: 6px 12px;
    border-radius: 999px;
    color: #b86a00;
    background: #fff3df;
    font-size: var(--font-size-small);
}

.app-status-error {
    padding: 6px 12px;
    border-radius: 999px;
    color: #c53030;
    background: #feecec;
    font-size: var(--font-size-small);
}

.app-header-meta {
    display: flex;
    grid-column: 2 / 4;
    grid-row: 2;
    align-items: center;
    align-self: center;
    justify-self: start;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    font-weight: 600;
    line-height: 1.3;
}

.app-header-meta span + span::before {
    content: "·";
    margin-right: 8px;
    color: var(--color-border-strong);
}

/* Acciones de la cabecera. */
.app-header-actions {
    display: flex;
    grid-column: 4;
    grid-row: 1 / 3;
    align-items: center;
    align-self: center;
    justify-self: end;
    flex: 0 0 auto;
    gap: 10px;
}

.app-button-primary,
.app-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.app-header-actions .app-button-primary {
    color: var(--color-surface);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.app-header-actions .app-button-primary:hover {
    color: var(--color-surface);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.app-header-actions .app-button-primary img,
.app-header-actions .app-button-secondary img {
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}

/* Exportación preparada visualmente aunque todavía no esté habilitada. */
.app-header-actions .app-button-secondary {
    color: var(--color-text);
    background: var(--color-surface);
    border-color: var(--color-border);
}

.app-header-actions .app-button-secondary:disabled {
    color: var(--color-text);
    background: var(--color-surface);
    border-color: var(--color-border);
    opacity: 1;
    cursor: not-allowed;
}

.app-button-chevron {
    display: inline-block;
    margin-left: 3px;
    color: var(--color-text);
    font-size: var(--font-size-small);
    line-height: 1;
}

/* El contenedor general del informe no se presenta como tarjeta. */
.app-main > .tarjeta {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* Contenido principal de las vistas. */
.app-main {
    width: 100%;
    min-width: 0;
    padding: 30px 32px 48px;
}


/* =========================================================
   06. INFORME — RESPONSIVE DE ESTRUCTURA Y CABECERA
   ========================================================= */

/* Tablet y escritorio reducido. */
@media (max-width: 1000px) {

    .app-sidebar {
        flex-basis: 220px;
        width: 220px;
        padding-right: 14px;
        padding-left: 14px;
    }

    .app-header {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto;
        align-items: start;
        gap: 8px 24px;
    }

    .app-header-kicker {
        grid-column: 1;
        grid-row: 1;
    }

    .app-header-url {
        grid-column: 1;
        grid-row: 2;
    }

    .app-header-estado .app-status {
        grid-column: 1;
        grid-row: 3;
        align-self: center;
        justify-self: start;
    }

    .app-header-meta {
        grid-column: 1;
        grid-row: 3;
        align-self: center;
        justify-self: start;
        margin-left: 110px;
    }

    .app-header-actions {
        grid-column: 2;
        grid-row: 1 / 4;
        align-self: center;
        justify-self: end;
    }
}

/* Móvil. */
@media (max-width: 760px) {

    .app-site-audit {
        display: block;
    }

    .app-sidebar {
        position: relative;
        width: 100%;
        height: auto;
        padding: 18px 16px;
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .app-brand {
        padding-bottom: 16px;
    }

    .app-navigation-disclosure {
        flex: 0 1 auto;
        width: 100%;
        margin-top: 16px;
    }

    .app-navigation-summary {
        display: list-item;
        padding: 12px 10px;
        border-radius: 8px;
        color: var(--color-heading);
        background: var(--color-surface-soft);
        font-size: var(--font-size-body);
        font-weight: 600;
        line-height: 1.4;
        cursor: pointer;
        overflow-wrap: anywhere;
    }

    .app-navigation {
        padding-top: 16px;
    }

    .app-navigation .app-nav-link {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .app-navigation .app-nav-badge {
        flex-shrink: 0;
    }

    .app-sidebar-footer {
        display: none;
    }

    .app-header {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        gap: 10px;
        min-height: 0;
        padding: 18px 16px;
    }

    .app-header-kicker {
        grid-column: 1;
        grid-row: 1;
    }

    .app-header-url {
        grid-column: 1;
        grid-row: 2;
    }

    .app-header-estado .app-status {
        grid-column: 1;
        grid-row: 3;
        align-self: start;
        justify-self: start;
    }

    .app-header-meta {
        display: grid;
        grid-column: 1;
        grid-row: 4;
        grid-template-columns: 1fr 1fr;
        align-self: stretch;
        justify-self: stretch;
        gap: 7px 16px;
        margin-left: 0;
    }

    .app-header-meta span + span::before {
        content: none;
    }

    .app-header-actions {
        grid-column: 1;
        grid-row: 5;
        align-self: stretch;
        justify-self: stretch;
        width: 100%;
    }

    .app-button-primary,
    .app-button-secondary {
        flex: 1 1 0;
    }

    .app-main {
        padding: 22px 16px 36px;
    }
}


/* =========================================================
   07. COMPONENTES COMPARTIDOS Y COMPATIBILIDAD
   ========================================================= */

/*
 * Componentes utilizados todavía por partes de la interfaz
 * anterior y por elementos compartidos con las vistas v0.5.
 * Se mantienen separados para facilitar su migración posterior.
 */

/* Formulario base. */
.formulario-auditoria {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 30px 0;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
}

.campo-formulario {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
}

.campo-formulario > label,
.campo-formulario > legend {
    font-weight: 600;
}

fieldset.campo-formulario {
    padding: 0;
    border: 0;
}

fieldset.campo-formulario legend {
    margin-bottom: 7px;
}

.opcion-auditoria {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
}

.opcion-auditoria input[type="radio"] {
    flex: none;
    width: auto;
    margin: 0;
}

.texto-opcional {
    color: var(--color-text-muted);
    font-weight: 400;
}

.campo-formulario small {
    color: var(--color-text-muted);
    line-height: 1.4;
}

/*
 * Controles heredados.
 * Se limitan al formulario base para evitar que sus estilos
 * afecten a controles específicos de las vistas v0.5.
 */
.formulario-auditoria input {
    flex: 1;
    padding: 12px 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    font-size: var(--font-size-lead);
}

.formulario-auditoria button {
    align-self: flex-start;
    padding: 12px 22px;
    border: 0;
    border-radius: 8px;
    color: var(--color-surface);
    background: var(--color-surface-dark);
    font-weight: 600;
    cursor: pointer;
}

/* Ayudas contextuales. */
.ayuda-contextual {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    overflow: hidden;
    border: 1px solid var(--color-text-subtle);
    border-radius: 50%;
    color: transparent;
    font-size: 0;
    line-height: 1;
    vertical-align: middle;
    cursor: help;
}

.ayuda-contextual::before {
    content: "i";
    color: var(--color-text-muted);
    font-family: Georgia, serif;
    font-size: var(--font-size-small);
    font-weight: 700;
    line-height: 1;
}

.ayuda-contextual:hover,
.ayuda-contextual:focus {
    border-color: var(--color-border-strong);
    outline: none;
}

.ayuda-contextual:hover::before,
.ayuda-contextual:focus::before {
    color: var(--color-heading);
}

/* Mensajes de error. */
.error {
    padding: 15px;
    border: 1px solid var(--color-danger);
    border-radius: 8px;
    color: var(--color-danger);
    background: var(--color-danger-soft);
}


/* =========================================================
   08. RESUMEN EJECUTIVO
   ========================================================= */

/* ---------------------------------------------------------
   08.1 Cabecera y métricas principales
   --------------------------------------------------------- */

.executive-summary-top {
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(720px, 1.4fr);
    align-items: center;
    gap: 36px;
    width: 100%;
    margin-bottom: 30px;
}

.executive-summary-heading {
    min-width: 0;
}

.executive-summary-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text-muted);
    background: var(--color-surface-soft);
    font-size: var(--font-size-micro);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.executive-summary-eyebrow::before {
    width: 5px;
    height: 5px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    content: "";
}

.executive-summary-heading h1 {
    margin: 0;
    color: var(--color-heading);
    font-size: var(--font-size-h1);
    font-weight: 700;
    line-height: 1.15;
}

.executive-summary-heading p {
    max-width: 620px;
    margin: 8px 0 0;
    color: var(--color-text);
    font-size: var(--font-size-body);
    line-height: 1.55;
}

.executive-summary-heading p strong {
    color: inherit;
    font-weight: 500;
}


/* ---------------------------------------------------------
   08.2 Métricas principales
   --------------------------------------------------------- */

.executive-summary-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

.executive-metric {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
    padding: 15px 16px;
    border: 0;
    border-radius: 10px;
    background: var(--color-surface-soft);
}

.executive-metric-icon {
    display: block;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.executive-metric > div {
    min-width: 0;
}

.executive-metric strong {
    display: block;
    margin-bottom: 2px;
    color: var(--color-heading);
    font-size: var(--font-size-h4);
    font-weight: 700;
    line-height: 1;
}

.executive-metric div > span {
    display: block;
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--font-size-body);
    font-weight: 500;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Porcentajes de las métricas de Sitemap */
.executive-metric > .executive-metric-percentage {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    font-weight: 400;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   08.3 Paneles principales
   --------------------------------------------------------- */

.executive-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    margin-bottom: 30px;
}

.executive-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 250px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}

.executive-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.executive-panel-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    margin-bottom: 7px;
    padding: 3px 8px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text-muted);
    background: var(--color-background);
    font-size: var(--font-size-micro);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.executive-panel-header h2 {
    margin: 0;
    color: var(--color-heading);
    font-size: var(--font-size-h2);
    font-weight: 700;
    line-height: 1.3;
}

.executive-analysis-status,
.executive-sitemap-summary {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 24px;
}

/* FONSI SEO Score */

.executive-score-panel {
    min-height: 0;
}

.executive-score-panel .executive-panel-header {
    margin-bottom: 20px;
}

.executive-score-panel .executive-analysis-status {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 24px;
}

.executive-score {
    position: relative;
    display: flex;
    flex: 0 0 156px;
    width: 156px;
    height: 156px;
    align-items: center;
    justify-content: center;
    justify-self: center;
    border-radius: 50%;
    background:
        conic-gradient(
            var(--seo-score-color, var(--color-neutral))
                0 var(--seo-score, 0%),
            var(--color-neutral)
                var(--seo-score, 0%) 100%
        );
}

.executive-score::before {
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    background: var(--color-surface);
    content: "";
}

.executive-score-center {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.executive-score-center strong {
    color: var(--color-heading);
    font-size: 44px;
    font-weight: 600;
    line-height: 0.95;
}

.executive-score-center span {
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    font-weight: 500;
}

.executive-score-panel .executive-panel-note {
    margin-top: 14px;
    padding-top: 10px;
}

/* Totales */

.executive-analysis-total,
.executive-sitemap-total {
    flex: 0 0 auto;
    text-align: center;
}

.executive-analysis-total strong,
.executive-sitemap-total strong {
    display: block;
    color: var(--color-heading);
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
}

.executive-analysis-total span,
.executive-sitemap-total span {
    display: block;
    margin-top: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    font-weight: 500;
}

/* Distribución */

.executive-analysis-breakdown,
.executive-sitemap-breakdown {
    display: grid;
    flex: 1;
    gap: 7px;
    min-width: 0;
}

.executive-analysis-breakdown > div,
.executive-sitemap-breakdown > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 6px;
}

.executive-analysis-breakdown > div:last-child,
.executive-sitemap-breakdown > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.executive-analysis-breakdown span,
.executive-sitemap-breakdown span {
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
}

.executive-analysis-breakdown strong,
.executive-sitemap-breakdown strong {
    color: var(--color-text);
    font-size: var(--font-size-body);
    font-weight: 600;
}

/* Estados del FONSI SEO Score */

.executive-score-breakdown {
    gap: 5px;
}

.executive-score-breakdown > div {
    min-height: 24px;
}

.executive-score-breakdown .executive-score-status-bar {
    display: flex;
    width: 100%;
    height: 10px;
    min-height: 10px;
    gap: 2px;
    margin-bottom: 10px;
    padding: 0;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-neutral);
}

.executive-score-status-segment {
    display: block;
    height: 100%;
    min-width: 0;
    cursor: pointer;
    transition:
        opacity 0.15s ease,
        filter 0.15s ease,
        transform 0.15s ease;
}

.executive-score-status-segment.activo {
    filter: saturate(1.15) brightness(0.95);
    transform: scaleY(1.35);
}

.executive-score-status-segment.atenuado {
    opacity: 0.25;
}

.executive-score-status-segment.correcto {
    background: var(--color-success);
}

.executive-score-status-segment.problema {
    background: var(--color-danger);
}

.executive-score-status-segment.advertencia {
    background: var(--color-warning);
}

.executive-score-status-segment.revisar {
    background: var(--color-review);
}

.executive-score-status-segment.informativo {
    background: var(--color-info);
}

.executive-score-state-row {
    padding: 3px 6px;
    margin: -3px -6px;
    border-radius: 6px;
       cursor: pointer;
    transition:
        background-color 0.15s ease,
        opacity 0.15s ease;
}

.executive-score-state-row.activo {
    background: var(--color-surface-soft);
}

.executive-score-state-row.activo .executive-score-state {
    font-weight: 600;
}

.executive-score-state {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
}

.executive-score-state-dot {
    display: inline-block;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    margin-top: 0;
    border-radius: 50%;
}

.executive-score-state-dot.correcto {
    background: var(--color-success);
}

.executive-score-state-dot.problema {
    background: var(--color-danger);
}

.executive-score-state-dot.advertencia {
    background: var(--color-warning);
}

.executive-score-state-dot.revisar {
    background: var(--color-review);
}

.executive-score-state-dot.informativo {
    background: var(--color-info);
}

/* Cobertura del sitemap */

.executive-sitemap-panel .executive-panel-header {
    margin-bottom: 20px;
}

.executive-sitemap-header > div {
    min-width: 0;
}

.executive-sitemap-url-row {
    display: flex;
    max-width: 100%;
    align-items: center;
    gap: 6px;
    margin-top: 0;
}

.executive-sitemap-url {
    display: block;
     min-width: 0;
     overflow: hidden;
     color: var(--color-text-muted);
     font-size: var(--font-size-lead);
     font-weight: 600;
     line-height: 1.35;
     text-overflow: ellipsis;
     white-space: nowrap;
     margin-top: 3px;
}

.executive-sitemap-url-row .app-header-url-icono {
    flex: 0 0 auto;
}

.executive-sitemap-panel .executive-sitemap-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 24px;
}

/* ==========================================================
   INVESTIGAR > URLS — DISTRIBUCIONES
   ========================================================== */

/* Separación entre las métricas y las distribuciones de URLs */

section:has(> .executive-summary-metrics):has(+ .urls-distribution-grid) {
    margin-bottom: 24px;
}

/* Separación entre la distribución y el explorador de URLs. */
.urls-distribution-grid + .urls-explorer-panel {
    margin-top: 24px;
}

.urls-distribution-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
}

.urls-distribution-grid > * {
    min-width: 0;
    height: 100%;
}

/* Distribución por origen */

.urls-distribution-grid .urls-origin-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.urls-distribution-grid .urls-origin-donut {
    flex: 0 0 144px;
    width: 144px;
    height: 144px;
    background: conic-gradient(
        var(--color-success) 0 var(--urls-origin-sitemap, 0%),
        var(--color-review)
            var(--urls-origin-sitemap, 0%)
            var(--urls-origin-enlaces, 0%),
        var(--color-neutral)
            var(--urls-origin-enlaces, 0%)
            100%
    );
}

.urls-distribution-grid .urls-origin-donut::before {
    inset: 14px;
}

.urls-distribution-grid .executive-sitemap-center strong {
    font-size: 28px;
    letter-spacing: -1px;
}

.urls-distribution-grid .executive-sitemap-center span {
    font-size: var(--font-size-small);
}

.urls-distribution-grid .executive-sitemap-breakdown {
    width: 100%;
    min-width: 0;
}

/* Leyenda y porcentajes */

.urls-distribution-grid .crawl-status-legend {
    min-width: 0;
}

.urls-distribution-grid .crawl-status-item {
    min-width: 0;
}

.urls-distribution-grid .crawl-status-percentage {
    color: var(--color-text-subtle);
    font-size: var(--font-size-small);
    white-space: nowrap;
}

/* Estado informativo: canonical hacia otra URL */

.urls-distribution-grid .urls-status-review {
    background: var(--color-review);
}

/* URLs sin respuesta HTTP */

.urls-distribution-grid .crawl-status-unknown {
    background: var(--color-neutral);
}

/* Responsive */

@media (max-width: 1400px) {
    .urls-distribution-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .urls-distribution-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Explorador de URLs */
/* Distribución de las ocho columnas del Explorador de URLs */
.urls-explorer-row {
    grid-template-columns:
        minmax(340px, 3.8fr)
        minmax(110px, 1.2fr)
        minmax(90px, 0.9fr)
        minmax(145px, 1.5fr)
        minmax(125px, 1.3fr)
        minmax(110px, 1.2fr)
        minmax(100px, 1fr)
        minmax(145px, 1.5fr);
    min-width: 1250px;
}

/* Selección de filas del Explorador de URLs */

.urls-explorer-row[data-url-seleccion] {
    cursor: pointer;
}

.urls-explorer-row[data-url-seleccion]:hover {
    background: #f8fafc;
}

.urls-explorer-row.activo {
    background: #f8fafc;
    box-shadow: inset 3px 0 0 #2563eb;
}

.urls-explorer-row[data-url-seleccion]:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

/* URL e icono externo del Explorador */

.urls-explorer-row .sitemap-list-url {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.urls-explorer-row .sitemap-list-url-text {
    display: -webkit-box;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
    line-height: 1.5;
}

.urls-explorer-row .sitemap-list-external-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
}

.urls-explorer-row .sitemap-list-external-link img {
    display: block;
    width: 14px;
    height: 14px;
}

.urls-explorer-row > span {
    min-width: 0;
}

.urls-explorer-row > span:first-child a:hover {
    color: var(--color-action);
    text-decoration: underline;
}

/* Badges del Explorador de URLs */

.urls-explorer-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: var(--font-size-small);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.urls-explorer-badge-success {
    color: var(--color-success-dark);
    background: var(--color-success-soft);
}

.urls-explorer-badge-warning {
    color: var(--color-warning-dark);
    background: var(--color-warning-soft);
}

.urls-explorer-badge-danger {
    color: var(--color-danger-dark);
    background: var(--color-danger-soft);
}

.urls-explorer-badge-review {
    color: var(--color-review);
    background: var(--color-review-soft);
}

.urls-explorer-badge-neutral {
    color: var(--color-text-subtle);
    background: var(--color-neutral);
}

.urls-explorer-panel {
    min-width: 0;
}

.urls-explorer-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-top: 20px;
}

.urls-explorer-table td:first-child {
    max-width: 480px;
    overflow-wrap: anywhere;
}

.urls-explorer-table td a {
    color: var(--color-review, #3b82f6);
    text-decoration: none;
}

.urls-explorer-table td a:hover {
    text-decoration: underline;
}

.urls-explorer-tab {
    display: inline-block;
    padding: 10px 4px;
    color: #64748b;
    font-size: 13px;
}

.urls-explorer-tab-active {
    color: #25344a;
    font-weight: 600;
    border-bottom: 2px solid #3b82f6;
}

.urls-explorer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 18px;
    font-size: 13px;
    color: #64748b;
}

.urls-explorer-footer a {
    color: #3b82f6;
    font-weight: 600;
    text-decoration: none;
}

/* ==========================================================
   INVESTIGAR URLS — DETALLE INDIVIDUAL Y DIAGNÓSTICOS
   ========================================================== */

.urls-detail-workspace {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-top: 20px;
}

/* Investigación de URL: pestaña Diagnósticos */
/* Cabecera y diagnósticos como una sección continua */

.urls-detail-workspace-diagnostics {
    gap: 0;
}

.urls-detail-workspace-diagnostics .urls-detail-main-diagnostics {
    min-height: 0;
    padding-bottom: 22px;
    border-radius: 12px;
}

.urls-detail-workspace-diagnostics .urls-detail-main-diagnostics .urls-detail-content {
    padding-bottom: 20px;
}

.urls-detail-workspace-diagnostics .urls-detail-main-diagnostics .urls-detail-diagnostics-expanded {
    min-height: 0;
    width: auto;
    margin: 0 22px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: none;
}

.urls-detail-workspace-diagnostics {
    grid-template-columns: minmax(0, 1fr);
}

.urls-detail-workspace-diagnostics .urls-detail-main-diagnostics {
    grid-column: 1;
}

/* Distribución interna de diagnósticos */

.urls-detail-workspace-diagnostics .urls-detail-diagnostics-list {
    min-width: 0;
}

.urls-detail-workspace-diagnostics .urls-detail-diagnostics-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 20px;
    align-items: start;
}

.urls-detail-workspace-diagnostics .urls-detail-diagnostics-filters {
    grid-column: 1 / -1;
}

/* Mensajes cuando no hay diagnósticos */

.urls-detail-workspace-diagnostics
.urls-detail-diagnostics-content > .priorities-no-results {
    grid-column: 1 / -1;
}

.urls-detail-workspace-diagnostics .urls-detail-diagnostic-detail {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
}

@media (max-width: 900px) {
    .urls-detail-workspace-diagnostics .urls-detail-diagnostics-content {
        grid-template-columns: minmax(0, 1fr);
    }

    .urls-detail-workspace-diagnostics .urls-detail-diagnostics-filters,
    .urls-detail-workspace-diagnostics .urls-detail-diagnostic-detail {
        grid-column: 1;
        grid-row: auto;
    }
}

.urls-detail-main,
.urls-detail-diagnostics {
    min-width: 0;
}

.urls-detail-main .priorities-diagnostics-header,
.urls-detail-diagnostics .priorities-diagnostics-header {
    padding: 22px;
}

.urls-detail-content,
.urls-detail-diagnostics-content {
    padding: 0 22px 22px;
}

.urls-detail-content .priorities-no-results,
.urls-detail-diagnostics-content .priorities-no-results {
    margin: 0;
}

/* Diagnósticos específicos de la URL seleccionada */

.urls-detail-diagnostics-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    font-weight: 600;
    white-space: nowrap;
}

.urls-detail-diagnostics-count::after {
    content: "diagnósticos";
    font: inherit;
    color: inherit;
}

.urls-detail-diagnostics-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Respetar los filtros de diagnósticos por URL */
.urls-detail-diagnostic-item[hidden] {
    display: none;
}

.urls-detail-diagnostic-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 10px;
    width: 100%;
    padding: 12px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--color-heading);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.urls-detail-diagnostic-item:hover {
    background: #f5f8fc;
}

.urls-detail-diagnostic-item.activo {
    background: #f5f8fc;
    border-color: var(--color-neutral);
}

.urls-detail-diagnostic-item:focus-visible {
    outline: 2px solid var(--color-review);
    outline-offset: 2px;
}

.urls-detail-diagnostic-item > strong {
    grid-column: 1;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.urls-detail-diagnostic-item > small {
    grid-column: 1;
    color: var(--color-text-subtle);
    font-size: 12px;
    line-height: 1.4;
}

.urls-detail-diagnostic-item > .priorities-priority-badge {
    grid-column: 1;
    justify-self: start;
    font-size: 10px;
}

.urls-detail-diagnostic-item > .priorities-diagnosis-state {
    grid-column: 1;
    font-size: 11px;
}

.urls-detail-diagnostic-detail {
    margin-top: 18px;
    min-width: 0;
}

.urls-detail-diagnostic-detail .priorities-detail-data {
    min-width: 0;
}

.urls-detail-diagnostic-detail .priorities-detail-data-row {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Detalle de URL: panel lateral compacto en pestañas normales */

.urls-detail-workspace:not(.urls-detail-workspace-diagnostics)
.urls-detail-diagnostics > .priorities-diagnostics-header,
.urls-detail-workspace:not(.urls-detail-workspace-diagnostics)
.urls-detail-diagnostics-filters,
.urls-detail-workspace:not(.urls-detail-workspace-diagnostics)
.urls-detail-diagnostics-list {
    display: none;
}

.urls-detail-workspace:not(.urls-detail-workspace-diagnostics)
.urls-detail-diagnostic-detail {
    margin-top: 0;
}

/* Explorador de URLs: filtros y listado compacto */

.urls-detail-diagnostics-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

/* Filtros de la pestaña Diagnósticos ampliada */

.urls-detail-workspace-diagnostics .urls-detail-diagnostics-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
    padding: 10px 18px 0;
}

.urls-detail-workspace-diagnostics .urls-detail-diagnostics-filters .priorities-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

.urls-detail-workspace-diagnostics .urls-detail-diagnostics-search,
.urls-detail-workspace-diagnostics .urls-detail-diagnostics-area {
    width: 100%;
    margin: 0;
}

@media (max-width: 650px) {
    .urls-detail-workspace-diagnostics .urls-detail-diagnostics-filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .urls-detail-workspace-diagnostics .urls-detail-diagnostics-filters .priorities-filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .urls-detail-workspace-diagnostics .urls-detail-diagnostics-filters .priorities-reset-filters {
        width: 100%;
        justify-content: center;
    }
}

.urls-detail-diagnostics-search,
.urls-detail-diagnostics-area {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 9px 12px;
    border: 1px solid var(--color-neutral);
    border-radius: 8px;
    background: #fff;
    color: var(--color-heading);
    font-family: inherit;
    font-size: var(--font-size-body);
}

.urls-detail-diagnostics-search:focus,
.urls-detail-diagnostics-area:focus {
    outline: 2px solid var(--color-review);
    outline-offset: 1px;
}

.urls-detail-diagnostics-list {
    gap: 2px;
}

.urls-detail-diagnostic-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) 16px;
    align-items: center;
    column-gap: 10px;
    row-gap: 0;
    padding: 11px 8px;
    font-size: var(--font-size-body);
}

.urls-detail-diagnostic-dot {
    grid-column: 1;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-text-subtle);
}

.urls-detail-diagnostic-dot.problema {
    background: var(--color-danger);
}

.urls-detail-diagnostic-dot.revisar,
.urls-detail-diagnostic-dot.advertencia {
    background: var(--color-warning);
}

.urls-detail-diagnostic-dot.correcto {
    background: var(--color-success);
}

.urls-detail-diagnostic-info {
    grid-column: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 10px;
    row-gap: 4px;
    min-width: 0;
}

.urls-detail-diagnostic-info .urls-detail-diagnostic-title {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

/* Explicación breve del diagnóstico */
.urls-detail-diagnostic-description {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    margin-top: -2px;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    font-weight: 400;
    line-height: 1.4;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.urls-detail-diagnostic-info .urls-detail-diagnostic-area-label {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}

.urls-detail-diagnostic-title {
    color: var(--color-heading);
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* Badges de áreas en diagnósticos de URL */

.urls-detail-diagnostic-area-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: var(--font-size-small);
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
    text-align: center;
    background: #e7edf5;
    color: #475569;
}

/* Rastreo e indexabilidad */
.urls-detail-diagnostic-area-label--rastreo_indexabilidad {
    background: #dbeafe;
    color: #1d4ed8;
}

/* Sitemap */
.urls-detail-diagnostic-area-label--sitemap {
    background: #ccfbf1;
    color: #0f766e;
}

/* Arquitectura y enlazado */
.urls-detail-diagnostic-area-label--arquitectura {
    background: #e2e8f0;
    color: #475569;
}

/* Canonical y duplicación */
.urls-detail-diagnostic-area-label--canonical_duplicacion {
    background: #ede9fe;
    color: #6d28d9;
}

/* SEO On-Page */
.urls-detail-diagnostic-area-label--seo_on_page {
    background: #bfdbfe;
    color: #1e40af;
}

/* Datos estructurados */
.urls-detail-diagnostic-area-label--datos_estructurados {
    background: #fef3c7;
    color: #a16207;
}

/* Contenido y semántica */
.urls-detail-diagnostic-area-label--contenido_semantica {
    background: #fce7f3;
    color: #be185d;
}

/* Adaptación de badges de área a pantallas pequeñas */
@media (max-width: 650px) {
    .urls-detail-diagnostic-info {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 6px;
    }

    .urls-detail-diagnostic-info .urls-detail-diagnostic-area-label {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }
}

.urls-detail-diagnostic-chevron {
    grid-column: 3;
    justify-self: end;
    font-size: 20px;
    line-height: 1;
    color: var(--color-text-subtle);
}

.urls-detail-diagnostic-item:hover .urls-detail-diagnostic-chevron,
.urls-detail-diagnostic-item.activo .urls-detail-diagnostic-chevron {
    color: var(--color-review);
}

/* Diagnóstico seleccionado en el detalle de URL */

.urls-detail-diagnostic-item.activo {
    background: #f8fafc;
    box-shadow: inset 3px 0 0 #2563eb;
    border-radius: 0;
    border-color: transparent;
}

/* Listado de la pestaña Diagnósticos ampliada */

.urls-detail-workspace-diagnostics .urls-detail-diagnostics-list {
    gap: 0;
    min-width: 0;
    border: 1px solid var(--color-neutral);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.urls-detail-workspace-diagnostics .urls-detail-diagnostic-item {
    padding: 16px 14px;
    border: 0;
    border-radius: 0;
}

/* Contenido, badge y chevron comparten las columnas de la tarjeta. */
.urls-detail-diagnostic-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) fit-content(35%) 16px;
    grid-template-rows: auto auto;
    gap: 4px 0;
    min-width: 0;
    padding: 16px 14px;
}

.urls-detail-diagnostic-row:has(> .urls-detail-diagnostic-item[hidden]) {
    display: none;
}

.urls-detail-diagnostic-row > .urls-detail-diagnostic-item {
    min-width: 0;
    grid-column: 1 / -1;
    grid-row: 1 / span 2;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    column-gap: 0;
    padding: 0;
    background: transparent;
}

.urls-detail-diagnostic-row .urls-detail-diagnostic-info {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
}

.urls-detail-diagnostic-row .urls-detail-diagnostic-dot {
    grid-row: 1;
}

.urls-detail-diagnostic-row .urls-detail-diagnostic-chevron {
    grid-column: 4;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
}

.urls-detail-diagnostic-actions {
    display: grid;
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: start;
    justify-items: end;
    min-width: 0;
    padding-inline-end: 10px;
}

.urls-detail-diagnostic-actions:empty {
    display: none;
}

.urls-detail-diagnostic-summary {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.urls-detail-diagnostic-summary > .urls-detail-diagnostic-description {
    display: inline;
    margin: 0;
    font: inherit;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

.urls-detail-diagnostic-summary > .urls-detail-diagnostic-global-link {
    display: inline-flex;
    vertical-align: middle;
    justify-content: flex-start;
    margin-inline-start: 6px;
    width: 28px;
    height: 28px;
    background: transparent;
}

.urls-detail-diagnostic-summary > .urls-detail-diagnostic-global-link:hover {
    background: transparent;
}

.urls-detail-diagnostic-global-link:focus-visible {
    outline: 2px solid var(--color-review);
    outline-offset: 2px;
}

.urls-detail-diagnostic-row:has(> .urls-detail-diagnostic-item:hover),
.urls-detail-diagnostic-row:has(> .urls-detail-diagnostic-summary:hover) {
    background: #f5f8fc;
}

.urls-detail-diagnostic-row:has(> .urls-detail-diagnostic-item.activo) {
    background: #f8fafc;
    box-shadow: inset 3px 0 0 #2563eb;
}

.urls-detail-workspace-diagnostics .urls-detail-diagnostic-row:not(:last-child) {
    border-bottom: 1px solid var(--color-neutral);
}

.urls-detail-workspace-diagnostics .urls-detail-diagnostic-row:has(> .urls-detail-diagnostic-item.activo) {
    background: #eff6ff;
}

.urls-detail-diagnostic-row > .urls-detail-diagnostic-item.activo {
    background: transparent;
    box-shadow: none;
}

.urls-detail-workspace-diagnostics .urls-detail-diagnostic-detail {
    margin-top: 0;
}

/* Detalle ampliado de diagnósticos por URL */

.urls-detail-workspace-diagnostics .urls-detail-diagnostic-detail {
    min-width: 0;
    margin-top: 0;
    border: 1px solid var(--color-neutral);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.urls-detail-workspace-diagnostics .urls-detail-diagnostic-detail .priorities-detail-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-neutral);
}

.urls-detail-workspace-diagnostics .urls-detail-diagnostic-detail .priorities-detail-body {
    padding: 20px;
    overflow-wrap: anywhere;
}

.urls-detail-workspace-diagnostics .urls-detail-diagnostic-detail .priorities-detail-data {
    width: 100%;
}

/* Panel derecho: cabecera del diagnóstico seleccionado */

.urls-detail-workspace-diagnostics .urls-diagnosis-problem {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 16px;
    padding: 24px;
    background: #fff5f5;
    border-bottom: 1px solid #fecaca;
}

/* Colores de la cabecera según el estado del diagnóstico */

.urls-detail-workspace-diagnostics .urls-diagnosis-problem--problema {
    background: #fff5f5;
    border-bottom-color: #fecaca;
}

.urls-detail-workspace-diagnostics .urls-diagnosis-problem--advertencia {
    background: #fff8ed;
    border-bottom-color: #fed7aa;
}

.urls-detail-workspace-diagnostics .urls-diagnosis-problem--correcto {
    background: #f0fdf4;
    border-bottom-color: #bbf7d0;
}

.urls-detail-workspace-diagnostics .urls-diagnosis-problem--informativo {
    background: #eff6ff;
    border-bottom-color: #bfdbfe;
}

.urls-detail-workspace-diagnostics .urls-diagnosis-problem--no_determinado {
    background: #f8fafc;
    border-bottom-color: #e2e8f0;
}

/* Color del texto y del indicador */

/* Problema detectado: rojo */
.urls-detail-workspace-diagnostics .urls-diagnosis-problem--problema
.urls-diagnosis-problem-status {
    color: var(--color-danger);
}

/* A revisar: naranja */
.urls-detail-workspace-diagnostics .urls-diagnosis-problem--advertencia
.urls-diagnosis-problem-status {
    color: var(--color-warning);
}

/* Correcto: verde */
.urls-detail-workspace-diagnostics .urls-diagnosis-problem--correcto
.urls-diagnosis-problem-status {
    color: var(--color-success);
}

/* Información: azul */
.urls-detail-workspace-diagnostics .urls-diagnosis-problem--informativo
.urls-diagnosis-problem-status {
    color: var(--color-review);
}

/* No determinado: gris */
.urls-detail-workspace-diagnostics .urls-diagnosis-problem--no_determinado
.urls-diagnosis-problem-status {
    color: var(--color-text-subtle);
}

/* Colores de los círculos según el estado */

.urls-detail-workspace-diagnostics .urls-diagnosis-problem--problema
.urls-detail-diagnostic-dot {
    background: var(--color-danger);
}

.urls-detail-workspace-diagnostics .urls-diagnosis-problem--advertencia
.urls-detail-diagnostic-dot {
    background: var(--color-warning);
}

.urls-detail-workspace-diagnostics .urls-diagnosis-problem--correcto
.urls-detail-diagnostic-dot {
    background: var(--color-success);
}

.urls-detail-workspace-diagnostics .urls-diagnosis-problem--informativo
.urls-detail-diagnostic-dot {
    background: var(--color-review);
}

.urls-detail-workspace-diagnostics .urls-diagnosis-problem--no_determinado
.urls-detail-diagnostic-dot {
    background: var(--color-text-subtle);
}

/* Contenedor del estado */

.urls-detail-workspace-diagnostics .urls-diagnosis-problem-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
}

/* Círculo indicador */

.urls-detail-workspace-diagnostics .urls-diagnosis-problem-status
.urls-detail-diagnostic-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

/* Etiqueta del área */

.urls-detail-workspace-diagnostics .urls-diagnosis-problem
.urls-detail-diagnostic-area-label {
    justify-self: end;
    align-self: start;
}

/* Título del diagnóstico */

.urls-detail-workspace-diagnostics .urls-diagnosis-problem-title {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--color-heading);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
}

/* Descripción del diagnóstico */

.urls-detail-workspace-diagnostics .urls-diagnosis-problem-description {
    grid-column: 1 / -1;
    margin: 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.7;
}

@media (max-width: 600px) {
    .urls-detail-workspace-diagnostics .urls-diagnosis-problem {
        grid-template-columns: minmax(0, 1fr);
        padding: 20px;
    }

    .urls-detail-workspace-diagnostics .urls-diagnosis-problem
    .urls-detail-diagnostic-area-label {
        justify-self: start;
    }
}

/* Panel derecho: contenido y tarjetas informativas */

.urls-detail-workspace-diagnostics .urls-diagnosis-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.urls-detail-workspace-diagnostics .urls-diagnosis-recommendations,
.urls-detail-workspace-diagnostics .urls-diagnosis-additional-info {
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.urls-detail-workspace-diagnostics .urls-diagnosis-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--color-heading);
    font-size: 15px;
    font-weight: 700;
}

.urls-detail-workspace-diagnostics .urls-diagnosis-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #dbeafe;
    color: #2563eb;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.urls-detail-workspace-diagnostics .urls-diagnosis-section-icon img {
    display: block;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.urls-detail-workspace-diagnostics .urls-diagnosis-recommendations-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding-left: 20px;
    color: #475569;
    font-size: 14px;
    line-height: 1.65;
}

.urls-detail-workspace-diagnostics .urls-diagnosis-recommendations-list li {
    padding-left: 3px;
}

.urls-detail-workspace-diagnostics .urls-diagnosis-recommendations-list li::marker {
    color: var(--color-review);
}

.urls-detail-workspace-diagnostics .urls-diagnosis-additional-info-text {
    margin: 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.7;
}

@media (max-width: 600px) {
    .urls-detail-workspace-diagnostics .urls-diagnosis-content {
        padding: 16px;
        gap: 14px;
    }

    .urls-detail-workspace-diagnostics .urls-diagnosis-recommendations,
    .urls-detail-workspace-diagnostics .urls-diagnosis-additional-info {
        padding: 16px;
    }
}

/* Panel derecho: datos observados y contexto de la URL */

.urls-detail-workspace-diagnostics .urls-diagnosis-observed-data,
.urls-detail-workspace-diagnostics .urls-diagnosis-url-context {
    min-width: 0;
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}

.urls-detail-workspace-diagnostics .urls-diagnosis-card-title {
    display: block;
    margin-bottom: 16px;
    color: var(--color-heading);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.urls-detail-workspace-diagnostics .urls-diagnosis-observed-list,
.urls-detail-workspace-diagnostics .urls-diagnosis-context-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
}

.urls-detail-workspace-diagnostics .urls-diagnosis-observed-row,
.urls-detail-workspace-diagnostics .urls-diagnosis-context-row {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #e7edf5;
    font-size: var(--font-size-body);
    line-height: 1.6;
}

.urls-detail-workspace-diagnostics .urls-diagnosis-observed-row:first-child,
.urls-detail-workspace-diagnostics .urls-diagnosis-context-row:first-child {
    padding-top: 0;
}

.urls-detail-workspace-diagnostics .urls-diagnosis-observed-row:last-child,
.urls-detail-workspace-diagnostics .urls-diagnosis-context-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.urls-detail-workspace-diagnostics .urls-diagnosis-observed-row dt,
.urls-detail-workspace-diagnostics .urls-diagnosis-context-row dt {
    margin: 0;
    color: #64748b;
    font-weight: 500;
}

.urls-detail-workspace-diagnostics .urls-diagnosis-observed-row dd,
.urls-detail-workspace-diagnostics .urls-diagnosis-context-row dd {
    min-width: 0;
    margin: 0;
    color: var(--color-heading);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.urls-detail-workspace-diagnostics .urls-diagnosis-no-evidence {
    margin: 0;
    color: #64748b;
    font-size: var(--font-size-body);
    line-height: 1.65;
}

@media (max-width: 600px) {
    .urls-detail-workspace-diagnostics .urls-diagnosis-observed-data,
    .urls-detail-workspace-diagnostics .urls-diagnosis-url-context {
        padding: 16px;
    }

    .urls-detail-workspace-diagnostics .urls-diagnosis-observed-row,
    .urls-detail-workspace-diagnostics .urls-diagnosis-context-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
    }
}

/* Resumen técnico de la URL seleccionada */

.urls-detail-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 20px;
    border: 1px solid var(--color-neutral);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.urls-detail-summary-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 4px;
    align-content: center;
    min-width: 0;
    padding: 18px 12px;
}

.urls-detail-summary-item + .urls-detail-summary-item {
    border-left: 1px solid var(--color-neutral);
}

.urls-detail-summary-item img {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.urls-detail-summary-item span {
    font-size: var(--font-size-body);
    line-height: 1.4;
    color: var(--color-text-subtle);
   grid-column: 2;
    grid-row: 1;
}

.urls-detail-summary-item strong {
    max-width: 100%;
    font-size: var(--font-size-body);
    line-height: 1.4;
    font-weight: 600;
    color: var(--color-heading);
    overflow-wrap: anywhere;
   grid-column: 2;
    grid-row: 2;
}

@media (max-width: 1450px) {
    .urls-detail-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .urls-detail-summary-item:nth-child(4) {
        border-left: 0;
    }

    .urls-detail-summary-item:nth-child(n+4) {
        border-top: 1px solid var(--color-neutral);
    }
}

@media (max-width: 650px) {
    .urls-detail-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .urls-detail-summary-item:nth-child(odd) {
        border-left: 0;
    }

    .urls-detail-summary-item:nth-child(even) {
        border-left: 1px solid var(--color-neutral);
    }

    .urls-detail-summary-item:nth-child(n+3) {
        border-top: 1px solid var(--color-neutral);
    }
}

/* Cuatro indicadores: Rastreo e indexabilidad */

.urls-detail-summary--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1450px) {
    .urls-detail-summary--four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .urls-detail-summary--four .urls-detail-summary-item:nth-child(4) {
        border-left: 1px solid var(--color-neutral);
    }

    .urls-detail-summary--four .urls-detail-summary-item:nth-child(n+4) {
        border-top: 0;
    }
}

@media (max-width: 900px) {
    .urls-detail-summary--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .urls-detail-summary--four .urls-detail-summary-item:nth-child(3) {
        border-left: 0;
    }

    .urls-detail-summary--four .urls-detail-summary-item:nth-child(4) {
        border-left: 1px solid var(--color-neutral);
    }

    .urls-detail-summary--four .urls-detail-summary-item:nth-child(n+3) {
        border-top: 1px solid var(--color-neutral);
    }
}

/* Segunda fila del resumen de URL */

.urls-detail-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.urls-detail-overview-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--color-neutral);
    border-radius: 10px;
    background: #fff;
}

.urls-detail-overview-card h3 {
    margin: 0 0 18px;
    color: var(--color-heading);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.urls-detail-relations {
    display: grid;
    gap: 14px;
    margin-top: 16px;
    min-width: 0;
}

.urls-detail-relations > details > summary {
    cursor: pointer;
}

.urls-detail-relations > details > summary > h3 {
    display: inline;
    margin: 0;
}

.urls-detail-relations .urls-detail-relations-list {
    display: grid;
    gap: 20px;
    min-width: 0;
    margin-top: 18px;
}

.urls-detail-relations .urls-detail-relation {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--color-neutral);
    border-radius: 10px;
    background: var(--color-surface-soft);
}

.urls-detail-relations .urls-detail-relation > div {
    padding-block: 12px;
}

.urls-detail-relations .urls-detail-selected-url-value > span {
    font-size: var(--font-size-body);
}

.urls-detail-relations > details > .executive-panel-note {
    margin: 16px 0 0;
}

/* Vista previa orientativa de Google */

.urls-detail-serp-preview {
    min-width: 0;
    font-family: Arial, sans-serif;
}

/* Encabezado de la vista previa de Google */

.urls-detail-serp-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin-bottom: 14px;
}

.urls-detail-serp-favicon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: 1px solid #dadce0;
    border-radius: 50%;
    background: #f1f3f4;
    overflow: hidden;
}

.urls-detail-serp-favicon img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.urls-detail-serp-site {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}

.urls-detail-serp-site-name {
    color: #202124;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
}

.urls-detail-serp-site .urls-detail-serp-url {
    margin: 0;
    color: #4d5156;
    font-size: 12px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.urls-detail-serp-menu {
    flex-shrink: 0;
    align-self: center;
    padding: 4px;
    color: #70757a;
    font-family: Arial, sans-serif;
    font-size: 22px;
    line-height: 1;
}

.urls-detail-serp-url {
    margin-bottom: 7px;
    color: #4d5156;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.urls-detail-serp-title {
    margin-bottom: 5px;
    color: #1a0dab;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.urls-detail-serp-description {
    margin: 0;
    color: #4d5156;
    font-size: 14px;
    line-height: 1.58;
    overflow-wrap: anywhere;
}

/* Indicadores de longitud del title y la meta description */

.urls-detail-serp-lengths {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--color-neutral);
}

.urls-detail-serp-length-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.urls-detail-serp-length-item > span {
    color: var(--color-text-subtle);
    font-size: var(--font-size-body);
    line-height: 1.4;
}

.urls-detail-serp-length-value {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.urls-detail-serp-length-value strong {
    color: var(--color-heading);
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: 1.4;
}

.urls-detail-serp-length-dot {
    display: inline-block;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-text-subtle);
}

.urls-detail-serp-length-dot.estado-correcto {
    background: var(--color-success);
}

.urls-detail-serp-length-dot.estado-informativo {
    background: var(--color-review);
}

.urls-detail-serp-length-dot.estado-revisar {
    background: var(--color-warning);
}

.urls-detail-serp-length-dot.estado-problema {
    background: var(--color-danger);
}

.urls-detail-serp-length-dot.estado-no_comprobado {
    background: var(--color-text-subtle);
}

.urls-detail-serp-length-dot.estado-vacio {
    background: var(--color-neutral);
}

/* Segunda fila: Canonical, Sitemap e Indexabilidad */

.urls-detail-overview--technical .urls-detail-overview-data > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
}

.urls-detail-overview--technical .urls-detail-overview-data dd {
    overflow-wrap: normal;
    word-break: normal;
}

.urls-detail-overview--technical .urls-detail-canonical-url {
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    line-break: auto;
}

.urls-detail-overview--technical .urls-detail-overview-data dt {
    overflow-wrap: normal;
}

/* Tarjeta Canonical del detalle de URL */

.urls-detail-canonical-url {
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

.urls-detail-canonical-url a {
    color: var(--color-review);
    text-decoration: none;
}

.urls-detail-canonical-url a:hover {
    text-decoration: underline;
}

.urls-detail-canonical-coherence {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.urls-detail-canonical-coherence .urls-detail-serp-length-dot {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
}

.urls-detail-overview--technical .urls-detail-canonical-coherence .urls-detail-serp-length-dot {
    margin-top: 4px;
}

.urls-detail-overview-card > small {
    display: block;
    margin-top: 18px;
    color: var(--color-text-subtle);
    font-size: 11px;
    line-height: 1.5;
}

.urls-detail-overview-empty {
    margin: 0;
    color: var(--color-text-subtle);
    font-size: var(--font-size-body);
}

/* Metadatos y respuesta HTTP */

.urls-detail-overview-data {
    margin: 0;
}

.urls-detail-overview-data > div {
    display: grid;
    grid-template-columns: minmax(90px, 35%) minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-neutral);
}

.urls-detail-overview-data > div:first-child {
    padding-top: 0;
}

.urls-detail-overview-data > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.urls-detail-overview-data dt {
    margin: 0;
    color: var(--color-text-subtle);
    font-size: var(--font-size-body);
    line-height: 1.5;
}

.urls-detail-overview-data dd {
    min-width: 0;
    margin: 0;
    color: var(--color-heading);
    font-size: var(--font-size-body);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* SEO On-Page: detalle de URL */

.urls-detail-overview--seo-on-page {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.urls-detail-overview--seo-on-page .urls-detail-overview-card:first-child {
    grid-column: auto;
}

.urls-detail-overview--seo-on-page .urls-detail-overview-card--implementacion-imagenes,
.urls-detail-overview--seo-on-page .urls-detail-overview-card--evidencias {
    grid-column: span 2;
}

/* SEO On-Page: evidencias técnicas en dos columnas */

.urls-detail-overview--seo-on-page .urls-detail-evidencias-columnas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.urls-detail-overview--seo-on-page .urls-detail-evidencias-columna {
    min-width: 0;
}

@media (max-width: 750px) {
    .urls-detail-overview--seo-on-page .urls-detail-evidencias-columnas {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* SEO On-Page: presentación de dimensiones de imágenes */

.urls-detail-overview--seo-on-page .urls-detail-image-dimensions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.urls-detail-overview--seo-on-page .urls-detail-image-dimensions strong {
    font-weight: 700;
}

/* SEO On-Page: contadores de encabezados H1-H6 */

.urls-detail-overview--seo-on-page .urls-detail-overview-card--encabezados
.urls-detail-heading-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 6px 6px 0;
    padding: 5px 8px;
    border: 1px solid var(--color-neutral);
    border-radius: 6px;
    background: #f8fafc;
    color: var(--color-heading);
    font-size: 12px;
    white-space: nowrap;
}

.urls-detail-overview--seo-on-page .urls-detail-heading-count strong {
    font-weight: 700;
}

.urls-detail-overview--seo-on-page .urls-detail-overview-data > div {
    padding: 12px 0;
}

.urls-detail-overview--seo-on-page .urls-detail-overview-card > .executive-panel-note {
    margin-top: 18px;
    line-height: 1.65;
}

.urls-detail-overview--seo-on-page .urls-detail-evidencia-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-neutral);
}

.urls-detail-overview--seo-on-page .urls-detail-evidencia-item:first-of-type {
    padding-top: 0;
}

.urls-detail-overview--seo-on-page .urls-detail-evidencia-item:last-of-type {
    padding-bottom: 0;
    border-bottom: 0;
}

.urls-detail-overview--seo-on-page .urls-detail-evidencia-item .executive-panel-note {
    margin: 10px 0 0;
    line-height: 1.65;
}

@media (max-width: 1600px) {
    .urls-detail-overview--seo-on-page {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .urls-detail-overview--seo-on-page .urls-detail-overview-card--implementacion-imagenes,
   .urls-detail-overview--seo-on-page .urls-detail-overview-card--evidencias {
       grid-column: auto;
   }
}

@media (max-width: 750px) {
    .urls-detail-overview--seo-on-page {
        grid-template-columns: minmax(0, 1fr);
    }

    .urls-detail-overview--seo-on-page .urls-detail-overview-card--implementacion-imagenes,
    .urls-detail-overview--seo-on-page .urls-detail-overview-card--evidencias {
        grid-column: auto;
    }
}

/* Adaptación responsive */

@media (max-width: 1450px) {
    .urls-detail-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .urls-detail-overview-card:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 750px) {
    .urls-detail-overview {
        grid-template-columns: minmax(0, 1fr);
    }

    .urls-detail-overview-card:first-child {
        grid-column: auto;
    }
}

@media (max-width: 480px) {
    .urls-detail-overview-card {
        padding: 16px;
    }

    .urls-detail-overview-data > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
    }
}

/* ---------------------------------------------------------
   10. DATOS ESTRUCTURADOS — DETALLE DE URL
   Escritorio: 3 tarjetas superiores; debajo, columna
   izquierda apilada y propiedades a doble anchura.
   --------------------------------------------------------- */

.urls-detail-overview--datos-estructurados {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}

/* Las tres tarjetas superiores ocupan toda la altura de su fila. */
.urls-detail-overview--datos-estructurados > .urls-detail-overview-card:nth-child(-n+3) {
    grid-column: auto;
    align-self: stretch;
}

/* Bloques JSON-LD y evidencias técnicas comparten un contenedor. */
.urls-detail-overview--datos-estructurados > .urls-detail-schema-columna-izquierda {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* Las tarjetas anidadas no necesitan posicionamiento en el grid padre. */
.urls-detail-schema-columna-izquierda > .urls-detail-overview-card {
    min-width: 0;
    width: 100%;
}

/* Propiedades y entidades: ocupa las otras dos columnas. */
.urls-detail-overview--datos-estructurados > .urls-detail-overview-card--propiedades-schema {
    grid-column: 2 / 4;
    align-self: start;
}

/* Distribución interna de propiedades en dos columnas. */
.urls-detail-schema-propiedades-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.urls-detail-schema-propiedades-bloque {
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 16px;
    border: 1px solid var(--color-neutral);
    border-radius: 8px;
    background: #f8fafc;
}

/* Tablet y portátiles: dos columnas exteriores (hasta 1450 px). */
@media (max-width: 1450px) {
    .urls-detail-overview--datos-estructurados {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .urls-detail-overview--datos-estructurados > .urls-detail-schema-columna-izquierda {
        grid-column: 1;
        grid-row: auto;
    }

    .urls-detail-overview--datos-estructurados > .urls-detail-overview-card--propiedades-schema {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

/* Móvil: una columna exterior e interior (hasta 750 px). */
@media (max-width: 750px) {
    .urls-detail-overview--datos-estructurados {
        grid-template-columns: minmax(0, 1fr);
    }

    .urls-detail-overview--datos-estructurados > .urls-detail-schema-columna-izquierda,
    .urls-detail-overview--datos-estructurados > .urls-detail-overview-card--propiedades-schema {
        grid-column: 1;
    }

    .urls-detail-schema-propiedades-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------
   11. CONTENIDO Y SEMÁNTICA — DETALLE DE URL

   Escritorio:
   - Columna izquierda: contenido principal.
   - Columnas derechas: estructura, señales,
     clasificación y coherencia.
   --------------------------------------------------------- */

.urls-detail-overview--contenido-semantica {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}

/* Contenido principal: columna izquierda. */
.urls-detail-overview--contenido-semantica
> .urls-detail-content-main {
    grid-column: 1;
    min-width: 0;
}

/* Contenedor de las dos columnas derechas. */
.urls-detail-overview--contenido-semantica
> .urls-detail-content-right {
    grid-column: 2 / 4;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    min-width: 0;
    align-content: start;
}

/* Evitar desbordamientos. */
.urls-detail-overview--contenido-semantica
.urls-detail-overview-card {
    min-width: 0;
    min-height: 0;
}

/* Primera fila derecha: dos tarjetas. */
.urls-detail-overview--contenido-semantica
.urls-detail-content-structure,
.urls-detail-overview--contenido-semantica
.urls-detail-content-signals {
    grid-column: auto;
}

/* Clasificación y coherencia: filas completas. */
.urls-detail-overview--contenido-semantica
.urls-detail-content-classification,
.urls-detail-overview--contenido-semantica
.urls-detail-content-coherence {
    grid-column: 1 / -1;
}

/* Datos de clasificación en dos columnas. */
.urls-detail-overview--contenido-semantica
.urls-detail-content-classification .urls-detail-overview-data {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    align-items: stretch;
}

.urls-detail-overview--contenido-semantica
.urls-detail-content-classification .urls-detail-overview-data > div {
    height: 100%;
    box-sizing: border-box;
}

/* Evitar separadores incompletos en la última fila. */
.urls-detail-overview--contenido-semantica
.urls-detail-content-classification .urls-detail-overview-data > div:nth-last-child(-n+2) {
    border-bottom: 0;
}

/* ---------------------------------------------------------
   TABLETAS — DOS COLUMNAS
   --------------------------------------------------------- */

@media (max-width: 1450px) {

    .urls-detail-overview--contenido-semantica {
        grid-template-columns: minmax(0, 1fr);
    }

    .urls-detail-overview--contenido-semantica
    > .urls-detail-content-main,
    .urls-detail-overview--contenido-semantica
    > .urls-detail-content-right {
        grid-column: 1;
    }
}

/* ---------------------------------------------------------
   MÓVILES — UNA COLUMNA
   --------------------------------------------------------- */

@media (max-width: 750px) {

    .urls-detail-overview--contenido-semantica
    > .urls-detail-content-right {
        grid-template-columns: minmax(0, 1fr);
    }

    .urls-detail-overview--contenido-semantica
    .urls-detail-content-structure,
    .urls-detail-overview--contenido-semantica
    .urls-detail-content-signals,
    .urls-detail-overview--contenido-semantica
    .urls-detail-content-classification,
    .urls-detail-overview--contenido-semantica
    .urls-detail-content-coherence {
        grid-column: 1;
    }

    .urls-detail-overview--contenido-semantica
    .urls-detail-content-classification .urls-detail-overview-data {
        grid-template-columns: minmax(0, 1fr);
    }

    .urls-detail-overview--contenido-semantica
    .urls-detail-content-classification .urls-detail-overview-data > div:nth-last-child(2) {
        border-bottom: 1px solid var(--color-neutral);
    }
}

/* Subtítulos interiores de contenido y coherencia. */
.urls-detail-content-semantica
.urls-detail-content-main h4,
.urls-detail-content-semantica
.urls-detail-content-coherence h4 {
    margin: 24px 0 12px;
    padding-top: 18px;
    border-top: 1px solid var(--color-neutral);
    color: var(--color-heading);
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: 1.5;
}

/* Vista previa del contenido extraído. */
.urls-detail-content-semantica
.urls-detail-content-preview {
    box-sizing: border-box;
    width: 100%;
    height: 240px;
    min-height: 120px;
    max-height: 700px;
    resize: vertical;
    margin: 12px 0 0;
    padding: 16px;
    overflow-y: auto;
    overflow-wrap: anywhere;
    border: 1px solid var(--color-neutral);
    border-radius: 8px;
    background: #f8fafc;
    color: var(--color-heading);
    font-size: var(--font-size-body);
    line-height: 1.7;
}

/* Separación de las notas explicativas. */
.urls-detail-content-semantica
.urls-detail-overview-card > p {
    margin: 12px 0 16px;
    color: var(--color-text-subtle);
    line-height: 1.6;
}

/* ---------------------------------------------------------
   TABLETAS — DOS COLUMNAS
   --------------------------------------------------------- */

@media (max-width: 1450px) {

    .urls-detail-overview--contenido-semantica {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
    }

    /* Contenido principal ocupa todo el ancho. */
    .urls-detail-overview--contenido-semantica
    > .urls-detail-content-main {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    /* Estructura y señales aparecen lado a lado. */
    .urls-detail-overview--contenido-semantica
    > .urls-detail-content-structure,
    .urls-detail-overview--contenido-semantica
    > .urls-detail-content-signals {
        grid-column: auto;
        grid-row: auto;
    }

    /* Clasificación ocupa ambas columnas. */
    .urls-detail-overview--contenido-semantica
    > .urls-detail-content-classification {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

/* ---------------------------------------------------------
   MÓVILES — UNA COLUMNA
   --------------------------------------------------------- */

@media (max-width: 750px) {

    .urls-detail-overview--contenido-semantica {
        grid-template-columns: minmax(0, 1fr);
    }

    .urls-detail-overview--contenido-semantica
    > .urls-detail-overview-card {
        grid-column: 1;
        grid-row: auto;
    }

    /* Clasificación también pasa a una columna interior. */
    .urls-detail-overview--contenido-semantica
    .urls-detail-content-classification .urls-detail-overview-data {
        grid-template-columns: minmax(0, 1fr);
    }

   /* Restaurar el separador penúltimo en móviles. */
   .urls-detail-overview--contenido-semantica
   .urls-detail-content-classification .urls-detail-overview-data > div:nth-last-child(2) {
       border-bottom: 1px solid var(--color-neutral);
   }
}

/* URL seleccionada */

.urls-detail-selected-url {
    min-width: 0;
    margin-top: 5px;
}

.urls-detail-selected-url-value {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.urls-detail-selected-url-value > span {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--color-accent);
    font-size: var(--font-size-lead);
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.urls-detail-selected-url-value .app-header-url-icono {
    flex-shrink: 0;
}

/* Responsive */

@media (max-width: 1200px) {
    .urls-detail-workspace {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 650px) {
    .urls-detail-workspace {
        gap: 16px;
    }

    .urls-detail-main .priorities-diagnostics-header,
    .urls-detail-diagnostics .priorities-diagnostics-header {
        padding: 16px;
    }

    .urls-detail-content,
    .urls-detail-diagnostics-content {
        padding: 0 16px 16px;
    }
}

.executive-sitemap-donut {
    position: relative;
    display: flex;
    flex: 0 0 156px;
    width: 156px;
    height: 156px;
    align-items: center;
    justify-content: center;
    justify-self: center;
    border-radius: 50%;
    background:
        conic-gradient(
            var(--color-success) 0 var(--sitemap-coverage, 0%),
            var(--color-neutral) var(--sitemap-coverage, 0%) 100%
        );
}

.executive-sitemap-donut::before {
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    background: var(--color-surface);
    content: "";
}

.executive-sitemap-center {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.executive-sitemap-center strong {
    display: block;
    color: var(--color-heading);
    font-size: var(--font-size-h1);
    font-weight: 700;
    line-height: 0.95;
   letter-spacing: -1.5px;
}

.executive-sitemap-center span {
    display: block;
    margin-top: 6px;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    font-weight: 500;
    line-height: 1.3;
}

#sitemap .executive-sitemap-center span {
    font-size: var(--font-size-body);
}

.executive-sitemap-panel .executive-sitemap-breakdown {
    display: grid;
    flex: 1;
    gap: 5px;
    min-width: 0;
}

.executive-sitemap-state-row {
    display: flex;
    min-height: 24px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 0;
}

.executive-sitemap-state {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
}

.executive-sitemap-state-dot {
    display: inline-block;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    margin-top: 0;
    border-radius: 50%;
}

.executive-sitemap-state-dot.auditada {
    background: var(--color-success);
}

.executive-sitemap-state-dot.no-auditada {
    background: var(--color-neutral);
}

.executive-sitemap-state-row strong {
    color: var(--color-text);
    font-size: var(--font-size-body);
    font-weight: 600;
}

.executive-sitemap-panel .executive-panel-note {
    margin-top: 14px;
    padding-top: 10px;
}

/* ---------------------------------------------------------
   Contenido y semántica — Distribución y confianza
   --------------------------------------------------------- */

#contenido-semantica .content-semantics-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

#contenido-semantica .content-semantics-overview > .executive-panel {
    min-width: 0;
}

/* Distribución de tipos de página */

#contenido-semantica .content-semantics-types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 22px;
    align-content: start;
}

#contenido-semantica .content-semantics-type-row {
    display: grid;
    gap: 7px;
}

#contenido-semantica .content-semantics-type-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#contenido-semantica .content-semantics-type-heading strong {
    color: var(--color-text);
    font-size: var(--font-size-body);
    font-weight: 600;
    white-space: nowrap;
}

#contenido-semantica .content-semantics-type-heading small {
    margin-left: 5px;
    color: var(--color-text-muted);
    font-weight: 400;
}

#contenido-semantica .content-semantics-type-track {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-neutral);
}

#contenido-semantica .content-semantics-type-fill {
    display: block;
    height: 100%;
    width: var(--type-percentage, 0%);
    max-width: 100%;
    border-radius: inherit;
    background: var(--color-review);
}

/* Colores de los tipos de página */

#contenido-semantica .content-semantics-type-fill.home {
    background: var(--color-success);
}

#contenido-semantica .content-semantics-type-fill.articulo {
    background: var(--color-review);
}

#contenido-semantica .content-semantics-type-fill.producto {
    background: var(--color-warning);
}

#contenido-semantica .content-semantics-type-fill.servicio {
    background: #8b5cf6;
}

#contenido-semantica .content-semantics-type-fill.listado {
    background: #06b6d4;
}

#contenido-semantica .content-semantics-type-fill.pagina_generica {
    background: var(--color-text-subtle);
}

#contenido-semantica .content-semantics-type-fill.no_determinado {
    background: var(--color-neutral);
}

/* Confianza de clasificación */
#contenido-semantica .content-semantics-overview .executive-sitemap-summary {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 28px;
    align-content: center;
}

#contenido-semantica .content-semantics-confidence-donut {
    width: 190px;
    height: 190px;
    flex-basis: 190px;
}

#contenido-semantica .content-semantics-overview .executive-sitemap-breakdown {
    gap: 16px;
}
#contenido-semantica .content-semantics-confidence-donut {
    background: conic-gradient(
        var(--color-success)
            0 var(--confidence-high, 0%),

        var(--color-review)
            var(--confidence-high, 0%)
            calc(
                var(--confidence-high, 0%) +
                var(--confidence-medium, 0%)
            ),

        var(--color-warning)
            calc(
                var(--confidence-high, 0%) +
                var(--confidence-medium, 0%)
            )
            100%
    );
}

#contenido-semantica .content-semantics-confidence-donut.is-empty {
    background: var(--color-neutral);
}

#contenido-semantica .executive-sitemap-state-dot.confidence-high {
    background: var(--color-success);
}

#contenido-semantica .executive-sitemap-state-dot.confidence-medium {
    background: var(--color-review);
}

#contenido-semantica .executive-sitemap-state-dot.confidence-low {
    background: var(--color-warning);
}

/* ---------------------------------------------------------
   Contenido y semántica — Estado textual y estructura HTML
   --------------------------------------------------------- */

/* Tercera fila: dos paneles equilibrados */

#contenido-semantica .content-semantics-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

#contenido-semantica .content-semantics-details > .executive-panel {
    min-width: 0;
    height: 100%;
}

#contenido-semantica .content-semantics-details > .executive-panel {
    min-width: 0;
}

/* Estado del contenido textual */

#contenido-semantica .content-semantics-text-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

#contenido-semantica .content-semantics-text-metric {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface-soft);
}

#contenido-semantica .content-semantics-text-metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

#contenido-semantica .content-semantics-text-metric-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

#contenido-semantica .content-semantics-text-metric-content small {
    color: var(--color-text-subtle);
    font-size: 12px;
    line-height: 1.35;
}

#contenido-semantica .content-semantics-text-metric-icon img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

#contenido-semantica .content-semantics-text-metric-content strong {
    display: block;
    color: var(--color-heading);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

#contenido-semantica .content-semantics-text-metric-content > span {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    font-weight: 500;
    line-height: 1.3;
}

#contenido-semantica .content-semantics-text-metric-content small {
    display: block;
    color: var(--color-text-subtle);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
}

/* Elementos de estructura de contenido */

#contenido-semantica .content-semantics-structure-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 28px;
    align-content: center;
    flex: 1;
}

#contenido-semantica .content-semantics-structure-row {
    display: grid;
    gap: 9px;
    min-width: 0;
}

#contenido-semantica .content-semantics-structure-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#contenido-semantica .content-semantics-structure-label {
    color: var(--color-text);
    font-size: var(--font-size-body);
    font-weight: 500;
    overflow-wrap: anywhere;
}

#contenido-semantica .content-semantics-structure-heading strong {
    color: var(--color-heading);
    font-size: var(--font-size-body);
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#contenido-semantica .content-semantics-structure-track {
    height: 12px;
    min-height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-neutral);
}

#contenido-semantica .content-semantics-structure-fill {
    display: block;
    height: 100%;
    max-width: 100%;
    border-radius: 999px;
    background: var(--color-review);
}

#contenido-semantica .content-semantics-details > .executive-panel:first-child {
    display: flex;
    flex-direction: column;
}

#contenido-semantica .content-semantics-details > .executive-panel:first-child
.content-semantics-text-metrics {
    flex: 1;
    align-content: center;
}

@media (min-width: 601px) and (max-width: 1100px) {
    #contenido-semantica .content-semantics-structure-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 20px;
    }
}

/* Adaptación responsive */

@media (max-width: 900px) {
    #contenido-semantica .content-semantics-overview,
    #contenido-semantica .content-semantics-details {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    #contenido-semantica .content-semantics-types {
        grid-template-columns: minmax(0, 1fr);
    }

   /* Indicadores de contenido textual en móvil */

    #contenido-semantica .content-semantics-text-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    #contenido-semantica .content-semantics-text-metric {
    padding: 12px;
    gap: 10px;
   }
   
   #contenido-semantica .content-semantics-text-metric-icon {
       flex-basis: 38px;
       width: 38px;
       height: 38px;
   }
   
   #contenido-semantica .content-semantics-text-metric-icon img {
       width: 22px;
       height: 22px;
   }
   
   #contenido-semantica .content-semantics-text-metric-content strong {
       font-size: 20px;
   }
   
   #contenido-semantica .content-semantics-text-metric-content > span {
       font-size: 12px;
   }
   
   #contenido-semantica .content-semantics-text-metric-content small {
       font-size: 11px;
   }

    /* Barras de estructura HTML en móvil */

    #contenido-semantica .content-semantics-structure-list {
       grid-template-columns: minmax(0, 1fr);
       gap: 16px;
   }

    #contenido-semantica .content-semantics-structure-heading {
        gap: 8px;
    }

    #contenido-semantica .content-semantics-overview .executive-sitemap-summary {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }

    #contenido-semantica .content-semantics-overview .executive-sitemap-breakdown {
        width: 100%;
    }
}

/* ---------------------------------------------------------
   Sitemap — Cobertura y distribución de archivos
   --------------------------------------------------------- */

/* Dos columnas iguales */
#sitemap .executive-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

/* Colores específicos de cobertura */
#sitemap .crawl-status-2xx {
    background: var(--color-success);
}

#sitemap .crawl-status-3xx {
    background: var(--color-neutral);
}

/* Gráfico circular de tres segmentos */
#sitemap .executive-sitemap-donut {
    background: conic-gradient(
        var(--color-success)
            0 var(--sitemap-coverage, 0%),

        #3b82f6
            var(--sitemap-coverage, 0%)
            calc(
                var(--sitemap-coverage, 0%) +
                var(--sitemap-indices, 0%)
            ),

        var(--color-neutral)
            calc(
                var(--sitemap-coverage, 0%) +
                var(--sitemap-indices, 0%)
            )
            100%
    );
}

/* Colores de la leyenda de tipos de sitemap */
#sitemap .executive-sitemap-state-dot.auditada {
    background: var(--color-success);
}

#sitemap .executive-sitemap-state-dot.no-auditada {
    background: var(--color-review);
}

#sitemap .executive-sitemap-state-dot.no-determinado {
    background: var(--color-text-subtle);
}



/* Adaptación a pantallas pequeñas */
@media (max-width: 900px) {
    #sitemap .executive-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ---------------------------------------------------------
   08.4 Prioridad de atención
   --------------------------------------------------------- */

.executive-priority-list {
    display: grid;
    flex: 1;
    align-content: center;
}

.executive-priority-row-featured {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 13px;
    min-height: 62px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
   text-decoration: none;
}

.executive-priority-row-featured:hover {
    text-decoration: none;
}

.executive-priority-row-featured:last-child {
    border-bottom: 0;
}

.executive-priority-count {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-surface);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.executive-priority-count.alta {
    background: var(--color-danger);
}

.executive-priority-count.media {
    background: var(--color-warning);
}

.executive-priority-count.baja {
    background: var(--color-review);
}

.executive-priority-count.no-determinada {
    background: var(--color-text-subtle);
}

.executive-priority-content {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.executive-priority-content strong {
    color: var(--color-heading);
    font-size: var(--font-size-body);
    font-weight: 700;
    line-height: 1.25;
}

.executive-priority-content span {
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    font-weight: 400;
    line-height: 1.35;
}

.executive-priority-chevron {
    display: block;
    width: 16px;
    height: 16px;
    justify-self: end;
    opacity: 0.75;
}

.executive-panel-note {
    margin: 17px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-subtle);
    font-size: var(--font-size-small);
    line-height: 1.5;
}


/* ---------------------------------------------------------
   08.5 Atención prioritaria y principales áreas
   --------------------------------------------------------- */

.executive-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    margin-bottom: 30px;
}

.executive-detail-grid .executive-attention {
    height: 100%;
    margin-bottom: 0;
}

/* Diagnósticos que merecen atención. */
.executive-attention {
    width: 100%;
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}

.executive-attention-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.executive-attention-header h2 {
    margin: 0;
    color: var(--color-heading);
    font-size: var(--font-size-h2);
    font-weight: 700;
    line-height: 1.3;
}

.executive-attention-link {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 5px;
    color: var(--color-action);
    font-size: var(--font-size-small);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
       margin-top: 27px;
}

.executive-attention-link:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.executive-attention-list {
    display: grid;
}

.executive-attention-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto 14px;
    align-items: center;
    column-gap: 14px;
    min-height: 56px;
    padding: 9px 0;
    border-top: 1px solid var(--color-border);
       text-decoration: none;
}

.executive-attention-item:first-child {
    border-top: 0;
}

.executive-attention-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--color-text);
    background: var(--color-neutral);
    font-size: var(--font-size-body);
    font-weight: 700;
}

.executive-attention-content {
    min-width: 0;
}

.executive-attention-content > strong {
    display: block;
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--font-size-body);
    font-weight: 500;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.executive-attention-priority {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    min-height: 28px;
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--color-text);
    background: var(--color-surface-soft);
    font-size: var(--font-size-small);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.executive-attention-priority.alta {
    color: var(--color-surface);
    background: var(--color-danger);
}

.executive-attention-priority.media {
    color: var(--color-surface);
    background: var(--color-warning);
}

.executive-attention-priority.baja {
    color: var(--color-surface);
    background: var(--color-review);
}

.executive-attention-priority.no_determinada {
    color: var(--color-text);
    background: var(--color-surface-soft);
}

.executive-attention-chevron {
    color: var(--color-text-subtle);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    text-align: right;
}

/* Estado vacío cuando la evidencia no genera diagnósticos. */
.executive-attention-empty {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
}

.executive-attention-empty-icon {
    display: block;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
}

.executive-attention-empty strong {
    display: block;
    color: var(--color-heading);
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: 1.4;
}

.executive-attention-empty p {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    line-height: 1.45;
}

.executive-attention-empty small {
    display: block;
    margin-top: 6px;
    color: var(--color-text-subtle);
    font-size: var(--font-size-small);
    line-height: 1.45;
}

/* Principales áreas con diagnósticos. */

.executive-areas {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}

.executive-areas-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.executive-areas-header h2 {
    margin: 0;
    color: var(--color-heading);
    font-size: var(--font-size-h2);
    font-weight: 700;
    line-height: 1.3;
}

.executive-areas-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
   color: var(--color-action);
    font-size: var(--font-size-small);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
       margin-top: 27px;
}

.executive-areas-link:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.executive-areas-table {
    display: grid;
    gap: 0;
    min-width: 0;
}

.executive-area-row {
    display: grid;
    grid-template-columns:
        minmax(175px, 0.9fr)
        minmax(120px, 1.4fr)
        58px
        58px
        48px;
    align-items: center;
    gap: 14px;
    min-height: 42px;
    border-bottom: 1px solid var(--color-border);
}

.executive-area-row:last-child {
    border-bottom: 0;
}

.executive-area-row-header {
    min-height: 25px;
    border-bottom: 0;
}

.executive-area-row-header > span {
    color: var(--color-text-subtle);
    font-size: var(--font-size-micro);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.executive-area-name {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.executive-area-name img {
    display: block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.executive-area-name strong {
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.executive-area-track {
    display: flex;
    width: 100%;
    height: 10px;
    min-height: 10px;
    gap: 2px;
    padding: 0;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-neutral);
}

.executive-area-track > span {
    display: block;
    flex:
        var(--area-segment-value, 0)
        1
        0;
    min-width: 0;
    height: 100%;
}

.executive-area-track > .problema {
    background: var(--color-danger);
}

.executive-area-track > .advertencia {
    background: var(--color-warning);
}

.executive-area-track > .revisar {
    background: var(--color-review);
}

.executive-area-value {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: 1;
    text-align: center;
}

.executive-area-value.problema:not(:empty) {
    color: var(--color-danger);
}

.executive-area-value.advertencia:not(:empty) {
    color: var(--color-warning);
}

.executive-area-value.revisar:not(:empty) {
    color: var(--color-review);
}

@media (max-width: 760px) {
    .executive-areas {
        overflow-x: auto;
    }

    .executive-areas-table {
        min-width: 620px;
    }

    .executive-area-row {
        grid-template-columns:
            minmax(175px, 0.9fr)
            minmax(120px, 1.4fr)
            58px
            58px
            48px;
    }
}

/* ---------------------------------------------------------
   08.6 Distribución de estados técnicos
   --------------------------------------------------------- */

.executive-states {
    width: 100%;
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}

.executive-states-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.executive-states-header h2 {
    margin: 0;
  color: var(--color-heading);
  font-size: var(--font-size-h2);
  font-weight: 700;
  line-height: 1.3;
}

.executive-states-total {
    flex: 0 0 auto;
    padding: 4px 9px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-muted);
    background: var(--color-background);
    font-size: var(--font-size-micro);
    font-weight: 600;
    white-space: nowrap;
}

.executive-states-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 18px;
    margin: 0;
}

.executive-states-list {
    display: grid;
    gap: 12px;
}

.executive-state-row {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: center;
    gap: 20px;
}

.executive-state-area {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.executive-state-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    font-weight: 500;
    line-height: 1.3;
}

.executive-state-dot {
    width: 12px;
  height: 12px;
  margin-top: 0;
  border-radius: 50%;
}

.executive-state-track {
    display: flex;
    width: 100%;
    height: 14px;
    min-height: 14px;
    gap: 2px;
    padding: 0;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-neutral);
}

.executive-state-fill {
    position: relative;
    display: flex;
    flex:
        var(--state-segment-value, 0)
        1
        0;
    min-width: 0;
    height: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.executive-state-fill > span {
    color: var(--color-surface);
    font-size: var(--font-size-micro);
    font-weight: 700;
    line-height: 1;
}

.executive-state-dot.correcto,
.executive-state-fill.correcto {
    background: var(--color-success);
}

.executive-state-dot.advertencia,
.executive-state-fill.advertencia {
    background: var(--color-warning);
}

.executive-state-dot.problema,
.executive-state-fill.problema {
    background: var(--color-danger);
}

.executive-state-dot.revisar,
.executive-state-fill.revisar {
    background: var(--color-review);
}

.executive-state-dot.informativo,
.executive-state-fill.informativo {
    background: var(--color-review);
}

.executive-state-dot.no_comprobado,
.executive-state-fill.no_comprobado {
    background: var(--color-text-subtle);
}

.executive-states-note {
    margin: 17px 0 0;
    padding-top: 13px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-subtle);
    font-size: var(--font-size-small);
    line-height: 1.5;
}

/* ---------------------------------------------------------
   08.7 Contexto de la auditoría
   --------------------------------------------------------- */

.executive-context {
    width: 100%;
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}

.executive-context-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 20px;
}

.executive-context-heading {
    min-width: 0;
}

.executive-context-heading h2 {
    margin: 0;
    color: var(--color-heading);
    font-size: var(--font-size-h2);
    font-weight: 700;
    line-height: 1.3;
}

.executive-context-heading > p {
    max-width: 760px;
    margin: 6px 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    line-height: 1.5;
}

.executive-context-ai {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    font-weight: 600;
    white-space: nowrap;
}

.executive-context-ai img {
    width: 18px;
    height: 18px;
}

.executive-context-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 0;
}

.executive-context-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-height: 128px;
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

.executive-context-interpretation {
    border-color: #cfe0ff;
    background: var(--color-review-soft);
}

.executive-context-limitation {
    border-color: #fedf89;
    background: var(--color-warning-soft);
}

.executive-context-card-icon {
    display: flex;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.executive-context-card-icon img {
    width: 21px;
    height: 21px;
}

.executive-context-card-content {
    min-width: 0;
}

.executive-context-card h3,
.executive-context-conclusion h3 {
    margin: 0 0 5px;
    color: var(--color-heading);
    font-size: var(--font-size-body);
    font-weight: 700;
    line-height: 1.35;
}

.executive-context-card p,
.executive-context-conclusion p {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-body);
    line-height: 1.55;
}

.executive-context-limitation h3 {
    color: var(--color-warning-dark);
}

.executive-context-conclusions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.executive-context-conclusion {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 0 18px;
}

.executive-context-conclusion:first-child {
    padding-left: 0;
}

.executive-context-conclusion:last-child {
    padding-right: 0;
}

.executive-context-conclusion + .executive-context-conclusion {
    border-left: 1px solid var(--color-border);
}

.executive-context-conclusion > img {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}


/* ---------------------------------------------------------
   08.8 Responsive
   --------------------------------------------------------- */

@media (max-width: 1180px) {

    .executive-summary-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .executive-summary-grid,
    .executive-detail-grid {
        grid-template-columns: 1fr;
    }

    .executive-panel {
        min-height: 0;
    }
}

@media (max-width: 700px) {

    .executive-attention-item {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .executive-attention-priority {
        grid-column: 2;
        justify-self: start;
    }

    .executive-attention-empty {
        align-items: flex-start;
    }

       .executive-context-main {
        grid-template-columns: 1fr;
    }

    .executive-context-conclusions {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .executive-context-conclusion,
    .executive-context-conclusion:first-child,
    .executive-context-conclusion:last-child {
        padding: 0;
    }

    .executive-context-conclusion + .executive-context-conclusion {
        padding-top: 16px;
        border-top: 1px solid var(--color-border);
        border-left: 0;
    }
}

@media (max-width: 600px) {

    .executive-summary-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .executive-summary-metrics {
        grid-template-columns: 1fr;
    }

    .executive-metric {
        padding: 16px;
    }

    .executive-analysis-status,
    .executive-sitemap-summary {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
    }

    .executive-analysis-total,
    .executive-sitemap-total {
        text-align: left;
    }

    .executive-score-panel .executive-analysis-status {
    display: flex;
    align-items: center;
      }
      
      .executive-score {
          width: 140px;
          height: 140px;
          text-align: center;
      }

    .executive-area-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .executive-area-stats {
        justify-content: flex-start;
        max-width: none;
    }

    .executive-states-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .executive-state-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .executive-state-area {
        white-space: normal;
    }

    .executive-states-legend {
        gap: 8px 14px;
    }

    .executive-context-header {
        flex-direction: column;
        gap: 10px;
    }

    .executive-context-ai {
        margin-top: 0;
        white-space: normal;
    }

    .executive-context-card {
        min-height: 0;
    }
}


/* =========================================================
   09. VISTAS DE ANÁLISIS
   ========================================================= */

/* ---------------------------------------------------------
   09.1 Navegación entre vistas
   --------------------------------------------------------- */

.report-view[hidden] {
    display: none !important;
}

.report-view {
    width: 100%;
    min-width: 0;
}


/* ---------------------------------------------------------
   09.2 Cabecera de las vistas
   --------------------------------------------------------- */

.report-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.report-section-heading h1 {
    margin: 6px 0 10px;
  font-size: 2rem;
  line-height: 1.15;
}

.report-section-heading p {
    max-width: 720px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    line-height: 1.6;
}


/* ---------------------------------------------------------
   09.3 Métricas y avisos
   --------------------------------------------------------- */

.report-section-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.report-section-notice {
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid var(--color-warning);
    border-radius: 10px;
    background: var(--color-warning-soft);
}

.report-section-notice strong {
    display: block;
    margin-bottom: 3px;
    color: var(--color-warning-dark);
    font-size: var(--font-size-small);
    font-weight: 600;
}

.report-section-notice p {
    margin: 0;
    color: var(--color-warning-dark);
    font-size: var(--font-size-micro);
}


/* ---------------------------------------------------------
   09.4 Tarjetas
   --------------------------------------------------------- */

.report-section-card {
    width: 100%;
    margin-bottom: 16px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}

.report-section-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.report-section-card-header h2 {
    margin: 0;
    color: var(--color-heading);
    font-size: var(--font-size-h6);
    font-weight: 600;
    line-height: 1.3;
}


/* ---------------------------------------------------------
   09.5 Tablas de evidencia
   --------------------------------------------------------- */

.report-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
}

.report-table th,
.report-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: var(--font-size-body);
    text-align: left;
    vertical-align: middle;
}

.report-table th {
    color: var(--color-text-muted);
    background: var(--color-background);
    font-size: var(--font-size-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.report-table tbody tr:last-child td {
    border-bottom: 0;
}

.report-table code {
    color: var(--color-text);
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: var(--font-size-body);
    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   09.6 Estados
   --------------------------------------------------------- */

.report-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: var(--font-size-micro);
    font-weight: 600;
    white-space: nowrap;
}

.report-status.sin_restriccion_detectada {
    color: var(--color-success-dark);
    background: var(--color-success-soft);
}

.report-status.restringida_noindex {
    color: var(--color-noindex);
    background: var(--color-noindex-soft);
}

.report-status.no_indexable_http {
    color: var(--color-danger);
    background: var(--color-danger-soft);
}

.report-status.no_comprobada {
    color: var(--color-text);
    background: var(--color-surface-soft);
}


/* ---------------------------------------------------------
   09.7 Estados vacíos y limitaciones
   --------------------------------------------------------- */

.report-section-empty {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
}

.report-section-limitation {
    margin: 0;
    padding: 12px 14px;
    border-left: 3px solid var(--color-border-strong);
    color: var(--color-text-muted);
    background: var(--color-background);
    font-size: var(--font-size-micro);
    line-height: 1.6;
}


/* ---------------------------------------------------------
   09.8 Responsive
   --------------------------------------------------------- */

@media (max-width: 1180px) {

    .report-section-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .report-section-metrics {
        grid-template-columns: 1fr;
    }

    .report-section-card {
        padding: 16px;
    }
}


/* =========================================================
   10. INFORME LEGADO v0.4 Y COMPATIBILIDAD
   ========================================================= */

/*
 * Estilos conservados temporalmente mientras el informe v0.4
 * siga presente durante la migración a las vistas v0.5.
 *
 * No utilizar estas clases para nuevos componentes v0.5.
 */

/* ---------------------------------------------------------
   10.1 Tarjetas y resumen
   --------------------------------------------------------- */

.tarjeta {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
}

.resumen {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(150px, 1fr)
    );
    gap: 12px;
    margin-top: 20px;
}

.resumen-item {
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}

.resumen-item strong {
    display: block;
    margin-bottom: 8px;
    font-size: 28px;
    line-height: 1;
}


/* ---------------------------------------------------------
   10.2 Explicación y leyenda de estados
   --------------------------------------------------------- */

.explicacion-estados {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
}

.explicacion-estados h3 {
    margin: 0 0 8px;
    font-size: var(--font-size-lead);
}

.explicacion-estados > p {
    margin: 0 0 16px;
    color: var(--color-text);
    line-height: 1.6;
}

.leyenda-estados {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(220px, 1fr)
    );
    gap: 10px;
    margin: 0;
}

.leyenda-estados > div {
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
}

.leyenda-estados dt {
    margin: 0 0 5px;
    font-weight: 700;
}

.leyenda-estados dd {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-body);
    line-height: 1.5;
}


/* ---------------------------------------------------------
   10.3 Hallazgos
   --------------------------------------------------------- */

.hallazgo {
    margin: 14px 0;
    padding: 18px 20px;
    border-left: 5px solid var(--color-border-strong);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
}

.hallazgo h3 {
    margin: 0 0 8px;
}

.hallazgo p {
    margin: 6px 0;
}

.grupo-hallazgos {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
}

.grupo-hallazgos > h2 {
    margin: 0 0 16px;
}

.grupo-hallazgos > h3 {
    margin: 0 0 16px;
    font-size: var(--font-size-h4);
}

.grupo-hallazgos .hallazgo {
    margin: 12px 0;
    border-top: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    box-shadow: none;
}

.grupo-hallazgos .hallazgo:last-child {
    margin-bottom: 0;
}

/* Estados de los hallazgos legados. */
.estado-correcto {
    border-left-color: var(--color-success);
}

.estado-advertencia {
    border-left-color: var(--color-warning);
}

.estado-problema {
    border-left-color: var(--color-danger);
}

.estado-revisar {
    border-left-color: var(--color-review);
}

.estado-neutro {
    border-left-color: var(--color-text-muted);
}

.etiqueta {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--color-surface-soft);
    font-size: var(--font-size-body);
    font-weight: 600;
}


/* ---------------------------------------------------------
   10.4 Tipo de página
   --------------------------------------------------------- */

.tipo-pagina-resumen {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(180px, 1fr)
    );
    gap: 12px;
    margin-bottom: 16px;
}

.tipo-pagina-dato {
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
}

.tipo-pagina-dato strong {
    display: block;
    margin-bottom: 3px;
}

.senales-tipo {
    margin: 8px 0 0;
    padding-left: 22px;
}

.senales-tipo li {
    margin: 4px 0;
}


/* ---------------------------------------------------------
   10.5 Elementos HTML del informe legado
   --------------------------------------------------------- */

/*
 * Elementos HTML utilizados por el informe legado.
 * Se mantienen encapsulados para evitar interferencias
 * con las vistas y componentes de v0.5.
 */

.legacy-site-report table {
    width: 100%;
    border-collapse: collapse;
}

.legacy-site-report td,
.legacy-site-report th {
    padding: 8px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.legacy-site-report pre {
    max-height: 600px;
    padding: 15px;
    overflow: auto;
    border-radius: 8px;
    background: var(--color-surface-soft);
}

.legacy-site-report details {
    margin-top: 20px;
}

.legacy-site-report summary {
    font-weight: 600;
    cursor: pointer;
}


/* ---------------------------------------------------------
   10.6 Progreso legado de auditoría de sitio
   --------------------------------------------------------- */

.progreso-auditoria-sitio {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}

.progreso-auditoria-sitio[hidden] {
    display: none;
}

.progreso-auditoria-sitio h2 {
    margin-top: 0;
}

#estado-progreso-auditoria {
    margin-bottom: 16px;
    font-weight: 600;
}

.datos-progreso-auditoria {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(130px, 1fr)
    );
    gap: 10px;
    margin: 0;
}

.datos-progreso-auditoria > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
}

.datos-progreso-auditoria dt {
    margin-bottom: 4px;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    font-weight: 600;
}

.datos-progreso-auditoria dd {
    margin: 0;
    font-size: var(--font-size-lead);
    font-weight: 700;
}

#progreso-url-actual {
    overflow-wrap: anywhere;
    font-size: var(--font-size-body);
}


/* ---------------------------------------------------------
   10.7 Filtros de URLs auditadas
   --------------------------------------------------------- */

.filtros-urls-auditadas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 16px 0 8px;
}

.filtro-url-auditada {
    color: var(--color-text);
    background: var(--color-border);
    transition:
        color 0.15s ease,
        background-color 0.15s ease;
}

.filtro-url-auditada:hover {
    background: var(--color-border-strong);
}

.filtro-url-auditada.activo {
    color: var(--color-surface);
    background: var(--color-surface-dark);
}

.filtro-url-auditada.activo:hover {
    background: var(--color-surface-dark);
}


/* ---------------------------------------------------------
   10.8 Responsive legado
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .legacy-site-report .formulario-auditoria button {
        align-self: stretch;
        width: 100%;
    }
}


/* =========================================================
   10.9 Vista de prioridades
   ========================================================= */

.priorities-header {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    width: 100%;
    margin-bottom: 28px;
}

.priorities-heading {
    width: 100%;
    max-width: none;
}

.priorities-heading h1 {
    margin: 6px 0 10px;
    font-size: 2rem;
    line-height: 1.15;
}

.priorities-heading p {
    max-width: 720px;
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.65;
}


/* Aviso contextual */

.priorities-important {
    display: flex;
    gap: 14px;
    margin-top: 30px;
    padding: 18px 20px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
}

.priorities-important-icon {
    display: flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #ffffff;
    background: #2563eb;
    font-size: 0.85rem;
    font-weight: 800;
}

.priorities-important strong {
    display: block;
    margin-bottom: 5px;
    color: #1e3a8a;
    font-size: var(--font-size-body);
}

.priorities-important p {
    margin: 0;
    color: #475569;
    font-size: var(--font-size-body);
    line-height: 1.55;
}


/* Resumen de prioridades */

.priorities-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
   width: 100%;
   clear: both;
}

.priorities-summary-card {
    display: flex;
    gap: 14px;
    align-items: center;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
}

.priorities-summary-card .executive-priority-count {
    flex: 0 0 auto;
}

.priorities-summary-card > div {
    min-width: 0;
}

.priorities-summary-number {
    display: block;
    margin-bottom: 1px;
    color: var(--color-text);
    font-size: 1.35rem;
    line-height: 1;
}

.priorities-summary-card h2 {
    margin: 4px 0;
    font-size: 18px;
    line-height: 1.25;
}

.priorities-summary-card p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    line-height: 1.4;
}


/* Distribución */

.priorities-distribution {
    margin-bottom: 28px;
    padding: 20px 22px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
}

.priorities-distribution-header {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}

.priorities-distribution-header h2 {
    margin: 0;
  color: var(--color-heading);
  font-size: var(--font-size-h2);
  font-weight: 700;
  line-height: 1.3;
}

.priorities-distribution-header p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
}

.priorities-distribution-header > strong {
    flex: 0 0 auto;
    color: var(--color-text-muted);
  font-size: var(--font-size-body);
  font-weight: 600;
  white-space: nowrap;
}

.priorities-distribution-bar {
    display: flex;
    width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-border);
}

.priorities-distribution-segment {
    display: block;
    height: 100%;
}

.priorities-distribution-segment.alta,
.priorities-distribution-dot.alta {
    background: #dc2626;
}

.priorities-distribution-segment.media,
.priorities-distribution-dot.media {
    background: #f59e0b;
}

.priorities-distribution-segment.baja,
.priorities-distribution-dot.baja {
    background: #16a34a;
}

.priorities-distribution-segment.no-determinada,
.priorities-distribution-dot.no-determinada {
    background: #94a3b8;
}

.priorities-distribution-legend {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.priorities-distribution-legend-item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 7px;
    align-items: center;
    min-width: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
}

.priorities-distribution-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.priorities-distribution-legend-item strong {
    grid-column: 2;
    margin-top: 2px;
    color: var(--color-text);
    font-size: var(--font-size-body);
}

/* Espacio de trabajo de diagnósticos */

.priorities-workspace {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
    gap: 20px;
    align-items: start;
    width: 100%;
    margin-top: 28px;
}

.priorities-left-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.priorities-left-column > .priorities-diagnostics {
    margin-bottom: 0;
}

.priorities-left-column > .executive-context {
    width: 100%;
    min-width: 0;
    margin: 0 0 30px;
}

.priorities-diagnostics,
.priorities-detail {
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    margin-bottom: 30px;
}

.priorities-diagnostics {
    overflow: hidden;
}

.priorities-diagnostics-header {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 22px 16px;
}

.priorities-diagnostics-header h2 {
    margin: 0;
  color: var(--color-heading);
  font-size: var(--font-size-h2);
  font-weight: 700;
  line-height: 1.3;
}

.priorities-diagnostics-header p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
}

.priorities-diagnostics-header > strong {
    flex: 0 0 auto;
    color: var(--color-text-muted);
  font-size: var(--font-size-body);
  font-weight: 600;
  white-space: nowrap;
}

/* Explorador de URLs: buscador y filtros */

.urls-explorer-filters {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 20px 0 0;
    padding: 0 0 20px;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.urls-explorer-filters .priorities-search {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.urls-explorer-filters .priorities-filters {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.urls-explorer-filters .priorities-filters label {
    min-width: 0;
}

.urls-explorer-filters .priorities-filters select {
    width: 100%;
    min-width: 0;
}

.urls-explorer-filters .priorities-reset-filters {
    white-space: nowrap;
    min-height: 38px;
}

@media (max-width: 1100px) {
    .urls-explorer-filters .priorities-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .urls-explorer-filters .priorities-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .urls-explorer-filters .priorities-reset-filters {
        grid-column: 1 / -1;
    }
}

@media (max-width: 420px) {
    .urls-explorer-filters .priorities-filters {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* Buscador y filtros */

.priorities-diagnostics-tools {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
   padding: 10px 18px 0;
}

.priorities-search {
     display: flex;
    width: 100%;
    gap: 8px;
    align-items: center;
    min-width: 180px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    background: var(--color-surface);
}

.priorities-search > span {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
}

.priorities-search input {
    width: 100%;
    min-width: 0;
    padding: 9px 0;
    border: 0;
    outline: 0;
    color: var(--color-text);
    background: transparent;
    font: inherit;
    font-size: var(--font-size-body);
}

.priorities-search input::placeholder {
    color: var(--color-text-muted);
}

.priorities-filters {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr))
        auto;
    gap: 10px;
    align-items: center;
    width: 100%;
}

.priorities-filters label {
    display: block;
    min-width: 0;
}

.priorities-filters select {
   width: 100%;
    min-height: 38px;
    padding: 0 34px 0 11px;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    color: var(--color-text);
    background: var(--color-surface);
    font: inherit;
    font-size: var(--font-size-body);
    font-weight: 600;
    cursor: pointer;
}

.priorities-filters select:hover {
    border-color: var(--color-border-strong);
}

.priorities-filters select:focus {
    border-color: #2563eb;
    outline: 2px solid rgba(37, 99, 235, 0.12);
    outline-offset: 1px;
}

.priorities-reset-filters {
    min-height: 38px;
    color: var(--color-accent);
    background: rgba(37, 99, 235, 0.06);
    border-color: rgba(37, 99, 235, 0.18);
    cursor: pointer;
}

.priorities-reset-filters img {
    display: block;
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
}

.priorities-reset-filters:hover {
    color: var(--color-accent);
    background: rgba(37, 99, 235, 0.1);
    border-color: rgba(37, 99, 235, 0.3);
}

/* ---------------------------------------------------------
   Sitemap — Listado de archivos detectados
   --------------------------------------------------------- */

#sitemap .sitemap-list-panel {
    margin-top: 20px;
    min-height: 0;
}

#sitemap .sitemap-list-table {
    width: 100%;
    overflow-x: auto;
}

#sitemap .sitemap-list-row {
    grid-template-columns:
        minmax(220px, 2.4fr)
        minmax(115px, 1fr)
        minmax(110px, 0.9fr)
        minmax(110px, 0.9fr)
        minmax(140px, 1.2fr)
        minmax(135px, 1fr);
    min-width: 940px;
}

#sitemap .sitemap-list-row-head {
    border-top: 0;
}

#sitemap .sitemap-list-row > span {
    min-width: 0;
}

#sitemap .sitemap-list-url {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#sitemap .sitemap-list-url-text {
    color: var(--color-text-muted);
    font-weight: 600;
}

#sitemap .sitemap-list-url a {
    color: var(--color-text-muted);
    font-weight: 600;
    text-decoration: none;
}

#sitemap .sitemap-list-url a:hover {
    text-decoration: underline;
}

#sitemap .sitemap-list-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

#sitemap .sitemap-list-status img {
    display: block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

/* Sitemap — Colores de los valores de la tabla */

#sitemap .sitemap-list-number,
#sitemap .sitemap-list-date {
    color: var(--color-text);
    font-weight: 600;
}

#sitemap .sitemap-list-review {
    color: var(--color-review);
    font-weight: 600;
}

#sitemap .sitemap-list-success {
    color: var(--color-success);
    font-weight: 600;
}

#sitemap .sitemap-list-muted {
    color: var(--color-text-subtle);
    font-weight: 400;
}

/* Listado de diagnósticos */

.priorities-diagnostics-table {
    width: 100%;
}

/* Diagnósticos de rastreo e indexabilidad */

.crawl-diagnostics-workspace {
    margin-top: 20px;
}

.crawl-diagnostics-filters {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        auto;
}

/* Arquitectura y enlazado: filtros y tabla de seis columnas. */

.architecture-diagnostics-workspace .crawl-diagnostics-filters {
    grid-template-columns:
        repeat(3, minmax(0, 1fr))
        auto;
}

/* Arquitectura: siete columnas sin desplazamiento horizontal. */

.architecture-diagnostics-workspace {
    grid-template-columns: minmax(0, 4fr) minmax(250px, 1fr);
    gap: 16px;
}

.architecture-diagnostics-table {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.crawl-diagnostics-table.architecture-diagnostics-table
.priorities-diagnostics-row {
    grid-template-columns:
        minmax(85px, 0.85fr)
        minmax(155px, 1.75fr)
        minmax(90px, 0.95fr)
        minmax(90px, 0.95fr)
        minmax(95px, 1fr)
        minmax(65px, 0.7fr)
        16px;
    gap: 7px;
    width: 100%;
    min-width: 0;
}

.architecture-diagnostics-table
.priorities-diagnostics-row > span,
.architecture-diagnostics-table
.priorities-diagnostics-row > strong {
    min-width: 0;
}

.architecture-diagnostics-table
.priorities-diagnostics-row > span:nth-child(6) {
    white-space: nowrap;
}

.architecture-diagnostics-table .architecture-diagnosis-name {
    display: flex;
    align-items: center;
    min-width: 0;
}

.architecture-diagnostics-table .architecture-diagnosis-name strong {
    overflow: visible;
    white-space: normal;
    overflow-wrap: break-word;
}

@media (max-width: 1100px) {
    .architecture-diagnostics-workspace {
        grid-template-columns: minmax(0, 1fr);
    }
}

.crawl-diagnostics-table .priorities-diagnostics-row {
    grid-template-columns:
        minmax(105px, 0.85fr)
        minmax(180px, 1.8fr)
        minmax(95px, 0.85fr)
        minmax(115px, 1fr)
        minmax(115px, 1fr)
        18px;
}

.priorities-diagnostics-row {
    display: grid;
    grid-template-columns:
        minmax(100px, 0.75fr)
        minmax(180px, 1.6fr)
        minmax(130px, 1.15fr)
        minmax(90px, 0.8fr)
        minmax(105px, 0.85fr)
        18px;
    gap: 12px;
    align-items: center;
    width: 100%;
}

.priorities-diagnostics-row-data > .priorities-diagnostics-chevron {
    color: var(--color-text-subtle);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    text-align: right;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        color 0.15s ease;
}

.priorities-diagnostics-row-data > .priorities-diagnostics-chevron:hover {
    color: var(--color-primary);
}

.priorities-diagnostics-row-data > .priorities-diagnostics-chevron[aria-expanded="true"] {
    transform: rotate(90deg);
}

.priorities-diagnostics-affected-urls {
    padding: 10px 48px 12px 18px;
    border-top: 1px solid var(--color-border);
    background: var(--color-background);
}

.priorities-diagnostics-affected-urls[hidden] {
    display: none;
}

.priorities-diagnostics-affected-url {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 5px 0;
}

.priorities-diagnostics-affected-url[hidden] {
    display: none;
}

.priorities-diagnostics-affected-url-text {
    min-width: 0;
    overflow: hidden;
    color: var(--color-accent);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.priorities-diagnostics-affected-url-link {
    display: inline-flex;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.priorities-diagnostics-affected-url-link img {
    display: block;
    width: 14px;
    height: 14px;
}

.priorities-diagnostics-affected-url-link:hover {
    background: var(--color-surface);
}

.priorities-diagnostics-affected-pagination {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    padding: 14px 0 2px;
    border-top: 1px solid var(--color-border);
}

.priorities-diagnostics-affected-progress {
    margin-right: auto;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
}

.priorities-diagnostics-show-more,
.priorities-diagnostics-show-less {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    cursor: pointer;
}

.priorities-diagnostics-show-more {
    color: var(--color-surface);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.priorities-diagnostics-show-less {
    color: var(--color-text-muted);
    background: var(--color-surface);
    border-color: var(--color-border);
}

.priorities-diagnostics-show-more:hover {
    opacity: 0.9;
}

.priorities-diagnostics-show-less:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.priorities-diagnostics-show-more[hidden],
.priorities-diagnostics-show-less[hidden] {
    display: none;
}

.priorities-diagnostics-row-head {
    border-top: 0;
}

.priorities-diagnostics-row-data[hidden] {
    display: none;
}

.priorities-diagnostics-row-data {
    padding: 14px 18px;
    border: 0;
    border-top: 1px solid var(--color-border);
    color: var(--color-text);
    background: var(--color-surface);
    font-family: inherit;
    font-size: var(--font-size-body);
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    cursor: pointer;
}

.priorities-diagnostics-row-head
+ .priorities-diagnostics-row-data {
    border-top: 0;
}

.priorities-diagnostics-row-data:hover {
    background: var(--color-background);
}

.priorities-diagnostics-row-data.activo {
    background: #f8fafc;
    box-shadow: inset 3px 0 0 #2563eb;
}

.priorities-diagnostics-row-data strong {
    min-width: 0;
    overflow: hidden;
    font-size: var(--font-size-body);
    text-overflow: ellipsis;
    white-space: nowrap;
   color: var(--color-text-muted);
   font-weight: 600;
}

.priorities-diagnostics-row-data > span {
    min-width: 0;
    color: var(--color-text-muted);
}

.priorities-diagnostics-row-data > span:first-child {
    display: flex;
    gap: 7px;
    align-items: center;
    color: var(--color-text);
    font-weight: 600;
}

.priorities-priority-badge {
    display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  min-height: 28px;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--color-text);
  background: var(--color-surface-soft);
  font-size: var(--font-size-small);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
   
}

.priorities-priority-badge.alta {
    color: #fff;
    background: #dc2626;
}

.priorities-priority-badge.media {
    color: #fff;
    background: #ff9914;
}

.priorities-priority-badge.baja {
    color: #fff;
    background: #3b82f6;
}

.priorities-priority-badge.no_determinada {
    color: #64748b;
    background: #f1f5f9;
}

.priorities-diagnosis-state {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.priorities-state-dot {
    display: inline-block;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.priorities-state-dot.problema {
    background: var(--color-danger);
}

.priorities-state-dot.advertencia {
    background: var(--color-warning);
}

.priorities-state-dot.revisar {
    background: var(--color-review);
}

.priorities-state-dot.oportunidad {
    background: #2563eb;
}

.priorities-affected-count {
    color: var(--color-text);
    font-weight: 700;
}

.priorities-no-results {
    margin: 0;
    padding: 24px 22px;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
}


/* Detalle del diagnóstico */

.priorities-detail {
    overflow: hidden;
}

.priorities-detail-header {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--color-border);
}

.priorities-detail-header h2 {
    margin: 0;
  color: var(--color-heading);
  font-size: var(--font-size-h2);
  font-weight: 700;
  line-height: 1.3;
}

.priorities-detail-body {
    padding: 20px;
}

.priorities-detail-empty {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--color-text-muted);
}

.priorities-detail-body h3 {
    margin: 5px 0 18px;
    font-size: 18px;
    line-height: 1.35;
}

.priorities-detail-data {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 18px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
}

.priorities-detail-data-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    min-width: 0;
}

.priorities-detail-data-row > img {
    display: block;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    object-fit: contain;
}

.priorities-detail-data-row > div {
    min-width: 0;
}

.priorities-detail-data dt {
    margin: 0 0 3px;
    color: var(--color-text);
    font-size: var(--font-size-body);
    font-weight: 700;
    line-height: 1.3;
}

.priorities-detail-data dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    font-weight: 400;
    line-height: 1.45;
}

.priorities-detail-data .priorities-diagnosis-state {
    display: flex;
    gap: 7px;
    align-items: center;
}

.priorities-affected-toggle {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
}

.priorities-affected-toggle > img {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

.priorities-affected-toggle[aria-expanded="true"] > img {
    transform: rotate(90deg);
}

.priorities-affected-urls {
    margin-top: 9px;
}

.priorities-affected-urls[hidden] {
    display: none;
}

.priorities-affected-urls .priorities-detail-url {
    display: flex;
    padding: 7px 0;
}

.priorities-affected-urls .priorities-detail-url + .priorities-detail-url {
    border-top: 1px solid var(--color-border);
}

.priorities-detail-example-url {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.priorities-detail-example-url-text {
    min-width: 0;
    overflow: hidden;
    color: var(--color-accent);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.priorities-detail-example-url-link {
    display: inline-flex;
    flex: 0 0 14px;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
}

.priorities-detail-example-url-link img {
    display: block;
    width: 14px;
    height: 14px;
}

.priorities-detail-url {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    max-width: 100%;
    color: var(--color-primary);
    text-decoration: none;
}

.priorities-detail-url span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.priorities-detail-url > img {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.priorities-detail-url:hover {
    text-decoration: underline;
}

.priorities-detail-section {
    margin-top: 18px;
   border-top: 1px solid var(--color-border);
   padding: 18px 0 0;
}

.priorities-detail-section > strong {
    display: block;
    margin-bottom: 7px;
    font-size: 16px;
   color: var(--color-heading);
  font-weight: 700;
}

.priorities-detail-section p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    line-height: 1.55;
}

.priorities-detail-section code {
    display: block;
    overflow-wrap: anywhere;
    padding: 9px 10px;
    border-radius: 6px;
    background: var(--color-background);
    font-size: 0.68rem;
    line-height: 1.45;
}


/* Responsive del espacio de trabajo */

@media (max-width: 1200px) {

    .priorities-workspace {
        grid-template-columns: 1fr;
    }

    .priorities-diagnostics-tools {
        flex-direction: column;
        align-items: stretch;
    }

    .priorities-filters {
        flex-wrap: wrap;
    }
}

@media (max-width: 800px) {

    .priorities-diagnostics {
        overflow-x: auto;
    }

    .priorities-diagnostics-table {
        min-width: 720px;
    }

}


/* Responsive */

@media (max-width: 1100px) {

    .priorities-header {
        grid-template-columns: 1fr;
    }

    .priorities-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {

    .priorities-summary {
        grid-template-columns: 1fr;
    }

    .priorities-distribution-header {
        flex-direction: column;
        gap: 8px;
    }

    .priorities-distribution-legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   MÓDULO · RASTREO E INDEXABILIDAD
   ========================================================= */

/* Resumen paralelo de rastreo e indexabilidad. */
.crawl-indexability-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.crawl-indexability-overview .executive-panel {
    min-width: 0;
}

.crawl-indexability-overview .executive-panel-header {
    margin-bottom: 22px;
}

.crawl-indexability-overview .executive-panel-header h2 {
    margin-bottom: 5px;
}

.crawl-indexability-overview .executive-panel-header p {
    margin: 0;
}


/* Barra de distribución */

.crawl-status-bar {
    display: flex;
    width: 100%;
    height: 12px;
    margin: 0 0 22px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-background);
}

.crawl-status-segment {
    display: block;
    height: 100%;
}


/* Colores de respuesta HTTP */

.crawl-status-2xx {
    background: #22c55e;
}

.crawl-status-3xx {
    background: #3b82f6;
}

.crawl-status-4xx {
    background: #f59e0b;
}

.crawl-status-5xx {
    background: #ef4444;
}


/* Colores de indexabilidad */

.indexability-status-sin-restriccion {
    background: #22c55e;
}

.indexability-status-noindex {
    background: #ef4444;
}

.indexability-status-http {
    background: #f59e0b;
}

.indexability-status-no-comprobada {
    background: #94a3b8;
}


/* Leyenda factual */

.crawl-status-legend {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px 24px;
}

.crawl-status-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
}

.crawl-status-item > span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crawl-status-item strong {
    color: var(--color-heading);
    font-size: var(--font-size-body);
    font-weight: 700;
}

.crawl-status-item small {
    min-width: 38px;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    text-align: right;
}

.crawl-status-dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.crawl-status-percentage {
    margin-left: 4px;
    color: var(--color-text-muted);
    font-weight: 400;
}

/* SEO On-Page: distribución y cobertura */

#seo-on-page .on-page-status-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    margin-top: 24px;
}

@media (max-width: 900px) {
    #seo-on-page .on-page-status-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* SEO On-Page: distribución de longitud */

#seo-on-page .on-page-length-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    margin-top: 24px;
}

#seo-on-page .on-page-length-panel {
    min-width: 0;
}

#seo-on-page .on-page-length-chart {
    --on-page-length-plot-height: 160px;
    --on-page-length-axis-height: 36px;
    position: relative;
    margin-top: 18px;
}

/* El valor exacto aparece sobre cada barra; no hace falta eje Y. */
#seo-on-page .on-page-length-y-axis {
    display: none;
}

#seo-on-page .on-page-length-columns {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    height: calc(var(--on-page-length-plot-height) + var(--on-page-length-axis-height));
}

#seo-on-page .on-page-length-column {
    position: relative;
    display: grid;
    grid-template-rows: var(--on-page-length-plot-height) var(--on-page-length-axis-height);
    min-width: 0;
}

/* El rango orientativo ocupa únicamente el área del gráfico. */
#seo-on-page .on-page-length-column.is-reference::before {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: var(--on-page-length-plot-height);
    background: var(--color-success-soft);
    pointer-events: none;
    content: "";
}

#seo-on-page .on-page-length-reference-label {
    position: absolute;
    z-index: 6;
    top: 7px;
    left: 50%;
    padding: 3px 12px;
    border-radius: 4px;
    color: var(--color-success);
    background: var(--color-success-soft);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transform: translateX(-50%);
}

#seo-on-page .on-page-length-plot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: var(--on-page-length-plot-height);
    border-bottom: 1px solid var(--color-border);
}

#seo-on-page .on-page-length-bar {
    position: relative;
    z-index: 3;
    display: block;
    width: 62%;
    min-width: 24px;
    max-width: 90px;
    background: var(--color-review);
    border-radius: 5px 5px 0 0;
}

#seo-on-page .on-page-length-count {
    position: absolute;
    z-index: 5;
    bottom: calc(var(--bar-height, 0%) + 7px);
    left: 50%;
    color: var(--color-heading);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transform: translateX(-50%);
}

#seo-on-page .on-page-length-axis-label {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 8px 4px 0;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

#seo-on-page .on-page-length-axis-title {
    margin-top: 9px;
    color: var(--color-text-subtle);
    font-size: 0.74rem;
    font-weight: 600;
    text-align: center;
}

#seo-on-page .on-page-length-panel .executive-panel-note {
    margin-top: 20px;
}

@media (max-width: 900px) {
    #seo-on-page .on-page-length-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    #seo-on-page .on-page-length-chart {
        --on-page-length-plot-height: 130px;
        --on-page-length-axis-height: 34px;
    }

    #seo-on-page .on-page-length-reference-label {
        font-size: 0.66rem;
    }

    #seo-on-page .on-page-length-bar {
        width: 54%;
        min-width: 12px;
    }

    #seo-on-page .on-page-length-axis-label {
        font-size: 0.7rem;
    }
}

/* SEO On-Page: idiomas observados e imágenes */

#seo-on-page .on-page-observed-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
    margin-top: 24px;
}

#seo-on-page .on-page-observed-panel {
    min-width: 0;
}

#seo-on-page .on-page-observed-panel .executive-panel-header {
    margin-bottom: 24px;
}

#seo-on-page .on-page-observed-panel .executive-panel-header h2 {
    margin-bottom: 5px;
}

#seo-on-page .on-page-observed-panel .executive-panel-header p {
    margin: 0;
}


/* Idiomas */

#seo-on-page .on-page-language-layout {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

#seo-on-page .on-page-language-distribution {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

#seo-on-page .on-page-language-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

#seo-on-page .on-page-language-summary-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-width: 0;
    min-height: 82px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--color-surface-soft);
}

#seo-on-page .on-page-language-summary-item strong {
    display: block;
    color: var(--color-review);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

#seo-on-page .on-page-language-summary-item span {
    min-width: 0;
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}


/* Métricas horizontales compartidas */

#seo-on-page .on-page-horizontal-metric {
    min-width: 0;
}

#seo-on-page .on-page-horizontal-metric-header {
    display: flex;
    gap: 16px;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}

#seo-on-page .on-page-horizontal-metric-header strong {
    min-width: 0;
    overflow: hidden;
    color: var(--color-heading);
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#seo-on-page .on-page-horizontal-metric-header span {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

#seo-on-page .on-page-horizontal-track {
    position: relative;
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-neutral);
}

#seo-on-page .on-page-horizontal-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--color-review);
}

#seo-on-page .on-page-horizontal-fill-neutral {
    background: var(--color-text-subtle);
}


/* Imágenes */

#seo-on-page .on-page-image-summary {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* Estados sin datos */

#seo-on-page .on-page-observed-empty {
    margin: 0;
    padding: 16px 18px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface-soft);
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    line-height: 1.55;
}


/* Notas */

#seo-on-page .on-page-observed-panel .executive-panel-note {
    margin-top: 24px;
}


/* Responsive */

@media (max-width: 1200px) {
    #seo-on-page .on-page-observed-summary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    #seo-on-page .on-page-language-summary {
        grid-template-columns: 1fr;
    }

    #seo-on-page .on-page-language-summary-item {
        min-height: 0;
    }
}

@media (max-width: 520px) {
    #seo-on-page .on-page-language-summary {
        grid-template-columns: 1fr;
    }

    #seo-on-page .on-page-horizontal-metric-header {
        gap: 10px;
    }

    #seo-on-page .on-page-horizontal-metric-header strong {
        white-space: normal;
    }
}

/* SEO On-Page: distribución de estados */

.on-page-status-correcto {
    background: var(--color-success);
}

.on-page-status-problema {
    background: var(--color-danger);
}

.on-page-status-advertencia {
    background: var(--color-warning);
}

.on-page-status-revisar {
    background: var(--color-review);
}

.on-page-status-informativo {
    background: var(--color-info);
}

/* Arquitectura y enlazado: estados */

.architecture-status-correcto {
    background: var(--color-success);
}

.architecture-status-redireccion {
    background: var(--color-warning);
}

.architecture-status-roto {
    background: var(--color-danger);
}

.architecture-status-http {
    background: #f97316;
}

.architecture-status-pendiente {
    background: var(--color-text-subtle);
}

/* Dos paneles de Arquitectura y enlazado */

.architecture-panels-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .architecture-panels-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Arquitectura y enlazado — URLs por profundidad */

.architecture-depth-list-panel {
    width: 100%;
    min-width: 0;
    margin-top: 20px;
}

.architecture-depth-list-panel .report-filters {
    margin-bottom: 16px;
}

.architecture-depth-list-panel .report-filters-controls {
    --report-filter-columns: 2;
}

.architecture-depth-table {
    width: 100%;
    overflow-x: auto;
}

.architecture-depth-table .report-table-row {
    grid-template-columns:
        minmax(300px, 3fr)
        minmax(120px, 1fr)
        minmax(150px, 1fr)
        minmax(150px, 1fr);
    min-width: 760px;
}

.architecture-depth-row[hidden] {
    display: none;
}

.architecture-depth-row > span {
    min-width: 0;
}

.architecture-depth-row > span:first-child {
    overflow: hidden;
    color: var(--color-text-muted);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.architecture-depth-row > span:nth-child(3),
.architecture-depth-row > span:nth-child(4) {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .architecture-depth-list-panel .report-filters-controls {
        --report-filter-columns: 1;
    }
}

/* Badges de profundidad de las URLs */

.architecture-depth-badge {
    min-width: 92px;
    min-height: 28px;
    padding: 6px 12px;
    border: 0;
}

.architecture-depth-badge.nivel-0 {
    color: #1d4ed8;
    background: #dbeafe;
}

.architecture-depth-badge.nivel-1 {
    color: #047857;
    background: #d1fae5;
}

.architecture-depth-badge.nivel-2 {
    color: #6d28d9;
    background: #ede9fe;
}

.architecture-depth-badge.nivel-3 {
    color: #b45309;
    background: #fef3c7;
}

.architecture-depth-badge.nivel-4 {
    color: #c2410c;
    background: #ffedd5;
}

.architecture-depth-badge.nivel-5 {
    color: #be185d;
    background: #fce7f3;
}

.architecture-depth-badge.no-determinada {
    color: var(--color-text-muted);
    background: var(--color-surface-soft);
}

/* Paginación de URLs por profundidad */

.architecture-depth-pagination {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 14px 0 2px;
    border-top: 1px solid var(--color-border);
}

.architecture-depth-pagination[hidden],
.architecture-depth-pagination button[hidden] {
    display: none;
}

.architecture-depth-progress {
    margin-right: auto;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
}

#investigacion-canonical-duplicacion + .executive-context {
    margin-top: 20px;
}

/* Arquitectura y enlazado — Listado de enlaces internos */

.architecture-links-panel {
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin-top: 20px;
}

.architecture-links-table {
    width: 100%;
    overflow-x: auto;
}

.architecture-links-row {
    grid-template-columns:
        minmax(220px, 2fr)
        minmax(220px, 2fr)
        minmax(100px, 0.8fr)
        minmax(70px, 0.6fr)
        minmax(145px, 1fr);
    min-width: 850px;
}

/* Ocultar las filas no visibles de la paginación. */
.architecture-links-row[hidden] {
    display: none;
}

/* Paginación del listado de enlaces internos. */

.architecture-links-pagination {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 14px 0 2px;
    border-top: 1px solid var(--color-border);
}

.architecture-links-progress {
    margin-right: auto;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
}

.architecture-links-show-more,
.architecture-links-show-less {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    cursor: pointer;
}

.architecture-links-show-more {
    color: var(--color-surface);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.architecture-links-show-less {
    color: var(--color-text-muted);
    background: var(--color-surface);
    border-color: var(--color-border);
}

.architecture-links-show-more:hover {
    opacity: 0.9;
}

.architecture-links-show-less:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.architecture-links-show-more[hidden],
.architecture-links-show-less[hidden] {
    display: none;
}

.architecture-links-row-head {
    border-top: 0;
}

.architecture-links-row > span {
    min-width: 0;
}

.architecture-links-url {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding-right: 18px;
}

.architecture-links-url-text {
    display: block;
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    color: var(--color-text-muted);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.architecture-links-external {
    display: inline-flex;
    flex: 0 0 14px;
    align-items: center;
    justify-content: center;
}

.architecture-links-external img {
    display: block;
    width: 14px;
    height: 14px;
}

.architecture-links-number {
    color: var(--color-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Jerarquía visual de las columnas del listado. */
.architecture-links-row:not(.architecture-links-row-head)
    > .architecture-links-url:nth-child(2)
    .architecture-links-url-text {
    font-weight: 400;
}

.architecture-links-row:not(.architecture-links-row-head)
    > .architecture-links-number:nth-child(3) {
    color: var(--color-primary);
}

.architecture-links-muted {
    color: var(--color-text-subtle);
}

.architecture-link-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

.architecture-link-status-dot {
    display: inline-block;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

/* =========================================================
   MÓDULO · CANONICAL Y DUPLICACIÓN: INVESTIGACIÓN
   ========================================================= */

#investigacion-canonical-duplicacion {
    display: block;
}

/* Pestañas */

.canonical-investigation-tabs {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin: 20px 0 4px;
    padding: 4px;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    background: var(--color-surface-soft);
}

.canonical-investigation-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--color-text-muted);
    background: transparent;
    font: inherit;
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition:
        color 0.15s ease,
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
   text-decoration: none;
}

.canonical-investigation-tab:hover {
    color: var(--color-text);
    background: var(--color-surface);
}

.canonical-investigation-tab.activo {
    color: var(--color-primary);
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.canonical-investigation-tab:focus-visible {
    outline: 2px solid rgba(59, 109, 246, 0.2);
    outline-offset: 2px;
}

.canonical-investigation-view {
    min-width: 0;
    padding-top: 2px;
}

.canonical-investigation-view[hidden] {
    display: none;
}

/* La tabla canonical tiene cuatro columnas, no cinco. */

#investigacion-relaciones-canonical .architecture-links-row {
    grid-template-columns:
        minmax(220px, 2fr)
        minmax(220px, 2fr)
        minmax(150px, 1fr)
        minmax(145px, 1fr);
    min-width: 760px;
}

/* Cobertura de la comparación textual */

.canonical-duplication-coverage {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 20px 0 12px;
}

.canonical-duplication-coverage > span {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-muted);
    background: var(--color-surface-soft);
    font-size: var(--font-size-small);
}

.canonical-duplication-coverage strong {
    color: var(--color-text);
    font-size: var(--font-size-body);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Grupos de coincidencia textual */

.canonical-duplication-groups {
    display: grid;
    gap: 10px;
}

.canonical-duplication-group {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}

.canonical-duplication-group[hidden] {
    display: none;
}

.canonical-duplication-group-header {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.canonical-duplication-group-header strong {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    font-weight: 600;
}

.canonical-duplication-group-type {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border: 1px solid rgba(59, 109, 246, 0.16);
    border-radius: 6px;
    color: var(--color-review);
    background: rgba(59, 109, 246, 0.06);
    font-size: var(--font-size-small);
    font-weight: 700;
}

.canonical-duplication-group-value {
    margin: 0 0 12px;
    color: var(--color-text);
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.canonical-duplication-group-urls {
    display: grid;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.canonical-duplication-group-urls .architecture-links-url {
    padding-right: 0;
}

/* Responsive */

@media (max-width: 900px) {
    .canonical-duplication-coverage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .canonical-investigation-tabs {
        align-items: stretch;
    }

    .canonical-investigation-tab {
        flex: 1 1 100%;
    }

    .canonical-duplication-coverage {
        grid-template-columns: 1fr;
    }

    .canonical-duplication-group-header {
        align-items: flex-start;
    }
}

/* Arquitectura y enlazado: profundidad */

.architecture-depth-chart {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
    min-height: 220px;
    padding-top: 35px;
}

.architecture-depth-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.architecture-depth-value {
    position: absolute;
    right: 0;
    bottom: calc(var(--depth-height) + 10px);
    left: 0;
    margin: 0;
    color: var(--color-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.architecture-depth-track {
    position: relative;
    display: flex;
    align-items: end;
    width: 100%;
    height: 150px;
    border-bottom: 1px solid var(--color-border);
}

.architecture-depth-bar {
    display: block;
    width: 100%;
    height: var(--depth-height);
    min-height: 0;
    border-radius: 4px 4px 0 0;
    background: var(--color-review);
}

.architecture-depth-label {
    margin-top: 10px;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    text-align: center;
    white-space: nowrap;
}

.architecture-depth-link {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

@media (max-width: 600px) {
    .architecture-depth-chart {
        gap: 7px;
    }

    .architecture-depth-label {
        font-size: 11px;
    }
}

.crawl-status-explanation {
    margin: 22px 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    line-height: 1.55;
}

/* Señales de indexación */


.indexation-signals-panel {
    margin-top: 20px;
}

/* =========================================================
   MÓDULO · COMPONENTE COMPARTIDO: TARJETAS DE SEÑALES
   Indexación · Sitemap · Arquitectura
   ========================================================= */

.report-signals-grid,
.indexation-signals-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.report-signal-card,
.indexation-signal-card {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.report-signal-icon,
.indexation-signal-icon {
    display: block;
    width: 30px;
    height: 30px;
}

.report-signal-content,
.indexation-signal-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}

.report-signal-title,
.indexation-signal-title {
    overflow: hidden;
    color: var(--color-heading);
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-signal-state,
.indexation-signal-state {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tarjetas seleccionables */

.report-signal-card--selectable,
.indexation-signal-card--selectable {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.report-signal-card--selectable:hover,
.indexation-signal-card--selectable:hover {
    border-color: var(--color-primary);
}

.report-signal-card--selectable.activo,
.indexation-signal-card--selectable.activo {
    border-color: var(--color-border);
    background: #f8fafc;
    box-shadow: inset 3px 0 0 var(--color-review);
}

.report-signal-card--selectable:focus-visible,
.indexation-signal-card--selectable:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Indicador de apertura */

.report-signal-chevron,
.indexation-signal-chevron {
    margin-left: 4px;
    color: var(--color-text-subtle);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    text-align: right;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        color 0.15s ease;
}

.report-signal-card--selectable.activo .report-signal-chevron,
.report-signal-card--selectable.activo .indexation-signal-chevron,
.indexation-signal-card--selectable.activo .report-signal-chevron,
.indexation-signal-card--selectable.activo .indexation-signal-chevron {
    transform: rotate(90deg);
}

/* =========================================================
   COMPONENTE COMPARTIDO: PANEL DE DETALLE
   ========================================================= */

.report-signal-detail-panel,
.indexation-signal-detail-panel {
    margin-top: 16px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
    animation: indexation-details-enter 0.25s ease both;
    box-shadow: inset 3px 0 0 var(--color-review);
}

.report-signal-detail-panel[hidden],
.indexation-signal-detail-panel[hidden] {
    display: none;
}

.report-signal-detail-panel .priorities-detail-header,
.indexation-signal-detail-panel .priorities-detail-header {
    position: relative;
    padding-right: 40px;
}

/* Botón de cierre */

.report-signal-detail-close,
.indexation-signal-detail-close {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 24px;
    cursor: pointer;
}

.report-signal-detail-close:hover,
.indexation-signal-detail-close:hover {
    border: 0;
    background: transparent;
    color: var(--color-heading);
}

.report-signal-detail-close:focus-visible,
.indexation-signal-detail-close:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* Contenido del panel */

.report-signal-detail-content,
.indexation-signal-detail-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.report-signal-detail,
.indexation-signal-detail {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.report-signal-detail-label,
.indexation-signal-detail-label {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.report-signal-detail-link,
.indexation-signal-detail-link {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 4px;
}

/* Separación del enlace en el detalle de señales Schema.org */

#structured-data-signal-detail
.report-signal-detail-link {
    margin-top: 24px;
}

/* Accesos directos desde los detalles de las señales */

.report-signal-detail-link[hidden] {
    display: none;
}

.report-signal-detail-link .executive-attention-link {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 5px;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--color-action);
    font: inherit;
    font-size: var(--font-size-small);
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.report-signal-detail-link .executive-attention-link:hover {
    color: var(--color-action);
    text-decoration: underline;
}

.report-signal-detail-link .executive-attention-link:focus-visible {
    outline: 2px solid var(--color-action);
    outline-offset: 3px;
}

.report-signal-detail-link[hidden] {
    display: none;
}

.report-signal-detail-value,
.indexation-signal-detail-value {
    overflow-wrap: anywhere;
    color: var(--color-heading);
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: 1.5;
}

/* Animación de apertura */

@keyframes indexation-details-enter {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   RESPONSIVE Y ACCESIBILIDAD
   ========================================================= */

@media (max-width: 600px) {
    .report-signal-detail-content,
    .indexation-signal-detail-content {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .report-signal-card--selectable,
    .indexation-signal-card--selectable,
    .report-signal-chevron,
    .indexation-signal-chevron {
        transition: none;
    }

    .report-signal-detail-panel,
    .indexation-signal-detail-panel {
        animation: none;
    }
}

/* Responsive */

@media (max-width: 1000px) {
    .crawl-indexability-overview {
        grid-template-columns: 1fr;
    }

    .report-signals-grid,
    .indexation-signals-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .crawl-status-legend {
        grid-template-columns: 1fr;
    }

    .report-signals-grid,
    .indexation-signals-grid {
        grid-template-columns: 1fr;
    }

    .report-signal-title,
    .indexation-signal-title,
    .report-signal-state,
    .indexation-signal-state {
        white-space: normal;
    }
}

/* =========================================================
   CANONICAL Y DUPLICACIÓN
   ========================================================= */

/* Duplicación textual observada */

.canonical-duplication-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.canonical-duplication-item {
    display: grid;
    grid-template-columns: 42px 12px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.canonical-duplication-icon {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.canonical-duplication-status-success {
    background: var(--color-success);
}

.canonical-duplication-status-review {
    background: var(--color-warning);
}

.canonical-duplication-status-unchecked {
    background: var(--color-text-subtle);
}

.canonical-duplication-content {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.canonical-duplication-content strong {
    color: var(--color-heading);
    font-size: var(--font-size-body);
    font-weight: 700;
}

.canonical-duplication-content span {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.canonical-duplication-values {
    display: grid;
    gap: 3px;
    min-width: 72px;
    text-align: right;
}

.canonical-duplication-values strong {
    color: var(--color-heading);
    font-size: var(--font-size-body);
    font-weight: 700;
}

.canonical-duplication-values span {
    color: var(--color-text-muted);
    font-size: 0.78rem;
}


/* Estados de las declaraciones canonical */

.canonical-status-autorreferenciada {
    background: var(--color-success);
}

.canonical-status-otra-url {
    background: var(--color-review);
}

.canonical-status-sin-canonical {
    background: var(--color-neutral);
}

.canonical-status-no-univoca {
    background: var(--color-warning);
}

.canonical-status-no-comprobada {
    background: #94a3b8;
}


/* Responsive */

@media (max-width: 600px) {
    .canonical-duplication-item {
        grid-template-columns: 36px 12px minmax(0, 1fr);
    }

    .canonical-duplication-icon {
        width: 28px;
        height: 28px;
    }

    .canonical-duplication-values {
        grid-column: 3;
        text-align: left;
    }

    .canonical-duplication-content span {
        white-space: normal;
    }
}

/* =========================================================
   SEO ON-PAGE
   ========================================================= */

/* Metadatos */

.on-page-metadata-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    min-width: 0;
}

.on-page-metadata-block {
    min-width: 0;
}

.on-page-metadata-block h3 {
    margin: 0 0 14px;
    color: var(--color-heading);
    font-size: var(--font-size-body);
    font-weight: 700;
}

/* Estructura de encabezados */

.on-page-overview-grid .canonical-duplication-content strong {
    white-space: nowrap;
}

/* Estados On-Page */

.on-page-status-utilizable {
    background: var(--color-success);
}

.on-page-status-no-utilizable {
    background: var(--color-danger);
}

.on-page-status-no-utilizable-meta {
    background: var(--color-warning);
}

.on-page-status-multiple {
    background: var(--color-warning);
}

.on-page-status-no-comprobado {
    background: var(--color-text-subtle);
}

.on-page-status-longitud-extrema {
    background: var(--color-review);
}

/* Longitudes extremas */

.on-page-extreme-length {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
}

.on-page-extreme-length strong {
    color: var(--color-heading);
    font-weight: 700;
}

/* Responsive */

@media (max-width: 700px) {
    .on-page-metadata-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
   DATOS ESTRUCTURADOS — TIPOS DE ENTIDADES
   ========================================================= */

.structured-data-types-list {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.structured-data-type-item {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.structured-data-type-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.structured-data-type-name {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--color-heading);
    font-size: var(--font-size-body);
    font-weight: 600;
}

.structured-data-type-count {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    font-weight: 600;
    white-space: nowrap;
}

.structured-data-type-bar {
    width: 100%;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-border);
}

.structured-data-type-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-review);
}


/* =========================================================
   11. FOOTER
   ========================================================= */

/* Versión actual de FONSI SEO Audit. */
.footer-app {
    margin: 3rem 0 1.5rem;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    text-align: center;
}


/* =========================================================
   12. PANTALLA DE INICIO DE SESIÓN
   ========================================================= */

.login-page {
    min-height: 100vh;
    background:
        radial-gradient(
            ellipse at 78% 18%,
            var(--color-review-soft) 0%,
            transparent 65%
        ),
        linear-gradient(
            115deg,
            var(--color-surface) 0%,
            var(--color-review-soft) 65%,
            var(--color-neutral) 100%
        );
}

.login-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    min-height: 100vh;
}

/* Columna izquierda */
.login-presentation {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    padding: 34px clamp(28px, 4.2vw, 70px) 24px;
    background: transparent;
}

.login-presentation::before,
.login-presentation::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

/* Gran círculo blanco del fondo */

.login-presentation::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -32%;
    left: -48%;
    width: 135%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgb(255 255 255 / 72%);
    box-shadow: 0 0 0 45px rgb(255 255 255 / 12%);
    pointer-events: none;
}

/* Círculo decorativo inferior */

.login-presentation::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -10%;
    bottom: -30%;
    width: 52%;
    aspect-ratio: 1;
    border: 38px solid rgb(255 255 255 / 24%);
    border-radius: 50%;
    pointer-events: none;
}

/* La identidad visual existente se conserva sin redefinir el logo. */
.login-brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    text-decoration: none;
}

.login-presentation-content {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: auto 0;
    padding: 36px 0 28px;
}

.login-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
}

.login-presentation h1 {
    max-width: 620px;
    margin: 0 0 18px;
    color: var(--color-heading);
    font-size: clamp(34px, 3.3vw, 52px);
    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -.045em;
}

.login-description {
    max-width: 520px;
    margin: 0 0 28px;
    color: var(--color-text);
    font-size: var(--font-size-body);
    line-height: 1.7;
}

/* Beneficios */
.login-benefits {
    display: grid;
    gap: 17px;
    margin-bottom: 26px;
}

.login-benefit {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.login-benefit-icon {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 11px;
}

.login-benefit-icon img {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.login-benefit-icon--blue { background: var(--color-review-soft); }
.login-benefit-icon--green { background: var(--color-success-soft); }
.login-benefit-icon--orange { background: var(--color-warning-soft); }
.login-benefit-icon--purple { background: var(--color-noindex-soft); }

.login-benefit > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.login-benefit strong {
    color: var(--color-heading);
    font-size: var(--font-size-body);
    font-weight: 700;
    line-height: 1.35;
}

.login-benefit > div > span {
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    line-height: 1.5;
}

/* Vista previa provisional: se sustituirá por una captura del producto. */
.login-preview {
    position: relative;
    width: min(100%, 560px);
    height: 205px;
    flex-shrink: 0;
    margin: 24px 0 0 10px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-surface);
    box-shadow: 0 24px 55px rgb(37 52 74 / 12%);
    transform: rotate(-4deg);
    transform-origin: top left;
}

.login-preview-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
}

.login-preview-header,
.login-preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.login-preview-header {
    color: var(--color-heading);
    font-size: 13px;
    font-weight: 700;
}

.login-preview-status {
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 500;
}

.login-preview-footer {
    margin-top: 28px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 10px;
}

.login-presentation-footer {
    position: relative;
    margin: 18px 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
}

/* Columna derecha */
.login-access {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 40px clamp(24px, 3.5vw, 60px) 24px;
    background: transparent;
}

.login-card {
    width: 100%;
    max-width: 470px;
    margin: auto 0;
    padding: 42px 40px 36px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-surface);
    box-shadow: 0 18px 55px rgb(37 52 74 / 8%);
}

.login-card-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 34px;
}

.login-card h2 {
    margin: 0 0 10px;
    color: var(--color-heading);
    font-size: 29px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.login-card-description {
    margin: 0 0 30px;
    color: var(--color-text);
    font-size: var(--font-size-body);
    line-height: 1.65;
}

/* Formulario */
.login-form {
    display: flex;
    flex-direction: column;
}

.login-form label {
    margin: 0 0 9px;
    color: var(--color-heading);
    font-size: var(--font-size-body);
    font-weight: 700;
}

.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 22px;
}

.login-input-icon {
    position: absolute;
    z-index: 1;
    left: 15px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.login-input-icon img,
.login-password-toggle img {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.login-form .login-input-wrap input {
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 0 48px 0 46px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    outline: none;
    background: var(--color-surface);
    color: var(--color-heading);
    font: inherit;
    font-size: var(--font-size-body);
    transition: border-color .2s, box-shadow .2s;
}

.login-form .login-input-wrap input::placeholder {
    color: var(--color-text-subtle);
}

.login-form .login-input-wrap input:focus {
    border-color: var(--color-action);
    box-shadow: 0 0 0 4px rgb(59 109 246 / 10%);
}

.login-password-toggle {
    position: absolute;
    right: 10px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
}

.login-password-toggle:hover { background: var(--color-review-soft); }
.login-password-toggle:focus-visible {
    outline: 2px solid var(--color-action);
    outline-offset: 2px;
}

.login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    margin-top: 5px;
    padding: 13px 20px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(100deg, var(--color-action), var(--color-accent));
    color: var(--color-surface);
    font: inherit;
    font-size: var(--font-size-body);
    font-weight: 700;
    cursor: pointer;
    transition: filter .2s, transform .2s;
}

.login-submit img {
    display: block;
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.login-submit:hover { filter: brightness(.96); transform: translateY(-1px); }
.login-submit:focus-visible { outline: 3px solid var(--color-review); outline-offset: 3px; }

.login-divider {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 26px 0;
    color: var(--color-text-subtle);
    font-size: 12px;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.login-secure {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-review-soft);
    text-align: left;
}

.login-secure-icon {
    display: block;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
}

.login-secure-icon img {
    display: block;
    width: 22px;
    height: 22px;
}

.login-secure-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.login-secure-content strong {
    color: var(--color-heading);
    font-size: var(--font-size-body);
}

.login-secure-content span {
    color: var(--color-text);
    font-size: var(--font-size-body);
    line-height: 1.6;
}

.login-error {
    margin-bottom: 22px;
    padding: 13px 16px;
    border: 1px solid var(--color-danger);
    border-radius: 10px;
    background: var(--color-danger-soft);
    color: var(--color-danger-dark);
    font-size: 13px;
}

.login-access-footer {
    margin: 20px 0 0;
    color: var(--color-text-subtle);
    font-size: var(--font-size-body);
    text-align: center;
}

/* Pantallas intermedias */
@media (max-width: 1100px) {
    .login-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .login-presentation { padding-right: 30px; padding-left: 30px; }
    .login-presentation h1 { font-size: clamp(32px, 3.5vw, 42px); }
    .login-access { padding-right: 24px; padding-left: 24px; }
    .login-card { padding: 34px 28px; }
}

/* Tablet y pantallas intermedias */
@media (max-width: 1024px) {
    .login-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .login-presentation {
        padding: 32px clamp(24px, 5vw, 48px);
    }

    .login-presentation-content {
        padding: 32px 0 0;
    }

    .login-presentation h1 {
        font-size: clamp(32px, 4.5vw, 44px);
    }

    .login-preview,
    .login-presentation-footer {
        display: none;
    }

    .login-access {
        padding: 24px 24px 40px;
    }

    .login-card {
        width: 100%;
        max-width: 470px;
        margin-inline: auto;
        padding: 34px 28px;
    }
}

/* Móvil */
@media (max-width: 760px) {
    .login-presentation {
        padding: 28px 24px 20px;
    }

    .login-presentation-content {
        padding: 28px 0 0;
    }

    .login-presentation h1 {
        font-size: clamp(30px, 7vw, 40px);
    }

    .login-description {
        font-size: var(--font-size-body);
    }

    .login-benefits {
        margin-bottom: 0;
    }

    .login-access {
        padding: 24px 18px 32px;
    }

    .login-card {
        padding: 32px 24px;
    }
}

@media (max-width: 390px) {
    .login-presentation, .login-access { padding-right: 16px; padding-left: 16px; }
    .login-card { padding: 28px 18px; }
    .login-card h2 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .login-form .login-input-wrap input, .login-submit { transition: none; }
    .login-submit:hover { transform: none; }
}

/* ---------------------------------------------------------
   Estado del rastreo
   --------------------------------------------------------- */

#estado-rastreo .executive-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 26px;
}

#estado-rastreo .executive-panel {
    min-height: 0;
}

@media (max-width: 900px) {
    #estado-rastreo .executive-summary-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   MI CUENTA
   ========================================================= */

/* 1. Cabecera y resumen de la cuenta
   --------------------------------------------------------- */

.cuenta-cabecera {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(0, 780px);
    align-items: center;
    gap: 24px;
    margin-bottom: 20px;
}

.cuenta-cabecera .executive-summary-heading {
    min-width: 0;
    max-width: 460px;
}

.cuenta-cabecera .executive-summary-heading h1 {
    margin-bottom: 6px;
}

.cuenta-cabecera-datos {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    gap: 12px;
}

.cuenta-cabecera-dato {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 76px;
    padding: 14px 18px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}

.cuenta-cabecera-dato:first-child {
    border-color: rgba(85, 191, 136, 0.3);
    background: rgba(85, 191, 136, 0.08);
}

.cuenta-cabecera-dato span {
    font-size: var(--font-size-small);
    font-weight: 700;
}

.cuenta-cabecera-dato strong {
    color: var(--color-heading);
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Tarjetas de acceso y rol */

.cuenta-cabecera-datos {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    flex: 0 1 560px;
    gap: 12px;
}

.cuenta-cabecera-dato {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-width: 0;
    min-height: 76px;
    box-sizing: border-box;
    padding: 12px 14px;
}

.cuenta-cabecera-plan {
    border-color: rgba(85, 191, 136, 0.25);
    background: #effaf5;
}

.cuenta-cabecera-rol {
    border-color: #dfe7f2;
    background: #f4f7fc;
}

.cuenta-cabecera-icono {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #d9f7e8;
}

.cuenta-cabecera-rol .cuenta-cabecera-icono {
    background: #e5edf9;
}

.cuenta-cabecera-icono img {
    display: block;
    width: 28px;
    height: 28px;
}

.cuenta-cabecera-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}

.cuenta-cabecera-info > span {
    color: #64748b;
    font-size: var(--font-size-body);
    font-weight: 600;
}

.cuenta-cabecera-info > strong {
    color: #25344a;
    font-size: var(--font-size-body);
    font-weight: 700;
    line-height: 1.3;
}

.cuenta-cabecera-info > small {
    color: #71829a;
    font-size: var(--font-size-body);
    line-height: 1.4;
}

.cuenta-cabecera-badge {
    align-self: center;
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 6px;
    background: #d9f7e8;
    color: #168451;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 1250px) {
    .cuenta-cabecera-datos {
        flex: 1 1 100%;
    }
}

@media (max-width: 600px) {
    .cuenta-cabecera-datos {
        grid-template-columns: 1fr;
    }
}


/* 2. Distribución de tarjetas
   --------------------------------------------------------- */

.cuenta-paneles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 14px;
    margin-bottom: 28px;
}

.cuenta-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 350px;
    padding: 18px;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: 0 2px 12px rgba(37, 52, 74, 0.025);
}


/* 3. Encabezados y textos
   --------------------------------------------------------- */

.cuenta-panel .executive-panel-header {
    margin-bottom: 16px;
}

.cuenta-panel .executive-panel-header h2 {
    margin: 4px 0 0;
    color: var(--color-heading);
    font-size: var(--font-size-h2);
    font-weight: 700;
    line-height: 1.35;
}

.cuenta-panel-descripcion {
    margin: 0 0 14px;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    line-height: 1.55;
}

.cuenta-funcion-pendiente {
    margin-top: auto;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-soft);
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.5;
}


/* 4. Formularios y campos
   --------------------------------------------------------- */

.cuenta-formulario {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.cuenta-campo,
.cuenta-formulario .cuenta-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin-bottom: 14px;
}

.cuenta-campo label {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: 1.4;
}

.cuenta-campo span {
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 500;
}

.cuenta-campo strong {
    color: var(--color-heading);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.cuenta-campo input,
.cuenta-campo select {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    box-sizing: border-box;
    padding: 8px 11px;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    background: var(--color-surface);
    color: var(--color-heading);
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    transition: border-color 0.15s ease,
                box-shadow 0.15s ease;
}

.cuenta-campo input:focus,
.cuenta-campo select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.cuenta-campo input[readonly] {
    background: var(--color-surface-soft);
}


/* 5. Botones
   --------------------------------------------------------- */

.cuenta-boton-guardar {
    align-self: flex-start;
    margin-top: auto;
    min-height: 36px;
    padding: 9px 15px;
    border: 1px solid #2563eb;
    border-radius: 7px;
    background: #2563eb;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background 0.15s ease,
                border-color 0.15s ease;
}

.cuenta-boton-guardar:hover:not(:disabled) {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.cuenta-boton-guardar:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
}

.cuenta-boton-guardar:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* 6. Mostrar y ocultar contraseñas
   --------------------------------------------------------- */

.cuenta-password-control {
    position: relative;
    width: 100%;
}

.cuenta-password-control input {
    width: 100%;
    padding-right: 48px;
}

.cuenta-password-toggle {
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

.cuenta-password-toggle img {
    display: block;
    width: 18px;
    height: 18px;
}

.cuenta-password-toggle:hover {
    background: rgba(148, 163, 184, 0.12);
}

.cuenta-password-toggle:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}


/* 7. Mensajes y estados
   --------------------------------------------------------- */

.cuenta-mensaje-exito,
.cuenta-mensaje-error {
    margin: 0 0 14px;
    padding: 11px 13px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
}

.cuenta-mensaje-exito {
    color: #17603b;
    background: rgba(85, 191, 136, 0.12);
    border: 1px solid rgba(85, 191, 136, 0.35);
}

.cuenta-mensaje-error {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
}


/* Simulación de planes en Mi cuenta
   --------------------------------------------------------- */

.cuenta-contenido #simulacion-campos-informativos input[readonly] {
    background: var(--color-surface);
}

.cuenta-contenido .app-header-actions.simulacion-acciones {
    flex-wrap: wrap;
    align-self: stretch;
    gap: 16px;
    width: 100%;
    margin-bottom: 20px;
}

.cuenta-contenido .simulacion-acciones > .cuenta-formulario {
    flex: 0 1 auto;
    max-width: 100%;
}

.cuenta-contenido .simulacion-acciones button {
    white-space: nowrap;
    max-width: 100%;
}

.cuenta-contenido .simulacion-cuotas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}

.cuenta-contenido .simulacion-cuota {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.cuenta-contenido .simulacion-cuota dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    font-weight: 500;
    line-height: 1.4;
}

.cuenta-contenido .simulacion-cuota dd {
    margin: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    .cuenta-contenido .simulacion-cuotas {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* 8. Diseño responsive
   --------------------------------------------------------- */

@media (max-width: 1200px) {
    .cuenta-cabecera {
        grid-template-columns: 1fr;
    }

    .cuenta-cabecera .executive-summary-heading {
        max-width: none;
    }
}

@media (max-width: 1100px) {
    .cuenta-paneles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 768px) {
    .cuenta-cabecera {
        align-items: stretch;
        gap: 16px;
    }

    .cuenta-cabecera-datos {
        flex: 1 1 100%;
    }
}

@media (max-width: 700px) {
    .cuenta-paneles {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .cuenta-panel {
        min-height: 0;
    }

}

@media (max-width: 600px) {
    .cuenta-cabecera-datos {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .cuenta-cabecera-datos {
        grid-template-columns: 1fr;
    }
}