/* Modal por veda */
    #modal {
      display: none;
      position: fixed;
      top: -100%;
      left: 50%;
      transform: translateX(-50%);
      background-color: #fff;
      padding: 1em;
      border: 8px solid #235B4E;
      border-radius: 1em;
      max-width: 80%;
      min-width: 350px;
      min-height: 250px;
      text-align: justify;
      z-index: 2;
      animation: slideIn 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* Agregado 'forwards' para que la animación se quede en el estado final */
    }

    #overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1;
    }

    #closeBtn {
      background-color: #235B4E;
      color: #fff;
      font-weight: bold;
      padding: 1em;
      border: none;
      border-radius: 1em;
      cursor: pointer;
      display: block;
      margin: 0 auto;
    }

    #modalTitle {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      margin: 1em;
      color: #235B4E;
      font-size: 1.5em;
    }

    #closeIcon {
      position: absolute;
      top: 0.5em;
      right: 0.5em;
      cursor: pointer;
      font-size: 2em;
    }

    #text-aviso {
      font-size: 1.2em;
      font-weight: normal;
      color: #6F7271;
      text-align: justify;
    }

    @keyframes slideIn {
      0% {
        top: -100%;
      }
      80% {
        top: 48%;
        transform: translate(-50%, -50%);
      }

      90% {
        top: 49%;
        transform: translate(-50%, -50%);
      }

      100% {
        top: 50%;
        transform: translate(-50%, -50%);
      }

    }

/* Estilos generales para el contenedor principal */
  .daf_container {
    width: 100%; /* Ancho del contenedor ocupa todo el ancho disponible */
    margin: 0 auto; /* Centrar el contenedor horizontalmente */
    border-radius: 1em;
    overflow: hidden;
    box-shadow: 0 8px 12px rgba(5, 5, 5, 0.3); /* Sombra del contenedor */
    border: 5px solid #fff;
  }

  /* Estilos para el lado izquierdo (imagen) */
  .left-side {
    float: left;
    width: 30%; /* Ancho relativo del lado izquierdo */
    max-width: 200px; /* Ancho máximo del lado izquierdo */
    height: auto; /* Ajustar el alto del div izquierdo */
    padding: 10px;
    display: flex; /* Contenedor flexible */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
  }

  /* Estilos para la imagen */
  .left-side img {
    max-width: 100%;
    max-height: 100%; /* La imagen abarcará todo el espacio del div izquierdo */
    border-radius: 10px;
    object-fit: contain; /* Ajustar la imagen al tamaño del div manteniendo la relación de aspecto */
  }
  
  /* Estilos para el lado derecho */
  .right-side {
    overflow: hidden; /* Asegura que el lado derecho no se desborde */
    padding: 1em;
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
    background-image: linear-gradient(180deg,#B38E5D, #D4C19C); /* Fondo degradado inicial */
    transition: background-image 0.3s; /* Transición suave del degradado */
  }
  
  /* Estilos para el header del lado derecho */
  .right-side .header {
    background-color: transparent; /* Fondo transparente */
    padding: 10px;
    text-align: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: white; /* Color del texto del título en blanco */
  }
  
  /* Estilos para el cuerpo del lado derecho */
  .right-side .body {
    background-color: transparent; /* Fondo transparente */
    padding-top: 1em;
    padding-bottom: 1em;
  }
  
  /* Estilos para el footer del lado derecho */
  .right-side .footer {
    background-color: transparent;  /* Fondo transparente */
    width: 100%;
    margin-top: 1em;
    text-align: center;
  }
  
  /* Estilos para los campos de login */
  .login-inputs {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .login-inputs label {
    color: white; /* Color del texto del label en blanco */
    width: 200px;
    text-align: right;
  }

  .login-inputs label,
  .login-inputs input {
    margin-bottom: 1em;
  }
  
  .login-inputs input {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 0.5em;
    width: 100%;
  }
  
  /* Alinear los campos de login en el mismo renglón */
  .login-inputs label,
  .login-inputs input {
    display: inline-block;
    vertical-align: center;
  }
  
  .login-inputs label {
    width: 200px;
    text-align: right;
    margin-right: 0.5em;
  }
  
  /* Estilos para los campos de usuario y contraseña en el mismo renglón */
  .login-row {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Alineación horizontal de los elementos */
  }
  
  /* Estilos para el botón de Iniciar sesión */
  .login-inputs button {
    background-image: linear-gradient(180deg,#10312B, #235B4E); /* Fondo degradado del botón */
    border: 2px solid white; /* Borde blanco de 2px */
    color: #fff; /* Color del texto del botón */
    padding: 15px 30px; /* Espaciado interno */
    border-radius: 20px; /* Bordes redondeados */
    cursor: pointer;
    width: 200px; /* Ancho del botón */
    box-shadow: 0 8px 12px rgba(5, 5, 5, 0.3); /* Sombra del botón */
    transition: background-image 0.3s, box-shadow 0.3s; /* Transiciones suaves */
  }
  
/* Estilos para el logo */
.logo {
    width: 100%;
    height: 228px;
  }

  /* Limpiar el float para evitar problemas de altura */
  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Estilos para el hover del contenedor */
  .daf_container:hover .right-side {
    background-image: linear-gradient(180deg,#10312B, #235B4E); /* Nuevo degradado al poner el mouse sobre el contenedor */
    transition: background-image 0.3s;
  }
    
  /* Estilos para el hover del botón */
  .daf_container:hover .login-inputs button {
    background-image: linear-gradient(180deg,#BC955C, #DDC9A3); /* Nuevo degradado del botón al poner el mouse sobre el contenedor */
    transition: background-image 0.3s;
  }
  

  .container-sep {
    display: flex; /* Contenedor flexible */
    flex-direction: row;
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    margin-bottom: 2em;
  }
  
  .left-side-sep {
    flex: 1; /* Ocupa la mitad izquierda del contenedor */
    object-fit: contain; /* Ajustar la imagen al tamaño del div manteniendo la relación de aspecto */
  }
  
  .right-side-sep {
    flex: 1; /* Ocupa la mitad derecha del contenedor */
    padding: 1em; /* Espaciado interno para los párrafos */
    overflow: hidden;
  }
  
  .right-side-sep p {
    text-align: right;
  }
  
  .logo_sep {
    padding-left: 1em;
  }
  
  /* Media Query para ocultar la imagen en pantallas pequeñas y medianas */
  @media only screen and (max-width: 768px) {
    .left-side {
      display: none;
    }

    .right-side {
      width: 100%; /* Ajustar el ancho del lado derecho para ocupar todo el contenedor */
    }

    .container-sep {
      display: none;
    }
  }
  
  /* Media Query para pantallas medianas y grandes */
  @media only screen and (min-width: 768px) {
    .daf_container {
      width: 800px; /* Ancho fijo para pantallas medianas y grandes */
    }
  
    .right-side .login-inputs {
      max-width: 70%; /* Ancho máximo de los campos de login en pantallas grandes */
      margin: 0 auto; /* Centrar los campos de login en pantallas grandes */
    }
  }