:root {
    --purple: #5f1f79;
    --purple-light: #d8a1ff;
    --purple-shadow: #baa4c9;
    --fondo-nav: #f4d4fcb3;
    --boton: linear-gradient(90deg, rgba(150, 38, 162, 1) 0%, rgba(161, 24, 148, 1) 43%, rgba(255, 106, 0, 1) 100%);
    --texto-oscuro: rgb(0, 0, 0);
    --texto-claro: #fff;
    --naranja-logo: #ff5722;
    --gris: gray;
    --border: #6868687c;
    --background: #f0f2f5;
    --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }

  main {
    margin-top: 120px;
    
  }
  .container-class{
    display: flex;
    justify-content:space-evenly;
    gap: 20px;
    margin:20px;
  }

  .profile-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 700px;
    height: 500px;
    margin: 40px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.255), 0 1px 3px rgba(0, 0, 0, 0.08);
  }
  .container-historial {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    height:  500px;
    width: 400px;
    margin: 40px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.255), 0 1px 3px rgba(0, 0, 0, 0.08);
  }
  .profile-info {
    display: grid;
    grid-template-columns:(3, 215px);
    grid-template-rows: repeat(9, 50px);
    text-align: center;
    justify-content: center;
    column-gap: 20px;
    row-gap: 3px;
  }

.datos{
  grid-column:2/3 ;
  grid-row: 2/7 ;
}

.nombre h2{
  font-size: medium;
  font-style: bolder;
}


.p1{
  grid-column: 1/2;
}
.p3{
  grid-column: 1/2;
}

#btn-preferencias{
  grid-column: 3/4;
  grid-row: 8/9 ;
  align-items: center;
  justify-content: center;
}
 
.preferencias{
  grid-column: 2/3;
  margin-top: 10px;
}





  
  .profile-info img {
    margin-bottom: 10px;
    width: 215px;
    height: 200px;
    border-radius: 10px;
    object-fit: cover;
    border: 3px solid #fff;
  }

  .edit-button {
    text-align: center;
    grid-column: 3/4;
    grid-row:3/4 ;
    
    
    
  }
  
  .edit-button button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .preferences {
    flex: 1;
  }
  
  .preferences h3 {
    margin-top: 0;
  }
  
  .preferences ul {
    list-style-type: none;
    padding: 0;
  }
  
  .preferences li {
    margin-bottom: 5px;
  }

  /* Estilos para el input de archivo */
  .file-input {
    display: none;
  }

  .upload-btn {
    background-color: var(--purple);
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;

    grid-column: 1/2;
    grid-row: 5/6;


  }

  .upload-btn:hover {
    background-color: var(--naranja-logo);
  }
  

  @media (max-width: 700px) {

    .profile-info {
      display:inline-block;
      grid-template-columns:300px;
      grid-template-rows: repeat(15, 50px);
  
      column-gap: 20px;
      row-gap: 3px;
    }

    
    .profile-container {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 397px;
      height: 1000px;
      gap: 20px;
      margin: 40px auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.255), 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .profile-info img {
      margin-bottom: 10px;
      width: 230px;
      height: 230px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #fff;
    }
    .edit-button {
      text-align: center;
      grid-column: 3/4;
      grid-row:3/4 ;
      margin-bottom: 30px;
    }

    .upload-btn {
      background-color: var(--purple);
      color: white;
      padding: 10px 15px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin-bottom: 20px;
  
      grid-column: 1/2;
      grid-row:6/7;
    }
  }


footer {
  background-color: #221c23c5;
  width: 100%;
  color: white;
  font-weight: bold;
}