/* ============================================================
   KASITHA · kx-stitch-folder.css · v1
   Piel del expediente (/folder) según la maqueta 16-jul.
   Media queries propias; paleta/tipos de la piel Stitch.
   ============================================================ */
.kx-stitch-folder{
  --stzf-serif:'Fraunces',Georgia,serif;
  --stzf-sans:Inter,system-ui,sans-serif;
  --stzf-ink:#1d1b18;
  --stzf-soft:#6f675e;
  --stzf-mute:#9b9187;
  --stzf-hair:rgba(45,32,22,.12);
  --stzf-red:#a30028;
  --stzf-red-2:#c8233c;
  --stzf-tint:#fbe9e6;
  --stzf-beige:#f2ece3;
  --stzf-green:#1c8a4c;
}

/* cabecera: título serif como la maqueta */
.kx-stitch-folder .stzf-head .lbl{font:700 11px var(--stzf-sans);text-transform:uppercase;letter-spacing:.13em;color:var(--stzf-red)}
.kx-stitch-folder .stzf-head .h-title{font:600 32px/1.05 var(--stzf-serif);letter-spacing:-.02em;color:var(--stzf-ink)}

/* tarjeta de progreso */
.kx-stitch-folder .stzf-prog{background:#fff;border:1px solid var(--stzf-hair);border-radius:18px;padding:18px;margin:6px 0 20px}
.kx-stitch-folder .stzf-prog-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.kx-stitch-folder .stzf-prog-t{font:700 15.5px var(--stzf-sans);color:var(--stzf-ink)}
.kx-stitch-folder .stzf-prog-pct{font:600 30px var(--stzf-serif);color:var(--stzf-red)}
.kx-stitch-folder .stzf-bar{display:block;height:8px;border-radius:99px;background:#e7e1d8;margin:10px 0 12px;overflow:hidden}
.kx-stitch-folder .stzf-bar span{display:block;height:100%;border-radius:99px;background:var(--stzf-red);transition:width .3s ease}
.kx-stitch-folder .stzf-prog-sub{margin:0;font:400 14px var(--stzf-sans);color:var(--stzf-soft)}

/* secciones: cabecera caps + hairline */
.kx-stitch-folder .stzf-sec{margin:0 0 8px}
.kx-stitch-folder .stzf-sec-t{font:700 12.5px var(--stzf-sans);text-transform:uppercase;letter-spacing:.14em;color:#7a4a3f;border-bottom:1px solid var(--stzf-hair);padding:14px 0 8px;margin:0 0 12px}

/* tarjetas de documento */
.kx-stitch-folder .stzf-card{background:#fff;border:1px solid var(--stzf-hair);border-radius:16px;padding:6px 14px;margin:0 0 12px}
.kx-stitch-folder .stzf-face{display:flex;align-items:center;gap:14px;width:100%;padding:10px 0;background:transparent;border:0;text-align:left;cursor:pointer}
.kx-stitch-folder .stzf-ico{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:var(--stzf-beige);color:var(--stzf-red);flex:none}
.kx-stitch-folder .stzf-ico--pend{background:var(--stzf-tint)}
.kx-stitch-folder .stzf-tt{flex:1;min-width:0}
.kx-stitch-folder .stzf-tt b{display:block;font:600 16.5px var(--stzf-sans);color:var(--stzf-ink);letter-spacing:-.01em}
.kx-stitch-folder .stzf-st{display:inline-flex;align-items:center;gap:6px;margin-top:3px;font:500 13.5px var(--stzf-sans)}
.kx-stitch-folder .stzf-ok{color:var(--stzf-green)}
.kx-stitch-folder .stzf-ok svg{background:transparent}
.kx-stitch-folder .stzf-pend{color:var(--stzf-red-2)}
.kx-stitch-folder .stzf-ver{font:600 16px var(--stzf-sans);color:var(--stzf-ink);padding:0 4px}
.kx-stitch-folder .stzf-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:2px 0 10px;padding:13px;border:0;border-radius:12px;background:var(--stzf-red-2);color:#fff;font:700 15px var(--stzf-sans);cursor:pointer}
.kx-stitch-folder .stzf-btn--gen{background:transparent;border:1.5px solid var(--stzf-red);color:var(--stzf-red)}

/* sección de la operación: la lista real del Folder (vrow) con la piel */
.kx-stitch-folder .stzf-sec-t--op{margin-bottom:0}
.kx-stitch-folder .vault-seg{margin-top:4px}
.kx-stitch-folder .vault-hero{border:1px solid var(--stzf-hair);border-radius:16px}
.kx-stitch-folder .vh-title{font:600 16px var(--stzf-serif)}
.kx-stitch-folder .vblock{background:#fff;border:1px solid var(--stzf-hair);border-radius:16px;padding:4px 14px}
.kx-stitch-folder .vrow{border-bottom:1px solid var(--stzf-hair);padding:12px 0}
.kx-stitch-folder .vrow:last-of-type{border-bottom:0}
.kx-stitch-folder .vrow-name{font:600 15px var(--stzf-sans);color:var(--stzf-ink)}
.kx-stitch-folder .vrow-sub{font:400 12.5px var(--stzf-sans);color:var(--stzf-soft)}
.kx-stitch-folder .vp-ok{background:transparent;color:var(--stzf-ink);font:600 14px var(--stzf-sans)}
.kx-stitch-folder .vp-pend{background:transparent;color:var(--stzf-red-2);font:600 13px var(--stzf-sans)}

/* escritorio: contenido centrado y checklist a 2 columnas por sección */
@media (min-width:960px){
  .kx-stitch-folder .stzf-pad,.kx-stitch-folder .stzf-head{max-width:860px;margin-left:auto;margin-right:auto}
  .kx-stitch-folder .stzf-sec{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
  .kx-stitch-folder .stzf-sec-t{grid-column:1/-1}
  .kx-stitch-folder .stzf-prog-pct{font-size:36px}
}

/* v2 · bloques colapsables + Otros documentos */
.kx-stitch-folder details.stzf-sec{border:0;padding:0}
.kx-stitch-folder .stzf-sec-sum{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:6px 0}
.kx-stitch-folder .stzf-sec-sum::-webkit-details-marker{display:none}
.kx-stitch-folder .stzf-sec-sum .stzf-sec-t{margin:0;flex:1}
.kx-stitch-folder .stzf-sec-count{font:700 11px Inter,sans-serif;color:#8a7f74;background:#f1e8dd;border-radius:99px;padding:3px 9px}
.kx-stitch-folder .stzf-sec-count--ok{color:#1c8a4c;background:#e2f2e8}
.kx-stitch-folder .stzf-sec-chev{font-size:20px;line-height:1;color:#b3a89c;transition:transform .18s ease}
.kx-stitch-folder details[open] > .stzf-sec-sum .stzf-sec-chev{transform:rotate(90deg)}
.kx-stitch-folder .stzf-sec-body{padding-top:2px}
.kx-stitch-folder .stzf-nota{font:400 13px Inter,sans-serif;color:#8a7f74;margin:6px 2px 2px}
.kx-stitch-folder .stzf-card--up .stzf-ico--up{background:#f1e8dd;color:#7a6f63}
@media (min-width:960px){
  .kx-stitch-folder .stzf-sec-body{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .kx-stitch-folder .stzf-sec-body .stzf-btn,.kx-stitch-folder .stzf-sec-body .stzf-nota{grid-column:1/-1}
}

/* ============ v2 · maestro-detalle según maqueta (17-jul) ============ */
.kx-stitch-folder .stzf-sub{font:400 14.5px/1.55 var(--sans);color:var(--ink-soft);
  margin:6px 0 0;max-width:520px}

/* hero: tarjeta de progreso con anillo */
.stzf-hero{margin-bottom:16px}
.stzf-prog{display:flex;align-items:center;gap:14px;background:#f7ede4;
  border:1px solid var(--hairline);border-radius:18px;padding:16px 18px}
.stzf-ring{--p:0;width:64px;height:64px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(var(--accent) calc(var(--p)*1%), #e8dccf 0);
  display:flex;align-items:center;justify-content:center}
.stzf-ring b{width:48px;height:48px;border-radius:50%;background:#fdf8f2;
  display:flex;align-items:center;justify-content:center;
  font:700 13.5px var(--serif);color:var(--accent-deep)}
.stzf-prog-tx{min-width:0}
.stzf-prog .stzf-prog-t{font:600 17px var(--serif);color:var(--ink);display:block}
.stzf-prog .stzf-prog-sub{margin:3px 0 0}
.stzf-bar{display:none}

/* maestro-detalle */
.stzf-nav{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.stzf-nav-it{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--hairline);border-radius:16px;
  padding:14px;cursor:pointer;font:700 12px var(--sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);transition:box-shadow .15s}
.stzf-nav-it:hover{box-shadow:0 4px 14px rgba(45,32,22,.08)}
.stzf-nav-it.on{background:#f3e2da;border-color:transparent}
.stzf-nav-ico{width:34px;height:34px;border-radius:10px;background:var(--accent-tint);
  color:var(--accent);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.stzf-nav-ico svg{width:17px;height:17px}
.stzf-nav-t{flex:1;min-width:0}
.stzf-panel-sec{display:none}
.stzf-panel-sec.on{display:block}
.stzf-panel{background:var(--surface);border:1px solid var(--hairline);
  border-radius:20px;padding:16px}
.stzf-panel-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-bottom:1px solid var(--hairline);padding-bottom:12px;margin-bottom:14px}
.stzf-panel-t{font:600 21px var(--serif);letter-spacing:-.01em;color:var(--ink);margin:0}
.stzf-panel-note{font:italic 400 12.5px var(--sans);color:var(--ink-mute);
  margin:0;width:100%}

/* escritorio: hero en dos columnas y carril | panel */
@media (min-width:1000px){
  .kx-stitch-folder .stzf-head,.kx-stitch-folder .stzf-pad{max-width:1010px;
    margin-left:auto;margin-right:auto;width:100%;box-sizing:border-box}
  .kx-stitch-folder .stzf-head{display:grid;grid-template-columns:1fr 380px;
    grid-template-areas:"lbl hero" "title hero" "sub hero";gap:2px 24px;align-items:start}
  .kx-stitch-folder .stzf-head>.lbl{grid-area:lbl}
  .kx-stitch-folder .stzf-head>.h-title{grid-area:title;font-size:38px;margin-bottom:2px}
  .kx-stitch-folder .stzf-head>.stzf-sub{grid-area:sub}
  .kx-stitch-folder .stzf-head>.stzf-hero{grid-area:hero;margin:0}
  .stzf-main{display:grid;grid-template-columns:340px 1fr;gap:22px;align-items:start}
  .stzf-nav{margin-bottom:0}
  .stzf-panel{padding:20px 22px}
  .stzf-panel-note{width:auto;margin-left:auto}
}

/* v2b: dentro del panel "De la operación" sobra el segmento de pestañas
   del core (Mis documentos ya es el propio checklist del carril) */
.stzf-panel-sec[data-stzf-panel="op"] .vault-seg{display:none}