/* Recuadros y botones */
.box {
    border-radius: 5px;
    padding: 0px;

    height:auto;
    width: 410px; /* El ancho fijo podría estar causando problemas si el contenedor padre es más pequeño */
    margin: 0px; /* Ajustado el margen para separar los .box */
    max-width: 700px; /* Esto está bien, pero es redundante con width: 600px; */
    overflow-x: auto; /* Podrías cambiarlo a hidden si no esperas desbordamiento horizontal */
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box; /* Asegúrate de que el borde y el padding estén incluidos */
  }
  
  
  /* Estilo para la cabecera de .box */
  .box-header {
    background-color: #19d9b3;
    color: #ffffff; /* Cambiado a blanco */
    padding: 0px;
    margin: 0;
    border-bottom: 0px solid #6cbdb5;
    width: 100%;
    height: auto; /* Cambiado a auto para permitir que la altura se ajuste automáticamente */
    box-sizing: border-box; /* Agregado para incluir el borde y el relleno en el ancho y alto */
    text-align: center;
    padding: 10px 0; 
    font-size: 18px; 
  } 
  
  /* Estilo para el cuerpo de .box */
  .box-body {
    border: 1px solid #6cbdb5;
    background-color: #c8d6bf;
    padding: 0px;
    display: flex;
    margin: 0px 0px 0px 0px; /* 50px de margen superior, 0px de margen derecho, inferior e izquierdo */
    flex-direction: column; /* Apilar elementos verticalmente */
    width: 100%;
  }
  
  /* Estilo para el campo de entrada y etiqueta */
  .box-body label,
  .box-body input {
    margin-bottom: 2px; /* Espaciado entre etiquetas e inputs */
  }
  
  .form-field {
    display: block; /* Mostrar el elemento como bloque */
    margin-bottom: 13px; /* Agregar un margen inferior de 10px para separar elementos */
  }
  
  
  /* Estilo para alinear a la derecha el botón de iniciar sesión */
  .box-body button {
    height: auto;
    width:min-content;
    margin-top: auto;
    text-align: center;
  }
  
  /* Estilo para el pie de .box */
  .box-footer {
    background-color: #19d9b3;
    color: #ffffff; /* Cambiado a blanco */
    padding: 10px;
    margin: 0;
    border-top: 0px solid #6cbdb5;
    width: 100%;
    height: auto; /* Cambiado a auto para permitir que la altura se ajuste automáticamente */
    box-sizing: border-box; /* Agregado para incluir el borde y el relleno en el ancho y alto */
    text-align: center;
  }
  
  /* Centrar vertical y horizontalmente */
  .center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .center-devise {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Si quieres que los elementos estén centrados verticalmente también */
  }
  
  /* Centrar verticalmente */
  .center-vertical {
    display: flex;
    align-items: center;
    height: 100vh; /* Establecer altura al 100% de la ventana para centrado vertical */
  }
  
  /* Centrar horizontalmente */
  .center-horizontal {
    display: flex;
    justify-content: center;
    width: 100%; /* Establecer ancho al 100% para centrado horizontal */
  }
  
  .button {
    background-color: #6cbdb5; /* Color intermedio para botones */
    color: #1a1f1e; /* Texto en botones */
    border: 1px solid #93ccc6; /* Borde con color de contraste */
    border-radius: 3px; /* Esquinas redondeadas en botones */
    padding: 2px 2px; /* Espaciado interno en botones */
    text-decoration: none; /* Eliminar subrayado en enlaces que parecen botones */
    display: inline-block; /* Hacer que los enlaces se vean como bloques */
    cursor: pointer; /* Cambiar el cursor al pasar sobre el botón */
    font-family: 'Perpetua', 'Baskerville', 'Big Caslon', 'Palatino Linotype', 'Palatino', serif;
    margin: 0 auto; /* Centrar horizontalmente */
    margin-left: 10px; /* Esto empujará el botón hacia la derecha del header */
    margin: 5px; /* Establece un margen de 10px desde el extremo derecho */
    text-align: center;
    width: auto;
  }
  
  .button-start {
    background-color: #93ccc6; /* Color intermedio para botones */
    color: #1a1f1e; /* Texto en botones */
    border: 2px solid #6cbdb5; /* Borde con color de contraste */
    border-radius: 5px; /* Esquinas redondeadas en botones */
    padding: 4px 4px; /* Espaciado interno en botones */
    text-decoration: none; /* Eliminar subrayado en enlaces que parecen botones */
    display: inline-block; /* Hacer que los enlaces se vean como bloques */
    cursor: pointer; /* Cambiar el cursor al pasar sobre el botón */
    font-family: 'Perpetua', 'Baskerville', 'Big Caslon', 'Palatino Linotype', 'Palatino', serif;
    margin: 0 auto; /* Centrar horizontalmente */
    text-align: center;
    width: auto;
  }
  
  .new_user {
    width: 400px; /* Restamos el padding horizontal (20px a cada lado) */
    margin: 0 auto; /* Centramos el formulario horizontalmente */
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* Esto incluirá el padding y el borde en el ancho total */
    /* Puedes agregar más estilos si es necesario */
  }
  
  
  .button-close {
    background-color: #93ccc6;
    color: #1a1f1e;
    border: 2px solid #6cbdb5;
    border-radius: 5px;
    padding: 4px 4px; /* Cambiado para agregar más espacio a la derecha */
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    font-family: 'Perpetua', 'Baskerville', 'Big Caslon', 'Palatino Linotype', 'Palatino', serif;
    margin: 0 auto; /* Centrar horizontalmente */
    margin-left: auto; /* Esto empujará el botón hacia la derecha del header */
    margin-right: 15px; /* Establece un margen de 10px desde el extremo derecho */
    text-align: center;
    width: auto;
  }
  
  .center-button {
    display: flex;
    justify-content: center;
  }
  
  .actions {
    margin: 0 auto; /* Centrar horizontalmente */
    width:min-content;
  }
  
  
  
  /* Estilos para los campos de entrada (class="field") */
  .field {
    margin: 0 auto; /* Centrar horizontalmente */
    text-align: center;
    margin-bottom: 10px; /* Agrega un espacio entre los campos */
    width:min-content;
  }
  
  /* Estilos personalizados para otros elementos dentro de los campos o acciones */
  .field label {
    font-weight: bold; /* Hace que las etiquetas de los campos sean negritas */
  }
  
  .actions button {
    background-color: #93ccc6; /* Cambiado a color correspondiente a color3 */
    color: #1a1f1e; /* Cambiado a color correspondiente a color5 */
    border: none; /* Sin cambios */
    padding: 5px 10px; /* Sin cambios */
    cursor: pointer; /* Sin cambios */
  }




  
/* CAJA CON DOS CLUMNAS */ 

.box2 {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* Ajustado para estirar los elementos hijos */
  width: 800px;
  border-radius: 5px;
  padding: 0;
  margin: 0 auto; /* Centrado horizontalmente */
  box-sizing: border-box;
}

.box2 .box-body {
  background-color: #ffffff; /* Cambiado a blanco para el fondo */
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  margin: 0px 0px 0px 0px;
}

.box2 .form-rows {
  display: flex;
  width: 100%;
}

.box2 .form-column {
  flex: 1;
  padding: 0 5px;
}

.box2 .form-field {
  margin-bottom: 10px;
}