/* Wallboard mode */
body.wallboard #sidebar-container,
body.wallboard nav.navbar { display: none !important; }
body.wallboard #main-content { padding: 8px !important; }
body.wallboard .card-title { font-size: 0.9rem; }
body.wallboard .display-4, body.wallboard .display-6 { font-size: 2rem; }
body.wallboard .card-body { padding: 0.75rem; }
body.wallboard .row.g-4 { row-gap: .75rem !important; }
/* frontend/dashboard.css - v10 (Ajuste de UI en sidebar colapsado) */

/* Previene el "Flash of Incorrect Layout" (FOIL) usando opacidad.
   La clase `layout-loading` se añade al body en el HTML y se elimina 
   con JS cuando el layout está 100% listo y renderizado. */
body.layout-loading {
    opacity: 0;
}

/* --- ESTILOS BASE Y MÓVILES (Por defecto) --- */
body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    overflow-x: hidden;
    /* Transición para el fade-in suave al quitar la clase .layout-loading */
    transition: opacity 0.2s ease-in;
    display: block; /* Asegura que el body sea 'block' por defecto en móvil */
}

html { height: -webkit-fill-available; }

/* Navbar: Fijo en la parte superior para móvil */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
}

/* Sidebar: Oculto fuera de la pantalla por defecto en móvil */
#sidebar-container {
    width: 280px;
    transition: transform 0.3s ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1050;
    transform: translateX(-100%); /* Siempre fuera de pantalla por defecto */
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    /* Añadir padding en la parte inferior para dejar espacio para las barras de navegación del navegador móvil.
       `env(safe-area-inset-bottom)` es una variable CSS que los navegadores modernos (especialmente en iOS)
       proveen para evitar que el contenido sea obstruido por la UI del sistema. */
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    flex-shrink: 0;
    display: flex; /* Siempre será un contenedor flex */
    visibility: hidden; /* Oculto por defecto, pero mantiene su espacio (aunque fuera de pantalla) */
}

/* --- GARANTIZAR QUE EL SIDEBAR ESTÉ OCULTO EN MÓVIL POR DEFECTO --- */
@media (max-width: 991.98px) {
    #sidebar-container {
        transform: translateX(-100%) !important; /* Forzar oculto en móvil */
        visibility: hidden !important;
    }
    
    /* Reset completo del estado del sidebar en móvil */
    body.sidebar-open #sidebar-container {
        transform: translateX(0) !important; /* Solo visible cuando se activa explícitamente */
        visibility: visible !important;
    }
}

/* Contenido Principal: Ancho completo en móvil, con padding para el navbar fijo */
#main-content {
    width: 100%;
    margin-left: 0;
    padding-top: 60px; /* Ajustar a la altura de tu navbar */
    transition: none; /* Sin transiciones en móvil para evitar glitches */
}

/* --- Ajustes navbar en móvil: evita que el nombre/usuario se "baje" --- */
@media (max-width: 991.98px) {
  .navbar .navbar-text,
  .navbar .user-name,
  .navbar .brand-text {
    max-width: 45vw;         /* espacio razonable junto al botón hamburguesa */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
  }
  
  /* --- GARANTIZAR QUE EL NAVBAR SE MANTENGA EN UNA SOLA LÍNEA --- */
  .navbar {
    min-height: 60px;        /* Altura fija mínima */
    max-height: 60px;        /* Altura fija máxima */
    flex-wrap: nowrap;       /* Evitar que los elementos se envuelvan */
    align-items: center;     /* Centrar verticalmente */
  }
  
  .navbar .navbar-nav {
    flex-direction: row;     /* Elementos en línea horizontal */
    align-items: center;     /* Centrar verticalmente */
  }
  
  .navbar .navbar-brand,
  .navbar .navbar-text {
    margin: 0;               /* Eliminar márgenes que puedan causar saltos */
    padding: 0 0.5rem;       /* Padding mínimo */
  }
  
  /* Asegurar que el contenido principal no se tape */
  #main-content {
    padding-top: 60px !important; /* Altura fija del navbar */
  }
}

/* Específico para móvil: Cuando el sidebar está abierto */
body.sidebar-open {
    overflow: hidden;
}
body.sidebar-open #sidebar-container {
    transform: translateX(0); /* Mover a la vista */
    visibility: visible !important; /* Hacerlo visible cuando está abierto */
}

/* Específico para móvil: Mostrar/ocultar botones de menú */
#mobile-sidebar-toggle,
#mobile-sidebar-close {
    display: block !important;
}

/* Overlay para móvil */
#mobile-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1040;
}
body.sidebar-open #mobile-sidebar-overlay {
    display: block !important;
}

/* --- ESTILOS PARA EL LOGO (Aplicables a móvil y escritorio) --- */
.logo-container {
    /* Asegura que el contenedor del logo no se encoja y mantenga el alineamiento */
    flex-shrink: 0;
}
.logo-expanded {
    display: inline-block; /* Visible por defecto */
    height: 50px; /* Ajusta esta altura según tu logo */
    width: auto;
    transition: opacity 0.2s ease-out;
}
.logo-collapsed {
    display: none; /* Oculto por defecto */
    height: 75px; /* Ajusta esta altura según tu logo */
    width: auto;
}

/* --- ESTILOS PARA BADGES DE ESTADO EN TABLAS (ej. Órdenes de Compra) --- */
.status-badge-po {
    display: inline-block;
    padding: .35em .65em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .375rem;
}

/* --- ESCRITORIO (aplicado desde 992px según Bootstrap) --- */
@media (min-width: 992px) {
    /* Usamos Flexbox en el body para crear dos columnas: sidebar y contenido principal.
       Esto es más robusto y moderno que usar position:fixed con márgenes. */
    body {
        display: flex;
    }

    /* Navbar: Se mantiene "pegajoso" en la parte superior del área de contenido principal. */
    .navbar {
        position: sticky;
        top: 0;
        z-index: 1020; /* Aseguramos que esté sobre el contenido */
    }

    /* Sidebar: Ocupa su propio espacio y es "pegajoso" (sticky), con su propio scroll. */
    #sidebar-container {
        width: 280px;
        flex-shrink: 0; /* Evita que el sidebar se encoja */
        height: 100vh; /* Ocupa toda la altura de la ventana */
        position: sticky; /* Se "pega" al borde superior cuando se hace scroll en el body */
        top: 0;
        transform: translateX(0);
        box-shadow: none;
        visibility: visible !important;
        transition: width 0.3s ease-in-out;
    }
    /* Contenido Principal: Ocupa el espacio restante y tiene su propio scroll. */
    #main-content {
        flex-grow: 1;
        height: 100vh;
        overflow-y: auto; /* Permite el scroll vertical solo en esta área */
        padding-top: 0;
        width: auto; /* Anulamos el w-100 de Bootstrap para que flexbox controle el ancho */
        transition: none;
    }

    /* Ocultar elementos solo para móvil en escritorio */
    #mobile-sidebar-toggle,
    #mobile-sidebar-close,
    #mobile-sidebar-overlay {
        display: none !important;
    }

    /* --- ESTADO COLAPSADO EN ESCRITORIO --- */
    body.sidebar-collapsed #sidebar-container {
        width: 88px;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Centrar el header del sidebar (que contiene el logo) cuando está colapsado */
    body.sidebar-collapsed #sidebar-header {
        justify-content: center !important;
        margin-bottom: 0.5rem !important;
    }

    /* Ocultar logo expandido y mostrar el colapsado */
    body.sidebar-collapsed .logo-expanded {
        display: none;
    }
    body.sidebar-collapsed .logo-collapsed {
        display: inline-block;
    }

    /* Ocultar texto en el sidebar colapsado */
    body.sidebar-collapsed #sidebar-container a span,
    body.sidebar-collapsed #logoutButton span { display: none; }
    body.sidebar-collapsed #sidebar-container .sidebar-section-title {
        display: none;
    }

    /* Alinear a la izquierda los elementos en el sidebar colapsado */
    body.sidebar-collapsed #sidebar-container .nav-link,
    body.sidebar-collapsed #sidebar-container > a,
    body.sidebar-collapsed #sidebar-container #logoutButton {
        padding-left: 1.5rem !important;
        padding-right: 1rem !important;
        justify-content: flex-start !important; 
    }

    body.sidebar-collapsed #sidebar-container .logo-container {
        padding-left: 0 !important;
        justify-content: center !important;
    }
    #sidebar-container .nav-link .bi,
    #logoutButton .bi { 
        margin-right: 0.5rem; 
        vertical-align: middle; 
        font-size: 1.2rem; 
    }

    /* Iconos en el sidebar colapsado: sin margen y más grandes */
    body.sidebar-collapsed #sidebar-container .nav-link .bi,
    body.sidebar-collapsed #sidebar-container > a .bi, /* Esto es para el icono del logo si lo tuviera */
    body.sidebar-collapsed #sidebar-container #logoutButton .bi { 
        margin-right: 0; 
        font-size: 1.75rem; 
    }
}


/* --- ESTILOS COMPARTIDOS (Tom Select, etc.) --- */
.ts-disabled .ts-control {
    background-color: var(--bs-tertiary-bg) !important;
    opacity: 0.65;
    pointer-events: none;
}
.ts-control, .ts-control input { color: #dee2e6; }
.ts-dropdown .option { color: #dee2e6; }
.ts-dropdown .option.active { color: #FFFFFF; }
.btn-floating {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1050;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Estilo personalizado para botones de acción especiales */
.btn-custom-orange {
  color: #fff; /* Texto blanco */
  background-color: #f49548; /* Naranja más suave, menos subido */
  border-color: #f49548;
}
.btn-custom-orange:hover {
  color: #fff;
  background-color: #e08234; /* Un tono más oscuro para el hover */
  border-color: #d3792b;
}

/* Fondo sólido y sombra para menús contextuales - SOLUCIÓN DEFINITIVA */
.dropdown-menu {
  background-color: #23272b !important;
  opacity: 1 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 1.5px 4px rgba(0,0,0,0.15) !important;
  border: 1px solid #343a40 !important;
  z-index: 999999 !important;
  position: fixed !important;
  min-width: 180px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Resetear contexto de apilamiento para evitar conflictos */
.subscription-card {
  z-index: auto !important;
  position: static !important;
  transform: none !important;
  isolation: auto !important;
}

.subscription-card .btn-group {
  z-index: auto !important;
  position: static !important;
}

/* Específico para dropdown en subscription cards */
.subscription-card .dropdown-menu {
  background-color: #23272b !important;
  border: 3px solid #6c757d !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
  position: fixed !important;
  z-index: 999999 !important;
}

/* Color de texto claro para mejor contraste */
.dropdown-menu .dropdown-item {
  color: #f8f9fa !important;
  background-color: transparent !important;
}

.dropdown-menu .dropdown-item:hover, 
.dropdown-menu .dropdown-item:focus {
  background-color: #495057 !important;
  color: #fff !important;
}

/* Línea divisoria en dropdown */
.dropdown-menu .dropdown-divider {
  border-color: #495057 !important;
}

/* Reset completo para eliminar cualquier transparencia o backdrop */
.dropdown-menu.show {
  background-color: #23272b !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Asegurar que no hay elementos flotantes detrás */
.subscription-card::before,
.subscription-card::after {
  content: none !important;
}

/* Specific override para Bootstrap 5 dropdown */
.btn-group .dropdown-menu {
  background: #23272b !important;
  border: 2px solid #495057 !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.6) !important;
  z-index: 999999 !important;
  position: fixed !important;
}

/* Fix específico para dropdown en subscription cards que aparece detrás */
.subscription-card .btn-group {
  z-index: 10000 !important;
  position: relative !important;
}

.subscription-card .btn-group.show {
  z-index: 99999 !important;
}

.subscription-card .btn-group .dropdown-menu {
  z-index: 999999 !important;
  position: absolute !important;
  background: #212529 !important;
  border: 3px solid #6c757d !important;
  box-shadow: 0 2rem 4rem rgba(0,0,0,0.9) !important;
}