/* ============================================================
   ACADEMIC CLARITY — Sistema de diseño para páginas del portal
   Basado en Material 3 "Academic Clarity" (light mode)
   Neocities-friendly: CSS puro, sin dependencias externas JS.
   Tipografías: Manrope (títulos), Inter (cuerpo), JetBrains Mono (etiquetas)

   RELACIÓN CON OTROS ARCHIVOS:
   - academic.css: Estilos base del portal (navegación, tarjetas, hero, etc.)
   - unidades.css: Estilos específicos para unidades didácticas
   - codigo.css: Estilos de bloques de código por lenguaje
   - hojas.css: Modo oscuro para documentos incrustados en iframe
   - principal.css: Página principal / portada
   - portada.css: Portada del curso
   - logo.css: Estilos del logo

   ESTRUCTURA DEL ARCHIVO:
   1. Variables CSS (:root)
   2. Reset y estilos base
   3. Contenedor
   4. Skip Link (accesibilidad)
   5. Navegación (NAV GLASS)
   6. Main
   7. Breadcrumb
   8. Glass Panel
   9. Hero Perfil (Portada)
   10. Hero Curso
   11. Botones
   12. Tabs (Segmented Control)
   13. Títulos de Sección
   14. Grid de Tarjetas
   15. Tarjeta de Curso
   16. Chip de Estado
   17. Caja de Búsqueda
   18. Tarjeta de Unidad / Tema
   19. Documento Oficial
   20. Tarjetas de Manual / Recurso
   21. Ejemplo / Nota
   22. Lista de Clases
   23. Estado Vacío
   24. Sección Contenedora
   25. Footer
   26. Responsive
   27. Sílabo — Estilos del documento
   28. Sílabo — Impresión
   29. Sílabo — Responsive
   30. Impresión general
   31. Animaciones
   ============================================================ */


/* ══════════════════════════════════════════════════════════════
   1. VARIABLES CSS (:root)
   Define todos los tokens de diseño del sistema.

   CATEGORÍAS:
   - Colores: Paleta completa de Material 3 "Academic Clarity"
   - Tipografía: 3 familias (display, body, mono)
   - Radio: 5 tamaños de border-radius
   - Espaciado: 5 valores de espaciado
   - Sombras: 2 sombras predefinidas
   ══════════════════════════════════════════════════════════════ */
:root {
    /* ---- Colores (Academic Clarity light) ---- */
    --background: #f9f9ff;
    --on-background: #111c2d;
    --surface: #f9f9ff;
    --surface-bright: #f9f9ff;
    --surface-dim: #cfdaf2;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f0f3ff;
    --surface-container: #e7eeff;
    --surface-container-high: #dee8ff;
    --surface-container-highest: #d8e3fb;
    --surface-variant: #d8e3fb;
    --on-surface: #111c2d;
    --on-surface-variant: #42474f;
    --inverse-surface: #263143;
    --inverse-on-surface: #ecf1ff;
    --inverse-primary: #a0c9ff;
    --outline: #727780;
    --outline-variant: #c2c7d1;
    --surface-tint: #2d6197;

    --primary: #00355f;
    --on-primary: #ffffff;
    --primary-container: #0f4c81;
    --on-primary-container: #8ebdf9;
    --primary-fixed: #d2e4ff;
    --primary-fixed-dim: #a0c9ff;
    --on-primary-fixed: #001c37;
    --on-primary-fixed-variant: #07497d;

    --secondary: #006b5f;
    --on-secondary: #ffffff;
    --secondary-container: #62fae3;
    --on-secondary-container: #007165;
    --secondary-fixed: #62fae3;
    --secondary-fixed-dim: #3cddc7;
    --on-secondary-fixed: #00201c;
    --on-secondary-fixed-variant: #005047;

    --tertiary: #313436;
    --on-tertiary: #ffffff;
    --tertiary-container: #474b4d;
    --on-tertiary-container: #b8bbbc;
    --tertiary-fixed: #e0e3e5;
    --tertiary-fixed-dim: #c4c7c9;
    --on-tertiary-fixed: #191c1e;
    --on-tertiary-fixed-variant: #444749;

    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #93000a;

    /* ---- Tipografía ---- */
    --font-display: 'Manrope', 'Segoe UI', sans-serif;   /* Títulos grandes */
    --font-body: 'Inter', 'Segoe UI', sans-serif;         /* Cuerpo de texto */
    --font-mono: 'JetBrains Mono', 'Consolas', monospace; /* Etiquetas, códigos */

    /* ---- Radio (border-radius) ---- */
    --radius-sm: 0.375rem;    /* 6px — badges pequeños */
    --radius-md: 0.5rem;      /* 8px — botones, inputs */
    --radius-lg: 0.75rem;     /* 12px — tarjetas */
    --radius-xl: 1rem;        /* 16px — paneles grandes */
    --radius-full: 9999px;    /* Circular — pills, avatares */

    /* ---- Espaciado ---- */
    --space-base: 8px;        /* Unidad base */
    --space-gutter: 24px;     /* Gap entre secciones */
    --space-container: 1280px; /* Ancho máximo del contenido */
    --margin-mobile: 16px;    /* Margen lateral en móvil */
    --margin-desktop: 40px;   /* Margen lateral en escritorio */

    /* ---- Sombras ---- */
    --shadow-soft: 0px 10px 30px rgba(0, 53, 95, 0.08);  /* Tarjetas, paneles */
    --shadow-nav: 0px 10px 30px rgba(15, 23, 42, 0.08);  /* Navegación */
}


/* ══════════════════════════════════════════════════════════════
   2. RESET Y ESTILOS BASE
   Limpia márgenes, establece box-sizing, suaviza scroll,
   configura tipografía base y fondo con patrón de puntos.
   ══════════════════════════════════════════════════════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--on-surface);
    background-color: var(--background);
    background-image: radial-gradient(var(--surface-variant) 1px, transparent 1px);
    background-size: 24px 24px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }


/* ══════════════════════════════════════════════════════════════
   3. CONTENEDOR
   Contenedor centrado con ancho máximo de 1280px.
   En móvil: 16px de margen lateral.
   En escritorio (≥768px): 40px de margen lateral.

   USO EN HTML:
     <div class="container">...</div>
   ══════════════════════════════════════════════════════════════ */
.container {
    width: 100%;
    max-width: var(--space-container);
    margin: 0 auto;
    padding-left: var(--margin-mobile);
    padding-right: var(--margin-mobile);
}
@media (min-width: 768px) {
    .container { padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); }
}


/* ══════════════════════════════════════════════════════════════
   4. SKIP LINK (Accesibilidad)
   Enlace oculto que aparece al presionar Tab para usuarios
   de teclado / lectores de pantalla. Permite saltar al contenido
   principal sin navegar por toda la barra de navegación.

   USO EN HTML:
     <a href="#main-content" class="skip-link">Saltar al contenido</a>
   ══════════════════════════════════════════════════════════════ */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary);
    color: #fff;
    padding: 8px 16px;
    z-index: 10000;
    font-weight: 600;
    border-radius: 0 0 8px 0;
    transition: top 0.2s;
}
.skip-link:focus { top: 0; outline: none; }


/* ══════════════════════════════════════════════════════════════
   5. NAVEGACIÓN (NAV GLASS)
   Barra de navegación fija con efecto glassmorphism
   (backdrop-filter blur + transparencia).

   ESTRUCTURA:
     <nav class="site-nav">
       <div class="nav-inner">
         <a class="nav-brand">...</a>
         <ul class="nav-links">
           <li><a href="...">Enlace</a></li>
         </ul>
         <div class="nav-actions">
           <button class="nav-icon-btn">...</button>
         </div>
         <button class="nav-toggle">☰</button>
       </div>
     </nav>

   CLASES:
   - .site-nav: Contenedor principal fijo arriba
   - .nav-inner: Contenedor interno (flex)
   - .nav-brand: Logo/marca del sitio
   - .nav-links: Lista de enlaces
   - .nav-actions: Botones de acción (buscador, tema, etc.)
   - .nav-toggle: Botón hamburguesa (móvil)
   - .nav-icon-btn: Botón de ícono genérico
   ══════════════════════════════════════════════════════════════ */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-nav);
}
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}
.nav-right { display: flex; align-items: center; gap: 1rem; }
.nav-brand {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.nav-brand .material-symbols-outlined { font-size: 1.6rem; }
.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
}
.nav-links a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--on-surface-variant);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    transition: color 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.nav-links a:hover { color: var(--primary); background: rgba(15, 76, 129, 0.12); }
.nav-links a.active {
    color: var(--primary);
    font-weight: 700;
    border-bottom: 2px solid var(--primary);
    border-radius: 0;
}
.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.6rem;
    color: var(--on-surface);
    padding: 0.25rem;
}
.nav-icon-btn {
    background: none;
    border: none;
    color: var(--on-surface-variant);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
}
.nav-icon-btn:hover { color: var(--primary); background: rgba(15, 76, 129, 0.12); }
.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


/* ══════════════════════════════════════════════════════════════
   6. MAIN
   Contenido principal de la página.
   Padding-top: 120px para compensar la nav fija.
   ══════════════════════════════════════════════════════════════ */
.page-main {
    flex: 1;
    padding-top: 120px;
    padding-bottom: 6rem;
}


/* ══════════════════════════════════════════════════════════════
   7. BREADCRUMB
   Navegación de migas de pan (Home > Curso > Unidad).

   USO EN HTML:
     <div class="breadcrumb">
       <a href="/">Inicio</a>
       <span class="material-symbols-outlined">chevron_right</span>
       <a href="/cursos/daii/">DAII</a>
       <span class="material-symbols-outlined">chevron_right</span>
       <span class="current">Unidad 1</span>
     </div>
   ══════════════════════════════════════════════════════════════ */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--on-surface-variant);
    margin-bottom: 2rem;
}
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .material-symbols-outlined { font-size: 1rem; }
.breadcrumb .current { color: var(--primary); font-weight: 600; }


/* ══════════════════════════════════════════════════════════════
   8. GLASS PANEL
   Panel con efecto glassmorphism (fondo semitransparente + blur).

   USO EN HTML:
     <div class="glass-panel">...</div>

   VARIANTE:
     <div class="soft-bloom">...</div> — Solo sombra suave
   ══════════════════════════════════════════════════════════════ */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 0.5px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}
.soft-bloom { box-shadow: var(--shadow-soft); }


/* ══════════════════════════════════════════════════════════════
   9. HERO PERFIL (PORTADA)
   Sección de perfil del docente en la portada principal.
   Layout: 2 columnas en desktop (7fr 5fr), 1 columna en móvil.

   USO EN HTML:
     <section class="profile-hero">
       <div class="hero-kicker">DOCENTE</div>
       <h1 class="hero-name">Ing. Fernando Díaz</h1>
       <p class="hero-role">Docente DAII</p>
       <p class="hero-bio">...</p>
       <div class="tag-row">
         <span class="chip">...</span>
       </div>
       <div class="btn-row">
         <a class="btn btn-primary">...</a>
       </div>
     </section>

   SUB-CLASES:
   - .hero-kicker: Etiqueta superior ("DOCENTE")
   - .hero-name: Nombre del docente
   - .hero-role: Cargo/rol
   - .hero-bio: Biografía corta
   - .tag-row: Fila de chips/tags
   - .chip: Etiqueta individual
   - .btn-row: Fila de botones
   - .hero-avatar: Contenedor de imagen de perfil
   - .avatar-fallback: Avatar por defecto (gradiente)
   ══════════════════════════════════════════════════════════════ */
.profile-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    margin-bottom: 4rem;
}
@media (min-width: 768px) { .profile-hero { grid-template-columns: 7fr 5fr; } }
.hero-kicker {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    background: var(--surface-container-high);
    color: var(--primary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    width: max-content;
    margin-bottom: 1.25rem;
}
.hero-name {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--on-surface);
}
.hero-role {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--secondary);
    margin: 0.4rem 0 1rem;
}
.hero-bio {
    font-size: 1.125rem;
    color: var(--on-surface-variant);
    max-width: 640px;
}
.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    background: var(--surface-container);
    color: var(--on-surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 500;
}
.chip .material-symbols-outlined { font-size: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }

.hero-avatar {
    position: relative;
    width: 100%;
    max-width: 340px;
    aspect-ratio: 4 / 5;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--surface-variant);
}
.hero-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 53, 95, 0.2), transparent);
    pointer-events: none;
}
.hero-avatar .avatar-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}
.avatar-fallback .material-symbols-outlined { font-size: 6rem; }


/* ══════════════════════════════════════════════════════════════
   10. HERO CURSO
   Encabezado de un curso específico (ej: DAII).
   Layout: vertical en móvil, horizontal en desktop.
   Incluye: ícono del curso, código, título, descripción, horario.

   USO EN HTML:
     <section class="course-hero">
       <div class="hero-icon-box">
         <span class="material-symbols-outlined">code</span>
       </div>
       <div class="hero-body">
         <div class="hero-meta">
           <span class="course-code">DAII-01</span>
           <span class="hero-schedule">...</span>
         </div>
         <h1>Desarrollo de Aplicaciones II</h1>
         <p class="hero-desc">...</p>
       </div>
     </section>

   SUB-CLASES:
   - .hero-icon-box: Cuadro del ícono del curso
   - .hero-body: Contenido textual del hero
   - .hero-meta: Metadatos (código, horario)
   - .course-code: Código del curso
   - .hero-schedule: Horario
   - .hero-desc: Descripción del curso
   ══════════════════════════════════════════════════════════════ */
.course-hero {
    padding: 2rem;
    margin-bottom: var(--space-gutter);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
@media (min-width: 768px) { .course-hero { flex-direction: row; align-items: flex-start; } }
.course-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 16rem;
    height: 16rem;
    background: rgba(0, 53, 95, 0.05);
    border-radius: 50%;
    filter: blur(48px);
    transform: translate(30%, -30%);
    pointer-events: none;
}
.hero-icon-box {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 1rem;
    background: rgba(15, 76, 129, 0.08);
    border: 1px solid rgba(0, 53, 95, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}
.hero-icon-box .material-symbols-outlined { font-size: 3rem; }
.course-hero .hero-body { flex: 1; min-width: 0; }
.hero-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.course-code {
    background: var(--surface-container-highest);
    color: var(--primary);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    border: 1px solid rgba(194, 199, 209, 0.4);
}
.hero-schedule {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--secondary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}
.hero-schedule .material-symbols-outlined { font-size: 1rem; }
.course-hero h1 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--on-surface);
    margin-bottom: 1rem;
}
.hero-desc {
    font-size: 1.125rem;
    color: var(--on-surface-variant);
    max-width: 720px;
    margin-bottom: 1.25rem;
}


/* ══════════════════════════════════════════════════════════════
   11. BOTONES
   3 variantes de botones: primary, outline, ghost.

   USO EN HTML:
     <a class="btn btn-primary">Ver Unidades</a>
     <a class="btn btn-outline">Descargar PDF</a>
     <a class="btn btn-ghost">Más información</a>

   VARIANTE CON ICONO:
     <a class="btn btn-primary">
       <span class="material-symbols-outlined">arrow_forward</span>
       Ver Unidades
     </a>
   ══════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    border: 2px solid transparent;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.btn .material-symbols-outlined { font-size: 1.2rem; }
.btn-primary {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 4px 14px rgba(0, 53, 95, 0.3);
}
.btn-primary:hover { background: var(--primary-container); }
.btn-outline {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}
.btn-outline:hover { background: var(--surface-container-high); }
.btn-ghost {
    background: transparent;
    color: var(--primary);
}
.btn-ghost:hover { background: rgba(15, 76, 129, 0.1); }


/* ══════════════════════════════════════════════════════════════
   12. TABS (Segmented Control)
   Navegación por pestañas estilo iOS/Android.

   USO EN HTML:
     <div class="tabs">
       <button class="tab-btn active" data-tab="tab1">Tab 1</button>
       <button class="tab-btn" data-tab="tab2">Tab 2</button>
     </div>
     <div class="tab-panel active" id="tab1">Contenido 1</div>
     <div class="tab-panel" id="tab2">Contenido 2</div>

   JAVASCRIPT REQUERIDO:
     document.querySelectorAll('.tab-btn').forEach(btn => {
       btn.addEventListener('click', () => {
         // Remover active de todos los tabs y paneles
         // Agregar active al tab clickeado y su panel correspondiente
       });
     });
   ══════════════════════════════════════════════════════════════ */
.tabs {
    display: inline-flex;
    gap: 0.25rem;
    background: var(--surface-container-low);
    padding: 0.25rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(194, 199, 209, 0.3);
}
.tab-btn {
    border: none;
    background: none;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 500;
    color: var(--on-surface-variant);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s;
}
.tab-btn:hover { color: var(--primary); }
.tab-btn.active {
    background: var(--surface-container-lowest);
    color: var(--primary);
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05);
}
.tab-panel { display: none; animation: fadeIn 0.4s ease-out; }
.tab-panel.active { display: block; }


/* ══════════════════════════════════════════════════════════════
   13. TÍTULOS DE SECCIÓN
   Encabezados de sección con ícono.

   USO EN HTML:
     <h2 class="section-title">
       <span class="material-symbols-outlined">school</span>
       Unidades
     </h2>

   VARIANTE .section-head:
     <div class="section-head">
       <div>
         <h2 class="section-title">...</h2>
         <p class="sub">Subtítulo descriptivo</p>
       </div>
     </div>
   ══════════════════════════════════════════════════════════════ */
.section-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--on-surface);
    margin-bottom: 1.5rem;
}
.section-title .material-symbols-outlined { color: var(--primary); font-size: 1.4rem; }
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--outline-variant);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}
.section-head .sub { color: var(--on-surface-variant); font-size: 1rem; margin-top: 0.25rem; }


/* ══════════════════════════════════════════════════════════════
   14. GRID DE TARJETAS
   Grid responsivo de tarjetas (1 columna en móvil, 2 en desktop, 3 opcional).

   USO EN HTML:
     <div class="cards-grid">
       <div class="course-card">...</div>
       <div class="course-card">...</div>
     </div>

   VARIANTE 3 columnas:
     <div class="cards-grid cols-3">
       <div class="resource-card">...</div>
     </div>
   ══════════════════════════════════════════════════════════════ */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--space-gutter);
}
@media (min-width: 768px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }


/* ══════════════════════════════════════════════════════════════
   15. TARJETA DE CURSO
   Tarjeta para mostrar un curso en la portada.
   Incluye: código, nombre, descripción, horario, link.

   USO EN HTML:
     <div class="course-card">
       <div class="card-head">
         <div class="card-ident">
           <div class="card-icon">
             <span class="material-symbols-outlined">code</span>
           </div>
           <div>
             <span class="card-code">DAII-01</span>
             <h3 class="card-title">Desarrollo de Aplicaciones II</h3>
           </div>
         </div>
         <span class="schedule-chip">2do Semestre</span>
       </div>
       <p class="card-desc">...</p>
       <div class="card-foot">
         <div class="card-sched">
           <span class="card-stat">...</span>
         </div>
         <a class="card-link">Ver unidades →</a>
       </div>
     </div>

   SUB-CLASES:
   - .card-head: Encabezado (ícono + código + título)
   - .card-ident: Identificador del curso
   - .card-icon: Cuadro del ícono
   - .card-code: Código del curso
   - .card-title: Nombre del curso
   - .schedule-chip: Chip de semestre
   - .card-desc: Descripción
   - .card-foot: Pie (horario + link)
   - .card-sched: Horario del curso
   - .card-stat: Estadística individual
   - .card-link: Link de acción

   VARIANTE INACTIVA:
     <div class="course-card inactive">
       ...
       <a class="card-link disabled">Próximamente</a>
     </div>
   ══════════════════════════════════════════════════════════════ */
.course-card {
    position: relative;
    background: var(--surface-container-lowest);
    border: 1px solid var(--surface-variant);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.course-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--card-accent, var(--primary-fixed-dim));
}
.course-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: var(--shadow-soft);
}
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.card-ident { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.card-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--surface-container-high);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-icon .material-symbols-outlined { font-size: 1.4rem; }
.card-code {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--outline);
    text-transform: uppercase;
}
.card-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--on-surface);
    line-height: 1.3;
}
.schedule-chip {
    flex-shrink: 0;
    padding: 0.2rem 0.45rem;
    background: var(--surface-container-highest);
    color: var(--primary);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.card-desc {
    font-size: 0.95rem;
    color: var(--on-surface-variant);
    line-height: 1.6;
    flex: 1;
}
.card-foot {
    padding-top: 0.75rem;
    border-top: 1px solid var(--surface-variant);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.card-sched {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}
.card-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--on-surface-variant);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}
.card-stat .material-symbols-outlined { font-size: 1rem; }
.card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--primary);
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.2s, gap 0.2s;
}
.card-link:hover { color: var(--secondary); gap: 0.5rem; }
.card-link .material-symbols-outlined { font-size: 1.125rem; }
.card-link.disabled { color: var(--outline); cursor: default; }
.card-link.disabled:hover { color: var(--outline); gap: 0.25rem; }


/* ══════════════════════════════════════════════════════════════
   16. CHIP DE ESTADO (activo / inactivo)
   Etiqueta que indica si un curso está activo o inactivo.

   USO EN HTML:
     <span class="estado-chip active">
       <span class="dot"></span> Activo
     </span>
     <span class="estado-chip">
       <span class="dot"></span> Inactivo
     </span>
   ══════════════════════════════════════════════════════════════ */
.estado-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    background: var(--surface-container-highest);
    color: var(--outline);
    border: 1px solid var(--outline-variant);
    white-space: nowrap;
}
.estado-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--outline); }
.estado-chip.active { color: var(--secondary); background: rgba(0, 107, 95, 0.1); border-color: rgba(0, 107, 95, 0.35); }
.estado-chip.active .dot { background: var(--secondary); }
.course-card.inactive { opacity: 0.75; }
.course-card.inactive .card-link { color: var(--outline); }


/* ══════════════════════════════════════════════════════════════
   17. CAJA DE BÚSQUEDA
   Input de búsqueda con ícono de lupa.

   USO EN HTML:
     <div class="search-box">
       <span class="material-symbols-outlined">search</span>
       <input type="text" placeholder="Buscar curso...">
     </div>
   ══════════════════════════════════════════════════════════════ */
.search-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-full);
    padding: 0.5rem 1rem;
    min-width: 240px;
}
.search-box .material-symbols-outlined { color: var(--on-surface-variant); font-size: 1.15rem; }
.search-box input {
    border: none;
    background: none;
    outline: none;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--on-surface);
    width: 100%;
}
.search-box input::placeholder { color: var(--outline); }


/* ══════════════════════════════════════════════════════════════
   18. TARJETA DE UNIDAD / TEMA
   Tarjeta para mostrar una unidad o tema dentro de un curso.
   Incluye: tag, semana, ícono, título, descripción, link.

   USO EN HTML:
     <div class="unit-card">
       <div class="unit-top">
         <span class="unit-tag">UDI 01</span>
         <span class="unit-week">
           <span class="material-symbols-outlined">calendar_today</span>
           Semana 1
         </span>
       </div>
       <div class="unit-body">
         <div class="unit-icon">
           <span class="material-symbols-outlined">inventory_2</span>
         </div>
         <h3 class="unit-title">Tipos Abstractos de Datos</h3>
       </div>
       <p class="unit-desc">...</p>
       <a class="unit-link">Ver unidad →</a>
     </div>

   SUB-CLASES:
   - .unit-top: Fila superior (tag + semana)
   - .unit-tag: Etiqueta de la unidad
   - .unit-week: Semana
   - .unit-body: Fila del ícono + título
   - .unit-icon: Cuadro del ícono
   - .unit-title: Título de la unidad
   - .unit-desc: Descripción
   - .unit-link: Link de acción

   VARIANTE INACTIVA:
     <a class="unit-link disabled">Próximamente</a>
   ══════════════════════════════════════════════════════════════ */
.unit-card {
    position: relative;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    overflow: hidden;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.unit-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: var(--surface-variant);
    transition: background 0.3s;
}
.unit-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: var(--shadow-soft);
}
.unit-card:hover::before { background: var(--primary); }
.unit-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; padding-left: 0.5rem; }
.unit-tag {
    background: var(--surface-container);
    color: var(--primary-container);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}
.unit-week {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--on-surface-variant);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.unit-week .material-symbols-outlined { font-size: 1rem; }
.unit-body { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; padding-left: 0.5rem; }
.unit-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: rgba(0, 53, 95, 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.unit-icon .material-symbols-outlined { font-size: 1.25rem; }
.unit-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--on-surface);
    transition: color 0.2s;
}
.unit-card:hover .unit-title { color: var(--primary); }
.unit-desc { font-size: 0.95rem; color: var(--on-surface-variant); padding-left: 0.5rem; margin-bottom: 1rem; }
.unit-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--primary);
    font-weight: 600;
    padding-left: 0.5rem;
    transition: gap 0.2s;
}
.unit-link:hover { gap: 0.5rem; }
.unit-link .material-symbols-outlined { font-size: 1.125rem; }
.unit-link.disabled { color: var(--outline); cursor: default; }


/* ══════════════════════════════════════════════════════════════
   19. DOCUMENTO OFICIAL
   Tarjeta para documentos oficiales (plan de estudios, etc.).

   USO EN HTML:
     <a class="doc-card" href="...">
       <div class="doc-ident">
         <div class="doc-icon">
           <span class="material-symbols-outlined">description</span>
         </div>
         <div>
           <div class="doc-title">Plan de Estudios</div>
           <div class="doc-meta">PDF • 2.3 MB</div>
         </div>
       </div>
       <span class="material-symbols-outlined">download</span>
     </a>
   ══════════════════════════════════════════════════════════════ */
.doc-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--surface-container-lowest);
    border: 1px solid rgba(194, 199, 209, 0.4);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.doc-card:hover { transform: translateY(-4px); border-color: rgba(0, 53, 95, 0.5); box-shadow: var(--shadow-soft); }
.doc-ident { display: flex; align-items: center; gap: 1rem; }
.doc-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--surface-container-high);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.doc-card:hover .doc-icon { background: var(--primary-container); color: var(--on-primary); }
.doc-title { font-weight: 600; color: var(--on-surface); }
.doc-meta { color: var(--on-surface-variant); font-size: 0.9rem; }


/* ══════════════════════════════════════════════════════════════
   20. TARJETAS DE MANUAL / RECURSO
   Tarjeta centrada para recursos o manuales descargables.

   USO EN HTML:
     <div class="resource-card">
       <div class="resource-icon">
         <span class="material-symbols-outlined">menu_book</span>
       </div>
       <div class="resource-name">Manual de C#</div>
       <div class="resource-meta">PDF • 1.2 MB</div>
     </div>
   ══════════════════════════════════════════════════════════════ */
.resource-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    background: var(--surface-container-lowest);
    border: 1px solid rgba(194, 199, 209, 0.4);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: border-color 0.2s;
}
.resource-card:hover { border-color: var(--primary); }
.resource-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: var(--surface-container);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    transition: background 0.2s, color 0.2s;
}
.resource-card:hover .resource-icon { background: var(--primary-container); color: var(--on-primary); }
.resource-icon .material-symbols-outlined { font-size: 2rem; }
.resource-name { font-weight: 600; color: var(--on-surface); }
.resource-meta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; color: var(--on-surface-variant); margin-bottom: 0.75rem; }


/* ══════════════════════════════════════════════════════════════
   21. EJEMPLO / NOTA
   Caja de ejemplo con ícono y título.

   USO EN HTML:
     <div class="example-card">
       <span class="example-icon material-symbols-outlined">lightbulb</span>
       <div>
         <div class="example-title">Ejemplo</div>
         <p class="example-desc">...</p>
       </div>
     </div>
   ══════════════════════════════════════════════════════════════ */
.example-card {
    display: flex;
    gap: 1rem;
    background: var(--surface-bright);
    border: 1px solid rgba(194, 199, 209, 0.3);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}
.example-icon { color: var(--secondary); flex-shrink: 0; margin-top: 0.25rem; }
.example-icon .material-symbols-outlined { font-size: 1.5rem; }
.example-title { font-weight: 600; color: var(--on-surface); margin-bottom: 0.5rem; }
.example-desc { font-size: 0.95rem; color: var(--on-surface-variant); margin-bottom: 0.75rem; }
.inline-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--secondary);
    font-weight: 500;
}
.inline-link:hover { text-decoration: underline; }
.inline-link .material-symbols-outlined { font-size: 1rem; }


/* ══════════════════════════════════════════════════════════════
   22. LISTA DE CLASES
   Lista de clases de un curso (para la página de detalles).

   USO EN HTML:
     <ul class="clase-list">
       <li>
         <a href="...">
           <span class="material-symbols-outlined">play_circle</span>
           Clase 1: Introducción
         </a>
         <span class="date">15/03/2026</span>
       </li>
     </ul>
   ══════════════════════════════════════════════════════════════ */
.clase-list { list-style: none; }
.clase-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 0.5rem;
    border-bottom: 1px solid var(--surface-variant);
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}
.clase-list li:hover { background: var(--surface-container-low); }
.clase-list a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--on-surface);
}
.clase-list a:hover { color: var(--primary); }
.clase-list a .material-symbols-outlined { font-size: 1.125rem; color: var(--primary); }
.clase-list .date {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--on-surface-variant);
    white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════════
   23. ESTADO VACÍO
   Mensaje cuando no hay contenido (lista vacía, sin resultados).

   USO EN HTML:
     <p class="empty-state">No hay clases disponibles aún</p>
   ══════════════════════════════════════════════════════════════ */
.empty-state {
    color: var(--on-surface-variant);
    font-size: 0.95rem;
    font-style: italic;
    text-align: center;
    padding: 2rem 0;
}


/* ══════════════════════════════════════════════════════════════
   24. SECCIÓN CONTENEDORA
   Cajas genéricas para agrupar contenido.

   USO EN HTML:
     <div class="block">Contenido</div>
     <div class="stack">Columna de elementos</div>

   UTILIDADES:
   - .mt-gutter → margin-top: 24px
   - .mb-gutter → margin-bottom: 24px
   - .mb-12 → margin-bottom: 3rem
   ══════════════════════════════════════════════════════════════ */
.block { background: var(--surface-container-lowest); border: 1px solid var(--surface-variant); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.25rem; }
.stack { display: flex; flex-direction: column; gap: 1.25rem; }
.mt-gutter { margin-top: var(--space-gutter); }
.mb-gutter { margin-bottom: var(--space-gutter); }
.mb-12 { margin-bottom: 3rem; }


/* ══════════════════════════════════════════════════════════════
   25. FOOTER
   Pie de página del sitio.

   USO EN HTML:
     <footer class="site-footer">
       <div class="container footer-inner">
         <div class="footer-brand">...</div>
         <div class="footer-links">...</div>
         <div class="footer-legal">...</div>
       </div>
     </footer>
   ══════════════════════════════════════════════════════════════ */
.site-footer {
    margin-top: auto;
    background: var(--surface-container-lowest);
    border-top: 1px solid var(--outline-variant);
    padding: 3rem 0;
}
.footer-inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
}
@media (min-width: 768px) { .footer-inner { flex-direction: row; } }
.footer-brand {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--primary);
    opacity: 0.9;
}
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
    font-size: 0.9rem;
}
.footer-links a { color: var(--on-surface-variant); transition: color 0.2s, opacity 0.2s; }
.footer-links a:hover { color: var(--primary); text-decoration: underline; text-decoration-color: var(--primary); }
.footer-credit { color: var(--secondary); font-size: 1rem; }
.footer-legal { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; color: var(--on-surface-variant); opacity: 0.8; text-align: center; }


/* ══════════════════════════════════════════════════════════════
   26. RESPONSIVE
   Adaptación para pantallas pequeñas (≤768px).
   - Navegación: se ocultan links, aparece hamburguesa
   - Hero: tamaños de fuente reducidos
   - Grid: 1 columna
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 80px;
        left: 0; right: 0;
        background: var(--surface-container-lowest);
        border-bottom: 1px solid var(--outline-variant);
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        padding: 1rem;
        box-shadow: var(--shadow-soft);
    }
    .nav-links.open { display: flex; }
    .nav-toggle { display: block; }
    .hero-name { font-size: 2.25rem; }
    .course-hero h1 { font-size: 2rem; }
    .cards-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════
   27. SÍLABO — ESTILOS DEL DOCUMENTO
   Estilos específicos para la visualización del sílabo
   (plan de estudios semanal).

   NOTA: Estos estilos aplican cuando el sílabo se visualiza
   en el portal. Para impresión, ver sección 28.
   ══════════════════════════════════════════════════════════════ */
.silabo-page {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.7;
    color: #1a1a1a;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 48px;
    background: #f9f9f9;
}

.silabo-page .silabo-container {
    background: #fff;
    padding: 48px 56px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* --- Encabezado del sílabo --- */
.silabo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 3px solid #0a3d62;
    padding-bottom: 16px;
    margin-bottom: 24px;
}

.silabo-header-logo {
    flex: 0 0 30%;
    max-width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.silabo-header-logo img {
    max-height: 120px;
    width: auto;
    display: block;
}

.silabo-header-text {
    flex: 0 0 70%;
    max-width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 10px;
}

.silabo-header-text h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0a3d62;
    letter-spacing: -0.3px;
    line-height: 1.2;
    margin: 0;
}

.silabo-header-text .acronimo {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0a3d62;
    letter-spacing: 2px;
    margin: 2px 0 4px 0;
}

.silabo-header-text .slogan {
    font-size: 0.95rem;
    font-weight: 600;
    color: #c0392b;
    background: #fef0ed;
    display: inline-block;
    padding: 3px 18px;
    border-radius: 30px;
    margin-top: 4px;
}

/* --- Títulos del sílabo --- */
.silabo-page h2 {
    font-size: 22px;
    color: #0a3d62;
    margin-top: 36px;
    margin-bottom: 16px;
    padding-left: 12px;
    border-left: 4px solid #e67e22;
}

.silabo-page h3 {
    font-size: 18px;
    color: #2c3e50;
    margin-top: 28px;
    margin-bottom: 12px;
}

.titulo-silabo {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: #0a3d62;
    margin: 5px 0 20px 0;
    letter-spacing: -0.3px;
}

/* --- Párrafos y listas --- */
.silabo-page p {
    margin-bottom: 16px;
    text-align: justify;
}

.silabo-page ul,
.silabo-page ol {
    margin: 12px 0 16px 28px;
}

.silabo-page li {
    margin-bottom: 6px;
}

.silabo-page strong {
    color: #0a3d62;
}

/* --- Tablas del sílabo --- */
.silabo-page table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 24px;
    font-size: 14px;
}

.silabo-page th {
    background: #0a3d62;
    color: #fff;
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
}

.silabo-page td {
    padding: 10px 12px;
    border: 1px solid #ddd;
    vertical-align: top;
}

.silabo-page tr:nth-child(even) {
    background: #f5f6fa;
}

/* --- Tabla de datos generales --- */
.tabla-datos td {
    padding: 6px 10px;
    border: 1px solid #d0d7e3;
    background: #fafcff;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tabla-datos .etiqueta {
    background: #e8edf5;
    font-weight: 600;
    color: #1e3a5f;
    white-space: nowrap;
}

/* --- Tabla de planificación semanal --- */
.semana-tabla {
    font-size: 0.75rem;
    table-layout: fixed;
}

.semana-tabla th {
    background: #0a3d62;
    color: white;
    font-weight: 600;
    padding: 6px 4px;
    text-align: center;
    border: 1px solid #0a3d62;
    font-size: 0.7rem;
    letter-spacing: 0.2px;
}

.semana-tabla td {
    padding: 6px 4px;
    border: 1px solid #d0d7e3;
    background: #fafcff;
    vertical-align: top;
    line-height: 1.3;
    word-wrap: break-word;
}

.semana-tabla tr:nth-child(even) td {
    background: #f6f9fe;
}

.semana-tabla col:nth-child(1) { width: 7%; }
.semana-tabla col:nth-child(2) { width: 14%; }
.semana-tabla col:nth-child(3) { width: 10%; }
.semana-tabla col:nth-child(4) { width: 18%; }
.semana-tabla col:nth-child(5) { width: 10%; }
.semana-tabla col:nth-child(6) { width: 14%; }
.semana-tabla col:nth-child(7) { width: 12%; }
.semana-tabla col:nth-child(8) { width: 15%; }

.semana-tabla strong {
    color: #0a3d62;
}

/* --- Badges y puntaje --- */
.badge-eje {
    display: inline-block;
    background: #e8edf5;
    color: #1a3f66;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 12px;
    font-size: 0.6rem;
    margin-bottom: 2px;
}

.puntaje {
    background: #d4edda;
    color: #155724;
    border-radius: 10px;
    padding: 0 8px;
    font-weight: 600;
    display: inline-block;
    font-size: 0.65rem;
}

/* --- Footer del sílabo --- */
.silabo-footer {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 2px solid #dce4ed;
    text-align: center;
    font-style: italic;
    color: #4a5f77;
    font-size: 0.9rem;
}

.silabo-footer strong {
    color: #0a3d62;
}


/* ══════════════════════════════════════════════════════════════
   28. SÍLABO — IMPRESIÓN
   Estilos para imprimir el sílabo (solo body.silabo-page).
   - Página con nombre: letter landscape (carta horizontal)
   - Aislado con @page silabo para no afectar unidades (@page portrait)
   - Fondo blanco, texto negro, sin UI, tamaños reducidos
   ══════════════════════════════════════════════════════════════ */
@page silabo {
    size: letter landscape;
    margin: 1cm;
}
@media print {
    body.silabo-page { page: silabo; }

    .theme-toggle, .back-to-top, .nav-icon-btn, .nav-toggle,
    .skip-link, .site-nav { display: none !important; }

    html, body, .silabo-page, .silabo-page * {
        background: #fff !important;
        color: #000 !important;
        background-image: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    .silabo-page {
        padding: 0;
        margin: 0;
        max-width: 100%;
    }
    .silabo-container {
        background: white;
        padding: 20px 15px;
        box-shadow: none;
        border-radius: 0;
    }
    .silabo-header {
        border-bottom-width: 2px;
        padding-bottom: 10px;
        margin-bottom: 15px;
        page-break-after: avoid;
    }
    .silabo-header-logo img { max-height: 100px; filter: grayscale(100%); }
    .silabo-header-text h1 { font-size: 1.3rem; color: #000 !important; }
    .silabo-header-text .acronimo { font-size: 1rem; color: #000 !important; }
    .silabo-header-text .slogan {
        font-size: 0.85rem;
        padding: 2px 14px;
        background: #eee !important;
        color: #000 !important;
        border: 1px solid #999 !important;
    }
    .titulo-silabo { font-size: 1.5rem; margin: 5px 0 15px 0; color: #000 !important; }
    .tabla-datos td { padding: 4px 8px; font-size: 0.8rem; color: #000 !important; }
    .tabla-datos th, .tabla-datos .etiqueta { background: #eee !important; color: #000 !important; }
    .silabo-page h2 {
        font-size: 20px;
        margin-top: 28px;
        margin-bottom: 12px;
        padding-left: 10px;
        color: #000 !important;
        border-left: 4px solid #333 !important;
        page-break-after: avoid;
    }
    .silabo-page h3 { font-size: 16px; margin-top: 20px; margin-bottom: 10px; color: #000 !important; page-break-after: avoid; }
    .silabo-page p, .silabo-page li { font-size: 0.85rem; line-height: 1.4; color: #000 !important; }
    .silabo-page a { color: #000 !important; text-decoration: underline; }
    .silabo-page a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 7pt; color: #666; word-break: break-all; }
    .tabla-contenido th { background: #eee !important; color: #000 !important; border: 1px solid #000 !important; }
    .tabla-contenido td { border: 1px solid #999 !important; color: #000 !important; }
    .tabla-contenido tr:nth-child(even) td { background: #f5f5f5 !important; }
    .semana-tabla { font-size: 0.6rem; page-break-inside: auto; }
    .semana-tabla th {
        font-size: 0.55rem;
        padding: 4px 2px;
        background: #eee !important;
        color: #000 !important;
        border: 1px solid #000 !important;
    }
    .semana-tabla td { padding: 4px 3px; border: 1px solid #999 !important; color: #000 !important; }
    .semana-tabla tr:nth-child(even) td { background: #f5f5f5 !important; }
    .semana-tabla tr { page-break-inside: avoid; page-break-after: auto; }
    .semana-tabla thead { display: table-header-group; }
    .badge-eje { font-size: 0.5rem; padding: 0 6px; background: #ddd !important; color: #000 !important; border: 1px solid #666 !important; }
    .puntaje { font-size: 0.55rem; padding: 0 6px; }
    .silabo-footer {
        font-size: 0.8rem;
        margin-top: 20px;
        padding-top: 10px;
        border-top: 2px solid #333 !important;
        page-break-inside: avoid;
    }
    .silabo-container, .silabo-header, .silabo-footer, .tabla-datos, .semana-tabla {
        page-break-inside: avoid;
    }
    table { page-break-inside: avoid; }
    h2, h3 { page-break-after: avoid; }
    .silabo-page img { max-width: 100% !important; height: auto !important; filter: grayscale(100%); }
    ul, ol { page-break-inside: avoid; }
}


/* ══════════════════════════════════════════════════════════════
   29. SÍLABO — RESPONSIVE
   Adaptación del sílabo para dispositivos móviles.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .silabo-page { padding: 16px 12px; }
    .silabo-container { padding: 24px 18px; }
    .silabo-header { flex-wrap: wrap; }
    .silabo-header-logo { flex: 0 0 100%; max-width: 100%; margin-bottom: 8px; }
    .silabo-header-text { flex: 0 0 100%; max-width: 100%; }
    .silabo-header-text h1 { font-size: 1.2rem; }
    .titulo-silabo { font-size: 1.3rem; }
    .tabla-datos td { padding: 6px 8px; font-size: 0.8rem; }
    .semana-tabla { font-size: 0.6rem; }
    .semana-tabla th, .semana-tabla td { padding: 4px 3px; }
}


/* ══════════════════════════════════════════════════════════════
   30. IMPRESIÓN GENERAL
   Sin @page global: el tamaño lo definen las hojas específicas
   (sílabos → @page silabo landscape; unidades → @page portrait
   en unidades.css). Así no se pisan entre sí.
   ══════════════════════════════════════════════════════════════ */
@media print {
    .theme-toggle, .back-to-top, .nav-icon-btn { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   31. ANIMACIONES
   Animaciones y transiciones del sitio.

   - fadeIn: Aparecer con movimiento hacia arriba
   - prefers-reduced-motion: Respetar preferencias de accesibilidad
     (usuarios con vértigo o sensibilidad al movimiento)
   ══════════════════════════════════════════════════════════════ */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}