/* =============================================================
   BUTTON.CSS — Botones universales del sitio
   =============================================================
   Paleta:
   · Naranja  #f99109 / #f3a530 / #f49d32 / #e07b1f / #ffb347
   · Verde    #25D366 / #2ea65c / #279653 / #20b954 / #1ebe5d
   · Gris     #2d2d2d / #333 / #666
   · Azul     #3498db  · Rojo  #e74c3c  · Blanco  #ffffff
   ============================================================= */

@layer botones {

  /* ── Variables ──────────────────────────────────────────── */
  :root {
    /* CAMBIO: padding fluidos — antes fijos, con media queries para móvil */
    --btn-padding-standard: clamp(8px, 1.2vw, 12px) clamp(16px, 2.5vw, 24px);
    --btn-padding-large: clamp(10px, 1.4vw, 14px) clamp(20px, 3.2vw, 32px);
    --btn-padding-small: clamp(4px, 0.6vw, 6px) clamp(10px, 1.6vw, 16px);
    --btn-border-radius: 999px;
    --btn-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --btn-min-width: clamp(110px, 14vw, 160px);
    --btn-min-height: clamp(40px, 5vw, 48px);
    --btn-line-height: 1.3;
    --btn-gap: 8px;
  }

  /* ── Base — todos los botones de texto ──────────────────── */
  :is(.btn,
    .btn-primary,
    .btn-secondary,
    .btn-comprar,
    .btn-actualizar-calculo,
    .btn-ver-mas,
    .btn-wsp,
    .btn-ver-todos,
    .btn-ubicacion,
    .btn-enviar-compra,
    .btn-cancelar,
    .btn-contact-primary,
    .btn-contact-secondary,
    .btn-read,
    .boton-correo) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
    gap: var(--btn-gap);
    height: auto;
    min-height: var(--btn-min-height);
    min-width: var(--btn-min-width);
    padding: var(--btn-padding-standard);
    border-radius: var(--btn-border-radius);
    line-height: var(--btn-line-height);
    border: 2px solid transparent;
    transition: var(--btn-transition);
    text-align: center;
    white-space: normal;
    word-break: break-word;
  }

  /* ── Base — botones solo icono ──────────────────────────── */
  :is(.btn-favorito, .btn-comparar-item, .btn-favorito-modal) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-width: clamp(36px, 4.5vw, 44px);
    width: clamp(36px, 4.5vw, 44px);
    height: clamp(36px, 4.5vw, 44px);
    min-height: unset;
    padding: 0;
    border-radius: 10px;
    font-weight: 700;
    border: 2px solid transparent;
    transition: var(--btn-transition);
    white-space: nowrap;
  }

  /* ── Focus ──────────────────────────────────────────────── */
  [class^="btn-"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(249, 145, 9, 0.45);
  }


  /* ============================================================
     VARIANTES DE COLOR
     ============================================================ */

  /* Naranja principal */
  .btn-primary,
  .btn-ver-todos,
  .btn-actualizar-calculo {
    background: linear-gradient(135deg, #f99109, #e07b1f);
    color: #fff;
  }

  :is(.btn-primary, .btn-ver-todos, .btn-actualizar-calculo):hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(249, 145, 9, 0.4);
    filter: brightness(1.08);
  }

  /* Naranja claro */
  .btn-ver-mas {
    background: #f3a530;
    color: #fff;
    border-color: #f3a530;
  }

  .btn-ver-mas:hover {
    background: #e0941a;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(243, 165, 48, 0.4);
  }

  /* Verde WhatsApp */
  .btn-secondary,
  .btn-wsp,
  .btn-enviar-compra {
    background: #25d366;
    color: #fff;
    border-color: #25d366;
  }

  :is(.btn-secondary, .btn-wsp, .btn-enviar-compra):hover {
    background: #20b954;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
    filter: brightness(1.08);
  }

  /* Verde compra */
  .btn-comprar {
    background: #2ea65c;
    color: #fff;
    border-color: #2ea65c;
  }

  .btn-comprar:hover {
    background: #279653;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(46, 166, 92, 0.4);
    filter: brightness(1.08);
  }

  /* Blanco / outline */
  .btn-ubicacion {
    background: #fff;
    color: #333;
    border-color: #e0e0e0;
  }

  .btn-ubicacion:hover {
    background: #f49d32;
    color: #fff;
    border-color: #f49d32;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(244, 157, 50, 0.3);
  }

  /* Gris / cancelar */
  .btn-cancelar {
    background: #f5f5f5;
    color: #666;
    border-color: #ddd;
  }

  .btn-cancelar:hover {
    background: #2d2d2d;
    color: #fff;
    border-color: #2d2d2d;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(45, 45, 45, 0.25);
  }

  /* Negro / correo */
  .boton-correo {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
    border-radius: 16px;
  }

  .boton-correo:hover {
    background: #000;
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  }

  /* Azul / leer */
  .btn-read {
    background: #0066cc;
    color: #fff;
    border-color: #0066cc;
  }

  .btn-read:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 102, 204, 0.4);
    filter: brightness(1.08);
  }


  /* ============================================================
     BOTONES DE CONTACTO (cards)
     ============================================================ */

  /* Primario — por defecto naranja */
  .btn-contact-primary {
    background: linear-gradient(135deg, #f99109, #e07b1f);
    color: #fff;
  }

  .btn-contact-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(249, 145, 9, 0.4);
    filter: brightness(1.08);
  }

  /* Variante WhatsApp */
  .whatsapp-card .btn-contact-primary {
    background: linear-gradient(135deg, #25d366, #20b954);
  }

  .whatsapp-card .btn-contact-primary:hover {
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
  }

  /* Variante Email */
  .email-card .btn-contact-primary {
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-color: #3498db;
  }

  .email-card .btn-contact-primary:hover {
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
  }

  /* Variante Ubicación */
  .ubicacion-card .btn-contact-primary {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border-color: #e74c3c;
  }

  .ubicacion-card .btn-contact-primary:hover {
    box-shadow: 0 8px 25px rgba(231, 76, 60, 0.4);
  }

  /* Secundario / copiar */
  .btn-contact-secondary {
    background: #f8f9fa;
    color: #333;
    border-color: #e9ecef;
  }

  .btn-contact-secondary:hover {
    background: #f99109;
    color: #fff;
    border-color: #f99109;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(249, 145, 9, 0.3);
  }


  /* ============================================================
     BOTONES DEL MODAL (formulario multi-paso)
     ============================================================ */
  .btn-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: clamp(10px, 1.2vw, 12px) clamp(18px, 2.5vw, 25px);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--btn-transition);
  }

  .btn-nav.btn-primary {
    background: linear-gradient(135deg, #f99109, #e07b1f);
    color: #fff;
  }

  .btn-nav.btn-secondary {
    background: #6c757d;
    color: #fff;
  }

  .btn-nav.btn-success {
    background: linear-gradient(135deg, #25d366, #20b954);
    color: #fff;
  }

  :is(.btn-nav.btn-primary,
    .btn-nav.btn-secondary,
    .btn-nav.btn-success):hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    filter: brightness(1.08);
  }

  .btn-nav-hidden {
    visibility: hidden;
  }


  /* ============================================================
     ESTADOS
     ============================================================ */

  :is(.btn, .btn-primary, .btn-secondary, .btn-comprar):disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  :is(.btn, .btn-primary, .btn-secondary, .btn-comprar):active {
    transform: translateY(0);
    transition: transform 0.1s ease;
  }


  /* ============================================================
     GRUPOS Y MODIFICADORES DE TAMAÑO
     ============================================================ */

  .btn-group {
    display: flex;
    gap: clamp(8px, 1.2vw, 12px);
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  .btn-group .btn {
    flex: 1;
    min-width: clamp(120px, 15vw, 150px);
  }

  .btn-large {
    padding: var(--btn-padding-large);
    /* CAMBIO: fluido */
    min-width: clamp(140px, 18vw, 180px);
    min-height: clamp(44px, 5.2vw, 52px);
  }

  .btn-small {
    padding: var(--btn-padding-small);
    /* CAMBIO: fluido */
    min-width: clamp(90px, 12vw, 120px);
    min-height: clamp(30px, 3.6vw, 36px);
  }

  /* ============================================================
     RESPONSIVE
     ============================================================
     MANTENER: los dos bloques siguientes cambian flex-direction
     en .btn-group (layout estructural) → deben quedarse.
     Los valores de padding/min-width/min-height ya son fluidos
     via variables, así que esas líneas se eliminan de aquí.
     ============================================================ */

  @media (max-width: 768px) {

    /* MANTENER: flex-direction cambia layout */
    .btn-group {
      flex-direction: column;
    }

    /* MANTENER: width 100% + flex:none cambia layout */
    .btn-group .btn {
      width: 100%;
      flex: none;
      min-width: auto;
    }
  }

  @media (max-width: 480px) {
    .btn-group {
      gap: 8px;
    }

  }

}