@import '_content/BlazorJWT.Core/BlazorJWT.Core.bundle.scp.css';

/* /Components/Account/Pages/Manage/EnableAuthenticator.razor.rz.scp.css */
.info-message[b-jxq1t43olu] {
    justify-content: start;
    margin: 0.625rem 0 0.625rem 0;
}
/* /Components/Account/Pages/Manage/ExternalLogins.razor.rz.scp.css */
.current-logins[b-k9jpb66h8y] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.current-logins-item[b-k9jpb66h8y] {
    display: flex;
    gap: 0.625rem;
}
/* /Components/Account/Shared/ExternalLoginPicker.razor.rz.scp.css */
.external-logins[b-5gdss8b2gz] {
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 500px) {
    .external-logins[b-5gdss8b2gz] {
        flex-direction: column;
    }
}
/* /Components/Account/Shared/ShowRecoveryCodes.razor.rz.scp.css */
.codes[b-juoen0926d] {
    margin: 0.625rem 0 0.625rem 0;
}
/* /Components/Layout/Drawer.razor.rz.scp.css */
.drawer-container[b-b8hjz3kvi1] {
    height: 100%;
}

.navigation-drawer-shading[b-b8hjz3kvi1] {
    height: 100%;
    position: absolute;
    transition: ease 300ms;
    transition-property: opacity, visibility;
    visibility: visible;
    width: 100%;
    z-index: 99;
    background-color: black;
    opacity: 0.5;
}

.navigation-drawer.mobile.panel-closed .navigation-drawer-shading[b-b8hjz3kvi1] {
    opacity: 0;
    visibility: hidden;
}

[b-b8hjz3kvi1] .navigation-drawer > .dxbl-drawer-panel {
    display: flex;
}

[b-b8hjz3kvi1] .navigation-drawer.mobile > .dxbl-drawer-panel {
    display: none;
}

.navigation-drawer-shading[b-b8hjz3kvi1] {
    display: none;
}

[b-b8hjz3kvi1] .panel-open:not(.mobile) .nav-buttons-container .menu-button {
    display: none;
}

@media (max-width: 768px) {
    [b-b8hjz3kvi1] .navigation-drawer > .dxbl-drawer-panel {
        display: none;
    }

    [b-b8hjz3kvi1] .navigation-drawer.mobile > .dxbl-drawer-panel {
        display: flex;
    }

    .navigation-drawer-shading[b-b8hjz3kvi1] {
        display: block;
    }

    [b-b8hjz3kvi1] .panel-open:not(.mobile) .nav-buttons-container .menu-button {
        display: flex;
    }
}
/* /Components/Layout/LoginLayout.razor.rz.scp.css */
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================================
   MAIN LAYOUT — DARK MODE PREMIUM
   Paleta: #0d1117 base · #161b22 surface · #1c2333 elevated
           #c9a96e gold · #0d9373 emerald · rgba(255,255,255,x) text
   ========================================================================== */

.page[b-im663bgtxa] {
    height: 100%;
    min-height: 0;
}

/* ── DRAWER / SIDEBAR ─────────────────────────────────────────────────────── */
[b-im663bgtxa] .navigation-drawer {
    --dxbl-drawer-panel-body-padding-x: 0;
    --dxbl-drawer-panel-body-padding-y: 0.5rem;
    --dxbl-drawer-panel-footer-bg: none;
    --dxbl-drawer-panel-header-bg: none;
    --dxbl-drawer-separator-border-width: 0;
}

[b-im663bgtxa] .navigation-drawer > .dxbl-drawer-panel {
    background: linear-gradient(180deg, #0d1117 0%, #0f1620 60%, #0a1f19 100%);
    border-right: 1px solid rgba(255,255,255,0.04);
}

/* ── HEADER DEL DRAWER ── */
.navigation-drawer-header[b-im663bgtxa] {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 1.25rem 1rem 1rem;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.navigation-drawer-header .logo[b-im663bgtxa] {
    height: 1.5rem;
    width: 8.5rem;
    filter: brightness(0) invert(1) opacity(0.85);
}

/* ── FOOTER DEL DRAWER ── */
.navigation-drawer-footer[b-im663bgtxa] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0.875rem 0.875rem 1.125rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    width: 100%;
}

.navigation-drawer-footer img[b-im663bgtxa] {
    width: 26px; height: 26px;
    opacity: 0.55;
    filter: brightness(0) invert(1);
}

.navigation-drawer-footer p[b-im663bgtxa] {
    color: rgba(255,255,255,0.40) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    letter-spacing: 0.2px;
}

/* ══════════════════════════════════════════════════════
   CONTENIDO PRINCIPAL — DARK
══════════════════════════════════════════════════════ */
.drawer-content[b-im663bgtxa] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
    /* Fondo oscuro base */
    background: #0d1117;
    min-height: 0;
    padding: 0;
}

/* ── TOPBAR ── */
.nav-buttons-container[b-im663bgtxa] {
    align-items: center;
    display: flex;
    gap: 8px;
    min-height: 56px;
    padding: 0 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-wrap: wrap;
    flex-shrink: 0;
    background: rgba(13,17,23,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 100;
}

[b-im663bgtxa] .nav-buttons-container > a {
    color: rgba(255,255,255,0.70);
}

[b-im663bgtxa] .nav-buttons-container .back-button {
    padding-left: 0;
    padding-right: 0.25rem;
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    font-weight: 500;
}

[b-im663bgtxa] .nav-buttons-container .menu-button-float-end {
    margin-left: auto;
}

[b-im663bgtxa] .nav-buttons-container .btn-icon-only,
[b-im663bgtxa] .navigation-drawer-header .btn-icon-only {
    --dxbl-btn-padding-x: 0.5rem;
    --dxbl-btn-padding-y: 0.25rem;
    --dxbl-btn-color: rgba(255,255,255,0.65);
}

/* User chip dark */
.topbar-user-chip[b-im663bgtxa] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 7px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    transition: all 0.22s ease;
    cursor: pointer;
}

.topbar-user-chip:hover[b-im663bgtxa] {
    background: rgba(255,255,255,0.09);
    border-color: rgba(201,169,110,0.30);
    color: #e2c99a;
    text-decoration: none;
}

.topbar-avatar[b-im663bgtxa] {
    width: 28px; height: 28px;
    background: linear-gradient(135deg, #0d9373, #0a7a60);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(13,147,115,0.35);
}

/* Botón logout dark */
.btn-logout-premium[b-im663bgtxa] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(229,75,75,0.25);
    color: rgba(229,75,75,0.80);
    background: rgba(229,75,75,0.06);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
    letter-spacing: 0.1px;
    margin-left: auto;
}

.btn-logout-premium:hover[b-im663bgtxa] {
    background: rgba(229,75,75,0.13);
    border-color: rgba(229,75,75,0.45);
    color: #f87171;
    text-decoration: none;
}

/* ── ÁREA DE CONTENIDO DE PÁGINA ── */
.page-content-container[b-im663bgtxa] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    padding: 1.75rem 1.75rem 1.75rem;
    gap: 0;
    overflow: auto;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ==========================================================================
   NAV MENU — SIDEBAR PREMIUM
   Sobre fondo navy oscuro con acento esmeralda + gold
   ========================================================================== */

/* Variables del DxMenu sobreescritas */
[b-fwe1yccy3m] .menu {
    --dxbl-menu-bottom-left-border-radius:  0;
    --dxbl-menu-bottom-right-border-radius: 0;
    --dxbl-menu-top-left-border-radius:     0;
    --dxbl-menu-top-right-border-radius:    0;
    --dxbl-menu-item-padding-x: 1rem;
    --dxbl-menu-item-padding-y: 0.55rem;
    --dxbl-menu-color: rgba(255, 255, 255, 0.72);
    --dxbl-menu-item-hover-color: #ffffff;
    --dxbl-menu-item-hover-bg: rgba(255, 255, 255, 0.07);

    background: none;
    padding: 0.5rem 0.75rem;
}

[b-fwe1yccy3m] .menu.display-mobile {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Ítem del menú base */
[b-fwe1yccy3m] .dxbl-menu-item {
    border-radius: 10px !important;
    transition: background 0.22s ease, color 0.22s ease, transform 0.2s ease !important;
    margin-bottom: 2px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

[b-fwe1yccy3m] .dxbl-menu-item:hover {
    transform: translateX(3px);
}

/* Ítem activo — pill con borde gold */
[b-fwe1yccy3m] .menu-item-active {
    background: rgba(255, 255, 255, 0.09) !important;
    border-left: 3px solid #c9a96e !important;
    border-radius: 10px !important;
    color: #ffffff !important;
}

[b-fwe1yccy3m] .menu-item-active .dxbl-menu-item-text {
    color: #ffffff !important;
    font-weight: 700;
}

/* Texto de ítem normal */
[b-fwe1yccy3m] .dxbl-menu-item-text {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    letter-spacing: 0.01em;
}

/* Íconos de los ítems */
[b-fwe1yccy3m] .dxbl-menu-item-icon-container {
    opacity: 0.75;
    transition: opacity 0.22s ease;
}

[b-fwe1yccy3m] .dxbl-menu-item:hover .dxbl-menu-item-icon-container {
    opacity: 1;
}

[b-fwe1yccy3m] .menu-item-active .dxbl-menu-item-icon-container {
    opacity: 1;
}

/* Separador entre grupos */
[b-fwe1yccy3m] .menu + .menu {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Label de grupo (si se añade en el futuro) */
.nav-group-label[b-fwe1yccy3m] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: rgba(255, 255, 255, 0.28);
    padding: 0.5rem 1rem 0.25rem;
    user-select: none;
}
/* /Components/ModalpaymenT.razor.rz.scp.css */
.dx-popup-wrapper[b-8k1qrr0vzp] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.dx-overlay-backdrop[b-8k1qrr0vzp] {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

/*.dx-popup-content {
    position: relative;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 10000;
    width: 100%;
    max-width: 450px;
}*/

.dx-popup-header[b-8k1qrr0vzp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.dx-close-btn[b-8k1qrr0vzp] {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

/* 1. Ajustar el contenedor del Popup para dar espacio vertical */
.dx-popup-content[b-8k1qrr0vzp] {
    position: relative;
    background: #ffffff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    z-index: 10000;
    width: 100%;
    max-width: 500px; /* Ancho ideal para que el formulario respire */
    max-height: 90vh; /* Evita que se salga de la pantalla hacia abajo */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* 2. Contenedor de la pasarela con scroll interno suave si es necesario */
.payment-card[b-8k1qrr0vzp] {
    width: 100%;
    flex: 1;
    overflow-y: auto; /* Si el formulario es largo, crea un scroll limpio dentro del modal */
    padding-right: 5px; /* Margen para que el scroll no pegue con los inputs */
    box-sizing: border-box;
}

/* 3. Forzar al contenedor del SDK a alinearse simétricamente */
#paypal-button-container[b-8k1qrr0vzp] {
    width: 100% !important;
    margin: 15px auto 0 auto;
    box-sizing: border-box;
}

/* Opcional: Estilizar la barra de scroll interno para que se vea moderna y sutil */
.payment-card[b-8k1qrr0vzp]::-webkit-scrollbar {
    width: 6px;
}

.payment-card[b-8k1qrr0vzp]::-webkit-scrollbar-track {
    background: transparent;
}

.payment-card[b-8k1qrr0vzp]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

    .payment-card[b-8k1qrr0vzp]::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
/* /Components/Pages/Counter.razor.rz.scp.css */
.counter-block[b-e0qc74i1ca] {
    align-items: center;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 17rem;
    justify-content: center;
    padding: 2.5rem 1.5rem 1.5rem;
    width: 16.875rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
}

.counter-block .counter-content[b-e0qc74i1ca] {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.counter-block .counter-count[b-e0qc74i1ca] {
    font-size: 7.5rem;
    font-weight: 400;
    line-height: 7.75rem;
}
/* /Components/Pages/Delivery/IndexDelivery.razor.rz.scp.css */
/* ==========================================================================
   DELIVERY — DARK PREMIUM
   ========================================================================== */

/* Wrapper global heredado del page-content-container */
:host[b-82bgzqcpiz] { display: block; }

/* Header inline (sin componente separado, lo ponemos via el wrapper) */
.delivery-page-title[b-82bgzqcpiz] {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 5px;
    letter-spacing: -0.025em;
}

.delivery-page-title em[b-82bgzqcpiz] { font-style: italic; color: #c9a96e; }

.delivery-subtitle[b-82bgzqcpiz] {
    font-size: 13px;
    color: rgba(255,255,255,0.32);
    margin: 0 0 24px;
}

/* ══ GRILLA WRAPPER ══════════════════════════════════════ */
[b-82bgzqcpiz] .dxbl-grid {
    background: #161b22 !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35) !important;
}

[b-82bgzqcpiz] .dxbl-grid-header-row th {
    background: #1c2333 !important;
    color: rgba(255,255,255,0.38) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 13px 14px !important;
}

[b-82bgzqcpiz] .dxbl-grid-data-row td {
    background: #161b22 !important;
    color: rgba(255,255,255,0.72) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    vertical-align: middle !important;
    padding: 12px 14px !important;
    transition: background 0.18s ease !important;
}

[b-82bgzqcpiz] .dxbl-grid-data-row:nth-child(even) td {
    background: #1a1f2e !important;
}

[b-82bgzqcpiz] .dxbl-grid-data-row:hover td {
    background: rgba(201,169,110,0.055) !important;
    color: rgba(255,255,255,0.90) !important;
}

[b-82bgzqcpiz] .dxbl-grid-toolbar {
    background: #1c2333 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 10px 14px !important;
}

[b-82bgzqcpiz] .dxbl-grid-search-box input {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.75) !important;
    border-radius: 8px !important;
}

[b-82bgzqcpiz] .dxbl-grid-search-box input::placeholder {
    color: rgba(255,255,255,0.25) !important;
}

[b-82bgzqcpiz] .dxbl-grid-pager {
    background: #1c2333 !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    padding: 10px 14px !important;
    color: rgba(255,255,255,0.35) !important;
    font-size: 12px !important;
}

/* ══ CELDA IMAGEN VOUCHER ════════════════════════════════ */
.voucher-thumb[b-82bgzqcpiz] {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,0.10);
    box-shadow: 0 2px 8px rgba(0,0,0,0.30);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    vertical-align: middle;
}

.voucher-thumb:hover[b-82bgzqcpiz] {
    transform: scale(1.10);
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

.voucher-btn[b-82bgzqcpiz] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 6px;
    color: #c9a96e;
    font-size: 15px;
    vertical-align: middle;
    transition: color 0.2s ease;
}

.voucher-btn:hover[b-82bgzqcpiz] { color: #e2c99a; }

.voucher-empty[b-82bgzqcpiz] {
    font-size: 11px;
    color: rgba(255,255,255,0.22);
    font-style: italic;
}

/* ══ ESTADO COMBOBOX DARK ════════════════════════════════ */
[b-82bgzqcpiz] .dark-combobox {
    --dxbl-combobox-bg: rgba(255,255,255,0.06) !important;
    --dxbl-combobox-color: rgba(255,255,255,0.75) !important;
    --dxbl-combobox-border-color: rgba(255,255,255,0.10) !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}

/* Estado badges en combobox display */
.delivery-status[b-82bgzqcpiz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    border: 1px solid transparent;
}

.status-pending[b-82bgzqcpiz]   { background: rgba(245,158,11,0.12); color: #fbbf24; border-color: rgba(245,158,11,0.22); }
.status-shipped[b-82bgzqcpiz]   { background: rgba(99,102,241,0.12);  color: #a5b4fc; border-color: rgba(99,102,241,0.22); }
.status-delivered[b-82bgzqcpiz] { background: rgba(13,147,115,0.12);  color: #34d399; border-color: rgba(13,147,115,0.22); }
.status-cancelled[b-82bgzqcpiz] { background: rgba(239,68,68,0.12);   color: #fca5a5; border-color: rgba(239,68,68,0.22); }

/* ══ POPUP EDIT FORM DARK ════════════════════════════════ */
[b-82bgzqcpiz] .dxbl-popup-window {
    background: #161b22 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 32px 80px rgba(0,0,0,0.60) !important;
}

[b-82bgzqcpiz] .dxbl-popup-header {
    background: #1c2333 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.85) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    padding: 16px 20px !important;
    border-radius: 16px 16px 0 0 !important;
}

[b-82bgzqcpiz] .dxbl-popup-body {
    background: #161b22 !important;
    padding: 20px !important;
}

[b-82bgzqcpiz] .dxbl-form-layout .dxbl-fl-item-label {
    color: rgba(255,255,255,0.38) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
}

[b-82bgzqcpiz] .dxbl-form-layout .dxbl-text-box input,
[b-82bgzqcpiz] .dxbl-form-layout .dxbl-spin-edit input,
[b-82bgzqcpiz] .dxbl-form-layout .dxbl-combobox input {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.80) !important;
    border-radius: 8px !important;
}

[b-82bgzqcpiz] .dxbl-popup-footer {
    background: #1c2333 !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    padding: 12px 20px !important;
    border-radius: 0 0 16px 16px !important;
}

/* ══ POPUP IMAGEN VOUCHER ════════════════════════════════ */
[b-82bgzqcpiz] .dxbl-popup-window .img-fluid {
    border-radius: 10px;
}
/* /Components/Pages/Index/Index.razor.rz.scp.css */
[b-xmfte3llkz] .index-gridlayout {
    container-type: inline-size;
    height: auto;
    margin-top: auto;
    margin-bottom: auto;
    padding-bottom: 9rem;
}

[b-xmfte3llkz] .title {
    padding-bottom: 3rem;
    text-align: center;
}

[b-xmfte3llkz] .tiles {
    --tile-column-count: 4;

    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(var(--tile-column-count), max-content);
    justify-content: center;

    @container (max-width: 60.5rem) {
        --tile-column-count: 3;
    }
    @container (max-width: 45.125rem) {
        --tile-column-count: 2;
    }
    @container (max-width: 29.75rem) {
        --tile-column-count: 1;
    }
}


/*Card productos Nacionales*/
/* Contenedor General de la Sección */
.premium-products-section[b-xmfte3llkz] {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Encabezado */
.section-header[b-xmfte3llkz] {
    text-align: center;
    margin-bottom: 45px;
}

.country-badge[b-xmfte3llkz] {
    background: rgba(6, 182, 212, 0.1);
    color: #06b6d4;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: 1px solid rgba(6, 182, 212, 0.2);
    display: inline-block;
    margin-bottom: 15px;
}

.section-header h2[b-xmfte3llkz] {
    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.section-header p[b-xmfte3llkz] {
    color: #94a3b8;
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto;
}

/* Cuadrícula de Tarjetas Responsiva */
.products-grid[b-xmfte3llkz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    width: 100%;
}

/* Estilo Tarjeta Premium (Glassmorphism) */
.product-card[b-xmfte3llkz] {
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

    .product-card:hover[b-xmfte3llkz] {
        transform: translateY(-8px);
        border-color: rgba(6, 182, 212, 0.4);
        box-shadow: 0 12px 30px rgba(6, 182, 212, 0.1);
        background: rgba(30, 41, 59, 0.6);
    }

/* Contenedor de Imagen y Precio */
.product-image-container[b-xmfte3llkz] {
    position: relative;
    width: 100%;
    height: 220px;
    background: #0f172a; /* Fondo oscuro de respaldo */
}

.product-image[b-xmfte3llkz] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-card:hover .product-image[b-xmfte3llkz] {
    transform: scale(1.05);
}

.price-tag[b-xmfte3llkz] {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: #0f172a;
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Información Interna del Producto */
.product-info[b-xmfte3llkz] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-origin[b-xmfte3llkz] {
    font-size: 11px;
    text-transform: uppercase;
    color: #06b6d4;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.product-info h3[b-xmfte3llkz] {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.product-info p[b-xmfte3llkz] {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 20px 0;
    flex: 1; /* Empuja los botones hacia abajo equitativamente */
}

/* Metadatos Inferiores */
.product-meta[b-xmfte3llkz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 15px;
    font-size: 12px;
}

.stock-status[b-xmfte3llkz] {
    color: #10b981; /* Verde esmeralda para disponibilidad */
    font-weight: 600;
}

.shipping-info[b-xmfte3llkz] {
    color: #64748b;
}


/* Container for the inline flag and text */
.colombia-exclusive-badge[b-xmfte3llkz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Golden-ratio separation between flag and text */
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px 16px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

    /* Micro animations when hovering the section header */
    .colombia-exclusive-badge:hover[b-xmfte3llkz] {
        border-color: rgba(6, 182, 212, 0.3);
        background: rgba(6, 182, 212, 0.05);
        box-shadow: 0 4px 15px rgba(6, 182, 212, 0.15);
    }

/* Premium Vector Flag Rendering */
.co-flag[b-xmfte3llkz] {
    border-radius: 3px; /* Slightly softened sharp corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: block;
}

/* Elegant Text Typography */
.badge-text[b-xmfte3llkz] {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #e2e8f0; /* Crisp premium white */
}


/********************Popup Styles*/

/* Forzar visibilidad de las etiquetas del formulario DevExpress */
.dark-form .dxbl-fl-caption[b-xmfte3llkz],
.dark-form label[b-xmfte3llkz] {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Estilizar las cajas de texto internas para el modo oscuro */
.dark-form .dxbl-text-edit[b-xmfte3llkz] {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #444444 !important;
}

    /* Asegurar que el texto dentro de los inputs deshabilitados/readonly no desaparezca */
    .dark-form .dxbl-text-edit[readonly][b-xmfte3llkz],
    .dark-form .dxbl-text-edit-input:disabled[b-xmfte3llkz] {
        color: #888888 !important;
        background-color: #151515 !important;
    }

/* /Components/Pages/Index/IndexTile.razor.rz.scp.css */
.tile[b-pstsshnu9k] {
    border-radius: 0.75rem;
    height: 7.5rem;
    transition: box-shadow 0.2s;
    width: 14.375rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
}

.tile:hover[b-pstsshnu9k] {
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.tile[b-pstsshnu9k]  > a {
    text-decoration: none;
}

[b-pstsshnu9k] .tile-content {
    padding: 1rem;
}

[b-pstsshnu9k] .tile-icon {
    border-radius: 0.375rem;
    height: 2.75rem;
    padding: 0.75rem;
    width: 2.75rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
}

[b-pstsshnu9k] .tile-title {
    align-self: center;
    color: var(--bs-body-color);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.25rem;
}

[b-pstsshnu9k] .tile-description {
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1rem;
}
/* /Components/Pages/Pagos/Index.razor.rz.scp.css */
/* ==========================================================================
   GESTIÓN DE PAGOS — DARK PREMIUM
   ========================================================================== */

.pagos-container[b-dznntalqwu] {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    animation: dash-fadeup-b-dznntalqwu 0.5s cubic-bezier(0.16,1,0.3,1) both;
}

@keyframes dash-fadeup-b-dznntalqwu {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══ HEADER ══════════════════════════════════════════════ */
.pagos-header[b-dznntalqwu] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.pagos-eyebrow[b-dznntalqwu] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(201,169,110,0.10);
    border: 1px solid rgba(201,169,110,0.20);
    color: #c9a96e;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 10px;
}

.pagos-title[b-dznntalqwu] {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 5px;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.pagos-title em[b-dznntalqwu] {
    font-style: italic;
    color: #c9a96e;
}

.pagos-subtitle[b-dznntalqwu] {
    font-size: 13px;
    color: rgba(255,255,255,0.32);
    margin: 0;
}

/* Stats pills derecha */
.pagos-stats-row[b-dznntalqwu] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    align-self: flex-end;
    padding-bottom: 4px;
}

.pagos-stat-pill[b-dznntalqwu] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.50);
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.pagos-stat-green[b-dznntalqwu] {
    background: rgba(13,147,115,0.10);
    border-color: rgba(13,147,115,0.20);
    color: #34d399;
}

.stat-dot[b-dznntalqwu] {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #0d9373;
    animation: stat-pulse-b-dznntalqwu 2s ease-in-out infinite;
}

@keyframes stat-pulse-b-dznntalqwu {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

/* ══ GRILLA WRAPPER ══════════════════════════════════════ */
.pagos-grid-wrapper[b-dznntalqwu] {
    background: #161b22;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 4px 24px rgba(0,0,0,0.35);
    overflow: hidden;
}

/* Override DxGrid dark */
[b-dznntalqwu] .pagos-grid {
    background: #161b22 !important;
    border: none !important;
    border-radius: 16px !important;
}

[b-dznntalqwu] .pagos-grid .dxbl-grid-header-row th {
    background: #1c2333 !important;
    color: rgba(255,255,255,0.38) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 13px 16px !important;
}

[b-dznntalqwu] .pagos-grid .dxbl-grid-data-row td {
    background: #161b22 !important;
    color: rgba(255,255,255,0.70) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    vertical-align: middle !important;
    padding: 14px 16px !important;
    transition: background 0.18s ease !important;
}

[b-dznntalqwu] .pagos-grid .dxbl-grid-data-row:nth-child(even) td {
    background: #1a1f2e !important;
}

[b-dznntalqwu] .pagos-grid .dxbl-grid-data-row:hover td {
    background: rgba(201,169,110,0.055) !important;
    color: rgba(255,255,255,0.90) !important;
}

[b-dznntalqwu] .pagos-grid .dxbl-grid-toolbar {
    background: #1c2333 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 10px 16px !important;
}

[b-dznntalqwu] .pagos-grid .dxbl-grid-search-box input {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.75) !important;
    border-radius: 8px !important;
}

[b-dznntalqwu] .pagos-grid .dxbl-grid-search-box input::placeholder {
    color: rgba(255,255,255,0.25) !important;
}

[b-dznntalqwu] .pagos-grid .dxbl-grid-pager {
    background: #1c2333 !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    padding: 10px 16px !important;
    color: rgba(255,255,255,0.35) !important;
    font-size: 12px !important;
}

/* ══ CELDAS ══════════════════════════════════════════════ */

/* ID badge */
.pagos-id-badge[b-dznntalqwu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.50);
    font-family: 'Inter', monospace;
}

/* Cliente */
.pagos-client-cell[b-dznntalqwu] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pagos-client-avatar[b-dznntalqwu] {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, #0f1f3d, #0d9373);
    color: #c9a96e;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.30);
}

.pagos-client-avatar-muted[b-dznntalqwu] {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.30);
    font-size: 13px;
}

.pagos-client-name[b-dznntalqwu] {
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    font-size: 13.5px;
}

.pagos-client-muted[b-dznntalqwu] {
    font-size: 12.5px;
    color: rgba(255,255,255,0.30);
    font-style: italic;
}

/* Transaction ID */
.pagos-txid[b-dznntalqwu] {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.3px;
    background: rgba(255,255,255,0.04);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.06);
    display: inline-block;
}

/* Monto */
.pagos-amount-cell[b-dznntalqwu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.pagos-amount[b-dznntalqwu] {
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    font-weight: 700;
    color: #34d399;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.pagos-currency[b-dznntalqwu] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255,255,255,0.25);
}

/* PayPal ID */
.pagos-paypal-id[b-dznntalqwu] {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 11.5px;
    color: rgba(255,255,255,0.38);
    letter-spacing: 0.2px;
}

/* Status badge */
.pagos-status-badge[b-dznntalqwu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    border: 1px solid transparent;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.pago-status-ok[b-dznntalqwu] {
    background: rgba(13,147,115,0.12);
    color: #34d399;
    border-color: rgba(13,147,115,0.22);
}

.pago-status-pending[b-dznntalqwu] {
    background: rgba(245,158,11,0.12);
    color: #fbbf24;
    border-color: rgba(245,158,11,0.22);
}

.pago-status-failed[b-dznntalqwu] {
    background: rgba(239,68,68,0.12);
    color: #fca5a5;
    border-color: rgba(239,68,68,0.22);
}

.pago-status-default[b-dznntalqwu] {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.38);
    border-color: rgba(255,255,255,0.08);
}

/* Fecha */
.pagos-date-cell[b-dznntalqwu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pagos-date[b-dznntalqwu] {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.72);
}

.pagos-time[b-dznntalqwu] {
    font-size: 11px;
    color: rgba(255,255,255,0.28);
    font-weight: 400;
}
/* /Components/Pages/Pagos/PagosT.razor.rz.scp.css */
/* /Components/Pages/PrivateP.razor.rz.scp.css */
/* ==========================================================================
   DASHBOARD — DARK MODE PREMIUM
   ========================================================================== */

.dashboard[b-7tvi97th1c] {
    display: flex;
    flex-direction: column;
    gap: 28px;
    animation: dash-fadeup-b-7tvi97th1c 0.55s cubic-bezier(0.16,1,0.3,1) both;
}

@keyframes dash-fadeup-b-7tvi97th1c {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══ SALUDO ══════════════════════════════════════════════ */
.dashboard-greeting[b-7tvi97th1c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 32px;
    background: #161b22;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
    gap: 16px;
}

/* Orbe decorativo */
.dashboard-greeting[b-7tvi97th1c]::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(13,147,115,0.10) 0%, transparent 65%);
    pointer-events: none;
}

.dashboard-greeting[b-7tvi97th1c]::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -40px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(201,169,110,0.06) 0%, transparent 65%);
    pointer-events: none;
}

.greeting-label[b-7tvi97th1c] {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.35);
    margin: 0 0 6px;
}

.greeting-name[b-7tvi97th1c] {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.greeting-wave[b-7tvi97th1c] { font-style: normal; }

.greeting-sub[b-7tvi97th1c] {
    font-size: 13px;
    color: rgba(255,255,255,0.35);
    margin: 0;
    font-weight: 400;
    text-transform: capitalize;
}

.greeting-role-pill[b-7tvi97th1c] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(201,169,110,0.10);
    border: 1px solid rgba(201,169,110,0.22);
    color: #c9a96e;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.greeting-role-dot[b-7tvi97th1c] {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #c9a96e;
    animation: pulse-gold-b-7tvi97th1c 2s ease-in-out infinite;
}

@keyframes pulse-gold-b-7tvi97th1c {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(201,169,110,0.5); }
    50%       { opacity: 0.7; box-shadow: 0 0 0 4px rgba(201,169,110,0); }
}

/* ══ STAT CARDS ══════════════════════════════════════════ */
.dashboard-stats[b-7tvi97th1c] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.stat-card[b-7tvi97th1c] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    border-radius: 14px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all 0.32s cubic-bezier(0.16,1,0.3,1);
    position: relative;
    overflow: hidden;
}

.stat-card[b-7tvi97th1c]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    border-radius: 14px 14px 0 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card:hover[b-7tvi97th1c]::before { opacity: 1; }

.stat-card:hover[b-7tvi97th1c] {
    transform: translateY(-4px);
    text-decoration: none;
}

/* Variantes de color */
.stat-card-navy[b-7tvi97th1c] {
    background: linear-gradient(135deg, #0f1a2e 0%, #162040 100%);
    border-color: rgba(201,169,110,0.12);
}
.stat-card-navy[b-7tvi97th1c]::before { background: #c9a96e; }
.stat-card-navy:hover[b-7tvi97th1c] { box-shadow: 0 12px 40px rgba(201,169,110,0.15); border-color: rgba(201,169,110,0.25); }

.stat-card-gold[b-7tvi97th1c] {
    background: linear-gradient(135deg, #1a1505 0%, #261e08 100%);
    border-color: rgba(201,169,110,0.12);
}
.stat-card-gold[b-7tvi97th1c]::before { background: linear-gradient(90deg, #c9a96e, #e2c99a); }
.stat-card-gold:hover[b-7tvi97th1c] { box-shadow: 0 12px 40px rgba(201,169,110,0.14); border-color: rgba(201,169,110,0.28); }

.stat-card-emerald[b-7tvi97th1c] {
    background: linear-gradient(135deg, #051a13 0%, #0a2a1e 100%);
    border-color: rgba(13,147,115,0.14);
}
.stat-card-emerald[b-7tvi97th1c]::before { background: linear-gradient(90deg, #0d9373, #34d399); }
.stat-card-emerald:hover[b-7tvi97th1c] { box-shadow: 0 12px 40px rgba(13,147,115,0.16); border-color: rgba(13,147,115,0.28); }

.stat-card-purple[b-7tvi97th1c] {
    background: linear-gradient(135deg, #120d20 0%, #1e1535 100%);
    border-color: rgba(139,92,246,0.12);
}
.stat-card-purple[b-7tvi97th1c]::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.stat-card-purple:hover[b-7tvi97th1c] { box-shadow: 0 12px 40px rgba(139,92,246,0.16); border-color: rgba(139,92,246,0.28); }

/* Icono stat */
.stat-card-icon[b-7tvi97th1c] {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    transition: transform 0.28s ease;
}

.stat-card-navy   .stat-card-icon[b-7tvi97th1c] { color: #c9a96e; }
.stat-card-gold   .stat-card-icon[b-7tvi97th1c] { color: #e2c99a; }
.stat-card-emerald .stat-card-icon[b-7tvi97th1c] { color: #34d399; }
.stat-card-purple .stat-card-icon[b-7tvi97th1c] { color: #a78bfa; }

.stat-card:hover .stat-card-icon[b-7tvi97th1c] { transform: scale(1.10); }

.stat-card-body[b-7tvi97th1c] {
    display: flex; flex-direction: column; gap: 2px; flex: 1;
}

.stat-label[b-7tvi97th1c] {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px;
    color: rgba(255,255,255,0.35);
}

.stat-value[b-7tvi97th1c] {
    font-family: 'Playfair Display', serif;
    font-size: 18px; font-weight: 700;
    color: rgba(255,255,255,0.88);
    letter-spacing: -0.01em;
}

.stat-card-arrow[b-7tvi97th1c] {
    color: rgba(255,255,255,0.20);
    font-size: 14px;
    transition: transform 0.25s ease, color 0.25s ease;
    flex-shrink: 0;
}
.stat-card:hover .stat-card-arrow[b-7tvi97th1c] {
    transform: translateX(4px);
    color: rgba(255,255,255,0.50);
}

/* ══ PANEL CENTRAL ════════════════════════════════════════ */
.dashboard-main[b-7tvi97th1c] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.dashboard-section-title[b-7tvi97th1c] {
    font-family: 'Playfair Display', serif;
    font-size: 17px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    margin: 0 0 18px;
    letter-spacing: -0.01em;
}

/* Accesos rápidos */
.dashboard-quick-access[b-7tvi97th1c],
.dashboard-info-panel[b-7tvi97th1c] {
    background: #161b22;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.06);
    padding: 24px;
}

.quick-links[b-7tvi97th1c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quick-link[b-7tvi97th1c] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
    border-radius: 12px;
    text-decoration: none;
    background: rgba(255,255,255,0.02);
    border: 1px solid transparent;
    transition: all 0.25s ease;
}

.quick-link:hover[b-7tvi97th1c] {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
    text-decoration: none;
    transform: translateX(4px);
}

.quick-link-icon[b-7tvi97th1c] {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.ql-navy[b-7tvi97th1c]   { background: rgba(201,169,110,0.10); color: #c9a96e; }
.ql-gold[b-7tvi97th1c]   { background: rgba(201,169,110,0.10); color: #e2c99a; }
.ql-emerald[b-7tvi97th1c]{ background: rgba(13,147,115,0.12);  color: #34d399; }
.ql-purple[b-7tvi97th1c] { background: rgba(139,92,246,0.12);  color: #a78bfa; }

.quick-link-text[b-7tvi97th1c] {
    display: flex; flex-direction: column; gap: 2px; flex: 1;
}

.ql-title[b-7tvi97th1c] {
    font-size: 13.5px; font-weight: 600;
    color: rgba(255,255,255,0.80);
    line-height: 1.3;
}

.ql-desc[b-7tvi97th1c] {
    font-size: 11.5px; color: rgba(255,255,255,0.30);
    line-height: 1.3;
}

.ql-arrow[b-7tvi97th1c] {
    color: rgba(255,255,255,0.18);
    font-size: 12px;
    transition: transform 0.22s ease;
}
.quick-link:hover .ql-arrow[b-7tvi97th1c] { transform: translateX(3px); color: rgba(255,255,255,0.40); }

/* Info cards */
.info-cards[b-7tvi97th1c] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-card[b-7tvi97th1c] {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 16px 18px;
    transition: border-color 0.22s ease;
}

.info-card:hover[b-7tvi97th1c] { border-color: rgba(255,255,255,0.10); }

.info-card-header[b-7tvi97th1c] {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 6px;
}

.info-card-icon[b-7tvi97th1c] { font-size: 18px; }

.info-card-title[b-7tvi97th1c] {
    font-size: 13.5px; font-weight: 700;
    color: rgba(255,255,255,0.80);
}

.info-card-desc[b-7tvi97th1c] {
    font-size: 12.5px;
    color: rgba(255,255,255,0.35);
    margin: 0 0 10px;
    line-height: 1.5;
}

.info-card-desc strong[b-7tvi97th1c] { color: rgba(255,255,255,0.55); font-weight: 600; }

.info-card-status[b-7tvi97th1c] {
    display: flex; align-items: center; gap: 7px;
    font-size: 11.5px; font-weight: 600;
    color: rgba(255,255,255,0.38);
}

.status-dot-green[b-7tvi97th1c] {
    width: 7px; height: 7px; border-radius: 50%;
    background: #0d9373;
    animation: pulse-green-b-7tvi97th1c 2.5s ease-in-out infinite;
}

.status-dot-gold[b-7tvi97th1c] {
    width: 7px; height: 7px; border-radius: 50%;
    background: #c9a96e;
    animation: pulse-gold-b-7tvi97th1c 2.5s ease-in-out infinite;
}

@keyframes pulse-green-b-7tvi97th1c {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(13,147,115,0.5); }
    50%       { opacity: 0.7; box-shadow: 0 0 0 4px rgba(13,147,115,0); }
}

/* Responsive */
@media (max-width: 1000px) {
    .dashboard-stats[b-7tvi97th1c] { grid-template-columns: repeat(2, 1fr); }
    .dashboard-main[b-7tvi97th1c]  { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .dashboard-stats[b-7tvi97th1c] { grid-template-columns: 1fr; }
    .greeting-name[b-7tvi97th1c]   { font-size: 24px; }
    .dashboard-greeting[b-7tvi97th1c] { padding: 20px; }
}
/* /Components/Pages/prodCol/IndexprodColomb.razor.rz.scp.css */
/* ==========================================================================
   INVENTARIO PRODUCTOS NACIONALES — DARK PREMIUM
   ========================================================================== */

.prodcol-container[b-t8wq32w13u] {
    padding: 0;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    animation: dash-fadeup-b-t8wq32w13u 0.5s cubic-bezier(0.16,1,0.3,1) both;
}

@keyframes dash-fadeup-b-t8wq32w13u {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══ HEADER ══════════════════════════════════════════════ */
.prodcol-header[b-t8wq32w13u] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

/* Eyebrow con bandera */
.prodcol-eyebrow[b-t8wq32w13u] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255,255,255,0.45);
    margin-bottom: 10px;
}

.prodcol-title[b-t8wq32w13u] {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 5px;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.prodcol-title em[b-t8wq32w13u] {
    font-style: italic;
    color: #c9a96e;
}

.prodcol-subtitle[b-t8wq32w13u] {
    font-size: 13px;
    color: rgba(255,255,255,0.32);
    margin: 0;
    font-weight: 400;
}

/* Botón Agregar */
.prodcol-btn-new[b-t8wq32w13u] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #c9a96e 0%, #a07c3f 100%);
    color: #0a1628;
    border: none;
    padding: 11px 22px;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 4px 18px rgba(201,169,110,0.28);
    letter-spacing: 0.1px;
    white-space: nowrap;
    flex-shrink: 0;
}

.prodcol-btn-new:hover[b-t8wq32w13u] {
    background: linear-gradient(135deg, #e2c99a 0%, #c9a96e 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(201,169,110,0.40);
}

/* ══ GRILLA WRAPPER ══════════════════════════════════════ */
.prodcol-grid-wrapper[b-t8wq32w13u] {
    background: #161b22;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 4px 24px rgba(0,0,0,0.35);
    overflow: hidden;
}

/* Override DxGrid dark */
[b-t8wq32w13u] .prodcol-grid {
    background: #161b22 !important;
    border: none !important;
    border-radius: 16px !important;
}

[b-t8wq32w13u] .prodcol-grid .dxbl-grid-header-row th {
    background: #1c2333 !important;
    color: rgba(255,255,255,0.38) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 13px 16px !important;
}

[b-t8wq32w13u] .prodcol-grid .dxbl-grid-data-row td {
    background: #161b22 !important;
    color: rgba(255,255,255,0.72) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    vertical-align: middle !important;
    padding: 12px 16px !important;
    transition: background 0.18s ease !important;
}

[b-t8wq32w13u] .prodcol-grid .dxbl-grid-data-row:nth-child(even) td {
    background: #1a1f2e !important;
}

[b-t8wq32w13u] .prodcol-grid .dxbl-grid-data-row:hover td {
    background: rgba(201,169,110,0.06) !important;
    color: rgba(255,255,255,0.92) !important;
}

[b-t8wq32w13u] .prodcol-grid .dxbl-grid-toolbar {
    background: #1c2333 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 10px 16px !important;
}

[b-t8wq32w13u] .prodcol-grid .dxbl-grid-pager {
    background: #1c2333 !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    padding: 10px 16px !important;
    color: rgba(255,255,255,0.35) !important;
    font-size: 12px !important;
}

/* ══ CELDAS ══════════════════════════════════════════════ */

/* Imagen */
.prod-thumb-wrap[b-t8wq32w13u] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.prod-thumb[b-t8wq32w13u] {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 10px;
    border: 1.5px solid rgba(255,255,255,0.10);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

[b-t8wq32w13u] .prodcol-grid .dxbl-grid-data-row:hover .prod-thumb {
    transform: scale(1.08);
    box-shadow: 0 8px 22px rgba(0,0,0,0.45);
}

.prod-thumb-empty[b-t8wq32w13u] {
    width: 52px; height: 52px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.22);
    font-size: 20px;
    margin: 0 auto;
}

/* Nombre + tag */
.prod-name-cell[b-t8wq32w13u] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.prod-name[b-t8wq32w13u] {
    font-weight: 700;
    color: rgba(255,255,255,0.88);
    font-size: 13.5px;
    letter-spacing: 0.01em;
}

.prod-tag[b-t8wq32w13u] {
    font-size: 10.5px;
    color: rgba(13,147,115,0.80);
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Descripción */
.prod-desc[b-t8wq32w13u] {
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    line-height: 1.5;
}

/* Precio */
.prod-price-cell[b-t8wq32w13u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.prod-price-amount[b-t8wq32w13u] {
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    font-weight: 700;
    color: #c9a96e;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.prod-price-currency[b-t8wq32w13u] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255,255,255,0.28);
}

/* Stock badge */
.prod-stock-badge[b-t8wq32w13u] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid transparent;
    letter-spacing: 0.3px;
}

.prod-stock-badge .stock-dot[b-t8wq32w13u] {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.prod-stock-badge.stock-ok[b-t8wq32w13u] {
    background: rgba(13,147,115,0.12);
    color: #34d399;
    border-color: rgba(13,147,115,0.22);
}
.prod-stock-badge.stock-ok .stock-dot[b-t8wq32w13u] {
    background: #0d9373;
    animation: stock-pulse-b-t8wq32w13u 2s ease-in-out infinite;
}

.prod-stock-badge.stock-low[b-t8wq32w13u] {
    background: rgba(245,158,11,0.12);
    color: #fbbf24;
    border-color: rgba(245,158,11,0.22);
}
.prod-stock-badge.stock-low .stock-dot[b-t8wq32w13u] {
    background: #f59e0b;
    animation: stock-pulse-b-t8wq32w13u 1.4s ease-in-out infinite;
}

.prod-stock-badge.stock-out[b-t8wq32w13u] {
    background: rgba(239,68,68,0.10);
    color: #fca5a5;
    border-color: rgba(239,68,68,0.18);
}
.prod-stock-badge.stock-out .stock-dot[b-t8wq32w13u] { background: #ef4444; }

@keyframes stock-pulse-b-t8wq32w13u {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.7); }
}

/* Acciones */
.prod-actions[b-t8wq32w13u] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.prod-action-btn[b-t8wq32w13u] {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid transparent;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.20s ease;
    background: transparent;
}

.prod-action-edit[b-t8wq32w13u] {
    color: rgba(201,169,110,0.75);
    border-color: rgba(201,169,110,0.15);
    background: rgba(201,169,110,0.06);
}
.prod-action-edit:hover[b-t8wq32w13u] {
    background: rgba(201,169,110,0.18);
    border-color: rgba(201,169,110,0.35);
    color: #e2c99a;
    transform: translateY(-1px);
}

.prod-action-delete[b-t8wq32w13u] {
    color: rgba(239,68,68,0.70);
    border-color: rgba(239,68,68,0.14);
    background: rgba(239,68,68,0.06);
}
.prod-action-delete:hover[b-t8wq32w13u] {
    background: rgba(239,68,68,0.18);
    border-color: rgba(239,68,68,0.32);
    color: #fca5a5;
    transform: translateY(-1px);
}

/* ══ POPUP FORM ══════════════════════════════════════════ */
.popup-body[b-t8wq32w13u] {
    padding: 4px 2px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-field[b-t8wq32w13u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label[b-t8wq32w13u] {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255,255,255,0.40);
}

.form-input[b-t8wq32w13u] {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    padding: 11px 14px;
    border-radius: 10px;
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    transition: all 0.22s ease;
    width: 100%;
    box-sizing: border-box;
}

.form-input[b-t8wq32w13u]::placeholder { color: rgba(255,255,255,0.22); }

.form-input:focus[b-t8wq32w13u] {
    outline: none;
    border-color: rgba(201,169,110,0.45);
    background: rgba(255,255,255,0.07);
    box-shadow: 0 0 0 3px rgba(201,169,110,0.10);
}

.form-row[b-t8wq32w13u] {
    display: flex;
    gap: 12px;
}

.form-row .form-field[b-t8wq32w13u] { flex: 1; }

/* Drop zone */
.custom-drop-zone[b-t8wq32w13u] {
    padding: 28px 20px;
    border: 1.5px dashed rgba(255,255,255,0.12);
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.drop-icon[b-t8wq32w13u] {
    font-size: 28px;
    color: rgba(201,169,110,0.50);
}

.drop-text[b-t8wq32w13u] {
    color: rgba(255,255,255,0.30);
    font-size: 13px;
    margin: 0;
}

.custom-drop-zone-hover[b-t8wq32w13u] {
    border-color: rgba(201,169,110,0.45);
    background: rgba(201,169,110,0.04);
}

.upload-hint[b-t8wq32w13u] {
    font-size: 11.5px;
    color: rgba(255,255,255,0.22);
    margin-top: 2px;
}

.btn-popup-secondary[b-t8wq32w13u] {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    padding: 8px 18px;
    border-radius: 8px;
    color: rgba(255,255,255,0.60);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.22s ease;
}
.btn-popup-secondary:hover[b-t8wq32w13u] {
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.85);
}

/* Footer popup */
.popup-footer[b-t8wq32w13u] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.btn-popup-cancel[b-t8wq32w13u] {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 10px 20px;
    border-radius: 9px;
    color: rgba(255,255,255,0.50);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.22s ease;
}
.btn-popup-cancel:hover[b-t8wq32w13u] {
    background: rgba(255,255,255,0.09);
    color: rgba(255,255,255,0.75);
}

.btn-popup-save[b-t8wq32w13u] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #c9a96e, #a07c3f);
    border: none;
    padding: 10px 22px;
    border-radius: 9px;
    color: #0a1628;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(201,169,110,0.28);
}
.btn-popup-save:hover[b-t8wq32w13u] {
    background: linear-gradient(135deg, #e2c99a, #c9a96e);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(201,169,110,0.40);
}
/* /Components/Pages/users/Indexuser.razor.rz.scp.css */
/* ==========================================================================
   PÁGINA USUARIOS — DARK MODE PREMIUM
   Fondo base: #0d1117  Surface: #161b22  Elevated: #1c2333
   ========================================================================== */

/* ── Header de página ── */
.admin-page-header[b-91j30daalg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.admin-page-title[b-91j30daalg] {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 4px;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.admin-page-subtitle[b-91j30daalg] {
    font-size: 13px;
    color: rgba(255,255,255,0.38);
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.1px;
}

/* Botón Nuevo Usuario — gold pill */
.admin-btn-new[b-91j30daalg] {
    background: linear-gradient(135deg, #c9a96e 0%, #a07c3f 100%);
    color: #0a1628;
    border: none;
    border-radius: 10px;
    padding: 10px 22px;
    font-weight: 700;
    font-size: 13.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 18px rgba(201,169,110,0.28);
    transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
    letter-spacing: 0.1px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

.admin-btn-new:hover[b-91j30daalg] {
    background: linear-gradient(135deg, #e2c99a 0%, #c9a96e 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(201,169,110,0.40);
    color: #0a1628;
}

/* ── Wrapper de la grilla ── */
.admin-grid-wrapper[b-91j30daalg] {
    background: #161b22;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow:
        0 4px 24px rgba(0,0,0,0.35),
        0 1px 0 rgba(255,255,255,0.03) inset;
    overflow: hidden;
}

/* ══════════════════════════════
   OVERRIDES DxGrid DARK
══════════════════════════════ */
[b-91j30daalg] .premium-grid {
    background: #161b22 !important;
    color: rgba(255,255,255,0.75) !important;
    border: none !important;
    border-radius: 16px !important;
    --dxbl-grid-bg:                 #161b22;
    --dxbl-grid-header-bg:          #1c2333;
    --dxbl-grid-header-color:       rgba(255,255,255,0.45);
    --dxbl-grid-border-color:       rgba(255,255,255,0.05);
    --dxbl-grid-data-row-color:     rgba(255,255,255,0.75);
    --dxbl-grid-data-row-hover-bg:  rgba(201,169,110,0.06);
}

/* Cabecera */
[b-91j30daalg] .premium-grid .dxbl-grid-header-row th {
    background: #1c2333 !important;
    color: rgba(255,255,255,0.40) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 14px 16px !important;
}

/* Filas */
[b-91j30daalg] .premium-grid .dxbl-grid-data-row td {
    background: #161b22 !important;
    color: rgba(255,255,255,0.72) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    vertical-align: middle !important;
    padding: 13px 16px !important;
    transition: background 0.18s ease !important;
}

/* Fila par ligeramente diferente */
[b-91j30daalg] .premium-grid .dxbl-grid-data-row:nth-child(even) td {
    background: #1a1f2e !important;
}

/* Hover de fila */
[b-91j30daalg] .premium-grid .dxbl-grid-data-row:hover td {
    background: rgba(201,169,110,0.06) !important;
    color: rgba(255,255,255,0.90) !important;
}

/* Barra de búsqueda */
[b-91j30daalg] .premium-grid .dxbl-grid-toolbar {
    background: #1c2333 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 10px 16px !important;
}

[b-91j30daalg] .premium-grid .dxbl-grid-search-box input {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.75) !important;
    border-radius: 8px !important;
}

[b-91j30daalg] .premium-grid .dxbl-grid-search-box input::placeholder {
    color: rgba(255,255,255,0.28) !important;
}

/* Paginación */
[b-91j30daalg] .premium-grid .dxbl-grid-pager {
    background: #1c2333 !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    padding: 10px 16px !important;
    color: rgba(255,255,255,0.40) !important;
    font-size: 12px !important;
}

[b-91j30daalg] .premium-grid .dxbl-pager-nav-btn {
    color: rgba(255,255,255,0.50) !important;
}

/* Fila edición */
[b-91j30daalg] .premium-grid .dxbl-grid-edit-row td {
    background: rgba(13,147,115,0.08) !important;
    border-bottom: 1px solid rgba(13,147,115,0.20) !important;
}

/* ── Celda usuario con avatar ── */
.grid-user-cell[b-91j30daalg] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.grid-user-avatar[b-91j30daalg] {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0f1f3d, #0d9373);
    color: #c9a96e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.30);
}

.grid-user-name[b-91j30daalg] {
    font-weight: 600;
    color: rgba(255,255,255,0.88);
    font-size: 13.5px;
}

/* ── Badges de rol ── */
.grid-role-badge[b-91j30daalg] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.role-admin[b-91j30daalg] {
    background: rgba(201,169,110,0.12);
    color: #e2c99a;
    border-color: rgba(201,169,110,0.20);
}

/* SuperAdmin — oro brillante con estrella */
.role-superadmin[b-91j30daalg] {
    background: linear-gradient(135deg, rgba(201,169,110,0.20), rgba(226,201,154,0.15));
    color: #ffd700;
    border-color: rgba(255,215,0,0.35);
    box-shadow: 0 0 8px rgba(255,215,0,0.15);
}

.role-medico[b-91j30daalg] {
    background: rgba(13,147,115,0.12);
    color: #34d399;
    border-color: rgba(13,147,115,0.22);
}

.role-paciente[b-91j30daalg] {
    background: rgba(99,102,241,0.12);
    color: #a5b4fc;
    border-color: rgba(99,102,241,0.22);
}

.role-default[b-91j30daalg] {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.45);
    border-color: rgba(255,255,255,0.10);
}

.grid-role-empty[b-91j30daalg] {
    color: rgba(255,255,255,0.25);
    font-size: 12px;
    font-style: italic;
}

/* ── Botón estado activo/inactivo ── */
.grid-status-btn[b-91j30daalg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.22s ease;
    letter-spacing: 0.2px;
    font-family: 'Inter', sans-serif;
}

.grid-status-btn .status-dot[b-91j30daalg] {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.grid-status-active[b-91j30daalg] {
    background: rgba(13,147,115,0.12);
    color: #34d399;
    border-color: rgba(13,147,115,0.22);
}

.grid-status-active .status-dot[b-91j30daalg] {
    background: #0d9373;
    animation: pm-pulse-status-b-91j30daalg 2s ease-in-out infinite;
}

.grid-status-active:hover[b-91j30daalg] {
    background: rgba(239,68,68,0.10);
    color: #fca5a5;
    border-color: rgba(239,68,68,0.22);
}

.grid-status-inactive[b-91j30daalg] {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.35);
    border-color: rgba(255,255,255,0.08);
}

.grid-status-inactive .status-dot[b-91j30daalg] { background: rgba(255,255,255,0.25); }

.grid-status-inactive:hover[b-91j30daalg] {
    background: rgba(13,147,115,0.10);
    color: #34d399;
    border-color: rgba(13,147,115,0.22);
}

/* ── Botones acción icon-only ── */
.grid-actions[b-91j30daalg] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.grid-action-btn[b-91j30daalg] {
    width: 30px; height: 30px;
    border-radius: 7px;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.20s ease;
    background: transparent;
    flex-shrink: 0;
}

.grid-action-view[b-91j30daalg] {
    color: rgba(13,147,115,0.80);
    border-color: rgba(13,147,115,0.15);
    background: rgba(13,147,115,0.07);
}
.grid-action-view:hover[b-91j30daalg] {
    background: rgba(13,147,115,0.18);
    border-color: rgba(13,147,115,0.32);
    color: #34d399;
    transform: translateY(-1px);
}

.grid-action-edit[b-91j30daalg] {
    color: rgba(201,169,110,0.75);
    border-color: rgba(201,169,110,0.15);
    background: rgba(201,169,110,0.06);
}
.grid-action-edit:hover[b-91j30daalg] {
    background: rgba(201,169,110,0.16);
    border-color: rgba(201,169,110,0.30);
    color: #e2c99a;
    transform: translateY(-1px);
}

.grid-action-delete[b-91j30daalg] {
    color: rgba(239,68,68,0.70);
    border-color: rgba(239,68,68,0.15);
    background: rgba(239,68,68,0.06);
}
.grid-action-delete:hover[b-91j30daalg] {
    background: rgba(239,68,68,0.16);
    border-color: rgba(239,68,68,0.30);
    color: #fca5a5;
    transform: translateY(-1px);
}

/* ── Empty state ── */
.admin-empty-state[b-91j30daalg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    gap: 12px;
}

.empty-state-icon[b-91j30daalg] { font-size: 48px; opacity: 0.25; }

.empty-state-text[b-91j30daalg] {
    font-size: 14px;
    color: rgba(255,255,255,0.30);
    font-weight: 500;
    margin: 0;
}

/* Animación dot */
@keyframes pm-pulse-status-b-91j30daalg {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.75); }
}
