/* ~/Clases/lib/custom/style.css
 * ═══════════════════════════════════════════════════════════════
 * JAGGERSTONE MASTER CSS — v2.1
 * Sistema de presentaciones académicas sobre Reveal.js 5
 *
 * ORDEN DE CARGA EN CADA HTML (siempre en este orden):
 *   1. reveal.js/dist/reset.css
 *   2. reveal.js/dist/reveal.css
 *   3. reveal.js/dist/theme/white.css   ← tema base, lo pisamos
 *   4. reveal.js/dist/plugin/highlight/monokai.css
 *   5. lib/custom/style.css             ← ESTE ARCHIVO, último = máx prioridad
 *
 * RUTAS DESDE <Catedra>/ClaseNN-Tema/:
 *   ../../lib/reveal.js/dist/...
 *   ../../lib/custom/style.css
 *
 * ESTRUCTURA MÍNIMA DE UNA SLIDE NORMAL:
 *
 *   <section>
 *     <div class="slide-grid">
 *
 *       <!-- HEADER: título fijo al top, siempre visible -->
 *       <div class="slide-header">
 *         <h2>Título de la slide</h2>
 *         <span class="chip">subtítulo o categoría</span>  ← opcional
 *       </div>
 *
 *       <!-- CONTENIDO: área flexible entre header y footer -->
 *       <div class="slide-content">
 *         <!-- acá van columnas, fichas, código, tabla, etc. -->
 *       </div>
 *
 *       <!-- FOOTER: texto fijo al pie, siempre visible -->
 *       <div class="slide-footer">
 *         <span class="footer-left">Materia · Docente</span>
 *         <span class="footer-right">Clase NN · Tema</span>
 *       </div>
 *
 *     </div>
 *   </section>
 *
 * SLIDES SIN HEADER/FOOTER (portadas, índices, cierre):
 *   <section class="slide-solo-titulo">     ← solo título centrado
 *   <section class="slide-titulo-contenido"> ← título + cuerpo centrado
 *
 * FONDO DE SLIDE (imagen o video que cubre toda la slide):
 *   <div class="slide-bg">          ← contain: muestra todo sin recortar
 *   <div class="slide-bg cover">    ← cover: llena sin bandas, puede recortar
 *
 * INICIALIZACIÓN REVEAL (en el <script> al final del HTML):
 *   Reveal.initialize({
 *     hash: true, slideNumber: 'c/t', controls: true,
 *     progress: true, center: false, transition: 'slide',
 *     width: 1280, height: 720, margin: 0,
 *     plugins: [ RevealNotes, RevealHighlight ]
 *   });
 * ═══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   1. VARIABLES GLOBALES
   ──────────────────────────────────────────────────────────────
   Este bloque es EL ÚNICO que necesitás tocar para personalizar.
   Todo el resto del CSS referencia estas variables.

   ESCALADO GLOBAL:
     Cambiá --base-font-size y TODA la presentación escala.
     El truco: font-size en :root hace que 1rem = --base-font-size,
     así todos los tamaños de texto y layout escalan en cascada.

     Valores típicos:
       18px → pantalla chica o demo
       22px → aula estándar (default)
       26px → aula grande o proyector lejano
       30px → auditorio

     Para cambiar en una presentación específica, agregar en el <head>:
       <style>:root { --base-font-size: 26px; }</style>

   PALETA PRIMARIA (la que se usa por defecto):
     --accent-cyan   #00e5ff  → bordes de columnas, títulos en header
     --accent-purple #7000ff  → borde inferior de columnas (default)
     --accent-pink   #ff007a  → borde del header, imagen flotante
     --accent-green  #39ff14  → disponible para usar
     --accent-orange #ff9100  → disponible para usar

   PALETA MONOKAI (disponible, no es el default):
     --monokai-cyan/green/pink/orange → usados en .text-m-* y .tag.m-*

   LAYOUT (en rem → escalan con --base-font-size):
     --header-height  barra de título (3rem ≈ 66px a 22px base)
     --footer-height  barra del pie   (2rem ≈ 44px a 22px base)
     --gap            separación entre columnas
     --radius         redondeo de bordes (en px, fijo)
   ══════════════════════════════════════════════════════════════ */
:root {
    /* ── LA LÍNEA CLAVE: hace que 1rem = --base-font-size ──────── */
    /* Sin esto, rem se calcula sobre los 16px del browser y        */
    /* cambiar --base-font-size no tiene efecto visual.             */
    font-size             : var(--base-font-size);

    /* ── Tipografía escalable ──────────────────────────────────── */
    --base-font-size      : 20px;   /* cambiá solo esto para escalar TODO */

    /* ── Paleta primaria ───────────────────────────────────────── */
    --accent-cyan         : #00e5ff;
    --accent-purple       : #7000ff;
    --accent-pink         : #ff007a;
    --accent-green        : #39ff14;
    --accent-orange       : #ff9100;
    --bg-dark             : #0a0a0f;   /* negro azulado profundo */
    --trans-bg            : rgba(10, 10, 15, 0.85);

    /* ── Paleta Monokai (disponible como alternativa) ──────────── */
    --monokai-cyan        : #66D9EF;
    --monokai-green       : #A6E22E;
    --monokai-pink        : #F92672;
    --monokai-orange      : #FD971F;

    /* ── Aliases semánticos (referencias internas del CSS) ─────── */
    --color-bg            : var(--bg-dark);
    --color-surface       : var(--trans-bg);
    --color-surface-light : rgba(255, 255, 255, 0.06);
    --color-border        : rgba(0, 229, 255, 0.18);
    --color-text          : #f0f0f0;
    --color-text-muted    : rgba(255, 255, 255, 0.42);
    --color-accent        : var(--accent-cyan);
    --color-accent2       : var(--monokai-green);
    --color-accent3       : var(--accent-pink);
    --color-accent4       : var(--accent-orange);

    /* ── Layout (en rem → escalan con font-size) ──────────────── */
    --gap                 : 1.0rem;
    --header-height       : 2rem;    /* a 22px → 66px; a 26px → 78px -- modificado por jagger para aprovechar mejor el espacio de pantalla*/
    --footer-height       : 1rem;    /* a 22px → 44px; a 26px → 52px */
    --radius              : 14px;    /* px fijo, no escala */

    /* ── Variables de Reveal (integración limpia con el tema) ───── */
    --r-background-color  : var(--bg-dark);
    --r-main-font         : "Source Sans Pro", Helvetica, sans-serif;
    --r-main-font-size    : var(--base-font-size);
    --r-main-color        : #f0f0f0;
    --r-heading-font      : "Source Sans Pro", Helvetica, sans-serif;
    --r-heading-font-weight: 700;
    --r-heading-color     : #ffffff;
    --r-heading-text-transform: uppercase;
    --r-link-color        : var(--accent-cyan);
    --r-link-color-hover  : var(--accent-green);
    --r-selection-background-color: var(--accent-pink);
    --r-code-font         : "Fira Code", "Courier New", monospace;
    --r-block-margin      : 1rem;
}


/* ══════════════════════════════════════════════════════════════
   2. RESET DE REVEAL
   ──────────────────────────────────────────────────────────────
   El tema white.css pone fondos claros y colores oscuros que
   chocan con nuestro sistema oscuro. Los neutralizamos acá.

   REGLAS CRÍTICAS QUE NO SE DEBEN CAMBIAR:
   - NO tocar top/transform/margin en .reveal .slides → Reveal los
     recalcula en JS para centrado y escalado. Pisar esos valores
     corta el header fuera de pantalla.
   - NO quitar height:100% de las sections → sin altura explícita,
     .slide-grid con inset:0 colapsa a cero y la slide queda negra.
   - NO tocar display de las sections → Reveal lo maneja (none→block).
   ══════════════════════════════════════════════════════════════ */

.reveal-viewport {
    background: var(--color-bg) !important;
}

/* Solo text-align; NO top/transform/margin */
.reveal .slides {
    text-align: left !important;
}

/* height:100% da a las sections la misma altura que .slides (720px
   configurado en JS). Sin esto, inset:0 en .slide-grid no resuelve. */
.reveal .slides > section,
.reveal .slides > section > section {
    padding  : 0 !important;
    height   : 100% !important;
    overflow : hidden;
}

/* Neutralizamos el recuadro inline-block del tema white en h1-h6.
   El estilo de título lo maneja .slide-header. Afuera del header,
   los headings usan este estilo genérico de contenido. */
.reveal h1, .reveal h2, .reveal h3,
.reveal h4, .reveal h5, .reveal h6 {
    background    : none !important;
    color         : var(--color-text) !important;
    padding       : 0 !important;
    display       : block !important;
    text-transform: uppercase !important;
    border-radius : 0;
    margin        : 0 0 0.6rem 0 !important;
    font-size     : 1em !important;
    line-height   : 1.2 !important;
}


/* ══════════════════════════════════════════════════════════════
   3. GRID PRINCIPAL DE SLIDE (.slide-grid)
   ──────────────────────────────────────────────────────────────
   Toda slide normal usa este wrapper. Se pone en el primer hijo
   directo de <section>. Crea una grilla de 3 filas:

     ┌────────────────────────────────────────┐
     │ .slide-header  ← fila 1 (altura fija)  │  var(--header-height)
     ├────────────────────────────────────────┤
     │ .slide-content ← fila 2 (flexible)     │  1fr (ocupa el resto)
     │   .cols + .col, .fichas, pre, table... │
     ├────────────────────────────────────────┤
     │ .slide-footer  ← fila 3 (altura fija)  │  var(--footer-height)
     └────────────────────────────────────────┘

   IMPORTANTE: las filas 1 y 3 tienen altura FIJA definida por
   variables. Header y footer SIEMPRE están en el mismo lugar,
   sin importar si hay o no contenido en la fila 2.

   Si una slide necesita solo fondo (imagen/video), con header y
   footer vacíos, de todas formas se ven en su lugar correcto.

   USO:
     <section>
       <div class="slide-grid">
         <div class="slide-header">...</div>   ← fila 1
         <div class="slide-content">...</div>  ← fila 2
         <div class="slide-footer">...</div>   ← fila 3
       </div>
     </section>

   FONDO DE SLIDE (opcional, va como primer hijo del .slide-grid):
     <div class="slide-bg">       → contain: muestra todo, sin recortar
     <div class="slide-bg cover"> → cover: llena sin bandas (puede recortar)
     Dentro: <img> o <video autoplay muted loop playsinline>
   ══════════════════════════════════════════════════════════════ */

/* position:absolute + inset:0 llena la section completamente.
   Funciona porque Reveal da height:100% a las sections (ver sección 2).
   isolation:isolate crea contexto de apilamiento propio: garantiza
   que .slide-bg quede debajo del header/footer sin importar z-index
   de elementos externos. */
.slide-grid {
    position             : absolute;
    inset                : 0;
    display              : grid;
    grid-template-rows   : var(--header-height) 1fr var(--footer-height);
    padding              : 0;
    box-sizing           : border-box;
    isolation            : isolate;
}

/* Orden de capas dentro de .slide-grid */
/* z-index: -1 en slide-bg → se pinta ANTES que el contenido normal (h1, p, cols).
   Con z-index:0 el fondo tapaba el texto en .slide-solo-titulo porque CSS pinta
   los elementos de flujo normal ANTES que los position:absolute z-index:0.
   Con -1 queda detrás de todo el contenido en cualquier tipo de slide. */
.slide-bg      { z-index: -1; }
.slide-content { z-index: 5;  }   /* contenido en el medio */
.slide-header,
.slide-footer  { z-index: 10; }   /* header y footer siempre encima */

/* Fondo de slide — imagen o video */
.slide-bg {
    position : absolute;
    inset    : 0;
    z-index  : -1;
    overflow : hidden;
}
.slide-bg img,
.slide-bg video {
    /* position:absolute + inset:0 garantiza cobertura total sin gaps.
       width/height 100% son redundantes pero los dejamos como refuerzo. */
    position         : absolute !important;
    inset            : 0 !important;
    width            : 100%;
    height           : 100%;
    object-fit       : contain;       /* muestra TODO sin recortar — puede haber bandas */
    object-position  : center center;
    opacity          : 0.55;
    /* reveal.css aplica margin:15px 0 + border:1px + background:#fff
       a todos los <img> de section con especificidad (0,2,3).
       Lo neutralizamos con !important. */
    margin           : 0 !important;
    border           : none !important;
    background       : transparent !important;
    box-shadow       : none !important;
}
/* Agregar .cover cuando preferís llenar sin bandas (recorta bordes) */
.slide-bg.cover img,
.slide-bg.cover video {
    object-fit : cover !important;   /* !important contra inline style de Reveal.js */
    opacity    : 0.45;
}

/* ── HEADER — barra de título fija al top ──────────────────────
   Siempre contiene un h1/h2/h3 como título principal.
   Opcionalmente un .chip para subtítulo, cátedra o categoría.

   USO:
     <div class="slide-header">
       <h2>Título de la slide</h2>
       <span class="chip">Clase 03</span>
     </div>
   ─────────────────────────────────────────────────────────────── */
.slide-header {
    grid-row      : 1;
    z-index       : 10;
    display       : flex;
    align-items   : center;
    padding       : 0 2.5rem;
    background    : var(--color-surface);
    border-bottom : 2px solid var(--accent-pink);
    gap           : 1rem;
    flex-shrink   : 0;
}
.slide-header h1,
.slide-header h2,
.slide-header h3 {
    margin        : 0 !important;
    font-size     : 1.05rem !important;
    font-weight   : 700 !important;
    color         : var(--accent-cyan) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
    flex          : 1;
}
/* Chip — etiqueta pequeña de contexto (número de clase, materia, categoría) */
.slide-header .chip {
    font-size    : 0.65rem;
    color        : var(--accent-orange);
    background   : rgba(255, 145, 0, 0.12);
    border       : 1px solid rgba(255, 145, 0, 0.5);
    border-radius: 4px;
    padding      : 0.15em 0.6em;
    white-space  : nowrap;
    flex-shrink  : 0;
}

/* ── CONTENT — área flexible entre header y footer ─────────────
   Es un flex-column: cada hijo crece o se encoge verticalmente.
   .cols y .fichas dentro usan flex:1 para ocupar todo el espacio.

   USO:
     <div class="slide-content">
       <div class="cols cols-50-50">...</div>
     </div>
   ─────────────────────────────────────────────────────────────── */
.slide-content {
    grid-row      : 2;
    z-index       : 5;
    padding       : var(--gap) 2.5rem;
    overflow      : hidden;
    display       : flex;
    flex-direction: column;
    gap           : var(--gap);
}

/* ── FOOTER — barra de info fija al pie ────────────────────────
   Dos zonas de texto: izquierda (cátedra/docente) y derecha (clase/tema).

   USO:
     <div class="slide-footer">
       <span class="footer-left">SO · UCASal · Ing. Jaggerstone</span>
       <span class="footer-right">Clase 03 · Procesos</span>
     </div>
   ─────────────────────────────────────────────────────────────── */
.slide-footer {
    grid-row       : 3;
    z-index        : 10;
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 0 3.5rem;
    background     : var(--color-surface);
    border-top     : 1px solid var(--color-border);
    font-size      : 0.65rem;
    color          : var(--color-text-muted);
    font-family    : var(--r-code-font);
    flex-shrink    : 0;
}
.slide-footer .footer-left  { text-align: left;  }
.slide-footer .footer-right { text-align: right; }


/* ══════════════════════════════════════════════════════════════
   4. SISTEMA DE COLUMNAS (.cols + .col)
   ──────────────────────────────────────────────────────────────
   Se coloca dentro de .slide-content. La clase base .cols activa
   el grid; la clase modificadora define proporciones.

   REFERENCIA RÁPIDA DE CLASES:

   2 columnas:
     .cols-2  / .cols-50-50   → 50 / 50
     .cols-75-25               → 75 / 25
     .cols-25-75               → 25 / 75

   3 columnas:
     .cols-3  / .cols-33-33-33 → 33 / 33 / 33
     .cols-25-50-25             → 25 / 50 / 25
     .cols-50-25-25             → 50 / 25 / 25
     .cols-25-25-50             → 25 / 25 / 50

   4 y 5 columnas:
     .cols-4  → 25 / 25 / 25 / 25
     .cols-5  → 20 / 20 / 20 / 20 / 20

   USO TÍPICO:
     <div class="slide-content">
       <div class="cols cols-50-50">
         <div class="col">Columna izquierda</div>
         <div class="col accent-cyan">Columna derecha</div>
       </div>
     </div>

   ACENTOS DE COLUMNA (.accent-*):
   Cambian solo el color del borde inferior (5px). El hover glow
   también cambia de color para que combine.
     .col.accent-cyan    → borde inferior cyan   (#00e5ff)
     .col.accent-purple  → borde inferior violeta (#7000ff) [default]
     .col.accent-pink    → borde inferior rosa    (#ff007a)
     .col.accent-orange  → borde inferior naranja (#ff9100)
     .col.accent-green   → borde inferior verde   (#A6E22E)

   FONDO PROPIO DE COLUMNA (opcional):
     <div class="col">
       <div class="col-bg"><img src="..."></div>  ← fondo, opacidad 30%
       <div class="col-title">Título</div>
       <p>Texto encima del fondo</p>
     </div>

   TÍTULO DE COLUMNA:
     <div class="col-title">Texto</div>
     Siempre blanco, mayúsculas, con divisor interno sutil.
     NO cambia de color por el acento (a diferencia del sistema viejo).
   ══════════════════════════════════════════════════════════════ */

.cols {
    display        : grid;
    gap            : var(--gap);
    align-items    : stretch;
    width          : 100%;
    flex           : 1;         /* ocupa todo el espacio disponible en .slide-content */
    min-height     : 0;         /* permite encogerse — sin esto min-height:auto (default flex)
                                   impide que .cols se encoja aunque flex-shrink:1 esté activo,
                                   y una imagen grande infla el contenedor desbordando slide-content */
    grid-auto-rows : 1fr;       /* la fila implícita llena el contenedor en lugar de crecer con
                                   el contenido → .col obtiene una altura definida → max-height:%
                                   y flex:1 en imágenes resuelven correctamente */
}

/* ── 2 columnas ────────────────────────────────────────────── */
.cols-2,
.cols-50-50  { grid-template-columns: 1fr 1fr; }
.cols-75-25  { grid-template-columns: 3fr 1fr; }
.cols-25-75  { grid-template-columns: 1fr 3fr; }

/* ── 3 columnas ────────────────────────────────────────────── */
.cols-3,
.cols-33-33-33 { grid-template-columns: 1fr 1fr 1fr; }
.cols-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
.cols-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
.cols-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }

/* ── 4 y 5 columnas ────────────────────────────────────────── */
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }

/* ── Columna individual ────────────────────────────────────── */
.col {
    background   : var(--color-surface);
    border       : 1px solid var(--color-border);      /* cyan sutil, todos los lados */
    border-bottom: 5px solid var(--accent-purple);     /* acento inferior, violeta default */
    border-radius: var(--radius);
    padding      : 1.1rem 1.3rem;
    box-sizing   : border-box;
    display      : flex;
    flex-direction: column;
    gap          : 0.5rem;
    overflow     : hidden;
    position     : relative;   /* contexto para .col-bg */
    min-width    : 0;          /* evita overflow en grid con texto largo */
    transition   : transform 0.3s ease, box-shadow 0.3s ease;
}
.col:hover {
    transform  : translateY(-4px);
    box-shadow : 0 12px 28px rgba(112, 0, 255, 0.22);  /* glow violeta default */
}

/* Fondo de columna — dos variantes:
   A) background-image CSS en el div (recomendado para imágenes — sin <img> hijo):
        <div class="col-bg" style="background-image:url('img/foto.jpg');"></div>
      Sin elemento <img> → sin interferencia de reveal.css, sin lightbox, sin bandas.
   B) <video> hijo (para fondos animados):
        <div class="col-bg"><video autoplay muted loop playsinline>...</video></div> */
.col > .col-bg {
    position            : absolute;
    inset               : 0;
    z-index             : 0;
    overflow            : hidden;
    border-radius       : var(--radius);
    opacity             : 0.3;            /* afecta background-image y video hijo */
    background-size     : cover;          /* variante A: imagen CSS */
    background-position : center center;
    background-repeat   : no-repeat;
}
/* Variante B: video hijo — position y object-fit, sin opacity propia */
.col > .col-bg video {
    position   : absolute;
    top        : 0; right : 0; bottom: 0; left: 0;
    width      : 100%;
    height     : 100%;
    object-fit : cover;
}

/* Todo el contenido de la columna va sobre el fondo */
.col > *:not(.col-bg) { position: relative; z-index: 1; }

/* Título de columna — siempre blanco, divisor interno sutil */
.col > .col-title {
    font-size     : 0.8rem;
    font-weight   : 700;
    color         : #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom : 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 0.35rem;
    margin-bottom : 0.35rem;
    flex-shrink   : 0;
}

/* Texto y listas */
.col p, .col li {
    font-size  : 0.8rem;
    line-height: 1.55;
    color      : var(--color-text);
    margin     : 0 0 0.3rem 0;
}
.col ul, .col ol { padding-left: 1.2em; margin: 0; }

/* Imagen o video DENTRO de la columna (no como fondo).
   reveal.css aplica margin:15px 0 + border:1px + background:#fff a todo
   .reveal section img — lo neutralizamos igual que en .slide-bg img.
   flex:1 + min-height:0: la imagen llena el espacio restante del flex-column
   y puede encogerse bajo su tamaño natural sin desbordarlo.
   (max-height:100% no funciona acá porque requiere altura definida en el padre,
   que solo existe cuando .cols tiene min-height:0 + grid-auto-rows:1fr.) */
.col img:not(.col-bg img),
.col video:not(.col-bg video) {
    max-width     : 100%;
    flex          : 1;          /* llena el espacio restante en el flex-column del .col */
    min-height    : 0;          /* permite encogerse bajo el tamaño natural */
    object-fit    : contain;
    border-radius : 8px;
    align-self    : center;
    margin        : 0 !important;
    border        : none !important;
    background    : transparent !important;
    box-shadow    : none !important;
}

/* ── Modificador de compacidad ─────────────────────────────────
   .col.compact → reduce el padding-bottom cuando la columna termina
   en una imagen. Mantiene el padding superior y lateral intactos.
   Usar cuando el último hijo del .col es un <img> y el padding
   por defecto (1.1rem) genera espacio muerto en la parte inferior. */
.col.compact { padding-bottom: 0.3rem; }

/* ── Variantes de acento (solo borde inferior + glow del hover) ── */
.col.accent-cyan   { border-bottom-color: var(--accent-cyan);   }
.col.accent-cyan:hover   { box-shadow: 0 12px 28px rgba(0, 229, 255, 0.20); }

.col.accent-green  { border-bottom-color: var(--monokai-green); }
.col.accent-green:hover  { box-shadow: 0 12px 28px rgba(166, 226, 46, 0.18); }

.col.accent-pink   { border-bottom-color: var(--accent-pink);   }
.col.accent-pink:hover   { box-shadow: 0 12px 28px rgba(255, 0, 122, 0.20); }

.col.accent-orange { border-bottom-color: var(--accent-orange); }
.col.accent-orange:hover { box-shadow: 0 12px 28px rgba(255, 145, 0, 0.20); }

.col.accent-purple { border-bottom-color: var(--accent-purple); }   /* explícito */


/* ══════════════════════════════════════════════════════════════
   5. MODO FICHAS (.fichas)
   ──────────────────────────────────────────────────────────────
   Grid de exactamente 2 filas × N columnas. Cada celda es un .col.
   Ideal para glosarios, resúmenes de conceptos, comparativas.

   CLASES DISPONIBLES:
     .fichas-4  → 2 filas × 2 cols (4 fichas total)
     .fichas-6  → 2 filas × 3 cols (6 fichas total)
     .fichas-8  → 2 filas × 4 cols (8 fichas total, fuente más chica)

   USO:
     <div class="slide-content">
       <div class="fichas fichas-6">
         <div class="col accent-cyan"><div class="col-title">FCFS</div><p>...</p></div>
         <div class="col accent-pink"><div class="col-title">RR</div><p>...</p></div>
         ... (6 divs en total)
       </div>
     </div>
   ══════════════════════════════════════════════════════════════ */

.fichas {
    display            : grid;
    gap                : var(--gap);
    align-items        : stretch;
    width              : 100%;
    flex               : 1;
    grid-template-rows : 1fr 1fr;   /* siempre 2 filas */
}
.fichas-4 { grid-template-columns: repeat(2, 1fr); }
.fichas-6 { grid-template-columns: repeat(3, 1fr); }
.fichas-8 { grid-template-columns: repeat(4, 1fr); }

/* Las fichas usan el mismo .col — sin diferencia de estilo */


/* ══════════════════════════════════════════════════════════════
   6. COMPATIBILIDAD RETROACTIVA
   ──────────────────────────────────────────────────────────────
   Los HTMLs anteriores que usaban .container + .col (sistema flex
   viejo) siguen funcionando sin cambios. .col mantiene todos sus
   estilos nuevos; .container solo provee el flex-wrapper.
   ══════════════════════════════════════════════════════════════ */
.container {
    display: flex;
    gap    : var(--gap);
}


/* ══════════════════════════════════════════════════════════════
   7. IMAGEN FLOTANTE CON ZOOM (.floating-image)
   ──────────────────────────────────────────────────────────────
   Miniatura fija en esquina inferior derecha. Al hacer clic se
   expande a casi toda la pantalla; otro clic la devuelve.
   Funciona con CSS puro usando checkbox + label. SIN JavaScript.

   CÓMO FUNCIONA:
   - Un <input type="checkbox"> invisible actúa como interruptor.
   - El <label> asociado es la imagen visible (la miniatura).
   - Cuando el checkbox está marcado, el CSS aplica el estado expandido.
   - El selector ~ o + conecta checkbox → label.

   USO (va FUERA del .slide-grid, como hermano directo de él):
     <section>
       <div class="slide-grid">...</div>

       <!-- El input y el label van DESPUÉS del slide-grid -->
       <input type="checkbox" id="zoom-unico-id" class="zoom-trigger">
       <label for="zoom-unico-id" class="floating-image">
         <img src="ruta/diagrama.png" alt="descripción">
         <div class="zoom-hint">CLIC PARA ZOOM</div>
       </label>
     </section>

   IMPORTANTE: el id del input debe ser ÚNICO en toda la presentación.
   Si hay varias slides con imagen flotante, usar zoom-1, zoom-2, etc.

   POSICIONAMIENTO: la miniatura aparece sobre el footer (1rem de
   separación) y a 2.5rem del borde derecho. El footer no queda tapado.
   ══════════════════════════════════════════════════════════════ */

.zoom-trigger { display: none; }   /* checkbox invisible */

.floating-image {
    position     : fixed;
    bottom       : calc(var(--footer-height) + 1rem);
    right        : 2.5rem;
    width        : 200px;
    height       : 130px;
    z-index      : 500;
    cursor       : pointer;
    border       : 2px solid var(--accent-pink);
    border-radius: var(--radius);
    overflow     : hidden;
    transition   : all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow   : 0 0 14px rgba(255, 0, 122, 0.45), 0 4px 20px rgba(0,0,0,0.6);
}
.floating-image img,
.floating-image video {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    display    : block;
}
.floating-image .zoom-hint {
    position      : absolute;
    top           : 0;
    left          : 0;
    background    : var(--accent-pink);
    color         : #fff;
    font-size     : 0.5rem;
    font-weight   : 700;
    padding       : 2px 7px;
    font-family   : var(--r-code-font);
    letter-spacing: 0.05em;
}

/* Estado expandido (checkbox marcado) */
.zoom-trigger:checked ~ .floating-image,
.zoom-trigger:checked + .floating-image {
    bottom       : 5vh;
    right        : 5vw;
    width        : 90vw;
    height       : 90vh;
    z-index      : 2000;
    border-color : var(--accent-cyan);
    border-width : 3px;
    box-shadow   : 0 0 40px rgba(0, 229, 255, 0.35), 0 20px 60px rgba(0,0,0,0.8);
}
/* Botón de cierre superpuesto cuando está expandida */
.zoom-trigger:checked ~ .floating-image::before,
.zoom-trigger:checked + .floating-image::before {
    content       : "✕  clic para cerrar";
    position      : absolute;
    top           : 0.5rem;
    right         : 0.8rem;
    color         : #fff;
    background    : rgba(0,0,0,0.7);
    padding       : 4px 10px;
    font-size     : 0.7rem;
    border-radius : 4px;
    z-index       : 10;
    pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════
   8. SLIDES ESPECIALES (sin header ni footer)
   ──────────────────────────────────────────────────────────────
   Para portadas, índices, separadores de sección y cierre.
   Se aplican DIRECTAMENTE al <section>, no a un div interno.
   El contenido queda centrado vertical y horizontalmente.

   .slide-solo-titulo
     Solo un h1 o h2 grande en el centro.
     Uso típico: portada de la presentación, cierre "¿Preguntas?".
     USO: <section class="slide-solo-titulo">
              <h1>Título</h1>
              <p class="subtitulo">texto secundario</p>
            </section>

   .slide-titulo-contenido
     Título + bloque de contenido centrado (listas, párrafos).
     Uso típico: índice de la clase, anuncio de sección.
     USO: <section class="slide-titulo-contenido">
              <h2>Título</h2>
              <div class="contenido-central">...</div>
            </section>

   AMBAS CLASES: pueden tener fondo con data-background-color
   o data-background-image de Reveal. También aceptan .slide-bg
   como primer hijo para video de fondo.

   RECOMENDACIÓN: agregar data-background-color="#000" (o el color
   deseado) al <section> para que Reveal pinte correctamente el
   fondo de transición entre slides.
   ══════════════════════════════════════════════════════════════ */

.reveal .slides > section.slide-solo-titulo,
.reveal .slides > section > section.slide-solo-titulo {
    position       : absolute !important;
    inset          : 0 !important;
    display        : flex !important;
    flex-direction : column !important;
    justify-content: center !important;
    align-items    : center !important;
    text-align     : center !important;
    padding        : 3rem !important;
    box-sizing     : border-box;
}
.slide-solo-titulo h1,
.slide-solo-titulo h2 {
    font-size    : 2.2rem !important;
    color        : var(--accent-cyan) !important;
    text-shadow  : 0 0 40px rgba(0, 229, 255, 0.35);
    margin-bottom: 0.5rem !important;
}
.slide-solo-titulo .subtitulo {
    font-size : 1rem;
    color     : var(--color-text-muted);
    margin-top: 0.5rem;
}

.reveal .slides > section.slide-titulo-contenido,
.reveal .slides > section > section.slide-titulo-contenido {
    position       : absolute !important;
    inset          : 0 !important;
    display        : flex !important;
    flex-direction : column !important;
    justify-content: center !important;
    align-items    : center !important;
    text-align     : center !important;
    padding        : 3rem 5rem !important;
    gap            : 1.5rem !important;
    box-sizing     : border-box;
}
.slide-titulo-contenido h2 {
    font-size    : 1.6rem !important;
    color        : var(--accent-cyan) !important;
    border-bottom: 2px solid var(--accent-pink);
    padding-bottom: 0.5rem;
    width        : 100%;
}
.slide-titulo-contenido .contenido-central {
    font-size : 0.95rem;
    line-height: 1.7;
    color     : var(--color-text);
    max-width : 80%;
}


/* ══════════════════════════════════════════════════════════════
   9. VOCABULARIO Y REFERENCIAS (.slide-vocab)
   ──────────────────────────────────────────────────────────────
   Sub-slide vertical de repaso (regla post-mortem Clase 01 SO).
   Toda slide que mencione personajes históricos, términos técnicos
   no triviales o referencias externas debe tener una sub-slide ↓.

   Fuente reducida (0.6em) porque se lee de forma individual en
   pantalla, NO se proyecta. Los alumnos la usan como glosario.

   ESTRUCTURA HTML (sub-slide anidada, acceso con flecha ↓):
     <section>
       <section>
         <!-- slide principal normal con .slide-grid -->
       </section>
       <section>
         <div class="slide-grid slide-vocab">
           <div class="slide-header">
             <h3>Vocabulario y referencias — Slide NN</h3>
           </div>
           <div class="slide-content">
             <div class="cols cols-3">
               <div class="col">
                 <div class="col-title">Personajes</div>
                 <ul><li><strong>Nombre</strong> — bio 1-2 líneas.</li></ul>
               </div>
               <div class="col">
                 <div class="col-title">Vocabulario</div>
                 <ul><li><strong>Término</strong> — def corta.</li></ul>
               </div>
               <div class="col">
                 <div class="col-title">Referencias</div>
                 <ul><li>Tanenbaum, Cap. X</li></ul>
                 <p class="refs"><strong>Cultura:</strong> Mr. Robot, etc.</p>
               </div>
             </div>
           </div>
           <div class="slide-footer">...</div>
         </div>
       </section>
     </section>
   ══════════════════════════════════════════════════════════════ */

.slide-vocab { font-size: 0.6em; }

.slide-vocab h3 {
    font-size     : 0.9rem !important;
    color         : var(--accent-orange) !important;
    border-bottom : 1px solid var(--accent-orange);
    padding-bottom: 0.3rem;
    margin-bottom : 0.8rem !important;
}
.slide-vocab .refs {
    margin-top : 0.6rem;
    font-size  : 0.55em;
    color      : var(--color-text-muted);
    border-top : 1px solid var(--color-border);
    padding-top: 0.4rem;
}


/* ══════════════════════════════════════════════════════════════
   10. BLOQUES DE CÓDIGO (pre + code)
   ──────────────────────────────────────────────────────────────
   Usar con RevealHighlight (monokai.css). En el HTML:
     <pre><code class="language-bash" data-trim>
       # código acá
     </code></pre>

   Lenguajes preferidos: bash, c, cpp, python (jamás pseudocódigo).
   Siempre en Linux — nunca Windows/macOS en los ejemplos.
   data-trim elimina indentación extra del HTML.
   ══════════════════════════════════════════════════════════════ */

.reveal pre {
    box-shadow   : none !important;
    border-radius: var(--radius);
    border       : 1px solid var(--color-border);
    font-size    : 0.7rem !important;
    margin       : 0.5rem 0 !important;
    width        : 100% !important;
    min-height   : 0;          /* permite que el flex item se encoja */
    overflow-y   : auto;       /* scrollbar vertical cuando el código no entra */
    flex-shrink  : 1;          /* participa en la compresión del flex column */
}
.reveal pre code {
    padding   : 1rem !important;
    max-height: none !important;  /* sin límite propio — lo limita el pre */
}


/* ══════════════════════════════════════════════════════════════
   11. NÚMERO DE DIAPOSITIVA
   ──────────────────────────────────────────────────────────────
   Se activa con slideNumber: 'c/t' en Reveal.initialize().
   Posicionado sobre el footer (z-index 2000).
   ══════════════════════════════════════════════════════════════ */

.reveal .slide-number {
    position  : fixed !important;
    bottom    : 0.6rem !important;
    right     : 2rem !important;
    background: none !important;
    color     : var(--color-text-muted) !important;
    font-size : 0.65rem !important;
    font-family: var(--r-code-font) !important;
    z-index   : 2000 !important;
}


/* ══════════════════════════════════════════════════════════════
   12. UTILIDADES GENERALES
   ──────────────────────────────────────────────────────────────
   Clases de una sola responsabilidad, usables en cualquier contexto.

   COLORES DE TEXTO (.text-*):
   Paleta primaria:
     .text-cyan    → #00e5ff
     .text-purple  → #7000ff
     .text-pink    → #ff007a
     .text-green   → #39ff14
     .text-orange  → #ff9100
     .text-muted   → rgba(255,255,255,0.42)
   Paleta Monokai (legacy, prefijadas .text-m-):
     .text-m-cyan / .text-m-green / .text-m-pink / .text-m-orange

   TAGS (.tag):
   Etiquetas inline estilo código. Default: cyan.
   Modificadores: .purple .pink .green .orange
   Monokai: .m-green .m-orange
   USO: <span class="tag">bash</span> <span class="tag pink">SIGKILL</span>

   FRAGMENTOS (aparición progresiva):
   Usar class="fragment" en cualquier elemento. Avanza con espacio.

   TABLA (.reveal table):
   Estilos automáticos. Poner dentro de .col o directo en .slide-content.

   PLACEHOLDER (.img-placeholder):
   Rectángulo de marcador de posición para imágenes aún no disponibles.
   ══════════════════════════════════════════════════════════════ */

/* Colores de texto — paleta primaria */
.text-cyan   { color: var(--accent-cyan)    !important; }
.text-purple { color: var(--accent-purple)  !important; }
.text-pink   { color: var(--accent-pink)    !important; }
.text-green  { color: var(--accent-green)   !important; }
.text-orange { color: var(--accent-orange)  !important; }
.text-muted  { color: var(--color-text-muted) !important; }
/* Colores Monokai (legacy) */
.text-m-cyan   { color: var(--monokai-cyan)   !important; }
.text-m-green  { color: var(--monokai-green)  !important; }
.text-m-pink   { color: var(--monokai-pink)   !important; }
.text-m-orange { color: var(--monokai-orange) !important; }

/* Fragmentos */
.reveal .fragment         { opacity: 0.2; }
.reveal .fragment.visible { opacity: 1;   }

/* Tablas */
.reveal table {
    font-size      : 0.75rem;
    border-collapse: collapse;
    width          : 100%;
    /* white.css aplica margin:auto — lo neutralizamos para que la tabla
       se quede en el top del flex container y no flote al centro/abajo */
    margin         : 0 !important;
}
.reveal table th {
    background    : var(--color-surface);
    color         : var(--accent-cyan);
    border        : 1px solid var(--color-border);
    padding       : 0.4rem 0.7rem;
    text-transform: uppercase;
    font-size     : 0.7rem;
}
.reveal table td {
    border  : 1px solid var(--color-border);
    padding : 0.35rem 0.7rem;
    color   : var(--color-text);
}
.reveal table tr:nth-child(even) td {
    background: var(--color-surface-light);
}
/* white.css elimina explícitamente el border-bottom de la última fila
   (.reveal table tbody tr:last-child td { border-bottom: none }).
   Lo restauramos para que la tabla tenga los 4 lados completos. */
.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
    border-bottom: 1px solid var(--color-border) !important;
}
/* Clearance para que el border-radius + overflow:hidden del .col
   no clipee el borde inferior recién restaurado. */
.col table {
    margin-bottom: 4px !important;
}

/* Epígrafe / nota al pie — .caption
   Usalo debajo de una imagen, tabla o bloque de código para fuentes,
   aclaraciones o recordatorios de clase. Similar a un <p> normal pero
   más chico, gris y cursiva. Funciona dentro y fuera de .col.

   USO:
     <p class="caption">Fuente: Tanenbaum, Fig. 2-42</p>
     <p class="caption">⚠ Recordar mencionar aging antes de continuar</p>
     <img src="...">
     <p class="caption">Gantt para 5 procesos con Q = 3 min</p>
*/
.caption {
    font-size  : 0.55rem !important;  /* !important: gana a .col p (especificidad 0,1,1) */
    color      : var(--color-text-muted) !important;
    font-style : italic;
    margin     : 0.25rem 0 0 0;
    line-height: 1.4;
}

/* Placeholder de imagen */
.img-placeholder {
    border        : 2px dashed rgba(255,255,255,0.2);
    border-radius : var(--radius);
    background    : rgba(255,255,255,0.04);
    color         : var(--color-text-muted);
    font-size     : 0.55rem;
    font-style    : italic;
    padding       : 10px 14px;
    text-align    : center;
    width         : 100%;
    box-sizing    : border-box;
}

/* Tags de tecnología/lenguaje */
.tag {
    display       : inline-block;
    background    : rgba(0, 229, 255, 0.10);
    border        : 1px solid rgba(0, 229, 255, 0.40);
    color         : var(--accent-cyan);
    border-radius : 5px;
    font-size     : 0.6rem;
    font-family   : var(--r-code-font);
    padding       : 0.12em 0.6em;
    margin        : 0.1em;
    letter-spacing: 0.03em;
}
.tag.purple { background: rgba(112,  0,255,0.12); border-color: rgba(112,  0,255,0.5); color: var(--accent-purple); }
.tag.pink   { background: rgba(255,  0,122,0.12); border-color: rgba(255,  0,122,0.5); color: var(--accent-pink);   }
.tag.green  { background: rgba( 57,255, 20,0.10); border-color: rgba( 57,255, 20,0.4); color: var(--accent-green);  }
.tag.orange { background: rgba(255,145,  0,0.12); border-color: rgba(255,145,  0,0.5); color: var(--accent-orange); }
/* Monokai (legacy) */
.tag.m-green  { background: rgba(166,226,46,0.10); border-color: rgba(166,226,46,0.4); color: var(--monokai-green);  }
.tag.m-orange { background: rgba(253,151,31,0.10); border-color: rgba(253,151,31,0.4); color: var(--monokai-orange); }

/* ═══════════════════════════════════════════════════════════
   LIGHTBOX — zoom de imagen al hacer clic (lib/custom/lightbox.js)
   ═══════════════════════════════════════════════════════════ */
#img-lightbox {
    display         : none;
    position        : fixed;
    inset           : 0;
    z-index         : 9999;
    background      : rgba(0, 0, 0, 0.92);
    cursor          : zoom-out;
    align-items     : center;
    justify-content : center;
}
#img-lightbox.active          { display: flex; }
#img-lightbox img {
    max-width     : 90vw;
    max-height    : 90vh;
    object-fit    : contain;
    border-radius : 4px;
    box-shadow    : 0 0 60px rgba(0,0,0,0.8);
}
.reveal .slides section img   { cursor: zoom-in; }
.reveal .slides .slide-bg img { cursor: default; }

/* ═══════════════════════════════════════════════════════════
   NARRATOR — panel TTS de speaker notes (lib/custom/narrator.js)
   ═══════════════════════════════════════════════════════════ */
#narrator-panel {
    position        : fixed;
    bottom          : 2.8rem;
    left            : 1rem;
    z-index         : 100;
    display         : flex;
    gap             : 0.2rem;
    align-items     : center;
    background      : rgba(0, 0, 0, 0.78);
    border          : 1px solid rgba(255, 145, 0, 0.40);
    border-radius   : 6px;
    padding         : 0.2rem 0.45rem;
    backdrop-filter : blur(6px);
    transition      : border-color 0.2s;
}
#narrator-panel.narrator-muted { border-color: rgba(255, 255, 255, 0.15); }
#nrr-label {
    font-size    : 0.75rem;
    opacity      : 0.55;
    margin-right : 0.1rem;
    user-select  : none;
    pointer-events: none;
}
#narrator-panel button {
    background    : none;
    border        : none;
    color         : #ccc;
    font-size     : 0.8rem;
    line-height   : 1;
    cursor        : pointer;
    padding       : 0.2rem 0.3rem;
    border-radius : 3px;
    transition    : background 0.15s, color 0.15s;
}
#narrator-panel button:hover:not(:disabled) {
    background : rgba(255, 145, 0, 0.25);
    color      : #fff;
}
#narrator-panel button:disabled {
    opacity : 0.2;
    cursor  : default;
}
