/* Panel de sugerencias · «Proponer con IA» dentro de la ocurrencia.
   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. */
/* ==========================================================================
   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(--ai, #4338ca);
  flex-shrink: 0;
}
/* Con la marca de la IA en vez del icono, la caja la mide la marca. */
.sg-panel span.sg-ai-cta-icon { display: inline-flex; width: auto; height: auto; }
.sg-panel .sg-ai-cta.is-disabled span.sg-ai-cta-icon { filter: grayscale(1); opacity: 0.7; }
/* Coste de pedir una propuesta y fichas de la clarificación desde la
   recomendación (plan-limites-uso L12). */
.sg-panel .sg-ai-cost {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--sg-muted);
}
.sg-panel .sg-ai-cost.is-low { color: #b45309; }
.sg-panel .sg-ai-cta.is-out .sg-ai-cta-icon { color: var(--sg-faint); }
.sg-panel .sg-ai-by-hand { margin: -4px 2px 10px; font-size: 12px; color: var(--sg-muted); }
/* La propuesta de «Proponer con IA», dentro de la ocurrencia y en el sitio del
   botón (RD2). Recibe el foco al abrirse para que el teclado no se quede en un
   botón que ya no existe. */
.sg-panel .sg-occurrence-ai { display: grid; gap: 8px; margin: 0 0 10px; }
.sg-panel .sg-occurrence-ai:focus { outline: none; }
.sg-panel .sg-occurrence-ai:focus-visible { outline: 2px solid var(--ai, #4338ca); outline-offset: 2px; border-radius: 9px; }
/* La ficha de la clarificación es la tarjeta de cambio común; el envoltorio
   solo la separa de lo que sigue y aloja el aviso si no se pudo aplicar. */
.sg-panel .sg-clarify-card { display: grid; gap: 6px; margin: 0 0 10px; }
.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: var(--text-inverse);
  background: var(--sg-primary, #006fc0);
  border: 1px solid transparent;
  border-radius: 8px;
  flex-shrink: 0;
  white-space: nowrap;
  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, #005596);
}
.sg-panel .sg-btn.ai-btn:focus-visible {
  outline: 2px solid var(--sg-primary, #006fc0);
  outline-offset: 2px;
}
.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: var(--text-inverse);
  box-shadow: none;
}
.sg-panel .sg-btn.ai-btn svg {
  width: 14px;
  height: 14px;
}

/* La propuesta de la IA es la tarjeta de cambio común (`ArTextChangeCard`)
   dentro de la ocurrencia; aquí solo queda lo que la tarjeta no trae: el
   resaltado de la diferencia, «también cambia» y el aviso de copiado. */
.sg-panel .ai-proposal-view { display: grid; }
.sg-panel .sg-occurrence-ai .sg-btn.is-success { color: #067647; background: #ecfdf3; }
.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;
}
/* Subrayado, como en el paso (N4): la diferencia se lee sin color (N7). */
.sg-panel .ai-diff-ins {
  color: #087443;
  background: #bbf7d0;
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: 3px;
  padding: 0 3px;
  margin: 0 1px;
  font-weight: 600;
}

/* «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: 4px;
  padding-top: 7px;
  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: "»"; }

/* Carga y estados informativos. Van en la ocurrencia, en el ancho del carril:
   el acento es el índigo de la IA (RD6). */
.sg-panel .ai-loading-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--ai-soft, #eceafd);
  border: 1px solid var(--ai-line, #c7c5f3);
  border-radius: 9px;
}
.sg-panel .ai-loading-top {
  display: flex;
  align-items: center;
  gap: 10px;
  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(67, 56, 202, 0.18);
  border-top-color: var(--ai, #4338ca);
  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(--ai, #4338ca);
  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: var(--sg-surface);
  color: var(--ai, #4338ca);
  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: var(--sg-surface);
  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(--ai, #4338ca), 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%); }
}
@media (prefers-reduced-motion: reduce) {
  .sg-panel .ai-spinner,
  .sg-panel .ai-spinner-sparkle,
  .sg-panel .ai-loading-bar-pulse { animation: none; }
  .sg-panel .ai-loading-hint { transition: none; }
}
.sg-panel .ai-state-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 9px;
  text-align: left;
}
.sg-panel .ai-state-card .ai-state-icon svg {
  width: 18px;
  height: 18px;
}
.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 2px;
  font-size: 13px;
  font-weight: 700;
  color: inherit;
}
.sg-panel .ai-state-body p {
  margin: 0;
  font-size: 12.5px;
  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;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.sg-panel .sg-btn.compact {
  padding: 5px 10px;
  font-size: 12px;
  gap: 5px;
}
.sg-panel .sg-btn.compact svg {
  width: 13px;
  height: 13px;
}