/* EcoGestión · Víctor Viafara
   Sistema de diseño: sans-serif redondeada, texto alineado a la izquierda,
   objetivos táctiles >= 48 px, un solo sistema de botones, color nunca como único indicador. */

:root{
  --g:#0F7B34; --g-dark:#0A5A26; --g-mid:#16A34A; --g-soft:#E8F5EC; --g-line:#CFE6D6;
  --ink:#14201A; --muted:#51605A; --bg:#EEF4F0; --card:#FFFFFF; --line:#DDE5E0;
  --bad:#B91C1C; --bad-soft:#FDECEC; --info:#1D4ED8; --info-soft:#E8EEFD; --warn:#B45309; --warn-soft:#FEF3E2;
  --r:18px; --tap:48px;
  --font:ui-rounded,"Nunito","Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --shadow:0 1px 2px rgba(20,32,26,.06),0 10px 28px rgba(20,32,26,.08);
}
html{font-size:100%}
html.big{font-size:118%}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font:400 1rem/1.5 var(--font);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
button,a{font:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Contenedor ---------- */
.app{max-width:480px;min-height:100vh;min-height:100dvh;margin:0 auto;background:#fff;display:flex;flex-direction:column;position:relative}
@media (min-width:640px){
  body{padding:24px 0}
  .app{min-height:calc(100dvh - 48px);border-radius:32px;box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line)}
}
.screen{flex:1;display:flex;flex-direction:column;min-height:0}
.screen:focus,[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none!important}

/* ---------- Barra superior ---------- */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;min-height:60px;padding:6px 12px 6px 6px;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar h1{flex:1;font-size:1.2rem;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.bar .side{font-size:.85rem;font-weight:700;color:var(--muted)}
.back{width:var(--tap);height:var(--tap);flex:none;border-radius:50%;display:grid;place-items:center;color:var(--g-dark);background:transparent;border:0;cursor:pointer;transition:background .15s,transform .1s}
.back:hover{background:var(--g-soft)}
.back:active{background:var(--g-line);transform:scale(.92)}

/* ---------- Botones: un único sistema ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:12px 20px;border-radius:16px;border:2px solid var(--g);font-size:1.05rem;font-weight:800;text-align:center;cursor:pointer;transition:background .15s,transform .1s,box-shadow .15s,border-color .15s;user-select:none}
.btn.primary{background:var(--g);color:#fff;box-shadow:0 4px 0 var(--g-dark)}
.btn.primary:hover{background:#0D6E2F}
.btn.primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--g-dark)}
.btn.secondary{background:#fff;color:var(--g-dark)}
.btn.secondary:hover{background:var(--g-soft)}
.btn.secondary:active{background:var(--g-line);transform:scale(.985)}
.btn.ghost{border-color:transparent;background:var(--g-soft);color:var(--g-dark)}
.btn.ghost:hover{background:var(--g-line)}
.btn.ghost:active{transform:scale(.985)}
.btn.danger{border-color:var(--bad);color:var(--bad);background:#fff}
.btn.danger:active{background:var(--bad-soft)}
.btn.half{min-height:var(--tap)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid var(--info);outline-offset:2px;border-radius:12px}

/* ---------- Inicio ---------- */
.home{position:relative;flex:1;display:flex;flex-direction:column;padding:0 22px 22px;background:linear-gradient(180deg,#E3F4E8 0,#fff 46%)}
.leaves{position:absolute;top:0;left:0;right:0;height:160px;pointer-events:none;overflow:hidden}
.leaves svg{width:100%;height:100%}
.hero{position:relative;text-align:center;padding-top:54px}
.logo{width:92px;height:92px;margin:0 auto 10px;border-radius:26px;background:var(--g);display:grid;place-items:center;box-shadow:0 8px 20px rgba(15,123,52,.28)}
.brand{font-size:2.3rem;font-weight:900;letter-spacing:-.03em;line-height:1.1}
.brand span{color:var(--g)}
.by{font-weight:700;color:var(--g-dark);margin-top:2px}
.tagline{margin:14px auto 0;max-width:30ch;color:var(--muted);text-align:center}
.menu{display:grid;gap:12px;margin-top:26px}
.menu .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.home .foot{margin-top:auto;padding-top:22px;text-align:center;font-size:.8rem;color:var(--muted)}

/* ---------- Contenido ---------- */
.body{flex:1;padding:18px 18px 8px;display:flex;flex-direction:column;gap:14px}
.lead{color:var(--muted)}
.card{border:1px solid var(--line);border-radius:var(--r);padding:16px;background:#fff}
.card h2,.card h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:var(--g-dark);font-weight:800;margin-bottom:8px}
.card p{text-align:left}
.callout{border-radius:14px;padding:12px 14px;background:var(--info-soft);color:#17306E;font-size:.95rem}
.callout.warn{background:var(--warn-soft);color:#7A3B07}
.callout.ok{background:var(--g-soft);color:var(--g-dark)}
.cta-bar{position:sticky;bottom:0;z-index:15;padding:14px 18px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(rgba(255,255,255,0),#fff 28%)}

/* ---------- 3R ---------- */
.rcards{display:grid;gap:12px}
.rcard{display:flex;align-items:center;gap:14px;padding:14px;min-height:84px;border:2px solid var(--g-line);border-radius:var(--r);background:#fff;transition:background .15s,transform .1s,border-color .15s}
.rcard:hover{background:var(--g-soft);border-color:var(--g)}
.rcard:active{transform:scale(.985)}
.rcard .ico{width:56px;height:56px;border-radius:16px;background:var(--g-soft);display:grid;place-items:center;flex:none}
.rcard h3{font-size:1.25rem;font-weight:800;line-height:1.15}
.rcard p{font-size:.9rem;color:var(--muted)}
.rcard .done{margin-left:auto;flex:none;width:30px;height:30px;border-radius:50%;background:var(--g);display:grid;place-items:center}
.rcard .todo{margin-left:auto;flex:none;width:30px;height:30px;border-radius:50%;border:2px dashed var(--g-line)}
.meter{height:10px;border-radius:99px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;background:var(--g);border-radius:99px;transition:width .3s}

/* ---------- Teoría ---------- */
.prog{display:flex;gap:6px;padding:14px 18px 0}
.prog i{flex:1;height:6px;border-radius:99px;background:var(--line)}
.prog i.on{background:var(--g)}
.steps{display:flex;justify-content:space-between;padding:6px 18px 0;font-size:.78rem;font-weight:700;color:var(--muted)}
.steps b{color:var(--g-dark)}
.thero{display:flex;gap:14px;align-items:center}
.thero .ico{width:68px;height:68px;border-radius:20px;background:var(--g-soft);display:grid;place-items:center;flex:none}
.thero h2{font-size:2rem;font-weight:900;letter-spacing:-.02em;line-height:1.1}
.thero p{color:var(--muted);font-size:.95rem}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.ticks li{display:flex;gap:10px;align-items:flex-start;text-align:left}
.ticks svg{flex:none;margin-top:3px}

/* ---------- Canecas (info) ---------- */
.binfo{display:flex;gap:14px}
.binfo .art{flex:none;width:64px;display:flex;flex-direction:column;align-items:center;gap:6px}
.binfo .art svg{width:56px;height:64px}
.binfo h3{font-size:1.15rem;text-transform:none;letter-spacing:0;color:var(--ink);margin:0}
.binfo .cat{font-weight:700;color:var(--g-dark);font-size:.9rem;margin-bottom:6px}
.binfo ul{margin:0;padding-left:18px;font-size:.95rem}
.binfo li{margin:2px 0}

/* ---------- Consejos ---------- */
.tip{display:flex;gap:14px;align-items:flex-start}
.tip .ico{width:48px;height:48px;border-radius:14px;background:var(--g-soft);display:grid;place-items:center;flex:none}
.tip h3{font-size:1.05rem;text-transform:none;letter-spacing:0;color:var(--ink);margin:0 0 2px}
.tip p{color:var(--muted);font-size:.95rem}

/* ---------- Progreso ---------- */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{border:1px solid var(--line);border-radius:var(--r);padding:14px}
.stat b{display:block;font-size:2rem;font-weight:900;color:var(--g);line-height:1.1}
.stat span{font-size:.85rem;color:var(--muted)}
.switch{display:flex;align-items:center;gap:12px;min-height:var(--tap);cursor:pointer}
.switch input{width:24px;height:24px;accent-color:var(--g);flex:none}
.switch span{font-weight:700}
.switch small{display:block;font-weight:400;color:var(--muted)}

/* ---------- Juego ---------- */
.game{position:relative;height:100vh;height:100dvh;max-height:100dvh}
@media (min-width:640px){.game{height:calc(100dvh - 50px)}}
.hud{display:flex;gap:12px;align-items:center;font-weight:800}
.hearts{color:#DC2626;letter-spacing:1px;font-size:1.1rem}
.instr{margin:10px 14px 0;padding:10px 14px;border-radius:14px;background:var(--info-soft);color:#17306E;font-size:.95rem}
.round{display:flex;align-items:center;gap:10px;padding:10px 16px 0;font-size:.82rem;font-weight:700;color:var(--muted)}
.round .meter{flex:1}
.stage{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(circle at 50% 40%,#F2FAF5,#fff 72%)}
.item{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;width:176px;padding:16px 10px;border-radius:24px;background:#fff;border:2px solid var(--line);box-shadow:0 8px 22px rgba(20,32,26,.14);text-align:center;transition:transform .22s ease,box-shadow .2s,border-color .2s;position:relative;z-index:10}
.item.drag{cursor:grabbing;transition:none;box-shadow:0 18px 34px rgba(20,32,26,.28);border-color:var(--g)}
.item .emo{font-size:3.6rem;line-height:1.1;display:block}
.item .nm{font-weight:800;font-size:1.05rem;display:block;margin-top:4px}
.hint{font-size:.85rem;color:var(--muted);text-align:center;padding:0 20px}
.msg{min-height:3.2em;padding:0 20px;text-align:center;font-weight:700;font-size:.95rem}
.msg.ok{color:var(--g-dark)} .msg.no{color:var(--bad)}
.bins{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 10px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line)}
.bin{border:3px solid transparent;background:#F4F7F5;border-radius:16px;padding:8px 4px;min-height:112px;cursor:pointer;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:2px;transition:transform .12s,border-color .12s,background .12s}
.bin svg{width:48px;height:54px}
.bin .bn{font-weight:900;font-size:1rem;line-height:1.1}
.bin .bs{font-size:.72rem;color:var(--muted);line-height:1.15;text-align:center}
.bin .key{font-size:.7rem;font-weight:800;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:0 6px;background:#fff}
.bin:active{background:var(--g-soft)}
.bin.over{transform:scale(1.07);border-color:var(--info);background:var(--info-soft)}
.bin.ok{border-color:var(--g);background:#DDF3E4;animation:pop .35s}
.bin.bad{border-color:var(--bad);background:var(--bad-soft);animation:shake .35s}
.bin.hintc{border-color:var(--g);border-style:dashed}
@keyframes pop{50%{transform:scale(1.1)}}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.end{position:absolute;inset:0;z-index:40;background:#fff;overflow:auto;padding:26px 18px 22px;display:flex;flex-direction:column;gap:14px}
.end[hidden]{display:none}
.end h2{font-size:1.9rem;font-weight:900;letter-spacing:-.02em;line-height:1.1}
.end .big{font-size:3.4rem;font-weight:900;color:var(--g);line-height:1}
.end .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.miss{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:14px;font-size:.92rem}
.miss .e{font-size:1.8rem;line-height:1}
.badge{display:inline-block;background:var(--g);color:#fff;font-weight:800;font-size:.8rem;padding:3px 12px;border-radius:99px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}