/* Panel de sugerencias · paleta `--sg-*`, chips, tarjetas, puntos y opciones.
   Troceado de `original_suggestions.css` (lote C3). Carga en `head_extra` de
   editor/editor.html y api_tester/analytics.html, detrás de los módulos 02-editor-* y
   ANTES del núcleo: ante una regla del núcleo con la misma especificidad,
   pierde. El orden entre módulos lo fija tests/css_manifest.py. */
/* 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:var(--bg-card,#ffffff); --sg-surface-2:#f5f7fb;
  /* Acento alineado con el azul de marca arText. El blanco y los dos azules
     son alias de los tokens del núcleo con el mismo valor, con la reserva de
     siempre; el resto no tiene un token idéntico. */
  --sg-primary:var(--brand,#006fc0); --sg-primary-ink:var(--brand-dark,#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,#44709c);
  --c-lexical:var(--color-lexical,#915c7f);
  --c-morphosyntax:var(--color-morphosyntax,#966127);
  --c-general:var(--color-general,#6c6c6c);
  /* Acento del chip y del lomo de la tarjeta: el mismo tono con más croma, que
     es lo que separa el malva de léxico del ámbar de morfosintaxis cuando el
     color va en una cifra pequeña y no en una mancha. */
  --c-discourse-accent:var(--hit-accent-discourse,#2e78be);
  --c-lexical-accent:var(--hit-accent-lexical,#ac5992);
  --c-morphosyntax-accent:var(--hit-accent-morphosyntax,#9f6b00);
  --c-general-accent:var(--hit-accent-general,#757575);
  /* El tono del punto: la familia clara de cada categoría, subida hasta 3:1
     sobre el panel para que un círculo de 8 px se vea. */
  --c-discourse-dot:var(--hit-dot-discourse,#3b98f3);
  --c-lexical-dot:var(--hit-dot-lexical,#db6fba);
  --c-morphosyntax-dot:var(--hit-dot-morphosyntax,#c98700);
  --c-general-dot:var(--hit-dot-general,#959595);
  /* Verde de «sin recomendaciones»: es un estado, no un nivel. */
  --sg-ok:var(--accent-emerald,#10b981);
  /* 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 panel/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-accent); }
.sg-panel .sg-chip.cat-lexical { --chip-c:var(--c-lexical-accent); }
.sg-panel .sg-chip.cat-morphosyntax { --chip-c:var(--c-morphosyntax-accent); }
.sg-panel .sg-chip.cat-general { --chip-c:var(--c-general-accent); }

/* category dots */
/* El punto va en la familia CLARA de su categoría —la que se ve en el texto—
   pero subida a 3:1 sobre el panel: el tinte tal cual daba 1,2:1 y a 8 px no se
   veía, y el relleno, al otro extremo, se lee casi negro en un círculo tan
   pequeño. A 3:1 se sostiene solo y no hace falta aro. */
.sg-panel .dot-discourse { background:var(--c-discourse-dot); }
.sg-panel .dot-lexical { background:var(--c-lexical-dot); }
.sg-panel .dot-morphosyntax { background:var(--c-morphosyntax-dot); }
.sg-panel .dot-general { background:var(--c-general-dot); }

/* ---- 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
   panel/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-accent); }
.sg-panel .sg-card.cat-lexical { --card-c:var(--c-lexical-accent); }
.sg-panel .sg-card.cat-morphosyntax { --card-c:var(--c-morphosyntax-accent); }
.sg-panel .sg-card.cat-general { --card-c:var(--c-general-accent); }
.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; }
/* Una palabra por ocurrencia: «Modificado», en el verde de lo aplicado. El ámbar
   de arriba es un aviso y no se usa para confirmar nada: avisar a quien acaba
   de aplicar un cambio es contarle un problema que no tiene. El azul de
   «Propuesta» se retiró con el rótulo (UD1). */
.sg-panel .sg-point-tag { display:inline-flex; flex:0 0 auto; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:600; line-height:1.5; white-space:nowrap; }
.sg-panel .sg-point-tag.is-applied { color:var(--applied); background:#e3f4ec; box-shadow:inset 0 0 0 1px #bfe6d2; }
.sg-panel .sg-span-nav-label .sg-point-tag { margin:0; }
/* El estado aplicado, en una sola pieza (UD2): la frase que dice qué ha pasado
   y «Deshacer», en el verde de lo aplicado (RD6). El botón va sobre blanco
   dentro del bloque para que se lea como acción y no como parte del aviso. */
.sg-panel .sg-applied { margin:0 0 10px; padding:8px 10px; border-radius:7px; background:#e3f4ec; color:var(--applied); }
.sg-panel .sg-applied-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sg-panel .sg-applied-state { font-size:12.5px; line-height:1.45; }
.sg-panel .sg-applied .sg-btn.sg-applied-undo { flex:0 0 auto; padding:6px 12px; font-size:12.5px; color:var(--applied); background:var(--sg-surface); border-color:#bfe6d2; }
.sg-panel .sg-applied .sg-btn.sg-applied-undo:hover { background:#f1faf5; }
.sg-panel .sg-applied .sg-btn:focus-visible { outline:2px solid var(--sg-primary); outline-offset:2px; }
.sg-panel .sg-applied .sg-subst-error { margin:8px 0 0; }

/* 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); }
/* Los puntos de persona verbal —la leyenda y el de cada caso— van en el mismo
   tono que los demás puntos del panel: la familia clara de su variante subida a
   3:1, no el relleno, que en un círculo de 7 px se lee casi negro. */
.sg-panel .variant-first-person-singular { --variant-c:var(--hit-dot-first-person-singular,#ed6d67); }
.sg-panel .variant-first-person-plural { --variant-c:var(--hit-dot-first-person-plural,#a282f1); }
.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-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; }
/* La sustitución del catálogo se decide en línea, en la tarjeta de cambio. Las
   glosas y lo que no se puede aplicar siguen debajo, como opciones copiables.
   Dentro de una relación de conectores la tarjeta ocupa el sitio de la lista y
   hereda su caja. */
.sg-panel .sg-subst { display:grid; gap:6px; }
.sg-panel .sg-point-body > .sg-subst + .sg-opts { margin-top:8px; }
.sg-panel .sg-relgroup[open] > .sg-subst { padding:8px; border:1px solid var(--sg-line); border-top:0; border-radius:0 0 9px 9px; }
.sg-panel .sg-subst .sg-btn.is-success { color:#067647; background:#ecfdf3; }
.sg-panel .sg-subst-error { margin:0; padding:7px 10px; border:1px solid #f6c67f; border-radius:8px; background:#fff7ed; color:#92400e; font-size:12px; line-height:1.45; }

/* 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:0 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-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; }

/* 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; }

/* 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:var(--text-inverse); 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); }
}