:root,html[data-theme="champagne"]{--bg:#f6efe0;--panel:#fffdf7;--panel2:#f1e6cc;--text:#1d1608;--muted:#7a6a48;--line:#e2d3ac;--gold:#9a6b00;--gold2:#7d5500;--btn1:#f3d686;--btn2:#cf9d2e;--on-btn:#1d1608;--on-gold:#fff;--input:#fffdf7;--hdr:rgba(246,239,224,.94);--ph:#efe4c8;--logo-bg:transparent;--stripe:rgba(154,107,0,.07);--note-bg:#fbf3da;--note-line:#e6d29a;--note-text:#6b5314;--red:#b3262e;--green:#1f7a45;--danger-bg:#fbe3e3;--danger-text:#9b1c24;--danger-line:#e8a9ad;--r:14px;--disp:'Barlow Condensed','Arial Narrow',Impact,sans-serif}
html[data-theme="rosa"]{--bg:#fbeceb;--panel:#fffafa;--panel2:#f6dcdc;--text:#2a1416;--muted:#8a6468;--line:#ecc9c9;--gold:#a1692a;--gold2:#86501a;--btn1:#f6d3a3;--btn2:#dc9d6c;--on-btn:#2a1416;--on-gold:#fff;--input:#fffafa;--hdr:rgba(251,236,235,.94);--ph:#f4d9d8;--stripe:rgba(161,105,42,.07);--note-bg:#fdf0e2;--note-line:#efcfa8;--note-text:#7a4a17}
html[data-theme="negro"]{--bg:#0d0b07;--panel:#17130b;--panel2:#211b0f;--text:#f5ecd5;--muted:#b3a583;--line:#3a2f17;--gold:#d7b35a;--gold2:#f0d98c;--btn1:#f0d98c;--btn2:#d7b35a;--on-btn:#15120a;--on-gold:#15120a;--input:#0c0a06;--hdr:rgba(13,11,7,.93);--ph:#1f1a0f;--logo-bg:radial-gradient(circle,#fff8e6 62%,#f0e2b9 100%);--stripe:rgba(215,179,90,.07);--note-bg:#1b1810;--note-line:#4a3f22;--note-text:#e9dcae;--red:#e5646a;--green:#6fcf97;--danger-bg:#3a1a1c;--danger-text:#ffd5d5;--danger-line:#6d3236}
html[data-theme="vino"]{--bg:#2a0f17;--panel:#381820;--panel2:#45202a;--text:#f8ecdc;--muted:#cfa9ad;--line:#5c2c38;--gold:#e3bd6a;--gold2:#f3d995;--btn1:#f3d995;--btn2:#e3bd6a;--on-btn:#2a0f17;--on-gold:#2a0f17;--input:#240c13;--hdr:rgba(42,15,23,.94);--ph:#4a2430;--logo-bg:radial-gradient(circle,#fff8e6 62%,#f0e2b9 100%);--stripe:rgba(227,189,106,.08);--note-bg:#431c27;--note-line:#6b3441;--note-text:#f3d995;--red:#ff8d92;--green:#7fd9a4;--danger-bg:#4a1c24;--danger-text:#ffd5d5;--danger-line:#7d3a45}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);transition:background .2s;color:var(--text);font:16px/1.45 'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;min-height:100vh}
body.lock{overflow:hidden}
.hidden,[hidden]{display:none!important}
.muted{color:var(--muted)}.gold{color:var(--gold)}
.disp{font-family:var(--disp);text-transform:uppercase;letter-spacing:.06em;font-weight:800;font-style:italic}
.brand{font-family:var(--disp);font-weight:800;font-style:italic;font-size:28px;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.brand span{color:var(--gold)}
.brand small{font-size:.5em;letter-spacing:.12em;text-transform:lowercase;color:var(--muted);margin-right:.4em;font-weight:700}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
input,select,textarea{width:100%;background:var(--input);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-height:48px;font-size:16px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
textarea{resize:vertical}
label{display:block;color:var(--muted);font-size:14px;margin:0 0 6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:12px;background:linear-gradient(180deg,var(--btn1),var(--btn2));color:var(--on-btn);font-family:var(--disp);font-style:italic;font-weight:800;font-size:18px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:0;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn.ghost{background:transparent;color:var(--gold);border:1px solid var(--gold)}
.btn.dark{background:var(--panel2);color:var(--text);border:1px solid var(--line)}
.btn.danger{background:var(--danger-bg);color:var(--danger-text);border:1px solid var(--danger-line)}
.btn.sm{min-height:40px;padding:0 14px;font-size:15px}
.btn.block{width:100%}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:15px;font-weight:600;display:inline-flex;align-items:center;white-space:nowrap}
.chip.on{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.chip.off{opacity:.35;text-decoration:line-through}
.scroll-x{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.scroll-x::-webkit-scrollbar{display:none}
.stripes{background:repeating-linear-gradient(-55deg,var(--stripe) 0 2px,transparent 2px 14px)}
.toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--text);border:1px solid var(--gold);color:var(--bg);padding:12px 18px;border-radius:12px;z-index:99;max-width:90vw;font-weight:600;box-shadow:0 8px 30px #0006}
.toast.err{border-color:#b3262e;color:#fff;background:#b3262e}

/* diseño predeterminado: Rosa y oro */
:root:not([data-theme]){--bg:#fbeceb;--panel:#fffafa;--panel2:#f6dcdc;--text:#2a1416;--muted:#8a6468;--line:#ecc9c9;--gold:#a1692a;--gold2:#86501a;--btn1:#f6d3a3;--btn2:#dc9d6c;--on-btn:#2a1416;--on-gold:#fff;--input:#fffafa;--hdr:rgba(251,236,235,.94);--ph:#f4d9d8;--stripe:rgba(161,105,42,.07);--note-bg:#fdf0e2;--note-line:#efcfa8;--note-text:#7a4a17}
/* logo */
.logo{display:block;object-fit:contain;border-radius:50%;background:var(--logo-bg)}
.logo.sm{width:46px;height:46px}
.logo.xl{width:min(120px,32vw);height:min(120px,32vw);margin:0 auto 8px}
.brandrow{display:flex;align-items:center;gap:10px;min-width:0}
/* selector de diseño */
.themes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.theme-opt{border:2px solid var(--line);border-radius:14px;padding:10px;background:var(--panel);text-align:left;display:grid;gap:8px}
.theme-opt.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset}
.theme-opt b{font-size:15px}
.theme-opt .sw{display:flex;height:34px;border-radius:8px;overflow:hidden;border:1px solid #0002}
.theme-opt .sw i{flex:1}
.brandrow{flex:1 1 auto;overflow:hidden}
.brandrow .brand{white-space:nowrap;font-size:22px;letter-spacing:.08em}
.brandrow .brand small{display:none}
@media(min-width:480px){.brandrow .brand{font-size:26px;letter-spacing:.14em}.brandrow .brand small{display:inline}}
.btn.block{white-space:normal;text-align:center;line-height:1.1;padding-top:8px;padding-bottom:8px}