/* SALMI · menú por capítulos
   Regla de claridad: nombres en palabras simples, un capítulo = una idea, y todo se puede achicar a íconos. */

/* ---------- cabecera del menú ---------- */
.lado-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 16px 6px}
.lado-cab .lado-logo{padding:0;min-width:0}
.lado-marca{display:none;width:34px;height:34px;border-radius:11px;background:#2A2266 radial-gradient(circle at 50% 50%,#16B6D6 0 28%,transparent 30%);border:1px solid rgba(255,255,255,.25)}
.rail-btn{flex:none;width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:11px;background:rgba(255,255,255,.1);color:#d7d8ff;cursor:pointer;transition:background .2s}
.rail-btn:hover{background:rgba(255,255,255,.2);color:#fff}
.rail-btn:focus-visible,.cap-h:focus-visible,#nav a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---------- lista del menú ---------- */
#nav{gap:6px;padding:2px 2px 10px}
#nav .cap{border-radius:20px}
.cap-h{display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px;border:1px solid transparent;border-radius:16px;background:transparent;color:#fff;font:inherit;cursor:pointer;text-align:left;transition:background .2s}
.cap-h:hover{background:rgba(255,255,255,.09)}
#nav .cap-h .ic{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.1);color:#c3c4f7;flex:none;transition:background .2s,color .2s}
#nav .cap.tiene-on .cap-h .ic{background:var(--cyan);color:#06222a}
.cap-t{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.2}
.cap-t b{font-size:14px;font-weight:800}
.cap-t small{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#8fe3f3;font-weight:700;margin-top:2px}
.cap-h .fl{display:grid;place-items:center;color:var(--mut);transition:transform .2s}
.cap.abierto .cap-h .fl{transform:rotate(90deg)}
.cap-h .bd{margin-left:auto}
.cap.abierto .cap-h .bd{display:none}
.cap-titulo{display:none}
.cap-b{display:none;flex-direction:column;gap:2px;margin:2px 0 8px 27px;padding-left:10px;border-left:2px solid rgba(255,255,255,.14)}
.cap.abierto .cap-b{display:flex}
#nav .cap-b>a{padding:7px 10px;border-radius:12px;font-size:13.5px;gap:10px}
#nav .cap-b>a .ic{width:22px;height:22px;background:none;border-radius:0}
#nav .cap-b>a.on .ic{background:none;color:#7fe3f6}
#nav .cap-b>a.on{background:linear-gradient(135deg,rgba(22,182,214,.34),rgba(59,49,145,.62));border-color:rgba(255,255,255,.26)}
#nav .cap-b .sub-nav{margin:2px 0 4px 14px}
#nav>a[data-solo]{margin-bottom:2px}
#nav .nav-tec{margin-top:auto;font-size:12.5px;opacity:.8}
#nav .nav-tec .ic{width:26px;height:26px;border-radius:9px}
#nav .nav-tec .nt b{font-weight:600}

/* ---------- opciones recogidas ---------- */
.opciones{border-radius:14px}
.opciones summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:700;color:var(--mut);padding:2px 4px}
.opciones summary::-webkit-details-marker{display:none}
.opciones summary::after{content:"+";font-size:16px;line-height:1}
.opciones[open] summary::after{content:"–"}
.opciones[open]{display:flex;flex-direction:column;gap:10px}
.opciones summary:hover{color:#fff}

/* ---------- ayuda "?" en cada módulo ---------- */
.cab-fila{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ayuda-btn{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border:1px solid rgba(42,34,102,.22);border-radius:99px;background:rgba(255,255,255,.55);color:#2A2266;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .2s}
.ayuda-btn:hover{background:rgba(255,255,255,.9)}
.ayuda-btn i{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#16B6D6;color:#06222a;font-style:normal;font-weight:800;font-size:14px}
.ayuda-btn[aria-expanded="true"]{background:#fff;border-color:#16B6D6}
.ayuda-btn:focus-visible,.ay-ok:focus-visible,.ay-x:focus-visible{outline:2px solid #16B6D6;outline-offset:2px}
.ayuda{margin:14px 0 4px;padding:16px 18px;border-radius:20px;border:1px solid rgba(22,182,214,.45);background:linear-gradient(135deg,rgba(22,182,214,.14),rgba(255,255,255,.7));color:#1c1655}
.ayuda[hidden]{display:none}
.ay-cab{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ay-cab b{font-size:15px;font-weight:800;flex:1}
.ay-ic{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#16B6D6;color:#06222a;font-weight:800}
.ay-x{border:0;background:transparent;font-size:22px;line-height:1;color:#2A2266;cursor:pointer;padding:0 4px}
.ayuda dl{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ayuda dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:#0d6c80;margin-bottom:3px}
.ayuda dd{margin:0;font-size:14px;line-height:1.45}
.ay-ok{margin-top:12px;padding:8px 18px;border:0;border-radius:99px;background:#2A2266;color:#fff;font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.ay-ok:hover{background:#3b3191}

/* ---------- menú achicado a íconos (solo computador) ---------- */
@media(min-width:901px){
.lado{z-index:70}
.app{transition:grid-template-columns .25s ease}
.app.rail{grid-template-columns:88px minmax(0,1fr)}
.rail .lado{padding:16px 11px;overflow:visible}
.rail .lado-cab{flex-direction:column;gap:10px;padding:0 0 14px}
.rail .lado-logo{display:none}
.rail .lado-marca{display:block}
.rail #nav{overflow:visible;align-items:center}
.rail #nav>a[data-solo],.rail .cap-h{justify-content:center;padding:6px;width:100%}
.rail #nav>a[data-solo] .nt,.rail .cap-t,.rail .cap-h .fl{display:none}
.rail #nav .cap-h .bd,.rail #nav .cap.abierto .cap-h .bd{display:grid;position:absolute;top:-3px;right:-1px;margin:0;min-width:18px;height:18px;font-size:10px;padding:0 5px}
.rail #nav>a[data-solo] .bd{position:absolute;top:0;right:0;min-width:18px;height:18px;font-size:10px;padding:0 5px}
.rail #nav>a{position:relative}
.rail .cap{position:relative;width:100%}
.rail .cap-b{display:none;position:absolute;left:calc(100% + 14px);top:-6px;min-width:250px;margin:0;padding:10px;gap:2px;border:1px solid rgba(255,255,255,.24);border-radius:22px;background:linear-gradient(180deg,#2c2480,#17336f);box-shadow:0 26px 50px -18px rgba(6,4,40,.85);z-index:90}
.rail .cap-b::before{content:"";position:absolute;left:-18px;top:0;bottom:0;width:18px}
.rail .cap.abierto .cap-b{display:none}
.rail .cap:hover .cap-b,.rail .cap.abierto:hover .cap-b,.rail .cap:focus-within .cap-b{display:flex}
.rail .cap-titulo{display:flex;flex-direction:column;padding:6px 10px 8px;border-bottom:1px solid rgba(255,255,255,.16);margin-bottom:4px}
.rail .cap-titulo b{font-size:14px;font-weight:800}
.rail .cap-titulo small{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#8fe3f3;font-weight:700;margin-top:2px}
.rail .cap-b>a{padding:8px 10px}
.rail .cap-b .sub-nav{margin-left:14px}
.rail #nav>a[data-solo]:hover::after,.rail #nav .nav-tec:hover::after{content:attr(data-tip);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);white-space:nowrap;padding:6px 12px;border-radius:10px;background:#1c1655;border:1px solid rgba(255,255,255,.22);color:#fff;font-size:12.5px;font-weight:700;pointer-events:none;z-index:95}
.rail .cap-h{position:relative}
.rail #nav .nav-tec{justify-content:center;padding:6px;width:100%;position:relative}
.rail #nav .nav-tec .nt{display:none}
.rail .lado-pie{align-items:center}
.rail .opciones{display:none}
.rail .usuario{flex-direction:column;gap:4px}
.rail .usuario #quien{display:none}
}

/* ---------- celular y tableta: el menú es un cajón, sin versión achicada ---------- */
@media(max-width:900px){
.rail-btn{display:none}
.ayuda dl{grid-template-columns:1fr;gap:10px}
.ayuda-btn span{display:none}
.ayuda-btn{padding:5px}
.cab-fila{flex-wrap:nowrap}
}
@media(prefers-reduced-motion:reduce){.app,.cap-h .fl{transition:none}}

/* la ayuda de cada módulo ahora vive en el botón "?"; se oculta el aviso viejo que la repetía */
.panel .intro{display:none}