/* ============================================================
   SEÑORITA CUPCAKE — accesos a los otros dos módulos

   La barra de la tienda y la de cursos dibujan lo mismo con la
   misma función (`barraModulos()` en modulos.php), así que el
   estilo vive en un solo lado por el mismo motivo que la lista:
   escrito en cada hoja, alcanza con tocar una para que el menú
   se abra distinto en cada módulo, y el que se queda viejo es
   siempre el que menos se mira.

   OJO: sólo se pueden usar las variables que declaran LAS DOS
   paletas —marca.css y el <style> de formacion.php—. `--accion`
   y `--radio-chico` están en la primera y no en la segunda, así
   que acá no existen.
   ============================================================ */

.barra-modulos{position:relative;display:flex;align-items:center}

/* ---------- La hamburguesa ----------
   Sólo en el celular: de 720 para arriba los dos accesos entran
   en la barra y el menú no hace falta. Mide y se ve igual que el
   carrito de la tienda, que es el icono de al lado. */
.barra-burger{
  width:42px;height:42px;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--rosa-humo);border:1px solid var(--linea);color:var(--rosa-hondo);
  cursor:pointer;
}
.barra-burger:hover{background:var(--rosa-claro)}

/* ---------- El panel que se despliega ----------
   Va absoluto y no empujando la barra: la de la tienda es
   sticky, así que un panel en el flujo le cambiaría el alto en
   cada apertura y el contenido de abajo saltaría. */
.barra-modulos-lista{
  display:none;
  position:absolute;top:calc(100% + 10px);right:0;z-index:70;
  flex-direction:column;gap:8px;min-width:210px;
  padding:10px;border-radius:16px;
  background:#fff;border:1px solid var(--linea);box-shadow:var(--sombra-2);
}
.barra-modulos.abierto .barra-modulos-lista{display:flex}

.barra-modulo{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:42px;padding:0 16px;border-radius:999px;
  background:var(--rosa-humo);border:1px solid var(--linea);color:var(--rosa-hondo);
  font-size:.9rem;font-weight:600;white-space:nowrap;
}
.barra-modulo:hover{background:var(--rosa-claro)}
.barra-modulo small{font-size:.68rem;font-weight:600;opacity:.65;text-transform:uppercase;letter-spacing:.04em}

/* ---------- Escritorio ----------
   El menú se despliega y vuelve a ser la tira de píldoras de
   siempre. El "Ir a" se esconde acá y no se saca del marcado:
   es el mismo enlace, y en una píldora al lado del logo el
   nombre solo se lee mejor. */
@media(min-width:720px){
  .barra-burger{display:none}
  .barra-modulos-lista{
    display:flex;position:static;flex-direction:row;gap:10px;
    min-width:0;padding:0;background:none;border:none;box-shadow:none;
  }
  .barra-modulo{min-height:38px}
  .barra-modulo-ir{display:none}
}