/* * DMX_NIVELES_MIGRATED_CSS_V59J * CSS migrado desde reglas existentes usadas por /niveles/ original. * Sin rediseño ni CSS V59E. */ /* ===== MIGRADO DESDE assets/css/style.css ===== */
@keyframes dmUnlockPulse{ 0%{transform:scale(1); box-shadow:0 0 0 0 rgba(59,130,246,0);} 20%{transform:scale(1.02); box-shadow:0 0 0 10px rgba(59,130,246,.14);} 100%{transform:scale(1); box-shadow:0 0 0 0 rgba(59,130,246,0);} }
@keyframes dmCompletePop{ 0%{transform:scale(1);} 30%{transform:scale(1.03);} 60%{transform:scale(.99);} 100%{transform:scale(1);} }
@keyframes dmConfetti{ 0%{ opacity:1; transform: translate(-50%, -50%) rotate(var(--rot0, 0deg)); } 100%{ opacity:0; transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, -60px))) rotate(var(--rot1, 540deg)); }
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fbIn{ from{ transform: translateY(-2px); opacity:.0 } to{ transform: translateY(0); opacity:1 } } /* ===== MIGRADO DESDE assets/css/dmx-app.css ===== */
.dmxApp{ min-height:calc(100vh - 120px); margin:18px auto 0; color:var(--dmx-ink);
}
.dmxBadge{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#ecfdf3; color:#027a48; font-weight:900; font-size:13px; letter-spacing:.02em;
}
html[data-theme="dark"] .dmxBadge{background:#052e16;color:#86efac}
.dmxBtn{ min-height:52px; padding:0 20px; border:0; border-radius:18px; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:950; color:var(--dmx-ink); background:#fff; border-bottom:5px solid #d0d5dd; transition:.12s transform ease,.12s filter ease;
}
.dmxBtn:hover{transform:translateY(-2px)}
.dmxBtnPrimary{ color:#fff; background:var(--dmx-green); border-bottom-color:var(--dmx-green2);
}
.dmxBtnBlue{ color:#fff; background:var(--dmx-blue); border-bottom-color:#0b83bd;
}
.dmxMapHead{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px;
}
.dmxMapHead h1{ margin:0; font-size:clamp(34px,5vw,58px); line-height:.98; letter-spacing:-.055em;
}
.dmxMapHead p{ margin:8px 0 0; color:var(--dmx-muted); font-weight:750;
}
.dmxNotice{ margin:0 0 16px; padding:16px 18px; border-radius:22px; background:#fff7e6; border:2px solid #fedf89; color:#93370d; font-weight:850;
}
html[data-theme="dark"] .dmxNotice{background:#451a03;color:#fcd34d;border-color:#92400e}
.dmxPath{ position:relative; display:grid; gap:16px; padding:8px 0 22px;
}
.dmxPath:before{ content:""; position:absolute; left:38px; top:22px; bottom:42px; width:8px; border-radius:999px; background:linear-gradient(var(--dmx-green),var(--dmx-blue),var(--dmx-purple)); opacity:.22;
}
.dmxMission{ position:relative; display:grid; grid-template-columns:86px 1fr auto; gap:16px; align-items:center; padding:18px; border-radius:28px; background:var(--dmx-card); border:2px solid var(--dmx-line); border-bottom-width:7px;
}
.dmxMission.locked{opacity:.68}
.dmxNode{ width:76px; height:76px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:28px; font-weight:1000; background:var(--dmx-green); border-bottom:7px solid var(--dmx-green2); z-index:1;
}
.dmxMission.locked .dmxNode{background:#98a2b3;border-bottom-color:#667085}
.dmxMission.done .dmxNode{background:var(--dmx-blue);border-bottom-color:#0b83bd}
.dmxMission h2{ margin:0; font-size:24px; letter-spacing:-.035em;
}
.dmxMissionMeta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;
}
.dmxTag{ padding:6px 10px; border-radius:999px; background:#f2f4f7; color:#475467; font-size:12px; font-weight:900;
}
html[data-theme="dark"] .dmxTag{background:#1f2937;color:#cbd5e1}
.dmxMission form{margin:0}
.dmxMission button,.dmxMission .dmxLockedBtn{ min-width:132px;
}
.dmxLockedBtn{ min-height:52px; padding:0 16px; border:0; border-radius:18px; background:#eaecf0; color:#667085; border-bottom:5px solid #d0d5dd; font-weight:950;
}
@media(max-width:900px){
.dmxMapHead{display:block}
.dmxMission{grid-template-columns:72px 1fr}
.dmxMission form,.dmxMission .dmxLockedBtn{grid-column:1/-1}
.dmxMission button,.dmxMission .dmxLockedBtn{width:100%}
.dmxPath:before{left:34px}
.dmxNode{width:66px;height:66px;font-size:24px}
}
@media(max-width:560px){
.dmxApp{margin-top:8px}
.dmxMission{padding:14px;border-radius:24px}
}
@media(max-width:680px){
.dmxWide,.dmxResultActions .dmxBtn,.dmxQuestionFoot .dmxBtn{width:100%}
}
/* ===== DMX mobile polish / Font Awesome local ===== */
.dmxApp i[class^="fa-"],
.dmxApp i[class*=" fa-"],
.dmxBack i,
.dmxStageDot i,
.dmxResultIcon i,
.dmxFeedbackIcon i{ display:inline-block !important; line-height:1;
}
@media(max-width:760px){
.dmxApp{ width:100%; margin-top:10px; }
.dmxQuestionFoot .dmxBtn, .dmxWide{ width:100%; min-height:68px; border-radius:20px; font-size:23px; }
}
@media(max-width:430px){
.dmxQuestionFoot .dmxBtn, .dmxWide{ min-height:62px; font-size:20px; }
}
/* ===== DMX global icon + mobile fixes ===== */
.dmxApp i[class^="fa-"],
.dmxApp i[class*=" fa-"]{ display:inline-block !important; line-height:1;
}
.dmxTileIcon i,
.dmxNode i,
.dmxBadge i,
.dmxNotice i{ display:inline-block !important;
}
@media(max-width:760px){
.dmxActions .dmxBtn{ width:100%; min-height:60px; font-size:18px; }
.dmxMapHead{ margin-bottom:14px; }
.dmxMapHead h1{ font-size:42px; }
.dmxMission{ grid-template-columns:64px 1fr; gap:12px; padding:14px; border-radius:24px; }
.dmxNode{ width:58px; height:58px; font-size:22px; }
.dmxMission h2{ font-size:22px; line-height:1.08; }
.dmxMissionMeta{ gap:6px; }
.dmxTag{ font-size:11px; padding:5px 8px; }
}
@media(max-width:430px){
.dmxMapHead h1{ font-size:36px; }
}
@media(max-width:640px){
.dmxApp{ margin-top:8px !important; }
.dmxQuestionFoot .dmxBtn, .dmxWide, .dmxResultActions .dmxBtn{ width:100% !important; min-height:54px !important; border-radius:18px !important; font-size:16px !important; }
}
.dmxBtnDanger{ background:#fee2e2 !important; color:#991b1b !important; border:1px solid #fecaca !important;
}
.dmxBtnDanger:hover{ background:#fecaca !important;
}
@keyframes dmxSuccessPop{ 0%{transform:scale(.55);opacity:0} 70%{transform:scale(1.08);opacity:1} 100%{transform:scale(1)}
}
@keyframes dmxGlowPulse{ 0%,100%{opacity:.75;transform:scale(1)} 50%{opacity:1;transform:scale(1.08)}
}
/* Unlock CTA estilo juego móvil */
.dmxLockedBtn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 18px; border:0; border-radius:18px; background:linear-gradient(180deg,#ffd95a 0%, #ffca28 100%); color:#5c3b00; border-bottom:5px solid #d79a00; box-shadow:0 10px 24px rgba(255,202,40,.28); font-weight:950; text-decoration:none; text-align:center; transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.dmxLockedBtn:hover{ transform:translateY(-2px); filter:brightness(1.03); box-shadow:0 14px 28px rgba(255,202,40,.34);
}
.dmxLockedBtn:active{ transform:none !important; filter:brightness(.98);
}
.dmxLockedBtn i{ color:#8a5a00;
}
/* Colores de niveles: azul disponible, verde superado */
.dmxMission .dmxNode{ background:var(--dmx-blue) !important; color:#fff !important; border-bottom-color:#0b83bd !important;
}
.dmxMission.open .dmxNode,
.dmxMission.locked .dmxNode{ background:var(--dmx-blue) !important; color:#fff !important; border-bottom-color:#0b83bd !important;
}
.dmxMission.done .dmxNode{ background:var(--dmx-green) !important; color:#fff !important; border-bottom-color:var(--dmx-green2) !important;
}
.dmxLevelDoneIcon{ color:var(--dmx-green); font-size:.82em; margin-left:6px; vertical-align:middle;
}
.dmxMission .dmxBtnEnter{ background:var(--dmx-blue) !important; color:#fff !important; border-bottom-color:#0b83bd !important;
}
.dmxMission .dmxBtnReview{ background:var(--dmx-green) !important; color:#fff !important; border-bottom-color:var(--dmx-green2) !important;
}
/* Colores de nota por nivel */
.dmxScoreTag{ font-weight:950 !important; border:0 !important;
}
.dmxScoreTag.dmxScore100{ background:var(--dmx-green) !important; color:#fff !important;
}
.dmxScoreTag.dmxScore90{ background:var(--dmx-blue) !important; color:#fff !important;
}
.dmxScoreTag.dmxScore80{ background:linear-gradient(180deg,#ffd95a 0%, #ffca28 100%) !important; color:#5c3b00 !important;
}
.dmxScoreTag.dmxScore70{ background:#f97316 !important; color:#fff !important;
}
.dmxScoreTag.dmxScoreEmpty{ background:#eef2f7 !important; color:#667085 !important;
}
/* Precios tablet: comportamiento similar a móvil entre 761px y 1100px */
@media (min-width:761px) and (max-width:800px){ .dmxApp.dmxPricing, .dmxApp.dmxPricing.dmxBillingYearly, .dmxPricing.dmxBillingYearly{ width:100% !important; max-width:100% !important; overflow-x:hidden !important; } .dmxPricing .container, .dmxPricing .dmxContainer{ box-sizing:border-box !important; width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; padding-left:28px !important; padding-right:28px !important; overflow:visible !important; } .dmxPricing .dmxHero, .dmxPricing .dmxPricingHero, .dmxPricing .dmxSectionHead{ max-width:780px !important; margin-left:auto !important; margin-right:auto !important; } .dmxPricing .dmxBilling, .dmxPricing .dmxBillingToggle, .dmxPricing .dmxBillingSwitch, .dmxPricing .dmxBillingTabs, .dmxPricing .dmxBillingBox{ margin-left:auto !important; margin-right:auto !important; } .dmxPricing .dmxPriceCarouselShell{ width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; overflow:visible !important; } .dmxPricing .dmxPriceCarouselShell .dmxPriceGrid, .dmxPricing .dmxPriceCarouselShell .dmxPricingGrid, .dmxPricing .dmxPriceCarouselShell .dmxPlansGrid, .dmxPricing .dmxPriceGrid, .dmxPricing .dmxPricingGrid, .dmxPricing .dmxPlansGrid{ display:grid !important; grid-auto-flow:column !important; grid-template-columns:none !important; grid-auto-columns:minmax(330px, 42vw) !important; gap:34px !important; width:100vw !important; max-width:100vw !important; margin-left:0 !important; margin-right:0 !important; padding:38px 9vw 24px 9vw !important; overflow-x:auto !important; overflow-y:visible !important; scroll-snap-type:x mandatory !important; scroll-padding-left:9vw !important; scroll-padding-right:9vw !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:none !important; } .dmxPricing .dmxPriceCarouselShell .dmxPriceGrid > *, .dmxPricing .dmxPriceCarouselShell .dmxPricingGrid > *, .dmxPricing .dmxPriceCarouselShell .dmxPlansGrid > *, .dmxPricing .dmxPriceGrid > *, .dmxPricing .dmxPricingGrid > *, .dmxPricing .dmxPlansGrid > *{ width:100% !important; max-width:none !important; min-width:0 !important; margin:0 !important; scroll-snap-align:center !important; scroll-snap-stop:always !important; overflow:visible !important; } .dmxPricing .dmxPriceGrid::-webkit-scrollbar, .dmxPricing .dmxPricingGrid::-webkit-scrollbar, .dmxPricing .dmxPlansGrid::-webkit-scrollbar{ display:none !important; } .dmxPricing .dmxPriceDots{ display:flex !important; }
}
@keyframes dmxPricePop{ from{ opacity:0; transform:translateY(22px) scale(.96); filter:blur(4px); } to{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
.dmxPricing .dmxPricingHead > h1,
.dmxPricing .dmxPricingHead > p,
.dmxPricing .dmxBillingSwitchWrap,
.dmxPricing .dmxPriceCard,
.dmxPricing .dmxPriceCard .dmxPlanTop,
.dmxPricing .dmxPriceCard .dmxPlanList li,
.dmxPricing .dmxPriceCard .dmxBtn,
.dmxPricing .dmxPriceCard .dmxPayOwn,
.dmxPricing .dmxPriceCard form{ animation-fill-mode:both; will-change:opacity, transform, filter;
}
.dmxPricing .dmxPriceCard .dmxBtn,
.dmxPricing .dmxPriceCard .dmxPayOwn,
.dmxPricing .dmxPriceCard form{ animation:dmxPriceFadeUp .42s cubic-bezier(.2,.9,.2,1) .62s both;
}
.dmxPricing .dmxPriceCard.featured .dmxBtn,
.dmxPricing .dmxPriceCard.premium .dmxBtn{ position:relative !important; overflow:hidden !important; isolation:isolate !important;
}
.dmxPricing .dmxPriceCard.featured .dmxBtn::after,
.dmxPricing .dmxPriceCard.premium .dmxBtn::after{ content:"" !important; position:absolute !important; top:-35% !important; left:0 !important; width:42% !important; height:170% !important; pointer-events:none !important; z-index:1 !important; background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.68) 50%, transparent 100%) !important; animation:dmxPlanButtonShine 4.8s ease-in-out infinite !important;
}
.dmxPricing .dmxPriceCard.featured .dmxBtn::after{ animation-delay:0s !important;
}
.dmxPricing .dmxPriceCard.premium .dmxBtn::after{ animation-delay:.6s !important;
}
.dmxPricing .dmxPriceCard.featured .dmxBtn > *,
.dmxPricing .dmxPriceCard.premium .dmxBtn > *{ position:relative !important; z-index:2 !important;
}
@media (prefers-reduced-motion:reduce){
.dmxPricing .dmxPriceCard.featured .dmxBtn::after, .dmxPricing .dmxPriceCard.premium .dmxBtn::after{ animation:none !important; display:none !important; }
}
@keyframes dmxPlanCtaShine{ 0%, 68%, 100%{ left:-80%; opacity:0; } 8%{ opacity:.95; } 18%{ left:125%; opacity:0; }
}
.dmxPricing .dmxPriceCard.featured form button,
.dmxPricing .dmxPriceCard.premium form button,
.dmxPricing .dmxPriceCard.featured a.dmxBtn,
.dmxPricing .dmxPriceCard.premium a.dmxBtn{ position:relative !important; overflow:hidden !important; isolation:isolate !important; animation:dmxPlanCtaPulse 4.2s ease-in-out infinite !important;
}
.dmxPricing .dmxPriceCard.featured form button::before,
.dmxPricing .dmxPriceCard.premium form button::before,
.dmxPricing .dmxPriceCard.featured a.dmxBtn::before,
.dmxPricing .dmxPriceCard.premium a.dmxBtn::before{ content:"" !important; position:absolute !important; top:-45% !important; left:-80% !important; width:52% !important; height:190% !important; z-index:3 !important; pointer-events:none !important; background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.9) 48%, transparent 100%) !important; transform:skewX(-20deg) !important; animation:dmxPlanCtaShine 4.2s ease-in-out infinite !important;
}
.dmxPricing .dmxPriceCard.premium form button,
.dmxPricing .dmxPriceCard.premium a.dmxBtn,
.dmxPricing .dmxPriceCard.premium form button::before,
.dmxPricing .dmxPriceCard.premium a.dmxBtn::before{ animation-delay:.7s !important;
}
@media (prefers-reduced-motion:reduce){
.dmxPricing .dmxPriceCard.featured form button, .dmxPricing .dmxPriceCard.premium form button, .dmxPricing .dmxPriceCard.featured a.dmxBtn, .dmxPricing .dmxPriceCard.premium a.dmxBtn, .dmxPricing .dmxPriceCard.featured form button::before, .dmxPricing .dmxPriceCard.premium form button::before, .dmxPricing .dmxPriceCard.featured a.dmxBtn::before, .dmxPricing .dmxPriceCard.premium a.dmxBtn::before{ animation:none !important; }
}
@keyframes dmxDodoButtonShine{ 0%, 66%, 100%{ transform:translateX(-160%) skewX(-18deg); opacity:0; } 8%{ opacity:.95; } 18%{ transform:translateX(170%) skewX(-18deg); opacity:0; }
}
@keyframes dmxLevelNodePop{ 0%{ opacity:0; transform:scale(.72) rotate(-6deg); filter:blur(3px); } 70%{ transform:scale(1.08) rotate(1deg); } 100%{ opacity:1; transform:scale(1) rotate(0); filter:blur(0); }
}
.dmxMission{ animation:dmxLevelFadeUp .52s cubic-bezier(.2,.9,.2,1) both; will-change:opacity, transform, filter;
}
.dmxMission .dmxNode{ animation:dmxLevelNodePop .48s cubic-bezier(.2,.9,.2,1) both; will-change:opacity, transform, filter;
}
.dmxMission h2,
.dmxMission p,
.dmxMission .dmxTag,
.dmxMission .dmxBtn,
.dmxMission .dmxLockedBtn,
.dmxMission form{ animation:dmxLevelFadeUp .42s cubic-bezier(.2,.9,.2,1) both; will-change:opacity, transform, filter;
}
/* Stagger por tarjeta */
.dmxMission:nth-child(1){animation-delay:.04s;}
.dmxMission:nth-child(2){animation-delay:.10s;}
.dmxMission:nth-child(3){animation-delay:.16s;}
.dmxMission:nth-child(4){animation-delay:.22s;}
.dmxMission:nth-child(5){animation-delay:.28s;}
.dmxMission:nth-child(6){animation-delay:.34s;}
.dmxMission:nth-child(7){animation-delay:.40s;}
.dmxMission:nth-child(8){animation-delay:.46s;}
.dmxMission:nth-child(9){animation-delay:.52s;}
.dmxMission:nth-child(10){animation-delay:.58s;}
.dmxMission:nth-child(1) .dmxNode{animation-delay:.10s;}
.dmxMission:nth-child(2) .dmxNode{animation-delay:.16s;}
.dmxMission:nth-child(3) .dmxNode{animation-delay:.22s;}
.dmxMission:nth-child(4) .dmxNode{animation-delay:.28s;}
.dmxMission:nth-child(5) .dmxNode{animation-delay:.34s;}
.dmxMission:nth-child(6) .dmxNode{animation-delay:.40s;}
.dmxMission:nth-child(7) .dmxNode{animation-delay:.46s;}
.dmxMission:nth-child(8) .dmxNode{animation-delay:.52s;}
.dmxMission:nth-child(9) .dmxNode{animation-delay:.58s;}
.dmxMission:nth-child(10) .dmxNode{animation-delay:.64s;}
.dmxMission h2{animation-delay:.14s;}
.dmxMission p{animation-delay:.18s;}
.dmxMission .dmxTag{animation-delay:.22s;}
.dmxMission .dmxBtn,
.dmxMission .dmxLockedBtn,
.dmxMission form{animation-delay:.28s;}
@media (prefers-reduced-motion:reduce){
.dmxMission, .dmxMission *, .dmxMission *::before, .dmxMission *::after{ animation:none !important; transition:none !important; filter:none !important; }
}
/* Volver / Ver planes siempre en 2 columnas */
div:has(> .dmxRestartBackBtn):has(> .dmxRestartPlansBtn),
footer:has(> .dmxRestartBackBtn):has(> .dmxRestartPlansBtn),
.dmxActions:has(> .dmxRestartBackBtn):has(> .dmxRestartPlansBtn),
.dmxModalActions:has(> .dmxRestartBackBtn):has(> .dmxRestartPlansBtn),
.dmxPremiumLockActions:has(> .dmxRestartBackBtn):has(> .dmxRestartPlansBtn){ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:14px !important; align-items:center !important;
}
/* Desarrollo: fondo oscuro del modal sin bordes redondeados */
.dmxPremiumLockOverlay,
.dmxStatsPaywallOverlay,
.dmxRestartOverlay,
.dmxAnalysisOverlay,
.dmxModalOverlay,
.dmxOverlay,
[class*="Overlay"]:has(.dmxPremiumLockBadge),
[class*="Overlay"]:has(.dmxStatsPaywallBadge){ position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important; border-radius:0 !important; overflow:hidden !important;
}
.dmxStatsPlansBtn,
.dmxBtn.dmxStatsPlansBtn,
.dmxBtnPrimary.dmxStatsPlansBtn{ background:var(--dmx-green) !important; color:#fff !important; border:0 !important; border-bottom:5px solid var(--dmx-green2) !important; box-shadow:0 10px 0 rgba(0,0,0,.14) !important;
}
.dmxStatsCourseBtn,
.dmxBtn.dmxStatsCourseBtn{ background:#fff !important; color:#101828 !important; border:1px solid var(--dmx-line) !important; border-bottom:5px solid #d0d5dd !important; box-shadow:none !important;
}
@keyframes dmxStageWinIcon{ 0%{transform:scale(.3) rotate(-18deg);opacity:0} 55%{transform:scale(1.2) rotate(5deg);opacity:1} 100%{transform:scale(1) rotate(0);opacity:1}
}
@keyframes dmxStageWinGlow{ 0%,100%{box-shadow:0 18px 0 rgba(58,170,0,.35), 0 0 0 rgba(88,204,2,0)} 45%{box-shadow:0 18px 0 rgba(58,170,0,.35), 0 0 42px rgba(88,204,2,.55)}
}
@keyframes dmxStageConfetti{ 0%{opacity:0;transform:translateY(0) scale(.7)} 20%{opacity:1} 100%{opacity:0;transform:translateY(-54px) scale(1.15)}
}
.dmxResultActions .dmxBtn i{ margin-right:8px !important;
}
@keyframes dmxHomeFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}
}
@keyframes dmxHomePulseGlow{ 0%,100%{box-shadow:0 22px 0 rgba(58,170,0,.28),0 0 0 rgba(88,204,2,0)} 45%{box-shadow:0 22px 0 rgba(58,170,0,.28),0 0 36px rgba(88,204,2,.44)}
}
@keyframes dmxHomeOptionWin{ 0%,46%,100%{transform:scale(1);filter:brightness(1)} 55%{transform:scale(1.025);filter:brightness(1.12)} 64%{transform:scale(1);filter:brightness(1)}
}
@keyframes dmxHomeScan{ 0%{transform:translateX(-120%);opacity:0} 12%{opacity:.9} 34%{transform:translateX(145%);opacity:0} 100%{transform:translateX(145%);opacity:0}
}
@keyframes dmxHomeMeter{ from{width:0} to{width:var(--w)}
}
.dmxHomeV2Actions .dmxBtn{ min-height:58px;
}
.dmxHomeV2FinalCta .dmxBtn{ flex:0 0 auto; min-height:58px;
}
@media (max-width:700px){
.dmxHomeV2Actions .dmxBtn, .dmxHomeV2FinalCta .dmxBtn{ width:100%; }
}
@keyframes dmxRealQuizCycle2{ 0%,30%{opacity:0;transform:translateY(16px) scale(.985);pointer-events:none} 35%,62%{opacity:1;transform:translateY(0) scale(1);pointer-events:auto} 67%,100%{opacity:0;transform:translateY(-14px) scale(.985);pointer-events:none}
}
@keyframes dmxRealQuizCycle3{ 0%,64%{opacity:0;transform:translateY(16px) scale(.985);pointer-events:none} 69%,94%{opacity:1;transform:translateY(0) scale(1);pointer-events:auto} 100%{opacity:0;transform:translateY(-14px) scale(.985);pointer-events:none}
}
@keyframes dmxVideoMockProgress{ from{width:0} to{width:var(--p)}
}
@keyframes dmxVideoMockTap{ 0%,100%{transform:scale(1)} 45%{transform:scale(1.025)}
}
@media (max-width:700px){
@keyframes dmxVideoMockScrollMobile{ 0%,24%{transform:translateY(0)} 32%,56%{transform:translateY(-374px)} 64%,88%{transform:translateY(-748px)} 100%{transform:translateY(0)} }
}
@keyframes dmxCleanMockAnswer{ 0%,42%,100%{transform:scale(1)} 52%{transform:scale(1.018)}
}
@keyframes dmxCleanMockGlow{ 0%,100%{box-shadow:0 6px 0 var(--dmxMockGreenShadow),0 0 0 rgba(88,204,2,0)} 50%{box-shadow:0 6px 0 var(--dmxMockGreenShadow),0 0 28px rgba(88,204,2,.28)}
}
@keyframes dmxGameCardIn{ 0%{opacity:0;transform:translateY(18px) scale(.975);filter:saturate(.85) blur(2px)} 70%{opacity:1;transform:translateY(-2px) scale(1.006);filter:saturate(1.08) blur(0)} 100%{opacity:1;transform:translateY(0) scale(1);filter:none}
}
@keyframes dmxGameDrop{ 0%{opacity:0;transform:translateY(-10px)} 100%{opacity:1;transform:translateY(0)}
}
@keyframes dmxGameMeter{ 0%{opacity:0;transform:scaleX(.55);filter:brightness(1.25)} 100%{opacity:1;transform:scaleX(1);filter:brightness(1)}
}
@keyframes dmxGameText{ 0%{opacity:0;transform:translateY(10px)} 100%{opacity:1;transform:translateY(0)}
}
@keyframes dmxGameOption{ 0%{opacity:0;transform:translateX(-14px) scale(.985)} 72%{opacity:1;transform:translateX(2px) scale(1.006)} 100%{opacity:1;transform:translateX(0) scale(1)}
}
@keyframes dmxGameFeedback{ 0%{opacity:0;transform:translateY(12px) scale(.97)} 72%{opacity:1;transform:translateY(-2px) scale(1.012)} 100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes dmxGameIconPop{ 0%{transform:scale(.6) rotate(-8deg);filter:brightness(1.35)} 65%{transform:scale(1.18) rotate(3deg);filter:brightness(1.15)} 100%{transform:scale(1) rotate(0);filter:brightness(1)}
}
@keyframes dmxGameButtonUp{ 0%{opacity:0;transform:translateY(12px)} 100%{opacity:1;transform:translateY(0)}
}
@keyframes dmxNextShine{ 0%,55%{transform:translateX(-70%) rotate(18deg)} 78%,100%{transform:translateX(70%) rotate(18deg)}
}
@keyframes dmxGameCardInMobile{ 0%{opacity:0;transform:translateY(7px) scale(.99)} 100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes dmxGameTinyIn{ 0%{opacity:0;transform:translateY(5px)} 100%{opacity:1;transform:translateY(0)}
}
@keyframes dmxGameOptionMobile{ 0%{opacity:0;transform:translateY(5px)} 100%{opacity:1;transform:translateY(0)}
}
@keyframes dmxGameIconPopMobile{ 0%{transform:scale(.88)} 100%{transform:scale(1)}
}
.dmxPricing .dmxPriceCard .dmxBtn:not(.dmxPayDisabled),
.dmxPricing .dmxPriceCard .dmxPayOwnSubscribe,
.dmxPricing .dmxPriceCard .dmxDodoDirectButton{ box-shadow:none!important; filter:none!important;
}
/* Precios: igualar el ancho del CTA Gratis con los planes de pago */
.dmxPricing .dmxPriceCard .dmxFreePlanForm,
.dmxPricing .dmxPriceCard .dmxFreePlanForm .dmxBtn{ width:100%;
}
.dmxPricing.dmxBillingYearly .dmxFreeAnnualNote,
.dmxApp.dmxPricing.dmxBillingYearly .dmxFreeAnnualNote{ display:flex!important;
}
/* Precios móvil: ocultar subtítulo principal solo en móviles */
@media screen and (max-width: 680px){ section.dmxApp.dmxPricing .dmxPricingHead > p{ display:none!important; visibility:hidden!important; height:0!important; margin:0!important; padding:0!important; overflow:hidden!important; }
}
@keyframes dmxPracticeTimerSpin{ to{ transform:rotate(360deg); }
}
@keyframes dmxPracticeTimerPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.035); }
}
@keyframes dmxPracticeTimerShake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-2px); } 75%{ transform:translateX(2px); }
}
@media (max-width:680px){
.dmxPracticeCta .dmxBtn{ width:100%; justify-content:center; margin-top:4px; }
}
/* ===== /PRACTICE REPORT CTA + DARK FIX ===== */ /* ===== NIVELES PRACTICE BUTTON + POPUP ===== */
.dmxMapHeadActions{ display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap;
}
.dmxMapHeadActions .dmxMapHeadBtn{ width:auto!important; min-width:0!important; height:auto!important; min-height:46px!important; padding:12px 18px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:9px!important; white-space:nowrap!important; line-height:1!important; text-align:center!important;
}
.dmxMapHeadActions .dmxMapHeadBtn span{ display:inline!important; white-space:nowrap!important;
}
.dmxMapHeadActions button.dmxBtn{ border:0; cursor:pointer; font-family:inherit;
}
@media (max-width:760px){
.dmxMapHeadActions{ width:100%; justify-content:stretch; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dmxMapHeadActions .dmxMapHeadBtn{ width:100%!important; min-height:42px!important; padding:11px 10px!important; font-size:13px!important; }
}
@media (max-width:380px){
.dmxMapHeadActions{ grid-template-columns:1fr; }
}
.dmxPracticeGateActions .dmxBtn{ min-width:220px;
}
@media (max-width:720px){
.dmxPracticeGateActions .dmxBtn{ width:100%; min-width:0; }
}
.dmxPracticeGateActions .dmxBtn{ min-width:220px;
}
@media (max-width:720px){
.dmxPracticeGateActions .dmxBtn{ width:100%; min-width:0; }
}
.dmxPracticeGateActions .dmxBtn{ width:100%!important; min-width:0!important; justify-content:center!important; white-space:nowrap!important; text-align:center!important;
}
@media (max-width:520px){
.dmxPracticeGateActions .dmxBtn{ padding-left:10px!important; padding-right:10px!important; font-size:13px!important; }
}
.dmxStatsPaywallPopup .dmxStatsPaywallActions .dmxBtn,
.dmxPracticeGate .dmxPracticeGateActions .dmxBtn{ width:100%!important; min-width:0!important; max-width:none!important; height:100%!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:10px!important; text-align:center!important; white-space:nowrap!important; padding-left:12px!important; padding-right:12px!important;
}
@media (max-width:520px){
.dmxStatsPaywallPopup .dmxStatsPaywallActions .dmxBtn, .dmxPracticeGate .dmxPracticeGateActions .dmxBtn{ font-size:13px!important; padding-left:8px!important; padding-right:8px!important; }
}
.dmxHomeV2Actions .dmxBtn{ width:100%!important; min-width:0!important; justify-content:center!important; text-align:center!important;
}
@media (max-width:760px){
.dmxHomeV2Actions .dmxBtn{ min-height:58px!important; padding:14px 10px!important; border-radius:18px!important; font-size:16px!important; line-height:1.1!important; }
.dmxHomeV2Actions .dmxBtn i{ font-size:16px!important; }
}
.dmxStatsPaywallActions a[href*="niveles"],
.dmxStatsPaywallActions a[href*="desarrollo"],
.dmxStatsPaywallActions .dmxBtn[href*="niveles"],
.dmxStatsPaywallActions .dmxBtn[href*="desarrollo"]{ order:1!important;
}
.dmxStatsPaywallActions a[href*="precios"],
.dmxStatsPaywallActions .dmxBtn[href*="precios"]{ order:2!important;
}
/* ===== /STATS PAYWALL BUTTON ORDER ===== */ /* ===== MODAL PLAN BUTTON RIGHT ===== */
.dmxModalActionsPlanRight{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:12px!important; align-items:stretch!important;
}
.dmxModalActionsPlanRight > a,
.dmxModalActionsPlanRight > button,
.dmxModalActionsPlanRight > form{ min-width:0!important;
}
.dmxModalActionsPlanRight > a:not(.dmxModalPlanButtonRight),
.dmxModalActionsPlanRight > button:not(.dmxModalPlanButtonRight),
.dmxModalActionsPlanRight > form:not(:has(.dmxModalPlanButtonRight)){ order:1!important;
}
.dmxModalActionsPlanRight .dmxModalPlanButtonRight,
.dmxModalActionsPlanRight > form:has(.dmxModalPlanButtonRight){ order:2!important;
}
.dmxModalActionsPlanRight .dmxModalPlanButtonRight{ width:100%!important; justify-content:center!important; text-align:center!important;
}
.dmxGuestDemoActions .dmxBtn{ width:100%; justify-content:center; min-height:58px;
}
@media (max-width:520px){
.dmxGuestDemoActions .dmxBtn{ min-width:0; padding-left:10px; padding-right:10px; }
}
@keyframes dmxGuestDemoCheckPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.10); }
}
/* ===== /GUEST DEMO CHECK MORE SPACE ===== */ /* ===== GUEST TRIAL NOTICE ===== */
.dmxGuestTrialNotice{ display:flex; align-items:center; gap:14px; margin:18px 0 22px; padding:16px 18px; border-radius:22px; background:linear-gradient(135deg, rgba(27,176,246,.12), rgba(34,197,94,.08)); border:1px solid rgba(27,176,246,.24); box-shadow:0 14px 34px rgba(15,23,42,.08);
}
.dmxGuestTrialIcon{ width:46px; height:46px; min-width:46px; display:flex; align-items:center; justify-content:center; border-radius:999px; color:#fff; background:linear-gradient(135deg,#1BB0F6,#22c55e); box-shadow:0 10px 22px rgba(27,176,246,.24);
}
.dmxGuestTrialNotice strong{ display:block; font-weight:1000; color:var(--text,#0f172a); margin-bottom:3px;
}
.dmxGuestTrialNotice p{ margin:0; color:var(--muted,#64748b); line-height:1.35;
}
.dmxGuestTrialNotice a{ color:#1BB0F6!important; font-weight:1000; text-decoration:none;
}
.dmxGuestTrialNotice a:hover{ text-decoration:underline;
}
[data-theme="dark"] .dmxGuestTrialNotice,
html[data-theme="dark"] .dmxGuestTrialNotice{ background:linear-gradient(135deg, rgba(27,176,246,.14), rgba(34,197,94,.09)); border-color:rgba(27,176,246,.28); box-shadow:0 16px 38px rgba(0,0,0,.26);
}
[data-theme="dark"] .dmxGuestTrialNotice strong,
html[data-theme="dark"] .dmxGuestTrialNotice strong{ color:#f8fafc;
}
[data-theme="dark"] .dmxGuestTrialNotice p,
html[data-theme="dark"] .dmxGuestTrialNotice p{ color:#cbd5e1;
}
@media (max-width:900px){
.dmxGuestTrialNotice{ margin:16px 14px 20px; padding:15px; border-radius:20px; align-items:flex-start; }
.dmxGuestTrialIcon{ width:42px; height:42px; min-width:42px; }
}
.dmxAccountApp .dmxBtn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px;
}
/* ---------- Desktop ---------- */
@media(min-width:900px){ .dmxAccountApp{ max-width:860px; padding-top:24px; } .dmxAccountAppHeader{ min-height:92px; padding:18px; } .dmxAccountAppMenu a{ padding:18px 20px; } .dmxAccountAppPanel{ padding:24px; } .dmxAccountAppForm{ grid-template-columns:1fr 1fr; gap:14px; } .dmxAccountAppForm .dmxBtn, .dmxAccountCodeBox, .dmxAccountSecurity{ grid-column:1 / -1; }
}
.dmxProfileEditActions .dmxBtn{ min-height:42px;
}
.dmxProfileEditActions .dmxBtn{ width:auto; min-width:140px; white-space:nowrap;
}
@media(max-width:520px){
.dmxProfileEditActions .dmxBtn{ width:100%; min-width:0; }
}
/* ========================================================= PROFILE INLINE EDIT BUTTON ORDER Guardar / Actualizar siempre a la derecha ========================================================= */
.dmxProfileEditActions .dmxBtn:not(.dmxBtnPrimary){ order:1; grid-column:1;
}
.dmxProfileEditActions .dmxBtnPrimary{ order:2; grid-column:2;
}
.dmxProfileEditActions .dmxBtn:only-child,
.dmxProfileEditActions .dmxBtnPrimary:only-child{ grid-column:2;
}
/* ========================================================= APPEARANCE FLAT SELECT ========================================================= */
.dmxAppearancePanel{ padding:18px;
}
.dmxAppearanceForm{ display:grid; gap:14px;
}
.dmxAppearanceSelectCard{ display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:72px; padding:13px 14px; border:1px solid var(--border); border-radius:18px; background:rgba(15,23,42,.028);
}
.dmxAppearanceSelectInfo{ display:flex; align-items:center; gap:12px; min-width:0;
}
.dmxAppearanceSelectInfo > i{ width:40px; height:40px; min-width:40px; min-height:40px; display:flex; align-items:center; justify-content:center; border-radius:13px; background:rgba(67,212,0,.10); color:#43d400; line-height:1;
}
.dmxAppearanceSelectInfo div{ min-width:0; display:flex; flex-direction:column; gap:3px;
}
.dmxAppearanceSelectInfo strong{ color:var(--text); font-size:.98rem; font-weight:950; line-height:1.15;
}
.dmxAppearanceSelectInfo span{ color:var(--muted); font-size:.86rem; font-weight:720; line-height:1.25;
}
.dmxAppearanceSelectWrap{ width:180px; min-width:180px; display:flex !important; flex-direction:column; gap:6px; margin:0 !important;
}
.dmxAppearanceSelectWrap > span{ color:var(--muted); font-size:.72rem; font-weight:900; line-height:1; text-transform:uppercase; letter-spacing:.055em;
}
.dmxAppearanceSelect{ height:42px !important; min-height:42px !important; border-radius:13px !important; font-weight:900; cursor:pointer;
}
.dmxAppearanceForm .dmxBtnPrimary{ justify-self:end; min-width:180px;
}
html[data-theme="dark"] .dmxAppearanceSelectCard,
[data-theme="dark"] .dmxAppearanceSelectCard{ background:rgba(15,23,42,.86); border-color:rgba(148,163,184,.18);
}
@media(max-width:520px){
.dmxAppearancePanel{ padding:14px; }
.dmxAppearanceSelectCard{ gap:10px; padding:12px; }
.dmxAppearanceSelectInfo span{ display:none; }
.dmxAppearanceSelectWrap{ width:132px; min-width:132px; }
.dmxAppearanceForm .dmxBtnPrimary{ justify-self:stretch; width:100%; min-width:0; }
}
/* ========================================================= APPEARANCE COMPACT SELECT FIX ========================================================= */
.dmxAppearanceSelectCard{ display:grid !important; grid-template-columns:minmax(0,1fr) 150px !important; align-items:center !important; gap:12px !important; min-height:64px !important; padding:12px !important;
}
.dmxAppearanceSelectInfo{ min-width:0 !important;
}
.dmxAppearanceSelectInfo > i{ width:38px !important; height:38px !important; min-width:38px !important; min-height:38px !important; border-radius:13px !important; font-size:1rem !important;
}
.dmxAppearanceSelectInfo strong{ font-size:1.05rem !important; line-height:1.1 !important; font-weight:950 !important; white-space:nowrap !important;
}
.dmxAppearanceSelectInfo span{ font-size:.82rem !important; line-height:1.22 !important;
}
.dmxAppearanceSelectWrap{ width:150px !important; min-width:150px !important; max-width:150px !important; gap:5px !important;
}
.dmxAppearanceSelectWrap > span{ font-size:.68rem !important;
}
.dmxAppearanceSelect{ width:100% !important; height:40px !important; min-height:40px !important; padding:0 38px 0 14px !important; border-radius:13px !important; font-size:.95rem !important; line-height:40px !important;
}
@media(max-width:520px){
.dmxAppearanceSelectCard{ grid-template-columns:minmax(0,1fr) 126px !important; gap:10px !important; min-height:58px !important; padding:10px !important; }
.dmxAppearanceSelectInfo{ gap:10px !important; }
.dmxAppearanceSelectInfo > i{ width:36px !important; height:36px !important; min-width:36px !important; min-height:36px !important; }
.dmxAppearanceSelectInfo strong{ font-size:1rem !important; }
.dmxAppearanceSelectInfo span{ display:none !important; }
.dmxAppearanceSelectWrap{ width:126px !important; min-width:126px !important; max-width:126px !important; }
.dmxAppearanceSelect{ height:38px !important; min-height:38px !important; padding-left:12px !important; padding-right:34px !important; font-size:.9rem !important; }
}
/* ========================================================= ACCOUNT ICONS + NOTIFICATIONS ORDER FIX ========================================================= */ /* Centrado real de contenedores con Font Awesome */
.dmxAccountApp .dmxAccountAppAvatar,
.dmxAccountApp .dmxAccountBack,
.dmxAccountApp .dmxAccountLogoutMini,
.dmxAccountApp .dmxAccountAppMenu a > i,
.dmxAccountApp .dmxAccountChoiceList label > i,
.dmxAccountApp .dmxAppearanceSelectInfo > i,
.dmxAccountApp .dmxProfileEditBtn{ display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; line-height:1 !important; overflow:hidden !important;
}
.dmxAccountApp .dmxAccountAppAvatar i,
.dmxAccountApp .dmxAccountBack i,
.dmxAccountApp .dmxAccountLogoutMini i,
.dmxAccountApp .dmxProfileEditBtn i,
.dmxAccountApp .dmxBtn i,
.dmxAccountApp .dmxNotice i{ display:inline-flex !important; align-items:center !important; justify-content:center !important; line-height:1 !important; margin:0 !important; transform:none !important;
}
/* ========================================================= APPEARANCE AUTO SAVE ========================================================= */
.dmxAppearanceForm .dmxBtnPrimary{ display:none !important;
}
.dmxAppearanceSelectWrap{ gap:0 !important;
}
.dmxAppearanceSelectWrap > span{ display:none !important;
}
.dmxAppearanceSelect{ margin:0 !important;
}
.dmxSubscriptionPanel .dmxManageBox > .dmxBtn,
.dmxSubscriptionPanel .dmxManageBox > a.dmxBtn{ float:right !important;
}
.dmxSubscriptionPanel .dmxAccountActions .dmxBtn,
.dmxSubscriptionPanel .dmxManageActions .dmxBtn,
.dmxSubscriptionPanel .dmxManageActions button{ width:auto !important; min-width:170px !important;
}
@media(max-width:520px){
.dmxSubscriptionPanel .dmxAccountActions .dmxBtn, .dmxSubscriptionPanel .dmxManageActions .dmxBtn, .dmxSubscriptionPanel .dmxManageActions button{ width:100% !important; min-width:0 !important; }
.dmxSubscriptionPanel .dmxManageBox > .dmxBtn, .dmxSubscriptionPanel .dmxManageBox > a.dmxBtn{ float:none !important; width:100% !important; }
}
/* ========================================================= MOBILE 9X16 TYPOGRAPHY SCALE CLAVE DEL AJUSTE GLOBAL: - Base visual móvil: relación 9:16. - Usa --dmx-mobile-visual-width para mantener proporciones similares entre teléfonos pequeños, normales y grandes. - Esta regla define la escala general de TODA la app en móvil. - No aumentar aquí agresivamente porque afecta toda la interfaz. NO TOCAR si solo se quiere ajustar cuestionarios. Para cuestionarios de alta resolución, usar el bloque: HIGH RES MOBILE QUESTION ONLY BOOST. ========================================================= */
@media (max-width:760px){ :root{ --dmx-mobile-vh-ref:100vh; --dmx-mobile-visual-width:min(100vw, calc(var(--dmx-mobile-vh-ref) * .5625)); --dmx-mobile-type-scale:clamp(.92, calc(var(--dmx-mobile-visual-width) / 390), 1.13); } @supports (height:100svh){ :root{ --dmx-mobile-vh-ref:100svh; } } html{ font-size:calc(16px * var(--dmx-mobile-type-scale)) !important; -webkit-text-size-adjust:100% !important; text-size-adjust:100% !important; } body, button, input, select, textarea{ font-size:1rem !important; -webkit-text-size-adjust:100% !important; text-size-adjust:100% !important; } h1, .dmxPageHead h1, .dmxStageHeader h1, .dmxAccountAppTitle h1, .dmxHomeV2Hero h1, .dmxHero h1{ font-size:calc(30px * var(--dmx-mobile-type-scale)) !important; line-height:1.06 !important; } h2, .dmxCard h2, .dmxPanel h2, .dmxAccountAppPanel h2, .dmxResult h2, .dmxQuestion h2, .dmxQuestion h3, .dmxQuestionText{ font-size:calc(25px * var(--dmx-mobile-type-scale)) !important; line-height:1.12 !important; } h3, .dmxCard h3, .dmxPanel h3{ font-size:calc(21px * var(--dmx-mobile-type-scale)) !important; line-height:1.16 !important; } p, label, .dmxMuted, .dmxPageHead p, .dmxStageHeader p, .dmxAccountAppTitle p, .dmxCard p, .dmxPanel p, .dmxQuestionTop, .dmxQuestionTop > div, .dmxQuestionTop strong{ font-size:calc(16px * var(--dmx-mobile-type-scale)) !important; line-height:1.32 !important; } small, em, .dmxSmall, .dmxHint, .dmxMeta, .dmxBadge, .dmxPill{ font-size:calc(14px * var(--dmx-mobile-type-scale)) !important; line-height:1.25 !important; } .dmxBtn, .btn, button.dmxBtn, a.dmxBtn{ font-size:calc(17px * var(--dmx-mobile-type-scale)) !important; line-height:1.15 !important; } .dmxBtn span, .btn span{ font-size:inherit !important; line-height:inherit !important; } .dmxOption, .dmxOption span, .dmxOptionText, .dmxAnswerOption, .dmxAnswerOption span, [data-answer], [data-answer] span{ font-size:calc(16px * var(--dmx-mobile-type-scale)) !important; line-height:1.16 !important; } .dmxOption b, .dmxAnswerOption b, [data-answer] b{ font-size:calc(13px * var(--dmx-mobile-type-scale)) !important; } .dmxAccountAppMenu a span strong{ font-size:calc(20px * var(--dmx-mobile-type-scale)) !important; line-height:1.12 !important; } .dmxAccountAppMenu a span em, .dmxNav a, .dmxTopNav a, .dmxBottomNav a{ font-size:calc(15px * var(--dmx-mobile-type-scale)) !important; line-height:1.2 !important; } [data-question-timer], [data-practice-countdown]{ font-size:calc(18px * var(--dmx-mobile-type-scale)) !important; line-height:1 !important; }
}
/etapas/. No tocar .dmxMap/.dmxMission. ========================================================= */
.dmxStagePickerHead{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; margin-bottom:22px;
}
.dmxStagePickCard > .dmxBtn{width:100%;justify-content:center}
@media(max-width:760px){
.dmxStagePickCard > .dmxBtn{min-height:38px;font-size:calc(12px * var(--dmx-mobile-type-scale, 1));padding:8px}
}
/* ========================================================= NIVELES: PROGRESO MISMA ESTRUCTURA Los niveles started deben verse estructuralmente igual que el resto. Solo cambia el color del globo, botón y etiqueta de progreso. No tocar fondo, borde, padding, sombras ni layout de la tarjeta. ========================================================= */
.dmxMap .dmxMission.started{ background:var(--card) !important; border-color:var(--border) !important; box-shadow:var(--shadow-soft) !important;
}
.dmxMap .dmxMission.started .dmxNode{ background:linear-gradient(180deg,#fbbf24,#f59e0b) !important; color:#fff !important; border-bottom-color:#d97706 !important; box-shadow:none !important;
}
.dmxMap .dmxMission.started .dmxProgressTag,
.dmxMap .dmxMission.started .dmxScoreTag{ background:rgba(245,158,11,.16) !important; color:#b45309 !important; border-color:rgba(245,158,11,.28) !important;
}
/* ========================================================= NIVELES: CONTINUAR ESTRUCTURA ORIGINAL Regla definitiva: - NO toca Repasar. - NO cambia tamaño, padding, radio, sombra ni layout. - Comenzar queda con la estructura original de .dmxBtnEnter. - Continuar usa la MISMA estructura original de .dmxBtnEnter. - Solo cambia color y borde inferior del estado started. ========================================================= */
.dmxMap .dmxMission.started .dmxBtnEnter{ background:#f5a90b !important; color:#fff !important; border-bottom-color:#d97706 !important;
}
/* ========================================================= NIVELES: BOTONES FULL WIDTH SOLO <=600PX Antes el cambio ocurría cerca de 900px. Ahora la vista horizontal de /niveles/ se mantiene hasta 601px; desde 600px baja a full width. ========================================================= */
@media (min-width:601px){ .dmxMap .dmxMission{ grid-template-columns:auto 1fr auto !important; } .dmxMap .dmxMission > form, .dmxMap .dmxMission > a.dmxBtn, .dmxMap .dmxMission > .dmxLockedBtn{ width:auto !important; max-width:none !important; grid-column:auto !important; justify-self:end !important; } .dmxMap .dmxMission .dmxBtn, .dmxMap .dmxMission .dmxLockedBtn{ width:auto !important; }
}
@media (max-width:600px){
.dmxMap .dmxMission > form, .dmxMap .dmxMission > a.dmxBtn, .dmxMap .dmxMission > .dmxLockedBtn{ width:100% !important; }
.dmxMap .dmxMission .dmxBtn, .dmxMap .dmxMission .dmxLockedBtn{ width:100% !important; }
}
/etapas/. No toca /niveles/ ni .dmxMap/.dmxMission. ========================================================= */ .dmxStagePickerGrid{ position:relative; display:flex !important; flex-direction:column !important; gap:18px !important;
}
.dmxStagePickCard > .dmxBtn{ justify-self:end !important; width:auto !important; min-width:170px !important; min-height:56px !important; padding:0 24px !important; border-radius:22px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:12px !important; line-height:1 !important; font-weight:950 !important;
}
.dmxStagePickCard > .dmxBtnBlue{ background:var(--dmx-blue) !important; color:#fff !important; border-bottom-color:#0b83bd !important;
}
.dmxStagePickCard > .dmxBtnPrimary{ background:var(--dmx-green) !important; color:#fff !important; border-bottom-color:var(--dmx-green2) !important;
}
@media (max-width:600px){
.dmxStagePickCard > .dmxBtn{ grid-column:1 / -1 !important; width:100% !important; min-width:0 !important; min-height:52px !important; margin-top:2px !important; border-radius:20px !important; font-size:calc(16px * var(--dmx-mobile-type-scale,1)) !important; }
}
.dmxStagePickActionForm > .dmxBtn{ width:auto !important; min-width:170px !important; min-height:56px !important; padding:0 24px !important; border-radius:22px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:12px !important; line-height:1 !important; font-weight:950 !important;
}
@media(max-width:600px){
.dmxStagePickActionForm > .dmxBtn{ width:100% !important; min-width:0 !important; min-height:52px !important; border-radius:20px !important; font-size:calc(16px * var(--dmx-mobile-type-scale,1)) !important; }
.dmxStageReviewActions .dmxBtn{ width:100%; }
}
.dmxStageReviewActions > .dmxBtn,
.dmxStageReviewActions > form > .dmxBtn{ width:100% !important; min-width:0 !important; justify-content:center !important; white-space:nowrap !important;
}
.dmxStagePickActions .dmxBtn{ min-width:150px !important;
}
@media(max-width:850px){
.dmxStagePickActions .dmxBtn{ width:100% !important; min-width:0 !important; }
}
/* Botones */
.dmxStagePickCard.open .dmxBtnBlue{ background:var(--dmx-blue) !important; color:#fff !important; border-bottom-color:#0b83bd !important;
}
.dmxStagePickCard.started .dmxBtnBlue{ background:#f5a90b !important; color:#fff !important; border-bottom-color:#d97706 !important;
}
.dmxStagePickCard.done .dmxBtnPrimary{ background:var(--dmx-green) !important; color:#fff !important; border-bottom-color:var(--dmx-green2) !important;
}
.dmxStagePickCard.done .dmxBtnBlue{ background:var(--dmx-blue) !important; color:#fff !important; border-bottom-color:#0b83bd !important;
}
.dmxStagePickMeta span.dmxStageScoreTag.dmxScore100{ background:var(--dmx-green) !important; color:#fff !important;
}
.dmxStagePickMeta span.dmxStageScoreTag.dmxScore90{ background:var(--dmx-blue) !important; color:#fff !important;
}
.dmxStagePickMeta span.dmxStageScoreTag.dmxScore80{ background:linear-gradient(180deg,#ffd95a 0%, #ffca28 100%) !important; color:#5c3b00 !important;
}
.dmxStagePickMeta span.dmxStageScoreTag.dmxScore70{ background:#f97316 !important; color:#fff !important;
}
.dmxStagePickCard.failed .dmxBtnBlue,
.dmxStagePickCard.failed .dmxBtn{ background:#ef4444 !important; color:#fff !important; border-bottom-color:#b91c1c !important;
}
/* ========================================================= NIVEL ETAPAS BOTON INFORME BLANCO FINAL Debe pisar colores de .done/.dmxBtnBlue. ========================================================= */
.dmxStagePickCard.done .dmxStagePickActions a.dmxStagePickReportBtn,
.dmxStagePickActions a.dmxStagePickReportBtn{ background:#fff !important; background-image:none !important; color:#0f172a !important; border:1px solid rgba(148,163,184,.40) !important; border-bottom:4px solid rgba(148,163,184,.60) !important; box-shadow:none !important;
}
/* ========================================================= NIVEL ETAPAS BOTONES NO CRECEN EN MOBILE Evita que Practicar / Informe / Rehacer / Comenzar / Continuar aumenten de tamaño al entrar en <=760px. ========================================================= */
@media(max-width:760px){ .dmxStagePickCard > .dmxBtn, .dmxStagePickActionForm > .dmxBtn, .dmxStagePickActions .dmxBtn, .dmxStagePickReportBtn{ font-size:15px !important; line-height:1 !important; } .dmxStagePickCard > .dmxBtn span, .dmxStagePickActionForm > .dmxBtn span, .dmxStagePickActions .dmxBtn span, .dmxStagePickReportBtn span{ font-size:inherit !important; line-height:inherit !important; }
}
/* ========================================================= NIVEL ETAPAS MODAL PRO PREMIUM DISEÑO FINAL Modal sólido y mensajes específicos por botón. ========================================================= */ /* ========================================================= NIVEL ETAPAS MODAL TEXTO PESO CORRECTO El texto normal no va en negrita. Solo PRO/PREMIUM. ========================================================= */ /* ========================================================= NIVEL ETAPAS MODAL PLANES BLANCOS PRO/cohete y PREMIUM/corona en blanco dentro del modal. ========================================================= */ /* ========================================================= NIVEL ETAPAS MODAL PRO PREMIUM BLANCO PRO/PREMIUM e iconos dentro del texto deben ir blancos. ========================================================= */ /* ========================================================= NIVEL ETAPAS MODAL ICONOS BLANCO REAL Fuerza PRO/PREMIUM e iconos del texto a blanco puro. ========================================================= */ /* ========================================================= NIVEL ETAPAS BOTONES GAP COMPACTO 850 Desde 850px hacia abajo reduce espacio entre icono y texto. ========================================================= */
@media(max-width:850px){ .dmxStagePickActions .dmxBtn, .dmxStagePickActionForm > .dmxBtn, .dmxStagePickReportBtn{ gap:6px !important; } .dmxStagePickActions .dmxBtn i, .dmxStagePickActionForm > .dmxBtn i, .dmxStagePickReportBtn i{ margin-right:0 !important; }
}
@media(max-width:420px){
.dmxStagePickActions .dmxBtn, .dmxStagePickActionForm > .dmxBtn, .dmxStagePickReportBtn{ gap:4px !important; padding-left:8px !important; padding-right:8px !important; }
}
/* ========================================================= NIVEL ETAPAS BOTONES TEXTO ICONOS COMPACTO 400 Desde 400px hacia abajo reduce levemente texto e iconos. ========================================================= */
@media(max-width:400px){ .dmxStagePickActions .dmxBtn, .dmxStagePickActionForm > .dmxBtn, .dmxStagePickReportBtn{ font-size:14px !important; } .dmxStagePickActions .dmxBtn i, .dmxStagePickActionForm > .dmxBtn i, .dmxStagePickReportBtn i{ font-size:.92em !important; }
}
/* ========================================================= PRO JUMP LOCK BUTTONS Botones bloqueados por avance, no por precio base. ========================================================= */
button.dmxLockedBtn,
.dmxProJumpLockBtn{ border:0 !important; cursor:pointer !important;
}
/* ========================================================= NIVELES HEADER NORMAL FINAL Título controlado y botones con estructura normal tipo Comenzar/Continuar. ========================================================= */
.dmxMap .dmxMapHead{ display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:center !important; gap:24px !important;
}
.dmxMap .dmxMapHead h1{ font-size:clamp(44px,5.4vw,74px) !important; line-height:.96 !important; letter-spacing:-.065em !important; margin:14px 0 0 !important;
}
.dmxMap .dmxMapHeadActions{ display:flex !important; flex-direction:column !important; gap:16px !important; min-width:300px !important; max-width:340px !important; align-self:center !important;
}
.dmxMap .dmxMapHeadActions .dmxMapHeadBtn{ width:100% !important; min-height:56px !important; height:auto !important; padding:15px 22px !important; border-radius:18px !important; border:0 !important; border-bottom-width:5px !important; box-shadow:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; font-size:16px !important; line-height:1 !important; font-weight:1000 !important; white-space:nowrap !important;
}
.dmxMap .dmxMapHeadActions .dmxMapHeadBtn i,
.dmxMap .dmxMapHeadActions .dmxMapHeadBtn span{ font-size:inherit !important; line-height:inherit !important;
}
@media(max-width:900px){
.dmxMap .dmxMapHead{ grid-template-columns:1fr !important; gap:18px !important; }
.dmxMap .dmxMapHead h1{ font-size:clamp(42px,10.5vw,62px) !important; margin:12px 0 0 !important; }
.dmxMap .dmxMapHeadActions{ width:100% !important; max-width:none !important; min-width:0 !important; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
.dmxMap .dmxMapHeadActions .dmxMapHeadBtn{ min-height:54px !important; padding:14px 12px !important; border-radius:16px !important; border-bottom-width:5px !important; font-size:15px !important; gap:8px !important; }
}
@media(max-width:420px){
.dmxMap .dmxMapHeadActions{ gap:10px !important; }
.dmxMap .dmxMapHeadActions .dmxMapHeadBtn{ min-height:50px !important; padding:12px 8px !important; border-radius:15px !important; font-size:13px !important; gap:6px !important; }
}
/* ========================================================= NIVELES HEADER BOTONES 2 COLUMNAS SIEMPRE Ver avance y Modo Práctica siempre uno al lado del otro. ========================================================= */
@media(max-width:900px){ .dmxMap .dmxMapHeadActions{ width:100% !important; max-width:none !important; min-width:0 !important; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; } .dmxMap .dmxMapHeadActions .dmxMapHeadBtn{ width:100% !important; min-width:0 !important; white-space:nowrap !important; justify-content:center !important; }
}
@media(max-width:420px){
.dmxMap .dmxMapHeadActions{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; }
.dmxMap .dmxMapHeadActions .dmxMapHeadBtn{ font-size:12px !important; padding-left:6px !important; padding-right:6px !important; gap:5px !important; }
}
/* ========================================================= NIVELES HEADER DESKTOP 2 COLUMNAS DERECHA Solo escritorio: botones pegados a la derecha y en 2 columnas. No modifica móvil. ========================================================= */
@media(min-width:901px){ .dmxMap .dmxMapHeadActions{ justify-self:end !important; align-self:center !important; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:14px !important; width:min(720px,46vw) !important; min-width:560px !important; max-width:720px !important; } .dmxMap .dmxMapHeadActions .dmxMapHeadBtn{ width:100% !important; min-width:0 !important; white-space:nowrap !important; justify-content:center !important; }
}
.dmxStagePicker .dmxStagePickerHeadActions .dmxMapHeadBtn{ width:100% !important; min-height:56px !important; height:auto !important; padding:15px 22px !important; border-radius:18px !important; border:0 !important; border-bottom-width:5px !important; box-shadow:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; font-size:16px !important; line-height:1 !important; font-weight:1000 !important; white-space:nowrap !important;
}
@media(max-width:900px){
.dmxStagePicker .dmxStagePickerHeadActions .dmxMapHeadBtn{ min-height:54px !important; padding:14px 12px !important; border-radius:16px !important; border-bottom-width:5px !important; font-size:15px !important; gap:8px !important; }
}
.dmxStagePicker .dmxStagePickerHeadActions .dmxMapHeadBtn{ width:100% !important; min-width:0 !important; min-height:56px !important; height:auto !important; padding:15px 22px !important; border-radius:18px !important; border:0 !important; border-bottom-width:5px !important; box-shadow:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; font-size:16px !important; line-height:1 !important; font-weight:1000 !important; white-space:nowrap !important;
}
@media(max-width:900px){
.dmxStagePicker .dmxStagePickerHeadActions .dmxMapHeadBtn{ min-height:54px !important; padding:14px 12px !important; border-radius:16px !important; border-bottom-width:5px !important; font-size:15px !important; gap:8px !important; }
}
@media(max-width:420px){
.dmxStagePicker .dmxStagePickerHeadActions .dmxMapHeadBtn{ min-height:50px !important; padding:12px 6px !important; border-radius:15px !important; font-size:12px !important; gap:5px !important; }
}
/* ========================================================= ETAPAS HEADER MENU FINAL Botón atrás dentro del menú; botones sin ancho calculado en PC. ========================================================= */
@media(min-width:901px){ .dmxStagePicker .dmxStagePickerHeadHero{ display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:center !important; gap:24px !important; margin-bottom:30px !important; } .dmxStagePicker .dmxStagePickerHeadActions{ justify-self:end !important; align-self:center !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-end !important; gap:14px !important; width:auto !important; min-width:0 !important; max-width:none !important; } .dmxStagePicker .dmxStagePickerHeadActions .dmxMapHeadBtn{ width:auto !important; min-width:0 !important; max-width:none !important; min-height:56px !important; height:auto !important; padding:15px 24px !important; border-radius:18px !important; border:0 !important; border-bottom-width:5px !important; box-shadow:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; font-size:16px !important; line-height:1 !important; font-weight:1000 !important; white-space:nowrap !important; } .dmxStagePicker .dmxStagePickerBackIcon{ flex:0 0 56px !important; width:56px !important; min-width:56px !important; height:56px !important; padding:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; border-radius:18px !important; background:#fff !important; color:#0f172a !important; border:1px solid rgba(148,163,184,.35) !important; border-bottom:5px solid rgba(148,163,184,.55) !important; text-decoration:none !important; box-shadow:none !important; }
}
/* ========================================================= NIVELES HEADER MENU AUTO WIDTH PC Igual que /etapas/: botones a la derecha, ancho libre según texto. En /niveles/ no existe botón atrás. ========================================================= */
@media(min-width:901px){ .dmxMap .dmxMapHeadActions{ justify-self:end !important; align-self:center !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-end !important; gap:14px !important; width:auto !important; min-width:0 !important; max-width:none !important; } .dmxMap .dmxMapHeadActions .dmxMapHeadBtn{ width:auto !important; min-width:0 !important; max-width:none !important; min-height:56px !important; height:auto !important; padding:15px 24px !important; border-radius:18px !important; border:0 !important; border-bottom-width:5px !important; box-shadow:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; font-size:16px !important; line-height:1 !important; font-weight:1000 !important; white-space:nowrap !important; }
}
.dmxStagePickCard .dmxStagePickBody h2,
.dmxStagePickCard .dmxStagePickMeta span,
.dmxStagePickCard .dmxStagePickActions,
.dmxStagePickCard .dmxStagePickActionForm,
.dmxStagePickCard > .dmxBtn{ animation:dmxLevelFadeUp .42s cubic-bezier(.2,.9,.2,1) both !important; will-change:opacity, transform, filter !important;
}
.dmxStagePickCard .dmxStagePickActions,
.dmxStagePickCard .dmxStagePickActionForm,
.dmxStagePickCard > .dmxBtn{animation-delay:.28s !important;}
/* ========================================================= NIVELES DIPLOMA DOCUMOTORS Tarjeta final refinada: premium, limpia, balanceada y sin etiquetas cuadradas. ========================================================= */
.dmxMap .dmxDiplomaMission{ position:relative !important; isolation:isolate !important; overflow:hidden !important; min-height:190px !important; padding:34px 36px !important; display:grid !important; grid-template-columns:96px minmax(0,1fr) auto !important; align-items:center !important; gap:28px !important; border-radius:30px !important; border:1px solid rgba(245,158,11,.46) !important; background: radial-gradient(circle at 8% 18%, rgba(251,191,36,.22), transparent 32%), radial-gradient(circle at 82% 10%, rgba(59,130,246,.22), transparent 36%), linear-gradient(135deg,#111827 0%,#172554 56%,#020617 100%) !important; box-shadow: 0 22px 60px rgba(15,23,42,.20), inset 0 1px 0 rgba(255,255,255,.14) !important; color:#fff !important;
}
.dmxMap .dmxDiplomaMission::before{ content:"" !important; position:absolute !important; inset:0 !important; z-index:0 !important; pointer-events:none !important; background: linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px), linear-gradient(0deg,rgba(255,255,255,.045) 1px,transparent 1px) !important; background-size:46px 46px !important; opacity:.18 !important; transform:none !important; animation:none !important; filter:none !important;
}
.dmxMap .dmxDiplomaMission::after{ content:"" !important; position:absolute !important; inset:-40% auto -40% -35% !important; width:44% !important; z-index:0 !important; pointer-events:none !important; background:linear-gradient(115deg,transparent,rgba(255,255,255,.16),transparent) !important; transform:translateX(-120%) skewX(-18deg) !important; animation:dmxDiplomaSweep 7s ease-in-out infinite !important; opacity:0 !important;
}
@keyframes dmxDiplomaSweep{ 0%,58%{transform:translateX(-120%) skewX(-18deg);opacity:0} 66%{opacity:.8} 84%,100%{transform:translateX(420%) skewX(-18deg);opacity:0}
}
.dmxMap .dmxDiplomaMission > *{ position:relative !important; z-index:1 !important;
}
.dmxMap .dmxDiplomaMission .dmxDiplomaNode{ width:96px !important; height:96px !important; border-radius:28px !important; display:flex !important; align-items:center !important; justify-content:center !important; background:linear-gradient(180deg,#fde68a 0%,#f59e0b 100%) !important; color:#111827 !important; border:0 !important; border-bottom:8px solid #b45309 !important; box-shadow: 0 16px 28px rgba(0,0,0,.22), 0 0 0 9px rgba(251,191,36,.14) !important; font-size:34px !important;
}
.dmxMap .dmxDiplomaMission.locked .dmxDiplomaNode{ background:linear-gradient(180deg,#e2e8f0 0%,#94a3b8 100%) !important; color:#334155 !important; border-bottom-color:#64748b !important; box-shadow: 0 16px 28px rgba(0,0,0,.18), 0 0 0 9px rgba(148,163,184,.14) !important;
}
.dmxMap .dmxDiplomaBody{ min-width:0 !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:12px !important;
}
.dmxMap .dmxDiplomaKicker{ display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:9px !important; width:auto !important; max-width:max-content !important; margin:0 !important; padding:8px 13px !important; border-radius:999px !important; background:rgba(251,191,36,.16) !important; border:1px solid rgba(251,191,36,.30) !important; color:#fde68a !important; font-size:12px !important; line-height:1 !important; font-weight:1000 !important; letter-spacing:.055em !important; text-transform:uppercase !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.dmxMap .dmxDiplomaMission h2{ margin:0 !important; color:#fff !important; font-size:34px !important; line-height:1.02 !important; letter-spacing:-.045em !important; font-weight:1000 !important;
}
.dmxMap .dmxDiplomaMission p{ max-width:780px !important; margin:0 !important; color:rgba(255,255,255,.78) !important; font-size:17px !important; line-height:1.45 !important; font-weight:750 !important;
}
.dmxMap .dmxDiplomaMission .dmxMissionMeta{ display:flex !important; flex-wrap:wrap !important; gap:8px !important; margin-top:2px !important;
}
.dmxMap .dmxDiplomaMission .dmxMissionMeta span{ display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; width:auto !important; margin:0 !important; padding:7px 10px !important; border-radius:999px !important; background:rgba(255,255,255,.10) !important; border:1px solid rgba(255,255,255,.13) !important; color:rgba(255,255,255,.88) !important; font-size:12px !important; line-height:1 !important; font-weight:900 !important; box-shadow:none !important;
}
.dmxMap .dmxDiplomaMission .dmxMissionMeta span i{ color:#fde68a !important; font-size:13px !important;
}
.dmxMap .dmxDiplomaMission .dmxDiplomaBtn,
.dmxMap .dmxDiplomaMission .dmxDiplomaLockedBtn{ justify-self:end !important; align-self:center !important; min-height:58px !important; width:auto !important; min-width:188px !important; max-width:none !important; padding:16px 24px !important; border-radius:18px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; white-space:nowrap !important; font-size:16px !important; font-weight:1000 !important;
}
.dmxMap .dmxDiplomaMission .dmxDiplomaLockedBtn{ background:linear-gradient(180deg,#f8fafc 0%,#e2e8f0 100%) !important; color:#475569 !important; border:0 !important; border-bottom:6px solid #cbd5e1 !important; box-shadow:none !important; cursor:not-allowed !important;
}
.dmxMap .dmxDiplomaMission.locked{ opacity:1 !important;
}
.dmxMap .dmxDiplomaMission.locked .dmxDiplomaKicker{ background:rgba(148,163,184,.13) !important; border-color:rgba(226,232,240,.16) !important; color:#e2e8f0 !important;
}
.dmxMission:nth-child(11){animation-delay:.64s !important;}
.dmxMission:nth-child(11) .dmxNode{animation-delay:.70s !important;}
@media(max-width:900px){
.dmxMap .dmxDiplomaMission{ grid-template-columns:82px minmax(0,1fr) !important; gap:20px !important; padding:26px 22px !important; }
.dmxMap .dmxDiplomaMission .dmxDiplomaNode{ width:82px !important; height:82px !important; border-radius:24px !important; font-size:30px !important; }
.dmxMap .dmxDiplomaMission .dmxDiplomaBtn, .dmxMap .dmxDiplomaMission .dmxDiplomaLockedBtn{ grid-column:1 / -1 !important; justify-self:stretch !important; width:100% !important; min-width:0 !important; }
}
@media(max-width:560px){
.dmxMap .dmxDiplomaMission{ grid-template-columns:1fr !important; text-align:left !important; padding:24px 18px !important; border-radius:26px !important; }
.dmxMap .dmxDiplomaMission .dmxDiplomaNode{ width:72px !important; height:72px !important; border-radius:22px !important; font-size:26px !important; }
.dmxMap .dmxDiplomaMission h2{ font-size:28px !important; }
.dmxMap .dmxDiplomaMission p{ font-size:15px !important; }
.dmxMap .dmxDiplomaMission .dmxMissionMeta{ gap:7px !important; }
.dmxMap .dmxDiplomaMission .dmxMissionMeta span{ font-size:11px !important; padding:7px 9px !important; }
}
@media(prefers-reduced-motion:reduce){
.dmxMap .dmxDiplomaMission::after{ animation:none !important; }
}
/* ========================================================= NIVELES DIPLOMA DOCUMOTORS MOBILE HEADER ONLY En móvil: solo badge+título a la derecha del icono. Descripción, etiquetas y botón quedan abajo ocupando todo el ancho. ========================================================= */
@media(max-width:560px){ .dmxMap .dmxDiplomaMission{ grid-template-columns:82px minmax(0,1fr) !important; align-items:center !important; gap:12px 16px !important; padding:18px 16px !important; min-height:0 !important; } .dmxMap .dmxDiplomaMission .dmxDiplomaNode{ grid-column:1 !important; grid-row:1 / span 2 !important; width:82px !important; height:82px !important; border-radius:24px !important; font-size:28px !important; margin:0 !important; align-self:center !important; } .dmxMap .dmxDiplomaMission .dmxDiplomaBody{ display:contents !important; } .dmxMap .dmxDiplomaMission .dmxDiplomaKicker{ grid-column:2 !important; grid-row:1 !important; align-self:end !important; margin:0 !important; padding:7px 10px !important; font-size:10px !important; max-width:max-content !important; } .dmxMap .dmxDiplomaMission h2{ grid-column:2 !important; grid-row:2 !important; align-self:start !important; font-size:24px !important; line-height:1.03 !important; margin:0 !important; } .dmxMap .dmxDiplomaMission p{ grid-column:1 / -1 !important; grid-row:3 !important; font-size:15px !important; line-height:1.38 !important; max-width:none !important; margin:4px 0 0 !important; } .dmxMap .dmxDiplomaMission .dmxMissionMeta{ grid-column:1 / -1 !important; grid-row:4 !important; gap:7px !important; margin-top:0 !important; } .dmxMap .dmxDiplomaMission .dmxMissionMeta span{ font-size:11px !important; padding:7px 9px !important; } .dmxMap .dmxDiplomaMission .dmxDiplomaBtn, .dmxMap .dmxDiplomaMission .dmxDiplomaLockedBtn{ grid-column:1 / -1 !important; grid-row:5 !important; width:100% !important; min-width:0 !important; margin-top:2px !important; }
}
/* ========================================================= DIPLOMA PROGRESS FLOAT MODAL Estadísticas directas y barras animadas para desbloquear diploma. ========================================================= */
.dmxDiplomaProgressOverlay{ position:fixed !important; inset:0 !important; z-index:2147483100 !important; display:grid !important; place-items:center !important; padding:20px !important; background:rgba(2,6,23,.68) !important; backdrop-filter:blur(12px) !important; -webkit-backdrop-filter:blur(12px) !important;
}
.dmxDiplomaProgressOverlay[hidden]{ display:none !important;
}
.dmxDiplomaProgressCard{ position:relative !important; width:min(560px,100%) !important; padding:30px 24px 24px !important; border-radius:28px !important; overflow:hidden !important; color:#fff !important; background: radial-gradient(circle at 0% 0%, rgba(251,191,36,.30), transparent 36%), radial-gradient(circle at 100% 10%, rgba(59,130,246,.24), transparent 42%), linear-gradient(135deg,#0f172a 0%,#172554 58%,#020617 100%) !important; border:1px solid rgba(251,191,36,.34) !important; box-shadow:0 34px 90px rgba(0,0,0,.52) !important; animation:dmxDiplomaModalIn .34s cubic-bezier(.2,.9,.2,1) both !important;
}
@keyframes dmxDiplomaModalIn{ from{opacity:0;transform:translateY(18px) scale(.965);filter:blur(5px)} to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
.dmxDiplomaProgressClose{ position:absolute !important; top:14px !important; right:14px !important; width:40px !important; height:40px !important; border:0 !important; border-radius:14px !important; background:rgba(255,255,255,.12) !important; color:#fff !important; display:flex !important; align-items:center !important; justify-content:center !important; cursor:pointer !important;
}
.dmxDiplomaProgressBadge{ width:max-content !important; max-width:100% !important; display:inline-flex !important; align-items:center !important; gap:8px !important; padding:8px 12px !important; border-radius:999px !important; background:rgba(251,191,36,.15) !important; border:1px solid rgba(251,191,36,.28) !important; color:#fde68a !important; font-size:12px !important; font-weight:1000 !important; letter-spacing:.045em !important; text-transform:uppercase !important;
}
.dmxDiplomaProgressCard h2{ margin:14px 0 18px !important; color:#fff !important; font-size:34px !important; line-height:1 !important; letter-spacing:-.05em !important; font-weight:1000 !important;
}
.dmxDiplomaProgressRows{ display:grid !important; gap:12px !important;
}
.dmxDiplomaProgressRow{ padding:14px !important; border-radius:18px !important; background:rgba(255,255,255,.10) !important; border:1px solid rgba(255,255,255,.13) !important;
}
.dmxDiplomaProgressTop{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; margin-bottom:10px !important;
}
.dmxDiplomaProgressTop span{ color:rgba(255,255,255,.78) !important; font-size:13px !important; font-weight:900 !important;
}
.dmxDiplomaProgressTop strong{ color:#fff !important; font-size:18px !important; font-weight:1000 !important; white-space:nowrap !important;
}
.dmxDiplomaMeter{ height:12px !important; border-radius:999px !important; background:rgba(15,23,42,.50) !important; overflow:hidden !important; box-shadow:inset 0 1px 4px rgba(0,0,0,.35) !important;
}
.dmxDiplomaMeter i{ display:block !important; height:100% !important; width:calc(var(--p) * 1%) !important; min-width:0 !important; border-radius:999px !important; background:linear-gradient(90deg,#38bdf8 0%,#22c55e 55%,#fde047 100%) !important; transform-origin:left center !important; animation:dmxDiplomaMeterFill .9s cubic-bezier(.2,.9,.2,1) both !important;
}
.dmxDiplomaProgressMain .dmxDiplomaMeter{ height:16px !important;
}
.dmxDiplomaProgressMain .dmxDiplomaMeter i{ background:linear-gradient(90deg,#f59e0b 0%,#fde047 45%,#22c55e 100%) !important;
}
@keyframes dmxDiplomaMeterFill{ from{transform:scaleX(0);filter:brightness(1.25)} to{transform:scaleX(1);filter:brightness(1)}
}
@media(max-width:560px){
.dmxDiplomaProgressOverlay{ padding:14px !important; }
.dmxDiplomaProgressCard{ padding:26px 18px 18px !important; border-radius:24px !important; }
.dmxDiplomaProgressCard h2{ font-size:28px !important; }
.dmxDiplomaProgressTop strong{ font-size:16px !important; }
}
@media(prefers-reduced-motion:reduce){
.dmxDiplomaProgressCard, .dmxDiplomaMeter i{ animation:none !important; }
}
/* DIPLOMA MODAL REOPEN FIX */
.dmxDiplomaProgressOverlay:not([hidden]){ display:grid !important;
}
.dmxDiplomaProgressOverlay:not([hidden]) .dmxDiplomaProgressCard{ display:block !important; visibility:visible !important; opacity:1 !important;
}
.dmxDiplomaProgressOverlay[hidden]{ display:none !important; visibility:hidden !important;
}
.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateActions .dmxBtn{ width:100% !important; min-height:58px !important; padding:15px 18px !important; border-radius:16px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:9px !important; font-size:15px !important; line-height:1 !important; font-weight:1000 !important; white-space:nowrap !important; box-shadow:none !important;
}
@media(max-width:560px){
.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateActions .dmxBtn{ min-height:52px !important; padding:12px 8px !important; font-size:13px !important; }
}
/* ========================================================= DMX PLAN GATE XL FINAL Modal único de planes más grande y protagonista. ========================================================= */
@media(min-width:761px){ .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateCard, .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPracticeGate{ width:820px !important; min-width:820px !important; max-width:calc(100vw - 64px) !important; padding:52px 44px 38px !important; border-radius:30px !important; } .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateBadge, .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPracticeGateBadge{ margin-bottom:24px !important; padding:10px 18px !important; font-size:15px !important; } .dmxPlanGateModal[data-dmx-plan-gate-modal] h2{ max-width:720px !important; margin-bottom:22px !important; font-size:48px !important; line-height:.98 !important; letter-spacing:-.065em !important; } .dmxPlanGateModal[data-dmx-plan-gate-modal] p{ max-width:720px !important; margin-bottom:36px !important; font-size:22px !important; line-height:1.38 !important; } .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateActions, .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPracticeGateActions{ width:min(640px,100%) !important; gap:16px !important; } .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateActions .dmxBtn, .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPracticeGateActions .dmxBtn{ min-height:66px !important; border-radius:18px !important; font-size:17px !important; padding:18px 22px !important; } .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateClose{ width:46px !important; height:46px !important; top:16px !important; right:16px !important; }
}
.dmxBtnDanger{ background:#ef4444 !important; color:#fff !important; border-bottom-color:#b91c1c !important;
}
@media(max-width:720px){
.dmxAdminModalRow form .dmxBtn{ width:100%; }
}
/* Modo Práctica: layout escritorio corregido sin solapes */
@media (min-width:900px){ .dmxPracticeHome .dmxAccountForm{ display:grid!important; grid-template-columns:1fr!important; gap:18px!important; width:100%!important; max-width:none!important; align-items:end!important; } .dmxPracticeHome .dmxPracticeSetupRow{ display:grid!important; grid-template-columns:minmax(240px,320px) minmax(360px,460px)!important; gap:14px 18px!important; align-items:end!important; width:100%!important; max-width:800px!important; margin:0!important; min-width:0!important; } .dmxPracticeHome .dmxPracticeQuestionCount, .dmxPracticeHome .dmxPracticePaceField{ margin:0!important; min-width:0!important; } .dmxPracticeHome .dmxPracticeQuestionCount .authInput{ width:100%!important; } .dmxPracticeHome .dmxPracticePaceOptions{ display:grid!important; grid-template-columns:repeat(2,minmax(170px,1fr))!important; gap:10px!important; } .dmxPracticeHome .dmxPracticePaceOption span{ white-space:nowrap!important; } .dmxPracticeHome .dmxResultActions{ display:flex!important; justify-content:flex-end!important; align-items:center!important; flex-wrap:nowrap!important; gap:14px!important; width:100%!important; margin:0!important; min-width:0!important; white-space:nowrap!important; } .dmxPracticeHome .dmxResultActions .dmxBtn{ flex:0 0 auto!important; } .dmxPracticeHome .dmxResultActions .dmxBtn:not(.dmxBtnPrimary){ order:1!important; } .dmxPracticeHome .dmxResultActions .dmxBtnPrimary{ order:2!important; }
}
@keyframes dmxPracticeStartEnter{ from{opacity:0; transform:translateY(12px) scale(.985)} to{opacity:1; transform:none}
}
@keyframes dmxPracticeStartPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)}
}
@keyframes dmxPracticeStartRing{ 0%{opacity:.85; transform:scale(.88)} 100%{opacity:0; transform:scale(1.35)}
}
@keyframes dmxPracticeStartGlow{ from{transform:rotate(0deg)} to{transform:rotate(360deg)}
}
/* DMX_MODAL_HIDDEN_PLAN_OFFER_GUARD_V51E Blindaje global: evita que reglas display:flex/grid!important de modales pisen el atributo hidden y agrega alias explícito para dmxPlanOfferModal. */
.dmxPlanOfferModal[hidden],
.dmxPlanOfferModal[aria-hidden="true"],
.dmxPlanGateModal[data-dmx-plan-gate-modal][hidden],
.dmxPlanGateModal[data-dmx-plan-gate-modal][aria-hidden="true"],
.dmxPracticeGateOverlay[hidden],
.dmxPracticeGateOverlay[aria-hidden="true"],
.dmxPracticePremiumModal[hidden],
.dmxPracticePremiumModal[aria-hidden="true"],
.dmxStageReviewModalOverlay[hidden],
.dmxStageReviewModalOverlay[aria-hidden="true"],
.dmxDiplomaProgressOverlay[hidden],
.dmxDiplomaProgressOverlay[aria-hidden="true"],
.dmxGuestDemoModalOverlay[hidden],
.dmxGuestDemoModalOverlay[aria-hidden="true"],
.dmxPlanChangeModal[hidden],
.dmxPlanChangeModal[aria-hidden="true"],
.dmxGuestCheckoutModal[hidden],
.dmxGuestCheckoutModal[aria-hidden="true"],
.dmxAnnualInfoModal[hidden],
.dmxAnnualInfoModal[aria-hidden="true"],
.dmxCurrencyConfirmModalV44B[hidden],
.dmxCurrencyConfirmModalV44B[aria-hidden="true"],
.dmxCouponPendingModalV3[hidden],
.dmxCouponPendingModalV3[aria-hidden="true"],
.dmxPaymentMethodInfoOverlayV7[hidden],
.dmxPaymentMethodInfoOverlayV7[aria-hidden="true"]{ display:none!important; visibility:hidden!important; opacity:0!important; pointer-events:none!important;
}
.dmxAdminCacheModalActionsV51I5 .dmxBtn{ min-width:140px!important; justify-content:center!important;
}
@keyframes dmxAdminCachePopV51I5{ from{opacity:0;transform:translateY(10px) scale(.97);} to{opacity:1;transform:translateY(0) scale(1);}
}
@media(max-width:640px){
.dmxAdminCacheModalActionsV51I5 .dmxBtn{ width:100%!important; }
}
/* DMX_ADMIN_CLEAR_ASSETS_CACHE_MODAL_HIDDEN_FIX_V51I6 */
.dmxAdminCacheModalV51I5 [hidden],
.dmxAdminCacheModalV51I5 button[hidden],
.dmxAdminCacheModalV51I5 .dmxBtn[hidden]{ display:none!important;
}
/etapas/: Disponible / Aprobado / Reprobado PC intacto. Móvil: etiqueta arriba a la derecha. No agrega padding ni reserva espacio: usa el vacío real de la tarjeta. No redefine color, fondo ni borde: conserva clases originales y lógica visual actual.
*/
@media (max-width: 760px) { body .dmxPath .level, body .dmxStagePickerGrid .dmxStagePickCard { position: relative !important; } body .dmxStagePickerGrid .dmxStagePickMeta { position: static !important; min-height: 0 !important; } body .dmxPath .level .dmxProgressTag, body .dmxPath .level .dmxScore100, body .dmxPath .level .dmxScore90, body .dmxPath .level .dmxScore80, body .dmxPath .level .dmxScore70, body .dmxStagePickerGrid .dmxStagePickCard .dmxStageStatusTag { position: absolute !important; top: 14px !important; right: 14px !important; z-index: 8 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: auto !important; max-width: calc(100% - 28px) !important; min-height: 30px !important; padding: 7px 10px !important; border-radius: 999px !important; font-size: 12px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: -0.01em !important; white-space: nowrap !important; text-align: center !important; margin: 0 !important; } body .dmxStagePickerGrid .dmxStagePickCard .dmxStageStatusTag i { font-size: 12px !important; line-height: 1 !important; margin: 0 !important; }
}
@media (max-width: 390px){
body .dmxPath .level .dmxProgressTag, body .dmxPath .level .dmxScore100, body .dmxPath .level .dmxScore90, body .dmxPath .level .dmxScore80, body .dmxPath .level .dmxScore70, body .dmxStagePickerGrid .dmxStagePickCard .dmxStageStatusTag { top: 12px !important; right: 12px !important; min-height: 28px !important; padding: 6px 9px !important; font-size: 11.5px !important; }
}
/* DMX_STAGE_PICK_NUMBER_NO_SHADOW_CSS_V56G_END */ /* DMX_NODE_NO_3D_RIM_CSS_V56K_START */
/* Elimina la sombra y la base 3D inferior del nodo numérico de niveles. Mantiene el fondo/degradado original y la lógica visual de estados.
*/
body .dmxMap .dmxMission .dmxNode,
body .dmxPath .dmxMission .dmxNode,
body .dmxMission .dmxNode,
body .dmxPath .level .dmxNode,
body .dmxPath .dmxNode,
body .level .dmxNode,
body .dmxNode { box-shadow: none !important; text-shadow: none !important; border-bottom: none !important; border-bottom-width: 0 !important; border-bottom-style: none !important;
}
body .dmxMap .dmxMission .dmxNode::before,
body .dmxMap .dmxMission .dmxNode::after,
body .dmxPath .dmxMission .dmxNode::before,
body .dmxPath .dmxMission .dmxNode::after,
body .dmxMission .dmxNode::before,
body .dmxMission .dmxNode::after,
body .dmxPath .level .dmxNode::before,
body .dmxPath .level .dmxNode::after,
body .dmxPath .dmxNode::before,
body .dmxPath .dmxNode::after,
body .level .dmxNode::before,
body .level .dmxNode::after,
body .dmxNode::before,
body .dmxNode::after { box-shadow: none !important; text-shadow: none !important; border-bottom: none !important; border-bottom-width: 0 !important; border-bottom-style: none !important;
} /* ===== MIGRADO DESDE assets/css/dmx-mobile.css ===== */
/* DMX mobile override final */
@media (max-width: 680px){ html, body{ width:100%; max-width:100%; overflow-x:hidden; background:#f6f8fc; } html[data-theme="dark"] body{ background:#0b1220; } i[class^="fa-"], i[class*=" fa-"]{ display:inline-block !important; line-height:1 !important; font-style:normal !important; } .container{ width:100% !important; max-width:100% !important; padding:0 12px !important; } .topbar{ position:sticky !important; top:0 !important; z-index:100 !important; margin:0 -12px 10px !important; padding:10px 12px !important; border-radius:0 0 22px 22px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:8px !important; background:rgba(255,255,255,.96) !important; border:0 !important; border-bottom:1px solid rgba(16,24,40,.08) !important; box-shadow:0 8px 22px rgba(16,24,40,.08) !important; backdrop-filter:blur(14px); } html[data-theme="dark"] .topbar{ background:rgba(15,23,42,.96) !important; border-bottom-color:rgba(255,255,255,.08) !important; } .brand{ width:44px !important; min-width:44px !important; height:44px !important; display:grid !important; place-items:center !important; } .brandLogoWide{display:none !important} .brandLogoSquare{ display:block !important; width:38px !important; height:38px !important; max-width:38px !important; } .nav{ flex:1 !important; min-width:0 !important; display:flex !important; justify-content:flex-end !important; gap:6px !important; } .nav a, #themeToggle, .toggle{ width:42px !important; min-width:42px !important; height:42px !important; min-height:42px !important; padding:0 !important; border-radius:15px !important; display:grid !important; place-items:center !important; font-size:17px !important; } .navText, #themeToggle .navText{ display:none !important; } .dmxApp{ width:100% !important; margin-top:10px !important; } .dmxHero{ grid-template-columns:1fr !important; gap:14px !important; } .dmxIntro, .dmxStats, .dmxPanel{ border-radius:24px !important; } .dmxIntro{padding:22px 18px !important} .dmxTitle{ font-size:38px !important; line-height:.96 !important; letter-spacing:-.055em !important; } .dmxLead{ font-size:16px !important; line-height:1.35 !important; } .dmxActions, .dmxHomeTiles, .dmxMiniGrid{ grid-template-columns:1fr !important; display:grid !important; } .dmxBtn{ width:100%; min-height:54px; font-size:16px; border-radius:18px; } .dmxMapHead h1{ font-size:34px !important; line-height:1 !important; } .dmxMission{ grid-template-columns:58px 1fr !important; gap:11px !important; padding:13px !important; border-radius:22px !important; } .dmxNode{ width:52px !important; height:52px !important; font-size:18px !important; } .dmxMission h2{ font-size:20px !important; line-height:1.08 !important; } .dmxMission form, .dmxLockedBtn{ grid-column:1/-1 !important; width:100% !important; } .dmxLessonTop{ grid-template-columns:44px 1fr !important; gap:10px !important; margin-bottom:12px !important; } .dmxBack{ width:44px !important; height:44px !important; border-radius:15px !important; font-size:16px !important; } .dmxLessonTitle h1{ font-size:25px !important; line-height:1.02 !important; letter-spacing:-.04em !important; } .dmxLessonTitle p{ font-size:13px !important; line-height:1.25 !important; } .dmxStageRail{ display:flex !important; gap:7px !important; overflow-x:auto !important; padding:2px 0 14px !important; margin:0 0 6px !important; -webkit-overflow-scrolling:touch; } .dmxStageDot{ width:46px !important; min-width:46px !important; height:46px !important; font-size:15px !important; border-bottom-width:5px !important; } .dmxQuestion, .dmxResult, .dmxGate{ padding:18px !important; border-radius:24px !important; border-bottom-width:7px !important; } .dmxQuestionTop{ display:grid !important; gap:6px !important; font-size:13px !important; line-height:1.25 !important; } .dmxQuestionMeter{ height:14px !important; margin:14px 0 20px !important; } .dmxQuestionText{ font-size:26px !important; line-height:1.12 !important; letter-spacing:-.035em !important; word-break:normal !important; overflow-wrap:break-word !important; } .dmxOptions{ gap:10px !important; margin-top:20px !important; } .dmxOption{ min-height:60px !important; grid-template-columns:38px 1fr !important; gap:10px !important; padding:12px !important; border-radius:18px !important; border-bottom-width:5px !important; font-size:16px !important; line-height:1.25 !important; } .dmxOptionBubble{ width:34px !important; height:34px !important; font-size:15px !important; } .dmxFeedback{ margin-top:14px !important; padding:14px !important; border-radius:20px !important; } .dmxFeedbackTitle{font-size:20px !important} .dmxFeedbackText{ font-size:15px !important; line-height:1.4 !important; } .dmxQuestionFoot, .dmxResultActions{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; } .dmxQuestionFoot .dmxBtn, .dmxResultActions .dmxBtn, .dmxWide{ width:100% !important; min-height:54px !important; }
}
@media (max-width: 680px){
.dmxQuestionFoot .dmxBtn, .dmxResultActions .dmxBtn, .dmxWide{ min-height:50px !important; font-size:15px !important; }
}
/* ===== UX: cursor pointer en elementos cliqueables ===== */
a[href],
button:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="button"]:not(:disabled),
input[type="reset"]:not(:disabled),
[role="button"],
[data-action],
[data-pick],
.btn:not(:disabled),
.authBtn:not(:disabled),
.dmxBtn:not(:disabled),
.dmxOption:not(.disabled),
.dmxStageDot:not(.locked),
.stageBtn:not(.locked),
.opt:not(.disabled){ cursor:pointer !important;
}
button:disabled,
input:disabled,
[aria-disabled="true"],
.disabled,
.dmxLockedBtn,
.dmxOption.disabled,
.dmxStageDot.locked,
.stageBtn.locked,
.opt.disabled{ cursor:not-allowed !important;
}
.dmxPricingHead .dmxBadge{ margin:0 auto;
}
.dmxPriceCard .dmxBtn{ margin-top:auto;
}
@media(max-width:900px){
.dmxPricingHead .dmxBadge{ margin:0; }
}
.dmxNotice.ok{ background:#ecfdf3 !important; color:#14532d !important; border-color:#86efac !important;
}
.dmxNotice.bad{ background:#fff1f2 !important; color:#9f1239 !important; border-color:#fda4af !important;
}
.dmxPriceCard > .dmxBtn,
.dmxPriceCard > .dmxPayOwn,
.dmxPriceCard > .dmxPayChoice{ margin-top:auto;
}
/* Margen real en móvil para cards de precios */
@media(max-width:900px){ .dmxApp.dmxPricing{ width:auto !important; max-width:none !important; margin-left:16px !important; margin-right:16px !important; padding-left:0 !important; padding-right:0 !important; } .dmxPricing .dmxPriceGrid{ width:100% !important; max-width:640px !important; margin-left:auto !important; margin-right:auto !important; } .dmxPricing .dmxPriceCard{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; }
}
@media(max-width:420px){
.dmxApp.dmxPricing{ margin-left:14px !important; margin-right:14px !important; }
}
@media(max-width:900px){
.dmxApp.dmxPricing{ margin-left:20px !important; margin-right:20px !important; }
}
@media(max-width:420px){
.dmxApp.dmxPricing{ margin-left:18px !important; margin-right:18px !important; }
}
\n
/* Fix global botones/enlaces: evita textos gigantes/desalineados */
.dmxBtn,
.dmxLockedBtn,
.dmxPayOwn,
.dmxMission button,
.dmxMission .dmxLockedBtn,
.dmxPriceCard .dmxBtn,
.dmxPriceCard .dmxPayOwn{ display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:9px !important; min-height:52px !important; padding:0 18px !important; font-size:16px !important; line-height:1.1 !important; font-weight:950 !important; text-align:center !important; text-decoration:none !important; white-space:normal !important; box-sizing:border-box !important;
}
.dmxMission .dmxLockedBtn{ width:100% !important; max-width:100% !important;
}
.dmxLockedBtn i,
.dmxBtn i,
.dmxPayOwn i{ font-size:1em !important; line-height:1 !important; flex:0 0 auto !important;
}
/* Reset carrusel precios móvil: volver a versión simple sin márgenes laterales */
@media (max-width: 760px){ .dmxApp.dmxPricing.dmxBillingYearly, .dmxApp.dmxPricing, .dmxPricing.dmxBillingYearly{ padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; overflow-x:hidden !important; } .dmxApp.dmxPricing.dmxBillingYearly > *, .dmxApp.dmxPricing > *, .dmxPricing.dmxBillingYearly > *{ max-width:none !important; } .dmxPriceGrid, .dmxPricingGrid, .dmxPlansGrid{ display:grid !important; grid-auto-flow:column !important; grid-auto-columns:clamp(250px, 78vw, 340px) !important; grid-template-columns:none !important; gap:14px !important; width:100vw !important; max-width:100vw !important; margin-left:0 !important; margin-right:0 !important; padding:34px 0 18px 0 !important; overflow-x:auto !important; overflow-y:visible !important; scroll-snap-type:x mandatory !important; scroll-padding-left:0 !important; scroll-padding-right:0 !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:none !important; contain:none !important; } .dmxPriceGrid > *, .dmxPricingGrid > *, .dmxPlansGrid > *{ scroll-snap-align:start !important; width:auto !important; max-width:none !important; min-width:0 !important; margin-left:0 !important; margin-right:0 !important; overflow:visible !important; } .dmxPriceGrid::-webkit-scrollbar, .dmxPricingGrid::-webkit-scrollbar, .dmxPlansGrid::-webkit-scrollbar{ display:none !important; } .dmxPriceCard, .dmxPlanCard, .dmxPricingCard{ overflow:visible !important; }
}
/* Precios móvil: quitar container lateral y corregir separación entre tarjetas */
@media (max-width: 760px){ .dmxPricing .container, .dmxPricing .dmxContainer, .dmxApp.dmxPricing .container, .dmxApp.dmxPricing .dmxContainer{ width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; padding-left:0 !important; padding-right:0 !important; overflow:visible !important; } .dmxPricing .dmxPriceGrid, .dmxPricing .dmxPricingGrid, .dmxPricing .dmxPlansGrid{ width:100vw !important; max-width:100vw !important; margin-left:0 !important; margin-right:0 !important; padding:34px 0 20px 0 !important; display:grid !important; grid-auto-flow:column !important; grid-template-columns:none !important; grid-auto-columns:minmax(282px, 82vw) !important; gap:18px !important; column-gap:18px !important; overflow-x:auto !important; overflow-y:visible !important; scroll-snap-type:x mandatory !important; scroll-padding-left:0 !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:none !important; } .dmxPricing .dmxPriceGrid > *, .dmxPricing .dmxPricingGrid > *, .dmxPricing .dmxPlansGrid > *{ width:auto !important; min-width:0 !important; max-width:none !important; margin:0 !important; scroll-snap-align:start !important; overflow:visible !important; } .dmxPricing .dmxPriceGrid::-webkit-scrollbar, .dmxPricing .dmxPricingGrid::-webkit-scrollbar, .dmxPricing .dmxPlansGrid::-webkit-scrollbar{ display:none !important; }
}
/* Precios móvil: carrusel definitivo sin márgenes laterales y snap centrado */
@media (max-width: 760px){ body:has(.dmxPricing){ overflow-x:hidden !important; } .dmxPricing .container, .dmxPricing .dmxContainer, .dmxPricing .dmxWrap, .dmxPricing .dmxSection, .dmxApp.dmxPricing .container, .dmxApp.dmxPricing .dmxContainer{ width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; padding-left:0 !important; padding-right:0 !important; overflow:visible !important; } .dmxPricing .dmxPriceGrid, .dmxPricing .dmxPricingGrid, .dmxPricing .dmxPlansGrid{ position:relative !important; left:50% !important; width:100vw !important; max-width:100vw !important; margin-left:-50vw !important; margin-right:-50vw !important; display:grid !important; grid-auto-flow:column !important; grid-template-columns:none !important; grid-auto-columns:82vw !important; gap:18px !important; padding:34px 9vw 22px 9vw !important; overflow-x:auto !important; overflow-y:visible !important; scroll-snap-type:x mandatory !important; scroll-padding-left:9vw !important; scroll-padding-right:9vw !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:none !important; } .dmxPricing .dmxPriceGrid > *, .dmxPricing .dmxPricingGrid > *, .dmxPricing .dmxPlansGrid > *{ width:100% !important; max-width:none !important; min-width:0 !important; margin:0 !important; scroll-snap-align:center !important; scroll-snap-stop:always !important; overflow:visible !important; } .dmxPricing .dmxPriceGrid::-webkit-scrollbar, .dmxPricing .dmxPricingGrid::-webkit-scrollbar, .dmxPricing .dmxPlansGrid::-webkit-scrollbar{ display:none !important; }
}
/* Precios móvil: carrusel tipo DirecTV, tarjetas más angostas y snap correcto */
@media (max-width: 760px){ .dmxPricing .container, .dmxPricing .dmxContainer, .dmxApp.dmxPricing .container, .dmxApp.dmxPricing .dmxContainer{ width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; padding-left:0 !important; padding-right:0 !important; overflow:visible !important; } .dmxPricing .dmxPriceGrid, .dmxPricing .dmxPricingGrid, .dmxPricing .dmxPlansGrid{ left:auto !important; width:100vw !important; max-width:100vw !important; margin-left:0 !important; margin-right:0 !important; display:grid !important; grid-auto-flow:column !important; grid-template-columns:none !important; grid-auto-columns:66vw !important; gap:8vw !important; padding:34px 17vw 22px 17vw !important; overflow-x:auto !important; overflow-y:visible !important; scroll-snap-type:x mandatory !important; scroll-padding-left:17vw !important; scroll-padding-right:17vw !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:none !important; } .dmxPricing .dmxPriceGrid > *, .dmxPricing .dmxPricingGrid > *, .dmxPricing .dmxPlansGrid > *{ width:100% !important; max-width:none !important; min-width:0 !important; margin:0 !important; scroll-snap-align:center !important; scroll-snap-stop:always !important; overflow:visible !important; } .dmxPricing .dmxPriceGrid::-webkit-scrollbar, .dmxPricing .dmxPricingGrid::-webkit-scrollbar, .dmxPricing .dmxPlansGrid::-webkit-scrollbar{ display:none !important; }
}
/* Precios móvil: restaura header/selector y deja ancho completo solo al carrusel */
@media (max-width: 760px){ .dmxApp.dmxPricing, .dmxApp.dmxPricing.dmxBillingYearly, .dmxPricing.dmxBillingYearly{ width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; overflow-x:hidden !important; } .dmxPricing .dmxSection, .dmxPricing .dmxWrap{ width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; left:auto !important; right:auto !important; transform:none !important; overflow:visible !important; } .dmxPricing .container, .dmxPricing .dmxContainer{ box-sizing:border-box !important; width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; padding-left:18px !important; padding-right:18px !important; left:auto !important; right:auto !important; transform:none !important; overflow:visible !important; } .dmxPricing .dmxBilling, .dmxPricing .dmxBillingToggle, .dmxPricing .dmxBillingSwitch, .dmxPricing .dmxBillingTabs, .dmxPricing .dmxBillingBox{ margin-left:auto !important; margin-right:auto !important; } .dmxPricing .dmxPriceCarouselShell{ width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; padding:0 !important; left:auto !important; right:auto !important; transform:none !important; overflow:visible !important; } .dmxPricing .dmxPriceCarouselShell .dmxPriceGrid, .dmxPricing .dmxPriceCarouselShell .dmxPricingGrid, .dmxPricing .dmxPriceCarouselShell .dmxPlansGrid{ position:relative !important; left:auto !important; right:auto !important; transform:none !important; width:100vw !important; max-width:100vw !important; margin-left:0 !important; margin-right:0 !important; display:grid !important; grid-auto-flow:column !important; grid-template-columns:none !important; grid-auto-columns:66vw !important; gap:8vw !important; padding:34px 5vw 22px 5vw !important; overflow-x:auto !important; overflow-y:visible !important; scroll-snap-type:x mandatory !important; scroll-padding-left:5vw !important; scroll-padding-right:5vw !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:none !important; } .dmxPricing .dmxPriceCarouselShell .dmxPriceGrid > *, .dmxPricing .dmxPriceCarouselShell .dmxPricingGrid > *, .dmxPricing .dmxPriceCarouselShell .dmxPlansGrid > *{ width:100% !important; max-width:none !important; min-width:0 !important; margin:0 !important; scroll-snap-align:center !important; scroll-snap-stop:always !important; overflow:visible !important; } .dmxPricing .dmxPriceCarouselShell .dmxPriceGrid::-webkit-scrollbar, .dmxPricing .dmxPriceCarouselShell .dmxPricingGrid::-webkit-scrollbar, .dmxPricing .dmxPriceCarouselShell .dmxPlansGrid::-webkit-scrollbar{ display:none !important; }
}
/* Precios tablet: ordenar encabezado, textos y selector anual/mensual */
@media (min-width:761px) and (max-width:800px){ .dmxPricing .container, .dmxPricing .dmxContainer{ padding-left:32px !important; padding-right:32px !important; } .dmxPricing .dmxHero, .dmxPricing .dmxPricingHero, .dmxPricing .dmxSectionHead, .dmxPricing header:not(.dmxTopbar){ max-width:760px !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } .dmxPricing .dmxHero > *, .dmxPricing .dmxPricingHero > *, .dmxPricing .dmxSectionHead > *, .dmxPricing header:not(.dmxTopbar) > *{ margin-left:auto !important; margin-right:auto !important; } .dmxPricing h1{ display:block !important; max-width:760px !important; margin:26px auto 18px !important; text-align:center !important; text-wrap:balance !important; } .dmxPricing h1 + p, .dmxPricing .dmxHero p, .dmxPricing .dmxPricingHero p, .dmxPricing .dmxSectionHead p{ max-width:720px !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; text-wrap:balance !important; } .dmxPricing .dmxEyebrow, .dmxPricing .dmxBadge, .dmxPricing .dmxPill{ margin-left:auto !important; margin-right:auto !important; } .dmxPricing .dmxBilling, .dmxPricing .dmxBillingToggle, .dmxPricing .dmxBillingSwitch, .dmxPricing .dmxBillingTabs, .dmxPricing .dmxBillingBox{ display:flex !important; justify-content:center !important; align-items:center !important; margin-left:auto !important; margin-right:auto !important; }
}
/* ========================================================= PRECIOS RESPONSIVE FINAL 0-1100px: encabezado centrado, selector centrado, carrusel estable ========================================================= */ @media (max-width:800px){ body:has(.dmxPricing){ overflow-x:hidden !important; } .dmxPricing, .dmxApp.dmxPricing, .dmxApp.dmxPricing.dmxBillingYearly, .dmxPricing.dmxBillingYearly{ width:100% !important; max-width:100% !important; overflow-x:hidden !important; padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; } /* Contenido superior normal, jamás full-bleed */ .dmxPricing .container, .dmxPricing .dmxContainer, .dmxPricing .dmxSection, .dmxPricing .dmxWrap{ box-sizing:border-box !important; width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; padding-left:clamp(18px,4vw,36px) !important; padding-right:clamp(18px,4vw,36px) !important; left:auto !important; right:auto !important; transform:none !important; overflow:visible !important; } /* Hero siempre ordenado */ .dmxPricing .dmxHero, .dmxPricing .dmxPricingHero, .dmxPricing .dmxSectionHead, .dmxPricing header:not(.dmxTopbar){ width:100% !important; max-width:780px !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } .dmxPricing h1{ display:block !important; width:100% !important; max-width:780px !important; margin:26px auto 18px !important; text-align:center !important; text-wrap:balance !important; } .dmxPricing h1 + p, .dmxPricing .dmxHero p, .dmxPricing .dmxPricingHero p, .dmxPricing .dmxSectionHead p{ display:block !important; width:100% !important; max-width:720px !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; text-wrap:balance !important; } .dmxPricing .dmxEyebrow, .dmxPricing .dmxBadge, .dmxPricing .dmxPill{ margin-left:auto !important; margin-right:auto !important; } /* Selector mensual/anual: centrado, NO estirado */ .dmxPricing .dmxBilling, .dmxPricing .dmxBillingWrap, .dmxPricing .dmxBillingRow, .dmxPricing .dmxBillingControls{ width:100% !important; max-width:100% !important; display:flex !important; justify-content:center !important; align-items:center !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; text-align:center !important; } .dmxPricing .dmxBilling > *, .dmxPricing .dmxBillingWrap > *, .dmxPricing .dmxBillingRow > *, .dmxPricing .dmxBillingControls > *, .dmxPricing .dmxBillingToggle, .dmxPricing .dmxBillingSwitch, .dmxPricing .dmxBillingTabs, .dmxPricing .dmxBillingBox{ width:max-content !important; max-width:calc(100vw - 36px) !important; min-width:0 !important; flex:0 0 auto !important; display:inline-flex !important; margin-left:auto !important; margin-right:auto !important; justify-self:center !important; align-self:center !important; float:none !important; left:auto !important; right:auto !important; transform:none !important; } /* Solo el carrusel es full-bleed */ .dmxPricing .dmxPriceCarouselShell{ --dmxPlanCardW:clamp(310px,42vw,430px); width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; padding:0 !important; overflow:visible !important; left:auto !important; right:auto !important; transform:none !important; } .dmxPricing .dmxPriceCarouselShell .dmxPriceGrid, .dmxPricing .dmxPriceCarouselShell .dmxPricingGrid, .dmxPricing .dmxPriceCarouselShell .dmxPlansGrid, .dmxPricing .dmxPriceGrid, .dmxPricing .dmxPricingGrid, .dmxPricing .dmxPlansGrid{ display:grid !important; grid-auto-flow:column !important; grid-template-columns:none !important; grid-auto-columns:var(--dmxPlanCardW) !important; gap:clamp(24px,6vw,58px) !important; width:100vw !important; max-width:100vw !important; margin-left:0 !important; margin-right:0 !important; padding-top:38px !important; padding-bottom:24px !important; padding-left:calc((100vw - var(--dmxPlanCardW)) / 2) !important; padding-right:calc((100vw - var(--dmxPlanCardW)) / 2) !important; overflow-x:auto !important; overflow-y:visible !important; scroll-snap-type:x mandatory !important; scroll-padding-left:calc((100vw - var(--dmxPlanCardW)) / 2) !important; scroll-padding-right:calc((100vw - var(--dmxPlanCardW)) / 2) !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:none !important; position:relative !important; left:auto !important; right:auto !important; transform:none !important; } .dmxPricing .dmxPriceCarouselShell .dmxPriceGrid > *, .dmxPricing .dmxPriceCarouselShell .dmxPricingGrid > *, .dmxPricing .dmxPriceCarouselShell .dmxPlansGrid > *, .dmxPricing .dmxPriceGrid > *, .dmxPricing .dmxPricingGrid > *, .dmxPricing .dmxPlansGrid > *{ width:100% !important; max-width:none !important; min-width:0 !important; margin:0 !important; scroll-snap-align:center !important; scroll-snap-stop:always !important; overflow:visible !important; } .dmxPricing .dmxPriceGrid::-webkit-scrollbar, .dmxPricing .dmxPricingGrid::-webkit-scrollbar, .dmxPricing .dmxPlansGrid::-webkit-scrollbar{ display:none !important; } .dmxPricing .dmxPriceDots{ display:flex !important; justify-content:center !important; align-items:center !important; gap:8px !important; width:100% !important; margin:14px auto 6px !important; }
}
/* Precios 801-900px: mantener modo PC, pero escalar contenido para que no desborde */
@media (min-width:801px) and (max-width:900px){ .dmxPricing .dmxPriceGrid{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:18px !important; max-width:100% !important; } .dmxPricing .dmxPriceCard{ padding:24px 22px !important; min-width:0 !important; overflow:hidden !important; } .dmxPricing .dmxPriceCard h2, .dmxPricing .dmxPriceCard h3{ font-size:clamp(24px, 3.15vw, 31px) !important; line-height:1.05 !important; word-break:normal !important; } .dmxPricing .dmxPriceCard .dmxPrice, .dmxPricing .dmxPriceCard .dmxPriceAmount, .dmxPricing .dmxPriceCard .dmxPlanPrice, .dmxPricing .dmxPriceCard strong{ max-width:100% !important; } .dmxPricing .dmxPriceCard .dmxPriceMain, .dmxPricing .dmxPriceCard .dmxAmount, .dmxPricing .dmxPriceCard .dmxPlanAmount, .dmxPricing .dmxPriceCard [class*="Amount"], .dmxPricing .dmxPriceCard [class*="Price"]{ font-size:clamp(38px, 6vw, 56px) !important; line-height:.95 !important; white-space:nowrap !important; } .dmxPricing .dmxPriceCard .dmxCurrency, .dmxPricing .dmxPriceCard .dmxPeriod, .dmxPricing .dmxPriceCard small, .dmxPricing .dmxPriceCard .dmxAnnualNote{ font-size:clamp(12px, 1.65vw, 15px) !important; line-height:1.2 !important; } .dmxPricing .dmxPriceCard li, .dmxPricing .dmxPriceCard p, .dmxPricing .dmxPriceCard .dmxFeature, .dmxPricing .dmxPriceCard .dmxPlanFeature{ font-size:clamp(14px, 1.95vw, 18px) !important; line-height:1.24 !important; } .dmxPricing .dmxPriceCard .dmxBtn, .dmxPricing .dmxPriceCard button, .dmxPricing .dmxPriceCard a.dmxBtn{ font-size:clamp(14px, 1.8vw, 17px) !important; min-height:48px !important; padding-left:14px !important; padding-right:14px !important; white-space:nowrap !important; } .dmxPricing .dmxPriceCard .dmxRibbon, .dmxPricing .dmxPriceCard .dmxPlanTag, .dmxPricing .dmxPriceCard .dmxPopular{ font-size:clamp(12px, 1.6vw, 15px) !important; white-space:nowrap !important; }
}
/* ========================================================= FIX GLOBAL: botones legibles en claro/oscuro y deshabilitados ========================================================= */ /* Botones deshabilitados: nunca texto blanco sobre fondo blanco */
button:disabled:not(.dmxPriceArrow):not(.dmxAnnualInfo),
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
.btn:disabled,
.btn.disabled,
.dmxBtn:disabled,
.dmxBtn.disabled,
.dmxPayOwn:disabled,
.dmxPayDisabled,
.dmxDodoPayButton:disabled,
.authBtn:disabled{ opacity:1 !important; filter:none !important; background:#e2e8f0 !important; color:#475467 !important; border-color:#cbd5e1 !important; border-bottom-color:#b8c0cc !important; text-shadow:none !important; box-shadow:none !important; cursor:not-allowed !important;
}
button:disabled:not(.dmxPriceArrow):not(.dmxAnnualInfo) *,
input[type="submit"]:disabled *,
input[type="button"]:disabled *,
input[type="reset"]:disabled *,
.btn:disabled *,
.btn.disabled *,
.dmxBtn:disabled *,
.dmxBtn.disabled *,
.dmxPayOwn:disabled *,
.dmxPayDisabled *,
.dmxDodoPayButton:disabled *,
.authBtn:disabled *{ color:inherit !important; opacity:1 !important; filter:none !important;
}
/* Modo oscuro: disabled legible */
html[data-theme="dark"] button:disabled:not(.dmxPriceArrow):not(.dmxAnnualInfo),
html[data-theme="dark"] input[type="submit"]:disabled,
html[data-theme="dark"] input[type="button"]:disabled,
html[data-theme="dark"] input[type="reset"]:disabled,
html[data-theme="dark"] .btn:disabled,
html[data-theme="dark"] .btn.disabled,
html[data-theme="dark"] .dmxBtn:disabled,
html[data-theme="dark"] .dmxBtn.disabled,
html[data-theme="dark"] .dmxPayOwn:disabled,
html[data-theme="dark"] .dmxPayDisabled,
html[data-theme="dark"] .dmxDodoPayButton:disabled,
html[data-theme="dark"] .authBtn:disabled{ background:rgba(148,163,184,.18) !important; color:#cbd5e1 !important; border:1px solid rgba(203,213,225,.24) !important; border-bottom:5px solid rgba(71,85,105,.75) !important; box-shadow:none !important;
}
/* Botones blancos/neutral en modo oscuro: texto oscuro siempre visible */
html[data-theme="dark"] a.btn:not(.primary):not(.danger):not(:disabled):not(.disabled),
html[data-theme="dark"] button.btn:not(.primary):not(.danger):not(:disabled):not(.disabled),
html[data-theme="dark"] a.dmxBtn:not(.dmxBtnPrimary):not(.dmxBtnBlue):not(.dmxBtnDanger):not(.dmxLockedBtn):not(:disabled):not(.disabled),
html[data-theme="dark"] button.dmxBtn:not(.dmxBtnPrimary):not(.dmxBtnBlue):not(.dmxBtnDanger):not(.dmxLockedBtn):not(:disabled):not(.disabled),
html[data-theme="dark"] .dmxPriceCard:not(.featured):not(.premium) .dmxBtn:not(:disabled):not(.disabled):not(.dmxPayDisabled){ background:#ffffff !important; color:#101828 !important; border-color:#e5e7eb !important; text-shadow:none !important;
}
html[data-theme="dark"] a.btn:not(.primary):not(.danger):not(:disabled):not(.disabled) *,
html[data-theme="dark"] button.btn:not(.primary):not(.danger):not(:disabled):not(.disabled) *,
html[data-theme="dark"] a.dmxBtn:not(.dmxBtnPrimary):not(.dmxBtnBlue):not(.dmxBtnDanger):not(.dmxLockedBtn):not(:disabled):not(.disabled) *,
html[data-theme="dark"] button.dmxBtn:not(.dmxBtnPrimary):not(.dmxBtnBlue):not(.dmxBtnDanger):not(.dmxLockedBtn):not(:disabled):not(.disabled) *,
html[data-theme="dark"] .dmxPriceCard:not(.featured):not(.premium) .dmxBtn:not(:disabled):not(.disabled):not(.dmxPayDisabled) *{ color:inherit !important; opacity:1 !important;
}
/* Botones principales verdes/azules: texto blanco garantizado */
.dmxBtnPrimary,
.dmxBtnBlue,
.dmxBtnEnter,
.dmxBtnReview,
.dmxPayOwnSubscribe,
.dmxDodoDirectButton,
.dmxStatsPlansBtn,
.dmxRestartPlansBtn,
button.dmxRestartPlansBtn,
.btn.primary.dmxRestartPlansBtn,
.dmxMission .dmxBtnEnter,
.dmxMission .dmxBtnReview{ color:#fff !important; text-shadow:none !important;
}
.dmxBtnPrimary *,
.dmxBtnBlue *,
.dmxBtnEnter *,
.dmxBtnReview *,
.dmxPayOwnSubscribe *,
.dmxDodoDirectButton *,
.dmxStatsPlansBtn *,
.dmxRestartPlansBtn *,
button.dmxRestartPlansBtn *,
.btn.primary.dmxRestartPlansBtn *,
.dmxMission .dmxBtnEnter *,
.dmxMission .dmxBtnReview *{ color:inherit !important; opacity:1 !important;
}
/* ========================================================= FIX GLOBAL: botones legibles en claro/oscuro y deshabilitados ========================================================= */ /* Botones deshabilitados: nunca texto blanco sobre fondo blanco */
button:disabled:not(.dmxPriceArrow):not(.dmxAnnualInfo),
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
.btn:disabled,
.btn.disabled,
.dmxBtn:disabled,
.dmxBtn.disabled,
.dmxPayOwn:disabled,
.dmxPayDisabled,
.dmxDodoPayButton:disabled,
.authBtn:disabled{ opacity:1 !important; filter:none !important; background:#e2e8f0 !important; color:#475467 !important; border-color:#cbd5e1 !important; border-bottom-color:#b8c0cc !important; text-shadow:none !important; box-shadow:none !important; cursor:not-allowed !important;
}
button:disabled:not(.dmxPriceArrow):not(.dmxAnnualInfo) *,
input[type="submit"]:disabled *,
input[type="button"]:disabled *,
input[type="reset"]:disabled *,
.btn:disabled *,
.btn.disabled *,
.dmxBtn:disabled *,
.dmxBtn.disabled *,
.dmxPayOwn:disabled *,
.dmxPayDisabled *,
.dmxDodoPayButton:disabled *,
.authBtn:disabled *{ color:inherit !important; opacity:1 !important; filter:none !important;
}
/* Modo oscuro: disabled legible */
html[data-theme="dark"] button:disabled:not(.dmxPriceArrow):not(.dmxAnnualInfo),
html[data-theme="dark"] input[type="submit"]:disabled,
html[data-theme="dark"] input[type="button"]:disabled,
html[data-theme="dark"] input[type="reset"]:disabled,
html[data-theme="dark"] .btn:disabled,
html[data-theme="dark"] .btn.disabled,
html[data-theme="dark"] .dmxBtn:disabled,
html[data-theme="dark"] .dmxBtn.disabled,
html[data-theme="dark"] .dmxPayOwn:disabled,
html[data-theme="dark"] .dmxPayDisabled,
html[data-theme="dark"] .dmxDodoPayButton:disabled,
html[data-theme="dark"] .authBtn:disabled{ background:rgba(148,163,184,.18) !important; color:#cbd5e1 !important; border:1px solid rgba(203,213,225,.24) !important; border-bottom:5px solid rgba(71,85,105,.75) !important; box-shadow:none !important;
}
/* Botones blancos/neutral en modo oscuro: texto oscuro siempre visible */
html[data-theme="dark"] a.btn:not(.primary):not(.danger):not(:disabled):not(.disabled),
html[data-theme="dark"] button.btn:not(.primary):not(.danger):not(:disabled):not(.disabled),
html[data-theme="dark"] a.dmxBtn:not(.dmxBtnPrimary):not(.dmxBtnBlue):not(.dmxBtnDanger):not(.dmxLockedBtn):not(:disabled):not(.disabled),
html[data-theme="dark"] button.dmxBtn:not(.dmxBtnPrimary):not(.dmxBtnBlue):not(.dmxBtnDanger):not(.dmxLockedBtn):not(:disabled):not(.disabled),
html[data-theme="dark"] .dmxPriceCard:not(.featured):not(.premium) .dmxBtn:not(:disabled):not(.disabled):not(.dmxPayDisabled){ background:#ffffff !important; color:#101828 !important; border-color:#e5e7eb !important; text-shadow:none !important;
}
html[data-theme="dark"] a.btn:not(.primary):not(.danger):not(:disabled):not(.disabled) *,
html[data-theme="dark"] button.btn:not(.primary):not(.danger):not(:disabled):not(.disabled) *,
html[data-theme="dark"] a.dmxBtn:not(.dmxBtnPrimary):not(.dmxBtnBlue):not(.dmxBtnDanger):not(.dmxLockedBtn):not(:disabled):not(.disabled) *,
html[data-theme="dark"] button.dmxBtn:not(.dmxBtnPrimary):not(.dmxBtnBlue):not(.dmxBtnDanger):not(.dmxLockedBtn):not(:disabled):not(.disabled) *,
html[data-theme="dark"] .dmxPriceCard:not(.featured):not(.premium) .dmxBtn:not(:disabled):not(.disabled):not(.dmxPayDisabled) *{ color:inherit !important; opacity:1 !important;
}
/* Botones principales verdes/azules: texto blanco garantizado */
.dmxBtnPrimary,
.dmxBtnBlue,
.dmxBtnEnter,
.dmxBtnReview,
.dmxPayOwnSubscribe,
.dmxDodoDirectButton,
.dmxStatsPlansBtn,
.dmxRestartPlansBtn,
button.dmxRestartPlansBtn,
.btn.primary.dmxRestartPlansBtn,
.dmxMission .dmxBtnEnter,
.dmxMission .dmxBtnReview{ color:#fff !important; text-shadow:none !important;
}
.dmxBtnPrimary *,
.dmxBtnBlue *,
.dmxBtnEnter *,
.dmxBtnReview *,
.dmxPayOwnSubscribe *,
.dmxDodoDirectButton *,
.dmxStatsPlansBtn *,
.dmxRestartPlansBtn *,
button.dmxRestartPlansBtn *,
.btn.primary.dmxRestartPlansBtn *,
.dmxMission .dmxBtnEnter *,
.dmxMission .dmxBtnReview *{ color:inherit !important; opacity:1 !important;
}
/* Mobile topbar autohide visual END */
/* ========================================================= NIVELES HEADER NORMAL FINAL Título controlado y botones con estructura normal tipo Comenzar/Continuar. ========================================================= */
.dmxMap .dmxMapHead{ display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:center !important; gap:24px !important;
}
.dmxMap .dmxMapHead h1{ font-size:clamp(44px,5.4vw,74px) !important; line-height:.96 !important; letter-spacing:-.065em !important; margin:14px 0 0 !important;
}
.dmxMap .dmxMapHeadActions{ display:flex !important; flex-direction:column !important; gap:16px !important; min-width:300px !important; max-width:340px !important; align-self:center !important;
}
.dmxMap .dmxMapHeadActions .dmxMapHeadBtn{ width:100% !important; min-height:56px !important; height:auto !important; padding:15px 22px !important; border-radius:18px !important; border:0 !important; border-bottom-width:5px !important; box-shadow:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; font-size:16px !important; line-height:1 !important; font-weight:1000 !important; white-space:nowrap !important;
}
.dmxMap .dmxMapHeadActions .dmxMapHeadBtn i,
.dmxMap .dmxMapHeadActions .dmxMapHeadBtn span{ font-size:inherit !important; line-height:inherit !important;
}
@media(max-width:900px){
.dmxMap .dmxMapHead{ grid-template-columns:1fr !important; gap:18px !important; }
.dmxMap .dmxMapHead h1{ font-size:clamp(42px,10.5vw,62px) !important; margin:12px 0 0 !important; }
.dmxMap .dmxMapHeadActions{ width:100% !important; max-width:none !important; min-width:0 !important; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
.dmxMap .dmxMapHeadActions .dmxMapHeadBtn{ min-height:54px !important; padding:14px 12px !important; border-radius:16px !important; border-bottom-width:5px !important; font-size:15px !important; gap:8px !important; }
}
@media(max-width:420px){
.dmxMap .dmxMapHeadActions{ gap:10px !important; }
.dmxMap .dmxMapHeadActions .dmxMapHeadBtn{ min-height:50px !important; padding:12px 8px !important; border-radius:15px !important; font-size:13px !important; gap:6px !important; }
}
/* ========================================================= NIVELES HEADER BOTONES 2 COLUMNAS SIEMPRE Ver avance y Modo Práctica siempre uno al lado del otro. ========================================================= */
@media(max-width:900px){ .dmxMap .dmxMapHeadActions{ width:100% !important; max-width:none !important; min-width:0 !important; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; } .dmxMap .dmxMapHeadActions .dmxMapHeadBtn{ width:100% !important; min-width:0 !important; white-space:nowrap !important; justify-content:center !important; }
}
@media(max-width:420px){
.dmxMap .dmxMapHeadActions{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; }
.dmxMap .dmxMapHeadActions .dmxMapHeadBtn{ font-size:12px !important; padding-left:6px !important; padding-right:6px !important; gap:5px !important; }
}
/* ========================================================= NIVELES HEADER DESKTOP 2 COLUMNAS DERECHA Solo escritorio: botones pegados a la derecha y en 2 columnas. No modifica móvil. ========================================================= */
@media(min-width:901px){ .dmxMap .dmxMapHeadActions{ justify-self:end !important; align-self:center !important; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:14px !important; width:min(720px,46vw) !important; min-width:560px !important; max-width:720px !important; } .dmxMap .dmxMapHeadActions .dmxMapHeadBtn{ width:100% !important; min-width:0 !important; white-space:nowrap !important; justify-content:center !important; }
}
.dmxStagePicker .dmxStagePickerHeadActions .dmxMapHeadBtn{ width:100% !important; min-height:56px !important; height:auto !important; padding:15px 22px !important; border-radius:18px !important; border:0 !important; border-bottom-width:5px !important; box-shadow:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; font-size:16px !important; line-height:1 !important; font-weight:1000 !important; white-space:nowrap !important;
}
@media(max-width:900px){
.dmxStagePicker .dmxStagePickerHeadActions .dmxMapHeadBtn{ min-height:54px !important; padding:14px 12px !important; border-radius:16px !important; border-bottom-width:5px !important; font-size:15px !important; gap:8px !important; }
}
.dmxStagePicker .dmxStagePickerHeadActions .dmxMapHeadBtn{ width:100% !important; min-width:0 !important; min-height:56px !important; height:auto !important; padding:15px 22px !important; border-radius:18px !important; border:0 !important; border-bottom-width:5px !important; box-shadow:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; font-size:16px !important; line-height:1 !important; font-weight:1000 !important; white-space:nowrap !important;
}
@media(max-width:900px){
.dmxStagePicker .dmxStagePickerHeadActions .dmxMapHeadBtn{ min-height:54px !important; padding:14px 12px !important; border-radius:16px !important; border-bottom-width:5px !important; font-size:15px !important; gap:8px !important; }
}
@media(max-width:420px){
.dmxStagePicker .dmxStagePickerHeadActions .dmxMapHeadBtn{ min-height:50px !important; padding:12px 6px !important; border-radius:15px !important; font-size:12px !important; gap:5px !important; }
}
/* ========================================================= ETAPAS HEADER MENU FINAL Botón atrás dentro del menú; botones sin ancho calculado en PC. ========================================================= */
@media(min-width:901px){ .dmxStagePicker .dmxStagePickerHeadHero{ display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:center !important; gap:24px !important; margin-bottom:30px !important; } .dmxStagePicker .dmxStagePickerHeadActions{ justify-self:end !important; align-self:center !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-end !important; gap:14px !important; width:auto !important; min-width:0 !important; max-width:none !important; } .dmxStagePicker .dmxStagePickerHeadActions .dmxMapHeadBtn{ width:auto !important; min-width:0 !important; max-width:none !important; min-height:56px !important; height:auto !important; padding:15px 24px !important; border-radius:18px !important; border:0 !important; border-bottom-width:5px !important; box-shadow:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; font-size:16px !important; line-height:1 !important; font-weight:1000 !important; white-space:nowrap !important; } .dmxStagePicker .dmxStagePickerBackIcon{ flex:0 0 56px !important; width:56px !important; min-width:56px !important; height:56px !important; padding:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; border-radius:18px !important; background:#fff !important; color:#0f172a !important; border:1px solid rgba(148,163,184,.35) !important; border-bottom:5px solid rgba(148,163,184,.55) !important; text-decoration:none !important; box-shadow:none !important; }
}
/* ========================================================= NIVELES HEADER MENU AUTO WIDTH PC Igual que /etapas/: botones a la derecha, ancho libre según texto. En /niveles/ no existe botón atrás. ========================================================= */
@media(min-width:901px){ .dmxMap .dmxMapHeadActions{ justify-self:end !important; align-self:center !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-end !important; gap:14px !important; width:auto !important; min-width:0 !important; max-width:none !important; } .dmxMap .dmxMapHeadActions .dmxMapHeadBtn{ width:auto !important; min-width:0 !important; max-width:none !important; min-height:56px !important; height:auto !important; padding:15px 24px !important; border-radius:18px !important; border:0 !important; border-bottom-width:5px !important; box-shadow:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; font-size:16px !important; line-height:1 !important; font-weight:1000 !important; white-space:nowrap !important; }
}
.dmxStagePickCard .dmxStagePickBody h2,
.dmxStagePickCard .dmxStagePickMeta span,
.dmxStagePickCard .dmxStagePickActions,
.dmxStagePickCard .dmxStagePickActionForm,
.dmxStagePickCard > .dmxBtn{ animation:dmxLevelFadeUp .42s cubic-bezier(.2,.9,.2,1) both !important; will-change:opacity, transform, filter !important;
}
.dmxStagePickCard .dmxStagePickActions,
.dmxStagePickCard .dmxStagePickActionForm,
.dmxStagePickCard > .dmxBtn{animation-delay:.28s !important;}
/* ========================================================= NIVELES DIPLOMA DOCUMOTORS Tarjeta final refinada: premium, limpia, balanceada y sin etiquetas cuadradas. ========================================================= */
.dmxMap .dmxDiplomaMission{ position:relative !important; isolation:isolate !important; overflow:hidden !important; min-height:190px !important; padding:34px 36px !important; display:grid !important; grid-template-columns:96px minmax(0,1fr) auto !important; align-items:center !important; gap:28px !important; border-radius:30px !important; border:1px solid rgba(245,158,11,.46) !important; background: radial-gradient(circle at 8% 18%, rgba(251,191,36,.22), transparent 32%), radial-gradient(circle at 82% 10%, rgba(59,130,246,.22), transparent 36%), linear-gradient(135deg,#111827 0%,#172554 56%,#020617 100%) !important; box-shadow: 0 22px 60px rgba(15,23,42,.20), inset 0 1px 0 rgba(255,255,255,.14) !important; color:#fff !important;
}
.dmxMap .dmxDiplomaMission::before{ content:"" !important; position:absolute !important; inset:0 !important; z-index:0 !important; pointer-events:none !important; background: linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px), linear-gradient(0deg,rgba(255,255,255,.045) 1px,transparent 1px) !important; background-size:46px 46px !important; opacity:.18 !important; transform:none !important; animation:none !important; filter:none !important;
}
.dmxMap .dmxDiplomaMission::after{ content:"" !important; position:absolute !important; inset:-40% auto -40% -35% !important; width:44% !important; z-index:0 !important; pointer-events:none !important; background:linear-gradient(115deg,transparent,rgba(255,255,255,.16),transparent) !important; transform:translateX(-120%) skewX(-18deg) !important; animation:dmxDiplomaSweep 7s ease-in-out infinite !important; opacity:0 !important;
}
@keyframes dmxDiplomaSweep{ 0%,58%{transform:translateX(-120%) skewX(-18deg);opacity:0} 66%{opacity:.8} 84%,100%{transform:translateX(420%) skewX(-18deg);opacity:0}
}
.dmxMap .dmxDiplomaMission > *{ position:relative !important; z-index:1 !important;
}
.dmxMap .dmxDiplomaMission .dmxDiplomaNode{ width:96px !important; height:96px !important; border-radius:28px !important; display:flex !important; align-items:center !important; justify-content:center !important; background:linear-gradient(180deg,#fde68a 0%,#f59e0b 100%) !important; color:#111827 !important; border:0 !important; border-bottom:8px solid #b45309 !important; box-shadow: 0 16px 28px rgba(0,0,0,.22), 0 0 0 9px rgba(251,191,36,.14) !important; font-size:34px !important;
}
.dmxMap .dmxDiplomaMission.locked .dmxDiplomaNode{ background:linear-gradient(180deg,#e2e8f0 0%,#94a3b8 100%) !important; color:#334155 !important; border-bottom-color:#64748b !important; box-shadow: 0 16px 28px rgba(0,0,0,.18), 0 0 0 9px rgba(148,163,184,.14) !important;
}
.dmxMap .dmxDiplomaBody{ min-width:0 !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:12px !important;
}
.dmxMap .dmxDiplomaKicker{ display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:9px !important; width:auto !important; max-width:max-content !important; margin:0 !important; padding:8px 13px !important; border-radius:999px !important; background:rgba(251,191,36,.16) !important; border:1px solid rgba(251,191,36,.30) !important; color:#fde68a !important; font-size:12px !important; line-height:1 !important; font-weight:1000 !important; letter-spacing:.055em !important; text-transform:uppercase !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.dmxMap .dmxDiplomaMission h2{ margin:0 !important; color:#fff !important; font-size:34px !important; line-height:1.02 !important; letter-spacing:-.045em !important; font-weight:1000 !important;
}
.dmxMap .dmxDiplomaMission p{ max-width:780px !important; margin:0 !important; color:rgba(255,255,255,.78) !important; font-size:17px !important; line-height:1.45 !important; font-weight:750 !important;
}
.dmxMap .dmxDiplomaMission .dmxMissionMeta{ display:flex !important; flex-wrap:wrap !important; gap:8px !important; margin-top:2px !important;
}
.dmxMap .dmxDiplomaMission .dmxMissionMeta span{ display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; width:auto !important; margin:0 !important; padding:7px 10px !important; border-radius:999px !important; background:rgba(255,255,255,.10) !important; border:1px solid rgba(255,255,255,.13) !important; color:rgba(255,255,255,.88) !important; font-size:12px !important; line-height:1 !important; font-weight:900 !important; box-shadow:none !important;
}
.dmxMap .dmxDiplomaMission .dmxMissionMeta span i{ color:#fde68a !important; font-size:13px !important;
}
.dmxMap .dmxDiplomaMission .dmxDiplomaBtn,
.dmxMap .dmxDiplomaMission .dmxDiplomaLockedBtn{ justify-self:end !important; align-self:center !important; min-height:58px !important; width:auto !important; min-width:188px !important; max-width:none !important; padding:16px 24px !important; border-radius:18px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; white-space:nowrap !important; font-size:16px !important; font-weight:1000 !important;
}
.dmxMap .dmxDiplomaMission .dmxDiplomaLockedBtn{ background:linear-gradient(180deg,#f8fafc 0%,#e2e8f0 100%) !important; color:#475569 !important; border:0 !important; border-bottom:6px solid #cbd5e1 !important; box-shadow:none !important; cursor:not-allowed !important;
}
.dmxMap .dmxDiplomaMission.locked{ opacity:1 !important;
}
.dmxMap .dmxDiplomaMission.locked .dmxDiplomaKicker{ background:rgba(148,163,184,.13) !important; border-color:rgba(226,232,240,.16) !important; color:#e2e8f0 !important;
}
.dmxMission:nth-child(11){animation-delay:.64s !important;}
.dmxMission:nth-child(11) .dmxNode{animation-delay:.70s !important;}
@media(max-width:900px){
.dmxMap .dmxDiplomaMission{ grid-template-columns:82px minmax(0,1fr) !important; gap:20px !important; padding:26px 22px !important; }
.dmxMap .dmxDiplomaMission .dmxDiplomaNode{ width:82px !important; height:82px !important; border-radius:24px !important; font-size:30px !important; }
.dmxMap .dmxDiplomaMission .dmxDiplomaBtn, .dmxMap .dmxDiplomaMission .dmxDiplomaLockedBtn{ grid-column:1 / -1 !important; justify-self:stretch !important; width:100% !important; min-width:0 !important; }
}
@media(max-width:560px){
.dmxMap .dmxDiplomaMission{ grid-template-columns:1fr !important; text-align:left !important; padding:24px 18px !important; border-radius:26px !important; }
.dmxMap .dmxDiplomaMission .dmxDiplomaNode{ width:72px !important; height:72px !important; border-radius:22px !important; font-size:26px !important; }
.dmxMap .dmxDiplomaMission h2{ font-size:28px !important; }
.dmxMap .dmxDiplomaMission p{ font-size:15px !important; }
.dmxMap .dmxDiplomaMission .dmxMissionMeta{ gap:7px !important; }
.dmxMap .dmxDiplomaMission .dmxMissionMeta span{ font-size:11px !important; padding:7px 9px !important; }
}
@media(prefers-reduced-motion:reduce){
.dmxMap .dmxDiplomaMission::after{ animation:none !important; }
}
/* ========================================================= NIVELES DIPLOMA DOCUMOTORS MOBILE HEADER ONLY En móvil: solo badge+título a la derecha del icono. Descripción, etiquetas y botón quedan abajo ocupando todo el ancho. ========================================================= */
@media(max-width:560px){ .dmxMap .dmxDiplomaMission{ grid-template-columns:82px minmax(0,1fr) !important; align-items:center !important; gap:12px 16px !important; padding:18px 16px !important; min-height:0 !important; } .dmxMap .dmxDiplomaMission .dmxDiplomaNode{ grid-column:1 !important; grid-row:1 / span 2 !important; width:82px !important; height:82px !important; border-radius:24px !important; font-size:28px !important; margin:0 !important; align-self:center !important; } .dmxMap .dmxDiplomaMission .dmxDiplomaBody{ display:contents !important; } .dmxMap .dmxDiplomaMission .dmxDiplomaKicker{ grid-column:2 !important; grid-row:1 !important; align-self:end !important; margin:0 !important; padding:7px 10px !important; font-size:10px !important; max-width:max-content !important; } .dmxMap .dmxDiplomaMission h2{ grid-column:2 !important; grid-row:2 !important; align-self:start !important; font-size:24px !important; line-height:1.03 !important; margin:0 !important; } .dmxMap .dmxDiplomaMission p{ grid-column:1 / -1 !important; grid-row:3 !important; font-size:15px !important; line-height:1.38 !important; max-width:none !important; margin:4px 0 0 !important; } .dmxMap .dmxDiplomaMission .dmxMissionMeta{ grid-column:1 / -1 !important; grid-row:4 !important; gap:7px !important; margin-top:0 !important; } .dmxMap .dmxDiplomaMission .dmxMissionMeta span{ font-size:11px !important; padding:7px 9px !important; } .dmxMap .dmxDiplomaMission .dmxDiplomaBtn, .dmxMap .dmxDiplomaMission .dmxDiplomaLockedBtn{ grid-column:1 / -1 !important; grid-row:5 !important; width:100% !important; min-width:0 !important; margin-top:2px !important; }
}
/* ========================================================= DIPLOMA PROGRESS FLOAT MODAL Estadísticas directas y barras animadas para desbloquear diploma. ========================================================= */
.dmxDiplomaProgressOverlay{ position:fixed !important; inset:0 !important; z-index:2147483100 !important; display:grid !important; place-items:center !important; padding:20px !important; background:rgba(2,6,23,.68) !important; backdrop-filter:blur(12px) !important; -webkit-backdrop-filter:blur(12px) !important;
}
.dmxDiplomaProgressOverlay[hidden]{ display:none !important;
}
.dmxDiplomaProgressCard{ position:relative !important; width:min(560px,100%) !important; padding:30px 24px 24px !important; border-radius:28px !important; overflow:hidden !important; color:#fff !important; background: radial-gradient(circle at 0% 0%, rgba(251,191,36,.30), transparent 36%), radial-gradient(circle at 100% 10%, rgba(59,130,246,.24), transparent 42%), linear-gradient(135deg,#0f172a 0%,#172554 58%,#020617 100%) !important; border:1px solid rgba(251,191,36,.34) !important; box-shadow:0 34px 90px rgba(0,0,0,.52) !important; animation:dmxDiplomaModalIn .34s cubic-bezier(.2,.9,.2,1) both !important;
}
@keyframes dmxDiplomaModalIn{ from{opacity:0;transform:translateY(18px) scale(.965);filter:blur(5px)} to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
.dmxDiplomaProgressClose{ position:absolute !important; top:14px !important; right:14px !important; width:40px !important; height:40px !important; border:0 !important; border-radius:14px !important; background:rgba(255,255,255,.12) !important; color:#fff !important; display:flex !important; align-items:center !important; justify-content:center !important; cursor:pointer !important;
}
.dmxDiplomaProgressBadge{ width:max-content !important; max-width:100% !important; display:inline-flex !important; align-items:center !important; gap:8px !important; padding:8px 12px !important; border-radius:999px !important; background:rgba(251,191,36,.15) !important; border:1px solid rgba(251,191,36,.28) !important; color:#fde68a !important; font-size:12px !important; font-weight:1000 !important; letter-spacing:.045em !important; text-transform:uppercase !important;
}
.dmxDiplomaProgressCard h2{ margin:14px 0 18px !important; color:#fff !important; font-size:34px !important; line-height:1 !important; letter-spacing:-.05em !important; font-weight:1000 !important;
}
.dmxDiplomaProgressRows{ display:grid !important; gap:12px !important;
}
.dmxDiplomaProgressRow{ padding:14px !important; border-radius:18px !important; background:rgba(255,255,255,.10) !important; border:1px solid rgba(255,255,255,.13) !important;
}
.dmxDiplomaProgressTop{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; margin-bottom:10px !important;
}
.dmxDiplomaProgressTop span{ color:rgba(255,255,255,.78) !important; font-size:13px !important; font-weight:900 !important;
}
.dmxDiplomaProgressTop strong{ color:#fff !important; font-size:18px !important; font-weight:1000 !important; white-space:nowrap !important;
}
.dmxDiplomaMeter{ height:12px !important; border-radius:999px !important; background:rgba(15,23,42,.50) !important; overflow:hidden !important; box-shadow:inset 0 1px 4px rgba(0,0,0,.35) !important;
}
.dmxDiplomaMeter i{ display:block !important; height:100% !important; width:calc(var(--p) * 1%) !important; min-width:0 !important; border-radius:999px !important; background:linear-gradient(90deg,#38bdf8 0%,#22c55e 55%,#fde047 100%) !important; transform-origin:left center !important; animation:dmxDiplomaMeterFill .9s cubic-bezier(.2,.9,.2,1) both !important;
}
.dmxDiplomaProgressMain .dmxDiplomaMeter{ height:16px !important;
}
.dmxDiplomaProgressMain .dmxDiplomaMeter i{ background:linear-gradient(90deg,#f59e0b 0%,#fde047 45%,#22c55e 100%) !important;
}
@keyframes dmxDiplomaMeterFill{ from{transform:scaleX(0);filter:brightness(1.25)} to{transform:scaleX(1);filter:brightness(1)}
}
@media(max-width:560px){
.dmxDiplomaProgressOverlay{ padding:14px !important; }
.dmxDiplomaProgressCard{ padding:26px 18px 18px !important; border-radius:24px !important; }
.dmxDiplomaProgressCard h2{ font-size:28px !important; }
.dmxDiplomaProgressTop strong{ font-size:16px !important; }
}
@media(prefers-reduced-motion:reduce){
.dmxDiplomaProgressCard, .dmxDiplomaMeter i{ animation:none !important; }
}
/* DIPLOMA MODAL REOPEN FIX */
.dmxDiplomaProgressOverlay:not([hidden]){ display:grid !important;
}
.dmxDiplomaProgressOverlay:not([hidden]) .dmxDiplomaProgressCard{ display:block !important; visibility:visible !important; opacity:1 !important;
}
.dmxDiplomaProgressOverlay[hidden]{ display:none !important; visibility:hidden !important;
}
.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateActions .dmxBtn{ width:100% !important; min-height:58px !important; padding:15px 18px !important; border-radius:16px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:9px !important; font-size:15px !important; line-height:1 !important; font-weight:1000 !important; white-space:nowrap !important; box-shadow:none !important;
}
@media(max-width:560px){
.dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateActions .dmxBtn{ min-height:52px !important; padding:12px 8px !important; font-size:13px !important; }
}
/* ========================================================= DMX PLAN GATE XL FINAL Modal único de planes más grande y protagonista. ========================================================= */
@media(min-width:761px){ .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateCard, .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPracticeGate{ width:820px !important; min-width:820px !important; max-width:calc(100vw - 64px) !important; padding:52px 44px 38px !important; border-radius:30px !important; } .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateBadge, .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPracticeGateBadge{ margin-bottom:24px !important; padding:10px 18px !important; font-size:15px !important; } .dmxPlanGateModal[data-dmx-plan-gate-modal] h2{ max-width:720px !important; margin-bottom:22px !important; font-size:48px !important; line-height:.98 !important; letter-spacing:-.065em !important; } .dmxPlanGateModal[data-dmx-plan-gate-modal] p{ max-width:720px !important; margin-bottom:36px !important; font-size:22px !important; line-height:1.38 !important; } .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateActions, .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPracticeGateActions{ width:min(640px,100%) !important; gap:16px !important; } .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateActions .dmxBtn, .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPracticeGateActions .dmxBtn{ min-height:66px !important; border-radius:18px !important; font-size:17px !important; padding:18px 22px !important; } .dmxPlanGateModal[data-dmx-plan-gate-modal] .dmxPlanGateClose{ width:46px !important; height:46px !important; top:16px !important; right:16px !important; }
}
.dmxBtnDanger{ background:#ef4444 !important; color:#fff !important; border-bottom-color:#b91c1c !important;
}
@media(max-width:720px){
.dmxAdminModalRow form .dmxBtn{ width:100%; }
}
/* DMX_MODAL_HIDDEN_PLAN_OFFER_GUARD_V51E Blindaje global: evita que reglas display:flex/grid!important de modales pisen el atributo hidden y agrega alias explícito para dmxPlanOfferModal. */
.dmxPlanOfferModal[hidden],
.dmxPlanOfferModal[aria-hidden="true"],
.dmxPlanGateModal[data-dmx-plan-gate-modal][hidden],
.dmxPlanGateModal[data-dmx-plan-gate-modal][aria-hidden="true"],
.dmxPracticeGateOverlay[hidden],
.dmxPracticeGateOverlay[aria-hidden="true"],
.dmxPracticePremiumModal[hidden],
.dmxPracticePremiumModal[aria-hidden="true"],
.dmxStageReviewModalOverlay[hidden],
.dmxStageReviewModalOverlay[aria-hidden="true"],
.dmxDiplomaProgressOverlay[hidden],
.dmxDiplomaProgressOverlay[aria-hidden="true"],
.dmxGuestDemoModalOverlay[hidden],
.dmxGuestDemoModalOverlay[aria-hidden="true"],
.dmxPlanChangeModal[hidden],
.dmxPlanChangeModal[aria-hidden="true"],
.dmxGuestCheckoutModal[hidden],
.dmxGuestCheckoutModal[aria-hidden="true"],
.dmxAnnualInfoModal[hidden],
.dmxAnnualInfoModal[aria-hidden="true"],
.dmxCurrencyConfirmModalV44B[hidden],
.dmxCurrencyConfirmModalV44B[aria-hidden="true"],
.dmxCouponPendingModalV3[hidden],
.dmxCouponPendingModalV3[aria-hidden="true"],
.dmxPaymentMethodInfoOverlayV7[hidden],
.dmxPaymentMethodInfoOverlayV7[aria-hidden="true"]{ display:none!important; visibility:hidden!important; opacity:0!important; pointer-events:none!important;
}
.dmxAdminCacheModalActionsV51I5 .dmxBtn{ min-width:140px!important; justify-content:center!important;
}
@keyframes dmxAdminCachePopV51I5{ from{opacity:0;transform:translateY(10px) scale(.97);} to{opacity:1;transform:translateY(0) scale(1);}
}
@media(max-width:640px){
.dmxAdminCacheModalActionsV51I5 .dmxBtn{ width:100%!important; }
}
/* DMX_ADMIN_CLEAR_ASSETS_CACHE_MODAL_HIDDEN_FIX_V51I6 */
.dmxAdminCacheModalV51I5 [hidden],
.dmxAdminCacheModalV51I5 button[hidden],
.dmxAdminCacheModalV51I5 .dmxBtn[hidden]{ display:none!important;
}
/* DMX_STAGE_PICK_NUMBER_NO_SHADOW_CSS_V56G_END */ /* DMX_NODE_NO_3D_RIM_CSS_V56K_START */
/* Elimina la sombra y la base 3D inferior del nodo numérico de niveles. Mantiene el fondo/degradado original y la lógica visual de estados.
*/
body .dmxMap .dmxMission .dmxNode,
body .dmxPath .dmxMission .dmxNode,
body .dmxMission .dmxNode,
body .dmxPath .level .dmxNode,
body .dmxPath .dmxNode,
body .level .dmxNode,
body .dmxNode { box-shadow: none !important; text-shadow: none !important; border-bottom: none !important; border-bottom-width: 0 !important; border-bottom-style: none !important;
}
body .dmxMap .dmxMission .dmxNode::before,
body .dmxMap .dmxMission .dmxNode::after,
body .dmxPath .dmxMission .dmxNode::before,
body .dmxPath .dmxMission .dmxNode::after,
body .dmxMission .dmxNode::before,
body .dmxMission .dmxNode::after,
body .dmxPath .level .dmxNode::before,
body .dmxPath .level .dmxNode::after,
body .dmxPath .dmxNode::before,
body .dmxPath .dmxNode::after,
body .level .dmxNode::before,
body .level .dmxNode::after,
body .dmxNode::before,
body .dmxNode::after { box-shadow: none !important; text-shadow: none !important; border-bottom: none !important; border-bottom-width: 0 !important; border-bottom-style: none !important;
} /* DMX_NODE_SQUARE_LEVEL_LABEL_V59S_START */
/* Globo de nivel convertido en cuadrado redondeado con etiqueta interna. */
.dmxNode{ width:76px !important; min-width:76px !important; height:76px !important; min-height:76px !important; border-radius:20px !important; display:inline-flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:4px !important; line-height:1 !important; aspect-ratio:1 / 1 !important; overflow:hidden !important; text-align:center !important;
} .dmxNode::after{ content:"NIVEL"; display:block; font-size:10px; font-weight:950; letter-spacing:.105em; line-height:1; opacity:.86;
} @media (max-width: 640px){ .dmxNode{ width:64px !important; min-width:64px !important; height:64px !important; min-height:64px !important; border-radius:17px !important; gap:3px !important; } .dmxNode::after{ font-size:9px; letter-spacing:.09em; }
}
/* DMX_NODE_SQUARE_LEVEL_LABEL_V59S_END */ /* DMX_REAL_LEVEL_NAMES_RESPONSIVE_V59V_START */
.dmxMission h2{ max-width:100% !important; font-size:clamp(18px, 1.45vw, 25px) !important; line-height:1.12 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere !important; word-break:normal !important; hyphens:auto !important; text-wrap:balance;
} .dmxMissionMeta{ min-width:0 !important;
} @media (max-width: 780px){ .dmxMission h2{ font-size:clamp(17px, 5vw, 22px) !important; line-height:1.13 !important; letter-spacing:-.03em !important; }
} @media (max-width: 420px){ .dmxMission h2{ font-size:17px !important; line-height:1.16 !important; letter-spacing:-.02em !important; }
}
/* DMX_REAL_LEVEL_NAMES_RESPONSIVE_V59V_END */ /* DMX_V59W_MOBILE_LEVEL_SPACING_START */
@media (max-width: 768px){ .dmxMissionCard, .dmxMission{ overflow:hidden; } .dmxMissionCard .dmxMissionHead, .dmxMission .dmxMissionHead{ display:grid !important; grid-template-columns:auto minmax(0,1fr) !important; align-items:center !important; column-gap:16px !important; } .dmxMissionCard .dmxNode, .dmxMission .dmxNode{ align-self:center !important; margin-right:0 !important; } .dmxMissionCard .dmxMissionBody, .dmxMission .dmxMissionBody, .dmxMissionCard .dmxMissionContent, .dmxMission .dmxMissionContent{ min-width:0 !important; padding-top:4px !important; } .dmxMissionCard .dmxMissionBody h2, .dmxMission .dmxMissionBody h2, .dmxMissionCard .dmxMissionContent h2, .dmxMission .dmxMissionContent h2, .dmxMissionCard h2, .dmxMission h2{ margin:0 0 10px 0 !important; line-height:1.08 !important; overflow-wrap:anywhere !important; word-break:break-word !important; } .dmxMissionCard .dmxMissionMeta, .dmxMission .dmxMissionMeta, .dmxMissionCard .dmxProgressTag, .dmxMission .dmxProgressTag{ margin-top:0 !important; }
}
/* DMX_V59W_MOBILE_LEVEL_SPACING_END */ /* DMX_AVAILABLE_TAG_GREEN_V61J: etiqueta Disponible en /niveles/ apta para modo claro y oscuro. */
.dmxLevelAvailableTagV61J{ display:inline-flex; align-items:center; gap:8px; width:max-content; margin-top:8px; padding:7px 13px; border-radius:999px; border:1px solid rgba(34,197,94,.20); background:rgba(34,197,94,.12); color:#087a35; font-size:13px; font-weight:800; line-height:1; letter-spacing:.01em;
} .dmxLevelAvailableTagV61J i{ color:inherit; font-size:12px;
} html[data-theme="dark"] .dmxLevelAvailableTagV61J,
body[data-theme="dark"] .dmxLevelAvailableTagV61J,
body.dark .dmxLevelAvailableTagV61J,
body.dmxDark .dmxLevelAvailableTagV61J,
[data-bs-theme="dark"] .dmxLevelAvailableTagV61J{ border-color:rgba(74,222,128,.30); background:rgba(34,197,94,.18); color:#86efac;
} /* DMX_NIVELES_AVAILABLE_LOCKED_FIX_V61P Si el nivel está bloqueado, no mostrar"Disponible"."Bloqueado" usa icono y estilos aptos para modo claro/oscuro. */ .dmxLevelCard:has(.dmxLevelBlockedTagV61P) .dmxLevelAvailableTagV61J,
.dmxLevelItem:has(.dmxLevelBlockedTagV61P) .dmxLevelAvailableTagV61J,
.dmxLevelRow:has(.dmxLevelBlockedTagV61P) .dmxLevelAvailableTagV61J,
.dmxNivelCard:has(.dmxLevelBlockedTagV61P) .dmxLevelAvailableTagV61J,
.dmxCourseLevelCard:has(.dmxLevelBlockedTagV61P) .dmxLevelAvailableTagV61J{ display:none !important;
} .dmxLevelBlockedTagV61P{ display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; width:max-content !important; max-width:max-content !important; padding:7px 12px !important; border-radius:999px !important; border:1px solid rgba(100,116,139,.14) !important; background:rgba(100,116,139,.10) !important; color:#475569 !important; font-size:13px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:.01em !important; box-shadow:none !important; text-shadow:none !important;
} .dmxLevelBlockedTagV61P i{ color:inherit !important; font-size:12px !important; text-shadow:none !important;
} html[data-theme="dark"] .dmxLevelBlockedTagV61P,
body[data-theme="dark"] .dmxLevelBlockedTagV61P,
body.dark .dmxLevelBlockedTagV61P,
body.dmxDark .dmxLevelBlockedTagV61P,
[data-bs-theme="dark"] .dmxLevelBlockedTagV61P{ border-color:rgba(148,163,184,.22) !important; background:rgba(148,163,184,.13) !important; color:#cbd5e1 !important;
}


/* DMX_NIVELES_MOBILE_CARD_RHYTHM_V62I
   Ritmo móvil equivalente a tarjetas de etapas.
   Solo /niveles/: no toca HTML ni selectores de /etapas/.
*/
@media (max-width:850px){
  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission){
    display:grid !important;
    grid-template-columns:58px minmax(0,1fr) !important;
    grid-template-areas:
      "dmxBadge dmxBody"
      "dmxCta dmxCta" !important;
    gap:16px 18px !important;
    align-items:start !important;
    min-height:0 !important;
    padding:18px !important;
    border-radius:26px !important;
  }

  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) > .dmxNode{
    grid-area:dmxBadge !important;
    width:58px !important;
    min-width:58px !important;
    height:58px !important;
    min-height:58px !important;
    border-radius:20px !important;
    align-self:start !important;
    justify-self:start !important;
    margin:0 !important;
    font-size:calc(22px * var(--dmx-mobile-type-scale,1)) !important;
    line-height:1 !important;
  }

  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) > .dmxNode + div{
    grid-area:dmxBody !important;
    min-width:0 !important;
    width:100% !important;
    align-self:start !important;
    padding:0 !important;
    margin:0 !important;
  }

  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) h2{
    margin:0 0 10px !important;
    font-size:calc(23px * var(--dmx-mobile-type-scale,1)) !important;
    line-height:1.08 !important;
    letter-spacing:-.035em !important;
    text-align:left !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }

  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) .dmxMissionMeta{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:7px !important;
    margin:0 !important;
    min-width:0 !important;
  }

  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) .dmxLevelAvailableTagV61J,
  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) .dmxLevelBlockedTagV61P{
    margin:0 !important;
    padding:7px 13px !important;
    border-radius:999px !important;
    font-size:calc(12px * var(--dmx-mobile-type-scale,1)) !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) > form,
  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) > .dmxLockedBtn{
    grid-area:dmxCta !important;
    width:100% !important;
    min-width:0 !important;
    justify-self:stretch !important;
    margin:2px 0 0 !important;
  }

  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) > form .dmxBtn,
  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) > .dmxLockedBtn{
    width:100% !important;
    min-width:0 !important;
    min-height:52px !important;
    height:52px !important;
    border-radius:20px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:12px !important;
    font-size:calc(16px * var(--dmx-mobile-type-scale,1)) !important;
    line-height:1 !important;
    font-weight:950 !important;
    white-space:nowrap !important;
  }
}

@media (max-width:430px){
  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission){
    grid-template-columns:58px minmax(0,1fr) !important;
    gap:14px 16px !important;
    padding:16px !important;
    border-radius:24px !important;
  }

  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) h2{
    font-size:calc(22px * var(--dmx-mobile-type-scale,1)) !important;
    line-height:1.08 !important;
  }
}
/* DMX_NIVELES_MOBILE_CARD_RHYTHM_V62I_END */

/* DMX_NIVELES_MOBILE_META_TAGS_PC_SIZE_V62J
   En móvil, las etiquetas del meta usan tamaño pequeño tipo PC.
   No cambia layout, solo tamaño/padding de etiquetas en /niveles/.
*/
@media (max-width:850px){
  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) .dmxMissionMeta{
    gap:6px !important;
  }

  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) .dmxMissionMeta .dmxLevelAvailableTagV61J,
  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) .dmxMissionMeta .dmxLevelBlockedTagV61P,
  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) .dmxMissionMeta .dmxTag,
  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) .dmxMissionMeta span{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    width:auto !important;
    min-width:0 !important;
    max-width:max-content !important;
    min-height:24px !important;
    height:auto !important;
    padding:5px 10px !important;
    border-radius:999px !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    transform:none !important;
  }

  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) .dmxMissionMeta .dmxLevelAvailableTagV61J i,
  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) .dmxMissionMeta .dmxLevelBlockedTagV61P i,
  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) .dmxMissionMeta .dmxTag i,
  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) .dmxMissionMeta span i{
    font-size:12px !important;
    line-height:1 !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
  }
}
/* DMX_NIVELES_MOBILE_META_TAGS_PC_SIZE_V62J_END */

/* DMX_NIVELES_ETAPAS_META_TAG_EXACT_SIZE_V62K
   Congela tamaño real de etiquetas meta en /niveles/ móvil.
*/
@media (max-width:850px){
  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) .dmxMissionMeta > span,
  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) .dmxMissionMeta > .dmxTag,
  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) .dmxMissionMeta > .dmxLevelAvailableTagV61J,
  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) .dmxMissionMeta > .dmxLevelBlockedTagV61P{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    width:auto !important;
    min-width:0 !important;
    max-width:max-content !important;
    height:24px !important;
    min-height:24px !important;
    max-height:24px !important;
    padding:0 10px !important;
    gap:5px !important;
    border-radius:999px !important;
    font-size:12px !important;
    line-height:12px !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    white-space:nowrap !important;
    transform:none !important;
  }

  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) .dmxMissionMeta > span i,
  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) .dmxMissionMeta > .dmxTag i,
  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) .dmxMissionMeta > .dmxLevelAvailableTagV61J i,
  html body .dmxApp.dmxMap .dmxPath > article.dmxMission:not(.dmxDiplomaMission) .dmxMissionMeta > .dmxLevelBlockedTagV61P i{
    font-size:12px !important;
    line-height:12px !important;
    width:12px !important;
    height:12px !important;
    min-width:12px !important;
    min-height:12px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
  }
}
/* DMX_NIVELES_ETAPAS_META_TAG_EXACT_SIZE_V62K_END */