/* ════════════════════════════════════════════════════════════════════
   FX AUTO-APPLY · v1.0
   Aplica efectos visuales automáticamente a elementos comunes
   sin necesidad de agregar clases manualmente.
   Incluir DESPUÉS de fx.css.
   ════════════════════════════════════════════════════════════════════ */

/* ── BUTTONS — glow + lift en todos los primary ── */
.btn-primary, .nav-cta, .cta-btn, button.btn.btn-primary, .btn.btn-primary,
[class*="btn-primary"]:not(.btn-icon),
button[type="submit"]:not(.fx-no-fx) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 4px 14px -4px rgba(230,71,34,0.35);
  transition: box-shadow .3s var(--fx-ease-out), transform .18s var(--fx-ease-spring), filter .2s !important;
}
.btn-primary:hover, .nav-cta:hover, .cta-btn:hover,
button.btn.btn-primary:hover, .btn.btn-primary:hover,
[class*="btn-primary"]:not(.btn-icon):hover,
button[type="submit"]:not(.fx-no-fx):hover {
  box-shadow: 0 8px 25px -4px rgba(230,71,34,0.55) !important;
  transform: translateY(-2px) !important;
  filter: brightness(1.05);
}
.btn-primary:active, .nav-cta:active, .cta-btn:active {
  transform: translateY(0) !important;
}

/* Shine effect en botones primarios */
.btn-primary::before, .nav-cta::before, .cta-btn::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left .55s;
  pointer-events: none;
  border-radius: inherit;
}
.btn-primary:hover::before, .nav-cta:hover::before, .cta-btn:hover::before {
  left: 100%;
}

/* ── BUTTONS GHOST — subtle hover ── */
.btn-ghost:hover, .btn.btn-ghost:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255,255,255,0.25) !important;
}

/* ── NAV LINKS — underline reveal ── */
.nav-link, .nav-links a, .ph-tab, header nav a:not(.nav-cta) {
  position: relative;
  transition: color .2s !important;
}
.nav-link::after, .nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 2px;
  background: var(--fx-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--fx-ease-out);
}
.nav-link:hover::after, .nav-links a:not(.nav-cta):hover::after {
  transform: scaleX(1);
}

/* ── CARDS — hover lift + shadow ── */
.card:not(.fx-no-fx),
.kpi:not(.fx-no-fx),
.team-card, .price-card, .post,
article.post,
.v-card, .doc-card, .ig-rule,
.payment-card, .faq-item:not([open]),
[class*="card-"]:not(.fx-no-fx) {
  transition: transform .25s var(--fx-ease-out),
              box-shadow .25s var(--fx-ease-out),
              border-color .25s !important;
}
.card:not(.fx-no-fx):hover,
.team-card:hover, .price-card:hover, article.post:hover,
.v-card:hover, .doc-card:hover, .payment-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 30px 60px -20px rgba(13,27,62,0.20) !important;
}

/* ── KPI cards — subtle scale on hover ── */
.kpi:not(.fx-no-fx):hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255,255,255,0.20) !important;
}

/* ── Hide ugly native number input spinners — global ── */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none !important;
  margin:0 !important;
  display:none !important;
}
input[type="number"]{
  -moz-appearance:textfield !important;
  appearance:textfield !important;
}

/* ── Hide native date input clear/spin buttons that look bad ── */
input[type="date"]::-webkit-clear-button,
input[type="date"]::-webkit-inner-spin-button{
  display:none;
}

/* ── INPUTS — focus glow ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
textarea:focus,
select:focus,
[contenteditable="true"]:focus {
  box-shadow: 0 0 0 4px rgba(230,71,34,0.12) !important;
  border-color: var(--fx-orange) !important;
  outline: none !important;
}

/* ── IMAGES — smooth zoom on hover (only direct cover/feature images) ── */
.cover img, .ph-img-wrap img, .stats-photo img,
.gphoto img, .historia-photo img, .team-card .photo img,
.fx-img-zoom {
  transition: transform .55s var(--fx-ease-out) !important;
}
.cover:hover img, .ph-img-wrap:hover img,
.stats-photo:hover img, .gphoto:hover img,
.team-card:hover .photo img {
  transform: scale(1.06) !important;
}

/* ── SECTION TITLES — smooth fade-in (auto-applied via JS observer) ── */
.section-title, .sec-title, .crm-head h1, .head h1, .hero h1,
h2[class*="section"], .mod-title {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--fx-ease-out), transform .8s var(--fx-ease-out);
}
.section-title.fx-in, .sec-title.fx-in, .crm-head h1.fx-in,
.head h1.fx-in, .hero h1.fx-in, h2[class*="section"].fx-in,
.mod-title.fx-in {
  opacity: 1;
  transform: translateY(0);
}

/* ── SCROLL behavior smooth ── */
html { scroll-behavior: smooth; }

/* ── FOCUS visible (accessibility) ── */
*:focus-visible {
  outline: 2px solid var(--fx-orange) !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Toasts más bonitas ── */
.toast, .sb-toast {
  animation: fx-toast-in .3s var(--fx-ease-spring);
  border-left: 3px solid var(--fx-orange) !important;
  backdrop-filter: blur(12px);
}

/* ── Modal overlays — auto blur backdrop ONLY when visible ── */
.modal-overlay.show {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ── Subtle entrance animation for any modal that becomes visible ── */
.modal-overlay.show .modal,
.modal-overlay.show [class*="modal"]:not(.modal-overlay) {
  animation: fx-modal-in .35s var(--fx-ease-spring);
}

/* ── Loading spinners — color brand ── */
.spinner, [class*="spinner"]:not(.fx-no-fx) {
  border-top-color: var(--fx-orange) !important;
}

/* ── Tab buttons — smooth indicator ── */
.tab.active, .ig-tab.active, button.active[class*="tab"] {
  transition: all .25s var(--fx-ease-out) !important;
}

/* ── Sidebar links subtle hover ── */
.sb-link:not(.active):hover {
  background: rgba(255,255,255,0.05) !important;
  transform: translateX(2px);
  transition: all .15s var(--fx-ease-out) !important;
}
.sb-link.active {
  position: relative;
}
.sb-link.active::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  background: var(--fx-orange);
  border-radius: 0 3px 3px 0;
}

/* ── Status pills — hover scale ── */
.status-pill, .pill, [class*="status-"]:not(input):not(.cell-status) {
  transition: transform .2s var(--fx-ease-spring);
}
.status-pill:hover, .pill:hover {
  transform: scale(1.05);
}

/* ── Selection highlight (brand color) ── */
::selection { background: var(--fx-orange); color: #fff; }
::-moz-selection { background: var(--fx-orange); color: #fff; }

/* ── Avatar circles smooth scale ── */
.avatar, .av, [class*="avatar"]:not([class*="wrap"]) {
  transition: transform .2s var(--fx-ease-spring);
}
.avatar:hover, .av:hover {
  transform: scale(1.1);
  z-index: 10;
}

/* ── Disabled state polish ── */
button:disabled, .btn:disabled, input:disabled {
  cursor: not-allowed !important;
  opacity: .5 !important;
  filter: grayscale(.3);
}

/* ── Smooth color transitions everywhere ── */
a, button, .clickable {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease;
}

/* ── Page-load fade-in ── */
body {
  animation: fx-page-fade .5s ease-out;
}

/* ── Scroll bar styling (where not already styled) ── */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.04);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb {
  background: rgba(13,27,62,0.20);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background .2s;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(230,71,34,0.6);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* Dark portal scrollbars */
body[style*="navy"], body[style*="0D1B3E"], body[style*="0a1430"],
.dark-portal, [data-theme="dark"] {
  ::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
  ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); }
}

/* ════════════════════════════════════════════════
   MOBILE SAFETY OVERRIDES — eliminar overlays raros
══════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .fx-theme-toggle,
  .fx-fab { display: none !important; }
  .fx-spotlight::before,
  .fx-card-spot::before,
  .btn-primary::before,
  .nav-cta::before,
  .cta-btn::before { display: none !important; }
  .fx-card-tilt { transform: none !important; }
  .fx-ripple { display: none !important; }
  [data-fx-mag] { transform: none !important; }
  .fx-orb,
  .fx-particles span { display: none !important; }
  /* Defensive: hide any z-index 9999 floating element from FX */
  .fx-banner.fx-mobile-hide,
  .fx-hover-overlay { display: none !important; }
}