:root{--bg:#f7f4ee;--surf:#fff;--ink:#1d2433;--mut:#5b6475;--pri:#1b4b8f;--acc:#c8343f;--line:#e2dccd;--ok:#1f7a4d;--onpri:#fff}
@media(prefers-color-scheme:dark){:root{--bg:#121722;--surf:#1a2132;--ink:#eef1f7;--mut:#a3adc2;--pri:#6ea0ec;--acc:#ef6a74;--line:#2b3550;--ok:#58c58d;--onpri:#0e1522}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;padding-top:env(safe-area-inset-top,0)}
.box{max-width:420px;margin:8vh auto;background:var(--surf);border:1px solid var(--line);border-radius:16px;padding:24px;width:calc(100% - 32px)}
h1,h2{margin:0 0 .6em;font-family:Fraunces,Georgia,serif}
label{display:grid;gap:6px;font-size:.9rem;font-weight:500;margin-bottom:12px}
input,select,textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
.btn{font:inherit;font-weight:600;background:var(--pri);color:var(--onpri);border:0;border-radius:999px;padding:10px 20px;cursor:pointer;min-height:44px}
.btn.sm{padding:6px 14px;min-height:36px;font-size:.85rem}.btn.ghost{background:transparent;color:var(--pri);border:1px solid var(--pri)}.btn.danger{background:var(--acc);color:#fff}
.err{color:var(--acc);font-weight:500}.ok{color:var(--ok);font-weight:500}.note{color:var(--mut);font-size:.85rem}
header{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--surf);border-bottom:1px solid var(--line);flex-wrap:wrap}
nav{display:flex;gap:8px;overflow-x:auto;padding:12px 16px}
nav button{flex:none;font:inherit;background:var(--surf);color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer;min-height:40px}
nav button.on{background:var(--pri);color:var(--onpri);border-color:var(--pri)}
nav .n{background:var(--acc);color:#fff;border-radius:999px;padding:0 7px;font-size:.75rem;margin-left:6px}
main{max-width:980px;margin:0 auto;padding:8px 16px 60px}
.card{background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px}
.row{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.acts{display:flex;gap:6px;flex-wrap:wrap}
.badge{font-size:.75rem;font-weight:600;padding:2px 10px;border-radius:999px;border:1px solid var(--line);color:var(--mut)}
.badge.publicado{color:var(--ok);border-color:var(--ok)}.badge.pendiente{color:var(--acc);border-color:var(--acc)}
.grid2{display:grid;gap:0 14px;grid-template-columns:1fr 1fr}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}