/* ================= UltraHuerto — estilo caramelo/juguete ================= */
:root{
  --cielo-arriba:#aee7ff;
  --cielo-abajo:#e8fbff;
  --verde-oscuro:#1e7d32;
  --verde-medio:#2e9e44;
  --verde-claro:#55c065;
  --verde-brillante:#7ed957;
  --pasto:#6fd44b;
  --pasto-oscuro:#4CAF50;
  --naranja:#ffa726;
  --naranja-oscuro:#f57c00;
  --dorado:#ffd54f;
  --azul-badge:#5c6bc0;
  --crema:#fff8e1;
  --texto:#4e342e;
  --blanco:#ffffff;
  --sombra:0 6px 0 rgba(0,0,0,.15);
  --fuente-titulo:'Lilita One', 'Baloo 2', cursive;
  --fuente-cuerpo:'Baloo 2', cursive;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--fuente-cuerpo);
  background:#3b2d24;
  display:flex;justify-content:center;
  overflow:hidden;
  user-select:none;
}

#juego{
  position:relative;
  width:100%;max-width:520px;height:100dvh;
  background:linear-gradient(var(--cielo-arriba), var(--cielo-abajo) 70%);
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 0 60px rgba(0,0,0,.5);
}

/* ============ ESCENA ============ */
#escena{position:relative;flex:1;overflow:hidden}

.nube{
  position:absolute;background:#fff;border-radius:50px;
  opacity:.9;animation:flotar-nube 40s linear infinite;
}
.nube::before,.nube::after{content:'';position:absolute;background:#fff;border-radius:50%}
.n1{width:90px;height:28px;top:6%;left:-100px}
.n1::before{width:40px;height:40px;top:-18px;left:14px}
.n1::after{width:28px;height:28px;top:-12px;left:46px}
.n2{width:70px;height:22px;top:14%;left:-100px;animation-delay:-18s;animation-duration:55s}
.n2::before{width:30px;height:30px;top:-14px;left:12px}
.n2::after{width:22px;height:22px;top:-9px;left:38px}
.n3{width:110px;height:32px;top:2%;left:-140px;animation-delay:-30s;animation-duration:70s}
.n3::before{width:46px;height:46px;top:-20px;left:20px}
.n3::after{width:34px;height:34px;top:-15px;left:60px}
@keyframes flotar-nube{from{transform:translateX(0)}to{transform:translateX(720px)}}

/* --- copa del árbol: blobs superpuestos --- */
#arbol{position:absolute;inset:0 0 18% 0}
.copa{position:absolute;border-radius:50%}
.capa1{
  width:160%;height:132%;left:-30%;top:-38%;
  background:radial-gradient(circle at 45% 30%, var(--verde-medio), var(--verde-oscuro) 75%);
  border-radius:48% 52% 55% 45% / 55% 50% 50% 45%;
}
.capa2{
  width:132%;height:108%;left:-18%;top:-28%;
  background:radial-gradient(circle at 40% 25%, var(--verde-claro), var(--verde-medio) 80%);
  border-radius:52% 48% 45% 55% / 50% 55% 45% 50%;
  animation:respirar 9s ease-in-out infinite;
}
.capa3{
  width:98%;height:80%;left:0;top:-14%;
  background:radial-gradient(circle at 38% 22%, var(--verde-brillante), var(--verde-claro) 85%);
  border-radius:45% 55% 52% 48% / 55% 45% 55% 45%;
  animation:respirar 9s ease-in-out infinite reverse;
}
.bulto{position:absolute;border-radius:50%}
.bulto.izq{
  width:58%;height:36%;left:-8%;top:70%;
  background:radial-gradient(circle at 42% 22%, var(--verde-medio), var(--verde-oscuro) 80%);
}
.bulto.der{
  width:64%;height:40%;right:-10%;top:66%;
  background:radial-gradient(circle at 42% 22%, var(--verde-medio), var(--verde-oscuro) 80%);
}
@keyframes respirar{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.hoja-deco{position:absolute;font-size:26px;opacity:.85;animation:mecer 4s ease-in-out infinite}
.h1{top:8%;left:6%}
.h2{top:30%;right:26%;animation-delay:-2s}
@keyframes mecer{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(14deg)}}

#capa-frutas{position:absolute;inset:0}

/* --- fruta plantada --- */
.fruta{
  position:absolute;width:88px;
  display:flex;flex-direction:column;align-items:center;
  transition:left 1s cubic-bezier(.34,1.56,.64,1), top 1s cubic-bezier(.34,1.56,.64,1);
  cursor:grab;z-index:2;
  touch-action:none;
}
.fruta.arrastrando{
  transition:none;z-index:15;cursor:grabbing;
}
.fruta.arrastrando svg{
  animation:none;transform:scale(1.18) rotate(-4deg);
  filter:drop-shadow(0 14px 10px rgba(0,0,0,.35));
}
.fruta.arrastrando .badge-tiempo{opacity:.4}
.fruta svg{width:66px;height:66px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.3))}
.fruta.dormida svg{animation:dormir 3.5s ease-in-out infinite}
@keyframes dormir{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.04) rotate(2deg)}}
.fruta.lista svg{animation:saltar .7s ease-in-out infinite}
@keyframes saltar{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-10px) scale(1.08)}60%{transform:translateY(-10px) scale(1.08)}}

.zetas{
  position:absolute;top:-8px;right:-4px;
  font-family:var(--fuente-titulo);color:#fff;
  text-shadow:1px 2px 0 rgba(0,0,0,.35);
  pointer-events:none;
}
.zetas span{display:inline-block;animation:zzz 2.4s ease-in-out infinite}
.zetas span:nth-child(1){font-size:15px}
.zetas span:nth-child(2){font-size:11px;animation-delay:.5s}
@keyframes zzz{0%{opacity:0;transform:translate(0,4px) scale(.7)}40%{opacity:1}100%{opacity:0;transform:translate(8px,-12px) scale(1.15)}}

.brillo-lista{position:absolute;top:-12px;font-size:18px;animation:brillar 1s ease-in-out infinite;pointer-events:none}
@keyframes brillar{0%,100%{opacity:.4;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(20deg)}}

.barra-crecer{
  width:58px;height:9px;margin-top:3px;
  background:rgba(255,255,255,.55);border:2px solid #fff;border-radius:999px;
  overflow:hidden;box-shadow:0 2px 0 rgba(0,0,0,.15);
}
.barra-crecer i{
  display:block;height:100%;
  background:linear-gradient(90deg,#aed581,#558b2f);
  border-radius:999px;transition:width 1s linear;
}
.badge-tiempo{
  margin-top:2px;position:relative;
  font-family:var(--fuente-cuerpo);font-weight:800;font-size:12px;letter-spacing:.5px;
  color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.3);
  background:linear-gradient(#7986cb,var(--azul-badge));
  border:2px solid #fff;border-radius:999px;
  padding:3px 10px;white-space:nowrap;
  box-shadow:0 3px 0 rgba(0,0,0,.2);
}
.badge-tiempo::before{
  content:'';position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-bottom-color:#7986cb;border-top:0;
}
.fruta.lista .badge-tiempo{background:linear-gradient(#ffe082,var(--naranja));color:#7b3f00;text-shadow:none}
.fruta.lista .badge-tiempo::before{border-bottom-color:#ffe082}

/* --- letrero --- */
#letrero{
  position:absolute;top:12px;left:12px;z-index:5;
  background:linear-gradient(#a1887f,#795548);
  border:3px solid #5d4037;border-radius:14px;
  padding:6px 14px 8px;text-align:center;
  box-shadow:var(--sombra);transform:rotate(-3deg);
}
.letrero-titulo{
  display:block;font-family:var(--fuente-titulo);font-size:20px;
  color:#ffe9c4;text-shadow:2px 2px 0 #4e342e;letter-spacing:1px;
}
.letrero-sub{display:block;font-size:10px;font-weight:700;color:#ffd54f;margin-top:-3px}

/* --- botones laterales --- */
#botones-lado{
  position:absolute;top:14px;right:10px;z-index:5;
  display:flex;flex-direction:column;gap:14px;
}
.btn-lado{
  position:relative;border:none;background:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-family:var(--fuente-cuerpo);
}
.btn-lado-icono{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:26px;
  background:radial-gradient(circle at 35% 30%, #b9f6ca, #43a047);
  border:3px solid #fff;box-shadow:0 4px 0 rgba(0,0,0,.25);
  transition:transform .15s;
}
#btn-checkin .btn-lado-icono{background:radial-gradient(circle at 35% 30%, #ffe0b2, #fb8c00)}
#btn-sonido .btn-lado-icono{background:radial-gradient(circle at 35% 30%, #b3e5fc, #039be5)}
.btn-lado:active .btn-lado-icono{transform:scale(.88)}
.btn-lado-texto{
  font-size:10px;font-weight:800;color:#fff;line-height:1.1;text-align:center;
  text-shadow:1px 1px 0 rgba(0,0,0,.5);
}
.puntito{
  position:absolute;top:-2px;right:2px;width:14px;height:14px;border-radius:50%;
  background:#ff1744;border:2px solid #fff;
  animation:latir 1s ease-in-out infinite;
}
.puntito.oculto{display:none}
@keyframes latir{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
.girar{animation:none}
.btn-lado:active .girar{animation:girar360 .6s ease}
@keyframes girar360{to{transform:rotate(360deg)}}

/* --- colina --- */
#colina{
  position:absolute;bottom:0;left:-10%;width:120%;height:20%;
  background:linear-gradient(var(--pasto), var(--pasto-oscuro));
  border-radius:50% 50% 0 0 / 90% 90% 0 0;
  box-shadow:inset 0 8px 0 rgba(255,255,255,.25);
}
.flor{position:absolute;font-size:20px;animation:mecer 5s ease-in-out infinite}
.f1{top:26%;left:20%}
.f2{top:44%;left:52%;animation-delay:-1.6s}
.f3{top:22%;left:74%;animation-delay:-3s;font-size:24px}

/* --- accesos directos sobre el pasto --- */
#atajos{
  position:absolute;bottom:12px;left:0;right:0;z-index:5;
  display:flex;justify-content:space-evenly;align-items:flex-end;
  padding:0 10px;pointer-events:none;
}
.atajo{
  pointer-events:auto;border:none;background:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-family:var(--fuente-cuerpo);transition:transform .12s;
}
.atajo:active{transform:scale(.87)}
.atajo-icono{
  width:56px;height:56px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;font-size:27px;
  background:linear-gradient(#fffde7,#ffe082);
  border:3px solid #fff;box-shadow:0 4px 0 rgba(0,0,0,.25);
}
.atajo-texto{font-size:11px;font-weight:800;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.5)}
.atajo[data-a="perfil"] .atajo-icono{background:linear-gradient(#b3e5fc,#0288d1)}
.atajo[data-a="tienda"] .atajo-icono{background:linear-gradient(#c8e6c9,#43a047)}
.atajo[data-a="amigos"] .atajo-icono{background:linear-gradient(#f8bbd0,#ec407a)}
.atajo[data-a="ganancias"] .atajo-icono{background:linear-gradient(#fff59d,#f9a825)}
.atajo[data-a="historial"] .atajo-icono{background:linear-gradient(#bbdefb,#1e88e5)}
.atajo[data-a="soporte"] .atajo-icono{background:linear-gradient(#e1bee7,#8e24aa)}
.atajo[data-a="checkin"] .atajo-icono{background:linear-gradient(#ffe0b2,#fb8c00)}
.atajo[data-a="ayuda"] .atajo-icono{background:linear-gradient(#ffcdd2,#e53935)}

/* ============ BARRA INFERIOR ============ */
#barra-abajo{
  position:relative;z-index:6;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 12px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(#8bc34a,#689f38);
  border-top:4px solid #33691e;
}
.btn-grande{
  width:60px;height:60px;flex:0 0 auto;
  border-radius:18px;border:3px solid #fff;cursor:pointer;
  background:linear-gradient(#fffde7,#ffe082);
  box-shadow:0 4px 0 rgba(0,0,0,.25);
  font-size:30px;display:flex;align-items:center;justify-content:center;
  transition:transform .12s;
}
.btn-grande:active{transform:scale(.9)}
.menu-lineas{font-size:28px;color:#6d4c41;font-weight:900}

#contadores{flex:1;display:flex;flex-direction:column;gap:5px;align-items:center}
.contador{
  display:flex;align-items:center;gap:8px;
  min-width:200px;justify-content:center;
  border-radius:999px;padding:2px 14px 3px;
  border:2px solid #fff;box-shadow:0 3px 0 rgba(0,0,0,.2);
}
.contador.capital{background:linear-gradient(#66bb6a,#2e7d32)}
.contador.ganancias{background:linear-gradient(#ffd54f,#ff9800)}
.moneda-icono{font-size:22px;filter:drop-shadow(0 2px 1px rgba(0,0,0,.3))}
.contador-info{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.contador-nombre{font-size:10px;font-weight:800;color:rgba(255,255,255,.9);text-transform:uppercase;letter-spacing:1px}
.contador-valor{
  font-family:var(--fuente-titulo);font-size:19px;color:#fff;
  text-shadow:1px 2px 0 rgba(0,0,0,.3);letter-spacing:.5px;
}
.contador.ganancias .contador-valor{color:#fff8e1}

/* ============ MENÚ LATERAL ============ */
.fondo-modal{
  position:absolute;inset:0;z-index:20;
  background:rgba(0,0,0,.35);
  opacity:1;transition:opacity .25s;
}
.fondo-modal.oculto{opacity:0;pointer-events:none}
#menu-lateral{
  position:absolute;right:10px;bottom:90px;z-index:21;
  background:#fff;border-radius:18px;padding:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  display:flex;flex-direction:column;min-width:210px;
  transform-origin:bottom right;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), opacity .18s;
}
#menu-lateral.oculto{transform:scale(.5);opacity:0;pointer-events:none}
.item-menu{
  display:flex;align-items:center;gap:10px;
  border:none;background:none;cursor:pointer;
  font-family:var(--fuente-cuerpo);font-weight:700;font-size:16px;color:#37474f;
  padding:11px 12px;border-radius:12px;text-align:left;
}
.item-menu span{font-size:20px}
.item-menu:hover{background:#f1f8e9}
.item-menu.peligro{color:#e53935}

/* ============ MODALES ============ */
.modal{
  position:absolute;inset:0;z-index:30;
  background:#f5f5f5;display:flex;flex-direction:column;
  transform:translateY(0);transition:transform .3s cubic-bezier(.33,1,.5,1);
}
.modal.oculto{transform:translateY(105%)}
.modal-cabecera{
  padding:14px 16px 16px;color:#fff;position:relative;
  border-radius:0 0 26px 26px;box-shadow:0 4px 0 rgba(0,0,0,.12);
}
.tienda-cabecera{background:linear-gradient(#66bb6a,#388e3c)}
.historial-cabecera{background:linear-gradient(#7986cb,#3f51b5)}
.perfil-cabecera{background:linear-gradient(#4fc3f7,#0288d1)}
.ayuda-cabecera{background:linear-gradient(#ffb74d,#f57c00)}
.modal-cabecera h2{
  font-family:var(--fuente-titulo);font-size:24px;letter-spacing:.5px;
  text-shadow:2px 2px 0 rgba(0,0,0,.2);margin-top:6px;
}
.tienda-sub{font-size:13px;font-weight:600;opacity:.95;margin-top:2px}
.tienda-saldo{
  margin-top:10px;display:inline-block;
  background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.6);
  border-radius:999px;padding:4px 14px;font-weight:800;font-size:15px;
}
.btn-atras{
  background:rgba(255,255,255,.25);border:2px solid rgba(255,255,255,.6);
  color:#fff;font-family:var(--fuente-cuerpo);font-weight:800;font-size:14px;
  border-radius:999px;padding:5px 14px;cursor:pointer;
}
.modal-cuerpo{flex:1;overflow-y:auto;padding:14px;-webkit-overflow-scrolling:touch}

.banner-tienda{
  background:#fff8e1;border:3px dashed #ffb300;border-radius:16px;
  padding:12px 14px;margin-bottom:12px;
  font-size:14px;font-weight:700;color:#795548;text-align:center;line-height:1.4;
}

/* --- filas de la tienda --- */
.fila-fruta{
  display:flex;align-items:center;gap:12px;
  background:#fff;border-radius:20px;padding:14px;margin-bottom:12px;
  box-shadow:0 3px 0 rgba(0,0,0,.08);
}
.fila-fruta.invertida{flex-direction:row-reverse}
.fila-fruta .dibujo{flex:0 0 92px;text-align:center}
.fila-fruta .dibujo svg{width:84px;height:84px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.15))}
.nombre-fruta{
  display:block;font-family:var(--fuente-titulo);font-size:17px;
  color:#0288d1;text-decoration:underline;margin-bottom:2px;text-align:center;
}
.fila-fruta .datos{flex:1;text-align:center}
.dato-linea{font-size:14px;font-weight:700;color:#37474f}
.dato-linea b{color:#263238}
.dato-ganancia{font-family:var(--fuente-titulo);font-size:15px;color:#ff9100;margin:2px 0 8px}
.btn-comprar{
  font-family:var(--fuente-titulo);font-size:15px;letter-spacing:2px;
  color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.25);
  background:linear-gradient(#ffcc80,var(--naranja) 40%,var(--naranja-oscuro));
  border:3px solid #fff;border-radius:999px;
  padding:9px 30px;cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.2), inset 0 2px 3px rgba(255,255,255,.6);
  transition:transform .12s;
}
.btn-comprar:active{transform:scale(.93)}
.btn-comprar:disabled{filter:grayscale(.9);opacity:.6;cursor:not-allowed}

/* --- historial --- */
.fila-historial{
  display:flex;align-items:center;gap:10px;
  background:#fff;border-radius:14px;padding:10px 12px;margin-bottom:8px;
  box-shadow:0 2px 0 rgba(0,0,0,.06);
}
.fila-historial .icono{font-size:22px}
.fila-historial .detalle{flex:1;font-size:14px;font-weight:700;color:#37474f;line-height:1.25}
.fila-historial .fecha{font-size:11px;font-weight:600;color:#90a4ae}
.fila-historial .monto{font-family:var(--fuente-titulo);font-size:15px}
.monto.positivo{color:#2e7d32}
.monto.negativo{color:#e53935}
.historial-vacio{text-align:center;color:#90a4ae;font-weight:700;padding:40px 20px;font-size:15px}

/* --- perfil --- */
.perfil-cuerpo{display:flex;flex-direction:column;align-items:center;gap:8px}
.perfil-avatar svg{width:110px;height:110px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.2))}
.perfil-etiqueta{font-size:13px;font-weight:800;color:#607d8b;margin-top:8px;align-self:flex-start}
.perfil-input{
  width:100%;font-family:var(--fuente-cuerpo);font-weight:700;font-size:18px;
  border:3px solid #b0bec5;border-radius:14px;padding:10px 14px;color:#37474f;
  outline:none;background:#fff;
}
.perfil-input:focus{border-color:#4fc3f7}
.selector-avatar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.opcion-avatar{
  width:56px;height:56px;border-radius:16px;border:3px solid transparent;
  background:#fff;cursor:pointer;padding:4px;
  box-shadow:0 2px 0 rgba(0,0,0,.08);
}
.opcion-avatar svg{width:100%;height:100%}
.opcion-avatar.elegido{border-color:#ffa726;background:#fff8e1}
.perfil-datos{width:100%;margin-top:10px}
.dato{
  display:flex;justify-content:space-between;align-items:center;
  background:#fff;border-radius:12px;padding:10px 14px;margin-bottom:8px;
  font-weight:700;color:#546e7a;font-size:14px;
}
.dato b{font-family:var(--fuente-titulo);font-size:16px;color:#2e7d32}
.btn-naranja{
  font-family:var(--fuente-titulo);font-size:16px;letter-spacing:2px;color:#fff;
  background:linear-gradient(#ffcc80,var(--naranja) 40%,var(--naranja-oscuro));
  border:3px solid #fff;border-radius:999px;padding:11px 44px;cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.2);margin-top:10px;
  text-shadow:1px 1px 0 rgba(0,0,0,.25);
}
.btn-naranja:active{transform:scale(.95)}

/* --- ayuda --- */
.ayuda-cuerpo .paso{
  display:flex;gap:12px;align-items:flex-start;
  background:#fff;border-radius:16px;padding:14px;margin-bottom:10px;
  box-shadow:0 2px 0 rgba(0,0,0,.06);
}
.paso-num{
  flex:0 0 34px;height:34px;border-radius:50%;
  background:linear-gradient(#ffd54f,#ff9800);color:#fff;
  font-family:var(--fuente-titulo);font-size:18px;
  display:flex;align-items:center;justify-content:center;
  text-shadow:1px 1px 0 rgba(0,0,0,.2);
}
.paso p{font-size:15px;font-weight:600;color:#455a64;line-height:1.4;padding-top:4px}
.nota-virtual{
  background:#e8f5e9;border:2px dashed #81c784;border-radius:14px;
  padding:12px;font-size:13px;font-weight:700;color:#2e7d32;text-align:center;
}

/* --- toast --- */
#toast{
  position:absolute;left:50%;bottom:110px;transform:translateX(-50%);
  z-index:50;background:rgba(38,50,56,.92);color:#fff;
  font-weight:700;font-size:14px;border-radius:999px;padding:10px 20px;
  white-space:nowrap;transition:opacity .3s, transform .3s;
}
#toast.oculto{opacity:0;transform:translateX(-50%) translateY(16px);pointer-events:none}

/* --- flotante de cosecha --- */
.flota-monedas{
  position:absolute;z-index:40;pointer-events:none;
  font-family:var(--fuente-titulo);font-size:22px;color:#ffd54f;
  text-shadow:2px 2px 0 rgba(0,0,0,.4);
  animation:flotar-arriba 1.4s ease-out forwards;
}
@keyframes flotar-arriba{
  0%{opacity:0;transform:translateY(0) scale(.6)}
  15%{opacity:1;transform:translateY(-14px) scale(1.15)}
  100%{opacity:0;transform:translateY(-90px) scale(1)}
}
.confeti{
  position:absolute;z-index:39;width:10px;height:10px;pointer-events:none;
  animation:caer-confeti 1.2s ease-in forwards;
}
@keyframes caer-confeti{
  0%{opacity:1;transform:translate(0,0) rotate(0)}
  100%{opacity:0;transform:translate(var(--dx),110px) rotate(540deg)}
}

.oculto.modal{display:flex} /* los modales se ocultan con transform, no display */

/* ============ PANTALLA DE ENTRADA ============ */
#pantalla-login{
  position:absolute;inset:0;z-index:60;
  background:linear-gradient(#aee7ff, #e8fbff 55%, #d4f7c5);
  display:flex;flex-direction:column;align-items:center;
  padding:40px 22px 0;overflow-y:auto;
}
#pantalla-login.oculto{display:none}
.login-logo{text-align:center;margin-bottom:18px}
.login-titulo{
  display:block;font-family:var(--fuente-titulo);font-size:44px;
  color:#2e7d32;text-shadow:3px 3px 0 #fff, 5px 5px 0 rgba(0,0,0,.12);
  letter-spacing:1px;
}
.login-sub{display:block;font-weight:800;color:#f57c00;font-size:15px;margin-top:-4px}
.login-frutas{font-size:26px;margin-top:10px;letter-spacing:6px;animation:mecer 5s ease-in-out infinite}
.login-tarjeta{
  width:100%;max-width:360px;background:#fff;border-radius:24px;
  padding:18px;box-shadow:0 8px 0 rgba(0,0,0,.12);
  display:flex;flex-direction:column;gap:12px;position:relative;z-index:2;
}
.login-pestanas{display:flex;gap:8px;background:#f1f8e9;border-radius:999px;padding:5px}
.pestana{
  flex:1;border:none;border-radius:999px;padding:9px 0;cursor:pointer;
  font-family:var(--fuente-cuerpo);font-weight:800;font-size:15px;color:#7cb342;
  background:none;transition:all .2s;
}
.pestana.activa{background:linear-gradient(#8bc34a,#558b2f);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.15)}
.login-campo{display:flex;flex-direction:column;gap:4px}
.login-campo label{font-size:13px;font-weight:800;color:#607d8b}
.login-campo input{
  font-family:var(--fuente-cuerpo);font-weight:700;font-size:17px;color:#37474f;
  border:3px solid #c5e1a5;border-radius:14px;padding:10px 14px;outline:none;background:#fafff5;
}
.login-campo input:focus{border-color:#8bc34a}
.login-campo select{
  font-family:var(--fuente-cuerpo);font-weight:700;font-size:17px;color:#37474f;
  border:3px solid #c5e1a5;border-radius:14px;padding:10px 14px;outline:none;background:#fafff5;
  width:100%;appearance:auto;
}
.login-campo select:focus{border-color:#8bc34a}
.campo-clave{position:relative;display:flex;align-items:center}
.campo-clave input{flex:1;padding-right:52px}
.campo-clave button{
  position:absolute;right:8px;
  border:none;background:#f1f8e9;border-radius:10px;
  font-size:20px;padding:5px 9px;cursor:pointer;
  transition:transform .12s;
}
.campo-clave button:active{transform:scale(.85)}
.login-error{
  background:#ffebee;border:2px solid #ef9a9a;border-radius:12px;
  color:#c62828;font-weight:700;font-size:13px;padding:8px 12px;text-align:center;
}
.login-error.oculto{display:none}
.login-pasto{
  margin-top:auto;width:140%;height:90px;flex:0 0 auto;
  background:linear-gradient(var(--pasto), var(--pasto-oscuro));
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  box-shadow:inset 0 8px 0 rgba(255,255,255,.25);
}

/* ============ MIS AMIGOS ============ */
.btn-lado.oculto{display:none}
#btn-grupo .btn-lado-icono{background:radial-gradient(circle at 35% 30%, #90caf9, #1565c0)}
#btn-youtube .btn-lado-icono{background:radial-gradient(circle at 35% 30%, #f8bbd0, #d81b60)}
.amigos-cabecera{background:linear-gradient(#f48fb1,#c2185b)}
.amigos-cuerpo{display:flex;flex-direction:column;gap:14px;align-items:center}
.tarjeta-codigo{
  width:100%;background:#fff;border-radius:20px;padding:16px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  box-shadow:0 4px 0 rgba(0,0,0,.08);border:3px solid #f8bbd0;
}
.tc-titulo{font-size:14px;font-weight:800;color:#607d8b;text-decoration:underline}
.tc-codigo{
  font-family:var(--fuente-titulo);font-size:28px;color:#c2185b;letter-spacing:1px;
  background:#fce4ec;border:3px dashed #f48fb1;border-radius:14px;padding:6px 22px;
}
.tc-nota{font-size:12px;font-weight:700;color:#78909c;text-align:center;line-height:1.35}
.tc-botones{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap;justify-content:center}
.btn-mini-azul,.btn-mini-verde{
  font-family:var(--fuente-cuerpo);font-weight:800;font-size:14px;color:#fff;
  border:3px solid #fff;border-radius:999px;padding:9px 18px;cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.18);transition:transform .12s;
}
.btn-mini-azul{background:linear-gradient(#64b5f6,#1976d2)}
.btn-mini-verde{background:linear-gradient(#81c784,#2e7d32)}
.btn-mini-azul:active,.btn-mini-verde:active{transform:scale(.93)}
.lista-amigos{width:100%}

/* ============ GANANCIAS / RETIRAR ============ */
#contadores .contador{cursor:pointer;transition:transform .12s}
#contadores .contador:active{transform:scale(.95)}
.ganancias-cabecera{background:linear-gradient(#64b5f6,#1565c0)}
.ganancias-cuerpo{display:flex;flex-direction:column;gap:14px;align-items:center}
.tarjeta-ganancias{
  width:100%;background:#fff;border-radius:20px;padding:18px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  box-shadow:0 4px 0 rgba(0,0,0,.08);border:3px solid #bbdefb;
}
.tg-titulo{font-size:14px;font-weight:800;color:#607d8b;text-decoration:underline}
.tg-monto{display:flex;align-items:center;gap:8px}
.tg-icono{font-size:30px;filter:drop-shadow(0 2px 1px rgba(0,0,0,.2))}
.tg-monto b{font-family:var(--fuente-titulo);font-size:38px;color:#1565c0;letter-spacing:1px}
.tg-nota{font-size:12px;font-weight:700;color:#90a4ae}
.fila-datos-gan{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dato-gan{
  background:#fff;border-radius:16px;padding:12px;text-align:center;
  box-shadow:0 3px 0 rgba(0,0,0,.07);display:flex;flex-direction:column;gap:2px;
}
.dato-gan span{font-size:12px;font-weight:800;color:#607d8b}
.dato-gan b{font-family:var(--fuente-titulo);font-size:20px;color:#2e7d32}
.dato-gan small{font-size:10px;font-weight:700;color:#b0bec5}
.reglas-gan{
  width:100%;background:#fff;border:3px solid #ffccbc;border-radius:18px;
  padding:14px 16px;box-shadow:0 0 0 4px #fff3e0;
}
.reglas-gan b{color:#5d4037}
.reglas-gan p{font-size:13px;font-weight:700;color:#546e7a;margin-top:6px;line-height:1.35}
.regla-virtual{color:#2e7d32 !important}
.enlace-historial{
  background:none;border:3px solid #64b5f6;border-radius:999px;
  color:#1565c0;font-family:var(--fuente-cuerpo);font-weight:800;font-size:14px;
  padding:9px 20px;cursor:pointer;
}

/* ============ CHECK-IN DIARIO ============ */
.checkin-cabecera{background:linear-gradient(#4db6ac,#00796b)}
.checkin-cuerpo{display:flex;flex-direction:column;gap:14px;align-items:center}
.dias-checkin{
  width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.dia-checkin{
  position:relative;background:#fff;border:3px solid #e0e0e0;border-radius:16px;
  padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:3px;
  box-shadow:0 3px 0 rgba(0,0,0,.07);
}
.dia-checkin:last-child{grid-column:1 / -1;flex-direction:row;justify-content:center;gap:10px;padding:12px}
.dia-nombre{font-size:12px;font-weight:800;color:#78909c;text-transform:uppercase;letter-spacing:.5px}
.dia-icono{font-size:26px}
.dia-premio{font-family:var(--fuente-titulo);font-size:15px;color:#f57c00}
.dia-checkin.reclamado{background:#e8f5e9;border-color:#a5d6a7}
.dia-checkin.reclamado .dia-premio{color:#2e7d32}
.dia-checkin.hoy{
  border-color:#ffb300;background:#fff8e1;
  animation:latir-caja 1.6s ease-in-out infinite;
}
@keyframes latir-caja{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.dia-checkin.futuro{opacity:.6}
.dia-hoy-badge{
  position:absolute;top:-9px;right:-6px;
  background:#ff1744;color:#fff;font-size:10px;font-weight:800;
  border-radius:999px;padding:2px 8px;border:2px solid #fff;
}
.racha-texto{font-size:15px;font-weight:700;color:#455a64}
.racha-texto b{color:#e65100}
.btn-naranja:disabled{filter:grayscale(.8);opacity:.65;cursor:not-allowed}
.checkin-nota{font-size:12px;font-weight:700;color:#90a4ae;text-align:center}

/* ============ SOPORTE ============ */
.soporte-cabecera{background:linear-gradient(#ba68c8,#7b1fa2)}
.soporte-cuerpo{display:flex;flex-direction:column;gap:12px;align-items:center}
.area-soporte{
  width:100%;min-height:150px;resize:vertical;
  font-family:var(--fuente-cuerpo);font-weight:600;font-size:15px;color:#37474f;
  border:3px solid #ce93d8;border-radius:16px;padding:12px 14px;outline:none;background:#fff;
}
.area-soporte:focus{border-color:#ab47bc}
.item-menu.oculto{display:none}