/* === pha-destilador · hoja de estilos unica =========================== */
/* Tokens ------------------------------------------------------------- */
:root{
  --fondo:#fbfbfa; --texto:#1c1c1a; --azul:#3C83F6;
  --borde:#e4e4e0; --panel:#ffffff; --tenue:#6b6b66; --alerta:#b4441f;
  --azul-suave:#e8f1fe; --alerta-suave:#fbece6;
}

/* Base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fondo); color:var(--texto);
  font-family:-apple-system,"Segoe UI",system-ui,sans-serif;
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0 0 .5rem; line-height:1.25; font-weight:600}
h1{font-size:1.5rem} h2{font-size:1.15rem} h3{font-size:1rem}
a{color:var(--azul)} a:hover{text-decoration:underline}
hr{border:0; border-top:1px solid var(--borde); margin:1rem 0}

/* Layout ------------------------------------------------------------- */
.contenedor{max-width:1180px; margin:0 auto; padding:1.25rem}
.grilla{display:grid; grid-template-columns:1fr 320px; gap:1rem}
.comparacion{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.panel{
  background:var(--panel); border:1px solid var(--borde);
  border-radius:8px; padding:1rem;
  position:sticky; top:1rem;
}
.pie-fijo{
  margin-top:1.25rem; padding-top:.75rem;
  border-top:1px solid var(--borde); color:var(--tenue);
  font-size:.85rem;
}

/* Tablas ------------------------------------------------------------- */
.tabla{width:100%; border-collapse:collapse; font-size:.92rem}
.tabla th,.tabla td{
  padding:.5rem .65rem; border-bottom:1px solid var(--borde);
  text-align:left; vertical-align:top;
}
.tabla th{font-weight:600; color:var(--tenue); background:transparent}
.tabla tbody tr:hover{background:var(--azul-suave)}
.tabla .fila-excluida td{opacity:.55; text-decoration:line-through}

/* Botones ------------------------------------------------------------ */
.btn,.btn-primario{
  display:inline-block; padding:.45rem .9rem; border-radius:6px;
  font:inherit; line-height:1.2; cursor:pointer;
  border:1px solid var(--borde); background:var(--panel); color:var(--texto);
  text-decoration:none;
}
.btn:hover{background:#f4f4f0}
.btn-primario{
  background:var(--azul); border-color:var(--azul); color:#fff;
}
.btn-primario:hover{background:#2f6ed8; border-color:#2f6ed8}
.btn:focus-visible,.btn-primario:focus-visible,
a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--azul); outline-offset:2px;
}

/* Chips, avisos, ayudas --------------------------------------------- */
.chip{
  display:inline-block; padding:.15rem .55rem; border-radius:999px;
  border:1px solid var(--borde); background:var(--panel);
  font-size:.78rem; color:var(--tenue);
}
.aviso{
  border-left:4px solid var(--alerta);
  background:var(--alerta-suave);
  padding:.65rem .9rem; border-radius:4px;
  font-size:.9rem;
}
.ayuda{display:block; margin-top:.25rem; font-size:.82rem; color:var(--tenue)}
.contador{font-size:1.8rem; font-weight:600; line-height:1}

/* Barra de progreso -------------------------------------------------- */
.barra{
  width:100%; height:10px; background:#ececea;
  border-radius:999px; overflow:hidden; border:1px solid var(--borde);
}
.barra-relleno{
  height:100%; width:0%; background:var(--azul);
  transition:width .4s ease;
}

/* Mensajes de conversacion ------------------------------------------- */
.msg-cliente,.msg-negocio{
  max-width:75%; padding:.5rem .7rem; border-radius:8px;
  border:1px solid var(--borde); margin:.25rem 0;
  white-space:pre-wrap; word-break:break-word;
}
.msg-cliente{background:var(--panel); margin-right:auto}
.msg-negocio{background:var(--azul-suave); margin-left:auto; border-color:#d4e2fb}

/* Bloques de comparacion --------------------------------------------- */
.col-original,.col-corpus pre{
  background:var(--panel); border:1px solid var(--borde);
  border-radius:6px; padding:.65rem;
  white-space:pre-wrap; word-break:break-word;
  overflow-x:auto; max-height:480px; font-size:.88rem;
}

/* Formularios -------------------------------------------------------- */
label{display:block; margin:.5rem 0 .15rem; font-weight:500}
input[type=text],input[type=number],input[type=tel],select,textarea{
  width:100%; padding:.45rem .6rem;
  border:1px solid var(--borde); border-radius:6px;
  background:var(--panel); color:var(--texto); font:inherit;
}
textarea{min-height:80px; resize:vertical}

/* Zona de arrastre --------------------------------------------------- */
.zona-arrastre{
  border:2px dashed var(--borde); border-radius:8px;
  padding:2rem; text-align:center;
  background:var(--panel); color:var(--tenue);
}

/* Responsive --------------------------------------------------------- */
@media (max-width:900px){
  .grilla{grid-template-columns:1fr}
  .comparacion{grid-template-columns:1fr}
  .panel{position:static}
}

/* --- exportador (modo cliente) --- */
.angosto{max-width:640px; margin:0 auto}
.fila-controles{display:flex; gap:1rem; align-items:center; margin:1rem 0}
.fila-controles input[type=search]{flex:1; padding:.5rem .7rem; border:1px solid var(--borde,#ccc); border-radius:6px}
.contador{font-weight:600; white-space:nowrap}
.primaria{background:#3C83F6; color:#fff; border:0; padding:.55rem 1.1rem; border-radius:6px; cursor:pointer}
.primaria:disabled{opacity:.45; cursor:default}
a.boton{display:inline-block; text-decoration:none; margin:.75rem 0}
.tabla-chats{width:100%; border-collapse:collapse; margin-top:.5rem}
.tabla-chats th{text-align:left; font-size:.82rem; color:var(--tenue,#666); padding:.4rem .5rem}
.tabla-chats td{padding:.45rem .5rem; border-top:1px solid #eee}
.adelanto{color:var(--tenue,#666); font-size:.85rem; max-width:26rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.error{color:#b3261e}
.secundaria{background:#fff; color:#b3261e; border:1px solid #b3261e; padding:.5rem 1rem; border-radius:6px; cursor:pointer; margin-top:.75rem}
.aviso{background:#fff7e6; border:1px solid #f0c36d; padding:.6rem .8rem; border-radius:6px; margin:.5rem 0}