/* Refresh de noticias (proyectos tipo 'refresh', migración 0018).
   - Clases COMPARTIDAS (las usan también projects.js, clientDetail.js,
     projectMeta.js y el editor de refresh): .chip-tipo-refresh y
     .refresh-pct-badge (+ .is-none / .is-below / .is-ok).
   - Pantalla #/refresh/:id (views/refreshDetail.js): .rf-*
   - Picker de publicadas (components/publishedPicker.js): .pub-pick-*
   - Modal de export (components/refreshExportModal.js): .rfx-*
   El editor (#/refresh-noticia/:id) tiene su propia hoja: refresh-editor.css. */

/* Tono propio del refresh: verde azulado (teal). Distinto del verde de
   "completa", del azul de "compartido/proyecto", del violeta PEG y del
   amarillo PG; evoca "refrescar" sin competir con los estados. */
:root {
  --refresh-bg: #e4f4f1;
  --refresh-border: #a6d8ce;
  --refresh-fg: #0f6b62;
}

/* ---------------------------------------------------------------------------
   Compartidas
--------------------------------------------------------------------------- */

/* Chip del TIPO de proyecto: <span class="chip chip-tipo-refresh">[svg] Refresh</span>
   (cards de #/proyectos, ficha del cliente, fila FASE del proyecto). */
.chip-tipo-refresh {
  gap: 4px;
  background: var(--refresh-bg);
  border-color: var(--refresh-border);
  color: var(--refresh-fg);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.chip-tipo-refresh svg { flex: none; }

/* % de texto cambiado respecto al original (cambio_pct). Estado según el
   umbral de Ajustes (umbralState() de js/utils/refresh.js):
     .is-none  → 0 % (sin cambios todavía): gris
     .is-below → por debajo del umbral: ámbar
     .is-ok    → en el umbral o por encima (o sin umbral): verde */
.refresh-pct-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 1px 8px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--state-draft-bg);
  color: var(--state-draft-fg);
}
.refresh-pct-badge.is-none {
  background: var(--bg-soft);
  border-color: var(--border);
  color: var(--text-muted);
}
.refresh-pct-badge.is-below {
  background: var(--state-incomplete-bg);
  color: var(--state-incomplete-fg);
}
.refresh-pct-badge.is-ok {
  background: var(--state-complete-bg);
  color: var(--state-complete-fg);
}

/* ---------------------------------------------------------------------------
   #/refresh/:id — pantalla del proyecto de refresh
--------------------------------------------------------------------------- */

.rf-stats .refresh-pct-badge { margin-left: 2px; }

.rf-toolbar { margin-bottom: var(--sp-4); }
.rf-umbral-hint {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-left: var(--sp-2);
}
.rf-umbral-hint strong { color: var(--text-soft); font-weight: 600; }
/* Cliente no apto (multi-idioma, sin emp_id…): motivo visible, no solo en el
   title del botón deshabilitado (que no todos los navegadores muestran). */
.rf-ineligible {
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  background: var(--state-incomplete-bg);
  color: var(--state-incomplete-fg);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

/* Lista de una columna a todo el ancho, sin scroll propio (la página scrollea). */
.pub-list-compact.pub-list-full {
  max-height: none;
  overflow: hidden;
}

/* Fila: no se arrastra (no hay calendario) → cursor de enlace. */
.pub-list-item.rf-row { cursor: pointer; }
.pub-list-item.rf-row:active { cursor: pointer; }

/* Miniatura: <img> de la web del cliente (puede fallar → placeholder). */
.rf-thumb { overflow: hidden; }
.rf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rf-row-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.rf-row-title {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rf-row-title.missing { color: var(--text-muted); font-style: italic; }
.rf-row-orig {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rf-row-orig-label { font-weight: 600; }
.rf-row-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px var(--sp-2);
  font-size: var(--fs-xs);
  min-width: 0;
}
/* inline-block (no el inline-flex de .chip) para que la elipsis funcione. */
.rf-row-meta .chip { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.rf-row-meta .pub-list-state { margin-left: 0; }
.rf-row-dates { font-family: var(--font-mono); font-size: 11px; color: var(--text-soft); }

/* Columna del %: ancho fijo para que los badges queden alineados y la lista
   se lea de un vistazo como una columna de porcentajes. */
.rf-row-pct { flex: 0 0 auto; width: 84px; display: flex; justify-content: flex-end; }
.rf-row-pct .refresh-pct-badge { min-width: 64px; font-size: 12px; padding: 2px 10px; }

.rf-chip-exported {
  background: var(--state-shared-bg);
  border-color: transparent;
  color: var(--state-shared-fg);
  font-weight: 500;
}
.rf-chip-lost { cursor: help; }

/* Estado vacío del proyecto (sin noticias todavía). */
.rf-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-5);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--bg-soft);
}
.rf-empty-icon {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--refresh-bg);
  color: var(--refresh-fg);
}
.rf-empty h3 { margin: 0; }
.rf-empty p { max-width: 560px; color: var(--text-soft); line-height: 1.5; }

/* ---------------------------------------------------------------------------
   Picker "Añadir noticias publicadas" (modal xl)
--------------------------------------------------------------------------- */

/* El overlay de progreso se posiciona sobre el modal entero (cabecera y pie
   incluidos: mientras se copian las noticias no se puede cerrar). */
.pub-pick-modal { position: relative; }

.pub-pick { display: flex; flex-direction: column; gap: var(--sp-3); }

.pub-pick-filters {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.pub-pick-filter-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2) var(--sp-3);
}
.pub-pick-search { flex: 1 1 260px; min-width: 0; }
.pub-pick-search input { width: 100%; }
.pub-pick-select { width: auto; max-width: 260px; flex: 0 1 auto; }

.pub-pick-field { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pub-pick-label {
  font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.pub-pick-sep { color: var(--text-muted); }
.pub-pick-date {
  width: 142px;
  height: 32px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-sm);
}

/* Atajos de "Actualizada antes de" (hace 6 meses / 1 año / 2 años). */
.pub-pick-presets { display: inline-flex; gap: 4px; }
.pub-pick-preset {
  height: 26px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--text-soft);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.pub-pick-preset:hover { background: var(--bg-hover); color: var(--text); }
.pub-pick-preset.is-active {
  background: var(--accent); border-color: var(--accent); color: var(--accent-inv);
}

.pub-pick-hide { font-size: var(--fs-sm); padding: 3px var(--sp-3); }
.pub-pick-clear { margin-left: auto; }

/* Línea de recuento + acciones de selección. */
.pub-pick-count {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.pub-pick-count strong { color: var(--text); font-weight: 600; }
.pub-pick-selcount { color: var(--text); }
.pub-pick-actions { display: inline-flex; align-items: center; gap: var(--sp-2); }
.pub-pick-actions .change-link { font-size: var(--fs-sm); }
.pub-pick-actions .change-link:disabled {
  opacity: 0.45; cursor: default; text-decoration: none;
}
.pub-pick-actions .change-link:disabled:hover { color: var(--text-muted); }

/* Lista con scroll propio (root del render por lotes). */
.pub-pick-list {
  display: flex; flex-direction: column;
  max-height: min(55vh, calc(90vh - 330px));
  min-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
}
.pub-pick-row {
  display: grid;
  grid-template-columns: auto 44px minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  transition: background var(--t-fast);
}
.pub-pick-row:last-of-type { border-bottom: none; }
.pub-pick-row:hover { background: var(--bg-soft); }
.pub-pick-row.is-selected { background: #f3f8f7; }
.pub-pick-row.is-selected:hover { background: #eaf4f2; }
.pub-pick-row input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
/* Ya está en ESTE proyecto: visible (si no se ocultan) pero no seleccionable. */
.pub-pick-row.is-taken { cursor: default; }
.pub-pick-row.is-taken:hover { background: transparent; }
.pub-pick-row.is-taken .pub-pick-thumb,
.pub-pick-row.is-taken .pub-pick-main { opacity: 0.5; }
.pub-pick-row.is-taken input[type="checkbox"] { cursor: default; }

.pub-pick-thumb {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.pub-pick-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pub-pick-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pub-pick-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pub-pick-title mark {
  background: #fff1a8;
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
.pub-pick-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px var(--sp-2);
  font-size: var(--fs-xs);
  min-width: 0;
}
.pub-pick-meta .chip {
  display: inline-block; max-width: 180px;
  overflow: hidden; text-overflow: ellipsis;
  padding: 0 7px;
}
.pub-pick-nocat { color: var(--text-muted); font-style: italic; }
.pub-pick-date-txt { font-family: var(--font-mono); font-size: 11px; color: var(--text-soft); }

.pub-pick-state { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.pub-pick-open { width: 28px; height: 28px; border-color: transparent; color: var(--text-muted); }
.pub-pick-open:hover { color: var(--text); background: var(--bg-hover); }

.pub-pick-empty { padding: var(--sp-7) var(--sp-4); }
.pub-pick-empty p { max-width: 460px; line-height: 1.5; }

/* Pie del modal: ayuda a la izquierda, botones a la derecha. */
.pub-pick-foot-tip {
  margin-right: auto;
  align-self: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Overlay bloqueante mientras se copian las noticias (mismo lenguaje visual
   que el overlay del generador de imágenes IA). */
.pub-pick-overlay {
  position: absolute; inset: 0;
  z-index: 5;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: inherit;
  animation: fadeIn 120ms ease;
}
.pub-pick-progress {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.pub-pick-progress .spinner { width: 28px; height: 28px; }
.pub-pick-progress-title { font-weight: 600; font-size: var(--fs-md); line-height: 1.35; }
.pub-pick-progress-text { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.45; }
.pub-pick-progress-bar {
  width: 100%; height: 6px;
  border-radius: var(--r-pill);
  background: var(--bg-hover);
  overflow: hidden;
}
.pub-pick-progress-fill {
  display: block; height: 100%; width: 0;
  border-radius: inherit;
  background: var(--refresh-fg);
  transition: width var(--t-slow);
}
.pub-pick-progress-count {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}
.pub-pick-progress-count .is-error { color: var(--red); }

/* ---------------------------------------------------------------------------
   Modal "Exportar JSON de refresh"
--------------------------------------------------------------------------- */
.rfx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
/* Chip con el % dentro (badge encajado a la derecha del texto). */
.rfx-chip { gap: 6px; padding-right: 3px; }
.rfx-chip .refresh-pct-badge { padding: 0 7px; }
.rfx-note {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: 1.5;
}