.integration-shell { padding: 14px 18px 18px; }
.integration-intro { margin: 0 0 18px; color: #1f1f1f; font-size: 1rem; }
.integration-section-shell { margin: 0 0 20px; padding: 14px; border-radius: 14px; border: 1px solid #dce4ef; background: linear-gradient(180deg, #f8fbff, #ffffff); }
.integration-section-head { margin-bottom: 14px; }
.integration-section-head h2 { margin: 0 0 4px; color: #1f2f48; font-size: 1.15rem; }
.integration-section-head p { margin: 0; color: #50617a; font-size: .9rem; }
.integration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.integration-grid-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.integration-shell-cuentas .integration-grid,
.integration-shell-cuentas .integration-grid-featured { grid-template-columns: 1fr; }
.integration-card { border: 1px solid #aeb1b8; border-radius: 12px; background: #fff; overflow: hidden; }
.integration-grid .integration-card { display: flex; flex-direction: column; height: 100%; }
.integration-card-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px 18px; }
.integration-card-head-stack { align-items: flex-start; gap: 18px; }
.integration-card-featured { border-color: #c8d7ee; box-shadow: 0 18px 35px rgba(10, 76, 160, 0.08); }
.integration-card-body-featured { padding-bottom: 22px; }

.integration-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: #1f1f1f; font-size: 1.02rem; }
.integration-logo-wrap { display: flex; flex-direction: column; gap: 10px; }
.integration-logo-badge { width: 34px; height: 34px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; color: #fff; }

.integration-logo-badge.ml { width: 40px; height: 24px; border-radius: 999px; background: #f4db27; color: #1c3d8a; border: 1px solid #d1bf20; position: relative; font-size: .55rem; letter-spacing: -.02em; }
.integration-logo-badge.ml::before,
.integration-logo-badge.ml::after { content: ""; position: absolute; top: 8px; width: 10px; height: 6px; border: 2px solid #1c3d8a; border-top: none; border-radius: 0 0 8px 8px; }
.integration-logo-badge.ml::before { left: 7px; transform: rotate(18deg); }
.integration-logo-badge.ml::after { right: 7px; transform: rotate(-18deg); }

.integration-logo-badge.shopify { width: 22px; height: 26px; border-radius: 4px; background: #95bf47; position: relative; font-size: .82rem; font-weight: 900; }
.integration-logo-badge.shopify::before { content: ""; position: absolute; top: -4px; left: 5px; width: 10px; height: 7px; border: 2px solid #6d8e31; border-bottom: none; border-radius: 8px 8px 0 0; }

.integration-logo-badge.tiendanube { width: 28px; height: 18px; border: none; background: transparent; position: relative; }
.integration-logo-badge.tiendanube::before,
.integration-logo-badge.tiendanube::after { content: ""; position: absolute; top: 1px; width: 14px; height: 14px; border: 3px solid #23386f; border-radius: 50%; }
.integration-logo-badge.tiendanube::before { left: 0; }
.integration-logo-badge.tiendanube::after { right: 0; }

.integration-logo-badge.woocommerce { width: 32px; height: 20px; border-radius: 4px; background: #b85b9d; color: #fff; font-size: .58rem; font-weight: 900; letter-spacing: -.03em; }

.integration-logo-name { line-height: 1; }
.integration-logo-name small { display: block; font-size: .78rem; font-weight: 700; color: inherit; }
.integration-logo-name.upper small { font-size: .62rem; letter-spacing: .04em; }
.integration-store-chip { display: inline-flex; align-items: center; align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: #eef5ff; color: #0a4ca0; font-size: .78rem; font-weight: 700; }

.integration-status-banner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; margin-bottom: 18px; border-radius: 14px; border: 1px solid #f1d290; background: linear-gradient(135deg, #fff6dc, #fffdf5); }
.integration-status-banner.is-ready { border-color: #b8d4bd; background: linear-gradient(135deg, #eef8ef, #fcfffc); }
.integration-status-banner strong { display: block; margin-bottom: 4px; color: #1f1f1f; }
.integration-status-banner p { margin: 0; color: #454545; }
.integration-checklist { display: flex; gap: 10px; flex-wrap: wrap; }
.integration-check { padding: 7px 12px; border-radius: 999px; background: #f2ebe1; color: #7a5a08; font-size: .78rem; font-weight: 700; }
.integration-check.is-ok { background: #dff2e2; color: #1b6a2d; }

.integration-admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.integration-admin-group { margin: 0 0 16px; }
.integration-admin-group-head { margin: 0 0 10px; }
.integration-admin-group-head h3 { margin: 0 0 4px; color: #1f2f48; font-size: .98rem; }
.integration-admin-group-head p { margin: 0; color: #5b6f91; font-size: .82rem; }
.integration-admin-stats-store .integration-admin-semaforo { grid-column: span 2; }
.integration-admin-semaforo { grid-column: span 2; padding: 13px 14px; border-radius: 12px; border: 1px solid #d9e3f2; background: #fff; }
.integration-admin-semaforo-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.integration-admin-semaforo-kicker { display: block; color: #5b6f91; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.integration-admin-semaforo strong { display: block; font-size: 1.08rem; line-height: 1.1; }
.integration-admin-semaforo p { margin: 0; color: #3f4e63; font-size: .88rem; }
.integration-admin-semaforo small { display: block; margin-top: 8px; color: #5b6f91; font-size: .73rem; }
.integration-admin-semaforo-dot { width: 13px; height: 13px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04); }
.integration-admin-semaforo.is-verde { border-color: #cce7d4; background: linear-gradient(130deg, #f4fcf6, #ffffff); }
.integration-admin-semaforo.is-verde strong { color: #1f6d34; }
.integration-admin-semaforo.is-verde .integration-admin-semaforo-dot { background: #2f9a47; }
.integration-admin-semaforo.is-amarillo { border-color: #ecd7ac; background: linear-gradient(130deg, #fffaf0, #ffffff); }
.integration-admin-semaforo.is-amarillo strong { color: #8e620d; }
.integration-admin-semaforo.is-amarillo .integration-admin-semaforo-dot { background: #d7a135; }
.integration-admin-semaforo.is-rojo { border-color: #efc3bc; background: linear-gradient(130deg, #fff5f3, #ffffff); }
.integration-admin-semaforo.is-rojo strong { color: #9f3426; }
.integration-admin-semaforo.is-rojo .integration-admin-semaforo-dot { background: #d04b38; }
.integration-admin-stat-card { padding: 12px 14px; border-radius: 12px; border: 1px solid #d9e3f2; background: #fff; }
.integration-admin-stat-label { display: block; color: #5b6f91; font-size: .73rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.integration-admin-stat-card strong { display: block; color: #1d2d46; font-size: 1.3rem; line-height: 1; }
.integration-admin-stat-card small { display: block; margin-top: 6px; color: #6d7f98; font-size: .72rem; }

.integration-admin-trend { margin: 0 0 18px; border: 1px solid #d9e3f2; border-radius: 14px; background: #fff; padding: 14px 16px; }
.integration-admin-trend-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.integration-admin-trend-head strong { color: #1d2d46; }
.integration-admin-trend-head span { color: #5b6f91; font-size: .82rem; }
.integration-admin-trend-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: end; min-height: 130px; }
.integration-admin-trend-day { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.integration-admin-trend-bars { width: 100%; max-width: 46px; height: 100px; display: flex; align-items: flex-end; justify-content: center; gap: 5px; }
.integration-admin-trend-bars span { width: 14px; border-radius: 6px 6px 2px 2px; display: block; }
.integration-admin-trend-bars .bar-pending { background: #c88f35; }
.integration-admin-trend-bars .bar-processed { background: #2f7d46; }
.integration-admin-trend-label { color: #5a6a80; font-size: .76rem; }
.integration-admin-trend-legend { display: flex; gap: 14px; margin-top: 10px; color: #485462; font-size: .78rem; }
.integration-admin-trend-legend span { display: inline-flex; align-items: center; gap: 6px; }
.integration-admin-trend-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.integration-admin-trend-legend .legend-pending { background: #c88f35; }
.integration-admin-trend-legend .legend-processed { background: #2f7d46; }

.integration-filter-form { margin: 0 0 18px; }
.integration-filter-form label { display: inline-flex; flex-direction: column; gap: 6px; color: #2b2b2b; font-weight: 700; }
.integration-filter-form select { min-width: 280px; padding: 10px 12px; border: 1px solid #ccd3de; border-radius: 10px; background: #fff; color: #1f1f1f; }

.integration-connection-badge { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; font-size: .76rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.integration-connection-badge.is-connected { background: #dff2e2; color: #1b6a2d; }
.integration-connection-badge.is-disconnected { background: #f4e4e2; color: #8d3c2f; }

.integration-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.integration-meta-item { padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid #dde5f0; }
.integration-meta-label { display: block; margin-bottom: 7px; font-size: .74rem; font-weight: 800; color: #58709a; text-transform: uppercase; letter-spacing: .04em; }
.integration-meta-item strong { color: #1c2530; font-size: .95rem; }

.integration-description-block { margin-bottom: 20px; color: #2d2d2d; }
.integration-description-block p { margin: 0 0 10px; }
.integration-inline-warning { padding: 10px 12px; border-radius: 10px; background: #fff0ec; color: #964531; }

.integration-recent-orders { border-top: 1px solid #dde5f0; padding-top: 18px; }
.integration-recent-webhooks { margin-top: 18px; }
.integration-recent-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.integration-recent-head h2 { margin: 0; font-size: 1rem; color: #1c2530; }
.integration-recent-table-wrap { overflow-x: auto; }
.integration-recent-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.integration-recent-table th,
.integration-recent-table td { padding: 10px 12px; border-bottom: 1px solid #e7edf5; text-align: left; vertical-align: top; }
.integration-recent-table th { color: #5a6a80; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.integration-recent-table td.is-ok { color: #216d35; }
.integration-recent-table td.is-error { color: #a34433; }

/* Shared action buttons (also used in deposito) */
.connect-store-btn,
.guide-btn,
.new-location-btn { border: 1px solid #0a4ca0; border-radius: 999px; background: #fff; color: #0a4ca0; font-weight: 700; }
.connect-store-btn { min-width: 116px; padding: 5px 12px; font-size: .8rem; line-height: 1; }
.connect-store-btn span,
.new-location-btn span { margin-right: 6px; font-weight: 800; }
.connect-store-btn-primary { background: #0a4ca0; color: #fff; }
.connect-store-btn-warning { border-color: #b07a00; color: #7f5600; }
.connect-store-btn-danger { border-color: #b34433; color: #b34433; }
.connect-store-btn.is-disabled,
.guide-btn.is-disabled { border-color: #c6ccd6; background: #f3f4f7; color: #7b8596; cursor: not-allowed; }
.guide-link-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

.integration-card-body { min-height: 90px; padding: 18px 24px 26px; background: #f2f2f3; color: #2a2a2a; font-size: .91rem; line-height: 1.32; }
.integration-card-body { flex: 1; }
.integration-card.compact .integration-card-body { min-height: 90px; display: flex; align-items: center; }
.integration-card-footer { padding: 16px 24px; display: flex; justify-content: center; background: #fff; }
.integration-actions-footer { justify-content: flex-start; gap: 12px; flex-wrap: wrap; }
.integration-actions-footer form { margin: 0; }
.guide-btn { min-width: 200px; padding: 5px 16px; font-size: .8rem; line-height: 1; }
.new-location-btn { padding: 7px 16px; font-size: .98rem; margin-bottom: 16px; }

@media (max-width: 1080px) {
	.integration-grid-featured { grid-template-columns: 1fr; }
	.integration-admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.integration-admin-semaforo { grid-column: span 2; }
	.integration-admin-trend-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.integration-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.integration-grid { grid-template-columns: 1fr; }
	.integration-admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.integration-admin-semaforo { grid-column: span 2; }
	.integration-admin-trend-head { flex-direction: column; align-items: flex-start; }
	.integration-admin-trend-grid { gap: 6px; }
	.integration-admin-trend-bars { max-width: 38px; }
	.integration-status-banner,
	.integration-recent-head,
	.integration-card-head { flex-direction: column; align-items: flex-start; }
	.integration-meta-grid { grid-template-columns: 1fr; }
	.integration-filter-form label,
	.integration-filter-form select { width: 100%; }
	.integration-card-footer,
	.integration-actions-footer { align-items: stretch; }
	.connect-store-btn,
	.guide-btn,
	.guide-link-btn { width: 100%; }
}