/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */


.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    padding: 0.875rem 1rem;
    background-color: #6c26ba;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease-in-out;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Efecto hover con tu morado más claro */
.btn-primary:hover {
    background-color: #8c39c5;
}

.btn-custom {
    /* Disposición y espaciado */
    display: inline-block;
    padding: 0.625rem 1.25rem;

    /* Tipografía */
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: #ffffff;
    text-align: center;

    /* Apariencia */
    background-color: #6c26ba;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);

    /* Interactividad */
    cursor: pointer;
    transition-property: background-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Estado Hover: cambia el color de fondo */
.btn-custom:hover {
    background-color: #b754e2;
}

/* Estado Focus: elimina el contorno y añade un "anillo" de foco */
.btn-custom:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    /* Replicando focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 */
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6;
}