/* ============================================================
   verify-check.css — el tilde de verificación por campo
   (components/verify-check.js, 2026-08-31). Reusa tokens y el
   lenguaje visual de field-edit (`.fe-*`) — esto es SOLO lo
   exclusivo del control y su popover.
   ============================================================ */

/* Wrapper: separa el tilde del control de edición vecino (pencil/valor) sin agrandar la fila. */
.vc { display: inline-flex; align-items: center; margin-left: 4px; flex-shrink: 0; }

/* Botón: 18px, apagado por default (§4.1 nº2/nº8 — sin verificar NUNCA es un error, nunca rojo).
   El check queda dibujado siempre (mismo ícono, `currentColor`); solo cambia el color/fondo entre
   apagado e "on" — no se agrega ni se saca contenido, así el layout no salta al verificar. */
.vc-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 50%; padding: 0; margin: 0;
  border: 1px solid var(--border-strong); background: var(--surface); color: transparent;
  cursor: pointer;
}
.vc-btn:hover { background: var(--surface-2); }
.vc-btn:disabled { cursor: default; opacity: .6; }
.vc-btn.vc-on {
  background: var(--green-soft); border-color: var(--green-border); color: var(--green-text);
}
/* `valor_cambio` (backend, app/services/verificaciones.py): el dato cambió DESPUÉS de la firma —
   ámbar, nunca rojo (§4.1 nº4, no es una alerta crítica) ni verde (sería mentir, mismo criterio
   que el botón de WhatsApp con el número viejo). Pisa `.vc-on` por orden de cascada (va después). */
.vc-btn.vc-stale {
  background: var(--orange-soft); border-color: var(--orange-border); color: var(--orange-text);
}

/* Popover: `position: fixed` a propósito — el wrapper de la tabla de #/clientes tiene
   `overflow-x: auto` (recorta también el eje Y, ver comentario junto a `.table-wrap` en app.css);
   un popover `absolute` colgado de la celda quedaría cortado ahí. Mismo z-index que
   `.chart-tooltip` (tooltips flotantes de la app). */
.vc-pop {
  position: fixed; z-index: var(--z-tooltip);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  box-shadow: var(--sh-2); padding: 10px 12px; font-size: var(--fs-caption); max-width: 240px;
}
.vc-pop-who { font-weight: 600; color: var(--text-1); margin-bottom: 2px; }
.vc-pop-when { color: var(--text-3); }
/* Nota de "valor cambió" (ver `.vc-btn.vc-stale` arriba) — ámbar discreto, no un cartel de error. */
.vc-pop-stale-note { color: var(--orange-text); margin-top: 6px; }
.vc-pop-actions { margin-top: 8px; display: flex; justify-content: flex-end; gap: 10px; }
.vc-pop-remove {
  font: inherit; font-size: var(--fs-caption); color: var(--red-text);
  background: none; border: none; cursor: pointer; padding: 3px 4px; margin: -3px -4px;
}
.vc-pop-remove:hover { text-decoration: underline; }
.vc-pop-reverify {
  font: inherit; font-size: var(--fs-caption); font-weight: 600; color: var(--green-text);
  background: none; border: none; cursor: pointer; padding: 3px 4px; margin: -3px -4px;
}
.vc-pop-reverify:hover { text-decoration: underline; }

/* Blanco táctil ≥44px por pseudo-elemento (2026-08-28, mismo patrón que `.fe-pencil-btn`/
   `.lc-btn`) — nunca por padding: agrandar la caja real descolocaría filas de tabla densa. */
@media (pointer: coarse) {
  .vc-btn { position: relative; }
  .vc-btn::after {
    content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; height: 100%; min-width: 44px; min-height: 44px;
  }
}