/* ==========================================================================
   SIAM Restaurantes - hoja de estilos base
   Identidad visual: terracota / naranja calido
   (Comercial = azul, Contabilidad = violeta, RRHH = teal,
    Manual = ambar, Restaurantes = terracota)
   ========================================================================== */

:root {
    --sb-w: 265px;
    --tb-h: 64px;

    --sb-bg: #1c1917;
    --sb-bg-hover: #292524;
    --sb-text: #a8a29e;

    --rt-1: #7c2d12;
    --rt-2: #c2410c;
    --rt-accent: #f97316;
    --rt-amber: #f59e0b;
    --rt-soft: #fff7ed;

    --ink: #1c1917;
    --muted: #78716c;
    --line: #e7e5e4;
    --ok: #16a34a;
    --bad: #dc2626;
}

* {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    background: #faf9f7;
    color: var(--ink);
}

/* Sidebar colapsado: solo cambia el ancho, todo lo demas lo sigue. */
body.sb-collapsed {
    --sb-w: 68px;
}

/* ===================== SIDEBAR ===================== */
.sb {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sb-w);
    background: var(--sb-bg);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: width .18s ease, transform .2s ease;
    overflow: hidden;
}

.sb-brand {
    height: var(--tb-h);
    flex: 0 0 var(--tb-h);
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.sb-logo {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--rt-accent), var(--rt-1));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(249,115,22,.35);
}

/* El logo institucional lleva texto negro en el anillo exterior, que
   sobre el sidebar oscuro desapareceria: va montado en un disco blanco. */
.sb-logo-img {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    padding: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.sb-brand-txt {
    line-height: 1.15;
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
}

    .sb-brand-txt strong {
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sb-brand-txt span {
        color: var(--rt-accent);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .7px;
        text-transform: uppercase;
    }

.sb-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0 24px;
}

    .sb-nav::-webkit-scrollbar {
        width: 6px;
    }

    .sb-nav::-webkit-scrollbar-thumb {
        background: #44403c;
        border-radius: 3px;
    }

    .sb-nav::-webkit-scrollbar-track {
        background: transparent;
    }

.sb-section {
    color: #57534e;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    padding: 14px 18px 6px;
    white-space: nowrap;
}

.sb-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 18px;
    color: var(--sb-text);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s;
    white-space: nowrap;
}

    .sb-link:hover {
        background: var(--sb-bg-hover);
        color: #fff;
    }

    .sb-link.active {
        background: rgba(249,115,22,.14);
        color: #fff;
        border-left-color: var(--rt-accent);
    }

    .sb-link i:first-child {
        font-size: 15px;
        width: 18px;
        text-align: center;
        flex: 0 0 18px;
    }

    .sb-link .chev {
        margin-left: auto;
        font-size: 10px;
        transition: transform .2s;
    }

    .sb-link[aria-expanded="true"] {
        color: #fff;
    }

        .sb-link[aria-expanded="true"] .chev {
            transform: rotate(90deg);
        }

.sb-sub {
    background: rgba(0,0,0,.25);
}

    .sb-sub a {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 7px 18px 7px 50px;
        color: #a8a29e;
        text-decoration: none;
        font-size: 12.5px;
        transition: background .15s, color .15s;
        white-space: nowrap;
    }

        .sb-sub a:hover {
            color: #fff;
            background: rgba(255,255,255,.05);
        }

        .sb-sub a.active {
            color: var(--rt-accent);
            font-weight: 600;
        }

        .sb-sub a .dot {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: currentColor;
            opacity: .55;
            flex: 0 0 4px;
        }

        /* Icono propio de cada pantalla; ocupa el lugar del punto neutro */
        .sb-sub a > i {
            font-size: 13px;
            width: 16px;
            flex: 0 0 16px;
            text-align: center;
            opacity: .8;
        }

        .sb-sub a:hover > i,
        .sb-sub a.active > i {
            opacity: 1;
        }

        /* Permiso sin pantalla propia mapeada todavia */
        .sb-sub a.pendiente {
            opacity: .62;
        }

.sb-foot {
    border-top: 1px solid rgba(255,255,255,.07);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--sb-text);
    font-size: 11.5px;
    white-space: nowrap;
}

/* --- Estado colapsado: iconos solos --- */
body.sb-collapsed .sb-brand-txt,
body.sb-collapsed .sb-section,
body.sb-collapsed .sb-link span,
body.sb-collapsed .sb-link .chev,
body.sb-collapsed .sb-sub,
body.sb-collapsed .sb-foot-txt {
    display: none;
}

body.sb-collapsed .sb-brand,
body.sb-collapsed .sb-foot {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

body.sb-collapsed .sb-link {
    justify-content: center;
    padding: 11px 0;
    border-left-width: 0;
}

/* ===================== TOPBAR ===================== */
.tb {
    position: fixed;
    top: 0;
    left: var(--sb-w);
    right: 0;
    height: var(--tb-h);
    z-index: 1030;
    background: linear-gradient(100deg, var(--rt-1) 0%, var(--rt-2) 100%);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 14px;
    box-shadow: 0 1px 12px rgba(124,45,18,.28);
    transition: left .18s ease;
}

    .tb h1 {
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.tb-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    padding: 6px 12px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
}

.tb-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 8px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s;
}

    .tb-icon:hover {
        background: rgba(255,255,255,.26);
    }

.tb-user {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: var(--rt-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    border: 0;
    cursor: pointer;
}

/* ===================== CONTENIDO ===================== */
.main {
    margin-left: var(--sb-w);
    padding-top: var(--tb-h);
    height: 100vh;
    overflow-y: auto;
    transition: margin-left .18s ease;
}

.wrap {
    padding: 22px 24px 60px;
}

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

    .page-head h2 {
        font-size: 22px;
        font-weight: 700;
        margin: 0;
        letter-spacing: -.4px;
    }

    .page-head p {
        color: var(--muted);
        font-size: 13px;
        margin: 3px 0 0;
    }

/* Icono SVG en el sidebar, para las pantallas cuyo equivalente de Bootstrap
   Icons no existe (ver MapaMenu.IconosSvg). .sb-link es flex con
   align-items:center, asi que el centrado lo da el padre y no hace falta
   vertical-align. Se dimensiona en px porque la fuente de iconos y el SVG no
   escalan igual: a 1em el dibujo queda mas chico que el glifo de al lado. */
.sb-link .sb-svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

/* Figura decorativa del encabezado de la pantalla de Mesas. Es una foto de
   Wikimedia Commons (CC BY 2.0, Jeremy van Bedijk), recortada en cuadrado
   para que no compita con el mapa de mesas que esta debajo. */
.mesa-figura {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--line);
    box-shadow: 0 2px 8px rgba(28, 25, 23, .12);
}

/* ===================== KPI ===================== */
.kpi {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 17px 18px;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform .18s, box-shadow .18s;
}

    .kpi:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(28,25,23,.09);
    }

    .kpi::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--bar, var(--rt-accent));
    }

.kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 11px;
}

.kpi-ico {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #fff;
    background: var(--bar, var(--rt-accent));
}

.kpi-label {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.kpi-val {
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.9px;
    margin: 2px 0 0;
}

.kpi-sub {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 5px;
}

/* ===================== TARJETAS ===================== */
.card2 {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
}

.card2-h {
    padding: 15px 18px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .card2-h h6 {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
    }

.card2-b {
    padding: 16px 18px;
}

.btn-rt {
    background: linear-gradient(100deg, var(--rt-1), var(--rt-2));
    border: 0;
    color: #fff;
    font-weight: 600;
}

    .btn-rt:hover {
        color: #fff;
        filter: brightness(1.08);
    }

/* ===================== MAPA DE MESAS ===================== */
.mesas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 12px;
}

.mesa {
    position: relative;
    border-radius: 12px;
    border: 1px solid var(--mesa-linea, var(--line));
    background: var(--mesa-fondo, #fff);
    transition: transform .15s, box-shadow .15s;
}

    .mesa:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(28,25,23,.13);
    }

/* Toda la tarjeta es el area clickeable: <button> si abre modal,
   <a> si va a la comanda, <div> si la mesa no es operable. */
.mesa-cuerpo {
    width: 100%;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 15px 10px 13px;
    text-decoration: none;
    color: var(--mesa-tinta, var(--ink));
    cursor: pointer;
    text-align: center;
}

.mesa-cuerpo-estatico {
    cursor: default;
}

.mesa-ico {
    font-size: 22px;
    color: var(--mesa-acento, var(--muted));
    line-height: 1;
    margin-bottom: 3px;
}

.mesa-nombre {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -.2px;
}

.mesa-estado {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--mesa-acento, var(--muted));
}

.mesa-cap {
    font-size: 11.5px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.mesa-menu {
    position: absolute;
    top: 5px;
    right: 5px;
}

.mesa-menu-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 0;
    background: rgba(0,0,0,.05);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
}

    .mesa-menu-btn:hover {
        background: rgba(0,0,0,.12);
        color: var(--ink);
    }

/* Un formulario por opcion del dropdown: que no rompa el ancho del item */
.mesa-menu .dropdown-menu form {
    display: block;
    width: 100%;
}

.mesa-menu .dropdown-item {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
}

/* Leyenda del encabezado */
.leyenda {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 20px;
    border: 1px solid var(--mesa-linea, var(--line));
    background: var(--mesa-fondo, #fff);
    color: var(--mesa-acento, var(--muted));
}

/* --- Paleta por estado --- */
.est-libre {
    --mesa-fondo: #f0fdf4;
    --mesa-linea: #bbf7d0;
    --mesa-acento: #16a34a;
}

.est-ocupada {
    --mesa-fondo: #fff7ed;
    --mesa-linea: #fdba74;
    --mesa-acento: #c2410c;
}

.est-solicitada {
    --mesa-fondo: #fffbeb;
    --mesa-linea: #fcd34d;
    --mesa-acento: #b45309;
}

.est-reservada {
    --mesa-fondo: #eff6ff;
    --mesa-linea: #bfdbfe;
    --mesa-acento: #2563eb;
}

.est-limpieza {
    --mesa-fondo: #f8fafc;
    --mesa-linea: #e2e8f0;
    --mesa-acento: #94a3b8;
}

.est-bloqueada {
    --mesa-fondo: #f1f5f9;
    --mesa-linea: #cbd5e1;
    --mesa-acento: #475569;
    --mesa-tinta: #475569;
}

/* ===================== TOMA DE PEDIDO ===================== */
.pill-comensal {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

    .pill-comensal:hover {
        border-color: var(--rt-accent);
        color: var(--rt-2);
    }

    .pill-comensal.activo {
        background: var(--rt-2);
        border-color: var(--rt-2);
        color: #fff;
    }

.cat-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
}

.cat-tab {
    white-space: nowrap;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    border: 1px solid transparent;
}

    .cat-tab:hover {
        background: var(--rt-soft);
        color: var(--rt-2);
    }

    .cat-tab.activa {
        background: var(--rt-soft);
        border-color: #fdba74;
        color: var(--rt-1);
    }

.prod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    gap: 10px;
    padding-top: 12px;
}

.prod {
    position: relative;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 12px;
    padding: 10px 8px 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    text-align: center;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

    .prod:hover:not(:disabled) {
        transform: translateY(-2px);
        border-color: #fdba74;
        box-shadow: 0 8px 18px rgba(28,25,23,.1);
    }

    .prod:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.prod-img {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background: var(--rt-soft);
    color: var(--rt-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    overflow: hidden;
    margin-bottom: 4px;
}

    .prod-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.prod-nombre {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
}

.prod-precio {
    font-size: 13px;
    font-weight: 800;
    color: var(--rt-2);
}

.prod-mods {
    position: absolute;
    top: 6px;
    right: 7px;
    font-size: 11px;
    color: var(--rt-accent);
}

/* ---------- Carrito ---------- */
.carrito {
    max-height: 52vh;
    overflow-y: auto;
    padding-top: 8px;
    padding-bottom: 8px;
}

.carrito-folio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--rt-2);
    background: var(--rt-soft);
    border-radius: 7px;
    padding: 5px 10px;
    margin: 10px 0 6px;
}

.linea {
    border-bottom: 1px dashed #eee7e2;
    padding: 9px 2px;
}

    .linea:last-child {
        border-bottom: 0;
    }

    .linea.cancelada {
        opacity: .55;
    }

        .linea.cancelada .linea-nombre {
            text-decoration: line-through;
        }

    .linea.retenida {
        border-left: 3px solid var(--rt-amber);
        padding-left: 8px;
        background: #fffdf5;
    }

.linea-top {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.linea-cant {
    font-weight: 800;
    font-size: 13px;
    color: var(--rt-2);
    flex: 0 0 auto;
}

.linea-nombre {
    font-size: 13px;
    font-weight: 600;
    flex: 1 1 auto;
}

.linea-total {
    font-size: 13px;
    font-weight: 700;
    flex: 0 0 auto;
}

.linea-mods {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 4px 0 0 22px;
}

.mod-chip {
    font-size: 10.5px;
    background: #f5f5f4;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 1px 6px;
    color: var(--muted);
}

.linea-notas {
    font-size: 11px;
    color: var(--muted);
    margin: 4px 0 0 22px;
    font-style: italic;
}

.linea-pie {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 7px 0 0 22px;
}

.badge-estado {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 2px 7px;
    border-radius: 20px;
    border: 1px solid var(--linea-borde, var(--line));
    background: var(--linea-fondo, #fff);
    color: var(--linea-tinta, var(--muted));
}

.est-pendiente {
    --linea-fondo: #f8fafc;
    --linea-borde: #e2e8f0;
    --linea-tinta: #64748b;
}

.est-preparando {
    --linea-fondo: #fff7ed;
    --linea-borde: #fdba74;
    --linea-tinta: #c2410c;
}

.est-listo {
    --linea-fondo: #f0fdf4;
    --linea-borde: #bbf7d0;
    --linea-tinta: #16a34a;
}

.est-servido {
    --linea-fondo: #f1f5f9;
    --linea-borde: #cbd5e1;
    --linea-tinta: #475569;
}

.est-cancelado {
    --linea-fondo: #fef2f2;
    --linea-borde: #fecaca;
    --linea-tinta: #dc2626;
}

.est-retenido {
    --linea-fondo: #fffbeb;
    --linea-borde: #fcd34d;
    --linea-tinta: #b45309;
}

.est-enviado {
    --linea-fondo: #eff6ff;
    --linea-borde: #bfdbfe;
    --linea-tinta: #2563eb;
}

.curso {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.curso-btn {
    width: 19px;
    height: 19px;
    border-radius: 5px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--muted);
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

    .curso-btn:hover {
        border-color: var(--rt-accent);
        color: var(--rt-2);
    }

.curso-val {
    font-size: 10px;
    color: var(--muted);
    font-weight: 600;
}

.linea-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--muted);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

    .linea-btn:hover {
        border-color: var(--rt-accent);
        color: var(--rt-2);
    }

    .linea-btn.peligro:hover {
        border-color: #fca5a5;
        color: #dc2626;
        background: #fef2f2;
    }

.carrito-pie {
    border-top: 1px solid var(--line);
    padding: 14px 18px 16px;
}

.subtotal {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.7px;
}

/* Opciones dentro del modal de producto */
.grupo-mod {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
}

.opcion-mod {
    padding: 3px 0;
}

    .opcion-mod .form-check-label {
        font-size: 12.5px;
        width: 100%;
        cursor: pointer;
    }

/* Lista de productos asignables a un grupo de modificadores */
.asignacion {
    max-height: 46vh;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 8px 12px;
}

.asignacion-cat {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--rt-2);
    background: var(--rt-soft);
    border-radius: 6px;
    padding: 3px 8px;
    margin: 10px 0 5px;
}

    .asignacion-cat:first-child {
        margin-top: 0;
    }

/* ===================== CATALOGO / SYNC COMERCIAL ===================== */
.btn-sincronizar {
    border: 0;
    border-radius: 7px;
    background: linear-gradient(100deg, var(--rt-1), var(--rt-2));
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 11px;
    cursor: pointer;
    white-space: nowrap;
}

    .btn-sincronizar:hover {
        filter: brightness(1.1);
    }

/* Accion secundaria: mucho mas discreta que el boton de alta */
.btn-resync {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--muted);
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex: 0 0 22px;
}

    .btn-resync:hover {
        border-color: var(--rt-accent);
        color: var(--rt-2);
        background: var(--rt-soft);
    }

/* Producto dado de baja: sigue visible en el mantenimiento */
.fila-inactiva {
    opacity: .55;
}

    .fila-inactiva td strong {
        text-decoration: line-through;
    }

.linea-btn.activo {
    border-color: #bbf7d0;
    color: var(--ok);
    background: #f0fdf4;
}

.sync-ok {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ok);
    white-space: nowrap;
}

/* ===================== CAJA ===================== */
.dato-caja {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px dashed #eee7e2;
}

    .dato-caja:last-child {
        border-bottom: 0;
    }

    .dato-caja span {
        color: var(--muted);
    }

.dato-total {
    border-top: 1px solid var(--line);
    border-bottom: 0;
    margin-top: 4px;
    padding-top: 10px;
    font-size: 15px;
}

    .dato-total strong {
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -.5px;
    }

.caja-abierta {
    border-color: #bbf7d0;
}

.monto-entra {
    color: var(--ok);
}

.monto-sale {
    color: var(--bad);
}

.tabla-caja {
    width: 100%;
    font-size: 12.5px;
    border-collapse: collapse;
}

    .tabla-caja th {
        text-align: left;
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: var(--muted);
        padding: 6px 8px;
        border-bottom: 1px solid var(--line);
        white-space: nowrap;
    }

    .tabla-caja td {
        padding: 8px;
        border-bottom: 1px dashed #eee7e2;
        vertical-align: middle;
    }

    .tabla-caja tbody tr:last-child td {
        border-bottom: 0;
    }

    .tabla-caja tbody tr:hover {
        background: #fafaf9;
    }

.badge-mov {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.mov-entra {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
}

.mov-sale {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.chip-auto {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    background: #f5f5f4;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0 5px;
    color: var(--muted);
    margin-left: 5px;
}

.dif-caja {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--dif-borde, var(--line));
    background: var(--dif-fondo, #fafaf9);
    color: var(--dif-tinta, var(--muted));
    font-size: 13px;
    font-weight: 600;
}

    .dif-caja strong {
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -.5px;
    }

.dif-ok {
    --dif-fondo: #f0fdf4;
    --dif-borde: #bbf7d0;
    --dif-tinta: #16a34a;
}

.dif-faltante {
    --dif-fondo: #fef2f2;
    --dif-borde: #fecaca;
    --dif-tinta: #dc2626;
}

.dif-sobrante {
    --dif-fondo: #fffbeb;
    --dif-borde: #fcd34d;
    --dif-tinta: #b45309;
}

/* ===================== CIERRE DE CUENTA ===================== */
.mesa-cobrar {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255,255,255,.75);
    color: var(--mesa-acento, var(--muted));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-decoration: none;
    border: 1px solid var(--mesa-linea, var(--line));
}

    .mesa-cobrar:hover {
        background: #fff;
        color: var(--rt-2);
    }

.factura-caja.facturada {
    border-color: #bbf7d0;
}

.factura-caja.con-error {
    border-color: #fecaca;
}

.num-factura {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 15px;
    letter-spacing: .5px;
}

.linea-cierre {
    padding: 9px 2px;
    border-bottom: 1px dashed #eee7e2;
}

    .linea-cierre:last-child {
        border-bottom: 0;
    }

    .linea-cierre.cancelada {
        opacity: .5;
    }

        .linea-cierre.cancelada .linea-nombre {
            text-decoration: line-through;
        }

.chip-compartido {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--rt-soft);
    border: 1px solid #fdba74;
    color: var(--rt-2);
    border-radius: 20px;
    padding: 1px 7px;
    margin-left: 5px;
}

.select-folio {
    font-size: 11.5px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 2px 6px;
    color: var(--muted);
    background: #fff;
    max-width: 150px;
}

.linea-btn.activo {
    background: var(--rt-soft);
    border-color: #fdba74;
    color: var(--rt-2);
}

.nota-compartido {
    margin-top: 12px;
    padding: 8px 11px;
    border-radius: 8px;
    background: var(--rt-soft);
    border: 1px solid #fed7aa;
    color: var(--rt-1);
    font-size: 11.5px;
}

.bloque .card2-h {
    padding: 11px 15px;
}

.bloque-monto {
    font-size: 16px;
    font-weight: 800;
}

.bloque-todo {
    border-color: #fdba74;
    background: #fffbf7;
}

.bloque-pagado {
    opacity: .8;
}

.bloque-desglose {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 9px;
}

.bloque-ok {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ok);
}

.btn-propina {
    flex: 1 1 0;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 7px;
    padding: 4px 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
}

    .btn-propina:hover {
        border-color: var(--rt-accent);
        color: var(--rt-2);
    }

    .btn-propina.activo {
        background: var(--rt-2);
        border-color: var(--rt-2);
        color: #fff;
    }

.total-bloque {
    border-top: 1px solid var(--line);
    padding-top: 9px;
}

/* ===================== KDS (PANTALLA DE COCINA) ===================== */
.cat-cont {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    margin-left: 5px;
    border-radius: 20px;
    background: #e7e5e4;
    color: #57534e;
    font-size: 10.5px;
    font-weight: 800;
    text-align: center;
}

.cat-tab.activa .cat-cont {
    background: var(--rt-2);
    color: #fff;
}

.kds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    align-items: start;
}

.ticket {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 4px solid var(--tiempo-color, var(--muted));
    border-radius: 13px;
    overflow: hidden;
}

    /* Prioritario: se distingue del semaforo de tiempo, es otra cosa */
    .ticket.prioritario {
        border: 2px solid #dc2626;
        border-top-width: 4px;
        box-shadow: 0 0 0 3px rgba(220,38,38,.12);
    }

.ticket-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: #fafaf9;
    border-bottom: 1px solid var(--line);
}

    .ticket-head strong {
        font-size: 15px;
        display: block;
        line-height: 1.2;
    }

.ticket-zona {
    font-size: 11px;
    color: var(--muted);
}

.ticket-tiempo {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 800;
    color: var(--tiempo-color, var(--muted));
    white-space: nowrap;
}

.ticket-body {
    padding: 4px 14px 12px;
}

.kds-linea {
    padding: 10px 0;
    border-bottom: 1px dashed #eee7e2;
}

    .kds-linea:last-child {
        border-bottom: 0;
    }

    .kds-linea.prioritaria {
        background: #fef2f2;
        margin: 0 -14px;
        padding-left: 14px;
        padding-right: 14px;
        border-left: 3px solid #dc2626;
    }

.kds-linea-top {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.kds-cant {
    font-size: 16px;
    font-weight: 800;
    color: var(--rt-2);
}

.kds-nombre {
    font-size: 14.5px;
    font-weight: 700;
    flex: 1 1 auto;
    line-height: 1.25;
}

.kds-curso {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    background: #f5f5f4;
    border-radius: 5px;
    padding: 1px 6px;
}

.kds-mods {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 6px 0 0 26px;
}

.kds-mod {
    font-size: 11px;
    background: #f5f5f4;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 1px 7px;
    color: #57534e;
}

    /* Alergeno: rojo pleno, tiene que saltar a la vista del cocinero */
    .kds-mod.alergeno {
        background: #dc2626;
        border-color: #dc2626;
        color: #fff;
        font-weight: 700;
    }

.kds-notas {
    font-size: 11.5px;
    color: #92400e;
    background: #fffbeb;
    border-radius: 5px;
    padding: 3px 8px;
    margin: 6px 0 0 26px;
}

.kds-linea-pie {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin: 8px 0 0 26px;
}

.kds-reloj {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--tiempo-color, var(--muted));
}

.kds-esperado {
    font-weight: 500;
    opacity: .7;
}

.btn-avanzar {
    border: 0;
    border-radius: 8px;
    background: linear-gradient(100deg, var(--rt-1), var(--rt-2));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 13px;
    cursor: pointer;
    white-space: nowrap;
}

    .btn-avanzar:hover:not(:disabled) {
        filter: brightness(1.1);
    }

    .btn-avanzar:disabled {
        opacity: .55;
        cursor: wait;
    }

/* Semaforo de tiempo: lo comparten ticket y linea */
.tiempo-ok {
    --tiempo-color: #16a34a;
}

.tiempo-porvencer {
    --tiempo-color: #d97706;
}

.tiempo-vencido {
    --tiempo-color: #dc2626;
}

.tiempo-neutro {
    --tiempo-color: #78716c;
}

/* ===================== BANNER DEL DASHBOARD ===================== */
.banner {
    position: relative;
    height: 210px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
}

    .banner > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Velo de degradado: mantiene legible el texto aunque la foto sea clara. */
.banner-velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(28,25,23,.78) 0%, rgba(28,25,23,.38) 55%, rgba(28,25,23,0) 100%);
}

.banner-txt {
    position: absolute;
    left: 28px;
    bottom: 22px;
    color: #fff;
}

    .banner-txt h3 {
        font-size: 25px;
        font-weight: 800;
        margin: 0;
        letter-spacing: -.5px;
    }

    .banner-txt p {
        margin: 2px 0 0;
        font-size: 12.5px;
        opacity: .85;
    }

/* --- Estado vacio: ImagenPrincipalUrl todavia sin definir --- */
.banner-vacio {
    background: linear-gradient(120deg, #7c2d12 0%, #c2410c 55%, #ea580c 100%);
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 22px;
}

    /* Trama sutil para que el bloque de color no se lea como un vacio plano */
    .banner-vacio::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px);
        background-size: 15px 15px;
        opacity: .6;
    }

.banner-vacio-cont {
    position: relative;
    color: #fff;
}

.banner-vacio-ico {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 12px;
}

.banner-vacio-cont h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
}

.banner-vacio-cont p {
    font-size: 12.5px;
    margin: 0 0 14px;
    opacity: .88;
}

.banner-vacio-link {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 8px;
    padding: 7px 15px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
}

    .banner-vacio-link:hover {
        background: rgba(255,255,255,.3);
        color: #fff;
    }

/* ===================== PANTALLA PLACEHOLDER ===================== */
.vacio {
    background: #fff;
    border: 1px dashed #d6d3d1;
    border-radius: 16px;
    padding: 54px 28px;
    text-align: center;
    max-width: 620px;
    margin: 30px auto;
}

    .vacio .ico {
        width: 74px;
        height: 74px;
        border-radius: 50%;
        background: var(--rt-soft);
        color: var(--rt-2);
        font-size: 31px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 18px;
    }

    .vacio h3 {
        font-size: 20px;
        font-weight: 700;
        margin: 0 0 6px;
    }

    .vacio p {
        color: var(--muted);
        font-size: 13.5px;
        margin: 0 auto 14px;
        max-width: 430px;
    }

.cod-permiso {
    display: inline-block;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 11.5px;
    background: #f5f5f4;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 3px 9px;
    color: var(--muted);
}

/* ===================== LOGIN ===================== */
/* Colores del login iguales a SiamComercialNetUltimateWebCompleto (2026-09-29,
   pedido de Miguel: "no me gusta el fondo chillante, deja los mismos colores
   de siamcomercialnetultimaweb"): azul noche con un mesh de puntos muy tenue
   y una tarjeta de vidrio esmerilado oscuro, en vez del degradado naranja de
   antes. Es solo esta pantalla: el resto del sistema sigue con sus 6 temas
   y el naranja de marca (--rt-accent) de siempre. */
.login-bg {
    position: relative;
    height: 100vh;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #0f172a;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(2, 132, 199, .18), transparent 42%),
        radial-gradient(circle at 85% 75%, rgba(30, 64, 175, .20), transparent 42%),
        linear-gradient(160deg, #0f172a 0%, #1e293b 55%, #0f172a 100%);
}

    .login-bg::before {
        content: '';
        position: fixed;
        inset: 0;
        background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
        background-size: 28px 28px;
        pointer-events: none;
    }

.login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 340px;
    background: rgba(30, 41, 59, .68);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(0,0,0,.55), 0 0 50px rgba(2,132,199,.08);
    padding: 38px 28px 30px;
    overflow: hidden;
    animation: loginIn .45s ease-out;
}

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

    /* Resplandor sutil arriba de la tarjeta, igual que en Comercial */
    .login-card::before {
        content: '';
        position: absolute;
        top: -70%;
        left: 50%;
        transform: translateX(-50%);
        width: 150%;
        height: 240px;
        background: radial-gradient(circle, rgba(2, 132, 199, .35), transparent 65%);
        pointer-events: none;
    }

.login-logo {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 15px;
    background: linear-gradient(135deg, #1e40af, #0284c7);
    color: #fff;
    font-size: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    box-shadow: 0 8px 20px rgba(2,132,199,.4);
}

/* Con logo propio subido (Configuracion de marca), sigue sin disco: el fondo
   oscuro ya deja legible cualquier logo claro u oscuro. */
.login-logo-img {
    position: relative;
    display: block;
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin: 0 auto 12px;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,.55));
}

.login-card h1 {
    position: relative;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    margin: 0 0 2px;
    letter-spacing: -.4px;
    color: #f1f5f9;
}

.login-card .sub {
    position: relative;
    text-align: center;
    color: #94a3b8;
    font-size: 12.5px;
    margin-bottom: 22px;
}

.login-card .form-label {
    position: relative;
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* Campos en "pastilla" (2026-09-29, pedido de Miguel: "los textbox redondos
   de los extremos para que no se vea muy simple" — presentación a un cliente
   al día siguiente). El icono y el input siguen siendo dos elementos del
   mismo .input-group de Bootstrap; solo se redondean mucho las dos puntas
   de afuera para que se vean como una sola cápsula. */
.login-card .input-group-text {
    background: #0f172a;
    border-color: #334155;
    color: #64748b;
    border-radius: 999px 0 0 999px;
    padding-left: 16px;
    padding-right: 8px;
    transition: border-color .2s, color .2s;
}

.login-card .form-control {
    background: #0f172a;
    border-radius: 0 999px 999px 0;
    padding: 10px 18px 10px 8px;
    border-color: #334155;
    color: #e2e8f0;
    transition: border-color .2s, box-shadow .2s;
}

    .login-card .form-control::placeholder {
        color: #64748b;
    }

    .login-card .form-control:focus {
        background: #111c2e;
        border-color: #0284c7;
        box-shadow: 0 0 0 .15rem rgba(2,132,199,.25);
        color: #f1f5f9;
    }

    /* El icono también resalta cuando el campo tiene el foco, no solo el borde */
    .login-card .input-group:focus-within .input-group-text {
        border-color: #0284c7;
        color: #38bdf8;
    }

/* El botón de entrar se queda azul (igual que Comercial) solo en esta
   pantalla; en el resto del sistema sigue naranja (--rt-accent) como marca.
   También en pastilla, a juego con los campos. */
.login-card .btn-rt {
    position: relative;
    background: linear-gradient(135deg, #1e40af, #0284c7);
    border: none;
    border-radius: 999px;
    padding: 11px 0;
    letter-spacing: .3px;
    transition: filter .2s, box-shadow .2s, transform .2s;
}

    .login-card .btn-rt:hover {
        filter: brightness(1.1);
        box-shadow: 0 6px 18px rgba(2,132,199,.45);
        transform: translateY(-1px);
    }

.login-card .alert-danger {
    position: relative;
    background: rgba(220, 53, 69, .14);
    border: 1px solid rgba(248, 113, 113, .35);
    color: #fca5a5;
    border-radius: 10px;
}

.login-foot {
    position: relative;
    text-align: center;
    color: #64748b;
    font-size: 11px;
    margin-top: 20px;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 991.98px) {
    .sb {
        transform: translateX(-100%);
        width: 265px;
    }

        .sb.abierto {
            transform: translateX(0);
        }

    .tb {
        left: 0;
    }

    .main {
        margin-left: 0;
    }

    body.sb-collapsed {
        --sb-w: 0px;
    }
}