/* ============================================================
   CONTROL_TIEMPOS.CSS — Posventa › Control de tiempos (Bandeja · Panorámica · Detalle)

   Portado LITERALMENTE del espécimen canónico de Claude Design (revisión 2, entregado por el
   gerente el 02/08/2026 en `seguimiento_ordenes.zip`, md5 11623901ab912fe7adb980de54276690).
   TODO va scopeado a #page-control_tiempos: este módulo no puede alterar ni un píxel de otro.

   Tokens: se consumen los canónicos de /css/atlas-tokens.css. El espécimen trae dos cosas que el
   canon del repo NO tiene y que aquí quedan LOCALES (nunca en :root, ERR de tocar el canon):
     · --ct-radius / --ct-radius-lg — el canon congeló --radius a 8/12 por layout legacy (P1b);
       el espécimen dibuja a 14/20. Se respeta el espécimen dentro de la página, y solo aquí.
     · --ct-dms / --ct-dms-bg / --ct-dms-bd — el violeta apagado con el que el espécimen marca
       «excedida SIN ninguna modificación posterior»: no es una alerta, es un dato que falta en el
       DMS. No existe en el canon porque ningún otro módulo tiene esa tercera situación.
   ============================================================ */
#page-control_tiempos {
  --ct-radius: 14px; --ct-radius-lg: 20px;
  --ct-dms: #5b53a3; --ct-dms-bg: #eceaf6; --ct-dms-bd: #cfc9e8;
}

/* ── cabecera ──────────────────────────────────────────────────────────────────────────────── */
#page-control_tiempos .ct-top { background: var(--surface); border-bottom: 1px solid var(--border); }
#page-control_tiempos .ct-top__row { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-6) var(--s-2); }
#page-control_tiempos .ct-top__t h1 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin: 0; }
#page-control_tiempos .ct-top__crumb { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
#page-control_tiempos .ct-top__sp { flex: 1; }

/* ── barra de filtros: la sirve el COMPONENTE ÚNICO (FB) ───────────────────────────────────────
   Norma: docs/arquitectura/SISTEMA_FILTROS.md. El aspecto vive en components.css (.fb-*) y en
   filtros.css (chips, etiqueta de ventana, hoja inferior); aquí queda SOLO el encuadre local.
   Aquí vivían antes .ct-fbar/.ct-f/.ct-inp/.ct-sel/.ct-seg y toda la hoja móvil (.ct-sheet, .ct-opt,
   .ct-chip…): eran una SEGUNDA gramática de filtros —otra barra, otro segmento, otro selector de
   empresa— y es exactamente la duplicación que la norma retira. El selector de empresa ya era el
   compartido (EMP.selector, estilado en atlas-componentes.css como .emp-sel).
   `position: relative` NO es decorativo: el desplegable de empresa (.emp-sel__pop) es
   `position: absolute` y FB lo emite como HERMANO de la .fb-bar, no dentro del disparador, así que
   sin contexto de posicionamiento aquí se ancla al viewport. */
#page-control_tiempos .fb-wrap { position: relative; padding: 0 var(--s-6) var(--s-3); margin-bottom: 0; }
/* Nota de alcance: un corte que el agregado NO aplica tiene que decirlo en pantalla, o el filtro se
   lee como roto (prohibición 6 de la norma). */
#page-control_tiempos .ct-nota { font-size: 11.5px; color: var(--text-2); margin-top: var(--s-2); text-wrap: pretty; }

/* ── página ────────────────────────────────────────────────────────────────────────────────── */
/* `width:100%` MAS padding lateral solo cuadra en border-box. Sin declararlo, la caja medía
   1148 + 2x34 = 1216 dentro de un padre de 1148 y empujaba scroll horizontal en toda la app. */
#page-control_tiempos .ct-page { box-sizing: border-box; padding: var(--s-5) var(--s-6) 80px; max-width: var(--page-max); width: 100%; }
#page-control_tiempos .ct-sec { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin: var(--s-5) 0 var(--s-2) 2px; display: flex; align-items: baseline; gap: 9px; }
#page-control_tiempos .ct-sec:first-child { margin-top: 0; }
#page-control_tiempos .ct-sec span { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 11.5px; color: var(--text-3); }
#page-control_tiempos .ct-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--ct-radius); box-shadow: var(--shadow-card); overflow: hidden; }
#page-control_tiempos .ct-card__hd { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
#page-control_tiempos .ct-card__hd h2 { font-size: 15px; font-weight: 700; margin: 0; }
#page-control_tiempos .ct-card__hd .ct-meta { font-size: 11.5px; color: var(--text-3); }
#page-control_tiempos .ct-card__bd { padding: var(--s-4) var(--s-5); }
#page-control_tiempos .ct-n { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "zero" 1; }

/* ── KPIs ──────────────────────────────────────────────────────────────────────────────────── */
#page-control_tiempos .ct-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
#page-control_tiempos .ct-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--ct-radius); box-shadow: var(--shadow-card); padding: var(--s-4) var(--s-4) var(--s-3); }
#page-control_tiempos .ct-kpi__l { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
#page-control_tiempos .ct-kpi__v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; margin-top: 6px; }
#page-control_tiempos .ct-kpi__v small { font-size: 15px; color: var(--text-3); margin-left: 3px; }
#page-control_tiempos .ct-kpi__s { font-size: 11.5px; color: var(--text-2); margin-top: 5px; }
#page-control_tiempos .ct-kpi--neg .ct-kpi__v { color: var(--neg); }

/* ── bloque «pendiente de registrar» (tono neutro: es carga administrativa, no un reproche) ─── */
#page-control_tiempos .ct-pend { display: flex; gap: var(--s-5); align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--ct-dms-bd); border-left: 4px solid var(--ct-dms); border-radius: var(--ct-radius); box-shadow: var(--shadow-card); padding: var(--s-4) var(--s-5); }
#page-control_tiempos .ct-pend__v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 500; line-height: 1; color: var(--ct-dms); }
#page-control_tiempos .ct-pend__t { font-size: 14px; font-weight: 600; max-width: 56ch; text-wrap: pretty; }
#page-control_tiempos .ct-pend__s { font-size: 12px; color: var(--text-2); margin-top: 4px; max-width: 70ch; text-wrap: pretty; }
#page-control_tiempos .ct-pend__sp { flex: 1; }

/* ── tags ──────────────────────────────────────────────────────────────────────────────────── */
#page-control_tiempos .ct-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; background: var(--surface-2); color: var(--text-3); white-space: nowrap; }
#page-control_tiempos .ct-tag--acc { background: var(--neg-bg); color: var(--neg); }
#page-control_tiempos .ct-tag--dms { background: var(--ct-dms-bg); color: var(--ct-dms); }
#page-control_tiempos .ct-tag--ok { background: var(--accent-weak); color: var(--accent-strong); }
#page-control_tiempos .ct-tag--warn { background: var(--warn-bg); color: var(--warn); }
#page-control_tiempos .ct-tag--est { background: var(--surface-3); color: var(--text-2); text-transform: none; letter-spacing: 0; font-weight: 600; }

/* ── tabla de la bandeja ───────────────────────────────────────────────────────────────────── */
/* `overflow-x:auto` NO basta por si solo: sin `min-width:0` la caja no puede encoger por debajo
   del ancho de su tabla, asi que en vez de desplazarse DENTRO empuja la pagina y aparece scroll
   horizontal en toda la pantalla. Detectado al medir el desbordamiento a 1440 y 1024 px. */
#page-control_tiempos .ct-tw { overflow-x: auto; min-width: 0; }
#page-control_tiempos .ct-dt { width: 100%; border-collapse: collapse; font-size: 13.5px; white-space: nowrap; }
#page-control_tiempos .ct-dt th { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); text-align: left; padding: 10px var(--s-3); background: var(--thead-bg); border-bottom: 1px solid var(--border-strong); }
#page-control_tiempos .ct-dt th.r, #page-control_tiempos .ct-dt td.r { text-align: right; }
#page-control_tiempos .ct-dt td { padding: 11px var(--s-3); border-bottom: 1px solid var(--row-border); vertical-align: middle; }
#page-control_tiempos .ct-dt tbody tr:hover { background: var(--hover); }
#page-control_tiempos .ct-dt .ct-or { font-family: var(--font-num); font-weight: 500; font-size: 13px; }
#page-control_tiempos .ct-dt .ct-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; white-space: nowrap; }
/* La descripción de modelo del DMS puede traer 60+ caracteres («Crafter 35 Furgón Batalla Media
   L3H2 2.0 TDI FWD 103 kW…») y reventaría el ancho de la tabla. Se recorta en pantalla; el valor
   íntegro queda en el `title`. No se altera el dato: solo el espacio que ocupa. */
#page-control_tiempos .ct-dt .ct-sub--veh { max-width: 26ch; overflow: hidden; text-overflow: ellipsis; }
#page-control_tiempos .ct-dt td.ct-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 500; }
#page-control_tiempos .ct-dt .ct-exc { color: var(--neg); font-weight: 500; }
#page-control_tiempos .ct-dt tr[data-st="acc"] td:first-child { box-shadow: inset 3px 0 var(--neg); }
#page-control_tiempos .ct-dt tr[data-st="dms"] td:first-child { box-shadow: inset 3px 0 var(--ct-dms-bd); }
#page-control_tiempos .ct-dt tr[data-st="ok"] { color: var(--text-2); }
#page-control_tiempos .ct-mini { width: 70px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 4px; }
#page-control_tiempos .ct-mini i { display: block; height: 100%; background: var(--neg); }
#page-control_tiempos .ct-mini i.ok { background: var(--accent); }
#page-control_tiempos .ct-pct { font-family: var(--font-num); font-size: 12px; font-variant-numeric: tabular-nums; }
#page-control_tiempos .ct-linkbtn { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: var(--radius-sm); white-space: nowrap; cursor: pointer; font-family: inherit; }
#page-control_tiempos .ct-linkbtn:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-weak); }
#page-control_tiempos .ct-linkbtn--acc { border-color: transparent; background: var(--neg); color: #fff; }
#page-control_tiempos .ct-linkbtn--acc:hover { background: #c9462f; color: #fff; }
#page-control_tiempos .ct-btn { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-weight: 600; font-size: 13px; padding: 9px 15px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 7px; min-height: 40px; cursor: pointer; font-family: inherit; }
#page-control_tiempos .ct-btn:hover { background: var(--hover); color: var(--text); }
#page-control_tiempos .ct-btn--primary { border-color: transparent; background: var(--accent); color: #fff; }
#page-control_tiempos .ct-btn--primary:hover { background: var(--accent-strong); }
#page-control_tiempos .ct-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border); background: var(--surface-2); font-size: 12px; color: var(--text-2); flex-wrap: wrap; }
#page-control_tiempos .ct-pgbtn { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-size: 12px; font-weight: 600; min-width: 32px; height: 32px; border-radius: 7px; cursor: pointer; font-family: inherit; }
#page-control_tiempos .ct-pgbtn.is-on { background: var(--accent); border-color: transparent; color: #fff; }
#page-control_tiempos .ct-pgbtn:disabled { opacity: .4; cursor: default; }

/* ── leyenda ───────────────────────────────────────────────────────────────────────────────── */
#page-control_tiempos .ct-legs { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border); background: var(--surface-2); }
#page-control_tiempos .ct-leg { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-2); }
#page-control_tiempos .ct-leg__sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* ── barras comparativas (panorámica) ──────────────────────────────────────────────────────── */
#page-control_tiempos .ct-brow { display: grid; grid-template-columns: 200px 1fr 96px; align-items: center; gap: var(--s-4); padding: 10px 0; border-top: 1px solid var(--row-border); }
#page-control_tiempos .ct-brow:first-child { border-top: 0; }
#page-control_tiempos .ct-brow__k { font-size: 13px; font-weight: 600; }
#page-control_tiempos .ct-brow__k small { display: block; font-size: 11px; color: var(--text-3); font-weight: 500; }
#page-control_tiempos .ct-btrack { height: 12px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
#page-control_tiempos .ct-btrack i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
#page-control_tiempos .ct-brow__v { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 13px; }
#page-control_tiempos .ct-brow__v small { display: block; font-size: 10.5px; color: var(--text-3); }

/* ── split mecánica / carrocería ───────────────────────────────────────────────────────────── */
#page-control_tiempos .ct-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
#page-control_tiempos .ct-blk { background: var(--surface); border: 1px solid var(--border); border-radius: var(--ct-radius); box-shadow: var(--shadow-card); padding: var(--s-4) var(--s-5); }
#page-control_tiempos .ct-blk__h { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
#page-control_tiempos .ct-blk__h h3 { font-size: 14px; font-weight: 700; margin: 0; }
#page-control_tiempos .ct-blk__g { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin-top: var(--s-3); }
#page-control_tiempos .ct-blk__n { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 500; }
#page-control_tiempos .ct-blk__l { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
#page-control_tiempos .ct-blk__note { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); font-size: 12px; color: var(--text-2); text-wrap: pretty; }

/* ── cronología (detalle de orden) ─────────────────────────────────────────────────────────── */
#page-control_tiempos .ct-cron { position: relative; padding-left: 26px; }
#page-control_tiempos .ct-cron::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 26px; width: 2px; background: var(--border); }
#page-control_tiempos .ct-ev { position: relative; padding: 0 0 var(--s-5); }
#page-control_tiempos .ct-ev::before { content: ""; position: absolute; left: -26px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); }
#page-control_tiempos .ct-ev--mod::before { border-color: var(--accent); background: var(--accent); }
#page-control_tiempos .ct-ev--ajuste::before { border-color: var(--accent); }
#page-control_tiempos .ct-ev--exc::before { border-color: var(--neg); background: var(--neg); }
#page-control_tiempos .ct-ev__d { font-family: var(--font-num); font-size: 12px; color: var(--text-3); }
#page-control_tiempos .ct-ev__t { font-size: 14px; font-weight: 700; margin-top: 2px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
#page-control_tiempos .ct-ev__n { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 500; }
#page-control_tiempos .ct-ev__s { font-size: 12.5px; color: var(--text-2); margin-top: 3px; max-width: 62ch; text-wrap: pretty; }
#page-control_tiempos .ct-tot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-2); }
#page-control_tiempos .ct-tot__c { padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--ct-radius); background: var(--surface-2); }
#page-control_tiempos .ct-tot__c--exc { background: var(--neg-bg); border-color: #f2cfc4; }
#page-control_tiempos .ct-tot__c--dms { background: var(--ct-dms-bg); border-color: var(--ct-dms-bd); }
#page-control_tiempos .ct-tot__l { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
#page-control_tiempos .ct-tot__v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 500; margin-top: 5px; }
#page-control_tiempos .ct-tot__c--exc .ct-tot__v { color: var(--neg); }
#page-control_tiempos .ct-tot__c--dms .ct-tot__v { color: var(--ct-dms); }
#page-control_tiempos .ct-tot__s { font-size: 11.5px; color: var(--text-2); margin-top: 3px; }
#page-control_tiempos .ct-say { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--ct-radius); padding: var(--s-4) var(--s-5); box-shadow: var(--shadow-card); }
#page-control_tiempos .ct-say__l { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
#page-control_tiempos .ct-say__q { font-size: 17px; line-height: 1.5; margin-top: 8px; text-wrap: pretty; }
#page-control_tiempos .ct-say__q b { font-family: var(--font-num); font-weight: 500; font-variant-numeric: tabular-nums; }
#page-control_tiempos .ct-hd { display: flex; gap: var(--s-5); flex-wrap: wrap; align-items: flex-start; }
#page-control_tiempos .ct-ordno { font-family: var(--font-num); font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
#page-control_tiempos .ct-ordsub { font-size: 12.5px; color: var(--text-2); margin-top: 3px; }
#page-control_tiempos .ct-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--s-3); font-size: 12.5px; margin: 0; }
#page-control_tiempos .ct-kv dt { color: var(--text-3); white-space: nowrap; }
#page-control_tiempos .ct-kv dd { margin: 0; font-weight: 600; }

/* ── estados: carga · vacío · error ────────────────────────────────────────────────────────── */
#page-control_tiempos .ct-sk { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: ctShim 1.3s ease infinite; border-radius: 6px; height: 12px; }
@keyframes ctShim { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }
#page-control_tiempos .ct-blank { text-align: center; padding: 70px var(--s-5); }
#page-control_tiempos .ct-blank__i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-3); margin: 0 auto var(--s-3); font-size: 19px; }
#page-control_tiempos .ct-blank__i--err { background: var(--neg-bg); color: var(--neg); }
#page-control_tiempos .ct-blank h3 { font-size: 15px; font-weight: 700; margin: 0; }
#page-control_tiempos .ct-blank p { font-size: 12.5px; color: var(--text-2); margin: 6px auto 0; max-width: 52ch; text-wrap: pretty; }
#page-control_tiempos .ct-blank__cta { margin-top: var(--s-4); display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 1180px) {
  #page-control_tiempos .ct-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page-control_tiempos .ct-split { grid-template-columns: minmax(0, 1fr); }
  #page-control_tiempos .ct-tot { grid-template-columns: minmax(0, 1fr); }
  #page-control_tiempos .ct-brow { grid-template-columns: 150px 1fr 84px; }
}
@media (max-width: 768px) {
  #page-control_tiempos .ct-top__row, #page-control_tiempos .fb-wrap { padding-left: var(--s-3); padding-right: var(--s-3); }
  /* Holgura del DOCK: 8px + 64px + safe-area del aparato. 60px NO bastaba ni siquiera sin
     safe-area (el dock ya ocupa 72), asi que el ultimo bloque quedaba tapado SIEMPRE. */
  #page-control_tiempos .ct-page { padding: var(--s-4) var(--s-3) calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ── buscador libre del listado ─────────────────────────────────────────────────────────────── */
#page-control_tiempos .ct-buscador { position: relative; display: flex; align-items: center; }
#page-control_tiempos .ct-buscador__i { position: absolute; left: 10px; color: var(--text-3); font-size: 13px; pointer-events: none; }
#page-control_tiempos .ct-buscador__in {
  appearance: none; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 13px; padding: 7px 28px 7px 28px; border-radius: var(--radius-sm);
  min-height: 34px; min-width: 260px;
}
#page-control_tiempos .ct-buscador__in::-webkit-search-cancel-button { display: none; }
#page-control_tiempos .ct-buscador__in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
#page-control_tiempos .ct-buscador__x {
  position: absolute; right: 6px; border: 0; background: transparent; color: var(--text-3);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 2px 5px; font-family: inherit;
}
#page-control_tiempos .ct-buscador__x:hover { color: var(--text); }
@media (max-width: 768px) { #page-control_tiempos .ct-buscador__in { min-width: 0; width: 100%; } }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   CAPA MÓVIL (FASE 3) — portada del espécimen canónico de Claude Design
   `Movil - Bandeja.html` (md5 7717dcabcd5d5b8505b80a7f50188d59) y
   `Movil - Detalle.html`  (md5 fbb3ffa47e9e85acda0d7071ee5b73b0), aprobados por el gerente.

   PUNTO DE RUPTURA — 768 px, decidido y documentado aquí:
   El shell de Nexo ya parte en 768/769 en TODAS partes (index.html, shell.css): a 768 se oculta la
   barra lateral, aparece la hamburguesa y entra el dock inferior. Elegir otro número —el espécimen
   dibuja su aviso de panorámica a 760— abriría una franja de 8 px en la que el marco es móvil y el
   módulo no, o al revés: cabecera de teléfono con tabla de escritorio. Un solo límite, el del marco.
     · ≤ 768 px  → capa móvil: TARJETAS en vez de tabla (lo de aquí abajo). Los chips y la hoja de
       filtros ya no son de este módulo: los sirve el componente único a este mismo límite
       (FB.BREAKPOINT = 768, filtros.css), que es el que el JS consulta con matchMedia.
     · ≥ 769 px  → escritorio, INTACTO. La franja intermedia (tablet, 769–1180) recibe el escritorio,
       que ya se adapta: los KPI bajan a 2 columnas y los bloques a 1 en 1180, y la tabla conserva su
       scroll horizontal propio. No se inventa una tercera vista para una franja que ya está resuelta.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
#page-control_tiempos .ct-m { display: none; }

@media (max-width: 768px) {
  /* El escritorio se apaga; no se reescribe. (La barra de filtros NO se apaga aquí: el componente
     único ya se presenta solo en móvil —oculta sus controles en línea y deja el botón ⚙ Filtros, los
     chips y la etiqueta de ventana—, y hacerlo también aquí dejaría la pantalla sin ninguna vía de
     abrir la hoja, que es justo el fallo que tenía la panorámica.) */
  #page-control_tiempos .ct-tw,
  #page-control_tiempos .ct-legs,
  #page-control_tiempos .ct-kpis { display: none; }
  #page-control_tiempos .ct-m { display: block; }
  #page-control_tiempos .ct-page { padding: var(--s-3) var(--s-3) calc(96px + env(safe-area-inset-bottom, 0px)); }
  #page-control_tiempos .ct-top__row { padding: 6px var(--s-3) 10px; }
  #page-control_tiempos .ct-top__t h1 { font-size: 17px; }

  /* ── resumen de dos celdas ───────────────────────────────────────────────────────────────── */
  #page-control_tiempos .ct-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--ct-radius); overflow: hidden; box-shadow: var(--shadow-card); }
  #page-control_tiempos .ct-sum > div { background: var(--surface); padding: var(--s-3) var(--s-4); }
  #page-control_tiempos .ct-sum__l { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
  #page-control_tiempos .ct-sum__v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 23px; font-weight: 500; line-height: 1.15; margin-top: 3px; color: var(--neg); }
  #page-control_tiempos .ct-sum__v small { font-size: 13px; color: var(--text-3); }
  #page-control_tiempos .ct-sum__s { font-size: 11px; color: var(--text-2); margin-top: 2px; }

  /* ── tarjeta de orden ────────────────────────────────────────────────────────────────────── */
  #page-control_tiempos .ct-list { display: flex; flex-direction: column; gap: var(--s-3); }
  #page-control_tiempos .ct-oc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--ct-radius); box-shadow: var(--shadow-card); overflow: hidden; }
  #page-control_tiempos .ct-oc--acc { border-left: 4px solid var(--neg); }
  #page-control_tiempos .ct-oc--dms { border-left: 4px solid var(--ct-dms-bd); }
  #page-control_tiempos .ct-oc--ok  { border-left: 4px solid var(--surface-3); }
  #page-control_tiempos .ct-oc__hd { display: grid; grid-template-columns: 1fr auto auto; align-items: start; gap: var(--s-3); padding: var(--s-3) var(--s-4); width: 100%; border: 0; background: transparent; text-align: left; min-height: 44px; cursor: pointer; font-family: inherit; }
  #page-control_tiempos .ct-oc__hd:active { background: var(--hover); }
  #page-control_tiempos .ct-oc__i { min-width: 0; }
  #page-control_tiempos .ct-oc__or { font-family: var(--font-num); font-size: 15px; font-weight: 500; }
  #page-control_tiempos .ct-oc__mm { font-size: 12.5px; color: var(--text-2); margin-top: 1px; }
  #page-control_tiempos .ct-oc__mt { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }
  #page-control_tiempos .ct-oc__x { text-align: right; }
  #page-control_tiempos .ct-oc__xv { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 500; color: var(--neg); line-height: 1.1; white-space: nowrap; }
  #page-control_tiempos .ct-oc__xv--ok { color: var(--text-3); font-size: 17px; }
  #page-control_tiempos .ct-oc__xl { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); margin-top: 1px; }
  #page-control_tiempos .ct-oc__car { align-self: start; width: 44px; height: 44px; margin: -10px -10px 0 0; display: grid; place-items: center; font-size: 17px; color: var(--text-3); line-height: 1; transition: transform .18s; }
  #page-control_tiempos .ct-oc.is-open .ct-oc__car { transform: rotate(180deg); }
  #page-control_tiempos .ct-oc__tgin { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: var(--s-2); }
  #page-control_tiempos .ct-hint { font-size: 11.5px; font-weight: 600; color: var(--text-3); }
  #page-control_tiempos .ct-oc.is-open .ct-hint { color: var(--text-2); }
  #page-control_tiempos .ct-oc__more { display: none; border-top: 1px solid var(--row-border); background: var(--surface-2); padding: var(--s-3) var(--s-4); }
  #page-control_tiempos .ct-oc.is-open .ct-oc__more { display: block; }
  #page-control_tiempos .ct-mr { display: flex; justify-content: space-between; gap: var(--s-3); padding: 6px 0; font-size: 13px; border-top: 1px solid var(--border); }
  #page-control_tiempos .ct-mr:first-child { border-top: 0; }
  #page-control_tiempos .ct-mr dt { color: var(--text-2); }
  #page-control_tiempos .ct-mr dd { margin: 0; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }
  #page-control_tiempos .ct-bar { height: 7px; border-radius: 4px; background: var(--surface-3); overflow: hidden; margin-top: var(--s-2); }
  #page-control_tiempos .ct-bar i { display: block; height: 100%; background: var(--neg); }
  #page-control_tiempos .ct-bar i.ok { background: var(--accent); }
  #page-control_tiempos .ct-oc__go { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: var(--s-3); border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--radius-sm); min-height: 44px; font-size: 14px; font-weight: 600; color: var(--text-2); width: 100%; cursor: pointer; font-family: inherit; }
  #page-control_tiempos .ct-oc__go--acc { border-color: transparent; background: var(--neg); color: #fff; }

  /* ── buscador dentro del listado ─────────────────────────────────────────────────────────── */
  #page-control_tiempos .ct-buscador { margin-bottom: var(--s-3); }
  #page-control_tiempos .ct-buscador__in { width: 100%; min-height: 46px; font-size: 15px; }

  /* (La HOJA INFERIOR de filtros ya no se estila aquí: es la del componente único, en filtros.css
     —.fb-sheet/.fb-scrim/.fb-opt/.fb-fg…—, con el mismo patrón que nació en este módulo. Se retiran
     .ct-sheet, .ct-scrim, .ct-opts/.ct-opt, .ct-fg, .ct-dates y .ct-iconbtn con él.) */
  /* .ct-btn-w sigue en uso: los botones a ancho completo de los estados vacíos de la bandeja móvil. */
  #page-control_tiempos .ct-btn-w { flex: 1; min-height: 48px; justify-content: center; font-size: 15px; }

  /* ── detalle ─────────────────────────────────────────────────────────────────────────────── */
  #page-control_tiempos .ct-m-tot { display: flex; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--ct-radius); overflow: hidden; box-shadow: var(--shadow-card); }
  #page-control_tiempos .ct-m-tot .ct-tot__c { flex: 1; padding: var(--s-3); text-align: center; border: 0; border-radius: 0; background: var(--surface); }
  #page-control_tiempos .ct-m-tot .ct-tot__l { font-size: 9px; }
  #page-control_tiempos .ct-m-tot .ct-tot__v { font-size: 19px; margin-top: 4px; white-space: nowrap; }
  #page-control_tiempos .ct-m-tot .ct-tot__s { font-size: 10.5px; line-height: 1.3; }
  /* La frase se lee en voz alta: 18 px y renglón corto (~40 caracteres), como pide el espécimen. */
  #page-control_tiempos .ct-say__q { font-size: 18px; line-height: 1.55; letter-spacing: -.005em; max-width: 40ch; }
  #page-control_tiempos .ct-kv { grid-template-columns: auto 1fr; font-size: 13px; }
  #page-control_tiempos .ct-kv dd { text-align: right; }
  #page-control_tiempos .ct-ev__t { font-size: 15px; display: block; }
  #page-control_tiempos .ct-ev__s { font-size: 13px; max-width: none; }
  #page-control_tiempos .ct-ordno { font-size: 21px; }
  #page-control_tiempos .ct-hd { gap: var(--s-3); }
}

/* La PANORÁMICA no tiene vista móvil: degrada apilada con aviso, sin invertir esfuerzo (espécimen
   `Panoramica.html` rev. del 02/08, que añade justo este bloque). */
#page-control_tiempos .ct-bigscreen { display: none; }
@media (max-width: 768px) {
  #page-control_tiempos .ct-bigscreen {
    display: block; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--ct-radius); padding: var(--s-4); margin-bottom: var(--s-4);
    font-size: 13px; color: var(--text-2); text-wrap: pretty;
  }
  #page-control_tiempos .ct-bigscreen b { color: var(--text); font-weight: 600; }
}

@media (max-width: 768px) {
  /* El detalle móvil saca los tres números ARRIBA (orden de la llamada). La tira que el escritorio
     lleva dentro de la tarjeta de cronología se oculta: el dato es el mismo y se pinta una vez. */
  #page-control_tiempos .ct-card .ct-tot { display: none; }
  /* La bandeja móvil ya trae su propio bloque «pendiente»; el del escritorio no se repite. */
  #page-control_tiempos .ct-page > .ct-pend { display: none; }
}

@media (max-width: 768px) {
  /* Nada del módulo puede empujar el ancho del teléfono: la descripción de modelo del DMS llega a
     60+ caracteres y, sin recorte, arrastraba la tarjeta —y con ella la página— fuera de la
     pantalla. Se recorta en una línea; el valor íntegro sigue en el detalle. */
  /* Nada puede resolver su ancho contra algo mayor que el teléfono. `width:100%` no basta dentro de
     un grid: las pistas `1fr` tienen `min-width:auto` y el contenido largo las estira, y el estirón
     sube hasta la página. Se acota la página y se le quita el mínimo automático a las pistas. */
  #page-control_tiempos .ct-page { max-width: 100%; width: 100%; }
  #page-control_tiempos .ct-sum { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #page-control_tiempos .ct-sum > div { min-width: 0; overflow-wrap: anywhere; }
  #page-control_tiempos .ct-pend { min-width: 0; }
  #page-control_tiempos .ct-pend__t,
  #page-control_tiempos .ct-pend__s { max-width: 100%; overflow-wrap: anywhere; }
  #page-control_tiempos .ct-oc__hd { grid-template-columns: minmax(0, 1fr) auto auto; }
  #page-control_tiempos .ct-oc__i { min-width: 0; }
  #page-control_tiempos .ct-oc__mm,
  #page-control_tiempos .ct-oc__mt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #page-control_tiempos .ct-oc__or { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #page-control_tiempos .ct-buscador { max-width: 100%; }
  #page-control_tiempos .ct-buscador__in { max-width: 100%; }
  #page-control_tiempos .ct-sum__v { font-size: 21px; }
}