/* ── Integraciones panel ─────────────────────────────────── */
.integ-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

.integ-section-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}

.integ-section-icon { font-size: 1.75rem; }

.integ-section-title { flex: 1; }
.integ-section-title h3 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.integ-section-title p  { margin: 0; font-size: .8rem; color: var(--muted); margin-top: .15rem; }

.integ-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .75rem;
  border-radius: 99px;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}
.integ-badge::before { content: '●'; font-size: .65rem; }
.integ-badge-inactive { background: #F3F4F6; color: #6B7280; }
.integ-badge-active   { background: #D1FAE5; color: #065F46; }
.integ-badge-pending  { background: #FEF3C7; color: #92400E; }
.integ-badge-error    { background: #FEE2E2; color: #991B1B; }

.integ-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem 1.25rem;
  margin-bottom: 1rem;
}

.integ-field { display: flex; flex-direction: column; gap: .3rem; }
.integ-field label { font-size: .85rem; font-weight: 500; }

.integ-input-wrap { position: relative; display: flex; }
.integ-input-wrap input { flex: 1; padding-right: 2.5rem; }
.integ-eye {
  position: absolute;
  right: .6rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 1rem;
  padding: 0;
  line-height: 1;
}

.integ-actions {
  display: flex;
  gap: .6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: .25rem;
}

.integ-hint {
  font-size: .78rem;
  color: var(--muted);
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
}
.integ-hint a { color: var(--accent); }

.integ-test-result {
  font-size: .82rem;
  padding: .4rem .75rem;
  border-radius: var(--radius);
  display: none;
}
.integ-test-result.ok    { background:#D1FAE5; color:#065F46; display:block; }
.integ-test-result.error { background:#FEE2E2; color:#991B1B; display:block; }

/* ── Tabla de proveedores ── */
.integ-providers-wrap { overflow-x: auto; }

.integ-providers-wrap table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.integ-providers-wrap th, .integ-providers-wrap td {
  padding: .55rem .75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.integ-providers-wrap th { font-weight: 600; color: var(--muted); font-size: .78rem; text-transform: uppercase; }

.integ-copy-url {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  color: var(--muted);
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .2rem .5rem;
  background: var(--bg);
}
.integ-copy-url:hover { color: var(--accent); border-color: var(--accent); }

/* ── Modal proveedor ── */
.integ-url-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .65rem 1rem;
  font-family: monospace;
  font-size: .82rem;
  word-break: break-all;
  margin-top: .5rem;
}