/* ── BITÁCORA ──
   [v2026.10.31-1] corrector.css
   2026-10-31 | + .ort-btn: el botón «Aa» del cuadro de escribir (#ortBtn, conversaciones.html [v2026.10.31-1]), 30 px
     redondo, verde salvia (--ort-btn-*) con el verde del interruptor; .ort-btn-trabajando (lila, con el spinner) y
     .ort-btn-pausa (gris: detenido o en pausa, el globo dice por qué). Sin `disabled` para que el globo se vea
     (aria-disabled). Preview aprobado por Alberto el 31-10.
   [v2026.10.27-1] corrector.css
   2026-10-27 | − #ortToggleBtn (la pastilla «Aa» de la cabecera) y sus colores --ort-fondo / --ort-riel: el interruptor del
     corrector pasó a IA · Toggles (conv-ia-toggles.js [v2026.10.27-2]; su verde, en temas-ia.css). Quedan el espejo y el aviso.
   [v2026.10.22-1] corrector.css
   2026-10-22 | + .ort-chip: en el celular el aviso del corrector es un chip dentro del cuadro
     de escribir (conv-corrector.js [v2026.10.22-2]; preview aprobado por Alberto el 22-10):
     compacto, sin el rótulo «palabras corregidas», con el Deshacer tocable. Vacío no ocupa nada.
   [v2026.10.21-1] corrector.css
   2026-10-21 | ARCHIVO NUEVO: el corrector ortográfico del cuadro de escritura
     (conv-corrector.js [v2026.10.21-1]; previews aprobados por Alberto el 21-10, tinte
     VERDE SALVIA elegido por él). Tres piezas:
     · #ortToggleBtn: la pastilla «Aa» de la cabecera, calcada del botón del robot
       (misma píldora, riel de 24×14 y punto de 10) pero en verde para que no se
       confundan. Apagada queda gris, como el robot queda rojo.
     · .ort-espejo: la capa detrás del textarea que resalta en ámbar lo que la
       corrección cambió; replica EXACTOS la letra y el interlineado del textarea
       (text-sm/leading-5, sin padding) o las marcas quedarían corridas.
     · #ortAviso: la caja sobre el composer («corrigiendo…», «✎ 2 palabras corregidas»
       con su Deshacer, «✓ sin faltas»). Va ARRIBA porque abajo la tapa el teclado del
       celular, y el Deshacer mide 32px de alto para el dedo.
*/

/* ── Los colores del corrector, en un solo lugar ── */
:root {
  --ort-tinta:  #3f8a5f;
  --ort-btn-fondo: #eef8f1;        /* [31-10-2026] el botón «Aa» del cuadro, verde salvia como el interruptor */
  --ort-btn-borde: #b9dcc7;
  --ort-btn-fondo-hover: #dff1e6;
  --ort-btn-borde-hover: #8fc9a6;
  --ort-marca:  #fde68a;   /* el resaltado de lo cambiado (ámbar suave) */
  --ort-marca-borde: #fcd34d;
}

/* ── El campo: el textarea con su espejo detrás ── */
.ort-campo { position: relative; min-width: 0; }
.ort-campo textarea { position: relative; z-index: 2; }
.ort-espejo {
  position: absolute; inset: 0; z-index: 1;
  color: transparent; pointer-events: none; overflow: hidden;
  /* Exactos los del textarea (text-sm leading-5, sin padding) o las marcas se corren. */
  font-size: 14px; line-height: 20px; padding: 0; margin: 0; border: 0;
  white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word;
}
.ort-espejo mark {
  background: var(--ort-marca); color: transparent; border-radius: 3px;
  box-shadow: 0 0 0 1px var(--ort-marca-borde);
  transition: background .5s, box-shadow .5s;
}
.ort-espejo.ort-apagando mark { background: transparent; box-shadow: none; }

/* ── [31-10-2026] El botón «Aa», entre el micrófono y Enviar ── */
.ort-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 9999px;
  border: 1px solid var(--ort-btn-borde); background: var(--ort-btn-fondo); color: var(--ort-tinta);
  font: 700 12px 'DM Sans', sans-serif; letter-spacing: -.02em; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ort-btn:hover:not([aria-disabled="true"]) { background: var(--ort-btn-fondo-hover); border-color: var(--ort-btn-borde-hover); }
.ort-btn:active:not([aria-disabled="true"]) { transform: scale(.95); }
.ort-btn[hidden] { display: none; }
.ort-btn.ort-btn-trabajando { color: #7c3aed; background: #f5f3ff; border-color: #ddd6fe; cursor: default; }
.ort-btn.ort-btn-trabajando i { font-size: 12px; }
.ort-btn.ort-btn-pausa { color: #9ca3af; background: #f3f4f6; border-color: #e5e7eb; cursor: default; }

/* ── El aviso, arriba del composer ── */
#ortAviso:not(:empty) { margin-bottom: 6px; }
.ort-caja {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px 5px 10px; border-radius: 11px; font-size: 12px;
  animation: ort-sube .16s ease-out;
}
@keyframes ort-sube { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.ort-trabajando { background: #faf5ff; color: #9333ea; }
.ort-listo { background: #fffbeb; border: 1px solid #fde68a; color: #b45309; }
.ort-limpio { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.ort-caja .ort-texto { flex: 1; min-width: 0; }
.ort-caja b { font-weight: 600; }
.ort-deshacer {
  border: 1px solid currentColor; background: #fff; color: inherit;
  font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 0 13px; height: 32px; border-radius: 9999px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center;
}
.ort-deshacer:active { transform: scale(.96); }
.ort-puntos::after { content: ''; animation: ort-pts 1.1s steps(4, end) infinite; }
@keyframes ort-pts { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

/* ── [22-10-2026] El chip dentro del cuadro (celular) ── */
.ort-chip { flex-shrink: 0; min-width: 0; }
.ort-chip:empty { display: none; }
.ort-chip .ort-caja { padding: 3px 8px 3px 9px; border-radius: 9999px; font-size: 11.5px; height: 28px; white-space: nowrap; gap: 6px; }
.ort-chip .ort-rotulo { display: none; }
.ort-chip .ort-deshacer { height: 22px; padding: 0 9px; font-size: 11px; }
.ort-chip .ort-limpio { padding: 3px 8px; }