/* ZB_PANEL_LATERAL · el panel con menu al lado.
   El menu se queda pegado arriba mientras se lee la seccion; en el movil pasa
   a ser una fila que se desliza, porque una columna de ocho entradas en 390
   pixeles se come la pantalla entera antes de enseñar nada. */

/* El panel necesita mas ancho que una pagina de texto: aqui caben tablas,
   listas de cuadernos y las tres columnas de Canvas. */
body.zb-panel main > .wrap,
body.zb-panel #principal > .wrap { max-width: 1500px; }

.plat { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 22px; align-items: start; }

.plat-menu {
  position: sticky; top: 86px;
  display: flex; flex-direction: column; gap: 4px;
  background: #fff; border: 1px solid var(--line, #ecdfc9); border-radius: 16px;
  padding: 10px; box-shadow: 0 1px 2px rgba(43,33,24,.04), 0 8px 24px -14px rgba(43,33,24,.16);
}
.plat-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; font-family: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--muted, #5b4f42); background: transparent; border: 0; cursor: pointer;
  padding: 11px 13px; border-radius: 11px; line-height: 1.3; transition: .14s;
}
.plat-item:hover { background: var(--panel, #FFF6E8); color: var(--ink, #2B2118); }
.plat-item.on {
  background: var(--panel2, #FBEBD1); color: var(--ink, #2B2118); font-weight: 800;
  box-shadow: inset 3px 0 0 var(--brand, #E8960C);
}
.plat-item .ic { flex: 0 0 auto; font-size: 15px; opacity: .75; width: 18px; text-align: center; }
.plat-item.on .ic { opacity: 1; color: var(--brand, #E8960C); }
.plat-item .tx { flex: 1; min-width: 0; }

/* Una seccion a la vista cada vez. */
.plat-cuerpo > .card { display: none; }
.plat-cuerpo > .card.plat-on { display: block; }
.plat-cuerpo > .card { margin: 0; }

/* Canvas necesita todo el ancho que haya: menos relleno y las columnas a lo
   que den de si. */
.plat-cuerpo > #c-canvas.plat-on { padding-left: 20px; padding-right: 20px; }

@media (max-width: 900px) {
  .plat { grid-template-columns: 1fr; gap: 14px; }
  .plat-menu {
    position: sticky; top: 64px; z-index: 20;
    flex-direction: row; gap: 6px; overflow-x: auto; padding: 8px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  }
  .plat-menu::-webkit-scrollbar { display: none; }
  .plat-item { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; padding: 10px 14px; }
  .plat-item.on { box-shadow: inset 0 -3px 0 var(--brand, #E8960C); }
  .plat-cuerpo > #c-canvas.plat-on { padding-left: 14px; padding-right: 14px; }
}

/* ---- Zubi Canvas dentro del panel ----
   Dos cosas se cortaban: la columna de la derecha, que tiene menos alto que
   las otras dos pero heredaba el mismo tope y se comia el aviso final; y las
   columnas, demasiado estrechas cuando el panel medía 1100 px de ancho.
   Ahora solo hacen scroll por dentro las dos que lo necesitan —el banco y el
   cuaderno— y la del equilibrio crece lo que haga falta. */
.zbc .col { max-height: none; }
.zbc .tres > .col:nth-child(1) .cuerpo,
.zbc .tres > .col:nth-child(2) .cuerpo { max-height: 62vh; overflow-y: auto; }
.zbc .tres > .col:nth-child(3) .cuerpo { overflow: visible; }
.zbc .tres { align-items: start; }

@media (max-width: 1100px) {
  .zbc .tres > .col:nth-child(1) .cuerpo,
  .zbc .tres > .col:nth-child(2) .cuerpo { max-height: 52vh; }
}
@media (max-width: 720px) {
  .zbc .tres > .col:nth-child(1) .cuerpo,
  .zbc .tres > .col:nth-child(2) .cuerpo { max-height: 60vh; }
}