/* Escuela Código Vivo · Panel Dividido: Audiolibro + Libreta Digital */

.ecv-split-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  min-height: 100vh;
}

@media (min-width: 900px) {
  .ecv-split-container {
    grid-template-columns: 38% 62%;
  }
  .ecv-panel-audio {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid #ead7bd;
  }
}

.ecv-panel-audio {
  background: linear-gradient(180deg, #1A1A2E 0%, #2a2a45 100%);
  color: #f7eadb;
  padding: 20px;
}

.ecv-panel-audio h2 {
  color: #D4A843;
  font-size: 1.2rem;
  margin-bottom: 12px;
}

.ecv-panel-audio audio {
  width: 100%;
  margin: 12px 0;
}

.ecv-panel-libreta {
  background: #FAF6EE;
  padding: 20px 24px;
  overflow-y: auto;
}

.ecv-lib-header {
  position: sticky;
  top: 0;
  background: #FAF6EE;
  padding-bottom: 12px;
  border-bottom: 2px solid #B8860B;
  margin-bottom: 16px;
  z-index: 5;
}

.ecv-lib-header h3 {
  color: #B8860B;
  margin: 0 0 4px 0;
  font-size: 1.3rem;
}

.ecv-lib-subtitulo {
  color: #444;
  font-style: italic;
  margin: 0;
  font-size: 0.95rem;
}

.ecv-lib-guardado {
  position: absolute;
  top: 4px;
  right: 0;
  color: #1B4332;
  font-weight: bold;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 0.4s;
}

.ecv-lib-leccion {
  margin-bottom: 28px;
  background: #fff;
  border: 1px solid #D9CDB8;
  border-radius: 12px;
  padding: 18px;
}

.ecv-lib-leccion h4 {
  color: #1A1A2E;
  background: #D4A843;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.95rem;
  margin: 0 0 14px 0;
}

.ecv-lib-campo {
  margin-bottom: 16px;
}

.ecv-lib-campo label {
  display: block;
  font-size: 0.92rem;
  color: #333;
  margin-bottom: 6px;
  font-style: italic;
}

.ecv-lib-campo textarea {
  width: 100%;
  border: 1px solid #D9CDB8;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: Georgia, serif;
  font-size: 0.98rem;
  resize: vertical;
  background: #FFFDF9;
  transition: border-color 0.2s;
}

.ecv-lib-campo textarea:focus {
  outline: none;
  border-color: #B8860B;
  box-shadow: 0 0 0 3px rgba(184,134,11,0.15);
}

.ecv-lib-empty {
  text-align: center;
  color: #888;
  font-style: italic;
  padding: 40px 20px;
}

.ecv-lib-bloqueado {
  text-align: center;
  padding: 50px 24px;
  background: #fff;
  border: 1px dashed #B8860B;
  border-radius: 16px;
}

.ecv-lib-bloqueado h3 {
  color: #B8860B;
}

.ecv-lib-bloqueado a {
  display: inline-block;
  margin-top: 16px;
  background: #B8860B;
  color: #fff;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: bold;
}

/* Botones de tabs móvil: alternar entre Audio y Libreta en pantallas chicas */
.ecv-mobile-tabs {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 10;
  background: #1A1A2E;
}

.ecv-mobile-tabs button {
  flex: 1;
  padding: 14px;
  background: transparent;
  color: #fff;
  border: none;
  font-weight: bold;
  font-size: 0.95rem;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}

.ecv-mobile-tabs button.active {
  border-bottom-color: #D4A843;
  color: #D4A843;
}

@media (min-width: 900px) {
  .ecv-mobile-tabs { display: none; }
}

@media (max-width: 899px) {
  .ecv-panel-audio, .ecv-panel-libreta {
    display: none;
  }
  .ecv-panel-audio.ecv-tab-active, .ecv-panel-libreta.ecv-tab-active {
    display: block;
  }
}

/* Sección Mi Paquete de Nivel */
.ecv-paquete-nivel {
  background: linear-gradient(135deg, #FAF6EE, #F5F0E8);
  border: 2px solid #B8860B;
  border-radius: 16px;
  padding: 24px;
  margin: 24px 0;
  text-align: center;
}

.ecv-paquete-nivel h3 {
  color: #B8860B;
  margin-top: 0;
}

.ecv-paquete-botones {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

.ecv-paquete-btn {
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.95rem;
}

.ecv-paquete-btn.descargar {
  background: #1B4332;
  color: #fff;
}

.ecv-paquete-btn.lulu {
  background: #8B5426;
  color: #fff;
}

.ecv-paquete-bloqueado {
  opacity: 0.5;
  pointer-events: none;
  background: #999 !important;
}

/* ============================================================
   LECTURA · "Ver también el texto completo del módulo"
   Arregla el texto invisible (letra clara sobre fondo claro) y
   añade temas tipo Kindle (Claro / Sepia / Noche) + tamaño de letra.
   La caja de lectura es el .paper que vive dentro del panel de audio.
   Se aplica a los 24 módulos porque este CSS es compartido.
   ============================================================ */

/* Caja de lectura: tema por defecto = sepia. Variables propias para
   que NUNCA herede el color claro del panel oscuro de audio. */
.ecv-panel-audio .paper{
  --lec-bg:#fbf0dc;
  --lec-ink:#2e1d15;
  --lec-line:#e7d3b3;
  --lec-scale:1;
  background: var(--lec-bg) !important;
  color: var(--lec-ink) !important;
  border: 1px solid var(--lec-line) !important;
  border-radius: 16px !important;
  padding: 22px 20px !important;
  box-shadow: none !important;
  transition: background .18s ease, color .18s ease;
}

/* TODO el texto del cuerpo usa la misma tinta legible (un solo color) */
.ecv-panel-audio .paper,
.ecv-panel-audio .paper p,
.ecv-panel-audio .paper li,
.ecv-panel-audio .paper .bullet,
.ecv-panel-audio .paper span,
.ecv-panel-audio .paper strong,
.ecv-panel-audio .paper em,
.ecv-panel-audio .paper h1,
.ecv-panel-audio .paper h2,
.ecv-panel-audio .paper h3,
.ecv-panel-audio .paper h4{
  color: var(--lec-ink) !important;
}

/* Escala de letra (A- / A+) aplicada a todo el texto de lectura */
.ecv-panel-audio .paper p,
.ecv-panel-audio .paper li,
.ecv-panel-audio .paper .bullet{
  font-size: calc(1.05rem * var(--lec-scale)) !important;
  line-height: 1.85 !important;
}
.ecv-panel-audio .paper h2{ font-size: calc(1.5rem * var(--lec-scale)) !important; }
.ecv-panel-audio .paper h3{ font-size: calc(1.2rem * var(--lec-scale)) !important; margin-top: 1.3em; }

/* --- TEMAS tipo Kindle --- */
.ecv-panel-audio .paper[data-lec-tema="claro"]{
  --lec-bg:#ffffff; --lec-ink:#1d1d1d; --lec-line:#e6e6e6;
}
.ecv-panel-audio .paper[data-lec-tema="sepia"]{
  --lec-bg:#fbf0dc; --lec-ink:#2e1d15; --lec-line:#e7d3b3;
}
.ecv-panel-audio .paper[data-lec-tema="noche"]{
  --lec-bg:#17120f; --lec-ink:#f3e7d6; --lec-line:#3a2c22;
}

/* --- Barra de lectura (la inyecta el JS encima del texto) --- */
.ecv-lectura-barra{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:14px 0 12px; padding:9px 11px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
}
.ecv-lectura-barra .grp{ display:flex; align-items:center; gap:6px; }
.ecv-lectura-barra .etq{ font-size:.8rem; color:#d2bfa8; }
.ecv-lectura-barra .pct{ font-size:.82rem; color:#f7eadb; min-width:46px; text-align:center; font-weight:600; }
.ecv-lectura-barra button{
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.10); color:#f7eadb;
  border-radius:999px; padding:8px 13px; font-size:.9rem;
  cursor:pointer; font-weight:600; line-height:1; min-height:40px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Arial,sans-serif;
}
.ecv-lectura-barra button:hover{ background:rgba(255,255,255,.18); }
.ecv-lectura-barra button.activo{
  background:#D4A843; color:#241b16; border-color:#D4A843;
}


/* === Reproductor fijo: escuchar mientras se escribe (V68) === */
.ecv-miniplayer{
  position: sticky;
  top: 48px;
  z-index: 9;
  background:#1A1A2E;
  padding:10px 14px 12px;
  border-bottom:1px solid #3a3a55;
  box-shadow:0 6px 16px rgba(0,0,0,.28);
}
.ecv-miniplayer .ecv-mini-label{
  color:#D4A843;font-size:.82rem;font-weight:bold;margin:0 0 8px;text-align:center;
}
.ecv-miniplayer audio{ width:100%; display:block; }
.ecv-miniplayer #ecv-audio-status{ color:#d2bfa8;font-size:.78rem;margin-top:6px;text-align:center;min-height:1em; }
@media (min-width:900px){ .ecv-miniplayer{ top:0; } }


/* Enlace para imprimir toda la libreta (V68) */
.ecv-lib-print-link{
  display:inline-block;margin-top:12px;
  background:linear-gradient(135deg,#c99650,#a9772f);color:#fff;text-decoration:none;
  font-weight:bold;font-size:.9rem;padding:10px 16px;border-radius:999px;
  box-shadow:0 4px 12px rgba(169,119,47,.3);
}