/* Pyenzo Portal · Metas de venta — usa los tokens de styles.css, no define paleta */
/* --m-barra la pone metas.js con la altura REAL de la barra de guardar cuando está
   visible (0 cuando no). Así el último mes nunca queda debajo de ella, sin importar
   cuánto se envuelva el texto y los botones en una pantalla angosta. */
.metas{max-width:1000px;margin:0 auto;padding:24px 20px calc(40px + var(--m-barra, 0px))}
.metas .num{font-variant-numeric:tabular-nums}

.m-enc{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.m-enc h1{font-weight:700;font-size:25px;line-height:1.15;margin:0}
.m-sede{color:var(--bruma);font-size:13.5px;margin:5px 0 0}
.m-anio{display:flex;align-items:center;gap:4px;background:var(--superficie);
  border:1px solid var(--borde);border-radius:999px;padding:4px}
.m-anio button{background:none;border:0;color:var(--bruma);width:30px;height:30px;
  border-radius:999px;font-size:14px}
.m-anio button:hover:not(:disabled){background:var(--marca-suave);color:var(--marca)}
.m-anio button:disabled{opacity:.3;cursor:default}
.m-anio .val{font-weight:700;font-size:15px;padding:0 8px;min-width:52px;text-align:center}

.m-resumen{display:flex;flex-wrap:wrap;gap:14px 46px;margin:24px 0 8px;
  padding-bottom:20px;border-bottom:1px solid var(--borde)}
.m-cifra .et{color:var(--bruma);font-size:12.5px;margin:0 0 3px}
.m-cifra .v{font-weight:700;font-size:24px;line-height:1.1;font-variant-numeric:tabular-nums;margin:0}
.m-cifra.suave .v{color:var(--bruma);font-weight:600}
.m-delta{align-self:center;font-size:13.5px;font-weight:600;padding:6px 12px;border-radius:999px;
  background:var(--enzo-suave);color:var(--enzo)}
.m-delta.arriba{background:var(--logro-suave);color:var(--logro)}

.m-como{color:var(--bruma);font-size:13px;margin:15px 0 0;max-width:72ch}
.m-como b{color:var(--tinta);font-weight:600}

.m-ayudas{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:18px 0 4px}
.m-ayudas .lbl{color:var(--bruma);font-size:13px}
.m-pill{background:var(--superficie);border:1px solid var(--borde);color:var(--profundo);
  border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600}
.m-pill:hover{border-color:var(--marca);background:var(--marca-suave)}
.m-anual{display:flex;align-items:center;gap:8px;background:var(--superficie);
  border:1px solid var(--borde);border-radius:999px;padding:3px 3px 3px 14px}
.m-anual label{color:var(--bruma);font-size:13px;white-space:nowrap}
.m-anual input{width:130px;border:0;background:none;color:var(--tinta);text-align:right;
  font:600 14px "IBM Plex Sans",sans-serif;font-variant-numeric:tabular-nums;padding:6px 0}
.m-anual input:focus{outline:none}
.m-anual button{background:var(--marca);color:var(--btn-ink);border:0;border-radius:999px;
  padding:7px 14px;font-size:13px;font-weight:600}

/* ── La tira del año ── */
.m-cab,.m-fila{display:grid;gap:16px;align-items:center;
  grid-template-columns:150px minmax(110px,1fr) 128px 164px 104px}
.m-cab{padding:0 4px 8px;color:var(--bruma);font-size:12px;font-weight:600;
  border-bottom:1px solid var(--borde);margin-top:14px}
.m-cab .d{text-align:right}
.m-fila{padding:11px 4px;border-bottom:1px solid var(--borde)}
.m-fila.encurso{background:var(--marca-suave);border-radius:10px;
  border-bottom-color:transparent;padding-left:10px;padding-right:10px;margin:2px -6px}
.m-mes{font-weight:700;font-size:15px}
.m-ctx{display:inline-block;margin-top:3px;font-size:11.5px;font-weight:600;
  color:var(--enzo);background:var(--enzo-suave);border-radius:999px;padding:2px 9px}
.m-ctx.plano{background:none;padding:2px 0;color:var(--bruma);font-weight:400}

.m-riel{position:relative;height:26px;overflow:hidden;border-radius:5px}
.m-pista{position:absolute;inset:6px 0;background:var(--barra);border-radius:5px;opacity:.45}
.m-llena{position:absolute;top:6px;bottom:6px;left:0;background:var(--marca);border-radius:5px;
  transition:width .28s ease}
.m-fila.cerrado .m-llena{background:var(--barra-real)}
.m-ref{position:absolute;top:2px;bottom:2px;width:2px;background:var(--marca-fantasma);border-radius:2px}
.m-fila.cerrado .m-ref{background:var(--tinta);opacity:.45}

.m-proy{text-align:right;color:var(--bruma);font-variant-numeric:tabular-nums;font-size:14.5px}
.m-proy small{display:block;font-size:11px;opacity:.8}

.m-campo{position:relative}
.m-campo .cop{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--bruma);font-size:14px;pointer-events:none}
input.m-meta{width:100%;background:var(--superficie);border:1px solid var(--borde);
  border-radius:10px;padding:9px 12px 9px 26px;color:var(--tinta);
  font:600 15px "IBM Plex Sans",sans-serif;font-variant-numeric:tabular-nums;text-align:right}
input.m-meta::placeholder{font-weight:400;color:var(--bruma)}
input.m-meta:focus{border-color:var(--marca);outline:none;box-shadow:0 0 0 3px var(--marca-suave)}
input.m-meta:disabled{background:transparent;border-color:transparent;color:var(--bruma);
  padding-left:12px;cursor:default}

.m-senal{text-align:right;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.m-senal.arriba{color:var(--logro)} .m-senal.abajo{color:var(--falta)}
.m-senal.neutra{color:var(--bruma);font-weight:400}
.m-senal small{display:block;font-weight:400;font-size:11px;color:var(--bruma)}

/* ── Guardar ── */
.m-guardar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--superficie);
  border-top:1px solid var(--borde);box-shadow:var(--sombra)}
@media (max-width:899px){.m-guardar{bottom:calc(58px + env(safe-area-inset-bottom))}}
.m-guardar .in{max-width:1000px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.m-guardar .txt{font-size:13.5px;color:var(--bruma);flex:1;min-width:160px}
.m-guardar .txt b{color:var(--tinta)}
.m-aviso{color:var(--logro);font-size:13.5px;font-weight:600}
.m-aviso.malo{color:var(--falta)}
.m-btn{background:var(--marca);color:var(--btn-ink);border:0;border-radius:11px;
  padding:11px 20px;font-weight:600;font-size:14.5px}
.m-btn:hover{background:var(--profundo)}
.m-btn:disabled{opacity:.5;cursor:default}
.m-btn.fantasma{background:none;color:var(--bruma);border:1px solid var(--borde)}
.m-btn.fantasma:hover{background:var(--marca-suave);color:var(--marca)}

.m-estado{max-width:460px;margin:12vh auto;text-align:center;color:var(--bruma)}
.m-estado h2{font-weight:700;font-size:18px;color:var(--tinta);margin:0 0 8px}

/* ── Móvil: la fila se vuelve bloque ── */
@media (max-width:760px){
  /* tabbar fija (58px + safe-area) + la barra de guardar, medida en vivo */
  .metas{padding:20px 14px calc(58px + env(safe-area-inset-bottom) + 24px + var(--m-barra, 0px))}
  /* Barra compacta y de altura predecible: el texto arriba a lo ancho, los dos
     botones en una sola fila. Antes, texto y botones se envolvían a tres líneas
     y la barra tapaba el último mes. */
  .m-guardar .in{padding:10px 14px;gap:8px}
  .m-guardar .txt{flex-basis:100%;min-width:0;font-size:13px}
  .m-guardar .m-btn{flex:1;padding:10px 12px;font-size:14px}
  .m-cab{display:none}
  .m-fila{grid-template-columns:1fr auto;gap:8px 12px;padding:14px 4px;
    grid-template-areas:"mes senal" "riel riel" "proy campo"}
  .m-fila.encurso{padding-left:10px;padding-right:10px}
  .m-fila .m-id{grid-area:mes}
  .m-fila .m-riel{grid-area:riel;height:22px}
  .m-fila .m-proy{grid-area:proy;text-align:left;align-self:center}
  .m-fila .m-campo{grid-area:campo;width:170px;justify-self:end}
  .m-fila .m-senal{grid-area:senal;align-self:center}
  .m-resumen{gap:12px 28px}
  .m-cifra .v{font-size:21px}
  .m-enc h1{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.m-llena{transition:none}}

/* Nota de la demo compartida: se miran las metas, no se editan */
.m-nota-demo{background:var(--marca-suave);color:var(--tinta);border-radius:10px;padding:10px 14px;font-weight:600}