/*
Theme Name: Evaluacion ID
Theme URI: http://poeticavisual.com
Description: Gestion Iglesia
Version: 1
Author: Zabdiel
Author URI: http://poeticavisual.com
*/
/* RESET */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }body {line-height: 1; }ol, ul {list-style: none; }blockquote, q {quotes: none; }blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none; }:focus {outline: 0; }ins {text-decoration: none; }del {text-decoration: line-through; }table {border-collapse: collapse; border-spacing: 0; } * {padding: 0; margin: 0; border: 0; }

* {
	margin: 0;
	padding: 0;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, 
pre, form, fieldset, input, textarea, p, blockquote, th, td {
	padding:0;
	margin:0; }

fieldset, img { border:0 }

ol, ul, li { list-style:none }

:focus { outline:none }

:root {
	--color: #0f2b49;
	--marino: #051c48;
	--azul: #2c2e83;
	--azul2: #00BFFF;
	--cielo: #01A9DB;
	--celeste: #A9F5F2;
	--azulclaro: #D5DDE5;

	--guinda: #571546;
	--vino: #8f083f;
	--rojo: #FF0000;
	--rojo2: #B40404;
	--rojo3: #610B0B;
	--rojoclaro: #FEDBDB;
	--rojoclaro2: #FBC5C5;

	--rosa: #e5007d;
	--violeta: #BF00FF;
	--rosaclaro: #F8E0F1;

	--morado: #8000FF;
	--morado2: #DA81F5;
	--moradoclaro: #BCA9F5;
	
	--cafe: #AB8126;
	--cafe2: #DBA901;
	--cafeclaro: #F1DDC7;

	--naranja: #FF8C00;
	--naranja2: #ffb600;
	--naranjaclaro: #FFEAC4;
	
	--amarillo: #f4ed0f;
	--amarillo2: #cac40f;
	--amarillo3: #b29a05;
	--amarilloclaro: #F5F6CE;
	--amarilloclaro2: #F2F5A9;

	--verde: #298A08;
	--verde2: #94d500;
	--verde3: #0B610B;
	--verde4: #0B3B0B;
	--limon: #BCF5A9;
	--verdeclaro: #D8F6CE;
	
	--dorado: #efba10;

	--negro: #1A1D23;
	--negro2: #000000;
	--oscuro: #21252E;
	--oxford: #343A45;
	--gray: #9DA6AE;
	--plata: #D8D8D8;

	--rata: #3f3e3e;
	--gris: #5b626b;
	--gris5: #555;
	--gris6: #a6a6a6;
	--gris9: #999;
	--gris10: #AEB6BF;

	--gris1: #6b7580;
	--gris2: #525d6a;
	--gris3: #2b3644;
	--grisclaro: #d9d9d9;
	--grisclaro2: #cacaca;
	
	--blanco: #fff;
	--alpha: #f1f1f1;

	--alternate: #EBEBEB;
	--hover: #AEB6BF;

	--hoverblack: #9DA6AE;

	--td: #f5f5f5;
	--border: #C1C3D1;
}

html {
	background: #999;
	scroll-behavior: smooth;
}

body {
	margin-left: 50px;
	margin-top: 50px;
	transition: margin-left 300ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

body,
input,
textarea,
select {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	line-height: 15px;
	color: var(--gris);
}

main {
	padding: 20px;
	background: #fafafa url(images/bg.jpg) repeat center center;
	min-height: calc(100vh - 90px); /* 146px quitar footer */ 
}

header {
	width: 100%;
	height: 50px;
	top: 0;
	position: fixed;
	padding: 0px 20px;
	background: var(--marino);
	box-shadow: 0px 3px 10px -4px var(--oscuro);
	z-index: 200;
	overflow: hidden;
}

/*--------------------------------------------------------------
# loader
--------------------------------------------------------------*/

#page-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background: var(--negro) none repeat scroll 0% 0%;
	z-index: 99999;
}
#page-loader .preloader-interior {
	display: block;
	position: relative;
	left: 50%;
	top: 50%;
	width: 80px;
	height: 80px;
	margin: -40px 0 0 -40px;
	border-radius: 50%;
	border: 8px solid transparent;
	border-top-color: var(--cielo);
 
	-webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
			animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
#page-loader .preloader-interior:before {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	border-radius: 50%;
	border: 8px solid transparent;
	border-top-color: var(--dorado);
 
	-webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
		animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
#page-loader .preloader-interior:after {
	content: "";
	position: absolute;
	top: 15px;
	left: 15px;
	right: 15px;
	bottom: 15px;
	border-radius: 50%;
	border: 8px solid transparent;
	border-top-color: var(--blanco);
 
	-webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
		animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
	0%   { 
		-webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(0deg);  /* IE 9 */
		transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
	}
	100% {
		-webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(360deg);  /* IE 9 */
		transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
	}
}
@keyframes spin {
	0%   { 
		-webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(0deg);  /* IE 9 */
		transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
	}
	100% {
		-webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(360deg);  /* IE 9 */
		transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
	}
}

.ir-arriba {
	display:none;
	padding:10px;
	background: var(--naranja);
	font-size:20px;
	color: var(--blanco);
	cursor:pointer;
	position: fixed;
	bottom:20px;
	right:20px;
	border-radius: 2px;
}

/*--------------------------------------------------------------
# colores
--------------------------------------------------------------*/

.b-color { background: var(--color); }
.b-marino { background: var(--marino); }
.b-azul { background: var(--azul); }
.b-cielo { background: var(--cielo); }
.b-celeste { background: var(--celeste); }
.b-azulclaro { background: var(--azulclaro); }
.b-guinda { background: var(--guinda); }
.b-vino { background: var(--vino); }
.b-rojo { background: var(--rojo); }
.b-rojo2 { background: var(--rojo2); }
.b-rojoclaro { background: var(--rojoclaro); }
.b-rosa { background: var(--rosa); }
.b-violeta { background: var(--violeta); }
.b-rosaclaro { background: var(--rosaclaro); }
.b-morado { background: var(--morado); }
.b-moradoclaro { background: var(--moradoclaro); }
.b-cafe { background: var(--cafe); }
.b-cafeclaro { background: var(--cafeclaro); }
.b-naranja { background: var(--naranja); }
.b-naranja2 { background: var(--naranja2); }
.b-naranjaclaro { background: var(--naranjaclaro); }
.b-amarillo { background: var(--amarillo); }
.b-amarillo2 { background: var(--amarillo2); }
.b-amarilloclaro { background: var(--amarilloclaro); }
.b-verde { background: var(--verde); }
.b-verde2 { background: var(--verde2); }
.b-limon { background: var(--limon); }
.b-verdeclaro { background: var(--verdeclaro); }
.b-negro { background: var(--negro); }
.b-negro2 { background: var(--negro2); }
.b-rata { background: var(--rata); }
.b-gris { background: var(--gris); }
.b-gris9 { background: var(--gris9); }
.b-gris10 { background: var(--gris10); }
.b-blanco { background: var(--blanco); }
.b-alpha { background: var(--alpha); }
.b-alternate { background: var(--alternate); }
.b-hover { background: var(--hover); }

.t-color { color: var(--color); }
.t-marino { color: var(--marino); }
.t-azul { color: var(--azul); }
.t-cielo { color: var(--cielo); }
.t-celeste { color: var(--celeste); }
.t-guinda { color: var(--guinda); }
.t-vino { color: var(--vino); }
.t-rojo { color: var(--rojo); }
.t-rojo2 { color: var(--rojo2); }
.t-rosa { color: var(--rosa); }
.t-violeta { color: var(--violeta); }
.t-morado { color: var(--morado); }
.t-cafe { color: var(--cafe); }
.t-cafeclaro { color: var(--); }
.t-naranja { color: var(--naranja); }
.t-naranja2 { color: var(--naranja2); }
.t-amarillo { color: var(--amarillo); }
.t-amarillo2 { color: var(--amarillo2); }
.t-verde { color: var(--verde); }
.t-verde2 { color: var(--verde2); }
.t-limon { color: var(--limon); }
.t-negro { color: var(--negro); }
.t-rata { color: var(--rata); }
.t-blanco { color: var(--blanco); }

.izquierda, .left { float:left; }
.derecha, .right { float:right; }
.centro, .center { text-align: center; }
.clear { clear: both; }
.inline { display: inline-block; }

.borde { border: 1px solid #000; }

/*--------------------------------------------------------------
# header
--------------------------------------------------------------*/

.icon__menu {
	width: 20px;
	height: 20px;
	display: inline-block;
	margin-top: 4px;
	padding: 10px 0px;
	float: left;
}

.icon__menu i {
	font-size: 20px;
	cursor: pointer;
	position: absolute;
	color: var(--naranja);
}

.icon__user {
	height: 20px;
	display: inline-block;
	margin-top: 4px;
	margin-left: 10px;
	padding: 10px 0px;
	float: left;
}
	.icon__user i {
		font-size: 20px;
		position: absolute;
		color: var(--blanco);
	}
	.icon__user p {
		font-size: 14px;
		line-height: 20px;
		color: var(--blanco);
		margin-left: 25px;
		display: inline-block;
	}

a.logo {
	background: url(images/logo-calado.png) no-repeat top center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 200px;
	height: 40px;
	margin-left: 15px;
	padding: 0px;
	display: inline-block;
	}
	a.logo:hover { background-color: none; }

.contexto {
	width: 150px;
	height: 20px;
	display: inline-block;
	margin: 11px 0 0 10px;
	padding: 0px;
	background: none;
	border: none;
	float: left;
}
	.context-switch {
		display: flex;
		background: none;
	}
	.context-btn {
		flex: 1;
		background: none;
		border: none;
		padding: 5px 0;
		font-size: 15px;
		font-weight: bold;
		color: var(--blanco);
		cursor: pointer;
		transition: all .2s;
	}
	.context-btn.active {
		color: var(--blanco);
	}
	.context-btn[data-context="Iglesia"].active {
		background: var(--morado);
		color: var(--blanco);
	}
	.context-btn[data-context="Pastor"].active {
		background: var(--dorado);
		color: var(--negro);
	}



.menutop {
	width: auto;
	float: right;
	display: block;
	margin-right: 90px;
}

.hoy {
	width: 73px;
	margin: 8px 0px 0px 0px;
	display: block;
	float: left;
	font-size: 12px;
	line-height: 16px;
	text-align: right;
	color: var(--amarillo);
}

#reloj { color: var(--naranja); }

.modo {
	width: 55px;
	margin: 8px 0px 0px 0px;
	display: block;
	float: left;
	font-size: 12px;
	line-height: 16px;
	text-align: right;
	color: var(--rojo);
}

nav {
	margin-top: 8px;
	display: block;
	float: right;
}

nav ul {
	overflow:hidden;
	list-style:none;
}
	nav ul li { float:left; }
	nav ul li a {
		font-size: 20px;
		color: var(--blanco);
		margin-left: 10px;
		padding: 5px;
		display:block;
	}
	nav ul li span { margin: 0px; }
	nav ul li a:hover { color: var(--gris); }

	nav li ul {
		position: absolute;
		width: 150px;
		left: -999px;
		padding: 0;
		margin: 0px 0px 0px -110px;
	}

ul.menu {
	text-align: center;
	list-style:none;
	margin: 30px 0px 10px 0px;
}
	ul.menu li { display: inline-block; margin: 0px 5px 20px 5px; }
	ul.menu li a {
		padding: 6px 12px;
		font-size: 14px;
		color: var(--blanco);
		background: var(--marino);
		border-bottom: 2px solid var(--naranja);
	}
	ul.menu li a:hover {
		color: var(--blanco);
		background: var(--vino);
		border-bottom: 2px solid var(--naranja);
	}
	ul.menu li a.activo {
		color: var(--blanco);
		background: var(--rojo);
		border-bottom: 2px solid var(--naranja);
	}

ul.submenu {
	text-align: center;
	list-style:none;
	margin: 30px 0px 10px 0px;
}
	ul.submenu li { display: inline-block; margin: 0px 5px 20px 5px; }
	ul.submenu li a {
		padding: 6px 12px;
		font-size: 14px;
		color: var(--blanco);
		background: var(--cielo);
		border-radius: 6px;
	}
	ul.submenu li a:hover {
		color: var(--blanco);
		background: var(--vino);
	}
	ul.submenu li a.activo {
		color: var(--blanco);
		background: var(--naranja);
	}
	ul.submenu li a.inactivo {
		color: var(--negro);
		background: var(--gris10);
	}
	ul.submenu li a.inactivo:hover {
		color: var(--blanco);
		background: var(--gris5);
	}

/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/

footer {
	width: 100%;
	margin: 0px;
	background-color: var(--negro);
	color: var(--gris);
	padding: 20px 0px 20px 0px;
	border-top: 1px solid var(--gris);
	border-bottom: 1px solid var(--negro);
}
	footer p {
		font-size: 12px;
		line-height: 14px;
		text-align: right;
		padding-right: 20px;
	}
	footer p a { color: var(--gris9); }
	

/*--------------------------------------------------------------
# generales
--------------------------------------------------------------*/

a { text-decoration: none; }

h1 {
	font-size: 26px;
	line-height: 30px;
	font-weight: bold;
	color: var(--color);
	text-align: center;
	margin: 0px 10px 20px 0px;
}
h1 a { color: var(--color); }
h1 a:hover { color: var(--azul); }

h2 {
	font-size: 22px;
	line-height: 30px;
	font-weight: normal;
	color: var(--rojo);
	text-align: center;
	margin-bottom: 15px;
}

h3 {
	font-size: 20px;
	line-height: 24px;
	font-weight: normal;
	color: var(--cielo);
	text-align: center;
	margin-bottom: 15px;
}

h4 {
	font-size: 18px;
	line-height: 26px;
	font-weight: normal;
	color: var(--vino);
	text-align: center;
	margin-bottom: 10px;
}

h5 {
	font-size: 16px;
	line-height: 20px;
	font-weight: normal;
	color: var(--gris);
	text-align: center;
	margin-bottom: 10px;
}

h6 {
	font-size: 14px;
	line-height: 20px;
	font-weight: normal;
	color: var(--gris);
	text-align: center;
	margin-bottom: 10px;
}

strong.naranja { color: var(--naranja); }
strong.verde { color:var(--verde); }
strong.rojo { color:var(--rojo); }

span.naranja { color: var(--naranja); font-weight:bold; }
span.cielo { color: var(--cielo); font-weight:bold; }
span.morado { color: var(--morado); font-weight:bold; }
span.rosa { color: var(--rosa); font-weight:bold; }
span.verde { color: var(--verde); font-weight:bold; }
span.cafe { color: var(--cafe); font-weight:bold; }
span.rojo { color: var(--rojo); font-weight:bold; }
span.azul { color: var(--azul); font-weight:bold; }
span.negro { color: var(--rata); font-weight:bold; }
span.gris { color: var(--gris); font-weight:bold; }

span.rol-dia { font-size:11px; letter-spacing:1px; }

sup {
	vertical-align: super;
	font-size: smaller;
}
	sup.naranja { color: var(--naranja); }
	sup.cielo { color: var(--cielo); }
	sup.morado { color: var(--morado); }
	sup.rosa { color: var(--rosa); }
	sup.verde { color: var(--verde); }
	sup.rojo { color: var(--rojo); }

.codex {
	text-align: left;
	font-size: 14px;
	line-height: 20px;
	color: var(--negro);
}

.noimp { display: block; }
.seimprime { display: none; }

/*--------------------------------------------------------------
# content
--------------------------------------------------------------*/

.contenido {
	display: block;
	margin: 0px 0px 20px 0px;
	padding: 30px;
	background: rgba(255,255,255,0.3);
	border-radius: 8px;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.09) inset;
}

#descargarBtn { margin-top:20px; }

.contenido a { color: var(--azul); }

.minibloque { display:block; float:left; }
.padding { padding: 16px; }
.padding5 { padding: 5px; }
.padding10 { padding: 10px; }
.margen { margin: 16px; }
.margen-modal { margin: 30px 16px 16px 16px; }

.flex-horizontal {
	display: flex;
	align-items: center; /* Centra verticalmente */
}

.flex-vertical {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 515px;
}

.col-centro {
	width: 400px; 
	margin: 10px auto 10px;
}

.bloques {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-gap: 20px;
}

.bloques-mini {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
	grid-gap: 20px;
}

.bloques-lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-gap: 20px;
}

.bloques-literatura {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
	grid-gap: 100px;
}

.mitad {
	width:48%;
	display:inline-block;
	float:left;
}
/*
.uno, .uno-basic {
	width: 100%;
	padding: 0px;
	margin: 0px 0px 50px 0px;
	border: 1px solid var(--blanco);
	border-radius: 8px;
	box-shadow: 0px 3px 10px -6px var(--gris9);
}*/

.uno, .dos, .tres, .cuatro, .cinco, .seis, .siete, .ocho, .dos-uno, .uno-tres, 
.uno-basic, .dos-basic, .tres-basic, .cuatro-basic, .cinco-basic, .seis-basic, .siete-basic, .ocho-basic {
	display: grid;
	grid-auto-rows: minmax(50px, auto);
	grid-gap: 20px;
	/*grid-auto-flow: dense;*/
	padding: 0px;
	margin-bottom: 20px;
}
.dos-basic, .tres-basic, .cuatro-basic, .cinco-basic, .seis-basic, .siete-basic, .ocho-basic { margin-bottom: 0px; }

.uno, .uno-basic { grid-template-columns: 1fr; }
.dos, .dos-basic { grid-template-columns: repeat(2, 1fr); }
.tres, .tres-basic { grid-template-columns: repeat(3, 1fr); }
.cuatro, .cuatro-basic { grid-template-columns: repeat(4, 1fr); }
.cinco, .cinco-basic { grid-template-columns: repeat(5, 1fr); }
.seis, .seis-basic { grid-template-columns: repeat(6, 1fr); }
.siete, .siete-basic { grid-template-columns: repeat(7, 1fr); }
.ocho, .ocho-basic { grid-template-columns: repeat(8, 1fr); }
.uno-tres { grid-template-columns: 1fr 3fr; }
.dos-uno { grid-template-columns: 2fr 1fr; }

	.item {
		position: relative;
		grid-column: span 1;
		grid-row: span 1;
		flex-direction: column;
		justify-content: space-between;
		padding: 6px;
		border-radius: 8px;
		box-shadow: 1px 1px 1px rgba(0,0,0,0.09) inset;
	}

.seis-flex {
	display: grid;
	grid-template-columns: repeat(6, auto);
	gap: 10px;
	width: 100%;
	align-items: stretch;
}

.seis-flex > * {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}


/*--------------------------------------------------------------
# flotante
--------------------------------------------------------------*/

.modal {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--blanco);
	/*width: 80%;*/
	max-height: 75vh;
	overflow-y: auto;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	z-index: 9999;
}
	.modal h4 { margin-bottom: 0px; }
	.modal p { margin-bottom: 5px; }

.overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9998;
}

.close-btn {
	position: relative;
	float: right;
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	color: var(--blanco);
	background: var(--rojo);
	border: none;
	padding: 4px 8px;
	border-radius: 50%;
}

.close-btn:hover { background: var(--dorado); }