/* Aplicación de TrazaIA: barra lateral con historial + área de trabajo (editor o resultado). */
body.app { background: var(--superficie); height: 100dvh; overflow: hidden; }
.tablero { display: grid; grid-template-columns: 276px 1fr; height: 100dvh; }
.lateral { background: #fff; border-right: 1px solid var(--borde); display: flex; flex-direction: column; min-height: 0; }
.lateral .arriba { padding: 18px 16px 12px; display: flex; flex-direction: column; gap: 16px; }
.lateral .nuevo { width: 100%; }
.lateral h5 { font: 600 12px var(--f-texto); letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-3); margin: 6px 8px 6px; }
.historial { flex: 1; overflow-y: auto; padding: 0 8px 12px; min-height: 0; }
.historial .vacio { color: var(--tinta-3); font-size: 14px; padding: 8px; }
.item { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 10px; color: var(--tinta); }
.item:hover { background: var(--superficie); } .item.activo { background: var(--violeta-suave); }
.item .punto { width: 9px; height: 9px; border-radius: 50%; margin-top: 7px; flex: none; background: var(--borde-fuerte); }
.punto.ia { background: var(--ia); } .punto.mixto { background: var(--mixto); } .punto.humano { background: var(--humano); } .punto.mayormente_humano { background: linear-gradient(90deg, var(--humano) 50%, var(--mixto) 50%); }
.item .tit { font-size: 14px; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item .meta { font-size: 12px; color: var(--tinta-3); }
.lateral .abajo { border-top: 1px solid var(--borde); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.cupo { background: var(--superficie); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--tinta-2); }
.cupo b { color: var(--tinta); } .cupo .barra { height: 6px; border-radius: 9px; background: var(--borde); margin: 8px 0 6px; overflow: hidden; }
.cupo .barra i { display: block; height: 100%; background: var(--violeta); border-radius: 9px; }
.enlace-lat { font-size: 14px; color: var(--tinta-2); display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; }
.enlace-lat:hover { color: var(--violeta-2); text-decoration: none; }

.trabajo { overflow-y: auto; min-height: 0; }
.barra-sup { display: none; }
.contenido { max-width: 1120px; margin: 0 auto; padding: 32px 32px 64px; }
.contenido h1 { font-size: 30px; margin-bottom: 6px; }
.subt { color: var(--tinta-2); margin-bottom: 22px; }
.editor { background: #fff; border: 1px solid var(--borde); border-radius: 20px; box-shadow: var(--sombra); padding: 16px; }
.editor .titulo { width: 100%; border: 0; font: 600 20px var(--f-titulo); padding: 6px 6px 12px; outline: none; color: var(--tinta); background: none; }
.editor .area textarea { min-height: 46vh; }
.editor .fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.consejos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.consejo { background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 14px 16px; font-size: 14px; color: var(--tinta-2); }
.consejo b { display: block; color: var(--tinta); margin-bottom: 2px; }
.error { background: var(--ia-suave); color: #9b1c3c; border-radius: 12px; padding: 12px 14px; font-size: 14px; margin-top: 12px; }

/* Espera */
.espera { background: #fff; border: 1px solid var(--borde); border-radius: 20px; padding: 48px 32px; text-align: center; box-shadow: var(--sombra); }
.onda { width: 120px; height: 44px; margin: 0 auto 18px; }
.onda path { stroke: var(--violeta); stroke-width: 3; fill: none; stroke-linecap: round; stroke-dasharray: 160; animation: trazo 1.6s ease-in-out infinite; }
@keyframes trazo { 0% { stroke-dashoffset: 160; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -160; } }
.pasos-espera { list-style: none; padding: 0; margin: 18px auto 0; max-width: 360px; text-align: left; display: grid; gap: 10px; font-size: 15px; color: var(--tinta-3); }
.pasos-espera li::before { content: "○"; margin-right: 10px; color: var(--borde-fuerte); }
.pasos-espera li.hecho { color: var(--tinta-2); } .pasos-espera li.hecho::before { content: "✓"; color: var(--humano); }
.pasos-espera li.actual { color: var(--tinta); font-weight: 500; } .pasos-espera li.actual::before { content: "●"; color: var(--violeta); }

/* Resultado */
.cab-res { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.cab-res .acc { display: flex; gap: 8px; flex-wrap: wrap; }
.resultado { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.documento { background: #fff; border: 1px solid var(--borde); border-radius: 20px; padding: 32px 36px; box-shadow: var(--sombra); font-size: 16.5px; line-height: 1.75; }
.documento .parr { margin: 0 0 1.1em; padding-left: 16px; border-left: 3px solid transparent; white-space: pre-wrap; overflow-wrap: anywhere; }
.documento .parr.p-ia { border-left-color: var(--ia); } .documento .parr.p-mixto { border-left-color: var(--mixto); }
.documento mark { background: var(--ia-suave); color: inherit; border-bottom: 2px solid var(--ia-medio); padding: 1px 0; cursor: pointer; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.documento mark.foco { background: var(--ia-medio); border-bottom-color: var(--ia); }
.panel { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }
.veredicto { background: #fff; border: 1px solid var(--borde); border-radius: 20px; padding: 22px; box-shadow: var(--sombra); }
.veredicto .et { font: 600 12px var(--f-texto); letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-3); }
.veredicto .grande { font: 700 28px/1.15 var(--f-titulo); margin: 8px 0 4px; letter-spacing: -.02em; }
.veredicto.v-ia .grande { color: var(--ia); } .veredicto.v-mixto .grande { color: var(--mixto); } .veredicto.v-humano .grande, .veredicto.v-mayormente_humano .grande { color: var(--humano); }
.veredicto .pct { font-size: 15px; color: var(--tinta-2); }
.barra-ia { display: flex; height: 12px; border-radius: 9px; overflow: hidden; background: var(--humano-suave); margin: 16px 0 10px; }
.barra-ia i { display: block; background: var(--ia); }
.leyenda { display: flex; justify-content: space-between; font-size: 13px; color: var(--tinta-2); }
.leyenda span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.leyenda .l-ia::before { background: var(--ia); } .leyenda .l-h::before { background: var(--humano); }
.datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.datos div { background: var(--superficie); border-radius: 12px; padding: 10px; text-align: center; }
.datos b { display: block; font: 700 19px var(--f-titulo); } .datos span { font-size: 12px; color: var(--tinta-3); }
.caja-panel { background: #fff; border: 1px solid var(--borde); border-radius: 18px; padding: 18px; }
.caja-panel h4 { margin: 0 0 12px; font: 600 14px var(--f-texto); display: flex; justify-content: space-between; align-items: center; }
.mapa { display: flex; flex-wrap: wrap; gap: 4px; }
.mapa button { width: 18px; height: 26px; border: 0; border-radius: 4px; padding: 0; background: var(--humano-suave); }
.mapa button.m-ia { background: var(--ia); } .mapa button.m-mixto { background: var(--mixto); }
.mapa button:hover { outline: 2px solid var(--tinta); outline-offset: 1px; }
.nav-pasajes { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tinta-2); font-weight: 500; }
.nav-pasajes button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--borde); background: #fff; }
.nav-pasajes button:disabled { opacity: .35; }
.advertencia { font-size: 13px; color: var(--tinta-2); background: var(--superficie-2); border-radius: 14px; padding: 14px 16px; line-height: 1.5; }
.version { font: 500 12px var(--f-mono); color: var(--tinta-3); }

/* Diálogo de código */
dialog { border: 0; border-radius: 20px; padding: 26px; width: min(440px, 92vw); box-shadow: var(--sombra-fuerte); }
dialog::backdrop { background: rgba(21,18,31,.4); }
dialog h3 { font-size: 22px; margin-bottom: 8px; } dialog p { color: var(--tinta-2); font-size: 15px; }
dialog input { width: 100%; height: 44px; border: 1.5px solid var(--borde); border-radius: 12px; padding: 0 14px; font: 15px var(--f-mono); margin: 6px 0 16px; }
dialog .fila { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 1080px) { .resultado { grid-template-columns: 1fr; } .panel { position: static; order: -1; } }
@media (max-width: 860px) {
  .tablero { grid-template-columns: 1fr; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: 290px; z-index: 30; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--sombra-fuerte); }
  .lateral.abierta { transform: none; }
  .barra-sup { display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 14px; background: #fff; border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 10; }
  .contenido { padding: 20px 16px 48px; }
  .documento { padding: 22px 18px; font-size: 16px; }
  .consejos { grid-template-columns: 1fr; }
}
@media print {
  body.app { height: auto; overflow: visible; background: #fff; }
  .tablero { display: block; height: auto; } .lateral, .barra-sup, .cab-res .acc, .nav-pasajes { display: none !important; }
  .trabajo { overflow: visible; } .resultado { grid-template-columns: 1fr; } .panel { position: static; order: -1; }
  .documento, .veredicto, .caja-panel { box-shadow: none; }
  mark { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Lote */
.tabla-lote { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-lote td { padding: 12px 10px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla-lote tr:last-child td { border-bottom: 0; }
.tabla-lote .est { color: var(--tinta-3); white-space: nowrap; }
.tabla-lote .ver { font-weight: 600; white-space: nowrap; }
.tabla-lote .ver.ia { color: var(--ia); } .tabla-lote .ver.mixto { color: var(--mixto); } .tabla-lote .ver.humano, .tabla-lote .ver.mayormente_humano { color: var(--humano); }