/* ============================================================
   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.
   ──────────────────────────────────────────────────────────── */
/* Shared guardrails for all 10 themes: stable icon | text rows,
   predictable wrapping and motion that never changes layout size. */
body[class*="cv-theme-"] .cv {
  --tcv-contact-icon-track: 20px;
  --tcv-contact-row-gap: 6px;
  --tcv-theme-ease: cubic-bezier(.2, .72, .18, 1);
}

body[class*="cv-theme-"] .cv .left,
body[class*="cv-theme-"] .cv .right,
body[class*="cv-theme-"] .cv .skill-block,
body[class*="cv-theme-"] .cv .job,
body[class*="cv-theme-"] .cv .edu {
  min-width: 0;
}

body[class*="cv-theme-"] .cv .contact {
  display: grid;
  gap: var(--tcv-contact-row-gap);
}

body[class*="cv-theme-"] .cv .contact p {
  display: grid;
  grid-template-columns: var(--tcv-contact-icon-track) minmax(0, 1fr);
  align-items: flex-start;
  column-gap: 7px;
  margin: 0;
  min-width: 0;
  word-break: normal;
  overflow-wrap: normal;
  border-radius: 7px;
}

body[class*="cv-theme-"] .cv .contact-icon {
  justify-self: center;
  align-self: flex-start;
  flex: 0 0 auto;
  width: 16px;
  min-width: 0;
  height: 16px;
  margin-top: 1px;
  padding: 0;
  box-sizing: border-box;
  line-height: 1;
  text-align: center;
  transform-origin: center;
  transition: transform .18s var(--tcv-theme-ease), filter .18s ease, opacity .18s ease;
}

body[class*="cv-theme-"] .cv .contact-icon.pin { width: 12px; height: 16px; }
body[class*="cv-theme-"] .cv .contact-icon.mail { width: 15px; height: 11px; margin-top: 3px; }
body[class*="cv-theme-"] .cv .contact-icon.computer { width: 16px; height: 14px; margin-top: 2px; }
body[class*="cv-theme-"] .cv .contact-icon.whatsapp { width: 17px; height: 17px; margin-top: 0; }
body[class*="cv-theme-"] .cv .contact-icon.flag { width: 14px; height: 9px; margin-top: 4px; }

body[class*="cv-theme-"] .cv .contact p > a,
body[class*="cv-theme-"] .cv .contact p > span:last-child {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.35;
}

body[class*="cv-theme-"] .cv .job-head,
body[class*="cv-theme-"] .cv .skill-block ul,
body[class*="cv-theme-"] .cv .job ul,
body[class*="cv-theme-"] .cv .edu ul {
  min-width: 0;
}

@media (hover: hover) and (pointer: fine) {
  body[class*="cv-theme-"] .cv .contact p:hover .contact-icon {
    transform: translateY(-1px);
  }

  body[class*="cv-theme-"] .cv .job:hover,
  body[class*="cv-theme-"] .cv .edu:hover,
  body[class*="cv-theme-"] .cv .skill-block:hover {
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce), print {
  body[class*="cv-theme-"] .cv .contact p,
  body[class*="cv-theme-"] .cv .contact-icon,
  body[class*="cv-theme-"] .cv .contact-icon::before,
  body[class*="cv-theme-"] .cv .contact-icon::after,
  body[class*="cv-theme-"] .cv .job,
  body[class*="cv-theme-"] .cv .edu,
  body[class*="cv-theme-"] .cv .skill-block,
  body[class*="cv-theme-"] .cv .section-title,
  body[class*="cv-theme-"] .cv .right-title,
  body[class*="cv-theme-"] .cv .section-title::before,
  body[class*="cv-theme-"] .cv .right-title::before {
    animation: none !important;
    transition: none !important;
    filter: none !important;
  }

  body[class*="cv-theme-"] .cv .contact p,
  body[class*="cv-theme-"] .cv .contact-icon,
  body[class*="cv-theme-"] .cv .job,
  body[class*="cv-theme-"] .cv .edu,
  body[class*="cv-theme-"] .cv .skill-block {
    transform: none !important;
  }
}

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;
  --tcv-contact-row-gap: 6px;
}
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;
}
body.cv-theme-1 .cv .contact p { padding: 1px 0; }
body.cv-theme-1 .cv .contact-icon { filter: none; }

/* ────────────────────────────────────────────────────────────
   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;
  --tcv-contact-row-gap: 7px;
}
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; }
body.cv-theme-2 .cv .contact p {
  padding-bottom: 4px;
  border-bottom: 1px dotted rgba(107,95,66,.24);
}
body.cv-theme-2 .cv .contact p:last-child { border-bottom: 0; padding-bottom: 0; }
body.cv-theme-2 .cv .company,
body.cv-theme-2 .cv .date { color: #6b5f42; }

/* ────────────────────────────────────────────────────────────
   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;
  --tcv-contact-icon-track: 22px;
  --tcv-contact-row-gap: 7px;
}
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: 0; box-sizing: border-box;
  box-shadow: 0 0 0 3px rgba(31,127,184,.08);
}
body.cv-theme-3 .cv .contact p { padding: 1px 0; }

/* ────────────────────────────────────────────────────────────
   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;
  --tcv-contact-row-gap: 5px;
}
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); }
body.cv-theme-4 .cv .contact { font-family: 'IBM Plex Mono', monospace; }
body.cv-theme-4 .cv .contact p {
  column-gap: 6px;
  padding-bottom: 3px;
  border-bottom: 1px dashed rgba(45,74,94,.18);
}
body.cv-theme-4 .cv .contact p:last-child { border-bottom: 0; padding-bottom: 0; }

/* ────────────────────────────────────────────────────────────
   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;
  --tcv-contact-row-gap: 7px;
}
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; }
body.cv-theme-5 .cv .contact p {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(168,146,95,.18);
}
body.cv-theme-5 .cv .contact p:last-child { border-bottom: 0; padding-bottom: 0; }
body.cv-theme-5 .cv .company { color: #7c6947; }

/* ────────────────────────────────────────────────────────────
   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;
  --tcv-contact-icon-track: 22px;
  --tcv-contact-row-gap: 7px;
}
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: 0; box-sizing: border-box;
  box-shadow: 0 0 0 3px rgba(31,127,184,.08);
}
body.cv-theme-6 .cv .contact p {
  padding: 2px 0 2px 3px;
  border-left: 2px solid rgba(31,127,184,.22);
}

/* ────────────────────────────────────────────────────────────
   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; }
body.cv-theme-7 .cv .contact { gap: 4px; }
body.cv-theme-7 .cv .contact p {
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(51,51,51,.14);
}
body.cv-theme-7 .cv .contact p:last-child { border-bottom: 0; padding-bottom: 0; }

/* ────────────────────────────────────────────────────────────
   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;
  --tcv-contact-icon-track: 22px;
  --tcv-contact-row-gap: 7px;
}
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;
  max-width: 100%;
  overflow-wrap: anywhere;
}
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; }
body.cv-theme-8 .cv .contact p {
  padding: 3px 5px;
  border: 1.5px solid rgba(14,23,32,.18);
  background: rgba(255,255,255,.82);
}

/* ────────────────────────────────────────────────────────────
   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;
  --tcv-contact-icon-track: 22px;
  --tcv-contact-row-gap: 7px;
}
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: 0; box-sizing: border-box;
  box-shadow: 0 0 0 3px rgba(31,127,184,.07);
}
body.cv-theme-9 .cv .contact p {
  padding: 3px 5px;
  background: rgba(31,127,184,.045);
  border: 1px solid rgba(31,127,184,.08);
  border-radius: 10px;
}

/* ────────────────────────────────────────────────────────────
   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;
  --tcv-contact-row-gap: 5px;
}
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; }
body.cv-theme-10 .cv .contact p {
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(45,74,94,.16);
}
body.cv-theme-10 .cv .contact p:last-child { border-bottom: 0; padding-bottom: 0; }