.tof-page,
.tof-modal-content {
  --tof-primary: var(--pe-primary, #315a78);
  --tof-ink: var(--color-text, #213547);
  --tof-muted: var(--color-text-muted, #64748b);
  --tof-line: var(--color-border, #d8dee7);
  --tof-soft: var(--color-bg-muted, #f6f8fb);
  --tof-surface: var(--color-card-bg, #fff);
  --tof-surface-raised: var(--color-bg-surface, #f1f3f7);
  --tof-hover: var(--color-hover, rgba(59, 130, 246, .04));
  --tof-green: #198754;
  --tof-accent: var(--color-accent, #0d6efd);
  --tof-accent-soft: color-mix(in srgb, var(--tof-accent) 11%, var(--tof-surface));
  --tof-ok: #198754;
  --tof-ok-soft: #edf8f1;
  --tof-ok-line: #bfe3cc;
  --tof-danger: #b42318;
  --tof-danger-soft: #fdf0ef;
  --tof-danger-line: #f2c4bf;
  color-scheme: light;
}
/* Sin recuadros: las secciones van sobre el fondo de la página (estilo Ventas),
   a todo el ancho con el padding lateral del contenedor y un máximo centrado. */
.tof-page { max-width: 760px; margin: 0 auto; padding-top: 1rem; padding-bottom: 2rem; color: var(--tof-ink); }
.tof-section + .tof-section { margin-top: 1.25rem; }

.tof-more-card {
  border: 1px solid var(--tof-line);
  border-radius: 1rem;
  background: var(--tof-surface);
  box-shadow: 0 5px 22px rgba(25, 45, 65, .045);
}

.tof-active-toolbar,
.tof-secondary-summary {
  display: flex;
  align-items: center;
}

.tof-tabular { font-variant-numeric: tabular-nums; }

/* Banner superior no bloqueante */
.tof-banner {
  position: fixed;
  z-index: 1090;
  top: .75rem;
  left: 50%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  width: min(40rem, calc(100vw - 2rem));
  padding: .85rem .9rem .85rem 1rem;
  border: 1px solid var(--tof-ok-line);
  border-radius: 1rem;
  color: var(--tof-ink);
  background: color-mix(in srgb, var(--tof-ok-soft) 92%, var(--tof-surface));
  box-shadow: 0 12px 32px rgba(15, 30, 45, .18);
  transform: translateX(-50%);
}
.tof-banner[hidden] { display: none !important; }
.tof-banner-icon { color: var(--tof-ok); font-size: 2.1rem; line-height: 1; }
.tof-banner-body { display: grid; min-width: 0; gap: .15rem; }
.tof-banner-body strong { font-size: 1.05rem; }
.tof-banner-body span { color: var(--tof-ink); font-size: .95rem; white-space: pre-line; overflow-wrap: anywhere; }
.tof-banner-body small { color: var(--tof-muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.tof-banner-close { display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: .6rem; color: var(--tof-muted); background: transparent; font-size: 1.1rem; }
.tof-banner-close:hover,
.tof-banner-close:focus-visible { color: var(--tof-ink); background: var(--tof-hover); }
.tof-banner.is-error { border-color: var(--tof-danger-line); background: color-mix(in srgb, var(--tof-danger-soft) 92%, var(--tof-surface)); }
.tof-banner.is-error .tof-banner-icon { color: var(--tof-danger); }
.tof-banner.is-saving { border-color: color-mix(in srgb, var(--tof-accent) 35%, var(--tof-line)); background: var(--tof-accent-soft); }
.tof-banner.is-saving .tof-banner-icon { color: var(--tof-accent); }
.tof-banner.is-info { border-color: color-mix(in srgb, var(--tof-accent) 35%, var(--tof-line)); background: var(--tof-accent-soft); }
.tof-banner.is-info .tof-banner-icon { color: var(--tof-accent); }
/* Ajustes obligatorio (sin sociedad/centro guardados): sin X, Cerrar ni Volver. */
#tofMoreModal.tof-config-required .btn-close,
#tofMoreModal.tof-config-required .modal-footer,
#tofMoreModal.tof-config-required .tof-more-back { display: none !important; }

/* Bloque de escaneo */
.tof-scan-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .75rem; }
.tof-scan-icon { display: grid; width: 3rem; height: 3rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--tof-accent); background: var(--tof-accent-soft); font-size: 1.55rem; }
.tof-scan-heading { min-width: 0; }
.tof-scan-title { margin: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.tof-scan-subtitle { margin: .1rem 0 0; color: var(--tof-muted); font-size: .95rem; }
.tof-code-form { position: relative; margin: 0; }
.tof-code-icon { position: absolute; top: 50%; left: 1rem; color: var(--tof-muted); font-size: 1.6rem; pointer-events: none; transform: translateY(-50%); }
.tof-page .tof-code-form .form-control { min-height: 3.75rem; padding-right: 3.75rem; padding-left: 3.4rem; border-width: 2px; border-radius: .8rem; font-size: 1.2rem; }
.tof-code-submit { position: absolute; top: 50%; right: .4rem; display: grid; width: 48px; height: 48px; place-items: center; padding: 0; border: 0; border-radius: .6rem; color: var(--tof-accent); background: transparent; font-size: 1.3rem; transform: translateY(-50%); }
.tof-code-submit:hover,
.tof-code-submit:focus-visible { background: var(--tof-accent-soft); }
.tof-code-submit:disabled { color: var(--tof-muted); background: transparent; }

/* Datos del trabajo */
.tof-section-title { margin: 0 0 .75rem; font-size: 1.05rem; font-weight: 700; }
.tof-work-list { display: grid; gap: .55rem; }
/* Fila = contenedor con zonas pulsables independientes: zona principal (selector),
   botones de icono (acciones) y zona final (check/chevron, también abre el selector). */
.tof-work-row {
  display: flex;
  width: 100%;
  min-height: 4.6rem;
  align-items: stretch;
  border: 1px solid var(--tof-line);
  border-radius: .85rem;
  color: var(--tof-ink);
  background: var(--tof-surface);
  overflow: hidden;
}
.tof-work-row[hidden] { display: none !important; }
.tof-work-main {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  gap: .85rem;
  padding: .65rem .4rem .65rem .9rem;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}
.tof-work-list.has-progress .tof-work-main { grid-template-columns: 1.6rem 3rem minmax(0, 1fr); }
.tof-work-row:has(.tof-work-main:hover),
.tof-work-row:has(.tof-work-end:hover) { border-color: var(--tof-accent); background: var(--tof-hover); }
.tof-work-main:focus-visible,
.tof-work-end:focus-visible,
.tof-work-action:focus-visible { outline: 3px solid var(--tof-accent); outline-offset: -3px; }
.tof-work-row:has(.tof-work-main:disabled) { opacity: .55; }
.tof-work-main:disabled,
.tof-work-end:disabled { cursor: not-allowed; }
.tof-work-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .3rem; }
.tof-work-actions:empty { display: none; }
.tof-work-action { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid var(--tof-line); border-radius: .65rem; color: var(--tof-accent); background: var(--tof-surface); font-size: 1.2rem; }
.tof-work-action[hidden] { display: none !important; }
.tof-work-action:hover { border-color: var(--tof-accent); background: var(--tof-accent-soft); }
.tof-work-state { display: none; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--tof-line); }
.tof-work-state i { display: none; }
.tof-work-list.has-progress .tof-work-state { display: grid; place-items: center; }
.tof-work-icon { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 50%; color: var(--tof-muted); background: var(--tof-surface-raised); font-size: 1.35rem; }
.tof-work-text { display: grid; min-width: 0; gap: .05rem; }
.tof-work-text small { overflow: hidden; color: var(--tof-muted); font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.tof-work-text strong { overflow: hidden; color: var(--tof-muted); font-size: 1.1rem; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.tof-work-detail { overflow: hidden; color: var(--tof-muted); font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.tof-work-end { display: grid; width: 2.9rem; flex: 0 0 auto; place-items: center; padding: 0 .35rem 0 0; border: 0; color: var(--tof-muted); background: transparent; font-size: 1.25rem; }
.tof-work-done { display: none; }
.tof-work-row.is-complete { border-color: var(--tof-ok-line); background: var(--tof-ok-soft); }
.tof-work-row.is-complete:has(.tof-work-main:hover),
.tof-work-row.is-complete:has(.tof-work-end:hover) { border-color: var(--tof-ok); }
.tof-work-row.is-complete .tof-work-state { background: transparent; }
.tof-work-row.is-complete .tof-work-state i { display: block; color: var(--tof-ok); font-size: 1.45rem; line-height: 1; }
.tof-work-row.is-complete .tof-work-icon { color: var(--tof-accent); background: var(--tof-surface); }
.tof-work-row.is-complete .tof-work-text strong { color: var(--tof-ink); font-weight: 700; }
.tof-work-row.is-complete .tof-work-done { display: block; color: var(--tof-ok); font-size: 1.45rem; }
.tof-work-row.is-complete .tof-work-chevron { display: none; }

/* Botones */
.tof-action-row { display: grid; gap: .6rem; margin-top: 1.15rem; }
.tof-page .tof-start-btn { display: flex; width: 100%; min-height: 3.6rem; align-items: center; justify-content: center; gap: .55rem; border-radius: .85rem; font-size: 1.25rem; font-weight: 600; }
.tof-page .tof-start-btn.btn-primary { border-color: var(--tof-accent); background: var(--tof-accent); }
.tof-page .tof-start-btn.btn-primary:disabled { border-color: transparent; color: #fff; background: color-mix(in srgb, var(--tof-accent) 42%, var(--tof-surface)); opacity: 1; }
.tof-page .tof-start-btn.is-saving:disabled { background: color-mix(in srgb, var(--tof-accent) 75%, var(--tof-surface)); }
.tof-secondary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.tof-page .tof-ghost-btn { display: flex; min-height: 3.1rem; align-items: center; justify-content: center; gap: .45rem; border: 1px solid var(--tof-line); border-radius: .85rem; color: var(--tof-ink); background: var(--tof-surface); font-size: 1.05rem; font-weight: 600; }
.tof-page .tof-ghost-btn:hover,
.tof-page .tof-ghost-btn:focus-visible { border-color: var(--tof-accent); background: var(--tof-hover); }

.tof-chip,
.tof-empty-chip {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: .35rem;
  padding: .4rem .7rem;
  border: 1px solid var(--tof-line);
  border-radius: 999px;
  color: var(--tof-ink);
  background: var(--tof-surface-raised);
  font-size: .95rem;
}
.tof-empty-chip { color: var(--tof-muted); background: var(--tof-soft); border-style: dashed; }
.tof-secondary-summary { gap: .6rem; margin-top: .9rem; flex-wrap: wrap; font-size: .95rem; }
#tof-secondary-chips { display: inline-flex; flex: 1; flex-wrap: wrap; gap: .35rem; }
#tof-confirm-message { white-space: pre-line; }
.tof-page [hidden],
.tof-modal-content [hidden] { display: none !important; }

.tof-active-card { grid-column: 1 / -1; min-width: 0; overflow: hidden; }
.tof-live-pill,
.tof-neutral-pill { display: inline-flex; min-height: 36px; align-items: center; gap: .3rem; padding: .3rem .65rem; border-radius: 999px; color: #197442; background: #e8f6ed; font-size: .9rem; font-weight: 700; white-space: nowrap; }
.tof-neutral-pill { color: var(--tof-ink); background: var(--tof-surface-raised); }
.tof-live-pill i { font-size: .6rem; }
.tof-active-toolbar { justify-content: flex-end; min-height: 48px; margin-bottom: .5rem; }
.tof-table,
.tof-recent-table { --bs-table-color: var(--tof-ink); --bs-table-bg: var(--tof-surface); --bs-table-border-color: var(--tof-line); color: var(--tof-ink); font-size: .98rem; }
.tof-table thead th,
.tof-recent-table thead th { color: var(--tof-muted); background: var(--tof-soft); font-size: .92rem; font-weight: 700; white-space: nowrap; }
.tof-table td,
.tof-table th,
.tof-recent-table td,
.tof-recent-table th { min-height: 48px; padding: .75rem .8rem; border-color: var(--tof-line); }
.tof-current-row td { background: var(--tof-surface-raised); font-weight: 600; }

.tof-modal-content { --bs-modal-color: var(--tof-ink); --bs-modal-bg: var(--tof-surface); --bs-modal-header-border-color: var(--tof-line); --bs-modal-footer-border-color: var(--tof-line); color: var(--tof-ink); background: var(--tof-surface); border: 0; border-radius: 1rem; box-shadow: 0 18px 55px rgba(20, 35, 50, .2); }
.tof-modal-content .modal-header { align-items: flex-start; padding: 1.1rem 1.25rem; border-bottom-color: var(--tof-line); }
.tof-modal-content .modal-body { padding: 1.15rem 1.25rem; }
.tof-modal-content .modal-footer { border-top-color: var(--tof-line); }
/* Altura según contenido con hueco superior siempre visible; si no cabe,
   solo hace scroll el cuerpo y la cabecera (título + X) y el pie quedan fijos. */
.modal[id^='tof'] .modal-dialog-scrollable { height: auto; }
.modal[id^='tof'] .tof-modal-content {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 72px);
  max-height: calc(100dvh - 72px);
  overflow: hidden;
}
.modal[id^='tof'] .tof-modal-content > .modal-header,
.modal[id^='tof'] .tof-modal-content > .modal-footer { flex-shrink: 0; }
.modal[id^='tof'] .tof-modal-content > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.tof-search { position: relative; margin-bottom: .75rem; }
.tof-search > i { position: absolute; top: 50%; left: .9rem; color: var(--tof-muted); pointer-events: none; transform: translateY(-50%); }
.tof-modal-content .tof-search .form-control { padding-left: 2.6rem; border-radius: .7rem; }
.tof-filter-chips { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.tof-modal-content .tof-filter-chip { display: inline-flex; min-height: 44px; align-items: center; gap: .45rem; margin: 0; padding: .3rem .8rem; border: 1px solid var(--tof-line); border-radius: 999px; background: var(--tof-soft); }
.tof-modal-content .tof-filter-chip .form-check-input { float: none; margin: 0; flex: 0 0 auto; }
.tof-modal-content .tof-filter-chip .form-check-label { font-size: .92rem; }
.tof-modal-content .tof-filter-apply { min-height: 44px; border-radius: 999px; }
.tof-modal-content .tof-filter-chip.is-disabled { opacity: .5; }
.tof-selector-list { display: grid; gap: .45rem; }
.tof-selector-item { display: flex; min-height: 4rem; align-items: center; gap: .8rem; padding: .55rem .75rem; border: 1px solid var(--tof-line); border-radius: .8rem; background: var(--tof-surface); color: var(--tof-ink); text-align: left; }
.tof-selector-item:hover,
.tof-selector-item:focus-visible { border-color: var(--tof-accent); background: var(--tof-accent-soft); }
.tof-selector-item-icon { display: grid; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--tof-accent); background: var(--tof-accent-soft); font-size: 1.2rem; }
.tof-selector-item.is-muted .tof-selector-item-icon { color: var(--tof-muted); background: var(--tof-surface-raised); }
.tof-selector-item.is-muted strong { color: var(--tof-muted); font-weight: 600; }
.tof-selector-item-text { display: grid; min-width: 0; flex: 1; gap: .1rem; }
.tof-selector-item strong { overflow: hidden; font-size: 1.05rem; text-overflow: ellipsis; }
.tof-selector-item small { color: var(--tof-muted); font-size: .9rem; }
.tof-selector-chevron { flex: 0 0 auto; color: var(--tof-muted); }
.tof-status-person-name { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: 0 0 .5rem; font-weight: 700; }
.tof-status-person-name i { color: var(--tof-accent); }
.tof-status-person-name small { color: var(--tof-muted); font-weight: 400; }
.tof-task-kind { display: inline-flex; min-height: 36px; align-items: center; margin-left: .4rem; padding: .1rem .45rem; border-radius: 999px; color: var(--tof-primary); background: var(--tof-surface-raised); font-size: .95rem; font-weight: 700; vertical-align: middle; }
.tof-selector-empty { padding: 2rem 1rem; color: var(--tof-muted); text-align: center; font-size: 1rem; }
.tof-selector-empty i { font-size: 1.5rem; }
.tof-person-selector-tools { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; padding: .65rem; border-radius: .65rem; background: var(--tof-soft); }
.tof-filter-note { margin-bottom: .6rem; color: var(--tof-muted); font-size: .95rem; }
.tof-task-filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin-bottom: .65rem; padding: .65rem; border-radius: .65rem; background: var(--tof-soft); font-size: .95rem; }
.tof-task-filter-bar > span { margin-right: auto; font-weight: 600; }
.tof-task-filter-bar .form-check-label { font-size: .95rem; }
.tof-workstation-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .7rem; }
.tof-workstation-list .form-check { min-height: 48px; padding: .55rem .4rem .3rem 1.9rem; border-radius: .45rem; background: var(--tof-soft); font-size: .95rem; }

.tof-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.tof-more-tabs { margin-bottom: 1rem; }
.tof-more-tabs .sit-tab-btn { min-height: 48px; font-size: 1rem; }
.tof-more-tile { display: flex; min-height: 64px; align-items: center; gap: .75rem; padding: .7rem .9rem; border: 1px solid var(--tof-line); border-radius: .8rem; color: var(--tof-ink); background: var(--tof-surface); text-align: left; font-size: 1rem; font-weight: 600; }
.tof-more-tile i { color: var(--tof-muted); font-size: 1.35rem; }
.tof-more-tile:hover,
.tof-more-tile:focus-visible { border-color: var(--tof-accent); background: var(--tof-accent-soft); }
.tof-more-tile:hover i,
.tof-more-tile:focus-visible i { color: var(--tof-accent); }
.tof-more-back { margin-bottom: .9rem; }
.tof-more-view { padding: 1rem; }
.tof-more-view h3 { margin: 0 0 .9rem; font-size: 1.15rem; }
.tof-more-card { padding: .9rem; border: 1px solid var(--tof-line); border-radius: .8rem; background: var(--tof-surface); }
.tof-more-card h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .65rem; font-size: 1rem; }
.tof-more-tile:disabled { opacity: .48; cursor: not-allowed; }
.tof-config-location { width: 100%; min-height: 48px; max-width: 100%; font-size: 1rem; }
.tof-more-card h3 i { color: var(--tof-primary); }
.tof-more-card > p { color: var(--tof-muted); font-size: .95rem; }
.tof-filter-row { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; }
.tof-filter-row .form-select { max-width: 170px; min-height: 48px; margin-left: auto; font-size: .95rem; }
.tof-mini-list { display: grid; gap: .45rem; }
.tof-mini-row { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: .7rem; padding: .55rem .6rem; border: 1px solid var(--tof-line); border-radius: .6rem; font-size: .95rem; }
.tof-mini-row > span { display: grid; gap: .15rem; }
.tof-mini-row small,
.tof-article-row small { color: var(--tof-muted); font-size: .9rem; }
.tof-muted { color: var(--tof-muted); font-size: .95rem; }
.tof-article-list { display: grid; gap: .5rem; }
.tof-article-row { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem; border: 1px solid var(--tof-line); border-radius: .6rem; }
.tof-article-row > div:first-child { display: grid; gap: .15rem; }
.tof-article-row strong { font-size: .95rem; }
.tof-article-controls { display: flex; align-items: center; gap: .35rem; }
.tof-article-controls input { width: 5.5rem; min-height: 48px; text-align: right; }
.tof-article-qty { min-width: 5rem; color: var(--tof-ink); text-align: right; font-size: 1rem; font-weight: 600; }
.tof-article-controls > span { color: var(--tof-muted); font-size: .9rem; }
.tof-saved-notice { text-align: center; }
.tof-saved-notice > i { color: var(--tof-green); font-size: 2.2rem; }
.tof-saved-notice p { margin: .6rem 0 .35rem; font-size: 1.05rem; }
.tof-saved-notice small { color: var(--tof-muted); font-size: .95rem; }
.tof-example-fact,
.tof-file-row { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: .8rem; padding: .65rem 0; border-bottom: 1px solid var(--tof-line); font-size: .95rem; }
.tof-example-fact span { color: var(--tof-muted); }
.tof-file-row { justify-content: flex-start; }
.tof-file-row > i { color: #c23a40; font-size: 1.3rem; }
.tof-file-row > span { display: grid; flex: 1; gap: .15rem; }
.tof-file-row small { color: var(--tof-muted); font-size: .9rem; }
.tof-secondary-context { padding: .75rem; border-radius: .6rem; background: var(--tof-soft); font-size: 1rem; font-weight: 600; }
.tof-secondary-filter { display: flex; gap: .55rem; margin-bottom: 1rem; }
.tof-secondary-filter label { flex: 1; }
.tof-secondary-filter input { position: absolute; opacity: 0; pointer-events: none; }
.tof-secondary-filter span { display: grid; min-height: 52px; place-items: center; padding: .5rem; border: 1px solid var(--tof-line); border-radius: .65rem; color: var(--tof-ink); background: var(--tof-surface); text-align: center; font-size: .95rem; font-weight: 600; }
.tof-secondary-filter input:checked + span { border-color: var(--tof-primary); color: var(--tof-primary); background: var(--tof-hover); }
.tof-secondary-filter input:focus-visible + span { outline: 3px solid var(--tof-primary); outline-offset: 2px; }

.tof-page .form-control,
.tof-page .form-select,
.tof-modal-content .form-control,
.tof-modal-content .form-select {
  color: var(--tof-ink);
  background-color: var(--tof-surface);
  border-color: var(--tof-line);
}
.tof-page .input-group-text,
.tof-modal-content .input-group-text { color: var(--tof-muted); background: var(--tof-surface-raised); border-color: var(--tof-line); }
.tof-page .form-control::placeholder,
.tof-modal-content .form-control::placeholder { color: var(--tof-muted); opacity: .85; }
.tof-page .form-control:focus,
.tof-page .form-select:focus,
.tof-modal-content .form-control:focus,
.tof-modal-content .form-select:focus { border-color: var(--tof-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--tof-primary) 25%, transparent); }
.tof-page .form-check-label,
.tof-modal-content .form-check-label,
.tof-modal-content .form-label { color: var(--tof-ink); font-size: .95rem; }
.tof-page button,
.tof-modal-content button,
.tof-page input,
.tof-page select { touch-action: manipulation; }
.tof-page .btn,
.tof-modal-content .btn { min-height: 48px; }
.tof-modal-content .form-control,
.tof-modal-content .form-select { min-height: 48px; font-size: 1rem; }
.tof-task-filter-bar .form-check,
.tof-person-selector-tools .form-check { display: flex; min-height: 48px; align-items: center; gap: .5rem; margin: 0; }
.tof-task-filter-bar .form-check .form-check-input,
.tof-person-selector-tools .form-check .form-check-input { float: none; margin: 0; flex: 0 0 auto; }

.dark-mode .tof-page,
.dark-mode .tof-modal-content,
body.dark-mode .tof-page,
body.dark-mode .tof-modal-content,
:root.dark-mode .tof-page,
:root.dark-mode .tof-modal-content {
  --tof-ink: var(--color-text, #e8ecf7);
  --tof-muted: var(--color-text-muted, #b7bfd9);
  --tof-line: var(--color-border, #222c63);
  --tof-soft: var(--color-bg-muted, #0b113a);
  --tof-surface: var(--color-card-bg, #0e1649);
  --tof-surface-raised: var(--color-bg-surface, #18204f);
  --tof-hover: var(--color-hover, rgba(255, 255, 255, .06));
  --tof-accent: var(--color-primary-light, #5192f3);
  --tof-accent-soft: color-mix(in srgb, var(--tof-accent) 18%, var(--tof-surface));
  --tof-ok: #5cd08d;
  --tof-ok-soft: color-mix(in srgb, #198754 22%, var(--tof-surface));
  --tof-ok-line: color-mix(in srgb, #5cd08d 40%, var(--tof-surface));
  --tof-danger: #ff8f86;
  --tof-danger-soft: color-mix(in srgb, #dc3545 22%, var(--tof-surface));
  --tof-danger-line: color-mix(in srgb, #ff8f86 40%, var(--tof-surface));
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .tof-page,
  :root:not(.light-mode) .tof-modal-content {
    --tof-ink: var(--color-text, #e8ecf7);
    --tof-muted: var(--color-text-muted, #b7bfd9);
    --tof-line: var(--color-border, #222c63);
    --tof-soft: var(--color-bg-muted, #0b113a);
    --tof-surface: var(--color-card-bg, #0e1649);
    --tof-surface-raised: var(--color-bg-surface, #18204f);
    --tof-hover: var(--color-hover, rgba(255, 255, 255, .06));
    --tof-accent: var(--color-primary-light, #5192f3);
    --tof-accent-soft: color-mix(in srgb, var(--tof-accent) 18%, var(--tof-surface));
    --tof-ok: #5cd08d;
    --tof-ok-soft: color-mix(in srgb, #198754 22%, var(--tof-surface));
    --tof-ok-line: color-mix(in srgb, #5cd08d 40%, var(--tof-surface));
    --tof-danger: #ff8f86;
    --tof-danger-soft: color-mix(in srgb, #dc3545 22%, var(--tof-surface));
    --tof-danger-line: color-mix(in srgb, #ff8f86 40%, var(--tof-surface));
    color-scheme: dark;
  }
}

.dark-mode .tof-secondary-filter input:checked + span,
body.dark-mode .tof-secondary-filter input:checked + span,
:root.dark-mode .tof-secondary-filter input:checked + span { color: #9bc5ff; }

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .tof-secondary-filter input:checked + span { color: #9bc5ff; }
}

@media (max-width: 575.98px) {
  /* Objetivo: escaneo, 4 filas y botones visibles sin scroll a 390×844. */
  .tof-page { padding-top: .6rem; padding-bottom: 1rem; }
  .tof-section + .tof-section { margin-top: .9rem; }
  .tof-scan-head { gap: .55rem; margin-bottom: .5rem; }
  .tof-scan-icon { width: 2.15rem; height: 2.15rem; font-size: 1.15rem; }
  .tof-scan-title { font-size: 1.1rem; }
  .tof-scan-subtitle { display: none; }
  .tof-page .tof-code-form .form-control { min-height: 3.1rem; padding-left: 2.9rem; font-size: 1.05rem; }
  .tof-code-icon { left: .85rem; font-size: 1.35rem; }
  .tof-section-title { margin-bottom: .5rem; font-size: 1rem; }
  .tof-work-list { gap: .4rem; }
  .tof-work-row { min-height: 3.6rem; }
  .tof-work-main { grid-template-columns: 2.35rem minmax(0, 1fr); gap: .55rem; padding: .4rem .25rem .4rem .6rem; }
  .tof-work-list.has-progress .tof-work-main { grid-template-columns: 1.25rem 2.35rem minmax(0, 1fr); }
  .tof-work-end { width: 2.2rem; padding-right: .25rem; }
  .tof-work-action { width: 42px; height: 42px; font-size: 1.1rem; }
  .tof-work-actions { gap: .2rem; }
  .tof-work-icon { width: 2.35rem; height: 2.35rem; font-size: 1.05rem; }
  .tof-work-state { width: 1.25rem; height: 1.25rem; }
  .tof-work-row.is-complete .tof-work-state i,
  .tof-work-row.is-complete .tof-work-done { font-size: 1.25rem; }
  .tof-work-text small { font-size: .78rem; line-height: 1.2; }
  .tof-work-text strong { font-size: 1rem; line-height: 1.25; }
  .tof-work-detail { font-size: .82rem; line-height: 1.2; }
  .tof-action-row { gap: .5rem; margin-top: .8rem; }
  .tof-page .tof-start-btn { min-height: 3.1rem; font-size: 1.12rem; }
  .tof-secondary-actions { gap: .5rem; }
  .tof-page .tof-ghost-btn { min-height: 3rem; padding: .4rem .3rem; font-size: 1rem; }
  .tof-banner { top: .5rem; gap: .6rem; padding: .7rem .6rem .7rem .8rem; }
  .tof-banner-icon { font-size: 1.75rem; }
  .tof-table { min-width: 650px; }
  .tof-recent-table { min-width: 560px; }
  .tof-more-tile { min-height: 60px; gap: .55rem; padding: .6rem .7rem; font-size: .95rem; }
  .tof-article-row { align-items: flex-start; flex-direction: column; }
  .tof-article-controls { width: 100%; justify-content: flex-end; }
  .tof-workstation-list { grid-template-columns: 1fr; }
  .tof-task-filter-bar { align-items: flex-start; flex-direction: column; }
  .tof-task-filter-bar > span { margin-right: 0; }
  .tof-person-selector-tools { align-items: flex-start; flex-direction: column; }
  .tof-selector-item { min-height: 4.4rem; }
  .tof-modal-content .modal-body { padding: 1rem; }
  .tof-secondary-filter { flex-direction: column; }

  /* Paneles como bottom sheet: altura según contenido, nunca a pantalla completa. */
  .modal[id^='tof'] .modal-dialog {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0;
    align-items: flex-end;
  }
  .modal.fade[id^='tof'] .modal-dialog { transform: translateY(100%); transition: transform .25s ease-out; }
  .modal.show[id^='tof'] .modal-dialog { transform: none; }
  .modal[id^='tof'] .tof-modal-content { width: 100%; border-radius: 1.1rem 1.1rem 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .modal[id^='tof'] .tof-modal-content::before { content: ""; position: absolute; z-index: 2; top: .4rem; left: 50%; width: 2.5rem; height: .28rem; border-radius: 999px; background: rgba(255, 255, 255, .55); transform: translateX(-50%); }
}

@media (max-width: 359.98px) {
  .tof-more-grid { grid-template-columns: 1fr; }
}

/* Tiempos: filtros segmentados (periodo y tipo) */
.tof-times-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.tof-segmented { display: inline-flex; overflow: hidden; border: 1px solid var(--tof-line); border-radius: .7rem; }
.tof-segmented button { min-height: 44px; padding: .35rem .8rem; border: 0; border-right: 1px solid var(--tof-line); color: var(--tof-ink); background: var(--tof-surface); font-size: .95rem; font-weight: 600; }
.tof-segmented button:last-child { border-right: 0; }
.tof-segmented button.active { color: #fff; background: var(--tof-accent); }
.tof-times-card .tof-table { min-width: 620px; }

/* Estado OF: una fila por OF/pieza y una celda por tarea, coloreada por estado como Nimo */
.tof-of-state-grid { display: grid; gap: .6rem; }
.tof-state-row { padding: .6rem; border: 1px solid var(--tof-line); border-radius: .7rem; }
.tof-state-head { display: grid; gap: .1rem; margin-bottom: .5rem; }
.tof-state-head small { color: var(--tof-muted); }
.tof-state-cells { display: flex; flex-wrap: wrap; gap: .4rem; }
.tof-state-cell { min-width: 4.5rem; min-height: 44px; padding: .35rem .6rem; border: 1px solid var(--tof-line); border-radius: .5rem; color: #1d2733; font-weight: 600; }
.tof-state-cell.is-state-1,
.tof-of-state-legend .is-state-1::before { background: #ffffff; }
.tof-state-cell.is-state-2,
.tof-of-state-legend .is-state-2::before { background: rgb(255, 255, 144); }
.tof-state-cell.is-state-3,
.tof-of-state-legend .is-state-3::before { background: rgb(128, 255, 128); }
.tof-state-cell.is-selected { outline: 3px solid var(--tof-accent); outline-offset: 2px; }
.tof-of-state-legend { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .6rem; color: var(--tof-muted); font-size: .9rem; }
.tof-of-state-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.tof-of-state-legend span::before { content: ""; width: 1rem; height: 1rem; border: 1px solid var(--tof-line); border-radius: .25rem; }

/* Archivos OF */
button.tof-file-row { width: 100%; padding: .65rem .4rem; border: 0; border-bottom: 1px solid var(--tof-line); color: var(--tof-ink); background: transparent; text-align: left; }
button.tof-file-row:hover { background: var(--tof-hover); }
.tof-file-row > span small { display: block; }
.tof-file-row > .bi-eye { color: var(--tof-accent); }
.tof-file-row.is-disabled { opacity: .7; }
.tof-file-row.is-disabled > i { color: var(--tof-muted); }
.tof-file-row > span { min-width: 0; flex: 1 1 auto; }
.tof-file-row > span strong,
.tof-file-row > span small { overflow-wrap: anywhere; }
.tof-file-row > i { flex: 0 0 auto; }

/* Tiempos: alternador "Todos los operarios" / "Solo {operario}" */
.tof-times-person-toggle { min-height: 44px; padding: .35rem .9rem; border: 1px solid var(--tof-line); border-radius: .7rem; color: var(--tof-ink); background: var(--tof-surface); font-size: .95rem; font-weight: 600; }
.tof-times-person-toggle.active { border-color: var(--tof-accent); color: #fff; background: var(--tof-accent); }
.tof-times-person-toggle:disabled { opacity: .5; cursor: not-allowed; }
/* Selector de tareas: botón "Filtros" que muestra u oculta los interruptores */
.tof-modal-content .tof-filter-apply.active { color: #fff; background: var(--tof-accent); border-color: var(--tof-accent); }
.tof-filter-chips[hidden] { display: none !important; }

/* Tiempos: operario como control segmentado de textos fijos (no cambia de tamaño al pulsar) */
.tof-segmented-fill { display: flex; width: 100%; }
.tof-segmented-fill button { flex: 1 1 0; min-width: 0; }
.tof-segmented button:disabled { color: var(--tof-muted); opacity: .55; cursor: not-allowed; }
/* Reserva siempre la altura de la línea "Operario: …" para que nada se desplace. */
.tof-times-person-line { min-height: 1.35rem; margin: -.2rem 0 .45rem; overflow: hidden; color: var(--tof-muted); font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }

/* OFs secundarias: chips con X en la pantalla principal y campo Código en la vista */
.tof-chip { gap: .25rem; }
.tof-chip-remove { display: inline-grid; width: 32px; height: 32px; place-items: center; margin-right: -.35rem; padding: 0; border: 0; border-radius: 50%; color: var(--tof-muted); background: transparent; }
.tof-chip-remove:hover { color: #b42318; background: var(--tof-hover); }
.tof-secondary-code-form { margin-bottom: .6rem; }

/* v267: en la pantalla principal solo queda el check verde de la izquierda */
.tof-work-row.is-complete .tof-work-done { display: none; }
.tof-work-row.is-complete .tof-work-chevron { display: block; }
/* Estado tareas OF: botón alineado a la derecha */
.tof-of-state-actions { display: flex; justify-content: flex-end; margin-top: .9rem; }
/* Tiempos: dos desplegables e interruptor en una fila (se ajusta en móvil) */
.tof-times-filters { align-items: flex-end; }
.tof-times-field { display: grid; min-width: 0; flex: 1 1 9rem; gap: .2rem; margin: 0; }
.tof-times-field > span { color: var(--tof-muted); font-size: .85rem; }
.tof-modal-content .tof-times-field .form-select { min-height: 44px; }
.tof-modal-content .tof-times-all { flex: 0 0 auto; }
@media (min-width: 576px) { .tof-times-filters { flex-wrap: nowrap; } }
/* Ajustes: operario por defecto */
.tof-config-person { display: flex; gap: .5rem; }
.tof-config-person-btn { display: flex; min-width: 0; min-height: 48px; flex: 1 1 auto; align-items: center; gap: .6rem; padding: .5rem .8rem; border: 1px solid var(--tof-line); border-radius: .6rem; color: var(--tof-ink); background: var(--tof-surface); text-align: left; }
.tof-config-person-btn span { overflow: hidden; flex: 1 1 auto; text-overflow: ellipsis; white-space: nowrap; }
.tof-config-person-btn:hover { border-color: var(--tof-accent); }

/* Artículos consumidos / obtenidos */
.tof-art-body { display: grid; gap: .55rem; }
.tof-art-row { display: grid; gap: .5rem; padding: .65rem .7rem; border: 1px solid var(--tof-line); border-radius: .75rem; }
.tof-art-row.is-active { border-color: var(--tof-accent); }
.tof-art-info { display: grid; min-width: 0; gap: .15rem; }
.tof-art-info strong { overflow-wrap: anywhere; }
.tof-art-info small { color: var(--tof-muted); }
.tof-art-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.tof-modal-content .tof-art-controls .form-control { min-height: 48px; }
.tof-art-panel { display: grid; gap: .5rem; padding-top: .5rem; border-top: 1px dashed var(--tof-line); }
.tof-art-lot { display: grid; gap: .3rem; margin: 0; }
.tof-art-label { color: var(--tof-muted); font-size: .85rem; }
.tof-art-inline { display: grid; gap: .2rem; color: var(--tof-muted); font-size: .85rem; }
.tof-art-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.tof-art-add { margin-top: .4rem; }
.tof-art-add.is-open { display: grid; gap: .55rem; padding: .7rem; border: 1px solid var(--tof-line); border-radius: .75rem; background: var(--tof-soft); }
.tof-art-results { max-height: 15rem; overflow-y: auto; }
.tof-art-picked { display: grid; gap: .1rem; }
.tof-art-picked small { color: var(--tof-muted); }
.tof-art-switch { display: flex; justify-content: flex-end; margin-top: .5rem; }
.tof-link { padding: 0; border: 0; color: var(--tof-accent); background: none; font-weight: 600; text-decoration: underline; }

/* v270: motivo bajo un acceso deshabilitado (en tablet el title no se ve). El texto queda legible:
   solo se atenúan el icono y la etiqueta. */
.tof-more-tile { flex-wrap: wrap; }
.tof-more-tile > span { flex: 1; min-width: 0; }
.tof-more-tile-reason { flex: 0 0 100%; color: var(--tof-muted); font-size: .82rem; font-weight: 400; line-height: 1.25; }
.tof-more-tile.has-reason:disabled { opacity: 1; background: var(--tof-surface-raised); }
.tof-more-tile.has-reason:disabled > i,
.tof-more-tile.has-reason:disabled > span { opacity: .48; }

/* v270: varios operarios */
.tof-selector-item.is-picked { border-color: var(--tof-accent); background: var(--tof-accent-soft); }
.tof-selector-check { flex: 0 0 auto; color: var(--tof-muted); font-size: 1.35rem; }
.tof-selector-item.is-picked .tof-selector-check { color: var(--tof-accent); }
.tof-selector-footer { justify-content: space-between; gap: .75rem; }
.tof-selector-footer .btn { min-height: 48px; min-width: 9rem; }
.tof-status-person-block + .tof-status-person-block { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--tof-line); }

/* v270: Cuadrilla */
.tof-crew-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.tof-crew-col { display: flex; min-width: 0; flex-direction: column; gap: .6rem; padding: .75rem; border: 1px solid var(--tof-line); border-radius: .8rem; background: var(--tof-surface); }
.tof-crew-col h4 { margin: 0; color: var(--tof-muted); font-size: .85rem; letter-spacing: .02em; text-transform: uppercase; }
.tof-crew-pick { display: flex; min-height: 56px; align-items: center; gap: .6rem; padding: .5rem .7rem; border: 1px solid var(--tof-line); border-radius: .7rem; color: var(--tof-ink); background: var(--tof-surface); text-align: left; }
.tof-crew-pick strong { min-width: 0; flex: 1; overflow-wrap: anywhere; font-size: .98rem; }
.tof-crew-pick.is-empty strong { color: var(--tof-muted); font-weight: 600; }
.tof-crew-pick i { color: var(--tof-accent); }
.tof-crew-pick:hover,
.tof-crew-pick:focus-visible { border-color: var(--tof-accent); background: var(--tof-accent-soft); }
.tof-crew-all { display: flex; min-height: 44px; align-items: center; gap: .5rem; margin: 0; padding-left: 0; }
.tof-crew-all .form-check-input,
.tof-crew-person .form-check-input { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; margin: 0; float: none; }
.tof-crew-list { display: grid; min-height: 6rem; max-height: 22rem; align-content: start; gap: .4rem; overflow-y: auto; }
.tof-crew-person { display: flex; min-height: 52px; align-items: center; gap: .65rem; padding: .45rem .6rem; border: 1px solid var(--tof-line); border-radius: .6rem; cursor: pointer; }
.tof-crew-person:has(input:checked) { border-color: var(--tof-accent); background: var(--tof-accent-soft); }
.tof-crew-person span { display: grid; min-width: 0; gap: .05rem; }
.tof-crew-person strong { overflow-wrap: anywhere; }
.tof-crew-person small { color: var(--tof-muted); font-size: .85rem; }
.tof-crew-move { min-height: 48px; margin-top: auto; }
@media (max-width: 575.98px) {
  .tof-crew-grid { grid-template-columns: minmax(0, 1fr); }
}

/* v271: Destino de Cuadrilla solo consulta; ventana de hora de inicio */
.tof-crew-person.is-readonly { cursor: default; }
.tof-start-time-message { margin: 0 0 1rem; font-weight: 600; overflow-wrap: anywhere; }
.tof-start-time-options { display: grid; gap: .6rem; }
.tof-start-time-options .btn,
.tof-start-time-fields .btn { min-height: 52px; }
.tof-start-time-fields { display: grid; gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--tof-line); }
.tof-start-time-fields .form-label { margin-bottom: .2rem; }
.tof-start-time-hm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.tof-start-time-hm .form-control,
.tof-start-time-fields input[type="date"] { min-height: 48px; font-size: 1.1rem; }
.tof-start-time-error { margin: 0; color: var(--tof-danger); font-weight: 600; }

/* v272: sin chevron a la derecha de las filas; la zona final queda como margen pulsable
   (toda la fila sigue abriendo su selector). */
.tof-work-chevron,
.tof-work-row.is-complete .tof-work-chevron { display: none; }
.tof-work-end { width: .9rem; padding: 0; }

/* v272: selectores con búsqueda. La altura del panel se fija al abrirlo (JS) y solo la lista hace
   scroll; buscar no encoge ni agranda el panel (con pocos resultados queda espacio en blanco). */
#tofSelectorModal .tof-modal-content > .modal-body { display: flex; flex-direction: column; overflow: hidden; }
#tofSelectorModal .tof-search,
#tofSelectorModal .tof-selector-filters { flex: 0 0 auto; }
#tofSelectorModal .tof-selector-list { flex: 1 1 auto; min-height: 0; align-content: start; overflow-y: auto; overscroll-behavior: contain; }

/* v272: Cuadrilla compacta. Listas plegadas con "Detalles (n)"; "Mover a destino" fuera de las
   tarjetas: en escritorio centrado entre Origen y Destino, en móvil debajo de las dos. */
.tof-crew-grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: .75rem; }
.tof-crew-col { gap: .5rem; padding: .65rem; }
.tof-crew-move-wrap { display: flex; align-self: center; justify-content: center; }
.tof-crew-move { margin-top: 0; white-space: nowrap; }
.tof-crew-details { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .7rem; border: 1px solid var(--tof-line); border-radius: .6rem; color: var(--tof-ink); background: var(--tof-soft); font-weight: 600; }
.tof-crew-details:disabled { color: var(--tof-muted); cursor: default; }
.tof-crew-details i { transition: transform .15s ease; }
.tof-crew-details.is-open i { transform: rotate(180deg); }
.tof-crew-details:not(:disabled):hover,
.tof-crew-details:focus-visible { border-color: var(--tof-accent); background: var(--tof-accent-soft); }
.tof-crew-list { min-height: 0; max-height: 18rem; }
@media (max-width: 575.98px) {
  .tof-crew-grid { grid-template-columns: minmax(0, 1fr); }
  .tof-crew-move-wrap { order: 3; }
  .tof-crew-move { width: 100%; }
  .tof-crew-pick { min-height: 48px; }
}
/* v272: panel de hora manual directo (sin opciones previas) y contador del botón Cuadrilla. */
.tof-start-time-fields { margin-top: 0; padding-top: 0; border-top: 0; }
.tof-work-action-count { position: relative; }
.tof-work-action-count span { position: absolute; top: 2px; right: 2px; min-width: 1.1rem; padding: 0 .25rem; border-radius: 999px; color: #fff; background: var(--tof-accent); font-size: .7rem; font-weight: 700; line-height: 1.1rem; }
.tof-work-action-count span:empty { display: none; }

/* v273: panel Opciones de tamaño fijo (el de Opciones › Acciones, fijado por JS al abrirlo). El
   cuerpo no hace scroll: pestañas y "Volver" quedan fijos y solo hacen scroll la cuadrícula o la
   vista; con contenido corto queda espacio vacío. */
#tofMoreModal .tof-modal-content > .modal-body { display: flex; flex-direction: column; overflow: hidden; }
#tofMoreModal #tof-more-home,
#tofMoreModal #tof-more-detail { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
#tofMoreModal .tof-more-tabs,
#tofMoreModal .tof-more-back { flex: 0 0 auto; }
#tofMoreModal .tof-more-back { align-self: flex-start; }
#tofMoreModal .tof-more-grid { flex: 0 1 auto; min-height: 0; align-content: start; overflow-y: auto; overscroll-behavior: contain; }
#tofMoreModal .tof-more-view { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* v274: chips de operarios en una sola línea; el nombre se corta con "…" (completo en el title) y
   la X siempre se ve. "+X operarios" abre el selector. */
#tof-people-chips { display: inline-flex; min-width: 0; flex: 1; flex-wrap: wrap; gap: .35rem; }
#tof-people-summary .tof-chip { max-width: 100%; min-width: 0; white-space: nowrap; }
.tof-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tof-chip-remove { flex: 0 0 auto; }
.tof-chip-more { font-weight: 600; cursor: pointer; }
.tof-chip-more:hover,
.tof-chip-more:focus-visible { border-color: var(--tof-accent); background: var(--tof-accent-soft); }

/* v274: Opciones sin scroll horizontal. Las cuadrículas y vistas solo hacen scroll vertical; los
   tiles no fuerzan anchura y sus etiquetas saltan de línea. */
#tofMoreModal .tof-more-grid,
#tofMoreModal .tof-more-view,
#tofMoreModal .modal-body { overflow-x: hidden; }
.tof-more-tile { min-width: 0; }
.tof-more-tile > span { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }

/* v274: el texto del motivo de "OFs secundarias" reserva siempre su espacio, para que el tamaño
   fijo de Opciones no varíe entre aperturas (se oculta con visibility, no con hidden). */
.tof-more-tile-reason.is-empty { visibility: hidden; }

/* v274/v277: en móvil y en tablet vertical (hasta 991 px, p. ej. 728 px), Cuadrilla y Ajustes usan toda
   la altura disponible (como el selector de Máquina); el resto de vistas mantiene el tamaño fijo de Acciones. */
@media (max-width: 991.98px) {
  #tofMoreModal.tof-more-full .tof-modal-content { height: calc(100vh - 72px) !important; height: calc(100dvh - 72px) !important; }
}

/* v274: selector de Tareas sin OF, agrupado por OF; aviso de lista limitada. */
.tof-selector-group { margin-top: .35rem; padding: .3rem .15rem 0; color: var(--tof-muted); font-size: .82rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.tof-selector-group:first-child { margin-top: 0; }
.tof-selector-note { margin: 0 0 .5rem; color: var(--tof-muted); font-size: .9rem; }

/* v277/v278: "Personal de producción" junto al buscador del selector de Operario (solo si hay operarios de producción). */
.tof-selector-top { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.tof-selector-top .tof-search { flex: 1 1 14rem; min-width: 0; margin-bottom: 0; }
.tof-selector-inline { flex: 0 0 auto; }
.tof-selector-inline[hidden] { display: none; }
.tof-modal-content .tof-selector-inline .tof-filter-chip { white-space: nowrap; }

/* v277/v278: cualquier botón principal deshabilitado de la pantalla y de sus ventanas (Iniciar
   trabajo, Mover a destino, Aceptar, Confirmar…) se ve neutro, sin azul, claramente distinto del
   activo; "Guardando…" (.is-saving) mantiene el azul. */
.tof-page .btn-primary:disabled:not(.is-saving),
.tof-page .btn-primary.disabled:not(.is-saving),
.modal[id^='tof'] .btn-primary:disabled:not(.is-saving),
.modal[id^='tof'] .btn-primary.disabled:not(.is-saving) {
  border-color: var(--tof-line);
  color: var(--tof-muted);
  background: var(--tof-surface-raised);
  opacity: 1;
  box-shadow: none;
  cursor: not-allowed;
}

/* v277: tile "OFs secundarias" con el hueco del motivo reservado pero sin descentrar el contenido:
   rejilla de dos filas; sin motivo, icono y título ocupan las dos filas (centrados) y el motivo
   invisible sigue reservando la altura en la segunda. */
#tof-secondary-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: center; column-gap: .75rem; row-gap: .3rem; }
#tof-secondary-tile > i { grid-column: 1; grid-row: 1; }
#tof-secondary-tile > span { grid-column: 2; grid-row: 1; }
#tof-secondary-tile > .tof-more-tile-reason { grid-column: 1 / -1; grid-row: 2; }
#tof-secondary-tile:not(.has-reason) > i,
#tof-secondary-tile:not(.has-reason) > span { grid-row: 1 / span 2; align-self: center; }
/* Sin motivo, la fila 1 conserva la altura de icono + título con dos marcadores invisibles (mismo
   texto y tamaño), para que el tile mida exactamente lo mismo que con el motivo visible. */
#tof-secondary-tile:not(.has-reason)::before,
#tof-secondary-tile:not(.has-reason)::after { grid-row: 1; visibility: hidden; pointer-events: none; }
#tof-secondary-tile:not(.has-reason)::before { content: "\00a0"; grid-column: 1; font-size: 1.35rem; }
#tof-secondary-tile:not(.has-reason)::after { content: "OFs secundarias"; grid-column: 2; overflow-wrap: anywhere; }