/* Screening de acciones (screening.html / screening.js). Compacto a propósito: filtros en
   una grilla de renglones de una línea, chips chicos y la tabla con su propio scroll para
   que la cabecera y la primera columna queden siempre a la vista. */

.scr-cab { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 8px; }
.scr-cab h1 { font-size:1.25rem; margin:0; }
.scr-fecha { font-size:.78rem; color:var(--tx3); }

/* Filtros de fábrica y guardados */
.scr-presets { display:flex; flex-wrap:wrap; gap:5px; margin:0 0 8px; }
.scr-chip, .scr-chips button, .scr-mio button {
  font:inherit; font-size:.76rem; line-height:1.2; padding:3px 9px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line2); color:var(--tx2); cursor:pointer; }
.scr-chip:hover, .scr-chips button:hover, .scr-mio button:hover { color:var(--tx); border-color:var(--accent); }
.scr-chip.on, .scr-chips button.on, .scr-mio button.on {
  background:var(--acc-bg); border-color:var(--accent); color:var(--accent-d); font-weight:600; }
.scr-mio { display:inline-flex; padding:0; border:0; background:none; }
.scr-mio button:first-child { border-radius:999px 0 0 999px; border-right:0; }
.scr-mio .scr-x { border-radius:0 999px 999px 0; padding:3px 7px; color:var(--tx3); }

/* Grilla de filtros: cada renglón es "rótulo · mín · máx · vs historia" */
.scr-filtros { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:5px 16px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:8px 10px; margin:0 0 8px; }
.scr-f { display:flex; align-items:center; gap:4px; min-width:0; font-size:.76rem; }
.scr-f[hidden], .scr-f [hidden] { display:none; }
.scr-f > span:first-child { color:var(--tx2); flex:0 0 88px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scr-f input, .scr-f select { font:inherit; font-size:.78rem; padding:3px 6px; border-radius:6px;
  min-width:0; height:24px; box-sizing:border-box; background:var(--bg); border:1px solid var(--line2); color:var(--tx); }
.scr-f input:focus, .scr-f select:focus { outline:none; border-color:var(--accent); }
.scr-f input { width:56px; flex:0 0 56px; }
.scr-f select { flex:1 1 auto; width:auto; min-width:100px; }
.scr-f-reco { grid-column:span 2; }
.scr-chips { display:flex; flex-wrap:wrap; gap:4px; }
.scr-f-chk { gap:10px; }
.scr-f-chk label { display:flex; flex-direction:row; align-items:center; gap:4px; color:var(--tx2); white-space:nowrap; cursor:pointer; }
.scr-f-chk input[type=checkbox] { width:14px; height:14px; flex:none; }
.scr-f .scr-q { flex:1 1 auto; width:auto; }

/* Barra de resultado */
.scr-barra { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.8rem; margin:0 0 6px; }
.scr-barra b { color:var(--tx); }
.scr-meta { color:var(--tx3); font-size:.74rem; }
.scr-sw { font-size:.8rem; display:flex; flex-direction:row; align-items:center; gap:4px; color:var(--tx2); margin-left:auto; cursor:pointer; }
.scr-btn { font:inherit; font-size:.76rem; padding:3px 9px; border-radius:7px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line2); color:var(--tx2); }
.scr-btn:hover { color:var(--accent-d); border-color:var(--accent); }

/* Tabla: scroll propio, cabecera y primera columna pegadas */
.scr-wrap { overflow:auto; max-height:calc(100vh - var(--hdr) - 24px); background:var(--surface);
  border:1px solid var(--line); border-radius:10px; }
.scr-tabla { border-collapse:separate; border-spacing:0; width:100%; font-size:.8rem; }
.scr-tabla th, .scr-tabla td { padding:5px 8px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
.scr-tabla .izq { text-align:left; }
.scr-tabla thead th { position:sticky; top:0; z-index:2; background:var(--bg); color:var(--tx2);
  font-size:.72rem; font-weight:600; cursor:pointer; user-select:none; }
.scr-tabla thead th:hover, .scr-tabla thead th.on { color:var(--accent-d); }
.scr-dir { font-size:.6rem; margin-left:3px; }
.scr-tabla tbody tr:hover td { background:var(--surface2); }
.scr-tabla th:first-child, .scr-tabla td:first-child { position:sticky; left:0; z-index:1; background:var(--surface); }
.scr-tabla thead th:first-child { z-index:3; background:var(--bg); }
.scr-tabla td:first-child { max-width:190px; overflow:hidden; text-overflow:ellipsis; }
.scr-tabla td:first-child a { color:var(--tx); font-weight:600; text-decoration:none; }
.scr-tabla td:first-child a:hover { color:var(--accent-d); }
.scr-tabla td:first-child small { color:var(--tx3); margin-left:6px; font-size:.7rem; }
.scr-sec { max-width:130px; overflow:hidden; text-overflow:ellipsis; color:var(--tx2); }
.scr-tabla .pos { color:var(--up); }
.scr-tabla .neg { color:var(--dn); }
.scr-bar { color:var(--ok-tx); font-weight:600; }
.scr-car { color:var(--bad-tx); }
.scr-med { color:var(--tx3); font-size:.7rem; }
.scr-na { color:var(--tx3); }
.scr-ilq { display:inline-block; font-size:.62rem; font-weight:700; color:var(--warn-tx); background:var(--warn-bg);
  border-radius:4px; padding:0 4px; margin-left:3px; cursor:help; }
.scr-tabla .ana-reco { margin:0; font-size:.66rem; padding:2px 6px; text-decoration:none; }
.scr-cero { color:var(--tx3); padding:14px 10px; }

/* En el teléfono los filtros se pliegan: abiertos ocupaban la pantalla entera y la tabla
   quedaba debajo del pliegue. El botón dice cuántos hay activos. */
.scr-ver-f { display:none; }
@media (max-width:640px) {
  .scr-ver-f { display:inline-block; order:-1; }
  .scr-filtros:not(.abierto) { display:none; }
  .scr-filtros { grid-template-columns:1fr; }
  .scr-f-reco { grid-column:auto; }
  .scr-tabla td:first-child { max-width:120px; }
  .scr-tabla td:first-child small { display:none; }
}