/* ═══════════════════════════════════════════════════════════════════
   BARRA LATERAL DE LOS PANELES — Comunidad Cristiana Cochabamba
   ───────────────────────────────────────────────────────────────────
   Convierte los paneles (admin, editor de contenido, ministerio,
   grupo, mi espacio) en un tablero con menú a la izquierda: se ve
   una sección a la vez en lugar de una lista larguísima hacia abajo.

   Usa los mismos colores y tipografías que ya tiene cada panel
   (--papel, --tinta, --oro…), así que no cambia el aspecto: solo
   reorganiza. Se acompaña de panel-lateral.js.
   ═══════════════════════════════════════════════════════════════════ */

.pl-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}

/* Encabezado con el logo: solo cuando el menú es cajón (celular) */
.pl-side-top { display: none; }

/* ── Menú ─────────────────────────────────────────────────────── */
.pl-side {
  position: sticky;
  top: 18px;
  align-self: start;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  padding: 6px 0;
  border-right: 1px solid var(--hair);
}
.pl-side-tit {
  font-family: var(--caps);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oro);
  padding: 0 14px 10px;
}
.pl-nav { list-style: none; margin: 0; padding: 0 10px 0 0; }
.pl-nav li { margin: 0; }
.pl-link {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--body);
  font-size: 0.98rem;
  color: var(--cuerpo);
  background: none;
  border: none;
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background .18s, color .18s;
  line-height: 1.35;
}
.pl-link:hover { background: rgba(191,144,4,0.09); color: var(--tinta); }
.pl-link.activo {
  background: var(--panel);
  color: var(--tinta);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--oro-vivo);
}
.pl-link:focus-visible { outline: 2px solid var(--oro-vivo); outline-offset: 2px; }

/* ── Contenido ────────────────────────────────────────────────── */
.pl-main { min-width: 0; }
.pl-panel { display: none; }
.pl-panel.activo { display: block; animation: pl-entra .22s ease-out; }
@keyframes pl-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pl-panel.activo { animation: none; }
}

/* ── Botón del menú (solo móvil) ──────────────────────────────── */
.pl-abrir {
  display: none;
  align-items: center;
  gap: 10px;
  font-family: var(--caps);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 12px 16px;
  cursor: pointer;
  width: 100%;
  margin-bottom: 16px;
}
.pl-abrir b { font-weight: 600; color: var(--oro); }
.pl-abrir::before {
  content: "";
  width: 16px; height: 2px;
  background: var(--tinta);
  box-shadow: 0 5px 0 var(--tinta), 0 -5px 0 var(--tinta);
  flex: 0 0 auto;
}
.pl-tapa {
  display: none;
  position: fixed; inset: 0;
  background: rgba(34,50,79,0.35);
  z-index: 40;
}
.pl-tapa.visible { display: block; }

/* ── El botón vive en la barra de arriba, a la izquierda del logo ── */
.pl-abrir.en-barra {
  width: auto;
  margin: 0 10px 0 0;
  padding: 9px 12px;
  border-radius: 999px;
  flex: 0 0 auto;
  order: -1;                      /* siempre el primero de la barra */
}
.pl-abrir.en-barra .pl-abrir-txt { display: none; }   /* solo el icono */

@media (max-width: 900px) {
  .pl-shell { grid-template-columns: 1fr; gap: 0; }
  .pl-abrir { display: flex; }
  .pl-abrir.en-barra { display: inline-flex; }
  .pl-side {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(310px, 86vw);
    max-height: none;
    height: 100dvh;          /* de arriba abajo de la pantalla */
    background: var(--panel);
    border-right: 1px solid var(--hair);
    border-radius: 0 26px 26px 0;
    box-shadow: 14px 0 40px rgba(0,0,0,0.45);
    padding: 20px 12px 26px;
    z-index: 60;
    transform: translateX(-104%);
    transition: transform .26s ease-out;
    overflow-y: auto;
  }
  .pl-side.abierto { transform: none; }
  .pl-side-tit { padding-left: 14px; }
  .pl-link { padding-left: 14px; font-size: 1.02rem; border-radius: 12px; }
  /* El logo de la iglesia corona el cajón, como en la portada */
  .pl-side-top {
    display: flex; align-items: center; gap: 11px;
    padding: 2px 8px 16px; margin-bottom: 10px;
    border-bottom: 1px solid var(--hair);
  }
  .pl-side-top img { height: 34px; width: auto; background: #fff; border-radius: 999px; padding: 5px 9px; }
  .pl-side-top b { font-family: var(--serif); font-size: 0.95rem; line-height: 1.15; color: var(--tinta); }
  .pl-side-top small { display: block; font-family: var(--body); font-weight: 500; font-size: 0.76rem; color: var(--cuerpo); }
}
@media (prefers-reduced-motion: reduce) {
  .pl-side { transition: none; }
}