/* ==========================================================================
   Hoja del CV. Siempre blanca con texto oscuro, sin importar el tema del editor:
   es lo que se imprime. Todas las plantillas comparten el HTML de render.js
   y se diferencian solo aquí, por la clase .cv--{plantilla}.
   ========================================================================== */

.cv-page {
  --cv-ink: #1c1d21;
  --cv-muted: #5b5e66;
  --cv-line: #dcdde1;

  width: 100%;
  max-width: 210mm;
  margin: 0 auto;
  display: flex;
  background: #fff;
  color: var(--cv-ink);
  color-scheme: light;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.08), 0 12px 40px rgb(0 0 0 / 0.12);
  container-type: inline-size;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Alto mínimo de hoja A4 (proporción 210/297). Un aspect-ratio en el propio contenedor flex
   lo deja con alto fijo en Chrome y el texto se sale; este "puntal" invisible con padding
   en % (relativo al ancho) solo fija el mínimo, y la hoja crece si el CV es más largo. */
.cv-page::before {
  content: '';
  flex: none;
  width: 0;
  padding-top: calc(100% * 297 / 210);
}

.cv-page > .cv {
  flex: 1;
  min-width: 0;
}

/* Copia fuera de pantalla a ancho A4 para contar páginas (ver renderPageCount en app.js).
   Sin el "puntal" de alto mínimo, su altura es la del contenido real. */
.cv-measure {
  position: absolute;
  top: 0;
  left: -10000px;
  width: 210mm;
  max-width: none;
  visibility: hidden;
  pointer-events: none;
}

.cv-measure::before {
  display: none;
}

/* ---------- Base común ---------- */

.cv {
  --cv-accent: #2563eb;
  display: flex;
  flex-direction: column;
  padding: 16mm 16mm 14mm;
  font-size: 10pt;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.cv h1,
.cv h2,
.cv h3,
.cv p,
.cv ul {
  margin: 0;
}

.cv a {
  color: inherit;
  text-decoration: none;
}

.cv__name {
  font-size: 24pt;
  line-height: 1.1;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.cv__name.is-placeholder {
  color: #b5b7bd;
}

.cv__title {
  margin-top: 3pt;
  font-size: 12pt;
  font-weight: 500;
  color: var(--cv-accent);
}

.cv__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 2pt 12pt;
  margin-top: 8pt;
  padding: 0;
  list-style: none;
  font-size: 9pt;
  color: var(--cv-muted);
}

.cv__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14pt;
  margin-top: 16pt;
}

.cv__main,
.cv__aside {
  display: flex;
  flex-direction: column;
  gap: 14pt;
  min-width: 0;
}

.cv__aside:empty {
  display: none;
}

.cv__section-title {
  margin-bottom: 6pt;
  font-size: 10.5pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cv-accent);
}

/* Al imprimir, una entrada corta no se parte entre páginas. Una con viñetas sí puede partirse
   (si no, una entrada larga saltaría entera y dejaría media página en blanco), pero nunca
   entre su encabezado y la primera viñeta, ni a mitad de una viñeta. */
.cv__entry {
  break-inside: avoid;
  page-break-inside: avoid;
}

.cv__entry:has(.cv__bullets) {
  break-inside: auto;
  page-break-inside: auto;
}

.cv__entry-head,
.cv__entry-sub {
  break-after: avoid;
  page-break-after: avoid;
}

.cv__bullets li {
  break-inside: avoid;
  page-break-inside: avoid;
}

.cv__entry + .cv__entry {
  margin-top: 9pt;
}

.cv__entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 10pt;
}

.cv__entry-title {
  font-size: 10.5pt;
  font-weight: 650;
}

.cv__entry-date {
  font-size: 9pt;
  color: var(--cv-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cv__entry-sub {
  font-size: 9.5pt;
  color: var(--cv-muted);
}

.cv__bullets {
  margin-top: 3pt;
  padding-left: 13pt;
}

.cv__bullets li + li {
  margin-top: 1.5pt;
}

.cv__bullets li::marker {
  color: var(--cv-accent);
}

.cv__text + .cv__text {
  margin-top: 4pt;
}

.cv__entry .cv__text {
  margin-top: 3pt;
}

.cv__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 4pt;
  padding: 0;
  list-style: none;
}

.cv__skills li {
  padding: 1.5pt 7pt;
  border: 1px solid var(--cv-line);
  border-radius: 3pt;
  font-size: 9pt;
}

/* Subgrupos de habilidades ("Técnicas", "Blandas"). El color se hereda para que
   también se lean sobre la barra lateral de color de la Moderna. */
.cv__skill-group + .cv__skill-group {
  margin-top: 8pt;
}

.cv__subsection-title {
  margin-bottom: 4pt;
  font-size: 9.5pt;
  font-weight: 650;
}

/* "Inglés: Intermedio alto (B2)", una línea por idioma. */
.cv__languages {
  display: flex;
  flex-direction: column;
  gap: 3pt;
  padding: 0;
  list-style: none;
  font-size: 9.5pt;
}

/* ---------- Clásica: una columna, encabezado centrado y habilidades al final ---------- */

.cv--classic .cv__header {
  text-align: center;
  padding-bottom: 12pt;
  border-bottom: 2pt solid var(--cv-accent);
}

.cv--classic .cv__name {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 26pt;
}

.cv--classic .cv__title {
  color: var(--cv-ink);
}

.cv--classic .cv__contact {
  justify-content: center;
}

.cv--classic .cv__section-title {
  padding-bottom: 3pt;
  border-bottom: 1px solid var(--cv-line);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 11.5pt;
  letter-spacing: 0.04em;
}

/* Clásica y Minimalista: habilidades en una línea de texto separada por "·", sin recuadros.
   Pesa menos a la vista y para un ATS es exactamente igual. */
.cv--classic .cv__skills,
.cv--minimal .cv__skills {
  gap: 0;
}

.cv--classic .cv__skills li,
.cv--minimal .cv__skills li {
  padding: 0;
  border: 0;
  font-size: 10pt;
}

.cv--classic .cv__skills li + li::before,
.cv--minimal .cv__skills li + li::before {
  content: '·';
  margin: 0 7pt;
  color: var(--cv-accent);
  font-weight: 700;
}

/* ---------- Moderna: encabezado a todo el ancho y barra lateral de color ---------- */

.cv--modern {
  padding: 0;
}

.cv--modern .cv__header {
  padding: 14mm 14mm 10mm;
  border-bottom: 4pt solid var(--cv-accent);
}

.cv--modern .cv__name {
  font-size: 26pt;
}

.cv--modern .cv__body {
  flex-direction: row;
  gap: 0;
  margin-top: 0;
}

.cv--modern .cv__main {
  flex: 1;
  padding: 10mm 14mm 12mm 10mm;
}

/* La barra lateral va primero visualmente aunque en el HTML esté después (mejor para ATS). */
.cv--modern .cv__aside {
  order: -1;
  flex: 0 0 58mm;
  padding: 10mm 8mm;
  /* Se oscurece un poco el acento para que el texto blanco tenga contraste con colores claros. */
  background: color-mix(in srgb, var(--cv-accent) 82%, #000);
  color: #fff;
}

.cv--modern .cv__aside:empty {
  display: flex;
}

.cv--modern .cv__aside .cv__section-title {
  color: #fff;
  border-bottom: 1px solid rgb(255 255 255 / 0.35);
  padding-bottom: 4pt;
}

.cv--modern .cv__aside .cv__skills {
  flex-direction: column;
  gap: 3pt;
}

.cv--modern .cv__aside .cv__skills li {
  padding: 0;
  border: 0;
  font-size: 9.5pt;
}

.cv--modern .cv__section-title {
  font-size: 11pt;
}

/* ---------- Minimalista: aire, versalitas y habilidades separadas por "·" ---------- */

.cv--minimal {
  padding: 16mm 22mm 14mm;
  line-height: 1.5;
}

.cv--minimal .cv__name {
  font-size: 22pt;
  font-weight: 300;
  letter-spacing: 0.01em;
}

.cv--minimal .cv__title {
  color: var(--cv-muted);
  font-weight: 400;
}

.cv--minimal .cv__contact {
  margin-top: 10pt;
}

.cv--minimal .cv__body {
  gap: 16pt;
  margin-top: 20pt;
}

.cv--minimal .cv__main {
  gap: 16pt;
}

.cv--minimal .cv__section-title {
  margin-bottom: 7pt;
  font-size: 10pt;
  font-weight: 600;
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.14em;
  color: var(--cv-muted);
}

.cv--minimal .cv__entry + .cv__entry {
  margin-top: 13pt;
}

.cv--minimal .cv__entry-title {
  font-weight: 600;
}

.cv--minimal .cv__bullets li::marker {
  color: var(--cv-muted);
}


.cv--minimal .cv__languages {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
  font-size: 10pt;
}

.cv--minimal .cv__languages li + li::before {
  content: '·';
  margin: 0 7pt;
  color: var(--cv-accent);
  font-weight: 700;
}

/* ---------- Ejecutiva: encabezado oscuro y dos columnas (habilidades a la derecha) ---------- */

.cv--executive {
  padding: 0;
}

.cv--executive .cv__header {
  padding: 14mm 16mm 11mm;
  background: #1d2330;
  color: #fff;
  border-bottom: 3pt solid var(--cv-accent);
}

.cv--executive .cv__name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 25pt;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Sobre fondo oscuro el acento se aclara para que el título se lea con cualquier color. */
.cv--executive .cv__title {
  color: color-mix(in srgb, var(--cv-accent) 45%, #fff);
  letter-spacing: 0.03em;
}

.cv--executive .cv__contact {
  color: #c9ced8;
}

.cv--executive .cv__body {
  flex-direction: row;
  gap: 9mm;
  margin-top: 0;
  padding: 10mm 16mm 12mm;
}

.cv--executive .cv__main {
  flex: 1;
}

.cv--executive .cv__aside {
  flex: 0 0 50mm;
  padding-left: 7mm;
  border-left: 1px solid var(--cv-line);
}

.cv--executive .cv__section-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 11pt;
  letter-spacing: 0.06em;
  color: #1d2330;
}

.cv--executive .cv__section-title::after {
  content: '';
  display: block;
  width: 22pt;
  height: 2pt;
  margin-top: 3pt;
  background: var(--cv-accent);
}

.cv--executive .cv__aside .cv__skills {
  flex-direction: column;
  gap: 3pt;
}

.cv--executive .cv__aside .cv__skills li {
  padding: 0 0 0 9pt;
  border: 0;
  position: relative;
  font-size: 9.5pt;
}

.cv--executive .cv__aside .cv__skills li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4pt;
  height: 4pt;
  background: var(--cv-accent);
}

/* ---------- Hoja estrecha (móvil): menos margen y la barra lateral pasa abajo ---------- */

@container (max-width: 560px) {
  .cv {
    padding: 22px 20px;
  }

  .cv--minimal {
    padding: 28px 22px;
  }

  .cv__name,
  .cv--modern .cv__name,
  .cv--classic .cv__name {
    font-size: 20pt;
  }

  .cv--modern,
  .cv--executive {
    padding: 0;
  }

  .cv--modern .cv__header {
    padding: 22px 20px 16px;
  }

  .cv--modern .cv__body {
    flex-direction: column;
  }

  .cv--modern .cv__main {
    padding: 18px 20px;
  }

  .cv--modern .cv__aside {
    order: 0;
    flex: none;
    padding: 18px 20px;
  }

  .cv--modern .cv__aside:empty {
    display: none;
  }

  .cv--modern .cv__aside .cv__skills {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3pt 12pt;
  }

  .cv--executive .cv__header {
    padding: 22px 20px 16px;
  }

  .cv--executive .cv__name {
    font-size: 20pt;
  }

  .cv--executive .cv__body {
    flex-direction: column;
    padding: 18px 20px;
  }

  .cv--executive .cv__aside {
    flex: none;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid var(--cv-line);
  }

  .cv--executive .cv__aside .cv__skills {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3pt 12pt;
  }
}

/* ---------- Impresión ---------- */

@media print {
  .cv-page {
    width: 210mm;
    max-width: none;
    min-height: 297mm;
    margin: 0;
    box-shadow: none;
  }

  .cv-page::before {
    display: none;
  }

  .cv__section-title {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* @page no tiene margen (para que los fondos de color lleguen al borde), así que el margen
     lo pone el relleno de cada plantilla. "clone" lo repite en cada página: sin esto, la
     página 2 empezaba pegada al borde superior. */
  .cv,
  .cv--modern .cv__main,
  .cv--modern .cv__aside,
  .cv--executive .cv__body {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}