/* ============================================================
   AZUL — Vista White Premium
============================================================ */

/* Beneficios */
.benefits-panel {
  margin-bottom: 16px;
  padding: 20px;
}

.section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.section-head-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.section-head-icon svg {
  width: 14px; height: 14px;
  fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.section-head-icon.blue { background: rgba(22,64,176,0.12); }
.section-head-icon.blue svg { stroke: var(--royal); }
.section-head-icon.teal { background: rgba(14,138,116,0.12); }
.section-head-icon.teal svg { stroke: var(--teal); }

.section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(22,64,176,0.06);
}

.benefit-item:last-child { border-bottom: none; padding-bottom: 0; }

.benefit-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}

.benefit-dot.blue  { background: linear-gradient(135deg, var(--royal), var(--azure)); }
.benefit-dot.teal  { background: linear-gradient(135deg, var(--teal), var(--vivid-teal)); }

.benefit-text {
  font-size: 13.5px;
  color: var(--dim);
  line-height: 1.45;
  font-weight: 400;
}

.benefit-highlight {
  font-weight: 700;
  color: var(--ink);
}

/* Gift panel */
.gift-panel {
  margin-bottom: 16px;
  padding: 20px;
}

.gift-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 14px;
}

.gift-counter {
  font-size: 11px;
  font-weight: 600;
  color: var(--vivid-teal);
  background: rgba(30,196,164,0.08);
  padding: 3px 10px;
  border-radius: 10px;
}

/* Slots */
.slot {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  border-radius: 16px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.20s ease;
  touch-action: manipulation;
}

.slot:last-child { margin-bottom: 0; }

.slot-empty {
  background: rgba(22,64,176,0.05);
  border: 1.5px dashed rgba(22,64,176,0.20);
}

.slot-empty:hover  { background: rgba(22,64,176,0.09); border-color: rgba(22,64,176,0.35); transform: translateX(3px); }
.slot-empty:active { transform: scale(0.98); }

.slot-pending {
  background: rgba(245,158,11,0.06);
  border: 1.5px solid rgba(245,158,11,0.20);
  cursor: default;
}

.slot-active {
  background: rgba(30,196,164,0.06);
  border: 1.5px solid rgba(30,196,164,0.20);
  cursor: default;
}

.slot-avatar {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.slot-avatar svg {
  width: 20px; height: 20px;
  fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.slot-avatar.empty   { background: rgba(22,64,176,0.10); }
.slot-avatar.empty svg { stroke: var(--royal); }
.slot-avatar.pending { background: rgba(245,158,11,0.12); }
.slot-avatar.pending svg { stroke: #F59E0B; }
.slot-avatar.done    { background: rgba(30,196,164,0.12); }
.slot-avatar.done svg { stroke: var(--vivid-teal); }

.slot-info { flex: 1; min-width: 0; }

.slot-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slot-empty .slot-name { color: var(--royal); font-weight: 500; }

.slot-sub {
  font-size: 11.5px;
  color: var(--slate);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slot-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}

.slot-pill.pending { background: rgba(245,158,11,0.12); color: #92620A; }
.slot-pill.active  { background: rgba(30,196,164,0.12); color: var(--deep-teal); }

.slot-arrow { color: var(--silver); flex-shrink: 0; }

/* ── Desktop: layout split ── */
@media (min-width: 1024px) {
  #v-azul.active {
    grid-template-columns: 55% 45%;
  }

  .azul-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px 40px;
    border-right: 1px solid rgba(45,204,211,0.12);
    background: linear-gradient(160deg, rgba(0,84,121,0.04), rgba(45,204,211,0.02));
    min-height: calc(100dvh - 84px);
  }

  .azul-left > * {
    width: 100%;
    max-width: 480px;
  }

  .azul-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 48px 40px;
    overflow-y: auto;
    min-height: calc(100dvh - 84px);
  }

  .azul-right > * {
    max-width: 440px;
    width: 100%;
  }

  .azul-right .welcome-panel {
    order: -1;
  }
}