/* ===== Solucion10 Control Horario — Alta pública ===== */
:root { --primary:#2563eb; --bg:#0f172a; --text:#0f172a; --muted:#64748b; }
* { box-sizing:border-box; }
body { font-family:system-ui,-apple-system,sans-serif; background:#eef2f7; margin:0; color:var(--text); }
.topbar { background:var(--bg); color:#fff; padding:16px 24px; display:flex; align-items:center; gap:10px; }
.topbar b { font-size:1.15rem; }
.topbar span { color:#94a3b8; font-size:.9rem; }
.wrap { max-width:760px; margin:24px auto; padding:0 16px 60px; }
h1 { font-size:1.7rem; margin:10px 0 4px; }
.lead { color:var(--muted); margin:0 0 22px; }
.card { background:#fff; border-radius:16px; padding:22px; box-shadow:0 1px 3px rgba(0,0,0,.08); margin-bottom:18px; }
.card h2 { font-size:1.05rem; margin:0 0 4px; display:flex; align-items:center; gap:8px; }
.card .sub { color:var(--muted); font-size:.88rem; margin:0 0 16px; }
.step-num { background:var(--primary); color:#fff; width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:bold; }

/* Planes */
.planes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.plan-card { border:2px solid #e2e8f0; border-radius:14px; padding:16px; cursor:pointer; text-align:center; transition:.15s; }
.plan-card:hover { border-color:#bfdbfe; }
.plan-card.selected { border-color:var(--primary); background:#eff6ff; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.plan-nombre { font-weight:bold; font-size:.95rem; }
.plan-rango { color:var(--muted); font-size:.8rem; margin:4px 0 8px; }
.plan-precio { font-size:1.25rem; font-weight:800; color:var(--primary); }
.plan-precio span { font-size:.75rem; color:var(--muted); font-weight:500; }

/* Inputs */
label { font-size:.82rem; font-weight:bold; color:var(--muted); display:block; margin:0 0 4px; }
.field { margin-bottom:14px; }
input { width:100%; padding:12px; border:2px solid #e2e8f0; border-radius:10px; font-size:1rem; background:#f8fafc; outline:none; }
input:focus { border-color:var(--primary); background:#fff; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid3 { display:grid; grid-template-columns:2fr 2fr 1fr; gap:14px; }

/* Cupón */
.cupon-row { display:flex; gap:10px; }
.cupon-row input { flex:1; }
.btn-sec { background:#e2e8f0; color:#334155; border:none; padding:12px 16px; border-radius:10px; font-weight:bold; cursor:pointer; white-space:nowrap; }
.btn-sec:hover { background:#cbd5e1; }

/* Métodos de pago */
.pay-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.pay-card { border:2px solid #e2e8f0; border-radius:14px; padding:16px 10px; cursor:pointer; text-align:center; font-weight:bold; font-size:.9rem; }
.pay-card:hover { border-color:#bfdbfe; }
.pay-card.selected { border-color:var(--primary); background:#eff6ff; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.pay-card .ico { font-size:1.6rem; display:block; margin-bottom:6px; }
.pay-card small { display:block; color:var(--muted); font-weight:500; font-size:.72rem; margin-top:4px; }

/* Resumen */
#resumen { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:16px; }
.res-line { display:flex; justify-content:space-between; padding:4px 0; color:#334155; font-size:.95rem; }
.res-desc { color:#16a34a; font-weight:bold; }
.res-total { display:flex; justify-content:space-between; border-top:2px dashed #cbd5e1; margin-top:8px; padding-top:10px; font-size:1.2rem; font-weight:800; }
.res-total small { font-size:.8rem; color:var(--muted); font-weight:500; }

.btn-main { width:100%; padding:18px; border:none; border-radius:12px; font-size:1.15rem; font-weight:bold; cursor:pointer; color:#fff; background:var(--primary); box-shadow:0 4px 6px -1px rgba(37,99,235,.25); }
.btn-main:disabled { opacity:.65; cursor:default; }
.btn-main:active:not(:disabled) { transform:scale(.99); }

.msg { padding:11px; border-radius:10px; font-weight:bold; font-size:.9rem; margin-top:8px; }
.msg-info { background:#f1f5f9; color:#334155; }
.msg-ok { background:#dcfce7; color:#166534; }
.msg-err { background:#fee2e2; color:#991b1b; }
.muted { color:#94a3b8; }
.req { color:#ef4444; }
.legal { color:var(--muted); font-size:.8rem; text-align:center; margin-top:14px; }
.legal b { color:#334155; }

/* Pantalla transferencia / gracias */
.center-card { max-width:520px; margin:60px auto; text-align:center; }
.big-ico { font-size:3.5rem; }
@media (max-width:600px){ .grid2,.grid3,.pay-grid{ grid-template-columns:1fr; } }