/* =========================================================
   WELCOME GLOBAL THEME TOKENS
   Preparado para Dark / Light
========================================================= */

:root{
  --welcome-bg: #050b18;
  --welcome-bg-2: #081225;

  --welcome-surface: rgba(255,255,255,.045);
  --welcome-surface-2: rgba(255,255,255,.07);
  --welcome-surface-strong: rgba(15,24,46,.88);

  --welcome-border: rgba(255,255,255,.09);
  --welcome-border-strong: rgba(0,212,255,.28);

  --welcome-text: rgba(255,255,255,.96);
  --welcome-text-soft: rgba(232,240,255,.74);
  --welcome-text-muted: rgba(220,236,255,.58);

  --welcome-primary: #00d4ff;
  --welcome-primary-2: #1594ff;
  --welcome-purple: #7b4dff;

  --welcome-radius-sm: 14px;
  --welcome-radius-md: 20px;
  --welcome-radius-lg: 30px;

  --welcome-shadow: 0 24px 70px rgba(0,0,0,.38);
  --welcome-shadow-soft: 0 16px 40px rgba(0,0,0,.24);
}

/* futura versión light */
html.theme-light{
  --welcome-bg: #f4f8ff;
  --welcome-bg-2: #eaf2ff;

  --welcome-surface: rgba(255,255,255,.82);
  --welcome-surface-2: rgba(255,255,255,.96);
  --welcome-surface-strong: rgba(255,255,255,.92);

  --welcome-border: rgba(15,23,42,.10);
  --welcome-border-strong: rgba(0,140,255,.28);

  --welcome-text: rgba(15,23,42,.96);
  --welcome-text-soft: rgba(51,65,85,.76);
  --welcome-text-muted: rgba(71,85,105,.62);

  --welcome-primary: #008cff;
  --welcome-primary-2: #005cff;
  --welcome-purple: #7057ff;

  --welcome-shadow: 0 24px 60px rgba(15,23,42,.12);
  --welcome-shadow-soft: 0 16px 36px rgba(15,23,42,.10);
}
/* ===== WELCOMEEEE ===== */
/* =========================================================
  WELCOME WEB GSM HERO PREMIUM — DARK ELEGANTE / DISCRETO
========================================================= */

.hero-premium{
  position: relative;
  overflow: hidden;
  padding: 28px 0 18px;
  min-height: calc(100vh - 74px);
  display: flex;
  align-items: center;
  background:
    radial-gradient(680px 420px at 12% 42%, rgba(0,212,255,.075), transparent 68%),
    radial-gradient(760px 460px at 88% 22%, rgba(0,105,255,.085), transparent 66%),
    radial-gradient(640px 380px at 82% 92%, rgba(110,65,255,.075), transparent 70%),
    linear-gradient(135deg, #050b18 0%, #070d1d 44%, #090d20 72%, #100929 100%);
}

.hero-bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
}

.hero-grid{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: .38;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.20), rgba(0,0,0,.50));
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.20), rgba(0,0,0,.50));
}

.hero-glow{
  position: absolute;
  border-radius: 999px;
  filter: blur(72px);
  opacity: .18;
}

.hero-glow-1{
  width: 480px;
  height: 480px;
  left: -210px;
  top: 100px;
  background: var(--welcome-primary);
}

.hero-glow-2{
  width: 560px;
  height: 560px;
  right: -240px;
  top: -150px;
  background: var(--welcome-purple);
}

.hero-premium .container-xxl{
  position: relative;
  z-index: 2;
}

.hero-premium .row{
  min-height: 560px;
  align-items: center !important;
  transform: translateY(-18px);
}

.hero-left-fill{
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-badge{
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 11px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  color: var(--welcome-text-soft);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 12px 28px rgba(0,0,0,.16);
}

.hero-badge .dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--welcome-primary);
  box-shadow:
    0 0 0 5px rgba(0,212,255,.10),
    0 0 15px rgba(0,212,255,.85),
    0 0 26px rgba(0,212,255,.38);
  animation: welcomePulseDot 1.9s ease-in-out infinite;
}

@keyframes welcomePulseDot{
  0%, 100%{
    transform: scale(1);
    box-shadow:
      0 0 0 5px rgba(0,212,255,.08),
      0 0 14px rgba(0,212,255,.72),
      0 0 24px rgba(0,212,255,.32);
  }
  50%{
    transform: scale(1.14);
    box-shadow:
      0 0 0 8px rgba(0,212,255,.13),
      0 0 20px rgba(0,212,255,.92),
      0 0 34px rgba(0,212,255,.48);
  }
}

.hero-title{
  margin: 18px 0 14px;
  color: var(--welcome-text);
  font-size: clamp(2.75rem, 4.6vw, 4.55rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.04em;
  text-shadow: 0 18px 50px rgba(0,0,0,.32);
}

.hero-title .accent{
  background: linear-gradient(
    135deg,
    #8be9ff 0%,
    #00d4ff 45%,
    #3a8cff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

.hero-subtitle{
  margin: 0;
  color: rgba(255,255,255,.92);
  font-size: clamp(.92rem, 1.12vw, 1.08rem);
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  max-width: 720px;
}

.hero-subtitle .accent-mini{
  color: #67dfff;
  font-weight: 900;
}

.hero-text{
  margin-top: 24px !important;
  max-width: 650px;
  color: rgba(255,255,255,.76);
  font-size: 1rem;
  line-height: 1.78;
}

.hero-text strong{
  color: #ffffff;
  font-weight: 700;
}

.hero-premium .d-flex.flex-wrap.gap-2.mt-4{
  gap: 12px !important;
  margin-top: 28px !important;
}

.hero-btn-primary,
.hero-btn-secondary,
.hero-btn-ghost{
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  padding: 0 28px;
  font-weight: 850;
  letter-spacing: .01em;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.hero-btn-primary{
  min-width: 250px;
  color: #fff;
  border: 0;
  background: linear-gradient(135deg, var(--welcome-primary), var(--welcome-primary-2));
  box-shadow:
    0 18px 42px rgba(0,212,255,.22),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.hero-btn-secondary,
.hero-btn-ghost{
  min-width: 150px;
  color: var(--welcome-text);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
}

.hero-btn-primary:hover,
.hero-btn-secondary:hover,
.hero-btn-ghost:hover{
  transform: translateY(-2px);
  color: #fff;
}

.hero-btn-primary:hover{
  box-shadow:
    0 24px 52px rgba(0,212,255,.30),
    inset 0 1px 0 rgba(255,255,255,.20);
}

.hero-btn-secondary:hover,
.hero-btn-ghost:hover{
  border-color: rgba(0,212,255,.26);
  background: rgba(255,255,255,.07);
  box-shadow: 0 16px 34px rgba(0,0,0,.22);
}

.hero-stats{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px !important;
}

.stat{
  min-width: 170px;
  padding: 14px 16px;
  border-radius: 18px;
  background:
    radial-gradient(220px 120px at 10% 0%, rgba(0,212,255,.055), transparent 65%),
    rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.085);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 14px 30px rgba(0,0,0,.14);
}

.stat-value{
  color: var(--welcome-text);
  font-weight: 900;
  letter-spacing: .06em;
}

.stat-label{
  margin-top: 4px;
  color: var(--welcome-text-muted);
  font-size: .82rem;
}

/* Panel derecho */
.hero-card{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  transform: translateY(-10px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.022));
  border: 1px solid rgba(255,255,255,.095);
  box-shadow:
    0 28px 80px rgba(0,0,0,.34),
    0 0 0 1px rgba(0,212,255,.025),
    inset 0 1px 0 rgba(255,255,255,.055);
}

.hero-card::before{
  content: "";
  position: absolute;
  inset: -1px;
  background:
    radial-gradient(500px 220px at 30% 0%, rgba(0,212,255,.10), transparent 62%),
    radial-gradient(420px 220px at 95% 15%, rgba(123,77,255,.09), transparent 66%);
  pointer-events: none;
  z-index: 0;
}

.hero-card > *{
  position: relative;
  z-index: 1;
}

.hero-banner-carousel{
      border-radius: 18px 18px 0 0;
      overflow: hidden;
      min-height: 320px;
  }

.hero-banner-img{
  width: 100%;
  height: clamp(380px, 40vw, 560px);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  border-radius: 18px 18px 0 0;
}

.hero-banner-carousel::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.0), rgba(0,0,0,.35));
    pointer-events: none;
}

.hero-card-bottom{
  min-height: 54px;
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,.085);
  color: var(--welcome-text-muted);
  font-size: .86rem;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(6,12,26,.50);
  backdrop-filter: blur(12px);
}

.hero-card-bottom .mini-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--welcome-primary);
  box-shadow:
    0 0 0 5px rgba(0,212,255,.09),
    0 0 18px rgba(0,212,255,.75);
}

.hero-banner-empty{
      height: 320px;
      display:flex;
      flex-direction: column;
      justify-content:center;
      padding: 20px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      color: rgba(255,255,255,.8);
  }

.hero-banner-empty-title{
      font-weight: 800;
      color: #fff;
      margin-bottom: 6px;
  }

.hero-banner-empty-sub{
      color: rgba(255,255,255,.65);
      font-size: 13px;
  }

/* Responsive */
@media (max-width: 991.98px){
  .hero-premium{
    padding: 42px 0 54px;
    min-height: auto;
  }

  .hero-premium .row{
    min-height: auto;
    transform: none;
  }

  .hero-left-fill{
    max-width: 100%;
  }

  .hero-title{
    font-size: clamp(2.55rem, 10vw, 4rem);
  }

  .hero-subtitle{
    font-size: .92rem;
  }

  .hero-card{
    transform: none;
  }

  .hero-banner-carousel{
    min-height: 360px;
  }

  .hero-banner-img{
    height: 420px;
  }
}

@media (max-width: 575.98px){

  .hero-premium{
    padding: 28px 0 36px;
  }

  .hero-badge{
    font-size: .66rem;
    padding: 8px 14px;
    gap: 9px;
  }

  .hero-title{
    font-size: clamp(2.2rem, 9vw, 3rem);
    margin: 14px 0 10px;
  }

  .hero-subtitle{
    font-size: .84rem;
    line-height: 1.45;
    letter-spacing: .07em;
  }

  .hero-text{
    font-size: .94rem;
    line-height: 1.65;
    margin-top: 18px !important;
  }

  .hero-premium .d-flex.flex-wrap.gap-2.mt-4{
    margin-top: 20px !important;
    gap: 10px !important;
  }

  .hero-btn-primary,
  .hero-btn-secondary,
  .hero-btn-ghost{
    width: 100%;
    min-width: 100%;
    min-height: 48px;
    padding: 0 18px;
    font-size: .92rem;
    border-radius: 16px;
  }

  .hero-btn-primary{
    min-height: 50px;
  }

  .hero-stats{
    margin-top: 18px !important;
    gap: 10px;
  }

  .stat{
    width: 100%;
    min-width: 100%;
    padding: 12px 14px;
    border-radius: 16px;
  }

  .stat-value{
    font-size: .95rem;
  }

  .stat-label{
    font-size: .78rem;
  }

  .hero-card{
    margin-top: 24px;
    transform: none;
  }

  .hero-banner-img{
    height: 300px;
  }

  .hero-card-bottom{
    min-height: 46px;
    padding: 12px 14px;
    font-size: .78rem;
  }
   .hero-premium .d-flex.flex-wrap.gap-2.mt-4{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
  }

  .hero-btn-primary{
    grid-column: 1 / -1;
  }

  .hero-btn-secondary,
  .hero-btn-ghost{
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    border-radius: 16px !important;
    padding: 0 12px !important;
    font-size: .88rem !important;
  }

  .hero-stats{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
    margin-top: 18px !important;
  }

  .hero-stats .stat{
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
  }

  .hero-stats .stat:nth-child(3){
    grid-column: 1 / -1;
  }
}

/* =========================================================
   WELCOME — NUESTROS SERVICIOS PREMIUM
========================================================= */

.services-section{
  position: relative;
  overflow: hidden;
  padding: 42px 0 78px !important;
  background:
    radial-gradient(680px 420px at 12% 20%, rgba(0,212,255,.055), transparent 68%),
    radial-gradient(760px 460px at 88% 8%, rgba(110,65,255,.055), transparent 70%),
    linear-gradient(180deg, #050b18 0%, #07101f 48%, #060c19 100%);
}

.services-section::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: .26;
  pointer-events: none;
}

.services-section .container-xxl{
  position: relative;
  z-index: 2;
}

.services-head{
  max-width: 820px;
  margin: 0 auto 44px;
}

.services-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: -.025em;
  color: var(--welcome-text);
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.05;
}

.services-title-accent{
  background: linear-gradient(135deg, #8be9ff 0%, #00d4ff 45%, #3a8cff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

.services-subtitle{
  margin-top: 14px;
  color: var(--welcome-text-muted);
  font-size: 1rem;
  line-height: 1.7;
}

.service-card{
  position: relative;
  height: 100%;
  min-height: 164px;
  display: flex;
  gap: 18px;
  padding: 22px;
  border-radius: 24px;
  text-decoration: none;
  overflow: hidden;
  background:
    radial-gradient(320px 160px at 10% 10%, rgba(0,212,255,.055), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.022));
  border: 1px solid rgba(255,255,255,.085);
  box-shadow:
    0 18px 46px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.service-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(0,212,255,.08), transparent 38%),
    radial-gradient(280px 140px at 90% 20%, rgba(110,65,255,.08), transparent 70%);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}

.service-card:hover{
  transform: translateY(-4px);
  border-color: rgba(0,212,255,.24);
  background:
    radial-gradient(340px 170px at 10% 10%, rgba(0,212,255,.075), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.026));
  box-shadow:
    0 24px 60px rgba(0,0,0,.27),
    0 0 28px rgba(0,212,255,.055),
    inset 0 1px 0 rgba(255,255,255,.055);
}

.service-card:hover::before{
  opacity: 1;
}

.service-card-highlight{
  border-color: rgba(0,212,255,.18);
  background:
    radial-gradient(360px 180px at 12% 12%, rgba(0,212,255,.09), transparent 68%),
    linear-gradient(180deg, rgba(0,212,255,.045), rgba(255,255,255,.025));
}

.service-icon{
  position: relative;
  z-index: 2;
  width: 62px;
  min-width: 62px;
  height: 62px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 20%, rgba(0,212,255,.22), transparent 62%),
    rgba(0,212,255,.075);
  border: 1px solid rgba(0,212,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 14px 30px rgba(0,0,0,.18);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.service-card:hover .service-icon{
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(0,212,255,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 16px 34px rgba(0,0,0,.22),
    0 0 22px rgba(0,212,255,.12);
}

.service-icon i{
  font-size: 22px;
  color: var(--welcome-primary);
  text-shadow: 0 0 18px rgba(0,212,255,.28);
}

/* Colores individuales para cards de servicios */
.service-card .service-icon{
  width: 56px;
  min-width: 56px;
  height: 56px;
  border-radius: 18px;
}

.service-card .service-icon i{
  font-size: 20px;
}

/* 1 IMEI */
.services-section .row > div:nth-child(1) .service-icon{
  background: rgba(0,212,255,.10);
  border-color: rgba(0,212,255,.28);
}
.services-section .row > div:nth-child(1) .service-icon i{
  color: #00d4ff;
}

/* 2 Server */
.services-section .row > div:nth-child(2) .service-icon{
  background: rgba(80,150,255,.10);
  border-color: rgba(80,150,255,.28);
}
.services-section .row > div:nth-child(2) .service-icon i{
  color: #5aa8ff;
}

/* 3 Remote */
.services-section .row > div:nth-child(3) .service-icon{
  background: rgba(80,255,210,.10);
  border-color: rgba(80,255,210,.24);
}
.services-section .row > div:nth-child(3) .service-icon i{
  color: #4fffd2;
}

/* 4 Unlock */
.services-section .row > div:nth-child(4) .service-icon{
  background: rgba(255,190,60,.10);
  border-color: rgba(255,190,60,.26);
}
.services-section .row > div:nth-child(4) .service-icon i{
  color: #ffbf3f;
}

/* 5 FRP */
.services-section .row > div:nth-child(5) .service-icon{
  background: rgba(145,95,255,.12);
  border-color: rgba(145,95,255,.30);
}
.services-section .row > div:nth-child(5) .service-icon i{
  color: #9b6cff;
}

/* 6 Reseller */
.services-section .row > div:nth-child(6) .service-icon{
  background: rgba(255,80,170,.11);
  border-color: rgba(255,80,170,.28);
}
.services-section .row > div:nth-child(6) .service-icon i{
  color: #ff5bb8;
}

.service-body{
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.service-name{
  color: var(--welcome-text);
  font-weight: 900;
  font-size: 1.12rem;
  line-height: 1.25;
  letter-spacing: .01em;
}

.service-desc{
  color: var(--welcome-text-muted);
  font-size: .92rem;
  line-height: 1.65;
  max-width: 46ch;
}

.service-cta{
  margin-top: auto;
  color: var(--welcome-primary);
  font-weight: 850;
  font-size: .88rem;
  letter-spacing: .01em;
  transition: transform .2s ease, color .2s ease;
}

.service-card:hover .service-cta{
  color: #69e6ff;
  transform: translateX(3px);
}

/* Mobile */
@media (max-width: 767.98px){
  .services-section{
    padding: 56px 0 64px !important;
  }

  .services-head{
    margin-bottom: 28px;
  }

  .services-title{
    font-size: clamp(1.85rem, 8vw, 2.5rem);
  }

  .services-subtitle{
    font-size: .94rem;
  }

  .service-card{
    min-height: auto;
    padding: 20px;
    border-radius: 22px;
    gap: 15px;
  }

  .service-icon{
    width: 56px;
    min-width: 56px;
    height: 56px;
    border-radius: 18px;
  }

  .service-name{
    font-size: 1.02rem;
  }

  .service-desc{
    font-size: .88rem;
  }
}
/* =========================================================
   WELCOME - ULTIMOS SERVICIOS AGREGADOS
========================================================= */

.recent-services-section {
    background:
        radial-gradient(circle at bottom right, rgba(120, 50, 255, .16), transparent 34%),
        linear-gradient(180deg, rgba(3, 12, 28, .98), rgba(7, 14, 31, .98));
}

.recent-services-panel {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 34px;
    border: 1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at top left, rgba(0, 212, 255, .10), transparent 32%),
        linear-gradient(135deg, rgba(15, 23, 42, .94), rgba(20, 15, 40, .92));
    box-shadow: 0 24px 70px rgba(0,0,0,.35);
}
.recent-services-title-wrap{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* =========================
   HEADER PREMIUM CENTRADO
========================= */

.recent-services-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 30px;
}

.recent-services-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: clamp(2rem, 2.4vw, 3rem);
    font-weight: 900;
    line-height: 1.05;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: -.02em;
}

.recent-services-title::before {
    content: "";
    width: 7px;
    height: 42px;
    border-radius: 999px;
    flex-shrink: 0;
    background: linear-gradient(
        180deg,
        #9b5cff 0%,
        #00d4ff 100%
    );
    box-shadow:
        0 0 18px rgba(0,212,255,.18);
}

.recent-services-subtitle {
    margin: 10px 0 0 21px;
    color: rgba(220,236,255,.62);
    font-size: .98rem;
    line-height: 1.6;
}

.recent-services-view-all {
    color: #ffffff;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    border-radius: 999px;
    padding: 14px 30px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: nowrap;
    transition: .25s ease;
}

.recent-services-view-all:hover {
    color: #ffffff;
    border-color: rgba(0,212,255,.42);
    background: rgba(255,255,255,.07);
    box-shadow: 0 0 24px rgba(0,212,255,.14);
}

/* =========================
   SLIDER
========================= */

.recent-services-slider-wrap {
    position: relative;
}

.recent-services-slider {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 4px 2px 12px;
}

.recent-services-slider::-webkit-scrollbar {
    display: none;
}

/* =========================
   CARD
========================= */

.recent-service-card {
    flex: 0 0 280px;
    overflow: hidden;
    border-radius: 22px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(
        180deg,
        rgba(12, 28, 64, .95),
        rgba(7, 12, 25, .98)
    );
    box-shadow: 0 18px 40px rgba(0,0,0,.22);
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.recent-service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0,212,255,.35);
    box-shadow: 0 24px 55px rgba(0,212,255,.12);
}

.recent-service-card__top {
    height: 135px;
    padding: 18px;
    background:
        radial-gradient(circle at top right, rgba(99,102,241,.34), transparent 38%),
        linear-gradient(135deg, #06225a, #102a73 55%, #101827);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.recent-service-card__icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00d4ff;
    font-size: 2.8rem;
    text-shadow: 0 0 25px rgba(0,212,255,.35);
    flex-shrink: 0;
}

.recent-service-card__icon--image {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 3px;

    background:
        radial-gradient(circle at 50% 20%, rgba(255,255,255,.14), transparent 38%),
        radial-gradient(circle at 50% 80%, rgba(0,212,255,.12), transparent 60%),
        linear-gradient(180deg, rgba(8,28,62,.95), rgba(3,10,25,.98));

    border: 1px solid rgba(0,212,255,.22);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 0 5px rgba(0,212,255,.035),
        0 14px 28px rgba(0,0,0,.24);
}

.recent-service-card__icon--image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;

    border-radius: 16px;
    background: rgba(255,255,255,.04);

    filter: saturate(1.05) contrast(1.05);
}

.recent-service-card__badge {
    color: #9ff7ff;
    border: 1px solid rgba(0,212,255,.28);
    background: rgba(0,212,255,.09);
    border-radius: 999px;
    padding: 7px 12px;
    font-weight: 900;
    font-size: .72rem;
    align-self: flex-start;
}

.recent-service-card__body {
    padding: 22px;
}

.recent-service-card__name {
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.35;
    min-height: 44px;
    font-weight: 900;
    margin: 0 0 18px;
}

.recent-service-card__price {
    display: inline-flex;
    color: #bff8ff;
    border: 1px solid rgba(0,212,255,.28);
    background: rgba(0,212,255,.08);
    border-radius: 10px;
    padding: 7px 14px;
    font-weight: 900;
}

.recent-service-card__time {
    margin-top: 14px;
    color: rgba(220,236,255,.70);
    font-size: .83rem;
    font-weight: 700;
}

.recent-service-card__footer {
    margin: 0 22px 22px;
    padding: 13px 16px;
    border-radius: 14px;
    text-align: center;
    color: #03131a;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    background: linear-gradient(
        135deg,
        #00d4ff,
        #4da3ff
    );
}

/* =========================
   ARROWS
========================= */

.recent-services-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(10, 18, 35, .92);
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.recent-services-arrow--left {
    left: -18px;
}

.recent-services-arrow--right {
    right: -18px;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

    .recent-services-panel {
        padding: 22px;
        border-radius: 24px;
    }

    .recent-services-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .recent-services-title {
        font-size: 1.6rem;
    }

    .recent-services-title::before {
        height: 34px;
    }

    .recent-services-subtitle {
        margin-left: 0;
        font-size: .92rem;
    }

    .recent-services-view-all {
        padding: 12px 24px;
        font-size: .82rem;
    }

    .recent-service-card {
        flex-basis: 245px;
    }

    .recent-services-arrow {
        display: none;
    }
}
/* =========================================================
   WELCOME - LOGO SLIDER DARK PREMIUM
========================================================= */
.logo-strip{
  padding: 18px 0 28px;
  position: relative;
  background: transparent !important;
}
.logo-strip-surface{
  background:
    linear-gradient(180deg, #060c19 0%, #06101f 45%, #07101f 100%);
  padding: 0;
}

.logo-strip,
.logo-strip + .how-section,
.section-dark-surface{
  background:
    radial-gradient(700px 360px at 12% 30%, rgba(0,212,255,.035), transparent 68%),
    radial-gradient(760px 420px at 88% 10%, rgba(110,65,255,.035), transparent 70%),
    linear-gradient(180deg, #050b18 0%, #07101f 100%) !important;
}

.logo-strip__panel{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 16px 0;

  background:
    radial-gradient(700px 220px at 12% 50%, rgba(0,212,255,.04), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.012));

  border: 1px solid rgba(255,255,255,.075);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 16px 44px rgba(0,0,0,.16);

  backdrop-filter: blur(8px);
}

.logo-track{
  display:flex;
  width: max-content;
  gap: 60px;
  padding: 6px 30px;
  align-items:center;
  animation: scrollLogos 18s linear infinite;
}

.logo-track__row{
  display:flex;
  align-items:center;
  gap: 60px;
}

.logo-track img{
  height: 54px;
  width: auto;
  opacity: .55;
  filter: grayscale(100%) contrast(1.05);
  transition: transform .25s ease, opacity .25s ease, filter .25s ease;
}

.logo-track img:hover{
  opacity: .95;
  filter: grayscale(0%) contrast(1.05);
  transform: translateY(-2px) scale(1.06);
}

@media (max-width: 991.98px){
  .logo-track{ animation-duration: 26s; }
  .logo-track img{ height: 42px; }
}

/* animaci贸n: mueve 50% porque hay 2 filas iguales */
@keyframes scrollLogos {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* =========================================================
  WELCOME - COMO FUNCIONA HOW SECTION - PREMIUM + GLOW ACTIVE EFFECT
========================================================= */

.how-section{
  position: relative;
  padding-top: 40px;
  padding-bottom: 40px;
}

.how-head{
  max-width: 850px;
  margin: 0 auto;
}

.how-title{
  font-weight: 900;
  letter-spacing: .5px;
  color: rgba(255,255,255,.94);
  font-size: clamp(28px, 2.6vw, 42px);
}

.how-accent{
  color: #00d4ff;
  text-shadow: 0 0 22px rgba(0,212,255,.18);
}

.how-subtitle{
  color: rgba(255,255,255,.62);
  font-size: 15px;
  line-height: 1.7;
}

/* =========================
   CARD BASE
========================= */

.how-card{
  position: relative;
  height: 100%;
  border-radius: 22px;
  padding: 22px 22px 18px;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 18px 40px rgba(0,0,0,.25);
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
  overflow: hidden;
}

/* glow premium tipo Services cards */
.how-card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  background:
    radial-gradient(
      circle at top left,
      rgba(0,212,255,.12),
      transparent 45%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(0,120,255,.10),
      transparent 45%
    );
}

/* hover general */
.how-card:hover{
  transform: translateY(-4px);
  border-color: rgba(0,212,255,.22);
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.02));
  box-shadow:
    0 20px 42px rgba(0,0,0,.28),
    0 0 0 1px rgba(0,212,255,.05);
}

.how-card:hover::before{
  opacity: 1;
}

/* =========================
   TOP
========================= */

.how-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.how-step{
  font-weight: 900;
  letter-spacing: 1px;
  color: rgba(255,255,255,.25);
  font-size: 20px;
}

/* =========================
   ICON BOX
========================= */

.how-icon{
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(0,200,255,.08);
  border: 1px solid rgba(0,200,255,.18);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04);
  transition: all .22s ease;
}

.how-icon i{
  font-size: 22px;
}

/* =========================
   ICON COLORS (CORRECTO)
========================= */

#how-it-works .row > div:nth-child(1) .how-icon{
  background: rgba(0,212,255,.10);
  border-color: rgba(0,212,255,.28);
}

#how-it-works .row > div:nth-child(1) .how-icon i{
  color: #00d4ff;
}

#how-it-works .row > div:nth-child(2) .how-icon{
  background: rgba(80,150,255,.10);
  border-color: rgba(80,150,255,.28);
}

#how-it-works .row > div:nth-child(2) .how-icon i{
  color: #5aa8ff;
}

#how-it-works .row > div:nth-child(3) .how-icon{
  background: rgba(145,95,255,.12);
  border-color: rgba(145,95,255,.30);
}

#how-it-works .row > div:nth-child(3) .how-icon i{
  color: #9b6cff;
}

#how-it-works .how-card:hover .how-icon{
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 16px 34px rgba(0,0,0,.22),
    0 0 22px rgba(0,212,255,.10);
}

/* =========================
   TEXT
========================= */

.how-name{
  font-weight: 900;
  color: rgba(255,255,255,.94);
  font-size: 18px;
  margin-bottom: 10px;
}

.how-desc{
  color: rgba(255,255,255,.62);
  font-size: 14px;
  line-height: 1.6;
}

/* =========================
   CTA
========================= */

.how-cta{
  padding-top: 14px;
}

/* =========================================================
   WELCOME - RESULTADOS EN NUMEROS
========================================================= */


/* STATS (ANIMATED) */
.stats-section{
  position: relative;
  background:
    radial-gradient(900px 420px at 18% 30%, rgba(0,200,255,.10), transparent 60%),
    radial-gradient(700px 360px at 85% 10%, rgba(80,110,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(7,12,24,.88), rgba(7,12,24,.72));
}

.stats-head{ max-width: 850px; margin: 0 auto; }

.stats-title{
  font-weight: 900;
  letter-spacing: .5px;
  color: rgba(255,255,255,.92);
  font-size: clamp(26px, 2.5vw, 38px);
}

.stats-accent{
  color: rgba(0, 200, 255, .95);
  text-shadow: 0 0 22px rgba(0, 200, 255, .22);
}

.stats-subtitle{
  color: rgba(255,255,255,.62);
  font-size: 15px;
  line-height: 1.6;
}

.stats-card{
  height: 100%;
  border-radius: 18px;
  padding: 18px 18px 16px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.stats-card:hover{
  transform: translateY(-4px);
  background: rgba(255,255,255,.05);
  border-color: rgba(0, 200, 255, .22);
}

.stats-icon{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(0,200,255,.08);
  border: 1px solid rgba(0,200,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  margin-bottom: 10px;
}

.stats-icon i{
  font-size: 20px;
  color: rgba(0, 200, 255, .95);
}

.stats-value{
  font-weight: 900;
  font-size: 34px;
  letter-spacing: .5px;
  color: rgba(255,255,255,.95);
  line-height: 1.1;
}

.stats-label{
  margin-top: 6px;
  color: rgba(255,255,255,.62);
  font-size: 13px;
}
/* STATS SECTION - ICONOS CON COLOR PREMIUM CORRECTO */

.stats-section .row > div .stats-card{
  position: relative;
  overflow: hidden;
}

.stats-section .row > div .stats-card::before{
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  background:
    radial-gradient(circle at top left, rgba(0,212,255,.11), transparent 45%),
    radial-gradient(circle at bottom right, rgba(0,120,255,.08), transparent 45%);
}

.stats-section .row > div .stats-card:hover::before{
  opacity: 1;
}

.stats-section .row > div .stats-card > *{
  position: relative;
  z-index: 1;
}

/* 1 */
.stats-section .row > div:nth-child(1) .stats-icon{
  background: rgba(0,212,255,.10) !important;
  border-color: rgba(0,212,255,.28) !important;
}
.stats-section .row > div:nth-child(1) .stats-icon i{
  color: #00d4ff !important;
}

/* 2 */
.stats-section .row > div:nth-child(2) .stats-icon{
  background: rgba(80,150,255,.10) !important;
  border-color: rgba(80,150,255,.28) !important;
}
.stats-section .row > div:nth-child(2) .stats-icon i{
  color: #5aa8ff !important;
}

/* 3 */
.stats-section .row > div:nth-child(3) .stats-icon{
  background: rgba(80,255,210,.10) !important;
  border-color: rgba(80,255,210,.24) !important;
}
.stats-section .row > div:nth-child(3) .stats-icon i{
  color: #4fffd2 !important;
}

/* 4 */
.stats-section .row > div:nth-child(4) .stats-icon{
  background: rgba(145,95,255,.12) !important;
  border-color: rgba(145,95,255,.30) !important;
}
.stats-section .row > div:nth-child(4) .stats-icon i{
  color: #9b6cff !important;
}

.stats-section .row > div .stats-card:hover .stats-icon{
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 16px 34px rgba(0,0,0,.22),
    0 0 22px rgba(0,212,255,.10);
}

/* =========================
  WELCOME SERVICES - RESELLERPRICING
========================= */

.services-listing-hero{
  position: relative;
  background:
    radial-gradient(900px 420px at 15% 20%, rgba(0,200,255,.10), transparent 60%),
    radial-gradient(700px 360px at 85% 10%, rgba(80,110,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(7,12,24,.88), rgba(7,12,24,.74));
}

.services-listing-head{
  max-width: 920px;
  margin: 0 auto;
}

.services-listing-title{
  color: rgba(255,255,255,.95);
  font-weight: 900;
  letter-spacing: .4px;
  font-size: clamp(30px, 3vw, 46px);
}

.services-listing-subtitle{
  color: rgba(255,255,255,.64);
  font-size: 15px;
  line-height: 1.7;
  max-width: 760px;
  margin: 0 auto;
}

.services-listing-section{
  position: relative;
  background:
    radial-gradient(900px 420px at 15% 20%, rgba(0,200,255,.08), transparent 60%),
    radial-gradient(700px 360px at 85% 10%, rgba(80,110,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(7,12,24,.84), rgba(7,12,24,.72));
}

.service-group-card{
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(320px 140px at 15% 15%, rgba(0,200,255,.06), transparent 65%),
    rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 50px rgba(0,0,0,.24);
}

.service-group-card__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}

.service-group-card__title{
  color: rgba(255,255,255,.95);
  font-weight: 900;
  font-size: 24px;
  line-height: 1.2;
}

.service-group-card__meta{
  color: rgba(0,200,255,.92);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  background: rgba(0,200,255,.08);
  border: 1px solid rgba(0,200,255,.16);
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.services-premium-table{
  margin: 0;
  color: rgba(255,255,255,.85);
}

.services-premium-table thead th{
  background: rgba(255,255,255,.03) !important;
  color: rgba(255,255,255,.88) !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  padding: 16px 18px !important;
}

.services-premium-table tbody td{
  background: transparent !important;
  color: rgba(255,255,255,.76);
  border-top: 1px solid rgba(255,255,255,.06) !important;
  padding: 16px 18px !important;
  vertical-align: middle;
}

.service-row{
  transition: background .18s ease, transform .18s ease;
}

.service-row:hover td{
  background: rgba(255,255,255,.03) !important;
}

.service-name{
  color: rgba(255,255,255,.93);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}

.service-delivery{
  color: rgba(255,255,255,.66);
  font-size: 14px;
  font-weight: 600;
}

.service-price{
  color: rgba(0,200,255,.95);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2px;
}

@media (max-width: 767.98px){
  .service-group-card__head{
    flex-direction: column;
    align-items: flex-start;
  }

  .service-group-card__title{
    font-size: 20px;
  }

  .services-premium-table thead th,
  .services-premium-table tbody td{
    padding: 14px 12px !important;
  }

  .service-name{
    font-size: 14px;
  }

  .service-price{
    font-size: 18px;
  }
}
/* =========================
   SERVICES SEARCH
========================= */

.services-search{
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.services-search__box{
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 35px rgba(0,0,0,.18);
  overflow: hidden;
}

.services-search__icon{
  position: absolute;
  left: 16px;
  color: rgba(0,200,255,.9);
  font-size: 16px;
  pointer-events: none;
}

.services-search__input{
  width: 100%;
  height: 54px;
  padding: 0 16px 0 46px;
  border: none;
  outline: none;
  background: transparent;
  color: rgba(255,255,255,.92);
  font-size: 15px;
}

.services-search__input::placeholder{
  color: rgba(255,255,255,.45);
}

.services-search__box:focus-within{
  border-color: rgba(0,200,255,.28);
  box-shadow: 0 18px 42px rgba(0,200,255,.10);
}
.service-buy-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  padding: 10px 16px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #f5f6f7;
  background: linear-gradient(135deg, #00c8ff, #3b82f6);
  box-shadow: 0 10px 24px rgba(0,200,255,.18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* =========================
  WELCOME SERVICES SEARCH - RESELLERPRICING
========================= */
/* Columnas estables para pricing tables */
.services-premium-table{
  width: 100%;
  table-layout: fixed;
}

.services-premium-table th:nth-child(1),
.services-premium-table td:nth-child(1){
  width: 52%;
}

.services-premium-table th:nth-child(2),
.services-premium-table td:nth-child(2){
  width: 20%;
  text-align: center;
}

.services-premium-table th:nth-child(3),
.services-premium-table td:nth-child(3){
  width: 14%;
  text-align: right;
}

.services-premium-table th:nth-child(4),
.services-premium-table td:nth-child(4){
  width: 14%;
  text-align: center;
}

.services-premium-table .service-name{
  max-width: 100%;
  word-break: break-word;
}
/* =========================
   MOBILE FIX PRICING TABLE
========================= */

@media (max-width: 768px){

  .services-premium-table{
    table-layout: auto !important;
    min-width: 560px;
  }

  .table-responsive{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 18px;
  }

  .services-premium-table thead th{
    font-size: 12px;
    padding: 14px 12px !important;
    white-space: nowrap;
  }

  .services-premium-table tbody td{
    padding: 14px 12px !important;
    white-space: nowrap;
  }

  .service-name{
    min-width: 220px;
    font-size: 14px;
    line-height: 1.4;
  }

  .service-delivery{
    font-size: 13px;
  }

  .service-price{
    font-size: 18px;
    white-space: nowrap;
  }

  .service-buy-btn{
    min-width: 100px;
    padding: 10px 14px;
    font-size: 12px;
    white-space: nowrap;
  }

  .service-group-card__head{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .service-group-card__title{
    font-size: 18px;
  }
}
@media (max-width: 768px){

  .service-name{
    min-width: 180px;
    max-width: 220px;
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.45;
    font-size: 14px;
  }

  .services-premium-table tbody td{
    white-space: normal !important;
    vertical-align: middle;
  }

  .services-premium-table th:nth-child(1),
  .services-premium-table td:nth-child(1){
    width: 42%;
  }

  .services-premium-table th:nth-child(2),
  .services-premium-table td:nth-child(2){
    width: 20%;
  }

  .services-premium-table th:nth-child(3),
  .services-premium-table td:nth-child(3){
    width: 18%;
  }

  .services-premium-table th:nth-child(4),
  .services-premium-table td:nth-child(4){
    width: 20%;
  }
}
/* =========================================================
   WELCOME - EMPIEZA HOY Y ESCALA TU NEGOCIO
========================================================= */

.final-cta{
  position: relative;
  overflow: hidden;
  background: transparent;
}

.final-cta::before{
  left: -220px;
  top: -180px;
  background: rgba(0,212,255,.85);
}

.final-cta::after{
  right: -240px;
  bottom: -220px;
  background: rgba(0,102,255,.85);
  animation-delay: 1.2s;
}

/* Grid muy sutil para mantener tu estilo */
.final-cta .final-cta-box::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity: .35;
  mask-image: radial-gradient(480px 260px at 50% 35%, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask-image: radial-gradient(480px 260px at 50% 35%, rgba(0,0,0,1), rgba(0,0,0,0));
  pointer-events:none;
}

@keyframes ctaGlow{
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(30px,18px) scale(1.05); }
}

.final-cta-box{
  position: relative;
  max-width: 860px;
  margin: auto;
  padding: 42px 30px;

  border-radius: 22px;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);

  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}

.final-cta-title{
  font-weight: 900;
  font-size: clamp(28px,3vw,42px);
  color: rgba(255,255,255,.95);
  margin-bottom: 8px;
}

.final-cta-accent{
  color: rgba(0,200,255,.95);
  text-shadow: 0 0 25px rgba(0,200,255,.25);
}

.final-cta-subtitle{
  margin: 0 auto;
  max-width: 70ch;
  color: rgba(255,255,255,.65);
  font-size: 15px;
  line-height: 1.6;
}

/* bullets */
.final-cta-points{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.final-cta-point{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.72);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
}

.final-cta-check{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(0,200,255,.14);
  border: 1px solid rgba(0,200,255,.22);
  color: rgba(0,200,255,.95);
  box-shadow: 0 0 18px rgba(0,200,255,.18);
  font-weight: 900;
}
/* FINAL CTA BULLETS HOVER */

.final-cta-point{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;

  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);

  color: rgba(255,255,255,.75);
  font-size:13px;
  font-weight:600;

  transition: 
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

/* hover */
.final-cta-point:hover{
  transform: translateY(-2px);

  background: rgba(0,200,255,.08);
  border-color: rgba(0,200,255,.28);

  box-shadow: 0 14px 35px rgba(0,0,0,.35);
  cursor:pointer;
}

.final-cta-check{
  width:22px;
  height:22px;

  border-radius:999px;

  display:grid;
  place-items:center;

  background: rgba(0,200,255,.12);
  border:1px solid rgba(0,200,255,.25);

  color: rgba(0,200,255,.95);
  font-weight:900;

  transition: transform .18s ease, box-shadow .18s ease;
}

.final-cta-point:hover .final-cta-check{
  transform: scale(1.1);
  box-shadow: 0 0 14px rgba(0,200,255,.35);
}
/* =========================================================
   WELCOME - LOGIN MODAL FINAL LIMPIO
========================================================= */

.premium-auth-modal .modal-backdrop,
.modal-backdrop.show{
  opacity: .78;
}

/* =========================
   DIALOG
========================= */

.premium-auth-dialog{
  max-width: 460px;
}

/* =========================
   CONTENT
========================= */

.premium-auth-content{
  position: relative;
  border-radius: 24px;
  padding: 30px 28px 24px;
  background:
    radial-gradient(
      520px 260px at 20% 0%,
      rgba(0,212,255,.10),
      transparent 62%
    ),
    radial-gradient(
      420px 260px at 90% 100%,
      rgba(60,110,255,.08),
      transparent 65%
    ),
    linear-gradient(
      180deg,
      rgba(18,29,50,.96),
      rgba(8,15,30,.98)
    );

  border: 1px solid rgba(255,255,255,.08);

  box-shadow:
    0 24px 70px rgba(0,0,0,.45);

  color: #fff;
}

/* =========================
   CLOSE BUTTON
========================= */

.premium-auth-close{
  position: absolute;
  top: 14px;
  right: 14px;
  left: auto;
  z-index: 5;

  width: 34px;
  height: 34px;

  border: 0;
  border-radius: 12px;

  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);

  display: flex;
  align-items: center;
  justify-content: center;

  transition: all .22s ease;
}

.premium-auth-close:hover{
  background: rgba(255,255,255,.10);
  color: #fff;
}

/* =========================
   HIDE LOGO
========================= */

.premium-auth-logo{
  display: none !important;
}

/* =========================
   TITLE
========================= */

.premium-auth-title{
  text-align: center;
  font-size: clamp(1.9rem, 2.4vw, 2.2rem);
  font-weight: 900;
  margin: 4px 0 0;
  letter-spacing: -.02em;
}

.premium-auth-subtitle{
  text-align: center;
  color: rgba(255,255,255,.58);

  font-size: .92rem;
  line-height: 1.55;

  margin: 8px auto 20px;
  max-width: 340px;
}

/* =========================
   LABELS
========================= */

.premium-auth-label{
  color: rgba(255,255,255,.78);
  font-size: .86rem;
  font-weight: 700;
  margin-bottom: 7px;
}

.premium-auth-label span{
  color: #ff6b86;
}

/* =========================
   INPUTS
========================= */

.premium-auth-input{
  border-radius: 16px;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);

  transition: all .25s ease;
}

.premium-auth-input .input-group-text{
  width: 48px;
  border: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #00d4ff;
  background: rgba(0,212,255,.08);

  transition: all .25s ease;
}

.premium-auth-input .form-control{
  height: 48px;
  border: 0;
  box-shadow: none !important;

  background: transparent;
  color: #fff;

  font-size: .95rem;

  transition: all .25s ease;
}

/* Focus glow fino azul */

.premium-auth-input:focus-within{
  border-radius: 18px;

  box-shadow:
    0 0 0 1px rgba(0,225,255,.30),
    0 0 12px rgba(0,225,255,.18),
    0 0 26px rgba(0,170,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.02);
}

.premium-auth-input:focus-within .input-group-text{
  background: rgba(0,225,255,.14);
  border-color: rgba(0,225,255,.34);

  box-shadow:
    0 0 12px rgba(0,225,255,.10);
}

.premium-auth-input:focus-within .form-control{
  background: rgba(255,255,255,.035);
}

/* =========================
   BUTTON
========================= */

.premium-auth-btn{
  width: 100%;
  height: 54px;

  margin-top: 8px;

  border: 0;
  border-radius: 18px;

  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .3px;

  background:
    linear-gradient(
      135deg,
      #00d4ff,
      #087cff
    );

  box-shadow:
    0 10px 30px rgba(0,180,255,.16);

  transition: all .25s ease;
}

.premium-auth-btn:hover{
  transform: translateY(-2px);

  box-shadow:
    0 12px 28px rgba(0,180,255,.18),
    0 0 16px rgba(0,212,255,.12),
    0 0 32px rgba(0,140,255,.06);

  filter: brightness(1.02);
}

.premium-auth-btn i{
  font-size: 1rem;
  margin-left: 8px;
}

/* =========================
   SECURITY BOX
========================= */

.premium-auth-security{
  margin-top: 14px;
  padding: 12px 14px;

  border-radius: 16px;

  display: flex;
  gap: 12px;

  font-size: .84rem;
  line-height: 1.45;

  color: rgba(220,236,255,.72);

  background: rgba(0,212,255,.06);
  border: 1px solid rgba(0,212,255,.14);
}

.premium-auth-security i{
  color: #00d4ff;
  margin-top: 2px;
}

/* =========================
   LINKS
========================= */

.premium-auth-links{
  margin-top: 14px;

  text-align: center;

  color: rgba(255,255,255,.55);
  font-size: .85rem;
  line-height: 1.55;
}

.premium-auth-links a{
  color: #00d4ff;
  font-weight: 700;
  text-decoration: none;
}

.premium-auth-links a:hover{
  color: #69e6ff;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 575.98px){

  .premium-auth-dialog{
    max-width: calc(100% - 28px);
    margin: 12px auto;
  }

  .premium-auth-content{
    padding: 28px 20px 22px;
    border-radius: 22px;
  }

  .premium-auth-title{
    font-size: 1.7rem;
  }

  .premium-auth-btn{
    height: 50px;
    font-size: .98rem;
  }
}
/* FIX DEFINITIVO X A LA DERECHA */

.premium-auth-content{
    position: relative !important;
}

button.premium-auth-close{
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    left: unset !important;
    bottom: unset !important;

    margin: 0 !important;
    padding: 0 !important;

    width: 36px !important;
    height: 36px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    border-radius: 12px !important;

    background: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.82) !important;

    z-index: 999 !important;
    float: none !important;
    transform: none !important;
}
.premium-auth-errors{
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 80, 80, .08);
    border: 1px solid rgba(255, 80, 80, .18);
    color: #ffb3b3;
    font-size: .88rem;
    line-height: 1.5;
}

.premium-auth-errors ul{
    margin: 0;
    padding-left: 18px;
}
/* =========================================================
   BOTONES PREMIUM
========================================================= */
/* ===== BOTONES MÁS PREMIUM ===== */
.hero-btn-primary{
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 26px rgba(0,212,255,.28);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.hero-btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 40px rgba(0,212,255,.42);
  filter: brightness(1.03);
}

/* “shine” que cruza el botón */
.hero-btn-primary::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-35%;
  width: 40%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: rotate(20deg);
  opacity: 0;
  transition: opacity .2s ease, transform .6s ease;
  pointer-events:none;
}

.hero-btn-primary:hover::after{
  opacity: 1;
  transform: translateX(260%) rotate(20deg);
}

/* secundarios y ghost con mejor “lift” */
.hero-btn-secondary,
.hero-btn-ghost{
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.hero-btn-secondary:hover,
.hero-btn-ghost:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  border-color: rgba(0,200,255,.22);
}

/* =========================================================
   WELCOME - CONTACTOS FLOTANTES
========================================================= */
/* FLOATING CONTACT DOCK */

.contact-dock{
position: fixed;
right: 18px;
top: 50%;
transform: translateY(-50%);
z-index: 9999;

display: flex;
flex-direction: column;
gap: 12px;

transition: opacity .25s ease;
}

.contact-dock__btn{

width:52px;
height:52px;

display:flex;
align-items:center;
justify-content:center;

border-radius:14px;

background:
radial-gradient(260px 120px at 20% 20%, rgba(0,200,255,.18), transparent 60%),
rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

box-shadow:0 18px 40px rgba(0,0,0,.45);

color:#fff;
font-size:22px;

text-decoration:none;

transition:
transform .2s ease,
box-shadow .2s ease,
border-color .2s ease;
}

.contact-dock__btn:hover{

transform:translateX(-4px) scale(1.05);

border-color:rgba(0,200,255,.35);

box-shadow:0 25px 60px rgba(0,0,0,.55);

}

.contact-dock__btn.wa:hover{
background:rgba(37,211,102,.15);
}

.contact-dock__btn.tg:hover{
background:rgba(39,170,225,.15);
}

.contact-dock__btn.fb:hover{
background:rgba(24,119,242,.15);
}

/* CONTACT DOCK MOBILE */

@media (max-width: 768px){

  .contact-dock{
    top: auto;
    bottom: 18px;
    right: 0;
    left: 0;

    transform: none;

    flex-direction: row;
    justify-content: center;
    gap: 14px;

    padding: 10px 14px;

    background: rgba(10,15,30,.55);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
  }

  .contact-dock__btn{
    width: 56px;
    height: 56px;
  }
}
/* =========================================================
   WELCOME - LOGIN / RECUPERACION CONTRASEÑA / REGISTRO
========================================================= */

/* =========================
   AUTH - GLOW ANIMADO (refinado)
========================= */

.login .login-content{
  position: relative;
  overflow: visible; /* permite que el glow se vea alrededor */
}

/* glow cyan */
.login .login-content::before{
  content:"";
  position:absolute;
  width: 300px;
  height: 300px;
  border-radius:999px;
  left:-120px;
  top:-120px;
  background: rgba(0,212,255,.85);
  filter: blur(70px);
  opacity:.22;
  z-index:-1;
}

/* glow azul */
.login .login-content::after{
  content:"";
  position:absolute;
  width: 300px;
  height: 300px;
  border-radius:999px;
  right:-120px;
  bottom:-120px;
  background: rgba(0,102,255,.85);
  filter: blur(70px);
  opacity:.20;
  z-index:-1;
  animation-delay:1.2s;
}

@keyframes authGlow{
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(18px,12px) scale(1.05); }
}
/* =========================
   AUTH (LOGIN / FORGOT) PREMIUM
========================= */

/* fondo dinámico por variable (se define en el blade) */
.bg-cover-9:after{
  background-image: var(--auth-bg, none) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(1.05) contrast(1.05);
}

/* Overlay premium */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(900px 420px at 15% 20%, rgba(0,200,255,.16), transparent 60%),
    radial-gradient(700px 360px at 85% 10%, rgba(80,110,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(7,12,24,.86), rgba(7,12,24,.78));
  pointer-events:none;
}

/* el contenido arriba del overlay */
#app{ position: relative; z-index: 1; }

/* Card glass */
.login .login-content,
.error-page .error-page-content{
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
}

/* Login card padding */
.login .login-content{
  padding: 28px 26px;
  max-width: 460px;
  width: 100%;
}

/* Inputs */
.login .form-control,
.error-page .form-control{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.05) !important;
  color: rgba(255,255,255,.92);
  padding: 14px 14px;
}
.login .form-control:focus,
.error-page .form-control:focus{
  box-shadow: 0 0 0 .2rem rgba(0,200,255,.15);
  border-color: rgba(0,200,255,.35) !important;
}

/* Input group icon */
.premium-ig .input-group-text{
  border-radius: 14px 0 0 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,200,255,.08);
  color: rgba(0,200,255,.95);
}
.premium-ig input{
  border-radius: 0 14px 14px 0;
}

/* Botón premium */
.btn-premium{
  background: linear-gradient(135deg, #00d4ff, #0066ff);
  border: none !important;
  color: #fff !important;
  border-radius: 999px;
  padding: 12px 16px;
  box-shadow: 0 0 18px rgba(0,212,255,.25);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-premium:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(0,212,255,.32);
  filter: brightness(1.05);
}
.btn-premium{
  position: relative;
  overflow: hidden;
}

.btn-premium::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background: radial-gradient(circle at center, rgba(255,255,255,.25), transparent 60%);
  opacity:0;
  transition: opacity .25s ease;
}

.btn-premium:hover::after{
  opacity:.35;
}
/* Logo */
.login-logo{
  text-align:center;
  margin-bottom:18px;
}
.login-logo img{
  max-height:55px;
  opacity:.95;
}

/* Aviso seguridad */
.login-security{
  margin-top:14px;
  padding:14px 16px;
  font-size:13px;
  line-height:1.45;
  color:rgba(255,255,255,.78);
  background:rgba(0,200,255,.06);
  border:1px solid rgba(0,200,255,.20);
  border-radius:14px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  text-align:left;
}
.login-security i{
  color:#00d4ff;
  margin-top:2px;
}

/* links */
.login a,
.error-page a{
  color: rgba(0,200,255,.95);
}
.login a:hover,
.error-page a:hover{
  color: rgba(0,200,255,1);
  text-decoration: underline;
}

/* responsive */
@media (max-width: 575.98px){
  .login .login-content{ padding: 22px 18px; }
}

@keyframes loginFade{
  from{
    opacity:0;
    transform: translateY(12px);
  }
  to{
    opacity:1;
    transform: translateY(0);
  }
}

/* mismo glow para pantallas tipo error-page (forgot/reset) */
.error-page .error-page-content{
  position: relative;
  overflow: hidden;
}

.error-page .error-page-content::before,
.error-page .error-page-content::after{
  content:"";
  position:absolute;
  width: 420px;
  height: 420px;
  border-radius: 999px;
  filter: blur(60px);
  opacity: .18;
  z-index: -1;
  pointer-events:none;
}

.error-page .error-page-content::before{
  left: -220px;
  top: -220px;
  background: rgba(0, 212, 255, .95);
}

.error-page .error-page-content::after{
  right: -240px;
  bottom: -240px;
  background: rgba(0, 102, 255, .95);
  animation-delay: 1.3s;
}
/* =========================
   AUTH MOBILE FIX
   Solo celular / tablet pequeña
========================= */
@media (max-width: 768px){

  html, body{
    overflow-x: hidden !important;
    max-width: 100%;
    touch-action: pan-y;
  }

  .login,
  .error-page,
  .app.app-full-height.app-without-header{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  #app{
    overflow-x: hidden;
    min-height: 100dvh;
  }

  .login,
  .error-page{
    min-height: 100dvh;
    padding-left: 14px;
    padding-right: 14px;
  }

  .login .login-content,
  .error-page .error-page-content{
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    box-sizing: border-box;
  }

  .login .form-control,
  .error-page .form-control,
  .login .btn,
  .error-page .btn,
  .premium-ig,
  .premium-ig .input-group-text{
    max-width: 100%;
    box-sizing: border-box;
  }
}
/* =========================
   AUTH MOBILE FIX
========================= */

html, body{
  overflow-x: hidden;
  max-width: 100%;
}

#app{
  overflow-x: hidden;
}

/* =========================
   REGISTER SCROLL FIX REAL
========================= */

/* un solo scroll vertical, nunca lateral */
html, body{
  height: 100%;
  overflow-x: hidden !important;
}

body{
  overflow-y: auto !important;
}

/* el app no debe crear otro scroll */
#app.app.app-full-height.app-without-header{
  min-height: 100vh !important;
  height: auto !important;
  overflow: visible !important;
}

/* register como contenedor normal */
.register{
  min-height: 100vh !important;
  height: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 24px 16px 40px !important;
  overflow: visible !important;
}

/* card centrado */
.register-content{
  width: 100% !important;
  max-width: 620px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* evita que filas/columnas empujen ancho raro */
.register-content .row{
  --bs-gutter-x: 12px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.register-content .row > [class*="col"]{
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* en móvil, que respire bien */
@media (max-width: 768px){
  .register{
    padding: 18px 14px 30px !important;
  }

  .register-content{
    max-width: 100% !important;
  }

  .register-content .row > [class*="col"]{
    margin-bottom: 10px;
  }
}
/* =========================
   PASSWORD STRENGTH
========================= */
.password-strength{
  margin-top: 10px;
}

.password-strength__bar{
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
}

.password-strength__bar span{
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width .22s ease, background .22s ease;
  background: #ff4d4f;
}

.password-strength__text{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.68);
}

.password-strength__text strong{
  color: #fff;
}
/* =========================
  WELCOME - POPULAR PRODUCTS SECTION
========================= */

.popular-products-section{
  position: relative;
  background:
    radial-gradient(900px 420px at 15% 20%, rgba(0,200,255,.10), transparent 60%),
    radial-gradient(700px 360px at 85% 10%, rgba(80,110,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(7,12,24,.88), rgba(7,12,24,.72));
}

.popular-head{
  max-width: 840px;
  margin: 0 auto;
}

.popular-title{
  font-weight: 900;
  letter-spacing: .5px;
  color: rgba(255,255,255,.94);
  font-size: clamp(26px, 2.5vw, 38px);
}

.popular-accent{
  color: rgba(0,200,255,.95);
  text-shadow: 0 0 22px rgba(0,200,255,.22);
}

.popular-subtitle{
  color: rgba(255,255,255,.62);
  font-size: 15px;
  line-height: 1.6;
}

.popular-card{
  position: relative;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

.popular-card:hover{
  transform: translateY(-6px);
  border-color: rgba(0,200,255,.28);
  box-shadow: 0 24px 60px rgba(0,0,0,.38);
  background: rgba(255,255,255,.05);
}

.popular-card__media{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}

.popular-card__img{
  width: 100%;
  height: 360px;
  object-fit: contain;
  display: block;
  background: rgba(10,15,30,.25);
  transition: transform .3s ease, filter .3s ease;
}

.popular-card:hover .popular-card__img{
  transform: scale(1.03);
  filter: brightness(1.04);
}

.popular-card__overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.28), rgba(0,0,0,0)),
    radial-gradient(280px 140px at 20% 15%, rgba(0,200,255,.10), transparent 65%);
  pointer-events: none;
}

.popular-card__body{
  padding: 18px 18px 16px;
}

.popular-card__title{
  color: rgba(255,255,255,.94);
  font-weight: 900;
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
}

.popular-card__subtitle{
  color: rgba(255,255,255,.62);
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
  margin-top: 8px;
  min-height: 38px;
}

.popular-card__cta{
  margin-top: 14px;
  text-align: center;
  color: rgba(0,200,255,.92);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
}

.popular-card:hover .popular-card__cta{
  text-shadow: 0 0 14px rgba(0,200,255,.18);
}

@media (max-width: 767.98px){
  .popular-card__img{
    height: 320px;
  }
}
/* =========================
   WELCOME - POPULAR PRODUCTS HOVER
========================= */

/* glow azul */
.popular-card:before{
content:'';
position:absolute;
inset:0;
border-radius:20px;
background: radial-gradient(circle at 50% 0%, rgba(0,200,255,0.25), transparent 70%);
opacity:0;
transition: opacity .35s ease;
pointer-events:none;
}

.popular-card:hover:before{
opacity:1;
}

/* elevación */
.popular-card:hover{
transform: translateY(-8px) scale(1.02);
box-shadow: 0 30px 60px rgba(0,0,0,0.55);
border-color: rgba(0,200,255,0.4);
}

.popular-card:hover .popular-card__img{
transform: scale(1.06);
}

/* título glow */
.popular-card:hover .popular-card__title{
color:#00c8ff;
text-shadow:0 0 12px rgba(0,200,255,.35);
}

.popular-card:hover .popular-card__cta{
transform: translateY(-2px);
text-shadow:0 0 10px rgba(0,200,255,.6);
}
/* =========================
   WELCOME - RESELLER PLANS PREMIUM
========================= */

.reseller-section{
  position: relative;
  background:
    radial-gradient(900px 420px at 15% 20%, rgba(0,200,255,.10), transparent 60%),
    radial-gradient(700px 360px at 85% 10%, rgba(80,110,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(7,12,24,.88), rgba(7,12,24,.72));
}

.reseller-head{
  max-width: 900px;
  margin: 0 auto;
}

.reseller-title{
  font-weight: 900;
  letter-spacing: .5px;
  color: rgba(255,255,255,.95);
  font-size: clamp(28px, 2.8vw, 44px);
  text-transform: uppercase;
}

.reseller-accent{
  color: rgba(0,200,255,.95);
  text-shadow: 0 0 22px rgba(0,200,255,.22);
}

.reseller-subtitle{
  color: rgba(255,255,255,.68);
  font-size: 15px;
  line-height: 1.7;
  max-width: 820px;
  margin: 0 auto;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.reseller-card{
  position: relative;
  overflow: hidden;
  padding: 20px 18px 18px;
  border-radius: 20px;
  background:
    radial-gradient(320px 140px at 15% 15%, rgba(0,200,255,.08), transparent 65%),
    rgba(255,255,255,.03);
  border: 1px solid rgba(0,200,255,.22);
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  backdrop-filter: blur(8px);
}

.reseller-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 70px rgba(0,0,0,.38);
  border-color: rgba(0,200,255,.38);
}

.reseller-card--featured{
  border-color: rgba(0,200,255,.42);
  box-shadow: 0 24px 70px rgba(0,200,255,.10), 0 20px 50px rgba(0,0,0,.34);
}

.reseller-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 14px;
}

.reseller-card__badge{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 0;
}

.reseller-card__name{
  color: rgba(255,255,255,.95);
  font-weight: 900;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.15;
  margin-bottom: 12px;
}

.reseller-card__price{
  color: #00c8ff;
  font-weight: 900;
  font-size: clamp(34px, 2.8vw, 48px);
  line-height: 1;
  letter-spacing: -.5px;
}

.reseller-card__currency{
  font-size: .9em;
}

.reseller-card__unit{
  color: rgba(255,255,255,.55);
  font-size: 16px;
  font-weight: 700;
  margin-left: 4px;
}

.reseller-card__divider{
  height: 1px;
  margin: 18px 0 16px;
  background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.16), rgba(255,255,255,.0));
}

.reseller-card__features{
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reseller-card__features li{
  color: rgba(255,255,255,.72);
  font-size: 14px;
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.reseller-card__features i{
  color: #00c8ff;
  margin-top: 3px;
  font-size: 16px;
  min-width: 16px;
}

.reseller-card__btn{
  display: inline-flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  border-radius: 14px;
  padding: 13px 16px;
  font-weight: 800;
  font-size: 14px;
  color: #f5f5f5;
  background: linear-gradient(135deg, #13cfff, #168cff);
  border: 1px solid rgba(19,207,255,.35);
  box-shadow:
    0 14px 30px rgba(19,207,255,.18),
    inset 0 0 0 1px rgba(255,255,255,.08);
  transition: all .18s ease;
}

.reseller-card__btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);

  box-shadow:
    0 18px 40px rgba(19,207,255,.30),
    0 0 18px rgba(19,207,255,.35);

  color: #07111f;
}

@media (max-width: 767.98px){
  .reseller-card{
    padding: 22px 18px 20px;
  }

  .reseller-subtitle{
    text-transform: none;
  }
}
.reseller-card__icon-wrap{
  margin-bottom: 18px;
}

.reseller-card__icon{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex: 0 0 56px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.reseller-card--cyan .reseller-card__icon{
  color: #00c8ff;
  background: linear-gradient(180deg, rgba(0,200,255,.14), rgba(0,200,255,.05));
  border-color: rgba(0,200,255,.26);
  box-shadow: 0 12px 24px rgba(0,200,255,.08);
}

.reseller-card--blue .reseller-card__icon{
  color: #22d7ff;
  background: linear-gradient(180deg, rgba(19,207,255,.16), rgba(22,140,255,.06));
  border-color: rgba(19,207,255,.26);
  box-shadow: 0 12px 24px rgba(19,207,255,.08);
}

.reseller-card--purple .reseller-card__icon{
  color: #d100ff;
  background: linear-gradient(180deg, rgba(176,0,255,.16), rgba(91,0,163,.06));
  border-color: rgba(176,0,255,.28);
  box-shadow: 0 12px 24px rgba(176,0,255,.10);
}

.reseller-card--gold .reseller-card__icon{
  color: #ffc21a;
  background: linear-gradient(180deg, rgba(255,194,26,.16), rgba(120,88,0,.06));
  border-color: rgba(255,194,26,.26);
  box-shadow: 0 12px 24px rgba(255,194,26,.08);
}

.reseller-card--blue.reseller-card--featured{
  border-color: rgba(19,207,255,.48);
  box-shadow:
    0 24px 70px rgba(19,207,255,.10),
    0 20px 50px rgba(0,0,0,.34);
}

.reseller-card--purple{
  border-color: rgba(176,0,255,.22);
  background:
    radial-gradient(320px 140px at 15% 15%, rgba(176,0,255,.08), transparent 65%),
    rgba(255,255,255,.03);
}

.reseller-card--purple:hover{
  border-color: rgba(176,0,255,.38);
}

.reseller-card--gold{
  border-color: rgba(255,194,26,.22);
  background:
    radial-gradient(320px 140px at 15% 15%, rgba(255,194,26,.08), transparent 65%),
    rgba(255,255,255,.03);
}

.reseller-card--gold:hover{
  border-color: rgba(255,194,26,.36);
}

.reseller-card--gold .reseller-card__btn{
  background: linear-gradient(135deg, #ffcc2f, #ff9f1a);
  border-color: rgba(255,194,26,.35);
  box-shadow:
    0 14px 30px rgba(255,194,26,.16),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

.reseller-card--gold .reseller-card__btn:hover{
  box-shadow:
    0 18px 40px rgba(255,194,26,.28),
    0 0 18px rgba(255,194,26,.22);
}

.reseller-card--purple .reseller-card__btn{
  background: linear-gradient(135deg, #d100ff, #7b2cff);
  border-color: rgba(209,0,255,.32);
  color: #fff;
  box-shadow:
    0 14px 30px rgba(209,0,255,.16),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

.reseller-card--purple .reseller-card__btn:hover{
  color: #fff;
  box-shadow:
    0 18px 40px rgba(209,0,255,.24),
    0 0 18px rgba(209,0,255,.20);
}

/* =========================
  WELCOME - SITE FOOTER PREMIUM
========================= */

.site-footer{
  position: relative;
  overflow: hidden;
  padding-top: 26px !important;
  padding-bottom: 14px !important;
  background:
    radial-gradient(900px 360px at 12% 10%, rgba(0,200,255,.10), transparent 60%),
    radial-gradient(700px 320px at 88% 0%, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(180deg, rgba(7,12,24,.96), rgba(7,12,24,.88));
  border-top: 1px solid rgba(255,255,255,.06);
}

.site-footer__top{
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.site-footer__brand{
  max-width: 360px;
}

.site-footer__logo-link{
  display: inline-block;
  margin-bottom: 18px;
}

.site-footer__logo{
  max-width: 170px;
  opacity: .96;
}

.site-footer__desc{
  color: rgba(255,255,255,.62);
  font-size: 14px;
  line-height: 1.7;
}

.site-footer__title{
  color: rgba(255,255,255,.92);
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 14px;
  letter-spacing: .3px;
}

.site-footer__links{
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer__links li{
  margin-bottom: 10px;
}

.site-footer__links a{
  color: rgba(255,255,255,.62);
  text-decoration: none;
  transition: color .18s ease, transform .18s ease;
}

.site-footer__links a:hover{
  color: rgba(0,200,255,.95);
}

.site-footer__contact{
  color: rgba(255,255,255,.62);
  font-size: 14px;
  line-height: 1.9;
}

.site-footer__contact i{
  color: rgba(0,200,255,.92);
}

.site-footer__socials{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.site-footer__socials a{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.site-footer__socials a:hover{
  transform: translateY(-2px);
  border-color: rgba(0,200,255,.28);
  background: rgba(0,200,255,.08);
  box-shadow: 0 14px 28px rgba(0,200,255,.10);
  color: #fff;
}

.site-footer__bottom{
  padding-top: 20px;
}

.site-footer__copy,
.site-footer__mini{
  color: rgba(255,255,255,.48);
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 767.98px){
  .site-footer{
    padding: 44px 0 22px;
  }

  .site-footer__brand{
    max-width: 100%;
  }

  .site-footer__logo{
    max-width: 150px;
  }
}
/* =========================
   WELCOME - LEGAL
========================= */
.legal-card{
background: rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
padding:40px;
box-shadow:0 20px 60px rgba(0,0,0,.4);
}

.legal-title{
font-weight:900;
letter-spacing:.5px;
}

.legal-card h3{
margin-top:28px;
font-weight:700;
}

.legal-card p{
color:rgba(255,255,255,.75);
line-height:1.7;
}

.legal-card ul{
color:rgba(255,255,255,.75);
padding-left:18px;
}
/* =========================
   LEGAL ACCORDION PREMIUM
========================= */

.legal-accordion{
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
}

.legal-accordion__item{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
  overflow: hidden;
  margin-bottom: 14px;
}

.legal-accordion__button{
  background: rgba(255,255,255,.03) !important;
  color: rgba(255,255,255,.92) !important;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .2px;
  padding: 18px 20px;
  border: none !important;
  box-shadow: none !important;
}

.legal-accordion__button:not(.collapsed){
  background: rgba(0,200,255,.08) !important;
  color: #fff !important;
}

.legal-accordion__button::after{
  filter: brightness(1.8);
}

.legal-accordion__body{
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.74);
  line-height: 1.75;
  padding: 18px 20px 20px;
}

.legal-accordion__body p:last-child{
  margin-bottom: 0;
}

.legal-accordion__body ul{
  margin-bottom: 0;
  padding-left: 18px;
}

.legal-accordion__body li{
  margin-bottom: 8px;
}
/* =========================================================
   NUEVO 28/04 CLIENT DASHBOARD - BASE MÁS INTEGRADA
========================================================= */
/* =========================================================
   CLIENT DASHBOARD — CORPORATIVO LIMPIO V4
========================================================= */


.dashboard-kpi-card,
.dashboard-stat-clean,
.dashboard-order-strip,
.dashboard-announcements-wrap {
    background:
        radial-gradient(420px 180px at 0% 0%, rgba(0, 200, 255, .075), transparent 62%),
        linear-gradient(145deg, rgba(20, 34, 60, .94), rgba(11, 22, 43, .97));
    border: 1px solid rgba(120, 170, 255, .15);
    box-shadow: 0 12px 30px rgba(0,0,0,.16);
}

.dashboard-welcome-compact__eyebrow {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: max-content !important;
    align-self: flex-start !important;
    padding: 6px 13px !important;
    border-radius: 999px;
    margin-bottom: 12px;
    color: #00c8ff;
    background: rgba(0,200,255,.09);
    border: 1px solid rgba(0,200,255,.16);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dashboard-welcome-compact__title {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 850;
    color: #fff;
}

.dashboard-welcome-compact__text {
    margin: 0;
    font-size: 14px;
    color: rgba(255,255,255,.62);
}

/* Seguridad compacta */

.dashboard-security-compact__title {
    font-size: 18px;
    font-weight: 850;
    color: #fff;
}

.dashboard-security-compact__subtitle {
    margin-top: 3px;
    font-size: 12px;
    color: rgba(255,255,255,.52);
}

.dashboard-security-compact__items {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.dashboard-security-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 15px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.065);
}

.dashboard-security-item__dot {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: #ffca4b;
    box-shadow: 0 0 0 5px rgba(255,202,75,.10);
}

.dashboard-security-item.is-active .dashboard-security-item__dot {
    background: #50ffc5;
    box-shadow: 0 0 0 5px rgba(80,255,197,.10);
}

.dashboard-security-item__content {
    flex: 1;
    min-width: 0;
}

.dashboard-security-item__label {
    font-size: 13px;
    font-weight: 850;
    color: #fff;
}

.dashboard-security-item__text {
    font-size: 12px;
    color: rgba(255,255,255,.55);
}

.dashboard-security-item__action,
.dashboard-security-item__badge {
    height: 30px;
    min-width: 74px;
    padding: 0 12px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-security-item__action {
    color: #ffffff !important;
    background: linear-gradient(135deg, #19c8ff 0%, #1b7dff 100%) !important;
    border: 1px solid rgba(72, 180, 255, 0.28) !important;
    box-shadow: 0 10px 24px rgba(0, 132, 255, 0.18) !important;
    transition: all .25s ease !important;
}

/* hover */
.dashboard-security-item__action:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2fd2ff 0%, #2a8cff 100%) !important;
    border-color: rgba(90, 200, 255, 0.35) !important;
    box-shadow: 0 14px 30px rgba(0, 132, 255, 0.24) !important;
    transform: translateY(-1px);
}

/* focus / active / bootstrap override */
.dashboard-security-item__action:focus,
.dashboard-security-item__action:active,
.dashboard-security-item__action.active,
.dashboard-security-item__action:not(:disabled):not(.disabled):active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #19c8ff 0%, #1b7dff 100%) !important;
    border-color: rgba(72, 180, 255, 0.28) !important;
    box-shadow: 0 0 0 0 rgba(0,0,0,0) !important;
    outline: none !important;
}

.dashboard-security-item__badge {
    color: #6effc8;
    background: rgba(0,255,190,.09);
    border: 1px solid rgba(0,255,190,.16);
}

/* Layout principal */

.client-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 355px;
    gap: 22px;
    align-items: start;
    width: 100%;
}

.client-dashboard-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.client-dashboard-side {
    min-width: 0;
}

/* KPIs */

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.dashboard-kpi-card {
    grid-column: span 3;
    min-height: 138px;
    border-radius: 20px;
    padding: 22px 24px;
}

.dashboard-kpi-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.dashboard-kpi-card__label {
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.63);
}

.dashboard-kpi-card__value {
    font-size: 32px;
    font-weight: 850;
    line-height: 1;
    color: #fff;
    margin-bottom: 9px;
}

.dashboard-kpi-card__sub {
    font-size: 13px;
    color: rgba(255,255,255,.55);
}

.dashboard-kpi-card__action {
    height: 36px;
    padding: 0 15px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(0,145,255,.16);
    border: 1px solid rgba(0,170,255,.26);
    color: #7ed8ff;
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
}

/* KPIs secundarios */

.dashboard-stat-clean {
    grid-column: span 2;
    min-height: 96px;
    border-radius: 18px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.dashboard-stat-clean__icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #66d4ff;
    background: rgba(0,190,255,.11);
    border: 1px solid rgba(0,200,255,.16);
    font-size: 20px;
}

.dashboard-stat-clean__label {
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255,255,255,.58);
    margin-bottom: 6px;
}

.dashboard-stat-clean__value {
    font-size: 27px;
    font-weight: 850;
    line-height: 1;
    color: #fff;
}

/* Órdenes */

.dashboard-orders-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.dashboard-order-strip {
    min-height: 112px;
    border-radius: 20px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.dashboard-order-strip__icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60d8ff;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.09);
    font-size: 20px;
}

.dashboard-order-strip__body {
    flex: 1;
    min-width: 0;
}

.dashboard-order-strip__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.dashboard-order-strip__title {
    font-size: 13px;
    font-weight: 850;
    text-transform: uppercase;
    color: rgba(255,255,255,.68);
}

.dashboard-order-strip__number {
    font-size: 26px;
    font-weight: 850;
    color: #fff;
}

.dashboard-order-strip__progress {
    height: 9px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,.10);
}

.dashboard-order-strip__progress-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #19d4ff, #2584ff);
}

.dashboard-order-strip--danger .dashboard-order-strip__progress-bar {
    background: linear-gradient(90deg, #ff6262, #ff3f55);
}

.dashboard-order-strip__desc {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 750;
    color: rgba(255,255,255,.55);
}

/* Actualizaciones */

.dashboard-announcements-wrap {
    min-height: 520px;
    border-radius: 22px;
    overflow: hidden;
}

.dashboard-announcements-header {
    padding: 20px 22px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.dashboard-announcements-header h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    color: #fff;
}

.dashboard-announcements-list {
    max-height: 680px;
    overflow-y: auto;
    padding: 18px;
}

.dashboard-announcement-item {
    padding: 14px;
    border-radius: 18px;
    margin-bottom: 16px;
    background:
        radial-gradient(260px 120px at 100% 0%, rgba(0,132,255,.15), transparent 65%),
        linear-gradient(145deg, rgba(17,49,92,.90), rgba(12,35,70,.95));
    border: 1px solid rgba(0,170,255,.22);
}

.dashboard-announcement-item__badge {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    margin-bottom: 13px;
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
    color: #7ed8ff;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(126,216,255,.13);
}

.dashboard-announcement-item__title {
    font-size: 17px;
    font-weight: 850;
    line-height: 1.35;
    color: #fff;
    margin-bottom: 15px;
}

.dashboard-announcement-item__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.dashboard-announcement-item__price {
    font-size: 24px;
    font-weight: 850;
    color: #7ed8ff;
}

.dashboard-announcement-item__link {
    font-size: 12px;
    font-weight: 850;
    color: rgba(255,255,255,.75);
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-announcement-item__link:hover {
    color: #fff;
}

/* Responsive */

@media (max-width: 1300px) {
    .dashboard-top-compact,
    .client-dashboard-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-kpi-grid,
    .dashboard-orders-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-kpi-card,
    .dashboard-stat-clean,
    .dashboard-order-strip {
        grid-column: span 1;
    }

    .dashboard-security-item {
        flex-wrap: wrap;
    }
}
/* =========================================================
   DASHBOARD TOP UNIFICADO
========================================================= */

.dashboard-top-compact {
    display: none !important;
}

.dashboard-top-unified {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(520px, 680px);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 22px;
    padding: 22px 24px;
    border-radius: 24px;
    background:
        radial-gradient(520px 190px at 0% 0%, rgba(0, 200, 255, .08), transparent 62%),
        linear-gradient(145deg, rgba(20, 34, 60, .94), rgba(11, 22, 43, .97));
    border: 1px solid rgba(120, 170, 255, .15);
    box-shadow: 0 12px 30px rgba(0,0,0,.16);
}

.dashboard-top-unified__welcome {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dashboard-top-unified__title {
    margin: 0;
    font-size: 30px;
    font-weight: 850;
    color: #fff;
}

.dashboard-top-unified__security {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: center;
}

.dashboard-top-unified .dashboard-security-item {
    min-height: 74px;
    padding: 14px 16px;
    background: rgba(255,255,255,.035);
}

.dashboard-top-unified .dashboard-security-item__action,
.dashboard-top-unified .dashboard-security-item__badge {
    min-width: 82px;
}

@media (max-width: 1300px) {
    .dashboard-top-unified {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-top-unified {
        padding: 18px;
    }

    .dashboard-top-unified__security {
        grid-template-columns: 1fr;
    }

    .dashboard-top-unified__title {
        font-size: 24px;
    }
}

.app-page-clean {
    width: 100%;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* =========================================================
  NUEVO 28/04 DASHBOARD - PANEL SUPERIOR CLIENTE - TOPBAR PREMIUM COMPACT
========================================================= */

.panel-topbar-premium{
  height: 66px !important;
  min-height: 66px !important;
  background:
    radial-gradient(520px 120px at 76% 0%, rgba(0,200,255,.10), transparent 65%),
    linear-gradient(180deg, rgba(15,21,36,.96), rgba(8,14,27,.98)) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
  backdrop-filter: blur(14px);
}

.panel-topbar-menu{
  gap: 10px !important;
  align-items: center !important;
}

.panel-apps-btn{
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 14px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  transition: all .22s ease;
}

.panel-credit-chip{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

.panel-credit-chip__label{
  color: rgba(255,255,255,.92);
  font-size: 11px !important;
  letter-spacing: .7px !important;
  font-weight: 700;
}

.panel-credit-chip__value{
  color: rgba(255,255,255,.96);
  font-size: 15px !important;
  font-weight: 900;
}

.panel-header-funds-btn{
  height: 42px !important;
  min-height: 42px !important;
  min-width: 162px !important;
  width: auto !important;
  padding: 0 18px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.12) !important;

  color: #fff !important;
  text-decoration: none !important;

  font-size: 13px !important;
  font-weight: 850 !important;
  letter-spacing: .2px !important;
  line-height: 1 !important;

  background: linear-gradient(135deg, #00c8ff, #147cff) !important;

  box-shadow:
    0 10px 24px rgba(0,160,255,.22),
    inset 0 1px 0 rgba(255,255,255,.16) !important;

  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}

.panel-header-funds-btn i{
  font-size: 14px !important;
  margin: 0 !important;
}

.panel-header-funds-btn:hover{
  transform: translateY(-1px) !important;
  filter: brightness(1.04) !important;
  box-shadow:
    0 14px 30px rgba(0,160,255,.28),
    0 0 18px rgba(0,200,255,.14),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.panel-user-pill{
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  min-height: 46px !important;
  padding: 5px 12px 5px 7px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  transition: all .22s ease;
}

.panel-user-pill__avatar{
  width: 36px !important;
  height: 36px !important;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(0,200,255,.18);
  box-shadow: 0 0 0 3px rgba(0,200,255,.05);
  flex-shrink: 0;
}

.panel-user-pill__avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panel-user-pill__mail{
  color: rgba(255,255,255,.94);
  font-weight: 800;
  font-size: 13px;
  font-size: 12px !important;
  max-width: 230px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-user-pill__role{
  color: rgba(0,200,255,.82);
  font-size: 10px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-top: 2px;
}

.panel-user-pill__info{
  min-width: 0;
}

.panel-user-pill__caret{
  color: rgba(255,255,255,.42);
  font-size: 12px;
  margin-left: 2px;
}

@media (max-width: 991.98px){
  .panel-topbar-menu{
    gap: 8px;
  }

  .panel-user-pill{
    padding-right: 8px;
  }
}


/* =========================
   PANEL HEADER PREMIUM
========================= */

.panel-topbar-dropdown,
.panel-user-dropdown{
  background: rgba(18,24,40,.98) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 45px rgba(0,0,0,.28);
  overflow: hidden;
}

.panel-topbar-dropdown__head,
.panel-user-dropdown__head{
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}

.panel-topbar-dropdown__title,
.panel-user-dropdown__role{
  color: rgba(255,255,255,.92);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.panel-topbar-dropdown__subtitle,
.panel-user-dropdown__mail{
  color: rgba(255,255,255,.54);
  font-size: 12px;
  margin-top: 2px;
}

.panel-topbar-select{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 12px !important;
}

.panel-topbar-mini-link{
  color: rgba(0,200,255,.92);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.panel-topbar-mini-link:hover{
  color: #fff;
}

.panel-user-dropdown .dropdown-item{
  color: rgba(255,255,255,.78) !important;
  padding: 12px 16px;
  transition: background .18s ease;
}

.panel-user-dropdown .dropdown-item:hover{
  background: rgba(255,255,255,.04);
  color: #fff !important;
}

.panel-user-dropdown .dropdown-divider{
  border-color: rgba(255,255,255,.06);
}

@media (max-width: 767.98px){
  .panel-user-chip{
    padding: 6px 8px;
  }

  .panel-user-chip__avatar{
    width: 34px;
    height: 34px;
  }
}

/* =========================
   DASHBOARD ANNOUNCEMENTS
========================= */

.dashboard-announcement-item{
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 12px;
  background:
    linear-gradient(180deg, rgba(8,33,84,.78), rgba(6,24,64,.92));
  border: 1px solid rgba(0,200,255,.12);
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.dashboard-announcement-item:hover{
  transform: translateY(-2px);
  border-color: rgba(0,200,255,.22);
  box-shadow: 0 18px 34px rgba(0,0,0,.20);
}

/* =========================
   SIDEBAR PANEL PREMIUM COMBINADO
========================= */

#sidebar.app-sidebar.app-sidebar-premium{
  margin-top: 6px !important;
  background:
    radial-gradient(520px 260px at 18% 12%, rgba(0,200,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(10,15,28,.96), rgba(7,12,24,.985));
  border-right: 1px solid rgba(255,255,255,.06);
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,.03),
    10px 0 30px rgba(0,0,0,.14);
  overflow: hidden;
}

/* Contenido */
#sidebar.app-sidebar-premium .app-sidebar-content{
  padding-top: 4px;
  padding-bottom: 10px;
  background: transparent !important;
}

/* Menú general */
#sidebar.app-sidebar-premium .menu{
  padding: 0 10px 18px;
  margin-top: 0 !important;
}

/* Headers */
#sidebar.app-sidebar-premium .menu-header{
  color: rgba(255,255,255,.38);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
  margin: 18px 10px 10px;
}

/* Divider */
#sidebar.app-sidebar-premium .menu-divider{
  height: 1px;
  margin: 16px 10px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
}

/* Item */
#sidebar.app-sidebar-premium .menu-item{
  margin-bottom: 4px;
}

#sidebar.app-sidebar-premium .menu-item.has-sub{
  position: relative;
}

/* Link principal */
#sidebar.app-sidebar-premium .menu-link{
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 2px;
  border-radius: 14px;
  color: rgba(255,255,255,.68) !important;
  text-decoration: none;
  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
  border: 1px solid transparent;
  background: transparent;
}

#sidebar.app-sidebar-premium .menu-link:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92) !important;
  transform: translateX(2px);
}

/* Activo */
#sidebar.app-sidebar-premium .menu-item.active > .menu-link{
  background: linear-gradient(135deg, rgba(0,200,255,.12), rgba(59,130,246,.10));
  border-color: rgba(0,200,255,.20);
  box-shadow: 0 0 0 1px rgba(0,200,255,.05), 0 10px 24px rgba(0,0,0,.18);
  color: #fff !important;
}

/* Expandido */
#sidebar.app-sidebar-premium .menu-item.has-sub.expand > .menu-link{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.06);
  color: #fff !important;
}

/* Iconos */
#sidebar.app-sidebar-premium .menu-icon{
  width: 26px;
  min-width: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,200,255,.92);
  font-size: 17px;
}

/* Texto */
#sidebar.app-sidebar-premium .menu-text{
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .2px;
}

/* Caret */
#sidebar.app-sidebar-premium .menu-caret{
  margin-left: auto;
  opacity: .65;
  transition: transform .28s ease, opacity .28s ease;
}

#sidebar.app-sidebar-premium .caret{
  border-top-color: rgba(255,255,255,.55) !important;
}

#sidebar.app-sidebar-premium .menu-item.has-sub.expand > .menu-link .menu-caret,
#sidebar.app-sidebar-premium .menu-item.has-sub:hover > .menu-link .menu-caret{
  transform: rotate(180deg);
}

/* Estados icono */
#sidebar.app-sidebar-premium .menu-item.active .menu-icon,
#sidebar.app-sidebar-premium .menu-item.has-sub.expand > .menu-link .menu-icon{
  color: #5ecbff;
}

/* Submenú */
#sidebar.app-sidebar-premium .menu-submenu{
  margin-top: 8px;
  margin-left: 8px;
  padding: 8px 0 4px 10px;
  border-left: 1px solid rgba(0,200,255,.12);
  position: relative;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .32s ease, transform .32s ease;
}

#sidebar.app-sidebar-premium .menu-submenu::before{
  content: "";
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(0,200,255,.0),
    rgba(0,200,255,.28),
    rgba(0,200,255,.0)
  );
}

#sidebar.app-sidebar-premium .menu-submenu .menu-item{
  margin-bottom: 6px;
}

#sidebar.app-sidebar-premium .menu-submenu .menu-link{
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.015);
  border: 1px solid transparent;
  transition: all .28s ease;
}

#sidebar.app-sidebar-premium .menu-submenu .menu-link:hover{
  background: rgba(0,200,255,.06);
  border-color: rgba(0,200,255,.14);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
  transform: translateX(2px);
}

#sidebar.app-sidebar-premium .menu-submenu .menu-icon{
  width: 22px;
  min-width: 22px;
  font-size: 15px;
  color: rgba(0,200,255,.88);
  display: flex;
  align-items: center;
  justify-content: center;
}

#sidebar.app-sidebar-premium .menu-submenu .menu-text{
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.70);
  line-height: 1.35;
}

#sidebar.app-sidebar-premium .menu-submenu .menu-item.active > .menu-link{
  background: linear-gradient(135deg, rgba(0,200,255,.10), rgba(59,130,246,.08));
  border-color: rgba(0,200,255,.18);
  box-shadow: 0 0 0 1px rgba(0,200,255,.05), 0 12px 28px rgba(0,0,0,.20);
}

#sidebar.app-sidebar-premium .menu-submenu .menu-item.active > .menu-link .menu-text{
  color: #fff;
}

#sidebar.app-sidebar-premium .menu-submenu .menu-item.active > .menu-link .menu-icon{
  color: #5ecbff;
}

/* Scrollbar */
#sidebar.app-sidebar-premium .os-scrollbar-vertical,
#sidebar.app-sidebar-premium .app-sidebar-content::-webkit-scrollbar{
  width: 8px;
}

#sidebar.app-sidebar-premium .app-sidebar-content::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius: 999px;
}
/* =========================
   APP PREMIUM
========================= */
.app{
  background:
    radial-gradient(circle at 15% 10%, rgba(0,200,255,.08), transparent 30%),
    radial-gradient(circle at 85% 20%, rgba(0,120,255,.06), transparent 35%),
    linear-gradient(180deg, #07101c 0%, #091427 50%, #060e1a 100%) !important;
}
/* =========================
   DASHBOARD ORDER STRIPS
========================= */

.dashboard-order-strip{
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 112px;
  padding: 18px 20px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)) !important;
  box-shadow:
    0 18px 36px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.dashboard-order-strip:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.11);
  box-shadow:
    0 22px 42px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.04);
}
/* =========================================================
  DASHBOARD - MIS PEDIDOS QUICK ACTION CARD
========================================================= */
.dashboard-order-strip-link {
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer;
}

.dashboard-order-strip-link:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 200, 255, .25);
}

.dashboard-order-strip--quick .dashboard-order-strip__progress-bar {
    background: linear-gradient(90deg, #19d4ff, #2584ff);
}

.dashboard-order-strip--quick .dashboard-order-strip__number {
    font-size: 20px;
    color: #7ed8ff;
}

/* =========================================================
   NUEVO CSS HASTA AQUI HE EDITADO
========================================================= */
/* =========================================================
  29/04 GLOBAL FIXES - SELECT2 / OVERFLOW
========================================================= */

html,
body,
.placeimei-detail-card__body {
    overflow: visible !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
}

.select2-container,
.select2-container--open,
.select2-dropdown {
    z-index: 999999 !important;
}

.select2-dropdown {
    position: absolute !important;
}

/* =========================================================
   GLOBAL PREMIUM GRID CARDS
   BASE COMPARTIDA PARA:
   - ALL SERVICES
   - IMEI
   - SERVER / CREDITS
   - REMOTE
========================================================= */

#servCuadros {
    position: relative;
}

#servCuadros .service-card-item {
    position: relative;
    margin-top: 16px !important;
    overflow: visible !important;
}

@media (min-width: 1400px) {
    #servCuadros .service-card-item {
        width: 25%;
    }
}

/* glow externo real en el item */
#servCuadros .service-card-item::before {
    inset: 3px;
    box-shadow:
        0 0 0 1px rgba(0, 212, 255, .08),
        0 0 18px rgba(0, 212, 255, .10),
        0 0 30px rgba(0, 120, 255, .10);
}

#servCuadros .service-card-item:hover::before {
    opacity: 1;
}

/* =========================================================
   CARD WRAPPER BASE
========================================================= */

#servCuadros .service-card-item > .allservices-grid-card,
#servCuadros .service-card-item > .placeimei-grid-card,
#servCuadros .service-card-item > .placeserver-grid-card,
#servCuadros .service-card-item > .placeremote-grid-card {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(0, 169, 255, .10) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    cursor: pointer;
    background:
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.015)),
        linear-gradient(145deg, #0b1220, #09101e) !important;
    box-shadow:
        0 8px 18px rgba(0,0,0,.18) !important;
    transform: translateY(0);
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        filter .22s ease;
}

#servCuadros .service-card-item > .allservices-grid-card.card,
#servCuadros .service-card-item > .placeimei-grid-card.card,
#servCuadros .service-card-item > .placeserver-grid-card.card,
#servCuadros .service-card-item > .placeremote-grid-card.card {
    margin: 0 !important;
}

#servCuadros .service-card-item > .allservices-grid-card:hover,
#servCuadros .service-card-item > .placeimei-grid-card:hover,
#servCuadros .service-card-item > .placeserver-grid-card:hover,
#servCuadros .service-card-item > .placeremote-grid-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 212, 255, .42) !important;
    box-shadow:
        0 0 18px rgba(0, 212, 255, .18),
        0 16px 34px rgba(0,0,0,.26) !important;
    filter: saturate(1.02);
}

#servCuadros .service-card-item > .allservices-grid-card::before,
#servCuadros .service-card-item > .allservices-grid-card::after,
#servCuadros .service-card-item > .placeimei-grid-card::before,
#servCuadros .service-card-item > .placeimei-grid-card::after,
#servCuadros .service-card-item > .placeserver-grid-card::before,
#servCuadros .service-card-item > .placeserver-grid-card::after,
#servCuadros .service-card-item > .placeremote-grid-card::before,
#servCuadros .service-card-item > .placeremote-grid-card::after {
    display: none !important;
    content: none !important;
}

/* =========================================================
   INNER
========================================================= */

.allservices-grid-card__inner,
.placeimei-grid-card__inner,
.placeserver-grid-card__inner,
.placeremote-grid-card__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* =========================================================
   HEADER
========================================================= */

.allservices-grid-card__header,
.placeimei-grid-card__header,
.placeserver-grid-card__header,
.placeremote-grid-card__header {
    position: relative;
    height: 128px;
    min-height: 128px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 12px 38px;
    background:
        radial-gradient(circle at top, rgba(20, 112, 255, .10), transparent 58%),
        linear-gradient(180deg, rgba(8, 35, 96, .88), rgba(6, 26, 72, .76));
    border-bottom: 1px solid rgba(0, 153, 255, .18);
    transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

#servCuadros .service-card-item > .allservices-grid-card:hover .allservices-grid-card__header,
#servCuadros .service-card-item > .placeimei-grid-card:hover .placeimei-grid-card__header,
#servCuadros .service-card-item > .placeserver-grid-card:hover .placeserver-grid-card__header,
#servCuadros .service-card-item > .placeremote-grid-card:hover .placeremote-grid-card__header {
    border-bottom-color: rgba(0, 212, 255, .32);
    box-shadow: inset 0 -1px 0 rgba(0, 212, 255, .10);
}

/* =========================================================
   ICON / IMAGE
========================================================= */

.allservices-grid-card__icon,
.placeimei-grid-card__icon,
.placeserver-grid-card__icon,
.placeremote-grid-card__icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.allservices-grid-card__icon--image,
.placeimei-grid-card__icon--image,
.placeserver-grid-card__icon--image,
.placeremote-grid-card__icon--image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px 0;
    width: 100%;
    height: 100%;
}

.allservices-grid-card__icon--image img,
.placeimei-grid-card__icon--image img,
.placeserver-grid-card__icon--image img,
.placeremote-grid-card__icon--image img {
    display: block;
    max-width: 92%;
    max-height: 78px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
    opacity: .98;
    filter: none !important;
}

.allservices-grid-card__icon--fallback,
.placeimei-grid-card__icon--fallback,
.placeserver-grid-card__icon--fallback,
.placeremote-grid-card__icon--fallback {
    align-items: center;
    justify-content: center;
}

.allservices-grid-card__fallback-icon,
.placeimei-grid-card__fallback-icon,
.placeserver-grid-card__fallback-icon,
.placeremote-grid-card__fallback-icon {
    font-size: 4rem;
    line-height: 1;
    color: #00d4ff;
    opacity: .95;
    text-shadow: 0 0 18px rgba(0, 212, 255, .12);
}

/* =========================================================
   BADGE
========================================================= */

.allservices-grid-card__badge,
.placeimei-grid-card__badge,
.placeserver-grid-card__badge,
.placeremote-grid-card__badge {
    position: absolute;
    left: 16px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .70rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: #aef1ff;
    background: rgba(7, 35, 55, .88);
    border: 1px solid rgba(0, 212, 255, .24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(8px);
    max-width: calc(100% - 32px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

#servCuadros .service-card-item > .allservices-grid-card:hover .allservices-grid-card__badge,
#servCuadros .service-card-item > .placeimei-grid-card:hover .placeimei-grid-card__badge,
#servCuadros .service-card-item > .placeserver-grid-card:hover .placeserver-grid-card__badge,
#servCuadros .service-card-item > .placeremote-grid-card:hover .placeremote-grid-card__badge {
    border-color: rgba(0, 212, 255, .40);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 14px rgba(0, 212, 255, .08);
}

/* =========================================================
   BODY
========================================================= */

.allservices-grid-card__body,
.placeimei-grid-card__body,
.placeserver-grid-card__body,
.placeremote-grid-card__body {
    padding: 14px 16px 8px;
    background:
        linear-gradient(180deg, rgba(3, 10, 26, .88), rgba(6, 16, 34, .94));
}

.allservices-grid-card__title,
.placeimei-grid-card__title,
.placeserver-grid-card__title,
.placeremote-grid-card__title {
    margin: 0 0 10px 0;
    color: #ffffff;
    font-size: .92rem;
    line-height: 1.22;
    font-weight: 800;
    min-height: 52px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.allservices-grid-card__meta,
.placeimei-grid-card__meta,
.placeserver-grid-card__meta,
.placeremote-grid-card__meta {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* =========================================================
   PRICE
========================================================= */

.allservices-grid-card__price,
.placeimei-grid-card__price,
.placeserver-grid-card__price,
.placeremote-grid-card__price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 60px;
    min-height: 28px;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: .68rem;
    font-weight: 800;
    color: #dff6ff;
    background: rgba(0, 212, 255, .10);
    border: 1px solid rgba(0, 212, 255, .18);
    box-shadow: none;
}

.allservices-grid-card:hover .allservices-grid-card__price,
.placeimei-grid-card:hover .placeimei-grid-card__price,
.placeserver-grid-card:hover .placeserver-grid-card__price,
.placeremote-grid-card:hover .placeremote-grid-card__price {
    color: #39FF14;
    background: rgba(20, 90, 70, .55);
    border: 1px solid rgba(80, 220, 170, .18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
/* =========================================================
   TIME
========================================================= */

.allservices-grid-card__time,
.placeimei-grid-card__time,
.placeserver-grid-card__time,
.placeremote-grid-card__time {
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: .01em;
    color: rgba(223, 232, 247, .82);
    text-transform: uppercase;
    word-break: break-word;
}

/* =========================================================
   FOOTER / PROGRESS
========================================================= */

.allservices-grid-card__footer,
.placeimei-grid-card__footer,
.placeserver-grid-card__footer,
.placeremote-grid-card__footer {
    padding: 0 16px 14px;
    margin-top: auto;
}

.allservices-grid-card__progress .progress,
.placeimei-grid-card__progress .progress,
.placeserver-grid-card__progress .progress,
.placeremote-grid-card__progress .progress {
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,.16);
    box-shadow: none !important;
}

.allservices-grid-card__progress .progress-bar,
.placeimei-grid-card__progress .progress-bar,
.placeserver-grid-card__progress .progress-bar,
.placeremote-grid-card__progress .progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, #67d2ff, #5e8fff);
}

/* =========================================================
   HELPERS
========================================================= */

.allservices-grid-card__icon--image + .allservices-grid-card__badge,
.allservices-grid-card__header .allservices-grid-card__badge,
.placeimei-grid-card__icon--image + .placeimei-grid-card__badge,
.placeimei-grid-card__header .placeimei-grid-card__badge,
.placeserver-grid-card__icon--image + .placeserver-grid-card__badge,
.placeserver-grid-card__header .placeserver-grid-card__badge,
.placeremote-grid-card__icon--image + .placeremote-grid-card__badge,
.placeremote-grid-card__header .placeremote-grid-card__badge {
    z-index: 2;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1399px) {
    .allservices-grid-card__header,
    .placeimei-grid-card__header,
    .placeserver-grid-card__header,
    .placeremote-grid-card__header {
        height: 124px;
        min-height: 124px;
        padding: 11px 11px 36px;
    }

    .allservices-grid-card__title,
    .placeimei-grid-card__title,
    .placeserver-grid-card__title,
    .placeremote-grid-card__title {
        font-size: .90rem;
        min-height: 50px;
    }
}

@media (max-width: 991px) {
    .allservices-grid-card__header,
    .placeimei-grid-card__header,
    .placeserver-grid-card__header,
    .placeremote-grid-card__header {
        height: 120px;
        min-height: 120px;
        padding: 10px 10px 34px;
    }

    .allservices-grid-card__icon--image img,
    .placeimei-grid-card__icon--image img,
    .placeserver-grid-card__icon--image img,
    .placeremote-grid-card__icon--image img {
        max-width: 78%;
        max-height: 60px;
    }

    .allservices-grid-card__body,
    .placeimei-grid-card__body,
    .placeserver-grid-card__body,
    .placeremote-grid-card__body {
        padding: 13px 14px 8px;
    }

    .allservices-grid-card__footer,
    .placeimei-grid-card__footer,
    .placeserver-grid-card__footer,
    .placeremote-grid-card__footer {
        padding: 0 14px 12px;
    }

    .allservices-grid-card__title,
    .placeimei-grid-card__title,
    .placeserver-grid-card__title,
    .placeremote-grid-card__title {
        min-height: auto;
    }

    .allservices-grid-card__fallback-icon,
    .placeimei-grid-card__fallback-icon,
    .placeserver-grid-card__fallback-icon,
    .placeremote-grid-card__fallback-icon {
        font-size: 3.4rem;
    }
}

@media (max-width: 767px) {
    .allservices-grid-card__header,
    .placeimei-grid-card__header,
    .placeserver-grid-card__header,
    .placeremote-grid-card__header {
        height: 114px;
        min-height: 114px;
        padding: 10px 10px 32px;
    }

    .allservices-grid-card__icon--image img,
    .placeimei-grid-card__icon--image img,
    .placeserver-grid-card__icon--image img,
    .placeremote-grid-card__icon--image img {
        max-width: 74%;
        max-height: 56px;
    }

    .allservices-grid-card__badge,
    .placeimei-grid-card__badge,
    .placeserver-grid-card__badge,
    .placeremote-grid-card__badge {
        min-height: 28px;
        padding: 4px 10px;
        font-size: .66rem;
    }

    .allservices-grid-card__body,
    .placeimei-grid-card__body,
    .placeserver-grid-card__body,
    .placeremote-grid-card__body {
        padding: 12px 12px 8px;
    }

    .allservices-grid-card__title,
    .placeimei-grid-card__title,
    .placeserver-grid-card__title,
    .placeremote-grid-card__title {
        font-size: .86rem;
    }

    .allservices-grid-card__price,
    .placeimei-grid-card__price,
    .placeserver-grid-card__price,
    .placeremote-grid-card__price {
        min-width: 56px;
        min-height: 26px;
        font-size: .66rem;
        padding: 3px 8px;
    }

    .allservices-grid-card__time,
    .placeimei-grid-card__time,
    .placeserver-grid-card__time,
    .placeremote-grid-card__time {
        font-size: .70rem;
    }

    .allservices-grid-card__footer,
    .placeimei-grid-card__footer,
    .placeserver-grid-card__footer,
    .placeremote-grid-card__footer {
        padding: 0 12px 12px;
    }

    .allservices-grid-card__fallback-icon,
    .placeimei-grid-card__fallback-icon,
    .placeserver-grid-card__fallback-icon,
    .placeremote-grid-card__fallback-icon {
        font-size: 3rem;
    }
}
/* =========================================================
  29/04 GLOBAL SERVICE UI / BASE V1
   Primera etapa:
   - panel superior
   - panel detalle
   - inputs / textarea
   - botón principal
   - botón volver
   - precio / delivery / info
   NO incluye todavía modo cuadros
   ========================================================= */

:root{
  --svc-bg-1: rgba(18,27,53,.96);
  --svc-bg-2: rgba(8,16,35,.98);

  --svc-control-1: rgba(60,67,78,.96);
  --svc-control-2: rgba(52,58,68,.96);
  --svc-control-3: rgba(43,52,67,.98);
  --svc-control-4: rgba(35,43,57,.98);

  --svc-text: #f4f8ff;
  --svc-text-soft: rgba(231,239,255,.92);
  --svc-text-muted: rgba(213,226,250,.92);

  --svc-border: rgba(120,162,255,.16);
  --svc-border-soft: rgba(146,173,228,.22);
  --svc-border-focus: rgba(88,148,255,.72);

  --svc-blue-1: #00d4ff;
  --svc-blue-2: #0066ff;
}
.placeimei-custom-select-wrap{
    position: relative;
}

.placeimei-custom-select{
    width: 100%;
    min-height: 58px;
    padding: 0 48px 0 18px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: linear-gradient(135deg, rgba(78,85,101,.92), rgba(63,70,84,.96)) !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 16px;
    font-weight: 600;
    outline: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer;
}

.placeimei-custom-select:hover{
    border-color: rgba(0,212,255,.28) !important;
}

.placeimei-custom-select:focus{
    border-color: rgba(0,212,255,.42) !important;
    box-shadow: 0 0 0 3px rgba(0,212,255,.10) !important;
}

.placeimei-custom-select option{
    background: #1a2233;
    color: #ffffff;
}

.placeimei-custom-select-wrap::after{
    content: "";
    position: absolute;
    right: 18px;
    top: calc(50% + 12px);
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(255,255,255,.78);
    border-bottom: 2px solid rgba(255,255,255,.78);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
    opacity: .9;
    z-index: 2;
}

/* =========================
   CARD BASE
========================= */

/* =========================
   LABELS / TEXT
========================= */

.service-ui-main-card label,
.placeimei-main-card label,
.placeimei-topbar label,
.placeimei-detail-card .form-label,
#titimei{
  color: var(--svc-text-soft);
  font-weight: 700;
  letter-spacing: .2px;
}

.placeimei-main-card .form-group label,
.service-ui-main-card .form-group label{
  display: block;
  margin-bottom: 10px;
  font-size: .98rem;
}

.placeimei-service-label h3,
.service-ui-service-label h3{
  margin: 8px 0 12px;
  font-size: clamp(1.45rem, 2vw, 2.1rem);
  font-weight: 800;
  color: #f8fbff;
  letter-spacing: .2px;
  line-height: 1.08;
}

.service-ui-delivery,
.placeimei-delivery-text,
#delivery{
  display: block;
  margin-bottom: 10px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .5px;
  color: var(--svc-text-muted);
}

.service-ui-info,
.placeimei-info-text,
#info{
  display: block;
  margin-top: 22px;
  font-size: 1.08rem;
  line-height: 1.7;
  color: rgba(231,239,255,.92);
}

#imeireq{
  display: block;
  margin-top: 8px;
  font-size: .92rem;
}
/* IMEI - TITULOS DE GRUPOS (OPTGROUP) */
.select2-results__group {
    font-weight: 700 !important;
    color: #e8efff !important;
    letter-spacing: 0.5px;
    opacity: 1 !important;
}
/* =========================
   CONTROLS
========================= */

/* =========================
   IMEI INPUT GROUP
========================= */

#imei .input-group{
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
}

#imei .input-group-prepend,
#imei .input-group-append{
  display: flex;
}

#imei .input-group-text{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px !important;
  padding: 0 16px !important;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, var(--svc-control-3), var(--svc-control-4)) !important;
  color: var(--svc-text) !important;
  border: 1px solid var(--svc-border-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

#imei .input-group-prepend .input-group-text{
  border-radius: 16px 0 0 16px !important;
  min-width: 72px;
}

#imei .form-control{
  min-height: 54px !important;
  font-size: 1rem;
  padding: 0 14px !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, var(--svc-control-1), var(--svc-control-2)) !important;
  color: var(--svc-text) !important;
  border-top: 1px solid var(--svc-border-soft) !important;
  border-bottom: 1px solid var(--svc-border-soft) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
}

#imei .input-group-append .input-group-text{
  border-radius: 0 16px 16px 0 !important;
  min-width: 42px;
  font-size: 1.1rem;
  font-weight: 800;
  padding: 0 12px !important;
}

#imei .form-control:focus{
  box-shadow: none !important;
}

#imei .input-group:focus-within .input-group-text,
#imei .input-group:focus-within .form-control{
  border-color: var(--svc-border-focus) !important;
}

#imei .input-group:focus-within{
  box-shadow: 0 0 0 4px rgba(71,132,255,.14);
  border-radius: 16px;
}
/* =========================
   PRICE / INFO / PROGRESS
========================= */

/* =========================
   ACTION BUTTONS - CLEAN RESET
========================= */

.service-ui-action-btn,
.placeimei-action-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 10px 18px !important;
  border: 1px solid rgba(0, 212, 255, 0.14) !important;
  border-radius: 16px !important;
  background: #1aa8ea !important;
  background-image: linear-gradient(90deg, #23bdea 0%, #1e9ff0 55%, #1c86ee 100%) !important;
  color: #ffffff !important;
  font-size: .98rem !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(0, 170, 255, 0.16) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden !important;
  position: relative;
}

.service-ui-action-btn:hover,
.placeimei-action-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 14px 28px rgba(0, 170, 255, 0.20) !important;
}

.service-ui-action-btn:focus,
.placeimei-action-btn:focus{
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(0, 212, 255, 0.10),
    0 10px 24px rgba(0, 170, 255, 0.16) !important;
}

.service-ui-action-btn:active,
.placeimei-action-btn:active{
  transform: translateY(0);
  filter: brightness(1);
}

/* =========================
   ACTION BUTTONS
========================= */

.service-ui-action-btn--back,
.placeimei-action-btn--back{
  justify-content: center;
  border: 1px solid rgba(0,212,255,.12) !important;
  background: linear-gradient(135deg, rgba(20,35,70,.82), rgba(10,20,40,.90)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}

.placeimei-action-btn--back .back-icon,
.service-ui-action-btn--back .back-icon{
  width: 10px;
  height: 10px;
  border-left: 2px solid rgba(255,255,255,.9);
  border-bottom: 2px solid rgba(255,255,255,.9);
  transform: rotate(45deg);
  display: inline-block;
}

.placeimei-action-btn--back:hover .back-icon,
.service-ui-action-btn--back:hover .back-icon{
  transform: translateX(-3px) rotate(45deg);
  transition: all .2s ease;
}
.placeimei-action-btn--back:hover{
  border-color: rgba(0,212,255,.24) !important;
  box-shadow:
    0 0 0 2px rgba(0,212,255,.05),
    0 0 16px rgba(0,212,255,.05),
    0 10px 22px rgba(0,0,0,.18) !important;
}

/* =========================
   CUSTOM FIELDS SPACING
========================= */

#camposcustom{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#camposcustom > div,
#camposcustom .form-group{
  margin-bottom: 4px !important;
}

#camposcustom label{
  display: block;
  margin-bottom: 4px !important;
}

#camposcustom .form-control,
#camposcustom .form-select{
  min-height: 48px !important;
  border-radius: 14px !important;
}

#camposcustom .text-danger{
  display: block;
  margin-top: 4px;
  font-size: .85rem;
  line-height: 1.2;
}

#camposcustom br{
  display: none;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 991.98px){
  .service-ui-detail-col--info,
  .placeimei-detail-col--info{
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 18px;
    padding-top: 22px;
  }
}

@media (max-width: 767.98px){
  .service-ui-main-card__body,
  .placeimei-main-card__body,
  .service-ui-detail-card__body,
  .placeimei-detail-card__body{
    padding: 14px !important;
  }

  .service-ui-action-btn,
  .placeimei-action-btn{
    width: 100%;
    min-height: 48px;
  }

  .service-ui-action-btn--back,
  .placeimei-action-btn--back,
  #placeorder.placeimei-action-btn{
    min-width: 100%;
  }

  .service-ui-textarea,
  .placeimei-textarea{
    min-height: 160px !important;
  }

  .service-ui-price h2,
  .placeimei-costo h2,
  #costo h2{
    font-size: clamp(2.1rem, 8vw, 2.8rem);
  }
}
/* =========================
   TOP SELECTS / PREMIUM BASE
========================= */

.placeimei-main-card,
.placeimei-detail-card,
.placeimei-main-card .form-control,
.placeimei-main-card .form-select,
.placeimei-detail-card .form-control,
.placeimei-detail-card .form-select,
#grupos,
#service{
  font-family: inherit !important;
}

.placeimei-main-card .form-control,
.placeimei-main-card .form-select,
.placeimei-detail-card .form-control,
.placeimei-detail-card .form-select,
#grupos,
#service{
  font-size: 1rem !important;
  font-weight: 500 !important;
  letter-spacing: .2px;
}

.placeimei-main-card select.form-control,
.placeimei-main-card select.form-select,
#grupos,
#service{
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
min-height: 58px !important;
height: 58px !important;
padding: 0 52px 0 18px !important;
  background:
    linear-gradient(135deg, rgba(21,33,58,.96), rgba(12,22,42,.98)) !important;
  border: 1px solid rgba(0,212,255,.18) !important;
  color: #f4f8ff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 10px 24px rgba(0,0,0,.18) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
  cursor: pointer;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 12px 12px !important;
  background-image:
    linear-gradient(135deg, rgba(21,33,58,.96), rgba(12,22,42,.98)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}

.placeimei-main-card select.form-control:hover,
.placeimei-main-card select.form-select:hover,
#grupos:hover,
#service:hover{
  border-color: rgba(0,212,255,.30) !important;
  box-shadow:
    0 0 0 2px rgba(0,212,255,.05),
    0 12px 26px rgba(0,0,0,.20) !important;
}

.placeimei-main-card select.form-control:focus,
.placeimei-main-card select.form-select:focus,
#grupos:focus,
#service:focus{
  outline: none !important;
  border-color: rgba(0,212,255,.40) !important;
  box-shadow:
    0 0 0 3px rgba(0,212,255,.08),
    0 0 18px rgba(0,140,255,.08) !important;
}
.placeimei-detail-col,
.service-ui-detail-col{
  padding-top: 10px;
  padding-bottom: 10px;
}

.placeimei-info-text,
.service-ui-info,
#info{
  margin-top: 18px;
}

.placeimei-delivery-text,
.service-ui-delivery,
#delivery{
  margin-bottom: 8px;
}
/* =========================
   TOP SELECT WRAP / LABEL BALANCE
========================= */

.placeimei-main-card .form-group{
  margin-bottom: 18px !important;
}

.placeimei-main-card .form-group:last-child{
  margin-bottom: 0 !important;
}

.placeimei-main-card label{
  display: block;
  margin-bottom: 10px !important;
  font-size: .98rem !important;
  font-weight: 700 !important;
  color: rgba(232,239,255,.96) !important;
}

.placeimei-main-card .form-control,
.placeimei-main-card .form-select{
  width: 100%;
}
#grupos,
#service{
  background-color: transparent !important;
  color: #f4f8ff !important;
}
/* =========================
  NEGRITAS FIELDS
========================= */
#camposcustom label,
.placeimei-detail-card label,
.placeimei-detail-card .form-label{
  font-weight: 700 !important;
  color: rgba(232,239,255,.96) !important;
}
/* =========================
   SELECT2 PREMIUM / FORCE FINAL
========================= */

/* =========================
   SELECT2 DROPDOWN / HOVER + ACTIVE
========================= */

/* =========================
   REMOTE LIST / SPACE BETWEEN GROUP AND SERVICE
========================= */

/* =========================
   SERVER LIST / FLECHA PROPIA
========================= */


/* =========================
   ALL SERVICES SOLO ESTA VISTA CUADROS
========================= */

/* =========================
   MODO CUADROS / TOPBAR
========================= */

#buscarServCuadros .form-group,
#buscarServCuadros .col-md-4,
#buscarServCuadros .col-md-8{
  margin-bottom: 0 !important;
}

#buscarService,
#buscarServCuadros .form-control{
  min-height: 50px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(21,33,58,.96), rgba(12,22,42,.98)) !important;
  border: 1px solid rgba(0,212,255,.16) !important;
  color: #f4f8ff !important;
  font-size: .98rem !important;
  font-weight: 500 !important;
  letter-spacing: .2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 8px 18px rgba(0,0,0,.16) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

#buscarService::placeholder{
  color: rgba(244,248,255,.55) !important;
}

#buscarService:hover,
#buscarServCuadros .form-control:hover{
  border-color: rgba(0,212,255,.34) !important;
  box-shadow:
    0 0 0 2px rgba(0,212,255,.07),
    0 0 16px rgba(0,212,255,.05),
    0 12px 26px rgba(0,0,0,.20) !important;
  transform: translateY(-1px);
}

#buscarService:focus,
#buscarServCuadros .form-control:focus{
  outline: none !important;
  border-color: rgba(0,212,255,.40) !important;
  box-shadow:
    0 0 0 3px rgba(0,212,255,.08),
    0 0 18px rgba(0,140,255,.08) !important;
}
/* =========================
   MODO CUADROS / BACK BUTTON
========================= */

.placeimei-action-btn--back{
  min-height: 50px !important;
  border-radius: 16px !important;
}
/* =========================
   CUADROS / SELECT2 FORCE
========================= */

/* ocultar nativo viejo */
#buscarServCuadros #gruposCuadros{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
}

/* contenedor select2 visible y premium */
#buscarServCuadros #gruposCuadros + .select2-container{
  width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 3 !important;
}

/* caja cerrada */
#buscarServCuadros #gruposCuadros + .select2-container .select2-selection--single{
  min-height: 50px !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 48px 0 16px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(21,33,58,.96), rgba(12,22,42,.98)) !important;
  border: 1px solid rgba(0,212,255,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 8px 18px rgba(0,0,0,.16) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

/* texto */
#buscarServCuadros #gruposCuadros + .select2-container .select2-selection__rendered{
  color: #f4f8ff !important;
  font-size: .98rem !important;
  font-weight: 500 !important;
  line-height: 50px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* flecha */
#buscarServCuadros #gruposCuadros + .select2-container .select2-selection__arrow{
  height: 100% !important;
  width: 42px !important;
  right: 10px !important;
  top: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#buscarServCuadros #gruposCuadros + .select2-container .select2-selection__arrow b{
  border: none !important;
  width: 10px !important;
  height: 10px !important;
  margin: 0 !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
}

#buscarServCuadros #gruposCuadros + .select2-container .select2-selection__arrow b::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(244,248,255,.94);
  border-bottom: 2px solid rgba(244,248,255,.94);
  transform: translate(-50%, -65%) rotate(45deg);
}

/* hover */
#buscarServCuadros #gruposCuadros + .select2-container:hover .select2-selection--single{
  border-color: rgba(0,212,255,.34) !important;
  box-shadow:
    0 0 0 2px rgba(0,212,255,.07),
    0 0 16px rgba(0,212,255,.06),
    0 12px 26px rgba(0,0,0,.20) !important;
  transform: translateY(-1px);
}

/* open/focus */
#buscarServCuadros #gruposCuadros + .select2-container.select2-container--open .select2-selection--single,
#buscarServCuadros #gruposCuadros + .select2-container.select2-container--focus .select2-selection--single{
  border-color: rgba(0,212,255,.40) !important;
  box-shadow:
    0 0 0 3px rgba(0,212,255,.08),
    0 0 18px rgba(0,140,255,.08) !important;
}

/* dropdown abierto del grupo cuadros */
#buscarServCuadros #gruposCuadros + .select2-container .select2-dropdown{
  background: linear-gradient(180deg, rgba(19,27,42,.98), rgba(11,18,32,.99)) !important;
  border: 1px solid rgba(0,212,255,.16) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,.34),
    0 0 18px rgba(0,212,255,.06) !important;
}
.select2-results{
  overflow-x: hidden !important;
}

.select2-results__options{
  overflow-x: hidden !important;
}

.select2-container--open .select2-dropdown{
  scrollbar-width: thin;
}
.service-card-item{
  cursor: pointer !important;
}

/* SERVER CUADROS / MOBILE STACK FIX */
@media (max-width: 767.98px){

  #buscarServCuadros .row > [class*="col-"],
  #buscarServCuadros > [class*="col-"]{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  #buscarServCuadros .col-xl-4,
  #buscarServCuadros .col-lg-5,
  #buscarServCuadros .col-md-6,
  #buscarServCuadros .col-xl-8,
  #buscarServCuadros .col-lg-7{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  #buscarServCuadros label{
    display: block !important;
    margin-bottom: 10px !important;
    line-height: 1.25 !important;
  }

  #buscarService,
  #buscarServCuadros .form-control,
  #buscarServCuadros #gruposCuadros + .select2-container,
  #buscarServCuadros #gruposCuadros + .select2-container .select2-selection--single{
    width: 100% !important;
    min-width: 100% !important;
  }

  #buscarServCuadros .form-group{
    margin-bottom: 16px !important;
  }

  #buscarServCuadros{
    row-gap: 0 !important;
  }
}
/* =========================================================
  29/04 PLACE - SERVICE ORDER GLOBAL V2 — SELECTS / SELECT2 / CHOSEN
   IMEI + SERVER + REMOTE + ALL SERVICES
========================================================= */

/* Contenedores con dropdown visible */
.placeimei-main-card,
.placeimei-main-card__body,
.placeimei-detail-card,
.placeimei-detail-card__body,
.allservices-products,
.allservices-select-wrap,
.allservices-select-wrap .card-body,
#buscarServCuadros {
    overflow: visible !important;
}

/* Z-index global para dropdowns */
.select2-container,
.select2-container--open,
.select2-dropdown,
.chosen-container,
.chosen-container .chosen-drop {
    z-index: 999999 !important;
}

/* Ocultar selects nativos cuando se usa Select2 */
.placeimei-main-card #grupos,
.placeimei-main-card #service,
.server-list-selects #grupos,
.server-list-selects #service,
.remote-list-selects #grupos,
.remote-list-selects #service {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Mostrar Select2/Chosen */
.placeimei-main-card.placeimei-select2-ready .select2-container,
.server-list-selects .select2-container,
.remote-list-selects .select2-container,
.server-list-selects .chosen-container,
.remote-list-selects .chosen-container,
.allservices-products .select2-container {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 100% !important;
}

/* Select2 cerrado global */
.placeimei-main-card #grupos + .select2-container .select2-selection--single,
.placeimei-main-card #service + .select2-container .select2-selection--single,
.server-list-selects #grupos + .select2-container .select2-selection--single,
.server-list-selects #service + .select2-container .select2-selection--single,
.remote-list-selects #grupos + .select2-container .select2-selection--single,
.remote-list-selects #service + .select2-container .select2-selection--single,
.allservices-products .select2-container .select2-selection--single {
    min-height: 58px !important;
    height: 58px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 48px 0 18px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(21,33,58,.96), rgba(12,22,42,.98)) !important;
    border: 1px solid rgba(0,212,255,.18) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 10px 24px rgba(0,0,0,.18) !important;
}

/* Texto Select2 */
.placeimei-main-card .select2-selection__rendered,
.server-list-selects .select2-selection__rendered,
.remote-list-selects .select2-selection__rendered,
.allservices-products .select2-selection__rendered {
    color: #f4f8ff !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 58px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Flecha Select2 */
.placeimei-main-card .select2-selection__arrow,
.server-list-selects .select2-selection__arrow,
.remote-list-selects .select2-selection__arrow,
.allservices-products .select2-selection__arrow {
    height: 100% !important;
    width: 42px !important;
    right: 10px !important;
    top: 0 !important;
}

/* Hover / abierto */
.placeimei-main-card .select2-container:hover .select2-selection--single,
.server-list-selects .select2-container:hover .select2-selection--single,
.remote-list-selects .select2-container:hover .select2-selection--single,
.allservices-products .select2-container:hover .select2-selection--single,
.select2-container--open .select2-selection--single {
    border-color: rgba(0,212,255,.40) !important;
    box-shadow:
        0 0 0 3px rgba(0,212,255,.08),
        0 0 18px rgba(0,140,255,.08) !important;
}

/* Dropdown Select2 */
.select2-container--open .select2-dropdown {
    background: linear-gradient(180deg, rgba(19,27,42,.98), rgba(11,18,32,.99)) !important;
    border: 1px solid rgba(0,212,255,.16) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow:
        0 18px 40px rgba(0,0,0,.34),
        0 0 18px rgba(0,212,255,.06) !important;
}

/* Opciones */
.select2-results {
    padding: 8px !important;
}

.select2-results__option {
    margin: 2px 0 !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    font-size: .98rem !important;
    font-weight: 500 !important;
    color: #eef5ff !important;
    background: transparent !important;
}

.select2-results__option--highlighted[aria-selected],
.select2-results__option--highlighted[aria-selected="true"],
.select2-results__option--highlighted.select2-results__option--selectable {
    background: linear-gradient(135deg, rgba(0,212,255,.12), rgba(0,102,255,.10)) !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 0 0 1px rgba(0,212,255,.14),
        0 0 12px rgba(0,212,255,.05) !important;
}


/* =========================================================
   PLACE - SELECT2 PREMIUM DARK - DEFINITIVO
========================================================= */

.select2-container--open .select2-dropdown {
    background:
        linear-gradient(180deg, rgba(12, 24, 48, .98), rgba(6, 14, 30, .99)) !important;
    border: 1px solid rgba(0,212,255,.18) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow:
        0 18px 40px rgba(0,0,0,.38),
        0 0 18px rgba(0,212,255,.08) !important;
}

.select2-container--open .select2-search--dropdown {
    padding: 14px !important;
    background:
        linear-gradient(180deg, rgba(12, 24, 48, .98), rgba(8, 18, 38, .98)) !important;
}

.select2-container--open .select2-search--dropdown .select2-search__field {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;

    background: rgba(5, 14, 32, .98) !important;
    border: 1px solid rgba(0,212,255,.30) !important;
    color: #ffffff !important;

    outline: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 0 16px rgba(0,212,255,.08) !important;
}

.select2-container--open .select2-search--dropdown .select2-search__field:focus {
    border-color: rgba(0,212,255,.55) !important;
    box-shadow:
        0 0 0 3px rgba(0,212,255,.10),
        0 0 20px rgba(0,140,255,.14) !important;
}

.select2-container--open .select2-results {
    background:
        linear-gradient(180deg, rgba(12, 24, 48, .98), rgba(7, 16, 34, .99)) !important;
}

.select2-container--open .select2-results__options {
    background: transparent !important;
    padding: 8px !important;
}

.select2-container--open .select2-results__option {
    background: transparent !important;
    color: rgba(245,248,255,.92) !important;
    border-radius: 12px !important;
}

.select2-container--open .select2-results__option--highlighted[aria-selected],
.select2-container--open .select2-results__option--highlighted.select2-results__option--selectable {
    background: linear-gradient(135deg, rgba(0,212,255,.14), rgba(30,120,255,.12)) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(0,212,255,.16) !important;
}

.select2-container--open .select2-results__option[aria-selected="true"] {
    background: rgba(0,212,255,.10) !important;
    color: #ffffff !important;
}
/* =========================================================
   PANEL SUPERIOR - CARD SUAVE SIN LÍNEAS DURAS
========================================================= */

.placeimei-main-card,
.service-ui-main-card {
    border: 1px solid rgba(120, 170, 255, .07) !important;
    background:
        radial-gradient(520px 160px at 0% 0%, rgba(0, 200, 255, .045), transparent 65%),
        linear-gradient(145deg, rgba(17, 30, 58, .72), rgba(8, 17, 36, .82)) !important;
    box-shadow:
        0 18px 42px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.placeimei-main-card::before,
.placeimei-main-card::after,
.service-ui-main-card::before,
.service-ui-main-card::after {
    display: none !important;
    content: none !important;
}
/* =========================================================
  PLACE - ICONO RELOJ / $ ALL SERVICES
========================================================= */
.allservices-time-icon,
.allservices-option-time .bi-clock-history {
    color: #00c8ff !important;
    opacity: 1 !important;
    margin-right: 5px;
    text-shadow: 0 0 10px rgba(0, 200, 255, .22);
}
.allservices-option-price {
    color: #7bd3ff !important;
    font-weight: 800 !important;
    text-shadow: 0 0 10px rgba(0, 200, 255, .12);
}

.allservices-option-sep {
    color: rgba(255,255,255,.32) !important;
}
/* =========================================================
  PLACE - BOTON BUSCAR ALL SERVICES
========================================================= */
.allservices-filter-btn {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 16px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    line-height: 1 !important;
    text-decoration: none !important;

    background: linear-gradient(135deg, #16c8ff 0%, #1f88ff 100%) !important;
    box-shadow:
        0 12px 24px rgba(0, 150, 255, .18),
        inset 0 1px 0 rgba(255,255,255,.10) !important;

    transform: none !important;
    overflow: hidden !important;
}

.allservices-filter-btn:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.04);
}
.allservices-filter-form .row {
    align-items: center !important;
}

.allservices-filter-btn {
    margin-top: 0 !important;
    align-self: center !important;
}
/* =========================================================
   PLACE ORDER DETAIL PANEL — PREMIUM V1
   IMEI / SERVER / REMOTE / ALL SERVICES
========================================================= */

.placeimei-detail-card,
.service-ui-detail-card {
    border: 1px solid rgba(80, 130, 210, .10) !important;
    border-radius: 26px !important;
    background:
        radial-gradient(520px 200px at 0% 0%, rgba(0, 200, 255, .045), transparent 68%),
        linear-gradient(145deg, rgba(15, 28, 56, .76), rgba(7, 15, 34, .90)) !important;
    box-shadow:
        0 18px 42px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.025) !important;
    overflow: hidden !important;
}

.placeimei-detail-card__body,
.service-ui-detail-card__body {
    padding: 24px !important;
}

.placeimei-detail-col,
.service-ui-detail-col {
    padding: 18px 22px !important;
}

.placeimei-detail-col--info,
.service-ui-detail-col--info {
    border-left: 1px solid rgba(120, 170, 255, .08) !important;
}

/* Inputs / textarea / selects del pedido */
.placeimei-detail-card input.form-control,
.placeimei-detail-card textarea.form-control,
.placeimei-detail-card select.form-select,
.placeimei-textarea,
.service-ui-textarea,
#camposcustom input,
#camposcustom textarea,
#camposcustom select,
#camposcustom_server input,
#camposcustom_server textarea,
#camposcustom_server select,
#camposcustom_remote input,
#camposcustom_remote textarea,
#camposcustom_remote select {
    background:
        linear-gradient(145deg, rgba(18, 31, 58, .98), rgba(10, 20, 40, .98)) !important;
    border: 1px solid rgba(100, 150, 230, .16) !important;
    color: #f4f8ff !important;
    border-radius: 16px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 8px 18px rgba(0,0,0,.10) !important;
}

.placeimei-detail-card input.form-control,
.placeimei-detail-card select.form-select,
#camposcustom input,
#camposcustom select,
#camposcustom_server input,
#camposcustom_server select,
#camposcustom_remote input,
#camposcustom_remote select {
    min-height: 54px !important;
    height: 54px !important;
    padding: 0 16px !important;
}

.placeimei-detail-card textarea.form-control,
.placeimei-textarea,
.service-ui-textarea,
#camposcustom textarea,
#camposcustom_server textarea,
#camposcustom_remote textarea {
    min-height: 150px !important;
    padding: 16px !important;
}

.placeimei-detail-card input:focus,
.placeimei-detail-card textarea:focus,
.placeimei-detail-card select:focus,
#camposcustom input:focus,
#camposcustom textarea:focus,
#camposcustom select:focus,
#camposcustom_server input:focus,
#camposcustom_server textarea:focus,
#camposcustom_server select:focus,
#camposcustom_remote input:focus,
#camposcustom_remote textarea:focus,
#camposcustom_remote select:focus {
    border-color: rgba(0, 200, 255, .45) !important;
    box-shadow:
        0 0 0 3px rgba(0,200,255,.08),
        0 0 18px rgba(0,140,255,.10),
        inset 0 1px 0 rgba(255,255,255,.035) !important;
    outline: none !important;
}

/* Labels */
.placeimei-detail-card label,
.placeimei-detail-card .form-label,
#camposcustom label,
#camposcustom_server label,
#camposcustom_remote label {
    color: rgba(235, 244, 255, .90) !important;
    font-size: .92rem !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    margin-bottom: 9px !important;
}

/* Precio / información derecha */
.placeimei-costo h2,
#costo h2 {
    font-size: clamp(2.3rem, 3vw, 3.2rem) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    letter-spacing: -.04em !important;
    text-shadow: 0 0 16px rgba(255,255,255,.05);
}

#delivery,
.placeimei-delivery-text,
.service-ui-delivery {
    color: rgba(215, 232, 255, .88) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
}

.placeimei-detail-card .progress {
    height: 5px !important;
    background: rgba(255,255,255,.07) !important;
}

.placeimei-detail-card .progress-bar {
    background: linear-gradient(90deg, #67d2ff, #5e8fff) !important;
}

/* Botón realizar pedido */
.placeimei-action-btn,
.service-ui-action-btn,
#placeorder {
    min-height: 54px !important;
    border-radius: 16px !important;
    font-size: 1rem !important;
    font-weight: 850 !important;
    background: linear-gradient(135deg, #17c8ff 0%, #1f86ff 100%) !important;
    border: 1px solid rgba(80, 190, 255, .22) !important;
    box-shadow:
        0 14px 28px rgba(0, 150, 255, .18),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.placeimei-action-btn:hover,
.service-ui-action-btn:hover,
#placeorder:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.04);
}

/* Input group IMEI */
#imei .input-group-text,
#imei .form-control {
    background:
        linear-gradient(145deg, rgba(18, 31, 58, .98), rgba(10, 20, 40, .98)) !important;
    border-color: rgba(100, 150, 230, .16) !important;
}

#imei .input-group:focus-within {
    box-shadow: 0 0 0 3px rgba(0,200,255,.08) !important;
}
/* =========================================================
   ALL SERVICES / PLACE ORDER - CAMPOS MÁS VISIBLES
   IMEI + CUSTOM FIELDS + TEXTAREA + SELECTS
========================================================= */

#camposcustom input,
#camposcustom textarea,
#camposcustom select,
#camposcustom .placeimei-custom-select,
#camposcustom_server input,
#camposcustom_server textarea,
#camposcustom_server select,
#camposcustom_server .placeimei-custom-select,
#camposcustom_remote input,
#camposcustom_remote textarea,
#camposcustom_remote select,
#camposcustom_remote .placeimei-custom-select,
.placeimei-detail-card input.form-control,
.placeimei-detail-card textarea.form-control,
.placeimei-detail-card select.form-select {
    background:
        linear-gradient(145deg, rgba(20, 36, 68, .98), rgba(13, 26, 52, .98)) !important;
    border: 1px solid rgba(90, 180, 255, .26) !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 0 0 1px rgba(0,200,255,.035),
        0 10px 22px rgba(0,0,0,.14) !important;
}

/* Placeholder más visible */
#camposcustom input::placeholder,
#camposcustom textarea::placeholder,
#camposcustom_server input::placeholder,
#camposcustom_server textarea::placeholder,
#camposcustom_remote input::placeholder,
#camposcustom_remote textarea::placeholder,
.placeimei-detail-card input::placeholder,
.placeimei-detail-card textarea::placeholder {
    color: rgba(235,245,255,.62) !important;
}

/* Focus más claro */
#camposcustom input:focus,
#camposcustom textarea:focus,
#camposcustom select:focus,
#camposcustom_server input:focus,
#camposcustom_server textarea:focus,
#camposcustom_server select:focus,
#camposcustom_remote input:focus,
#camposcustom_remote textarea:focus,
#camposcustom_remote select:focus,
.placeimei-detail-card input.form-control:focus,
.placeimei-detail-card textarea.form-control:focus,
.placeimei-detail-card select.form-select:focus {
    border-color: rgba(0, 210, 255, .62) !important;
    box-shadow:
        0 0 0 3px rgba(0,210,255,.12),
        0 0 22px rgba(0,160,255,.13),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Select custom con flecha premium */
#camposcustom .placeimei-custom-select-wrap::after,
#camposcustom_server .placeimei-custom-select-wrap::after,
#camposcustom_remote .placeimei-custom-select-wrap::after {
    border-right-color: rgba(120,220,255,.95) !important;
    border-bottom-color: rgba(120,220,255,.95) !important;
    opacity: 1 !important;
}

/* IMEI input group más visible */
#imei .input-group-text,
#imei .form-control {
    background:
        linear-gradient(145deg, rgba(20, 36, 68, .98), rgba(13, 26, 52, .98)) !important;
    border-color: rgba(90, 180, 255, .26) !important;
    color: #ffffff !important;
}

#imei .input-group:focus-within {
    box-shadow:
        0 0 0 3px rgba(0,210,255,.12),
        0 0 22px rgba(0,160,255,.13) !important;
}
/* PLACE ORDER - PRECIO Y TIEMPO MÁS COMPACTOS */

.placeimei-costo h2,
#costo h2 {
    font-size: clamp(1.8rem, 2.2vw, 2.35rem) !important;
    margin-bottom: 14px !important;
}

#delivery,
.placeimei-delivery-text,
.service-ui-delivery {
    font-size: .92rem !important;
    letter-spacing: .03em !important;
    margin-bottom: 8px !important;
}

.placeimei-detail-card .progress {
    max-width: 70% !important;
}
/* =========================================================
   PLACE NUEVO MARGEN
========================================================= */
/* REDUCIR ESPACIO DE GRUPOS (IMEI / SERVER / REMOTE) */
.select2-results__group {
    font-weight: 600;
    color: rgba(120, 220, 255, .75) !important;
    letter-spacing: .02em;
}

/* OPCIONES MÁS COMPACTAS */
.select2-results__option {
    padding: 8px 14px !important;
    font-size: 14.5px !important;
}

/* ELIMINAR ESPACIO EXTRA ENTRE BLOQUES */
.select2-results__options {
    padding: 6px 0 !important;
}

/* SELECT2 - COMPACTAR OPTGROUP + SERVICIOS */
.select2-results__option[role="group"] {
    padding: 0 !important;
    margin: 0 !important;
}

.select2-results__option[role="group"] > strong,
.select2-results__group {
    display: block !important;
    padding: 8px 14px 4px !important;
    margin: 0 !important;
    font-size: 14.5px !important;
    line-height: 1.1 !important;
    color: rgba(120, 220, 255, .78) !important;
}

/* ALL SERVICES - TEXTO SELECT EN BLANCO */
#allservices_service_list + .select2-container .select2-selection__rendered,
#allservices_service_list + .select2-container .select2-selection__placeholder {
    color: #ffffff !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

/* También por si Select2 mete span interno */
#allservices_service_list + .select2-container .select2-selection__rendered span {
    color: #ffffff !important;
}

/* =========================================================
  PLACE - ALL SERVICES - FIX DROPDOWN POR ENCIMA DE FILTROS
========================================================= */

.allservices-products,
.allservices-products .row,
.allservices-products .card,
.allservices-products .card-body,
.allservices-select-wrap,
.allservices-select-wrap .card-body,
.placeimei-main-card,
.placeimei-main-card__body {
    overflow: visible !important;
}

.allservices-filter-form {
    position: relative !important;
    z-index: 20 !important;
}

.allservices-select-wrap {
    position: relative !important;
    z-index: 10 !important;
}

.select2-container--open {
    z-index: 9999999 !important;
}

.select2-dropdown {
    z-index: 9999999 !important;
}

.select2-container--open .select2-dropdown {
    position: absolute !important;
}
/* =========================================================
   NUEVO CSS HASTA AQUI HE EDITADO
========================================================= */
/* =========================
   PERFIL BROWSER SESSIONS
========================= */

.profile-dark-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)),
        linear-gradient(135deg, #0b1020, #0a0f1f 45%, #0c1226);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    padding: 1.1rem !important;
    box-shadow:
        0 12px 32px rgba(0,0,0,.35),
        0 0 0 1px rgba(255,255,255,.02) inset;
}

.profile-section-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: .2px;
    line-height: 1.2;
    margin-bottom: .35rem;
}

.profile-section-description {
    color: rgba(255,255,255,.72);
    font-size: 1rem;
    line-height: 1.65;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    max-width: 900px;
}

.profile-section-intro {
    color: rgba(255,255,255,.78);
    font-size: .95rem;
    line-height: 1.75;
    margin-top: .35rem !important;
    margin-bottom: .85rem !important;
    padding: .95rem 1.05rem !important;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
}

.profile-sessions-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: .7rem !important;
}

.profile-session-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 1rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025));
    border: 1px solid rgba(255,255,255,.07);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.profile-session-item:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 212, 255, .30);
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.profile-session-icon {
    width: 52px;
    min-width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8edfff;
    background: linear-gradient(135deg, rgba(0,212,255,.16), rgba(0,102,255,.16));
    border: 1px solid rgba(0,212,255,.20);
    box-shadow: inset 0 0 16px rgba(255,255,255,.03);
}

.profile-session-icon svg {
    width: 24px;
    height: 24px;
}

.profile-session-body {
    flex: 1;
    min-width: 0;
}

.profile-session-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.profile-session-device {
    color: #fff;
    font-weight: 700;
    font-size: .98rem;
    word-break: break-word;
}

.profile-session-meta {
    color: rgba(255,255,255,.66);
    font-size: .88rem;
    line-height: 1.6;
    word-break: break-word;
}

.profile-session-separator {
    margin: 0 6px;
    color: rgba(255,255,255,.35);
}

.profile-session-badge {
    display: inline-flex;
    align-items: center;
    padding: .35rem .7rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    color: #b8ffd8;
    background: rgba(40, 167, 69, .16);
    border: 1px solid rgba(40, 167, 69, .28);
}

.profile-session-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: .95rem !important;
    margin-bottom: .35rem !important;
}

.profile-btn-primary,
.profile-btn-secondary,
.profile-btn-danger {
    border: 0;
    border-radius: 14px;
    padding: .85rem 1.2rem;
    font-weight: 800;
    font-size: .92rem;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, filter .18s ease;
}

.profile-btn-primary:hover,
.profile-btn-secondary:hover,
.profile-btn-danger:hover {
    transform: translateY(-1px);
}

.profile-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #00d4ff, #0066ff);
    box-shadow: 0 0 26px rgba(0, 212, 255, .24);
}

.profile-btn-secondary {
    color: #fff;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
}

.profile-btn-danger {
    color: #fff;
    background: linear-gradient(135deg, #ff5f6d, #d90429);
    box-shadow: 0 0 24px rgba(217, 4, 41, .22);
}

.profile-done-message {
    color: #7fffd4;
    font-weight: 700;
}

/* =========================
   MODAL CONFIRMACION
========================= */

.jetstream-modal .bg-gray-100 {
    display: none !important;
}

.jetstream-modal .bg-white {
    border-radius: 18px !important;
    box-shadow:
        0 20px 50px rgba(0,0,0,.22),
        0 0 0 1px rgba(0,0,0,.04) !important;
    overflow: hidden !important;
}

.profile-modal-heading {
    text-align: center;
    margin-bottom: .7rem;
}

.profile-modal-title {
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: .3rem;
    color: #1a1a1a;
    letter-spacing: .2px;
}

.profile-modal-subtitle {
    font-size: .96rem;
    line-height: 1.5;
    color: rgba(26,26,26,.72);
}

.profile-modal-shell {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    text-align: center;
    padding: 1.1rem 1rem 1rem;
    box-sizing: border-box;
}

.profile-modal-message {
    max-width: 460px;
    margin: 0 auto .95rem auto;
    font-size: .96rem;
    line-height: 1.6;
    color: #4b5563;
    text-align: center;
}

.profile-modal-field {
    margin-bottom: .85rem;
}

.profile-input-password {
    width: 100% !important;
    max-width: 420px !important;
    min-height: 44px !important;
    margin: 0 auto !important;
    display: block !important;
    border-radius: 12px !important;
    padding: .7rem .9rem !important;
    font-size: .95rem !important;
    color: #111827 !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

.profile-modal-actions-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.profile-btn-cancel,
.profile-btn-confirm {
    min-width: 170px;
    max-width: 200px;
    min-height: 42px;
    padding: .7rem 1rem;
    border: 0 !important;
    border-radius: 12px;
    font-size: .94rem;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
    transition: transform .18s ease, box-shadow .18s ease;
}

.profile-btn-cancel:hover,
.profile-btn-confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0,0,0,.14);
}

.profile-btn-cancel {
    background: linear-gradient(135deg, #32a8e8, #228be6) !important;
    color: #fff !important;
}

.profile-btn-confirm {
    background: linear-gradient(135deg, #ff2a2a, #e00000) !important;
    color: #fff !important;
}
/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px) {
    .profile-modal-shell {
        max-width: 100%;
        padding: 1rem .9rem .95rem;
    }

    .profile-modal-title {
        font-size: 1.05rem;
        line-height: 1.15;
    }

    .profile-modal-subtitle,
    .profile-modal-message {
        max-width: 100%;
        font-size: .92rem;
        line-height: 1.5;
    }

    .profile-input-password {
        max-width: 100% !important;
        min-height: 44px !important;
    }

    .profile-modal-actions-row {
        flex-direction: column;
        gap: 10px;
    }

    .profile-btn-cancel,
    .profile-btn-confirm {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        min-height: 44px;
    }
}
/* =========================
   PERFIL TWO FACTOR
========================= */

.profile-2fa-status-title {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.45;
    margin-bottom: .7rem;
}

.profile-2fa-text {
    color: rgba(255,255,255,.78);
    font-size: .95rem;
    line-height: 1.75;
    margin-bottom: 1rem;
}

.profile-2fa-info-box {
    margin-top: 1rem;
    padding: .95rem 1rem;
    border-radius: 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
}

.profile-2fa-info-strong {
    margin: 0;
    color: #fff;
    font-size: .94rem;
    line-height: 1.7;
    font-weight: 700;
}

.profile-2fa-qr-wrap {
    margin-top: 1rem;
}

.profile-2fa-qr-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.profile-2fa-qr-card svg {
    display: block;
    max-width: 220px;
    height: auto;
}

.profile-2fa-key-box {
    margin-top: 1rem;
    padding: .95rem 1rem;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    line-height: 1.7;
    word-break: break-word;
}

.profile-2fa-key-label {
    font-weight: 800;
    color: #9fe8ff;
}

.profile-2fa-key-value {
    display: inline-block;
    margin-top: .25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .95rem;
    color: #fff;
}

.profile-2fa-code-wrap {
    margin-top: 1rem;
}

.profile-2fa-label {
    color: #fff !important;
    margin-bottom: .45rem;
    display: inline-block;
    font-weight: 700;
}

.profile-2fa-code-input {
    display: block !important;
    width: 100% !important;
    max-width: 260px !important;
    min-height: 46px !important;
    border-radius: 12px !important;
    padding: .7rem .9rem !important;
    color: #111827 !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    box-shadow: none !important;
}

.profile-2fa-recovery-box {
    display: grid;
    gap: 10px;
    max-width: 520px;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 18px;
    background: rgba(255,255,255,.96);
    color: #111827;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.profile-2fa-recovery-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .92rem;
    padding: .35rem 0;
    border-bottom: 1px dashed rgba(0,0,0,.10);
}

.profile-2fa-recovery-code:last-child {
    border-bottom: 0;
}

.profile-2fa-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 1.2rem;
}

@media (max-width: 768px) {
    .profile-2fa-status-title {
        font-size: 1rem;
    }

    .profile-2fa-text,
    .profile-2fa-info-strong,
    .profile-2fa-key-box {
        font-size: .92rem;
    }

    .profile-2fa-qr-card {
        width: 100%;
        max-width: 260px;
        padding: .85rem;
    }

    .profile-2fa-qr-card svg {
        max-width: 100%;
    }

    .profile-2fa-code-input {
        max-width: 100% !important;
    }

    .profile-2fa-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .profile-2fa-actions .profile-btn-primary,
    .profile-2fa-actions .profile-btn-secondary,
    .profile-2fa-actions .profile-btn-danger {
        width: 100%;
        text-align: center;
    }
}
.profile-2fa-warning-box {
    margin-top: 1rem;
    padding: 1rem 1.2rem;
    border-radius: 16px;
    background: rgba(255, 80, 80, 0.08);
    border: 1px solid rgba(255, 90, 90, 0.28);
    box-shadow: 0 0 18px rgba(255, 0, 0, 0.10);
}

.profile-2fa-warning-text {
    margin: 0;
    color: #ffb8b8;
    font-size: .95rem;
    line-height: 1.7;
    font-weight: 600;
}

.profile-2fa-warning-text strong {
    color: #ffd1d1;
    font-weight: 800;
}

.profile-2fa-recovery-note {
    margin-top: 1rem;
    padding: 1rem 1.2rem;
    border-radius: 16px;
    background: rgba(255, 196, 0, 0.08);
    border: 1px solid rgba(255, 196, 0, 0.24);
    box-shadow: 0 0 16px rgba(255, 196, 0, 0.08);
}

.profile-2fa-recovery-note-text {
    margin: 0;
    color: #ffe7a3;
    font-size: .95rem;
    line-height: 1.7;
    font-weight: 600;
}

.profile-2fa-recovery-note-text strong {
    color: #fff0bf;
    font-weight: 800;
}
/* =========================
   PERFIL ACTUALIZAR CONTRASEÑA
========================= */

.profile-password-card {
    padding: 1.35rem 1.4rem !important;
}

.profile-password-form {
    max-width: 100%;
    margin-top: .2rem;
    margin-left: 0;
    margin-right: 0;
}

.profile-password-grid {
    display: flex;
    flex-direction: column;
    gap: .95rem;
}

.profile-password-field {
    display: flex;
    flex-direction: column;
}

.profile-password-label {
    color: #fff !important;
    font-weight: 700;
    margin-bottom: .45rem;
    display: inline-block;
}

.profile-password-input {
    width: 100% !important;
    max-width: 760px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    padding: .7rem .9rem !important;
    color: #111827 !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    box-shadow: none !important;
}

.profile-password-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .profile-password-card {
        padding: 1rem !important;
    }

    .profile-password-input {
        max-width: 100% !important;
    }

    .profile-password-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .profile-password-actions .profile-btn-primary {
        width: 100%;
        text-align: center;
    }
}
.profile-password-strength-wrap {
    margin-top: .7rem;
    max-width: 760px;
}

.profile-password-strength-bar {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
}

.profile-password-strength-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width .28s ease, background .28s ease, box-shadow .28s ease;
}

.profile-password-strength-text {
    margin-top: .55rem;
    color: rgba(255,255,255,.78);
    font-size: .95rem;
    line-height: 1.5;
}

.strength-weak {
    background: linear-gradient(135deg, #ff4d4f, #d9363e);
    box-shadow: 0 0 10px rgba(255, 77, 79, .22);
}

.strength-medium {
    background: linear-gradient(135deg, #f7b500, #ff8c00);
    box-shadow: 0 0 10px rgba(255, 181, 0, .20);
}

.strength-strong {
    background: linear-gradient(135deg, #00d4ff, #0066ff);
    box-shadow: 0 0 12px rgba(0, 212, 255, .22);
}

.strength-text-weak {
    color: #ff8f91;
    font-weight: 800;
}

.strength-text-medium {
    color: #ffd36b;
    font-weight: 800;
}

.strength-text-strong {
    color: #7fe6ff;
    font-weight: 800;
}

@media (max-width: 768px) {
    .profile-password-strength-wrap {
        max-width: 100%;
    }

    .profile-password-strength-text {
        font-size: .92rem;
    }
}
/* =========================
   PERFIL HUB / SELECTOR
========================= */

.profile-hub-header {
    margin-bottom: 1.2rem;
}

.profile-hub-title {
    color: #fff;
    font-size: 1.7rem;
    font-weight: 900;
    margin: 0 0 .35rem 0;
    letter-spacing: .2px;
}

.profile-hub-subtitle {
    color: rgba(255,255,255,.72);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0;
}

.profile-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.2rem;
}

.profile-option-card {
    position: relative;
    padding: 1.4rem 1.3rem;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)),
        linear-gradient(145deg, #0b1220, #0a1020);
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 14px 30px rgba(0,0,0,.20);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    cursor: pointer;
}

.profile-option-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0,212,255,.38);
    box-shadow: 0 0 18px rgba(0,212,255,.16), 0 14px 30px rgba(0,0,0,.24);
}

.profile-option-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .8rem;
    background: linear-gradient(135deg, #00d4ff, #0066ff);
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 0 20px rgba(0,212,255,.18);
}

.profile-option-title {
    color: #fff;
    font-weight: 800;
    font-size: 1.02rem;
    margin-bottom: .35rem;
}

.profile-option-desc {
    color: rgba(255,255,255,.7);
    font-size: .93rem;
    line-height: 1.55;
}

.profile-panel-topbar {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1rem;
}

.profile-back-btn {
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: #fff;
    border-radius: 12px;
    padding: .7rem 1rem;
    font-weight: 700;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.profile-back-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0,0,0,.16);
    background: rgba(255,255,255,.09);
}

@media (max-width: 768px) {
    .profile-hub-title {
        font-size: 1.35rem;
    }

    .profile-options-grid {
        grid-template-columns: 1fr;
    }
}
.profile-option-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .8rem;
}

.profile-option-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .35rem .65rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .2px;
    white-space: nowrap;
}

.profile-option-badge--success {
    color: #b8ffd8;
    background: rgba(40, 167, 69, .14);
    border: 1px solid rgba(40, 167, 69, .26);
    box-shadow: 0 0 14px rgba(40, 167, 69, .10);
}

.profile-option-badge--muted {
    color: rgba(255,255,255,.78);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.10);
}
.profile-option-card {
    position: relative;
}

/* header solo para icono */
.profile-option-header {
    position: relative;
    margin-bottom: .9rem;
}

/* badge flotante */
.profile-option-badge {
    position: absolute;
    top: 0;
    right: 0;
}
.profile-option-badge--info {
    color: #9fe8ff;
    background: rgba(0, 212, 255, .12);
    border: 1px solid rgba(0, 212, 255, .24);
    box-shadow: 0 0 14px rgba(0, 212, 255, .08);
}
.profile-hub-shell {
    overflow-anchor: none;
}

.profile-panel-view,
.profile-hub-selector {
    overflow-anchor: none;
}
/* =========================
   API CONFIGURACION
========================= */
.api-panel-wrap {
    padding: 24px;
}

.api-panel-card {
    background: linear-gradient(180deg, rgba(7, 16, 33, 0.96), rgba(4, 11, 24, 0.98));
    border: 1px solid rgba(90, 140, 255, 0.18);
    border-radius: 16px;
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255,255,255,0.03) inset,
        0 0 30px rgba(0, 212, 255, 0.08);
    overflow: hidden;
    max-width: 780px;
    margin: 0 auto;
}

.api-panel-header {
    padding: 18px 20px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-align: center;
}

.api-panel-header h4 {
    margin: 0;
    font-size: 1.4rem; /* antes 2rem */
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.3px;
}

.api-panel-header p {
    margin: 8px 0 0;
    font-size: 0.8rem;
    color: rgba(200, 220, 255, 0.72);
}

.api-panel-body {
    padding: 12px 20px 20px;
}

.api-row {
    display: flex;
    align-items: center;
    min-height: 72px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    gap: 18px;
}

.api-label {
    width: 180px;
    min-width: 180px;
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(210, 225, 255, 0.88);
}

.api-value {
    flex: 1;
    font-size: 0.95rem;
    color: #ffffff;
    word-break: break-word;
}

.api-value-inline {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.api-row-highlight {
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.06), rgba(0, 102, 255, 0.04));
    border-left: 3px solid rgba(0, 212, 255, 0.65);
    border-radius: 12px;
    margin: 8px 0;
}

.api-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.94rem;
    color: #0b1220;
    background: linear-gradient(135deg, #00d4ff, #4da3ff);
    box-shadow: 0 8px 20px rgba(0, 212, 255, 0.18);
    transition: all .2s ease;
}

.api-action-btn:hover {
    transform: translateY(-1px);
    color: #0b1220;
    box-shadow: 0 12px 24px rgba(0, 212, 255, 0.28);
}

.api-action-btn-secondary {
    background: rgba(255,255,255,0.08);
    color: #dff6ff;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: none;
}

.api-action-btn-secondary:hover {
    color: #ffffff;
    background: rgba(255,255,255,0.12);
}

@media (max-width: 768px) {
    .api-panel-wrap {
        padding: 14px;
    }

    .api-panel-header {
        padding: 22px 18px 16px;
    }

    .api-panel-header h4 {
        font-size: 1.45rem;
    }

    .api-row {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 10px;
        min-height: auto;
        gap: 8px;
    }

    .api-label {
        width: 100%;
        min-width: 100%;
        font-size: 0.95rem;
    }

    .api-value {
        width: 100%;
        font-size: 1rem;
    }

    .api-value-inline {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}
.api-value-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.api-mini-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.api-mini-btn {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: #d8ecff;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    cursor: pointer;
    padding: 0;
}

.api-mini-btn:hover {
    background: rgba(0, 212, 255, 0.12);
    border-color: rgba(0, 212, 255, 0.35);
    color: #ffffff;
    transform: translateY(-1px);
}

.api-mini-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12);
}

#apiKeyText,
#apiUrlText {
    word-break: break-all;
}
/* =========================
   HASTA AQUI PANEL CLIENTE LO DEMAS YA ES ADMIN
========================= */
/* =========================
   CONFIG HUB / SERVER CONFIG
========================= */

.config-hub-wrap {
    padding: 22px;
}

.config-hub-hero {
    margin-bottom: 20px;
}

.config-hub-hero h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: .2px;
}

.config-hub-hero p {
    margin: 0;
    color: rgba(210, 225, 255, .72);
    font-size: 1rem;
}

/* CARD */
.config-hub-card {
    position: relative;
    height: 100%;
    background: linear-gradient(180deg, rgba(8,16,34,.96), rgba(4,10,22,.98));
    border: 1px solid rgba(90,140,255,.12);
    border-radius: 24px;
    padding: 24px;
    box-shadow:
        0 16px 40px rgba(0,0,0,.28),
        0 0 24px rgba(0,212,255,.04);
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        background .22s ease;
}

.config-hub-card--clickable {
    cursor: pointer;
}

.config-hub-card--clickable:hover,
.config-hub-card--clickable:focus-within {
    transform: translateY(-4px);
    border-color: rgba(0,212,255,.55);
    box-shadow:
        0 22px 48px rgba(0,0,0,.34),
        0 0 0 1px rgba(0,212,255,.12) inset,
        0 0 30px rgba(0,212,255,.14);
}

.config-hub-card--warning {
    border-color: rgba(255,193,7,.16);
}

.config-hub-card--warning:hover,
.config-hub-card--warning:focus-within {
    border-color: rgba(255,193,7,.38);
    box-shadow:
        0 22px 48px rgba(0,0,0,.34),
        0 0 0 1px rgba(255,193,7,.08) inset,
        0 0 28px rgba(255,193,7,.10);
}

/* TOP */
.config-hub-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

/* ICON BASE */
.config-hub-card__icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.24rem;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.config-hub-card--clickable:hover .config-hub-card__icon {
    transform: translateY(-1px) scale(1.03);
}

/* ICON COLORS BY MODULE */
.config-hub-card__icon--server {
    color: #56d6ff;
    background: linear-gradient(180deg, rgba(0,212,255,.14), rgba(0,212,255,.05));
    border-color: rgba(0,212,255,.28);
    box-shadow: 0 10px 20px rgba(0,212,255,.08);
}

.config-hub-card__icon--payments {
    color: #ffd76a;
    background: linear-gradient(180deg, rgba(255,193,7,.14), rgba(255,193,7,.05));
    border-color: rgba(255,193,7,.24);
    box-shadow: 0 10px 20px rgba(255,193,7,.07);
}

.config-hub-card__icon--branding {
    color: #ff8fb1;
    background: linear-gradient(180deg, rgba(255,96,143,.14), rgba(255,96,143,.05));
    border-color: rgba(255,96,143,.22);
    box-shadow: 0 10px 20px rgba(255,96,143,.07);
}

.config-hub-card__icon--banners {
    color: #7ee787;
    background: linear-gradient(180deg, rgba(46,204,113,.14), rgba(46,204,113,.05));
    border-color: rgba(46,204,113,.24);
    box-shadow: 0 10px 20px rgba(46,204,113,.07);
}

.config-hub-card__icon--plans {
    color: #b794ff;
    background: linear-gradient(180deg, rgba(154,92,255,.15), rgba(154,92,255,.05));
    border-color: rgba(154,92,255,.24);
    box-shadow: 0 10px 20px rgba(154,92,255,.07);
}

.config-hub-card__icon--html {
    color: #ffb86b;
    background: linear-gradient(180deg, rgba(255,145,0,.14), rgba(255,145,0,.05));
    border-color: rgba(255,145,0,.24);
    box-shadow: 0 10px 20px rgba(255,145,0,.07);
}

/* BADGE */
.config-hub-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    color: #d9ebff;
    font-size: .82rem;
    font-weight: 700;
}

/* TITLE + TEXT */
.config-hub-card h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 1.26rem;
    font-weight: 800;
    line-height: 1.2;
}

.config-hub-card p {
    margin: 0;
    color: rgba(220,232,255,.74);
    line-height: 1.7;
    font-size: .98rem;
    min-height: 92px;
}

/* ACTIONS */
.config-hub-card__actions {
    margin-top: 22px;
}

.config-hub-card__actions--stack {
    display: grid;
    gap: 12px;
}

/* OUTLINE CTA */
.config-hub-card__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    width: 100%;
    padding: 11px 18px;
    border-radius: 18px;
    border: 1px solid rgba(0,212,255,.42);
    background: rgba(0,212,255,.06);
    color: #24d3ff;
    font-weight: 800;
    letter-spacing: .1px;
    transition: all .22s ease;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
    text-decoration: none;
}

.config-hub-card--clickable:hover .config-hub-card__link,
.config-hub-card--clickable:focus-within .config-hub-card__link {
    background: linear-gradient(135deg, #13cfff, #168cff);
    color: #06111f;
    border-color: rgba(53,203,255,.75);
    box-shadow: 0 14px 28px rgba(0,212,255,.18);
}

.config-hub-card__link--muted {
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: #eef7ff;
    cursor: pointer;
}

.config-hub-card__link--muted:hover {
    background: rgba(255,255,255,.09);
    color: #fff;
    border-color: rgba(255,255,255,.16);
    box-shadow: none;
}

/* RESPONSIVE */
@media (max-width: 1199px) {
    .config-hub-card p {
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .config-hub-wrap {
        padding: 14px;
    }

    .config-hub-hero h2 {
        font-size: 1.55rem;
    }

    .config-hub-card {
        padding: 18px;
        border-radius: 20px;
    }

    .config-hub-card__top {
        margin-bottom: 14px;
    }

    .config-hub-card__icon {
        width: 54px;
        height: 54px;
        border-radius: 16px;
    }

    .config-hub-card h3 {
        font-size: 1.08rem;
    }

    .config-hub-card p {
        font-size: .93rem;
        min-height: auto;
    }

    .config-hub-card__link {
        min-height: 44px;
        border-radius: 16px;
    }
}
/* =========================
   SERVER SETTINGS MODALS
========================= */

.server-settings-modal {
    background: linear-gradient(180deg, rgba(8,16,34,.98), rgba(4,10,22,.99));
    border: 1px solid rgba(90,140,255,.16);
    border-radius: 24px;
    box-shadow:
        0 28px 70px rgba(0,0,0,.42),
        0 0 30px rgba(0,212,255,.06);
    overflow: hidden;
}

.server-settings-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 26px 18px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.server-settings-modal__header h4 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
}

.server-settings-modal__header p {
    margin: 0;
    color: rgba(220,232,255,.72);
    font-size: .96rem;
    line-height: 1.55;
}

.server-settings-modal__close {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.05);
    color: #e7f4ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: .2s ease;
}

.server-settings-modal__close:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}

.server-settings-modal__body {
    padding: 24px 26px 28px;
}

.server-settings-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.server-settings-item {
    padding: 20px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(10,18,38,.95), rgba(6,12,26,.98));
    border: 1px solid rgba(255,255,255,.06);
    transition: all .25s ease;
}

.server-settings-item:hover {
    border-color: rgba(0,212,255,.35);
    box-shadow: 0 0 20px rgba(0,212,255,.08);
}

.server-settings-item--wide {
    grid-column: span 2;
}

.server-settings-label {
    color: rgba(222,235,255,.82);
    font-weight: 700;
    font-size: .95rem;
}

.server-settings-value {
    font-size: 1.05rem;
    padding-top: 6px;
    display: inline-block;
}

.server-settings-value:hover {
    color: #8fe8ff !important;
    border-bottom-color: rgba(0,212,255,.58);
}

.server-settings-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.server-settings-btn-warning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 800;
    background: rgba(255,193,7,.12);
    color: #ffd76a;
    border: 1px solid rgba(255,193,7,.26);
    transition: .2s ease;
}

.server-settings-btn-warning:hover {
    background: rgba(255,193,7,.18);
    color: #ffe29a;
}

.server-settings-plain-text {
    color: #fff;
    font-weight: 700;
    word-break: break-all;
}

.server-settings-mini-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.05);
    color: #dff4ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: .2s ease;
}

.server-settings-mini-btn:hover {
    background: rgba(0, 212, 255, 0.12);
    border-color: rgba(0, 212, 255, 0.35);
    color: #ffffff;
    transform: translateY(-1px);
}

.server-settings-note {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.03);
    color: rgba(222,235,255,.74);
    line-height: 1.6;
    font-size: .92rem;
}

@media (max-width: 991px) {
    .server-settings-grid {
        grid-template-columns: 1fr;
    }

    .server-settings-item--wide {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .server-settings-modal__header {
        padding: 18px 18px 14px;
    }

    .server-settings-modal__body {
        padding: 18px 18px 20px;
    }

    .server-settings-modal__header h4 {
        font-size: 1.2rem;
    }

    .server-settings-inline {
        align-items: flex-start;
        flex-direction: column;
    }

    .server-settings-item {
        min-height: auto;
    }
}
/* =========================
   ESTADO TELEGRAM
========================= */
.server-settings-item__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.server-settings-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: #dfefff;
    line-height: 1;
}

.server-settings-status--loading {
    background: rgba(255,255,255,.06);
    color: #dfefff;
    border-color: rgba(255,255,255,.12);
}

.server-settings-status--success {
    background: rgba(46, 204, 113, .12);
    color: #7ee787;
    border-color: rgba(46, 204, 113, .28);
}

.server-settings-status--warning {
    background: rgba(255,193,7,.12);
    color: #ffd76a;
    border-color: rgba(255,193,7,.28);
}

.server-settings-status--error {
    background: rgba(255,95,95,.12);
    color: #ff8b8b;
    border-color: rgba(255,95,95,.28);
}
/* =========================
   CONFIG LOGO IMAGE MODAL
========================= */

.server-settings-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 18px 26px 24px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.server-settings-btn-primary,
.server-settings-btn-secondary {
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 14px;
    font-weight: 800;
    border: none;
    transition: .2s ease;
}

.server-settings-btn-primary {
    background: linear-gradient(135deg, #13cfff, #168cff);
    color: #07111f;
}

.server-settings-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(0,212,255,.18);
}

.server-settings-btn-secondary {
    background: rgba(255,255,255,.06);
    color: #eef7ff;
    border: 1px solid rgba(255,255,255,.08);
}

.server-settings-btn-secondary:hover {
    background: rgba(255,255,255,.09);
    color: #fff;
}

.server-upload-grid {
    display: grid;
    gap: 18px;
}

.server-upload-card {
    background: linear-gradient(180deg, rgba(10,18,38,.95), rgba(6,12,26,.98));
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 20px;
    padding: 20px;
}

.server-upload-card--preview {
    padding-bottom: 24px;
}

.server-upload-label {
    display: block;
    margin-bottom: 12px;
    color: rgba(230,240,255,.88);
    font-size: .95rem;
    font-weight: 800;
}

.server-upload-filebox input[type="file"] {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    color: #eef7ff;
    padding: 12px 14px;
}

.server-upload-select {
    min-height: 52px;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.04) !important;
    color: #eef7ff !important;
    box-shadow: none !important;
}

.server-upload-select:focus {
    border-color: rgba(0,212,255,.35) !important;
    box-shadow: 0 0 0 3px rgba(0,212,255,.08) !important;
}

.server-upload-help {
    margin-top: 10px;
    color: rgba(210,225,255,.62);
    font-size: .9rem;
    line-height: 1.5;
}

.server-upload-preview {
    min-height: 260px;
    border-radius: 18px;
    border: 1px dashed rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.server-upload-preview img {
    width: 100%;
    max-height: 340px;
    object-fit: contain;
    display: block;
    border-radius: 14px;
}

.server-upload-preview__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(220,232,255,.58);
    text-align: center;
    padding: 20px;
}

.server-upload-preview__empty i {
    font-size: 2rem;
    opacity: .8;
}

@media (max-width: 768px) {
    .server-settings-modal__footer {
        padding: 16px 18px 20px;
        flex-direction: column;
    }

    .server-settings-btn-primary,
    .server-settings-btn-secondary {
        width: 100%;
    }

    .server-upload-card {
        padding: 16px;
        border-radius: 18px;
    }

    .server-upload-preview {
        min-height: 220px;
    }
}
.server-settings-btn-danger {
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 16px;
    font-weight: 800;
    border: 1px solid rgba(255, 95, 95, .38);
    background: rgba(255, 95, 95, .06);
    color: #ff8b8b;
    transition: all .22s ease;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.server-settings-btn-danger:hover {
    background: linear-gradient(135deg, rgba(255,95,95,.18), rgba(210,60,60,.20));
    border-color: rgba(255, 95, 95, .62);
    color: #ffd6d6;
    box-shadow: 0 14px 28px rgba(255, 95, 95, .12);
    transform: translateY(-1px);
}

.server-settings-btn-danger:focus {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(255,95,95,.12),
        0 14px 28px rgba(255, 95, 95, .12);
}

.server-settings-btn-danger--small {
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 14px;
    font-size: .92rem;
}
/* =========================
   CAROUSEL GALLERY MODAL BANNERS
========================= */

.server-upload-help--inline {
    margin-top: 0;
    font-size: .86rem;
}

.carousel-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.carousel-gallery-card {
    background: linear-gradient(180deg, rgba(10,18,38,.95), rgba(6,12,26,.98));
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.carousel-gallery-card__image {
    background: rgba(255,255,255,.03);
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.carousel-gallery-card__image img {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: 12px;
    display: block;
}

.carousel-gallery-card__meta {
    padding: 14px 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.carousel-gallery-card__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0,212,255,.08);
    border: 1px solid rgba(0,212,255,.18);
    color: #7fdfff;
    font-size: .82rem;
    font-weight: 800;
}

.carousel-gallery-card__url {
    color: rgba(220,232,255,.72);
    font-size: .86rem;
    line-height: 1.5;
    word-break: break-all;
}

.carousel-gallery-card__actions {
    padding: 0 14px 14px;
    display: flex;
    justify-content: flex-end;
}

.carousel-gallery-empty {
    grid-column: 1 / -1;
    min-height: 180px;
    border-radius: 18px;
    border: 1px dashed rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(220,232,255,.58);
    text-align: center;
    padding: 20px;
}

.carousel-gallery-empty i {
    font-size: 2rem;
    opacity: .8;
}

@media (max-width: 768px) {
    .carousel-gallery-grid {
        grid-template-columns: 1fr;
    }
}
.server-upload-actions-bar {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: -2px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .server-upload-actions-bar {
        flex-direction: column;
    }

    .server-upload-actions-bar .server-settings-btn-primary,
    .server-upload-actions-bar .server-settings-btn-secondary {
        width: 100%;
    }
}
.carousel-gallery-scroll {
    max-height: 640px;
    overflow-y: auto;
    padding-right: 6px;
}

.carousel-gallery-scroll::-webkit-scrollbar {
    width: 8px;
}

.carousel-gallery-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.14);
    border-radius: 999px;
}

.carousel-gallery-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.carousel-gallery-card__actions {
    padding: 0 14px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.carousel-gallery-card__order {
    display: flex;
    align-items: center;
    gap: 8px;
}
.carousel-gallery-card {
    position: relative;
}

.carousel-gallery-card__drag {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.03);
    color: rgba(220,232,255,.66);
    cursor: grab;
    transition: .2s ease;
}

.carousel-gallery-card__drag:hover {
    background: rgba(0,212,255,.06);
    color: #8fe8ff;
}

.carousel-gallery-card__drag:active {
    cursor: grabbing;
}

.carousel-gallery-card--ghost {
    opacity: .45;
}

.carousel-gallery-card--chosen {
    box-shadow: 0 0 0 1px rgba(0,212,255,.18), 0 0 24px rgba(0,212,255,.10);
}

.carousel-gallery-card--dragging {
    transform: rotate(1deg);
}
/* =========================================
   STOCK BADGES - GLOBAL (IMEI / SERVER / REMOTE)
   ========================================= */

/* ===== BADGE PRINCIPAL (DETALLE) ===== */
.instant-stock-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.instant-stock-badge--success {
    color: #5dffb4;
    background: rgba(22, 132, 82, .14);
    border: 1px solid rgba(93,255,180,.22);
    box-shadow: 0 0 12px rgba(93,255,180,.18);
}

.instant-stock-badge--warning {
    color: #ffbf5d;
    background: rgba(180, 108, 33, .14);
    border: 1px solid rgba(255,191,93,.22);
    box-shadow: 0 0 12px rgba(255,191,93,.14);
}

.instant-stock-badge--danger {
    color: #ff6b9e;
    background: rgba(180, 33, 88, .14);
    border: 1px solid rgba(255,107,158,.22);
    box-shadow: 0 0 12px rgba(255,107,158,.16);
}

/* Texto secundario */
.instant-stock-help {
    display: block;
    margin-top: 6px;
    color: rgba(220,236,255,.62);
    font-size: .8rem;
}

/* ===== WRAP PRECIO + STOCK ===== */
.placeimei-price-stock-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    min-height: 54px;
}

/* Forzar alineación limpia del precio */
.placeimei-price-stock-wrap .placeimei-costo {
    display: flex;
    align-items: center;
    margin: 0 !important;
    line-height: 1 !important;
}

.placeimei-price-stock-wrap .placeimei-costo * {
    margin: 0 !important;
    line-height: 1 !important;
}

/* ===== WRAP UNIVERSAL DE BADGE ===== */
/* funciona para IMEI, SERVER, REMOTE sin repetir ids */
#instantStockBadgeWrap,
#instantStockBadgeWrap_remote,
#instantStockBadgeWrap_server {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    line-height: 1;
}

/* evita que se descuadre */
#instantStockBadgeWrap .instant-stock-badge,
#instantStockBadgeWrap_remote .instant-stock-badge,
#instantStockBadgeWrap_server .instant-stock-badge {
    margin: 0 !important;
}

/* fuerza que el mensaje baje correctamente */
#instantStockBadgeWrap .instant-stock-help,
#instantStockBadgeWrap_remote .instant-stock-help,
#instantStockBadgeWrap_server .instant-stock-help {
    flex-basis: 100%;
}

/* =========================================
   GRID (CARDS) - BADGE PEQUEÑO
   ========================================= */

.placeimei-grid-card__price-row,
.placeserver-grid-card__price-row,
.placeremote-grid-card__price-row,
.allservices-grid-card__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* Badge pequeño */
.placeimei-grid-stock-badge,
.placeserver-grid-stock-badge,
.placeremote-grid-stock-badge,
.allservices-grid-stock-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

/* Colores */
.placeimei-grid-stock-badge--success,
.placeserver-grid-stock-badge--success,
.placeremote-grid-stock-badge--success,
.allservices-grid-stock-badge--success {
    color: #5dffb4;
    background: rgba(22, 132, 82, .14);
    border: 1px solid rgba(93,255,180,.22);
    box-shadow: 0 0 10px rgba(93,255,180,.14);
}

.placeimei-grid-stock-badge--warning,
.placeserver-grid-stock-badge--warning,
.placeremote-grid-stock-badge--warning,
.allservices-grid-stock-badge--warning {
    color: #ffbf5d;
    background: rgba(180, 108, 33, .14);
    border: 1px solid rgba(255,191,93,.22);
    box-shadow: 0 0 10px rgba(255,191,93,.12);
}

.placeimei-grid-stock-badge--danger,
.placeserver-grid-stock-badge--danger,
.placeremote-grid-stock-badge--danger,
.allservices-grid-stock-badge--danger {
    color: #ff6b9e;
    background: rgba(180, 33, 88, .14);
    border: 1px solid rgba(255,107,158,.22);
    box-shadow: 0 0 10px rgba(255,107,158,.12);
}
/* =========================
  API INVENTARIO
========================= */
    
/* Separar mejor el texto ID del icono de orden */
#data-table-combine thead th.sorting:first-child,
#data-table-combine thead th.sorting_asc:first-child,
#data-table-combine thead th.sorting_desc:first-child {
    background-position: right 10px center !important;
}
/* El + de DataTables debe sentirse clickeable */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
    cursor: pointer !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    cursor: pointer !important;
}
#data-table-combine tbody td:first-child {
    cursor: pointer !important;
}
        .instant-wrap {
            position: relative;
            z-index: 1;
        }

        .instant-main-shell {
            border-radius: 24px;
            border: 1px solid rgba(0, 191, 255, .16);
            background:
                radial-gradient(circle at top left, rgba(0, 153, 255, 0.12), transparent 28%),
                linear-gradient(135deg, rgba(8, 20, 45, 0.96), rgba(6, 14, 30, 0.96));
            box-shadow:
                0 20px 50px rgba(0, 0, 0, .28),
                inset 0 1px 0 rgba(255, 255, 255, .04);
            padding: 22px;
        }

        .instant-topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 18px;
            padding: 0 4px;
        }

        .instant-page-title {
            color: #f4fbff;
            font-size: 1.9rem;
            font-weight: 800;
            letter-spacing: .02em;
            margin-bottom: 8px;
        }

        .instant-page-subtitle {
            color: rgba(218, 237, 255, 0.72);
            font-size: .98rem;
            margin-bottom: 0;
            max-width: 880px;
        }

        .instant-add-btn {
    border: 0;
    border-radius: 12px;
    padding: 9px 15px;
    min-width: 175px;
    font-weight: 800;
    font-size: .86rem;
            letter-spacing: .01em;
            color: #fff;
            background: linear-gradient(135deg, #18b8ff, #0a7cff);
            box-shadow: 0 12px 26px rgba(0, 140, 255, .24);
            transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
        }

        .instant-add-btn:hover {
            transform: translateY(-1px);
            filter: brightness(1.04);
            box-shadow: 0 16px 32px rgba(0, 140, 255, .34);
        }

        .instant-table-shell {
            border-radius: 22px;
            border: 1px solid rgba(0, 191, 255, .12);
            background:
                linear-gradient(180deg, rgba(9, 22, 45, .92), rgba(6, 14, 30, .94));
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.04);
            overflow: hidden;
        }

        .instant-table-wrap {
            padding: 16px 16px 10px;
        }

        #data-table-combine {
            width: 100% !important;
            margin: 0 !important;
            border-collapse: separate !important;
            border-spacing: 0 12px !important;
            color: #e7f6ff;
            background: transparent !important;
        }

        #data-table-combine thead th {
            background: linear-gradient(180deg, rgba(0, 159, 255, .18), rgba(0, 159, 255, .08)) !important;
            color: #2cd3ff !important;
            border: 0 !important;
            padding: 15px 14px !important;
            font-size: .86rem;
            text-transform: uppercase;
            letter-spacing: .08em;
            font-weight: 800;
            vertical-align: middle;
            white-space: nowrap;
        }

        #data-table-combine thead th:first-child {
            border-radius: 16px 0 0 16px;
        }

        #data-table-combine thead th:last-child {
            border-radius: 0 16px 16px 0;
        }

        #data-table-combine tbody tr {
            background: linear-gradient(90deg, rgba(18, 31, 56, .95), rgba(8, 18, 38, .95)) !important;
            box-shadow: 0 10px 24px rgba(0,0,0,.14);
        }

        #data-table-combine tbody td {
            border-top: 1px solid rgba(255,255,255,.06) !important;
            border-bottom: 1px solid rgba(255,255,255,.06) !important;
            border-left: 0 !important;
            border-right: 0 !important;
            background: transparent !important;
            color: #dff5ff !important;
            padding: 15px 14px !important;
            vertical-align: middle;
        }

        #data-table-combine tbody td:first-child {
            border-left: 1px solid rgba(255,255,255,.06) !important;
            border-radius: 16px 0 0 16px;
        }

        #data-table-combine tbody td:last-child {
            border-right: 1px solid rgba(255,255,255,.06) !important;
            border-radius: 0 16px 16px 0;
        }

        .instant-name-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    line-height: 1.15;
}

.instant-name {
    display: block;
    color: #f7fbff;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.05;
    margin: 0;
}

.instant-subinfo {
    display: block;
    color: rgba(197, 221, 255, 0.68);
    font-size: .84rem;
    line-height: 1.32;
    margin: 0;
}

        .instant-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            padding: 8px 14px;
            font-size: .79rem;
            font-weight: 800;
            letter-spacing: .04em;
            text-transform: uppercase;
            border: 1px solid transparent;
            text-align: center;
        }

        .instant-pill-success {
            color: #5dffb4;
            background: rgba(22, 132, 82, .14);
            border-color: rgba(93,255,180,.22);
            box-shadow: 0 0 12px rgba(93,255,180,.18);
        }

        .instant-pill-danger {
            color: #ff6b9e;
            background: rgba(180, 33, 88, .14);
            border-color: rgba(255,107,158,.22);
            box-shadow: 0 0 12px rgba(255,107,158,.16);
        }

        .instant-pill-info {
            color: #49d7ff;
            background: rgba(0, 125, 255, .12);
            border-color: rgba(73,215,255,.2);
        }

        .instant-number {
    display: block;
    color: #fff;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
}

.instant-number-sub {
    display: block;
    color: rgba(205, 228, 255, .60);
    font-size: .78rem;
    line-height: 1.28;
    margin: 0;
}

        .instant-action-btn {
            border-radius: 12px;
            padding: 10px 14px;
            min-width: 118px;
            font-weight: 800;
            color: #fff !important;
            background: linear-gradient(135deg, #1092ff, #0468ff);
            border: 0 !important;
            box-shadow: 0 12px 24px rgba(4, 104, 255, .2);
        }

        .instant-action-btn:hover,
        .instant-action-btn:focus {
            filter: brightness(1.05);
            color: #fff !important;
        }

        .dropdown-menu {
            background: rgba(9, 18, 38, .98) !important;
            border: 1px solid rgba(0,191,255,.14) !important;
            border-radius: 14px !important;
            box-shadow: 0 18px 36px rgba(0,0,0,.35) !important;
            overflow: hidden;
        }

        .dropdown-item {
            color: #dff5ff !important;
            font-weight: 600;
            padding: 11px 14px;
        }

        .dropdown-item:hover {
            background: rgba(0, 140, 255, .14) !important;
            color: #fff !important;
        }

        .dataTables_wrapper .dataTables_length,
        .dataTables_wrapper .dataTables_filter,
        .dataTables_wrapper .dataTables_info,
        .dataTables_wrapper .dataTables_paginate {
            color: rgba(217, 235, 255, .72) !important;
        }

        .dataTables_wrapper .dataTables_length select,
        .dataTables_wrapper .dataTables_filter input {
            background: rgba(7, 16, 34, .9) !important;
            color: #ecf8ff !important;
            border: 1px solid rgba(0,191,255,.18) !important;
            border-radius: 12px !important;
            min-height: 40px;
            box-shadow: none !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            border-radius: 10px !important;
            border: 1px solid rgba(255,255,255,.08) !important;
            background: rgba(9, 18, 38, .92) !important;
            color: #dff5ff !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current,
        .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
            background: linear-gradient(135deg, #00c6ff, #0072ff) !important;
            color: #fff !important;
            border-color: transparent !important;
        }

        @media (max-width: 991px) {
            .instant-topbar {
                flex-direction: column;
                align-items: flex-start;
            }

            .instant-add-btn {
                min-width: auto;
                width: 100%;
            }
        }

        @media (max-width: 767px) {
            .instant-main-shell {
                padding: 16px;
                border-radius: 20px;
            }

            .instant-page-title {
                font-size: 1.6rem;
            }

            .instant-page-subtitle {
                font-size: .92rem;
            }
        }
        .instant-header-plain {
    margin-bottom: 16px;
    padding: 4px 4px 0;
}
#data-table-combine th:first-child,
#data-table-combine td:first-child {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}
/* Columna ID más cómoda en header */
#data-table-combine thead th:first-child {
    position: relative;
    padding-left: 18px !important;
    padding-right: 30px !important;
    min-width: 78px !important;
    text-align: left !important;
}

/* ===== MODAL NUEVO INVENTARIO ===== */
.instant-modal-dialog {
    max-width: 920px;
}

.instant-modal-content {
    border-radius: 22px;
    border: 1px solid rgba(0, 191, 255, .18);
    background:
        radial-gradient(circle at top left, rgba(0, 153, 255, 0.10), transparent 28%),
        linear-gradient(135deg, rgba(22, 34, 56, 0.98), rgba(15, 26, 45, 0.98));
    box-shadow:
        0 24px 60px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .04);
    overflow: hidden;
}

.instant-modal-header {
    padding: 22px 24px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.01);
}

.instant-modal-title {
    color: #f4fbff;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: .01em;
    margin: 0;
}

.instant-modal-close {
    filter: invert(1) brightness(1.2);
    opacity: .75;
}

.instant-modal-close:hover {
    opacity: 1;
}

.instant-modal-body {
    padding: 24px;
}

.instant-form-label {
    display: block;
    color: #dff5ff;
    font-size: .92rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: .01em;
}

.instant-input-group .input-group-text {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.14);
    color: #dbeeff;
    min-width: 108px;
    font-weight: 700;
}

.instant-input-group .form-control,
.instant-form-control,
.instant-inventory-textarea {
    background: rgba(8, 18, 38, .82) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: #f3fbff !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.instant-input-group .form-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.instant-input-group .input-group-text {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.instant-form-control {
    min-height: 52px;
    padding: 0 16px;
    font-weight: 600;
}

.instant-input-group .form-control {
    min-height: 52px;
    padding: 0 16px;
}

.instant-input-group .form-control::placeholder,
.instant-inventory-textarea::placeholder {
    color: rgba(220, 236, 255, .42);
}

.instant-input-group .form-control:focus,
.instant-form-control:focus,
.instant-inventory-textarea:focus {
    border-color: rgba(44, 211, 255, .42) !important;
    box-shadow: 0 0 0 0.18rem rgba(0, 191, 255, .12) !important;
}

.instant-editor-wrap {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    padding: 16px;
}

.instant-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.instant-editor-title {
    color: #f7fbff;
    font-size: 1.45rem;
    font-weight: 800;
    margin: 0;
}

.instant-editor-note {
    color: rgba(210, 230, 255, .60);
    font-size: .85rem;
}

.instant-inventory-textarea {
    min-height: 380px;
    resize: vertical;
    padding: 16px 16px;
    font-size: .95rem;
    line-height: 1.45;
    border-radius: 16px !important;
}

.instant-modal-footer {
    padding: 16px 22px 18px;
    border-top: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(90deg, rgba(24, 35, 55, .98), rgba(14, 25, 44, .98));
    display: flex;
    justify-content: flex-end;
    gap: 14px;
}

.instant-btn-secondary {
    border-radius: 16px !important;
    padding: 12px 26px !important;
    background: linear-gradient(180deg, #20283a, #161d2c) !important;
    color: #f3f7ff !important;
    font-weight: 800 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 8px 20px rgba(0,0,0,.18) !important;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}

.instant-btn-secondary:hover,
.instant-btn-secondary:focus,
.instant-btn-secondary:active {
    background: linear-gradient(180deg, #242e43, #1a2233) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.14) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 12px 24px rgba(0,0,0,.22) !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}

.instant-btn-primary {
    border-radius: 18px !important;
    padding: 12px 30px !important;
    border: 0 !important;
    font-weight: 800 !important;
    color: #08111f !important;
    background: linear-gradient(135deg, #35c4ff, #1f8fff) !important;
    box-shadow: 0 14px 34px rgba(31, 143, 255, .28) !important;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}

.instant-btn-primary:hover,
.instant-btn-primary:focus,
.instant-btn-primary:active {
    color: #08111f !important;
    background: linear-gradient(135deg, #4bceff, #2998ff) !important;
    box-shadow: 0 18px 38px rgba(31, 143, 255, .34) !important;
    transform: translateY(-1px);
}

/* Ajustes del select para dark mode */
.instant-form-control option {
    background: #0d1a2d;
    color: #f3fbff;
}

@media (max-width: 991px) {
    .instant-modal-dialog {
        max-width: 96%;
        margin: 1rem auto;
    }

    .instant-modal-title {
        font-size: 1.45rem;
    }

    .instant-editor-title {
        font-size: 1.5rem;
    }

    .instant-inventory-textarea {
        min-height: 420px;
    }
}

@media (max-width: 767px) {
    .instant-modal-header,
    .instant-modal-body,
    .instant-modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .instant-input-group .input-group-text {
        min-width: 90px;
        font-size: .88rem;
    }

    .instant-inventory-textarea {
        min-height: 320px;
    }
}
.instant-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.instant-footer-left {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.instant-footer-right {
    display: flex;
    gap: 12px;
}

/* ===== NUEVOS MODALES VER STOCKS ===== */
.instant-stock-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.instant-stock-summary {
    color: rgba(222, 238, 255, .82);
    font-weight: 700;
    font-size: .95rem;
}

.instant-stock-summary span {
    color: #35c4ff;
    font-size: 1.1rem;
    font-weight: 800;
}

.instant-stock-table-wrap {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(5, 15, 34, .65);
}

.instant-stock-table {
    color: #e9f6ff !important;
    margin: 0;
}

.instant-stock-table thead th {
    background: linear-gradient(180deg, rgba(0, 159, 255, .18), rgba(0, 159, 255, .08));
    color: #2cd3ff !important;
    border: 0 !important;
    padding: 14px 12px !important;
    font-size: .83rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
    white-space: nowrap;
}

.instant-stock-table tbody td {
    background: transparent !important;
    color: #dff5ff !important;
    border-color: rgba(255,255,255,.06) !important;
    padding: 13px 12px !important;
    vertical-align: middle;
}

.instant-stock-table tbody tr:hover {
    background: rgba(255,255,255,.03);
}

.instant-stock-code {
    font-family: monospace;
    font-size: .95rem;
    color: #ffffff;
    word-break: break-all;
}

.instant-btn-danger {
    border-radius: 14px !important;
    padding: 10px 18px !important;
    border: 0 !important;
    font-weight: 800 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #ff5e7a, #d9365d) !important;
    box-shadow: 0 12px 24px rgba(217, 54, 93, .24) !important;
}

.instant-btn-danger:hover,
.instant-btn-danger:focus {
    color: #fff !important;
    filter: brightness(1.05);
}

.instant-stock-delete-btn {
    border-radius: 12px !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(255,255,255,.04) !important;
    color: #ff8ca9 !important;
    font-weight: 700 !important;
}

.instant-stock-delete-btn:hover {
    background: rgba(255, 94, 122, .12) !important;
    color: #ffd7e1 !important;
}

.instant-stock-empty {
    text-align: center;
    color: rgba(220,236,255,.55);
    padding: 22px 10px !important;
}
.anuncios-btn-add {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 18px;
    border-radius: 14px;

    border: none;
    font-weight: 800;
    font-size: .92rem;
    color: #eaf6ff;

    background: linear-gradient(135deg, #2bb3f3 0%, #1f8fff 100%);
    box-shadow:
        0 10px 26px rgba(31, 143, 255, .25),
        inset 0 1px 0 rgba(255,255,255,.18);

    transition: all .18s ease;
}

.anuncios-btn-add i {
    font-size: .95rem;
}

.anuncios-btn-add:hover {
    color: #fff;
    transform: translateY(-1px);

    background: linear-gradient(135deg, #4bceff, #2998ff);
    box-shadow:
        0 14px 30px rgba(31, 143, 255, .35),
        inset 0 1px 0 rgba(255,255,255,.22);
}

.anuncios-btn-add:active {
    transform: scale(.97);
}

/* ===== CUSTOM PRICES ===== */

        .customprices-wrap {
            padding: 10px 0;
        }

        .customprices-card {
            background:
                radial-gradient(circle at top left, rgba(0, 212, 255, 0.10), transparent 35%),
                linear-gradient(145deg, #0f172a, #111827);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 22px;
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.08);
            overflow: hidden;
        }

        .customprices-card-body {
            padding: 24px;
        }

        .customprices-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 22px;
            flex-wrap: wrap;
        }

        .customprices-titlebox h1,
        .customprices-titlebox h2,
        .customprices-titlebox h4 {
            margin: 0;
        }

        .customprices-title {
            color: #fff;
            font-size: 1.8rem;
            font-weight: 800;
            letter-spacing: .01em;
        }

        .customprices-subtitle {
            color: rgba(255,255,255,.65);
            font-size: .95rem;
            margin-top: 4px;
        }

        .customprices-toolbar {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 22px;
        }

        .customprices-search {
            display: flex;
            align-items: stretch;
            gap: 10px;
            width: 100%;
            flex-wrap: wrap;
        }

        .customprices-search .form-control {
            min-height: 48px;
            border-radius: 14px;
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.08);
            color: #fff;
            box-shadow: none;
        }

        .customprices-search .form-control::placeholder {
            color: rgba(255,255,255,.45);
        }

        .customprices-search .form-control:focus {
            border-color: rgba(0, 212, 255, 0.45);
            box-shadow: 0 0 0 0.18rem rgba(0, 212, 255, 0.12);
            background: rgba(255,255,255,.06);
            color: #fff;
        }

        .customprices-search-btn {
            min-height: 48px;
            border-radius: 14px;
            padding: 0 20px;
            font-weight: 700;
            border: 0;
            color: #fff;
            background: linear-gradient(135deg, #00d4ff, #2563eb);
            box-shadow: 0 0 16px rgba(0, 212, 255, 0.28);
            transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
        }

        .customprices-search-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 0 22px rgba(0, 212, 255, 0.38);
            filter: brightness(1.05);
            color: #fff;
        }

        .hero-btn-primary {
            position: relative;
            overflow: hidden;
            border: 0;
            color: #fff;
            font-weight: 800;
            background: linear-gradient(135deg, #00d4ff, #2563eb);
            box-shadow: 0 0 22px rgba(0, 212, 255, .24);
            transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
        }

        .hero-btn-primary:hover {
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 0 28px rgba(0, 212, 255, .34);
            filter: brightness(1.06);
        }

        .customprices-table-wrap {
            border-radius: 18px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,.06);
            background: rgba(255,255,255,.025);
        }

        .customprices-table {
            margin: 0;
            color: #e5e7eb;
            vertical-align: middle;
        }

        .customprices-table thead th {
            background: rgba(255,255,255,.03);
            color: rgba(255,255,255,.70);
            font-size: .84rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .04em;
            border-bottom: 1px solid rgba(255,255,255,.08) !important;
            padding: 16px 14px;
        }

        .customprices-table tbody td {
            padding: 16px 14px;
            border-color: rgba(255,255,255,.06) !important;
            background: transparent;
        }

        .customprices-table tbody tr {
            transition: background .18s ease, transform .18s ease;
        }

        .customprices-table tbody tr:hover {
            background: rgba(0, 212, 255, 0.045);
        }

        .customprices-id-link {
            color: #7dd3fc;
            font-weight: 800;
            text-decoration: none;
        }

        .customprices-id-link:hover {
            color: #bae6fd;
        }

        .customprices-service-name {
            color: #fff;
            font-weight: 700;
            line-height: 1.35;
        }

        .customprices-user-name {
            color: #fff;
            font-weight: 700;
            line-height: 1.35;
        }

        .customprices-user-email {
            color: rgba(255,255,255,.60);
            font-size: .92rem;
            margin-top: 2px;
        }

        .price-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 7px 14px;
            border-radius: 999px;
            font-size: .92rem;
            font-weight: 800;
            color: #39FF14;
            background: rgba(57, 255, 20, 0.14);
            border: 1px solid rgba(57, 255, 20, 0.18);
            box-shadow: inset 0 0 12px rgba(57, 255, 20, 0.05);
        }

        .customprices-action-btn {
            min-width: 38px;
            height: 38px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 0;
        }

        .customprices-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            flex-wrap: wrap;
            margin-top: 18px;
        }

        .customprices-count {
            color: rgba(255,255,255,.70);
            font-weight: 600;
        }

        .customprices-count span {
            color: #fff;
            font-weight: 800;
        }

        .breadcrumb.customprices-breadcrumb {
            margin-bottom: 8px;
        }

        .breadcrumb.customprices-breadcrumb .breadcrumb-item,
        .breadcrumb.customprices-breadcrumb .breadcrumb-item.active {
            color: rgba(255,255,255,.55);
            font-weight: 600;
        }

        @media (max-width: 768px) {
            .customprices-card-body {
                padding: 18px;
            }

            .customprices-title {
                font-size: 1.45rem;
            }

            .customprices-search {
                flex-direction: column;
            }

            .customprices-search-btn {
                width: 100%;
            }
        }
        
/* ===== BOTONES EXTRA ===== */

    .botonesextra-wrap {
        padding: 10px 0;
    }

    .botonesextra-card {
        background:
            radial-gradient(circle at top left, rgba(0, 212, 255, 0.10), transparent 35%),
            linear-gradient(145deg, #0f172a, #111827);
        border: 1px solid rgba(255,255,255,.06);
        border-radius: 22px;
        box-shadow: 0 0 30px rgba(0, 212, 255, 0.08);
        overflow: hidden;
    }

    .botonesextra-body {
        padding: 24px;
    }

    .botonesextra-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        flex-wrap: wrap;
        margin-bottom: 22px;
    }

    .botonesextra-title {
        color: #fff;
        font-size: 1.8rem;
        font-weight: 800;
        letter-spacing: .01em;
        margin: 0;
    }

    .botonesextra-subtitle {
        color: rgba(255,255,255,.65);
        font-size: .95rem;
        margin-top: 4px;
    }

    .hero-btn-primary {
        position: relative;
        overflow: hidden;
        border: 0;
        color: #fff;
        font-weight: 800;
        background: linear-gradient(135deg, #00d4ff, #2563eb);
        box-shadow: 0 0 22px rgba(0, 212, 255, .24);
        transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }

    .hero-btn-primary:hover {
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 0 28px rgba(0, 212, 255, .34);
        filter: brightness(1.06);
    }

    .botonesextra-alert {
        border-radius: 16px;
        border: 1px solid rgba(255,255,255,.08);
        margin-bottom: 18px;
    }

    .botonesextra-table-wrap {
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.06);
        background: rgba(255,255,255,.025);
    }

    .botonesextra-table {
        margin: 0;
        color: #e5e7eb;
        vertical-align: middle;
    }

    .botonesextra-table thead th {
        background: rgba(255,255,255,.03);
        color: rgba(255,255,255,.70);
        font-size: .84rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
        padding: 16px 14px;
    }

    .botonesextra-table tbody td {
        padding: 16px 14px;
        border-color: rgba(255,255,255,.06) !important;
        background: transparent;
    }

    .botonesextra-table tbody tr {
        transition: background .18s ease;
    }

    .botonesextra-table tbody tr:hover {
        background: rgba(0, 212, 255, 0.045);
    }

    .botonesextra-id {
        color: #7dd3fc;
        font-weight: 800;
    }

    .botonesextra-name {
        color: #fff;
        font-weight: 700;
    }

    .botonesextra-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 7px 14px;
        border-radius: 999px;
        font-size: .85rem;
        font-weight: 800;
        letter-spacing: .02em;
    }

    .botonesextra-badge--newtab {
        color: #39FF14;
        background: rgba(57, 255, 20, 0.14);
        border: 1px solid rgba(57, 255, 20, 0.18);
    }

    .botonesextra-badge--sametab {
        color: #facc15;
        background: rgba(250, 204, 21, 0.14);
        border: 1px solid rgba(250, 204, 21, 0.18);
    }

    .botonesextra-link {
        color: #cbd5e1;
        max-width: 420px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: middle;
    }

    .botonesextra-link:hover {
        color: #fff;
    }

    .botonesextra-action-btn {
        border-radius: 999px;
        padding: 8px 16px;
        font-weight: 700;
    }

    .dropdown-menu.botonesextra-menu {
        background: #111827;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 15px 35px rgba(0,0,0,.35);
    }

    .dropdown-menu.botonesextra-menu .dropdown-item {
        color: #e5e7eb;
        padding: 10px 14px;
        transition: background .18s ease, color .18s ease;
    }

    .dropdown-menu.botonesextra-menu .dropdown-item:hover {
        background: rgba(239, 68, 68, .12);
        color: #fff;
    }

    @media (max-width: 768px) {
        .botonesextra-body {
            padding: 18px;
        }

        .botonesextra-title {
            font-size: 1.45rem;
        }
    }
.newbutton-modal {
    background:
        radial-gradient(circle at top left, rgba(0, 212, 255, 0.12), transparent 35%),
        linear-gradient(145deg, #0f172a, #111827);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 0 28px rgba(0, 212, 255, 0.12);
}

.newbutton-modal-header {
    background: rgba(255,255,255,.03);
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 20px 24px;
}

.newbutton-modal-header .modal-title {
    color: #fff;
    font-weight: 800;
    font-size: 1.35rem;
}

.newbutton-modal-body {
    padding: 24px;
}

.newbutton-modal-footer {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 18px 24px;
    background: rgba(255,255,255,.02);
}

.newbutton-label {
    color: #e5e7eb;
    font-weight: 700;
    margin-bottom: 8px;
}

.newbutton-control {
    min-height: 48px;
    border-radius: 14px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    color: #fff;
    box-shadow: none;
}

.newbutton-control::placeholder {
    color: rgba(255,255,255,.45);
}

.newbutton-control:focus {
    background: rgba(255,255,255,.07);
    border-color: rgba(0,212,255,.45);
    box-shadow: 0 0 0 .18rem rgba(0,212,255,.12);
    color: #fff;
}

.newbutton-control option {
    color: #111827;
}

.hero-btn-primary {
    position: relative;
    overflow: hidden;
    border: 0;
    color: #fff;
    font-weight: 800;
    background: linear-gradient(135deg, #00d4ff, #2563eb);
    box-shadow: 0 0 22px rgba(0, 212, 255, .24);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.hero-btn-primary:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 0 28px rgba(0, 212, 255, .34);
    filter: brightness(1.06);
}

/* =========================================================
   DASHBOARD ELIMINAR RECUADRO GRANDE INDEX
========================================================= */
#statsWidget {
    margin-bottom: 0 !important;
}
/* =========================================================
   THEME COLORS (GLOBAL - NO ROMPE AZUL ACTUAL)
========================================================= */

/* AZUL = tu diseño actual (default) */
:root {
  --theme-primary: #00d4ff;
  --theme-secondary: #1594ff;
  --theme-glow: rgba(0, 212, 255, .25);
  --theme-border: rgba(0, 212, 255, .28);
}

/* SOLO overrides (clientes) */
html.brand-red {
  --theme-primary: #ef4444;
  --theme-secondary: #f97316;
  --theme-glow: rgba(239, 68, 68, .24);
  --theme-border: rgba(239, 68, 68, .30);
}

html.brand-yellow {
  --theme-primary: #f59e0b;
  --theme-secondary: #facc15;
  --theme-glow: rgba(245, 158, 11, .24);
  --theme-border: rgba(245, 158, 11, .32);
}

html.brand-green {
  --theme-primary: #10b981;
  --theme-secondary: #22c55e;
  --theme-glow: rgba(16, 185, 129, .24);
  --theme-border: rgba(16, 185, 129, .30);
}

html.brand-purple {
  --theme-primary: #8b5cf6;
  --theme-secondary: #6366f1;
  --theme-glow: rgba(139, 92, 246, .24);
  --theme-border: rgba(139, 92, 246, .30);
}
/* =========================================================
   DEMOGSM THEME SWITCH - BASE SEGURA
   Dark queda intacto. Light se activa solo con .theme-light
========================================================= */

.theme-toggle-btn {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1040;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    height: 44px;
    padding: 0 16px;

    border-radius: 999px;
    border: 1px solid rgba(80, 180, 255, .35);

    background: linear-gradient(135deg, rgba(8, 18, 35, .95), rgba(20, 35, 65, .95));
    color: #fff;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .35),
        0 0 22px rgba(0, 174, 255, .22);

    cursor: pointer;
    transition: all .25s ease;
}

.theme-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, .42),
        0 0 30px rgba(0, 174, 255, .35);
}

.theme-toggle-btn i {
    font-size: 15px;
}

/* Estado visual del botón en light */
html.theme-light .theme-toggle-btn {
    background: linear-gradient(135deg, #ffffff, #eef6ff);
    color: #0f172a;
    border-color: rgba(37, 99, 235, .22);
    box-shadow:
        0 12px 30px rgba(15, 23, 42, .14),
        0 0 18px rgba(37, 99, 235, .12);
}
/* =========================================================
   EFECTO CON MOVIMIENTO HERO HERO LIGHT - ANIMACIÓN PREMIUM DISCRETA
========================================================= */
/* HERO LIGHT - LIGHT SWEEP (VISIBLE) */
html.theme-light .hero-premium {
  position: relative;
  overflow: hidden;
}

html.theme-light .hero-premium::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  z-index: 3; /* 🔥 MÁS ALTO QUE TODO */

  pointer-events: none;

  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(255,255,255,0.55) 50%, /* 🔥 más fuerte */
    transparent 80%
  );

  transform: skewX(-20deg);

  animation: heroSweep 8s linear infinite; /* 🔥 más rápido */
}

/* asegurar que el contenido esté arriba */
html.theme-light .hero-premium .container-xxl {
  position: relative;
  z-index: 5;
}

@keyframes heroSweep {
  0% { left: -120%; }
  100% { left: 120%; }
}
/* =========================================================
   LIGHT MODE - CAPA INICIAL SUAVE
   NO usar * todavía. Solo base general.
========================================================= */

html.theme-light body {
    color: #172033;
}

html.theme-light.bg-cover-9::after,
html.theme-light .bg-cover-9::after {
    opacity: .08;
    filter: grayscale(.15) brightness(1.15);
}

/* Fondos generales seguros */
html.theme-light body,
html.theme-light #app,
html.theme-light .app {
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, .10), transparent 34%),
        linear-gradient(180deg, #f6f8fc 0%, #eef3f9 100%) !important;
}

/* Select2 light inicial */
html.theme-light .select2-search,
html.theme-light .select2-search input,
html.theme-light .select2-results {
    background-color: #ffffff !important;
    color: #172033 !important;
}

html.theme-light .select2-container--bootstrap-5 .select2-selection {
    background-color: #ffffff !important;
    color: #172033 !important;
    border-color: rgba(15, 23, 42, .18) !important;
}

html.theme-light .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: #172033 !important;
}

html.theme-light .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
    color: #172033 !important;
    background-color: #ffffff;
}

html.theme-light .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    color: #0f172a !important;
    background-color: #eaf2ff !important;
}
/* =========================================================
   HERO LIGHT - PREMIUM BACKGROUND
========================================================= */

html.theme-light .hero-section {
    background: 
        radial-gradient(circle at 20% 30%, rgba(0, 162, 255, 0.12), transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(0, 102, 255, 0.10), transparent 40%),
        linear-gradient(180deg, #f8fbff 0%, #eef4fa 100%);
}
/* =========================================================
   LIGHT MODE - WELCOME REAL FIX
   Controlado por html.theme-light
========================================================= */

html.theme-light body,
html.theme-light #app.app {
  background: #edf3f9 !important;
  color: var(--welcome-text) !important;
}

/* HERO */
html.theme-light .hero-premium {
  background:
    radial-gradient(720px 460px at 8% 32%, rgba(0,212,255,.20), transparent 66%),
    radial-gradient(760px 460px at 92% 12%, rgba(123,77,255,.13), transparent 70%),
    linear-gradient(135deg, #f8fbff 0%, #edf4fb 55%, #e8eff8 100%) !important;
}

html.theme-light .hero-grid {
  opacity: .20;
  background-image:
    linear-gradient(to right, rgba(15,23,42,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.035) 1px, transparent 1px);
}

html.theme-light .hero-title,
html.theme-light .hero-subtitle,
html.theme-light .hero-text,
html.theme-light .stat-value {
  color: #111827 !important;
  text-shadow: none !important;
}

html.theme-light .hero-text,
html.theme-light .stat-label {
  color: #52657c !important;
}

html.theme-light .hero-badge {
  background: rgba(8, 18, 36, .86) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.82) !important;
  box-shadow:
    0 18px 42px rgba(15,23,42,.18),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

html.theme-light .hero-badge * {
  color: rgba(255,255,255,.82) !important;
  opacity: 1 !important;
}

html.theme-light .hero-badge .dot {
  background: var(--theme-primary) !important;
  box-shadow:
    0 0 0 5px var(--theme-glow),
    0 0 18px var(--theme-glow) !important;
}

html.theme-light .stat {
  background: rgba(255,255,255,.62) !important;
  border-color: rgba(15,23,42,.10) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.10) !important;
}

html.theme-light .hero-btn-secondary,
html.theme-light .hero-btn-ghost {
  background: rgba(255,255,255,.55) !important;
  border-color: rgba(15,23,42,.12) !important;
  color: #172033 !important;
}

html.theme-light .hero-btn-secondary:hover,
html.theme-light .hero-btn-ghost:hover {
  color: #0f172a !important;
}

/* HERO CARD */
html.theme-light .hero-card {
  background: rgba(255,255,255,.56) !important;
  border-color: rgba(15,23,42,.12) !important;
  box-shadow: 0 28px 70px rgba(15,23,42,.18) !important;
}

html.theme-light .hero-card-bottom {
  background: rgba(15,23,42,.42) !important;
  color: rgba(255,255,255,.82) !important;
}

/* NUESTROS SERVICIOS */
html.theme-light .services-section {
  background:
    radial-gradient(720px 420px at 12% 20%, rgba(0,212,255,.14), transparent 68%),
    linear-gradient(180deg, #f7fbff 0%, #edf3fa 100%) !important;
}

html.theme-light .services-title,
html.theme-light .service-name {
  color: #111827 !important;
}

html.theme-light .services-subtitle,
html.theme-light .service-desc {
  color: #52657c !important;
}

html.theme-light .service-card {
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(15,23,42,.10) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.10) !important;
}

html.theme-light .service-card:hover {
  border-color: rgba(0,140,255,.28) !important;
  box-shadow: 0 24px 58px rgba(15,23,42,.14) !important;
}

/* HOW SECTION */
html.theme-light .how-section {
  background: #edf3f9 !important;
}

html.theme-light .how-title,
html.theme-light .how-name {
  color: #111827 !important;
}

html.theme-light .how-subtitle,
html.theme-light .how-desc {
  color: #52657c !important;
}

html.theme-light .how-step {
  color: rgba(15,23,42,.18) !important;
}

html.theme-light .how-card {
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(15,23,42,.10) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.12) !important;
}

/* STATS */
html.theme-light .stats-section {
  background:
    radial-gradient(800px 420px at 18% 30%, rgba(0,200,255,.10), transparent 60%),
    linear-gradient(180deg, #f8fbff 0%, #edf3f9 100%) !important;
}

html.theme-light .stats-title,
html.theme-light .stats-value {
  color: #111827 !important;
}

html.theme-light .stats-subtitle,
html.theme-light .stats-label {
  color: #52657c !important;
}

html.theme-light .stats-card {
  background: rgba(255,255,255,.74) !important;
  border-color: rgba(15,23,42,.10) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.11) !important;
}

/* FINAL CTA */
html.theme-light .final-cta {
  background: #edf3f9 !important;
}

html.theme-light .final-cta-box {
  background: rgba(255,255,255,.76) !important;
  border-color: rgba(15,23,42,.10) !important;
  box-shadow: 0 26px 70px rgba(15,23,42,.16) !important;
}

html.theme-light .final-cta-title {
  color: #111827 !important;
}

html.theme-light .final-cta-subtitle,
html.theme-light .final-cta-point {
  color: #52657c !important;
}

html.theme-light .final-cta-point {
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(15,23,42,.10) !important;
}

/* DOCK CONTACTO */
html.theme-light .contact-dock__btn {
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(15,23,42,.12) !important;
  color: #0f172a !important;
  box-shadow: 0 16px 36px rgba(15,23,42,.16) !important;
}
/* =========================================================
   LIGHT MODE - WELCOME PREMIUM POLISH FINAL
========================================================= */

/* Header dark premium en light */
html.theme-light .header,
html.theme-light .navbar,
html.theme-light .app-header {
  background:
    radial-gradient(520px 120px at 80% 0%, rgba(0,212,255,.16), transparent 65%),
    linear-gradient(180deg, rgba(37,43,56,.98), rgba(28,34,46,.98)) !important;
  border-bottom: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: 0 14px 36px rgba(15,23,42,.24) !important;
  backdrop-filter: blur(16px);
}

html.theme-light .header a,
html.theme-light .navbar a,
html.theme-light .app-header a {
  color: rgba(255,255,255,.78) !important;
}

html.theme-light .header a:hover,
html.theme-light .navbar a:hover,
html.theme-light .app-header a:hover {
  color: #fff !important;
}

/* Hero más premium, menos blanco plano */
html.theme-light .hero-premium {
  background:
    radial-gradient(760px 520px at 4% 38%, rgba(0,212,255,.26), transparent 68%),
    radial-gradient(680px 420px at 94% 10%, rgba(123,77,255,.17), transparent 70%),
    radial-gradient(520px 260px at 50% 0%, rgba(255,255,255,.95), transparent 70%),
    linear-gradient(135deg, #f7fbff 0%, #eaf3fb 52%, #dde9f4 100%) !important;
}

/* GSM y acentos azules más fuertes */
html.theme-light .hero-title .accent,
html.theme-light .services-title-accent,
html.theme-light .how-accent,
html.theme-light .stats-accent,
html.theme-light .final-cta-accent {
  background: linear-gradient(135deg, #00d9ff 0%, #00a8ff 42%, #006dff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 8px 18px rgba(0,168,255,.18));
}

/* Títulos más fuertes */
html.theme-light .hero-title,
html.theme-light .services-title,
html.theme-light .how-title,
html.theme-light .stats-title,
html.theme-light .final-cta-title {
  color: #081225 !important;
  text-shadow: 0 12px 28px rgba(15,23,42,.08) !important;
}

/* Parte inferior del banner: quitar gris feo */
html.theme-light .hero-card-bottom {
  background:
    linear-gradient(135deg, rgba(8,18,36,.92), rgba(13,25,48,.88)) !important;
  color: rgba(235,245,255,.82) !important;
  border-top: 1px solid rgba(0,212,255,.18) !important;
}

/* Cards e iconos más vivos */
html.theme-light .service-card,
html.theme-light .how-card,
html.theme-light .stats-card {
  background:
    radial-gradient(320px 160px at 10% 0%, rgba(0,212,255,.075), transparent 66%),
    rgba(255,255,255,.90) !important;
  border-color: rgba(15,23,42,.11) !important;
  box-shadow:
    0 22px 55px rgba(15,23,42,.11),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}

html.theme-light .service-icon,
html.theme-light .how-icon,
html.theme-light .stats-icon {
  filter: saturate(1.35) contrast(1.08);
  box-shadow:
    0 18px 34px rgba(15,23,42,.13),
    0 0 22px rgba(0,180,255,.10),
    inset 0 1px 0 rgba(255,255,255,.80) !important;
}

html.theme-light .service-icon i,
html.theme-light .how-icon i,
html.theme-light .stats-icon i {
  filter: saturate(1.45);
}

/* Nuestros servicios con fondo más premium */
html.theme-light .services-section {
  background:
    radial-gradient(760px 420px at 0% 22%, rgba(0,212,255,.18), transparent 66%),
    radial-gradient(620px 360px at 100% 10%, rgba(0,117,255,.10), transparent 70%),
    linear-gradient(180deg, #f4f9fe 0%, #eaf2fa 100%) !important;
}

/* Últimos servicios como isla dark */
html.theme-light .recent-services-section {
  background:
    linear-gradient(180deg, #eaf2f9 0%, #eef5fb 100%) !important;
  padding-top: 52px !important;
  padding-bottom: 52px !important;
}

html.theme-light .recent-services-panel {
  background:
    radial-gradient(circle at top left, rgba(0,212,255,.16), transparent 34%),
    radial-gradient(circle at bottom right, rgba(123,77,255,.18), transparent 36%),
    linear-gradient(135deg, #0b1729, #091225 58%, #140d2e) !important;
  border: 1px solid rgba(0,212,255,.22) !important;
  box-shadow:
    0 30px 80px rgba(15,23,42,.27),
    0 0 0 1px rgba(255,255,255,.045) inset !important;
}

/* Logo slider integrado con la isla dark */
html.theme-light .logo-strip-surface {
  background:
    linear-gradient(180deg, #eaf2f9 0%, #eef5fb 100%) !important;
}

html.theme-light .logo-strip {
  background: transparent !important;
}

html.theme-light .logo-strip__panel {
  background:
    linear-gradient(180deg, rgba(10,20,38,.94), rgba(7,14,28,.96)) !important;
  border-color: rgba(0,212,255,.14) !important;
}

/* Contact dock más elegante */
html.theme-light .contact-dock__btn {
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(15,23,42,.12) !important;
  color: #071225 !important;
  box-shadow:
    0 18px 38px rgba(15,23,42,.17),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
}
/* =========================================================
   ICONOS LIGHT - TONOS MÁS SÓLIDOS POR CARD
========================================================= */

/* Nuestros servicios */
html.theme-light .services-section .row > div:nth-child(1) .service-icon i {
  color: #0891b2 !important;
}

html.theme-light .services-section .row > div:nth-child(2) .service-icon i {
  color: #2563eb !important;
}

html.theme-light .services-section .row > div:nth-child(3) .service-icon i {
  color: #059669 !important;
}

html.theme-light .services-section .row > div:nth-child(4) .service-icon i {
  color: #d97706 !important;
}

html.theme-light .services-section .row > div:nth-child(5) .service-icon i {
  color: #7c3aed !important;
}

html.theme-light .services-section .row > div:nth-child(6) .service-icon i {
  color: #db2777 !important;
}

/* Cómo funciona */
html.theme-light #how-it-works .row > div:nth-child(1) .how-icon i {
  color: #0891b2 !important;
}

html.theme-light #how-it-works .row > div:nth-child(2) .how-icon i {
  color: #2563eb !important;
}

html.theme-light #how-it-works .row > div:nth-child(3) .how-icon i {
  color: #7c3aed !important;
}

/* Resultados */
html.theme-light .stats-section .row > div:nth-child(1) .stats-icon i {
  color: #0891b2 !important;
}

html.theme-light .stats-section .row > div:nth-child(2) .stats-icon i {
  color: #2563eb !important;
}

html.theme-light .stats-section .row > div:nth-child(3) .stats-icon i {
  color: #059669 !important;
}

html.theme-light .stats-section .row > div:nth-child(4) .stats-icon i {
  color: #7c3aed !important;
}

html.theme-light .service-icon i,
html.theme-light .how-icon i,
html.theme-light .stats-icon i {
  opacity: 1 !important;
  text-shadow: none !important;
  filter: saturate(.95) contrast(1.05) !important;
}
/* =========================================================
   FOOTER COMPACTO PREMIUM (DARK + LIGHT)
========================================================= */

.site-footer,
footer {
  padding-top: 26px !important;
  padding-bottom: 14px !important;
}

/* Grid más compacto */
.site-footer .row,
footer .row {
  row-gap: 10px !important;
}

/* Columnas */
.site-footer .col,
footer .col {
  margin-bottom: 0 !important;
}

/* Logo + descripción */
.site-footer .footer-brand,
footer .footer-brand {
  margin-bottom: 10px !important;
}

.site-footer p,
footer p {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  opacity: .75;
  margin-bottom: 0 !important;
}

/* Títulos */
.site-footer h5,
footer h5 {
  font-size: 14px !important;
  margin-bottom: 6px !important;
}

/* Links */
.site-footer ul li,
footer ul li {
  margin-bottom: 4px !important;
}

.site-footer ul li a,
footer ul li a {
  font-size: 13.5px !important;
  opacity: .75;
}

/* Separador */
.site-footer hr,
footer hr {
  margin: 12px 0 6px !important;
  opacity: .08;
}

/* Copyright */
.site-footer .footer-bottom,
footer .footer-bottom {
  font-size: 12.5px !important;
  opacity: .65;
}

/* Ajuste final del contenedor */
.site-footer .container,
footer .container {
  padding-bottom: 0 !important;
}
.site-footer,
footer {
  border-top: 1px solid rgba(255,255,255,.05);
}
/* =========================================================
   MOBILE FLOATING ACTIONS - CONTACT + THEME
========================================================= */

@media (max-width: 768px) {

  .contact-dock {
    left: 50% !important;
    right: auto !important;
    bottom: 18px !important;
    transform: translateX(-50%) !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    width: auto !important;
    padding: 8px !important;
    border-radius: 20px !important;

    background: rgba(8, 15, 30, .72) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 46px rgba(0,0,0,.34) !important;
  }

  .contact-dock__btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 15px !important;
  }

  .theme-toggle-btn {
    position: fixed !important;
    top: 76px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;

    z-index: 1040 !important;

    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 16px !important;
    background: rgba(18, 27, 44, .88) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.12) !important;

    box-shadow: 0 12px 28px rgba(0,0,0,.28) !important;
    backdrop-filter: blur(12px);
  }

  .theme-toggle-btn span {
    display: none !important;
  }

  .theme-toggle-btn i {
    font-size: 18px !important;
  }

}
/* =========================================================
   HERO BANNER - MOBILE BETTER FIT
========================================================= */

@media (max-width: 768px) {
  .hero-card {
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  .hero-banner-carousel {
    min-height: auto !important;
    background: #06142a !important;
  }

  .hero-banner-img {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  .hero-banner-carousel::after {
    display: none !important;
  }
}
/* =========================================================
   BRAND COLOR FINAL FORCE - SIEMPRE AL FINAL
========================================================= */

html[class*="brand-"] .hero-btn-primary,
html[class*="brand-"] .btn-premium,
html[class*="brand-"] .premium-auth-btn,
html[class*="brand-"] .service-buy-btn,
html[class*="brand-"] .recent-service-card__footer,
html[class*="brand-"] .reseller-card__btn,
html[class*="brand-"] .header .btn,
html[class*="brand-"] .navbar .btn,
html[class*="brand-"] .app-header .btn {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
  border-color: var(--theme-border) !important;
  box-shadow: 0 14px 32px var(--theme-glow) !important;
  color: #fff !important;
}

html[class*="brand-"] .hero-title .accent,
html[class*="brand-"] .services-title-accent,
html[class*="brand-"] .how-accent,
html[class*="brand-"] .stats-accent,
html[class*="brand-"] .final-cta-accent,
html[class*="brand-"] .popular-accent,
html[class*="brand-"] .reseller-accent {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 8px 18px var(--theme-glow)) !important;
}

html[class*="brand-"] .service-cta,
html[class*="brand-"] .recent-services-view-all:hover,
html[class*="brand-"] .site-footer__links a:hover,
html[class*="brand-"] .premium-auth-links a,
html[class*="brand-"] .login a {
  color: var(--theme-primary) !important;
}

html[class*="brand-"] .recent-service-card__icon i,
html[class*="brand-"] .site-footer__contact i {
  color: var(--theme-primary) !important;
}

html[class*="brand-"] .service-card:hover,
html[class*="brand-"] .how-card:hover,
html[class*="brand-"] .stats-card:hover,
html[class*="brand-"] .logo-strip__panel,
html[class*="brand-"] .recent-services-panel,
html[class*="brand-"] .hero-card-bottom {
  border-color: var(--theme-border) !important;
}

html[class*="brand-"] .hero-badge .dot,
html[class*="brand-"] .hero-card-bottom .mini-dot,
html[class*="brand-"] .final-cta-check {
  background: var(--theme-primary) !important;
  box-shadow: 0 0 14px var(--theme-glow) !important;
}
/* =========================================================
   CONFIG - ELEGIR COLOR TEMA
========================================================= */
.theme-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.theme-color-option {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: #dbeafe;
    border-radius: 14px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.theme-color-option.is-active {
    border-color: rgba(0,212,255,.7);
    box-shadow: 0 0 18px rgba(0,212,255,.22);
}

.theme-color-option--blue { border-left: 4px solid #00d4ff; }
.theme-color-option--red { border-left: 4px solid #ef4444; }
.theme-color-option--yellow { border-left: 4px solid #f59e0b; }
.theme-color-option--green { border-left: 4px solid #10b981; }
.theme-color-option--purple { border-left: 4px solid #8b5cf6; }
/* =========================================================
   LIGHT MODE - POPULAR PRODUCTS
========================================================= */

html.theme-light .popular-products-section {
  background:
    radial-gradient(900px 420px at 15% 20%, rgba(0, 212, 255, .13), transparent 62%),
    radial-gradient(700px 360px at 85% 10%, rgba(123, 77, 255, .10), transparent 62%),
    linear-gradient(180deg, #f3f8fd 0%, #eaf2f9 100%) !important;
}

html.theme-light .popular-title {
  color: #081225 !important;
  text-shadow: 0 12px 28px rgba(15,23,42,.08);
}

html.theme-light .popular-accent {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 8px 18px var(--theme-glow));
}

html.theme-light .popular-subtitle {
  color: #52657c !important;
}

html.theme-light .popular-card {
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow:
    0 22px 55px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

html.theme-light .popular-card:hover {
  background: rgba(255,255,255,.94) !important;
  border-color: var(--theme-border) !important;
  box-shadow:
    0 30px 70px rgba(15,23,42,.16),
    0 0 0 1px rgba(255,255,255,.9) inset !important;
}

html.theme-light .popular-card:before {
  background: radial-gradient(circle at 50% 0%, var(--theme-glow), transparent 70%) !important;
}

html.theme-light .popular-card__media {
  background:
    radial-gradient(320px 180px at 50% 0%, rgba(0,212,255,.07), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(240,246,252,.70)) !important;
}

html.theme-light .popular-card__img {
  background: rgba(241, 246, 252, .65) !important;
}

html.theme-light .popular-card__overlay {
  background:
    linear-gradient(to top, rgba(15,23,42,.08), rgba(15,23,42,0)),
    radial-gradient(280px 140px at 20% 15%, var(--theme-glow), transparent 65%) !important;
}

html.theme-light .popular-card__title {
  color: #101827 !important;
}

html.theme-light .popular-card__subtitle {
  color: #5b6f86 !important;
}

html.theme-light .popular-card__cta {
  color: var(--theme-primary) !important;
}

html.theme-light .popular-card:hover .popular-card__title {
  color: var(--theme-primary) !important;
  text-shadow: 0 0 12px var(--theme-glow) !important;
}

html.theme-light .popular-card:hover .popular-card__cta {
  text-shadow: 0 0 10px var(--theme-glow) !important;
}
/* =========================================================
   LIGHT MODE - RESELLER PLANS
========================================================= */

html.theme-light .reseller-section {
  background:
    radial-gradient(900px 420px at 15% 20%, rgba(0,212,255,.13), transparent 62%),
    radial-gradient(700px 360px at 85% 10%, rgba(123,77,255,.10), transparent 62%),
    linear-gradient(180deg, #f3f8fd 0%, #eaf2f9 100%) !important;
}

html.theme-light .reseller-title {
  color: #081225 !important;
  text-shadow: 0 12px 28px rgba(15,23,42,.08);
}

html.theme-light .reseller-accent {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 8px 18px var(--theme-glow));
}

html.theme-light .reseller-subtitle {
  color: #52657c !important;
}

html.theme-light .reseller-card {
  background:
    radial-gradient(320px 160px at 12% 0%, rgba(0,212,255,.07), transparent 66%),
    rgba(255,255,255,.86) !important;
  border-color: rgba(15,23,42,.10) !important;
  box-shadow:
    0 22px 55px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

html.theme-light .reseller-card:hover {
  background: rgba(255,255,255,.95) !important;
  border-color: var(--theme-border) !important;
  box-shadow:
    0 30px 70px rgba(15,23,42,.16),
    0 0 0 1px rgba(255,255,255,.9) inset !important;
}

html.theme-light .reseller-card__badge {
  color: #52657c !important;
  background: rgba(15,23,42,.045) !important;
  border-color: rgba(15,23,42,.08) !important;
}

html.theme-light .reseller-card__name {
  color: #101827 !important;
}

html.theme-light .reseller-card__price {
  color: var(--theme-primary) !important;
}

html.theme-light .reseller-card__unit {
  color: #6b7f95 !important;
}

html.theme-light .reseller-card__divider {
  background: linear-gradient(90deg, transparent, rgba(15,23,42,.13), transparent) !important;
}

html.theme-light .reseller-card__features li {
  color: #52657c !important;
}

html.theme-light .reseller-card__features i {
  color: var(--theme-primary) !important;
}

html.theme-light .reseller-card__btn {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
  border-color: var(--theme-border) !important;
  box-shadow: 0 14px 30px var(--theme-glow) !important;
  color: #fff !important;
}

/* mantenemos iconos por plan con sus colores propios */
html.theme-light .reseller-card--cyan .reseller-card__icon { color: #0891b2 !important; }
html.theme-light .reseller-card--blue .reseller-card__icon { color: #2563eb !important; }
html.theme-light .reseller-card--purple .reseller-card__icon { color: #7c3aed !important; }
html.theme-light .reseller-card--gold .reseller-card__icon { color: #d97706 !important; }
/* =========================================================
   LIGHT MODE - RESELLER PRICING / SERVICES LISTING
========================================================= */

html.theme-light .services-listing-hero {
  background:
    radial-gradient(900px 420px at 15% 20%, rgba(0,212,255,.13), transparent 62%),
    radial-gradient(700px 360px at 85% 10%, rgba(123,77,255,.10), transparent 62%),
    linear-gradient(180deg, #f3f8fd 0%, #eaf2f9 100%) !important;
}

html.theme-light .services-listing-section {
  background:
    radial-gradient(900px 420px at 15% 20%, rgba(0,212,255,.10), transparent 62%),
    radial-gradient(700px 360px at 85% 10%, rgba(123,77,255,.08), transparent 62%),
    linear-gradient(180deg, #eaf2f9 0%, #eef5fb 100%) !important;
}

html.theme-light .services-listing-title {
  color: #081225 !important;
  text-shadow: 0 12px 28px rgba(15,23,42,.08);
}

html.theme-light .services-listing-subtitle {
  color: #52657c !important;
}

html.theme-light .services-search__box {
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(15,23,42,.10) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.10) !important;
}

html.theme-light .services-search__icon {
  color: var(--theme-primary) !important;
}

html.theme-light .services-search__input {
  color: #111827 !important;
}

html.theme-light .services-search__input::placeholder {
  color: #7b8da3 !important;
}

html.theme-light .services-search__box:focus-within {
  border-color: var(--theme-border) !important;
  box-shadow: 0 18px 42px var(--theme-glow) !important;
}

html.theme-light .service-group-card {
  background:
    radial-gradient(320px 160px at 12% 0%, rgba(0,212,255,.07), transparent 66%),
    rgba(255,255,255,.86) !important;
  border-color: rgba(15,23,42,.10) !important;
  box-shadow:
    0 22px 55px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

html.theme-light .service-group-card__head {
  background: rgba(255,255,255,.55) !important;
  border-bottom-color: rgba(15,23,42,.08) !important;
}

html.theme-light .service-group-card__title {
  color: #101827 !important;
}

html.theme-light .service-group-card__meta {
  color: var(--theme-primary) !important;
  background: color-mix(in srgb, var(--theme-primary) 9%, transparent) !important;
  border-color: var(--theme-border) !important;
}

html.theme-light .services-premium-table {
  color: #52657c !important;
}

html.theme-light .services-premium-table thead th {
  background: rgba(15,23,42,.035) !important;
  color: #334155 !important;
  border-bottom-color: rgba(15,23,42,.08) !important;
}

html.theme-light .services-premium-table tbody td {
  color: #52657c !important;
  border-top-color: rgba(15,23,42,.07) !important;
}

html.theme-light .service-row:hover td {
  background: rgba(15,23,42,.035) !important;
}

html.theme-light .service-name {
  color: #101827 !important;
}

html.theme-light .service-delivery {
  color: #64748b !important;
}

html.theme-light .service-price {
  color: var(--theme-primary) !important;
}

html.theme-light .service-buy-btn {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
  box-shadow: 0 12px 28px var(--theme-glow) !important;
  border-color: var(--theme-border) !important;
  color: #fff !important;
}

html.theme-light .table-responsive {
  background: transparent !important;
}
/* =========================================================
   MOBILE MENU ONLY (NO AFECTA DESKTOP)
========================================================= */
@media (max-width: 991.98px){

  #header .navbar-collapse {
    background: rgba(12, 18, 32, 0.95) !important;
    backdrop-filter: blur(14px);
    border-radius: 16px;
    padding: 12px;
    margin-top: 10px;
  }

  #header .navbar-collapse .nav-link {
    color: #ffffff !important;
    border-radius: 10px;
  }

  #header .navbar-collapse .nav-link:hover {
    background: rgba(255,255,255,.08) !important;
  }

}
/* =========================================================
   ESPACIADO CTA → FOOTER (FINO)
========================================================= */

.final-cta,
.cta-section,
.welcome-final {
  margin-bottom: 40px !important;
}
/* =========================================================
   LIGHT MODE - LOGIN MODAL
========================================================= */

html.theme-light .modal-backdrop.show {
  background: #eaf2f9 !important;
  opacity: .82 !important;
}

html.theme-light .premium-auth-content {
  background:
    radial-gradient(520px 260px at 20% 0%, var(--theme-glow), transparent 62%),
    radial-gradient(420px 260px at 90% 100%, rgba(123,77,255,.10), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,247,252,.98)) !important;

  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow:
    0 28px 80px rgba(15,23,42,.20),
    inset 0 1px 0 rgba(255,255,255,.90) !important;

  color: #101827 !important;
}

html.theme-light .premium-auth-title {
  color: #101827 !important;
}

html.theme-light .premium-auth-subtitle,
html.theme-light .premium-auth-links {
  color: #5b6f86 !important;
}

html.theme-light .premium-auth-label {
  color: #334155 !important;
}

html.theme-light .premium-auth-input {
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(15,23,42,.10) !important;
}

html.theme-light .premium-auth-input .input-group-text {
  color: var(--theme-primary) !important;
  background: color-mix(in srgb, var(--theme-primary) 10%, transparent) !important;
}

html.theme-light .premium-auth-input .form-control {
  color: #101827 !important;
}

html.theme-light .premium-auth-input .form-control::placeholder {
  color: #7b8da3 !important;
}

html.theme-light .premium-auth-input:focus-within {
  box-shadow:
    0 0 0 1px var(--theme-border),
    0 0 18px var(--theme-glow) !important;
}

html.theme-light .premium-auth-security {
  color: #52657c !important;
  background: color-mix(in srgb, var(--theme-primary) 8%, #ffffff) !important;
  border-color: var(--theme-border) !important;
}

html.theme-light .premium-auth-security i,
html.theme-light .premium-auth-links a {
  color: var(--theme-primary) !important;
}

html.theme-light button.premium-auth-close {
  background: rgba(15,23,42,.08) !important;
  color: #101827 !important;
}

html.theme-light button.premium-auth-close:hover {
  background: rgba(15,23,42,.12) !important;
}
/* =========================================================
   LOGIN MODAL - THEME COLOR HOOKS
========================================================= */

html[class*="brand-"] .premium-auth-btn {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
  box-shadow: 0 16px 36px var(--theme-glow) !important;
  border-color: var(--theme-border) !important;
}

html[class*="brand-"] .premium-auth-input .input-group-text,
html[class*="brand-"] .premium-auth-security i,
html[class*="brand-"] .premium-auth-links a {
  color: var(--theme-primary) !important;
}

html[class*="brand-"] .premium-auth-input:focus-within,
html[class*="brand-"] .premium-auth-security {
  border-color: var(--theme-border) !important;
  box-shadow: 0 0 18px var(--theme-glow) !important;
}
/* =========================================================
   BRAND COLOR HOOKS - PUBLIC PAGES GLOBAL
   Aplica en dark y light
========================================================= */

/* Productos populares */
html[class*="brand-"] .popular-accent,
html[class*="brand-"] .popular-card__cta {
  color: var(--theme-primary) !important;
}

html[class*="brand-"] .popular-card:hover {
  border-color: var(--theme-border) !important;
  box-shadow: 0 28px 70px var(--theme-glow) !important;
}

html[class*="brand-"] .popular-card:hover .popular-card__title {
  color: var(--theme-primary) !important;
  text-shadow: 0 0 14px var(--theme-glow) !important;
}

/* Reseller plan */
html[class*="brand-"] .reseller-accent,
html[class*="brand-"] .reseller-card__price {
  color: var(--theme-primary) !important;
}

html[class*="brand-"] .reseller-card__btn {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
  box-shadow: 0 16px 36px var(--theme-glow) !important;
  border-color: var(--theme-border) !important;
}

html[class*="brand-"] .reseller-card__features i {
  color: var(--theme-primary) !important;
}

/* Resellerpricing / Todos los servicios */
html[class*="brand-"] .services-search__icon,
html[class*="brand-"] .service-price,
html[class*="brand-"] .service-group-card__meta {
  color: var(--theme-primary) !important;
}

html[class*="brand-"] .service-buy-btn {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
  box-shadow: 0 14px 32px var(--theme-glow) !important;
  border-color: var(--theme-border) !important;
}

html[class*="brand-"] .services-search__box:focus-within,
html[class*="brand-"] .service-group-card:hover {
  border-color: var(--theme-border) !important;
  box-shadow: 0 18px 42px var(--theme-glow) !important;
}
/* =========================================================
   AUTH PAGES - THEME COLOR HOOKS
   Login / Register / Forgot / Reset
========================================================= */

html[class*="brand-"] .btn-premium,
html[class*="brand-"] .premium-auth-btn {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
  box-shadow: 0 16px 36px var(--theme-glow) !important;
}

html[class*="brand-"] .premium-ig .input-group-text,
html[class*="brand-"] .login-security i,
html[class*="brand-"] .premium-auth-input .input-group-text,
html[class*="brand-"] .premium-auth-security i,
html[class*="brand-"] .password-strength__text strong {
  color: var(--theme-primary) !important;
}

html[class*="brand-"] .login a,
html[class*="brand-"] .error-page a,
html[class*="brand-"] .premium-auth-links a {
  color: var(--theme-primary) !important;
}

html[class*="brand-"] .login .form-control:focus,
html[class*="brand-"] .error-page .form-control:focus,
html[class*="brand-"] .premium-auth-input:focus-within {
  border-color: var(--theme-border) !important;
  box-shadow:
    0 0 0 1px var(--theme-border),
    0 0 20px var(--theme-glow) !important;
}

html[class*="brand-"] .login-security,
html[class*="brand-"] .premium-auth-security {
  border-color: var(--theme-border) !important;
  background: color-mix(in srgb, var(--theme-primary) 8%, transparent) !important;
}


/* =========================================================
   AUTH PAGES - LIGHT MODE
========================================================= */

html.theme-light body::before {
  background:
    radial-gradient(900px 420px at 15% 20%, var(--theme-glow), transparent 60%),
    radial-gradient(700px 360px at 85% 10%, rgba(123,77,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(244,248,252,.92), rgba(232,241,249,.94)) !important;
}

html.theme-light .login .login-content,
html.theme-light .register-content,
html.theme-light .error-page .error-page-content {
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow:
    0 28px 80px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
  color: #101827 !important;
}

html.theme-light .login h1,
html.theme-light .login h2,
html.theme-light .register h1,
html.theme-light .register h2,
html.theme-light .error-page h1,
html.theme-light .error-page h2 {
  color: #101827 !important;
}

html.theme-light .login p,
html.theme-light .register p,
html.theme-light .error-page p,
html.theme-light .form-label,
html.theme-light label {
  color: #52657c !important;
}

html.theme-light .login .form-control,
html.theme-light .register .form-control,
html.theme-light .error-page .form-control {
  background: rgba(255,255,255,.82) !important;
  color: #101827 !important;
  border-color: rgba(15,23,42,.10) !important;
}

html.theme-light .login .form-control::placeholder,
html.theme-light .register .form-control::placeholder,
html.theme-light .error-page .form-control::placeholder {
  color: #8a9aab !important;
}

html.theme-light .premium-ig .input-group-text {
  background: color-mix(in srgb, var(--theme-primary) 10%, #ffffff) !important;
  border-color: rgba(15,23,42,.10) !important;
}

html.theme-light .login-security {
  color: #52657c !important;
  background: color-mix(in srgb, var(--theme-primary) 8%, #ffffff) !important;
  border-color: var(--theme-border) !important;
}

html.theme-light .password-strength__bar {
  background: rgba(15,23,42,.08) !important;
  border-color: rgba(15,23,42,.08) !important;
}

html.theme-light .password-strength__text {
  color: #64748b !important;
}
/* =========================================================
   DASHBOARD HEADER - THEME COLORS + LIGHT MODE
   Dark: respeta diseño actual + color de tema
   Light: crea versión light + color de tema
========================================================= */

/* DARK / GLOBAL - COLOR DE TEMA */
html[class*="brand-"] .panel-header-funds-btn {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
  box-shadow:
    0 12px 28px var(--theme-glow),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  border-color: var(--theme-border) !important;
}

html[class*="brand-"] .panel-user-pill__role,
html[class*="brand-"] .panel-topbar-mini-link,
html[class*="brand-"] .panel-user-dropdown__icon,
html[class*="brand-"] .panel-apps-btn i {
  color: var(--theme-primary) !important;
}

html[class*="brand-"] .panel-user-pill__avatar {
  border-color: var(--theme-border) !important;
  box-shadow: 0 0 0 3px var(--theme-glow) !important;
}

html[class*="brand-"] .panel-apps-btn:hover,
html[class*="brand-"] .panel-user-pill:hover,
html[class*="brand-"] .panel-credit-chip:hover {
  border-color: var(--theme-border) !important;
  box-shadow: 0 12px 28px var(--theme-glow) !important;
}

html.theme-light .panel-apps-btn i {
  color: var(--theme-primary) !important;
}

html.theme-light .panel-credit-chip__label,
html.theme-light .panel-credit-chip__value,
html.theme-light .panel-user-pill__mail {
  color: rgba(255,255,255,.94) !important;
}

html.theme-light .panel-user-pill__role {
  color: var(--theme-primary) !important;
}

html.theme-light .panel-user-pill__caret {
  color: rgba(255,255,255,.65) !important;
}

/* LIGHT MODE - AGREGAR FONDOS */
html.theme-light .panel-header-funds-btn,
html.theme-light .panel-header-funds-btn span,
html.theme-light .panel-header-funds-btn i {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}

/* DROPDOWNS DARK + COLOR */
html[class*="brand-"] .panel-topbar-dropdown,
html[class*="brand-"] .panel-user-dropdown {
  border-color: var(--theme-border) !important;
}

html[class*="brand-"] .panel-topbar-dropdown__title,
html[class*="brand-"] .panel-user-dropdown__role {
  color: var(--theme-primary) !important;
}

/* LIGHT MODE - DROPDOWNS */
html.theme-light .panel-topbar-dropdown,
html.theme-light .panel-user-dropdown {
  background: rgba(255,255,255,.97) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 22px 50px rgba(15,23,42,.14) !important;
}

html.theme-light .panel-topbar-dropdown__head,
html.theme-light .panel-user-dropdown__head {
  background: rgba(248,250,252,.88) !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
}

html.theme-light .panel-topbar-dropdown__title,
html.theme-light .panel-user-dropdown__role {
  color: var(--theme-primary) !important;
}

html.theme-light .panel-topbar-dropdown__subtitle,
html.theme-light .panel-user-dropdown__mail {
  color: #64748b !important;
}

html.theme-light .panel-topbar-dropdown label,
html.theme-light .panel-topbar-dropdown .form-label,
html.theme-light .panel-topbar-dropdown .panel-topbar-mini-link,
html.theme-light .panel-topbar-dropdown .panel-topbar-mini-link i,
html.theme-light .panel-topbar-dropdown a.panel-topbar-mini-link {
  color: var(--theme-primary) !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
}

html.theme-light .panel-user-dropdown .dropdown-item {
  color: #334155 !important;
}

html.theme-light .panel-user-dropdown .dropdown-item:hover {
  background: color-mix(in srgb, var(--theme-primary) 8%, #ffffff) !important;
  color: #0f172a !important;
}

html.theme-light .panel-user-dropdown .dropdown-divider {
  border-color: rgba(15,23,42,.08) !important;
}

/* SELECT DEL DROPDOWN EN LIGHT */
html.theme-light .panel-topbar-select {
  background: #ffffff !important;
  border-color: rgba(15,23,42,.12) !important;
  color: #0f172a !important;
}
/* =========================================================
   USER DROPDOWN ICONS - DARK / LIGHT
========================================================= */

/* LIGHT */
html.theme-light .panel-user-dropdown .dropdown-item i,
html.theme-light .panel-user-dropdown .dropdown-item svg {
    color: #0f172a !important;
    fill: #0f172a !important;
}

/* DARK */
html:not(.theme-light) .panel-user-dropdown .dropdown-item i,
html:not(.theme-light) .panel-user-dropdown .dropdown-item svg {
    color: rgba(255,255,255,.92) !important;
    fill: rgba(255,255,255,.92) !important;
}

/* =========================================================
   SIDEBAR PANEL - THEME COLORS + LIGHT MODE
   Dark: respeta color de tema
   Light: sidebar se mantiene oscuro premium
========================================================= */

/* COLOR DE TEMA GLOBAL EN SIDEBAR */
html[class*="brand-"] #sidebar.app-sidebar-premium,
html.theme-light #sidebar.app-sidebar-premium {
  background:
    radial-gradient(520px 260px at 18% 12%, rgba(0,200,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(10,15,28,.96), rgba(7,12,24,.985)) !important;
}

html[class*="brand-"] #sidebar.app-sidebar-premium .menu-icon,
html[class*="brand-"] #sidebar.app-sidebar-premium .menu-submenu .menu-icon {
  color: var(--theme-primary) !important;
}

html[class*="brand-"] #sidebar.app-sidebar-premium .menu-item.active > .menu-link {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 18%, transparent), rgba(59,130,246,.08)) !important;
  border-color: var(--theme-border) !important;
  box-shadow:
    0 0 0 1px var(--theme-border),
    0 10px 24px rgba(0,0,0,.18) !important;
}

html[class*="brand-"] #sidebar.app-sidebar-premium .menu-link:hover,
html[class*="brand-"] #sidebar.app-sidebar-premium .menu-submenu .menu-link:hover {
  background: color-mix(in srgb, var(--theme-primary) 9%, transparent) !important;
  border-color: var(--theme-border) !important;
}

html[class*="brand-"] #sidebar.app-sidebar-premium .menu-submenu {
  border-left-color: var(--theme-border) !important;
}

html[class*="brand-"] #sidebar.app-sidebar-premium .menu-submenu::before {
  background: linear-gradient(
    180deg,
    transparent,
    var(--theme-border),
    transparent
  ) !important;
}

html[class*="brand-"] #sidebar.app-sidebar-premium .menu-item.active .menu-icon,
html[class*="brand-"] #sidebar.app-sidebar-premium .menu-item.has-sub.expand > .menu-link .menu-icon {
  color: var(--theme-primary) !important;
}

/* LIGHT MODE: mantener sidebar oscuro, solo mejorar contraste */
html.theme-light #sidebar.app-sidebar-premium {
  background:
    radial-gradient(520px 260px at 18% 12%, rgba(0,200,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(10,15,28,.97), rgba(7,12,24,.99)) !important;
  border-right: 1px solid rgba(15,23,42,.18) !important;
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,.04),
    10px 0 34px rgba(15,23,42,.16) !important;
}

html.theme-light #sidebar.app-sidebar-premium .menu-header {
  color: rgba(255,255,255,.48) !important;
}

html.theme-light #sidebar.app-sidebar-premium .menu-link {
  color: rgba(255,255,255,.74) !important;
}

html.theme-light #sidebar.app-sidebar-premium .menu-link:hover {
  color: #fff !important;
}

html.theme-light #sidebar.app-sidebar-premium .menu-item.active > .menu-link,
html.theme-light #sidebar.app-sidebar-premium .menu-item.has-sub.expand > .menu-link {
  color: #fff !important;
}

html.theme-light #sidebar.app-sidebar-premium .menu-submenu .menu-text {
  color: rgba(255,255,255,.72) !important;
}

html.theme-light #sidebar.app-sidebar-premium .menu-submenu .menu-item.active > .menu-link .menu-text {
  color: #fff !important;
}

html.theme-light #sidebar.app-sidebar-premium .caret {
  border-top-color: rgba(255,255,255,.68) !important;
}

/* SCROLLBAR */
html[class*="brand-"] #sidebar.app-sidebar-premium .app-sidebar-content::-webkit-scrollbar-thumb {
  background: var(--theme-border) !important;
}
/* =========================================================
   SIDEBAR PANEL - LIGHT MODE WHITE TEST
========================================================= */

html.theme-light #sidebar.app-sidebar-premium {
  background:
    radial-gradient(520px 260px at 18% 12%, var(--theme-glow), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,246,252,.98)) !important;
  border-right: 1px solid rgba(15,23,42,.10) !important;
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,.75),
    10px 0 32px rgba(15,23,42,.10) !important;
}

html.theme-light #sidebar.app-sidebar-premium .menu-header {
  color: #64748b !important;
}

html.theme-light #sidebar.app-sidebar-premium .menu-link {
  color: #334155 !important;
}

html.theme-light #sidebar.app-sidebar-premium .menu-text {
  color: inherit !important;
}

html.theme-light #sidebar.app-sidebar-premium .menu-icon,
html.theme-light #sidebar.app-sidebar-premium .menu-submenu .menu-icon {
  color: var(--theme-primary) !important;
}

html.theme-light #sidebar.app-sidebar-premium .menu-link:hover {
  background: color-mix(in srgb, var(--theme-primary) 8%, #ffffff) !important;
  border-color: var(--theme-border) !important;
  color: #0f172a !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.08) !important;
}

html.theme-light #sidebar.app-sidebar-premium .menu-item.active > .menu-link,
html.theme-light #sidebar.app-sidebar-premium .menu-item.has-sub.expand > .menu-link {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--theme-primary) 12%, #ffffff),
      rgba(255,255,255,.88)
    ) !important;
  border-color: var(--theme-border) !important;
  color: #0f172a !important;
  box-shadow:
    0 10px 26px rgba(15,23,42,.09),
    inset 4px 0 0 var(--theme-primary) !important;
}

html.theme-light #sidebar.app-sidebar-premium .menu-submenu {
  border-left-color: var(--theme-border) !important;
}

html.theme-light #sidebar.app-sidebar-premium .menu-submenu .menu-link {
  background: rgba(255,255,255,.48) !important;
  border-color: transparent !important;
}

html.theme-light #sidebar.app-sidebar-premium .menu-submenu .menu-text {
  color: #475569 !important;
}

html.theme-light #sidebar.app-sidebar-premium .menu-submenu .menu-item.active > .menu-link .menu-text {
  color: #0f172a !important;
}

html.theme-light #sidebar.app-sidebar-premium .caret {
  border-top-color: #64748b !important;
}

html.theme-light #sidebar.app-sidebar-premium .menu-divider {
  background: linear-gradient(90deg, transparent, rgba(15,23,42,.12), transparent) !important;
}
/* SIDEBAR - FORZAR ICONOS text-info EN DARK + LIGHT */
#sidebar.app-sidebar-premium .menu-icon i,
#sidebar.app-sidebar-premium .menu-icon .text-info,
#sidebar.app-sidebar-premium .menu-submenu .menu-icon i,
#sidebar.app-sidebar-premium .menu-submenu .menu-icon .text-info {
  color: var(--theme-primary) !important;
}
/* =========================================================
   THEME DEFAULT BLUE - LIGHT CONTRAST
   Solo aplica al azul default cuando NO hay brand-*
========================================================= */

html.theme-light:not([class*="brand-"]) {
  --theme-primary: #0b8ee8;
  --theme-secondary: #2563eb;
  --theme-border: rgba(37, 99, 235, .26);
  --theme-glow: rgba(37, 99, 235, .14);
}
/* =========================================================
   MOBILE MENU TOGGLER - SOLO RAYITAS BLANCAS
========================================================= */

@media (max-width: 991px) {

  html.theme-light .menu-toggler .bar,
  html.theme-light .sidebar-mobile-toggler .bar,
  html.theme-light .app-sidebar-mobile-backdrop + * .menu-toggler .bar {
    background: #ffffff !important;
  }

}
/* =========================================================
   DASHBOARD CLIENTE - LIGHT REAL WRAPPER TEST
========================================================= */

html.theme-light .app-content,
html.theme-light .app-content .app-page-clean,
html.theme-light .app-content [class*="container"],
html.theme-light .client-dashboard-layout,
html.theme-light .client-dashboard-main,
html.theme-light .client-dashboard-side {
  background: transparent !important;
}


/* =========================================================
   DASHBOARD CLIENTE - LIGHT ORDER STRIPS FIX
========================================================= */

html.theme-light .dashboard-order-strip {
  background:
    radial-gradient(360px 160px at 0% 0%, rgba(255,255,255,.45), transparent 62%),
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(244,248,252,.96)) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 16px 38px rgba(15,23,42,.10) !important;
}

html.theme-light .dashboard-order-strip__title {
  color: #334155 !important;
}

html.theme-light .dashboard-order-strip__number {
  color: #0f172a !important;
}

html.theme-light .dashboard-order-strip__desc {
  color: #64748b !important;
}

html.theme-light .dashboard-order-strip__icon {
  color: var(--theme-primary) !important;
  background: color-mix(in srgb, var(--theme-primary) 10%, #ffffff) !important;
  border-color: var(--theme-border) !important;
}

html.theme-light .dashboard-order-strip__progress {
  background: rgba(15,23,42,.08) !important;
}
/* =========================================================
   DASHBOARD CLIENTE - LIGHT TOP CARDS FIX
========================================================= */

html.theme-light .dashboard-top-unified,
html.theme-light .dashboard-kpi-card,
html.theme-light .dashboard-stat-clean {
  background:
    radial-gradient(360px 160px at 0% 0%, rgba(255,255,255,.45), transparent 62%),
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(244,248,252,.96)) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 16px 38px rgba(15,23,42,.10) !important;
}

/* Textos */
html.theme-light .dashboard-top-unified__title,
html.theme-light .dashboard-kpi-card__value,
html.theme-light .dashboard-stat-clean__value,
html.theme-light .dashboard-security-item__label {
  color: #0f172a !important;
}

html.theme-light .dashboard-kpi-card__label,
html.theme-light .dashboard-stat-clean__label,
html.theme-light .dashboard-kpi-card__sub,
html.theme-light .dashboard-security-item__text {
  color: #64748b !important;
}

/* Mini cards Telegram / 2FA */
html.theme-light .dashboard-security-item {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
}

/* Iconos y botones internos */
html.theme-light .dashboard-stat-clean__icon,
html.theme-light .dashboard-kpi-card__action {
  color: var(--theme-primary) !important;
  background: color-mix(in srgb, var(--theme-primary) 10%, #ffffff) !important;
  border-color: var(--theme-border) !important;
}

html.theme-light .dashboard-security-item__action {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
  border-color: var(--theme-border) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px var(--theme-glow) !important;
}

html.theme-light .dashboard-security-item__badge {
  color: #10b981 !important;
  background: rgba(16,185,129,.10) !important;
  border-color: rgba(16,185,129,.22) !important;
}
/* =========================================================
   DASHBOARD - VALORES IMPORTANTES COLOR TEMA
========================================================= */

/* =========================================================
   LIGHT MODE
========================================================= */


/* =========================================================
   DASHBOARD ANNOUNCEMENTS - LIGHT THEME DETAILS
========================================================= */

/* Precio con color del tema */
html.theme-light .dashboard-announcement-item__price {
  color: var(--theme-primary) !important;
  text-shadow: 0 0 14px var(--theme-glow) !important;
}
/* =========================================================
   DASHBOARD ICONOS - DARK MODE COLOR TEMA
========================================================= */

html:not(.theme-light) .dashboard-kpi-card__icon,
html:not(.theme-light) .dashboard-stat-clean__icon,
html:not(.theme-light) .dashboard-order-strip__icon {
    color: var(--theme-primary) !important;
    border-color: color-mix(in srgb, var(--theme-primary) 35%, transparent) !important;

    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--theme-primary) 18%, transparent),
            rgba(255,255,255,.02)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 10px 22px color-mix(in srgb, var(--theme-primary) 12%, transparent) !important;
}

/* ICONOS SVG / I */
html:not(.theme-light) .dashboard-kpi-card__icon i,
html:not(.theme-light) .dashboard-stat-clean__icon i,
html:not(.theme-light) .dashboard-order-strip__icon i,
html:not(.theme-light) .dashboard-kpi-card__icon svg,
html:not(.theme-light) .dashboard-stat-clean__icon svg,
html:not(.theme-light) .dashboard-order-strip__icon svg {
    color: var(--theme-primary) !important;
    fill: var(--theme-primary) !important;
}

/* =========================================================
   PLACE ORDER GLOBAL THEMES
   All Services / IMEI / Server / Remote
   Dark: conserva azul default + agrega brand colors
   Light: versión clara + respeta brand colors
========================================================= */

/* =========================
   DARK - THEME COLOR SUPPORT
========================= */

html[class*="brand-"]:not(.theme-light) {
  --svc-blue-1: var(--theme-primary);
  --svc-blue-2: var(--theme-secondary);
  --svc-border-focus: var(--theme-border);
}

/* Botones principales */
html[class*="brand-"]:not(.theme-light) .service-ui-action-btn,
html[class*="brand-"]:not(.theme-light) .placeimei-action-btn,
html[class*="brand-"]:not(.theme-light) #placeorder,
html[class*="brand-"]:not(.theme-light) .allservices-filter-btn {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
  border-color: var(--theme-border) !important;
  box-shadow:
    0 14px 28px var(--theme-glow),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* Selects / Select2 / inputs en dark con tema */
html[class*="brand-"]:not(.theme-light) .placeimei-main-card select.form-control,
html[class*="brand-"]:not(.theme-light) .placeimei-main-card select.form-select,
html[class*="brand-"]:not(.theme-light) #grupos,
html[class*="brand-"]:not(.theme-light) #service,
html[class*="brand-"]:not(.theme-light) #buscarService,
html[class*="brand-"]:not(.theme-light) #buscarServCuadros .form-control,
html[class*="brand-"]:not(.theme-light) .select2-container .select2-selection--single {
  border-color: var(--theme-border) !important;
}

html[class*="brand-"]:not(.theme-light) .placeimei-main-card select.form-control:hover,
html[class*="brand-"]:not(.theme-light) .placeimei-main-card select.form-select:hover,
html[class*="brand-"]:not(.theme-light) #grupos:hover,
html[class*="brand-"]:not(.theme-light) #service:hover,
html[class*="brand-"]:not(.theme-light) #buscarService:hover,
html[class*="brand-"]:not(.theme-light) #buscarServCuadros .form-control:hover,
html[class*="brand-"]:not(.theme-light) .select2-container:hover .select2-selection--single {
  border-color: var(--theme-border) !important;
  box-shadow:
    0 0 0 3px var(--theme-glow),
    0 12px 26px rgba(0,0,0,.20) !important;
}

/* Dropdown Select2 */
html[class*="brand-"]:not(.theme-light) .select2-container--open .select2-dropdown {
  border-color: var(--theme-border) !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,.38),
    0 0 18px var(--theme-glow) !important;
}

html[class*="brand-"]:not(.theme-light) .select2-results__group,
html[class*="brand-"]:not(.theme-light) .select2-results__option[role="group"] > strong {
  color: var(--theme-primary) !important;
}

html[class*="brand-"]:not(.theme-light) .select2-results__option--highlighted[aria-selected],
html[class*="brand-"]:not(.theme-light) .select2-results__option--highlighted.select2-results__option--selectable {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--theme-primary) 18%, transparent),
      color-mix(in srgb, var(--theme-secondary) 14%, transparent)
    ) !important;
  box-shadow: inset 0 0 0 1px var(--theme-border) !important;
}

/* Cards modo cuadros */
html[class*="brand-"]:not(.theme-light) #servCuadros .service-card-item > .allservices-grid-card,
html[class*="brand-"]:not(.theme-light) #servCuadros .service-card-item > .placeimei-grid-card,
html[class*="brand-"]:not(.theme-light) #servCuadros .service-card-item > .placeserver-grid-card,
html[class*="brand-"]:not(.theme-light) #servCuadros .service-card-item > .placeremote-grid-card {
  border-color: var(--theme-border) !important;
}

html[class*="brand-"]:not(.theme-light) #servCuadros .service-card-item > .allservices-grid-card:hover,
html[class*="brand-"]:not(.theme-light) #servCuadros .service-card-item > .placeimei-grid-card:hover,
html[class*="brand-"]:not(.theme-light) #servCuadros .service-card-item > .placeserver-grid-card:hover,
html[class*="brand-"]:not(.theme-light) #servCuadros .service-card-item > .placeremote-grid-card:hover {
  border-color: var(--theme-border) !important;
  box-shadow:
    0 0 18px var(--theme-glow),
    0 16px 34px rgba(0,0,0,.26) !important;
}

html[class*="brand-"]:not(.theme-light) .allservices-grid-card__header,
html[class*="brand-"]:not(.theme-light) .placeimei-grid-card__header,
html[class*="brand-"]:not(.theme-light) .placeserver-grid-card__header,
html[class*="brand-"]:not(.theme-light) .placeremote-grid-card__header {
  background:
    radial-gradient(circle at top, var(--theme-glow), transparent 58%),
    linear-gradient(180deg, rgba(8,35,96,.88), rgba(6,26,72,.76)) !important;
  border-bottom-color: var(--theme-border) !important;
}

html[class*="brand-"]:not(.theme-light) .allservices-grid-card__fallback-icon,
html[class*="brand-"]:not(.theme-light) .placeimei-grid-card__fallback-icon,
html[class*="brand-"]:not(.theme-light) .placeserver-grid-card__fallback-icon,
html[class*="brand-"]:not(.theme-light) .placeremote-grid-card__fallback-icon,
html[class*="brand-"]:not(.theme-light) .allservices-time-icon,
html[class*="brand-"]:not(.theme-light) .allservices-option-time .bi-clock-history,
html[class*="brand-"]:not(.theme-light) .allservices-option-price {
  color: var(--theme-primary) !important;
}

html[class*="brand-"]:not(.theme-light) .allservices-grid-card__badge,
html[class*="brand-"]:not(.theme-light) .placeimei-grid-card__badge,
html[class*="brand-"]:not(.theme-light) .placeserver-grid-card__badge,
html[class*="brand-"]:not(.theme-light) .placeremote-grid-card__badge,
html[class*="brand-"]:not(.theme-light) .allservices-grid-card__price,
html[class*="brand-"]:not(.theme-light) .placeimei-grid-card__price,
html[class*="brand-"]:not(.theme-light) .placeserver-grid-card__price,
html[class*="brand-"]:not(.theme-light) .placeremote-grid-card__price {
  color: color-mix(in srgb, var(--theme-primary) 35%, #ffffff) !important;
  border-color: var(--theme-border) !important;
  background: color-mix(in srgb, var(--theme-primary) 10%, transparent) !important;
}

/* Paneles detalle */
html[class*="brand-"]:not(.theme-light) .placeimei-main-card,
html[class*="brand-"]:not(.theme-light) .service-ui-main-card,
html[class*="brand-"]:not(.theme-light) .placeimei-detail-card,
html[class*="brand-"]:not(.theme-light) .service-ui-detail-card {
  border-color: var(--theme-border) !important;
}

html[class*="brand-"]:not(.theme-light) #costo h2,
html[class*="brand-"]:not(.theme-light) .placeimei-costo h2 {
  text-shadow: 0 0 18px var(--theme-glow) !important;
}

html[class*="brand-"]:not(.theme-light) .placeimei-detail-card .progress-bar,
html[class*="brand-"]:not(.theme-light) .placeimei-grid-card__progress .progress-bar,
html[class*="brand-"]:not(.theme-light) .allservices-grid-card__progress .progress-bar,
html[class*="brand-"]:not(.theme-light) .placeserver-grid-card__progress .progress-bar,
html[class*="brand-"]:not(.theme-light) .placeremote-grid-card__progress .progress-bar {
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary)) !important;
}


/* =========================
   LIGHT MODE - PLACE ORDER
========================= */

html.theme-light .placeimei-main-card,
html.theme-light .service-ui-main-card,
html.theme-light .placeimei-detail-card,
html.theme-light .service-ui-detail-card,
html.theme-light .allservices-select-wrap,
html.theme-light .allservices-products .card {
  background:
    radial-gradient(520px 180px at 0% 0%, var(--theme-glow), transparent 68%),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(241,247,253,.98)) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow:
    0 18px 42px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}

/* Textos light */
html.theme-light .service-ui-main-card label,
html.theme-light .placeimei-main-card label,
html.theme-light .placeimei-topbar label,
html.theme-light .placeimei-detail-card .form-label,
html.theme-light #titimei,
html.theme-light .placeimei-service-label h3,
html.theme-light .service-ui-service-label h3 {
  color: #0f172a !important;
}

html.theme-light .service-ui-delivery,
html.theme-light .placeimei-delivery-text,
html.theme-light #delivery,
html.theme-light .service-ui-info,
html.theme-light .placeimei-info-text,
html.theme-light #info {
  color: #64748b !important;
}

/* Inputs / selects light */
html.theme-light .placeimei-main-card select.form-control,
html.theme-light .placeimei-main-card select.form-select,
html.theme-light #grupos,
html.theme-light #service,
html.theme-light #buscarService,
html.theme-light #buscarServCuadros .form-control,
html.theme-light .placeimei-detail-card input.form-control,
html.theme-light .placeimei-detail-card textarea.form-control,
html.theme-light .placeimei-detail-card select.form-select,
html.theme-light #camposcustom input,
html.theme-light #camposcustom textarea,
html.theme-light #camposcustom select,
html.theme-light #camposcustom_server input,
html.theme-light #camposcustom_server textarea,
html.theme-light #camposcustom_server select,
html.theme-light #camposcustom_remote input,
html.theme-light #camposcustom_remote textarea,
html.theme-light #camposcustom_remote select {
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  color: #0f172a !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 10px 22px rgba(15,23,42,.08) !important;
}

html.theme-light .placeimei-main-card select.form-control:hover,
html.theme-light .placeimei-main-card select.form-select:hover,
html.theme-light #grupos:hover,
html.theme-light #service:hover,
html.theme-light #buscarService:hover,
html.theme-light #buscarServCuadros .form-control:hover,
html.theme-light .placeimei-detail-card input.form-control:hover,
html.theme-light .placeimei-detail-card textarea.form-control:hover {
  border-color: var(--theme-border) !important;
}

html.theme-light .placeimei-main-card select.form-control:focus,
html.theme-light .placeimei-main-card select.form-select:focus,
html.theme-light #grupos:focus,
html.theme-light #service:focus,
html.theme-light #buscarService:focus,
html.theme-light #buscarServCuadros .form-control:focus,
html.theme-light .placeimei-detail-card input.form-control:focus,
html.theme-light .placeimei-detail-card textarea.form-control:focus,
html.theme-light .placeimei-detail-card select.form-select:focus {
  border-color: var(--theme-border) !important;
  box-shadow:
    0 0 0 3px var(--theme-glow),
    0 10px 22px rgba(15,23,42,.08) !important;
}

html.theme-light #buscarService::placeholder,
html.theme-light .placeimei-detail-card input::placeholder,
html.theme-light .placeimei-detail-card textarea::placeholder {
  color: #94a3b8 !important;
}

/* Select2 light */
html.theme-light .select2-container .select2-selection--single {
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.08) !important;
}

html.theme-light .select2-selection__rendered,
html.theme-light #allservices_service_list + .select2-container .select2-selection__rendered,
html.theme-light #allservices_service_list + .select2-container .select2-selection__placeholder {
  color: #0f172a !important;
}

html.theme-light .select2-container:hover .select2-selection--single,
html.theme-light .select2-container--open .select2-selection--single {
  border-color: var(--theme-border) !important;
  box-shadow:
    0 0 0 3px var(--theme-glow),
    0 10px 22px rgba(15,23,42,.08) !important;
}

html.theme-light .select2-container--open .select2-dropdown,
html.theme-light .select2-container--open .select2-search--dropdown,
html.theme-light .select2-container--open .select2-results {
  background: #ffffff !important;
  border-color: rgba(15,23,42,.10) !important;
  box-shadow: 0 22px 50px rgba(15,23,42,.14) !important;
}

html.theme-light .select2-container--open .select2-search--dropdown .select2-search__field {
  background: #f8fafc !important;
  border-color: rgba(15,23,42,.12) !important;
  color: #0f172a !important;
}

html.theme-light .select2-results__option {
  color: #334155 !important;
}

html.theme-light .select2-results__group,
html.theme-light .select2-results__option[role="group"] > strong {
  color: var(--theme-primary) !important;
}

html.theme-light .select2-results__option--highlighted[aria-selected],
html.theme-light .select2-results__option--highlighted.select2-results__option--selectable,
html.theme-light .select2-results__option[aria-selected="true"] {
  background: color-mix(in srgb, var(--theme-primary) 10%, #ffffff) !important;
  color: #0f172a !important;
  box-shadow: inset 0 0 0 1px var(--theme-border) !important;
}

/* Cards cuadros light */
html.theme-light #servCuadros .service-card-item > .allservices-grid-card,
html.theme-light #servCuadros .service-card-item > .placeimei-grid-card,
html.theme-light #servCuadros .service-card-item > .placeserver-grid-card,
html.theme-light #servCuadros .service-card-item > .placeremote-grid-card {
  background:
    radial-gradient(360px 150px at 0% 0%, var(--theme-glow), transparent 68%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(241,247,253,.98)) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 16px 34px rgba(15,23,42,.10) !important;
}

html.theme-light #servCuadros .service-card-item > .allservices-grid-card:hover,
html.theme-light #servCuadros .service-card-item > .placeimei-grid-card:hover,
html.theme-light #servCuadros .service-card-item > .placeserver-grid-card:hover,
html.theme-light #servCuadros .service-card-item > .placeremote-grid-card:hover {
  border-color: var(--theme-border) !important;
  box-shadow:
    0 0 0 1px var(--theme-border),
    0 18px 38px rgba(15,23,42,.12),
    0 0 24px var(--theme-glow) !important;
}

html.theme-light .allservices-grid-card__header,
html.theme-light .placeimei-grid-card__header,
html.theme-light .placeserver-grid-card__header,
html.theme-light .placeremote-grid-card__header {
  background:
    radial-gradient(circle at top, var(--theme-glow), transparent 58%),
    linear-gradient(180deg, rgba(248,250,252,.98), rgba(226,236,247,.94)) !important;
  border-bottom-color: rgba(15,23,42,.08) !important;
}

html.theme-light .allservices-grid-card__body,
html.theme-light .placeimei-grid-card__body,
html.theme-light .placeserver-grid-card__body,
html.theme-light .placeremote-grid-card__body {
  background: transparent !important;
}

html.theme-light .allservices-grid-card__title,
html.theme-light .placeimei-grid-card__title,
html.theme-light .placeserver-grid-card__title,
html.theme-light .placeremote-grid-card__title {
  color: #0f172a !important;
}

html.theme-light .allservices-grid-card__time,
html.theme-light .placeimei-grid-card__time,
html.theme-light .placeserver-grid-card__time,
html.theme-light .placeremote-grid-card__time {
  color: #64748b !important;
}

html.theme-light .allservices-grid-card__fallback-icon,
html.theme-light .placeimei-grid-card__fallback-icon,
html.theme-light .placeserver-grid-card__fallback-icon,
html.theme-light .placeremote-grid-card__fallback-icon {
  color: var(--theme-primary) !important;
  text-shadow: 0 0 14px var(--theme-glow) !important;
}

html.theme-light .allservices-grid-card__badge,
html.theme-light .placeimei-grid-card__badge,
html.theme-light .placeserver-grid-card__badge,
html.theme-light .placeremote-grid-card__badge,
html.theme-light .allservices-grid-card__price,
html.theme-light .placeimei-grid-card__price,
html.theme-light .placeserver-grid-card__price,
html.theme-light .placeremote-grid-card__price {
  color: var(--theme-primary) !important;
  background: color-mix(in srgb, var(--theme-primary) 9%, #ffffff) !important;
  border-color: var(--theme-border) !important;
}

/* Precio detalle light */
html.theme-light #costo h2,
html.theme-light .placeimei-costo h2 {
  color: #0f172a !important;
  text-shadow: none !important;
}

html.theme-light .placeimei-detail-card .progress,
html.theme-light .allservices-grid-card__progress .progress,
html.theme-light .placeimei-grid-card__progress .progress,
html.theme-light .placeserver-grid-card__progress .progress,
html.theme-light .placeremote-grid-card__progress .progress {
  background: rgba(15,23,42,.08) !important;
}

html.theme-light .placeimei-detail-card .progress-bar,
html.theme-light .allservices-grid-card__progress .progress-bar,
html.theme-light .placeimei-grid-card__progress .progress-bar,
html.theme-light .placeserver-grid-card__progress .progress-bar,
html.theme-light .placeremote-grid-card__progress .progress-bar {
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary)) !important;
}

/* Botones light */
html.theme-light .service-ui-action-btn,
html.theme-light .placeimei-action-btn,
html.theme-light #placeorder,
html.theme-light .allservices-filter-btn {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
  border-color: var(--theme-border) !important;
  color: #ffffff !important;
  box-shadow:
    0 14px 28px var(--theme-glow),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

html.theme-light .service-ui-action-btn--back,
html.theme-light .placeimei-action-btn--back {
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(241,247,253,.96)) !important;
  color: #0f172a !important;
  border-color: rgba(15,23,42,.10) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.08) !important;
}

html.theme-light .placeimei-action-btn--back .back-icon,
html.theme-light .service-ui-action-btn--back .back-icon {
  border-left-color: #0f172a !important;
  border-bottom-color: #0f172a !important;
}

/* Input group IMEI light */
html.theme-light #imei .input-group-text,
html.theme-light #imei .form-control {
  background: #ffffff !important;
  border-color: rgba(15,23,42,.12) !important;
  color: #0f172a !important;
}

html.theme-light #imei .input-group:focus-within {
  box-shadow: 0 0 0 3px var(--theme-glow) !important;
}
/* =========================================================
   PLACE ORDER - ALL SERVICES LIGHT FIXES
   Select interno + custom fields + stock help + contraste azul
========================================================= */

/* 1) SELECT INTERNO: que se vea el servicio seleccionado */
html.theme-light #allservices_service_list + .select2-container .select2-selection__rendered,
html.theme-light #allservices_service_list + .select2-container .select2-selection__rendered *,
html.theme-light .allservices-products .select2-selection__rendered,
html.theme-light .allservices-products .select2-selection__rendered * {
    color: #0f172a !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
}

/* Mantener precio y reloj azul con más contraste en TODOS los temas */
.allservices-option-price,
.allservices-option-time,
.allservices-time-icon,
.allservices-option-time .bi-clock-history,
#allservices_service_list + .select2-container .allservices-option-price,
#allservices_service_list + .select2-container .allservices-time-icon,
#allservices_service_list + .select2-container .bi-clock-history {
    color: #009eff !important;
    opacity: 1 !important;
    font-weight: 900 !important;
    text-shadow: 0 0 10px rgba(0,158,255,.18) !important;
}

html.theme-light .allservices-option-price,
html.theme-light .allservices-option-time,
html.theme-light .allservices-time-icon,
html.theme-light .allservices-option-time .bi-clock-history,
html.theme-light #allservices_service_list + .select2-container .allservices-option-price,
html.theme-light #allservices_service_list + .select2-container .allservices-time-icon,
html.theme-light #allservices_service_list + .select2-container .bi-clock-history {
    color: #008ee6 !important;
    opacity: 1 !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

/* Separadores del select interno */
html.theme-light .allservices-option-sep {
    color: rgba(15,23,42,.34) !important;
}

/* 2) CUSTOM FIELDS: labels visibles en light */
html.theme-light #camposcustom label,
html.theme-light #camposcustom_server label,
html.theme-light #camposcustom_remote label,
html.theme-light .placeimei-custom-select-wrap label,
html.theme-light .placeimei-detail-card label,
html.theme-light .placeimei-detail-card .form-label {
    color: #0f172a !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
}

/* 3) CUSTOM FIELDS: inputs/selects visibles */
html.theme-light #camposcustom input,
html.theme-light #camposcustom textarea,
html.theme-light #camposcustom select,
html.theme-light #camposcustom .placeimei-custom-select,
html.theme-light #camposcustom_server input,
html.theme-light #camposcustom_server textarea,
html.theme-light #camposcustom_server select,
html.theme-light #camposcustom_server .placeimei-custom-select,
html.theme-light #camposcustom_remote input,
html.theme-light #camposcustom_remote textarea,
html.theme-light #camposcustom_remote select,
html.theme-light #camposcustom_remote .placeimei-custom-select {
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,.14) !important;
    color: #0f172a !important;
    opacity: 1 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.85),
        0 10px 22px rgba(15,23,42,.08) !important;
}

/* Placeholder custom fields */
html.theme-light #camposcustom input::placeholder,
html.theme-light #camposcustom textarea::placeholder,
html.theme-light #camposcustom_server input::placeholder,
html.theme-light #camposcustom_server textarea::placeholder,
html.theme-light #camposcustom_remote input::placeholder,
html.theme-light #camposcustom_remote textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

/* 4) SELECT custom field: flecha visible */
html.theme-light #camposcustom .placeimei-custom-select-wrap::after,
html.theme-light #camposcustom_server .placeimei-custom-select-wrap::after,
html.theme-light #camposcustom_remote .placeimei-custom-select-wrap::after {
    border-right-color: #009eff !important;
    border-bottom-color: #009eff !important;
    opacity: 1 !important;
}

/* Opciones nativas de custom fields */
html.theme-light #camposcustom select option,
html.theme-light #camposcustom_server select option,
html.theme-light #camposcustom_remote select option,
html.theme-light .placeimei-custom-select option {
    background: #ffffff !important;
    color: #0f172a !important;
}

/* 5) Mensaje "Reporta a Administrador" */
html.theme-light .instant-stock-help,
.instant-stock-help {
    display: block !important;
    margin-top: 6px !important;
    color: #ef4444 !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
}

/* 6) Mejorar bloque precio + stock */
.placeimei-price-stock-wrap,
.service-ui-price-stock-wrap {
    align-items: center !important;
    gap: 12px !important;
}

html.theme-light .instant-stock-badge--danger {
    color: #ef3b68 !important;
    background: rgba(239,59,104,.12) !important;
    border-color: rgba(239,59,104,.28) !important;
}

html.theme-light .instant-stock-badge--warning {
    color: #b45309 !important;
    background: rgba(245,158,11,.14) !important;
    border-color: rgba(245,158,11,.30) !important;
}

html.theme-light .instant-stock-badge--success {
    color: #059669 !important;
    background: rgba(16,185,129,.12) !important;
    border-color: rgba(16,185,129,.28) !important;
}

/* 7) Focus light menos chillón pero visible */
html.theme-light #camposcustom input:focus,
html.theme-light #camposcustom textarea:focus,
html.theme-light #camposcustom select:focus,
html.theme-light #camposcustom_server input:focus,
html.theme-light #camposcustom_server textarea:focus,
html.theme-light #camposcustom_server select:focus,
html.theme-light #camposcustom_remote input:focus,
html.theme-light #camposcustom_remote textarea:focus,
html.theme-light #camposcustom_remote select:focus {
    border-color: var(--theme-border) !important;
    box-shadow:
        0 0 0 3px var(--theme-glow),
        0 10px 22px rgba(15,23,42,.08) !important;
}
/* =========================================================
   PLACE ORDER - DARK THEME CLEAN FINAL
   All Services / IMEI / Server / Remote
   1. Página neutral
   2. Títulos de servicios con color del tema
   3. Precio/tiempo con color del tema, pero suave
========================================================= */

html[class*="brand-"]:not(.theme-light) {
    --place-neutral-border: rgba(80,110,170,.20);
    --place-neutral-border-soft: rgba(80,110,170,.14);
    --place-neutral-bg-1: rgba(18,31,58,.98);
    --place-neutral-bg-2: rgba(10,20,40,.98);
    --place-theme-soft: color-mix(in srgb, var(--theme-primary) 62%, rgba(210,225,255,.90));
    --place-theme-muted: color-mix(in srgb, var(--theme-primary) 72%, rgba(180,200,230,.70));
}

/* =========================
   PANELES NEUTROS
========================= */

html[class*="brand-"]:not(.theme-light) .placeimei-main-card,
html[class*="brand-"]:not(.theme-light) .service-ui-main-card,
html[class*="brand-"]:not(.theme-light) .placeimei-detail-card,
html[class*="brand-"]:not(.theme-light) .service-ui-detail-card,
html[class*="brand-"]:not(.theme-light) .allservices-select-wrap,
html[class*="brand-"]:not(.theme-light) .allservices-products .card {
    border-color: var(--place-neutral-border-soft) !important;
    box-shadow:
        0 18px 42px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}

/* =========================
   SELECTS / INPUTS NEUTROS
========================= */

html[class*="brand-"]:not(.theme-light) .select2-container .select2-selection--single,
html[class*="brand-"]:not(.theme-light) .placeimei-main-card select.form-control,
html[class*="brand-"]:not(.theme-light) .placeimei-main-card select.form-select,
html[class*="brand-"]:not(.theme-light) #grupos,
html[class*="brand-"]:not(.theme-light) #service,
html[class*="brand-"]:not(.theme-light) #buscarService,
html[class*="brand-"]:not(.theme-light) #buscarServCuadros .form-control,
html[class*="brand-"]:not(.theme-light) .placeimei-detail-card input.form-control,
html[class*="brand-"]:not(.theme-light) .placeimei-detail-card textarea.form-control,
html[class*="brand-"]:not(.theme-light) .placeimei-detail-card select.form-select,
html[class*="brand-"]:not(.theme-light) #camposcustom input,
html[class*="brand-"]:not(.theme-light) #camposcustom textarea,
html[class*="brand-"]:not(.theme-light) #camposcustom select,
html[class*="brand-"]:not(.theme-light) #camposcustom_server input,
html[class*="brand-"]:not(.theme-light) #camposcustom_server textarea,
html[class*="brand-"]:not(.theme-light) #camposcustom_server select,
html[class*="brand-"]:not(.theme-light) #camposcustom_remote input,
html[class*="brand-"]:not(.theme-light) #camposcustom_remote textarea,
html[class*="brand-"]:not(.theme-light) #camposcustom_remote select {
    border-color: var(--place-neutral-border) !important;
    background:
        linear-gradient(145deg, var(--place-neutral-bg-1), var(--place-neutral-bg-2)) !important;
    color: #f4f8ff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 8px 20px rgba(0,0,0,.18) !important;
}

/* Hover/focus: solo aquí entra el color de tema */
html[class*="brand-"]:not(.theme-light) .select2-container:hover .select2-selection--single,
html[class*="brand-"]:not(.theme-light) #buscarService:hover,
html[class*="brand-"]:not(.theme-light) #buscarServCuadros .form-control:hover,
html[class*="brand-"]:not(.theme-light) .placeimei-detail-card input.form-control:hover,
html[class*="brand-"]:not(.theme-light) .placeimei-detail-card textarea.form-control:hover,
html[class*="brand-"]:not(.theme-light) .placeimei-detail-card select.form-select:hover,
html[class*="brand-"]:not(.theme-light) #camposcustom input:hover,
html[class*="brand-"]:not(.theme-light) #camposcustom textarea:hover,
html[class*="brand-"]:not(.theme-light) #camposcustom select:hover,
html[class*="brand-"]:not(.theme-light) #camposcustom_server input:hover,
html[class*="brand-"]:not(.theme-light) #camposcustom_server textarea:hover,
html[class*="brand-"]:not(.theme-light) #camposcustom_server select:hover,
html[class*="brand-"]:not(.theme-light) #camposcustom_remote input:hover,
html[class*="brand-"]:not(.theme-light) #camposcustom_remote textarea:hover,
html[class*="brand-"]:not(.theme-light) #camposcustom_remote select:hover {
    border-color: color-mix(in srgb, var(--theme-primary) 38%, var(--place-neutral-border)) !important;
}

html[class*="brand-"]:not(.theme-light) .select2-container--open .select2-selection--single,
html[class*="brand-"]:not(.theme-light) .select2-container--focus .select2-selection--single,
html[class*="brand-"]:not(.theme-light) .placeimei-detail-card input.form-control:focus,
html[class*="brand-"]:not(.theme-light) .placeimei-detail-card textarea.form-control:focus,
html[class*="brand-"]:not(.theme-light) .placeimei-detail-card select.form-select:focus,
html[class*="brand-"]:not(.theme-light) #camposcustom input:focus,
html[class*="brand-"]:not(.theme-light) #camposcustom textarea:focus,
html[class*="brand-"]:not(.theme-light) #camposcustom select:focus,
html[class*="brand-"]:not(.theme-light) #camposcustom_server input:focus,
html[class*="brand-"]:not(.theme-light) #camposcustom_server textarea:focus,
html[class*="brand-"]:not(.theme-light) #camposcustom_server select:focus,
html[class*="brand-"]:not(.theme-light) #camposcustom_remote input:focus,
html[class*="brand-"]:not(.theme-light) #camposcustom_remote textarea:focus,
html[class*="brand-"]:not(.theme-light) #camposcustom_remote select:focus {
    border-color: var(--theme-primary) !important;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--theme-primary) 16%, transparent),
        0 0 18px color-mix(in srgb, var(--theme-primary) 16%, transparent),
        inset 0 1px 0 rgba(255,255,255,.035) !important;
    outline: none !important;
}

/* Flechas con color de tema solo como detalle */
html[class*="brand-"]:not(.theme-light) .select2-selection__arrow b::before,
html[class*="brand-"]:not(.theme-light) #camposcustom .placeimei-custom-select-wrap::after,
html[class*="brand-"]:not(.theme-light) #camposcustom_server .placeimei-custom-select-wrap::after,
html[class*="brand-"]:not(.theme-light) #camposcustom_remote .placeimei-custom-select-wrap::after {
    border-right-color: var(--place-theme-soft) !important;
    border-bottom-color: var(--place-theme-soft) !important;
}

/* =========================
   DROPDOWN SELECT2 NEUTRO
========================= */

html[class*="brand-"]:not(.theme-light) .select2-container--open .select2-dropdown {
    background:
        linear-gradient(180deg, rgba(12,24,48,.98), rgba(6,14,30,.99)) !important;
    border-color: var(--place-neutral-border) !important;
    box-shadow:
        0 18px 40px rgba(0,0,0,.38),
        0 0 18px rgba(0,0,0,.16) !important;
}

html[class*="brand-"]:not(.theme-light) .select2-container--open .select2-search--dropdown {
    background:
        linear-gradient(180deg, rgba(12,24,48,.98), rgba(8,18,38,.98)) !important;
}

html[class*="brand-"]:not(.theme-light) .select2-container--open .select2-search--dropdown .select2-search__field {
    background: rgba(5,14,32,.98) !important;
    border-color: var(--place-neutral-border) !important;
    color: #ffffff !important;
}

/* Opción activa: efecto selección con color de tema */
html[class*="brand-"]:not(.theme-light) .select2-results__option--highlighted[aria-selected],
html[class*="brand-"]:not(.theme-light) .select2-results__option--highlighted.select2-results__option--selectable,
html[class*="brand-"]:not(.theme-light) .select2-results__option[aria-selected="true"] {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--theme-primary) 12%, transparent),
            rgba(255,255,255,.02)
        ) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-primary) 24%, transparent) !important;
}

/* =========================
   TITULOS DE SERVICIOS / GRUPOS
========================= */

html[class*="brand-"]:not(.theme-light) .select2-results__group,
html[class*="brand-"]:not(.theme-light) .select2-results__option[role="group"] > strong,
html[class*="brand-"]:not(.theme-light) .allservices-option-group,
html[class*="brand-"]:not(.theme-light) .allservices-group-title {
    color: var(--theme-primary) !important;
    font-weight: 900 !important;
    text-shadow: 0 0 10px color-mix(in srgb, var(--theme-primary) 14%, transparent) !important;
}

/* Servicio seleccionado / nombre del servicio normal */
html[class*="brand-"]:not(.theme-light) #allservices_service_list + .select2-container .select2-selection__rendered,
html[class*="brand-"]:not(.theme-light) #allservices_service_list + .select2-container .select2-selection__rendered *,
html[class*="brand-"]:not(.theme-light) .allservices-products .select2-selection__rendered,
html[class*="brand-"]:not(.theme-light) .allservices-products .select2-selection__rendered * {
    color: #f4f8ff !important;
    opacity: 1 !important;
}

/* Precio y tiempo del servicio: color de tema pero más neutral */
html[class*="brand-"]:not(.theme-light) .allservices-option-price,
html[class*="brand-"]:not(.theme-light) .allservices-option-time,
html[class*="brand-"]:not(.theme-light) .allservices-time-icon,
html[class*="brand-"]:not(.theme-light) .allservices-option-time .bi-clock-history,
html[class*="brand-"]:not(.theme-light) #allservices_service_list + .select2-container .allservices-option-price,
html[class*="brand-"]:not(.theme-light) #allservices_service_list + .select2-container .allservices-option-time,
html[class*="brand-"]:not(.theme-light) #allservices_service_list + .select2-container .bi-clock-history {
    color: var(--place-theme-muted) !important;
    fill: var(--place-theme-muted) !important;
    font-weight: 800 !important;
    opacity: .88 !important;
    text-shadow: none !important;
}

/* Separador neutral */
html[class*="brand-"]:not(.theme-light) .allservices-option-sep {
    color: rgba(226,236,255,.34) !important;
}

/* =========================
   PROGRESS / BOTONES
========================= */

html[class*="brand-"]:not(.theme-light) .placeimei-detail-card .progress-bar,
html[class*="brand-"]:not(.theme-light) .service-ui-detail-card .progress-bar,
html[class*="brand-"]:not(.theme-light) .allservices-grid-card__progress .progress-bar,
html[class*="brand-"]:not(.theme-light) .placeimei-grid-card__progress .progress-bar,
html[class*="brand-"]:not(.theme-light) .placeserver-grid-card__progress .progress-bar,
html[class*="brand-"]:not(.theme-light) .placeremote-grid-card__progress .progress-bar {
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary)) !important;
}

html[class*="brand-"]:not(.theme-light) .service-ui-action-btn,
html[class*="brand-"]:not(.theme-light) .placeimei-action-btn,
html[class*="brand-"]:not(.theme-light) #placeorder,
html[class*="brand-"]:not(.theme-light) .allservices-filter-btn {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
    border-color: color-mix(in srgb, var(--theme-primary) 32%, transparent) !important;
    box-shadow:
        0 14px 28px color-mix(in srgb, var(--theme-primary) 18%, transparent),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* =========================
   OPTIONS NATIVAS
========================= */

html[class*="brand-"]:not(.theme-light) .placeimei-custom-select option {
    background: #101826 !important;
    color: #ffffff !important;
}
/* =========================================================
   PLACE IMEI - LIGHT SELECT FIX
   Grupo + Servicio
========================================================= */

html.theme-light .placeimei-main-card #grupos + .select2-container .select2-selection--single,
html.theme-light .placeimei-main-card #service + .select2-container .select2-selection--single {
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,.12) !important;
    color: #0f172a !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.85),
        0 12px 26px rgba(15,23,42,.08) !important;
}

html.theme-light .placeimei-main-card #grupos + .select2-container .select2-selection__rendered,
html.theme-light .placeimei-main-card #service + .select2-container .select2-selection__rendered {
    color: #0f172a !important;
    opacity: 1 !important;
}

html.theme-light .placeimei-main-card #grupos + .select2-container .select2-selection__placeholder,
html.theme-light .placeimei-main-card #service + .select2-container .select2-selection__placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}

/* Flecha */
html.theme-light .placeimei-main-card #grupos + .select2-container .select2-selection__arrow b::before,
html.theme-light .placeimei-main-card #service + .select2-container .select2-selection__arrow b::before {
    border-right-color: #64748b !important;
    border-bottom-color: #64748b !important;
}

/* Hover / Focus */
html.theme-light .placeimei-main-card #grupos + .select2-container:hover .select2-selection--single,
html.theme-light .placeimei-main-card #service + .select2-container:hover .select2-selection--single,
html.theme-light .placeimei-main-card #grupos + .select2-container.select2-container--open .select2-selection--single,
html.theme-light .placeimei-main-card #service + .select2-container.select2-container--open .select2-selection--single {
    border-color: var(--theme-border) !important;
    box-shadow:
        0 0 0 3px var(--theme-glow),
        0 12px 26px rgba(15,23,42,.08) !important;
}

/* Select nativo por si tarda Select2 */
html.theme-light .placeimei-main-card #grupos,
html.theme-light .placeimei-main-card #service {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15,23,42,.12) !important;
}
/* =========================================================
   LIGHT SELECT2 HIGHLIGHT - COLOR DEL TEMA
   Aplica a IMEI / All Services / Server / Remote
========================================================= */

html.theme-light .select2-container--open .select2-results__option--highlighted[aria-selected],
html.theme-light .select2-container--open .select2-results__option--highlighted.select2-results__option--selectable,
html.theme-light .select2-container--open .select2-results__option[aria-selected="true"] {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--theme-primary) 10%, #ffffff),
            color-mix(in srgb, var(--theme-primary) 5%, #ffffff)
        ) !important;
    border: 1px solid var(--theme-border) !important;
    color: #0f172a !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-primary) 10%, transparent) !important;
}
/* =========================================================
   PLACE IMEI CUADROS - LIGHT SELECT GRUPOS FIX
========================================================= */

html.theme-light #buscarServCuadros #gruposCuadros + .select2-container .select2-selection--single {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid rgba(15,23,42,.12) !important;
    color: #0f172a !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.85),
        0 10px 22px rgba(15,23,42,.08) !important;
}

html.theme-light #buscarServCuadros #gruposCuadros + .select2-container .select2-selection__rendered,
html.theme-light #buscarServCuadros #gruposCuadros + .select2-container .select2-selection__placeholder {
    color: #0f172a !important;
    opacity: 1 !important;
}

html.theme-light #buscarServCuadros #gruposCuadros + .select2-container .select2-selection__arrow b::before {
    border-right-color: #64748b !important;
    border-bottom-color: #64748b !important;
}

/* por si el select nativo aparece un instante */
html.theme-light #buscarServCuadros #gruposCuadros {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15,23,42,.12) !important;
}
/* =========================================================
   PERFIL - LIGHT MODE PREMIUM SOFT DARK CARDS
========================================================= */

html.theme-light .profile-hub-title {
    color: #0f172a !important;
}

html.theme-light .profile-hub-subtitle {
    color: #64748b !important;
}

html.theme-light .profile-option-card,
html.theme-light .profile-dark-card {
    background:
        radial-gradient(360px 180px at 0% 0%, var(--theme-glow), transparent 68%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
        linear-gradient(145deg, #17233d, #101a31) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow:
        0 16px 36px rgba(15,23,42,.16),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* SOLO cards del menú principal tienen movimiento */
html.theme-light .profile-option-card:hover {
    transform: translateY(-4px);
    border-color: var(--theme-border) !important;
    box-shadow:
        0 18px 40px rgba(15,23,42,.18),
        0 0 24px var(--theme-glow),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Paneles internos NO se mueven */
html.theme-light .profile-dark-card:hover {
    transform: none !important;
    border-color: rgba(255,255,255,.12) !important;
    box-shadow:
        0 16px 36px rgba(15,23,42,.16),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html.theme-light .profile-option-title,
html.theme-light .profile-section-title,
html.theme-light .profile-2fa-status-title,
html.theme-light .profile-password-label,
html.theme-light .profile-2fa-label,
html.theme-light .profile-session-device {
    color: #ffffff !important;
}

html.theme-light .profile-option-desc,
html.theme-light .profile-section-description,
html.theme-light .profile-section-intro,
html.theme-light .profile-2fa-text,
html.theme-light .profile-session-meta,
html.theme-light .profile-password-strength-text {
    color: rgba(235,245,255,.82) !important;
}

html.theme-light .profile-option-badge--muted {
    color: rgba(255,255,255,.84) !important;
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.14) !important;
}

html.theme-light .profile-option-badge--info {
    color: color-mix(in srgb, var(--theme-primary) 35%, #ffffff) !important;
    background: color-mix(in srgb, var(--theme-primary) 13%, transparent) !important;
    border-color: var(--theme-border) !important;
}

html.theme-light .profile-option-badge--success,
html.theme-light .profile-session-badge {
    color: #b8ffd8 !important;
    background: rgba(40,167,69,.16) !important;
    border-color: rgba(40,167,69,.28) !important;
}

html.theme-light .profile-btn-primary,
html.theme-light .profile-back-btn {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
    color: #ffffff !important;
    border-color: var(--theme-border) !important;
    box-shadow: 0 14px 28px var(--theme-glow) !important;
}

html.theme-light .profile-btn-secondary {
    color: #ffffff !important;
    background: rgba(255,255,255,.09) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
}

html.theme-light .profile-btn-danger {
    color: #ffffff !important;
}

html.theme-light .profile-section-intro,
html.theme-light .profile-2fa-info-box,
html.theme-light .profile-2fa-key-box,
html.theme-light .profile-session-item {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.10) !important;
}

html.theme-light .profile-password-input,
html.theme-light .profile-2fa-code-input {
    background: rgba(255,255,255,.96) !important;
    color: #0f172a !important;
    border-color: rgba(15,23,42,.12) !important;
}

html.theme-light .profile-2fa-key-label,
html.theme-light .profile-done-message {
    color: color-mix(in srgb, var(--theme-primary) 45%, #ffffff) !important;
}
/* =========================================================
   PERFIL DARK - HOVER COLOR DEL TEMA
========================================================= */

html:not(.theme-light) .profile-option-card:hover {
    transform: translateY(-4px);
    border-color: var(--theme-border) !important;

    box-shadow:
        0 18px 40px rgba(0,0,0,.45),
        0 0 26px var(--theme-glow),
        inset 0 0 0 1px color-mix(in srgb, var(--theme-primary) 24%, transparent) !important;
}

/* Borde glow del tema */
html:not(.theme-light) .profile-option-card:hover::before {
    opacity: 1 !important;
    border-color: color-mix(in srgb, var(--theme-primary) 55%, transparent) !important;
}
/* =========================================================
   API INVENTARIO - LIGHT TITULO Y DESCRIPCION
========================================================= */

html.theme-light .instant-page-title {
    color: #0f172a !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

html.theme-light .instant-page-subtitle {
    color: #334155 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-weight: 600 !important;
}

/* =========================================================
   LIGHT MODE - DATATABLES SOBRE PANELES DARK
========================================================= */

html.theme-light .dataTables_wrapper,
html.theme-light .dataTables_wrapper label,
html.theme-light .dataTables_wrapper .dataTables_length,
html.theme-light .dataTables_wrapper .dataTables_filter,
html.theme-light .dataTables_wrapper .dataTables_info,
html.theme-light .dataTables_wrapper .dataTables_paginate {
    color: rgba(245,250,255,.92) !important;
    opacity: 1 !important;
}

html.theme-light .dataTables_wrapper .dataTables_length select,
html.theme-light .dataTables_wrapper .dataTables_filter input {
    background: rgba(8,18,38,.95) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.16) !important;
}

html.theme-light .dataTables_wrapper .dataTables_length select option {
    background: #0b1220 !important;
    color: #ffffff !important;
}

html.theme-light .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: rgba(245,250,255,.88) !important;
    background: rgba(8,18,38,.95) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
}

html.theme-light .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html.theme-light .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
html.theme-light .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: rgba(245,250,255,.42) !important;
    background: rgba(8,18,38,.45) !important;
    border-color: rgba(255,255,255,.08) !important;
}

html.theme-light .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.theme-light .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
    border-color: transparent !important;
}
/* =========================================================
   API INVENTARIO - PAGINACION DATATABLES FIX
========================================================= */

html.theme-light .instant-main-shell div.dataTables_wrapper div.dataTables_paginate a.paginate_button,
html.theme-light .instant-main-shell div.dataTables_wrapper div.dataTables_paginate span a.paginate_button {
    color: #ffffff !important;
    background: rgba(15,23,42,.85) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    opacity: 1 !important;
}

html.theme-light .instant-main-shell div.dataTables_wrapper div.dataTables_paginate a.paginate_button.disabled,
html.theme-light .instant-main-shell div.dataTables_wrapper div.dataTables_paginate span a.paginate_button.disabled {
    color: rgba(255,255,255,.55) !important;
    background: rgba(15,23,42,.55) !important;
    opacity: 1 !important;
}

html.theme-light .instant-main-shell div.dataTables_wrapper div.dataTables_paginate span a.paginate_button.current,
html.theme-light .instant-main-shell div.dataTables_wrapper div.dataTables_paginate a.paginate_button.current {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
    border-color: transparent !important;
}
/* =========================================================
   API INVENTARIO - DATATABLES CONTROLES EN LIGHT
========================================================= */

html.theme-light #data-table-combine_wrapper,
html.theme-light #data-table-combine_wrapper label,
html.theme-light #data-table-combine_wrapper .dataTables_length,
html.theme-light #data-table-combine_wrapper .dataTables_filter,
html.theme-light #data-table-combine_wrapper .dataTables_info {
    color: rgba(245,250,255,.92) !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

html.theme-light #data-table-combine_wrapper .dataTables_length select,
html.theme-light #data-table-combine_wrapper .dataTables_filter input {
    background: rgba(8,18,38,.95) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 10px !important;
}

/* Paginación inferior */
html.theme-light #data-table-combine_wrapper .dataTables_paginate,
html.theme-light #data-table-combine_wrapper .dataTables_paginate span {
    color: rgba(245,250,255,.92) !important;
    opacity: 1 !important;
}

html.theme-light #data-table-combine_wrapper .dataTables_paginate .paginate_button {
    color: rgba(245,250,255,.82) !important;
    background: rgba(8,18,38,.88) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 10px !important;
    opacity: 1 !important;
}

html.theme-light #data-table-combine_wrapper .dataTables_paginate .paginate_button.current,
html.theme-light #data-table-combine_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
    border-color: transparent !important;
}

html.theme-light #data-table-combine_wrapper .dataTables_paginate .paginate_button.disabled {
    color: rgba(245,250,255,.42) !important;
    opacity: 1 !important;
}
/* TEXTO PAGINACION DATATABLES */
html.theme-light #data-table-combine_wrapper .paginate_button,
html.theme-light #data-table-combine_wrapper .paginate_button a,
html.theme-light #data-table-combine_wrapper .page-link {
    color: #ffffff !important;
}

/* BOTONES DESACTIVADOS */
html.theme-light #data-table-combine_wrapper .paginate_button.disabled,
html.theme-light #data-table-combine_wrapper .paginate_button.disabled a,
html.theme-light #data-table-combine_wrapper .page-item.disabled .page-link {
    color: rgba(255,255,255,.45) !important;
}

/* PAGINA ACTIVA */
html.theme-light #data-table-combine_wrapper .paginate_button.current,
html.theme-light #data-table-combine_wrapper .paginate_button.current a,
html.theme-light #data-table-combine_wrapper .page-item.active .page-link {
    color: #ffffff !important;
}
/* DATATABLES TOPBAR - SELECT/SEARCH FORCE */
html.theme-light #data-table-combine_wrapper div.dataTables_length label,
html.theme-light #data-table-combine_wrapper div.dataTables_filter label {
    color: #ffffff !important;
}

html.theme-light #data-table-combine_wrapper div.dataTables_length select,
html.theme-light #data-table-combine_wrapper div.dataTables_length select.form-select,
html.theme-light #data-table-combine_wrapper div.dataTables_length select option,
html.theme-light #data-table-combine_wrapper div.dataTables_filter input,
html.theme-light #data-table-combine_wrapper div.dataTables_filter input.form-control {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: rgba(8,18,38,.95) !important;
    border-color: rgba(255,255,255,.18) !important;
}

html.theme-light #data-table-combine_wrapper div.dataTables_length select option {
    background-color: #0b1220 !important;
}
/* DATATABLES LENGTH SELECT DIRECTO */
html.theme-light #dt-length-0 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: rgba(8,18,38,.95) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
}

html.theme-light #dt-length-0 option {
    color: #ffffff !important;
    background-color: #0b1220 !important;
}
html.theme-light select[id^="dt-length-"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: rgba(8,18,38,.95) !important;
}
/* DATATABLES SEARCH INPUT */
html.theme-light input[id^="dt-search-"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: rgba(8,18,38,.95) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 10px !important;
}

html.theme-light input[id^="dt-search-"]::placeholder {
    color: rgba(255,255,255,.55) !important;
}

html.theme-light input[id^="dt-search-"]:focus {
    border-color: var(--theme-border) !important;
    box-shadow: 0 0 0 3px var(--theme-glow) !important;
    outline: none !important;
}
/* =========================================================
   DATATABLES 2 / BOOTSTRAP - PANEL DARK EN LIGHT
========================================================= */

html.theme-light .dt-info,
html.theme-light .dt-length,
html.theme-light .dt-search,
html.theme-light .dt-length label,
html.theme-light .dt-search label {
    color: rgba(245,250,255,.92) !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}

html.theme-light .dt-length select,
html.theme-light .dt-search input {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: rgba(8,18,38,.95) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 10px !important;
}

html.theme-light .dt-paging .page-link,
html.theme-light .dt-paging-button .page-link {
    color: #ffffff !important;
    background: rgba(8,18,38,.82) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    opacity: 1 !important;
}

html.theme-light .dt-paging-button.disabled .page-link {
    color: rgba(255,255,255,.45) !important;
    background: rgba(8,18,38,.48) !important;
}

html.theme-light .dt-paging-button.active .page-link,
html.theme-light .dt-paging .page-item.active .page-link {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
    border-color: transparent !important;
}
/* =========================================================
   CONFIG HUB - LIGHT MODE TITULO + DESCRIPCION
========================================================= */

html.theme-light .config-hub-hero h2 {
    color: #0f172a !important;
    text-shadow: none !important;
}

html.theme-light .config-hub-hero p {
    color: #475569 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}
/* =========================================================
   TERMINOS Y CONDICIONES - EDITOR LIGHT MODE
========================================================= */

html.theme-light textarea.form-control.input-sm {
    background: linear-gradient(145deg, #071326, #06101f) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(0,191,255,.18) !important;
    caret-color: #00cfff !important;
}

html.theme-light textarea.form-control.input-sm:focus {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: var(--theme-border) !important;
    box-shadow: 0 0 0 3px var(--theme-glow) !important;
}

html.theme-light textarea.form-control.input-sm::placeholder {
    color: rgba(255,255,255,.45) !important;
}

/* =========================================================
   ADMIN SEARCH MODAL - CLEAN DARK/LIGHT
========================================================= */

#adminSearchModal {
    z-index: 99999 !important;
}

#adminSearchModal .modal-dialog {
    max-width: 1120px !important;
}

#adminSearchModal .admin-search-modal {
    position: relative !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 28px 70px rgba(15,23,42,.20) !important;
}

/* HEADER/BODY */
#adminSearchModal .modal-header {
    padding: 22px 24px 6px !important;
    border: 0 !important;
}

#adminSearchModal .modal-body {
    padding: 12px 24px 24px !important;
}

/* TITLE */
#adminSearchModal .admin-search-title {
    font-size: 26px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    margin: 0 56px 8px 0 !important;
}

#adminSearchModal .admin-search-subtitle {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 0 !important;
}

/* CLOSE */
#adminSearchModal .btn-close {
    position: absolute !important;
    top: 24px !important;
    right: 26px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 14px !important;
    opacity: 1 !important;
    background-size: 13px !important;
    box-shadow: none !important;
}

/* FILTERS */
#adminSearchModal .admin-search-filters {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 22px !important;
    margin: 22px 0 22px !important;
}

#adminSearchModal .admin-search-filters label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin: 0 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

#adminSearchModal .admin-search-filters input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    accent-color: var(--theme-primary) !important;
}

/* SEARCH ROW */
#adminSearchModal .admin-search-row {
    display: grid !important;
    grid-template-columns: 1fr 170px !important;
    gap: 16px !important;
    align-items: center !important;
    margin-bottom: 0 !important;
}

#adminSearchModal #adminSearchInput {
    height: 50px !important;
    border-radius: 14px !important;
    padding: 0 20px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

#adminSearchModal .admin-search-btn {
    height: 50px !important;
    min-width: 135px !important;
    border: 0 !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
    box-shadow: 0 14px 30px var(--theme-glow) !important;
}

#adminSearchModal .admin-search-results {
    margin-top: 24px !important;
}

/* LIGHT */
html.theme-light #adminSearchModal .admin-search-modal,
body.theme-light #adminSearchModal .admin-search-modal {
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,.10) !important;
}

html.theme-light #adminSearchModal .admin-search-title,
body.theme-light #adminSearchModal .admin-search-title {
    color: #0f172a !important;
}

html.theme-light #adminSearchModal .admin-search-subtitle,
body.theme-light #adminSearchModal .admin-search-subtitle {
    color: #64748b !important;
}

html.theme-light #adminSearchModal .admin-search-filters label,
body.theme-light #adminSearchModal .admin-search-filters label {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

html.theme-light #adminSearchModal #adminSearchInput,
body.theme-light #adminSearchModal #adminSearchInput {
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    border: 1px solid rgba(15,23,42,.14) !important;
}

html.theme-light #adminSearchModal #adminSearchInput::placeholder,
body.theme-light #adminSearchModal #adminSearchInput::placeholder {
    color: #64748b !important;
}

html.theme-light #adminSearchModal .btn-close,
body.theme-light #adminSearchModal .btn-close {
    filter: none !important;
    background-color: rgba(15,23,42,.06) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
}

/* DARK */
html.theme-dark #adminSearchModal .admin-search-modal,
body.theme-dark #adminSearchModal .admin-search-modal {
    background: #111827 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
}

html.theme-dark #adminSearchModal .admin-search-title,
body.theme-dark #adminSearchModal .admin-search-title {
    color: #ffffff !important;
}

html.theme-dark #adminSearchModal .admin-search-subtitle,
body.theme-dark #adminSearchModal .admin-search-subtitle {
    color: rgba(226,232,240,.72) !important;
}

html.theme-dark #adminSearchModal .admin-search-filters label,
body.theme-dark #adminSearchModal .admin-search-filters label {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}

html.theme-dark #adminSearchModal #adminSearchInput,
body.theme-dark #adminSearchModal #adminSearchInput {
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    border: 1px solid rgba(255,255,255,.18) !important;
}

html.theme-dark #adminSearchModal #adminSearchInput::placeholder,
body.theme-dark #adminSearchModal #adminSearchInput::placeholder {
    color: #64748b !important;
}

html.theme-dark #adminSearchModal .btn-close,
body.theme-dark #adminSearchModal .btn-close {
    filter: invert(1) grayscale(100%) brightness(180%) !important;
    background-color: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
}

/* MOBILE */
@media (max-width: 768px) {
    #adminSearchModal .modal-dialog {
        margin: 14px !important;
    }

    #adminSearchModal .modal-header {
        padding: 22px 20px 8px !important;
    }

    #adminSearchModal .modal-body {
        padding: 14px 20px 24px !important;
    }

    #adminSearchModal .admin-search-title {
        font-size: 26px !important;
    }

    #adminSearchModal .admin-search-row {
        grid-template-columns: 1fr !important;
    }

    #adminSearchModal .admin-search-btn {
        width: 100% !important;
    }
}
/* =========================================================
   ADMIN SEARCH - RESULTADOS
========================================================= */

#adminSearchModal .admin-search-results h5 {
    font-size: 20px !important;
    font-weight: 900 !important;
    margin: 26px 0 14px !important;
    letter-spacing: .02em !important;
}

/* LINKS RESULTADOS */
#adminSearchModal .admin-search-results a {
    display: block !important;

    padding: 12px 4px !important;
    margin-bottom: 6px !important;

    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;

    text-decoration: none !important;
    transition: all .18s ease !important;

    border-bottom: 1px solid transparent !important;
}

/* HOVER */
#adminSearchModal .admin-search-results a:hover {
    padding-left: 8px !important;
    color: var(--theme-primary) !important;
}

/* =========================================================
   DARK MODE
========================================================= */

html.theme-dark #adminSearchModal .admin-search-results a,
body.theme-dark #adminSearchModal .admin-search-results a {
    color: rgba(255,255,255,.88) !important;
}

html.theme-dark #adminSearchModal .admin-search-results a:hover,
body.theme-dark #adminSearchModal .admin-search-results a:hover {
    color: var(--theme-primary) !important;
}

/* =========================================================
   LIGHT MODE
========================================================= */

html.theme-light #adminSearchModal .admin-search-results a,
body.theme-light #adminSearchModal .admin-search-results a {
    color: #0f172a !important;
}

html.theme-light #adminSearchModal .admin-search-results a:hover,
body.theme-light #adminSearchModal .admin-search-results a:hover {
    color: var(--theme-primary) !important;
}
#adminSearchModal .admin-search-order-result {
    padding: 14px 16px !important;
    border-radius: 14px !important;
    margin-bottom: 12px !important;
    border: 1px solid rgba(148,163,184,.18) !important;
    text-decoration: none !important;
}

#adminSearchModal .admin-search-order-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

#adminSearchModal .admin-search-order-top strong {
    font-size: 16px;
    font-weight: 900;
}

#adminSearchModal .admin-search-status {
    font-size: 12px;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-primary) 12%, transparent);
    color: var(--theme-primary);
}

#adminSearchModal .admin-search-order-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 18px;
    font-size: 13px;
    line-height: 1.5;
}

#adminSearchModal .admin-search-order-grid b {
    color: var(--theme-primary);
}

html.theme-light #adminSearchModal .admin-search-order-result {
    background: #ffffff !important;
    color: #0f172a !important;
}

html.theme-dark #adminSearchModal .admin-search-order-result {
    background: rgba(255,255,255,.035) !important;
    color: rgba(255,255,255,.88) !important;
}

@media(max-width: 768px) {
    #adminSearchModal .admin-search-order-grid {
        grid-template-columns: 1fr;
    }
}
#adminSearchModal .admin-search-order-mini strong {
    display: block !important;
    font-weight: 900 !important;
    margin-bottom: 4px !important;
}

#adminSearchModal .admin-search-order-mini span {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    opacity: .78 !important;
}
/* ADMIN SEARCH - RESULTADOS CON SCROLL INTERNO */

#adminSearchModal .admin-search-results {
    max-height: 430px !important;
    overflow-y: auto !important;
    padding-right: 10px !important;
}

#adminSearchModal .admin-search-results::-webkit-scrollbar {
    width: 8px;
}

#adminSearchModal .admin-search-results::-webkit-scrollbar-thumb {
    background: var(--theme-primary);
    border-radius: 999px;
}

#adminSearchModal .admin-search-results::-webkit-scrollbar-track {
    background: rgba(148,163,184,.16);
    border-radius: 999px;
}
/* =========================================================
   SUMMERNOTE LIGHT MODE FIX - SIN ROMPER PALETA DE COLORES
========================================================= */

html.theme-light #editServicio .note-editor,
html.theme-light #editServicio .note-toolbar,
html.theme-light #editServicio .note-editing-area,
html.theme-light #editServicio .note-statusbar {
    background: #ffffff !important;
    border-color: rgba(15,23,42,.12) !important;
}

/* Área donde se escribe */
html.theme-light #editServicio .note-editable {
    background: #ffffff !important;
    color: #0f172a !important;
    min-height: 320px;
}

/* =========================================================
   TITULOS + SUBTITULOS EN BLANCO
========================================================= */

html.theme-light #editServicio .modal-section-title,
html.theme-light #editServicio label,
html.theme-light #editServicio .form-label {
    color: #f8fbff !important;
}

/* TEXTOS SECUNDARIOS */

html.theme-light #editServicio .text-white-50,
html.theme-light #editServicio .form-text {
    color: rgba(255,255,255,0.6) !important;
}

/* TITULO PRINCIPAL */

html.theme-light #editServicio .modal-title {
    color: #ffffff !important;
}
/* =========================================================
   LIGHT MODE - INPUTS PREMIUM CONTRAST
========================================================= */

html.theme-light .modal-premium .form-control,
html.theme-light .modal-premium .form-select {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(0, 200, 255, 0.22) !important;
    color: #ffffff !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 0 0 1px rgba(0,0,0,0.08);

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease,
        transform .2s ease;
}

/* HOVER */

html.theme-light .modal-premium .form-control:hover,
html.theme-light .modal-premium .form-select:hover {
    border-color: rgba(0, 200, 255, 0.45) !important;
    background: rgba(255,255,255,0.09) !important;
}

/* FOCUS */

html.theme-light .modal-premium .form-control:focus,
html.theme-light .modal-premium .form-select:focus {
    border-color: rgba(0, 212, 255, 0.8) !important;

    box-shadow:
        0 0 0 3px rgba(0, 212, 255, 0.14),
        0 0 20px rgba(0, 212, 255, 0.10);

    background: rgba(255,255,255,0.12) !important;

    transform: translateY(-1px);
}
/* =========================================================
   NEW SERVICE - LIGHT MODE FIX
========================================================= */

/* SUMMERNOTE LIGHT MODE - SIN ROMPER PALETA */
html.theme-light #newService .note-editor,
html.theme-light #newService .note-toolbar,
html.theme-light #newService .note-editing-area,
html.theme-light #newService .note-statusbar {
    background: #ffffff !important;
    border-color: rgba(15,23,42,.12) !important;
}

/* Área donde se escribe */
html.theme-light #newService .note-editable {
    background: #ffffff !important;
    color: #0f172a !important;
    min-height: 320px;
}

/* TITULOS + SUBTITULOS EN BLANCO */
html.theme-light #newService .modal-section-title,
html.theme-light #newService label,
html.theme-light #newService .form-label {
    color: #f8fbff !important;
}

/* TEXTOS SECUNDARIOS */
html.theme-light #newService .text-white-50,
html.theme-light #newService .form-text {
    color: rgba(255,255,255,0.6) !important;
}

/* TITULO PRINCIPAL */
html.theme-light #newService .modal-title {
    color: #ffffff !important;
}

/* INPUTS CONTRASTE SOLO EN ESTE MODAL */
html.theme-light #newService .form-control,
html.theme-light #newService .form-select {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(0, 200, 255, 0.22) !important;
    color: #ffffff !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 0 0 1px rgba(0,0,0,0.08);

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease,
        transform .2s ease;
}

html.theme-light #newService .form-control:hover,
html.theme-light #newService .form-select:hover {
    border-color: rgba(0, 200, 255, 0.45) !important;
    background: rgba(255,255,255,0.09) !important;
}

html.theme-light #newService .form-control:focus,
html.theme-light #newService .form-select:focus {
    border-color: rgba(0, 212, 255, 0.8) !important;

    box-shadow:
        0 0 0 3px rgba(0, 212, 255, 0.14),
        0 0 20px rgba(0, 212, 255, 0.10);

    background: rgba(255,255,255,0.12) !important;
    transform: translateY(-1px);
}
/* =========================================================
   EDIT API + SYNC API - LIGHT MODE ONLY
========================================================= */

/* Textos importantes del switch masivo */
html.theme-light #editApi .form-check-label,
html.theme-light #editApi label,
html.theme-light #editApi .text-white,
html.theme-light #editApi .text-white-50,
html.theme-light #editApi .text-secondary {
    color: #f8fbff !important;
    opacity: 1 !important;
}

/* Caja de sincronización más visible */
html.theme-light #editApi #sync_all_services_edit.closest-fix,
html.theme-light #editApi .form-switch {
    color: #f8fbff !important;
}

/* Switch principal */
html.theme-light #editApi #sync_all_services_edit.form-check-input {
    background-color: rgba(255,255,255,.16) !important;
    border: 1px solid rgba(0,200,255,.45) !important;
    box-shadow: 0 0 0 1px rgba(0,200,255,.18), 0 0 18px rgba(0,200,255,.12) !important;
}

html.theme-light #editApi #sync_all_services_edit.form-check-input:checked {
    background-color: #21b78a !important;
    border-color: #21b78a !important;
}

/* Checkbox footer modal selectivo */
html.theme-light #syncApiModal #apply_global_margins_sync.form-check-input {
    background-color: rgba(255,255,255,.16) !important;
    border: 1px solid rgba(0,200,255,.45) !important;
}

html.theme-light #syncApiModal #apply_global_margins_sync.form-check-input:checked {
    background-color: #21b78a !important;
    border-color: #21b78a !important;
}

/* Recuadros para palomear: grupos y servicios */
html.theme-light #syncApiModal .group-checkbox,
html.theme-light #syncApiModal .service-checkbox {
    width: 18px !important;
    height: 18px !important;
    background-color: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(0,200,255,.45) !important;
    box-shadow: 0 0 0 1px rgba(0,200,255,.12) !important;
    opacity: 1 !important;
}

html.theme-light #syncApiModal .group-checkbox:hover,
html.theme-light #syncApiModal .service-checkbox:hover {
    border-color: rgba(0,212,255,.85) !important;
    box-shadow: 0 0 0 3px rgba(0,212,255,.14) !important;
}

html.theme-light #syncApiModal .group-checkbox:checked,
html.theme-light #syncApiModal .service-checkbox:checked {
    background-color: #21b78a !important;
    border-color: #21b78a !important;
}

/* Textos dentro del modal selectivo */
html.theme-light #syncApiModal .form-check-label,
html.theme-light #syncApiModal label,
html.theme-light #syncApiModal .text-white,
html.theme-light #syncApiModal .text-white-50,
html.theme-light #syncApiModal .text-light {
    color: #f8fbff !important;
    opacity: 1 !important;
}
/* =========================================================
   LIGHT MODE - TITULOS MÁS LEGIBLES APIs
========================================================= */

/* MODAL NUEVA API */
html.theme-light #newApi .modal-title,
html.theme-light #newApi .text-white,
html.theme-light #newApi .fw-bold,
html.theme-light #newApi label {
    color: #f8fbff !important;
}

/* SUBTITULOS */
html.theme-light #newApi .text-white-50,
html.theme-light #newApi .text-secondary {
    color: rgba(255,255,255,.72) !important;
}

/* MODAL EDITAR API */
html.theme-light #editApi .modal-title,
html.theme-light #editApi .text-white,
html.theme-light #editApi .fw-bold,
html.theme-light #editApi label {
    color: #f8fbff !important;
}

/* SUBTITULOS */
html.theme-light #editApi .text-white-50,
html.theme-light #editApi .text-secondary {
    color: rgba(255,255,255,.72) !important;
}

/* MODAL SINCRONIZACION */
html.theme-light #syncApiModal .modal-title,
html.theme-light #syncApiModal .fw-bold,
html.theme-light #syncApiModal label,
html.theme-light #syncApiModal .text-light {
    color: #f8fbff !important;
}

/* TEXTOS SECUNDARIOS */
html.theme-light #syncApiModal .text-white-50,
html.theme-light #syncApiModal .text-muted {
    color: rgba(255,255,255,.72) !important;
}
/* =========================================================
   LIGHT MODE - FILE INPUT PREMIUM
========================================================= */

/* INPUT FILE GENERAL */
html.theme-light #newService input[type="file"],
html.theme-light #editServicio input[type="file"] {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(0, 200, 255, 0.22) !important;
    color: #ffffff !important;

    border-radius: 14px !important;
    padding: 10px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 0 0 1px rgba(0,0,0,0.08);

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

/* HOVER */
html.theme-light #newService input[type="file"]:hover,
html.theme-light #editServicio input[type="file"]:hover {
    border-color: rgba(0, 200, 255, 0.45) !important;
    background: rgba(255,255,255,0.09) !important;
}

/* FOCUS */
html.theme-light #newService input[type="file"]:focus,
html.theme-light #editServicio input[type="file"]:focus {
    border-color: rgba(0, 212, 255, 0.8) !important;

    box-shadow:
        0 0 0 3px rgba(0, 212, 255, 0.14),
        0 0 20px rgba(0, 212, 255, 0.10) !important;
}

/* BOTON INTERNO "Seleccionar archivo" */
html.theme-light #newService input[type="file"]::file-selector-button,
html.theme-light #editServicio input[type="file"]::file-selector-button {
    background: linear-gradient(135deg, #00d4ff, #0066ff) !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 10px !important;

    padding: 8px 14px !important;
    margin-right: 12px !important;

    font-weight: 700 !important;
    cursor: pointer !important;

    transition: all .25s ease;
}

/* HOVER BOTON */
html.theme-light #newService input[type="file"]::file-selector-button:hover,
html.theme-light #editServicio input[type="file"]::file-selector-button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
/* =========================================================
   LIGHT MODE - MODAL SUBIR ANUNCIO TELEGRAM
========================================================= */

html.theme-light #cambiarAnuncio .modal-title,
html.theme-light #cambiarAnuncio .anuncios-modal-label {
    color: #f8fbff !important;
}

html.theme-light #cambiarAnuncio .anuncios-modal-subtitle,
html.theme-light #cambiarAnuncio .anuncios-modal-help {
    color: rgba(255,255,255,.68) !important;
}

/* Input group */
html.theme-light #cambiarAnuncio .input-group-text {
    background: rgba(0,200,255,.10) !important;
    border: 1px solid rgba(0,200,255,.25) !important;
    color: #00c8ff !important;
}

/* File input */
html.theme-light #cambiarAnuncio .anuncios-file-input {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(0,200,255,.25) !important;
    color: #ffffff !important;
}

html.theme-light #cambiarAnuncio .anuncios-file-input::file-selector-button {
    background: linear-gradient(135deg, #00d4ff, #0066ff) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    margin-right: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}
/* =========================================================
   CUSTOM PRICES TABLE FIX
========================================================= */

/* TABLA MÁS ESTABLE */
.customprices-table {
    table-layout: fixed;
    width: 100%;
}

/* COLUMNAS */
.customprices-table th:nth-child(1),
.customprices-table td:nth-child(1) {
    width: 80px;
}

.customprices-table th:nth-child(2),
.customprices-table td:nth-child(2) {
    width: 42%;
}

.customprices-table th:nth-child(3),
.customprices-table td:nth-child(3) {
    width: 22%;
}

.customprices-table th:nth-child(4),
.customprices-table td:nth-child(4) {
    width: 120px;
}

.customprices-table th:nth-child(5),
.customprices-table td:nth-child(5) {
    width: 110px;
    text-align: center;
}

/* SERVICIO */
.customprices-service-name {
    display: block;
    max-width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-weight: 700;
}

/* USER */
.customprices-user-name,
.customprices-user-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* BOTONES */
.customprices-action-btn {
    min-width: 42px;
    height: 42px;
}

/* RESPONSIVE */
.customprices-table-wrap {
    overflow-x: auto;
}
/* =========================================================
   LIGHT MODE - MODAL BOTONES TITULOS LEGIBLES
========================================================= */

html.theme-light #newBoton .modal-title,
html.theme-light #newBoton .newbutton-label {
    color: #f8fbff !important;
}

/* SUBTITULOS */
html.theme-light #newBoton .text-white-50,
html.theme-light #newBoton small {
    color: rgba(255,255,255,.72) !important;
}

/* LABELS */
html.theme-light #newBoton label {
    color: #f8fbff !important;
    opacity: 1 !important;
}
/* =========================================================
   LIGHT MODE - EDIT USER SWITCH + TITULOS + INPUTS
========================================================= */

/* TITULOS */
html.theme-light #editUser .modal-title,
html.theme-light #editUser label,
html.theme-light #editUser .text-white-50 {
    color: #f8fbff !important;
    opacity: 1 !important;
}

/* SUBTITULOS */
html.theme-light #editUser .text-secondary,
html.theme-light #editUser small,
html.theme-light #editUser .text-info {
    color: rgba(255,255,255,.72) !important;
}

/* INPUTS */
html.theme-light #editUser .form-control,
html.theme-light #editUser .form-select {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(0,200,255,.22) !important;
    color: #ffffff !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 0 1px rgba(0,0,0,.08);

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

/* HOVER */
html.theme-light #editUser .form-control:hover,
html.theme-light #editUser .form-select:hover {
    border-color: rgba(0,200,255,.45) !important;
    background: rgba(255,255,255,.11) !important;
}

/* FOCUS */
html.theme-light #editUser .form-control:focus,
html.theme-light #editUser .form-select:focus {
    border-color: rgba(0,212,255,.8) !important;

    box-shadow:
        0 0 0 3px rgba(0,212,255,.14),
        0 0 18px rgba(0,212,255,.10) !important;
}

/* SWITCH */
html.theme-light #editUser .form-check-input {
    background-color: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(0,200,255,.45) !important;

    box-shadow:
        0 0 0 1px rgba(0,200,255,.12),
        0 0 14px rgba(0,200,255,.08) !important;
}

/* SWITCH ACTIVO */
html.theme-light #editUser .form-check-input:checked {
    background-color: #21b78a !important;
    border-color: #21b78a !important;
}
/* LIGHT MODE - PLACEHOLDER CREDITOS */

html.theme-light #editUser input[name="creditosUser"]::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}
html.theme-light #editUser input[name="passwordNew"]::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}
/* =========================================================
   LIGHT MODE - ICONOS INPUTS EDIT USER
========================================================= */

html.theme-light #editUser .input-group-text i,
html.theme-light #editUser .input-group-text .fa,
html.theme-light #editUser .input-group-text .fab {
    color: #00d4ff !important;
    opacity: 1 !important;
}

/* Fondo del icono */
html.theme-light #editUser .input-group-text {
    background: rgba(0,200,255,.08) !important;
    border: 1px solid rgba(0,200,255,.22) !important;
    color: #00d4ff !important;
}
/* =========================================================
   LIGHT MODE - MODAL LOGOS / IMAGENES SERVER
========================================================= */

/* TITULOS EN BLANCO */
html.theme-light #cambiarFoto h4,
html.theme-light #cambiarFoto .server-upload-label {
    color: #f8fbff !important;
    opacity: 1 !important;
}

/* SUBTITULOS / AYUDAS */
html.theme-light #cambiarFoto p,
html.theme-light #cambiarFoto .server-upload-help {
    color: rgba(255,255,255,.72) !important;
}

/* SELECT */
html.theme-light #cambiarFoto .server-upload-select {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(0,200,255,.25) !important;
    color: #ffffff !important;
}

/* FILE INPUT */
html.theme-light #cambiarFoto .server-upload-input {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(0,200,255,.28) !important;
    color: #ffffff !important;
    min-height: 48px !important;
}

/* BOTON INTERNO "Seleccionar archivo" */
html.theme-light #cambiarFoto .server-upload-input::file-selector-button {
    background: linear-gradient(135deg, #00d4ff, #0066ff) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    margin-right: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

/* HOVER */
html.theme-light #cambiarFoto .server-upload-input:hover,
html.theme-light #cambiarFoto .server-upload-select:hover {
    border-color: rgba(0,212,255,.65) !important;
    background: rgba(255,255,255,.11) !important;
}
/* =========================================================
   LIGHT MODE - MODAL BANNERS / CARRUSEL
========================================================= */

/* TITULOS */
html.theme-light #cambiarCoursel h4,
html.theme-light #cambiarCoursel .server-upload-label {
    color: #f8fbff !important;
    opacity: 1 !important;
}

/* SUBTITULOS / AYUDAS */
html.theme-light #cambiarCoursel p,
html.theme-light #cambiarCoursel .server-upload-help,
html.theme-light #cambiarCoursel .server-upload-help--inline {
    color: rgba(255,255,255,.72) !important;
}

/* SELECT */
html.theme-light #cambiarCoursel .server-upload-select {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(0,200,255,.25) !important;
    color: #ffffff !important;
}

/* FILE INPUT */
html.theme-light #cambiarCoursel .server-upload-input {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(0,200,255,.28) !important;
    color: #ffffff !important;
    min-height: 48px !important;
}

/* BOTON INTERNO */
html.theme-light #cambiarCoursel .server-upload-input::file-selector-button {
    background: linear-gradient(135deg, #00d4ff, #0066ff) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    margin-right: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

/* HOVER */
html.theme-light #cambiarCoursel .server-upload-input:hover,
html.theme-light #cambiarCoursel .server-upload-select:hover {
    border-color: rgba(0,212,255,.65) !important;
    background: rgba(255,255,255,.11) !important;
}
/* =========================================================
   LIGHT MODE - RESELLER PLAN TEXTOS MÁS LEGIBLES
========================================================= */

html.theme-light .reseller-admin-title,
html.theme-light .reseller-plan-panel__title,
html.theme-light .reseller-admin-label,
html.theme-light .reseller-admin-tab,
html.theme-light .reseller-admin-check,
html.theme-light .reseller-plan-chip {
    color: #f8fbff !important;
}

/* SUBTITULOS */
html.theme-light .reseller-admin-subtitle,
html.theme-light .reseller-admin-note,
html.theme-light .reseller-admin-actions__hint,
html.theme-light .reseller-admin-mini-badge,
html.theme-light .server-upload-help,
html.theme-light .reseller-plan-panel__meta {
    color: rgba(255,255,255,.78) !important;
}

/* INPUTS */
html.theme-light .reseller-admin-input,
html.theme-light .reseller-admin-textarea {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(0,200,255,.22) !important;
    color: #ffffff !important;
}

/* PLACEHOLDERS */
html.theme-light .reseller-admin-input::placeholder,
html.theme-light .reseller-admin-textarea::placeholder {
    color: rgba(255,255,255,.48) !important;
}

/* TABS */
html.theme-light .reseller-admin-tab {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(0,200,255,.18) !important;
}

/* PANEL HEAD */
html.theme-light .reseller-plan-panel__head {
    background: rgba(255,255,255,.04) !important;
}
/* =========================================================
   LIGHT MODE - LEGAL / TERMS PAGE
========================================================= */

html.theme-light .legal-card{
    background: rgba(255,255,255,.08);
    border:1px solid rgba(0,200,255,.14);
    box-shadow:
        0 20px 60px rgba(15,23,42,.08),
        0 0 20px rgba(0,200,255,.04);
}

/* TITULO */
html.theme-light .legal-title{
    color:#0f172a;
}

/* SUBTITULOS */
html.theme-light .legal-card h3{
    color:#111827;
}

/* TEXTOS */
html.theme-light .legal-card p,
html.theme-light .legal-card ul,
html.theme-light .legal-card li{
    color:rgba(15,23,42,.78);
}

/* =========================
   LEGAL ACCORDION LIGHT
========================= */

html.theme-light .legal-accordion__item{
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(0,200,255,.12) !important;
}

html.theme-light .legal-accordion__button{
    background: rgba(255,255,255,.08) !important;
    color: #0f172a !important;
}

html.theme-light .legal-accordion__button:not(.collapsed){
    background: rgba(0,200,255,.10) !important;
    color: #0f172a !important;
}

html.theme-light .legal-accordion__button::after{
    filter: brightness(.35);
}

/* BODY */
html.theme-light .legal-accordion__body{
    background: rgba(255,255,255,.05);
    color: rgba(15,23,42,.78);
}

/* LISTAS */
html.theme-light .legal-accordion__body ul,
html.theme-light .legal-accordion__body li,
html.theme-light .legal-accordion__body p{
    color: rgba(15,23,42,.78);
}
/* =========================================================
   RECENT SERVICES - CARD HEIGHT COMPACT FIX
========================================================= */

.recent-service-card {
    flex: 0 0 280px;

    min-height: 420px;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

/* BODY */
.recent-service-card__body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 20px 22px 14px;
}

/* NOMBRE */
.recent-service-card__name {

    font-size: 1rem;
    line-height: 1.34;

    font-weight: 900;

    margin: 0 0 14px;

    min-height: 62px;
    max-height: 62px;

    overflow: hidden;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    text-overflow: ellipsis;
}

/* PRECIO */
.recent-service-card__price {
    margin-top: auto;
}

/* TIEMPO */
.recent-service-card__time {

    margin-top: 10px;

    min-height: 38px;

    font-size: .82rem;
    line-height: 1.4;
}

/* FOOTER */
.recent-service-card__footer {

    margin: 0 22px 18px;

    padding: 12px 16px;

    border-radius: 14px;

    margin-top: auto;
}

/* =========================================
   DASHBOARD CURRENCY DROPDOWN
========================================= */

.panel-currency-dropdown{
    margin-left:12px;
}

.panel-currency-btn{
    height:46px;
    min-width:98px;

    padding:0 16px;

    border-radius:16px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    color:#fff !important;
    text-decoration:none !important;

    border:1px solid rgba(255,255,255,.10);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.04)
        );

    backdrop-filter:blur(10px);

    transition:.2s ease;
}

.panel-currency-btn:hover{
    border-color:rgba(0,174,255,.35);

    box-shadow:
        0 0 18px rgba(0,174,255,.12);

    color:#fff !important;
}

.panel-currency-btn i{
    font-size:.92rem;
}

.panel-currency-btn span{
    font-weight:800;
    font-size:.84rem;
    letter-spacing:.03em;
}

.panel-currency-arrow{
    font-size:.7rem !important;
    opacity:.7;
}

.panel-currency-menu{
    min-width:210px;
}

/* MOBILE */

@media (max-width:768px){

    .panel-currency-btn{
        min-width:96px;
        height:52px;

        padding:0 14px;
    }

    .panel-currency-btn span{
        font-size:.84rem;
    }

}
/* =========================================
   CURRENCY AMOUNTS - RESPONSIVE FIX
========================================= */

.dashboard-kpi-card__value,
.dashboard-stat-clean__value,
.dashboard-announcement-item__price {
    max-width: 100%;
    line-height: 1.05;
    overflow-wrap: anywhere;
    word-break: normal;
}

.dashboard-kpi-card__value {
    font-size: clamp(1.65rem, 2.25vw, 2.55rem);
}

.dashboard-stat-clean__value {
    font-size: clamp(1.25rem, 1.7vw, 1.95rem);
}

.dashboard-announcement-item__price {
    font-size: clamp(1.1rem, 1.35vw, 1.55rem);
}

/* Cards pequeñas: permite salto limpio */
.dashboard-stat-clean__value {
    display: block;
}

/* Evita que textos largos empujen iconos */
.dashboard-stat-clean > div:last-child {
    min-width: 0;
}

.dashboard-kpi-card,
.dashboard-stat-clean,
.dashboard-announcement-item {
    min-width: 0;
}
/* =========================================
   MOBILE TOPBAR OPTIMIZATION
========================================= */

@media (max-width: 768px){

    /* BOTON AGREGAR FONDOS */
    .funds-btn-text{
        display:none !important;
    }

    .panel-header-funds-btn{

        width:52px !important;
        min-width:52px !important;
        max-width:52px !important;

        height:52px !important;

        padding:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        flex:none !important;

        border-radius:16px;
    }

    .panel-header-funds-btn i{
        margin:0 !important;
        font-size:1.15rem;
    }

}
/* =========================================
   LIGHT MODE - GRID STOCK SUCCESS FINAL
========================================= */

/* LIGHT MODE - STOCK SUCCESS SOFT */

html.theme-light .allservices-grid-stock-badge.allservices-grid-stock-badge--success,
html.theme-light .placeimei-grid-stock-badge.placeimei-grid-stock-badge--success,
html.theme-light .placeserver-grid-stock-badge.placeserver-grid-stock-badge--success,
html.theme-light .placeremote-grid-stock-badge.placeremote-grid-stock-badge--success {
    color: #0f766e !important;
    background: rgba(16, 185, 129, 0.10) !important;
    border: 1px solid rgba(16, 185, 129, 0.45) !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.10) !important;
    text-shadow: none !important;
}
/* LIGHT MODE - STOCK WARNING SOFT */

html.theme-light .allservices-grid-stock-badge.allservices-grid-stock-badge--warning,
html.theme-light .placeimei-grid-stock-badge.placeimei-grid-stock-badge--warning,
html.theme-light .placeserver-grid-stock-badge.placeserver-grid-stock-badge--warning,
html.theme-light .placeremote-grid-stock-badge.placeremote-grid-stock-badge--warning {
    color: #c47b07 !important;
    background: rgba(245, 158, 11, 0.10) !important;
    border: 1px solid rgba(245, 158, 11, 0.38) !important;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.08) !important;
    text-shadow: none !important;
}

/* FLECHA BALANCE USER EDIT */
.user-balance-select-wrap {
    position: relative;
}

.user-balance-select {
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #fff !important;
    cursor: pointer;
    font-weight: 350;
    padding-right: 46px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.user-balance-select-arrow {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-65%);
    color: #7ddcff;
    font-size: .85rem;
    pointer-events: none;
    opacity: .9;
}

.user-balance-select option {
    background: #071226;
    color: #fff;
    font-weight: 700;
}
/* =========================================
   CANDADO CURRIENCIES MONEDA
========================================= */
.currency-locked .panel-currency-btn {
    opacity: .75;
}

.currency-locked .dropdown-item[disabled] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}
/* =========================================
   USUARIO DEUDA INPUT
========================================= */
/* =========================================================
   MODULO DEUDA - PLACEHOLDERS
========================================================= */

.debt-module-card input::placeholder {
    color: rgba(255,255,255,.45);
    opacity: 1;
}

.debt-module-card input {
    color: #f8fafc;
}

/* LIGHT MODE */

body.theme-light .debt-module-card input::placeholder {
    color: #475569 !important;
    opacity: 1;
}

body.theme-light .debt-module-card input {
    color: #0f172a !important;
}

/* =========================================
   DEUDA DASHBOARD
========================================= */

.dashboard-debt-value,
.dashboard-debt-value * {
    color: #ff5b5b !important;
}

/* LIGHT */
body.theme-light .dashboard-kpi-card--danger .dashboard-debt-value,
html.theme-light .dashboard-kpi-card--danger .dashboard-debt-value,
body.theme-light .dashboard-kpi-card--danger .dashboard-debt-value *,
html.theme-light .dashboard-kpi-card--danger .dashboard-debt-value * {
    color: #dc2626 !important;
}

/* DARK */
body.theme-dark .dashboard-kpi-card--danger .dashboard-debt-value,
html.theme-dark .dashboard-kpi-card--danger .dashboard-debt-value {
    color: #ff5b5b !important;
    text-shadow: 0 0 12px rgba(255,91,91,.25);
}

.dashboard-debt-history-box {
    margin-top: 10px;
    max-height: 160px;
    overflow-y: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(148,163,184,.18);
}

.dashboard-debt-history-item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(148,163,184,.12);
}

.debt-plus {
    color: #f59e0b;
    font-size: 12px;
    font-weight: 800;
}

.debt-minus {
    color: #10b981;
    font-size: 12px;
    font-weight: 800;
}

.dashboard-debt-history-note {
    font-size: 11px;
    color: #64748b;
}

.dashboard-debt-history-date {
    font-size: 10px;
    color: #94a3b8;
    white-space: nowrap;
}
/* =========================================
   DEBT ACTIONS
========================================= */

.dashboard-debt-actions{
    display:flex;
    gap:8px;
    margin-top:12px;
}

.dashboard-debt-btn{
    flex:1;
    border:none;
    border-radius:10px;
    padding:7px 12px;
    min-height:38px;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}
/* LIGHT MODE */
body.theme-light .dashboard-debt-btn-history{
    border:1px solid #60a5fa;
    background:#eef6ff;
    color:#2563eb;
}

body.theme-light .dashboard-debt-btn-history:hover{
    background:#dbeafe;
    border-color:#3b82f6;
    color:#1d4ed8;
}

.dashboard-debt-btn-pay{
    background:#dc2626;
    color:#fff;
}

.dashboard-debt-btn-pay:hover{
    transform:translateY(-2px);
}

.dashboard-debt-btn-history{
    background:transparent;
    border:1px solid rgba(0,174,255,.35);
    color:#00aeff;
}

.dashboard-debt-btn-history:hover{
    background:rgba(0,174,255,.08);
}

#clientDebtHistoryIcon{
    float:right;
}
/* FOOTER SUBRAYADO CONTACTOS */
.site-footer__contact a{
    text-decoration: none !important;
}

.site-footer__contact a:hover{
    text-decoration: none !important;
}