/* ---------------------------------------------------------------
   Ledger Bento (Scrolltide), sitio Marca, oct-2026.
   Del original se toma el lenguaje: paneles con borde fino sobre un
   fondo oscuro con luz ámbar (acá navy con el oro de la marca), título y
   párrafo ARRIBA del visual, avatares que flotan alrededor de un disco
   que brilla (acá, doce asientos alrededor del profesor) y una lista
   tipo libro mayor con chips de estado, desvanecida en el borde con
   mask-image para sugerir que sigue. Verde solo para el estado «al día».

   No se usa el lienzo fijo de 1600x900: la grilla se reacomoda y en el
   celular los paneles se apilan.
   Uso: ver ledger-bento.js.
--------------------------------------------------------------- */
.lb { --lb-oro: var(--oro, #f4b300); --lb-verde: var(--verde, #67ab00); position: relative; display: grid; gap: 14px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding: clamp(14px, 2vw, 22px); border-radius: 8px; overflow: hidden; color: #fff; background: radial-gradient(70% 90% at 30% 0%, rgba(244, 179, 0, 0.30), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(157, 0, 103, 0.28), transparent 65%), #0d1440; }
.lb__panel { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: clamp(16px, 2vw, 22px); border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.14); background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); }
.lb__t { margin: 0; font-size: clamp(17px, 1.5vw, 20px); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.lb__p { margin: 0; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.78); max-width: 46ch; }
.lb__ej + .lb__t { padding-right: 76px; }
.lb__ej { position: absolute; top: 12px; right: 12px; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 2px; color: #0d1440; background: rgba(255, 255, 255, 0.86); }

/* ----- constelación: el profesor al centro, doce asientos alrededor ----- */
.lb-sala { position: relative; margin-top: 10px; aspect-ratio: 16 / 10; min-height: 220px; }
.lb-sala__lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lb-sala__lineas line { stroke: rgba(244, 179, 0, 0.32); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; transition: opacity 0.5s; }
.lb-sala__profe { position: absolute; left: 50%; top: 48%; width: clamp(78px, 9vw, 104px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; text-align: center; color: #0d1440; font-size: 12px; font-weight: 800; line-height: 1.15; background: radial-gradient(circle at 35% 30%, #ffe08a, var(--lb-oro) 62%); box-shadow: 0 0 0 6px rgba(244, 179, 0, 0.18), 0 0 46px 10px rgba(244, 179, 0, 0.35); }
.lb-sala__profe svg { width: 34%; height: 34%; margin-bottom: 2px; }
.lb-asiento { position: absolute; left: var(--x); top: var(--y); width: clamp(34px, 3.6vw, 44px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #3a2fa0, #1a2470); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 6px 14px rgba(0, 0, 0, 0.35); transition: transform 0.5s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)), opacity 0.5s; transition-delay: calc(var(--i, 0) * 110ms); }
.lb-asiento svg { width: 56%; height: 56%; }
.lb-asiento--fuera { background: transparent; color: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.42); border: 0; }
.lb-asiento--fuera::after { content: ''; position: absolute; inset: 22%; background: linear-gradient(45deg, transparent 46%, rgba(255, 255, 255, 0.7) 46% 54%, transparent 54%); }
.lb-sala__cuenta { position: absolute; left: 0; bottom: 0; display: flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.8); }
.lb-sala__cuenta b { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--lb-oro); font-variant-numeric: tabular-nums; }
.lb-sala__nota { position: absolute; right: 0; bottom: 0; max-width: 46%; text-align: right; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, 0.72); }
.lb.lb--anima:not(.lb--visto) .lb-asiento { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
.lb.lb--anima:not(.lb--visto) .lb-sala__lineas line { opacity: 0; }
.lb.lb--visto .lb-asiento--fuera { transition-delay: calc(13 * 110ms + 250ms); }

/* ----- libro mayor: el seguimiento por nombre ----- */
.lb-lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.lb-lista li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); }
.lb-lista i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 800; color: #0d1440; background: var(--c, #fff); }
.lb-lista b { display: block; font-size: 14px; font-weight: 700; line-height: 1.2; }
.lb-lista span { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.7); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-chip { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 4px 8px; border-radius: 999px; white-space: nowrap; color: #0d1440; background: var(--lb-oro); }
.lb-chip--ok { background: var(--lb-verde); color: #fff; }

@media (max-width: 860px) {
  .lb { grid-template-columns: minmax(0, 1fr); }
  .lb-sala { aspect-ratio: 1 / 0.92; }
  .lb-sala__nota { max-width: 52%; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-asiento, .lb-sala__lineas line { transition: none !important; }
}