/*
 * OKDelivery — Tema administrativo violeta y azul
 * Paleta: #7f00b2 · #8e22bb · #ab49cc · #1e91ed · #4ca1f5
 * Fuente: Inter para lectura y Montserrat para títulos y cifras destacadas.
 *
 * Este archivo se carga después de los estilos originales. No modifica la
 * estructura, consultas, formularios, AJAX ni lógica PHP; solamente unifica
 * la presentación visual del panel administrativo.
 */

:root {
    --okd-purple-deep: #7f00b2;
    --okd-purple: #8e22bb;
    --okd-violet: #ab49cc;
    --okd-blue: #1e91ed;
    --okd-sky: #4ca1f5;
    --okd-ink: #17152a;
    --okd-muted: #6f6b82;
    --okd-bg: #f6f5fb;
    --okd-surface: #ffffff;
    --okd-line: rgba(127, 0, 178, 0.13);
    --okd-soft-purple: rgba(171, 73, 204, 0.11);
    --okd-soft-blue: rgba(76, 161, 245, 0.13);
    --okd-gradient: linear-gradient(135deg, #7f00b2 0%, #8e22bb 27%, #ab49cc 52%, #1e91ed 78%, #4ca1f5 100%);
    --okd-gradient-horizontal: linear-gradient(90deg, #7f00b2 0%, #ab49cc 49%, #1e91ed 100%);
    --okd-shadow-sm: 0 5px 18px rgba(74, 35, 115, 0.08);
    --okd-shadow-md: 0 12px 30px rgba(68, 29, 111, 0.13);
    --okd-shadow-lg: 0 20px 52px rgba(42, 17, 79, 0.20);

    /* Compatibilidad con variables antiguas de todas las páginas. */
    --primary-red: #7f00b2;
    --primary-red-dark: #690092;
    --primary-yellow: #4ca1f5;
    --primary-yellow-dark: #1e91ed;
    --magenta: #ab49cc;
    --magenta-dark: #8e22bb;
    --ivory: #fbf9ff;
    --ivory-dark: #f1ebf8;
    --gray-bg: #f6f5fb;
    --text-dark: #17152a;
    --text-gray: #6f6b82;
    --text-light: #ffffff;
    --border-radius: 20px;
    --shadow-sm: var(--okd-shadow-sm);
    --shadow-md: var(--okd-shadow-md);

    --merchant-red: #7f00b2;
    --merchant-red-dark: #690092;
    --merchant-yellow: #4ca1f5;
    --merchant-magenta: #ab49cc;
    --merchant-ivory: #fbf9ff;
    --merchant-text: #17152a;
    --merchant-muted: #6f6b82;
    --merchant-green: #1e91ed;
    --merchant-border: rgba(127, 0, 178, 0.14);
    --merchant-shadow: var(--okd-shadow-sm);

    --fee-red: #7f00b2;
    --fee-red-dark: #690092;
    --fee-magenta: #ab49cc;
    --fee-yellow: #4ca1f5;
    --fee-ivory: #fbf9ff;
    --fee-text: #17152a;
    --fee-muted: #6f6b82;
    --fee-border: rgba(127, 0, 178, 0.14);
    --fee-green: #1e91ed;
    --fee-shadow: var(--okd-shadow-sm);

    --zone-red: #7f00b2;
    --zone-magenta: #ab49cc;
    --zone-yellow: #4ca1f5;
    --zone-ivory: #fbf9ff;
    --zone-border: rgba(127, 0, 178, 0.14);
    --zone-muted: #6f6b82;
    --zone-green: #1e91ed;
    --zone-shadow: var(--okd-shadow-sm);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--okd-bg);
    scrollbar-width: thin;
    scrollbar-color: var(--okd-violet) rgba(127, 0, 178, 0.08);
}

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: rgba(127, 0, 178, 0.06); }
*::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--okd-gradient);
    background-clip: padding-box;
}

body,
button,
input,
select,
textarea,
.btn,
.form-control,
.form-select {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.logo-area h1,
.dashboard-title h2,
.page-header h2,
.merchant-page-header h2,
.fee-page-header h2,
.zone-header h2,
.orders-head h2,
.activity-head h2,
.detail-head h2,
.stat-value,
.merchant-card-name,
.store-title,
.merchant-title,
.login-header h1,
.login-box h1,
.okd-setup-card h1 {
    font-family: "Montserrat", "Inter", sans-serif !important;
}

body:not(.okd-setup-body) {
    color: var(--okd-ink) !important;
    background:
        radial-gradient(circle at 7% 4%, rgba(171, 73, 204, 0.17), transparent 30rem),
        radial-gradient(circle at 96% 13%, rgba(30, 145, 237, 0.15), transparent 28rem),
        linear-gradient(180deg, #fbfaff 0%, #f3f7ff 48%, #f8f6fc 100%) !important;
}

body:not(.okd-setup-body)::after { content: none !important; }

::selection { color: #fff; background: var(--okd-purple); }
a { text-decoration-color: rgba(127, 0, 178, 0.4); }

/* Encabezado administrativo */
.admin-header {
    border-bottom: 0 !important;
    background: var(--okd-gradient) !important;
    box-shadow: 0 15px 36px rgba(73, 25, 130, 0.26) !important;
}

.admin-header::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.34);
}

.menu-toggle-btn,
.user-info {
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 18px rgba(42, 18, 86, 0.16) !important;
    backdrop-filter: none;
}

.menu-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.24) !important;
    transform: translateY(-1px) !important;
}

.logo-area h1,
.logo-area h1 span,
.user-info,
.user-info i,
.user-info span {
    color: #fff !important;
}

.logo-area h1 {
    font-weight: 800 !important;
    letter-spacing: -0.045em !important;
}

.logo-area img {
    border-radius: 13px;
    filter: drop-shadow(0 9px 16px rgba(43, 15, 80, 0.22)) !important;
}

.admin-sidebar {
    border-right: 1px solid var(--okd-line) !important;
    color: var(--okd-ink) !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 22px 0 58px rgba(45, 19, 80, 0.20) !important;
    backdrop-filter: none;
}

.sidebar-header {
    position: relative;
    overflow: hidden;
    background: var(--okd-gradient) !important;
}

.sidebar-header::before,
.sidebar-header::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
}
.sidebar-header::before { width: 170px; height: 170px; top: -105px; right: -38px; }
.sidebar-header::after { width: 90px; height: 90px; bottom: -48px; left: -25px; }

.sidebar-avatar,
.sidebar-header h4,
.sidebar-header p,
.sidebar-close {
    position: relative;
    z-index: 1;
}

.sidebar-avatar {
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 16px 28px rgba(39, 13, 76, 0.20) !important;
}
.sidebar-avatar i { color: #fff !important; }

.sidebar-menu a {
    margin: 4px 12px !important;
    border: 0 !important;
    border-radius: 14px !important;
    color: var(--okd-ink) !important;
    transition: transform .18s ease, color .18s ease, background .18s ease !important;
}
.sidebar-menu a i { color: #817a91 !important; }
.sidebar-menu a:hover {
    color: var(--okd-purple-deep) !important;
    background: linear-gradient(135deg, var(--okd-soft-purple), var(--okd-soft-blue)) !important;
    transform: translateX(3px);
}
.sidebar-menu a.active {
    color: #fff !important;
    background: var(--okd-gradient-horizontal) !important;
    box-shadow: 0 12px 24px rgba(101, 31, 156, 0.22) !important;
}
.sidebar-menu a.active i { color: #fff !important; }
.sidebar-footer { border-color: var(--okd-line) !important; }

.logout-btn {
    border: 0 !important;
    border-radius: 14px !important;
    color: #fff !important;
    background: var(--okd-gradient-horizontal) !important;
    box-shadow: 0 12px 24px rgba(102, 31, 158, 0.22) !important;
}

.sidebar-overlay { background: rgba(20, 12, 35, 0.58) !important; backdrop-filter: none !important; }
.admin-main-content { position: relative; }

/* Encabezados de páginas */
.dashboard-title,
.page-header,
.merchant-page-header,
.fee-page-header,
.zone-header,
.orders-head,
.activity-head,
.detail-head,
.section-header,
.section-title {
    position: relative;
}

.dashboard-title::before,
.page-header::before,
.merchant-page-header::before,
.fee-page-header::before,
.zone-header::before,
.orders-head::before,
.activity-head::before,
.detail-head::before {
    content: "";
    position: absolute;
    top: 3px;
    left: -13px;
    width: 5px;
    height: 48px;
    border-radius: 999px;
    background: var(--okd-gradient);
    box-shadow: 0 7px 16px rgba(127, 0, 178, 0.25);
}

.dashboard-title h2,
.page-header h2,
.merchant-page-header h2,
.fee-page-header h2,
.zone-header h2,
.orders-head h2,
.activity-head h2,
.detail-head h2,
.section-header h3,
.section-title {
    color: var(--okd-ink) !important;
    letter-spacing: -0.045em !important;
}

.dashboard-title p,
.page-header p,
.merchant-page-header p,
.fee-page-header p,
.zone-header p,
.orders-head p,
.activity-head p,
.text-muted {
    color: var(--okd-muted) !important;
}

.dashboard-title h2 i,
.page-header h2 i,
.merchant-page-header h2 i,
.fee-page-header h2 i,
.zone-header h2 i,
.orders-head h2 i,
.activity-head h2 i,
.detail-head h2 i,
.section-title i {
    color: var(--okd-purple) !important;
}

/* Botones */
.btn-primary-custom,
.btn-merchant-primary,
.fee-primary-button,
.zone-primary,
.orders-primary,
.btn-login,
.btn-primary,
.merchant-primary,
.primary-button,
button[type="submit"]:not(.btn-secondary):not(.btn-light):not(.btn-close):not(.btn-danger),
.modal-footer .btn:not(.btn-secondary):not(.btn-light):not(.btn-danger),
.wizard-actions-right .btn:not(.btn-secondary) {
    border: 0 !important;
    color: #fff !important;
    background: var(--okd-gradient-horizontal) !important;
    box-shadow: 0 12px 25px rgba(99, 31, 155, 0.23) !important;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}

.btn-primary-custom:hover,
.btn-merchant-primary:hover,
.fee-primary-button:hover,
.zone-primary:hover,
.orders-primary:hover,
.btn-login:hover,
.btn-primary:hover,
button[type="submit"]:not(.btn-secondary):not(.btn-light):not(.btn-close):not(.btn-danger):hover {
    color: #fff !important;
    transform: translateY(-1px) !important;
    filter: saturate(1.08);
    box-shadow: 0 16px 31px rgba(81, 31, 145, 0.28) !important;
}

.btn-secondary,
.btn-merchant-outline,
.btn-outline-custom,
.btn-outline-secondary,
.detail-back,
.section-link,
.btn-light {
    border: 1px solid var(--okd-line) !important;
    color: var(--okd-purple-deep) !important;
    background: linear-gradient(135deg, rgba(171, 73, 204, 0.09), rgba(76, 161, 245, 0.11)) !important;
    box-shadow: 0 7px 16px rgba(67, 31, 108, 0.07) !important;
}

.btn-secondary:hover,
.btn-merchant-outline:hover,
.btn-outline-custom:hover,
.btn-outline-secondary:hover,
.detail-back:hover,
.btn-light:hover {
    color: #fff !important;
    background: var(--okd-gradient-horizontal) !important;
}

.btn-danger,
.btn-delete,
.delete,
.delete-zone,
.order-icon.cancel {
    border-color: rgba(127, 0, 178, 0.18) !important;
    color: #fff !important;
    background: linear-gradient(135deg, #6b00a0, #8e22bb) !important;
}

.btn-icon,
.merchant-icon-button,
.zone-action,
.order-icon {
    border: 1px solid var(--okd-line) !important;
    color: var(--okd-purple) !important;
    background: linear-gradient(135deg, var(--okd-soft-purple), var(--okd-soft-blue)) !important;
}
.btn-icon:hover,
.merchant-icon-button:hover,
.zone-action:hover,
.order-icon:hover {
    color: #fff !important;
    background: var(--okd-gradient-horizontal) !important;
}

/* Tarjetas, paneles y filtros */
.stat-card,
.recent-section,
.top-section,
.filters-bar,
.merchant-filters,
.orders-filters,
.activity-filter,
.fee-summary-card,
.fee-table-card,
.zone-summary,
.zone-card,
.merchant-card,
.merchant-detail-card,
.store-detail-card,
.store-card,
.users-table-container,
.drivers-table-container,
.activity-table-wrap,
.order-card-v5,
.detail-stat,
.detail-panel,
.wizard-summary-section,
.store-account-preview,
.login-card,
.login-box,
.modal-content {
    border: 1px solid var(--okd-line) !important;
    border-radius: 22px !important;
    background: var(--okd-surface) !important;
    box-shadow: var(--okd-shadow-sm) !important;
    backdrop-filter: none;
}

.stat-card,
.merchant-card,
.store-card,
.zone-card,
.order-card-v5,
.detail-stat {
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease !important;
}
.stat-card:hover,
.merchant-card:hover,
.store-card:hover,
.zone-card:hover,
.order-card-v5:hover,
.detail-stat:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--okd-shadow-md) !important;
}

.stat-card::after,
.merchant-card::after,
.zone-card::after,
.order-card-v5::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -55px;
    width: 135px;
    height: 135px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(171, 73, 204, 0.10), rgba(76, 161, 245, 0.12));
    pointer-events: none;
}

.stat-icon,
.store-icon,
.merchant-logo-card,
.meta-item i,
.order-customer > i,
.confirmation-icon,
.fee-result-icon,
.alert-modal-icon,
.creation-result > i,
.zone-empty > i,
.empty-state > i {
    color: var(--okd-purple) !important;
    background: linear-gradient(135deg, var(--okd-soft-purple), var(--okd-soft-blue)) !important;
}

.stat-value,
.merchant-card-name,
.store-name,
.store-title,
.merchant-title,
.top-name,
.order-customer strong,
.detail-stat strong {
    color: var(--okd-ink) !important;
}
.stat-label,
.stat-header,
.top-stats,
.merchant-card-user,
.merchant-card-stat span,
.store-contact-item,
.meta-item span,
.zone-coordinate span,
.zone-radius,
.order-card-row span,
.activity-meta,
.detail-stat span {
    color: var(--okd-muted) !important;
}

/* Formularios */
.form-control,
.form-select,
.wizard-control,
.store-form-control,
.fee-control,
.zone-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
    border: 1px solid rgba(127, 0, 178, 0.16) !important;
    border-radius: 13px !important;
    color: var(--okd-ink) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: inset 0 1px 2px rgba(42, 26, 66, 0.035) !important;
}

.form-control:focus,
.form-select:focus,
.wizard-control:focus,
.store-form-control:focus,
.fee-control:focus,
.zone-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--okd-violet) !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(171, 73, 204, 0.13) !important;
}

.form-label,
.wizard-form-label,
.store-form-label,
.fee-form-label,
.zone-label {
    color: var(--okd-ink) !important;
    font-weight: 750 !important;
}

.input-group-text,
.input-group .btn {
    border-color: rgba(127, 0, 178, 0.16) !important;
}

/* Tablas */
.users-table,
.drivers-table,
.fee-table,
.activity-table,
.orders-table {
    color: var(--okd-ink) !important;
}

.users-table thead,
.drivers-table thead,
.fee-table thead,
.activity-table thead,
.orders-table thead {
    color: #fff !important;
    background: var(--okd-gradient-horizontal) !important;
}

.users-table thead th,
.drivers-table thead th,
.fee-table thead th,
.activity-table thead th,
.orders-table thead th {
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: .025em;
}

.users-table tbody tr,
.drivers-table tbody tr,
.fee-table tbody tr,
.activity-table tbody tr,
.orders-table tbody tr {
    border-color: rgba(127, 0, 178, 0.08) !important;
    transition: background .16s ease !important;
}

.users-table tbody tr:hover,
.drivers-table tbody tr:hover,
.fee-table tbody tr:hover,
.activity-table tbody tr:hover,
.orders-table tbody tr:hover {
    background: linear-gradient(90deg, rgba(171, 73, 204, 0.055), rgba(76, 161, 245, 0.055)) !important;
}

/* Estados y etiquetas */
.status-badge,
.type-badge,
.merchant-status,
.zone-status,
.order-pill,
.actor-pill,
.activity-count {
    border: 1px solid rgba(127, 0, 178, 0.13) !important;
    color: var(--okd-purple-deep) !important;
    background: var(--okd-soft-purple) !important;
}

.status-badge.status-1,
.status-badge.active,
.merchant-status.active,
.zone-status.active,
.order-pill.delivered,
.status-delivered,
.status-online {
    color: #0875c8 !important;
    background: rgba(30, 145, 237, 0.13) !important;
}

.status-badge.status-2,
.status-preparing,
.status-assigned,
.status-delivering,
.order-pill.delivering,
.order-pill.assigned {
    color: #6d1a9e !important;
    background: rgba(171, 73, 204, 0.14) !important;
}

.status-badge.status-0,
.status-badge.inactive,
.merchant-status.inactive,
.zone-status.inactive,
.status-cancelled,
.order-pill.cancelled,
.status-offline {
    color: #746e80 !important;
    background: rgba(109, 102, 121, 0.11) !important;
}

.type-badge {
    color: #0d78c7 !important;
    background: rgba(76, 161, 245, 0.13) !important;
}

/* Modales */
.modal { backdrop-filter: none; }
.modal-backdrop.show { opacity: .56 !important; background: #180d2b !important; }
.modal-dialog-centered { min-height: calc(100% - 1rem) !important; }
.modal-content { overflow: hidden; box-shadow: var(--okd-shadow-lg) !important; }
.modal-header {
    border-bottom: 0 !important;
    color: #fff !important;
    background: var(--okd-gradient) !important;
}
.modal-header .modal-title,
.modal-header i { color: #fff !important; }
.modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .85; }
.modal-body { color: var(--okd-ink) !important; background: rgba(255, 255, 255, 0.98) !important; }
.modal-footer { border-color: var(--okd-line) !important; background: #fbfaff !important; }

.wizard-progress-item.active .wizard-progress-number,
.wizard-progress-item.completed .wizard-progress-number,
.wizard-progress-number {
    border-color: var(--okd-violet) !important;
}
.wizard-progress-item.active .wizard-progress-number,
.wizard-progress-item.completed .wizard-progress-number {
    color: #fff !important;
    background: var(--okd-gradient-horizontal) !important;
}
.wizard-progress-item::after { background: rgba(127, 0, 178, 0.13) !important; }

/* Alertas y estados vacíos */
.alert-danger,
.error-message,
.error,
.wizard-error,
.fee-modal-error,
.zone-form-error {
    border: 1px solid rgba(127, 0, 178, 0.14) !important;
    border-left: 4px solid var(--okd-purple) !important;
    color: #76208f !important;
    background: linear-gradient(135deg, rgba(171, 73, 204, 0.11), rgba(76, 161, 245, 0.09)) !important;
}

.alert-warning,
.alert-info {
    border-color: rgba(30, 145, 237, 0.17) !important;
    color: #176ea9 !important;
    background: rgba(76, 161, 245, 0.10) !important;
}

.empty-state,
.merchant-empty,
.fee-empty,
.zone-empty,
.order-empty {
    border-color: rgba(127, 0, 178, 0.15) !important;
    color: var(--okd-muted) !important;
    background: rgba(255, 255, 255, 0.88) !important;
}
.empty-state h3,
.empty-state h4,
.merchant-empty h3,
.fee-empty h3,
.zone-empty h3,
.order-empty h3 { color: var(--okd-ink) !important; }

/* Detalle de orden y mapa */
.detail-map {
    border: 1px solid var(--okd-line) !important;
    box-shadow: inset 0 0 0 1px rgba(76, 161, 245, 0.05) !important;
}
.audit-item::before { background: linear-gradient(var(--okd-violet), rgba(30, 145, 237, 0.15)) !important; }
.audit-dot { background: var(--okd-gradient-horizontal) !important; }
.driver-map-icon { background: var(--okd-gradient-horizontal) !important; }
.detail-legend i { box-shadow: 0 0 0 3px rgba(127, 0, 178, 0.08); }

/* Paginación */
.activity-pagination a,
.pagination a,
.page-link {
    border-color: var(--okd-line) !important;
    color: var(--okd-purple) !important;
    background: #fff !important;
}
.activity-pagination a:hover,
.pagination a:hover,
.page-link:hover,
.page-item.active .page-link {
    border-color: transparent !important;
    color: #fff !important;
    background: var(--okd-gradient-horizontal) !important;
}

/* Acceso moderno */
body.okd-admin-login-body,
body:has(.login-container),
body:has(.login-box) {
    min-height: 100vh !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.20), transparent 22rem),
        radial-gradient(circle at 86% 88%, rgba(76, 161, 245, 0.28), transparent 28rem),
        var(--okd-gradient) !important;
}

.login-container { max-width: 490px !important; }
.login-card,
.login-box {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.56) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 34px 78px rgba(39, 13, 74, 0.30) !important;
}
.login-header {
    position: relative;
    overflow: hidden;
    background: var(--okd-gradient) !important;
}
.login-header::before,
.login-header::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
}
.login-header::before { width: 190px; height: 190px; top: -115px; right: -35px; }
.login-header::after { width: 100px; height: 100px; bottom: -55px; left: -28px; }
.login-header > * { position: relative; z-index: 1; }
.login-header h1,
.login-header h1 span,
.login-header p { color: #fff !important; }
.logo-wrapper img {
    border-radius: 22px;
    filter: drop-shadow(0 16px 28px rgba(36, 10, 68, .24)) !important;
}
.login-body,
.login-footer { background: transparent !important; }
.login-footer { border-color: var(--okd-line) !important; }

/* Login alternativo antiguo */
.login-box {
    max-width: 410px !important;
    padding: 42px 36px !important;
    border-top: 0 !important;
    color: var(--okd-ink) !important;
}
.login-box h1,
.login-box h1 span { color: var(--okd-purple-deep) !important; }
.login-box > p { color: var(--okd-muted) !important; }
.login-box .input-group i { color: var(--okd-purple) !important; }
.login-box button {
    border-radius: 14px !important;
    background: var(--okd-gradient-horizontal) !important;
    box-shadow: 0 12px 25px rgba(99, 31, 155, .23) !important;
}

/* Página de configuración */
.okd-setup-body {
    display: grid;
    min-height: 100vh;
    margin: 0;
    padding: 24px;
    place-items: center;
    color: var(--okd-ink);
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 255, 255, .20), transparent 22rem),
        radial-gradient(circle at 86% 88%, rgba(76, 161, 245, .28), transparent 28rem),
        var(--okd-gradient);
}
.okd-setup-card {
    width: min(100%, 520px);
    padding: 42px 34px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 28px;
    background: rgba(255, 255, 255, .95);
    box-shadow: var(--okd-shadow-lg);
    text-align: center;
    backdrop-filter: none;
}
.okd-setup-icon {
    display: grid;
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    place-items: center;
    border-radius: 23px;
    color: #fff;
    background: var(--okd-gradient);
    box-shadow: 0 16px 30px rgba(94, 29, 151, .25);
    font-size: 29px;
}
.okd-setup-icon.is-error { background: linear-gradient(135deg, #690092, #8e22bb); }
.okd-eyebrow {
    margin: 0 0 7px;
    color: var(--okd-purple);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.okd-setup-card h1 { margin: 0 0 12px; font-size: 30px; letter-spacing: -.045em; }
.okd-setup-card > p:not(.okd-eyebrow) { margin: 0; color: var(--okd-muted); line-height: 1.65; }
.okd-credentials-box {
    display: flex;
    margin: 24px 0;
    padding: 15px 17px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--okd-line);
    border-radius: 15px;
    background: linear-gradient(135deg, var(--okd-soft-purple), var(--okd-soft-blue));
}
.okd-credentials-box span { color: var(--okd-muted); font-size: 12px; font-weight: 700; }
.okd-credentials-box strong { color: var(--okd-purple-deep); }
.okd-setup-button {
    display: inline-flex;
    width: 100%;
    min-height: 54px;
    margin-top: 24px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 15px;
    color: #fff;
    background: var(--okd-gradient-horizontal);
    box-shadow: 0 13px 26px rgba(99, 31, 155, .23);
    font-weight: 800;
    text-decoration: none;
}


/* ================================================================
 * Rendimiento y menú lateral optimizados
 * ================================================================ */
:root {
    --admin-header-height: 70px;
}

body:not(.okd-setup-body) {
    padding-top: var(--admin-header-height) !important;
    background-attachment: scroll !important;
}

body.admin-menu-open {
    overflow: hidden !important;
    touch-action: none;
}

.admin-header-content {
    min-height: var(--admin-header-height);
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    flex-wrap: nowrap !important;
}

.admin-logo-mark {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    width: 45px;
    height: 45px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 13px;
    background: rgba(255,255,255,.16);
    box-shadow: 0 6px 14px rgba(43,15,80,.16);
}

.admin-logo-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0 !important;
    filter: none !important;
}

.admin-logo-mark > i {
    display: none;
    color: #fff;
    font-size: 21px;
}

.admin-logo-mark.fallback img { display: none; }
.admin-logo-mark.fallback > i { display: block; }

.menu-toggle-btn,
.user-info,
.admin-sidebar,
.sidebar-overlay,
.modal,
.modal-backdrop,
.modal-content,
.login-card,
.login-box,
.okd-setup-card,
.stat-card,
.recent-section,
.top-section,
.filters-bar,
.merchant-filters,
.orders-filters,
.activity-filter,
.fee-summary-card,
.fee-table-card,
.zone-summary,
.zone-card,
.merchant-card,
.merchant-detail-card,
.store-detail-card,
.store-card,
.users-table-container,
.drivers-table-container,
.activity-table-wrap,
.order-card-v5,
.detail-stat,
.detail-panel,
.wizard-summary-section,
.store-account-preview {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.admin-sidebar {
    top: var(--admin-header-height) !important;
    bottom: 0 !important;
    height: auto !important;
    z-index: 1025 !important;
    background: #fff !important;
    transform: translate3d(-101%, 0, 0) !important;
    transition: transform .2s ease-out !important;
    will-change: transform;
    backface-visibility: hidden;
}

.admin-sidebar.open {
    transform: translate3d(0, 0, 0) !important;
}

.sidebar-close {
    display: none !important;
}

.sidebar-overlay {
    top: var(--admin-header-height) !important;
    z-index: 1020 !important;
    display: block !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: rgba(20, 12, 35, .48) !important;
    transition: opacity .18s ease, visibility 0s linear .18s !important;
}

.sidebar-overlay.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s !important;
}

.admin-menu-open .menu-toggle-btn {
    background: rgba(255,255,255,.25) !important;
}

.sidebar-menu {
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* Las decoraciones en cada tarjeta generaban repintados masivos en listados. */
.merchant-card::after,
.zone-card::after,
.order-card-v5::after {
    content: none !important;
}

/* Fondo sólido: conserva el diseño y evita composición GPU innecesaria. */
.stat-card,
.recent-section,
.top-section,
.filters-bar,
.merchant-filters,
.orders-filters,
.activity-filter,
.fee-summary-card,
.fee-table-card,
.zone-summary,
.zone-card,
.merchant-card,
.merchant-detail-card,
.store-detail-card,
.store-card,
.users-table-container,
.drivers-table-container,
.activity-table-wrap,
.order-card-v5,
.detail-stat,
.detail-panel,
.wizard-summary-section,
.store-account-preview,
.modal-content {
    background: #fff !important;
}

@media (hover: none) {
    .stat-card:hover,
    .merchant-card:hover,
    .store-card:hover,
    .zone-card:hover,
    .order-card-v5:hover,
    .detail-stat:hover,
    .sidebar-menu a:hover,
    .menu-toggle-btn:hover,
    .logout-btn:hover {
        transform: none !important;
    }
}

@media (max-width: 768px) {
    :root { --admin-header-height: 66px; }
    .dashboard-title::before,
    .page-header::before,
    .merchant-page-header::before,
    .fee-page-header::before,
    .zone-header::before,
    .orders-head::before,
    .activity-head::before,
    .detail-head::before {
        left: -8px;
        width: 4px;
    }

    .stat-card,
    .recent-section,
    .top-section,
    .filters-bar,
    .merchant-filters,
    .orders-filters,
    .activity-filter,
    .fee-summary-card,
    .fee-table-card,
    .zone-summary,
    .zone-card,
    .merchant-card,
    .merchant-detail-card,
    .store-detail-card,
    .store-card,
    .users-table-container,
    .drivers-table-container,
    .activity-table-wrap,
    .order-card-v5,
    .detail-stat,
    .detail-panel,
    .modal-content {
        border-radius: 18px !important;
    }

    .admin-main-content { padding: 18px 14px !important; }
    .admin-logo-mark { width: 38px; height: 38px; border-radius: 11px; }
    .header-right { gap: 8px !important; }
    .login-card, .login-box { border-radius: 23px !important; }
    .okd-setup-card { padding: 34px 22px; border-radius: 23px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}