/* JD & Santi On Tour · estilos de Gastos, uso sin internet y ajustes para iPad / iPhone */

/* ---------- ajustes generales ---------- */
.mode{border:0;font-family:inherit;cursor:pointer;color:var(--ink)}
.mode.real{color:var(--green)}
@media (max-width:640px){.layers{top:54px}.mode{max-width:calc(100% - 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.leaflet-control-layers-toggle,.leaflet-retina .leaflet-control-layers-toggle{background-image:none!important;display:grid!important;place-items:center}
.leaflet-control-layers-toggle::after{content:"🗺️";font-size:20px}
.leaflet-container{background:var(--sky)}
.tabs{overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{min-width:44px}
@media (max-width:440px){.tabs{gap:0;padding-left:4px;padding-right:4px}.tabs button{font-size:10px;padding:6px 0}.tabs button .ic{font-size:18px}}
@media (max-width:440px){.top{padding:10px 14px 8px}.brand h1{font-size:17px}.seg span{display:none}.seg button{min-width:32px;height:30px}}
.offbanner{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:990;max-width:560px;margin:0 auto;display:flex;gap:8px;align-items:center;background:var(--ink);color:#fff;border-radius:18px;padding:10px 12px;box-shadow:0 14px 30px -12px rgba(18,52,77,.6)}
.offbanner span{flex:1;font-weight:700;font-size:14px}
.gbar{height:10px;border-radius:999px;background:var(--paper);overflow:hidden;margin:8px 0 6px}
.gbar i{display:block;height:100%;background:var(--orange);border-radius:999px;transition:width .3s}

/* ---------- gastos: estructura ---------- */
.ghead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.ghead h2{margin-bottom:6px}
.gsync{border:0;cursor:pointer;font-family:inherit;text-align:left;max-width:100%;white-space:normal;line-height:1.3;min-height:30px}
.gtabs{display:flex;gap:4px;background:var(--paper);border-radius:999px;padding:4px;margin:6px 0 14px;overflow-x:auto;scrollbar-width:none;position:sticky;top:64px;z-index:500;box-shadow:0 8px 20px -16px rgba(18,52,77,.6)}
.gtabs::-webkit-scrollbar{display:none}
.gtabs button{flex:1 0 auto;border:0;background:transparent;border-radius:999px;padding:9px 14px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;font-family:inherit;color:var(--ink)}
.gtabs button.on{background:var(--ink);color:#fff}
.gh3{margin:0 0 10px;font-size:18px}
.gh4{margin:4px 0 8px;font-size:13px;font-weight:800;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.gnota{font-size:13px;color:var(--ink-2);line-height:1.45;margin:8px 0 0}
.gnota.gwarn{color:var(--orange-deep);font-weight:700}
.gtot{margin-bottom:14px}
.gtot .stat b{font-size:clamp(20px,3vw,28px)}

/* ---------- formulario ---------- */
.gform{padding:18px}
.gl{display:block;font-size:13px;font-weight:800;color:var(--ink-2);margin:14px 0 6px}
.gl small{font-weight:600}
.gl>.gin{margin-top:6px}
.gin{display:block;width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--sky-2);border:2px solid transparent;border-radius:14px;padding:11px 13px;min-height:46px;-webkit-appearance:none;appearance:none}
.gin:focus{outline:none;border-color:var(--orange);background:#fff}
select.gin{background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:32px}
textarea.gin{resize:vertical;min-height:64px}
input[type=date].gin{min-height:46px}
.gmonto{display:flex;gap:10px;align-items:flex-end}
.gmonto .gl{flex:1;margin-top:0}
.gnum{font-size:30px!important;font-weight:800;letter-spacing:-.02em;padding:8px 13px!important;font-variant-numeric:tabular-nums}
.gcur{flex:none;margin-bottom:4px}
.gcur button{padding:10px 14px;font-family:inherit}
.gconv{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;margin-top:8px;font-size:15px}
.gconv b{color:var(--orange-deep)}
.gtasa{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ink-2)}
.gtasa .gin{width:92px;display:inline-block;min-height:36px;padding:6px 10px;font-size:15px}
.gfila{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.gfila .gl{flex:1 1 180px}
.gdia{flex:1 1 160px;font-weight:800;color:var(--orange-deep);padding:0 0 12px}
.gfila2{gap:10px}
.gfila2 .gl{margin-bottom:0}
.gchips{display:flex;flex-wrap:wrap;gap:6px}
.gchips .chip{font-family:inherit;color:var(--ink);background:var(--sky-2)}
.gchips .chip.on{background:var(--orange-2)}
.gchips .chip.add,.gcat.add{border:2px dashed var(--sky-3);background:transparent}
.gcats{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px}
.gcat{border:2px solid transparent;background:var(--sky-2);border-radius:16px;padding:8px 6px;font:inherit;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.2;text-align:center;min-height:62px;justify-content:center}
.gcat span{font-size:22px}
.gcat.on{border-color:var(--orange);background:var(--orange-2)}
.gdiv{display:flex;width:100%;flex-wrap:wrap}
.gdiv button{flex:1;font-family:inherit;color:inherit}
.gmontos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:8px}
.gmontos label{font-size:13px;font-weight:700;color:var(--ink-2)}
.gmontos .gin{margin-top:4px}
.gbig{padding:14px 22px;font-size:16px}
.gacciones{position:sticky;bottom:calc(76px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--paper) 30%);padding:10px 0 2px;margin-bottom:-4px;z-index:5}
.gdel{background:#FBE4E4;color:#9B2C2C}
.gerr{background:#FBE4E4;color:#9B2C2C;font-weight:700}

/* ---------- candado ---------- */
.glock{max-width:560px;margin:0 auto 14px;text-align:left}
.glock-ic{font-size:44px;line-height:1}
.glock h3{margin:6px 0;font-size:22px}
.glock p{color:var(--ink-2);line-height:1.5;margin:0 0 6px}

/* ---------- lista ---------- */
.gfiltros{padding:12px 16px}
.gfiltros summary{cursor:pointer;font-weight:800;list-style:none;display:flex;align-items:center;gap:8px;min-height:30px}
.gfiltros summary::-webkit-details-marker{display:none}
.gfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 10px}
.gdiahead{display:flex;justify-content:space-between;align-items:baseline;padding:4px 6px 6px;font-size:14px;color:var(--ink-2)}
.gdiahead b{color:var(--ink);text-transform:capitalize}
.gdiahead span{font-weight:800;color:var(--orange-deep)}
.glista{padding:6px 10px}
.gitem{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;border:0;background:transparent;padding:10px 4px;border-top:1px solid var(--sky-2);text-align:left;font:inherit;color:inherit;cursor:pointer}
.gitem:first-child{border-top:0}
.gitem:hover{background:#FFF8F2}
.gic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px}
.gtx b{display:block;font-size:15px;line-height:1.3}
.gtx small{display:block;font-size:12px;color:var(--ink-2);line-height:1.45;margin-top:2px}
.gval{text-align:right;white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.gval b{font-size:16px;font-variant-numeric:tabular-nums}
.gval small{font-size:12px;color:var(--ink-2)}
.gval i{font-style:normal;font-size:13px}

/* ---------- gráficas ---------- */
.gbars{display:grid;gap:8px}
.gbar-r{display:grid;grid-template-columns:minmax(90px,30%) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13px}
.gbar-l{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none}
.gbar-t{display:block;height:12px;background:var(--sky-2);border-radius:999px;overflow:hidden}
.gbar-t i{display:block;height:100%;border-radius:999px;background:var(--orange)}
.gbar-v{text-align:right;line-height:1.15;font-variant-numeric:tabular-nums}
.gbar-v b{display:block;font-size:13px}.gbar-v small{font-size:11px;color:var(--ink-2)}
.gdonawrap{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:16px;align-items:center}
.gdona{width:100%;height:auto;transform:rotate(0deg)}
.gdona circle{transition:stroke-dasharray .4s}
.gdona-t{font-size:4.2px;font-weight:800;text-anchor:middle;fill:var(--ink);font-family:var(--font)}
.gdona-s{font-size:3px;font-weight:700;text-anchor:middle;fill:var(--ink-2);font-family:var(--font)}
.gley{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.gley li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:4px 8px;align-items:center;font-size:14px}
.gley i{width:12px;height:12px;border-radius:4px}
.gley small{grid-column:2/4;color:var(--ink-2);font-size:12px;margin-top:-4px}
.gpres{padding:8px 0;border-top:1px solid var(--sky-2)}
.gpres:first-of-type{border-top:0}
.gpres-h{display:flex;justify-content:space-between;gap:8px;font-size:14px;margin-bottom:6px;flex-wrap:wrap}
.gpres-h span{color:var(--ink-2);font-size:13px}
.gpres small{font-size:12px;color:var(--ink-2)}
.gpres.warn .gbar-t i{background:#E9B949}
.gpres.over .gbar-t i{background:#C53030}
.gpres.over .gpres-h b:last-child{color:#C53030}

/* ---------- cuentas ---------- */
.gpos{color:var(--green);font-weight:800}
.gneg{color:#C53030;font-weight:800}
.gtr{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gtr li{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--sky-2);border-radius:14px;padding:12px 14px;font-size:15px}
.gtr li span{text-align:right;line-height:1.2}
.gtr li span b{display:block;font-size:17px;color:var(--orange-deep)}
.gtr li span small{color:var(--ink-2);font-size:12px}

/* ---------- ajustes ---------- */
.gper{display:flex;gap:8px;align-items:center;margin-top:8px}
.gper .gin{flex:1}
.gcatrow{padding:8px 0;border-top:1px solid var(--sky-2)}
.gcatrow:first-of-type{border-top:0}
.gcatrow b{display:block;margin-bottom:6px}
.gcatrow .pill{font-weight:600}
label.btn{cursor:pointer}

@media (max-width:860px){.gtabs{top:60px}}
@media (max-width:520px){.gdonawrap{grid-template-columns:1fr}.gdona{max-width:220px;margin:0 auto;display:block}.gbar-r{grid-template-columns:minmax(70px,34%) minmax(0,1fr) auto}.gform{padding:14px}.gnum{font-size:26px!important}.gcats{grid-template-columns:repeat(3,minmax(0,1fr))}}