/* ============================================================
   millions.css — Capa base del ecosistema Millions
   ------------------------------------------------------------
   TradingPlan nacio antes que la suite Millions, con su propia
   paleta y su propia tipografia. Este archivo trae al proyecto
   el mismo lenguaje visual del dashboard de portal.millions.mx:

     - Las mismas fuentes (Syne para titulos, DM Serif Display
       para el saludo, Montserrat para las cifras, Work Sans
       para los eyebrows, Outfit para el cuerpo).
     - El mismo fondo: azul noche con una luz cenital neutra.
     - La misma receta de "liquid glass" de las tarjetas del
       dashboard (doble degradado + blur + inset highlight).
     - Los mismos botones-pastilla, badges y eyebrows.

   glass.css se apoya en lo que se define aqui. Los colores de
   TradingPlan no cambian: ya eran los de la suite, solo se les
   puso nombre de ecosistema.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Syne:wght@400;700;800&family=DM+Serif+Display:ital@0;1&family=Work+Sans:wght@400;500&family=Montserrat:wght@700&display=swap');

:root{
  /* ── Tipografia del ecosistema ── */
  --m-font-body:'Outfit','Libre Franklin',system-ui,sans-serif;
  --m-font-display:'Syne','Outfit',sans-serif;      /* titulos de tarjeta y seccion */
  --m-font-serif:'DM Serif Display',Georgia,serif;  /* saludo / hero */
  --m-font-num:'Montserrat','Outfit',sans-serif;    /* cifras y valores */
  --m-font-eyebrow:'Work Sans','Outfit',sans-serif; /* antetitulos */

  /* ── Acentos de la suite ── */
  --m-menta:#6ee7b7;
  --m-esmeralda:#10b981;
  --m-oro:#FBBF24;
  --m-ambar:#f59e0b;
  --m-indigo:#a5b4fc;
  --m-azul:#93c5fd;
  --m-morado:#a78bfa;
  --m-rosa:#f472b6;
  --m-coral:#fca5a5;
  --m-crema:#f5e8b0;                 /* color del saludo del dashboard */

  /* ── Fondo ── */
  --m-noche:#0f172a;
  --m-noche-honda:#020617;

  /* ── Texto ── */
  --m-texto:#ffffff;
  --m-texto-suave:rgba(255,255,255,.62);
  --m-texto-tenue:rgba(255,255,255,.40);

  /* ── Liquid glass (receta del dashboard) ── */
  --m-glass:
    radial-gradient(135% 95% at 0% 0%, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 42%, rgba(255,255,255,0) 70%),
    linear-gradient(135deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 55%, rgba(255,255,255,.055) 100%);
  --m-glass-blur:blur(16px) saturate(160%);
  --m-glass-borde:rgba(255,255,255,.16);
  --m-glass-sombra:inset 0 1px 1px rgba(255,255,255,.32), inset 0 -28px 50px rgba(0,0,0,.20), 0 12px 40px rgba(0,0,0,.45);
  --m-glass-sombra-hover:inset 0 1px 2px rgba(255,255,255,.25), 0 20px 48px rgba(0,0,0,.55);

  /* ── Radios ── */
  --m-radio-xl:30px;   /* tarjeta grande, como .mdash-card */
  --m-radio-l:24px;
  --m-radio-m:18px;
  --m-radio-s:12px;
}

/* ============================================================
   FONDO AMBIENTAL
   Azul noche con una sola luz cenital neutra. Nada de halos
   de color: el color entra por la tipografia, no por el fondo.
   Se pinta con un pseudo-elemento fijo para que no scrollee con
   el contenido ni pelee con los blur locales.
   ============================================================ */
body{
  background-color:var(--m-noche);
  color:var(--m-texto);
  font-family:var(--m-font-body);
  -webkit-font-smoothing:antialiased;
  /* Red de seguridad general: cifras, badges y títulos de una sola
     palabra (vienen del CMS, largo impredecible) rompen en vez de
     desbordarse en silencio fuera de una tarjeta con overflow:hidden. */
  overflow-wrap:break-word;
  word-break:break-word;
}
body::before{
  content:'';
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% -10%, rgba(255,255,255,.045) 0%, transparent 60%),
    linear-gradient(180deg, var(--m-noche) 0%, var(--m-noche-honda) 100%);
}

/* ============================================================
   TIPOGRAFIA DEL ECOSISTEMA
   Misma jerarquia que las tarjetas del dashboard:
   eyebrow (Work Sans) → titulo (Syne 900) → valor (Montserrat).
   ============================================================ */
.m-eyebrow{
  font-family:var(--m-font-eyebrow);
  font-size:11px;font-weight:400;
  letter-spacing:3px;text-transform:uppercase;
  color:rgba(110,231,183,.7);
  display:block;
}
.m-eyebrow--tenue{color:var(--m-texto-tenue);}
.m-title{
  font-family:var(--m-font-display);
  font-weight:900;letter-spacing:-.4px;
  color:var(--m-texto);
}
.m-num{
  font-family:var(--m-font-num);
  font-weight:700;letter-spacing:-.5px;
}

/* ============================================================
   TARJETA LIQUID GLASS
   ============================================================ */
.m-card{
  background:var(--m-glass);
  backdrop-filter:var(--m-glass-blur);
  -webkit-backdrop-filter:var(--m-glass-blur);
  border:1px solid var(--m-glass-borde);
  border-radius:var(--m-radio-xl);
  box-shadow:var(--m-glass-sombra);
  position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease,border-color .3s ease;
}
.m-card:hover{
  transform:translateY(-6px) scale(1.01);
  box-shadow:var(--m-glass-sombra-hover);
}

/* ============================================================
   PASTILLA CTA
   La del dashboard: minuscula, muy espaciada, y al hover se
   rellena con el degradado del acento y el texto se oscurece.
   ============================================================ */
.m-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--m-font-body);
  font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  padding:6px 14px;border-radius:50px;
  width:fit-content;text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
  transition:all .3s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   BADGES DE IDENTIDAD
   Los mismos de la cabecera de usuario del dashboard.
   ============================================================ */
.m-badge{
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;
  padding:6px 14px;border-radius:50px;
  font-family:var(--m-font-body);
  font-size:11px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;
}
.m-badge--millions{
  background:linear-gradient(180deg,rgba(6,78,59,.2) 0%,rgba(2,44,34,.2) 100%);
  color:var(--m-menta);border:1px solid rgba(110,231,183,.3);
}
.m-badge--oro{
  background:linear-gradient(180deg,rgba(255,237,74,.15) 0%,rgba(245,158,11,.15) 100%);
  color:var(--m-oro);border:1px solid rgba(251,191,36,.3);
}
.m-badge--azul{
  background:linear-gradient(180deg,rgba(23,37,84,.2) 0%,rgba(15,23,42,.2) 100%);
  color:var(--m-azul);border:1px solid rgba(59,130,246,.3);
}
.m-badge--coral{
  background:linear-gradient(180deg,rgba(252,105,76,.15) 0%,rgba(220,38,38,.15) 100%);
  color:var(--m-coral);border:1px solid rgba(220,38,38,.3);
}
.m-badge--clickable{cursor:pointer;transition:all .25s ease;}
.m-badge--clickable:hover{filter:brightness(1.2);transform:translateY(-2px);box-shadow:0 6px 15px rgba(0,0,0,.35);}
.m-badge--clickable:active{transform:scale(.95);}

/* ============================================================
   BARRA DE ECOSISTEMA
   Franja superior que dice de que suite es esta app. Es lo que
   ata visualmente TradingPlan al portal: mismo logo, mismo
   eyebrow y mismos badges que la cabecera de usuario.
   ============================================================ */
.m-suitebar{
  position:relative;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  padding:10px 20px;
  background:rgba(2,6,23,.55);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.m-suitebar__marca{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;
}
.m-suitebar__marca img{height:20px;width:auto;display:block;}
.m-suitebar__marca span{
  font-family:var(--m-font-eyebrow);
  font-size:10px;font-weight:500;letter-spacing:3px;text-transform:uppercase;
  color:var(--m-texto-tenue);
  transition:color .25s ease;
}
.m-suitebar__marca:hover span{color:var(--m-menta);}
.m-suitebar__badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.m-suitebar__badges .m-badge{font-size:10px;padding:4px 11px;}
@media (max-width:640px){
  .m-suitebar{justify-content:center;padding:8px 14px;}
  .m-suitebar__marca span{letter-spacing:2px;}
}

/* ============================================================
   MOVIMIENTO REDUCIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .m-card:hover{transform:none;}
}