/*
 * ═══════════════════════════════════════════════════════════
 *  YEFRIS — buttons.css  v1.0
 *  05_Web_App · Validado 28/03/2026
 *
 *  USO:
 *  → Web Astro:  src/styles/buttons.css  (import en Layout.astro)
 *  → App FastAPI: web/static/css/buttons.css  (link en base.html)
 *
 *  ANIMACIÓN: direction-aware fill — el flair (círculo)
 *  se expande desde el punto exacto donde entra el cursor.
 *  Requiere buttons.js (ver abajo) para funcionar.
 * ═══════════════════════════════════════════════════════════
 */


/* ─────────────────────────────────────────────────────────
   BASE — estructura común a todos los botones
   ───────────────────────────────────────────────────────── */
.y-btn {
  position:   relative;
  display:    inline-flex;
  align-items: center;
  justify-content: center;
  padding:    13px 30px;
  border-radius: 999px;        /* píldora completa */
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size:  14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  cursor:     pointer;
  overflow:   hidden;          /* CLAVE: recorta el flair */
  border:     none;
  background: transparent;
  text-decoration: none;       /* por si se usa como <a> */
}

/* Círculo animado — posicionado y escalado por JS */
.y-btn__flair {
  position:      absolute;
  border-radius: 50%;
  /* Estado inicial: invisible y centrado en 0,0 */
  transform:     translate(-50%, -50%) scale(0);
  /* Expansión suave — cubic-bezier equivalente a GSAP power2.out */
  transition:    transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
  z-index:       0;
  will-change:   transform;
}

/* Texto y flecha — siempre encima del flair */
.y-btn__label {
  position:   relative;
  z-index:    1;
  display:    flex;
  align-items: center;
  gap:        7px;
  /* La transición de color se gestiona aquí, no en el padre */
  transition: color 0.4s ease;
}

/* Flecha interior — se desplaza 3px al hover */
.y-btn__label svg {
  flex-shrink: 0;
  transition:  transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.y-btn:hover .y-btn__label svg {
  transform: translateX(3px);
}


/* ─────────────────────────────────────────────────────────
   DARK MODE — 3 variantes
   Fondo: #080A09
   Hover: texto → #0C1B19 (negro)
   ───────────────────────────────────────────────────────── */

/* 1. Menta — CTA principal */
.y-btn--dark-mint {
  background:  #080A09;
  box-shadow:  inset 0 0 0 1.5px #2DD4BF;
}
.y-btn--dark-mint .y-btn__flair  { background: #2DD4BF; }
.y-btn--dark-mint .y-btn__label  { color: #2DD4BF; }       /* borde = texto */
.y-btn--dark-mint:hover .y-btn__label { color: #0C1B19; }  /* hover → negro */

/* 2. Blanco — CTA secundario */
.y-btn--dark-white {
  background:  #080A09;
  box-shadow:  inset 0 0 0 1.5px #EDF0EB;
}
.y-btn--dark-white .y-btn__flair  { background: #EDF0EB; }
.y-btn--dark-white .y-btn__label  { color: #EDF0EB; }
.y-btn--dark-white:hover .y-btn__label { color: #0C1B19; }

/* 3. Naranja — CTA reservas/amber */
.y-btn--dark-orange {
  background:  #080A09;
  box-shadow:  inset 0 0 0 1.5px #D4891A;
}
.y-btn--dark-orange .y-btn__flair  { background: #D4891A; }
.y-btn--dark-orange .y-btn__label  { color: #D4891A; }
.y-btn--dark-orange:hover .y-btn__label { color: #0C1B19; }


/* ─────────────────────────────────────────────────────────
   LIGHT MODE — 3 variantes
   Fondo: transparente (hereda page-gradient #E8F4F1)
   Hover: texto → #FFFFFF (blanco)
   ───────────────────────────────────────────────────────── */

/* 4. Menta — CTA principal */
.y-btn--light-mint {
  background:  transparent;
  box-shadow:  inset 0 0 0 1.5px #2DD4BF;
}
.y-btn--light-mint .y-btn__flair  { background: #2DD4BF; }
.y-btn--light-mint .y-btn__label  { color: #2DD4BF; }
.y-btn--light-mint:hover .y-btn__label { color: #FFFFFF; }

/* 5. Negro — CTA secundario */
.y-btn--light-black {
  background:  transparent;
  box-shadow:  inset 0 0 0 1.5px #0D1412;
}
.y-btn--light-black .y-btn__flair  { background: #0D1412; }
.y-btn--light-black .y-btn__label  { color: #0D1412; }
.y-btn--light-black:hover .y-btn__label { color: #FFFFFF; }

/* 6. Naranja — CTA reservas/amber */
.y-btn--light-orange {
  background:  transparent;
  box-shadow:  inset 0 0 0 1.5px #D4891A;
}
.y-btn--light-orange .y-btn__flair  { background: #D4891A; }
.y-btn--light-orange .y-btn__label  { color: #D4891A; }
.y-btn--light-orange:hover .y-btn__label { color: #FFFFFF; }


/* ─────────────────────────────────────────────────────────
   HTML DE USO — copiar para cada botón
   ───────────────────────────────────────────────────────── */
/*

<!-- Dark · menta (CTA principal) -->
<button class="y-btn y-btn--dark-mint" data-btn>
  <span class="y-btn__flair"></span>
  <span class="y-btn__label">
    Empezar gratis
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
         stroke="currentColor" stroke-width="2.5"
         stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 12h14M12 5l7 7-7 7"/>
    </svg>
  </span>
</button>

<!-- Dark · blanco (CTA secundario) -->
<button class="y-btn y-btn--dark-white" data-btn>
  <span class="y-btn__flair"></span>
  <span class="y-btn__label">Ver demo</span>
</button>

<!-- Dark · naranja -->
<button class="y-btn y-btn--dark-orange" data-btn>
  <span class="y-btn__flair"></span>
  <span class="y-btn__label">Reservar mesa</span>
</button>

<!-- Light · menta -->
<button class="y-btn y-btn--light-mint" data-btn>
  <span class="y-btn__flair"></span>
  <span class="y-btn__label">Empezar gratis</span>
</button>

<!-- Light · negro -->
<button class="y-btn y-btn--light-black" data-btn>
  <span class="y-btn__flair"></span>
  <span class="y-btn__label">Ver demo</span>
</button>

<!-- Light · naranja -->
<button class="y-btn y-btn--light-orange" data-btn>
  <span class="y-btn__flair"></span>
  <span class="y-btn__label">Reservar mesa</span>
</button>

*/