/*
//  ESTILOS DEL PROYECTO 
//
//  Archivo : Estilos_Proyecto.css
//  Autor   : Arturo Belleza E.
//			  Consultor, Analista, Programador de Sistemas Escritorio/Web
//	Inicio  : 01/10/2022
//	Función : Elabora Todos los Diseños del Proyecto 
*/


:root{
	
	/* 								*/
    /*	COLORES DE LA INSTITUCION	*/
	--Empresa-Color-Primary: #001E38;       /*	Color 1 Azul    */
    --Empresa-Color-Secundary: #ca7d09;     /*	Color 2 Naranja	*/
 
    --Menu-Fondo: #001e38; 
    --Menu-Letra: #FFFFFF; 

	--Menu-Nav-Fondo: #223E71;                  
    --Menu-Nav-Fondo-Opciones: #375C9B;        
    --Menu-Nav-Letra: #FFFFFF;                 
	--Menu-Nav-Letra-hover: darkblue;

    --Menu-FontSize: 16px;
    --Menu-Nav-height: 80px;
    --Menu-Nav-height-opciones: 45px;
    --Menu-Nav-inicio-main: 80px;
    --Menu-Nav-inicio-SubMenu: 45px;

    --Menu-Nav-fondo-movil: cornflowerblue;
    --Menu-Nav-letra-hover-movil: yellow;
    --Menu-Nav-height-movil: var(--Menu-Nav-height);
    --Menu-Nav-ventana-movil: calc(100% - 60px);

	/*											  	*/
    /*	CONFIGURACION LETRAS Y TAMAÑO DEL PROYECTO	*/
	--MiColorBorderLinea: darkgray; 
	--MiColorBackground: lavender;

    --Mifont-family: "Segoe UI Emoji";
	--MiFontSize: 1rem;
	--MiFontSizeTotales: calc(var(--MiFontSize) + .1rem );
	--MiFontSizeMantenimiento: calc(var(--MiFontSize) + .1rem );
	--MiFontSizeTituloPagina: calc(var(--MiFontSize) + .3rem );

	--MiPaginaAlto: calc(100%);
	--MiPaginaPie: calc(var(--MiPaginaAlto) - 100px);

	--MiColorLoginFondo: lavender; 
	--MiColorLoginLetra: #223E71;
	--MiColorLoginTituloLetra: darkcyan;
    
	--MiColorSeleccionFondo: white;
	--MiColorSeleccionLetra: steelblue;
	--MiColorSeleccionTitulo: #294A8E;

	--MiColorPaginaTotalesFondo: #809DD6;
	--MiColorPaginaTotalesLetra: yellow;

	--MiColorMantenimientoFondo: #809DD6;
	--MiColorMantenimientoLetra: yellow;

	--MiColorTextoTituloFondo:  #86A6E8;
	--MiColorTextoTituloLetra:  white;

	--MiColorHelpTituloFondo:  #375C9B;
	--MiColorHelpTituloLetra: white;

	--MiColorGridEncabezadoLetra: steelblue;
	--MiColorGridDetalleLetra: black;

	--MiColorCajaFondo: #DFE8EE;
}


/*						  						     */
/*  CSS PARA TODAS LAS PAGINA OPCIONES DEL PROYECTO  */

html body{
	/* PASO 01 */ 
	height: calc(100vh - 10px);
	background-color: var(--MiColorBackground);

	font-family: var(--Mifont-family);
    font-size: var(--MiFontSize);
	padding: 0rem 0rem;
}


.Pagina-Contenido {
	/* PASO 02 */ 
	position: relative;
	display: block;
    top: var(--Menu-Nav-inicio-main);
	height: calc(100vh - 140px);
}


.Pagina-Home {
	/* PASO 03 */ 
	height: 100%;
	width: 100%;
}


.Pagina-Consulta {
	/* PASO 04 */ 
	margin-top: .3rem;
	padding: 0rem 0rem;
	display: none;
}


.Pagina-Titulo {
	background-color: var(--MiColorSeleccionFondo);
	color: var(--MiColorSeleccionLetra);
	font-weight: bold;
	padding: .4rem 1.5rem;
	margin-bottom: .2rem;
}


.Pagina-Titulo-Opcion {
	color: var(--MiColorSeleccionTitulo);
	font-weight:bold;
	font-size: var(--MiFontSizeTituloPagina);
	margin-right: 10px;
}


.Pagina-Grid {
	/* CONTROLA CAJA DataTables Grid */
	/* IMPORTANTE NOT TOCAR 		 */
	margin-top: 2px;
	padding: 1px 1px;
	max-height: calc( 100vh - 280px );
	overflow: auto;
}


.Pagina-Totales {
	background-color: var(--MiColorPaginaTotalesFondo);
	color: var(--MiColorPaginaTotalesLetra);
	padding: .4rem 1.5rem;
	font-size: var(--MiFontSizeTotales);
	margin-bottom: .2rem;
}


.Caja-Vertical-Centro {
	/* CENTRA CAJA VERTICAL */
	margin: auto;
	max-height: var(--MiPaginaAlto);
	border: 1px solid var(--MiColorBorderLinea);
	margin-top: 2rem;
	padding: .1rem .1rem;
}


.Caja-Vertical-Modulos {
	/* CAJA CENTRADO, SEPARADO POR MODULOS */
	background-color: var(--MiColorSeleccionFondo);
	color: var(--MiColorSeleccionLetra);
	border: 1px solid var(--MiColorBorderLinea);
	padding: 0.1rem;
	font-size: 1.1rem;
	max-height: calc( 100vh - 320px );
	overflow: auto;
}


.Caja-Vertical-Titulo{
	background-color:gainsboro;
	color: var(--MiColorSeleccionTitulo);
	font-size: 22px;
	line-height: 40px;
	text-align: center;
	margin-bottom: .5rem;
}


.Caja-Vertical-SubTitulo{
	color: var(--MiColorSeleccionTitulo);
	text-align: center;
	font-weight: bold;
}


/*						  */
/*  CSS PARA PAGINA HELP  */
.Pagina-Help{
	margin: 30px auto;
	padding: 5px 5px;
	max-height: calc(100vh);
}


.Pagina-Help-Marco{
	padding: 2px 2px;
}


.Pagina-Help-Titulo {
	background-color: var(--MiColorHelpTituloFondo);
	color: var(--MiColorHelpTituloLetra);
	font-weight:bold;
	margin-bottom: 3px;
	border: 1px solid  lightsteelblue;
	border-radius: 3px;
}


.dataTables_scrollBody {
	/* IMPORTANTE SOLO FUNCIONA DataTable */
	/* MUY BUENO OJO NO TOCAR 			  */
	max-height: calc(100vh - 300px) !important;
}


/*				  */
/*  FIN CSS HELP  */
/*				  */


.label-Edicion{
	margin-right: 8px;
	font-weight:bold;
}


.label-Totales{
	color: #CB4335; 
	font-weight:bold;
}


.label-Saldos{
	color:darkgreen;
	font-weight:bold;
	font-size: 19px;
}


.label-Texto{
	color: rebeccapurple;
}


thead tr th {
	/* GRID ENCABEZADO COLOR TAMAÑO */
	color: var(--MiColorGridEncabezadoLetra);
	padding-top: 0rem !important;
	font-weight: bold;
	text-align: center;
	vertical-align: middle !important;
}


tbody tr td {
	/* GRID DETALLE COLOR TAMAÑO */
	color: var(--MiColorGridDetalleLetra);
	font-size: 80%;
	padding-Top: .3rem !important;
	padding-bottom: .3rem !important;
	text-align: center;
	vertical-align: middle !important;
}


.modal{
	background: rgba(0,0,0,0.50);
}


#Id_Cbo_IdPeriodo{
	width: 5rem;
}


#Id_Cbo_IdMes, #Id_Cbo_IdCodSexo {
	width: 8rem;
}


#Id_Cbo_IdCodCIA{
	width: 20rem;
}


#Id_Cbo_IdCodSituacion, #Id_Cbo_IdCodCategoria, #Id_Cbo_IdUnicoPlanilla {
	width: 8rem;
}


#Id_Cbo_IdCodDI {
	width: 14rem;
}


#Id_Cbo_SiNo{
	width: 50px;
}


#Id_Cbo_CodArea {
	width: 270px;
}


#Id_Fecha_Emision, #Id_Fecha_Proceso {
	/* FECHA PARA EDICION */
	width: 8rem;
	/* width: 120px; */
	/* text-align: center; */
}


 #Id_Periodo {
	width: 8rem;
	text-align: center;
}


#Id_CodRazon, #Id_CodCorrige, #Id_TC {
	width: 8rem;
}


#Id_Total {
	width: 120px;
	text-align: right;
}


#Id_NroDcto {
	width: 120px;
	text-align: right;
}


#Id_TC {
	text-align: right;
}


#Id_RazonSocial, #Id_ApePaterno, #Id_ApeMaterno, #Id_Nombres {
	text-align: left; 
	width: 23rem !important; 
}


#Id_Estado {
	text-align:center;
	width: 11rem !important; 
}


#Id_File_Abrir {
	width: 20rem !important; 
}


input:disabled, textarea:disabled {
	color: navy !important;
}


.Box-Totales{
	text-align: right;
	height: 35px !important;
	width: 130px !important;
	font-size: 16px !important;
	font-weight: bold;
	background-color: whitesmoke !important;
	border-radius: 0.5rem !important;
	padding: 3px 6px !important;
}


.Box-Contador{
	text-align: center;
	height: 35px !important;
	width: 65px !important;
	font-size: 16px !important;
	font-weight: bold;
	background-color: whitesmoke !important;
	border-radius: 0.5rem !important;
	padding: 3px 6px !important;
}


.Marco-Mantenimiento {
	background-color:whitesmoke;
	border: 1px solid  lightsteelblue;
	border-radius: 3px; 
	font-weight: normal !important;
	padding: .3rem .3rem !important;
	margin: auto;
	margin-top: 3rem;
	max-height: calc(100vh - 100px);
}


.Marco-Mantenimiento-Header{
	background-color: var(--MiColorMantenimientoFondo);
	color: var(--MiColorMantenimientoLetra);
	padding: .3rem .3rem;
	font-size: var(--MiFontSizeMantenimiento);
	margin-bottom: .3rem;
}


.Marco-Mantenimiento-Body{
	background-color: var(--MiColorBodyFondo);
	color: var(--MiColorBodyLetra);
	border: 1px solid  lightsteelblue;
	border-radius: 3px; 
	font-weight: normal !important;
	padding: 10px 15px;
	overflow: auto;
	justify-content: center;
}


.Marco-Mantenimiento-Body .d-flex {
	/* SOLO PARA MANTEMIENTO DE DATOS */
	justify-content: center;
}


.Marco-Mantenimiento-Titulo {
	text-align: center;
	background-color: var(--MiColorMantenimientoFondo);
	color: white;
	/* color: var(--MiColorMantenimientoLetra); */
	/* padding: .3rem .3rem; */
	padding: .6rem .6rem;
	margin: auto;
	margin-bottom: .1rem;
	font-size: 1.3rem !important;
}


select, textarea, input {
	font-size:80% !important;
}


.Por-Defecto {
	text-align: center;
	width: 5rem !important;
}


.Emision {
	text-align: center;
	width: 6rem !important;
}


.Estado {
	font-weight: bold;	
	text-align: center;
	width: 8rem !important;
}


.Documento {
	text-align: center;
	width: 10rem !important;
}


.Descripcion, .RazonSocial, .Personal {
	text-align: left;
	width: 14rem !important;
}


.Referencia {
	text-align:left;
	width: 15rem !important;
}


.Glosa {
	text-align: left;
	width: 24rem !important;
}


.Columna-Decimal{
	text-align: right;
	width: 5rem !important;
}


.Columna-Totales, .Negrita {
	font-weight: bold;	
}


.Columna-Avance{
	text-align: center;
}


.Columna-Centra{
	text-align: center;
}


.Columna-Izquierda{
	text-align: left;
}


.Columna-Derecha{
	text-align:right !important;
}


.Columna-Boton{
	text-align: center !important;
	width: 3rem !important;
}


.Bloque-En-Fila{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}


.Bloque-Movil-Fila{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}


.Bloque-Movil-Titulo {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 1px;
}


@media (max-width: 770px){
	/*  										  */
	/*	SOLO PARA MANEJO DE DISPOSITIVOS MOVILES  */
	/*  ACTIVAR EN MEDIUM SCREEN (720px) 		  */
	/* 											  */


	.row > * {
		/*  CORRIJE QUE LOS ELEMENTOS SE ACOMODEN  */
		/*  DENTRO DE UN DIV o CAJA				   */
		/*  IMPORTANTE PARA LAS UNIDADES MOVILES   */
		flex-shrink: unset;
	}

	
	.Pagina-Consulta {
		height: 100%;
		max-height: none;
	}


	.Pagina-Grid {
		height: 100%;
		max-height: none;
	}


	.Pagina-Help{
		height: 100%;
		max-height: none;
	}


	.Pagina-Titulo-Opcion {
		margin-right: 0px;
	}


	.Caja-Vertical-Centro {
		margin-top: 0rem !important;
		height: 100%;
		max-height: none;
	}


	.Caja-Vertical-Totales {
		height: 100%;
		max-height: none;
		margin-bottom: 1rem;
	}


	.Bloque-En-Fila{
		flex-wrap: nowrap;
	}


	.Bloque-Movil-Fila{
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
	}


	.Bloque-Movil-Titulo {
		width: 100%;
		flex-direction: column-reverse !important;
		align-items: flex-end;
    }


	.Bloque-Movil-Columna {
        flex-direction: column !important;
    }


	.Marco-Mantenimiento {
		max-height: none;
	}

	.dataTables_scrollBody {
		height: 100% !important;
		max-height: none !important;
	}
}