/* Vestíbulo en grupos (14/10/2026, antes «prueba»): cuatro tarjetas desplegables con iconos grandes tipo Windows. */
.vp-grupos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;margin-bottom:24px;}
.vp-grupo{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);min-width:0;}
.vp-grupo>summary{
  display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;list-style:none;
  font-size:16px;font-weight:800;border-radius:var(--radius);min-height:48px;
}
.vp-grupo>summary::-webkit-details-marker{display:none;}
.vp-grupo>summary:hover{background:var(--surface-2);}
.vp-grupo>summary:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;}
.vp-grupo-ico{font-size:22px;line-height:1;}
.vp-grupo-titulo{flex:1;min-width:0;}
.vp-flecha{width:10px;height:10px;border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);transform:rotate(45deg);margin-right:4px;transition:transform .15s ease;}
.vp-grupo[open]>summary .vp-flecha{transform:rotate(-135deg);}
.vp-grupo[open]>summary{border-bottom:1px solid var(--border);border-bottom-left-radius:0;border-bottom-right-radius:0;}

.vp-iconos{list-style:none;margin:0;padding:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;}
.vp-icono{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;text-align:center;
  padding:10px 6px 8px;min-height:94px;border:1px solid transparent;border-radius:var(--radius-sm);
  color:var(--text);text-decoration:none;transition:background .12s ease,border-color .12s ease;
}
.vp-icono:hover{background:var(--surface-2);border-color:var(--primary);}
.vp-icono:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.vp-ico{font-size:40px;line-height:1;}
.vp-nombre{font-size:13px;font-weight:700;line-height:1.25;overflow-wrap:anywhere;}
.vp-nota{font-size:11px;color:var(--text-muted);border:1px solid var(--border);border-radius:99px;padding:0 8px;}

@media (max-width:860px){
  .vp-grupos{grid-template-columns:minmax(0,1fr);}
}
@media (prefers-reduced-motion:reduce){
  .vp-flecha,.vp-icono{transition:none;}
}

/* ---------- Tamaño de iconos (rueda dentada → «Tamaño de iconos»); mediano = valores base de arriba ---------- */
html[data-vp-iconos="pequeno"] .vp-iconos{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:4px;}
html[data-vp-iconos="pequeno"] .vp-icono{min-height:72px;padding:6px 4px;}
html[data-vp-iconos="pequeno"] .vp-ico{font-size:28px;}
html[data-vp-iconos="pequeno"] .vp-nombre{font-size:12px;}
html[data-vp-iconos="grande"] .vp-iconos{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:10px;}
html[data-vp-iconos="grande"] .vp-icono{min-height:120px;padding:14px 8px 12px;}
html[data-vp-iconos="grande"] .vp-ico{font-size:56px;}
html[data-vp-iconos="grande"] .vp-nombre{font-size:14px;}

/* ---------- Colores de pantalla extra: Azul marino y Gris (Oscuro y Blanco son los de siempre) ---------- */
html[data-theme="navy"]{
  --bg:#0a1730;--bg-alt:#0d1d3d;--surface:#122a52;--surface-2:#1a3868;--border:#2b4a7e;
  --text:#e6edf8;--text-muted:#a6bbdc;--text-faint:#7790b8;--primary:#5aa2ff;--primary-2:#7fd3ff;
  --primary-grad:linear-gradient(135deg,#5aa2ff 0%,#7fd3ff 100%);
}
html[data-theme="gray"]{
  --bg:#1f2124;--bg-alt:#25272b;--surface:#2c2f34;--surface-2:#383c42;--border:#4a4f57;
  --text:#e8e9ec;--text-muted:#b4b8bf;--text-faint:#8b9099;--primary:#9a97ff;--primary-2:#7fd3ff;
  --primary-grad:linear-gradient(135deg,#9a97ff 0%,#7fd3ff 100%);
}

/* ---------- Cabecera: avatar con flechita (se nota que es desplegable), rueda dentada y sin duplicados ---------- */
.vestibulo-grupos #themeToggle,
.vestibulo-grupos .header-actions>.egv-idiomas{display:none;}
.vestibulo-grupos #usuarioMenuBtn{
  width:auto;height:auto;padding:3px 9px 3px 3px;gap:7px;display:inline-flex;align-items:center;
  border:1px solid var(--border);border-radius:99px;background:var(--surface);
}
.vestibulo-grupos #usuarioMenuBtn:hover{border-color:var(--primary);}
.vestibulo-grupos #usuarioMenuBtn::after{
  content:"";width:7px;height:7px;margin:-3px 2px 0 0;flex:none;
  border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);transform:rotate(45deg);transition:transform .15s ease;
}
.vestibulo-grupos #usuarioMenuBtn[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:3px;}
.vestibulo-grupos #ajustesBtn{font-size:20px;}
.vestibulo-grupos #ajustesBtn[aria-expanded="true"]{background:var(--surface-2);}

.ajustes-panel{min-width:250px;padding:10px 12px 12px;gap:0;}
.ajustes-tit{margin:8px 0 6px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);}
.ajustes-tit:first-child{margin-top:0;}
.ajustes-fila{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.ajustes-op{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;min-height:34px;font:inherit;font-size:13px;font-weight:600;
  color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;
}
.ajustes-op:hover{border-color:var(--primary);}
.ajustes-op:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.ajustes-op[aria-pressed="true"]{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset;font-weight:800;}
.ajustes-muestra{width:14px;height:14px;border-radius:50%;border:1px solid rgba(128,128,128,.6);flex:none;}
.ajustes-muestra-oscuro{background:#0b0f19;}
.ajustes-muestra-claro{background:#fff;}
.ajustes-muestra-marino{background:#122a52;}
.ajustes-muestra-gris{background:#2c2f34;}
/* Iconos todavía sin enlace: se ven, pero no se pulsan (atenuados, sin efecto al pasar el ratón). */
.vp-sinenlace{cursor:default;opacity:.55;}
.vp-sinenlace:hover{background:transparent;border-color:transparent;}
/* En pantallas muy estrechas el panel de ajustes se salía por la izquierda (320 px): ocupa el ancho de la pantalla */
@media (max-width:420px){.ajustes-panel{position:fixed;top:64px;left:8px;right:8px;min-width:0;max-width:none;}}