/*
 * Barra superior del usuario en el sitio publico (@nfc/views/components/toolbar/usuario).
 *
 * POR QUE ESTA AQUI Y NO EN EL COMPONENTE
 * Estaba en su `<style scoped>`, y eso la metia en `page.css`: el CSS del chunk
 * asincrono del tema. Ese fichero NO se declara en el HTML —se puede comprobar:
 * no aparece ninguna etiqueta que lo mencione—, lo inyecta Vite por JavaScript
 * cuando el chunk se importa. Resultado: la barra se renderiza antes de que su
 * hoja llegue y se ve en crudo —el menu del usuario como lista con viñetas,
 * «Editar pagina» como boton del navegador— hasta que se recarga la pagina, que
 * es cuando el fichero ya esta en cache y se aplica a tiempo.
 *
 * Al vivir aqui se carga con un `<link rel="stylesheet">` del propio tema (ver
 * css.blade.php), igual que style.css o responsive.css: esta aplicada antes del
 * primer pintado y la navegacion del router no la puede dejar atras.
 *
 * Las clases van todas con el prefijo `apptb`, asi que perder el `scoped` no
 * arrastra nada: el componente solo se usa en este sitio.
 */
/* Pegado arriba: al hacer scroll el toolbar queda fijo y el menú sticky del tema
   baja justo debajo (ver el offset `.tiene-toolbar .navbar-area.is-sticky`). */
.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; }
}