/* ──────────────────────────────────────────────────────────────────────────
   bulx · la barra lateral (18/10/2026, copia aparte).

   Xavi: «Para la barra lateral, sigue este ejemplo de pie a pa. Pero con los
   colores nuestros… igual. Incluso con los mensajes. A ver si podemos hacerlo
   menos invasiva.» (una barra flotante blanca con buscador, MAIN con un
   grupo desplegado en árbol, MESSAGES con caras y punto de conectado, y la
   tarjeta del usuario abajo; plegada, una tira de iconos que saca las
   subpáginas en un panelito al lado).

   Colores: el blanco y la tinta de bulx, y el amarillo solo donde se pulsa o
   se avisa. Las piezas que no existían (buscador, mensajes, menú del
   usuario, el botón redondo del canto, el panel de al lado) las pone bulx.js.
   Se carga la última: quitar su línea de index.html deja la barra de antes.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --bxb-papel: #FFFFFF;
  --bxb-tinta: #1D1F1C;
  --bxb-texto: rgba(29, 31, 28, .78);
  --bxb-suave: rgba(29, 31, 28, .52);
  --bxb-rotulo: rgba(29, 31, 28, .42);
  --bxb-linea: rgba(29, 31, 28, .09);
  --bxb-hundido: #F3F3F0;
  --bxb-pasar: #F6F6F3;
  --bxb-amarillo: #FEC833;
  --bxb-activo: #FFF1C2;            /* el amarillo, suave: la página abierta */
  --bxb-sombra: 0 1px 2px rgba(29, 31, 28, .04), 0 12px 32px -18px rgba(29, 31, 28, .22);
  --bxb-ancho: 264px;
}
:root[data-tema="oscuro"] {
  --bxb-papel: #1D1F1C; --bxb-tinta: #F6F2E6;
  --bxb-texto: rgba(246, 242, 230, .78); --bxb-suave: rgba(246, 242, 230, .5); --bxb-rotulo: rgba(246, 242, 230, .38);
  --bxb-linea: rgba(246, 242, 230, .1); --bxb-hundido: #262823; --bxb-pasar: #24261F; --bxb-activo: rgba(254, 200, 51, .16);
  --bxb-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -20px rgba(0, 0, 0, .7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bxb-papel: #1D1F1C; --bxb-tinta: #F6F2E6;
    --bxb-texto: rgba(246, 242, 230, .78); --bxb-suave: rgba(246, 242, 230, .5); --bxb-rotulo: rgba(246, 242, 230, .38);
    --bxb-linea: rgba(246, 242, 230, .1); --bxb-hundido: #262823; --bxb-pasar: #24261F; --bxb-activo: rgba(254, 200, 51, .16);
    --bxb-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -20px rgba(0, 0, 0, .7);
  }
}

/* ── 1. Una tarjeta que flota a la izquierda ──────────────────────────── */
.sidebar, :root[data-tema="claro"] .sidebar, :root[data-tema="oscuro"] .sidebar {
  width: var(--bxb-ancho) !important;
  background: var(--bxb-papel) !important;
  border: 1px solid var(--bxb-linea) !important;
  border-radius: 24px !important;
  box-shadow: var(--bxb-sombra) !important;
  color: var(--bxb-texto);
  overflow: visible !important;           /* el botón redondo asoma por el canto */
  transition: width .32s cubic-bezier(.3, .9, .3, 1) !important;
}
@media (min-width: 721px) {
  .sidebar { margin: 12px 0 12px 12px !important; height: calc(100% - 24px) !important; }
}
.sidebar.collapsed { width: 68px !important; }
/* Lo de antes que no va en esta barra: la retícula, la luz, el panal, la marca de agua. */
.sidebar .sbr-capa, .sidebar .sidebar-luz, .sidebar .sidebar-palm-watermark, .sidebar > svg.bulx-panal-lateral { display: none !important; }

/* ── 2. Arriba: el logo y el botón del canto ──────────────────────────── */
.sidebar .sidebar-logo {
  position: relative; display: flex !important; align-items: center; justify-content: flex-start;
  padding: 22px 20px 6px !important; margin: 0 !important; min-height: 0 !important;
  border: 0 !important; background: none !important; cursor: pointer; flex-wrap: nowrap;
}
.sidebar .sidebar-logo::after { display: none !important; }
.sidebar .sidebar-logo .logo-mark {
  width: auto !important; height: 30px !important; display: flex !important; align-items: center;
  opacity: 1 !important; margin: 0 !important; overflow: visible !important; border: 0 !important; background: none !important;
}
.sidebar .sidebar-logo .logo-mark img.bulx-palabra { width: 84px !important; height: auto !important; display: block; content: url("img/bulx/bulx-negro.png"); }
:root[data-tema="oscuro"] .sidebar .sidebar-logo .logo-mark img.bulx-palabra { content: url("img/bulx/bulx-blanco.png"); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .sidebar .sidebar-logo .logo-mark img.bulx-palabra { content: url("img/bulx/bulx-blanco.png"); } }
.sidebar .sidebar-logo .logo-mark img.bulx-celdas { display: none; width: 28px; height: 28px; }
.sidebar .logo-text, .sidebar .sidebar-collapse-btn { display: none !important; }

.sidebar .bx-plegar {
  position: absolute; z-index: 5; top: 26px; right: -11px;
  width: 22px; height: 22px; padding: 0; display: grid; place-items: center;
  border-radius: 999px !important; border: 1px solid var(--bxb-linea); background: var(--bxb-papel);
  color: var(--bxb-suave); cursor: pointer; box-shadow: 0 2px 6px rgba(29, 31, 28, .08);
  transition: color .15s, transform .15s, background .15s;
}
.sidebar .bx-plegar:hover { color: var(--bxb-tinta); background: var(--bxb-amarillo); border-color: var(--bxb-amarillo); transform: scale(1.08); }
.sidebar .bx-plegar svg { width: 12px; height: 12px; transition: transform .3s ease; }
.sidebar.collapsed .bx-plegar svg { transform: rotate(180deg); }
.sidebar .bx-plegar:focus-visible { outline: 2px solid var(--bxb-amarillo); outline-offset: 2px; }

/* ── 3. El buscador ───────────────────────────────────────────────────── */
.sidebar .bx-busca {
  display: flex; align-items: center; gap: 8px; height: 38px; margin: 14px 14px 6px; padding: 0 6px 0 12px;
  border: 1px solid var(--bxb-linea); border-radius: 12px !important; background: var(--bxb-papel);
  color: var(--bxb-suave); font: inherit; font-size: 13px; cursor: text; width: calc(100% - 28px);
  transition: border-color .15s, background .15s;
}
.sidebar .bx-busca:hover { border-color: rgba(29, 31, 28, .2); }
.sidebar .bx-busca svg { width: 16px; height: 16px; flex: none; }
.sidebar .bx-busca span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; }
.sidebar .bx-busca kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px;
  border: 1px solid var(--bxb-linea); border-radius: 6px !important; background: var(--bxb-hundido);
  font: 600 11px/1 Inter, system-ui, sans-serif; color: var(--bxb-suave);
}
.sidebar .bx-busca:focus-visible { outline: 2px solid var(--bxb-amarillo); outline-offset: 1px; }

/* ── 4. Los rótulos y las secciones ───────────────────────────────────── */
.sidebar .sidebar-nav { padding: 0 0 8px !important; gap: 2px !important; }
.sidebar .sidebar-nav::-webkit-scrollbar-thumb { background: var(--bxb-linea) !important; }
.sidebar .bx-rotulo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bxb-rotulo); white-space: nowrap; overflow: hidden;
}
.sidebar .bx-rotulo button {
  width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px !important;
  background: none; color: var(--bxb-suave); cursor: pointer;
}
.sidebar .bx-rotulo button:hover { background: var(--bxb-hundido); color: var(--bxb-tinta); }
.sidebar .bx-rotulo button svg { width: 14px; height: 14px; }
.sidebar .nav-fijos { padding: 0 !important; margin: 0 !important; border: 0 !important; display: flex; flex-direction: column; gap: 2px; }
.sidebar .nav-group + .nav-group { margin-top: 2px !important; }
.sidebar .nav-group, .sidebar .nav-group.cerrado.tiene-activo { background: none !important; }

/* Una sección suelta y la cabecera de un grupo: misma fila. */
.sidebar .nav-item, .sidebar .nav-group-head {
  display: flex !important; align-items: center; gap: 12px !important;
  height: 38px; margin: 0 12px !important; padding: 0 10px !important; width: auto !important;
  border: 0 !important; border-radius: 12px !important; background: none !important; box-shadow: none !important;
  color: var(--bxb-texto) !important; font-size: 13.5px !important; font-weight: 500 !important; letter-spacing: -0.01em !important;
  text-transform: none !important; overflow: hidden !important; white-space: nowrap;
  transition: background .15s, color .15s !important;
}
.sidebar .nav-item .nav-label, .sidebar .nav-group-head .nav-label { color: inherit !important; font: inherit !important; letter-spacing: inherit !important; text-transform: none !important; flex: 1; text-align: left; opacity: 1; }
.sidebar .nav-item .nav-icon, .sidebar .nav-group-head .nav-group-ico {
  width: 18px !important; height: 18px !important; flex: none; color: var(--bxb-suave) !important; opacity: 1 !important; stroke-width: 1.5;
}
.sidebar .nav-group-head .nav-group-chevron { width: 14px !important; height: 14px !important; color: var(--bxb-suave) !important; transform: rotate(180deg); transition: transform .25s ease; }
.sidebar .nav-group.cerrado .nav-group-head .nav-group-chevron { transform: rotate(0deg) !important; }
.sidebar .nav-group-head .nav-group-activo { display: none !important; }
.sidebar .nav-item:hover:not(.active), .sidebar .nav-group-head:hover { background: var(--bxb-pasar) !important; color: var(--bxb-tinta) !important; }
.sidebar .nav-item:hover .nav-icon, .sidebar .nav-group-head:hover .nav-group-ico { color: var(--bxb-tinta) !important; }
.sidebar .nav-item::before, .sidebar .nav-item.active::before { content: none; display: none; }

/* El grupo donde está la página abierta: la fila gris, como «Dashboard». */
.sidebar .nav-group.tiene-activo > .nav-group-head { background: var(--bxb-hundido) !important; color: var(--bxb-tinta) !important; font-weight: 600 !important; }
.sidebar .nav-group.tiene-activo > .nav-group-head .nav-group-ico { color: var(--bxb-tinta) !important; }

/* La página abierta: el amarillo suave, el texto en tinta. */
.sidebar .nav-item.active, .sidebar .nav-group-items .nav-item.active,
:root:not([data-tema="oscuro"]) .sidebar .nav-group-items .nav-item.active {
  background: var(--bxb-activo) !important; color: var(--bxb-tinta) !important; font-weight: 600 !important; box-shadow: none !important;
}
.sidebar .nav-item.active .nav-icon { color: var(--bxb-tinta) !important; }

/* ── 5. El árbol de un grupo abierto ──────────────────────────────────── */
.sidebar .nav-group-items {
  position: relative; display: flex !important; flex-direction: column; gap: 2px !important;
  margin: 2px 12px 4px 31px !important; padding: 0 0 0 14px !important;
}
.sidebar .nav-group-items .nav-item { position: relative; height: 34px; margin: 0 !important; padding: 0 10px !important; font-size: 13px !important; overflow: visible !important; }
.sidebar .nav-group-items .nav-item .nav-icon { display: none !important; }
/* La rama: una línea que baja y, en la última, el codo redondeado. */
.sidebar .nav-group-items .nav-item::after {
  content: "" !important; position: absolute !important; left: -14px !important; top: -2px !important; bottom: -2px !important;
  width: 10px !important; height: auto !important; transform: none !important;
  border-left: 1.5px solid var(--bxb-linea); border-radius: 0 !important; background: none !important;
  opacity: 1 !important; box-shadow: none !important; padding: 0 !important; pointer-events: none;
}
.sidebar .nav-group-items .nav-item.bx-ultima::after {
  bottom: 50% !important; border-bottom: 1.5px solid var(--bxb-linea); border-bottom-left-radius: 9px !important;
}

/* ── 6. Los avisos: amarillo con la cifra en tinta ────────────────────── */
.sidebar .nav-badge {
  background: var(--bxb-amarillo) !important; color: #1D1F1C !important; border: 0 !important;
  min-width: 20px; height: 20px; padding: 0 6px !important; display: inline-grid; place-items: center;
  font-size: 11px !important; font-weight: 700 !important; border-radius: 999px !important; box-shadow: none !important;
}

/* ── 7. Mensajes ──────────────────────────────────────────────────────── */
.sidebar .bx-mensajes { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--bxb-linea); margin-inline: 12px; }
.sidebar .bx-mensajes .bx-rotulo { padding-inline: 10px; }
.sidebar .bx-hilo {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 38px; padding: 0 10px; border: 0; border-radius: 12px !important;
  background: none; color: var(--bxb-texto); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden;
  transition: background .15s, color .15s;
}
.sidebar .bx-hilo:hover { background: var(--bxb-pasar); color: var(--bxb-tinta); }
.sidebar .bx-hilo.abierto { background: var(--bxb-hundido); color: var(--bxb-tinta); }
.sidebar .bx-hilo .bx-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sidebar .bx-hilo.sin-leer .bx-nombre { font-weight: 700; color: var(--bxb-tinta); }
.sidebar .bx-hilo .bx-n { min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 999px !important; background: var(--bxb-amarillo); color: #1D1F1C; font-size: 10.5px; font-weight: 700; }
.sidebar .bx-cara { position: relative; flex: none; width: 22px; height: 22px; }
.sidebar .bx-cara > img, .sidebar .bx-cara > b {
  width: 22px; height: 22px; border-radius: 999px !important; display: grid; place-items: center; object-fit: cover;
  font-size: 9px; font-weight: 700; font-style: normal; background: var(--bxb-activo); color: #1D1F1C;
}
.sidebar .bx-cara > b.grupo { border-radius: 7px !important; background: var(--bxb-hundido); color: var(--bxb-texto); }
.sidebar .bx-cara > i {
  position: absolute; right: -2px; bottom: -2px; width: 8px; height: 8px; border-radius: 999px !important;
  border: 2px solid var(--bxb-papel); background: rgba(29, 31, 28, .28);
}
.sidebar .bx-cara > i.si { background: #22A04B; }
.sidebar .bx-vacio { padding: 4px 10px 8px; font-size: 12.5px; color: var(--bxb-suave); white-space: nowrap; overflow: hidden; }
.sidebar .bx-todos { display: block; margin: 2px 0 0; padding: 6px 10px; border: 0; background: none; color: var(--bxb-suave); font: inherit; font-size: 12.5px; cursor: pointer; border-radius: 10px !important; white-space: nowrap; }
.sidebar .bx-todos:hover { color: var(--bxb-tinta); background: var(--bxb-pasar); }
/* El botón «Chat» del canto derecho sobra: los mensajes viven en la barra. */
.chat-fab { display: none !important; }
/* Y el panel ya no tapa la página de arriba abajo: una tarjeta al lado de la barra. */
@media (min-width: 721px) {
  .chat-panel {
    left: var(--bxb-chat-izq, 288px) !important; right: auto !important; top: auto !important; bottom: 12px !important;
    width: 372px !important; height: min(620px, calc(100% - 24px)) !important;
    border: 1px solid var(--bxb-linea) !important; border-radius: 22px !important;
    box-shadow: 0 24px 60px -24px rgba(29, 31, 28, .35), 0 2px 6px rgba(29, 31, 28, .06) !important;
    animation: bxChat .24s cubic-bezier(.2, .8, .2, 1) !important; z-index: 95 !important;
  }
}
@keyframes bxChat { from { opacity: 0; transform: translateX(-12px) scale(.98); } to { opacity: 1; transform: none; } }

/* ── 8. Abajo: la tarjeta del usuario y su menú ───────────────────────── */
.sidebar .sidebar-salir { display: none !important; }
.sidebar .sidebar-user {
  display: flex !important; align-items: center; gap: 10px; margin: 8px 12px 12px !important; padding: 8px 10px 8px 8px !important;
  border: 1px solid var(--bxb-linea) !important; border-radius: 16px !important; background: var(--bxb-papel) !important;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.sidebar .sidebar-user:hover { background: var(--bxb-pasar) !important; }
.sidebar .sidebar-user-info { flex: 1; display: flex !important; align-items: center; gap: 10px !important; margin: 0 !important; min-width: 0; }
.sidebar .sidebar-avatar, .sidebar .sidebar-user img { width: 36px !important; height: 36px !important; border-radius: 11px !important; box-shadow: none !important; flex: none; }
.sidebar .sidebar-user-text { min-width: 0; opacity: 1 !important; width: auto !important; }
.sidebar .sidebar-user-name { color: var(--bxb-tinta) !important; font-size: 13.5px !important; font-weight: 600 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .sidebar-user-role { color: var(--bxb-suave) !important; font-size: 11.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .sidebar-user .bx-flecha { width: 16px; height: 16px; flex: none; color: var(--bxb-suave); transition: transform .2s; }
.sidebar .sidebar-user[aria-expanded="true"] .bx-flecha { transform: rotate(180deg); }

/* Los panelitos que salen de la barra: el menú del usuario y, plegada, las subpáginas. */
.bx-flota {
  position: fixed; z-index: 400; min-width: 168px; padding: 6px;
  background: var(--bxb-papel); border: 1px solid var(--bxb-linea); border-radius: 14px !important;
  box-shadow: 0 18px 40px -18px rgba(29, 31, 28, .35), 0 2px 6px rgba(29, 31, 28, .06);
  font-family: Inter, system-ui, sans-serif; animation: bxFlota .16s ease-out;
}
@keyframes bxFlota { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
.bx-flota button {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 12px; border: 0; border-radius: 9px !important;
  background: none; color: var(--bxb-texto); font: 500 13px/1 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; white-space: nowrap;
}
.bx-flota button:hover { background: var(--bxb-pasar); color: var(--bxb-tinta); }
.bx-flota button.activa { background: var(--bxb-activo); color: var(--bxb-tinta); font-weight: 600; }
.bx-flota button svg { width: 16px; height: 16px; color: var(--bxb-suave); }
.bx-flota button.peligro:hover { color: #B42318; }
.bx-flota hr { border: 0; border-top: 1px solid var(--bxb-linea); margin: 5px 4px; }
.bx-flota .bx-flota-tit { padding: 8px 12px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bxb-rotulo); }

/* El panel de las subpáginas, con su rama, como en el ejemplo. */
.bx-volante { padding: 6px 6px 6px 22px; min-width: 176px; }
.bx-volante .bx-flota-tit { margin-left: -16px; }
.bx-volante button { position: relative; }
.bx-volante button::before { content: ""; position: absolute; left: -12px; top: -3px; bottom: -3px; width: 9px; border-left: 1.5px solid var(--bxb-linea); }
.bx-volante button.bx-ultima::before { bottom: 50%; border-bottom: 1.5px solid var(--bxb-linea); border-bottom-left-radius: 8px !important; }

@media (prefers-reduced-motion: reduce) {
  .sidebar, .bx-flota, .chat-panel { transition: none !important; animation: none !important; }
}

/* Retoques: los avisos vacíos no se pintan, la rama un poco más visible y
   las iniciales del usuario sobre el amarillo suave. */
.sidebar .nav-badge:empty { display: none !important; }
.sidebar .nav-group-items .nav-item::after, .sidebar .nav-group-items .nav-item.bx-ultima::after { border-color: rgba(29, 31, 28, .14) !important; }
:root[data-tema="oscuro"] .sidebar .nav-group-items .nav-item::after { border-color: rgba(246, 242, 230, .16) !important; }
.sidebar .sidebar-avatar { background: var(--bxb-activo) !important; color: #1D1F1C !important; display: grid !important; place-items: center; font-size: 12px !important; font-weight: 700 !important; overflow: hidden; }
.sidebar .sidebar-avatar img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; }
/* Las celdas y la palabra van tal cual: una regla de antes las invertía (y el amarillo salía azul). */
.sidebar .sidebar-logo .logo-mark img.bulx-celdas, .sidebar .sidebar-logo .logo-mark img.bulx-palabra { filter: none !important; }

/* ──────────────────────────────────────────────────────────────────────────
   Fluidez (Xavi: «que las animaciones sean un poco más fluidas»).
   La clave es que al plegar NADA cambie de sitio: cada icono, la lupa, las
   caras y el avatar están ya en el centro de los 68 px que quedan, así que
   la barra solo se estrecha y los textos se desvanecen; no hay saltos de
   márgenes ni elementos que aparecen o desaparecen de golpe.
   ────────────────────────────────────────────────────────────────────────── */
.sidebar, :root[data-tema="claro"] .sidebar, :root[data-tema="oscuro"] .sidebar {
  transition: width .44s cubic-bezier(.22, 1, .36, 1) !important; will-change: width; contain: layout style;
}
/* Las mismas medidas plegada y desplegada: icono a 34 px del canto. */
.sidebar .nav-item, .sidebar .nav-group-head { margin: 0 14px !important; padding: 0 11px !important; }
.sidebar .nav-group-items { margin: 2px 14px 4px 34px !important; }
.sidebar .bx-busca { margin: 14px 14px 6px !important; width: calc(100% - 28px) !important; padding: 0 6px 0 11px !important; overflow: hidden; }
.sidebar .bx-rotulo { position: relative; padding: 14px 25px 6px !important; }
.sidebar .bx-mensajes { margin-inline: 14px !important; }
.sidebar .bx-mensajes .bx-rotulo { padding-inline: 11px !important; }
.sidebar .bx-hilo { padding: 0 0 0 9px !important; }
.sidebar .sidebar-user { margin: 8px 12px 12px !important; padding: 4px 10px 4px 4px !important; overflow: hidden; }
.sidebar .sidebar-logo { padding: 22px 20px 6px !important; }
.sidebar .sidebar-logo .logo-mark { position: relative; height: 30px !important; }
.sidebar .sidebar-logo .logo-mark img.bulx-celdas {
  display: block !important; position: absolute; left: 0; top: 1px; opacity: 0; transform: scale(.6) rotate(-20deg);
  transition: opacity .3s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.sidebar .sidebar-logo .logo-mark img.bulx-palabra { transition: opacity .25s ease .12s, transform .4s cubic-bezier(.22, 1, .36, 1) .08s; transform-origin: left center; }

/* Lo que se desvanece: textos, flechas, avisos, teclas. Al desplegar llegan
   un poco después de que la barra empiece a crecer; al plegar se van antes. */
.sidebar .nav-label, .sidebar .nav-group-chevron, .sidebar .nav-badge, .sidebar .bx-busca span, .sidebar .bx-busca kbd,
.sidebar .bx-rotulo > span, .sidebar .bx-rotulo button, .sidebar .bx-hilo .bx-nombre, .sidebar .bx-hilo .bx-n,
.sidebar .bx-todos, .sidebar .bx-vacio, .sidebar .sidebar-user-text, .sidebar .sidebar-user .bx-flecha {
  transition: opacity .26s ease .14s, transform .26s ease .14s !important;
}
.sidebar.collapsed .nav-label, .sidebar.collapsed .nav-group-chevron, .sidebar.collapsed .nav-badge, .sidebar.collapsed .bx-busca span, .sidebar.collapsed .bx-busca kbd,
.sidebar.collapsed .bx-rotulo > span, .sidebar.collapsed .bx-rotulo button, .sidebar.collapsed .bx-hilo .bx-nombre, .sidebar.collapsed .bx-hilo .bx-n,
.sidebar.collapsed .bx-todos, .sidebar.collapsed .bx-vacio, .sidebar.collapsed .sidebar-user-text, .sidebar.collapsed .sidebar-user .bx-flecha {
  opacity: 0 !important; transform: translateX(-6px); pointer-events: none; transition: opacity .12s ease, transform .12s ease !important;
}
.sidebar.collapsed .nav-label { display: block !important; width: auto !important; }
.sidebar.collapsed .nav-group-chevron { display: block !important; }
.sidebar.collapsed .nav-item .nav-badge:not(:empty) { display: inline-grid !important; }
/* Plegada, un rótulo es una rayita corta en su sitio. */
.sidebar .bx-rotulo::after {
  content: ""; position: absolute; left: 50%; bottom: 10px; width: 16px; margin-left: -8px; height: 1.5px;
  background: var(--bxb-linea); opacity: 0; transition: opacity .2s ease;
}
.sidebar .bx-mensajes .bx-rotulo::after { left: 50%; }
.sidebar.collapsed .bx-rotulo::after { opacity: 1; transition-delay: .1s; }
.sidebar.collapsed .sidebar-logo .logo-mark img.bulx-palabra { display: block !important; opacity: 0; transform: scale(.9); transition: opacity .14s ease, transform .2s ease; }
.sidebar.collapsed .sidebar-logo .logo-mark img.bulx-celdas { opacity: 1; transform: none; transition-delay: .12s; }
.sidebar.collapsed .sidebar-logo:hover .logo-mark img.bulx-celdas { transform: scale(1.12) rotate(-6deg); transition-delay: 0s; }
.sidebar.collapsed .sidebar-logo { padding: 22px 20px 6px !important; justify-content: flex-start !important; }
.sidebar.collapsed .nav-group-head { display: flex !important; }
.sidebar.collapsed .nav-group.bx-volando > .nav-group-head { background: var(--bxb-hundido) !important; color: var(--bxb-tinta) !important; }
.sidebar.collapsed .nav-item::after { display: none !important; }

/* Abrir y cerrar un grupo: la altura justa (la mide bulx-barra.js) y los
   hijos bajan un poco al entrar. */
.sidebar .nav-group-items {
  max-height: var(--bx-alto, 400px) !important; opacity: 1;
  transition: max-height .38s cubic-bezier(.22, 1, .36, 1), opacity .26s ease, margin .38s cubic-bezier(.22, 1, .36, 1) !important;
  overflow: hidden !important;
}
.sidebar .nav-group.cerrado .nav-group-items, .sidebar.collapsed .nav-group-items {
  max-height: 0 !important; opacity: 0; margin-top: 0 !important; margin-bottom: 0 !important; pointer-events: none;
}
.sidebar.collapsed .nav-group-items { display: flex !important; }
.sidebar .nav-group-items .nav-item { transition: background .18s ease, color .18s ease, transform .32s cubic-bezier(.22, 1, .36, 1), opacity .26s ease !important; }
.sidebar .nav-group.cerrado .nav-group-items .nav-item { transform: translateY(-6px); opacity: 0; }
.sidebar .nav-group-head .nav-group-chevron { transition: transform .38s cubic-bezier(.22, 1, .36, 1), opacity .26s ease .14s !important; }
.sidebar .nav-group-items .nav-item::after { overflow: visible; }

/* Pulsar se nota: un pelo hacia dentro. */
.sidebar .nav-item:active, .sidebar .nav-group-head:active, .sidebar .bx-hilo:active, .sidebar .bx-busca:active { transform: scale(.98); }
.sidebar .nav-item, .sidebar .nav-group-head, .sidebar .bx-hilo, .sidebar .bx-busca, .sidebar .sidebar-user {
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease !important;
}

/* Los panelitos entran desde la barra con un pequeño rebote y se van fundidos. */
.bx-flota { transform-origin: left top; animation: bxFlotaEntra .24s cubic-bezier(.2, .9, .3, 1.12) !important; }
.bx-flota.bx-menu-usuario { transform-origin: center bottom; }
.bx-flota.saliendo { animation: bxFlotaSale .14s ease forwards !important; pointer-events: none; }
@keyframes bxFlotaEntra { from { opacity: 0; transform: translateX(-6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes bxFlotaSale { to { opacity: 0; transform: translateX(-4px) scale(.98); } }
.bx-flota button { transition: background .14s ease, color .14s ease; }

@media (prefers-reduced-motion: reduce) {
  .sidebar *, .bx-flota { transition: none !important; animation: none !important; }
}

/* Reglas de antes que, plegada, metían 10 px de relleno a la barra y le
   quitaban los márgenes a la tarjeta del usuario: con ellas los iconos se
   desplazaban a mitad de la animación. */
.sidebar, .sidebar.collapsed { padding: 0 !important; }
.sidebar .nav-group-head, .sidebar.collapsed .nav-group-head { width: calc(100% - 28px) !important; }
.sidebar.collapsed .nav-item, .sidebar.collapsed .nav-group-head { margin: 0 14px !important; padding: 0 11px !important; justify-content: flex-start !important; gap: 12px !important; }
.sidebar.collapsed .sidebar-user { margin: 8px 12px 12px !important; padding: 4px 10px 4px 4px !important; width: auto !important; justify-content: flex-start !important; }
.sidebar.collapsed .sidebar-user-info { flex: 1 !important; }
.sidebar.collapsed .sidebar-user-text { display: block !important; }
.sidebar.collapsed .sidebar-user .bx-flecha { display: block !important; }
.sidebar.collapsed .bx-busca { width: calc(100% - 28px) !important; margin: 14px 14px 6px !important; padding: 0 6px 0 11px !important; justify-content: flex-start !important; }
.sidebar.collapsed .bx-busca span { display: block !important; }
.sidebar.collapsed .bx-busca kbd { display: inline-grid !important; }
.sidebar.collapsed .bx-hilo { width: 100% !important; margin: 0 !important; padding: 0 0 0 9px !important; justify-content: flex-start !important; }
.sidebar.collapsed .bx-hilo .bx-nombre { display: block !important; }
.sidebar.collapsed .bx-mensajes { margin-inline: 14px !important; }
.sidebar.collapsed .bx-rotulo { font-size: 10.5px !important; letter-spacing: .08em !important; padding: 14px 25px 6px !important; justify-content: space-between !important; }
.sidebar.collapsed .bx-rotulo button { display: grid !important; }
/* El avatar se queda pegado a la izquierda: la flecha va encima (no ocupa)
   y el bloque no se encoge, así que plegada el avatar no se descentra. */
.sidebar .sidebar-user, .sidebar.collapsed .sidebar-user { position: relative; padding-right: 34px !important; }
.sidebar .sidebar-user-info, .sidebar.collapsed .sidebar-user-info { flex: 1 0 auto !important; justify-content: flex-start !important; min-width: 0; max-width: 100%; }
.sidebar.collapsed .sidebar-user-info { max-width: none; }
.sidebar .sidebar-user .bx-flecha { position: absolute; right: 12px; top: 50%; margin-top: -8px; }
.sidebar .sidebar-user-text { min-width: 0; overflow: hidden; }
/* Plegada, sin rayas entre grupo y grupo (las ponía una regla de antes). */
.sidebar.collapsed .nav-group + .nav-group, .sidebar.collapsed .nav-fijos { border: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 2px !important; }

/* ──────────────────────────────────────────────────────────────────────────
   Encuadre (Xavi: «el encuadre es muy pobre, los iconos demasiado pequeños,
   el chat igual»). Plegada mide 76 px y TODO va centrado a 38 px del canto:
   botones de 48 × 44, iconos de 20, la lupa en su botón de 48, las caras del
   chat de 30 y el avatar de 40. Desplegada usa exactamente las mismas
   medidas, así que plegar sigue sin mover nada.
   ────────────────────────────────────────────────────────────────────────── */
:root { --bxb-ancho: 276px; }
.sidebar.collapsed { width: 76px !important; }

.sidebar .sidebar-logo, .sidebar.collapsed .sidebar-logo { padding: 24px 22px 10px !important; }
.sidebar .sidebar-logo .logo-mark { height: 34px !important; }
.sidebar .sidebar-logo .logo-mark img.bulx-palabra { width: 92px !important; }
.sidebar .sidebar-logo .logo-mark img.bulx-celdas { width: 32px !important; height: 32px !important; top: 1px; }
.sidebar .bx-plegar { top: 30px; right: -12px; width: 24px; height: 24px; }

.sidebar .bx-busca, .sidebar.collapsed .bx-busca {
  height: 44px !important; margin: 14px 14px 4px !important; padding: 0 8px 0 14px !important; border-radius: 14px !important; font-size: 13.5px;
}
.sidebar .bx-busca svg { width: 18px !important; height: 18px !important; }

.sidebar .bx-rotulo, .sidebar.collapsed .bx-rotulo { padding: 18px 28px 8px !important; }
.sidebar .bx-rotulo::after { bottom: 12px; width: 20px; margin-left: -10px; }

.sidebar .nav-item, .sidebar .nav-group-head,
.sidebar.collapsed .nav-item, .sidebar.collapsed .nav-group-head {
  height: 44px !important; margin: 0 14px !important; padding: 0 14px !important; gap: 14px !important;
  border-radius: 14px !important; font-size: 14px !important;
}
.sidebar .nav-group-head, .sidebar.collapsed .nav-group-head { width: calc(100% - 28px) !important; }
.sidebar .nav-item .nav-icon, .sidebar .nav-group-head .nav-group-ico { width: 20px !important; height: 20px !important; }
.sidebar .nav-fijos, .sidebar .sidebar-nav { gap: 3px !important; }
.sidebar .nav-group + .nav-group, .sidebar.collapsed .nav-group + .nav-group { margin-top: 3px !important; }
/* Los hijos del árbol, con la rama bajo el centro del icono (38 px). */
.sidebar .nav-group-items { margin: 3px 14px 6px 38px !important; }
.sidebar .nav-group-items .nav-item { height: 38px !important; margin: 0 !important; padding: 0 12px !important; font-size: 13.5px !important; border-radius: 12px !important; }

/* Mensajes: caras de 30 y sin la raya de arriba (ya está la del rótulo). */
.sidebar .bx-mensajes, .sidebar.collapsed .bx-mensajes { border-top: 0 !important; margin: 6px 14px 0 !important; padding-top: 0 !important; }
.sidebar .bx-mensajes .bx-rotulo, .sidebar.collapsed .bx-mensajes .bx-rotulo { padding: 18px 14px 8px !important; }
.sidebar .bx-hilo, .sidebar.collapsed .bx-hilo { height: 44px !important; padding: 0 0 0 9px !important; gap: 12px !important; border-radius: 14px !important; font-size: 14px !important; }
.sidebar .bx-cara { width: 30px !important; height: 30px !important; }
.sidebar .bx-cara > img, .sidebar .bx-cara > b { width: 30px !important; height: 30px !important; font-size: 11px !important; }
.sidebar .bx-cara > b.grupo { border-radius: 10px !important; }
.sidebar .bx-cara > i { width: 10px !important; height: 10px !important; right: -1px; bottom: -1px; }
/* Plegada, lo que no se ha leído se ve igual: un punto amarillo en la cara. */
.sidebar .bx-hilo.sin-leer .bx-cara::after {
  content: ""; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 999px !important;
  background: var(--bxb-amarillo); border: 2px solid var(--bxb-papel); opacity: 0; transition: opacity .2s ease;
}
.sidebar.collapsed .bx-hilo.sin-leer .bx-cara::after { opacity: 1; }

/* El usuario: avatar de 40, centrado plegada. */
.sidebar .sidebar-user, .sidebar.collapsed .sidebar-user { margin: 10px 12px 12px !important; padding: 5px 34px 5px 5px !important; border-radius: 18px !important; }
.sidebar .sidebar-avatar, .sidebar .sidebar-user img { width: 40px !important; height: 40px !important; border-radius: 13px !important; font-size: 13px !important; }
.sidebar .sidebar-user-name { font-size: 14px !important; }
.sidebar .sidebar-user-role { font-size: 12px !important; }
/* Un puente invisible entre la barra y el panel de subpáginas: el ratón
   cruza el hueco sin que el panel se cierre. */
.bx-volante::after { content: ""; position: absolute; left: -40px; top: 0; bottom: 0; width: 40px; }

/* ──────────────────────────────────────────────────────────────────────────
   Tonos y encuadre (Xavi: «los tonos de colores, el mal encuadre de las
   pestañas que chocan con el ángulo redondeado del sidebar, la flecha del
   sidebar que está entremedias y no se ve bien»).
   · Un solo neutro, el cálido de bulx: el fondo era gris azulado (#F8FAFC) y
     la barra de pestañas otro gris frío (#F3F4F6) con raya #E5E7EB.
   · La barra de pestañas es otra tarjeta, a 12 px de la lateral y a la misma
     altura, así que ya no choca con su esquina.
   · La flecha va DENTRO de la barra: arriba a la derecha desplegada y, plegada,
     al lado de las celdas.
   ────────────────────────────────────────────────────────────────────────── */
:root { --bxb-lienzo: #F1F1EE; }
:root[data-tema="oscuro"] { --bxb-lienzo: #121311; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --bxb-lienzo: #121311; } }
body, #app, .main, .main-scroll { background: var(--bxb-lienzo) !important; }

@media (min-width: 721px) {
  .main { padding: 12px 12px 0 12px !important; box-sizing: border-box; }
  .tabbar-fila {
    height: 48px; flex: 0 0 48px !important; margin: 0 0 0 0; align-items: center;
    background: var(--bxb-papel) !important; border: 1px solid var(--bxb-linea) !important; border-radius: 18px !important;
    box-shadow: 0 1px 2px rgba(29, 31, 28, .04) !important; overflow: hidden;
  }
  .tabbar-fila > .tabbar, .tabbar {
    height: 46px !important; min-height: 46px !important; flex-basis: auto !important; padding: 0 6px !important; gap: 4px !important;
    align-items: center !important; background: transparent !important; border: 0 !important;
  }
  .tabbar .tab {
    height: 36px; padding: 0 6px 0 12px !important; border: 0 !important; border-radius: 12px !important;
    background: transparent !important; color: var(--bxb-texto) !important; transition: background .15s, color .15s;
  }
  .tabbar .tab:hover { background: var(--bxb-pasar) !important; color: var(--bxb-tinta) !important; }
  .tabbar .tab.activa { background: var(--bxb-activo) !important; color: var(--bxb-tinta) !important; }
  .tabbar .tab.activa::before, .tabbar .tab.activa::after { display: none !important; }
  .tabbar .tab .tab-sub { color: var(--bxb-suave) !important; }
  .tabbar .tab .tab-x { border-radius: 8px !important; }
  .tabbar .tab .tab-x:hover { background: rgba(29, 31, 28, .08) !important; }
  .tabbar-vacia { padding-left: 10px; color: var(--bxb-rotulo) !important; font-size: 13px; }
  .tabbar-fila .tema-btn, .tabbar-fila .presencia { background: transparent !important; border: 0 !important; height: 46px; }
  .tabbar-fila .tema-btn { border-radius: 12px !important; color: var(--bxb-suave) !important; }
  .tabbar-fila .tema-btn:hover { color: var(--bxb-tinta) !important; }
  .tab-cerrar-todas { border-radius: 10px !important; border-color: var(--bxb-linea) !important; }
  .main-scroll { padding-top: 24px !important; }
}

/* La flecha, dentro: un botón cuadrado redondeado junto al logo. */
.sidebar .bx-plegar, .sidebar.collapsed .bx-plegar {
  top: 26px !important; right: 14px !important; width: 30px !important; height: 30px !important;
  border-radius: 10px !important; border: 1px solid var(--bxb-linea) !important; background: var(--bxb-papel) !important;
  box-shadow: none !important; color: var(--bxb-suave) !important; transform: none !important;
  transition: background .15s, color .15s, border-color .15s, width .3s, right .3s !important;
}
.sidebar .bx-plegar:hover { background: var(--bxb-hundido) !important; color: var(--bxb-tinta) !important; border-color: transparent !important; }
.sidebar .bx-plegar svg { width: 14px !important; height: 14px !important; }
/* Plegada: una flechita discreta a la derecha de las celdas, sin caja. */
.sidebar.collapsed .bx-plegar {
  top: 33px !important; right: 3px !important; width: 16px !important; height: 20px !important;
  border-color: transparent !important; background: transparent !important; border-radius: 6px !important;
}
.sidebar.collapsed .bx-plegar svg { width: 12px !important; height: 12px !important; }
.sidebar.collapsed .bx-plegar:hover, .sidebar.collapsed .sidebar-logo:hover ~ .bx-plegar { color: var(--bxb-tinta) !important; background: transparent !important; }

/* Un solo neutro en toda la web (modo claro): los grises fríos de cada módulo
   (#F8FAFC, #F3F4F6, #E5E7EB, #E2E8F0 y las tintas pizarra #0F172A/#475569)
   pasan a los cálidos de bulx. Mismos selectores que los definen, con
   :root:not([data-tema="oscuro"]) delante para ganarles; en oscuro, nada. */
:root:not([data-tema="oscuro"]) {
  --bg: #F1F1EE; --surface-2: #F6F6F3; --border: #E4E4DF; --border-med: #D5D5CF; --border-strong: #A5A69F;
  --space-indigo: #1D1F1C; --lavender-grey: #8E908A;
}
:root:not([data-tema="oscuro"]) #page-inventario { --iv-borde: #E4E4DF; --iv-linea: #EEEEEA; --iv-fondo: #F1F1EE; --iv-tinta: #1D1F1C; --iv-tinta-2: #4E504B; --iv-suave: #7C7E78; }
:root:not([data-tema="oscuro"]) .ajx-activo { --ax-borde: #E4E4DF; --ax-linea: #EEEEEA; --ax-fondo: #F1F1EE; --ax-tinta: #1D1F1C; --ax-tinta-2: #4E504B; --ax-suave: #7C7E78; }
:root:not([data-tema="oscuro"]) .fc { --fc-borde: #E4E4DF; --fc-fondo: #F6F6F3; --fc-tinta: #1D1F1C; --fc-tinta-2: #4E504B; --fc-tinta-3: #A5A69F; }
:root:not([data-tema="oscuro"]) .chat-panel { --cn-recibido: #F1F1EE; --cn-recibido-tinta: #1D1F1C; --cn-enviado: #1D1F1C; --cn-campo: #F6F6F3; --cn-borde: #E4E4DF; }
:root:not([data-tema="oscuro"]) .en { --en-borde: #E4E4DF; }
:root:not([data-tema="oscuro"]) .tg { --tg-borde: #E4E4DF; --tg-tinta: #1D1F1C; --tg-tinta-2: #4E504B; --tg-suave: #F6F6F3; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-tema="oscuro"]) { --bg: #121311; --surface-2: #232421; --border: rgba(251, 251, 251, .09); --border-med: rgba(251, 251, 251, .16); --border-strong: rgba(251, 251, 251, .3); }
}
.fc-resumen { background: var(--surface-2) !important; border-color: var(--border) !important; }
/* La pestaña abierta: sin la raya oscura de abajo de antes. */
.tabbar .tab.activa { box-shadow: none !important; }

/* Plegada, 76 px también cuando el tema está elegido a mano. La regla del
   ancho desplegado lleva :root[data-tema="claro"|"oscuro"] delante y, al
   pulsar el botón del tema, ganaba a la de plegada: la barra se quedaba ancha
   con el contenido ya recogido (Xavi: «la barra lateral se bugea a tope»). */
.sidebar.collapsed, :root[data-tema] .sidebar.collapsed, :root[data-tema="claro"] .sidebar.collapsed, :root[data-tema="oscuro"] .sidebar.collapsed { width: 76px !important; }
/* En oscuro, las iniciales en amarillo sobre su fondo (en tinta no se leían). */
:root[data-tema="oscuro"] .sidebar .sidebar-avatar, :root[data-tema="oscuro"] .sidebar .bx-cara > b:not(.grupo) { color: #FEC833 !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .sidebar .sidebar-avatar, :root:not([data-tema="claro"]) .sidebar .bx-cara > b:not(.grupo) { color: #FEC833 !important; }
}

/* Plegada, el logo centrado de verdad (Xavi: «el logo sigue sin estar
   centrado»). Dos cosas lo descentraban: la flechita de al lado, que hacía
   del logo + flecha un grupo torcido, y que las tres celdas pesan a la
   derecha (dos a la derecha, una a la izquierda: su centro de masa queda
   ~2,5 px a la derecha del centro de la caja). Así que fuera la flecha
   —pulsar las celdas abre la barra, como siempre— y las celdas se colocan
   respecto a la barra entera, 2 px a la izquierda para el centro óptico. */
.sidebar.collapsed .bx-plegar { opacity: 0 !important; pointer-events: none !important; }
.sidebar.collapsed .sidebar-logo .logo-mark { position: static !important; }
.sidebar.collapsed .sidebar-logo .logo-mark img.bulx-celdas { left: calc(50% - 18px) !important; top: 25px !important; }
/* La fila del logo mide lo mismo plegada y desplegada: si no, el buscador
   subía 14 px al plegar. */
.sidebar .sidebar-logo, .sidebar.collapsed .sidebar-logo { height: 68px !important; min-height: 68px !important; box-sizing: border-box !important; }

/* ── Quién está conectado ─────────────────────────────────────────────── */
.tabbar-fila .presencia { padding: 0 8px 0 4px !important; margin-left: 0 !important; }
.bx-pre {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 4px;
  border: 1px solid var(--bxb-linea); border-radius: 999px !important; background: var(--bxb-papel);
  cursor: pointer; font: inherit; color: var(--bxb-tinta); transition: background .15s, border-color .15s, box-shadow .2s;
}
.bx-pre:hover { background: var(--bxb-pasar); box-shadow: 0 6px 16px -10px rgba(29, 31, 28, .35); }
.bx-pre:focus-visible { outline: 2px solid var(--bxb-amarillo); outline-offset: 2px; }
.bx-pre-caras { display: flex; align-items: center; padding-left: 2px; }
.bx-pc {
  position: relative; width: 28px; height: 28px; flex: none; display: grid; place-items: center; overflow: hidden;
  border-radius: 999px !important; box-shadow: 0 0 0 2px var(--bxb-papel);
  font: 700 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: .02em;
  background: var(--bxb-hundido); color: var(--bxb-tinta);
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1);
}
.bx-pre-caras .bx-pc + .bx-pc { margin-left: -9px; }
.bx-pre:hover .bx-pre-caras .bx-pc { transform: translateX(calc(var(--i, 0) * 2px)); }
.bx-pre-caras .bx-pc:nth-child(2) { --i: 1; } .bx-pre-caras .bx-pc:nth-child(3) { --i: 2; } .bx-pre-caras .bx-pc:nth-child(4) { --i: 3; } .bx-pre-caras .bx-pc:nth-child(5) { --i: 4; }
.bx-pc img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0 !important; }
.bx-pc.t-amarillo { background: #FEC833; color: #1D1F1C; }
.bx-pc.t-tinta { background: #1D1F1C; color: #FEC833; }
.bx-pc.t-crema { background: #FFF1C2; color: #1D1F1C; }
.bx-pc.t-gris { background: #E4E4DF; color: #1D1F1C; }
.bx-pc-mas { background: var(--bxb-hundido); color: var(--bxb-suave); font-size: 10px; }
.bx-pre-n { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.bx-pre-vivo { position: relative; width: 8px; height: 8px; flex: none; border-radius: 999px !important; background: #22A04B; }
.bx-pre-vivo::after { content: ""; position: absolute; inset: 0; border-radius: 999px !important; background: #22A04B; animation: bxVivo 2s ease-out infinite; }
@keyframes bxVivo { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.6); opacity: 0; } }

/* El panel: quién y dónde. */
.bx-pre-panel { min-width: 248px; padding: 8px; transform-origin: right top; }
.bx-pre-fila { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px !important; }
.bx-pre-fila:hover { background: var(--bxb-pasar); }
.bx-pre-fila .bx-pc { box-shadow: none; font-size: 11.5px; }
.bx-pre-fila span:not(.bx-pc) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bx-pre-fila b { font: 600 13.5px/1.2 Inter, system-ui, sans-serif; color: var(--bxb-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-pre-fila small { font: 400 12px/1.2 Inter, system-ui, sans-serif; color: var(--bxb-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .bx-pre-vivo::after { animation: none; } }
:root[data-tema="oscuro"] .bx-pc.t-tinta { background: #3A3C37; }
:root[data-tema="oscuro"] .bx-pc.t-gris { background: #4E504B; color: #F6F2E6; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .bx-pc.t-tinta { background: #3A3C37; } :root:not([data-tema="claro"]) .bx-pc.t-gris { background: #4E504B; color: #F6F2E6; } }

/* ── Días de rodaje: píldoras, no ladrillos (Xavi: «menos cuadrado, más
   redondeado»). La regla global de esquinas rectas ganaba a los 10 px que
   tenía; ahora cada tramo es una píldora, los tramos a cero no se pintan
   (asomaban como «0'» cortados) y la leyenda va con puntos redondos. */
.dn-anno-barra { height: 40px !important; gap: 6px !important; }
.dn-anno-barra > div { border-radius: 999px !important; padding: 0 16px !important; font-size: 12px !important; }
.dn-anno-barra > div[style*="--w:0.0%"], .dn-anno-barra > div[style*="--w:0%"] { display: none !important; }
:root:not([data-tema="oscuro"]) .dn-a-prev { background: #E4E4DF !important; }
.dn-anno-leyenda i, i.dn-a-conf, i.dn-a-prev, i.dn-a-rodado { width: 10px !important; height: 10px !important; border-radius: 999px !important; clip-path: none !important; }

/* La Vito del dashboard ahora es una furgoneta de celdas (img/bulx/furgo-panal.svg):
   sin la sombra pesada de la foto y con el fondo de la tarjeta en la tinta de bulx. */
.fl .bx-furgo { filter: drop-shadow(0 10px 18px rgba(254, 200, 51, .18)) !important; }
.fl, :root[data-tema="oscuro"] .fl { background: radial-gradient(70% 60% at 78% 72%, #34362F 0%, #1D1F1C 55%, #151714 100%) !important; }

/* ── Widget de Flota: la furgoneta de frente, asomando por abajo en la
   mitad derecha, y los textos en blanco de verdad (iban en gris). ───── */
.fl .fl-piso, .fl .fl-suelo { display: none !important; }
.fl .fl-escena { right: 5% !important; left: auto !important; bottom: 0 !important; width: 46% !important; z-index: 1 !important; }
.fl .fl-van-caja, .dn:not(.dn-listo) .fl .fl-van-caja { transform: none !important; }
.fl .fl-van.bx-furgo, .dn:not(.dn-listo) .fl .fl-van.bx-furgo { transform: none !important; opacity: 1 !important; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1) !important; filter: drop-shadow(0 -6px 22px rgba(254, 200, 51, .16)) !important; }
.fl:hover .fl-van.bx-furgo { transform: translateY(-4px) !important; }
.fl, .fl .dn-linea-cab, .fl .dn-linea-cab span, .fl-cifra b, .fl-datos b { color: #FBFBFB !important; }
.fl-cifra span, .fl-datos, .fl-datos span { color: rgba(251, 251, 251, .72) !important; }
.fl .dn-ico { background: rgba(251, 251, 251, .1) !important; color: #FBFBFB !important; }
.fl .dn-ir { color: rgba(251, 251, 251, .7) !important; }
.fl-arriba { position: relative; z-index: 2; }
@media (max-width: 640px) { .fl .fl-escena { position: relative !important; right: auto !important; width: 72% !important; margin: 12px auto 0 !important; } }
.fl .fl-escena { right: 4% !important; bottom: 10px !important; width: 50% !important; }

/* ── Perfeccionando la barra (Xavi: «el sidebar sigue teniendo fallos») ──
   · El puente invisible hacia el panel solo cubre el hueco de 10 px: el de
     40 px tapaba media barra y los clics en otro icono no llegaban.
   · La etiqueta con el nombre de cada icono, plegada. */
.bx-volante::after { left: -12px !important; width: 12px !important; }
.bx-etiqueta {
  position: fixed; z-index: 420; transform: translate(-4px, -50%); opacity: 0; pointer-events: none;
  padding: 7px 11px; border-radius: 10px !important; white-space: pre;
  background: #1D1F1C; color: #FBFBFB; font: 600 12.5px/1 Inter, system-ui, sans-serif;
  box-shadow: 0 10px 24px -12px rgba(29, 31, 28, .5); transition: opacity .12s ease, transform .16s ease;
}
.bx-etiqueta.visible { opacity: 1; transform: translate(0, -50%); }
:root[data-tema="oscuro"] .bx-etiqueta { background: #F6F2E6; color: #1D1F1C; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .bx-etiqueta { background: #F6F2E6; color: #1D1F1C; } }

/* ── Rapidez (Xavi: «hace falta rapidez… mucho más rápido») ────────────
   Animaciones cortas: lo que se pulsa responde ya y el movimiento solo
   acompaña. Al entrar en la web, el recogido se aplica sin animar. */
.sidebar, :root[data-tema="claro"] .sidebar, :root[data-tema="oscuro"] .sidebar { transition: width .26s cubic-bezier(.3, .9, .3, 1) !important; }
.sidebar .nav-group-items { transition: max-height .2s cubic-bezier(.3, .9, .3, 1), opacity .14s ease, margin .2s ease !important; }
.sidebar .nav-group-items .nav-item { transition: background .1s ease, color .1s ease, opacity .14s ease !important; }
.sidebar .nav-group.cerrado .nav-group-items .nav-item { transform: none !important; }
.sidebar .nav-group-head .nav-group-chevron { transition: transform .2s ease, opacity .12s ease !important; }
.sidebar .nav-item, .sidebar .nav-group-head, .sidebar .bx-hilo, .sidebar .bx-busca, .sidebar .sidebar-user { transition: background .1s ease, color .1s ease, border-color .1s ease, transform .1s ease !important; }
.sidebar .nav-label, .sidebar .nav-group-chevron, .sidebar .nav-badge, .sidebar .bx-busca span, .sidebar .bx-busca kbd,
.sidebar .bx-rotulo > span, .sidebar .bx-rotulo button, .sidebar .bx-hilo .bx-nombre, .sidebar .bx-hilo .bx-n,
.sidebar .bx-todos, .sidebar .bx-vacio, .sidebar .sidebar-user-text, .sidebar .sidebar-user .bx-flecha { transition: opacity .16s ease .06s, transform .16s ease .06s !important; }
.sidebar.collapsed .nav-label, .sidebar.collapsed .nav-group-chevron, .sidebar.collapsed .nav-badge, .sidebar.collapsed .bx-busca span, .sidebar.collapsed .bx-busca kbd,
.sidebar.collapsed .bx-rotulo > span, .sidebar.collapsed .bx-rotulo button, .sidebar.collapsed .bx-hilo .bx-nombre, .sidebar.collapsed .bx-hilo .bx-n,
.sidebar.collapsed .bx-todos, .sidebar.collapsed .bx-vacio, .sidebar.collapsed .sidebar-user-text, .sidebar.collapsed .sidebar-user .bx-flecha { transition: opacity .08s ease, transform .08s ease !important; }
.bx-flota { animation-duration: .14s !important; }
.bx-flota.saliendo { animation-duration: .08s !important; }
.bx-etiqueta { transition: opacity .06s ease, transform .08s ease !important; }
.sidebar.bx-sin-anim, .sidebar.bx-sin-anim * { transition: none !important; }
/* Abrir y cerrar un grupo es INSTANTÁNEO en altura: lo de debajo baja de golpe
   a su sitio y no se mueve mientras pulsas (con la altura animada, el clic
   rápido al siguiente caía en el grupo de abajo). Solo los textos aparecen
   con un fundido corto. */
.sidebar .nav-group-items { transition: opacity .12s ease !important; }
.sidebar .nav-group.cerrado .nav-group-items, .sidebar.collapsed .nav-group-items { transition: none !important; }