/* ==========================================================================
   cka-print.css — versión para imprimir y estudiar en papel.
   Se enlaza con media="print", así que no afecta nada en pantalla.

   Criterios:
     · blanco y negro puro (nada de fondos oscuros que se coman el tóner)
     · una sola columna: en A4 la grilla práctica/teoría queda ilegible
     · fuera lo interactivo (nav, selector de idioma, visores, checkboxes)
     · nada de bloques partidos entre páginas
     · nada que dependa de "imprimir gráficos de fondo": esa opción viene
       apagada en el Ctrl+P de Chrome, así que ningún texto va en blanco
       sobre un fondo de color — se usan bordes en su lugar
   ========================================================================== */

@page {
  size: A4 portrait;
  margin: 16mm 15mm 15mm;
}

/* --------------------------------------------------------------- lo que se va */
.cka-topnav,
.cka-lang,
.cka-pdf,                   /* en el PDF no tiene sentido un link al PDF */
.viz,                       /* los visores son interactivos: no dicen nada en papel */
.lab-meta,
.ex-done,
.lab-reset,
.mf-copy,                   /* en papel no se copia nada: queda la URL escrita */
.sync-bar { display: none !important; }

/* manifest: en pantalla es una barra oscura; en papel, la URL a la vista */
.mf { background: none !important; border: 1px solid #000 !important; padding: 5pt 7pt !important; }
.mf code { color: #000 !important; white-space: normal !important; font-size: 8.5pt !important; }
.mf-tag {
  background: none !important; color: #000 !important; font-size: 7pt !important;
  border: 0.75pt solid #000 !important; padding: 0.5pt 3pt !important;
}

/* --------------------------------------------------------------------- página */
html, body {
  background: #fff !important;
  color: #000 !important;
  font-size: 10.5pt !important;
  padding: 0 !important;
  margin: 0 !important;
}
.page { max-width: none !important; margin: 0 !important; }

/* Tipografía de papel: se abandonan las webfonts.
   Fraunces es una display face que a 10pt se empasta, y en el rasterizado del
   PDF los tamaños chicos de Fraunces/Inter/JetBrains salen sucios. Las fuentes
   del sistema imprimen limpias, están en cualquier visor y bajan el peso del
   archivo a un tercio. Se reemplazan por variable, así aplica a todo el sitio. */
:root {
  --serif: Georgia, 'Times New Roman', serif !important;
  --sans: 'Segoe UI', Helvetica, Arial, sans-serif !important;
  --mono: Consolas, 'DejaVu Sans Mono', 'Courier New', monospace !important;
}
body, p, li, .intro, .callout, .claves, .ex-body, .sol-body, .checkpoint, .toc-card .desc {
  font-family: Georgia, 'Times New Roman', serif !important;
}
p, li, td, th, div, span { color: #1a1a1a !important; }
strong, b { color: #000 !important; font-weight: 700 !important; }
a { color: #000 !important; text-decoration: none !important; }

/* --------------------------------------------------------------- encabezado */
.hero {
  border-bottom: 2pt solid #000 !important;
  padding-bottom: 10pt !important;
  margin-bottom: 14pt !important;
}
.hero h1 { font-size: 23pt !important; letter-spacing: -0.2pt !important; margin-bottom: 6pt !important; }
.hero h1 em { color: #000 !important; }
.hero .subtitle { font-size: 11.5pt !important; color: #333 !important; max-width: none !important; }
.hero .eyebrow { font-size: 8pt !important; color: #555 !important; letter-spacing: 1.2pt !important; margin-bottom: 6pt !important; }
.hero .eyebrow .k8s,
.hero .eyebrow .weight {
  background: none !important; color: #555 !important;
  border: 0.5pt solid #999 !important; padding: 0.5pt 5pt !important; font-weight: 400 !important;
}
.hero-meta { gap: 16pt !important; margin-top: 10pt !important; }
.hero-meta div { font-size: 7.5pt !important; color: #666 !important; }
.hero-meta strong { font-size: 11pt !important; }

.intro {
  background: none !important;
  border-left: 2pt solid #000 !important;
  padding: 8pt 0 8pt 12pt !important;
  margin-bottom: 14pt !important;
  font-size: 11pt !important;
  color: #1a1a1a !important;
}

/* --------------------------------------------------------------------- índice */
.toc { gap: 0 !important; display: block !important; margin-bottom: 0 !important; break-after: page; }
.toc-card {
  border: none !important; border-bottom: 0.5pt solid #bbb !important;
  border-radius: 0 !important; background: none !important;
  padding: 5pt 0 !important; display: flex !important; gap: 10pt !important; align-items: baseline;
}
.toc-card .num { color: #000 !important; font-size: 13pt !important; min-width: 30pt; }
.toc-card .title { font-size: 11pt !important; flex: 0 0 38%; }
.toc-card .desc { font-size: 9.5pt !important; color: #555 !important; }

/* ------------------------------------------------------------------ secciones */
.seccion { margin-bottom: 20pt !important; break-before: page; }
.seccion:first-of-type { break-before: auto; }
.seccion-header {
  border-bottom: 1.5pt solid #000 !important;
  padding-bottom: 6pt !important; margin-bottom: 12pt !important;
  break-after: avoid;
}
.seccion-num { font-size: 30pt !important; color: #000 !important; }
.seccion-info h2 { font-size: 16pt !important; }
.seccion-info .label { font-size: 7.5pt !important; color: #666 !important; }
.seccion-info .time,
.seccion-info .where { font-size: 9pt !important; color: #555 !important; }

/* Una sola columna: en A4 la grilla 1.5fr/1fr deja renglones de 6 palabras. */
.two-col { display: block !important; }
.col-practica, .col-teoria { margin-bottom: 12pt; }
.col-label {
  background: none !important; color: #000 !important;
  border-bottom: 1pt solid #000 !important; border-radius: 0 !important;
  padding: 0 0 2pt !important; margin: 10pt 0 8pt !important;
  display: block !important; font-size: 8pt !important; letter-spacing: 1.2pt !important;
  break-after: avoid;
}

h3, h4 { break-after: avoid; color: #000 !important; }
h3 { font-size: 12.5pt !important; margin: 10pt 0 4pt !important; }
h4 { font-size: 10.5pt !important; font-weight: 700 !important; margin: 9pt 0 3pt !important;
     font-family: var(--sans) !important; letter-spacing: -0.1pt; }
p { margin-bottom: 5pt !important; orphans: 3; widows: 3; }
ul { list-style: none !important; margin: 4pt 0 8pt 4pt !important; }
ol { margin: 4pt 0 8pt 16pt !important; }
li { margin-bottom: 2pt !important; }
ul > li { padding-left: 11pt; position: relative; }
ul > li::before { content: "—"; position: absolute; left: 0; color: #666; }

/* --------------------------------------------------------------------- código */
pre {
  background: #fff !important;
  color: #000 !important;
  border: 0.5pt solid #ccc !important;
  border-left: 2pt solid #000 !important;
  border-radius: 0 !important;
  padding: 7pt 9pt !important;
  font-size: 8.5pt !important;
  line-height: 1.45 !important;
  break-inside: avoid;
  white-space: pre-wrap;          /* que no se corten los comandos largos */
  word-break: break-word;
}
code { background: none !important; color: #000 !important; padding: 0 1pt !important; font-size: 9pt !important; }
pre code { font-size: inherit !important; }

/* la sintaxis se distingue por peso y gris, no por color */
pre .kw  { color: #000 !important; font-weight: 700 !important; }
pre .cmd { color: #000 !important; font-weight: 700 !important; }
pre .str { color: #444 !important; }
pre .com { color: #5a5a5a !important; font-style: italic !important; }
pre .flag{ color: #444 !important; font-weight: 600 !important; }

/* -------------------------------------------------------------------- avisos */
.callout {
  background: none !important;
  border: 0.5pt solid #999 !important;
  border-left: 2pt solid #000 !important;
  border-radius: 0 !important;
  color: #000 !important;
  padding: 7pt 10pt !important;
  margin: 8pt 0 !important;
  break-inside: avoid;
}
.callout .icon { color: #000 !important; }
.callout-warn { border-left-style: double !important; border-left-width: 3pt !important; }
.callout-exam { border-left-style: solid !important; }
.callout-exam::before {
  content: "EXAMEN";
  position: absolute; top: -4.5pt; left: 9pt;
  font-family: var(--mono); font-size: 7pt; font-weight: 700; letter-spacing: 1.2pt; color: #333;
  background: #fff; padding: 0 4pt;
}
.callout-exam { position: relative; margin-top: 15pt !important; }

/* -------------------------------------------------------------------- tablas */
.data-table { border: 0.5pt solid #666 !important; border-radius: 0 !important; break-inside: avoid; }
.data-table table { font-size: 8.5pt !important; }
.data-table th {
  background: #eee !important; color: #000 !important;
  border-bottom: 0.5pt solid #666 !important; font-size: 7.5pt !important;
}
.data-table td { border-bottom: 0.5pt solid #ccc !important; color: #1a1a1a !important; background: none !important; }
.data-table td.good, .data-table td.yes, .data-table td.hl { background: none !important; color: #000 !important; font-weight: 700 !important; }
.data-table td.no { background: none !important; color: #000 !important; font-weight: 700 !important; font-style: italic !important; }

/* ------------------------------------------------------- práctica (si la hay) */
.lab .ex, .ex {
  border: 0.5pt solid #666 !important; border-radius: 0 !important;
  background: none !important; break-inside: avoid; margin-bottom: 10pt !important;
}
.ex.done { border-color: #666 !important; }
.ex-head { background: #f2f2f2 !important; border-bottom: 0.5pt solid #666 !important; padding: 6pt 9pt !important; }
.ex.done .ex-head { background: #f2f2f2 !important; }
.ex-tag, .ex.done .ex-tag, .ex-tag.t {
  background: none !important; color: #000 !important; font-size: 8pt !important;
  border: 1pt solid #000 !important; padding: 0.5pt 3.5pt !important; font-weight: 700 !important;
}
.ex-head h3 { font-size: 11.5pt !important; margin: 0 !important; }
.ex-time { color: #666 !important; }
.ex-body { padding: 8pt 10pt 2pt !important; }
.sol { border-top: 0.5pt dashed #999 !important; }
.sol > summary {
  background: none !important; color: #000 !important;
  border-bottom: 0.5pt solid #ccc !important;
  padding: 5pt 10pt !important; font-size: 8pt !important; list-style: none;
}
.sol > summary::before { content: "▾ " !important; transform: none !important; }
.sol-body { padding: 4pt 10pt 8pt !important; }
.claves { background: none !important; border-left: 2pt solid #000 !important; border-radius: 0 !important; padding: 5pt 10pt !important; }
.claves > .claves-t { color: #000 !important; }
.selfcheck { background: none !important; border: 0.5pt solid #000 !important; border-radius: 0 !important; break-inside: avoid; }
.selfcheck li::before { color: #000 !important; }

/* --------------------------------------------------------------------- cierre */
.checkpoint {
  background: none !important; color: #000 !important;
  border: 0.5pt solid #000 !important; border-radius: 0 !important;
  padding: 8pt 10pt !important; font-size: 9pt !important; break-inside: avoid;
}
.checkpoint::before { color: #000 !important; }
.outro {
  border-top: 1.5pt solid #000 !important;
  color: #555 !important; font-size: 10pt !important;
  margin-top: 20pt !important; padding-top: 8pt !important;
}

/* --------------------------------------------------- extras propios de módulos */
.mental-model, .mental-model * { background: none !important; color: #000 !important; }
.mental-model { border: 1pt solid #000 !important; border-radius: 0 !important; break-inside: avoid; padding: 12pt 14pt !important; }
.mental-model .mm-label { color: #666 !important; }
.mental-model .mm-formula { font-size: 17pt !important; }
.mental-model .mm-formula em { font-style: italic !important; font-weight: 700 !important; }
.mental-model .mm-note { color: #333 !important; font-family: Georgia, serif !important; }
.mm-box, .mm-who, .mm-bind, .mm-what { background: none !important; border: 0.5pt solid #666 !important; }
.mm-box .mm-label { color: #000 !important; }
.mm-arrow { color: #000 !important; }
.arch, .vm-box, .vm-box.worker, .snap-section {
  background: none !important; border-color: #666 !important; break-inside: avoid;
}
.run-on, .run-all, .run-cp, .run-workers {
  background: none !important; color: #000 !important;
  border: 0.5pt solid #666 !important; border-radius: 0 !important;
}
.step { border-left-color: #999 !important; break-inside: avoid; }
.step::before { background: none !important; color: #000 !important; border: 0.75pt solid #000 !important; }

/* --------------------------------------------------------------- sello final
   Lo agrega cka-shell.js. En pantalla no existe; en papel cierra el documento
   con título, idioma y fecha de impresión, así una copia vieja se delata.     */
.print-stamp {
  display: block !important;
  margin-top: 10mm;
  padding-top: 3mm;
  border-top: 1px solid #000;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 7.5pt;
  color: #444;
  text-align: center;
  letter-spacing: 0.4px;
  break-inside: avoid;
}