/* ======= Premium CV — Clean Corporate (final) ======= */
:root{
  /* Paleta clara con panel diferenciado */
  --bg:#f5f7fa;          /* fondo */
  --panel:#fcfdff;       /* panel con leve tinte */
  --panel-2:#eef2f7;     /* secundarios */
  --text:#15171a;        /* texto principal */
  --muted:#5f646a;       /* texto secundario */
  --accent:#2f6fe7;      /* azul corporativo */
  --border:#d9dee6;      /* bordes */
  --chip:#e8f1ff;        /* chips */
  --chip-text:#214f9e;

  /* Tipografía y ritmo */
  --fs-body:14px;
  --fs-h2:20px;          /* secciones principales */
  --fs-h3:13px;          /* títulos laterales */
  --fs-sub:15px;         /* subtítulos de ítem */
  --lh:1.55;

  /* UI */
  --radius:10px;         /* bordes ejecutivos */
  --shadow:0 3px 14px rgba(18,39,77,.06);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  font-size:var(--fs-body);
  line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ======= Layout ======= */
.container{
  max-width:1100px;
  margin:32px auto 40px;
  padding:0 20px;
  display:grid;
  grid-template-columns:320px 1fr;
  gap:22px;
}

/* ======= Header ======= */
.cv-header{
  grid-column:1 / -1;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 18px 12px; /* compacto y equilibrado */
  display:grid;
  grid-template-columns:84px 1fr auto; /* avatar reducido */
  align-items:center;
  gap:12px;
  box-shadow:var(--shadow);
  position:relative;
}

/* Botones de idioma arriba a la derecha */
.lang-nav{
  position:absolute; top:6px; right:8px; left:auto;
  display:flex; gap:6px; z-index:1;
}
.lang-nav a{
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  padding:5px 8px;
  border-radius:6px;
  font-size:11px;
  text-decoration:none;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.lang-nav a:hover{border-color:var(--accent); color:var(--accent)}
.lang-nav a.active{background:var(--accent); color:#fff; border-color:var(--accent)}
.lang-nav a:focus-visible{outline:3px solid rgba(47,111,231,.3); outline-offset:2px}

/* Avatar */
.avatar{
  width:84px; height:84px;
  border-radius:50%;
  border:1px solid var(--border);
  object-fit:cover;
  box-shadow:none;
}

h1{font-size:24px; margin:0; font-weight:700; letter-spacing:.2px}
.title{color:var(--muted); margin-top:2px}

/* Contacto: bloque unificado en dos líneas */
.contact.unified{
  display:flex; flex-direction:column; gap:2px;
  text-align:right; font-size:13px;
}
.contact.unified ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:flex-end;
}
.contact.unified li{white-space:nowrap}
.contact.unified .sep{color:var(--border)}
.contact a, .contact a:visited{color:#355fbf; text-decoration:none; text-underline-offset:2px}
.contact a:hover{color:var(--accent); text-decoration:underline}

/* ======= Sidebar ======= */
aside{display:flex; flex-direction:column; gap:14px}

/* ======= Cards & Sections ======= */
.card,.section{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
  box-shadow:var(--shadow);
}

/* Títulos: lateral neutro, principal con acento */
.card h3,.section h2{
  margin:0 0 10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase
}
.section h2{
  color:var(--accent); font-size:var(--fs-h2); position:relative;
}
.section h2::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:1px;
  background:linear-gradient(90deg, rgba(47,111,231,.14), rgba(47,111,231,0));
}
.card h3{color:#2a2d31; font-size:var(--fs-h3)}

/* ======= Skills ======= */
.skill-block{margin-bottom:12px}
.skill-block h4{margin:0 0 3px; font-size:var(--fs-sub); font-weight:600; color:#22262b}
.skill-block p{margin:0; color:var(--text)}
.tags{display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0}
.tags li{font-size:12px; padding:5px 8px; border-radius:999px; background:var(--chip); color:var(--chip-text)}

/* ======= Lists ======= */
.list{margin:0; padding-left:18px}
.list li{margin:6px 0}

/* ======= Main / Experience ======= */
main{display:flex; flex-direction:column; gap:14px}
.card p,.section p,.bullets li{line-height:1.6}

.item{border-top:1px dashed rgba(47,111,231,.14); padding:10px 0}
.item:first-child{border-top:0}
.item h4{margin:0; font-size:var(--fs-sub); font-weight:700; letter-spacing:.2px; color:#22262b}

.item-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.meta{color:#6a7076; font-size:12.5px; font-weight:500; white-space:nowrap}
.bullets{margin-top:6px; padding-left:18px}
.bullets li{margin:3px 0}

/* Metadatos tecnológicos unificados */
.meta-kv{margin:.25rem 0 0; font-size:12.5px; color:#6a7076}
.meta-kv .kv-label{font-weight:600; color:#2a2d31}

/* ======= Footer ======= */
footer{
  grid-column:1 / -1; text-align:center; color:var(--muted);
  font-size:12px; padding:8px 0 26px;
}

/* ======= Responsive ======= */
@media (max-width:900px){
  .container{grid-template-columns:1fr; gap:16px}
  .cv-header{grid-template-columns:70px 1fr; padding:12px 14px}
  .avatar{width:70px; height:70px}
  .contact.unified{ text-align:left }
  .contact.unified ul{ justify-content:flex-start }
}

/* ======= Print ======= */
@media print{
  @page{ margin:14mm 12mm; }
  body{background:#fff; color:#111}
  .cv-header,.card,.section{box-shadow:none; border-color:#cfcfcf; background:#fff}
  .lang-nav{display:none}
  a{color:#111 !important; text-decoration:none !important}
}
/* --- HEADER: alineación perfecta y envoltura robusta --- */
.cv-header { row-gap: 6px; }
.contact.unified ul { gap: 14px; }
.contact.unified li { display: inline-flex; align-items: center; }
.contact.unified .sep { margin: 0 2px; }

/* Evita que los separadores salten de línea */
.contact.unified .sep,
.contact.unified a { white-space: nowrap; }

/* --- TIPOGRAFÍA: claridad en títulos y bullets --- */
.section h2 { letter-spacing: .55px; }
.item h4 { letter-spacing: .25px; }
/* ======= Premium CV — Clean Corporate (final) ======= */
:root{
  /* Paleta clara con panel diferenciado */
  --bg:#f5f7fa;          /* fondo */
  --panel:#fcfdff;       /* panel con leve tinte */
  --panel-2:#eef2f7;     /* secundarios */
  --text:#15171a;        /* texto principal */
  --muted:#5f646a;       /* texto secundario */
  --accent:#2f6fe7;      /* azul corporativo */
  --border:#d9dee6;      /* bordes */
  --chip:#e8f1ff;        /* chips */
  --chip-text:#214f9e;

  /* Tipografía y ritmo */
  --fs-body:14px;
  --fs-h2:20px;          /* secciones principales */
  --fs-h3:13px;          /* títulos laterales */
  --fs-sub:15px;         /* subtítulos de ítem */
  --lh:1.55;

  /* UI */
  --radius:10px;         /* bordes ejecutivos */
  --shadow:0 3px 14px rgba(18,39,77,.06);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  font-size:var(--fs-body);
  line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ======= Layout ======= */
.container{
  max-width:1100px;
  margin:32px auto 40px;
  padding:0 20px;
  display:grid;
  grid-template-columns:320px 1fr;
  gap:22px;
}

/* ======= Header (grid simétrico: Avatar | Nombre | Contacto) ======= */
.cv-header{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:88px 1fr auto;
  align-items:center;
  column-gap:16px;
  row-gap:6px;
  padding:16px 18px 14px;
  border-radius:var(--radius);
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:0 2px 12px rgba(18,39,77,.05);
  position:relative;
}

/* Botones de idioma arriba a la derecha */
.lang-nav{
  position:absolute;
  top:6px;
  right:8px;
  left:auto;
  display:flex;
  gap:6px;
  z-index:3;
}
.lang-nav a{
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  padding:5px 8px;
  border-radius:6px;
  font-size:11px;
  text-decoration:none;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.lang-nav a:hover{border-color:var(--accent); color:var(--accent)}
.lang-nav a.active{background:#2f6fe7; color:#fff; border-color:#2f6fe7}
.lang-nav a:focus-visible{outline:3px solid rgba(47,111,231,.35); outline-offset:2px; border-radius:6px}

/* Avatar */
.avatar{
  width:84px; height:84px;
  border-radius:50%;
  border:1px solid var(--border);
  object-fit:cover;
  box-shadow:none;
}

h1{font-size:24px; margin:0; font-weight:700; letter-spacing:.2px}
.title{color:var(--muted); margin-top:2px}

/* Contacto: bloque unificado alineado a la derecha */
.contact.unified{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  font-size:13px;
}
.contact.unified ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:flex-end;
}
.contact.unified li{display:inline-flex; align-items:center; white-space:nowrap}
.contact.unified .sep{color:var(--border); margin:0 2px}
.contact a, .contact a:visited{color:#355fbf; text-decoration:none; text-underline-offset:2px; white-space:nowrap}
.contact a:hover{color:var(--accent); text-decoration:underline}

/* ======= Sidebar ======= */
aside{display:flex; flex-direction:column; gap:14px}

/* ======= Cards & Sections ======= */
.card,.section{
  background:var(--panel);
  border:1px solid #e3e7ee;            /* borde más fino */
  border-radius:var(--radius);
  padding:14px 16px;
  box-shadow:0 2px 12px rgba(18,39,77,.05); /* sombra fina */
}

/* Títulos: lateral neutro, principal con acento */
.card h3,.section h2{
  margin:0 0 10px;
  font-weight:700;
  letter-spacing:.55px;
  text-transform:uppercase;
}
.section h2{
  color:var(--accent);
  font-size:var(--fs-h2);
  position:relative;
}
.section h2::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-8px;
  height:1px;
  background:linear-gradient(90deg, rgba(47,111,231,.14), rgba(47,111,231,0));
}
.card h3{color:#2a2d31; font-size:var(--fs-h3)}

/* ======= Skills ======= */
.skill-block{margin-bottom:12px}
.skill-block h4{margin:0 0 3px; font-size:var(--fs-sub); font-weight:600; color:#22262b}
.skill-block p{margin:0; color:var(--text)}
.tags{display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0}
.tags li{font-size:12px; padding:5px 8px; border-radius:999px; background:var(--chip); color:var(--chip-text)}

/* ======= Lists ======= */
.list{margin:0; padding-left:18px}
.list li{margin:6px 0}

/* ======= Main / Experience ======= */
main{display:flex; flex-direction:column; gap:14px}
.card p,.section p,.bullets li{line-height:1.6}

.item{border-top:1px dashed rgba(47,111,231,.14); padding:10px 0}
.item:first-child{border-top:0}
.item h4{margin:0; font-size:var(--fs-sub); font-weight:700; letter-spacing:.25px; color:#22262b}

.item-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.meta{color:#66707a; font-size:12.5px; font-weight:500; white-space:nowrap}
.bullets{margin-top:6px; padding-left:20px}
.bullets li{margin:3px 0}
.bullets li::marker{ color: rgba(47,111,231,.75); }

/* Metadatos tecnológicos unificados */
.meta-kv{margin:.25rem 0 0; font-size:12.5px; color:#66707a}
.meta-kv .kv-label{font-weight:600; color:#2a2d31}

/* ======= Footer ======= */
footer{
  grid-column:1 / -1;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  padding:8px 0 26px;
}

/* ======= Responsive ======= */
@media (max-width:900px){
  .container{grid-template-columns:1fr; gap:16px}
  .cv-header{grid-template-columns:70px 1fr; padding:12px 14px}
  .avatar{width:70px; height:70px}
  .contact.unified{align-items:flex-start}
  .contact.unified ul{justify-content:flex-start}
}

/* ======= Print ======= */
@media print{
  @page{ margin:14mm 12mm; }
  body{background:#fff; color:#111}
  .cv-header,.card,.section{box-shadow:none; border-color:#cfcfcf; background:#fff}
  .lang-nav{display:none}
  a{color:#111 !important; text-decoration:none !important}
  .item{break-inside:avoid}
  h2, h3{break-after:avoid}
  p, li{orphans:2; widows:2}
}

/* Bullets con mejor alineación óptica */
.bullets { padding-left: 20px; }
.bullets li::marker { color: rgba(47,111,231,.75); }

/* --- TARJETAS: borde y sombra más finos --- */
.card, .section { border-color: #e3e7ee; box-shadow: 0 2px 12px rgba(18,39,77,.05); }

/* --- METADATOS: leyenda más legible --- */
.meta, .meta-kv { color: #66707a; }

/* --- IDIOMAS: botón activo más claro en tema claro --- */
.lang-nav a.active { background: #2f6fe7; color: #fff; border-color: #2f6fe7; }

/* --- ACCESIBILIDAD: foco consistente --- */
a:focus-visible,
.lang-nav a:focus-visible { outline: 3px solid rgba(47,111,231,.35); outline-offset: 2px; border-radius: 6px; }

/* --- PRINT: control de partición y viudas/huérfanas --- */
@media print {
  .item { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  p, li { orphans: 2; widows: 2; }
}