/**
 * Identidad visual MMT (sección 12.1) — negro + verde neón.
 * Extraída de las capturas de la marca (landing MMT Academia).
 * NO usar el azul de RobotEdge; esa paleta era solo del prototipo
 * de referencia del motor de cálculo.
 */
:root{
  --mmt-bg:#0A0A0A;
  --mmt-panel:#121212;
  --mmt-green:#7ED321;      /* verde neón lima de la marca */
  --mmt-green-glow:rgba(126,211,33,.45);
  --mmt-white:#FFFFFF;
  --mmt-dim:#9AA0A6;
  --mmt-border:rgba(126,211,33,.18);
  --mmt-font-display:'Inter',sans-serif; /* sustituir por la tipografía condensada real de MMT cuando se defina */
  --mmt-font-body:'Inter',sans-serif;
}
.mmt-app{ background:var(--mmt-bg); color:var(--mmt-white); font-family:var(--mmt-font-body); }
.mmt-app .mmt-card{ background:var(--mmt-panel); border:1px solid var(--mmt-border); border-radius:14px; }
.mmt-app .mmt-card.mmt-featured{ box-shadow:0 0 24px -6px var(--mmt-green-glow); border-color:var(--mmt-green); }
.mmt-app .mmt-btn{ background:var(--mmt-green); color:#0A0A0A; font-weight:700; border-radius:999px; border:none; padding:12px 20px; }
.mmt-app .mmt-btn.mmt-outline{ background:transparent; color:var(--mmt-white); border:1px solid var(--mmt-border); }
.mmt-app .mmt-eyebrow{ color:var(--mmt-green); text-transform:uppercase; letter-spacing:1.4px; font-size:11px; font-weight:700; }
.mmt-app .mmt-tooltip-icon{ color:var(--mmt-green); cursor:help; }
/* TODO Fase 5: estilos de las 5 gráficas (Chart.js) y del Account Journey animado. */

/* Fase 3/4: calculadora + tracker (funcional, sin animaciones — esas son mejora visual futura) */
.mmt-app .mmt-dim{ color:var(--mmt-dim); }
.mmt-app .mmt-chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.mmt-app .mmt-chip{ font-size:12px; padding:8px 14px; }
.mmt-app .mmt-chip-active{ background:var(--mmt-green); color:#0A0A0A; border-color:var(--mmt-green); }
.mmt-app .mmt-calc-fields{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
.mmt-app .mmt-calc-fields label{ display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--mmt-dim); }
.mmt-app .mmt-calc-fields input, .mmt-app .mmt-calc-fields select{ background:#04060E; border:1px solid var(--mmt-border); border-radius:8px; color:#fff; padding:8px 10px; }
.mmt-app table.widefat{ background:transparent; color:#fff; }
.mmt-app table.widefat th, .mmt-app table.widefat td{ border-color:var(--mmt-border); }
@media (max-width:680px){ .mmt-app .mmt-calc-fields{ grid-template-columns:1fr 1fr; } }

/* [mmt_logout] — a propósito SIN el prefijo ".mmt-app" de las reglas de
   arriba: este botón puede vivir suelto en un menú de WordPress, un
   widget de texto o cualquier página que no tenga el wrapper .mmt-app
   alrededor, así que necesita verse bien por su cuenta. */
.mmt-logout-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:transparent;
  color:var(--mmt-white,#fff);
  border:1px solid var(--mmt-border,rgba(126,211,33,.18));
  border-radius:999px;
  padding:9px 18px;
  font-family:var(--mmt-font-body,'Inter',sans-serif);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:.15s ease;
}
.mmt-logout-btn:hover{
  border-color:var(--mmt-green,#7ED321);
  color:var(--mmt-green,#7ED321);
}