/* DEFINICION DE VARIABLES */
:root {
  --color-principal: #125428;
  --color-input: #f5f5f5;
}

/* Estilos para production */
body.production {
  --color-principal: #125428;
  --color-input: #f5f5f5;
}

/* Estilos para development */
body.development {
  --color-principal: #2a2a2a;
  --color-input: #f5f5f5;
}

.d-none{display: none !important;}

*{margin: 0;padding: 0;font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;}
.h-100{height: 100dvh;}
.w-100{width: 100%;}
.bg-login{background-color: var(--color-principal);}
.fs-1rem{font-size: 1rem;}
.fs-2rem{font-size: 1.2rem;}
.container {
    /* display: flex; */
    width: 100%;
    height: 100vh;
}
body{overflow-y:hidden;}
.flex{display: flex;}
.flex-col{flex-direction: column;}
.gap-2{gap: 2rem;}
.gap-3{gap: 4rem;}
.evenly{
    justify-content: space-evenly;
}
.between{
    justify-content: space-between;
}
.items-center{
    align-items: center;
    justify-items: center;
}
.bg-main{
    background: linear-gradient(247deg, #f5f5f5 20%, var(--color-principal) 50%);
}
.color-principal{
    color: var(--color-principal);
}
.left-trapezoid,
.right-trapezoid{
    flex: 1;
    height: 100%;
}
.left-trapezoid {
    background: var(--color-principal);
    animation: animatron 1s ease-in-out forwards;
}
.right-trapezoid {
    background: #f5f5f5;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 100%);
}
.title{ font-size: 3rem;}
.subtitle{ font-size: 1.8rem;}
@keyframes animatron {
    from{
        clip-path: polygon(0 0, 0% 0, 100% 100%, 0% 0%);
    }to{
        clip-path: polygon(0 0, 60% 0, 100% 100%, 0% 100%);
    }
}
@keyframes fadeUp {
    0% {
        transform: translate3d(0, 200px, 0);
        opacity: 0;
    }
    100% {
        transform: translateZ(0);
        opacity: 1;
    }
}
.fade-up{
    animation-name: fadeUp;
    animation-duration: 1s;
}
input{border: none;}
.input-field{
    position: relative;
}
.input-field input{
    width: 19rem;
    height: 2.75rem;
    font-size: 0.85rem;
    padding: 0;
    border-bottom: 2px solid var(--color-input);
    background: transparent;
    color:var(--color-input);
    outline: none;
}
.input-field label{
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: var(--color-input);
    font-size: 0.85rem;
    pointer-events: none;
    transition: 0.3s;
}
input:focus{
    border-bottom: 2px solid var(--color-input);
}
input:focus + .icono{
    color: var(--color-input);
}
input:focus ~ label,
input:valid ~ label{
    top: 0;
    left: 15px;
    font-size: 0.65rem;
    padding: 0 2px;
    background: transparent;
}
.icono{color: var(--color-input);}
.btn-submit{color: var(--color-principal); border: 2px solid var(--color-principal); border-radius: 1rem; padding: 0.1rem;}
.btn-submit-disabled{color: #a8a8a8; border: 2px solid #a8a8a8; border-radius: 1rem; padding: 0.1rem;}
.btn-submit:hover{background-color: var(--color-principal); color: whitesmoke;cursor: pointer;}

.contenedor-animado{
    color:#999;
    font-size:1.1rem;
    font-weight:bold;
    padding-top:0px;  
    position:relative;
    width:100%;
    bottom:45%;
    display:block;
}

#flip {
    height:2.8rem;
    overflow:hidden;
}

#flip > div > div {
    color:#fff;
    padding:4px 0px;
    height:60px;
    margin-bottom:45px;
    display:inline-block;
}

#flip div:first-child {
    animation: show 12s ease-in-out infinite;
}

@keyframes show {
    0% {margin-top:-270px;}
    5% {margin-top:-180px;}
    33% {margin-top:-180px;}
    38% {margin-top:-90px;}
    66% {margin-top:-90px;}
    71% {margin-top:0px;}
    99.99% {margin-top:0px;}
    100% {margin-top:-270px;}
}

.twhite{color: whitesmoke;}

.alert{
    color:whitesmoke;
    text-align: center; 
    border-radius: 1rem; 
    margin: 1rem 0; 
    padding: 1rem;
    font-size: .9rem;
}

.alert-danger{background-color: #AC2121;}
.alert-success{background-color: #119600;}

.logo{
    filter: drop-shadow(15px 15px 10px rgba(0, 0, 0, 0.5));
    width: 20rem;
}

.info-empresa{
    justify-content: center;
    align-items: center;
    padding: 1rem 1.2rem 1rem 1.2rem;
}

.contenedor-fomulario{
    max-width: 20rem;
}

.text-recuperar-password{
    color: var(--color-input);
    font-size: 0.9rem;
}

.icono-refresh{
    color: var(--color-input);
    cursor: pointer;
}

.text-info-recuperar-password{
    color: var(--color-input);
}

.btn-volver-atras{
    color: var(--color-input);
    cursor: pointer;
    font-size: 1rem;
}

@keyframes fade {
    0%, 50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media (min-width: 768px) {
    .logo{
        width: 22rem;
    }   

    .info-empresa{
        padding: 5rem 1.2rem 1rem 1.2rem;
    }

    #flip > div > div {
        height:45px;
    }
}

@media (min-width: 1024px) {
    /* Estilos para production */
    body.production {
        --color-input: #10662d;
    }

    /* Estilos para development */
    body.development {
        --color-input: #3a3a3a;
    }

    .container{
        display: flex;
    }

    .info-empresa{
        margin-left: 3rem;
        align-items: flex-start;
    }

    .contenedor-animado{
        font-size:1.4rem;
    }

    .contenedor-fomulario{
        margin-right: 3rem;
        max-width: 19rem;
    }

    .title{ font-size: 4rem;}
    .subtitle{ font-size: 2rem;}

    .alert{
        font-size: 1rem;
    }

    .input-field input{
        border-bottom: 2px solid var(--color-principal);
        color:var(--color-input);
    }
    .input-field label{
        color: var(--color-principal);
    }
    input:focus{
        border-bottom: 2px solid var(--color-input);
    }
    input:focus + .icono{
        color: var(--color-input);
    }
    .icono{color: var(--color-principal);}
    .text-recuperar-password{
        color: var(--color-principal);
        font-size: 1rem;
    }

    .icono-refresh{
        color: var(--color-principal);
    }

    .text-info-recuperar-password{
        color: var(--color-principal);
    }

    .btn-volver-atras{
        color: var(--color-principal);
        font-size: 1rem;
    }
}

@media (min-width: 1200px) {
    .logo{
        width: 30rem;
    }   

    .info-empresa{
        margin-left: 6rem;
    }

    .contenedor-fomulario{
        margin-right: 6rem;
    }
}