/* ==========================================================================
   1. VARIABLES DE SISTEMA Y TEMA SEPIA DE GESINEX (:root)
   ========================================================================== */
/* ---- VARIABLES :root (GESINEX SEPIA MODE) ---- */
:root {
    /* ---- FONDOS Y BACKGROUNDS (SEPIA GESINEX) ---- */
    --background-principal: #f5f0e8;
    --background-oscuro: #ede8df;
    --background-tarjeta: #fdf3e0;
    --background-tarjeta-hover: #f5e6d3;
    --background-sepia: #8b4513;          /* Café sepia primario (SaddleBrown) */
    --background-sepia-oscuro: #70360e;   /* Hover café sepia */
    --background-sepia-marca: #8b4513;
    --background-autofill: #f5e6d3;
    --background-input: #f5f0e8;
    --background-superficie: #fcf8f2;
    --background-claro: #fdf3e0;

    /* ---- COLORES DE TEXTO (CAFÉ Y ESPRESSO CÁLIDO) ---- */
    --color-texto-chocolate: #402203;        /* Texto principal sepia */
    --color-texto-principal: #402203;     /* Texto principal espresso */
    --color-texto-secundario: #5c3a21;   /* Texto secundario café */
    --color-texto-mutado: #7a6050;       /* Texto atenuado taupe */
    --color-texto-oscuro: #2b1800;
    --color-texto-boton: #ffffff;        /* Blanco para texto sobre botones oscuros */

    /* ---- BORDES Y SOMBRAS SEPIA ---- */
    --color-borde: #c8b89a;
    --color-borde-sepia: #8b4513;
    --color-borde-claro: #d7c5ae;
    --shadow-sepia: 0 4px 12px rgba(139, 69, 19, 0.08);

    /* ---- ESTADOS SEPIA ---- */
    --color-exito: #2d6a4f;
    --color-error: #b91c1c;
    --color-advertencia: #d97706;
    --color-cian: #8b4513;

    /* ---- DIMENSIONES Y LOGO ---- */
    --logo-login-height: 150px;
    --logo-login-max-width: 270px;
    --logo-navbar-height: 46px;

    /* ---- FUENTES ---- */
    --font-principal: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-titulos: 'Outfit', sans-serif;
    --font-mono: 'Roboto Mono', monospace;

    --border-radius-sm: 0.375rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 0.75rem;
    --border-radius-xl: 1rem;
    --border-radius-full: 9999px;
}

.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.2;
    border-radius: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
}

/* ==========================================================================
   2. REGLAS BASE Y RESET
   ========================================================================== */
/* ---- RESET & BODY ---- */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--background-principal);
    color: var(--color-texto-principal);
    font-family: var(--font-principal);
    line-height: 1.5;
}

/* ==========================================================================
   3. OVERRIDES DE CONTRASTE Y BOOTSTRAP PARA MODO SEPIA
   ========================================================================== */
/* ---- CONTRASTE & TEXTOS ---- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--color-texto-principal) !important;
    font-family: var(--font-titulos);
}

.text-white {
    color: var(--color-texto-principal) !important;
}

.text-white-50 {
    color: var(--color-texto-mutado) !important;
}

.text-dark {
    color: var(--color-texto-principal) !important;
}

.text-muted {
    color: var(--color-texto-mutado) !important;
}

.text-secondary {
    color: var(--color-texto-secundario) !important;
}

.color-texto-principal {
    color: var(--color-texto-principal) !important;
}

.color-texto-secundario {
    color: var(--color-texto-secundario) !important;
}

.color-texto-mutado {
    color: var(--color-texto-mutado) !important;
}

.bg-white, .bg-light, .bg-dark {
    background-color: var(--background-tarjeta) !important;
    color: var(--color-texto-principal) !important;
}

.card-header.bg-white, .card-header.bg-dark {
    background-color: var(--background-tarjeta) !important;
    border-bottom: 1px solid var(--color-borde) !important;
}

/* ==========================================================================
   4. LOGO Y MARCA INSTITUCIONAL
   ========================================================================== */
/* ---- LOGO Y MARCA ---- */
.login-brand-logo {
    height: var(--logo-login-height);
    width: auto;
    max-width: var(--logo-login-max-width);
    object-fit: contain;
    margin: 0 auto 1rem auto;
    display: block;
    filter: drop-shadow(0 4px 10px rgba(139, 69, 19, 0.2));
    transition: transform 0.3s ease;
}

.login-brand-logo:hover {
    transform: scale(1.04);
}

.navbar-brand-logo {
    height: var(--logo-navbar-height);
    width: auto;
    object-fit: contain;
}

/* ==========================================================================
   5. NAVEGACIÓN (NAVBAR SEPIA)
   ========================================================================== */
/* ---- NAVBAR ---- */
.navbar {
    background-color: var(--background-oscuro) !important;
    border-bottom: 1px solid var(--color-borde) !important;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.navbar-brand {
    font-family: var(--font-titulos);
    font-weight: 700;
    color: var(--color-texto-principal) !important;
}

.nav-link {
    color: var(--color-texto-secundario) !important;
    font-weight: 500;
}

.nav-link:hover, .nav-link.active {
    color: var(--background-sepia) !important;
}

/* ==========================================================================
   6. PIE DE PÁGINA (FOOTER SEPIA)
   ========================================================================== */
/* ---- FOOTER ---- */
.footer {
    background-color: var(--background-oscuro) !important;
    border-top: 1px solid var(--color-borde) !important;
    color: var(--color-texto-mutado) !important;
}

.footer strong {
    color: var(--color-texto-principal) !important;
}

/* ==========================================================================
   7. AUTENTICACIÓN (LOGIN SEPIA)
   ========================================================================== */
/* ---- LOGIN ---- */
body.login-body {
    background: radial-gradient(circle at center, var(--background-tarjeta) 0%, var(--background-principal) 100%);
}

.login-wrapper {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.login-card {
    background-color: var(--background-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--border-radius-xl);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 15px 35px rgba(139, 69, 19, 0.15);
}

/* ==========================================================================
   8. DASHBOARD GENERAL Y TARJETAS SEPIA
   ========================================================================== */
/* ---- DASHBOARD ---- */
.dashboard-container {
    padding: 1.5rem;
}

.card, .stat-card, .negocio-card, .section-card {
    background-color: var(--background-tarjeta) !important;
    border: 1px solid var(--color-borde) !important;
    color: var(--color-texto-principal) !important;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sepia);
}

.stat-card:hover, .negocio-card:hover {
    border-color: var(--color-borde-sepia) !important;
}

.stat-val {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 900;
    color: var(--color-texto-principal);
}

.stat-lbl {
    font-size: 0.75rem;
    color: var(--color-texto-mutado);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   9. OPERADORES Y MESA DE ENTRADA SEPIA
   ========================================================================== */
/* ---- OPERADORES ---- */
.operator-card {
    background-color: var(--background-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sepia);
}

.ticket-display {
    font-family: var(--font-mono);
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--color-exito);
}

/* ==========================================================================
   10. BOTONES DE ACCIÓN SEPIA
   ========================================================================== */
/* ---- BOTONES ---- */
.btn {
    font-family: var(--font-principal);
    font-weight: 600;
    border-radius: var(--border-radius-md);
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.btn-primary {
    background-color: var(--background-sepia) !important;
    border-color: var(--background-sepia) !important;
    color: var(--color-texto-boton) !important;
}

.btn-primary * {
    color: var(--color-texto-boton) !important;
}

.btn-primary:hover {
    background-color: var(--background-sepia-oscuro) !important;
    border-color: var(--background-sepia-oscuro) !important;
}

/* Botones Outline Sepia */
.btn-totem {
    border: 1.5px solid var(--background-sepia) !important;
    color: var(--background-sepia) !important;
    background-color: transparent !important;
}

.btn-totem:hover {
    background-color: var(--background-sepia) !important;
    color: var(--color-texto-boton) !important;
}

.btn-tv {
    border: 1.5px solid var(--background-sepia) !important;
    color: var(--background-sepia) !important;
    background-color: transparent !important;
}

.btn-tv:hover {
    background-color: var(--background-sepia) !important;
    color: var(--color-texto-boton) !important;
}

.btn-mesa {
    border: 1.5px solid var(--color-exito) !important;
    color: var(--color-exito) !important;
    background-color: transparent !important;
}

.btn-mesa:hover {
    background-color: var(--color-exito) !important;
    color: var(--color-texto-boton) !important;
}

.btn-configurar {
    border: 1.5px solid var(--color-texto-secundario) !important;
    color: var(--color-texto-secundario) !important;
    background-color: transparent !important;
}

.btn-configurar:hover {
    background-color: var(--color-texto-secundario) !important;
    color: var(--background-principal) !important;
}

/* ==========================================================================
   11. FORMULARIOS Y AUTOCOMPLETE SEPIA
   ========================================================================== */
/* ---- FORMULARIOS & AUTOCOMPLETE ---- */
.form-control, .form-select {
    background-color: var(--background-input) !important;
    border: 1px solid var(--color-borde) !important;
    color: var(--color-texto-principal) !important;
    border-radius: var(--border-radius-md);
    padding: 0.5rem 0.75rem;
}

.form-control::placeholder {
    color: var(--color-texto-mutado) !important;
}

.form-control:focus, .form-select:focus {
    background-color: var(--background-superficie) !important;
    border-color: var(--background-sepia) !important;
    color: var(--color-texto-principal) !important;
    box-shadow: 0 0 0 0.25rem rgba(139, 69, 19, 0.2);
}

/* Regla para Autocompletado del Navegador Sepia */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--color-texto-principal) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--background-autofill) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ==========================================================================
   12. TARJETAS Y BADGES DE NICHO SEPIA
   ========================================================================== */
/* ---- TARJETAS & BADGES ---- */
.badge-nicho {
    background-color: rgba(139, 69, 19, 0.1);
    color: var(--background-sepia);
    border: 1px solid var(--color-borde);
    border-radius: var(--border-radius-full);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
}


/* ---- NAVBAR TOGGLER Y MENÚ MANTECA / CHOCOLATE ---- */
.navbar-toggler {
    border-color: var(--color-borde-azul) !important;
    padding: 0.5rem;
}



/* Fuerza absoluto: Cero letras blancas sobre fondo manteca */
body, p, span, div, h1, h2, h3, h4, h5, h6, label, small, strong, b, i, a {
    color: var(--color-texto-principal);
}

.text-white, .text-white-50, .text-light, .text-secondary, .text-muted {
    color: var(--color-texto-secundario) !important;
}

/* Excepción: Botones con fondo café oscuro llevan texto blanco nítido */
.btn-primary, .btn-primary *, button[type="submit"], button[type="submit"] * {
    color: var(--color-texto-boton) !important;
}


/* ==========================================================================
   PROHIBICIÓN ABSOLUTA: CERO FUENTES BLANCAS SOBRE FONDO MANTECA / SEPIA
   ========================================================================== */
.text-white, .text-white-50, .text-white\/10, .text-white\/20, .text-white\/30, 
.text-white\/40, .text-white\/50, .text-white\/55, .text-white\/60, .text-white\/70, 
.text-white\/80, .text-white\/90, .text-slate-100, .text-slate-200, .text-slate-300, 
.text-slate-400, .text-gray-100, .text-gray-200, .text-gray-300, .text-gray-400,
.text-blue-100, .text-blue-200, .text-blue-300 {
    color: var(--color-texto-principal) !important;
}

/* Excepción únicamente para botones sólidos con fondo café oscuro */
.btn-primary, .btn-primary *, button[type="submit"], button[type="submit"] *,  {
    color: var(--color-texto-boton) !important;
}


/* ---- ESTILOS DE CÓDIGO Y BOTONES DE PAUSA EN SEPIA ---- */
code {
    background-color: var(--background-tarjeta) !important;
    color: var(--color-texto-principal) !important;
    border: 1px solid var(--color-borde) !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: var(--border-radius-sm) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.85rem !important;
}

.btn-warning, .btn-outline-warning, .btn-pause {
    background-color: var(--color-advertencia) !important;
    border-color: var(--color-advertencia) !important;
    color: var(--color-texto-principal) !important;
}

.btn-warning *, .btn-outline-warning *, .btn-pause *, .btn-warning i, .btn-outline-warning i {
    color: var(--color-texto-principal) !important;
}

.btn-warning:hover, .btn-outline-warning:hover {
    background-color: var(--background-azul-oscuro) !important;
    border-color: var(--background-azul-oscuro) !important;
    color: var(--color-texto-boton) !important;
}

.btn-warning:hover *, .btn-outline-warning:hover * {
    color: var(--color-texto-boton) !important;
}


/* ---- NAVBAR TOGGLER Y MENÚ MANTECA / CHOCOLATE ---- */
.navbar-toggler {
    border: 1.5px solid var(--color-borde-azul) !important;
    padding: 0.25rem 0.6rem;
    border-radius: var(--border-radius-md);
}

.text-chocolate {
    color: var(--color-texto-principal) !important;
}


/* ==========================================================================
   13. COMPONENTES Y ESTRUCTURA MESA DE ENTRADA SEPIA
   ========================================================================== */
.mesa-header {
    background-color: var(--background-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: var(--border-radius-lg);
    padding: 1rem 1.5rem;
    margin-bottom: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sepia);
}

.header-icon-box {
    width: 44px;
    height: 44px;
    background-color: var(--background-principal);
    border: 1px solid var(--color-borde);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.txt-header-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-texto-principal);
    line-height: 1.2;
}

.txt-header-sub {
    font-size: 0.85rem;
    color: var(--color-texto-mutado);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.dot-main, .status-dot-active {
    width: 8px;
    height: 8px;
    background-color: var(--color-exito);
    border-radius: var(--border-radius-full);
    display: inline-block;
}

.dot-ping {
    width: 8px;
    height: 8px;
    background-color: var(--color-advertencia);
    border-radius: var(--border-radius-full);
    display: inline-block;
}

#mesa-grid, .mesa-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem !important;
    align-items: start !important;
    width: 100% !important;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 992px) {
    #mesa-grid, .mesa-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem !important;
    align-items: start !important;
    width: 100% !important;
        grid-template-columns: 1fr;
    }
}

.mesa-col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mesa-card {
    background-color: var(--background-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: var(--border-radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sepia);
}

.mesa-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-borde);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.mesa-card-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-texto-principal);
}

.box-body {
    padding: 0.5rem 0;
}

.box-libre {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--color-texto-mutado);
}

.box-libre-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    color: var(--color-texto-mutado);
}

.box-libre-icon svg {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
}

.mesa-custom-item svg, svg.mesa-custom-item {
    width: 20px !important;
    height: 20px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    display: inline-block;
    vertical-align: middle;
}

.btn-llamar {
    background-color: var(--color-exito) !important;
    color: var(--color-texto-boton) !important;
    width: 100%;
    padding: 0.85rem;
    font-weight: 800;
    border-radius: var(--border-radius-md);
    border: none;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-llamar:hover {
    background-color: var(--background-sepia-oscuro) !important;
}

.btn-llamar svg {
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor;
}

.btn-ticket {
    background-color: var(--background-sepia) !important;
    color: var(--color-texto-boton) !important;
    width: 100%;
    padding: 0.75rem;
    font-weight: 700;
    border-radius: var(--border-radius-md);
    border: none;
    font-size: 1rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-ticket:hover {
    background-color: var(--background-sepia-oscuro) !important;
}

.btn-ticket svg {
    width: 20px !important;
    height: 20px !important;
}

.btn-confirmar {
    background-color: var(--background-sepia) !important;
    color: var(--color-texto-boton) !important;
    width: 100%;
    padding: 0.6rem;
    border-radius: var(--border-radius-md);
    border: none;
    margin-top: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.btn-accion {
    padding: 0.6rem 1rem;
    border-radius: var(--border-radius-md);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-finalizar {
    background-color: var(--color-exito) !important;
    color: var(--color-texto-boton) !important;
}

.btn-ausente {
    background-color: var(--color-error) !important;
    color: var(--color-texto-boton) !important;
}

.btn-accion svg {
    width: 18px !important;
    height: 18px !important;
}

.field-dark {
    background-color: var(--background-input) !important;
    border: 1px solid var(--color-borde) !important;
    color: var(--color-texto-principal) !important;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius-md);
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.field-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-texto-secundario);
    display: block;
    margin-bottom: 0.25rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.stat-box {
    background-color: var(--background-principal);
    border: 1px solid var(--color-borde);
    padding: 0.75rem;
    text-align: center;
    border-radius: var(--border-radius-md);
}

.stat-box.amarillo {
    border-color: var(--color-advertencia);
    background-color: rgba(217, 119, 6, 0.08);
}

.stat-box.verde {
    border-color: var(--color-exito);
    background-color: rgba(45, 106, 79, 0.08);
}

.fila-scroll {
    max-height: 380px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fila-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-texto-mutado);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.fila-empty svg {
    width: 36px !important;
    height: 36px !important;
}

.fila-item {
    background-color: var(--background-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: var(--border-radius-md);
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fila-item:hover {
    background-color: var(--background-tarjeta-hover);
    border-color: var(--color-borde-sepia);
}

.fila-item svg {
    width: 16px !important;
    height: 16px !important;
    color: var(--color-texto-mutado);
}


/* ==========================================================================
   MODAL REGISTRO Y ATENCIÓN CIUDADANO (MESA DE ENTRADA)
   ========================================================================== */
.mesa-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background-color: rgba(43, 24, 0, 0.65);
    backdrop-filter: blur(4px);
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.mesa-modal-overlay.is-visible {
    display: flex;
    opacity: 1;
}

.mesa-modal-container {
    background-color: var(--background-superficie);
    border: 2px solid var(--color-borde);
    border-radius: var(--border-radius-xl, 16px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    width: 100%;
    max-width: 580px;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.25s ease;
}

.modal-container-lg {
    max-width: 1150px !important;
    width: 92vw !important;
}

.modal-body-scroll {
    max-height: 75vh !important;
    min-height: 360px;
    overflow-y: auto !important;
}

.mesa-modal-overlay.is-visible .mesa-modal-container {
    transform: translateY(0);
}

.mesa-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-borde-claro);
    background-color: var(--background-tarjeta);
}

.mesa-modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-texto-chocolate);
    margin: 0 0 0.25rem 0;
}

.mesa-modal-subtitle {
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
    margin: 0;
}

.mesa-modal-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-texto-mutado);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-sm, 6px);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.mesa-modal-close:hover {
    color: var(--color-texto-chocolate);
    background-color: var(--background-tarjeta-hover);
}

.mesa-modal-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 70vh;
    overflow-y: auto;
}

.form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-row-1col {
    display: flex;
    flex-direction: column;
}

.mesa-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-borde-claro);
    background-color: var(--background-tarjeta);
}

.btn-modal-cancel {
    background-color: var(--background-principal);
    border: 1px solid var(--color-borde);
    color: var(--color-texto-secundario);
    padding: 0.6rem 1.2rem;
    border-radius: var(--border-radius-md, 8px);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-modal-cancel:hover {
    background-color: var(--background-oscuro);
    color: var(--color-texto-chocolate);
}

.btn-modal-submit {
    background-color: var(--background-sepia);
    border: 1px solid var(--color-borde-sepia);
    color: var(--color-texto-boton);
    padding: 0.6rem 1.4rem;
    border-radius: var(--border-radius-md, 8px);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.15s ease;
}

.btn-modal-submit:hover {
    background-color: var(--background-sepia-oscuro);
    box-shadow: 0 4px 12px rgba(139, 69, 19, 0.25);
}

/* ==========================================================================
   NUEVAS CLASES DE UTILIDAD Y COMPONENTES (CERO INLINE STYLES)
   ========================================================================== */

/* Clases de Visibilidad y Estado */
.is-hidden { display: none !important; }
.text-error { color: var(--color-error) !important; }
.text-warning { color: var(--color-advertencia) !important; }
.text-success { color: var(--color-exito) !important; }

/* Botón Re-llamar */
.btn-accion.btn-rellamar {
    background: rgba(234, 179, 8, 0.15);
    color: #d97706;
    border: 1px solid rgba(234, 179, 8, 0.35);
}
.btn-accion.btn-rellamar:hover {
    background: rgba(234, 179, 8, 0.28);
    border-color: rgba(234, 179, 8, 0.6);
}
.btn-rellamar-icon {
    width: 1.1rem;
    height: 1.1rem;
}

/* Cajas e Indicadores */
.clickable { cursor: pointer; }
.stat-card-interactive {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat-card-interactive:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 69, 19, 0.12);
}

.modal-container-lg {
    max-width: 780px;
    width: 92%;
}
.modal-body-scroll {
    max-height: 420px;
    overflow-y: auto;
    padding: 15px;
}

/* Badges y Textos Nano */
.badge-subtle-sm { font-size: 0.72rem; }
.btn-nano { font-size: 0.65rem; }
.txt-nano { font-size: 0.68rem; }
.txt-nano-muted { font-size: 0.65rem; }

/* Indicadores de estado de Box en JS */
.dot-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.2s ease;
}
.dot-indicator.dot-free { background-color: #4ade80 !important; }
.dot-indicator.dot-busy { background-color: #f87171 !important; }

.box-libre-warning {
    border: 2px solid #f59e0b !important;
    background: rgba(245, 158, 11, 0.12) !important;
    border-radius: 12px !important;
    padding: 16px !important;
}

/* Notificaciones Toast */
.toast-notification {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    padding: 12px 20px;
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.toast-success { background-color: #10b981; }
.toast-warning { background-color: #f59e0b; }
.toast-error   { background-color: #ef4444; }
.toast-info    { background-color: #3b82f6; }

/* Empty State y SVGs en Fila de Espera */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    color: var(--color-texto-mutado);
    text-align: center;
}

.empty-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 0.75rem;
    opacity: 0.6;
    color: var(--color-texto-mutado);
}

.empty-text {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-texto-secundario);
}

.fila-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ==========================================================================
   ESTÉTICA SEPIA NUXÉTICA — DASHBOARD & COMPONENTES GLOBALES
   ========================================================================== */

/* Navbar Sepia Institucional */
.navbar-sepia {
    background-color: var(--background-tarjeta, #fdf3e0) !important;
    border-bottom: 2px solid var(--color-borde, #c8b89a) !important;
    box-shadow: 0 2px 10px rgba(139, 69, 19, 0.08) !important;
    padding: 0.65rem 1rem !important;
}

.navbar-sepia .navbar-brand {
    color: var(--color-texto-chocolate, #402203) !important;
    font-weight: 800;
}

.navbar-sepia .nav-link {
    color: var(--color-texto-secundario, #5c3a21) !important;
    font-weight: 600;
}

.navbar-sepia .nav-link:hover {
    color: var(--background-sepia, #8b4513) !important;
}

/* Footer Sepia */
.footer-sepia {
    background-color: var(--background-oscuro, #ede8df) !important;
    border-top: 2px solid var(--color-borde, #c8b89a) !important;
    color: var(--color-texto-secundario, #5c3a21) !important;
}

/* Inputs de formulario en Sepia */
.form-control-sepia {
    background-color: var(--background-tarjeta, #fdf3e0) !important;
    color: var(--color-texto-principal, #402203) !important;
    border: 1.5px solid var(--color-borde, #c8b89a) !important;
    border-radius: var(--border-radius-md, 8px) !important;
    font-weight: 500;
}

.form-control-sepia:focus {
    border-color: var(--background-sepia, #8b4513) !important;
    box-shadow: 0 0 0 0.2rem rgba(139, 69, 19, 0.18) !important;
    background-color: #ffffff !important;
}

/* Tablas Sepia */
.table-sepia {
    --bs-table-bg: var(--background-tarjeta, #fdf3e0);
    --bs-table-striped-bg: #f9ede0;
    --bs-table-hover-bg: #f5e6d3;
    --bs-table-color: var(--color-texto-principal, #402203);
    color: var(--color-texto-principal, #402203) !important;
    border-color: var(--color-borde-claro, #d7c5ae) !important;
}

.table-sepia thead th {
    background-color: var(--background-oscuro, #ede8df) !important;
    color: var(--color-texto-chocolate, #402203) !important;
    font-weight: 700 !important;
    border-bottom: 2px solid var(--color-borde, #c8b89a) !important;
    padding: 10px 14px;
}

.table-sepia tbody td {
    padding: 10px 14px;
    border-color: var(--color-borde-claro, #d7c5ae) !important;
    vertical-align: middle;
}

/* Badges y Colores Temáticos */
.bg-sepia {
    background-color: var(--background-sepia, #8b4513) !important;
    color: #ffffff !important;
}

.text-sepia {
    color: var(--background-sepia, #8b4513) !important;
}

.text-ticket {
    color: var(--color-exito, #2d6a4f) !important;
    font-family: var(--font-mono, monospace);
    font-weight: 700;
}

.text-stat-number {
    color: var(--color-texto-chocolate, #402203) !important;
}

.badge-codigo-sepia {
    background-color: var(--background-oscuro, #ede8df) !important;
    color: var(--background-sepia, #8b4513) !important;
    border: 1px solid var(--color-borde, #c8b89a) !important;
    font-family: var(--font-mono, monospace);
    padding: 3px 8px;
    border-radius: 6px;
}

.badge-nicho {
    background-color: var(--background-oscuro, #ede8df) !important;
    color: var(--background-sepia, #8b4513) !important;
    border: 1px solid var(--color-borde, #c8b89a) !important;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
}

.dot-activo {
    width: 8px;
    height: 8px;
    background-color: var(--color-exito, #2d6a4f);
    border-radius: 50%;
    display: inline-block;
}

.dot-inactivo {
    width: 8px;
    height: 8px;
    background-color: var(--color-error, #b91c1c);
    border-radius: 50%;
    display: inline-block;
}

/* Botones con estilo Sepia */
.btn-primary-sepia {
    background-color: var(--background-sepia, #8b4513) !important;
    border-color: var(--background-sepia-oscuro, #70360e) !important;
    color: #ffffff !important;
    font-weight: 700;
}

.btn-primary-sepia:hover {
    background-color: var(--background-sepia-oscuro, #70360e) !important;
    box-shadow: 0 2px 8px rgba(139, 69, 19, 0.3) !important;
}

.btn-outline-sepia {
    background-color: transparent !important;
    border: 1.5px solid var(--background-sepia, #8b4513) !important;
    color: var(--background-sepia, #8b4513) !important;
    font-weight: 700;
}

.btn-outline-sepia:hover {
    background-color: var(--background-tarjeta, #fdf3e0) !important;
    color: var(--background-sepia-oscuro, #70360e) !important;
}