/* ============================================================
   PANEL DE ANALITICAS + SECCION ANCHA DE VENTAJAS

   Este bloque solo existia en el comparador de placas base. Se
   extrae aqui para que los seis lo compartan, en vez de duplicarlo
   dentro de cada comparacion_visual.css.

   Contiene:
     - los 4 KPIs (ganador, categorias ganadas, mayor ventaja y
       categoria mas renida)
     - el ranking global con barras
     - la seccion ancha de ventajas y desventajas, que pasa a ir
       debajo del grafico en lugar de en la columna derecha

   Se carga DESPUES de comparacion_visual.css.
   ============================================================ */

/* ============================================================
   PANEL DE ANALÍTICAS (KPIs + ranking) — columna derecha
   ============================================================ */
.analytics-panel {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* --- KPIs en rejilla 2x2 --- */
.apk-kpis {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
}

.apk-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.85rem 0.9rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.apk-kpi:hover {
    border-color: rgba(255, 107, 53, 0.35);
    transform: translateY(-2px);
}

.apk-kpi-win {
    background: linear-gradient(150deg, rgba(255, 107, 53, 0.1), rgba(255, 255, 255, 0.02) 60%);
    border-color: rgba(255, 107, 53, 0.22);
}

.apk-kpi-ico {
    font-size: 0.95rem;
    color: var(--primary-color);
    margin-bottom: 0.2rem;
}

.apk-kpi-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
    opacity: 0.8;
}

.apk-kpi-value {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.05;
    color: var(--text-primary);
    font-family: 'Courier New', monospace;
}

.apk-kpi-value-txt {
    font-size: 0.98rem;
    font-family: inherit;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.apk-kpi-value-sm {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
    opacity: 0.7;
}

.apk-kpi-sub {
    font-size: 0.68rem;
    color: var(--text-secondary);
    opacity: 0.65;
    font-family: 'Courier New', monospace;
}

/* --- Barras de ranking global --- */
.apk-ranking {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 1rem 1.1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
}

.apk-ranking-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
    opacity: 0.85;
}

.apk-ranking-head i {
    color: var(--primary-color);
}

.apk-bar-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.apk-bar-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.apk-bar-rank {
    font-size: 0.78rem;
    font-weight: 800;
    font-family: 'Courier New', monospace;
    flex-shrink: 0;
}

.apk-bar-name {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.apk-bar-top .apk-bar-name {
    font-weight: 800;
}

.apk-bar-val {
    flex-shrink: 0;
    font-size: 0.84rem;
    font-weight: 800;
    font-family: 'Courier New', monospace;
    color: var(--text-primary);
}

.apk-bar-track {
    position: relative;
    height: 7px;
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    overflow: hidden;
}

.apk-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 6px;
    width: 0;
    animation: apkBarGrow 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s both;
}

.light-theme .apk-kpi,
.light-theme .apk-ranking {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

.light-theme .apk-bar-track {
    background: rgba(0, 0, 0, 0.07);
}

/* ============================================================
   VENTAJAS Y DESVENTAJAS — sección a todo el ancho, centrada
   ============================================================ */
.adv-section {
    max-width: 1180px;
    margin: 1.5rem auto 0;
    padding: 1.8rem;
    background: #1e1e1e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: visFadeIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s both;
}

.light-theme .adv-section {
    background: #f0f0f0;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.07);
}

.adv-section-title {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
    justify-content: center;
}

.adv-section-title i {
    color: var(--primary-color);
    font-size: 1.05rem;
}

.light-theme .adv-section-title {
    color: #1a1a1a;
}

.adv-section .adv-description {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 1.6rem;
    opacity: 0.75;
}

/* El árbol pasa a rejilla de tarjetas (una por placa) que llena el ancho */
.adv-section .tree-root {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1rem;
    max-width: 1120px;
    margin: 0 auto;
    align-items: start;
}

.adv-section .tree-root-label {
    grid-column: 1 / -1;
    justify-content: center;
    margin-bottom: 0;
}

/* Sin iconos de carpeta */
.adv-section .tree-folder-icon,
.adv-section .tree-folder-open-icon {
    display: none !important;
}

/* Conectores fuera (no encajan en el layout de tarjetas) */
.adv-section .tree-branch > .tree-connector,
.adv-section .tree-leaf > .tree-connector {
    display: none !important;
}

/* Cada placa = tarjeta */
.adv-section .tree-branch {
    display: block;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.25s ease;
}

.adv-section .tree-branch.open {
    border-color: rgba(255, 107, 53, 0.28);
}

.adv-section .tree-branch > .tree-node {
    width: 100%;
    min-width: 0;
}

/* Cabecera de la tarjeta con disclosure de triángulo */
.adv-section .tree-folder {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0.8rem 0.95rem;
    gap: 0.6rem;
}

.adv-section .tree-folder::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent var(--primary-color);
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.adv-section .tree-branch.open .tree-folder::before {
    transform: rotate(90deg);
}

.adv-section .tree-branch.open > .tree-node > .tree-folder {
    background: rgba(255, 107, 53, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.adv-section .tree-folder:hover {
    background: rgba(255, 107, 53, 0.05);
}

/* Contenido de la tarjeta */
.adv-section .tree-children {
    padding: 0;
}

.adv-section .tree-branch.open > .tree-node > .tree-children {
    padding: 0.35rem 0.7rem 0.6rem;
}

.adv-section .tree-leaf {
    display: block;
}

.adv-section .tree-file {
    padding: 0.35rem 0.3rem;
}

.adv-section .tree-section-header {
    padding: 0.45rem 0.3rem 0.25rem;
}

.light-theme .adv-section .tree-branch {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

.light-theme .adv-section .tree-branch.open > .tree-node > .tree-folder {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

@media (max-width: 520px) {
    .chart-switcher {
        flex-direction: column;
        align-items: stretch;
        width: auto;
    }

    .chart-btn {
        justify-content: center;
    }

    .visual-comparison {
        padding: 0 0.5rem;
    }

    .visual-comparison .results-title {
        font-size: 1.2rem;
    }

    .comparison-left .chart-viewport {
        height: 300px;
    }

    .adv-section {
        padding: 1.2rem 1rem;
    }

    .apk-kpi-value {
        font-size: 1.25rem;
    }
}