/* Panel de sugerencias · diálogo e informe de la clarificació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. */
/* ══════════════════════════════════════════════════════════════════════
   DIÁLOGO DE LA CLARIFICACIÓN (informe de cambios)
   ══════════════════════════════════════════════════════════════════════ */
/* La ventana de revisión se retiró con la revisión una a una en el carril
   (R30, bloque «Recorrido»); de este bloque queda lo que usa el informe. */
/* `dialog.editor-clarify-dialog` (elemento + clase) para ganar siempre a
   `.admin-dialog` del núcleo (30-shared-components), que se carga DESPUÉS de
   esta hoja (legacy, en head_extra) y empataría en especificidad con un
   selector de una sola clase: el tamaño y el color de fondo se los quedaba el
   núcleo y el diálogo salía sin maquetar. El resto de propiedades de
   `.admin-dialog` (fondo transparente, borde, radio, sombra, recorte) se
   heredan sin tocarlas: el mismo patrón que ya usan los demás diálogos del
   editor (`editor-link-dialog`, `editor-confirm-dialog`). */
dialog.editor-clarify-dialog {
  width: min(620px, calc(100vw - 32px));
  max-width: 620px;
}
.editor-clarify-dialog .sg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 7px;
  border: 1px solid #cbd5e1;
  background: var(--bg-card);
  color: #334155;
  cursor: pointer;
}
.editor-clarify-dialog .sg-btn:hover {
  background: #f1f5f9;
}
.editor-clarify-dialog .sg-btn.primary {
  background: #166534;
  color: var(--text-inverse);
  border-color: #166534;
}
.editor-clarify-dialog .sg-btn.primary:hover {
  background: #14532d;
}
.editor-clarify-dialog .sg-btn i,
.editor-clarify-dialog .sg-btn svg {
  width: 15px;
  height: 15px;
}

/* Deshacer en el informe de cambios: el segundo clic confirma. */
.editor-clarify-dialog [data-clarify-undo].is-confirming {
  background: #b42318 !important;
  color: var(--text-inverse) !important;
  border-color: #912018 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   INFORME DE DECISIONES DE CLARIFICACIÓN
   ══════════════════════════════════════════════════════════════════════ */
dialog.editor-clarify-report-dialog {
  width: min(840px, calc(100vw - 32px));
  max-width: 840px;
}
.dialog-card.clarify-report-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: min(680px, calc(100dvh - 32px));
  overflow-y: auto;
}
.clarify-report-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 14px;
}
.clarify-report-kicker {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #166534;
}
.clarify-report-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  margin: 2px 0 0 0;
}
.clarify-report-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Cifras del informe (las del globo retirado, N6): una fila de pares
   rótulo–cifra que se reparte y baja de línea en pantalla estrecha. */
.clarify-report-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
}
.clarify-report-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.clarify-report-stat dt { font-size: 12px; color: #475569; }
.clarify-report-stat dd { margin: 0; font-size: 20px; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; }
.clarify-report-reanalyze-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  font-size: 13px;
  color: #1e40af;
}
.clarify-report-groups {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.clarify-report-group {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
}
.clarify-report-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-app);
  border-bottom: 1px solid var(--border-color);
  padding: 10px 16px;
}
.clarify-report-rule-title {
  font-size: 14.5px;
  font-weight: 650;
  color: var(--text-main);
  margin: 0;
}
.clarify-report-counts {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.clarify-count-badge {
  padding: 2px 8px;
  border-radius: 9999px;
  font-weight: 600;
}
.clarify-count-badge.before {
  background: #fee2e2;
  color: #991b1b;
}
.clarify-count-badge.after {
  background: #dcfce7;
  color: #166534;
}
.clarify-count-arrow {
  color: #94a3b8;
  font-size: 13px;
}
.clarify-report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.clarify-report-table th {
  text-align: left;
  background: var(--bg-card);
  padding: 8px 14px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #f1f5f9;
}
.clarify-report-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f8fafc;
  vertical-align: top;
  line-height: 1.45;
}
.clarify-report-table tr:last-child td {
  border-bottom: none;
}
.clarify-col-snippet {
  color: #1e293b;
  max-width: 260px;
  font-weight: 500;
}
.clarify-col-result {
  white-space: nowrap;
  font-weight: 600;
  color: var(--text-main);
}
.clarify-col-rationale {
  color: var(--text-muted);
  font-size: 12.5px;
}
.clarify-report-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border-color);
  padding-top: 14px;
}
.clarify-report-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Reglas de impresión. Solo con el informe abierto se imprime el informe; si
   no, se imprime el documento (bloque @media print de 02-editor-print.css).
   El diálogo no cuelga directamente de <body>: se oculta, en cada ancestro
   suyo, todo hermano que no sea ni contenga el diálogo abierto. */
@media print {
  :where(body, body *):has(.editor-clarify-report-dialog[open])
    > :not(.editor-clarify-report-dialog[open], :has(.editor-clarify-report-dialog[open])) {
    display: none !important;
  }
  .editor-clarify-report-dialog[open] {
    position: static;
    display: block;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    border: none;
    padding: 0;
  }
  .editor-clarify-report-dialog .clarify-report-actions-bar,
  .editor-clarify-report-dialog .dialog-close,
  .editor-clarify-report-dialog .clarify-report-reanalyze-notice {
    display: none !important;
  }
}