/* =========================
   VARIABLES & BASE
   ========================= */
:root{
  --brand-blue:#6683ff;    /* azul del logo */
  --brand-rose:#f0a080;    /* rosa/peach del logo (acento) */
  --brand-dark:#0b1220;
  --brand-muted:#64748b;
  --brand-light:#f5f7ff;
  --radius-xl:1.25rem;
}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",sans-serif;
  color:var(--brand-dark);
}

.navbar{ backdrop-filter:saturate(180%) blur(8px); }

.form-control:focus{
  box-shadow:0 0 0 .25rem rgba(96,128,240,.15);
  border-color:var(--brand-blue);
}

/* =========================
   BOTONES
   ========================= */
.btn-primary{ background:var(--brand-blue); border-color:var(--brand-blue); }
.btn-outline-primary{ border-color:var(--brand-blue); color:var(--brand-blue); }
.btn-outline-primary:hover{ background:var(--brand-blue); color:#fff; }

.btn-rose{ background:var(--brand-rose); border-color:var(--brand-rose); color:#1b1b1b; }
.btn-rose:hover{ filter:brightness(0.95); color:#111; }

.btn-ghost-rose:hover{ border:1px solid var(--brand-rose); color:var(--brand-rose); background:transparent; }
.btn-ghost-rose{ background:var(--brand-rose); color:#111; }

/* Tamaños auxiliares */
.btn-xs{
  --bs-btn-padding-y:.3rem;
  --bs-btn-padding-x:.55rem;
  --bs-btn-font-size:.85rem;
  border-radius:.6rem;
}

/* =========================
   COMPONENTES UI
   ========================= */
.b-card{
  border:1px solid #e6e8ef; border-radius:var(--radius-xl);
  background:#fff; overflow:hidden;
  transition:transform .2s, box-shadow .2s;
}
.b-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(2,6,23,.10); }

.b-hero{
  background:
    radial-gradient(1200px 600px at 10% -10%, #e9edff 0, transparent 60%),
    linear-gradient(180deg,#ffffff 0%,#f5f7ff 100%);
}

.b-badge{
  background:rgba(96,128,240,.12);
  color:var(--brand-blue);
  border:1px solid rgba(96,128,240,.25);
}

.section-title{ font-weight:800; letter-spacing:-.02em; }

.accent-text{
  background:linear-gradient(90deg,var(--brand-blue),var(--brand-rose));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.footer{ background:linear-gradient(180deg,#0b1220,#0a1020); color:#cbd5e1; }

.carousel-caption{ text-shadow:0 2px 18px rgba(0,0,0,.45); }

.mini-chip{
  border:1px solid #e2e8f0; border-radius:999px;
  padding:.3rem .65rem; font-size:.8rem; background:#fff;
}

/* Imágenes consistentes en tarjetas */
.thumb-4x3{ position:relative; }
.thumb-4x3 .img{inset:0; width:100%; height:100%; object-fit:cover; }

/* =========================
   MENÚ / OFFCANVAS MÓVIL
   ========================= */
.btn-menu{ padding:.25rem .5rem; border-radius:.75rem; }
.mobile-quick{ flex-wrap:nowrap !important; white-space:nowrap; }

.mobile-offcanvas{ width:88vw; max-width:420px; }

.offcanvas-header{
  background:linear-gradient(90deg,var(--brand-blue),var(--brand-rose));
  color:#fff;
  padding-left:15%;
}
.brand-badge{
  background:rgba(255,255,255,.92);
  border-radius:.75rem;
  padding:.25rem .6rem;
}

.mobile-offcanvas .accordion-button{
  font-size:1.05rem; font-weight:600;
  background:transparent; box-shadow:none;
  color:var(--brand-dark); padding-left:0;
}
.mobile-offcanvas .accordion-button:not(.collapsed){
  color:var(--brand-blue); text-decoration:none;
}
.mobile-offcanvas .accordion-button::after{ filter: invert(0.4); }

/* Botón-acordeón que funciona como link (sin caret) */
.mobile-offcanvas .accordion-button.no-caret::after{ display:none; }
.mobile-offcanvas .accordion-button.no-caret{ cursor:pointer; }

/* Subopciones */
.mobile-offcanvas .sub-link{
  display:block; padding:.6rem 0 .6rem 1.6rem;
  text-decoration:none; color:var(--brand-dark);
  border-bottom:1px dashed #eef1f6;
}
.mobile-offcanvas .sub-link:last-child{ border-bottom:none; }
.mobile-offcanvas .sub-link:hover{ color:var(--brand-blue); text-decoration:none; }

.offcanvas-footer{ background:#fff; position:sticky; bottom:0; }

/* Alineación del acordeón del menú móvil */
#mobileMenuAcc{ padding-left:12%; }

/* Link auxiliar (por si se reutiliza) */
.mobile-link{
  display:flex; align-items:center; gap:.6rem;
  font-size:1.05rem; padding:.45rem 0 .45rem .25rem;
}

/* =========================
   LOGIN
   ========================= */
.login-wrap{ min-height: calc(100vh - 88px); } /* resta navbar aprox */
@media (max-width: 991.98px){ .login-wrap { min-height:auto; } }

.login-hero{
  position:relative; min-height:100%;
  background:#0b1220; overflow:hidden;
}
.login-hero .bg-img{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:brightness(.8);
}
.login-hero::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(102,131,255,.35), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6));
}
.login-hero .caption{ position:relative; z-index:2; color:#fff; }
.login-hero .caption .tag{
  display:inline-block; padding:.35rem .65rem; border-radius:999px;
  background: rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25);
  font-size:.8rem;
}

.login-card{
  height:100%; display:flex; align-items:center; justify-content:center;
  padding: clamp(1rem, 3vw, 2.5rem); background:#fff;
}
.login-card .inner{ width:100%; max-width:460px; }

.btn-google,.btn-apple,.btn-facebook{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.btn-google{ border-color:#dadce0; }
.btn-apple{ border-color:#cfd4dc; }
.btn-facebook{ border-color:#cfd4dc; }

.or-divider{ display:flex; align-items:center; gap:12px; margin:10px 0 2px; }
.or-divider .line{ flex:1; height:1px; background:#e6e8ef; }
.input-group .btn-toggle{ border-color:#dee2e6; }

/* =========================
   DASHBOARD / ESCRITORIO
   ========================= */
.dashboard-wrap{ min-height: calc(100vh - 88px); }

.sidebar{
  width:260px; border-right:1px solid #e6e8ef; background:#fff;
  position:sticky; top:72px; height:calc(100vh - 72px); padding:1rem;
}
.side-title{
  font-size:.8rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--brand-muted); margin:.5rem 0 .25rem;
}
.side-link{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .65rem; border-radius:.75rem; color:#0b1220;
  text-decoration:none; border:1px solid transparent;
}
.side-link i{ font-size:1rem; color:var(--brand-blue); }
.side-link:hover{
  background:#f7f8ff; border-color:#eef1ff; transform:translateX(1px);
}
.side-link.active{
  background:
    radial-gradient(400px 200px at 0% 0%, #eef1ff 0, transparent 70%),
    linear-gradient(0deg, #fff, #fff);
  border-color:#e5e9ff; box-shadow:0 6px 20px rgba(102,131,255,.08);
}

/* Offcanvas del sidebar en móvil */
.offcanvas-sidebar .side-link{ border-radius:.75rem; }
.offcanvas-sidebar .offcanvas-header{ border-bottom:1px solid #e6e8ef; }

/* Header interno del dashboard */
.dash-header{
  position:sticky; top:72px; z-index:10; background:#fff;
  border-bottom:1px solid #e6e8ef;
}
.btn-icon{
  position:relative; width:42px; height:42px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #e6e8ef; background:#fff;
}
.btn-icon:hover{ background:#f8f9ff; }
.notif-badge{
  position:absolute; top:2px; right:2px; font-size:.7rem;
  background:var(--brand-rose); color:#111;
}

/* Avisos / Elección de paquete */
.alert-choice{
  border:1px dashed #d8dcff; border-radius:var(--radius-xl);
  background: radial-gradient(700px 300px at 0% 0%, #eea083 0, transparent 60%), #ee9f83;
}

/* Tarjetas auxiliares dentro del dashboard */
.choice-card{
  border:1px solid #e6e8ef; border-radius:var(--radius-xl);
  background:#fff; height:100%;
}
.choice-card .head{
  padding:1rem; border-bottom:1px dashed #e6e8ef;
  background:linear-gradient(90deg, rgba(102,131,255,.08), rgba(240,160,128,.08));
}

.metric{
  padding:1rem; border:1px solid #e6e8ef; border-radius:var(--radius-xl); background:#fff;
}
.metric i{ color:var(--brand-blue); }

/* =========================
   WIZARD / PUBLICAR
   ========================= */
.stepper{ display:flex; gap:10px; align-items:center; }
.stepper .step{
  display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem;
  border:1px solid #e6e8ef; border-radius:999px; background:#fff; color:#334155;
}
.stepper .step.active{
  border-color:#d8dcff;
  background:radial-gradient(400px 200px at 0% 0%, #eef1ff 0, transparent 70%), #fff;
}
.stepper .num{
  width:24px; height:24px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand-blue); color:#fff; font-size:.8rem;
}

/* Galería / Previews */
.thumb-preview{
  position:relative; border:1px solid #e6e8ef; border-radius:.75rem; overflow:hidden;
}
.thumb-preview img{ width:100%; height:160px; object-fit:cover; display:block; }
.thumb-preview .rm{
  position:absolute; top:8px; right:8px; border-radius:999px; border:0;
  background:#fff; padding:.25rem .45rem;
}

/* Dropzone */
.dropzone{
  border:2px dashed #cdd3f9; background:#fafbff; border-radius:var(--radius-xl);
  padding:1.25rem; text-align:center; cursor:pointer;
}
.dropzone:hover{ background:#f5f7ff; }

.form-hint{ font-size:.85rem; color:#64748b; }

.fondo-azul{
  background: #6684ff; color:#fff;
}