/* ════════════════════════════════════════════════════════════════════════
   SIGRE / Lechuza 360 — Riel de navegación (Etapa A del rediseño 2026-10).
   Reemplaza el sidebar acordeón por un RIEL de grupos + panel flyout, generado
   desde App\Navigation\NavigationRegistry (fuente única; ver nav_rail.html.twig).
   Usa los tokens de sigre-ds.css (--ds-*). Convive con base.html.twig.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --nav-rail-w: 64px;
  --nav-fly-w: 268px;
  --nav-brand: var(--ds-brand-primary, #1f3a73);
  --nav-brand-2: var(--ds-brand-primary-hover, #16295a);
  --nav-accent: #f6b73c;            /* chispa cálida (ojo de lechuza) para el activo */
}

/* El shell existente es flex: el aside toma su ancho, el contenido llena el resto. */
.sigre-nav{
  display:flex; align-items:stretch; position:relative;
  background:transparent; border:0;
  z-index: 40;
}
.sigre-nav *{ box-sizing:border-box; }

/* ── Riel ── */
.sigre-nav .rail{
  width:var(--nav-rail-w); flex:0 0 var(--nav-rail-w);
  background:linear-gradient(180deg, var(--nav-brand), var(--nav-brand-2));
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 0 12px; overflow:visible;
}
.sigre-nav .rail-logo{
  width:38px; height:38px; border-radius:11px; margin-bottom:6px; flex:none;
  display:grid; place-items:center; color:#fff; text-decoration:none;
  background:linear-gradient(135deg,#f59e0b,#fbbf24);
  font-family:var(--ds-font-sans); font-weight:800; font-size:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.sigre-nav .rail-sep{ width:28px; height:1px; background:rgba(255,255,255,.18); margin:3px 0; flex:none; }
.sigre-nav .rail-grow{ flex:1 1 auto; }

.sigre-nav .rail-ic{
  position:relative; width:46px; height:44px; flex:none;
  border:0; background:transparent; color:#c3d3e8; cursor:pointer;
  border-radius:11px; display:grid; place-items:center; font-size:19px;
  transition:background .14s ease, color .14s ease;
}
.sigre-nav .rail-ic:hover,
.sigre-nav .rail-ic:focus-visible{ background:rgba(255,255,255,.12); color:#fff; outline:none; }
.sigre-nav .rail-ic.active{ background:rgba(255,255,255,.16); color:#fff; }
.sigre-nav .rail-ic.active::before{
  content:""; position:absolute; left:-9px; top:10px; width:4px; height:24px;
  border-radius:0 3px 3px 0; background:var(--nav-accent);
}
.sigre-nav .rail-ic .rail-dot{
  position:absolute; top:7px; right:8px; width:8px; height:8px; border-radius:50%;
  background:#f97316; box-shadow:0 0 0 2px var(--nav-brand);
}
.sigre-nav .rail-ic.fav-ic{ color:var(--nav-accent); }

/* ── Flyout (panel del grupo) ── */
.sigre-nav .flyout{
  position:absolute; left:var(--nav-rail-w); top:0; bottom:0; width:var(--nav-fly-w);
  background:var(--ds-bg-surface,#fff); border-right:1px solid var(--ds-border,#e2e8f0);
  box-shadow:14px 0 34px rgba(15,23,42,.14);
  display:flex; flex-direction:column; min-height:0;
  opacity:0; transform:translateX(-8px); pointer-events:none;
  transition:opacity .14s ease, transform .14s ease;
}
.sigre-nav.fly-open .flyout{ opacity:1; transform:none; pointer-events:auto; }

/* Fijado: el panel entra en flujo (reserva ancho y empuja el contenido, como hoy). */
body.nav-pinned .sigre-nav .flyout{
  position:static; opacity:1; transform:none; pointer-events:auto; box-shadow:none;
}

.sigre-nav .fly-panel{ display:none; flex-direction:column; min-height:0; flex:1; }
.sigre-nav .fly-panel.show{ display:flex; }

.sigre-nav .fly-head{
  padding:13px 15px 10px; border-bottom:1px solid var(--ds-border,#e2e8f0);
  display:flex; align-items:flex-start; gap:8px;
}
.sigre-nav .fly-head .fh-ic{ color:var(--nav-brand); font-size:16px; margin-top:1px; }
.sigre-nav .fly-head .fh-t{ font-weight:650; font-size:14px; color:var(--ds-text-strong,#0f172a); line-height:1.2; }
.sigre-nav .fly-head .fh-s{ font-size:11px; color:var(--ds-text-muted,#64748b); margin-top:2px; display:block; }
.sigre-nav .fly-head .fh-pin{
  margin-left:auto; flex:none; border:1px solid var(--ds-border,#e2e8f0); background:var(--ds-bg,#f8fafc);
  color:var(--ds-text-soft,#475569); border-radius:7px; padding:3px 7px; font-size:11px; font-weight:600;
  cursor:pointer; display:inline-flex; align-items:center; gap:4px;
}
.sigre-nav .fly-head .fh-pin:hover{ border-color:var(--ds-border-strong,#cbd5e1); color:var(--ds-text,#1e293b); }
body.nav-pinned .sigre-nav .fh-pin{ background:var(--ds-brand-primary-soft,#e6eef7); color:var(--nav-brand); border-color:transparent; }

.sigre-nav .fly-scroll{ overflow-y:auto; padding:7px 8px 12px; flex:1; min-height:0; }
.sigre-nav .fly-it{
  display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:8px;
  color:var(--ds-text-soft,#475569); text-decoration:none; font-size:13.5px; font-weight:500;
  position:relative; transition:background .12s ease, color .12s ease;
}
.sigre-nav .fly-it > i.fi-ic{ width:18px; text-align:center; color:var(--ds-text-muted,#64748b); font-size:15px; flex:none; }
.sigre-nav .fly-it .fi-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sigre-nav .fly-it:hover{ background:var(--ds-bg-subtle,#f1f5f9); color:var(--ds-text-strong,#0f172a); }
.sigre-nav .fly-it.active{ background:var(--ds-brand-primary-soft,#e6eef7); color:var(--nav-brand); font-weight:650; box-shadow:inset 3px 0 0 var(--nav-brand); }
.sigre-nav .fly-it.active > i.fi-ic{ color:var(--nav-brand); }
.sigre-nav .fly-it .fi-cnt{
  margin-left:auto; font-size:10.5px; font-weight:700; background:#ffedd5; color:var(--ds-danger-600,#b91c1c);
  border-radius:999px; padding:0 7px; flex:none;
}
.sigre-nav .fly-star{
  margin-left:auto; flex:none; border:0; background:transparent; color:#cbd5e1; cursor:pointer;
  font-size:13px; padding:2px 3px; line-height:1; border-radius:6px;
}
.sigre-nav .fly-it .fi-cnt + .fly-star{ margin-left:8px; }
.sigre-nav .fly-star:hover{ color:#94a3b8; }
.sigre-nav .fly-star.on{ color:var(--ds-warning-500,#f59e0b); }
.sigre-nav .fly-sec{ font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ds-text-muted,#94a3b8); padding:10px 12px 4px; }
.sigre-nav .fly-empty{ padding:16px 14px; color:var(--ds-text-muted,#94a3b8); font-size:12.5px; }

/* ── Móvil: el riel entra como drawer off-canvas (reusa #sigre-backdrop + .open) ── */
@media (max-width: 768px){
  .sigre-nav{
    position:fixed; top:0; bottom:0; left:0; z-index:1045;
    transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:0 20px 50px rgba(15,23,42,.3);
  }
  .sigre-nav.open{ transform:none; }
  .sigre-nav .flyout{ position:static; opacity:1; transform:none; pointer-events:auto; width:240px; box-shadow:none; }
  body.nav-pinned .sigre-nav .flyout{ position:static; }
}
@media (prefers-reduced-motion: reduce){
  .sigre-nav, .sigre-nav .flyout, .sigre-nav .rail-ic{ transition:none !important; }
}