/* ------------------ Modo Claro (default) ------------------ */
body {
  background-color: #f5f5f5;
  color: #212529;
  font-family: 'Segoe UI', sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}
body.modo-oscuro .card.bg-light {
  background-color: #222 !important;
  color: #ddd;
}
body.modo-oscuro .text-muted {
  color: #aaa !important;
}
body.modo-oscuro .text-secondary {
  color: #bbb !important;
}
/* Imagen de perfil */
.profile-img {
  max-width: 160px;
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
}

/* Íconos tecnológicos alineados */
.tech-icon {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: text-bottom;
}

/* Secciones */
.section-title {
  border-bottom: 2px solid #198754;
  padding-bottom: 5px;
  margin-top: 40px;
  margin-bottom: 20px;
}

/* Cards */
.card {
  background-color: #fff;
  border: 1px solid #dee2e6;
  box-shadow: 0 0 8px rgba(0,0,0,0.04);
}

/* Footer */
footer hr {
  margin-top: 3rem;
  margin-bottom: 1rem;
}

/* ------------------ Modo Oscuro ------------------ */
body.modo-oscuro {
  background-color: #121212;
  color: #e0e0e0;
}

body.modo-oscuro header {
  background-color: #1a1a1a !important;
  color: #f0f0f0 !important;
}

body.modo-oscuro header p,
body.modo-oscuro header h1,
body.modo-oscuro header .text-muted {
  color: #cccccc !important;
}

body.modo-oscuro .card,
body.modo-oscuro .modal-content {
  background-color: #1f1f1f;
  color: #e0e0e0;
  border-color: #333;
}
#contenidoCV {
  font-size: 15px;
}
/* Evita que se corten bloques importantes */
section, .card, .accordion-item {
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Para que los títulos no queden cortados entre páginas */
h2, h3, .section-title {
  page-break-after: avoid;
}
body.modo-oscuro .accordion-button {
  background-color: #2a2a2a;
  color: #e0e0e0;
  border-color: #444;
}

body.modo-oscuro .btn,
body.modo-oscuro .form-control {
  background-color: #2c2c2c;
  color: #e0e0e0;
  border-color: #444;
}

body.modo-oscuro .section-title {
  border-bottom: 2px solid #28a745;
}

body.modo-oscuro .profile-img {
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

body.modo-oscuro i,
body.modo-oscuro .tech-icon {
  color: #e0e0e0;
  filter: brightness(1.5);
  fill: #e0e0e0;
  opacity: 0.85;
}