/*
 * cpg-menu-unico.css — tanda -aen · 11-10-2026
 * Plataforma creada por David Hernández Díaz para el Club Patinaje Guadalajara.
 *
 * Los estilos del MENÚ ÚNICO dentro de las pantallas del programa: la lista del
 * menú de las páginas PHP (portal-nav, secciones plegables) y el botón «Menú» del
 * móvil. Son COPIA de portal_sidebar_styles() (_sidebar_portal.php), pero todo
 * colgado de .cpg-mu (el envoltorio que pone cpg-menu-unico.js): así no toca
 * NADA más del programa (ni su body, ni sus variables, ni sus colores).
 * 👉 Si se cambia el aspecto del menú allí, mirar aquí.
 *
 * Mientras el menú de las PHP no ha llegado, el del programa NO se esconde: lo
 * esconde el guion cuando ya tiene con qué sustituirlo (clase cpg-mu-puesto).
 */
.cpg-mu{
  --sb-bg:hsl(285 45% 18%); --sb-fg:hsl(285 20% 92%); --sb-primary:hsl(285 60% 70%);
  --sb-acc:hsl(285 35% 25%); --sb-bd:hsl(285 30% 25%);
  --pg-bd:hsl(215 20% 88%); --mut:hsl(285 10% 40%); --ink:hsl(215 28% 17%);
}
/* Lo del programa que se sustituye, escondido SÓLO cuando el nuestro ya está. */
.cpg-mu-oculto{display:none !important}

/* ── El ordenador: la lista ─────────────────────────────────────────────── */
.cpg-mu.portal-nav{flex:1;padding:12px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:hsl(285 30% 55% / .5) transparent;color:var(--sb-fg)}
.cpg-mu.portal-nav::-webkit-scrollbar{width:8px}
.cpg-mu.portal-nav::-webkit-scrollbar-track{background:transparent}
.cpg-mu.portal-nav::-webkit-scrollbar-thumb{background:hsl(285 25% 60% / .35);border-radius:4px}
.cpg-mu .portal-sec{margin-bottom:12px}
.cpg-mu .portal-sec .tt{font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;color:hsl(285 25% 96% / .85);padding:9px 12px 5px}
.cpg-mu details.portal-sec > summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;list-style:none;user-select:none;border-radius:6px}
.cpg-mu details.portal-sec > summary::-webkit-details-marker{display:none}
.cpg-mu details.portal-sec > summary:hover{color:#fff;background:var(--sb-acc)}
.cpg-mu details.portal-sec > summary:focus-visible{outline:2px solid hsl(285 20% 92% / .5);outline-offset:1px}
.cpg-mu .portal-sec-v{flex-shrink:0;opacity:.75;transition:transform .15s}
.cpg-mu details.portal-sec[open] > summary .portal-sec-v{transform:rotate(180deg)}
.cpg-mu details.portal-sec > summary.cpg-tiene-activo{color:var(--sb-primary)}
.cpg-mu.portal-nav a{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:6px;font-size:14px;color:hsl(285 20% 92% / .9);text-decoration:none;transition:background .12s,color .12s;margin-bottom:2px}
.cpg-mu.portal-nav a svg{width:18px;height:18px;flex-shrink:0}
.cpg-mu.portal-nav a:hover{background:var(--sb-acc);color:var(--sb-fg)}
.cpg-mu.portal-nav a.active{background:var(--sb-acc);color:var(--sb-primary);font-weight:500}

/* ── El móvil: el botón «Menú» (como el de las PHP, -oy) ────────────────── */
.cpg-mu-mbar{display:none}
@media(max-width:767px){
  .cpg-mu-mbar{display:flex;align-items:center;gap:10px;background:#fff;
    border-bottom:1px solid var(--pg-bd);padding:6px 10px;position:relative;z-index:40}
  .cpg-mu .portal-mmenu>summary{display:inline-flex;align-items:center;gap:8px;
    min-height:44px;padding:0 14px;border-radius:10px;cursor:pointer;
    background:hsl(285 50% 30%);color:#fff;font-weight:600;font-size:14px;
    list-style:none;user-select:none;-webkit-user-select:none}
  .cpg-mu .portal-mmenu>summary::-webkit-details-marker{display:none}
  .cpg-mu .portal-mmenu[open]>summary::before{content:'';position:fixed;inset:0;z-index:59}
  .cpg-mu .portal-mmenu-panel{position:absolute;left:0;right:0;top:100%;z-index:60;
    background:#fff;border-bottom:1px solid var(--pg-bd);
    box-shadow:0 14px 30px rgba(72,22,80,.22);
    max-height:calc(100vh - 130px);overflow-y:auto;padding:4px 8px 12px}
  .cpg-mu .portal-mmenu-sec{border-bottom:1px solid var(--pg-bd);margin:0}
  .cpg-mu .portal-mmenu-sec:last-child{border-bottom:0}
  .cpg-mu .portal-mmenu-panel summary{display:flex;align-items:center;justify-content:space-between;
    gap:8px;min-height:46px;padding:4px 10px;list-style:none;cursor:pointer;
    font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
    color:hsl(285 50% 30%);user-select:none;-webkit-user-select:none}
  .cpg-mu .portal-mmenu-panel summary::-webkit-details-marker{display:none}
  .cpg-mu .portal-mmenu-panel summary svg{flex:none;transition:transform .15s}
  .cpg-mu .portal-mmenu-sec[open]>summary svg{transform:rotate(180deg)}
  .cpg-mu .portal-mmenu-panel a{display:flex;align-items:center;gap:10px;min-height:44px;
    padding:4px 10px 4px 16px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:15px}
  .cpg-mu .portal-mmenu-panel a svg{width:18px;height:18px;flex:none;color:var(--mut)}
  .cpg-mu .portal-mmenu-panel a.active{background:hsl(285 45% 94%);color:hsl(285 50% 30%);font-weight:600}
  .cpg-mu .portal-mmenu-panel a.active svg{color:hsl(285 50% 30%)}
  .cpg-mu-actual{font-size:13px;font-weight:600;color:var(--ink);
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ── «Estás trabajando como», como en las páginas PHP (.portal-areas) ──────
   El bloque lo marca cpg-menu-unico.js (cpg-mu-areas). Los !important son
   contra las clases del programa (px-3 py-2 text-sm opacity-60…), que llevan
   su propio peso. Activo = el botón con bg-sidebar-accent. 🔴 NADA de
   `display` aquí: cpg-cambio-area.js esconde los botones del programa con
   style.display='none' y un display !important los volvía a enseñar (salían
   repetidos, medido en el arnés). */
.cpg-mu-areas{margin-bottom:8px}
.cpg-mu-areas .cpg-mu-areas-tt{font-size:10px !important;text-transform:uppercase;letter-spacing:.09em;
  color:hsl(285 20% 92% / .4) !important;padding:0 2px 6px !important;margin:0 !important}
.cpg-mu-areas button{width:100% !important;align-items:center;gap:8px;padding:7px 10px !important;
  border:0;background:transparent;color:hsl(285 20% 92% / .8) !important;font-size:13px !important;line-height:1.25 !important;
  text-align:left;border-radius:6px !important;cursor:pointer;margin-bottom:2px;opacity:1 !important;font-weight:400}
.cpg-mu-areas button:hover{background:hsl(285 35% 25%) !important;color:hsl(285 20% 92%) !important}
.cpg-mu-areas button.bg-sidebar-accent{background:hsl(285 35% 25%) !important;color:hsl(285 60% 70%) !important;font-weight:500;cursor:default}