/* Shared brand controls: social icons, Google account, auth prompt, proposal wizard. */

.brand-svg {
  width: 22px;
  height: 22px;
  display: block;
  flex: 0 0 auto;
}

.brand-svg--google { width: 19px; height: 19px; }

/* Social channels */
.v2-social-dock {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding-top: 20px;
}

.v2-social-link {
  min-height: 68px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  color: rgba(248,245,255,.86);
  text-decoration: none;
  background: rgba(255,255,255,.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.v2-social-link:hover,
.v2-social-link:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand-color) 48%, rgba(255,255,255,.12));
  background: color-mix(in srgb, var(--brand-color) 10%, rgba(255,255,255,.025));
  box-shadow: 0 18px 42px color-mix(in srgb, var(--brand-color) 18%, transparent);
}

.v2-social-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: var(--brand-surface, var(--brand-color));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-color) 24%, transparent), inset 0 1px 0 rgba(255,255,255,.18);
}

.v2-social-icon .brand-svg { width: 20px; height: 20px; }
.v2-social-copy { min-width: 0; display: grid; gap: 2px; text-align: left; }
.v2-social-copy strong { color: #fff; font-size: .76rem; font-weight: 720; }
.v2-social-copy small { overflow: hidden; color: rgba(235,229,247,.48); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }

.social-instagram {
  --brand-color: #d62976;
  --brand-surface: radial-gradient(circle at 30% 110%, #feda75 0 20%, #fa7e1e 35%, #d62976 58%, #962fbf 78%, #4f5bd5 100%);
}
.social-facebook { --brand-color: #1877f2; --brand-surface: #1877f2; }
.social-x { --brand-color: #f4f4f4; --brand-surface: #080808; }
.social-whatsapp { --brand-color: #25d366; --brand-surface: #25d366; }

.wa-fab {
  min-height: 52px !important;
  padding: 0 17px 0 9px !important;
  gap: 10px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: linear-gradient(145deg, #2ee776, #18b956) !important;
  box-shadow: 0 16px 42px rgba(37,211,102,.30), inset 0 1px 0 rgba(255,255,255,.30) !important;
}

.wa-fab .wa-icon {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.16) !important;
}
.wa-fab .wa-icon::before,
.wa-fab .wa-icon::after { display: none !important; }
.wa-fab .wa-icon .brand-svg { width: 21px; height: 21px; color: #fff; }
.wa-fab:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 20px 54px rgba(37,211,102,.40), inset 0 1px 0 rgba(255,255,255,.36) !important; }

/* Topbar account */
.v2-topbar .profile-trigger {
  width: auto;
  min-width: 48px;
  height: 46px;
  padding: 0 10px 0 7px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 15px;
}

.v2-topbar .profile-avatar {
  position: relative;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  overflow: hidden;
  border: 1px solid rgba(199,181,255,.18);
  border-radius: 50%;
  background: #0b0912 center/cover no-repeat;
  box-shadow: 0 8px 22px rgba(0,0,0,.30), inset 0 0 0 1px rgba(4,3,8,.76);
}

.profile-avatar-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.profile-avatar.has-photo .profile-avatar-fallback { opacity: 0; }
.v2-topbar .profile-avatar.has-photo {
  border-color: rgba(184,164,246,.28);
  border-radius: 50%;
  background-color: #08060e;
  background-size: cover;
  background-position: 50% 50%;
  box-shadow: 0 8px 24px rgba(0,0,0,.34), inset 0 0 0 2px rgba(5,4,9,.88);
}
.profile-status-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border: 2px solid #0a0811;
  border-radius: 50%;
  background: #25d366;
  opacity: 0;
}
html.is-authenticated .profile-status-dot { opacity: 1; }

.v2-topbar .profile-label {
  position: static;
  width: auto;
  height: auto;
  max-width: 104px;
  overflow: hidden;
  clip: auto;
  color: rgba(248,245,255,.82);
  font-size: .72rem;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-chevron { width: 13px; height: 13px; color: rgba(241,235,255,.38); transition: transform 180ms ease; }
.profile-trigger[aria-expanded="true"] .profile-chevron { transform: rotate(180deg); }

.v2-topbar #profileDropdown { padding: 20px; }
.v2-topbar .profile-kicker { margin: 0 0 8px !important; color: #aa8fff !important; font-size: .62rem !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.v2-topbar .profile-section h3 { margin: 0; color: #fff; font-family: Manrope, Inter, sans-serif; font-size: 1.2rem; line-height: 1.2; letter-spacing: -.025em; }
.v2-topbar .profile-section h3 + p { margin-top: 9px; }
.v2-topbar .profile-actions { display: grid; gap: 8px; }

.google-auth-button {
  width: 100%;
  min-height: 48px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  color: #17151b;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.75);
  font: inherit;
  font-size: .78rem;
  font-weight: 720;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.google-auth-button:hover,
.google-auth-button:focus-visible { transform: translateY(-1px); background: #f7f7f7; box-shadow: 0 16px 38px rgba(0,0,0,.30); }
.profile-security-note { margin: 12px 0 0 !important; display: flex; gap: 7px; color: rgba(228,220,244,.44) !important; font-size: .68rem !important; }

/* Auth prompt */
#authPromptDialog {
  width: min(460px, calc(100vw - 28px));
  padding: 0;
  border: 0;
  border-radius: 28px;
  color: #f9f7ff;
  background: transparent;
  overflow: visible;
}
#authPromptDialog::backdrop { background: rgba(2,1,5,.78); backdrop-filter: blur(14px); }
.auth-prompt-card {
  position: relative;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 0%, rgba(174,140,255,.22), transparent 36%),
    linear-gradient(155deg, rgba(21,17,35,.98), rgba(8,7,14,.98));
  box-shadow: 0 40px 120px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.08);
}
.auth-prompt-close { position: absolute; top: 15px; right: 15px; width: 38px; height: 38px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.09); border-radius:12px; color:rgba(255,255,255,.68); background:rgba(255,255,255,.035); cursor:pointer; }
.auth-prompt-icon { width: 54px; height: 54px; margin-bottom: 22px; display:grid; place-items:center; border-radius:17px; background:#fff; box-shadow:0 18px 38px rgba(0,0,0,.24); }
.auth-prompt-card h2 { margin: 0; font-family: Manrope, Inter, sans-serif; font-size: clamp(1.7rem, 4vw, 2.25rem); line-height: 1.05; letter-spacing: -.04em; }
.auth-prompt-card > p { margin: 14px 0 24px; color: rgba(235,229,247,.64); line-height: 1.65; }
.auth-prompt-benefits { margin: 0 0 24px; padding: 0; display:grid; gap: 10px; list-style:none; }
.auth-prompt-benefits li { display:flex; align-items:center; gap:10px; color:rgba(244,240,253,.76); font-size:.78rem; }
.auth-prompt-benefits li::before { content:""; width:7px; height:7px; border-radius:50%; background:#a988ff; box-shadow:0 0 16px rgba(169,136,255,.56); }
.auth-prompt-error { min-height: 18px; margin: 12px 0 0 !important; color: #ff9eb0 !important; font-size: .72rem !important; }

/* Proposal dialog */
#cotizador {
  width: min(1100px, calc(100vw - 24px));
  max-height: min(860px, calc(100dvh - 20px));
  padding: 0;
  border: 0;
  border-radius: 30px;
  color: #f8f5ff;
  background: transparent;
  overflow: hidden;
}
#cotizador::backdrop { background: rgba(2,1,5,.82); backdrop-filter: blur(15px) saturate(1.08); }
#cotizador .cotizador {
  min-height: min(720px, calc(100dvh - 20px));
  height: min(760px, calc(100dvh - 20px));
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.75fr);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(17,14,28,.99), rgba(7,6,12,.99));
  box-shadow: 0 44px 140px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.06);
}
.proposal-aside {
  position: relative;
  padding: 34px 28px;
  overflow: hidden;
  border-right: 1px solid rgba(255,255,255,.075);
  background:
    radial-gradient(circle at 25% 8%, rgba(171,134,255,.24), transparent 38%),
    linear-gradient(180deg, rgba(27,21,46,.84), rgba(10,8,17,.78));
}
.proposal-aside::after { content:""; position:absolute; left:-40%; bottom:-24%; width:120%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(125,91,232,.18),transparent 67%); filter:blur(26px); }
.proposal-aside > * { position: relative; z-index: 1; }
.proposal-mark { width: 46px; height: 46px; margin-bottom: 26px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(186,158,255,.30)); }
.proposal-aside .modal-kicker { margin:0 0 11px; color:#b99bff; font-size:.64rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.proposal-aside h3 { margin:0; font-family:Manrope,Inter,sans-serif; font-size:clamp(1.7rem,3vw,2.35rem); line-height:1.05; letter-spacing:-.04em; }
.proposal-aside > p:not(.modal-kicker) { margin:14px 0 0; color:rgba(235,229,247,.60); font-size:.84rem; line-height:1.65; }
.proposal-timeline { margin: 34px 0 0; padding:0; display:grid; gap:8px; list-style:none; }
.proposal-timeline li { position:relative; min-height:52px; padding:11px 12px 11px 45px; display:grid; align-content:center; gap:2px; border:1px solid transparent; border-radius:15px; color:rgba(230,224,243,.42); transition:background 220ms ease,border-color 220ms ease,color 220ms ease; }
.proposal-timeline li::before { content:attr(data-index); position:absolute; left:12px; top:50%; width:23px; height:23px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.09); border-radius:8px; transform:translateY(-50%); font-size:.61rem; font-weight:800; }
.proposal-timeline li strong { font-size:.74rem; font-weight:720; }
.proposal-timeline li small { font-size:.62rem; color:inherit; opacity:.7; }
.proposal-timeline li.is-active { color:#fff; border-color:rgba(185,154,255,.22); background:rgba(158,119,244,.10); }
.proposal-timeline li.is-complete { color:rgba(231,223,248,.72); }
.proposal-timeline li.is-complete::before { color:#0c0912; border-color:transparent; background:#ae8aff; }
.proposal-aside-note { margin-top:28px; padding-top:20px; border-top:1px solid rgba(255,255,255,.075); display:grid; gap:8px; }
.proposal-aside-note span { color:rgba(235,229,247,.44); font-size:.68rem; }
.proposal-aside-note strong { color:rgba(252,249,255,.84); font-size:.78rem; font-weight:650; }

.proposal-workspace { min-width:0; display:flex; flex-direction:column; height:100%; min-height:0; max-height:none; }
.proposal-workspace-header { position:sticky; top:0; z-index:2; min-height:82px; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid rgba(255,255,255,.07); background:linear-gradient(180deg, rgba(14,11,22,.96), rgba(12,9,18,.92)); backdrop-filter:blur(16px) saturate(1.06); }
.proposal-workspace-title { display:grid; gap:4px; }
.proposal-workspace-title strong { color:#fff; font-size:.88rem; font-weight:720; }
.proposal-workspace-title span { color:rgba(231,224,245,.46); font-size:.68rem; }
#cotizador .icon-btn { position:static; width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.09); border-radius:13px; color:rgba(255,255,255,.70); background:rgba(255,255,255,.03); cursor:pointer; }
.proposal-step-content { flex:1; min-height:0; padding:30px 34px 28px; overflow:auto; }
#cotizador .wizard-step-label { margin:0 0 18px; color:#aa8bff; font-size:.66rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
#cotizador .steps { min-height: min(420px, 100%); }
#cotizador .step { display:none; }
#cotizador .step.active { display:block; animation:proposal-step-in 380ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes proposal-step-in { from{opacity:0;transform:translateY(14px);filter:blur(4px)} to{opacity:1;transform:none;filter:none} }
#cotizador .step h4 { margin:0; color:#fff; font-family:Manrope,Inter,sans-serif; font-size:clamp(1.65rem,3vw,2.45rem); line-height:1.1; letter-spacing:-.04em; max-width:15ch; }
#cotizador .field-hint { margin:10px 0 22px; color:rgba(231,224,245,.54); font-size:.79rem; line-height:1.65; max-width:65ch; }
#cotizador .options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#cotizador .option { position:relative; min-height:78px; display:block; }
#cotizador .option input { position:absolute; opacity:0; pointer-events:none; }
#cotizador .option span { height:100%; padding:16px 18px; display:flex; align-items:center; border:1px solid rgba(255,255,255,.08); border-radius:18px; color:rgba(246,242,253,.72); background:rgba(255,255,255,.018); font-size:.8rem; font-weight:640; line-height:1.38; cursor:pointer; transition:border-color 180ms ease,background 180ms ease,color 180ms ease,transform 180ms ease, box-shadow 180ms ease; }
#cotizador .option span::before { content:""; width:17px; height:17px; margin-right:11px; flex:0 0 17px; border:1px solid rgba(255,255,255,.18); border-radius:6px; box-shadow:inset 0 0 0 4px transparent; }
#cotizador .option input:checked + span { color:#fff; border-color:rgba(185,151,255,.38); background:linear-gradient(180deg, rgba(145,106,232,.18), rgba(145,106,232,.10)); box-shadow:0 14px 34px rgba(78,55,140,.16), inset 0 1px 0 rgba(255,255,255,.05); transform:translateY(-1px); }
#cotizador .option input:checked + span::before { border-color:#b795ff; background:#b795ff; box-shadow:inset 0 0 0 4px #171020; }
#cotizador select,
#cotizador input:not([type="checkbox"]):not([type="range"]),
#cotizador textarea { width:100%; min-height:54px; padding:0 16px; border:1px solid rgba(255,255,255,.09); border-radius:15px; color:#fff; background:rgba(255,255,255,.025); font:inherit; font-size:.84rem; outline:none; transition:border-color 180ms ease,background 180ms ease,box-shadow 180ms ease; }
#cotizador textarea { min-height:118px; padding:15px 16px; resize:vertical; }
#cotizador select:focus,
#cotizador input:focus,
#cotizador textarea:focus { border-color:rgba(183,149,255,.48); background:rgba(255,255,255,.04); box-shadow:0 0 0 4px rgba(151,114,236,.08); }
#cotizador select {
  appearance:none;
  -webkit-appearance:none;
  padding-right:48px;
  cursor:pointer;
  color-scheme:dark;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23EDE5FF' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;
  background-size:auto,16px 16px;
  background-position:0 0,right 16px center;
}
#cotizador select option,
#cotizador select optgroup {
  color:#f7f2ff;
  background:#120d1f;
}
#cotizador select::-ms-expand { display:none; }
#cotizador .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
#cotizador label:not(.option) { display:grid; gap:8px; color:rgba(239,234,249,.64); font-size:.7rem; font-weight:650; }
#cotizador .range-wrap { margin-top:30px; padding:28px; border:1px solid rgba(255,255,255,.08); border-radius:22px; background:rgba(255,255,255,.02); }
#cotizador input[type="range"] { width:100%; accent-color:#a77dff; }
#cotizador output { margin-top:20px; display:block; color:#fff; font-family:Manrope,Inter,sans-serif; font-size:clamp(2.6rem,6vw,4.8rem); font-weight:600; letter-spacing:-.06em; text-align:center; }
.proposal-account-state { margin:20px 0 0; padding:12px 14px; display:flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.075); border-radius:14px; color:rgba(239,234,249,.58); background:rgba(255,255,255,.018); font-size:.72rem; }
.proposal-account-state .brand-svg { width:18px; height:18px; }
#cotizador .wizard-feedback { min-height:21px; margin:16px 0 0; color:rgba(232,225,246,.62); font-size:.72rem; }
#cotizador .wizard-feedback.is-error { color:#ff9bab; }
#cotizador .wizard-feedback.is-success { color:#75eaa3; }
.proposal-workspace-footer { position:sticky; bottom:0; z-index:2; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-top:1px solid rgba(255,255,255,.07); background:linear-gradient(180deg, rgba(12,9,18,.88), rgba(8,6,13,.96)); backdrop-filter:blur(16px) saturate(1.04); }
#cotizador .wizard-actions { margin:0; display:flex; align-items:center; gap:8px; }
#cotizador .wizard-actions .btn { min-height:45px; padding:0 17px; border-radius:13px; font-size:.74rem; font-weight:720; }
#cotizador .foot-note { max-width:340px; margin:0; color:rgba(228,221,241,.36); font-size:.62rem; line-height:1.45; text-align:right; }
#cotizador .readonly-field { color:rgba(248,245,255,.72); background:rgba(255,255,255,.018); }

@media (max-width: 860px) {
  .v2-social-dock { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .v2-topbar .profile-label { display:none; }
  .v2-topbar .profile-trigger { padding:0 6px; }
  .profile-chevron { display:none; }
  #cotizador .cotizador { grid-template-columns:1fr; }
  .proposal-aside { display:none; }
}

@media (max-width: 620px) {
  .v2-social-dock { grid-template-columns:1fr; }
  #cotizador { max-height:calc(100dvh - 12px); width:calc(100vw - 12px); border-radius:22px; }
  #cotizador .cotizador { min-height:calc(100dvh - 12px); height:calc(100dvh - 12px); }
  .proposal-workspace { max-height:none; }
  .proposal-workspace-header { min-height:70px; padding:14px 16px; }
  .proposal-step-content { padding:22px 17px 20px; }
  #cotizador .steps { min-height:360px; }
  #cotizador .options { grid-template-columns:1fr; }
  #cotizador .option { min-height:62px; }
  #cotizador .form-grid { grid-template-columns:1fr; }
  .proposal-workspace-footer { padding:12px 14px; flex-direction:column-reverse; align-items:stretch; }
  #cotizador .wizard-actions { justify-content:space-between; }
  #cotizador .foot-note { max-width:none; text-align:left; }
}


@media (max-width: 820px), (pointer: coarse) {
  #cotizador::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .proposal-workspace-header,
  .proposal-workspace-footer { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* WhatsApp FAB color lock: prevents WebKit/low-power compositing from flattening the green surface. */
html body.v2-home a.wa-fab,
html body.v2-home a.wa-fab:link,
html body.v2-home a.wa-fab:visited,
html body.v2-home a.wa-fab:hover,
html body.v2-home a.wa-fab:active,
html body.v2-home a.wa-fab:focus-visible {
  color: #ffffff !important;
  background-color: #25d366 !important;
  background-image: linear-gradient(145deg, #31e97a 0%, #25d366 48%, #16b653 100%) !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 16px 42px rgba(37,211,102,.34),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
}

html body.v2-home a.wa-fab .wa-icon {
  color: #ffffff !important;
  background: rgba(255,255,255,.17) !important;
}

@media (max-width: 820px), (pointer: coarse) {
  html body.v2-home a.wa-fab {
    background-color: #25d366 !important;
    background-image: linear-gradient(145deg, #32e87a, #20c760 58%, #16ad4f) !important;
    border-color: rgba(255,255,255,.26) !important;
    box-shadow:
      0 12px 30px rgba(37,211,102,.40),
      0 0 0 1px rgba(37,211,102,.15),
      inset 0 1px 0 rgba(255,255,255,.38) !important;
  }
}

/* v1.11: crop Google avatars slightly inward to remove source-image white rims. */
.v2-topbar .profile-avatar.has-photo,
.v2-topbar .profile-photo.has-photo {
  background-color: #08060e;
  background-size: 112%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  border-radius: 50%;
  border-color: rgba(184,164,246,.26);
  box-shadow: 0 8px 24px rgba(0,0,0,.34), inset 0 0 0 2px rgba(5,4,9,.90);
}