/*
 * Panel lateral que se oculta solo (revisión del dueño, 16/10/2026): más ancho para la parte de trabajo.
 * - Normal: oculto; sale encima del contenido solo al pulsar ☰ en la franja (a voluntad, decisión del dueño 16/10/2026).
 * - «Fijar panel»: se queda a la izquierda como antes (clase lateral-fijo en <html>, recordada en este navegador).
 * Comportamiento en public/js/lateral.js.
 */
.franja-lateral{border:0;background:transparent;cursor:pointer;padding:0;font:inherit}

html:not(.lateral-fijo) .marco:has(> .sidebar),
html:not(.lateral-fijo) .app:has(> .sidebar){grid-template-columns:minmax(0,1fr)}

html:not(.lateral-fijo) .marco > .sidebar,
html:not(.lateral-fijo) .app > .sidebar{
  position:fixed;top:12px;left:12px;bottom:12px;width:300px;max-width:calc(100vw - 24px);overflow:auto;z-index:60;
  transform:translateX(calc(-100% - 24px));visibility:hidden;
  transition:transform .2s ease, visibility 0s linear .2s;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
/* Con alto fijo, las tarjetas del panel no se encogen: el panel se desplaza con su propia barra. */
html:not(.lateral-fijo) .marco > .sidebar > *,html:not(.lateral-fijo) .app > .sidebar > *{flex-shrink:0}
html.lateral-abierto:not(.lateral-fijo) .marco > .sidebar,
html.lateral-abierto:not(.lateral-fijo) .app > .sidebar{transform:none;visibility:visible;transition:transform .2s ease, visibility 0s}

.sidebar .lateral-fijar{align-self:flex-end;cursor:pointer;font:inherit;font-size:12px;color:#d8f6ff;border:1px solid rgba(98,235,255,.28);
  background:rgba(98,235,255,.08);border-radius:999px;padding:5px 12px}
.sidebar .lateral-fijar:hover{background:rgba(98,235,255,.16)}

@media (prefers-reduced-motion:reduce){
  html:not(.lateral-fijo) .marco > .sidebar,html:not(.lateral-fijo) .app > .sidebar{transition:none}
}