/* default for colors */

/* -END:Grid System- */

/* - INI:Grid Site - */
.wpContent { box-sizing:border-box; margin:0 auto; }

/* Login conditions */
body[data-userlogin="0"] .login_required, body[data-userlogin="1"] .login_exceded { display:none !important; }

/* Icon implementation */
svg.icon {
	display: block;
	vertical-align: sub;
	fill: currentColor;
	height: 1em;
	width: 1em;

	&.inline {
		display: inline-block;
	}

	&.inline.mr {
		margin-right: 0.5em;
	}

	&.inline.ml {
		margin-left: 0.5em;
	}

	&.spin {
		animation: spin 2s infinite linear;
	}

	&.spin-pulse {
		animation: spin 1s infinite steps(8);
	}

	&.pulsate {
		animation: pulsate 1s infinite;
	}
}
@keyframes spin {
	from { transform:rotate(0deg); }
	to { transform:rotate(360deg); }
}
@keyframes pulsate {
	0% { opacity:0; transform:scale(0.1, 0.1); }
	50% { opacity:1; }
	100% { opacity:0; transform:scale(1.2, 1.2); }
}
/* LOAD BAR */
.loadBar { display:block; position:relative; height:3px; margin-bottom:2px; background-color:#DDD; }
.loadBarStat { display:block; position:absolute; height:3px; width:1%; background-color:var(--color-accent); }
/* LoadMore */
.btn_loadMore {
	border: #BBB 1px dashed;
	padding: 10px;
	clear: both;
	cursor: pointer;
	text-align: center;
	margin-top: 10px;

	&:hover {
		background-color: #EEE;
	}
}

/* Estilos */
/* -END:GENERICOS- */

/* - INI:BOTONES - */
.btn { cursor:pointer; display:inline-block; text-align:center; vertical-align:middle; white-space:nowrap; border:1px solid transparent; background-image:none; border-radius:4px; padding:6px 12px; }

.snb_facebook { background-color:#3B5998; color:#FFF !important; }
.snb_facebook:hover { background-color:#5177b7; color:#FFF !important; }
.snb_twitter { background-color:#00ACEE; color:#FFF !important; }
.snb_twitter:hover { background-color:#00bdff; color:#FFF !important; }
.snb_google { background-color:#CC3732; color:#FFF !important; }
.snb_google:hover { background-color:#E74B37; color:#FFF !important; }
.snb_whatsapp { background-color:#4CEC66; color:#FFF !important; }
.snb_whatsapp:hover { background-color:#53ff6d; color:#FFF !important; }
.snb_linkedin { background-color:#4875B4; color:#FFF !important; }
.snb_linkedin:hover { background-color:#5a90de; color:#FFF !important; }
.snb_reddit { background-color:#CEE3F8; color:#000 !important; }
.snb_reddit:hover { background-color:#CEE3F8; color:#FFF !important; }
.snb_pinterest { background-color:#BD0A1D; color:#FFF !important; }
.snb_pinterest:hover { background-color:#f20b24; color:#FFF !important; }
.snb_envelope { background-color:#666; color:#FFF !important; }
.snb_envelope:hover { background-color:#888; color:#FFF !important; }
/* -END:BOTONES- */


/* - END:VENTANAS - */


.se_separated_elements_row { display:flex; flex-direction:column; gap:10px; }

/* Navigation */
.se_nav {
	overflow: auto;

	& li {
		list-style: none;
		display: block;
		float: left;
	}

	& li a {
		display: block;
	}

	& .subMenu {
		position: absolute;
		visibility: hidden;
	}

	& .subMenu.right {
		right: 0;
	}

	& li:hover > .subMenu {
		visibility: visible;
	}

	&.vertical li {
		float: none;
	}
}

/* */
.videoWrapper {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;

	& iframe, & object, & video, & embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
		padding: 0;
		margin: 0;
	}
}

/* - INI:MENUS SUPERIORES - */
.se_menu_top {
	display: flex;
	gap: 20px;
	margin-bottom: 10px;
	justify-content: space-between;

	& a {
		display: inline-block;
	}

	& a:hover {
		text-decoration: underline;
	}

	& a:not([href]) {
		text-decoration: none;
	}

	& .breadcrumbs {
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	& .breadcrumbs a:not(:first-child):before {
		margin-right: 10px;
		content: '›';
		color: #000;
	}

	& .breadcrumbs a:hover:before {
		text-decoration: none;
	}

	& .normal {
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
		justify-content: flex-end;
	}
}

/* -- END:MENUS SUPERIORES */

/* - INI:Redes sociales - */
.media { display:flex; align-items:flex-start; }
.media .icon { margin-right:20px; }
.media .content { flex:1; }
/* -- END:Redes sociales */

/* Banners */
.se_banner {
	max-width: 100%;

	& img, & video {
		display: block;
		max-width: 100%;
		margin: 0 auto;
	}
}

/* Barra herramientas edición página */
.codeEditor { display:block; width:100%; box-sizing:border-box; white-space:pre-wrap; font-family:Consolas, monospace; min-height:300px; padding:10px; }

.textAreaCounter { text-align:right; }
/* fakeCheck*/
.fakeCheck {
	display: inline-block;
	height: 1.5em;
	width: 1.5em;
	position: relative;
	background: #FFF;
	color: #000;
	border: 1px solid #333;
	border-radius: 2px;

	&::after {
		content: "na";
		display: flex;
		align-items: center;
		justify-content: center;
		align-content: center;
		font-weight: bold;
		height: 100%;
		width: 100%;
	}

	&.s0::after, &[data-value="0"]::after {
		content: "✗";
	}

	&.s1:after, &[data-value="1"]::after {
		content: "✓";
	}
}
/* */
.container_simple { white-space:pre-wrap; }
/* Editable Object */

.se_editableObject {
	position: fixed;
	display: flex;
	top: 100px;
	left: -300px;
	z-index: 10000;

	&.show {
		left: 0;
	}

	& .tab {
		padding: 5px;
		background-color: #009;
		color: #FFF;
	}

	& .tab button {
		color: #FFF;
	}

	& .menu {
		border: 3px solid #009;
		padding: 10px;
		color: #222;
		background-color: #FFF;
		width: 300px;
		min-height: 100px;
	}

	& .menuBtn {
		display: block;
		width: 100%;
		text-align: left;
		border-radius: 3px;
		margin-bottom: 5px;
		padding: 5px 10px;
		font-weight: bold;
		background-color: #00C;
		color: #FFF;
	}
}

/* Notification */
.notification, .se_output {
	--_color-txt-current:var(--template-notification-color-txt-default, #444);
	--_color-bkg-current:var(--template-notification-color-bkg-default, #DFDFDF);
	--_color-icon-txt-current:var(--template-notification-color-icon-txt-default, #fff);
	--_color-icon-bkg-current:var(--template-notification-color-icon-bkg-default, #444);
	--_color-border-current:var(--template-notification-color-border-default, #666);

	/*  */
	display:flex;
	overflow:auto;
	padding:10px;
	gap:10px;
	border-radius:3px;

	/* */
	background-color: var(--_color-bkg-current);
	color:var(--_color-txt-current);
	border:2px solid var(--_color-border-current);
	
	/* */
	&.light {
		--_color-txt-current:var(--template-notification-color-txt-light, #444);
		--_color-bkg-current:var(--template-notification-color-bkg-light, #F0F0F0);
		--_color-icon-txt-current:var(--template-notification-color-icon-txt-light, #fff);
		--_color-icon-bkg-current:var(--template-notification-color-icon-bkg-light, #666);
		--_color-border-current:var(--template-notification-color-border-light, #666);
	}
	&.success {
		--_color-txt-current:var(--template-notification-color-txt-success, #444);
		--_color-bkg-current:var(--template-notification-color-bkg-success, #adffab);
		--_color-icon-txt-current:var(--template-notification-color-icon-txt-success, #FFF);
		--_color-icon-bkg-current:var(--template-notification-color-icon-bkg-light, #019f0e);
		--_color-border-current:var(--template-notification-color-border-success, #0f0);
	}
	&.info {
		--_color-txt-current:var(--template-notification-color-txt-info, #444);
		--_color-bkg-current:var(--template-notification-color-bkg-info, #b7cfff);
		--_color-icon-txt-current:var(--template-notification-color-icon-txt-info, #e1e7ff);
		--_color-icon-bkg-current:var(--template-notification-color-icon-bkg-light, #2335c1);
		--_color-border-current:var(--template-notification-color-border-info, #335dff);
	}
	&.warning {
		--_color-txt-current:var(--template-notification-color-txt-warning, #444);
		--_color-bkg-current:var(--template-notification-color-bkg-warning, #f4f79f);
		--_color-icon-txt-current:var(--template-notification-color-icon-txt-warning, #feffee);
		--_color-icon-bkg-current:var(--template-notification-color-icon-bkg-light, #ffbe00);
		--_color-border-current:var(--template-notification-color-border-warning, #d6dd18);
	}
	&.alert, &.error {
		--_color-txt-current:var(--template-notification-color-txt-alert, #222);
		--_color-bkg-current:var(--template-notification-color-bkg-alert, #fbb);
		--_color-icon-txt-current:var(--template-notification-color-icon-txt-alert, #fee);
		--_color-icon-bkg-current:var(--template-notification-color-icon-bkg-light, #c40003);
		--_color-border-current:var(--template-notification-color-border-alert, #f00);
	}
	&:empty {
		display:none;
	}

	& > .icon {
		display:inline-flex; align-items:center; justify-content:center;
		border-radius:50%; height:40px; width:40px; padding:5px;
		background-color:var(--_color-icon-bkg-current);
		color:var(--_color-icon-txt-current);
	}
	& > .icon > svg { width:24px; height:24px; fill:var(--_color-icon-txt-current); }
	& > .text { flex:1; display:flex; flex-direction: column; gap:1em; }
	& > .text > .title { font-weight:bold; }
	& > .text > .content:not(.html) { white-space:pre-wrap; }
	& > .text > .actions { display:flex; }
	& > .text > .actions button { padding:5px 10px; border-radius:2px; }
}


.error { /*display:block; border:1px solid #900; padding:20px; margin:10px 0; */ }

.se_note, .note {
	display:block; border:1px solid #111;

	& > .title { display:block; padding:10px; border-bottom:1px solid #111; background-color:#000; color:#FFF; }
	& > .content { display:block; padding:10px; }
}