/* ════════════════════════════════════════════════════════════
   VARIABLES GLOBALES
════════════════════════════════════════════════════════════ */
:root {
    /* Base */
    --padding-btn: 0.4rem 1rem;
    --border-btn: 6px;
    --fontsize-btn: 1rem;
    --fontfamily-btn: 'Poppins', sans-serif;
    /* ── Paleta de colores por tipo ── */
    --color-nuevo: #FF6B00;
    --color-eliminar: #F50D0D;
    --color-buscar: #0F223D;
    --color-guardar: #28A745;
    --color-cerrar: #5D6D7E;
    --color-pdf: #C0392B;
    --color-excel: #1D6F42;
    --color-word: #1A5099;
    --color-carga: #7D3C98;
    --color-volver: #5D6D7E;
    --color-editar: #D4A017;
    --color-asociar: #0E7490;
    --color-desvincular: #C2770A;
    --color-habilitar: #28A745;
    --color-deshabilitar: #4A5568;
    /* ── Hover (versión oscurecida) ── */
    --hover-nuevo: #e05a00;
    --hover-eliminar: #F50D0D;
    --hover-buscar: #1a3566;
    --hover-guardar: #1e8035;
    --hover-cerrar: #4a5768;
    --hover-pdf: #a93226;
    --hover-excel: #155a35;
    --hover-word: #154280;
    --hover-carga: #6c3483;
    --hover-volver: #4a5768;
    --hover-editar: #b8860b;
    --hover-asociar: #0a5f75;
    --hover-desvincular: #a0620a;
    --hover-habilitar: #1e8035;
    --hover-deshabilitar: #2d3748;
}

/* 
    Contenedores 
*/

.grid-btn-contenedor {
    padding-bottom: 1.2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.form-btn-contenedor {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1.2rem;
}

/* 
   BASE COMPARTIDA — aplica a btn-solid y btn-no-solid

*/


.btn-solid,
.btn-no-solid {
    padding: var(--padding-btn);
    border-radius: var(--border-btn);
    font-family: var(--fontfamily-btn) !important;
    font-size: var(--fontsize-btn);
    cursor: pointer;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.18s ease, box-shadow 0.25s ease;
    border: 2px solid transparent;
}

    /* ── Shimmer sweep ── */
    .btn-solid::after,
    .btn-no-solid::after {
        content: '';
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
        transform: skewX(-20deg);
        transition: left 0.45s ease;
        pointer-events: none;
    }

    .btn-solid:hover::after,
    .btn-no-solid:hover::after {
        left: 130%;
    }

    /* ── Elevación hover ── */
    .btn-solid:hover,
    .btn-no-solid:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    }

    /* ── Press effect ── */
    .btn-solid:active,
    .btn-no-solid:active {
        transform: translateY(0px) scale(0.98);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
        transition: transform 0.08s ease, box-shadow 0.08s ease;
    }

    /* ── Focus accesible ── */
    .btn-solid:focus-visible,
    .btn-no-solid:focus-visible {
        outline: 2px solid rgba(0, 0, 0, 0.35);
        outline-offset: 3px;
    }

    /* ── Icono ::before base ── */
    .btn-solid::before,
    .btn-no-solid::before {
        font-family: 'Font Awesome 5 Free' !important;
        font-weight: 900 !important;
        margin-right: 0.4rem;
        display: inline-block;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        transition: transform 0.2s ease;
    }

    .btn-solid:hover::before,
    .btn-no-solid:hover::before {
        transform: scale(1.15);
    }

/* ── Contenedores ── */
.btn-contenedor {
    padding: 1.2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}


/* ════════════════════════════════════════════════════════════
   VARIANTE SÓLIDA — btn-solid
   Fondo: color del tipo | Letra: blanco | Border: transparente
════════════════════════════════════════════════════════════ */

/* nuevo */
.btn-solid.nuevo {
    background: var(--color-nuevo);
    border-color: var(--color-nuevo);
    color: #fff !important;
}

    .btn-solid.nuevo:hover {
        background: var(--hover-nuevo);
        border-color: var(--hover-nuevo);
        color: #fff !important;
    }

/* eliminar */
.btn-solid.eliminar {
    background: var(--color-eliminar);
    border-color: var(--color-eliminar);
    color: #fff !important;
}

    .btn-solid.eliminar:hover {
        background: var(--hover-eliminar);
        border-color: var(--hover-eliminar);
        color: #fff !important;
    }

/* buscar */
.btn-solid.buscar {
    background: var(--color-buscar);
    border-color: var(--color-buscar);
    color: #fff !important;
}

    .btn-solid.buscar:hover {
        background: var(--hover-buscar);
        border-color: var(--hover-buscar);
        color: #fff !important;
    }

/* guardar */
.btn-solid.guardar {
    background: var(--color-guardar);
    border-color: var(--color-guardar);
    color: #fff !important;
}

    .btn-solid.guardar:hover {
        background: var(--hover-guardar);
        border-color: var(--hover-guardar);
        color: #fff !important;
    }

/* cerrar */
.btn-solid.cerrar {
    background: var(--color-cerrar);
    border-color: var(--color-cerrar);
    color: #fff !important;
}

    .btn-solid.cerrar:hover {
        background: var(--hover-cerrar);
        border-color: var(--hover-cerrar);
        color: #fff !important;
    }

/* pdf */
.btn-solid.pdf {
    background: var(--color-pdf);
    border-color: var(--color-pdf);
    color: #fff !important;
}

    .btn-solid.pdf:hover {
        background: var(--hover-pdf);
        border-color: var(--hover-pdf);
        color: #fff !important;
    }

/* excel */
.btn-solid.excel {
    background: var(--color-excel);
    border-color: var(--color-excel);
    color: #fff !important;
}

    .btn-solid.excel:hover {
        background: var(--hover-excel);
        border-color: var(--hover-excel);
        color: #fff !important;
    }

/* word */
.btn-solid.word {
    background: var(--color-word);
    border-color: var(--color-word);
    color: #fff !important;
}

    .btn-solid.word:hover {
        background: var(--hover-word);
        border-color: var(--hover-word);
        color: #fff !important;
    }

/* carga-masiva */
.btn-solid.carga-masiva {
    background: var(--color-carga);
    border-color: var(--color-carga);
    color: #fff !important;
}

    .btn-solid.carga-masiva:hover {
        background: var(--hover-carga);
        border-color: var(--hover-carga);
        color: #fff !important;
    }

/* volver */
.btn-solid.volver {
    background: var(--color-volver);
    border-color: var(--color-volver);
    color: #fff !important;
}

    .btn-solid.volver:hover {
        background: var(--hover-volver);
        border-color: var(--hover-volver);
        color: #fff !important;
    }

/* editar */
.btn-solid.editar {
    background: var(--color-editar);
    border-color: var(--color-editar);
    color: #fff !important;
}

    .btn-solid.editar:hover {
        background: var(--hover-editar);
        border-color: var(--hover-editar);
        color: #fff !important;
    }

.btn-solid.asociar {
    background: var(--color-asociar);
    border-color: var(--color-asociar);
    color: #fff !important;
}

    .btn-solid.asociar:hover {
        background: var(--hover-asociar);
        border-color: var(--hover-asociar);
        color: #fff !important;
    }

.btn-solid.desvincular {
    background: var(--color-desvincular);
    border-color: var(--color-desvincular);
    color: #fff !important;
}

    .btn-solid.desvincular:hover {
        background: var(--hover-desvincular);
        border-color: var(--hover-desvincular);
        color: #fff !important;
    }

.btn-solid.habilitar {
    background: var(--color-habilitar);
    border-color: var(--color-habilitar);
    color: #fff !important;
}

    .btn-solid.habilitar:hover {
        background: var(--hover-habilitar);
        border-color: var(--hover-habilitar);
        color: #fff !important;
    }

.btn-solid.deshabilitar {
    background: var(--color-deshabilitar);
    border-color: var(--color-deshabilitar);
    color: #fff !important;
}

    .btn-solid.deshabilitar:hover {
        background: var(--hover-deshabilitar);
        border-color: var(--hover-deshabilitar);
        color: #fff !important;
    }

/* 
   VARIANTE OUTLINE — btn-no-solid
   Fondo: blanco | Letra: color del tipo | Border: color del tipo
   Hover: rellena con el color (efecto fill-in)
 */

/* nuevo */
.btn-no-solid.nuevo {
    background: #fff;
    border-color: var(--color-nuevo);
    color: var(--color-nuevo) !important;
}

    .btn-no-solid.nuevo:hover {
        background: var(--color-nuevo);
        border-color: var(--color-nuevo);
        color: #fff !important;
    }

/* eliminar */
.btn-no-solid.eliminar {
    background: #fff;
    border-color: var(--color-eliminar);
    color: var(--color-eliminar) !important;
}

    .btn-no-solid.eliminar:hover {
        background: var(--color-eliminar);
        border-color: var(--color-eliminar);
        color: #fff !important;
    }

/* buscar */
.btn-no-solid.buscar {
    background: #fff;
    border-color: var(--color-buscar);
    color: var(--color-buscar) !important;
}

    .btn-no-solid.buscar:hover {
        background: var(--color-buscar);
        border-color: var(--color-buscar);
        color: #fff !important;
    }

/* guardar */
.btn-no-solid.guardar {
    background: #fff;
    border-color: var(--color-guardar);
    color: var(--color-guardar) !important;
}

    .btn-no-solid.guardar:hover {
        background: var(--color-guardar);
        border-color: var(--color-guardar);
        color: #fff !important;
    }

/* cerrar */
.btn-no-solid.cerrar {
    background: #fff;
    border-color: var(--color-cerrar);
    color: var(--color-cerrar) !important;
}

    .btn-no-solid.cerrar:hover {
        background: var(--color-cerrar);
        border-color: var(--color-cerrar);
        color: #fff !important;
    }

/* pdf */
.btn-no-solid.pdf {
    background: #fff;
    border-color: var(--color-pdf);
    color: var(--color-pdf) !important;
}

    .btn-no-solid.pdf:hover {
        background: var(--color-pdf);
        border-color: var(--color-pdf);
        color: #fff !important;
    }

/* excel */
.btn-no-solid.excel {
    background: #fff;
    border-color: var(--color-excel);
    color: var(--color-excel) !important;
}

    .btn-no-solid.excel:hover {
        background: var(--color-excel);
        border-color: var(--color-excel);
        color: #fff !important;
    }

/* word */
.btn-no-solid.word {
    background: #fff;
    border-color: var(--color-word);
    color: var(--color-word) !important;
}

    .btn-no-solid.word:hover {
        background: var(--color-word);
        border-color: var(--color-word);
        color: #fff !important;
    }

/* carga-masiva */
.btn-no-solid.carga-masiva {
    background: #fff;
    border-color: var(--color-carga);
    color: var(--color-carga) !important;
}

    .btn-no-solid.carga-masiva:hover {
        background: var(--color-carga);
        border-color: var(--color-carga);
        color: #fff !important;
    }

/* volver */
.btn-no-solid.volver {
    background: #fff;
    border-color: var(--color-volver);
    color: var(--color-volver) !important;
}

    .btn-no-solid.volver:hover {
        background: var(--color-volver);
        border-color: var(--color-volver);
        color: #fff !important;
    }

/* editar */
.btn-no-solid.editar {
    background: #fff;
    border-color: var(--color-editar);
    color: var(--color-editar) !important;
}

    .btn-no-solid.editar:hover {
        background: var(--color-editar);
        border-color: var(--color-editar);
        color: #fff !important;
    }

.btn-no-solid.asociar {
    background: #fff;
    border-color: var(--color-asociar);
    color: var(--color-asociar) !important;
}

    .btn-no-solid.asociar:hover {
        background: var(--color-asociar);
        border-color: var(--color-asociar);
        color: #fff !important;
    }

.btn-no-solid.desvincular {
    background: #fff;
    border-color: var(--color-desvincular);
    color: var(--color-desvincular) !important;
}

    .btn-no-solid.desvincular:hover {
        background: var(--color-desvincular);
        border-color: var(--color-desvincular);
        color: #fff !important;
    }

.btn-no-solid.habilitar {
    background: #fff;
    border-color: var(--color-habilitar);
    color: var(--color-habilitar) !important;
}

    .btn-no-solid.habilitar:hover {
        background: var(--color-habilitar);
        border-color: var(--color-habilitar);
        color: #fff !important;
    }

.btn-no-solid.deshabilitar {
    background: #fff;
    border-color: var(--color-deshabilitar);
    color: var(--color-deshabilitar) !important;
}

    .btn-no-solid.deshabilitar:hover {
        background: var(--color-deshabilitar);
        border-color: var(--color-deshabilitar);
        color: #fff !important;
    }
/*
   ICONOS (contenido ::before — igual para ambas variantes)

*/
.nuevo::before {
    content: '\f067';
}
/* fa-plus          */
.eliminar::before {
    content: '\f2ed';
}
/* fa-trash-alt     */
.buscar::before {
    content: '\f002';
}
/* fa-search        */
.guardar::before {
    content: '\f1d8';
}
/* fa-paper-plane   */
.cerrar::before {
    content: '\f00d';
}
/* fa-times         */
.pdf::before {
    content: '\f1c1';
}
/* fa-file-pdf      */
.excel::before {
    content: '\f1c3';
}
/* fa-file-excel    */
.word::before {
    content: '\f1c2';
}
/* fa-file-word     */
.carga-masiva::before {
    content: '\f093';
}
/* fa-upload        */
.volver::before {
    content: '\f053';
}
/* fa-chevron-left  */
.editar::before {
    content: '\f044';
}
/* fa-edit          */

.asociar::before {
    content: '\f0c1';
}
/* fa-link         */
.desvincular::before {
    content: '\f127';
}
/* fa-unlink       */
.habilitar::before {
    content: '\f205';
}
/* fa-toggle-on    */
.deshabilitar::before {
    content: '\f204';
}
/* fa-toggle-off   */