/* ==========================================================================
   Lexy-Bot — Shell del backoffice
   Escritorio: sidebar fija + topbar.
   Móvil (<900px): app nativa — app bar contraíble, tab bar inferior,
   menú a pantalla completa. No es el mismo layout encogido.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ESQUELETO
   -------------------------------------------------------------------------- */
.shell{
  display:flex;
  min-height:100vh;
  min-height:100dvh;
}
.shell-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.app-main{
  flex:1;
  padding:var(--s-7) var(--pad-x) var(--s-10);
}

/* --------------------------------------------------------------------------
   2. SIDEBAR (≥900px)
   -------------------------------------------------------------------------- */
.side{
  width:var(--side-w);
  flex:0 0 var(--side-w);
  position:sticky;top:0;
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  padding:var(--s-5) var(--s-4);
  /* Vidrio oscuro: deja pasar la iluminación del fondo igual que las tarjetas. */
  background:rgba(7,10,17,.55);
  background-image:var(--glass);
  border-right:1px solid var(--glass-line);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.03);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  transition:width var(--d3) var(--e),flex-basis var(--d3) var(--e);
  z-index:60;
}
/* En light no hay vidrio: superficie sólida. */
:root[data-theme="light"] .side{
  background:#fff;background-image:none;
  border-right-color:var(--line);
  box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* ---- Marca ---- */
.side-top{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-2) var(--s-3) var(--s-6);
}
.side-brand{
  display:flex;align-items:center;gap:var(--s-3);
  min-width:0;flex:1;
  border-radius:var(--r-2);
}
.side-mark{
  width:34px;height:34px;flex:0 0 auto;
  border-radius:var(--r-2);
  object-fit:contain;
}
.side-word{
  font-family:var(--f-display);
  font-size:var(--t-lg);font-weight:600;
  letter-spacing:-.025em;
  color:var(--tx-1);
  white-space:nowrap;
  overflow:hidden;
}
.side-word i{color:var(--blue);font-style:normal}

.side-collapse{
  width:36px;height:36px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:var(--r-1);
  border:1px solid var(--line);
  color:var(--tx-3);
  transition:color var(--d2) var(--e),border-color var(--d2) var(--e),transform var(--d3) var(--e);
}
.side-collapse:hover{color:var(--tx-1);border-color:var(--line-2)}

/* ---- Chip de cuenta ---- */
.side-acct{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-4);
  margin-bottom:var(--s-6);
  border-radius:var(--r-3);
  background:var(--glass-bg);
  background-image:var(--glass);
  border:1px solid var(--glass-line);
  transition:border-color var(--d2) var(--e);
}
.side-acct:hover{border-color:var(--line-2)}
:root[data-theme="light"] .side-acct{background:var(--sur-3);border-color:var(--line)}
.side-ava{
  width:34px;height:34px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:var(--r-full);
  background:var(--blue);
  color:#fff;
  font-family:var(--f-display);
  font-size:var(--t-sm);font-weight:600;
}
.side-ava.dim{background:var(--sur-3);color:var(--tx-3);border:1px solid var(--line)}
.side-acct-t{min-width:0;flex:1}
.side-acct-t .k{
  display:flex;align-items:center;gap:var(--s-2);
  font-size:var(--t-2xs);font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--tx-3);
}
.side-acct-t .v{
  display:block;
  font-family:var(--f-mono);font-size:var(--t-xs);
  color:var(--tx-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.side-acct-go{flex:0 0 auto;color:var(--tx-4);transition:color var(--d2) var(--e)}
.side-acct:hover .side-acct-go{color:var(--blue)}

/* ---- Navegación ---- */
.side-nav{flex:1;display:flex;flex-direction:column;gap:var(--s-6)}
.side-group{display:flex;flex-direction:column;gap:2px}
.side-cap{
  padding:0 var(--s-4) var(--s-3);
  font-size:var(--t-2xs);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--tx-4);
}
.side-link{
  position:relative;
  display:flex;align-items:center;gap:var(--s-4);
  min-height:44px;padding:0 var(--s-4);
  border-radius:var(--r-3);
  font-size:var(--t-base);font-weight:500;
  color:var(--tx-2);
  transition:background var(--d2) var(--e),color var(--d2) var(--e);
}
.side-link:hover{background:var(--sur-2);color:var(--tx-1)}
:root[data-theme="light"] .side-link:hover{background:var(--sur-3)}
.side-link.active{
  background:var(--blue-wash);
  color:var(--tx-1);
  font-weight:600;
}
.side-link.active::before{
  content:'';
  position:absolute;left:-var(--s-4);left:calc(var(--s-4) * -1);
  top:50%;transform:translateY(-50%);
  width:3px;height:20px;
  border-radius:0 3px 3px 0;
  background:var(--blue);
}
.side-ico{
  width:20px;height:20px;flex:0 0 auto;
  color:var(--tx-3);
  transition:color var(--d2) var(--e),transform var(--d3) var(--e-out);
}
.side-ico svg{width:100%;height:100%;stroke-width:1.7}
.side-link:hover .side-ico{color:var(--blue-hi)}
.side-link.active .side-ico{color:var(--blue)}
@media (hover:hover) and (pointer:fine){
  .side-link:hover .side-ico{transform:translateX(1px) scale(1.06)}
}
.side-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-tag{
  flex:0 0 auto;
  min-width:20px;height:20px;padding:0 6px;
  display:grid;place-items:center;
  border-radius:var(--r-full);
  background:var(--sur-3);
  border:1px solid var(--line);
  font-family:var(--f-mono);font-size:var(--t-2xs);
  color:var(--tx-3);
}
.side-tag.b{background:var(--blue-wash);border-color:rgba(0,153,255,.3);color:var(--blue-hi)}
.side-tag.live{background:none;border:0;min-width:auto;padding:0}

/* ---- Pie ---- */
.side-foot{
  padding-top:var(--s-5);
  margin-top:var(--s-5);
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:var(--s-3);
}
.side-status{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-4);
  border-radius:var(--r-3);
  background:var(--green-wash);
  border:1px solid rgba(0,226,138,.20);
}
.side-status-t b{display:block;font-size:var(--t-sm);font-weight:600;color:var(--tx-1)}
.side-status-t small{display:block;font-size:var(--t-2xs);color:var(--tx-3)}
.side-mini{
  display:flex;align-items:center;gap:var(--s-3);
  min-height:40px;padding:0 var(--s-4);
  border-radius:var(--r-2);
  font-size:var(--t-sm);color:var(--tx-3);
  transition:background var(--d2) var(--e),color var(--d2) var(--e);
}
.side-mini:hover{background:var(--sur-2);color:var(--tx-1)}
.side-mini svg{flex:0 0 auto}

/* --------------------------------------------------------------------------
   3. SIDEBAR COLAPSADA (riel) — sólo ≥900px
   -------------------------------------------------------------------------- */
@media (min-width:900px){
  :root.side-collapsed .side{
    width:var(--side-rail);
    flex-basis:var(--side-rail);
    padding-inline:var(--s-3);
  }
  /* display:none, no width:0 — un flex item de ancho 0 sigue ocupando el hueco
     y desplaza el icono. El punto "live" tampoco se salva: pasa a ser una
     marca en la esquina del icono, que es donde no empuja a nadie. */
  :root.side-collapsed .side-word,
  :root.side-collapsed .side-cap,
  :root.side-collapsed .side-label,
  :root.side-collapsed .side-acct-t,
  :root.side-collapsed .side-acct-go,
  :root.side-collapsed .side-status-t,
  :root.side-collapsed .side-tag{display:none}

  /* El estado "live" del ítem activo sigue viéndose, sin ocupar ancho. */
  :root.side-collapsed .side-link:has(.side-tag.live)::before{
    content:'';
    position:absolute;top:7px;right:7px;left:auto;
    width:7px;height:7px;
    border-radius:50%;
    background:var(--green);
    transform:none;
  }

  :root.side-collapsed .side-top{
    flex-direction:column;gap:var(--s-4);
    padding:var(--s-2) 0 var(--s-6);
  }
  :root.side-collapsed .side-brand{justify-content:center;flex:0 0 auto}
  :root.side-collapsed .side-collapse{transform:rotate(180deg)}

  /* Todos los ítems del riel miden lo mismo: 44 centrados. La tarjeta de
     cuenta medía 59 y rompía la columna. */
  :root.side-collapsed .side-acct,
  :root.side-collapsed .side-link,
  :root.side-collapsed .side-mini,
  :root.side-collapsed .side-status{
    justify-content:center;
    padding:0;
    width:44px;height:44px;
    min-height:44px;
    margin-inline:auto;
    border-radius:var(--r-3);
    overflow:hidden;
  }
  :root.side-collapsed .side-acct{margin-bottom:var(--s-5)}
  :root.side-collapsed .side-ava{width:30px;height:30px;font-size:var(--t-2xs)}
  :root.side-collapsed .side-nav{gap:var(--s-4)}
  :root.side-collapsed .side-group{gap:var(--s-2)}
  /* El indicador de activo pasa de barra lateral a fondo lleno: en 44px una
     barra pegada al borde izquierdo no se lee. */
  :root.side-collapsed .side-link.active{background:var(--blue)}
  :root.side-collapsed .side-link.active .side-ico{color:#fff}
  :root.side-collapsed .side-link.active::before{display:none}
  :root.side-collapsed .side-link:has(.side-tag.live).active::before{
    display:block;border:2px solid var(--blue);top:5px;right:5px;
  }

  /* Al recorrer con el TECLADO el riel se expande: si no, es una trampa de
     accesibilidad — se tabula a ítems sin nombre visible.

     Va con :focus-visible, no con :focus-within. Con focus-within, al hacer
     CLIC en el botón de colapsar el propio botón tomaba el foco, la barra se
     re-expandía al instante y las etiquetas seguían ocultas: quedaba ancha y
     sin texto, y hacía falta un segundo clic. El clic de ratón no dispara
     :focus-visible; el tabulador sí. */
  :root.side-collapsed .side:has(:focus-visible){
    width:var(--side-w);
    flex-basis:var(--side-w);
    padding-inline:var(--s-4);
    box-shadow:var(--sh-3);
  }
  /* Hay que devolver display Y opacity: la animación de colapso las apaga por
     separado y con restituir sólo display quedaba texto invisible. */
  :root.side-collapsed .side:has(:focus-visible) .side-word,
  :root.side-collapsed .side:has(:focus-visible) .side-cap,
  :root.side-collapsed .side:has(:focus-visible) .side-label,
  :root.side-collapsed .side:has(:focus-visible) .side-acct-t,
  :root.side-collapsed .side:has(:focus-visible) .side-acct-go,
  :root.side-collapsed .side:has(:focus-visible) .side-tag,
  :root.side-collapsed .side:has(:focus-visible) .side-status-t{
    display:block;
    opacity:1;
  }
  :root.side-collapsed .side:has(:focus-visible) .side-acct-t .k{display:flex}
  :root.side-collapsed .side:has(:focus-visible) .side-link,
  :root.side-collapsed .side:has(:focus-visible) .side-mini{
    justify-content:flex-start;padding:0 var(--s-4);width:auto;margin-inline:0;
  }
  :root.side-collapsed .side:has(:focus-visible) .side-acct,
  :root.side-collapsed .side:has(:focus-visible) .side-status{
    justify-content:flex-start;padding:var(--s-4);width:auto;height:auto;
  }
}

/* --------------------------------------------------------------------------
   4. TOPBAR (≥900px)
   -------------------------------------------------------------------------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:var(--s-5);
  height:var(--top-h);
  padding:0 var(--pad-x);
  background:color-mix(in srgb,var(--bg-0) 82%,transparent);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}
:root[data-theme="light"] .topbar{
  background:rgba(255,255,255,.86);
}
.topbar-title{
  font-size:var(--t-lg);font-weight:600;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.topbar-spacer{flex:1}
.topbar-actions{display:flex;align-items:center;gap:var(--s-3)}

/* Buscador pastilla — patrón del dashboard de referencia */
.topsearch{
  display:flex;align-items:center;gap:var(--s-3);
  width:min(320px,32vw);
  height:42px;padding:0 var(--s-5);
  border-radius:var(--r-full);
  background:var(--sur-2);
  border:1px solid var(--line);
  color:var(--tx-3);
  transition:border-color var(--d2) var(--e),background var(--d2) var(--e);
}
.topsearch:focus-within{border-color:var(--blue);background:var(--sur-3)}
.topsearch svg{flex:0 0 auto;width:16px;height:16px}
.topsearch input{
  flex:1;min-width:0;height:100%;
  background:none;border:0;outline:none;
  font-size:var(--t-sm);color:var(--tx-1);
}
.topsearch input::placeholder{color:var(--tx-4)}

/* Toggle de tema segmentado */
.theme-tog{
  display:inline-flex;
  padding:3px;
  border-radius:var(--r-full);
  background:var(--sur-2);
  border:1px solid var(--line);
}
.theme-tog button{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:var(--r-full);
  color:var(--tx-3);
  transition:background var(--d2) var(--e),color var(--d2) var(--e);
}
.theme-tog button svg{width:16px;height:16px}
.theme-tog button[aria-pressed="true"]{
  background:var(--sur-1);
  color:var(--blue);
  box-shadow:var(--sh-1);
}
:root[data-theme="light"] .theme-tog button[aria-pressed="true"]{background:#fff;color:var(--blue)}

/* Badge de red */
.net-badge{
  display:inline-flex;align-items:center;
  height:34px;
  border-radius:var(--r-full);
  border:1px solid var(--line);
  background:var(--sur-2);
  overflow:hidden;
  font-size:var(--t-xs);
}
.net-badge > span{display:inline-flex;align-items:center;gap:var(--s-2);padding:0 var(--s-4);height:100%}
.net-badge .seg-b{
  border-left:1px solid var(--line);
  background:var(--sur-3);
  color:var(--tx-3);
}

.op-chip{
  display:inline-flex;align-items:center;
  height:34px;padding:0 var(--s-4);
  border-radius:var(--r-full);
  background:var(--yellow-wash);
  border:1px solid rgba(255,214,10,.3);
  color:var(--yellow-hi);
  font-size:var(--t-xs);
}

/* --------------------------------------------------------------------------
   5. MÓVIL — la app nativa (<900px)
   -------------------------------------------------------------------------- */
.mobile-bar,.tabbar,.appmenu{display:none}

@media (max-width:899px){
  /* La sidebar de escritorio no existe en móvil. No se encoge: desaparece. */
  .side{display:none}
  .topbar{display:none}

  .shell{display:block}
  .shell-main{display:block}

  .app-main{
    padding:calc(var(--s-6) + 56px) var(--s-5) calc(var(--tabbar-h) + var(--s-9) + env(safe-area-inset-bottom));
  }

  /* ---- App bar: se contrae al bajar, vuelve al subir ---- */
  .mobile-bar{
    position:fixed;top:0;left:0;right:0;z-index:80;
    display:flex;align-items:center;gap:var(--s-4);
    height:calc(56px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) var(--s-5) 0;
    background:color-mix(in srgb,var(--bg-0) 88%,transparent);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    transition:transform var(--d3) var(--e);
    will-change:transform;
  }
  :root[data-theme="light"] .mobile-bar{background:rgba(255,255,255,.9)}
  .mobile-bar.hide{transform:translateY(-100%)}

  .mb-brand{display:flex;align-items:center;gap:var(--s-3);min-width:0}
  .mb-mark{width:28px;height:28px;flex:0 0 auto;border-radius:var(--r-1);object-fit:contain}
  .mb-title{
    font-family:var(--f-display);
    font-size:var(--t-md);font-weight:600;
    letter-spacing:-.02em;color:var(--tx-1);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .mb-spacer{flex:1}
  .mb-act{
    width:40px;height:40px;flex:0 0 auto;
    display:grid;place-items:center;
    border-radius:var(--r-full);
    background:var(--sur-2);
    border:1px solid var(--line);
    color:var(--tx-2);
  }
  .mb-act:active{transform:scale(.92)}
  .mb-act svg{width:18px;height:18px}
  .mb-act.accent{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}

  /* ---- Tab bar inferior ---- */
  .tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    display:flex;
    height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    background:color-mix(in srgb,var(--bg-0) 92%,transparent);
    border-top:1px solid var(--line);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
  }
  :root[data-theme="light"] .tabbar{background:rgba(255,255,255,.94)}

  .tabbar-i{
    position:relative;
    flex:1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;
    min-height:var(--tabbar-h);
    color:var(--tx-3);
    font-size:10px;font-weight:600;
    letter-spacing:.02em;
    transition:color var(--d2) var(--e);
    -webkit-tap-highlight-color:transparent;
  }
  .tabbar-i svg{width:22px;height:22px;stroke-width:1.7;transition:transform var(--d3) var(--e-out)}
  .tabbar-i:active svg{transform:scale(.88)}
  .tabbar-i.active{color:var(--blue)}
  .tabbar-i.active svg{transform:translateY(-1px)}
  /* Indicador animado */
  .tabbar-i::before{
    content:'';
    position:absolute;top:0;left:50%;
    width:26px;height:3px;
    border-radius:0 0 3px 3px;
    background:var(--blue);
    transform:translateX(-50%) scaleX(0);
    transition:transform var(--d3) var(--e-out);
  }
  .tabbar-i.active::before{transform:translateX(-50%) scaleX(1)}
  .tabbar-i .tb-dot{
    position:absolute;top:12px;right:calc(50% - 18px);
    width:7px;height:7px;border-radius:50%;
    background:var(--yellow);
    border:2px solid var(--bg-0);
  }

  /* ---- Menú a pantalla completa ---- */
  .appmenu{
    position:fixed;inset:0;z-index:120;
    display:flex;flex-direction:column;
    background:var(--bg-0);
    transform:translateY(100%);
    visibility:hidden;
    transition:transform var(--d4) var(--e-out),visibility 0s linear var(--d4);
    overscroll-behavior:contain;
  }
  .appmenu.open{
    transform:none;
    visibility:visible;
    transition:transform var(--d4) var(--e-out),visibility 0s;
  }
  .appmenu-head{
    display:flex;align-items:center;gap:var(--s-4);
    padding:calc(env(safe-area-inset-top) + var(--s-5)) var(--s-5) var(--s-5);
    border-bottom:1px solid var(--line);
  }
  .appmenu-head h2{font-size:var(--t-xl);flex:1}
  .appmenu-close{
    width:44px;height:44px;
    display:grid;place-items:center;
    border-radius:var(--r-full);
    background:var(--sur-2);
    border:1px solid var(--line);
    color:var(--tx-1);
  }
  .appmenu-close:active{transform:scale(.92)}
  .appmenu-close svg{width:20px;height:20px}
  .appmenu-body{
    flex:1;overflow-y:auto;
    padding:var(--s-6) var(--s-5) calc(var(--s-10) + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling:touch;
  }
  .appmenu-sec{margin-bottom:var(--s-8)}
  .appmenu-sec > .side-cap{padding-left:var(--s-2)}
  .appmenu-link{
    display:flex;align-items:center;gap:var(--s-5);
    min-height:56px;padding:0 var(--s-4);
    border-radius:var(--r-3);
    font-size:var(--t-md);font-weight:500;
    color:var(--tx-1);
    border-bottom:1px solid var(--line);
  }
  .appmenu-link:last-child{border-bottom:0}
  .appmenu-link:active{background:var(--sur-2)}
  .appmenu-link .side-ico{width:22px;height:22px;color:var(--blue)}
  .appmenu-link .grow{flex:1}
  .appmenu-link small{display:block;font-size:var(--t-xs);color:var(--tx-3);font-weight:400}
  .appmenu-go{color:var(--tx-4);flex:0 0 auto}

  /* Entrada escalonada de los ítems del menú */
  .appmenu.open .appmenu-sec{animation:menu-item var(--d4) var(--e-out) both}
  .appmenu.open .appmenu-sec:nth-child(2){animation-delay:60ms}
  .appmenu.open .appmenu-sec:nth-child(3){animation-delay:120ms}
  .appmenu.open .appmenu-sec:nth-child(4){animation-delay:180ms}
  @keyframes menu-item{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

  body.menu-open{overflow:hidden}
}

@media (max-width:899px) and (prefers-reduced-motion:reduce){
  .appmenu{transition:none}
  .appmenu.open .appmenu-sec{animation:none}
  .mobile-bar{transition:none}
}

/* Por encima de 900 el menú móvil no debe poder abrirse ni bloquear scroll */
@media (min-width:900px){
  body.menu-open{overflow:auto}
}

/* --------------------------------------------------------------------------
   6. PIE DE LA APP
   -------------------------------------------------------------------------- */
.appfoot{
  margin-top:auto;
  padding:var(--s-8) var(--pad-x) var(--s-9);
  border-top:1px solid var(--line);
  background:var(--bg-1);
}
:root[data-theme="light"] .appfoot{background:var(--sur-3)}
.appfoot-inner{
  display:flex;flex-direction:column;gap:var(--s-5);
  padding-bottom:var(--s-5);
  border-bottom:1px solid var(--line);
  margin-bottom:var(--s-5);
}
.appfoot-links{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3)}
.appfoot-links a{
  display:inline-flex;align-items:center;
  min-height:44px;padding:0 var(--s-4);
  border-radius:var(--r-2);
  font-size:var(--t-sm);color:var(--tx-3);
  transition:color var(--d2) var(--e),background var(--d2) var(--e);
}
.appfoot-links a:hover{color:var(--blue-hi);background:var(--sur-2)}
.appfoot-net{font-size:var(--t-xs);color:var(--tx-4)}
.appfoot-risk{max-width:var(--w-prose);font-size:var(--t-xs);line-height:1.7;color:var(--tx-4);margin-bottom:var(--s-4)}
.appfoot-copy{font-size:var(--t-xs);color:var(--tx-4)}
@media (min-width:768px){
  .appfoot-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--s-6)}
}
@media (max-width:899px){
  .appfoot{padding-bottom:calc(var(--tabbar-h) + var(--s-9) + env(safe-area-inset-bottom))}
}

/* --------------------------------------------------------------------------
   8. NOTIFICACIÓN / CAMPANA
   -------------------------------------------------------------------------- */
.bell{
  position:relative;
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:var(--r-full);
  background:var(--sur-2);
  border:1px solid var(--line);
  color:var(--tx-2);
  transition:border-color var(--d2) var(--e),color var(--d2) var(--e);
}
.bell:hover{border-color:var(--line-2);color:var(--tx-1)}
.bell svg{width:17px;height:17px}
.bell .dot{
  position:absolute;top:8px;right:9px;
  width:7px;height:7px;border-radius:50%;
  background:var(--yellow);
  border:2px solid var(--bg-0);
}
:root[data-theme="light"] .bell .dot{border-color:#fff}

/* ==========================================================================
   9. ICONOGRAFÍA ILUSTRADA DEL SIDEBAR
   Cada icono tiene partes con nombre y cada parte se anima distinto. La
   animación se dispara al pasar el puntero y se mantiene, más lenta, en el
   ítem activo — para que el activo se lea aunque no mires el color.
   ========================================================================== */
.side-ico{width:24px;height:24px}
.appmenu-link .side-ico{width:26px;height:26px}
.side-ico svg{overflow:visible}
.side-ico svg *{
  transform-box:fill-box;
  transform-origin:center;
}

/* -- Aguja del velocímetro (Pool engine) -- */
.ic-needle{transform-origin:12px 14.5px;transition:transform var(--d3) var(--e-out)}
.side-link:hover .ic-needle,
.tabbar-i:hover .ic-needle{transform:rotate(38deg)}
.side-link.active .ic-needle,
.tabbar-i.active .ic-needle{animation:needle-sweep 3.6s var(--e) infinite}
@keyframes needle-sweep{
  0%,100%{transform:rotate(-16deg)}
  50%    {transform:rotate(34deg)}
}

/* -- Línea del gráfico (Performance) -- */
.ic-line{
  stroke-dasharray:26;stroke-dashoffset:0;
  transition:stroke-dashoffset var(--d4) var(--e-out);
}
.side-link:hover .ic-line,
.tabbar-i:hover .ic-line{stroke-dashoffset:26}
.side-link.active .ic-line,
.tabbar-i.active .ic-line{animation:line-draw 3s var(--e) infinite}
@keyframes line-draw{
  0%  {stroke-dashoffset:26}
  55% {stroke-dashoffset:0}
  100%{stroke-dashoffset:0}
}

/* -- Nodos de la red (Network) -- */
.ic-node{transition:transform var(--d3) var(--e-spring)}
.side-link:hover .ic-node-a,
.tabbar-i:hover .ic-node-a{transform:translate(-1.6px,-1.6px)}
.side-link:hover .ic-node-b,
.tabbar-i:hover .ic-node-b{transform:translate(1.8px,0)}
.side-link:hover .ic-node-c,
.tabbar-i:hover .ic-node-c{transform:translate(-1.6px,1.6px)}
.side-link.active .ic-node-a{animation:node-a 3.2s var(--e) infinite}
.side-link.active .ic-node-b{animation:node-b 3.2s var(--e) infinite .2s}
.side-link.active .ic-node-c{animation:node-c 3.2s var(--e) infinite .4s}
@keyframes node-a{0%,100%{transform:none}50%{transform:translate(-1.4px,-1.4px)}}
@keyframes node-b{0%,100%{transform:none}50%{transform:translate(1.6px,0)}}
@keyframes node-c{0%,100%{transform:none}50%{transform:translate(-1.4px,1.4px)}}

/* -- Renglones del libro (Ledger) -- */
.ic-row{transition:transform var(--d3) var(--e-out),opacity var(--d3) var(--e)}
.side-link:hover .ic-row-1,
.tabbar-i:hover .ic-row-1{transform:translateX(2px)}
.side-link:hover .ic-row-3,
.tabbar-i:hover .ic-row-3{transform:translateX(3px)}
.side-link.active .ic-row-1{animation:row-slide 2.8s var(--e) infinite}
.side-link.active .ic-row-2{animation:row-slide 2.8s var(--e) infinite .18s}
.side-link.active .ic-row-3{animation:row-slide 2.8s var(--e) infinite .36s}
@keyframes row-slide{0%,100%{transform:none;opacity:1}50%{transform:translateX(2.4px);opacity:.6}}

/* -- Dial de la caja fuerte (Vault) -- */
.ic-dial{transform-origin:12px 12px;transition:transform var(--d4) var(--e-out)}
.side-link:hover .ic-dial,
.tabbar-i:hover .ic-dial{transform:rotate(120deg)}
.side-link.active .ic-dial{animation:dial-turn 5s linear infinite}
@keyframes dial-turn{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* -- Flecha del depósito -- */
.ic-drop{transition:transform var(--d3) var(--e-spring)}
.side-link:hover .ic-drop,
.tabbar-i:hover .ic-drop{transform:translateY(2.4px)}
.side-link.active .ic-drop{animation:drop 2.4s var(--e) infinite}
@keyframes drop{0%,100%{transform:none}40%{transform:translateY(2.6px)}}

/* -- Cabeza de la cuenta -- */
.ic-head{transition:transform var(--d3) var(--e-spring)}
.side-link:hover .ic-head,
.tabbar-i:hover .ic-head{transform:translateY(-1.4px) scale(1.06)}
.side-link.active .ic-head{animation:head-nod 3.4s var(--e) infinite}
@keyframes head-nod{0%,100%{transform:none}50%{transform:translateY(-1.2px)}}

/* -- Flechas del cambio de wallet -- */
.side-mini:hover .ic-swap{animation:swap-turn var(--d4) var(--e-out)}
@keyframes swap-turn{from{transform:rotate(0)}to{transform:rotate(180deg)}}
.ic-swap{transform-origin:12px 12px}

/* -- Cuadros de la consola del operador -- */
.ic-cell{transition:transform var(--d3) var(--e-spring)}
.side-link:hover .ic-cell-1{transform:translate(-1.4px,-1.4px)}
.side-link:hover .ic-cell-2{transform:translate(1.4px,-1.4px)}
.side-link:hover .ic-cell-3{transform:translate(-1.4px,1.4px)}
.side-link:hover .ic-cell-4{transform:translate(1.4px,1.4px)}
.side-link.active .ic-cell-1{animation:cell 3s var(--e) infinite}
.side-link.active .ic-cell-2{animation:cell 3s var(--e) infinite .1s}
.side-link.active .ic-cell-3{animation:cell 3s var(--e) infinite .2s}
.side-link.active .ic-cell-4{animation:cell 3s var(--e) infinite .3s}
@keyframes cell{0%,100%{transform:none}50%{transform:scale(.86)}}

/* -- Manecilla del ciclo -- */
.ic-hand{transform-origin:12px 12px;transition:transform var(--d4) var(--e-out)}
.side-link:hover .ic-hand{transform:rotate(90deg)}
.side-link.active .ic-hand{animation:dial-turn 6s linear infinite}

/* Nada de esto se mueve si el usuario pidió menos movimiento. */
@media (prefers-reduced-motion:reduce){
  .side-ico svg *{animation:none !important;transition:none !important}
}
/* En puntero grueso no hay hover: sólo el activo se anima. */
@media (hover:none){
  .side-link:hover .side-ico svg *{transform:none}
}

/* Chevron del ítem activo, como en la referencia. Va por CSS para no tener
   que tocar cada enlace del markup. */
.side-link::after{
  content:'';
  flex:0 0 auto;
  width:14px;height:14px;
  margin-left:var(--s-2);
  background:currentColor;
  color:var(--blue);
  opacity:0;
  transform:translateX(-4px);
  transition:opacity var(--d2) var(--e),transform var(--d2) var(--e-out);
  -webkit-mask:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 3 5 5-5 5'/%3E%3C/svg%3E");
  mask:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 3 5 5-5 5'/%3E%3C/svg%3E");
}
.side-link.active::after{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){
  .side-link:hover::after{opacity:.45;transform:none}
}
:root.side-collapsed .side-link::after{display:none}

/* ==========================================================================
   10. SIDEBAR — REDISEÑO
   Problemas del primer intento: los grupos flotaban sin anclaje, el ítem
   activo era una mancha de color sin estructura, y la marca competía con el
   botón de colapsar. Aquí todo cuelga de una retícula clara. Colores sólidos.
   ========================================================================== */

/* ---- Marca: bloque propio, separado por un filete ---- */
.side-top{
  padding:var(--s-3) var(--s-3) var(--s-5);
  margin-bottom:var(--s-5);
  border-bottom:1px solid var(--line);
}
.side-mark{
  border-radius:var(--r-2);
  background:var(--sur-3);
  padding:3px;
}
.side-word{font-size:var(--t-md);letter-spacing:-.02em}
.side-collapse{
  border-radius:var(--r-2);
  background:var(--sur-3);
  border-color:transparent;
}
.side-collapse:hover{background:var(--blue-wash);color:var(--blue-hi);border-color:transparent}

/* ---- Cuenta: ficha compacta, jerarquía dirección > estado ---- */
.side-acct{
  padding:var(--s-4);
  margin-bottom:var(--s-6);
  border-radius:var(--r-3);
  background:var(--sur-2);
  background-image:none;
  border:1px solid var(--line);
}
:root[data-theme="light"] .side-acct{background:var(--sur-3)}
.side-acct-t .k{
  order:2;
  font-size:9px;letter-spacing:.12em;
  color:var(--tx-4);
  margin-top:1px;
}
.side-acct-t{display:flex;flex-direction:column}
.side-acct-t .v{order:1;font-size:var(--t-sm);letter-spacing:-.01em}
.side-ava{border-radius:var(--r-2);font-size:var(--t-xs)}

/* ---- Grupos: rótulo pegado a su lista, no flotando ---- */
.side-nav{gap:var(--s-7)}
.side-cap{
  padding:0 var(--s-4) var(--s-4);
  font-size:9px;
  letter-spacing:.16em;
  color:var(--tx-4);
}
.side-group{gap:1px}

/* ---- Ítem: la marca de activo es una barra sólida y un fondo plano ---- */
.side-link{
  gap:var(--s-4);
  padding:0 var(--s-4);
  border-radius:var(--r-2);
  font-size:var(--t-sm);
  font-weight:500;
}
.side-link:hover{background:var(--sur-2)}
:root[data-theme="light"] .side-link:hover{background:var(--sur-3)}
.side-link.active{
  background:var(--blue-wash);
  color:var(--tx-1);
  font-weight:600;
}
/* La barra vive DENTRO del ítem: antes salía del padding y quedaba flotando. */
.side-link.active::before{
  left:0;
  width:3px;height:22px;
  border-radius:0 2px 2px 0;
  background:var(--blue);
}

/* ---- Contadores ---- */
.side-tag{
  height:19px;min-width:19px;
  border-radius:var(--r-1);
  font-size:10px;
  background:var(--sur-3);
  border-color:transparent;
}
.side-tag.b{background:var(--blue);border-color:transparent;color:#fff}

/* ---- Pie: estado plano, sin caja de color ---- */
.side-foot{
  padding-top:var(--s-4);
  margin-top:var(--s-4);
  gap:var(--s-1);
}
.side-status{
  padding:var(--s-4);
  border-radius:var(--r-2);
  background:var(--sur-2);
  border:1px solid var(--line);
  margin-bottom:var(--s-2);
}
:root[data-theme="light"] .side-status{background:var(--sur-3)}
.side-status-t b{font-size:var(--t-xs);font-weight:600}
.side-status-t small{font-size:10px;color:var(--tx-4)}
.side-mini{
  border-radius:var(--r-2);
  font-size:var(--t-sm);
  min-height:42px;
}
.side-mini .side-ico{width:17px;height:17px}

/* ==========================================================================
   11. TRANSICIÓN DEL COLAPSO
   El ancho tardaba 280ms mientras las etiquetas desaparecían en el fotograma
   cero: durante un cuarto de segundo la sidebar se veía a medio hacer y
   parecía que el clic no había funcionado. Ahora es un solo movimiento corto.
   ========================================================================== */
@media (min-width:900px){
  .side{transition:width 180ms var(--e),flex-basis 180ms var(--e),padding 180ms var(--e)}

  /* El contenido que se va, se va desvaneciendo con el ancho, no de golpe. */
  .side-word,.side-cap,.side-label,.side-acct-t,.side-acct-go,.side-status-t{
    transition:opacity 120ms var(--e);
  }
  :root.side-collapsed .side-word,
  :root.side-collapsed .side-cap,
  :root.side-collapsed .side-label,
  :root.side-collapsed .side-acct-t,
  :root.side-collapsed .side-acct-go,
  :root.side-collapsed .side-status-t{opacity:0}

  /* Y lo que queda no salta de sitio: la caja se reacomoda en el mismo tiempo. */
  .side-link,.side-mini,.side-status,.side-acct{
    transition:background var(--d2) var(--e),color var(--d2) var(--e),
               width 180ms var(--e),padding 180ms var(--e),border-radius 180ms var(--e);
  }
}
@media (prefers-reduced-motion:reduce){
  .side,.side-link,.side-mini,.side-status,.side-acct{transition:none}
}

/* ==========================================================================
   12. MARCA
   Expandida se ve el logo completo (ya trae el texto del negocio);
   comprimida, sólo el símbolo. Nunca los dos a la vez.

   El logo va como fondo CSS, no como <img>: el texto "Lexy" es blanco y sobre
   el fondo claro del modo light desaparece, así que hay que cambiar de archivo
   según el tema. Con background-image sólo se descarga la versión activa y
   funciona en todos los navegadores; el nombre accesible lo da el aria-label
   del enlace que lo contiene.
   ========================================================================== */
.side-brand{gap:0}
.side-mark{display:none}
.side-logo{
  display:block;
  width:100%;height:34px;
  background-image:url('../branding/logo-v2.png');
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
}
:root[data-theme="light"] .side-logo{background-image:url('../branding/logo-light-v2.png')}

@media (min-width:900px){
  :root.side-collapsed .side-logo{display:none}
  :root.side-collapsed .side-mark{display:block;margin-inline:auto}
  /* Al tabular, el riel se expande: vuelve el logo entero. */
  :root.side-collapsed .side:has(:focus-visible) .side-logo{display:block}
  :root.side-collapsed .side:has(:focus-visible) .side-mark{display:none}
}
/* Bajo 900px no hay riel: siempre el logo completo. */
@media (max-width:899px){
  .side-logo{display:block}
  .side-mark{display:none}
}

/* La marca del app bar móvil usa el símbolo, que ahí sí cabe. */
.mb-mark{border-radius:var(--r-1)}

/* Distintivo de la consola del operador junto al logo. */
.side-ops{
  flex:0 0 auto;
  padding:3px 7px;
  border-radius:var(--r-1);
  background:var(--yellow-wash);
  border:1px solid rgba(255,214,10,.3);
  font-family:var(--f-mono);font-size:9px;font-weight:600;
  letter-spacing:.12em;
  color:var(--yellow-hi);
}
@media (min-width:900px){
  :root.side-collapsed .side-ops{display:none}
  :root.side-collapsed .side:has(:focus-visible) .side-ops{display:block}
}

/* Los rótulos pequeños del sidebar iban en --tx-4 sobre vidrio oscuro: 2.2:1,
   por debajo de AA. Suben a --tx-3, que sobre este fondo da ~6:1. */
.side-cap,
.side-acct-t .k,
.side-status-t small{color:var(--tx-3)}

/* Últimos textos por debajo de AA en oscuro: el pie de la app y el número de
   cadena del badge. Suben un escalón de tinta. */
.appfoot-net,.appfoot-risk,.appfoot-copy{color:var(--tx-3)}
.net-badge .seg-b{color:var(--tx-2)}

/* ============================================================
   Banner de sponsor pendiente (?ref= capturado en session/cookie).
   Aparece arriba del shell en cualquier página no-admin mientras
   el user no haya bindeado el sponsor en users.referrer.
   ============================================================ */
.ref-banner{
  position:sticky;top:0;z-index:120;
  background:linear-gradient(180deg, rgba(6,182,212,.18), rgba(6,182,212,.08));
  border-bottom:1px solid rgba(6,182,212,.35);
  color:var(--tx-2);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.ref-banner-inner{
  max-width:1280px;margin:0 auto;
  display:flex;align-items:center;gap:14px;
  padding:10px 22px;
  font-size:13.5px;
}
.ref-banner-ico{color:var(--cyan,#06b6d4);display:inline-flex;flex:0 0 auto}
.ref-banner-ico .ic-edge{stroke-dasharray:36;stroke-dashoffset:36;animation:refbanner 4.2s ease-in-out infinite}
.ref-banner-ico .ic-edge-b{animation-delay:.4s}
@keyframes refbanner{0%,100%{stroke-dashoffset:36}45%,55%{stroke-dashoffset:0}}
.ref-banner-txt{flex:1 1 auto;min-width:0;color:var(--tx-2)}
.ref-banner-txt b{color:var(--tx-1);font-weight:600}
.ref-banner-cta{flex:0 0 auto}
.ref-banner-x{
  flex:0 0 auto;
  width:28px;height:28px;border-radius:8px;
  background:transparent;border:1px solid transparent;
  color:var(--tx-3);font-size:20px;line-height:1;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.ref-banner-x:hover{background:rgba(255,255,255,.06);color:var(--tx-1);border-color:rgba(255,255,255,.12)}
.ref-banner[data-dismissed="1"]{display:none}
@media (max-width:720px){
  /* Una sola fila: el banner es un aviso, no puede comerse la pantalla. */
  .ref-banner-inner{padding:6px 12px;gap:8px;font-size:12px;flex-wrap:nowrap}
  .ref-banner-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ref-banner-long{display:none}
  .ref-banner-cta{order:0;width:auto;padding:4px 10px;font-size:12px;white-space:nowrap}
  .ref-banner-x{width:24px;height:24px;font-size:17px}
}