/* ============================================================
   HRZN · SIDEBAR UNIFICADO
   ============================================================
   El sidebar cambiaba segun la pagina. Habia dos generaciones:

   · adoption / score / score-config / bridge / index / finops
     cargaban `horizon-2050-shell.css`, que dibuja un circulo hueco
     como marca de cada item (`.side-link::before`) y no tiene iconos.
   · users / insights / automations / settings cargaban
     `css/horizon-pages.css`, que si trae los iconos SVG.

   Ninguna hoja existente la cargan las diez paginas, asi que la
   navegacion unificada vive aca y esta hoja se enlaza ULTIMA en todas.

   Reglas del sistema que fija esta hoja:
   · cada seccion de primer nivel lleva su icono de trazo (21px).
   · el grupo "AI" es lo unico colapsable, y sus hijos se marcan con
     un punto, no con un icono: el punto dice "esto es una subdivision".
   · nadie queda con el circulo hueco de relleno.

   Especificidad: las reglas del shell son `.bridge-page .side-link`
   (0,2,0). Aca se usa `.sidebar .side-link`, que empata, y esta hoja
   carga despues, asi que gana. No hace falta ningun !important.
   ============================================================ */

/* ---------- iconos ----------------------------------------------------
   `horizon-skin.css` y `horizon-pages.css` ya definen .hz-ico, pero
   bridge / score / score-config / adoption no cargan ninguna de las dos.
   Se define aca para que las diez paginas tengan la misma familia. */

.sidebar .hz-ico-slot {
  display: block;
  line-height: 0;
  color: #D4E6FF;
}

.sidebar .hz-ico {
  display: block;
  width: 21px;
  height: 21px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- items de primer nivel ---------------------------------- */

.sidebar .side-link {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--hz-r-input, 10px);
}

/* se va el circulo hueco: ahora la marca del item es su icono */
.sidebar .side-link::before { content: none; display: none; }

.sidebar .side-link b {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}

.sidebar .side-link.is-active .hz-ico-slot { color: #fff; }

/* ---------- grupo colapsable (AI) ---------------------------------- */

.sidebar .side-group > summary {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 13px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--hz-r-input, 10px);
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.sidebar .side-group > summary::-webkit-details-marker { display: none; }
.sidebar .side-group > summary::before { content: none; display: none; }

.sidebar .side-group > summary b {
  font-size: 13px;
  font-weight: 600;
}

.sidebar .side-group.is-active > summary .hz-ico-slot { color: #fff; }

/* el chevron queda como tercera columna y gira al abrirse */
.sidebar .side-group > summary::after {
  content: "\203A";
  justify-self: end;
  color: rgba(231, 241, 255, .62);
  font-size: 19px;
  font-weight: 500;
  transition: transform .18s ease;
}

.sidebar .side-group[open] > summary::after { transform: rotate(90deg); }

/* ---------- subdivisiones: punto en vez de icono -------------------
   El punto va como primera columna del propio pill, no flotando sobre
   la guia vertical: asi entra en el fondo del hover y del estado
   activo, y no se despega si cambia el padding del contenedor. */

.sidebar .side-sublink {
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 11px;
  border-radius: var(--hz-r-tag, 8px);
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none;
  /* Estos <a> no tenian NINGUNA declaracion de color: heredaban el azul
     de link por defecto del navegador (#0000EE) sobre fondo navy. No se
     notaba porque el submenu estaba escondido; al salir como panel
     quedo a la vista. Se usa el mismo blanco que los links del rail
     para que el panel se lea igual que el resto del menu. */
  color: rgba(255, 255, 255, .9);
}

.sidebar .side-sublink:hover,
.sidebar .side-sublink:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .10);
}

.sidebar .side-sublink.is-active { color: #fff; }

/* el punto hereda de currentColor, asi que sigue al texto solo */
.sidebar .side-sublink::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

.sidebar .side-sublink.is-active::before { opacity: 1; }

/* ---------- sidebar angosto ---------------------------------------
   Debajo de 1180px el shell colapsa a 76px y esconde las etiquetas.
   El icono tiene que quedar centrado y el grupo, cerrado. */

@media (max-width: 1180px) {
  .sidebar .side-link,
  .sidebar .side-group > summary {
    grid-template-columns: 21px;
    justify-content: center;
    gap: 0;
    padding: 0;
  }
  .sidebar .side-link b,
  .sidebar .side-group > summary b,
  .sidebar .side-group > summary::after,
  .sidebar .side-subnav { display: none; }
}

/* ---------- grupo AI en el rail angosto ----------------------------
   Abajo de 1181 el rail colapsa a 76px y el bloque de arriba esconde el
   submenu y el chevron. El <details> seguia abriendose sin mostrar nada:
   el grupo AI quedaba sin salida. Aca el submenu vuelve como flyout al
   costado del rail.

   El sidebar puede dejar de recortar a esta altura porque la escena del
   faro ya esta en display:none (cloudbeach.css, mismo breakpoint), asi
   que no hay nada mas que se escape.

   Arriba de 880 solamente: abajo, el shell manda todo el sidebar fuera
   de pantalla y el flyout no tendria de donde colgar. */
@media (max-width: 1180px) and (min-width: 881px) {
  .sidebar { overflow: visible; }

  /* El grupo se estira los mismos 10px que separan al panel del rail,
     sin mover el icono: asi la zona de hover llega hasta el panel y no
     queda un hueco donde el mouse lo pierde en el camino. Por eso el
     panel pasa de `calc(100% + 10px)` a `left:100%` — el offset ahora
     lo da el padding del grupo y no el left, y el resultado visual es
     el mismo de antes. */
  .sidebar .side-group {
    position: relative;
    padding-right: 10px;
    margin-right: -10px;
  }

  /* el contenido de un <details> cerrado, disponible solo en hover */
  .sidebar .side-group:hover::details-content { content-visibility: visible; }

  .sidebar .side-group:hover > .side-subnav,
  .sidebar .side-group[open] > .side-subnav {
    display: grid;
    position: absolute;
    left: 100%;
    top: -6px;
    z-index: 40;
    min-width: 188px;
    gap: 2px;
    margin: 0;
    padding: 7px;
    border-left: 0;
    border-radius: 12px;
    background: #072A58;
    box-shadow: 0 18px 46px rgba(4, 24, 56, .42);
  }

  /* la punta que lo ata al icono del rail */
  .sidebar .side-group:hover > .side-subnav::before,
  .sidebar .side-group[open] > .side-subnav::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 17px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: inherit;
  }

  .sidebar .side-group:hover > .side-subnav .side-sublink,
  .sidebar .side-group[open] > .side-subnav .side-sublink { white-space: nowrap; }
}

/* ---------- grupo AI como flyout tambien a ancho completo ----------
   Antes el submenu se desplegaba como acordeon hacia abajo y empujaba
   la lista. Ahora sale como panel al costado, pegado al borde del
   rail: el patron de WordPress. El flyout al costado ya existia para
   el rail angosto (bloque de arriba); esto lo extiende al ancho
   completo y le agrega el disparo por HOVER.

   Como se abre en hover sin JS: un <details> cerrado no renderiza su
   contenido, y eso no se puede vencer estilando el hijo — el motor lo
   esconde en ::details-content. Ahi va el content-visibility. Medido:
   el submenu pasa de 0x0 a 188x116.

   Dos disparos a proposito: :hover para el mouse, [open] para teclado
   y click (queda fijado). Y va pegado al borde, sin separacion, para
   que no haya zona muerta entre el item y el panel al mover el mouse.

   El sidebar tiene que dejar de recortar para que el panel se vea. A
   este ancho la escena del faro SI esta visible (a diferencia del rail
   angosto, donde esta en display:none), asi que se la recorta a ella.
   Medido con el sidebar sin recorte: 0 descendientes se escapan del
   borde, y los items del nav no se corren en hover. */

@media (min-width: 1181px) {
  .sidebar { overflow: visible !important; }
  .lighthouse-scene { overflow: hidden; }   /* los haces estan animados: se recorta la escena, no el sidebar */

  /* El grupo se estira 16px a la derecha —lo que el .side-nav tiene de
     padding— sin mover el summary: el padding lo empuja adentro y el
     margen negativo saca el borde. Resuelve dos cosas de una:
       · `left:100%` cae en 220, el borde real del rail, y no 16px
         adentro. Importa porque los dos azules difieren en 34 de
         distancia RGB: el solape se veia como una banda mas clara.
       · la zona de hover llega hasta el borde, asi que no queda un
         hueco de 16px donde el mouse pierde el hover camino al panel. */
  .sidebar .side-group {
    position: relative;
    padding-right: 16px;
    margin-right: -16px;
  }

  /* el contenido de un <details> cerrado, disponible solo en hover */
  .sidebar .side-group:hover::details-content { content-visibility: visible; }

  .sidebar .side-group:hover > .side-subnav,
  .sidebar .side-group[open] > .side-subnav {
    display: grid;
    position: absolute;
    left: 100%;                /* pegado al borde: sin zona muerta */
    top: -7px;
    z-index: 40;
    min-width: 196px;
    gap: 2px;
    margin: 0;
    padding: 8px;
    border-left: 0;
    border-radius: 0 14px 14px 0;
    background: #072A58;
    box-shadow: 18px 20px 48px rgba(4, 24, 56, .40);
  }

  .sidebar .side-group:hover > .side-subnav .side-sublink,
  .sidebar .side-group[open] > .side-subnav .side-sublink {
    white-space: nowrap;
    min-height: 36px;
  }

  /* el item padre queda marcado mientras el panel esta afuera */
  .sidebar .side-group:hover > summary { background: rgba(255,255,255,.08); }
}

/* ---------- redondeo del rail ------------------------------------
   Estaba a ras y a 90 grados (x=0, 220x900, radio 0). Se redondean
   solo las esquinas de la DERECHA, que es el lado que da contra el
   contenido: es el borde que se lee como duro. Izquierda, arriba y
   abajo quedan a ras del viewport, asi que redondearlas solo abriria
   muescas contra el borde de la pantalla.

   El radio no toca al flyout del grupo AI: la curva vive en los
   primeros y ultimos 22px de alto, y el panel sale a media lista. */
.sidebar {
  border-top-right-radius: 22px;
  border-bottom-right-radius: 22px;
}

/* ============================================================
   SIDEBAR COLAPSABLE
   ============================================================
   El estado vive en <html data-sidebar="expanded|collapsed"> para
   que todo el shell cambie en conjunto y no haya saltos entre paginas.
   El script compartido agrega el control, conserva la preferencia y
   mantiene nombres accesibles aunque visualmente queden solo iconos.
   ============================================================ */

.app-shell,
.sidebar {
  transition:
    grid-template-columns .26s cubic-bezier(.2,.75,.2,1),
    width .26s cubic-bezier(.2,.75,.2,1),
    border-radius .26s ease;
}

.sidebar-toggle {
  position: relative;
  z-index: 12;
  width: calc(100% - 32px);
  min-height: 34px;
  margin: -7px 16px 5px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  border: 1px solid rgba(174, 210, 255, .18);
  border-radius: 10px;
  background: rgba(255, 255, 255, .055);
  color: rgba(229, 240, 255, .82);
  cursor: pointer;
  font: 600 10.5px/1 Poppins, sans-serif;
  letter-spacing: .01em;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, .11);
  border-color: rgba(174, 210, 255, .34);
  color: #fff;
}

.sidebar-toggle:focus-visible {
  outline: 3px solid rgba(73, 151, 255, .48);
  outline-offset: 2px;
}

.sidebar-toggle-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  flex: none;
  transition: transform .24s cubic-bezier(.2,.75,.2,1);
}

.sidebar-toggle-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 881px) {
  html[data-sidebar="expanded"] .app-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  html[data-sidebar="expanded"] .sidebar { width: 220px; }

  /* Aun entre 881 y 1180px, una expansion elegida por la persona debe
     restaurar el rail completo en vez de conservar reglas responsive
     que ocultaban las etiquetas automaticamente. */
  html[data-sidebar="expanded"] .brand {
    height: 111px;
    align-items: stretch;
    padding: 0 40px;
  }

  html[data-sidebar="expanded"] .brand span {
    font-size: 30px;
    transform: scaleX(1.08);
    transform-origin: left;
  }

  html[data-sidebar="expanded"] .brand span::before { display: block; }

  html[data-sidebar="expanded"] .brand small {
    display: block;
    font-size: 12px;
    letter-spacing: .37em;
  }

  html[data-sidebar="expanded"] .sidebar .side-link {
    grid-template-columns: 21px minmax(0, 1fr);
    justify-content: stretch;
    gap: 13px;
    padding: 0 14px;
  }

  html[data-sidebar="expanded"] .sidebar .side-group > summary {
    grid-template-columns: 21px minmax(0, 1fr) 18px;
    justify-content: stretch;
    gap: 13px;
    padding: 0 14px;
  }

  html[data-sidebar="expanded"] .sidebar .side-link b,
  html[data-sidebar="expanded"] .sidebar .side-group > summary b,
  html[data-sidebar="expanded"] .sidebar .side-group > summary::after { display: block; }

  html[data-sidebar="expanded"] .side-bottom {
    left: 16px;
    right: 16px;
  }

  /* La regla de .company-card que estaba aca se fue entera con el
     componente: era suya y de nadie mas. */

  html[data-sidebar="expanded"] .profile-card {
    display: grid;
    grid-template-columns: 40px 1fr 18px;
    justify-content: stretch;
    padding: 9px 8px;
  }

  /* El :not() NO es decorativo. Este selector apunta al span que
     envuelve <b> y <small>, pero .profile-avatar tambien es un span
     dentro de .profile-card, asi que tambien lo alcanzaba -- y con
     mas especificidad que `.profile-avatar` (0,1,0), que lo declara
     `display: grid; place-items: center`.

     Resultado: el avatar pasaba a `display: block`, `place-items`
     quedaba inerte y las iniciales caian a la esquina superior
     izquierda en lugar de ir al centro del circulo. Medido: offset
     de -10.8px en X y en Y sobre un circulo de 40px.

     Se ve en las paginas que NO cargan hrzn-color.css (adoption,
     score, score-config, bridge, bridge-classic): ahi nada volvia a
     poner el display en su lugar.

     Mismo patron que usa la regla de `collapsed` mas abajo. */
  html[data-sidebar="expanded"] .profile-card span:not(.profile-avatar) { display: block; }

  html[data-sidebar="expanded"] .support-link {
    justify-content: flex-start;
    padding: 0 16px;
    font-size: 12px;
  }

  html[data-sidebar="collapsed"] .app-shell {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  html[data-sidebar="collapsed"] .sidebar {
    width: 76px;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
    overflow: visible !important;
  }

  html[data-sidebar="collapsed"] .brand {
    height: 86px;
    padding: 0;
    align-items: center;
  }

  html[data-sidebar="collapsed"] .brand span {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(174, 210, 255, .25);
    border-radius: 11px;
    background: rgba(255, 255, 255, .06);
    font-size: 0;
    transform: none;
  }

  html[data-sidebar="collapsed"] .brand span::before { display: none; }

  html[data-sidebar="collapsed"] .brand span::after {
    content: "H";
    color: #fff;
    font: 700 19px/1 Poppins, sans-serif;
    letter-spacing: -.04em;
  }

  html[data-sidebar="collapsed"] .brand small { display: none; }

  html[data-sidebar="collapsed"] .sidebar-toggle {
    width: 44px;
    min-height: 36px;
    justify-content: center;
    margin: 0 auto 8px;
    padding: 0;
  }

  html[data-sidebar="collapsed"] .sidebar-toggle-icon { transform: rotate(180deg); }
  html[data-sidebar="collapsed"] .sidebar-toggle-label { display: none; }

  html[data-sidebar="collapsed"] .side-nav { padding-inline: 8px; }

  html[data-sidebar="collapsed"] .sidebar .side-link,
  html[data-sidebar="collapsed"] .sidebar .side-group > summary {
    grid-template-columns: 21px;
    justify-content: center;
    gap: 0;
    padding: 0;
  }

  html[data-sidebar="collapsed"] .sidebar .side-link b,
  html[data-sidebar="collapsed"] .sidebar .side-group > summary b,
  html[data-sidebar="collapsed"] .sidebar .side-group > summary::after { display: none; }

  html[data-sidebar="collapsed"] .lighthouse-scene { display: none; }

  html[data-sidebar="collapsed"] .side-bottom {
    left: 8px;
    right: 8px;
  }

  html[data-sidebar="collapsed"] .profile-card {
    display: flex;
    justify-content: center;
    padding: 0;
  }

  html[data-sidebar="collapsed"] .profile-card span:not(.profile-avatar) { display: none; }

  html[data-sidebar="collapsed"] .support-link {
    justify-content: center;
    padding: 0;
    font-size: 0;
  }

  /* Etiquetas de contexto para los iconos del rail angosto. */
  html[data-sidebar="collapsed"] .sidebar .side-link[data-sidebar-label] {
    position: relative;
  }

  html[data-sidebar="collapsed"] .sidebar .side-link[data-sidebar-label]::before {
    content: attr(data-sidebar-label);
    position: absolute;
    left: calc(100% + 13px);
    top: 50%;
    z-index: 70;
    transform: translate(-5px, -50%);
    width: max-content;
    max-width: 190px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #061d43;
    color: #fff;
    box-shadow: 0 10px 28px rgba(2, 20, 47, .28);
    font: 600 11px/1 Poppins, sans-serif;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
  }

  html[data-sidebar="collapsed"] .sidebar .side-link[data-sidebar-label]:hover::before,
  html[data-sidebar="collapsed"] .sidebar .side-link[data-sidebar-label]:focus-visible::before {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

@media (max-width: 880px) {
  .sidebar-toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell,
  .sidebar,
  .sidebar-toggle-icon { transition: none; }
}