/* 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;
  --c-discourse:var(--color-discourse,#7c6cf0);
  --c-lexical:var(--color-lexical,#0ea5c4);
  --c-morphosyntax:var(--color-morphosyntax,#e8930c);
  --c-acronyms:var(--color-acronyms,#10b981);
  --c-general:#94a3b8;
  --hit-first-person-singular:#0f9f86;
  --hit-first-person-plural:#2878c8;
  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));
}

/* 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, el filtro y la navegación se quedan
   arriba. En el carril del editor el anfitrión mete en `.sg-slot` el
   conmutador de marcas, de modo que conmutador, navegación y cierre comparten
   una sola banda. */
.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-slot { display:flex; align-items:center; flex:1 1 auto; min-width:0; }
.sg-panel .sg-slot:empty { flex:1 1 auto; }
.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-acronyms { --chip-c:var(--c-acronyms); }
.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-acronyms { background:var(--c-acronyms); }
.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; }

/* ---- 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-acronyms { --card-c:var(--c-acronyms); }
.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 .cnt { display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 7px; background:var(--sg-surface-2); border-radius:999px; font-size:12px; font-weight:650; color:var(--sg-muted); font-variant-numeric:tabular-nums; }
.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-points-head .c { padding:1px 7px; background:var(--sg-surface-2); border:1px solid var(--sg-line); border-radius:999px; font-size:11px; font-weight:650; color:var(--sg-ink-2); font-variant-numeric:tabular-nums; }
.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; }

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

/* 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-segments { display:flex; flex-direction:column; gap:0; }
.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); }
.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; 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)); }
.sg-panel .sg-opt-value { flex:1 1 auto; 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(--c-acronyms); }
.sg-panel .sg-empty p { margin:0; font-size:13px; line-height:1.5; }

/* 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; }
.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); }
.sg-panel .sg-preview footer { display:flex; justify-content:flex-end; gap:8px; padding-top:4px; border-top:1px solid var(--sg-line-2); }
.sg-panel .sg-btn { 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:hover { background:var(--sg-surface-2); }
.sg-panel .sg-btn.primary { display:inline-flex; align-items:center; gap:7px; color:#fff; background:var(--sg-primary); border-color:transparent; }
.sg-panel .sg-btn.primary svg { width:15px; height:15px; }
.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); }
}