/* Cobertura esperada: color por celda (ver .claude/rules/CSS_DARK_MODE_ORGANIZATION.md). */

/* Naranja y amarillo fijos: Unfold solo expone las variables de color que usa. */
.epricing-table tbody td.epricing-cell-both {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
}

.epricing-table tbody td.epricing-cell-dropped {
    background-color: #ffedd5;
    color: #9a3412;
}

.epricing-table tbody td.epricing-cell-added {
    background-color: #fef9c3;
    color: #854d0e;
}

.epricing-table tbody td.epricing-cell-none,
.epricing-table tbody td.epricing-cell-unknown {
    background-color: var(--color-base-100);
    color: var(--color-base-500);
}

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

.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 {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--color-base-200);
    border-radius: 0.5rem;
}

.epricing-segmented a {
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-base-600);
}

.epricing-segmented a + a {
    border-left: 1px solid var(--color-base-200);
}

.epricing-segmented a:hover {
    background-color: var(--color-base-50);
}

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

.epricing-table tbody td.epricing-cell-both,
.epricing-table tbody td.epricing-cell-dropped,
.epricing-table tbody td.epricing-cell-added,
.epricing-table tbody td.epricing-cell-none,
.epricing-table tbody td.epricing-cell-unknown {
    padding: 0;
    text-align: center;
}

/* El relleno de la celda 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;
}

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

    .epricing-segmented,
    .epricing-segmented a + a {
        border-color: var(--color-base-700);
    }

    .epricing-segmented a {
        color: var(--color-base-300);
    }

    .epricing-segmented a:hover {
        background-color: var(--color-base-800);
    }

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

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

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

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

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