/* ===========================================================================
   V3 — Consola de Triage
   Pensada para el momento en que suena el teléfono: el supervisor da un número
   de nómina y RRHH tiene que contestar en segundos qué pasa y cuánto falta.
   Pantalla fija sin scroll de página: cola a la izquierda, ficha a la derecha.
   Solo layout: los átomos vienen de shared/ternium.css.
   =========================================================================== */

html, body { height: 100%; }
body { overflow: hidden; }

.v3-shell { display: flex; flex-direction: column; height: 100vh; }

/* --- Consulta: el control más grande de la pantalla --------------------- */
.v3-query {
  display: flex; align-items: center; gap: 15px;
  padding: 15px 20px;
  background: var(--color-bg-panel);
  border-bottom: 1px solid var(--color-border);
}
.v3-query__box { position: relative; flex: 1 1 420px; max-width: 620px; }
.v3-query__box input {
  width: 100%; height: 48px; padding: 0 44px 0 16px;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-bg-panel);
  font-family: inherit; font-size: 20px; font-weight: 600; color: var(--color-text-main);
  font-variant-numeric: tabular-nums;
}
.v3-query__box input::placeholder { font-size: 15px; font-weight: 400; color: var(--color-text-light); }
.v3-query__box input:focus { border-color: var(--color-action-primary); outline: none; }
.v3-query__box > i {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 18px; color: var(--color-text-light); pointer-events: none;
}
.v3-kbd {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 300; color: var(--color-text-light);
}
.v3-kbd b {
  font-weight: 600; font-size: 10px; padding: 2px 5px;
  border: 1px solid var(--color-border); border-radius: 2px; background: var(--color-bg-alt);
}

/* --- Segmentos: los cuatro cortes que RRHH usa de verdad ---------------- */
.v3-segs { display: flex; gap: 0; background: var(--color-bg-panel); border-bottom: 1px solid var(--color-border); overflow-x: auto; }
.v3-seg {
  position: relative; flex: 1 0 auto; min-width: 156px;
  padding: 10px 16px; background: none; border: 0; border-right: 1px solid var(--color-border);
  font-family: inherit; text-align: left; cursor: pointer; color: inherit;
}
.v3-seg:last-child { border-right: 0; }
.v3-seg .n { font-size: 22px; font-weight: 700; line-height: 1.1; }
.v3-seg .l { display: block; font-size: 11px; text-transform: uppercase; color: var(--color-text-main); }
.v3-seg[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--color-brand-orange-2);
}
.v3-seg[aria-pressed="true"] .l { font-weight: 600; }

/* --- Cuerpo: cola + ficha ----------------------------------------------- */
.v3-body { flex: 1; display: grid; grid-template-columns: minmax(360px, 1fr) minmax(420px, 620px); min-height: 0; }
.v3-cola { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--color-border); background: var(--color-bg-panel); }
.v3-cola__scroll { position: relative; flex: 1; overflow: auto; }

/* Fila de la cola: el contador manda, todo lo demás lo acompaña. */
.v3-item {
  display: grid; grid-template-columns: 5px 34px minmax(0,1fr) auto;
  gap: 12px; align-items: center;
  width: 100%; padding: 6px 20px 6px 0;
  background: none; border: 0; border-bottom: 1px solid var(--color-border);
  font-family: inherit; text-align: left; color: inherit; cursor: pointer;
}
.v3-item:hover { background: var(--color-bg-alt); }
.v3-item[aria-current="true"] { background: #eef4f8; }
.v3-item__bar { width: 5px; height: 46px; border-radius: 0 1px 1px 0; }
.v3-item__nom { font-size: 13px; font-weight: 600; }
.v3-item__meta { font-size: 11px; color: var(--color-text-light); }
.v3-item__reloj { text-align: right; min-width: 104px; }
.v3-item__reloj .tx-count { font-size: 15px; }
.v3-item__reloj .tx-progress { width: 96px; margin-top: 5px; }

/* --- Ficha ---------------------------------------------------------------- */
.v3-ficha { display: flex; flex-direction: column; min-height: 0; background: var(--color-bg-page); }
.v3-ficha__scroll { position: relative; flex: 1; overflow: auto; padding: 20px; }
.v3-ficha__foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 10px 20px; background: var(--color-bg-alt); border-top: 1px solid var(--color-border);
}

/* El veredicto: la frase que RRHH le dice al supervisor por teléfono. */
.v3-veredicto {
  background: var(--color-bg-panel); border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-status-danger);
  padding: 20px; margin-bottom: 15px;
}
.v3-veredicto__frase { font-size: 20px; font-weight: 600; line-height: 24px; }
.v3-veredicto__reloj { display: flex; align-items: baseline; gap: 10px; margin-top: 15px; }
.v3-veredicto__reloj .tx-count { font-size: 40px; font-weight: 600; line-height: 1; }

@media (max-width: 1080px) {
  body { overflow: auto; }
  .v3-shell { height: auto; }
  .v3-body { grid-template-columns: 1fr; }
  .v3-cola { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .v3-cola__scroll { max-height: 60vh; }
  .v3-ficha__scroll { overflow: visible; }
}
@media (max-width: 720px) {
  .v3-query { flex-wrap: wrap; }
  .v3-query__box { flex: 1 1 100%; }
}