/* ============================================================
   TUS METAS — ported from metas.html mockup
   All classes prefixed `mt-` and variables scoped to `.mt-root`
   to avoid collisions with Bootstrap / MudBlazor globals.
   ============================================================ */

.mt-root{
  --mt-primary:#3956E8;
  --mt-primary-dark:#2c44c4;
  --mt-secondary:#7459D9;
  --mt-bg:#f6f7ff;
  --mt-card:#ffffff;
  --mt-ink:#0f172a;
  --mt-muted:#64748b;
  --mt-border:#e5e7eb;
  --mt-ok:#16a34a;
  --mt-ok-bg:#f0fdf4;
  --mt-warn:#f59e0b;
  --mt-r:16px;
  --mt-shadow:0 10px 30px rgba(15,23,42,.08);
  --mt-shadow-lg:0 20px 50px rgba(15,23,42,.14);
  font-family:'Nunito','Segoe UI',system-ui,sans-serif;
  color:var(--mt-ink);
  /* Bleed only across the MudContainer gutter so the soft radial bg fills the
     CONTENT area (right of the fixed drawer) like the standalone mockup — never
     to the whole viewport, which would anchor the centered column off-center
     against the ~240px drawer. */
  position:relative;
  margin-top:-16px;
  margin-left:-16px;
  margin-right:-16px;
  padding-left:16px;
  padding-right:16px;
  min-height:100vh;
  background:radial-gradient(circle at top, rgba(57,86,232,.12) 0, var(--mt-bg) 42%), var(--mt-bg);
  overflow-x:hidden;
}
@media(min-width:600px){
  .mt-root{margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px}
}

/* Neutralize Bootstrap/MudBlazor global element styles that bleed into
   the raw h1/p/button/input/label/span/ul this page uses. */
.mt-root *{box-sizing:border-box}
.mt-root h1,.mt-root p,.mt-root label,.mt-root span,.mt-root button,.mt-root input{margin:0}
.mt-root button{font-family:inherit;line-height:normal;text-transform:none}
.mt-root input{font-family:inherit}

/* Twemoji: emojis replaced by inline SVG <img class="emoji">; size to text. */
.mt-root img.emoji{height:1em;width:1em;vertical-align:-0.125em;margin:0 .05em 0 .1em;display:inline-block}
/* Larger emoji in the goal card icon + modal icon so the SVG matches the mockup scale. */
.mt-root .mt-gi img.emoji,.mt-root .mt-emoji img.emoji{height:1em;width:1em;vertical-align:-0.1em}

.mt-wrap{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:0 20px 140px}

/* ── HEADER ── */
.mt-hdr{text-align:center;padding:48px 0 40px}
.mt-kicker{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(57,86,232,.08);border:1.5px solid rgba(57,86,232,.2);
  color:var(--mt-primary);font-size:12px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:6px 16px;border-radius:999px;margin-bottom:18px;
}
.mt-hdr h1{
  font-size:clamp(28px,5vw,44px);font-weight:900;
  letter-spacing:-.02em;line-height:1.1;margin-bottom:12px;color:var(--mt-ink);
}
.mt-hdr h1 span{
  background:linear-gradient(90deg,var(--mt-primary),var(--mt-secondary));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.mt-hdr p{font-size:15px;color:var(--mt-muted);line-height:1.7;max-width:460px;margin:0 auto}

/* ── GOAL CARDS ── */
.mt-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;
}
.mt-gc{
  border:2px solid var(--mt-border);background:var(--mt-card);
  border-radius:var(--mt-r);padding:20px 12px 16px;
  text-align:center;cursor:pointer;
  transition:transform .18s,border-color .18s,box-shadow .18s,background .18s;
  position:relative;user-select:none;
  display:flex;flex-direction:column;align-items:center;gap:7px;
}
.mt-gc:hover{
  transform:translateY(-3px);
  border-color:rgba(57,86,232,.35);
  box-shadow:0 8px 20px rgba(15,23,42,.10);
}
.mt-gc.on{
  border-color:var(--mt-primary);
  background:linear-gradient(135deg,rgba(57,86,232,.07),rgba(116,89,217,.07));
  box-shadow:0 4px 14px rgba(57,86,232,.18);
}
.mt-ck{
  position:absolute;top:9px;right:9px;
  width:20px;height:20px;border-radius:50%;
  background:linear-gradient(135deg,var(--mt-primary),var(--mt-secondary));
  color:#fff;font-size:10px;font-weight:900;
  display:none;align-items:center;justify-content:center;
}
.mt-gc.on .mt-ck{display:flex}
.mt-gi{font-size:38px;line-height:1}
.mt-gl{font-size:12.5px;font-weight:700;color:var(--mt-ink);line-height:1.3}
.mt-gc.on .mt-gl{color:var(--mt-primary)}
.mt-gv{
  font-size:11px;font-weight:800;color:var(--mt-ok);
  background:var(--mt-ok-bg);padding:2px 8px;border-radius:999px;
  display:none;margin-top:1px;
  border:1px solid rgba(22,163,74,.2);
}
.mt-gc.has-val .mt-gv{display:block}
.mt-edit{
  font-size:10.5px;font-weight:700;color:var(--mt-primary);
  display:none;margin-top:-3px;
}
.mt-gc.has-val .mt-edit{display:block}

/* ── ACHIEVED STATE ── */
.mt-gc.achieved{
  border-color:#16a34a;
  background:linear-gradient(135deg,rgba(22,163,74,.06),rgba(21,128,61,.04));
}
.mt-gc.achieved .mt-ck{
  background:linear-gradient(135deg,#16a34a,#15803d);
  display:flex;
}
.mt-gc.achieved .mt-gl{color:#15803d}
.mt-gc.achieved .mt-gv{
  background:#f0fdf4;border-color:rgba(22,163,74,.3);color:#15803d;
}
.mt-gc.achieved .mt-edit{color:#15803d}
.mt-achieved-badge{
  position:absolute;top:9px;left:9px;
  font-size:13px;line-height:1;
  display:none;
}
.mt-gc.achieved .mt-achieved-badge{display:block}

/* ── MODAL OVERLAY ── */
.mt-overlay{
  position:fixed;inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(5px);
  /* Above MudBlazor chrome (drawer 1100, app bar 1300) so the dim backdrop
     covers the WHOLE screen like the standalone mockup; stays below the
     snackbar (1500) so success toasts still render over the modal. */
  z-index:1400;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.mt-overlay.open{opacity:1;pointer-events:all}

.mt-modal{
  background:var(--mt-card);
  border-radius:22px;
  width:100%;max-width:460px;
  box-shadow:var(--mt-shadow-lg);
  transform:translateY(18px) scale(.97);
  transition:transform .28s ease,opacity .28s ease;
  opacity:0;
  overflow:hidden;
}
.mt-overlay.open .mt-modal{transform:translateY(0) scale(1);opacity:1}

.mt-accent{
  height:5px;
  background:linear-gradient(90deg,var(--mt-primary),var(--mt-secondary));
}

.mt-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:22px 24px 0;gap:12px;
}
.mt-head-left{display:flex;align-items:center;gap:12px}
.mt-emoji{font-size:30px;line-height:1}
.mt-title{font-size:18px;font-weight:900;color:var(--mt-ink);margin-bottom:2px}
.mt-sub{font-size:13px;color:var(--mt-muted);font-weight:600}
.mt-close{
  width:32px;height:32px;border-radius:50%;
  border:1.5px solid var(--mt-border);background:var(--mt-bg);
  color:var(--mt-muted);font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all .15s;font-family:inherit;
}
.mt-close:hover{background:#fef2f2;border-color:#fca5a5;color:#dc2626}

.mt-body{padding:20px 24px 24px}

/* big input */
.mt-field{margin-bottom:20px}
.mt-root .mt-flabel{
  display:block;font-size:11.5px;font-weight:800;
  color:var(--mt-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;
}
.mt-input-wrap{
  display:flex;align-items:center;
  border:2px solid var(--mt-border);border-radius:13px;overflow:hidden;
  transition:border-color .2s,box-shadow .2s;background:#fff;
}
.mt-input-wrap:focus-within{
  border-color:var(--mt-primary);
  box-shadow:0 0 0 4px rgba(57,86,232,.10);
}
.mt-prefix,.mt-suffix{
  padding:0 14px;font-size:17px;font-weight:800;color:var(--mt-muted);
  background:var(--mt-bg);align-self:stretch;display:flex;align-items:center;
  border-right:1.5px solid var(--mt-border);flex-shrink:0;
}
.mt-suffix{border-left:1.5px solid var(--mt-border);border-right:none}
/* `.mt-root` prefix raises specificity above the global `[type="text"]` reset
   in account/css/index.css (loaded after metas.css), which would otherwise
   strip font-size/padding/line-height back to `unset`. */
.mt-root .mt-input{
  flex:1;padding:13px 15px;font-size:20px;line-height:1.2;font-weight:800;
  font-family:'Nunito',sans-serif;
  border:none;outline:none;background:transparent;color:var(--mt-ink);
  width:0;min-width:0;height:auto;
}
.mt-root .mt-input::placeholder{color:#cbd5e1;font-weight:500;font-size:16px}
.mt-hint{font-size:12px;color:var(--mt-muted);margin-top:7px;line-height:1.55;font-weight:500}

/* year buttons */
.mt-root .mt-years-label{
  display:block;font-size:11.5px;font-weight:800;color:var(--mt-muted);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:9px;
}
.mt-years{display:flex;gap:7px;flex-wrap:wrap}
.mt-yr{
  border:1.5px solid var(--mt-border);background:#fff;color:var(--mt-muted);
  font-size:13px;font-weight:700;padding:8px 12px;border-radius:10px;
  cursor:pointer;font-family:'Nunito',sans-serif;
  transition:all .15s;flex:1;min-width:60px;text-align:center;
}
.mt-yr:hover{border-color:rgba(57,86,232,.35);color:var(--mt-ink)}
.mt-yr.on{
  border-color:var(--mt-primary);
  background:linear-gradient(135deg,rgba(57,86,232,.08),rgba(116,89,217,.08));
  color:var(--mt-primary);font-weight:800;
}

/* free time input (años/meses) */
.mt-time-input{display:flex;align-items:center;gap:10px}
/* `.mt-root` prefix beats the global `[type]` reset in account/css/index.css. */
.mt-root .mt-time-number{
  width:90px;padding:11px 14px;
  border:2px solid var(--mt-border);border-radius:11px;
  font-size:20px;font-weight:800;font-family:'Nunito',sans-serif;
  color:var(--mt-ink);background:#fff;outline:none;height:auto;line-height:1.2;
  transition:border-color .2s,box-shadow .2s;
  -moz-appearance:textfield;appearance:textfield;
}
.mt-root .mt-time-number::-webkit-outer-spin-button,
.mt-root .mt-time-number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mt-root .mt-time-number:focus{
  border-color:var(--mt-primary);
  box-shadow:0 0 0 4px rgba(57,86,232,.10);
}
.mt-time-unit{font-size:14px;font-weight:700;color:var(--mt-muted)}

/* result box */
.mt-result{
  background:linear-gradient(135deg,var(--mt-ok-bg),#dcfce7);
  border:1.5px solid rgba(22,163,74,.25);
  border-radius:13px;padding:16px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:18px;
  opacity:0;transform:translateY(6px);
  transition:all .3s ease;pointer-events:none;
}
.mt-result.show{opacity:1;transform:translateY(0);pointer-events:auto}
.mt-mr-label{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--mt-ok)}
.mt-mr-value{font-size:26px;font-weight:900;color:var(--mt-ok);line-height:1.1;margin-top:3px}
.mt-mr-note{font-size:11.5px;color:var(--mt-muted);margin-top:4px;line-height:1.4;font-weight:500}
.mt-mr-right{text-align:right;flex-shrink:0}
.mt-mr-tlabel{font-size:10.5px;color:var(--mt-muted);font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.mt-mr-total{font-size:17px;font-weight:900;color:var(--mt-ink)}

/* save button */
.mt-root .mt-save{
  width:100%;margin-top:16px;
  background:linear-gradient(90deg,var(--mt-primary),var(--mt-secondary));
  color:#fff;border:none;border-radius:13px;
  padding:14px;font-size:15px;font-weight:800;
  cursor:pointer;font-family:'Nunito',sans-serif;
  transition:all .15s;opacity:.4;pointer-events:none;
  box-shadow:0 8px 16px rgba(57,86,232,.2);
}
.mt-save.ready{opacity:1;pointer-events:all}
.mt-save.ready:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(57,86,232,.28)}

.mt-root .mt-delete{
  display:block;text-align:center;margin-top:12px;
  font-size:12.5px;color:#94a3b8;font-weight:700;
  cursor:pointer;border:none;background:none;
  font-family:'Nunito',sans-serif;transition:color .15s;width:100%;
}
.mt-delete:hover{color:#dc2626}

/* achieve / unachieve buttons (`.mt-root` beats the global button reset) */
.mt-root .mt-achieve{
  width:100%;margin-top:10px;
  background:#fff;color:#16a34a;
  border:2px solid rgba(22,163,74,.3);border-radius:13px;
  padding:13px;font-size:14px;font-weight:800;
  cursor:pointer;font-family:'Nunito',sans-serif;transition:all .15s;
  display:none;
}
.mt-achieve:hover{background:#f0fdf4;border-color:#16a34a}
.mt-achieve.show{display:block}
.mt-root .mt-unachieve{
  display:none;text-align:center;margin-top:8px;
  font-size:12px;color:#94a3b8;font-weight:700;
  cursor:pointer;border:none;background:none;
  font-family:'Nunito',sans-serif;transition:color .15s;width:100%;
}
.mt-unachieve:hover{color:#64748b}
.mt-unachieve.show{display:block}

/* ── CALC LINK BLOCK ── */
.mt-calc-link{
  margin-top:14px;
  background:linear-gradient(135deg,rgba(57,86,232,.05),rgba(116,89,217,.05));
  border:1.5px solid rgba(57,86,232,.15);
  border-radius:13px;padding:14px 16px;
  display:none;gap:12px;align-items:flex-start;
}
.mt-calc-link.show{display:flex}
.mt-clb-icon{font-size:22px;line-height:1;flex-shrink:0;margin-top:1px}
.mt-clb-body{flex:1;min-width:0}
.mt-clb-label{
  font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mt-primary);margin-bottom:3px;
}
.mt-clb-name{font-size:13.5px;font-weight:800;color:var(--mt-ink);margin-bottom:4px;line-height:1.3}
.mt-clb-why{font-size:11.5px;color:var(--mt-muted);line-height:1.55;font-weight:500;margin-bottom:8px}
.mt-clb-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(90deg,var(--mt-primary),var(--mt-secondary));
  color:#fff;text-decoration:none;
  font-size:11.5px;font-weight:800;
  padding:7px 14px;border-radius:8px;
  transition:all .15s;box-shadow:0 3px 8px rgba(57,86,232,.2);
}
.mt-clb-btn:hover{transform:translateY(-1px);box-shadow:0 5px 12px rgba(57,86,232,.3);color:#fff}
.mt-clb-extra{margin-top:12px;padding-top:12px;border-top:1px solid rgba(57,86,232,.12)}

/* ── STICKY BAR ── */
.mt-sticky{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--mt-ink);
  padding:16px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  box-shadow:0 -8px 40px rgba(15,23,42,.2);
  /* Above MudBlazor chrome (drawer 1100, app bar 1300) so the full-width bar
     — and the total on its LEFT side — isn't covered by the left drawer; below
     the modal overlay (1400) so an open dialog still dims it. */
  transform:translateY(100%);transition:transform .35s ease;z-index:1350;
}
.mt-sticky.show{transform:translateY(0)}
/* Shell nuevo: el sidebar fijo (290px, z 1100) queda a la izquierda; la barra
   arranca a su derecha para que el total (lado izquierdo) no quede tapado. */
@media (min-width:1200px){ .mt-sticky{ left:290px } }
.mt-sb-text{display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.mt-sb-label{font-size:11px;color:rgba(255,255,255,.5);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.mt-sb-value{font-size:26px;font-weight:900;color:#fff;line-height:1}
.mt-sb-sub{font-size:12px;color:rgba(255,255,255,.4);margin-top:1px;font-weight:600}
.mt-sb-pills{display:flex;gap:6px;flex-wrap:wrap;flex:1;justify-content:center}
.mt-sb-pill{
  font-size:11.5px;font-weight:700;
  background:rgba(57,86,232,.35);
  border:1px solid rgba(57,86,232,.5);
  padding:4px 11px;border-radius:999px;
  color:#fff;white-space:nowrap;
}
.mt-sb-save{
  background:linear-gradient(90deg,var(--mt-primary),var(--mt-secondary));
  color:#fff;border:none;border-radius:12px;
  padding:13px 24px;font-size:14px;font-weight:800;cursor:pointer;
  font-family:'Nunito',sans-serif;white-space:nowrap;flex-shrink:0;
  transition:all .15s;box-shadow:0 4px 12px rgba(57,86,232,.3);
}
.mt-sb-save:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(57,86,232,.4)}
.mt-root .mt-sb-reset{
  background:transparent;color:rgba(255,255,255,.5);
  border:1.5px solid rgba(255,255,255,.15);border-radius:12px;
  padding:13px 16px;font-size:13px;font-weight:700;cursor:pointer;
  font-family:'Nunito',sans-serif;white-space:nowrap;flex-shrink:0;transition:all .15s;
}
.mt-sb-reset:hover{color:#fff;border-color:rgba(220,38,38,.5);background:rgba(220,38,38,.15)}

/* ── TOAST ── */
.mt-toast{
  position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-12px);
  background:var(--mt-ink);color:#fff;padding:11px 20px;border-radius:12px;
  font-size:13px;font-weight:700;box-shadow:var(--mt-shadow-lg);
  opacity:0;transition:all .25s;z-index:9999;pointer-events:none;white-space:nowrap;
}
.mt-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:540px){
  .mt-grid{grid-template-columns:repeat(3,1fr)}
  .mt-sticky{flex-wrap:wrap;gap:10px}
  .mt-sb-pills{display:none}
  .mt-modal{border-radius:20px 20px 0 0;max-height:90vh;overflow-y:auto}
  .mt-overlay.open{align-items:flex-end;padding:0}
}