.hero-premium{
  position: relative;
  overflow: hidden;
  padding-top: 8px;
}

.hero-bg{
  position:absolute; inset:0;
  background: radial-gradient(1200px 600px at 15% 20%, rgba(0, 212, 255, .18), transparent 55%),
              radial-gradient(1000px 500px at 80% 30%, rgba(0, 102, 255, .20), transparent 60%),
              linear-gradient(135deg, #0b1020, #0a0f1f 40%, #0c1024);
}

.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(420px 280px at 18% 35%, rgba(0,0,0,1), rgba(0,0,0,0));
  opacity: .7;
}

.hero-glow{
  position:absolute; width:520px; height:520px; border-radius:999px; filter: blur(50px);
  opacity:.28;
}
.hero-glow-1{ left:-180px; top:-140px; background: #00d4ff; }
.hero-glow-2{ right:-220px; top:-80px; background: #0066ff; }

.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.hero-badge .dot{
  width:8px; height:8px; border-radius:50%;
  background:#00d4ff; box-shadow: 0 0 10px rgba(0,212,255,.75);
}

.hero-title{
  color:#fff;
  font-weight: 800;
  letter-spacing: 1px;
  font-size: clamp(34px, 3.6vw, 54px);
  margin:0;
}

.hero-subtitle{
  color: rgba(255,255,255,.92);
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: clamp(14px, 1.6vw, 18px);
  margin: 10px 0 0 0;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.hero-text{
  color: rgba(255,255,255,.70);
  font-size: 15.5px;
  max-width: 52ch;
}

.hero-btn-primary{
  background: linear-gradient(135deg, #00d4ff, #0066ff);
  border:none;
  color:#fff;
  border-radius: 999px;
  padding: 12px 16px;
  box-shadow: 0 0 18px rgba(0,212,255,.25);
}
.hero-btn-primary:hover{ color:#fff; transform: translateY(-1px); }

.hero-btn-secondary{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  color:#fff;
  border-radius: 999px;
  padding: 12px 16px;
}
.hero-btn-secondary:hover{ color:#fff; background: rgba(255,255,255,.10); }

.hero-btn-ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,.16);
  color:#fff;
  border-radius: 999px;
  padding: 12px 16px;
}
.hero-btn-ghost:hover{ color:#fff; background: rgba(255,255,255,.06); }

.hero-stats{
  display:flex; gap:18px; flex-wrap: wrap;
}
.stat{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 12px 14px;
  min-width: 160px;
}
.stat-value{ color:#fff; font-weight: 800; letter-spacing: 1px; }
.stat-label{ color: rgba(255,255,255,.65); font-size: 12px; margin-top: 2px; }

.hero-card{
  background: rgba(20, 25, 40, .65);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  overflow:hidden;
}
.hero-card-top{ display:flex; gap:8px; padding: 14px 14px 0 14px; }
.pill{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  color:#fff;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
}
.hero-card-body{ padding: 14px; }
.hero-card-title{ color:#fff; font-weight: 800; letter-spacing: .6px; }
.hero-card-desc{ color: rgba(255,255,255,.65); font-size: 13px; margin-top: 6px; }
.hero-card-links{ display:flex; flex-direction: column; gap:8px; }

.hero-link{
  display:flex; align-items:center; justify-content: space-between;
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.06);
  color:#fff;
}
.hero-link:hover{ background: rgba(255,255,255,.07); color:#fff; }

.hero-card-bottom{
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.70);
  font-size: 12px;
  display:flex; align-items:center; gap:10px;
}
.hero-card-bottom .mini-dot{
  width:8px; height:8px; border-radius:50%;
  background:#00d4ff; box-shadow: 0 0 10px rgba(0,212,255,.6);
}

  .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-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;
  }
  
  .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;
}

.services-section{
  position: relative;
  background: radial-gradient(900px 400px at 15% 20%, rgba(0,255,255,.08), transparent 60%),
              radial-gradient(700px 350px at 85% 0%, rgba(66,108,255,.10), transparent 60%),
              linear-gradient(180deg, rgba(7,12,24,.85), rgba(7,12,24,.55));
}

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

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

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

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

.service-card{
  display: flex;
  gap: 14px;
  padding: 18px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  height: 100%;
}

.service-card:hover{
  transform: translateY(-4px);
  background: rgba(255,255,255,.05);
  border-color: rgba(0, 200, 255, .22);
  box-shadow: 0 20px 55px rgba(0,0,0,.35);
}

.service-card-highlight{
  border-color: rgba(0,200,255,.20);
  background: linear-gradient(180deg, rgba(0,200,255,.07), rgba(255,255,255,.03));
}

.service-icon{
  min-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);
}

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

.service-body{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.service-name{
  font-weight: 800;
  color: rgba(255,255,255,.92);
  font-size: 18px;
  line-height: 1.2;
}

.service-desc{
  color: rgba(255,255,255,.62);
  font-size: 13px;
  line-height: 1.55;
}

.service-cta{
  margin-top: 4px;
  color: rgba(0, 200, 255, .9);
  font-weight: 700;
  font-size: 13px;
}

.section-divider{
  position: relative;
  height: 90px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.section-divider__line{
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(980px, 92%);
  height: 1px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.08),
    rgba(0,200,255,.22),
    rgba(255,255,255,.08),
    transparent
  );
}

.section-divider__glow{
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(980px, 92%);
  height: 26px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%,
    rgba(0,200,255,.18),
    transparent 62%
  );
  filter: blur(6px);
  opacity: .9;
}

.logo-strip{
  padding: 26px 0 34px;
  position: relative;
}

.logo-strip__panel{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 18px 10px;
  background:
    radial-gradient(900px 260px at 15% 50%, rgba(0,200,255,.10), transparent 65%),
    radial-gradient(700px 220px at 85% 40%, rgba(80,110,255,.10), transparent 60%),
    rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

.logo-strip__fade{
  position:absolute;
  top:0;
  bottom:0;
  width: 110px;
  z-index: 2;
  pointer-events:none;
}
.logo-strip__fade--left{
  left:0;
  background: linear-gradient(90deg, rgba(7,12,24,.92), transparent);
}
.logo-strip__fade--right{
  right:0;
  background: linear-gradient(270deg, rgba(7,12,24,.92), transparent);
}

.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%); }
}

.how-section{
  position: relative;
}

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

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

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

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

.how-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;
}

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

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

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

.how-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);
}

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

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

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

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

.section-dark-surface{
  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));
}

/* 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;
}

/*    FINAL CTA (POWER + SOFT ANIMATION) */

.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;
}

/* ===== 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);
}

/* 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);
}

/* 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;
}

.contact-dock__btn{

    width:56px;
    height:56px;

}

@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;
  }
}

  /* Overlay premium por encima del fondo */
  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;
  }

  /* Asegura que el login quede encima del overlay */
  #app{ position: relative; z-index: 1; }

  /* Card glass premium */
  .login .login-content{
  background: rgba(15, 22, 38, .88) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.42);
  padding: 28px 26px;
  max-width: 460px;
  width: 100%;
}

  /* Títulos */
  .login .login-content h1{
    font-weight: 900;
    letter-spacing: .6px;
  }

  /* Inputs premium */
  .login .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{
    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 (sin tocar tu tema general) */
  .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);
  }

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

  /* Responsive */
  @media (max-width: 575.98px){
    .login .login-content{ padding: 22px 18px; }
  }
  /* Logo login */
.login-logo{
text-align:center;
margin-bottom:18px;
}

.login-logo img{
max-height:55px;
opacity:.95;
}

/* Aviso seguridad */
.login-security{

margin-top:14px;
padding:12px 14px;

font-size:13px;
line-height:1.4;

color:rgba(255,255,255,.75);

background:rgba(0,200,255,.06);
border:1px solid rgba(0,200,255,.20);

border-radius:12px;

display:flex;
align-items:flex-start;
gap:8px;

}

.login-security i{
color:#00d4ff;
margin-top:2px;
}
/* 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:center;
gap:12px;

}

/* icono */
.security-icon{

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

width:28px;
height:28px;

color:#00d4ff;
font-size:16px;

}

/* texto */
.security-text{
flex:1;
}
border-radius:20px;

}

}

/* =========================
   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; }
}

.login .login-content{
}

@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;
}
/* =========================
   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;
  }
}
/* =========================
   POPULAR PRODUCTS HOVER
========================= */

.popular-card{
position: relative;
border-radius: 20px;
overflow: hidden;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
transition: all .35s ease;
cursor: pointer;
}

/* 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);
}

/* imagen zoom */
.popular-card__img{
transition: transform .5s ease;
}

.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);
}

/* botón animado */
.popular-card__cta{
margin-top:14px;
text-align:center;
font-weight:700;
font-size:13px;
letter-spacing:.3px;
color:#00c8ff;
transition: all .3s ease;
}

.popular-card:hover .popular-card__cta{
transform: translateY(-2px);
text-shadow:0 0 10px rgba(0,200,255,.6);
}
/* =========================
   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);
}
/* =========================
   SERVICES LISTING PREMIUM
========================= */

.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;
}
/* =========================
   SITE FOOTER PREMIUM
========================= */

.site-footer{
  position: relative;
  overflow: hidden;
  padding: 56px 0 24px;
  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;
  }
}
/* =========================
   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;
}
/* =========================
   CLIENT DASHBOARD PREMIUM
========================= */

.client-dashboard-hero{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 26px 24px;
  margin-bottom: 18px;
  background:
    radial-gradient(600px 260px at 12% 20%, rgba(0,200,255,.12), transparent 60%),
    radial-gradient(500px 220px at 88% 10%, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(180deg, rgba(16,22,40,.92), rgba(10,15,30,.88));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.client-dashboard-hero__eyebrow{
  display: inline-block;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(0,200,255,.95);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.client-dashboard-hero__title{
  color: rgba(255,255,255,.95);
  font-weight: 900;
  font-size: clamp(28px, 2.5vw, 40px);
  margin-bottom: 8px;
}

.client-dashboard-hero__subtitle{
  color: rgba(255,255,255,.66);
  font-size: 15px;
  line-height: 1.7;
  max-width: 760px;
}

.card{
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.03) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}

.card-header{
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.02) !important;
  color: rgba(255,255,255,.88) !important;
  font-weight: 800;
}

.widget-stats{
  border-radius: 18px;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
}

.widget-stats .stats-title{
  color: rgba(255,255,255,.62) !important;
  font-weight: 700;
}

.widget-stats .stats-number{
  color: rgba(255,255,255,.94) !important;
  font-weight: 900;
}

.widget-stats .stats-desc{
  color: rgba(255,255,255,.55) !important;
}

.widget-stats .progress{
  background: rgba(255,255,255,.08);
}

.widget-stats .progress-bar{
  background: linear-gradient(135deg, #00c8ff, #3b82f6);
}

.scroll-new{
  max-height: 520px;
  overflow-y: auto;
}

.scroll-new::-webkit-scrollbar{
  width: 8px;
}

.scroll-new::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.12);
  border-radius: 999px;
}

.alert{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.08);
}

@media (max-width: 767.98px){
  .client-dashboard-hero{
    padding: 20px 16px;
  }
}
/* =========================
   PANEL HEADER PREMIUM
========================= */

.panel-topbar-premium{
  background:
    linear-gradient(180deg, rgba(18,24,40,.96), rgba(16,22,36,.94)) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  backdrop-filter: blur(10px);
}

.panel-brand-logo{
  display: flex;
  align-items: center;
}

.panel-topbar-menu{
  display: flex;
  align-items: center;
  gap: 10px;
}

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

.panel-apps-btn:hover{
  background: rgba(0,200,255,.08);
  border-color: rgba(0,200,255,.18);
  box-shadow: 0 12px 24px rgba(0,200,255,.10);
  transform: translateY(-1px);
}

.panel-user-chip{
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  min-height: 48px;
}

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

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

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

.panel-user-chip__name{
  color: rgba(255,255,255,.92);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-user-chip__sub{
  color: rgba(255,255,255,.52);
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
}

.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-topbar-credit-box{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-topbar-credit-box__label{
  color: rgba(255,255,255,.52);
  font-size: 12px;
  margin-bottom: 2px;
}

.panel-topbar-credit-box__value{
  color: rgba(255,255,255,.94);
  font-size: 22px;
  font-weight: 900;
}

.panel-topbar-buy-btn{
  min-width: 120px;
  justify-content: center;
}

.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;
  }
}
/* =========================
   PANEL HEADER REFINEMENT
========================= */

.panel-credit-chip{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

.panel-credit-chip__label{
  color: rgba(255,255,255,.54);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}

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

.panel-header-funds-btn{
  height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;

  border-radius: 10px !important;

  background: linear-gradient(135deg,#4ea8ff,#3b82f6);
  border: 1px solid rgba(255,255,255,.12);

  box-shadow: 0 6px 14px rgba(59,130,246,.25);

  transition: all .2s ease;
}

.panel-header-funds-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(59,130,246,.35);
}

.panel-user-pill{
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 6px 12px 6px 8px;
  border-radius: 18px;
  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:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(0,200,255,.14);
  box-shadow: 0 14px 28px rgba(0,0,0,.14);
}

.panel-user-pill__avatar{
  width: 38px;
  height: 38px;
  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__info{
  min-width: 0;
}

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

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

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

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

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

.panel-user-dropdown__icon{
  color: #5ecbff !important;
}

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

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

  .panel-user-pill{
    padding-right: 8px;
  }
}
.panel-header-funds-btn i{
  font-size: 13px;
  margin-right: 6px;
}
/* =========================
   DASHBOARD BASE
========================= */

.dashboard-card-base{
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.018)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  overflow: hidden;
}

.dashboard-section-gap{
  margin-top: 16px;
}


/* =========================
   DASHBOARD ALERT
========================= */

.dashboard-alert-premium{
  background: rgba(0,0,0,.45) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(6px);
}

.dashboard-alert-premium .btn,
.dashboard-alert-premium a.btn{
  border-radius: 12px !important;
  font-weight: 700;
}

/* =========================
   DASHBOARD BALANCE CARDS
========================= */

.dashboard-balance-card{
  overflow: hidden;
}

.dashboard-balance-card .card-header{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.64) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  background: transparent !important;
}

.dashboard-balance-card .card-body{
  padding: 18px 18px 16px !important;
}

.dashboard-balance-card h2{
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  color: rgba(255,255,255,.96);
}

.dashboard-balance-card .btn{
  border-radius: 12px !important;
  font-weight: 800;
}

.dashboard-balance-card--main{
  background:
    radial-gradient(420px 180px at 12% 10%, rgba(0,200,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02)) !important;
}

.dashboard-balance-card--danger{
  background:
    radial-gradient(420px 180px at 12% 10%, rgba(255,90,90,.06), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)) !important;
}

.dashboard-balance-card--danger h2,
.dashboard-balance-card--danger .text-danger{
  color: #ff6b6b !important;
}


/* =========================
   DASHBOARD MINI STATS
========================= */

.dashboard-mini-stat-card{
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 18px;
}

.dashboard-mini-stat-card__icon{
  font-size: 46px;
  color: #69c8ff;
  margin-bottom: 18px;
}

.dashboard-mini-stat-card__label{
  color: rgba(255,255,255,.62);
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.dashboard-mini-stat-card__value{
  color: rgba(255,255,255,.96);
  font-size: 22px;
  font-weight: 900;
}

.dashboard-mini-stat-card--accent .dashboard-mini-stat-card__icon{
  color: #5ecbff;
}

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

.dashboard-announcements-wrap{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.018)) !important;
}

.dashboard-announcements-wrap .card-header{
  padding: 18px 20px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  background: transparent !important;
}

.dashboard-announcements-wrap .card-header h2{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: rgba(255,255,255,.95);
  letter-spacing: .2px;
}

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

.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);
}

.dashboard-announcement-item__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.dashboard-announcement-item__badge{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: #69c8ff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.dashboard-announcement-item__title{
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.45;
  margin-bottom: 14px;
  word-break: break-word;
}

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

.dashboard-announcement-item__price{
  color: #7bd3ff;
  font-size: 22px;
  font-weight: 900;
}

.dashboard-announcement-item__link{
  color: rgba(255,255,255,.78);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: color .18s ease;
}

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

.dashboard-announcements-list::-webkit-scrollbar{
  width: 8px;
}

.dashboard-announcements-list::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.12);
  border-radius: 999px;
}


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

@media (max-width: 991.98px){
  .dashboard-order-card{
    min-height: auto;
  }

  .dashboard-order-card .stats-number{
    font-size: 30px !important;
  }

  .dashboard-balance-card h2{
    font-size: 24px;
  }

  .dashboard-mini-stat-card{
    min-height: 170px;
  }

  .dashboard-mini-stat-card__icon{
    font-size: 40px;
  }
}
/* =========================
   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;
}
/* =========================
   CONTENEDOR PRINCIPAL DASHBOARD
========================= */

.dashboard-shell{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.018) 100%) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 28px !important;
  box-shadow:
    0 22px 55px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  overflow: hidden;
}

.dashboard-shell__body{
  padding: 20px !important;
  background: transparent !important;
}
/* =========================
   DASHBOARD OVERRIDE LIMPIO
========================= */

/* Shell principal */
.card.dashboard-shell{
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.016)) !important;
  box-shadow:
    0 24px 54px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.card.dashboard-shell > .card-body.dashboard-shell__body{
  padding: 20px !important;
  background: transparent !important;
}

/* Base común dashboard */
.card.dashboard-card-base,
.dashboard-card-base{
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.018)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.18) !important;
  overflow: hidden;
}

/* Header solo dashboard */
.dashboard-card-base .card-header,
.dashboard-balance-card .card-header,
.dashboard-announcements-wrap .card-header{
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  background: transparent !important;
  color: rgba(255,255,255,.84) !important;
  font-weight: 800 !important;
}

/* Body solo dashboard */
.dashboard-balance-card .card-body,
.dashboard-announcements-wrap .card-body{
  background: transparent !important;
}
/* =========================
   BALANCE / MINI STATS / ORDERS
========================= */

/* Balance */
.dashboard-balance-card{
  min-height: 126px;
}

.dashboard-balance-card .card-body{
  padding: 18px 20px !important;
}

.dashboard-balance-card h2{
  font-size: 2.15rem;
  letter-spacing: -.02em;
}

/* Mini stats */
.dashboard-mini-stat-card{
  min-height: 205px;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.016)) !important;
  box-shadow: 0 18px 36px rgba(0,0,0,.16) !important;
}

.dashboard-mini-stat-card__icon{
  font-size: 42px;
  margin-bottom: 16px;
}

.dashboard-mini-stat-card__label{
  color: rgba(255,255,255,.56);
}

.dashboard-mini-stat-card__value{
  font-size: 2rem;
  letter-spacing: -.02em;
}

/* Orders */
.dashboard-order-card{
  min-height: 250px;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.016)) !important;
  box-shadow: 0 18px 36px rgba(0,0,0,.16) !important;
}

.dashboard-order-card .stats-icon{
  width: 72px;
  height: 72px;
  border-radius: 20px;
}

.dashboard-order-card .stats-number{
  font-size: 42px !important;
}

.dashboard-order-card .stats-title{
  min-height: 38px;
}
/* =========================
   HERO MÁS PROTAGONISTA
========================= */

.client-dashboard-hero{
  border-radius: 28px !important;
  padding: 30px 28px !important;
  background:
    radial-gradient(700px 320px at 12% 18%, rgba(0,200,255,.14), transparent 60%),
    radial-gradient(520px 260px at 90% 10%, rgba(59,130,246,.12), transparent 60%),
    linear-gradient(180deg, rgba(14,22,42,.96), rgba(7,12,28,.92)) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.client-dashboard-hero__eyebrow{
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: .8px;
}

.client-dashboard-hero__title{
  font-size: clamp(28px, 2.5vw, 40px) !important;
  line-height: 1.02;
  letter-spacing: -.03em;
  margin-bottom: 10px;
}

.client-dashboard-hero__subtitle{
  font-size: 14px;
  color: rgba(255,255,255,.72);
}
/* =========================
   HERO BALANCE CARD
========================= */

.dashboard-mini-stat-card{
  backdrop-filter: blur(10px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)) !important;

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

  transition: all .25s ease;
}

.dashboard-mini-stat-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
}
.dashboard-order-card{
  position: relative;
  overflow: hidden;
}

.dashboard-order-card::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.04), transparent);
  opacity: 0;
  transition: opacity .25s ease;
}

.dashboard-order-card:hover::after{
  opacity: 1;
}

.dashboard-order-card:hover{
  transform: translateY(-3px);
}
.dashboard-section-divider{
  height: 1px;
  margin: 22px 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.08),
    transparent
  );
}
/* =========================
   DASHBOARD ORDER LINE CARDS
========================= */

.dashboard-order-line{
  min-height: 170px;
  padding: 18px 18px 16px;
  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 .25s ease, box-shadow .25s ease, border-color .25s ease;
  height: 100%;
}

.dashboard-order-line:hover{
  transform: translateY(-4px);
  box-shadow:
    0 24px 44px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.11);
}

.dashboard-order-line__top{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.dashboard-order-line__icon{
  width: 58px;
  height: 58px;
  min-width: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 10px 20px rgba(0,0,0,.12);
  font-size: 22px;
}

.dashboard-order-line__main{
  min-width: 0;
}

.dashboard-order-line__title{
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: rgba(255,255,255,.58);
  line-height: 1.35;
  margin-bottom: 6px;
}

.dashboard-order-line__number{
  font-size: 2.3rem;
  line-height: 1;
  font-weight: 900;
  color: rgba(255,255,255,.96);
  letter-spacing: -.03em;
}

.dashboard-order-line__progress{
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  margin-bottom: 12px;
}

.dashboard-order-line__progress-bar{
  height: 100%;
  border-radius: 999px;
  transition: width .55s ease;
}

.dashboard-order-line__desc{
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.58);
  line-height: 1.4;
}

/* Variantes */
.dashboard-order-line--success .dashboard-order-line__icon{
  color: #58d7ff;
  box-shadow:
    inset 0 0 0 1px rgba(88,215,255,.08),
    0 10px 20px rgba(0,0,0,.12);
}

.dashboard-order-line--success .dashboard-order-line__progress-bar{
  background: linear-gradient(135deg, #00c8ff, #3b82f6);
}

.dashboard-order-line--process .dashboard-order-line__icon{
  color: #7bd3ff;
  box-shadow:
    inset 0 0 0 1px rgba(123,211,255,.08),
    0 10px 20px rgba(0,0,0,.12);
}

.dashboard-order-line--process .dashboard-order-line__progress-bar{
  background: linear-gradient(135deg, #38bdf8, #60a5fa);
}

.dashboard-order-line--danger .dashboard-order-line__icon{
  color: #ff7c7c;
  box-shadow:
    inset 0 0 0 1px rgba(255,124,124,.08),
    0 10px 20px rgba(0,0,0,.12);
}

.dashboard-order-line--danger .dashboard-order-line__progress-bar{
  background: linear-gradient(135deg, #ff6b6b, #ef4444);
}
/* =========================
   DASHBOARD ORDER STRIPS
========================= */

.dashboard-orders-wrap{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

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

.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-order-strip__left{
  flex: 0 0 auto;
}

.dashboard-order-strip__icon{
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 10px 22px rgba(0,0,0,.12);
  font-size: 22px;
}

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

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

.dashboard-order-strip__title{
  color: rgba(255,255,255,.68);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  line-height: 1.35;
}

.dashboard-order-strip__number{
  color: rgba(255,255,255,.96);
  font-size: 2rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.03em;
  white-space: nowrap;
}

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

.dashboard-order-strip__progress-bar{
  height: 100%;
  border-radius: 999px;
  transition: width .55s ease;
}

.dashboard-order-strip__desc{
  color: rgba(255,255,255,.58);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

/* Variantes */
.dashboard-order-strip--success .dashboard-order-strip__icon{
  color: #58d7ff;
  box-shadow:
    inset 0 0 0 1px rgba(88,215,255,.08),
    0 10px 22px rgba(0,0,0,.12);
}

.dashboard-order-strip--success .dashboard-order-strip__progress-bar{
  background: linear-gradient(135deg, #00c8ff, #3b82f6);
}

.dashboard-order-strip--process .dashboard-order-strip__icon{
  color: #7bd3ff;
  box-shadow:
    inset 0 0 0 1px rgba(123,211,255,.08),
    0 10px 22px rgba(0,0,0,.12);
}

.dashboard-order-strip--process .dashboard-order-strip__progress-bar{
  background: linear-gradient(135deg, #38bdf8, #60a5fa);
}

.dashboard-order-strip--danger .dashboard-order-strip__icon{
  color: #ff7c7c;
  box-shadow:
    inset 0 0 0 1px rgba(255,124,124,.08),
    0 10px 22px rgba(0,0,0,.12);
}

.dashboard-order-strip--danger .dashboard-order-strip__progress-bar{
  background: linear-gradient(135deg, #ff6b6b, #ef4444);
}

@media (max-width: 767.98px){
  .dashboard-order-strip{
    align-items: flex-start;
  }

  .dashboard-order-strip__top{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .dashboard-order-strip__number{
    font-size: 1.8rem;
  }
}
@media (max-width: 768px){
  .dashboard-orders-grid{
    grid-template-columns: 1fr;
  }
}
.dashboard-order-strip{
  min-height: 100px;
  padding: 16px 18px;
}
.dashboard-order-strip__number{
  font-size: 1.8rem;
}
/* =========================
   MOBILE TIGHTEN - ORDERS / UPDATES
========================= */

@media (max-width: 767.98px){

  .dashboard-orders-grid{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .dashboard-order-strip{
    min-height: auto !important;
    padding: 14px 14px 12px !important;
    border-radius: 18px !important;
  }

  .dashboard-order-strip__icon{
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 16px !important;
    font-size: 19px !important;
  }

  .dashboard-order-strip__top{
    margin-bottom: 8px !important;
    gap: 8px !important;
  }

  .dashboard-order-strip__title{
    font-size: 12px !important;
    line-height: 1.25 !important;
    margin-bottom: 0 !important;
  }

  .dashboard-order-strip__number{
    font-size: 1.55rem !important;
    line-height: 1 !important;
  }

  .dashboard-order-strip__progress{
    height: 10px !important;
    margin-bottom: 8px !important;
  }

  .dashboard-order-strip__desc{
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  /* baja el aire entre órdenes y actualizaciones */
  .dashboard-section.mt-3{
    margin-top: .75rem !important;
  }

  .dashboard-announcements-wrap{
    margin-top: 0 !important;
  }

  .dashboard-announcements-wrap .card-header{
    padding: 14px 16px 12px !important;
  }

  .dashboard-announcements-list{
    padding: 10px !important;
    max-height: none !important;
  }

  .dashboard-announcement-item{
    padding: 14px !important;
    margin-bottom: 10px !important;
    border-radius: 16px !important;
  }
}
.dashboard-orders-wrap + .col-md-12{
  margin-top: 18px;
}
.dashboard-section{
  margin-top: 16px;
}
/* =========================
   ALERTAS PREMIUM DASHBOARD
========================= */

.alert.dashboard-alert-premium{
  padding: 0 !important;
  margin-bottom: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dashboard-alert-premium .dashboard-alert-premium__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;

  padding: 20px 22px !important;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.09);

  background:
    radial-gradient(420px 180px at 8% 10%, rgba(0,200,255,.10), transparent 60%),
    linear-gradient(135deg, rgba(15,24,46,.96), rgba(7,12,28,.94)) !important;

  box-shadow:
    0 18px 40px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.04);

  backdrop-filter: blur(10px);
  overflow: hidden;
}

/* Icono */
.dashboard-alert-premium__icon{
  width: 58px;
  height: 58px;
  min-width: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 24px rgba(0,0,0,.14);

  color: #73cfff;
  font-size: 1.3rem;
}

/* Contenido */
.dashboard-alert-premium__content{
  flex: 1 1 320px;
  min-width: 0;
}

.dashboard-alert-premium__title{
  color: rgba(255,255,255,.96);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 6px;
}

.dashboard-alert-premium__text{
  color: rgba(255,255,255,.72);
  font-size: .96rem;
  line-height: 1.5;
}

/* Acción */
.dashboard-alert-premium__action{
  flex: 0 0 auto;
}

.dashboard-alert-premium__action .btn{
  min-height: 46px;
  padding: 10px 18px !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  box-shadow:
    0 10px 24px rgba(59,130,246,.22),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* =========================
   VARIANTE SEGURIDAD
========================= */

.dashboard-alert-premium--security .dashboard-alert-premium__inner{
  background:
    radial-gradient(420px 180px at 8% 10%, rgba(0,200,255,.08), transparent 60%),
    linear-gradient(135deg, rgba(13,22,42,.96), rgba(7,12,28,.94)) !important;
}

.dashboard-alert-premium--security .dashboard-alert-premium__icon{
  color: #7fd4ff;
  background: rgba(0,200,255,.08);
  border-color: rgba(0,200,255,.14);
}

/* =========================
   VARIANTE SUCCESS
========================= */

.dashboard-alert-premium--success .dashboard-alert-premium__inner{
  background:
    radial-gradient(420px 180px at 8% 10%, rgba(70,220,170,.10), transparent 60%),
    linear-gradient(135deg, rgba(12,28,30,.96), rgba(7,16,24,.94)) !important;
}

.dashboard-alert-premium--success .dashboard-alert-premium__icon{
  color: #6ee7b7;
  background: rgba(70,220,170,.10);
  border-color: rgba(70,220,170,.16);
}

/* =========================
   VARIANTE TELEGRAM
========================= */

.dashboard-alert-premium--telegram .dashboard-alert-premium__inner{
  background:
    radial-gradient(460px 200px at 8% 10%, rgba(0,200,255,.14), transparent 60%),
    linear-gradient(135deg, rgba(12,30,56,.96), rgba(6,18,40,.95)) !important;
  border-color: rgba(0,200,255,.12);
}

.dashboard-alert-premium--telegram .dashboard-alert-premium__icon{
  color: #7ad8ff;
  background: rgba(0,200,255,.10);
  border-color: rgba(0,200,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 24px rgba(0,200,255,.10);
}

.dashboard-alert-premium--telegram .dashboard-alert-premium__action .btn{
  box-shadow:
    0 12px 28px rgba(0,200,255,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* =========================
   TEXTO ANTIGUO DE RESPALDO
========================= */

.dashboard-alert-premium .text-white{
  color: rgba(255,255,255,.92) !important;
}

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

@media (max-width: 767.98px){
  .dashboard-alert-premium .dashboard-alert-premium__inner{
    padding: 16px !important;
    border-radius: 18px;
    gap: 14px;
  }

  .dashboard-alert-premium__icon{
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 16px;
    font-size: 1.15rem;
  }

  .dashboard-alert-premium__title{
    font-size: .96rem;
  }

  .dashboard-alert-premium__text{
    font-size: .9rem;
  }

  .dashboard-alert-premium__action{
    width: 100%;
  }

  .dashboard-alert-premium__action .btn{
    width: 100%;
    justify-content: center;
  }
}
/* =========================
   ALERT ANIMATIONS
========================= */

@keyframes dashboardAlertFadeUp{
  from{
    opacity: 0;
    transform: translateY(14px) scale(.985);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dashboardAlertGlow{
  0%, 100%{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 18px 40px rgba(0,0,0,.18);
  }
  50%{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 18px 40px rgba(0,0,0,.18),
      0 0 24px rgba(0,200,255,.10);
  }
}

/* entrada general */
.dashboard-alert-premium .dashboard-alert-premium__inner{
  animation: dashboardAlertFadeUp .55s ease both;
}

/* efecto vivo solo en telegram */
.dashboard-alert-premium--telegram .dashboard-alert-premium__inner{
  animation:
    dashboardAlertFadeUp .55s ease both,
    dashboardAlertGlow 3.6s ease-in-out infinite;
}

/* hover elegante */
.dashboard-alert-premium .dashboard-alert-premium__inner{
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.dashboard-alert-premium .dashboard-alert-premium__inner:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.13);
}

/* icono con micro movimiento */
.dashboard-alert-premium__icon{
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.dashboard-alert-premium .dashboard-alert-premium__inner:hover .dashboard-alert-premium__icon{
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 28px rgba(0,0,0,.16),
    0 0 18px rgba(0,200,255,.10);
}

/* botón más premium */
.dashboard-alert-premium__action .btn{
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease !important;
}

.dashboard-alert-premium__action .btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
}

/* success con glow verde suave */
.dashboard-alert-premium--success .dashboard-alert-premium__inner:hover .dashboard-alert-premium__icon{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 28px rgba(0,0,0,.16),
    0 0 18px rgba(70,220,170,.12);
}

/* security con glow azul */
.dashboard-alert-premium--security .dashboard-alert-premium__inner:hover .dashboard-alert-premium__icon{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 28px rgba(0,0,0,.16),
    0 0 18px rgba(90,190,255,.12);
}

/* respetar usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce){
  .dashboard-alert-premium .dashboard-alert-premium__inner,
  .dashboard-alert-premium--telegram .dashboard-alert-premium__inner{
    animation: none !important;
  }

  .dashboard-alert-premium .dashboard-alert-premium__inner,
  .dashboard-alert-premium__icon,
  .dashboard-alert-premium__action .btn{
    transition: none !important;
  }
}
/* =========================================================
   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;
    }
}
/* =========================================================
   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;
}

/* =========================
   FLECHA CUSTOM FIEL SELECT
========================= */

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

.service-ui-main-card,
.placeimei-main-card{
  background: linear-gradient(180deg, var(--svc-bg-1) 0%, var(--svc-bg-2) 100%) !important;
  border: 1px solid var(--svc-border) !important;
  border-radius: 26px !important;
  box-shadow:
    0 18px 46px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.service-ui-main-card__body,
.placeimei-main-card__body{
  padding: 26px !important;
}

.service-ui-main-card__grid,
.placeimei-main-card__grid{
  row-gap: 10px;
}

.service-ui-detail-card,
.placeimei-detail-card{
  position: relative;
  background: linear-gradient(180deg, var(--svc-bg-1) 0%, var(--svc-bg-2) 100%) !important;
  border: 1px solid var(--svc-border) !important;
  border-radius: 26px !important;
  box-shadow:
    0 18px 46px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.service-ui-detail-card__body,
.placeimei-detail-card__body{
  padding: 18px 18px 20px !important;
}

.service-ui-detail-col,
.placeimei-detail-col{
  padding: 14px 16px;
}

.service-ui-detail-col--info,
.placeimei-detail-col--info{
  border-left: 1px solid rgba(255,255,255,.08);
}

/* =========================
   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
========================= */

.service-ui-control,
.placeimei-control,
.placeimei-detail-card input.form-control,
.placeimei-detail-card textarea.form-control,
.placeimei-detail-card select.form-select{
  background: linear-gradient(180deg, var(--svc-control-1), var(--svc-control-2)) !important;
  color: var(--svc-text) !important;
  border: 1px solid var(--svc-border-soft) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}

.service-ui-control,
.placeimei-control{
  min-height: 52px;
}

.service-ui-control--lg,
.placeimei-control--lg{
  min-height: 56px;
}

.service-ui-control:focus,
.placeimei-control:focus,
.placeimei-textarea:focus,
.placeimei-detail-card input.form-control:focus,
.placeimei-detail-card textarea.form-control:focus,
.placeimei-detail-card select.form-select:focus{
  border-color: var(--svc-border-focus) !important;
  box-shadow: 0 0 0 4px rgba(71,132,255,.14) !important;
}

.service-ui-textarea,
.placeimei-textarea{
  min-height: 150px;
  border-radius: 18px !important;
  background: linear-gradient(180deg, var(--svc-control-1), var(--svc-control-2)) !important;
  border: 1px solid var(--svc-border-soft) !important;
  color: var(--svc-text) !important;
  padding: 14px 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
  resize: vertical;
}

.service-ui-textarea::placeholder,
.placeimei-textarea::placeholder,
.service-ui-control::placeholder,
.placeimei-control::placeholder{
  color: rgba(244,248,255,.55) !important;
}

/* =========================
   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
========================= */

.service-ui-price h2,
.placeimei-costo h2,
#costo h2{
  margin: 0 0 16px;
  font-size: clamp(2rem, 2.2vw, 2.7rem);
  font-weight: 900;
  line-height: 1;
  color: #fff;
}

.placeimei-detail-card .progress{
  height: 4px !important;
  margin-top: 8px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
}

.placeimei-detail-card .progress-bar{
  background: linear-gradient(90deg, #7dd3fc, #5d93ff);
  border-radius: 999px;
}

/* =========================
   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);
}

#placeorder.placeimei-action-btn{
  min-width: 100%;
  min-height: 50px;
  font-size: .98rem;
}
#placeorder::before,
#placeorder::after,
#placeorder *::before,
#placeorder *::after{
  content: none !important;
  display: none !important;
}

#placeorder{
  background-clip: padding-box !important;
}
/* =========================
   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
========================= */

/* ocultar select nativo mientras Select2 carga */
.placeimei-main-card #grupos,
.placeimei-main-card #service{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* cuando ya esté listo, el nativo sigue oculto y mandará Select2 */
.placeimei-main-card.placeimei-select2-ready #grupos,
.placeimei-main-card.placeimei-select2-ready #service{
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* contenedor select2 oculto hasta estar listo */
.placeimei-main-card .select2-container{
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .12s ease;
}

/* mostrar select2 ya listo */
.placeimei-main-card.placeimei-select2-ready .select2-container{
  opacity: 1 !important;
  visibility: visible !important;
}

/* ancho completo */
.placeimei-main-card #grupos + .select2-container,
.placeimei-main-card #service + .select2-container{
  width: 100% !important;
}

/* caja cerrada premium */
.placeimei-main-card #grupos + .select2-container .select2-selection--single,
.placeimei-main-card #service + .select2-container .select2-selection--single{
  min-height: 62px !important;
  height: 62px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 58px 0 20px !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;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

/* texto renderizado */
.placeimei-main-card #grupos + .select2-container .select2-selection__rendered,
.placeimei-main-card #service + .select2-container .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 */
.placeimei-main-card #grupos + .select2-container .select2-selection__arrow,
.placeimei-main-card #service + .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;
}

.placeimei-main-card #grupos + .select2-container .select2-selection__arrow b,
.placeimei-main-card #service + .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;
}

.placeimei-main-card #grupos + .select2-container .select2-selection__arrow b::before,
.placeimei-main-card #service + .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/focus */
.placeimei-main-card #grupos + .select2-container:hover .select2-selection--single,
.placeimei-main-card #service + .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);
}

.placeimei-main-card #grupos + .select2-container.select2-container--open .select2-selection--single,
.placeimei-main-card #service + .select2-container.select2-container--open .select2-selection--single,
.placeimei-main-card #grupos + .select2-container.select2-container--focus .select2-selection--single,
.placeimei-main-card #service + .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 premium */
.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-x: hidden !important;
  overflow-y: auto !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,.34),
    0 0 18px rgba(0,212,255,.06) !important;
}

/* buscador interno */
.select2-search--dropdown{
  padding: 12px !important;
  background: transparent !important;
}
/* =========================
   SELECT2 DROPDOWN / HOVER + ACTIVE
========================= */

/* área de resultados */
.select2-results{
  padding: 8px 8px 10px !important;
}

/* opciones base */
.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;
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease, color .16s ease !important;
}

/* hover de opción */
.select2-results__option--highlighted[aria-selected],
.select2-results__option--highlighted[aria-selected="true"]{
  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;
  transform: translateX(2px);
}

/* opción seleccionada */
.select2-results__option[aria-selected="true"]{
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* si la opción seleccionada además está hover */
.select2-results__option[aria-selected="true"].select2-results__option--highlighted{
  background: linear-gradient(135deg, rgba(0,212,255,.16), rgba(0,102,255,.12)) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,212,255,.18),
    0 0 14px rgba(0,212,255,.06) !important;
}

.select2-search--dropdown .select2-search__field{
  min-height: 46px !important;
  border-radius: 14px !important;
  background: rgba(58,65,76,.96) !important;
  border: 1px solid rgba(134,163,226,.24) !important;
  color: #f4f8ff !important;
  padding: 10px 14px !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}

.select2-search--dropdown .select2-search__field:focus{
  outline: none !important;
  border-color: rgba(0,212,255,.34) !important;
  box-shadow:
    0 0 0 3px rgba(0,212,255,.08),
    0 0 14px rgba(0,212,255,.05) !important;
}
/* ===== FIX SELECT2 CLICK ===== */

/* Si tu card usa overlays decorativos, que no bloqueen clic */
.placeimei-main-card::before,
.placeimei-main-card::after,
.placeimei-group-card::before,
.placeimei-group-card::after {
    pointer-events: none !important;
}

/* Asegura que el Select2 sí reciba clic */
.select2-container,
.select2-container * ,
.select2-dropdown,
.select2-results,
.select2-results__options,
.select2-results__option,
.select2-search,
.select2-search__field {
    pointer-events: auto !important;
}

/* Súbelo por encima de panels, cards o fondos premium */
.select2-container--open {
    z-index: 99999 !important;
}

.select2-dropdown {
    z-index: 99999 !important;
}
/* =========================
   REMOTE LIST / SPACE BETWEEN GROUP AND SERVICE
========================= */

.remote-list-selects .form-group{
  margin-bottom: 18px !important;
}

.remote-list-selects .form-group:last-child{
  margin-bottom: 0 !important;
}

.remote-list-selects label{
  margin-bottom: 10px !important;
}

.remote-list-selects #grupos + .select2-container,
.remote-list-selects #service + .select2-container{
  margin-bottom: 6px !important;
}
/* =========================
   SERVER LIST / FLECHA PROPIA
========================= */

.server-list-selects.placeimei-select2-ready #grupos + .select2-container .select2-selection--single,
.server-list-selects.placeimei-select2-ready #service + .select2-container .select2-selection--single{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 100% !important;
  gap: 6px !important;
}

.server-list-selects.placeimei-select2-ready #grupos + .select2-container .select2-selection__arrow,
.server-list-selects.placeimei-select2-ready #service + .select2-container .select2-selection__arrow{
  position: relative !important;
  right: auto !important;
  top: auto !important;
  margin-left: 8px !important;
  left: 1px !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.server-list-selects.placeimei-select2-ready #grupos + .select2-container .select2-selection__rendered,
.server-list-selects.placeimei-select2-ready #service + .select2-container .select2-selection__rendered{
  padding-right: 0 !important;
}
.server-list-selects.placeimei-select2-ready #grupos + .select2-container,
.server-list-selects.placeimei-select2-ready #service + .select2-container{
  width: 100% !important;
  min-width: 100% !important;
}

.server-list-selects.placeimei-select2-ready #grupos + .select2-container .select2-selection__rendered,
.server-list-selects.placeimei-select2-ready #service + .select2-container .select2-selection__rendered{
  flex: 0 1 auto !important;
}

.server-list-selects.placeimei-select2-ready #grupos + .select2-container .select2-selection__arrow,
.server-list-selects.placeimei-select2-ready #service + .select2-container .select2-selection__arrow{
  flex: 0 0 auto !important;
}
/* =========================
   REMOTE LIST / FLECHA PROPIA
========================= */

.remote-list-selects.placeimei-select2-ready #grupos + .select2-container .select2-selection--single,
.remote-list-selects.placeimei-select2-ready #service + .select2-container .select2-selection--single{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 100% !important;
  gap: 6px !important;
}

.remote-list-selects.placeimei-select2-ready #grupos + .select2-container .select2-selection__arrow,
.remote-list-selects.placeimei-select2-ready #service + .select2-container .select2-selection__arrow{
  position: relative !important;
  right: auto !important;
  top: auto !important;
  margin-left: 8px !important;
  left: 1px !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.remote-list-selects.placeimei-select2-ready #grupos + .select2-container .select2-selection__rendered,
.remote-list-selects.placeimei-select2-ready #service + .select2-container .select2-selection__rendered{
  padding-right: 0 !important;
}

.remote-list-selects.placeimei-select2-ready #grupos + .select2-container,
.remote-list-selects.placeimei-select2-ready #service + .select2-container{
  width: 100% !important;
  min-width: 100% !important;
}

.remote-list-selects.placeimei-select2-ready #grupos + .select2-container .select2-selection__rendered,
.remote-list-selects.placeimei-select2-ready #service + .select2-container .select2-selection__rendered{
  flex: 0 1 auto !important;
}

.remote-list-selects.placeimei-select2-ready #grupos + .select2-container .select2-selection__arrow,
.remote-list-selects.placeimei-select2-ready #service + .select2-container .select2-selection__arrow{
  flex: 0 0 auto !important;
}

/* =========================
   ALL SERVICES SOLO ESTA VISTA CUADROS
========================= */

/* ALL SERVICES - RECUPERAR EXTERIOR SELECT2 */
.allservices-products .select2-container{
  width: 100% !important;
}

.allservices-products .select2-container .select2-selection--single{
  background: linear-gradient(180deg, rgba(18,31,59,.92), rgba(14,25,49,.96)) !important;
  border: 1px solid rgba(0,196,255,.22) !important;
  border-radius: 16px !important;
  min-height: 48px !important;
  height: 48px !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
}

.allservices-products .select2-container .select2-selection--single .select2-selection__rendered{
  color: #f4f7fb !important;
  line-height: 48px !important;
  padding-left: 16px !important;
  padding-right: 36px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

.allservices-products .select2-container .select2-selection--single .select2-selection__arrow{
  height: 48px !important;
  right: 10px !important;
}

.allservices-products .select2-container .select2-selection--single .select2-selection__arrow b{
  border-color: rgba(255,255,255,.80) transparent transparent transparent !important;
}
.allservices-option-line {
    color: rgba(255,255,255,.92);
    font-size: 16px;
    line-height: 1.4;
}

.allservices-option-name {
    color: #ffffff;
}

.allservices-option-price {
    color: #9fe3ff;
    font-weight: 600;
}

.allservices-option-time {
    color: rgba(255,255,255,.78);
    white-space: nowrap;
}

.allservices-option-time i {
    color: #00cfff;
    margin-right: 6px;
    font-size: 14px;
    vertical-align: middle;
}

.allservices-option-sep {
    opacity: .45;
}
/* Hover del selector cerrado */
.allservices-select-wrap .select2-container--default .select2-selection--single {
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.allservices-select-wrap .select2-container--default .select2-selection--single:hover,
.allservices-select-wrap .select2-container--default.select2-container--open .select2-selection--single,
.allservices-select-wrap .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: rgba(0, 212, 255, 0.55) !important;
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.10), 0 0 18px rgba(0, 212, 255, 0.18) !important;
}

/* Hover de opciones dentro del dropdown */
.allservices-select-wrap .select2-results__option {
    transition: background .16s ease, box-shadow .16s ease, border-color .16s ease, transform .16s ease !important;
}

.allservices-select-wrap .select2-results__option--highlighted.select2-results__option--selectable {
    background: rgba(34, 78, 120, 0.72) !important;
    border: 1px solid rgba(0, 212, 255, 0.28) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.06), 0 0 14px rgba(0, 212, 255, 0.08) !important;
}
/* Hover/focus para filtros de arriba */
.allservices-filter-form .allservices-filter-control,
.allservices-filter-form .select2-container--default .select2-selection--single {
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.allservices-filter-form .allservices-filter-control:hover,
.allservices-filter-form .allservices-filter-control:focus,
.allservices-filter-form .select2-container--default .select2-selection--single:hover,
.allservices-filter-form .select2-container--default.select2-container--open .select2-selection--single,
.allservices-filter-form .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: rgba(0, 212, 255, 0.55) !important;
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.10), 0 0 18px rgba(0, 212, 255, 0.16) !important;
}

.allservices-filter-form .allservices-filter-control:hover,
.allservices-filter-form .select2-container--default .select2-selection--single:hover {
    transform: translateY(-1px);
}
/* MEJORAR BARRA */
.allservices-select-wrap,
.allservices-select-wrap .card-body,
.allservices-select-wrap .form-group {
    overflow: visible !important;
}

.allservices-select-wrap .select2-container {
    width: 100% !important;
    z-index: 30 !important;
}

.allservices-select-wrap .select2-container--open {
    z-index: 9999 !important;
}

.allservices-select-wrap .select2-dropdown {
    z-index: 9999 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
}

.allservices-select-wrap .select2-results__options {
    max-height: 340px !important;
    padding: 10px 12px 14px !important;
}

.allservices-select-wrap .select2-search--dropdown {
    padding: 14px 14px 8px !important;
}

.allservices-select-wrap .select2-search--dropdown .select2-search__field {
    width: 100% !important;
    box-sizing: border-box !important;
}

.allservices-select-wrap .select2-results__option {
    padding: 16px 18px !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
    border-radius: 16px !important;
    white-space: normal !important;
}
/* =========================
   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;
  }
}
/* =========================
   ALL SERVICES / FILTROS SUPERIORES
========================= */

.allservices-filter-form .row{
  --bs-gutter-y: 0.75rem;
}

.allservices-filter-control{
  min-height: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(18,31,59,.92), rgba(14,25,49,.96)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #eef4ff !important;
  box-shadow: none !important;
  padding: 0 18px !important;
  font-size: 16px !important;
}

.allservices-filter-control::placeholder{
  color: rgba(255,255,255,.42) !important;
}

.allservices-filter-control:focus{
  border-color: rgba(0,196,255,.42) !important;
  box-shadow: 0 0 0 3px rgba(0,140,255,.10), 0 0 18px rgba(0,153,255,.08) !important;
  outline: none !important;
}

.allservices-filter-search{
  padding-left: 18px !important;
}

.allservices-filter-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(180deg, rgba(18,31,59,.92), rgba(14,25,49,.96)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'><path fill='rgba(255,255,255,0.92)' d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right 16px center;
  background-size: 100% 100%, 18px;
  padding-right: 46px !important;
}

.allservices-filter-btn{
  min-height: 47px !important;
  height: 47px !important;
  border-radius: 14px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Para que todos queden alineados en altura */
.allservices-filter-form .col-lg-4,
.allservices-filter-form .col-lg-3,
.allservices-filter-form .col-lg-2,
.allservices-filter-form .col-md-6{
  display: flex;
}

.allservices-filter-form .col-lg-4 > *,
.allservices-filter-form .col-lg-3 > *,
.allservices-filter-form .col-lg-2 > *,
.allservices-filter-form .col-md-6 > *{
  width: 100%;
}

/* Ajuste visual general */
.placeimei-main-card .allservices-filter-form{
  margin-bottom: 8px !important;
}
/* ESPACIO ENTRE FILTROS Y CARDS */
.placeimei-main-card .allservices-filter-form{
  margin-bottom: 22px !important;
}
/* ALL SERVICES / BADGE DE TIPO */
.placeimei-service-type-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(88, 200, 255, .16);
  border: 1px solid rgba(88, 200, 255, .28);
  color: #58c8ff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.allservices-products select {
  background-color: #05070f !important;
  color: #fff !important;
  border: 1px solid rgba(0,212,255,0.2) !important;
  border-radius: 12px !important;
}

.allservices-products select option {
  background-color: #05070f;
  color: #fff;
}
/* =========================
   SERVER LIST / FORCE SELECT RENDER
========================= */
/* ocultar select nativo */
.server-list-selects #grupos,
.server-list-selects #service{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
}

/* mostrar el reemplazo visual */
.server-list-selects .chosen-container,
.server-list-selects .select2-container{
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  width: 100% !important;
}

/* si el plugin visible es chosen */
.server-list-selects .chosen-container-single .chosen-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;
  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;
}

.server-list-selects .chosen-container-single .chosen-single span{
  line-height: 58px !important;
  color: #f4f8ff !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  letter-spacing: .2px;
  margin-right: 0 !important;
}

.server-list-selects .chosen-container-single .chosen-single div{
  right: 14px !important;
  width: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.server-list-selects .chosen-container-single .chosen-single div b{
  background: none !important;
  position: relative !important;
  width: 10px !important;
  height: 10px !important;
  display: block !important;
}

.server-list-selects .chosen-container-single .chosen-single div b::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255,255,255,.95);
  border-bottom: 2px solid rgba(255,255,255,.95);
  transform: translate(-50%, -65%) rotate(45deg);
}

.server-list-selects .chosen-container-single .chosen-single{
  cursor: pointer !important;
}

.server-list-selects .chosen-container-single:hover .chosen-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) !important;
}

.server-list-selects .chosen-container-active.chosen-with-drop .chosen-single,
.server-list-selects .chosen-container-active .chosen-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 chosen */
.server-list-selects .chosen-container .chosen-drop{
  margin-top: 10px !important;
  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;
}

.server-list-selects .chosen-search{
  padding: 12px !important;
}

.server-list-selects .chosen-search input[type="text"]{
  min-height: 46px !important;
  border-radius: 14px !important;
  background: rgba(58,65,76,.96) !important;
  border: 1px solid rgba(134,163,226,.24) !important;
  color: #f4f8ff !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
}

.server-list-selects .chosen-results{
  margin: 0 !important;
  padding: 8px !important;
  max-height: 320px !important;
}

.server-list-selects .chosen-results li{
  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;
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease, color .16s ease !important;
}

.server-list-selects .chosen-results li.highlighted{
  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;
  transform: translateX(2px);
}

/* si también aparece select2 en alguna carga, que tome el mismo look */
.server-list-selects #grupos + .select2-container .select2-selection--single,
.server-list-selects #service + .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;
}

.server-list-selects #grupos + .select2-container .select2-selection__rendered,
.server-list-selects #service + .select2-container .select2-selection__rendered{
  color: #f4f8ff !important;
  line-height: 58px !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
}
/* SERVER LIST / SPACE BETWEEN GROUP AND SERVICE */
.server-list-selects .form-group{
  margin-bottom: 18px !important;
}

.server-list-selects .form-group:last-child{
  margin-bottom: 0 !important;
}

.server-list-selects label{
  margin-bottom: 10px !important;
}

.server-list-selects #grupos + .select2-container,
.server-list-selects #service + .select2-container{
  margin-bottom: 6px !important;
}
.server-list-selects .chosen-container-single,
.server-list-selects .chosen-container-single *{
  cursor: pointer !important;
}
/* =========================
   REMOTE LIST / FORCE SELECT RENDER
========================= */

/* ocultar select nativo */
.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 reemplazo visual */
.remote-list-selects .chosen-container,
.remote-list-selects .select2-container{
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  width: 100% !important;
}

/* si aparece chosen */
.remote-list-selects .chosen-container-single .chosen-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;
  color: #f4f8ff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 10px 24px rgba(0,0,0,.18) !important;
}

.remote-list-selects .chosen-container-single .chosen-single span{
  line-height: 58px !important;
  color: #f4f8ff !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  margin-right: 0 !important;
}

.remote-list-selects .chosen-container-single .chosen-single div{
  right: 14px !important;
  width: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.remote-list-selects .chosen-container-single .chosen-single div b{
  background: none !important;
  position: relative !important;
  width: 10px !important;
  height: 10px !important;
  display: block !important;
}

.remote-list-selects .chosen-container-single .chosen-single div b::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255,255,255,.95);
  border-bottom: 2px solid rgba(255,255,255,.95);
  transform: translate(-50%, -65%) rotate(45deg);
}

/* dropdown chosen */
.remote-list-selects .chosen-container .chosen-drop{
  margin-top: 10px !important;
  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;
}

.remote-list-selects .chosen-search{
  padding: 12px !important;
}

.remote-list-selects .chosen-search input[type="text"]{
  min-height: 46px !important;
  border-radius: 14px !important;
  background: rgba(58,65,76,.96) !important;
  border: 1px solid rgba(134,163,226,.24) !important;
  color: #f4f8ff !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
}

.remote-list-selects .chosen-results{
  margin: 0 !important;
  padding: 8px !important;
  max-height: 320px !important;
}

.remote-list-selects .chosen-results li{
  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;
}

.remote-list-selects .chosen-results li.highlighted{
  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;
}

/* si aparece select2, mismo look */
.remote-list-selects #grupos + .select2-container .select2-selection--single,
.remote-list-selects #service + .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;
}

.remote-list-selects #service + .select2-container .select2-selection--single{
  min-height: 64px !important;
  height: 64px !important;
}

.remote-list-selects #grupos + .select2-container .select2-selection__rendered,
.remote-list-selects #service + .select2-container .select2-selection__rendered{
  color: #f4f8ff !important;
  line-height: 58px !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
}

.remote-list-selects #service + .select2-container .select2-selection__rendered{
  line-height: 64px !important;
  font-size: 1.05rem !important;
}

.remote-list-selects .form-group{
  margin-bottom: 18px !important;
}

.remote-list-selects .form-group:last-child{
  margin-bottom: 0 !important;
}

.remote-list-selects label{
  margin-bottom: 10px !important;
}

.remote-list-selects .chosen-container-single,
.remote-list-selects .chosen-container-single *{
  cursor: pointer !important;
}
/* =========================
   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;
}
/* =========================
   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);
}