/* =====================================================================
   base.css · variables y componentes base (mismo estilo verde de la maqueta)
   ===================================================================== */
:root{
  --g900:#0B3D26; --g700:#0F5132; --g600:#177A4A; --g500:#22A06B; --g100:#DDF3E6; --g50:#EEF7F1;
  --bg:#F3F8F5; --card:#FFFFFF; --ink:#12261C; --ink2:#2B3F35; --muted:#6B8277; --soft:#8AA096; --line:#E3EDE7;
  --red:#D6455D; --redbg:#FDE8EA; --amber:#B7791F; --amberbg:#FFF3DA;
  --blue:#2F5BD8; --bluebg:#E8F0FE; --violet:#5B3FD0; --violetbg:#EEEAFE;
  --radius:12px; --radius-lg:20px;
  --shadow:0 6px 20px rgba(15,50,30,.07);
  --font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.35;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,h5{margin:0;letter-spacing:-.01em}
a{color:var(--g600)}
img,svg{max-width:100%}
.muted{color:var(--muted)} .low{color:var(--red)} .small{font-size:12.5px}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--radius);
  padding:11px 16px;font:600 13.5px var(--font);cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:filter .15s,transform .05s}
.btn:hover{filter:brightness(.97)} .btn:active{transform:translateY(1px)}
.btn-p{background:var(--g700);color:#fff}
.btn-s{background:#fff;color:var(--ink2);box-shadow:inset 0 0 0 1px #D5E3DB}
.btn-d{background:var(--redbg);color:#C0334B}
.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:10px}
.btn-lg{padding:14px 18px;font-size:15px}
.btn-block{display:flex;width:100%}
.btn[disabled]{background:#E4EEE8;color:var(--soft);cursor:not-allowed}
.btn:focus-visible,.input:focus-visible,a:focus-visible,.eye:focus-visible{outline:3px solid #7CCBA0;outline-offset:2px}

/* ---------- formularios ---------- */
.fld{margin-bottom:16px}
.fld label{display:block;font-weight:600;font-size:12.5px;margin-bottom:6px;color:var(--ink2)}
.input{width:100%;background:#fff;border:1px solid #D5E3DB;border-radius:10px;padding:12px 14px;
  font:500 15px var(--font);color:var(--ink);transition:border-color .15s,box-shadow .15s}
.input::placeholder{color:#A9BAB0;font-weight:400}
.input:hover{border-color:#BCCFC4}
.input:focus{border-color:var(--g600);box-shadow:0 0 0 3px rgba(34,160,107,.18);outline:none}
.hint{display:block;margin-top:6px;color:var(--muted);font-size:12px}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;font-size:11px;font-weight:600;white-space:nowrap}
.chip-g{background:var(--g100);color:#0F6B3F}
.chip-r{background:var(--redbg);color:#C0334B}
.chip-a{background:var(--amberbg);color:#9A6516}
.chip-b{background:var(--bluebg);color:var(--blue)}
.chip-n{background:#EEF2F0;color:var(--muted)}
.chip-v{background:var(--violetbg);color:var(--violet)}
.chip-glass{background:rgba(255,255,255,.18);color:#fff}

/* ---------- avisos ---------- */
.alert{border-radius:var(--radius);padding:11px 14px;font-size:13px;font-weight:500;line-height:1.45;margin:0 0 16px}
.alert-r{background:var(--redbg);color:#9B2236}
.alert-a{background:var(--amberbg);color:#7A4E0E}
.alert-g{background:var(--g100);color:#0F5132}
.alert-b{background:var(--bluebg);color:#1F3FA3}

/* ---------- tarjetas y logo ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.logo{width:44px;height:44px;border-radius:12px;background:var(--g700);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}

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