:root{
    --color-tei: #0064C0;
    --color-tei-oscuro: #0d1c3f;

    --color-winfra: #80b95b;
    --color-winfra-oscuro: #285610;

    --color-success     : #4ad295;
    --color-danger      : #dc3545;
    --color-info        : #2563eb;
    --color-info-oscuro : rgb(66, 126, 209);
    --color-muted       : #B5B5C3;
    --text-dark-50      : #7E8299;

    --border-radius-4: 4px;
    --border-radius-12: 12px;
}

body{
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
}
:focus-visible{
    outline: none !important;
}
.text-tei{
    color: var(--color-tei);
}
.bg-success{
    background-color: var(--color-success);
}
.bg-danger{
    background-color: var(--color-danger);
}

.text-success{
    color: var(--color-success);
}
.text-danger{
    color: var(--color-danger);
}
.focus\:ring-green:focus{
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(74, 210, 149, var(--tw-ring-opacity));
}
.focus\:ring-danger:focus{
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(220, 53, 69, var(--tw-ring-opacity));
}
section{
    margin: 80px 0;
}
section > .container{
    padding: 0 15px;
}
.text-uppercase-first-letter{
    display: block;
}
.text-uppercase-first-letter::first-letter{
    text-transform: uppercase;
}
.-translate-x-50{
    transform: translateX(-50%) !important;
}
.dropdown .text-default:not(.text-white){
    color: rgb(226, 232, 240);
}
.color-tei{
    color: var(--color-tei);
}
.color-tei-oscuro{
    color: var(--color-tei-oscuro);
}
.color-winfra{
    color: var(--color-winfra);
}
.color-winfra-oscuro{
    color: var(--color-winfra-oscuro);
}
.hover\:bg-tei:hover,
.bg-tei-hover:hover,
.bg-tei{
    background-color: var(--color-tei);
}
.hover\:bg-tei-oscuro:hover,
.bg-tei-oscuro{
    background-color: var(--color-tei-oscuro);
}
.bg-winfra{
    background-color: var(--color-winfra);
}
.bg-winfra-oscuro{
    background-color: var(--color-winfra-oscuro);
}
.error{
    font-size: 12px;
    margin-top: 5px;
    color: darkred;
}
select:disabled{
    -webkit-appearance: none;
    appearance: none;
    background-image: none;
}
.disabled,
button:disabled{
    pointer-events: none;
    opacity: .4;
}
.modal{
    transition: .4s all;
}
.body-modal-right{
    margin-right: 17px;
}
.modal.show-animation{
    opacity: 1;
    visibility: visible;
}
.modal.hidden-animation{
    opacity: 0;
    visibility: hidden;
}
.modal .content{
    transition: .3s all;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50px);
}
.modal.show-animation .content{
    transition-delay: .2s;
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}
.modal .overlay{
    transition: .3s all;
    opacity: 0;
    visibility: hidden;
}
.modal.show-animation .overlay{
    opacity: 1;
    visibility: visible;
}
.tabla-livewire input:not([type='checkbox']) + span{
    margin-left: -4px;
}
.enlace{
    --tw-bg-opacity: 1;
    color: rgba(29, 78, 216, var(--tw-bg-opacity));
}
.card{
    background-color: white;
    border-radius: var(--border-radius-12);
}
.card .card-header{
    padding: 1.25rem 1.25rem 0 1.25rem;
}
.card .card-body{
    padding: 1.25rem;
}
.table{
    margin-bottom: 20px;
}
.table thead tr th{
    border-bottom: 1px solid rgb(229, 231, 235);
    padding-bottom: 5px;
    font-weight: 600;
    color: rgb(17, 24, 39);
}
.table tbody tr td{
    padding: 10px 0;
    color: rgb(55, 65, 81);
}
table .acciones,
.table .acciones{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.table .enlace{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
}
table .acciones a,
table .acciones button,
.table .acciones button,
.table .acciones a{
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.05);
    border-radius: var(--border-radius-4);
    font-size: 18px;
}
table .acciones a,
table .acciones button,
.table .acciones a + a,
.table .acciones a + button,
.table .acciones button + a,
.table .acciones button + button{
    margin-left: 10px;
}
.slideUp{
    opacity: 0;
    transform: translateY(-50px);
    animation: slideUp .5s forwards;
}
.slideDown{
    animation: slideDown .5s forwards;
}
.loading{
    position: relative;
}
.loading::after,
.loading::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
}
.loading::after{
    background-color: rgba(255,255,255,.7);
    z-index: 10;
    left: 0;
    top: 0;
}
.loading::before{
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid #ccc;
    border-top-color: var(--color-tei);
    animation: spinner 1s linear infinite;
    z-index: 11;
}
@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}
@keyframes slideUp{
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slideDown{
    100%{
        transform: translateY(-50px);
        opacity: 0
    }
}
.dropdown:not(.dropdown-activo) .dropdown-menu{
    opacity: 0;
}
body #subMenu nav,
#subMenu{
    transition: .4s all;
}
body:not(.subMenu-activo) #subMenu{
    width: 0;
}
body main{
    padding-left: 9rem;
    transition: .4s all;
}
body.subMenu-activo main{
    padding-left: calc(270px + 9rem);
}
body #subMenu nav{
    transition: .3s all;
}

body:not(.subMenu-activo) #subMenu nav{
    opacity: 0;
    transform: translateY(100px);
}


th.text-right > span{
    text-align: right;
}
.transition-standard{
    transition: .3s all;
}

/* Background */
/* --------------------------------------------------------------------- */
.bg-slate-600 {
    background-color: #475569;
}
.hover\:bg-slate-700:hover {
    background-color: #334155;
}

/* Ring */
/* --------------------------------------------------------------------- */
.focus\:ring-slate-500:focus {
    box-shadow: rgb(255, 255, 255) 0 0 0 2px, #64748b 0 0 0 4px, rgba(0, 0, 0, 0.05) 0 1px 2px 0;
}