/* Tablero de la TV. Pensado para leerse a 3 metros: números grandes,
   colores planos de estado, sin sombras ni adornos. */

.tv { min-height: 100vh; display: flex; flex-direction: column; }
.tvbar {
  flex: 0 0 auto; display: flex; align-items: baseline; gap: .9rem;
  background: var(--graphite); color: #fff; padding: .35rem 1rem;
}
.brand { font-family: var(--font-cond); font-weight: 700; font-size: 1.15rem; }
.brand-sub { color: #d6d8dc; font-size: .95rem; }
.clock { margin-left: auto; font-family: var(--font-cond); font-weight: 600; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.loading { padding: 2rem; }

.board { flex: 1; display: grid; gap: .6rem; padding: .6rem; grid-template-columns: 1fr; }
.zone-picker { display: none; }

/* ----- Tarjeta de zona ----- */
.zcard {
  --st: var(--none); --st-ink: #fff;
  display: flex; flex-direction: column; min-width: 0;
  background: var(--paper); border: .25em solid var(--st); border-radius: 4px; overflow: hidden;
}
.zhead { display: flex; align-items: center; gap: .6em; background: var(--st); color: var(--st-ink); padding: .3em .6em; }
.zname { margin: 0; flex: 1; min-width: 0; font-family: var(--font-cond); font-weight: 700; font-size: 1.3em;
  letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zstate { font-family: var(--font-cond); font-weight: 600; font-size: 1em; white-space: nowrap; }
.zclose {
  flex: 0 0 auto; width: 2em; height: 2em; border-radius: 50%;
  border: .14em solid currentColor; background: transparent; color: inherit;
  font-weight: 700; line-height: 1; display: grid; place-items: center; font-size: 1em;
}
.zclose:hover { background: rgba(255, 255, 255, .2); }

.zlock { background: var(--urgent); color: #fff; font-weight: 600; padding: .25em .6em; font-size: .9em; }

.zid { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .6em; align-items: center;
  padding: .4em .6em; border-bottom: .14em solid var(--st); }
.zclient { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zmodel { color: var(--ink-soft); white-space: nowrap; font-family: var(--font-cond); font-weight: 600; }
.zid .plate { font-size: 1.3em; }

.zbody { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.zleft { padding: .35em .6em; overflow: auto; border-right: .14em solid var(--st); display: flex; flex-direction: column; gap: .35em; }
.checks { list-style: none; margin: 0; padding: 0; }
.check {
  display: flex; align-items: center; gap: .55em; width: 100%; text-align: left;
  background: none; border: 0; padding: .2em 0; color: var(--ink); font-size: 1em; line-height: 1.2;
}
.check .box { flex: 0 0 auto; width: 1.1em; height: 1.1em; border: .14em solid var(--ink); display: grid; place-items: center; }
.check[aria-pressed="true"] .box { background: var(--ink); }
.check[aria-pressed="true"] .box::after { content: '✓'; color: #fff; font-size: .8em; font-weight: 700; }
.check[aria-pressed="true"] .tname { color: var(--ink-soft); text-decoration: line-through; }
.check:hover .box { border-color: #1a5fd0; }

.zprog { display: flex; align-items: center; gap: .5em; font-size: .85em; color: var(--ink-soft); }
.zprog .bar { flex: 1; height: .45em; background: #e3e5e8; }
.zprog .bar i { display: block; height: 100%; background: var(--ink); }

.zparts { display: flex; flex-wrap: wrap; gap: .35em; margin-top: auto; }
.part, .addpart { font-size: .82em; border: .1em solid var(--ink); background: #fff; padding: .1em .45em; border-radius: 3px; }
.part em { font-style: normal; color: var(--ink-soft); }
.part.is-open { border-color: var(--urgent); }
.addpart { font-weight: 600; border-style: dashed; }

.zright { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.zright > div { display: flex; align-items: center; justify-content: center; gap: .35em; flex-wrap: wrap;
  border-bottom: .14em solid var(--st); padding: .25em; text-align: center;
  font-family: var(--font-cond); font-weight: 600; }
.zright > div:last-child { border-bottom: 0; }
.lbl { font-size: .9em; }
.zmeta strong { font-size: 2em; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.zmeta.is-late strong { color: var(--urgent); }
.zstage { font-size: 1.15em; }
.zdue { font-size: 1.05em; }

.zempty { flex: 1; display: grid; place-items: center; color: var(--ink-soft); font-family: var(--font-cond); font-weight: 600; font-size: 1.4em; }

.zqueue { display: flex; align-items: center; gap: .4em; padding: .35em .5em; border-top: .14em solid var(--st); background: #f5f6f7; }
.hist { font-family: var(--font-cond); font-weight: 600; font-size: .8em; border: .1em solid var(--ink); background: #fff; padding: .15em .5em; white-space: nowrap; }
.navq { background: none; border: 0; font-size: 1.05em; padding: 0 .2em; }
.chips { flex: 1; display: flex; gap: .7em; overflow-x: auto; scrollbar-width: none; padding: .3em .35em; }
.chips::-webkit-scrollbar { display: none; }
.chip { font-size: .95em; border-width: .1em; box-shadow: 0 0 0 .22em var(--st); cursor: pointer; }
.chip.on { outline: .14em solid var(--ink); outline-offset: .38em; }

/* ----- Estados ----- */
.zcard.st-ok { --st: var(--ok); --st-ink: #fff; }
.zcard.st-warn { --st: var(--warn); --st-ink: #1b1d20; }
.zcard.st-urgent { --st: var(--urgent); --st-ink: #fff; }
.zcard.st-late { --st: var(--late); --st-ink: #fff; }
.zcard.st-none { --st: var(--none); --st-ink: #fff; }

/* ----- Pantalla grande: todo cabe sin desplazarse ----- */
@media (min-width: 992px) {
  .tv { height: 100vh; }
  .board { min-height: 0; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .zcard { min-height: 0; font-size: clamp(12px, 1.02vw, 26px); }
  .board.cols-3 .zcard { font-size: clamp(11px, .74vw, 20px); }
}

/* ----- Tableta: dos tarjetas por fila ----- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .board { grid-template-columns: 1fr 1fr; }
  .zcard { font-size: 14px; min-height: 380px; }
}

/* ----- Celular: una tarjeta, selector de zona y botones grandes ----- */
@media (max-width: 767.98px) {
  .tvbar { flex-wrap: wrap; row-gap: 0; }
  .brand-sub { display: none; }
  .zone-picker { display: flex; gap: .4rem; overflow-x: auto; padding: .5rem .6rem 0; }
  .zone-picker button { flex: 0 0 auto; border: 2px solid var(--st); background: #fff; font-family: var(--font-cond);
    font-weight: 600; padding: .35rem .7rem; border-radius: 3px; min-height: 44px; }
  .zone-picker button[aria-current="true"] { background: var(--st); color: var(--st-ink); }
  .zcard { font-size: 16px; }
  .zname { white-space: normal; font-size: 1.15em; line-height: 1.1; }
  .zcard.m-hide { display: none; }
  .zbody { grid-template-columns: 1fr; }
  .zleft { border-right: 0; border-bottom: .14em solid var(--st); }
  .zright { grid-template-rows: none; }
  .zright > div { min-height: 56px; }
  .check { min-height: 44px; }
  .zclose { width: 44px; height: 44px; }
  .part, .addpart, .hist { min-height: 40px; }
  .zid { grid-template-columns: 1fr auto; }
  .zid .zmodel { grid-row: 2; }
}