/* ==========================================================================
   tema-contenido_modulo_desktop.css — Optimizado para Desktop (Min 1440x720)
   Panel de Control de Módulo: Presentación Fija (Izq) y Catálogo de Estudio (Der).
   ========================================================================= */

@media (min-width: 1440px) and (min-height: 720px) {

  /* ── 1. AJUSTES GENERALES DE NAVEGACIÓN Y ESPACIO ── */
  .nav-bar {
    padding: 16px 60px; /* Más aire horizontal en monitores de PC */
  }

  /* Expandimos el lienzo principal y lo convertimos en una rejilla asimétrica */
  .wrap-letras {
    max-width: 1340px;
    margin: 40px auto 0;
    padding: 0 40px 60px;
    display: grid;
    /* Columna 1 (Información/Acción): 450px | Columna 2 (Letras y Lecciones): Flexible */
    grid-template-columns: 450px 1fr;
    column-gap: 60px;
    row-gap: 20px;
    align-items: start;
  }

  /* ── 2. COLUMNA IZQUIERDA: CONTEXTO, NOTAS Y ACCIÓN PRINCIPAL ──
     Utilizamos un mapeo explícito de celdas por filas para agrupar los elementos
     izquierdos de forma fluida mientras el lado derecho se expande hacia abajo. */
  
  .intro-header {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    align-items: flex-start; /* Alineación limpia a la izquierda */
    gap: 16px;
  }

  .intro-header h1 {
    font-size: 3.2rem; /* Título imponente */
    text-align: left;
  }

  .subtitle {
    text-align: left;
    max-width: 100%;
    font-size: 1.25rem;
  }

  /* La caja de información se acopla en la columna izquierda compartiendo altura con las letras */
  .info-box {
    grid-column: 1;
    grid-row: 2 / span 3; /* Se estira elegantemente al lado de las cuadrículas de letras */
    margin-top: 12px;
    padding: 26px 30px;
    font-size: 1.15rem;
    box-shadow: 0 8px 24px rgba(42,36,32,0.06);
  }

  /* Botón para iniciar el módulo completo */
  .btn-empezar {
    grid-column: 1;
    grid-row: 5 / span 2; /* Se posiciona al lado de la lista de lecciones */
    margin-top: 16px;
    padding: 20px;
    font-size: 1.15rem;
    box-shadow: 0 6px 20px rgba(168, 54, 42, 0.25);
  }
  .btn-empezar:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(168, 54, 42, 0.35);
  }


  /* ── 3. COLUMNA DERECHA: REPOSITORIO DE CARACTERES Y MAPA DE LECCIONES ── */

  /* Etiquetas divisoras de sección */
  .seccion-label {
    grid-column: 2;
    text-align: left; /* Lectura natural de paneles técnicos */
    font-size: 0.95rem;
    margin-top: 0;
    padding-bottom: 10px;
  }
  
  #label-consonantes { grid-row: 1; }
  #label-vocales     { grid-row: 3; margin-top: 16px; }
  #label-lecciones   { grid-row: 5; margin-top: 24px; }

  /* Cuadrícula de Consonantes */
  #grid-consonantes {
    grid-column: 2;
    grid-row: 2;
    gap: 14px; /* Más separación entre tarjetas */
  }

  /* Cuadrícula de Vocales */
  #grid-vocales {
    grid-column: 2;
    grid-row: 4;
    gap: 14px;
  }

  /* Lista de Lecciones del Módulo */
  .lecciones-lista {
    grid-column: 2;
    grid-row: 6;
    padding: 16px;
    gap: 12px;
    background: rgba(255, 255, 255, 0.5);
  }


  /* ── 4. OPTIMIZACIÓN DE TARJETAS LINGÜÍSTICAS Y CONTENIDO ── */

  /* Fichas de Consonantes y Vocales */
  .letra-card, 
  .vocal-card {
    padding: 22px 10px;
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(42,36,32,0.04);
  }
  .letra-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(42,36,32,0.08);
  }

  /* Escalado tipográfico masivo del Gujarati para pantallas amplias */
  .letra-card .gu {
    font-size: 3rem;
  }
  .vocal-card .gu {
    font-size: 2.6rem;
  }
  .vocal-card .abrev {
    font-size: 1.6rem;
    margin-top: 2px;
  }
  .letra-card .rom, 
  .vocal-card .rom {
    font-size: 1.05rem;
    margin-top: 4px;
  }

  /* Filas de Lecciones */
  .leccion {
    padding: 18px 24px;
    border-radius: 14px;
  }
  .leccion:hover {
    transform: translateX(4px); /* Desplazamiento interactivo cómodo con mouse */
  }
  
  .lec-num {
    font-size: 1.5rem;
    min-width: 36px;
  }
  .lec-title {
    font-size: 1.25rem;
  }
  .lec-sub {
    font-size: 1.05rem;
    margin-top: 4px;
  }
  /* Caracteres de ejemplo de la lección */
  .lec-gu {
    font-size: 1.6rem;
    margin-top: 6px;
    letter-spacing: 0.04em;
  }
}