/* ── color-scheme: hace que los controles NATIVOS del navegador (el desplegable
   abierto de un <select>, scrollbars, etc.) se pinten oscuros en modo oscuro — sin
   esto, esos controles los dibuja el sistema operativo con su paleta clara de
   siempre, aunque el resto de la página (incluido el <select> cerrado, que sí es
   CSS de Bootstrap) esté en oscuro. Por eso se veían las opciones del desplegable
   con fondo claro/transparente encima del contenido oscuro de atrás. ─────────── */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ── Dropdown de "cambiar ingrediente" (recetas/form.php) — fondo celeste sólido en
   vez del blanco/gris por defecto de .dropdown-menu, para que se note claramente que
   está flotando por encima de la tabla. */
#inlineDropdownGlobal { background-color: #eaf6fd; border-color: #9fd8ef; }
#inlineDropdownGlobal .dropdown-item:hover,
#inlineDropdownGlobal .dropdown-item:focus { background-color: #cdeaf7; }
:root[data-theme="dark"] #inlineDropdownGlobal { background-color: #16323e; border-color: #1f5872; }
:root[data-theme="dark"] #inlineDropdownGlobal .dropdown-item { color: #e6f6fc; }
:root[data-theme="dark"] #inlineDropdownGlobal .dropdown-item:hover,
:root[data-theme="dark"] #inlineDropdownGlobal .dropdown-item:focus { background-color: #1f5872; }

/* ── Layout principal ─────────────────────────────────────── */
body {
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
}

#mainNavbar {
    width: 260px;
    /* height (no min-height): con position:fixed y sin esto, el navbar crece tanto
       como su contenido (todos los links del sidebar) en vez de quedar acotado a la
       pantalla, así que overflow-y:auto nunca llegaba a activarse y el scroll no
       funcionaba — se veían recortadas las últimas opciones del menú. */
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    overflow-y: auto;
    border-right: 1px solid var(--bs-border-color);
}

.main-content {
    flex: 1;
    margin-left: 260px;
    min-width: 0;
    max-width: calc(100vw - 260px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* Header fijo */
.navbar-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: 64px;
}

/* ── Sidebar mobile ───────────────────────────────────────── */
@media (max-width: 991.98px) {
    #mainNavbar {
        position: fixed;
        transform: translateX(-100%);
        transition: transform .3s ease;
    }
    #mainNavbar.show {
        transform: translateX(0);
    }
    .main-content {
        margin-left: 0;
        max-width: 100vw;
    }
}

/* ── Toggle de sidebar en escritorio (botón hamburguesa del header) ────── */
@media (min-width: 992px) {
    #mainNavbar {
        transition: transform .3s ease;
    }
    body.sidebar-collapsed #mainNavbar {
        transform: translateX(-100%);
    }
    body.sidebar-collapsed .main-content {
        margin-left: 0;
        max-width: 100vw;
        transition: margin-left .3s ease;
    }
}

/* ── Nav items ───────────────────────────────────────────── */
#mainNavbar .nav-item {
    margin-top: .15rem;
    margin-bottom: .15rem;
}
.nav-icon {
    margin-right: .5rem;
    opacity: .7;
    flex-shrink: 0;
}
.nav-item.active .nav-link {
    color: var(--bs-primary);
    background: var(--wa-sidebar-active-bg, rgba(var(--bs-primary-rgb), .08));
    border-radius: .5rem;
    font-weight: 600;
}
.nav-item.active .nav-icon {
    opacity: 1;
}
.nav-item-label {
    padding: .25rem 1rem;
}

/* ── Sidebar: esquema de color invertido respecto al tema de la app ─────────
   Pedido explícito: en modo claro el sidebar queda oscuro con letras claras, y
   en modo oscuro el sidebar queda claro con letras oscuras (lo opuesto al
   resto de la página), para que se distinga como panel de navegación fijo. */
:root[data-theme="light"] #mainNavbar {
    --wa-sidebar-bg:        #0d1b3d;
    --wa-sidebar-bg-alt:    #15295c;
    --wa-sidebar-color:     #c7cbd4;
    --wa-sidebar-color-mut: #8b909c;
    --wa-sidebar-border:    rgba(255, 255, 255, .08);
    --wa-sidebar-active-bg: rgba(0, 186, 199, .18);
}
:root[data-theme="dark"] #mainNavbar {
    --wa-sidebar-bg:        #ffffff;
    --wa-sidebar-bg-alt:    #f1f3f5;
    --wa-sidebar-color:     #37414f;
    --wa-sidebar-color-mut: #6c7686;
    --wa-sidebar-border:    rgba(0, 0, 0, .08);
    --wa-sidebar-active-bg: rgba(0, 186, 199, .10);
}
#mainNavbar {
    background-color: var(--wa-sidebar-bg) !important;
    border-right-color: var(--wa-sidebar-border) !important;
    /* El buscador y el ícono de lupa usan var(--bs-navbar-padding-x, 1.875rem) para el
       padding horizontal — al no estar definida, siempre caían en el fallback de
       1.875rem. Se fija acá en 0.3rem (pedido explícito), y como el buscador ya la
       referenciaba, alcanza con esto. */
    --bs-navbar-padding-x: 0.3rem;
}
#mainNavbar .navbar-brand span {
    color: var(--wa-sidebar-color) !important;
}
#mainNavbar .nav-link {
    color: var(--wa-sidebar-color);
}
#mainNavbar .nav-link:hover {
    color: var(--bs-primary);
}
#mainNavbar .nav-item-label small {
    color: var(--wa-sidebar-color-mut) !important;
}

/* ── Sidebar: encabezados de sección colapsables (ej. "Ventas", "Producción") ────── */
.nav-group-toggle {
    cursor: pointer;
    text-decoration: none;
    padding: .25rem 0;
}
.nav-group-chevron {
    color: var(--wa-sidebar-color-mut);
    transition: transform .2s ease;
    flex-shrink: 0;
}
/* Bootstrap agrega/saca .collapsed en el trigger solo (mismo mecanismo que
   #btnSidebarToggle en el header) — flecha hacia abajo = expandido, hacia
   arriba = contraído. */
.nav-group-toggle.collapsed .nav-group-chevron {
    transform: rotate(-90deg);
}

/* ── Sidebar: buscador de funcionalidades ───────────────────────────────── */
.sidebar-search-wrap {
    padding: 0 var(--bs-navbar-padding-x, 1.875rem) .75rem;
    position: relative;
}
.sidebar-search-wrap .sidebar-search-icon {
    position: absolute;
    left: calc(var(--bs-navbar-padding-x, 1.875rem) + .6rem);
    top: 50%;
    transform: translateY(-50%);
    color: var(--wa-sidebar-color-mut);
    pointer-events: none;
}
.sidebar-search-input {
    background-color: var(--wa-sidebar-bg-alt) !important;
    border: 1px solid var(--wa-sidebar-border) !important;
    color: var(--wa-sidebar-color) !important;
    /* Más grande (antes era form-control-sm) y a todo el ancho del wrap, que ya usa el
       mismo padding horizontal que el resto de los ítems del sidebar. */
    width: 100%;
    padding: .55rem .75rem .55rem 2.3rem !important;
    font-size: .9rem;
    border-radius: .5rem;
}
.sidebar-search-input::placeholder {
    color: var(--wa-sidebar-color-mut);
    opacity: 1;
}
.sidebar-search-input:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2) !important;
}

/* ── DataTables con FixedHeader ────────────────────────────── */
.dtfh-floatingparent {
    z-index: 1020 !important;
}
#tblProductos tbody tr {
    cursor: pointer;
}
.dt-buttons .btn {
    font-size: .8rem;
}
.dataTables_wrapper .dataTables_filter input {
    margin-left: .5rem;
}

/* ── Badges soft ─────────────────────────────────────────── */
.bg-success-soft   { background-color: rgba(25,135,84,.12) !important; }
.bg-danger-soft    { background-color: rgba(220,53,69,.12) !important; }
.bg-warning-soft   { background-color: rgba(255,193,7,.15) !important; }
.bg-primary-soft   { background-color: rgba(13,110,253,.1) !important; }
.bg-secondary-soft { background-color: rgba(108,117,125,.1) !important; }
.bg-info-soft       { background-color: rgba(13,202,240,.12) !important; }
.alert-info-soft    { background-color: rgba(13,202,240,.12) !important; color: #087990; }
.alert-success-soft {
    background-color: rgba(25,135,84,.12) !important;
    color: #0f5132;
    border: 1px solid rgba(25,135,84,.25);
}
.alert-warning-soft {
    background-color: rgba(255,193,7,.15) !important;
    color: #664d03;
    border: 1px solid rgba(255,193,7,.35);
}
:root[data-theme="dark"] .alert-success-soft {
    background-color: rgba(25,135,84,.18) !important;
    color: #75dda3;
    border-color: rgba(25,135,84,.35);
}
:root[data-theme="dark"] .alert-warning-soft {
    background-color: rgba(255,193,7,.18) !important;
    color: #ffda6a;
    border-color: rgba(255,193,7,.4);
}

/* ── Cards sin borde ─────────────────────────────────────── */
.card.border-0 {
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
    border-radius: .75rem;
}

/* ── POS / Ventas ─────────────────────────────────────────── */
.pos-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .75rem;
}
.pos-product-card {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: .5rem;
    padding: .75rem .5rem;
    text-align: center;
    transition: border-color .15s;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.pos-product-card:hover {
    border-color: var(--bs-primary);
}
.pos-product-card img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: .5rem;
    margin-bottom: .5rem;
}

/* ── Ticket de impresión ──────────────────────────────────── */
@media print {
    body * { visibility: hidden; }
    #print-area, #print-area * { visibility: visible; }
    #print-area {
        position: absolute;
        left: 0; top: 0;
        width: 80mm;
        font-family: 'Courier New', monospace;
        font-size: 11px;
    }
}

/* ── PWA Install banner ───────────────────────────────────── */
#pwa-install-banner {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: var(--bs-primary);
    color: #fff;
    padding: .75rem 1.5rem;
    border-radius: 2rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .9rem;
}
/* El tema Dashly define .btn-close como position:absolute;right:0;top:0 con
   padding enorme (pensado para la esquina de sus alertas) — acá lo saca de
   ese comportamiento para que vuelva a ser un ítem inline normal del flex,
   si no el área clickeable real queda desplazada del ícono "×" que se ve. */
#pwa-install-banner .btn-close {
    position: static;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    padding: .35rem;
    margin: 0;
}

/* ── Chat IA ─────────────────────────────────────────────── */
.chat-messages {
    height: calc(100vh - 280px);
    overflow-y: auto;
    padding: 1rem;
}
.chat-bubble {
    max-width: 75%;
    padding: .6rem 1rem;
    border-radius: 1rem;
    margin-bottom: .75rem;
    font-size: .9rem;
    line-height: 1.5;
}
.chat-bubble.user {
    background: var(--bs-primary);
    color: #fff;
    margin-left: auto;
    border-bottom-right-radius: .2rem;
}
.chat-bubble.assistant {
    background: var(--bs-light);
    color: var(--bs-body-color);
    margin-right: auto;
    border-bottom-left-radius: .2rem;
}

/* ── Alertas: acento de color + ícono + esquinas suaves ──────
   Aplica a los .alert de Bootstrap en toda la app sin tocar cada vista.
   Se apoya en las variables que ya define el tema (--bs-*-text-emphasis,
   --bs-*-bg-subtle, --bs-*-border-subtle), así que respeta modo claro/oscuro. */
.alert {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    border-radius: .75rem;
    border-left-width: 4px;
    line-height: 1.5;
    box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .06);
}
.alert:not(:has(svg)):not(:has(.alert-icon))::before {
    flex-shrink: 0;
    line-height: 1.3;
    font-size: 1.05em;
}
.alert-success::before  { content: "✓"; }
.alert-danger::before   { content: "✕"; }
.alert-warning::before  { content: "⚠"; }
.alert-info::before,
.alert-primary::before  { content: "ℹ"; }

.alert-success  { border-left-color: var(--bs-success); }
.alert-danger   { border-left-color: var(--bs-danger); }
.alert-warning  { border-left-color: var(--bs-warning); }
.alert-info     { border-left-color: var(--bs-info); }
.alert-primary  { border-left-color: var(--bs-primary); }
.alert-secondary{ border-left-color: var(--bs-secondary); }

/* ── Botones de DataTables (Columnas/Excel/PDF) ──────────────
   La extensión Buttons les agrega su propia clase .btn-secondary además de
   la nuestra (btn-outline-*), y como quedan con la misma especificidad el
   resultado final dependía del orden del bundle del tema — por eso se veían
   todos grises. Acá se fuerza el color con selectores más específicos. */
.dt-buttons .buttons-colvis {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}
.dt-buttons .buttons-colvis:hover,
.dt-buttons .buttons-colvis:focus {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    color: #fff;
}
.dt-buttons .buttons-excel {
    background-color: #198754;
    border-color: #198754;
    color: #fff;
}
.dt-buttons .buttons-excel:hover,
.dt-buttons .buttons-excel:focus {
    background-color: #157347;
    border-color: #146c43;
    color: #fff;
}
.dt-buttons .buttons-pdf {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
}
.dt-buttons .buttons-pdf:hover,
.dt-buttons .buttons-pdf:focus {
    background-color: #bb2d3b;
    border-color: #b02a37;
    color: #fff;
}

/* ── Acordeón (ej. historial de versiones de receta): el estado expandido
   de Dashly usa fondo celeste clarito (#e6f8f9) con texto turquesa
   (#00a7b3) — no tiene suficiente contraste en ningún modo y no tiene
   variante para modo oscuro. Se reutiliza el mismo color de texto/fondo
   que ya usa el estado colapsado (que sí está bien adaptado a ambos
   modos), en vez de pelear con las variables propias de Dashly. */
.accordion-button:not(.collapsed) {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: none;
}

/* ── Encabezados de tabla (thead.table-light): Dashly fija colores fijos
   sin variante para modo oscuro, dejando el header siempre clarito aunque
   el resto de la tabla esté oscuro. Se definen colores propios con buen
   contraste garantizado en los dos modos. */
.table-light {
    --bs-table-color: #1f2937;
    --bs-table-bg: #eef1f4;
    --bs-table-border-color: #d5d9de;
}
:root[data-theme="dark"] .table-light {
    --bs-table-color: #e9edef;
    --bs-table-bg: #2a323c;
    --bs-table-border-color: #3a4450;
}