/*
 * Biyuyo · fundamentos visuales v6.1
 * Ajustes globales seguros: accesibilidad, temas, jerarquía, encabezados y
 * navegación. Los rediseños particulares de pantallas se aplicarán después.
 */

html{scroll-padding-bottom:calc(var(--bottom-nav-h) + 28px)}
body{color:var(--ink);background-color:var(--bg)}
button,input,select,textarea{font:inherit}
button,input,select,textarea,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}

/* Superficies: la elevación se reserva para contenedores importantes. */
.panel{background:var(--card);border-color:var(--line);box-shadow:var(--shadow)}
.panel .ph{border-bottom-color:var(--line)}
.modal{background:var(--card-raised);box-shadow:var(--shadow-lg)}
.modal .mh{z-index:3;background:var(--card-raised)}
.modal .mf{
  position:sticky;
  bottom:0;
  z-index:3;
  background:color-mix(in srgb,var(--card-raised) 94%,transparent);
  border-top:1px solid var(--line);
  backdrop-filter:blur(12px);
}

/* Controles consistentes. */
.btn{min-height:42px;justify-content:center}
.btn-sm{min-height:36px}
.btn-ghost{background:var(--card-raised);border-color:var(--line2);color:var(--violet-d)}
.iconbtn{
  width:36px;
  height:36px;
  min-width:36px;
  color:var(--ink2);
  background:var(--card-raised);
  border-color:var(--line2);
}
.fld input,.fld select,.filters input,.filters select,.monthsel select{
  min-height:var(--control-h);
  color:var(--ink);
  border-color:var(--line2);
}
.cinput{min-height:36px;color:var(--ink)}
.fld input:focus,.fld select:focus,.filters input:focus,.filters select:focus,.cinput:focus,.monthsel select:focus{
  outline:none;
  border-color:var(--focus);
  box-shadow:0 0 0 3px var(--focus-ring);
}

/* Estados y ayudas con contraste equivalente en ambos temas. */
.callout.info{background:var(--info-bg);color:var(--info-ink);border-color:var(--info-line)}
.callout.warn{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)}
.callout.good{background:var(--good-bg);color:var(--good-ink);border-color:var(--good-line)}
.pill.ok{background:var(--good-bg);color:var(--green)}
.pill.bad{background:var(--rose);color:var(--red)}

/* El contexto del encabezado depende de la pantalla. */
.topbar.context-minimal .monthsel,.topbar.context-minimal .rates{display:none}
.topbar.context-rates .monthsel{display:none}
.topbar.context-month .rates{display:none}

/* Navegación e información activa. */
.nav a,.side .foot button{min-height:42px}
.bottomnav button{min-height:var(--touch)}
.bottomnav button.on{color:var(--violet-d)}
.bottomnav button.on .bi{background:var(--lav2)}

/* Mercado conserva su estructura actual en esta fase, pero ya es legible y táctil. */
.cchk{width:24px;height:24px;min-width:24px}
.qty button{
  width:40px;
  height:40px;
  min-width:40px;
  color:var(--violet-d);
  background:var(--lav);
}
.mk-sub{color:var(--violet-d)}
.mkitem.okrow .mk-main,.mkitem.okrow .mk-sub{opacity:1}
.mkitem.okrow .mk-name{color:var(--ink2)}

/* Tema oscuro: reglas que antes heredaban colores del tema claro. */
[data-theme="dark"] .panel,[data-theme="dark"] .modal,[data-theme="dark"] .rate,[data-theme="dark"] .monthsel{
  background:var(--card);
  border-color:var(--line);
}
[data-theme="dark"] .panel .ph,[data-theme="dark"] .modal .mh{
  background:color-mix(in srgb,var(--card-raised) 72%,var(--card));
}
[data-theme="dark"] .filters,[data-theme="dark"] .cartprog{background:var(--bg2)}
[data-theme="dark"] .filters input,[data-theme="dark"] .filters select,[data-theme="dark"] .monthsel select,
[data-theme="dark"] .fld input,[data-theme="dark"] .fld select,[data-theme="dark"] .cinput{
  color:var(--ink);
  background:var(--card-raised);
  border-color:var(--line2);
}
[data-theme="dark"] select option{color:var(--ink);background:var(--card)}
[data-theme="dark"] .chip,[data-theme="dark"] .b-tipo,[data-theme="dark"] .tchip.on{
  color:var(--ink);
  background:var(--lav2);
}
[data-theme="dark"] .btn-ghost,[data-theme="dark"] .iconbtn{
  color:var(--violet-d);
  background:var(--card-raised);
  border-color:var(--line2);
}
[data-theme="dark"] .mk-sub,[data-theme="dark"] .qty button,[data-theme="dark"] .addmini{
  color:var(--violet-d);
}
[data-theme="dark"] .mkitem.okrow .mk-name,[data-theme="dark"] .mkitem.okrow .mk-controls{
  color:var(--ink);
}
[data-theme="dark"] .hero-line.gold{background:#563f16;color:#ffe6a3;border-color:#806523}
[data-theme="dark"] .bottomnav button{color:var(--ink2)}
[data-theme="dark"] .bottomnav button.on{color:var(--violet-d)}
[data-theme="dark"] .bottomnav button.on .bi{background:var(--lav2)}

.field-help{display:block;margin-top:6px;color:var(--muted);font-size:12px}
.today-status{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.status-pill{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:3px 9px;padding:11px 13px;border:1px solid var(--line2);border-radius:12px;background:var(--card)}
.status-pill>span{grid-row:1/3;width:10px;height:10px;border-radius:50%;background:var(--green)}
.status-pill>span:not(:empty){width:auto;height:auto;background:none}
.status-pill b{font-size:12.5px;color:var(--ink)}
.status-pill small{grid-column:2;color:var(--muted);font-size:11px}
.status-pill .btn{grid-column:3;grid-row:1/3}
.status-pill.offline>span,.status-pill.warn>span:empty{background:var(--gold-d)}
.today-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.today-month{margin-top:16px}
.fld.calculated input{background:var(--lav);border-style:dashed}

.form-movement{display:block;padding:18px 24px}
.form-section{padding:17px 0;border-bottom:1px solid var(--line)}
.form-section:first-of-type{padding-top:4px}
.form-section:last-child{border-bottom:0;padding-bottom:2px}
.form-section-title{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.form-section-title>span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--lav);color:var(--violet-d);font-weight:900;font-size:12px;flex:0 0 auto}
.form-section-title>div{display:flex;flex-direction:column;gap:1px}
.form-section-title b{font-family:var(--disp);font-size:15px;color:var(--ink)}
.form-section-title small{font-size:11.5px;color:var(--muted);font-weight:650}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.form-alert{display:none;margin:0 0 8px;padding:12px 14px;border-radius:11px;background:var(--rose);border:1px solid color-mix(in srgb,var(--red) 35%,transparent);color:var(--red);font-weight:750;font-size:13px}
.form-alert.on{display:block}
.form-alert a{color:inherit;text-decoration:underline}
.preview-section .fpreview{margin:0}
.balance-change{display:flex!important;align-items:center;gap:7px;flex-wrap:wrap}
.balance-change em{font-style:normal;color:var(--muted);font-weight:800}
.balance-change strong{font-family:var(--disp);font-size:16px;color:var(--ink)}
.balance-change strong.after{color:var(--violet-d)}
.preview-note{flex-basis:100%;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--violet) 16%,transparent);color:var(--ink2);font-weight:700;line-height:1.45}
.edit-preview{flex-basis:100%;padding:9px 10px;border-radius:9px;background:var(--card);border:1px solid var(--line2)}
.edit-preview b,.edit-preview span{display:block!important;font-family:inherit!important;font-size:11.5px!important;text-transform:none!important;letter-spacing:0!important}
.edit-preview b{color:var(--violet-d)!important;margin-bottom:3px}.edit-preview span{color:var(--ink2)!important}
.movement-help{margin-top:9px;padding:9px 11px;border-radius:9px;background:var(--lav);color:var(--ink2);font-size:12px;line-height:1.4}
.recent-mov{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px}
.recent-mov>span{font-size:10.5px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.recent-mov button{min-height:34px;padding:6px 9px;border:1px solid var(--line2);border-radius:9px;background:var(--card);color:var(--ink2);font-size:11.5px;font-weight:750}
.relation-context{padding:10px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--lav)}
.relation-context b,.relation-context span{display:block}.relation-context b{color:var(--violet-d);font-size:13px}.relation-context span{margin-top:3px;color:var(--ink2);font-size:11.5px;font-weight:650}
.form-debt,.form-loan{display:block;padding:18px 24px}
.form-goal,.form-goal-action{display:block;padding:18px 24px}
.debt-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:13px;border-radius:12px;background:var(--lav)}
.debt-preview>div:not(.debt-warning):not(.debt-note){padding:10px;border-radius:9px;background:var(--card);border:1px solid var(--line2)}
.debt-preview span,.debt-preview b{display:block}.debt-preview span{font-size:10.5px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em}.debt-preview b{margin-top:4px;font-family:var(--disp);font-size:17px;color:var(--violet-d)}
.debt-warning,.debt-note{grid-column:1/-1;padding:9px 11px;border-radius:9px;font-size:12px;font-weight:700}.debt-warning{background:var(--rose);color:var(--red)}.debt-note{color:var(--ink2);border-top:1px solid var(--line2);border-radius:0;padding-bottom:0}
.section-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.section-actions h2{font-family:var(--disp);font-size:22px;color:var(--ink);margin:0}.section-actions p{margin:3px 0 0;color:var(--muted);font-size:13px}
.goal-card .ph small{display:block;margin-top:2px;color:var(--muted);font-size:11.5px}.goal-total{display:grid;grid-template-columns:1fr auto;align-items:end;margin-bottom:14px}.goal-total span{color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase}.goal-total b{grid-row:1/3;grid-column:2;font-family:var(--disp);font-size:26px;color:var(--violet-d)}.goal-total small{color:var(--muted)}
.goal-detail{display:flex;justify-content:space-between;gap:12px;margin-top:12px;color:var(--muted);font-size:11.5px;font-weight:700}.goal-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:15px;padding-top:13px;border-top:1px solid var(--line)}.goal-actions .btn:disabled{opacity:.42;cursor:not-allowed}.goal-archived{opacity:.82}.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.check-option{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid var(--line2);border-radius:10px;background:var(--card);cursor:pointer}.check-option input{width:19px;height:19px;accent-color:var(--violet)}.check-option span,.check-option b,.check-option small{display:block}.check-option b{color:var(--ink);font-size:13px}.check-option small{margin-top:2px;color:var(--muted);font-size:11px}
.saved-balances{margin-top:9px;padding:8px 10px;border-radius:9px;background:var(--lav);color:var(--ink2);font-size:11.5px}
[aria-invalid="true"]{border-color:var(--red)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 15%,transparent)!important}

@media(max-width:880px){
  :root{--control-h:48px}

  /* Cada contexto ocupa solo las filas que necesita. */
  .topbar.context-minimal{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"title add";
  }
  .topbar.context-rates{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"title add" "rates rates";
  }
  .topbar.context-month{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"title add" "mes mes";
  }
  .topbar.context-full{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"title add" "mes mes" "rates rates";
  }
  .topbar.context-minimal .monthsel,.topbar.context-minimal .rates,
  .topbar.context-rates .monthsel,.topbar.context-month .rates{display:none}
  .topbar.context-rates .rates,.topbar.context-full .rates{display:flex}
  .topbar.context-month .monthsel,.topbar.context-full .monthsel{display:flex}

  .topbar{padding:12px 14px;min-height:68px}
  .topbar .title h1{font-size:19px}
  .topbar .btn-gold{min-height:44px}
  .rate{padding:4px 10px}

  .content{
    padding-left:12px;
    padding-right:12px;
    padding-bottom:calc(var(--bottom-nav-h) + 40px + env(safe-area-inset-bottom));
  }
  .bottomnav{
    left:0;
    right:0;
    bottom:0;
    min-height:var(--bottom-nav-h);
    border-radius:20px 20px 0 0;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    border-left:1px solid var(--line);
    border-right:1px solid var(--line);
    border-bottom:0;
  }
  .bottomnav button{min-width:58px;padding:5px 2px}
  .bottomnav button .bi{min-width:48px;min-height:32px}
  .save-card{bottom:calc(var(--bottom-nav-h) + 14px + env(safe-area-inset-bottom))}

  .iconbtn{width:var(--touch);height:var(--touch);min-width:var(--touch)}
  .qty button{width:var(--touch);height:var(--touch);min-width:var(--touch)}
  .modal .mh .x{width:var(--touch);height:var(--touch)}
  .mf .btn{min-height:48px}
  .form-movement{padding:12px 16px}
  .form-debt,.form-loan,.form-goal,.form-goal-action{padding:12px 16px}
  .form-grid{grid-template-columns:1fr}
  .debt-preview{grid-template-columns:1fr}
  .check-grid{grid-template-columns:1fr}.section-actions{align-items:flex-start}.goal-detail{flex-direction:column;gap:4px}
  .form-section{padding:15px 0}
}

@media(max-width:480px){
  .panel .ph{padding:13px 15px}
  .panel .pb{padding:15px}
  .callout{font-size:13.5px}
}

@media(max-width:720px){
  .today-status{grid-template-columns:1fr}
  .status-pill{min-width:0}
  .status-pill small{min-width:0;overflow-wrap:anywhere}
  .today-actions .btn{flex:1 1 130px}
  .fab{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* Activación: pantalla autónoma, legible y ligera */
.license-page{min-height:calc(100vh - 120px);display:grid;place-items:center;padding:clamp(18px,4vw,48px)}
.settled-history{margin-top:14px;border:1px solid var(--line2);border-radius:14px;background:var(--card);overflow:hidden}.settled-history>summary{cursor:pointer;padding:14px 16px;color:var(--green);font-weight:900}.settled-history>div{border-top:1px solid var(--line)}.settled-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line)}.settled-row:last-child{border-bottom:0}.settled-row>span{display:flex;align-items:center;gap:10px}.settled-row>span:first-child{min-width:0;flex-direction:column;align-items:flex-start;gap:2px}.settled-row small{color:var(--muted)}
@media(max-width:600px){.settled-row,.settled-row>span:last-child{align-items:stretch;flex-direction:column}.settled-row>span:last-child{gap:7px}.settled-row .btn{width:100%;justify-content:center}}
.license-card{width:min(760px,100%);padding:clamp(22px,4vw,42px);border:1px solid var(--line2);border-radius:24px;background:var(--card);box-shadow:0 20px 55px rgba(74,43,24,.12)}
.license-brand{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px;color:var(--muted);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.license-brand img{width:118px;height:auto}.license-kicker{display:block;margin-bottom:8px;color:var(--gold-d);font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.license-copy h1{margin:0 0 10px;font-size:clamp(27px,5vw,42px);line-height:1.08}.license-copy p{max-width:620px;margin:0;color:var(--muted);font-size:16px;line-height:1.55}
.license-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:26px 0}.license-steps span{display:flex;align-items:center;gap:9px;padding:12px;border-radius:14px;background:var(--bg2);font-size:13px;font-weight:750}.license-steps b{display:grid;place-items:center;flex:0 0 25px;height:25px;border-radius:50%;background:var(--gold);color:#352112}
.license-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end}.license-form label{display:flex;flex-direction:column;gap:5px;font-weight:850}.license-form label small{min-height:32px;color:var(--muted);font-size:12px;font-weight:600;line-height:1.3}.license-form input{width:100%;min-height:48px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--input);color:var(--ink);font:inherit}.license-primary{grid-column:1/-1;min-height:48px}
.license-testing{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:20px;padding:16px;border:1px dashed var(--gold);border-radius:14px;background:var(--gold-soft)}.license-testing div{display:flex;flex-direction:column;gap:3px}.license-testing span{color:var(--muted);font-size:13px}
.license-message{margin-top:16px;padding:13px 15px;border:1px solid var(--warn-line,#e4be5f);border-radius:12px;background:var(--warn-bg,#fff5d6);color:var(--ink);font-weight:700;line-height:1.45}.license-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line2);color:var(--muted);font-size:12px}.license-link{padding:0;border:0;background:none;color:var(--violet);font:inherit;font-weight:850;text-decoration:underline;cursor:pointer}
@media(max-width:640px){.license-page{padding:12px}.license-card{padding:21px;border-radius:18px}.license-brand{margin-bottom:20px}.license-steps{grid-template-columns:1fr}.license-form{grid-template-columns:1fr}.license-form label small{min-height:0}.license-testing,.license-footer{align-items:stretch;flex-direction:column}.license-testing .btn{width:100%}}

@media(max-width:700px){
  .rate-history-head{align-items:stretch!important;flex-wrap:wrap}
  .rate-history-head h3{flex:1 1 auto}
  .rate-history-head .tag{flex:1 1 150px;margin-left:0!important;text-align:right;white-space:normal}
  .rate-history-head .btn{flex:1 0 100%;width:100%;margin:2px 0 0!important;white-space:normal}
  .tscroll::before{content:"Desliza la tabla para ver más →";position:sticky;left:0;display:block;width:max-content;padding:7px 12px;color:var(--muted);font-size:11px;font-weight:800;background:var(--card);z-index:3}
}