/* ==========================================================================
   View: Herramientas (SPEC 3.4, 17.8). Llamada de prueba, Comprobador de actividad, Rellamadas, Pedir un dato.
   Each tool is a form card and a result card: one column up to 1099 px, two columns (1.2fr and 1fr) from 1100 px. Phone: the four tabs are a 2 x 2
   grid (components.css), inputs are 48 px, the main button 52 px. Tokens only, no !important, breakpoints 761 and 1100. Owned by S7.
   ========================================================================== */
.tool-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 1100px) {
  .tool-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
  .tool-wide { grid-column: 1 / -1; }
}
.tool-card { display: grid; gap: var(--sp-4); align-content: start; }
/* the title column takes what is left and may shrink; when the text is zoomed (200 %) the chip or button drops under the title instead of leaving the screen */
.tool-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }
.tool-head > :first-child { flex: 1 1 9rem; min-width: 0; }
.tool-head > .chip, .tool-head > .btn { flex: none; max-width: 100%; }
.tool-head .card__sub { max-width: 52ch; }
.tool-narrow .select, .tool-narrow .input { max-width: 220px; }
.tool-link { justify-self: start; }
/* a reason or a hint followed by its fix: the pieces sit side by side and wrap at their own edges, the 44 px link never stretches a text line */
.tool-card .why > span, .tool-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); }

/* what the tool will use: Caller ID, locución, agents, balance (chips, never a bare dot) */
.tool-ctx { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tool-ctx .chip { max-width: 100%; white-space: normal; }
.tool-ctx b { font-weight: 700; }

/* the list boxes: label row with the import button, the count and Vaciar under the box */
.tool-label-row, .tool-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.tool-file { position: relative; overflow: hidden; cursor: pointer; }
.tool-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.tool-file:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.tool-file[aria-disabled="true"] input { cursor: not-allowed; }
.textarea[readonly] { color: var(--muted); }
.field__hint.is-warn { color: var(--warn); }

/* what was understood from the list: dropped, repeated and ignored lines */
.tool-report { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--s2); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--ink-2); }
.tool-report__item { display: flex; align-items: flex-start; gap: var(--sp-2); }
.tool-report__item .icon { margin-top: 2px; color: var(--info); }
.tool-report__item > span { min-width: 0; overflow-wrap: anywhere; }
.tool-report__lines { display: grid; gap: 2px; margin: 4px 0; color: var(--muted); font-family: var(--font-mono); }

/* the buttons of a run: the main one first, the other two share the row */
.tool-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tool-actions > .btn { flex: 1 1 0; min-width: 0; }
.tool-actions > .btn--primary { flex: 1 1 100%; }
@media (min-width: 761px) { .tool-actions > .btn--primary { flex: 2 1 240px; } }

/* counters (always numbers in text) */
.tool-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
@media (min-width: 761px) { .tool-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tool-stat { display: grid; gap: 2px; align-content: start; padding: var(--sp-3) var(--sp-4); background: var(--s2); border: 1px solid var(--line); border-radius: var(--r-md); }
.tool-stat b { font-size: 1.5rem; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tool-stat span { font-size: var(--fs-sm); color: var(--muted); }
.tool-stat--ok { background: var(--accent-soft); border-color: var(--accent-line); }
.tool-stat--ok b { color: var(--accent); }

/* the five steps of the test call */
.timeline { display: grid; }
.tl { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; min-height: 48px; }
.tl::before { content: ""; position: absolute; left: 13px; top: 50%; width: 2px; height: 100%; background: var(--line-strong); }
.tl:last-child::before { display: none; }
.tl__dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--s2); border: 2px solid var(--line-strong); color: var(--muted); font-size: var(--fs-cap); font-weight: 700; }
.tl__dot .icon { width: 14px; height: 14px; stroke-width: 3; }
.tl.is-done .tl__dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tl.is-done::before { background: var(--accent); }
.tl.is-now .tl__dot { background: var(--s1); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.tl__txt { font-weight: 600; overflow-wrap: anywhere; }
.tl.is-todo .tl__txt { color: var(--muted); font-weight: 500; }
.tl__time { font-size: var(--fs-sm); color: var(--muted); }

/* lists of numbers with their state: live rellamadas, confirmed numbers, test history */
.tool-rows { display: grid; }
.tool-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-3); min-height: 56px; padding: var(--sp-3) 0; }
.tool-row + .tool-row { border-top: 1px solid var(--line); }
.tool-row__main { display: grid; flex: 1 1 150px; min-width: 0; }
.tool-row__num { font-weight: 700; white-space: nowrap; }
.tool-row__meta { display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); font-size: var(--fs-sm); color: var(--muted); }
.tool-empty { padding: var(--sp-4); border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--muted); font-size: var(--fs-sm); text-align: center; }

/* what the contact pressed: Pedir un dato */
.tool-results { display: grid; gap: var(--sp-3); }
.tool-results:empty { display: none; }
.tool-result__digits { margin: 2px 0; font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 700; letter-spacing: .08em; overflow-wrap: anywhere; }
.tool-result__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-3); font-size: var(--fs-sm); color: var(--muted); }
.tool-will { display: grid; gap: var(--sp-3); }
.tool-will li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: start; color: var(--ink-2); }
.tool-will .icon { margin-top: 3px; color: var(--accent); }