/* La barra superior. UNICA fuente de verdad de su aspecto.
 *
 * Estaba repetida en ocho hojas -incident, transparency, history, chat, portal,
 * report, suggestions y hub-, cada una con su version. Igual que pasaba con el
 * HTML antes de _topnav.html: ocho copias de la misma regla son siete que se
 * quedan atras. Esta hoja se carga DESPUES de la de cada pagina, asi que lo que
 * quede de aquellas copias ya no manda; se pueden ir borrando sin prisa.
 *
 * LA REGLA QUE MANDA AQUI: LA BARRA ES SIEMPRE UNA SOLA FILA.
 * Antes tenia `flex-wrap: wrap` con la idea de que, antes que salirse por la
 * derecha, un enlace bajara de linea. Con dos enlaces casi nunca pasaba; al
 * anyadir "Explorar" pasaba SIEMPRE en movil, y una barra de dos alturas se
 * come media pantalla y se lee como un error de maquetacion.
 * La solucion no es quitar enlaces: en pantalla estrecha se pliegan detras de un
 * boton y la fila se queda con lo imprescindible -la marca y la accion-. */

.topnav {
    position: sticky;
    top: 0;
    /* POR ENCIMA DE LEAFLET. Estaba en 60, y en /chat eso dejaba el panel de
       la campanita DETRAS del mapa: los paneles de Leaflet van de 200 a 800 y
       sus controles llegan a 1000, y ninguno de los antepasados del mapa
       -#viewer, #viewer-body, .panel- crea contexto de apilamiento, asi que
       esos numeros compiten directamente contra este. Como `.topnav` si crea
       contexto, el z-index de dentro -el del panel- no sirve de nada: manda
       este. 1200 deja sitio de sobra por encima del tope de Leaflet. */
    z-index: 1200;
    background: rgba(9, 9, 12, .82);
    backdrop-filter: saturate(160%) blur(22px);
    -webkit-backdrop-filter: saturate(160%) blur(22px);
    border-bottom: 1px solid rgba(255, 255, 255, .045);
    /* Lo necesita /chat, que monta su pantalla como una columna flex: sin esto
       la barra se encoge para dejarle sitio al mapa. En las demas paginas no
       hace nada. Estaba solo en la copia de chat.css y al borrarla (A.2.15) se
       habria perdido. */
    flex-shrink: 0;
}

.topnav-inner {
    position: relative;
    max-width: 1160px;
    margin: 0 auto;
    padding: 10px 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Sin excepciones: ver la cabecera. */
    flex-wrap: nowrap;
}

.brand-mark {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: -.03em;
    text-decoration: none;
    color: #ecedf0;
    flex-shrink: 0;
    white-space: nowrap;
}

.brand-mark span {
    color: #ff3b46;
}

/* Los enlaces secundarios. En escritorio, pegados a la marca. */
.topnav-links {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.topnav-links a,
.nav-quiet {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .085);
    background: transparent;
    color: #9b9ba6;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .16s ease, color .16s ease;
}

.topnav-links a:hover,
.nav-quiet:hover {
    background: rgba(255, 255, 255, .06);
    color: #ecedf0;
}

/* La accion principal, siempre a la derecha y siempre visible. */
.nav-back {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid rgba(255, 59, 70, .38);
    background: rgba(255, 59, 70, .14);
    color: #ffb4b8;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .16s ease;
}

/* Las tres propiedades del hover estaban SOLO en las copias de las paginas
   -seis de las siete las tenian- y esta hoja se quedaba con el fondo. Al
   borrar las copias (A.2.15) se habrian perdido, asi que suben aqui, que es
   donde debieron estar siempre. */
.nav-back:hover {
    background: rgba(255, 59, 70, .24);
    border-color: var(--accent-line, rgba(255, 59, 70, .38));
    color: #fff;
}

/* El bloque de la derecha: nombre de usuario (solo donde se pide), campanita
   y accion principal. ANTES se llamaba `.nav-right` y solo existia cuando
   habia usuario; ahora envuelve siempre a lo que vaya a la derecha.

   Es el UNICO que empuja: `margin-left:auto` vive aqui y se le quita
   explicitamente a `.nav-back` de dentro. Con los dos empujando, el navegador
   reparte el hueco sobrante ENTRE AMBOS y la campanita se quedaba flotando a
   media barra en vez de pegada al boton.

   La regla `.topnav-actions .nav-back` gana por especificidad (0,2,0) a
   cualquier `.nav-back{margin-left:auto}` que quede en las siete hojas de
   pagina antiguas, asi que esto no depende del orden de carga. */
.topnav-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.topnav-actions .nav-back {
    margin-left: 0;
}

.nav-user {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: #9b9ba6;
    min-width: 0;
}

.nav-user img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    /* El borde separa el avatar del fondo cuando la foto es oscura. Venia de
       la copia de chat.css, que era la unica pagina con nombre de usuario en
       la barra. */
    border: 1px solid rgba(255, 255, 255, .085);
}

.nav-user b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

/* El boton de plegado. Oculto en escritorio: alli caben todos los enlaces. */
.topnav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .085);
    background: transparent;
    color: #9b9ba6;
    cursor: pointer;
    flex-shrink: 0;
}

.topnav-toggle:hover {
    background: rgba(255, 255, 255, .06);
    color: #ecedf0;
}

.topnav-toggle svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

/* ============================================================
   LA CAMPANITA, ANCLADA A LA BARRA
   ============================================================
   El aspecto de la campana vive en css/bell.css, que carga el propio
   _bell.html; aqui solo va lo que depende de ir metida en ESTA barra. Se
   saco de esta hoja cuando la portada -que no lleva barra- tuvo que
   ensenyarla tambien: ver la cabecera de bell.css.

   En escritorio no hace falta nada: `.bell` ya es `position:relative` y el
   panel cae bajo el boton, que es donde debe caer. Lo de abajo es solo para
   movil. */

/* ============================================================
   MOVIL
   ============================================================ */
@media (max-width: 780px) {

    .topnav-inner {
        padding: 9px 14px;
        gap: 8px;
        /* Repetido aqui a proposito. Varias hojas de pagina traen todavia un
           `@media ... { .topnav-inner { flex-wrap: wrap } }` de la version
           anterior. Esta hoja se carga despues y por orden de cascada gana,
           pero depender de "el que va detras" para algo que se ve tan feo si
           falla es fragil: mejor decirlo aqui tambien y que no haya duda. */
        flex-wrap: nowrap;
    }

    .topnav-toggle {
        display: inline-flex;
        margin-left: auto;
    }

    /* Los enlaces salen del flujo y caen bajo la barra. Asi la fila de arriba
       tiene siempre la misma altura, lleve dos enlaces o siete. */
    .topnav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 6px;
        background: rgba(12, 12, 16, .97);
        backdrop-filter: saturate(160%) blur(22px);
        -webkit-backdrop-filter: saturate(160%) blur(22px);
        border-bottom: 1px solid rgba(255, 255, 255, .075);
        box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .95);
        /* Cerrado por defecto, y con `display` y no con altura: un menu
           colapsado por altura sigue siendo enfocable con el tabulador y un
           lector de pantalla lo lee aunque no se vea. */
        display: none;
    }

    .topnav-links.is-open {
        display: flex;
    }

    .topnav-links a {
        border: 0;
        border-radius: 8px;
        padding: 11px 12px;
        font-size: 13.5px;
        color: #ecedf0;
    }

    .topnav-links a+a {
        border-top: 1px solid rgba(255, 255, 255, .045);
        border-radius: 0;
    }

    .nav-back {
        margin-left: 0;
        padding: 7px 11px;
        font-size: 11.5px;
    }

    .topnav-actions {
        margin-left: 0;
        gap: 8px;
    }

    /* En movil el panel se ancla a `.topnav-inner` y no a la campana, igual
       que hace `.topnav-links`: un panel de 340 px colgado de un boton que esta
       casi en el borde derecho se sale de la pantalla.

       Para eso la campana tiene que dejar de ser el bloque contenedor, de ahi
       el `position: static`. Y se usa `absolute` y no `fixed` A PROPOSITO:
       `.topnav` lleva `backdrop-filter`, y un elemento con filtro es bloque
       contenedor de sus descendientes `fixed`, asi que un `fixed` aqui NO se
       resolveria contra la ventana como uno esperaria al leerlo. Mejor decir lo
       que de verdad pasa. */
    .topnav .bell {
        position: static;
    }

    .topnav .bell-panel {
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        border-radius: 0 0 14px 14px;
    }

    /* En una barra estrecha, el avatar ya identifica la sesion; el nombre es
       lo primero que sobra. */
    .nav-user b,
    .nav-user span.nick {
        display: none;
    }
}

/* Pantallas muy estrechas: la marca se queda en "CA" antes que empujar al
   boton fuera de la pantalla. */
@media (max-width: 360px) {
    .nav-back {
        padding: 7px 10px;
    }

    .topnav-inner {
        gap: 6px;
    }
}