.config-layout { max-width: 1180px; margin: 0 auto; padding: 42px 24px 70px; display: block; background: var(--color-background); color: var(--color-on-background); }
.config-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:28px; } .config-kicker,.summary-label { color:var(--color-blue); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .config-heading h1 { margin:7px 0 4px; font:800 clamp(28px,4vw,40px) Montserrat,sans-serif; color:var(--color-ink); } .config-heading p { margin:0; color:var(--color-muted); font-size:14px; } .config-status { display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid #bbf7d0; border-radius:999px; background:#ecfdf5; color:#08783c; font-size:11px; font-weight:700; } .config-status i { width:8px; height:8px; border-radius:50%; background:#10b981; }
.config-workspace { display:grid; grid-template-columns:245px 1fr; gap:28px; align-items:start; } .config-sidebar { gap:7px; } .config-tab { width:100%; padding:13px 14px; border:1px solid transparent; border-radius:13px; background:transparent; color:var(--color-muted); text-align:left; font-size:14px; cursor:pointer; display:flex; align-items:center; gap:11px; transition:.2s; } .config-tab .material-symbols-outlined { font-size:20px; } .config-tab b { margin-left:auto; opacity:0; font-size:20px; } .config-tab:hover { background:var(--color-surface); color:var(--color-blue); } .config-tab.active { border-color:#bfd8f2; background:#eef6ff; color:var(--color-blue); font-weight:800; box-shadow:0 4px 12px #005bb114; } .config-tab.active b { opacity:1; }
.config-promo { margin-top:18px; padding:18px; border-radius:18px; color:#fff; background:linear-gradient(145deg,#005bb1,#2b7bde); box-shadow:0 12px 24px #005bb133; } .config-promo .material-symbols-outlined { font-size:28px; } .config-promo strong { display:block; margin-top:12px; font:700 18px Montserrat,sans-serif; } .config-promo p { color:#dbeafe; font-size:12px; line-height:1.5; } .config-promo button { border:1px solid #ffffff55; border-radius:9px; padding:8px 10px; color:#fff; background:#ffffff1c; font-size:11px; font-weight:700; cursor:pointer; }
.config-panel { display:none; padding:28px; border:1px solid var(--color-line); border-radius:22px; background:var(--color-bg-body); box-shadow:0 12px 28px #1a1c1e0a; } .config-panel.active { display:block; } .panel-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:20px; margin-bottom:22px; border-bottom:1px solid var(--color-line); } .panel-heading > div:first-child { display:flex; align-items:center; gap:12px; } .panel-heading h2 { margin:0; color:var(--color-ink); font:700 23px Montserrat,sans-serif; } .panel-heading p { margin:4px 0 0; color:var(--color-muted); font-size:12px; } .panel-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; } .panel-icon.blue { color:var(--color-blue); background:#d6e3ff; } .panel-icon.pink { color:#b60078; background:#ffd8e7; } .panel-icon.gold { color:#954500; background:#ffdbc8; } .verified-label,.security-badge { display:inline-flex; align-items:center; gap:4px; padding:6px 9px; border-radius:999px; color:#08783c; background:#dcfce7; font-size:10px; font-weight:800; } .verified-label .material-symbols-outlined { font-size:14px; } .security-badge { color:var(--color-blue); background:#d6e3ff; } .gold-badge { color:#8a5b00; background:#fff0c2; }
.settings-form { display:grid; gap:20px; } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .form-group { margin:0; } .form-group label { display:grid; gap:7px; color:var(--color-ink); font-size:12px; font-weight:700; } .form-group input { width:100%; padding:12px 14px; border:1px solid var(--color-line); border-radius:11px; background:var(--color-surface); color:var(--color-ink); font-size:14px; } .form-group input:focus { outline:0; border-color:var(--color-blue); box-shadow:0 0 0 3px #005bb114; background:#fff; } .form-actions { display:flex; align-items:center; justify-content:space-between; gap:15px; padding-top:18px; border-top:1px solid var(--color-line); color:var(--color-muted); font-size:11px; } .primary-action,.secondary-action,.danger-action { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:0; border-radius:10px; padding:11px 15px; cursor:pointer; font-size:12px; font-weight:800; } .primary-action { color:#fff; background:var(--color-blue); box-shadow:0 5px 14px #005bb133; } .secondary-action { color:var(--color-blue); background:#eef6ff; } .form-message { min-height:18px; margin:0; font-size:12px; font-weight:700; } .password-rules { display:flex; flex-wrap:wrap; gap:8px; } .password-rules span { padding:6px 9px; border-radius:7px; color:var(--color-muted); background:var(--color-surface); font-size:10px; }
.form-section-title { display:flex; align-items:center; gap:10px; padding-top:2px; color:var(--color-blue); } .form-section-title > span { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#d6e3ff; } .form-section-title strong,.form-section-title small { display:block; } .form-section-title strong { color:var(--color-ink); font-size:14px; } .form-section-title small { margin-top:3px; color:var(--color-muted); font-size:11px; } .address-title { padding-top:20px; border-top:1px solid var(--color-line); } .form-wide { grid-column:1 / -1; }
.danger-zone { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:26px; padding:17px; border:1px solid #fecaca; border-radius:13px; background:#fff7f7; } .danger-zone strong { color:#991b1b; font-size:13px; } .danger-zone p { margin:4px 0 0; color:var(--color-muted); font-size:11px; } .danger-action { color:#fff; background:#ba1a1a; }
.appearance-option { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px; margin-bottom:13px; border:1px solid var(--color-line); border-radius:15px; background:var(--color-surface); } .appearance-option strong { color:var(--color-ink); font-size:14px; } .appearance-option p { margin:5px 0 0; color:var(--color-muted); font-size:12px; } .appearance-value { color:var(--color-blue); font-size:12px; font-weight:800; } .switch { position:relative; display:inline-block; width:50px; height:28px; flex:0 0 auto; } .switch input { opacity:0; width:0; height:0; } .slider { position:absolute; inset:0; border-radius:34px; background:var(--color-line); cursor:pointer; transition:.3s; } .slider:before { position:absolute; content:""; width:20px; height:20px; left:4px; bottom:4px; border-radius:50%; background:#fff; transition:.3s; } .switch input:checked + .slider { background:var(--color-blue); } .switch input:checked + .slider:before { transform:translateX(22px); }
.theme-choices { display:flex; flex-wrap:wrap; gap:7px; }
.theme-choices label { display:flex; align-items:center; gap:5px; padding:8px 10px; border:1px solid var(--color-line); border-radius:9px; background:#fff; color:var(--color-muted); font-size:11px; cursor:pointer; }
.theme-choices input { width:auto; accent-color:var(--color-blue); }
.history-list { display:grid; gap:12px; } .history-card { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:15px; border:1px solid var(--color-line); border-radius:13px; background:var(--color-surface); } .history-card strong { color:var(--color-ink); font-size:14px; } .history-card p { margin:5px 0 0; color:var(--color-muted); font-size:11px; } .history-card .order-status { display:inline-block; margin-top:6px; color:#08783c; font-size:10px; font-weight:800; text-transform:uppercase; } .history-card .history-total { text-align:right; color:var(--color-ink); font:800 17px Montserrat,sans-serif; } .history-card a { display:inline-block; margin-top:7px; color:var(--color-blue); font-size:11px; font-weight:800; text-decoration:none; } .empty-state { padding:25px; color:var(--color-muted); text-align:center; font-size:13px; }
.history-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; } .history-filters { display:flex; gap:6px; overflow:auto; } .history-filter { border:0; border-radius:9px; padding:8px 11px; color:var(--color-muted); background:var(--color-surface); font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; } .history-filter.active { color:#fff; background:var(--color-blue); } #history-search { width:210px; padding:9px 11px; border:1px solid var(--color-line); border-radius:9px; background:var(--color-surface); color:var(--color-ink); font-size:11px; }
.high-contrast .config-panel,.high-contrast .config-sidebar { border-color:#414753; } .high-contrast .config-panel p,.high-contrast .config-heading p { color:var(--color-ink); } .reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
.points-summary { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:18px; padding:25px; border:1px solid #efd58b; border-radius:18px; background:linear-gradient(135deg,#fffaf0,#fff2c8); color:#8a5b00; } .points-summary strong { display:block; margin-top:6px; font:800 42px Montserrat,sans-serif; } .points-summary > div > span:not(.summary-label) { font-size:13px; font-weight:700; } .points-summary p { margin:8px 0 0; color:#8a5b00; font-size:11px; } .next-reward { align-self:center; padding:15px; border:1px solid #efd58b; border-radius:13px; background:#ffffffbb; } .next-reward span,.next-reward small { display:block; font-size:11px; } .next-reward strong { display:block; margin:5px 0; font-size:17px; } .progress-track { height:8px; margin:9px 0; overflow:hidden; border-radius:99px; background:#f1e5bf; } .progress-track i { display:block; width:0; height:100%; border-radius:99px; background:linear-gradient(90deg,#f59e0b,#b60078); } .reward-note { padding:12px 14px; border-radius:10px; color:var(--color-blue); background:#eef6ff; font-size:12px; font-weight:700; } .subheading { margin:25px 0 5px; color:var(--color-ink); font:700 17px Montserrat,sans-serif; } .section-note { margin:0; color:var(--color-muted); font-size:12px; } .rewards-roadmap { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:15px; } .reward-step { padding:12px 8px; border:1px solid var(--color-line); border-radius:10px; color:var(--color-muted); background:var(--color-surface); text-align:center; font-size:11px; } .reward-step.unlocked { border-color:#86efac; color:#08783c; background:#f0fdf4; } .reward-step.next { border-color:#f9a8d4; color:#b60078; background:#fff1f2; } .reward-step strong,.reward-step span { display:block; } .reward-step strong { font-size:13px; } .reward-step span { margin-top:4px; font-size:10px; }
.visits-timeline { position:relative; display:grid; gap:15px; margin-top:17px; padding-left:25px; } .visits-timeline:before { position:absolute; top:7px; bottom:7px; left:7px; width:2px; content:""; background:#d5e2f1; } .visit-event { position:relative; min-height:38px; } .visit-dot { position:absolute; top:3px; left:-25px; width:15px; height:15px; border:3px solid #fff; border-radius:50%; background:var(--color-blue); box-shadow:0 0 0 2px #bcd4ee; } .visit-event strong,.visit-event time { display:block; } .visit-event strong { font-size:12px; } .visit-event time { margin-top:3px; color:var(--color-muted); font-size:11px; }
@media(max-width:800px){.config-layout{padding:25px 16px 50px}.config-heading{align-items:flex-start;flex-direction:column}.config-workspace{grid-template-columns:1fr;gap:15px}.config-sidebar{display:flex;overflow:auto}.config-tab{min-width:140px}.config-promo{display:none}.config-panel{padding:20px}.points-summary,.form-grid{grid-template-columns:1fr}.panel-heading{align-items:flex-start;flex-direction:column}.form-actions,.danger-zone{align-items:stretch;flex-direction:column}.rewards-roadmap{grid-template-columns:repeat(3,1fr)}}
.reward-step small { display:block; margin-top:3px; font-size:9px; opacity:.75; }

/* Configuracion visual alineada con el panel de fidelidad de referencia. */
body:has(.config-layout) {
	font-family: "Montserrat", sans-serif;
	background: #f9f9fc;
}

.config-layout,
.config-layout *:not(.material-symbols-outlined) {
	font-family: "Montserrat", sans-serif;
}

.config-layout {
	width: min(100% - 32px, 1280px);
	max-width: none;
	padding: 40px 0 72px;
}

.config-heading h1,
.config-panel h2,
.config-panel h3,
.config-panel strong,
.config-panel button,
.config-tab,
.config-promo,
.config-status,
.config-panel input,
.config-panel label {
	font-family: "Montserrat", sans-serif;
}

.config-heading h1 { font-size: clamp(28px, 3vw, 36px); }
.config-heading p { font-size: 13px; }
.config-workspace { grid-template-columns: 260px minmax(0, 1fr); gap: 32px; }
.config-sidebar { padding-top: 2px; }
.config-tab { min-height: 48px; font-size: 13px; }
.config-panel { padding: 32px; border-radius: 24px; background: #fff; }

#tab-puntos .panel-heading { padding-bottom: 22px; margin-bottom: 24px; }
#tab-puntos .panel-heading h2 { font-size: 24px; }
#tab-puntos .panel-heading p { font-size: 12px; }
#tab-puntos .points-summary {
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 28px;
	margin-bottom: 20px;
	padding: 28px;
	border-radius: 20px;
	background: linear-gradient(110deg, #fff9e9 0%, #fff2c9 58%, #fff8ef 100%);
}
#tab-puntos .summary-label { color: #9a6500; font-size: 10px; }
#tab-puntos .points-summary strong { font-size: 48px; line-height: 1; color: #8b5700; }
#tab-puntos .points-summary > div > span:not(.summary-label) { color: #9a6500; font-size: 14px; }
#tab-puntos .points-summary p { color: #8b5700; font-size: 12px; }
#tab-puntos .next-reward { min-width: 0; padding: 17px; border-radius: 14px; background: rgba(255,255,255,.82); }
#tab-puntos .next-reward strong { margin: 5px 0 8px; color: #b60078; font-size: 18px; }
#tab-puntos .next-reward span { color: #414753; font-weight: 700; }
#tab-puntos .next-reward small { color: #647080; line-height: 1.45; }
#tab-puntos .progress-track { height: 9px; background: #f0dfae; }
#tab-puntos .progress-track i { background: linear-gradient(90deg, #f59e0b, #d81b60); }
#tab-puntos .reward-note { margin-bottom: 26px; padding: 13px 15px; border: 1px solid #bfdbfe; border-radius: 12px; background: #eff6ff; color: #2563a8; font-size: 11px; }
#tab-puntos .subheading { margin-top: 0; font-size: 20px; }
#tab-puntos .section-note { font-size: 12px; }
#tab-puntos .rewards-roadmap {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	margin: 22px -4px 0;
	padding: 14px 4px 12px;
	scrollbar-color: #cbd5e1 #f1f5f9;
}
#tab-puntos .reward-step {
	position: relative;
	display: flex;
	flex: 0 0 218px;
	min-height: 144px;
	flex-direction: column;
	justify-content: center;
	padding: 22px 18px 16px;
	border: 1px solid #dbe3ec;
	border-radius: 16px;
	background: #fff;
	text-align: left;
	box-shadow: 0 3px 10px rgba(30, 41, 59, .04);
}
#tab-puntos .reward-step::before {
	position: absolute;
	top: -9px;
	left: 14px;
	padding: 4px 8px;
	border-radius: 999px;
	content: "Premio";
	background: #e2e8f0;
	color: #64748b;
	font-size: 9px;
	font-weight: 800;
	text-transform: uppercase;
}
#tab-puntos .reward-step strong { color: #64748b; font-size: 22px; }
#tab-puntos .reward-step-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#tab-puntos .reward-step-meta strong { color: #64748b; font-size: 12px; }
#tab-puntos .reward-step-meta span { color: #64748b; font-size: 10px; font-weight: 700; }
#tab-puntos .reward-step-image { display: flex; align-items: center; justify-content: center; height: 72px; margin: 12px 0 10px; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 11px; background: linear-gradient(135deg, #f8fafc, #eff6ff); }
#tab-puntos .reward-step-image img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
#tab-puntos .reward-step h4 { min-height: 30px; margin: 0; color: #334155; font-size: 12px; line-height: 1.35; }
#tab-puntos .reward-step p { min-height: 32px; margin: 5px 0 0; color: #64748b; font-size: 10px; line-height: 1.4; }
#tab-puntos .reward-step small { color: #94a3b8; font-size: 10px; }
#tab-puntos .reward-step.unlocked { border: 2px solid #34d399; background: #f0fdf4; }
#tab-puntos .reward-step.unlocked::before { content: "Desbloqueado"; background: #10b981; color: #fff; }
#tab-puntos .reward-step.unlocked .reward-step-meta strong, #tab-puntos .reward-step.unlocked .reward-step-meta span, #tab-puntos .reward-step.unlocked h4 { color: #047857; }
#tab-puntos .reward-step.next { border: 2px solid #d81b60; background: #fff7fb; }
#tab-puntos .reward-step.next::before { content: "Siguiente recompensa"; background: #d81b60; color: #fff; }
#tab-puntos .reward-step.next .reward-step-meta strong, #tab-puntos .reward-step.next .reward-step-meta span, #tab-puntos .reward-step.next h4 { color: #b8144f; }

@media (max-width: 800px) {
	.config-layout { width: min(100% - 32px, 640px); }
	.config-workspace { gap: 18px; }
	.config-panel { padding: 22px; }
	#tab-puntos .points-summary { grid-template-columns: 1fr; padding: 22px; }
}