/* =========================================================
   CV visual · una página A4 (210 x 297 mm)
   Colores iguales que el portfolio: navy + cian.
   Los efectos solo se aplican en pantalla (@media screen);
   al imprimir o exportar a PDF la hoja queda estática.
   ========================================================= */

:root {
  --navy: #0b1222;
  --navy-soft: #16213a;
  --cyan: #0ea5e9;        /* cian algo más oscuro: se lee mejor impreso */
  --cyan-light: #7dd3fc;
  --indigo: #818cf8;
  --text: #1e293b;
  --muted: #64748b;
  --line: #e2e8f0;
}

/* Tamaño de página para imprimir / exportar a PDF */
@page { size: A4; margin: 0; }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #0b1222; /* navy alrededor de la hoja en pantalla (igual que el portfolio) */
  font-family: "Inter", Arial, sans-serif;
  font-size: 9.2pt;
  line-height: 1.45;
  color: var(--text);
  /* Imprime los fondos de color tal cual */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

ul { list-style: none; }
a { color: inherit; text-decoration: none; }

/* La hoja: dos columnas, lateral oscura y principal blanca */
.page {
  display: grid;
  grid-template-columns: 66mm 1fr;
  width: 210mm;
  height: 297mm;
  margin: 10mm auto;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.25);
}

/* ---------- Columna lateral ---------- */
.side {
  display: flex;
  flex-direction: column;
  gap: 4mm;
  padding: 8mm 6mm;
  background: var(--navy);
  color: #cbd5e1;
  font-size: 8.6pt; /* la lateral algo más compacta que el contenido principal */
}

.photo-wrap {
  position: relative;
  width: 30mm;
  height: 30mm;
  margin: 0 auto 1mm;
  padding: 1mm;
  border-radius: 50%;
  background: var(--cyan);
}
.photo {
  position: relative; /* por encima del anillo animado */
  display: block;
  width: 100%;
  height: 100%;
  border: 0.8mm solid var(--navy);
  border-radius: 50%;
  object-fit: cover;
}

.side h2 {
  margin-bottom: 2mm;
  padding-bottom: 1mm;
  border-bottom: 0.3mm solid var(--navy-soft);
  color: var(--cyan-light);
  font-size: 8pt;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.side h3 { margin: 2mm 0 1mm; color: #fff; font-size: 7.6pt; }

.contact li { position: relative; margin-bottom: 1.2mm; word-break: break-word; }
.label { display: block; color: var(--cyan-light); font-size: 6.6pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }

.chips { display: flex; flex-wrap: wrap; gap: 1mm; }
.chips li {
  padding: 0.5mm 2mm;
  border: 0.25mm solid #2b3a57;
  border-radius: 99px;
  background: var(--navy-soft);
  color: #e2e8f0;
  font-size: 7pt;
}

.plain li { margin-bottom: 1.4mm; }
.plain b { color: #fff; }

/* ---------- Columna principal ---------- */
.main { display: flex; flex-direction: column; gap: 6.2mm; padding: 11mm 10mm 9mm; }

.head h1 { font-size: 25pt; font-weight: 800; line-height: 1.05; color: var(--navy); letter-spacing: -0.01em; }
.head h1 span { color: var(--cyan); }
.role { margin-top: 2mm; color: var(--muted); font-size: 10.5pt; font-weight: 600; letter-spacing: 0.04em; }

.main h2 {
  display: flex;
  align-items: center;
  gap: 2mm;
  margin-bottom: 2.4mm;
  color: var(--navy);
  font-size: 9.4pt;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
/* Línea de color a la derecha de cada título */
.main h2::after {
  content: "";
  flex: 1;
  height: 0.4mm;
  background: linear-gradient(90deg, var(--cyan), transparent);
  transform-origin: left;
}

.main p { color: #334155; }
.main b { color: var(--navy); }

.item { position: relative; margin-bottom: 3.4mm; }
.item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 3mm; }
.item h3 { font-size: 9.4pt; color: var(--navy); }
.item h3 span { color: var(--muted); font-weight: 500; }
.item ul { margin-top: 0.8mm; }
.item li { position: relative; padding-left: 3.2mm; color: #334155; }
.item li::before { content: ""; position: absolute; left: 0; top: 1.8mm; width: 1.3mm; height: 1.3mm; border-radius: 50%; background: var(--cyan); }

/* "Así soy": cualidades en una línea; las de personalidad en el color de acento */
.main .traits b { color: var(--cyan); }

.main .date { flex-shrink: 0; color: var(--cyan); font-size: 7.8pt; font-weight: 700; white-space: nowrap; }

.edu li { display: flex; justify-content: space-between; gap: 3mm; margin-bottom: 1.6mm; color: #334155; }
.edu .date { margin-left: auto; }

/* Barra de acciones y avisos: los crea cv-effects.js (solo en pantalla) */
.cv-toolbar, .cv-toast, .copy-btn { display: none; }

/* =========================================================
   EFECTOS EN PANTALLA
   ========================================================= */
@media screen {
  /* Anillo de degradado que gira alrededor de la foto */
  .photo-wrap { background: none; }
  .photo-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--cyan), var(--indigo), transparent 70%, var(--cyan));
    animation: cv-spin 6s linear infinite;
  }

  /* Apellidos con un brillo que recorre el texto */
  .head h1 span {
    background: linear-gradient(90deg, var(--cyan), var(--indigo), var(--cyan));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: cv-shine 5s linear infinite;
  }

  /* Enlaces del contacto y del perfil */
  .contact a, .main a { transition: color 0.2s; }
  .contact a:hover { color: var(--cyan-light); text-decoration: underline; }
  .main a:hover b { color: var(--cyan); }

  /* Etiquetas: se elevan y brillan al pasar el ratón */
  .chips li { transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
  .chips li:hover {
    transform: translateY(-1px);
    border-color: var(--cyan);
    box-shadow: 0 0 10px rgb(14 165 233 / 0.45);
  }

  /* Bloques de experiencia y proyectos: barra de acento al pasar el ratón */
  .item::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -4mm;
    width: 0.8mm;
    border-radius: 1mm;
    background: linear-gradient(var(--cyan), var(--indigo));
    transform: scaleY(0);
    transition: transform 0.25s;
  }
  .item:hover::before { transform: scaleY(1); }

  /* Cada cualidad de "Así soy" (cv-effects.js las separa en <span>) */
  .traits span { display: inline-block; transition: transform 0.2s, color 0.2s; }
  .traits span:hover { transform: translateY(-1px); color: var(--cyan); }

  /* ---------- Entrada escalonada (la activa cv-effects.js) ---------- */
  .fx .side > *, .fx .main > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .fx .main h2::after { transform: scaleX(0); transition: transform 0.9s ease; transition-delay: calc(var(--i, 0) * 90ms + 250ms); }
  .fx .chips li { opacity: 0; transform: scale(0.8); transition: opacity 0.4s, transform 0.4s; transition-delay: calc(var(--c, 0) * 25ms + 400ms); }

  .fx.is-ready .side > *, .fx.is-ready .main > * { opacity: 1; transform: none; }
  .fx.is-ready .main h2::after { transform: scaleX(1); }
  .fx.is-ready .chips li { opacity: 1; transform: none; }

  /* Botones de copiar (email y teléfono) */
  .copy-btn {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-grid;
    place-items: center;
    padding: 0 1.4mm;
    border: 0.25mm solid #2b3a57;
    border-radius: 1mm;
    background: var(--navy-soft);
    color: var(--cyan-light);
    font: inherit;
    font-size: 6.4pt;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .contact li:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; }

  /* Barra flotante con acciones (solo al abrir el CV directamente, no dentro del portfolio) */
  .cv-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 20px auto 0;
  }
  .cv-toolbar a, .cv-toolbar button {
    padding: 10px 18px;
    border: 1px solid #1f2b45;
    border-radius: 999px;
    background: #111a2e;
    color: #e2e8f0;
    font: 600 14px "Inter", sans-serif;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  }
  .cv-toolbar .primary { border: 0; background: linear-gradient(135deg, #38bdf8, var(--indigo)); color: #04101f; }
  .cv-toolbar a:hover, .cv-toolbar button:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgb(56 189 248 / 0.35); border-color: #38bdf8; }

  /* Aviso "¡Copiado!" */
  .cv-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    display: block;
    padding: 10px 18px;
    border-radius: 999px;
    background: #38bdf8;
    color: #04101f;
    font: 600 14px "Inter", sans-serif;
    opacity: 0;
    transform: translate(-50%, 10px);
    transition: opacity 0.25s, transform 0.25s;
    pointer-events: none;
    z-index: 11;
  }
  .cv-toast.show { opacity: 1; transform: translate(-50%, 0); }
}

/* Sin animaciones para quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@keyframes cv-spin { to { transform: rotate(360deg); } }
@keyframes cv-shine { to { background-position: 200% center; } }

/* Al imprimir: sin márgenes, sombras ni efectos; solo la hoja */
/* En pantallas estrechas (móvil) la hoja A4 se reduce para que quepa sin scroll lateral.
   Solo en pantalla: al imprimir se mantiene el tamaño real. */
@media screen and (max-width: 840px) { .page { zoom: 0.9; margin: 4mm auto; } }
@media screen and (max-width: 740px) { .page { zoom: 0.75; } }
@media screen and (max-width: 620px) { .page { zoom: 0.62; } }
@media screen and (max-width: 520px) { .page { zoom: 0.5; } }
@media screen and (max-width: 440px) { .page { zoom: 0.44; } }

@media print {
  body { background: none; }
  .page { margin: 0; box-shadow: none; }
  .cv-toolbar, .cv-toast, .copy-btn { display: none !important; }
}