/* Variables de Colores */
:root {
  --color-primary: #A22823;
  --color-primary-dark: #8a201d;
  --color-primary-light: #a3413d;
  --color-secondary: #c24f4f;
  --color-secondary-light: #f4a261;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-light: #ececec;
  --color-gray-dark: #333333;
}

/* Fuente y Estilos Generales */
body {
  font-family: 'Poppins', sans-serif;
  background-color: #f9f9f9;
  color: var(--color-black);
  margin: 0;
  padding: 0;
}

.b-white {
  background-color: var(--color-white);
}

.space {
  margin: 20%;
}

h1,
h2,
h3 {
  font-weight: bold;
}

.text-title {
  color: var(--color-primary);
  font-size: 2.5rem;
  font-weight: bold;
}

p {
  font-size: 1rem;
  line-height: 1.6;
  text-align: justify;
}

.divider-undecored {
  margin: 3rem;
}

.decored-primary {
  transform: rotate(-1deg);
  /* Rota el botón 10 grados hacia la izquierda */
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
  /* Añade una sombra hacia la parte inferior derecha */
  color: var(--color-primary);
  /* Cambia el color del texto a rojo */
  background-color: var(--color-white);
  /* Cambia el fondo a blanco */
}

#downloadCvBtn {
  transform: rotate(-1.5deg);
  /* Rota el botón 10 grados hacia la izquierda */
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.5);
  /* Añade una sombra hacia la parte inferior derecha */
  color: var(--color-primary);
  /* Cambia el color del texto a rojo */
  background-color: var(--color-white);
  /* Cambia el fondo a blanco */
  border: none;
  /* Elimina cualquier borde existente */
  outline: 5px solid var(--color-primary);
  /* Añade un borde rojo de 2 píxeles */
  outline-offset: -15px;
  /* Hace que el fondo sobresalga del borde */
  font-weight: bold;
  font-size: 30px;
  width: 60%;
}

#btn-decored {
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.5);
  /* Añade una sombra hacia la parte inferior derecha */
  color: var(--color-primary);
  /* Cambia el color del texto a rojo */
  background-color: var(--color-white);
  /* Cambia el fondo a blanco */
  border: none;
  /* Elimina cualquier borde existente */
  outline: 3px solid var(--color-primary);
  /* Añade un borde rojo de 3 píxeles */
  outline-offset: -10px;
  /* Hace que el fondo sobresalga del borde */
  font-weight: bold;
  padding: 10px;
  /* Ajusta el padding para darle una forma más ovalada */
  height: 1px;
  /* Ajusta la altura para darle una forma más ovalada */
  cursor: default;
}

/* Fondo con Textura */
.background-placeholder {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ececec;
  background-image: url('..\\assets\\images\\background.png');
  background-size: auto;
  /* Cambia el tamaño de la imagen para que se repita correctamente */
  background-repeat: repeat;
  /* Hace que la imagen se repita en mosaico */
  z-index: -2;
}

/* Efecto active: invierte colores y reduce tamaño */
#downloadCvBtn:active,
.custom-btn:active {
  transform: scale(0.95) rotate(-1.5deg);
  background-color: var(--color-white) !important;
  color: var(--color-primary) !important;
  box-shadow: inset 3px 3px 7px rgba(0, 0, 0, 0.3);
}

/* Botón Personalizado */
.custom-btn {
  background-color: #e63946;
  color: white;
  border-radius: 30px;
  padding: 12px 30px;
  font-size: 1.2rem;
  border: none;
  transition: all 0.2s ease;
  /* Transición para cambios */
}

.custom-btn:hover {
  background-color: #d62828;
}

/* Esquina Superior Derecha */
.top-right-decoration {
  position: absolute;
  top: 0;
  right: 0;
  width: 25%;
  height: 35%;
  background-image: url('..\\assets\\images\\banner.png');
  background-size: cover;
  z-index: -1;
  margin-top: -2px;
}

.subtitle_one {
  font-size: 1.5rem;
  font-weight: bold;
}

.subtitle_two {
  margin: 0%;
  font-size: 1.2rem;
}

/* Foto de Perfil Placeholder */
.profile-photo {
  width: 100%;
  height: 100%;
  background-image: url('..\\assets\\images\\jorge.png');
}

.portfolio-container .col-md-6 {
  transition: all 0.3s ease;
}

.portfolio-container img {
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.filter-btn.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* Estilos para el selector de idioma */
.bootstrap-select {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1000;
  background-color: transparent;
}

/* Cambiar color del hover del select */
.bootstrap-select .dropdown-menu .dropdown-item:hover,
.bootstrap-select .dropdown-menu .dropdown-item:focus {
  background-color: var(--color-primary-light); /* Cambia por el color que prefieras */
  color: var(--color-white); /* Asegura un buen contraste */
}

/* Cambiar color de la opción activa */
.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu .dropdown-item.active:hover {
  background-color: var(--color-primary-dark); /* Color personalizado para opción activa */
  color: var(--color-white); /* Color del texto */
}

.col1-mywork {
  transform: translateY(0px);
}

.col2-mywork {
  transform: translateY(30px);
}

/* Responsive para Movil */
@media (max-width: 768px) {
  .profile-photo {
    width: 150px;
    height: 150px;
  }

  .top-right-decoration {
    width: 100px;
    height: 100px;
  }

  .col1-mywork {
    transform: translateY(30px);
  }

  .col2-mywork {
    transform: translateY(30px);
  }

  #downloadCvBtn {
    /* Añade un borde rojo de 4 píxeles */
    outline: 4px solid var(--color-primary);
    /* Hace que el fondo sobresalga del borde */
    outline-offset: -10px;
    font-weight: bold;
    font-size: 1rem;
    width: 80%;
  }

  .mw-mobile {
    margin-bottom: .7rem;
  }

  .underline-red {
    width: 85%;
  }

  .top-right-decoration {
    width: 50%;
    height: 20%;
  }

  .mobile-space {
    margin: 20%;
  }
}