:root{
    --primary:#0a4d8c;
    --primary-dark:#073764;
    --accent:#f39c12;
    --accent-dark:#d68910;
    --success:#27ae60;
    --danger:#c0392b;
    --warning:#e67e22;
    --info:#3498db;
    --bg:#f5f7fa;
    --card:#fff;
    --text:#1c2230;
    --muted:#7a8597;
    --border:#e3e7ed;
    --shadow:0 2px 8px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--text);background:var(--bg);line-height:1.5}
a{color:var(--primary);text-decoration:none}

/* Topbar comercio: horizontal */
.topbar{background:#fff;box-shadow:var(--shadow);position:sticky;top:0;z-index:10}
.topbar-inner{max-width:1280px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.brand strong{display:block;font-size:14px}
.brand small{color:var(--muted);font-size:12px}
.menu{display:flex;gap:4px;flex-wrap:wrap}
.menu a{padding:8px 14px;border-radius:6px;color:var(--text);font-size:14px;font-weight:500}
.menu a:hover{background:var(--bg)}
.menu a.active{background:#e7eff7;color:var(--primary)}
.menu a.cta{background:var(--accent);color:#fff}
.menu a.cta:hover{background:var(--accent-dark);color:#fff}

.main{max-width:1280px;margin:0 auto;padding:24px}
.site-footer{padding:14px 28px;color:var(--muted);text-align:center;border-top:1px solid var(--border);background:#fff;font-size:12px}

/* Cards */
.card{background:var(--card);border-radius:10px;box-shadow:var(--shadow);margin-bottom:20px}
.card-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.card-header h2,.card-header h3{margin:0;font-size:16px}
.card-body{padding:20px}

/* Estadísticas grid */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.kpi{background:#fff;border-radius:10px;padding:18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--primary)}
.kpi.accent::before{background:var(--accent)}
.kpi.success::before{background:var(--success)}
.kpi-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.kpi-value{font-size:28px;font-weight:800;margin-top:4px}
.kpi-meta{font-size:12px;color:var(--muted);margin-top:4px}

/* Tables */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{background:#f8fafc;text-align:left;padding:10px 14px;font-weight:600;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border)}
.table td{padding:12px 14px;border-bottom:1px solid var(--border)}
.table tr:hover{background:#f8fafc}
.text-right{text-align:right}
.text-center{text-align:center}
.text-muted{color:var(--muted)}
.text-accent{color:var(--accent-dark)}
.text-success{color:var(--success)}
.text-danger{color:var(--danger)}

/* Forms */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.form-group input[type=text],.form-group input[type=email],.form-group input[type=password],.form-group input[type=number],.form-group input[type=date],.form-group input[type=tel],.form-group input[type=url],.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:6px;font-size:14px;background:#fff;font-family:inherit}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(10,77,140,.1)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}

.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:6px;font-weight:600;font-size:14px;cursor:pointer;border:none;text-decoration:none;font-family:inherit}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);color:#fff}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-dark);color:#fff}
.btn-success{background:var(--success);color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.btn-secondary{background:#fff;color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--bg)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-sm{padding:6px 10px;font-size:12px}
.btn-lg{padding:14px 22px;font-size:15px}
.btn-block{display:flex;width:100%;justify-content:center}

.badge{display:inline-block;padding:3px 9px;border-radius:10px;font-size:11px;font-weight:600;background:var(--bg);color:var(--muted)}
.badge.success{background:#e8f6ee;color:var(--success)}
.badge.danger{background:#fbe9e7;color:var(--danger)}
.badge.warning{background:#fef5e7;color:var(--warning)}
.badge.primary{background:#e7eff7;color:var(--primary)}

.alert{padding:12px 16px;border-radius:8px;margin-bottom:18px;font-size:14px}
.alert-success{background:#e8f6ee;color:var(--success);border-left:4px solid var(--success)}
.alert-danger{background:#fbe9e7;color:var(--danger);border-left:4px solid var(--danger)}
.alert-warning{background:#fef5e7;color:var(--warning);border-left:4px solid var(--warning)}
.alert-info{background:#eaf3fa;color:var(--info);border-left:4px solid var(--info)}

/* Login screen */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%)}
.login-box{background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.2);padding:40px;max-width:420px;width:100%}
.login-logo{text-align:center;margin-bottom:30px}
.login-logo .lg{width:60px;height:60px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;margin:0 auto 12px}
.login-logo h1{margin:0 0 4px;font-size:20px}
.login-logo p{margin:0;color:var(--muted);font-size:14px}

/* === Pieza estrella: validar_canje === */
.validar-step{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:30px;margin-bottom:20px}
.big-input{font-size:28px;padding:18px;text-align:center;letter-spacing:2px;font-weight:600}
.cliente-info{background:linear-gradient(135deg,var(--primary),#1a6bb3);color:#fff;border-radius:10px;padding:18px 20px;margin-bottom:20px}
.cliente-info h2{margin:0 0 4px;font-size:20px}
.cliente-info .meta{opacity:.9;font-size:14px}

.benef-option{background:#fff;border:2px solid var(--border);border-radius:10px;padding:16px 18px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all .2s}
.benef-option:hover{border-color:var(--primary);background:#f8fafc}
.benef-option.selected{border-color:var(--accent);background:#fef9ef}
.benef-option h4{margin:0;font-size:16px}
.benef-option p{margin:4px 0 0;color:var(--muted);font-size:13px}
.benef-option .valor{font-size:24px;font-weight:800;color:var(--accent-dark)}

.calc-box{background:linear-gradient(135deg,#f8fafc,#fff);border:2px dashed var(--border);border-radius:12px;padding:24px;text-align:center;margin:20px 0}
.calc-box .label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.calc-box .row{display:flex;justify-content:space-between;padding:8px 0}
.calc-box .row.total{border-top:1px solid var(--border);padding-top:16px;margin-top:8px;font-size:20px;font-weight:800}
.calc-box .desc{color:var(--accent-dark)}