/* static/css/compartido/navbar.css */
/* =========================================================
   NAVBAR – BARRA SUPERIOR DE TODAS LAS PÁGINAS
   ---------------------------------------------------------
   1) FONDO
   2) LOGO
   3) MENÚ DE USUARIO
   4) IMAGEN DE PERFIL
   5) NÚMERO JUNTO A UN ENLACE
   6) CSP: CLASES QUE REEMPLAZAN ESTILOS EN LÍNEA
   ========================================================= */

/* 1) Fondo del navbar personalizado
   Algo transparente (pedido del dueño) pero con desenfoque: deja ver que hay contenido detrás sin que sus letras se crucen con
   el menú (2026-10-31: sin el desenfoque, el texto de atrás se leía a través de la barra). */
.navbar-custom {
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 1rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.navbar-custom.scrolled {
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 2) Logo del navbar */
.navbar-brand img {
    height: 40px;
    transition: transform 0.3s ease;
}

.navbar-brand img:hover {
    transform: scale(1.1);
}

/* 3) Dropdown de usuario */
.navbar .dropdown-toggle {
    display: flex;
    align-items: center;
    color: white !important;
    font-weight: bold;
    text-transform: capitalize;
}

.navbar .dropdown-menu {
    background-color: white;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.navbar .dropdown-menu .dropdown-item {
    color: #333 !important;
    font-size: 14px;
}

.navbar .dropdown-menu .dropdown-item:hover {
    background-color: #4CAF50 !important;
    color: white !important;
}

/* 4) Imagen del perfil en el navbar */
.navbar .rounded-circle {
    border: 2px solid white;
    margin-right: 8px;
    transition: transform 0.3s ease;
}

.navbar .rounded-circle:hover {
    transform: scale(1.1);
}

/* =========================================================
   5) NÚMERO JUNTO A UN ENLACE (ej. solicitudes por revisar en "Calendario")
   ========================================================= */
.navbar-numero {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: #d92d20;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    vertical-align: middle;
}
.navbar-numero[hidden] { display: none; }
/* Dentro del menú desplegable el número va al borde derecho de su fila. */
.dropdown-item .navbar-numero { float: right; margin-top: 2px; }

/* =========================================================
   6) CSP: CLASES QUE REEMPLAZAN ESTILOS EN LÍNEA
   ========================================================= */
/* Más específica que ".navbar-brand img" (40px) a propósito: antes este 50px venía de un style="" en el HTML. */
.navbar-brand img.navbar-logo-img { height: 50px; }

/* =========================================================
   7) BARRA DE POCOS BOTONES, UNA SOLA LÍNEA
   ---------------------------------------------------------
   Inicio · Fincas Afiliadas · Panel · Herramientas ▾ · usuario. Calculadora GEI, Correo y Calendario viven dentro de «Herramientas»
   (el número rojo del Calendario se ve en el menú). La barra se pliega en el menú ☰ por debajo de 992px.
   ========================================================= */
.navbar-custom > .container { max-width: none; padding-inline: 1.5rem; }
.navbar-custom .navbar-nav .nav-link { white-space: nowrap; }

/* «Herramientas» se ve igual que los demás enlaces (la regla de .dropdown-toggle es la del menú de usuario) */
/* La campana de avisos: el ícono más grande y el número pegado a su lado */
.navbar .navbar-campana .bi-bell-fill { font-size: 1.25rem; vertical-align: middle; }
.navbar [data-navbar-panel] .navbar-numero { margin-left: .35rem; }
/* El numerito de la campana va PEQUEÑO sobre la esquina del ícono, como un exponente (pedido del dueño 2026-10-30) */
.navbar-campana-icono { position: relative; display: inline-block; line-height: 1; }
.navbar-campana-icono .navbar-numero { position: absolute; top: -.6rem; right: -.8rem; min-width: 16px; height: 16px; margin: 0; padding: 0 4px; font-size: .65rem; line-height: 1; }
.navbar .dropdown-menu .dropdown-item.active { background-color: #4CAF50; color: #fff !important; }
.navbar .dropdown-menu .dropdown-item { padding: 0.6rem 1.25rem; font-size: 15px; }

/* =========================================================
   8) CELULAR: LOGO Y ☰ EN UNA SOLA LÍNEA
   ---------------------------------------------------------
   El logo (con su lema) mide unos 330px a 50px de alto: en un celular no cabía junto al botón ☰ y éste caía a una segunda fila; la barra,
   que es fija, quedaba el doble de alta y tapaba el principio de la página. Por debajo de 992px el logo se achica y puede encogerse.
   ========================================================= */
@media (max-width: 991.98px) {
    .navbar-custom { padding: .5rem 0; }
    .navbar-custom > .container { padding-inline: .75rem; }
    .navbar-custom .navbar-brand { flex: 1 1 0; min-width: 0; margin-right: .5rem; }
    .navbar-brand img.navbar-logo-img { height: auto; max-height: 40px; max-width: 100%; object-fit: contain; }
}

/* =========================================================
   9) MENÚ CHIQUITO DE LA CAMPANA (avisos_menu.js)
   ========================================================= */
.avisos-menu { width: 340px; max-width: calc(100vw - 2rem); padding: 0; overflow: hidden; }
.avisos-menu-cabecera { display: flex; align-items: center; justify-content: space-between; padding: .6rem .9rem; border-bottom: 1px solid #e3e3ea; }
.avisos-menu-actualizar { font-size: .85rem; padding: 0; }
.avisos-menu-vacio { padding: 1rem; color: #555; text-align: center; }
.avisos-menu-lista { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.avisos-menu-item { display: flex; align-items: flex-start; gap: .7rem; padding: .65rem .9rem; color: #212529; text-decoration: none; border-bottom: 1px solid #f0f0f4; }
.avisos-menu-item:hover, .avisos-menu-item:focus-visible { background: #f5f1ff; }
.avisos-menu-item.sin-leer { background: #f5f1ff; }
.avisos-menu-icono { font-size: 1.2rem; color: #5b3fa0; flex: 0 0 auto; }
.avisos-menu-texto { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; font-size: .9rem; line-height: 1.25; }
.avisos-menu-texto small { color: #666; }
.avisos-menu-punto { width: 10px; height: 10px; border-radius: 50%; background: #7b5fc4; flex: 0 0 auto; margin-top: .35rem; }
.avisos-menu-todos { display: block; padding: .65rem .9rem; text-align: center; font-weight: 600; color: #5b3fa0; text-decoration: none; }
.avisos-menu-todos:hover { background: #f5f1ff; }

/* =========================================================
   10) «MI PANEL» DESTACADO (BOTÓN VERDE) Y BARRA EN DOS GRUPOS
   ---------------------------------------------------------
   Izquierda (junto al logo): Inicio y Fincas Afiliadas. Derecha: Mi panel, campana y usuario (navbar.html). En el celular todo va en una columna.
   ========================================================= */
.navbar .nav-link.navbar-boton-panel { background: #4CAF50; color: #fff !important; font-weight: 600; border-radius: 999px; padding: .45rem 1.15rem; }
.navbar .nav-link.navbar-boton-panel:hover, .navbar .nav-link.navbar-boton-panel:focus-visible { background: #43a047; }
.navbar .nav-link.navbar-boton-panel.active { background: #2e7d32; }
@media (max-width: 991.98px) {
    .navbar .nav-link.navbar-boton-panel { display: inline-block; margin-block: .25rem; }
}

/* =========================================================
   11) ENLACES PÚBLICOS (INICIO, FINCAS AFILIADAS) MÁS SUAVES
   ---------------------------------------------------------
   Antes el activo iba en negrita y con el texto subrayado (se veía como un enlace de documento). Ahora: letra normal y una rayita verde corta debajo.
   ========================================================= */
.navbar-custom .navbar-nav .nav-link:not(.navbar-boton-panel):not(.navbar-campana):not(.dropdown-toggle) {
    font-weight: 500; padding-block: .5rem; border-bottom: 2px solid transparent; border-radius: 0;
}
.navbar-custom .navbar-nav .nav-link.active:not(.navbar-boton-panel):not(.navbar-campana):not(.dropdown-toggle) {
    text-decoration: none; font-weight: 500; border-bottom-color: #4CAF50;
}