* {
    all: none;
    margin:0px;
    padding:0px;
}

body {
    font-family: "Work Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: lighter;
    font-style: normal;
}


#output {
    /* margin-top: 20px; */
    /* align-items: center; */
}


.contenedor {
    display:flex;
    height: 100vh;
    flex-direction: column;
    align-items: center;
}


.titulo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    box-sizing: border-box;
    width: 100%;
    padding: 0 1rem;
    align-items: center;
    border-bottom:1px solid #0072ec46;
   

    #btn_abrir_config_menu {
        color:#0071ec;
        font-size: 2rem;
        font-weight: bold;
        cursor: pointer;
    }

    .logo {
        height: 5rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .logo
        img {
            max-width:80%;
            max-height:80%;
            object-fit: contain;
        }

}

.cuerpo {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    
    .cont_video {
        display: flex;
        padding: 1rem;
        justify-content: center;
        align-items: center;

        .video_frame {
            overflow: hidden;
            width: 100%;
            height: 100%;
            background-color: #0071ec33;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #0071ec;
            border-radius: 1rem;

            #video {
                width: 100%;
                object-fit:cover;
                object-position: center;
            }
        }
    }

    .cont_datos {
        /*background-color:pink;*/
        display: flex;
        flex-direction: column;

        .botones {
            display: flex;
            text-align: center;
            align-content: center;

            button {
                padding: 10px 20px;
                font-size: 16px;
                flex-grow: 1;
                margin: 0 1rem;
                border: none;
                font-weight: 600;
                font-size: 1.2rem;
                color: white;
                text-transform: uppercase;
                cursor: pointer;
            }

            button:active {
                box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.2) ;
                filter: hue-rotate(45deg);
            }

            button:disabled {
                filter: grayscale(75%);
                color: rgba(255, 255, 255, 50);
                filter: grayscale(90%) opacity(30%);
                cursor:not-allowed;
            }

            button:disabled::after {
                content:"...";
            }

            button.entrada:enabled::after {
                content:"REGISTRAR ENTRADA";
            }

            button.salida:enabled::after {
                content:"REGISTRAR SALIDA";
            }
        }

        .mensajes {
            display: block;
            border: 1px solid #ddd;
            margin: 1rem;
            text-align: center;
            align-content: center;

            #cli_info {
                font-size: 20px;
                font-weight: bold;
                display:none;
                grid-template-columns: [first] 5rem [line2] auto 5rem [end];
                padding: 0.5rem;
    
                #nombre {
                    font-size: 2rem;
                }
    
                div {
                    justify-self: center;
                    align-self: center;
                    padding: 0.1rem 0;
                }
            }
        }  
    }
}

.config_menu {
    display:flex;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0px;
    left: 0px;
    background: linear-gradient(135deg, rgba(1, 111, 237, 0.7) 70%, rgba(150, 226, 158, 0.7));
    backdrop-filter: blur(10px);
    justify-content: center;
    align-items: center;

    #btn_cerrar_config_menu {
        font-size: 2rem;
        cursor: pointer;
    }

    .cont_menu {
        height: 50vh;
        width: 50vw;
        min-height: 12rem;
        background-color: white;
        border: 1px solid #ccc;
        padding: 2rem;
    }
}


.config_menu.ocultar {
    display:none;
}



.contenedor_fondo_animado {
    background: linear-gradient(270deg, #016eed, #96e29e);
    background-size: 400% 400%;
    animation: fondo_animado 20s ease infinite;
}

@keyframes fondo_animado {
    0%{background-position:25% 75%}
    50%{background-position:100% 50%}
    100%{background-position:25% 75%}
}



@media (orientation: landscape) {



    .cuerpo {
      flex-direction: row;
      align-items:center;

        .cont_video {
            width: calc(50vw - 2rem);
            height: calc(100vh - 7rem - 1px);

            .video_frame {
                min-height: 15rem;
                max-height: calc(50vw - 2rem);
    
                #video {
                    width: calc(50vw - 2rem);
                    height: calc(50vw - 2rem);
                }
            }
        }

        .cont_datos {
            width: calc(50vw - 2rem);
            height: calc(50vh - 7rem - 1px);
            min-height: 15rem;

            .mensajes {
                height: calc((100% / 10 * 7) - 2rem);
            }
    
            .botones {
                height: calc(100% / 10 * 3);
            }
        }
    }
}

  
  @media (orientation: portrait) {

    #video {
        max-height: 100vh;
        height: 100%;
    }

    .cuerpo {
        flex-direction: column;
    
        .cont_video {
            height: calc(100vh - 15rem - 6rem);
            width: 100vw;
            box-sizing: border-box;
        }
    
        .cont_datos {
            min-height: 15rem;
            width: 100%;

            .mensajes {
                height: calc((100% / 10 * 7) - 2rem);
            }
    
            .botones {
                height: calc(100% / 10 * 3);
            }

        }
    }

}