/* RUTA: /wp-content/themes/kadence-child/tutor/tutor-custom.css
   Estilos de lección y página de curso. Scopeado bajo .tutor-lesson-fullscreen
   y .tc-wrap para no romper el CSS global de Kadence. */

/* ============================================================
   VARIABLES — cambia aquí colores y fuentes de todo el conjunto
   ============================================================ */
:root{
	--tl-primary:#1E3A5F;     /* Azul océano — header, hero, lección activa, progreso */
	--tl-primary-dark:#152B47;
	--tl-cta:#8B1A2A;         /* Burdeos — botones de acción / CTA */
	--tl-cta-dark:#6E1421;
	--tl-gold:#C9963A;        /* Dorado — iconos, estrellas, detalles */
	--tl-done:#1E3A5F;        /* Lección completada (azul para distinguir del dorado pendiente) */
	--tl-bg:#FDFAF4;          /* Hueso brillante — fondo de tarjetas */
	--tl-bg-soft:#F5F0E4;     /* Lino suave — fondo de página/secciones */
	--tl-text:#1A1A1A;        /* Negro texto */
	--tl-text-soft:#5C5C5C;
	--tl-border:#E6DCC8;      /* Borde cálido acorde a la paleta crema */
	--tl-radius:12px;
	--tl-header-h:64px;
	--tl-sidebar-w:340px;

	/* Fuentes: EB Garamond para títulos, Lato para cuerpo */
	--tl-font-head:"EB Garamond",Georgia,"Times New Roman",serif;
	--tl-font-body:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ============================================================
   LECCIÓN — página a pantalla completa
   ============================================================ */
.tutor-lesson-fullscreen{margin:0;background:var(--tl-bg-soft);color:var(--tl-text);font-family:var(--tl-font-body);}
.tutor-lesson-fullscreen *{box-sizing:border-box;}
.tutor-lesson-fullscreen h1,.tutor-lesson-fullscreen h2,.tl-lesson-title{font-family:var(--tl-font-head);}

/* Cabecera (azul océano, texto blanco) */
.tl-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
	gap:16px;height:var(--tl-header-h);padding:0 20px;background:var(--tl-primary);color:#fff;}
.tl-header-left,.tl-header-right{display:flex;align-items:center;gap:12px;}
.tl-logo img{max-height:36px;width:auto;}
.tl-logo{font-family:var(--tl-font-head);font-weight:600;color:#fff;text-decoration:none;font-size:18px;}
.tl-header-center{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;align-items:center;}
.tl-course-title{font-weight:700;font-size:15px;color:#fff;text-decoration:none;
	max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tl-menu-btn{display:none;font-size:22px;background:none;border:0;cursor:pointer;color:#fff;}
.tl-exit{font-size:14px;font-weight:700;color:#fff;text-decoration:none;padding:8px 12px;border-radius:8px;
	background:rgba(255,255,255,.12);}
.tl-exit:hover{background:rgba(255,255,255,.22);}

/* Barra de progreso (pista translúcida, relleno dorado sobre el azul) */
.tl-progress{position:relative;display:flex;align-items:center;gap:8px;width:min(420px,60vw);}
.tl-progress::before{content:"";position:absolute;left:0;right:40px;height:6px;border-radius:6px;background:rgba(255,255,255,.25);}
.tl-progress-bar{position:relative;height:6px;width:0;border-radius:6px;background:var(--tl-gold);transition:width .8s ease;flex:0 0 auto;}
.tl-progress-label{margin-left:auto;font-size:12px;font-weight:700;color:#fff;}

/* Layout 70/30 */
.tl-layout{display:flex;align-items:flex-start;}
.tl-main{flex:1;min-width:0;padding:24px;}
.tl-sidebar{flex:0 0 var(--tl-sidebar-w);width:var(--tl-sidebar-w);height:calc(100vh - var(--tl-header-h));
	position:sticky;top:var(--tl-header-h);overflow-y:auto;background:var(--tl-bg);border-left:1px solid var(--tl-border);}

/* Vídeo responsive 16:9 */
.tl-video{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--tl-radius);overflow:hidden;margin-bottom:20px;}
.tl-video iframe,.tl-video video{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* Contenido */
.tl-content{background:var(--tl-bg);border:1px solid var(--tl-border);border-radius:var(--tl-radius);padding:28px;}
.tl-lesson-title{margin:0 0 16px;font-size:30px;line-height:1.25;color:var(--tl-primary);}
.tl-lesson-body{font-size:16px;line-height:1.75;color:var(--tl-text);}
.tl-lesson-body img{max-width:100%;height:auto;border-radius:8px;}

/* Botón completar (burdeos) */
.tl-actions{margin:20px 0;}
.tl-btn{display:inline-block;border:0;cursor:pointer;font-size:15px;font-weight:700;font-family:var(--tl-font-body);
	padding:12px 24px;border-radius:10px;text-decoration:none;}
.tl-btn-complete{background:var(--tl-cta);color:#fff;}
.tl-btn-complete:hover{background:var(--tl-cta-dark);}
.tl-done-badge{display:inline-block;background:rgba(30,58,95,.1);color:var(--tl-done);font-weight:700;padding:12px 20px;border-radius:10px;}

/* Navegación prev/next */
.tl-nav{display:flex;justify-content:space-between;gap:16px;margin-top:8px;}
.tl-nav a{flex:1;display:flex;flex-direction:column;gap:4px;padding:14px 18px;background:var(--tl-bg);
	border:1px solid var(--tl-border);border-radius:10px;text-decoration:none;color:var(--tl-text);transition:.2s;}
.tl-nav a:hover{border-color:var(--tl-primary);}
.tl-nav-next{text-align:right;}
.tl-nav span{font-size:12px;color:var(--tl-text-soft);}
.tl-nav strong{font-size:14px;}

/* Sidebar / temario */
.tl-sidebar-head{display:flex;justify-content:space-between;align-items:baseline;padding:16px 18px;
	border-bottom:1px solid var(--tl-border);position:sticky;top:0;background:var(--tl-bg);}
.tl-sidebar-head strong{font-family:var(--tl-font-head);}
.tl-sidebar-head small{color:var(--tl-text-soft);}
.tl-topic{border-bottom:1px solid var(--tl-border);}
.tl-topic-head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;background:none;
	border:0;cursor:pointer;text-align:left;font-size:14px;font-weight:700;padding:14px 18px;color:var(--tl-text);}
.tl-caret{transition:transform .25s;font-style:normal;color:var(--tl-text-soft);}
.tl-topic.is-open .tl-caret{transform:rotate(180deg);}
.tl-lessons{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;transition:max-height .3s ease;}
.tl-topic.is-open .tl-lessons{max-height:2000px;}
.tl-lesson a{display:flex;align-items:center;gap:10px;padding:11px 18px 11px 22px;text-decoration:none;
	color:var(--tl-text);font-size:13.5px;border-left:3px solid transparent;}
.tl-lesson a:hover{background:var(--tl-bg-soft);}
/* Icono pendiente en dorado; completado en azul relleno */
.tl-mark{flex:0 0 18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:11px;
	border-radius:50%;border:1px solid var(--tl-gold);color:var(--tl-gold);}
.tl-lesson.is-active a{background:rgba(30,58,95,.08);border-left-color:var(--tl-primary);font-weight:700;}
.tl-lesson.is-done .tl-mark{background:var(--tl-done);border-color:var(--tl-done);color:#fff;}

/* Overlay móvil */
.tl-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40;}
.tl-overlay.is-open{display:block;}

/* ============================================================
   PÁGINA DE CURSO
   ============================================================ */
.tc-wrap{max-width:1200px;margin:0 auto;padding:32px 20px;color:var(--tl-text);font-family:var(--tl-font-body);}
.tc-wrap *{box-sizing:border-box;}
.tc-wrap h1,.tc-wrap h2{font-family:var(--tl-font-head);}

/* Hero en azul océano */
.tc-hero{background:var(--tl-primary);color:#fff;padding:36px;border-radius:var(--tl-radius);}
.tc-title{font-size:34px;line-height:1.2;margin:0 0 10px;color:#fff;}
.tc-rating{display:flex;align-items:center;gap:8px;}
.tc-rating strong{color:var(--tl-gold);}
.tc-rating small{color:rgba(255,255,255,.8);}
.tc-stars{position:relative;display:inline-block;font-size:18px;line-height:1;letter-spacing:2px;}
.tc-stars-bg{color:rgba(255,255,255,.3);}
.tc-stars-fg{position:absolute;left:0;top:0;width:var(--rating,0);overflow:hidden;white-space:nowrap;color:var(--tl-gold);}

.tc-grid{display:grid;grid-template-columns:1fr;gap:28px;margin-top:24px;}
.tc-thumb img{width:100%;height:auto;border-radius:var(--tl-radius);}
.tc-section{margin-top:28px;background:var(--tl-bg);border:1px solid var(--tl-border);
	border-radius:var(--tl-radius);padding:24px;}
.tc-section h2{font-size:22px;margin:0 0 14px;color:var(--tl-primary);}
.tc-desc{line-height:1.75;}
.tc-side{align-self:start;}

/* ============================================================
   RESPONSIVE — mobile-first, desktop desde 1024px
   ============================================================ */
@media (min-width:1024px){
	.tc-grid{grid-template-columns:1fr 340px;}
	.tc-side{position:sticky;top:24px;}
}
@media (max-width:1023px){
	.tl-menu-btn{display:block;}
	.tl-header-center{display:none;}
	.tl-sidebar{position:fixed;top:var(--tl-header-h);right:0;height:calc(100vh - var(--tl-header-h));
		transform:translateX(100%);transition:transform .3s ease;z-index:45;width:min(86vw,var(--tl-sidebar-w));}
	.tl-sidebar.is-open{transform:translateX(0);}
	.tl-main{padding:16px;}
	.tl-nav{flex-direction:column;}
	.tc-hero{padding:24px;}
	.tc-title{font-size:26px;}
}