/* =====================================================================
   Memoria y Resistencia — barra C (13 nov 2026, elegida por Daniel).
   Va después de navbar.css, nocturno.css y celular.css.
   - Tira fina arriba «Sobre el proyecto»: Nosotrxs, Fuentes, Novedades, Contacto, Reglamento y la cuenta.
   - Barra principal: Inicio y las 5 secciones como enlaces simples (sin menús al pasar el ratón ni segunda barra).
   - Menú lateral con las páginas de la sección (parciales/menu-lateral.php). En celular, recuadro «En esta sección».
   Sin colores de partidos: noche, morado, lavanda y neutros.
   ===================================================================== */

/* ---- Tira «Sobre el proyecto» ---- */
.cabecera-c .nav-servicio { background: #15122b; color: #e6e0f5; overflow: hidden; max-height: 2.4rem; transition: max-height .2s ease; }
.cabecera-c.compacta .nav-servicio { max-height: 0; }
.cabecera-c .nav-servicio-fila { display: flex; align-items: center; gap: 1rem; min-height: 2.1rem; }
.cabecera-c .nav-servicio-lista { display: flex; align-items: center; gap: .15rem 1.25rem; margin: 0; padding: 0; list-style: none; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cabecera-c .nav-servicio-lista::-webkit-scrollbar { display: none; }
.cabecera-c .nav-servicio a { color: #e6e0f5; font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cabecera-c .nav-servicio-lista a { display: inline-flex; align-items: center; min-height: 2.1rem; border-bottom: 2px solid transparent; }
.cabecera-c .nav-servicio a:hover, .cabecera-c .nav-servicio a.activo { color: #fff; }
.cabecera-c .nav-servicio-lista a.activo { border-bottom-color: #cdb8f5; }
.cabecera-c .nav-servicio a:focus-visible, .cabecera-c .nav-servicio button:focus-visible { outline: 2px solid #eadfcb; outline-offset: 2px; border-radius: 4px; }
.cabecera-c .nav-servicio-cuenta { margin-left: auto; flex: none; display: flex; align-items: center; }
.cabecera-c .nav-servicio-entrar { display: inline-flex; align-items: center; gap: .4rem; }
/* La cuenta en la tira: botón chico. */
.cabecera-c .nav-servicio .nav-usuario-boton { height: 1.85rem; padding: 0 .55rem 0 .15rem; gap: .4rem; border: 1px solid rgba(205, 184, 245, .35); background: transparent; color: #e6e0f5; font-size: .8rem; }
body .cabecera-c .nav-servicio .nav-usuario-boton, body .cabecera-c .nav-servicio .nav-usuario-nombre { color: #e6e0f5; }
body .cabecera-c .nav-servicio .nav-usuario-boton:hover, body .cabecera-c .nav-servicio .nav-usuario-boton[aria-expanded="true"] { color: #fff; border-color: #cdb8f5; }
.cabecera-c .nav-servicio .nav-avatar { width: 1.5rem; height: 1.5rem; font-size: .7rem; }
.cabecera-c .nav-servicio .nav-usuario-nombre { display: inline !important; }
body .cabecera-c .nav-servicio .nav-avatar > span, body .cabecera-c .nav-servicio .nav-avatar > img { box-shadow: 0 0 0 2px #15122b; }
/* El menú de la cuenta sale de una tira que esconde lo que se desborda: se deja ver. */
.cabecera-c .nav-servicio:has(.dropdown-menu.show) { overflow: visible; }

/* ---- Barra principal: secciones como enlaces simples ---- */
.cabecera-c .nav-sec-enlace .nav-sec-texto { white-space: nowrap; }
@media (min-width: 1200px) {
  /* Buscar con su nombre: ahora hay espacio. */
  .cabecera-c .nav-buscar { width: auto; min-width: 0; padding: 0 1rem 0 .85rem; border-radius: 999px; gap: .45rem; }
  .cabecera-c .nav-buscar .nav-buscar-texto { display: inline; font-weight: 600; }
  .cabecera-c.nav-muy-apretada .nav-buscar { width: var(--nav-alto-boton); padding: 0; justify-content: center; }
  .cabecera-c.nav-muy-apretada .nav-buscar .nav-buscar-texto { display: none; }
  .cabecera-c .nav-perfil { display: none !important; }
}
/* Celular y tableta: con sesión, la foto va en la barra principal; sin sesión, «Entrar» se queda en la tira. */
@media (max-width: 1199.98px) {
  .cabecera-c .nav-servicio-cuenta .nav-usuario { display: none; }
}
/* Celular: Fuentes y Reglamento siguen en «Menú» › Nosotrxs; en la tira caben Nosotrxs, Novedades y Contacto. */
@media (max-width: 575.98px) {
  .cabecera-c .nav-servicio-lista li.nav-servicio-extra { display: none; }
  .cabecera-c .nav-servicio-lista { gap: .1rem 1rem; }
  .cabecera-c .nav-servicio a { font-size: .8rem; }
}

/* ---- Menú lateral ---- */
.ml-marco { display: block; }
.ml-marco > main { min-width: 0; }
.ml { --ml-texto: #3d3858; --ml-suave: #6b6290; --ml-borde: #e7e0f4; --ml-claro: #f3eefc; --ml-morado: #5b3fa8; }
.ml-fijo { display: none; }
.ml-etiqueta { margin: 0 0 .15rem; padding: 0 .75rem; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ml-suave); }
.ml-titulo { display: block; margin: 0 0 .6rem; padding: .1rem .75rem .75rem; border-bottom: 1px solid var(--ml-borde); font-family: var(--mr-serif, Fraunces, serif); font-size: 1.2rem; font-weight: 650; line-height: 1.2; color: #15122b; text-decoration: none; }
.ml-titulo:hover, .ml-titulo.activo { color: var(--ml-morado); }
.ml-lista, .ml-hijas { list-style: none; margin: 0; padding: 0; }
.ml-lista { display: grid; gap: .1rem; }
.ml-enlace {
  display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .35rem; min-height: 2.6rem; padding: .45rem .75rem; border-radius: 10px;
  color: var(--ml-texto); font-size: .93rem; font-weight: 550; line-height: 1.25; text-decoration: none; transition: background-color .12s, color .12s;
}
.ml-enlace .nav-marca-nuevo, .ml-enlace .nav-marca-beta { margin-left: 0; }
.ml-enlace:hover { background: var(--ml-claro); color: #15122b; }
.ml-enlace.activo { background: #ece5fa; color: #15122b; font-weight: 750; box-shadow: inset 3px 0 0 var(--ml-morado); }
.ml-enlace:focus-visible, .ml-accion:focus-visible, .ml-titulo:focus-visible, .ml-resumen:focus-visible { outline: 3px solid #7b5bd0; outline-offset: 1px; }
/* Las páginas de Quién es quién van debajo de su puerta, con sangría. */
.ml-hijas { margin: .1rem 0 .25rem .75rem; padding-left: .5rem; border-left: 1px solid var(--ml-borde); display: grid; gap: .05rem; }
.ml-hijas .ml-enlace { min-height: 2.3rem; font-size: .88rem; padding-block: .35rem; }
.ml-accion {
  display: flex; align-items: center; justify-content: center; gap: .45rem; margin: .9rem .25rem 0; min-height: 2.75rem; padding: .5rem .8rem; border-radius: 999px;
  background: #15122b; color: #fff; font-size: .86rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
}
.ml-accion > i { color: #cdb8f5; }
.ml-accion:hover { background: #2a2150; color: #fff; }

/* Celular y tableta: recuadro «En esta sección» arriba del contenido. */
.ml-caja { margin: .75rem auto; width: calc(100% - 1.5rem); max-width: 46rem; background: #fff; border: 1px solid var(--ml-borde); border-radius: 14px; box-shadow: 0 6px 18px -12px rgba(21, 18, 43, .3); }
.ml-resumen { display: flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .55rem 1rem; cursor: pointer; list-style: none; border-radius: 14px; }
.ml-resumen::-webkit-details-marker { display: none; }
.ml-resumen-texto { display: flex; flex-direction: column; min-width: 0; }
.ml-resumen-texto small { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ml-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-resumen-texto strong { font-size: 1rem; color: #15122b; }
.ml-flecha { margin-left: auto; color: var(--ml-morado); transition: transform .2s; }
.ml-caja[open] .ml-flecha { transform: rotate(180deg); }
.ml-caja-nav { padding: .25rem .5rem .75rem; border-top: 1px solid var(--ml-borde); }
.ml-caja-nav .ml-lista { padding-top: .35rem; }

@media (min-width: 1200px) {
  .ml-marco { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); align-items: stretch; }
  .ml { background: #f8f5fd; border-right: 1px solid #ebe5f5; }
  .ml-fijo {
    display: block; position: sticky; top: calc(var(--alto-cabecera, 120px) + .75rem);
    max-height: calc(100dvh - var(--alto-cabecera, 120px) - 1.5rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    padding: 1.4rem .9rem 1.5rem;
  }
  .ml-caja { display: none; }
}
@media (min-width: 1700px) {
  .ml-marco { grid-template-columns: 18.5rem minmax(0, 1fr); }
}
@media print {
  .ml, .cabecera-c .nav-servicio { display: none !important; }
  .ml-marco { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .cabecera-c .nav-servicio, .ml-flecha, .ml-enlace { transition: none; }
}