/* global.css - Ajuste fino para reducir el espacio excesivo a la izquierda */

/* Reset básico */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  height: 100%;
}

/* Estructura wrapper */
.wrapper {
  display: flex !important;
  width: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Sidebar ajustado - elimina espacio en blanco a la izquierda */
#sidebar {
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  height: 100vh !important; /* Cambié min-height por height */
  background-color: #f8f9fa !important;
  box-shadow: 0 0 10px rgba(0,0,0,0.1) !important;
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 1030 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important; /* Cambié overflow-y: auto por hidden */
}

/* Mejorar logos en sidebar */
.sidebar-header, 
#sidebar .text-center {
  background-color: white !important;
  padding: 15px !important;
  text-align: center !important;
}

/* Logotipos */
.verifactu-logo, 
#sidebar img[src*="logo-verifactu"] {
  display: block !important;
  margin: 0 auto 10px auto !important;
  max-height: 30px !important;
}

.company-logo-container,
#sidebar .company-info {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 10px !important;
}

.company-logo,
#sidebar img[alt="Logo empresa"] {
  max-height: 40px !important;
  max-width: 100% !important;
}

/* Contenido principal ajustado - CORREGIDO */
#content {
  flex-grow: 1 !important;
  margin-left: 250px !important; /* Solo el ancho del sidebar */
  margin-right: 0 !important; /* Sin margen derecho */
  padding-left: 0 !important; /* Sin padding izquierdo */
  width: calc(100% - 250px) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Container-fluid dentro del content - CORREGIDO */
#content .container-fluid,
body > .container-fluid,
main > .container-fluid {
  margin-left: 0 !important; /* Sin margen izquierdo */
  margin-right: 0 !important;
  padding-left: 20px !important; /* Padding para separación interna */
  padding-right: 20px !important;
  width: 100% !important; /* Usar todo el ancho disponible */
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Contenedores internos */
.container-fluid .row,
.container-fluid > div {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
}

/* Ajustes para elementos específicos */
.form-tab, .preview-tab, .d-flex, .card-header, .card-body {
  padding-left: 15px !important;
}

/* Fix para scroll del sidebar */
.sidebar-content {
  height: calc(100vh - 200px) !important; /* Ajustado para header y footer */
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Estructura del sidebar con flexbox */
#sidebar .sidebar,
.offcanvas-body .sidebar {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  width: 100% !important;
}

/* Header del sidebar - altura fija */
#sidebar .sidebar-header,
.sidebar .sidebar-header {
  flex-shrink: 0 !important; /* No se encoge */
  position: relative !important; /* Cambiar de sticky a relative */
  top: auto !important;
}

/* Contenido del sidebar - ocupa el espacio restante y hace scroll */
#sidebar .sidebar-content,
.sidebar .sidebar-content {
  flex: 1 1 auto !important; /* Crece y se encoge según sea necesario */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important; /* Importante para que funcione el scroll en flex */
}

/* Footer del sidebar - altura fija */
#sidebar .sidebar-footer,
.sidebar .sidebar-footer {
  flex-shrink: 0 !important; /* No se encoge */
  position: relative !important; /* Cambiar de absolute a relative */
  bottom: auto !important;
  width: 100% !important;
  margin-top: auto !important; /* Empuja el footer al fondo */
}

/* Asegurar que el offcanvas también use la altura completa */
.offcanvas-body {
  padding: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Ajustes para móvil */
@media (max-width: 768px) {
  #sidebar {
    left: -250px !important;
    transition: left 0.3s ease !important;
  }
  
  #sidebar.show {
    left: 0 !important;
  }
  
  #content {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
  }
  
  body > .container-fluid,
  main > .container-fluid,
  #content .container-fluid {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  .sidebar-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 1025 !important;
  }
}