﻿.loading-skeleton {
    pointer-events: none;
    animation: loading-skeleton 1s infinite alternate;
}

    .loading-skeleton h1, .loading-skeleton h2, .loading-skeleton h3, .loading-skeleton h4, .loading-skeleton h5, .loading-skeleton h6,
    .loading-skeleton p, .loading-skeleton li, .loading-skeleton strong
    .loading-skeleton label,
    .loading-skeleton .form-control,
    .loading-skeleton td {
        color: transparent;
        appearance: none;
        -webkit-appearance: none;
        background-color: #eee;
        border-color: #eee;
        margin: 0.3em;
    }

    .loading-skeleton .btn {
        display: inline-block; /* Cambio para que los botones ocupen espacio */
        width: 10rem; /* Cambio para que los botones se expandan al ancho completo */
        height: calc(1.5em + .5rem + 2px); /* Altura estándar para botones */
        background-color: #eee;
        border-radius: 4px; /* Bordes redondeados para botones */
        margin: 0.3em; /* Margen alrededor de los botones */
        border: none; /* Sin borde */
    }

        .loading-skeleton h1::placeholder, .loading-skeleton h2::placeholder, .loading-skeleton h3::placeholder, .loading-skeleton h4::placeholder, .loading-skeleton h5::placeholder, .loading-skeleton h6::placeholder,
        .loading-skeleton p::placeholder, .loading-skeleton li::placeholder,
        .loading-skeleton .btn::placeholder,
        .loading-skeleton label::placeholder,
        .loading-skeleton .form-control::placeholder,
        .loading-skeleton td::placeholder {
            color: transparent;
        }

@keyframes loading-skeleton {
    from {
        opacity: 0.4;
    }

    to {
        opacity: 1;
    }
}

.loading-skeleton fieldset {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.loading-skeleton legend {
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
    width: 10rem;
    height: 1.5rem;
    background-color: #eee;
    border-radius: 2rem;
}

.loading-skeleton img {
    filter: grayscale(100) contrast(0%) brightness(1.8);
    background-color: #eee;
    display: block;
    border: 1px solid #ddd;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
}

.loading-skeleton div.tab {
    width: 100%;
    flex-direction: column;
    display: flex;
}

.loading-skeleton ul.tab-ul {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
}
.loading-skeleton li.tab-li {
    padding-top: 2.2em;
    padding-left: 4.5em;
    padding-right: 4.5em;
    margin: 0.05em;
    border: 1px #adadad solid;
    background-color: #e7e7e7;
    border-top-left-radius: 0.25em;
    border-top-right-radius: 0.25em;
    border-bottom-left-radius: 0em;
    border-bottom-right-radius: 0em;
}
    .loading-skeleton li.tab-li.active {
        margin: 0;
        background-color: #FFFFFF;
        border-top: 2px #b30033 solid;
        border-left: 1px #919191 solid;
        border-right: 1px #919191 solid;
        border-bottom: 1px #FFFFFF solid;
    }

.loading-skeleton div.tab-panel {
    width: 100%;
    padding: 13em;
    background-color: #f9f9f9;
    border: var(--rz-tabs-border);
    box-shadow: var(--rz-tabs-shadow);
    flex: 1;
    overflow: auto;
}

.loading-skeleton table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}



/* Estilos para celdas de la tabla */
.loading-skeleton th, .loading-skeleton td {
    background-color: #eee;
    height: calc(1.5em + .5rem + 2px);
    border: 1px solid #ddd;
    animation: loading-skeleton 1s infinite alternate;
}

/* Estilos para una tabla con una columna */
.loading-skeleton table th:nth-child(1):nth-last-child(1),
.loading-skeleton table td:nth-child(1):nth-last-child(1) {
    width: 100%;
}

/* Estilos para una tabla con dos columnas */
.loading-skeleton table th:nth-child(1):nth-last-child(2),
.loading-skeleton table td:nth-child(1):nth-last-child(2),
.loading-skeleton table th:nth-child(2):nth-last-child(1),
.loading-skeleton table td:nth-child(2):nth-last-child(1) {
    width: 50%;
}

/* Estilos para una tabla con tres columnas */
.loading-skeleton table th:nth-child(1):nth-last-child(3),
.loading-skeleton table td:nth-child(1):nth-last-child(3),
.loading-skeleton table th:nth-child(3):nth-last-child(1),
.loading-skeleton table td:nth-child(3):nth-last-child(1),
.loading-skeleton table th:nth-child(2):nth-last-child(2),
.loading-skeleton table td:nth-child(2):nth-last-child(2) {
    width: 33.333%;
}
/* Estilos para una tabla con cuatro columnas */
.loading-skeleton table th:nth-child(1):nth-last-child(4),
.loading-skeleton table td:nth-child(1):nth-last-child(4),
.loading-skeleton table th:nth-child(2):nth-last-child(3),
.loading-skeleton table td:nth-child(2):nth-last-child(3),
.loading-skeleton table th:nth-child(3):nth-last-child(2),
.loading-skeleton table td:nth-child(3):nth-last-child(2),
.loading-skeleton table th:nth-child(4):nth-last-child(1),
.loading-skeleton table td:nth-child(4):nth-last-child(1) {
    width: 25%;
}

/* Estilos para una tabla con cinco columnas */
.loading-skeleton table th:nth-child(1):nth-last-child(5),
.loading-skeleton table td:nth-child(1):nth-last-child(5),
.loading-skeleton table th:nth-child(2):nth-last-child(4),
.loading-skeleton table td:nth-child(2):nth-last-child(4),
.loading-skeleton table th:nth-child(3):nth-last-child(3),
.loading-skeleton table td:nth-child(3):nth-last-child(3),
.loading-skeleton table th:nth-child(4):nth-last-child(2),
.loading-skeleton table td:nth-child(4):nth-last-child(2),
.loading-skeleton table th:nth-child(5):nth-last-child(1),
.loading-skeleton table td:nth-child(5):nth-last-child(1) {
    width: 20%;
}

/* Estilos para una tabla con cinco columnas */
.loading-skeleton table th:nth-child(1):nth-last-child(6),
.loading-skeleton table td:nth-child(1):nth-last-child(6),
.loading-skeleton table th:nth-child(2):nth-last-child(5),
.loading-skeleton table td:nth-child(2):nth-last-child(5),
.loading-skeleton table th:nth-child(3):nth-last-child(4),
.loading-skeleton table td:nth-child(3):nth-last-child(4),
.loading-skeleton table th:nth-child(4):nth-last-child(3),
.loading-skeleton table td:nth-child(4):nth-last-child(3),
.loading-skeleton table th:nth-child(5):nth-last-child(2),
.loading-skeleton table td:nth-child(5):nth-last-child(2),
.loading-skeleton table th:nth-child(6):nth-last-child(1),
.loading-skeleton table td:nth-child(6):nth-last-child(1) {
    width: 16.6%;
}
