/* TG Documentator — UI web local. Componentes sobre brand.css (tokens de marca). */
*{box-sizing:border-box;}
body{font-family:var(--font-ui); color:var(--text-body); background:var(--surface-tint);
  margin:0; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
.wrap{max-width:960px; margin:0 auto; padding:var(--space-6) var(--space-5) var(--space-8);}

/* Cabecera */
.app-header{display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-6);}
.brand{display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;}
.logo{height:22px; width:auto;}
.wordmark{font-family:var(--font-tech); font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; font-size:.7rem; color:var(--tg-turquoise-700);}
.tg-rule{width:56px; height:3px; background:var(--accent); border:0; border-radius:var(--radius-pill); margin:0;}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* Guía de pasos */
.stepper{display:flex; gap:var(--space-5); flex-wrap:wrap; margin:0 0 var(--space-5); padding:0;
  list-style:none; font-family:var(--font-display); font-size:.85rem; color:var(--text-muted);}
.step{display:flex; align-items:center; gap:.45rem;}
.step b{display:inline-grid; place-items:center; width:1.5rem; height:1.5rem; border-radius:var(--radius-pill);
  background:var(--tg-turquoise-050); color:var(--tg-turquoise-700); font-weight:700; font-size:.78rem;}

/* Tarjetas */
.card{background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  padding:var(--space-5); box-shadow:var(--shadow-sm); margin-bottom:var(--space-5);}

/* Ingesta */
.dropzone{display:block; border:2px dashed var(--accent); border-radius:var(--radius-lg);
  padding:var(--space-8) var(--space-5); text-align:center; color:var(--text-muted); cursor:pointer;
  background:var(--tg-turquoise-050); transition:opacity .15s, background .15s;}
.dropzone:hover{background:#DAFBF9;}
.dz-title{display:block; font-family:var(--font-display); font-size:1.15rem; color:var(--text-heading);}
.dz-hint{font-size:.85rem;}

/* Estado vacío */
.empty{text-align:center; color:var(--text-muted); padding:var(--space-6) var(--space-4);}
.empty-title{font-family:var(--font-display); font-size:1.15rem; color:var(--text-heading);}

/* Resumen de coste */
.cost-summary{display:flex; gap:var(--space-6); flex-wrap:wrap; align-items:flex-start;}
.amount{font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:var(--text-heading);}
.amount.real{color:var(--accent-strong, #00877e);}
.muted{color:var(--text-muted); font-size:.85rem;}
.summary-link{margin-top:var(--space-3);}
.callout{margin-top:var(--space-3); padding:var(--space-3) var(--space-4); background:var(--warn-bg);
  border-left:3px solid var(--warn); border-radius:var(--radius-sm); color:#7a4a00; font-size:.85rem;}

/* Tabla */
table{width:100%; border-collapse:collapse; margin-top:var(--space-2);}
th,td{text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--tg-grey-100); font-size:.9rem;}
th{font-family:var(--font-display); font-weight:600; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:.04em; font-size:.72rem;}
tr.done{background:var(--tg-turquoise-050);}

/* Badges */
.badge{display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .55rem; border-radius:var(--radius-pill);
  font-size:.75rem; font-weight:600; white-space:nowrap;}
.badge.queued{background:var(--tg-grey-100); color:var(--tg-grey-700);}
.badge.busy{background:var(--tg-turquoise-050); color:var(--tg-turquoise-700);}
.badge.done{background:#DAF5F0; color:var(--ok);}
.badge.error{background:var(--err-bg); color:var(--err);}
.spin{width:.7rem; height:.7rem; border:2px solid currentColor; border-top-color:transparent;
  border-radius:50%; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.duration{margin-left:.15rem; color:var(--text-muted); font-size:.8rem; font-variant-numeric:tabular-nums;}
/* Fidelidad de contenido (0-100): banda por color de marca */
.fidelity{display:inline-block; padding:.05rem .4rem; border-radius:var(--radius-pill);
  font-size:.75rem; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums;}
.fidelity-alta{background:#DAF5F0; color:var(--ok);}
.fidelity-media{background:var(--warn-bg); color:var(--warn);}
.fidelity-baja{background:var(--err-bg); color:var(--err);}

/* Gate (panel IA) */
fieldset{border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:var(--space-4); margin:0;}
legend{font-family:var(--font-display); font-weight:700; padding:0 .4rem; color:var(--text-heading);}
.controls{display:flex; gap:var(--space-4); flex-wrap:wrap;}
.gate label{display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; color:var(--text-muted);}
.gate select,.gate input[type=text],.gate textarea{padding:.45rem .5rem; border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); font:inherit; color:var(--text-body);}
.prompt-extra{margin-top:var(--space-4);}
.gate textarea{width:100%; min-height:4.5rem; resize:vertical;}

/* Salidas por defecto (gate) */
.out-defaults{margin-bottom:var(--space-4);}
.out-grid{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; margin-top:.15rem;}
.out-fixed{font-size:.85rem; color:var(--text-muted);}
.out-fixed em{font-style:normal; opacity:.75;}
.out-note{margin:.55rem 0 0; font-size:.78rem; color:var(--text-muted);}

/* Chips-toggle (por-defecto del gate + filas de la cola).
   La primera regla se escopa bajo .out-defaults para ganar a `.gate label` en especificidad. */
.out-defaults .out-chip, .chip{display:inline-flex; flex-direction:row; align-items:center; gap:.4rem;
  cursor:pointer; padding:.22rem .6rem; border:1px solid var(--border-subtle); border-radius:var(--radius-pill);
  font-size:.8rem; line-height:1.2; color:var(--text-body); background:var(--surface-card);
  white-space:nowrap; transition:background .12s, border-color .12s, color .12s;}
.out-defaults .out-chip input[type=checkbox], .chip input[type=checkbox]{width:auto; margin:0; flex:none;
  accent-color:var(--accent);}
.out-defaults .out-chip:has(input:checked), .chip:has(input:checked), .chip.on{
  background:var(--tg-turquoise-050); border-color:var(--accent); color:var(--tg-turquoise-700);}
/* Chip bloqueado: salida arrastrada por otra (Guión forzado por la Presentación) */
.out-defaults .out-chip.locked, .chip.locked{cursor:not-allowed; opacity:.72;}
.out-defaults .out-chip.locked input, .chip.locked input{cursor:not-allowed;}
.out-defaults .out-chip.locked span::after, .chip.locked span::after{content:" 🔒"; font-size:.7em; opacity:.85;}

/* Columna "Salidas" de la cola */
td.salidas{white-space:nowrap;}
.salidas-chips{display:flex; flex-wrap:wrap; gap:.3rem;}
.salidas-static{font-size:.8rem; color:var(--text-muted);}

.actions{display:flex; gap:var(--space-4); align-items:center; margin-top:var(--space-4);}
button[disabled],button:disabled{opacity:.55; cursor:not-allowed;}

/* Botones / enlaces */
button,.btn{background:var(--accent); color:var(--tg-night); border:0; border-radius:var(--radius-md);
  padding:.6rem 1.1rem; font-family:var(--font-display); font-weight:700; font-size:.95rem; cursor:pointer;
  transition:filter .15s;}
button:hover,.btn:hover{filter:brightness(.94);}
.btn-secondary{background:transparent; color:var(--tg-turquoise-700); text-decoration:underline; padding:.6rem .2rem;}
a{color:var(--tg-turquoise-700); text-decoration:none;}
a:hover{text-decoration:underline;}

/* Mensajes */
.warn{color:var(--warn);}
.err{color:var(--err);}

.banner-blocked {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 4px solid var(--tg-night-900, #02141a);
  background: #fff4f4;
  color: #7a1f1f;
  font-weight: 600;
}