/* Configuración general y tamaño A4 */
:root {
  --accent: #f37a32;
  --text-main: #333333;
  --text-muted: #555555;
  --bg-page: #ffffff;
  --bg-body: #e5e5e5;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg-body);
  color: var(--text-main);
}

/* Contenedor A4 */
.page {
  width: 210mm;
  min-height: 297mm;
  margin: 10mm auto;
  background: var(--bg-page);
  box-shadow: 0 0 4mm rgba(0, 0, 0, 0.15);
  padding: 18mm 20mm;
}

/* Ajustes para impresión */
@page {
  size: A4;
  margin: 0;
}

@media print {
  body {
    background: #ffffff;
  }
  .page {
    margin: 0;
    box-shadow: none;
    page-break-after: always;
  }
}

/* HEADER */
.cv-header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dddddd;
  padding-bottom: 10mm;
  margin-bottom: 8mm;
}

.photo-wrapper {
  margin-right: 12mm;
}

.profile-photo {
  width: 45mm;
  height: 45mm;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent);
}

.header-text {
  flex: 1;
}

.name {
  margin: 0 0 2mm;
  font-size: 22pt;
  font-weight: 700;
}

.subtitle {
  margin: 0;
  font-size: 10pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Secciones generales */
.section-title {
  font-size: 9pt;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin: 0 0 3mm;
  color: var(--text-muted);
}

.profile-section {
  margin-bottom: 10mm;
  font-size: 10pt;
}

.profile-section p {
  margin: 0 0 3mm;
  line-height: 1.4;
}

/* Grid principal */
.main-grid {
  display: grid;
  grid-template-columns: 1.1fr 2fr;
  column-gap: 12mm;
}

/* Sidebar */
.sidebar .side-block {
  margin-bottom: 8mm;
}

.list-plain {
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: 9.5pt;
}

.list-plain li + li {
  margin-top: 1.5mm;
}

/* Bloques genéricos */
.item {
  margin-bottom: 5mm;
}

.item-title {
  margin: 0;
  font-size: 10pt;
  font-weight: 600;
}

.item-subtitle {
  margin: 0.5mm 0;
  font-size: 9pt;
  color: var(--text-muted);
}

.item-dates {
  margin: 0 0 1.5mm;
  font-size: 8.8pt;
  color: var(--text-muted);
}

.item-text {
  margin: 0;
  font-size: 9.5pt;
  line-height: 1.4;
}

/* Habilidades y desarrollo */
.list-bullets {
  margin: 0;
  padding-left: 4mm;
  font-size: 9.5pt;
}

.list-bullets li {
  margin-bottom: 1.5mm;
}

/* Contenido principal derecha */
.content .content-block {
  margin-bottom: 8mm;
}

/* Referencias */
.refs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4mm 8mm;
  font-size: 9pt;
}

.ref-item {
  border-left: 2px solid var(--accent);
  padding-left: 3mm;
}

.ref-name {
  margin: 0;
  font-weight: 600;
}

.ref-role {
  margin: 0.5mm 0;
  color: var(--text-muted);
}

.ref-contact {
  margin: 0;
}

/* --- ESTILOS DE LA BARRA DE NAVEGACIÓN --- */
#navbar {
    position: fixed; /* Mantiene el menú fijo en la pantalla */
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95); /* Fondo blanco ligeramente transparente */
    backdrop-filter: blur(5px); /* Efecto moderno de desenfoque */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between; /* Separa el logo de los enlaces */
    align-items: center;
    padding: 10px 40px; /* Espaciado interno */
    box-sizing: border-box;
    transition: top 0.3s ease-in-out; /* Animación suave al ocultar/mostrar */
    z-index: 9999; /* Asegura que el menú esté por encima de todo */
}

/* Estilo para la foto de perfil */
.profile-pic {
    width: 45px; /* Tamaño de la foto */
    height: 45px;
    border-radius: 50%; /* La hace un círculo perfecto */
    object-fit: cover; /* Evita que la foto se deforme */
    border: 2px solid #2563eb; /* Borde de color (puedes cambiarlo) */
    transition: transform 0.3s ease;
}

.profile-pic:hover {
    transform: scale(1.1); /* Efecto de crecimiento al pasar el mouse */
}

/* Estilo de los enlaces */
.nav-links a {
    text-decoration: none;
    color: #334155;
    font-weight: 500;
    margin-left: 25px;
    font-family: 'Ubuntu', sans-serif; /* Usando la fuente que agregamos */
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #2563eb; /* Color al pasar el mouse */
}

/* IMPORTANTE: Agrega este padding al body para que el menú no tape el título de tu web al inicio */
body {
    padding-top: 70px; 
}

/* Ajuste para pantallas pequeñas (Móviles) */
@media (max-width: 600px) {
    #navbar {
        padding: 10px 20px;
    }
    .nav-links a {
        margin-left: 15px;
        font-size: 14px;
    }
}