/* ==========================================================================
   SuperVisor Admin Panel — Modern Override Stylesheet
   Design: iOS-style, clean, minimal, professional
   Version: 1.0.0
   Date: 2026-03-25
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. ROOT VARIABLES & GLOBAL RESET
   -------------------------------------------------------------------------- */
:root {
    --sv-navbar:       #1e293b;
    --sv-accent:       #8e1841;
    --sv-accent-hover: #721434;
    --sv-bg:           #f8fafc;
    --sv-card:         #ffffff;
    --sv-success:      #10b981;
    --sv-warning:      #f59e0b;
    --sv-danger:       #ef4444;
    --sv-info:         #3b82f6;
    --sv-text:         #1e293b;
    --sv-text-sec:     #64748b;
    --sv-text-muted:   #94a3b8;
    --sv-border:       #e2e8f0;
    --sv-row-hover:    #f8fafc;
    --sv-row-divider:  #f1f5f9;
    --sv-radius-sm:    8px;
    --sv-radius:       10px;
    --sv-radius-md:    12px;
    --sv-radius-lg:    16px;
    --sv-radius-pill:  20px;
    --sv-shadow-sm:    0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --sv-shadow-md:    0 4px 12px rgba(0,0,0,0.08);
    --sv-shadow-lg:    0 10px 40px rgba(0,0,0,0.12);
    --sv-font:        -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter',
                       'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --sv-transition:   0.15s ease;
}

*,
*::before,
*::after {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--sv-font);
    background-color: var(--sv-bg);
    color: var(--sv-text);
}

/* --------------------------------------------------------------------------
   1. NAVBAR
   -------------------------------------------------------------------------- */
.navbar {
    background-color: var(--sv-navbar) !important;
    border: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
    min-height: 56px;
    height: 56px;
    padding: 0 1rem;
}

.navbar-brand {
    color: #ffffff !important;
    font-weight: 700;
    letter-spacing: -0.02em;
    padding: 0;
    line-height: 56px;
}

.navbar-brand img {
    max-height: 38px;
}

.navbar .nav-link,
.navbar .navbar-nav > li > a {
    color: rgba(255,255,255,0.80) !important;
    font-weight: 500;
    font-size: 0.875rem;
    transition: color var(--sv-transition), background var(--sv-transition);
    border-radius: var(--sv-radius-sm);
    padding: 6px 12px !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus {
    color: #ffffff !important;
    background: rgba(255,255,255,0.08);
}

.navbar .nav-link.active,
.navbar .navbar-nav > .active > a {
    color: #ffffff !important;
    background: rgba(255,255,255,0.12);
}

.navbar .navbar-toggler {
    border-color: rgba(255,255,255,0.25);
    color: #ffffff;
}

.navbar .navbar-toggler-icon {
    filter: invert(1);
}

/* --------------------------------------------------------------------------
   2. NAVBAR DROPDOWN MENUS
   -------------------------------------------------------------------------- */
.navbar .dropdown-menu {
    background: var(--sv-card);
    border: none;
    border-radius: var(--sv-radius-md);
    box-shadow: var(--sv-shadow-lg);
    padding: 8px;
    margin-top: 4px;
    animation: svDropdownFade 0.18s ease;
}

@keyframes svDropdownFade {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.navbar .dropdown-menu .dropdown-item {
    color: var(--sv-text);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 10px 16px;
    border-radius: var(--sv-radius-sm);
    transition: background var(--sv-transition);
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
    background: var(--sv-bg);
    color: var(--sv-text);
}

/* Higher-specificity active rule: '.navbar .dropdown-menu .dropdown-item'
   has specificity 0,3,0 and was clobbering '.dropdown-item.active' (0,2,0),
   leaving active items with dark slate text on crimson bg (~1.7:1 contrast).
   This selector is 0,4,0 so it wins. */
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:active {
    background: var(--sv-accent);
    color: #ffffff;
}

.navbar .dropdown-menu .dropdown-divider {
    border-color: var(--sv-row-divider);
    margin: 4px 0;
}

/* --------------------------------------------------------------------------
   3. PAGE HEADER
   -------------------------------------------------------------------------- */
.page-header {
    background: transparent !important;
    border: none !important;
    padding: 24px 0 8px;
    margin-bottom: 16px;
}

.page-header h1,
.page-header .page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sv-text);
    letter-spacing: -0.02em;
}

.page-header .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 4px 0 0;
    font-size: 0.8125rem;
}

.page-header .breadcrumb a {
    color: var(--sv-text-sec);
}

.page-header .breadcrumb .active {
    color: var(--sv-text-muted);
}

/* --------------------------------------------------------------------------
   4. CARDS
   -------------------------------------------------------------------------- */
.card {
    border: none;
    border-radius: var(--sv-radius-lg);
    box-shadow: var(--sv-shadow-sm);
    background: var(--sv-card);
    margin-bottom: 1.25rem;
    transition: box-shadow var(--sv-transition);
}

.card:hover {
    box-shadow: var(--sv-shadow-md);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--sv-row-divider);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--sv-text);
    padding: 16px 20px;
    border-radius: var(--sv-radius-lg) var(--sv-radius-lg) 0 0;
}

.card-body {
    padding: 20px;
}

.card-footer {
    background: transparent;
    border-top: 1px solid var(--sv-row-divider);
    padding: 12px 20px;
    border-radius: 0 0 var(--sv-radius-lg) var(--sv-radius-lg);
}

/* --------------------------------------------------------------------------
   5. TABLES
   -------------------------------------------------------------------------- */
.table-responsive {
    border-radius: var(--sv-radius-md);
    overflow: hidden;
}

.table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.table > thead > tr > th,
.table > thead th {
    background: var(--sv-bg);
    color: var(--sv-text-sec);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 16px;
    border-bottom: 1px solid var(--sv-border);
    border-top: none;
    white-space: nowrap;
}

.table > tbody > tr > td,
.table td {
    padding: 12px 16px;
    vertical-align: middle;
    border-top: 1px solid var(--sv-row-divider);
    font-size: 0.875rem;
    color: var(--sv-text);
}

.table > tbody > tr:first-child > td {
    border-top: none;
}

.table > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > td {
    background: var(--sv-row-hover);
}

.table-bordered,
.table-bordered th,
.table-bordered td {
    border-color: var(--sv-row-divider);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(248,250,252,0.5);
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--sv-radius);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 8px 20px;
    border: none;
    transition: all var(--sv-transition);
    letter-spacing: -0.01em;
    line-height: 1.5;
}

/* Restaurar padding del labeled-left para que el icono <b> position:absolute
   no se encime con el texto. El .btn { padding } anterior sobreescribía el
   3.12506rem que combined.min.css le da a estos botones. */
.btn.btn-labeled-left { padding-left: 3.12506rem; }
.btn.btn-labeled-left.btn-sm { padding-left: 2.75006rem; }
.btn.btn-labeled-left.btn-lg { padding-left: 3.50005rem; }
.btn.btn-labeled:not(.btn-labeled-left) { padding-right: 3.12506rem; }
.btn.btn-labeled:not(.btn-labeled-left).btn-sm { padding-right: 2.75006rem; }
.btn.btn-labeled:not(.btn-labeled-left).btn-lg { padding-right: 3.50005rem; }
/* El <b> absolute mantiene el match de altura del botón vertical-center */
.btn.btn-labeled > b {
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn:focus,
.btn:active:focus {
    box-shadow: 0 0 0 3px rgba(142,24,65,0.20);
    outline: none;
}

.btn-primary {
    background-color: var(--sv-accent);
    border-color: var(--sv-accent);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--sv-accent-hover);
    border-color: var(--sv-accent-hover);
    color: #ffffff;
}

.btn-success {
    background-color: var(--sv-success);
    border-color: var(--sv-success);
    color: #ffffff;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #0d9668;
    border-color: #0d9668;
}

.btn-danger {
    background-color: var(--sv-danger);
    border-color: var(--sv-danger);
    color: #ffffff;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #dc2626;
    border-color: #dc2626;
}

.btn-warning {
    background-color: var(--sv-warning);
    border-color: var(--sv-warning);
    color: #ffffff;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #d97706;
    border-color: #d97706;
}

.btn-info {
    background-color: var(--sv-info);
    border-color: var(--sv-info);
    color: #ffffff;
}

.btn-info:hover,
.btn-info:focus {
    background-color: #2563eb;
    border-color: #2563eb;
}

.btn-default,
.btn-secondary,
.btn-outline-secondary {
    background-color: var(--sv-bg);
    border: 1px solid var(--sv-border);
    color: var(--sv-text-sec);
}

.btn-default:hover,
.btn-secondary:hover,
.btn-outline-secondary:hover {
    background-color: #eef2f7;
    border-color: var(--sv-border);
    color: var(--sv-text);
}

.btn-sm {
    padding: 5px 14px;
    font-size: 0.8125rem;
    border-radius: var(--sv-radius-sm);
}

.btn-lg {
    padding: 12px 28px;
    font-size: 1rem;
    border-radius: var(--sv-radius-md);
}

.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-radius: var(--sv-radius) 0 0 var(--sv-radius);
}

.btn-group .btn:last-child {
    border-radius: 0 var(--sv-radius) var(--sv-radius) 0;
}

/* --------------------------------------------------------------------------
   7. BADGES
   -------------------------------------------------------------------------- */
.badge {
    border-radius: var(--sv-radius-pill);
    padding: 4px 12px;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.01em;
    line-height: 1.5;
}

.badge-primary,
.badge.bg-primary {
    background-color: var(--sv-accent) !important;
    color: #ffffff;
}

.badge-success,
.badge.bg-success {
    background-color: #d1fae5 !important;
    color: #065f46;
}

.badge-warning,
.badge.bg-warning {
    background-color: #fef3c7 !important;
    color: #92400e;
}

.badge-danger,
.badge.bg-danger {
    background-color: #fee2e2 !important;
    color: #991b1b;
}

.badge-info,
.badge.bg-info {
    background-color: #dbeafe !important;
    color: #1e40af;
}

.badge-secondary,
.badge.bg-secondary {
    background-color: var(--sv-bg) !important;
    color: var(--sv-text-sec);
}

/* --------------------------------------------------------------------------
   8. FORMS
   -------------------------------------------------------------------------- */
.form-control {
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    font-size: 0.875rem;
    color: var(--sv-text);
    padding: 8px 14px;
    transition: border-color var(--sv-transition), box-shadow var(--sv-transition);
    background-color: var(--sv-card);
}

.form-control:focus {
    border-color: var(--sv-accent);
    box-shadow: 0 0 0 3px rgba(142,24,65,0.12);
    outline: none;
}

.form-control::placeholder {
    color: var(--sv-text-muted);
}

.form-control-lg {
    padding: 12px 16px;
    font-size: 1rem;
    border-radius: var(--sv-radius-md);
}

.form-control-sm {
    padding: 5px 10px;
    font-size: 0.8125rem;
    border-radius: var(--sv-radius-sm);
}

label,
.control-label,
.form-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sv-text-sec);
    margin-bottom: 6px;
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5l-5-5h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 36px;
}

textarea.form-control {
    border-radius: var(--sv-radius-md);
    min-height: 80px;
}

.form-group {
    margin-bottom: 1.25rem;
}

.input-group .form-control {
    border-radius: var(--sv-radius);
}

.input-group-prepend .input-group-text,
.input-group-append .input-group-text,
.input-group .input-group-text {
    background: var(--sv-bg);
    border-color: var(--sv-border);
    color: var(--sv-text-sec);
    font-size: 0.875rem;
    border-radius: var(--sv-radius);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--sv-accent);
    border-color: var(--sv-accent);
}

/* --------------------------------------------------------------------------
   9. SIDEBAR
   -------------------------------------------------------------------------- */
.sidebar,
.admin-sidebar,
.main-sidebar {
    background: var(--sv-card);
    border-right: 1px solid var(--sv-row-divider);
    box-shadow: none;
}

.sidebar .nav-link,
.admin-sidebar .nav-link,
.main-sidebar .nav-link {
    color: var(--sv-text-sec);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 10px 16px;
    border-radius: var(--sv-radius-sm);
    margin: 2px 8px;
    transition: all var(--sv-transition);
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active,
.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active,
.main-sidebar .nav-link:hover,
.main-sidebar .nav-link.active {
    background: var(--sv-bg);
    color: var(--sv-accent);
}

.sidebar .nav-link.active,
.admin-sidebar .nav-link.active,
.main-sidebar .nav-link.active {
    font-weight: 600;
}

.sidebar .nav-link i,
.admin-sidebar .nav-link i,
.main-sidebar .nav-link i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
    font-size: 1rem;
}

/* --------------------------------------------------------------------------
   10. DROPDOWN MENUS (GLOBAL)
   -------------------------------------------------------------------------- */
.dropdown-menu {
    border: none;
    border-radius: var(--sv-radius-md);
    box-shadow: var(--sv-shadow-lg);
    padding: 8px;
    animation: svDropdownFade 0.18s ease;
}

.dropdown-item {
    font-size: 0.875rem;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: var(--sv-radius-sm);
    color: var(--sv-text);
    transition: background var(--sv-transition);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--sv-bg);
    color: var(--sv-text);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--sv-accent);
    color: #ffffff;
}

.dropdown-divider {
    border-color: var(--sv-row-divider);
    margin: 4px 0;
}

/* --------------------------------------------------------------------------
   11. PAGINATION
   -------------------------------------------------------------------------- */
.pagination {
    gap: 4px;
}

.page-item .page-link {
    border: none;
    border-radius: var(--sv-radius-pill) !important;
    color: var(--sv-text-sec);
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 6px 14px;
    min-width: 36px;
    text-align: center;
    transition: all var(--sv-transition);
    background: transparent;
}

.page-item .page-link:hover {
    background: var(--sv-bg);
    color: var(--sv-text);
}

.page-item.active .page-link {
    background-color: var(--sv-accent);
    color: #ffffff;
    border-color: var(--sv-accent);
}

.page-item.disabled .page-link {
    color: var(--sv-text-muted);
    background: transparent;
}

/* --------------------------------------------------------------------------
   12. ALERTS
   -------------------------------------------------------------------------- */
.alert {
    border: none;
    border-radius: var(--sv-radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 14px 20px;
}

.alert-success {
    background-color: #ecfdf5;
    color: #065f46;
}

.alert-danger,
.alert-error {
    background-color: #fef2f2;
    color: #991b1b;
}

.alert-warning {
    background-color: #fffbeb;
    color: #92400e;
}

.alert-info {
    background-color: #eff6ff;
    color: #1e40af;
}

.alert .close,
.alert .btn-close {
    opacity: 0.5;
    transition: opacity var(--sv-transition);
}

.alert .close:hover,
.alert .btn-close:hover {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   13. MODALS
   -------------------------------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: var(--sv-radius-lg);
    box-shadow: var(--sv-shadow-lg);
    overflow: hidden;
}

.modal-header {
    border-bottom: none;
    padding: 20px 24px 12px;
}

.modal-header .modal-title {
    font-weight: 700;
    font-size: 1.125rem;
    color: inherit;
}

.modal-header .close,
.modal-header .btn-close {
    color: inherit;
    opacity: 0.7;
    transition: opacity var(--sv-transition);
}

.modal-header .close:hover,
.modal-header .btn-close:hover {
    opacity: 1;
}

.modal-body {
    padding: 12px 24px 20px;
}

.modal-footer {
    border-top: none;
    padding: 12px 24px 20px;
}

.modal-backdrop.show {
    opacity: 0.4;
}

/* --------------------------------------------------------------------------
   14. CONTENT AREA
   -------------------------------------------------------------------------- */
.content,
.main-content,
.content-wrapper {
    background: var(--sv-bg);
    min-height: 100vh;
}

.content > .container-fluid,
.main-content > .container-fluid {
    padding: 24px;
}

/* --------------------------------------------------------------------------
   15. CUSTOM SCROLLBAR
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--sv-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--sv-text-muted);
}

/* --------------------------------------------------------------------------
   16. GLOBAL TRANSITIONS
   -------------------------------------------------------------------------- */
a {
    transition: color var(--sv-transition);
}

a:hover {
    text-decoration: none;
}

.btn,
.form-control,
.nav-link,
.page-link,
.dropdown-item,
.card,
.badge,
.alert {
    transition: all var(--sv-transition);
}

/* --------------------------------------------------------------------------
   17. UTILITY REFINEMENTS
   -------------------------------------------------------------------------- */

/* Panel / well overrides */
.panel {
    border: none;
    border-radius: var(--sv-radius-lg);
    box-shadow: var(--sv-shadow-sm);
    background: var(--sv-card);
}

.panel-heading {
    background: transparent !important;
    border-bottom: 1px solid var(--sv-row-divider);
    border-radius: var(--sv-radius-lg) var(--sv-radius-lg) 0 0;
    padding: 16px 20px;
    font-weight: 700;
}

.panel-body {
    padding: 20px;
}

.well {
    background: var(--sv-bg);
    border: 1px solid var(--sv-row-divider);
    border-radius: var(--sv-radius-md);
    box-shadow: none;
}

/* List group */
.list-group-item {
    border-color: var(--sv-row-divider);
    padding: 12px 20px;
    font-size: 0.875rem;
}

.list-group-item:first-child {
    border-radius: var(--sv-radius-md) var(--sv-radius-md) 0 0;
}

.list-group-item:last-child {
    border-radius: 0 0 var(--sv-radius-md) var(--sv-radius-md);
}

.list-group-item.active {
    background-color: var(--sv-accent);
    border-color: var(--sv-accent);
}

/* Tabs / nav-tabs */
.nav-tabs {
    border-bottom: 1px solid var(--sv-row-divider);
}

.nav-tabs .nav-link {
    border: none;
    color: var(--sv-text-sec);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 10px 16px;
    border-radius: var(--sv-radius-sm) var(--sv-radius-sm) 0 0;
}

.nav-tabs .nav-link:hover {
    color: var(--sv-text);
    background: var(--sv-bg);
    border: none;
}

.nav-tabs .nav-link.active {
    color: var(--sv-accent);
    border: none;
    border-bottom: 2px solid var(--sv-accent);
    background: transparent;
}

/* Nav pills */
.nav-pills .nav-link {
    border-radius: var(--sv-radius-sm);
    color: var(--sv-text-sec);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 8px 16px;
}

.nav-pills .nav-link.active {
    background-color: var(--sv-accent);
    color: #ffffff;
}

/* Tooltip */
.tooltip-inner {
    background: var(--sv-navbar);
    border-radius: var(--sv-radius-sm);
    font-size: 0.75rem;
    padding: 6px 12px;
}

/* Progress bar */
.progress {
    border-radius: var(--sv-radius-pill);
    height: 8px;
    background: var(--sv-bg);
    overflow: hidden;
}

.progress-bar {
    background-color: var(--sv-accent);
    border-radius: var(--sv-radius-pill);
}

/* Breadcrumb */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.8125rem;
}

.breadcrumb-item a {
    color: var(--sv-text-sec);
}

.breadcrumb-item.active {
    color: var(--sv-text-muted);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--sv-text-muted);
}

/* Popover */
.popover {
    border: none;
    border-radius: var(--sv-radius-md);
    box-shadow: var(--sv-shadow-lg);
}

.popover-header {
    background: transparent;
    border-bottom: 1px solid var(--sv-row-divider);
    font-weight: 700;
    font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   18. RESPONSIVE FINE-TUNING
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .content > .container-fluid,
    .main-content > .container-fluid {
        padding: 12px;
    }

    .card-body {
        padding: 14px;
    }

    .table > thead > tr > th,
    .table > tbody > tr > td {
        padding: 8px 10px;
        font-size: 0.8rem;
    }

    .btn {
        padding: 6px 14px;
        font-size: 0.8rem;
    }

    .page-header h1,
    .page-header .page-title {
        font-size: 1.15rem;
    }

    /* ── Navbar mobile fixes ── */
    .navbar {
        background-color: var(--sv-navbar) !important;
        padding: 8px 12px;
    }

    .navbar .navbar-collapse {
        background-color: var(--sv-navbar);
        border-radius: 0 0 12px 12px;
        padding: 8px 0;
        margin: 0 -12px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    }

    .navbar .nav-link,
    .navbar .navbar-nav > li > a,
    .navbar .navbar-nav .dropdown-toggle {
        color: rgba(255,255,255,0.85) !important;
        padding: 10px 16px !important;
        font-size: 0.88rem;
    }

    .navbar .nav-link:hover,
    .navbar .nav-link.active,
    .navbar .navbar-nav > .active > a {
        color: #ffffff !important;
        background: rgba(255,255,255,0.08);
    }

    .navbar .dropdown-menu {
        background: rgba(255,255,255,0.06) !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 8px !important;
        border-radius: 0 !important;
    }

    .navbar .dropdown-menu .dropdown-item {
        color: rgba(255,255,255,0.7) !important;
        padding: 8px 16px !important;
        font-size: 0.82rem;
        border-radius: 6px;
    }

    .navbar .dropdown-menu .dropdown-item:hover,
    .navbar .dropdown-menu .dropdown-item.active {
        color: #ffffff !important;
        background: rgba(255,255,255,0.1) !important;
    }

    .navbar .dropdown-menu .dropdown-divider {
        border-color: rgba(255,255,255,0.1);
    }

    /* Section headings (NEGOCIOS, MENÚ, GROWTH, PROMOS) inside collapsed
       mobile dropdowns — desktop renders crimson on white card, but mobile
       embeds the dropdown into the dark navbar so crimson on slate fails
       contrast (~1.5:1). Lighten + tint to translucent white for AA. */
    .navbar .dropdown-menu .dropdown-header,
    .navbar-nav .dropdown-menu .dropdown-header {
        color: rgba(255,255,255,0.55) !important;
    }

    .navbar-toggler {
        border-color: rgba(255,255,255,0.2) !important;
    }

    .navbar-toggler-icon {
        filter: invert(1);
    }

    .navbar-brand img {
        height: 36px !important;
    }

    /* ── Tables responsive ── */
    .table-responsive {
        border-radius: 12px;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: left !important;
        margin-bottom: 8px;
    }

    .dataTables_wrapper .dataTables_info {
        font-size: 0.75rem;
    }

    /* ── Stats cards mobile ── */
    .row > [class*="col-sm-3"],
    .row > [class*="col-md-3"] {
        margin-bottom: 8px;
    }

    /* ── Filter pills scroll ── */
    .filter-pills,
    .d-flex.gap-2 {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .filter-pills .btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* --------------------------------------------------------------------------
   19. PRINT STYLES
   -------------------------------------------------------------------------- */
@media print {
    .navbar,
    .sidebar,
    .admin-sidebar,
    .main-sidebar {
        display: none !important;
    }

    .card {
        box-shadow: none;
        border: 1px solid #dee2e6;
    }

    body {
        background: #ffffff;
    }
}

/* ═══════════════════════════════════════════════════════════
   Admin navbar — section headings inside dropdowns (Fase 1)
   Used in "Negocios & Menú" and "Crecimiento" to break dense
   dropdowns into visual groups. Non-clickable.
   ═══════════════════════════════════════════════════════════ */
.navbar-nav .dropdown-menu .dropdown-header {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8e1841 !important;
    padding: 8px 16px 4px;
    margin: 0;
    pointer-events: none;
    user-select: none;
}
.navbar-nav .dropdown-menu .dropdown-header + .dropdown-item {
    padding-top: 4px;
}
.navbar-nav .dropdown-menu .dropdown-divider {
    margin: 6px 0;
    border-top-color: rgba(0, 0, 0, 0.08);
}

/* Admin Toasts — unified system (§71) */
.jGrowl-notification.admin-toast-success { background: #e6f4ea; border-left: 4px solid #1e8e3e; color: #1e8e3e; font-weight: 500; border-radius: 6px; padding: 14px 18px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.jGrowl-notification.admin-toast-error   { background: #fce8e6; border-left: 4px solid #c5221f; color: #c5221f; font-weight: 500; border-radius: 6px; padding: 14px 18px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.jGrowl-notification.admin-toast-warning { background: #fef7e0; border-left: 4px solid #f29900; color: #b06000; font-weight: 500; border-radius: 6px; padding: 14px 18px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.jGrowl-notification.admin-toast-info    { background: #e8f0fe; border-left: 4px solid #1a73e8; color: #1a73e8; font-weight: 500; border-radius: 6px; padding: 14px 18px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.jGrowl-notification .jGrowl-close { color: inherit; opacity: 0.6; }
.jGrowl-notification .jGrowl-close:hover { opacity: 1; }

/* ============================================================
   Fase 2b — Empty states / Loading / Breadcrumb / Focus rings
   ============================================================ */

/* --- 1. Empty state (partial admin.partials.empty-state) --- */
.empty-state {
    color: #6c757d;
    padding: 48px 20px;
}
.empty-state-icon {
    font-size: 56px;
    color: #d1d5db;
    margin-bottom: 16px;
    line-height: 1;
}
.empty-state-icon i { display: inline-block; }
.empty-state-title {
    font-size: 18px;
    color: #2d3748;
    font-weight: 500;
    margin-bottom: 8px;
}
.empty-state-message {
    font-size: 14px;
    color: #6c757d;
    max-width: 380px;
    margin: 0 auto 20px;
    line-height: 1.5;
}

/* --- 2. Loading states AJAX (admin-loading.js) --- */
.admin-loading { position: relative; min-height: 120px; }
.admin-loading::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9;
    border-radius: 6px;
    pointer-events: none;
}
.admin-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 32px; height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: #8e1841;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: admin-spin 0.8s linear infinite;
    z-index: 10;
    pointer-events: none;
}
@keyframes admin-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --- 3. Breadcrumb bar (partial admin.partials.breadcrumb) --- */
/* Nota §74 fix: removido position:sticky — tapaba contenido al scroll y al
   render inicial con algunas vistas. Ahora es parte del flow normal. */
.admin-breadcrumb {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 10px 20px;
    font-size: 13px;
    margin: 0 0 16px;
}
.admin-breadcrumb .breadcrumb {
    padding: 0;
    margin: 0;
    background: transparent;
    flex-wrap: wrap;
}
.admin-breadcrumb .breadcrumb-item a {
    color: #8e1841;
    text-decoration: none;
}
.admin-breadcrumb .breadcrumb-item a:hover {
    text-decoration: underline;
}
.admin-breadcrumb .breadcrumb-item.active {
    color: #2d3748;
    font-weight: 500;
}

/* --- 4. Focus rings accesibles (WCAG AA, §71) --- */
.btn:focus-visible,
.form-control:focus-visible,
.dropdown-item:focus-visible,
.breadcrumb-item a:focus-visible,
.admin-breadcrumb .breadcrumb-item a:focus-visible {
    outline: 2px solid #8e1841 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(142, 24, 65, 0.15) !important;
}
/* Oculta el anillo en click de mouse (sólo teclado) */
.btn:focus:not(:focus-visible),
.form-control:focus:not(:focus-visible) {
    outline: none;
}

/* ──────────────────────────────────────────────────────────────
   Impersonation banner — §72 (Phase 3b)
   Sticky rojo en top cuando admin actúa como otro usuario.
   ────────────────────────────────────────────────────────────── */
.impersonation-banner {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: linear-gradient(90deg, #c5221f 0%, #d93025 100%);
    color: #fff;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.impersonation-banner-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    flex-wrap: wrap;
}
.impersonation-banner i {
    font-size: 16px;
}
.impersonation-banner strong {
    font-weight: 600;
}
.impersonation-banner .impersonation-exit-btn {
    margin-left: auto;
    padding: 6px 14px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    transition: background 0.15s;
    white-space: nowrap;
}
.impersonation-banner .impersonation-exit-btn:hover,
.impersonation-banner .impersonation-exit-btn:focus {
    background: rgba(255, 255, 255, 0.35);
    color: #fff;
    text-decoration: none;
}
body.is-impersonating .navbar-sticky {
    top: 42px;
}

/* ──────────────────────────────────────────────────────────────
   Bulk actions bar — §73 (Phase 3b)
   Toolbar cuando hay ≥1 checkbox seleccionado en datatables admin.
   ────────────────────────────────────────────────────────────── */
.bulk-actions-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #8e1841;
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    margin-top: 20px;
}
.bulk-actions-bar .bulk-selected-count {
    font-weight: 500;
    flex-shrink: 0;
}
.bulk-actions-bar .btn-outline-danger,
.bulk-actions-bar .btn-outline-success,
.bulk-actions-bar .btn-outline-warning,
.bulk-actions-bar .btn-outline-info,
.bulk-actions-bar .btn-outline-secondary {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.bulk-actions-bar .btn-outline-danger:hover,
.bulk-actions-bar .btn-outline-success:hover,
.bulk-actions-bar .btn-outline-warning:hover,
.bulk-actions-bar .btn-outline-info:hover,
.bulk-actions-bar .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.bulk-actions-bar .btn-link {
    color: rgba(255, 255, 255, 0.8);
    margin-left: auto;
}
.bulk-actions-bar .btn-link:hover {
    color: #fff;
    text-decoration: underline;
}
.bulk-actions-bar .form-control-sm {
    min-width: 150px;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    border: none;
}

/* ═══════════════════════════════════════════════════════════════════
   FASE 3a §72 — Admin Search Cmd+K + Shortcuts + Quick Actions Dashboard
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Cmd+K Modal de búsqueda global */
.admin-search-modal {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 10vh;
}
.admin-search-backdrop {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(17, 24, 39, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.admin-search-panel {
    position: relative; z-index: 1;
    width: 100%; max-width: 600px;
    background: #fff; border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    animation: admin-search-in 0.12s ease-out;
}
@keyframes admin-search-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}
.admin-search-input-wrap {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid #e5e7eb;
    font-size: 16px;
}
.admin-search-input-wrap > i { color: #9ca3af; font-size: 18px; }
.admin-search-input-wrap input {
    flex: 1; border: none; outline: none;
    font-size: 15px; background: transparent; color: #111827;
}
.admin-search-input-wrap input::placeholder { color: #9ca3af; }
.admin-search-input-wrap kbd,
.admin-search-footer kbd,
.admin-shortcuts-table kbd {
    display: inline-block;
    padding: 2px 7px; font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: #f3f4f6; border: 1px solid #e5e7eb; border-bottom-width: 2px;
    border-radius: 4px; color: #374151;
    line-height: 1.3;
}
.admin-search-results { max-height: 400px; overflow-y: auto; }
.admin-search-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px; border-bottom: 1px solid #f3f4f6;
    text-decoration: none; color: #1f2937;
    transition: background 0.08s;
}
.admin-search-item:hover,
.admin-search-item.selected {
    background: #fef3f7; color: #8e1841; text-decoration: none;
}
.admin-search-item > i { font-size: 18px; color: #6b7280; flex-shrink: 0; }
.admin-search-item.selected > i,
.admin-search-item:hover > i { color: #8e1841; }
.admin-search-item .item-label { display: block; font-weight: 500; font-size: 14px; }
.admin-search-item .item-category { display: block; font-size: 12px; color: #9ca3af; }
.admin-search-empty {
    padding: 40px 20px; text-align: center; color: #6b7280; font-size: 14px;
}
.admin-search-footer {
    display: flex; justify-content: center; gap: 18px;
    padding: 10px; font-size: 12px; color: #6b7280;
    background: #f9fafb; border-top: 1px solid #e5e7eb;
}

/* 2. Botón trigger del header */
.nav-search-btn {
    color: rgba(255, 255, 255, 0.8);
    padding: 6px 12px;
    background: transparent;
    border: none;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.9rem;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.nav-search-btn:hover,
.nav-search-btn:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    text-decoration: none;
    outline: none;
}
.nav-search-btn kbd {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom-width: 2px;
    color: inherit;
    margin-left: 4px;
    padding: 1px 6px;
    font-size: 11px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* 3. Tabla de shortcuts help modal */
.admin-shortcuts-table {
    width: 100%;
    border-collapse: collapse;
}
.admin-shortcuts-table td {
    padding: 10px 18px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
    color: #1f2937;
}
.admin-shortcuts-table td:first-child { width: 120px; }
.admin-shortcuts-table kbd { margin-right: 4px; }
.admin-shortcuts-table tr:last-child td { border-bottom: none; }

/* 4. Quick-actions strip del dashboard (§3) — clase .qa-strip
      para no colisionar con .quick-actions + .qa-link ya existente. */
.qa-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 1rem;
}
.qa-strip-btn {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    color: #1f2937;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.qa-strip-btn:hover,
.qa-strip-btn:focus {
    border-color: #8e1841;
    color: #8e1841;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(142, 24, 65, 0.12);
    transform: translateY(-2px);
    outline: none;
}
.qa-strip-btn i {
    font-size: 20px;
    color: #8e1841;
    flex-shrink: 0;
}
.qa-strip-btn span {
    font-weight: 500;
    font-size: 14px;
}