@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
    --sp-font-sans: 'Inter', sans-serif;
    --sp-brand-50: #eff4ff;
    --sp-brand-100: #dee8ff;
    --sp-brand-200: #c7d6ff;
    --sp-brand-300: #97affe;
    --sp-brand-500: #3f6df2;
    --sp-brand-600: #355fe7;
    --sp-brand-700: #2b51cb;
    --sp-success-500: #16b38a;
    --sp-warning-500: #f6a84a;
    --sp-danger-500: #ff4776;
    --sp-info-500: #45c0da;
    --sp-dark-900: #272b31;
    --sp-surface-page: #f6f8fc;
    --sp-surface-card: #ffffff;
    --sp-surface-soft: #fbfcff;
    --sp-surface-inset: #f8fbff;
    --sp-border-soft: #e5edf7;
    --sp-border-strong: #d7e2f2;
    --sp-shadow-card: 0 8px 24px rgba(148, 163, 184, 0.09);
    --sp-shadow-card-strong: 0 24px 60px rgba(15, 23, 42, 0.18);
    --sp-shadow-button: 0 10px 20px rgba(63, 109, 242, 0.18);
    --sp-modal-pad-x: 1.45rem;
    --sp-modal-pad-y: 1.1rem;
    --sp-modal-pad-body-y: 1.45rem;
    --sp-modal-pad-body-x: 1.45rem;
    --sp-modal-pad-footer-y: 1rem;
    --sp-page-title-size: 1.375rem;
    --sp-section-title-size: 1.125rem;
    --sp-card-title-size: 1rem;
    --sp-metric-size-lg: 1.75rem;
    --sp-metric-size-md: 1.5rem;
    --sp-body-size: 0.875rem;
    --sp-secondary-size: 0.8125rem;
    --sp-label-size: 0.78125rem;
    --sp-badge-size: 0.75rem;
    --sp-line-tight: 1.2;
    --sp-line-body: 1.55;
    --sp-text-main: #0f172a;
    --sp-text-soft: #475569;
    --sp-text-muted: #64748b;
    --sp-success-bg: rgba(22, 179, 138, 0.1);
    --sp-warning-bg: rgba(246, 168, 74, 0.12);
    --sp-danger-bg: rgba(255, 71, 118, 0.1);
    --sp-info-bg: rgba(63, 109, 242, 0.09);
}

.sp-admin-ui,
.sp-admin-ui button,
.sp-admin-ui input,
.sp-admin-ui select,
.sp-admin-ui textarea,
.sp-auth-ui,
.sp-auth-ui button,
.sp-auth-ui input,
.sp-auth-ui select,
.sp-auth-ui textarea {
    font-family: var(--sp-font-sans) !important;
}

.sp-admin-ui,
.sp-auth-ui {
    background: var(--sp-surface-page);
    color: var(--sp-text-main);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sp-admin-ui ::selection,
.sp-auth-ui ::selection {
    background: rgba(63, 109, 242, 0.18);
    color: var(--sp-text-main);
}

.sp-admin-ui .font-black,
.sp-admin-ui .font-extrabold,
.sp-admin-ui .font-bold,
.sp-auth-ui .font-black,
.sp-auth-ui .font-extrabold,
.sp-auth-ui .font-bold {
    font-weight: 600 !important;
}

.sp-admin-ui .page-title,
.sp-auth-ui .page-title {
    font-size: var(--sp-page-title-size) !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
}

.sp-admin-ui .page-subtitle,
.sp-admin-ui .helper-text,
.sp-auth-ui .page-subtitle,
.sp-auth-ui .helper-text {
    font-size: var(--sp-secondary-size) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--sp-text-muted) !important;
}

.sp-admin-ui .section-title,
.sp-admin-ui .card-title,
.sp-auth-ui .section-title,
.sp-auth-ui .card-title {
    font-size: var(--sp-section-title-size) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

.sp-admin-ui .metric-value,
.sp-auth-ui .metric-value {
    font-size: var(--sp-metric-size-md) !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
}

.sp-admin-ui .metric-label,
.sp-auth-ui .metric-label,
.sp-admin-ui .form-label,
.sp-auth-ui .form-label,
.sp-admin-ui .table-heading,
.sp-auth-ui .table-heading,
.sp-admin-ui .badge-text,
.sp-auth-ui .badge-text,
.sp-admin-ui .button-text,
.sp-auth-ui .button-text,
.sp-admin-ui .sidebar-item,
.sp-auth-ui .sidebar-item {
    font-size: var(--sp-label-size) !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
}

.sp-admin-ui #panel-main-content,
.sp-admin-ui #panel-main-content p,
.sp-admin-ui #panel-main-content li,
.sp-admin-ui #panel-main-content dd,
.sp-admin-ui #panel-main-content dt,
.sp-admin-ui #panel-main-content span,
.sp-auth-ui p,
.sp-auth-ui li {
    font-size: var(--sp-body-size);
    line-height: var(--sp-line-body);
}

.sp-admin-ui #panel-main-content h1,
.sp-auth-ui h1 {
    font-size: var(--sp-page-title-size) !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
}

.sp-admin-ui #panel-main-content h2,
.sp-auth-ui h2 {
    font-size: var(--sp-section-title-size) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
}

.sp-admin-ui #panel-main-content h3,
.sp-auth-ui h3 {
    font-size: var(--sp-card-title-size) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

.sp-admin-ui #panel-main-content .text-4xl:not(h1),
.sp-admin-ui #panel-main-content .text-3xl:not(h1) {
    font-size: var(--sp-metric-size-lg) !important;
    line-height: 1.15 !important;
}

.sp-admin-ui #panel-main-content .text-2xl:not(h1):not(h2),
.sp-auth-ui .text-2xl:not(h1):not(h2) {
    font-size: var(--sp-metric-size-md) !important;
    line-height: 1.2 !important;
}

.sp-admin-ui #panel-main-content .text-xl:not(h1):not(h2):not(h3),
.sp-auth-ui .text-xl:not(h1):not(h2):not(h3) {
    font-size: 1.125rem !important;
    line-height: 1.3 !important;
}

.sp-admin-ui #panel-main-content .text-lg:not(h1):not(h2):not(h3),
.sp-auth-ui .text-lg:not(h1):not(h2):not(h3) {
    font-size: 1rem !important;
    line-height: 1.4 !important;
}

.sp-admin-ui #panel-main-content .text-base,
.sp-auth-ui .text-base {
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
}

.sp-admin-ui #panel-main-content .text-sm,
.sp-auth-ui .text-sm {
    font-size: var(--sp-body-size) !important;
    line-height: 1.5 !important;
}

.sp-admin-ui #panel-main-content .text-xs,
.sp-auth-ui .text-xs {
    font-size: var(--sp-badge-size) !important;
    line-height: 1.4 !important;
}

.sp-admin-ui #panel-main-content label > span:first-child,
.sp-auth-ui label > span:first-child {
    font-size: var(--sp-label-size) !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    letter-spacing: normal !important;
}

.sp-admin-ui #panel-main-content input,
.sp-admin-ui #panel-main-content select,
.sp-admin-ui #panel-main-content textarea,
.sp-auth-ui input,
.sp-auth-ui select,
.sp-auth-ui textarea {
    font-size: var(--sp-body-size) !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

.sp-admin-ui #panel-main-content,
.sp-auth-ui main section > div,
.sp-auth-ui section > div {
    color: var(--sp-text-main);
}

.sp-admin-ui #panel-main-shell,
.sp-admin-ui #panel-main-content,
.sp-auth-ui section > div {
    border-radius: 1.5rem;
}

.sp-admin-ui #panel-main-content {
    border: 1px solid var(--sp-border-soft);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, #ffffff 100%);
    box-shadow: var(--sp-shadow-card);
}

.sp-admin-ui #panel-main-shell {
    isolation: isolate;
}

.sp-admin-ui #appMobileTopbar {
    border-color: var(--sp-border-soft) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: var(--sp-shadow-card) !important;
    backdrop-filter: blur(14px);
}

.sp-admin-ui #appMobileTopbar button {
    border-radius: 0.85rem !important;
}

.sp-admin-ui #suscripciones-page-content {
    gap: 1.25rem !important;
}

.sp-admin-ui #suscripciones-page-content > .flex.flex-col.gap-2 {
    margin-bottom: 0.125rem;
}

.sp-admin-ui #suscripciones-page-content > .space-y-2 > div,
.sp-admin-ui #suscripciones-ajax-messages > div {
    border-radius: 1rem !important;
    border-width: 1px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.sp-admin-ui #suscripciones-quick-actions,
.sp-admin-ui #suscripciones-overview-card,
.sp-admin-ui #suscripciones-page-content details {
    border-color: var(--sp-border-soft) !important;
    box-shadow: var(--sp-shadow-card) !important;
}

.sp-admin-ui #suscripciones-quick-actions {
    background:
        radial-gradient(circle at top right, rgba(63, 109, 242, 0.06), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
    padding: 1rem 1.125rem !important;
}

.sp-admin-ui #suscripciones-quick-actions p {
    letter-spacing: 0 !important;
}

.sp-admin-ui #suscripciones-overview-card {
    overflow: hidden;
    border-radius: 1.35rem !important;
    background:
        radial-gradient(circle at top right, rgba(63, 109, 242, 0.08), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
}

.sp-admin-ui #suscripciones-overview-card > div {
    gap: 1rem !important;
    padding: 1rem 1.125rem !important;
}

.sp-admin-ui #suscripciones-overview-grid {
    align-items: stretch;
}

.sp-admin-ui .suscripciones-overview-stat {
    min-height: 9.25rem;
    border-width: 1px;
    border-style: solid;
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.96);
    padding: 1rem;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.sp-admin-ui .suscripciones-overview-group {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7b8aa3;
}

.sp-admin-ui .suscripciones-overview-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    min-height: 3rem;
    border-radius: 999px;
    padding: 0 0.85rem;
    background: #f6f9ff;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
}

.sp-admin-ui #estado-parqueadero-root .estado-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6b7b96;
}

.sp-admin-ui #estado-parqueadero-root .estado-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.8fr);
    gap: 1.5rem;
}

.sp-admin-ui #estado-parqueadero-root .estado-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 999px;
    background: #f8fbff;
    border: 1px solid var(--sp-border-soft);
    padding: 0.7rem 1rem;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    color: #51637f;
}

.sp-admin-ui #estado-parqueadero-root .estado-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 999px;
    border: 1px solid #c7d6ff;
    background: #fff;
    padding: 0.78rem 1.05rem;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--sp-brand-600);
    transition: 180ms ease;
}

.sp-admin-ui #estado-parqueadero-root .estado-refresh-btn:hover {
    background: var(--sp-brand-50);
}

.sp-admin-ui #estado-parqueadero-root .estado-widget-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.sp-admin-ui #estado-parqueadero-root .estado-widget-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--sp-border-soft);
    border-radius: 1.35rem;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    padding: 1.15rem;
}

.sp-admin-ui #estado-parqueadero-root .estado-widget-card::after {
    content: "";
    position: absolute;
    inset: auto -10% -42% auto;
    width: 7rem;
    height: 7rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(63, 109, 242, 0.1), transparent 70%);
}

.sp-admin-ui #estado-parqueadero-root .estado-widget-card--success::after {
    background: radial-gradient(circle, rgba(22, 179, 138, 0.14), transparent 70%);
}

.sp-admin-ui #estado-parqueadero-root .estado-widget-card--danger::after {
    background: radial-gradient(circle, rgba(255, 71, 118, 0.14), transparent 70%);
}

.sp-admin-ui #estado-parqueadero-root .estado-widget-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.sp-admin-ui #estado-parqueadero-root .estado-widget-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 1rem;
}

.sp-admin-ui #estado-parqueadero-root .estado-widget-label {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b7b96;
}

.sp-admin-ui #estado-parqueadero-root .estado-widget-value {
    margin-top: 1rem;
    font-size: 2rem !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    color: #0f172a;
}

.sp-admin-ui #estado-parqueadero-root .estado-widget-copy {
    margin-top: 0.35rem;
    font-size: 0.84rem !important;
    color: #64748b;
}

.sp-admin-ui #estado-parqueadero-root .estado-gauge-card,
.sp-admin-ui #estado-parqueadero-root .estado-hero-card,
.sp-admin-ui #estado-parqueadero-root .estado-type-card {
    background:
        radial-gradient(circle at top right, rgba(63, 109, 242, 0.05), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.sp-admin-ui #estado-parqueadero-root .estado-ring {
    --ring-size: 12rem;
    --ring-value: 0;
    --ring-color: var(--sp-brand-500);
    width: var(--ring-size);
    height: var(--ring-size);
    border-radius: 999px;
    background: conic-gradient(var(--ring-color) calc(var(--ring-value) * 1%), #e8effa 0);
    position: relative;
    display: grid;
    place-items: center;
}

.sp-admin-ui #estado-parqueadero-root .estado-ring::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.sp-admin-ui #estado-parqueadero-root .estado-ring--sm {
    --ring-size: 7rem;
}

.sp-admin-ui #estado-parqueadero-root .estado-ring-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    text-align: center;
}

.sp-admin-ui #estado-parqueadero-root .estado-ring-caption {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7b8aa3;
}

.sp-admin-ui #estado-parqueadero-root .estado-ring-value {
    font-size: 2.2rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #0f172a;
}

.sp-admin-ui #estado-parqueadero-root .estado-ring-value--sm {
    font-size: 1.25rem !important;
}

.sp-admin-ui #estado-parqueadero-root .estado-ring-subvalue {
    font-size: 0.86rem !important;
    color: #64748b;
}

.sp-admin-ui #estado-parqueadero-root .estado-summary-chip,
.sp-admin-ui #estado-parqueadero-root .estado-mini-stat,
.sp-admin-ui #estado-parqueadero-root .estado-panel-kpi {
    border-radius: 1rem;
    border: 1px solid var(--sp-border-soft);
    background: #f8fbff;
    padding: 0.9rem 1rem;
}

.sp-admin-ui #estado-parqueadero-root .estado-summary-label,
.sp-admin-ui #estado-parqueadero-root .estado-mini-stat-label,
.sp-admin-ui #estado-parqueadero-root .estado-panel-kpi-label {
    display: block;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7b8aa3;
}

.sp-admin-ui #estado-parqueadero-root .estado-summary-chip strong,
.sp-admin-ui #estado-parqueadero-root .estado-mini-stat strong,
.sp-admin-ui #estado-parqueadero-root .estado-panel-kpi strong {
    display: block;
    margin-top: 0.35rem;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    color: #0f172a;
}

.sp-admin-ui #estado-parqueadero-root .estado-inline-alert {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border-radius: 1rem;
    padding: 0.9rem 1rem;
    font-size: 0.86rem !important;
    font-weight: 500 !important;
}

.sp-admin-ui #estado-parqueadero-root .estado-inline-alert--warning {
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #9a3412;
}

.sp-admin-ui #estado-parqueadero-root .estado-inline-alert--danger {
    background: #fff1f4;
    border: 1px solid #fda4af;
    color: #be123c;
}

.sp-admin-ui #estado-parqueadero-root .estado-inline-alert--critical {
    background: #ffe4ec;
    border: 1px solid #fb7185;
    color: #9f1239;
}

.sp-admin-ui #estado-parqueadero-root .estado-suggestion-box {
    border-radius: 1.15rem;
    border: 1px solid rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.82);
    padding: 1rem 1.1rem;
}

.sp-admin-ui #estado-parqueadero-root .estado-suggestion-title {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7b8aa3;
}

.sp-admin-ui #estado-parqueadero-root .estado-alert-stat {
    border-radius: 1.2rem;
    padding: 1rem;
    border: 1px solid var(--sp-border-soft);
}

.sp-admin-ui #estado-parqueadero-root .estado-alert-stat-label {
    display: block;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.sp-admin-ui #estado-parqueadero-root .estado-alert-stat strong {
    display: block;
    margin-top: 0.4rem;
    font-size: 2rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

.sp-admin-ui #estado-parqueadero-root .estado-alert-stat--warning {
    border-color: #fcd9b0;
    background: #fff7ed;
    color: #b45309;
}

.sp-admin-ui #estado-parqueadero-root .estado-alert-stat--danger {
    border-color: #fecdd3;
    background: #fff1f4;
    color: #be123c;
}

.sp-admin-ui #estado-parqueadero-root .estado-alert-stat--orange {
    border-color: #fdba74;
    background: #fff7ed;
    color: #c2410c;
}

.sp-admin-ui #estado-parqueadero-root .estado-alert-stat--critical {
    border-color: #fda4af;
    background: #ffe4ec;
    color: #9f1239;
}

.sp-admin-ui #estado-parqueadero-root .estado-type-name {
    display: block;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7b8aa3;
}

.sp-admin-ui #estado-parqueadero-root .estado-alert-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    border-radius: 1rem;
    padding: 0.95rem 1rem;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}

.sp-admin-ui #estado-parqueadero-root .estado-alert-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.65);
    flex-shrink: 0;
}

.sp-admin-ui #estado-parqueadero-root .estado-alert-row--warning {
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #9a3412;
}

.sp-admin-ui #estado-parqueadero-root .estado-alert-row--danger {
    background: #fff1f4;
    border: 1px solid #fda4af;
    color: #be123c;
}

.sp-admin-ui #estado-parqueadero-root .estado-alert-row--critical {
    background: #ffe4ec;
    border: 1px solid #fb7185;
    color: #9f1239;
}

.sp-admin-ui #estado-parqueadero-root .estado-table-filters {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.8fr) minmax(150px, 0.4fr) auto;
    gap: 0.9rem;
    align-items: center;
}

.sp-admin-ui #estado-parqueadero-root .estado-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
}

@media (max-width: 1279px) {
    .sp-admin-ui #estado-parqueadero-root .estado-hero-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1023px) {
    .sp-admin-ui #estado-parqueadero-root .estado-widget-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sp-admin-ui #estado-parqueadero-root .estado-table-filters {
        grid-template-columns: 1fr 1fr;
    }

    .sp-admin-ui #estado-parqueadero-root .estado-filter-field--search {
        grid-column: 1 / -1;
    }

    .sp-admin-ui #estado-parqueadero-root .estado-filter-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }
}

@media (max-width: 767px) {
    .sp-admin-ui #estado-parqueadero-root .estado-widget-grid,
    .sp-admin-ui #estado-parqueadero-root .estado-table-filters {
        grid-template-columns: 1fr;
    }

    .sp-admin-ui #estado-parqueadero-root .estado-gauge-card,
    .sp-admin-ui #estado-parqueadero-root .estado-hero-card,
    .sp-admin-ui #estado-parqueadero-root .estado-type-card {
        padding: 1.1rem;
    }

    .sp-admin-ui #estado-parqueadero-root .estado-ring--lg {
        --ring-size: 10rem;
    }

    .sp-admin-ui #estado-parqueadero-root .estado-filter-actions {
        justify-content: stretch;
    }
}

.sp-admin-ui #suscripciones-tabs-shell {
    overflow: hidden;
    border-radius: 1.45rem !important;
    border-color: var(--sp-border-soft) !important;
    background:
        radial-gradient(circle at top right, rgba(63, 109, 242, 0.05), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
    box-shadow: var(--sp-shadow-card) !important;
}

.sp-admin-ui #suscripciones-tabs-header {
    background: linear-gradient(180deg, rgba(251, 252, 255, 0.98) 0%, rgba(255, 255, 255, 1) 100%);
}

.sp-admin-ui #suscripciones-tabs-list {
    gap: 0.625rem !important;
}

.sp-admin-ui .suscripciones-tab-button {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.8rem;
    padding: 0.75rem 1rem;
    border: 1px solid #d9e5f2;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.98);
    color: #60708a;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.sp-admin-ui .suscripciones-tab-button:hover {
    transform: translateY(-1px);
    border-color: #bfd2eb;
    color: #1f355a;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06);
}

.sp-admin-ui .suscripciones-tab-button.is-active,
.sp-admin-ui .suscripciones-tab-button[aria-selected="true"] {
    border-color: #3f6df2;
    background: #3f6df2;
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(63, 109, 242, 0.22);
}

.sp-admin-ui #suscripciones-tabs-panels {
    background: linear-gradient(180deg, rgba(251, 252, 255, 0.6) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.sp-admin-ui .suscripciones-tab-panel {
    display: grid;
    gap: 1rem;
}

.sp-admin-ui .suscripciones-tab-panel.hidden {
    display: none !important;
}

.sp-admin-ui .suscripciones-panel-hero {
    display: grid;
    gap: 1rem;
    border: 1px solid #deebf7;
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at top right, rgba(63, 109, 242, 0.08), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 1.125rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.sp-admin-ui .suscripciones-panel-eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #4f74d9;
}

.sp-admin-ui .suscripciones-panel-title {
    margin-top: 0.35rem;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.25;
    color: #0f172a;
}

.sp-admin-ui .suscripciones-panel-description {
    margin-top: 0.4rem;
    max-width: 46rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #66768f;
}

.sp-admin-ui .suscripciones-panel-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.sp-admin-ui .suscripciones-panel-kpis {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.sp-admin-ui .suscripciones-panel-kpi {
    border: 1px solid rgba(217, 229, 242, 0.88);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.96);
    padding: 0.9rem 1rem;
}

.sp-admin-ui .suscripciones-panel-kpi-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7a8aa3;
}

.sp-admin-ui .suscripciones-panel-kpi-value {
    display: block;
    margin-top: 0.45rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #0f172a;
}

.sp-admin-ui #suscripciones-panel-pagos,
.sp-admin-ui #suscripciones-pagos-shell {
    min-width: 0;
    max-width: 100%;
}

.sp-admin-ui #suscripciones-panel-pagos .suscripciones-panel-header-row {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.75rem;
}

.sp-admin-ui #suscripciones-panel-pagos .suscripciones-panel-header-main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
}

.sp-admin-ui #suscripciones-panel-pagos .suscripciones-panel-header-main h2 {
    min-width: 0;
}

.sp-admin-ui #suscripciones-panel-pagos .suscripciones-panel-header-action {
    width: 100%;
    justify-content: center;
    white-space: nowrap;
}

.sp-admin-ui #suscripciones-panel-pagos .suscripciones-filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    align-items: end;
}

.sp-admin-ui #suscripciones-panel-pagos .suscripciones-filter-field,
.sp-admin-ui #suscripciones-panel-pagos .suscripciones-filter-actions {
    min-width: 0;
}

.sp-admin-ui #suscripciones-panel-pagos .suscripciones-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.sp-admin-ui #suscripciones-panel-pagos .suscripciones-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.sp-admin-ui #suscripciones-panel-pagos .suscripciones-table-min {
    width: max-content;
    min-width: 1120px;
}

.sp-admin-ui #suscripciones-overview-card .h-full.space-y-1\\.5 {
    border: 1px solid rgba(229, 237, 247, 0.9);
    border-radius: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    padding: 0.5rem;
}

.sp-admin-ui #suscripciones-overview-card .h-full.space-y-1\\.5 > div {
    min-height: 3rem;
    border-radius: 0.9rem;
    transition: background-color 160ms ease, transform 160ms ease;
}

.sp-admin-ui #suscripciones-overview-card .h-full.space-y-1\\.5 > div:hover {
    background: rgba(248, 250, 252, 0.92);
    transform: translateY(-1px);
}

.sp-admin-ui #suscripciones-page-content details {
    overflow: hidden;
    border-radius: 1.35rem !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #ffffff 100%) !important;
}

.sp-admin-ui #suscripciones-page-content details > summary {
    min-height: 4.5rem;
    padding: 1rem 1.125rem !important;
    background:
        linear-gradient(180deg, rgba(251, 252, 255, 0.98) 0%, rgba(255, 255, 255, 1) 100%);
}

.sp-admin-ui #suscripciones-page-content details > summary:hover {
    background:
        linear-gradient(180deg, rgba(245, 248, 255, 0.98) 0%, rgba(255, 255, 255, 1) 100%);
}

.sp-admin-ui #suscripciones-page-content details > summary p:first-child {
    font-size: 0.98rem !important;
    font-weight: 600 !important;
    color: var(--sp-text-main) !important;
}

.sp-admin-ui #suscripciones-page-content details > summary p:last-child {
    color: var(--sp-text-muted) !important;
}

.sp-admin-ui #suscripciones-planes-shell,
.sp-admin-ui #suscripciones-tenant-shell,
.sp-admin-ui #suscripciones-historial-shell,
.sp-admin-ui #suscripciones-pagos-shell,
.sp-admin-ui #suscripciones-links-shell {
    border-radius: 1.25rem !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #ffffff 100%) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.sp-admin-ui #suscripciones-planes-shell > div,
.sp-admin-ui #suscripciones-tenant-shell > div,
.sp-admin-ui #suscripciones-historial-shell > div,
.sp-admin-ui #suscripciones-pagos-shell > div,
.sp-admin-ui #suscripciones-links-shell > div {
    border-color: var(--sp-border-soft) !important;
}

.sp-admin-ui #suscripciones-page-content form.rounded-xl,
.sp-admin-ui #suscripciones-page-content .rounded-xl.border.border-slate-200.bg-white,
.sp-admin-ui #suscripciones-page-content .rounded-xl.border.border-slate-200.bg-slate-50 {
    border-color: var(--sp-border-soft) !important;
    border-radius: 1.1rem !important;
}

.sp-admin-ui #suscripciones-page-content form.rounded-xl {
    background: linear-gradient(180deg, #fcfdff 0%, #f8fbff 100%) !important;
}

.sp-admin-ui #suscripciones-page-content input,
.sp-admin-ui #suscripciones-page-content select,
.sp-admin-ui #suscripciones-page-content textarea {
    min-height: 2.75rem;
    border-color: #d8e4f3 !important;
    border-radius: 0.95rem !important;
    background: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.sp-admin-ui #suscripciones-page-content textarea {
    min-height: 5.75rem;
}

.sp-admin-ui #suscripciones-page-content input:focus,
.sp-admin-ui #suscripciones-page-content select:focus,
.sp-admin-ui #suscripciones-page-content textarea:focus {
    border-color: rgba(63, 109, 242, 0.45) !important;
    box-shadow: 0 0 0 4px rgba(63, 109, 242, 0.1) !important;
}

.sp-admin-ui #suscripciones-page-content table {
    border-collapse: separate;
    border-spacing: 0;
}

.sp-admin-ui #suscripciones-planes-table thead,
.sp-admin-ui #suscripciones-tenant-table thead,
.sp-admin-ui #suscripciones-historial-table thead,
.sp-admin-ui #suscripciones-pagos-table thead,
.sp-admin-ui #suscripciones-links-table thead {
    background: #f8fbff !important;
}

.sp-admin-ui #suscripciones-planes-table thead th,
.sp-admin-ui #suscripciones-tenant-table thead th,
.sp-admin-ui #suscripciones-historial-table thead th,
.sp-admin-ui #suscripciones-pagos-table thead th,
.sp-admin-ui #suscripciones-links-table thead th {
    border-bottom: 1px solid var(--sp-border-soft);
    color: #60708a !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase;
}

.sp-admin-ui #suscripciones-planes-table tbody td,
.sp-admin-ui #suscripciones-tenant-table tbody td,
.sp-admin-ui #suscripciones-historial-table tbody td,
.sp-admin-ui #suscripciones-pagos-table tbody td,
.sp-admin-ui #suscripciones-links-table tbody td {
    color: var(--sp-text-soft) !important;
    padding-top: 0.95rem !important;
    padding-bottom: 0.95rem !important;
}

.sp-admin-ui #suscripciones-planes-table tbody tr:hover,
.sp-admin-ui #suscripciones-tenant-table tbody tr:hover,
.sp-admin-ui #suscripciones-historial-table tbody tr:hover,
.sp-admin-ui #suscripciones-pagos-table tbody tr:hover,
.sp-admin-ui #suscripciones-links-table tbody tr:hover {
    background: rgba(248, 251, 255, 0.88);
}

.sp-admin-ui #suscripciones-planes-footer,
.sp-admin-ui #suscripciones-tenant-footer,
.sp-admin-ui #suscripciones-historial-footer,
.sp-admin-ui #suscripciones-pagos-footer,
.sp-admin-ui #suscripciones-links-footer {
    background: #fcfdff;
}

.sp-admin-ui #suscripciones-form-modal [data-superadmin-modal-fragment='1'],
.sp-admin-ui #suscripciones-detail-modal [data-superadmin-modal-fragment='1'] {
    border-color: var(--sp-border-soft) !important;
    border-radius: 1.5rem !important;
    box-shadow: var(--sp-shadow-card-strong) !important;
}

.sp-admin-ui #suscripciones-form-modal [data-superadmin-modal-fragment='1'] > div:first-child,
.sp-admin-ui #suscripciones-detail-modal [data-superadmin-modal-fragment='1'] > div:first-child {
    background: var(--sp-dark-900);
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    padding: 1rem 1.125rem !important;
}

.sp-admin-ui #suscripciones-form-modal [data-superadmin-modal-fragment='1'] > div:first-child p,
.sp-admin-ui #suscripciones-detail-modal [data-superadmin-modal-fragment='1'] > div:first-child p,
.sp-admin-ui #suscripciones-form-modal [data-superadmin-modal-fragment='1'] > div:first-child h2,
.sp-admin-ui #suscripciones-detail-modal [data-superadmin-modal-fragment='1'] > div:first-child h2 {
    color: #ffffff !important;
}

.sp-admin-ui #suscripciones-form-modal [data-superadmin-modal-close='1'],
.sp-admin-ui #suscripciones-detail-modal [data-superadmin-modal-close='1'] {
    color: rgba(255, 255, 255, 0.72) !important;
}

.sp-admin-ui #suscripciones-form-modal [data-superadmin-modal-close='1']:hover,
.sp-admin-ui #suscripciones-detail-modal [data-superadmin-modal-close='1']:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.sp-admin-ui #superadmin-accesos-page {
    gap: 1rem !important;
}

.sp-admin-ui #superadmin-accesos-toolbar,
.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-panel {
    border-color: var(--sp-border-soft) !important;
    background:
        radial-gradient(circle at top right, rgba(63, 109, 242, 0.04), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #ffffff 100%) !important;
    box-shadow: var(--sp-shadow-card) !important;
}

.sp-admin-ui #superadmin-accesos-toolbar {
    position: sticky;
    top: 0.85rem;
    z-index: 8;
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-panel {
    overflow: hidden;
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-form {
    min-height: 100%;
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-actions {
    margin-top: auto;
    padding-top: 0.25rem;
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-mini-pill,
.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-state-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    border-radius: 999px;
    border: 1px solid var(--sp-border-soft);
    padding: 0.35rem 0.75rem;
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-mini-pill.is-info,
.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-state-pill.is-info {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-mini-pill.is-success,
.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-state-pill.is-success {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-mini-pill.is-danger,
.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-state-pill.is-danger {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #be123c;
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-mini-pill.is-warn,
.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-state-pill.is-warn {
    border-color: #fde68a;
    background: #fffbeb;
    color: #b45309;
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-mini-pill.is-muted,
.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-state-pill.is-muted {
    border-color: #dbe3ef;
    background: #f8fafc;
    color: #64748b;
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-bulk-btn {
    min-height: 2rem;
    border: 1px solid #d7e2f2;
    border-radius: 999px;
    background: #ffffff;
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #35506e;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-bulk-btn:hover {
    border-color: #bfd2eb;
    background: #f8fbff;
    color: #1f355a;
    transform: translateY(-1px);
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-scroll {
    max-height: 28rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-module-row,
.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-override-row {
    border: 1px solid var(--sp-border-soft);
    border-radius: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-module-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.85rem 0.95rem;
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-module-row:hover,
.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-override-row:hover {
    border-color: #d7e3f5;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-override-row {
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem;
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-module-row[data-checked="1"] {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-module-row[data-checked="0"] {
    opacity: 0.92;
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-override-row[data-override-state="HABILITADO"] {
    border-color: #a7f3d0;
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-override-row[data-override-state="DESHABILITADO"] {
    border-color: #fecdd3;
    background: linear-gradient(180deg, #ffffff 0%, #fff1f2 100%);
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-override-row[data-override-state="HEREDAR"] {
    border-color: var(--sp-border-soft);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.sp-admin-ui #superadmin-accesos-page input,
.sp-admin-ui #superadmin-accesos-page select,
.sp-admin-ui #superadmin-accesos-page textarea {
    min-height: 2.7rem;
    border-color: #d8e4f3 !important;
    border-radius: 0.95rem !important;
    background: #ffffff !important;
}

.sp-admin-ui #superadmin-accesos-page textarea {
    min-height: 5.5rem;
}

.sp-admin-ui #superadmin-accesos-page input:focus,
.sp-admin-ui #superadmin-accesos-page select:focus,
.sp-admin-ui #superadmin-accesos-page textarea:focus {
    border-color: rgba(63, 109, 242, 0.45) !important;
    box-shadow: 0 0 0 4px rgba(63, 109, 242, 0.1) !important;
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    overscroll-behavior: contain;
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-table {
    border-collapse: separate;
    border-spacing: 0;
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fbff !important;
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-table thead th {
    border-bottom: 1px solid var(--sp-border-soft);
    color: #60708a !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase;
    white-space: nowrap;
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-table tbody td {
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
    color: var(--sp-text-soft) !important;
    vertical-align: top;
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-table tbody tr:hover {
    background: rgba(248, 251, 255, 0.82);
}

.sp-admin-ui #superadmin-accesos-page .superadmin-accesos-table tbody td p {
    line-height: 1.4 !important;
}

@media (max-width: 1023px) {
    .sp-admin-ui #superadmin-accesos-toolbar {
        position: static;
    }

    .sp-admin-ui #superadmin-accesos-page .superadmin-accesos-scroll {
        max-height: none;
        overflow: visible;
    }

    .sp-admin-ui #superadmin-accesos-page .superadmin-accesos-table-wrap {
        max-height: none !important;
    }

    .sp-admin-ui #superadmin-accesos-page .superadmin-accesos-module-row {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 768px) {
    .sp-admin-ui [data-superadmin-modal-fragment='1'] {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 1rem);
    }

    .sp-admin-ui [data-tenant-modal-body='1'],
    .sp-admin-ui [data-suscripciones-modal-body='1'],
    .sp-admin-ui [data-usuarios-modal-body='1'] {
        overflow-y: auto !important;
        max-height: calc(100vh - 8.75rem);
        -webkit-overflow-scrolling: touch;
    }

    .sp-admin-ui #suscripciones-quick-actions,
    .sp-admin-ui #suscripciones-overview-card > div,
    .sp-admin-ui #suscripciones-page-content details > summary {
        padding-left: 0.9rem !important;
        padding-right: 0.9rem !important;
    }

    .sp-admin-ui #suscripciones-panel-pagos .suscripciones-filter-actions > * {
        flex: 1 1 auto;
        justify-content: center;
    }

    .sp-admin-ui #suscripciones-overview-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .sp-admin-ui .suscripciones-overview-stat {
        min-height: auto;
        padding: 0.9rem;
    }

    .sp-admin-ui #suscripciones-page-content .suscripciones-panel-hero {
        padding: 0.95rem !important;
    }

    .sp-admin-ui #suscripciones-page-content .suscripciones-panel-hero-actions,
    .sp-admin-ui #suscripciones-page-content .suscripciones-panel-kpis,
    .sp-admin-ui #suscripciones-page-content .suscripciones-panel-header-row {
        width: 100%;
    }

    .sp-admin-ui #suscripciones-page-content .suscripciones-panel-hero-actions > *,
    .sp-admin-ui #suscripciones-page-content .suscripciones-panel-header-action,
    .sp-admin-ui #suscripciones-page-content .suscripciones-panel-kpis > *,
    .sp-admin-ui #suscripciones-page-content form .flex.flex-wrap.gap-2 > * {
        width: 100%;
        justify-content: center;
    }

    .sp-admin-ui #suscripciones-page-content .overflow-x-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .sp-admin-ui #suscripciones-page-content table {
        min-width: 920px;
    }

    .sp-admin-ui #superadmin-accesos-page .superadmin-accesos-table {
        min-width: 780px;
    }

    .sp-admin-ui #superadmin-accesos-page .superadmin-accesos-bulk-actions {
        width: 100%;
    }

    .sp-admin-ui #superadmin-accesos-page .superadmin-accesos-bulk-btn {
        flex: 1 1 calc(50% - 0.375rem);
        justify-content: center;
    }

    .sp-admin-ui #superadmin-accesos-page .superadmin-accesos-actions {
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin-top: 0.25rem;
        padding-top: 0.85rem;
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.94) 22%, #ffffff 100%);
    }

    .sp-admin-ui #superadmin-accesos-page .superadmin-accesos-actions > button {
        width: 100%;
        justify-content: center;
    }

    .sp-admin-ui #superadmin-accesos-page .superadmin-accesos-form {
        padding-bottom: 0.5rem !important;
    }

    .sp-admin-ui #suscripciones-tenant-shell,
    .sp-admin-ui #suscripciones-planes-shell,
    .sp-admin-ui #suscripciones-historial-shell,
    .sp-admin-ui #suscripciones-pagos-shell {
        overflow: hidden;
    }

    .sp-admin-ui #suscripciones-panel-tenant form,
    .sp-admin-ui #suscripciones-panel-pagos .suscripciones-filter-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .sp-admin-ui #suscripciones-panel-tenant .flex.min-w-0.flex-col.justify-end.gap-2 {
        width: 100%;
    }

    .sp-admin-ui #suscripciones-panel-tenant .flex.min-w-0.flex-col.justify-end.gap-2 .flex.flex-wrap.gap-2 > * {
        flex: 1 1 100%;
        justify-content: center;
    }

    .sp-admin-ui #suscripciones-panel-tenant .overflow-x-auto,
    .sp-admin-ui #suscripciones-panel-pagos .overflow-x-auto,
    .sp-admin-ui #suscripciones-panel-historial .overflow-x-auto,
    .sp-admin-ui #panel-main-content .overflow-x-auto {
        padding-bottom: 0.25rem;
    }

    .sp-admin-ui #suscripciones-tenant-table,
    .sp-admin-ui #suscripciones-planes-table,
    .sp-admin-ui #suscripciones-historial-table {
        min-width: 980px !important;
    }

    .sp-admin-ui #suscripciones-tenant-footer,
    .sp-admin-ui #suscripciones-planes-footer,
    .sp-admin-ui #suscripciones-historial-footer {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .sp-admin-ui #suscripciones-tenant-footer > *,
    .sp-admin-ui #suscripciones-planes-footer > *,
    .sp-admin-ui #suscripciones-historial-footer > * {
        width: 100%;
    }

    .sp-admin-ui #suscripciones-tenant-footer .inline-flex,
    .sp-admin-ui #suscripciones-planes-footer .inline-flex,
    .sp-admin-ui #suscripciones-historial-footer .inline-flex {
        justify-content: center;
    }

    .sp-admin-ui #panel-main-content #tenant-form-modal > .pointer-events-none,
    .sp-admin-ui #panel-main-content #suscripciones-form-modal > .pointer-events-none {
        align-items: flex-start !important;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .sp-admin-ui #tenant-form-modal-content,
    .sp-admin-ui #suscripciones-form-modal-content {
        max-width: 100% !important;
    }
}

@media (min-width: 640px) {
    .sp-admin-ui #suscripciones-panel-pagos .suscripciones-panel-header-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .sp-admin-ui #suscripciones-panel-pagos .suscripciones-panel-header-action {
        width: auto;
        flex: none;
    }

    .sp-admin-ui #suscripciones-panel-pagos .suscripciones-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sp-admin-ui #superadmin-accesos-page .superadmin-accesos-override-row {
        grid-template-columns: minmax(0, 1fr) 190px;
    }
}

@media (min-width: 1024px) {
    .sp-admin-ui #suscripciones-panel-pagos .suscripciones-filter-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sp-admin-ui #superadmin-accesos-page .superadmin-accesos-scroll {
        max-height: 26rem;
    }

    .sp-admin-ui #superadmin-accesos-page .superadmin-accesos-table-wrap {
        max-height: 20rem !important;
    }

    .sp-admin-ui #superadmin-accesos-page .superadmin-accesos-table thead th,
    .sp-admin-ui #superadmin-accesos-page .superadmin-accesos-table tbody td {
        padding-left: 0.8rem !important;
        padding-right: 0.8rem !important;
    }
}

@media (min-width: 1280px) {
    .sp-admin-ui #suscripciones-panel-pagos .suscripciones-table-wrap {
        overflow-x: visible;
    }

    .sp-admin-ui #suscripciones-panel-pagos .suscripciones-table-min {
        width: 100%;
        min-width: 0;
    }

    .sp-admin-ui #suscripciones-pagos-table thead th {
        padding-left: 0.7rem !important;
        padding-right: 0.7rem !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.02em !important;
        white-space: nowrap;
    }

    .sp-admin-ui #suscripciones-pagos-table tbody td {
        padding-left: 0.7rem !important;
        padding-right: 0.7rem !important;
        font-size: 0.82rem !important;
        line-height: 1.45 !important;
        vertical-align: top;
    }

    .sp-admin-ui #suscripciones-pagos-table tbody td p {
        line-height: 1.4 !important;
    }

    .sp-admin-ui #suscripciones-pagos-table tbody td .inline-flex.rounded-full {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
        font-size: 0.72rem !important;
    }

    .sp-admin-ui #suscripciones-pagos-table tbody td .flex.flex-wrap.gap-2 {
        flex-wrap: nowrap;
        gap: 0.45rem !important;
    }

    .sp-admin-ui #suscripciones-pagos-table tbody td .h-9.w-9 {
        height: 2rem !important;
        width: 2rem !important;
    }

    .sp-admin-ui #suscripciones-panel-pagos .suscripciones-filter-grid {
        grid-template-columns: repeat(9, minmax(0, 1fr));
    }

    .sp-admin-ui #suscripciones-panel-pagos .suscripciones-filter-actions {
        grid-column: span 2 / span 2;
        justify-content: flex-end;
    }

    .sp-admin-ui #superadmin-accesos-page .superadmin-accesos-override-row {
        grid-template-columns: minmax(0, 0.95fr) 170px minmax(0, 1fr);
        align-items: start;
    }
}

.sp-admin-ui #panel-ajax-loader {
    border-radius: 1.4rem !important;
    background: rgba(246, 248, 252, 0.72) !important;
    backdrop-filter: blur(2px);
}

.sp-admin-ui #panel-ajax-loader > div {
    border-color: var(--sp-border-soft) !important;
    border-radius: 1rem !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: var(--sp-shadow-card) !important;
}

.sp-admin-ui #session-timeout-warning {
    border-color: #f7d28e !important;
    border-radius: 1.25rem;
    box-shadow: var(--sp-shadow-card);
}

.sp-admin-ui #panel-main-content [class*='rounded-2xl'][class*='border'][class*='bg-white'],
.sp-admin-ui #panel-main-content [class*='rounded-3xl'][class*='border'][class*='bg-white'],
.sp-admin-ui #panel-main-content details[class*='rounded-2xl'],
.sp-admin-ui #panel-main-content details[class*='rounded-3xl'],
.sp-admin-ui #panel-main-content [id$='-table-shell'],
.sp-admin-ui #panel-main-content [class*='shadow-sm'][class*='bg-white'],
.sp-auth-ui section > div {
    border-color: var(--sp-border-soft) !important;
    background: var(--sp-surface-card) !important;
    box-shadow: var(--sp-shadow-card) !important;
}

.sp-admin-ui #panel-main-content article[class*='rounded'][class*='border'],
.sp-admin-ui #panel-main-content section[class*='rounded'][class*='border'],
.sp-admin-ui #panel-main-content div[class*='rounded'][class*='border'][class*='bg-white'],
.sp-admin-ui #panel-main-content aside[class*='rounded'][class*='border'] {
    border-color: var(--sp-border-soft);
}

.sp-admin-ui #panel-main-content [class*='rounded-2xl'][class*='border'][class*='bg-white'],
.sp-admin-ui #panel-main-content [id$='-table-shell'],
.sp-admin-ui #panel-main-content details[class*='rounded-2xl'],
.sp-auth-ui section > div {
    border-radius: 1.25rem !important;
}

.sp-admin-ui #panel-main-content [class*='rounded-3xl'][class*='border'][class*='bg-white'] {
    border-radius: 1.5rem !important;
}

.sp-admin-ui #panel-main-content button,
.sp-admin-ui #panel-main-content input[type='submit'],
.sp-admin-ui #panel-main-content input[type='button'],
.sp-admin-ui #panel-main-content .inline-flex[class*='rounded'],
.sp-admin-ui #panel-main-content a.rounded-lg,
.sp-admin-ui #panel-main-content a.rounded-xl,
.sp-admin-ui #panel-main-content a.rounded-2xl,
.sp-auth-ui button,
.sp-auth-ui input[type='submit'],
.sp-auth-ui input[type='button'],
.sp-auth-ui .inline-flex[class*='rounded'],
.sp-auth-ui a.rounded-lg,
.sp-auth-ui a.rounded-xl,
.sp-auth-ui a.rounded-2xl {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

.sp-admin-ui #panel-main-content button,
.sp-admin-ui #panel-main-content a[class*='rounded'],
.sp-admin-ui #panel-main-content input[type='submit'],
.sp-admin-ui #panel-main-content input[type='button'],
.sp-admin-ui #panel-main-content .inline-flex[class*='rounded'],
.sp-auth-ui button,
.sp-auth-ui a[class*='rounded'],
.sp-auth-ui input[type='submit'],
.sp-auth-ui input[type='button'],
.sp-auth-ui .inline-flex[class*='rounded'] {
    border-radius: 0.75rem !important;
    transition: all 180ms ease;
}

.sp-admin-ui #panel-main-content button[class*='bg-sky-600'],
.sp-admin-ui #panel-main-content button[class*='bg-brand-700'],
.sp-admin-ui #panel-main-content button[class*='bg-slate-900'],
.sp-admin-ui #panel-main-content a[class*='bg-sky-600'],
.sp-admin-ui #panel-main-content a[class*='bg-brand-700'],
.sp-admin-ui #panel-main-content a[class*='bg-slate-900'],
.sp-auth-ui button[class*='bg-brand-700'],
.sp-auth-ui button[class*='bg-sky-600'],
.sp-auth-ui .inline-flex[class*='bg-brand-700'],
.sp-auth-ui a[class*='bg-brand-700'],
.sp-auth-ui a[class*='bg-sky-600'] {
    border: 1px solid transparent !important;
    background: var(--sp-brand-600) !important;
    box-shadow: var(--sp-shadow-button) !important;
}

.sp-admin-ui #panel-main-content button[class*='bg-sky-600']:hover,
.sp-admin-ui #panel-main-content button[class*='bg-brand-700']:hover,
.sp-admin-ui #panel-main-content button[class*='bg-slate-900']:hover,
.sp-admin-ui #panel-main-content a[class*='bg-sky-600']:hover,
.sp-admin-ui #panel-main-content a[class*='bg-brand-700']:hover,
.sp-admin-ui #panel-main-content a[class*='bg-slate-900']:hover,
.sp-auth-ui button[class*='bg-brand-700']:hover,
.sp-auth-ui button[class*='bg-sky-600']:hover,
.sp-auth-ui .inline-flex[class*='bg-brand-700']:hover,
.sp-auth-ui a[class*='bg-brand-700']:hover,
.sp-auth-ui a[class*='bg-sky-600']:hover {
    background: var(--sp-brand-700) !important;
    transform: translateY(-1px);
}

.sp-admin-ui #panel-main-content button[class*='bg-emerald-'],
.sp-admin-ui #panel-main-content a[class*='bg-emerald-'] {
    background: var(--sp-success-500) !important;
    box-shadow: 0 8px 18px rgba(25, 181, 141, 0.18) !important;
}

.sp-admin-ui #panel-main-content button[class*='bg-amber-'],
.sp-admin-ui #panel-main-content a[class*='bg-amber-'],
.sp-admin-ui #panel-main-content button[class*='bg-orange-'],
.sp-admin-ui #panel-main-content a[class*='bg-orange-'] {
    background: var(--sp-warning-500) !important;
    box-shadow: 0 8px 18px rgba(246, 168, 74, 0.18) !important;
}

.sp-admin-ui #panel-main-content button[class*='bg-rose-'],
.sp-admin-ui #panel-main-content a[class*='bg-rose-'],
.sp-admin-ui #panel-main-content button[class*='bg-red-'],
.sp-admin-ui #panel-main-content a[class*='bg-red-'] {
    background: var(--sp-danger-500) !important;
    box-shadow: 0 8px 18px rgba(255, 71, 118, 0.16) !important;
}

.sp-admin-ui #panel-main-content button[class*='border-slate-300'],
.sp-admin-ui #panel-main-content a[class*='border-slate-300'],
.sp-admin-ui #panel-main-content .inline-flex[class*='border-slate-300'],
.sp-admin-ui #panel-main-content button[class*='border-slate-200'],
.sp-admin-ui #panel-main-content a[class*='border-slate-200'],
.sp-admin-ui #panel-main-content .inline-flex[class*='border-slate-200'],
.sp-auth-ui button[class*='border-slate-300'],
.sp-auth-ui .inline-flex[class*='border-slate-300'],
.sp-auth-ui a[class*='border-slate-200'],
.sp-auth-ui a[class*='border-slate-300'] {
    border-color: var(--sp-border-strong) !important;
    background: #ffffff !important;
    color: #445066 !important;
    box-shadow: none !important;
}

.sp-admin-ui #panel-main-content button[class*='border-slate-300']:hover,
.sp-admin-ui #panel-main-content a[class*='border-slate-300']:hover,
.sp-admin-ui #panel-main-content button[class*='border-slate-200']:hover,
.sp-admin-ui #panel-main-content a[class*='border-slate-200']:hover,
.sp-admin-ui #panel-main-content .inline-flex[class*='border-slate-300']:hover,
.sp-admin-ui #panel-main-content .inline-flex[class*='border-slate-200']:hover,
.sp-auth-ui button[class*='border-slate-300']:hover,
.sp-auth-ui .inline-flex[class*='border-slate-300']:hover,
.sp-auth-ui a[class*='border-slate-200']:hover,
.sp-auth-ui a[class*='border-slate-300']:hover {
    border-color: var(--sp-brand-200) !important;
    background: var(--sp-brand-50) !important;
    color: var(--sp-brand-700) !important;
}

.sp-admin-ui #panel-main-content a[class*='border-sky-200'],
.sp-admin-ui #panel-main-content button[class*='border-sky-200'],
.sp-admin-ui #panel-main-content .inline-flex[class*='border-sky-200'],
.sp-admin-ui #panel-main-content a[class*='border-indigo-200'],
.sp-admin-ui #panel-main-content button[class*='border-indigo-200'],
.sp-admin-ui #panel-main-content .inline-flex[class*='border-indigo-200'] {
    border-color: rgba(63, 109, 242, 0.26) !important;
    background: rgba(63, 109, 242, 0.08) !important;
    color: var(--sp-brand-700) !important;
    box-shadow: none !important;
}

.sp-admin-ui #panel-main-content a[class*='border-sky-200']:hover,
.sp-admin-ui #panel-main-content button[class*='border-sky-200']:hover,
.sp-admin-ui #panel-main-content .inline-flex[class*='border-sky-200']:hover,
.sp-admin-ui #panel-main-content a[class*='border-indigo-200']:hover,
.sp-admin-ui #panel-main-content button[class*='border-indigo-200']:hover,
.sp-admin-ui #panel-main-content .inline-flex[class*='border-indigo-200']:hover {
    border-color: rgba(63, 109, 242, 0.34) !important;
    background: rgba(63, 109, 242, 0.12) !important;
}

.sp-admin-ui #panel-main-content a[class*='border-emerald-200'],
.sp-admin-ui #panel-main-content button[class*='border-emerald-200'],
.sp-admin-ui #panel-main-content .inline-flex[class*='border-emerald-200'],
.sp-auth-ui a[class*='border-emerald-200'],
.sp-auth-ui .inline-flex[class*='border-emerald-200'] {
    border-color: rgba(22, 179, 138, 0.24) !important;
    background: var(--sp-success-bg) !important;
    color: #0f8b6b !important;
    box-shadow: none !important;
}

.sp-admin-ui #panel-main-content a[class*='border-rose-200'],
.sp-admin-ui #panel-main-content button[class*='border-rose-200'],
.sp-admin-ui #panel-main-content .inline-flex[class*='border-rose-200'],
.sp-admin-ui #panel-main-content a[class*='border-red-200'],
.sp-admin-ui #panel-main-content button[class*='border-red-200'],
.sp-admin-ui #panel-main-content .inline-flex[class*='border-red-200'],
.sp-auth-ui a[class*='border-rose-200'],
.sp-auth-ui .inline-flex[class*='border-rose-200'],
.sp-auth-ui a[class*='border-red-200'] {
    border-color: rgba(255, 71, 118, 0.26) !important;
    background: var(--sp-danger-bg) !important;
    color: #d52d60 !important;
    box-shadow: none !important;
}

.sp-admin-ui #panel-main-content a[class*='border-amber-200'],
.sp-admin-ui #panel-main-content button[class*='border-amber-200'],
.sp-admin-ui #panel-main-content .inline-flex[class*='border-amber-200'],
.sp-admin-ui #panel-main-content a[class*='border-orange-200'],
.sp-admin-ui #panel-main-content button[class*='border-orange-200'],
.sp-admin-ui #panel-main-content .inline-flex[class*='border-orange-200'] {
    border-color: rgba(246, 168, 74, 0.28) !important;
    background: var(--sp-warning-bg) !important;
    color: #cc7f20 !important;
    box-shadow: none !important;
}

.sp-admin-ui #panel-main-content table thead th {
    font-size: var(--sp-label-size) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

.sp-admin-ui #panel-main-content input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='file']),
.sp-admin-ui #panel-main-content select,
.sp-admin-ui #panel-main-content textarea,
.sp-admin-ui [data-superadmin-modal-fragment='1'] input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='file']),
.sp-admin-ui [data-superadmin-modal-fragment='1'] select,
.sp-admin-ui [data-superadmin-modal-fragment='1'] textarea,
.sp-auth-ui input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='file']),
.sp-auth-ui select,
.sp-auth-ui textarea {
    min-height: 3rem;
    padding: 0.78rem 0.95rem !important;
    border: 1px solid #d9e4f2 !important;
    background: var(--sp-surface-inset) !important;
    border-radius: 1rem !important;
    box-shadow: inset 0 1px 2px rgba(148, 163, 184, 0.04);
}

.sp-admin-ui #panel-main-content input::placeholder,
.sp-admin-ui #panel-main-content textarea::placeholder,
.sp-admin-ui [data-superadmin-modal-fragment='1'] input::placeholder,
.sp-admin-ui [data-superadmin-modal-fragment='1'] textarea::placeholder,
.sp-auth-ui input::placeholder,
.sp-auth-ui textarea::placeholder {
    color: #9aa7ba !important;
}

.sp-admin-ui #panel-main-content input:focus,
.sp-admin-ui #panel-main-content select:focus,
.sp-admin-ui #panel-main-content textarea:focus,
.sp-admin-ui [data-superadmin-modal-fragment='1'] input:focus,
.sp-admin-ui [data-superadmin-modal-fragment='1'] select:focus,
.sp-admin-ui [data-superadmin-modal-fragment='1'] textarea:focus,
.sp-auth-ui input:focus,
.sp-auth-ui select:focus,
.sp-auth-ui textarea:focus {
    border-color: #89a6ff !important;
    box-shadow: 0 0 0 4px rgba(63, 109, 242, 0.10) !important;
    outline: none !important;
}

.sp-admin-ui #panel-main-content .border-emerald-300,
.sp-admin-ui #panel-main-content .border-emerald-200,
.sp-admin-ui [data-superadmin-modal-fragment='1'] .border-emerald-200,
.sp-auth-ui .border-emerald-200 {
    border-color: rgba(25, 181, 141, 0.28) !important;
}

.sp-admin-ui #panel-main-content .border-rose-300,
.sp-admin-ui #panel-main-content .border-rose-200,
.sp-admin-ui #panel-main-content .border-red-200,
.sp-admin-ui [data-superadmin-modal-fragment='1'] .border-rose-200,
.sp-admin-ui [data-superadmin-modal-fragment='1'] .border-red-200,
.sp-auth-ui .border-red-200,
.sp-auth-ui .border-rose-200 {
    border-color: rgba(255, 71, 118, 0.34) !important;
}

.sp-admin-ui #panel-main-content .border-amber-300,
.sp-admin-ui #panel-main-content .border-amber-200 {
    border-color: rgba(246, 168, 74, 0.34) !important;
}

.sp-admin-ui #panel-main-content form label,
.sp-admin-ui [data-superadmin-modal-fragment='1'] form label,
.sp-auth-ui form label {
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #66758b !important;
}

.sp-admin-ui #panel-main-content form .text-slate-500,
.sp-admin-ui [data-superadmin-modal-fragment='1'] form .text-slate-500,
.sp-auth-ui form .text-slate-500 {
    color: #8b98ac !important;
}

.sp-admin-ui #panel-main-content form .text-emerald-700,
.sp-admin-ui [data-superadmin-modal-fragment='1'] form .text-emerald-700,
.sp-auth-ui form .text-emerald-700 {
    color: #139a77 !important;
}

.sp-admin-ui #panel-main-content form .text-rose-700,
.sp-admin-ui [data-superadmin-modal-fragment='1'] form .text-rose-700,
.sp-auth-ui form .text-rose-700 {
    color: #eb3b6e !important;
}

.sp-admin-ui #panel-main-content input[type='checkbox'],
.sp-admin-ui #panel-main-content input[type='radio'],
.sp-admin-ui [data-superadmin-modal-fragment='1'] input[type='checkbox'],
.sp-admin-ui [data-superadmin-modal-fragment='1'] input[type='radio'],
.sp-auth-ui input[type='checkbox'],
.sp-auth-ui input[type='radio'] {
    width: 1.05rem !important;
    height: 1.05rem !important;
    border-color: #cdd8e7 !important;
    accent-color: var(--sp-brand-600) !important;
    box-shadow: none !important;
}

.sp-admin-ui #panel-main-content input[type='checkbox'],
.sp-admin-ui [data-superadmin-modal-fragment='1'] input[type='checkbox'],
.sp-auth-ui input[type='checkbox'] {
    border-radius: 0.35rem !important;
}

.sp-admin-ui #panel-main-content input[type='radio'],
.sp-admin-ui [data-superadmin-modal-fragment='1'] input[type='radio'],
.sp-auth-ui input[type='radio'] {
    border-radius: 999px !important;
}

.sp-admin-ui #panel-main-content form .rounded-xl.border.bg-slate-50,
.sp-admin-ui #panel-main-content form .rounded-xl.border.bg-white,
.sp-admin-ui [data-superadmin-modal-fragment='1'] form .rounded-xl.border.bg-slate-50,
.sp-admin-ui [data-superadmin-modal-fragment='1'] form .rounded-xl.border.bg-white {
    border-color: var(--sp-border-soft) !important;
    background: #ffffff !important;
}

.sp-admin-ui #panel-main-content table,
.sp-admin-ui #panel-main-content table.min-w-full,
.sp-admin-ui #panel-main-content table.w-full {
    border-collapse: separate;
    border-spacing: 0;
}

.sp-admin-ui #panel-main-content .overflow-x-auto table thead,
.sp-admin-ui #panel-main-content table thead {
    background: #fbfcff;
}

.sp-admin-ui #panel-main-content table thead th {
    border-bottom: 1px solid var(--sp-border-soft) !important;
    color: #708099 !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.sp-admin-ui #panel-main-content table tbody tr {
    transition: background-color 160ms ease;
}

.sp-admin-ui #panel-main-content table tbody tr:hover {
    background: rgba(238, 243, 255, 0.62);
}

.sp-admin-ui #panel-main-content table tbody td {
    border-bottom-color: #eef3fb !important;
    color: var(--sp-text-soft);
}

.sp-admin-ui #panel-main-content table tbody td .inline-flex.rounded-full,
.sp-admin-ui #panel-main-content table tbody td span.rounded-full,
.sp-admin-ui #panel-main-content .rounded-full.border {
    padding: 0.3rem 0.65rem !important;
    border-radius: 999px !important;
}

.sp-admin-ui #panel-main-content table tbody td,
.sp-admin-ui #panel-main-content table tbody td p,
.sp-admin-ui #panel-main-content table tbody td span,
.sp-admin-ui #panel-main-content table tbody td a {
    font-size: 0.84375rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

.sp-admin-ui #panel-main-content table tbody td button,
.sp-admin-ui #panel-main-content table tbody td .inline-flex,
.sp-admin-ui #panel-main-content table tbody td a.rounded,
.sp-admin-ui #panel-main-content table tbody td a.rounded-lg,
.sp-admin-ui #panel-main-content table tbody td a.rounded-xl {
    font-size: var(--sp-label-size) !important;
    font-weight: 500 !important;
}

.sp-admin-ui #panel-main-content span.rounded-full,
.sp-admin-ui #panel-main-content a.rounded-full,
.sp-admin-ui #panel-main-content button.rounded-full,
.sp-auth-ui span.rounded-full,
.sp-auth-ui a.rounded-full,
.sp-auth-ui button.rounded-full {
    font-size: var(--sp-badge-size) !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
}

.sp-admin-ui #panel-main-content .bg-emerald-50,
.sp-auth-ui .bg-emerald-50 {
    background: var(--sp-success-bg) !important;
}

.sp-admin-ui #panel-main-content .bg-rose-50,
.sp-auth-ui .bg-rose-50,
.sp-auth-ui .bg-red-50 {
    background: var(--sp-danger-bg) !important;
}

.sp-admin-ui #panel-main-content .bg-amber-50,
.sp-admin-ui #panel-main-content .bg-orange-50 {
    background: var(--sp-warning-bg) !important;
}

.sp-admin-ui #panel-main-content .bg-indigo-50,
.sp-admin-ui #panel-main-content .bg-sky-50,
.sp-auth-ui .bg-brand-50 {
    background: var(--sp-info-bg) !important;
}

.sp-admin-ui #panel-main-content [class*='rounded-lg'][class*='border'][class*='bg-emerald-50'],
.sp-admin-ui #panel-main-content [class*='rounded-xl'][class*='border'][class*='bg-emerald-50'],
.sp-admin-ui #panel-main-content [class*='rounded-2xl'][class*='border'][class*='bg-emerald-50'],
.sp-admin-ui #panel-main-content [class*='rounded-lg'][class*='border'][class*='bg-rose-50'],
.sp-admin-ui #panel-main-content [class*='rounded-xl'][class*='border'][class*='bg-rose-50'],
.sp-admin-ui #panel-main-content [class*='rounded-2xl'][class*='border'][class*='bg-rose-50'],
.sp-admin-ui #panel-main-content [class*='rounded-lg'][class*='border'][class*='bg-amber-50'],
.sp-admin-ui #panel-main-content [class*='rounded-xl'][class*='border'][class*='bg-amber-50'],
.sp-admin-ui #panel-main-content [class*='rounded-2xl'][class*='border'][class*='bg-amber-50'],
.sp-admin-ui #panel-main-content [class*='rounded-lg'][class*='border'][class*='bg-indigo-50'],
.sp-admin-ui #panel-main-content [class*='rounded-xl'][class*='border'][class*='bg-indigo-50'],
.sp-admin-ui #panel-main-content [class*='rounded-2xl'][class*='border'][class*='bg-indigo-50'],
.sp-auth-ui [class*='rounded-2xl'][class*='border'][class*='bg-emerald-50'],
.sp-auth-ui [class*='rounded-2xl'][class*='border'][class*='bg-rose-50'] {
    border-radius: 1rem !important;
    box-shadow: 0 6px 16px rgba(148, 163, 184, 0.06) !important;
}

.sp-admin-ui #appSidebar {
    border-right-color: var(--sp-border-soft) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 18px 0 40px rgba(148, 163, 184, 0.08);
}

.sp-admin-ui #appSidebar .sidebar-nav-link {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    border-radius: 0.95rem !important;
}

.sp-admin-ui #appSidebar .sidebar-nav-link span:last-child {
    font-weight: 500 !important;
}

.sp-admin-ui #appSidebar .sidebar-nav-link.bg-slate-900,
.sp-admin-ui #appSidebar button.bg-slate-900 {
    background: var(--sp-brand-600) !important;
    color: #ffffff !important;
    box-shadow: var(--sp-shadow-button) !important;
}

.sp-admin-ui #appSidebar .sidebar-nav-link.text-slate-700:hover,
.sp-admin-ui #appSidebar button.text-slate-700:hover {
    background: var(--sp-brand-50) !important;
    color: var(--sp-brand-700) !important;
}

.sp-admin-ui #sidebarSuscripcionesSubmenu .sidebar-nav-link {
    border-radius: 0.9rem !important;
    background: transparent !important;
    color: #334155 !important;
    box-shadow: none !important;
}

.sp-admin-ui #sidebarSuscripcionesSubmenu .sidebar-nav-link.bg-slate-100,
.sp-admin-ui #sidebarSuscripcionesToggle.bg-slate-100 {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    box-shadow: none !important;
}

.sp-admin-ui #sidebarSuscripcionesSubmenu .sidebar-nav-link.bg-slate-900,
.sp-admin-ui #sidebarSuscripcionesSubmenu .sidebar-nav-link.text-white,
.sp-admin-ui #sidebarSuscripcionesSubmenu .sidebar-nav-link.shadow-sm {
    background: transparent !important;
    color: #334155 !important;
    box-shadow: none !important;
}

.sp-admin-ui #sidebarSuscripcionesSubmenu .sidebar-nav-link:hover {
    background: var(--sp-brand-50) !important;
    color: var(--sp-brand-700) !important;
}

.sp-admin-ui #sidebarSuscripcionesSubmenu .sidebar-nav-link.bg-slate-100:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

.sp-admin-ui #appSidebar .text-xs,
.sp-admin-ui #appSidebar .text-\[0\.7rem\] {
    font-size: var(--sp-badge-size) !important;
    line-height: 1.35 !important;
}

.sp-admin-ui #sidebarUserMenuToggle,
.sp-admin-ui #sidebarUserDropdown {
    border-radius: 1rem !important;
}

.sp-admin-ui #sidebarUserDropdown {
    border-color: var(--sp-border-soft) !important;
    box-shadow: var(--sp-shadow-card) !important;
}

.sp-admin-ui #appMobileTopbar p,
.sp-admin-ui #appMobileTopbar span {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

.sp-admin-ui #spGlobalModalTitle {
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

.sp-admin-ui #spGlobalModal .relative.z-10,
.sp-admin-ui [data-superadmin-modal-fragment='1'],
.sp-admin-ui #panel-main-content [id$='-modal'] > .pointer-events-auto,
.sp-admin-ui #panel-main-content [id$='-modal'] > .relative {
    border-radius: 1.2rem !important;
    border-color: var(--sp-border-soft) !important;
    overflow: hidden !important;
    box-shadow: var(--sp-shadow-card-strong) !important;
}

.sp-admin-ui #spGlobalModal .border-b,
.sp-admin-ui [data-superadmin-modal-fragment='1'] > .flex.items-start.justify-between,
.sp-admin-ui [data-superadmin-modal-fragment='1'] > .flex.items-center.justify-between,
.sp-admin-ui #panel-main-content [id$='-modal'] .border-b {
    border-bottom-color: #1f2937 !important;
    background: var(--sp-dark-900) !important;
    color: #ffffff !important;
    padding: var(--sp-modal-pad-y) var(--sp-modal-pad-x) !important;
}

.sp-admin-ui #spGlobalModalTitle,
.sp-admin-ui [data-superadmin-modal-fragment='1'] h2,
.sp-admin-ui [data-superadmin-modal-fragment='1'] p.text-xs {
    color: #ffffff !important;
}

.sp-admin-ui #spGlobalModal .absolute.inset-0,
.sp-admin-ui #panel-main-content [id$='-modal'] > .absolute.inset-0 {
    background: rgba(15, 23, 42, 0.56) !important;
    backdrop-filter: blur(2px);
}

.sp-admin-ui #spGlobalModal button[data-sp-modal-close='1'],
.sp-admin-ui [data-superadmin-modal-fragment='1'] button[data-suscripciones-modal-close='1'],
.sp-admin-ui [data-superadmin-modal-fragment='1'] button[data-tenant-modal-close='1'],
.sp-admin-ui [data-superadmin-modal-fragment='1'] button[data-usuarios-modal-close='1'] {
    color: #34d399 !important;
}

.sp-admin-ui #spGlobalModal button[data-sp-modal-close='1']:hover,
.sp-admin-ui [data-superadmin-modal-fragment='1'] button[data-suscripciones-modal-close='1']:hover,
.sp-admin-ui [data-superadmin-modal-fragment='1'] button[data-tenant-modal-close='1']:hover,
.sp-admin-ui [data-superadmin-modal-fragment='1'] button[data-usuarios-modal-close='1']:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #6ee7b7 !important;
}

.sp-admin-ui #spGlobalModalBody > div[class*='rounded'],
.sp-admin-ui [data-superadmin-modal-fragment='1'] [class*='rounded-xl'][class*='border'] {
    border-color: var(--sp-border-soft);
}

.sp-admin-ui #spGlobalModalBody,
.sp-admin-ui [data-suscripciones-modal-body='1'],
.sp-admin-ui [data-tenant-modal-body='1'],
.sp-admin-ui [data-usuarios-modal-body='1'],
.sp-admin-ui #admins-tenant-modal .max-h-\[75vh\].overflow-y-auto,
.sp-admin-ui #superadmin-notificaciones-modal .space-y-4.px-5.py-4,
.sp-admin-ui #panel-main-content #entrada-modal > .relative.z-10,
.sp-admin-ui #panel-main-content #salida-modal > .relative.z-10,
.sp-admin-ui #panel-main-content #detalle-modal > .relative.z-10,
.sp-admin-ui #panel-main-content #evidencia-viewer-modal > .relative.z-10,
.sp-admin-ui #panel-main-content #ticket-modal > .relative.z-10 {
    padding: var(--sp-modal-pad-body-y) var(--sp-modal-pad-body-x) !important;
}

.sp-admin-ui #spGlobalModal .relative.z-10,
.sp-admin-ui [data-superadmin-modal-fragment='1'],
.sp-admin-ui #panel-main-content [id$='-modal'] > .pointer-events-auto,
.sp-admin-ui #panel-main-content [id$='-modal'] > .relative,
.sp-admin-ui #admins-tenant-modal > .w-full.max-w-2xl,
.sp-admin-ui #superadmin-notificaciones-modal > .w-full.max-w-2xl {
    border-radius: 1.2rem !important;
    border-color: var(--sp-border-soft) !important;
    overflow: hidden !important;
    box-shadow: var(--sp-shadow-card-strong) !important;
}

.sp-admin-ui #admins-tenant-modal .border-t,
.sp-admin-ui #superadmin-notificaciones-modal .border-t,
.sp-admin-ui #panel-main-content [id$='-modal'] > .relative .border-t,
.sp-admin-ui #panel-main-content [id$='-modal'] > .pointer-events-auto .border-t {
    padding: var(--sp-modal-pad-footer-y) var(--sp-modal-pad-x) !important;
}

.sp-admin-ui #panel-main-content #salida-modal > .relative.z-10 h2 + p,
.sp-admin-ui #panel-main-content #ticket-modal > .relative.z-10 #ticket-body-scroll,
.sp-admin-ui #panel-main-content #detalle-modal > .relative.z-10 > dl,
.sp-admin-ui #panel-main-content #evidencia-viewer-modal > .relative.z-10 > .relative.flex {
    margin-top: 1rem !important;
}

.sp-admin-ui #panel-main-content #ticket-content,
.sp-admin-ui #panel-main-content #ticket-content * {
    background: #ffffff !important;
}

.sp-admin-ui #panel-main-content #ticket-content dl > div,
.sp-admin-ui #panel-main-content #ticket-content dl > div.border-b,
.sp-admin-ui #panel-main-content #ticket-content dl > div.hidden.items-start.justify-between {
    padding: 0 0 0.375rem 0 !important;
    border-bottom-color: #e2e8f0 !important;
    color: inherit !important;
    box-shadow: none !important;
}

.sp-admin-ui #panel-main-content #ticket-content dt {
    color: #64748b !important;
    background: transparent !important;
}

.sp-admin-ui #panel-main-content #ticket-content dd,
.sp-admin-ui #panel-main-content #ticket-content h3,
.sp-admin-ui #panel-main-content #ticket-content p,
.sp-admin-ui #panel-main-content #ticket-content span {
    color: #0f172a !important;
    background: transparent !important;
}

.sp-admin-ui #panel-main-content #ticket-barcode-wrap,
.sp-admin-ui #panel-main-content #ticket-barcode {
    background: #ffffff !important;
}

.sp-admin-ui #spGlobalModalBody,
.sp-admin-ui #spGlobalToastStack,
.sp-auth-ui #spGlobalToastStack {
    font-size: var(--sp-body-size) !important;
}

.sp-admin-ui #spGlobalToastStack > div,
.sp-auth-ui #spGlobalToastStack > div {
    border-radius: 1rem !important;
    box-shadow: var(--sp-shadow-card) !important;
}

.sp-admin-ui #spGlobalToastStack > div button,
.sp-auth-ui #spGlobalToastStack > div button {
    border-radius: 0.65rem !important;
}

.sp-admin-ui [id$='-footer'] button,
.sp-admin-ui [id$='-footer'] span,
.sp-admin-ui [id$='-footer'] a {
    font-size: 0.8125rem !important;
}

.sp-admin-ui [id$='-footer'] button {
    border-radius: 0.75rem !important;
    border-color: var(--sp-border-soft) !important;
    background: #ffffff !important;
}

.sp-admin-ui [id$='-footer'] button:hover {
    border-color: var(--sp-brand-200) !important;
    background: var(--sp-brand-50) !important;
    color: var(--sp-brand-700) !important;
}

.sp-admin-ui [id$='-footer'] a,
.sp-admin-ui [id$='-footer'] .inline-flex,
.sp-admin-ui #panel-main-content nav[aria-label*='pagin'] a,
.sp-admin-ui #panel-main-content nav[aria-label*='Pagin'] a {
    border-radius: 0.8rem !important;
}

.sp-admin-ui [id$='-footer'] .font-semibold,
.sp-auth-ui .font-semibold {
    font-weight: 500 !important;
}

.sp-admin-ui #panel-main-content [class*='rounded-full'][class*='bg-brand-700'],
.sp-admin-ui #panel-main-content [class*='rounded-full'][class*='bg-sky-600'] {
    background: var(--sp-brand-600) !important;
}

.sp-admin-ui #panel-main-content hr,
.sp-auth-ui hr {
    border-color: #edf2f9 !important;
}

.sp-admin-ui #panel-main-content [class*='text-slate-500'],
.sp-auth-ui [class*='text-slate-500'] {
    color: #7b8aa1 !important;
}

.sp-admin-ui #panel-main-content [class*='text-slate-600'],
.sp-auth-ui [class*='text-slate-600'] {
    color: #617086 !important;
}

.sp-admin-ui #panel-main-content [class*='text-slate-700'],
.sp-auth-ui [class*='text-slate-700'] {
    color: #3f4c62 !important;
}

.sp-admin-ui #panel-main-content [class*='font-semibold'],
.sp-admin-ui #appSidebar .font-semibold,
.sp-auth-ui .font-semibold {
    font-weight: 600 !important;
}

@media (max-width: 768px) {
    .sp-admin-ui #panel-main-content h1,
    .sp-auth-ui h1,
    .sp-admin-ui .page-title,
    .sp-auth-ui .page-title {
        font-size: 1.25rem !important;
    }

    .sp-admin-ui #panel-main-content .text-4xl:not(h1),
    .sp-admin-ui #panel-main-content .text-3xl:not(h1),
    .sp-admin-ui .metric-value,
    .sp-auth-ui .metric-value {
        font-size: 1.5rem !important;
    }

    .sp-admin-ui #panel-main-content {
        padding: 1rem !important;
    }

    .sp-admin-ui #suscripciones-tabs-header,
    .sp-admin-ui #suscripciones-tabs-panels {
        padding-left: 0.9rem !important;
        padding-right: 0.9rem !important;
    }

    .sp-admin-ui .suscripciones-tab-button {
        width: 100%;
        justify-content: center;
    }

    .sp-admin-ui .suscripciones-panel-hero {
        padding: 1rem;
    }

    .sp-admin-ui .suscripciones-panel-title {
        font-size: 1rem;
    }

    .sp-admin-ui #spGlobalModalBody,
    .sp-admin-ui [data-suscripciones-modal-body='1'],
    .sp-admin-ui [data-tenant-modal-body='1'],
    .sp-admin-ui [data-usuarios-modal-body='1'],
    .sp-admin-ui #admins-tenant-modal .max-h-\[75vh\].overflow-y-auto,
    .sp-admin-ui #superadmin-notificaciones-modal .space-y-4.px-5.py-4,
    .sp-admin-ui #panel-main-content #entrada-modal > .relative.z-10,
    .sp-admin-ui #panel-main-content #salida-modal > .relative.z-10,
    .sp-admin-ui #panel-main-content #detalle-modal > .relative.z-10,
    .sp-admin-ui #panel-main-content #evidencia-viewer-modal > .relative.z-10,
    .sp-admin-ui #panel-main-content #ticket-modal > .relative.z-10 {
        padding: 1.2rem 1.05rem !important;
    }

    .sp-admin-ui #spGlobalModal .border-b,
    .sp-admin-ui [data-superadmin-modal-fragment='1'] > .flex.items-start.justify-between,
    .sp-admin-ui [data-superadmin-modal-fragment='1'] > .flex.items-center.justify-between,
    .sp-admin-ui #panel-main-content [id$='-modal'] .border-b,
    .sp-admin-ui #admins-tenant-modal .border-t,
    .sp-admin-ui #superadmin-notificaciones-modal .border-t,
    .sp-admin-ui #panel-main-content [id$='-modal'] > .relative .border-t,
    .sp-admin-ui #panel-main-content [id$='-modal'] > .pointer-events-auto .border-t {
        padding-left: 1.05rem !important;
        padding-right: 1.05rem !important;
    }
}