/* ============================================================
   FIN DE MES — estilo
   Paleta: celeste argentino + crema + dorado sol + carbón
   ============================================================ */
:root{
  --celeste:#74ACDF;
  --celeste-osc:#4A8BC4;
  --celeste-prof:#2B5F8E;
  --crema:#FFF6E5;
  --crema-osc:#F3E7CC;
  --sol:#F6B40E;
  --sol-osc:#D89B00;
  --carbon:#2B2B26;
  --tinta:#3A3A33;
  --verde:#3E9B4F;
  --verde-claro:#E2F3E4;
  --rojo:#D9534F;
  --rojo-claro:#FBE7E6;
  --amarillo-claro:#FFF3CD;
  --blanco:#FFFFFF;
  --gris:#8A8A80;
  --radius:16px;
  --shadow:0 4px 14px rgba(43,43,38,.12);
  --shadow-up:0 -4px 14px rgba(43,43,38,.10);
  --font-display:'Fredoka',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--font-body);
  color:var(--tinta);
  background:linear-gradient(180deg,#9CC6EA 0%,#BFDCF2 35%,#EAD9B8 100%) fixed;
  display:flex;justify-content:center;
  font-size:15px;
}
.hidden{display:none !important}

#app{
  width:100%;max-width:520px;min-height:100dvh;
  display:flex;flex-direction:column;
  background:var(--crema);
  box-shadow:0 0 40px rgba(43,43,38,.25);
  position:relative;
}

/* ===== HUD ===== */
#hud{
  background:linear-gradient(180deg,var(--celeste-prof),var(--celeste-osc));
  color:#fff;padding:10px 12px 8px;
  position:sticky;top:0;z-index:50;
  box-shadow:var(--shadow);
}
.hud-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.hud-brand{font-family:var(--font-display);font-size:15px;letter-spacing:.5px}
.hud-fecha{font-weight:800;font-size:13px;background:rgba(255,255,255,.18);padding:3px 10px;border-radius:99px}
.hud-btn{background:rgba(255,255,255,.18);border:none;color:#fff;font-size:16px;width:32px;height:28px;border-radius:8px;cursor:pointer}
.hud-stats{display:flex;gap:6px}
.hud-stat{
  flex:1;background:rgba(255,255,255,.14);border-radius:10px;
  padding:5px 6px;text-align:center;font-weight:800;font-size:12.5px;
  display:flex;align-items:center;justify-content:center;gap:4px;
  white-space:nowrap;overflow:hidden;cursor:default;
}
.hs-icon{font-size:13px}
.hud-stat.flash-up{animation:flashVerde .8s}
.hud-stat.flash-down{animation:flashRojo .8s}
@keyframes flashVerde{0%{background:var(--verde)}100%{background:rgba(255,255,255,.14)}}
@keyframes flashRojo{0%{background:var(--rojo)}100%{background:rgba(255,255,255,.14)}}

/* ===== ESCENA ===== */
#escena{position:relative;overflow:hidden;background:linear-gradient(180deg,#A8CFEE 0%,#CBE3F5 70%,#D9C79A 100%)}
#escenaCielo{position:absolute;inset:0;pointer-events:none;font-size:20px}
.nube{position:absolute;opacity:.9;animation:nubes linear infinite}
@keyframes nubes{from{transform:translateX(-60px)}to{transform:translateX(580px)}}
#kioscoVisual{text-align:center;padding:14px 10px 8px;position:relative}
#kioscoEmoji{font-size:64px;line-height:1;filter:drop-shadow(0 6px 8px rgba(43,43,38,.25));transition:transform .3s}
#kioscoEmoji.pop{animation:pop .5s}
@keyframes pop{50%{transform:scale(1.18)}}
#kioscoNombre{font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--celeste-prof);margin-top:2px}
#stickers{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;margin-top:6px;min-height:22px}
.sticker{
  background:var(--blanco);border:1.5px solid var(--crema-osc);border-radius:99px;
  font-size:12px;padding:2px 8px;font-weight:800;box-shadow:0 2px 4px rgba(0,0,0,.08);
}
#ticker{background:var(--carbon);color:#FFE9A8;overflow:hidden;white-space:nowrap;font-size:12.5px;font-weight:700;padding:5px 0}
#tickerInner{display:inline-block;padding-left:100%;animation:ticker 22s linear infinite}
@keyframes ticker{to{transform:translateX(-100%)}}

/* ===== TABS ===== */
#tabs{
  display:flex;background:var(--blanco);
  border-bottom:2px solid var(--crema-osc);
  position:sticky;top:86px;z-index:40;
}
.tab{
  flex:1;border:none;background:none;cursor:pointer;
  font-family:var(--font-body);font-weight:800;font-size:11px;color:var(--gris);
  padding:8px 2px 7px;display:flex;flex-direction:column;align-items:center;gap:1px;
  border-bottom:3px solid transparent;transition:.15s;
}
.tab span{pointer-events:none}
.tab:first-line{font-size:18px}
.tab.active{color:var(--celeste-prof);border-bottom-color:var(--sol)}
.tab .dot{position:absolute;margin-left:26px;margin-top:-2px;width:8px;height:8px;border-radius:99px;background:var(--rojo)}

/* ===== PANEL ===== */
#panel{flex:1;padding:12px 12px 90px;overflow-y:auto}
.card{
  background:var(--blanco);border-radius:var(--radius);
  padding:12px;margin-bottom:10px;box-shadow:var(--shadow);
  border:1.5px solid rgba(43,43,38,.05);
}
.card h3{font-family:var(--font-display);font-size:15px;color:var(--celeste-prof);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.card h3 .h3-right{margin-left:auto;font-size:12px;color:var(--gris);font-family:var(--font-body);font-weight:800}
.mini{font-size:12px;color:var(--gris);font-weight:600;line-height:1.45}
.sep{height:1px;background:var(--crema-osc);margin:8px 0}

/* alertas / pendientes */
.alerta{
  display:flex;gap:8px;align-items:flex-start;
  background:var(--amarillo-claro);border-radius:12px;padding:8px 10px;margin-bottom:6px;
  font-size:12.5px;font-weight:700;line-height:1.35;
}
.alerta.roja{background:var(--rojo-claro)}
.alerta.verde{background:var(--verde-claro)}
.alerta .a-icon{font-size:16px}

/* stats grid */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat-box{background:var(--crema);border-radius:12px;padding:8px 10px;text-align:center}
.stat-box .sb-label{font-size:10.5px;font-weight:800;color:var(--gris);text-transform:uppercase;letter-spacing:.4px}
.stat-box .sb-value{font-size:16px;font-weight:900;color:var(--tinta)}
.stat-box .sb-sub{font-size:10.5px;font-weight:700;color:var(--gris)}
.pos{color:var(--verde) !important}
.neg{color:var(--rojo) !important}

/* ===== filas de categoría (precios / compras) ===== */
.cat-row{
  background:var(--blanco);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:10px 12px;margin-bottom:8px;border:1.5px solid rgba(43,43,38,.05);
}
.cat-head{display:flex;align-items:center;gap:8px}
.cat-emoji{font-size:24px}
.cat-name{font-weight:900;font-size:14px}
.cat-sub{font-size:11.5px;color:var(--gris);font-weight:700}
.cat-right{margin-left:auto;text-align:right}
.cat-body{margin-top:8px}
.semaforo{font-size:10.5px;font-weight:900;padding:2px 8px;border-radius:99px;display:inline-block}
.sem-verde{background:var(--verde-claro);color:var(--verde)}
.sem-amarillo{background:var(--amarillo-claro);color:#A07800}
.sem-rojo{background:var(--rojo-claro);color:var(--rojo)}
.sem-azul{background:#E3F0FB;color:var(--celeste-prof)}

.btn-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chip{
  border:2px solid var(--crema-osc);background:var(--crema);
  border-radius:10px;padding:6px 10px;font-weight:900;font-size:12.5px;
  cursor:pointer;font-family:var(--font-body);color:var(--tinta);
  transition:.12s;user-select:none;
}
.chip:active{transform:scale(.94)}
.chip.primary{background:var(--sol);border-color:var(--sol-osc);color:var(--carbon)}
.chip.celeste{background:var(--celeste);border-color:var(--celeste-osc);color:#fff}
.chip.verde{background:var(--verde);border-color:#2E7A3C;color:#fff}
.chip:disabled{opacity:.4;cursor:not-allowed}
.chip.sel{outline:3px solid var(--celeste);outline-offset:1px}

/* barra de stock / capacidad */
.barra{height:10px;background:var(--crema-osc);border-radius:99px;overflow:hidden;margin-top:4px}
.barra > div{height:100%;border-radius:99px;background:var(--celeste);transition:width .4s}
.barra.warn > div{background:var(--sol)}
.barra.full > div{background:var(--rojo)}

/* ===== botón cerrar mes ===== */
#footer{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:520px;padding:10px 14px 14px;
  background:linear-gradient(180deg,rgba(255,246,229,0),var(--crema) 40%);
  z-index:45;
}
#btnCerrarMes{
  width:100%;border:none;cursor:pointer;
  background:linear-gradient(180deg,var(--sol),var(--sol-osc));
  color:var(--carbon);font-family:var(--font-display);font-weight:700;
  font-size:18px;padding:14px;border-radius:16px;
  box-shadow:0 6px 0 #B07F00,0 10px 18px rgba(43,43,38,.25);
  transition:.1s;letter-spacing:.5px;
}
#btnCerrarMes:active{transform:translateY(4px);box-shadow:0 2px 0 #B07F00}
#btnCerrarMes:disabled{opacity:.5}

/* ===== modales ===== */
.modal-bg{
  position:fixed;inset:0;background:rgba(28,40,52,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:100;
  padding:16px;animation:fadeIn .2s;
}
@keyframes fadeIn{from{opacity:0}}
.modal{
  background:var(--crema);border-radius:22px;width:100%;max-width:440px;
  max-height:88dvh;overflow-y:auto;padding:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  animation:modalIn .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalIn{from{transform:scale(.85) translateY(20px);opacity:0}}
.modal h2{font-family:var(--font-display);font-size:20px;color:var(--celeste-prof);text-align:center;line-height:1.25;margin-bottom:4px}
.modal .m-emoji{font-size:52px;text-align:center;line-height:1.1;margin-bottom:6px}
.modal .m-texto{font-size:14px;font-weight:600;line-height:1.5;text-align:center;color:var(--tinta);margin-bottom:12px}
.modal .m-opciones{display:flex;flex-direction:column;gap:8px}
.btn-big{
  border:none;cursor:pointer;border-radius:14px;padding:13px 14px;
  font-family:var(--font-body);font-weight:900;font-size:14.5px;
  background:var(--blanco);color:var(--tinta);border:2px solid var(--crema-osc);
  transition:.12s;text-align:center;line-height:1.3;
}
.btn-big:active{transform:scale(.97)}
.btn-big.primary{background:linear-gradient(180deg,var(--sol),var(--sol-osc));border-color:var(--sol-osc);color:var(--carbon)}
.btn-big.celeste{background:linear-gradient(180deg,var(--celeste),var(--celeste-osc));border-color:var(--celeste-osc);color:#fff}
.btn-big.verde{background:var(--verde);border-color:#2E7A3C;color:#fff}
.btn-big .sub{display:block;font-size:11.5px;font-weight:700;opacity:.75;margin-top:2px}

/* P&L tabla */
.pl{width:100%;border-collapse:collapse;font-size:13.5px}
.pl td{padding:5px 2px;font-weight:700}
.pl td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:900}
.pl tr.total td{border-top:2px solid var(--carbon);padding-top:7px;font-size:15px;font-weight:900}
.pl tr.sub td{color:var(--gris);font-size:12px;padding-left:14px;font-weight:700}

/* gráfico */
canvas.chart{width:100%;height:120px;background:var(--crema);border-radius:12px}

/* ===== toast ===== */
#toastRoot{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:6px;width:min(92vw,420px)}
.toast{
  background:var(--carbon);color:#fff;font-weight:800;font-size:13px;
  border-radius:12px;padding:10px 14px;box-shadow:0 8px 20px rgba(0,0,0,.3);
  animation:toastIn .3s, toastOut .4s 2.8s forwards;text-align:center;
}
@keyframes toastIn{from{transform:translateY(-20px);opacity:0}}
@keyframes toastOut{to{transform:translateY(-12px);opacity:0}}

/* ===== pantalla inicio ===== */
.inicio-logo{font-size:74px;text-align:center;line-height:1;margin:4px 0 6px;filter:drop-shadow(0 8px 10px rgba(43,43,38,.3))}
.inicio-titulo{font-family:var(--font-display);font-weight:700;font-size:30px;text-align:center;color:var(--celeste-prof);line-height:1.05}
.inicio-titulo small{display:block;font-size:14px;color:var(--sol-osc);letter-spacing:2px;margin-top:2px}
.inicio-sub{text-align:center;font-weight:800;font-size:13.5px;color:var(--tinta);margin:8px 0 14px;line-height:1.45}
.dif-pills{display:flex;gap:6px;margin:8px 0}
.dif-pill{flex:1;border:2px solid var(--crema-osc);background:var(--blanco);border-radius:12px;padding:8px 4px;text-align:center;font-weight:900;font-size:12px;cursor:pointer}
.dif-pill.sel{border-color:var(--celeste);background:#E3F0FB;color:var(--celeste-prof)}
.dif-pill .d-emoji{font-size:18px;display:block}

/* share card */
.share-card{
  background:linear-gradient(160deg,var(--celeste-prof),var(--celeste-osc));
  border-radius:18px;color:#fff;padding:16px;text-align:center;margin-bottom:12px;
}
.share-card .sc-big{font-family:var(--font-display);font-size:26px;font-weight:700;margin:6px 0}
.share-card .sc-row{display:flex;justify-content:space-around;margin-top:10px}
.share-card .sc-stat .v{font-size:17px;font-weight:900}
.share-card .sc-stat .l{font-size:10.5px;font-weight:800;opacity:.8;text-transform:uppercase;letter-spacing:.5px}

/* tutorial Norma */
.norma{display:flex;gap:10px;align-items:flex-start;background:var(--blanco);border-radius:14px;padding:10px;margin-bottom:10px;border:2px solid var(--crema-osc)}
.norma .n-cara{font-size:34px}
.norma .n-texto{font-size:13px;font-weight:700;line-height:1.45}
.norma .n-texto b{color:var(--celeste-prof)}

/* glosario */
.glos-item{margin-bottom:10px}
.glos-item .g-t{font-weight:900;color:var(--celeste-prof);font-size:14px}
.glos-item .g-d{font-size:13px;font-weight:600;line-height:1.45}

/* utilidades */
.center{text-align:center}
.mt8{margin-top:8px}.mt12{margin-top:12px}
.row-flex{display:flex;align-items:center;gap:8px}
.spacer{flex:1}
input[type=number]{
  width:80px;border:2px solid var(--crema-osc);border-radius:10px;padding:7px;
  font-family:var(--font-body);font-weight:900;font-size:14px;text-align:center;color:var(--tinta);
  background:var(--blanco);
}
.tag-evento{display:inline-block;background:var(--rojo-claro);color:var(--rojo);font-size:10.5px;font-weight:900;padding:2px 8px;border-radius:99px;margin:0 0 4px}

@media (max-width:380px){
  .hud-stat{font-size:11px}
  #panel{padding:10px 8px 90px}
}

/* accesibilidad: respetar reduced-motion del sistema */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ===== game over: apodo + ranking ===== */
.go-nick{display:flex;gap:8px;margin:10px 0}
.go-nick input{
  flex:1;border:2px solid var(--crema-osc);border-radius:12px;
  padding:11px 14px;font-family:var(--font-body);font-weight:700;font-size:14px;
  background:#fff;color:var(--tinta);min-width:0;
}
.go-nick input:focus{outline:none;border-color:var(--celeste)}
.go-ranking{margin:4px 0 10px}
.rk-box{background:#fff;border:2px solid var(--crema-osc);border-radius:14px;padding:12px 14px}
.rk-pos{font-weight:800;font-size:14px;text-align:center;color:var(--celeste-prof);margin-bottom:8px;line-height:1.35}
.rk-tabla{width:100%;border-collapse:collapse;font-size:13.5px}
.rk-tabla td{padding:5px 4px;border-bottom:1px solid var(--crema)}
.rk-tabla tr:last-child td{border-bottom:none}
.rk-n{width:28px;font-weight:900;color:var(--sol-osc);text-align:center}
.rk-v{text-align:right;font-weight:800;color:var(--verde);white-space:nowrap}
.rk-refs{text-align:center;font-size:13px;font-weight:700;margin-top:9px;color:var(--tinta)}