/* Definición de variables CSS personalizadas (opcional, pero buena práctica) */
:root {
    --my-btn-padding-y: 0.375rem;
    --my-btn-padding-x: 0.75rem;
    --my-btn-font-weight: 400;
    --my-btn-line-height: 1.5;
    --my-btn-border-width: 1px; /* Típicamente 1px */
    --my-btn-border-radius: 0.375rem; /* Típicamente 0.375rem o 6px */
    --my-btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    --my-btn-disabled-opacity: 0.65;
    --my-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25); /* Color de foco azul de Bootstrap */
}

/* Clase base para tu botón/ancla con estilo de botón */
.custom-boton {
    display: inline-block; /* Permite ancho y alto, pero se comporta como texto */
    padding: var(--my-btn-padding-y) var(--my-btn-padding-x); /* Relleno interno */
    font-size: 1rem; /* Tamaño de fuente por defecto, ajusta si es necesario */
    font-weight: var(--my-btn-font-weight); /* Peso de la fuente */
    line-height: var(--my-btn-line-height); /* Altura de línea */
    text-align: center;
    text-decoration: none; /* Crucial para enlaces para quitar el subrayado */
    vertical-align: middle; /* Alineación vertical */
    cursor: pointer; /* Indica que es clickeable */
    user-select: none; /* Evita selección de texto */

    /* Bordes y Esquinas */
    border: var(--my-btn-border-width) solid transparent; /* Borde inicial transparente */
    border-radius: var(--my-btn-border-radius); /* Bordes redondeados */

    /* Colores base (pueden ser override por clases de color como .boton-primary) */
    color: #fff; /* Color de texto por defecto (similar a --bs-body-color) */
    background-color: #0d6efd; /* Fondo transparente por defecto */

    /* Transiciones para suavizar los cambios de estado (hover, focus) */
    transition: var(--my-btn-transition);

    /* Otros estilos comunes de botón (opcional, pero mejora la experiencia) */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); /* Sombra sutil */
    justify-self: start; /* O center, end. Esto lo alinea horizontalmente dentro de su celda */
    align-self: center;
}

/* Estado al pasar el ratón por encima (Hover) */
.custom-boton:hover {
    color: #fff; /* Color de texto blanco en hover */
    background-color: #0b5ed7; /* Azul más oscuro en hover */
    border-color: #0a58ca; /* Borde más oscuro en hover */
}

/* Estado al enfocar (Focus) */
.custom-boton:focus {
    outline: 0; /* Elimina el contorno por defecto del navegador */
    box-shadow: var(--my-btn-focus-box-shadow); /* Sombra de foco azul */
}

/* Estado Activo/Clic (Active) */
.custom-boton:active {
    background-color: #0a58ca; /* Color aún más oscuro al presionar */
    border-color: #0952be;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* Sombra hundida */
}


/* Clase para el botón primario (color azul) */
.boton-primary {
    color: #fff; /* Texto blanco */
    background-color: #0d6efd; /* Azul primario */
    border-color: #0d6efd; /* Borde del mismo color */
}

/* Estado Hover para el botón primario */
.boton-primary:hover {
    color: #fff;
    background-color: #0b5ed7; /* Azul ligeramente más oscuro en hover */
    border-color: #0a58ca;
}

/* Estado Focus para el botón primario */
.boton-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, .5); /* Sombra de foco específica para primary */
}

/* Estado Active para el botón primario */
.boton-primary:active {
    background-color: #0a58ca;
    border-color: #0952be;
}

/* Clases para estados deshabilitados (opcional, para elementos <button> o JS en <a>) */
.custom-boton.disabled,
.custom-boton:disabled {
    pointer-events: none; /* No responde a eventos de mouse */
    opacity: var(--my-btn-disabled-opacity); /* Reduce la opacidad */
}