/* LatinosCPA — Kit de Seguimiento WhatsApp: estilos de la tarjeta.
 *
 * Archivo nuevo y aislado. Todos los selectores viven bajo `.wa-kit-card`, así
 * que no puede afectar a la interfaz de números de WhatsApp ya desplegada ni a
 * ninguna otra parte del panel. No se redefine ninguna clase existente.
 *
 * Responsive por construcción: una sola columna que fluye, sin anchos fijos ni
 * media queries que suponer. Contraste y foco visibles para teclado y lector
 * de pantalla.
 */

.wa-kit-card {
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
  background: #fff;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.wa-kit-title {
  font-size: 1rem;
  line-height: 1.3;
  margin: 0 0 4px;
  letter-spacing: .02em;
}

.wa-kit-meta {
  font-size: .85rem;
  color: #5b6470;
  margin: 0 0 10px;
}

.wa-kit-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 180px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 12px;
}

/* Las vistas previas se ocultan hasta que el promotor pulsa VISTA PREVIA:
   la tarjeta arranca compacta para no empujar el resto de la oferta. */
.wa-kit-preview {
  display: none;
  border-left: 3px solid #25d366;
  padding: 8px 12px;
  margin: 8px 0;
  background: #f6f8f9;
  border-radius: 0 8px 8px 0;
}

.wa-kit-expanded .wa-kit-preview { display: block; }

.wa-kit-preview-title {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #5b6470;
  margin: 0 0 6px;
}

.wa-kit-preview-header { font-weight: 600; margin: 0 0 4px; }

.wa-kit-preview-body {
  margin: 0 0 6px;
  white-space: pre-wrap;   /* los saltos de línea del mensaje son parte del mensaje */
  line-height: 1.45;
}

.wa-kit-preview-footer { font-size: .8rem; color: #5b6470; margin: 0; }

.wa-kit-preview-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.wa-kit-preview-button {
  border: 1px solid #25d366;
  color: #128c4a;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: .8rem;
}

.wa-kit-instructions { margin: 10px 0; }
.wa-kit-instructions summary { cursor: pointer; font-size: .9rem; }
.wa-kit-instructions p { margin: 8px 0 0; line-height: 1.5; }

.wa-kit-status { margin: 10px 0; font-size: .85rem; }
.wa-kit-number { margin: 0 0 4px; }

.wa-kit-warn { color: #8a6100; margin: 4px 0; }

.wa-kit-blocked {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff6e5;
  color: #7a5200;
  font-size: .85rem;
  line-height: 1.45;
}

.wa-kit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.wa-kit-btn { min-height: 44px; }   /* objetivo táctil cómodo en móvil */

/* Un botón deshabilitado tiene que PARECERLO, y su motivo llega por `title`
   y por el aviso con role="status", no sólo por el color. */
.wa-kit-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

.wa-kit-card :focus-visible {
  outline: 2px solid #128c4a;
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  .wa-kit-card { background: #161b22; border-color: rgba(255, 255, 255, .14); }
  .wa-kit-preview { background: #1c232c; }
  .wa-kit-meta, .wa-kit-preview-title, .wa-kit-preview-footer { color: #9aa4b2; }
  .wa-kit-blocked { background: #2a2313; color: #e0c88a; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-kit-card, .wa-kit-preview { transition: none; }
}