/* MEN-V2-001 · Menu superior por secciones (propuesta 06-oct-2026), REVERSIBLE.
   Todo va bajo body.menu-v2: con el menu clasico esta hoja no hace nada.
   La pone dist/js/menu-v2.js; para quitarla del todo, borrar sus dos lineas en layout.php. */

/* ── Barra superior: cada modulo con su color ─────────────────────────────── */
body.menu-v2 .q2-tn-item > .q2-tn-link { transition: background .15s, box-shadow .15s; box-shadow: inset 0 -3px 0 transparent; }
body.menu-v2 .q2-tn-item > .q2-tn-link > i:first-child { color: #fff; opacity: .95; }
body.menu-v2 .q2-tn-item:hover > .q2-tn-link { box-shadow: inset 0 -3px 0 var(--mc); background: rgba(255,255,255,.06); }
body.menu-v2 .q2-tn-item.q2-tn-open > .q2-tn-link,
body.menu-v2 .q2-tn-item.q2-tn-active > .q2-tn-link { background: var(--mc) !important; box-shadow: none; border-bottom-color: transparent !important; }

/* ── Desplegable como tarjeta ─────────────────────────────────────────────── */
/* MEN-V2-002 · sin cabecera repetida: una franja del color del modulo une la pestaña
   abierta con su tarjeta; los grupos van en columnas y la tarjeta crece a lo ancho. */
body.menu-v2 .q2-tn-dropdown.mv2-card { min-width: 260px; width: max-content; max-width: min(820px, 96vw); padding: 0; border: none;
    border-top: 3px solid var(--mc); border-radius: 0 0 14px 14px; box-shadow: 0 16px 40px rgba(15,23,42,.20); overflow: hidden; }
body.menu-v2 .q2-tn-item.mv2-der > .q2-tn-dropdown.mv2-card { left: auto; right: 0; }
body.menu-v2 .mv2-card > li { list-style: none; }
body.menu-v2 .mv2-cuerpo { padding: 6px 10px 10px; display: grid; column-gap: 6px; }
body.menu-v2 .mv2-cuerpo.mv2-c1 { grid-template-columns: minmax(240px, 1fr); }
body.menu-v2 .mv2-cuerpo.mv2-c2 { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
body.menu-v2 .mv2-cuerpo.mv2-c3 { grid-template-columns: repeat(3, minmax(210px, 1fr)); }
body.menu-v2 .mv2-cuerpo.mv2-c2 .mv2-sec + .mv2-sec, body.menu-v2 .mv2-cuerpo.mv2-c3 .mv2-sec { padding-right: 2px; }
body.menu-v2 .mv2-sec { margin-top: 6px; break-inside: avoid; }
body.menu-v2 .mv2-tit { display: flex; align-items: center; gap: 10px; color: var(--mc); font-size: 11px; font-weight: 800;
    letter-spacing: .06em; padding: 8px 8px 4px; }
body.menu-v2 .mv2-tit::after { content: ""; flex: 1; height: 1px; background: #E2E8F0; }
body.menu-v2 .mv2-card a.mv2-op { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; border-left: none;
    color: #1E293B !important; font-size: 13.5px; font-weight: 500; text-decoration: none !important; white-space: nowrap; outline: none; }
body.menu-v2 .mv2-card a.mv2-op:focus-visible { box-shadow: 0 0 0 2px var(--mc); }
/* La pantalla actual: fondo y barra del color del modulo. */
body.menu-v2 .mv2-card a.mv2-op.mv2-actual { background: color-mix(in srgb, var(--mc) 14%, #fff); color: var(--mc) !important; font-weight: 700;
    box-shadow: inset 3px 0 0 var(--mc); }
body.menu-v2 .mv2-card a.mv2-op i { font-size: 16px; width: 22px; text-align: center; color: var(--mc); flex-shrink: 0; }
body.menu-v2 .mv2-card a.mv2-op:hover { background: color-mix(in srgb, var(--mc) 10%, #fff); color: var(--mc) !important; }

/* Modo oscuro */
body.menu-v2.dark-mode .q2-tn-dropdown.mv2-card { background: #0F172A; }
body.menu-v2.dark-mode .mv2-card a.mv2-op { color: #E2E8F0 !important; }
body.menu-v2.dark-mode .mv2-card a.mv2-op:hover { background: rgba(255,255,255,.07); }
body.menu-v2.dark-mode .mv2-tit::after { background: #334155; }

/* Celular / tableta: el menu se abre en columna, sin tarjetas flotantes. */
@media (max-width: 991px) {
    body.menu-v2 .q2-tn-dropdown.mv2-card { width: 100%; max-width: none; min-width: 0; border-radius: 0; box-shadow: none; background: #fff; }
    body.menu-v2 .q2-tn-item.mv2-der > .q2-tn-dropdown.mv2-card { right: auto; }
    body.menu-v2 .mv2-cuerpo { display: block; }
    body.menu-v2 .mv2-card a.mv2-op { padding-left: 18px; }
}

/* ── MEN-V2-002 · Buscador de opciones (Ctrl+K). Funciona con los dos menus. ── */
#mv2-pal { position: fixed; inset: 0; z-index: 3000; background: rgba(15,23,42,.45); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; }
#mv2-pal .mv2-pal-caja { width: min(620px, 100%); background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(15,23,42,.35); overflow: hidden; display: flex; flex-direction: column; max-height: 75vh; }
#mv2-pal .mv2-pal-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #E2E8F0; }
#mv2-pal .mv2-pal-in i { font-size: 18px; color: #64748B; }
#mv2-pal .mv2-pal-in input { flex: 1; border: none; outline: none; font-size: 16px; background: transparent; color: #0F172A; }
#mv2-pal kbd { font: 600 11px/1 inherit; background: #F1F5F9; border: 1px solid #CBD5E1; border-bottom-width: 2px; border-radius: 5px; padding: 3px 6px; color: #475569; }
#mv2-pal .mv2-pal-lista { overflow-y: auto; padding: 6px; }
#mv2-pal .mv2-pal-sep { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #64748B; padding: 8px 10px 4px; }
#mv2-pal .mv2-pal-op { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 9px; color: #0F172A !important; text-decoration: none !important; }
#mv2-pal .mv2-pal-op i { font-size: 18px; width: 24px; text-align: center; }
#mv2-pal .mv2-pal-op .n { font-weight: 600; font-size: 14px; }
#mv2-pal .mv2-pal-op .d { margin-left: auto; font-size: 12px; color: #64748B; white-space: nowrap; }
#mv2-pal .mv2-pal-op.sel, #mv2-pal .mv2-pal-op:hover { background: #EFF6FF; }
#mv2-pal .mv2-pal-op.sel .n { color: #1D4ED8; }
#mv2-pal .mv2-pal-vacio { padding: 18px 12px; color: #64748B; text-align: center; }
#mv2-pal .mv2-pal-pie { display: flex; gap: 16px; flex-wrap: wrap; padding: 9px 14px; border-top: 1px solid #E2E8F0; font-size: 12px; color: #64748B; background: #F8FAFC; }
body.dark-mode #mv2-pal .mv2-pal-caja { background: #0F172A; }
body.dark-mode #mv2-pal .mv2-pal-in input, body.dark-mode #mv2-pal .mv2-pal-op { color: #E2E8F0 !important; }
body.dark-mode #mv2-pal .mv2-pal-op.sel, body.dark-mode #mv2-pal .mv2-pal-op:hover { background: #1E293B; }
@media (max-width: 576px) { #mv2-pal .mv2-pal-op .d { display: none; } #mv2-pal .mv2-pal-pie { display: none; } }