/* fuentes generales*/
*{
	font-family: Roboto;
	box-sizing: border-box;
}	

h1 {
	color: var(--font-H1);
	text-align: center;	
}
h2 {
	color: var(--font-H2);
	text-align: center;
}
h3{
	color: var(--font-H3);
}
h4{
	color: var(--font-H4);	
}
h5{
	color: var(--font-H5);	
}
p {
color: var(--font-p);
}

a:link {
	text-decoration: none;
	color: var(--a-link);
}
a:hover {
	text-decoration: none;
	color: var(--a-hover);
}

fieldset{
	border-radius: 4px ;
	border: 1px solid var(--border-btn-primary);
	padding: 5px 10px;
}

legend{
	color: var(--font-H2);	
}

/*span*/
.txtspan-warning {
	color: var(--txt-span-warning);
}

.title{
	font-weight: bold;
}

/*		/* Para pruebas
div{
	border: 1px solid var(--bg-btn-delete);
	}

*/

/*	configuracion de contenidos */
.content-standard{
	margin-left: 10px;
	padding: 10px;
  display: flex;
  align-content: start;
  flex-direction: column;
}

.content-center {
  display: center;
  place-content: center;
	align-content: center;
	text-align: center;
	align-items: start;	
	padding: 10px;
	justify-content: center;	
}

.content-center-obj {
  display: flex;
  place-content: center;
	align-content: center;
	align-items: center;	
	padding: 8px;
}

.content-row-block{
	padding: 5px;
	display: grid;	
	align-content: start;
}
.content-row{
	padding: 5px;
	display: inline-block;
	flex-direction: row;
	align-content: start;	
}

.spacing-small{
	margin: 5px ;
}

.content-justif {
	display: inline-flex;  /*  lo coloca en linea*/	
	flex-wrap: wrap;
	place-content: justify;
	align-content: center;
	align-items: center;	
	margin-right: 10px;	
	margin-left: 10px;	
	padding: 5px;
	flex-direction: column;	
}

/* posicionamiento imagen imagen */
.imgCenter{
/*	display: block;	*/
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}

.imgheader{
/*	display: block;	*/
max-width: 90%;
max-height: 90%;
	
}

.box-logo {
	width: 220px;	/*25%;*/
	align-content: center;
	text-align: center;	
	overflow: auto;
}
.box-tittle {
	width: 75%;
	align-content: center;
/*	overflow-y: scroll;*/
}

/* div en fila que contiene la opcion de busqueda, puede tener 2 o 3 divs y despues las clases para sus elementos*/
.div-row{
	width: 100%;
	margin-left: auto;
	margin-right: auto;	
	margin-top: 5px;
	margin-bottom: 5px;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
}
.row-select{
	margin-left: 15px;
	width: 100%;
}


.row-search{
	margin-left: 15px;
	width: 100%;
	padding: 5px 5px;
}

.row-actions{
	margin-left: 15px;
	width: 100%;
	text-align: center;	
}

.row-details{
	width: 100%;
	margin-left: auto;
	margin-right: auto;	
	margin-top: 5px;
	margin-bottom: 5px;
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
}

.div-details{
	margin-left: 15px;
	width: 100%;
	padding: 5px 5px;
	text-align: justify;
}
.records-label{
	display: inline-block;
	width: 100px;
	text-align: justify;
	color: var(--color-label);
	margin-bottom: 5px;
}

.records-select{
	display: inline-block;
	width: 120px;	
	padding: 2px 2px;
	margin-top: 2px;
	margin-bottom: 2px;
	border-radius: 4px ;
	border: 2px solid var(--border-boxtext);
	background: var(--bg-boxtext);
	font-size: 0.9em;
}


.box-search{	
	display: inline-block;
	width: 90%;
	height: 30px;
	margin: 2px;	
	padding: 5px 5px;
	border-radius: 5px ;
	border: 2px solid var(--border-boxtext);
	background: var(--bg-boxtext);
	font-size: 1em;
	
}

.row-btn-tbl{
	width: 90%;
	margin-left: auto;
	margin-right: auto;	
	align-items: center;	
	display: flex;
	align-content:flex-start;
	/*
	overflow: hidden;	
	*/
}
.row-btn-tbl-s{
	width: 90%;
	height: 40px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;	
	align-items: center;	
	display: flex;
}
.row-btn-tbl{
	width: 90%;
	margin-left: auto;
	margin-right: auto;	
	align-items: center;	
	display: flex;
	align-content:flex-start;
	/*
	overflow: hidden;	
	*/
}

.div-search{
	margin-left: 15px;
	min-width: 250px;
}
.div-add{
	float: right;
	margin-left: auto;
}

.cel-btn-actions{	
	display: flex;	
	align-items: center ;	
	place-content: center;
}
/* Estandar de letras sin dimesiones, 		*/

.txt-primary{
	box-sizing: border-box;
   padding: 5px 5px;
	 color: var(--color-label);
	/*
	display: inline-block;
	text-align: justify;
	vertical-align: top;
	padding-right: 5px;
	margin-bottom: 5px;*/
}

.box-f-standard {
	box-sizing: border-box;
	padding: 5px 5px;
	border-radius: 6px;
	border: 2px solid var(--border-boxtext);
	background: var(--bg-boxtext);
	font-size: 0.9em;
}




/*Para formularios	*/
.forms {
	padding: 10px; 	
	text-align: center;
	/*justify-content: start;*/
}
.row-forms{
	padding: 10px;
	align-items: start ;
}
.row-forms-s{
	padding: 5px;
	/*align-items: start ;*/
}
.row-flex-s{	/*uso de flex en lugar de inline-block para usar mejor los espacios*/
	display: flex;
	flex-wrap: nowrap;
	align-items: center; /*alineacion vertical */
	gap: 5px;
	padding: 5px;
}

.fields-container{
	margin: 10px;
}

.labels-question {
	display: inline-block;
	min-width: 90px;
	text-align: justify;
	color: var(--color-label);
}
.labels-forms {
	display: inline-block;
	width: 160px;
	text-align: justify;
	color: var(--color-label);
	margin-bottom: 5px;
}

.labels-radio {
	width: 40px;
	display: inline-block;
	text-align: justify;
	margin: 5px;
}

.box-radio{
	margin: 5px;
	width: 20px;
	height: 20px;
}

.box-standard {	
	display: inline-block;
	padding: 8px 5px;
	border-radius: 6px ;
	border: 2px solid var(--border-boxtext);
	background: var(--bg-boxtext);
	font-size: 0.9em;
}

.file-forms{
	margin: 1%;
}

.select-forms{
	display: inline-block;
	width: 40%;
  padding: 8px 5px;
  border: 2px solid var(--border-boxtext);
  border-radius: 6px;
  background-color: #f1f1f1;
}

.select-forms:focus {
  border-color: #aaa;
  box-shadow: 0 0 1px 3px var(--select-color-option-margen-box);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: var(--select-color-option-txt) ; 
  outline: none;
}

.marge-dorado{
	width: 85%;
	height: 10%;
	border-radius: 6px ;
	border: 2px solid var(--marge-gold);
	margin-left: auto;
	margin-right: auto;	
}

/*	Tamaños para  labels */
.lbl-sm{
	display: inline-block;
	text-align: justify;
	vertical-align: top;
	color: var(--color-label);
	width: 80px;
	padding-right: 5px;
	margin-bottom: 5px;
}
.lbl-s{
	display: inline-block;
	text-align: justify;
	vertical-align: top;
	color: var(--color-label);
	width: 150px;
	padding-right: 5px;
	margin-bottom: 5px;
}
.lbl-m{
	display: inline-block;
	text-align: justify;
	vertical-align: top;
	color: var(--color-label);
	width: 200px;
	padding-right: 5px;
	margin-bottom: 5px;
}
.lbl-l{
	display: inline-block;
	text-align: justify;
	vertical-align: top;
	color: var(--color-label);
	width: 260px;
	padding-right: 5px;
	margin-bottom: 5px;
}
.lbl-el{
	display: inline-block;
	text-align: justify;
	vertical-align: top;
	color: var(--color-label);
	width: 320px;
	padding-right: 5px;
	margin-bottom: 5px;
}
.lbl-xxl{
	display: inline-block;
	text-align: justify;
	vertical-align: top;
	color: var(--color-label);
	width: 450px;
	padding-right: 5px;
	margin-bottom: 5px;
}
/* Tamaños para inputs 		*/
.input-sm{
	width: 70px;
}
.input-s{
	/*width: 160px;*/
	width: 25%;
}
.input-m{
	/*width: 220px;*/
	width: 40%;
}
.input-l{
	/*width: 280px;*/
	width: 60%;
}
.input-el{
	/*width: 340px;*/
	width: 75%;
}

/* alineacion inputs */
.aling-end{
	text-align: end;
}

/*	estilos para tablas */
.div-table{
	overflow: auto;
}

.table-main{
	min-width: 100%;
	border-collapse: collapse;	
}
.table-main th {
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  background-color: var(--bg-tb-th);
  color: var(--color-txt-th);
}

.table-main td {
  padding: 2px;
}

.table-main th, td{ 
	border: 1px solid var(--tb-border-color) ;	
}

.table-main tr:nth-child(even){
	background-color: var(--tb-bg-color-tr);
}

.td-center{
	text-align: center;
}
.td-right{
	text-align: right;
}
.td-left{
	text-align: left;
}



.pagination {
	list-style-type: none;
	display: flex;
}

.pagination ul {
  list-style-type: none;
  margin: 2px;
  padding: 2px;
  overflow: hidden;
  background-color: #f70b0b;
}

.pagination li {
  float: left;
}

.pagination li a {
  display: block;
  color: var(--color-label);
  text-align: center;
  padding: 5px 5px;
  text-decoration: none;
}

.pagination li a:hover {
  background-color: var(--bg-btn-primary-hover);
}

/* para Form de prospectos, empleados	*/
.content-section {
	display: flex;
  flex-wrap: wrap;	
	justify-content: flex-start ;
  gap: 5px; /* Espacio entre secciones */
  padding: 5px;
	border: 1px solid var(--border-section-box);
}

.secction-form{	
	display: flex;
	flex-direction: column;
	padding: 5px;
	margin: 5px;
	width: 100%;
  height: 70px;
  overflow: auto; /*para evitar desbordamiento */
	justify-content: center;
	align-items: start;	
}
.secction-button{	
	display: flex;
	flex-direction: column;
	padding: 5px;
	margin: 5px;
	width: 100%;
  height: 70px;
  overflow: auto; /*para evitar desbordamiento */
	justify-content: center;
	align-items: center;	
}

.secction-label {	
	min-width: 90px;
	text-align: justify;
	color: var(--color-label);
}

.secction-input{
	display: inline-block;
	/*width: 380px;*/
	width: 100%;
	padding: 5px 5px;
	border-radius: 6px ;
	border: 2px solid var(--border-boxtext);
	background: var(--bg-boxtext);
	font-size: 0.9em;
}


/* Otra opcion para cuadricula de form	*/
.labels-forms20 {
	display: inline-block;
	width: 20%;
	min-width: 90px;
	text-align: justify;
	color: var(--color-label);
}

.labels-fijo160{
	display: inline-block;
	width: 160px;
	text-align: justify;
	color: var(--color-label);		
}

.secction-input70{
	width: 70%;
	padding: 8px 5px;
	border-radius: 6px ;
	border: 2px solid var(--border-boxtext);
	background: var(--bg-boxtext);
	font-size: 0.9em;
}
.secction-input80{
	width: 80%;
	padding: 8px 5px;
	border-radius: 6px ;
	border: 2px solid var(--border-boxtext);
	background: var(--bg-boxtext);
	font-size: 0.9em;
}
.input-fijo300{
	width: 380px;
	padding: 8px 5px;
	border-radius: 6px ;
	border: 2px solid var(--border-boxtext);
	background: var(--bg-boxtext);
	font-size: 0.9em;
}
.secction-input-botton {
	display: inline-block;
	width: 100px;
	padding: 5px 5px;
	border: none;
	border-bottom: 2px solid var(--border-boxtext);
	background: var(--bg-boxtext);
	font-size: 0.9em;
	text-align: end;
}

.flip-topics {
	font-size: 16px;
  padding: 5px;
  text-align: justify;
  background-color: var(--border-boxtext);
  color: white;
  border: solid 1px var(--marge-blue);
  margin: auto;
	padding: 10px;
	border-radius: 6px;
	margin-top: 10px;
	margin-bottom: 0px;
}
.body-topics {
	font-size: 16px;
  padding: 5px;
  text-align: justify;
	align-items: start;
  background-color: var(--bg-boxtext);
  border: solid 1px var(--marge-blue);
  margin: auto;
	border-radius: 4px;
}