@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap');
/* ============================================================
   cdpg-mn.css  —  Moneed, portado a CDPG
   ============================================================

   ESTO ES EL CSS DE MONEED, el tablero cuyo codigo compro el dueño,
   puesto tal cual. Van sus cinco hojas una atras de otra, en el mismo
   orden en que las carga su `main.jsx`:

       tokens.css · base.css · shell.css · ui.css · charts.css

   NO SE TOCO NINGUNA REGLA SUYA. Lo unico nuestro es **un bloque**,
   justo despues de los tokens, con el titulo "LO NUESTRO". Que se
   pueda ver de un vistazo que es de ellos y que es nuestro es el
   punto: cuando salga la version que sigue, se vuelve a portar sin
   tener que adivinar donde habiamos metido mano.

   COMO SE VUELVE NARANJA SIN TOCAR UNA REGLA. Moneed escribe todo
   contra `--blue`. Redefinirla con nuestro `#E65100` pinta el sistema
   entero. El lima `--lime`, que con naranja pelea, pasa al verde
   azulado que CDPG ya usaba.

   ESTA HOJA NO CONVIVE CON `cdpg-ui.css`: la reemplaza. La pantalla
   que la cargue NO tiene que cargar la otra, o van a estar dos
   sistemas de diseño peleando regla por regla. Hoy la usa
   `panel_dueno.html`.

   LO QUE NO VINO EN EL PAQUETE, y hay que escribirlo nosotros: las
   animaciones. Moneed las hace con `framer-motion`, que es React.
   Viven en `cdpg-mn.js`, en JavaScript comun.

   Portado el 26/10/2026 de Moneed "Dashboard v16".
   ============================================================ */


/* ---------- MONEED: tokens.css ---------- */

/* ============================================================
   Moneed — design tokens (colours sampled from the reference shot)
   Light is the default; dark is the same system re-tinted.
   ============================================================ */
:root {
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --r-xl: 0px;
  --r-lg: 20px;
  --r-md: 16px;
  --r-sm: 12px;
  --r-xs: 9px;

  --top: 68px;
  --gutter: 20px;

  /* brand */
  --blue: #275cf3;
  --blue-2: #5b86f7;
  --blue-3: #83aaf8;
  --blue-4: #a9c3fa;
  --blue-5: #d1ddfc;
  --lime: #cff95a;
  --lime-2: #e3fc9b;
  --lime-3: #f5fed8;
  --ink: #2a2a2a;
  --green: #4fae38;
  --red: #e5432a;
  --amber: #f5a524;

  /* legacy aliases used by shared components */
  --accent: var(--blue);
  --purple: var(--blue);
  --purple-2: var(--blue-2);
  --purple-3: var(--blue-4);
  --cyan: var(--blue-3);
  --pink: var(--lime);
  --grad: linear-gradient(135deg, #3a6bf6 0%, #275cf3 60%, #1f4fe0 100%);
  --grad-text: linear-gradient(135deg, #275cf3, #275cf3);
}

:root,
[data-theme='light'] {
  color-scheme: light;
  --page: #b0b0b7;
  --frame: #f3f3f3;
  --surface: #f3f3f3;
  --card: #ffffff;
  --tile: #f3f3f3;
  --tile-2: #ebebeb;
  --tile-3: #dedede;
  --line: #ececec;
  --line-2: #e2e2e2;
  --text: #1d1d1f;
  --text-2: #3f3f42;
  --muted: #8b8b90;
  --muted-2: #bdbdc2;
  --soft: #eaf0fe;
  --chip: #f3f3f3;
  --tooltip: #2a2a2a;
  --tooltip-text: #ffffff;
  --map-land: #ececec;
  --hover: #f6f6f6;
  --on-ink: #ffffff;
  --green-soft: #d4f5d0;
  --green-ink: #3d9a2c;
  --red-soft: #fde3de;
  --red-ink: #e5432a;

  --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.03);
  --shadow-md: 0 14px 34px -18px rgba(20, 20, 30, 0.22);
  --shadow-pop: 0 24px 60px -18px rgba(20, 20, 30, 0.3), 0 2px 6px rgba(20, 20, 30, 0.06);
  --shadow-frame: 0 40px 90px -40px rgba(20, 20, 40, 0.45);
  --shadow-purple: 0 12px 24px -10px rgba(39, 92, 243, 0.6);
}

[data-theme='dark'] {
  color-scheme: dark;
  --page: #08080a;
  --frame: #121214;
  --surface: #121214;
  --card: #1b1b1e;
  --tile: #242428;
  --tile-2: #2d2d32;
  --tile-3: #3a3a40;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.11);
  --text: #f4f4f6;
  --text-2: #c9c9cf;
  --muted: #84848c;
  --muted-2: #55555c;
  --soft: rgba(39, 92, 243, 0.18);
  --chip: #242428;
  --tooltip: #000000;
  --tooltip-text: #ffffff;
  --map-land: #2a2a2f;
  --hover: rgba(255, 255, 255, 0.04);
  --ink: #f4f4f6;
  --on-ink: #121214;
  --green-soft: rgba(79, 174, 56, 0.18);
  --green-ink: #7bd164;
  --red-soft: rgba(229, 67, 42, 0.18);
  --red-ink: #ff7a63;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 14px 30px -14px rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 24px 60px -18px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-frame: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
  --shadow-purple: 0 12px 24px -10px rgba(39, 92, 243, 0.7);
}


/* ============================================================
   LO NUESTRO  —  lo unico que no es de Moneed
   ============================================================
   Va DESPUES de sus tokens y ANTES de todo lo demas, asi sus reglas
   --que estan escritas contra estas variables-- toman estos valores.
   ============================================================ */
:root,
[data-theme='light'],
[data-theme='dark'] {
  /*  LA MARCA. Moneed es azul #275cf3; CDPG es naranja. Como todas
      sus reglas dicen `--blue`, con esto alcanza.                  */
  --blue: #E65100;
  --blue-2: #F57C00;
  --blue-3: #FF9800;
  --blue-4: #FFB74D;
  --blue-5: #FFE0B2;

  /*  Su segundo acento es un lima #cff95a que al lado del naranja
      vibra. Va el verde azulado que el sistema ya usaba.           */
  --lime: #0d9488;
  --lime-2: #2dd4bf;
  --lime-3: #ccfbf1;

  --accent: var(--blue);
  --purple: var(--blue);
  --purple-2: var(--blue-2);
  --purple-3: var(--blue-4);
  --cyan: var(--blue-3);
  --pink: var(--lime);
  --grad: linear-gradient(135deg, #F57C00 0%, #E65100 60%, #BF360C 100%);
  --grad-text: linear-gradient(135deg, #E65100, #E65100);
}

:root,
[data-theme='light'] {
  /*  El halo de los botones y las tarjetas de acento: era azul.    */
  --soft: #FFF1E6;
  --shadow-purple: 0 12px 24px -10px rgba(230, 81, 0, .55);

  /*  EL FONDO ERA DEMASIADO PALIDO (27/10). Lo encontro el dueno
      mirando el tablero: "no lo ves como muy palido al fondo?".

      Moneed pone el marco en #f3f3f3 y las tarjetas en #ffffff: TRES
      POR CIENTO de diferencia, con un borde #ececec y una sombra al
      3% de opacidad. En SU tablero alcanza, porque es denso y las
      tarjetas van pegadas; en los nuestros, anchos y con aire, se lee
      como una sola superficie blanca.

      Y encima nosotros perdimos su otra pista de profundidad: en
      Moneed el `.stage` muestra un gris fuerte (--page) alrededor de
      una `.app` redondeada, y el 26/10 pasamos el marco de borde a
      borde. Sin ese gris alrededor, el unico contraste que queda es
      este.

      El marco baja un escalon y la linea se firma. EL MODO OSCURO NO
      SE TOCA: ahi el contraste ya era otro (#121214 contra #1b1b1e). */
  --frame: #ebebee;
  --line: #e3e3e6;
  --shadow-sm: 0 1px 2px rgba(20, 20, 30, .05);
}

[data-theme='dark'] {
  --soft: rgba(230, 81, 0, .18);
  --shadow-purple: 0 12px 24px -10px rgba(230, 81, 0, .65);

  /*  EL BLOQUE DE ARRIBA EMPIEZA CON `:root`, Y `:root` TAMBIEN ES EL
      <html data-theme="dark">: misma especificidad y escrito despues,
      asi que le gana al bloque oscuro de Moneed. Sin estas tres
      lineas, el modo oscuro se quedaba con el marco CLARO.
      Son los valores de Moneed, devueltos tal cual.                */
  --frame: #121214;
  --line: rgba(255, 255, 255, 0.07);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/*  Los pocos lugares donde Moneed escribio el azul a mano en vez de
    usar la variable. Se corrigen aca para no tocar sus reglas.     */
::selection { background: rgba(230, 81, 0, .20); }

.input:focus-within,
.search-pill:focus-within,
.amount-input:focus-within {
  box-shadow: 0 0 0 4px rgba(230, 81, 0, .14);
}

.switch.is-on { box-shadow: 0 6px 14px -6px rgba(230, 81, 0, .8); }

.stat--grad { box-shadow: 0 20px 40px -18px rgba(230, 81, 0, .75); }
.stat--grad:hover { box-shadow: 0 26px 46px -18px rgba(230, 81, 0, .85); }

.btn--primary:hover { background: #CF4900; }

.area__dot {
  box-shadow: 0 0 0 5px rgba(230, 81, 0, .18), 0 4px 10px rgba(230, 81, 0, .5);
}
.donut__seg.is-active { filter: drop-shadow(0 6px 10px rgba(230, 81, 0, .35)); }



/* ---------- MONEED: base.css ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
  overflow: hidden;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

svg {
  display: block;
}

:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  border-radius: 8px;
}

::selection {
  background: rgba(39, 92, 243, 0.22);
}

.num {
  font-variant-numeric: tabular-nums;
}

.muted {
  color: var(--muted);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* thin scrollbars that match the frame */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--tile-3) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: var(--tile-3);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

/* theme switch — circular reveal driven by the View Transitions API */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  z-index: 2;
}

/* freeze CSS transitions while the liquid blob reveals the new theme */
html.liquid-switching *,
html.liquid-switching *::before,
html.liquid-switching *::after {
  transition: none !important;
}

/* fallback where View Transitions aren't supported */
html.theme-fade *,
html.theme-fade *::before,
html.theme-fade *::after {
  transition:
    background-color 0.5s ease,
    color 0.5s ease,
    border-color 0.5s ease,
    fill 0.5s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ---------- MONEED: shell.css ---------- */

/* ============================================================
   Shell — stage, framed app, top nav, page + grid
   ============================================================ */

.stage {
  height: 100vh;
  height: 100dvh;
  padding: 0 clamp(20px, 5.5vw, 100px);
  background: var(--frame);
  display: flex;
  justify-content: center;
  perspective: 2200px;
  perspective-origin: 50% 30%;
}

.app {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: var(--r-xl);
  background: var(--frame);
  overflow: hidden;
  transform-origin: 50% 35%;
}

/* ---------------- topbar ---------------- */
.topbar {
  position: relative;
  z-index: 5;
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: 'brand nav right';
  align-items: center;
  gap: 16px;
  min-height: var(--top);
  padding: 0 var(--gutter);
}

.topbar__brand {
  grid-area: brand;
  justify-self: start;
  border-radius: 12px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.moneed-mark {
  flex: none;
  transition: transform 0.5s var(--spring);
}

.topbar__brand:hover .moneed-mark {
  transform: skewX(-8deg) scale(1.06);
}

.topnav {
  grid-area: nav;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 99px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.topnav__item {
  position: relative;
  height: 38px;
  padding: 0 18px;
  border-radius: 99px;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.25s;
}

.topnav__item:hover {
  color: var(--text);
}

.topnav__item.is-active {
  color: var(--on-ink);
}

.topnav__pill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ink);
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.6);
}

.topnav__label {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.topnav__icon {
  display: inline-flex;
  overflow: hidden;
  margin-right: 7px;
}

.topbar__right {
  grid-area: right;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* light / dark switch (Dashboard v14 style) */
.mode-switch {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 99px;
  background: var(--card);
  border: 1px solid var(--line-2);
}

.mode-switch__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--text-2);
  transition: color 0.35s, transform 0.3s var(--spring);
}

.mode-switch__btn:hover:not(.is-on) {
  color: var(--text);
  transform: scale(1.08);
}

.mode-switch__btn:active {
  transform: scale(0.9);
}

.mode-switch__btn.is-on {
  color: var(--on-ink);
}

.mode-switch__ind {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ink);
}

.mode-switch__icon {
  position: relative;
  transition: transform 0.8s var(--ease);
}

.mode-switch__btn.is-on .mode-switch__icon--light {
  transform: rotate(90deg);
}

.mode-switch__btn.is-on .mode-switch__icon--dark {
  transform: rotate(-20deg);
}

.profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 3px 8px 3px 3px;
  margin-left: 4px;
  border-radius: 99px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background 0.2s;
}

.profile:hover,
.profile.is-open {
  background: var(--card);
}

.profile__name {
  white-space: nowrap;
}

.profile__caret {
  color: var(--muted);
  transition: transform 0.3s var(--ease);
}

.profile.is-open .profile__caret {
  transform: rotate(180deg);
}

/* ---------------- content ---------------- */
.main__scroll {
  position: relative;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1800px;
  perspective-origin: 50% 0%;
  scroll-behavior: smooth;
}

.page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 var(--gutter) 16px;
  transform-origin: 50% 12%;
  min-height: 100%;
}

/* ---------------- page header + grids ---------------- */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
  padding: 6px 2px 4px;
}

.page-head__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.page-head__sub {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.page-head__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.grid {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.grid > * {
  min-width: 0;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.span-2 {
  grid-column: span 2;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  perspective: 1200px;
}

.stats-grid--row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---------------- responsive ---------------- */
@media (max-width: 1280px) {
  .grid-4,
  .stats-grid--row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1080px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'brand right'
      'nav nav';
    row-gap: 4px;
    padding-top: 16px;
    padding-bottom: 14px;
  }

  .topnav {
    justify-self: center;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .topnav::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 760px) {
  :root {
    --gutter: 14px;
  }

  .stage {
    padding: 0 12px;
  }

  .app {
    border-radius: 0;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .span-2 {
    grid-column: auto;
  }

  .profile__name,
  .profile__caret {
    display: none;
  }

  .topnav {
    justify-self: stretch;
  }

  .topnav__item {
    flex: none;
    height: 36px;
    padding: 0 13px;
    font-size: 13px;
  }

  .page-head__title {
    font-size: 24px;
  }
}

@media (max-width: 420px) {
  .logo {
    font-size: 21px;
  }

  .topbar__right {
    gap: 6px;
  }

  .stats-grid,
  .stats-grid--row {
    gap: 10px;
  }
}

@media print {
  .stage {
    padding: 0;
    height: auto;
  }

  .app {
    box-shadow: none;
    height: auto;
  }

  .main__scroll {
    overflow: visible;
  }

  .topbar__right,
  .topnav {
    display: none;
  }
}


/* ---------- MONEED: ui.css ---------- */

/* ============================================================
   UI primitives
   ============================================================ */

/* ---------------- card ---------------- */
.card {
  position: relative;
  min-width: 0;
  padding: 18px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--line);
  transition: box-shadow 0.35s var(--ease), border-color 0.3s;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.card__heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 11px;
  min-width: 0;
}

.card__heading:not(:has(.card__icon)) {
  display: block;
}

.card__heading:has(.card__sub) .card__icon {
  grid-row: span 2;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--tile);
  color: var(--blue);
  transition: transform 0.4s var(--spring);
}

.card:hover .card__icon {
  transform: rotate(-10deg) scale(1.05);
}

.card__head--line {
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.card__sub {
  margin-top: 1px;
  color: var(--muted);
  font-size: 12px;
}

.card__action {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.card__big {
  color: var(--blue);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------------- tooltip (CSS only) ---------------- */
.tip {
  position: relative;
}

.tip[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 60;
  padding: 6px 9px;
  border-radius: 8px;
  background: var(--tooltip);
  color: var(--tooltip-text);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  max-width: 260px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px) scale(0.96);
  transition: opacity 0.16s, transform 0.2s var(--ease);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.4);
}

.tip[data-tip='']::after,
.tip:not([data-tip])::after {
  display: none;
}

.tip[data-tip]:hover::after,
.tip[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  transition-delay: 0.25s;
}

.tip--bottom[data-tip]::after {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translate(-50%, -4px) scale(0.96);
}

.tip--right[data-tip]::after {
  left: calc(100% + 10px);
  bottom: auto;
  top: 50%;
  transform: translate(-4px, -50%) scale(0.96);
}

.tip--right[data-tip]:hover::after,
.tip--right[data-tip]:focus-visible::after {
  transform: translate(0, -50%) scale(1);
}

/* ---------------- info dot ---------------- */
.info-dot {
  display: inline-grid;
  place-items: center;
  flex: none;
  color: var(--purple);
  border-radius: 50%;
  cursor: help;
  transition: transform 0.3s var(--spring);
}

.info-dot:hover {
  transform: scale(1.18) rotate(-8deg);
}

.info-dot svg {
  width: 15px;
  height: 15px;
}

.info-dot--light {
  color: rgba(255, 255, 255, 0.92);
  --info-ink: #9b7df6;
}

/* ---------------- delta ---------------- */
.delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
}

.delta svg {
  flex: none;
}

.delta.is-up svg {
  color: var(--green);
}

.delta.is-down svg {
  color: var(--red);
}

/* ---------------- icon chip ---------------- */
.icon-chip {
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: var(--tile);
  color: var(--blue);
}

.icon-chip--tone {
  background: color-mix(in srgb, var(--chip-tone) 16%, transparent);
  color: var(--chip-tone);
}

/* ---------------- stat tile ---------------- */
.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 116px;
  padding: 15px 16px 13px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--line);
  isolation: isolate;
  transform-origin: 100% 50%;
  transition: box-shadow 0.35s var(--ease);
}

.stat.is-clickable {
  cursor: pointer;
}

.stat:hover {
  box-shadow: var(--shadow-md);
}

.stat__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.stat__value {
  margin-top: auto;
  padding-top: 10px;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
  white-space: nowrap;
}

.stat__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.stat__label {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat .icon-chip {
  transition: transform 0.4s var(--spring);
}

.stat:hover .icon-chip {
  transform: rotate(-8deg) scale(1.08);
}

/* the iridescent tile */
.stat--grad {
  color: #fff;
  /* solid blue from the first frame, so the white text is never on white */
  background: var(--blue);
  border-color: transparent;
  box-shadow: 0 20px 40px -18px rgba(39, 92, 243, 0.75);
}

.stat--grad:hover {
  box-shadow: 0 26px 46px -18px rgba(39, 92, 243, 0.85);
}

.stat__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  background: var(--blue);
}

/* slanted lime + light bars, echoing the Moneed mark */
.stat__bg::before,
.stat__bg::after {
  content: '';
  position: absolute;
  border-radius: 14px;
  transform: skewX(-28deg);
  animation: bar-drift 7s ease-in-out infinite;
}

.stat__bg::before {
  right: -10px;
  top: -18px;
  width: 64px;
  height: 120px;
  background: rgba(255, 255, 255, 0.12);
}

.stat__bg::after {
  right: 46px;
  bottom: -40px;
  width: 26px;
  height: 90px;
  background: var(--lime);
  opacity: 0.85;
  animation-delay: -3s;
}

@keyframes bar-drift {
  50% {
    translate: -10px 6px;
  }
}

@keyframes sheen {
  0% {
    background-position: 130% 0;
  }
  45%,
  100% {
    background-position: -30% 0;
  }
}

.stat--grad .stat__label {
  color: rgba(255, 255, 255, 0.85);
}

.stat--grad .delta {
  color: #fff;
}

.stat--grad .delta svg {
  color: #fff;
}

.stat--grad .icon-chip {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  backdrop-filter: blur(4px);
}

/* ---------------- tabs ---------------- */
.tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tabs__item {
  position: relative;
  height: 32px;
  padding: 0 14px;
  border-radius: 99px;
  background: var(--tile);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.25s, background 0.2s;
}

.tabs__item:hover {
  color: var(--text);
  background: var(--tile-2);
}

.tabs__item.is-active {
  color: var(--on-ink);
}

.tabs__pill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ink);
  box-shadow: 0 8px 16px -10px rgba(0, 0, 0, 0.55);
}

.tabs__label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tabs__count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--tile-2);
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  transition: background 0.2s, color 0.2s;
}

.tabs__item.is-active .tabs__count {
  background: color-mix(in srgb, var(--on-ink) 22%, transparent);
  color: var(--on-ink);
}

.tabs--segmented {
  gap: 2px;
  padding: 4px;
  border-radius: 99px;
  background: var(--tile);
}

.tabs--segmented .tabs__item {
  background: transparent;
  border-radius: 99px;
}

.tabs--segmented .tabs__item:hover {
  background: transparent;
}

.tabs--segmented .tabs__pill {
  border-radius: 99px;
}

.tabs--sm .tabs__item {
  height: 28px;
  padding: 0 11px;
}

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 15px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, box-shadow 0.25s, opacity 0.2s;
}

.btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.btn--sm {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  gap: 6px;
}

.btn--lg {
  height: 44px;
  padding: 0 18px;
  font-size: 14px;
}

.btn--icon-only {
  width: 36px;
  padding: 0;
}

.btn--sm.btn--icon-only {
  width: 32px;
}

.btn--block {
  width: 100%;
}

.btn--primary {
  background: var(--blue);
  color: #fff;
}

.btn--primary:hover {
  background: #1f50e6;
  box-shadow: var(--shadow-purple);
}

.btn--dark {
  background: var(--ink);
  color: var(--on-ink);
}

.btn--dark:hover {
  background: color-mix(in srgb, var(--ink) 88%, var(--blue));
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.6);
}

.btn--gradient {
  color: #fff;
  background: var(--grad);
  background-size: 200% 200%;
  animation: grad-drift 6s ease-in-out infinite;
  box-shadow: 0 12px 26px -12px rgba(140, 110, 250, 0.8);
}

.btn--soft {
  background: var(--soft);
  color: var(--purple);
}

.btn--soft:hover {
  background: var(--chip);
}

.btn--ghost {
  background: var(--tile);
  color: var(--text);
}

.card .btn--ghost {
  background: var(--tile);
}

.btn--ghost:hover {
  background: var(--tile-2);
}

.btn--outline {
  border: 1px solid var(--line-2);
  color: var(--text);
}

.btn--outline:hover {
  background: var(--tile);
}

.btn--danger {
  background: var(--red);
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(240, 68, 90, 0.7);
}

.btn--danger:hover {
  background: #e3354c;
}

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--text-2);
  transition: background 0.2s, color 0.2s;
}

.icon-btn:hover,
.icon-btn.is-active {
  background: var(--tile);
  color: var(--text);
}

.icon-btn__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  border: 2px solid var(--surface);
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
  animation: badge-pop 0.5s var(--spring) both;
}

.icon-btn.is-ringing svg {
  transform-origin: 50% 10%;
  animation: ring 2.6s ease-in-out 1.8s infinite;
}

@keyframes ring {
  0%,
  20%,
  100% {
    transform: rotate(0);
  }
  4% {
    transform: rotate(14deg);
  }
  8% {
    transform: rotate(-12deg);
  }
  12% {
    transform: rotate(8deg);
  }
  16% {
    transform: rotate(-4deg);
  }
}

/* ---------------- avatar ---------------- */
.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: 11px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255, 255, 255, 0.28), transparent 50%),
    var(--avatar-tone);
}

.avatar--round {
  border-radius: 50%;
}

.avatar--ring {
  box-shadow: 0 0 0 2px var(--card);
}

.avatar--more {
  background: var(--tile-2);
  color: var(--text-2);
  font-size: 10px;
}

.avatar-stack {
  display: inline-flex;
}

.avatar-stack > * + * {
  margin-left: -8px;
}

/* ---------------- badge ---------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--tile);
  color: var(--text-2);
}

.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.badge--purple {
  background: var(--soft);
  color: var(--purple);
}

.badge--green {
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: #16a34a;
}

.badge--red {
  background: color-mix(in srgb, var(--red) 13%, transparent);
  color: var(--red);
}

.badge--amber {
  background: color-mix(in srgb, var(--amber) 16%, transparent);
  color: #d48806;
}

.badge--cyan {
  background: color-mix(in srgb, var(--cyan) 18%, transparent);
  color: #0e9fc7;
}

.badge--ink {
  background: var(--ink);
  color: var(--on-ink);
}

.badge--blue {
  background: var(--soft);
  color: var(--blue);
}

.badge--pink {
  background: color-mix(in srgb, var(--pink) 16%, transparent);
  color: #c04fd6;
}

[data-theme='dark'] .badge--pink {
  color: var(--pink);
}

[data-theme='dark'] .badge--green {
  color: #4ade80;
}

[data-theme='dark'] .badge--amber {
  color: #fbbf24;
}

[data-theme='dark'] .badge--cyan {
  color: var(--cyan);
}

/* ---------------- switch ---------------- */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  width: 42px;
  height: 24px;
  padding: 3px;
  border-radius: 99px;
  background: var(--tile-3);
  transition: background 0.25s;
}

.switch.is-on {
  justify-content: flex-end;
  background: var(--purple);
  box-shadow: 0 6px 14px -6px rgba(39, 92, 243, 0.8);
}

.switch__knob {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------------- progress ---------------- */
.progress {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 99px;
  background: var(--tile-2);
}

.progress__bar {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--blue);
}

/* ---------------- kbd ---------------- */
.kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--card);
  border: 1px solid var(--line-2);
  box-shadow: 0 1px 0 var(--line-2);
  color: var(--text-2);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
}

/* ---------------- empty state ---------------- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 36px 20px;
  text-align: center;
}

.empty__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--purple);
  animation: orb-float 4s ease-in-out infinite;
}

.empty h4 {
  font-size: 15px;
}

.empty p {
  max-width: 320px;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 10px;
}

/* ---------------- fields ---------------- */
.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.form__row--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.field__label {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}

.field__hint {
  color: var(--muted);
  font-size: 11.5px;
}

.input {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 40px;
  border-radius: 12px;
  background: var(--tile);
  border: 1px solid transparent;
  color: var(--muted);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.input:hover {
  background: var(--tile-2);
}

.input:focus-within {
  background: var(--card);
  border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(39, 92, 243, 0.14);
  color: var(--blue);
}

.input > svg {
  position: absolute;
  left: 13px;
  pointer-events: none;
}

.input input,
.input select,
.input textarea {
  width: 100%;
  height: 100%;
  padding: 0 14px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
}

.input input::placeholder,
.input textarea::placeholder {
  color: var(--muted);
}

.input--icon input {
  padding-left: 38px;
}

.input--select select {
  appearance: none;
  padding-right: 34px;
  cursor: pointer;
}

.input--select > svg {
  left: auto;
  right: 13px;
}

.input--area {
  height: auto;
}

.input--area textarea {
  padding: 11px 14px;
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

.input input[type='date']::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
}

[data-theme='dark'] .input input[type='date']::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

.swatches {
  display: flex;
  gap: 10px;
}

.swatch {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  transition: transform 0.25s var(--spring), box-shadow 0.2s;
}

.swatch:hover {
  transform: scale(1.1);
}

.swatch.is-active {
  box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--purple);
}

/* ---------------- dropdown + menu ---------------- */
.dropdown {
  position: relative;
}

.dropdown__panel {
  position: absolute;
  top: calc(100% + 10px);
  z-index: 50;
  padding: 6px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  max-height: min(70vh, 520px);
  overflow: auto;
}

.dropdown__panel--left {
  left: 0;
}

.dropdown__panel--right {
  right: 0;
}

.menu-label {
  padding: 8px 10px 6px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.menu-divider {
  height: 1px;
  margin: 6px 4px;
  background: var(--line);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}

.menu-item:hover {
  background: var(--tile);
  color: var(--text);
}

.menu-item.is-active {
  color: var(--blue);
}

.menu-item.is-danger {
  color: var(--red);
}

.menu-item.is-danger:hover {
  background: color-mix(in srgb, var(--red) 10%, transparent);
}

.menu-item__label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.menu-item__label small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.menu-item--project .menu-item__label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
}

.menu-item--project .menu-item__label small {
  letter-spacing: 0;
}

.menu-item__hint {
  color: var(--muted);
  font-size: 11px;
}

.menu-item__check {
  color: var(--blue);
}

.profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
}

.profile-card strong {
  display: block;
  font-size: 13.5px;
}

.profile-card span {
  color: var(--muted);
  font-size: 12px;
}

/* notifications */
.notes__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 8px;
}

.notes__head strong {
  font-size: 14px;
}

.notes__head button {
  color: var(--purple);
  font-size: 12px;
  font-weight: 600;
}

.notes__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.note {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  text-align: left;
  transition: background 0.15s;
}

.note:hover {
  background: var(--tile);
}

.note__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-right: 12px;
}

.note__text strong {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

.note__text span {
  color: var(--text-2);
  font-size: 12px;
}

.note__text small {
  color: var(--muted);
  font-size: 11px;
}

.note.is-unread {
  background: color-mix(in srgb, var(--soft) 55%, transparent);
}

.note__dot {
  position: absolute;
  top: 16px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 0 3px var(--soft);
}

/* ---------------- modal ---------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 20, 40, 0.32);
  backdrop-filter: blur(6px);
  perspective: 1400px;
}

[data-theme='dark'] .modal {
  background: rgba(0, 0, 0, 0.55);
}

.modal--top {
  align-items: start;
  padding-top: 12vh;
}

.modal__panel {
  width: 100%;
  max-height: calc(100dvh - 40px);
  overflow: auto;
  border-radius: 28px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
}

.modal__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 22px 0;
}

.modal__titles {
  flex: 1;
  min-width: 0;
}

.modal__titles h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.modal__titles p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.modal__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: var(--muted);
  transition: background 0.2s, color 0.2s, transform 0.3s var(--spring);
}

.modal__close:hover {
  background: var(--tile);
  color: var(--text);
  transform: rotate(90deg);
}

.modal__body {
  padding: 20px 22px;
}

.modal__body:empty {
  padding: 8px;
}

.modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 22px 22px;
}

.suggest {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.suggest__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  border-radius: 12px;
  background: var(--tile);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  transition: background 0.2s, transform 0.25s var(--ease);
}

.suggest__item:hover {
  background: var(--soft);
  transform: translateX(3px);
}

.suggest__item small {
  margin-left: auto;
  color: var(--muted);
  font-weight: 500;
}

.suggest__item > svg:last-child {
  color: var(--purple);
}

.shortcuts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.shortcuts li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.shortcuts li:last-child {
  border-bottom: 0;
}

.shortcuts__keys {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
}

.upgrade-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.upgrade-plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.upgrade-plan__price strong {
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--blue);
}

.upgrade-plan__price span {
  color: var(--muted);
  font-size: 13px;
}

.upgrade-plan ul {
  align-self: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.upgrade-plan li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.upgrade-plan li svg {
  color: var(--green);
}

/* ---------------- command palette ---------------- */
.palette {
  width: min(620px, 100%);
  border-radius: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

.palette__search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  height: 60px;
  border-bottom: 1px solid var(--line);
  color: var(--purple);
}

.palette__search input {
  flex: 1;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15px;
}

.palette__list {
  max-height: min(52vh, 420px);
  overflow-y: auto;
  padding: 8px;
}

.palette__group {
  padding: 10px 10px 6px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.palette__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--text-2);
  font-size: 13.5px;
  text-align: left;
}

.palette__item > *:not(.palette__hl) {
  position: relative;
}

.palette__item.is-active {
  color: var(--purple);
}

.palette__hl {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--soft);
}

.palette__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text);
  font-weight: 500;
}

.palette__sub {
  color: var(--muted);
  font-size: 12px;
  text-transform: capitalize;
}

.palette__empty {
  padding: 30px;
  color: var(--muted);
  text-align: center;
}

.palette__foot {
  display: flex;
  gap: 18px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11.5px;
}

.palette__foot span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ---------------- toasts ---------------- */
.toasts {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}

.toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: min(400px, calc(100vw - 32px));
  padding: 12px 12px 12px 12px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--tooltip);
  color: #fff;
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

.toast__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
}

.toast--purple .toast__icon,
.toast--blue .toast__icon {
  background: var(--blue);
}

.toast__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  font-size: 13px;
}

.toast__text span {
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.toast__action {
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.toast__action:hover {
  background: rgba(255, 255, 255, 0.2);
}

.toast__close {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.6);
}

.toast__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.toast__timer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--lime);
  transform-origin: left;
}

/* ---------------- flag ---------------- */
.flag {
  display: inline-block;
  flex: none;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* ---------------- data list ---------------- */
.dlist {
  min-width: 0;
}

.dlist__head,
.dlist__row {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
}

.dlist__head {
  height: 36px;
  border-radius: 10px;
  background: var(--tile);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.dlist__row {
  position: relative;
  min-height: 40px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 12px;
  transition: background 0.18s;
}

.dlist__row:hover,
.dlist__row.is-active {
  background: var(--hover);
}

.dlist__row.is-clickable {
  cursor: pointer;
}

.dlist__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 6px;
}

.al-left {
  text-align: left;
  justify-self: start;
}

.al-right {
  text-align: right;
  justify-self: end;
}

.al-center {
  text-align: center;
  justify-self: center;
}

/* ---------------- sign in ---------------- */
.signin {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 20px;
  overflow: hidden;
  perspective: 1600px;
}

.signin__orb {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
  animation: orb-float 10s ease-in-out infinite;
}

.signin__orb--a {
  top: -160px;
  left: -120px;
  background: var(--blue);
}

.signin__orb--b {
  right: -140px;
  bottom: -180px;
  background: var(--lime);
  animation-delay: -4s;
}

.signin__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(400px, 100%);
  padding: 34px 30px 30px;
  border-radius: 26px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
}

.signin__card h1 {
  margin-top: 10px;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.signin__card > p {
  margin-top: -10px;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 560px) {
  .form__row,
  .form__row--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .toasts {
    right: 16px;
    left: 16px;
    bottom: 16px;
    align-items: stretch;
  }

  .toast {
    min-width: 0;
    max-width: none;
  }
}

/* ============================================================
   Moneed finance components
   ============================================================ */

/* round icon buttons (bell, share, plus, filter, x, arrow) */
.circle-btn {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  color: var(--text);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.3s var(--spring);
}

.circle-btn--light {
  background: var(--card);
  border: 1px solid var(--line-2);
}

.circle-btn--light:hover,
.circle-btn--light.is-active {
  background: var(--tile);
}

.circle-btn--soft {
  background: var(--tile);
  color: var(--text-2);
}

.circle-btn--soft:hover {
  background: var(--tile-2);
  color: var(--text);
}

.circle-btn--dark {
  background: var(--ink);
  color: var(--on-ink);
}

.circle-btn--dark:hover {
  transform: rotate(45deg);
}

.circle-btn--lime {
  background: var(--lime);
  color: #1d1d1f;
}

.circle-btn--lime:hover {
  transform: rotate(90deg) scale(1.06);
}

.circle-btn__dot {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--card);
  animation: badge-pop 0.5s var(--spring) both;
}

@keyframes badge-pop {
  from {
    transform: scale(0);
  }
}

.circle-btn.is-ringing svg {
  transform-origin: 50% 10%;
  animation: ring 2.6s ease-in-out 1.8s infinite;
}

/* pill dropdown trigger */
.pill-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: 99px;
  border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}

.pill-select.is-upper span {
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.pill-select:hover,
.pill-select.is-open {
  background: var(--tile);
}

.pill-select__caret {
  color: var(--text-2);
  transition: transform 0.3s var(--ease);
}

.pill-select.is-open .pill-select__caret {
  transform: rotate(180deg);
}

.flag--round {
  border-radius: 50%;
}

/* trend badges */
.trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 27px;
  padding: 0 10px 0 4px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}

.trend-badge__icon {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  color: #fff;
}

.trend-badge--green {
  background: var(--green-soft);
  color: var(--green-ink);
}

.trend-badge--green .trend-badge__icon {
  background: var(--green);
}

.trend-badge--red {
  background: var(--red-soft);
  color: var(--red-ink);
}

.trend-badge--red .trend-badge__icon {
  background: var(--red);
}

.trend-badge__text {
  color: var(--text-2);
  font-weight: 500;
  margin-left: 4px;
}

.trend-badge--sm {
  height: 24px;
  gap: 5px;
  padding: 0 9px 0 3px;
  font-size: 12px;
}

.trend-badge--sm .trend-badge__icon {
  width: 17px;
  height: 17px;
}

.trend-badge b {
  font-weight: 600;
}

/* status pills */
.status-pill {
  display: inline-grid;
  place-items: center;
  min-width: 86px;
  height: 26px;
  padding: 0 13px;
  border-radius: 99px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}

.status-pill--green {
  background: var(--green);
}

.status-pill--red {
  background: var(--red);
}

.status-pill--amber {
  background: var(--amber);
}

/* payment method */
.method {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  white-space: nowrap;
}

.method__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 21px;
  height: 21px;
  border-radius: 6px;
  color: #fff;
}

/* merchant logos */
.brand-mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: 8px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.brand-mark--plain {
  background: transparent;
}

.brand-mark--person {
  border-radius: 50%;
  background: var(--tile-2);
  color: var(--text-2);
}

/* money */
.money {
  white-space: nowrap;
}

.money__cents {
  font-size: 0.56em;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-left: 1px;
}

.money__mask {
  letter-spacing: 0.02em;
}

/* search pill */
.search-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  min-width: 210px;
  padding: 0 15px;
  border-radius: 99px;
  border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--text-2);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-pill:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(39, 92, 243, 0.12);
}

.search-pill input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 13px;
}

.search-pill input::placeholder {
  color: var(--text-2);
}

/* money modals */
.contacts {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 4px;
}

.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: none;
  width: 76px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px 4px 8px;
  border-radius: 18px;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  transition: background 0.2s, box-shadow 0.2s;
}

.contact:hover {
  background: var(--tile);
}

.contact.is-active {
  background: var(--soft);
  color: var(--blue);
  box-shadow: inset 0 0 0 2px var(--blue);
}

.amount-input {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 56px;
  padding: 0 16px;
  border-radius: 16px;
  background: var(--tile);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--text);
  border: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.amount-input:focus-within {
  background: var(--card);
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(39, 92, 243, 0.12);
}

.amount-input.is-error {
  color: var(--red);
  border-color: var(--red);
}

.amount-input input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: -6px;
}

.quick__chip {
  height: 34px;
  padding: 0 14px;
  border-radius: 99px;
  border: 1px solid var(--line-2);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}

.quick__chip:hover {
  background: var(--tile);
}

.quick__chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

.icon-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.icon-pick__item {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tile);
  color: var(--text-2);
  transition: background 0.2s, color 0.2s, transform 0.3s var(--spring);
}

.icon-pick__item:hover {
  transform: scale(1.08);
}

.icon-pick__item.is-active {
  background: var(--blue);
  color: #fff;
}

/* receipt */
.receipt__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 0 18px;
  text-align: center;
}

.receipt__hero strong {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 600;
}

.receipt__amount {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.receipt__amount.is-in {
  color: var(--green-ink);
}

.receipt__list {
  margin: 0;
  border-top: 1px dashed var(--line-2);
}

.receipt__list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.receipt__list dt {
  color: var(--muted);
}

.receipt__list dd {
  margin: 0;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.receipt__sub {
  color: var(--muted);
  font-size: 12.5px;
}

.receipt__actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.receipt__actions .btn {
  flex: 1;
}


/* ---------- MONEED: charts.css ---------- */

/* ============================================================
   Charts
   ============================================================ */

/* ---------------- area chart ---------------- */
.area {
  position: relative;
  width: 100%;
  touch-action: pan-y;
}

.area__svg {
  overflow: visible;
  cursor: crosshair;
}

.area__tick {
  fill: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.area__guide {
  stroke: var(--line);
  stroke-width: 1;
}

.area__cursor {
  position: absolute;
  top: 0;
  width: 0;
  height: 100%;
  pointer-events: none;
}

.area__stem {
  position: absolute;
  left: -1px;
  width: 2px;
  border-radius: 2px;
  background: var(--blue);
}

.area__dot {
  position: absolute;
  left: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--purple);
  border: 2.5px solid var(--card);
  box-shadow: 0 0 0 5px rgba(39, 92, 243, 0.18), 0 4px 10px rgba(39, 92, 243, 0.5);
}

.area__tip {
  position: absolute;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 12px 6px;
  border-radius: 9px;
  background: var(--tooltip);
  color: var(--tooltip-text);
  transform: translate(-50%, calc(-100% - 16px));
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.area__tip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 2px;
  background: inherit;
  transform: rotate(45deg);
}

.area__tip strong {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.area__tip small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
}

/* ---------------- donut ---------------- */
.donut {
  position: relative;
  flex: none;
}

.donut__svg {
  overflow: visible;
}

.donut__track {
  stroke: var(--tile);
}

.donut__seg {
  cursor: pointer;
  transition: stroke-width 0.3s var(--spring), filter 0.3s;
}

.donut__seg.is-active {
  filter: drop-shadow(0 6px 10px rgba(39, 92, 243, 0.35));
}

.donut__center {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 10px 26px -10px rgba(20, 20, 30, 0.22), inset 0 0 0 1px var(--line);
  pointer-events: none;
}

.donut__value {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.donut__pct {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.donut__label {
  max-width: 90px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.25;
}

/* ---------------- world map ---------------- */
.map {
  position: relative;
  width: 100%;
}

.map__inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.map__svg {
  overflow: visible;
}

.map__land {
  fill: var(--map-land);
  stroke: var(--card);
  stroke-width: 0.6;
  transition: fill 0.7s var(--ease), opacity 0.3s, filter 0.3s;
}

.map__land.is-tracked {
  cursor: pointer;
}

.map__land.is-focus {
  filter: drop-shadow(0 4px 8px rgba(39, 92, 243, 0.45)) brightness(1.06);
}

.map__ping-core {
  fill: #fff;
  stroke: var(--purple);
  stroke-width: 2.5;
}

.map__ping-wave {
  fill: none;
  stroke: var(--purple);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: ping 2.4s ease-out infinite;
}

.map__ping-wave--late {
  animation-delay: 1.2s;
}

@keyframes ping {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  to {
    transform: scale(5);
    opacity: 0;
  }
}

.map__card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--tooltip);
  color: #fff;
  transform: translate(-50%, calc(-100% - 14px));
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.5);
}

.map__card strong {
  display: block;
  font-size: 12.5px;
}

.map__card span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
}

/* ---------------- sparkline / score ring ---------------- */
.spark {
  overflow: visible;
}

.score-ring {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
}

.score-ring svg {
  position: absolute;
  inset: 0;
}

.score-ring__value {
  position: relative;
  font-size: 12px;
  font-weight: 700;
}

/* ---------------- bar list ---------------- */
.barlist {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.barlist__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  font-size: 12.5px;
}

.barlist__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.barlist__label small {
  color: var(--muted);
  font-weight: 500;
}

.barlist__swatch {
  width: 8px;
  height: 8px;
  border-radius: 3px;
}

.barlist__value {
  color: var(--text-2);
  font-weight: 600;
}

.barlist__track {
  display: block;
  position: relative;
  height: 12px;
  border-radius: 99px;
  background: var(--tile);
  overflow: hidden;
}

.barlist__bar {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--blue);
}

.barlist__row.is-highlight .barlist__label {
  color: var(--purple);
}

/* ---------------- multi line ---------------- */
.mline {
  position: relative;
  width: 100%;
  touch-action: pan-y;
}

.mline svg {
  overflow: visible;
  cursor: crosshair;
}

.mline__grid {
  stroke: var(--line);
  stroke-dasharray: 3 5;
}

.mline__cross {
  stroke: var(--line-2);
  stroke-width: 1.5;
}

.mline__tip {
  position: absolute;
  top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 156px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--tooltip);
  color: #fff;
  font-size: 12px;
  pointer-events: none;
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.5);
}

.mline__tip-title {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
}

.mline__tip-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mline__tip-row i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.mline__tip-row b {
  margin-left: auto;
}


/* ============================================================
   LO NUESTRO (2)  —  EL MOVIMIENTO
   ============================================================
   Moneed anima con `framer-motion`, que es React. Esto es lo mismo
   escrito con transiciones de CSS; quien las dispara es `cdpg-mn.js`
   agregando `.is-in` cuando el elemento entra en pantalla.

   LOS NOMBRES Y LOS NUMEROS SON LOS DE ELLOS, sacados de
   `src/lib/motion.js`, para que se vea de donde salio cada uno:
     rise  = sube 18px con desenfoque        (su `rise`)
     slide = entra 14px desde la izquierda   (su `slideIn`)
     pop   = aparece desde 0.8 con rebote    (su `popIn`)
     fly   = vuela desde la derecha, girado  (su `flyIn`)
     card  = sube 26px y crece desde 0.98    (su `cardIn`)
     roll  = la seccion se endereza en X     (su `Reveal`)

   LO QUE NO SE COPIA SON LOS RESORTES REALES. framer-motion resuelve
   fisica (rigidez y amortiguacion); CSS solo tiene curvas. Para el
   rebote se usa su propio `--spring`, que es la curva con sobrepaso
   que ya esta en sus tokens. A ojo es lo mismo; medido no lo es, y
   conviene saberlo antes de buscar la diferencia.

   EL ESCALONADO es `--mn-i`, el indice que pone el JS: cada hijo
   arranca 70ms despues del anterior, como su `staggerChildren`.
   ============================================================ */

/* ============================================================
   LO NUESTRO (3)  —  SWEETALERT CON LA CARA DE MONEED
   ============================================================
   El sistema abre casi todos sus carteles con SweetAlert: solo
   `stock.html` tiene 75. `cdpg-ui.css` les daba su estilo, y esta
   hoja la reemplaza, asi que sin esto quedarian con el aspecto de
   fabrica de la libreria: ni CDPG ni Moneed.

   SE MAPEA PIEZA POR PIEZA a lo que Moneed ya tiene:
     .swal2-container      -> su `.modal`        (el velo)
     .swal2-popup          -> su `.modal__panel` (el cuadro)
     .swal2-title          -> su `.modal__titles h2`
     .swal2-confirm        -> su `.btn--primary`
     .swal2-cancel         -> su `.btn--ghost`

   VA ACA Y NO ARRIBA: este archivo es una cascada y el bloque de la
   marca esta antes de todo lo demas de Moneed.

   OJO: SweetAlert trae sus propias reglas en SU hoja, que se carga
   aparte y DESPUES en varias pantallas. Donde haga falta ganarle se
   usa `!important`, y solo ahi.
   ============================================================ */

.swal2-container {
  background: rgba(20, 20, 40, .32) !important;
  backdrop-filter: blur(6px);
  padding: 20px;
}

[data-theme='dark'] .swal2-container { background: rgba(0, 0, 0, .55) !important; }

.swal2-popup {
  border-radius: 28px !important;
  background: var(--card) !important;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  color: var(--text);
  font-family: var(--font);
  padding: 22px;
}

.swal2-title {
  color: var(--text) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  padding: 0 0 4px !important;
}

.swal2-html-container {
  color: var(--text-2) !important;
  font-size: 13px !important;
  margin: 6px 0 0 !important;
  line-height: 1.5;
}

/*  Las tablas que varios carteles meten adentro.  */
.swal2-html-container table { width: 100%; border-collapse: collapse; }
.swal2-html-container th {
  padding: 8px 10px; text-align: left; background: transparent;
  color: var(--muted); font-size: 11px; font-weight: 500;
  text-transform: none; letter-spacing: 0;
  border-bottom: 1px solid var(--line);
}
.swal2-html-container td {
  padding: 9px 10px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; font-variant-numeric: tabular-nums;
}

.swal2-actions { gap: 10px; margin-top: 18px !important; }

.swal2-styled {
  height: 36px; padding: 0 15px !important;
  border-radius: 99px !important;
  font-size: 13px !important; font-weight: 500 !important;
  box-shadow: none !important;
  transition: background .2s, color .2s, box-shadow .25s;
}
.swal2-styled.swal2-confirm { background: var(--blue) !important; color: #fff !important; }
.swal2-styled.swal2-confirm:hover { box-shadow: var(--shadow-purple) !important; }
.swal2-styled.swal2-cancel { background: var(--tile) !important; color: var(--text) !important; }
.swal2-styled.swal2-cancel:hover { background: var(--tile-2) !important; }
.swal2-styled.swal2-deny { background: var(--red) !important; color: #fff !important; }
.swal2-styled:focus { box-shadow: 0 0 0 4px rgba(230, 81, 0, .14) !important; }

.swal2-close {
  border-radius: 10px; color: var(--muted);
  transition: background .2s, color .2s, transform .3s var(--spring);
}
.swal2-close:hover { background: var(--tile); color: var(--text); transform: rotate(90deg); }

.swal2-input, .swal2-textarea, .swal2-select {
  border-radius: 12px !important;
  border: 1px solid var(--line-2) !important;
  background: var(--tile) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  font-size: 13px !important;
}
.swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus {
  background: var(--card) !important;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 4px rgba(230, 81, 0, .14) !important;
}

.swal2-validation-message {
  border-radius: 12px; background: var(--red-soft) !important;
  color: var(--red-ink) !important; font-size: 12.5px;
}

/*  EL MARCO VA DE BORDE A BORDE.

    El paquete trae el fuente Y el compilado, y NO son la misma
    version. Su `src/shell.css` dice

        .stage { padding: 0 clamp(20px, 5.5vw, 100px); }

    y su `dist` --que es lo que se ve en el video que mostro el
    dueño-- dice `.stage{padding:0}`. A 1440px eso son 79px de
    margen muerto a cada lado que el original no tiene.

    SE SIGUE EL COMPILADO: es lo que el dueño vio y lo que pidio.
    Se comparo regla por regla con `comparar_css.py`, en el
    scratchpad: fuera de esta, las unicas diferencias entre el build
    y lo portado son de formato del minificador o son nuestras a
    proposito --el naranja en vez del azul--.

    VA ACA Y NO ARRIBA CON EL RESTO DE LO NUESTRO, por lo mismo que
    el `overflow` de abajo: este archivo es una cascada y arriba de
    `shell.css` su propia regla le gana.                           */
.stage { padding: 0; }
@media (max-width: 760px) { .stage { padding: 0; } }

/*  EL CUERPO NO VA EN overflow:hidden EN CELULAR. Moneed es un
    tablero de escritorio y encierra el scroll adentro de `.app`; en
    un telefono eso pelea con la barra del navegador, que aparece y
    desaparece. Abajo de 760px la pagina scrollea normal.

    VA ACA Y NO ARRIBA CON EL RESTO DE LO NUESTRO: este archivo es
    una cascada, y arriba de `base.css` su `body{overflow:hidden}`
    --que viene despues-- le gana. Paso al probarlo en el telefono. */
@media (max-width: 760px) {
  body { overflow: auto; }
  .stage, .app { height: auto; min-height: 100dvh; }
  .main__scroll { overflow: visible; }
}

.mn-anim { opacity: 0; will-change: transform, opacity, filter; }

.mn-rise  { transform: translateY(18px);  filter: blur(6px); }
.mn-slide { transform: translateX(-14px); filter: blur(6px); }
.mn-pop   { transform: scale(.8);         filter: blur(4px); }
.mn-card  { transform: translateY(26px) scale(.98); }
.mn-fly   { transform: translateX(70px) rotateY(-32deg) skewX(-10deg) scale(.94);
            filter: blur(10px); }
.mn-roll  { transform: rotateX(-34deg) translateY(70px) scale(.97); }

.mn-anim.is-in {
  opacity: 1;
  transform: none;
  filter: blur(0px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
  transition-delay: calc(var(--mn-i, 0) * 70ms);
}

/*  Los dos que en el original tienen rebote.  */
.mn-pop.is-in { transition-duration: .55s; transition-timing-function: var(--spring); }
.mn-fly.is-in { transition-duration: .85s; transition-timing-function: var(--spring); }
.mn-roll.is-in { transition-duration: .95s; }

/*  La pastilla que se desliza entre pestañas. En Moneed es el
    `layoutId` de framer-motion; aca es UN elemento que se mide y se
    mueve. Sin transicion la primera vez, para que no venga volando
    desde la esquina al cargar la pagina.                           */
.topnav { position: relative; }
.topnav__pill.mn-pill {
  position: absolute;
  left: 0; top: 0;
  transition: transform .45s var(--spring), width .45s var(--spring);
}
.topnav__pill.mn-pill.sin-mover { transition: none; }

/*  EL GIRO AL CAMBIAR DE PAGINA, su `pageVariants`.
    La que se va se inclina hacia atras y sube; la que llega entra
    desde abajo, acostada, y se endereza. Los numeros son los suyos.

    LA PERSPECTIVA VA EN EL PROPIO `transform` y no en el padre: asi
    el efecto viaja con la clase y no depende de que alguien se
    acuerde de ponerle `perspective` al contenedor.                */
.mn-pg { transform-origin: 50% 12%; will-change: transform, opacity; }

.mn-pg-sale {
  opacity: 0;
  transform: perspective(1800px) rotateX(48deg) translateY(-50px) scale(.96);
  transition: opacity .36s var(--ease-io), transform .36s var(--ease-io);
}

.mn-pg-entra {
  opacity: 0;
  transform: perspective(1800px) rotateX(-58deg) translateY(70px) scale(.95);
}

.mn-pg-entra.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}

/*  EL MARCO QUE ENTRA GIRANDO, su `frameIn`.  */
.app.mn-frame { opacity: 0; transform: rotateX(-38deg) translateY(80px) scale(.9); }
.app.mn-frame.is-in {
  opacity: 1; transform: none;
  transition: opacity 1.05s var(--ease), transform 1.05s var(--ease);
}

/*  NADA DE ESTO CORRE SI LA PERSONA PIDIO QUE NO SE MUEVA. No es
    cortesia: a quien le da mareo, le da mareo.                     */
@media (prefers-reduced-motion: reduce) {
  .mn-anim, .mn-anim.is-in,
  .app.mn-frame, .app.mn-frame.is-in,
  .mn-pg, .mn-pg-sale, .mn-pg-entra, .mn-pg-entra.is-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .topnav__pill.mn-pill { transition: none; }
}

/* ============================================================
   LO NUESTRO (4)  —  EL BOTON DEL CAJON EN OSCURO  (27/10)
   ============================================================
   `cdpg-ux.js` lo pinta blanco y tiene su propia version oscura,
   pero colgada de `html.cd-dark`, que en estas seis pantallas no se
   prende --prenderla apilaria dos temas oscuros distintos, y se
   midio: le pisa la superficie a las tarjetas--.

   Es lo unico de su chrome que queda a la vista: el cajon ya lo
   pinta `cdpg-menu.js` oscuro en los dos temas.

   No lleva `!important`: su regla es `#cdkBtn` a secas, y esta tiene
   un elemento mas de especificidad.
   ============================================================ */
:root[data-theme='dark'] #cdkBtn {
  background: var(--card);
  border-color: var(--line-2);
  color: var(--text);
}
:root[data-theme='dark'] #cdkBtn:hover {
  background: var(--hover);
  border-color: var(--blue);
  color: var(--blue);
}

/* ============================================================
   LO QUE SE PROBO Y SE SACO  (27/10)
   ============================================================
   Una sombra suave en reposo para `.card`, para que la tarjeta se
   despegara todavia mas del marco. Funcionaba, y se saco igual.

   EL MOTIVO: media pantalla no la habria recibido. Las pantallas
   nombran a sus tarjetas con clases propias --`.pcard` en la carta,
   `.tablebox` y `.summary .card` en insumos, y `optimos_dia` apaga
   la sombra de `.card` en su capa, que va despues del link y le
   gana--. Una regla que vale en tres pantallas y no en las otras
   tres se ve como un error, no como un criterio.

   El contraste lo da el marco, que si llega a las seis por igual.
   Si alguna vez se quiere la sombra, primero hay que unificar como
   se llaman las tarjetas.
   ============================================================ */