/* historias.css — owned by the historias screen agent. Loaded after styles.css; use tokens from tokens.css only.
   Historias (Periodo · Último lote · Archivadas): range bar, filter bars, report frame and the shared
   history grid table (HistoryHeader / HistoryRow / HistoryTable, also used by ResultsScreen). */

.ca-hist-panel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ca-hist-h2 { margin: 0; font-size: 22px; line-height: 1.15; }
.ca-hist-desc { margin: 0; font-size: 13px; color: var(--text-2); max-width: 80ch; }

/* ---------- range ---------- */
.ca-hist-range { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.ca-hist-range__dates { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ca-hist-range__field { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.ca-hist-range__field input { background: var(--surface-1); }

/* ---------- filter bars ---------- */
.ca-hist-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ca-hist-filters .ca-select { max-width: 100%; }
.ca-hist-count { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ca-hist-cohort { gap: 8px; }
.ca-hist-cohort__label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); }
.ca-hist-cohort.is-dim .ca-hist-cohort__label { color: var(--text-3); cursor: help; }
.ca-hist-check { font-size: 13px; }
.ca-hist-toggle { font-family: var(--font-body); font-size: 13px; color: var(--text-2); }
.ca-hist-toggle svg { width: 13px; height: 13px; stroke-width: 1.75; }
.ca-hist-toggle.is-on, .ca-hist-toggle[aria-pressed="true"] {
  background: var(--st-warn-fill); color: var(--st-warn); border-color: var(--st-warn-mark);
}
.ca-hist-toggle.is-on:not(:disabled):hover { background: var(--st-warn-fill); }
.ca-hist-clear { font-size: 13px; margin-left: auto; }
.ca-hist-searchline {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--color-accent-700);
}

/* ---------- reports frame ---------- */
.ca-hist-sep { width: 1px; align-self: stretch; min-height: 24px; background: var(--line); }
.ca-hist-planline { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.ca-hist-planline svg { flex: none; margin-top: 2px; }
.ca-hist-planline.is-bad { color: var(--st-bad); }

/* ---------- history grid table ---------- */
/* Wide grid inside the frame's own horizontal scroll: the page never scrolls sideways at 375 px. */
.ca-hist-table__in { min-width: 940px; }
.ca-hist-grid { gap: 14px; }
.ca-tr.ca-hist-grid { padding-top: 6px; padding-bottom: 6px; }
.ca-hist-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ca-hist-who__main { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.ca-hist-who__label { font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ca-hist-who__sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); }
.ca-hist-crit {
  display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px;
  font-variant-numeric: tabular-nums; font-size: 13px; background: var(--surface-2); color: var(--text-2);
}
.ca-hist-crit.is-bad { background: var(--st-bad-fill); color: var(--st-bad); font-weight: 600; }
.ca-hist-failed {
  grid-column: span 4; display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: var(--st-bad);
  overflow-wrap: anywhere;
}
.ca-hist-failed svg { flex: none; margin-top: 2px; }
.ca-hist-open {
  justify-self: end; display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; white-space: nowrap;
  color: var(--color-accent-700); transition: color var(--dur-1) var(--ease-out);
}
.ca-tr.is-link:hover .ca-hist-open, .ca-tr.is-link:focus-visible .ca-hist-open { color: var(--color-accent-800); text-decoration: underline; text-underline-offset: 3px; }
.ca-hist-empty .ca-empty { padding: 32px 16px; }

/* sortable header (Último lote) */
.ca-hist-sort {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; white-space: nowrap;
}
.ca-hist-sort:hover, .ca-hist-sort.is-on { color: var(--color-text); }
.ca-hist-sort:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ca-hist-sort__arrow { font-size: 9px; opacity: .8; }

@media (max-width: 619px) {
  .ca-hist-filters > .ca-seg { width: 100%; overflow-x: auto; }
  .ca-hist-filters > .ca-seg .ca-seg__opt { flex: 1 0 auto; }
  .ca-hist-cohort .ca-select { flex: 1 1 140px; }
  .ca-hist-clear { margin-left: 0; }
  .ca-hist-sep { display: none; }
}