/* ──────────────────────────────────────────────────────────────────────────
   DX Private — capa de interacción compartida (dx-ui)
   Additiva: no redefine el layout de cada página, solo añade animaciones de
   entrada, micro-interacciones, glow al cursor, selects y el control segmentado.
   Pensada para cargarse DESPUÉS del <style> inline de cada página.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Scroll reveal ──────────────────────────────────────────────────────────
   Solo se oculta cuando el JS marcó <html class="dx-js">, así sin JS todo se
   ve igual (nada queda invisible por error). */
html.dx-js [data-reveal]{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}
html.dx-js [data-reveal="left"]  {transform:translateX(-26px)}
html.dx-js [data-reveal="right"] {transform:translateX(26px)}
html.dx-js [data-reveal="scale"] {transform:scale(.95)}
html.dx-js [data-reveal="fade"]  {transform:none}
html.dx-js [data-reveal].in{opacity:1;transform:none}

/* ── Glow que sigue al cursor ───────────────────────────────────────────────
   El JS añade .dx-glow e inyecta un <i class="dx-gl"> como primer hijo. */
.dx-glow{position:relative;overflow:hidden}
.dx-glow > *{position:relative;z-index:1}
.dx-glow > .dx-gl{
  position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .35s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.09), transparent 60%);
}
.dx-glow:hover > .dx-gl{opacity:1}
/* un borde que se ilumina sutil al pasar el cursor */
.dx-glow::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  z-index:2;opacity:0;transition:opacity .35s ease;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.dx-glow:hover::after{opacity:1}

/* ── Botones: feedback de pulsación + brillo ────────────────────────────────*/
.btn,.plan-btn,.nav-btn,.btn-copy,.gate-btn,.dl-btn,.dl-btn *,.cta a,.pricing-more,
.nav-link,.nav-tab,.btn-login{
  transition:transform .15s ease, background .18s ease, color .18s ease,
             border-color .18s ease, box-shadow .28s ease;
}
.btn:active,.plan-btn:active,.nav-btn:active,.btn-copy:active,.gate-btn:active,
.dl-btn:active,.btn-login:active{transform:translateY(1px) scale(.985)}
.nav-btn:hover,.btn-white:hover,.gate-btn:hover,.btn-copy:hover,.btn-login:hover,
.plan.featured .plan-btn:hover{box-shadow:0 10px 30px rgba(255,255,255,.16)}
.plan-btn:hover{box-shadow:0 8px 24px rgba(255,255,255,.07)}

/* ── Focus visible (teclado) — anillo legible en el tema oscuro ─────────────*/
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px #000, 0 0 0 4px rgba(255,255,255,.45);
}

/* ── Selects nativos con flecha propia ──────────────────────────────────────*/
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-opacity='0.6'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
  padding-right:34px!important;cursor:pointer;
}
select option{background:#0a0a0a;color:#fff}

/* ── Inputs: foco con un leve glow ──────────────────────────────────────────*/
.field input:focus,.field select:focus,.field textarea:focus,
.search:focus,.gate-input:focus,#keyInput:focus{
  box-shadow:0 0 0 3px rgba(255,255,255,.06);
}

/* ── Control segmentado (toggle) — componente nuevo ─────────────────────────*/
.dx-seg{
  display:inline-flex;gap:2px;padding:4px;position:relative;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
}
.dx-seg button{
  position:relative;z-index:1;border:none;background:none;cursor:pointer;
  padding:8px 20px;border-radius:999px;white-space:nowrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.55);transition:color .25s ease;
}
.dx-seg button:hover{color:rgba(255,255,255,.85)}
.dx-seg button.active{color:#000}
.dx-seg .dx-seg-pill{
  position:absolute;top:4px;bottom:4px;left:0;z-index:0;border-radius:999px;background:#fff;
  box-shadow:0 4px 16px rgba(255,255,255,.18);
  transition:transform .32s cubic-bezier(.16,1,.3,1), width .32s cubic-bezier(.16,1,.3,1);
}
.dx-seg-tag{
  font-family:var(--mono);font-size:8px;letter-spacing:.06em;margin-left:6px;
  padding:2px 6px;border-radius:999px;background:rgba(61,214,140,.15);color:#3dd68c;
  vertical-align:middle;
}
.dx-seg button.active .dx-seg-tag{background:rgba(0,0,0,.12);color:#111}

/* precios que cambian: pequeña animación al actualizar */
.plan-price,.m-num{transition:opacity .2s ease, transform .2s ease}
.dx-price-flip{animation:dxPriceFlip .4s ease}
@keyframes dxPriceFlip{
  0%{opacity:0;transform:translateY(8px)}
  100%{opacity:1;transform:none}
}

/* ── Nav links: subrayado que crece en hover ────────────────────────────────*/
.nav-link,.nav-tab{position:relative}
.nav-link::after,.nav-tab::after{
  content:'';position:absolute;left:14px;right:14px;bottom:3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;opacity:.5;
  transition:transform .25s ease;
}
.nav-link:hover::after,.nav-tab:hover::after{transform:scaleX(1)}
.nav-link.active::after,.nav-tab.active::after{display:none}
/* El botón pill "Iniciar sesión" nunca lleva subrayado (ni el animado ni el
   underline nativo que se colaba en /precios por falta de reset). */
.nav-btn{text-decoration:none!important}
.nav-btn::after{display:none!important}

/* ── Dropdown propio (reemplaza el <select> nativo, feo en Windows) ──────────
   El <select> real queda oculto pero vivo: la lógica sigue leyendo su value. */
.dx-select{position:relative;width:100%}
.dx-select-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:#fff;font-size:13px;font-family:var(--font);
  cursor:pointer;text-align:left;transition:border-color .18s, box-shadow .18s;
}
.dx-select-trigger:hover{border-color:rgba(255,255,255,.22)}
.dx-select.open .dx-select-trigger{border-color:rgba(255,255,255,.3);box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.dx-select-trigger::after{
  content:'';width:11px;height:11px;flex-shrink:0;opacity:.6;transition:transform .2s;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>") no-repeat center/contain;
}
.dx-select.open .dx-select-trigger::after{transform:rotate(180deg)}
.dx-select-menu{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  background:#0d0d0d;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:6px;
  max-height:230px;overflow-y:auto;box-shadow:0 22px 54px rgba(0,0,0,.65);
  animation:dxModalIn .16s ease;
}
.dx-select-opt{
  display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;border:none;
  background:none;color:rgba(255,255,255,.72);font-size:13px;font-family:var(--font);
  cursor:pointer;transition:background .12s, color .12s;
}
.dx-select-opt:hover{background:rgba(255,255,255,.08);color:#fff}
.dx-select-opt.active{background:rgba(255,255,255,.14);color:#fff}

/* ── Datepicker propio (reemplaza el calendario nativo de type=date) ─────────*/
.dx-date{position:relative;width:100%}
.dx-date-input{cursor:pointer}
.dx-date-pop{
  position:absolute;top:calc(100% + 6px);left:0;z-index:60;width:272px;max-width:100%;
  background:#0d0d0d;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px;
  box-shadow:0 22px 54px rgba(0,0,0,.65);animation:dxModalIn .16s ease;
}
.dx-date-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.dx-date-title{font-family:var(--display);font-size:14px;font-weight:800;text-transform:capitalize}
.dx-date-nav{display:flex;gap:4px}
.dx-date-nav button{
  width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.7);cursor:pointer;display:grid;place-items:center;transition:all .15s;
}
.dx-date-nav button:hover{border-color:rgba(255,255,255,.3);color:#fff;background:rgba(255,255,255,.07)}
.dx-date-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dx-date-dow{
  font-family:var(--mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(255,255,255,.3);text-align:center;padding:4px 0 6px;
}
.dx-date-day{
  aspect-ratio:1;border:none;background:none;border-radius:8px;cursor:pointer;
  font-family:var(--font);font-size:12px;color:rgba(255,255,255,.75);transition:background .12s,color .12s;
}
.dx-date-day:hover{background:rgba(255,255,255,.1);color:#fff}
.dx-date-day.other{color:rgba(255,255,255,.22)}
.dx-date-day.today{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.dx-date-day.sel{background:#fff;color:#000;font-weight:600}
.dx-date-foot{display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.dx-date-foot button{
  background:none;border:none;cursor:pointer;font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.45);transition:color .15s;
}
.dx-date-foot button:hover{color:#fff}

/* ── Grupo de botones (rango, expiración) ───────────────────────────────────*/
.dx-btngroup{display:flex;flex-wrap:wrap;gap:6px}
.dx-btngroup button{
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.6);font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;transition:all .15s;
}
.dx-btngroup button:hover{border-color:rgba(255,255,255,.3);color:#fff}
.dx-btngroup button.active{background:#fff;color:#000;border-color:#fff;box-shadow:0 4px 14px rgba(255,255,255,.14)}

/* ── Transición de página (solo en páginas públicas) ────────────────────────*/
html.dx-page body{animation:dxPageIn .55s cubic-bezier(.16,1,.3,1) both}
@keyframes dxPageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html.dx-page.dx-leaving body{animation:dxPageOut .3s ease forwards}
@keyframes dxPageOut{to{opacity:0;transform:translateY(-8px)}}

@media (prefers-reduced-motion: reduce){
  html.dx-page body,html.dx-page.dx-leaving body{animation:none!important}
}

/* ── Modales: entrada suave (owner) ─────────────────────────────────────────*/
.modal-bg{animation:dxModalBg .25s ease}
.modal-bg .modal{animation:dxModalIn .35s cubic-bezier(.16,1,.3,1)}
@keyframes dxModalBg{from{opacity:0}to{opacity:1}}
@keyframes dxModalIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

/* ── Filas de tabla (owner): aparición escalonada ───────────────────────────*/
tbody tr{animation:dxRowIn .4s ease both}
@keyframes dxRowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Respeto a quienes prefieren menos movimiento ───────────────────────────*/
@media (prefers-reduced-motion: reduce){
  html.dx-js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .dx-glow > .dx-gl,.dx-glow::after{display:none}
  tbody tr{animation:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}