/* =========================================================
   VARIABLES GLOBALES
   - Son “perillas” para cambiar cosas rápido sin buscar t-odo el archivo.
   - :root = nivel global (toda la web).
    VERSION TEST 7 - PROD

   ========================================================= */
:root {
  /* -----------------------------
     Sidebar (menú lateral)
     ----------------------------- */
  --sidebar-w: 260px;

  --sidebar-bg: #0f172a;        /* fondo */
  --sidebar-fg: #e2e8f0;        /* texto principal */
  --sidebar-fg-muted: #94a3b8;  /* texto suave (títulos/secciones) */

  /* -----------------------------
     VENTA RÁPIDA - Cards de productos (overlay)
     Ajustás colores acá y se actualiza t-odo.
     ----------------------------- */
  --pos-card-name-color: #ffffff;   /* color del nombre del producto */
  --pos-card-meta-color: #cbd5e1;   /* color del texto “meta” (unidad/código/etc.) */
  --pos-card-price-color: #ffffff;  /* color del precio (verde llamativo) */
  --pos-card-btn-bg: rgba(255,255,255,.18);  /* fondo del botón + */
  --pos-card-btn-bg-hover: rgba(255,255,255,.28);
}

/* Reset básico del body:
   - overflow-x:hidden evita scroll horizontal por desbordes.
   - margin/padding 0: quita espacios por defecto del navegador. */
body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* =========================================================
   LAYOUT PRINCIPAL: SIDEBAR + CONTENIDO
   ========================================================= */
.layout {
  display: grid;

  /* Dos columnas:
     - 1ra: ancho fijo (sidebar)
     - 2da: ocupa el resto (1fr) */
  grid-template-columns: var(--sidebar-w) 1fr;

  /* Alto mínimo de toda la pantalla */
  min-height: 100vh;

  /* Animación suave cuando cambia el ancho del sidebar */
  transition: grid-template-columns .2s ease;
}

/* Cuando el layout está “colapsado”, el sidebar pasa a 64px */
.layout.collapsed {
  grid-template-columns: 64px 1fr;
}

/* =========================================================
   SIDEBAR (barra lateral)
   ========================================================= */
.sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);

  height: 100vh;
  padding: .75rem .5rem;

  display: flex;
  flex-direction: column;
  gap: .5rem;

  overflow-y: auto;
}

/* “Brand” es el bloque de logo/nombre arriba del sidebar */
.brand {
  display: flex;
  align-items: center;
  gap: .5rem;

  padding: .5rem .75rem;
  border-radius: .5rem;

  color: var(--sidebar-fg);
  text-decoration: none;
}

/* Hover suave */
.brand:hover { background: rgba(255,255,255,.06); }

/* Secciones del menú */
.nav-section { margin-top: .25rem; }

/* Títulos de sección */
.nav-section h6 {
  color: var(--sidebar-fg-muted);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;

  padding: .5rem .75rem;
  margin: .5rem 0 .25rem;
}

/* Links del sidebar */
.side-link {
  display: flex;
  align-items: center;
  gap: .6rem;

  padding: .55rem .75rem;
  border-radius: .5rem;

  color: var(--sidebar-fg);
  text-decoration: none;
  font-size: .95rem;
}
.side-link:hover { background: rgba(255,255,255,.06); }
.side-link.active { background:#1e293b; }

/* Colapsado: ocultamos los textos */
.layout.collapsed .text-label,
.layout.collapsed .nav-section h6 {
  display:none;
}

/* =========================================================
   TOPBAR (barra superior)
   ========================================================= */
.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:.5rem 1rem;

  border-bottom:1px solid #e9ecef;
  background:#fff;

  position:sticky;
  top:0;
  z-index:10;
}

/* Área principal */
main { padding: 1.2rem; }

/* Efecto hover en cards tipo “módulo” */
.module-card { transition: transform .15s ease, box-shadow .15s ease; }
.module-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Imagen fija para cards generales */
.card-img-fixed,
.card-custom img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 0.75rem 0.75rem 0 0;
  display: block;
}

/* Fondo del área de contenido */
.content-area {
  min-height: 100vh;
  background:#f8f9fa;
}

/* =========================================================
   TEMA OSCURO
   ========================================================= */
[data-bs-theme="dark"] body {
  background-color: #020617;
  color: #e5e7eb;
}
[data-bs-theme="dark"] .topbar {
  background-color: #020617;
  border-bottom-color: #111827;
}
[data-bs-theme="dark"] .content-area { background-color: #020617; }
[data-bs-theme="dark"] .card {
  background-color: #020617;
  border-color: #1f2937;
  color: #e5e7eb;
}

/* Dark mode: variables del sidebar */
[data-bs-theme="dark"] .sidebar {
  --sidebar-bg: #020617;
  --sidebar-fg: #e5e7eb;
  --sidebar-fg-muted: #6b7280;
}

/* =========================================================
   MODO LOGIN
   ========================================================= */
body.login-page .sidebar { display: none; }
body.login-page .topbar { display: none; }
body.login-page #layout { grid-template-columns: 1fr; }

body.login-page .content-area {
  background: radial-gradient(circle at top, #0f172a, #020617);
}

/* =========================================================
   BOTTOM NAV GLOBAL (móvil)
   ========================================================= */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;

  border-top: 1px solid #e5e7eb;
  background-color: #ffffff;

  padding: .2rem .75rem;
}
[data-bs-theme="dark"] .bottom-nav {
  background-color: #020617;
  border-top-color: #111827;
}

.bottom-nav-inner {
  display: flex;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto;
  gap: .25rem;
}

.bottom-nav-link {
  flex: 1;
  text-align: center;
  text-decoration: none;

  font-size: .7rem;
  padding: .2rem 0 .1rem;

  color: #6b7280;
}

.bottom-nav-link .bi {
  display: block;
  font-size: 1.1rem;
  margin-bottom: .05rem;
  transition: transform .1s ease;
}
.bottom-nav-link span { line-height: 1; }

.bottom-nav-link.active {
  color: #0ea5e9;
  font-weight: 600;
}
.bottom-nav-link.active .bi { transform: translateY(-1px); }

.sidebar-backdrop { display: none; }

/* Responsive: espacio en móvil para bottom-nav */
@media (max-width: 767.98px) {
  .content-area { padding-bottom: 3rem; }
}
@media (min-width: 768px) {
  .bottom-nav { display: none; }
}

/* =========================================================
   OFFCANVAS SIDEBAR EN MÓVIL
   ========================================================= */
@media (max-width: 991.98px) {
  .layout,
  .layout.collapsed { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;

    width: var(--sidebar-w);
    z-index: 30;

    transform: translateX(-100%);
    transition: transform .2s ease;
  }

  .layout.sidebar-open .sidebar { transform: translateX(0); }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.55);
    z-index: 25;
  }

  .layout:not(.sidebar-open) + .sidebar-backdrop { display: none; }
  .layout.sidebar-open + .sidebar-backdrop { display: block; }
}

@media (min-width: 992px) {
  .sidebar { position: static; transform: none; }
  .sidebar-backdrop { display: none !important; }
}

/* =========================================================
   VENTA RÁPIDA (scopeado)
   ========================================================= */

/* Ocultamos bottom-nav global en venta rápida */
body.venta-rapida-page .bottom-nav { display: none !important; }

/* Quitamos padding extra en venta rápida */
body.venta-rapida-page .content-area { padding-bottom: 0 !important; }

/* Fondo venta rápida */
html[data-bs-theme="light"] body.venta-rapida-page { background-color: #f5f5f7; }
html[data-bs-theme="dark"]  body.venta-rapida-page { background-color: #020617; color: #e5e7eb; }

/* Contenedor principal POS */
body.venta-rapida-page .pos-shell {
  background: #ffffff;
  border-radius: .75rem;
  padding: 1rem 1.25rem 4rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.08);
}
html[data-bs-theme="dark"] body.venta-rapida-page .pos-shell {
  background: #020617;
  box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.50);
}

@media (max-width: 991.98px) {
  body.venta-rapida-page .pos-shell {
    border-radius: 0;
    padding: .75rem .5rem 4.5rem;
    box-shadow: none;
  }
}

body.venta-rapida-page .pos-header-title { font-size: 1.4rem; font-weight: 600; }
body.venta-rapida-page .pos-subtitle { font-size: .85rem; }
body.venta-rapida-page .pos-main { margin-top: .75rem; }

/* =======================
   VENTA RÁPIDA - Cards (overlay sobre imagen)
   ======================= */
body.venta-rapida-page .prod-card{
  cursor:pointer;
  border-radius:.85rem;
  overflow:hidden;
  border:0;
  height:100%;
  position:relative;
  background: transparent;
  box-shadow: 0 .35rem 1rem rgba(0,0,0,.08);
  transition: transform .08s ease, box-shadow .08s ease;
}
body.venta-rapida-page .prod-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 .6rem 1.4rem rgba(0,0,0,.14);
}

body.venta-rapida-page .prod-media{
  position:relative;
}

/* Imagen */
body.venta-rapida-page .prod-thumb{
  width:100%;
  height:110px;
  object-fit:cover;
  display:block;
}
@media (min-width: 992px){
  body.venta-rapida-page .prod-thumb{ height:150px; }
}

/* En móviles muy chicos, que las tarjetas sean un poco más bajas */
@media (max-width: 575.98px) {
  body.venta-rapida-page .prod-thumb {
    height: 90px;
  }

  body.venta-rapida-page .prod-overlay .prod-name {
    font-size: .82rem;
  }

  body.venta-rapida-page .prod-overlay .prod-meta {
    font-size: .68rem;
  }

  body.venta-rapida-page .prod-overlay .prod-price {
    font-size: .85rem;
  }
}

/* Overlay */
body.venta-rapida-page .prod-overlay{
  position:absolute;
  inset:0;
  z-index:2;

  padding:.55rem .6rem;

  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:.35rem;

  text-align: left;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.40) 0%,
    rgba(0,0,0,.10) 40%,
    rgba(0,0,0,.72) 100%
  );
}

/* Bloque superior (nombre + detalles) */
body.venta-rapida-page .prod-overlay-top{
  padding: .25rem .35rem;
  border-radius: .55rem;
}

/* Nombre */
body.venta-rapida-page .prod-overlay .prod-name{
  font-size:.9rem;
  font-weight:800;
  line-height:1.1;

  color: var(--pos-card-name-color);

  text-shadow:0 2px 4px rgba(0,0,0,.9);

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Contenedor de detalles (unidad, código, stock, etc.) */
body.venta-rapida-page .prod-overlay .prod-meta{
  font-size:.72rem;
  line-height:1.15;
  opacity:.98;

  color: var(--pos-card-meta-color);
  text-shadow:0 2px 4px rgba(0,0,0,.9);

  overflow: visible;
}

/* Cada detalle en su propia línea */
body.venta-rapida-page .prod-overlay .prod-meta-line{
  display:block;
  margin-top: 1px;
}

/* Línea de stock resaltada */
body.venta-rapida-page .prod-overlay .prod-meta-stock{
  font-weight:600;
  color:#facc15;
}

/* Fila inferior: precio */
body.venta-rapida-page .prod-overlay .prod-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  width: 100%;
}

/* Precio */
body.venta-rapida-page .prod-overlay .prod-price{
  font-weight:900;
  font-size:.92rem;
  color: var(--pos-card-price-color);
  text-shadow:0 2px 4px rgba(0,0,0,.9);
  white-space:nowrap;
}

/* Botón + (ya no se usa en tarjetas, pero lo dejamos por si se recupera) */
body.venta-rapida-page .prod-overlay .btn-add{
  border:0;
  border-radius:.7rem;
  padding:.35rem .55rem;

  background: var(--pos-card-btn-bg);
  color:#fff;

  backdrop-filter: blur(6px);
}
body.venta-rapida-page .prod-overlay .btn-add:hover{
  background: var(--pos-card-btn-bg-hover);
}

/* price-green se usa en tabla/carrito */
body.venta-rapida-page .price-green { color:#198754; font-weight:700; }

/* Buscador + categorías */
body.venta-rapida-page .pos-search-row .form-control { font-size: .95rem; padding: .55rem .75rem; }
body.venta-rapida-page .category-pills { overflow-x: auto; white-space: nowrap; }
body.venta-rapida-page .category-pills::-webkit-scrollbar { height: 6px; }
body.venta-rapida-page .category-pills::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
body.venta-rapida-page .category-pill { font-size: .8rem; padding: .25rem .6rem; border-radius: 999px; }

/* Carrito */
body.venta-rapida-page .cart-table td,
body.venta-rapida-page .cart-table th { vertical-align: middle; font-size: .9rem; }
body.venta-rapida-page .cart-product-name {
  font-weight: 600;
  font-size: .9rem;

  display: inline-block;
  max-width: 18ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.venta-rapida-page .cart-product-meta { font-size: .75rem; color: #6c757d; }
body.venta-rapida-page .cart-qty-input { max-width: 70px; text-align: center; font-size: .95rem; }
body.venta-rapida-page .cart-total-label { font-size: .95rem; }
body.venta-rapida-page .cart-total-value { font-size: 1.3rem; font-weight: 700; }

body.venta-rapida-page .cart-table th.cart-qty-header,
body.venta-rapida-page .cart-table td.cart-qty-cell { text-align: center !important; }

/* Resumen / pagos */
body.venta-rapida-page .pay-total { font-size: 1.4rem; font-weight: 700; }
body.venta-rapida-page .pay-input { font-size: 1rem; padding: .4rem .6rem; }
body.venta-rapida-page .btn-touch { padding: .65rem 1rem; font-size: 1rem; border-radius: .75rem; }
body.venta-rapida-page .pos-pay-header .form-label { font-size: .75rem; margin-bottom: .15rem; }
body.venta-rapida-page .pos-pay-header .form-control,
body.venta-rapida-page .pos-pay-header .form-select { font-size: .85rem; padding: .3rem .45rem; }
body.venta-rapida-page #payDiffHelper { font-size: .8rem; }
body.venta-rapida-page .pay-type-group .btn-pay-type { min-width: 3rem; }
body.venta-rapida-page .pay-type-group .btn-pay-type i { font-size: 1.1rem; }

/* Modal pago */
body.venta-rapida-page #pagoModalTotal { font-size: 1.6rem; font-weight: 700; }
body.venta-rapida-page #pagoModalTipo { font-size: 1rem; font-weight: 600; }
body.venta-rapida-page #pagoModalDiff { font-size: 1.4rem; font-weight: 700; text-align: right; margin-top: .25rem; }
body.venta-rapida-page #pagoKeypad .btn { padding: .7rem 0; font-size: 1.3rem; border-radius: .75rem; }
body.venta-rapida-page #posAlert { font-size: .9rem; }

/* Botones Link/Cámara: evitar overflow en anchos intermedios */
body.venta-rapida-page .pos-search-row .btn-group{
  width: 100%;
  min-width: 0;
  display: flex;
}

body.venta-rapida-page .pos-search-row .btn-group .btn{
  flex: 1 1 0;
  min-width: 0;
  padding-left: .5rem;
  padding-right: .5rem;
}

/* Barra inferior POS */
body.venta-rapida-page .pos-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  background: #ffffff;
  border-top: 1px solid #dee2e6;

  padding: .2rem .5rem env(safe-area-inset-bottom);
  z-index: 1030;

  /* para la animación al ocultar/mostrar */
  transition: transform .15s ease;
}

/* Estado oculto (se desliza hacia abajo) */
body.venta-rapida-page .pos-bottom-nav.pos-bottom-nav-hidden {
  transform: translateY(100%);
}

body.venta-rapida-page .pos-bottom-nav .btn-nav {
  width: 100%;
  font-size: .8rem;
  padding: .35rem .25rem;
  border-radius: .75rem;

  transition: transform .12s ease, box-shadow .12s ease;
  font-weight: 500;
}

body.venta-rapida-page .pos-bottom-nav-icon {
  display: block;
  font-size: 1.1rem;
}

/* Botón flotante para mostrar/ocultar la barra */
body.venta-rapida-page .pos-bottom-toggle {
  position: fixed;
  right: .75rem;
  bottom: 4.4rem;
  z-index: 1031;

  border-radius: 999px;
  padding: .5rem 1rem;      /* MÁS ALTO Y MÁS ANCHO */
  font-size: .95rem;        /* Texto/icono más grande */

  box-shadow: 0 .35rem 1rem rgba(0,0,0,0.22);
}

/* Icono un poco más grande aún */
body.venta-rapida-page .pos-bottom-toggle i {
  font-size: 1.2rem;
}


@media (min-width: 992px) {
  body.venta-rapida-page .pos-bottom-nav {
    max-width: 1180px;
    margin: 0 auto;
    border-radius: .75rem .75rem 0 0;
    box-shadow: 0 -0.35rem 1rem rgba(0,0,0,0.06);
  }
}

body.venta-rapida-page .pos-bottom-nav .btn-nav.is-active {
  transform: translateY(-1px);
  box-shadow: 0 0.35rem 1rem rgba(0,0,0,0.12);
}

/* Dark mode específico */
html[data-bs-theme="dark"] body.venta-rapida-page .cart-card .table-light {
  background-color: #111827;
  color: #e5e7eb;
}
html[data-bs-theme="dark"] body.venta-rapida-page .cart-product-meta { color: #9ca3af; }

html[data-bs-theme="dark"] body.venta-rapida-page .pos-bottom-nav {
  background: #020617;
  border-top-color: #111827;
  box-shadow: 0 -0.35rem 1rem rgba(0,0,0,0.60);
}

html[data-bs-theme="dark"] body.venta-rapida-page .pos-bottom-nav .btn-light {
  background-color: #111827;
  color: #e5e7eb;
  border-color: #1f2937;
}

html[data-bs-theme="dark"] body.venta-rapida-page .pos-bottom-toggle {
  background-color: #111827;
  color: #e5e7eb;
  border-color: #1f2937;
}


/* Reordenar columnas en móvil */
@media (max-width: 991.98px) {
  body.venta-rapida-page #sectionProductos { order: 1; }
  body.venta-rapida-page #sectionResumen  { order: 2; }
  body.venta-rapida-page #sectionCarrito  { order: 3; }
}

/* ============================
   Tema CLARO - Ajustes globales
   ============================ */

/* Fondo general y texto */
[data-bs-theme="light"] body {
  background-color: #f3f4f6;
  color: #212529;
}

/* Contenedor principal */
[data-bs-theme="light"] .layout {
  background-color: #f3f4f6;
}

/* Sidebar en tema claro */
[data-bs-theme="light"] .sidebar {
  background-color: #ffffff;
  color: #111827;
  border-right: 1px solid #e5e7eb;
}

/* Marca (logo POS System) en sidebar */
[data-bs-theme="light"] .sidebar .brand {
  color: #0f172a;
}

[data-bs-theme="light"] .sidebar .brand .text-label {
  color: inherit;
}

/* Links del menú lateral */
[data-bs-theme="light"] .sidebar .side-link {
  color: #374151;
  background-color: transparent;
}

[data-bs-theme="light"] .sidebar .side-link:hover {
  background-color: #e5e7eb;
  color: #111827;
}

[data-bs-theme="light"] .sidebar .side-link.active {
  background-color: #dbeafe;
  color: #0d6efd;
}

/* Topbar en tema claro */
[data-bs-theme="light"] .topbar {
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

/* Zona principal de contenido */
[data-bs-theme="light"] .content-area {
  background-color: #f3f4f6;
}

/* Tarjetas genéricas */
[data-bs-theme="light"] .card {
  background-color: #ffffff;
  border-color: #dee2e6;
  color: #212529;
}

/* Tablas */
[data-bs-theme="light"] .table {
  --bs-table-bg: #ffffff;
  --bs-table-striped-bg: #f8f9fa;
  --bs-table-striped-color: #212529;
  --bs-table-hover-bg: #e9ecef;
  --bs-table-hover-color: #212529;
}

/* Entradas de formularios y selects */
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select {
  background-color: #ffffff;
  color: #212529;
  border-color: #ced4da;
}

[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.1rem rgba(13, 110, 253, 0.25);
}

/* Botones outline secundarios */
[data-bs-theme="light"] .btn-outline-secondary {
  border-color: #ced4da;
  color: #495057;
}

[data-bs-theme="light"] .btn-outline-secondary:hover {
  background-color: #e9ecef;
  color: #212529;
}


html,
body {
  height: 100%;
}

body {
  margin: 0;
}

/* Asegura que el layout siempre ocupa t odo el alto de la ventana */
.layout {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
}

/* Sidebar a t-odo alto de pantalla, con scroll interno si no entra t odo */
.sidebar {
  display: flex;
  flex-direction: column;
  width: 260px;         /* o el ancho que ya uses */
  flex-shrink: 0;
  border-right: 1px solid var(--bs-border-color, rgba(0,0,0,.1));
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
}

/* El área de contenido también ocupa t-odo el alto */
.content-area {
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ==== Mejorar legibilidad en modo CLARO ==== */

/* Subir un poco el peso general de la fuente */
:root[data-bs-theme="light"] body {
  font-weight: 600;
}

/* Asegurar que textos clave queden algo más marcados */
:root[data-bs-theme="light"] .sidebar .text-label,
:root[data-bs-theme="light"] .topbar,
:root[data-bs-theme="light"] .card,
:root[data-bs-theme="light"] .card-body,
:root[data-bs-theme="light"] .form-label,
:root[data-bs-theme="light"] .form-control,
:root[data-bs-theme="light"] .btn,
:root[data-bs-theme="light"] table {
  font-weight: 500;
}

/* Hacer los textos "apagados" un poco menos lavados en modo claro */
:root[data-bs-theme="light"] .text-muted {
  color: #5a5f66 !important; /* más oscuro que el gris por defecto */
}
/* ==== Sidebar en pantallas chicas: off-canvas, sin ocupar ancho ==== */
@media (max-width: 991.98px) {

  /* El contenido siempre ocupa t odo el ancho en móvil */
  .layout .content-area {
    margin-left: 0 !important;
  }

  /* La barra lateral se comporta como panel que entra/sale */
  .layout .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 260px;              /* ajusta si tu sidebar es más angosto/ancho */
    transform: translateX(-100%);
    transition: transform .25s ease-out;
    z-index: 1040;             /* por encima del contenido */
  }

  /* Cuando hay sidebar-open, la mostramos */
  .layout.sidebar-open .sidebar {
    transform: translateX(0);
  }

  /* El layout en sí no deja espacio a la izquierda en móvil */
  .layout {
    /* nada de margen reservado para la sidebar */
  }

  /* Backdrop sólo cuando el menú está abierto */
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1030;
    display: none;
  }

  .layout.sidebar-open + .sidebar-backdrop {
    display: block;
  }
}


/* ==== Sidebar en pantallas chicas: off-canvas real ==== */
@media (max-width: 991.98px) {

  /* El contenido SIEMPRE ocupa t odo el ancho en móvil */
  .layout .content-area {
    margin-left: 0 !important;
  }

  /* La barra lateral se comporta como panel que entra/sale */
  .layout .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 260px;                 /* ajustá si querés más angosta/ancha */
    transform: translateX(-100%); /* OCULTA por defecto */
    transition: transform 0.25s ease-out;
    z-index: 1040;
  }

  /* Cuando se agrega .sidebar-open (ya lo hace tu JS), la mostramos */
  .layout.sidebar-open .sidebar {
    transform: translateX(0);
  }

  /* En móvil NO usamos el modo "collapsed" de escritorio */
  .layout.collapsed .sidebar {
    width: 260px;
  }
  .layout.collapsed .sidebar .text-label {
    display: inline;
  }

  /* Backdrop tapable detrás del menú */
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1030;
    display: none;
  }

  /* Ojo: el backdrop está como hermano de .layout */
  .layout.sidebar-open + .sidebar-backdrop {
    display: block;
  }
}


/* ==== Sidebar colapsada en pantallas grandes: solo iconos ==== */
@media (min-width: 992px) {
  .layout.collapsed .sidebar {
    width: 64px !important;      /* antes 260px */
    padding-left: .25rem;
    padding-right: .25rem;
  }

  /* Centrar los iconos cuando no hay texto */
  .layout.collapsed .sidebar .brand,
  .layout.collapsed .sidebar .side-link {
    justify-content: center;
  }
}