/* Tab de cobertura de atributos de Cadenas (ver .claude/rules/CSS_DARK_MODE_ORGANIZATION.md). */

/* ── Toolbar ── */

.epricing-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;

    .epricing-toolbar-group {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .epricing-toolbar-label {
        font-size: 0.75rem;
        color: var(--color-base-500);
    }
}

.epricing-segmented {
    --seg-border: var(--color-base-200);
    --seg-fg: var(--color-base-600);
    --seg-hover: var(--color-base-50);

    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--seg-border);
    border-radius: 0.5rem;

    a {
        padding: 0.25rem 0.75rem;
        font-size: 0.8125rem;
        color: var(--seg-fg);

        &:hover {
            background-color: var(--seg-hover);
        }

        &.is-active {
            background-color: var(--color-primary-600);
            color: white;
        }
    }

    a + a {
        border-left: 1px solid var(--seg-border);
    }
}

/* ── Tabla de cobertura ── */

.epricing-coverage {
    --edge: var(--color-base-200);
    --sticky-bg: white;
    --hover-edge: var(--color-base-400);

    /* Cada estado solo define sus colores; la regla que los aplica es una sola. */
    /* Naranja y amarillo fijos: Unfold solo expone las variables de color que usa. */
    td.epricing-cell-both {
        --cell-bg: var(--color-green-100);
        --cell-fg: var(--color-green-800);
    }

    td.epricing-cell-dropped {
        --cell-bg: #ffedd5;
        --cell-fg: #9a3412;
    }

    td.epricing-cell-added {
        --cell-bg: #fef9c3;
        --cell-fg: #854d0e;
    }

    td.epricing-cell-none,
    td.epricing-cell-unknown {
        --cell-bg: var(--color-base-100);
        --cell-fg: var(--color-base-500);
    }

    tbody td[class*='epricing-cell-'] {
        padding: 0;
        text-align: center;
        background-color: var(--cell-bg);
        color: var(--cell-fg);
    }

    /* Hover tipo Gmail: borde y sombra en el bloque interno, porque box-shadow en un td con border-collapse es poco fiable; relative para que la sombra no quede bajo las vecinas. */
    tbody td[class*='epricing-cell-']:not(.epricing-cell-empty):hover .epricing-cell-hit {
        position: relative;
        box-shadow: 0 0 0 1px var(--hover-edge), 0 2px 8px rgb(0 0 0 / 0.2);
    }

    /* Columnas de atributos con ancho mínimo: los extras ensanchan la tabla y hacen scroll. */
    th:nth-child(n + 3),
    td:nth-child(n + 3) {
        min-width: 6rem;
    }

    /* La cadena queda fija al hacer scroll horizontal; el fondo opaco tapa lo que pasa por debajo. */
    th:first-child,
    td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        box-shadow: 1px 0 0 var(--edge);
    }

    th:first-child {
        z-index: 2;
    }

    /* En la vista Esperada las celdas son solo íconos centrados: el encabezado va igual. */
    &.is-expected th:nth-child(n + 3) {
        text-align: center;
    }

    tbody td:first-child {
        background-color: var(--sticky-bg);
    }

    /* Cadena sin información de PIA en la vista Esperada: fila atenuada salvo el nombre. */
    .epricing-row-disabled td:not(:first-child) {
        opacity: 0.5;
    }
}

/* El relleno vive aquí para que el tooltip y el cursor cubran la celda entera. */
.epricing-cell-hit {
    display: block;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}

.epricing-chain-note {
    display: block;
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--color-base-400);
}

/* ── Modo oscuro: solo redefine variables y lo que no se resuelve con ellas ── */

html.dark {
    .epricing-toolbar-label {
        color: var(--color-base-400);
    }

    .epricing-segmented {
        --seg-border: var(--color-base-700);
        --seg-fg: var(--color-base-300);
        --seg-hover: var(--color-base-800);
    }

    .epricing-coverage {
        --edge: var(--color-base-700);
        --sticky-bg: var(--color-base-900);
        --hover-edge: var(--color-base-300);

        td.epricing-cell-both {
            --cell-bg: color-mix(in srgb, var(--color-green-500) 25%, transparent);
            --cell-fg: var(--color-green-300);
        }

        td.epricing-cell-dropped {
            --cell-bg: color-mix(in srgb, #f97316 25%, transparent);
            --cell-fg: #fdba74;
        }

        td.epricing-cell-added {
            --cell-bg: color-mix(in srgb, #eab308 25%, transparent);
            --cell-fg: #fde047;
        }

        td.epricing-cell-none,
        td.epricing-cell-unknown {
            --cell-bg: color-mix(in srgb, var(--color-base-500) 20%, transparent);
            --cell-fg: var(--color-base-400);
        }
    }
}