.tabla {

    border-spacing: 0;
    margin: 0 auto 2rem auto;
    width: 100%;

    caption {
        background-color: var(--color-2);
        border-radius: .5rem;
        color: var(--color-3);
        margin-bottom: 1rem;
        padding: .6rem;
    }

    th, td {
        padding: .6rem 1rem;
        text-align: center;
    }

    thead {

        display: none;

        th {
            border-bottom: 2px solid var(--color-4);
            color: var(--color-4);
            text-transform: uppercase;
        }
        th.js-campo {
            cursor: pointer;
        }
        th.js-campo:hover {
            opacity: .6;
        }
    }

    tr {
        display: flex;
        flex-direction: column;
    }

    td {
        display: flex;
        align-items: center;
        gap: 2rem;
        font-style: italic;

        .color {
            border-radius: .5rem;
            padding: .8rem;
        }

        img {
            width: 12rem;
        }

        span {
            font-style: normal;
            font-weight: 600;
            width: 30%;
            text-align: left;
        }

        .flex-center {
            display: flex;
            align-items: center;
            gap: 1rem;
            justify-content: center;
            padding: .5rem;
        }

        .acciones {

            display: flex;
            font-style: normal;
            gap: 2rem;
            justify-content: end;
            width: 100%;

            .btn {
                border-radius: .5rem;
                color: var(--color-3);
                cursor: pointer;
                height: 3rem;
                opacity: .5;
                padding: .2rem;
                width: 3rem;

                img {
                    pointer-events: none;
                    width: 2.4rem;
                }
            }

            .btn:hover {
                opacity: 1;
            }

            .btn.success {
                background-color: var(--color-4);
            }

            .btn.cancel {
                background-color: var(--rojo-2);
            }
        }
    }

    td.sin-registros {
        color: var(--rojo-2);
        font-size: 1.8rem;
        padding: 2rem;
    }

    tbody tr:nth-child(even) {
        background-color: var(--color-4-1);
        color: var(--color-4);
    }

    tbody tr:nth-child(odd){
        color: var(--color-4);
    }
}

.tabla.max-w-60rem {
    max-width: 60rem;
}

@media(min-width: 765px) {

    .tabla {

        thead, tr, td { display: revert; }

        td { 
            font-style: revert;

            .acciones { justify-content: center; }
        }

        td img { width: 6rem; }

        td span { display: none; }
    }
    
}