/* Modern suggestions inspector — white, legible, category-organised.
   Scoped to .sg-panel (set alongside .unified-suggestion-panel on the root). */
.sg-panel {
  --sg-ink:#1a2030; --sg-ink-2:#3d4759; --sg-muted:#6b7688; --sg-faint:#97a1b2;
  --sg-line:#e4e8f0; --sg-line-2:#eef1f6; --sg-surface:#ffffff; --sg-surface-2:#f5f7fb;
  /* Acento alineado con el azul de marca arText */
  --sg-primary:#006fc0; --sg-primary-ink:#005596; --sg-primary-wash:#e9f3fc;
  /* Niveles de la lengua. Los valores canónicos viven en `analytics.css`
     (`--color-*`); lo de aquí es solo la reserva por si esta hoja se carga
     sola, y debe repetir los mismos colores. */
  --c-discourse:var(--color-discourse,#8b5cf6);
  --c-lexical:var(--color-lexical,#06b6d4);
  --c-morphosyntax:var(--color-morphosyntax,#f59e0b);
  --c-general:var(--color-general,#64748b);
  /* Verde de «sin recomendaciones»: es un estado, no un nivel. */
  --sg-ok:var(--accent-emerald,#10b981);
  --hit-first-person-singular:#0f9f86;
  --hit-first-person-plural:#2878c8;
  /* Holgura con la que una tarjeta traída a la vista se separa del filo: ni
     tapada ni pegada. */
  --sg-air:10px;
  display:flex; flex-direction:column; min-height:0; height:100%;
  container-type:inline-size;
  color:var(--sg-ink); background:var(--sg-surface);
  font-family:var(--font-body,var(--font-heading,"Inter",system-ui,sans-serif));
}

.sg-panel button,
.sg-panel summary,
.sg-panel input,
.sg-panel select,
.sg-panel textarea {
  font-family: inherit;
}

/* icon buttons shared */
.sg-panel .sg-iconbtn { display:grid; place-items:center; width:32px; height:32px; border:0; background:transparent; border-radius:9px; color:var(--sg-muted); text-decoration:none; cursor:pointer; }
.sg-panel .sg-iconbtn:hover { background:var(--sg-surface-2); color:var(--sg-ink); }
.sg-panel .sg-iconbtn svg { width:16px; height:16px; }

/* ---- fila de control + chips ----
   Bloque pegajoso: al desplazar la lista, los chips se quedan arriba.

   La fila de control (`.sg-controls`) es SOLO del probador de la API: ahí lleva
   el título, la navegación y el cierre. El carril del editor la perdió el 08/09
   —ver `renderControls` en suggestion_panel.js—, así que ahí la banda pegajosa
   son los chips y nada más. */
.sg-panel .sg-sticky { position:sticky; top:0; z-index:3; flex:0 0 auto; background:var(--sg-surface); }
.sg-panel .sg-controls { display:flex; flex-wrap:nowrap; align-items:center; gap:8px; min-height:38px; padding:4px 10px 4px 12px; background:color-mix(in srgb, var(--sg-primary) 5%, var(--sg-surface)); border-bottom:1px solid var(--sg-line); }
.sg-panel .sg-controls-title { flex:1 1 auto; min-width:0; margin:0; font-size:13.5px; font-weight:700; letter-spacing:-.01em; color:var(--sg-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sg-panel .sg-acts { display:flex; align-items:center; gap:2px; margin-left:auto; flex:none; }
.sg-panel .sg-nav { display:flex; align-items:center; gap:2px; color:var(--sg-faint); font-size:12px; font-variant-numeric:tabular-nums; }

/* ---- filter chips ----
   Una sola fila desplazable con el dedo o con la rueda; la barra de
   desplazamiento se oculta y un desvanecido a la derecha insinúa que queda
   fila por recorrer (clase `has-more`, que pone el panel al desplazarse). */
.sg-panel .sg-chips { display:flex; flex-wrap:nowrap; gap:5px; padding:5px 12px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none; border-bottom:1px solid var(--sg-line-2); }
.sg-panel .sg-chips::-webkit-scrollbar { display:none; }
.sg-panel .sg-chips.has-more { mask-image:linear-gradient(to right, #000 calc(100% - 26px), transparent); -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 26px), transparent); }
.sg-panel .sg-chip { display:flex; align-items:center; gap:6px; flex:0 0 auto; padding:4px 10px; white-space:nowrap; background:var(--sg-surface); border:1px solid color-mix(in srgb, var(--chip-c,var(--sg-line)) 40%, var(--sg-line)); border-radius:999px; color:var(--sg-ink-2); font-size:12px; font-weight:550; cursor:pointer; }
.sg-panel .sg-chip:hover { background:color-mix(in srgb, var(--chip-c,var(--sg-ink)) 8%, var(--sg-surface)); }
.sg-panel .sg-chip .n { color:var(--chip-c,var(--sg-faint)); font-weight:700; font-variant-numeric:tabular-nums; }
.sg-panel .sg-chip.on { background:color-mix(in srgb, var(--chip-c,var(--sg-ink)) 14%, var(--sg-surface)); border-color:var(--chip-c,var(--sg-ink)); color:var(--sg-ink); font-weight:650; box-shadow:inset 0 0 0 1px var(--chip-c,var(--sg-ink)); }
/* «Todas» no es una categoría: conserva el gris neutro. */
.sg-panel .sg-chip-all { --chip-c:var(--sg-ink); border-color:var(--sg-line); }
.sg-panel .sg-chip.cat-discourse { --chip-c:var(--c-discourse); }
.sg-panel .sg-chip.cat-lexical { --chip-c:var(--c-lexical); }
.sg-panel .sg-chip.cat-morphosyntax { --chip-c:var(--c-morphosyntax); }
.sg-panel .sg-chip.cat-general { --chip-c:var(--c-general); }

/* category dots */
.sg-panel .dot-discourse { background:var(--c-discourse); }
.sg-panel .dot-lexical { background:var(--c-lexical); }
.sg-panel .dot-morphosyntax { background:var(--c-morphosyntax); }
.sg-panel .dot-general { background:var(--c-general); }

/* ---- list ---- */
.sg-panel .sg-list { flex:1; min-height:0; overflow:auto; padding:0 0 22px; scroll-behavior:smooth; }

/* Dónde termina lo que tapa por arriba. Es el destino de todo desplazamiento
   que traiga a la vista una tarjeta o un punto: el que hace el propio panel al
   elegir recomendación y el `scrollIntoView` con el que el anfitrión va de una
   marca del texto a su tarjeta. Declararlo aquí, y no en cada uno de esos
   caminos, es lo que hace que ninguno pueda equivocarse por su cuenta.
   Aquí vale solo el aire: el que desplaza es `.sg-list`, y la banda pegajosa
   (fila de control + chips) vive FUERA de esa caja, así que no tapa nada.
   Donde sí desplaza por encima —el carril del editor— se redefine
   `--sg-reveal-top` sumando lo que cada capa aporta: la cabecera del carril
   (`--rail-head-h`) más la banda del panel (`--sg-sticky-h`, que publica
   suggestion_panel.js midiéndola, porque cambia con los chips y con el ancho).
   El navegador resuelve la suma, y el JS la lee ya en píxeles del propio
   `scroll-margin-top` en vez de recalcularla. */
.sg-panel .sg-card,
.sg-panel .sg-point { scroll-margin-top:var(--sg-reveal-top, var(--sg-air)); scroll-margin-bottom:var(--sg-air); }

/* ---- recomendaciones como listado plano ----
   Rediseño «Cinta de marca»: nada de cajas dentro de cajas. Cada
   recomendación es una fila separada por un filo de 1px; la abierta lleva
   un lomo con el color de su categoría y un lavado sutil del mismo tono. */
.sg-panel .sg-card { margin:0; background:var(--sg-surface); border:0; border-top:1px solid var(--sg-line-2); border-radius:0; overflow:hidden; transition:background .12s, box-shadow .12s; --card-c:var(--sg-primary); }
.sg-panel .sg-card.cat-discourse { --card-c:var(--c-discourse); }
.sg-panel .sg-card.cat-lexical { --card-c:var(--c-lexical); }
.sg-panel .sg-card.cat-morphosyntax { --card-c:var(--c-morphosyntax); }
.sg-panel .sg-card.cat-general { --card-c:var(--c-general); }
.sg-panel .sg-card:first-child { margin-top:0; border-top:0; }
.sg-panel .sg-card:last-child { border-bottom:1px solid var(--sg-line-2); }
.sg-panel .sg-card:hover:not(.open) { background:var(--sg-surface-2); }
.sg-panel .sg-card.open { box-shadow:inset 3px 0 0 var(--card-c); background:color-mix(in srgb, var(--card-c) 2.5%, var(--sg-surface)); }
.sg-panel .sg-card-head { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:11px; width:100%; padding:12px 13px; border:0; background:transparent; text-align:left; cursor:pointer; }
.sg-panel .sg-card-head .sg-card-dot { width:8px; height:8px; border-radius:50%; flex:none; }
.sg-panel .sg-card-head .t { min-width:0; font-size:13.5px; font-weight:600; line-height:1.35; color:var(--sg-ink); }
.sg-panel .sg-card-head .chev { width:16px; height:16px; color:var(--sg-faint); transition:transform .16s; }
.sg-panel .sg-card.open .sg-card-head .chev { transform:rotate(180deg); }

.sg-panel .sg-card-body { padding:2px 15px 15px; }
.sg-panel .sg-desc { margin:0 0 12px; font-size:13.5px; line-height:1.6; color:var(--sg-ink-2); }

/* recomendación — cita con filete de marca, sin caja (rediseño plano) */
.sg-panel .sg-rec { display:flex; gap:9px; margin:0 0 14px; padding:2px 0 2px 11px; background:transparent; border:0; border-left:3px solid var(--sg-primary); border-radius:0; }
.sg-panel .sg-rec svg { display:block; flex:0 0 auto; width:16px; height:16px; margin-top:1px; color:var(--sg-primary-ink); }
.sg-panel .sg-rec p { margin:0; font-size:13px; line-height:1.55; color:var(--sg-primary-ink); }
/* ---- ejemplos del texto editorial ----
   Nota al pie de la tarjeta, no un contenedor. Se distingue a propósito de
   `.sg-relgroup` (los grupos de conectores, más abajo): aquel es una caja con
   fondo, borde, radio y contador porque agrupa opciones que se pulsan; este no
   tiene caja mientras está cerrado, el galón va a la izquierda y gira 90°, y el
   cuerpo es texto colgado de un filete. Cerrado ocupa una línea discreta; nunca
   compite con el recuadro azul que tiene encima.
   El texto lo escribe el equipo lingüístico con saltos de línea significativos
   (bloques separados por línea en blanco): los respeta `pre-wrap`, sin `<br>`. */
.sg-panel .sg-ex { margin:-6px 0 14px; }
.sg-panel .sg-ex-head { display:inline-flex; align-items:center; gap:5px; padding:3px 6px 3px 2px; border-radius:7px; color:var(--sg-muted); font-size:11.5px; font-weight:600; cursor:pointer; list-style:none; user-select:none; }
.sg-panel .sg-ex-head::-webkit-details-marker { display:none; }
.sg-panel .sg-ex-head:hover { color:var(--sg-primary-ink); background:var(--sg-primary-wash); }
.sg-panel .sg-ex-head:focus-visible { outline:2px solid var(--sg-primary); outline-offset:1px; }
.sg-panel .sg-ex-head .chev { width:13px; height:13px; flex:0 0 auto; color:var(--sg-faint); transition:transform .16s; }
.sg-panel .sg-ex-head:hover .chev { color:var(--sg-primary); }
.sg-panel .sg-ex[open] > .sg-ex-head { color:var(--sg-ink-2); }
.sg-panel .sg-ex[open] > .sg-ex-head .chev { transform:rotate(90deg); }
.sg-panel .sg-ex-body { margin:5px 0 0 7px; padding:1px 0 1px 11px; border-left:2px solid var(--sg-line); white-space:pre-wrap; overflow-wrap:anywhere; font-size:12.5px; line-height:1.6; color:var(--sg-muted); }

/* identified points — clickable list; selected expands its suggestions */
.sg-panel .sg-points { border-top:1px solid var(--sg-line-2); padding-top:12px; }
.sg-panel .sg-points-head { display:flex; align-items:center; gap:7px; margin-bottom:8px; }
.sg-panel .sg-points-head span { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--sg-muted); }
.sg-panel .sg-point-list { display:flex; flex-direction:column; gap:0; }
.sg-panel .sg-point { background:transparent; border:0; border-top:1px solid var(--sg-line-2); overflow:hidden; transition:background .12s; }
.sg-panel .sg-point:first-child { border-top:0; }
.sg-panel .sg-point:hover { background:var(--sg-surface-2); }
.sg-panel .sg-point.is-active { background:var(--sg-surface-2); box-shadow:inset 2px 0 0 var(--sg-primary); }
.sg-panel .sg-point-row { display:block; }
.sg-panel .sg-point-head { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:0; background:transparent; text-align:left; cursor:pointer; }
.sg-panel .sg-point-head .q { flex:1; min-width:0; font-size:13px; line-height:1.45; color:var(--sg-ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sg-panel .sg-point.is-active .sg-point-head .q { color:var(--sg-ink); }
.sg-panel .sg-point-head .chev { width:15px; height:15px; color:var(--sg-faint); flex:0 0 auto; }
.sg-panel .sg-point.is-active .sg-point-head .chev { color:var(--sg-primary); }
.sg-panel .sg-point-body { padding:2px 12px 12px; }

/* Tras una edición solo se comunica la excepción útil: el fragmento ya no se
   puede localizar. No hay estados «pendiente/resuelto», ojo ni botón auxiliar:
   toda la fila es el único control de navegación. */
.sg-panel .sg-point.is-missing .sg-point-head .q { color:var(--sg-muted); }
.sg-panel .sg-point-flag { display:inline-flex; flex:0 0 auto; padding:2px 7px; background:#fff7ed; border:1px solid #f6c67f; border-radius:999px; color:#92400e; font-size:10.5px; font-weight:650; white-space:nowrap; }
/* El ámbar de arriba es un aviso, y avisar a quien acaba de aplicar un cambio
   es contarle un problema que no tiene. «Modificado» va en verde discreto: se
   lee como confirmación y no compite con el texto. */
.sg-panel .sg-point-flag.is-done { background:#f0fdf4; border-color:#a7d8b6; color:#166534; }
/* «Modificado por otra recomendación» es el mismo hecho con el origen detrás,
   así que lleva el mismo verde y no un tercer color: lo que cambia es de
   quién fue el cambio, no si lo hubo. Se le deja envolver en dos líneas
   —`white-space:nowrap` en una fila de 340 px lo sacaría del carril— y se
   alinea arriba, para que la primera línea quede a la altura de la frase. */
.sg-panel .sg-point-flag.is-elsewhere { white-space:normal; text-align:left; align-self:flex-start; max-width:11em; line-height:1.3; }

/* La tarjeta sigue siendo Sintaxis (naranja). Solo esta regla usa una segunda
   capa semántica: verde para singular y azul para plural, explicada aquí y
   repetida junto a cada frase para que el color nunca dependa de memoria. */
.sg-panel .sg-highlight-legend { display:flex; flex-wrap:wrap; gap:8px 14px; margin:-2px 0 12px; padding:8px 10px; border:1px solid var(--sg-line-2); border-radius:9px; background:var(--sg-surface-2); }
.sg-panel .sg-highlight-legend span { display:inline-flex; align-items:center; gap:6px; color:var(--sg-muted); font-size:11.5px; font-weight:600; }
.sg-panel .sg-highlight-legend i,
.sg-panel .sg-point-variant { display:inline-block; flex:0 0 auto; width:8px; height:8px; border-radius:999px; background:var(--variant-c); }
.sg-panel .variant-first-person-singular { --variant-c:var(--hit-first-person-singular); }
.sg-panel .variant-first-person-plural { --variant-c:var(--hit-first-person-plural); }
.sg-panel .sg-point-variant { width:7px; height:7px; }

/* occurrence navigator for repeated units */
.sg-panel .sg-span-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 8px; margin:0 0 8px; background:var(--sg-surface-2); border:1px solid var(--sg-line); border-radius:8px; }
.sg-panel .sg-span-nav-label { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--sg-ink-2); line-height:1.3; }
.sg-panel .sg-span-nav-label strong { color:var(--sg-ink); font-weight:700; }
.sg-panel .sg-span-nav-label .sg-point-flag { margin:0; }
.sg-panel .sg-span-btn { width:24px; height:24px; border-radius:5px; flex:0 0 auto; }
.sg-panel .sg-span-btn svg { width:14px; height:14px; }

/* connectors + glossary options */
.sg-panel .sg-conn-label { margin:0 0 8px; font-size:12px; font-weight:650; color:var(--sg-ink); }
.sg-panel .sg-relgroup { margin-bottom:6px; }
.sg-panel .sg-relgroup:last-child { margin-bottom:0; }
.sg-panel .sg-rel-head { display:flex; align-items:center; gap:9px; padding:8px 11px; background:var(--sg-surface-2); border:1px solid var(--sg-line); border-radius:9px; color:var(--sg-ink); font-size:12.5px; font-weight:600; cursor:pointer; list-style:none; }
.sg-panel .sg-rel-head::-webkit-details-marker { display:none; }
.sg-panel .sg-rel-head:hover { background:#eef1f7; }
.sg-panel .sg-rel-head .n { margin-left:auto; padding:1px 8px; background:var(--sg-surface); border:1px solid var(--sg-line); border-radius:999px; font-size:11.5px; color:var(--sg-muted); font-weight:650; }
.sg-panel .sg-rel-head svg { width:15px; height:15px; color:var(--sg-faint); transition:transform .16s; }
.sg-panel .sg-relgroup[open] > .sg-rel-head { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.sg-panel .sg-relgroup[open] > .sg-rel-head svg { transform:rotate(180deg); }
.sg-panel .sg-relgroup[open] > .sg-opts { border:1px solid var(--sg-line); border-top:0; border-radius:0 0 9px 9px; }
.sg-panel .sg-opts { display:flex; flex-wrap:wrap; gap:7px; padding:10px; }
.sg-panel .sg-point-body > .sg-opts { padding:0; }

/* long-sentence split hints */
.sg-panel { --sg-seam-line: color-mix(in srgb, var(--sg-primary) 45%, var(--sg-line)); }
.sg-panel .sg-segments { display:flex; flex-direction:column; gap:0; }
/* El consejo que acompaña a la segmentación: se lee antes que las cajas y no
   compite con ellas, así que va en el gris de los textos secundarios. */
.sg-panel .sg-seg-hint { margin:-2px 0 9px; font-size:11.5px; line-height:1.45; color:var(--sg-muted); }
/* El mismo papel, una costura más abajo: qué son las alternativas del conector
   que se acaba de desplegar. Mismo tono que el consejo de arriba para que se
   lean como la misma voz y no como dos avisos distintos. */
.sg-panel .sg-opts-hint { margin:0 0 7px; font-size:11.5px; line-height:1.45; color:var(--sg-muted); }
.sg-panel .sg-seg { padding:9px 11px; background:var(--sg-surface-2); border:1px solid var(--sg-line); border-radius:9px; font-size:12.5px; line-height:1.5; color:var(--sg-ink-2); }
/* La costura entre dos segmentos.
   La línea discontinua la pidió Sara el 12/08 —«lo que sí dejaría es la línea
   discontinua azul entre las cajas»— y desde el 13/08 hace un segundo trabajo:
   sostener el conector que une esas dos partes. Sin conector es solo la línea;
   con él, el conector se sienta encima, centrado, con el fondo del panel detrás
   para que la línea no lo cruce. Ahí es donde se usa, así que ahí se enseña. */
.sg-panel .sg-seam { display:flex; align-items:center; min-height:22px; margin:0; }
/* Costura vacía: solo la línea, de lado a lado. */
.sg-panel .sg-seam:not(.sg-seam-conn)::before { content:""; flex:1; height:0; margin:0 10px; border-top:1px dashed var(--sg-seam-line); }
/* Costura con conector: la línea la dibuja el propio rótulo, a sus dos lados.
   Puesta en el contenedor quedaba a media altura del bloque, así que al
   desplegar las alternativas la raya las cruzaba por el medio. Anclada al
   rótulo acompaña siempre al conector, abierto o cerrado. */
.sg-panel .sg-seam-conn { display:block; padding:6px 0; }
.sg-panel .sg-seam-conn > .sg-rel-head { background:none; border:0; padding:3px 0; }
.sg-panel .sg-seam-conn > .sg-rel-head::before,
.sg-panel .sg-seam-conn > .sg-rel-head::after { content:""; flex:1; height:0; border-top:1px dashed var(--sg-seam-line); }
.sg-panel .sg-seam-conn > .sg-rel-head span { padding:3px 10px; background:var(--sg-surface-2); border:1px solid var(--sg-line); border-radius:9px; }
.sg-panel .sg-seam-conn > .sg-rel-head:hover span { background:#eef1f7; }
.sg-panel .sg-seam-conn > .sg-rel-head svg { margin-left:-4px; }
.sg-panel .sg-seam-conn[open] > .sg-opts { margin-top:6px; border:1px solid var(--sg-line); border-radius:9px; }
.sg-panel .sg-cut { display:flex; align-items:center; gap:7px; padding:5px 4px; color:var(--sg-primary-ink); font-size:11.5px; font-weight:600; }
.sg-panel .sg-cut svg { width:14px; height:14px; }
.sg-panel .sg-cut::after { content:""; flex:1; height:0; border-top:1px dashed color-mix(in srgb, var(--sg-primary) 40%, var(--sg-line)); }
.sg-panel .sg-opt { display:flex; flex-wrap:wrap; align-items:stretch; width:100%; min-width:0; background:var(--sg-surface); border:1px solid var(--sg-line); border-radius:10px; overflow:hidden; }
.sg-panel .sg-opt:hover { border-color:color-mix(in srgb, var(--sg-primary) 50%, var(--sg-line)); }
/* Qué es cada caja: «Alternativa» o «Explicación». Son las dos palabras del
   texto de la recomendación, y responden solas a por qué unas se pueden
   aplicar y otras no. Van en versales pequeñas, como el antetítulo del modal,
   para que se lean sin competir con la propuesta. */
.sg-panel .sg-opt-kind { flex:0 0 100%; padding:6px 10px 0; font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--sg-faint); }
/* La explicación no es texto que se pegue en el documento: no lleva botón y
   se lee como prosa, no como una propuesta. */
.sg-panel .sg-opt.is-explanation { background:var(--sg-surface-2); }
.sg-panel .sg-opt.is-explanation .sg-opt-value { color:var(--sg-muted); font-size:12.5px; }
/* Base 0 y no `auto`: desde que la caja envuelve para dejar sitio al rótulo,
   una alternativa larga —una explicación de cuarenta palabras— medía más que
   la línea y echaba el botón de copiar a un renglón suelto debajo. Con base 0
   el valor encoge y las acciones se quedan a su lado. */
.sg-panel .sg-opt-value { flex:1 1 0; min-width:0; align-self:center; padding:8px 10px; color:var(--sg-ink-2); font-size:13px; line-height:1.35; overflow-wrap:anywhere; }
.sg-panel .sg-opt-actions { display:flex; flex:0 0 auto; align-items:stretch; border-left:1px solid var(--sg-line); }
.sg-panel .sg-opt-copy { display:grid; place-items:center; width:30px; padding:0; border:0; background:transparent; color:var(--sg-muted); cursor:pointer; }
.sg-panel .sg-opt-copy:hover { color:var(--sg-primary-ink); background:var(--sg-primary-wash); }
.sg-panel .sg-opt-copy.is-success { color:#067647; background:#ecfdf3; }
.sg-panel .sg-opt-copy svg { width:14px; height:14px; }
.sg-panel .sg-opt-apply { display:inline-flex; align-items:center; gap:5px; padding:0 9px; border:0; border-left:1px solid var(--sg-line); background:var(--sg-primary); color:#fff; font-family:inherit; font-size:11.5px; font-weight:650; line-height:1; cursor:pointer; }
.sg-panel .sg-opt-apply:hover { background:var(--sg-primary-ink); }
.sg-panel .sg-opt-apply svg { width:14px; height:14px; }

/* empty state */
.sg-panel .sg-empty { display:grid; place-items:center; gap:10px; padding:48px 20px; text-align:center; color:var(--sg-muted); }
.sg-panel .sg-empty svg { width:28px; height:28px; color:var(--sg-ok); }
.sg-panel .sg-empty p { margin:0; font-size:13px; line-height:1.5; }

/* Sin recomendación elegida. Encabeza la lista, en el renglón donde se abriría
   el detalle: es una indicación, no un vacío, así que va discreta y no compite
   con las tarjetas que hay debajo. */
.sg-panel .sg-pick { display:flex; align-items:center; gap:9px; padding:12px 14px; border-bottom:1px solid var(--sg-line-2); color:var(--sg-muted); background:var(--sg-surface-2); }
.sg-panel .sg-pick svg { flex:0 0 auto; width:16px; height:16px; color:var(--sg-faint); }
.sg-panel .sg-pick p { margin:0; font-size:12.5px; line-height:1.45; }

/* Confirmación de sustitución. `position:fixed` + `inset:0` evita que el
   diálogo herede la esquina del carril que lo aloja; el top layer del
   navegador lo centra respecto de toda la ventana. */
.sg-panel .sg-preview[open] { position:fixed; inset:0; box-sizing:border-box; width:min(460px, calc(100vw - 28px)); max-width:none; max-height:min(680px, calc(100vh - 28px)); margin:auto; border:1px solid #d8e2ed; border-radius:16px; padding:0; color:var(--sg-ink); background:#fff; box-shadow:0 28px 80px -24px rgba(16,24,40,.55); overflow:auto; }
.sg-panel .sg-preview::backdrop { background:rgba(15,23,42,.42); backdrop-filter:blur(2px); }
.sg-panel .sg-preview > div { display:flex; flex-direction:column; gap:16px; padding:20px; }
.sg-panel .sg-preview header { display:grid; grid-template-columns:38px minmax(0,1fr) 32px; align-items:center; gap:11px; }
.sg-panel .sg-preview-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:var(--sg-primary-ink); background:var(--sg-primary-wash); }
.sg-panel .sg-preview-icon svg { width:18px; height:18px; }
.sg-panel .sg-preview-kicker { display:block; margin-bottom:1px; color:var(--sg-primary-ink); font-size:10.5px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
.sg-panel .sg-preview h2 { margin:0; font-size:17px; font-weight:720; letter-spacing:-.01em; color:var(--sg-ink); }
.sg-panel .sg-preview-comparison { display:flex; flex-direction:column; align-items:stretch; }
.sg-panel .sg-preview section { padding:12px 14px; border:1px solid var(--sg-line); border-radius:11px; background:#f8fafc; }
.sg-panel .sg-preview section.is-after { border-color:#9ed5bb; background:#f0fdf4; }
.sg-panel .sg-preview section > span { display:block; font-size:10.5px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--sg-faint); }
.sg-panel .sg-preview section.is-after > span { color:#087443; }
/* Lo que cambia dentro del resultado. El diálogo enseña la unidad entera --el
   párrafo, la oración-- y sin esta marca habría que buscar a ojo qué se ha
   movido. Verde más saturado sobre el verde de la caja: se ve sin gritar. */
.sg-panel .sg-preview mark.sg-preview-change { background:#bbf7d0; color:inherit; border-radius:3px; padding:0 2px; font-weight:600; }
.sg-panel .sg-preview section > p { margin:4px 0 0; font-size:14px; line-height:1.55; color:var(--sg-ink-2); overflow-wrap:anywhere; }
.sg-panel .sg-preview-arrow { align-self:center; width:17px; height:17px; margin:4px 0; color:var(--sg-primary); }
/* El motivo de que no se haya podido aplicar. Vive DENTRO del diálogo, encima
   de los botones: es donde está mirando quien acaba de pulsar «Sustituir». */
.sg-panel .sg-preview-error { margin:0; padding:9px 12px; border:1px solid #f6c67f; border-radius:9px; background:#fff7ed; color:#92400e; font-size:12.5px; line-height:1.5; }
.sg-panel .sg-preview footer { display:flex; justify-content:flex-end; gap:8px; padding-top:4px; border-top:1px solid var(--sg-line-2); }
/* display:inline-flex + align-items:center en la base --no solo en
   .primary-- porque cualquier botón puede llevar icono y texto (Copiar,
   Otra propuesta): sin esto el icono de lucide se queda con el
   alineamiento por defecto del inline-block y baila respecto al texto. */
.sg-panel .sg-btn { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; font-size:13px; font-weight:600; border:1px solid var(--sg-line); background:var(--sg-surface); color:var(--sg-ink-2); border-radius:9px; cursor:pointer; font-family:inherit; }
.sg-panel .sg-btn svg { width:15px; height:15px; flex-shrink:0; }
.sg-panel .sg-btn:hover { background:var(--sg-surface-2); }
.sg-panel .sg-btn.primary { color:#fff; background:var(--sg-primary); border-color:transparent; }
.sg-panel .sg-btn.primary:hover { background:var(--sg-primary-ink); }

@media (max-width:700px) {
  .sg-panel .sg-card-head .t { font-size:14px; }
  .sg-panel .sg-desc, .sg-panel .sg-rec p { font-size:14px; }
  .sg-panel .sg-ex-body { font-size:13.5px; }
  .sg-panel .sg-ex-head { font-size:12.5px; }
  .sg-panel .sg-point-head { flex-wrap:wrap; gap:6px 9px; }
  .sg-panel .sg-point-head .q { flex-basis:calc(100% - 24px); }
}

/* ==========================================================================
   Propuestas con IA (Entrega C)
   ========================================================================== */

/* CTA de sugerencias con IA dentro de la tarjeta de recomendación */
.sg-panel .sg-ai-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding: 9px 12px;
  background: var(--sg-surface-2);
  border: 1px solid var(--sg-line);
  border-radius: 9px;
}
.sg-panel .sg-ai-cta:last-child {
  margin-bottom: 0;
}
.sg-panel .sg-ai-cta-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--sg-ink-2);
}
.sg-panel .sg-ai-cta-icon {
  width: 15px;
  height: 15px;
  color: var(--sg-primary);
  flex-shrink: 0;
}
.sg-panel .sg-ai-cta.is-disabled {
  background: var(--sg-surface-2);
  border-color: var(--sg-line);
  opacity: 0.75;
}
.sg-panel .sg-ai-cta.is-disabled .sg-ai-cta-info {
  color: var(--sg-muted);
}
.sg-panel .sg-ai-cta.is-disabled .sg-ai-cta-icon {
  color: var(--sg-faint);
}
.sg-panel .sg-btn.ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 650;
  color: #fff;
  background: var(--sg-primary);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background 0.15s ease, transform 0.1s ease;
}
.sg-panel .sg-btn.ai-btn:hover {
  background: var(--sg-primary-ink);
}
.sg-panel .sg-btn.ai-btn:active {
  transform: scale(0.98);
}
.sg-panel .sg-btn.ai-btn.is-disabled,
.sg-panel .sg-btn.ai-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--sg-faint);
  color: #fff;
  box-shadow: none;
}
.sg-panel .sg-btn.ai-btn svg {
  width: 14px;
  height: 14px;
}

/* Diálogo en modo IA: más ancho, oculta la comparación fija y footer del
   catálogo. Columna de altura acotada por max-height: la cabecera no encoge,
   [data-preview-ai] es quien hace scroll interno --así los botones
   (Cerrar/Copiar/Insertar) quedan fijos abajo en vez de desplazarse con
   contenido largo (motivo, comprobaciones, «también cambia»...). */
.sg-panel .sg-preview.is-ai-mode[open] {
  width: min(560px, calc(100vw - 28px));
  max-height: min(720px, calc(100vh - 28px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sg-panel .sg-preview.is-ai-mode[open] > div {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.sg-panel .sg-preview.is-ai-mode > div > header {
  flex-shrink: 0;
}
.sg-panel .sg-preview.is-ai-mode > div > .sg-preview-comparison,
.sg-panel .sg-preview.is-ai-mode > div > .sg-preview-footer,
.sg-panel .sg-preview.is-ai-mode > div > .sg-preview-error {
  display: none !important;
}
.sg-panel .sg-preview.is-ai-mode[open] [data-preview-ai] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sg-panel .sg-preview:not(.is-ai-mode) [data-preview-ai] {
  margin-top: 4px;
}

/* Conmutador a IA dentro del modal de catálogo */
.sg-panel .ai-catalog-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--sg-surface-2);
  border: 1px solid var(--sg-line);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--sg-ink-2);
}
.sg-panel .ai-catalog-cta-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sg-panel .ai-catalog-cta-info svg {
  width: 16px;
  height: 16px;
  color: var(--sg-primary);
  flex-shrink: 0;
}

/* Vista de propuesta con diff de la unidad. El espacio entre bloques de
   primer nivel (resultado / explicación / alcance / navegación) es mayor que
   el que hay dentro de cada bloque: la jerarquía --el cambio importa más que
   el motivo, y el motivo más que a qué otras reglas afecta-- se lee en el
   aire entre las cosas, no solo en su estilo. */
.sg-panel .ai-proposal-view {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* El resultado y el botón para pedir otra alternativa son una sola unidad
   --el botón actúa sobre esa caja, no sobre el modal entero-- por eso van
   pegados entre sí (gap corto) y el hueco grande (el de .ai-proposal-view)
   queda para separar este bloque del de la explicación. */
.sg-panel .ai-result-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.sg-panel .ai-after-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.sg-panel .ai-after-head > span {
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #087443;
}
.sg-panel .ai-counter-badge {
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--sg-muted);
  border: 1px solid var(--sg-line);
  font-size: 10.5px;
  font-weight: 650;
}
.sg-panel .ai-diff-content {
  font-size: 14px;
  line-height: 1.55;
  color: var(--sg-ink-2);
  overflow-wrap: anywhere;
}
.sg-panel .ai-diff-del {
  color: #b42318;
  background: #fee4e2;
  text-decoration: line-through;
  border-radius: 3px;
  padding: 0 3px;
  margin: 0 1px;
  font-weight: 500;
}
.sg-panel .ai-diff-ins {
  color: #087443;
  background: #bbf7d0;
  text-decoration: none;
  border-radius: 3px;
  padding: 0 3px;
  margin: 0 1px;
  font-weight: 600;
}

/* Explicación y comprobaciones. Motivo y Comprueba comparten una única
   tarjeta --se leen como un mismo bloque, la explicación del cambio-- en vez
   de dos cajas sueltas idénticas al «también cambia» de más abajo, que es lo
   que las mezclaba todas al mismo nivel. */
.sg-panel .ai-explain-group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--sg-surface-2);
  border: 1px solid var(--sg-line);
  overflow: hidden;
}
.sg-panel .ai-rationale-card {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 13px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--sg-ink-2);
}
.sg-panel .ai-rationale-card svg {
  width: 15px;
  height: 15px;
  color: var(--sg-primary-ink);
  flex-shrink: 0;
  margin-top: 2px;
}
.sg-panel .ai-rationale-card strong {
  color: var(--sg-ink);
  margin-right: 4px;
}
.sg-panel .ai-checks-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 13px;
  font-size: 12px;
  color: var(--sg-ink-2);
}
/* Costura entre Motivo y Comprueba cuando van juntos: una línea, no un
   segundo marco. */
.sg-panel .ai-explain-group > .ai-rationale-card + .ai-checks-card {
  border-top: 1px solid var(--sg-line);
}
.sg-panel .ai-checks-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
  color: var(--sg-ink);
}
.sg-panel .ai-checks-header svg {
  width: 15px;
  height: 15px;
  color: #087443;
}
.sg-panel .ai-checks-list {
  margin: 0;
  padding-left: 18px;
  line-height: 1.4;
  color: var(--sg-muted);
}
/* «Esta reescritura también cambia»: lo menos importante de los tres
   bloques, así que es el único sin tarjeta propia --solo una línea fina
   arriba y tipografía más pequeña y apagada-- para que no compita en peso
   visual con el resultado ni con la explicación. Sigue siendo algo que leer
   antes de insertar, no una alerta, por eso no lleva color de aviso. */
.sg-panel .ai-neighbours-card {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 6px;
  padding-top: 11px;
  border-top: 1px dashed var(--sg-line);
  font-size: 11.5px;
  color: var(--sg-muted);
}
.sg-panel .ai-neighbours-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--sg-muted);
}
.sg-panel .ai-neighbours-header svg {
  width: 13px;
  height: 13px;
  color: var(--sg-faint);
}
.sg-panel .ai-neighbours-list {
  margin: 0;
  padding-left: 17px;
  line-height: 1.4;
  color: var(--sg-faint);
}
.sg-panel .ai-neighbour-rule {
  color: var(--sg-muted);
  font-weight: 600;
}
/* El fragmento, entre comillas tipográficas y en cursiva: es texto del
   documento citado dentro de la interfaz, como en el resto del panel. */
.sg-panel .ai-neighbour-text {
  font-style: italic;
}
.sg-panel .ai-neighbour-text::before { content: " «"; }
.sg-panel .ai-neighbour-text::after { content: "»"; }
/* El contador ya vive en la insignia de la caja verde («Propuesta 1 de 2»),
   así que aquí solo hace falta el botón para pasar a la siguiente
   alternativa, pegado justo debajo del resultado al que afecta. */
.sg-panel .ai-nav-row {
  display: flex;
  justify-content: flex-end;
}
.sg-panel .ai-actions-bar {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 8px;
  background: #fff;
  position: sticky;
  bottom: 0;
  border-top: 1px solid var(--sg-line-2);
}
.sg-panel .ai-actions-bar .sg-btn.is-copied {
  color: #087443;
  background: #f0fdf4;
  border-color: #9ed5bb;
}

/* Carga y estados informativos */
.sg-panel .ai-loading-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 20px;
  background: var(--sg-surface-2);
  border: 1px solid var(--sg-line);
  border-radius: 11px;
}
.sg-panel .ai-loading-top {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.sg-panel .ai-spinner-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}
.sg-panel .ai-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(2, 132, 199, 0.18);
  border-top-color: var(--sg-primary);
  border-radius: 50%;
  animation: ai-spin 0.8s linear infinite;
  box-sizing: border-box;
}
@keyframes ai-spin {
  to { transform: rotate(360deg); }
}
.sg-panel .ai-spinner-sparkle {
  position: absolute;
  width: 13px;
  height: 13px;
  color: var(--sg-primary);
  animation: ai-pulse-glow 1.4s ease-in-out infinite alternate;
}
@keyframes ai-pulse-glow {
  0% { opacity: 0.35; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1.15); }
}
.sg-panel .ai-loading-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.sg-panel .ai-loading-copy strong {
  font-size: 13.5px;
  color: var(--sg-ink);
  font-weight: 600;
  transition: color 0.25s ease;
}
.sg-panel .ai-loading-hint {
  font-size: 12px;
  color: var(--sg-muted);
  line-height: 1.35;
  transition: opacity 0.25s ease;
  min-height: 18px;
}
.sg-panel .ai-loading-hint.is-fading {
  opacity: 0;
}
.sg-panel .ai-loading-timer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(2, 132, 199, 0.08);
  color: var(--sg-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.sg-panel .ai-loading-bar-track {
  width: 100%;
  height: 3px;
  background: #e2e8f0;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.sg-panel .ai-loading-bar-pulse {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, var(--sg-primary), transparent);
  border-radius: 2px;
  animation: ai-shimmer-bar 1.6s ease-in-out infinite;
}
@keyframes ai-shimmer-bar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(280%); }
}
.sg-panel .ai-state-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 11px;
  text-align: left;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* Igual que en .ai-proposal-view: sin esto flexbox encoge el icono y el
   cuerpo para que quepan en el hueco en vez de dejar que la tarjeta haga
   scroll, y un mensaje de error largo se recorta en vez de desplazarse. */
.sg-panel .ai-state-card > * {
  flex-shrink: 0;
}
.sg-panel .ai-state-card .ai-state-icon svg {
  width: 24px;
  height: 24px;
}
.sg-panel .ai-state-card.is-stale {
  background: #fff7ed;
  border: 1px solid #f6c67f;
  color: #92400e;
}
.sg-panel .ai-state-card.is-stale .ai-state-icon {
  color: #b45309;
}
.sg-panel .ai-state-card.is-no-change {
  background: #f0fdf4;
  border: 1px solid #9ed5bb;
  color: #087443;
}
.sg-panel .ai-state-card.is-no-change .ai-state-icon {
  color: #087443;
}
.sg-panel .ai-state-card.is-empty {
  background: var(--sg-surface-2);
  border: 1px solid var(--sg-line);
  color: var(--sg-ink-2);
}
.sg-panel .ai-state-card.is-empty .ai-state-icon {
  color: var(--sg-muted);
}
.sg-panel .ai-state-card.is-error {
  background: #fff5f5;
  border: 1px solid #fed7d7;
  color: #c53030;
}
.sg-panel .ai-state-card.is-error .ai-state-icon {
  color: #e53e3e;
}
.sg-panel .ai-state-body h4 {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 700;
  color: inherit;
}
.sg-panel .ai-state-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sg-ink-2);
}
.sg-panel .ai-error-detail {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  font-family: monospace;
  color: var(--sg-muted);
}
.sg-panel .ai-state-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  background-color: inherit;
}
.sg-panel .sg-btn.compact {
  padding: 5px 10px;
  font-size: 12px;
  gap: 5px;
}
.sg-panel .sg-btn.compact svg {
  width: 13px;
  height: 13px;
}