body{
  background-color: #6a717b;
  padding: 0;
  margin: 0;
  width: 100%;
  min-height: 100vh;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
h1{
    text-align: center; 
    letter-spacing: 3px;
    color: #ffffff;
    font-size: 25px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  }
  h2{
    text-align: left; 
    letter-spacing: 3px;
    color: #ABC229;
  }
  
  label{
    letter-spacing: 1px;
    color:#FFFFFF;
  }
  
  
  .redondeada {
    border-radius: 50%; 
  }
  
  .frame-container {
    display: flex;
    border: 2px solid #ccc;
  }
  .preguntas_evaluacion{
    color: #f0f0f0;
  
  }
  
  .sidebar {
    width: 10%; /* Utiliza el 20% del ancho total del contenedor */
    background-color: #f0f0f0;
    border-right: 1px solid #ccc;
  }
  
  .content {
    flex: 1;
    padding: 20px;
  }
  
  .sidebar ul {
    list-style: none;
    padding: 0;
  }
  
  .sidebar ul li {
    padding: 5px;
  }
  
  .sidebar ul li a {
    text-decoration: none;
    color: #333;
  }
  
  .sidebar ul li:hover {
    background-color: #ddd;
  }
  
  .form-fondo {
    display: flex; /* Utiliza flexbox para centrar el formulario */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    flex: 1;
  }
  .form-container {
    background-color: #0f1c2d; 
    padding: 40px;
    border-radius: 0 0 10px 10px; /*  */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    display: grid;
    place-items: center;
    text-align: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  }

  .form-container1 {
    background-color: #0f1c2d; 
    padding: 40px;
    border-radius: 0 0 10px 10px; /*  */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    display: grid;
    place-items: center;
    text-align: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    display: flex;
    flex-direction: column; /* Coloca las filas de forma vertical */
    align-items: center; /* Centra todo horizontalmente */
    gap: 15px; /* Espaciado entre filas */
    overflow: hidden; /* Oculta el scroll */
  }

  .nav_principal{
    background-color: #0f1c2d; /* Color de fondo */
    padding: 1px 0; /* Espaciado interno */
    text-align: center; /* Alineación del texto*/
    display: flex;
    justify-content: space-between;
    gap: 10px;
    top: 0; /* Fija la barra de navegación en la parte superior */
    left: 0;
    width: 100%; /* Ancho completo */
  }

  .pie-pagina{
    width: 100%;
    background-color: #bccf1d;
    color: #ffff;
    padding: 20px 0;
    text-align: center;
    display: grid;
    align-items: stretch;
    position: flex;
    bottom: 0;
    left: 0;
  }
  
  .tabla-PiePag {
    text-align: center; /* Centra el contenido horizontalmente */
    place-items: center;
    width: 100%; /* Asegura que la tabla ocupe todo el ancho */
  }
  
  .tabla-PiePag svg {
    fill: white; /* Cambiar el color de relleno de los iconos SVG a blanco */
    width: 30px; /* Ajustar el tamaño de los iconos */
    height: 30px;
  }

  .boton {
    background-color: #ABC229;
    border: none;
    border-radius: 5px; /* bordes redondeados */
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);  color: #0f1c2d;
    font-size: 15px;
    font-weight: bold;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-transform: uppercase; /* todo en mayúsculas */
    cursor: pointer; /* cambio de tipo del cursor*/ 
    padding: 10px;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px; 
}

.boton:hover {
    background-color: #8c9915;
    color: #03060a;
    transform: scale(1.01);
}

/* Estilos de la tabla */
.evaluacion-docente {
  border-radius: 1%;
  border-collapse: separate; /* mostrar pequeña separacion*/
  /*border-collapse: collapse;  no mostrar pequeña separacion*/
  width: 100%;
  margin: 1px 0;
  font-size: 16px;
  text-align: left;
  background-color: #223e63;
  display: block; /* Convierte la tabla en un bloque para controlar el ancho */
  width: 100%; /* Asegura que la tabla ocupe el 100% del ancho del contenedor */
  overflow-x: auto; /* Permite desplazamiento horizontal si la tabla es demasiado ancha */
}

.evaluacion-docente tr:nth-child(even) {
  background-color: #1b3453; 
}

.evaluacion-docente tr:nth-child(odd) {
  background-color: #223e63;
}

.evaluacion-docente th, .evaluacion-docente td {
  padding: 12px;
}

.evaluacion-docente th {
  background-color: #f4f4f4;
}

/* Alinear radio buttons y etiquetas en una sola línea */
.radio-group {
  display: flex;
  justify-content: center; /* Centra los elementos horizontalmente */
  align-items: center; /* Centra verticalmente */
  gap: 10px; /* Espacio entre radio buttons */
}

input[type="radio"]:hover + label {
  color: rgb(179, 196, 29);
  
}

/* Estilos para los radio buttons */
.radio-group input[type="radio"] {
  margin-right: 5px;
  outline: none; /* Eliminar el contorno por defecto */
  transition: box-shadow 0.3s ease, outline 0.3s ease; /* Añadir transición suave */
  accent-color: #8c9915;
  transform: scale(1.6); /* Aumenta el tamaño del radio button */
  cursor: pointer; 
  gap: 10px;
}


/* Eliminar borde inferior de la etiqueta de comentarios */
.evaluacion-docente table tr:nth-last-child(2) td {
  border-bottom: none;
  background-color: #223e63;
}

/* Eliminar borde superior del textarea */
.evaluacion-docente table tr:last-child td {
  border-top: none;
  background-color: #223e63;
}

/* Estilos generales */
.preguntas_evaluacion {
  font-weight: bold;
}

textarea {
  width: 100%;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #0f1c2d;
  font-size: 14px;
  box-sizing: border-box;
}

button {
  background-color: #8c9915;
  color: #0f1c2d;
  font-weight: bold;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);  color: #0f1c2d;
}

button:hover {
  background-color: #f31010;
  color: #ffffff;
  transform: scale(1.05);
}

.datos-generales {
  background-color: #e0f2e9;
  text-align: center; 
  font-size: 12px; 
  line-height: 1.2; 
  margin-left: 2px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);  
  color: #060b13;
  padding: 8px; 
  border-radius: 2%;
  width: 100%;
  overflow-x: auto;
  margin: 0 auto;
  border-spacing: 0px;
  border-radius: 2%;
  font-weight: 800;
}
.datos-generales:hover {
  transform: scale(1.02); /* Efecto de zoom */
}

/* Media query para pantallas grandes */
@media (min-width: 992px) {
  .titulosxSecccion,
  .form-container1{
    width: 100%;
    margin: 0 auto;
  }
  .datos-generales {
    font-size: 50px; /* Reduce el tamaño de fuente */
    width: 30%; /* Ajusta el ancho */
    padding: 6px; /* Ajusta el espaciado interno */
  }
}

/* Media query para pantallas extra grandes */
@media (min-width: 1200px) {
  
  .form-container{
    width: 100%;
    margin: 0 auto;
  }
  .titulosxSecccion,
  .form-container1{
    width: 70%;
    margin: 0 auto;
    overflow: hidden; /* Oculta el scroll */
  }
  .datos-generales {
    font-size: 15px; /* Aún más pequeño */
    width: 30%; /* Ancho reducido */
    padding: 4px;
  }
}

/* Para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
  .titulosxSecccion,
  .form-container,
  .form-container1,
  .form-container2 {
    width: 100% !important; /* Asegura que ambos elementos ocupen el mismo ancho */
    margin: 0 auto; /* Centra en pantallas pequeñas */
    overflow: hidden; /* Oculta el scroll */
    padding: 40px 10px 40px 10px;
  }
  .datos-generales {
    font-size: 10px; /* Tamaño de fuente original */
    width: 100%; /* Ancho completo */
  }
  .evaluar-maestro{
    font-size: 9px;
  }
  .evaluado{
    font-size: 8px;
  }
  .logoR{
    max-width: 100% !important;
  }
  .login-whithgoogle-btn{
    font-size: 10px !important;
  }
  .form-container{
    width: 100%;   /* Ancho del input */
    -webkit-overflow-scrolling: touch; /* Mejora la experiencia en móviles */
  }
  .usuarios-su p{
    color: white;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 25px;
    padding: 0;
  }
  
  .usuarios-su td, th{
    word-wrap: break-word; /* Asegura que el texto se ajuste */
  }

  .maya-grid{
    display: flex;
    flex-direction: column !important; /* Cambia de fila a columna */
    align-items: center; /* Centra todo horizontalmente */
    gap: 15px; /* Espaciado entre filas */
    max-width: 100%; /* Asegura que el contenido no se desborde */
  }

}

.table-header {
  text-align: center;
  font-weight: bold;
  color: #8c9915;
  font-size: 1.2em;
}

.form-container{
  overflow-x: auto;        /* Habilita el desplazamiento horizontal */
  overflow-y: auto;        /* Habilita el desplazamiento vertical si es necesario */
  box-sizing: border-box;  /* Asegura que el padding no aumente el ancho total */
}
.form-container1{
  overflow-y: auto;        /* Habilita el desplazamiento vertical si es necesario */
  box-sizing: border-box;  /* Asegura que el padding no aumente el ancho total */
}

/* Media query para pantallas pequeñas */
@media (max-width: 768px) {
  .table th, 
  .table td {
      font-size: 14px; /* Ajusta el tamaño de texto en pantallas pequeñas */
      padding: 6px;
  }
}

/* Media query para pantallas muy pequeñas (como móviles en orientación vertical) */
@media (max-width: 480px) {
  .table th, 
  .table td {
      font-size: 12px; /* Tamaño de texto más pequeño */
      padding: 4px;
      word-break: break-word; /* Permite que el texto se divida en varias líneas */
  }
  /* Opcional: Hacer que la tabla ocupe menos espacio en pantallas pequeñas */
  .table {
      width: auto;
      overflow-x: auto; 
  }
}

/* Ajusta el ancho y el tamaño del texto en los botones */
.btn {
  font-size: 12px;
  padding: 6px 8px;
  max-width: 100%; /* Asegura que los botones no se salgan de la pantalla */
  background-color: #8c9915;
  color: #0f1c2d;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.btn:hover {
  background-color: #f31010;
  color: #ffffff;
}

@media (max-width: 768px) {
  .nav_principal {
    flex-direction: column; /* Organización vertical en pantallas pequeñas */
    align-items: center; /* Centra el contenido */
    padding: 8px 0; /* Reduce el padding */
  }
}

@media (max-width: 480px) {
  .nav_principal {
    padding: 5px 0; /* Padding más pequeño en pantallas muy pequeñas */
    font-size: 14px; /* Tamaño de fuente reducido */
  }
}

/* Estilo para el hover del botón en SweetAlert2 */
.swal2-confirm:hover {
  background-color: #f31010 !important; /* Rojo cuando se pasa el cursor */
  color: #ffffff !important; /* Cambiar el texto a blanco */
}

.tabla-evaluacion{
  color: #ffffff;
}

td.alinear-botones{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* Asegura que el contenido ocupe toda la altura de la celda */
}

.evaluado {
  background-color: #ffffff;
  color: 0f1c2d;
  cursor: default;
}

/* Asegura que el formulario se adapte al ancho de la pantalla */
#evaluacionForm {
  width: 100%;
  overflow-x: auto; /* Agrega desplazamiento horizontal si es necesario */
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
  #evaluacionForm th, 
  #evaluacionForm td, 
  #evaluacionForm label {
    font-size: 12px; /* Ajusta el tamaño del texto */
    padding: 5px;
  }

  /* Ajusta el tamaño de los inputs y otros elementos */
  #evaluacionForm input[type="text"],
  #evaluacionForm select,
  #evaluacionForm textarea {
    font-size: 12px;
    width: 100%; /* Asegura que los inputs se adapten al ancho del formulario */
  }

  #evaluacionForm .btn {
    font-size: 12px;
    padding: 6px 8px;
    max-width: 100%; /* Asegura que los botones no se salgan de la pantalla */
  }
 .swal2-popup.swal-medium {
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 8px !important;
  }
}

/* Para pantallas muy pequeñas */
@media (max-width: 480px) {
  #evaluacionForm th, 
  #evaluacionForm td, 
  #evaluacionForm label {
    font-size: 10px;
    padding: 3px;
    overflow-x: auto;        /* Habilita el desplazamiento horizontal */
    overflow-y: auto;        /* Habilita el desplazamiento vertical si es necesario */
    box-sizing: border-box;  /* Asegura que el padding no aumente el ancho total */
  }

  #evaluacionForm input[type="text"],
  #evaluacionForm select,
  #evaluacionForm textarea {
    font-size: 10px;
    padding: 4px;
  }

  #evaluacionForm .btn {
    font-size: 10px;
    padding: 5px 6px;
  }
  .swal2-popup.swal-medium {
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 8px !important;
  }
}

.login-whithgoogle-btn{
  background-color: rgba(231, 231, 231, 0.37); /* color semi-transparente */
  transition: background-color .3s, box-shadow .3s;
  padding: 10px 20px; /* ajustar el relleno para dar espacio */
  padding-left: 50px; /* suficiente espacio para el icono */
  border: none;
  border-radius: 5px; /* bordes redondeados */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.897); /* sombra */
  text-align: center;
  display: inline-block;
  font-size: 16px;
	font-weight: 500;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
	background-repeat: no-repeat;
	background-position: 12px center;
}

.login-whithgoogle-btn * {
  color: white !important; /* Forzar el color a blanco en todos los elementos internos */
}

.login-whithgoogle-btn:hover * {
  color :#0f1c2d !important;
}

.login-whithgoogle-btn:hover {
  transform: scale(1.1); /* Efecto de zoom */
  background-color: rgba(255, 255, 255, 0.61); /* color semi-transparente */
  cursor: pointer;
}

.logoR{
    top: -10px;
    filter: drop-shadow(0px 5px 10px #94a11ede);
    animation: rotar 25s linear infinite;
}

.logoR:hover{
  filter: drop-shadow(10px 10px 15px rgba(148, 161, 30, 0.871));
}

@keyframes rotar{
  from{
      transform: rotateY(0deg);
  }
  to{
      transform: rotateY(-360deg);
  }
}

.titulosxSecccion{
  background-color: #b3c41d;
  color: #0f1c2d;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  text-align: center;
  font-size: 24px;
  border-radius: 10px 10px 0 0;
  font-weight: bold;
  padding: 12px 0;
}

.contenedor-flex {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.panel-datos, .panel-urls {
  width: 60%;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.panel-datos img {
  margin: 0 auto; /* Centra la imagen */
  display: block;
}
.panel-datos img:hover{
  transform: scale(1.2); /* Aumenta el tamaño al pasar el mouse */
}

/* Imágenes dentro de los contenedores */
.boton-imagen, .panel-urls img {
  display: block;
  margin: 0 auto;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4); /* Fondo detrás del icono */
  padding: 15px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.897);
  cursor: pointer;
  width: 100px; /* Tamaño fijo */
  height: 100px; /* Tamaño fijo */
  transition: transform 0.5s;
}

.boton-imagen:hover, .panel-urls img:hover {
  transform: scale(1.1);
  background-color: #ffffff42;
}

.panel-urls table{
  border-spacing: 2px; /* Espacio entre las celdas */
  border-collapse: separate; /* Para que el border-spacing funcione */
  width: 100%;
}

.panel-urls td{
  padding: 15px; /* Espacio interno en las celdas */
  text-align: center;
  vertical-align: top;
}

/* Texto debajo de las imágenes */
.panel-datos p, .panel-urls p {
  text-align: center;
  margin-top: 15px; /* Espacio entre imagen y título */
  font-weight: bold;
  color: #ffffff;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 16px;
}

.panel-datos a, .panel-urls a {
  transition: color 0.3s; /* Efecto de transición al pasar el ratón */
}

/* Acomodo automático del Panel de control automatico*/
.icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas */
  gap: 0px;
  width: 70%;
  max-width: 700px;
  margin: auto;
  padding: 0px;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.icon-item {
  background: transparent;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center; /* centra horizontalmente */
  justify-content: flex-start; /* centra verticalmente */
  text-align: center; /* asegura que el texto también esté centrado */
  height: auto;
}

.icon-item p {
  margin-top: 8px;
  font-weight: bold;
  color: #ffffff;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 16px;
  white-space: normal;
  max-width: 80%; /* Ancho de las palabras con respecto al titulo en el panel*/
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}


.icon-item img,
.icon-item input[type="image"] {
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  padding: 15px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.897);
  cursor: pointer;
  width: 100px;
  height: 100px;
  transition: transform 0.5s;
}

.icon-item img:hover,
.icon-item input[type="image"]:hover {
  transform: scale(1.1);
  background-color: #ffffff42;
}




.form-respt {
  background-color: #1b3453;
}

.tabl-respuestas{
  border-collapse: separate; /* mostrar pequeña separacion*/
  /*border-collapse: collapse;  no mostrar pequeña separacion*/
  border-radius: 10px;
  margin: 1px 0;
  font-size: 16px;
  text-align: left;
  display: block; /* Convierte la tabla en un bloque para controlar el ancho */
  width: 100%; /* Asegura que la tabla ocupe el 100% del ancho del contenedor */
  overflow-x: auto; /* Permite desplazamiento horizontal si la tabla es demasiado ancha */
  color: #FFFFFF;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 12px;
}

.tabl-respuestas tr:nth-child(even) {
  background-color: #1b3453; 
}

.tabl-respuestas tr:nth-child(odd) {
  background-color: #223e63;
}

.tabl-respuestas th, .tabl-respuestas td {
  padding: 12px;
}

/* Eliminar borde inferior de la etiqueta de comentarios */
.tabl-respuestas table tr:nth-last-child(2) td {
  border-bottom: none;
  background-color: #223e63;
}

/* Eliminar borde superior del textarea */
.tabl-respuestas table tr:last-child td {
  border-top: none;
  background-color: #1b3453;
}

.tabl-respuestas th {
  background-color: #0a121d; 
}

.totalEval {
  align-items: left;
  color: #ffffff; 
  font-size: 100%; 
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  padding: 0.5%;
}

/* Estilo del <select> */
.select-opcion select {
  width: 100%; /* Ocupa todo el ancho disponible */
  max-width: 200px; /* Ancho máximo */
  padding: 5px; /* Espaciado interno */
  font-family: 'Trebuchet MS', Arial, sans-serif; /* Fuente uniforme */
  font-size: 16px; /* Tamaño legible */
  color: #0f1c2d; /* Texto oscuro */
  background-color: #ffffff; /* Fondo */
  border: 1px solid #c8d8f1; /* Borde con color complementario */
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 2px 2px 4px #33373b; /* Sombra ligera */
  cursor: pointer; /* Indica que es interactivo */
}

/* Hover y foco en <select> */
.select-opcion select:hover,
.select-opcion select:focus {
  border-color: 5px rgb(25, 103, 210); /* Fondo en hover */
  color: #0f1c2d; /* Texto blanco */
  outline: #0f1c2d; /* Quita el contorno predeterminado */
  transform: scale(1.02); /* Sutil aumento */
}

.input-busqueda{
  width: 100%;   /* Ancho del input */
  height: 20px;   /* Altura del input */
  font-size: 18px; /* Tamaño del texto */
  padding: 10px;  /* Espaciado interno para más comodidad */
  border-radius: 10px; /* Bordes redondeados  */
  border: 1px solid #ccc; /* Color del borde */
  color: #0f1c2d;
  font-weight: bold;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  flex-grow: 1; /* Hace que el input ocupe el espacio disponible */
}
.input-grande::placeholder {
  color: #aaa;               /* Color del texto del placeholder */
  font-style: italic !important;        /* Estilo del placeholder */
}
.input-busqueda:hover
.input-busqueda:focus {
  background-color: rgb(25, 103, 210); /* Fondo en hover */
  color: #fff; /* Texto blanco */
  outline: #0f1c2d; /* Quita el contorno predeterminado */
  transform: scale(1.02); /* Sutil aumento */
}
.header-row {
  display: flex; /* Flexbox para alinear elementos horizontalmente */
  justify-content: space-between; /* Espaciado entre el nombre y el ID */
  align-items: center; /* Centra verticalmente */
  flex-wrap: wrap; /* Permite que los elementos se muevan a una nueva línea si no caben */
  gap: 35px; /* Espaciado entre los elementos */
}

.header-row-center {
  display: flex;
  flex-direction: column; /* Cambia a diseño en columnas */
  align-items: center;
  gap: 5px; /* Reduce el espacio entre elementos */
  flex-wrap: wrap; /* Permite que los elementos se muevan a una nueva línea si no caben */
}

/* SVG para un mejor control del tamaño */
.header-row .svgimg {
  width: 28px; /* Define un tamaño claro para el ícono */
  height: 28px; /* Igual que el ancho */
  display: block; /* Asegura que no haya espacio extra debajo del ícono */
  fill: #8c9915; /* Aplica el color del ícono */
}

.header-row a {
  display: inline-flex; /* Asegura que el tamaño del enlace sea solo el del contenido */
  align-items: center; /* Centra el contenido verticalmente */
  justify-content: center; /* Centra el contenido horizontalmente */
  width: auto; /* Elimina cualquier ancho adicional */
  height: auto; /* Elimina cualquier alto adicional */
  margin-left: auto; /* Empuja el ícono hacia el borde derecho */
  padding: 0; /* Elimina espacio interno */
  text-decoration: none; /* Quita subrayados si los tiene */
  background: none; /* Quita cualquier fondo predeterminado */
  border: none; /* Elimina bordes si hay */
}

.text-edit p, h3{
  color: #ffffff;
  margin: 0;
  font-size: 2.0srem;
}

.usuarios-su p {
  margin: 0;
  color: #ffffff;
}

.id {
  font-size: 1.2rem;
  font-weight: bold;
}

.email {
  margin-top: 1px;
  font-size: 2.0srem;
  word-wrap: break-word; /* Rompe el texto si es muy largo */
}

@media (max-width: 768px) {

  .form-container {
      width: 100%; /* Reduce el ancho en pantallas pequeñas */
  }
  .titulosxSecccion,
  .form-container1 {
    width: 100%; /* Reduce el ancho en pantallas pequeñas */
  }

  .header-row {
      flex-direction: column; /* Cambia a diseño en columnas */
      align-items: flex;
      gap: 5px; /* Reduce el espacio entre elementos */
  }
  .header-row a {
    display: inline-flex; /* Ajusta el enlace para que ocupe solo lo necesario */
    align-items: center; /* Centra el contenido dentro del enlace */
    justify-content: center; /* Centra el ícono dentro del enlace */
    width: 30px; /* Limita el ancho del enlace */
    height: 30px; /* Limita el alto del enlace */
    padding: 0; /* Elimina relleno adicional */
    margin: 0; /* Elimina márgenes adicionales */
  }

  .header-row svg {
    width: 100%; /* Ajusta el SVG para ocupar todo el ancho del enlace */
    height: 100%; /* Ajusta el SVG para ocupar todo el alto del enlace */
  }
  .usuarios-su h2 {
      font-size: 1.3rem; /* Reduce el tamaño del texto */
  }
  .usuarios-su .id {
    font-size: 1.1rem; /* Reduce el tamaño del texto */
  } 
  .usuarios-su .email {
    font-size: 1.0rem; /* Reduce el tamaño del texto */
  } 
}

.top-row {
  display: flex;
  justify-content: space-between; /* Alinea los elementos en extremos opuestos */
  align-items: center; /* Alinea verticalmente */
  gap: 10px; /* Espaciado entre los elementos */
  flex-wrap: nowrap; /* Evita que los elementos se apilen */
}

/* Fila inferior */
.bottom-row {
  display: flex;
  justify-content: space-between; /* Input y botón separados */
  align-items: center;
  width: 100%; /* Ocupa todo el ancho */
  gap: 10px; /* Espaciado entre los elementos */
  padding: 10px;
}

.add-button {
  flex-shrink: 0; /* Impedir que el botón AGREGAR se reduzca */
  align-self: flex-start; /* Alinea el botón al inicio (parte superior) */
}



@media (max-width: 768px) {
  .form-container {
      width: 100%; /* Reduce el ancho en pantallas pequeñas */
  }
  .titulosxSecccion,
  .form-container1 {
    width: 90%; /* Reduce el ancho en pantallas pequeñas */
}
.top-row, .bottom-row {
  flex-direction: column; /* Cambiar a disposición vertical */
  align-items: center; /* Alinear elementos al centro */
  gap: 10px; /* Espaciado entre elementos */
}
  .search-button{
    width: 50%;
    text-align: center;
  }
  .add-button {
    width: 100%; /* Botones ocupan todo el ancho */
    text-align: center;
  }

  .input-busqueda {
    width: 100%; /* Input ocupa todo el ancho */
  }

  .search-label {
    text-align: center; /* Centrar el texto de la etiqueta */
  }
}


/* Estilo del contenedor del formulario */
.form-container-select {
  background-color: #0f1c2d; /* Fondo oscuro */
  padding: 20px;
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: none; /* Sombra sutil */
  align-items: center; /* Centrado horizontal */
  gap: 5px; /* Espaciado entre elementos */
  text-align: center;
  width: 100%; /* Ancho completo */
  max-width: 55%; /* Tamaño máximo */
  margin: 0 auto; /* Centrar horizontalmente */
}

/* Estilo del <select> */
.form-container-select select {
  width: 100%; /* Ocupa todo el ancho disponible */
  max-width: 200px; /* Ancho máximo */
  padding: 5px; /* Espaciado interno */
  font-family: 'Trebuchet MS', Arial, sans-serif; /* Fuente uniforme */
  font-size: 16px; /* Tamaño legible */
  color: #0f1c2d; /* Texto oscuro */
  background-color: #ffffff; /* Fondo */
  border: 1px solid #c8d8f1; /* Borde con color complementario */
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 2px 2px 4px #33373b; /* Sombra ligera */
  cursor: pointer; /* Indica que es interactivo */
}

/* Hover y foco en <select> */
.form-container-select select:hover,
.form-container-select select:focus {
  background-color: rgb(25, 103, 210); /* Fondo en hover */
  color: #fff; /* Texto blanco */
  outline: #0f1c2d; /* Quita el contorno predeterminado */
  transform: scale(1.02); /* Sutil aumento */
}

/* Estilo de las opciones del <select> */
.form-container-select select option {
  font-family: 'Trebuchet MS', Arial, sans-serif; 
  font-size: 16px; 
  color: #0f1c2d; /* Texto oscuro */
  background-color: #ffffff; /* Fondo */
}

/* Opciones al ser seleccionadas */
.form-container-select select option:hover {
  background-color: #8c9915; /* Fondo en hover */
  color: #fff; /* Texto blanco */
}

.permiso-container div{
  margin-bottom: 10px;
}

.permiso-individual{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 6dvh;
  background-color: #ffffff;
  border-radius: 10px;
  border: none;
  outline: none;
  color: #0f1c2d;
  padding: 2px 1px 1px 25px;
  gap: 0.06%;
  box-shadow: 0 2px 3px #a8a5a542; 
}
.permiso-individual:hover{
  background-color: rgb(25, 103, 210);
  color: #ffffff;
  transform: scale(1.02); /* Sutil aumento */
}

.select-boton{
  display: flex;
  width: 130%;
}

.logout a{
  color: #ffffff;
  text-decoration: none;
  transition: transform 0.5s;
  size: 2.3em;
}

.logout:hover{
  transform: scale(1.1);
}

.salidadiv{
  width: 100%;
  display:flex;
  justify-content: space-between;
  align-items: center;
  /*border: 2px solid #ccc;*/
  padding: none;
}

.logoRP{
  top: -10px;
  filter: drop-shadow(0px 5px 8px #94a11ede);
  animation: rotar 25s linear infinite;
  max-width: 3%;
  height: auto;
}

/* Imágenes dentro de los contenedores */
.boton-svg{
  margin: 10px 10px;
  cursor: pointer;
  transition: transform 0.5s;
  background-color: transparent !important;
  border: none;
  outline: none;
  padding: 0;
  box-shadow: none !important;
}

.boton-svg:hover{
  background: none;
  border: none;
  cursor: pointer;
  box-shadow: none;
  transform: scale(1.1);
}

.boton-svg:focus {
  outline: none;
  box-shadow: none;
}

.boton-svg svg{
  cursor: pointer; 
  background: none; 
  border: none;
}

.btn-confirmar{
  background-color: #ABC229;
  border: none;
  border-radius: 5px; /* bordes redondeados */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);  color: #0f1c2d;
  font-size: 15px;
  font-weight: bold;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  text-transform: uppercase; /* todo en mayúsculas */
  cursor: pointer; /* cambio de tipo del cursor*/ 
  padding: 10px;
}
.btn-confirmar:hover {
  background-color: #f31010;
  color: #ffffff;
  transform: scale(1.01);
}

.btn-cancelarD{
  background-color: #1b3453;
  color: #ffffff !important;
  border: none;
  border-radius: 5px; /* bordes redondeados */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);  color: #0f1c2d;
  font-size: 15px;
  font-weight: bold;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  text-transform: uppercase; /* todo en mayúsculas */
  cursor: pointer; /* cambio de tipo del cursor*/ 
  padding: 10px;
}
.btn-cancelarD:hover{
  background-color: #0f1c2d;
  color: #ffffff;
  transform: scale(1.01);
}

/* Variables de la alerta */
.swal2-custom {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  --border-color: #0d2240;
  --box-shadow: 0 0 5px rgba(13, 34, 64, 0.5);
  --input-border: 1px solid #ccc;
  --input-padding: 10px;
  --input-radius: 8px;
  --button-bg: #8c9915;
  --button-text: #000000;
  --button-hover-bg: #0d2240;
  --button-hover-text: #ffffff;
  --select-bg: #fff;
}

.swal2-custom label {
  align-items: last baseline;
  color: #000000; /* Negro */
}

/* Hace que la alerta ocupe toda la pantalla */
.swal2-popup.swal-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  border-radius: 0 !important;
  padding: 2rem !important;
  background-color: #ffffff !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
}

.swal2-popup.swal-medium {
  width: 60vw;       /* 75% del ancho */
  height: 100vh;      /* 90% del alto */
  max-width: none !important;
  border-radius: 15px !important;
  padding: 2rem !important;
  background-color: #ffffff !important;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;

  /* Sombras y estilo */
  box-shadow: 0 0 20px rgba(0,0,0,0.25);
}


/* Estilos personalizados agregar en alerta*/
.formulario-editar {
  align-items: center;
}

.swal2-input {
  padding: var(--input-padding);
  border: var(--input-border);
  border-radius: var(--input-radius);
  transition: all 0.3s ease;
  margin: 8px 5px 8px 1px !important;
}

.swal2-input:focus {
  border-color: var(--border-color);
  box-shadow: var(--box-shadow);
  outline: none;
}

.input-container {
  display: flex;
  align-items: center;
  padding: 0px;
  gap: 2px;
}

input, select {
  width: 90%;
  padding: var(--input-padding);
  border: 1px solid #304c73;
  border-radius: var(--input-radius);
  transition: all 0.3s ease;
  margin: 8px 0px 8px 0px;
  font-size: 16px;
}

input:focus, select:focus {
  border-color: var(--border-color);
  box-shadow: var(--box-shadow);
  outline: none;
}

select {
  appearance: none;
  background-color: var(--select-bg);
  cursor: pointer;
}

input[type="date"] {
  position: relative;
  background-color: var(--select-bg);
  cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(17%) sepia(98%) saturate(7481%) hue-rotate(357deg) brightness(95%) contrast(108%);
  cursor: pointer;
  width: 20px;
  height: 20px;
}

.input-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 90%;
}

.aling-items-rows{
  display: flex;
  flex-direction: row;
  align-items: center   ;
}

.aling-items-columns{
  display: flex;
  flex-direction: column;
  align-items: center   ;
}

/*Menu superiro acciones*/
.acciones-superiores{
    width: 100%;
    display: flex;
    justify-content: baseline; /* Alinea a la derecha */
    align-items: center; /* Alinea verticalmente */
    padding: 0px;
    color: #ffffff;
    margin-bottom: 10px; /* Espacio inferior */
    gap: 10px; /* Espacio entre los elementos */
}

.barra_menu {
  position: absolute;                             
  top: 0;                                      
  left: 0;                                     
  right: 0;                                  
  z-index: 50; 
  transform: translateY(-70%); /* se "sube" por encima del margen       
  background-color: #304c73;   */
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}


.menu-SU {
  display: none;
  position: absolute;
  top: 40px;
  left: 0; 
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
  padding: 0px;
  z-index: 1000;
  color: #000000;
  min-width: 180px;
  background-color: #ffffff;
}

.dropdown-container:hover .menu-SU {
  display: block;
}

.menu-SU ul{
  list-style:none;
  padding: 0px;
  margin: 0px;
  width: 100%;
}
.menu-SU p{
  margin: 0px;
}

.menu-SU ul li {
  background-color: #effcfd;
  width: 100%;
}

.menu-SU ul li a {
  color: #000000;
  text-decoration: none;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 6px 8px;
  font-weight: 300;
  transition:  0.3s ease;
  margin: 0px;
}

.menu-SU ul li a:hover {
  text-decoration: none;
  background-color: #008cff;
  font-weight: 900;
  color: #ffffff;  
}

/* PANTALLA DE CARGA */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #3a3a3ad2;
    color: #c3d84d;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    z-index: 9999;
    display: none; /* Oculto por defecto */
}


/* Estilo del spinner */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.maya-grid {
  display: flex;
  flex-direction: row;   
  justify-content: center; 
  align-items: center;    
}
.boxIndividual{
  width: 23%;
  margin: 2px 5px 2px 5px;
  white-space: pre-wrap;
  overflow-x: auto;
  word-break: break-all;
}

.status{
  display: flex;
  border-radius: 20px;
  width: 80%;
  padding: 5px 10px;
  justify-content: center;
}

.activo{
  background-color: #b3c41d;
  color: #03060a;
  font-size: 18px;
  font-weight: 700;
}

.titulo2{
    text-align: center; 
    letter-spacing: 3px;
    color: #ABC229;
    gap: 8px;
    font-size: 1.2em;
    font-weight: bold;
    padding: 8px 0;
    margin: 0
}

/* Row colapsada */
td.col-colap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px; 
}
td.col-colap:hover {
    overflow: visible;
    white-space: normal;
    position: relative;
    z-index: 10;
    overflow-wrap: break-word;
}

/* Alineamiento vertical de contenido*/
.aling-center{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

hr {
    border: none; /* Quita el borde por defecto */
    height: 3px; /* Grosor visible */
    background: linear-gradient(to right, transparent, #3498db, transparent);
    margin: 8px;
}

.h-over:hover {
    box-shadow: 5px 5px 10px rgba(255, 255, 255, 0.37);
    transform: scale(1.02); /* Sutil aumento */
    transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
}

.obj_linea{
    width: 100%;
    display: flex;
    justify-content: space-between; /* Distribuye el espacio uniformemente */
    align-items: center; /* Alinea verticalmente */
    padding: 0px;
    color: #ffffff;
}

.obj_lineaJunto{
    width: 100%;
    display: flex;
    justify-content: center; /* Distribuye el espacio uniformemente */
    align-items: center; /* Alinea verticalmente */
}

.obj_lineaIZQ{
    width: 100%;
    display: flex;
    justify-content: flex-start; /* Alinea a la izquierda */
    padding-left: 10px;
}

.obj_colum {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    text-align: center !important;
    flex-direction: column;
    align-content: center;
    margin: 0 10px;
}
.obj_fechas{
    max-width: 100%;
    display: flex;
    flex-direction: center;
    font-size: 15px;
    color: #c6c6c6;
    gap: 5px;
    white-space: nowrap;
    margin: 8px;
}
.resultados-mensajes{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  gap: 0px;
  padding: 0px;
}
.text-warning{
  border-color: #cfb41d;
  border-radius: 5%;
  font-weight: bold;
  font-size: 1.2em;
}

.selects-alertas{
  max-width: 100%;    
  box-sizing: border-box;
   margin-top: 3px;
  margin-bottom: 18px;
  padding: 6px 8px;
  font-family: 'Trebuchet MS', Arial, sans-serif;
  font-size: 16px;
  color: #0f1c2d;
  background-color: #ffffff;
  border: 1px solid #c8d8f1;
  border-radius: 10px;
  box-shadow: 2px 2px 4px #33373b;
  cursor: pointer;
  transition: all 0.2s ease;
}
.selects-alertas:hover,
.selects-alertas:focus{
  border-color: rgb(25,103,210);
  transform: scale(1.01);
  outline: none;
  box-shadow: 0 0 4px rgb(25,103,210);
}

/*ESTILOS NOTIFICACIONES CORREO*/
.grupo-usuarios{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
}
.grupo-usuarios div{
  margin: 0;
  border: 0;
  padding: 0;
}