@charset "UTF-8";
/* ==========================================================================
   Menú lateral oscuro y plegable (26/10/2026). Lo comparten el panel y el
   área de cliente: el marcado lo genera inc/lateral.php y el botón de
   plegar lo conecta assets/js/lateral.js. La página se pinta ya plegada
   cuando existe la cookie zoi_lateral (clase lateral-plegado en <body>).

   En pantalla estrecha (≤900 px, 31/10/2026) la misma columna se convierte
   en un cajón que entra desde la izquierda, abierto desde la barra
   .lateral__abrir. Mismo marcado, solo cambia el CSS.
   ========================================================================== */

.con-lateral {
  display: grid; grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--sp-6); align-items: start;
}
.lateral-plegado .con-lateral { grid-template-columns: 3.25rem minmax(0, 1fr); }

/* Solo existen en el cajón del móvil. */
.lateral__abrir, .lateral__fondo, .lateral__cabecera { display: none; }

/* La columna negra ocupa el lateral entero (30/10/2026, petición del
   usuario: una caja flotante a media altura «queda muy raro»). La altura es
   fija a todo el viewport bajo la cabecera, no la de su contenido: en las
   páginas cortas también llega abajo, y en las largas acompaña (sticky). */
.lateral {
  position: sticky; top: calc(var(--header-h) + 1rem);
  height: calc(100vh - var(--header-h) - 2rem);
  max-height: calc(100vh - var(--header-h) - 2rem); overflow-y: auto;
  background: var(--ink-950); color: var(--ink-300);
  border-radius: var(--radius-lg); padding: var(--sp-3);
  display: grid; gap: var(--sp-2); align-content: start;
}

.lateral__toggle {
  display: flex; align-items: center; gap: .4rem; width: 100%;
  background: transparent; border: 1px solid var(--ink-800); border-radius: 8px;
  color: var(--ink-300); font: inherit; font-size: var(--fs-xs); font-weight: 600;
  padding: .4rem .6rem; cursor: pointer;
}
.lateral__toggle:hover { background: var(--ink-900); color: var(--white); }
.lateral__toggle svg { transform: rotate(90deg); transition: transform .15s ease; flex-shrink: 0; }
.lateral-plegado .lateral__toggle { justify-content: center; padding-inline: 0; }
.lateral-plegado .lateral__toggle svg { transform: rotate(-90deg); }
.lateral-plegado .lateral__toggle-texto,
.lateral-plegado .lateral__nav { display: none; }

.lateral__nav { display: grid; gap: var(--sp-3); margin-top: var(--sp-2); }
.lateral__grupo-titulo {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-400); padding: .25rem .4rem;
}
summary.lateral__grupo-titulo { cursor: pointer; list-style: none; user-select: none; }
summary.lateral__grupo-titulo::-webkit-details-marker { display: none; }
summary.lateral__grupo-titulo::before {
  content: '▸'; display: inline-block; margin-right: .35rem;
  transition: transform .15s ease; color: var(--ink-500);
}
details[open] > summary.lateral__grupo-titulo::before { transform: rotate(90deg); }
summary.lateral__grupo-titulo:hover { color: var(--white); }
.lateral__grupo-nav { display: grid; gap: .1rem; margin-top: .2rem; }
.lateral__link {
  display: block; padding: .42rem .65rem; border-radius: 8px;
  text-decoration: none; font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink-300);
}
.lateral__link:hover { background: var(--ink-800); color: var(--white); }
/* Naranja con texto oscuro: 6,2:1. Blanco sobre naranja no pasa AA. */
.lateral__link.is-activo { background: var(--zoi-orange); color: var(--ink-950); font-weight: 600; }
.lateral__link:focus-visible, .lateral__toggle:focus-visible,
.lateral__abrir:focus-visible, .lateral__cerrar:focus-visible {
  outline: 2px solid var(--zoi-orange); outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Tablet y móvil: cajón lateral (31/10/2026). Antes la columna pasaba a ser
   una banda de grupos plegados encima del contenido, y para un administrador
   con el teléfono era un laberinto: cada grupo había que abrirlo a ciegas y
   el abierto empujaba el contenido. Ahora hay UNA barra oscura con la sección
   actual; al pulsarla entra el menú completo desde la izquierda, con la
   sección activa marcada y su grupo abierto, y se cierra con el aspa, tocando
   fuera o con Escape. La preferencia de plegado del escritorio no aplica aquí.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .con-lateral, .lateral-plegado .con-lateral { grid-template-columns: 1fr; gap: var(--sp-4); }

  .lateral__abrir {
    display: flex; align-items: center; gap: .6rem; width: 100%;
    background: var(--ink-950); color: var(--white); border: 0;
    border-radius: var(--radius-lg); padding: .7rem .9rem; cursor: pointer;
    font: inherit; font-size: var(--fs-sm); font-weight: 600; text-align: left;
  }
  .lateral__abrir svg { flex-shrink: 0; }
  .lateral__abrir-actual {
    margin-left: auto; max-width: 55%; color: var(--zoi-orange);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  .lateral__fondo { position: fixed; inset: 0; z-index: 120; background: rgba(8, 10, 14, .6); }
  .lateral__fondo:not([hidden]) { display: block; }

  .lateral, .lateral-plegado .lateral {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 130;
    width: min(20rem, 86vw); height: 100dvh; max-height: none;
    border-radius: 0; padding: var(--sp-3) var(--sp-3) var(--sp-6);
    display: grid; align-content: start; gap: var(--sp-2);
    transform: translateX(-100%); visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
    box-shadow: 0 0 40px rgba(0, 0, 0, .45);
  }
  .lateral-abierto .lateral { transform: none; visibility: visible; transition: transform .2s ease; }
  body.lateral-abierto { overflow: hidden; }

  .lateral__toggle { display: none; }
  .lateral__cabecera {
    display: flex; align-items: center; justify-content: space-between;
    padding: .25rem .4rem .6rem; border-bottom: 1px solid var(--ink-800);
  }
  .lateral__cabecera-titulo { font-size: var(--fs-sm); font-weight: 700; color: var(--white); }
  .lateral__cerrar {
    display: inline-flex; background: transparent; border: 1px solid var(--ink-800);
    border-radius: 8px; color: var(--ink-300); padding: .4rem; cursor: pointer;
  }
  .lateral__cerrar:hover { background: var(--ink-900); color: var(--white); }

  .lateral__nav, .lateral-plegado .lateral__nav { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
  /* Objetivos de dedo: 44 px de alto en enlaces y títulos de grupo. */
  summary.lateral__grupo-titulo { padding: .65rem .4rem; }
  .lateral__link { padding: .7rem .75rem; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lateral, .lateral-abierto .lateral, .lateral__toggle svg,
  summary.lateral__grupo-titulo::before { transition: none; }
}

/* Área de cliente: el mismo menú bajo la cabecera pública. Las páginas
   siguen trayendo su .section y su .wrap; aquí solo se les quita el aire
   sobrante para que el contenido arranque a la altura del menú. */
.area { padding-block: var(--sp-6) var(--sp-4); }
.area__main { min-width: 0; }
.area__main .wrap { width: 100%; }
.area__main > .section:first-child,
.area__main > .breadcrumb + .section { padding-top: 0; }