/* Tu Tiendita v2 on the web: the app's own design system (lib/theme.ts v2, radius2, type2), so a
   merchant or their customer moving between the app and these pages sees one product (2026-10-16).
   Paper background, white cards only where a card is the design, the warm dark #2A1520 for solid
   fills, money colors for money, rosa only as a soft glow or a tinted icon, never a fill.
   System font everywhere: these are functional pages. Compact on purpose. */
:root{
  --paper:#F4F2EE;--surface:#FFFFFF;--dark:#2A1520;--on-dark:#FAF7F5;
  --text:#2A1520;--text-2:rgba(42,21,32,.55);--text-3:rgba(42,21,32,.42);
  --border:rgba(42,21,32,.07);--hairline:rgba(42,21,32,.06);--fill:rgba(42,21,32,.05);
  --money-in:#1B7F45;--money-owed:#C7362C;--money-in-glass:rgba(27,127,69,.09);--money-owed-glass:rgba(199,54,44,.08);
  --money-in-dark:#6FD08C;--on-dark-2:rgba(250,247,245,.5);--on-dark-fill:rgba(250,247,245,.07);--on-dark-border:rgba(250,247,245,.09);
  --accent:#C4235E;--accent-soft:#F5A3C0;--accent-glass:rgba(196,35,94,.10);
  --info:#3B6BB0;
  --r-tile:10px;--r-control:12px;--r-card:14px;--r-sheet:20px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --page-x:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--paper);color:var(--text);font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
.hidden{display:none!important}

/* The signature glow: rosa as light, never as paint. */
.glow{position:fixed;inset:auto;pointer-events:none;z-index:0;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(196,35,94,.11),rgba(196,35,94,0) 62%)}
.glow.tr{top:-260px;right:-220px}.glow.bl{bottom:-300px;left:-240px;opacity:.7}

/* Type ramp (type2): one family, max weight 700, money always tabular. */
.money{font-size:46px;font-weight:700;letter-spacing:-1.6px;font-variant-numeric:tabular-nums;line-height:1.05}
.money-md{font-size:32px;font-weight:700;letter-spacing:-1.1px;font-variant-numeric:tabular-nums}
.title{font-size:28px;font-weight:700;letter-spacing:-.7px;line-height:1.15;text-wrap:balance}
.title-2{font-size:20px;font-weight:700;letter-spacing:-.3px;line-height:1.25;text-wrap:balance}
.headline{font-size:17px;font-weight:600}
.body{font-size:14px;line-height:1.5}
.sub{font-size:15px;line-height:1.5;color:var(--text-2);text-wrap:pretty}
.caption{font-size:12px;color:var(--text-3)}
.overline{font-size:11px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.9px}

/* A one-purpose page: content straight on the page, a centered column, no card around it. */
.solo{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:40px var(--page-x) 28px;text-align:center}
.solo main{width:100%;max-width:400px}
.solo footer{width:100%;max-width:400px;margin-top:48px}

/* Status mark: the app's tinted circle with its glyph. */
.mark{width:64px;height:64px;border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;justify-content:center}
.mark svg{width:30px;height:30px}
.mark.ok{background:var(--money-in-glass);color:var(--money-in)}
.mark.wait{background:var(--fill);color:var(--text-2)}
.mark.no{background:var(--money-owed-glass);color:var(--money-owed)}
.mark.brand{background:var(--accent-glass);color:var(--accent)}

/* Buttons: the warm dark fill, a full pill, 54 tall like the app's primary. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 28px;border-radius:999px;
  background:var(--dark);color:var(--on-dark);font:700 16px/1 var(--font);text-decoration:none;border:0;cursor:pointer;
  transition:opacity .15s}
.btn:hover{opacity:.9}.btn:active{opacity:.8}
.btn.block{display:flex;width:100%}
.btn.ghost{background:transparent;color:var(--text-2);height:44px;padding:0 16px;font-weight:600;font-size:15px}
.btn.light{background:var(--on-dark);color:var(--dark)}
.btn[disabled]{opacity:.45;cursor:default}

/* Cards: white, hairline, 14 corners. Only where the card itself is the design. */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card)}
.rows .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px}
.rows .row+.row{border-top:1px solid var(--hairline)}
.pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;
  background:var(--fill);color:var(--text-2)}
.pill.in{background:var(--money-in-glass);color:var(--money-in)}
.pill.brand{background:var(--accent-glass);color:var(--accent)}

/* Inputs, the app's fill field. */
.field{width:100%;height:50px;border-radius:var(--r-control);border:1px solid transparent;background:var(--fill);
  padding:0 14px;font:500 16px var(--font);color:var(--text);outline:none}
.field:focus{border-color:rgba(42,21,32,.18);background:var(--surface)}
.field::placeholder{color:var(--text-3)}

/* The dark band: the app's hero surface, and the signature section gradient on the web. Sections only. */
.band{background:linear-gradient(135deg,#1F1F1F,#2A1520,#1F1F1F);color:var(--on-dark)}
.band .sub{color:var(--on-dark-2)}

/* Small site footer shared by every page. */
.site-foot{font-size:13px;line-height:1.55;color:var(--text-3);text-align:center}
.site-foot a{color:var(--text-2);font-weight:600;text-decoration:none}
.site-foot .brand{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-weight:700;font-size:14px;text-decoration:none;margin-bottom:6px}
.site-foot .brand img{width:22px;height:22px;border-radius:6px}

@media (prefers-reduced-motion:no-preference){.rise{animation:rise .45s cubic-bezier(.2,.7,.2,1) both}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}