/* eXeLearning Style Designer Compatible Style */
html{font-size:105%}
body{font:100%/1.5 'Open Sans',Arial,Verdana,Helvetica,sans-serif;padding:15px;margin:0;text-align:left}
h2{font-size:1.3em}
h3{font-size:1.2em}
h4{font-size:1.1em}
h5{font-size:1em}
p{margin:1em 0}
.score.js-feedback{margin-bottom:1em}
#header,#emptyHeader,#nodeDecoration{padding:0 20px;height:auto!important;height:120px;min-height:120px;font-size:1.6em;font-weight:300;border-style:1px;border-width:1px}
#headerContent{padding-top:70px}
#header h1,#nodeDecoration h1{margin:-.5em 0 1em 0;font-size:1em;text-align:left}
#nodeDecoration{margin-bottom:15px}
 /* Single page */.nodeDecoration h1{font-size:1.5em}
/* iDevices */.iDevice{margin:20px 0 30px 0}
.iDevice_header{letter-spacing:.5px;padding:.5em 40px .5em 0;height:auto!important;height:1.7em;min-height:1.7em;position:relative}
.iDevice_header[style]{background-image:none!important}
.iDeviceTitle{font-size:1.3em;vertical-align:bottom;top:auto;display:inline-block;font-weight:300;padding:0 10px 0 35px;background-repeat:no-repeat;background-position:0 50%;margin:0}
.iDevice_header_noIcon .iDeviceTitle{background-image:none;padding-left:20px}
.iDeviceTitle{*display:inline;*line-height:2em}
/* IE6, IE7 */.iDevice_inner{padding:10px 20px;border-width:1px;border-style:solid;border-radius:5px}
/* Clearfix */.iDevice_content{overflow:auto}
.FileAttachIdeviceInc .iDevice_content{margin-bottom:-.5em}
/* Hide/Show iDevice */.toggle-idevice{display:block;margin:0;text-align:right}
.iDevice_header .toggle-idevice{position:absolute;top:14px;right:0}
.toggle-idevice a{display:inline-block;width:16px;height:16px;background:url(_style_icons.png) no-repeat -50px -50px;outline:none}
.toggle-idevice .show-idevice{background-position:0 -50px}
.toggle-idevice span{position:absolute;overflow:hidden;clip:rect(0,0,0,0);height:0}
.toggle-idevice a:hover,.toggle-idevice a:focus{filter:alpha(opacity=100);opacity:1}
/* iDevice title with background-color */input.feedbackbutton{margin:0}
.iDevice_header{border-width:1px;border-style:solid;padding-left:13px;border-top-left-radius:5px;border-top-right-radius:5px}
.hidden-idevice .iDevice_header{border-radius:5px}
.iDevice_header .toggle-idevice{margin-right:15px}
.iDevice_inner{border-top-right-radius:0;border-top-left-radius:0;border-top:0}
.ExternalUrlIdevice iframe{border:0}
/* Reset base.css */.block,.feedback{padding:0}
.feedback{font-family:inherit;font-size:1em}
li{list-style-position:outside}
.styled-qc{margin-top:2.5em}
.exe-dl .icon,.exe-dl-toggler a{width:24px;height:24px;border-radius:12px}
.exe-dl-toggler a{line-height:22px}
.js .exe-dl dd{margin-left:44px}
.exe-enlarge-icon b{font-size:1.2em}
/* Forms */input,select{font-size:1em;font-family:inherit}
.iDevice_hint_title a{padding-left:25px}
.iDevice_buttons input{font-size:1em;margin-right:.5em;padding:.15em .45em}
.MultichoiceIdevice .feedback p:first-child{margin-top:0}
.MultichoiceIdevice .activity-form,.MultiSelectIdevice .activity-form{margin-bottom:1em}
.TrueFalseIdevice .activity-form{margin-top:1.5em}
.TrueFalseIdevice .activity-form:first-child{margin-top:0}
.TrueFalseIdevice label{margin:0 1em}
.MultichoiceIdevice input[type=radio],.MultiSelectIdevice input[type=checkbox],.QuizTestIdevice input[type=radio]{width:16px;height:16px;margin:5px 0 0 12px}
.custom-inputs .iDevice_answer-field{width:40px}
.custom-inputs  .iDevice_answer-content,.custom-inputs  .iDevice_answer-feedback{padding-left:55px}
.custom-inputs  .iDevice_answer-content{padding-top:4px}
.styledRadio,.styledCheckbox{margin-left:12px}
.MultichoiceIdevice .feedback{margin-top:1em}
.right-option,.wrong-option{font-style:italic}
.readingIdevice .iDevice_content:first-child p:last-child,.CasestudyIdevice .iDevice_content:first-child p:last-child{margin-bottom:0}
.readingIdevice .feedbackbutton,.CasestudyIdevice .feedbackbutton,.ReflectionIdevice .feedbackbutton{margin:.5em 0 1em 0}
.TrueFalseIdevice .exe-radio-option.styledRadio{display:inline-block;vertical-align:middle;margin:-2px 5px 0 0}
/* Licenses */#packageLicense{margin:2.5em 0 1.5em 0;text-align:left;line-height:1.2em;font-size:.9em}
#packageLicense.cc{padding-left:95px;background:url(_style_licenses.png) no-repeat 0 0}
#packageLicense.cc-by-sa{background-position:0 -100px}
#packageLicense.cc-by-nd{background-position:0 -200px}
#packageLicense.cc-by-nc{background-position:0 -300px}
#packageLicense.cc-by-nc-sa{background-position:0 -400px}
#packageLicense.cc-by-nc-nd{background-position:0 -500px}
#packageLicense.cc-0{background-position:0 -600px}
#siteFooter{padding:20px}
/* Download package iDevice */.download-packageIdevice .exe-download-package-link a{background:#333}
/* Lightbox */.lightboxOverlay{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=95);opacity:0.95}
#lightbox .lb-caption{font-size:1em}
/* Effects - iDevices with emphasis */.emphasis1 .exe-fx .fx-C2,.emphasis1 .exe-fx .fx-C2 a,.emphasis1 .fx-pagination a{background:#ededed;}
@media print {    div.node{page-break-after:auto}
 /* base.css */    .iDevice{margin-bottom:20px}
	html body{background:#fff;color:#000;font-size:11pt}
	@page{margin:1.5cm}
	/* Uncomment this to print URL after links:	a{font-weight:bolder;text-decoration:none!important}
	a[href^=http]:after{content:" <" attr(href) "> "}
	*/	#main .iDeviceTitle{background:none;padding-left:0}
	body #header,body #emptyHeader,body #nodeDecoration{height:auto!important;min-height:0;border:none;padding:0}
	body #headerContent{padding-top:40px}
	#packageLicense.cc{padding-left:0;text-align:center}
	.toggle-idevice{display:none}
}
/* eXeLearning Style Designer */.iDeviceTitle{background-image:url(icon_star.png);}
.activityIdevice .iDeviceTitle{background-image:url(icon_assignment.png);}
.readingIdevice .iDeviceTitle{background-image:url(icon_unread.png);}
.FileAttachIdeviceInc .iDeviceTitle{background-image:url(icon_download.png);}
.WikipediaIdevice .iDeviceTitle{background-image:url(icon_description.png);}
.ListaIdevice .iDeviceTitle,.QuizTestIdevice .iDeviceTitle,.MultichoiceIdevice .iDeviceTitle,.TrueFalseIdevice .iDeviceTitle,.MultiSelectIdevice .iDeviceTitle,.ClozeIdevice .iDeviceTitle{background-image:url(icon_question.png);}
.preknowledgeIdevice .iDeviceTitle{background-image:url(icon_announcement.png);}
.GalleryIdevice .iDeviceTitle{background-image:url(icon_media.png);}
.objectivesIdevice .iDeviceTitle{background-image:url(icon_info.png);}
.ReflectionIdevice .iDeviceTitle{background-image:url(icon_account.png);}
#header,#emptyHeader,#nodeDecoration{height:auto!important;/*headerHeight*/height:55px;min-height:55px;}
#headerContent{/*hideProjectTitle*/position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);}
/* eXeLearning Style Designer (custom CSS) */
/* === Paleta Oscura Accesible === */
:root {
    --fondo-oscuro: #121212;
    --fondo-card: #1e1e1e;
    --fondo-elemento: #2d2d2d;
    --borde: #3a3a3a;
    --texto-primario: #f0f0f0;
    --texto-secundario: #b0b0b0;
    --azul-accesible: #6ec6ff;
    --violeta-accesible: #b78aff;
    --rojo-suave: #e57373;
    --verde-suave: #81c784;
}

/* === Tipografía Accesible === */
body {
    font-family: 'Open Sans', sans-serif;
    background: var(--fondo-oscuro);
    color: var(--texto-primario);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
    margin: 1rem 0;
    color: var(--azul-accesible);
}

p {
    margin-bottom: 1rem;
}

/* === Botones de Navegación === */
.boton {
    padding: 0.8rem 1.2rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
    color: var(--fondo-oscuro);
    margin: 0.5rem 0.5rem 0.5rem 0;
    display: inline-block;
    text-align: center;
}

.boton-continuar {
    background-color: var(--azul-accesible);
}

.boton-atras {
    background-color: var(--violeta-accesible);
}

.boton-salir {
    background-color: var(--rojo-suave);
    color: #fff;
}

.boton-abrir {
    background-color: var(--verde-suave);
}

.boton:hover {
    filter: brightness(1.1);
}

/* === Modales === */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--fondo-card);
    color: var(--texto-primario);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
    z-index: 1000;
    max-width: 90%;
    width: 500px;
}

.modal h2 {
    margin-top: 0;
    color: var(--azul-accesible);
}

.modal .boton {
    margin-top: 1rem;
}

/* === Contenedores y secciones === */
.seccion-parrafo {
    max-width: 100%;
    padding: 2rem 1rem;
    background: var(--fondo-elemento);
    border-radius: 8px;
    margin-bottom: 2rem;
}

/* === Videos (si los usás) === */
.video-contenedor {
    width: 100%;
    max-width: 960px;
    margin: 2rem auto;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.video-contenedor video {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* === Footer personalizado === */
.footer {
    text-align: left;
    padding: 2rem;
    background: var(--fondo-card);
    color: var(--texto-secundario);
    font-size: 0.9rem;
    margin-top: 3rem;
}
/* === Estilos adicionales para eXeLearning === */

/* --- Ejemplos reales --- */
.ejemplo-real {
    background-color: var(--fondo-card);
    border-left: 6px solid var(--azul-accesible);
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    font-style: italic;
}

/* --- Palabras nuevas o definiciones --- */
.palabra-nueva {
    background-color: var(--fondo-elemento);
    border: 1px solid var(--borde);
    padding: 0.8rem 1rem;
    border-radius: 6px;
    margin: 1rem 0;
    font-weight: 600;
    color: var(--texto-primario);
}

/* --- Actividades y preguntas --- */
.actividad {
    background-color: #1f1f1f;
    border-left: 5px solid var(--violeta-accesible);
    padding: 1rem;
    border-radius: 8px;
    margin: 2rem 0;
}

.actividad h3 {
    margin-top: 0;
    color: var(--violeta-accesible);
}

.actividad ul {
    list-style: none;
    padding-left: 0;
}

.actividad li::before {
    content: "➤";
    color: var(--violeta-accesible);
    margin-right: 0.5rem;
}

/* --- Tablas de herramientas y cuadros --- */
.tabla-herramientas {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    background-color: var(--fondo-elemento);
    color: var(--texto-primario);
    border: 1px solid var(--borde);
}

.tabla-herramientas th,
.tabla-herramientas td {
    border: 1px solid var(--borde);
    padding: 0.8rem;
    text-align: left;
}

.tabla-herramientas th {
    background-color: var(--fondo-card);
    color: var(--azul-accesible);
}

/* --- Listas legibles --- */
ul, ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

ul li {
    margin-bottom: 0.4rem;
}

/* --- Textos destacados opcionales --- */
.destacado {
    background-color: #2a2a2a;
    border-left: 4px solid var(--azul-accesible);
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: 6px;
    font-weight: bold;
    color: var(--texto-primario);
}
/* === Actividades en eXeLearning (clases personalizadas) === */
.ex-actividad {
    background-color: #1e1e1e;
    border-left: 6px solid var(--violeta-accesible);
    padding: 1.5rem;
    border-radius: 8px;
    margin: 2rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.ex-actividad h3 {
    margin-top: 0;
    color: var(--violeta-accesible);
}

.ex-pregunta {
    margin-bottom: 1.5rem;
}

.ex-opciones {
    list-style: none;
    padding-left: 0;
}

.ex-opciones li {
    margin-bottom: 0.5rem;
    padding: 0.4rem 0.6rem;
    background-color: var(--fondo-elemento);
    border-radius: 4px;
}

.ex-correcta {
    border-left: 4px solid var(--azul-accesible);
    font-weight: bold;
    color: var(--azul-accesible);
}
/* Estilo general para videos */
.video-container {
    display: block;
    max-width: 80%; /* Ajusta el ancho máximo al 80% del contenedor principal */
    margin: 20px auto; /* Centrado y espaciado alrededor del video */
    padding: 0;
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    background-color: #fff; /* Fondo blanco alrededor del video */
}

/* Estilo específico para los videos dentro del contenedor */
.video-container video {
    width: 100%; /* El video ocupa todo el ancho del contenedor */
    height: auto; /* Mantiene la proporción del video */
    border-radius: 8px; /* Redondea las esquinas del video */
}

/* Si el video es demasiado grande en pantallas pequeñas, ajustamos el tamaño */
@media (max-width: 768px) {
    .video-container {
        max-width: 100%; /* El contenedor ocupa el 100% del ancho en pantallas pequeñas */
    }
}