/* Integración: estilos propios de la pantalla (API keys y webhooks).
   Solo tokens de estilos.css. Prefijo .int- para no chocar con otras pantallas. */

/* Pestañas de entorno: un punto de color dice cuál mueve plata real */
.int-entornos { margin-bottom: var(--e-6); }
.int-entornos .pestana { font-size: var(--t-15); padding: 0 var(--e-4); }
.int-punto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--tope-ok); }
.int-punto--pruebas { background: var(--acento); }

/* Franja de estado de la conexión (4 celdas con separadores) */
.int-resumen { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
.int-resumen__celda { padding: var(--e-4) var(--e-5); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.int-resumen__celda + .int-resumen__celda { border-left: 1px solid var(--borde); }
.int-resumen__etiqueta { display: flex; align-items: center; gap: 6px; font-size: var(--t-13); font-weight: 500; color: var(--texto-2); }
.int-resumen__etiqueta .ico { color: var(--texto-3); }
.int-resumen__valor { font-family: var(--fuente-titulo); font-size: var(--t-24); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.int-resumen__valor small { font-family: var(--fuente-texto); font-size: var(--t-14); font-weight: 500; color: var(--texto-3); letter-spacing: 0; }
.int-resumen__nota { font-size: var(--t-13); color: var(--texto-3); }
.int-resumen .secreto { background: var(--superficie-2); }

/* Código de respuesta HTTP (texto + color; nunca solo color) */
.int-http { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fuente-mono); font-size: var(--t-13); font-weight: 500; color: var(--exito); }
.int-http::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.int-http--error { color: var(--peligro); }

/* Filas de API keys revocadas: se leen pero no compiten */
.tabla tr.int-fila-revocada td { color: var(--texto-3); }
.tabla tr.int-fila-revocada .celda-principal { color: var(--texto-2); text-decoration: line-through; text-decoration-color: var(--borde-fuerte); }
.int-ips { display: grid; gap: 2px; font-family: var(--fuente-mono); font-size: var(--t-13); }
.int-key { font-family: var(--fuente-mono); font-size: var(--t-13); color: var(--texto-2); }

/* Lista de eventos suscriptos: nombre técnico + qué significa */
.int-eventos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4) var(--e-6); }
.int-eventos__grupo { display: grid; gap: var(--e-3); align-content: start; min-width: 0; }
.int-eventos__titulo { font-size: var(--t-12); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.int-eventos .check { width: 100%; }
.int-eventos code { font-size: var(--t-13); }
.int-eventos .check__texto small { margin-top: 2px; }

/* Campo de solo lectura con acciones al costado (URL, secreto) */
.int-valor { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.int-valor .secreto { flex: 1; }

/* Clave o secreto que se muestra UNA sola vez: completa, grande y partible */
.int-clave { padding: var(--e-4); border: 1.5px dashed var(--primario); border-radius: var(--radio-3); background: var(--primario-suave); display: grid; gap: var(--e-3); }
.int-clave code { all: unset; font-family: var(--fuente-mono); font-size: var(--t-15); font-weight: 500; color: var(--texto); overflow-wrap: anywhere; word-break: break-all; line-height: 1.5; }
.int-clave .btn { justify-self: start; }

/* Pasos numerados (cómo verificar la firma) */
.int-pasos { list-style: none; margin: 0; padding: 0; counter-reset: int-paso; display: grid; gap: var(--e-4); }
.int-pasos li { counter-increment: int-paso; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--e-3); font-size: var(--t-14); color: var(--texto-2); }
.int-pasos li::before { content: counter(int-paso); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primario-suave); color: var(--primario-texto); font-weight: 700; font-size: var(--t-13); }
.int-pasos strong { color: var(--texto); display: block; }

/* Bloque de código con pestañas de lenguaje dentro de una tarjeta */
.int-snippet .pestanas__lista { margin: 0; padding: 0 var(--e-3); }
.int-snippet .codigo { border-radius: 0; border: 0; }
.int-snippet .codigo pre { max-height: 640px; }

/* Links a la documentación */
.int-docs { display: grid; gap: 2px; }
.int-docs a { display: flex; align-items: center; gap: var(--e-3); padding: 10px var(--e-3); margin: 0 calc(-1 * var(--e-3)); border-radius: var(--radio-2); color: var(--texto); text-decoration: none; min-height: 44px; }
.int-docs a:hover { background: var(--superficie-2); }
.int-docs a .ico { color: var(--primario-texto); }
.int-docs a span { flex: 1; min-width: 0; }
.int-docs a small { display: block; color: var(--texto-3); }
.int-docs a .int-docs__flecha { color: var(--texto-3); }

/* Drawer de una entrega */
.int-drawer-seccion + .int-drawer-seccion { margin-top: var(--e-6); }
.int-drawer-seccion > h3 { font-size: var(--t-14); margin-bottom: var(--e-3); }
.int-drawer .datos dd { overflow-wrap: anywhere; }
.int-drawer .codigo pre { white-space: pre; }

@media (max-width: 1023px) {
  .int-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .int-resumen__celda:nth-child(3) { border-left: 0; }
  .int-resumen__celda:nth-child(n+3) { border-top: 1px solid var(--borde); }
}

@media (max-width: 767px) {
  .int-eventos { grid-template-columns: minmax(0, 1fr); }
  .int-resumen__valor { font-size: var(--t-20); }
}

@media (max-width: 640px) {
  .int-resumen { grid-template-columns: minmax(0, 1fr); }
  .int-resumen__celda { padding: var(--e-3) var(--e-4); }
  .int-resumen__celda + .int-resumen__celda { border-left: 0; border-top: 1px solid var(--borde); }
  /* En modo tarjeta las IPs se alinean a la derecha como el resto de los valores */
  .tabla--tarjetas .int-ips { justify-items: end; }
}

/* Ajustes de tablas en modo tarjeta */
@media (max-width: 640px) {
  .tabla--tarjetas td.int-solo-escritorio { display: none; }
  .tabla--tarjetas td.tarjeta-titulo > span { display: grid; gap: 2px; }
}
@media (max-width: 640px) {
  .int-valor { flex-wrap: wrap; }
  .int-valor .secreto { flex: 1 1 100%; }
}


/* ===== Reglas de la cuenta para la API: IPs habilitadas y vigencia de los depósitos ===== */
.int-config { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; }
.int-config > .tarjeta { display: flex; flex-direction: column; min-width: 0; }
.int-config > .tarjeta > .tarjeta__cuerpo { flex: 1; }
.int-config__titulo { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.int-config__ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--radio-2); background: var(--primario-suave); color: var(--primario-texto); }
.int-habilitadas .tarjeta__cuerpo { gap: var(--e-3); }

/* Lista de IPs habilitadas: solo lectura, sin controles */
.int-habilitadas__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.int-habilitadas__ip { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: 10px var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio-2); background: var(--superficie-2); min-width: 0; }
.int-habilitadas__texto { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--e-3); min-width: 0; font-size: var(--t-14); color: var(--texto-2); }
.int-habilitadas__texto code { font-family: var(--fuente-mono); font-size: var(--t-14); font-weight: 500; color: var(--texto); background: none; border: 0; padding: 0; }
.int-habilitadas__ip > .estado { flex: none; }
.int-habilitadas__baja-estado { display: grid; justify-items: end; gap: 2px; text-align: right; flex: none; font-size: var(--t-12); color: var(--texto-3); }
.int-habilitadas__ip--baja { background: transparent; border-style: dashed; }
.int-habilitadas__ip--baja code { color: var(--texto-3); text-decoration: line-through; text-decoration-color: var(--borde-fuerte); }

/* ===== Webhook: acciones de estado en la cabecera de "Destino y firma" ===== */
.int-wh-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2); justify-content: flex-end; }
.int-wh-acciones > span { margin-right: var(--e-1); }
.int-wh-vacio { padding: var(--e-10) var(--e-6); }
.int-modal-icono--pausa { background: var(--neutro-fondo); color: var(--neutro); }
.int-modal-url { overflow-wrap: anywhere; }

/* Destinos por sucursal */
.int-suc-url { font-family: var(--fuente-mono); font-size: var(--t-13); color: var(--texto); background: none; border: 0; padding: 0; overflow-wrap: anywhere; word-break: break-all; }
.int-suc-botones { display: inline-flex; flex-wrap: nowrap; gap: var(--e-2); justify-content: flex-end; }
#tabla-wh-sucursales td[data-int-suc-url] { white-space: normal; min-width: 180px; }
.int-suc-url { display: block; white-space: normal; }

/* Aviso que quedó sin enviar por la pausa */
.tabla tr.int-fila-pausada td:first-child { box-shadow: inset 3px 0 0 var(--neutro); }

@media (max-width: 1023px) {
  .int-config { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .int-wh-acciones { justify-content: flex-start; width: 100%; }
  .tabla--tarjetas tr.int-fila-pausada { box-shadow: inset 3px 0 0 var(--neutro), var(--sombra-1); }
  .tabla--tarjetas tr.int-fila-pausada td:first-child { box-shadow: none; }
  #tabla-wh-sucursales td[data-int-suc-url] { max-width: none; }
  .tabla--tarjetas .int-suc-url { text-align: right; }
  .int-suc-botones { width: 100%; flex-wrap: wrap; }
  .int-suc-botones .btn { flex: 1; }
}