/* ==================== DÓNDE ACTUAR · tablero de trabajo ==================
   Un acento (el teal del producto) y un sistema de radios (16 en bloques, 8 en
   piezas). La escala tipográfica sube respecto del resto del informe a
   propósito: esta pantalla tiene que poder leerse de una, y el informe entero
   vivía en 22px de título máximo.

   La densidad es baja arriba y alta abajo. Arriba hay tres casos y una frase;
   abajo, cuando alguien abre un caso, aparecen las cuarenta filas y las fotos.
   Es la única forma de que un tablero de trabajo no abrume en el segundo en
   que se abre y siga siendo suficiente cuando hay que reclamar. */
.zw,.ex{--zw-h1:clamp(26px,2.9vw,40px)}
.zw{max-width:1120px;margin:0 auto;padding:6px 0 44px}
.zw-kick{font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:.8px;text-transform:uppercase;color:var(--t3);margin-bottom:13px}
.zw-h1{font-size:var(--zw-h1);font-weight:var(--fw-heavy);color:var(--t1);line-height:1.1;letter-spacing:-1.1px;margin:0;max-width:19ch}
.zw-h1 em{font-style:normal;color:var(--pd)}
.zw-lead{font-size:var(--fs-h3);color:var(--t2);line-height:var(--lh-body);margin:15px 0 0;max-width:64ch}

.zw-secl{font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:.8px;text-transform:uppercase;color:var(--t3);margin:34px 0 12px}

/* ── un caso, en la lista ── */
.zw-caso{display:block;width:100%;text-align:left;font:inherit;cursor:pointer;background:var(--surf);
  border:var(--border);border-radius:var(--r16);padding:20px 22px;margin-bottom:12px;
  transition:border-color var(--tr-base),box-shadow var(--tr-base)}
.zw-caso:hover{border-color:var(--bd2);box-shadow:0 2px 14px rgba(20,32,46,.06)}
.zw-caso:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.zw-caso-top{display:flex;align-items:flex-start;gap:18px}
.zw-caso-n{flex-shrink:0;width:56px;text-align:center}
.zw-caso-n-v{font-size:var(--fs-h1);font-weight:var(--fw-heavy);color:var(--t1);line-height:1;letter-spacing:-1px}
.zw-caso-n-l{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.5px;font-weight:var(--fw-bold);color:var(--t3);margin-top:4px}
.zw-caso-b{flex:1;min-width:0}
.zw-caso-t{font-size:var(--fs-h3);font-weight:var(--fw-bold);color:var(--t1);line-height:var(--lh-snug)}
.zw-caso-d{font-size:var(--fs-ter);color:var(--t2);line-height:var(--lh-body);margin-top:6px;max-width:70ch}
.zw-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.zw-chip{font-size:var(--fs-micro);font-weight:var(--fw-med);background:var(--bg);color:var(--t2);padding:4px 9px;border-radius:var(--r8)}
.zw-chip.on{background:var(--pl);color:var(--pd);font-weight:var(--fw-semi)}
.zw-chip.no{background:var(--warn-bg);color:#92400e}
.zw-caso-go{flex-shrink:0;color:var(--bd2);margin-top:4px}
.zw-caso:hover .zw-caso-go{color:var(--pd)}
.zw-mas{background:none;border:none;padding:8px 0;font:inherit;font-size:var(--fs-ter);font-weight:var(--fw-semi);color:var(--pd);cursor:pointer}
.zw-mas:hover{text-decoration:underline}

/* ── el caso abierto ── */
.zw-back{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-ter);font-weight:var(--fw-semi);
  color:var(--t2);background:none;border:none;padding:6px 0;cursor:pointer;margin-bottom:12px}
.zw-back:hover{color:var(--pd)}
.zw-paso{padding:28px 0;border-top:1px solid var(--bd)}
.zw-paso:first-of-type{border-top:none;padding-top:4px}
.zw-paso-t{display:flex;align-items:center;gap:10px;font-size:var(--fs-label);font-weight:var(--fw-bold);
  letter-spacing:.8px;text-transform:uppercase;color:var(--t3);margin-bottom:14px}
.zw-paso-n{width:19px;height:19px;border-radius:50%;background:var(--bg);color:var(--t2);
  display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:var(--fw-heavy);letter-spacing:0}
.zw-paso-h{font-size:var(--fs-h2);font-weight:var(--fw-bold);color:var(--t1);line-height:var(--lh-snug);letter-spacing:-.4px;margin:0;max-width:32ch}
.zw-p{font-size:var(--fs-sec);color:var(--t2);line-height:var(--lh-body);margin:12px 0 0;max-width:74ch}
.zw-p b{color:var(--t1);font-weight:var(--fw-semi)}

.zw-why{background:var(--surf);border:var(--border);border-left:3px solid var(--p);border-radius:var(--r8);padding:15px 18px;margin-top:16px}
.zw-why-t{font-size:var(--fs-sec);font-weight:var(--fw-semi);color:var(--t1);line-height:var(--lh-snug)}
.zw-why-p{font-size:var(--fs-ter);color:var(--t2);line-height:var(--lh-body);margin-top:7px}

/* ── responsable: el setup que se arma usando el producto ── */
.zw-resp{background:var(--surf);border:var(--border);border-radius:var(--r12);padding:16px 18px;margin-top:14px;max-width:640px}
.zw-resp-vacio{border-style:dashed;border-color:var(--bd2)}
.zw-resp-n{font-size:var(--fs-sec);font-weight:var(--fw-semi);color:var(--t1)}
.zw-resp-m{font-size:var(--fs-ter);color:var(--t2);margin-top:3px}
.zw-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.zw-form label{display:block;font-size:var(--fs-micro);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin-bottom:5px}
.zw-form input{width:100%;font:inherit;font-size:var(--fs-ter);color:var(--t1);background:var(--bg);
  border:1px solid var(--bd);border-radius:var(--r8);padding:9px 11px}
.zw-form input:focus{outline:none;border-color:var(--p);background:var(--surf)}
.zw-form-full{grid-column:1/-1}

.zw-btn{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-ter);font-weight:var(--fw-semi);
  color:#fff;background:var(--p);border:none;border-radius:var(--r8);padding:11px 17px;cursor:pointer;
  transition:background var(--tr-base)}
.zw-btn:hover{background:var(--pd)}
.zw-btn:disabled{background:var(--bd2);cursor:default}
.zw-btn.gh{background:var(--surf);color:var(--pd);border:1px solid var(--bd)}
.zw-btn.gh:hover{background:var(--bg);border-color:var(--p)}
.zw-btn.sm{padding:8px 13px;font-size:var(--fs-micro)}
.zw-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center}

/* ── evidencia ── */
.zw-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:9px;margin-top:16px}
.zw-foto{position:relative;aspect-ratio:3/4;border-radius:var(--r8);overflow:hidden;background:var(--bg);cursor:pointer;border:1px solid var(--bd)}
.zw-foto img{width:100%;height:100%;object-fit:cover;display:block}
.zw-foto-c{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;font-size:var(--fs-micro);color:#fff;
  background:linear-gradient(transparent,rgba(20,32,46,.82));line-height:1.3}
.zw-tabla{margin-top:18px;border-top:1px solid var(--bd);max-height:340px;overflow:auto}
.zw-tr{display:grid;grid-template-columns:1fr 210px 140px;gap:14px;align-items:center;
  padding:10px 4px;border-bottom:1px solid var(--bd);font-size:var(--fs-ter)}
.zw-tr b{color:var(--t1);font-weight:var(--fw-semi)}
.zw-tr span{color:var(--t2)}
.zw-tag{font-size:var(--fs-micro);font-weight:var(--fw-bold);color:var(--pd)}
.zw-tag.no{color:var(--t3)}

/* ── el reclamo ── */
.zw-prev{background:var(--bg);border:1px solid var(--bd);border-radius:var(--r12);padding:16px 18px;margin-top:14px;
  font-size:var(--fs-ter);color:var(--t2);line-height:1.65;white-space:pre-wrap;max-height:260px;overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.zw-nota{font-size:var(--fs-micro);color:var(--t3);line-height:var(--lh-body);margin-top:10px;max-width:70ch}

/* ── explorador (rol secundario) ── */
.ex{max-width:1120px;margin:0 auto;padding:6px 0 40px}
.ex-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:16px 0 22px}
.ex-bar label{display:block;font-size:var(--fs-micro);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin-bottom:6px}
.ex-bar select{font:inherit;font-size:var(--fs-ter);color:var(--t1);background:var(--surf);border:1px solid var(--bd);border-radius:var(--r8);padding:9px 11px;min-width:190px}
.ex-tabla{background:var(--surf);border:var(--border);border-radius:var(--r16);overflow:hidden}
.ex-hd,.ex-r{display:grid;grid-template-columns:1fr 90px 120px 1fr 92px;gap:14px;align-items:center;padding:12px 18px}
.ex-hd{font-size:var(--fs-micro);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.5px;color:var(--t3);border-bottom:1px solid var(--bd)}
.ex-r{border-bottom:1px solid var(--bd);font-size:var(--fs-ter);color:var(--t2)}
.ex-r:last-child{border-bottom:none}
.ex-r b{color:var(--t1);font-weight:var(--fw-semi)}
.ex-bar2{height:8px;border-radius:4px;background:var(--bg);overflow:hidden}
.ex-bar2 i{display:block;height:100%;background:rgba(19,193,172,.55)}
.ex-sig{font-size:var(--fs-micro);font-weight:var(--fw-bold);color:var(--pd)}
.ex-sig.no{color:var(--t3);font-weight:var(--fw-med)}

@media (max-width:980px){
  .zw-form{grid-template-columns:1fr}
  .zw-tr{grid-template-columns:1fr;gap:3px}
  .ex-hd,.ex-r{grid-template-columns:1fr 70px 100px;gap:10px}
  .ex-hd>:nth-child(4),.ex-r>:nth-child(4){display:none}
}