/* ══════════════════════════════════════════════
   ui.css — Interfaz siempre visible:
   topbar, streak card, water button, stats,
   toast, welcome screen y botones base.
   Overlays y modals → admin.css
   ══════════════════════════════════════════════ */

/* ── Loading overlay (sincronización de login) ── */
#loading-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(255,249,229,.96);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity .3s ease;
}
#loading-overlay.visible { display: flex; }
#loading-overlay.fading  { opacity: 0; pointer-events: none; }
.lo-sunflower {
  font-size: 3.2rem;
  animation: lo-pulse 1.3s ease-in-out infinite;
  will-change: transform;
}
@keyframes lo-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%       { transform: scale(1.18); opacity: .72; }
}
.lo-spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(244,160,28,.22);
  border-top-color: #F4A01C;
  border-radius: 50%;
  animation: lo-spin .75s linear infinite;
  will-change: transform;
}
@keyframes lo-spin {
  to { transform: rotate(360deg); }
}
.lo-text {
  font-family: 'Lato', sans-serif;
  font-size: .9rem;
  color: #9A7A5A;
  letter-spacing: .04em;
}
/* ── Botón Reintentar (aparece tras 5s de espera) ── */
#loading-retry-btn {
  display: none;
  margin-top: 8px;
  background: rgba(244,160,28,.12);
  border: 1px solid rgba(244,160,28,.4);
  border-radius: 50px;
  color: #9A7A5A;
  font-family: 'Lato', sans-serif;
  font-size: .84rem;
  padding: 9px 22px;
  cursor: pointer;
  transition: background .15s;
}
#loading-retry-btn.visible { display: block; }
#loading-retry-btn:active  { background: rgba(244,160,28,.25); }

/* ── Skeleton Screen (jardín en carga) ── */
#garden-skeleton {
  display: none;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(6px, 2vw, 14px);
  padding-bottom: 8px;
  pointer-events: none;
  z-index: 5;
}
#garden-skeleton.visible { display: flex; }
.sk-flower {
  width: clamp(18px, 3.5vw, 30px);
  background: rgba(255,255,255,.22);
  border-radius: 10px 10px 3px 3px;
  animation: sk-pulse 1.4s ease-in-out infinite;
}
.sk-flower:nth-child(1) { height: 70px; animation-delay: 0s; }
.sk-flower:nth-child(2) { height: 45px; animation-delay: .18s; }
.sk-flower:nth-child(3) { height: 85px; animation-delay: .36s; }
.sk-flower:nth-child(4) { height: 55px; animation-delay: .12s; }
.sk-flower:nth-child(5) { height: 75px; animation-delay: .28s; }
.sk-flower:nth-child(6) { height: 40px; animation-delay: .44s; }
.sk-flower:nth-child(7) { height: 65px; animation-delay: .08s; }
@keyframes sk-pulse {
  0%, 100% { opacity: .35; }
  50%       { opacity: .75; }
}

/* ── Layout principal ── */
#ui {
  position:relative; z-index:10; height:100vh;
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(10px,3vh,24px) clamp(12px,4vw,24px);
  padding-bottom:calc(clamp(10px,3vh,24px) + var(--safe-b));
  pointer-events:none; overflow:hidden;
}

/* ── Topbar ── */
#topbar {
  width:100%; max-width:600px;
  display:flex; justify-content:space-between; align-items:center;
  pointer-events:all; flex-shrink:0;
}
#logo {
  font-family:'Playfair Display',serif;
  font-size:clamp(1rem,4.5vw,1.55rem);
  color:var(--text-dark);
  text-shadow:0 1px 4px rgba(255,255,255,.7);
}
.is-night #logo { color:var(--text-light) }
#topbar-buttons { display:flex; gap:6px }

/* ── Ghost button ── */
.btn-ghost {
  pointer-events:all; background:var(--card-bg); border:1px solid var(--card-border);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--text-dark); padding:8px 13px; border-radius:50px;
  font-family:'Lato',sans-serif; font-size:clamp(10px,2.5vw,12px);
  cursor:pointer; transition:all .15s;
}
.is-night .btn-ghost { color:var(--text-light) }
.btn-ghost:active { transform:scale(.95); background:rgba(255,255,255,.4) }

/* ── View banner (jardín ajeno) ── */
#view-banner {
  pointer-events:all; display:none;
  background:rgba(255,152,0,.18); border:1px solid rgba(255,152,0,.4);
  backdrop-filter:blur(8px); border-radius:14px;
  padding:7px 14px; margin-top:7px;
  font-size:clamp(11px,2.8vw,12px); color:#5C3A00; text-align:center;
  width:100%; max-width:380px; line-height:1.5; flex-shrink:0;
}
.is-night #view-banner { color:#FFD095 }
#view-banner.visible { display:block }
#view-banner a { color:var(--accent); text-decoration:none; font-weight:700 }

/* ── Streak card ── */
#streak-card {
  pointer-events:all;
  margin-top:clamp(8px,2vh,18px);
  background:var(--card-bg); border:1px solid var(--card-border);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-radius:22px;
  padding:clamp(11px,2.5vw,20px) clamp(16px,5vw,36px);
  text-align:center; width:100%; max-width:400px; flex-shrink:0;
  box-shadow:0 4px 28px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.4);
}
#gardener-name-row {
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-bottom:4px;
}
#gardener-name-display {
  font-family:'Lato',sans-serif; font-size:.82rem; color:#9A7A5A;
  letter-spacing:.3px;
}
.is-night #gardener-name-display { color:#B0A090 }
#edit-name-btn {
  background:none; border:none; font-size:.82rem; cursor:pointer;
  opacity:.55; padding:2px 4px; line-height:1; transition:opacity .15s;
}
#edit-name-btn:active { opacity:1 }
#streak-number {
  font-family:'Playfair Display',serif;
  font-size:clamp(2.6rem,13vw,5rem);
  color:var(--accent); line-height:1;
  text-shadow:0 2px 16px rgba(244,160,28,.45);
}
#streak-label {
  font-size:clamp(.62rem,2.4vw,.8rem); color:var(--text-dark);
  letter-spacing:3px; text-transform:uppercase; margin-top:2px; opacity:.6;
}
.is-night #streak-label { color:var(--text-light) }
#daily-message {
  margin-top:9px; font-family:'Playfair Display',serif; font-style:italic;
  font-size:clamp(.76rem,3vw,.92rem); color:var(--text-dark);
  line-height:1.6; opacity:.85;
}
.is-night #daily-message { color:var(--text-light) }

/* ── Water button ── */
#water-btn {
  pointer-events:all;
  margin-top:clamp(7px,1.8vh,14px);
  background:linear-gradient(135deg,#4FC3F7,#0277BD);
  border:none; border-radius:50px; color:#fff;
  font-family:'Playfair Display',serif;
  font-size:clamp(.88rem,3.8vw,1.05rem);
  padding:clamp(13px,3.2vw,15px) clamp(26px,7vw,40px);
  cursor:pointer; transition:all .18s;
  box-shadow:0 4px 20px rgba(2,119,189,.4);
  width:100%; max-width:290px; flex-shrink:0;
}
#water-btn:active:not(:disabled) { transform:scale(.96); box-shadow:0 2px 8px rgba(2,119,189,.3) }
#water-btn:disabled { background:linear-gradient(135deg,#B0BEC5,#90A4AE); box-shadow:none; opacity:.72 }

/* ── Stats bar ── */
#stats-bar {
  pointer-events:all; display:flex; gap:7px;
  margin-top:clamp(6px,1.4vh,10px);
  flex-wrap:nowrap; justify-content:center; flex-shrink:0;
}
.stat-pill {
  background:var(--card-bg); border:1px solid var(--card-border);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:5px 12px; border-radius:50px;
  font-size:clamp(10px,2.4vw,12px); color:var(--text-dark); white-space:nowrap;
}
.is-night .stat-pill { color:var(--text-light) }

/* ── Droplet animation (al regar) ── */
@keyframes droplet {
  0%   { transform:translateY(0) scale(1); opacity:1 }
  100% { transform:translateY(80px) scale(.15); opacity:0 }
}
.drop { position:fixed; pointer-events:none; font-size:1.4rem; animation:droplet .9s ease-in forwards; z-index:9998 }

/* ── Archive button ── */
#archive-btn {
  pointer-events:all;
  background:var(--card-bg); border:1px solid var(--card-border);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--text-dark); padding:7px 13px; border-radius:50px;
  font-family:'Lato',sans-serif; font-size:clamp(10px,2.5vw,12px);
  cursor:pointer; transition:all .15s; margin-top:6px;
}
.is-night #archive-btn { color:var(--text-light) }
#archive-btn:active { transform:scale(.95); background:rgba(255,255,255,.4) }

/* ── Profile button ── */
#profile-btn {
  background:rgba(244,160,28,.1);
  border:1px solid rgba(244,160,28,.25);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  gap:5px; padding:5px 14px 5px 10px; border-radius:50px;
  transition:all .15s; color:inherit; pointer-events:all;
}
#profile-btn:active { background:rgba(244,160,28,.22); transform:scale(.97) }
#profile-btn::before { content:'👤'; font-size:.78rem }
#gardener-name-display {
  font-family:'Lato',sans-serif; font-size:.82rem; color:#8B5E1A; font-weight:600;
}
.is-night #gardener-name-display { color:#FFD090 }
.is-night #profile-btn { background:rgba(244,160,28,.12); border-color:rgba(244,160,28,.2) }
#profile-btn-arrow { font-size:.8rem; color:#C4973A; font-weight:700; transition:transform .15s }
#profile-btn:active #profile-btn-arrow { transform:translateX(2px) }

/* ── Botones primarios ── */
.btn-primary { background:linear-gradient(135deg,#F4A01C,#E8890A); border:none; border-radius:50px; color:#fff; font-family:'Lato',sans-serif; font-weight:700; font-size:.88rem; padding:11px 22px; cursor:pointer; box-shadow:0 4px 14px rgba(244,160,28,.4) }
.btn-primary:active { transform:scale(.97) }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px }

/* ══════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════ */
#toast {
  position:fixed; bottom:calc(22px + var(--safe-b)); left:50%;
  transform:translateX(-50%) translateY(100px);
  background:rgba(18,8,2,.92); color:#FFF9E6;
  padding:11px 20px; border-radius:50px; font-size:.84rem;
  z-index:9990; transition:transform .38s cubic-bezier(.34,1.56,.64,1);
  backdrop-filter:blur(8px); pointer-events:none;
  white-space:nowrap; max-width:88vw; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}
#toast.show { transform:translateX(-50%) translateY(0) }

/* ══════════════════════════════════════════════
   WELCOME SCREEN
   ══════════════════════════════════════════════ */
#welcome-overlay {
  position:fixed; inset:0; z-index:500;
  background:linear-gradient(160deg,#FFFEF0,#FFF0C0 50%,#FFE8A0);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(24px,6vw,48px) clamp(20px,6vw,36px); text-align:center;
  transition:opacity .8s ease; overflow:hidden;
}
#welcome-overlay::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 80%,rgba(244,160,28,.13) 0%,transparent 70%); pointer-events:none }
#welcome-overlay.hidden { opacity:0; pointer-events:none }
.welcome-emoji { font-size:clamp(3rem,12vw,5rem); margin-bottom:clamp(10px,3vh,18px); filter:drop-shadow(0 4px 14px rgba(244,160,28,.45)); display:block }
#welcome-overlay h1 { font-family:'Playfair Display',serif; font-size:clamp(1.6rem,7vw,2.8rem); color:#3D2B1F; margin-bottom:9px; line-height:1.15 }
#welcome-overlay p  { font-size:clamp(.86rem,3.5vw,.98rem); color:#7A5A3A; max-width:320px; line-height:1.7; margin-bottom:clamp(18px,4vh,28px) }
/* ── Botón Google en welcome overlay ── */
#google-login-welcome {
  display: flex;
  justify-content: center;
  margin: 4px 0 18px;
  min-height: 44px;
}

/* ── Separador "o continúa sin cuenta" ── */
.welcome-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 300px;
  margin: 0 0 16px;
  color: #B89A6A;
  font-size: .78rem;
  letter-spacing: .04em;
}
.welcome-divider::before,
.welcome-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(180,140,80,.3);
}

#welcome-name {
  border:2px solid #C4973A; border-radius:50px;
  background:rgba(255,255,255,.7);
  padding:clamp(11px,3vw,13px) clamp(20px,5vw,24px);
  font-family:'Lato',sans-serif; font-size:clamp(.94rem,4vw,1.02rem);
  text-align:center; width:min(250px,78vw); outline:none; margin-bottom:12px; color:#3D2B1F;
  box-shadow:0 2px 12px rgba(196,151,58,.18);
}
#welcome-name::placeholder { color:#C4973A88 }
#welcome-name:focus { border-color:#F4A01C; box-shadow:0 0 0 3px rgba(244,160,28,.18) }
.btn-start {
  background:linear-gradient(135deg,#F4A01C,#E8890A); border:none; border-radius:50px;
  color:#fff; font-family:'Playfair Display',serif; font-weight:700;
  font-size:clamp(.98rem,4vw,1.08rem);
  padding:clamp(13px,3.5vw,15px) clamp(26px,7vw,38px);
  cursor:pointer; box-shadow:0 6px 24px rgba(244,160,28,.42);
}
.btn-start:active { transform:scale(.97) }

/* ── Streak icon row ── */
#streak-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
}
#streak-icon {
  font-size: clamp(1.5rem, 7vw, 2.4rem);
  display: inline-block;
  transition: transform .3s cubic-bezier(.25,1,.5,1);
  will-change: transform;
}
#streak-icon:not(:empty) { animation: streak-icon-pop .4s cubic-bezier(.25,1,.5,1) }
@keyframes streak-icon-pop {
  0%   { transform: scale(.5); opacity: 0 }
  65%  { transform: scale(1.15) }
  100% { transform: scale(1);   opacity: 1 }
}

/* ── PRO button ── */
.btn-pro {
  background:   linear-gradient(135deg, rgba(255,215,0,.2), rgba(255,160,0,.1));
  border-color: rgba(255,200,0,.5);
  color:        #7A5C00;
  font-weight:  700;
}
.is-night .btn-pro { color: var(--pro-gold) }
.btn-pro:active    { background: rgba(255,215,0,.35) }

/* ── Level-up overlay ── */
#streak-levelup-overlay {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  animation: slu-fade 2.8s ease forwards;
}
@keyframes slu-fade {
  0%   { opacity: 0 }
  12%  { opacity: 1 }
  75%  { opacity: 1 }
  100% { opacity: 0 }
}
.slu-inner {
  background:    linear-gradient(160deg, #1A1200, #2A1E00);
  border:        1px solid rgba(255,200,0,.4);
  border-radius: 24px;
  padding:       28px 40px;
  text-align:    center;
  animation:     slu-pop .45s cubic-bezier(.25,1,.5,1);
  box-shadow:    0 8px 48px rgba(255,200,0,.4);
}
@keyframes slu-pop {
  0%   { transform: scale(.65); opacity: 0 }
  100% { transform: scale(1);   opacity: 1 }
}
.slu-icon  { font-size: 2.8rem; line-height: 1; margin-bottom: 8px }
.slu-title {
  font-family: 'Playfair Display', serif;
  font-size:   1rem;
  color:       var(--pro-gold);
  margin-bottom: 3px;
}
.slu-streak {
  font-family: 'Playfair Display', serif;
  font-size:   2.4rem;
  color:       #fff;
  font-weight: 700;
  line-height: 1;
}

/* ── Forzar ocultamiento del welcome overlay (post-login) ── */
.hidden-force {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Placeholder del botón de Google (visible hasta que GIS cargue) ──
   Imita la forma y estilo del botón estándar de Google Sign-In.
   Se elimina del DOM en _renderButton() cuando el botón real está listo. */
.google-btn-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 50px;
  padding: 10px 24px;
  font-family: 'Lato', sans-serif;
  font-size: .9rem;
  color: #3c4043;
  cursor: default;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  animation: gph-shimmer 1.6s ease-in-out infinite;
}
@keyframes gph-shimmer {
  0%, 100% { opacity: 1; }
  50%       { opacity: .65; }
}