/* ============================================================
   ASISTENTE IA · drawer de turnos + pestaña dentro de Branding
   El botón de la topbar y el panel los inyecta ia.js, así que el diff sobre index.html
   queda en el <link> y el <script src>. Mismo criterio que feedback.css y panel-crear.css.

   Solo tokens de /tokens.css — cero hex hardcodeado. La excepción son los swatches de
   color de la tabla de contraste y del diff, que pintan el hex del perfil: ese "hex" lo
   escribe JS desde el dato, no está acá.
   `.on` para "seleccionado", nunca `.sel` (design/ARQUITECTURA-PANTALLA.md).
   ============================================================ */

/* ---------- botón de la topbar ---------- */

.ia-toggle .ia-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--ambar); margin-right:7px; vertical-align:middle;
}

/* ---------- drawer ---------- */

:root{ --ia-ancho: 460px; }

.ia-panel{
  position:fixed; top:0; right:0; height:100vh; width:min(var(--ia-ancho), 100vw);
  background:var(--s1); border-left:1px solid var(--line);
  box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .22s ease;
  z-index:var(--z-drawer);
}
.ia-panel.abierto{ transform:translateX(0); }
@media (prefers-reduced-motion: reduce){
  .ia-panel{ transition:none; }
}
@media (max-width: 560px){
  .ia-panel{ width:100vw; }
}

.ia-head{
  display:flex; align-items:center; gap:10px;
  padding:14px var(--gut); border-bottom:1px solid var(--line);
}
.ia-head h2{ margin:0; font-size:14px; font-weight:600; color:var(--ink); }
.ia-head .ia-ctx{
  font:400 11px/1.3 var(--f-mono); color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.ia-head .ia-ctx[hidden]{ display:none; }
.ia-head .ia-cerrar{ margin-left:auto; padding:4px 9px; flex:none; }

/* ---------- historial de turnos ---------- */

.ia-hilo{
  flex:1; overflow-y:auto; padding:var(--gut);
  display:flex; flex-direction:column; gap:10px;
}

.ia-msg{
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:9px 12px; font-size:12.5px; line-height:1.5;
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.ia-yo{ background:var(--s3); color:var(--ink); align-self:flex-end; max-width:88%; }
.ia-ia{ background:var(--s2); color:var(--ink-2); }
.ia-sistema{ background:var(--s2); color:var(--ink-2); }
.ia-pensando{ color:var(--ink-3); font-style:italic; }

/* El 409 no es una falla: es "esperá tu turno" o "llegaste al tope de la hora". Ámbar y
   no rojo, para que no se lea como algo que se rompió. */
.ia-limite{ border-color:var(--ambar); background:var(--ambar-dim); color:var(--ink); }
.ia-limite-detalle{
  margin-top:6px; font:400 11px/1.4 var(--f-mono); color:var(--ink-2);
}
.ia-err{ border-color:var(--rojo); color:var(--ink); }

.ia-conectar{ margin-top:9px; }

/* ---------- avisos del validador ---------- */

.ia-avisos{
  border:1px solid var(--line); border-left:3px solid var(--ambar);
  border-radius:var(--r-sm); background:var(--s2); padding:9px 12px;
}
.ia-avisos ul{ margin:4px 0 0; padding-left:16px; }
.ia-avisos li{
  font-size:11.5px; line-height:1.45; color:var(--ink-2); overflow-wrap:anywhere;
}

/* ---------- panel de propuesta ---------- */

/* Nada de acá adentro se aplica solo: cada fila tiene su botón, y la que pisaría algo
   escrito a mano muestra el diff antes de ofrecer "Reemplazar" (ver ia.js). */
.ia-propuesta{
  border:1px solid var(--turquesa-line); border-radius:var(--r-md);
  background:var(--s2); padding:10px 12px;
  display:flex; flex-direction:column; gap:8px;
}
.ia-prop-fila{
  display:grid; grid-template-columns:1fr auto; gap:5px 10px; align-items:center;
  border-top:1px solid var(--line-soft); padding-top:8px;
}
.ia-prop-fila:first-of-type{ border-top:0; padding-top:0; }
.ia-prop-campo{
  grid-column:1 / -1;
  font:500 10px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-3);
}
.ia-prop-diff{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:12px; line-height:1.4; color:var(--ink); min-width:0; overflow-wrap:anywhere;
}
.ia-prop-diff .ia-antes{ color:var(--ink-3); text-decoration:line-through; }
.ia-prop-diff .ia-flecha{ color:var(--ink-3); }
.ia-prop-diff .ia-antes,
.ia-prop-diff .ia-despues{ display:inline-flex; align-items:center; gap:5px; }
.ia-prop-btn{ flex:none; font-size:11.5px; padding:4px 10px; }
.ia-prop-nota{
  grid-column:1 / -1; font-size:11px; line-height:1.4; color:var(--ambar-ink);
}
.ia-prop-error{
  grid-column:1 / -1; font-size:11.5px; line-height:1.4; color:var(--rojo-ink);
}
.ia-prop-fila.ia-aplicada{ opacity:.6; }

.ia-sw{
  display:inline-block; width:12px; height:12px; flex:none;
  border:1px solid var(--line); border-radius:var(--r-xs);
}

/* ---------- tabla de contraste ---------- */

.ia-contraste{
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--s2); padding:10px 12px; overflow-x:auto;
}
.ia-tabla{ width:100%; border-collapse:collapse; font-size:11.5px; }
.ia-tabla th{
  text-align:left; font:500 10px/1 var(--f-mono); text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-3); padding:0 8px 5px 0; white-space:nowrap;
}
.ia-tabla td{
  padding:5px 8px 5px 0; border-top:1px solid var(--line-soft);
  color:var(--ink-2); line-height:1.35; vertical-align:top;
}
.ia-tabla .ia-par{ display:inline-flex; align-items:center; gap:4px; font-family:var(--f-mono); }
.ia-tabla .ia-sobre{ color:var(--ink-3); }
.ia-tabla .ia-par-nombres{ font-size:10px; color:var(--ink-3); margin-top:2px; }
.ia-tabla .ia-ratio{ font-family:var(--f-mono); color:var(--ink); white-space:nowrap; }
.ia-tabla .ia-nivel{ white-space:nowrap; }
.ia-tabla tr.ia-n-aaa .ia-nivel{ color:var(--turquesa-ink); }
.ia-tabla tr.ia-n-aa .ia-nivel{ color:var(--ink-2); }
.ia-tabla tr.ia-n-mal .ia-nivel{ color:var(--rojo-ink); }
.ia-tabla tr.ia-n-mal .ia-ratio{ color:var(--rojo-ink); }

/* ---------- pie del drawer: modo, formulario y costo ---------- */

.ia-pie{
  border-top:1px solid var(--line); background:var(--s1);
  padding:12px var(--gut); display:flex; flex-direction:column; gap:8px;
}
.ia-modos{ display:flex; gap:6px; flex-wrap:wrap; }
.ia-modo{
  font:500 11px/1 var(--f-mono); padding:6px 11px; cursor:pointer;
  background:var(--s2); color:var(--ink-2);
  border:1px solid var(--line); border-radius:20px;
}
.ia-modo:hover{ border-color:var(--turquesa-line); color:var(--ink); }
.ia-modo.on{
  background:var(--turquesa-dim); border-color:var(--turquesa-line); color:var(--turquesa-ink);
}
.ia-ayuda-modo{ font-size:11px; line-height:1.4; color:var(--ink-3); }
.ia-pie .field{ margin-bottom:0; }
.ia-pie textarea{ width:100%; resize:vertical; }

/* El costo se dice ANTES de apretar: el cupo del plan es real y compartido. */
.ia-costo{ font-size:11px; line-height:1.4; color:var(--ambar-ink); }
.ia-enviar{ display:flex; justify-content:flex-end; }
.ia-enviar button[disabled]{ opacity:.55; cursor:default; }

/* ---------- bloque de cuenta sin conectar ---------- */

.ia-cuenta{
  margin:0 var(--gut) 0; padding:11px 12px;
  border:1px solid var(--ambar); border-radius:var(--r-sm);
  background:var(--ambar-dim);
}
.ia-cuenta p{ margin:0; font-size:12px; line-height:1.5; color:var(--ink); }
.ia-cuenta[hidden]{ display:none; }

/* ---------- pestaña "Asistente" dentro de Branding ---------- */

.ia-lead{
  margin:0 0 12px; font-size:12.5px; line-height:1.5; color:var(--ink-2); max-width:70ch;
}
#br-panel-asistente .ia-cuenta{ margin:0 0 12px; }
.ia-tab-acciones{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 14px; }
#br-panel-asistente .field{ max-width:70ch; }
#br-panel-asistente .ia-contraste{ max-width:70ch; }

.ia-sec{
  margin:14px 0 6px; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3);
}
.ia-propuesta > .ia-sec,
.ia-contraste > .ia-sec,
.ia-avisos > .ia-sec{ margin:0 0 6px; }

.ia-nota{
  font-size:11.5px; line-height:1.45; color:var(--ink-3); max-width:70ch;
  margin-bottom:8px;
}