:root{
	--bg: #E7ECF0;
	--txt: #272424;
    --rgb1: #048748;
	--rgb2: #16b907;
	--rgb3: #7bff00;
	--rgb4: #d81a49;
    --gray: #979797;
}
::selection{
    background-color: var(--txt);
    color: var(--rgb3);
}
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
    font-family: "Lato", sans-serif;
	cursor: default;
    scroll-behavior: smooth;
    color: var(--txt);
}
a{
    color: var(--rgb2);
    cursor: pointer;
}
input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=number]{
    margin-bottom: 1em;
    padding: .8em;
    border: none;
    outline: none;
    background-color: var(--bg);
    font-size: 1.1em;
    cursor: pointer;
    box-shadow:
        inset 5px 5px 5px #ddd,
        inset -5px -5px 5px #fff;
    border-radius: 12px;
    &:focus{
        box-shadow:
            -9px 0 9px #fff,
            0 -9px 9px #fff,
            9px 0 9px #ddd,
            0 9px 9px #ddd,
            inset 15px 15px 15px #ddd,
            inset -15px -15px 15px #fff;
    }
    &:focus::placeholder{
        color: var(--txt);
    }
}
select option{
  background-color: var(--bg);
  color: var(--txt);
}
body{
    background-color: var(--bg);
}
button{
    padding: .5em 0;
    background-color: var(--bg);
    color: var(--txt);
    font-size: 1.2em;
    box-shadow:
        -8px -8px 8px #fff,
        8px 8px 8px #ddd;
    border: none;
    outline: none;
    border-radius: 2em;
    cursor: pointer;
}
#banadeja-general{
    display: grid;
    grid-template-columns: 20% 80%;
}
.bandeja-general{
    padding: 1.5em;
}
#nombre-comercial-las-lapas hr{
    width: 55%;
    height: 9px;
    border: none;
    border-radius: 6px;
    box-shadow:
        inset 4px 4px 1px #ddd,
        inset -4px -4px 1px #fff;
    clear: both;
}
#nombre-comercial-las-lapas hr:nth-child(1){
    margin-bottom: .85em;
    float: right;
}
#nombre-comercial-las-lapas hr:last-of-type{
    margin-top: .85em;
}
#nombre-comercial-las-lapas h1{
    font-size: 1.8em;
    text-align: center;
    text-shadow:
        -3px -3px 4px #fff,
        -2px -2px 4px #fff,
        2px 2px 4px #aaa,
        3px 3px 4px #aaa;
}
.rgb1{
    color: var(--rgb1);
}
.rgb2{
    color: var(--rgb2);
}
.rgb3{
    color: var(--rgb3);
}
.rgb4{
    color: var(--rgb4);
}
.texto-600{
    font-weight: 600;
}
#panel-de-navegacion-principal{
    padding: 2.5em 1em;
    max-height: calc(100vh - 8em);
    overflow-y: auto;
}
.pnp-boton{
    min-width: 100%;
    margin-bottom: 1.25em;
    box-shadow:
        -9px -9px 9px #fff,
        9px 9px 9px #ddd;
    transition: .35s;
    &:hover{
        color: var(--rgb1);
        translate: .25em 0;
    }
}
.pnp-activo{
    color: var(--rgb1);
    box-shadow:
        -9px -9px 9px #fff,
        9px 9px 9px #ddd,
        inset 9px 9px 9px #ddd,
        inset -9px -9px 9px #fff;
    &:hover{
        translate: none;
    }
}
.pnp-logout{
    margin-top: 2em;
    color: var(--gray);
    box-shadow:
        inset 9px 9px 9px #ddd,
        inset -9px -9px 9px #fff;
    border-radius: 5px;
    &:hover{
        color: #992a2a;
    }
}
#panel-superior-principal{
    padding: 1em;
    text-align: center;
}
#panel-superior-principal h2{
    font-size: 1.25em;
    font-weight: 400;
}
#panel-superior-principal h3{
    margin: .75em 0;
    font-size: 1em;
    font-weight: 400;
}
#panel-superior-principal h4{
    margin: .5em auto;
    padding: .85em 1.5em;
    max-width: fit-content;
    font-size: .9em;
    font-weight: 400;
    box-shadow:
        inset 5px 5px 5px #ddd,
        inset -5px -5px 5px #fff;
    border-radius: 5px;
}
#panel-superior-principal hr{
    height: 4px;
    margin-top: 1.8em;
    border: none;
    box-shadow:
        -3px -3px 3px #fff,
        3px 3px 3px #ddd;
    border-radius: 4px;
}
#ingreso-y-registro{
    padding: 1em;
    text-align: center;
}
#lll-logo{
    margin: 0 auto;
    padding: 6px;
    width: fit-content;
    box-shadow:
        -5px -5px 4px #fff,
        5px 5px 4px #ddd;
    border-radius: 50%;
}
#lll-logo img{
    max-height: 175px;
    box-shadow:
        inset 5px 5px 4px #ddd,
        inset 5px -5px 4px #fff;
    border-radius: 50%;
}
#capa-ingreso{
    margin: 2em auto;
    max-width: 30%;
    display: flex;
    flex-flow: column;
}
#capa-ingreso .ci-entrada{
    padding: 1.1em .75em 1.1em 3em;
}
#ci-correo{
    background: url(../publico/recursos/iconos/form-icono-usuario.png) no-repeat;
    background-size: 16px;
    background-position: 1.2em;
}
#ci-clave{
    background: url(../publico/recursos/iconos/form-icono-clave.png) no-repeat;
    background-size: 16px;
    background-position: 1.2em;
}
.ci-entrada{
    width: 100%;
    &:focus{
        color: var(--rgb1);
    }
}
#ci-submit{
    width: 100%;
    margin-top: .7em;
    padding: .7em;
    transition: .1s;
    &:hover{
        color: var(--rgb1);
    }
    &:focus{
        color: var(--rgb1);
        box-shadow:
            -8px -8px 8px #fff,
            8px 8px 8px #ddd,
            inset 9px 9px 9px #ddd,
            inset -9px -9px 9px #fff;
        scale: .95 .95;
    }
}
.form-agrupador-de-campos{
    position: relative;
}
.form-agrupador-de-campos button{
    padding: 1em;
    position: absolute;
    top: .5em;
    right: .55em;
    background: url(../publico/recursos/iconos/form-icono-mostrar-texto.png) no-repeat center;
    background-size: 50% 50%;
    box-shadow: none;
    transition: .02s;
    &:hover{
        background-size: 60% 60%;
    }
}
#capa-ingreso > p{
    margin-top: 1.75em;
}
#capa-registro form{
    margin: 2em auto;
    max-width: 60%;
}
#capa-registro form > div{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 1.25em
}
.creg-entrada{
    width: 100%;
    &:focus{
        color: var(--rgb1);
    }
}
#capa-registro .creg-entrada{
    padding: 1.1em .75em 1.1em 3em;
    background-size: 16px;
    background-position: 1.2em;
}
.creg-bloque-tamanho-doble{
    grid-column: span 2;
}
#creg-correo{
    background: url(../publico/recursos/iconos/form-icono-correo.png) no-repeat;
}
#creg-usuario{
    background: url(../publico/recursos/iconos/form-icono-arroba.png) no-repeat;
}
#creg-nombre{
    background: url(../publico/recursos/iconos/form-icono-usuario.png) no-repeat;
}
#creg-apellidos{
    background: url(../publico/recursos/iconos/form-icono-usuario.png) no-repeat;
}
#creg-telefono{
    background: url(../publico/recursos/iconos/form-icono-telefono.png) no-repeat;
}
#creg-empresa{
    background: url(../publico/recursos/iconos/form-icono-empresa.png) no-repeat;
}
#creg-direccion{
    background: url(../publico/recursos/iconos/form-icono-direccion.png) no-repeat;
}
#creg-identificacion{
    background: url(../publico/recursos/iconos/form-icono-identificacion.png) no-repeat;
}
#creg-tipo-identificacion{
    width: 100%;
    padding: 1.1em;
    background: transparent url(../publico/recursos/iconos/form-icono-lista.png) no-repeat;
    padding: 1.1em .75em 1.1em 3em;
    background-size: 16px;
    background-position: 1.2em;
    color: rgb(132,117,117);
    font-size: 1.1em;
    border: none;
    border-radius: 12px;
    box-shadow:
        inset 5px 5px 5px #ddd,
        inset -5px -5px 5px #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    &:focus{
        color: var(--rgb1);
        outline: none;
    }
}
#creg-clave-1,
#creg-clave-2{
    background: url(../publico/recursos/iconos/form-icono-clave.png) no-repeat;
}
#creg-reset,
#creg-submit{
    width: 40%;
    margin: .7em .5em;
    padding: .7em;
    transition: .1s;
    &:hover{
        color: var(--rgb1);
    }
    &:focus{
        box-shadow:
            -8px -8px 8px #fff,
            8px 8px 8px #ddd,
            inset 9px 9px 9px #ddd,
            inset -9px -9px 9px #fff;
        scale: .95 .95;
    }
}
.agrupador-correcciones-para-form{
    margin-bottom: 1em;
    padding: .25em;
}
.p-correcciones-para-form{
    margin-bottom: .25em;
    color: var(--rgb4);
    font-size: .85em;
    border-radius: 5px;
    text-align: left;
}
#contenedor-de-mensaje-por-registro-correcto{
    padding: 2em 4em;
    text-align: justify;
}
.espaciado-alto-superior{
    padding-top: 1.5em;
}
.espaciado-medio-superior{
    padding-top: .5em;
}
.espaciado-medio-inferior{
    padding-bottom: .5em;
}
.espaciado-alto-inferior{
    padding-bottom: 1.5em;
}
.texto-alineacion-central{
    text-align: center;
}
.texto-alineacion-derecha{
    text-align: right;
}
.espaciar-textos-breves{
    padding: 2em 3em;
}
#creg-mostrar-ocultar-texto{
    transition: .25s;
    &:focus{
        transform: rotate(180deg) scale(1.4);
    }
}
#contenedor-cuadros-accion-area{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 2em;
    row-gap: 2em;
}
#contenedor-cuadros-accion-area a{
    text-decoration: none !important;
}
.cuadros-de-accion-de-area{
    padding: 1em 2em;
    width: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#tcu-contenedor{
    max-width: 100%;
    min-height: 50vh;
    overflow-y: auto;
}
#todas-las-cuentas-de-usuario{
    width: 100%;
}
#todas-las-cuentas-de-usuario th{
    padding-bottom: .85em;
}
#todas-las-cuentas-de-usuario td{
    padding: 1em;
    width: 15%;
    text-align: center;
    box-shadow:
        inset 12px 12px 3px #ddd,
        inset -12px -12px 3px #fff,
        -5px -5px 5px #fff,
        5px 5px 5px #ddd;
    border-radius: 10px;
}
.tcu-submit{
    margin: 0 1em;
    padding: .25em !important;
    width: calc(100% - 2em);
    font-size: 1em;
}
#vista-detallada-de-usuario{
    margin: 0 auto;
    width: 100%;
}
#vista-detallada-de-usuario td{
    padding: .5em;
    text-align: center;
    vertical-align: middle;
}
#vista-detallada-de-usuario input[type='text']{
    width: 100%;
}
#vista-detallada-de-usuario button{
    margin: .5em;
    padding: .5em 1.5em;
    transition: .25s;
    &:hover{
        background-color: var(--rgb4);
        color: var(--bg);
    }
}
#vista-detallada-de-usuario select{
    margin: 0 0 1.2em 0;
    padding: .5em;
    width: 100%;
}
.vdu-subtitulo{
    padding: .85em;
    text-shadow: 0 0 5px #8aeb92;
    box-shadow:
        inset 9px 9px 5px #ddd,
        inset -9px -9px 5px #fff;   
}
.instrucciones-registro-correcto{
    padding-left: 2.5em;
    list-style-type: square;
}
#vista-detallada-de-usuario td:has(input[type=checkbox]){
    text-align: left;
    transition: .3s;
    &:hover{
        box-shadow:
            3px 3px 9px #ddd,
            -3px -3px 9px #fff;
    }
}
#vista-detallada-de-usuario label{
    cursor: pointer;
}