/* ===== SAFE AREA TOKENS ===== */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --touch-min: 44px;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== DESIGN TOKENS ===== */
:root {
  color-scheme: light;
  --pase-primary: #1565C0;
  --pase-primary-dark: #0D47A1;
  --pase-primary-mid: #1976D2;
  --pase-primary-light: #42A5F5;
  --pase-primary-subtle: #E3F2FD;
  --pase-orange: #F57C00;
  --pase-orange-light: #FF9800;

  --sidebar-width: 260px;
  --sidebar-collapsed: 72px;
  --topbar-height: 64px;

  --gray-50: #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #EEEEEE;
  --gray-300: #E0E0E0;
  --gray-400: #BDBDBD;
  --gray-500: #9E9E9E;
  --gray-600: #757575;
  --gray-700: #616161;
  --gray-800: #424242;
  --gray-900: #212121;
  --white: #FFFFFF;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.18);

  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  --font-sans: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;

  --alert-dot-size: 10px;
  --alert-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  --bg-body: #f5f5f5;
  --bg-card: #FFFFFF;
  --bg-input: #FFFFFF;
  --bg-table-header: #FAFAFA;
  --bg-topbar: #FFFFFF;
  --border-color: #E0E0E0;
  --text-primary: #212121;
  --text-secondary: #616161;
  --text-muted: #9E9E9E;
}

/* Theme transition on specific UI elements (avoids expensive universal selector) */
body, body::before, body::after,
.pase-card, .stat-card, .rec-card, .alert-item,
.op-menu-card, .op-alert-card, .op-rec-card, .op-menu-list-item, .op-form-card, .op-empty-card, .op-stat-card,
.topbar, .sidebar, .sidebar .nav-link, .sidebar-user,
.table, .pase-table th, .pase-table td, .pase-table tbody tr,
.modal-content, .modal-header, .modal-body, .modal-footer,
.form-control, .form-select, .btn, .btn-outline-secondary, .btn-pase, .dropdown-item,
.custom-badge, .badge-green, .badge-yellow, .badge-red, .badge-blue,
.filter-select, .search-input,
.progress, .progress-bar,
table, th, td,
h1, h2, h3, h4, h5, h6, p, span, a, small, strong, code,
input, select, textarea,
.nav-link, .navbar, .navbar-brand,
code, pre {
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

/* ===== DARK THEME (attribute + class fallback for Opera GX compat) ===== */
html[data-theme="dark"],
html.dark {
  color-scheme: dark;
}
[data-theme="dark"],
.dark {
  --pase-primary: #42A5F5;
  --pase-primary-dark: #90CAF9;
  --pase-primary-mid: #64B5F6;
  --pase-primary-light: #1E88E5;
  --pase-primary-subtle: #1A237E;
  --pase-orange: #FFB74D;
  --pase-orange-light: #FFA726;

  --gray-50: #1E1E1E;
  --gray-100: #252525;
  --gray-200: #333333;
  --gray-300: #444444;
  --gray-400: #666666;
  --gray-500: #888888;
  --gray-600: #AAAAAA;
  --gray-700: #CCCCCC;
  --gray-800: #E0E0E0;
  --gray-900: #F5F5F5;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.7);

  --bg-body: #121212;
  --bg-card: #1E1E1E;
  --bg-input: #2A2A2A;
  --bg-table-header: #2A2A2A;
  --bg-topbar: #1A1A1A;
  --border-color: #333;
  --text-primary: #F0F0F0;
  --text-secondary: #AAA;
  --text-muted: #888;
}

[data-theme="dark"] body {
  background: var(--bg-body) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .main-wrapper {
  background: var(--bg-body);
}

[data-theme="dark"] .page-content {
  background: var(--bg-body);
}

[data-theme="dark"] .page-header h1 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .topbar {
  background: var(--bg-topbar) !important;
  border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .topbar-title {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .topbar-notif-btn,
[data-theme="dark"] .topbar-theme-btn,
[data-theme="dark"] .topbar-logout-btn {
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .topbar-notif-btn:hover,
[data-theme="dark"] .topbar-theme-btn:hover {
  background: rgba(66,165,245,0.1) !important;
  border-color: var(--pase-primary) !important;
  color: var(--pase-primary) !important;
}
[data-theme="dark"] .topbar-logout-btn:hover {
  background: rgba(239,83,80,0.15) !important;
  border-color: #EF5350 !important;
  color: #EF5350 !important;
}

[data-theme="dark"] .alert-dropdown-menu {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6) !important;
}
[data-theme="dark"] .alert-dropdown-header {
  background: var(--bg-card) !important;
  border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .alert-dropdown-header h6 {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .alert-dropdown-header .alert-count-label {
  background: var(--gray-200) !important;
  color: var(--text-muted) !important;
}
[data-theme="dark"] .btn-alert-action {
  color: var(--pase-primary) !important;
}
[data-theme="dark"] .btn-alert-action:hover {
  background: rgba(66,165,245,0.12) !important;
  color: var(--pase-primary-dark) !important;
}
[data-theme="dark"] .alert-dropdown-body .alert-item {
  background: var(--gray-100) !important;
  border-left-color: var(--gray-300) !important;
}
[data-theme="dark"] .alert-dropdown-body .alert-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
[data-theme="dark"] .alert-dropdown-body .alert-item.ALTA { background: #2D0D0D !important; border-left-color: #F44336 !important; }
[data-theme="dark"] .alert-dropdown-body .alert-item.MEDIA { background: #2D1D00 !important; border-left-color: #FF9800 !important; }
[data-theme="dark"] .alert-dropdown-body .alert-item.BAJA { background: #0D1D2D !important; border-left-color: #2196F3 !important; }
[data-theme="dark"] .alert-dropdown-body .alert-item .alert-drop-msg {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .alert-dropdown-body .alert-item .alert-drop-meta {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .alert-dropdown-body .alert-item .alert-drop-mark {
  background: var(--gray-100) !important;
  border-color: var(--gray-300) !important;
  color: var(--gray-500) !important;
}
[data-theme="dark"] .alert-dropdown-body .alert-item .alert-drop-mark:hover {
  background: rgba(76,175,80,0.2) !important;
  border-color: #2E7D32 !important;
  color: #81C784 !important;
}
[data-theme="dark"] .alert-dropdown-body .alert-item .alert-drop-mark.marked {
  background: transparent !important;
  border-color: transparent !important;
  color: #2E7D32 !important;
}
[data-theme="dark"] .alert-dropdown-footer {
  background: var(--bg-card) !important;
  border-top-color: var(--border-color) !important;
}
[data-theme="dark"] .alert-empty {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .alert-empty i {
  color: #2E7D32 !important;
}

[data-theme="dark"] .pase-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .rec-card,
[data-theme="dark"] .alert-item,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .toast,
[data-theme="dark"] .op-menu-card,
[data-theme="dark"] .op-alert-card,
[data-theme="dark"] .op-rec-card,
[data-theme="dark"] .op-greeting,
[data-theme="dark"] .op-form-card,
[data-theme="dark"] .op-menu-list-item,
[data-theme="dark"] .menu-calendar td {
  background: var(--bg-card) !important;
  color: var(--text-primary);
}

[data-theme="dark"] .pase-card-header {
  border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .pase-card-header h6 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .menu-calendar th {
  background: #0D47A1;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .search-input,
[data-theme="dark"] .filter-select {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .search-input:focus {
  border-color: var(--pase-primary) !important;
  box-shadow: 0 0 0 3px rgba(66,165,245,0.2) !important;
}

[data-theme="dark"] .form-label {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .table {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .pase-table th {
  background: var(--bg-table-header) !important;
  color: var(--text-muted) !important;
  border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .pase-table td {
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}

[data-theme="dark"] .pase-table tbody tr:hover {
  background: rgba(66,165,245,0.08) !important;
}
[data-theme="dark"] .pase-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.02) !important;
}
[data-theme="dark"] .pase-table tbody tr:nth-child(even):hover {
  background: rgba(66,165,245,0.1) !important;
}

[data-theme="dark"] .pase-card-body {
  color: var(--text-primary);
}

[data-theme="dark"] .stat-label {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .stat-value {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .stat-icon.green { background: #0D3B0D !important; color: #4CAF50 !important; }
[data-theme="dark"] .stat-icon.yellow { background: #3D2E00 !important; color: #FFC107 !important; }
[data-theme="dark"] .stat-icon.red { background: #3D0D0D !important; color: #EF5350 !important; }
[data-theme="dark"] .stat-icon.blue { background: #0D1B3D !important; color: #42A5F5 !important; }

[data-theme="dark"] .text-muted {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .text-success { color: #81C784 !important; }
[data-theme="dark"] .text-danger { color: #EF5350 !important; }
[data-theme="dark"] .text-warning { color: #FFD54F !important; }

[data-theme="dark"] .msg-success {
  background: #1B3A1B !important;
  color: #A5D6A7 !important;
  border-left-color: #4CAF50 !important;
}
[data-theme="dark"] .msg-error {
  background: #3A1B1B !important;
  color: #EF9A9A !important;
  border-left-color: #EF5350 !important;
}
[data-theme="dark"] .msg-info {
  background: #1B2A3A !important;
  color: #90CAF9 !important;
  border-left-color: #42A5F5 !important;
}

[data-theme="dark"] .cal-day-empty { background: #1A1A1A !important; }
[data-theme="dark"] .cal-day-weekend td { background: #1A1A1A !important; }

[data-theme="dark"] .btn-outline-secondary {
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .btn-outline-secondary:hover {
  background: var(--bg-input) !important;
  color: #FFF !important;
  border-color: var(--pase-primary) !important;
}
[data-theme="dark"] .btn-outline-secondary.active,
[data-theme="dark"] .btn-outline-secondary:active {
  background: var(--pase-primary) !important;
  color: #fff !important;
  border-color: var(--pase-primary) !important;
}

[data-theme="dark"] .btn-link {
  color: var(--pase-primary) !important;
}

[data-theme="dark"] .alert-item {
  background: var(--bg-card) !important;
  color: var(--text-primary);
}
[data-theme="dark"] .alert-item.ALTA { border-left-color: #F44336 !important; background: #2D0D0D !important; }
[data-theme="dark"] .alert-item.MEDIA { border-left-color: #FF9800 !important; background: #2D1D00 !important; }
[data-theme="dark"] .alert-item.BAJA { border-left-color: #2196F3 !important; background: #0D1D2D !important; }

[data-theme="dark"] .badge-estado-NORMAL { background: #0D3B0D !important; color: #4CAF50 !important; }
[data-theme="dark"] .badge-estado-STOCK_BAJO { background: #3D2E00 !important; color: #FFB74D !important; }
[data-theme="dark"] .badge-estado-SIN_EXISTENCIA { background: #3D0D0D !important; color: #EF5350 !important; }
[data-theme="dark"] .badge-venc-VIGENTE { background: #0D3B0D !important; color: #4CAF50 !important; }
[data-theme="dark"] .badge-venc-POR_VENCER { background: #3D2E00 !important; color: #FFB74D !important; }
[data-theme="dark"] .badge-venc-VENCIDO { background: #3D0D0D !important; color: #EF5350 !important; }
[data-theme="dark"] .badge-prior-ALTA { background: #3D0D0D !important; color: #EF5350 !important; }
[data-theme="dark"] .badge-prior-MEDIA { background: #3D2E00 !important; color: #FFB74D !important; }
[data-theme="dark"] .badge-prior-BAJA { background: #0D1B3D !important; color: #42A5F5 !important; }
[data-theme="dark"] .badge-tipo-ENTRADA { background: #0D3B0D !important; color: #4CAF50 !important; }
[data-theme="dark"] .badge-tipo-SALIDA { background: #3D0D0D !important; color: #EF5350 !important; }
[data-theme="dark"] .badge-tipo-AJUSTE { background: #0D1B3D !important; color: #42A5F5 !important; }
[data-theme="dark"] .badge-tipo-MERMA { background: #3D2E00 !important; color: #FFB74D !important; }
[data-theme="dark"] .badge-tipo-DEVOLUCION { background: #2D0D3D !important; color: #CE93D8 !important; }

[data-theme="dark"] .op-header {
  background: linear-gradient(135deg, #0A3D91, #0D47A1) !important;
}

[data-theme="dark"] .sidebar {
  background: linear-gradient(170deg, #0A1628 0%, #0D2137 30%, #132D4A 100%) !important;
}

[data-theme="dark"] .op-input,
[data-theme="dark"] .op-select {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .op-bottom-nav {
  background: var(--bg-card) !important;
  border-top-color: var(--border-color) !important;
}

[data-theme="dark"] .op-nav-btn {
  background: var(--bg-input) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .op-nav-btn:hover {
  background: #333 !important;
  color: #FFF !important;
}

[data-theme="dark"] .op-body {
  background: var(--bg-body) !important;
}

[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-footer {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}

[data-theme="dark"] .modal-header {
  border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-footer {
  border-top-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-title {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .btn-close {
  filter: invert(1);
}

[data-theme="dark"] .page-header h1 i {
  color: var(--pase-primary) !important;
}

[data-theme="dark"] .empty-state {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .cal-item {
  background: var(--pase-primary-mid) !important;
}

[data-theme="dark"] .cal-item.servido {
  background: #444 !important;
}

[data-theme="dark"] .cal-day-num {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .rec-platillo {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .rec-msg {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .consume-card {
  background: var(--bg-card) !important;
}

[data-theme="dark"] .op-menu-platillo,
[data-theme="dark"] .op-mli-platillo {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .op-menu-tipo,
[data-theme="dark"] .op-mli-tipo,
[data-theme="dark"] .op-menu-alumnos,
[data-theme="dark"] .op-mli-alumnos {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .op-mli-num {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .op-alert-msg {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .op-section-title {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .op-page-title {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .op-sub-title {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .op-greeting-text {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .op-label {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .op-alert-fecha,
[data-theme="dark"] .op-alert-producto {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .rec-card .rec-msg {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .op-menu-list-item.hoy {
  background: #2D2D00 !important;
}

[data-theme="dark"] .dropdown-item {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-item:hover {
  background: rgba(66,165,245,0.1) !important;
  color: var(--pase-primary) !important;
}

[data-theme="dark"] .dropdown-divider {
  border-color: var(--border-color) !important;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--gray-100);
  color: var(--gray-900);
  font-size: 0.92rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; color: inherit; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

/* Sidebar scrollbar: hidden but still scrollable */
.sidebar,
.sidebar-body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar::-webkit-scrollbar,
.sidebar-body::-webkit-scrollbar { display: none; }

/* ===== KEYFRAMES ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.15); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ===== SIDEBAR ===== */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  background: linear-gradient(170deg, #0A3D91 0%, #0D47A1 30%, #1565C0 100%);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 2px 0 12px rgba(0,0,0,0.15);
  overflow-y: auto;
  overflow-x: hidden;
}

/* sticky header/footer within sidebar */
.sidebar-header { flex-shrink: 0; }
.sidebar-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 1rem; }
.sidebar-footer {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.1);
  backdrop-filter: blur(4px);
  padding: 0.75rem;
}

/* Hide sidebar collapse toggle on mobile - it's meaningless in overlay mode */
@media (max-width: 991.98px) {
  .btn-sidebar-toggle { display: none !important; }
  .sidebar-body { padding-bottom: 2rem; }
  /* Fix sidebar text/icons alignment on mobile - prevent right-shift */
  .sidebar .nav-link {
    justify-content: flex-start;
    padding: 0.6rem 0.85rem !important;
    gap: 0.75rem !important;
  }
  .sidebar .nav-link i {
    width: 1.25rem !important;
    flex-shrink: 0;
  }
  .sidebar .nav-link span {
    flex: 1;
    text-align: left;
  }
  .sidebar-section {
    padding: 0.75rem !important;
  }
  .sidebar-section-label {
    padding: 0 0.75rem !important;
  }
}

/* collapsed */
.sidebar.collapsed { width: var(--sidebar-collapsed); }
.sidebar.collapsed .sidebar-body { overflow-y: auto; }
.sidebar.collapsed .sidebar-section { padding: 0.35rem 0; }
.sidebar.collapsed .sidebar-section-label,
.sidebar.collapsed .sidebar-user-name,
.sidebar.collapsed .sidebar-user-role,
.sidebar.collapsed .sidebar-user-status,
.sidebar.collapsed .brand-sub,
.sidebar.collapsed .btn-logout-label,
.sidebar.collapsed .nav-link span:not(.bi) { display: none !important; }
.sidebar.collapsed .nav-link {
  justify-content: center;
  padding: 0 2px;
  gap: 0;
  margin: 2px 0;
  border-radius: 0;
  min-height: 44px;
  width: 100%;
}
.sidebar.collapsed .nav-link i {
  font-size: 1.25rem;
  width: auto;
  opacity: 0.9;
  margin: 0;
}
.sidebar.collapsed .nav-link:hover {
  background: rgba(255,255,255,0.1);
  transform: none;
}
.sidebar.collapsed .nav-link:hover i { transform: scale(1.15); }
.sidebar.collapsed .nav-link.active {
  background: rgba(255,255,255,0.22);
  box-shadow: 0 0 20px rgba(255,152,0,0.2);
}
.sidebar.collapsed .nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--pase-orange);
  box-shadow: 0 0 10px rgba(255,152,0,0.5);
  display: block;
}
.sidebar.collapsed .nav-link.active i {
  opacity: 1;
  transform: scale(1.1);
}
.sidebar.collapsed .nav-link::after { display: none; }
.sidebar.collapsed .sidebar-brand {
  padding: 0.85rem 0.25rem 0.6rem;
}
.sidebar.collapsed .brand-icon {
  width: 36px;
  margin: 0 auto 0.15rem;
}
.sidebar.collapsed .brand-name {
  font-size: 0.6rem;
  line-height: 1;
  margin: 0;
  opacity: 0.6;
}
.sidebar.collapsed .sidebar-footer {
  padding: 0.4rem 0.15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.sidebar.collapsed .sidebar-user {
  flex-direction: column;
  gap: 0.3rem;
  text-align: center;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
}
.sidebar.collapsed .sidebar-user-avatar {
  width: 36px;
  height: 36px;
  font-size: 0.85rem;
  margin: 0 auto;
  position: relative;
}
.sidebar.collapsed .sidebar-user-avatar::after {
  width: 9px; height: 9px;
  bottom: 0; right: 0;
  border: 2px solid #0A3D91;
}
.sidebar.collapsed .sidebar-user-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 50%;
}
.sidebar.collapsed .btn-logout {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  padding: 0;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  min-height: 36px;
}
.sidebar.collapsed .btn-logout i {
  font-size: 1.1rem;
  margin: 0;
}
.sidebar.collapsed .flex-grow-1 { display: none !important; }
.sidebar.collapsed .btn-sidebar-toggle {
  width: 24px;
  height: 24px;
  bottom: -12px;
  font-size: 0.6rem;
}

/* brand */
.sidebar-brand {
  padding: 1.5rem 1.25rem 1rem;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
.brand-icon {
  width: 64px;
  margin: 0 auto 0.6rem;
  transition: transform var(--transition-base);
}
.brand-icon:hover { transform: scale(1.05); }
.brand-logo-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  display: block;
}
.brand-name { color: #fff; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.04em; margin: 0; }
.brand-sub { color: rgba(255,255,255,0.55); font-size: 0.7rem; margin: 0.15rem 0 0; line-height: 1.3; }

/* sidebar collapse toggle (inside brand) */
.btn-sidebar-toggle {
  position: absolute;
  bottom: -14px;
  right: 50%;
  transform: translateX(50%);
  width: 28px; height: 28px;
  background: #fff;
  border: 2px solid var(--pase-primary-dark);
  border-radius: 50%;
  display: flex;
  align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--pase-primary-dark);
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
  z-index: 2;
}
.btn-sidebar-toggle:hover {
  background: var(--pase-primary-mid);
  color: #fff;
  border-color: var(--pase-primary-mid);
  transform: translateX(50%) scale(1.1);
}
.btn-sidebar-toggle i { transition: transform var(--transition-base); }
.sidebar.collapsed .btn-sidebar-toggle i { transform: rotate(180deg); }

/* sections */
.sidebar-section { padding: 0.75rem 0.75rem 0.25rem; }

.sidebar-section-label {
  color: rgba(255,255,255,0.35);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0 0.75rem;
  margin-bottom: 0.35rem;
}

/* nav links */
.sidebar .nav-link {
  color: rgba(255,255,255,0.75);
  padding: 0.65rem 0.85rem;
  margin: 2px 0;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.sidebar .nav-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.sidebar .nav-link:hover::after { opacity: 1; }
.sidebar .nav-link:hover {
  color: #fff;
  transform: translateX(4px);
}
.sidebar .nav-link.active {
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--pase-orange), 0 2px 8px rgba(0,0,0,0.15);
}
.sidebar .nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--pase-orange);
  border-radius: 0 3px 3px 0;
}
.sidebar .nav-link i {
  font-size: 1.1rem;
  width: 1.25rem;
  text-align: center;
  opacity: 0.85;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  position: relative;
  z-index: 1;
}
.sidebar .nav-link:hover i { transform: scale(1.2); opacity: 1; }
.sidebar .nav-link.active i { opacity: 1; }
.sidebar .nav-link span { position: relative; z-index: 1; }

/* badge on nav link */
.nav-badge {
  margin-left: auto;
  background: var(--pase-orange);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1em 0.5em;
  border-radius: 10px;
  line-height: 1.4;
}

/* ===== SIDEBAR USER ===== */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.sidebar-user:hover {
  background: rgba(255,255,255,0.10);
  transform: translateY(-1px);
}
.sidebar-user:active {
  transform: translateY(0) scale(0.98);
}
.sidebar-user:focus-visible {
  outline: 2px solid var(--pase-orange);
  outline-offset: 2px;
}

.sidebar-user-avatar {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--pase-orange), #FF8A65);
  border-radius: 50%;
  display: flex;
  align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  position: relative;
}
.sidebar-user-avatar .avatar-text { line-height: 1; }

/* active dot */
.sidebar-user-avatar::after {
  content: '';
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px; height: 10px;
  background: #4CAF50;
  border-radius: 50%;
  border: 2px solid var(--pase-primary-dark);
  animation: pulse 2s ease-in-out infinite;
}

.sidebar-user-role {
  color: rgba(255,255,255,0.6);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.15rem;
  font-weight: 600;
}
.sidebar-user-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.sidebar-user-status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.5);
}
.status-indicator {
  width: 7px; height: 7px;
  background: #4CAF50;
  border-radius: 50%;
  display: inline-block;
  animation: pulse 2s ease-in-out infinite;
}

.btn-logout {
  background: rgba(255,255,255,0.08);
  border: none;
  color: rgba(255,255,255,0.6);
  padding: 0;
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  font-weight: 500;
  transition: all var(--transition-fast);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 34px; height: 34px;
  flex-shrink: 0;
}
.btn-logout:hover { background: rgba(255,255,255,0.15); color: #fff; transform: scale(1.08); }
.btn-logout:active { transform: scale(0.92); }
.btn-logout i { font-size: 1rem; }

/* ===== MAIN WRAPPER ===== */
.main-wrapper {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--transition-slow);
}
body.sidebar-collapsed .main-wrapper { margin-left: var(--sidebar-collapsed); }

/* ===== TOPBAR ===== */
.topbar {
  height: var(--topbar-height);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 0.75rem;
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: margin-left var(--transition-slow);
}

.topbar-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gray-800);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-mobile-brand { display: none; font-weight: 700; color: var(--pase-primary); font-size: 1.1rem; }

/* menu toggle (hamburger, mobile) */
.btn-menu-toggle {
  background: none;
  border: none;
  color: var(--gray-700);
  font-size: 1.3rem;
  padding: 0.4rem;
  border-radius: var(--radius-md);
  display: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
}
.btn-menu-toggle:hover { background: var(--gray-100); color: var(--pase-primary); }

/* Topbar right controls group */
.topbar-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* System switcher button */
.topbar-switch-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.7rem; border-radius: 8px;
  font-size: 0.78rem; font-weight: 600;
  color: var(--text-secondary); text-decoration: none;
  border: 1.5px solid var(--border-color);
  background: transparent;
  transition: all 0.2s ease; cursor: pointer;
  white-space: nowrap;
}
.topbar-switch-btn:hover {
  border-color: var(--pase-primary);
  color: var(--pase-primary);
  background: var(--pase-primary-subtle);
}
[data-theme="dark"] .topbar-switch-btn {
  color: var(--text-muted);
  border-color: var(--gray-300);
}
[data-theme="dark"] .topbar-switch-btn:hover {
  border-color: var(--pase-primary);
  color: var(--pase-primary);
  background: rgba(66,165,245,0.12);
}

/* Notification bell */
.topbar-notif-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--gray-200);
  background: transparent;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.topbar-notif-btn:hover {
  background: var(--pase-primary-subtle);
  border-color: var(--pase-primary-light);
  color: var(--pase-primary);
  transform: scale(1.06);
  box-shadow: 0 2px 8px rgba(21,101,192,0.12);
}
.topbar-notif-btn:active {
  transform: scale(0.94);
}
.topbar-notif-btn .notif-count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #E53935;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 2px 6px rgba(229,57,53,0.35);
  line-height: 1;
  letter-spacing: 0;
}
.topbar-notif-btn .notif-count.zero {
  display: none;
}
.topbar-notif-btn.has-alerts {
  border-color: #E53935 !important;
  color: #E53935 !important;
}
.topbar-notif-btn.has-alerts .notif-count {
  animation: badgePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes badgePop {
  0% { transform: scale(0); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* Theme toggle button */
.topbar-theme-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--gray-200);
  background: transparent;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.topbar-theme-btn:hover {
  background: var(--pase-primary-subtle);
  border-color: var(--pase-primary-light);
  color: var(--pase-primary);
  transform: rotate(15deg);
}

/* Logout button in topbar */
.topbar-logout-btn {
  height: 40px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--gray-200);
  background: transparent;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.75rem 0 0.6rem;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.topbar-logout-btn i { font-size: 1rem; }
.topbar-logout-btn:hover {
  background: #FFEBEE;
  border-color: #EF9A9A;
  color: #C62828;
}

/* ===== ALERT DROPDOWN ===== */
.alert-dropdown-menu {
  position: fixed;
  top: 68px;
  right: 1.5rem;
  width: 380px;
  max-width: calc(100vw - 3rem);
  max-height: 48vh;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.22);
  border: 1px solid var(--gray-200);
  padding: 0;
  background: var(--white);
  z-index: 1050;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px) scale(0.97);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.25s;
  pointer-events: none;
}
.alert-dropdown-menu.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0s;
  pointer-events: auto;
}
.alert-dropdown-menu::-webkit-scrollbar { width: 4px; }
.alert-dropdown-menu::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
.alert-dropdown-menu::-webkit-scrollbar-track { background: transparent; }

@media (min-width: 1400px) { .alert-dropdown-menu { width: 400px; } }
@media (min-width: 1920px) { .alert-dropdown-menu { width: 420px; right: 2rem; top: 72px; } }
@media (max-width: 991.98px) { .alert-dropdown-menu { right: 0.75rem; width: calc(100vw - 1.5rem); top: 64px; max-height: 45vh; } }
@media (max-width: 575.98px) {
  .alert-dropdown-menu { right: 0.35rem; top: 3.75rem; width: calc(100vw - 0.7rem); max-height: 60vh; border-radius: 12px; max-width: none; }
  .alert-dropdown-menu.show { transform: translateY(0) scale(1); }
  .alert-dropdown-menu .alert-dropdown-header { padding: 0.5rem 0.7rem; border-radius: 12px 12px 0 0; }
  .alert-dropdown-menu .alert-dropdown-body { padding: 0.3rem 0.5rem; }
  .alert-dropdown-menu .alert-dropdown-body .alert-item { padding: 0.45rem 0.55rem; gap: 0.45rem; border-left-width: 3px; }
  .alert-dropdown-menu .alert-dropdown-body .alert-item .badge-prior-ALTA,
  .alert-dropdown-menu .alert-dropdown-body .alert-item .badge-prior-MEDIA,
  .alert-dropdown-menu .alert-dropdown-body .alert-item .badge-prior-BAJA { min-width: 38px; font-size: 0.55rem; padding: 0.1em 0.25em; }
  .alert-dropdown-menu .alert-dropdown-body .alert-item .alert-drop-msg { font-size: 0.72rem; }
  .alert-dropdown-menu .alert-dropdown-body .alert-item .alert-drop-meta { font-size: 0.58rem; }
  .alert-dropdown-menu .alert-dropdown-body .alert-item .alert-drop-mark { width: 22px; height: 22px; font-size: 0.65rem; }
  .alert-dropdown-menu .alert-dropdown-footer { padding: 0.4rem 0.7rem; }
  .alert-dropdown-menu .alert-empty { padding: 1rem 0.7rem; }
  .alert-dropdown-menu .alert-empty i { font-size: 1.4rem; }
  .alert-dropdown-menu .alert-empty p { font-size: 0.72rem; }
}
@media (max-width: 380px) {
  .alert-dropdown-menu { right: 0.25rem; top: 3.5rem; width: calc(100vw - 0.5rem); max-height: 55vh; border-radius: 10px; }
  .alert-dropdown-menu .alert-dropdown-header h6 { font-size: 0.75rem; }
  .alert-dropdown-menu .alert-dropdown-body .alert-item .alert-drop-msg { font-size: 0.68rem; }
  .alert-dropdown-menu .alert-dropdown-body .alert-item .badge-prior-ALTA,
  .alert-dropdown-menu .alert-dropdown-body .alert-item .badge-prior-MEDIA,
  .alert-dropdown-menu .alert-dropdown-body .alert-item .badge-prior-BAJA { min-width: 34px; font-size: 0.5rem; }
}

.alert-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
  border-radius: 14px 14px 0 0;
}
.alert-dropdown-header h6 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gray-800);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.alert-dropdown-header h6 i { color: var(--pase-orange); font-size: 0.9rem; }
.alert-dropdown-header .alert-count-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--gray-500);
  background: var(--gray-100);
  padding: 0.15em 0.55em;
  border-radius: 10px;
}
.btn-alert-action {
  background: none;
  border: none;
  color: var(--pase-primary);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.btn-alert-action:hover {
  background: var(--pase-primary-subtle);
  color: var(--pase-primary-dark);
}

.alert-dropdown-body {
  padding: 0.35rem 0.65rem;
}

.alert-dropdown-body .alert-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  border-left: 3px solid var(--gray-300);
  margin-bottom: 0.25rem;
  background: var(--gray-50);
  transition: background 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  cursor: default;
}
.alert-dropdown-body .alert-item:last-child { margin-bottom: 0; }
.alert-dropdown-body .alert-item:hover {
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.alert-dropdown-body .alert-item.ALTA { border-left-color: #F44336; background: #FFFBFB; }
.alert-dropdown-body .alert-item.MEDIA { border-left-color: #FF9800; background: #FFFDF8; }
.alert-dropdown-body .alert-item.BAJA { border-left-color: #2196F3; background: #F8FBFF; }

.alert-dropdown-body .alert-item .badge-prior-ALTA,
.alert-dropdown-body .alert-item .badge-prior-MEDIA,
.alert-dropdown-body .alert-item .badge-prior-BAJA {
  flex-shrink: 0;
  min-width: 44px;
  text-align: center;
  padding: 0.15em 0.35em;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 1px;
}
.alert-dropdown-body .alert-item .badge-prior-ALTA { background: #FFEBEE; color: #C62828; }
.alert-dropdown-body .alert-item .badge-prior-MEDIA { background: #FFF8E1; color: #E65100; }
.alert-dropdown-body .alert-item .badge-prior-BAJA { background: #E3F2FD; color: #1565C0; }

.alert-dropdown-body .alert-item .alert-drop-msg {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  color: var(--gray-800);
  line-height: 1.35;
  word-break: break-word;
}
.alert-dropdown-body .alert-item .alert-drop-meta {
  font-size: 0.63rem;
  color: var(--gray-500);
  margin-top: 1px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.alert-dropdown-body .alert-item .alert-drop-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
}

.alert-dropdown-body .alert-item .alert-drop-mark {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.12s ease;
  margin-top: 1px;
}
.alert-dropdown-body .alert-item .alert-drop-mark:hover {
  background: #E8F5E9;
  border-color: #A5D6A7;
  color: #2E7D32;
  transform: scale(1.12);
}
.alert-dropdown-body .alert-item .alert-drop-mark.marked {
  border-color: transparent;
  color: #A5D6A7;
  pointer-events: none;
  background: transparent;
}

.alert-dropdown-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.85rem;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  border-radius: 0 0 14px 14px;
}

.alert-empty {
  text-align: center;
  padding: 1.25rem 0.85rem;
  color: var(--gray-400);
}
.alert-empty i {
  font-size: 1.6rem;
  display: block;
  margin-bottom: 0.4rem;
  color: #A5D6A7;
}
.alert-empty p {
  margin: 0;
  font-size: 0.78rem;
}

/* ===== PAGE CONTENT ===== */
.page-content {
  padding: 1.5rem;
  flex: 1;
}

/* ===== ALERT MESSAGES ===== */
.msg-success, .msg-error, .msg-info {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
  animation: slideInDown 0.35s ease;
  box-shadow: var(--shadow-xs);
}
.msg-success { background: var(--pase-primary-subtle); color: var(--pase-primary-dark); border-left: 4px solid var(--pase-primary-light); }
.msg-error { background: #FFEBEE; color: #B71C1C; border-left: 4px solid #EF5350; }
.msg-info { background: #E3F2FD; color: #0D47A1; border-left: 4px solid #42A5F5; }
.msg-success i, .msg-error i, .msg-info i { font-size: 1.1rem; flex-shrink: 0; }

/* ===== CARDS ===== */
.pase-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all var(--transition-base);
  border: 1px solid transparent;
}
.pase-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.pase-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.pase-card-header h6 {
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--gray-800);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pase-card-body { padding: 1.25rem; }

/* stat cards */
.stat-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--gray-300);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(255,255,255,0.5));
  transition: opacity var(--transition-base);
  pointer-events: none;
}
.stat-card:hover::before { opacity: 1; }
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.stat-card.green { border-left-color: var(--pase-primary-light); }
.stat-card.yellow { border-left-color: #FFC107; }
.stat-card.red { border-left-color: #F44336; }
.stat-card.blue { border-left-color: #2196F3; }

.stat-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
  transition: transform var(--transition-base);
}
.stat-card:hover .stat-icon { transform: scale(1.1); }
.stat-icon.green { background: var(--pase-primary-subtle); color: var(--pase-primary); }
.stat-icon.yellow { background: #FFF8E1; color: #F57F17; }
.stat-icon.red { background: #FFEBEE; color: #C62828; }
.stat-icon.blue { background: #E3F2FD; color: #1565C0; }

.stat-value { font-size: 1.75rem; font-weight: 700; color: var(--gray-900); line-height: 1; }
.stat-label { color: var(--gray-600); font-size: 0.8rem; margin-top: 2px; }

/* ===== BADGES ===== */
.badge-estado-NORMAL { background: var(--pase-primary-subtle); color: var(--pase-primary); }
.badge-estado-STOCK_BAJO { background: #FFF8E1; color: #E65100; }
.badge-estado-SIN_EXISTENCIA { background: #FFEBEE; color: #C62828; }

.badge-venc-VIGENTE { background: var(--pase-primary-subtle); color: var(--pase-primary); }
.badge-venc-POR_VENCER { background: #FFF8E1; color: #E65100; }
.badge-venc-VENCIDO { background: #FFEBEE; color: #C62828; }

.badge-prior-ALTA { background: #FFEBEE; color: #C62828; }
.badge-prior-MEDIA { background: #FFF8E1; color: #E65100; }
.badge-prior-BAJA { background: #E3F2FD; color: #1565C0; }

.badge-tipo-ENTRADA { background: var(--pase-primary-subtle); color: var(--pase-primary); }
.badge-tipo-SALIDA { background: #FFEBEE; color: #C62828; }
.badge-tipo-AJUSTE { background: #E3F2FD; color: #1565C0; }
.badge-tipo-MERMA { background: #FFF3E0; color: #E65100; }
.badge-tipo-DEVOLUCION { background: #F3E5F5; color: #6A1B9A; }

.badge-rol { font-size: 0.68rem; padding: 0.25em 0.6em; border-radius: 4px; font-weight: 600; }
.badge-rol-ADMINISTRADOR { background: #EDE7F6; color: #4527A0; }
.badge-rol-DIRECTOR { background: #E3F2FD; color: #1565C0; }
.badge-rol-ENCARGADO_COCINA { background: var(--pase-primary-subtle); color: var(--pase-primary); }
.badge-rol-CONSULTA { background: var(--gray-100); color: var(--gray-700); }

.custom-badge {
  display: inline-block;
  padding: 0.25em 0.65em;
  border-radius: 5px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ===== ALERTS ===== */
.alert-item {
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--gray-300);
  margin-bottom: 0.4rem;
  background: var(--gray-50);
  font-size: 0.83rem;
  transition: all var(--transition-fast);
  position: relative;
}
.alert-item:hover {
  transform: translateX(3px);
  box-shadow: var(--shadow-xs);
}
.alert-item.ALTA { border-left-color: #F44336; background: #FFFBFB; }
.alert-item.MEDIA { border-left-color: #FF9800; background: #FFFDF8; }
.alert-item.BAJA { border-left-color: #2196F3; background: #F8FBFF; }

.rec-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--pase-orange);
  position: relative;
  transition: all var(--transition-base);
  overflow: hidden;
}
.rec-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.rec-card .rec-platillo {
  font-weight: 600;
  font-size: 1rem;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.rec-card .rec-msg {
  color: var(--gray-600);
  font-size: 0.84rem;
  margin-top: 0.25rem;
  line-height: 1.5;
}

/* ===== CALENDAR ===== */
.menu-calendar { table-layout: fixed; width: 100%; }
.menu-calendar th {
  background: var(--pase-primary);
  color: #fff;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.menu-calendar td {
  vertical-align: top;
  padding: 0.35rem;
  min-height: 80px;
  border: 1px solid var(--gray-200);
}
.cal-day-num { font-size: 0.72rem; color: var(--gray-400); text-align: right; margin-bottom: 3px; }
.cal-item {
  background: var(--pase-primary);
  color: #fff;
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 0.7rem;
  font-weight: 500;
  margin-bottom: 3px;
  line-height: 1.3;
}
.cal-item.servido { background: var(--gray-500); }
.cal-day-empty { background: #fafafa; }
.cal-day-weekend td { background: #fafafa; }

/* ===== TABLE ===== */
.table { margin-bottom: 0; }

.table-responsive {
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-100);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pase-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.pase-table thead { position: sticky; top: 0; z-index: 2; }
.pase-table th {
  background: var(--gray-50);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-600);
  white-space: nowrap;
  border-bottom: 2px solid var(--gray-200);
  padding: 0.7rem 0.85rem !important;
  position: sticky;
  top: 0;
  z-index: 2;
}
.pase-table td {
  vertical-align: middle;
  font-size: 0.85rem;
  padding: 0.6rem 0.85rem !important;
  border-bottom: 1px solid var(--gray-100);
  line-height: 1.5;
}
.pase-table tbody tr {
  transition: background var(--transition-fast);
}
.pase-table tbody tr:hover {
  background: rgba(21,101,192,0.04);
}
.pase-table tbody tr:last-child td {
  border-bottom: none;
}
.pase-table tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.015);
}
.pase-table tbody tr:nth-child(even):hover {
  background: rgba(21,101,192,0.06);
}
.pase-table .cell-faded {
  color: var(--gray-500);
  font-size: 0.8rem;
}
.pase-table .cell-strong {
  font-weight: 600;
  color: var(--gray-900);
}

/* Table filter controls row */
.table-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ===== INLINE STOCK ADJUSTOR ===== */
.stock-adjustor {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.btn-adjust {
  width: 28px; height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--gray-500);
  font-size: 0.95rem; font-weight: 700;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0;
  user-select: none;
}
.btn-adjust.btn-dec:hover {
  background: #FFEBEE;
  color: #E53935;
}
.btn-adjust.btn-inc:hover {
  background: #E8F5E9;
  color: #2E7D32;
}
.btn-adjust:active {
  transform: scale(0.88);
}
.btn-adjust.btn-dec:active { background: #FFCDD2; }
.btn-adjust.btn-inc:active { background: #C8E6C9; }

.stock-input {
  font-weight: 700;
  font-size: 0.9rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  background: #fff;
  color: var(--gray-900);
  text-align: center;
  width: 68px;
  height: 30px;
}
.stock-input:focus {
  border-color: var(--pase-primary);
  box-shadow: 0 0 0 2px rgba(21,101,192,0.15);
  outline: none;
  background: #fff;
}
.stock-input[type=number]::-webkit-inner-spin-button,
.stock-input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.stock-input[type=number] { -moz-appearance: textfield; }

tr.row-modified {
  background: #FFF8E1 !important;
  box-shadow: inset 3px 0 0 var(--pase-orange);
}
tr.row-modified:hover {
  background: #FFF3CD !important;
}
tr.row-modified .stock-adjustor {
}

/* Stock adjustor pulse animation on change */
@keyframes stockPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.stock-input.changed {
  animation: stockPulse 0.25s ease;
}

/* ===== FLOATING SAVE BAR ===== */
.floating-save-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--gray-800);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.floating-save-bar #changeCount {
  margin-right: auto;
  opacity: 0.85;
}
.floating-save-bar .btn-pase {
  background: var(--pase-orange);
  color: #fff;
  border: none;
}
.floating-save-bar .btn-pase:hover {
  background: var(--pase-orange-light);
}
.floating-save-bar .btn-outline-secondary {
  border-color: rgba(255,255,255,0.4);
  color: rgba(255,255,255,0.85);
}
.floating-save-bar .btn-outline-secondary:hover {
  border-color: rgba(255,255,255,0.7);
  color: #fff;
  background: rgba(255,255,255,0.1);
}

[data-theme="dark"] .stock-adjustor {
}
[data-theme="dark"] .btn-adjust {
  background: transparent;
  color: var(--text-muted);
}
[data-theme="dark"] .btn-adjust.btn-dec:hover {
  background: rgba(239,83,80,0.2) !important;
  color: #EF5350 !important;
}
[data-theme="dark"] .btn-adjust.btn-inc:hover {
  background: rgba(76,175,80,0.2) !important;
  color: #81C784 !important;
}
[data-theme="dark"] .stock-input {
  background: var(--bg-input) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .stock-input:focus {
  border-color: var(--pase-primary) !important;
  box-shadow: 0 0 0 2px rgba(66,165,245,0.2) !important;
}
[data-theme="dark"] tr.row-modified {
  background: #3E2723 !important;
  box-shadow: inset 3px 0 0 var(--pase-orange);
}
[data-theme="dark"] tr.row-modified:hover {
  background: #4E342E !important;
}
[data-theme="dark"] tr.row-modified .stock-adjustor {
}
[data-theme="dark"] .floating-save-bar {
  background: var(--gray-900);
  border-bottom: 1px solid var(--gray-700);
}

/* ===== FORMS ===== */
.form-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.form-section-title i { color: var(--pase-primary); }

.form-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.form-row > * { flex: 1 1 200px; min-width: 0; }

.form-label {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--gray-800);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.form-control, .form-select {
  background: #fff;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--gray-300);
  padding: 0.55rem 0.85rem;
  font-size: 0.9rem;
  transition: all var(--transition-fast);
}
.form-control:focus, .form-select:focus {
  border-color: var(--pase-primary);
  box-shadow: 0 0 0 3px rgba(21,101,192,0.12);
  outline: none;
  background: #fff;
}
.form-control:hover, .form-select:hover { border-color: var(--gray-400); }
.form-control:disabled, .form-select:disabled {
  background: var(--gray-100);
  color: var(--gray-500);
  cursor: not-allowed;
  opacity: 0.7;
}
.form-control:disabled:hover, .form-select:disabled:hover { border-color: var(--gray-300); }

.text-danger small,
.validation-error {
  display: block;
  color: #C62828;
  font-size: 0.72rem;
  margin-top: 0.2rem;
  animation: fadeIn 0.3s ease;
}

/* ===== SEARCH BAR ===== */
.search-input {
  border-radius: var(--radius-md);
  border: 1.5px solid var(--gray-300);
  padding: 0.45rem 0.9rem 0.45rem 2.2rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 0.75rem center;
  font-size: 0.875rem;
  min-width: 220px;
  transition: all var(--transition-fast);
}
.search-input:focus { border-color: var(--pase-primary); outline: none; box-shadow: 0 0 0 3px rgba(21,101,192,0.08); }

/* ===== EMPTY STATE ===== */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--gray-400);
}
.empty-state i { font-size: 3rem; margin-bottom: 0.75rem; display: block; }
.empty-state p { margin: 0; font-size: 0.9rem; }

/* ===== PAGE HEADER ===== */
.page-header {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.page-header h1 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.page-header h1 i { color: var(--pase-primary); }

/* ===== OVERLAY (mobile) ===== */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1039;
  opacity: 0;
  transition: opacity 0.25s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sidebar-overlay.show {
  display: block;
  opacity: 1;
}

/* ===== RESPONSIVE TABLE HELPERS ===== */
.table-cell-truncate {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .table-cell-truncate { max-width: 90px; }
  .stat-value { font-size: 1.3rem; }
  .stat-card { padding: 0.9rem 1rem; }
  .stat-icon { width: 38px; height: 38px; font-size: 1.1rem; }
  .pase-card-header { flex-wrap: wrap; }
  .search-input { min-width: 140px; width: 100%; }
  .page-header h1 { font-size: 1.15rem; }
  .page-content { padding: 0.75rem; }
  .menu-calendar td { min-height: 60px; padding: 0.2rem; }
  .menu-calendar th { font-size: 0.65rem; padding: 0.35rem; }
  .cal-item { font-size: 0.6rem; padding: 2px 4px; }
  .cal-day-num { font-size: 0.6rem; }
  .menu-mobile-list { margin-top: 0 !important; }
  .menu-mobile-list .pase-card-body { padding: 0.5rem !important; }
  #viewToggle .btn { font-size: 0.7rem !important; padding: 0.3rem 0.5rem !important; }
  /* Calendar renders identically to desktop on all viewports */
  #calendarView .table-responsive { overflow-x: visible; }
  #calendarView .table-responsive table { min-width: 0; }
  .menu-calendar td { min-height: 50px; }
  .menu-calendar th, .menu-calendar td { font-size: 0.6rem; padding: 0.2rem 0.15rem; }
  .cal-item { font-size: 0.5rem; padding: 1px 2px; }
  /* Page header buttons: full-width on mobile */
  .page-header .d-flex.gap-2 {
    width: 100%;
  }
  .page-header .d-flex.gap-2 .btn,
  .page-header .d-flex.gap-2 form,
  .page-header .d-flex.gap-2 a.btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }
  .page-header .d-flex.gap-2 form {
    display: block;
  }
  .page-header .d-flex.gap-2 form button {
    width: 100%;
    justify-content: center;
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }
  /* btn-outline-success consistency */
  .btn-outline-success {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }
}
@media (min-width: 576px) {
  .list-day-drop.drag-over { background: #E8F5E9 !important; border-radius: 8px; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width) !important;
    box-shadow: none;
  }
  .sidebar.show { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,0.2); }
  .sidebar.collapsed { width: var(--sidebar-width) !important; }
  .sidebar.collapsed .sidebar-section-label,
  .sidebar.collapsed .sidebar-user-name,
  .sidebar.collapsed .sidebar-user-role,
  .sidebar.collapsed .sidebar-user-status,
  .sidebar.collapsed .brand-sub,
  .sidebar.collapsed .btn-logout-label,
  .sidebar.collapsed .nav-link span:not(.bi) { display: block !important; }
  .sidebar.collapsed .nav-link { justify-content: flex-start; padding: 0.6rem 0.85rem; }
  .sidebar.collapsed .sidebar-user { flex-direction: row; }
  .sidebar.collapsed .btn-logout { width: 34px; }

  .main-wrapper { margin-left: 0 !important; width: 100%; }
  .main-wrapper.sidebar-collapsed { margin-left: 0 !important; }

  .btn-menu-toggle { display: flex; }
  .topbar-mobile-brand { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-title { display: none; }

  /* Topbar móvil: padding lateral reducido para que no sobre espacio a la derecha */
  .topbar { padding: 0 0.6rem; gap: 0.4rem; }
  .topbar-controls { gap: 0.3rem; }
  /* En móvil, el botón "Cambiar Sistema" solo muestra el ícono (compacto) */
  .topbar-switch-btn { padding: 0.35rem 0.5rem; }
  .topbar-switch-btn span { display: none; }

  .page-content { padding: 1rem; }
}

/* Pantallas muy estrechas: topbar aún más compacto */
@media (max-width: 400px) {
  .topbar { padding: 0 0.45rem; gap: 0.3rem; }
  .topbar-controls { gap: 0.25rem; }
  .topbar-mobile-brand { font-size: 0.95rem; }
}

/* ===== BUTTON STYLES ===== */
.btn {
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn.disabled {
  opacity: 0.6;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}
.btn:hover {
  box-shadow: var(--shadow-sm);
}
.btn-outline-secondary {
  border-color: var(--gray-300);
  color: var(--gray-700);
  background: transparent;
}
.btn-outline-secondary:hover {
  background: var(--pase-primary-subtle);
  border-color: var(--pase-primary-light);
  color: var(--pase-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-pase {
  background: var(--pase-primary);
  color: #fff;
  border: none;
  padding: 0.55rem 1.35rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: all var(--transition-base);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 2px 6px rgba(21,101,192,0.2);
}
.btn-pase:hover {
  background: var(--pase-primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(21,101,192,0.3);
}
.btn-pase:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(21,101,192,0.2); }
.btn-pase-orange { background: var(--pase-orange); box-shadow: 0 2px 6px rgba(245,124,0,0.2); }
.btn-pase-orange:hover { background: #E65100; box-shadow: 0 4px 12px rgba(245,124,0,0.3); }

.btn-sm {
  font-size: 0.8rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-sm);
}

.rounded-pill {
  border-radius: 50rem !important;
}

/* ===== DROPDOWN ===== */
.dropdown-menu {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-100);
  padding: 0.4rem;
  margin-top: 0.4rem;
  min-width: 200px;
  animation: fadeInDown 0.15s ease;
}
.dropdown-item {
  padding: 0.6rem 1rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 500;
  font-size: 0.88rem;
  transition: all var(--transition-fast);
}
.dropdown-item i { font-size: 1rem; width: 20px; text-align: center; }
.dropdown-item:hover { background: var(--pase-primary-subtle); color: var(--pase-primary-dark); }
.dropdown-item.text-danger:hover { background: #FFEBEE; color: #C62828; }
.dropdown-divider { margin: 0.3rem 0; border-color: var(--gray-100); }

/* ===== TOAST ===== */
.toast {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: none;
}

/* ===== PRINT / PDF ===== */
@media print {
  @page {
    size: landscape;
    margin: 1.2cm;
  }
  body {
    background: white !important;
    font-size: 10pt !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .sidebar, .topbar, .op-bottom-nav, .op-header,
  .btn, .btn-pase, .btn-outline-secondary, .btn-link,
  .page-header form, .pase-card-header input,
  .no-print, .dropdown, .alert-item, .msg-success, .msg-error, .msg-info,
  .toast-container, .sidebar-overlay, #globalLoadingBar,
  .context-menu { display: none !important; }
  .main-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .page-content {
    padding: 0 !important;
    max-width: 100% !important;
  }
  .page-header h1 {
    font-size: 14pt !important;
    color: #000 !important;
  }
  .pase-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 8pt !important;
  }
  .pase-card-header {
    padding: 6pt 10pt !important;
    border-bottom: 1px solid #ccc !important;
  }
  .pase-card-header h6 {
    font-size: 10pt !important;
    color: #000 !important;
  }
  .pase-card-body {
    padding: 8pt 10pt !important;
  }
  .table {
    width: 100% !important;
  }
  .pase-table th {
    background: #1565C0 !important;
    color: white !important;
    font-size: 8pt !important;
    padding: 5pt 6pt !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .pase-table td {
    font-size: 8.5pt !important;
    padding: 4pt 6pt !important;
    border-bottom: 1px solid #ddd !important;
    color: #000 !important;
  }
  .stat-card {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    padding: 8pt !important;
  }
  .stat-value { font-size: 14pt !important; color: #000 !important; }
  .stat-label { font-size: 7pt !important; color: #555 !important; }
  .row { display: flex; flex-wrap: nowrap; }
  .col-12 { width: 100%; }
  .col-6 { width: 50%; }
  .col-4 { width: 33.33%; }
  .col-3 { width: 25%; }
  .custom-badge {
    border: 1px solid #999 !important;
    padding: 1pt 4pt !important;
    font-size: 7pt !important;
    color: #000 !important;
    background: #f5f5f5 !important;
  }
  a { text-decoration: none !important; color: #000 !important; }
  .empty-state { display: none !important; }
  .table-responsive {
    overflow: visible !important;
    border: none !important;
  }

  /* Force light mode in print regardless of dark theme */
  [data-theme="dark"] body,
  [data-theme="dark"] .main-wrapper,
  [data-theme="dark"] .page-content,
  [data-theme="dark"] .pase-card,
  [data-theme="dark"] .stat-card,
  [data-theme="dark"] .rec-card,
  [data-theme="dark"] .alert-item,
  [data-theme="dark"] .pase-card-body,
  [data-theme="dark"] .pase-card-header,
  [data-theme="dark"] .table,
  [data-theme="dark"] .pase-table th,
  [data-theme="dark"] .pase-table td,
  [data-theme="dark"] .pase-table tbody tr,
  [data-theme="dark"] .pase-table tbody tr:nth-child(even),
  [data-theme="dark"] .page-header h1,
  [data-theme="dark"] .form-control,
  [data-theme="dark"] .form-select,
  [data-theme="dark"] .badge-estado-NORMAL,
  [data-theme="dark"] .badge-estado-STOCK_BAJO,
  [data-theme="dark"] .badge-estado-SIN_EXISTENCIA,
  [data-theme="dark"] .badge-venc-VIGENTE,
  [data-theme="dark"] .badge-venc-POR_VENCER,
  [data-theme="dark"] .badge-venc-VENCIDO,
  [data-theme="dark"] .custom-badge,
  [data-theme="dark"] .stock-adjustor,
  [data-theme="dark"] .stock-input,
  [data-theme="dark"] .floating-save-bar,
  [data-theme="dark"] .modal-content,
  [data-theme="dark"] .modal-header,
  [data-theme="dark"] .modal-body {
    background: white !important;
    color: black !important;
    border-color: #ccc !important;
    box-shadow: none !important;
  }
  [data-theme="dark"] .pase-table th { background: #1565C0 !important; color: white !important; }
  [data-theme="dark"] .pase-table td { border-bottom-color: #ddd !important; }
  [data-theme="dark"] .pase-table tbody tr:nth-child(even) { background: #f9f9f9 !important; }
  [data-theme="dark"] .stock-input { border-color: #ddd !important; }
  [data-theme="dark"] .badge-estado-NORMAL { background: #E3F2FD !important; color: #1565C0 !important; }
  [data-theme="dark"] .badge-estado-STOCK_BAJO { background: #FFF8E1 !important; color: #E65100 !important; }
  [data-theme="dark"] .badge-estado-SIN_EXISTENCIA { background: #FFEBEE !important; color: #C62828 !important; }
  [data-theme="dark"] .badge-venc-VIGENTE { background: #E3F2FD !important; color: #1565C0 !important; }
  [data-theme="dark"] .badge-venc-POR_VENCER { background: #FFF8E1 !important; color: #E65100 !important; }
  [data-theme="dark"] .badge-venc-VENCIDO { background: #FFEBEE !important; color: #C62828 !important; }

  /* Force light mode for ALL remaining dark-mode elements in print/PDF */
  [data-theme="dark"] .btn-sidebar-toggle,
  [data-theme="dark"] .real-clock-container,
  [data-theme="dark"] #realTimeClock,
  [data-theme="dark"] .detail-table,
  [data-theme="dark"] .detail-table .detail-label,
  [data-theme="dark"] .detail-table .detail-value,
  [data-theme="dark"] #detailModalBody table,
  [data-theme="dark"] #detailModalBody table tr th,
  [data-theme="dark"] #detailModalBody table tr td,
  [data-theme="dark"] .real-clock,
  [data-theme="dark"] .topbar .real-clock,
  [data-theme="dark"] .sidebar .nav-link,
  [data-theme="dark"] .sidebar .nav-link span,
  [data-theme="dark"] .sidebar .nav-link i,
  [data-theme="dark"] .sidebar-brand,
  [data-theme="dark"] .brand-name,
  [data-theme="dark"] .brand-sub,
  [data-theme="dark"] .sidebar-section-label,
  [data-theme="dark"] .sidebar-user,
  [data-theme="dark"] .sidebar-user-name,
  [data-theme="dark"] .sidebar-user-role,
  [data-theme="dark"] .sidebar-footer,
  [data-theme="dark"] .btn-logout,
  [data-theme="dark"] .badge-prior-ALTA,
  [data-theme="dark"] .badge-prior-MEDIA,
  [data-theme="dark"] .badge-prior-BAJA,
  [data-theme="dark"] .badge-tipo-ENTRADA,
  [data-theme="dark"] .badge-tipo-SALIDA,
  [data-theme="dark"] .badge-tipo-AJUSTE,
  [data-theme="dark"] .badge-tipo-MERMA,
  [data-theme="dark"] .badge-tipo-DEVOLUCION,
  [data-theme="dark"] .badge-rol,
  [data-theme="dark"] .badge-rol-ADMINISTRADOR,
  [data-theme="dark"] .badge-rol-DIRECTOR,
  [data-theme="dark"] .badge-rol-ENCARGADO_COCINA,
  [data-theme="dark"] .badge-rol-CONSULTA,
  [data-theme="dark"] .op-menu-card,
  [data-theme="dark"] .op-alert-card,
  [data-theme="dark"] .op-rec-card,
  [data-theme="dark"] .op-greeting,
  [data-theme="dark"] .op-form-card,
  [data-theme="dark"] .op-menu-list-item,
  [data-theme="dark"] .op-header,
  [data-theme="dark"] .op-bottom-nav,
  [data-theme="dark"] .op-nav-btn,
  [data-theme="dark"] .op-body,
  [data-theme="dark"] .menu-calendar td,
  [data-theme="dark"] .menu-calendar th,
  [data-theme="dark"] .cal-day-empty,
  [data-theme="dark"] .cal-day-weekend td,
  [data-theme="dark"] .cal-item,
  [data-theme="dark"] .cal-item.servido,
  [data-theme="dark"] .cal-day-num,
  [data-theme="dark"] .topbar-title,
  [data-theme="dark"] .topbar-controls,
  [data-theme="dark"] .topbar-notif-btn,
  [data-theme="dark"] .topbar-theme-btn,
  [data-theme="dark"] .topbar-logout-btn,
  [data-theme="dark"] .stat-icon,
  [data-theme="dark"] .stat-icon.green,
  [data-theme="dark"] .stat-icon.yellow,
  [data-theme="dark"] .stat-icon.red,
  [data-theme="dark"] .stat-icon.blue,
  [data-theme="dark"] .context-menu,
  [data-theme="dark"] .context-menu-item,
  [data-theme="dark"] .context-menu-item.danger,
  [data-theme="dark"] .dropdown-menu,
  [data-theme="dark"] .dropdown-item,
  [data-theme="dark"] .search-input,
  [data-theme="dark"] .filter-select,
  [data-theme="dark"] .form-section-title {
    background: white !important;
    color: black !important;
    border-color: #ccc !important;
    box-shadow: none !important;
    border-left-color: #ccc !important;
    border-right-color: #ccc !important;
    border-top-color: #ccc !important;
    border-bottom-color: #ccc !important;
  }
  [data-theme="dark"] .sidebar { background: white !important; }
  [data-theme="dark"] .sidebar .nav-link.active { background: #f5f5f5 !important; box-shadow: none !important; }
  [data-theme="dark"] .btn-close { filter: none !important; }
  [data-theme="dark"] .text-muted,
  [data-theme="dark"] .text-success,
  [data-theme="dark"] .text-danger,
  [data-theme="dark"] .text-warning { color: #555 !important; }
  [data-theme="dark"] .page-header h1 i { color: #1565C0 !important; }
  [data-theme="dark"] .stat-value { color: black !important; }
  [data-theme="dark"] .stat-label { color: #555 !important; }

  /* Force all inline style elements to light mode in print */
  [data-theme="dark"] [style*="background:#"],
  [data-theme="dark"] [style*="background: #"] {
    background: white !important;
  }
  [data-theme="dark"] [style*="color:#"],
  [data-theme="dark"] [style*="color: #"] {
    color: black !important;
  }
  [data-theme="dark"] [style*="border-color:#"],
  [data-theme="dark"] [style*="border-color: #"],
  [data-theme="dark"] [style*="border-left-color:#"],
  [data-theme="dark"] [style*="border-left-color: #"],
  [data-theme="dark"] [style*="border-top-color:#"],
  [data-theme="dark"] [style*="border-top-color: #"] {
    border-color: #ccc !important;
  }
  /* Don't override gradients, they are for headers/logos */
  [data-theme="dark"] [style*="linear-gradient"] {
    background: white !important;
  }
}

/* ===== OPERATOR MOBILE LAYOUT (unchanged structure) ===== */
.op-body {
  background: #F0F4F8;
  font-family: 'Segoe UI', system-ui, sans-serif;
  padding-bottom: 80px;
}
.op-header {
  background: linear-gradient(135deg, #0D47A1, #1565C0);
  padding: 0.9rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.op-header-brand { display: flex; align-items: center; gap: 0.6rem; }
.op-brand-icon { font-size: 1.6rem; }
.op-brand-name { color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.2; }
.op-brand-sub { color: rgba(255,255,255,0.7); font-size: 0.7rem; }
.op-avatar {
  width: 36px; height: 36px;
  background: #F57C00;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 0.9rem;
}
.op-logout-btn {
  background: rgba(255,255,255,0.15);
  border: none; color: rgba(255,255,255,0.85);
  padding: 0.4rem 0.65rem; border-radius: 8px;
  font-size: 1rem; cursor: pointer;
  transition: background 0.15s;
}
.op-logout-btn:hover { background: rgba(255,255,255,0.25); color: #fff; }
.op-main { min-height: calc(100vh - 60px - 70px); }
.op-page { padding: 0.75rem; }
.op-greeting {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: var(--shadow-sm);
}
.op-greeting-text { color: var(--gray-600); font-size: 0.82rem; }
.op-greeting-name { color: var(--pase-primary-dark); font-weight: 700; font-size: 1.2rem; }
.op-greeting-date { color: var(--gray-400); font-size: 0.75rem; text-align: right; }
.op-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-500);
  padding: 0.5rem 0.25rem 0.4rem;
  margin-top: 0.25rem;
  display: flex; align-items: center; gap: 0.4rem;
}
.op-page-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 0.15rem;
  padding: 0.5rem 0;
  display: flex; align-items: center; gap: 0.5rem;
}
.op-sub-title { color: var(--gray-400); font-size: 0.82rem; margin-bottom: 1rem; }
.op-menu-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  margin-bottom: 0.65rem;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem;
  border-left: 4px solid #1565C0;
  transition: all var(--transition-fast);
}
.op-menu-card:hover { transform: translateX(3px); box-shadow: var(--shadow-md); }
.op-menu-card.servido { border-left-color: var(--gray-400); opacity: 0.75; }
.op-menu-tipo { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; color: var(--gray-500); letter-spacing: 0.05em; }
.op-menu-platillo { font-size: 1rem; font-weight: 600; color: var(--gray-900); }
.op-menu-alumnos { font-size: 0.78rem; color: var(--gray-500); margin-top: 2px; }
.op-menu-action { flex-shrink: 0; }
.op-btn-serve {
  background: #1565C0; color: #fff; border: none;
  padding: 0.55rem 0.9rem; border-radius: var(--radius-md);
  font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s;
  white-space: nowrap;
}
.op-btn-serve:hover { background: #0D47A1; }
.op-btn-serve-sm {
  background: #1565C0; color: #fff; border: none;
  padding: 0.35rem 0.7rem; border-radius: var(--radius-md);
  font-size: 0.75rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  transition: background 0.15s; white-space: nowrap;
  line-height: 1.2;
}
.op-btn-serve-sm:hover { background: #0D47A1; }
.op-btn-serve-sm i { font-size: 0.95rem; line-height: 1; }
.op-badge-servido {
  background: var(--pase-primary-subtle); color: var(--pase-primary);
  padding: 0.4rem 0.7rem; border-radius: 20px;
  font-size: 0.78rem; font-weight: 600;
  display: flex; align-items: center; gap: 0.35rem;
}
.op-alert-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 0.85rem 1rem;
  margin-bottom: 0.65rem;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: flex-start; gap: 0.75rem;
  border-left: 4px solid var(--gray-400);
  transition: all var(--transition-fast);
}
.op-alert-card:hover { transform: translateX(3px); }
.op-alert-card.ALTA { border-left-color: #F44336; background: #FFFBFB; }
.op-alert-card.MEDIA { border-left-color: #FF9800; background: #FFFDF7; }
.op-alert-card.BAJA { border-left-color: #2196F3; }
.op-alert-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }
.op-alert-card.ALTA .op-alert-icon { color: #F44336; }
.op-alert-card.MEDIA .op-alert-icon { color: #FF9800; }
.op-alert-card.BAJA .op-alert-icon { color: #2196F3; }
.op-alert-body { flex-grow: 1; }
.op-alert-prioridad {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  padding: 0.15em 0.5em; border-radius: 4px; margin-bottom: 0.3rem;
  display: inline-block;
}
.op-alert-prioridad.ALTA { background: #FFEBEE; color: #C62828; }
.op-alert-prioridad.MEDIA { background: #FFF8E1; color: #E65100; }
.op-alert-prioridad.BAJA { background: #E3F2FD; color: #1565C0; }
.op-alert-msg { font-size: 0.9rem; color: var(--gray-700); line-height: 1.4; }
.op-alert-producto { font-size: 0.78rem; color: var(--gray-500); margin-top: 2px; font-weight: 500; }
.op-alert-fecha { font-size: 0.7rem; color: var(--gray-400); margin-top: 3px; }
.op-alert-read {
  background: var(--gray-100); border: none; color: var(--gray-400);
  padding: 0.4rem 0.6rem; border-radius: var(--radius-md);
  font-size: 0.85rem; cursor: pointer; flex-shrink: 0;
  transition: all 0.15s;
}
.op-alert-read:hover { background: var(--pase-primary-subtle); color: var(--pase-primary); }
.op-rec-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 0.9rem 1rem;
  margin-bottom: 0.65rem;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--pase-orange);
  display: flex; align-items: flex-start; gap: 0.75rem;
  transition: all var(--transition-fast);
}
.op-rec-card:hover { transform: translateX(3px); box-shadow: var(--shadow-md); }
.op-rec-icon { font-size: 1.4rem; flex-shrink: 0; }
.op-rec-platillo { font-size: 0.95rem; font-weight: 600; color: var(--gray-900); }
.op-rec-msg { font-size: 0.85rem; color: var(--gray-600); margin-top: 2px; line-height: 1.4; }
.op-rec-body { flex-grow: 1; }
.op-empty-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2.5rem 1rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
}
.op-see-all {
  display: block;
  text-align: center;
  color: var(--pase-primary);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem;
  text-decoration: none;
  margin-bottom: 0.5rem;
  transition: all var(--transition-fast);
}
.op-see-all:hover { color: var(--pase-primary-dark); }
.op-menu-list-item {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.5rem;
  box-shadow: var(--shadow-xs);
  display: flex; align-items: center; gap: 0.9rem;
  border-left: 3px solid #1565C0;
  transition: all var(--transition-fast);
}
.op-menu-list-item:hover { transform: translateX(3px); box-shadow: var(--shadow-sm); }
.op-menu-list-item.servido { border-left-color: var(--gray-300); opacity: 0.7; }
.op-menu-list-item.hoy { border-left-color: var(--pase-orange); background: #FFFDE7; }
.op-mli-fecha { text-align: center; flex-shrink: 0; width: 38px; }
.op-mli-dia { font-size: 0.65rem; color: var(--gray-400); text-transform: uppercase; font-weight: 600; }
.op-mli-num { font-size: 1.3rem; font-weight: 700; color: var(--gray-700); line-height: 1; }
.op-mli-num.hoy { color: var(--pase-orange); }
.op-mli-info { flex-grow: 1; }
.op-mli-tipo { font-size: 0.68rem; text-transform: uppercase; color: var(--gray-400); font-weight: 600; letter-spacing: 0.04em; }
.op-mli-platillo { font-size: 0.92rem; font-weight: 600; color: var(--gray-900); }
.op-mli-alumnos { font-size: 0.75rem; color: var(--gray-400); }
.op-mli-estado { flex-shrink: 0; }
.op-nav-btn {
  background: #fff; border: 1px solid var(--gray-300);
  width: 36px; height: 36px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-600); text-decoration: none; font-size: 1rem;
  transition: all 0.15s;
}
.op-nav-btn:hover { background: var(--gray-100); color: var(--pase-primary); }
.op-form-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.op-field { margin-bottom: 1.1rem; }
.op-label { display: block; font-size: 0.95rem; font-weight: 600; color: var(--gray-800); margin-bottom: 0.5rem; }
.op-input, .op-select {
  width: 100%; padding: 0.8rem 1rem;
  border: 2px solid var(--gray-300); border-radius: var(--radius-md);
  font-size: 1rem; color: var(--gray-800);
  transition: border-color 0.15s; appearance: auto;
  background: #fff;
}
.op-input:focus, .op-select:focus {
  border-color: var(--pase-primary); outline: none;
  box-shadow: 0 0 0 3px rgba(21,101,192,0.12);
}
.op-qty-row { display: flex; gap: 0.5rem; }
.op-qty-input { flex: 1; text-align: center; font-size: 1.3rem; font-weight: 700; }
.op-unit-sel { flex: 0 0 110px; }
.op-error { display: block; color: #C62828; font-size: 0.8rem; margin-top: 0.25rem; }
.op-btn-submit {
  width: 100%; padding: 1rem; margin-top: 0.5rem;
  background: var(--pase-primary); color: #fff; border: none;
  border-radius: var(--radius-lg); font-size: 1.05rem; font-weight: 700;
  cursor: pointer; transition: background 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.op-btn-submit:hover { background: var(--pase-primary-dark); }
.op-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--gray-200);
  display: flex;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  z-index: 200;
  height: 68px;
}
.op-nav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-decoration: none; color: var(--gray-400);
  font-size: 0.65rem; gap: 3px;
  transition: color 0.15s;
  padding: 0.5rem 0;
}
.op-nav-item i { font-size: 1.4rem; }
.op-nav-item.active { color: var(--pase-primary); }
.op-nav-item:hover { color: var(--pase-primary); }

/* ===== ACCESSIBILITY & FOCUS ===== */
:focus-visible {
  outline: 2px solid var(--pase-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.form-control:focus-visible,
.form-select:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--pase-primary);
  outline-offset: 1px;
}

/* skip-to-content link (hidden until focused) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  background: var(--pase-primary-dark);
  color: #fff;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
}

/* ===== CONTEXT MENU ===== */
.context-menu {
  position: fixed; z-index: 9999;
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 160px; padding: 0.35rem 0;
  visibility: hidden; opacity: 0; pointer-events: none;
  transform: scale(0.92); transform-origin: top left;
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}
.context-menu.visible {
  visibility: visible; opacity: 1; pointer-events: auto;
  transform: scale(1);
}
[data-theme="dark"] .context-menu {
  background: #1E1E1E; border-color: #444;
}
.context-menu-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; font-size: 0.85rem;
  color: var(--gray-800); cursor: pointer;
  transition: background 0.1s; border: none; width: 100%;
  background: none; text-align: left;
}
.context-menu-item:hover { background: var(--gray-50); }
[data-theme="dark"] .context-menu-item:hover { background: #2A2A2A; }
.context-menu-item.danger { color: #C62828; }
.context-menu-item.danger:hover { background: #FFEBEE; }
[data-theme="dark"] .context-menu-item.danger:hover { background: #3A1B1B; }

/* ===== FILTER DROPDOWN ===== */
.filter-select {
  border-radius: var(--radius-md);
  border: 1.5px solid var(--gray-300);
  padding: 0.45rem 0.75rem;
  font-size: 0.82rem;
  background: #fff;
  color: var(--gray-800);
  min-width: 140px;
}
[data-theme="dark"] .filter-select {
  background: #2A2A2A; color: #E0E0E0; border-color: #444;
}

/* ===== DASHBOARD REAL-TIME UPDATES ===== */
.dash-stat-value {
  transition: all 0.3s ease;
}
.dash-stat-value.updating {
  animation: dashPulse 0.6s ease;
}
@keyframes dashPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== RIPPLE EFFECT (buttons) ===== */
.ripple {
  position: relative;
  overflow: hidden;
}
.ripple::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  top: 50%;
  left: 50%;
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}
.ripple:active::after {
  animation: rippleAnim 0.6s ease-out;
}
@keyframes rippleAnim {
  0% { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(4); opacity: 0; }
}

/* ===== TOOLTIP TWEAKS ===== */
[data-tooltip] {
  position: relative;
}
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--gray-900);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  animation: fadeIn 0.15s ease;
  z-index: 999;
}

/* ===== SELECTION ===== */
::selection {
  background: rgba(21,101,192,0.2);
  color: var(--pase-primary-dark);
}

/* ===== SORTABLEJS ===== */
.sortable-ghost {
  opacity: 0.4;
  background: #E3F2FD !important;
  outline: 2px dashed #42A5F5;
  outline-offset: -2px;
}
.sortable-drag {
  opacity: 0.8;
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
[data-theme="dark"] .sortable-ghost {
  background: #0D1B3D !important;
  outline-color: #42A5F5;
}
[data-theme="dark"] .sortable-drag {
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

/* ===== DRAG & DROP ===== */
.cal-day-drop {
  transition: background 0.2s ease;
}
.cal-day-drop.drag-over {
  background: #E8F5E9 !important;
  outline: 2px dashed #4CAF50;
  outline-offset: -2px;
}
.draggable-platillo {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.draggable-platillo:active {
  cursor: grabbing;
}
.draggable-platillo[draggable="true"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
/* ===== PROGRESS / LOADING BAR ===== */
.loading-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--pase-primary-light), var(--pase-orange), var(--pase-primary-light));
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

[data-theme="dark"] .btn-sidebar-toggle {
  background: var(--bg-card) !important;
  border-color: var(--pase-primary) !important;
  color: var(--pase-primary) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
[data-theme="dark"] .btn-sidebar-toggle:hover {
  background: var(--pase-primary) !important;
  border-color: var(--pase-primary) !important;
  color: #fff !important;
}

/* Dark mode for inline-styled dashboard table header */
[data-theme="dark"] .pase-card-body .table thead tr th {
  background: var(--bg-table-header) !important;
  color: var(--text-muted) !important;
}

/* Dark mode for detail modal table (generated by showDetail with inline styles) */
[data-theme="dark"] #detailModalBody table tr th {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] #detailModalBody table tr td {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] #detailModalBody table {
  border-color: var(--border-color) !important;
}
[data-theme="dark"] #detailModalBody table tr th,
[data-theme="dark"] #detailModalBody table tr td {
  background: var(--bg-card) !important;
}

.real-clock-container {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
}
#realTimeClock {
  font-family: var(--font-mono);
  color: var(--gray-800);
}
[data-theme="dark"] .real-clock-container {
  background: var(--bg-input) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] #realTimeClock {
  color: var(--text-secondary) !important;
}

/* Dark mode for any inline-styled dashboard estado badges */
[data-theme="dark"] .pase-card-body .custom-badge {
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .pase-card-body .custom-badge[style*="background:#E8F5E9"] {
  background: #1B3A1B !important;
  color: #81C784 !important;
}
[data-theme="dark"] .pase-card-body .custom-badge[style*="background:#FFF8E1"] {
  background: #3D2E00 !important;
  color: #FFD54F !important;
}
[data-theme="dark"] .pase-card-body .custom-badge[style*="background:#E3F2FD"] {
  background: #0D1B3D !important;
  color: #90CAF9 !important;
}
[data-theme="dark"] .pase-card-body .custom-badge[style*="background:#F5F5F5"] {
  background: var(--gray-200) !important;
  color: var(--text-muted) !important;
}

/* Dark mode for alert-item inline styles in dashboard */
[data-theme="dark"] .pase-card-body .alert-item {
  background: var(--bg-card) !important;
}
[data-theme="dark"] .pase-card-body .alert-item[style*="background:#F5FFFE"] {
  background: #0D1D1D !important;
  border-left-color: #00BCD4 !important;
}
[data-theme="dark"] .pase-card-body .alert-item .text-muted {
  color: var(--text-muted) !important;
}

/* Dark mode for dashboard stat cards */
[data-theme="dark"] .pase-card-body .stat-card {
  background: var(--bg-card) !important;
}
[data-theme="dark"] .pase-card-body .stat-card .stat-icon[style*="background:#E0F7FA"] {
  background: #0D2D2D !important;
  color: #4DD0E1 !important;
}

/* ===== BADGE UTILITY CLASSES (replace inline styles) ===== */
.badge-green, .badge-success {
  background: #E8F5E9 !important;
  color: #2E7D32 !important;
}
.badge-category {
  background: #F1F8E9 !important;
  color: #33691E !important;
}
.badge-red, .badge-danger {
  background: #FFEBEE !important;
  color: #C62828 !important;
}
.badge-yellow, .badge-warning {
  background: #FFF8E1 !important;
  color: #E65100 !important;
}
.badge-blue, .badge-info {
  background: #E3F2FD !important;
  color: #1565C0 !important;
}
.badge-grey, .badge-neutral {
  background: #F5F5F5 !important;
  color: #757575 !important;
}
.badge-purple {
  background: #F3E5F5 !important;
  color: #6A1B9A !important;
}
.badge-cyan {
  background: #E0F7FA !important;
  color: #00838F !important;
}
.badge-orange {
  background: #FFF8E1 !important;
  color: #E65100 !important;
}
.badge-white {
  background: #fff !important;
  color: #333 !important;
}

[data-theme="dark"] .badge-green, [data-theme="dark"] .badge-success {
  background: #0D3B0D !important;
  color: #81C784 !important;
}
[data-theme="dark"] .badge-category {
  background: #0D3B0D !important;
  color: #81C784 !important;
}
[data-theme="dark"] .badge-red, [data-theme="dark"] .badge-danger {
  background: #3D0D0D !important;
  color: #EF5350 !important;
}
[data-theme="dark"] .badge-yellow, [data-theme="dark"] .badge-warning {
  background: #3D2E00 !important;
  color: #FFB74D !important;
}
[data-theme="dark"] .badge-blue, [data-theme="dark"] .badge-info {
  background: #0D1B3D !important;
  color: #90CAF9 !important;
}
[data-theme="dark"] .badge-grey, [data-theme="dark"] .badge-neutral {
  background: var(--bg-input) !important;
  color: var(--text-muted) !important;
}
[data-theme="dark"] .badge-purple {
  background: #2D0D3D !important;
  color: #CE93D8 !important;
}
[data-theme="dark"] .badge-cyan {
  background: #0D2D2D !important;
  color: #4DD0E1 !important;
}
[data-theme="dark"] .badge-orange {
  background: #3D2E00 !important;
  color: #FFB74D !important;
}
[data-theme="dark"] .badge-white {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

/* text color utilities */
.text-green, .text-success-dark { color: #2E7D32 !important; }
.text-red, .text-danger-dark { color: #C62828 !important; }
.text-orange-dark { color: #E65100 !important; }
.text-blue-dark { color: #1565C0 !important; }
[data-theme="dark"] .text-green, [data-theme="dark"] .text-success-dark { color: #81C784 !important; }
[data-theme="dark"] .text-red, [data-theme="dark"] .text-danger-dark { color: #EF5350 !important; }
[data-theme="dark"] .text-orange-dark { color: #FFB74D !important; }
[data-theme="dark"] .text-blue-dark { color: #90CAF9 !important; }

/* ===== COMPREHENSIVE DARK MODE OVERRIDES FOR ALL INLINE STYLES ===== */
/* These catch hardcoded colors in style="" attributes across ALL views */

/* ——— Badge backgrounds ——— */
[data-theme="dark"] [style*="background:#E8F5E9"],
[data-theme="dark"] [style*="background:#F1F8E9"],
[data-theme="dark"] [style*="background:#C8E6C9"] {
  background: #0D3B0D !important;
}
[data-theme="dark"] [style*="background:#FFEBEE"] {
  background: #3D0D0D !important;
}
[data-theme="dark"] [style*="background:#FFF8E1"] {
  background: #3D2E00 !important;
}
[data-theme="dark"] [style*="background:#E3F2FD"],
[data-theme="dark"] [style*="background:#E0F7FA"] {
  background: #0D1B3D !important;
}
[data-theme="dark"] [style*="background:#F5FFFE"] {
  background: #0D1D1D !important;
}
[data-theme="dark"] [style*="background:#F3E5F5"] {
  background: #2D0D3D !important;
}
[data-theme="dark"] [style*="background:#F5F5F5"],
[data-theme="dark"] [style*="background:#f5f5f5"],
[data-theme="dark"] [style*="background:#f8f9fa"],
[data-theme="dark"] [style*="background:#fafafa"],
[data-theme="dark"] [style*="background:#FAFAFA"] {
  background: var(--bg-input) !important;
}

/* ——— Badge text colors ——— */
[data-theme="dark"] [style*="color:#2E7D32"],
[data-theme="dark"] [style*="color:#33691E"] {
  color: #81C784 !important;
}
[data-theme="dark"] [style*="color:#C62828"] {
  color: #EF5350 !important;
}
[data-theme="dark"] [style*="color:#E65100"],
[data-theme="dark"] [style*="color:#F57C00"],
[data-theme="dark"] [style*="color:#FF9800"] {
  color: #FFB74D !important;
}
[data-theme="dark"] [style*="color:#1565C0"],
[data-theme="dark"] [style*="color:#0D47A1"],
[data-theme="dark"] [style*="color:#00838F"],
[data-theme="dark"] [style*="color:#00ACC1"],
[data-theme="dark"] [style*="color:#00BCD4"] {
  color: #90CAF9 !important;
}
[data-theme="dark"] [style*="color:#6A1B9A"] {
  color: #CE93D8 !important;
}
[data-theme="dark"] [style*="color:#4CAF50"] {
  color: #66BB6A !important;
}
[data-theme="dark"] [style*="color:#F44336"] {
  color: #EF5350 !important;
}

/* ——— Grey/muted text ——— */
[data-theme="dark"] [style*="color:#757575"],
[data-theme="dark"] [style*="color:#666"],
[data-theme="dark"] [style*="color:#555"],
[data-theme="dark"] [style*="color:#888"],
[data-theme="dark"] [style*="color:#999"],
[data-theme="dark"] [style*="color:#bbb"],
[data-theme="dark"] [style*="color:#ccc"],
[data-theme="dark"] [style*="color:#aaa"],
[data-theme="dark"] [style*="color:#ddd"],
[data-theme="dark"] [style*="color:#eee"],
[data-theme="dark"] [style*="color:#d0d0d0"] {
  color: var(--text-muted) !important;
}

/* ——— Element border colors ——— */
[data-theme="dark"] [style*="border-color:#4CAF50"],
[data-theme="dark"] [style*="border-color:#C8E6C9"],
[data-theme="dark"] [style*="border-color:#A5D6A7"] {
  border-color: #2E7D32 !important;
}
[data-theme="dark"] [style*="border-color:#F44336"],
[data-theme="dark"] [style*="border-color:#EF9A9A"] {
  border-color: #C62828 !important;
}
[data-theme="dark"] [style*="border-left-color:#4CAF50"] {
  border-left-color: #2E7D32 !important;
}
[data-theme="dark"] [style*="border-left-color:#F44336"] {
  border-left-color: #C62828 !important;
}
[data-theme="dark"] [style*="border-left-color:#FF9800"],
[data-theme="dark"] [style*="border-left-color:#F57C00"],
[data-theme="dark"] [style*="border-left-color:#00BCD4"] {
  border-left-color: #FFB74D !important;
}
[data-theme="dark"] [style*="border-left-color:#9E9E9E"] {
  border-left-color: var(--border-color) !important;
}

/* ——— Specific: weekend headers in calendar ——— */
[data-theme="dark"] [style*="background:#1B5E20"] {
  background: #2E7D32 !important;
}

/* ——— Specific: inline table header background in dashboard ——— */
[data-theme="dark"] [style*="background:#f8f9fa"][style*="position:sticky"] {
  background: var(--bg-table-header) !important;
}

/* ——— Cross-browser: force CSS variable fallback ——— */
[data-theme="dark"] body,
[data-theme="dark"] .main-wrapper,
[data-theme="dark"] .page-content,
[data-theme="dark"] .pase-card,
[data-theme="dark"] .pase-card-body,
[data-theme="dark"] .pase-card-header {
  background: var(--bg-body) !important;
  color: var(--text-primary);
}

/* ===== DARK MODE MISSING SELECTORS ===== */
[data-theme="dark"] .table-responsive {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled {
  background: var(--gray-200) !important;
  color: var(--text-muted) !important;
  opacity: 0.6;
}

[data-theme="dark"] .form-section-title {
  color: var(--text-muted) !important;
  border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .form-section-title i {
  color: var(--pase-primary) !important;
}

[data-theme="dark"] .text-danger small,
[data-theme="dark"] .validation-error {
  color: #EF5350 !important;
}

[data-theme="dark"] .btn-close {
  filter: invert(1) brightness(0.8);
}

[data-theme="dark"] .table-filters .search-input,
[data-theme="dark"] .table-filters .filter-select {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] ::selection {
  background: rgba(66,165,245,0.3);
  color: #fff;
}

[data-theme="dark"] .pase-table .cell-faded {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .pase-table .cell-strong {
  color: var(--text-primary) !important;
}

/* Force Bootstrap table CSS variables to respect dark mode */
[data-theme="dark"] .table {
  --bs-table-bg: transparent !important;
  --bs-table-color: var(--text-primary) !important;
  --bs-table-hover-bg: rgba(66,165,245,0.08) !important;
  --bs-table-striped-bg: rgba(255,255,255,0.02) !important;
  --bs-table-active-bg: rgba(66,165,245,0.12) !important;
  --bs-table-border-color: var(--border-color) !important;
}

[data-theme="dark"] .table > thead > tr > th {
  background: var(--bg-table-header) !important;
  color: var(--text-muted) !important;
  border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .table > tbody > tr > td {
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
  background: transparent !important;
}

[data-theme="dark"] .table > tbody > tr:hover > td {
  background: rgba(66,165,245,0.08) !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td {
  background: rgba(255,255,255,0.02) !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd):hover > td {
  background: rgba(66,165,245,0.1) !important;
}

[data-theme="dark"] .table-bordered {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .table-bordered th,
[data-theme="dark"] .table-bordered td {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .cal-day-drop.drag-over {
  background: #1B3A1B !important;
  outline-color: #4CAF50 !important;
}

[data-theme="dark"] [data-tooltip]:hover::after {
  background: var(--gray-700) !important;
  color: #fff !important;
}

[data-theme="dark"] .topbar {
  background: var(--bg-topbar) !important;
  backdrop-filter: none !important;
}

[data-theme="dark"] .badge-rol-ADMINISTRADOR {
  background: #2D1B4E !important;
  color: #B39DDB !important;
}
[data-theme="dark"] .badge-rol-DIRECTOR {
  background: #0D1B3D !important;
  color: #90CAF9 !important;
}
[data-theme="dark"] .badge-rol-ENCARGADO_COCINA {
  background: #0D3B0D !important;
  color: #81C784 !important;
}
[data-theme="dark"] .badge-rol-CONSULTA {
  background: var(--gray-200) !important;
  color: var(--text-muted) !important;
}

[data-theme="dark"] .op-menu-card {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .op-menu-card.servido {
  opacity: 0.6;
}
[data-theme="dark"] .op-menu-platillo {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .op-menu-tipo {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .op-menu-alumnos {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .op-greeting {
  background: var(--bg-card) !important;
}
[data-theme="dark"] .op-greeting-text {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .op-greeting-name {
  color: var(--pase-primary) !important;
}
[data-theme="dark"] .op-greeting-date {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .op-form-card {
  background: var(--bg-card) !important;
}
[data-theme="dark"] .op-label {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .op-btn-submit {
  background: var(--pase-primary-mid) !important;
}
[data-theme="dark"] .op-btn-submit:hover {
  background: var(--pase-primary-light) !important;
}
[data-theme="dark"] .op-btn-serve {
  background: var(--pase-primary-mid) !important;
}
[data-theme="dark"] .op-btn-serve:hover {
  background: var(--pase-primary-light) !important;
}
[data-theme="dark"] .op-btn-serve-sm {
  background: var(--pase-primary-mid) !important;
}
[data-theme="dark"] .op-btn-serve-sm:hover {
  background: var(--pase-primary-light) !important;
}
[data-theme="dark"] .op-badge-servido {
  background: #0D3B0D !important;
  color: #81C784 !important;
}
[data-theme="dark"] .op-empty-card {
  background: var(--bg-card) !important;
  color: var(--text-muted) !important;
}
[data-theme="dark"] .op-page-title {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .op-sub-title {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .op-see-all {
  color: var(--pase-primary) !important;
}
[data-theme="dark"] .op-see-all:hover {
  color: var(--pase-primary-light) !important;
}
[data-theme="dark"] .op-alert-card {
  background: var(--bg-card) !important;
}
[data-theme="dark"] .op-alert-card.ALTA {
  background: #2D0D0D !important;
  border-left-color: #F44336 !important;
}
[data-theme="dark"] .op-alert-card.MEDIA {
  background: #2D1D00 !important;
  border-left-color: #FF9800 !important;
}
[data-theme="dark"] .op-alert-card.BAJA {
  background: #0D1D2D !important;
  border-left-color: #2196F3 !important;
}
[data-theme="dark"] .op-alert-msg {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .op-alert-producto {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .op-alert-fecha {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .op-alert-read {
  background: var(--bg-input) !important;
  color: var(--text-muted) !important;
}
[data-theme="dark"] .op-alert-read:hover {
  background: rgba(66,165,245,0.2) !important;
  color: var(--pase-primary) !important;
}
[data-theme="dark"] .op-alert-prioridad.ALTA {
  background: #3D0D0D !important;
  color: #EF5350 !important;
}
[data-theme="dark"] .op-alert-prioridad.MEDIA {
  background: #3D2E00 !important;
  color: #FFB74D !important;
}
[data-theme="dark"] .op-alert-prioridad.BAJA {
  background: #0D1B3D !important;
  color: #90CAF9 !important;
}
[data-theme="dark"] .op-rec-card {
  background: var(--bg-card) !important;
}
[data-theme="dark"] .op-rec-platillo {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .op-rec-msg {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .op-menu-list-item {
  background: var(--bg-card) !important;
}
[data-theme="dark"] .op-menu-list-item.hoy {
  background: #3D2E00 !important;
}
[data-theme="dark"] .op-mli-platillo {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .op-mli-tipo {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .op-mli-alumnos {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .op-mli-num {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .op-mli-dia {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .op-nav-btn {
  background: var(--bg-input) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .op-nav-btn:hover {
  background: rgba(66,165,245,0.1) !important;
  color: var(--pase-primary) !important;
}
[data-theme="dark"] .op-nav-item {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .op-nav-item.active {
  color: var(--pase-primary) !important;
}
[data-theme="dark"] .op-nav-item:hover {
  color: var(--pase-primary) !important;
}
[data-theme="dark"] .op-input,
[data-theme="dark"] .op-select {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .op-input:focus,
[data-theme="dark"] .op-select:focus {
  border-color: var(--pase-primary) !important;
  box-shadow: 0 0 0 3px rgba(66,165,245,0.2) !important;
}
[data-theme="dark"] .op-error {
  color: #EF5350 !important;
}
[data-theme="dark"] .op-avatar {
  background: var(--pase-orange) !important;
  color: #fff !important;
}
[data-theme="dark"] .op-header-brand .op-brand-name {
  color: #fff !important;
}
[data-theme="dark"] .op-header-brand .op-brand-sub {
  color: rgba(255,255,255,0.7) !important;
}
[data-theme="dark"] .op-logout-btn {
  background: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.85) !important;
}
[data-theme="dark"] .op-logout-btn:hover {
  background: rgba(255,255,255,0.25) !important;
  color: #fff !important;
}
[data-theme="dark"] .op-header {
  background: linear-gradient(135deg, #0A3D91, #0D47A1) !important;
}

[data-theme="dark"] .btn-pase {
  background: #1565C0 !important;            /* azul más oscuro (no celeste claro) */
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
}
[data-theme="dark"] .btn-pase:hover {
  background: #0D47A1 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

[data-theme="dark"] .btn-outline-secondary {
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .modal-backdrop.show {
  opacity: 0.7 !important;
}

[data-theme="dark"] hr {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .accordion,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .accordion-header,
[data-theme="dark"] .accordion-button {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
  background: var(--bg-input) !important;
  color: var(--pase-primary) !important;
}

[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .nav-tabs .nav-link:hover {
  border-color: var(--border-color) !important;
  background: var(--bg-input) !important;
}
[data-theme="dark"] .nav-tabs .nav-link.active {
  color: var(--pase-primary) !important;
  background: var(--bg-card) !important;
  border-bottom-color: var(--bg-card) !important;
}
[data-theme="dark"] .nav-tabs {
  border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .tab-content {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .list-group-item {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .alert {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .progress {
  background: var(--gray-200) !important;
}

[data-theme="dark"] .input-group-text {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .card {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .page-link {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .page-item.active .page-link {
  background: var(--pase-primary) !important;
  border-color: var(--pase-primary) !important;
  color: #fff !important;
}

/* ===== RESPONSIVE BUTTON GROUP ===== */
.btn-group-responsive {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.btn-group-responsive .btn,
.btn-group-responsive .btn-pase,
.btn-group-responsive .btn-outline-secondary {
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .btn-group-responsive {
    flex-direction: column;
    width: 100%;
  }
  .btn-group-responsive .btn,
  .btn-group-responsive .btn-pase,
  .btn-group-responsive .btn-outline-secondary {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .btn-group-responsive {
    gap: 0.4rem;
  }
  .btn-group-responsive .btn,
  .btn-group-responsive .btn-pase,
  .btn-group-responsive .btn-outline-secondary {
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
  }
}

/* Toolbar action buttons */
.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
@media (max-width: 575.98px) {
  .toolbar-actions {
    width: 100%;
  }
  .toolbar-actions .btn,
  .toolbar-actions .btn-pase,
  .toolbar-actions a.btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
    font-size: 0.82rem;
    padding: 0.4rem 0.7rem;
  }
  .toolbar-actions .btn i,
  .toolbar-actions .btn-pase i {
    font-size: 0.9rem;
  }
}

/* Page header actions */
.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
@media (max-width: 575.98px) {
  .page-header-actions {
    width: 100%;
  }
  .page-header-actions .btn,
  .page-header-actions .btn-pase {
    flex: 1;
    justify-content: center;
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }
}

/* ===== QUICK ACTION UNIFORM BUTTONS ===== */
.btn-action-uniform {
  min-width: 120px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-md);
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .btn-action-uniform {
    min-width: 0;
    flex: 1;
    font-size: 0.8rem;
    padding: 0.45rem 0.7rem;
  }
}

.notif-dot-alive {
  display: none;
}

/* ===== SIDEBAR MOBILE FIX ===== */
@media (max-width: 991.98px) {
  /* En móvil/tablet el sidebar SIEMPRE es overlay de ancho completo,
     NUNCA colapsado (aunque el body tenga la clase residual). */
  .sidebar,
  .sidebar.collapsed {
    transform: translateX(-100%);
    width: var(--sidebar-width) !important;
    box-shadow: none;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar.show,
  .sidebar.collapsed.show {
    transform: translateX(0) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.2);
  }
  /* El contenido principal NUNCA se desplaza por el sidebar en móvil */
  .main-wrapper,
  body.sidebar-collapsed .main-wrapper { margin-left: 0 !important; width: 100% !important; }
  /* Revertir TODO el aspecto "colapsado" (mostrar textos, iconos a la izquierda) */
  .sidebar.collapsed .nav-link span:not(.bi),
  .sidebar.collapsed .sidebar-section-label,
  .sidebar.collapsed .sidebar-user-name,
  .sidebar.collapsed .sidebar-user-role,
  .sidebar.collapsed .brand-name,
  .sidebar.collapsed .brand-sub,
  .sidebar.collapsed .btn-logout-label { display: block !important; }
  .sidebar.collapsed .nav-link { justify-content: flex-start !important; padding: 0.6rem 0.85rem !important; }
  .sidebar.collapsed .sidebar-brand { flex-direction: row !important; }
  .sidebar.collapsed .sidebar-user { flex-direction: row !important; }
  .sidebar.collapsed .sidebar-section-label,
  .sidebar.collapsed .sidebar-user-name,
  .sidebar.collapsed .sidebar-user-role,
  .sidebar.collapsed .sidebar-user-status,
  .sidebar.collapsed .brand-sub,
  .sidebar.collapsed .btn-logout-label,
  .sidebar.collapsed .nav-link span:not(.bi) {
    display: block !important;
  }
  .sidebar.collapsed .nav-link {
    justify-content: flex-start;
    padding: 0.6rem 0.85rem;
  }
  .sidebar.collapsed .sidebar-user {
    flex-direction: row;
  }
  .sidebar.collapsed .btn-logout {
    width: 34px;
  }
  .sidebar-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 2rem;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex-shrink: 0;
  }
}

/* ===== PERFORMANCE ===== */
.content-visibility-auto {
  content-visibility: auto;
  contain-intrinsic-size: 200px;
}
@media (prefers-reduced-motion: no-preference) {
  .will-change-opacity {
    will-change: opacity, transform;
  }
}
/* Apply content-visibility explicitly via class, not globally */

/* ===== GLOBAL RESPONSIVE OVERFLOW FIXES ===== */
html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}
body {
  position: relative;
}
* {
  max-width: 100%;
  box-sizing: border-box;
}
img, table, video, iframe {
  max-width: 100%;
  height: auto;
}
.table-responsive {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  max-width: 100%;
}
.table-responsive table {
  min-width: 500px; /* ensures columns don't get too cramped before scroll kicks in */
}
@media (max-width: 575.98px) {
  .table-responsive table {
    min-width: 460px;
  }
  .modal-dialog {
    margin: 0.5rem;
  }
  .modal-content {
    border-radius: var(--radius-lg) !important;
  }
  .row.g-3 > [class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .container, .container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
@media (max-width: 991.98px) {
  /* Fix page-content horizontal scroll on tablet */
  .page-content {
    overflow-x: hidden;
    max-width: 100vw;
  }
  .main-wrapper {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* ===== RESPONSIVE MOBILE-FIRST IMPROVEMENTS ===== */

/* Small phones (<360px) */
@media (max-width: 359.98px) {
  .page-content { padding: 0.5rem !important; }
  .page-header h1 { font-size: 1rem !important; }
  .page-header h1 i { font-size: 1.1rem !important; }
  .pase-card-body { padding: 0.75rem !important; }
  .pase-card-header { padding: 0.65rem 0.75rem !important; }
  .pase-table th { font-size: 0.6rem !important; padding: 0.4rem 0.4rem !important; }
  .pase-table td { font-size: 0.72rem !important; padding: 0.35rem 0.4rem !important; }
  .search-input { min-width: 100px !important; font-size: 0.8rem !important; }
  .stat-value { font-size: 1.1rem !important; }
  .stat-card { padding: 0.65rem 0.75rem !important; gap: 0.6rem !important; }
  .stat-icon { width: 32px !important; height: 32px !important; font-size: 0.9rem !important; }
  .topbar { padding: 0 0.5rem !important; }
  .topbar-controls { gap: 0.25rem !important; }
  .topbar-notif-btn, .topbar-theme-btn { width: 34px !important; height: 34px !important; font-size: 1rem !important; }
  .topbar-logout-btn { height: 34px !important; padding: 0 0.5rem !important; font-size: 0.75rem !important; }
  .topbar-logout-btn span { display: none !important; }
  .btn-pase { padding: 0.4rem 0.8rem !important; font-size: 0.8rem !important; }
  .btn-sm { font-size: 0.72rem !important; padding: 0.25rem 0.5rem !important; }
  .pase-card-header h6 { font-size: 0.78rem !important; }
  .table-filters { gap: 0.35rem !important; }
  .filter-select { min-width: 100px !important; font-size: 0.75rem !important; padding: 0.35rem 0.5rem !important; }
}

/* Phones (360px-575px) */
@media (min-width: 360px) and (max-width: 575.98px) {
  .page-content { padding: 0.65rem !important; }
  .page-header h1 { font-size: 1.1rem !important; }
  .pase-card-body { padding: 0.85rem !important; }
  .pase-card-header { padding: 0.7rem 0.85rem !important; }
  .pase-table th { font-size: 0.65rem !important; padding: 0.45rem 0.5rem !important; }
  .pase-table td { font-size: 0.78rem !important; padding: 0.4rem 0.5rem !important; }
  .search-input { min-width: 120px !important; }
  .stat-value { font-size: 1.2rem !important; }
  .stat-card { padding: 0.75rem 0.85rem !important; }
  .stat-icon { width: 36px !important; height: 36px !important; font-size: 1rem !important; }
  .topbar { padding: 0 0.75rem !important; }
  .topbar-logout-btn span { display: none !important; }
  .btn-pase { padding: 0.45rem 1rem !important; font-size: 0.82rem !important; }
  .table-filters { gap: 0.4rem !important; }
  .filter-select { min-width: 110px !important; }
}

/* Tablets (576px-991px) */
@media (min-width: 576px) and (max-width: 991.98px) {
  .page-content { padding: 1rem !important; }
  .pase-card-body { padding: 1rem !important; }
  .search-input { min-width: 160px !important; }
  .stat-value { font-size: 1.4rem !important; }
}

/* Horizontal scroll for tables on mobile */
@media (max-width: 767.98px) {
  .table-responsive {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--gray-100) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -2px;
  }
  .pase-table {
    min-width: 100%;
  }
  .pase-table th,
  .pase-table td {
    white-space: nowrap !important;
  }
  .table-cell-truncate {
    max-width: 80px !important;
  }
}

/* Touch-friendly targets on mobile */
@media (pointer: coarse) {
  .btn-adjust { width: 34px !important; height: 34px !important; font-size: 1.1rem !important; }
  .btn-sm { padding: 0.4rem 0.75rem !important; }
  .btn-menu-toggle { width: 44px !important; height: 44px !important; }
  .topbar-notif-btn, .topbar-theme-btn { width: 44px !important; height: 44px !important; }
  .topbar-logout-btn { height: 44px !important; }
  .sidebar .nav-link { padding: 0.7rem 0.85rem !important; }
  .filter-select, .search-input { min-height: 40px !important; }
}

/* Ensure sidebar overlay works with touch */
@media (max-width: 991.98px) {
  .sidebar-overlay.show {
    display: block !important;
  }
  body.sidebar-open {
    overflow: hidden !important;
  }
}

/* Safe area insets for notched phones */
@supports (padding-top: env(safe-area-inset-top)) {
  body { padding-top: env(safe-area-inset-top); }
  .topbar { padding-top: env(safe-area-inset-top); }
  .op-bottom-nav { padding-bottom: env(safe-area-inset-bottom); height: calc(68px + env(safe-area-inset-bottom)) !important; }
  .op-body { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
}

/* Fix for iOS Safari 100vh bug */
@supports (-webkit-touch-callout: none) {
  .sidebar { height: -webkit-fill-available; }
}

/* Modal responsive on mobile */
@media (max-width: 575.98px) {
  .modal-dialog { margin: 0.5rem !important; }
  .modal-content { border-radius: var(--radius-md) !important; }
  .modal-body { padding: 1rem !important; }
  .modal-header { padding: 0.75rem 1rem !important; }
  .modal-footer { padding: 0.75rem 1rem !important; }
  .modal-title { font-size: 1rem !important; }
  /* Forms within modals: stack columns vertically on mobile */
  .modal-body .row.g-3 > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; }
  .modal-body .form-label { font-size: 0.85rem; margin-bottom: 0.2rem; }
  .modal-body .form-control,
  .modal-body .form-select { font-size: 0.85rem; padding: 0.35rem 0.5rem; }
}

/* Detail modal table responsive */
#detailModal .modal-body {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#detailModal .table th,
#detailModal .table td {
  white-space: nowrap;
  font-size: 0.82rem;
  padding: 0.4rem 0.6rem !important;
}

.detail-table .detail-label {
  width: 35% !important;
  background: var(--gray-50);
  padding: 0.5rem 0.75rem !important;
  font-size: 0.82rem !important;
  font-weight: 600;
}
.detail-table .detail-value {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.82rem !important;
}
[data-theme="dark"] .detail-table .detail-label {
  background: var(--bg-input) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .detail-table .detail-value {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  background: var(--bg-card) !important;
}
[data-theme="dark"] .detail-table {
  border-color: var(--border-color) !important;
}

/* Clock in header responsive */
.topbar .real-clock {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-600);
  white-space: nowrap;
  background: var(--gray-50);
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
[data-theme="dark"] .topbar .real-clock {
  background: var(--bg-input) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}

@media (max-width: 575.98px) {
  .topbar .real-clock { font-size: 0.72rem !important; padding: 0.2rem 0.4rem !important; }
}

/* ===== RESPONSIVE FIXES FOR OPERATOR VIEWS ===== */

/* Fix menu list items on small screens - prevent overflow */
@media (max-width: 480px) {
  .op-menu-list-item {
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.6rem 0.65rem;
  }
  .op-menu-list-item .op-mli-fecha {
    width: 28px !important;
  }
  .op-menu-list-item .op-mli-fecha .op-mli-tipo {
    font-size: 0.5rem !important;
  }
  .op-menu-list-item .op-mli-platillo {
    font-size: 0.82rem !important;
  }
  .op-menu-list-item .op-mli-alumnos {
    font-size: 0.68rem !important;
  }
  .op-menu-list-item .op-mli-info {
    min-width: 0;
    overflow: hidden;
  }
  .op-menu-list-item .op-mli-platillo,
  .op-menu-list-item .op-mli-alumnos {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Icon buttons stay fixed */
  .op-menu-list-item .op-mli-estado {
    flex-shrink: 0;
    flex-direction: row !important;
  }
  .op-menu-list-item .btn-group .btn {
    padding: 0.2rem 0.35rem !important;
  }
  .op-menu-list-item .btn-group .btn i {
    font-size: 0.8rem !important;
  }
  /* Serve button compact */
  .op-menu-list-item .op-btn-serve-sm {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.65rem !important;
    gap: 2px !important;
  }
  .op-menu-list-item .op-btn-serve-sm i {
    font-size: 0.75rem !important;
  }
  /* Badge compact */
  .op-menu-list-item .op-badge-servido {
    font-size: 0.55rem !important;
    padding: 0.15rem 0.35rem !important;
  }
}

/* Fix product cards on very small screens */
@media (max-width: 380px) {
  .op-producto-card > div > .d-flex {
    flex-direction: column !important;
  }
  .op-producto-card .d-flex .flex-shrink-0 {
    flex-direction: row !important;
    margin-left: 0 !important;
    margin-top: 0.5rem;
    width: 100%;
    justify-content: flex-end;
  }
}

/* Ensure icon buttons in product cards stay centered */
.op-producto-card .btn.rounded-circle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}
.op-producto-card .btn.rounded-circle i {
  line-height: 1;
}

/* Fix day cards - prevent overflow from long text */
.op-day-card {
  min-width: 0;
}
.op-day-card .op-day-body {
  min-width: 0;
}

/* Fix drag handle alignment */
.drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.drag-handle i {
  line-height: 1;
}

/* Ensure all operator icon buttons keep icons centered */
.op-mli-estado .btn,
.op-mli-estado .op-btn-serve-sm {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.op-mli-estado .btn i,
.op-mli-estado .op-btn-serve-sm i {
  line-height: 1;
}

/* Fix bottom nav items - prevent text overflow */
.op-nav-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ===== UI ENHANCEMENTS ===== */

/* Smooth transitions for all interactive elements */
.btn, .nav-link, .custom-badge, .pase-card, .stat-card, .rec-card,
.op-menu-card, .op-alert-card, .op-rec-card, .op-menu-list-item {
  transition: all var(--transition-base) !important;
}

/* Card hover elevation */
.pase-card:hover, .stat-card:hover {
  box-shadow: var(--shadow-md) !important;
}

/* Consistent focus styles */
.form-control:focus, .form-select:focus, .filter-select:focus, .search-input:focus, .op-input:focus {
  border-color: var(--pase-primary) !important;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.15) !important;
  outline: none !important;
}

/* Modern button styles */
.btn-pase {
  position: relative;
  overflow: hidden;
}

.btn-pase::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.btn-pase:active::after {
  width: 300px;
  height: 300px;
}

/* Table row hover enhancement */
.pase-table tbody tr {
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.pase-table tbody tr:hover {
  background-color: var(--pase-primary-subtle) !important;
}

[data-theme="dark"] .pase-table tbody tr:hover {
  background-color: rgba(66, 165, 245, 0.08) !important;
}

/* Row modified indicator */
.row-modified {
  background-color: rgba(255, 152, 0, 0.1) !important;
  border-left: 3px solid #FF9800;
}

[data-theme="dark"] .row-modified {
  background-color: rgba(255, 152, 0, 0.15) !important;
}

/* Animated stat cards */
.stat-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

/* Progress bar animations */
.progress-bar {
  transition: width 0.5s ease;
}

/* Alert item animations */
/* Badge pulse for alerts */
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

#alertBadge.updating {
  animation: badgePulse 0.3s ease;
}

/* Empty state */
.empty-state {
  padding: 3rem 1rem;
  text-align: center;
}

.empty-state i {
  font-size: 3rem;
  color: var(--gray-400);
  display: block;
  margin-bottom: 0.75rem;
}

.empty-state p {
  font-size: 1rem;
  color: var(--gray-500);
  margin: 0;
}

/* Detail table improvements */
.detail-table th.detail-label {
  width: 180px;
  background: var(--gray-50);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

[data-theme="dark"] .detail-table th.detail-label {
  background: var(--gray-100);
  color: var(--text-secondary);
}

[data-theme="dark"] .detail-table td.detail-value {
  color: var(--text-primary);
}

/* Modal backdrop animation */
.modal-backdrop.show {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

/* Modal content entrance */
.modal.fade .modal-dialog {
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.modal.fade.show .modal-dialog {
  transform: none;
}

/* Floating save bar enhancement */
.floating-save-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(135deg, var(--pase-primary), var(--pase-primary-dark));
  color: white;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .floating-save-bar {
  background: linear-gradient(135deg, #1a237e, #0d47a1);
}

/* Page header consistency */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.page-header h1 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
  color: var(--gray-900);
}

/* Badge consistency */
.custom-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.3em 0.7em;
  border-radius: 20px;
  white-space: nowrap;
}

/* Badge status colors */
.badge-green {
  background: #E8F5E9;
  color: #2E7D32;
}

[data-theme="dark"] .badge-green {
  background: #1B3D1B;
  color: #81C784;
}

/* Total count badge (Inventory Lots) */
.total-badge {
  background: #e8eaf6;
  color: #283593;
}

[data-theme="dark"] .total-badge {
  background: #1A1A3E;
  color: #9FA8DA;
}

/* Toast notification enhancement */
#inventoryToast, #lotToast {
  animation: toastSlideUp 0.3s ease;
}

@keyframes toastSlideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Profile photo hover effect */
#profilePhotoWrapper:hover #photoHoverOverlay {
  display: flex !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

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

::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--gray-500);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--gray-600);
}

/* Operator card enhancements */
.op-stat-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.op-stat-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md) !important;
}

/* Operator list item hover */
.op-menu-list-item {
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.op-menu-list-item:active {
  transform: scale(0.98);
}

/* Calendar day cell enhancements */
.menu-calendar td {
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 100px;
  vertical-align: top;
  padding: 0.35rem;
  border: 1px solid var(--gray-200);
}

[data-theme="dark"] .menu-calendar td {
  border-color: var(--border-color);
}

/* Filter inputs consistent styling */
.filter-select, .search-input {
  padding: 0.45rem 0.75rem;
  font-size: 0.85rem;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--gray-800);
  min-width: 140px;
}

[data-theme="dark"] .filter-select,
[data-theme="dark"] .search-input {
  background: var(--bg-input);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* Sidebar user section hover */
.sidebar-user {
  transition: background-color 0.2s ease;
}

.sidebar-user:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Topbar control buttons */
.topbar-theme-btn, .topbar-notif-btn, .topbar-logout-btn {
  transition: all 0.2s ease !important;
}

/* Success/Error message animations */
.msg-success, .msg-error, .msg-info {
  animation: msgSlideDown 0.3s ease;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

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

/* Stats updating animation */
.updating {
  animation: statPulse 0.4s ease;
}

@keyframes statPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); color: var(--pase-primary); }
  100% { transform: scale(1); }
}

/* Sidebar collapsed state animations */
.sidebar.collapsed .sidebar-section-label,
.sidebar.collapsed .nav-link span,
.sidebar.collapsed .brand-name,
.sidebar.collapsed .brand-sub,
.sidebar.collapsed .sidebar-user-role,
.sidebar.collapsed .sidebar-user-name,
.sidebar.collapsed .sidebar-user-status {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sidebar:not(.collapsed) .sidebar-section-label,
.sidebar:not(.collapsed) .nav-link span,
.sidebar:not(.collapsed) .brand-name,
.sidebar:not(.collapsed) .brand-sub,
.sidebar:not(.collapsed) .sidebar-user-role,
.sidebar:not(.collapsed) .sidebar-user-name,
.sidebar:not(.collapsed) .sidebar-user-status {
  opacity: 1;
  transition: opacity 0.3s ease 0.05s;
}

/* ============================================================
   COMPREHENSIVE RESPONSIVE OVERHAUL
   Mobile-first adaptive design for all breakpoints
   ============================================================ */

/* ——— 1. ROOT FONT SCALING ——— */
html { font-size: 16px; }
@media (max-width: 575.98px) { html { font-size: 15px; } }
@media (max-width: 399.98px) { html { font-size: 14px; } }

/* ——— 2. DASHBOARD STAT CARDS ——— */
/* 4 cards: 2x2 on mobile, 4x1 on tablet+, never 4 crammed */
.dashboard-stats .row > [class*="col-"] {
  margin-bottom: 0.75rem;
}
@media (max-width: 399.98px) {
  .dashboard-stats .stat-card { flex-direction: row; gap: 0.65rem; padding: 0.7rem 0.75rem; }
  .dashboard-stats .stat-icon { width: 34px; height: 34px; font-size: 0.95rem; }
  .dashboard-stats .stat-value { font-size: 1.2rem; }
  .dashboard-stats .stat-label { font-size: 0.7rem; }
}
@media (min-width: 400px) and (max-width: 575.98px) {
  .dashboard-stats .stat-card { gap: 0.85rem; }
  .dashboard-stats .stat-icon { width: 40px; height: 40px; font-size: 1.1rem; }
  .dashboard-stats .stat-value { font-size: 1.4rem; }
}

/* ——— 3. MODALS: FULL SCREEN ON TINY DEVICES ——— */
@media (max-width: 399.98px) {
  .modal-dialog { margin: 0 !important; min-height: 100vh; }
  .modal-dialog .modal-content { border-radius: 0 !important; min-height: 100vh; }
  .modal-dialog .modal-header { padding: 0.85rem 1rem !important; }
  .modal-dialog .modal-body { padding: 1rem !important; }
  .modal-dialog .modal-footer { padding: 0.85rem 1rem !important; }
  .modal-dialog.modal-sm { max-width: 100%; }
  .modal-dialog .btn-close { font-size: 1.2rem; }
}
@media (min-width: 400px) and (max-width: 575.98px) {
  .modal-dialog { margin: 0.75rem !important; }
  .modal-dialog .modal-content { border-radius: 12px !important; }
}

/* ——— 4. ADMIN CALENDAR (Menu/Index) ——— */
@media (max-width: 767.98px) {
  /* Calendar on mobile: same table as desktop, just smaller */
  .menu-calendar { display: table; }
  #calendarView .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #calendarView .table-responsive table { min-width: 0; }
  .menu-calendar thead { display: table-header-group; }
  .menu-calendar tr { display: table-row; border: none; margin-bottom: 0; border-radius: 0; background: transparent; }
  .menu-calendar td { display: table-cell; width: auto !important; }
  .cal-day-num { font-size: 0.65rem; display: inline; }
  .cal-day-num::after { display: none; }
  .cal-item { font-size: 0.55rem; padding: 1px 4px; }
  .mobile-calendar-toggle { display: none !important; }
}
@media (min-width: 768px) {
  .mobile-calendar-toggle { display: none !important; }
}

/* ——— 5. OPERATOR PRODUCT CARDS (mid-range gap) ——— */
@media (min-width: 381px) and (max-width: 575.98px) {
  .op-producto-card .d-flex { flex-direction: row !important; }
  .op-producto-card .d-flex .flex-shrink-0 {
    flex-direction: column !important; margin-left: 0.75rem !important; margin-top: 0 !important;
  }
}

/* ——— 6. OPERATOR MENU ITEMS ADAPTIVE ——— */
@media (max-width: 399.98px) {
  .op-menu-list-item { flex-wrap: wrap; padding: 0.45rem 0.5rem; gap: 0.3rem; }
  .op-menu-list-item > div:first-child { display: none; }
  .op-menu-list-item .op-mli-fecha { width: auto !important; flex: 0 0 auto; }
  .op-menu-list-item .op-mli-tipo { font-size: 0.48rem !important; white-space: nowrap; }
  .op-menu-list-item .op-mli-info { flex: 1 1 100%; order: 1; min-width: 0; }
  .op-menu-list-item .op-mli-platillo { font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .op-menu-list-item .op-mli-alumnos { font-size: 0.65rem; }
  .op-menu-list-item .op-mli-estado { flex: 1 1 100%; order: 2; justify-content: flex-start !important; padding-top: 0.2rem; border-top: 1px solid var(--gray-100); gap: 0.3rem !important; }
  .op-menu-list-item .btn-group .btn { padding: 0.15rem 0.3rem !important; min-width: 28px; min-height: 28px; }
  .op-menu-list-item .btn-group .btn i { font-size: 0.75rem; }
  .op-menu-list-item .op-btn-serve-sm { font-size: 0.6rem !important; padding: 0.15rem 0.4rem !important; min-height: 28px; }
  .op-menu-list-item .op-btn-serve-sm i { font-size: 0.7rem; }
  .op-menu-list-item .op-badge-servido { font-size: 0.55rem !important; padding: 0.1rem 0.3rem !important; }
  .op-menu-list-item .op-badge-servido i { font-size: 0.7rem; }
}
@media (min-width: 400px) and (max-width: 575.98px) {
  .op-menu-list-item { gap: 0.5rem; padding: 0.55rem 0.7rem; }
  .op-menu-list-item .op-mli-fecha { width: 32px !important; }
  .op-menu-list-item .op-mli-tipo { font-size: 0.52rem !important; }
  .op-menu-list-item .op-mli-platillo { font-size: 0.85rem; }
}

/* ——— 7. OPERATOR DAY CARDS ——— */
@media (max-width: 575.98px) {
  .op-day-card { margin-bottom: 0.5rem; }
  .op-day-header { padding: 0.5rem 0.65rem !important; }
  .op-day-header strong { font-size: 0.85rem; }
  .op-day-body .p-2.text-center { padding: 0.35rem !important; }
  .op-day-body .add-menu-btn { font-size: 0.72rem !important; padding: 0.3rem 0.5rem !important; }
  .op-day-body .empty-day-msg { padding: 0.5rem !important; font-size: 0.78rem !important; }
}

/* ——— 8. GENERIC RESPONSIVE TABLES ——— */
@media (max-width: 767.98px) {
  .table-responsive { margin: 0; border-radius: 8px; }
  .pase-table th, .pase-table td {
    font-size: 0.78rem; padding: 0.45rem 0.55rem !important;
    white-space: nowrap;
  }
  .pase-table th.ps-3, .pase-table td.ps-3 { padding-left: 0.7rem !important; }
  .pase-table .btn-sm { font-size: 0.72rem; padding: 0.2rem 0.45rem; }
  .pase-table .rounded-circle.btn-sm { width: 28px; height: 28px; font-size: 0.65rem; }
}
/* Horizontal scroll shadow indicator */
.table-responsive {
  position: relative;
}
.table-responsive::after {
  content: '';
  position: absolute; right: 0; top: 0; bottom: 0; width: 24px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.04));
  pointer-events: none; opacity: 0; transition: opacity 0.3s;
}
.table-responsive.is-scrollable::after { opacity: 1; }
[data-theme="dark"] .table-responsive::after {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.15));
}

/* ——— 9. (REMOVED - handled by COMPREHENSIVE RESPONSIVE block below) ——— */

/* ——— 10. TOAST FULL WIDTH ON MOBILE ——— */
@media (max-width: 575.98px) {
  #productoToast, #inventoryToast, #lotToast,
  [id$="Toast"] {
    left: 1rem !important; right: 1rem !important;
    transform: none !important; width: auto !important;
    min-width: 0 !important; bottom: 80px !important;
  }
}

/* ——— 11. OPERATOR FORM RESPONSIVE ——— */
@media (max-width: 575.98px) {
  .op-form-card { padding: 0.85rem; }
  .op-form-card .row.g-3 > [class*="col-"] { margin-bottom: 0.35rem; }
  .op-label { font-size: 0.85rem; margin-bottom: 0.35rem; }
  .op-input, .op-select { font-size: 0.92rem; padding: 0.65rem 0.85rem; }
  .modal-dialog .op-form-card { padding: 0; box-shadow: none; }
}

/* ——— 12. OPERATOR HEADER RESPONSIVE ——— */
@media (max-width: 399.98px) {
  .op-header { padding: 0.6rem 0.65rem; }
  .op-header .op-brand-icon { font-size: 1.3rem; }
  .op-header .op-brand-name { font-size: 0.85rem; }
  .op-header .op-brand-sub { display: none; }
  .op-header .op-avatar { width: 30px; height: 30px; font-size: 0.75rem; }
  .op-header .op-logout-btn { padding: 0.3rem 0.5rem; font-size: 0.85rem; }
}

/* ——— 13. OPERATOR BOTTOM NAV ——— */
@media (max-width: 399.98px) {
  .op-bottom-nav { height: 60px; }
  .op-body { padding-bottom: 68px; }
  .op-nav-item { font-size: 0.55rem; gap: 2px; padding: 0.35rem 0; }
  .op-nav-item i { font-size: 1.2rem; }
  .op-nav-item span { font-size: 0.55rem; }
}
@media (min-width: 400px) and (max-width: 575.98px) {
  .op-bottom-nav { height: 64px; }
  .op-body { padding-bottom: 72px; }
  .op-nav-item { font-size: 0.6rem; }
  .op-nav-item i { font-size: 1.3rem; }
}
@media (min-width: 576px) {
  .op-bottom-nav { height: 68px; }
  .op-body { padding-bottom: 80px; }
}

/* ——— 14. OPERATOR HOME PAGE STAT CARDS ——— */
@media (max-width: 399.98px) {
  .op-page .row.g-3 > [class*="col-"] { width: 100%; }
  .op-menu-card { padding: 0.75rem; }
  .op-menu-card .op-menu-platillo { font-size: 0.85rem; }
  .op-menu-card .op-menu-tipo { font-size: 0.6rem; }
  .op-menu-card .op-btn-serve { font-size: 0.75rem; padding: 0.4rem 0.6rem; }
}

/* ——— 15. BADGES & CHIPS ADAPTIVE ——— */
@media (max-width: 575.98px) {
  .custom-badge { font-size: 0.7rem; padding: 0.2em 0.5em; }
  .d-flex.gap-2.flex-wrap .custom-badge { margin-bottom: 0.25rem; }
}

/* ——— 16. SEARCH INPUT FULL WIDTH ON MOBILE ——— */
@media (max-width: 575.98px) {
  .pase-card-header { flex-wrap: wrap; }
  .pase-card-header .search-input { width: 100%; min-width: 0; }
  .pase-card-header h6 { width: auto; }
}

/* ——— 17. CALENDAR DAY CARDS OPERATOR ——— */
@media (max-width: 399.98px) {
  .op-day-header .d-flex.gap-2 { gap: 0.35rem !important; }
  .op-day-header .badge { font-size: 0.55rem !important; padding: 0.15em 0.4em !important; }
}

/* ——— 18. RESPONSIVE SIDEBAR OVERLAY ——— */
@media (max-width: 991.98px) {
  .sidebar { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  .sidebar-overlay { transition: opacity 0.3s ease; }
}

/* ——— 19. BUTTON GROUPS IN TABLES ——— */
@media (max-width: 575.98px) {
  .pase-table td .btn-group { display: inline-flex; }
  .pase-table td .btn-group .btn { padding: 0.2rem 0.35rem; }
  .pase-table td .btn-sm.me-1 { margin-right: 0.2rem !important; }
}

/* ——— 20. CARD BODY PADDING ADAPTIVE ——— */
@media (max-width: 575.98px) {
  .pase-card-body { padding: 0.85rem; }
  .pase-card-body .row.g-3 > [class*="col-"] { margin-bottom: 0.3rem; }
}

/* ——— 21. EMPTY STATE ADAPTIVE ——— */
@media (max-width: 575.98px) {
  .empty-state { padding: 2rem 0.75rem; }
  .empty-state i { font-size: 2.2rem; }
  .empty-state p { font-size: 0.85rem; }
}

/* ——— 22. FORM ROW FIXES ON MOBILE ——— */
@media (max-width: 575.98px) {
  .form-row { flex-direction: column; gap: 0.5rem; }
  .form-row > * { flex: 1 1 auto; }
}

/* ——— 23. STOCK ADJUSTOR ON MOBILE ——— */
@media (max-width: 575.98px) {
  .stock-adjustor .stock-input { width: 56px; font-size: 0.82rem; }
  .stock-adjustor .btn-adjust { width: 30px; height: 30px; font-size: 0.85rem; }
}

/* ——— 24. RECOMMENDATION CARDS ADAPTIVE ——— */
@media (max-width: 575.98px) {
  .rec-card { padding: 0.75rem 0.85rem; }
  .rec-card .rec-platillo { font-size: 0.85rem; }
  .rec-card .rec-msg { font-size: 0.78rem; }
  #recPanel .d-flex.gap-2 { gap: 0.4rem; }
  #recPanel .rec-card.draggable-platillo { min-width: 120px; padding: 0.5rem 0.65rem; }
}

/* ——— 25. CONTEXT MENU ON MOBILE ——— */
@media (max-width: 575.98px) {
  .context-menu { min-width: 140px; }
  .context-menu-item { font-size: 0.8rem; padding: 0.5rem 0.75rem; }
}

/* ——— 26. SIDEBAR OPTIMIZATION FOR TABLET ——— */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .sidebar { width: 220px; }
  .main-wrapper { margin-left: 220px; }
  .sidebar .nav-link { font-size: 0.8rem; padding: 0.5rem 0.7rem; gap: 0.6rem; }
  .sidebar .nav-link i { font-size: 0.95rem; }
  .sidebar-brand { padding: 1rem 0.75rem 0.75rem; }
  .brand-icon { width: 52px; }
  .brand-name { font-size: 0.95rem; }
  .sidebar-user { padding: 0.5rem 0.6rem; gap: 0.5rem; }
  .sidebar-user-avatar { width: 36px; height: 36px; font-size: 0.85rem; }
  .sidebar-user-name { font-size: 0.8rem; }
  body.sidebar-collapsed .main-wrapper { margin-left: var(--sidebar-collapsed); }
}

/* ——— 27. PRINT RESPONSIVE ——— */
@media print and (max-width: 767.98px) {
  .menu-calendar { display: table !important; }
  .menu-calendar thead { display: table-header-group !important; }
  .menu-calendar tr, .menu-calendar td { display: table-cell !important; }
}

/* ——— 28. SCROLL INDICATOR FOR TABLES ON MOBILE ——— */
@media (hover: none) and (max-width: 767.98px) {
  .table-responsive {
    background:
      linear-gradient(90deg, #fff 30%, transparent),
      linear-gradient(90deg, transparent, #fff 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.1), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.1), transparent);
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  [data-theme="dark"] .table-responsive {
    background:
      linear-gradient(90deg, var(--bg-body) 30%, transparent),
      linear-gradient(90deg, transparent, var(--bg-body) 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(255,255,255,0.08), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(255,255,255,0.08), transparent);
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

/* ——— 30. DAY CARD HEADER COLLAPSE INDICATOR ——— */
.op-day-header { cursor: pointer; user-select: none; }
.op-day-header .toggle-icon { transition: transform 0.2s; }

/* ——— 31. ENSURE ALL IMAGES RESPONSIVE ——— */
img { max-width: 100%; height: auto; }

/* ——— 32. PREVENT OVERFLOW IN ALL CONTAINERS ——— */
.op-page, .page-content, .pase-card-body, .modal-body, .op-form-card,
.main-wrapper, .op-main { overflow-x: hidden; }

/* ——— 33. RESPONSIVE GAPS ——— */
@media (max-width: 399.98px) {
  .d-flex.gap-3 { gap: 0.5rem !important; }
  .d-flex.gap-2 { gap: 0.35rem !important; }
  .gap-1 { gap: 0.2rem !important; }
  .mt-3 { margin-top: 0.65rem !important; }
  .mb-3 { margin-bottom: 0.65rem !important; }
  .p-3 { padding: 0.65rem !important; }
  .pt-3 { padding-top: 0.5rem !important; }
}
@media (min-width: 400px) and (max-width: 575.98px) {
  .d-flex.gap-3 { gap: 0.65rem !important; }
  .mt-3 { margin-top: 0.85rem !important; }
  .mb-3 { margin-bottom: 0.85rem !important; }
}

/* ——— 34. RESPONSIVE FONT SIZES ——— */
@media (max-width: 399.98px) {
  h1, .h1 { font-size: 1.3rem !important; }
  h2, .h2 { font-size: 1.15rem !important; }
  h3, .h3 { font-size: 1.05rem !important; }
  h4, .h4 { font-size: 0.95rem !important; }
  h5, .h5 { font-size: 0.88rem !important; }
  h6, .h6 { font-size: 0.82rem !important; }
  .page-header h1 { font-size: 1.15rem !important; }
  .page-header h1 i { font-size: 1.2rem !important; }
  p, li, .form-label, .custom-badge { font-size: 0.85rem; }
  .text-muted { font-size: 0.78rem; }
}

/* ——— 35. RESPONSIVE ALERT CARD ——— */
@media (max-width: 575.98px) {
  .op-alert-card { padding: 0.65rem 0.75rem; gap: 0.5rem; }
  .op-alert-card .op-alert-icon { font-size: 1.1rem; }
  .op-alert-card .op-alert-msg { font-size: 0.82rem; }
  .op-alert-card .op-alert-producto { font-size: 0.72rem; }
  .op-alert-card .op-alert-fecha { font-size: 0.65rem; }
  .op-alert-card .op-alert-read { padding: 0.3rem 0.5rem; font-size: 0.78rem; }
}

/* ——— 36. RESPONSIVE LOT CARDS ——— */
@media (max-width: 575.98px) {
  .op-lot-card, .op-movement-card { padding: 0.75rem; }
  .op-lot-card .op-lot-numero, .op-movement-card .op-mov-producto { font-size: 0.88rem; }
}

/* ——— 37. EMPTY CARD RESPONSIVE ——— */
@media (max-width: 399.98px) {
  .op-empty-card { padding: 1.5rem 0.75rem !important; }
  .op-empty-card i { font-size: 2rem !important; }
  .op-empty-card p { font-size: 0.82rem !important; }
}

/* ——— 38. GREETING CARD RESPONSIVE ——— */
@media (max-width: 575.98px) {
  .op-greeting { padding: 0.75rem 0.85rem; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .op-greeting .op-greeting-date { text-align: left; width: 100%; }
  .op-greeting-name { font-size: 1rem; }
}

/* ——— 39. SCROLL INDICATOR FADE FOR TABLES ——— */
.table-responsive {
  background:
    linear-gradient(90deg, #fff 5%, transparent),
    linear-gradient(90deg, transparent, #fff 95%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.04), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.04), transparent);
  background-repeat: no-repeat;
  background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
  background-attachment: local, local, scroll, scroll;
}
[data-theme="dark"] .table-responsive {
  background:
    linear-gradient(90deg, var(--bg-body) 5%, transparent),
    linear-gradient(90deg, transparent, var(--bg-body) 95%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(255,255,255,0.04), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(255,255,255,0.04), transparent);
  background-repeat: no-repeat;
  background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* ——— 40. SECTION TITLE RESPONSIVE ——— */
@media (max-width: 575.98px) {
  .op-section-title { font-size: 0.7rem; padding: 0.35rem 0.15rem 0.25rem; }
}

/* ——— 41. RESPONSIVE DETAIL MODAL TABLE ——— */
@media (max-width: 575.98px) {
  .detail-table .detail-label { width: 40% !important; font-size: 0.75rem !important; padding: 0.35rem 0.5rem !important; }
  .detail-table .detail-value { font-size: 0.78rem !important; padding: 0.35rem 0.5rem !important; }
}

/* SortableJS drag-and-drop visual feedback */
.sortable-ghost {
  opacity: 0.4;
  background: var(--pase-primary-subtle, #E3F2FD) !important;
  box-shadow: 0 0 0 2px var(--pase-primary, #42A5F5) inset;
  border-radius: var(--radius-md);
}
.sortable-drag {
  opacity: 0.9;
  transform: rotate(2deg) scale(1.03);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  border-radius: var(--radius-md);
  background: var(--bg-card, #fff);
  z-index: 9999;
}
[data-theme="dark"] .sortable-ghost {
  background: rgba(66,165,245,0.15) !important;
  box-shadow: 0 0 0 2px #42A5F5 inset;
}
[data-theme="dark"] .sortable-drag {
  background: #2A2A2A;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* ——— 42. NOTCHED PHONE FIXES ——— */
@supports (padding: env(safe-area-inset-bottom)) {
  .op-body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .op-bottom-nav { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}

/* ========== GLOBAL RESPONSIVE FIXES ========== */

/* Minimum touch target size (Apple HIG 44pt) */
@media (pointer: coarse) {
  .btn-icon-only, .topbar-theme-btn, .topbar-notif-btn, .topbar-logout-btn,
  .btn-menu-toggle, .btn-sidebar-toggle, .op-nav-item,
  .sidebar .nav-link, .sidebar-user, .btn-close,
  [onclick*="showDetail"], [onclick*="abrirEditar"], [onclick*="eliminar"],
  .nav-link i, .dropdown-item {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Sidebar safe-area on mobile */
@media (max-width: 991.98px) {
  .sidebar {
    padding-top: var(--sat, 0px);
    z-index: 1045;
  }
  .sidebar-overlay {
    z-index: 1040;
  }
  .sidebar .sidebar-header {
    padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
  }
}

/* Topbar mobile controls spacing */
@media (max-width: 575.98px) {
  .topbar {
    padding: 0 0.6rem;
    gap: 0.4rem;
  }
  .topbar-controls {
    gap: 0.1rem;
  }
  .topbar-theme-btn, .topbar-notif-btn {
    width: 34px;
    height: 34px;
    font-size: 1rem;
  }
  .topbar-logout-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .topbar-logout-btn i {
    font-size: 0.95rem;
    margin: 0;
  }
  .topbar-logout-btn span {
    display: none;
  }
  .topbar-mobile-brand {
    font-size: 0.85rem;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
  }
}

/* Prevent horizontal overflow globally */
body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* ——— COMPREHENSIVE RESPONSIVE ——— */
/* Breakpoints: Mobile S (320-480), Mobile L (481-767), Tablet (768-1024), Desktop (1025+) */

/* ===== MOBILE S (320px - 480px) ===== */
@media (max-width: 479.98px) {
  /* Page header buttons: full width, stacked */
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .page-header .d-flex,
  .page-header .d-flex.gap-2 {
    width: 100%;
    flex-direction: column;
    gap: 0.4rem;
  }
  .page-header .d-flex .btn,
  .page-header .d-flex a.btn,
  .page-header .d-flex button,
  .page-header .d-flex form {
    width: 100%;
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
  .page-header .d-flex form button {
    width: 100%;
  }
  /* Menu Planning leyenda + toggle: stack vertically on mobile */
  .d-flex.flex-wrap.mb-3.align-items-center.gap-2 {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.5rem;
  }
  .d-flex.flex-wrap.mb-3.align-items-center.gap-2 #viewToggle {
    width: 100%;
  }
  .d-flex.flex-wrap.mb-3.align-items-center.gap-2 #viewToggle .btn {
    flex: 1;
    font-size: 0.7rem !important;
    padding: 0.35rem 0.5rem !important;
  }
  .d-flex.flex-wrap.mb-3.align-items-center.gap-2 .ms-auto {
    margin-left: 0 !important;
    width: 100%;
  }
  /* Sidebar on mobile overlay improvements */
  .sidebar-footer {
    padding: 0.5rem !important;
  }
  .sidebar-user {
    gap: 0.5rem;
    padding: 0.5rem;
  }
  .sidebar-user-avatar {
    width: 36px; height: 36px; font-size: 0.85rem;
  }
  /* Menus: dropdown full-width on mobile */
  .dropdown-menu {
    min-width: 160px;
  }
  /* Forms: full-width inputs, stacked columns */
  .row.g-3 > [class*="col-"] {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .form-control, .form-select {
    font-size: 0.85rem;
    padding: 0.45rem 0.65rem;
  }
  .form-label {
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
  }
  .modal-body .row.g-3 > [class*="col-"] {
    width: 100%; flex: 0 0 100%; max-width: 100%;
  }
  .modal-body .form-label { font-size: 0.8rem; margin-bottom: 0.2rem; }
  .modal-body .form-control,
  .modal-body .form-select { font-size: 0.8rem; padding: 0.35rem 0.5rem; }
  /* Table cells: ensure no overflow (texto largo se recorta con "...") */
  .pase-table td,
  .pase-table th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
  }
  /* EXCEPCIÓN: las celdas con botones (acciones/detalle) deben mostrar TODO su
     contenido, no recortarse a "..." */
  .pase-table td:has(button),
  .pase-table td:has(.btn),
  .pase-table td.text-center {
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    white-space: normal !important;
  }
  /* Toast: full-width */
  #productoToast, #inventoryToast, #lotToast, [id$="Toast"] {
    left: 0.5rem !important; right: 0.5rem !important;
    bottom: 70px !important;
  }
}

/* ===== MOBILE L (481px - 767px) ===== */
@media (min-width: 480px) and (max-width: 767.98px) {
  /* Page header: horizontal wrap, buttons get min-width */
  .page-header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }
  .page-header h1 {
    font-size: 1.2rem;
    width: 100%;
  }
  .page-header .d-flex,
  .page-header .d-flex.gap-2 {
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .page-header .d-flex .btn,
  .page-header .d-flex a.btn,
  .page-header .d-flex button {
    font-size: 0.8rem;
    padding: 0.35rem 0.7rem;
    white-space: nowrap;
  }
  .page-header .d-flex form button {
    font-size: 0.8rem;
    padding: 0.35rem 0.7rem;
  }
  /* Menu Planning leyenda + toggle inline */
  .page-header + .d-flex.flex-wrap {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .page-header + .d-flex.flex-wrap .ms-auto {
    margin-left: auto !important;
  }
  /* Forms: 2 columns on wider mobile */
  .row.g-3 > .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .form-control, .form-select {
    font-size: 0.88rem;
    padding: 0.5rem 0.7rem;
  }
}

/* ===== TABLET (768px - 1024px) ===== */
@media (min-width: 768px) and (max-width: 1024.98px) {
  /* Page header: normal, buttons compact */
  .page-header h1 {
    font-size: 1.25rem;
  }
  .page-header .btn,
  .page-header a.btn,
  .page-header button {
    font-size: 0.82rem;
    padding: 0.4rem 0.85rem;
  }
  /* Sidebar on tablet: normal width but nav items compact */
  .sidebar .nav-link {
    font-size: 0.8rem;
    padding: 0.5rem 0.7rem;
    gap: 0.6rem;
  }
  .sidebar .nav-link i {
    font-size: 0.95rem;
  }
  .sidebar-user {
    padding: 0.5rem 0.6rem;
    gap: 0.5rem;
  }
  .sidebar-user-avatar {
    width: 36px; height: 36px; font-size: 0.85rem;
  }
  .sidebar-user-name {
    font-size: 0.8rem;
  }
  .sidebar-footer {
    padding: 0.5rem 0.6rem;
  }
  /* Forms on tablet: normal spacing */
  .form-control, .form-select {
    font-size: 0.88rem;
    padding: 0.5rem 0.75rem;
  }
  /* Table on tablet: no wrapping */
  .pase-table th,
  .pase-table td {
    white-space: nowrap;
    font-size: 0.82rem;
    padding: 0.5rem 0.65rem !important;
  }
}

/* Menu mobile list: visibility controlled ONLY by JS toggle (inline style), CSS never overrides */
.menu-mobile-list { display: block; }
.menu-mobile-list .pase-card { margin-bottom: 0.5rem; }
.menu-mobile-list .pase-card-header { padding: 0.5rem 0.75rem; }
.menu-mobile-list .pase-card-header h6 { font-size: 0.85rem; }

/* Operator menu item touch improvements */
@media (pointer: coarse) {
  .op-menu-list-item {
    padding: 0.85rem 0.75rem !important;
    border-radius: var(--radius-md);
    margin-bottom: 0.4rem;
  }
  .op-day-header {
    padding: 0.65rem 0.75rem;
  }
  .op-nav-btn {
    width: 48px !important;
    height: 48px !important;
  }
  .add-menu-btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.85rem !important;
    min-height: 44px;
  }
  .op-btn-serve, .op-btn-serve-sm {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Fast scroll momentum on mobile */
@media (pointer: coarse) {
  .sidebar-body, .alert-dropdown-menu, .table-responsive,
  .op-day-body, .pase-card-body[style*="overflow"] {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Operator Menu day body collapse: use max-height/overflow instead of display:none */
/* so SortableJS can detect drag targets even when collapsed */
.op-day-body {
  max-height: 2000px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.2s ease, margin 0.2s ease;
  opacity: 1;
}
.op-day-body.no-transition {
  transition: none !important;
}
.op-day-body.collapsed {
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-width: 0 !important;
  opacity: 0;
}
.op-day-body.collapsed .empty-day-msg,
.op-day-body.collapsed .add-menu-btn {
  display: none;
}

/* ===== OPERATOR COCINA RESPONSIVE (Stock, Lots, Movements) ===== */

/* Stat cards grid: 4-col (col-3) → 2x2 on mobile L, stack on tiny */
@media (max-width: 575.98px) {
  .op-page .row.g-2 > [class*="col-"].col-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .op-page .row.g-2 > [class*="col-"].col-4 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .op-stat-card {
    padding: 0.5rem 0.6rem;
  }
  .op-stat-val {
    font-size: 1rem;
  }
  .op-stat-label {
    font-size: 0.58rem;
  }
}
@media (max-width: 399.98px) {
  .op-page .row.g-2 > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Stock item: compact adjustor row on tiny */
@media (max-width: 399.98px) {
  .stock-item > div:first-child { width: 32px !important; }
  .stock-item > div:first-child div:first-child { font-size: 1.1rem; }
  .stock-item > div:first-child div:last-child { font-size: 0.45rem; }
  .stock-item .op-mli-platillo { font-size: 0.82rem; }
  .stock-item .op-mli-tipo { font-size: 0.6rem; }
  .stock-item .op-mli-alumnos { font-size: 0.6rem; }
  .stock-item .custom-badge { font-size: 0.5rem; padding: 0.1em 0.35em; }
  .stock-item > div:nth-child(4) { gap: 0.3rem; }
  .stock-item .badge-green,
  .stock-item .badge-red { font-size: 0.45rem; padding: 0.1em 0.35em; }
  .stock-adjustor .stock-input { width: 40px; font-size: 0.78rem; height: 24px; }
  .stock-adjustor .btn-adjust { width: 26px; height: 26px; font-size: 0.75rem; }
  .stock-adjustor span { font-size: 0.6rem; }
}

/* Lot item: compact on tiny */
@media (max-width: 399.98px) {
  .lot-item > div:first-child { width: 32px !important; }
  .lot-item > div:first-child div:first-child { font-size: 1.1rem; }
  .lot-item .op-mli-platillo { font-size: 0.82rem; }
  .lot-item .op-mli-tipo { font-size: 0.6rem; }
  .lot-item .op-mli-alumnos { font-size: 0.6rem; }
  .lot-item .custom-badge { font-size: 0.5rem; }
  .lot-item .progress { width: 32px !important; height: 2px !important; }
}

/* Lot filter bar: search full-width on mobile */
@media (max-width: 575.98px) {
  .op-form-card .d-flex.flex-wrap #opSearchLot {
    min-width: 100%;
    margin-bottom: 0.35rem;
  }
  .op-form-card .d-flex.flex-wrap #opFilterVenc,
  .op-form-card .d-flex.flex-wrap #opFilterCat {
    flex: 1;
    min-width: 0;
  }
}

/* Movement items: compact on tiny */
@media (max-width: 399.98px) {
  .op-mov-item > div:first-child { width: 32px !important; }
  .op-mov-item > div:first-child div:first-child { font-size: 1.1rem; }
  .op-mov-item .op-mli-platillo { font-size: 0.82rem; }
  .op-mov-item .op-mli-tipo { font-size: 0.6rem; }
  .op-mov-item .op-mli-alumnos { font-size: 0.65rem; }
  .op-mov-item .custom-badge { font-size: 0.5rem; padding: 0.1em 0.35em; }
}

/* Product items: compact on tiny */
@media (max-width: 480px) {
  .op-producto-card > div:last-child { padding: 0.65rem 0.75rem; }
  .op-producto-card > div:last-child > .d-flex { flex-direction: column; }
  .op-producto-card > div:last-child > .d-flex > div:first-child { width: 100%; }
  .op-producto-card > div:last-child > .d-flex > div:last-child { margin-left: 0 !important; margin-top: 0.5rem; flex-direction: row !important; width: 100%; justify-content: flex-end; }
  .op-producto-card > div:last-child > .d-flex > div:last-child .btn { width: 34px; height: 34px; }
  .op-producto-card > div:last-child > .d-flex > div:last-child .btn i { font-size: 0.85rem; }
}
@media (max-width: 399.98px) {
  .op-producto-card > div:last-child { padding: 0.55rem 0.65rem; }
  .op-producto-card .d-flex > div:first-child > div:first-child { font-size: 1rem; }
  .op-producto-card .custom-badge { font-size: 0.62rem; padding: 0.15em 0.45em; }
}

/* Operator page title responsive */
@media (max-width: 399.98px) {
  .op-page-title { font-size: 1rem !important; padding: 0.5rem 0 !important; }
  .op-sub-title { font-size: 0.75rem !important; margin-bottom: 0.65rem !important; }
}

/* ===== RESPONSIVE BUTTON ALIGNMENT FIXES ===== */
/* Consistent button sizing within flex groups across all breakpoints */
@media (max-width: 575.98px) {
  .page-header .d-flex.gap-2 .btn,
  .page-header .d-flex.gap-2 a.btn,
  .page-header .d-flex.gap-2 button {
    font-size: 0.82rem;
    padding: 0.4rem 0.75rem;
    white-space: nowrap;
  }
  .page-header .d-flex.gap-2 .btn i,
  .page-header .d-flex.gap-2 a.btn i,
  .page-header .d-flex.gap-2 button i {
    font-size: 0.9rem;
  }
}
@media (min-width: 480px) and (max-width: 767.98px) {
  .page-header .d-flex.gap-2 {
    flex-direction: row !important;
    flex-wrap: wrap;
  }
  .page-header .d-flex.gap-2 .btn,
  .page-header .d-flex.gap-2 a.btn,
  .page-header .d-flex.gap-2 button {
    flex: 0 1 auto;
    width: auto;
  }
}
/* Card header button groups: consistent wrapping */
@media (max-width: 575.98px) {
  .pase-card-header .d-flex.gap-2 {
    flex-wrap: wrap;
    width: 100%;
  }
  .pase-card-header .d-flex.gap-2 .btn {
    flex: 1 1 auto;
  }
}

/* ===== END OPERATOR COCINA RESPONSIVE ===== */

/* ===== ADDITIONAL RESPONSIVE IMPROVEMENTS ===== */

/* Topbar on very small screens */
@media (max-width: 399.98px) {
  .topbar { padding: 0 0.35rem !important; gap: 0.25rem; }
  .topbar-controls { gap: 0.05rem; }
  .topbar-theme-btn, .topbar-notif-btn { width: 30px; height: 30px; font-size: 0.85rem; border-width: 1px; }
  .topbar-logout-btn { width: 30px; height: 30px; padding: 0; font-size: 0.65rem; border-radius: 50%; border-width: 1px; }
  .topbar-logout-btn i { font-size: 0.85rem; }
  .topbar-logout-btn span { display: none; }
  .topbar-mobile-brand { font-size: 0.75rem; max-width: 65px; flex: 1; }
  .btn-menu-toggle { width: 32px; height: 32px; font-size: 1.1rem; padding: 0.25rem; }
}

/* Cards on mobile: reduce padding */
@media (max-width: 575.98px) {
  .pase-card-body { padding: 0.85rem; }
  .pase-card-header { padding: 0.65rem 0.85rem; }
  .pase-card-header h6 { font-size: 0.85rem; }
  .pase-card-footer { padding: 0.65rem 0.85rem; }
  /* Stat cards row on small screens */
  .dashboard-stats .row.g-3 > [class*="col-"] { width: 50%; flex: 0 0 50%; max-width: 50%; }
  .dashboard-stats .stat-card { padding: 0.75rem; }
  .dashboard-stats .stat-value { font-size: 1.1rem; }
  .dashboard-stats .stat-label { font-size: 0.65rem; }
}
@media (max-width: 399.98px) {
  .dashboard-stats .row.g-3 > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; }
}

/* Modal forms on mobile L (400-575px): keep compact */
@media (min-width: 400px) and (max-width: 575.98px) {
  .modal-body .row.g-3 > .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .modal-body .row.g-3 > .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Table responsive: horizontal scroll indicator */
.table-responsive {
  position: relative;
}
.table-responsive::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; width: 24px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.table-responsive.is-scrollable::after { opacity: 1; }

/* Operator page responsive: day cards spacing */
@media (max-width: 399.98px) {
  .op-day-card { margin-bottom: 0.4rem; }
  .op-day-header { padding: 0.5rem 0.65rem !important; }
  .op-day-header strong { font-size: 0.85rem; }
  .op-menu-list-item { padding: 0.55rem 0.65rem !important; }
  .op-menu-list-item .op-mli-platillo { font-size: 0.82rem; }
  .op-menu-list-item .op-mli-tipo { font-size: 0.5rem; }
  .op-menu-list-item .op-mli-alumnos { font-size: 0.7rem; }
  .op-menu-list-item .op-badge-servido { font-size: 0.55rem !important; padding: 0.15rem 0.35rem !important; }
  .op-menu-list-item .btn-group .btn { padding: 0.15rem 0.3rem !important; }
  .op-menu-list-item .btn-group .btn i { font-size: 0.75rem; }
  .op-page-title { font-size: 1rem !important; padding: 0.5rem 0 !important; }
}

/* Ensure all interactive elements have min touch target on mobile */
@media (pointer: coarse) {
  .btn-sm, .btn-xs, button.btn, a.btn, .nav-link, .dropdown-item,
  .sidebar-user, .topbar-theme-btn, .topbar-notif-btn, .btn-logout,
  [onclick] { min-height: var(--touch-min, 36px); }
  .form-control, .form-select, .op-input, .op-select { min-height: 40px; }
}

/* ===== GENERAL UI/UX IMPROVEMENTS ===== */

/* Focus-visible ring for keyboard accessibility */
:focus-visible {
  outline: 2px solid var(--pase-primary, #1565C0);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible,
.btn-pase:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--pase-primary, #1565C0);
  outline-offset: 2px;
}

/* Consistent card hover feedback */
.pase-card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.pase-card:hover {
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08));
}

/* Stat card hover lift */
.stat-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,0.1));
}

/* Loading state placeholder */
.loading-placeholder {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Data table row hover refinement */
.pase-table tbody tr {
  transition: background-color 0.15s ease;
}
.pase-table tbody tr:hover {
  background-color: var(--pase-primary-subtle, rgba(21,101,192,0.04));
}

/* Topbar user greeting emphasis */
.topbar-greeting {
  font-size: 0.82rem;
  color: var(--gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-greeting strong {
  color: var(--gray-800);
}

/* Badge consistency */
.custom-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

/* Ensure empty states have proper min-height */
.empty-state {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Improve clickable area for icon-only buttons */
.btn-icon-only {
  min-width: var(--touch-min, 36px);
  min-height: var(--touch-min, 36px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Prevent text selection on drag handles */
.draggable-platillo, .drag-handle, [draggable="true"] {
  -webkit-user-select: none;
  user-select: none;
}

/* Smooth sidebar transitions on all properties */
.sidebar, .sidebar * {
  transition-duration: 0.25s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ====== GLOBAL TOAST ====== */
.sca-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 999999;
  min-width: 340px;
  max-width: 460px;
  border-radius: 14px;
  background: var(--bg-card, #fff);
  box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.06);
  overflow: hidden;
  display: none;
  transform: translateX(calc(100% + 40px));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  opacity: 0;
  border: 1px solid var(--border-color, #e8e8e8);
  pointer-events: auto;
}
.sca-toast-visible {
  transform: translateX(0);
  opacity: 1;
}
.sca-toast-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 14px 16px;
  position: relative;
}
.sca-toast-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.sca-toast-success .sca-toast-icon { color: #2E7D32; }
.sca-toast-error .sca-toast-icon { color: #c62828; }
.sca-toast-warning .sca-toast-icon { color: #e65100; }
.sca-toast-info .sca-toast-icon { color: #1565C0; }
.sca-toast-msg {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary, #222);
}
.sca-toast-close {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted, #999);
  padding: 0 0 0 4px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.sca-toast-close:hover { opacity: 1; }
.sca-toast-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: currentColor;
  animation: scaToastShrink 3.5s linear forwards;
}
.sca-toast-success .sca-toast-bar { background: #2E7D32; }
.sca-toast-error .sca-toast-bar { background: #c62828; }
.sca-toast-warning .sca-toast-bar { background: #e65100; }
.sca-toast-info .sca-toast-bar { background: #1565C0; }
@keyframes scaToastShrink {
  from { width: 100%; }
  to { width: 0%; }
}
@media (max-width: 480px) {
  .sca-toast {
    top: auto;
    bottom: 20px;
    right: 12px;
    left: 12px;
    min-width: unset;
    max-width: unset;
    transform: translateY(calc(100% + 40px));
  }
  .sca-toast-visible { transform: translateY(0); }
}

/* ===== CUSTOM PASE TOGGLE SWITCH ===== */
.pase-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.pase-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.pase-switch .pase-switch-track {
  position: relative;
  width: 48px;
  height: 26px;
  background: #ccc;
  border-radius: 13px;
  transition: background 0.25s ease, box-shadow 0.25s ease;
  flex-shrink: 0;
}
.pase-switch .pase-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.pase-switch input:checked + .pase-switch-track {
  background: var(--pase-primary, #1565C0);
  box-shadow: 0 0 0 3px rgba(21,101,192,0.15);
}
.pase-switch input:checked + .pase-switch-track::after {
  transform: translateX(22px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.pase-switch .pase-switch-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: color 0.25s ease;
}
.pase-switch .pase-switch-label.label-on { color: var(--pase-primary, #1565C0); }
.pase-switch .pase-switch-label.label-off { color: #bbb; }
.pase-switch input:not(:checked) ~ .pase-switch-label.label-on { color: #ddd; }
.pase-switch input:checked ~ .pase-switch-label.label-off { color: #ddd; }
[data-theme="dark"] .pase-switch .pase-switch-track { background: #555; }
[data-theme="dark"] .pase-switch input:checked + .pase-switch-track { background: var(--pase-primary, #1565C0); box-shadow: 0 0 0 3px rgba(21,101,192,0.3); }
[data-theme="dark"] .pase-switch .pase-switch-track::after { background: #e0e0e0; }
[data-theme="dark"] .pase-switch input:not(:checked) ~ .pase-switch-label.label-off { color: #999; }
[data-theme="dark"] .pase-switch input:not(:checked) ~ .pase-switch-label.label-on { color: #555; }

/* System toggle (blue accent) */
.pase-switch.system input:checked + .pase-switch-track {
  background: #1565C0;
  box-shadow: 0 0 0 3px rgba(21,101,192,0.15);
}
.pase-switch.system .pase-switch-label.label-on { color: #1565C0; }
[data-theme="dark"] .pase-switch.system input:checked + .pase-switch-track { background: #1e88e5; box-shadow: 0 0 0 3px rgba(30,136,229,0.3); }
[data-theme="dark"] .pase-switch.system .pase-switch-label.label-on { color: #64b5f6; }

/* Browser toggle (green accent) */
.pase-switch.browser input:checked + .pase-switch-track {
  background: #2E7D32;
  box-shadow: 0 0 0 3px rgba(46,125,50,0.15);
}
.pase-switch.browser .pase-switch-label.label-on { color: #2E7D32; }
[data-theme="dark"] .pase-switch.browser input:checked + .pase-switch-track { background: #43a047; box-shadow: 0 0 0 3px rgba(67,160,71,0.3); }
[data-theme="dark"] .pase-switch.browser .pase-switch-label.label-on { color: #81c784; }

/* ===== STOCK INVENTORY - LOCAL EDIT MODE ===== */
.stock-num-input {
  width: 64px;
  font-size: 0.95rem;
  height: 34px;
  padding: 2px 6px;
  text-align: center;
  border: 1.5px solid var(--border-color, #ddd);
  border-radius: 8px;
  background: var(--bg-input, #f9f9f9);
  color: var(--text-primary, #222);
  font-weight: 700;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  outline: none;
  -moz-appearance: textfield;
}
.stock-num-input::-webkit-outer-spin-button,
.stock-num-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.stock-num-input:focus {
  border-color: var(--pase-primary, #1565C0);
  box-shadow: 0 0 0 3px rgba(21,101,192,0.12);
  background: #fff;
}
.stock-edit-row {
  contain: layout style;
}
.stock-confirm-bar {
  contain: layout;
}
[data-theme="dark"] .stock-num-input {
  background: #2a2a2a;
  border-color: #444;
  color: #e0e0e0;
}
[data-theme="dark"] .stock-num-input:focus {
  border-color: var(--pase-primary, #1e88e5);
  background: #333;
  box-shadow: 0 0 0 3px rgba(30,136,229,0.2);
}

/* ===== PERFORMANCE & FLUIDITY IMPROVEMENTS ===== */
/* GPU-accelerated animations */
.op-modal .modal-content,
.modal-content {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Touch-friendly interactive elements */
.btn,
button,
input,
select,
textarea,
a,
.op-nav-item,
.op-menu-list-item,
.op-alert-card,
.stock-item,
[role="button"] {
  touch-action: manipulation;
}

/* Paint containment for list items */
.op-menu-list-item,
.op-producto-card,
.op-alert-card,
.stock-item,
.op-day-body > div {
  contain: layout style paint;
}

/* Prevent background scroll when modal is open */
.modal-open .op-main,
.modal-open .op-page,
.modal-open .sidebar {
  overscroll-behavior: contain;
}

/* Smooth transitions for interactive elements */
.op-producto-card,
.stock-item,
.op-alert-card,
.op-menu-list-item {
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  will-change: transform;
}

/* Reduce motion preference - respect user settings */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Optimize scrolling containers */
.op-day-body,
.sidebar-body,
.op-main {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Prevent text selection during drag to avoid jank */
.sortable-ghost,
.sortable-drag {
  user-select: none !important;
  -webkit-user-select: none !important;
  pointer-events: none !important;
}

/* Compact spacing for mobile */
@media (max-width: 575.98px) {
  .op-page { padding: 0.5rem 0.65rem; }
  .op-page-title { padding: 0.5rem 0 !important; font-size: 1.05rem !important; }
  .op-form-card { padding: 0.5rem !important; }
  .op-menu-list-item { padding: 0.6rem 0.75rem !important; }
  .op-stat-card { padding: 0.5rem 0.6rem !important; }
  .op-stat-val { font-size: 1rem !important; }
  .op-alert-card { padding: 0.75rem 0.9rem !important; }
  .stock-confirm-bar > div { padding: 0.65rem 1rem !important; flex-direction: column !important; text-align: center; }
  .stock-confirm-bar > div > div:last-child { width: 100%; justify-content: center !important; }
  .stock-adjustor { gap: 0.3rem !important; }
  .pagination { gap: 0; }
}

@media (max-width: 399.98px) {
  .op-page { padding: 0.4rem 0.5rem; }
  .op-menu-list-item { padding: 0.5rem 0.6rem !important; }
  .stock-num-input { width: 54px; height: 32px; font-size: 0.85rem; }
  .btn-adjust { width: 32px !important; height: 32px !important; font-size: 0.85rem !important; }
}

/* ===== ANIMACIONES DE ENTRADA ===== */
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes rowEnter {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0);    }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1);    }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes shimmerLoad {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

/* Stat cards — escalonado */
.stat-card { animation: cardEnter 0.4s cubic-bezier(0.16,1,0.3,1) both; }
.stat-card:nth-child(1) { animation-delay: 0.04s; }
.stat-card:nth-child(2) { animation-delay: 0.08s; }
.stat-card:nth-child(3) { animation-delay: 0.12s; }
.stat-card:nth-child(4) { animation-delay: 0.16s; }
.stat-card:nth-child(5) { animation-delay: 0.20s; }
.stat-card:nth-child(6) { animation-delay: 0.24s; }

/* Cards principales */
.pase-card { animation: cardEnter 0.35s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.06s; }

/* Filas de tabla */
.pase-table tbody tr {
  animation: rowEnter 0.3s ease both;
}
.pase-table tbody tr:nth-child(1)  { animation-delay: 0.03s; }
.pase-table tbody tr:nth-child(2)  { animation-delay: 0.06s; }
.pase-table tbody tr:nth-child(3)  { animation-delay: 0.09s; }
.pase-table tbody tr:nth-child(4)  { animation-delay: 0.12s; }
.pase-table tbody tr:nth-child(5)  { animation-delay: 0.15s; }
.pase-table tbody tr:nth-child(n+6){ animation-delay: 0.18s; }

/* Activos items */
.afs-item { animation: slideUp 0.3s cubic-bezier(0.16,1,0.3,1) both; }
.afs-item:nth-child(1)  { animation-delay: 0.04s; }
.afs-item:nth-child(2)  { animation-delay: 0.08s; }
.afs-item:nth-child(3)  { animation-delay: 0.12s; }
.afs-item:nth-child(4)  { animation-delay: 0.16s; }
.afs-item:nth-child(5)  { animation-delay: 0.20s; }
.afs-item:nth-child(n+6){ animation-delay: 0.24s; }

/* ============================================================
   ====  SISTEMA DE DISENO UNIFICADO  (v1 - global polish)  ====
   Modulo autocontenido al final del archivo: estandariza
   iconografia, animaciones, botones, responsive y consistencia
   visual en TODAS las vistas sin reescribir cada cshtml.
   Usa los tokens ya definidos arriba (:root) y respeta el
   dark mode (atributo data-theme) y prefers-reduced-motion.
   ============================================================ */

/* ---- Tokens adicionales de easing/curvas ---- */
:root {
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ds-ring: 0 0 0 3px rgba(21,101,192,0.25);
}
[data-theme="dark"] {
  --ds-ring: 0 0 0 3px rgba(66,165,245,0.35);
}

/* ============================================================
   1) ICONOGRAFIA  —  estilo, tamano y alineacion consistentes
   ============================================================ */

/* Alineacion optica: los iconos de Bootstrap heredan tamano del
   texto y se centran verticalmente con el contenido adyacente. */
.bi {
  display: inline-block;
  vertical-align: -0.125em;
  line-height: 1;
}

/* Iconos dentro de botones: tamano relativo y separacion uniforme */
.btn .bi,
.btn-pase .bi,
.btn-outline-secondary .bi {
  font-size: 1.05em;
  vertical-align: -0.12em;
}

/* Escala utilitaria de iconos (consistencia de tamanos) */
.icon-xs { font-size: 0.75rem !important; }
.icon-sm { font-size: 0.9rem  !important; }
.icon-md { font-size: 1.15rem !important; }
.icon-lg { font-size: 1.5rem  !important; }
.icon-xl { font-size: 2rem    !important; }

/* Icono circular reutilizable (cabeceras de card, estados vacios) */
.ds-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pase-primary-subtle);
  color: var(--pase-primary);
  font-size: 1.25rem;
  flex: 0 0 auto;
}
.ds-icon-circle.is-orange { background: rgba(245,124,0,0.12); color: var(--pase-orange); }
.ds-icon-circle.is-success { background: rgba(46,125,50,0.12); color: #2E7D32; }
.ds-icon-circle.is-danger  { background: rgba(198,40,40,0.12); color: #C62828; }
[data-theme="dark"] .ds-icon-circle.is-success { color: #81C784; }
[data-theme="dark"] .ds-icon-circle.is-danger  { color: #EF9A9A; }

/* Iconos de accion en tablas (editar/borrar/ver): area de toque pareja */
.table .btn .bi,
.pase-table .btn .bi { vertical-align: -0.1em; }

/* ============================================================
   2) ANIMACIONES  —  fluidas, coherentes y respetuosas con perf
   ============================================================ */

@keyframes dsFadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes dsPopIn    { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes dsSlideUp  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dsPulseSoft{ 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Modales: entrada suave y consistente (sin saltos) */
.modal.fade .modal-dialog {
  transition: transform 0.28s var(--ease-out-soft), opacity 0.28s ease;
  transform: translateY(12px) scale(0.99);
}
.modal.show .modal-dialog {
  transform: none;
}

/* Toasts y dropdowns con la misma curva */
.toast { animation: dsPopIn 0.22s var(--ease-out-soft) both; }

/* Hover unificado de "cards interactivas" (elevacion sutil) */
.ds-hoverable,
.stat-card,
.pase-card.is-clickable {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  will-change: transform;
}
.ds-hoverable:hover,
.pase-card.is-clickable:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* Indicador "vivo" reutilizable (estados en tiempo real) */
.ds-live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2E7D32;
  animation: dsPulseSoft 1.8s ease-in-out infinite;
}

/* Skeleton de carga coherente con el resto */
.ds-skeleton {
  background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 37%, var(--gray-200) 63%);
  background-size: 800px 100%;
  animation: shimmerLoad 1.4s linear infinite;
  border-radius: var(--radius-sm);
}

/* Respeto total a usuarios con movimiento reducido (refuerzo) */
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog,
  .toast,
  .ds-hoverable,
  .stat-card,
  .pase-card,
  .pase-table tbody tr,
  .afs-item { animation: none !important; transition: none !important; transform: none !important; }
  .ds-live-dot { animation: none !important; }
}

/* ============================================================
   3) BOTONES  —  tamanos, estados y variantes estandarizados
   ============================================================ */

/* Base coherente para TODO .btn (altura/alineacion/foco) */
.btn {
  --btn-radius: var(--radius-md);
  border-radius: var(--btn-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1.2;
  white-space: nowrap;
  user-select: none;
}
/* Estado de foco accesible y uniforme (teclado) */
.btn:focus-visible,
.btn-pase:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: none;
  box-shadow: var(--ds-ring);
}

/* Variantes Bootstrap alineadas a la paleta PASE */
.btn-primary {
  background: var(--pase-primary);
  border-color: var(--pase-primary);
}
.btn-primary:hover {
  background: var(--pase-primary-dark);
  border-color: var(--pase-primary-dark);
  transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0); }

.btn-success { background:#2E7D32; border-color:#2E7D32; }
.btn-success:hover { background:#1B5E20; border-color:#1B5E20; transform: translateY(-2px); }
.btn-danger { background:#C62828; border-color:#C62828; }
.btn-danger:hover { background:#A31515; border-color:#A31515; transform: translateY(-2px); }
.btn-warning { background:var(--pase-orange); border-color:var(--pase-orange); color:#fff; }
.btn-warning:hover { background:#E65100; border-color:#E65100; color:#fff; transform: translateY(-2px); }

/* Tamanos estandar */
.btn-lg { font-size: 1rem; padding: 0.7rem 1.6rem; border-radius: var(--radius-lg); }
.btn-sm { font-size: 0.8rem; padding: 0.35rem 0.8rem; border-radius: var(--radius-sm); }

/* Boton-icono cuadrado consistente (acciones de tabla/toolbar) */
.btn-icon {
  width: 38px; height: 38px;
  padding: 0;
  border-radius: var(--radius-md);
  flex: 0 0 auto;
}
.btn-icon.btn-sm { width: 32px; height: 32px; }
.btn-icon .bi { font-size: 1.05rem; }

/* Disabled coherente para CUALQUIER variante */
.btn:disabled, .btn.disabled,
.btn-pase:disabled, .btn-pase.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
  filter: grayscale(0.15);
}

/* Spinner inline para botones en estado "cargando" */
.btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 1em; height: 1em;
  top: 50%; left: 50%;
  margin: -0.5em 0 0 -0.5em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: dsSpin 0.6s linear infinite;
  color: #fff;
}
@keyframes dsSpin { to { transform: rotate(360deg); } }

/* En pantallas tactiles, asegurar area minima de toque */
@media (hover: none) and (pointer: coarse) {
  .btn:not(.btn-sm):not(.btn-icon) { min-height: var(--touch-min); }
  .btn-icon { width: var(--touch-min); height: var(--touch-min); }
}

/* ============================================================
   4) RESPONSIVE GLOBAL  —  movil, tablet, escritorio, ultrawide
   ============================================================ */

/* Contenedor de cabecera de pagina: nunca desborda, apila en movil */
.page-header,
.pase-card-header {
  flex-wrap: wrap;
  gap: 0.65rem;
}

/* Toolbars de acciones: que envuelvan en vez de desbordar */
.page-header .d-flex,
.pase-card-header .d-flex { flex-wrap: wrap; }

/* Tablas: scroll horizontal seguro en pantallas estrechas */
.table-responsive,
.pase-table-wrap { -webkit-overflow-scrolling: touch; }

/* MOVIL (<= 575px): botones de cabecera a ancho completo y comodos */
@media (max-width: 575.98px) {
  .page-header .d-flex.gap-2 > .btn,
  .page-header .d-flex.gap-2 > a.btn,
  .page-header .d-flex.gap-2 > form { flex: 1 1 auto; }
  .page-header .d-flex.gap-2 > .btn { justify-content: center; }

  /* Grids de stats: dos columnas comodas en movil */
  .stats-grid,
  .row-stats { gap: 0.6rem !important; }

  /* Modales casi a pantalla completa para mejor uso del espacio */
  .modal-dialog:not(.modal-sm) {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }
}

/* TABLET (576–991px): densidad intermedia */
@media (min-width: 576px) and (max-width: 991.98px) {
  .page-content { padding-left: 1rem; padding-right: 1rem; }
}

/* ULTRAWIDE (>= 1600px): limitar ancho de lectura para que el
   contenido no quede "estirado" de extremo a extremo */
@media (min-width: 1600px) {
  .page-content > .container-fluid,
  .page-content > .pase-card,
  .page-content > .page-header {
    max-width: 1520px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 2200px) {
  .page-content > .container-fluid,
  .page-content > .pase-card,
  .page-content > .page-header { max-width: 1800px; }
}

/* Imagenes y media nunca desbordan su contenedor */
.page-content img:not(.brand-logo-img):not(.sidebar-user-avatar img) { max-width: 100%; height: auto; }

/* Tipografia fluida sutil para titulos de pagina */
.page-header h1,
.page-header h2,
.topbar-title { font-size: clamp(1.05rem, 1rem + 0.6vw, 1.6rem); }

/* ============================================================
   5) CONSISTENCIA VISUAL GLOBAL  —  acabado pulido y armonioso
   ============================================================ */

/* Cards: radio, borde y sombra coherentes en todo el sistema */
.card,
.pase-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

/* Inputs y selects: foco coherente con la paleta */
.form-control:focus,
.form-select:focus {
  border-color: var(--pase-primary-light);
  box-shadow: var(--ds-ring);
}

/* Badges: tipografia y forma uniformes */
.badge { font-weight: 600; letter-spacing: 0.02em; border-radius: 50rem; }

/* Estado vacio reutilizable (listas/tablas sin datos) */
.ds-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
}
.ds-empty .bi { font-size: 2.6rem; opacity: 0.5; display: block; margin-bottom: 0.6rem; }
.ds-empty-title { font-weight: 600; color: var(--text-secondary); margin-bottom: 0.25rem; }

/* Scrollbar fina y discreta, coherente en claro/oscuro */
.page-content,
.modal-body,
.table-responsive { scrollbar-width: thin; scrollbar-color: var(--gray-400) transparent; }
.page-content::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar { width: 8px; height: 8px; }
.page-content::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb { background: var(--gray-400); border-radius: 8px; }
.page-content::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover { background: var(--gray-500); }

/* Enlaces dentro de contenido: color de marca coherente */
.page-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.sidebar-user):not(.page-link) {
  color: var(--pase-primary);
  text-decoration: none;
}
.page-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.sidebar-user):not(.page-link):hover {
  color: var(--pase-primary-dark);
  text-decoration: underline;
}

/* Separadores coherentes */
hr { border-color: var(--border-color); opacity: 0.6; }

/* Selección de texto con color de marca */
::selection { background: var(--pase-primary-subtle); color: var(--pase-primary-dark); }
/* ====  FIN SISTEMA DE DISENO UNIFICADO  ==== */

/* ============================================================
   ====  PULIDO EXTRA — Sistema de Activos (afs-*)  v2  ====
   Micro-interacciones, animaciones y consistencia adicional.
   ============================================================ */

/* Filas de activos: entrada escalonada mas suave y feedback al tocar */
.afs-item {
    animation: afsRowIn 0.34s cubic-bezier(0.16,1,0.3,1) both;
    will-change: transform, opacity;
}
@keyframes afsRowIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.afs-item:nth-child(1){animation-delay:.02s}.afs-item:nth-child(2){animation-delay:.05s}
.afs-item:nth-child(3){animation-delay:.08s}.afs-item:nth-child(4){animation-delay:.11s}
.afs-item:nth-child(5){animation-delay:.14s}.afs-item:nth-child(6){animation-delay:.17s}
.afs-item:nth-child(7){animation-delay:.20s}.afs-item:nth-child(n+8){animation-delay:.22s}

/* Borde-acento sutil a la izquierda al pasar el mouse (no en verificados) */
.afs-item::before {
    content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:3px; height:0; border-radius:0 3px 3px 0;
    background:var(--afs-primary); transition:height 0.22s cubic-bezier(0.16,1,0.3,1);
}
.afs-item:hover::before { height:62%; }
.afs-item.checked::before { display:none; }

/* Miniatura: leve zoom al hover de la fila */
.afs-thumb { transition:transform 0.25s cubic-bezier(0.16,1,0.3,1); }
.afs-item:hover .afs-thumb { transform:scale(1.06); }

/* Checkbox: animacion de "check" al marcar */
.afs-chk { transition:all 0.2s cubic-bezier(0.34,1.56,0.64,1); }
.afs-chk.on { animation:afsChkPop 0.32s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes afsChkPop { 0%{transform:scale(0.6)} 55%{transform:scale(1.18)} 100%{transform:scale(1)} }

/* Cards de stats: brillo sutil que recorre al hover */
.afs-stat-card { isolation:isolate; }
.afs-stat-card::after {
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(120deg, transparent 40%, color-mix(in srgb, var(--sc, var(--afs-primary)) 8%, transparent) 50%, transparent 60%);
    background-size:220% 100%; background-position:120% 0;
    transition:background-position 0.6s ease; pointer-events:none;
}
.afs-stat-card:hover::after { background-position:-20% 0; }

/* Topbar: sombra al hacer scroll para dar profundidad */
.afs-topbar { transition:box-shadow 0.25s ease, padding 0.2s ease; }
.afs-topbar.scrolled { box-shadow:0 4px 18px rgba(0,0,0,0.18); }

/* Spinner del editor/modales (reutiliza var afs) — un poco mas grande */
.afs-spinner { width:22px; height:22px; }

/* Scrollbar fina dentro de modales de activos */
.afs-modal::-webkit-scrollbar, .afs-confirm::-webkit-scrollbar { width:7px; }
.afs-modal::-webkit-scrollbar-thumb, .afs-confirm::-webkit-scrollbar-thumb { background:var(--afs-border); border-radius:7px; }

/* Botones del editor de fotos: foco accesible */
.afs-tool:focus-visible, .afs-ratio:focus-visible, .afs-cam-ico:focus-visible {
    outline:none; box-shadow:0 0 0 3px rgba(255,255,255,0.4);
}

/* Lightbox: aparicion suave de la imagen */
#afsLightbox img { animation:dsPopIn 0.28s cubic-bezier(0.16,1,0.3,1); }

/* Empuje táctil general en botones afs */
.afs-foto-btn:focus-visible, .afs-act:focus-visible {
    outline:none; box-shadow:0 0 0 3px rgba(13,71,161,0.25);
}

@media (prefers-reduced-motion: reduce) {
    .afs-item, .afs-stat-card, .afs-chk.on, #afsLightbox img { animation:none !important; }
    .afs-item::before, .afs-thumb, .afs-stat-card::after { transition:none !important; }
}
/* ====  FIN PULIDO EXTRA ACTIVOS  ==== */

/* ============================================================
   ====  PULIDO MODALES INFORMATIVOS + LISTAS (SCA)  v3  ====
   Aplica a ambos sistemas vía pase.css (modal de detalle SCA,
   tablas de listados, búsqueda AJAX). Sin tocar cada vista.
   ============================================================ */

/* Modal de detalle (showDetail) más pulido */
.detail-table { border-radius: var(--radius-md); overflow: hidden; }
.detail-table .detail-label {
    width: 38%; background: var(--bg-table-header); font-weight: 600;
    color: var(--text-secondary); font-size: 0.82rem; vertical-align: top;
}
.detail-table .detail-value { font-size: 0.88rem; color: var(--text-primary); word-break: break-word; }
.detail-table tr { transition: background var(--transition-fast); }
.detail-table tbody tr:hover { background: var(--pase-primary-subtle); }

/* Cabecera del modal con acento de marca */
.modal-header { border-bottom: 1px solid var(--border-color); }
.modal-header .modal-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; }
.modal-header .modal-title i { color: var(--pase-primary); }
.modal-content { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); overflow: hidden; }
.modal-footer { border-top: 1px solid var(--border-color); }

/* Filas de tabla SCA: hover sutil y transición suave durante búsqueda AJAX */
.pase-table tbody tr { transition: background var(--transition-fast), transform var(--transition-fast); }
.pase-table tbody tr:hover { background: var(--pase-primary-subtle); }

/* Contenedor AJAX: fundido de entrada más agradable al reemplazar resultados */
#ajaxResults { transition: opacity 0.22s ease; }

/* Inputs de búsqueda: foco coherente con la marca en ambos sistemas */
.search-input:focus, .filter-select:focus {
    border-color: var(--pase-primary-light);
    box-shadow: 0 0 0 3px rgba(21,101,192,0.15);
}
/* ====  FIN PULIDO MODALES + LISTAS  ==== */

/* ============================================================
   ====  RESPONSIVE MÓVIL FINO (Redmi Note 13 ~393px)  v4  ====
   Ajustes para teléfonos de 360–430px en AMBOS sistemas.
   ============================================================ */
@media (max-width: 430px) {
  /* Tipografía y espaciados de contenido más compactos */
  .page-content { padding: 0.6rem 0.65rem; }
  .pase-card { border-radius: 12px; }
  .pase-card-header { padding: 0.7rem 0.8rem; }
  .pase-card-body { padding: 0.7rem 0.8rem; }

  /* Tablas: que la fuente no obligue a scroll horizontal excesivo */
  .pase-table { font-size: 0.78rem; }
  .pase-table th, .pase-table td { padding: 0.5rem 0.55rem; }

  /* Cabecera de página: título y acciones apiladas */
  .page-header { gap: 0.5rem; }
  .page-header h1, .page-header h2 { font-size: 1.05rem; }

  /* Botones de acción a tamaño cómodo de toque */
  .btn { min-height: 42px; }
  .btn-sm { min-height: 36px; }

  /* Modales casi a pantalla completa */
  .modal-dialog { margin: 0.4rem; max-width: calc(100% - 0.8rem); }
  .modal-body { padding: 0.85rem; }

  /* Paginación: que quepa sin desbordar */
  .pase-pager { flex-wrap: wrap; justify-content: center; gap: 0.2rem; }
  .pase-pager__btn, .pase-pager__page { min-width: 38px; min-height: 38px; }

  /* Formularios: inputs a ancho completo y cómodos */
  .form-control, .form-select { font-size: 1rem; }  /* evita zoom de iOS y mejora toque */
}

@media (max-width: 360px) {
  .page-content { padding: 0.5rem 0.5rem; }
  .page-header h1, .page-header h2 { font-size: 0.98rem; }
  .pase-table { font-size: 0.74rem; }
  .pase-table th, .pase-table td { padding: 0.4rem 0.45rem; }
}
/* ====  FIN RESPONSIVE MÓVIL FINO  ==== */

/* ============================================================
   ====  PULIDO ROL COCINA (Operator) + SCROLLS  v5  ====
   Mejora diseño/animaciones de las vistas del operador y
   garantiza scrolls correctos en AMBOS sistemas.
   ============================================================ */

/* ---- Topbar del operador: botones unificados ---- */
.op-header { transition: box-shadow 0.25s ease; }
.op-header.scrolled { box-shadow: 0 4px 16px rgba(0,0,0,0.28); }
.op-brand-sub { text-transform: none; font-weight: 500; }

.op-header-actions { display: flex; align-items: center; gap: 0.4rem; }

/* Botón estándar del header del operador */
.op-hbtn {
  position: relative;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 12px;
  background: rgba(255,255,255,0.14);
  color: #fff; font-size: 1.1rem; cursor: pointer;
  text-decoration: none;
  transition: background 0.16s ease, transform 0.12s ease, box-shadow 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}
.op-hbtn:hover { background: rgba(255,255,255,0.26); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.18); }
.op-hbtn:active { transform: scale(0.9); }
.op-hbtn-logout:hover { background: rgba(244,67,54,0.85); }
.op-hbtn-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: #ef4444; color: #fff; font-size: 0.6rem; font-weight: 700;
  border-radius: 9px; display: flex; align-items: center; justify-content: center;
  border: 2px solid #0D47A1;
}

/* Avatar del operador: nítido (sin pixelado) */
.op-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative; flex-shrink: 0;
  background: linear-gradient(135deg, #1565C0, #1E88E5);  /* azul de marca, no naranja */
  color: #fff; font-weight: 700; font-size: 0.85rem;
  border: none;                                            /* sin borde */
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: transform 0.15s ease;
  text-decoration: none;
}
.op-avatar:hover { transform: scale(1.06); color: #fff; }
.op-avatar img {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0;
  image-rendering: auto;
}
.op-avatar span { width: 100%; height: 100%; align-items: center; justify-content: center; }

/* ---- Bottom-nav: indicador animado + feedback ---- */
.op-nav-item {
  position: relative;
  transition: color 0.2s ease, transform 0.12s ease;
}
.op-nav-item i { transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1); }
.op-nav-item:active { transform: scale(0.92); }
.op-nav-item.active i { transform: translateY(-2px) scale(1.12); }
.op-nav-item.active::after {
  content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 3px; background: var(--pase-primary);
  animation: opNavIn 0.3s cubic-bezier(0.16,1,0.3,1);
}
@keyframes opNavIn { from { width: 0; opacity: 0; } to { width: 26px; opacity: 1; } }

/* ---- Animaciones de entrada de tarjetas del operador ---- */
.op-greeting { animation: cardEnter 0.4s cubic-bezier(0.16,1,0.3,1) both; }
.op-menu-card, .op-alert-card, .op-rec-card, .op-stat-card,
.op-menu-list-item, .op-form-card {
  animation: cardEnter 0.38s cubic-bezier(0.16,1,0.3,1) both;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.op-menu-card:hover, .op-alert-card:hover, .op-rec-card:hover,
.op-stat-card:hover, .op-menu-list-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.op-stat-card:nth-child(1){animation-delay:.04s}.op-stat-card:nth-child(2){animation-delay:.08s}
.op-stat-card:nth-child(3){animation-delay:.12s}.op-stat-card:nth-child(4){animation-delay:.16s}
.op-menu-list-item:nth-child(1){animation-delay:.03s}.op-menu-list-item:nth-child(2){animation-delay:.06s}
.op-menu-list-item:nth-child(3){animation-delay:.09s}.op-menu-list-item:nth-child(4){animation-delay:.12s}
.op-menu-list-item:nth-child(5){animation-delay:.15s}.op-menu-list-item:nth-child(n+6){animation-delay:.18s}

/* Botones del operador: feedback de toque uniforme */
.op-nav-btn, .stock-confirm-bar button, .op-page .btn {
  transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.op-nav-btn:active, .op-page .btn:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .op-greeting, .op-menu-card, .op-alert-card, .op-rec-card, .op-stat-card,
  .op-menu-list-item, .op-form-card, .op-nav-item.active::after { animation: none !important; }
}

/* ============================================================
   ====  SCROLLS: garantizar funcionamiento en todo  ====
   ============================================================ */

/* El contenido del operador debe poder hacer scroll completo,
   sin que la bottom-nav fija tape el final. */
.op-body { -webkit-overflow-scrolling: touch; }
.op-main { padding-bottom: 1rem; }
/* Espacio extra al final para que la barra inferior no oculte contenido */
.op-page, .op-page > *:last-child { scroll-margin-bottom: 90px; }
.op-page::after { content: ""; display: block; height: 0.5rem; }

/* Tablas anchas: scroll horizontal táctil suave en ambos sistemas */
.table-responsive, .pase-table-wrap, .op-table-wrap {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Modales largos: el cuerpo siempre puede hacer scroll vertical */
.modal-body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.afs-modal, .afs-modal-body, .afs-confirm { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* ---- Scroll del OPERADOR (rol cocina): scope acotado a .op-body ----
   NO se tocan html/body globalmente (eso rompía Activos y SCA). El layout
   del operador no fija height en html/body, así que el documento scrollea
   solo; aquí únicamente garantizamos espacio para la barra y scroll táctil. */
.op-body {
  min-height: 100vh;
  overflow-x: hidden;
  /* margen inferior = alto de la barra (68px) + safe-area, para no tapar contenido */
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.op-main { overflow: visible; }
.op-page { overflow: visible; }

/* En el sistema de activos, la página debe poder crecer y hacer scroll */
.afs-page { -webkit-overflow-scrolling: touch; }

/* Listas/paneles con altura fija: scroll interno suave */
.scroll-wrap, .alert-dropdown-menu, .dropdown-menu {
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
/* ====  FIN PULIDO COCINA + SCROLLS  ==== */

/* ============================================================
   ====  FIX DEFINITIVO FOOTER DEL SIDEBAR (perfil+logout)  ====
   El form de logout ahora es hermano del enlace de perfil
   (antes estaba anidado dentro del <a>, lo que descuadraba).
   ============================================================ */
.sidebar-footer {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem !important;
}
.sidebar-footer .sidebar-user {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;             /* permite truncar el nombre */
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.sidebar-footer .sidebar-user-avatar { flex: 0 0 auto; position: relative; }
.sidebar-footer .sidebar-user-info { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.sidebar-footer .sidebar-user-role { font-size: 0.62rem; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-footer .sidebar-user-name { font-size: 0.85rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-footer .sidebar-logout-form { flex: 0 0 auto; }
.sidebar-footer .btn-logout {
  width: 38px; height: 38px; flex: 0 0 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.15); border-radius: 50%;
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85);
  font-size: 1rem; line-height: 1; cursor: pointer;
  transition: background 0.16s, color 0.16s, transform 0.12s, border-color 0.16s;
}
.sidebar-footer .btn-logout:hover { background: #e53935; border-color: #e53935; color: #fff; transform: scale(1.06); }
.sidebar-footer .btn-logout:active { transform: scale(0.9); }
.sidebar-footer .btn-logout i { font-size: 1rem; margin: 0; }

/* Cuando el sidebar está colapsado (escritorio) ocultar info y dejar solo iconos */
.sidebar.collapsed .sidebar-footer { flex-direction: column; gap: 0.4rem; }
.sidebar.collapsed .sidebar-footer .sidebar-user-info { display: none; }
.sidebar.collapsed .sidebar-footer .sidebar-user { justify-content: center; }

/* En móvil/tablet (overlay) el footer SIEMPRE muestra todo en fila */
@media (max-width: 991.98px) {
  .sidebar.collapsed .sidebar-footer,
  .sidebar-footer { flex-direction: row !important; }
  .sidebar.collapsed .sidebar-footer .sidebar-user-info,
  .sidebar-footer .sidebar-user-info { display: block !important; }
}
/* ====  FIN FIX FOOTER SIDEBAR  ==== */

/* ============================================================
   ====  PAGINACIÓN BONITA (incluye 1 sola página)  ====
   ============================================================ */
.pase-pager-wrap {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.6rem;
  padding: 0.85rem 0.25rem 0.35rem;
}
.pase-pager-info {
  font-size: 0.78rem; color: var(--text-muted, #9E9E9E);
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.pase-pager-info strong { color: var(--text-secondary, #616161); font-weight: 700; }
.pase-pager-info i { color: var(--pase-primary); }

/* Botón deshabilitado (extremos cuando no aplica) */
.pase-pager__btn.is-disabled {
  opacity: 0.4; cursor: default; pointer-events: none;
  background: var(--bg-card, #fff);
}
/* Etiqueta "página única" */
.pase-pager__solo {
  font-size: 0.76rem; color: var(--text-muted, #9E9E9E);
  font-weight: 600; padding: 0 0.5rem; align-self: center;
}

/* Centrar el wrapper en móvil y dar respiro */
@media (max-width: 575.98px) {
  .pase-pager-wrap { justify-content: center; flex-direction: column; }
  .pase-pager-info { order: 2; }
  .pase-pager { order: 1; }
}
/* ====  FIN PAGINACIÓN BONITA  ==== */

/* ============================================================
   ====  BADGES DE CALIDAD ACTIVOS (verde/ámbar/rojo)  ====
   Global y con máxima prioridad para que el modo oscuro o
   cualquier override no los pinte de otro color.
   ============================================================ */
.afs-tag.afs-cal-bueno,   span.afs-cal-bueno   { background:rgba(34,197,94,0.18) !important; color:#16a34a !important; }
.afs-tag.afs-cal-regular, span.afs-cal-regular { background:rgba(245,158,11,0.18) !important; color:#d97706 !important; }
.afs-tag.afs-cal-malo,    span.afs-cal-malo    { background:rgba(239,68,68,0.18) !important; color:#dc2626 !important; }
.afs-tag.afs-cal-neutro,  span.afs-cal-neutro  { background:rgba(100,116,139,0.18) !important; color:#64748b !important; }
.afs-tag.afs-tag-inactivo { background:rgba(148,163,184,0.22) !important; color:#64748b !important; }
.afs-tag.afs-tag-verif    { background:rgba(34,197,94,0.18) !important; color:#16a34a !important; }
html[data-theme="dark"] .afs-cal-bueno,   html.dark .afs-cal-bueno   { color:#4ade80 !important; }
html[data-theme="dark"] .afs-cal-regular, html.dark .afs-cal-regular { color:#fbbf24 !important; }
html[data-theme="dark"] .afs-cal-malo,    html.dark .afs-cal-malo    { color:#f87171 !important; }
html[data-theme="dark"] .afs-tag-verif,   html.dark .afs-tag-verif   { color:#4ade80 !important; }
/* ====  FIN BADGES CALIDAD  ==== */

/* ============================================================
   ====  TEXTO VISIBLE EN INPUTS (modo oscuro)  ====
   Garantiza que lo que se escribe (incluido password) se vea.
   ============================================================ */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input.form-control,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html.dark .form-control,
html.dark input[type="password"],
html.dark textarea,
html.dark select {
  color: #f1f5f9 !important;
  background-color: #2A2A2A !important;           /* gris oscuro neutro, no azulado */
  -webkit-text-fill-color: #f1f5f9 !important;   /* fuerza el texto en WebKit/autofill */
  caret-color: #f1f5f9;
  border-color: #444444 !important;
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html.dark input::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  opacity: 1;
}
/* Autocompletado de Chrome: evitar que ponga fondo blanco con texto negro */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f1f5f9 !important;
  -webkit-box-shadow: 0 0 0 1000px #2A2A2A inset !important;
  caret-color: #f1f5f9;
}
/* Texto de ayuda bajo los campos: legible en claro y oscuro */
.form-text { color: var(--text-muted, #6c757d); }
html[data-theme="dark"] .form-text,
html.dark .form-text { color: #94a3b8 !important; }

/* EXCEPCIÓN: los inputs del sistema de Activos (afs-*) usan su propio azul
   oscuro (--afs-input-bg), NO el gris neutro de SCA. Gana sobre la regla global. */
html[data-theme="dark"] .afs-form input,
html[data-theme="dark"] .afs-form select,
html[data-theme="dark"] .afs-form textarea,
html[data-theme="dark"] input.afs-input,
html[data-theme="dark"] .afs-search-wrap input,
html[data-theme="dark"] .afs-filter-select,
html.dark .afs-form input,
html.dark .afs-form select,
html.dark .afs-form textarea {
  background-color: var(--afs-input-bg) !important;
  color: var(--afs-text) !important;
  -webkit-text-fill-color: var(--afs-text) !important;
  border-color: var(--afs-border) !important;
  caret-color: var(--afs-text);
}
/* ====  FIN TEXTO INPUTS OSCURO  ==== */

/* ============================================================
   ====  SCROLL EN TODOS LOS MODALES (ambos sistemas)  ====
   Garantiza que cualquier modal con contenido largo pueda
   hacer scroll vertical y no quede contenido oculto.
   ============================================================ */
/* Bootstrap scrollable: el cuerpo hace scroll, header/footer fijos */
.modal-dialog-scrollable .modal-content { max-height: 90vh; overflow: hidden; }
.modal-dialog-scrollable .modal-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Modales normales (no-scrollable): que el body igual pueda scrollear si es alto */
.modal .modal-body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Centrado + márgenes seguros en móvil */
@media (max-width: 575.98px) {
  .modal-dialog,
  .modal-dialog-centered { margin: 0.6rem auto; min-height: calc(100% - 1.2rem); }
  .modal-dialog-scrollable { height: calc(100% - 1.2rem); }
  .modal-dialog-scrollable .modal-content { max-height: 100%; }
  .modal-lg, .modal-xl { max-width: calc(100% - 1.2rem); }
}
/* Modales propios del sistema de Activos (afs-*) */
.afs-modal-ov .afs-modal,
.afs-confirm-ov .afs-confirm {
  max-height: 90vh;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.afs-modal .afs-modal-body { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
/* Editor de fotos: el escenario nunca crece más que la pantalla */
.afs-editor-ov, .afs-cam-ov { overflow: hidden; }
/* ====  FIN SCROLL MODALES  ==== */

/* ============================================================
   ====  MODAL DE CONFIRMACIÓN UNIFICADO (ambos sistemas)  ====
   Mismo estilo que el modal de eliminar de Activos. Usa tokens
   del sistema para funcionar en SCA y Activos, claro y oscuro.
   ============================================================ */
.pase-confirm-ov {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; padding: 1rem;
}
.pase-confirm-ov.open { display: flex; animation: dsFadeIn 0.18s ease; }
.pase-confirm {
  background: var(--bg-card, var(--afs-card-bg, #fff)); color: var(--text-primary, var(--afs-text, #1a1a2e));
  width: 100%; max-width: 430px; border-radius: 18px; overflow: hidden;
  box-shadow: 0 16px 50px rgba(0,0,0,0.3);
  animation: dsPopIn 0.24s cubic-bezier(0.16,1,0.3,1);
}
.pase-confirm-head { display: flex; align-items: flex-start; gap: 0.8rem; padding: 1.2rem 1.2rem 0.6rem; }
.pase-confirm-head .ico {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  background: rgba(220,38,38,0.12); color: #dc2626;
}
.pase-confirm-head .ico.warn { background: rgba(217,119,6,0.14); color: #d97706; }
.pase-confirm-head .ico.info { background: var(--pase-primary-subtle, rgba(21,101,192,0.12)); color: var(--pase-primary, #1565C0); }
.pase-confirm-head .ico.ok { background: rgba(34,197,94,0.14); color: #16a34a; }
.pase-confirm-head h3 { margin: 0; font-size: 1.08rem; font-weight: 700; line-height: 1.25; }
.pase-confirm-head .sub { font-size: 0.75rem; color: var(--text-muted, var(--afs-muted, #6b7280)); margin-top: 0.15rem; }
.pase-confirm-body { padding: 0.4rem 1.2rem 0.6rem; font-size: 0.9rem; color: var(--text-secondary, var(--afs-muted, #555)); line-height: 1.5; }
.pase-confirm-opts { padding: 0.6rem 1.2rem 0.3rem; display: flex; flex-direction: column; gap: 0.55rem; }
.pase-opt {
  display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; text-align: left;
  padding: 0.85rem 0.95rem; border-radius: 13px; cursor: pointer;
  border: 1.5px solid var(--border-color, var(--afs-border, #e0e0e0));
  background: var(--bg-input, var(--afs-input-bg, #f9fafb));
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.pase-opt:hover { transform: translateY(-1px); }
.pase-opt .oi { font-size: 1.3rem; flex-shrink: 0; margin-top: 0.05rem; }
.pase-opt .ot { font-weight: 700; font-size: 0.92rem; color: var(--text-primary, var(--afs-text, #1a1a2e)); display: block; }
.pase-opt .os { font-size: 0.74rem; color: var(--text-muted, var(--afs-muted, #777)); margin-top: 0.12rem; display: block; }
.pase-opt.warn:hover { border-color: #d97706; background: rgba(217,119,6,0.07); }
.pase-opt.warn .oi { color: #d97706; }
.pase-opt.danger:hover { border-color: #dc2626; background: rgba(220,38,38,0.07); }
.pase-opt.danger .oi { color: #dc2626; }
.pase-opt.primary:hover { border-color: var(--pase-primary, #1565C0); background: var(--pase-primary-subtle, rgba(21,101,192,0.07)); }
.pase-opt.primary .oi { color: var(--pase-primary, #1565C0); }
.pase-confirm-foot { padding: 0.6rem 1.2rem 1.2rem; display: flex; gap: 0.6rem; }
.pase-confirm-foot .pase-cbtn {
  flex: 1; padding: 0.75rem; border-radius: 12px; border: none; font-weight: 700; font-size: 0.92rem;
  cursor: pointer; transition: background 0.15s, transform 0.12s; display: inline-flex;
  align-items: center; justify-content: center; gap: 0.4rem;
}
.pase-confirm-foot .pase-cbtn:active { transform: scale(0.97); }
.pase-cbtn-cancel { background: var(--bg-input, var(--afs-input-bg, #eee)); color: var(--text-secondary, var(--afs-text, #555)); }
.pase-cbtn-cancel:hover { background: var(--border-color, var(--afs-border, #ddd)); }
.pase-cbtn-danger { background: #dc2626; color: #fff; }
.pase-cbtn-danger:hover { background: #b91c1c; }
.pase-cbtn-primary { background: var(--pase-primary, #1565C0); color: #fff; }
.pase-cbtn-primary:hover { background: var(--pase-primary-dark, #0D47A1); }

@media (max-width: 480px) {
  .pase-confirm { max-width: calc(100% - 1rem); }
}
@media (prefers-reduced-motion: reduce) {
  .pase-confirm-ov.open, .pase-confirm { animation: none !important; }
}
/* ====  FIN MODAL CONFIRMACIÓN UNIFICADO  ==== */

/* ============================================================
   ====  ALINEACIÓN GLOBAL DE FORMULARIOS E INPUTS  ====
   Centra y alinea formularios, inputs y elementos de forma
   coherente en todas las vistas y tamaños de pantalla.
   ============================================================ */
/* Inputs/selects/textarea: misma altura y alineación vertical del texto */
.form-control, .form-select, .op-input, .op-select, .afs-form input, .afs-form select {
  line-height: 1.4;
}
/* Filas de formulario: alinear inputs por la base aunque los labels tengan
   distinta cantidad de líneas (solo columnas que contienen un label). */
.row.g-3 > [class*="col-"]:has(> .form-label),
.row.g-3 > [class*="col-"]:has(> label) { display: flex; flex-direction: column; }
.row.g-3 > [class*="col-"]:has(> .form-label) .form-control,
.row.g-3 > [class*="col-"]:has(> .form-label) .form-select { margin-top: auto; }
/* Labels: espaciado uniforme */
.form-label { margin-bottom: 0.35rem; font-weight: 600; }

/* Botones de acción de formularios: alineados y con buen gap */
.form-actions, .d-flex.gap-2 { align-items: center; }

/* Tarjetas de formulario centradas con ancho de lectura cómodo (escritorio) */
@media (min-width: 992px) {
  .form-card-centered, .pase-card.form-card-centered { max-width: 760px; margin-left: auto; margin-right: auto; }
}

/* Inputs a ancho completo dentro de sus columnas (evita inputs "flotando") */
.form-control, .form-select, textarea.form-control { width: 100%; }

/* En móvil: que los grupos de botones de formulario se apilen y ocupen ancho */
@media (max-width: 575.98px) {
  .modal-footer .d-flex, .form-actions { flex-wrap: wrap; }
  .modal-footer .btn, .form-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   ====  SCROLLBAR BONITA (ambos sistemas)  ====
   ============================================================ */
* { scrollbar-width: thin; scrollbar-color: var(--gray-400, #bbb) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--gray-400, #bbb); border-radius: 10px;
  border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--gray-500, #999); background-clip: content-box; }
[data-theme="dark"] * { scrollbar-color: #555 transparent; }
[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #555; background-clip: content-box; }
[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: #6a6a6a; background-clip: content-box; }
/* Scroll suave general */
html { scroll-behavior: smooth; }
/* ====  FIN ALINEACIÓN + SCROLLBAR  ==== */

/* ============================================================
   ====  PULIDO FINAL: MODALES, LOGINS, SELECTOR, FORMS  v6  ====
   ============================================================ */

/* ---- Backdrop de TODOS los modales: más desenfoque y oscurecido ---- */
.modal-backdrop.show { opacity: 1 !important; background: rgba(10,20,40,0.55) !important;
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }

/* ---- Entrada animada de cualquier modal Bootstrap (estilo Activos) ---- */
.modal.fade .modal-dialog {
  transform: translateY(16px) scale(0.96);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease;
}
.modal.show .modal-dialog { transform: none; }
.modal-content {
  border: none !important; border-radius: 18px !important;
  box-shadow: 0 18px 55px rgba(0,0,0,0.32) !important;
  animation: dsPopIn 0.28s cubic-bezier(0.16,1,0.3,1);
}

/* ---- Modales pequeños de confirmación (modal-sm): look de Activos ---- */
.modal-sm .modal-content { border-radius: 20px !important; }
.modal-sm .btn { border-radius: 12px !important; font-weight: 600; transition: transform 0.12s, filter 0.15s; }
.modal-sm .btn:active { transform: scale(0.97); }
.modal-sm .btn-warning { background: #d97706; border-color: #d97706; color: #fff; }
.modal-sm .btn-warning:hover { background: #b45309; border-color: #b45309; filter: brightness(1.02); }
.modal-sm .btn-danger { background: #dc2626; border-color: #dc2626; }
.modal-sm .btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }

/* ---- LOGINS: tarjeta con más profundidad y entrada suave ---- */
.login-box, .login-card, .login-container, .auth-card {
  animation: dsPopIn 0.4s cubic-bezier(0.16,1,0.3,1) both;
}
.btn-login {
  transition: transform 0.14s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s, filter 0.15s !important;
}
.btn-login:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(13,71,161,0.35) !important; }
.btn-login:active { transform: scale(0.97); }

/* ---- SELECTOR DE SISTEMAS: tarjetas con hover más vivo ---- */
.ld-opt, .system-card, .selector-card {
  transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), box-shadow 0.22s, border-color 0.18s;
}
.ld-opt:hover, .system-card:hover, .selector-card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}

/* ---- FORMULARIOS: foco más visible y campos con micro-transición ---- */
.form-control, .form-select, .op-input, .op-select, .afs-form input, .afs-form select {
  transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}
.form-control:focus, .form-select:focus {
  box-shadow: 0 0 0 3px rgba(21,101,192,0.18) !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  box-shadow: 0 0 0 3px rgba(66,165,245,0.25) !important;
}
/* Tarjetas de contenido: entrada suave global */
.pase-card, .op-form-card, .afs-form-card { animation: cardEnter 0.35s cubic-bezier(0.16,1,0.3,1) both; }

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog, .modal-content, .login-box, .login-card,
  .ld-opt, .pase-card, .op-form-card, .afs-form-card { animation: none !important; transition: none !important; }
}
/* ====  FIN PULIDO FINAL  ==== */

/* Modal con scale */
.modal.fade .modal-dialog {
  transform: scale(0.94) translateY(-12px);
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), opacity 0.2s ease;
}
.modal.show .modal-dialog {
  transform: scale(1) translateY(0);
}

/* ===== BOTONES TOUCH-FRIENDLY (mín 44×44px) ===== */
.btn-icon-sm {
  min-width: 36px; min-height: 36px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  transition: all var(--transition-fast);
}
@media (max-width: 767.98px) {
  .btn-icon-sm { min-width: 44px; min-height: 44px; }
  .btn-sm { min-height: 38px; padding: 0.45rem 0.85rem; font-size: 0.82rem; }
  .btn { min-height: 40px; }
  .afs-chk { width: 28px; height: 28px; }
}

/* ===== RESPONSIVE TABLET (768px–991px) ===== */
@media (min-width: 768px) and (max-width: 991.98px) {
  .page-content { padding: 1.25rem; }
  .stat-value { font-size: 1.5rem; }
  .pase-card-header { padding: 0.85rem 1rem; }
  .pase-card-body   { padding: 1rem; }
  .pase-table th    { font-size: 0.68rem; padding: 0.6rem 0.7rem !important; }
  .pase-table td    { font-size: 0.82rem; padding: 0.5rem 0.7rem !important; }
  .afs-page         { max-width: 100%; padding: 0.75rem 1rem; }
}

/* ===== RESPONSIVE MÓVIL MEJORADO ===== */
@media (max-width: 575.98px) {
  /* Modales full-width en móvil */
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100vw - 1rem);
  }
  .modal-lg, .modal-xl { max-width: calc(100vw - 1rem); }
  .modal-content { border-radius: 20px; }
  .modal-header  { padding: 1rem 1.25rem 0.75rem; }
  .modal-body    { padding: 1rem 1.25rem; }
  .modal-footer  { padding: 0.75rem 1.25rem 1rem; }

  /* Topbar más compacta */
  .topbar { padding: 0 0.75rem; height: 56px; }
  .topbar-controls { gap: 0.35rem; }
  .topbar-theme-btn, .topbar-notif-btn { width: 36px; height: 36px; font-size: 1rem; }
  .topbar-logout-btn { padding: 0 0.5rem; font-size: 0; width: 36px; height: 36px; border-radius: 50%; }
  .topbar-logout-btn i { font-size: 1rem; margin: 0; }
  .topbar-switch-btn span.d-md-inline { display: none !important; }

  /* Paginador en móvil */
  .pase-pager__btn, .pase-pager__page { min-width: 38px; height: 38px; border-radius: 10px; }

  /* Page header */
  .page-header { margin-bottom: 1rem; }
  .page-header h1 { font-size: 1.1rem; }

  /* Stat cards: 2 columnas compactas */
  .stat-card { padding: 0.75rem 0.85rem; gap: 0.65rem; }
  .stat-value { font-size: 1.35rem; }
  .stat-icon  { width: 36px; height: 36px; font-size: 1rem; }
  .stat-label { font-size: 0.72rem; }

  /* Formularios — evitar zoom en iOS */
  .form-control, .form-select, textarea.form-control {
    font-size: 1rem !important;
  }
  .search-input { font-size: 1rem !important; min-width: 0; width: 100%; }

  /* Tabla: scroll horizontal suave */
  .table-responsive { border-radius: var(--radius-md); -webkit-overflow-scrolling: touch; }

  /* Cards */
  .pase-card-header { padding: 0.75rem 1rem; }
  .pase-card-body   { padding: 0.85rem 1rem; }

  /* Activos */
  .afs-page { padding: 0.5rem; }
  .afs-topbar { padding: 0.5rem 0.65rem; }
}

/* ===== MEJORA SIDEBAR MOBILE ===== */
@media (max-width: 991.98px) {
  .sidebar {
    border-right: none;
    box-shadow: none;
  }
  .sidebar.show {
    box-shadow: 8px 0 32px rgba(0,0,0,0.25);
  }
}

/* ===== SHIMMER / SKELETON ===== */
.skeleton {
  background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
  background-size: 400px 100%;
  animation: shimmerLoad 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
  display: inline-block;
}
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-300) 50%, var(--gray-200) 75%);
  background-size: 400px 100%;
}

/* ===== MEJORA TABLA: sticky header visible en scroll ===== */
.pase-table-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
}
.pase-table-wrap .pase-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--bg-table-header);
  box-shadow: 0 1px 0 var(--gray-200);
}

/* ===== FOCUS VISIBLE MEJORADO ===== */
:focus-visible {
  outline: 2px solid var(--pase-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--pase-primary);
  outline-offset: 3px;
}

/* ===== HOVER EFFECTS MEJORADOS ===== */
.sidebar .nav-link {
  position: relative;
  overflow: hidden;
}
.sidebar .nav-link::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px; height: 60%;
  background: var(--pase-orange);
  border-radius: 0 3px 3px 0;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.sidebar .nav-link.active::before,
.sidebar .nav-link:hover::before {
  transform: translateY(-50%) scaleY(1);
}

/* ===== STAT CARD: valor animado al cambiar ===== */
@keyframes statBump {
  0%   { transform: scale(1);    }
  40%  { transform: scale(1.12); color: var(--pase-primary); }
  100% { transform: scale(1);    }
}
.stat-value.updating { animation: statBump 0.35s cubic-bezier(0.34,1.56,0.64,1); }

/* ===== SCROLL SUAVE GLOBAL ===== */
html { scroll-behavior: smooth; }

/* ===== TOPBAR: sombra dinámica al hacer scroll ===== */
.topbar.scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
}

/* ===== FILTROS: chips estilo pill ===== */
.filter-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.3rem 0.85rem;
  border-radius: 20px;
  border: 1.5px solid var(--gray-200);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: all 0.15s ease;
  user-select: none;
}
.filter-chip:hover { border-color: var(--pase-primary); color: var(--pase-primary); background: var(--pase-primary-subtle); }
.filter-chip.active { background: var(--pase-primary); border-color: var(--pase-primary); color: #fff; box-shadow: 0 2px 8px rgba(21,101,192,0.25); }
[data-theme="dark"] .filter-chip { background: var(--bg-card); border-color: var(--border-color); color: var(--text-muted); }
[data-theme="dark"] .filter-chip:hover { border-color: var(--pase-primary); color: var(--pase-primary); background: rgba(66,165,245,0.1); }
[data-theme="dark"] .filter-chip.active { background: var(--pase-primary); border-color: var(--pase-primary); color: #fff; }

/* ===== TOPBAR SWITCH BTN: más visible ===== */
.topbar-switch-btn {
  gap: 0.4rem;
  padding: 0.38rem 0.8rem;
  border-radius: 10px;
  font-size: 0.78rem;
}
@media (max-width: 575.98px) {
  .topbar-switch-btn { padding: 0.3rem 0.5rem; }
  .topbar-switch-btn .switch-label { display: none; }
}

/* ===== AFS LAYOUT: tablet ===== */
@media (min-width: 576px) and (max-width: 991.98px) {
  .afs-page { max-width: 100%; padding: 0.75rem 1.25rem; }
  .afs-topbar { padding: 0.6rem 1.25rem; }
}
@media (min-width: 992px) {
  .afs-page { max-width: 1100px; }
}

/* ===== AFS ITEMS: info grid responsive ===== */
.afs-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
@media (min-width: 480px) { .afs-info-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 640px) { .afs-info-grid { grid-template-columns: repeat(4, 1fr); } }

/* ===== AFS FOTO GRID ===== */
.afs-foto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.5rem;
}
@media (min-width: 480px) { .afs-foto-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }

/* ===== DARK: AFS topbar ===== */
[data-theme="dark"] .afs-topbar {
  background: linear-gradient(135deg, #0a1e3d, #0d47a1) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
}

/* ===== ALERTAS - MARK ALL READ ===== */
.op-alert-card.leida {
  opacity: 0.6;
}

/* ===== MODAL FLUIDITY ===== */
.modal.fade .modal-dialog {
  transform: scale(0.95) translateZ(0);
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s ease;
}
.modal.show .modal-dialog {
  transform: scale(1) translateZ(0);
}

/* ===== PAGINADOR ===== */
.pase-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.75rem 0 0.25rem;
  flex-wrap: wrap;
}
.pase-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1.5px solid var(--border-color, #E0E0E0);
  background: var(--bg-card, #fff);
  color: var(--text-secondary, #616161);
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.18s ease;
  cursor: pointer;
}
.pase-pager__btn:hover {
  border-color: var(--pase-primary, #1565C0);
  color: var(--pase-primary, #1565C0);
  background: var(--pase-primary-subtle, #E3F2FD);
  transform: scale(1.06);
}
.pase-pager__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px; height: 36px;
  padding: 0 0.5rem;
  border-radius: 10px;
  border: 1.5px solid var(--border-color, #E0E0E0);
  background: var(--bg-card, #fff);
  color: var(--text-secondary, #616161);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s ease;
  cursor: pointer;
}
.pase-pager__page:hover {
  border-color: var(--pase-primary, #1565C0);
  color: var(--pase-primary, #1565C0);
  background: var(--pase-primary-subtle, #E3F2FD);
}
.pase-pager__page--active {
  background: var(--pase-primary, #1565C0);
  border-color: var(--pase-primary, #1565C0);
  color: #fff;
  box-shadow: 0 3px 10px rgba(21,101,192,0.35);
  cursor: default;
}
.pase-pager__page--active:hover {
  background: var(--pase-primary, #1565C0);
  color: #fff;
  transform: none;
}
[data-theme="dark"] .pase-pager__btn,
[data-theme="dark"] .pase-pager__page {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .pase-pager__btn:hover,
[data-theme="dark"] .pase-pager__page:hover {
  border-color: var(--pase-primary) !important;
  color: var(--pase-primary) !important;
  background: rgba(66,165,245,0.1) !important;
}
[data-theme="dark"] .pase-pager__page--active {
  background: var(--pase-primary) !important;
  border-color: var(--pase-primary) !important;
  color: #fff !important;
}

/* ===== MEJORAS GENERALES DE DISEÑO ===== */

/* Cards con hover más suave y sombra mejorada */
.pase-card {
  border: 1px solid var(--gray-100);
}
.pase-card:hover {
  border-color: rgba(21,101,192,0.12);
  box-shadow: 0 6px 24px rgba(21,101,192,0.09), 0 1px 4px rgba(0,0,0,0.05);
}

/* Stat cards: gradiente sutil en el fondo */
.stat-card {
  background: linear-gradient(135deg, #fff 70%, rgba(21,101,192,0.015) 100%);
}
.stat-card.green { background: linear-gradient(135deg, #fff 70%, rgba(21,101,192,0.03) 100%); }
.stat-card.yellow { background: linear-gradient(135deg, #fff 70%, rgba(255,193,7,0.04) 100%); }
.stat-card.red { background: linear-gradient(135deg, #fff 70%, rgba(244,67,54,0.04) 100%); }
.stat-card.blue { background: linear-gradient(135deg, #fff 70%, rgba(33,150,243,0.04) 100%); }

/* Mejora el topbar con una línea de acento */
.topbar {
  border-bottom: 1px solid var(--gray-200);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.03);
}

/* Botón primario más pulido */
.btn-pase {
  background: linear-gradient(135deg, var(--pase-primary-mid), var(--pase-primary-dark));
  border: none;
  border-radius: var(--radius-md);
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.5rem 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 2px 8px rgba(13,71,161,0.25);
  cursor: pointer;
  text-decoration: none;
}
.btn-pase:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(13,71,161,0.35);
  color: #fff;
  text-decoration: none;
}
.btn-pase:active { transform: translateY(0) scale(0.98); }

/* Sidebar brand más compacto y elegante */
.sidebar-brand {
  background: rgba(0,0,0,0.08);
}

/* Formularios con radio más pronunciado */
.form-control, .form-select {
  border-radius: var(--radius-md);
  border-color: var(--gray-200);
  font-size: 0.88rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--pase-primary);
  box-shadow: 0 0 0 3px rgba(21,101,192,0.12);
}

/* Tabla con cabecera más definida */
.pase-table th {
  background: linear-gradient(to bottom, var(--gray-50), var(--gray-100));
  letter-spacing: 0.08em;
}

/* Badges con borde sutil */
.custom-badge,
[class^="badge-estado-"],
[class^="badge-venc-"],
[class^="badge-prior-"],
[class^="badge-tipo-"],
[class^="badge-rol-"] {
  border-radius: 6px;
  font-size: 0.72rem;
  padding: 0.2em 0.6em;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Page header más elegante */
.page-header {
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1.5px solid var(--gray-100);
}
.page-header h1 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

/* ===== ACTIVOS: mejoras de items y filtros ===== */
.afs-item {
  border-radius: 16px;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s, transform 0.15s;
}
.afs-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(13,71,161,0.10);
}
.afs-filter-chip {
  border-radius: 20px;
  transition: all 0.18s ease;
  font-size: 0.73rem;
  padding: 0.35rem 0.9rem;
}
.afs-filter-chip.active {
  box-shadow: 0 2px 8px rgba(13,71,161,0.25);
}
.afs-search input {
  border-radius: 14px;
}
.afs-thumb {
  border-radius: 11px;
}
.afs-thumb-none {
  border-radius: 11px;
}
.afs-chk {
  border-radius: 8px;
}

/* ===== DARK MODE para mejoras ===== */
[data-theme="dark"] .stat-card {
  background: var(--bg-card) !important;
}
[data-theme="dark"] .page-header {
  border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .page-header h1 {
  color: var(--text-primary) !important;
}

/* ===== Selector de codigo de pais (BUSCABLE) en campos de telefono ===== */
.tel-cc-wrap { display:flex; align-items:stretch; gap:0; width:100%; }
/* botón COMPACTO con el prefijo (deja la mayor parte del ancho al número) */
.tel-cc-btn {
    flex:0 0 auto; display:inline-flex; align-items:center; gap:0.25rem; cursor:pointer;
    padding:0 0.55rem; font-size:0.9rem; white-space:nowrap; line-height:1;
    border:1.5px solid var(--afs-border); border-right:none; border-radius:10px 0 0 10px;
    background:var(--afs-input-bg); color:var(--afs-text);
}
.tel-cc-btn .bi { font-size:0.7rem; opacity:0.7; }
.tel-cc-btn .tel-cc-code { font-weight:600; }
.tel-cc-wrap .tel-cc-num { flex:1 1 auto; min-width:0; border-radius:0 10px 10px 0 !important; }
/* compatibilidad Bootstrap (form-control) */
.tel-cc-wrap .tel-cc-num.form-control { border-top-left-radius:0; border-bottom-left-radius:0; }

/* Panel desplegable con buscador (se monta en <body>) */
.tel-cc-panel {
    position:fixed; z-index:30000; display:none; max-width:92vw;
    background:var(--afs-card-bg,#fff); color:var(--afs-text,#222);
    border:1px solid var(--afs-border,#ccc); border-radius:12px;
    box-shadow:0 12px 36px rgba(0,0,0,0.28); overflow:hidden;
}
.tel-cc-panel.open { display:block; animation:dsFadeIn 0.14s ease; }
.tel-cc-search { display:flex; align-items:center; gap:0.45rem; padding:0.55rem 0.7rem; border-bottom:1px solid var(--afs-border,#eee); }
.tel-cc-search .bi { opacity:0.6; }
.tel-cc-search input { flex:1; border:none; outline:none; background:transparent; color:inherit; font-size:0.9rem; }
.tel-cc-list { max-height:260px; overflow-y:auto; }
.tel-cc-item { display:flex; align-items:center; gap:0.6rem; padding:0.55rem 0.8rem; cursor:pointer; font-size:0.88rem; }
.tel-cc-item:hover { background:rgba(13,71,161,0.08); }
.tel-cc-item.on { background:rgba(13,71,161,0.14); font-weight:600; }
.tel-cc-item .cc { min-width:48px; font-weight:600; color:var(--afs-primary,#1565C0); }
.tel-cc-item .nm { color:var(--afs-muted,#666); }
.tel-cc-empty { padding:1rem; text-align:center; color:var(--afs-muted,#999); font-size:0.85rem; }
[data-theme="dark"] .tel-cc-panel { background:#1e293b; color:#e2e8f0; border-color:#334155; }
[data-theme="dark"] .tel-cc-item:hover { background:rgba(66,165,245,0.14); }
[data-theme="dark"] .tel-cc-item .nm { color:#94a3b8; }