/* enhanzu_ui — kit de componentes para apps de escritorio (pywebview) y reportes HTML.
   Tokens: tokens.css. Fuentes locales (OFL). Portado de web/frontend/enhanzu (btn, card, field, focus),
   estado.html (kpi, table, badge, dot), recruiting/ui/render.py (tabs, toolbar, empty) y la PWA (scrollbars). */
@import url("tokens.css?v=c398ee4e");

/* una sola src por fuente: report_head() la incrusta en base64 y no hay que duplicar 40 KB */
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/onest-latin-wght-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/inter-latin-wght-normal.woff2') format('woff2')}

/* ---- base ---- */
*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:var(--font-body);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  cursor:default}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-0.02em;line-height:1.15;margin:0;font-weight:700}
h1{font-size:22px}h2{font-size:16px;font-weight:600}h3{font-size:14px;font-weight:600}
p{margin:0}
a{color:var(--muted);text-decoration:none}
a:hover{color:var(--text)}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:4px}
::selection{background:color-mix(in srgb,var(--primary) 30%,transparent)}
.sr-only{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
[hidden]{display:none!important}
input,textarea,pre,code,.select-text{cursor:auto}
/* El texto se selecciona (2026-09-10): antes el body entero era user-select:none para que la
   ventana no se sintiera página web, pero eso también impedía copiar el nombre de una vacante,
   una ruta o un mensaje de error. Ahora el bloqueo va SOLO sobre lo que no es texto para leer:
   arrastrar sobre la interfaz no debe pintar de azul un botón ni el stepper. */
.btn,.step,.steps,.badge,.pill,.dot,.status,.tab,.toast,.ico,summary,[data-toggle-theme]{user-select:none}
.muted{color:var(--muted)}
.mono{font-family:var(--font-mono);font-size:13px;font-variant-numeric:tabular-nums}
.small{font-size:13px}

/* scrollbars finos (reemplazan los gruesos del SO) */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text) 28%,transparent) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text) 25%,transparent);border-radius:100px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--text) 45%,transparent);background-clip:content-box}

/* iconos SVG inline (kit.js hidrata <i data-icon="…">) — nunca emojis */
.ico{width:1.15em;height:1.15em;flex:none;vertical-align:-0.2em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico.spin{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- layout ---- */
.app{max-width:960px;margin:0 auto;padding:var(--s5) var(--s6) var(--s6)}
.row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.spread{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:var(--s4)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.grow{flex:1;min-width:0}
.right{margin-left:auto}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- header de app ---- */
.app-header{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) 0 var(--s5);border-bottom:1px solid var(--border);margin-bottom:var(--s5)}
.wordmark{font-family:var(--font-display);font-weight:var(--wordmark-weight);font-size:22px;letter-spacing:var(--wordmark-tracking);color:var(--text);line-height:1;white-space:nowrap}
.wordmark .z{color:var(--primary)}
.app-header .mark{width:28px;height:28px;flex:none;border-radius:7px}
.app-title{display:flex;flex-direction:column;min-width:0}
.app-title h1{font-size:17px;font-weight:600}
.app-title .sub{font-size:13px;color:var(--muted);margin-top:2px}
.app-actions{margin-left:auto;display:flex;gap:var(--s2)}

/* ---- botones ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:600;font-size:14px;
  line-height:1;padding:10px 16px;min-height:40px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;
  color:var(--text);background:transparent;text-decoration:none;white-space:nowrap;
  transition:transform .15s ease,filter .15s ease,border-color .15s ease,color .15s ease,background .15s ease,opacity .15s ease}
.btn-primary{background:var(--primary);color:var(--on-primary);font-family:var(--font-display);font-weight:700;font-size:15px;padding:12px 22px;min-height:44px}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn-ghost{border-color:var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn-danger{border-color:var(--border);color:var(--bad)}
.btn-danger:hover{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent)}
.btn-sm{padding:6px 12px;min-height:32px;font-size:13px}
.btn-icon{padding:0;width:40px}
.btn-icon.btn-sm{width:32px}
.btn[disabled],.btn.is-loading{opacity:.55;cursor:not-allowed;transform:none;filter:none;pointer-events:none}
.btn:active:not([disabled]){transform:translateY(0);filter:brightness(.96)}

/* ---- card ---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--s5);box-shadow:var(--shadow-1)}
.card>h2{margin-bottom:var(--s4)}
.card-head{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.card-head h2{margin:0}
.card.is-active{border-color:color-mix(in srgb,var(--primary) 45%,var(--border))}

/* ---- campos ---- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.label{font-size:13px;font-weight:600;color:var(--text)}
.field .hint,.hint{font-size:12.5px;color:var(--muted)}
.field input,.field textarea,.field select,.input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text);font:inherit;font-size:14px;padding:10px 12px;min-height:40px;transition:border-color .15s ease}
.field input:focus,.field textarea:focus,.field select:focus,.input:focus{outline:none;border-color:var(--primary)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field textarea{resize:vertical;min-height:120px;line-height:1.55}
.field select{appearance:none;cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B92A5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:18px}
.field input[type=number]{width:110px;font-variant-numeric:tabular-nums}
.check{display:inline-flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.check input{width:16px;height:16px;margin:0;cursor:pointer}
input[type=checkbox],input[type=radio],input[type=range],progress{accent-color:var(--primary)}
.file-pick{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--bg);border:1px dashed var(--border);border-radius:var(--radius-sm)}
.file-pick.has-file{border-style:solid}
.file-pick .name{font-weight:600}
.file-pick .meta{font-size:12.5px;color:var(--muted)}

/* ---- stepper ---- */
.steps{display:flex;gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s5)}
.step{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);font-weight:500}
.step .n{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--border);display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:12px;font-weight:700;transition:all .2s ease}
.step[data-state=active]{color:var(--text)}
.step[data-state=active] .n{border-color:var(--primary);color:var(--primary)}
.step[data-state=done]{color:var(--text)}
.step[data-state=done] .n{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.step[data-state=error] .n{border-color:var(--bad);color:var(--bad)}

/* ---- progreso / estado ---- */
progress.progress{width:100%;height:6px;border:0;border-radius:99px;overflow:hidden;background:var(--surface-alt);appearance:none;display:block}
progress.progress::-webkit-progress-bar{background:var(--surface-alt);border-radius:99px}
progress.progress::-webkit-progress-value{background:linear-gradient(90deg,var(--accent),var(--primary));border-radius:99px;transition:width .3s ease}
progress.progress:indeterminate{background:linear-gradient(90deg,var(--surface-alt) 0 30%,var(--primary) 50%,var(--surface-alt) 70% 100%);background-size:250% 100%;animation:indet 1.4s linear infinite}
progress.progress:indeterminate::-webkit-progress-bar{background:transparent}
@keyframes indet{from{background-position:120% 0}to{background-position:-120% 0}}
.status{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--border);border-radius:999px;padding:6px 13px}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 0 rgba(184,255,79,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(184,255,79,.45)}70%{box-shadow:0 0 0 10px rgba(184,255,79,0)}100%{box-shadow:0 0 0 0 rgba(184,255,79,0)}}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted);vertical-align:1px}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}.dot.info{background:var(--info)}

/* lista de pasos en vivo (kit.log) */
.runlog{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.runlog li{display:flex;gap:10px;align-items:flex-start;color:var(--muted)}
.runlog li .ico{margin-top:3px}
.runlog li.step{color:var(--text)}
.runlog li.step.done{color:var(--muted)}
.runlog li.ok{color:var(--ok)}.runlog li.warn{color:var(--warn)}.runlog li.error{color:var(--bad)}

/* detalles técnicos colapsados */
details.log{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg)}
details.log summary{cursor:pointer;padding:8px 12px;font-size:12.5px;color:var(--muted);list-style:none;display:flex;align-items:center;gap:8px}
details.log summary::-webkit-details-marker{display:none}
details.log summary::before{content:"";width:0;height:0;border:4px solid transparent;border-left:6px solid var(--muted);transition:transform .15s}
details.log[open] summary::before{transform:rotate(90deg)}
details.log pre{margin:0;padding:10px 12px;max-height:220px;overflow:auto;font-family:var(--font-mono);font-size:12.5px;line-height:1.5;color:var(--muted);white-space:pre-wrap;border-top:1px solid var(--border)}

/* ---- alertas (título + qué hacer) ---- */
.alert{display:flex;gap:12px;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);border-left-width:3px;background:var(--surface-alt);font-size:14px}
.alert .ico{margin-top:2px;flex:none}
.alert b{display:block;font-weight:600;margin-bottom:2px}
.alert p{color:var(--muted);white-space:pre-line}
.alert.ok{border-left-color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--surface))}.alert.ok .ico{color:var(--ok)}
.alert.warn{border-left-color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,var(--surface))}.alert.warn .ico{color:var(--warn)}
.alert.bad{border-left-color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,var(--surface))}.alert.bad .ico{color:var(--bad)}
.alert.info{border-left-color:var(--info);background:color-mix(in srgb,var(--info) 10%,var(--surface))}.alert.info .ico{color:var(--info)}

/* ---- badges / pills / chips ---- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 9px;border-radius:999px;
  border:1px solid var(--border);color:var(--muted);white-space:nowrap;line-height:1.6}
.badge.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.badge.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.badge.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.badge.info{color:var(--info);border-color:color-mix(in srgb,var(--info) 40%,transparent);background:color-mix(in srgb,var(--info) 10%,transparent)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:4px 11px;border-radius:999px;border:1px solid var(--border);color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:13px;padding:4px 10px;border-radius:999px;background:var(--surface-alt);border:1px solid var(--border);color:var(--text)}

/* ---- KPIs ---- */
.kpis{display:flex;gap:var(--s3);flex-wrap:wrap}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;min-width:130px;flex:1}
.kpi .n{font-family:var(--font-display);font-size:28px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.kpi .l{color:var(--muted);font-size:12px;margin-top:4px}

/* ---- tabla ---- */
table{width:100%;border-collapse:collapse;font-size:14px}
td,th{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
tr:last-child td{border-bottom:0}
.card>table{margin:calc(var(--s5) * -1);width:calc(100% + var(--s5) * 2)}
.card>table td:first-child,.card>table th:first-child{padding-left:var(--s5)}

/* ---- tabs + toolbar (reportes) ---- */
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{background:var(--surface-alt);border:1px solid var(--border);color:var(--muted);font:inherit;font-size:13px;font-weight:500;padding:5px 12px;border-radius:20px;cursor:pointer;transition:all .15s}
.tab:hover{color:var(--text);border-color:var(--muted)}
.tab.active{background:var(--primary);color:var(--on-primary);border-color:var(--primary);font-weight:600}
.tab .cnt{opacity:.7}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 24px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);z-index:var(--z-sticky)}
.tabpanel[hidden]{display:none}

/* ---- resultados (filas con acción) ---- */
.results{display:flex;flex-direction:column}
.result{display:flex;align-items:center;gap:var(--s3);padding:10px 0;border-bottom:1px solid var(--border)}
.result:last-child{border-bottom:0}
.result .ico{color:var(--muted)}
.result b{font-weight:600}
.result .meta{font-size:12.5px;color:var(--muted)}
.result .actions{margin-left:auto;display:flex;gap:6px}

/* ---- vacío ---- */
.empty{text-align:center;padding:36px 20px;color:var(--muted);font-size:14px}
.empty .ico{width:28px;height:28px;display:block;margin:0 auto 10px;opacity:.6}

/* ---- toast ---- */
.toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;z-index:var(--z-toast);pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;
  font-size:14px;box-shadow:var(--shadow-2);animation:toast-in .25s ease both;max-width:380px;pointer-events:auto}
.toast .ico{flex:none}
.toast.ok .ico{color:var(--ok)}.toast.bad .ico{color:var(--bad)}.toast.warn .ico{color:var(--warn)}.toast.info .ico{color:var(--info)}
.toast.out{animation:toast-out .25s ease both}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(8px)}}

/* ---- dialog nativo ---- */
dialog.modal{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:var(--s5);
  width:min(680px,calc(100vw - 48px));box-shadow:var(--shadow-2);z-index:var(--z-dialog)}
dialog.modal::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
dialog.modal h2{margin-bottom:var(--s3)}
dialog.modal .field textarea{min-height:300px;font-family:var(--font-mono);font-size:13px}
.modal-actions{display:flex;justify-content:flex-end;gap:var(--s2);margin-top:var(--s4)}

/* ---- chat (enhanzu Escritorio): burbujas + composer. El runlog/details.log de un turno viven
   DENTRO de la burbuja pendiente y se cierran con .done al terminar (ver kit.log). ---- */
.chat-wrap{display:flex;flex-direction:column;height:calc(100vh - 215px);min-height:380px}
.chat{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s2) 2px}
.msg{max-width:85%;padding:11px 15px;border-radius:var(--radius);border:1px solid var(--border);font-size:15px;line-height:1.55;overflow-wrap:anywhere;user-select:text;cursor:auto}
.msg.user{align-self:flex-end;background:var(--surface-alt);border-bottom-right-radius:6px;white-space:pre-wrap}
.msg.bot{align-self:flex-start;background:var(--surface);border-bottom-left-radius:6px}
.msg code{background:var(--surface-alt);border-radius:6px;padding:1.5px 6px;font-family:var(--font-mono);font-size:.9em}
.msg .li{display:block;padding-left:16px;position:relative}
.msg .li::before{content:"\2022";position:absolute;left:2px;color:var(--muted)}
.msg a{color:var(--info)}
.msg .runlog{margin:6px 0 10px;font-size:13.5px}
.msg details.log{margin-bottom:10px}
.msg .chips{margin-top:8px}
button.chip{font:inherit;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
button.chip:hover{border-color:var(--primary);color:var(--primary)}
.composer{display:flex;gap:var(--s2);align-items:flex-end;padding-top:var(--s3);border-top:1px solid var(--border)}
.composer textarea{flex:1;min-height:44px;max-height:160px;resize:none;line-height:1.5}

/* ---- movimiento ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}