:root { --ink:#151515; --surface:#f7f4ed; --panel:#fffdf8; --gold:#f7be16; --gold-deep:#d99a00; --muted:#736f66; --line:#e8e0d1; --green:#168653; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--surface); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.login-screen { position:fixed; z-index:10; inset:0; display:grid; place-items:center; padding:24px; background:linear-gradient(135deg,#16130cdd,#000000ed), url('public/logo-cavallero.png') center/cover; }.login-screen.hidden { display:none; }.login-card { width:min(420px,100%); padding:38px; border:1px solid #5f522d; border-radius:18px; background:#fffdf8; box-shadow:0 28px 70px #0008; }.login-card>img { display:block; width:70px; height:70px; object-fit:cover; border-radius:50%; margin:0 auto 20px; }.login-card h1 { margin:0; font-family:Georgia,serif; font-size:40px; line-height:.87; letter-spacing:-.06em; }.login-card h1 span { color:var(--gold-deep); }.login-card>p:not(.eyebrow):not(.form-error) { color:var(--muted); line-height:1.5; font-size:14px; margin:18px 0 23px; }.account-actions { display:flex; align-items:center; gap:14px; }.sign-out { border:1px solid var(--line); border-radius:7px; background:white; color:var(--muted); padding:7px 10px; font-size:12px; font-weight:750; }.sign-out:hover { color:var(--ink); border-color:#aaa18f; }
button,input { font:inherit; } button { cursor:pointer; }
.app-shell { max-width:1360px; min-height:100vh; padding:0 5.5vw 56px; margin:auto; }.topbar { height:92px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; letter-spacing:.05em; }.brand img { width:55px; height:55px; border-radius:50%; object-fit:cover; object-position:center; }.brand span { display:grid; line-height:.96; font-size:12px; }.brand em { font-family:Georgia,serif; color:var(--gold-deep); font-size:25px; letter-spacing:-.06em; font-weight:bold; }.desk-label { color:var(--muted); font-size:14px; font-weight:600; }.live-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--green); margin-right:6px; }
.hero { padding:56px 0 36px; display:flex; align-items:end; justify-content:space-between; gap:24px; }.eyebrow { margin:0 0 7px; color:var(--gold-deep); font-size:11px; font-weight:800; letter-spacing:.16em; }.hero h1 { margin:0; font-family:Georgia,serif; font-size:clamp(36px,5vw,66px); line-height:.99; letter-spacing:-.055em; }.hero h1 span { color:var(--gold-deep); }.hero-copy { max-width:550px; margin:18px 0 0; color:var(--muted); font-size:16px; line-height:1.6; }.button { border:0; border-radius:10px; padding:14px 20px; font-weight:800; white-space:nowrap; }.button-primary { background:var(--ink); color:white; box-shadow:0 4px 0 #000; }.button-primary:hover { transform:translateY(-1px); background:#302f2e; }.button:active { transform:translateY(2px); box-shadow:0 1px 0 #000; }.full { width:100%; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:5px 0 30px; }.metrics article { background:var(--panel); padding:20px 23px; border:1px solid var(--line); border-radius:14px; }.metrics span { display:block; color:var(--muted); font-size:13px; font-weight:650; }.metrics strong { display:block; margin-top:4px; font-family:Georgia,serif; font-size:38px; letter-spacing:-.06em; }
.workspace { display:grid; grid-template-columns:minmax(380px,1.05fr) minmax(390px,.95fr); gap:22px; align-items:start; }.list-panel,.detail-panel { background:var(--panel); border:1px solid var(--line); border-radius:16px; }.panel-heading { padding:25px; display:flex; justify-content:space-between; gap:15px; align-items:end; border-bottom:1px solid var(--line); }.panel-heading h2,.detail-panel h2,.modal-heading h2 { margin:0; font-family:Georgia,serif; font-size:28px; letter-spacing:-.04em; }.search { height:42px; width:250px; display:flex; align-items:center; padding:0 12px; gap:7px; border:1px solid var(--line); background:#fbf9f4; border-radius:8px; color:var(--muted); }.search input { min-width:0; width:100%; border:0; background:transparent; outline:0; font-size:13px; }.client-list { padding:8px; min-height:350px; }.client-card { width:100%; display:flex; align-items:center; gap:12px; padding:14px; border:0; border-radius:10px; text-align:left; background:transparent; }.client-card:hover,.client-card.selected { background:#f3eee1; }.avatar { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--gold); color:#3a2b00; font-size:14px; font-weight:900; }.client-info { display:grid; gap:3px; min-width:0; }.client-info strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.client-info small { color:var(--muted); }.progress-mini { margin-left:auto; color:var(--gold-deep); font-weight:850; font-size:14px; }.no-results { padding:70px 20px; text-align:center; color:var(--muted); }.detail-panel { padding:30px; min-height:474px; }.empty-state { display:grid; place-content:center; text-align:center; }.empty-mark { width:54px; height:54px; display:grid; place-items:center; border-radius:50%; background:#f8e6ac; color:var(--gold-deep); font-size:26px; margin:auto; }.empty-state h2 { margin-top:18px; }.empty-state p { max-width:260px; color:var(--muted); line-height:1.55; }
.detail-head { display:flex; align-items:center; gap:13px; }.detail-head .avatar { width:51px; height:51px; }.detail-head p { margin:4px 0 0; color:var(--muted); font-size:14px; }.reward-banner { margin:30px 0 25px; padding:17px; border-radius:11px; background:#fff1ba; color:#5d4200; font-size:14px; font-weight:700; }.reward-banner.ready { background:#dff4e8; color:#095e37; }.stamp-label { color:var(--muted); font-size:13px; font-weight:700; }.stamps { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:13px 0 28px; }.stamp { aspect-ratio:1; display:grid; place-items:center; border:2px dashed #d7d0c3; border-radius:50%; color:#c4bdae; font-size:17px; }.stamp.done { border:0; color:#3e2c00; background:var(--gold); font-weight:900; }.action-copy { padding-top:23px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; line-height:1.45; }.action-copy strong { display:block; color:var(--ink); font-size:17px; }.register-cut { margin-top:16px; background:var(--gold); color:#322400; box-shadow:0 4px 0 var(--gold-deep); }.register-cut:active { box-shadow:0 1px 0 var(--gold-deep); }.history { margin:27px 0 0; padding:0; list-style:none; }.history li { padding:11px 0; display:flex; justify-content:space-between; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }.history b { color:var(--ink); }
.detail-title { flex:1; }.edit-client { margin-left:auto; border:1px solid var(--line); border-radius:7px; background:#fff; padding:7px 10px; color:#625d53; font-size:12px; font-weight:750; }.edit-client:hover { border-color:#b9aa85; color:var(--gold-deep); }
dialog { width:min(450px,calc(100% - 32px)); border:0; border-radius:16px; padding:0; box-shadow:0 22px 70px #0004; } dialog::backdrop { background:#17140e88; } dialog form { padding:28px; }.modal-heading { display:flex; justify-content:space-between; align-items:start; margin-bottom:25px; }.icon-button { width:32px; height:32px; padding:0; border:1px solid var(--line); border-radius:50%; background:white; font-size:23px; line-height:1; }.modal-heading h2 { font-size:25px; } form label { display:grid; gap:7px; margin:15px 0; color:#45413a; font-size:13px; font-weight:750; } form input { padding:13px 12px; border:1px solid #d8d0c2; border-radius:8px; outline-color:var(--gold-deep); }.form-error { height:16px; margin:6px 0; color:#b32222; font-size:12px; }
.modal-actions { display:flex; gap:10px; margin-top:10px; }.modal-actions .button { flex:1; }.button-secondary { border:1px solid var(--line); background:white; color:#565149; }.button-secondary:hover { background:#f7f4ed; }
.site-credit { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:28px 0 0; color:#8a8479; font-size:12px; }.site-credit a { color:inherit; text-decoration:none; }.site-credit a:hover { color:var(--gold-deep); text-decoration:underline; }.login-credit { position:absolute; bottom:24px; margin:0; color:#fff8dc; text-shadow:0 1px 4px #382100; }.loyalty-credit { margin:0; color:#fff8dc; text-shadow:0 1px 4px #543000; }
@media(max-width:850px) { .app-shell{padding:0 20px 35px}.workspace{grid-template-columns:1fr}.hero{padding-top:40px}.panel-heading{align-items:start;flex-direction:column}.search{width:100%}.detail-panel{min-height:360px} }.@media(max-width:520px) { .topbar{height:76px}.desk-label{display:none}.hero{align-items:start;flex-direction:column}.hero h1{font-size:39px}.metrics{grid-template-columns:1fr 1fr}.metrics article:last-child{grid-column:span 2}.metrics strong{font-size:29px}.stamps{gap:7px} }
.loyalty-page { min-height:100vh; display:grid; place-content:center; gap:18px; padding:26px; background:radial-gradient(circle at top,#f7c418,#a76900 160%,#181207); }.loyalty-card { width:min(480px,100%); padding:38px; border:1px solid #8f6500; border-radius:20px; background:#fffdf8; box-shadow:0 24px 80px #2b1900a8; text-align:center; }.loyalty-logo { width:82px; height:82px; object-fit:cover; border-radius:50%; margin-bottom:14px; }.loyalty-card h1 { margin:0; font-family:Georgia,serif; font-size:42px; line-height:.94; letter-spacing:-.06em; }.loyalty-card h1 span { color:var(--gold-deep); }.loyalty-intro { margin:20px 0; color:var(--muted); line-height:1.5; }.loyalty-card form { text-align:left; }.loyalty-card .button { margin-top:8px; }.loyalty-result { margin-top:25px; padding:23px 18px; border:1px solid var(--line); border-radius:13px; background:#fbf7ec; }.loyalty-result h2 { margin:2px 0 8px; font-family:Georgia,serif; font-size:27px; letter-spacing:-.04em; }.loyalty-result>p:not(.eyebrow) { margin:0; color:var(--muted); font-size:14px; line-height:1.45; }.loyalty-result .stamps { margin:18px 0 12px; }.loyalty-result strong { color:var(--gold-deep); font-size:14px; }.loyalty-footer { margin:0; color:#fff8dc; font-size:13px; text-align:center; font-weight:650; text-shadow:0 1px 4px #543000; }