/* Editor de REFRESH (#/refresh-noticia/:id, js/views/refreshNoticia.js) y vista
   de cambios (js/components/diffView.js). Reutiliza el layout del editor de
   noticia (css/noticia.css, css/tiptap.css); aquí solo va lo nuevo: barra de
   métrica, conmutador de vista, paneles de lectura (cambios / original), card
   "Publicado en la web" y añadidos del navegador. Las clases compartidas
   .refresh-pct-badge y .chip-tipo-refresh viven en css/refresh.css. */

/* ---------- Barra de métrica (% de texto cambiado) ---------- */
.refresh-metric {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.refresh-metric-top {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
}
.refresh-metric-figure { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
/* Cifras tabulares + ancho mínimo alineado a la derecha: al teclear, el
   número cambia sin empujar la etiqueta. */
.refresh-metric-value {
  flex: 0 0 auto;
  min-width: 6ch;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  transition: color var(--t-slow);
}
.refresh-metric-value.is-none  { color: var(--text-muted); }
.refresh-metric-value.is-below { color: var(--state-incomplete-fg); }
.refresh-metric-value.is-ok    { color: var(--state-complete-fg); }
.refresh-metric-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.refresh-metric-title {
  font-size: var(--fs-md); font-weight: 600; color: var(--text);
  cursor: help; width: fit-content;
}
.refresh-metric-sub { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.35; }
.refresh-metric-sub.is-below { color: var(--state-incomplete-fg); }

/* Pista 0–100 con relleno al % y marca vertical en el umbral. */
.refresh-metric-track {
  position: relative;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--border);
}
.refresh-metric-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0;
  border-radius: inherit;
  background: var(--border-strong);
  transition: width var(--t-slow), background-color var(--t-slow);
}
.refresh-metric-fill.is-below { background: var(--orange); }
.refresh-metric-fill.is-ok    { background: var(--green); }
.refresh-metric-tick {
  position: absolute; top: -5px; bottom: -5px;
  width: 2px; margin-left: -1px;
  border-radius: 1px;
  background: var(--text);
  opacity: 0.6;
  cursor: help;
}

.refresh-metric-foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
}
.refresh-metric-stats {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px var(--sp-2);
  font-size: var(--fs-sm); color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.refresh-metric-dot { color: var(--text-muted); }
.refresh-metric-ins { color: var(--state-complete-fg); font-weight: 600; }
.refresh-metric-del { color: #b3261e; font-weight: 600; }
.refresh-metric-flags { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); }
.chip.refresh-flag.is-on {
  background: var(--state-complete-bg);
  border-color: #b7e2c2;
  color: var(--state-complete-fg);
  font-weight: 500;
}

/* Conmutador segmentado Editar · Ver cambios · Ver original. El activo se
   invierte (negro), mismo lenguaje que .noticia-lang-btn.active. */
.refresh-view-switch {
  display: inline-flex; gap: 2px;
  margin-left: auto;
  padding: 3px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.refresh-view-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px;
  padding: 0 var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-soft);
  white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.refresh-view-btn:hover { background: var(--bg); color: var(--text); }
.refresh-view-btn.active,
.refresh-view-btn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-inv);
}
.refresh-view-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* ---------- Editor: líneas "Original: …" y acciones bajo los campos ---------- */
.refresh-counter-row { justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.refresh-counter-row .char-counter { margin-left: auto; flex: 0 0 auto; }
.refresh-orig-line {
  display: flex; align-items: baseline; gap: 6px;
  min-width: 0;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--text-muted);
}
.refresh-counter-row .refresh-orig-line { margin-top: 0; }
.refresh-orig-label { flex: 0 0 auto; font-weight: 600; color: var(--text-soft); }
.refresh-orig-text {
  min-width: 0; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.refresh-orig-line .change-link { flex: 0 0 auto; }
.refresh-restore-body { flex: 0 0 auto; }
.refresh-seo-note { margin: calc(-1 * var(--sp-1)) 0 var(--sp-3); font-size: var(--fs-sm); }
.refresh-lost-banner { line-height: 1.45; }

/* Chip "Exportada dd/mm/aaaa" de la cabecera. */
.chip.refresh-exported-chip {
  background: var(--state-shared-bg);
  border-color: #b9d9f7;
  color: var(--state-shared-fg);
  font-weight: 500;
  cursor: help;
}

/* ---------- Paneles de lectura (Ver cambios / Ver original) ----------
   Misma caja y misma tipografía que el área del editor (css/tiptap.css) para
   que los tres modos se lean como la misma página. */
.refresh-panel {
  min-height: 360px;
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
}
.refresh-panel-caption {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.refresh-panel-h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
}
.refresh-original-body { margin-top: var(--sp-5); }

/* Tipografía de lectura = .tt-editor .ProseMirror */
.refresh-prose {
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text);
  overflow-wrap: break-word;
}
.refresh-prose > * + * { margin-top: 0.75em; }
.refresh-prose h2 { font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 600; }
.refresh-prose h3 { font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 600; }
.refresh-prose p { margin: 0; }
.refresh-prose ul, .refresh-prose ol { margin: 0; padding-left: var(--sp-6); }
.refresh-prose li > p { margin: 0; }
.refresh-prose blockquote {
  margin: 0;
  border-left: 3px solid var(--border-strong);
  padding-left: var(--sp-4);
  color: var(--text-soft);
  font-style: italic;
}
.refresh-prose a { color: var(--state-shared-fg); text-decoration: underline; }
.refresh-prose img { max-width: 100%; height: auto; border-radius: var(--r-sm); cursor: zoom-in; }

/* ---------- Vista de cambios (diffView.js) ---------- */
.diff-view { display: flex; flex-direction: column; }
.diff-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.diff-legend { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--text-soft); }
.diff-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.diff-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.diff-swatch.is-ins { background: #dcfce7; box-shadow: inset 0 0 0 1px #86efac; }
.diff-swatch.is-del { background: #fee2e2; box-shadow: inset 0 0 0 1px #fca5a5; }
.diff-counts { font-size: var(--fs-sm); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.diff-count-ins { color: #166534; font-weight: 600; }
.diff-count-del { color: #991b1b; font-weight: 600; }
.diff-note { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }
.diff-note-block { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.diff-section-label {
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Titular: misma letra que el input del H1. */
.diff-h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text);
  overflow-wrap: anywhere;
}
.diff-h1.is-same { color: var(--text-soft); }
.diff-h1-note {
  margin-left: var(--sp-2);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-muted);
  vertical-align: middle;
}

/* Marcas en línea. El padding horizontal es mínimo y el vertical no altera la
   altura de línea: sin saltos de maquetación. */
.diff-ins, .diff-del {
  padding: 0.04em 0.16em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.diff-ins { background: #dcfce7; color: #166534; text-decoration: none; }
.diff-del {
  background: #fee2e2; color: #991b1b;
  text-decoration: line-through;
  text-decoration-color: rgba(153, 27, 27, 0.6);
  text-decoration-thickness: 1.5px;
}
/* ¶ = dos párrafos del original unidos en uno. */
.diff-pilcrow {
  display: inline-block;
  padding: 0 0.3em;
  border-radius: 3px;
  background: #fee2e2;
  color: #b91c1c;
  font-weight: 700;
  line-height: 1.2;
  cursor: help;
}

/* Párrafos: los que no cambian se atenúan un punto para que destaquen los
   cambios (contraste AA); nuevo/eliminado entero = barra lateral en el margen,
   sin desplazar el texto. */
.diff-body { margin-top: var(--sp-1); }
.diff-p { position: relative; }
.diff-p.is-same { color: var(--text-soft); }
.diff-p.is-new::before,
.diff-p.is-removed::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--sp-3));
  top: 0.3em; bottom: 0.3em;
  width: 3px;
  border-radius: 2px;
}
.diff-p.is-new::before { background: #4ade80; }
.diff-p.is-removed::before { background: #f87171; }

.diff-notice {
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  background: var(--bg-soft);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
}
.diff-notice + .diff-body { margin-top: var(--sp-4); }
.diff-notice-title { font-weight: 600; color: var(--text); }
.diff-notice-text { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.45; }

/* ---------- Card "Publicado en la web" (solo lectura) ---------- */
.card.refresh-pub-card { margin-top: var(--sp-5); }
.refresh-pub-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
.refresh-pub-grid.no-img { grid-template-columns: minmax(0, 1fr); }
.refresh-pub-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-hover);
  cursor: zoom-in;
}
.refresh-pub-info { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
.refresh-pub-title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.refresh-pub-meta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.refresh-pub-cat { max-width: 100%; }
.refresh-pub-note { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }

/* ---------- Navegador del aside ---------- */
.noticia-nav-chips .refresh-nav-pct { margin-left: auto; flex: 0 0 auto; }
.refresh-nav-missing {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--state-incomplete-bg);
  color: var(--state-incomplete-fg);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .refresh-pub-grid { grid-template-columns: 160px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .refresh-metric { padding: var(--sp-3) var(--sp-4); }
  .refresh-metric-value { font-size: 28px; }
  .refresh-view-switch { margin-left: 0; width: 100%; }
  .refresh-view-btn { flex: 1 1 0; }
  .refresh-panel { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
  .refresh-panel-h1, .diff-h1 { font-size: var(--fs-2xl); }
}
@media (max-width: 600px) {
  .refresh-pub-grid { grid-template-columns: minmax(0, 1fr); }
}