/* ============================================================
   duplicados.css — pestaña "Duplicados" de #/datos (2026-09-02).
   ------------------------------------------------------------
   Reusa a propósito clases YA EXISTENTES en app.css en vez de redefinirlas (§4.1 #13): el
   contenedor de la lista es `.group` (tarjeta iOS genérica) y cada grupo es un
   `.prob-cat-section` (mismo hairline/hover/padding de summary que usan las categorías de
   views/problemas.js y los disclosures de la ficha) con la clase propia `.dup-group` encima solo
   para lo que es exclusivo de acá: nombre tachado cuando el grupo queda resuelto, etc.
   `.opt`/`.opt-row`/`.opt-danger`/`.btn`/`.btn-danger`/`.chip` tampoco se tocan: vienen de
   app.css/ui.js, mismos controles que Reprogramar/Reasignar/Eliminar de la Agenda.
   ============================================================ */

.dup-box { display: flex; flex-direction: column; gap: var(--sp-4); }

/* ---- Resumen ---- */
.dup-summary { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.dup-summary-stat { font-size: var(--fs-sm); color: var(--text-2); }
.dup-summary-sep { color: var(--border-strong); }
.dup-summary-warn { font-size: var(--fs-sm); font-weight: 600; color: var(--orange-text); }

/* ---- Encabezado de grupo (summary del <details>) ---- */
.dup-group-meta { flex: 1 1 auto; min-width: 0; }
.dup-group-name {
  font-size: var(--fs-name); font-weight: 600; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dup-group-name.struck { text-decoration: line-through; color: var(--text-3); font-weight: 500; }
.dup-group-sub { font-size: var(--fs-caption); color: var(--text-3); margin-top: 2px; }

/* ---- Cuerpo ---- */
.dup-group-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }

/* ---- Tabla de comparación DESKTOP (≥900px, `.d-only`) — N cuentas, scroll horizontal si un
   grupo de 4+ no entra. En mobile (<900px) esto queda OCULTO por `.d-only` (app.css): la versión
   que se ve ahí es `.dup-cmp-mobile`/`.dup-cmp-card`, más abajo — nunca una tabla que hay que
   arrastrar de costado (misma lección que la curva de talles, CLAUDE.md §5 28/8: "una
   comparación que hay que arrastrar de costado no compara nada"). ---- */
.dup-cmp-wrap { overflow-x: auto; max-width: 100%; }
.dup-cmp { border-collapse: collapse; width: 100%; min-width: 420px; }
.dup-cmp-field {
  font-size: var(--fs-chip); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3); text-align: left; padding: var(--sp-1) var(--sp-2) var(--sp-1) 0;
  white-space: nowrap;
}
.dup-cmp th.dup-cmp-col {
  font-size: var(--fs-chip); font-weight: 700; color: var(--text-2); text-align: center;
  padding: var(--sp-2) var(--sp-2) var(--sp-1); border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--surface-2); max-width: 180px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.dup-cmp td.dup-cmp-col {
  text-align: center; padding: var(--sp-2); font-size: var(--fs-sm); color: var(--text-1);
  border-top: .5px solid var(--hairline);
}
.dup-cmp th.dup-cmp-col.winner, .dup-cmp td.dup-cmp-col.winner {
  background: var(--blue-soft); color: var(--blue-text);
}
.dup-cmp td.dup-cmp-col.winner { font-weight: 700; }

/* ---- Conflicto ("sin ganador claro") + selector de ganadora ---- */
.dup-conflict {
  font-size: var(--fs-sm); font-weight: 600; color: var(--orange-text);
  background: var(--orange-soft); border: 1px solid var(--orange-border); border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
}
.dup-winner-label {
  font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); margin-bottom: var(--sp-1);
}

/* ---- Comparación MOBILE (<900px, `.m-only`) — cada cuenta un bloque VERTICAL: nombre a ancho
   completo en su propio renglón (con `title`), debajo una fila etiqueta→valor por métrica. Sin
   scroll horizontal ninguno — `.dup-cmp-mobile` es `flex-direction: column`, no `row`. La
   sugerida lleva el MISMO azul que la columna ganadora de la tabla desktop (borde + fondo, no
   solo texto: a un vistazo tiene que leerse igual de "esto es lo que queda" en los dos formatos). */
.dup-cmp-mobile { display: flex; flex-direction: column; gap: var(--sp-2); }
.dup-cmp-card {
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--sp-3);
  background: var(--surface);
}
.dup-cmp-card.winner { border-color: var(--blue-border); background: var(--blue-soft); }
.dup-cmp-card-name {
  font-size: var(--fs-name); font-weight: 700; color: var(--text-1); margin-bottom: var(--sp-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dup-cmp-card.winner .dup-cmp-card-name { color: var(--blue-text); }
.dup-cmp-card-rows { display: flex; flex-direction: column; gap: 4px; }
.dup-cmp-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.dup-cmp-card-label { font-size: var(--fs-sm); color: var(--text-3); }
.dup-cmp-card-value { font-size: var(--fs-sm); font-weight: 600; color: var(--text-1); }

/* ---- Fila de cuenta "perdedora" ---- */
.dup-loser-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border-radius: var(--r-sm);
}
.dup-loser-name {
  flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* <900px: el nombre pasa a ocupar su propio renglón a ancho completo y el botón "Suprimir" baja
   debajo, alineado a la derecha — nunca ellipsis apretado al lado del botón (§4.1 nº12, "en una
   lista vertical el nombre va en su propio renglón a ancho completo"). Desktop no cambia (sigue
   siendo la fila `justify-content: space-between` de arriba). Mismo criterio se extiende acá
   abajo a `.dup-suprimida-row` (sección "Suprimidos"). */
@media (max-width: 899.98px) {
  .dup-loser-row { flex-direction: column; align-items: stretch; }
  .dup-loser-row .btn { align-self: flex-end; }
  .dup-suprimida-row { flex-direction: column; align-items: stretch; }
  .dup-suprimida-row .btn-revert { align-self: flex-end; }
}

/* ---- Sección "Suprimidos" (2026-09-02): colapsada por defecto (`<details>` sin `open`, mismo
   `.prob-cat-section`/`.prob-resolved-title` que agrupa por categoría en views/problemas.js — el
   hairline superior y el hover del summary vienen de ahí, §4.1 #13). UNA fila por CUENTA
   suprimida (no por grupo — Manzi tiene 3 en un solo grupo), con el nombre en su propio renglón
   arriba y la metadata ("suprimida a favor de… · fecha · por…") debajo — mismo patrón de dos
   líneas que `.prod-row`/`.prod-row-meta`. */
.dup-suprimidos-body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.dup-suprimida-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border-radius: var(--r-sm);
}
.dup-suprimida-text { flex: 1 1 auto; min-width: 0; }
.dup-suprimida-name {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dup-suprimida-meta { font-size: var(--fs-caption); color: var(--text-3); margin-top: 2px; }

/* ---- Confirmación inline (nunca modal — mismo patrón que Eliminar en la Agenda) ---- */
.dup-confirm {
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2);
}
.dup-confirm-q { font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.dup-confirm-q strong { font-weight: 700; }
.dup-confirm-btns { display: flex; gap: var(--sp-2); }
.motivo-input {
  width: 100%; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); font: var(--fs-sm)/1.4 var(--font); padding: var(--sp-2) var(--sp-3);
  color: var(--text-1); resize: vertical; min-height: 44px;
}

/* ---- Fila resuelta (suprimida, con Revertir) ---- */
.dup-resolved-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); background: var(--gray-soft); border-radius: var(--r-sm);
}
.dup-resolved-text { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); color: var(--text-2); }
.dup-resolved-text em { font-style: normal; font-weight: 700; color: var(--text-1); }
.btn-revert {
  flex: 0 0 auto; background: transparent; border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm);
  font-weight: 600; color: var(--blue-text); cursor: pointer; min-height: 32px;
}
.btn-revert:hover { background: var(--surface); }

@media (min-width: 900px) {
  .dup-cmp { min-width: 0; }
  .dup-cmp th.dup-cmp-col, .dup-cmp td.dup-cmp-col { max-width: 240px; }
}

/* ---- Botón de grupo "Unificar" (T5e, 2026-09-06) — arriba de las filas de perdedor, ancho
   completo en mobile (mismo `.btn`/`.btn-fill` de app.css, sin redefinir tamaño ni tap target:
   `.btn` ya trae `min-height: var(--touch)`). Deshabilitado con `title` cuando no hay ganador o el
   grupo ya está resuelto — nunca oculto (un control ausente no explica por qué). ---- */
.dup-unify-row { display: flex; }
.dup-unify-btn { width: 100%; }
@media (min-width: 500px) { .dup-unify-btn { width: auto; align-self: flex-start; } }

/* ---- Hoja compartida `COMPONENTS.unificarSheet` (embudo + esta pestaña). Reusa
   `.alta-payload`/`.altap-row`/`.alta-missing-list` de alta-odoo.css para las filas "campo: valor"
   y la lista con viñeta (§4.1 #13) — acá solo lo que no existía. ---- */
.unif-block {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-2);
  border-bottom: .5px solid var(--hairline);
}
.unif-block:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.unif-block-title { font-size: var(--fs-sm); color: var(--text-2); }
.unif-block-title strong {
  color: var(--text-1); font-weight: 700; max-width: 180px; display: inline-block;
  vertical-align: bottom; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.unif-section-label {
  font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3); margin-top: var(--sp-1);
}
.unif-empty { font-size: var(--fs-sm); color: var(--text-3); }
.unif-conserva { font-size: var(--fs-sm); color: var(--text-2); }