/* ==========================================================================
   LeadSync — Configuración > Integraciones (items A62 y B117)

   El DISEÑO es de esta hoja y la interacción de integraciones.js: el JS no busca por clases,
   busca por `data-*`. Todos los colores salen de los tokens (claro y oscuro); ninguno se
   escribe aquí. Nada se comunica SOLO con color: cada estado lleva su texto.
   ========================================================================== */

/* La ventana de alta y la del token: algo más ancha que una normal, por las opciones con
   explicación debajo. En móvil ocupa el ancho que le da la modal. */
.int-modal { width: 520px; max-width: calc(100vw - 32px); }

/* --- La lista ------------------------------------------------------------ */
.int-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-panel);
  padding: 16px;
  margin-bottom: 12px;
}
.int-card-revocada { opacity: .75; }
.int-card-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.int-nombre {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.int-estado-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 9999px;
  border: 1px solid var(--border-strong);
  font-size: 12px;
  color: var(--text);
}
.int-estado-pill .ic { width: 12px; height: 12px; }
.int-activa { border-color: var(--accent); }
.int-revocada { color: var(--text-dim); }

.int-datos {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 0 0 12px;
  font-size: 13px;
}
.int-datos dt { color: var(--text-dim); }
.int-datos dd { margin: 0; color: var(--text); min-width: 0; overflow-wrap: anywhere; }

.int-chip {
  display: inline-block;
  padding: 2px 8px;
  margin: 0 4px 4px 0;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  font-size: 12px;
  color: var(--text);
}
/* MARKETING y «todas» se marcan con el color de advertencia Y con el texto de su nombre. */
.int-chip-riesgo { background: var(--warn-bg); border-color: var(--warn); }

.int-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.int-acciones .modal-btn { display: inline-flex; align-items: center; gap: 6px; }
.int-acciones .ic { width: 14px; height: 14px; }

/* --- Aviso del desenlace a… (item B123) --- */
.int-aviso-bloque {
  /* Margen inferior: sin él, la fila del campo quedaba pegada a «Últimas llamadas» y
     «Revocar», y parecían botones del mismo campo. */
  margin: 12px 0 16px;
  padding: 10px 0 14px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.int-aviso-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.int-aviso-fila {
  display: flex;
  align-items: center;
  gap: 8px;
}
.int-aviso-url {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg-elev);
  color: var(--text);
  font-size: 13px;
  transition: border-color 150ms ease;
}
.int-aviso-url:focus {
  border-color: var(--accent);
  outline: none;
}
.int-explicacion-aviso {
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-dim);
}
.int-explicacion-aviso code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 1px 4px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
}

/* Estados vacío y de error: explican y llevan su salida. */
.int-vacio {
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  color: var(--text);
}
.int-vacio p { margin: 0 0 8px; }
.int-vacio .modal-btn { display: inline-flex; align-items: center; gap: 6px; }
.int-vacio .ic { width: 14px; height: 14px; }
.int-estado { padding: 12px 0; }

/* --- Últimas llamadas ---------------------------------------------------- */
.int-llamadas {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
/* El registro es LA TABLA (components/tabla.css); aquí solo los anchos y los colores suyos. */
.int-llamadas-tabla { margin-top: 8px; }
/* Cabe en la tarjeta de la credencial dentro de Configuración (~540 px); por debajo, la caja
   scrollea de lado, que es para lo que está. */
.int-tabla { min-width: 500px; }
.int-col-hora { width: 7.5rem; }
.int-col-op { width: 8rem; }
.int-col-ms { width: 6.5rem; }
.int-tabla td { white-space: normal; }
.int-td-ms { text-align: right; }
.int-ll-hora { color: var(--text-dim); }
.int-res { color: var(--text); overflow-wrap: anywhere; }
.int-res-ok::before { content: "\2713\00a0"; }
.int-res-mal::before { content: "\2715\00a0"; }
.int-res-mal { font-weight: 600; }
.int-ll-ms { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.int-ll-ref { color: var(--text-dim); overflow-wrap: anywhere; }
.int-sin-llamadas { color: var(--text-dim); margin: 8px 0 0; }

@media (max-width: 600px) {
  .int-datos { grid-template-columns: 1fr; gap: 2px 0; }
  .int-datos dd { margin-bottom: 8px; }
  .int-aviso-fila { flex-wrap: wrap; }
  .int-aviso-url { width: 100%; flex: 1 1 100%; }
}

/* --- El formulario de alta ------------------------------------------------ */
.int-permiso {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
}
.int-permiso .ic { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: var(--accent); }

.int-grupo {
  border: 0;
  padding: 0;
  margin: 0 0 20px;
  min-width: 0;
}
.int-grupo legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}
.int-opcion,
.int-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.45;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.int-opcion:hover,
.int-check:hover { background: var(--bg-hover); }
.int-opcion input,
.int-check input { margin-top: 2px; flex: 0 0 auto; }
.int-opcion b { color: var(--text); }
.int-opcion span { color: var(--text-dim); }
.int-check span { color: var(--text); }
/* Las casillas de categorías cuelgan de «Elegir categorías», con sangría. */
.int-cats { margin: 0 0 6px 24px; }

/* LA ADVERTENCIA VA EN EL FORMULARIO, visible, con icono y texto: no es un tooltip ni depende
   del color. Aparece con una animación de entrada. */
.int-riesgo {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--warn);
  border-radius: 8px;
  background: var(--warn-bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}
.int-riesgo-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.int-riesgo-titulo .ic { width: 16px; height: 16px; flex: 0 0 auto; color: var(--warn); }
.int-riesgo ul { margin: 0; padding-left: 20px; }
.int-riesgo li { margin-bottom: 4px; }

/* --- El token ------------------------------------------------------------- */
.int-token {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg-elev);
}
.int-token code {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--text);
  overflow-wrap: anywhere;
  user-select: all;
}
.int-token .modal-btn { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.int-token .ic { width: 14px; height: 14px; }
.int-aviso {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--warn);
  border-radius: 8px;
  background: var(--warn-bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}
.int-aviso .ic { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: var(--warn); }

/* --- Movimiento ------------------------------------------------------------
   Lo que aparece entra con una ANIMACIÓN CSS (nunca una transición disparada desde
   requestAnimationFrame: si el rAF no corre, el elemento se queda en opacity 0). Sin
   `fill-mode`, termina siempre en el estado natural. La quita animarUnaVez al acabar.
   La salida sí lleva `forwards`: el elemento se BORRA justo después, así que no queda nada
   al que se le pegue. */
.int-entra { animation: intEntra 180ms ease-out; }
@keyframes intEntra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.int-sale { animation: intSale 150ms ease-in forwards; }
@keyframes intSale {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(6px); }
}
.int-cambiada { animation: intCambiada 520ms ease-out; }
@keyframes intCambiada {
  0%   { background: var(--info-bg); border-color: var(--info-border); }
  100% { background: var(--bg-panel); border-color: var(--border); }
}
@media (prefers-reduced-motion: reduce) {
  .int-entra,
  .int-sale,
  .int-cambiada { animation: none; }
  .int-opcion,
  .int-check,
  .int-aviso-url { transition: none; }
}