/* template-classic.css — Plantilla "Vocamina Clásica"
   Dos columnas: lateral con fechas, principal con contenido.
   Encabezados con línea horizontal. Chips de skills en color de marca.
   Reglas @media print blindadas para que el PDF salga idéntico al preview.
*/

.cv {
  --cv-text: #1a1a1a;
  --cv-text-soft: #4a4a4a;
  --cv-text-muted: #8a8a8a;
  --cv-line: #d8d8d8;
  --cv-brand: #2b1e6b;
  --cv-accent: #f1b82f;

  /* CRÍTICO: border-box para que padding NO sume al width. */
  box-sizing: border-box;
  /* CRÍTICO: flex-shrink:0 para que el contenedor flex (preview-stage)
     NO encoja la hoja cuando el panel es más angosto. La hoja es A4 fija. */
  flex-shrink: 0;
  width: 210mm;
  min-height: 297mm;
  background: #fff;
  color: var(--cv-text);
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 10pt;
  line-height: 1.4;
  /* Preview y PDF DEBEN tener el mismo padding/margin para que el wrapping
     sea idéntico. Si cambias acá, cambia también @page margin abajo. */
  padding: 18mm 18mm;
  box-shadow: 0 4px 30px rgba(0,0,0,0.10);
  margin: 0 auto;
  position: relative;
}

.cv, .cv, .cv * { box-sizing: border-box; }

/* Evita que Chrome / WebKit en mobile agranden automáticamente el texto
   del CV (Text Boosting / autosizer). El CV tiene tamaños en pt que
   deben respetarse para que el preview se vea igual al PDF. */
.cv, .cv * {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}

/* paged.js retirado. El preview muestra #cv-source directamente como
   una hoja A4 continua con padding 18mm (igual que el download). */

/* @page DEBE estar fuera de @media print para que paged.js pueda detectarlo
   y aplicarlo al renderizado en pantalla. También se usa al imprimir.
   IMPORTANTE: paged.js trata las páginas como un libro (left/right) y aplica
   margins distintos por defecto a páginas pares vs impares. Hay que declarar
   :left, :right y :first explícitamente para que TODAS las hojas tengan
   exactamente el mismo margen. */
@page {
  size: A4;
  margin: 18mm 18mm;
}
@page :left  { margin: 18mm 18mm; }
@page :right { margin: 18mm 18mm; }
@page :first { margin: 18mm 18mm; }

/* === Header === */
.cv__header {
  display: grid;
  /* El nombre ocupa toda la fila 1 (puede crecer si es largo).
     Fila 2: título a la izquierda, resumen a la derecha (alineados al tope).
     Fila 3: contacto a la izquierda, resumen continúa.
     Así el resumen SIEMPRE arranca a la altura del título, sin importar
     cuántas líneas tenga el nombre. */
  grid-template-columns: 0.85fr 1.15fr;
  grid-template-areas:
    "name    ."
    "title   summary"
    "contact summary";
  column-gap: 5mm;
  /* 8.5mm para que el gap header→primera sección sea el mismo que
     entre secciones (item padding-bottom 5mm + section margin-top 3.5mm). */
  margin-bottom: 8.5mm;
}
.cv__header > * { min-width: 0; }
.cv__name    { grid-area: name; }
.cv__title   { grid-area: title; }
.cv__contact { grid-area: contact; }
.cv__summary { grid-area: summary; }

.cv__name {
  font-size: 24pt;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cv-brand);
  line-height: 1.05;
  margin-bottom: 3mm;
  /* Romper palabras largas en lugar de overflowear la columna */
  overflow-wrap: anywhere;
  word-wrap: break-word;
}
.cv__title {
  font-size: 11pt;
  font-weight: 700;
  margin-bottom: 4mm;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}
.cv__contact {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 9pt;
  color: var(--cv-text-soft);
  display: flex;
  flex-direction: column;
  gap: 0.8mm;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}
.cv__contact a { color: var(--cv-text-soft); text-decoration: underline; }

.cv__summary {
  font-size: 9pt;
  color: var(--cv-text-soft);
  line-height: 1.5;
  align-self: start;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  /* No necesita padding-top porque grid-template-areas lo alinea
     automáticamente con el título en la fila 2. */
}

/* === Encabezado de sección con línea === */
/* No usamos break-inside:avoid en .cv-section — eso forzaba a saltos de página
   completos para secciones cortas (ej. Idiomas con 1 chip). En cambio
   protegemos los items individuales (.cv-item) y evitamos que el título
   quede huérfano al final de página. */
.cv-section {
  margin-top: 3.5mm;
}

/* Wrapper "first": agrupa el .cv-section__head + el primer ítem como
   un bloque atómico. Chrome respeta break-inside:avoid en divs casi
   siempre, lo que garantiza que el título nunca quede solo al final
   de una página con sus items en la siguiente. */
.cv-section__first {
  break-inside: avoid;
  page-break-inside: avoid;
}
.cv-section__head {
  display: flex;
  align-items: center;
  gap: 4mm;
  margin-bottom: 4mm;
  break-after: avoid;
  page-break-after: avoid;
}
.cv-section__title {
  font-size: 13pt;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--cv-text);
}
.cv-section__line {
  flex: 1;
  /* Border en lugar de background-color: los borders SIEMPRE se imprimen,
     incluso con "Gráficos de fondo" desactivado en el diálogo de Chrome. */
  border-top: 1px solid var(--cv-text);
  height: 0;
  align-self: center;
}

/* === Items con fecha lateral === */
/* CRÍTICO: cada .cv-item es una <table> HTML REAL (no display:table).
   Esta es la ÚNICA forma garantizada de que tanto paged.js como la
   paginación nativa de Chrome (al imprimir/descargar PDF) NO partan el
   item entre páginas. Un row de tabla con break-inside:avoid se respeta
   universalmente. Con div+position:absolute, Chrome nativo a veces
   dejaba la fecha en una hoja y el body en la siguiente. */
.cv-item {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0 0 5mm 0;
  break-inside: avoid;
  page-break-inside: avoid;
}
/* CRÍTICO: break-inside:avoid TIENE QUE estar en TODOS los niveles de
   la tabla — el <table>, el <tbody>, el <tr> y los <td>. paged.js (líneas
   1929 y 1949 de su source) busca específicamente:
   - en el <td>: para evitar el text-break dentro de una celda
   - en el <tbody>/<thead>: para mover la fila entera a la siguiente página
   El browser auto-inserta <tbody> si no lo declaras, pero ese tbody
   auto-generado no tiene tu CSS — por eso fallaba. */
.cv-item,
.cv-item__body-tbody,
.cv-item tr,
.cv-item__date,
.cv-item__body {
  break-inside: avoid;
  page-break-inside: avoid;
}
.cv-item__date {
  width: 30mm;
  vertical-align: top;
  padding: 1mm 5mm 0 0;
  font-size: 8.5pt;
  color: var(--cv-text-muted);
}
/* Cada parte de la fecha (inicio y fin) en su propia línea, siempre.
   white-space: nowrap evita que la propia fecha (ej. "Ene 2021") se rompa. */
.cv-item__date .d {
  display: block;
  white-space: nowrap;
  overflow-wrap: normal;
}
.cv-item__body { vertical-align: top; min-width: 0; }
.cv-item__heading {
  font-size: 11pt;
  font-weight: 700;
  margin-bottom: 1.5mm;
  display: flex;
  align-items: baseline;
  gap: 2mm;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}
.cv-item__heading > * { min-width: 0; overflow-wrap: anywhere; }
.cv-item__heading .pipe {
  color: var(--cv-text-muted);
  font-weight: 400;
  margin: 0 1mm;
}
.cv-item__heading .org {
  font-weight: 400;
  color: var(--cv-text);
}
.cv-item__lead {
  font-size: 10pt;
  color: var(--cv-text-soft);
  /* Sin margin-bottom: el padding del item ya da el espacio. */
  margin-bottom: 0;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

/* Variante en bloque para secciones SIN columna de fecha (ej. Referencias).
   No usa <table>; ocupa todo el ancho del .cv y mantiene el margin-bottom
   coherente con los items de tabla. */
.cv-item--block {
  display: block;
  width: 100%;
  margin: 0 0 5mm 0;
  break-inside: avoid;
  page-break-inside: avoid;
}
.cv-item__bullets {
  list-style: disc;
  padding-left: 4mm;
  margin: 0;
  font-size: 9.5pt;
  color: var(--cv-text);
}
.cv-item__bullets li {
  margin-bottom: 0.5mm;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}
.cv-item__bullets li:last-child { margin-bottom: 0; }

/* === Chips === */
.cv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 2mm;
  /* Sin margin-top negativo: la distancia título→texto del chip es ahora
     ~5mm (4mm del head + 1.2mm del padding del chip), igual que la
     distancia título→texto del año en items con date column. */
  margin: 0;
  /* padding-bottom: 3.8mm para que junto al padding-bottom interno del
     chip (1.2mm) sume los 5mm que tienen los items. */
  padding-bottom: 3.8mm;
  /* Mantener todos los chips de una sección en la misma hoja. Sin esto,
     paged.js puede partir las filas de chips entre páginas. */
  break-inside: avoid;
  page-break-inside: avoid;
}
/* La última sección no necesita el padding-bottom (es el final del CV). */
.cv-section:last-child .cv-chips { padding-bottom: 0; }
.cv-chip {
  background: var(--cv-brand);
  color: #fff;
  font-size: 8.5pt;
  font-weight: 400;
  padding: 1.2mm 3mm;
  border-radius: 1.5mm;
  white-space: nowrap;
}
.cv-chip--soft {
  background: #fff;
  color: var(--cv-brand);
  border: 1px solid var(--cv-brand);
}

/* Estado vacío del preview */
.cv__empty {
  text-align: center;
  color: var(--cv-text-muted);
  padding: 30mm 0;
}

/* === PRINT === */
/* Los contenedores del builder (.builder-*, .preview-stage) ya están
   manejados por @media print en builder.css. Acá:
   - El @page (18mm) aplica margen a TODAS las hojas vía chrome native print
   - Reseteo padding del .cv para que no duplique encima del @page margin
   - Mantengo break-inside:avoid en items y secciones */
@media print {
  html, body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    /* En mobile Chrome, el text autosizer puede aplicarse al imprimir
       y agrandar el texto. Lo forzamos a no hacerlo. */
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    font-size: 10pt;
  }

  #modal-print { display: none !important; }

  /* En mobile, .builder-preview es position:fixed con altura del viewport.
     En print eso puede empujar el contenido a la página 2 dejando una
     hoja blanca al inicio. display:contents elimina el contenedor del
     flow pero mantiene a sus hijos visibles. */
  .builder-layout,
  .builder-preview,
  .preview-stage {
    display: contents !important;
  }

  /* En print: ocultamos el output paginado del preview (cv-paged-output)
     y traemos #cv-source al flow. cv-source en pantalla está oculto
     (position:absolute, left:-99999px, visibility:hidden) — hay que
     revertir todo eso para que se imprima. */
  #cv-paged-output { display: none !important; }

  /* CRÍTICO: width:auto (NO 210mm). El @page margin: 18mm ya define el
     área imprimible de 174mm. Si #cv-source tiene width:210mm, Chrome
     detecta que el contenido (210mm) excede el área imprimible (174mm)
     y aplica scale-to-fit (~83%), achicando todo el texto y metiendo
     más items por página. Con width:auto, el contenido fluye al ancho
     imprimible real y mantiene el mismo tamaño visual que el preview. */
  #cv-source {
    position: static !important;
    left: 0 !important;
    top: 0 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #cv-preview {
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    width: auto !important;
  }

  .cv {
    box-sizing: border-box !important;
    width: auto !important;
    min-height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    transform: none !important;
  }

  .cv-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .cv-section__head {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* Forzar a Chrome a imprimir backgrounds (líneas, chips, colores)
     incluso si "Background graphics" está desactivado en el diálogo. */
  .cv,
  .cv * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* Compensación de tamaño SOLO cuando el usuario imprime desde mobile.
   pdf.js detecta el device y agrega `.print-mobile` al body antes de
   window.print(). En desktop la clase no existe → no aplica nada.

   El @page con nombre + page-property en el body permite cambiar el
   margin solo cuando la clase está activa. */
@page mobile-page { size: A4; margin: 0; }
body.print-mobile { page: mobile-page; }

@media print {
  body.print-mobile .cv {
    padding: 18mm 18mm !important;
    font-size: 8.5pt !important;
  }
  body.print-mobile .cv__name { font-size: 20pt !important; }
  body.print-mobile .cv__title { font-size: 9.5pt !important; }
  body.print-mobile .cv__summary { font-size: 7.5pt !important; }
  body.print-mobile .cv__contact { font-size: 7.5pt !important; }
  body.print-mobile .cv-section__title { font-size: 11pt !important; }
  body.print-mobile .cv-item__heading { font-size: 9.5pt !important; }
  body.print-mobile .cv-item__date { font-size: 7.5pt !important; }
  body.print-mobile .cv-item__lead { font-size: 8.5pt !important; }
  body.print-mobile .cv-item__bullets { font-size: 8pt !important; }
  body.print-mobile .cv-chip { font-size: 7.5pt !important; }
}