/* ==========================================================
   MIRUTA · Tema claro premium
   Aplicado después de app.css/dashboard.css/public.css
   Mantiene stack: PHP + MySQL + HTML + CSS + JavaScript + jQuery
   ========================================================== */
:root {
    color-scheme: light;
    --primary-blue: #006DFF;
    --electric-blue: #009BFF;
    --brand-yellow: #FFC107;
    --brand-orange: #FF9F2F;
    --brand-black: #070B14;
    --bg-main: #F6F8FC;
    --bg-secondary: #EEF3FA;
    --bg-card: #FFFFFF;
    --bg-card-soft: #F8FAFD;
    --border-soft: rgba(7, 11, 20, 0.10);
    --border-blue: rgba(0, 109, 255, 0.28);
    --text-main: #070B14;
    --text-muted: #64748B;
    --text-soft: #334155;
    --success: #16A34A;
    --warning: #D97706;
    --danger: #DC2626;
    --info: #0284C7;
    --surface-glass: rgba(255,255,255,.82);
    --surface-glass-strong: rgba(255,255,255,.96);
    --shadow-soft: 0 18px 55px rgba(15, 23, 42, 0.10);
    --shadow-blue: 0 14px 34px rgba(0, 109, 255, 0.18);
    --shadow-yellow: 0 14px 32px rgba(255, 193, 7, 0.22);
}

html, body {
    background: var(--bg-main) !important;
    color: var(--text-main) !important;
}
body {
    background:
        radial-gradient(circle at 18% 0%, rgba(0, 155, 255, .12), transparent 24rem),
        radial-gradient(circle at 92% 12%, rgba(255, 193, 7, .16), transparent 22rem),
        linear-gradient(180deg, #FFFFFF 0%, #F7FAFC 42%, #EEF3FA 100%) !important;
}

/* Superficies generales */
.glass-card,
.module-card,
.panel-card,
.kpi-card,
.auth-card,
.hero-card,
.table-card,
.detail-card,
.catalog-card,
.inventory-form-card,
.dashboard-hero,
.dashboard-alert,
.order-total-bar,
.order-summary-box,
.ticket-shell,
.mobile-sticky-card,
.route-stop-card,
.alert-item,
.mini-list div,
.detail-list div,
.route-stop,
.customer-avatar,
.empty-state,
.timeline div,
.quick-action,
.product-preview-card,
.notification-card,
.whatsapp-template-card,
.report-card {
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(7, 11, 20, .10) !important;
    box-shadow: var(--shadow-soft) !important;
    color: var(--text-main) !important;
    backdrop-filter: blur(14px);
}

.panel-card,
.kpi-card,
.module-card,
.table-card,
.auth-card,
.hero-card {
    background: linear-gradient(180deg, #FFFFFF, #F8FAFD) !important;
}

/* Texto */
p,
small,
.module-card p,
.panel-card p,
.hero p,
.section-heading p,
.split-section p,
.dashboard-hero p,
.dashboard-alert span,
.alert-item small,
.detail-list dt,
.mini-list small,
.data-table td small,
.context-pills span,
.customer-main-card p,
.route-stop small,
.kpi-card span,
.user-pill,
.system-pill,
.public-navlinks,
.topbar .eyebrow {
    color: var(--text-muted) !important;
}

h1, h2, h3, h4, h5, h6,
.kpi-card strong,
.panel-card h2,
.data-table td strong,
.detail-list dd,
.empty-state h3,
.brand strong,
.route-stop strong,
.customer-main-card h3 {
    color: var(--text-main) !important;
}

.eyebrow {
    color: #B77900 !important;
}

/* Navbar pública y dashboard */
.public-body {
    background:
        radial-gradient(circle at 18% 5%, rgba(0,155,255,.11), transparent 27rem),
        radial-gradient(circle at 82% 0%, rgba(255,193,7,.14), transparent 24rem),
        linear-gradient(180deg, #FFFFFF, #F6F8FC 68%, #EEF3FA) !important;
}
.public-navbar,
.topbar,
.sidebar,
.mobile-bottom-nav,
.user-pill,
.system-pill,
.topbar-notification,
.mobile-sidebar-toggle {
    background: rgba(255,255,255,.88) !important;
    border-color: rgba(7, 11, 20, .10) !important;
    color: var(--text-main) !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.08) !important;
    backdrop-filter: blur(20px);
}
.public-navlinks a:hover,
.sidebar-link:hover,
.sidebar-link.is-active,
.mobile-bottom-link:hover,
.mobile-bottom-link.is-active {
    background: linear-gradient(135deg, rgba(0,109,255,.12), rgba(0,155,255,.08)) !important;
    color: var(--primary-blue) !important;
    box-shadow: inset 0 0 0 1px rgba(0,109,255,.18) !important;
}

.dashboard-body {
    background:
        radial-gradient(circle at 12% 0%, rgba(0,155,255,.10), transparent 25rem),
        linear-gradient(180deg, #FFFFFF, #F7FAFC 45%, #EEF3FA) !important;
}
.sidebar {
    border-right: 1px solid rgba(7,11,20,.08) !important;
}
.sidebar-link,
.mobile-bottom-link {
    color: #475569 !important;
}
.sidebar-link svg,
.mobile-bottom-link svg,
.quick-action svg,
.context-pills svg {
    color: var(--primary-blue) !important;
}

/* Logo limpio sobre fondo claro */
.brand img,
.hero-logo,
.auth-brand img {
    background: #FFFFFF !important;
    border-color: rgba(7,11,20,.08) !important;
    box-shadow: 0 12px 28px rgba(15,23,42,.08) !important;
    object-fit: contain !important;
}
.brand small {
    color: #64748B !important;
}

/* Formularios */
input, select, textarea,
.filters-grid input,
.filters-grid select,
.customer-form input,
.customer-form select,
.customer-form textarea,
.catalog-form input,
.inventory-mini-form input,
.inventory-mini-form select,
.route-assign-form input,
.route-assign-form select,
.route-check-form input,
.route-check-form select,
.form-grid-3 input,
.form-grid-3 select,
.form-grid-3 textarea,
.form-grid-4 input,
.form-grid-4 select,
.form-grid-4 textarea,
.order-product-picker input,
.order-product-picker select,
.order-items-table input,
.order-items-table select,
.date-filter-card input {
    background: #FFFFFF !important;
    color: var(--text-main) !important;
    border-color: rgba(7,11,20,.14) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
}
input::placeholder,
textarea::placeholder {
    color: #94A3B8 !important;
}
input:focus, select:focus, textarea:focus,
.filters-grid input:focus,
.filters-grid select:focus,
.customer-form input:focus,
.customer-form select:focus,
.customer-form textarea:focus,
.catalog-form input:focus,
.inventory-mini-form input:focus,
.inventory-mini-form select:focus,
.route-assign-form input:focus,
.route-assign-form select:focus,
.route-check-form input:focus,
.route-check-form select:focus,
.date-filter-card input:focus {
    border-color: rgba(0,109,255,.40) !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 4px rgba(0,109,255,.10) !important;
}
select option { color: #070B14 !important; background: #FFFFFF !important; }
label,
.filters-grid label,
.customer-form label,
.inventory-mini-form label,
.route-assign-form label,
.route-check-form label,
.form-grid-3 label,
.form-grid-4 label,
.order-product-picker label,
.date-filter-card label {
    color: #334155 !important;
}
label span,
.filters-grid label span,
.customer-form label span,
.inventory-mini-form label span,
.route-assign-form label span,
.form-grid-3 label span,
.form-grid-4 label span,
.order-product-picker label span {
    color: #64748B !important;
}

/* Botones */
.btn {
    color: var(--text-main) !important;
    background: #FFFFFF !important;
    border-color: rgba(7,11,20,.12) !important;
    box-shadow: 0 10px 25px rgba(15,23,42,.06) !important;
}
.btn:hover {
    border-color: rgba(0,109,255,.30) !important;
    box-shadow: var(--shadow-blue) !important;
}
.btn-primary {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #006DFF, #009BFF) !important;
    border-color: transparent !important;
    box-shadow: 0 16px 34px rgba(0,109,255,.26) !important;
}
.btn-soft {
    background: #F8FAFD !important;
}
.btn-ghost {
    background: transparent !important;
}
.btn-warning,
.btn-yellow {
    color: #070B14 !important;
    background: linear-gradient(135deg, #FFC107, #FFD45A) !important;
    border-color: rgba(180, 120, 0, .18) !important;
    box-shadow: var(--shadow-yellow) !important;
}

/* Tablas y listas */
.table-responsive {
    border-color: rgba(7,11,20,.10) !important;
    background: #FFFFFF !important;
    box-shadow: var(--shadow-soft) !important;
}
.data-table th,
.dashboard-table th {
    background: #F1F5F9 !important;
    color: #64748B !important;
}
.data-table td,
.dashboard-table td {
    border-color: rgba(7,11,20,.08) !important;
    color: var(--text-main) !important;
}
.data-table tr:hover td,
.dashboard-table tr:hover td {
    background: rgba(0,109,255,.035) !important;
}

/* Badges y estados con buena legibilidad en blanco */
.badge-success,
.status-success,
.status-active,
.status-paid,
.status-delivered,
.status-approved,
.status-completed,
.badge-success .badge-icon {
    background: rgba(22, 163, 74, .10) !important;
    color: #15803D !important;
    border-color: rgba(22, 163, 74, .26) !important;
}
.badge-warning,
.status-warning,
.status-pending,
.status-partial,
.status-prepared,
.status-low,
.badge-warning .badge-icon {
    background: rgba(217, 119, 6, .12) !important;
    color: #B45309 !important;
    border-color: rgba(217, 119, 6, .28) !important;
}
.badge-info,
.status-info,
.status-confirmed,
.status-loaded,
.badge-info .badge-icon {
    background: rgba(2, 132, 199, .10) !important;
    color: #0369A1 !important;
    border-color: rgba(2, 132, 199, .26) !important;
}
.badge-danger,
.status-danger,
.status-cancelled,
.status-overdue,
.status-inactive,
.status-rejected,
.badge-danger .badge-icon {
    background: rgba(220, 38, 38, .10) !important;
    color: #B91C1C !important;
    border-color: rgba(220, 38, 38, .26) !important;
}
.badge-muted,
.status-muted,
.status-draft {
    background: rgba(100,116,139,.10) !important;
    color: #475569 !important;
    border-color: rgba(100,116,139,.22) !important;
}

/* Componentes operativos */
.icon-bubble,
.timeline-icon,
.customer-avatar {
    background: linear-gradient(135deg, rgba(0,109,255,.12), rgba(0,155,255,.06)) !important;
    color: var(--primary-blue) !important;
    border-color: rgba(0,109,255,.20) !important;
    box-shadow: 0 14px 28px rgba(0,109,255,.12) !important;
}
.kpi-card-success .icon-bubble,
.timeline-icon-success,
.alert-item-success svg { color: #16A34A !important; }
.kpi-card-warning .icon-bubble,
.timeline-icon-warning { color: #D97706 !important; }
.kpi-card-danger .icon-bubble { color: #DC2626 !important; }
.kpi-card-info .icon-bubble { color: #0284C7 !important; }

.dashboard-hero,
.module-hero {
    background:
        radial-gradient(circle at 12% 0%, rgba(255,193,7,.17), transparent 34%),
        radial-gradient(circle at 88% 20%, rgba(0,155,255,.13), transparent 36%),
        rgba(255,255,255,.94) !important;
}
.date-filter-card {
    background: rgba(255,255,255,.86) !important;
    border-color: rgba(0,109,255,.18) !important;
}
.mini-chart-bar span {
    background: linear-gradient(180deg, #009BFF, #006DFF) !important;
    border-color: rgba(0,109,255,.20) !important;
    box-shadow: 0 12px 26px rgba(0,109,255,.16) !important;
}
.route-line { background: linear-gradient(var(--primary-blue), var(--brand-yellow)) !important; }
.route-stop span { background: #F1F5F9 !important; color: var(--primary-blue) !important; }
.route-stop.is-current { border-color: rgba(0,109,255,.28) !important; box-shadow: var(--shadow-blue) !important; }
.route-stop.is-done span { background: rgba(22,163,74,.10) !important; color: #16A34A !important; }

/* PWA móvil */
.mobile-bottom-nav {
    background: rgba(255,255,255,.94) !important;
    border-color: rgba(7,11,20,.10) !important;
    box-shadow: 0 20px 50px rgba(15,23,42,.12), 0 0 24px rgba(0,109,255,.08) !important;
}
.mobile-bottom-link.is-active svg,
.mobile-bottom-link.is-active span { color: var(--primary-blue) !important; }
.mobile-sticky-card {
    background: rgba(255,255,255,.96) !important;
}

/* Alerts, flash, toasts */
.flash,
.toast {
    background: rgba(255,255,255,.96) !important;
    color: var(--text-main) !important;
    border-color: rgba(7,11,20,.10) !important;
    box-shadow: var(--shadow-soft) !important;
}
.flash-success { background: rgba(22,163,74,.08) !important; border-color: rgba(22,163,74,.24) !important; }
.flash-error { background: rgba(220,38,38,.08) !important; border-color: rgba(220,38,38,.24) !important; }
.dashboard-alert-warning { background: rgba(255,193,7,.11) !important; border-color: rgba(217,119,6,.22) !important; }
.dashboard-alert-success { background: rgba(22,163,74,.08) !important; border-color: rgba(22,163,74,.22) !important; }
.dashboard-alert-danger { background: rgba(220,38,38,.08) !important; border-color: rgba(220,38,38,.22) !important; }

/* Elementos de impresión / tickets: mantener blanco limpio */
.ticket-document,
.ticket-paper,
.print-body {
    background: #FFFFFF !important;
    color: #070B14 !important;
}

/* Skeleton en tema claro */
.skeleton { background: #E2E8F0 !important; }
.skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent) !important; }

/* Overlay del sidebar móvil */
.sidebar-overlay.is-visible { background: rgba(15,23,42,.32) !important; }

@media (max-width: 720px) {
    body.dashboard-body { padding-bottom: calc(84px + var(--safe-bottom)); }
    .sidebar {
        background: rgba(255,255,255,.98) !important;
    }
}