/**
 * HEADER FIXES
 * Corrección de problemas visuales del navbar/header
 * Version: 1.0.0
 * Fecha: 2025-10-24
 *
 * PROBLEMAS CORREGIDOS:
 * 1. Mancha/espacio oscuro en la esquina superior izquierda
 * 2. Campo de búsqueda pequeño o descentrado
 */

/* =============================================
   1. FIX: ELIMINAR ESPACIOS/MANCHAS OSCURAS
   ============================================= */

/* Asegurar que el navbar no tenga espacios oscuros o fondos incorrectos */
.navbar.fixed-top,
.sp-navbar {
  background-color: #136213 !important;
  background-image: none !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  margin: 0 !important;
}

/* Eliminar cualquier pseudo-elemento que pueda estar creando manchas */
.navbar.fixed-top::before,
.navbar.fixed-top::after,
.sp-navbar::before,
.sp-navbar::after {
  display: none !important;
  content: none !important;
}

/* Asegurar que el body no cree espacios oscuros arriba */
body {
  margin-top: 0 !important;
  background-attachment: scroll !important;
  background-position: 0 64px !important;
}

/* Contenedor del navbar: sin espacios extras */
/* IMPORTANTE: Solo aplicar a container-fluid DENTRO del navbar, no a todos */
.sp-navbar__container,
.navbar.fixed-top > .container-fluid,
.sp-navbar > .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 auto !important; /* Centrar horizontalmente */
  width: 100% !important;
  max-width: 100% !important;
}

/* Desktop: Limitar ancho del contenedor y centrarlo */
@media (min-width: 1200px) {
  .sp-navbar__container,
  .navbar.fixed-top > .container-fluid,
  .sp-navbar > .container-fluid {
    max-width: 1400px !important; /* Ancho máximo en pantallas grandes */
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

@media (min-width: 1400px) {
  .sp-navbar__container,
  .navbar.fixed-top > .container-fluid,
  .sp-navbar > .container-fluid {
    max-width: 1600px !important; /* Ancho máximo en pantallas XL */
  }
}

/* =============================================
   2. FIX: AMPLIAR Y CENTRAR CAMPO DE BÚSQUEDA
   ============================================= */

/* Hacer el campo de búsqueda más grande y mejor centrado */
.sp-navbar__main {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  gap: 0.5rem !important;
}

/* Usuario: tamaño fijo pequeño */
.sp-navbar__user {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: 44px !important;
  min-width: 44px !important; /* Ancho mínimo para balance */
}

/* Campo de búsqueda: expandir para ocupar TODO el espacio disponible */
.sp-navbar__search {
  flex: 1 1 auto !important;
  max-width: none !important; /* Sin límite - crece todo lo posible */
  min-width: 0 !important;
}

/* Input de búsqueda: asegurar que use todo el ancho disponible */
.sp-navbar__search-input,
.navbar input[type="search"],
.navbar input[name="search"] {
  width: 100% !important;
  height: 48px !important; /* Aumentado de 44px a 48px para mayor prominencia */
  padding: 0.75rem 1.25rem !important;
  font-size: 1.0625rem !important; /* Ligeramente más grande */
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 14px !important; /* Más redondeado para mejor UX */
  background: white !important; /* Fondo completamente blanco */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; /* Sombra sutil */
}

.sp-navbar__search-input:focus,
.navbar input[type="search"]:focus {
  border-color: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25), 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  outline: none !important;
}

/* Placeholder más visible */
.sp-navbar__search-input::placeholder {
  color: #6c757d !important;
  opacity: 0.8 !important;
}

/* Botones de acción: tamaño fijo compacto */
.sp-navbar__actions {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  display: flex !important;
  gap: 0.5rem !important;
  /* min-width eliminado: con 4 botones en mobile era demasiado rígido.
     El ancho ahora es fit-content determinado por los botones + gap. */
  justify-content: flex-end !important; /* Alinear a la derecha */
}

/* =============================================
   3. FIX: MEJORAR ESPACIADO EN MOBILE
   ============================================= */

@media (max-width: 767px) {
  /* Navbar en mobile: sin padding extra */
  .navbar.fixed-top,
  .sp-navbar {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Campo de búsqueda en mobile: expandir aún más */
  .sp-navbar__search {
    max-width: none !important; /* Sin límite máximo en mobile */
    flex: 1 1 auto !important;
    min-width: 0 !important; /* Permite que el input se encoja si es necesario */
  }

  /* Input más grande en mobile */
  .sp-navbar__search-input {
    height: 44px !important;
    font-size: 1rem !important;
    padding: 0.5rem 0.75rem !important;
  }

  /* Reducir gap entre elementos del row principal */
  .sp-navbar__main {
    gap: 0.25rem !important;
  }

  /* Con 4 botones: gap comprimido a 4px para maximizar espacio del input */
  .sp-navbar__actions {
    gap: 0.25rem !important;
  }
}

/* =============================================
   4. FIX: TABLET Y DESKTOP
   ============================================= */

@media (min-width: 768px) and (max-width: 991px) {
  /* Tablet: búsqueda crece para llenar espacio */
  .sp-navbar__search {
    flex: 1 !important;
  }

  .sp-navbar__search-input {
    height: 50px !important;
    font-size: 1.125rem !important;
  }
}

@media (min-width: 992px) {
  /* Desktop: campo de búsqueda ocupa TODO el espacio disponible */
  .sp-navbar__search {
    flex: 1 !important; /* Crece para llenar el espacio entre usuario y acciones */
  }

  .sp-navbar__search-input {
    height: 52px !important;
    font-size: 1.125rem !important;
    padding: 0.875rem 1.5rem !important;
  }

  .sp-navbar__main {
    gap: 1rem !important;
  }

  .sp-navbar__actions {
    gap: 0.75rem !important;
    /* 4 botones × 48px + 3 gaps × 12px = 228px en desktop */
    min-width: 228px !important;
  }

  /* Usuario: más espacio en desktop para balance */
  .sp-navbar__user {
    min-width: 60px !important;
  }
}

/* Desktop XL: Más gap para respirar */
@media (min-width: 1200px) {
  .sp-navbar__main {
    gap: 1.25rem !important;
  }

  .sp-navbar__actions {
    gap: 1rem !important;
  }
}

/* =============================================
   5. FIX: SAFE AREAS (iPhone con notch)
   ============================================= */

/* Eliminar manchas causadas por safe areas */
@supports (padding: max(0px)) {
  .navbar.fixed-top,
  .sp-navbar {
    padding-top: max(0.5rem, env(safe-area-inset-top)) !important;
    padding-left: max(0.75rem, env(safe-area-inset-left)) !important;
    padding-right: max(0.75rem, env(safe-area-inset-right)) !important;
  }

  /* Ajustar body para compensar safe area */
  body {
    padding-top: calc(64px + max(0px, env(safe-area-inset-top))) !important;
  }
}

/* =============================================
   6. FIX: BACKGROUND CONSISTENCY
   ============================================= */

/* Asegurar que no haya fondos oscuros o inconsistentes */
html {
  background-color: #f8f9fa !important;
}

body {
  background-color: #f8f9fa !important;
}

/* El fondo de patrón debe empezar debajo del navbar */
body[background] {
  background-position: 0 64px !important;
  background-attachment: scroll !important;
}

/* =============================================
   7. FIX: Z-INDEX Y LAYERING
   ============================================= */

/* Asegurar que el navbar esté sobre todo */
.navbar.fixed-top,
.sp-navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1030 !important;
}

/* =============================================
   8. FIX: ELIMINAR SOMBRAS/BORDES EXTRAÑOS
   ============================================= */

/* Limpiar cualquier sombra o borde que pueda crear manchas */
.navbar.fixed-top,
.sp-navbar {
  border: none !important;
}

/* =============================================
   9. FIX: FORM CONTAINER
   ============================================= */

/* Asegurar que el form no tenga espacios extras */
.sp-navbar__form {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =============================================
   10. FIX: CONSISTENCIA DE COLORES
   ============================================= */

/* Verde consistente sin variaciones que puedan parecer manchas */
.navbar.fixed-top.bg-success,
.sp-navbar.bg-success {
  background-color: #136213 !important;
  background-image: none !important;
}

/* Eliminar cualquier gradient o overlay */
.navbar.fixed-top *,
.sp-navbar * {
  background-image: none;
}

/* =============================================
   11. DEBUG (Descomentar para inspección)
   ============================================= */

/*
.navbar.fixed-top,
.sp-navbar {
  outline: 3px solid red !important;
}

.sp-navbar__container {
  outline: 2px solid blue !important;
}

.sp-navbar__main {
  outline: 2px solid green !important;
}

.sp-navbar__search {
  outline: 2px solid orange !important;
}
*/