/* Riel de plataformas (impeccable + Taste + ux-designer). Claro, sin la sombra naranja; en reposo es un riel de
   64 px sólo con logos (lo que ocupa hoy); al pasar el mouse o al llegar con el teclado se abre encima del tablero
   (no lo empuja) a 236 px con el nombre de cada plataforma y la tienda que la vende. El General arriba, una línea, y
   las plataformas; la elegida sobre gris con la marca naranja a la izquierda. Escritorio sólo: en celular sigue la
   tira horizontal de siempre. */
@media (min-width:901px) {
  html body.con-riel .riel-plataformas {
    width:64px; align-items:stretch; gap:10px; padding:14px 8px 14px; overflow:hidden;
    background:#fbfbfc !important; border-right:1px solid #e3e6ea !important; border-top:0 !important; box-shadow:none !important; clip-path:none !important;
    transition:width .2s cubic-bezier(.22,1,.36,1) .12s, box-shadow .2s ease .12s;
  }
  /* Abierto: encima del contenido, con una sombra suave para separarlo. */
  html body.con-riel .riel-plataformas:is(:hover, :focus-within, .sp-abierto) {
    width:236px; box-shadow:12px 0 32px -16px rgba(22,25,31,.28) !important; transition-delay:.12s;
  }
  html body.con-riel .riel-plataformas:not(:hover):not(:focus-within):not(.sp-abierto) { transition-delay:.2s; }

  /* Cada plataforma: logo a la izquierda (centrado en el riel cerrado) y el texto a su derecha. */
  html body.con-riel .riel-plat {
    display:grid !important; grid-template-columns:32px 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center;
    width:100% !important; min-height:44px; padding:6px 8px !important; border-radius:10px !important; text-align:left; transition:background-color .15s ease-out;
  }
  html body.con-riel .riel-plat :is(.riel-logo, .riel-sigla, .riel-collage) { grid-row:1 / span 2; width:32px !important; height:32px !important; transform:none !important; }
  html body.con-riel .riel-plat .riel-logo { border-radius:8px !important; clip-path:inset(0 round 8px) !important; }
  html body.con-riel .riel-plat .riel-nombre, html body.con-riel .riel-plat .riel-sub {
    max-width:none !important; text-align:left !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    opacity:0; transition:opacity .15s ease-out;
  }
  html body.con-riel .riel-plat .riel-nombre { align-self:end; font-size:13.5px !important; font-weight:600 !important; color:#16191f !important; line-height:1.2 !important; }
  html body.con-riel .riel-plat .riel-sub { align-self:start; font-size:12px; font-weight:400; color:#5f6b7a; line-height:1.25; }
  html body.con-riel .riel-plataformas:is(:hover, :focus-within, .sp-abierto) :is(.riel-nombre, .riel-sub) { opacity:1; transition-delay:.18s; }
  html body.con-riel .riel-plat:hover:not([disabled]) { background:#f1f2f5 !important; }
  html body.con-riel .riel-plat.activa { background:#eceef1 !important; }
  html body.con-riel .riel-plat .riel-marca { left:-8px !important; top:10px !important; bottom:10px !important; background:#ff6a1a !important; }
  html body.con-riel .riel-plat[disabled] .riel-nombre { color:#9aa1ad !important; opacity:0; }
  html body.con-riel .riel-plataformas:is(:hover, :focus-within, .sp-abierto) .riel-plat[disabled] .riel-nombre { opacity:1; }
  html body.con-riel .riel-plat:focus-visible { outline:0; box-shadow:0 0 0 2px #fff, 0 0 0 4px #c2410c; }

  /* General: el collage en gris neutro (antes cálido) y una línea fina debajo. */
  html body.con-riel .riel-collage { background:#eef0f3 !important; }
  html body.con-riel .riel-collage :is(img, .riel-mini, .riel-mas) { width:14px !important; height:14px !important; }
  html body.con-riel .riel-collage { grid-template-columns:repeat(2,14px) !important; grid-auto-rows:14px !important; }
  html body.con-riel .riel-general:hover .riel-collage { background:#e6e9ed !important; }
  html body.con-riel .riel-separador { width:auto; margin:2px 8px; background:#e6e9ed !important; }

  /* Esconder del todo (la flecha de abajo): igual que antes, en gris claro. */
  html body.con-riel .riel-plegar { align-self:flex-start; margin-left:8px; margin-top:auto; flex:none; border-color:#e3e6ea !important; color:#7a8193 !important; background:#fff !important; }
  html body.con-riel .riel-mostrar { background:#fbfbfc !important; border-color:#e3e6ea !important; box-shadow:none !important; color:#5f6b7a !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body.con-riel .riel-plataformas, html body.con-riel .riel-plat, html body.con-riel .riel-plat :is(.riel-nombre, .riel-sub) { transition:none !important; }
}

/* Riel escondido: el tablero ocupa toda la pantalla (antes dejaba 22 px para la pestaña); la pestaña para volver a
   mostrarlo flota sobre la orilla izquierda, abajo. */
@media (min-width:901px) {
  html body.con-riel.riel-oculto #app-shell > main, html body.con-riel.riel-oculto #app > main { margin-left:0 !important; width:100% !important; }
  html body.con-riel.riel-oculto .riel-mostrar { z-index:45; border-radius:0 10px 10px 0 !important; box-shadow:4px 0 12px -6px rgba(22,25,31,.25) !important; }
}

/* Menú de tiendas de una plataforma (p. ej. TikTok de T-LAB): mismo estilo que el engrane; su plataforma queda
   marcada en el riel mientras el menú está abierto. */
.riel-tiendas .dropdown-menu { min-width:240px; padding:6px !important; border:1px solid #e3e5e8 !important; border-radius:12px !important; box-shadow:0 4px 14px rgba(22,25,31,.08), 0 24px 48px -24px rgba(22,25,31,.28) !important; font-family:"Schibsted Grotesk", Inter, sans-serif; }
.riel-tiendas .dropdown-header { padding:8px 10px 4px !important; font-size:12px !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important; color:#5f6b7a !important; }
.riel-tiendas .dropdown-item { display:flex; align-items:center; gap:10px; padding:8px 10px !important; border-radius:8px; font-size:14px; font-weight:500; color:#16191f !important; background:none !important; }
.riel-tiendas .dropdown-item:hover, .riel-tiendas .dropdown-item:focus-visible { background:#f2f3f5 !important; outline:0; }
.riel-tiendas .dropdown-item.active { background:#eceef1 !important; font-weight:600; }
.riel-tiendas .dropdown-item i { color:#7a8193; } .riel-tiendas .dropdown-item.active i { color:#c2410c; }
.riel-tiendas .dropdown-item.disabled { color:#9aa1ad !important; }
@media (min-width:901px) { html body.con-riel .riel-plat.sp-con-menu { background:#eceef1 !important; } }

/* En celular el riel es la tira horizontal de siempre: sin la línea de la tienda (es para el riel abierto de escritorio). */
@media (max-width:900px) { .riel-plat .riel-sub { display:none !important; } }