/* Panel de sugerencias · tarjeta de cambio, marca de arText y «resuelto también».
   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. */
/* ── Tarjeta de cambio y marca ─────────────────────────────────────────────
   Rediseño de la clarificación, R11 (`editor/change_card.js`). La t del logo
   en su azul es arText; la etiqueta «IA» en índigo marca la capa de IA (RD6).
   El índigo se reserva para la IA y el verde para «aplicado». */
:root {
  --ai: #4338ca;
  --ai-soft: #eceafd;
  --ai-line: #c7c5f3;
  --applied: #0f6b4a;
}

/* La marca: la t de pincel tiene fondo transparente y se usa tal cual, sin
   recolorear. 22 px por defecto; 18 y 40 con modificador. */
.artext-mark {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #fff url("../logo_artext_mark.png") 42% 50% / 66% no-repeat;
  box-shadow: 0 0 0 1px #dbe3ee;
  vertical-align: middle;
}
.artext-mark--sm { width: 18px; height: 18px; border-radius: 6px; }
.artext-mark--lg { width: 40px; height: 40px; border-radius: 12px; }
.artext-mark--ai { box-shadow: 0 0 0 1px var(--ai-line); }
.artext-mark--lg.artext-mark--ai { box-shadow: 0 0 0 1.5px var(--ai-line), 0 6px 16px rgba(67, 56, 202, 0.18); }
.artext-mark-tag {
  position: absolute;
  right: -4px;
  bottom: -3px;
  padding: 1px 2px;
  border-radius: 3px;
  background: var(--ai);
  color: var(--text-inverse);
  font: 700 7px/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 1px #fff;
}
.artext-mark--sm .artext-mark-tag { font-size: 6px; right: -3px; bottom: -2px; }
.artext-mark--lg .artext-mark-tag { font-size: 9px; right: -3px; bottom: -3px; padding: 2px 3px; border-radius: 4px; box-shadow: 0 0 0 1.5px #fff; }

/* La tarjeta «Propuesta». Las dos fuentes son el mismo componente y el mismo
   azul (RD18): lo que dice «esto es IA» es la etiqueta de la marca. */
.change-card {
  --card-accent: #006fc0;
  --card-ink: #005596;
  --card-line: #cfe2f3;
  --card-wash: #f7fbfe;
  display: grid;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid var(--card-line);
  border-radius: 9px;
  background: var(--card-wash);
  color: var(--sg-ink-2, #334155);
  font-size: 13px;
  line-height: 1.5;
}
.change-card--keep { --card-line: var(--sg-line, #e4e8f0); --card-wash: var(--sg-surface-2, #f5f7fb); }
.change-card-head {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--card-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
.change-card-title { min-width: 0; overflow-wrap: anywhere; }
.change-card-badge {
  margin-left: auto;
  color: #475569;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.change-card .change-card-diff,
.change-card-before {
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
/* Textos secundarios de la tarjeta en #475569 y no en `--sg-muted` (#6b7688),
   que sobre el fondo de la tarjeta se queda en 4,4:1 (N7, AA). */
.change-card-rationale { margin: 0; color: #475569; font-size: 12.5px; }
.change-card-rationale b { color: var(--sg-ink, #0f172a); font-weight: 600; }
.change-card-checks { color: #475569; font-size: 12px; }
.change-card-checks ul { margin: 2px 0 0; padding-left: 18px; }
.change-card-label { font-weight: 600; color: var(--sg-ink-2, #334155); }

/* Alternativas: radios nativos (teclado y lector de pantalla gratis) con forma
   de píldora. La elegida lleva borde doble y negrita, no solo color. */
.change-card-options { display: flex; flex-wrap: wrap; gap: 5px; }
.change-card-option { position: relative; display: inline-flex; cursor: pointer; }
.change-card-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.change-card-option span {
  padding: 2px 9px;
  border: 1px solid var(--card-line);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--card-ink);
  font-size: 12px;
}
.change-card-option:hover span { border-color: var(--card-accent); }
.change-card-option input:checked + span {
  border-color: var(--card-accent);
  box-shadow: inset 0 0 0 1px var(--card-accent);
  font-weight: 600;
}
.change-card-option input:focus-visible + span { outline: 2px solid var(--card-accent); outline-offset: 2px; }

/* Dos formas de resolver una oración (R21): selector segmentado con radios
   nativos. La elegida va en blanco, con sombra y en negrita, no solo en otro
   color. Debajo, los cambios sueltos con el punto de su nivel o la reescritura
   con lo que resuelve. */
.change-card-forms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border-radius: 8px;
  background: #eef2f7;
}
.change-card-form { position: relative; display: flex; min-width: 0; cursor: pointer; }
.change-card-form input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.change-card-form span {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 6px;
  border-radius: 6px;
  color: var(--sg-muted, #475569);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}
.change-card-form small { display: block; color: #475569; font-size: 11px; font-weight: 500; }
.change-card-form:hover span { color: var(--sg-ink, #0f172a); }
.change-card-form input:checked + span {
  background: var(--bg-card);
  color: var(--sg-ink, #0f172a);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), inset 0 0 0 1px var(--card-line);
}
.change-card-form input:focus-visible + span { outline: 2px solid var(--card-accent); outline-offset: 1px; }
.change-card-form-panel { display: grid; gap: 7px; }
.change-card-form-panel[hidden] { display: none; }
.change-card-changes,
.change-card-resolves { margin: 0; padding: 0; list-style: none; }
.change-card-changes { display: grid; gap: 4px; }
.change-card-changes li { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.change-card-changes .layer-dot { transform: translateY(-1px); }
.change-card-resolves { display: flex; flex-wrap: wrap; gap: 3px 10px; color: var(--sg-muted, #475569); font-size: 12px; }
.change-card-resolves li { display: inline-flex; align-items: center; gap: 5px; }
.change-card-resolves .layer-dot { width: 7px; height: 7px; }

.change-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.change-card .sg-btn:focus-visible { outline: 2px solid var(--card-accent); outline-offset: 2px; }

/* La acción discreta, sin caja. Ninguna acción es índigo (RD18): el índigo
   solo marca «esto es IA». */
.sg-panel .sg-btn.ghost { color: var(--sg-muted); background: transparent; border-color: transparent; }
.sg-panel .sg-btn.ghost:hover { color: var(--sg-ink); background: var(--sg-surface-2); }

/* ── Resuelto también (R20) ──────────────────────────────────────────────
   La línea verde tras aplicar una propuesta que resuelve ocurrencias de otras
   recomendaciones, en la ocurrencia en la que se aplicó o, en la revisión una
   a una, en la siguiente. El verde es el de «aplicado» (RD6). */
.sg-panel .sg-also-resolved {
  margin: 0 0 10px;
  padding: 7px 10px;
  border-radius: 7px;
  background: #e3f4ec;
  color: var(--applied);
  font-size: 12.5px;
  line-height: 1.45;
}

/* «Resuelve también: …» en la ficha y «Resuelve: …» en la reescritura, antes
   de aplicar: lo que la propuesta resuelve de otras recomendaciones. */
.change-card-covers { margin: 0; color: var(--sg-muted, #475569); font-size: 12.5px; line-height: 1.45; }

/* «Esta oración también se puede reescribir entera · Verla en la revisión con
   IA», bajo la propuesta y encima de las acciones (N5). El enlace es un botón
   con aspecto de enlace: abre el paso sin salir de la página. */
.change-card-hint { margin: 0; padding-top: 7px; border-top: 1px dashed var(--card-line, #cfe2f3); color: var(--sg-muted, #475569); font-size: 12px; line-height: 1.45; }
.change-card-hint .sg-link { padding: 0; border: 0; background: none; color: var(--sg-primary, #006fc0); font: inherit; font-weight: 600; cursor: pointer; }
.change-card-hint .sg-link:hover { text-decoration: underline; }
.change-card-hint .sg-link:focus-visible { outline: 2px solid var(--sg-primary, #006fc0); outline-offset: 2px; border-radius: 3px; }