/* =============================================================================
   Barra de sesión del sitio público (@nfc/views/components/toolbar/usuario)

   Agrupa, sobre la cabecera: los controles de edición en vivo, la campana de
   avisos y el chip del usuario con su menú.

   Los estilos van aquí y no en un `<style scoped>` del componente a propósito.
   Dentro del componente acaban en el CSS del chunk asíncrono del tema, que no
   se declara en el HTML -lo inyecta Vite por JavaScript-, así que la barra se
   pintaba antes de que llegara su hoja y se veía en crudo hasta recargar.

   Las clases llevan prefijo propio -`apptb`, `nbell`-, así que no hace falta
   acotarlas: no chocan con nada del tema.
   ========================================================================== */

/* ── Barra ──────────────────────────────────────────────────────────────── */
/* z-index por encima de `.site-header` (9999 en style.css), o los menús del
   usuario y de la campana se abrirían debajo de la cabecera; y por debajo del
   panel de edición en vivo (99998). */
.apptb {
  position: sticky; top: 0; z-index: 10000;
  background: #0b1220; 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: 6px;
  color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2;
  cursor: pointer; transition: background .15s;
}
.apptb__btn i { font-size: 16px; }
.apptb__btn:disabled { opacity: .6; cursor: default; }
.apptb__btn--edit   { background: var(--main-color, #0b5adb); }
.apptb__btn--edit:hover   { background: rgba(var(--main-color-rgb, 11,90,219), .85); }
.apptb__btn--save   { background: #1f9d55; }
.apptb__btn--save:hover   { background: #198047; }
.apptb__btn--cancel { background: rgba(255,255,255,.12); }
.apptb__btn--cancel:hover { background: rgba(255,255,255,.22); }
.apptb__badge {
  display: inline-flex; align-items: center; gap: 6px;
  color: #ffb020; 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); }
/* Puente invisible hasta el menú: sin él, el hueco entre el chip y el
   desplegable cierra el menú al bajar el ratón. */
.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: 10px 16px; border: 0; background: none; text-align: left;
  color: #374151; font-size: 14px; text-decoration: none; cursor: pointer;
}
.apptb__menu li a:hover, .apptb__menu li button:hover {
  background: #f1f5fb; color: var(--main-color, #0b5adb);
}
.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,.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: #e0393e; 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,.18);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .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: #0b1220;
}
.nbell__readall {
  border: 0; background: none; color: var(--main-color, #0b5adb);
  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: #e0393e; }
.nbell__list { margin: 0; padding: 0; list-style: none; }
.nbell__list li + li { border-top: 1px solid #f3f3f3; }
.nbell__list li.is-unread { background: #f1f5fb; }
.nbell__list a { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; color: #374151; text-decoration: none; }
.nbell__list a:hover { background: #f5f7fa; }
.nbell__dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--main-color, #0b5adb); }
.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; }

/* ── La cabecera fija del tema baja para no taparse con la barra ────────── */
/* Al desplazarse, main.js marca `.sticky-header` con `is-fixed` y style.css
   fija `.main-bar` en top: 0. */
.tiene-toolbar .is-fixed .main-bar { top: 42px; }

/* ── Iconos ─────────────────────────────────────────────────────────────── */
/* El componente es del paquete nfc y nombra sus iconos con Boxicons, que esta
   plantilla no carga: trae Font Awesome. En vez de sumar una fuente entera por
   nueve glifos -o de tocar un componente que comparten otros sitios-, se
   traducen aquí los que usa la barra. */
.apptb .bx, .nbell .bx {
  display: inline-block; font-style: normal; font-variant: normal;
  text-rendering: auto; -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "FontAwesome";
  font-weight: 900;
}
.apptb .bx-edit-alt::before     { content: "\f044"; }  /* pen-to-square */
.apptb .bxs-circle::before      { content: "\f111"; }  /* circle */
.apptb .bx-x::before            { content: "\f00d"; }  /* xmark */
.apptb .bx-save::before         { content: "\f0c7"; }  /* floppy-disk */
.apptb .bx-loader-alt::before   { content: "\f110"; }  /* spinner */
.apptb .bx-chevron-down::before { content: "\f078"; }  /* chevron-down */
.apptb .bx-user-circle::before  { content: "\f2bd"; }  /* circle-user */
.apptb .bx-grid-alt::before     { content: "\f00a"; }  /* table-cells */
.apptb .bx-log-out::before      { content: "\f2f5"; }  /* right-from-bracket */
.nbell .bx-bell::before         { content: "\f0f3"; }  /* bell */