@charset "utf-8";
body, html{margin:0px;padding:0px;font-size:16px}
.font-1-5-em{font-size:1.5em}
.foto-mini{height:50px;width:50px}
.foto-gran{height:200px;width:200px}
.nombrePersona{text-align:center;font-size:2em}
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.textAzul{color:#0D0B94;}
.textRojo{color:red;font-weight:bold}
/*====================================
 NAVEGADOR
=====================================*/
#cabezal{background-color:#121196;color:#FFFFFF;display:flex;flex-wrap:wrap;width:100%;}
#cabezal-titulo{font:bold 24px/50px Verdana;text-align:center;}
#cabezal-titulo a{color:#FFFFFF; text-decoration:none}
#cabezal-titulo a:hover{color:#F5FC01}
#cabezal-buscador{text-align:center;line-height:50px;}
#cabezal-link{display:flex;justify-content:flex-end;line-height:50px;font-weight:bold;}
#cabezal-link a{color:#FFFFFF;text-decoration:none;}
#cabezal-link a:hover{color:#F8EF02}
.usuario{text-transform:uppercase; font-size:13px}
@media (min-width:240px){
	#cabezal-titulo{order:0;width:400px;}
	#cabezal-buscador{order:2;width:400px;}
	#cabezal-buscador input[type=text]{width:70%}
	#cabezal-link{width:300px}
	#cabezal-link div{margin:0px 10px}
}
@media (min-width:400px){
	#cabezal-titulo{width:240px;}
	#cabezal-buscador{width:800px;}
}
@media (min-width:600px){#cabezal-link{width:300px}}
@media (min-width:700px){#cabezal-link{width:400px}}
@media (min-width:800px){#cabezal-link{width:500px}}
@media (min-width:900px){
	#cabezal-titulo{width:20%}
	#cabezal-buscador{order:0;width:50%;}
	#cabezal-link{width:30%}
}
/*====================================
 Arbol Familiar
=====================================*/
#familia{margin:100px auto; width:100%}
#familia table{margin:auto}
#familia #acendente{margin:auto;text-align:center;}
#familia #acendente td{vertical-align:bottom; text-align:center;}
#familia #desendente td{vertical-align:top; text-align:center;}
#familia #fecha{font-weight:bold}
#familia #fecha span{padding:0px 10px}
#familia a{color:#0D0B94;text-decoration:none;}
#familia a:hover{color:#9B1618;text-decoration:underline;}
/*====================================
 VENTANA MODAL
=====================================*/
/* Añadir animación (Chrome, Safari, Opera) */
@-webkit-keyframes TMejemploModal{from{top:-100px;opacity: 0;}to{top:0px;opacity:1;}}
/* Añadir animación (Sintaxis estándar) */
@keyframes TMejemploModal{from{top:-100px;opacity: 0;}to{top:0px;opacity:1;}}
/* Los antecedentes del modal */
.TMmodal{display:none;position:relative;bottom:0;left:0;right:0;top:0;z-index:1050;width:100%;height:100%;overflow:auto;background-color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0.4);}
/* Mostrar el modal cuando está dirigido */
.TMmodal:target{display:table;position:fixed;}
/* La caja modal */
.TMmodal-dialog{display:table-cell;vertical-align:middle;}
/* El contenido del modal */
.TMmodal-dialog .TMmodal-content{width:80%}.TMmodal-dialog .TMmodal-content-peq{width:500px}.TMmodal-dialog .TMmodal-content, .TMmodal-dialog .TMmodal-content-peq{margin:auto;background-color:#f3f3f3;position:relative;padding:0;outline:0;border:1px #777 solid;text-align:justify;box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);/*Añadir animación*/-webkit-animation-name:TMejemploModal;/* Chrome, Safari, Opera */-webkit-animation-duration: 1s;/*Chrome, Safari, Opera*/animation-name:TMejemploModal;animation-duration:1s;}
/* El botón utilizado para cerrar el modal */
#miModal .TMclosebtn{text-decoration:none;float:right;font-size:35px;font-weight:bold;color:#fff;}#miModal .TMclosebtn:hover,#miModal .TMclosebtn:focus{color:#000;text-decoration:none;cursor:pointer;}#miModal .TMcontainer{padding:2px 16px;}#miModal header{background-color:#5cb85c;font-size:25px;color:white;}#miModal footer{background-color:#5cb85c;font-size:20px;color:white;}
#btnDoc{padding:20px}#btnDoc a{background-color:#4C9344;border:2px solid #4C9344;border-radius:20px;color:#FFFFFF;padding:5px 20px;text-decoration:none;font-weight:bold;}#btnDoc a:hover{background-color:#E5FCFA;color:#4C9344;text-decoration:none;}
/*====================================
 DOCUMENTOS
=====================================*/
#documentos{margin:20px auto;width:90%}
#documentos iframe{height:800px;width:100%}
/*====================================
 Admin cabezal
=====================================*/
#cabezalAdmin{background-color:#121196;color:#FFFFFF;display:flex;flex-wrap:wrap;width:100%}#cabezalAdmin-titulo{font:bold 24px/50px Verdana;text-align:center;width:100%}#cabezalAdmin-titulo a{color:#FFFFFF;text-decoration:none}#cabezalAdmin-titulo a:hover{color:#F5FC01}#cabezalAdmin-link{line-height:50px;font-weight:bold;padding-right:20px;text-align:right;width:100%}#cabezalAdmin-link a{color:#FFFFFF;text-decoration:none}#cabezalAdmin-link a:hover{color:#F8EF02}#cabezalAdmin .usuario{text-transform:uppercase; font-size:13px} @media (min-width:600px){#cabezalAdmin-titulo{width:35%}#cabezalAdmin-link{width:60%}#cabezalAdmin .usuario{font-size:1em}}
/*====================================
 Admin index
=====================================*/
#contPanel{border:2px solid #7B781B;border-radius:20px;margin:20px auto;padding:20px 5px;width:90%;display:flex;flex-wrap:wrap;justify-content:space-around}#contPanel .grupo{border:1px solid #7B781B;border-radius:20px;margin:10px;padding-bottom:10px;text-align:center;width:100%}#contPanel .titulo{font-size:2em;font-weight:bold}#contPanel img{height:75px;width:auto}#contPanel .grup{display:flex;flex-wrap:wrap;justify-content:center}#contPanel .grup div{width:50%}#contPanel .lick a{font-weight:bold;text-decoration:none}#contPanel .lick:hover{background-color:#D7F9DC;border-radius:20px} @media (min-width:500px){#contPanel .grupo{width:45%}} @media (min-width:800px){#contPanel .grupo{width:30%}} @media (min-width:1000px){#contPanel .grupo{width:200px}}
/*====================================
 Admin contenedor
=====================================*/
#cont{border:2px solid #7B781B;border-radius:20px;margin:50px auto;padding:20px 5px;width:90%}#cont h1,#cont h2{text-align:center} @media (min-width:400px){#cont{padding:20px}}
/* ==========================================
***** SEGUNDA BARRA DE NAVEGACION
========================================== */
#ini{font-size:1.2em}#ini a{color:#C4C1C1;font-weight:bold;text-decoration:none}#ini a:hover{color:#8A181A;text-decoration:underline}
/* ==========================================
***** VOLVER ARRIBA
========================================== */
.arriba{font:1em monospace;text-align:right}.arriba span{font-size:1.2em;font-weight:bold}.arriba a{color:#8A8989;text-decoration:none}.arriba a:hover{color:#148313;text-decoration:underline} @media (min-width: 480px){.arriba{margin:auto;width:90%;margin-bottom:20px}} @media (min-width: 600px){.arriba{font-size:1.2em}}
/* ==========================================
***** USUARIOS LISTA
========================================== */
.btnNum{background-color:#4F4D4D;border-radius:25px;color:#FFFFFF;font-style:normal;font-weight:bold;padding:3px 10px}
.totalUsuario{font:oblique 20px monospace; text-align:center;}
#CanReg{background-color:#F4ECD2;border-radius:20px;display:flex;flex-wrap:wrap;margin-bottom:50px;padding:5px 20px;}#CanReg li{display:inline-block;height:30px;line-height:30px;list-style:none;padding-right:20px}#CanReg a{color:#0D0B94;font-weight:bold;text-decoration:none}#CanReg a:hover{color:#BB292B;text-decoration:underline}
/* ==========================================
***** TABLA CEBRADA
========================================== */
.tablaCebrada tr:nth-child(even){background:#FFFFFF}.tablaCebrada tr:nth-child(odd){background:#EEEEEE}.tablaCebrada tr:nth-child(1){background:#8A8888;color:#FCFBFB}.tablaCebrada-posicion{width:80%;margin:auto;margin-bottom:50px}.tablaCebrada tr+tr:hover{background:#E6FCE8}.tablaCebrada{border:1px solid #EEEEEE;border-collapse:collapse}.tablaCebrada td{border:2px solid #EEEEEE}.tablaCebrada th{border:2px solid #FFFFFF}
/*====================================
 FORMULARIOS REGISTRO, INGRESO
=====================================*/
.formIngReg{border:2px solid #88691C;border-radius:20px;box-shadow:10px 10px 20px;margin:50px auto;width:98%; padding-bottom:30px}.formIngReg h1{color:#83791F;font-size:42px}.formIngReg .divTexInput{display:flex;flex-wrap:wrap;padding:10px;margin:auto;width:90%;}.formIngReg .divText{font-weight:bold;padding:5px 0px;width:150px;}.formIngReg .devInput{width:100%;}.formIngReg .divTexSelec{display:flex;flex-wrap:wrap;padding:10px;margin:auto;width:90%;}.formIngReg .divTSText{font-weight:bold;padding:5px 0px;width:100%;}.formIngReg .divTSSelec{width:100%}.formIngReg input[type=text],.formIngReg input[type=email],.formIngReg input[type=password],.formIngReg select{background-color:#F8F8D0;border-radius:10px;padding:5px 10px;width:100%;box-sizing:border-box}.formIngReg input[type=text]:hover,.formIngReg input[type=email]:hover,.formIngReg input[type=password]:hover,.formIngReg select:hover{background-color:#F9D0D1}.formIngReg input[type=text]:focus,.formIngReg input[type=email]:focus,.formIngReg input[type=password]:focus,.formIngReg select:focus{background-color:#CFFFD0}.formIngReg .divEnviar{text-align:right; width:100%}.formIngReg footer{text-align:right;width:95%;} @media screen and (min-width: 480px){.formIngReg{width:400px}} @media screen and (min-width: 768px){.formIngReg{width:550px}.formIngReg .divTexInput{width:350px}.formIngReg .divText{text-align:right; padding-right:7px}.formIngReg .devInput{width:55%}.formIngReg .divTexSelec{width:60%}.formIngReg footer{width:82%}}
/*====================================
 BOTON
=====================================*/
.boton{display:inline-block;padding:6px 20px;margin:0;font-size:14px;font-weight:normal;line-height:1.42857143;text-align:center;text-decoration:none;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:10px;}.boton:focus,.boton:active:focus,.boton.active:focus,.boton.focus,.boton:active.focus,.boton.active.focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset: -2px;}.boton:hover,.boton:focus,.boton.focus{color:#333;text-decoration:none;}.boton:active,.boton.active{background-image:none;-webkit-box-shadow:inset 0 3px 5px rgba(0, 0, 0, .125);box-shadow:inset 0 3px 5px rgba(0, 0, 0, .125);}
.botonVerde{color:#F5F403;background-color:#0F7703;border-color:#026A04;font-weight:bold;}.botonVerde:hover,.botonVerde:focus,.botonVerde.focus,.botonVerde:active,.botonVerde.active{color:#0F7703;background-color:#F5F403;border-color:#026A04;}
.botonNaranja{color:#F5F403;background-color:#C18C08;border-color:#F5F403;font-weight:bold;}.botonNaranja:hover,.botonNaranja:focus,.botonNaranja.focus,.botonNaranja:active,.botonNaranja.active{color:#C18C08;background-color:#F5F403;border-color:#C18C08;}
/*====================================
 PAGINA SALUDO
=====================================*/
.PagSaludo{border:2px solid #88691C;border-radius:20px;box-shadow:10px 10px 20px;margin:50px auto;width:95%; padding-bottom:30px; font-family:Arial;}.PagSaludo h1{color:#83791F;font-size:42px;text-align:center;}.PagSaludoText{width:90%;margin:auto} @media screen and (min-width: 480px){.PagSaludo{width:90%}} @media screen and (min-width: 768px){.PagSaludo{width:80%}} @media screen and (min-width: 1024px){.PagSaludo{width:800px}}
/* ==========================================
***** PAGINADOR
========================================== */
.paginador{display:inline-block;padding-left:0;margin:20px 0;border-radius:4px}.paginador > li{display:inline}.paginador > li > a{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:#337ab7;text-decoration:none;background-color:#fff;border:1px solid #ddd}.paginador > li:first-child > a{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.paginador > li:last-child > a{border-top-right-radius:4px;border-bottom-right-radius:4px}.paginador > li > a:hover,.paginador > li > a:focus{color:#23527c;background-color:#eee;border-color:#ddd}.paginador > .activo > a,.paginador > .activo > a:hover,.paginador > .activo > a:focus{z-index:2;color:#ffffff;cursor:default;background-color:#337ab7;border-color:#337ab7;font-weight:bold}
/*====================================
 FORMULARIO DE PERSONA
=====================================*/
#formPersona{display:flex;flex-wrap:wrap;justify-content:space-around}#formPersona #table1{display:flex;flex-wrap:wrap;margin-bottom:30px;width:100%}#formPersona #table1 div{height:35px;line-height:35px;width:100%} @media (min-width:500px){#formPersona #table1{width:500px}#formPersona #table1 div.posA{text-align:right; padding-right:10px;width:40%}#formPersona #table1 div.posB{width:56%}} @media (min-width:800px){#formPersona #table1{margin:0px 100px;margin-bottom:30px}} @media (min-width:900px){#formPersona #table1{margin:0px 150px;margin-bottom:30px}} @media (min-width:1000px){#formPersona #table1{margin:0px 200px;margin-bottom:30px}} @media (min-width:1200px){#formPersona #table1{margin:0px}}#formPersona input[type=text]{width:93%}#formPersona select{width:93%}#formPersona input[type=text],#formPersona input[type=date],#formPersona select{background-color:#F8F8D0;border-radius:10px;padding:5px}#formPersona input[type=text]:hover,#formPersona input[type=date]:hover,#formPersona select:hover{background-color:#F9D0D1}#formPersona input[type=text]:focus,#formPersona input[type=date]:focus,#formPersona select:focus{background-color:#CFFFD0}
/* ==========================================
***** FORMULARIO SUBIR IMAGEN
========================================== */
#formSubir{padding:30px;}#formSubir #notaSubir{background-color:#F9EAD0;border:1px solid #AD6E1E;border-radius:20px;color:red;font-weight:bold;margin-bottom:20px;padding:10px 20px;}#formSubir input{margin:0px; padding:0px}#formSubir input[type=submit],#formSubir input[type=file]{background-color:#4C9344;border-radius:20px;color:#FFFFFF;padding:5px 20px;text-decoration:none;font-weight:bold;}#formSubir input[type=submit]:hover{background-color:#E5FCFA;border:2px solid #4C9344;color:#4C9344;}
/* ==========================================
***** FORMULARIO PASOS
========================================== */
.divPasos{height:60px;line-height:60px;font-size:24px;font-weight:bold;text-align:center;margin-bottom:20px}.divPasos img{height:50px;width:auto;vertical-align:middle;}