/* MascotaQR — Panel de afiliados */
.wrp-dashboard {
	--wrp-ink: #14213d;
	--wrp-muted: #667085;
	--wrp-border: #e8ecf2;
	--wrp-surface: #ffffff;
	--wrp-soft: #f7f9fc;
	max-width: 1040px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--wrp-ink);
}

.wrp-dashboard * { box-sizing: border-box; }

.wrp-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 30px 32px;
	margin-bottom: 26px;
	border: 1px solid #dfe6f0;
	border-radius: 22px;
	background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
	box-shadow: 0 12px 32px rgba(20, 33, 61, .06);
}

.wrp-eyebrow, .wrp-section-kicker {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #315ca8;
}

.wrp-dot { width: 7px; height: 7px; border-radius: 50%; background: #22a06b; box-shadow: 0 0 0 4px rgba(34,160,107,.12); }

.wrp-hero h2 { margin: 8px 0 6px; font-size: clamp(1.7rem, 3vw, 2.25rem); line-height: 1.1; letter-spacing: -.035em; }
.wrp-hero p { max-width: 680px; margin: 0; color: #536176; font-size: .98rem; line-height: 1.65; }
.wrp-hero-badge { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; padding: 12px 15px; background: rgba(255,255,255,.86); border: 1px solid rgba(49,92,168,.12); border-radius: 14px; }
.wrp-hero-badge-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #315ca8; color: #fff; font-weight: 800; }
.wrp-hero-badge strong { display:block; font-size: 1.05rem; }
.wrp-hero-badge small { display:block; margin-top: 1px; color: #7a8495; }

.wrp-section-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:12px; }
.wrp-section-heading-spaced { margin-top: 30px; }
.wrp-section-heading h3, .wrp-table-heading h3 { margin: 3px 0 0; font-size: 1.15rem; letter-spacing: -.015em; }
.wrp-period, .wrp-section-note { color:#8a94a6; font-size:.78rem; }

.wrp-cards { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin:0 0 4px; }
.wrp-card { grid-column:span 2; min-height:145px; border-radius:17px; padding:19px; display:flex; flex-direction:column; justify-content:space-between; gap:10px; overflow:hidden; position:relative; box-shadow:0 7px 20px rgba(20,33,61,.06); }
.wrp-card-featured { background:linear-gradient(135deg,#147d52,#0f6b45); color:#fff; }
.wrp-card-blue { background:linear-gradient(135deg,#315ca8,#244b90); color:#fff; }
.wrp-card-purple { background:linear-gradient(135deg,#6b4db4,#563a98); color:#fff; }
.wrp-card-secondary { background:var(--wrp-surface); border:1px solid var(--wrp-border); color:var(--wrp-ink); box-shadow:none; }
.wrp-card-top { display:flex; align-items:center; gap:9px; }
.wrp-card-icon { display:grid; place-items:center; width:29px; height:29px; border-radius:9px; background:rgba(255,255,255,.16); font-size:.9rem; font-weight:800; }
.wrp-card-secondary .wrp-card-icon { background:#f0f4f9; color:#315ca8; }
.wrp-card-label { font-size:.76rem; font-weight:700; opacity:.9; }
.wrp-card-value { font-size:1.65rem; font-weight:800; line-height:1.1; letter-spacing:-.03em; }
.wrp-card-meta { font-size:.72rem; opacity:.75; }

.wrp-link-box, .wrp-withdraw-box, .wrp-table-box {
	background:var(--wrp-surface); border:1px solid var(--wrp-border); border-radius:17px; padding:22px; margin-bottom:22px; box-shadow:0 5px 18px rgba(20,33,61,.035);
}
.wrp-box-title { display:flex; align-items:center; gap:11px; margin-bottom:15px; }
.wrp-box-title strong { display:block; font-size:.95rem; }
.wrp-box-title small { display:block; color:#7b8698; font-size:.76rem; margin-top:2px; line-height:1.45; }
.wrp-box-icon { display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; border-radius:11px; background:#eef4ff; color:#315ca8; font-weight:800; }

.wrp-link-row { display:flex; gap:8px; }
.wrp-link-row input { flex:1; min-width:0; padding:12px 13px; border-radius:10px; border:1px solid #d9e0ea; background:#f8fafc; color:#344054; font-size:.88rem; outline:none; }
.wrp-link-row input:focus { border-color:#7d9fd8; box-shadow:0 0 0 3px rgba(49,92,168,.10); }
.wrp-btn { background:#172033; color:#fff; border:0; border-radius:10px; padding:11px 17px; font-weight:700; cursor:pointer; font-size:.84rem; transition:transform .15s ease, opacity .15s ease, box-shadow .15s ease; }
.wrp-btn:hover { opacity:.92; transform:translateY(-1px); box-shadow:0 5px 12px rgba(23,32,51,.14); }
.wrp-btn:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

.wrp-customize-row, .wrp-qr-row { margin-top:12px; padding-top:12px; border-top:1px solid #eef1f5; }
.wrp-customize-toggle { color:#315ca8; font-size:.8rem; font-weight:700; cursor:pointer; text-decoration:none; }
.wrp-customize-toggle:hover { text-decoration:underline; }
.wrp-code-form { margin-top:12px; }
.wrp-code-form > label { display:block; margin-bottom:7px; color:#667085; font-size:.76rem; }
.wrp-code-prefix { display:flex; align-items:center; background:#f1f4f8; border:1px solid #d9e0ea; border-right:0; border-radius:10px 0 0 10px; padding:0 10px; font-size:.76rem; color:#7a8495; white-space:nowrap; }
.wrp-code-form .wrp-link-row input { border-radius:0; border-left:0; }
.wrp-code-form .wrp-btn { border-radius:0 10px 10px 0; }
.wrp-code-status { display:block; margin-top:7px; font-size:.78rem; font-weight:700; }
.wrp-code-status.success { color:#16794b; } .wrp-code-status.error { color:#b42318; }

.wrp-qr-box { margin-top:12px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; background:var(--wrp-soft); border:1px solid var(--wrp-border); border-radius:13px; padding:16px; }
.wrp-qr-image { width:140px; height:140px; border-radius:10px; background:#fff; border:1px solid var(--wrp-border); padding:7px; }
.wrp-qr-hint { margin:0 0 10px; font-size:.8rem; color:#667085; max-width:300px; line-height:1.5; }
.wrp-qr-download-btn { display:inline-block; text-decoration:none; background:#315ca8; }

.wrp-wallet-note { color:#596579; font-size:.86rem; line-height:1.65; margin:0; }
.wrp-wallet-note strong { color:#27364f; }

.wrp-table-heading { margin-bottom:14px; }
.wrp-table { width:100%; border-collapse:separate; border-spacing:0; font-size:.81rem; }
.wrp-table th, .wrp-table td { text-align:left; padding:12px 10px; border-bottom:1px solid #eef1f5; white-space:nowrap; }
.wrp-table th { color:#7a8495; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; font-weight:800; background:#fafbfd; }
.wrp-table th:first-child { border-radius:9px 0 0 9px; } .wrp-table th:last-child { border-radius:0 9px 9px 0; }
.wrp-table tbody tr:last-child td { border-bottom:0; }
.wrp-table tbody tr:hover td { background:#fbfcfe; }
.wrp-status { display:inline-flex; align-items:center; padding:4px 9px; border-radius:999px; font-size:.7rem; font-weight:800; }
.wrp-status-available, .wrp-status-paid { background:#e7f7ef; color:#147a4b; }
.wrp-status-pending { background:#fff4d6; color:#9a6700; }
.wrp-status-approved { background:#e8f0ff; color:#315ca8; }
.wrp-status-cancelled, .wrp-status-rejected { background:#fdecec; color:#b42318; }

.wrp-login-msg { padding:24px; background:#f7f9fc; border:1px solid var(--wrp-border); border-radius:14px; text-align:center; }
.wrp-sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

@media (max-width: 800px) {
	.wrp-cards { grid-template-columns:repeat(2,1fr); }
	.wrp-card { grid-column:span 1; }
}
@media (max-width: 600px) {
	.wrp-hero { align-items:flex-start; flex-direction:column; padding:23px 20px; border-radius:18px; }
	.wrp-hero-badge { width:100%; }
	.wrp-cards { grid-template-columns:1fr; }
	.wrp-card { grid-column:span 1; min-height:125px; }
	.wrp-link-row { flex-direction:column; }
	.wrp-code-prefix { border-right:1px solid #d9e0ea; border-radius:10px 10px 0 0; min-height:40px; }
	.wrp-code-form .wrp-link-row input { border-left:1px solid #d9e0ea; border-radius:0; }
	.wrp-code-form .wrp-btn { border-radius:0 0 10px 10px; }
	.wrp-table-box { overflow-x:auto; }
	.wrp-table { min-width:620px; }
}