/*
 * LA HOJA. Este archivo lo comparten el preview en pantalla y la impresion.
 *
 * Si estas dos cosas divergen, se pierde la promesa central del producto. Por
 * eso las medidas van en mm y pt (unidades de papel) y no hay NADA aca que
 * dependa del viewport.
 *
 * Regla al editar: si un cambio afecta como se ve el CV, va en este archivo.
 * Si afecta al chrome de la app (barras, botones, listas), va en base.css.
 */

.paper {
  /*
   * El JS fija estas variables desde los ajustes del documento y desde
   * PAGE_MARGINS (paginate.mjs), que es la unica fuente de verdad de los
   * margenes: los usan el layout, la paginacion y la regla @page.
   */
  --paper-width: 210mm;
  --paper-height: 297mm;
  --paper-margin-y: 16mm;
  --paper-margin-x: 14mm;

  /* Tipografia. El JS sobrescribe estas variables con los ajustes. */
  --cv-font-size: 10pt;
  --cv-line-height: 1.4;
  --cv-heading-scale: 1;
  --cv-heading-weight: 600;
  --cv-body-weight: 400;
  --cv-text-opacity: 1;
  /* Los tres colores llegan desde los ajustes del documento. */
  --cv-accent: #10454f;
  --cv-link: #2d8b89;
  --cv-muted: #686d76;

  --cv-ink: rgba(0, 0, 0, var(--cv-text-opacity));
  --cv-ink-muted: var(--cv-muted);

  /*
   * Ritmo vertical: TODO el espaciado del documento es un multiplo de esta
   * unidad. Antes habia valores sueltos (0.6em, 0.8em, 0.9em, 1.6em) que no
   * guardaban relacion entre si; con una escala, el documento respira parejo.
   * Va en em del cuerpo, asi que escala con el tamaño de letra elegido.
   */
  --cv-rhythm: 0.55em;

  width: var(--paper-width);
  padding: var(--paper-margin-y) var(--paper-margin-x);
  margin: 0 auto;
  background: #fff;
  color: var(--cv-ink);
  /*
   * La tipografia del DOCUMENTO, que el usuario elige por documento. Es
   * independiente de la del chrome de la app (--font-sans): un CV en Alliance
   * no cambia la barra de herramientas.
   */
  font-family: var(--cv-font-family, var(--font-sans));
  font-size: var(--cv-font-size);
  font-weight: var(--cv-body-weight);
  line-height: var(--cv-line-height);
}

/* Contenedor del contenido. La paginacion mide SUS hijos directos. */
.paper-flow > * {
  margin: 0 0 var(--cv-rhythm);
}

.paper-flow > *:first-child {
  margin-top: 0;
}

/* --- Contrato de plantilla ------------------------------------------------- */

.cv-photo-wrap {
  float: right;
  margin: 0 0 var(--cv-rhythm) calc(var(--cv-rhythm) * 2);
}

.cv-photo {
  display: block;
  /* 17.4mm es el tamaño medido en el CV de referencia. */
  width: 17.5mm;
  height: 17.5mm;
  object-fit: cover;
  border-radius: 0; /* esquinas rectas: sin bordes redondeados en todo el producto */
}

/*
 * Los multiplicadores salen del CV de referencia, con el cuerpo (10pt) como
 * base: nombre 2.4x = 24pt, seccion 1.4x = 14pt, entrada y rol 1.2x = 12pt,
 * contacto y fecha 1.0x = 10pt.
 */
.cv-name {
  font-size: calc(var(--cv-font-size) * 2.4 * var(--cv-heading-scale));
  font-weight: var(--cv-heading-weight);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: calc(var(--cv-rhythm) * 0.4);
  color: var(--cv-ink);
}

/* El rol bajo el nombre lleva el color de acento, igual que los nombres de
   empresa: es la contraparte de la identidad, no un dato secundario. */
.cv-role {
  font-size: calc(var(--cv-font-size) * 1.2);
  color: var(--cv-accent);
  margin-bottom: calc(var(--cv-rhythm) * 2);
}

.cv-contact {
  font-size: var(--cv-font-size);
  margin-bottom: calc(var(--cv-rhythm) * 0.3);
}

.cv-contact-label {
  font-weight: 600;
  color: var(--cv-muted);
}

/* Un email o un portafolio se ven como enlaces aunque se escriban sin https. */
.cv-contact-link {
  color: var(--cv-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.cv-section {
  font-size: calc(var(--cv-font-size) * 1.4 * var(--cv-heading-scale));
  font-weight: var(--cv-heading-weight);
  /* En em de la propia seccion (1.4x del cuerpo), asi que el aire de arriba
     crece con ella y la jerarquia se mantiene a cualquier tamaño. */
  margin-top: 2em;
  margin-bottom: 0.7em;
  padding-bottom: 0.25em;
  border-bottom: 1px solid #d4d4d4;
  clear: both; /* una seccion nunca arranca al costado de la foto */
}

.cv-entry {
  font-size: calc(var(--cv-font-size) * 1.2);
  font-weight: var(--cv-heading-weight);
  margin-top: 1.2em;
  margin-bottom: 0;
}

/* La primera entrada de una seccion no suma su propio aire al de la seccion. */
.cv-section + .cv-entry {
  margin-top: 0.5em;
}

.cv-entry-primary {
  color: var(--cv-accent);
}

.cv-entry-sep,
.cv-entry-secondary {
  font-weight: 400;
  font-style: italic;
  color: var(--cv-muted);
}

/* En el CV de referencia la fecha es negra, no gris: es un dato, no una nota
   al margen. Lo que la separa del titulo es la jerarquia de tamaño. */
.cv-date {
  font-size: var(--cv-font-size);
  color: var(--cv-ink);
  margin-top: 0; /* pegada al H3, sin margen superior */
  margin-bottom: calc(var(--cv-rhythm) * 0.8);
}

/* --- Markdown estandar (la degradacion elegante cae aca) ------------------- */

.paper-flow ul,
.paper-flow ol {
  padding-left: 1.2em;
}

.paper-flow li {
  margin-bottom: calc(var(--cv-rhythm) * 0.4);
}

.paper-flow a {
  color: var(--cv-link);
  text-decoration: underline;
}

.paper-flow strong {
  font-weight: 600;
}

.paper-flow code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.paper-flow blockquote {
  margin-left: 0;
  padding-left: 1em;
  border-left: 2px solid #d4d4d4;
  color: var(--cv-ink-muted);
}

.paper-flow hr {
  border: 0;
  border-top: 1px solid #d4d4d4;
}

.paper-flow img {
  max-width: 100%;
}

/* --- Impresion -------------------------------------------------------------
 *
 * Las mismas reglas de viudas y huerfanas que el JS dibuja en pantalla, pero
 * expresadas para el motor de impresion. Por eso los cortes coinciden.
 */

/*
 * El tamaño de @page lo inyecta el JS en #print-page-rule: el descriptor
 * `size` no acepta custom properties (var(--x) no funciona ahi), asi que no se
 * puede parametrizar desde CSS.
 */

@media print {
  /* Todo el chrome de la app desaparece: queda el documento y nada mas. */
  .app-bar,
  .editor-pane,
  .preview-toolbar,
  .settings-panel,
  .offer-panel,
  .doc-list-view,
  .page-gap {
    display: none !important;
  }

  html,
  body {
    background: #fff;
    margin: 0;
    padding: 0;
    height: auto;
    overflow: visible;
  }

  /* Los contenedores de scroll de la app no deben recortar la impresion. */
  .workspace,
  .preview-pane,
  .preview-scroll {
    display: block !important;
    position: static !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
  }

  .paper {
    width: auto;
    padding: 0; /* el margen lo pone @page */
    margin: 0;
    border: 0;
    /*
     * El JS le pone una min-height en linea para que el preview muestre
     * paginas completas. Al imprimir hay que anularla: la altura la decide
     * @page, y una min-height de 297mm dentro de una caja de 269mm forzaria
     * una pagina en blanco de mas.
     */
    min-height: 0 !important;
  }

  /*
   * Los cortes se fuerzan EXACTAMENTE donde el preview los dibujo, en vez de
   * dejar que el motor de impresion pagine por su cuenta. Es lo que hace que
   * lo impreso sea identico a lo que se vio en pantalla: si el navegador
   * cortara solo, una diferencia minima de redondeo movería una linea de
   * pagina y la promesa del producto se rompe.
   *
   * El margen de empuje se anula: al imprimir el corte es real, no dibujado.
   */
  .page-break-before {
    margin-top: 0 !important;
    break-before: page;
    page-break-before: always;
  }

  /* Red de seguridad para lo que el JS no haya empujado. */
  .cv-section,
  .cv-entry {
    break-after: avoid;
    page-break-after: avoid;
  }

  .cv-date {
    break-before: avoid;
    page-break-before: avoid;
  }

  li,
  .cv-contact,
  .cv-photo-wrap {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  a {
    color: var(--cv-link);
  }
}

/* El ajuste showPhoto apaga la foto en pantalla y en impresion. */
.paper[data-photo='off'] .cv-photo-wrap {
  display: none;
}

/* --- Carta de presentacion (kind = cover) ---------------------------------------
 *
 * Comparte membrete, tipografia, colores y paginacion con el CV. Solo cambia
 * lo que va debajo del membrete.
 */

.cv-letter-rule {
  margin: calc(var(--cv-rhythm) * 2.5) 0;
  border: 0;
  border-top: 1px solid #d4d4d4;
  clear: both; /* la linea nunca arranca al costado de la foto */
}

.cv-recipient {
  margin-bottom: calc(var(--cv-rhythm) * 0.3);
  color: var(--cv-ink);
}

/* La fecha de la carta va a la derecha, como en el papel. */
.cv-letter-date {
  margin-bottom: calc(var(--cv-rhythm) * 2);
  text-align: right;
  color: var(--cv-muted);
}

.cv-salutation {
  margin-top: calc(var(--cv-rhythm) * 2.5);
  margin-bottom: calc(var(--cv-rhythm) * 1.5);
}

.cv-closing {
  margin-top: calc(var(--cv-rhythm) * 2.5);
  margin-bottom: calc(var(--cv-rhythm) * 0.5);
}

.cv-signature {
  font-weight: 600;
  color: var(--cv-accent);
}

@media print {
  /* Saludo y firma no deben quedar solos al pie de una pagina. */
  .cv-salutation,
  .cv-closing {
    break-after: avoid;
    page-break-after: avoid;
  }

  .cv-recipient {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* --- Huecos a completar -----------------------------------------------------
 *
 * El resaltado usa SOLO propiedades que no cambian la caja de linea. Nada de
 * padding, border, outline ni display: cualquiera de esos movería los cortes de
 * pagina que dibuja paginate(), y con ellos la fidelidad entre preview e
 * impresion, que es la promesa central del producto.
 */

.cv-placeholder {
  background: #ffe9a8;
  box-shadow: 0 1px 0 0 #b58900; /* subrayado sin ocupar espacio */
}

@media print {
  /*
   * EL BLOQUEO DE VERDAD.
   *
   * El handler del boton no alcanza: Ctrl+P no pasa por ahi y `beforeprint` no
   * se puede cancelar. Sin esto, el bloqueo del spec §5 es falso y no nos
   * enteramos. Con huecos pendientes se imprime una hoja que lo explica, nunca
   * un CV con {{X}}% adentro.
   */
  body[data-placeholders='pending'] .paper {
    display: none !important;
  }

  body[data-placeholders='pending'] .print-blocked {
    display: block !important;
    padding: 40mm 20mm;
    font-family: var(--font-sans);
  }

  .placeholder-bar {
    display: none !important;
  }

  .cv-placeholder {
    background: none;
    box-shadow: none;
  }
}