/* 24racks Cloud — components: reusable UI primitives (buttons, badges, alerts, forms, tables, utilities) */

/* ── Cards ─────────────────────────────────────────────────── */
.rack-card,
.card {
    color: var(--text-2);
    background: var(--bg-raised);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}

.rack-card:hover,
.card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-hover);
}

.rack-card--accent {
    border-left: 3px solid var(--brand);
}

.rack-card--warm {
    border-color: rgba(184, 121, 57, .24);
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn,
.landing-btn,
button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 17px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 720;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--transition-base), background var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

.btn:hover,
.landing-btn:hover {
    transform: translateY(-1px);
}

.btn-primary,
.landing-btn-primary,
.btn-warm {
    color: #fff;
    background: var(--brand-hover);
    border-color: var(--brand-hover);
    box-shadow: var(--shadow-btn);
}

.btn-primary:hover,
.landing-btn-primary:hover,
.btn-warm:hover {
    color: #fff;
    background: var(--blue-active);
    border-color: var(--blue-active);
}

.btn-secondary,
.landing-btn-secondary {
    color: var(--text-1);
    background: rgba(255, 255, 255, .58);
    border-color: var(--border);
}

:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .landing-btn-secondary {
    color: var(--text-1);
    background: rgba(255, 255, 255, .06);
    border-color: var(--border);
}

.btn-secondary:hover,
.landing-btn-secondary:hover {
    color: var(--brand);
    border-color: var(--blue-border);
    background: var(--brand-soft-2);
}

:root[data-theme="dark"] .btn-secondary:hover,
:root[data-theme="dark"] .landing-btn-secondary:hover {
    color: var(--blue-text);
    background: rgba(255, 255, 255, .09);
}

.btn-ghost {
    color: var(--text-2);
    background: transparent;
    border-color: transparent;
}

.btn-ghost:hover {
    color: var(--text-1);
    background: var(--bg-hover);
}

.btn-danger {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: rgba(184, 74, 58, .22);
}

.btn-success {
    color: var(--green);
    background: var(--green-soft);
    border-color: rgba(78, 118, 86, .22);
}

.btn-warning {
    color: var(--warm);
    background: var(--warm-soft);
    border-color: rgba(184, 121, 57, .22);
}

.btn-sm {
    min-height: 34px;
    padding: 8px 13px;
    font-size: 12px;
}

.btn-lg {
    min-height: 46px;
    padding: 12px 22px;
    font-size: 14px;
}

/* ── Badges & pills ────────────────────────────────────────── */
.badge,
.status-badge,
.glow-pill,
.warm-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    padding: 5px 10px;
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-pill);
    color: var(--text-2);
    background: var(--surface-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}

.status-badge::before,
.glow-pill::before,
.warm-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.status-badge--online,
.badge-success {
    color: var(--green);
    background: var(--green-soft);
    border-color: rgba(78, 118, 86, .25);
}

.status-badge--warning,
.badge-warning {
    color: var(--warm);
    background: var(--warm-soft);
    border-color: rgba(184, 121, 57, .25);
}

.status-badge--offline,
.status-badge--danger,
.badge-danger {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: rgba(184, 74, 58, .25);
}

.status-badge--info,
.status-badge--warm,
.badge-blue {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: var(--blue-border);
}

:root[data-theme="dark"] .status-badge--info,
:root[data-theme="dark"] .status-badge--warm,
:root[data-theme="dark"] .badge-blue {
    color: var(--blue-text);
    background: var(--blue-dim);
}

.badge-neutral {
    color: var(--text-3);
    background: var(--surface-muted);
    border-color: var(--border-dim);
}

.pulse-dot,
.live-dot,
.led-indicator {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    animation: pulse 2.4s ease-in-out infinite;
}

.led-cyan { background: var(--brand); }
.led-emerald { background: var(--green); }
.led-rose { background: var(--danger); }

/* ── Alerts ────────────────────────────────────────────────── */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border-dim);
    border-left-width: 3px;
    border-radius: var(--radius-md);
    color: var(--text-2);
    background: var(--bg-raised);
    font-size: 13px;
}

.alert-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 2px;
}

.alert-info,
.alert-warm {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: var(--blue-border);
}

.alert-success {
    color: var(--green);
    background: var(--green-soft);
    border-color: rgba(78, 118, 86, .28);
}

.alert-warning {
    color: var(--warm);
    background: var(--warm-soft);
    border-color: rgba(184, 121, 57, .28);
}

.alert-danger {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: rgba(184, 74, 58, .28);
}

:root[data-theme="dark"] .alert-info,
:root[data-theme="dark"] .alert-warm {
    color: var(--blue-text);
    background: var(--blue-dim);
}

/* Alert refinements (slimmer, with title) */
.alert {
    border-radius: var(--radius-md);
}

.alert-title {
    color: inherit;
    font-size: 13.5px;
    font-weight: 760;
    margin: 0 0 2px;
}

.alert-body {
    color: var(--text-2);
    font-size: 12.5px;
    line-height: 1.5;
    flex: 1;
    min-width: 0;
}

.alert-body p { margin: 0; color: inherit; }

/* ── Form inputs & selects ─────────────────────────────────── */
input,
select,
textarea {
    width: 100%;
    color: var(--text-1) !important;
    background: var(--bg-raised) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body);
    font-size: 14px;
    outline: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--brand) !important;
    box-shadow: var(--shadow-focus) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-3) !important;
}

select option,
select optgroup {
    color: var(--ink) !important;
    background: var(--paper) !important;
}

:root[data-theme="dark"] select,
:root[data-theme="dark"] select:focus {
    color-scheme: dark;
}

:root[data-theme="dark"] select option,
:root[data-theme="dark"] select optgroup,
:root[data-theme="dark"] select:focus option,
:root[data-theme="dark"] select:focus optgroup {
    color: #F7F3EA !important;
    background: #171B23 !important;
}

:root[data-theme="dark"] select option:checked {
    color: #FFFFFF !important;
    background: #3b82f6 !important;
}

/* ── Tables (base) ─────────────────────────────────────────── */
table {
    width: 100%;
    border-collapse: collapse;
}

thead th {
    padding: 0 16px 12px;
    border-bottom: 1px solid var(--border-dim) !important;
    color: var(--text-3) !important;
    background: transparent !important;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
}

tbody tr {
    border-bottom: 1px solid var(--border-dim);
    transition: background var(--transition-base);
}

tbody tr:last-child {
    border-bottom: none;
}

tbody tr:hover {
    background: var(--bg-hover) !important;
}

tbody td {
    padding: 13px 16px;
    color: var(--text-2);
    font-size: 13px;
}

.td-name {
    color: var(--text-1) !important;
    font-weight: 650;
}

.td-mono {
    font-family: var(--font-mono);
    font-size: 11px;
}

/* ── Tailwind text/bg overrides ────────────────────────────── */
.text-gray-900,
.text-slate-900,
.text-white {
    color: var(--text-1) !important;
}

.text-gray-500,
.text-slate-400 {
    color: var(--text-2) !important;
}

.text-blue-300,
.text-blue-400,
.text-blue-500 {
    color: var(--brand) !important;
}

:root[data-theme="dark"] .text-blue-300,
:root[data-theme="dark"] .text-blue-400,
:root[data-theme="dark"] .text-blue-500 {
    color: var(--blue-text) !important;
}

.border-white\/5,
.border-white\/8,
.border-white\/10 {
    border-color: var(--border-dim) !important;
}

.bg-white,
.dark .dark\:bg-gray-800,
.dark .dark\:bg-gray-700 {
    background-color: var(--bg-raised) !important;
}

.bg-gray-50,
.bg-gray-100,
.dark .dark\:bg-gray-900 {
    background-color: var(--surface-muted) !important;
}

.hover\:bg-gray-100:hover,
.dark .dark\:hover\:bg-gray-700:hover,
.dark .dark\:hover\:bg-gray-600:hover {
    background-color: var(--bg-hover) !important;
}

.border-gray-100,
.border-gray-200,
.border-gray-300,
.dark .dark\:border-gray-500,
.dark .dark\:border-gray-600,
.dark .dark\:border-gray-700 {
    border-color: var(--border-dim) !important;
}

.divide-gray-200 > :not([hidden]) ~ :not([hidden]),
.dark .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]),
.divide-white\/5 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--border-dim) !important;
}

.shadow,
.shadow-sm,
.shadow-md,
.shadow-lg {
    box-shadow: var(--shadow-card) !important;
}

.bg-primary-600,
.bg-primary-700,
.bg-blue-600,
.bg-blue-700 {
    background-color: var(--brand) !important;
    color: #fff !important;
}

.hover\:bg-primary-700:hover,
.hover\:bg-primary-800:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-blue-800:hover,
.dark .dark\:hover\:bg-primary-700:hover,
.dark .dark\:hover\:bg-blue-700:hover {
    background-color: var(--brand-hover) !important;
    color: #fff !important;
}

.text-primary-400,
.text-primary-500,
.text-primary-600,
.text-primary-700,
.text-blue-600,
.text-blue-700 {
    color: var(--brand) !important;
}

:root[data-theme="dark"] .text-primary-400,
:root[data-theme="dark"] .text-primary-500,
:root[data-theme="dark"] .text-primary-600,
:root[data-theme="dark"] .text-primary-700,
:root[data-theme="dark"] .text-blue-600,
:root[data-theme="dark"] .text-blue-700 {
    color: var(--blue-text) !important;
}

.bg-white\/3,
.bg-white\/5,
.bg-blue-950\/40 {
    background-color: var(--bg-raised) !important;
}

/* ── Stat-card icon family + section title + dividers ──────── */
.stat-card-icon,
.feat-icon,
.feat-check,
.rnav-dropdown-item-icon,
.service-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid var(--blue-border);
    border-radius: var(--radius-md);
}

:root[data-theme="dark"] .stat-card-icon,
:root[data-theme="dark"] .feat-icon,
:root[data-theme="dark"] .feat-check,
:root[data-theme="dark"] .rnav-dropdown-item-icon,
:root[data-theme="dark"] .service-icon-wrapper {
    color: var(--blue-text);
    background: var(--blue-dim);
}

.stat-card-icon {
    width: 38px;
    height: 38px;
}

.stat-card-value {
    margin: 4px 0;
    color: var(--text-1);
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 820;
    letter-spacing: 0;
    line-height: 1.1;
}

.stat-card-label,
.profile-meta-label,
.section-title-meta {
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.stat-card-meta,
.profile-meta-value {
    color: var(--text-2);
    font-size: 13px;
}

.profile-meta-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--brand);
    font-size: 13px;
    font-weight: 650;
}

.section-divider,
.divider {
    height: 1px;
    margin: 1.5rem 0;
    background: var(--border-dim);
}

/* ── Misc primitives (eyebrow, border-subtle, gradient text) ─ */
.text-gradient-blue,
.text-gradient-warm,
.text-gradient-brand,
.text-gradient-shimmer {
    color: var(--text-1);
}

.eyebrow {
    margin-bottom: 12px;
    color: var(--brand);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.border-subtle {
    border-color: var(--border-dim) !important;
}

/* ── Segmented control ─────────────────────────────────────── */
.segmented {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    background: var(--surface-muted);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-pill);
}

.segmented button,
.segmented a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--text-2);
    background: transparent;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 660;
    line-height: 1;
    cursor: pointer;
    transition: color var(--transition-base), background var(--transition-base);
}

.segmented button:hover,
.segmented a:hover {
    color: var(--text-1);
}

.segmented button.is-active,
.segmented a.is-active,
.segmented [aria-selected="true"] {
    color: var(--text-1);
    background: var(--bg-raised);
    box-shadow: 0 0 0 1px var(--border-dim);
}

:root[data-theme="dark"] .segmented button.is-active,
:root[data-theme="dark"] .segmented a.is-active,
:root[data-theme="dark"] .segmented [aria-selected="true"] {
    background: rgba(255, 255, 255, .075);
}

/* ── Tags ──────────────────────────────────────────────────── */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    color: var(--text-2);
    background: var(--surface-muted);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
}

.tag-brand {
    color: var(--brand);
    background: var(--brand-soft-2);
    border-color: var(--blue-border);
}

:root[data-theme="dark"] .tag-brand {
    color: var(--blue-text);
    background: var(--blue-dim);
}

/* ── Keyboard chip ─────────────────────────────────────────── */
kbd, .kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    color: var(--text-2);
    background: var(--surface-muted);
    border: 1px solid var(--border-dim);
    border-bottom-width: 2px;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
}

/* ── Livewire loading + container + stack utilities ────────── */
[wire\:loading] {
    opacity: .6;
    pointer-events: none;
    transition: opacity .15s ease;
}

/* ── Tweak default Tailwind container width inside main ── */
main > .max-w-screen-xl {
    width: min(100% - 32px, 1280px) !important;
    max-width: none !important;
}

/* ── Section gap utility ── */
.stack-lg > * + * { margin-top: 28px; }
.stack-md > * + * { margin-top: 18px; }
.stack-sm > * + * { margin-top: 10px; }

/* ── Anti-AI: kill gradient text effects ───────────────────── */
.bg-gradient-to-r,
.bg-gradient-to-l,
.bg-gradient-to-br,
.bg-gradient-to-bl {
    background: transparent !important;
}

/* ── Quick-action chips ────────────────────────────────────── */
.qa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.qa-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    color: var(--text-1);
    background: var(--bg-raised);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-pill);
    font-size: 12.5px;
    font-weight: 660;
    transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base);
}

.qa-chip svg {
    width: 14px;
    height: 14px;
    color: var(--brand);
    transition: transform var(--transition-base);
}

.qa-chip:hover {
    color: var(--brand);
    border-color: var(--blue-border);
    background: var(--brand-soft-2);
}

:root[data-theme="dark"] .qa-chip:hover {
    color: var(--blue-text);
    background: var(--blue-dim);
}

.qa-chip:hover svg {
    transform: translateX(2px);
}

/* ── Mini-sparkline placeholder ────────────────────────────── */
.spark {
    display: inline-block;
    height: 22px;
    width: 100%;
    margin-top: 6px;
    background:
        linear-gradient(180deg, transparent 60%, rgba(59, 130, 246, .12) 100%),
        repeating-linear-gradient(90deg, transparent 0 6px, rgba(59, 130, 246, .12) 6px 7px);
    mask: linear-gradient(180deg, transparent 0, #000 30%, #000 100%);
    -webkit-mask: linear-gradient(180deg, transparent 0, #000 30%, #000 100%);
    opacity: .68;
}

/* ── Typography primitives (x-theme::text.*) ───────────────── */
.rack-prose-p {
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.6;
}

.rack-h1, .rack-h2, .rack-h3, .rack-h4, .rack-h5, .rack-h6 {
    color: var(--text-1);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.rack-h1 { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; }
.rack-h2 { font-size: 28px; }
.rack-h3 { font-size: 22px; }
.rack-h4 { font-size: 18px; }
.rack-h5 { font-size: 16px; }
.rack-h6 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }

.rack-link {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-base);
}
.rack-link:hover {
    color: var(--brand-hover);
    text-decoration: underline;
}

/* ── Flowbite drawer backdrop: disabled ─────────────────────── */
/* Flowbite inyecta dinámicamente un <div drawer-backdrop class="bg-gray-900/50 */
/* dark:bg-gray-900/80 fixed inset-0 z-30"> al abrir cualquier drawer. Eso     */
/* oscurecía la página y se colaba por el `backdrop-filter` del header. En 24racks */
/* no queremos ese velo — el drawer flota limpio sobre la página.              */
[drawer-backdrop] {
    display: none !important;
}

/* ── Drawer (x-theme::drawer.*) ─────────────────────────────── */
/* Shell: flex column con header sticky, body scrollable y footer pegado.   */
/* Acento sutil a la izquierda y gradiente cálido en la esquina superior   */
/* derecha (luz brand). Sin sombras, alineado con la regla anti-AI.        */
.rack-drawer {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--paper);
    background-image:
        radial-gradient(140% 70% at 100% 0%, rgba(59, 130, 246, .055), transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, transparent 28%);
    border-left: 1px solid var(--line);
    color: var(--text-1);
    overflow: hidden;
    transition: transform 340ms cubic-bezier(.22, 1, .36, 1);
    isolation: isolate;
}

@media (min-width: 640px) {
    .rack-drawer {
        width: 460px;
        max-width: 92vw;
    }
}

.rack-drawer::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand) 28%, transparent 100%);
    opacity: .55;
    pointer-events: none;
    z-index: 1;
}

.rack-drawer__header {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 28px 18px;
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(180deg, rgba(247, 243, 234, .96), rgba(247, 243, 234, .82));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    flex-shrink: 0;
}

.rack-drawer__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px 28px 28px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.rack-drawer__body--legacy {
    position: relative;
    padding: 24px;
}

.rack-drawer__body::-webkit-scrollbar { width: 6px; }
.rack-drawer__body::-webkit-scrollbar-track { background: transparent; }
.rack-drawer__body::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 999px;
}
.rack-drawer__body::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
}

.rack-drawer__footer {
    position: relative;
    padding: 18px 28px 22px;
    border-top: 1px solid var(--line);
    background:
        linear-gradient(0deg, rgba(247, 243, 234, .98), rgba(247, 243, 234, .86));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Title group ─ eyebrow + título refinado ──────────────────── */
.rack-drawer-title-group {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rack-drawer-eyebrow {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand);
}

.rack-drawer-title {
    margin: 0;
    color: var(--text-1);
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 760;
    letter-spacing: -.014em;
    line-height: 1.28;
}

/* Legacy layout: título inline al inicio del body sin header ─ */
.rack-drawer__body--legacy > .rack-drawer-title,
.rack-drawer__body--legacy > .rack-drawer-title-group {
    margin-bottom: 16px;
    padding-right: 44px; /* deja sitio al botón de cerrar absoluto */
}

/* Close button ─ pill ghost que funciona en header y legacy ── */
.rack-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .55);
    color: var(--text-2);
    cursor: pointer;
    transition:
        color var(--transition-base),
        background var(--transition-base),
        border-color var(--transition-base),
        transform var(--transition-base);
}

.rack-drawer-close:hover {
    color: var(--text-1);
    background: var(--bg-hover);
    border-color: var(--blue-border);
}

.rack-drawer-close:active {
    transform: scale(.94);
}

.rack-drawer-close svg {
    width: 11px;
    height: 11px;
}

/* En layout legacy, el botón flota arriba a la derecha del drawer. */
.rack-drawer__body--legacy > .rack-drawer-close {
    position: absolute;
    top: 18px;
    right: 18px;
}

/* En layout estructurado, está dentro del header en flujo flex. */
.rack-drawer__header .rack-drawer-close {
    margin-top: 2px;
}

/* Bloque resumen reutilizable dentro de drawers (totales, KPIs) */
.rack-drawer-summary {
    margin: 4px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .42);
}

.rack-drawer-summary .rack-summary-row + .rack-summary-row {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-dim);
}

/* Helper para el párrafo de descripción bajo el header. */
.rack-drawer-desc {
    margin: 0 0 22px;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.55;
}

/* ── Drawer dark-mode overrides ─────────────────────────────── */
/* El drawer hardcodea fondos en `--paper` (RGBs 247,243,234) por los         */
/* gradientes — no usan tokens. En modo oscuro hay que pintarlos sobre ink   */
/* y suavizar el highlight blanco para que no aparezca como un velo lechoso. */
:root[data-theme="dark"] .rack-drawer {
    background: var(--bg-root);
    background-image:
        radial-gradient(140% 70% at 100% 0%, rgba(59, 130, 246, .09), transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, .035) 0%, transparent 28%);
    border-left-color: var(--border-dim);
}

:root[data-theme="dark"] .rack-drawer::before {
    opacity: .62;
}

:root[data-theme="dark"] .rack-drawer__header {
    background:
        linear-gradient(180deg, rgba(13, 17, 23, .96), rgba(13, 17, 23, .82));
    border-bottom-color: var(--border-dim);
}

:root[data-theme="dark"] .rack-drawer__footer {
    background:
        linear-gradient(0deg, rgba(13, 17, 23, .98), rgba(13, 17, 23, .86));
    border-top-color: var(--border-dim);
}

:root[data-theme="dark"] .rack-drawer-eyebrow {
    color: var(--blue-text);
}

:root[data-theme="dark"] .rack-drawer-close {
    background: rgba(255, 255, 255, .04);
    border-color: var(--border-dim);
}

:root[data-theme="dark"] .rack-drawer-close:hover {
    background: rgba(255, 255, 255, .08);
    border-color: var(--blue-border);
}

:root[data-theme="dark"] .rack-drawer-summary {
    background: rgba(255, 255, 255, .03);
    border-color: var(--border-dim);
}

:root[data-theme="dark"] .rack-drawer-summary .rack-summary-row + .rack-summary-row {
    border-top-color: var(--border-dim);
}

/* ── Form primitives (x-theme::form.*) ─────────────────────── */
.rack-label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-1);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rack-input,
.rack-select,
.rack-textarea {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-1);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}

.rack-input::placeholder,
.rack-textarea::placeholder {
    color: var(--text-3);
}

.rack-input:hover,
.rack-select:hover,
.rack-textarea:hover {
    border-color: var(--border-strong);
}

.rack-input:focus,
.rack-select:focus,
.rack-textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}

.rack-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2390887B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.rack-textarea {
    min-height: 96px;
    line-height: 1.55;
    resize: vertical;
}

.rack-form-help {
    margin-top: 6px;
    color: var(--text-3);
    font-size: 12px;
    line-height: 1.5;
}

.rack-form-error {
    margin-top: 6px;
    color: #ef4444;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

:root[data-theme="dark"] .rack-form-error {
    color: #f87171;
}

/* ── User dropdown badge (inbox count) ─────────────────────── */
/* defined in header.css */

/* ── File input ────────────────────────────────────────────── */
.rack-file {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-2);
    font-family: var(--font-body);
    font-size: 13px;
    cursor: pointer;
    transition: border-color var(--transition-base), background var(--transition-base);
}
.rack-file:hover { border-color: var(--brand); background: var(--bg-hover); }
.rack-file::file-selector-button {
    margin-right: 12px;
    padding: 4px 10px;
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-pill);
    background: var(--bg-elevated);
    color: var(--text-1);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.rack-file::file-selector-button:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }

/* ── Checkbox ─────────────────────────────────────────────── */
.rack-checkbox { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.rack-checkbox-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rack-checkbox-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--border-strong);
    border-radius: 4px;
    background: var(--bg-surface);
    color: transparent;
    transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base);
    flex: 0 0 auto;
}
.rack-checkbox-box svg { width: 12px; height: 12px; }
.rack-checkbox-input:focus-visible + .rack-checkbox-box { outline: 2px solid var(--brand); outline-offset: 2px; }
.rack-checkbox-input:checked + .rack-checkbox-box { border-color: var(--brand); background: var(--brand); color: #fff; }
.rack-checkbox-input:disabled + .rack-checkbox-box { opacity: .5; cursor: not-allowed; }
.rack-checkbox-label { color: var(--text-1); font-size: 14px; font-weight: 600; }

/* ── Toggle switch ────────────────────────────────────────── */
.rack-toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.rack-toggle-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rack-toggle-track {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--border-strong);
    transition: background var(--transition-base);
    flex: 0 0 auto;
}
.rack-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform var(--transition-base);
}
.rack-toggle-input:checked + .rack-toggle-track { background: var(--brand); }
.rack-toggle-input:checked + .rack-toggle-track .rack-toggle-thumb { transform: translateX(18px); }
.rack-toggle-input:focus-visible + .rack-toggle-track { outline: 2px solid var(--brand); outline-offset: 2px; }
.rack-toggle-input:disabled + .rack-toggle-track { opacity: .6; cursor: not-allowed; }
.rack-toggle-label { color: var(--text-1); font-size: 14px; font-weight: 600; }

.rack-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    user-select: none;
}
.rack-toggle-row-label { color: var(--text-1); font-weight: 700; font-size: 14px; }
.rack-toggle-row .rack-toggle { pointer-events: none; }

/* ── Radio cards ──────────────────────────────────────────── */
.rack-radio-cards-title { margin-bottom: 12px; color: var(--text-1); font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.rack-radio-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.rack-radio-card-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rack-radio-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    border: 1.5px solid var(--border-dim);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-2);
    cursor: pointer;
    transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base);
}
.rack-radio-card-icon { width: 28px; height: 28px; object-fit: contain; margin-bottom: 4px; }
.rack-radio-card-label { color: var(--text-1); font-weight: 700; font-size: 14px; }
.rack-radio-card-desc { color: var(--text-3); font-size: 12px; line-height: 1.5; }
.rack-radio-card:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.rack-radio-card-input:checked + .rack-radio-card { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.rack-radio-card-input:focus-visible + .rack-radio-card { outline: 2px solid var(--brand); outline-offset: 2px; }
:root[data-theme="dark"] .rack-radio-card-input:checked + .rack-radio-card { background: rgba(59, 130, 246, .12); }

/* ── Form success message ────────────────────────────────── */
.rack-form-success {
    margin-top: 6px;
    color: var(--green);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

/* ── Skeleton loaders (x-theme::placeholder.*) ───────────── */
@keyframes rackSkelPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}
.rack-skel { animation: rackSkelPulse 1.6s ease-in-out infinite; }
.rack-skel-bar {
    height: 8px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: var(--border-dim);
}
.rack-skel-bar--dim { background: var(--border-strong); opacity: .4; }
.rack-skel-bar:last-child { margin-bottom: 0; }
.rack-skel-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 14rem;
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    border: 1px solid var(--border-dim);
}
.rack-skel-image svg { width: 40px; height: 40px; color: var(--text-3); opacity: .5; }
.rack-skel-table {
    padding: 18px;
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-md);
}
.rack-skel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--border-dim);
}
.rack-skel-row:first-of-type { border-top: 0; padding-top: 0; }
.rack-skel-text { max-width: 32rem; }
.rack-skel-bar-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.rack-skel-bar-line:last-child { margin-bottom: 0; }
.rack-skel-bar-line > .rack-skel-bar { margin-bottom: 0; flex: 0 0 auto; }

/* ── Static table (x-theme::table.*) ──────────────────────── */
.rack-static-table-scroll {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-dim);
}
.rack-static-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--text-2);
    text-align: left;
}
.rack-static-table-caption {
    display: block;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-dim);
    background: var(--bg-surface);
    text-align: left;
}
.rack-static-table-caption-title {
    display: block;
    color: var(--text-1);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
}
.rack-static-table-caption-desc {
    display: block;
    margin-top: 4px;
    color: var(--text-3);
    font-size: 12px;
}
.rack-static-table-head {
    background: var(--bg-surface);
    color: var(--text-3);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.rack-static-table-head-cell { padding: 12px 20px; text-align: left; }
.rack-static-table-row { border-top: 1px solid var(--border-dim); transition: background var(--transition-base); }
.rack-static-table-row:hover { background: var(--bg-hover); }
.rack-static-table-cell { padding: 14px 20px; }
.rack-static-table-row-header { padding: 14px 20px; color: var(--text-1); font-weight: 660; white-space: nowrap; }

/* ── Summary rows (drawer totals) ─────────────────────────── */
.rack-summary {
    padding: 14px;
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}
.rack-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 8px;
    color: var(--text-2);
    font-size: 13px;
}
.rack-summary-row:last-child { margin-bottom: 0; }
.rack-summary-row span:last-child { color: var(--text-1); font-weight: 700; font-variant-numeric: tabular-nums; }

.rack-hr {
    height: 1px;
    margin: 18px 0;
    border: 0;
    background: var(--border-dim);
}

/* ── Gateway list (orders/subscription setup) ──────────────── */
.rack-gateway-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rack-gateway-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 12px;
    border-radius: var(--radius-md);
    transition: background var(--transition-base);
}

.rack-gateway-item + .rack-gateway-item {
    border-top: 1px solid var(--border-dim);
}

.rack-gateway-item:hover {
    background: var(--bg-hover);
}

.rack-gateway-icon {
    flex: 0 0 auto;
}

.rack-gateway-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 50%;
    background: var(--bg-surface);
}

.rack-gateway-body {
    flex: 1 1 auto;
    min-width: 0;
}

.rack-gateway-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 2px;
    color: var(--text-1);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
}

.rack-gateway-desc {
    margin: 0;
    color: var(--text-3);
    font-size: 13px;
    line-height: 1.5;
}

.rack-gateway-action {
    flex: 0 0 auto;
}

/* ── Mobile polish (≤640px) ────────────────────────────────── */
@media (max-width: 640px) {
    .alert {
        flex-direction: column;
    }

    .btn,
    .landing-btn {
        white-space: normal;
        text-align: center;
    }
}