/* El armado de las páginas de Lab (layout), como en ejemplos/plantilla.html del sistema de diseño. Los componentes son
   todos del sistema (tokens.css y componentes.css); aquí solo va cómo se ubican, y el bloque de código, que al sistema
   todavía le falta (se arma con sus tokens). */
* { box-sizing: border-box; }
body { margin: 0; background: var(--ts-papel); color: var(--ts-tinta); font-family: var(--ts-font-texto); font-size: 16px; line-height: 1.5; }
h1, h2, h3, p { margin: 0; }
.app { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 100vh; }
.app > .ts-sidebar { position: sticky; top: 0; height: 100vh; }
.principal { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.contenido { width: 100%; max-width: 1080px; margin: 0 auto; padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-content: start; }
.solo-movil { display: none; }
/* Filas, tarjetas, botones y pestañas que son enlaces (el sistema los muestra como botones) */
a.ts-tarjeta-item, a.ts-fila, a.ts-btn, a.ts-tab, a.ts-nav-item { text-decoration: none; }
a.ts-tarjeta-item, a.ts-fila { color: inherit; }
.dos-columnas { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.pila { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ts-e-3); align-content: start; }
.pila-grande { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ts-e-6); align-content: start; }
.fila-acciones { display: flex; flex-wrap: wrap; gap: var(--ts-e-3); align-items: center; }
.texto-2 { color: var(--ts-tinta-2); font-size: var(--ts-t-sm); }
.texto-3 { color: var(--ts-tinta-3); font-size: var(--ts-t-xs); }
.lista-puntos { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--ts-tinta-2); font-size: var(--ts-t-sm); }
.persona-menu { position: relative; }
.persona-menu > summary { list-style: none; cursor: pointer; }
.persona-menu > summary::-webkit-details-marker { display: none; }
.persona-menu .ts-menu-lista { position: absolute; right: 0; top: calc(100% + 8px); z-index: 25; min-width: 240px; }
.persona-menu .ts-menu-lista form { margin: 0; }
.persona-menu .ts-menu-lista button { width: 100%; }
dialog.ts-modal { padding: 0; width: min(560px, calc(100% - 32px)); max-width: 560px; grid-template-columns: minmax(0, 1fr); }
dialog.ts-modal .cuerpo { grid-template-columns: minmax(0, 1fr); }
dialog.ts-modal:not([open]) { display: none; }
dialog.ts-modal::backdrop { background: var(--ts-velo); }
.ts-panel[hidden], .ts-velo[hidden] { display: none; }
.ts-panel form { display: contents; }
.ts-panel .cuerpo { overflow: auto; padding: 0 var(--ts-e-6) var(--ts-e-6); display: grid; gap: var(--ts-e-4); align-content: start; }
.ts-panel .acciones { display: flex; justify-content: flex-end; gap: var(--ts-e-3); padding: var(--ts-e-4) var(--ts-e-6); border-top: 1px solid var(--ts-borde); }

/* Bloque de código (falta en el sistema de diseño: se pidió agregarlo) */
.lab-codigo { margin: 0; padding: var(--ts-e-3) 44px var(--ts-e-3) var(--ts-e-4); background: var(--ts-elevado); border: var(--ts-borde-fino) solid var(--ts-borde); border-radius: var(--ts-r-2); font-size: var(--ts-t-xs); line-height: 1.6; overflow-x: auto; white-space: pre; color: var(--ts-tinta); }
.lab-codigo-caja { position: relative; }
.lab-codigo-caja .ts-icono-btn { position: absolute; top: 4px; right: 4px; }
code.ts-mono { font-size: 0.9em; }

/* El asistente */
.chat { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ts-e-4); }
.chat .mensaje { display: grid; gap: var(--ts-e-2); max-width: 100%; }
.chat .mensaje.yo { justify-self: end; max-width: 80%; padding: var(--ts-e-3) var(--ts-e-4); background: var(--ts-elevado); border: var(--ts-borde-fino) solid var(--ts-borde); border-radius: var(--ts-r-2); white-space: pre-wrap; }
.chat .mensaje.ia { padding: var(--ts-e-3) 0; }
.chat .mensaje.ia p, .chat .mensaje.ia ul, .chat .mensaje.ia ol { margin: 0; }
.chat .mensaje.ia ul, .chat .mensaje.ia ol { padding-left: 20px; }
.chat-caja { position: sticky; bottom: 0; background: var(--ts-papel); padding: var(--ts-e-3) 0 var(--ts-e-4); display: grid; gap: var(--ts-e-2); }
.chat-caja textarea { min-height: 72px; resize: vertical; }

@media (max-width: 900px) { .dos-columnas { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app > .ts-sidebar:not(.ts-sidebar--drawer) { display: none; }
  .app > .ts-sidebar.ts-sidebar--drawer { height: auto; }
  .solo-movil { display: grid; }
  .contenido { padding: 16px; }
  .ts-cabecera { padding: 0 8px 0 4px; }
  .chat .mensaje.yo { max-width: 100%; }
}