/* =========================
   Header
========================= */
header {
  position: sticky !important;
  top: 0;
  z-index: 1000 !important;
  background: #2196f3 !important;
  padding: 0px 20px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 30px;
  flex-wrap: wrap; /* permite que los elementos bajen en móviles */
}

a{
  text-decoration: none;
}


/* =========================
   Logo
========================= */

.logo {
  width: 10rem;  /* 12 × 16px = 192px */
  height: 2.2rem;
  margin-right: 20px;
  filter: invert(1) !important;
}

.logo-footer {
  width: 10rem;  /* 12 × 16px = 192px */
  height: 2.2rem;
  margin-right: 20px;
  filter: invert(1) !important;
}

/* =========================
   Separador
========================= */
.separator {
  width: 2px;
  height: 50px;
  background-color: #ffffff;
}

/* =========================
   Buscador
========================= */
.search-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  padding: 10px 0;
}
.search-input-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #fff;
  border-radius: 8px;
  width: 500px;
  max-width: 100%;
  padding: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}
.search-label {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 5px;
}
.input-and-icon {
  display: flex;
  align-items: center;
  width: 100%;
}
.search-input-wrapper input {
  flex-grow: 1;
  padding: 8px 12px;
  font-size: 14px;
  border: 2px solid #fff;
  border-radius: 6px;
  outline: none;
  background: #fff;
}
.search-input-wrapper input:focus {
  border-color: #141414;
}
.search-icon {
  background: #fff;
  border: none;
  padding: 8px 14px;
  margin-left: 8px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.3s;
}
.search-icon:hover {
  background: #555;
  color: #fff;
}

/* =========================
   MENSAJE DE BUSQUEDA
========================= */
    .mensaje-busqueda {
  text-align: left;
  margin-top: 20px;
  font-weight: 600;
  color: #888;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* =========================
   Botón Login
========================= */
.login-button{
  display: flex;
  gap: 10px;
  position: relative;
}
.login-button button {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 11px 8px;
  cursor: pointer;
  background: #ffffff;
  color:black;
  border-radius: 7px;
  transition: background 0.3s, color 0.3s;
  width: 8rem;
  white-space: nowrap;
  font-weight: bold;
  font-size: 14px;
  margin-left: 10px;
  border: none;
}

header .login-button button:hover{
background:#ffffff;
color:black !important;
}

header .login-button button:hover .login-icon{
color: black !important;
}

.login-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
  color:#2196f3 !important;
  border-radius: 50%;
  font-size: 16px;
  margin-left: 5px;
}

.login-button button span {
  overflow: hidden;
  margin-right: 4px;
  font-size: 13px;
}

.texto-ingresar {
    overflow: none !important;
  text-overflow: none !important;
  }

.flecha-menu{

    font-size:20px;

    color:#6b7280;

    transition:.25s;
}

.btn-perfil-menu.active .flecha-menu{
    transform:rotate(180deg);
}

/* =========================================
   MENÚ FLOTANTE
========================================= */

.menu-perfil-flotante{

    position:absolute;

    top:115%;
    right:0;

    width:240px;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(18px);

    border-radius:22px;

    padding:10px;

    display:flex;
    flex-direction:column;
    gap:5px;

    opacity:0;
    visibility:hidden;

    transform:
    translateY(10px)
    scale(.98);

    transition:.25s ease;

    box-shadow:
    0 18px 40px rgba(0,0,0,.12);

    border:1px solid rgba(255,255,255,.7);

    z-index:99999;
}

.menu-perfil-flotante.show{

    opacity:1;
    visibility:visible;

    transform:
    translateY(0)
    scale(1);
}

/* =========================================
   ITEMS
========================================= */

.menu-perfil-flotante a{

    display:flex;
    align-items:center;
    gap:14px;

    padding:14px 16px;

    border-radius:16px;

    text-decoration:none;

    color:#1f2937;

    transition:.2s ease;

    font-weight:500;
}

.menu-perfil-flotante a:hover{

    background:#f1f7ff;

    transform:translateX(3px);
}

.menu-perfil-flotante a i{

    font-size:20px;

    color:#2196f3;
}

/* =========================================
   CERRAR SESIÓN
========================================= */

.menu-perfil-flotante .cerrar-sesion{

    margin-top:5px;

    background:#fff5f5;
}

.menu-perfil-flotante .cerrar-sesion:hover{
    background:#ffe5e5;
}

.menu-perfil-flotante .cerrar-sesion i{
    color:#ef4444;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:768px){

    .btn-perfil-menu{

        padding:7px 10px;

        border-radius:15px;
    }

    .menu-perfil-flotante{

        width:220px;

        right:-10px;
    }

}

  @media (max-width: 350px){
    .texto-ingresar {
      margin-left: -5px;
    }
  }
  
/* =========================
   Botón Notificación
========================= */
.notificacion {
  display: flex;
  align-items: center;
  cursor: pointer;
  border: none;
  border-radius: 7px;
  transition: 0.3s;
  text-align: center;
  background: #ffffff;
  padding: 0px 15px;
}

/* Contenedor del icono */
.notificacion .icono {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Icono campana */
.notificacion i {
  font-size: 1.4rem;
  margin: 0 auto;
  color: #000000;
}

/* Contador */
.notificacion .contador {
  position: absolute;
  top: -6px;
  right: -6px;
  background: red;
  color: white;
  font-size: 0.7rem;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  pointer-events: none;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 968px) {
   .notificacion {
    padding: 10px;
    width: 45px;
    justify-content: center;
  }
}

@media (max-width: 967px) {
  .menu {
    display: block;
  }
}


@media (max-width: 960px) {
  .header {
    gap: 20px;
  }
  .search-container { order: 2 !important; width: 100%; margin-top: -20px}
  .filtro-departamentos-principal { order: 3; max-width:100%; width:100%; padding:15px; margin-bottom:-5px; }
  .search-input-wrapper { width: 100%; }
  .search-label { display: none; }
  .login-button button {
    height: 48px;
  }
  .notificacion i {
  font-size: 1.3rem !important;
 }
}

@media (max-width: 700px) {
  header {
    width: 100%;
    padding: 5px 10px;
    margin-bottom: 10px;
  }

  .header {
    gap: 20px;
  }

  .filtro-departamentos-principal {
   max-width: 100% !important;
   width: 100%;
   margin-bottom: -10px !important;
   margin-top: 5px;
 }

 .departamento {
  font-size: 11px !important; 
  padding: 8px !important;

 }

}

@media (max-width: 550px) {
  header {
    padding: 0px 5px;
  }
  .header {
    gap: 5px !important;
    padding: 10px 20px !important;
  }

  .login-button {
    zoom: 90% !important;
  }

  /* =========================
   Logo
========================= */

.logo {
  width: 7.8rem;  
  height: 1.9rem;
  margin-right: 0px;
}

.separator {
  margin-right: -10px;
}


  .search-container {
    margin-top: -2px;
  }
  .filtro-departamentos-principal {
   max-width: 100% !important;
   width: 100%;
   margin-bottom: -10px !important;
   margin-top: 10px;
   padding: 10px;
 }

 .departamento {
  font-size: 11px !important; 
  padding: 8px !important;

 }
}

@media (max-width: 400px){
  .mensaje-busqueda {
    font-weight: 400;
    font-size: 14px;
  }

  .logo {
    top: 5px;
  }

  .notificacion {
  margin-right: -8px !important;
 }
}

@media (max-width: 369px) {
  header {
    width: 100% !important;
    margin-bottom: 20px;
    padding: 0px !important;
  }

  /* =========================
   Logo
========================= */

.logo {
  width: 6.4rem;  /* 12 × 16px = 192px */
  height: 1.6rem;
  margin-right: 0px;
}

.separator {
  margin-left: -10px;
  height: 30px;
}

  .search-container {
    margin-top: -5px;
  }
  .login-button button {
    width: 110px !important;
  white-space: nowrap;
  padding: 4px 8px;
  font-weight: bold;
  font-size: 13px;
  gap: 6 !important;
  height: 47px;
  margin-left: 3px;
  }

  .login-button button span {  width: 100%;
  padding-left: 4px;
  margin-left: -8px;
  font-weight: bold;
}

.login-icon {
  margin-left: -2px;
  font-weight: bold;
  padding: 3px;
}

 .filtro-departamentos-principal {
   max-width: 100% !important;
   width: 100%;
   padding: 10px;
   margin-top: 5px;
   margin-bottom: 10px;
 }

  .filtro-departamentos {
    gap: 5px;
  }

 .departamento {
  font-size: 10px !important; 
  padding: 8px !important;
  font-weight: 500;

 }
}

@media (max-width: 340px) {
  header {
    zoom: 92%;
  }
}