/* ============================================================
   TalentoCV — 10 temas visuales del CV
   ============================================================
   Cada tema es un bloque de overrides puramente visuales, aislado
   bajo "body.cv-theme-N .cv" (misma clase compartida por el sidebar
   de vista previa del paso 1, el preview-sheet móvil y la vista de
   CV del paso 2 -- así el tema se aplica de forma uniforme en los
   tres sitios, igual que ya hace el sistema de color existente).

   NINGÚN tema toca ancho de columnas (grid-template-columns),
   dimensiones de página (.cv width/height), tamaño de fuente del
   cuerpo ni interlineado -- solo familia tipográfica (no tamaño),
   bordes, fondo, sombra, iconos, divisores y marco de foto/QR. La
   paginación mide la altura REAL renderizada tras cada cambio, así
   que se adapta sola a estos cambios visuales.

   Se usa !important en las propiedades que compiten con reglas más
   específicas ya existentes (#cv-render tiene más especificidad que
   .cv por ser un ID; el body{font-family:'Inter'...!important} ya
   existente en la app también exige !important para poder
   sobreescribirse) -- mismo patrón defensivo que ya usa
   applyColorToCV() para el sistema de color.

   Limitación conocida y documentada: los iconos de contacto son
   formas dibujadas a mano con pseudo-elementos CSS (no un set de
   iconos intercambiable) y el QR es una imagen rasterizada -- los
   temas cambian el COLOR de los iconos y el MARCO/sombra del QR,
   pero no el estilo de los módulos internos del QR ni la forma de
   cada icono individual (eso exigiría tocar la librería de QR o
   redibujar ~9 iconos por tema, fuera del alcance "solo CSS, sin
   tocar estructura").
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1. CLÁSICO CORPORATIVO — referencia de seguridad, muy cercano
   al aspecto actual. Inter, bordes finos, sin fondo, sin sombra.
   ──────────────────────────────────────────────────────────── */
body.cv-theme-1 .cv {
  font-family: 'Inter', Arial, Helvetica, sans-serif !important;
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(14,23,32,.08) !important;
  border: 1px solid #e2e8f0;
}
body.cv-theme-1 .cv h1 { font-weight: 600 !important; }
body.cv-theme-1 .cv .right-title,
body.cv-theme-1 .cv .section-title {
  letter-spacing: .4px; border-radius: 0;
}
body.cv-theme-1 .cv .right-title::before,
body.cv-theme-1 .cv .section-title::before {
  height: 1px; border-radius: 0;
}
body.cv-theme-1 .cv .job,
body.cv-theme-1 .cv .edu,
body.cv-theme-1 .cv .skill-block {
  border-radius: 4px;
}
body.cv-theme-1 .cv .photo-box { border-radius: 6px; }
body.cv-theme-1 .cv .photo-card { border-radius: 6px; }
body.cv-theme-1 .cv .photo-back .qr-shine img {
  border-radius: 6px !important; box-shadow: none !important;
}

/* ────────────────────────────────────────────────────────────
   2. EDITORIAL SERIF — elegante, tipo revista, para perfiles
   senior. Lora + Playfair Display, sin bordes, textura de papel
   sutil, foto circular.
   ──────────────────────────────────────────────────────────── */
body.cv-theme-2 .cv {
  font-family: 'Lora', Georgia, serif !important;
  background:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,.025) 1px, transparent 0) 0 0/3px 3px,
    #fdfbf7 !important;
  box-shadow: 0 1px 0 rgba(14,23,32,.06) !important;
}
body.cv-theme-2 .cv h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 300 !important;
}
body.cv-theme-2 .cv .right-title,
body.cv-theme-2 .cv .section-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-variant: small-caps; letter-spacing: 1.2px; font-weight: 600 !important;
}
body.cv-theme-2 .cv .right-title::before,
body.cv-theme-2 .cv .section-title::before {
  background: none !important;
  border-top: 1px solid #b8ab8f; height: 0 !important; top: 0;
}
body.cv-theme-2 .cv .job,
body.cv-theme-2 .cv .edu,
body.cv-theme-2 .cv .skill-block { border: none; }
body.cv-theme-2 .cv .photo-box { border-radius: 50% !important; }
body.cv-theme-2 .cv .photo-card { border-radius: 50% !important; border: none; box-shadow: 0 6px 18px rgba(20,20,15,.18); }
body.cv-theme-2 .cv .photo-box::after { display: none; }
body.cv-theme-2 .cv .photo-back .qr-shine img {
  border-radius: 4px !important; border: 3px double #b8ab8f !important; box-shadow: none !important;
}
body.cv-theme-2 .cv .contact-icon { --icon-blue: #6b5f42; --icon-blue-dark: #4a4130; }

/* ────────────────────────────────────────────────────────────
   3. MINIMALISTA GEOMÉTRICO — startup/tech, aire y color en
   bloques. Poppins, bordes gruesos redondeados, sombra flotante.
   ──────────────────────────────────────────────────────────── */
body.cv-theme-3 .cv {
  font-family: 'Poppins', Arial, sans-serif !important;
  background: #fff !important;
  box-shadow: 0 24px 48px rgba(14,23,32,.16), 0 4px 10px rgba(14,23,32,.08) !important;
}
body.cv-theme-3 .cv h1 { font-weight: 800 !important; }
body.cv-theme-3 .cv .right-title,
body.cv-theme-3 .cv .section-title { letter-spacing: 1px; }
body.cv-theme-3 .cv .right-title::before,
body.cv-theme-3 .cv .section-title::before {
  height: 4px !important; border-radius: 4px;
}
body.cv-theme-3 .cv .job,
body.cv-theme-3 .cv .edu,
body.cv-theme-3 .cv .skill-block {
  border: 2px solid #e2e8f0; border-radius: 14px; padding: 10px 12px;
}
body.cv-theme-3 .cv .photo-box { border-radius: 20px !important; }
body.cv-theme-3 .cv .photo-card { border-radius: 20px !important; border-width: 3px; }
body.cv-theme-3 .cv .photo-back .qr-shine img {
  border-radius: 14px !important; box-shadow: 0 6px 16px rgba(14,23,32,.2) !important;
}
body.cv-theme-3 .cv .contact-icon {
  background: rgba(31,127,184,.12); border-radius: 50%; padding: 3px; box-sizing: content-box;
}

/* ────────────────────────────────────────────────────────────
   4. TÉCNICO / INGENIERÍA — look de terminal/código. IBM Plex
   Sans + IBM Plex Mono, esquinas rectas, retícula sutil,
   encabezados numerados, divisores punteados.
   ──────────────────────────────────────────────────────────── */
body.cv-theme-4 .cv {
  font-family: 'IBM Plex Sans', Arial, sans-serif !important;
  background:
    linear-gradient(rgba(20,40,60,.035) 1px, transparent 1px) 0 0/100% 22px,
    linear-gradient(90deg, rgba(20,40,60,.035) 1px, transparent 1px) 0 0/22px 100%,
    #fff !important;
  box-shadow: 0 1px 0 rgba(14,23,32,.08) !important;
  border: 1px solid #d7dee6;
}
body.cv-theme-4 .cv h1 { font-family: 'IBM Plex Mono', monospace !important; font-weight: 400 !important; }
body.cv-theme-4 .cv .right-title,
body.cv-theme-4 .cv .section-title {
  font-family: 'IBM Plex Mono', monospace !important;
  letter-spacing: .5px; border-radius: 0;
}
body.cv-theme-4 .cv .right-title::before,
body.cv-theme-4 .cv .section-title::before {
  /* Divisor tipo "regla técnica" -- marcas de graduación en vez de línea
     lisa, coherente con la retícula de fondo del tema. */
  background: repeating-linear-gradient(90deg, #4a5a6a 0 2px, transparent 2px 8px) !important;
  height: 2px !important;
}
body.cv-theme-4 .cv .job,
body.cv-theme-4 .cv .edu,
body.cv-theme-4 .cv .skill-block { border-radius: 0; }
/* Conector vertical tipo traza de circuito entre entradas de experiencia
   y formación -- refuerza la identidad "técnica" sin tocar estructura. */
body.cv-theme-4 .cv .job,
body.cv-theme-4 .cv .edu {
  border-left: 2px solid rgba(74,90,106,.3); padding-left: 9px;
}
body.cv-theme-4 .cv .photo-box,
body.cv-theme-4 .cv .photo-card { border-radius: 0 !important; }
body.cv-theme-4 .cv .photo-back .qr-shine img {
  border-radius: 0 !important; border: 1px solid #4a5a6a !important; box-shadow: none !important;
}
/* Marco del QR con esquinas en L -- efecto "ficha técnica/plano".
   Van en ::before/::after del <img>, no del span .qr-shine: ese span
   mide más ancho que la imagen (queda centrada con margin:0 auto
   dentro de él), así que unas esquinas ancladas al span quedaban
   flotando en ese margen en vez de abrazar la imagen real. El <img>
   ya tiene position:relative en el CSS base (.photo-back img), así
   que sus pseudo-elementos se anclan a su propia caja. Además,
   .qr-shine::after ya está en uso por el barrido de brillo animado
   (qrSweep) del CSS base -- reutilizarlo aquí lo habría corrompido
   sin pisar sus propiedades (inset/animation/background) una a una.
   .qr-shine mantiene border-radius:0 para que su máscara de recorte
   no redondee la imagen por debajo del marco cuadrado. */
body.cv-theme-4 .cv .photo-back .qr-shine { border-radius: 0; }
body.cv-theme-4 .cv .photo-back .qr-shine img::before,
body.cv-theme-4 .cv .photo-back .qr-shine img::after {
  content: ""; position: absolute; width: 11px; height: 11px; z-index: 17; pointer-events: none;
}
body.cv-theme-4 .cv .photo-back .qr-shine img::before {
  top: 0; left: 0; border-top: 2px solid #4a5a6a; border-left: 2px solid #4a5a6a;
}
body.cv-theme-4 .cv .photo-back .qr-shine img::after {
  bottom: 0; right: 0; border-bottom: 2px solid #4a5a6a; border-right: 2px solid #4a5a6a;
}
body.cv-theme-4 .cv .contact-icon { --icon-blue: #2d4a5e; --icon-blue-dark: #1a2e3a; filter: saturate(.6); }

/* ────────────────────────────────────────────────────────────
   5. EJECUTIVO PREMIUM — alta gama, sobrio. Libre Baskerville +
   Inter, bordes finísimos, fondo marfil, sombra casi imperceptible.
   ──────────────────────────────────────────────────────────── */
body.cv-theme-5 .cv {
  font-family: 'Inter', Arial, sans-serif !important;
  background: #faf9f6 !important;
  box-shadow: 0 2px 4px rgba(14,23,32,.06) !important;
  border: .5px solid #c9bfa5;
}
body.cv-theme-5 .cv h1 { font-family: 'Libre Baskerville', Georgia, serif !important; font-weight: 700 !important; }
body.cv-theme-5 .cv .right-title,
body.cv-theme-5 .cv .section-title {
  letter-spacing: 2px; font-weight: 500 !important;
}
body.cv-theme-5 .cv .right-title::before,
body.cv-theme-5 .cv .section-title::before {
  background: #a8925f !important; height: 1px !important;
}
body.cv-theme-5 .cv .job,
body.cv-theme-5 .cv .edu,
body.cv-theme-5 .cv .skill-block { border: none; }
body.cv-theme-5 .cv .photo-box { border-radius: 50% !important; }
body.cv-theme-5 .cv .photo-card {
  border-radius: 50% !important; border: 2px solid #fff !important;
  box-shadow: 0 0 0 1px #a8925f, 0 0 0 4px #fff, 0 0 0 5px #a8925f;
}
body.cv-theme-5 .cv .photo-box::after { display: none; }
body.cv-theme-5 .cv .photo-back .qr-shine img {
  border-radius: 4px !important; border: 1px double #a8925f !important; box-shadow: none !important;
}
body.cv-theme-5 .cv .contact-icon { --icon-blue: #8a7550; --icon-blue-dark: #5c4d34; }

/* ────────────────────────────────────────────────────────────
   6. CREATIVO / DISEÑO — cálido y moderno. Work Sans + Poppins,
   borde lateral de acento, degradado sutil, foto circular.
   ──────────────────────────────────────────────────────────── */
body.cv-theme-6 .cv {
  font-family: 'Work Sans', Arial, sans-serif !important;
  /* Mancha de color grande y tenue en una esquina fija, encima del
     degradado diagonal original -- más editorial, menos "gradiente web". */
  background:
    radial-gradient(circle at 88% 6%, rgba(31,127,184,.07), transparent 42%),
    linear-gradient(135deg, rgba(31,127,184,.035), transparent 55%), #fff !important;
  box-shadow: 0 20px 40px rgba(14,23,32,.14) !important;
}
body.cv-theme-6 .cv h1 { font-family: 'Poppins', Arial, sans-serif !important; font-weight: 800 !important; }
body.cv-theme-6 .cv .right-title,
body.cv-theme-6 .cv .section-title {
  text-transform: none; font-weight: 800 !important;
  /* El blob de abajo mide 9px; el padding-bottom base (5px) se queda
     corto y el blob se monta sobre el texto -- 9px + 2px de aire. */
  padding-bottom: 11px !important;
}
body.cv-theme-6 .cv .right-title::before,
body.cv-theme-6 .cv .section-title::before {
  /* Blob orgánico en vez de barra recta -- toque "hecho a mano". */
  width: 20px !important; height: 9px !important;
  border-radius: 60% 40% 55% 45% / 45% 55% 40% 60% !important;
}
body.cv-theme-6 .cv .job,
body.cv-theme-6 .cv .edu,
body.cv-theme-6 .cv .skill-block {
  border-left: 4px solid var(--icon-blue, #1f7fb8); padding-left: 10px; border-radius: 0;
}
/* Punto de acento antes del puesto/estudio, a juego con el borde lateral. */
body.cv-theme-6 .cv .job-title::before,
body.cv-theme-6 .cv .edu li strong::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--icon-blue, #1f7fb8); margin-right: 6px; vertical-align: middle;
}
body.cv-theme-6 .cv .photo-box { border-radius: 50% !important; }
body.cv-theme-6 .cv .photo-card { border-radius: 50% !important; border-width: 3px; }
body.cv-theme-6 .cv .photo-box::after { display: none; }
body.cv-theme-6 .cv .photo-back .qr-shine img {
  /* Marco doble: borde de acento + sombra, a juego con el borde lateral
     de los bloques de experiencia. */
  border-radius: 12px !important; border: 2px solid rgba(31,127,184,.35) !important; box-shadow: 0 8px 20px rgba(31,127,184,.25) !important;
}
body.cv-theme-6 .cv .contact-icon {
  background: rgba(31,127,184,.14); border-radius: 50%; padding: 3px; box-sizing: content-box;
}

/* ────────────────────────────────────────────────────────────
   7. ACADÉMICO / FORMAL — máxima formalidad. Georgia, esquinas
   rectas, sin sombra, sin iconos (etiquetas de texto).
   ──────────────────────────────────────────────────────────── */
body.cv-theme-7 .cv {
  font-family: Georgia, 'Times New Roman', serif !important;
  background: #fff !important;
  box-shadow: none !important;
  border: 1px solid #333;
}
body.cv-theme-7 .cv h1 { font-weight: 700 !important; }
body.cv-theme-7 .cv .right-title,
body.cv-theme-7 .cv .section-title { letter-spacing: .3px; }
body.cv-theme-7 .cv .right-title::before,
body.cv-theme-7 .cv .section-title::before {
  background: #333 !important; height: 1px !important; width: 100% !important;
}
body.cv-theme-7 .cv .job,
body.cv-theme-7 .cv .edu,
body.cv-theme-7 .cv .skill-block { border-radius: 0; }
body.cv-theme-7 .cv .photo-box,
body.cv-theme-7 .cv .photo-card { border-radius: 0 !important; }
body.cv-theme-7 .cv .photo-back .qr-shine img {
  border-radius: 0 !important; border: 1px solid #333 !important; box-shadow: none !important;
}
body.cv-theme-7 .cv .contact-icon { display: none; }

/* ────────────────────────────────────────────────────────────
   8. STARTUP / TECH MODERNO — bold, alto contraste. Space
   Grotesk, bordes gruesos oscuros, sombra dura desplazada.
   ──────────────────────────────────────────────────────────── */
body.cv-theme-8 .cv {
  font-family: 'Space Grotesk', Arial, sans-serif !important;
  background:
    radial-gradient(rgba(14,23,32,.06) 1px, transparent 1px) 0 0/16px 16px,
    #fff !important;
  box-shadow: 8px 8px 0 rgba(14,23,32,.9) !important;
  border: 3px solid #0e1720;
}
body.cv-theme-8 .cv h1 { font-weight: 900 !important; }
body.cv-theme-8 .cv .right-title,
body.cv-theme-8 .cv .section-title {
  font-weight: 900 !important; letter-spacing: .5px;
  /* El badge de abajo mide 14px; el padding-bottom base (5px) se queda
     corto y el badge se monta sobre el texto -- 14px + 2px de aire. */
  padding-bottom: 16px !important;
}
body.cv-theme-8 .cv .right-title::before,
body.cv-theme-8 .cv .section-title::before {
  /* Badge sólido en vez de barra fina -- refuerza el look neobrutalista
     que ya insinúa la sombra dura desplazada del resto del tema. */
  width: 34px !important; height: 14px !important; background: #0e1720 !important; border-radius: 3px;
  box-shadow: 2px 2px 0 rgba(14,23,32,.35) !important;
}
body.cv-theme-8 .cv .job,
body.cv-theme-8 .cv .edu,
body.cv-theme-8 .cv .skill-block {
  border: 2px solid #0e1720; border-radius: 10px; padding: 8px 10px;
}
/* Competencias como mini-tags con borde, en vez de solo texto en lista --
   más "interfaz de producto" que "documento". */
body.cv-theme-8 .cv .skill-block ul {
  padding-left: 0; display: flex; flex-wrap: wrap; gap: 5px;
}
body.cv-theme-8 .cv .skill-block li {
  list-style: none; display: inline-block;
  border: 1.5px solid #0e1720; border-radius: 4px; padding: 2px 7px;
}
body.cv-theme-8 .cv .photo-box,
body.cv-theme-8 .cv .photo-card { border-radius: 0 !important; }
body.cv-theme-8 .cv .photo-card { border-width: 3px !important; border-color: #0e1720 !important; }
body.cv-theme-8 .cv .photo-back .qr-shine img {
  border-radius: 0 !important; border: 2px solid #0e1720 !important; box-shadow: 4px 4px 0 rgba(14,23,32,.5) !important;
}
body.cv-theme-8 .cv .contact-icon { --icon-blue: #0e1720; --icon-blue-dark: #0e1720; }

/* ────────────────────────────────────────────────────────────
   9. SUAVE / CERCANO — cálido y aproximable. Nunito, todo muy
   redondeado, sombra amplia y difusa.
   ──────────────────────────────────────────────────────────── */
body.cv-theme-9 .cv {
  font-family: 'Nunito', Arial, sans-serif !important;
  background: radial-gradient(circle at 100% 0%, rgba(31,127,184,.05), transparent 60%), #fffefb !important;
  box-shadow: 0 30px 60px rgba(14,23,32,.12) !important;
  border-radius: 18px;
}
body.cv-theme-9 .cv h1 { font-weight: 700 !important; }
body.cv-theme-9 .cv .right-title,
body.cv-theme-9 .cv .section-title { text-transform: none; font-weight: 700 !important; }
body.cv-theme-9 .cv .right-title::before,
body.cv-theme-9 .cv .section-title::before {
  height: 3px !important; border-radius: 3px;
}
body.cv-theme-9 .cv .job,
body.cv-theme-9 .cv .edu,
body.cv-theme-9 .cv .skill-block {
  border: 1.5px solid #eef2f6; border-radius: 18px; padding: 10px 12px;
}
body.cv-theme-9 .cv .photo-box { border-radius: 50% !important; }
body.cv-theme-9 .cv .photo-card { border-radius: 50% !important; border-width: 4px; }
body.cv-theme-9 .cv .photo-box::after { display: none; }
body.cv-theme-9 .cv .photo-back .qr-shine img {
  border-radius: 18px !important; box-shadow: 0 6px 16px rgba(14,23,32,.15) !important;
}
body.cv-theme-9 .cv .contact-icon {
  background: rgba(31,127,184,.1); border-radius: 50%; padding: 3px; box-sizing: content-box;
}

/* ────────────────────────────────────────────────────────────
   10. ESTRUCTURADO / CONSULTORÍA — preciso, denso. Roboto +
   Roboto Condensed, corner marks, cuadrícula fina, encabezados
   numerados.
   ──────────────────────────────────────────────────────────── */
body.cv-theme-10 .cv {
  font-family: 'Roboto', Arial, sans-serif !important;
  background:
    linear-gradient(rgba(20,40,60,.03) 1px, transparent 1px) 0 0/100% 18px,
    #fff !important;
  box-shadow: 0 1px 0 rgba(14,23,32,.08) !important;
  border: 1px solid #cfd7de;
}
body.cv-theme-10 .cv h1 { font-family: 'Roboto Condensed', Arial, sans-serif !important; font-weight: 700 !important; }
body.cv-theme-10 .cv .right-title,
body.cv-theme-10 .cv .section-title {
  font-family: 'Roboto Condensed', Arial, sans-serif !important;
  letter-spacing: 1.2px;
  /* El cuadradito de abajo mide 8px; el padding-bottom base (5px) se
     queda corto -- 8px + 2px de aire. Pre-existente, no introducido
     en la ronda de hoy, pero se corrige junto con los otros dos. */
  padding-bottom: 10px !important;
}
body.cv-theme-10 .cv .right-title::before,
body.cv-theme-10 .cv .section-title::before {
  width: 8px !important; height: 8px !important; border-radius: 0; background: #2d4a5e !important;
}
body.cv-theme-10 .cv .job,
body.cv-theme-10 .cv .edu,
body.cv-theme-10 .cv .skill-block { border-radius: 0; }
body.cv-theme-10 .cv .photo-box,
body.cv-theme-10 .cv .photo-card { border-radius: 0 !important; }
body.cv-theme-10 .cv .photo-back .qr-shine img {
  border-radius: 0 !important; border: 1px solid #2d4a5e !important; box-shadow: none !important;
}
body.cv-theme-10 .cv .contact-icon { --icon-blue: #2d4a5e; --icon-blue-dark: #1a2e3a; }