/*
    Comparación de planes (Home/Plans). La página usa _LoginLayout, así que se ve con y sin sesión.
    Usa tokens --ds-*. Esta rama todavía no tiene el Design System iERP en DesignSystemBase.css/DarkMode.css,
    así que se definen aquí, solo para esta pantalla, con los mismos valores que tienen en master.
*/

.adm-plans {
    --ds-ink: var(--neutral-800);
    --ds-ink-muted: var(--neutral-600);
    --ds-surface: var(--neutral-100);
    --ds-divider: var(--neutral-300);
    --ds-table-zebra: var(--neutral-200);
    --ds-hover: #EEF1F5;
    --ds-primary: var(--resolution-blue-500);
    --ds-link: var(--resolution-blue-500);
    --ds-on-strong: #FFFFFF;
    --ds-control-border: #8A8E9B;
    --ds-text-success: #2E7D14;
    --ds-tag-verde-fill: #E0EFDF;
    --ds-tag-azul-fill: #DCF0FA;
    --ds-tag-amarillo-fill: #FFF7D7;
    --ds-radius-sm: 8px;
    --ds-radius-md: 12px;
    --ds-radius-lg: 16px;
    --ds-radius-pill: 999px;
}

:root[data-theme="dark"] .adm-plans {
    --ds-divider: var(--dark-400);
    --ds-table-zebra: var(--dark-500);
    --ds-hover: var(--dark-400);
    --ds-primary: #156690;
    --ds-link: var(--resolution-blue-300);
    --ds-control-border: #7D8494;
    --ds-text-success: #5DBB57;
    --ds-tag-verde-fill: #374E36;
    --ds-tag-azul-fill: #2A4956;
    --ds-tag-amarillo-fill: #5E5223;
}

/* Íconos en línea de Plans.cshtml (equivalen a los de Html.DsIcon en master) */
.adm-plans .ds-icon {
    display: inline-block;
    flex: none;
    vertical-align: middle;
}

.adm-plans {
    display: flex;
    justify-content: center;
    padding: 3.2rem 2.4rem;
}

.adm-plans__content {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    width: 100%;
    max-width: 140rem;
    padding: 3.2rem;
    background-color: var(--ds-surface);
    border: 1px solid var(--ds-divider);
    border-radius: var(--ds-radius-lg);
    color: var(--ds-ink);
}

.adm-plans__header .adm__page-title {
    margin: 0;
}

.adm-plans__description {
    margin: 0.8rem 0 0;
    color: var(--ds-ink-muted);
    font-size: 1.5rem;
}

/* --- Herramientas --- */
.adm-plans__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.6rem;
}

.adm-plans__search {
    position: relative;
    flex: 1 1 32rem;
    max-width: 52rem;
}

.adm-plans__search-icon {
    position: absolute;
    top: 50%;
    left: 1.2rem;
    display: flex;
    color: var(--ds-ink-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.adm-plans__search .adm-plans__search-input {
    height: 4rem;
    padding-left: 4rem;
    border-radius: var(--ds-radius-sm);
}

.adm-plans__switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0;
    font-weight: normal;
    cursor: pointer;
    user-select: none;
}

.adm-plans__switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.adm-plans__switch-track {
    position: relative;
    flex: none;
    width: 3.6rem;
    height: 2rem;
    background-color: var(--ds-control-border);
    border-radius: var(--ds-radius-pill);
    transition: background-color 150ms ease;
}

.adm-plans__switch-track::after {
    content: "";
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 1.6rem;
    height: 1.6rem;
    background-color: var(--ds-on-strong);
    border-radius: 50%;
    transition: transform 150ms ease;
}

.adm-plans__switch input:checked + .adm-plans__switch-track {
    background-color: var(--ds-primary);
}

.adm-plans__switch input:checked + .adm-plans__switch-track::after {
    transform: translateX(1.6rem);
}

.adm-plans__switch input:focus-visible + .adm-plans__switch-track {
    outline: 2px solid var(--ds-primary);
    outline-offset: 2px;
}

/* Botones en fila: se anula el margin-bottom global de .btn para que queden alineados. */
.adm-plans__group-actions {
    display: flex;
    gap: 0.8rem;
    margin-left: auto;
}

.adm-plans__group-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}

.adm-plans__plan-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
}

.adm-plans__plan-picker-label {
    margin-right: 0.4rem;
    color: var(--ds-ink-muted);
    font-size: 1.3rem;
}

.adm-plans__plan-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.6rem 1.4rem;
    background-color: var(--ds-surface);
    border: 1px solid var(--ds-divider);
    border-radius: var(--ds-radius-pill);
    color: var(--ds-ink-muted);
    font-weight: normal;
    cursor: pointer;
    user-select: none;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.adm-plans__plan-chip input {
    margin: 0;
    accent-color: var(--ds-primary);
}

.adm-plans__plan-chip.is-active {
    background-color: var(--ds-tag-azul-fill);
    border-color: var(--ds-primary);
    color: var(--ds-ink);
}

/* El último plan visible no se puede ocultar. */
.adm-plans__plan-chip.is-locked {
    cursor: not-allowed;
}

/* --- Tabla --- */
.adm-plans__table-container {
    width: 100%;
    max-height: calc(100vh - 14rem);
    overflow: auto;
    border: 1px solid var(--ds-divider);
    border-radius: var(--ds-radius-md);
}

.adm-plans__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 1.4rem;
}

.adm-plans__table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 1.6rem 1.2rem;
    background-color: var(--ds-surface);
    border-bottom: 1px solid var(--ds-divider);
    text-align: center;
    vertical-align: top;
}

.adm-plans__feature {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 28rem;
    padding: 1rem 1.6rem;
    background-color: var(--ds-surface);
    border-right: 1px solid var(--ds-divider);
    font-weight: normal;
    text-align: left;
}

.adm-plans__table thead .adm-plans__feature--head {
    z-index: 3;
    color: var(--ds-ink-muted);
    font-weight: 600;
    text-align: left;
    vertical-align: bottom;
}

.adm-plans__plan {
    min-width: 15rem;
}

.adm-plans__plan > * {
    display: block;
    margin: 0 auto 0.6rem;
}

.adm-plans__plan > .adm__tag {
    display: inline-block;
}

.adm-plans__plan--current {
    border-top: 3px solid var(--ds-primary);
}

.adm-plans__plan-price {
    font-size: 2rem;
    font-weight: 600;
    white-space: nowrap;
}

.adm-plans__plan-price small,
.adm-plans__plan-price-note {
    color: var(--ds-ink-muted);
    font-size: 1.2rem;
    font-weight: normal;
}

.adm-plans__current-badge {
    display: inline-block;
    padding: 0.2rem 1rem;
    background-color: var(--ds-tag-verde-fill);
    border-radius: var(--ds-radius-pill);
    color: var(--ds-text-success);
    font-size: 1.2rem;
    font-weight: 600;
}

.adm-plans__switch-link {
    color: var(--ds-link);
    font-size: 1.3rem;
    font-weight: 600;
}

.adm-plans__row > th,
.adm-plans__cell {
    border-bottom: 1px solid var(--ds-divider);
}

.adm-plans__cell {
    padding: 1rem 1.2rem;
    text-align: center;
    vertical-align: middle;
}

.adm-plans__row:hover > th,
.adm-plans__row:hover > td {
    background-color: var(--ds-hover);
}

.adm-plans__yes {
    display: inline-flex;
    color: var(--ds-text-success);
}

.adm-plans__no {
    display: inline-flex;
    color: var(--ds-control-border);
}

.adm-plans__value {
    font-weight: 600;
}

.adm-plans__value--strong {
    font-size: 1.5rem;
}

.adm-plans__row mark {
    padding: 0;
    background-color: var(--ds-tag-amarillo-fill);
    color: inherit;
}

/* --- Grupos --- */
.adm-plans__group-row > th {
    padding: 0;
    background-color: var(--ds-table-zebra);
    border-bottom: 1px solid var(--ds-divider);
    text-align: left;
}

.adm-plans__group-toggle {
    position: sticky;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.2rem 1.6rem;
    background: transparent;
    border: 0;
    color: var(--ds-ink);
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
}

.adm-plans__group-toggle:focus-visible {
    outline: 2px solid var(--ds-primary);
    outline-offset: -2px;
}

.adm-plans__group-chevron {
    display: inline-flex;
    transition: transform 150ms ease;
}

.adm-plans__group-toggle[aria-expanded="false"] .adm-plans__group-chevron {
    transform: rotate(-90deg);
}

.adm-plans__group-count {
    min-width: 2.4rem;
    padding: 0 0.8rem;
    background-color: var(--ds-surface);
    border: 1px solid var(--ds-divider);
    border-radius: var(--ds-radius-pill);
    color: var(--ds-ink-muted);
    font-size: 1.2rem;
    text-align: center;
}

/* --- Estados que pone Plans.ts --- */
.adm-plans .is-plan-hidden,
.adm-plans .is-row-hidden,
.adm-plans .is-group-hidden {
    display: none;
}

.adm-plans__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 4rem 1.6rem;
    color: var(--ds-ink-muted);
}

.adm-plans__empty[hidden] {
    display: none;
}

.adm-plans__empty p {
    margin: 0;
}

.adm-plans__footnote {
    margin: 0;
    color: var(--ds-ink-muted);
    font-size: 1.3rem;
}

@media (max-width: 767px) {
    .adm-plans {
        padding: 1.6rem 0.8rem;
    }

    .adm-plans__content {
        padding: 1.6rem;
    }

    .adm-plans__feature {
        min-width: 16rem;
    }

    .adm-plans__group-actions {
        margin-left: 0;
    }
}