/* Nueva MB Suite — mismo sistema visual que «Mis finanzas» */
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dm-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dm-sans-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dm-sans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dm-sans-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --bg: #F6F2EA; --surface: #FFFDF9; --sunk: #F1ECE2; --line: #E8E1D4; --line2: #D9D0C0;
  --ink: #1F2A2E; --muted: #5E686B; --faint: #A39C8C;
  --accent: #1F5C57; --accent-soft: #E4F0EE; --accent-ink: #FFFFFF;
  --ok-bg: #E3F0E7; --ok: #1E5233; --warn-bg: #FBE3CF; --warn: #7F3E14; --err-bg: #F8DCD8; --err: #9A2A1F;
  --pos: #1E6B3E; --neg: #A8321F;
  --g1: #2F7D78; --g1-bg: #E2F0EE; --g2: #C0674A; --g2-bg: #F7E5DE; --g3: #8A6FB0; --g3-bg: #ECE6F4;
  --g4: #A67C1E; --g4-bg: #F5ECD6; --g5: #3F78B5; --g5-bg: #E1EAF5; --g0: #5B6B9A; --g0-bg: #E5E8F1;
  --c1: #00897A; --c2: #2F5FB3; --c3: #B07F12; --c4: #8A5FB8; --c5: #C45A2E;
  --shadow: 0 1px 2px rgba(31, 42, 46, .05);
  --radius: 14px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #141A1B; --surface: #1C2425; --sunk: #172021; --line: #2A3536; --line2: #364344;
  --ink: #ECE7DE; --muted: #A9B1AF; --faint: #6E7775;
  --accent: #7CC2B9; --accent-soft: #1F3533; --accent-ink: #10201E;
  --ok-bg: #1D3226; --ok: #9FD6B0; --warn-bg: #3A2A1C; --warn: #F1B98B; --err-bg: #3B2220; --err: #F2A397;
  --pos: #8FD3A6; --neg: #F29A8A;
  --g1: #7CC2B9; --g1-bg: #1F3533; --g2: #E79A80; --g2-bg: #3A2721; --g3: #B9A2DA; --g3-bg: #2D2639;
  --g4: #D8B35A; --g4-bg: #362D19; --g5: #8DB4E2; --g5-bg: #1F2C3B; --g0: #A3B0D6; --g0-bg: #252A38;
  --c1: #1A9E8F; --c2: #5F7FE0; --c3: #B8871F; --c4: #9C6BC4; --c5: #D8653C;
  --shadow: none;
  color-scheme: dark;
}

/* ---------- paletas alternativas (Ajustes → Apariencia → Color) ---------- */
/* A · Azul medianoche: sobrio y frío */
:root[data-paleta="azul"] { --bg: #F3F5F8; --surface: #FFFFFF; --sunk: #EBEEF3; --line: #E2E6ED; --line2: #CDD3DE;
  --ink: #172033; --muted: #5A6478; --faint: #9AA3B5; --accent: #2446A6; --accent-soft: #E5EBFA; --accent-ink: #FFFFFF; }
:root[data-paleta="azul"][data-theme="dark"] { --bg: #0E1320; --surface: #161D2E; --sunk: #121827; --line: #252E44; --line2: #323C55;
  --ink: #E8ECF4; --muted: #A3ACC0; --faint: #6B7489; --accent: #8FA9F7; --accent-soft: #1E2A4A; --accent-ink: #0E1320; }
/* B · Burdeos: cálido y elegante */
:root[data-paleta="burdeos"] { --bg: #F7F2F0; --surface: #FFFCFB; --sunk: #F0E8E5; --line: #E9DEDA; --line2: #D9CBC6;
  --ink: #2A1E22; --muted: #6B5D61; --faint: #A8979B; --accent: #8A2B42; --accent-soft: #F5E3E8; --accent-ink: #FFFFFF; }
:root[data-paleta="burdeos"][data-theme="dark"] { --bg: #1A1214; --surface: #241A1D; --sunk: #1F1619; --line: #3A2A2F; --line2: #4A363C;
  --ink: #F1E6E8; --muted: #BDAAAE; --faint: #7D6A6F; --accent: #E8909F; --accent-soft: #3D2229; --accent-ink: #1A1214; }
/* C · Grafito y ámbar: deportivo, mucho contraste */
:root[data-paleta="ambar"] { --bg: #F4F3F1; --surface: #FFFFFF; --sunk: #ECEAE6; --line: #E3E0DA; --line2: #D0CCC4;
  --ink: #1C1C1E; --muted: #5F5E63; --faint: #A09E9A; --accent: #A85607; --accent-soft: #FBEBD9; --accent-ink: #FFFFFF; }
:root[data-paleta="ambar"][data-theme="dark"] { --bg: #121212; --surface: #1C1C1E; --sunk: #171718; --line: #2C2C2F; --line2: #3A3A3E;
  --ink: #EDEBE7; --muted: #A8A6A1; --faint: #6C6A67; --accent: #F2A64A; --accent-soft: #3A2A17; --accent-ink: #121212; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 400 15px/1.5 'DM Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -.01em; margin: 0; }
h1 { font-size: 28px; line-height: 1.15; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
a { color: var(--accent); }
.num, .imp, td.n { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); } .faint { color: var(--faint); }
.pos { color: var(--pos); } .neg { color: var(--neg); }
.small { font-size: 13px; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- estructura ---------- */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 22px 14px; border-right: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 2px; }
.marca { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; }
.marca-logo { width: 32px; height: 32px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font: 600 15px 'Fraunces', serif; }
.marca b { font: 600 17px 'Fraunces', serif; display: block; line-height: 1.1; }
.marca span { font-size: 12px; color: var(--muted); }
.nav-btn { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; color: var(--ink); font: 500 14.5px 'DM Sans'; padding: 8px 10px; border-radius: 9px; cursor: pointer; text-align: left; }
.nav-btn svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.nav-btn:hover { background: var(--sunk); }
a.nav-btn { text-decoration: none; }
.nav-btn[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-btn[aria-current="page"] svg { color: var(--accent); }
.nav-btn .cuenta { margin-left: auto; font-size: 12px; font-weight: 600; background: var(--sunk); color: var(--muted); border-radius: 99px; padding: 0 8px; }
.nav-btn .alerta { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--g2); }
.side-sep { height: 1px; background: var(--line); margin: 12px 6px; }
.side-pie { margin-top: auto; padding: 12px 8px 0; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--muted); }
.side-herr { display: flex; gap: 6px; }
main { min-width: 0; padding: 28px 32px 120px; max-width: 1280px; }

.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cabecera p { margin: 4px 0 0; color: var(--muted); }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line2); background: var(--surface); color: var(--ink); border-radius: 10px; padding: 7px 14px; font: 600 14px 'DM Sans'; cursor: pointer; white-space: nowrap; min-height: 36px; }
a.btn { text-decoration: none; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:hover { border-color: var(--faint); }
.btn.primario { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primario:hover { filter: brightness(1.08); }
.btn.peligro { color: var(--err); border-color: color-mix(in srgb, var(--err) 35%, var(--line2)); }
.btn.peligro.confirmar { background: var(--err); color: #fff; border-color: var(--err); }
.btn.fantasma { border-color: transparent; background: none; }
.btn.fantasma:hover { background: var(--sunk); }
.btn.mini { padding: 3px 9px; min-height: 28px; font-size: 13px; border-radius: 8px; }
.btn:disabled { opacity: .45; cursor: default; }
.icono { width: 36px; height: 36px; padding: 0; border-radius: 10px; border: 1px solid var(--line2); background: var(--surface); color: var(--muted); display: inline-grid; place-items: center; cursor: pointer; flex: none; }
.icono:hover { color: var(--ink); }
.icono svg { width: 18px; height: 18px; }
.icono.mini { width: 28px; height: 28px; border-radius: 8px; border-color: transparent; background: none; }
.icono.mini:hover { background: var(--sunk); }
.icono.activo { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* ---------- tarjetas y cifras ---------- */
.card { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; }
.card + .card, .bloque + .bloque { margin-top: 16px; }
.card-tit { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.card-tit p { margin: 0; color: var(--muted); font-size: 13px; }
.bloque { margin-top: 22px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.kpi > b, .kpi > span.imp { display: block; font: 600 24px/1.2 'DM Sans'; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi span { font-size: 12.5px; color: var(--muted); }
.kpi.grande { grid-column: span 2; background: var(--accent-soft); border-color: transparent; }
.kpi.grande > b { font-size: 30px; color: var(--accent); }
.kpi-sub { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; color: var(--muted); }
.kpi-sub b { display: inline; font-size: 13px; color: var(--ink); }

/* ---------- avisos ---------- */
.aviso { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; }
.aviso .ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--warn-bg); color: var(--warn); }
.aviso .ico svg { width: 16px; height: 16px; }
.aviso.error .ico { background: var(--err-bg); color: var(--err); }
.aviso.info .ico { background: var(--accent-soft); color: var(--accent); }
.aviso.ok .ico { background: var(--ok-bg); color: var(--ok); }
.aviso .txt { flex: 1; min-width: 0; padding-top: 4px; }
.aviso .txt b { font-weight: 600; }
.enlaces-op { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- pastillas ---------- */
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; border-radius: 99px; padding: 1px 9px; background: var(--sunk); color: var(--muted); white-space: nowrap; line-height: 1.6; }
.pill.T { background: var(--warn-bg); color: var(--warn); }
.pill.P { background: var(--g4-bg); color: var(--g4); }
.pill.D { background: var(--err-bg); color: var(--err); }
.pill.C { background: var(--ok-bg); color: var(--ok); }
.pill.g1 { background: var(--g1-bg); color: var(--g1); } .pill.g2 { background: var(--g2-bg); color: var(--g2); }
.pill.g3 { background: var(--g3-bg); color: var(--g3); } .pill.g5 { background: var(--g5-bg); color: var(--g5); }

/* ---------- formularios ---------- */
label.campo { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 500; min-width: 0; }
input, select, textarea { font: 400 14.5px 'DM Sans'; color: var(--ink); background: var(--surface); border: 1px solid var(--line2); border-radius: 9px; padding: 7px 10px; min-height: 36px; width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
input[type="range"] { accent-color: var(--accent); padding: 0; border: 0; background: none; }
input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); margin: 0; }
input.mal { border-color: var(--err); background: var(--err-bg); }
.fila-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.fila-form > * { flex: 1 1 140px; }
.fila-form > .btn { flex: 0 0 auto; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); cursor: pointer; }
.seg { display: inline-flex; background: var(--sunk); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: none; font: 600 13px 'DM Sans'; color: var(--muted); padding: 5px 11px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.seg button .c { font-weight: 500; color: var(--faint); margin-left: 3px; }

/* autocompletar */
.ac { position: relative; }
.ac-lista { position: absolute; z-index: 60; left: 0; top: calc(100% + 3px); min-width: 100%; max-height: 240px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 8px 24px rgba(20, 27, 30, .14); padding: 4px; }
.ac-op { padding: 6px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; font-size: 14px; }
.ac-op:hover, .ac-op.on { background: var(--accent-soft); color: var(--accent); }

/* ---------- tablas ---------- */
.tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
table.t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
table.t th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.t td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t th.n, table.t td.n { text-align: right; white-space: nowrap; }
table.t tbody tr.clic { cursor: pointer; }
table.t tbody tr.clic:hover td { background: var(--sunk); }
table.t tfoot td { font-weight: 700; border-top: 1px solid var(--line2); border-bottom: 0; }
table.t .fijo { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.vacio { color: var(--muted); padding: 18px 0 6px; text-align: center; }

/* ---------- operativa ---------- */
.alta { display: grid; grid-template-columns: 1.2fr 1.6fr 1.5fr 150px auto; gap: 8px; align-items: end; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 16px 0 12px; }
.filtros .buscar { flex: 1 1 220px; }
.op { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line2); border-radius: var(--radius); padding: 12px 14px 10px; margin-bottom: 12px; box-shadow: var(--shadow); }
.op.T { border-left-color: #D98A3D; } .op.P { border-left-color: #C9A227; } .op.D { border-left-color: #C24A3A; } .op.C { border-left-color: #3E8E5E; }
.op-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.op-cab .tit { font-weight: 600; }
.op-cab .gan { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15.5px; }
.op-campos { display: grid; grid-template-columns: 130px 140px minmax(160px, 1.6fr) 140px 140px 110px auto; gap: 8px; align-items: end; margin-bottom: 10px; }
.op-campos .herr { display: flex; gap: 4px; }
.patas { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 860px; font-size: 13.5px; }
.patas th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11.5px; padding: 2px 4px 4px; }
.patas th.n { text-align: right; }
.patas td { padding: 2px 3px; vertical-align: middle; }
.patas input, .patas select { min-height: 32px; padding: 4px 7px; font-size: 13.5px; border-radius: 7px; }
.patas input.n { text-align: right; }
.patas input.dim { background: var(--sunk); color: var(--faint); border-style: dashed; }
.patas td.calc { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); padding-right: 6px; font-size: 13px; }
.patas td.calc.pos { color: var(--pos); font-weight: 700; } .patas td.calc.neg { color: var(--neg); font-weight: 700; }
.patas tr.win input, .patas tr.win select { background: var(--ok-bg); border-color: transparent; }
.patas tr.lose input, .patas tr.lose select { background: var(--err-bg); border-color: transparent; }
.patas input.cuota-mal { box-shadow: 0 0 0 2px var(--g4) inset; }
.op-pie { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.op-pie input { flex: 1 1 260px; }
.op-pie .tot { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.glance { text-align: right; color: var(--muted); font-size: 13.5px; }
.glance b { font-size: 17px; }

/* depósitos y retiradas */
.dos-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.chk-cel { text-align: center; width: 34px; }
.dos-col > .card, .calc-patas > .card { margin-top: 0; }

/* freebets: saldos acumulados con protagonismo */
.cabecera-sec { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.cabecera-sec p { margin: 0; }
.cabecera-sec .btn { margin-left: auto; }
.fb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 16px; }
.fb-casa { padding: 22px 24px; border-top: 4px solid var(--accent); }
.fb-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fb-cab h3 { font-size: 22px; }
.fb-saldo { margin: 10px 0 18px; }
.fb-saldo span { display: block; font-size: 13px; }
.fb-saldo b { font: 600 46px/1.1 'Fraunces', Georgia, serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.fb-form { display: grid; grid-template-columns: 130px 1fr auto auto; gap: 8px; }
.fb-hist { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; }
.fb-hist-tit { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.fb-hist table.t td { padding: 5px 6px; font-size: 13.5px; }
@media (max-width: 480px) {
  .fb-form { grid-template-columns: 1fr 1fr; }
  .fb-form input:nth-child(2) { grid-column: span 1; }
  .fb-saldo b { font-size: 38px; }
}

/* depósitos y retiradas: tipo de movimiento muy visible */
.tipo-mov { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 2px 0 16px; }
.tipo-mov button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 12px;
  border: 2px solid var(--line2); background: var(--surface); color: var(--muted); font: 600 16px 'DM Sans'; cursor: pointer; }
.tipo-mov button svg { width: 20px; height: 20px; }
.tipo-mov button.dep[aria-pressed="true"] { border-color: var(--g1); background: var(--g1-bg); color: var(--g1); }
.tipo-mov button.ret[aria-pressed="true"] { border-color: var(--g2); background: var(--g2-bg); color: var(--g2); }
.card.mov-dep { border-left: 4px solid var(--g1); }
.card.mov-ret { border-left: 4px solid var(--g2); }
.btn.guardar-ret { background: var(--g2); border-color: var(--g2); color: #fff; }

/* selector de paleta */
.paletas { display: flex; gap: 10px; flex-wrap: wrap; }
.paleta { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 12px; border: 2px solid var(--line2);
  background: var(--surface); color: var(--ink); font: 600 14px 'DM Sans'; cursor: pointer; }
.paleta[aria-pressed="true"] { border-color: var(--accent); }
.paleta .muestra { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(0,0,0,.12); }

/* 2up */
.log { list-style: none; margin: 0; padding: 0; font-size: 13.5px; display: flex; flex-direction: column; gap: 3px; }
.log b { display: inline-block; width: 16px; text-align: center; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { border: 1px solid var(--line2); background: var(--surface); color: var(--muted); border-radius: 99px; padding: 2px 10px; font: 600 12.5px 'DM Sans'; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.calc-patas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.calc-patas .card { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.calc-patas .card + .card { margin-top: 0; }
.campo-vacio { min-height: 58px; }
table.t.ranking { font-size: 13.5px; }
table.t td.fuerte { font-weight: 700; color: var(--accent); }
details.card > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
details.card > summary::before { content: '▸'; color: var(--muted); transition: transform .15s; }
details.card[open] > summary::before { transform: rotate(90deg); }
details.card[open] > summary { margin-bottom: 8px; }
@media (max-width: 860px) { .calc-patas { grid-template-columns: minmax(0, 1fr); } .campo-vacio { display: none; } }

/* bonos superiores */
.cuadrante input { min-width: 72px; text-align: right; padding: 4px 6px; min-height: 32px; font-size: 13.5px; }
.cuadrante td.casa { font-weight: 600; white-space: nowrap; }
.casas-sel { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; margin: 10px 0 14px; }

/* ---------- gráficas ---------- */
.graf { width: 100%; height: auto; display: block; overflow: visible; }
.graf text { font: 500 11.5px 'DM Sans'; fill: var(--muted); }
.graf .rejilla { stroke: var(--line); stroke-width: 1; }
.graf .eje { stroke: var(--line2); stroke-width: 1; }
.graf-tip { position: fixed; z-index: 80; pointer-events: none; background: var(--ink); color: var(--bg); border-radius: 9px; padding: 7px 10px; font-size: 12.5px; line-height: 1.45; box-shadow: 0 6px 20px rgba(0,0,0,.18); white-space: nowrap; }
.graf-tip b { font-variant-numeric: tabular-nums; }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.leyenda i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }

/* ---------- barra flotante ---------- */
.flota { position: fixed; right: 22px; bottom: 22px; z-index: 40; display: flex; gap: 6px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: 0 8px 28px rgba(20, 27, 30, .14); }
.flota .sep { width: 1px; height: 22px; background: var(--line); margin: 0 2px; }
.sync { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 0 6px; white-space: nowrap; }
.sync i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.sync.guardado i { background: #3E8E5E; } .sync.guardando i, .sync.pendiente i { background: #C9A227; }
.sync.sin-conexion i, .sync.conflicto i { background: #C24A3A; } .sync.solo-local i { background: var(--g5); }

/* ---------- modal tipo hoja ---------- */
.velo { position: fixed; inset: 0; z-index: 90; background: rgba(15, 20, 22, .38); display: grid; place-items: center; padding: 20px; }
.hoja { background: var(--surface); border-radius: 18px; width: min(560px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.hoja.ancha { width: min(820px, 100%); }
.hoja-cab { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 6px; }
.hoja-cuerpo { padding: 8px 20px 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 0; }
.hoja-pie { display: flex; gap: 8px; padding: 12px 20px 18px; border-top: 1px solid var(--line); }
.hoja-pie .der { margin-left: auto; display: flex; gap: 8px; }

/* ---------- avisos breves ---------- */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--ink); color: var(--bg); border-radius: 11px; padding: 9px 14px; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.2); pointer-events: auto; display: flex; gap: 12px; align-items: center; }
.toast button { background: none; border: 0; color: var(--accent-soft); font: 600 14px 'DM Sans'; cursor: pointer; padding: 0; }

/* ---------- acceso ---------- */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.acceso .card { width: min(420px, 100%); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.acceso .marca { padding: 0; }
.acceso p { margin: 0; color: var(--muted); font-size: 14px; }
.error-txt { color: var(--err); font-size: 13.5px; }

/* ---------- modo privado ---------- */
.privado .imp { filter: blur(7px); user-select: none; }
.privado .patas input.n, .privado .cuadrante input { color: transparent; text-shadow: 0 0 9px var(--ink); }
.privado .graf .valores { visibility: hidden; }

/* ---------- pestañas móviles ---------- */
.tabs { display: none; }
@media (max-width: 1100px) {
  .op-campos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .op-campos .herr { justify-content: flex-end; }
  .alta { grid-template-columns: 1fr 1fr; }
  .alta > .btn { grid-column: span 2; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .side { display: none; }
  main { padding: 18px 16px 150px; }
  h1 { font-size: 24px; }
  .tabs { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--surface); border-top: 1px solid var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .tabs button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; font: 600 11px 'DM Sans'; color: var(--muted); padding: 6px 0; border-radius: 9px; cursor: pointer; position: relative; }
  .tabs button svg { width: 21px; height: 21px; }
  .tabs button[aria-current="page"] { color: var(--accent); }
  .tabs .punto { position: absolute; top: 4px; right: calc(50% - 16px); min-width: 16px; height: 16px; border-radius: 8px; background: var(--g2); color: #fff; font-size: 10px; display: grid; place-items: center; padding: 0 4px; }
  .flota { right: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); }
  .dos-col { grid-template-columns: minmax(0, 1fr); }
  .kpi.grande { grid-column: 1 / -1; }
  .velo { place-items: end center; padding: 0; }
  .hoja, .hoja.ancha { width: 100%; border-radius: 18px 18px 0 0; max-height: 92vh; }
  .op-campos { grid-template-columns: 1fr 1fr; }
  .op-campos .promo { grid-column: span 2; }
  .op-campos .herr { grid-column: span 2; }
  .toasts { bottom: calc(130px + env(safe-area-inset-bottom)); }
  .flota .sync .txt { display: none; }
  .flota { padding: 4px; }
}
@media (max-width: 480px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi b { font-size: 20px; }
  .alta { grid-template-columns: 1fr; } .alta > .btn { grid-column: auto; }
}