/* =============================================================================
   Estilos de los componentes de la cabecera del sitio.

   POR QUE ESTAN AQUI Y NO EN CADA COMPONENTE

   Estos componentes salen en TODAS las paginas: la barra del usuario, la
   campana de avisos y la cabecera con su buscador y su selector de idioma.
   Teniendo sus reglas en un `<style scoped>`, Vite las mete en el CSS del
   chunk asincrono del tema, y ese fichero no se declara en el HTML: lo inyecta
   por JavaScript cuando el chunk se importa.

   El sitio es una SPA, asi que al cambiar de pagina los componentes se pintan
   antes de que su hoja llegue y aparecen en crudo —el menu del usuario como
   lista con viñetas, el selector de idioma como un boton del navegador, los
   avisos desplegados en mitad del flujo—. Recargar lo arreglaba porque el
   fichero ya estaba en cache.

   Sirviendolas con un `<link rel="stylesheet">` del tema estan aplicadas antes
   del primer pintado y la navegacion del router no las puede dejar atras.

   Solo se traen las de los componentes PERMANENTES. Las de una pagina concreta
   pueden seguir en su chunk: alli llegan con el contenido y el salto no se ve.
   Unificar todo el CSS del proyecto serian 1,2 MB en cada pagina, y eso cuesta
   mas de lo que arregla.

   Las clases van con prefijo —`apptb`, `tb-bell`, `hdr-`—, asi que perder el
   `scoped` no arrastra nada.
   ========================================================================== */

/* ── Barra del usuario (@nfc/views/components/toolbar/usuario) ─────────── */
.apptb { position: sticky; top: 0; z-index: 1000; background: #1e1e2d; color: #fff; font-size: 14px; }
.apptb__row { display: flex; align-items: center; gap: 6px; min-height: 42px; }
.apptb__spacer { flex: 1 1 auto; }

/* Controles de edición */
.apptb__edit { display: flex; align-items: center; gap: 8px; }
.apptb__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 0; border-radius: 20px;
  font-size: 13px; font-weight: 600; cursor: pointer; color: #fff;
  transition: background .15s, opacity .15s;
}
.apptb__btn i { font-size: 16px; }
.apptb__btn:disabled { opacity: .6; cursor: default; }
.apptb__btn--edit { background: #009ef7; }
.apptb__btn--edit:hover { background: #0585ce; }
.apptb__btn--save { background: #50cd89; }
.apptb__btn--save:hover { background: #3ba872; }
.apptb__btn--cancel { background: rgba(255,255,255,.12); }
.apptb__btn--cancel:hover { background: rgba(255,255,255,.2); }
.apptb__badge { display: inline-flex; align-items: center; gap: 6px; color: #f64e60; font-weight: 600; font-size: 13px; }
.apptb__badge i { font-size: 10px; }

/* Usuario */
.apptb__user { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 6px; cursor: pointer; outline: none; }
.apptb__user:hover, .apptb__user:focus-within { background: rgba(255,255,255,.08); }
.apptb__avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.15); }
.apptb__name { font-weight: 600; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.apptb__caret { font-size: 18px; transition: transform .2s; }
.apptb__user:hover .apptb__caret, .apptb__user:focus-within .apptb__caret { transform: rotate(180deg); }
.apptb__user::after { content: ""; position: absolute; top: 100%; right: 0; width: 100%; height: 8px; }
.apptb__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1001;
  min-width: 210px; margin: 0; padding: 6px 0; list-style: none;
  background: #fff; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.apptb__user:hover .apptb__menu, .apptb__user:focus-within .apptb__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.apptb__menu li a, .apptb__menu li button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 16px; border: 0; background: none; color: #374151;
  font-size: 14px; text-align: left; text-decoration: none; cursor: pointer;
}
.apptb__menu li a:hover, .apptb__menu li button:hover { background: #f5f4ef; color: #e73c3e; }
.apptb__menu .bx { font-size: 18px; }

.apptb-spin { animation: apptb-spin .9s linear infinite; }
@keyframes apptb-spin { to { transform: rotate(360deg); } }

@media (max-width: 767px) {
  .apptb__name { max-width: 110px; }
  .apptb__btn span { display: none; }
}

/* ── Campana de avisos (@nfc/views/components/toolbar/bell) ───────────── */
.nbell { position: relative; display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 6px; cursor: pointer; outline: none; }
.nbell:hover, .nbell:focus-within { background: rgba(255, 255, 255, 0.08); }
.nbell__icon { font-size: 20px; color: #fff; line-height: 1; }
.nbell__badge { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 10px; background: #e73c3e; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.nbell::after { content: ""; position: absolute; top: 100%; right: 0; width: 100%; height: 8px; }
.nbell__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1001; width: 340px; max-width: 92vw; background: #fff; border-radius: 8px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease; }
.nbell:hover .nbell__menu, .nbell:focus-within .nbell__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nbell__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; color: #1e1e2d; }
.nbell__readall { border: 0; background: none; color: #e73c3e; font-size: 13px; font-weight: 600; cursor: pointer; }
.nbell__body { max-height: 60vh; overflow-y: auto; }
.nbell__state { margin: 0; padding: 18px 16px; color: #808080; font-size: 14px; }
.nbell__state.is-error { color: #e60027; }
.nbell__list { margin: 0; padding: 0; list-style: none; }
.nbell__list li + li { border-top: 1px solid #f3f3f3; }
.nbell__list li.is-unread { background: #fbf4f4; }
.nbell__list a { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; color: #374151; text-decoration: none; }
.nbell__list a:hover { background: #f5f4ef; }
.nbell__dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: #e73c3e; }
.nbell__content { min-width: 0; }
.nbell__content strong { display: block; font-size: 14px; }
.nbell__content small { display: block; color: #606060; font-size: 13px; }
.nbell__content time { display: block; margin-top: 3px; color: #a0a0a0; font-size: 11px; }

/* ── Cabecera del sitio: buscador, idioma y menu de usuario ───────────── */
/* ── Toolbar de usuario (sobre el menú) ───────────────────────────────── */
.hdr-userbar {
    background: #1e1e2d;
    color: #ffffff;
    font-size: 14px;
}
.hdr-userbar__row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    min-height: 40px;
}
.hdr-user {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
}
.hdr-user:hover,
.hdr-user:focus-within {
    background: rgba(255, 255, 255, 0.08);
}
.hdr-user__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.15);
}
.hdr-user__name {
    font-weight: 600;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hdr-user__caret {
    font-size: 18px;
    transition: transform 0.2s;
}
.hdr-user:hover .hdr-user__caret,
.hdr-user:focus-within .hdr-user__caret {
    transform: rotate(180deg);
}
/* Colchón invisible: evita que el menú se cierre al mover el mouse del chip al menú */
.hdr-user::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 8px;
}
.hdr-user__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1001;
    min-width: 210px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
.hdr-user:hover .hdr-user__menu,
.hdr-user:focus-within .hdr-user__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.hdr-user__menu li a,
.hdr-user__menu li button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 16px;
    border: 0;
    background: none;
    color: #374151;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.hdr-user__menu li a:hover,
.hdr-user__menu li button:hover {
    background: #f5f4ef;
    color: #e73c3e;
}
.hdr-user__menu .bx {
    font-size: 18px;
}
@media (max-width: 767px) {
    .hdr-user__name { max-width: 120px; }
}

/* Selector de idioma (no existe en la plantilla original) */
.hdr-lang {
    position: relative;
}

.hdr-lang-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid #dadada;
    border-radius: 30px;
    background: transparent;
    color: #111111;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.hdr-lang-toggle img {
    border-radius: 2px;
}

.hdr-lang-toggle .bx {
    font-size: 16px;
}

.hdr-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 999;
    min-width: 160px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
}

.hdr-lang-menu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    color: #111111;
    font-size: 15px;
    text-decoration: none;
}

.hdr-lang-menu li a:hover,
.hdr-lang-menu li a.active {
    color: #e73c3e;
}

/* Redes sociales dentro del menú móvil */
.hdr-social {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.hdr-social ul {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hdr-social ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #f5f4ef;
    color: #111111;
    font-size: 15px;
    transition: 0.5s;
}

.hdr-social ul li a:hover {
    background-color: #e73c3e;
    color: #ffffff;
}

/* Resultados del buscador */
.hdr-search-results {
    max-width: 600px;
    margin: 20px auto 0;
    max-height: 45vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
    text-align: left;
}

.hdr-search-state {
    margin: 0;
    padding: 15px 20px;
    color: #606060;
    font-size: 15px;
}

.hdr-search-results ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hdr-search-results ul li + li {
    border-top: 1px solid #eee;
}

.hdr-search-results ul li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: #111111;
    text-decoration: none;
    transition: 0.5s;
}

.hdr-search-results ul li a:hover {
    background-color: #f5f4ef;
}

.hdr-search-results ul li a img {
    flex: 0 0 auto;
    width: 60px;
    height: 45px;
    object-fit: cover;
    border-radius: 3px;
}

.hdr-search-results ul li a span {
    display: block;
    overflow: hidden;
}

.hdr-search-results ul li a strong {
    display: block;
    font-size: 15px;
    font-weight: 500;
}

.hdr-search-results ul li a small {
    display: block;
    color: #606060;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}