/* =========================================================
   MU EXP Calc — FULL LOUD THEME (v2)
   Ajustado: 3 KPIs + tabla sin EXP
   Scoped only to: body.page-mu-expcalc
   ========================================================= */

body.page-mu-expcalc{
  /* Neon palette */
  --n1:#b21aff;     /* violet */
  --n2:#ff2bd6;     /* pink */
  --n3:#27d17c;     /* green */
  --n4:#6aa6ff;     /* blue */
  --n5:#ffcc66;     /* gold */

  /* Surfaces / strokes */
  --strokeA: rgba(255,255,255,.14);
  --strokeB: rgba(255,255,255,.26);

  /* Spacing / sizes */
  --g2: 14px;
  --g3: 18px;
  --tap: 46px;
  --rLg: 22px;
  --rMd: 16px;

  /* Shadows */
  --shadow: 0 20px 80px rgba(0,0,0,.55);
  --shadow2: 0 28px 110px rgba(178,26,255,.18);

  position: relative;
}

/* Neon animated background (stronger & more colorful) */
body.page-mu-expcalc::before,
body.page-mu-expcalc::after{
  content:"";
  position: fixed;
  inset: -140px;
  pointer-events:none;
}
body.page-mu-expcalc::before{
  z-index:-2;
  background:
    radial-gradient(980px 580px at 14% 12%, rgba(178,26,255,.34), transparent 62%),
    radial-gradient(900px 520px at 86% 14%, rgba(255,43,214,.28), transparent 64%),
    radial-gradient(980px 620px at 45% 108%, rgba(39,209,124,.14), transparent 56%),
    radial-gradient(780px 520px at 94% 86%, rgba(106,166,255,.14), transparent 60%),
    radial-gradient(760px 520px at 10% 88%, rgba(255,204,102,.10), transparent 60%);
  filter: saturate(1.35) contrast(1.05);
  opacity: .98;
}
body.page-mu-expcalc::after{
  z-index:-1;
  background:
    radial-gradient(circle at 50% 0%, rgba(0,0,0,.10), rgba(0,0,0,.62) 70%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.50));
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference){
  body.page-mu-expcalc::before{
    animation: muNeonFloat 9s ease-in-out infinite alternate;
  }
  @keyframes muNeonFloat{
    0%   { transform: translate3d(0,0,0) scale(1); }
    100% { transform: translate3d(22px,-16px,0) scale(1.04); }
  }
}

/* Container */
body.page-mu-expcalc .wrap{
  width: min(1280px, calc(100% - 32px));
  margin: 18px auto 70px;
}

/* Internal header */
body.page-mu-expcalc .wrap > header{
  align-items: center;
  gap: var(--g3);
  margin: 14px 0 var(--g3);
}

body.page-mu-expcalc .title{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

body.page-mu-expcalc .title h1{
  margin:0;
  line-height: 1.10;
  letter-spacing: .25px;
  text-wrap: balance;
  background: linear-gradient(90deg, #ffffff, rgba(255,255,255,.82));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  filter: drop-shadow(0 10px 30px rgba(178,26,255,.20));
}

body.page-mu-expcalc .title p{
  margin:0;
  max-width: 90ch;
  line-height: 1.45;
  color: rgba(255,255,255,.78);
}

/* Badge chip: more visible */
body.page-mu-expcalc .badge{
  border: 1px solid var(--strokeA);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  box-shadow: var(--shadow);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
body.page-mu-expcalc .badge::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(90deg, rgba(178,26,255,.40), rgba(255,43,214,.34), rgba(106,166,255,.24));
  filter: blur(12px);
  opacity:.85;
}
body.page-mu-expcalc .badge > *{ position: relative; }
body.page-mu-expcalc .badge .dot{
  background: linear-gradient(135deg, var(--n1), var(--n2));
  box-shadow: 0 0 0 6px rgba(178,26,255,.16), 0 16px 44px rgba(178,26,255,.22);
}
@media (max-width: 980px){
  body.page-mu-expcalc .badge{ display:none; }
}

/* Grid: results wider */
body.page-mu-expcalc .grid{
  gap: var(--g3);
  align-items: start;
  grid-template-columns: 360px 1.70fr;
}
@media (max-width: 1100px){
  body.page-mu-expcalc .grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   CARDS: gradient border + neon hover + shine (strong)
   ========================================================= */
body.page-mu-expcalc .card{
  position: relative;
  border-radius: var(--rLg);
  padding: 1px; /* gradient frame */
  background: linear-gradient(135deg,
    rgba(178,26,255,.55),
    rgba(255,43,214,.34),
    rgba(106,166,255,.28),
    rgba(39,209,124,.20),
    rgba(255,204,102,.14)
  );
  box-shadow: var(--shadow), var(--shadow2);
  overflow: hidden;
}

body.page-mu-expcalc .card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(760px 280px at 12% 0%, rgba(178,26,255,.26), transparent 62%),
    radial-gradient(620px 320px at 92% 10%, rgba(255,43,214,.22), transparent 64%),
    radial-gradient(520px 260px at 40% 110%, rgba(39,209,124,.12), transparent 60%);
  opacity: .95;
  pointer-events:none;
}
body.page-mu-expcalc .card::after{
  content:"";
  position:absolute;
  top:-45%;
  left:-70%;
  width: 140%;
  height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  transform: rotate(18deg);
  opacity: 0;
  pointer-events:none;
}

body.page-mu-expcalc .card .hd,
body.page-mu-expcalc .card .body,
body.page-mu-expcalc .card .kpis,
body.page-mu-expcalc .card .tableWrap{
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
}

@media (prefers-reduced-motion: no-preference){
  body.page-mu-expcalc .card{
    transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
  }
  body.page-mu-expcalc .card:hover{
    transform: translateY(-4px);
    filter: saturate(1.12);
    box-shadow: 0 34px 140px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.06);
  }
  body.page-mu-expcalc .card:hover::after{
    opacity: 1;
    animation: muShine 1.05s ease forwards;
  }
  @keyframes muShine{
    0%   { transform: translateX(0) rotate(18deg); opacity: 0; }
    18%  { opacity: 1; }
    100% { transform: translateX(125%) rotate(18deg); opacity: 0; }
  }
}

/* Card header/body spacing */
body.page-mu-expcalc .card .hd{
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  border-radius: calc(var(--rLg) - 1px) calc(var(--rLg) - 1px) 0 0;
}
body.page-mu-expcalc .card .hd h2{
  font-size: 13.5px;
  letter-spacing: .25px;
}
body.page-mu-expcalc .card .hd .sub{
  color: rgba(255,255,255,.62);
}

body.page-mu-expcalc .card .body{
  padding: 18px;
  border-radius: 0 0 calc(var(--rLg) - 1px) calc(var(--rLg) - 1px);
}

/* Form comfort */
body.page-mu-expcalc .form{ gap: var(--g3); }
body.page-mu-expcalc .field{ gap: 8px; }
body.page-mu-expcalc .hint{ color: rgba(255,255,255,.62); line-height: 1.35; }

/* Inputs: white text + stronger neon focus */
body.page-mu-expcalc .input{
  min-height: var(--tap);
  padding: 12px 13px;
  border-radius: var(--rMd);
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: border-color .16s ease, box-shadow .16s ease, transform .06s ease, filter .16s ease;
}
body.page-mu-expcalc .input::placeholder{ color: rgba(255,255,255,.48); }
body.page-mu-expcalc .input:focus{
  border-color: rgba(255,43,214,.55);
  box-shadow:
    0 0 0 7px rgba(255,43,214,.15),
    0 16px 54px rgba(178,26,255,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
  filter: saturate(1.15);
}
body.page-mu-expcalc .input:active{ transform: translateY(1px); }
body.page-mu-expcalc .input[aria-invalid="true"]{
  border-color: rgba(255,92,122,.78);
  box-shadow: 0 0 0 7px rgba(255,92,122,.16);
}

/* Buttons: neon + shine */
body.page-mu-expcalc .actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: var(--g3);
}

body.page-mu-expcalc .btn{
  min-height: var(--tap);
  padding: 12px 14px;
  border-radius: var(--rMd);
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  position: relative;
  overflow:hidden;
  transition: transform .06s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, filter .16s ease;
}
body.page-mu-expcalc .btn::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-70%;
  width: 140%;
  height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transform: rotate(16deg);
  opacity: 0;
  pointer-events:none;
}
body.page-mu-expcalc .btn:hover{
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.09);
  box-shadow: 0 18px 60px rgba(0,0,0,.38);
  filter: saturate(1.10);
}
body.page-mu-expcalc .btn:hover::after{
  opacity: 1;
  animation: btnShine 0.9s ease forwards;
}
@keyframes btnShine{
  0%   { transform: translateX(0) rotate(16deg); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateX(125%) rotate(16deg); opacity: 0; }
}
body.page-mu-expcalc .btn:active{ transform: translateY(1px); }

body.page-mu-expcalc .btn.primary{
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(178,26,255,.98), rgba(255,43,214,.90));
  box-shadow: 0 20px 70px rgba(178,26,255,.26), 0 0 0 1px rgba(255,255,255,.06);
}
body.page-mu-expcalc .btn.primary:hover{
  box-shadow: 0 26px 90px rgba(178,26,255,.32), 0 0 0 1px rgba(255,255,255,.10);
}
body.page-mu-expcalc .btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}
@media (max-width: 520px){
  body.page-mu-expcalc .actions .btn{ width: 100%; justify-content:center; }
}

/* =========================================================
   KPIs: now 3 items — make them pop more
   ========================================================= */
body.page-mu-expcalc .kpis{
  display:grid;
  grid-template-columns: repeat(3, 1fr); /* IMPORTANT: 3 KPIs now */
  gap: var(--g2);
  padding: 16px 18px;
}
@media (max-width: 980px){
  body.page-mu-expcalc .kpis{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  body.page-mu-expcalc .kpis{ grid-template-columns: 1fr; }
}

body.page-mu-expcalc .kpi{
  position: relative;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--rMd);
  padding: 14px;
  min-height: 98px;
  overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
body.page-mu-expcalc .kpi::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(260px 140px at 12% 0%, rgba(178,26,255,.28), transparent 60%),
    radial-gradient(300px 160px at 92% 10%, rgba(255,43,214,.24), transparent 60%),
    radial-gradient(220px 120px at 70% 105%, rgba(106,166,255,.18), transparent 60%);
  opacity: .95;
  pointer-events:none;
}
body.page-mu-expcalc .kpi::after{
  content:"";
  position:absolute;
  left: 12px;
  bottom: 12px;
  width: 62px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--n1), var(--n2), var(--n4), var(--n3));
  box-shadow: 0 0 0 7px rgba(178,26,255,.08);
  opacity: .98;
}
body.page-mu-expcalc .kpi > *{ position: relative; }

body.page-mu-expcalc .kpi .k{
  color: rgba(255,255,255,.70);
  font-size: 12px;
  line-height: 1.2;
}
body.page-mu-expcalc .kpi .v{
  font-size: 19px;
  letter-spacing: .25px;
  line-height: 1.12;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.35));
}
body.page-mu-expcalc .kpi .s{
  color: rgba(255,255,255,.56);
  font-size: 12px;
}

/* Make "Tiempo total" the hero KPI (bigger) */
body.page-mu-expcalc #kpiTime{
  font-size: 22px;
}

/* =========================================================
   TABLE: 3 columns, neon hover, clearer spacing
   ========================================================= */
body.page-mu-expcalc .tableWrap{
  border-top: 1px solid rgba(255,255,255,.10);
  overflow:auto;
  max-height: 62vh;
  border-radius: 0 0 calc(var(--rLg) - 1px) calc(var(--rLg) - 1px);
}

/* Wide and comfortable */
body.page-mu-expcalc table{
  width: 100%;
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 0;
}

body.page-mu-expcalc thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: right;
  padding: 14px 18px;
  background: rgba(10,14,25,.95);
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.90);
  font-size: 12.5px;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.page-mu-expcalc thead th:first-child{ text-align:left; }

body.page-mu-expcalc tbody td{
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align:right;
  color: rgba(255,255,255,.90);
  font-size: 13.5px;
  white-space: nowrap;
}
body.page-mu-expcalc tbody td:first-child{ text-align:left; }

body.page-mu-expcalc tbody tr{
  transition: background .12s ease;
}
body.page-mu-expcalc tbody tr:hover td{
  background: rgba(255,43,214,.08);
}
body.page-mu-expcalc tbody tr:hover td:first-child{
  box-shadow: inset 4px 0 0 rgba(178,26,255,.55);
}

/* Empty state */
body.page-mu-expcalc .empty{
  padding: 18px 18px;
  color: rgba(255,255,255,.78);
  font-size: 13.5px;
}

/* Scrollbar neon */
body.page-mu-expcalc .tableWrap::-webkit-scrollbar{ height: 10px; width: 10px; }
body.page-mu-expcalc .tableWrap::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(178,26,255,.65), rgba(255,43,214,.52));
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.22);
  box-shadow: 0 0 22px rgba(178,26,255,.18);
}
body.page-mu-expcalc .tableWrap::-webkit-scrollbar-track{
  background: rgba(255,255,255,.05);
  border-radius: 999px;
}

/* Toast: stronger */
body.page-mu-expcalc .toast{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  box-shadow: 0 16px 60px rgba(0,0,0,.45);
}
body.page-mu-expcalc .toast.good{
  border-color: rgba(39,209,124,.44);
  background: rgba(39,209,124,.12);
  color: rgba(210,255,236,.98);
}
body.page-mu-expcalc .toast.warn{
  border-color: rgba(255,204,102,.44);
  background: rgba(255,204,102,.12);
  color: rgba(255,231,190,.98);
}
body.page-mu-expcalc .toast.bad{
  border-color: rgba(255,92,122,.44);
  background: rgba(255,92,122,.12);
  color: rgba(255,200,210,.98);
}
.hidden {
  display: none;
}
body.page-mu-expcalc .badge {
  margin-top: 12px; /* ajustá a gusto */
}
/* Fuerza dropdown nativo en modo oscuro real */
:root {
  color-scheme: dark;
}

body.page-mu-rutas-premium {
  color-scheme: dark;
}

/* Mejora contraste */
body.page-mu-rutas-premium select {
  background-color: #111827;
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,.15);
}

body.page-mu-rutas-premium select option {
  background-color: #111827;
  color: #e5e7eb;
}

/* Subtle mystic background glow (page-wide) */
body.page-mu-rutas-premium{
  background:
    linear-gradient(rgba(8,12,22,.85), rgba(8,12,22,.85)),
    url("/assets/img/mu/fondo_mu.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body.page-mu-expcalc-premium{
  background:
    linear-gradient(rgba(8,12,22,.85), rgba(8,12,22,.85)),
    url("/assets/img/mu/fondo_mu.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}




body.page-mu-rutas-premium .spot-map-preview{
  margin: 10px 0 12px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,14,24,.65);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}

body.page-mu-rutas-premium .spot-map-preview img{
  width: 100%;
  display: block;
  object-fit: cover;
  transition: transform .4s ease;
}

body.page-mu-rutas-premium .spot-map-preview:hover img{
  transform: scale(1.03);
}