.modalnew
{
  background-color: rgba(0,0,0,.0);
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index: 9999999;
}
.modalnew-contenido
{
  /*background-color:aqua;*/
  /*background-color: rgba(192,249,255,.8);*/
  border-radius: 34px;
  background-color: rgba(211,211,211,.9);
  width:50%;
  padding: 10px 20px;
  margin: 10% auto;
  /*margin-left: 25%;
  margin-top: 10%;*/
  position: relative;
  z-index: 9999999;
}
h5
{
    font-size: 16px;  /* Tamaño de fuente normal */
}
.button 
{
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px;
}
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */ 
.button4 {background-color: #e7e7e7; color: black;} /* Gray */ 
.button5 {background-color: #555555;} /* Black */
.button6 {background-color: #feb900;} /* Ladrillo */
/* Cambia el color cuando el botón se pasa por encima */
.button6:hover 
{
    background-color: #fea600; /* Color de fondo al pasar el ratón */
    color: white;
    cursor: pointer; /* Cambio de cursor al pasar por encima */
}
.alertify 
{
   overflow: auto; 
   max-height:400px;
}
input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
  padding: 10px;
}
#miModalAlert 
{
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(30, 30, 30, 0.3); /* fondo tenue semitransparente */
  /*backdrop-filter: blur(6px);              /* ← efecto de desenfoque */
  -webkit-backdrop-filter: blur(6px);      /* ← para Safari */
  width: 100%;
  height: 100%;
  z-index: 9998;
  justify-content: center;
  align-items: center;
  display: flex;
}
/* Contenido del modal */
#miAlert 
{
  /*max-height: 80vh;*/
}
.modalnew-contenido-alert 
{
  background: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  max-width: 96%;
  max-height: 92vh;
  overflow-y: auto;
  z-index: 9999;
  /*backdrop-filter: blur(10px);               /* Si quieres un mini efecto interno también */
  -webkit-backdrop-filter: blur(10px);
}
.language-selector 
{
    position: relative;
    display: inline-block;
    left: -5px; /* desplaza 5px a la izquierda */
}

.language-selected 
{
    cursor: pointer;
    display: flex;
    align-items: center;
}

.language-selected img 
{
    width: 30px;
    height: 20px;
    border: 1px solid #ccc;
}

.language-options 
{
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    padding: 1px;
    z-index: 100;
}

.language-options img 
{
    width: 30px;
    height: 20px;
    margin: 1px;
    cursor: pointer;
    border: 1px solid transparent;
}

.language-options img:hover 
{
    border: 1px solid #000;
}

.mifondo 
{
  padding: 26vw 0 3vw 0; 
  background: url('../img/fondo.jpg') no-repeat top center fixed; 
  background-size: cover;
}

/* Estilo para pantallas grandes (PC) */
@media (min-width: 992px) 
{
    .hijo 
    {
        width: 200%; /* Ajusta el ancho del hijo */
        max-width: 1300px; /* Evita que sea demasiado grande */
        position: relative; /* Asegura que los ajustes de transform funcionen correctamente */
        left: 50%; /* Lo mueve al centro del padre */
        transform: translateX(-50%); /* Lo centra completamente */
    }
    .navbar-collapse 
    {
        position: fixed; /* Menú fijo en pantallas grandes */
        top: 0;
        left: 0;
        right: 0;
    }
    
    .navbar-nav {
        text-align: right; /* Alinear los elementos a la derecha en pantallas grandes */
    }
    #mivideo
    {
      width: 400px;
    }  
}

/* Estilo para pantallas pequeñas (móviles) */
@media (max-width: 991px) 
{
    .navbar-collapse 
    {
        position: static !important; /* Menú no fijo en móviles */
        left: 0;
        right: 0;
    }
    .navbar-nav 
    {
        text-align: center; /* Centrar los elementos en móviles */
        width: 100%;
    }
    .hijo 
    {
        width: 200%; /* Ajusta el ancho del hijo */
        max-width: 360px; /* Evita que sea demasiado grande */
        position: relative; /* Asegura que los ajustes de transform funcionen correctamente */
        left: 50%; /* Lo mueve al centro del padre */
        transform: translateX(-50%); /* Lo centra completamente */
    }
    #mivideo
    {
       width: 300px;
    }    
}
/* Estilo para pantallas (móviles) verticales */
@media only screen and (min-width: 320px) and (max-width: 480px) 
{
  .header .logo img 
  {
    max-height: 64px;
    margin-right: 4px;
  }
  .language-options 
  {
      left: -90px; /* desplaza 5px a la izquierda */
  }
  .modalnew
  {
    width:80%;
    top:10%;
  }
  .modalnew-contenido
  {
      width:80%;
      margin: 4% 5%;
      padding: 5px 10px;
      border-radius: 24px;
  }
  .modalnew-contenido h2
  {
    font-size:14px;
  }
  .hijo 
  {
    width: 180%; /* Ajusta el ancho del hijo */
    max-width: 400px; /* Evita que sea demasiado grande */
    position: relative; /* Asegura que los ajustes de transform funcionen correctamente */
    left: 50%; /* Lo mueve al centro del padre */
    transform: translateX(-50%); /* Lo centra completamente */
  }
  
}
@media only screen and (max-width: 480px) 
{
    /* Adaptación móvil */
    .modalnewalert 
    {
        width: 100vw;       /* Usa todo el ancho de la pantalla */
        top: 0;             /* O puedes centrarlo con top: 50% y transform */
        padding: 0;
    }
    .modalnew-contenido-alert
    {
        width: 96%;
        margin: 0 auto;
        padding: 5px;
        font-size: 14px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    .modalnew-contenido-alert h2 
    {
        font-size: 20px;
    }
    .modalnew-contenido-alert img 
    {
        width: 100%;
        height: auto;
    }
    .modalnew-contenido-alert p 
    {
        max-height: none;
        overflow: visible;
        height: fit-content;
    }
    .modal-content 
    {
        max-width: 90%;
        padding: 1px;
        border-radius: 6px;
        font-size: 14px;
        margin: 1% auto;
    }
    .modal-header 
    {
        flex-direction: column;
        align-items: flex-start;
        padding: 1px;
    }
    .modal-header h2, .modal-header h3 
    {
        font-size: 28px; /* Encabezado más pequeño */
    }
    .modal-body 
    {
        flex: 1;
        overflow-y: auto;
        max-height: 100%;
        text-align: left; /* Mejor para texto largo */
        font-size: 14px;
    }
    .modal-body img 
    {
        width: 90%;
        margin-bottom: 2px;
    }
    .modal-body p,
    .modal-body pre 
    {
        max-height: none;
        margin: 0;
        padding: 4px;
        font-size: 13px;
        overflow: visible;
        height: fit-content;
    }
    .scroll-up 
    {
        right: -5px;
        top: 160px;
    }
    .scroll-down 
    {
        right: -5px;
        top: 205px;
    }
    .modal-body span {
        font-size: 13px;
    }
    .modal-body button,
    .modal-footer button {
        font-size: 14px;
        padding: 1px 12px;
        width: 100%; /* Que el botón ocupe todo el ancho si se desea */
        box-sizing: border-box;
    }

    .modalnew
    {
        width:100%;
        top:30%;
    }
    .modalnew-contenido
    {
        width:90%;
        margin: 4% 5%;
        padding: 5px 10px;
        border-radius: 24px;
    }
    .modalnew-contenido h2
    {
        font-size:14px;
    }
    #quenombre 
    {
        font-size:12px;
    }

}
/* Aquí van los estilos para tablets medianas */
@media only screen and (min-width: 481px) and (max-width: 767px) 
{
  .modalnew
  {
    width:100%;
    top:28%;
  }
  .modalnew-contenido
  {
      width:90%;
      margin: 2% 4%;
      padding: 3px 6px;
      border-radius: 30px;
  }
  .modalnew-contenido h2
  {
    font-size:14px;
  }
  .modalnewalert 
  {
      width:50%;
      padding: 10;
  }
  .modalnew-contenido-alert 
  {
      width: 60%;
      margin: 0 auto;
      padding: 5px;
      font-size: 14px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
  }
  .modalnew-contenido-alert 
  {
      width: 90%;
      margin: 6% auto;  /* Ajuste para pantallas pequeñas */
  }
  .modal-header 
  {
      flex-direction: column;
      align-items: flex-start;
      padding: 1px;
  }
  .modal-header h2, .modal-header h3 
  {
      font-size: 28px; /* Encabezado más pequeño */
  }
  .scroll-up 
  {
      right: -5px;
      top: 100px;
  }
  .scroll-down 
  {
      right: -5px;
      top: 145px;
  }
  
  #queimg 
  {
      width: 50%;
      height: auto;
  }
}
/* Aquí van los estilos para tablets grandes */
@media only screen and (min-width: 768px) and (max-width: 991px)
{
  .modalnew
  {
    width:100%;
    top:70%;
  }

}
/* Estilo para pantallas super grandes (PC) */
@media only screen and (min-width: 992px) and (max-width: 2000px)
{
  .modalnew
  {
      width:100%;
      top:20%;
  }
  .modalnewalert
  {
      width:100%;
      top:20px;
  }
}
/* Estilos para pantallas pequeñas (móviles) */
@media (max-width: 768px) 
{
    /* Reducir el tamaño de los textareas */
    .form-control 
    {
        font-size: 8px;
        height: 40px;  /* Reducir la altura de los textareas */
    }

    /* Asegurar que la tabla no ocupe toda la pantalla en móvil */
    .table {
        width: 100%;
        font-size: 8px; /* Reducir tamaño de la tabla */
    }
    h5 
    {
        font-size: 8px;  /* Reducir el tamaño del texto en móviles */
    }

    /* Hacer las celdas más pequeñas */
    th, td 
    {
        padding: 5px; /* Menos espacio entre celdas */
    }
    textarea.form-control 
    {
        font-size: 6px;  /* Reducir tamaño del texto en el textarea */
        height: 40px; /* Reducir la altura de los textareas */
        width: 100%; /* Asegurarse de que los textareas no se salgan de su celda */
    }
}