/* =============================================
   POS Restaurante – Custom Styles (Bootstrap 5)
   ============================================= */

/* Google Font: Roboto Condensed Medium */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700&display=swap');

:root {
    /* Franjas inferiores: tono claro (izq.) → intenso (dcha.), mismo matiz (estilo KPI referencia) */
    --card-strip-1a: #bfdbfe;
    --card-strip-1b: #1d4ed8;
    --card-strip-2a: #a7f3d0;
    --card-strip-2b: #0d9488;
    --card-strip-3a: #fed7aa;
    --card-strip-3b: #ea580c;
    --card-strip-4a: #fecaca;
    --card-strip-4b: #dc2626;
    --card-strip-5a: #a5f3fc;
    --card-strip-5b: #0284c7;
    --card-strip-6a: #e9d5ff;
    --card-strip-6b: #6d28d9;

    --app-background: #e9e9e9;
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 56px;
    --topbar-height: 54px;
    /* Analytics / Dashboard theme (estilo Lahomes) */
    --chart-primary: #7c3aed;
    --chart-secondary: #10b981;
    --chart-grid: rgba(0, 0, 0, 0.06);
    --chart-tooltip-bg: rgba(0, 0, 0, 0.85);
    --stat-icon-bg: #f3e8ff;
    --stat-icon-color: #7c3aed;
    --positive: #10b981;
    --negative: #ef4444;
}

body {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    background-color: var(--bs-body-bg, var(--app-background));
    color: var(--bs-body-color, #212529);
}

/* Configuración → Estilo: Select2 tipografía (muestra cada fuente en su estilo) */
.pos-ui-font-select-opt {
    padding: 0.2rem 0;
    line-height: 1.25;
}
.pos-ui-font-select-name {
    display: block;
    font-size: 1.06rem;
    font-weight: 600;
}
.pos-ui-font-select-sample {
    display: block;
    font-size: 0.8rem;
    opacity: 0.88;
    margin-top: 0.12rem;
}
.select2-container .select2-selection--single .pos-ui-font-select-picked {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}
.select2-container--default .select2-results > .select2-results__options {
    max-height: 320px;
}
body > .select2-container {
    z-index: 2050;
}

/* Configuración: editor pie de ticket a ancho completo del contenido visible */
#pie-ticket-editor-wrap .pie-ticket-quill-wrapper .ql-toolbar,
#pie-ticket-editor-wrap .pie-ticket-quill-wrapper .ql-container {
    width: 100%;
    box-sizing: border-box;
}

/* Material Icons */
.material-icons { font-size: 1.25rem; vertical-align: middle; }
.nav-icon .material-icons { font-size: 1.25rem; }
.material-icons.me-1 { margin-right: 0.25rem; }

/* ── SIDEBAR (colapsable: solo iconos cuando está cerrado) ───────────────── */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    max-height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 102;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
    transition: width 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
body.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed-width);
}
.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    padding: 1.5rem;
    transition: margin-left .25s ease;
}
body.sidebar-collapsed .main-content {
    margin-left: var(--sidebar-collapsed-width);
}
/* Colapsado: ocultar textos de enlaces y mostrar solo iconos */
body.sidebar-collapsed .sidebar-brand {
    justify-content: center;
    padding-left: .5rem;
    padding-right: .5rem;
}
/* Logo de marca: sólo visible con menú expandido */
body.sidebar-collapsed #posSidebarBrandLogo.pos-sidebar-brand-img,
body.sidebar-collapsed .sidebar-brand-logo-link {
    display: none !important;
}
.sidebar-brand-logo-link:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}
body.sidebar-collapsed .sidebar-brand .sidebar-toggle-btn {
    position: absolute;
    right: .35rem;
}
body.sidebar-collapsed .sidebar-section-label {
    display: none;
}
.sidebar-section-divider {
    margin-top: 0.375rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

/*
 * Leaflet + Bootstrap: img { max-width:100% } rompe teselas (mapa en blanco).
 * Aplica a cualquier mapa Leaflet del proyecto.
 */
.leaflet-container img,
.leaflet-container canvas {
    max-width: none !important;
}

/* Mapa / GPS: contenido a alto útil del viewport */
body.mapa-gps-fullheight .main-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
}

body.mapa-gps-fullheight .mapa-gps-viewport {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.mapa-gps-fullheight .page-header {
    flex-shrink: 0;
}

body.mapa-gps-fullheight .mapa-gps-fill-card {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* Tarjetas globales (.card) usan overflow:hidden; hay que dejar salir el dropdown de leaflet-search. */
    overflow: visible !important;
}

body.mapa-gps-fullheight .mapa-gps-fill-card > .card-body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

/* Card del buscador OSM y control: sin recorte + por encima del mapa (#mapaGpsMap z-index:1) */
body.mapa-gps-fullheight .mapa-gps-osm-search-card {
    overflow: visible !important;
    position: relative;
    z-index: 420;
}

body.mapa-gps-fullheight .mapa-gps-osm-search-card > .card-body {
    overflow: visible !important;
}

body.mapa-gps-fullheight #mapa-gps-leaflet-search-host {
    position: relative;
    z-index: 421;
}

body.mapa-gps-fullheight #mapa-gps-leaflet-search-host .leaflet-control-search {
    overflow: visible !important;
}

body.mapa-gps-fullheight #mapa-gps-leaflet-search-host .search-tooltip {
    position: absolute !important;
    z-index: 5000 !important;
}

body.mapa-gps-fullheight .mapa-gps-split-row {
    flex: 1 1 0;
    min-height: 0;
    align-items: stretch;
}

body.mapa-gps-fullheight .mapa-gps-split-row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Columna del mapa: ocupa alto disponible sin depender solo de flex-grow (Leaflet usa height:100%) */
body.mapa-gps-fullheight .mapa-gps-split-row > [class*="col-"]:last-child {
    min-height: 0;
}

/* Columna mapa + OSM: una sola columna flex; el mapa absorbe el alto restante */
body.mapa-gps-fullheight .mapa-gps-right-stack {
    flex: 1 1 auto;
    min-height: 0;
}

body.mapa-gps-fullheight .mapa-gps-inner-card {
    min-height: 0;
}

body.mapa-gps-fullheight .mapa-gps-list-scroll {
    flex: 1 1 auto;
    min-height: 0;
}

/*
 * Alto fluido: la fila estira las columnas; el mapa crece con flex (ResizeObserver en mapa-gps.js).
 */
body.mapa-gps-fullheight #mapaGpsMap.mapa-gps-leaflet-root,
body.mapa-gps-fullheight #mapaGpsMap.mapa-gps-leaflet-root.leaflet-container {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    width: 100%;
    min-height: 280px;
    height: 100% !important;
    max-height: none;
    border-radius: var(--bs-border-radius);
}

@media (max-width: 991.98px) {
    body.mapa-gps-fullheight .mapa-gps-split-row {
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    body.mapa-gps-fullheight .mapa-gps-split-row > .col-12:first-child {
        flex: 1 1 auto;
        min-height: 200px;
        max-height: none;
    }

    body.mapa-gps-fullheight .mapa-gps-split-row > .col-12:last-child {
        flex: 1 1 auto;
        min-height: 0;
    }

    body.mapa-gps-fullheight #mapaGpsMap.mapa-gps-leaflet-root,
    body.mapa-gps-fullheight #mapaGpsMap.mapa-gps-leaflet-root.leaflet-container {
        min-height: 240px;
        height: 100% !important;
        max-height: none;
    }
}
/* Ocultar solo el texto del enlace (el span que sigue a .nav-icon), no el icono dentro de .nav-icon */
body.sidebar-collapsed .sidebar-link .nav-icon + span {
    display: none;
}
body.sidebar-collapsed .sidebar-link {
    justify-content: center;
    padding: .6rem;
    color: #374151;
}
body.sidebar-collapsed .sidebar-nav {
    padding-left: 0;
    padding-right: 0;
}
body.sidebar-collapsed .sidebar-footer .badge,
body.sidebar-collapsed .sidebar-footer span.text-body {
    display: none;
}
body.sidebar-collapsed .sidebar-footer {
    justify-content: center;
    padding-left: .5rem;
    padding-right: .5rem;
}
body.sidebar-collapsed .sidebar-footer .btn {
    padding: .35rem;
}
body.sidebar-collapsed .sidebar .sidebar-footer .btn .material-icons {
    color: #374151 !important;
    fill: #374151;
}
body.sidebar-collapsed .sidebar .sidebar-brand .material-icons {
    color: #374151 !important;
    fill: #374151;
}
.sidebar-brand {
    position: relative;
    flex-shrink: 0;
}

/* Área central del menú: ocupa el espacio restante y hace scroll en móvil / ventanas bajas */
.sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.sidebar-footer {
    flex-shrink: 0;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem 1rem;
    color: #495057;
    font-size: .875rem;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
    text-decoration: none;
}
.sidebar-link:hover {
    background: #f0f4ff;
    color: #0d6efd;
    border-left-color: #b3c6ff;
}
.sidebar-link.active {
    background: #e8f0fe;
    color: #0d6efd;
    font-weight: 600;
    border-left-color: #0d6efd;
}
.sidebar-link .nav-icon { font-size: 1.1rem; display: flex; align-items: center; justify-content: center; color: inherit; }
.sidebar-link .nav-icon .material-icons { color: inherit; }
/* Colapsado: forzar color de iconos (evitar que se vean blancos) */
body.sidebar-collapsed .sidebar .sidebar-link .nav-icon,
body.sidebar-collapsed .sidebar .sidebar-link .nav-icon .material-icons {
    color: #374151 !important;
    fill: #374151;
}
body.sidebar-collapsed .sidebar .sidebar-link:hover .nav-icon,
body.sidebar-collapsed .sidebar .sidebar-link:hover .nav-icon .material-icons {
    color: #0d6efd !important;
    fill: #0d6efd;
}
body.sidebar-collapsed .sidebar .sidebar-link.active .nav-icon,
body.sidebar-collapsed .sidebar .sidebar-link.active .nav-icon .material-icons {
    color: #0d6efd !important;
    fill: #0d6efd;
}

/* ── PAGE HEADER ─────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.page-title { font-size: 1.4rem; font-weight: 700; margin: 0; }

/* ── CARDS: acento inferior (mismo patrón que PrintYourColor assets/css/dashboard.css .pyc-kpi-card)
   overflow:hidden + border-radius + border-bottom grueso sólido (--card-accent-b); ::before degradado suave arriba. */

.card {
    position: relative;
    overflow: hidden;
    --card-accent-a: var(--card-strip-1a);
    --card-accent-b: var(--card-strip-1b);
    --card-strip-height: 4px;
    border-bottom: var(--card-strip-height) solid var(--card-accent-b);
    border-radius: var(--bs-card-border-radius, 0.375rem);
}

/* Bootstrap 5 redefine en cada .card --bs-card-bg hacia var(--bs-body-bg); en claro el body es tintado y las tarjetas pierden contraste blanco. */
[data-bs-theme="light"] .card {
    --bs-card-bg: var(--pos-surface, #ffffff);
    background-color: var(--bs-card-bg);
}

/* Cabecera de tarjeta (Bootstrap usa --bs-card-cap-bg); alinearla con superficie blanca en claro */
[data-bs-theme="light"] .card > .card-header {
    --bs-card-cap-bg: var(--pos-surface, #ffffff);
    background-color: var(--pos-surface, #ffffff);
}

[data-bs-theme="light"] .card > .card-footer {
    --bs-card-cap-bg: var(--pos-surface, #ffffff);
    background-color: var(--pos-surface, #ffffff);
}

/*
 * Bootstrap 5 (.table): --bs-table-bg = var(--bs-body-bg); todas las th/td pintan ese color (no usan --bs-card-bg).
 * Por eso el interior de tarjetas con tabla seguía gris/azul como el fondo de página.
 */
[data-bs-theme="light"] .card .table {
    --bs-table-bg: var(--bs-card-bg, var(--pos-surface, #ffffff));
}

[data-bs-theme="light"] .card .table thead th {
    /* Gana sobre .table thead th { background: #f8f9fa } del propio proyecto */
    background: var(--bs-table-bg, var(--pos-surface, #ffffff));
}

[data-bs-theme="light"] .card .table tbody tr:hover > * {
    /* Gana sobre .table tbody tr:hover td y restaura overlay hover de Bootstrap */
    background-color: var(--bs-table-bg);
    box-shadow: inset 0 0 0 9999px var(--bs-table-hover-bg);
}

/* Línea superior decorativa (como .pyc-kpi-card::before en PrintYourColor) */
.card::before,
.mesa-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--card-accent-b), transparent 75%);
    opacity: 0.35;
    pointer-events: none;
}

/* Paletas distintas según posición en fila Bootstrap */
.row > [class*="col-"]:nth-child(6n + 1) .card { --card-accent-a: var(--card-strip-1a); --card-accent-b: var(--card-strip-1b); }
.row > [class*="col-"]:nth-child(6n + 2) .card { --card-accent-a: var(--card-strip-2a); --card-accent-b: var(--card-strip-2b); }
.row > [class*="col-"]:nth-child(6n + 3) .card { --card-accent-a: var(--card-strip-3a); --card-accent-b: var(--card-strip-3b); }
.row > [class*="col-"]:nth-child(6n + 4) .card { --card-accent-a: var(--card-strip-4a); --card-accent-b: var(--card-strip-4b); }
.row > [class*="col-"]:nth-child(6n + 5) .card { --card-accent-a: var(--card-strip-5a); --card-accent-b: var(--card-strip-5b); }
.row > [class*="col-"]:nth-child(6n + 6) .card { --card-accent-a: var(--card-strip-6a); --card-accent-b: var(--card-strip-6b); }

/* Dashboard KPI: degradado alineado con cada métrica (prioridad sobre rotación por columna; orden drag-safe por data-kpi) */
#dashboard-kpi-row .dashboard-kpi-item[data-kpi="ventas-hoy"] .card {
    --card-accent-a: #bbf7d0;
    --card-accent-b: #059669;
}
#dashboard-kpi-row .dashboard-kpi-item[data-kpi="pedidos-activos"] .card {
    --card-accent-a: #fde68a;
    --card-accent-b: #ea580c;
}
#dashboard-kpi-row .dashboard-kpi-item[data-kpi="mesas-ocupadas"] .card {
    --card-accent-a: #fecaca;
    --card-accent-b: #dc2626;
}
#dashboard-kpi-row .dashboard-kpi-item[data-kpi="clientes"] .card {
    --card-accent-a: #e9d5ff;
    --card-accent-b: #7c3aed;
}

/* Tarjetas hermanas directas bajo formulario (p. ej. Configuración) */
form > .card:nth-child(6n + 1) { --card-accent-a: var(--card-strip-1a); --card-accent-b: var(--card-strip-1b); }
form > .card:nth-child(6n + 2) { --card-accent-a: var(--card-strip-2a); --card-accent-b: var(--card-strip-2b); }
form > .card:nth-child(6n + 3) { --card-accent-a: var(--card-strip-3a); --card-accent-b: var(--card-strip-3b); }
form > .card:nth-child(6n + 4) { --card-accent-a: var(--card-strip-4a); --card-accent-b: var(--card-strip-4b); }
form > .card:nth-child(6n + 5) { --card-accent-a: var(--card-strip-5a); --card-accent-b: var(--card-strip-5b); }
form > .card:nth-child(6n + 6) { --card-accent-a: var(--card-strip-6a); --card-accent-b: var(--card-strip-6b); }

/* Tarjeta inmediatamente después de un formulario (p. ej. Configuración: bloque push) */
.main-content form.mb-4 + .card,
.main-content form + .card {
    --card-accent-a: var(--card-strip-2a);
    --card-accent-b: var(--card-strip-2b);
}

/* Rejilla cocina */
.kitchen-grid > .kitchen-card:nth-child(6n + 1) { --card-accent-a: var(--card-strip-1a); --card-accent-b: var(--card-strip-1b); }
.kitchen-grid > .kitchen-card:nth-child(6n + 2) { --card-accent-a: var(--card-strip-2a); --card-accent-b: var(--card-strip-2b); }
.kitchen-grid > .kitchen-card:nth-child(6n + 3) { --card-accent-a: var(--card-strip-3a); --card-accent-b: var(--card-strip-3b); }
.kitchen-grid > .kitchen-card:nth-child(6n + 4) { --card-accent-a: var(--card-strip-4a); --card-accent-b: var(--card-strip-4b); }
.kitchen-grid > .kitchen-card:nth-child(6n + 5) { --card-accent-a: var(--card-strip-5a); --card-accent-b: var(--card-strip-5b); }
.kitchen-grid > .kitchen-card:nth-child(6n + 6) { --card-accent-a: var(--card-strip-6a); --card-accent-b: var(--card-strip-6b); }

/* Mesas */
.floor-grid > a.mesa-card:nth-child(6n + 1),
.floor-grid > .mesa-card:nth-child(6n + 1) { --card-accent-a: var(--card-strip-1a); --card-accent-b: var(--card-strip-1b); }
.floor-grid > a.mesa-card:nth-child(6n + 2),
.floor-grid > .mesa-card:nth-child(6n + 2) { --card-accent-a: var(--card-strip-2a); --card-accent-b: var(--card-strip-2b); }
.floor-grid > a.mesa-card:nth-child(6n + 3),
.floor-grid > .mesa-card:nth-child(6n + 3) { --card-accent-a: var(--card-strip-3a); --card-accent-b: var(--card-strip-3b); }
.floor-grid > a.mesa-card:nth-child(6n + 4),
.floor-grid > .mesa-card:nth-child(6n + 4) { --card-accent-a: var(--card-strip-4a); --card-accent-b: var(--card-strip-4b); }
.floor-grid > a.mesa-card:nth-child(6n + 5),
.floor-grid > .mesa-card:nth-child(6n + 5) { --card-accent-a: var(--card-strip-5a); --card-accent-b: var(--card-strip-5b); }
.floor-grid > a.mesa-card:nth-child(6n + 6),
.floor-grid > .mesa-card:nth-child(6n + 6) { --card-accent-a: var(--card-strip-6a); --card-accent-b: var(--card-strip-6b); }

/* ── CARDS (estilo analytics / dashboard) ─── */
.stat-card {
    border: none;
    border-bottom: var(--card-strip-height, 4px) solid var(--card-accent-b);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    background-color: #fff;
    transition: box-shadow 0.2s;
}
.stat-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.stat-card .stat-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--stat-icon-bg);
    color: var(--stat-icon-color);
}
.stat-card .stat-icon-wrap .material-icons { font-size: 1.5rem; }
.stat-card .stat-icon { font-size: 2rem; opacity: .8; }
.stat-card .stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: #1f2937; }
.stat-card .stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; font-weight: 500; }
.stat-card .stat-trend { font-size: .75rem; font-weight: 600; }
.stat-card .stat-trend.positive { color: var(--positive); }
.stat-card .stat-trend.negative { color: var(--negative); }

/* ── Admin: KPI ingresos (icono izq., texto der.; Material Icons) ─── */
.admin-kpi-stat .stat-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 14px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-kpi-stat .stat-icon-wrap .material-icons {
    font-size: 1.75rem;
    line-height: 1;
}
.admin-kpi-stat .stat-main .stat-value {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.2rem;
}
.admin-kpi-stat .stat-main .stat-label {
    margin-bottom: 0;
}

.stat-icon-wrap.stat-icon-wrap--admin-pay {
    background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 100%);
    color: #047857 !important;
    box-shadow: 0 1px 3px rgba(5, 150, 105, 0.15);
}
.stat-icon-wrap.stat-icon-wrap--admin-orders {
    background: linear-gradient(145deg, #eff6ff 0%, #dbeafe 100%);
    color: #1d4ed8 !important;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.15);
}
.stat-icon-wrap.stat-icon-wrap--admin-base {
    background: linear-gradient(145deg, #ecfeff 0%, #cffafe 100%);
    color: #0e7490 !important;
    box-shadow: 0 1px 3px rgba(8, 145, 178, 0.15);
}
.stat-icon-wrap.stat-icon-wrap--admin-iva {
    background: linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%);
    color: #b45309 !important;
    box-shadow: 0 1px 3px rgba(217, 119, 6, 0.15);
}

/* Dashboard KPI: reordenación por arrastre */
#dashboard-kpi-row .dashboard-kpi-item {
    cursor: grab;
}
#dashboard-kpi-row .dashboard-kpi-item.dashboard-kpi-dragging {
    cursor: grabbing;
    opacity: 0.9;
}
#dashboard-kpi-row .dashboard-kpi-item.dashboard-kpi-drag-over {
    outline: 2px dashed #0d6efd;
    outline-offset: 2px;
    border-radius: 0.375rem;
}
#dashboard-kpi-row .dashboard-kpi-card .dashboard-kpi-drag-hint {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    font-size: 1.125rem;
    opacity: 0.4;
    pointer-events: none;
    line-height: 1;
}
/* Cards de contenido (gráficos, tablas) */
.card.border-0.shadow-sm {
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: none;
    border-bottom: var(--card-strip-height, 4px) solid var(--card-accent-b);
}
.card.border-0.shadow-sm .card-header {
    border-radius: 12px 12px 0 0;
    font-size: .95rem;
    font-weight: 600;
    color: #374151;
}
.card.border-0.shadow-sm .card-body { border-radius: 0 0 12px 12px; }

/*
 * Grillas Bootstrap: misma altura de tarjetas por fila.
 * Las columnas (.col-*) ya se estiran al alto máximo del row; falta que .card llene esa altura.
 * Excepción: clase .no-equal-card-heights en el .row.
 */
.main-content .row:not(.no-equal-card-heights) > [class*="col-"] > .card {
    height: 100%;
}

/* ── TABLES ──────────────────────────────── */
.table thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}
.table tbody tr:hover td { background: #f8f9fa; }

/* DataTables: separación dentro de `.card-body.p-0` */
.card-body.p-0 .dt-container {
    padding: 0.5rem 0.75rem 0.35rem;
}

/* DataTables: exportación PDF / Excel junto al buscador (topEnd) */
div.dt-container div.dt-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    margin-inline-end: 0.65rem;
}
div.dt-container div.dt-layout-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

/* PDF / Excel: las cuatro esquinas redondeadas (Bootstrap .btn-group suele dejar radios a 0 entre botones) */
div.dt-container div.dt-buttons > .dt-button.btn {
    border-radius: var(--bs-border-radius-lg, 0.5rem);
}
div.dt-container div.dt-buttons .btn-group > .dt-button.btn,
div.dt-container div.dt-buttons .btn-group > .btn.dt-button {
    border-radius: var(--bs-border-radius-lg, 0.5rem) !important;
}

/* ── BADGES (estados) ────────────────────── */
.badge-abierto    { background: #198754; color: #fff; }
.badge-enviado    { background: #fd7e14; color: #fff; }
.badge-listo      { background: #0dcaf0; color: #000; }
.badge-cobrado    { background: #6c757d; color: #fff; }
.badge-cancelado  { background: #dc3545; color: #fff; }
.badge-libre      { background: #198754; color: #fff; }
.badge-ocupada    { background: #dc3545; color: #fff; }
.badge-reservada  { background: #ffc107; color: #000; }

/* ── PRODUCT CARDS (Catalog) ─────────────── */
.product-card {
    border: 1px solid #e9ecef;
    border-bottom: var(--card-strip-height, 4px) solid var(--card-accent-b);
    border-radius: .75rem;
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
    cursor: pointer;
}
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
.product-card .card-img-wrap {
    height: 140px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.product-card .card-img-wrap img {
    width: 100%; height: 100%; object-fit: cover;
}
.product-card .card-img-wrap .no-img {
    font-size: 3rem; opacity: .4;
}
.product-card .card-body { padding: .75rem; }
.product-card .prod-price {
    font-size: 1.15rem; font-weight: 700; color: #0d6efd;
}

/* ── MESAS (Floor Plan) ──────────────────── */
.floor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 1rem;
}
.mesa-card,
a.mesa-card {
    --card-accent-a: var(--card-strip-1a);
    --card-accent-b: var(--card-strip-1b);
    --card-strip-height: 4px;
    position: relative;
    overflow: hidden;
    border-radius: .75rem;
    padding: 1rem .75rem;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    border-bottom: var(--card-strip-height) solid var(--card-accent-b);
    transition: transform .15s, box-shadow .15s;
    text-decoration: none;
    display: block;
}
.mesa-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.mesa-card.libre     { background-color: #d1e7dd; border-color: #198754; color: #0a3622; }
.mesa-card.ocupada   { background-color: #f8d7da; border-color: #dc3545; color: #58151c; }
.mesa-card.reservada { background-color: #fff3cd; border-color: #ffc107; color: #664d03; }
.mesa-card .mesa-num  { font-size: 1.5rem; font-weight: 700; }
.mesa-card .mesa-name { font-size: .75rem; font-weight: 500; }
.mesa-card .mesa-cap  { font-size: .7rem; opacity: .7; }
.mesa-card .mesa-icon { font-size: 1.6rem; }

/* Mesas: cards de zona; Sortable en .mesa-zonas-sort-root móvil solo las .mesa-zona-card--sortable */
.mesa-zona-card .card-body {
    min-width: 0;
}
.floor-grid.mesa-zone-grid--solo-vacia {
    min-height: 5.5rem;
    border: 2px dashed #ced4da;
    border-radius: 0.75rem;
    background: rgba(13, 110, 253, 0.04);
}
.mesa-zona-card {
    min-height: 0;
}
.mesa-zonas-sort-root > .mesa-zona-card--sortable.mesa-sortable-chosen {
    transform: translateZ(0);
}
button.mesa-zona-drag-handle {
    cursor: grab;
    touch-action: none;
    appearance: none;
    flex-shrink: 0;
}
button.mesa-zona-drag-handle:active {
    cursor: grabbing;
}
.mesa-zona-card--sortable.mesa-sortable-chosen button.mesa-zona-drag-handle {
    cursor: grabbing;
}
.mesa-sortable-ghost {
    opacity: 0.55;
}
.mesa-sortable-drag {
    opacity: 0.95;
}

/* ── POS / TPV ───────────────────────────── */
.fullscreen-mode {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    max-height: 100svh;
    overflow: hidden;
    /* Evita “rebote” gris en iOS detrás de la barra del sistema */
    overscroll-behavior: none;
    /* Altura efectiva de la topbar (notch + márgenes) para cálculos en TPV */
    --topbar-height: calc(54px + env(safe-area-inset-top, 0px) + 1rem);
}

/* TPV / Cocina: barra superior con aire y respeto al notch / barra de estado */
body.fullscreen-mode .pos-topbar {
    flex-shrink: 0;
    align-items: center;
    box-sizing: border-box;
    min-height: auto;
    padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.pos-topbar-title {
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Cocina: barra con muchos controles; el wrap con height fija solapaba la rejilla en móvil */
body.fullscreen-cocina .pos-topbar {
    height: auto;
    min-height: var(--topbar-height);
    align-items: flex-start;
    gap: 0.5rem 1rem;
    row-gap: 0.5rem;
    padding-top: calc(0.45rem + env(safe-area-inset-top, 0px));
    padding-bottom: 0.45rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
body.fullscreen-cocina .pos-topbar .material-icons {
    vertical-align: middle;
}
.pos-body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

/* TPV: contenedor de las dos columnas (catálogo + pedido) */
.tpv-layout {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-height: 0;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    position: relative;
}
/* Repartidor: TPV solo cobro (sin catálogo) */
.tpv-layout.tpv-repartidor-cobro .tpv-products-panel {
    display: none !important;
}
.tpv-layout.tpv-repartidor-cobro .tpv-products-backdrop {
    display: none !important;
}
.tpv-layout.tpv-repartidor-cobro .tpv-cart-panel {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    border-left: none;
}
.tpv-products-backdrop {
    display: none;
}

/* Products panel */
.tpv-products-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f8f9fa;
}
.tpv-cat-tabs {
    display: flex;
    gap: .35rem;
    padding: .6rem .75rem;
    overflow-x: auto;
    background: #fff;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
    scrollbar-width: thin;
}
.tpv-cat-tabs::-webkit-scrollbar { height: 4px; }
.tpv-cat-tabs::-webkit-scrollbar-thumb { background: #dee2e6; border-radius: 2px; }

.cat-btn {
    flex-shrink: 0;
    padding: .3rem .85rem;
    border-radius: 2rem;
    border: 2px solid transparent;
    background: #f0f0f0;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.cat-btn:hover { background: #e0e7ff; }
.cat-btn.active { color: #fff; border-color: transparent; }

.tpv-product-grid {
    flex: 1;
    overflow-y: auto;
    padding: .75rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .6rem;
    align-content: start;
}

.tpv-product-btn {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: .65rem;
    padding: .65rem .5rem;
    text-align: center;
    cursor: pointer;
    transition: transform .1s, box-shadow .15s, border-color .15s;
    user-select: none;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.tpv-product-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 14px rgba(0,0,0,.1);
    border-color: #0d6efd;
}
.tpv-product-btn:active { transform: scale(.97); }
.tpv-product-btn .prod-emoji { font-size: 2rem; display: block; margin-bottom: .3rem; align-self: center; }
.tpv-product-btn .prod-name  { font-size: .78rem; font-weight: 600; line-height: 1.2; }
.tpv-product-btn .prod-price { font-size: .9rem; font-weight: 700; color: #0d6efd; margin-top: .2rem; }
/* Imagen a todo el ancho visible de la card (compensa el padding del botón) */
.tpv-product-btn .prod-img {
    display: block;
    width: calc(100% + 1rem);
    max-width: none;
    margin: -0.65rem -0.5rem 0.35rem -0.5rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    border-radius: 0.65rem 0.65rem 0.4rem 0.4rem;
    flex-shrink: 0;
}

/* Cart panel */
.tpv-cart-panel {
    width: 340px;
    min-width: 340px;
    min-height: 0;
    background: #fff;
    border-left: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tpv-cart-header {
    padding: .55rem .75rem;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    background: #f8f9fa;
    flex-shrink: 0;
}
.tpv-cart-header.para-llevar-active {
    background: #fff3cd;
    border-bottom-color: #ffc107;
}
.tpv-cart-items {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .5rem;
    -webkit-overflow-scrolling: touch;
}
/* Totales + acciones agrupados (móvil: pie fijo al viewport) */
.tpv-cart-footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
}
.cart-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .35rem;
    border-bottom: 1px solid #f0f0f0;
}
.cart-item-name  { font-size: .82rem; font-weight: 500; flex: 1; }
.cart-qty-ctrl   { display: flex; align-items: center; gap: .25rem; }
.cart-qty-btn    { width: 24px; height: 24px; border: 1px solid #dee2e6; border-radius: .35rem; background: #f8f9fa; font-size: .85rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cart-qty-btn:hover { background: #e0e0e0; }
.cart-qty        { font-size: .85rem; font-weight: 600; min-width: 18px; text-align: center; }
.cart-item-price { font-size: .85rem; font-weight: 600; color: #0d6efd; min-width: 52px; text-align: right; }
.cart-item-del   { color: #dc3545; cursor: pointer; font-size: 1rem; background: none; border: none; padding: 0 .1rem; }

.tpv-cart-totals {
    padding: .75rem 1rem;
    padding-bottom: .5rem;
    border-top: 1px solid #dee2e6;
    font-size: .875rem;
    flex-shrink: 0;
    background: #fff;
}
.tpv-cart-totals .total-row { display: flex; justify-content: space-between; margin-bottom: .2rem; }
.tpv-cart-totals .total-grand { font-size: 1.2rem; font-weight: 700; color: #0d6efd; }

.tpv-cart-actions {
    padding: .65rem .75rem;
    padding-bottom: calc(.65rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex-shrink: 0;
    background: #fff;
}
/* Botones principales del TPV: altura táctil sin ocupar tanto en móvil */
.tpv-btn-action {
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
}
.tpv-btn-secondary {
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
}

/* ── COCINA ──────────────────────────────── */
.pos-body .kitchen-grid {
    width: 100%;
    min-height: 0;
}
.kitchen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    padding: .75rem;
    overflow-y: auto;
    align-content: start;
    flex: 1;
}
.kitchen-card { border-radius: .75rem; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.kitchen-card .k-header {
    padding: .6rem 1rem;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    font-size: .9rem;
}
.kitchen-card .k-header > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}
.kitchen-card .k-header > div:last-child {
    flex-shrink: 0;
}
.kitchen-card.estado-enviado  .k-header { background: #ffc107; color: #000; }
.kitchen-card.estado-listo    .k-header { background: #198754; color: #fff; }
.kitchen-item { display: flex; align-items: center; padding: .45rem .9rem; border-bottom: 1px solid #f0f0f0; gap: .5rem; }
.kitchen-item:last-child { border-bottom: none; }
.kitchen-item .ki-qty  { font-weight: 700; font-size: .95rem; min-width: 24px; }
.kitchen-item .ki-name { flex: 1 1 120px; font-size: .85rem; min-width: 0; }
.kitchen-item .ki-badge { font-size: .7rem; }

@media (max-width: 576px) {
    .kitchen-grid {
        grid-template-columns: 1fr;
        padding: .5rem;
        gap: .75rem;
    }
    .kitchen-item {
        flex-wrap: wrap;
        align-items: flex-start;
    }
}
/* ── NOTIFICACIÓN PEDIDO LISTO ───────────── */
@keyframes notifyPulse {
    0%,100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(25,135,84,.5); }
    50%      { transform: scale(1.12); box-shadow: 0 0 0 10px rgba(25,135,84,0); }
}
@keyframes notifySlide {
    from { opacity:0; transform: translateY(-18px); }
    to   { opacity:1; transform: translateY(0); }
}
@keyframes topBarAnim {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.notify-ready-card {
    border-radius: 1rem !important;
    animation: notifySlide .3s ease;
}
.notify-top-bar {
    height: 5px;
    background: linear-gradient(90deg, #198754, #20c997, #198754);
    background-size: 200% 100%;
    animation: topBarAnim 1.8s linear infinite;
}
.notify-bell-wrap {
    width: 52px;
    height: 52px;
    background: #d1e7dd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: notifyPulse 1.4s ease-in-out infinite;
}
.notify-bell-icon {
    font-size: 1.5rem;
    color: #198754;
}

/* ── LOGIN ───────────────────────────────── */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
}
.login-card {
    width: 100%;
    max-width: 400px;
    border-radius: 1rem;
    border: none;
    border-bottom: var(--card-strip-height, 4px) solid var(--card-accent-b);
    overflow: hidden;
}

/* Tabla pedidos recientes: texto centrado verticalmente */
.table-align-middle th,
.table-align-middle td {
    vertical-align: middle;
}
.table-align-middle td.col-estado {
    padding: 5px;
}

/* Botón táctil: área mínima para pantallas táctiles (≥44px) */
.btn-touch {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Móvil (< md): sidebar como drawer oculto; el FAB solo con max-width:768px (alineado con el JS) ── */
.sidebar-mobile-trigger {
    display: none !important;
}

.sidebar-mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2030;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

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

/* ── RESPONSIVE ──────────────────────────── */
@media (max-width: 768px) {
    .sidebar-mobile-trigger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 20px;
        left: 20px;
        right: auto;
        bottom: auto;
        width: 25px;
        height: 25px;
        min-width: 25px;
        min-height: 25px;
        z-index: 160;
        padding: 0;
        gap: 0;
        line-height: 1;
        border-radius: 4px !important;
        box-shadow: 0 6px 20px rgba(13, 110, 253, 0.45);
    }
    .sidebar-mobile-trigger .material-icons {
        font-size: 16px;
        display: block;
        height: 20px;
    }
    .page-title {
        margin-left: 30px;
    }

    /* Vista principal a ancho completo (sin gutter izquierdo reservado al FAB anterior) */
    .main-content {
        margin-left: 0 !important;
        padding: 1rem;
        /* Espacio bajo todo el contenido por el FAB fijo inferior */
        padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    }
    body.sidebar-collapsed .main-content {
        margin-left: 0 !important;
    }

    /* Drawer: sidebar fuera de pantalla; al abrir, ancho nominal y contenido íntegro */
    body.sidebar-collapsed .sidebar {
        width: min(288px, 88vw) !important;
    }
    .sidebar {
        transform: translate3d(-102%, 0, 0);
        transition: transform 0.28s ease;
        width: min(288px, 88vw) !important;
        z-index: 2040;
        box-shadow: 8px 0 28px rgba(0, 0, 0, 0.18);
        will-change: transform;
        /* Ocultar el modo solo-iconos cuando el panel está cerrado/abriéndose en móvil */
    }
    body.sidebar-mobile-open .sidebar {
        transform: translate3d(0, 0, 0);
    }
    body.sidebar-mobile-open.sidebar-collapsed .sidebar-link .nav-icon + span {
        display: inline;
    }
    body.sidebar-mobile-open.sidebar-collapsed .sidebar-link {
        justify-content: flex-start;
        padding: .5rem 1rem;
    }
    body.sidebar-mobile-open.sidebar-collapsed .sidebar-section-label {
        display: block;
    }
    body.sidebar-mobile-open.sidebar-collapsed .sidebar-footer .badge,
    body.sidebar-mobile-open.sidebar-collapsed .sidebar-footer span.text-body {
        display: inline;
    }
    body.sidebar-mobile-open.sidebar-collapsed .sidebar-footer {
        justify-content: flex-start;
    }
    body.sidebar-mobile-open .sidebar-mobile-backdrop {
        display: block;
    }

    /* El FAB menú no compite visualmente con el panel abierto */
    body.sidebar-mobile-open .sidebar-mobile-trigger {
        visibility: hidden;
        pointer-events: none;
    }

    /* Footer del drawer: respetar barra de inicio / gestos en iOS */
    .sidebar .sidebar-footer {
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    }

    /* TPV móvil: solo columna del pedido (POS); catálogo en overlay a pantalla completa */
    /* Recorte del pos-body: el overlay fixed necesita ver el viewport (Safari / Chrome móvil) */
    body.fullscreen-mode.tpv-catalog-open .pos-body {
        overflow: visible;
    }
    .fullscreen-mode:has(#tpv-layout.tpv-products-open) .pos-body {
        overflow: visible;
    }
    .fullscreen-mode #tpv-layout.tpv-products-open {
        overflow: visible;
    }
    /* Evita scroll de fondo cuando el catálogo cubre toda la pantalla */
    body.fullscreen-mode.tpv-catalog-open {
        overflow: hidden;
        width: 100%;
    }

    /* El carrito no debe interceptar taps sobre el overlay del catálogo */
    #tpv-layout.tpv-products-open .tpv-cart-panel {
        pointer-events: none;
        z-index: 1;
        position: relative;
    }

    #tpv-layout.tpv-products-open .tpv-products-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        background: rgba(0, 0, 0, 0.45);
        pointer-events: auto;
    }

    /*
     * Catálogo a pantalla completa en el viewport (no bajo solo pos-body).
     * Importante: no usar transform en el mismo elemento que position:fixed;
     * en Safari/iOS ROMPE el viewport y aparecen bandas, solapamiento con la cabecera del pedido, etc.
     * Animamos con left (-100%) en lugar de translateX.
     */
    .tpv-layout .tpv-products-panel {
        position: fixed;
        top: 0;
        left: -100%;
        right: auto;
        width: 100%;
        max-width: none;
        height: 100%;
        height: 100dvh;
        max-height: 100dvh;
        bottom: auto;
        z-index: 1050;
        flex: none !important;
        box-sizing: border-box;
        margin: 0;
        transition: left 0.28s ease;
        box-shadow: 4px 0 18px rgba(0, 0, 0, 0.12);
        display: flex;
        flex-direction: column;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
        pointer-events: auto;
        overflow-x: hidden;
        overflow-y: hidden;
        /* Critical: omitir transform/isolation aquí para que fixed sea respecto al viewport */
    }
    .tpv-layout.tpv-products-open .tpv-products-panel {
        left: 0;
        right: 0;
        width: 100%;
    }
    .tpv-layout:not(.tpv-products-open) .tpv-products-panel {
        pointer-events: none;
    }
    .tpv-layout .tpv-product-grid {
        flex: 1;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
        overflow-x: hidden;
        max-width: 100%;
        width: 100%;
        padding: .5rem;
        padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
        gap: .45rem;
        /* Sin auto-fill: evita columnas fantasmas cortadas a la derecha */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        box-sizing: border-box;
    }
    /* Pantallas algo más anchas en el mismo breakpoint: hasta 3 columnas */
    @media (max-width: 768px) and (min-width: 420px) {
        .tpv-layout .tpv-product-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            padding: .55rem .6rem;
            padding-bottom: calc(.55rem + env(safe-area-inset-bottom, 0px));
        }
    }
    .tpv-layout .tpv-product-btn {
        min-width: 0;
        max-width: 100%;
    }
    .tpv-layout .tpv-product-btn .prod-name {
        overflow-wrap: break-word;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
    .tpv-layout .tpv-products-panel .tpv-cat-tabs {
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }
    .tpv-layout .tpv-products-mobile-bar {
        position: relative;
        z-index: 2;
        padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
        box-sizing: border-box;
    }
    .tpv-layout .tpv-cart-panel {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 0 !important;
        min-height: 0 !important;
        border-left: none;
        box-sizing: border-box;
    }
    /* Lista con altura máxima: evita franja blanca enorme; el pie va fijo abajo */
    .tpv-layout .tpv-cart-items {
        flex: 0 1 auto !important;
        /* Reservar ~cabecera del pedido + pie fijo (totales + botones) */
        max-height: calc(100dvh - var(--topbar-height) - min(240px, 38vh));
        min-height: 0;
        padding-bottom: 0.25rem;
        box-sizing: border-box;
    }
    .tpv-layout .tpv-cart-footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        border-top: 1px solid #dee2e6;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        max-height: min(52vh, 420px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tpv-layout .tpv-cart-footer .tpv-cart-totals {
        padding: 0.5rem 0.65rem;
        padding-top: 0.55rem;
        border-top: none;
    }
    .tpv-layout .tpv-cart-footer .tpv-cart-totals .total-grand {
        font-size: 1.1rem;
    }
    .tpv-layout .tpv-cart-footer .tpv-cart-actions {
        padding-top: 0;
        padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
        gap: 0.35rem;
        border-top: none;
    }
    /* Catálogo a pantalla completa: ocultar pie del pedido detrás para no interferir visualmente */
    .tpv-layout.tpv-products-open .tpv-cart-footer {
        visibility: hidden;
        pointer-events: none;
    }

    /* "Para llevar": no comprimir texto contra el borde */
    .tpv-layout #btn-para-llevar {
        padding: 0.42rem 0.72rem !important;
        font-size: 0.74rem !important;
        line-height: 1.25;
        white-space: nowrap;
        flex-shrink: 0;
    }
    /* Botón compacto para cabecera del pedido en una sola línea */
    .tpv-layout #tpv-open-products.tpv-btn-open-catalog {
        padding: 0.18rem 0.42rem;
        font-size: 0.7rem;
        font-weight: 600;
        line-height: 1.15;
        gap: 0.12rem !important;
        min-height: 0;
        border-radius: 0.35rem;
        white-space: nowrap;
    }
    .tpv-layout #tpv-open-products.tpv-btn-open-catalog .tpv-btn-open-catalog-icon {
        font-size: 16px;
        width: 16px;
        height: 16px;
        line-height: 16px;
    }
    .tpv-layout .tpv-cart-header {
        padding: 0.4rem 0.5rem;
    }
    .tpv-layout .tpv-cart-header > .d-flex {
        gap: 0.35rem !important;
        align-items: center;
    }
    .tpv-layout .tpv-cart-header .d-flex.gap-2 {
        gap: 0.35rem !important;
    }
    @media (max-width: 400px) {
        .tpv-layout #tpv-open-products.tpv-btn-open-catalog .tpv-btn-open-catalog-label {
            display: none;
        }
        .tpv-layout #tpv-open-products.tpv-btn-open-catalog {
            padding: 0.2rem 0.35rem;
        }
    }
}

/* ── Modales: pantalla completa en móvil (< 768px)
   !important: vence estilos inline tipo style="max-width:800px" en PHP ─── */
@media (max-width: 767.98px) {
    body.modal-open {
        overflow: hidden;
    }
    body .modal {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body .modal.show .modal-dialog {
        transform: none !important;
    }
    body .modal .modal-dialog {
        margin: 0 !important;
        max-width: none !important;
        width: 100vw !important;
        min-width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 0 !important;
        align-items: stretch !important;
    }
    body .modal .modal-dialog.modal-dialog-centered {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        align-items: stretch !important;
    }
    body .modal .modal-content {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: none !important;
        border-radius: 0 !important;
        border-left: none;
        border-right: none;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        margin: 0 auto !important;
    }
    body .modal .modal-dialog-scrollable .modal-body {
        overflow-y: auto !important;
        flex: 1 1 auto !important;
        min-height: 0;
    }
}

/* ── Modales: superficie blanca en tema claro (.cursor/rules/modales-tema-claro.mdc) ── */
html:not([data-bs-theme="dark"]) .modal-content,
[data-bs-theme="light"] .modal-content {
    background-color: #ffffff !important;
    color: var(--bs-body-color, #212529);
}
html:not([data-bs-theme="dark"]) .modal-header,
html:not([data-bs-theme="dark"]) .modal-body,
html:not([data-bs-theme="dark"]) .modal-footer,
[data-bs-theme="light"] .modal-header,
[data-bs-theme="light"] .modal-body,
[data-bs-theme="light"] .modal-footer {
    background-color: #ffffff !important;
}
html:not([data-bs-theme="dark"]) .modal-content .modal-footer.bg-light,
html:not([data-bs-theme="dark"]) .modal-content .bg-light,
[data-bs-theme="light"] .modal-content .modal-footer.bg-light,
[data-bs-theme="light"] .modal-content .bg-light {
    background-color: #ffffff !important;
}
html:not([data-bs-theme="dark"]) .modal-content .bg-body,
html:not([data-bs-theme="dark"]) .modal-content .bg-body-secondary,
[data-bs-theme="light"] .modal-content .bg-body,
[data-bs-theme="light"] .modal-content .bg-body-secondary {
    background-color: #ffffff !important;
}

/* Dark / tema variables (Bootstrap + pos-ui-theme.js) */
[data-bs-theme="dark"] .sidebar-link {
    color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .sidebar-link:hover,
[data-bs-theme="dark"] .sidebar-link.active {
    color: var(--bs-primary);
}
[data-bs-theme="dark"] {
    --chart-grid: rgba(255, 255, 255, 0.08);
    --chart-tooltip-bg: rgba(22, 27, 34, 0.92);
}

/* Tarjetas KPI (stat-card fuerza fondo blanco en light; en dark debe alinearse con la superficie) */
[data-bs-theme="dark"] .stat-card {
    background-color: var(--bs-card-bg, var(--metronic-surface, #161b22));
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
[data-bs-theme="dark"] .stat-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
[data-bs-theme="dark"] .stat-card .stat-value {
    color: var(--bs-emphasis-color, var(--bs-body-color));
}
[data-bs-theme="dark"] .stat-card .stat-label {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .admin-kpi-stat .stat-main .stat-value.text-success {
    color: #34d399 !important;
}
[data-bs-theme="dark"] .admin-kpi-stat .stat-main .stat-value.text-primary {
    color: var(--bs-primary) !important;
}
[data-bs-theme="dark"] .admin-kpi-stat .stat-main .stat-value.text-info {
    color: #22d3ee !important;
}
[data-bs-theme="dark"] .admin-kpi-stat .stat-main .stat-value.text-warning {
    color: #fbbf24 !important;
}
[data-bs-theme="dark"] .stat-icon-wrap.stat-icon-wrap--admin-pay {
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.28), rgba(52, 211, 153, 0.1));
    color: #6ee7b7 !important;
    box-shadow: none;
}
[data-bs-theme="dark"] .stat-icon-wrap.stat-icon-wrap--admin-orders {
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.28), rgba(96, 165, 250, 0.1));
    color: #93c5fd !important;
    box-shadow: none;
}
[data-bs-theme="dark"] .stat-icon-wrap.stat-icon-wrap--admin-base {
    background: linear-gradient(145deg, rgba(6, 182, 212, 0.26), rgba(34, 211, 238, 0.1));
    color: #67e8f9 !important;
    box-shadow: none;
}
[data-bs-theme="dark"] .stat-icon-wrap.stat-icon-wrap--admin-iva {
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.24), rgba(252, 211, 77, 0.1));
    color: #fcd34d !important;
    box-shadow: none;
}

/* Cards de contenido tipo dashboard / admin: mismo fondo card + cabeceras (bg-white PHP queda aclarado aquí) */
[data-bs-theme="dark"] .card.border-0.shadow-sm {
    background-color: var(--bs-card-bg, var(--metronic-surface));
}
[data-bs-theme="dark"] .card.border-0.shadow-sm .card-header {
    background-color: var(--bs-secondary-bg, var(--metronic-surface-2, #21262d)) !important;
    border-bottom-color: var(--bs-border-color, var(--metronic-card-border)) !important;
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .card.border-0.shadow-sm .card-header.bg-white {
    background-color: var(--bs-secondary-bg, var(--metronic-surface-2)) !important;
}
[data-bs-theme="dark"] .card.border-0.shadow-sm .card-body {
    background-color: var(--bs-card-bg, var(--metronic-surface));
}

/* Cabeceras de cualquier tarjeta con utilidad Bootstrap bg=white (Mesas zonas, admin, estadísticas…) */
[data-bs-theme="dark"] .card-header.bg-white {
    background-color: var(--bs-secondary-bg, var(--metronic-surface-2)) !important;
    border-bottom-color: var(--bs-border-color) !important;
    color: var(--bs-body-color);
}

/* Admin.php y similares: card-header sólo fw-semibold con bg=white ya cubierto arriba; sin border explícito */
[data-bs-theme="dark"] .card:not(.mesa-card):not(.product-card):not(.np-type-card) > .card-header {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] #dashboard-kpi-row .dashboard-kpi-item.dashboard-kpi-drag-over {
    outline-color: var(--bs-primary);
}

/* Dashboard · Pedidos recientes: WhatsApp + imprimir + TPV (agrupados abajo a la derecha) */
.dashboard-pedido-reciente-body.position-relative {
    padding-inline-end: max(8.25rem, 1rem);
    padding-block-end: max(2.75rem, 1rem);
}

/* Sin botón WhatsApp (escritorio): imprimir (+ ojo si pedido activo) */
.dashboard-pedido-reciente-body.dashboard-pedido-reciente-body--whatsapp-disabled.position-relative {
    padding-inline-end: max(5.5rem, 1rem);
}

.dashboard-pedido-reciente-actions {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 2;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.dashboard-pedido-reciente-actions .dashboard-pedido-reciente-print,
.dashboard-pedido-reciente-actions .dashboard-pedido-reciente-wa,
.dashboard-pedido-reciente-actions .dashboard-pedido-reciente-tpv {
    width: 2.375rem;
    height: 2.375rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
    flex-shrink: 0;
}

/* Pedidos (vista tabla): mismo tamaño de iconos WhatsApp + imprimir que en dashboard */
.pedidos-ticket-actions .dashboard-pedido-reciente-print,
.pedidos-ticket-actions .dashboard-pedido-reciente-wa {
    width: 2.375rem;
    height: 2.375rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
    flex-shrink: 0;
}