.a_btn,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.1rem;
    border-radius: 0.7rem;
    border: none;
    font: 700 0.82rem "Ubuntu", sans-serif;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, filter .15s ease;
}

.a_btn:hover,
button:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

/* Botón con un ícono SVG (currentColor, sigue el color de texto del botón)
   antes del texto - mismo criterio que los íconos vectoriales de
   avatar_entidad.js (viewBox 24x24, fill=currentColor). */
.icono_svg_btn svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.a_btn:active,
button:active {
    transform: scale(0.95);
}

/* Mientras se espera la respuesta de una llamada a la API (ver
   InstanciaAJAX.js::consultaApi()) - pointer-events:none bloquea un segundo
   click de verdad (el evento ni siquiera llega al botón), no es solo
   estético. */
.a_btn_cargando {
    pointer-events: none;
    opacity: 0.6;
    cursor: wait;
}

.btn_principal {
    background: var(--base);
    color: var(--base_clara);
}

/* Con un solo hilo de color en toda la paleta (ver variables.css), el
   relleno de base_clara solo no alcanza para separarse de una .tarjeta que
   comparte el mismo matiz - el borde en --base le da un límite nítido
   contra cualquier fondo, tarjeta o no. */
.btn_secundario {
    background: var(--base_clara);
    color: var(--base);
    border: 1.5px solid var(--base);
}

.btn_verde {
    background: var(--bien_fondo);
    color: var(--bien);
}

.btn_rojo {
    background: var(--mal_fondo);
    color: var(--mal);
}

.btn_no_relevante {
    padding: 0.35rem 0.7rem;
    font-size: 0.68rem;
    background: var(--texto_fondo);
    color: var(--texto);
}

.btn_todo_el_ancho {
    width: 100%;
}

/* Reservado para estados que necesitan llamar la atención de verdad (ej.
   "hay pagos vencidos") - a diferencia del resto, este sí ignora hover
   normal mientras titila. Sin uso activo hoy, se deja disponible. */
@keyframes parpadeo_btn_advertencia {
    0%, 100% { box-shadow: 0 0 0 0 var(--importante_fondo); }
    50% { box-shadow: 0 0 0 .3rem var(--importante_fondo); }
}

.titila_btn_advertencia {
    background: var(--importante_fondo);
    color: var(--importante);
    animation: parpadeo_btn_advertencia 2s infinite;
}

@keyframes parpadeo_btn_mal {
    0%, 100% { box-shadow: 0 0 0 0 var(--mal_fondo); }
    50% { box-shadow: 0 0 0 .3rem var(--mal_fondo); }
}

.titila_btn_mal {
    background: var(--mal_fondo);
    color: var(--mal);
    animation: parpadeo_btn_mal 2s infinite;
}