/* ==========================================================================
   BOTONES - Facturación Electrónica RD
   Extraído de dom_fe_custom.css y Home_razor.css
   ========================================================================== */

/* ----------------------------------------
   BOTÓN BASE
   ---------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    font-family: var(--fe-font-primary);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 2px solid transparent;
    border-radius: var(--fe-border-radius);
    transition: all var(--fe-transition);
}

.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(127, 190, 65, 0.25);
}

.btn:disabled,
.btn.disabled {
    opacity: 0.65;
    pointer-events: none;
}

/* ----------------------------------------
   BOTÓN PRIMARIO (Verde)
   Colores: --fe-primary (#7fbe41)
   ---------------------------------------- */
.btn-primary {
    color: #fff;
    background-color: var(--fe-primary);
    border-color: var(--fe-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    background-color: var(--fe-primary-dark);
    border-color: var(--fe-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--fe-shadow);
}

.btn-primary:active {
    transform: translateY(0);
}

/* ----------------------------------------
   BOTÓN SECUNDARIO (Azul oscuro)
   Colores: --fe-secondary (#182952)
   ---------------------------------------- */
.btn-secondary {
    color: #fff;
    background-color: var(--fe-secondary);
    border-color: var(--fe-secondary);
}

.btn-secondary:hover,
.btn-secondary:focus {
    color: #fff;
    background-color: var(--fe-secondary-dark);
    border-color: var(--fe-secondary-dark);
    transform: translateY(-2px);
    box-shadow: var(--fe-shadow);
}

/* ----------------------------------------
   BOTÓN OUTLINE PRIMARIO
   ---------------------------------------- */
.btn-outline-primary {
    color: var(--fe-primary);
    background-color: transparent;
    border-color: var(--fe-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff;
    background-color: var(--fe-primary);
    border-color: var(--fe-primary);
}

/* ----------------------------------------
   BOTÓN OUTLINE SECUNDARIO
   ---------------------------------------- */
.btn-outline-secondary {
    color: var(--fe-secondary);
    background-color: transparent;
    border-color: var(--fe-secondary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: #fff;
    background-color: var(--fe-secondary);
    border-color: var(--fe-secondary);
}

/* ----------------------------------------
   BOTÓN LINK
   ---------------------------------------- */
.btn-link {
    color: var(--fe-primary);
    background-color: transparent;
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--fe-primary-dark);
    text-decoration: underline;
    transform: none;
    box-shadow: none;
}

/* ----------------------------------------
   TAMAÑOS
   ---------------------------------------- */
.btn-sm {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: var(--fe-border-radius-sm);
}

.btn-lg {
    padding: 0.875rem 2rem;
    font-size: 1.125rem;
    border-radius: var(--fe-border-radius-lg);
}

/* ----------------------------------------
   BOTÓN BLOCK
   ---------------------------------------- */
.btn-block {
    display: flex;
    width: 100%;
}

/* ----------------------------------------
   BOTÓN CON ICONO
   ---------------------------------------- */
.btn .btn-icon {
    width: 18px;
    height: auto;
    transition: transform var(--fe-transition-fast);
}

.btn-primary .btn-icon,
.btn-secondary .btn-icon {
    filter: brightness(0) invert(1);
}

.btn:hover .btn-icon {
    transform: translateX(4px);
}

/* ----------------------------------------
   BOTONES ESPECÍFICOS DEL PROYECTO
   ---------------------------------------- */

/* Botón de Login en el Header */
.btn-login {
    padding: 0.5rem 1.25rem;
    font-size: 0.9375rem;
    border-radius: var(--fe-border-radius);
}

/* Botón de elegir plan */
.btn-choose-plan {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Botón ver todos los planes */
.btn-view-all {
    padding: 0.75rem 2rem;
}

/* Botón CTA del Hero */
.btn-cta {
    padding: 0.875rem 2rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-cta .cta-icon {
    width: 20px;
    height: auto;
}

/* Botón de enviar formulario */
.botonEnviarPlan {
    font-family: var(--fe-font-primary);
    font-weight: 500;
    font-size: 1rem;
}

/* ----------------------------------------
   BOTÓN CON SOMBRA (del original)
   ---------------------------------------- */
.btn-shadow {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25);
}

.btn-shadow:hover {
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3);
}

/* ----------------------------------------
   RESPONSIVE
   ---------------------------------------- */
@media (max-width: 767.98px) {
    .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
    
    .btn-cta {
        width: 100%;
    }
}