/* Capa shell: riel de escritorio (03-04). Solo tokens ya medidos AA en tokens.css (secciones 3-5).
   Riel fijo de 64 px con degradado azul→teal, logo, botones de 44 px con insignia.
   Desde 1024 px; por debajo lo reemplaza el cajón de 03-06. Lo que hereda de legado (a, listas) se neutraliza aquí. */
@layer shell{
  .riel{position:sticky;top:0;z-index:50;display:flex;flex-direction:column;align-items:center;gap:var(--esp-2);width:var(--riel-ancho);height:100vh;height:100dvh;padding:var(--esp-3) 0;background:var(--riel-fondo);color:var(--riel-tx);overflow:visible}

  /* Logo, botones y filas de los flyouts: objetivos de 44 × 44 px como mínimo (2.5.5, 06-02). */
  .riel-logo{display:grid;place-items:center;width:44px;height:44px;margin-bottom:var(--esp-2);border-radius:var(--r-md);background:var(--sup);text-decoration:none;flex:none}
  .riel-logo img{display:block;width:32px;height:32px}
  .riel-logo:focus-visible{outline:var(--foco-ancho) solid var(--riel-foco);outline-offset:var(--foco-sep)}

  .riel-lista{display:flex;flex-direction:column;align-items:center;gap:var(--esp-1);width:100%;margin:0;padding:0;list-style:none}
  .riel-abajo{margin-top:auto}
  .riel-item{position:relative;display:flex;justify-content:center;width:100%;margin:0;padding:0}

  .riel-boton{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-lg);color:var(--riel-icono);text-decoration:none;background:transparent}
  .riel-boton:hover,.riel-boton:visited{color:var(--riel-icono);text-decoration:none}
  .riel-item:hover > .riel-boton,
  .riel-item:focus-within > .riel-boton{background:var(--riel-hover)}
  .riel-boton[aria-current],
  .riel-item:hover > .riel-boton[aria-current],
  .riel-item:focus-within > .riel-boton[aria-current]{background:var(--riel-activo)}
  .riel-boton[aria-current]::before{content:"";position:absolute;left:calc((44px - var(--riel-ancho)) / 2);top:var(--esp-2);bottom:var(--esp-2);width:4px;border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--riel-filete)}
  .riel-boton:focus-visible{outline:var(--foco-ancho) solid var(--riel-foco);outline-offset:var(--foco-sep)}

  .riel-insignia{position:absolute;top:-2px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--insignia-fondo);color:var(--insignia-tx);box-shadow:0 0 0 2px var(--insignia-anillo);font-size:11px;font-weight:700;line-height:18px;text-align:center;pointer-events:none}

  /* Flyouts: solo CSS. El riel-fly arranca en el borde del ítem (left:100%) y su padding-left es el puente:
     esa franja es caja del flyout, así que el puntero no sale del ítem al cruzarla. Nunca margin-left. */
  .riel-fly{display:none;position:absolute;left:100%;top:0;z-index:60;padding-left:var(--esp-2)}
  .riel-item:hover > .riel-fly,
  .riel-item:focus-within > .riel-fly,
  .riel-fila-sub:hover > .riel-fly,
  .riel-fila-sub:focus-within > .riel-fly{display:block}
  .riel-fly-abajo{top:auto;bottom:0}
  .riel-fly-2{top:calc(-1 * var(--esp-1) - 1px)}
  .riel-fly-abajo .riel-fly-2{top:auto;bottom:calc(-1 * var(--esp-1) - 1px)}

  .riel-tarjeta{min-width:210px;padding:var(--esp-1);border:1px solid var(--flyout-borde);border-radius:var(--r-lg);background:var(--flyout-fondo);box-shadow:var(--flyout-sombra);color:var(--flyout-tx)}
  .riel-rotulo{margin:var(--esp-1) var(--esp-2) var(--esp-1);padding-bottom:var(--esp-1);border-bottom:1px solid var(--flyout-borde);color:var(--flyout-rotulo);font-size:var(--t-chico);font-weight:600;line-height:1.3;white-space:nowrap}
  .riel-filas{margin:0;padding:0;list-style:none}
  .riel-fila{position:relative;margin:0;padding:0}
  .riel-fila > a{display:flex;align-items:center;gap:var(--esp-2);min-height:44px;padding:var(--esp-2) var(--esp-3) var(--esp-2) var(--esp-2);border-radius:var(--r-md);color:var(--flyout-tx);font-size:var(--t-base);font-weight:400;line-height:1.3;text-decoration:none;white-space:nowrap}
  .riel-fila > a:visited{color:var(--flyout-tx)}
  .riel-fila > a:hover,
  .riel-fila > a:focus-visible,
  .riel-fila-sub:hover > a,
  .riel-fila-sub:focus-within > a{background:var(--flyout-hover);color:var(--flyout-hover-tx);text-decoration:none}
  .riel-fila > a[aria-current]{background:var(--flyout-hover);color:var(--flyout-hover-tx);font-weight:700}
  .riel-fila > a:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:calc(-1 * var(--foco-ancho))}
  .riel-fila-texto{flex:1;min-width:0}
  .riel-cuenta{flex:none;min-width:20px;padding:0 7px;border-radius:var(--r-pill);background:var(--cuenta-fondo);color:var(--cuenta-tx);font-size:11px;font-weight:700;line-height:18px;text-align:center}
  .riel-chev{flex:none;margin-right:calc(-1 * var(--esp-1))}

  /* Nodo sin hijos: etiqueta con el nombre (aria-hidden: el nombre accesible ya está en el botón).
     Mismo puente que el flyout: el ::before cubre la franja entre el borde del ítem y la tarjeta. */
  .riel-etiqueta{display:none;position:absolute;left:calc(100% + var(--esp-2));top:50%;z-index:60;transform:translateY(-50%);padding:var(--esp-1) var(--esp-3);border:1px solid var(--flyout-borde);border-radius:var(--r-md);background:var(--flyout-fondo);box-shadow:var(--flyout-sombra);color:var(--flyout-tx);font-size:var(--t-base);font-weight:600;line-height:1.3;white-space:nowrap}
  .riel-etiqueta::before{content:"";position:absolute;right:100%;top:0;bottom:0;width:var(--esp-2)}
  .riel-item:hover > .riel-etiqueta,
  .riel-item:focus-within > .riel-etiqueta{display:block}

  /* Escape (navegacion.js) descarta lo que abrió el hover o el foco sin moverlos (1.4.13): gana a la apertura por ir después. */
  .riel-item.riel-cerrado > .riel-fly,
  .riel-item.riel-cerrado > .riel-etiqueta,
  .riel-fila-sub.riel-cerrado > .riel-fly{display:none}

  @media (max-width: 1023.98px){
    .riel{display:none}
  }
}