/**
 * ═══════════════════════════════════════════════════════════════════════
 * BOTONES.CSS - Sistema de botones CTA para TOT0
 * ═══════════════════════════════════════════════════════════════════════
 * 
 * 5 variantes de botones CTA con soporte completo para iconos Lucide
 * Siguiendo la paleta sagrada: amarillo, cyan, magenta, negro, blanco
 * Espaciado basado en sistema áureo TOT0
 */

/* ═══════════════════════════════════════════════════════════════════════
   BASE COMÚN PARA TODOS LOS BOTONES CTA
   ═══════════════════════════════════════════════════════════════════════ */

.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s1);                             /* Espacio entre icono y texto */
    padding: var(--s2) var(--s3);               /* Padding áureo */
    text-decoration: none;
    border-radius: 0;
    font-weight: 600;
    font-size: var(--t0);
    line-height: var(--lh2);
    border: 1px solid var(--color-black);
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 44px;                           /* Área táctil mínima */
    min-width: 44px;
    width: auto;                                 /* Ancho automático según contenido */
    max-width: fit-content;                      /* Máximo ancho según contenido */
}

/* Iconos dentro de botones CTA */
.btn-cta [data-lucide] {
    width: var(--s2);
    height: var(--s2);
    stroke-width: 2;
    flex-shrink: 0;                             /* Evita que el icono se comprima */
}

/* ═══════════════════════════════════════════════════════════════════════
   VARIANTE 1: PRIMARY - Amarillo (Color principal del sistema)
   ═══════════════════════════════════════════════════════════════════════ */

.btn-cta-primary {
    background-color: transparent;
    color: var(--color-black);
    border: 1px solid var(--color-black);
}

.btn-cta-primary:hover {
    background-color: var(--primary-500);
    color: var(--color-black);
    border-color: var(--primary-500);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-cta-primary:hover [data-lucide] {
    color: var(--color-red);
}

.btn-cta-primary:focus {
    outline: 2px solid var(--color-yellow);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   VARIANTE 2: SECONDARY - Cyan (Color secundario vibrante)
   ═══════════════════════════════════════════════════════════════════════ */

.btn-cta-secondary {
    background-color: var(--color-cyan);
    color: var(--color-black);
    border-color: var(--color-cyan);
}

.btn-cta-secondary:hover {
    background-color: var(--color-black);
    color: var(--color-cyan);
    border-color: transparent;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-cta-secondary:focus {
    outline: 2px solid var(--color-cyan);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   VARIANTE 3: ACCENT - Magenta (Color de acento llamativo)
   ═══════════════════════════════════════════════════════════════════════ */

.btn-cta-accent {
    background-color: var(--color-magenta);
    color: var(--color-white);
    border-color: var(--color-magenta);
}

.btn-cta-accent:hover {
    background-color: var(--color-black);
    color: var(--color-magenta);
    border-color: transparent;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-cta-accent:focus {
    outline: 2px solid var(--color-magenta);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   VARIANTE 4: DARK - Negro (Elegante y contrastante)
   ═══════════════════════════════════════════════════════════════════════ */

.btn-cta-dark {
    background-color: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

.btn-cta-dark:hover {
    background-color: var(--color-cyan);
    color: var(--color-black);
    border-color: var(--color-cyan);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-cta-dark:focus {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   VARIANTE 5: GHOST - Transparente con borde (Sutil y elegante)
   ═══════════════════════════════════════════════════════════════════════ */

.btn-cta-ghost {
    background-color: transparent;
    color: var(--color-black);
    border-color: var(--color-black);
}

.btn-cta-ghost:hover {
    background-color: var(--color-cyan);
    color: var(--color-black);
    border-color: var(--color-cyan);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-cta-ghost:focus {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   MODIFICADORES DE TAMAÑO
   ═══════════════════════════════════════════════════════════════════════ */

/* Botón pequeño */
.btn-cta-sm {
    padding: var(--s1) var(--s2);
    font-size: var(--t-1);
    gap: calc(var(--s1) * 0.75);
}

.btn-cta-sm [data-lucide] {
    width: var(--s1);
    height: var(--s1);
}

/* Botón grande */
.btn-cta-lg {
    padding: var(--s3) var(--s4);
    font-size: var(--t1);
    gap: var(--s2);
}

.btn-cta-lg [data-lucide] {
    width: var(--s3);
    height: var(--s3);
}

/* ═══════════════════════════════════════════════════════════════════════
   MODIFICADORES ESPECIALES
   ═══════════════════════════════════════════════════════════════════════ */

/* Botón de ancho completo */
.btn-cta-full {
    width: 100%;
}

/* Botón solo icono (cuadrado) */
.btn-cta-icon-only {
    padding: var(--s2);
    aspect-ratio: 1;
}

.btn-cta-icon-only [data-lucide] {
    width: var(--s2);
    height: var(--s2);
}

/* ═══════════════════════════════════════════════════════════════════════
   ESTADOS ESPECIALES
   ═══════════════════════════════════════════════════════════════════════ */

/* Botón deshabilitado */
.btn-cta:disabled,
.btn-cta.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.btn-cta:disabled:hover,
.btn-cta.disabled:hover {
    transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE - MEJORAS MÓVILES
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .btn-cta {
        min-height: 44px;                       /* Área táctil iOS */
        min-width: 44px;
    }
    
    /* En móvil, los botones grandes se ajustan */
    .btn-cta-lg {
        padding: var(--s2) var(--s3);
        font-size: var(--t0);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   EJEMPLOS DE USO
   ═══════════════════════════════════════════════════════════════════════
   
   <!-- Botón primario con icono -->
   <a href="#" class="btn-cta btn-cta-primary">
       <i data-lucide="arrow-right"></i>
       Explorar Sistema
   </a>
   
   <!-- Botón secundario solo icono -->
   <button class="btn-cta btn-cta-secondary btn-cta-icon-only">
       <i data-lucide="heart"></i>
   </button>
   
   <!-- Botón ghost grande -->
   <a href="#" class="btn-cta btn-cta-ghost btn-cta-lg">
       <i data-lucide="download"></i>
       Descargar Gratis
   </a>
   
   <!-- Botón accent pequeño -->
   <button class="btn-cta btn-cta-accent btn-cta-sm">
       <i data-lucide="plus"></i>
       Añadir
   </button>
   
   <!-- Botón dark ancho completo -->
   <a href="#" class="btn-cta btn-cta-dark btn-cta-full">
       <i data-lucide="check"></i>
       Confirmar Pedido
   </a>
   
   ═══════════════════════════════════════════════════════════════════════ */