/* Identidad oficial Biyuyo — este archivo se carga después de app.css. */
@font-face{font-family:Fredoka;src:url('../fonts/fredoka-latin.woff2') format('woff2');font-style:normal;font-weight:600 700;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('../fonts/nunito-sans-latin.woff2') format('woff2');font-style:normal;font-weight:400 800;font-display:swap}

:root{
  --ink:#482c1d;--ink2:#6a4a38;--muted:#8b6f5e;
  --violet:#0a7dc9;--violet-d:#075f99;--indigo:#482c1d;--indigo-2:#311d13;
  --blue:#0a7dc9;--teal:#168c86;--gold:#fec62b;--gold-d:#dda800;
  --green:#27845c;--red:#d95e38;--rose:#fde8df;
  --bg:#fef7e6;--bg2:#f6ead2;--card:#fffdf7;--line:#eadbc0;--line2:#ddc9a8;
  --lav:#eaf5fc;--lav2:#d7ebf8;
  --shadow:0 1px 2px rgba(72,44,29,.05),0 10px 28px rgba(72,44,29,.09);
  --shadow-lg:0 16px 44px rgba(72,44,29,.18);
  --sans:'Nunito Sans',sans-serif;--disp:Fredoka,'Nunito Sans',sans-serif;
}

body{background-color:var(--bg);background-image:radial-gradient(820px 520px at 92% -5%,rgba(254,198,43,.22),transparent 60%),radial-gradient(760px 560px at -8% 12%,rgba(10,125,201,.10),transparent 58%),linear-gradient(145deg,rgba(255,255,255,.22),transparent 50%)}
h1,h2,h3,h4{font-weight:650}
.side{background:linear-gradient(180deg,#543421 0%,#482c1d 58%,#321e14 100%);color:#fef7e6}
.side .brand{display:flex;align-items:center;justify-content:center;padding:12px 8px 24px}
.side .brand-logo{display:block;width:92%;height:auto}
.nav a{color:#ead9c4}.nav a:hover{color:#fffaf0}.nav a.on{background:linear-gradient(90deg,rgba(254,198,43,.25),rgba(254,198,43,.04));color:#fff}
.side .foot button{color:#ead9c4}.side .foot button:hover{color:#fff}.appmeta{color:#cdb697}

:root:not([data-theme="dark"]) .topbar{background:rgba(254,247,230,.88);border-bottom-color:var(--line2)}
:root:not([data-theme="dark"]) .panel{background:linear-gradient(155deg,#fffdf8,#fbf2df);border-color:var(--line)}
:root:not([data-theme="dark"]) .panel .ph{background:rgba(246,234,210,.54);border-bottom-color:var(--line)}
:root:not([data-theme="dark"]) .kpi{background:linear-gradient(150deg,#fffdf8,#f8eedb);border-color:var(--line)}
:root:not([data-theme="dark"]) .kpi.k-gold{background:linear-gradient(150deg,#fff9e6,#ffedb4);border-color:#efd47d}
:root:not([data-theme="dark"]) .kpi.k-blue{background:linear-gradient(150deg,#f7fcff,#e3f2fb);border-color:#c5e2f3}
:root:not([data-theme="dark"]) .kpi.k-teal{background:linear-gradient(150deg,#f8fdfa,#e5f3ed);border-color:#cbe4d8}
:root:not([data-theme="dark"]) .modal{background:linear-gradient(160deg,#fffdf8,#f8eedb)}
:root:not([data-theme="dark"]) .modal .mh{background:rgba(254,247,230,.95);border-bottom-color:var(--line)}
:root:not([data-theme="dark"]) .filters{background:#f4e6ce}
:root:not([data-theme="dark"]) .filters select,:root:not([data-theme="dark"]) .filters input,:root:not([data-theme="dark"]) .monthsel,:root:not([data-theme="dark"]) .rate{background:#fffaf0;border-color:var(--line2)}
:root:not([data-theme="dark"]) .bottomnav{background:rgba(254,247,230,.84);border-color:rgba(255,255,255,.72)}
:root:not([data-theme="dark"]) .moresheet{background:#fffaf0}
:root:not([data-theme="dark"]) .tbl tbody tr:hover{background:#f6ead2}
:root:not([data-theme="dark"]) .welcome-step{background:#f5e7ce}

.balance-card{background:linear-gradient(135deg,#075f99,#0a7dc9);color:#fff}
.balance-card .eyebrow{color:#dceffc}.balance-card .equiv{color:#e7f4fc}
.hero-line.bs{background:linear-gradient(120deg,#482c1d,#6d432b)}
.tip{background:linear-gradient(115deg,#482c1d,#6a412a 70%,#7b4c31)}
.tip .tx p{color:#f8e9d1}.intro-learn{background:linear-gradient(120deg,#0a7dc9,#075f99)}.intro-learn p{color:#e3f3fc}
.btn-gold,.fab{background:linear-gradient(135deg,#fec62b,#f3ae22);color:#482c1d;text-shadow:none}
.btn-solid{background:#0a7dc9}.btn-solid:hover{background:#075f99}
.kpi.k-bs::before{background:linear-gradient(90deg,#0a7dc9,#48a9e4)}
.kpi.k-gold::before{background:linear-gradient(90deg,#fec62b,#ea733e)}
.kpi.k-blue::before{background:linear-gradient(90deg,#0a7dc9,#52b3e8)}
.cinput:focus,.fld input:focus,.fld select:focus,.tchip.on,.seg-tipo button.on{box-shadow:0 0 0 3px rgba(10,125,201,.14)}

[data-theme="dark"]{
  --ink:#fef7e6;--ink2:#ead9c4;--muted:#bca38f;
  --bg:#24150f;--bg2:#301d14;--card:#382218;--line:#543626;--line2:#6a4936;
  --lav:#17384a;--lav2:#1b4b67;--rose:#542b22;
  --shadow:0 1px 2px rgba(0,0,0,.18),0 10px 28px rgba(0,0,0,.2);
}
[data-theme="dark"] body{background-image:radial-gradient(820px 520px at 92% -5%,rgba(254,198,43,.11),transparent 60%),radial-gradient(760px 560px at -8% 12%,rgba(10,125,201,.12),transparent 58%)}
[data-theme="dark"] .side{background:linear-gradient(180deg,#321e14,#20120d)}
[data-theme="dark"] .topbar{background:rgba(36,21,15,.9)}
[data-theme="dark"] .balance-card{background:linear-gradient(135deg,#075f99,#096eae)}
[data-theme="dark"] .hero-line.bs,[data-theme="dark"] .tip{background:linear-gradient(120deg,#5b3825,#754a30)}
[data-theme="dark"] .reader h5,[data-theme="dark"] .reader .rlead{color:#69b9e9}
[data-theme="dark"] .bottomnav{background:rgba(49,29,19,.94);border-color:#6a4936}
[data-theme="dark"] .moresheet{background:#382218}

.about-brand{display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:16px}
.about-brand img{width:min(360px,100%);border-radius:14px}.about-brand span{color:var(--muted);font-size:12px;font-weight:700}

/* Menú móvil: panel lateral organizado, sin cuadrícula de botones. */
@media(max-width:880px){
  html.menu-open{overflow:hidden}
  .moresheet.on{display:flex;flex-direction:column;position:fixed;left:auto;right:0;top:0;bottom:0;width:min(400px,92vw);max-height:none;padding:0;background:var(--card);border-radius:24px 0 0 24px;box-shadow:-18px 0 48px rgba(49,29,19,.24);overflow:hidden;animation:menuDrawerIn .26s cubic-bezier(.2,.8,.2,1) both}
  @keyframes menuDrawerIn{from{transform:translateX(100%)}to{transform:none}}
  .ms-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 17px 14px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,#fff8e8,#f9edda);flex-shrink:0}
  .ms-brand{display:flex;align-items:center;gap:11px}.ms-brand img{width:44px;height:44px;border-radius:13px}.ms-brand h3{font-size:17px;margin:0;color:var(--ink)}.ms-brand p{font-size:11.5px;color:var(--muted);margin-top:3px}
  .ms-x{width:38px;height:38px;border-radius:12px;background:var(--lav);color:var(--violet-d);font-size:25px;line-height:1;display:grid;place-items:center;flex-shrink:0}
  .ms-menu{padding:15px 14px calc(24px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .ms-section{margin-bottom:20px}.ms-section:last-child{margin-bottom:0}.ms-section h4{font:700 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.09em;color:var(--muted);padding:0 7px 8px}
  .ms-list{display:flex;flex-direction:column;gap:5px}
  .ms-row{display:flex;align-items:center;gap:11px;width:100%;min-height:58px;padding:8px 9px;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--ink);text-align:left;transition:background .16s,border-color .16s,transform .12s}
  .ms-row:active{transform:scale(.985)}.ms-row:hover{background:var(--bg2)}.ms-row.on{background:var(--lav);border-color:#b9dff3}
  .ms-row .ms-ic{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;background:#fff1c5;color:#6d4c00;flex-shrink:0}.ms-row.on .ms-ic{background:#cfeafb;color:var(--violet-d)}
  .ms-row .ms-ic svg{width:20px;height:20px}.ms-row>span:nth-child(2){min-width:0;flex:1}.ms-row b{display:block;font-size:13.5px;line-height:1.2}.ms-row small{display:block;color:var(--muted);font-size:10.8px;line-height:1.25;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ms-row>i{font-style:normal;color:var(--muted);font-size:22px;padding-right:4px}
  .ms-scrim.on{background:rgba(36,21,15,.5);backdrop-filter:blur(3px)}
  [data-theme="dark"] .moresheet.on{background:#382218;box-shadow:-18px 0 50px rgba(0,0,0,.42)}
  [data-theme="dark"] .ms-head{background:linear-gradient(135deg,#42281b,#321e14)}
  [data-theme="dark"] .ms-row:hover{background:#43291d}[data-theme="dark"] .ms-row.on{background:#17384a;border-color:#245b78}
  [data-theme="dark"] .ms-row .ms-ic{background:#523b1d;color:#fec62b}[data-theme="dark"] .ms-row.on .ms-ic{background:#19506d;color:#8bd3f8}
}