/* Modo TV: oscuro, letra grande para leer a 3-4 metros, todo en vw/vh para que entre igual en cualquier TV. */
:root { --fondo: #0b0f15; --sup: #151b24; --sup-2: #1b2330; --borde: #273041; --tx: #f2f4f7; --tx-2: #b4bccb; --tx-3: #7d8696;
  --acento: #3987e5; --good: #2fbf5b; --warning: #f4b324; --critical: #ef5350; color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--fondo); color: var(--tx); overflow: hidden; cursor: none;
  font: 1.15vw/1.35 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2 { margin: 0; letter-spacing: -.01em; }
.sec { color: var(--tx-3); }
.logo { width: 3.2vw; height: 3.2vw; border-radius: .8vw; display: grid; place-items: center; font-weight: 800; font-size: 1.3vw;
  background: linear-gradient(120deg, #0f2a4d, #1d4f8f); border: 1px solid rgb(255 255 255 / .2); }

/* Emparejar */
.emparejar { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.2vw; padding: 4vw; }
.emparejar .logo { width: 6vw; height: 6vw; font-size: 2.4vw; border-radius: 1.4vw; }
.emparejar h1 { font-size: 3vw; }
.emparejar p { font-size: 1.6vw; max-width: 60vw; margin: 0; color: var(--tx-2); }
.codigo { font: 700 9vw/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .08em; padding: 1.5vw 3vw;
  border-radius: 1.6vw; background: var(--sup); border: 2px solid var(--borde); }

/* Tablero */
.tablero { height: 100%; display: flex; flex-direction: column; padding: 1.4vw 1.6vw 1.2vw; gap: 1.1vw; }
.cab { display: flex; align-items: center; gap: 2vw; }
.marca { display: flex; align-items: center; gap: .9vw; min-width: 22vw; }
.marca h1 { font-size: 2vw; } .marca .sec { font-size: 1.1vw; }
.kpis { flex: 1; display: flex; gap: .8vw; justify-content: center; }
.kpi { background: var(--sup); border: 1px solid var(--borde); border-radius: .8vw; padding: .5vw 1vw; min-width: 8vw; text-align: center; }
.kpi b { display: block; font-size: 2.2vw; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi span { font-size: .9vw; color: var(--tx-2); text-transform: uppercase; letter-spacing: .05em; }
.kpi.alerta b { color: var(--critical); } .kpi.ok b { color: var(--good); }
.reloj { text-align: right; min-width: 14vw; }
.reloj b { display: block; font-size: 2.8vw; line-height: 1; font-variant-numeric: tabular-nums; }
.reloj .sec { font-size: .95vw; display: inline-flex; align-items: center; gap: .4vw; }
.reloj i { width: .6vw; height: .6vw; border-radius: 50%; background: var(--good); }
.reloj .caido i { background: var(--critical); } .reloj .caido { color: var(--critical); }

/* Siempre una sola fila: tantas columnas como lleguen, todas del mismo ancho (nunca bajan a una segunda fila). */
.cols { flex: 1; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .9vw; }
.col { min-height: 0; display: flex; flex-direction: column; background: var(--sup); border: 1px solid var(--borde); border-radius: 1vw; border-top: .35vw solid var(--c, var(--acento)); }
/* Color de cada columna (la CSP de la TV no deja estilos en línea). */
.col[data-c=autorizar], .col[data-c=empacar] { --c: var(--warning); }
.col[data-c=llegan], .col[data-c=despachar] { --c: #8b7cf6; }
.col[data-c=tareas] { --c: var(--acento); }
.col[data-c=paradas], .col[data-c=urgente] { --c: var(--critical); }
.col h2 { display: flex; align-items: baseline; justify-content: space-between; gap: .5vw; padding: .8vw .9vw .6vw; font-size: 1.5vw; line-height: 1.15; }
.col h2 .n { font-size: 2vw; font-variant-numeric: tabular-nums; color: var(--c, var(--tx)); }
.col .extra { padding: 0 1vw .5vw; margin-top: -.3vw; font-size: 1.05vw; color: var(--tx-2); }
.col .extra.tarjeta { margin-top: -.2vw; font-size: .95vw; }
.lista { flex: 1; min-height: 0; overflow: hidden; padding: 0 .7vw .7vw; display: flex; flex-direction: column; gap: .55vw; scroll-behavior: smooth; }
.item { flex: none; background: var(--sup-2); border-radius: .6vw; padding: .7vw .8vw; border-left: .3vw solid transparent; }
.item.alerta { border-left-color: var(--critical); background: color-mix(in srgb, var(--critical) 12%, var(--sup-2)); }
.item.ok { border-left-color: var(--good); }
.item .t { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: .6vw; overflow-wrap: anywhere; font-weight: 700; font-size: 1.55vw; line-height: 1.2; }
.item .t .m { font-variant-numeric: tabular-nums; white-space: nowrap; }
.item .s { color: var(--tx-2); font-size: 1.25vw; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.item .w { color: var(--tx-3); font-size: 1.1vw; margin-top: .15vw; }
.item .nota { font-size: 1.15vw; margin-top: .25vw; font-weight: 600; }
.item.ok .nota { color: var(--good); } .item.alerta .nota { color: var(--critical); }
.vacio { color: var(--tx-3); font-size: 1.35vw; padding: 1vw .4vw; }
.vacio.bien { color: var(--good); }
.mas { color: var(--tx-3); font-size: 1.15vw; text-align: center; padding: .3vw; }
.col.hecho { --c: var(--good); background: color-mix(in srgb, var(--good) 6%, var(--sup)); }
.col.hecho .item { border-left-color: var(--good); }
.col.hecho .que { color: var(--good); font-size: 1vw; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.pasos { list-style: none; margin: .35vw 0 0; padding: 0; display: flex; flex-direction: column; gap: .25vw; font-size: 1.3vw; line-height: 1.25; }
.pasos li { display: flex; gap: .5vw; }
.pasos li::before { content: '○'; color: var(--tx-3); flex: none; }
.pasos li.si { color: var(--tx-3); text-decoration: line-through; }
.pasos li.si::before { content: '✓'; color: var(--good); }

/* Gerencia: KPI con montos, bloques sin fuente y de dónde sale cada columna. */
.col[data-c=pagar] { --c: var(--warning); } .col[data-c=cobrar] { --c: var(--good); }
.col[data-c=comprar] { --c: #8b7cf6; } .col[data-c=cuentas] { --c: var(--acento); }
.kpi.monto { flex: 1 1 0; min-width: 0; max-width: 15vw; padding: .5vw .7vw; border-top: .25vw solid var(--c, var(--acento)); }
.kpi[data-c=pagar] { --c: var(--warning); } .kpi[data-c=cobrar] { --c: var(--good); } .kpi[data-c=comprar] { --c: #8b7cf6; }
.kpi.monto b { font-size: 1.6vw; white-space: nowrap; }
.kpi.monto em { font-style: normal; font-size: .55em; color: var(--tx-2); font-weight: 600; }
.kpi.monto span, .kpi.monto small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi.monto small { display: block; font-size: .85vw; color: var(--tx-3); }
.kpi.aviso small { color: var(--critical); }
.kpi.nulo b { color: var(--tx-3); }
.sin-datos { flex: 1; margin: 0 .7vw .7vw; border: 2px dashed var(--borde); border-radius: .8vw; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: .6vw; padding: 1.5vw; }
.sin-datos b { font-size: 1.6vw; color: var(--tx-2); }
.sin-datos span { font-size: 1.25vw; color: var(--tx-3); }
.sin-datos small { font-size: 1.05vw; color: var(--tx-3); }
.fuente { padding: .45vw 1vw .6vw; font-size: .9vw; color: var(--tx-3); border-top: 1px solid var(--borde); }
/* Gerencia: cuentas destacadas (NBD Dubai, Caja Piro, Piro Popular) y top 10 deudores en filas de una línea. */
.col[data-c=deudores] { --c: #e0679b; }
.item.destacada:not(.alerta) { border-left-color: var(--acento); }
.lista.compacta { gap: .35vw; }
.lista.compacta .item { padding: .4vw .7vw; }
.item .t .m em, .col .extra em { font-style: normal; }
.lista.compacta .item .t { flex-wrap: nowrap; font-size: 1.2vw; }
.lista.compacta .item .t .m em { display: none; } /* el "USD" ya está en el total de la columna */
.lista.compacta .item .t span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista.compacta .item .s { font-size: 1vw; -webkit-line-clamp: 1; }
.lista.compacta .item .w:empty { display: none; }