/* ===========================================================
   EL MEJOR AMIGO - Estilos
   Paleta: naranjas, grises y blancos. Alegre y con animacion.
   =========================================================== */

:root {
  --naranja:        #FF6B1A;
  --naranja-claro:  #FF9147;
  --naranja-suave:  #FFF0E6;
  --naranja-hondo:  #D94E00;

  --gris-tinta:     #262A31;
  --gris-medio:     #5C6470;
  --gris-suave:     #9AA3AF;
  --gris-linea:     #E4E7EB;
  --gris-fondo:     #F5F6F8;

  --blanco:         #FFFFFF;

  --sombra:      0 4px 16px rgba(38, 42, 49, .08);
  --sombra-alta: 0 12px 40px rgba(38, 42, 49, .16);
  --sombra-nar:  0 8px 24px rgba(255, 107, 26, .35);

  --fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--fuente);
  background: var(--gris-fondo);
  color: var(--gris-tinta);
  overscroll-behavior: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1000px 500px at 15% -10%, rgba(255,145,71,.16), transparent 60%),
    radial-gradient(800px 500px at 100% 110%, rgba(255,107,26,.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.pantalla {
  position: relative;
  z-index: 1;
  display: none;
  animation: entrar .45s cubic-bezier(.2, .9, .3, 1.3) both;
}
.pantalla.activa { display: block; }

/* ---------- Animaciones ---------- */

@keyframes entrar {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes pop {
  0%   { opacity: 0; transform: scale(.4) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.12) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes latir {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes brillo {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes temblar {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-9px); }
  40%      { transform: translateX(9px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}
@keyframes caer {
  to { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}
@keyframes girar {
  to { transform: rotate(360deg); }
}

/* ---------- Piezas comunes ---------- */

.marca {
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: .95;
  text-transform: uppercase;
}
.marca span { color: var(--naranja); }

.boton {
  border: 0;
  cursor: pointer;
  font-family: var(--fuente);
  font-weight: 800;
  color: var(--blanco);
  background: linear-gradient(135deg, var(--naranja-claro), var(--naranja));
  border-radius: 999px;
  box-shadow: var(--sombra-nar);
  transition: transform .16s cubic-bezier(.2,.9,.3,1.4), box-shadow .16s, filter .16s;
}
.boton:hover  { transform: translateY(-2px) scale(1.02); filter: brightness(1.05); }
.boton:active { transform: translateY(1px) scale(.98); }
.boton:disabled {
  background: var(--gris-linea);
  color: var(--gris-suave);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.boton.fantasma {
  background: transparent;
  color: var(--gris-medio);
  box-shadow: none;
  border: 2px solid var(--gris-linea);
}
.boton.fantasma:hover { border-color: var(--naranja); color: var(--naranja); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  background: var(--blanco);
  border-radius: 999px;
  box-shadow: var(--sombra);
  font-weight: 700;
  animation: pop .45s cubic-bezier(.2,.9,.3,1.5) both;
}
.chip .punto {
  width: .6em;
  height: .6em;
  border-radius: 50%;
  background: var(--naranja);
  flex: none;
}
.chip.desconectado { opacity: .45; }
.chip.desconectado .punto { background: var(--gris-suave); }

.error {
  background: var(--naranja-suave);
  color: var(--naranja-hondo);
  border-radius: 14px;
  font-weight: 700;
  animation: temblar .4s;
}