.settings-tab-btn {
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0;
    transition: 0.2s;
}
.settings-tab-btn:hover {
    background: var(--bg-main);
}
.settings-tab-btn.active {
    color: var(--primary-color, #4f46e5);
    border-bottom-color: var(--primary-color, #4f46e5);
}
@media (max-width: 768px) {
    .settings-tab-btn {
        padding: 8px 10px;
        font-size: 0.8rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — paleta índigo/violeta (SaaS premium). Casi todos los
   módulos pintan con estas variables (incluso sus estilos inline), así que
   cambiar los tokens re-tema la app completa de una vez.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    /* Main Backgrounds */
    --bg-main: #eef0f7;
    --bg-sidebar: #191a3a;
    --bg-card: #ffffff;

    /* Text Colors */
    --text-primary: #171930;
    --text-secondary: #5d6480;
    --text-sidebar: #c7cbe8;
    --text-sidebar-active: #ffffff;

    /* Accents — índigo primario con gradiente de marca */
    --accent-blue: #5b5bd6;
    --accent-blue-hover: #4747c2;
    --accent-green: #0ea977;
    --accent-red: #e5484d;
    --brand-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --brand-glow: 0 8px 24px -8px rgb(99 102 241 / 0.55);

    /* Borders and Shadows (capas suaves, look más premium que una sola sombra dura) */
    --border-color: #e3e5f0;
    --shadow-sm: 0 1px 2px 0 rgb(23 25 48 / 0.05), 0 1px 1px -1px rgb(23 25 48 / 0.04);
    --shadow-md: 0 6px 16px -6px rgb(23 25 48 / 0.12), 0 2px 6px -2px rgb(23 25 48 / 0.08);
    --shadow-lg: 0 18px 40px -12px rgb(23 25 48 / 0.22), 0 8px 16px -8px rgb(23 25 48 / 0.10);

    /* Superficies auxiliares (cabeceras de tabla, hovers) — con par dark abajo */
    --bg-table-head: #f6f7fc;
    --bg-row-hover: #f4f5fd;
    --focus-ring: 0 0 0 3px rgb(99 102 241 / 0.30);

    /* Typography */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* Dark Mode Variables */
:root.dark {
    --bg-main: #0d1022;
    --bg-sidebar: #070818;
    --bg-card: #161a33;

    --text-primary: #eef0fb;
    --text-secondary: #9aa2c7;
    --text-sidebar: #c7cbe8;
    --text-sidebar-active: #ffffff;

    --accent-blue: #7c7cf1;
    --accent-blue-hover: #9494f5;
    --brand-glow: 0 8px 24px -8px rgb(124 124 241 / 0.45);

    --border-color: #272c4d;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.45);
    --shadow-md: 0 6px 16px -6px rgb(0 0 0 / 0.55), 0 2px 6px -2px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 18px 40px -12px rgb(0 0 0 / 0.65), 0 8px 16px -8px rgb(0 0 0 / 0.5);

    --bg-table-head: #131735;
    --bg-row-hover: rgba(124, 124, 241, 0.06);
    --focus-ring: 0 0 0 3px rgb(124 124 241 / 0.35);
}

/* Anillo de foco accesible y consistente en toda la app (teclado y campos).
   Los inputs de los módulos llevan estilos inline, pero el inline no define
   :focus — así que esta regla global sí les aplica. */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--accent-blue);
}

input,
select,
textarea {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    color: var(--text-primary);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-main);
    /* Luz ambiental índigo/cian: da profundidad sin distraer (fixed = no "nada" al hacer scroll) */
    background-image:
        radial-gradient(900px 500px at 85% -10%, rgb(99 102 241 / 0.10), transparent 60%),
        radial-gradient(700px 420px at -10% 30%, rgb(14 165 233 / 0.07), transparent 60%),
        radial-gradient(800px 520px at 50% 110%, rgb(139 92 246 / 0.06), transparent 60%);
    background-attachment: fixed;
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
}

:root.dark body {
    background-image:
        radial-gradient(900px 500px at 85% -10%, rgb(99 102 241 / 0.16), transparent 60%),
        radial-gradient(700px 420px at -10% 30%, rgb(14 165 233 / 0.09), transparent 60%),
        radial-gradient(800px 520px at 50% 110%, rgb(139 92 246 / 0.10), transparent 60%);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 600;
}

/* Layout */
#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 250px;
    background-color: var(--bg-sidebar);
    color: var(--text-sidebar);
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
}

.sidebar-header {
    padding: 24px;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-icon {
    width: 34px;
    height: 34px;
    background: var(--brand-gradient);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    box-shadow: 0 4px 12px -4px rgb(99 102 241 / 0.6);
}

.nav-menu {
    list-style: none;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav-item {
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

.nav-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
}

.nav-item.active {
    background-color: rgba(59, 130, 246, 0.15);
    color: var(--accent-blue);
    border-right: 4px solid var(--accent-blue);
}

/* Main Content Area */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Topbar */
.topbar {
    height: 70px;
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    box-shadow: var(--shadow-sm);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar {
    width: 40px;
    height: 40px;
    background-color: var(--accent-blue);
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* Pages Section */
.page-container {
    padding: 32px;
    flex: 1;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.page-title {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.btn-primary {
    background-color: var(--accent-blue);
    background-image: var(--brand-gradient);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.12), inset 0 1px 0 rgb(255 255 255 / 0.12);
}

.btn-primary:hover {
    background-color: var(--accent-blue-hover);
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: var(--brand-glow);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.15);
}

.btn-secondary {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: 10px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.12s ease, border-color 0.18s ease;
}

.btn-secondary:hover {
    background-color: var(--bg-main);
    border-color: var(--accent-blue);
    transform: translateY(-1px);
}

.btn-secondary:active {
    transform: translateY(0);
}

/* Invoice Badges */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-paid { background: #dcfce7; color: #166534; }
.badge-pending { background: #fef9c3; color: #854d0e; }
/* Parcial = tiene abonos pero aún debe. Azul (no amarillo) para distinguirla de un
   pendiente intacto de un vistazo en el listado de facturas. */
.badge-partial { background: #dbeafe; color: #1d4ed8; }
.badge-overdue { background: #fee2e2; color: #991b1b; }
.badge-voided { background: #f1f5f9; color: #64748b; text-decoration: line-through; }

/* Tablas de ítems dentro de modales (facturas, cotizaciones, órdenes, conduces).
   En escritorio necesitan overflow visible para no cortar el dropdown de búsqueda
   por fila; en pantallas angostas pasan a scroll horizontal para que se vean TODAS
   las columnas (ITBIS, cantidades, subtotal…) sin cortarse. */
.modal-items-scroll { overflow: visible; }
/* Padding reducido en las CELDAS de las tablas de ítems (el padding global de 20px les
   comía ~40px de ancho útil por celda → Cant. no cabía ni "1000"). Solo aplica aquí,
   no toca las tablas de listado (facturas, clientes, etc.). */
.modal-items-scroll th,
.modal-items-scroll td { padding: 8px 6px; }
@media (max-width: 1024px) {
    .modal-items-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* La descripción no acapara el ancho en móvil (deja ver el resto de columnas). */
    .modal-items-scroll input[data-field="desc"] { min-width: 180px !important; }
}

/* Cards & Grid Layouts */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.metric-card {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-card);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    border: 1px solid var(--border-color);
}

/* Filo de gradiente de marca arriba — aparece al pasar el mouse */
.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--brand-gradient);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(99, 102, 241, 0.35);
}

.metric-card:hover::before {
    opacity: 1;
}

.metric-title {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.metric-value {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.metric-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    margin-top: 8px;
}

.trend-up {
    color: var(--accent-green);
}

.trend-down {
    color: var(--accent-red);
}

/* Table Styles for Invoices List */
.table-container {
    background-color: var(--bg-card);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

table {
    width: 100%;
    border-collapse: collapse;
}

@media (max-width: 768px) {
    table { min-width: 600px; }
}

th,
td {
    padding: 13px 20px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

th {
    background-color: var(--bg-table-head);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

td {
    color: var(--text-primary);
    font-size: 0.9rem;
}

tr:last-child td {
    border-bottom: none;
}

tr:hover td {
    background-color: var(--bg-row-hover);
}

/* Status Badges */
.badge {
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
}

.badge-paid {
    background-color: #d1fae5;
    color: #065f46;
}

.badge-pending {
    background-color: #fef3c7;
    color: #92400e;
}

.badge-overdue {
    background-color: #fee2e2;
    color: #991b1b;
}

.badge-voided {
    background-color: #f1f5f9;
    color: #64748b;
    text-decoration: line-through;
}

.badge-draft {
    background-color: #e0e7ff;
    color: #3730a3;
}

.badge-accepted {
    background-color: #d1fae5;
    color: #065f46;
}

/* Glassmorphism utility */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

:root.dark .glass {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Auth / Login Overlay */
#login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(800px 500px at 80% 10%, rgb(139 92 246 / 0.35), transparent 60%),
        radial-gradient(700px 500px at 10% 90%, rgb(56 189 248 / 0.22), transparent 60%),
        linear-gradient(135deg, #12142e 0%, #251d52 50%, #101226 100%);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.login-card {
    background: var(--bg-card);
    padding: 48px;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    width: 100%;
    max-width: 420px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.login-card h2 {
    margin-bottom: 24px;
    color: var(--text-primary);
    text-align: center;
}

.login-card input {
    width: 100%;
    padding: 12px;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-body);
}

.login-card button {
    width: 100%;
    padding: 12px;
    background: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.login-card button:hover {
    background: var(--accent-blue-hover);
}

/* Theme Toggle Button */
.theme-toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.theme-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

:root.dark .theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Mobile Responsive */
.mobile-menu-btn {
    display: none;
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: -250px;
        top: 0;
        bottom: 0;
        z-index: 1000;
    }

    .sidebar.open {
        left: 0;
    }

    .mobile-menu-btn {
        display: block;
        background: none;
        border: none;
        color: var(--text-primary);
        font-size: 1.5rem;
        cursor: pointer;
        margin-right: 16px;
    }

    .topbar {
        padding: 0 16px;
    }

    .page-container {
        padding: 16px;
    }

    .metrics-grid {
        grid-template-columns: 1fr;
    }
}

/* Modal Overlay Base Styles */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000 !important;
    justify-content: center;
    align-items: center;
}

/* Dark mode table hover fix */
:root.dark tr:hover td {
    background-color: rgba(255, 255, 255, 0.03);
}

:root.dark th {
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
}

/* Input focus state */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state-text {
    font-size: 1rem;
    font-weight: 500;
}

/* POS layout */
.pos-container {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 20px;
    height: calc(100vh - 140px);
    overflow: hidden;
}

.pos-catalog {
    overflow-y: auto;
    padding: 20px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.pos-ticket {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

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

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

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

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

/* Logout button in sidebar */
.btn-logout {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: none;
    border: none;
    color: var(--text-sidebar);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    width: 100%;
    text-align: left;
    transition: all 0.2s;
    margin-top: auto;
}

.btn-logout:hover {
    color: var(--accent-red);
    background: rgba(239, 68, 68, 0.1);
}

/* ═══ SKELETON SCREENS ═══ */
.skeleton {
    background: linear-gradient(90deg, var(--bg-card) 25%, #e2e8f0 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite ease-in-out;
    border-radius: 8px;
    min-height: 16px;
}

.skeleton-line {
    height: 14px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 70%; }
.skeleton-line.full { width: 100%; }

.skeleton-card {
    height: 120px;
    border-radius: 12px;
}

.skeleton-table-row {
    height: 48px;
    margin-bottom: 4px;
    border-radius: 6px;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ═══ RESPONSIVE / MOBILE ═══ */
@media (max-width: 1024px) {
    .sidebar {
        width: 60px;
        overflow: hidden;
    }
    .sidebar .sidebar-header div:not(.logo-icon) { display: none; }
    .sidebar .nav-label { display: none; }
    .sidebar .nav-item {
        padding: 12px 0;
        justify-content: center;
    }
    .sidebar .nav-icon {
        font-size: 1.3rem;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .main-content { margin-left: 0; }
    .metrics-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
    .sidebar { 
        position: fixed;
        z-index: 9000;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        width: 260px;
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar .nav-label { display: inline; }
    .sidebar .nav-item {
        padding: 12px 24px;
        justify-content: flex-start;
    }
    .sidebar .nav-icon {
        width: auto;
        font-size: 1.2rem;
    }
    .main-content { margin-left: 0 !important; }
    .metrics-grid { grid-template-columns: 1fr !important; }
    .page-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    .topbar {
        padding: 12px 16px;
    }
    .pos-layout {
        grid-template-columns: 1fr !important;
    }
    .pos-page {
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
    }
    /* PUNTO DE VENTA EN EL CELULAR
       El carrito deja de ir apilado debajo (antes ocupaba la mitad de la pantalla y
       obligaba a bajar para ver el total): ahora los productos ocupan todo, abajo queda
       una barra fija con lo que lleva y cuanto va, y el carrito sube como una hoja al
       tocarla. Nada de esto existe en pantalla grande, donde el carrito siempre se ve. */
    .pos-products {
        height: auto;
    }
    #pos-grid {
        /* Que la barra no tape la ultima fila de productos. */
        padding-bottom: 92px !important;
    }
    .pos-cart {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        width: 100% !important;
        height: 88vh;
        max-height: 88vh;
        flex-shrink: 0 !important;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        box-shadow: 0 -8px 30px rgba(0,0,0,.18);
        transform: translateY(102%);
        transition: transform .22s ease-out;
        z-index: 1200;
    }
    .pos-page.cart-open .pos-cart {
        transform: translateY(0);
    }
    #pos-sheet-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s ease-out;
        z-index: 1100;
    }
    .pos-page.cart-open #pos-sheet-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    #pos-mobile-bar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
        border: none;
        border-top: 1px solid var(--border-color);
        background: var(--accent-green, #10b981);
        color: #fff;
        font-family: inherit;
        font-size: 0.95rem;
        font-weight: 700;
        cursor: pointer;
        z-index: 1150;
    }
    #pos-mobile-bar.vacio {
        background: var(--bg-card);
        color: var(--text-secondary);
        font-weight: 600;
    }
    #pos-bar-total { margin-left: auto; font-size: 1.1rem; }
    #pos-bar-cta { font-size: 0.82rem; opacity: .9; }
    /* Con la hoja arriba, la barra estorba. */
    .pos-page.cart-open #pos-mobile-bar { display: none; }
    .totals, .totals-card, .totals-box {
        width: 100% !important;
    }
    .settings-grid-2, .settings-grid-3 {
        grid-template-columns: 1fr !important;
    }
    table { font-size: 0.8rem; }
    th, td { padding: 8px 6px; }
    /* Mobile menu button */
    .mobile-menu-btn {
        display: flex;
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--accent-blue);
        color: white;
        border: none;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
        z-index: 8999;
        cursor: pointer;
    }
}

@media (min-width: 769px) {
    .mobile-menu-btn { display: none; }
    .sidebar-overlay { display: none !important; }
}

/* ═══ DARK MODE ═══ */
html.dark {
    --bg-main: #0f172a;
    --bg-card: #1e293b;
    --bg-sidebar: #0c1222;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-sidebar: #cbd5e1;
    --border-color: #334155;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
}

html.dark .skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
}

html.dark .badge-paid { background: #166534; color: #dcfce7; }
html.dark .badge-pending { background: #854d0e; color: #fef9c3; }
html.dark .badge-partial { background: #1e40af; color: #dbeafe; }
html.dark .badge-overdue { background: #991b1b; color: #fee2e2; }
html.dark .badge-voided { background: #334155; color: #94a3b8; }

html.dark input, html.dark select, html.dark textarea {
    background: #0f172a !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}

html.dark .table-container table thead th {
    background: #1e293b;
    color: #94a3b8;
    border-color: #334155;
}

html.dark .table-container table tbody td {
    border-color: #1e293b;
}

html.dark .glass {
    background: #1e293b;
}

/* ═══ TOP NAVBAR STYLING ═══ */
/* ═══════════════════════════════════════════════════════════════════════
   HEADER — dos filas: (1) marca + buscador de comandos + perfil,
   (2) categorías de módulos. Separar el perfil/Configuración de la fila de
   categorías evita que choquen entre sí sin importar cuántos módulos tenga
   el plan (el problema del header de una sola fila).
   ═══════════════════════════════════════════════════════════════════════ */
.main-navbar {
    /* Header oscuro "command bar" SIEMPRE (también en modo claro): re-declaramos los
       tokens aquí y TODO lo interno (menús, chips, buscador — incluso estilos inline
       que usan var()) se repinta en oscuro automáticamente. */
    --bg-card: #1b1e3d;
    --bg-main: rgba(255, 255, 255, 0.07);
    --text-primary: #f2f3fd;
    --text-secondary: #a8aed4;
    --border-color: rgba(255, 255, 255, 0.09);
    --bg-table-head: rgba(255, 255, 255, 0.05);

    display: flex;
    flex-direction: column;
    background:
        radial-gradient(600px 200px at 90% 0%, rgb(139 92 246 / 0.28), transparent 65%),
        radial-gradient(500px 180px at 12% 100%, rgb(56 189 248 / 0.14), transparent 60%),
        linear-gradient(135deg, #191c3c 0%, #1d1b45 55%, #14162e 100%);
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 10px 30px -12px rgb(23 25 48 / 0.45);
}

:root.dark .main-navbar {
    box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.7);
}

/* Acentos re-calibrados para el header oscuro (los rgba azules base son para fondo claro) */
.main-navbar .plan-chip {
    color: #c7d2fe;
    background: rgba(99, 102, 241, 0.28);
}

.main-navbar .nav-dropdown-trigger.active {
    background: rgba(99, 102, 241, 0.30);
    box-shadow: inset 0 0 0 1px rgba(165, 180, 252, 0.35);
}

.main-navbar .nav-dropdown-trigger.active .nav-link-item {
    color: #e0e7ff;
}

.main-navbar .nav-dropdown-trigger.active .nav-link-icon {
    background: var(--brand-gradient);
}

.main-navbar .dropdown-item.active,
.main-navbar .user-menu-list li.active {
    background: rgba(99, 102, 241, 0.30);
    color: #e0e7ff;
}

.main-navbar .user-menu-plan {
    color: #c7d2fe;
    background: rgba(99, 102, 241, 0.22);
}

.main-navbar .nav-search-trigger:hover {
    border-color: rgba(165, 180, 252, 0.6);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

/* ── Fila 1: marca / buscador / perfil ──────────────────────────────────── */
.navbar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 16px;
    height: 64px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 0;
}

.brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.company-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.plan-chip {
    align-self: flex-start;
    margin-top: 2px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--accent-blue);
    background: rgba(59, 130, 246, 0.1);
    padding: 1px 7px;
    border-radius: 999px;
    white-space: nowrap;
}

.plan-chip.plan-chip-super {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
}

/* Buscador / paleta de comandos: pieza central, look tipo "command bar" en
   vez del típico enlace de texto — es lo que le da un aire distinto al header. */
.nav-search-trigger {
    flex: 1 1 auto;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-main);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-body);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.nav-search-trigger:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.nav-search-icon {
    font-size: 0.85rem;
    opacity: 0.8;
}

.nav-search-placeholder {
    flex: 1;
    text-align: left;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-search-kbd {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 2px 6px;
    flex-shrink: 0;
}

/* ── Perfil (avatar + menú desplegable) ─────────────────────────────────── */
.navbar-user {
    position: relative;
    flex-shrink: 0;
    /* Fila, no bloque. Sin esto los hijos —reloj de marcaje, campana de avisos y
       avatar— se apilan en VERTICAL y desbordan el header de 64px de alto. */
    display: flex;
    align-items: center;
    gap: 8px;
}

/* El reloj de marcaje: en pantallas estrechas se queda solo con la hora. El texto
   ("Marcar entrada") es lo primero que sobra cuando el header aprieta. */
@media (max-width: 1100px) {
    #marcaje-texto { display: none; }
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 999px;
    transition: background-color 0.15s;
}

.user-chip:hover {
    background-color: var(--bg-main);
}

.user-chip-caret {
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background-color: var(--accent-blue);
    background-image: var(--brand-gradient);
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 0 3px 10px -3px rgb(99 102 241 / 0.55);
}

.avatar.avatar-lg {
    width: 44px;
    height: 44px;
    font-size: 1rem;
}

.user-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 240px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    z-index: 1010;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    overflow: hidden;
}

.user-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
}

.user-menu-id {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.user-menu-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-role {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
}

.user-menu-plan {
    margin: 0 16px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--accent-blue);
    background: rgba(59, 130, 246, 0.08);
    border-radius: 8px;
    padding: 5px 10px;
    text-align: center;
}

.user-menu-list {
    list-style: none;
    margin: 0;
    padding: 4px 8px;
    border-top: 1px solid var(--border-color);
}

.user-menu-list li {
    padding: 9px 10px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.user-menu-list li:hover {
    background-color: var(--bg-main);
    color: var(--text-primary);
}

.user-menu-list li.active {
    background-color: rgba(59, 130, 246, 0.08);
    color: var(--accent-blue);
    font-weight: 600;
}

.user-menu-logout {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-top: 1px solid var(--border-color);
    background: none;
    color: var(--accent-red);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: background-color 0.15s;
}

.user-menu-logout:hover {
    background-color: rgba(239, 68, 68, 0.08);
}

.user-menu-build {
    padding: 8px 16px 12px;
    font-size: 0.68rem;
    color: var(--text-secondary);
    opacity: 0.7;
    text-align: center;
    letter-spacing: 0.3px;
    border-top: 1px solid var(--border-color);
    user-select: all;
}

/* ── Fila 2: categorías de módulos ─────────────────────────────────────────
   SIEMPRE visible, en cualquier tamaño de pantalla. Nada de esconderla tras un
   botón ☰ ni de scroll horizontal: si no cabe, las categorías ENVUELVEN a una
   segunda línea. CRÍTICO: sin overflow-x/overflow-y aquí — un scroll container
   RECORTA los submenús position:absolute que nacen dentro (era el bug de
   "los menús no aparecen": se abrían pero quedaban cortados a 42px). */
.navbar-categories {
    display: flex;
    align-items: center;
    padding: 4px 16px;
    min-height: 44px;
    border-top: 1px solid var(--border-color);
    overflow: visible;
}

.nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 2px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.nav-dropdown-trigger {
    position: relative;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    list-style: none;
    flex-shrink: 0;
}

.nav-link-item {
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    user-select: none;
    transition: color 0.2s;
}

.nav-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 0.78rem;
    border-radius: 6px;
    background: var(--bg-main);
    transition: background-color 0.2s;
}

.nav-link-item .arrow {
    font-size: 0.65rem;
    margin-left: 1px;
    opacity: 0.6;
    transition: transform 0.2s ease;
}

.nav-dropdown-trigger:hover {
    background-color: var(--bg-main);
}

.nav-dropdown-trigger:hover .nav-link-item {
    color: var(--text-primary);
}

.nav-dropdown-trigger:hover .arrow {
    transform: rotate(180deg);
}

.nav-dropdown-trigger.active {
    background-color: rgba(59, 130, 246, 0.1);
}

.nav-dropdown-trigger.active .nav-link-item {
    color: var(--accent-blue);
    font-weight: 600;
}

.nav-dropdown-trigger.active .nav-link-icon {
    background: var(--accent-blue);
}

/* Dropdown Menu styling */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    list-style: none;
    padding: 6px;
    min-width: 210px;
    z-index: 1010;
    margin-top: 8px;

    /* Smooth modern transition of opacity/transform */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top left;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

/* Bridge gap to maintain hover state while moving mouse down */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
}

.nav-dropdown-trigger:hover .dropdown-menu,
.nav-dropdown-trigger.menu-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.dropdown-item {
    padding: 9px 12px;
    font-size: 0.88rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.15s, color 0.15s;
    list-style: none;
    border-radius: 9px;
    margin: 1px 0;
}

.dropdown-item:hover {
    background-color: var(--bg-main);
    color: var(--text-primary);
}

.dropdown-item.active {
    background-color: rgba(59, 130, 246, 0.08);
    color: var(--accent-blue);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   PALETA DE COMANDOS — overlay tipo Cmd+K para saltar a cualquier módulo.
   ═══════════════════════════════════════════════════════════════════════ */
.command-palette-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    z-index: 5000;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
}

.command-palette-overlay.open {
    display: flex;
}

.command-palette {
    width: 92%;
    max-width: 560px;
    max-height: 60vh;
    background-color: var(--bg-card);
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: fadeInDown 0.15s ease;
}

.command-palette-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.command-palette-icon {
    font-size: 1rem;
    opacity: 0.7;
}

.command-palette-input {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    font-size: 1rem;
    font-family: var(--font-body);
    color: var(--text-primary);
}

.command-palette-esc {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 2px 6px;
}

.command-palette-results {
    list-style: none;
    margin: 0;
    padding: 8px;
    overflow-y: auto;
}

.command-palette-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.command-palette-item-icon {
    font-size: 1rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.command-palette-item-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.command-palette-item-group {
    font-size: 0.72rem;
    color: var(--text-secondary);
    background: var(--bg-main);
    border-radius: 999px;
    padding: 2px 9px;
    flex-shrink: 0;
}

.command-palette-item.active,
.command-palette-item:hover {
    background-color: rgba(59, 130, 246, 0.1);
}

.command-palette-item.active .command-palette-item-group,
.command-palette-item:hover .command-palette-item-group {
    background: var(--bg-card);
}

.command-palette-empty {
    padding: 30px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

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

/* En pantallas medianas, el buscador se angosta antes de que el header se apriete. */
@media (max-width: 1280px) and (min-width: 1025px) {
    .nav-search-trigger { max-width: 260px; }
    .company-title { max-width: 150px; }
}

@media (max-width: 900px) and (min-width: 1025px) {
    /* placeholder para mantener especificidad si se agregan reglas futuras */
}

@media (max-width: 1024px) {
    .nav-search-placeholder {
        display: none;
    }

    .nav-search-trigger {
        max-width: none;
        flex: 0 0 auto;
        width: 40px;
        justify-content: center;
        padding: 8px;
    }

    .nav-search-kbd {
        display: none;
    }

    /* Las categorías se quedan SIEMPRE visibles (envuelven en varias líneas si no
       caben) — ya no hay cajón oculto tras un botón ☰: ese patrón era la causa de
       "no me aparecen los módulos del menú" en ventanas angostas o con zoom. */
    .navbar-categories {
        padding: 6px 10px;
    }

    .nav-links {
        gap: 4px;
    }

    /* En táctil/angosto el submenú abre como ACORDEÓN bajo su categoría (clic en la
       categoría lo alterna vía .menu-open). position:static = no hay recortes ni
       menús flotantes que se salgan de la pantalla. */
    .nav-dropdown-trigger {
        flex-wrap: wrap;
    }

    .dropdown-menu {
        position: static;
        display: none;
        box-shadow: none;
        border: none;
        border-left: 2px solid var(--accent-blue);
        margin: 4px 0 4px 10px;
        padding: 2px 0;
        width: 100%;
        min-width: 0;
        animation: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
        background: transparent;
    }

    .nav-dropdown-trigger.menu-open {
        width: 100%;
        border-radius: 12px;
        background-color: var(--bg-main);
    }

    .nav-dropdown-trigger.menu-open > .dropdown-menu {
        display: block;
    }

    .dropdown-menu::before {
        display: none;
    }

    .dropdown-item {
        margin: 2px 0;
        padding: 9px 12px;
    }

    .user-menu {
        width: 220px;
    }
}

@media (max-width: 560px) {
    .company-title { display: none; }
    .plan-chip { display: none; }
    .nav-search-placeholder { display: none; }
}
/* ═══════════════════════════════════════════════════════════════
   Avisos y diálogos (src/dialogs.js): toasts + reemplazo de alert/confirm/prompt
   ═══════════════════════════════════════════════════════════════ */
#toast-container { pointer-events: none; max-width: min(420px, calc(100vw - 32px)); }
.wb-toast {
    pointer-events: auto;
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start;
    min-width: 280px; padding: 12px 12px 14px 14px;
    background: var(--bg-card); color: var(--text-primary);
    border: 1px solid var(--border-color); border-left: 4px solid var(--wb-color);
    border-radius: 12px; box-shadow: var(--shadow-lg);
    font-family: var(--font-body); font-size: 13.5px; line-height: 1.4;
    opacity: 0; transform: translateX(24px) scale(0.98);
    transition: opacity .22s ease, transform .26s cubic-bezier(.2,.8,.2,1);
}
.wb-toast--visible { opacity: 1; transform: none; }
.wb-toast--saliendo { opacity: 0; transform: translateX(24px) scale(0.98); }
.wb-toast--success { --wb-color: #10b981; --wb-soft: rgb(16 185 129 / .14); }
.wb-toast--error   { --wb-color: #ef4444; --wb-soft: rgb(239 68 68 / .14); }
.wb-toast--warning { --wb-color: #f59e0b; --wb-soft: rgb(245 158 11 / .16); }
.wb-toast--info    { --wb-color: #6366f1; --wb-soft: rgb(99 102 241 / .14); }
.wb-toast__icono {
    width: 30px; height: 30px; border-radius: 50%; flex: none; margin-top: 1px;
    display: grid; place-items: center; background: var(--wb-soft); color: var(--wb-color);
}
.wb-toast__icono svg { width: 16px; height: 16px; }
.wb-toast__titulo { font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; margin-bottom: 1px; }
.wb-toast__texto { color: var(--text-secondary); white-space: pre-line; word-break: break-word; }
.wb-toast__cerrar {
    background: none; border: 0; color: var(--text-secondary); font-size: 20px; line-height: 1;
    padding: 0 2px; cursor: pointer; border-radius: 6px; margin: -2px -2px 0 0;
}
.wb-toast__cerrar:hover { color: var(--text-primary); background: var(--bg-row-hover); }
.wb-toast__barra {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
    background: var(--wb-color); opacity: .55; transform-origin: left;
    animation: wb-toast-barra linear forwards;
}
@keyframes wb-toast-barra { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 600px) {
    #toast-container { left: 12px; right: 12px; bottom: 12px; max-width: none; }
    .wb-toast { min-width: 0; }
}

.wb-dialog-overlay {
    position: fixed; inset: 0; z-index: 10500;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgb(15 23 42 / .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .18s ease;
}
.wb-dialog-overlay--visible { opacity: 1; }
.wb-dialog-overlay--saliendo { opacity: 0; }
.wb-dialog {
    width: 100%; max-width: 440px;
    background: var(--bg-card); color: var(--text-primary);
    border-radius: 16px; box-shadow: var(--shadow-lg); border: 1px solid var(--border-color);
    padding: 24px 24px 20px; font-family: var(--font-body);
    display: grid; grid-template-columns: auto 1fr; column-gap: 16px;
    transform: translateY(10px) scale(0.97); transition: transform .2s cubic-bezier(.2,.8,.2,1);
}
.wb-dialog-overlay--visible .wb-dialog { transform: none; }
.wb-dialog--info     { --wb-color: #6366f1; --wb-soft: rgb(99 102 241 / .14); }
.wb-dialog--success  { --wb-color: #10b981; --wb-soft: rgb(16 185 129 / .14); }
.wb-dialog--warning  { --wb-color: #f59e0b; --wb-soft: rgb(245 158 11 / .16); }
.wb-dialog--error    { --wb-color: #ef4444; --wb-soft: rgb(239 68 68 / .14); }
.wb-dialog--question { --wb-color: #6366f1; --wb-soft: rgb(99 102 241 / .14); }
.wb-dialog--danger   { --wb-color: #ef4444; --wb-soft: rgb(239 68 68 / .14); }
.wb-dialog__icono {
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    background: var(--wb-soft); color: var(--wb-color);
}
.wb-dialog__icono svg { width: 22px; height: 22px; }
.wb-dialog__contenido { min-width: 0; padding-top: 2px; }
.wb-dialog__titulo { margin: 0 0 6px; font-family: var(--font-heading); font-size: 17px; font-weight: 600; line-height: 1.3; }
.wb-dialog__texto { color: var(--text-secondary); font-size: 14px; line-height: 1.5; white-space: pre-line; word-break: break-word; }
.wb-dialog__campo { margin-top: 12px; }
.wb-dialog__input {
    width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; font-size: 14px;
    border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-main); color: var(--text-primary);
}
.wb-dialog__input:focus { outline: none; border-color: var(--accent-blue); box-shadow: var(--focus-ring); }
.wb-dialog__botones {
    grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap;
}
.wb-dialog__btn {
    padding: 9px 18px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    border: 1px solid transparent; transition: filter .15s ease, transform .1s ease;
}
.wb-dialog__btn:active { transform: translateY(1px); }
.wb-dialog__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wb-dialog__btn--primario { background: var(--brand-gradient); color: #fff; box-shadow: var(--brand-glow); }
.wb-dialog__btn--primario:hover { filter: brightness(1.07); }
.wb-dialog__btn--peligro { background: #dc2626; color: #fff; }
.wb-dialog__btn--peligro:hover { background: #b91c1c; }
.wb-dialog__btn--secundario { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); }
.wb-dialog__btn--secundario:hover { background: var(--bg-row-hover); }
@media (max-width: 480px) {
    .wb-dialog { padding: 20px 18px 16px; grid-template-columns: 1fr; row-gap: 12px; }
    .wb-dialog__icono { width: 40px; height: 40px; }
    .wb-dialog__botones { flex-direction: column-reverse; }
    .wb-dialog__btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   Dashboard en el celular (las rejillas traen su grid inline: hace falta !important)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    /* Cobrado ocupa todo el ancho; el resto va de a dos. Antes el span 2 en una
       rejilla de una columna creaba una columna fantasma y "Gastos" salía cortado. */
    .dash-grid-metrics { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .dash-grid-metrics #dash-card-revenue { grid-column: 1 / -1 !important; min-width: 0 !important; }
    .dash-grid-metrics .metric-card { padding: 14px 14px; min-width: 0; }
    .dash-grid-metrics .metric-value { font-size: 1.25rem !important; }
    .dash-grid-metrics #dash-card-revenue .metric-value { font-size: 1.7rem !important; }

    /* Seis KPI de a uno por fila eran seis pantallas: de a dos, compactos. */
    .dash-grid-kpis { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .dash-grid-kpis .metric-card { padding: 12px 12px; min-width: 0; }
    .dash-grid-kpis .metric-value { font-size: 1.05rem !important; }
    .dash-grid-kpis .metric-title { font-size: 0.66rem; }

    /* Resumen del año: una fila por dato, pero baja. */
    #dash-year-summary { gap: 10px !important; margin-bottom: 20px !important; }
    #dash-year-summary .metric-card { padding: 12px 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
    #dash-year-summary .metric-value { font-size: 1.2rem !important; }

    .dash-grid-alerts { gap: 10px !important; }
    .dash-grid-charts { gap: 12px !important; }
    .dash-grid-charts .glass, .dash-chart-main { padding: 16px !important; }
    .dash-chart-controls select { flex: 1 1 40%; }
    .dash-chart-controls label { flex: 1 1 100%; }
    #dash-chart-bars { min-height: 0 !important; }

    /* Accesos del empleado: de a dos, más bajos. */
    .dash-grid-accesos { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .dash-grid-accesos .emp-acceso { padding: 14px !important; }

    .page-header .btn-primary { width: 100%; justify-content: center; }
    /* Donas: la leyenda al lado recortaba los nombres ("Ef…"); en el celular va debajo. */
    .dash-donut { justify-content: center; }
    .dash-donut__leyenda { flex: 1 1 100% !important; min-width: 0 !important; }
    .metric-card .metric-title { letter-spacing: 0.02em; }
}

/* ═══════════════════════════════════════════════════════════════
   Contabilidad (src/modules/Accounting.js + AccTab*.js)
   Un solo sistema: tarjetas, KPIs, navegación por pestañas, estados financieros
   con cifras tabulares, y una hoja de impresión limpia.
   ═══════════════════════════════════════════════════════════════ */
.acc-module { --acc-pos: #059669; --acc-neg: #dc2626; }
:root.dark .acc-module { --acc-pos: #34d399; --acc-neg: #f87171; }
.acc-pos { color: var(--acc-pos) !important; }
.acc-neg { color: var(--acc-neg) !important; }
.acc-muted { color: var(--text-secondary); }
.acc-module .mono { font-family: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace; font-size: 0.82em; letter-spacing: 0.01em; }
.acc-module .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Cabecera */
.acc-header { align-items: flex-start; gap: 16px; }
.acc-header__sub { color: var(--text-secondary); margin-top: 4px; font-size: 0.92rem; }
.acc-header__tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.acc-mes { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 6px 10px; font-size: 0.82rem; color: var(--text-secondary); font-weight: 600; }
.acc-mes input { border: 0; background: transparent; color: var(--text-primary); font: inherit; font-weight: 700; font-size: 0.9rem; }
.acc-mes input:focus { outline: none; }

/* Navegación por pestañas: píldoras con desplazamiento horizontal en el celular */
.acc-nav { display: flex; gap: 6px; padding: 5px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; margin-bottom: 22px; overflow-x: auto; scrollbar-width: none; }
.acc-nav::-webkit-scrollbar { display: none; }
.acc-nav__btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.acc-nav__btn:hover { background: var(--bg-row-hover); color: var(--text-primary); }
.acc-nav__btn.is-active { background: var(--brand-gradient); color: #fff; box-shadow: var(--brand-glow); }
.acc-nav__icon { font-size: 1rem; line-height: 1; opacity: .9; }
.acc-nav__badge { font-size: 0.62rem; padding: 2px 6px; border-radius: 999px; background: rgb(16 185 129 / .16); color: #047857; font-weight: 800; letter-spacing: .04em; }
.acc-nav__btn.is-active .acc-nav__badge { background: rgb(255 255 255 / .22); color: #fff; }

/* Alertas accionables */
.acc-alertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 18px; }
.acc-alertas:empty { display: none; }
.acc-alerta { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid; cursor: pointer; font: inherit; }
.acc-alerta--rojo { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.acc-alerta--ambar { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.acc-alerta--azul { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.acc-alerta--gris { background: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); }
:root.dark .acc-alerta--rojo { background: rgb(239 68 68 / .12); color: #fca5a5; border-color: rgb(239 68 68 / .3); }
:root.dark .acc-alerta--ambar { background: rgb(245 158 11 / .12); color: #fcd34d; border-color: rgb(245 158 11 / .3); }
:root.dark .acc-alerta--azul { background: rgb(59 130 246 / .12); color: #93c5fd; border-color: rgb(59 130 246 / .3); }
.acc-alerta__titulo { font-weight: 700; font-size: 0.9rem; }
.acc-alerta__valor { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.acc-alerta__sub { font-size: 0.78rem; opacity: .85; }

/* KPIs del mes */
.acc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.acc-kpi { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow-sm); min-width: 0; }
.acc-kpi--destacado { background: linear-gradient(135deg, rgb(99 102 241 / .08), transparent); border-color: rgb(99 102 241 / .28); }
.acc-kpi__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); font-weight: 700; }
.acc-kpi__value { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; color: var(--text-primary); line-height: 1.15; }
.acc-kpi__delta { display: inline-block; margin-top: 8px; font-size: 0.76rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.acc-kpi__delta--bien { background: rgb(16 185 129 / .14); color: #047857; }
.acc-kpi__delta--mal { background: rgb(239 68 68 / .12); color: #b91c1c; }
.acc-kpi__delta--neutro { background: var(--bg-main); color: var(--text-secondary); }
:root.dark .acc-kpi__delta--bien { color: #6ee7b7; } :root.dark .acc-kpi__delta--mal { color: #fca5a5; }
.acc-kpi__foot { font-size: 0.75rem; color: var(--text-secondary); margin-top: 6px; }
.acc-kpi--cargando { opacity: .5; }

/* Tarjetas y rejillas */
.acc-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow-sm); min-width: 0; }
.acc-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.acc-card__head h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.acc-card__sub { font-size: 0.78rem; color: var(--text-secondary); }
.acc-grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-bottom: 14px; }
.acc-grid-3 { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 14px; margin-bottom: 14px; }
.acc-chart { min-height: 220px; }
.acc-link { background: none; border: 0; color: var(--accent-blue); font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; padding: 0; }
.acc-link-text { color: var(--accent-blue); font-weight: 700; }
.acc-vacio { color: var(--text-secondary); font-size: 0.85rem; padding: 18px 0; text-align: center; }
.acc-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-color); font-size: 0.9rem; }
.acc-fila span { display: flex; flex-direction: column; }
.acc-fila small { font-size: 0.74rem; color: var(--text-secondary); }
.acc-fila b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.acc-fila--sep { padding: 4px 0; border-bottom: 2px solid var(--border-color); }
.acc-fila--total { border-bottom: 0; font-size: 1rem; }
.acc-fila--total b { font-size: 1.15rem; }
.acc-accesos { display: flex; flex-direction: column; gap: 8px; }
.acc-acceso { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-main); color: var(--text-primary); font: inherit; cursor: pointer; transition: border-color .15s ease, transform .1s ease; }
.acc-acceso:hover { border-color: var(--accent-blue); transform: translateX(2px); }
.acc-acceso b { font-size: 0.88rem; }
.acc-acceso span { font-size: 0.76rem; color: var(--text-secondary); }

/* Tablas del módulo */
.acc-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.acc-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); padding: 8px 10px; border-bottom: 1px solid var(--border-color); }
.acc-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-color); vertical-align: top; }
.acc-table tr:last-child td { border-bottom: 0; }
.acc-table--compacta { table-layout: fixed; }
/* break-word, no "anywhere": un nombre solo se parte si NO cabe entero; con anywhere
   "FERRETERÍA SUR" se cortaba a la mitad aunque hubiera sitio. */
.acc-table--compacta td { padding: 7px 6px; overflow-wrap: break-word; }
.acc-table--compacta td:first-child { width: 46%; }
.acc-table--compacta td:last-child { width: 30%; }
.acc-card { overflow: hidden; }
.acc-table .acc-desc { color: var(--text-secondary); font-size: 0.82rem; }

/* Selector de informes agrupado */
.acc-rpt-grupos { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 14px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; }
.acc-rpt-grupo__titulo { font-size: 0.68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); font-weight: 800; margin-bottom: 6px; }
.acc-rpt-grupo__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.rpt-btn { padding: 7px 12px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--bg-main); color: var(--text-primary); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all .15s ease; }
.rpt-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.rpt-btn.is-active { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.acc-toolbar input, .acc-toolbar select { background: var(--bg-card); color: var(--text-primary); }

/* Estado financiero: hoja con encabezado, secciones y totales */
.acc-statement { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 28px 32px; box-shadow: var(--shadow-sm); max-width: 980px; }
.acc-statement__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 2px solid var(--text-primary); }
.acc-statement__empresa { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); font-weight: 700; }
.acc-statement__titulo { margin: 4px 0 2px; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; }
.acc-statement__periodo { color: var(--text-secondary); font-size: 0.9rem; }
.acc-statement__nota { margin: 16px 0 0; font-size: 0.8rem; color: var(--text-secondary); }
.acc-statement__pie { margin-top: 22px; padding-top: 10px; border-top: 1px solid var(--border-color); font-size: 0.72rem; color: var(--text-secondary); }
.acc-resumen-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.acc-resumen-kpis > div { background: var(--bg-main); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; }
.acc-resumen-kpis span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); font-weight: 700; }
.acc-resumen-kpis b { font-size: 1.25rem; font-variant-numeric: tabular-nums; margin-top: 2px; }
.acc-resumen-kpis small { font-size: 0.74rem; color: var(--text-secondary); }
.acc-st { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.acc-st td, .acc-st th { padding: 7px 10px; }
.acc-st th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); border-bottom: 1px solid var(--border-color); }
.acc-st-row td { border-bottom: 1px solid var(--border-color); }
.acc-st-row td:nth-child(1) { width: 96px; }
.acc-st-section td { padding-top: 18px; font-size: 0.74rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--text-secondary); border-bottom: 1px solid var(--border-color); }
.acc-st-total td { font-weight: 700; padding-top: 9px; border-top: 1px solid var(--text-primary); }
.acc-st-grand td { font-weight: 800; font-size: 1rem; padding-top: 12px; padding-bottom: 12px; border-top: 2px solid var(--text-primary); border-bottom: 3px double var(--text-primary); }
.acc-st--cols .acc-st-row td:nth-child(1) { width: auto; }
.acc-check { margin-top: 16px; padding: 10px 14px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; }
.acc-check--ok { background: rgb(16 185 129 / .12); color: #047857; }
.acc-check--mal { background: rgb(239 68 68 / .12); color: #b91c1c; }
:root.dark .acc-check--ok { color: #6ee7b7; } :root.dark .acc-check--mal { color: #fca5a5; }

/* Formularios y tablas heredados dentro del módulo: mismo aire */
.acc-module input[type="date"], .acc-module input[type="number"], .acc-module input[type="text"], .acc-module select { font: inherit; font-size: 0.86rem; }
.acc-module .table-container table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em; }

@media (max-width: 1100px) {
    .acc-kpis { grid-template-columns: repeat(2, 1fr); }
    .acc-grid-2, .acc-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .acc-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
    .acc-kpi { padding: 14px; }
    .acc-kpi__value { font-size: 1.3rem; }
    .acc-header__tools { width: 100%; }
    .acc-mes { flex: 1; }
    .acc-statement { padding: 18px 14px; }
    .acc-resumen-kpis { grid-template-columns: 1fr; }
    .acc-st { font-size: 0.84rem; }
    .acc-st-row td:nth-child(1) { display: none; }
}

/* Impresión: solo el estado financiero, en blanco y negro limpio */
@media print {
    body:has(.acc-statement) .app-header, body:has(.acc-statement) .top-nav, body:has(.acc-statement) nav,
    body:has(.acc-statement) .acc-header, body:has(.acc-statement) .acc-nav, body:has(.acc-statement) .acc-rpt-grupos,
    body:has(.acc-statement) .acc-toolbar, body:has(.acc-statement) .acc-print, body:has(.acc-statement) #toast-container,
    body:has(.acc-statement) #auth-pie, body:has(.acc-statement) .chat-widget, body:has(.acc-statement) #chat-widget { display: none !important; }
    body:has(.acc-statement) { background: #fff !important; }
    body:has(.acc-statement) .page-container { padding: 0 !important; margin: 0 !important; max-width: none !important; }
    .acc-statement { box-shadow: none; border: 0; max-width: none; padding: 0; color: #000; }
    .acc-statement__head { border-bottom-color: #000; }
    .acc-resumen-kpis > div { border: 1px solid #ddd; background: #fff; }
    .acc-st-total td, .acc-st-grand td { border-color: #000; }
}

/* ═══════════════════════════════════════════════════════════════
   DGII (src/modules/Reports.js): tarjetas de formatos, validación y vista previa.
   Hereda el sistema .acc-* de Contabilidad.
   ═══════════════════════════════════════════════════════════════ */
.dgii-plazo { font-size: 0.78rem; color: var(--text-secondary); background: var(--bg-card); border: 1px dashed var(--border-color); border-radius: 10px; padding: 8px 12px; }
.dgii-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.dgii-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 18px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dgii-card__head { display: flex; align-items: center; gap: 12px; }
.dgii-card__head h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.dgii-card__icono { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-gradient); color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 0.82rem; letter-spacing: .02em; box-shadow: var(--brand-glow); }
.dgii-card__sub { font-size: 0.74rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.dgii-card__desc { margin: 0; font-size: 0.84rem; color: var(--text-secondary); line-height: 1.45; flex: 1; }
.dgii-card__btns { display: flex; gap: 8px; }
.dgii-card__btns .btn-primary { flex: 1; padding: 9px 12px; }
.dgii-card__btns .btn-secondary { padding: 9px 12px; }
.dgii-panel { margin-bottom: 20px; }
.dgii-cerrar { color: var(--text-secondary) !important; }
.dgii-cerrar:hover { color: var(--accent-red) !important; }
.dgii-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-main); border-radius: 12px; margin-bottom: 16px; max-width: 100%; overflow-x: auto; }
.report-tab-btn { padding: 8px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.report-tab-btn.is-active { background: var(--bg-card); color: var(--accent-blue); box-shadow: var(--shadow-sm); }
.dgii-totales { max-width: 720px; }
.rep-abrir-factura { white-space: nowrap; }
.dgii-totales td:first-child { color: var(--text-secondary); font-weight: 600; }
.dgii-totales td.num { font-weight: 700; }

/* Validación previa */
.dgii-val { display: flex; gap: 14px; align-items: flex-start; border-radius: 14px; padding: 16px 18px; margin-bottom: 20px; border: 1px solid; }
.dgii-val--ok { background: rgb(16 185 129 / .10); border-color: rgb(16 185 129 / .35); color: #065f46; }
.dgii-val--aviso { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.dgii-val--error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
:root.dark .dgii-val--ok { color: #6ee7b7; }
:root.dark .dgii-val--aviso { background: rgb(245 158 11 / .12); border-color: rgb(245 158 11 / .3); color: #fcd34d; }
:root.dark .dgii-val--error { background: rgb(239 68 68 / .12); border-color: rgb(239 68 68 / .3); color: #fca5a5; }
.dgii-val__icono { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 1.05rem; }
.dgii-val--ok .dgii-val__icono { background: #10b981; color: #fff; }
.dgii-val--aviso .dgii-val__icono { background: #f59e0b; color: #fff; }
.dgii-val--error .dgii-val__icono { background: #ef4444; color: #fff; }
.dgii-val b { font-size: 0.95rem; }
.dgii-val__sub { font-size: 0.82rem; opacity: .9; margin-top: 2px; }
.dgii-val__hacer { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 14px; margin: 12px 0; }
.dgii-val__hacer-titulo { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin-bottom: 4px; }
.dgii-val__item { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border-color); font-size: 0.82rem; }
.dgii-val__campo { font-weight: 700; display: flex; flex-direction: column; }
.dgii-val__campo small { font-weight: 500; color: #92400e; }
.dgii-val__como { color: var(--text-secondary); }
.dgii-val .acc-table { background: var(--bg-card); color: var(--text-primary); border-radius: 10px; }
.dgii-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; }
.dgii-chip--error { background: rgb(239 68 68 / .14); color: #b91c1c; }
.dgii-chip--aviso { background: rgb(245 158 11 / .16); color: #92400e; }

@media (max-width: 1100px) { .dgii-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
    .dgii-cards { grid-template-columns: 1fr; gap: 10px; }
    .dgii-val__item { grid-template-columns: 1fr; gap: 2px; }
    .dgii-plazo { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Mi panel (pantalla de inicio del empleado / vendedor).
   Reutiliza las piezas .acc-* de Contabilidad; aquí solo lo propio.
   ═══════════════════════════════════════════════════════════════ */
.mi-panel { --acc-pos: #059669; --acc-neg: #dc2626; }
:root.dark .mi-panel { --acc-pos: #34d399; --acc-neg: #f87171; }
.mi-panel .mono { font-family: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace; font-size: 0.82em; }
.mi-panel .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mi-hero { background: var(--brand-gradient); border-radius: 18px; padding: 28px 26px; color: #fff; margin-bottom: 22px; box-shadow: var(--brand-glow); }
.mi-hero__fecha { font-size: 0.82rem; opacity: .85; text-transform: capitalize; }
.mi-hero__saludo { margin: 6px 0 0; font-family: var(--font-heading); font-size: 1.9rem; font-weight: 800; line-height: 1.15; }
.mi-hero__sub { margin: 8px 0 0; opacity: .92; font-size: 0.95rem; }
.mi-titulo { margin: 0 0 12px; font-size: 1rem; font-weight: 700; }
.mi-seccion { margin-bottom: 26px; }
.mi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; margin-top: 14px; }
.mi-card { min-width: 0; }
.mi-card .acc-chart { min-height: 0; }
@media (max-width: 600px) {
    .mi-hero { padding: 20px 18px; }
    .mi-hero__saludo { font-size: 1.5rem; }
    .mi-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   Publicar un producto en la tienda (Inventario → 🌐)
   ═══════════════════════════════════════════════════════════════ */
.btn-woo-publish {
    padding: 6px 12px; border: 1px solid #a5b4fc; border-radius: 6px;
    background: rgb(99 102 241 / .08); color: #4338ca;
    font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}
.btn-woo-publish:hover { background: rgb(99 102 241 / .18); border-color: var(--accent-blue); }
.btn-woo-publish.is-web { border-color: #86efac; background: rgb(16 185 129 / .10); color: #047857; }
.btn-woo-publish.is-web:hover { background: rgb(16 185 129 / .2); }
:root.dark .btn-woo-publish { color: #c7d2fe; }
:root.dark .btn-woo-publish.is-web { color: #6ee7b7; }

.woo-pub-overlay {
    position: fixed; inset: 0; z-index: 10400; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgb(15 23 42 / .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.woo-pub {
    width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
    background: var(--bg-card); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: 16px; box-shadow: var(--shadow-lg);
    padding: 22px 24px; font-family: var(--font-body);
}
.woo-pub__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.woo-pub__head h3 { margin: 0; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; }
.woo-pub__head span { font-size: 0.82rem; color: var(--text-secondary); }
.woo-pub__x { background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--text-secondary); cursor: pointer; padding: 0 4px; }
.woo-pub__x:hover { color: var(--text-primary); }

/* Vista previa: se parece a la ficha de una tienda, que es donde va a terminar. */
.woo-pub__ficha { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 16px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-main); }
.woo-pub__foto { width: 140px; height: 140px; border-radius: 12px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-color); display: grid; place-items: center; }
.woo-pub__foto img { width: 100%; height: 100%; object-fit: cover; }
.woo-pub__foto span { font-size: 0.78rem; color: var(--text-secondary); }
.woo-pub__datos { min-width: 0; }
.woo-pub__nombre { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.woo-pub__precio { font-size: 1.4rem; font-weight: 800; color: var(--accent-green); margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.woo-pub__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.woo-pub__chip { font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-secondary); }
.woo-pub__chip.ok { background: rgb(16 185 129 / .12); border-color: transparent; color: #047857; }
.woo-pub__chip.no { background: rgb(239 68 68 / .12); border-color: transparent; color: #b91c1c; }
.woo-pub__desc { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.5; max-height: 92px; overflow: auto; }

.woo-pub__aviso { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 0.82rem; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.woo-pub__aviso--ok { background: rgb(16 185 129 / .10); border-color: rgb(16 185 129 / .3); color: #047857; }
:root.dark .woo-pub__aviso { background: rgb(245 158 11 / .12); border-color: rgb(245 158 11 / .3); color: #fcd34d; }
:root.dark .woo-pub__aviso--ok { color: #6ee7b7; }
.woo-pub__opcion { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 0.84rem; color: var(--text-secondary); cursor: pointer; }
.woo-pub__btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.woo-pub__ok-box { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: rgb(16 185 129 / .10); border: 1px solid rgb(16 185 129 / .3); color: #047857; font-size: 0.86rem; display: flex; flex-direction: column; gap: 6px; }
:root.dark .woo-pub__ok-box { color: #6ee7b7; }
.woo-pub__ok-box a { color: var(--accent-blue); font-weight: 700; text-decoration: none; }
.woo-pub__ok-box a:hover { text-decoration: underline; }
.woo-pub__notas { font-size: 0.8rem; color: var(--text-secondary); }
.woo-pub__error { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 0.86rem; }
.woo-pub__error div { margin-top: 4px; font-weight: 500; }
:root.dark .woo-pub__error { background: rgb(239 68 68 / .12); border-color: rgb(239 68 68 / .3); color: #fca5a5; }

@media (max-width: 560px) {
    .woo-pub { padding: 18px 16px; }
    .woo-pub__ficha { grid-template-columns: 1fr; }
    .woo-pub__foto { width: 100%; height: 170px; }
    .woo-pub__btns { flex-direction: column-reverse; }
    .woo-pub__btns button { width: 100%; }
}


/* ─── SOLO EN CELULAR ────────────────────────────────────────────────────────
   Elementos que viven en el DOM pero solo tienen sentido en pantalla chica (la barra
   de cobro del POS, el boton de bajar la hoja). Se esconden por defecto para que una
   pantalla grande no los vea nunca. */
.solo-movil { display: none !important; }
@media (max-width: 768px) {
    #pos-mobile-bar.solo-movil { display: flex !important; }
    #pos-sheet-backdrop.solo-movil,
    #pos-cart-close.solo-movil { display: block !important; }
    .pos-page.cart-open #pos-mobile-bar.solo-movil { display: none !important; }
}


/* ─── LISTADOS EN EL CELULAR: DE TABLA A FICHAS ──────────────────────────────
   Una tabla de nueve columnas en un telefono se arrastra de lado y no deja ver el
   cliente y el monto a la vez. Las tablas marcadas con data-movil="tarjetas" se
   convierten en fichas: cada fila una tarjeta y cada celda una linea con su etiqueta,
   que sale del data-label de la celda. En pantalla grande no cambia nada. */
@media (max-width: 768px) {
    table[data-movil="tarjetas"] thead { display: none; }
    table[data-movil="tarjetas"],
    table[data-movil="tarjetas"] tbody,
    table[data-movil="tarjetas"] tr,
    table[data-movil="tarjetas"] td {
        display: block;
        width: 100%;
    }
    /* La tabla trae min-width para que las columnas respiren en escritorio; en ficha
       estorba, porque obliga al contenedor a arrastrarse de lado y corta los valores. */
    table[data-movil="tarjetas"] { min-width: 0 !important; }
    table[data-movil="tarjetas"] tr {
        border: 1px solid var(--border-color);
        border-radius: 12px;
        margin: 0 0 10px;
        padding: 10px 12px;
        background: var(--bg-card);
    }
    table[data-movil="tarjetas"] td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 5px 0;
        border: none;
        text-align: right;
        font-size: 0.86rem;
    }
    /* La etiqueta de cada linea sale de la propia celda, para no repetir textos. */
    table[data-movil="tarjetas"] td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        text-align: left;
        font-size: 0.74rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .3px;
        color: var(--text-secondary);
    }
    /* Celdas sin etiqueta (la marca de seleccion, los botones): ocupan la fila entera. */
    table[data-movil="tarjetas"] td:not([data-label]) {
        justify-content: flex-end;
        padding-top: 8px;
    }
    table[data-movil="tarjetas"] td:not([data-label]):empty { display: none; }
    table[data-movil="tarjetas"] td > div[style*="flex"] { flex-wrap: wrap; justify-content: flex-end; }
    /* Una fila vacia ("no hay facturas") no debe verse como ficha. */
    table[data-movil="tarjetas"] td.empty-state {
        display: block;
        text-align: center;
    }
    table[data-movil="tarjetas"] td.empty-state::before { content: none; }
    /* Sin scroll horizontal: ya no hace falta arrastrar la tabla. */
    .table-container:has(table[data-movil="tarjetas"]) { overflow-x: visible; }
}


/* ─── EL CHAT EN EL CELULAR ───────────────────────────────────────────────────
   La lista de conversaciones tenia 300px FIJOS. En un telefono de 375px eso dejaba
   75px para los mensajes: cada palabra en una linea y el resto fuera de la pantalla.
   En vertical, la lista pasa arriba como una tira baja y los mensajes se quedan con
   todo el ancho. */
@media (max-width: 768px) {
    .chat-page { height: calc(100vh - 110px) !important; }
    .chat-layout { flex-direction: column; }
    .chat-aside {
        width: 100% !important;
        max-height: 34vh;
        border-right: none !important;
        border-bottom: 1px solid var(--border-color);
    }
    /* min-width:0 es lo que permite que el panel se encoja: sin el, un mensaje largo
       estira el contenedor flex y empuja todo fuera de la pantalla. */
    .chat-panel { min-width: 0; }
    /* Menos de 16px hace que iOS acerque la pantalla al tocar el campo. */
    #chat-body-input { font-size: 16px; }
}