@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   DESIGN TOKENS — Variables del sistema de diseño
   ============================================================ */
:root {
    /* Paleta de acento */
    --accent:         #06b6d4;
    --accent-hover:   #0891b2;
    --accent-light:   rgba(6, 182, 212, 0.1);
    --accent-cyan:    #06b6d4;
    --accent-neon:    #10b981;
    --accent-violet:  #8b5cf6;
    --accent-yellow:  #f59e0b;
    --accent-pink:    #ec4899;
    --primary:        #06b6d4;

    /* Semántica de color */
    --success:       #10b981;
    --success-light: rgba(16, 185, 129, 0.1);
    --danger:        #ef4444;
    --danger-light:  rgba(239, 68, 68, 0.1);
    --warning:       #f59e0b;
    --warning-light: rgba(245, 158, 11, 0.1);
    --info:          #8b5cf6;
    --info-light:    rgba(139, 92, 246, 0.1);

    /* Fondos — Modo oscuro (por defecto) */
    --bg-body:      #0f0f0f;
    --bg-card:      #171717;
    --bg-elevated:  #1e1e1e;
    --bg-tertiary:  #252525;

    /* Texto */
    --text-main:   #efefef;
    --text-muted:  #9ca3af;
    --text-subtle: #6b7280;

    /* Bordes */
    --border:        #2a2a2a;
    --border-strong: #383838;

    /* Sombras calibradas para oscuro */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.3);
    --shadow:    0 4px 16px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.4);
    --shadow-xl: 0 24px 64px rgba(0,0,0,0.7), 0 8px 24px rgba(0,0,0,0.5);

    /* Sidebar */
    --sidebar-bg:            #0f0f0f;
    --sidebar-border:        #1e1e1e;
    --sidebar-text:          #6b7280;
    --sidebar-text-hover:    #e5e7eb;
    --sidebar-active-text:   #06b6d4;
    --sidebar-hover-bg:      rgba(255,255,255,0.04);
    --sidebar-active-bg:     rgba(6,182,212,0.1);
    --sidebar-active-border: #06b6d4;

    /* Layout */
    --sidebar-w:      66px;
    --sidebar-w-open: 248px;
    --topbar-h:       60px;

    /* Radios */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* Espaciado */
    --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;  --sp-4:  16px;
    --sp-5:  20px;  --sp-6:  24px;  --sp-8:  32px;  --sp-10: 40px;
    --sp-12: 48px;

    /* Tipografía */
    --font-xs:   11px;  --font-sm:   12px;  --font-base: 14px;
    --font-md:   15px;  --font-lg:   17px;  --font-xl:   20px;
    --font-2xl:  26px;  --font-3xl:  34px;

    /* Curvas de animación */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast:    100ms;
    --dur-normal:  200ms;
    --dur-slow:    360ms;

    /* Z-index */
    --z-base:     1;    --z-dropdown: 100;  --z-sticky: 200;
    --z-overlay:  500;  --z-modal:    2000; --z-toast:  9000;
    --z-lock:     9999999;
}

/* ============================================================
   MODO CLARO
   ============================================================ */
html:not(.dark-mode) {
    --bg-body:      #f4f6f8;
    --bg-card:      #ffffff;
    --bg-elevated:  #eef1f5;
    --bg-tertiary:  #e4e8ee;
    --text-main:    #111827;
    --text-muted:   #6b7280;
    --text-subtle:  #9ca3af;
    --border:       #e5e7eb;
    --border-strong:#d1d5db;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0 2px 6px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
    --shadow:    0 4px 12px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.09), 0 4px 10px rgba(0,0,0,0.05);
    --shadow-xl: 0 24px 48px rgba(0,0,0,0.11), 0 8px 18px rgba(0,0,0,0.06);
    --sidebar-bg:            #ffffff;
    --sidebar-border:        #e5e7eb;
    --sidebar-text:          #6b7280;
    --sidebar-text-hover:    #111827;
    --sidebar-active-text:   #0891b2;
    --sidebar-hover-bg:      rgba(0,0,0,0.04);
    --sidebar-active-bg:     rgba(6,182,212,0.08);
    --sidebar-active-border: #06b6d4;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

html {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-body);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: inherit;
    background: var(--bg-body);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    display: flex;
    height: 100vh;
    overflow: hidden;
    transition: background-color var(--dur-normal, 200ms) ease,
                color var(--dur-normal, 200ms) ease;
}

/* ============================================
   🎨 SIDEBAR MODERNO CON GLASSMORPHISM
   ============================================ */
.sidebar { 
    width: var(--sidebar-w, 66px); 
    background: var(--sidebar-bg); 
    display: flex; 
    flex-direction: column; 
    transition: width var(--dur-slow, 360ms) var(--ease-out, ease),
                background-color var(--dur-normal, 200ms) ease; 
    z-index: 100; 
    flex-shrink: 0; 
    overflow: hidden; 
    white-space: nowrap; 
    border-right: 1px solid var(--sidebar-border);
}
.sidebar:hover { 
    width: 250px;
}
.sidebar-logo { 
    position: relative; 
    height: 58px; 
    margin: 15px 0 25px 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 800; 
    letter-spacing: 1px; 
}
.sidebar .logo-short, .sidebar .logo-full { 
    position: relative; 
    z-index: 1; 
    transition: opacity 0.2s ease; 
    object-fit: contain; 
}
.logo-short { 
    position: absolute; 
    font-size: 28px; 
    transition: 0.3s opacity; 
    opacity: 1; 
    height: 80px; 
    width: auto; 
    pointer-events: none;
}
.logo-full { 
    position: absolute; 
    font-size: 28px; 
    transition: 0.3s opacity; 
    opacity: 0; 
    height: 80px; 
    width: auto; 
    max-width: 248px; 
    pointer-events: none;
}
.sidebar:hover .logo-short { opacity: 0; }
.sidebar:hover .logo-full { opacity: 1; transition-delay: 0.1s; }
.nav-item { 
    color: var(--sidebar-text); 
    text-decoration: none; 
    padding: 11px 0; 
    margin: 2px 6px;
    width: calc(100% - 12px);
    display: flex; 
    align-items: center; 
    transition: background var(--dur-fast, 100ms) ease,
                color var(--dur-fast, 100ms) ease,
                border-color var(--dur-fast, 100ms) ease; 
    cursor: pointer; 
    border-radius: var(--radius-sm, 6px);
    border-left: 2px solid transparent; 
    box-sizing: border-box; 
    position: relative;
}
.nav-item:hover { 
    background: var(--sidebar-hover-bg); 
    color: var(--sidebar-text-hover); 
    border-left-color: var(--accent);
}
.nav-item.active { 
    background: var(--sidebar-active-bg); 
    color: var(--sidebar-active-text, var(--accent)); 
    border-left-color: var(--sidebar-active-border, var(--accent));
    font-weight: 600;
}
.nav-icon { 
    min-width: 70px; 
    text-align: center; 
    font-size: 20px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-shrink: 0;
}
.nav-text { 
    font-size: 15px; 
    opacity: 0; 
    transition: opacity 0.3s ease; 
    font-weight: 500; 
    visibility: hidden;
    position: absolute;
    left: 70px;
    white-space: nowrap;
}
.sidebar:hover .nav-text { 
    opacity: 1; 
    visibility: visible;
    transition-delay: 0.1s; 
}

/* --- LAYOUT --- */
.content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.top-bar { height: var(--topbar-h, 60px); background: var(--bg-card); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-6, 24px); gap: var(--sp-4, 16px); flex-shrink: 0; transition: background-color var(--dur-normal, 200ms) ease, border-color var(--dur-normal, 200ms) ease; }
.top-bar h3 { margin: 0; font-weight: 600; font-size: 18px; }
.main-view { flex: 1; display: flex; overflow: hidden; padding: 20px; gap: 20px; }
.left-panel { flex: 1; overflow-y: auto; padding-right: 5px; }
.right-panel { width: 380px; background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); display: flex; flex-direction: column; box-shadow: var(--shadow); overflow: hidden; transition: background-color var(--dur-normal, 200ms) ease, border-color var(--dur-normal, 200ms) ease; flex-shrink: 0; }

/* --- GRID & CARDS --- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.card-base { background: var(--bg-card); border-radius: var(--radius); padding: var(--sp-4, 16px); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: transform var(--dur-fast, 100ms) var(--ease-out, ease), box-shadow var(--dur-fast, 100ms) ease, border-color var(--dur-fast, 100ms) ease; position: relative; min-height: 100px; text-align: center; }
.card-base:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); }
.card-base h3, .card-base h4 { margin: 0 0 5px 0; font-size: 16px; color: var(--text-main); }
.card-base small { color: var(--text-muted); font-size: 13px; }

/* Estados de Mesas — definidos por página en index.css */
.status-reserved { border-bottom: 4px solid var(--warning); background: rgba(245, 158, 11, 0.05); }

/* --- FORMULARIOS Y CAJAS --- */
.box { background: var(--bg-card); padding: var(--sp-6, 24px); border-radius: var(--radius); margin-bottom: var(--sp-5, 20px); box-shadow: var(--shadow-sm); border: 1px solid var(--border); transition: background-color var(--dur-normal, 200ms) ease, border-color var(--dur-normal, 200ms) ease; }
input, select, textarea {
    width: 100%; padding: 10px var(--sp-4, 16px); margin-bottom: var(--sp-4, 16px);
    border: 1px solid var(--border); border-radius: var(--radius-sm, 6px);
    box-sizing: border-box; font-family: inherit; font-size: var(--font-base, 14px);
    background: var(--bg-body); color: var(--text-main); outline: none;
    transition: border-color var(--dur-fast, 100ms) ease, box-shadow var(--dur-fast, 100ms) ease,
                background-color var(--dur-normal, 200ms) ease;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}
input::placeholder, textarea::placeholder { color: var(--text-subtle, #6b7280); }
select option { background: var(--bg-card); color: var(--text-main); }

/* ============================================
   🖘 BOTONES PREMIUM CON EFECTOS VIBRANTES
   ============================================ */
.btn { 
    padding: 9px 18px; 
    border: none; 
    border-radius: var(--radius-sm, 8px); 
    cursor: pointer;
    font-family: inherit;
    font-weight: 600; 
    font-size: var(--font-base, 14px); 
    transition: transform var(--dur-fast, 100ms) var(--ease-out, ease),
                box-shadow var(--dur-fast, 100ms) var(--ease-out, ease),
                filter var(--dur-fast, 100ms); 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 7px;
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
    text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); opacity: 0.88; }

.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(6,182,212,0.3); }
.btn-primary:hover { box-shadow: 0 4px 16px rgba(6,182,212,0.4); filter: brightness(1.08); }

.btn-success { background: var(--success); color: #fff; box-shadow: 0 2px 8px rgba(16,185,129,0.3); }
.btn-success:hover { box-shadow: 0 4px 16px rgba(16,185,129,0.4); filter: brightness(1.08); }

.btn-danger { background: var(--danger); color: #fff; box-shadow: 0 2px 8px rgba(239,68,68,0.3); }
.btn-danger:hover { box-shadow: 0 4px 16px rgba(239,68,68,0.4); filter: brightness(1.08); }

.btn-warning { background: var(--warning); color: #0f0f0f; font-weight: 700; box-shadow: 0 2px 8px rgba(245,158,11,0.3); }
.btn-warning:hover { box-shadow: 0 4px 16px rgba(245,158,11,0.4); filter: brightness(1.06); }

.btn-info { background: var(--info, #8b5cf6); color: #fff; box-shadow: 0 2px 8px rgba(139,92,246,0.3); }
.btn-info:hover { box-shadow: 0 4px 16px rgba(139,92,246,0.4); filter: brightness(1.08); }

.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg-elevated); color: var(--accent); border-color: var(--accent); }

.btn-sm { padding: 6px 12px; font-size: var(--font-sm, 12px); gap: 5px; }
.btn-full { width: 100%; }

/* --- UTILIDADES --- */
.hidden { display: none !important; }
.row { display: flex; gap: 12px; align-items: center; }
.text-center { text-align: center; }
.badge { padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.bg-red { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.bg-green { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
html:not(.dark-mode) body:not(.dark-mode) .bg-red { background: #fee2e2; color: #991b1b; }
html:not(.dark-mode) body:not(.dark-mode) .bg-green { background: #d1fae5; color: #065f46; }

/* ============================================================
   SISTEMA DE MODALES — 3 TAMAÑOS + RESPONSIVE
   ============================================================ */

/* Overlay base: sin padding para permitir full-screen */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.8);
    display: flex; justify-content: center; align-items: center;
    z-index: 2000; visibility: hidden; opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    backdrop-filter: blur(4px);
    padding: 0;
}
.modal-overlay.active { visibility: visible; opacity: 1; }

/* Overlay centrado con padding (para modales pequeños/medianos) */
.modal-overlay.modal-centered { padding: 20px; box-sizing: border-box; }

/* Contenido base */
.modal-content {
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
    transform: translateY(14px) scale(0.99);
    opacity: 0;
    transition: transform var(--dur-normal, 200ms) var(--ease-spring, ease),
                opacity var(--dur-normal, 200ms) var(--ease-out, ease);
    border: 1px solid var(--border);
    display: flex; flex-direction: column;
    overflow: hidden;
    max-height: 95dvh;
}
.modal-overlay.active .modal-content { transform: translateY(0) scale(1); opacity: 1; }

/* Tamaño S — confirmaciones, notas rápidas */
.modal-sm { width: min(420px, 92vw); padding: 30px; }

/* Tamaño M — formularios estándar */
.modal-md { width: min(700px, 92vw); max-height: 90dvh; }

/* Tamaño full — operaciones complejas (cobrar, caja, turnos) */
.modal-full {
    width: 100dvw; height: 100dvh; max-height: 100dvh;
    border-radius: 0; box-shadow: none;
}

/* Layout interno estándar para modales con header/body/footer */
.modal-header {
    padding: 18px 24px; flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
}
.modal-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.modal-footer {
    padding: 16px 24px; flex-shrink: 0;
    border-top: 1px solid var(--border);
    display: flex; gap: 10px; justify-content: flex-end;
    background: var(--bg-elevated);
}

/* Responsive universal: sm y md pasan a full en móvil */
@media (max-width: 600px) {
    .modal-sm, .modal-md {
        width: 100dvw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    .modal-overlay.modal-centered { padding: 0 !important; }
}

/* ============================================================
   CORRECCIONES PROFUNDAS DE MODO OSCURO (UI FIXES)
   ============================================================ */

/* 1. Corregir el resaltado blanco de las filas (hover) en las tablas */
html.dark-mode .table-recent tr:hover,
body.dark-mode .table-recent tr:hover,
html.dark-mode tr:hover,
body.dark-mode tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Gris muy sutil, no blanco */
    color: var(--text-main) !important;
}

/* 2. Personalización del Scrollbar para que sea oscuro */
html.dark-mode ::-webkit-scrollbar,
body.dark-mode ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: var(--bg-body);
}

html.dark-mode ::-webkit-scrollbar-track,
body.dark-mode ::-webkit-scrollbar-track {
    background: var(--bg-body);
    border-radius: 10px;
}

html.dark-mode ::-webkit-scrollbar-thumb,
body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--border); /* Color del scroll acorde al borde oscuro */
    border-radius: 10px;
    border: 2px solid var(--bg-body);
}

html.dark-mode ::-webkit-scrollbar-thumb:hover,
body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Scrollbar para modo claro */
html:not(.dark-mode) ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
html:not(.dark-mode) ::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}
html:not(.dark-mode) ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
    border: 2px solid #f1f5f9;
}
html:not(.dark-mode) ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* 3. Overrides adicionales para paneles y componentes */
html.dark-mode .right-panel > div,
body.dark-mode .right-panel > div {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

html.dark-mode th,
body.dark-mode th {
    background-color: var(--bg-body) !important;
    color: var(--text-muted) !important;
    border-bottom-color: var(--border) !important;
}

html.dark-mode .box,
body.dark-mode .box {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
}

/* Botones de filtro específicos de reportes.html */
html.dark-mode .btn-filter,
body.dark-mode .btn-filter {
    background-color: transparent !important;
    color: var(--text-muted) !important;
    border-color: var(--border) !important;
}

/* 4. Inputs, selects y textareas en dark mode */
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea,
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus,
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2) !important;
}

/* 5. Modales y overlays en dark mode */
html.dark-mode .modal-overlay,
body.dark-mode .modal-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
}

html.dark-mode .modal-content,
body.dark-mode .modal-content {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

/* 6. Tablas en dark mode */
html.dark-mode table,
body.dark-mode table {
    border-color: var(--border) !important;
}

html.dark-mode td,
body.dark-mode td {
    border-bottom-color: var(--border) !important;
    color: var(--text-main) !important;
}

/* 7. Scrollbars específicos en dark mode */
html.dark-mode .left-panel::-webkit-scrollbar,
body.dark-mode .left-panel::-webkit-scrollbar,
html.dark-mode .kds-container::-webkit-scrollbar,
body.dark-mode .kds-container::-webkit-scrollbar,
html.dark-mode .kds-items::-webkit-scrollbar,
body.dark-mode .kds-items::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.dark-mode .left-panel::-webkit-scrollbar-track,
body.dark-mode .left-panel::-webkit-scrollbar-track,
html.dark-mode .kds-container::-webkit-scrollbar-track,
body.dark-mode .kds-container::-webkit-scrollbar-track,
html.dark-mode .kds-items::-webkit-scrollbar-track,
body.dark-mode .kds-items::-webkit-scrollbar-track {
    background: var(--bg-body);
    border-radius: 4px;
}

html.dark-mode .left-panel::-webkit-scrollbar-thumb,
body.dark-mode .left-panel::-webkit-scrollbar-thumb,
html.dark-mode .kds-container::-webkit-scrollbar-thumb,
body.dark-mode .kds-container::-webkit-scrollbar-thumb,
html.dark-mode .kds-items::-webkit-scrollbar-thumb,
body.dark-mode .kds-items::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

html.dark-mode .left-panel::-webkit-scrollbar-thumb:hover,
body.dark-mode .left-panel::-webkit-scrollbar-thumb:hover,
html.dark-mode .kds-container::-webkit-scrollbar-thumb:hover,
body.dark-mode .kds-container::-webkit-scrollbar-thumb:hover,
html.dark-mode .kds-items::-webkit-scrollbar-thumb:hover,
body.dark-mode .kds-items::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* 8. Toasts en dark mode */
html.dark-mode .toast,
body.dark-mode .toast {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

/* 9. Filtros y barras de herramientas en dark mode */
html.dark-mode .filter-bar,
body.dark-mode .filter-bar {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
}

/* 10. Tarjetas de plan en dark mode */
html.dark-mode .plan-card,
body.dark-mode .plan-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
}

html.dark-mode .plan-card.selected,
body.dark-mode .plan-card.selected {
    background: rgba(59, 130, 246, 0.1) !important;
}

/* 11. Cartas de producto/categoría en dark mode */
html.dark-mode .category-card,
body.dark-mode .category-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
}

html.dark-mode .product-card,
body.dark-mode .product-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
}

/* 12. Mesas en dark mode */
html.dark-mode .mesa-card,
body.dark-mode .mesa-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
}

/* 13. Métodos de pago en dark mode */
html.dark-mode .pay-method-card,
body.dark-mode .pay-method-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
}

/* 14. Top bars personalizadas en dark mode */
html.dark-mode .top-bar-kds,
body.dark-mode .top-bar-kds {
    background-color: var(--bg-card) !important;
    border-bottom-color: var(--border) !important;
}

html.dark-mode .top-bar-kds h2,
body.dark-mode .top-bar-kds h2 {
    color: var(--text-main) !important;
}

/* 15. KDS Cards en dark mode */
html.dark-mode .kds-card,
body.dark-mode .kds-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
}

html.dark-mode .kds-footer,
body.dark-mode .kds-footer {
    background-color: var(--bg-body) !important;
    border-top-color: var(--border) !important;
}

/* 16. Botones con fondo blanco en dark mode */
html.dark-mode .btn-mini:hover,
body.dark-mode .btn-mini:hover,
html.dark-mode .btn-anular:hover,
body.dark-mode .btn-anular:hover,
html.dark-mode .btn-details:hover,
body.dark-mode .btn-details:hover {
    color: #ffffff !important;
}

/* 17. Badges oscuros en dark mode */
html.dark-mode .badge,
body.dark-mode .badge {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-main) !important;
}

/* 18. Selects/options en dark mode */
html.dark-mode select option,
body.dark-mode select option {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
}

/* ============================================================
   SCROLLBAR GLOBAL (Modo Claro + Base)
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ============================================================
   BASE — Reset + Variables CSS
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-body);
    color: var(--text-main);
    display: flex;
    zoom: 80%;
}
/* Controles de zoom */
.zoom-controls {
    display: flex;
    gap: 4px;
    align-items: center;
}
.zoom-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 14px;
    font-weight: 600;
}
.zoom-btn:hover {
    background: var(--bg-body);
    color: var(--accent);
    border-color: var(--accent);
}
.zoom-btn i {
    font-size: 10px;
    margin-left: 2px;
}

/* ============================================================
   TÍTULOS Y ENCABEZADOS
   ============================================================ */
.box-title { font-size: 14px; font-weight: 700; color: var(--text-main); margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.page-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 10px; }

/* ============================================================
   MAIN-AREA — Contenedor scrolleable (páginas con sidebar)
   ============================================================ */
.main-area { flex: 1; padding: 24px; overflow-y: auto; background: var(--bg-body); box-sizing: border-box; animation: fadeInUp 0.22s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both; }

/* ============================================================
   MEJORAS VISUALES GLOBALES
   ============================================================ */


/* Panel con transición al mostrar/ocultar */
.panel { animation: fadeInPanel 0.18s ease; }
@keyframes fadeInPanel { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Badges de rol */
.role-admin { background: rgba(30, 64, 175, 0.1); color: #1e40af; }
.role-manager { background: rgba(180, 83, 9, 0.1); color: #b45309; }
.role-waiter { background: rgba(6, 95, 70, 0.1); color: #065f46; }
.role-kitchen { background: rgba(153, 27, 27, 0.1); color: #991b1b; }

/* Tabla — cabecera sticky global */
.table-sticky th { position: sticky; top: 0; z-index: 5; background: var(--bg-card); }

/* ============================================================
   RESPONSIVE — Sidebar móvil + hamburger
   ============================================================ */

/* Botón hamburger (oculto en escritorio) */
.hamburger-btn {
    display: none;
    width: 36px; height: 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
    margin-right: 8px;
}
.hamburger-btn:hover { background: var(--bg-body); color: var(--accent); }

/* Fondo oscuro al abrir sidebar en móvil */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99;
    backdrop-filter: blur(2px);
}
.sidebar-backdrop.active { display: block; }

@media (max-width: 768px) {
    /* Sidebar se convierte en overlay lateral */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        z-index: 100;
        width: 240px !important;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 25px rgba(0, 0, 0, 0.25);
    }
    .sidebar.mobile-open {
        transform: translateX(0);
    }
    /* Texto siempre visible cuando está abierto en móvil */
    .sidebar.mobile-open .nav-text { opacity: 1; }
    .sidebar.mobile-open .logo-short { opacity: 0; }
    .sidebar.mobile-open .logo-full  { opacity: 1; }

    /* Content ocupa todo el ancho */
    .content { width: 100%; }

    /* Hamburger visible */
    .hamburger-btn { display: flex; }

    /* Top-bar más compacta */
    .top-bar { padding: 0 12px; }
    .top-bar h3, .top-bar h1 { font-size: 15px !important; }

    /* Reducir padding general */
    .main-area { padding: 14px; }
    .box { padding: 16px; }
}

@media (max-width: 480px) {
    .topbar-restaurant { display: none; }
    .topbar-divider    { display: none; }
}

/* ============================================================
   TOP-BAR — Controles del lado derecho (inyectados por auth.js)
   ============================================================ */
.topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.topbar-restaurant {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 13px;
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.18);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
}

.topbar-divider {
    width: 1px;
    height: 22px;
    background: var(--border);
    flex-shrink: 0;
}

.topbar-icon-btn {
    width: 34px; height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.topbar-icon-btn:hover { background: var(--bg-body); color: var(--accent); border-color: var(--accent); }

.topbar-user {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 14px 4px 5px;
    border: 1px solid var(--border);
    border-radius: 30px;
    background: var(--bg-card);
    cursor: default;
    flex-shrink: 0;
}
.topbar-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.topbar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bloque :root duplicado eliminado — tokens en el :root principal al inicio del archivo */

/* ============================================================
   FASE 5 — PULIDO VISUAL ADMIN
   ============================================================ */

/* — Skeleton loader mejorado — */
@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-card) 25%,
        var(--bg-elevated) 50%,
        var(--bg-card) 75%
    );
    background-size: 800px 100%;
    animation: shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
    min-height: 18px;
}
.skeleton-text   { height: 14px; border-radius: 4px; margin-bottom: 8px; }
.skeleton-title  { height: 20px; border-radius: 6px; margin-bottom: 12px; width: 60%; }
.skeleton-circle { border-radius: 50%; }
.skeleton-card   { height: 80px; border-radius: var(--radius); margin-bottom: 12px; }

/* — Empty state — */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-12) var(--sp-6);
    text-align: center;
    color: var(--text-muted);
    gap: var(--sp-3);
}
.empty-state-icon {
    font-size: 48px;
    opacity: 0.25;
    margin-bottom: var(--sp-2);
}
.empty-state h3 {
    font-size: var(--font-lg);
    color: var(--text-main);
    font-weight: 700;
    margin: 0;
}
.empty-state p {
    font-size: var(--font-base);
    max-width: 320px;
    line-height: 1.55;
    margin: 0;
}

/* — Button loading state — */
.btn-loading {
    pointer-events: none;
    opacity: 0.75;
    position: relative;
}
.btn-loading::after {
    content: '';
    position: absolute;
    right: 14px; top: 50%;
    width: 14px; height: 14px;
    margin-top: -7px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* — Alert / inline notice — */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: 10px;
    font-size: var(--font-base);
    border: 1px solid transparent;
}
.alert-success { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.25); color: #059669; }
.alert-danger   { background: rgba(239,68,68,0.1);  border-color: rgba(239,68,68,0.25);  color: #dc2626; }
.alert-warning  { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.25); color: #d97706; }
.alert-info     { background: rgba(6,182,212,0.1);  border-color: rgba(6,182,212,0.25);  color: #0891b2; }
html:not(.dark-mode) .alert-success { color: #065f46; }
html:not(.dark-mode) .alert-danger  { color: #991b1b; }
html:not(.dark-mode) .alert-warning { color: #92400e; }
html:not(.dark-mode) .alert-info    { color: #164e63; }

/* — Divider — */
.divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--sp-5) 0;
}
.divider-label {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    color: var(--text-muted);
    font-size: var(--font-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: var(--sp-5) 0;
}
.divider-label::before, .divider-label::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--border);
}

/* — Icon button — */
.btn-icon {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
    flex-shrink: 0;
}
.btn-icon:hover { background: var(--bg-body); color: var(--accent); border-color: var(--accent); }
.btn-icon.btn-danger:hover { color: var(--danger); border-color: var(--danger); background: rgba(239,68,68,0.08); }

/* — Live pulse dot — */
.pulse-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--success);
    position: relative;
}
.pulse-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--success);
    opacity: 0.35;
    animation: pulse-ring 1.5s ease-out infinite;
}
@keyframes pulse-ring {
    0%   { transform: scale(0.8); opacity: 0.5; }
    100% { transform: scale(2);   opacity: 0; }
}

/* — Improved table — */
.table-axxia { width: 100%; border-collapse: collapse; font-size: var(--font-base); }
.table-axxia th {
    position: sticky; top: 0; z-index: 5;
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: var(--font-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.table-axxia td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    color: var(--text-main);
    vertical-align: middle;
}
.table-axxia tbody tr {
    transition: background var(--dur-fast);
}
.table-axxia tbody tr:hover { background: rgba(6,182,212,0.04); }
.table-axxia tbody tr:last-child td { border-bottom: none; }

/* — Form helpers — */
.form-label {
    display: block;
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: var(--sp-2);
}
.form-hint {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: calc(var(--sp-1) * -1);
    margin-bottom: var(--sp-3);
}

/* ============================================================
   FASE 6 — MICRO-ANIMACIONES
   ============================================================ */

/* Entrada de página */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);     }
}
.page-enter { animation: fadeInUp 0.25s var(--ease-out) both; }

/* Entrada de cards con stagger */
@keyframes cardIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
.card-animate { animation: cardIn var(--dur-normal) var(--ease-spring) both; }
.card-animate:nth-child(1) { animation-delay: 0ms;   }
.card-animate:nth-child(2) { animation-delay: 40ms;  }
.card-animate:nth-child(3) { animation-delay: 80ms;  }
.card-animate:nth-child(4) { animation-delay: 120ms; }
.card-animate:nth-child(5) { animation-delay: 160ms; }
.card-animate:nth-child(n+6) { animation-delay: 200ms; }

/* Toast — animación spring premium */
#toast-container { position: fixed; top: 20px; right: 20px; z-index: var(--z-toast, 9000); display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast {
    background: var(--bg-card);
    color: var(--text-main);
    padding: 14px 18px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: var(--font-base);
    min-width: 260px;
    max-width: 380px;
    transform: translateX(calc(100% + 32px));
    opacity: 0;
    transition: transform 0.35s var(--ease-spring), opacity 0.25s ease;
    border-left: 4px solid var(--accent);
    pointer-events: auto;
    border: 1px solid var(--border);
    border-left-width: 4px;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast i { font-size: 17px; flex-shrink: 0; }
.toast-success { border-left-color: var(--success); }
.toast-success i { color: var(--success); }
.toast-danger  { border-left-color: var(--danger);  }
.toast-danger  i { color: var(--danger);  }
.toast-warning { border-left-color: var(--warning); }
.toast-warning i { color: var(--warning); }
.toast-info    { border-left-color: var(--accent);  }
.toast-info    i { color: var(--accent);  }

/* Transición de contenido al cambiar de página (auth redirect) */
.content-fade { animation: fadeInUp 0.2s var(--ease-out); }

/* Smooth reveal de tablas (filas) */
@keyframes rowFadeIn {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 1; transform: translateX(0); }
}
.row-animate { animation: rowFadeIn 0.18s var(--ease-out) both; }

/* ============================================================
   SISTEMA DE TARJETAS UNIVERSAL
   Disponible para todos los archivos HTML del sistema
   ============================================================ */

/* --- Nav Card (selección de categorías, módulos, menús) --- */
.nav-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    border-radius: var(--radius);
    padding: var(--sp-5);
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) ease,
                border-color var(--dur-fast) ease,
                background-color var(--dur-normal) ease;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    text-decoration: none;
    color: inherit;
}
.nav-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-left-color: var(--accent);
    border-color: var(--accent);
}
.nav-card.active, .nav-card.selected {
    border-left-color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-light);
    box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm);
}
.nav-card-icon {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-light);
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    color: var(--accent);
    flex-shrink: 0;
}
.nav-card-title { font-size: var(--font-base); font-weight: 700; color: var(--text-main); line-height: 1.3; }
.nav-card-desc  { font-size: var(--font-sm); color: var(--text-muted); line-height: 1.4; }
.nav-card-badge {
    margin-top: auto;
    font-size: var(--font-xs); font-weight: 700;
    background: var(--accent-light);
    color: var(--accent);
    padding: 2px 8px;
    border-radius: 99px;
    border: 1px solid rgba(6,182,212,0.2);
}

/* --- Stat / KPI Card (dashboards) --- */
.stat-card, .kpi-card-uni {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-fast) ease,
                border-color var(--dur-fast) ease,
                background-color var(--dur-normal) ease;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.stat-card:hover { box-shadow: var(--shadow); }
.stat-card-icon {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-bottom: var(--sp-1);
}
.stat-card-label {
    font-size: var(--font-xs); font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px;
}
.stat-card-value {
    font-size: var(--font-2xl); font-weight: 900;
    color: var(--text-main); line-height: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat-card-sub { font-size: var(--font-sm); color: var(--text-muted); margin-top: var(--sp-1); }

/* Variantes de color para stat-card */
.stat-accent .stat-card-icon { background: var(--accent-light); color: var(--accent); }
.stat-accent .stat-card-value { color: var(--accent); }
.stat-success .stat-card-icon { background: var(--success-light); color: var(--success); }
.stat-success .stat-card-value { color: var(--success); }
.stat-danger .stat-card-icon  { background: var(--danger-light);  color: var(--danger);  }
.stat-danger .stat-card-value { color: var(--danger); }
.stat-warning .stat-card-icon { background: var(--warning-light); color: var(--warning); }
.stat-warning .stat-card-value { color: var(--warning); }

/* --- Card Grid Layouts --- */
.card-grid-2  { display: grid; grid-template-columns: repeat(2,  1fr); gap: var(--sp-4); }
.card-grid-3  { display: grid; grid-template-columns: repeat(3,  1fr); gap: var(--sp-4); }
.card-grid-4  { display: grid; grid-template-columns: repeat(4,  1fr); gap: var(--sp-4); }
.card-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); }
@media (max-width: 1024px) {
    .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .card-grid-4, .card-grid-3, .card-grid-2 { grid-template-columns: 1fr; }
}

/* --- Table Box (contenedor de tabla unificado) --- */
.table-box {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: background-color var(--dur-normal) ease, border-color var(--dur-normal) ease;
}
.table-header {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.table-header h3, .table-header h4 {
    margin: 0; font-size: var(--font-base);
    display: flex; align-items: center; gap: var(--sp-2);
    color: var(--text-main);
}
.scroll-container {
    overflow-x: auto;
    overflow-y: auto;
}
.scroll-container::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-container::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.scroll-container::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }

/* Tabla dentro de table-box */
.table-box table, .tbl {
    width: 100%; border-collapse: collapse; text-align: left;
}
.table-box thead th, .tbl thead th {
    padding: 10px var(--sp-4);
    border-bottom: 2px solid var(--border);
    color: var(--text-muted);
    font-size: var(--font-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: var(--bg-card);
    position: sticky; top: 0; z-index: 5;
    white-space: nowrap;
}
.table-box td, .tbl td {
    padding: 10px var(--sp-4);
    border-bottom: 1px solid var(--border);
    font-size: var(--font-base);
    color: var(--text-main);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.table-box tr:last-child td, .tbl tr:last-child td { border-bottom: none; }
.table-box tbody tr:hover td, .tbl tbody tr:hover td { background: rgba(6,182,212,0.03); }
html.dark-mode .table-box tbody tr:hover td,
html.dark-mode .tbl tbody tr:hover td { background: rgba(255,255,255,0.04); }

/* ============================================================
   INDICADOR DE CARGA EN LÍNEA
   ============================================================ */
/* Indicador de carga en línea */
.spinner-inline {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.65s linear infinite;
    vertical-align: middle;
}