:root {
  --ink: #0F172A;
  --text: #1E293B;
  --muted: #475569;
  --soft: #64748B;
  --accent: #2563EB;
  --accent-2: #93C5FD;
  --line: #DBEAFE;
  --side: #F1F5F9;
  --chip-line: #CBD5E1;
  --page: #E2E8F0;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--page);
  font-size: 9pt;
  line-height: 1.36;
}
a { color: inherit; text-decoration: none; }

/* Barra superior (sólo en pantalla) */
.toolbar {
  max-width: 210mm; margin: 16px auto 0; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 13px;
}
.toolbar .back { color: var(--muted); font-weight: 500; }
.toolbar .back:hover { color: var(--ink); }
.toolbar .right { display: flex; align-items: center; gap: 10px; }
.toolbar .pdf {
  background: var(--ink); color: #fff; padding: 7px 14px; border-radius: 8px; font-weight: 600;
}

/* Selector de idioma: pastilla chica, la opción activa rellena */
.lang {
  display: inline-flex; padding: 3px; border-radius: 999px;
  background: rgba(255,255,255,.7); border: 1px solid var(--chip-line);
  font-size: 11.5px; font-weight: 700; letter-spacing: .6px;
}
.lang a, .lang span { padding: 4px 11px; border-radius: 999px; color: var(--soft); transition: color .15s, background .15s; }
.lang a:hover { color: var(--ink); }
.lang .on { background: var(--ink); color: #fff; }

.page {
  width: 210mm; min-height: 297mm; margin: 16px auto 32px;
  background: #fff; box-shadow: 0 10px 40px rgba(15,23,42,.15);
  display: flex; flex-direction: column;
}

header {
  background: linear-gradient(120deg, #0B1220 0%, #0F172A 55%, #1E3A8A 100%);
  color: #fff; padding: 7mm 12mm 6.5mm; display: flex; gap: 8mm; align-items: center;
}
header .who { flex: 1; min-width: 0; }
header h1 { font-size: 21pt; font-weight: 800; letter-spacing: .5px; line-height: 1.05; }
header h1 span { color: var(--accent-2); }
header .role { margin-top: 2.2mm; font-size: 12pt; font-weight: 600; color: var(--accent-2); }
header .tagline { margin-top: 1mm; font-size: 9.2pt; color: #CBD5E1; }
header .contact { margin-top: 3mm; display: flex; flex-wrap: wrap; gap: 1.2mm 6mm; font-size: 8.6pt; color: #E2E8F0; }
header img {
  width: 27mm; height: 27mm; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 3px solid #3B82F6; box-shadow: 0 0 0 4px rgba(59,130,246,.25);
}

.body { display: flex; flex: 1; }
aside { width: 64mm; background: var(--side); padding: 5mm 6mm 4mm 9mm; flex-shrink: 0; }
main { flex: 1; padding: 5mm 10mm 4mm 7mm; min-width: 0; }

h2 {
  font-size: 9.4pt; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ink); border-bottom: 1.5px solid var(--line); padding: 0 0 1.2mm 2.4mm;
  margin: 3.8mm 0 2mm; position: relative;
}
h2::before { content: ""; position: absolute; left: 0; top: .5mm; width: 1mm; height: 3.2mm; background: var(--accent); border-radius: 1px; }
aside h2:first-child, main h2:first-child { margin-top: 0; }

.edu { margin-bottom: 1.6mm; }
.edu b { display: block; font-size: 8.8pt; color: var(--ink); }
.edu span { display: block; font-size: 8.3pt; color: var(--muted); }
.edu i { font-size: 8pt; color: var(--soft); }
.kv { font-size: 8pt; color: var(--muted); margin-bottom: 1.6mm; }
.kv.flat { color: var(--text); font-weight: 500; font-size: 8.2pt; }
.kv b { display: block; font-size: 8.4pt; color: var(--ink); margin-bottom: .2mm; }
.row { display: flex; justify-content: space-between; font-size: 8.8pt; margin-bottom: .8mm; }
.row b { color: var(--accent); font-weight: 600; }

.summary { font-size: 9pt; text-align: justify; }
.summary strong { color: var(--ink); }

.job { margin-bottom: 2.8mm; }
.job-head { display: flex; justify-content: space-between; align-items: baseline; gap: 3mm; }
.job-title { font-size: 10pt; font-weight: 700; color: var(--ink); }
.job-title em { font-style: normal; color: var(--accent); font-weight: 600; }
.job-date { font-size: 8.6pt; font-weight: 600; color: var(--soft); white-space: nowrap; }
.job-sub { font-size: 8.6pt; color: var(--muted); margin: .4mm 0 1.2mm; }
ul { padding-left: 4mm; }
li { margin-bottom: .6mm; }
li::marker { color: var(--accent); }
li strong { color: var(--ink); }

.roles { margin-top: 3mm; font-size: 8.2pt; color: var(--muted); background: #F8FAFC; border: 1px solid var(--line); border-radius: 2mm; padding: 2mm 3mm; }
.roles b { color: var(--ink); }

@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  .toolbar { display: none; }
  .page { margin: 0; box-shadow: none; width: 210mm; height: 297mm; min-height: 0; overflow: hidden; }
}

/* Pantallas chicas: una columna, primero perfil y experiencia */
@media screen and (max-width: 820px) {
  body { font-size: 14px; }
  .kv { font-size: 13px; }
  .page { width: auto; min-height: 0; margin: 12px 16px 24px; }
  header { flex-direction: column-reverse; align-items: flex-start; padding: 20px 16px; gap: 14px; }
  header h1 { font-size: 26px; }
  header img { width: 84px; height: 84px; }
  .body { flex-direction: column; }
  aside { width: auto; padding: 16px; order: 2; }
  main { padding: 16px; }
  .job-head { flex-direction: column; gap: 2px; }
  .summary { text-align: left; }
}