/* SistemaAdmin visual theme — shared light/dark tokens */
:root,
html[data-theme="light"] {
    color-scheme: light;
    --page: #F6F8FC;
    --surface: #FFFFFF;
    --surface-raised: #FFFFFF;
    --surface-soft: #F0F3F9;
    --surface-hover: #EEF1F8;
    --text: #172033;
    --text-muted: #667085;
    --border: #DCE2EC;
    --primary: #4F46E5;
    --primary-dark: #3730A3;
    --primary-soft: #EEEDFF;
    --accent: #6366F1;
    --outbound: #2563EB;
    --outbound-soft: #E8F0FF;
    --inbound: #16805D;
    --inbound-soft: #E7F8F1;
    --pending: #B76E00;
    --pending-soft: #FFF4D6;
    --danger: #C73545;
    --danger-soft: #FDECEF;
    --sidebar-bg: #171A3A;
    --sidebar-raised: #232657;
    --sidebar-text: #D9DCF5;
    --shadow-sm: 0 1px 2px rgba(23, 32, 51, .05), 0 5px 16px rgba(23, 32, 51, .04);
    --shadow-lg: 0 20px 55px rgba(23, 32, 51, .16);
    --focus-ring: rgba(79, 70, 229, .23);
    --login-glow: rgba(79, 70, 229, .16);
    --dot: rgba(79, 70, 229, .10);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --page: #10131C;
    --surface: #181D2A;
    --surface-raised: #202637;
    --surface-soft: #141924;
    --surface-hover: #242B3D;
    --text: #E6EAF2;
    --text-muted: #98A2B3;
    --border: #30384B;
    --primary: #818CF8;
    --primary-dark: #6366F1;
    --primary-soft: #292B50;
    --accent: #A5B4FC;
    --outbound: #6EA8FE;
    --outbound-soft: #182C4C;
    --inbound: #5FD0A5;
    --inbound-soft: #17372F;
    --pending: #F2B84B;
    --pending-soft: #3D311A;
    --danger: #FF7B89;
    --danger-soft: #46242C;
    --sidebar-bg: #0C0F18;
    --sidebar-raised: #191E31;
    --sidebar-text: #D9DCF5;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .20), 0 8px 24px rgba(0, 0, 0, .16);
    --shadow-lg: 0 24px 70px rgba(0, 0, 0, .42);
    --focus-ring: rgba(129, 140, 248, .30);
    --login-glow: rgba(129, 140, 248, .18);
    --dot: rgba(165, 180, 252, .08);
}

html { background: var(--page); }
body {
    background: var(--page);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    transition: background-color .18s ease, color .18s ease;
}
h1, h2, h3, h4, h5, h6,
.brand-text, .card-title, .modal-title {
    font-family: 'Manrope', 'Inter', sans-serif;
    letter-spacing: -.018em;
}
a { color: var(--primary); }
a:hover { color: var(--primary-dark); }
::selection { background: var(--primary); color: #fff; }

/* Shared application shell */
.app-shell .content-wrapper,
.app-shell .content-header { background: var(--page) !important; color: var(--text); }
.app-shell .content-header h1 { color: var(--text); font-weight: 750; }
.app-shell .content-header h1 > i { color: var(--primary) !important; }
.app-shell .breadcrumb,
.app-shell .breadcrumb-item.active { color: var(--text-muted); }
.app-shell .main-header.navbar {
    background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
    border-color: var(--border);
    box-shadow: 0 1px 0 var(--border);
    backdrop-filter: blur(12px);
}
.app-shell .navbar-nav .nav-link { color: var(--text-muted) !important; }
.app-shell .navbar-nav .nav-link:hover { color: var(--text) !important; }
.app-shell .main-sidebar { background: var(--sidebar-bg) !important; }
.app-shell .brand-link { background: var(--sidebar-raised) !important; }
.app-shell .nav-sidebar .nav-link { color: rgba(217, 220, 245, .76) !important; }
.app-shell .nav-sidebar .nav-link:hover { background: rgba(255,255,255,.07) !important; color: #fff !important; transform: translateX(2px); }
.app-shell .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background: var(--primary-dark) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--accent);
}
.app-shell .nav-sidebar .nav-link i { color: #AAB1E9 !important; }
.app-shell .nav-sidebar .nav-link.active i { color: #fff !important; }

.app-shell .card,
.app-shell .modal-content,
.app-shell .dropdown-menu,
.app-shell .info-box {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}
.app-shell .card { overflow: hidden; }
.app-shell .card-header,
.app-shell .card-footer,
.app-shell .modal-footer {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text);
}
.app-shell .card-title { font-weight: 700; }
.app-shell .dropdown-divider { border-color: var(--border); }
.app-shell .dropdown-item { color: var(--text); }
.app-shell .dropdown-item:hover,
.app-shell .dropdown-item:focus { background: var(--surface-hover); color: var(--text); }
.app-shell .dropdown-menu .border-bottom { border-color: var(--border) !important; }

/* Operational signature: semantic route edge without moving content */
.app-shell.page-envios .content-header h1 { border-left: 3px solid var(--outbound); padding-left: .65rem; }
.app-shell.page-envios .content-header h1 > i { color: var(--outbound) !important; }
.app-shell.page-recepciones .content-header h1 { border-left: 3px solid var(--inbound); padding-left: .65rem; }
.app-shell.page-recepciones .content-header h1 > i { color: var(--inbound) !important; }
.app-shell.page-movimientos .content-header h1 { border-left: 3px solid var(--primary); padding-left: .65rem; }

/* Forms and controls */
.app-shell .form-control,
.app-shell .custom-select,
.app-shell .input-group-text,
.app-shell select,
.app-shell textarea {
    background: var(--surface-raised);
    border-color: var(--border);
    color: var(--text);
}
.app-shell .form-control::placeholder { color: var(--text-muted); opacity: .78; }
.app-shell .form-control:focus,
.app-shell .custom-select:focus {
    background: var(--surface-raised);
    border-color: var(--primary);
    color: var(--text);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.app-shell .form-control:disabled,
.app-shell .form-control[readonly] { background: var(--surface-soft); color: var(--text-muted); }
.app-shell label { color: var(--text); font-weight: 600; }
.app-shell .custom-control-label::before { background: var(--surface-raised); border-color: var(--border); }

/* Tables */
.app-shell .table { color: var(--text); background: transparent; }
.app-shell .table thead th {
    background: var(--surface-soft);
    color: var(--text-muted);
    border-color: var(--border);
}
.app-shell .table td,
.app-shell .table th { border-color: var(--border); color: var(--text); }
.app-shell .table-hover tbody tr:hover { background: var(--surface-hover); color: var(--text); }
.app-shell .table-striped tbody tr:nth-of-type(odd) { background: var(--surface-soft); }
.app-shell code { background: var(--primary-soft) !important; color: var(--primary) !important; }

/* Buttons and keyboard focus */
.app-shell .btn { border-radius: 8px; font-weight: 650; }
.app-shell .btn-primary { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.app-shell .btn-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.app-shell .btn-secondary { background: var(--surface-hover); border-color: var(--border); color: var(--text); }
.app-shell .btn-outline-secondary { border-color: var(--border); color: var(--text-muted); }
.app-shell .btn-outline-secondary:hover { background: var(--surface-hover); color: var(--text); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--focus-ring) !important;
    outline-offset: 2px;
}

/* Semantic status colors */
.app-shell .badge-envio { background: var(--outbound-soft); color: var(--outbound); }
.app-shell .badge-recepcion,
.app-shell .badge-procesado,
.app-shell .badge-activo,
.app-shell .badge-delivery { background: var(--inbound-soft); color: var(--inbound); }
.app-shell .badge-pendiente,
.app-shell .badge-prospecto { background: var(--pending-soft); color: var(--pending); }
.app-shell .badge-cancelado,
.app-shell .badge-inactivo,
.app-shell .badge-stock-bajo { background: var(--danger-soft); color: var(--danger); }
.app-shell .badge-admin { background: var(--primary-soft); color: var(--primary); }
.app-shell .badge-editor { background: var(--outbound-soft); color: var(--outbound); }
.app-shell .badge-viewer,
.app-shell .badge-secondary { background: var(--surface-hover); color: var(--text-muted); }
.app-shell .alert-success { background: var(--inbound-soft); color: var(--inbound); }
.app-shell .alert-warning { background: var(--pending-soft); color: var(--pending); }
.app-shell .alert-danger { background: var(--danger-soft); color: var(--danger); }
.app-shell .alert-info { background: var(--outbound-soft); color: var(--outbound); }
.app-shell .alert a { color: currentColor; }
.app-shell .close { color: currentColor; text-shadow: none; }

/* Pagination, footer and mobile navigation */
.app-shell .pagination .page-link { background: var(--surface); border-color: var(--border); color: var(--text-muted); }
.app-shell .pagination .page-link:hover { background: var(--surface-hover); color: var(--primary); }
.app-shell .pagination .page-item.active .page-link { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.app-shell .pagination .page-item.disabled .page-link { background: var(--surface-soft); color: var(--text-muted); opacity: .55; }
.app-shell .main-footer { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text-muted) !important; }
.app-shell .mobile-bottom-nav { background: var(--surface); border-color: var(--border); box-shadow: 0 -8px 24px rgba(0,0,0,.08); }
.app-shell .mbn-item { color: var(--text-muted); }
.app-shell .mbn-item.active,
.app-shell .mbn-item:hover { color: var(--primary); }
.app-shell .text-muted { color: var(--text-muted) !important; }
.app-shell .border,
.app-shell .border-top,
.app-shell .border-right,
.app-shell .border-bottom,
.app-shell .border-left { border-color: var(--border) !important; }

/* Convert common inline light surfaces without touching layout */
html[data-theme="dark"] .app-shell [style*="background:#fafafa"],
html[data-theme="dark"] .app-shell [style*="background: #fafafa"],
html[data-theme="dark"] .app-shell [style*="background:#f8fafc"],
html[data-theme="dark"] .app-shell [style*="background: #f8fafc"] { background: var(--surface-soft) !important; }
html[data-theme="dark"] .app-shell [style*="background:#f0fdf4"],
html[data-theme="dark"] .app-shell [style*="background: #f0fdf4"],
html[data-theme="dark"] .app-shell [style*="background:#dcfce7"],
html[data-theme="dark"] .app-shell [style*="background: #dcfce7"] { background: var(--inbound-soft) !important; }
html[data-theme="dark"] .app-shell [style*="background:#dbeafe"],
html[data-theme="dark"] .app-shell [style*="background: #dbeafe"] { background: var(--outbound-soft) !important; }
html[data-theme="dark"] .app-shell [style*="background:#ede9fe"],
html[data-theme="dark"] .app-shell [style*="background: #ede9fe"] { background: var(--primary-soft) !important; }
html[data-theme="dark"] .app-shell [style*="background:#fffbeb"],
html[data-theme="dark"] .app-shell [style*="background: #fffbeb"] { background: var(--pending-soft) !important; }
html[data-theme="dark"] .app-shell [style*="color:#1e293b"],
html[data-theme="dark"] .app-shell [style*="color: #1e293b"],
html[data-theme="dark"] .app-shell [style*="color:#374151"],
html[data-theme="dark"] .app-shell [style*="color: #374151"] { color: var(--text) !important; }
html[data-theme="dark"] .app-shell [style*="color:#64748b"],
html[data-theme="dark"] .app-shell [style*="color: #64748b"],
html[data-theme="dark"] .app-shell [style*="color:#94a3b8"],
html[data-theme="dark"] .app-shell [style*="color: #94a3b8"] { color: var(--text-muted) !important; }
html[data-theme="dark"] .app-shell [style*="color:#1d4ed8"],
html[data-theme="dark"] .app-shell [style*="color: #1d4ed8"] { color: var(--outbound) !important; }
html[data-theme="dark"] .app-shell [style*="color:#166534"],
html[data-theme="dark"] .app-shell [style*="color: #166534"],
html[data-theme="dark"] .app-shell [style*="color:#16a34a"],
html[data-theme="dark"] .app-shell [style*="color: #16a34a"] { color: var(--inbound) !important; }
html[data-theme="dark"] .app-shell [style*="color:#4f46e5"],
html[data-theme="dark"] .app-shell [style*="color: #4f46e5"],
html[data-theme="dark"] .app-shell [style*="color:#6366f1"],
html[data-theme="dark"] .app-shell [style*="color: #6366f1"] { color: var(--primary) !important; }

/* Theme toggle */
.theme-toggle {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-raised);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.theme-toggle:hover { color: var(--primary); background: var(--surface-hover); border-color: var(--primary); transform: translateY(-1px); }
.theme-toggle-nav { margin: .2rem .35rem 0 0; padding: 0 !important; }
.theme-toggle-login { position: fixed; top: 20px; right: 20px; z-index: 3; box-shadow: var(--shadow-sm); }
.theme-toggle i { pointer-events: none; }

/* Login: same structure, fully theme-aware */
.login-page-shell { background: var(--page); color: var(--text); }
.login-page-shell::before {
    background: radial-gradient(ellipse 60% 60% at 30% 20%, var(--login-glow) 0%, transparent 60%),
                radial-gradient(ellipse 42% 42% at 75% 82%, rgba(37,99,235,.10) 0%, transparent 62%);
}
.login-page-shell::after { background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px); }
.login-page-shell .login-card { background: color-mix(in srgb, var(--surface) 96%, transparent); border-color: var(--border); box-shadow: var(--shadow-lg); }
.login-page-shell .logo-area h1,
.login-page-shell label { color: var(--text); }
.login-page-shell .logo-area p,
.login-page-shell .demo-hint { color: var(--text-muted); }
.login-page-shell input { background: var(--surface-raised); border-color: var(--border); color: var(--text); }
.login-page-shell input:focus { background: var(--surface-raised); border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.login-page-shell .input-wrapper > i,
.login-page-shell .toggle-pass { color: var(--text-muted); }
.login-page-shell .demo-hint { background: var(--surface-soft); border-color: var(--border); }
.login-page-shell .demo-hint strong { color: var(--primary); }
.login-page-shell .btn-login { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); box-shadow: 0 7px 24px var(--focus-ring); }
.login-page-shell .alert-error { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); }

@media (max-width: 767px) {
    .theme-toggle-nav { margin-right: .15rem; }
    .theme-toggle-login { top: 12px; right: 12px; }
    .app-shell.page-envios .content-header h1,
    .app-shell.page-recepciones .content-header h1,
    .app-shell.page-movimientos .content-header h1 { padding-left: .5rem; }
}

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

@media print {
    :root, html[data-theme] { color-scheme: light; --page:#fff; --surface:#fff; --text:#172033; --text-muted:#667085; --border:#DCE2EC; }
    .theme-toggle { display: none !important; }
}