@import url('tokens.css');

/* PDF page numbering and author footer */
.pdf-meta-author {
  position: running(doc-author);
  display: inline;
  font-size: 8pt;
  color: #9ca3af;
  font-family: "Segoe UI", "DejaVu Sans", Arial, sans-serif;
}

.pdf-meta-firma {
  position: running(doc-firma);
  display: inline;
  font-size: 8pt;
  color: #9ca3af;
  font-family: "Poppins", "Segoe UI", "DejaVu Sans", Arial, sans-serif;
}

.pdf-meta-linkedin {
  position: running(doc-linkedin);
  display: inline;
  font-size: 8pt;
  color: #9ca3af;
  font-family: "Segoe UI", "DejaVu Sans", Arial, sans-serif;
}

.pdf-meta-linkedin-icon {
  display: inline-block;
  margin: 0 0.18rem 0 0;
  padding: 0.02rem 0.18rem;
  border-radius: 999px;
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  background: #0a66c2;
}

@page {
  size: A4;
  margin: 16mm 14mm 24mm;

  @bottom-left {
    content: element(doc-author);
    font-size: 8pt;
    color: #9ca3af;
    font-family: "Segoe UI", "DejaVu Sans", Arial, sans-serif;
  }

  @bottom-center {
    content: element(doc-firma);
    font-size: 8pt;
    color: #9ca3af;
    font-family: "Segoe UI", "DejaVu Sans", Arial, sans-serif;
  }

  @bottom-right {
    content: "Pagina " counter(page) "/" counter(pages);
    font-size: 8pt;
    color: #9ca3af;
    font-family: "Segoe UI", "DejaVu Sans", Arial, sans-serif;
  }
}

@page:left {
  margin-left: 18mm;
  margin-right: 14mm;
}

@page:right {
  margin-left: 14mm;
  margin-right: 18mm;
}

@page:first {
  /* La primera pagina va limpia de metadatos: el nombre del autor ya esta en
     el cuerpo del documento y repetirlo bajo el titulo sobra. */
  @bottom-left {
    content: "";
  }

  /* La firma SI va en la primera pagina, y es deliberado.

     Con `content: ""` aqui, un documento de UNA sola pagina -que son la
     mayoria de los apuntes y las guias- no llevaba firma en ningun sitio: la
     linea existia y no la veia nadie. Y la primera es justo la pagina que mas
     se mira.

     Son 8pt en gris dentro del margen inferior, asi que no ensucia una
     portada. Marca de agua sobre el texto NO: un material de un certificado
     de profesionalidad puede acabar en una inspeccion o en un expediente de
     FUNDAE, y una filigrana atravesando la pagina lo haria inservible. */
  @bottom-center {
    content: element(doc-firma);
    font-size: 8pt;
    color: #9ca3af;
    font-family: "Poppins", "Segoe UI", "DejaVu Sans", Arial, sans-serif;
  }

  @bottom-right {
    content: "Pagina " counter(page) "/" counter(pages);
  }
}

/* Author field in forms */
.author-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.author-field label {
  font-size: 0.85rem;
  color: var(--color-text-muted, #6b7280);
}

.author-field .optional {
  font-weight: 400;
  font-style: italic;
  opacity: 0.75;
}

.author-field input[type="text"] {
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: var(--radius-sm, 4px);
  font-size: 0.9rem;
  background: var(--color-surface, #fff);
  color: var(--color-text, #111827);
  width: 100%;
  max-width: 360px;
}

/* Shared visual rules for preview and generated PDF. */
.markdown-sheet {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.8rem;
  overflow: auto;
  line-height: 1.65;
  font-size: 16px;
  font-family: var(--font-body);
}

.pdf-mode,
.pdf-mode .markdown-sheet,
.pdf-mode .markdown-sheet p,
.pdf-mode .markdown-sheet li,
.pdf-mode .markdown-sheet a,
.pdf-mode .markdown-sheet td,
.pdf-mode .markdown-sheet th,
.pdf-mode .markdown-sheet span {
  font-family: "Poppins", "Segoe UI", "DejaVu Sans", Arial, Helvetica, sans-serif;
  letter-spacing: normal;
  word-spacing: normal;
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "kern" 0, "liga" 0, "clig" 0;
}

.pdf-mode .markdown-sheet h1,
.pdf-mode .markdown-sheet h2,
.pdf-mode .markdown-sheet h3,
.pdf-mode .markdown-sheet h4,
.pdf-mode .markdown-sheet h5,
.pdf-mode .markdown-sheet h6 {
  font-family: "Poppins", "Segoe UI", "DejaVu Sans", Arial, Helvetica, sans-serif;
}

/* inline-block y no inline-flex: WeasyPrint trata un inline-flex dentro de un
   titulo como un bloque a todo lo ancho, y el icono salia en una banda gris
   ENCIMA del titulo en vez de a su lado. Quien lo sufria lo esquivaba
   escribiendo «## 📋Titulo» sin espacio, que no se reconoce como icono. */
.pdf-mode .markdown-sheet .heading-glyph {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  min-width: 1.28em;
  margin-right: 0.5rem;
  color: #0F3D3E;
  line-height: 1;
  border-radius: 999px;
  background: rgba(15, 61, 62, 0.09);
  box-shadow: inset 0 0 0 0.5pt rgba(15, 61, 62, 0.12);
}

.pdf-mode .markdown-sheet h1 .heading-glyph {
  font-size: 1.22em;
  padding: 0.18em 0.34em;
}

.pdf-mode .markdown-sheet h2 .heading-glyph,
.pdf-mode .markdown-sheet h3 .heading-glyph {
  font-size: 1.06em;
  padding: 0.14em 0.28em;
}

/* Keep icons proportionate for print, even if source markdown uses fa-2x/fa-3x helpers. */
.pdf-mode .markdown-sheet i[class^="fa"],
.pdf-mode .markdown-sheet i[class*=" fa-"] {
  font-size: 0.92em !important;
  line-height: 1;
  vertical-align: -0.06em;
}

/* En pt, que es como se mide la letra impresa. Estaba a 11.5px, que en
   WeasyPrint son 8,6 pt: en pantalla pasaba, en papel no se leia. 10,5 pt es
   cuerpo de libro o de apuntes; todo lo demas va en em y escala con esto. */
.pdf-mode .markdown-sheet {
  font-size: 10.5pt;
  color: #1f2937;
  line-height: 1.66;
}

.pdf-mode .markdown-sheet a {
  color: #0F3D3E;
  text-decoration: none !important;
}

.pdf-mode .markdown-sheet .toc a,
.pdf-mode .markdown-sheet nav a,
.pdf-mode .markdown-sheet ul a {
  color: #0F3D3E;
  text-decoration: none !important;
}

.pdf-mode .markdown-sheet .toc {
  margin: 0 0 1.1rem;
}

.pdf-mode .markdown-sheet .toc > ul {
  margin: 0.25rem 0 0.8rem;
  padding-left: 0;
}

.pdf-mode .markdown-sheet .toc ul {
  list-style-position: outside;
}

.pdf-mode .markdown-sheet .toc ul ul {
  margin-top: 0.2rem;
  padding-left: 2.15rem;
  list-style-type: circle;
}

.pdf-mode .markdown-sheet .toc ul ul ul {
  padding-left: 2.9rem;
  list-style-type: square;
}

.pdf-mode .markdown-sheet .toc li {
  margin: 0.3rem 0;
}

.pdf-mode .markdown-sheet .toc > ul > li {
  list-style-type: disc;
}

.pdf-mode .markdown-sheet .toc > ul > li > ul > li {
  list-style-type: circle;
}

.pdf-mode .markdown-sheet .toc > ul > li > ul > li > ul > li {
  list-style-type: square;
}

.pdf-mode .markdown-sheet h1[id="indice"] + ul,
.pdf-mode .markdown-sheet h2[id="indice"] + ul,
.pdf-mode .markdown-sheet h3[id="indice"] + ul {
  margin-top: 0.35rem;
  padding-left: 0;
}

.pdf-mode .markdown-sheet h1[id="indice"] + ul ul,
.pdf-mode .markdown-sheet h2[id="indice"] + ul ul,
.pdf-mode .markdown-sheet h3[id="indice"] + ul ul {
  padding-left: 2.15rem;
  margin-top: 0.2rem;
  list-style-type: circle;
}

.pdf-mode .markdown-sheet h1[id="indice"] + ul ul ul,
.pdf-mode .markdown-sheet h2[id="indice"] + ul ul ul,
.pdf-mode .markdown-sheet h3[id="indice"] + ul ul ul {
  padding-left: 2.9rem;
  list-style-type: square;
}

.pdf-mode .markdown-sheet h1[id="indice"] + ul > li > a,
.pdf-mode .markdown-sheet h2[id="indice"] + ul > li > a,
.pdf-mode .markdown-sheet h3[id="indice"] + ul > li > a {
  font-size: 1.03em;
  font-weight: 600;
}

.pdf-mode .markdown-sheet h1[id="indice"] + ul ul > li > a,
.pdf-mode .markdown-sheet h2[id="indice"] + ul ul > li > a,
.pdf-mode .markdown-sheet h3[id="indice"] + ul ul > li > a {
  font-size: 0.94em;
  font-weight: 500;
}

.pdf-mode .markdown-sheet h1[id="indice"] + ul ul ul > li > a,
.pdf-mode .markdown-sheet h2[id="indice"] + ul ul ul > li > a,
.pdf-mode .markdown-sheet h3[id="indice"] + ul ul ul > li > a {
  font-size: 0.9em;
  font-weight: 500;
}

.pdf-mode .markdown-sheet .toc > ul > li > a {
  font-size: 1.02em;
  font-weight: 600;
}

.pdf-mode .markdown-sheet .toc ul ul > li > a {
  font-size: 0.95em;
  font-weight: 500;
}

.pdf-mode .markdown-sheet .toc ul ul ul > li > a {
  font-size: 0.9em;
  font-weight: 500;
}

.pdf-mode .markdown-sheet p {
  margin: 0 0 0.7rem;
  color: #1f2937;
  text-align: justify;
  hyphens: auto;
}

.pdf-mode .markdown-sheet ul,
.pdf-mode .markdown-sheet ol {
  margin: 0 0 0.85rem;
  padding-left: 1.3rem;
}

.pdf-mode .markdown-sheet li {
  margin-bottom: 0.3rem;
}

.pdf-mode .markdown-sheet h1 {
  font-size: 1.5em;
  margin: 0 0 0.95rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid #d1d5db;
}

/* Book-like title page when document starts with an h1. */
.pdf-mode .markdown-sheet > h1:first-child {
  margin-top: 24vh;
  margin-bottom: 0.75rem;
  font-size: 2.1em;
  text-align: center;
  border-bottom: 0;
  letter-spacing: 0.01em;
}

.pdf-mode .markdown-sheet > h1:first-child + p {
  text-align: center;
  color: #6b7280;
  margin-bottom: 2.5rem;
}

.pdf-mode .markdown-sheet h2 {
  font-size: 1.18em;
  margin: 1.25rem 0 0.75rem;
}

.pdf-mode .markdown-sheet h3 {
  font-size: 1.1em;
  margin: 1rem 0 0.65rem;
}

.pdf-mode .markdown-sheet h4 { font-size: 1em; }
.pdf-mode .markdown-sheet h5 { font-size: 1em; }
.pdf-mode .markdown-sheet h6 { font-size: 1em; }

.pdf-mode .markdown-sheet code,
.pdf-mode .markdown-sheet pre,
.pdf-mode .markdown-sheet kbd,
.pdf-mode .markdown-sheet samp {
  font-family: "Consolas", "Cascadia Code", "Courier New", monospace;
  letter-spacing: normal;
  word-spacing: normal;
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "kern" 0, "liga" 0, "clig" 0;
}

.markdown-sheet p,
.markdown-sheet li,
.markdown-sheet blockquote {
  orphans: 3;
  widows: 3;
}

.markdown-sheet h1,
.markdown-sheet h2,
.markdown-sheet h3,
.markdown-sheet h4,
.markdown-sheet h5,
.markdown-sheet h6 {
  line-height: 1.3;
  break-after: avoid-page;
  page-break-after: avoid;
  break-inside: avoid;
  page-break-inside: avoid;
}

.markdown-sheet p,
.markdown-sheet li,
.markdown-sheet ul,
.markdown-sheet ol,
.markdown-sheet table {
  break-inside: auto;
  page-break-inside: auto;
}

.markdown-sheet code {
  font-family: "Consolas", "Cascadia Code", "Courier New", monospace;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.28rem;
  color: #0F3D3E;
  font-size: 0.88em;
}

.pdf-mode .markdown-sheet pre {
  background: #E6FAF7 !important;
  border-left: 3px solid #0F3D3E !important;
  border-radius: 10px;
  padding: 0.95rem 1rem;
}

.pdf-mode .markdown-sheet pre code {
  background: transparent !important;
  color: #0A2C2D;
  font-size: 0.88em;
  line-height: 1.45;
}

.markdown-sheet pre {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-radius: var(--radius-md);
  padding: 1rem;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  break-inside: avoid-page;
  page-break-inside: avoid;
  border-left: 4px solid var(--color-primary);
}

.markdown-sheet table {
  width: 100%;
  border-collapse: collapse;
  break-inside: auto;
  page-break-inside: auto;
  margin: 0.75rem 0 1rem;
}

.markdown-sheet th {
  background: #E6FAF7;
  color: #0F3D3E;
  font-weight: 700;
}

.markdown-sheet tbody tr:nth-child(even) {
  background: #f8fafc;
}

.markdown-sheet thead {
  display: table-header-group;
}

.markdown-sheet tfoot {
  display: table-footer-group;
}

.markdown-sheet tr,
.markdown-sheet img,
.markdown-sheet svg,
.markdown-sheet blockquote,
.markdown-sheet figure {
  break-inside: avoid;
  page-break-inside: avoid;
}

.markdown-sheet th,
.markdown-sheet td {
  border: 1px solid var(--color-surface-alt);
  padding: 0.45rem 0.5rem;
}

.markdown-sheet blockquote {
  margin: 0.9rem 0;
  padding: 0.35rem 0.9rem;
  /* Acento de CreateLab (#E11D48). Literal y no var(): esto lo pinta el
     generador de PDF, y un var() sin resolver dejaria el borde invisible en
     el documento de alguien sin que nos enterasemos. */
  border-left: 3px solid #E11D48;
  background: #FFF1F4;
  color: #374151;
}

/* Cajas de los documentos de Stride (`!!! practica`, `!!! reto`). Colores
   literales por lo mismo que la cita: los pinta WeasyPrint. Practica en
   turquesa de Xestio, reto en naranja: se distinguen sin leer el titulo. */
.markdown-sheet .admonition {
  margin: 0.8rem 0;
  padding: 0.55rem 0.9rem 0.6rem;
  border: 1px solid #CDEBE6;
  border-left: 4px solid #0D9488;
  border-radius: 6px;
  background: #F0FAF8;
  break-inside: avoid;
  page-break-inside: avoid;
}

.markdown-sheet .admonition.reto {
  border-color: #FFD9CC;
  border-left-color: #E03400;
  background: #FFF5F1;
}

.markdown-sheet .admonition > p {
  margin: 0;
}

.markdown-sheet .admonition > .admonition-title {
  margin-bottom: 0.2rem;
  font-weight: 700;
  color: #0A6B62;
}

.markdown-sheet .admonition.reto > .admonition-title {
  color: #B02A00;
}

.markdown-sheet img,
.markdown-sheet svg {
  max-width: 100%;
  height: auto;
}

/* Imagen que no se ha podido descargar: se ve el hueco y el motivo, en vez de
   desaparecer en silencio y parecer que la aplicación no admite imágenes. */
.markdown-sheet .img-error {
  display: block;
  margin: 0.9rem 0;
  padding: 0.6rem 0.8rem;
  border: 1px dashed #e08a3c;
  border-radius: 6px;
  background: #fff7ed;
  color: #7c4a12;
  font-size: 0.82rem;
  line-height: 1.45;
}

.markdown-sheet .img-error-url {
  color: #9a6524;
  font-family: "Consolas", "Cascadia Code", "Courier New", monospace;
  font-size: 0.76rem;
  word-break: break-all;
}

@media print {
  @page {
    margin: 16mm 14mm 18mm;
  }

  body {
    background: var(--color-surface);
  }

  .layout {
    width: 100%;
    margin: 0;
  }

  .hero,
  .card.actions-top {
    display: none;
  }

  .markdown-sheet {
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }

  .markdown-sheet h1,
  .markdown-sheet h2,
  .markdown-sheet h3,
  .markdown-sheet h4,
  .markdown-sheet h5,
  .markdown-sheet h6 {
    break-after: avoid-page;
    page-break-after: avoid;
  }

  .markdown-sheet ul,
  .markdown-sheet ol {
    padding-left: 1.25rem;
  }

  .markdown-sheet ul,
  .markdown-sheet ol,
  .markdown-sheet p {
    break-inside: auto;
    page-break-inside: auto;
  }
}

/* Fórmulas LaTeX (app/services/formulas.py): SVG dentro de un <img>, con el
   ancho, el alto y la bajada sobre la línea base puestos en línea en `em`, así
   que acompañan al tamaño del texto. Aquí solo el bloque destacado. */
.markdown-sheet img.math {
  display: inline-block;
}
.markdown-sheet .math-display {
  text-align: center;
  margin: 0.9rem 0;
}
.markdown-sheet code.math-error {
  white-space: pre-wrap;
}