:root{
  --primary:#a07850;
  --primary-dark:#5c3d2e;
  --bg-body:#f1f5f9;
  --bg-card:#ffffff;
  --text-primary:#1e293b;
  --text-secondary:#64748b;
  --border-color:#e2e8f0;
  --error-bg:#fef2f2; --error-fg:#b91c1c; --error-bd:#fecaca;
  --ok-bg:#ecfdf5;    --ok-fg:#047857;    --ok-bd:#a7f3d0;
  --shadow-sm:0 4px 12px rgba(0,0,0,0.08);
  --shadow-md:0 8px 24px rgba(0,0,0,0.12);
}
@media (prefers-color-scheme: dark){
  :root{
    --primary:#c9a27e;
    --bg-body:#0f172a;
    --bg-card:#1e293b;
    --text-primary:#f1f5f9;
    --text-secondary:#94a3b8;
    --border-color:#334155;
    --error-bg:#3f1d1d; --error-fg:#fca5a5; --error-bd:#7f1d1d;
    --ok-bg:#052e22;    --ok-fg:#6ee7b7;    --ok-bd:#065f46;
  }
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  min-height:100vh;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg-body);
  color:var(--text-primary);
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ---------- Login ---------- */
body.auth{justify-content:center;padding:32px 16px;}
.auth-card{
  width:100%;max-width:400px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:18px;
  padding:36px 28px 30px;
  box-shadow:var(--shadow-md);
}
.brand{text-align:center;margin-bottom:24px;}
.brand-mark{
  width:60px;height:60px;margin:0 auto 14px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.1rem;letter-spacing:.04em;color:#fff;
  background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%);
}
.brand h1{
  margin:0 0 6px;font-size:1.5rem;font-weight:800;
  background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand p{margin:0;color:var(--text-secondary);font-size:.95rem;}
form{display:flex;flex-direction:column;}
label{font-size:.85rem;font-weight:600;margin:14px 0 6px;}
input[type=text],input[type=password]{
  width:100%;padding:12px 14px;font-size:1rem;
  color:var(--text-primary);background:var(--bg-body);
  border:1px solid var(--border-color);border-radius:10px;
  outline:none;transition:border-color .2s,box-shadow .2s;
}
input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(160,120,80,.25);}
button{
  margin-top:24px;padding:13px;font-size:1rem;font-weight:700;color:#fff;cursor:pointer;
  border:0;border-radius:10px;
  background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%);
  transition:filter .2s,transform .1s;
}
button:hover{filter:brightness(1.08);}
button:active{transform:translateY(1px);}
.alert{padding:11px 14px;border-radius:10px;font-size:.9rem;margin-bottom:6px;border:1px solid;}
.alert-error{background:var(--error-bg);color:var(--error-fg);border-color:var(--error-bd);}
.alert-ok{background:var(--ok-bg);color:var(--ok-fg);border-color:var(--ok-bd);}

/* ---------- Home ---------- */
body.home{padding:0 16px 40px;}
.topbar{
  width:100%;max-width:960px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:18px 0;border-bottom:1px solid var(--border-color);
}
.topbar-brand{font-weight:700;}
.topbar-user{display:flex;align-items:center;gap:14px;font-size:.9rem;}
.who{color:var(--text-secondary);}
.logout{
  color:var(--primary);text-decoration:none;font-weight:600;
  padding:7px 12px;border:1px solid var(--border-color);border-radius:8px;
}
.logout:hover{background:var(--bg-card);}
.hero{text-align:center;margin:40px 0 32px;}
.hero h1{
  margin:0 0 8px;font-size:2rem;font-weight:800;
  background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{margin:0;color:var(--text-secondary);}
.grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;width:100%;max-width:960px;
}
a.card{
  display:block;text-decoration:none;color:inherit;
  background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;
  padding:28px 24px;box-shadow:var(--shadow-sm);
  transition:transform .3s ease,box-shadow .3s ease;
}
a.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.icon{
  width:52px;height:52px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:800;color:#fff;margin-bottom:16px;
  background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%);
}
.card.punto .icon{background:linear-gradient(135deg,#10b981 0%,#059669 100%);}
.card.tolda .icon{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);}
.card.app .icon{background:linear-gradient(135deg,#6366f1 0%,#4338ca 100%);font-size:.9rem;}
.card h2{margin:0 0 6px;font-size:1.15rem;font-weight:700;}
.card p{margin:0;color:var(--text-secondary);font-size:.9rem;}
.foot{margin-top:40px;color:var(--text-secondary);font-size:.8rem;text-align:center;}
@media (max-width:480px){
  .topbar{flex-wrap:wrap;}
  .who{display:none;}
  .hero h1{font-size:1.6rem;}
}