.tabla-responsive {
    width: 100%;
    border-collapse: collapse;
}

    .tabla-responsive th {
        background-color: #475791; /*#6B28A9; */
        color: white;
        font-weight: bold;
        padding: 8px;
        text-align: left;
    }

    .tabla-responsive td {
        padding: 8px;
        border: 1px solid #ddd;
        color: #475791; /*#6B28A9; */
        font-size: 14px;
        font-family: Consolas;
    }

    .tabla-responsive tr:nth-child(even) {
        background-color: #D2D6E6; /* #EDE0F8; Color de barras */
    }

    .tabla-responsive tr:nth-child(odd) {
        background-color: #f9f9f9;
    }

@media screen and (max-width: 600px) {
    .tabla-responsive thead {
        display: none;
    }

    .tabla-responsive,
    .tabla-responsive tbody,
    .tabla-responsive tr,
    .tabla-responsive td {
        display: block;
        width: 100%;
    }

        .tabla-responsive tr {
            margin-bottom: 15px;
        }

        .tabla-responsive td {
            text-align: right;
            padding-left: 50%;
            position: relative;
        }

            .tabla-responsive td::before {
                content: attr(data-label);
                position: absolute;
                left: 10px;
                width: 45%;
                padding-left: 10px;
                font-weight: bold;
                text-align: left;
            }
}

.hr-Primario {
    border: none;
    height: 1px;
    background-color: #475791;
    animation: expandirLinea 1s ease-out forwards;
}

.hr-Primario-animada {
    border: none;
    border-top: 1px solid #475791;
    width: 0;
    animation: expandirLinea 1s ease-out forwards;
}

.hr-purpura {
    border: none;
    height: 1px;
    background-color: #BC8FE5;
    animation: expandirLinea 1s ease-out forwards;
}

.hr-purpura-animada {
    border: none;
    border-top: 1px solid #BC8FE5;
    width: 0;
    animation: expandirLinea 1s ease-out forwards;
}

@keyframes expandirLinea {
    to {
        width: 100%;
    }
}

.animacion-derecha-izquierda {
    opacity: 0;
    transform: translateX(100%);
    animation: mostrarDeslizar 1s ease-out forwards;
}

@keyframes mostrarDeslizar {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}