:root{
  --navy:#1f2a44; --teal:#2f8f83; --beige:#f6f3ec; --ink:#20242b;
  --muted:#6b7280; --line:#e6e2d8; --card:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--beige); color:var(--ink);
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}

/* ---------- Topbar ---------- */
.topbar{background:var(--navy);color:#fff;padding:16px 20px;padding-top:calc(16px + env(safe-area-inset-top))}
.brand{display:flex;align-items:center;gap:12px;max-width:720px;margin:0 auto}
.logo{width:38px;height:38px}
.brand-name{font-size:19px;font-weight:700;letter-spacing:.2px}
.brand-name span{font-weight:400;opacity:.85}
.brand-sub{font-size:12px;opacity:.75}

/* ---------- Tabs ---------- */
.tabs{position:sticky;top:0;z-index:5;display:flex;gap:8px;justify-content:center;
  background:var(--beige);padding:12px;border-bottom:1px solid var(--line)}
.tab{border:1px solid var(--line);background:#fff;color:var(--muted);
  padding:9px 20px;border-radius:999px;font-size:14.5px;font-weight:600;cursor:pointer}
.tab.active{background:var(--teal);color:#fff;border-color:var(--teal)}

/* ---------- Layout ---------- */
main{max-width:720px;margin:0 auto;padding:20px 16px 8px}
.view{display:none;animation:fade .25s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.skeleton{background:#fff;border:1px dashed var(--line);border-radius:14px;
  padding:34px;text-align:center;color:var(--muted)}

/* ---------- Card ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:22px;box-shadow:0 2px 8px rgba(31,42,68,.05)}
.eyebrow{display:inline-block;background:#eef4f3;color:var(--teal);font-size:11.5px;
  font-weight:700;letter-spacing:.6px;text-transform:uppercase;border-radius:6px;padding:3px 9px;margin-bottom:12px}
.card h2{font-size:19px;line-height:1.35;margin:0 0 12px}
.body{font-size:15.5px;line-height:1.65;color:#2b3038}
.cite{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);font-style:italic}
.linkrow{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.linkrow a{flex:1;min-width:120px;text-align:center;text-decoration:none;
  border-radius:10px;padding:11px;font-size:14px;font-weight:600}
.linkrow a.primary{background:var(--navy);color:#fff}
.linkrow a.ghost{background:#fff;border:1px solid var(--line);color:var(--teal)}
.date-tag{font-size:12.5px;color:var(--muted);margin-bottom:4px}

/* ---------- Recuerda ---------- */
.rc-progress{font-size:13px;color:var(--muted);text-align:center;margin-bottom:14px}
.rc-card{min-height:180px;display:flex;flex-direction:column;justify-content:center}
.rc-card .body{font-size:17px;line-height:1.6}
.rc-actions{margin-top:20px;display:flex;gap:10px}
.rc-actions button{flex:1;border:none;border-radius:12px;padding:14px;font-size:15px;
  font-weight:700;cursor:pointer}
.btn-no{background:#fbeaea;color:#b91c1c}
.btn-si{background:#e7f2f0;color:var(--teal)}
.reveal{margin-top:18px}
.btn-reveal{width:100%;border:none;border-radius:12px;padding:14px;font-size:15px;
  font-weight:700;cursor:pointer;background:var(--navy);color:#fff}
.rc-done{text-align:center;padding:30px 10px}
.rc-done .big{font-size:40px;margin-bottom:8px}
.rc-done p{color:var(--muted)}

/* ---------- Footer ---------- */
.footer{max-width:720px;margin:8px auto 0;padding:20px 16px 34px;text-align:center}
.disclaimer{font-size:11.5px;color:var(--muted);line-height:1.5;max-width:560px;margin:0 auto 18px}
.coffee{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;font-size:13.5px;color:var(--ink)}
.donate{text-decoration:none;font-weight:700;font-size:13.5px;padding:8px 16px;border-radius:999px}
.donate.paypal{background:#ffc439;color:#1a1a1a}
.donate.clip{background:var(--teal);color:#fff}
.madeby{font-size:12px;color:var(--muted);margin-top:22px}
.madeby b{color:var(--navy)}

@media (prefers-color-scheme: dark){
  :root{--beige:#161a22;--ink:#e8eaed;--card:#1e2430;--line:#2c3444;--muted:#9aa3b2}
  .tab{background:#1e2430}
  .eyebrow{background:#20302e}
  .linkrow a.ghost{background:#1e2430}
  .btn-no{background:#3a2323;color:#f2a3a3}
  .btn-si{background:#20302e;color:#7fd1c6}
}