/* ===== AUTH PAGE - 100% theme-driven (usa --acc, --acc2, --card, --text, --muted, --gradient) ===== */
.auth-page { min-height: 100vh; display: flex; flex-direction: column; }

/* ===== TOPBAR ===== */
.at-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 62px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  background: color-mix(in srgb, var(--topbar) 92%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--acc) 22%, transparent);
}
.at-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.at-logo-img { height: 38px; width: auto; object-fit: contain; border-radius: 8px; }
.at-logo-text {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900; color: #fff; flex-shrink: 0;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--acc) 35%, transparent);
}
.at-brand-name {
  font-family: var(--display-font);
  font-size: 18px; font-weight: 900; letter-spacing: -.015em;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.at-actions { display: flex; align-items: center; gap: 10px; }
.at-toggle, .at-sup-btn {
  display: flex; align-items: center; gap: 6px;
  background: color-mix(in srgb, var(--acc) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 28%, transparent);
  border-radius: 10px; color: var(--text);
  cursor: pointer; font-size: 14px; padding: 8px 14px;
  transition: background .2s, border-color .2s, transform .15s;
}
.at-toggle:hover, .at-sup-btn:hover {
  background: color-mix(in srgb, var(--acc) 22%, transparent);
  border-color: color-mix(in srgb, var(--acc) 50%, transparent);
  transform: translateY(-1px);
}
.at-toggle .ri-moon-line { display: none; }
.at-toggle .ri-sun-line { display: inline; }
body.light .at-toggle .ri-sun-line { display: none; }
body.light .at-toggle .ri-moon-line { display: inline; }

/* ===== MAIN LAYOUT ===== */
.at-main { flex:1; display:flex; padding-top:62px; min-height:100vh; box-sizing:border-box; }
.at-layout {
  flex:1; display:grid; grid-template-columns:1fr 1fr;
  max-width:1100px; margin:0 auto; width:100%;
  padding:52px 40px; gap:52px; align-items:center; box-sizing:border-box;
}
.at-form-col { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.at-promo-col { display:flex; align-items:center; justify-content:center; }

/* ===== ERROR BANNER ===== */
.ac-error {
  width:100%; max-width:450px; margin-bottom:16px;
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  border-radius:12px; color: var(--danger); font-size:14px;
  padding:12px 16px; display:flex; align-items:center; gap:8px; font-weight:700;
}

/* ===== AUTH CARD ===== */
.auth-card {
  width:100%; max-width:450px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border: 1px solid color-mix(in srgb, var(--acc) 25%, transparent);
  border-radius: var(--ui-radius, 22px);
  padding: 36px 34px;
  box-shadow: 0 16px 56px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--acc) 8%, transparent);
}
body.light .auth-card{
  background: var(--card);
  box-shadow: 0 16px 48px color-mix(in srgb, var(--acc) 14%, transparent), 0 0 0 1px color-mix(in srgb, var(--acc) 8%, transparent);
}

/* Brand: logo + store name */
.ac-brand {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:14px; margin-bottom:24px;
}
.ac-brand-img {
  height:72px; max-width:180px; width:auto; object-fit:contain; border-radius:14px;
  filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--acc) 35%, transparent));
}
.ac-brand-avatar {
  width:72px; height:72px; border-radius:18px;
  background: var(--gradient);
  display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:900; color:#fff;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--acc) 50%, transparent), inset 0 0 0 3px rgba(255,255,255,.18);
}
.ac-brand-name {
  font-family: var(--display-font);
  font-size: 22px; font-weight: 900; letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.ac-title {
  margin: 0 0 6px; font-size: 24px; font-weight: 900;
  color: var(--text); letter-spacing: -.02em;
}
.ac-sub {
  margin: 0 0 20px; font-size: 14px;
  color: color-mix(in srgb, var(--text) 70%, transparent);
  line-height: 1.5;
}

/* ===== SUCCESS BANNER ===== */
.ac-success {
  width:100%; max-width:450px; margin-bottom:16px;
  background: color-mix(in srgb, #10b981 16%, transparent);
  border: 1px solid color-mix(in srgb, #10b981 40%, transparent);
  border-radius:12px; color:#10b981; font-size:14px; font-weight:700;
  padding:12px 16px; display:flex; align-items:center; gap:8px;
}

/* ===== FEATURES LIST ===== */
.ac-features {
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:20px;
}
.ac-feat {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background: color-mix(in srgb, var(--acc) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 18%, transparent);
  border-radius:12px; padding:10px 8px; text-align:center; font-size:11px;
  color: color-mix(in srgb, var(--text) 75%, transparent); font-weight:700;
}
.ac-feat i { font-size:18px; color: var(--acc); }

/* ===== INFO BOX ===== */
.ac-info-box {
  display:flex; align-items:flex-start; gap:9px;
  background: color-mix(in srgb, var(--acc) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 28%, transparent);
  border-radius:12px; padding:12px 14px; margin-bottom:18px;
  font-size:13px; color: color-mix(in srgb, var(--text) 80%, transparent); line-height:1.5;
}
.ac-info-box i { font-size:16px; flex-shrink:0; color: var(--acc); margin-top:1px; }

/* ===== DIVIDER WITH TEXT ===== */
.ac-divider-text {
  display:flex; align-items:center; gap:12px;
  color: color-mix(in srgb, var(--text) 50%, transparent);
  font-size:11.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.1em; margin:18px 0;
}
.ac-divider-text::before,.ac-divider-text::after {
  content:""; flex:1; height:1px;
  background: color-mix(in srgb, var(--acc) 22%, transparent);
}

/* ===== FIELD HINT ===== */
.ac-field-hint {
  display:flex; align-items:center; gap:6px;
  font-size:12px; color: color-mix(in srgb, var(--text) 55%, transparent);
  margin:-6px 0 14px; line-height:1.5;
}
.ac-field-hint i { font-size:13px; flex-shrink:0; color: var(--acc); }

/* ===== FIELDS ===== */
.ac-field {
  display:flex; align-items:center;
  background: color-mix(in srgb, var(--acc) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 22%, transparent);
  border-radius:12px; margin-bottom:13px; overflow:hidden;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
body.light .ac-field { background: color-mix(in srgb, var(--acc) 4%, var(--card)); }
.ac-field:focus-within {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent);
}
.ac-field > i { font-size:16px; color: var(--acc); padding:0 12px; flex-shrink:0; }
.ac-field input {
  flex:1; background:none; border:none; outline:none;
  color: var(--text); font-size:15px; font-weight:600;
  padding:13px 10px 13px 0; width:100%; min-width:0;
}
.ac-field input::placeholder { color: color-mix(in srgb, var(--text) 45%, transparent); font-weight:500; }
.ac-eye {
  background:none; border:none; color: color-mix(in srgb, var(--text) 55%, transparent);
  cursor:pointer; padding:0 14px; font-size:16px; flex-shrink:0;
  transition: color .2s;
}
.ac-eye:hover { color: var(--acc); }
.ac-field.ac-wa { align-items:stretch; }
.ac-country {
  background:none; border:none;
  border-right: 1px solid color-mix(in srgb, var(--acc) 22%, transparent);
  color: var(--text); font-size:13px; padding:0 8px;
  outline:none; flex-shrink:0; cursor:pointer; appearance:none; -webkit-appearance:none;
  width:88px; min-width:88px; max-width:88px;
  text-overflow:ellipsis; overflow:hidden; white-space:nowrap; font-weight:600;
}
.ac-country option { background: var(--card); color: var(--text); }
.ac-field.ac-wa input[type="tel"] { flex:1 1 0; min-width:0; }
.ac-field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ac-field-row .ac-field { margin-bottom:13px; }

/* ===== LINKS ROW ===== */
.ac-links-row {
  display:flex; align-items:center; justify-content:space-between;
  margin:-4px 0 18px; gap:8px;
}
.ac-link { color: var(--acc); text-decoration:none; font-size:13px; font-weight:700; transition: color .2s; }
.ac-link:hover { color: var(--acc2); }
.ac-link.bold { font-weight:800; }

/* Inline support button */
.ac-sup-inline {
  display:inline-flex; align-items:center; gap:5px;
  background:none; border:none; cursor:pointer;
  color: var(--acc); font-size:13px; font-weight:700;
  transition: color .2s; padding:0;
}
.ac-sup-inline:hover { color: var(--acc2); }
.ac-sup-inline i { font-size:14px; }

.ac-alt {
  text-align:center; margin-top:18px; font-size:14px;
  color: color-mix(in srgb, var(--text) 65%, transparent);
}

/* ===== SUBMIT BUTTON ===== */
.ac-btn {
  width:100%; padding:14px; border:none; border-radius:12px;
  background: var(--gradient); color:#fff;
  font-size:15px; font-weight:800; cursor:pointer; letter-spacing:.01em;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition: opacity .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--acc) 40%, transparent);
}
.ac-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--acc) 50%, transparent);
}
.ac-btn:active { transform: translateY(0); }

/* ===== PROMO SLIDESHOW ===== */
.at-slideshow {
  width:100%; max-width:500px; position:relative;
  border-radius: var(--ui-radius, 24px); overflow:hidden;
  box-shadow: 0 16px 64px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--acc) 18%, transparent);
  min-height:440px; display:flex; flex-direction:column;
}
.at-slide {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:52px 44px; opacity:0; transform:scale(.97);
  transition:opacity .55s ease, transform .55s ease;
  pointer-events:none; min-height:440px; box-sizing:border-box; text-align:center;
}
.at-slide.active { opacity:1; transform:scale(1); pointer-events:auto; position:relative; }
.at-slide-overlay { position:absolute; inset:0; z-index:0; }
.at-slide-text { position:relative; z-index:1; }
.at-slide-text h3 { margin:0 0 12px; font-size:26px; font-weight:900; color:#fff; letter-spacing:-.02em; line-height:1.2; text-shadow:0 2px 20px rgba(0,0,0,.4); font-family: var(--display-font); }
.at-slide-text p { margin:0; font-size:15px; color:rgba(255,255,255,.92); line-height:1.65; text-shadow:0 1px 8px rgba(0,0,0,.3); font-weight:600; }
.at-dots { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:7px; z-index:10; }
.at-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); border:none; cursor:pointer; transition:background .2s, transform .2s; padding:0; }
.at-dot.active { background:#fff; transform:scale(1.4); }

/* ===== SUPPORT MODAL ===== */
.at-sup-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.72);
  backdrop-filter:blur(4px); z-index:1000;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.at-sup-overlay.open { display:flex; }
.at-sup-modal {
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
  border-radius: var(--ui-radius, 20px); width:100%; max-width:420px; overflow:hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.at-sup-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--acc) 18%, transparent);
}
.at-sup-hd h3 { margin:0; font-size:15px; font-weight:800; color: var(--text); display:flex; align-items:center; gap:8px; }
.at-sup-hd h3 i { color: var(--acc); }
.at-sup-x {
  background: color-mix(in srgb, var(--acc) 10%, transparent);
  border:none; color: var(--text);
  width:32px; height:32px; border-radius:9px; cursor:pointer; font-size:18px;
  display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.at-sup-x:hover { background: color-mix(in srgb, var(--acc) 22%, transparent); }
.at-sup-body { padding:18px 24px 24px; }
.at-sup-body p { margin:0 0 14px; color: color-mix(in srgb, var(--text) 72%, transparent); font-size:14px; font-weight:600; }
.sup-modal-link {
  display:flex; align-items:center; gap:12px; padding:13px 16px;
  background: color-mix(in srgb, var(--acc) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 22%, transparent);
  border-radius:12px; color: var(--text); text-decoration:none;
  font-size:14px; font-weight:700; margin-bottom:10px;
  transition: background .2s, border-color .2s, transform .15s;
  word-break:break-all;
}
.sup-modal-link:last-child { margin-bottom:0; }
.sup-modal-link:hover {
  background: color-mix(in srgb, var(--acc) 18%, transparent);
  border-color: color-mix(in srgb, var(--acc) 45%, transparent);
  transform: translateX(2px);
}
.sup-modal-link i { font-size:18px; color: var(--acc); flex-shrink:0; }

/* ===== RESPONSIVE ===== */
@media(max-width:880px){
  .at-layout { grid-template-columns:1fr; padding:24px 16px; gap:22px; }
  /* La promo card ya no se esconde en mobile — se muestra arriba más pequeña */
  .at-promo-col { display:flex; order: -1; }
  .at-slideshow { max-width:100%; height: 280px; border-radius: 22px; }
  .at-slide-text h3 { font-size: 22px; margin-bottom: 8px; }
  .at-slide-text p { font-size: 13px; }
  .at-topbar { padding: 0 16px; }
  .at-brand-name { font-size: 16px; }
  .at-toggle, .at-sup-btn { padding: 7px 11px; font-size: 13px; }
  .at-toggle span, .at-sup-btn span { display:none; }
  .auth-card { padding: 28px 22px; border-radius: 18px; }
}

/* ===== Texto del slide con gradiente (h3) ===== */
.at-slide-text { text-align: var(--promo-align, left); padding: 0 32px; }
@media(max-width:560px){ .at-slide-text { padding: 0 20px; } }
.at-slide-text h3 {
  background-image: var(--promo-grad-dark, linear-gradient(135deg,#a78bfa,#60a5fa));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
}
body.light .at-slide-text h3 {
  background-image: var(--promo-grad-light, linear-gradient(135deg,#2563eb,#7c3aed));
}
.promo-align-center .at-slide-text { text-align: center; }

/* ===== Botón Google y separador ===== */
.ac-google-wrap { margin-top: 14px; }
.ac-google-sep {
  position: relative; text-align: center; margin: 14px 0 12px;
  color: rgba(255,255,255,.45); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
}
body.light .ac-google-sep { color: rgba(15,23,42,.5); }
.ac-google-sep::before, .ac-google-sep::after {
  content: ""; position: absolute; top: 50%; height: 1px; width: calc(50% - 60px);
  background: rgba(255,255,255,.14);
}
body.light .ac-google-sep::before, body.light .ac-google-sep::after { background: rgba(15,23,42,.14); }
.ac-google-sep::before { left: 0; }
.ac-google-sep::after { right: 0; }
.ac-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 14px; border-radius: 12px;
  background: #fff; color: #1f2937; font-weight: 800; font-size: 14px;
  text-decoration: none; border: 1px solid rgba(0,0,0,.08);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.ac-google-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
body:not(.light) .ac-google-btn { background:#fff; }