/* Variables */

:root {
	--colorPrincipal: #ff6961;
	--rojoClaro: #ff3931;
	--rojoOscuro:  #ff0000;
	--colorSecundario: #84b6f4;
	--verde: #77dd77;
	--verdeO: #22dd22;
	--blanco: #ffffff;
	--negro:  #000000;
	--gris:  #e1e1e1;
	--grisOscuro:  #e5e5e5;
	--azul: #84b6f4;
	--azulO: #4486f4;
	--azulF: #221d93;
	--fuentePrincipal: 'Montserrat', sans-serif;
}

h1, h2, h3 {
    font-weight: 700;
    margin: 1rem 0;
}
a {
	text-decoration: none;
}

/* General */

html {
    font-size: 62.5%;
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    font-family: var(--fuentePrincipal);
    font-size: 1.6rem;
    line-height: 1.8;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
    position: relative;
}
.bg-login {
	background-image: url('../images/Login.gif');
}
.bg-menu {
	background-image: url('../images/Fondo_menu.png');
}
.bg-fondo {
	background-image: url('../images/Fondo.png');
}
.contenedor {
	max-width: 90%;
	width: 1200px;
	margin: 0 auto;
}
.boton {
	display: block;
	border-radius: .5rem;
	border: none;
	padding: .8rem 2rem;
	text-transform: uppercase;
	transition-property: background-color;
	transition-duration: .3s;
	transition-timing-function: ease-in;
	display: flex;
	align-items: center;
	gap: 1rem;
	line-height: 1;
	text-align: center;
	justify-content: space-between;
}
.boton:hover,
.boton:focus {
	cursor: pointer;
	color: var(--blanco);
	text-decoration: none;
}
.dropdown-item:hover, .dropdown-item:focus {
	background-color: var(--azulF);
	color: var(--blanco);
}
.boton-aceptar {
	/*background-color: var(--azulF);*/
	background-color: rgb(22, 162, 184);
	color: var(--blanco);
	font-weight: bold;
}
.boton-aceptar:hover{
	color: rgb(22, 162, 184);
	background-color: var(--blanco);
	font-weight: bold;
}

.boton-regresar {
	/*background-color: var(--azulF);*/
	background-color: rgb(40, 166, 69);
	color: var(--blanco);
}

.boton-cerrar {
	/*background-color: var(--azulF);*/
	background-color: #6C747C;
	color: var(--blanco);
}

.boton-alerta {
	background-color: var(--rojoClaro);
	color: var(--blanco);
}
.boton-alerta:hover {
	background-color: var(--rojoOscuro);
}
.boton-info {
	background-color: var(--azulF);
	color: var(--blanco);
}
.boton-chico {
	padding: 1rem 2rem;
	font-size: 1rem;
}





/* Bloque Header */

.header {
	height: 23rem;
	margin-bottom: 7rem;
	background-color: var(--blanco);
}
@media (min-width: 768px) {
	.header {
		height: 10rem;
	}
}

.header__contenido {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 10rem;
	flex-direction: column;
}
@media (min-width: 768px) {
	.header__contenido {
		flex-direction: row;
	}
}
.header__listado {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-top: 1rem;
	font-size: 1.3rem;
	color: var(--colorSecundario);
	/*font-weight: 700;*/
}
.header__enlace {
	text-decoration: none;
	color: var(--colorSecundario);
	/*font-weight: 700;*/
}
.header__usuario {
	color: var(--colorPrincipal);
	margin: 0;
}
.header__titulo {
	margin: 0;
	line-height: 0;
}
.header__logo {
	height: 8rem;
}
.fondo-transparente {
	position: relative;
}
.fondo-transparente::before {
	content: '';
	width: 100%;
	height: 100%;
	filter: blur(4px);
	background-image: radial-gradient(circle at center, rgba(0, 0, 0, .6) 80%, transparent 100%);
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
}


/* Bloque Principal */
.contenido-principal__h2 {
	margin: .5rem 0 2rem 0;
	text-align: center;
	font-size: 2.5rem;
	text-transform: uppercase;
}
@media (min-width: 992px){
	.contenido-principal__h2 {
		font-size: 3rem;
	}
}

/* Bloque Formulario */
.formulario {
	background-color: var(--blanco);
	padding: 2rem 4rem;
	border-radius: 1rem;
	margin-bottom: 10rem;
}
@media (min-width:  768px) {
	.width-50-porciento {
		width: 45%;
	}
}
.formulario__campos {
	display: flex;
	flex-direction: column;
    gap: 2rem;
}
@media (min-width: 768px){
    .formulario__campos {
        display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 2rem;
    }
}
.formulario__contenedor-campo {
	display: flex;
	flex-direction: column;
}
.mensaje-cap {
	color: red;
	margin: 0;
}

.formulario__label {
	text-transform: uppercase;
	font-weight: 700;
}
.formulario__campo {
	width: 100%;
	border: 2px solid rgb(22, 162, 184);
	border-bottom: 4px solid rgb(22, 162, 184);
	border-radius: 1rem;
	padding: 1rem;
	transition-property: border;
	transition-duration: .3s;
	transition-timing-function: ease-in;
}
.formulario__check-pass {
	display: flex;
	font-size: 1.3rem;
	gap: 1rem;
	align-items: center;
	justify-content: center;
}
.dataTables_length select {
	width: 6.5rem;
	margin: 0 1rem;
}
.dataTables_filter label,
.dataTables_length label {
	display: flex;
	align-items: center;
	margin: 1rem;
	justify-content: center;
	font-weight: 700;
}
.dataTables_filter input,
.dataTables_length select {
	padding: .3rem .5rem;
}

.dataTables_paginate {
	margin: 2rem;
}
.formulario__campo:hover, .formulario__campo:focus {
	border: 2px solid rgb(22, 162, 184);
	border-bottom: 4px solid rgb(22, 162, 184);
	outline: 0;
}

.formulario__contenedor-botones,
.buscador__contenedor-botones {
	flex-direction: column;
	display: flex;
	gap: 2rem;
}
@media (min-width: 992px){
	.formulario__contenedor-botones,
	.buscador__contenedor-botones {
		justify-content: space-between;
		gap: 1rem;
		flex-direction: row;
		align-items: center;
	}
}
.captcha {
	display: flex;
	justify-content: center;
	margin-bottom: 1rem;
	margin-top: .5rem;
}
.g-recaptcha div {
	margin: 0 auto;
}
.formulario__fila-botones {
	background-color: transparent;
	border: none;
}
.formulario__fila-boton {
	margin: 1rem 0;
}
/* Bloque Footer */
.footer {

	text-align: center; 
	background-color: var(--blanco);
	width: 100%;
	padding: .5rem 0;
}
@media (min-width: 992px){
	.footer-espaciado {
		position: absolute;
		bottom: 0;
	}
}
.footer-loggin {
	position: absolute;
	bottom: 0;
}



.footer__saiti {
	text-decoration: none;
	color: var(--colorSecundario);
}
.footer__texto {
	margin: 0;
	font-weight: 700;
}

/* Bloque Permisos */
.contenedor-permisos {
	display: flex;
	flex-direction: column;
}
@media (min-width: 768px){
	.contenedor-permisos {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		margin-bottom: 10rem;
	}
}
@media (min-width: 992px){
	.contenedor-permisos {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 4rem;
		margin-bottom: 10rem;
	}
}
.permiso {
	margin: 0rem 5% 4rem 5%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: visible;
}
@media (min-width: 768px){
	.permiso {
		margin: 0;
	}
}


.permiso__imagen {
	width: 70%;
	height: 30rem;
	display: inline-block;
}
@media (min-width: 992px){
	.permiso__imagen {
		width: 50%;
		height: 28rem;
		display: inline-block;
	}
}
.permiso__imagen--block {
	filter: grayscale(100%);
}

.permiso__imagen--block:hover {
	cursor: not-allowed;
}
.permiso__icono-contenedor {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.permiso__nombre {
	margin: 0;
	color: var(--blanco);
	font-weight: 700;
}
.bg {
	background-position: center;
	background-repeat: no-repeat;
	background-size: 90%;
}
@media (min-width: 500px){
	.bg {
		background-size: 60%;
	}	
}
@media (min-width: 768px){
	.bg {
		background-size: 80%;
	}
	
}
@media (min-width: 992px){
	.bg {
		background-size: 90%;
	}
	
}
.bg:hover {}
.bg__kiore {
	background-image: 
	url('../images/KioRE_icon.png');
}
.bg__sifem {
	background-image: 
	url('../images/SIFEM_icon.png');
}
.bg__sipague {
	background-image: 
	url('../images/SIPAGUE_icon.png');
}
.bg__sorcfi {
	background-image: 
	url('../images/SORCFI_icon.png');
}
.bg__usuarios {
	background-image: 
	url('../images/Usuarios_icon.png');
}
.bg__clientes {
	background-image: 
	url('../images/Clientes_icon.png');
}
.bg__facturacion {
	background-image: 
	url('../images/Facturacion_icon.png');
}
.bg__emisor {
	background-image: 
	url('../images/Emisor_icon.png');
}
.bg__renovar {
	background-image: 
	url('../images/Renovar_icon.png');
}
.bg__regresar {
	background-image: 
	url('../images/Regresar2.png');
}
.bg__reportes {
	background-image: 
	url('../images/Layout_icon.png');
}
.bg__saldos_vencer {
	background-image: 
	url('../images/Saldo_vencer_icon.png');
}
.bg__saldos_vencidos {
	background-image: 
	url('../images/Saldo_vencido_icon.png');
}
.bg__complemento {
	background-image: 
	url('../images/Complemento_icon.png');
}
.bg__c_cliente {
	background-image: 
	url('../images/Ncliente.png');
}
.bg__v_cliente {
	background-image: 
	url('../images/Ccliente.png');
}
.bg__reportes2 {
	background-image: 
	url('../images/reportes2.png');
}
.bg__clientes2 {
	background-image: 
	url('../images/clientes.png');
}
.bg__lectura_pdf {
	background-image: 
	url('../images/lectura_pdf.png');
}
.permiso__info {
	padding: 1rem;
	text-align: center;
}
.permiso__nombre {
	font-size: 2.5rem;
}



/*-------------------------------------------------------------- KIORE --------------------------------------------------------------*/


/* Buscador */
.buscador {
	background-color: var(--blanco);
	margin-bottom: 6rem;
	padding: 3rem 0;
}
.tabla {
	overflow-x: scroll;
}
.tabla-info {
	width: 100%;
}
.tabla-info__td--head {
	padding: 0 2rem;
	border-top: 1px solid var(--gris);
	background-color: var(--grisOscuro);
}
.tabla-info__td,
.tabla-info__td--head {
	padding: 0rem 2rem;
	border-bottom: 1px solid var(--gris);
	text-align: center;
}
.tabla-info__td,
.tabla-info__td:last-child {
	padding: 1rem 2rem;
}
.tabla-info__tr:nth-child(even) {
	background-color: var(--grisOscuro);
}
.tabla-info__checkbox {
	display: block;
	margin: 0 auto;
}
.dataTables_length,
.facturas1_filter,
.dataTables_info {
	padding: 0 1rem;
}





/* Clases reutilizables */
.texto-blanco {
	color: var(--blanco);
}
.uppercase {
	text-transform: uppercase;
}
.centrar-margin {
	margin: 0 auto;
}
.text-decoration-none {
	text-decoration: none;
}
.margin-tb-20 {
	margin: 2rem 0;
}
.margin-b-20 {
	margin-bottom: 2rem;
}
.margin-rl-10 {
	margin: 0 1rem;
}
.padding-lados-10 {
	padding: 0 1rem;
}
.forzar-p {
	padding: 0 18rem !important;
}
.bg-gris {
	background-color: var(--grisOscuro);
}
.no-margin {
	margin: 0;
}
.display-none {
	display: none;
}
.height-100 {
	height: 10rem;
}
.width-100-porciento {
	width: 100%;
}
.texto-centrado {
	text-align: center;
}
.centrar-diagonal {
	display: flex;
	align-items: center;
}
.bg-blanco {
	background-color: var(--blanco);
}
.flex-column {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.modal-grande {
	max-width: 70rem;
	width: 70%;
	margin: 20px auto;
}
.form-control {
	padding: .5rem;
	font-size: 1.5rem;
	height: initial !important;
}
h4 {
	margin: 1rem 0;
}
.modal-content {
	border-radius: 1rem;
	box-shadow: 22px 29px 23px 0px rgba(0,0,0,0.71);
	overflow: hidden;
	border: none;
}
.modal-header {
	background-color: var(--azulF);
	color: white;
}
.icons {
	width: 30px !important;
}
.footer_relative,
.footer_absolute {
	background-color: white !important;
	color: black !important;
}
.footer__texto {
	background-color: white !important;
	color: black !important;
}