/* ==================================================
   DAWS — Confirmaciones (OK / Estado) - Premium UI
   (prefijo daws- para evitar conflicto)
   ================================================== */

.daws-confirm-hero{
  min-height: calc(100vh - 120px); /* ayuda a que el footer no “suba” */
  display: flex;
  align-items: center;
  padding: 56px 0;
}

@media (max-width: 540px){
  .daws-confirm-hero{
    min-height: calc(100vh - 96px);
    padding: 32px 0;
  }
}

.daws-confirm-container{
  width: 100%;
}

.daws-confirm-card{
  background: var(--glass-bg);
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  position: relative;
}

.daws-confirm-card::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  background: radial-gradient(circle at 20% 20%, rgba(59,130,246,.25), transparent 45%),
              radial-gradient(circle at 80% 30%, rgba(225,29,72,.18), transparent 50%),
              radial-gradient(circle at 60% 85%, rgba(16,185,129,.16), transparent 55%);
  filter: blur(18px);
  opacity: .65;
  pointer-events: none;
}

.daws-confirm-top{
  position: relative;
  padding: 22px 22px 16px 22px;
  background: linear-gradient(135deg, rgba(59,130,246,.14), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.daws-confirm-titlewrap{ margin-top: 10px; }

.daws-confirm-title{
  margin: 0;
  font-size: 22px;
  letter-spacing: .2px;
}

.daws-confirm-subtitle{
  margin: 8px 0 0;
  color: var(--color-texto-suave);
  line-height: 1.6;
}

.daws-confirm-body{
  position: relative;
  padding: 18px 22px 22px;
}

.daws-confirm-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.daws-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  box-shadow: 0 0 18px rgba(255,255,255,.25);
}

.daws-badge-ok{
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.28);
  color: #A7F3D0;
}

.daws-badge-ok .daws-dot{
  background: #34D399;
  box-shadow: 0 0 18px rgba(52,211,153,.45);
}

.daws-badge-warn{
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.30);
  color: #FDE68A;
}

.daws-badge-warn .daws-dot{
  background: #F59E0B;
  box-shadow: 0 0 18px rgba(245,158,11,.45);
}

.daws-badge-neutral{
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.26);
  color: #BFDBFE;
}

.daws-badge-neutral .daws-dot{
  background: #60A5FA;
  box-shadow: 0 0 18px rgba(96,165,250,.45);
}

.daws-confirm-kpi{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 14px;
}

@media (max-width: 540px){
  .daws-confirm-kpi{
    grid-template-columns: 1fr;
  }
}

.daws-kpi-item{
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.daws-kpi-label{
  font-size: 12px;
  color: var(--color-texto-suave);
  margin-bottom: 6px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
}

.daws-kpi-value{
  font-size: 16px;
  font-weight: 900;
}

.daws-confirm-note{
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(10,16,31,.35);
  color: var(--color-texto-suave);
  line-height: 1.7;
}

.daws-confirm-actions{
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.daws-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 900;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.16);
  transition: transform .15s ease, opacity .15s ease;
}

.daws-btn:hover{
  transform: translateY(-1px);
  opacity: .95;
}

.daws-btn-primary{
  background: rgba(59,130,246,.92);
  color: #fff;
}

.daws-btn-ghost{
  background: rgba(255,255,255,.06);
  color: #fff;
}

@media (max-width: 540px){
  .daws-btn{
    width: 100%;
  }
}

.daws-confirm-foot{
  margin-top: 14px;
  font-size: 12px;
  color: var(--color-texto-suave);
  opacity: .9;
}

/* ===============================
   FIX: hero tapado por navbar
   =============================== */

/* Ajusta estas alturas si tu navbar cambia */
:root{
  --daws-nav-h-desktop: 82px;
  --daws-nav-h-mobile: 70px;
}

/* Empuja el hero hacia abajo para librar el navbar */
.daws-confirm-hero{
  /* Antes teníamos padding: 56px 0; ahora lo convertimos en padding-top inteligente */
  padding-top: calc(var(--daws-nav-h-desktop) + 18px);
  padding-bottom: 56px;

  /* min-height considerando navbar */
  min-height: calc(100vh - var(--daws-nav-h-desktop));
}

/* Mobile */
@media (max-width: 540px){
  .daws-confirm-hero{
    padding-top: calc(var(--daws-nav-h-mobile) + 14px);
    padding-bottom: 32px;
    min-height: calc(100vh - var(--daws-nav-h-mobile));
  }
}


/* =========================================
   DAWS WOW BUTTONS — Confirmaciones
   ========================================= */

.daws-actions-wow{
  display: flex;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* Base WOW */
.daws-btn-wow{
  position: relative;
  overflow: hidden;
  padding: 13px 18px;
  border-radius: 16px;
  font-weight: 900;
  letter-spacing: .3px;
  backdrop-filter: blur(6px);
  transition: 
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    opacity .18s ease;
}

/* Glow interno animado */
.daws-btn-wow::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 20% 20%,
    rgba(255,255,255,.22),
    transparent 55%
  );
  opacity: .45;
  transition: opacity .2s ease;
}

/* Shine al hover */
.daws-btn-wow::after{
  content: "";
  position: absolute;
  top: -120%;
  left: -60%;
  width: 60%;
  height: 260%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.35),
    transparent
  );
  transform: rotate(12deg);
  transition: all .6s ease;
  opacity: .0;
}

.daws-btn-wow:hover::after{
  left: 120%;
  opacity: .65;
}

.daws-btn-wow:hover{
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}

.daws-btn-wow:hover::before{
  opacity: .75;
}

/* =====================
   Botón GPS
   ===================== */
.daws-btn-gps{
  background: linear-gradient(
    135deg,
    rgba(59,130,246,.95),
    rgba(37,99,235,.85)
  );
  color: #fff;
  box-shadow: 0 10px 28px rgba(59,130,246,.35);
}

/* =====================
   Botón Inicio
   ===================== */
.daws-btn-home{
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 rgba(255,255,255,0);
}

/* =====================
   Botón WhatsApp
   ===================== */
.daws-btn-whatsapp{
  background: linear-gradient(
    135deg,
    rgba(34,197,94,.95),
    rgba(21,128,61,.85)
  );
  color: #fff;
  box-shadow: 0 10px 28px rgba(34,197,94,.35);
}

/* WhatsApp pulso sutil */
.daws-btn-whatsapp{
  animation: dawsPulse 3.2s ease-in-out infinite;
}

@keyframes dawsPulse{
  0%,100%{ box-shadow: 0 10px 28px rgba(34,197,94,.35); }
  50%{ box-shadow: 0 14px 38px rgba(34,197,94,.55); }
}

/* =====================
   Mobile
   ===================== */
@media (max-width: 540px){
  .daws-actions-wow{
    flex-direction: column;
  }

  .daws-btn-wow{
    width: 100%;
    text-align: center;
  }
}

/* Fix iconos Bootstrap en botones DAWS */
.daws-btn i.bi{
  font-size: 1.1rem;
  vertical-align: -0.15em;
}

/* ===============================
   FIX: WhatsApp button volando
   =============================== */

.daws-confirm-actions{
  align-items: center;
}

.daws-btn-whatsapp{
  position: static !important;
  transform: none !important;
  animation: none !important;
  margin: 0;
}

/* Mantiene el glow bonito sin volar */
.daws-btn-whatsapp:hover{
  transform: translateY(-1px) scale(1.01);
}

/* =========================================
   WhatsApp INLINE (confirmación)
   NO afecta al flotante global
   ========================================= */

.btn-whatsapp-inline{
  position: static !important;
  animation: none !important;
  transform: none !important;
  margin: 0;
}

.btn-whatsapp-inline:hover{
  transform: translateY(-1px) scale(1.01);
}


/* =========================================
   WhatsApp INLINE — icon centered & big
   ========================================= */

.btn-whatsapp-inline{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
}

/* Icono grande y limpio */
.btn-whatsapp-inline i.bi{
  font-size: 1.9rem;   /* 🔥 tamaño ideal */
  line-height: 1;
}

/* Hover fino */
.btn-whatsapp-inline:hover i.bi{
  transform: scale(1.06);
  transition: transform .18s ease;
}

/* =========================================
   Ajuste botones en desktop (refinar tamaño)
   ========================================= */

@media (min-width: 992px){
  .daws-btn-wow{
    padding: 11px 16px;      /* antes 13px 18px */
    font-size: 0.95rem;
    border-radius: 14px;
  }

  /* WhatsApp inline un poco más discreto */
  .btn-whatsapp-inline{
    min-height: 46px;        /* antes 52px */
  }

  .btn-whatsapp-inline i.bi{
    font-size: 1.6rem;      /* antes 1.9rem */
  }
}

/* =========================================
   Glow elegante contenedor confirmación
   ========================================= */

.daws-confirm-container{
  position: relative;
  overflow: visible !important;
}

/* Halo suave */
.daws-confirm-container::before{
  content: "";
  position: absolute;
  inset: -24px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 15% 20%, rgba(59,130,246,.18), transparent 45%),
    radial-gradient(circle at 85% 30%, rgba(16,185,129,.14), transparent 48%),
    radial-gradient(circle at 50% 85%, rgba(168,85,247,.12), transparent 55%);
  filter: blur(30px);
  opacity: .55;
  pointer-events: none;
  z-index: -1;
}

/* =========================================
   FIX: Glow visible (pegado al card)
   ========================================= */

.daws-confirm-card{
  position: relative; /* clave para el pseudo-elemento */
  z-index: 1;
}

.daws-confirm-card::after{
  content: "";
  position: absolute;
  inset: -18px;                 /* qué tan “grande” se ve el halo */
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 20%, rgba(59,130,246,.20), transparent 48%),
    radial-gradient(circle at 85% 30%, rgba(16,185,129,.16), transparent 52%),
    radial-gradient(circle at 55% 88%, rgba(168,85,247,.14), transparent 58%);
  filter: blur(26px);
  opacity: .75;
  pointer-events: none;
  z-index: -1;                  /* detrás del card */
}