/* --- Reset Básico e Padrões Globais --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #f0f2f5; /* Cor de fundo para a página (fora do CV) */
  color: #1f2937;
  line-height: 1.6;
}

a {
  color: #58a6ff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* --- Estrutura Principal (Layout de 2 Colunas) --- */
.container {
  display: flex;
  max-width: 1100px;
  min-height: 100vh;
  margin: 20px auto;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden; /* Garante que o border-radius funcione */
}

/* --- Barra Lateral (Sidebar) --- */
.sidebar {
  flex: 0 0 36%; /* A sidebar terá 36% da largura total */
  background-color: #1e293b; /* Novo tom de dark mode (slate-800 do Tailwind) */
  color: #e2e8f0; /* Cor de texto clara para contraste */
  padding: 40px;
  display: flex;
  flex-direction: column;
}

.profile-picture {
  width: 120px;
  height: 120px;
  border-radius: 50%; /* Borda totalmente arredondada */
  object-fit: cover;
  margin-bottom: 25px;
  border: 3px solid #3b82f6; /* Borda azul destacada */
  box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.2); /* Sutil sombra azul */
}

.sidebar h1 {
  font-size: 2.2rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.sidebar .titulo {
  font-size: 1.2rem;
  font-weight: 500;
  color: #94a3b8; /* Tom mais claro para o subtítulo */
  border-bottom: 1px solid #334155; /* Borda sutil */
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.sidebar-section {
  margin-bottom: 25px;
}

.sidebar-section h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  border-bottom: 2px solid #3b82f6; /* Azul de destaque (tipo Tailwind) */
  padding-bottom: 5px;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Contato */
.contact-list {
  list-style: none;
}
.contact-list li {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.contact-list i {
  width: 20px;
  margin-right: 12px;
  color: #94a3b8; /* Ícones em tom suave */
  text-align: center;
}
.contact-list a {
  color: #e2e8f0; /* Links mais claros */
}
.contact-list span {
  color: #e2e8f0;
}

/* Skills (Tags) */
.skills-list {
  list-style: none;
}
.skills-list h4 {
  color: #e2e8f0;
  font-weight: 500;
  margin-top: 10px;
  margin-bottom: 8px;
}
.skills-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.skills-tags span {
  background-color: #334155; /* Fundo das tags mais suave */
  border: 1px solid #475569; /* Borda das tags */
  color: #e2e8f0;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px; /* Tags levemente arredondadas */
}

/* Idiomas */
.languages-list {
  list-style: none;
}
.languages-list li {
  margin-bottom: 5px;
}
.languages-list strong {
  color: #ffffff;
  font-weight: 500;
}

/* --- Conteúdo Principal --- */
.main-content {
  flex: 1; /* Ocupa o restante do espaço */
  padding: 40px;
  overflow-y: auto; /* Caso o conteúdo seja muito grande */
}

.main-section {
  margin-bottom: 30px;
}

.main-section:last-child {
  margin-bottom: 0;
}

.main-section h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b; /* Cabeçalho mais escuro */
  border-bottom: 2px solid #3b82f6;
  padding-bottom: 8px;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.main-section p, .main-section li {
  font-size: 0.95rem;
  color: #374151;
}

.main-section ul {
  padding-left: 20px;
  margin-top: 10px;
}

/* Experiência */
.job {
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
}
.job:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.job-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 2px;
}
.job-company {
  font-size: 1rem;
  font-weight: 500;
  color: #3b82f6;
  margin-bottom: 5px;
}
.job-date {
  font-size: 0.9rem;
  font-weight: 500;
  color: #6b7280;
  font-style: italic;
  margin-bottom: 10px;
}

/* Projetos */
.project {
  margin-bottom: 15px;
}
.project-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1f2937;
}

@media screen and (max-width: 768px) {
  
  /* 1. Ajuste do Container Principal */
  .container {
    flex-direction: column; /* Transforma linha em coluna (empilha) */
    width: 95%; /* Ocupa a largura quase total da tela mobile */
    margin: 10px auto; /* Reduz margens externas */
    min-height: auto; /* Remove altura mínima forçada */
    border-radius: 0; /* Remove arredondamento em telas muito pequenas (opcional) */
  }

  /* 2. Ajuste da Sidebar (Cabeçalho no Mobile) */
  .sidebar {
    width: 100%; /* Ocupa 100% da largura */
    padding: 30px 20px; /* Reduz padding para ganhar espaço */
    align-items: center; /* Centraliza itens flex (foto) */
    text-align: center; /* Centraliza textos */
  }

  /* Centraliza a lista de contatos e ícones */
  .contact-list li {
    justify-content: center;
  }
  
  /* Garante que o texto não quebre feio ao lado do ícone */
  .contact-list li span, 
  .contact-list li a {
    text-align: left;
  }

  /* Centraliza as tags de skills */
  .skills-tags {
    justify-content: center;
  }
  
  /* Centraliza a lista de idiomas */
  .languages-list {
    flex-direction: column; /* Empilha os idiomas se necessário ou mantém row */
    justify-content: center;
    gap: 5px;
  }

  /* 3. Ajuste do Conteúdo Principal */
  .main-content {
    padding: 30px 20px; /* Padding menor para mobile */
  }

  /* Ajuste de Tipografia para Mobile (Escala menor) */
  .sidebar h1 {
    font-size: 1.8rem;
  }
  
  .main-section h2 {
    font-size: 1.3rem;
    text-align: center; /* Títulos das seções centralizados ficam bons no mobile */
  }
}

@media print {

    /* --- 1. Reset Global para Impressão --- */
    body {
        background-color: #ffffff;
        font-family: 'Times New Roman', Times, serif;
        font-size: 11pt;
        color: #000000;
        line-height: 1.4;
    }

    /* --- 2. Reformatando o Layout para Uma Coluna --- */
    .container {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        box-shadow: none;
        border-radius: 0;
    }

    .sidebar {
        flex-basis: auto;
        width: 100%;
        background-color: #ffffff;
        color: #000000;
        padding: 20px 20px 0 20px;
    }

    .main-content {
        flex-basis: auto;
        width: 100%;
        padding: 0 20px 20px 20px;
    }
    
    /*
      MENTORIA: MUDANÇA #1 - Estilos da Foto de Perfil
      Garantimos que ela seja exibida e centralizada.
    */
    .profile-picture {
        display: block;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 0 auto 15px auto; /* Centraliza a foto */
        border: 2px solid #ccc; /* Borda simples */
        box-shadow: none;
    }

    /* --- 3. Estilizando o Novo "Cabeçalho" (Antiga Sidebar) --- */

    .personal-info {
        text-align: center;
        padding-bottom: 10px;
        border-bottom: 2px solid #ccc;
    }

    .sidebar h1 {
        color: #000;
        font-size: 2.2rem;
        margin-bottom: 0.25rem;
    }

    .sidebar .titulo {
        color: #333;
        font-size: 1.1rem;
        font-family: 'Inter', sans-serif;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 10px;
    }

    .sidebar-section h3 {
        display: none;
    }
    
    .sidebar-section:first-of-type .contact-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        list-style: none;
        padding: 0;
        margin: 0 0 10px 0;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }

    .sidebar-section:first-of-type .contact-list li {
        margin: 0 8px;
        font-size: 0.9rem;
        align-items: center;
    }

    .sidebar-section:has(h3:contains("Pessoal")) {
        display: none;
    }

    .contact-list i {
        color: #000;
        margin-right: 4px;
        font-size: 0.9em;
    }

    .contact-list a,
    .contact-list span {
        color: #000;
    }

    /* --- 4. Re-estilizando Seções de Skills, Formação e Idiomas --- */

    .sidebar-section:not(:first-of-type) h3 {
        display: block;
        font-family: 'Inter', sans-serif;
        font-size: 1.2rem;
        font-weight: 700;
        color: #000;
        border-bottom: 1px solid #999;
        padding-bottom: 2px;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .sidebar-section {
        margin-bottom: 15px;
    }

    .sidebar .contact-list div span {
        color: #000 !important;
        font-size: 1em !important;
    }
    .sidebar .contact-list {
        padding-left: 0;
    }
    .sidebar .contact-list i {
        display: none;
    }
    .sidebar-section:not(:first-of-type) .contact-list li {
        margin-bottom: 5px;
    }

    .skills-list {
        list-style: none;
        padding-left: 0;
    }
    .skills-list h4 {
        color: #000;
        font-weight: 700;
        margin-top: 5px;
        margin-bottom: 3px;
    }

    .skills-tags {
        display: inline;
    }

    .skills-tags span {
        background-color: transparent;
        border: none;
        color: #000;
        font-size: 1em;
        font-weight: normal;
        padding: 0;
        border-radius: 0;
        display: inline;
    }

    .skills-tags span:after {
        content: ", ";
    }
    .skills-tags span:last-child:after {
        content: ".";
    }

    .languages-list {
        list-style: none;
        padding-left: 0;
        display: flex;
        gap: 15px;
    }
    .languages-list strong {
        color: #000;
        font-weight: 700;
    }

    /* --- 5. Estilizando o Conteúdo Principal --- */
    .main-section h2 {
        font-family: 'Inter', sans-serif;
        font-size: 1.5rem;
        color: #000;
        border-bottom: 2px solid #000;
        padding-bottom: 5px;
        margin-bottom: 15px;
    }

    .main-section p,
    .main-section li {
        font-size: 1em;
        color: #000;
    }

    .main-section ul {
        padding-left: 25px;
        margin-top: 8px;
    }

    .job,
    .project {
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }

    .job:last-child,
    .project:last-child {
        border-bottom: none;
    }

    .job-title {
        font-size: 1.15rem;
        font-weight: 700;
        color: #000;
    }

    .job-company {
        font-size: 1.05rem;
        font-weight: 700;
        color: #333;
        margin-bottom: 2px;
    }

    .job-date {
        font-size: 1rem;
        font-weight: normal;
        color: #555;
        font-style: italic;
        margin-bottom: 8px;
    }

    .project-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: #000;
    }

    /* --- 6. Otimizações de Impressão (Links) --- */

    a {
        color: #000;
        text-decoration: none;
    }
    
    /*
      MENTORIA: MUDANÇA #2 - Destaque para links sociais
      Tornamos os links do LinkedIn e GitHub azuis e sublinhados.
    */
    .contact-list a[href*="linkedin.com"],
    .contact-list a[href*="github.com"] {
        color: #0000ee; /* Cor de link azul padrão */
        text-decoration: underline;
    }

    /* Mostra a URL completa ao lado do link */
    .sidebar-section:first-of-type .contact-list a[href^="http"]:after,
    .sidebar-section:first-of-type .contact-list a[href^="mailto"]:after {
        content: " [" attr(href) "]";
        font-size: 0.9em;
        color: #555;
        font-weight: normal;
        text-decoration: none; /* URL gerada não fica sublinhada */
    }
    
    /* Remove a URL duplicada do seu domínio e WhatsApp */
    .link-principal a:after,
    .contact-list a[href*="wa.me"]:after {
        content: "";
    }


    /* --- 7. Controle de Quebra de Página --- */
    
    h2, h3, h4 {
        page-break-after: avoid;
    }
    
    .job,
    .project,
    .main-section,
    .sidebar-section {
        page-break-inside: avoid;
    }
}