/* Base para todos los botones personalizados */
.btn-app {
    height: 1.8rem;
    line-height: 1.8rem;
    padding: 0 1rem;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: none;
    border-radius: 0.5rem;
    transition: all 0.25s ease;
    font-weight: 500;
    cursor: pointer;
}

/* Estilo base del botón */
.btn {
    border: 2px solid transparent;
    transition: all 0.2s ease-in-out;
}

    /* Foco y activo en botones (ESTILO B) */
    .btn:focus,
    .btn:active,
    .btn:active:focus {
        border: 2px solid black !important;
        box-shadow: 0 0 4px white !important;
    }
/* ==========================================
   BASE GENERAL BOTONES APP
========================================== */
.btn-app{
    height: 1.8rem;
    padding: 0 1rem;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 2px solid transparent;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

    /* ==========================================
   FOCUS / ACTIVE SOLO BOTONES APP
========================================== */
    .btn-app:focus,
    .btn-app:active,
    .btn-app:active:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0,0,0,.15);
    }

/* ==========================================
   BOTÓN FINO
========================================== */
.boton-fino {
    /*margin-left: 1rem;*/
    padding: 2px 8px;
    font-size: 0.82rem;
    min-height: 28px;
    line-height: 1.1;
    border-radius: 4px;
    font-weight: 400;
}

.boton-extrafino{
    height:1rem;
}

/* ==========================================
   NUEVO
========================================== */
.btn-nuevo {
    background-color: #84cc16;
    color: white;
}

    .btn-nuevo:hover {
        background-color: white;
        color: black;
        border-color: #84cc16;
    }

    .btn-nuevo:active {
        box-shadow: 0 0 0 3px #84cc16;
        transform: scale(0.98);
    }

/* ==========================================
   ACEPTAR / GRABAR / MODIFICAR
========================================== */
    .btn-aceptar {
        background-color: #973aed85;
        color: white;
    }

    .btn-aceptar:hover {
        background-color: white;
        color: black;
        border-color: #7c3aed;
    }

    .btn-aceptar:active {
        box-shadow: 0 0 0 3px #7c3aed;
        transform: scale(0.98);
    }

/* ==========================================
   CANCELAR / CERRAR / VOLVER
========================================== */
.btn-cancelar {
    background-color: #06b6d4;
    color: white;
}

    .btn-cancelar:hover {
        background-color: white;
        color: black;
        border-color: #06b6d4;
    }

    .btn-cancelar:active {
        box-shadow: 0 0 0 3px #06b6d4;
        transform: scale(0.98);
    }

/* ==========================================
   BORRAR
========================================== */
.btn-borrar {
    background-color: #ef4444;
    color: white;
    width: 1rem;
    height: 1rem; /* clave para que sea cuadrado */
    font-size: 0.5rem;
    display: flex; /* centrado con flex */
    align-items: center; /* vertical */
    justify-content: center; /* horizontal */
    border-radius: 0.25rem;
    border: 1px solid transparent;
    padding: 0; /* que no meta relleno raro */
}

    .btn-borrar:hover {
        background-color: white;
        color: #ef4444;
        border-color: #ef4444;
    }

    .btn-borrar:active {
        box-shadow: 0 0 0 3px #ef4444;
        transform: scale(0.98);
    }

/* ==========================================
   PAGAR
========================================== */
.btn-pagar {
    background-color: #fb7185;
    color: white;
}

    .btn-pagar:hover {
        background-color: white;
        color: black;
        border-color: #fb7185;
    }

    .btn-pagar:active {
        box-shadow: 0 0 0 3px #fb7185;
        transform: scale(0.98);
    }

/* ==========================================
   IMPRIMIR / OTROS
========================================== */
.btn-otros {
    background-color: #fbbf24;
    color: black;
}

    .btn-otros:hover {
        background-color: white;
        color: black;
        border-color: #fbbf24;
    }

    .btn-otros:active {
        box-shadow: 0 0 0 3px #fbbf24;
        transform: scale(0.98);
    }