:root{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#1c1917;background:#f5f5f4;font-size:16px;
  --green:#047857;--green-dark:#065f46;--green-ink:#022c22;
  --lime:#65a30d;--gold:#d97706;--gold-dark:#92400e;
  --blue:#2563eb;--blue-ink:#172554;
  --muted:#78716c;--line:#e7e5e4;
  --stone-900:#1c1917;--stone-800:#292524;--stone-700:#44403c;
}
*{box-sizing:border-box}
body{margin:0}
a{color:inherit}
button,input,select{font:inherit}
button,.button{cursor:pointer;border:0;border-radius:12px;padding:14px 20px;min-height:48px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .1s,box-shadow .15s,background .15s}
button:active,.button:active{transform:scale(.98)}
button:disabled{opacity:.5;cursor:not-allowed;transform:none}
.primary{background:linear-gradient(90deg,var(--green),var(--lime));color:#fff;box-shadow:0 2px 8px rgba(4,120,87,.25)}
.primary:hover:not(:disabled){box-shadow:0 4px 14px rgba(4,120,87,.35)}
.secondary{background:#d1fae5;color:var(--green-dark)}
.secondary:hover:not(:disabled){background:#a7f3d0}
.brand{font-weight:800;font-size:1.15rem;text-decoration:none;display:flex;align-items:center;gap:8px}
.eyebrow{font-size:.78rem;letter-spacing:.12em;font-weight:800;color:var(--muted);text-transform:uppercase}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-.01em;line-height:1.15}
h2{font-size:1.2rem;font-weight:800;letter-spacing:-.005em}
p{line-height:1.6}
.muted{color:var(--muted)}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:0 1px 2px rgba(28,25,23,.04)}
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 0 0,#e5f3cf,transparent 60%),#f5f5f4}
.install{max-width:680px;width:100%}
.install .brand{margin-bottom:40px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font-size:.9rem;font-weight:700;margin-bottom:18px}
input,select{display:block;width:100%;min-height:48px;padding:12px;margin-top:7px;border:2px solid #d6d3d1;border-radius:12px;background:#fafaf9;color:#1c1917;transition:border-color .15s,background .15s}
input:focus,select:focus{background:#fff;border-color:var(--green);outline:none}
button:focus-visible,a:focus-visible{outline:3px solid #a3e635;outline-offset:3px}
.checks{padding:16px 20px;background:#ecfdf5;list-style:none;border-radius:12px;line-height:1.9}
.alert{background:#fff7e6;border:1px solid #f0c674;color:#7a5312;padding:16px;border-radius:12px}
.alert-error{background:#fef2f2;border-color:#fca5a5;color:#991b1b}
.layout{display:grid;grid-template-columns:238px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--stone-900),var(--stone-800));color:#e7e5e4;padding:32px 22px}
.sidebar .brand{margin-bottom:40px;color:#fff}
.sidebar nav{display:grid;gap:6px}
.sidebar nav a{padding:12px 14px;border-radius:10px;text-decoration:none;font-size:.93rem;color:#d6d3d1;font-weight:600;transition:background .15s,color .15s}
.sidebar nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar .active{background:linear-gradient(90deg,var(--green),var(--lime));color:#fff!important}
.sidebar small{display:block;margin-top:40px;line-height:1.6;color:#a8a29e}
.workspace{min-width:0;padding:0 40px 40px}
.topbar{height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:32px}
.topbar p{margin:0;font-size:.85rem;font-weight:800;letter-spacing:.03em;color:var(--stone-700)}
.heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:28px}
.heading h1{margin-bottom:8px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0}
.stat{background:linear-gradient(160deg,#ecfdf5,#f0fdf4)}
.stat strong{display:block;font-size:2.3rem;font-weight:900;letter-spacing:-.02em;margin:6px 0;color:var(--green-ink)}
.stat span{color:var(--muted);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.stat.stat-gold{background:linear-gradient(160deg,#fffbeb,#fef3c7)}
.stat.stat-gold strong{color:var(--gold-dark)}
.stat.stat-blue{background:linear-gradient(160deg,#eff6ff,#dbeafe)}
.stat.stat-blue strong{color:var(--blue-ink)}
.two-columns{display:grid;grid-template-columns:1.5fr 1fr;gap:24px}
.empty{padding:24px;text-align:center;color:var(--muted);border:1px dashed #d6d3d1;border-radius:14px}
.rank{background:linear-gradient(135deg,#ecfdf5,#f7fee7);border-color:#bbf7d0}
.rank h2{font-size:1.5rem}
.rank-titulo{font-weight:800;color:var(--green-dark);font-size:.9rem;margin-bottom:10px}
.refran-card{background:linear-gradient(120deg,#fffbeb,#fff 65%);border-color:#fde68a}
.refran-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.refran-texto{font-style:italic;font-weight:600;font-size:1.05rem;color:var(--gold-dark);margin-bottom:6px}
.status{display:inline-block;border-radius:20px;padding:6px 12px;background:#fef3c7;color:#78350f;font-size:.8rem;font-weight:700}
.login{max-width:440px;width:100%}
footer{margin-top:24px;font-size:.85rem;color:var(--muted)}
.alert-error{background:#fef2f2;border-color:#fca5a5;color:#991b1b}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.toolbar h1{margin:0}
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);font-size:.92rem;white-space:nowrap}
.table td.wrap-cell{white-space:normal}
.table th{color:var(--muted);font-weight:800;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}
.table tr:last-child td{border-bottom:0}
.table tr:hover td{background:#fafaf9}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:700;white-space:nowrap}
.badge-active{background:#d1fae5;color:var(--green-dark)}
.badge-archived{background:#fef3c7;color:var(--gold-dark)}
.actions-cell{display:flex;gap:6px;flex-wrap:wrap}
.actions-cell form{display:inline}
.btn-link{background:none;border:0;color:var(--green);font-weight:700;cursor:pointer;padding:4px 6px;font-size:.85rem;text-decoration:underline;min-height:auto}
.btn-link.danger{color:#b91c1c}
.panel{margin-bottom:24px}
.panel h2{margin-bottom:18px}
.field-photo{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.field-photo-placeholder{width:64px;height:64px;border-radius:10px;background:#f0fdf4;display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.checklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px 14px;padding:14px;background:#fafaf9;border-radius:12px;margin-top:8px}
.checklist-item{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:0;font-size:.9rem}
.checklist-item input{width:auto;min-height:auto;margin:0}
.choice-block{margin-bottom:18px}
.choice-label{display:block;font-size:.92rem;font-weight:700;margin-bottom:8px;color:#1c1917}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.choice-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px;border:2px solid var(--line);border-radius:16px;background:#fff;cursor:pointer;text-align:center;transition:border-color .15s,background .15s,box-shadow .15s;min-height:48px}
.choice-card input{position:absolute;opacity:0;width:1px;height:1px}
.choice-card .choice-icon{font-size:1.7rem}
.choice-card .choice-name{font-size:.85rem;font-weight:700;color:#1c1917}
.choice-card:hover{border-color:#a8a29e}
.choice-card:has(input:focus-visible){outline:3px solid #a3e635;outline-offset:2px}
.choice-card:has(input:checked)::after{content:'✓';position:absolute;top:6px;right:8px;width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;font-size:.65rem;font-weight:900;display:flex;align-items:center;justify-content:center}
.choice-card:nth-child(4n+1):has(input:checked){border-color:var(--green);background:#ecfdf5;box-shadow:0 0 0 3px rgba(4,120,87,.15)}
.choice-card:nth-child(4n+2):has(input:checked){border-color:var(--blue);background:#eff6ff;box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.choice-card:nth-child(4n+2):has(input:checked)::after{background:var(--blue)}
.choice-card:nth-child(4n+3):has(input:checked){border-color:var(--gold);background:#fffbeb;box-shadow:0 0 0 3px rgba(217,119,6,.15)}
.choice-card:nth-child(4n+3):has(input:checked)::after{background:var(--gold)}
.choice-card:nth-child(4n+4):has(input:checked){border-color:#0d9488;background:#f0fdfa;box-shadow:0 0 0 3px rgba(13,148,136,.15)}
.choice-card:nth-child(4n+4):has(input:checked)::after{background:#0d9488}
.entry-kilos{text-align:center;margin-bottom:6px}
.entry-kilos input{font-size:3rem;font-weight:900;letter-spacing:-.02em;text-align:center;height:92px;padding:0;border-width:2px}
.entry-kilos input:focus{border-color:var(--green)}
.quick-add{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
.quick-add button{background:#f5f5f4;color:var(--stone-700);font-weight:700;font-size:1rem;padding:14px 8px;border:1px solid var(--line)}
.quick-add button:hover{background:#d1fae5;color:var(--green-dark);border-color:#a7f3d0}
.quick-add button.clear-btn{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.sync-status{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.sync-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);display:inline-block;flex:0 0 auto}
.sync-dot.stale{background:var(--gold)}
.sync-dot.offline{background:#dc2626}
.recent-list{display:grid;gap:10px}
.recent-item{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:14px;gap:12px}
.recent-item .kilos{font-weight:900;font-size:1.2rem;letter-spacing:-.01em;white-space:nowrap;color:var(--green-ink)}
.recent-item .meta{color:var(--muted);font-size:.85rem}
.recent-item.is-new{animation:highlight 2.2s ease}
@keyframes highlight{0%{background:#d1fae5}100%{background:#fff}}
@media(prefers-reduced-motion:reduce){.recent-item.is-new{animation:none;background:#d1fae5}}
.field-note{font-size:.85rem;color:var(--muted);margin-top:6px;min-height:1.2em}
.save-btn{width:100%;font-size:1.1rem;padding:18px}
.save-btn[data-busy="1"]{opacity:.7;pointer-events:none}
.filters-bar{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.filters-bar label{margin-bottom:0;min-width:200px}
.bar-row{margin-bottom:16px}
.bar-row:last-child{margin-bottom:0}
.bar-row .bar-label{display:flex;justify-content:space-between;gap:12px;font-size:.9rem;margin-bottom:6px}
.bar-track{height:11px;background:#f0f0ef;border-radius:8px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--lime));border-radius:8px}
.filters-inline{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:18px}
.filters-inline label{margin-bottom:0;min-width:160px}
.delegated-banner{background:var(--stone-900);color:#fde68a;padding:12px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:.9rem;border-bottom:2px solid var(--gold)}
.delegated-banner .secondary{background:#fde68a;color:#78350f;padding:8px 16px;min-height:auto}
.topbar-actions{display:flex;align-items:center;gap:10px}
#sound-toggle{padding:12px 16px;font-size:1.1rem;min-width:48px}
@keyframes leaf-fall{0%{transform:translateY(0) rotate(0deg);opacity:.9}100%{transform:translateY(110vh) rotate(340deg);opacity:0}}
@keyframes confetti-burst{0%{transform:translate(0,0) rotate(0deg);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(200deg);opacity:0}}
.porte-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#fff;color:#1c1917;border:1px solid var(--line);padding:12px 20px;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.14);font-weight:700;z-index:9998;max-width:90vw;text-align:center;animation:rank-toast-in .2s ease}
@media(prefers-reduced-motion:reduce){.porte-toast{animation:none}}
.rank-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:linear-gradient(90deg,var(--green),var(--lime));color:#fff;padding:14px 22px;border-radius:14px;box-shadow:0 8px 24px rgba(4,120,87,.3);font-weight:800;z-index:9999;max-width:90vw;text-align:center;animation:rank-toast-in .25s ease}
@keyframes rank-toast-in{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){.rank-toast{animation:none}}
@media(max-width:850px){
  .layout{display:block}
  .sidebar{padding:18px}
  .sidebar .brand{margin:0}
  .sidebar nav,.sidebar small{display:none}
  .workspace{padding:0 18px 24px}
  .stats{gap:10px}
  .card{padding:20px}
  .stat strong{font-size:1.8rem}
  .two-columns{grid-template-columns:1fr}
  .heading{align-items:flex-start;flex-direction:column}
}
@media(max-width:480px){
  .form-grid,.stats{grid-template-columns:1fr}
  .stat{display:flex;align-items:center;justify-content:space-between}
  .stat strong{margin:0}
  .topbar{height:auto;padding:16px 0;flex-wrap:wrap}
  .auth{padding:12px}
  .quick-add{grid-template-columns:repeat(2,1fr)}
  .entry-kilos input{font-size:2.4rem;height:78px}
  .filters-bar label,.filters-inline label{min-width:0;flex:1 1 45%}
}
