@media (max-width: 768px) {
body {
    font-family: Arial, sans-serif;
    background-color: #1e1e1e; /* Negro claro */
    color: #f4f4f4; /* Color claro para el texto */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-y: hidden; /* Desactiva el scroll vertical del body */
    overflow-x: hidden; /* Desactiva el scroll horizontal del body */
}

header {
  padding: 10px; 
    background-color: #2a2a2a; /* Fondo ligeramente más oscuro para el encabezado */
    height: 30px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 30px; /* Ajusta el tamaño del logo según sea necesario */
    margin-right: 10px;
    
  border-radius: 50%; /* Hace que la imagen sea circular */
}

header h1 {
    margin: 0;
    color: #f4f4f4; /* Texto claro para el título */
    font-size: 1em; /* Ajusta el tamaño del texto */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center; 

}

nav ul li {
    display: inline-flex;
    align-items: center;
    margin-right: 15px;
    padding: 10px;
    border-radius: 8px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    float: none; /* Asegúrate de que los elementos no estén flotando */
}

nav ul li.right {
    margin-left: auto; /* Empuja la opción "Ingresar" a la derecha */
}

nav ul li a {
    color: #f4f4f4; /* Cambiado a blanco */
    text-decoration: none;
    font-weight: bold;
    font-size: 0.5em; /* Ajusta el tamaño del texto */
}
nav ul li a:hover {
    color: #00bfff; /* Azul celeste para el hover de los enlaces */
}




.dropdown {
    position: relative;
    display: inline-block;

}


.dropbtn {
    background-color: #2a2a2a;
    color: #f4f4f4;
    padding: 3px 5px; /* Reduce el relleno interno para hacer el botón más pequeño */
    font-size: 8px; /* Disminuye el tamaño de la fuente */
  
    cursor: pointer;
    border-radius: 3px; /* Ajusta los bordes redondeados para un botón más compacto */
    border: none;
    text-align: center;
    transition: background-color 0.3s ease;

}

.dropdown-content a {
 font-size: 10px; /* Ajusta el tamaño de las letras en los enlaces */
    color: #f0f0f0; /* Color gris claro para el texto */
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    background-color: #2a2a2a; /* Fondo gris oscuro para los enlaces */
    border-bottom: 1px solid #333333; /* Borde inferior oscuro para separación */
    transition: background-color 0.3s ease, color 0.3s ease;

}


/* Menú desplegable de País */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%; /* Alinea el menú justo debajo del botón */
    left: 0;

    background-color: #1e1e1e; /* Fondo oscuro */
    min-width: 100px; /* Ancho mínimo */
    max-height: 300px; /* Limita la altura */
    overflow-y: auto; /* Barra desplazadora vertical */
    overflow-x: hidden; /* Oculta la barra horizontal */
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Asegura que el menú esté encima de "Introduce cantidad" */
    border-radius: 5px;
}


/* Ajustes específicos para el menú de Subcategoría */
#subcategoria-dropdown-content {
    right: 0; /* Alinea el menú al borde derecho del botón */
    left: auto; /* Elimina cualquier alineación izquierda heredada */
    transform: translateX(-5px); /* Ajusta ligeramente hacia la izquierda para que no se corte */
 position: absolute;
    right: 0; /* Alinea el menú al borde derecho del botón */
min-width: 100px; /* Aumenta el ancho mínimo para que no se corte */
    max-width: 200px; /* Establece un ancho máximo para pantallas pequeñas */

}

/* Personalización de la barra de desplazamiento */
.dropdown-content::-webkit-scrollbar {
    width: 5px; /* Ancho de la barra de desplazamiento */
}

.dropdown-content::-webkit-scrollbar-thumb {
    background-color: #00bfff; /* Color del scrollbar */
    border-radius: 10px;
}

.dropdown-content::-webkit-scrollbar-track {
    background-color: #2a2a2a; /* Color del track */
}
.dropdown-content input[type="text"] {
    width: calc(100% - 280px);
    padding: 5px;
    margin: 5px;
 font-size: 7px; /* Ajusta el tamaño de las letras en los enlaces */
    box-sizing: border-box;
    background-color: #2a2a2a;
    color: #f4f4f4;
    border: 1px solid #333333;
    border-radius: 3px;
z-index: 1000; /* Mantiene este contenedor debajo del menú desplegable */
}

.dropdown-option {
    color: #f4f4f4;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.dropdown-option:hover {
    background-color: #333333;
    color: #00bfff;
}

.filter-item:hover .dropdown-content {
    display: block;
}

.dropdown-content a:hover {
    background-color: #000000; /* Naranja Mandarina al pasar el cursor */
    color: #ffffff; /* Texto blanco al pasar el cursor */
}
.dropbtn:hover {
    background-color: #333333;
}
.dropdown:hover .dropdown-content {
    display: block;
}

/* Contenedor principal */
main {
    overflow-y: hidden; /* Desactiva el scroll vertical del main */
    overflow-x: hidden; /* Desactiva el scroll horizontal del main */
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
width: 93%; /* Asegura que ocupe todo el ancho disponible */
    overflow: hidden; /* Evita que la pantalla principal se amplíe */
}

.flex-container {
        display: flex;
        flex-direction: column; /* Asegura que los elementos se apilen en columna */
        width: 100%; /* Ocupa todo el ancho disponible */
        gap: 10px; /* Espaciado entre los contenedores */

    }



.inner-flex-item {
    padding: 20px;
    box-sizing: border-box;
    background-color: inherit; /* Mismo color que el contenedor padre */
}



/* Opciones de filtro */
/* Contenedor de las opciones */
.filter-options {
  position: fixed;
    top: 52px; /* Ajusta según la altura del encabezado */
    overflow-y: visible; /* Asegura que no se active el scroll vertical */
    height: auto; /* Permite que el contenedor crezca según el contenido */
    max-height: none; /* Elimina cualquier restricción de altura */
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
    padding: 1px 0;
    width: 90%;
    justify-content: space-between;
    box-sizing: border-box;
z-index: 20; /* Asegura que este contenedor esté debajo del menú desplegable */
    white-space: nowrap; /* Evita que las opciones se rompan en varias líneas */
}


/* Estilo para cada opción */
.filter-item {
    flex: 1 1 auto; /* Asegura que todos los elementos tomen el mismo tamaño */
    margin: 0; /* Sin espacio lateral adicional */
    padding: 2px 5px; /* Ajuste el padding para el área de clic */
    text-align: center;
    border-radius: 3px;
    background-color: #2a2a2a; /* Color de fondo de las opciones */
    color: #f4f4f4; /* Color del texto */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-sizing: border-box; /* Incluye padding y border en el ancho y alto del elemento */
  
    position: relative;
}
.filter-item:hover {
    background-color: #333333; /* Fondo al pasar el cursor */
    color: #00bfff; /* Color del texto al pasar el cursor */
}

.filter-item::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #FF4500;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}


.filter-item:hover::after {
    transform: scaleX(1); /* Mostrar la línea al pasar el cursor */
}


/* Contenedor desplazable */
.scrollable-container {
    background-color: #1e1e1e;
    padding: 20px;
    overflow-y: hidden; /* Asegura que no haya desplazamiento */
    border-radius: 8px;
    flex: 2; /* El contenedor desplazable es grande */
    overflow-y: scroll; /* Habilitar la barra de desplazamiento vertical */
    overflow-x: hidden; /* Ocultar la barra de desplazamiento horizontal */
    height: calc(100vh - 160px); /* Ajustar la altura para que coincida con la altura del contenedor izquierdo */
    margin-top: 20px; /* Añadir espacio adicional arriba del contenido desplazable */
    margin-left: 0; /* Asegurar que el contenido se alinee a la izquierda */
    box-sizing: border-box; /* Asegura que padding y border se incluyan en el ancho y alto del elemento */
    position: relative; /* Para asegurar que z-index funcione */
    z-index: 1; /* Asegura que la barra esté por encima de otros elementos */
    margin-right: 280px; 
    padding-left: 25px !important; /* Forzar el cambio con !important */
    padding-top: 5px;
}

/* Contenedor estático en la derecha */




.account-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.account-menu li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 8px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
 width: 80%;

}

.account-menu li:hover {
    background-color: #333333; /* Fondo oscuro cuando se pasa el cursor */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Sombra cuando se pasa el cursor */
}

.account-menu li .icon {
    margin-right: 15px;
    flex-shrink: 0;
}

.account-menu li .icon img {
    width: 30px; /* Tamaño aumentado de los íconos */
    height: 30px;
  border-radius: 50%; /* Hace que la imagen sea circular */
}

.account-menu li a {
    color: #f4f4f4;
font-size: 14px; /* Cambia el valor a lo que necesites */
    text-decoration: none;
    font-weight: bold;
}

.account-menu li a:hover {
    color: #00bfff; /* Azul celeste para el hover del enlace */
}

/* Ajustes en la barra de desplazamiento personalizada */
.scrollable-container-equipo::-webkit-scrollbar {
    width: 7px;
}

.scrollable-container-equipo::-webkit-scrollbar-thumb {
    background-color: #00bfff;
    border-radius: 10px;
}

.scrollable-container-equipo::-webkit-scrollbar-track {
    background-color: #2a2a2a;
}



/* Estilo de la barra deslizadora para el contenedor izquierdo */
.left-content {
    height: calc(100vh - 160px); /* Ajustar la altura para que coincida con la altura del contenedor desplazable */
    overflow-y: auto; /* Barra deslizadora vertical dentro del contenedor */
    box-sizing: border-box; /* Asegura que el padding no afecte las dimensiones */
}

.left-content::-webkit-scrollbar {
    width: 8px; /* Ancho de la barra deslizadora */
 
}

.left-content::-webkit-scrollbar-thumb {
    background-color: #888; /* Color de la barra */
    border-radius: 10px;
}

.left-content::-webkit-scrollbar-track {
    background-color: #2a2a2a;
    margin-top: 20px;
}

/* Menú principal con iconos y enlaces */
.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 5px;
    padding: 2px;
    border-radius: 8px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.menu-item .icon {
    margin-bottom: 5px;

}

.menu-item .icon img {
    width: 20px; /* Tamaño del ícono */
    height: 20px;
  border-radius: 50%; /* Hace que la imagen sea circular */
}

.menu-item a {
    color: #f4f4f4;
    text-decoration: none;
    font-weight: bold;
font-size: 0.5em; /* Ajusta el tamaño del texto */
padding-top: 0px; /* Aumentar el espacio superior */
    padding-bottom: 0px; /* Aumentar el espacio inferior */
}

.menu-item a:hover {
    color: #00bfff; /* Azul celeste para el hover del enlace */
}

.menu-item:hover {
    background-color: #333333; /* Fondo oscuro cuando se pasa el cursor */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Sombra cuando se pasa el cursor */
}
.info-section h4 {
    font-size: 10px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
    color: #f4f4f4;
}

/* Estilo para los títulos principales */
.info-section h3 {
    font-size: 11px; /* Reduce el tamaño de los títulos principales */
    font-weight: bold;
    margin-bottom: 10px;
    color: #ff4500; /* Mantiene el color para resaltar */
}
/* Reducir tamaño de texto en "Funcionalidades Clave" */
.info-section p strong {
    font-size: 11px; /* Tamaño reducido para el texto en negrita dentro de <p> */
    font-weight: bold; /* Mantiene el énfasis */
}
.info-section ul li strong {
    font-size: 9px; /* Tamaño reducido para el texto en negrita dentro de <li> */
    font-weight: bold; /* Mantiene el énfasis */
}
.info-section ul {
    font-size: 9px; /* Reduce el tamaño del texto en las listas */
    line-height: 1.4; /* Ajusta el espaciado entre líneas */
    margin-bottom: 10px; /* Espacio entre la lista y otros elementos */
    color: #f4f4f4; /* Mantiene el color claro */
}
/* Estilo para los párrafos */
.info-section p {
    font-size: 9px; /* Reduce el tamaño del texto de los párrafos */
    line-height: 1.5; /* Ajusta el espaciado entre líneas */
    margin-bottom: 10px;
    color: #f4f4f4; /* Mantiene el color claro para la legibilidad */
}


/* Contenedor de información ajustado */
.inner-flex-item-equipo.large-equipo {
    flex: 3;
    display: flex;
    flex-direction: column;
 
    padding: 10px;
    max-width: calc(100% - 320px); /* Limitar el ancho dejando espacio para el menú de cuenta */
    box-sizing: border-box;
    background-color: #1e1e1e;
    border-radius: 8px;
    height: calc(100vh - 190px); /* Ajustar la altura */
}

.scrollable-container-equipo {
    background-color: #1e1e1e;
    padding: 5px;
    border-radius: 8px;
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden; /* Asegurar que no haya scroll horizontal */

    /* Aumentar altura hacia arriba y abajo */
    height: calc(100vh - 50px); /* Reduce los márgenes para aumentar la altura */
    box-sizing: border-box;

    /* Ajustar posición respecto al extremo izquierdo y aumentar ancho */
    margin-top: -20px; /* Ajuste superior */
    margin-left: -20px; /* Reduce la distancia del borde izquierdo */
    width: calc(100% + 20px); /* Aumenta el ancho total */
}



/* Barra de desplazamiento personalizada para el contenedor equipo */
.scrollable-container-equipo::-webkit-scrollbar {
    width: 5px; /* Ancho de la barra de desplazamiento */
}

.scrollable-container-equipo::-webkit-scrollbar-thumb {
    background-color: #00bfff; /* Color de la barra más visible */
    border-radius: 10px;
}

.scrollable-container-equipo::-webkit-scrollbar-track {
    background-color: #2a2a2a;
}
/* Estilos para la ventana de chat */
.chat-window {
    display: none;
    position: fixed;
    bottom: 10px; /* Reduce la distancia desde la parte inferior */
    right: 20px; /* Ajusta la posición en la pantalla */
    width: 200px; /* Reduce el ancho */
    height: 280px; /* Reduce el alto */
    background-color: #2a2a2a;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow: hidden;
}

/* Encabezado de la ventana de chat */
.chat-header {
    background-color: #00bfff;
    color: #f4f4f4;
    padding: 6px; /* Reduce el padding */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 12px; /* Reduce el tamaño del texto */
}

/* Botón de cierre */
.close-chat-btn {
    background: none;
    border: none;
    color: #f4f4f4;
    font-size: 16px; /* Reduce el tamaño del botón */
    cursor: pointer;
}

/* Cuerpo del chat */
.chat-body {
    padding: 10px;
    height: 150px; /* Reduce la altura del área de mensajes */
    overflow-y: auto;
    color: #f4f4f4;
    font-size: 12px; /* Reduce el tamaño de la letra en el chat */
}

/* Pie de la ventana de chat */
.chat-footer {
    display: flex;
    padding: 6px;
    background-color: #333;
    align-items: center;
}

/* Campo de entrada del chat */
.chat-footer input[type="text"] {
    flex: 1;
    padding: 6px;
    border-radius: 4px;
    border: none;
    margin-right: 5px;
    font-size: 12px; /* Reduce el tamaño de la letra */
}

/* Botón de enviar */
.chat-footer button {
    background-color: #00bfff;
    border: none;
    padding: 6px 10px; /* Reduce el tamaño del botón */
    border-radius: 4px;
    cursor: pointer;
    color: #f4f4f4;
    font-size: 12px; /* Reduce el tamaño del texto del botón */
}

/* Efecto hover en el botón */
.chat-footer button:hover {
    background-color: #007bbf;
}

/* Estilos para la ventana modal */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1000; /* Por encima de otros elementos */
    left: 0;
    top: 0;
    width: 98%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro semi-transparente */
}

.modal-content {
    background-color: #2a2a2a; /* Fondo de la ventana modal */
    margin: 10% auto; /* Centrado vertical y horizontal */
    padding: 20px;
    border-radius: 8px;
    width: 300px; /* Ancho fijo para la ventana modal */
    text-align: center;
    color: #f4f4f4; /* Texto blanco */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}

.modal-content h2 {
    margin-bottom: 20px;
}

.login-input {
    margin-bottom: 15px;
    position: relative;
    margin-right: 20px; /* Ajusta el valor según la separación que desees */
}

.login-input input {
    width: 99.8%;
    padding: 10px;
    border-radius: 8px;
    border: none;
    background-color: #333333;
    color: #f4f4f4;
    font-size: 16px;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #333333;
    font-size: 14px;
}

.login-option {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    background-color: #333333; /* Fondo oscuro para las opciones */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.login-option:hover {
    background-color: #444444; /* Fondo más claro al pasar el cursor */
}

.login-option img {
    margin-right: 10px;
    width: 24px;
    height: 24px;
     border-radius: 50%;
}

.extra-options {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.extra-options a {
    color: #00bfff;
    font-size: 14px;
    text-decoration: none;
}

.extra-options a:hover {
    text-decoration: underline;
}

.close {
    color: #f4f4f4;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.profile-image-container {
    text-align: center; /* Centra la imagen horizontalmente */
    margin-bottom: 15px; /* Espacio debajo de la imagen */
}

.profile-image {
    width: 60px; /* Ancho de la imagen */
    height: 60px; /* Alto de la imagen */
    border-radius: 50%; /* Hace que la imagen sea circular */
    border: 2px solid #00bfff; /* Borde alrededor de la imagen */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Sombra para darle profundidad */
}

.filter-item input[type="text"] {
    width: 150%;
    max-width: 150px; /* Ajusta según sea necesario */
    height: 15px; /* Asegura la consistencia en la altura */
    padding: 8px;
    margin-right: 10px;
    border-radius: 5px;
    background-color: #2a2a2a;
    color: #f4f4f4;
    border: 1px solid #333333;
    box-sizing: border-box;
}

/* Estilo específico para "Introduce cantidad" */
.filter-item.input-container {
    height: 25px; /* Alto del contenedor */
    position: fixed; /* Mantiene las opciones en la parte superior de la pantalla */
    top: 80px; /* Alinea con la parte inferior del encabezado */
    width: 25%; /* Ancho deseado */
    max-width: 178px; /* Ancho máximo */
    padding: 8px;
    margin-right: 10px;
    border-radius: 5px;
    background-color: #2a2a2a; /* Fondo oscuro */
    color: #f4f4f4; /* Texto claro */
    border: 1px solid #333333;
    box-sizing: border-box;
    z-index: 10; /* Asegura que este contenedor esté debajo del menú desplegable */
}
/* Estilo específico para "Introduce cantidad" */
.filter-item.input-container1 {
    height: 25px; /* Alto del contenedor */
    position: fixed; /* Mantiene las opciones en la parte superior de la pantalla */
    top: 80px; /* Alinea con la parte inferior del encabezado */
    width: 35%; /* Ancho deseado */
    max-width: 178px; /* Ancho máximo */
    padding: 8px;
    margin-right: 10px;
    border-radius: 5px;
    background-color: #2a2a2a; /* Fondo oscuro */
    color: #f4f4f4; /* Texto claro */
    border: 1px solid #333333;
    box-sizing: border-box;
    z-index: 10; /* Asegura que este contenedor esté debajo del menú desplegable */
}

/* Estilo específico para el botón "Mejores Colaboradores" */
#best-employees-button {
    font-size: 8px; /* Tamaño de fuente reducido */
    font-weight: bold; /* Mantiene el texto destacado */
    padding: 8px 15px; /* Ajusta el relleno para balancear el tamaño */
    text-transform: capitalize; /* Asegura que el texto se vea presentable */
}

/* Ajustes para el cuadro de texto dentro del contenedor */
.filter-item.input-container input[type="text"] {
    width: 105%; /* Asegura que el input ocupe todo el ancho del contenedor */
    height: 10px; /* Ajusta la altura del campo de texto */
    padding: 8px; /* Espaciado interno */
    border-radius: 5px;
    position: relative; /* Ajusta la posición con respecto al contenedor */
    top: -15px; /* Sube el cuadro de texto hacia el encabezado */
    font-size: 7px; /* Ajusta el tamaño de las letras */
    background-color: #2a2a2a; /* Fondo acorde al contenedor */
    color: #f4f4f4; /* Texto claro */
    border: 1px solid #333333; /* Borde */
    box-sizing: border-box; /* Incluye padding y border en el tamaño total */
}

.inner-flex-item.large.center-content.scrollable-containerindex {
    width: 109%; /* Ocupa todo el ancho de la pantalla */
       margin: 0; /* Elimina márgenes para evitar separación adicional */
    margin-top: -18px; /* Acerca más el contenedor al borde superior */
    margin-left: -30px; /* Mantiene el desplazamiento hacia la izquierda */
 height: calc(100vh - 60px); /* Ajusta dinámicamente la altura, restando el encabezado */
    padding: 5px; /* Elimina padding superior por completo */

   
 overflow-y: auto; /* Habilita la barra deslizadora vertical */
}
/* Personalización de la barra deslizadora */
.inner-flex-item.large.center-content.scrollable-containerindex::-webkit-scrollbar {
    width: 5px;
}

.inner-flex-item.large.center-content.scrollable-containerindex::-webkit-scrollbar-thumb {
    background-color: #00bfff; /* Color de la barra más visible */
    border-radius: 10px;
}

.inner-flex-item.large.center-content.scrollable-containerindex::-webkit-scrollbar-track {
    background-color: #2a2a2a;
}
.inner-flex-item.large.center-content.scrollable-container {
    width: 119%; /* Ocupa todo el ancho de la pantalla */
       margin: 0; /* Elimina márgenes para evitar separación adicional */
    margin-top: -18px; /* Acerca más el contenedor al borde superior */
    margin-left: -40px; /* Mantiene el desplazamiento hacia la izquierda */
 height: calc(100vh - 60px); /* Ajusta dinámicamente la altura, restando el encabezado */
    padding: 5px; /* Elimina padding superior por completo */

   
 overflow-y: auto; /* Habilita la barra deslizadora vertical */
}

/* Personalización de la barra deslizadora */
.inner-flex-item.large.center-content.scrollable-container::-webkit-scrollbar {
    width: 5px;
}

.inner-flex-item.large.center-content.scrollable-container::-webkit-scrollbar-thumb {
    background-color: #00bfff; /* Color de la barra más visible */
    border-radius: 10px;
}

.inner-flex-item.large.center-content.scrollable-container::-webkit-scrollbar-track {
    background-color: #2a2a2a;
}

.inner-flex-item.small.left-content {
    width: 100%; /* Ajusta al ancho completo del modal */
    height: 520px; /* Ajusta automáticamente la altura según el contenido */
    position: relative; /* Asegura que la posición sea relativa al contenedor padre */
    top: -18px; /* Mueve el contenedor hacia arriba */
    padding: 0;
    margin: 0; /* Elimina márgenes adicionales */
    margin-left: 0; /* Asegura que esté alineado dentro del modal */
    overflow-y: auto; /* Habilita el scroll vertical si el contenido es extenso */
}



/* Personalización de la barra deslizadora */
.inner-flex-item.small.left-content::-webkit-scrollbar {
    width: 5px; /* Ancho de la barra deslizadora */
}

.inner-flex-item.small.left-content::-webkit-scrollbar-thumb {
    background-color: #00bfff; /* Color de la barra deslizadora */
    border-radius: 10px; /* Bordes redondeados para un diseño más elegante */
}

.inner-flex-item.small.left-content::-webkit-scrollbar-track {
    background-color: #2a2a2a; /* Fondo de la pista de la barra */
}





.client-photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
    border: 2px solid #00bfff;
object-fit: cover; /* Ajusta la imagen para que no se deforme */
   
    flex-shrink: 0; /* Evita que la imagen cambie de tamaño al reducir el espacio disponible */
}

.client-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    flex-shrink: 0; /* Evita que la imagen cambie de tamaño al reducir el espacio disponible */
}

.task-header-left {
   display: flex;
    align-items: center;
    max-width: 70%; /* Limita el ancho al tamaño del contenedor padre */
    font-size: 16px; /* Ajusta el tamaño de fuente según sea necesario */
    white-space: normal; /* Permite saltos de línea */
    overflow-wrap: break-word; /* Divide palabras largas si es necesario */
    word-break: break-word; /* Asegura que las palabras largas no desborden */
}




/* Botón de Aceptar */
.accept-button {
    background-color: #00bfff;
    color: #ffffff;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.accept-button:hover {
    background-color: #007bbf;
}


/* Contenedor principal de la tarea */
.task-container {
    background-color: #2a2a2a;
    border-radius: 8px;
    padding: 10px; /* Espaciado interno reducido */
    margin-bottom: 3px; /* Reduce el espacio entre contenedores dinámicos */
    margin-top: 5px; /* Espaciado general para todos los contenedores */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 94%; /* Mantiene el ancho relativo al contenedor padre */
    height: auto; /* Ajusta la altura según el contenido */
}

/* Ajuste específico para el primer contenedor dinámico */
.task-container:first-of-type {
    margin-top: 55px; /* Aumenta la distancia desde el encabezado al primer contenedor */
}

/* Contenedor principal de la tarea */
.task-container1 {
    background-color: #2a2a2a;
    border-radius: 8px;
    padding: 10px; /* Espaciado interno reducido */
    margin-bottom: 3px; /* Reduce el espacio entre contenedores dinámicos */
    margin-top: 5px; /* Espaciado general para todos los contenedores */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 90%; /* Mantiene el ancho relativo al contenedor padre */
    height: autopx; /* Ajusta la altura según el contenido */
}

/* Ajuste específico para el primer contenedor dinámico */
.task-container1:first-of-type {
    margin-top: 10px; /* Aumenta la distancia desde el encabezado al primer contenedor */
}

.task-container3{
   background-color: #2a2a2a;
    border-radius: 8px;
    padding: 10px; /* Espaciado interno reducido */
    margin-bottom: 3px; /* Reduce el espacio entre contenedores dinámicos */
    margin-top: 5px; /* Espaciado general para todos los contenedores */
    margin-left: -2px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 95%; /* Ajusta el ancho relativo al contenedor padre */
    height: auto; /* Ajusta la altura según el contenido */
}

/* Ajuste específico para el primer contenedor dinámico */
.task-container3first-of-type {
    margin-top: 10px; /* Aumenta la distancia desde el encabezado al primer contenedor */
}
#expiring-activities-container h3 {
    font-size: 10px; /* Ajusta el tamaño de la letra a un tamaño menor */
    font-weight: bold; /* Mantiene el texto en negrita, si lo prefieres */
    color: #f4f4f4; /* Asegura que el color sea consistente con el diseño */
    margin-bottom: 10px; /* Espacio debajo del título */
}

/* Encabezado de la tarea */
.task-header {
    display: flex;

    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.client-photo {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
    border: 2px solid #00bfff;
}


.task-header-left {
    display: flex;

    align-items: center;
}

.task-header-left h3 {
    margin: 0;
font-size: 8px; /* Reduce el tamaño de la letra */

    color: #f4f4f4;
    font-size: 12px;
}

/* Botón de Aceptar */
.accept-button {
    background-color: #00bfff;
    color: #ffffff;
    padding: 5px 10px;
    font-size: 8px;
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
    margin-top: -10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.accept-button:hover {
    background-color: #007bbf;
}

/* Contenedor principal de los detalles de la tarea */
.task-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    
}

/* Contenedor izquierdo (Descripción, tipo de servicio, archivos adjuntos) */
.task-left, .task-right {
    width: 38%; /* Ambos contenedores toman un 48% del ancho, dejando espacio entre ellos */
    background-color: #333333;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    margin-bottom: 5px;
position: relative;
}

.task-left p, .task-right p {
    margin: 10px 0;
    color: #f4f4f4;
    font-size: 8px;
}






/* Contenedor de comentarios en la parte inferior */
.task-comments {
    background-color: #2a2a2a;
    padding: 10px;
    border-radius: 8px;
    margin-top: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}

.task-comments input {
    width: calc(100% - 20px);
    padding: 10px;
    border-radius: 4px;
    border: none;
    background-color: #333333;
    color: #f4f4f4;
    margin-top: 5px;
}


.task-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.like-container {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.like-button {
    background-color: #333333; /* Color negro */
    color: #ffffff;
    border: none;
    border-radius: 15px;
    padding: 4x 8x; /* Tamaño más pequeño */
    font-size: 8px; /* Texto más pequeño */
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.like-button:hover {
    background-color: #555555; /* Un tono más claro al pasar el cursor */
    transform: scale(1.05); /* Un ligero aumento de tamaño al pasar el cursor */
}

.like-icon {
    font-size: 12px;
    margin-right: 6px; /* Espacio entre el icono y el texto */
}

.like-count {
    margin-left: 10px;
    color: #f4f4f4;
    font-size: 8px;
}


/* Botón de Ver Contenidos */
.multimedia-button {
    background-color: #00bfff;
    color: #ffffff;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.3s ease;
    border: none;
}

.multimedia-button:hover {
    background-color: #007bbf;
}

/* Estilo del Modal */
.modal1 {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro semi-transparente */
}

.modal-content1 {
    background-color: #1e1e1e; /* Cambia el fondo del contenido del modal a negro */
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 
    max-width: 800px;
    border-radius: 10px;
    position: relative; /* Posicionamiento dentro del modal */
    top: 50%; /* Centrado verticalmente */
    transform: translateY(-50%); /* Ajusta la posición para que esté centrado verticalmente */
    z-index: 10000; /* El contenido del modal también debe estar por encima */
}

.modal-content1 h2 {
    text-align: center;
    margin-bottom: 20px;
}

.close1 {
    color: #f4f4f4;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close1:hover {
    color: #bbb;
    text-decoration: none;
}

.media-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.media-section h3 {
    color: #00bfff;
    margin-bottom: 10px;
}

.media-gallery {
    display: flex;
    gap: 10px;
}

.media-gallery img,
.media-gallery video {
    width: 100%;
    max-width: 150px;
    border-radius: 5px;
    object-fit: cover;
    border: 2px solid #00bfff;
}

.media-documents a {
    display: block;
    color: #00bfff;
    text-decoration: none;
    margin-bottom: 5px;
}

.media-documents a:hover {
    text-decoration: underline;
}

/* Contenedor para Pago Ofrecido y Negociar Términos */
.payment-container {
    display: flex;
    justify-content: space-between; /* Distribuye el espacio entre los elementos */
    align-items: center; /* Alinea verticalmente los elementos en el centro */
}

/* Botón de Negociar Términos */
.negotiate-button {
    background-color: #00bfff;
    color: #ffffff;
    padding: 5px 10px;
    font-size: 7px; /* Tamaño de letra más pequeño */
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: absolute; /* Posiciona el botón dentro del contenedor padre */
    top: 2px; /* Ajusta la posición desde la parte superior */
    right: 2px; /* Ajusta la posición desde la parte derecha */

}

.negotiate-button:hover {
    background-color: #007bbf;
}


/* Diseño ficha empleados izquierdo */
.left-panel-container {
    background-color: #2a2a2a; /* Gris oscuro original */
    border-radius: 8px;
    padding: 5px;
    margin-bottom: 10px; /* Reduce la distancia entre contenedores dinámicos */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    color: #f4f4f4;
    height: 140px; /* Ajustar automáticamente la altura */
    width: 93%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    
}

.left-panel-container h3 {
    margin: 0 0 10px 0;
    font-size: 10px;
    color: #00bfff;
}

.left-panel-container p {
    margin: 0;
    font-size: 10px;
}


/* Contenedor que permite desplazamiento horizontal */
.scrollable-container-horizontal {
    display: flex;
    overflow-x: auto; /* Muestra la barra de desplazamiento horizontal */
    overflow-y: hidden; /* Oculta la barra de desplazamiento vertical */
    scroll-behavior: smooth; /* Suaviza el desplazamiento */
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
    align-items: center; /* Centra verticalmente los elementos */
    height: 100%; /* Asegura que ocupe todo el contenedor */
}

/* Estilos para los contenedores de actividad */
.activity-box {
    flex: 0 0 120px; /* Reduce el ancho fijo */
    height: 100px; /* Mantiene la altura fija */
    margin-right: 10px; /* Espacio entre contenedores */
    padding: 10px;
    background-color: #333333; /* Fondo oscuro */
    border-radius: 8px;
    text-align: left; /* Alinea el texto a la izquierda */
    color: #f4f4f4;
    width: 15%; /* Reduce el ancho relativo */
    position: relative; /* Para posicionar el botón en la parte inferior */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Espacio entre el contenido y el botón */
}

.activity-box p {
    text-align: justify;
    margin: 0;
    padding: 0;
    flex-grow: 1;
 font-size: 8px;
}
/* Estilo para evitar desbordamientos en los nombres de las actividades finalizadas */
.activity-box h4 {
    white-space: normal; /* Permite saltos de línea */
    overflow-wrap: break-word; /* Divide palabras largas si es necesario */
    word-break: break-word; /* Asegura que las palabras largas no desborden */
    font-size: 10px; /* Ajusta el tamaño de fuente según sea necesario */
    max-width: 100%; /* Asegura que el texto no exceda el ancho del contenedor */
    margin: 0; /* Elimina márgenes innecesarios */
}
..scroll-left, .scroll-right {
    display: none; /* Oculta las flechas de desplazamiento */
}

.scrollable-container-horizontal::-webkit-scrollbar {
    height: 5px; /* Altura de la barra de desplazamiento */
}

.scrollable-container-horizontal::-webkit-scrollbar-thumb {
    background-color: #888; /* Color de la barra de desplazamiento */
    border-radius: 10px;
}


.employee-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.employee-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #f4a261; /* Naranja suave */
    margin-right: 15px;
}

.employee-info h2 {
    margin: 0;
    font-size: 24px;
    color: #007bff; /* Cambiado a azul */
}

.employee-info p {
    margin: 5px 0;
    font-size: 16px;
    color: #007bff; /* Cambiado a azul */
}


.employee-summary {
    margin-bottom: 20px;
}

.employee-summary p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: #e9c46a; /* Amarillo claro */
    text-align: justify;
    
}

.employee-services h3,
.employee-ratings h3,
.employee-progress h3,
.employee-certifications h3,
.employee-availability h3 {
    margin-bottom: 10px;
    color: #f4a261; /* Naranja suave */
}

.employee-services ul,
.employee-certifications ul {
    list-style: none;
    padding-left: 0;
}

.employee-services li,
.employee-certifications li {
    margin-bottom: 5px;
    font-size: 8px;
}

.experience-level {
    background-color: #f4a261; /* Naranja suave */
    color: #1e1e1e; /* Texto oscuro */
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 14px;
}

.employee-ratings .rating-overall {
    font-size: 20px;
    margin-bottom: 10px;
}

.employee-ratings .stars {
    color: #e9c46a; /* Amarillo claro */
}

.employee-ratings .reviews p {
    margin: 5px 0;
    font-size: 14px;
    color: #f4f4f4;
}

.employee-progress .progress-bar {
    background-color: #1e1e1e;
    border-radius: 4px;
    height: 10px;
    margin-bottom: 10px;
}

.employee-progress .progress {
    background-color: #e76f51; /* Naranja más intenso */
    height: 100%;
    border-radius: 4px;
}

.employee-availability p {
    margin: 0;
    font-size: 16px;
    color: #f4f4f4;
}

.employee-contact {
    text-align: center;
    margin-top: 20px;
}




/* Botón de Ver Perfil en la parte inferior del contenedor */
.profile-button {
    background-color: #00bfff; /* Color de fondo azul */
    color: #ffffff; /* Texto blanco */
    padding: 4px 8px;
    border: none;
    border-radius: 5px;
    font-size: 9px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    align-self: flex-end; /* Posiciona el botón en la parte inferior derecha */
    margin-top: auto; /* Empuja el botón hacia abajo */
}

.profile-button:hover {
    background-color: #007bbf; /* Color más oscuro en hover */
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al hacer hover */
}
/* Contenedor general */
.new-user-header {
    display: flex;
    justify-content: space-between; /* Distribuye los elementos entre izquierda y derecha */
    align-items: flex-start; /* Alinea los elementos al principio del contenedor */
    width: 100%;
    position: relative;
}



/* Asegura que el botón esté alineado a la izquierda y fijo en la parte inferior del contenedor */
.user-info-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between; /* Asegura que el botón esté en la parte inferior */
    height: 100%; /* Ocupa el 100% del contenedor */
}


.user-photo {
    position: relative;
    left: 10px; /* Mueve la foto hacia la izquierda */
    top: 60%; /* Mueve la foto verticalmente */
    transform: translateY(-50%); /* Centra la foto verticalmente */
}

/* Estilos para la foto */
.user-photo img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 10px;
    object-fit: cover; /* Asegura que la imagen se ajuste dentro del contenedor */
}

.user-info h3 {
    position: relative;
    left: -110px; /* Ajusta este valor para mover el título a la izquierda */
    top: 0px; /* Ajusta este valor si quieres mover el título hacia abajo o arriba */
    font-size: 18px; /* Tamaño del título */
    margin: 0;
    padding-left: 10px; /* Ajusta según necesites un margen interno a la izquierda */
}
/* Contenedor de servicios alineado a la derecha */
.service-list {
    display: flex;
    flex-direction: column; /* Coloca los servicios uno debajo del otro */
    align-items: flex-end; /* Alinea los servicios a la derecha */
    gap: 5px; /* Añade espacio entre los servicios */
    text-align: right;
    flex-shrink: 0; /* Evita que este contenedor se ajuste al tamaño del contenido de la izquierda */
    max-width: 200px; /* Ajusta el ancho máximo si lo deseas */
}
.service-list span {
    background-color: #444;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
}

.service-list::-webkit-scrollbar {
    height: 8px;
}

.service-list::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
}


/* Botón "Ver Perfil" alineado a la izquierda */
.view-profile-btn {
    background-color: #00bfff;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    align-self: flex-start; /* Alinea el botón a la izquierda */
    margin-top: auto; /* Coloca el botón en la parte inferior */
    width: auto; /* Asegura que el botón no se expanda */
}

.view-profile-btn:hover {
    background-color: #007bbf;
}

/* Tarjeta del empleador */
.employer-card {
    display: flex;
    flex-direction: row; /* Coloca la foto a la izquierda y la info a la derecha */
    align-items: center;
    width: 100%;
}

/* Estilo para la foto del empleador */
.employer-photo img {
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Hace la imagen circular */
    margin-right: 15px;
}

/* Información del empleador */
.employer-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

/* Nombre del empleador */
.employer-info h3 {
    margin: 0;
    font-size: 18px;
    color: #f4f4f4;
}

/* Progreso del empleador */
.employer-progress {
    margin-top: 10px;
    width: 100%; /* Asegura que la barra ocupe todo el ancho */
}

.progress-bar {
    background-color: #1e1e1e;
    border-radius: 4px;
    height: 10px;
    width: 100%;
    margin-bottom: 5px;
}

.progress {
    background-color: #00bfff;
    height: 100%;
    border-radius: 4px;
}

/* Botón "Ver Perfil" */
.view-profile-btn {
    background-color: #00bfff;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
    align-self: flex-start; /* Alinea el botón a la izquierda */
    width: auto;
}

.view-profile-btn:hover {
    background-color: #007bbf;
}
/* Contenedor principal para los mejores empleadores */
.best-employers-container {
    background-color: #2a2a2a;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Sombra para darle profundidad */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

/* Tarjeta del empleador */
.employer-card {
    display: flex;
    flex-direction: row; /* Coloca la foto a la izquierda y la info a la derecha */
    align-items: center;
    width: 100%;
}

/* Estilo para la foto del empleador */
.employer-photo img {
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Hace la imagen circular */
    margin-right: 15px;
    margin-top: -200px; /* Mueve la imagen de perfil hacia arriba */
}
/* Información del empleador */
.employer-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

/* Nombre del empleador */
.employer-info h3 {
    margin: 0;
    font-size: 18px;
    color: #f4f4f4;
}

/* Progreso del empleador */
.employer-progress {
    margin-top: 10px;
    width: 100%; /* Asegura que la barra ocupe todo el ancho */
}

.progress-bar {
    background-color: #1e1e1e;
    border-radius: 4px;
    height: 10px;
    width: 100%;
    margin-bottom: 5px;
}

.progress {
    background-color: #00bfff;
    height: 100%;
    border-radius: 4px;
}

/* Botón "Ver Perfil" alineado a la izquierda */
.view-profile-btn {
    background-color: #00bfff;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
    align-self: flex-start; /* Asegura que el botón esté alineado a la izquierda */
    width: auto;
}

/* Descripción del empleador justo debajo del botón */
.employer-description {
    margin-top: 15px; /* Espacio por encima de la descripción */
    background-color: #333333;
    border-radius: 8px;
    padding: 10px; /* Ajusta el padding para crear espacio dentro del contenedor */
    padding-right: 2px; /* Añade espacio a la derecha del contenido */
    padding-bottom: 2px; /* Añade espacio en la parte inferior */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Sombra */
    color: #f4f4f4;
    width: 100%;
}
.inner-flex-item.small {
    flex: 1; /* Contenedor izquierdo y derecho del mismo tamaño */
    overflow-y: auto; /* Mostrar la barra deslizadora del contenedor izquierdo */
    height: auto; /* Ocupa todo el alto disponible */
width: 100%;
    display: none; /* Oculta el contenedor y no ocupa espacio */
    position: relative; /* Asegura que se posicione en relación a su contenedor padre */
    overflow-x: hidden; /* Ocultar desplazamiento horizontal */
    margin-top: 10px; /* Desplaza el contenedor hacia arriba */
}
.employer-description h4 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #00bfff;
}

.employer-description p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    text-align: justify;
    color: #f4f4f4;
}
.crearactividad-container {
    background-color: #2a2a2a;
    border-radius: 8px;
    padding: 20px;
    margin: 0; /* Elimina el centrado horizontal automático */
    margin-top: -15px; /* Mueve hacia arriba el contenedor */
    margin-left: -15px; /* Ajusta el margen izquierdo */
    margin-right: 0px; /* Reduce el margen derecho para acercarlo al extremo */
    width: 110%; /* Ajusta el ancho para que ocupe todo el espacio disponible */
    height: calc(100vh - 40px); /* Ocupa casi toda la altura de la pantalla */
    box-sizing: border-box;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    overflow-y: auto; /* Habilita la barra de desplazamiento vertical */
    overflow-x: hidden; /* Evita la barra horizontal */
    position: relative; /* Ajusta la posición relativa al contenedor padre */
}

.crearactividad-container h2 {
    font-size: 12px; /* Reduce el tamaño del título */
    font-weight: bold;
    margin-bottom: 8px; /* Ajusta la separación inferior */
    text-align: center; /* Mantiene el título centrado */
}

/* Personalización de la barra de desplazamiento */
.crearactividad-container::-webkit-scrollbar {
    width: 5px;
}

.crearactividad-container::-webkit-scrollbar-thumb {
    background-color: #00bfff; /* Color de la barra deslizadora */
    border-radius: 10px;
}

.crearactividad-container::-webkit-scrollbar-track {
    background-color: #2a2a2a; /* Color del track */
}

/* Asegurar espacio entre el menú principal y el contenedor */
header {
    margin-bottom: 0px; /* Espacio debajo del menú principal */
}





/* Limpiar flotaciones */
main:after {
    content: "";
    display: table;
    clear: both;
}

/* Estilos para el contenedor izquierdo más grande */
.contenedor-izquierdo {
    background-color: #2a2a2a; /* Mismo color que el menú */
    border-radius: 8px;
    position: absolute;  /* Posicionamiento absoluto */
    top: 53px;           /* Mueve hacia abajo 50px desde el borde superior */
    left: 10px;          /* Mueve hacia la derecha 20px desde el borde izquierdo */
    width: 95%;          /* Ocupa el 65% del ancho disponible */
    height:95%;        /* Ocupa el 85% de la altura de la ventana del navegador */
    margin-right: 10px;  /* Agrega un margen derecho */
    margin-bottom: 20px; /* Agrega espacio en la parte inferior */
    float: left;
    overflow: hidden; /* Eliminar la barra de desplazamiento */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}
.contenedor-izquierdo h2 {
    font-size: 12px; /* Reduce el tamaño del título */
    font-weight: bold; /* Mantiene la negrita */
    margin-bottom: 10px; /* Ajusta el espaciado inferior */
    text-align: left; /* Alinea el título a la izquierda */
    color: #f4f4f4; /* Mantiene el color del texto */
}

.contenedor-tareas,
.contenedor-actividades {
    background-color: #333333;
    border-radius: 8px;
    padding: 10px;
    
    margin-left: 10px; /* Añade espacio a la izquierda del contenedor */
    width: 88%; /* Ancho ajustado para reflejar el cambio en el margen izquierdo */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Sombra para darle profundidad */
    height: 230px; /* Ajusta la altura de los contenedores según lo necesites */
    overflow-y: auto; /* Habilita la barra de desplazamiento vertical */
 overflow-x: hidden;
}

/* Personalización de la barra de desplazamiento */
.contenedor-tareas::-webkit-scrollbar,
.contenedor-actividades::-webkit-scrollbar {
    width: 5px;
}

.contenedor-tareas::-webkit-scrollbar-thumb,
.contenedor-actividades::-webkit-scrollbar-thumb {
    background-color: #00bfff;
    border-radius: 10px;
}

.contenedor-tareas::-webkit-scrollbar-track,
.contenedor-actividades::-webkit-scrollbar-track {
    background-color: #2a2a2a;
}
h2 {
    font-size: 18px; /* Tamaño de fuente reducido */
    margin-bottom: 10px; /* Menos espacio debajo del título */
    color: #f4f4f4; 
   
    margin-left: 10px;
}



.form-crear-actividad {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio entre los elementos del formulario */
}
/* Contenedor de las columnas */
    .columnas-container {
        display: flex;
        flex-direction: column; /* Apila las columnas verticalmente */
        gap: 15px; /* Espacio entre las columnas */
        width: 100%; /* Ocupa todo el ancho disponible */
        box-sizing: border-box;
        padding: 0; /* Mantiene el diseño compacto */
        margin: 0 auto; /* Centra el contenedor si es necesario */
    }

    /* Columnas individuales */
    .columna {
        flex: none; /* Desactiva el comportamiento de igual ancho */
        width: 100%; /* Cada columna ocupa todo el ancho */
        margin: 0; /* Elimina cualquier margen interno */
        padding: 0; /* Elimina cualquier padding interno */
    }

.form-group {
    display: flex;
    flex-direction: column;
 width: 75%;
    margin-bottom: 5px; /* Reducir espacio entre grupos */
}
/* Reducir tamaño del título "Confirmación de Pago" */
.form-group h3 {
    font-size: 11px; /* Reduce el tamaño del título */
    font-weight: bold;
    margin-bottom: 8px; /* Ajusta el espacio inferior */
}
/* Reducir el tamaño del mensaje de error */
#mensajeError {
    font-size: 11px; /* Reduce el tamaño del texto del error */
    color: #ff4444; /* Mantiene el color rojo del error */
    margin-bottom: 8px; /* Ajusta la separación inferior */
    padding: 5px; /* Ajusta el espaciado interno */
    border-radius: 4px; /* Bordes redondeados */
    display: none; /* Mantener oculto hasta que sea necesario */
}

/* Reducir tamaño del texto en el párrafo */
.form-group p {
    font-size: 10px; /* Reduce el tamaño del texto */
    line-height: 1.4; /* Ajusta la altura de línea para mejorar legibilidad */
    margin-bottom: 10px; /* Reduce la separación inferior */
}
.form-group1 {
    display: flex;
    flex-direction: column;
 width: 97%;
 font-size: 11px;
    margin-bottom: 5px; /* Reducir espacio entre grupos */
}
.form-group label {
    font-size: 11px;
    margin-bottom: 5px;
    color: #00bfff; /* Color del texto */
}
.form-group1 input[type="text"],
.form-group1 input[type="number"],
.form-group1 input[type="date"],
.form-group1 textarea,
.form-group1 select {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #333333;
    background-color: #1e1e1e;
    color: #f4f4f4;
    width: 100%;

    box-sizing: border-box;
    font-size: 11px;
}

.form-group1 textarea {
    resize: vertical;
 }
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group textarea,
.form-group select {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #333333;
    background-color: #1e1e1e;
    color: #f4f4f4;
    width: 100%;

    box-sizing: border-box;
    font-size: 10px;
}

.form-group textarea {
    resize: vertical;
}

.boton-container {
    position: absolute; /* Absoluto dentro del contenedor */
    top: 20px; /* Mueve el botón 20px desde la parte superior del contenedor */
    right: 20px; /* Mueve el botón 20px desde el borde derecho */
}
.btn-subir {
    background-color: #00bfff;
    color: #f4f4f4;
    padding: 7px 17px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);

    /* Posicionamiento */
    position: relative; /* Cambiar a posición absoluta */
    top: -15px; /* Ajusta hacia arriba (reduce para mover más hacia arriba) */
    right: -18px; /* Ajusta hacia la derecha (reduce para mover más hacia la derecha) */
}

.btn-subir:hover {
    background-color: #007bbf;
}

.contenedor-subida {
    background-color: #2a2a2a;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    margin-right: 10px; /* Añade espacio desde el filo derecho */
    width: 89%; /* Ajusta el ancho dejando espacio a la derecha */
 height: 225px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    color: #f4f4f4;
}

.contenedor-subida h3 {
    margin-bottom: 10px;
    color: #00bfff;
font-size: 12px;
}

.contenedor-subida label {
    display: block;
font-size: 12px;
    margin-bottom: 5px;
    font-weight: bold;
}

.contenedor-subida input[type="file"] {
    display: block;
    margin-bottom: 10px;
}

.contenedor-subida p {
    font-size: 11px;
    color: #cccccc;
}
.textarea-descripcion {
    width: 100%; /* O el valor deseado */
    height: 150px; /* Aumenta este valor para hacer el cuadro más alto */
    padding: 10px; /* Puedes ajustar el espacio interno del cuadro */
    margin-bottom: 20px; /* Añade espacio debajo del cuadro */
    resize: none; /* Desactiva la opción de cambiar tamaño manualmente si es necesario */
    border-radius: 5px; /* Bordes redondeados */
    background-color: #2a2a2a; /* Color de fondo */
    color: #f4f4f4; /* Color del texto */

}

.cuenta-bancaria-mostrar {
    height: 150px; /* Ajusta este valor según la altura que desees */
    width: 100%;   /* Mantén el ancho al 100% del contenedor */
    padding: 10px;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid #ccc; /* Borde para delimitar el cuadro */
    background-color: #333; /* Color de fondo */
    color: #f4f4f4; /* Color del texto */
    overflow-y: auto; /* Habilitar barra de desplazamiento si el contenido es demasiado largo */
    box-sizing: border-box;
}
/* Estilo para el título centrado */
.container-info-personal h2 {
    font-size: 24px;
    color: #f4f4f4;
    margin-bottom: 20px;
    text-align: center;
}
   .personal-info-form {
        display: flex;
        flex-direction: column; /* Cambia a disposición vertical */
        gap: 20px; /* Espacio entre los elementos */
        margin: 0 auto; /* Centrar el formulario */
        width: 100%; /* Asegura que ocupe todo el ancho disponible */
        max-width: 600px; /* Ajusta el ancho máximo para pantallas pequeñas */
        padding: 0 10px; /* Agrega un poco de padding lateral */
    }

    .personal-form-column {
        width: 100%; /* Cada columna ocupa todo el ancho disponible */
        gap: 15px; /* Ajusta el espacio entre los elementos internos */
        flex: none; /* Elimina el comportamiento de columnas proporcionales */
    }
/* Estilos para asegurar que todos los contenedores tengan el mismo ancho */
.personal-form-group {
    width: 100%; /* Asegura que el contenedor ocupe el ancho disponible */
    max-width: 500px; /* Define un ancho máximo común para todos los contenedores */
    box-sizing: border-box; /* Incluye padding y bordes dentro del ancho */
    margin-bottom: 20px; /* Espacio entre los contenedores */
}
/* Contenedor de la información */
.personal-form-group p {
    font-size: 11px;
    padding: 10px;
    background-color: #808080;;
    border-radius: 5px;
    border: 1px solid #ddd;
    word-wrap: break-word; /* Ajusta el texto dentro del contenedor sin desplazarlo */
    white-space: normal; /* Permite que el texto haga saltos de línea */
    overflow-x: hidden; /* Elimina la barra de desplazamiento horizontal */
 overflow-y: hidden; /* Elimina la barra deslizadora vertical */
    
}

.personal-form-group label {
    color: #f4f4f4;
    font-size: 12px;
    margin-bottom: 5px;
}



.personal-form-group input,
.personal-form-group textarea {
    width: 102%; /* Asegúrate de que ocupen todo el ancho de la columna */
    box-sizing: border-box; /* Incluye padding y border en el ancho */
    max-width: 120%; /* Evita que se desborden horizontalmente */
    padding: 10px;
    border: 1px solid #333333; /* Borde oscuro para mayor visibilidad */
    border-radius: 5px;
    background-color: #2a2a2a; /* Color gris oscuro para el fondo */
    color: #f4f4f4; /* Texto blanco para buen contraste */
    font-size: 11px; /* Tamaño de fuente adecuado */
    outline: none; /* Elimina el borde de enfoque predeterminado */
    transition: border-color 0.3s ease; /* Transición suave en el borde */
}

.personal-form-group input:focus,
.personal-form-group textarea:focus {
    border-color: #00bfff; /* Cambia el borde a azul celeste en foco */
}


.personal-form-group textarea {
    resize: vertical; /* Permitir que el usuario ajuste la altura del textarea */
    max-height: 200px; /* Limitar la altura máxima del área de texto */
    overflow-y: scroll; /* Habilitar la barra de desplazamiento vertical */
}

/* Estilo para el botón editar */
.btn-personal-editar {
    background-color: #00bfff; /* Azul claro */
    color: white; /* Texto blanco */
    padding: 5px 13px; /* Reduce el espaciado interno */
    border: none; /* Sin borde */
    border-radius: 5px; /* Borde redondeado */
    cursor: pointer; /* Cambia el cursor a mano cuando se pasa el ratón */
    position: absolute; /* Posición absoluta para colocarlo dentro del contenedor */
    top: 5px; /* Más cerca de la parte superior del contenedor */
    right: 5px; /* Más cerca del borde derecho */
    font-size: 11px; /* Reduce el tamaño del texto */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transición suave para hover */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* Sombra ligera */
}

.btn-personal-editar:hover {
    background-color: #007bbf;
}

/* Personalización de la barra de desplazamiento */
.personal-form-group textarea::-webkit-scrollbar {
    width: 7px;
}

.personal-form-group textarea::-webkit-scrollbar-thumb {
    background-color: #00bfff; /* Color del scrollbar */
    border-radius: 10px;
}

.personal-form-group textarea::-webkit-scrollbar-track {
    background-color: #2a2a2a;
}
/* Estilos generales para el modal de registro */
.modal-register {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro semitransparente */
}

.modal-content-new-register {
    background-color: #2a2a2a;
    margin: 5% auto; /* Centrado */
    padding: 20px;
    border-radius: 10px;
    width: 90%; /* Ancho razonable */
    max-width: 5000px; /* Ancho máximo */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    color: #f4f4f4;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espacio entre campos */
    box-sizing: border-box;
}

.modal-content-new-register h2 {
    text-align: center;
    margin-bottom: 20px;
}

.new-register-input {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.new-register-input input {
    padding: 10px;
    border-radius: 5px;
    border: none;
    background-color: #333333;
    color: #f4f4f4;
    font-size: 14px;
}

.btn-new-register {
    background-color: #00bfff;
    color: #ffffff;
    padding: 12px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-new-register:hover {
    background-color: #007bbf;
}

.close-new-register {
    color: #f4f4f4;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-new-register:hover {
    color: #bbb;
    text-decoration: none;
}


.modal-content-new-register h2 {
    text-align: center;
    margin-bottom: 20px;
}

.new-register-input {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.new-register-input input {
    padding: 10px;
    border-radius: 5px;
    border: none;
    background-color: #333333;
    color: #f4f4f4;
    font-size: 14px;
}

/* Estilo para la foto de perfil */
.profile-image-container-register {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.profile-image-register {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    cursor: pointer;
    object-fit: cover;
    border: 2px solid #00bfff;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}

.btn-new-register {
    background-color: #00bfff;
    color: #ffffff;
    padding: 12px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-new-register:hover {
    background-color: #007bbf;
}

.close-register-custom {
    color: #f4f4f4;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-register-custom:hover {
    color: #bbb;
    text-decoration: none;
}

/* Estilos para mostrar y ocultar la contraseña */
.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #00bfff;
    font-size: 14px;
}

.login-input {
    position: relative;
   
}

.alert {
    color: red;
    font-size: 14px;
    margin-bottom: 10px;
}
/* Estilos para agrupar el prefijo del teléfono y el campo de texto del número */
.telefono-group {
    display: flex;
    flex-direction: column;
}

.telefono-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre el prefijo y el campo de texto */
position: relative; /* Asegura que este contenedor no interfiera con el dropdown */
    z-index: 1; /* Mantén el valor bajo para no interferir con el dropdown */
}

.telefono-container select {
    width: 100px; /* Ajusta el ancho del dropdown según sea necesario */
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.telefono-container input {
    flex: 1;
width: 140px; /* Ajusta el ancho del dropdown según sea necesario */

    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
}
/* Margen general para cada contenedor */
.form-section {
    margin-bottom: 20px; /* Espacio entre cada contenedor */
    display: flex;
    flex-direction: column;
     width: 96%; /* Hacer que ocupe todo el ancho */
}

/* Estilo para los labels (País, Ciudad) */
.form-section label {
font-size: 11px;
    margin-bottom: 8px; /* Espacio entre el label y el dropdown */
    color: #f4f4f4; /* Color blanco para el texto */
    font-weight: bold;
}

/* Estilo para el contenedor del menú desplegable */
.dropdownNuevo {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Botón desplegable */
.dropbtnNuevo {
    background-color: #1e1e1e; /* Color negro oscuro */
    padding: 10px;
    border: 1px solid #444; /* Borde gris oscuro */
    cursor: pointer;
    display: inline-block;
    width: 93%;
    color: #f4f4f4; /* Texto blanco */
    text-align: left;
    font-size: 11px;
    transition: background-color 0.3s ease;
    border-radius: 8px; /* Añadir curvatura a los bordes del botón */
}

/* Cambiar color del botón al hacer hover */
.dropbtnNuevo:hover {
    background-color: #333; /* Color más claro al hacer hover */
}

/* Estilo para el contenido del menú desplegable */
.dropdown-contentNuevo {
    display: none;
    position: absolute;
    background-color: #2a2a2a; /* Fondo negro oscuro */
    max-height: 200px;
font-size: 11px;

    overflow-y: auto;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    border: 1px solid #444; /* Borde gris oscuro */
}

/* Mostrar el menú al hacer hover sobre el botón */
.dropdownNuevo:hover .dropdown-contentNuevo {
    display: block;
}

/* Estilo de las opciones dentro del menú */
.dropdown-contentNuevo a {
    padding: 20px;
    text-decoration: none;
    display: block;
    color: #f4f4f4; /* Texto blanco */
    background-color: #2a2a2a; /* Fondo negro oscuro */
    transition: background-color 0.3s ease;
}

/* Cambiar color de la opción al hacer hover */
.dropdown-contentNuevo a:hover {
    background-color: #444; /* Fondo gris oscuro al hacer hover */
}

/* Estilo del cuadro de búsqueda */
.dropdown-contentNuevo input[type="text"] {
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    width: 100%;
font-size: 11px;

    border: 1px solid #555; /* Borde gris oscuro */
    background-color: #1e1e1e; /* Fondo negro */
    color: #f4f4f4; /* Texto blanco */
}

/* Scroll vertical con estilo personalizado */
.dropdown-contentNuevo {
    scrollbar-width: thin; /* Grosor del scroll */
    scrollbar-color: #555 #1e1e1e; /* Colores del scroll (thumb y fondo) */
}

.dropdown-contentNuevo::-webkit-scrollbar {
    width: 8px;
}

.dropdown-contentNuevo::-webkit-scrollbar-thumb {
    background-color: #555; /* Color del scroll */
}

.dropdown-contentNuevo::-webkit-scrollbar-track {
    background-color: #1e1e1e; /* Fondo del scroll */
}
/* Centrando la imagen y aumentando su tamaño */
.profile-image-container-large {
    display: flex;
    justify-content: center; /* Centrar la imagen horizontalmente */
    align-items: center; /* Centrar verticalmente si es necesario */
    margin-bottom: 6px; /* Espacio debajo de la imagen */

}


.profile-image-large {
 display: block;  
    width: 170px; /* Aumentar el ancho de la imagen */
    height: 170px; /* Aumentar la altura de la imagen */
    border-radius: 50%; /* Mantener la imagen circular */
    object-fit: cover; /* Ajustar la imagen sin distorsión */
    border: 3px solid #ccc; /* Mantener borde alrededor de la imagen */
}
.credentials-container {
    background-color: #2a2a2a; /* Fondo gris oscuro */
    padding: 20px;
overflow-x: hidden;  /* Oculta el desbordamiento horizontal */
    border-radius: 10px;
    margin-bottom: 20px;
    border: 1px solid #444444;
    width: 85%;
height: 240px;
    overflow-y: hidden; /* Habilita la barra deslizadora vertical */
    max-height: 450px; /* Limita la altura para la barra deslizadora */
}

/* Contenedor para las opciones de categoría, subcategoría, etc. */
.contenedor-categorias {
    background-color: #2a2a2a; /* Fondo gris oscuro */
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 15px;
    border: 1px solid #444444;
    width: 120%;
    height: 86%; /* Aumenta la altura del contenedor */
    overflow-y: auto; /* Habilita la barra deslizadora vertical */
   
}

/* Botones en la parte superior derecha */
.header-buttons-container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}

.btn-view-content, .btn-delete {
    background-color: #333;
    color: #f4f4f4;
    padding: 3px 8px;
    margin-left: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
font-size: 11px;

}

.btn-view-content:hover, .btn-delete:hover {
    background-color: #FF4500; /* Cambia el color al pasar el cursor */
}

/* Barra deslizadora personalizada */
.contenedor-categorias::-webkit-scrollbar {
    width: 10px;
}

.contenedor-categorias::-webkit-scrollbar-thumb {
    background-color: #FF4500; /* Color personalizado para la barra */
    border-radius: 5px;
}
#changeProfilePicture {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 7px 18px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    display: block; /* Asegúrate de que el botón sea un bloque */
    margin: 0 auto; /* Centrará el botón horizontalmente */
    text-align: center; /* Asegura que el texto esté centrado */
}

/* Resto de los estilos */
#changeProfilePicture:hover {
    background-color: #0056b3;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
}

#changeProfilePicture:active {
    background-color: #004085;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(2px);
}
.toggle-password {
    cursor: pointer;
    color: #007BFF;
    margin-left: 10px;
    font-size: 0.9rem;
}


.credentials-container-servicio {
    background-color: #2a2a2a; /* Fondo gris oscuro */
    padding: 20px;
    border-radius: 10px;
    margin: 0; /* Elimina todos los márgenes */
    border: 1px solid #444444;
    width: 92%;
    min-height: 550px; /* Aumenta la altura mínima del contenedor */
    max-height: 700px; /* Limita la altura si es necesario */
    margin-left: -20px; /* Ajusta el margen izquierdo al borde */
}


/* Estilos generales del dropdown */
.form-section {
    margin-bottom: 20px;
}

.dropdownNuevoCategoria, .dropdownNuevoSubcategoria {
    position: relative;
    display: inline-block;
    width: 100%;
}

.dropbtnNuevoCategoria, .dropbtnNuevoSubcategoria {
    background-color: #1e1e1e; /* Fondo negro para el botón */
    color: #f4f4f4; /* Texto claro para contraste */
    padding: 10px;
    font-size: 16px;
    border: 1px solid #444; /* Borde gris oscuro */
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    display: inline-block;
}

.dropdownNuevoCategoria:hover .dropdown-contentNuevoCategoria,
.dropdownNuevoSubcategoria:hover .dropdown-contentNuevoSubcategoria {
    display: block;
}

/* Contenido del dropdown */
.dropdown-contentNuevoCategoria, .dropdown-contentNuevoSubcategoria {
    display: none;
    position: absolute;
    background-color: #2a2a2a; /* Fondo negro más claro para el menú desplegable */
    min-width: 100%;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    max-height: 200px; /* Limitar la altura para que se active la barra de desplazamiento */
    overflow-y: auto; /* Activar barra de desplazamiento vertical */
    overflow-x: hidden; /* Desactivar la barra de desplazamiento horizontal */
    border: 1px solid #444; /* Borde gris oscuro */
    border-radius: 4px;
}

/* Input para buscar */
.dropdown-contentNuevoCategoria input, .dropdown-contentNuevoSubcategoria input {
    width: calc(100% - 20px);
    margin: 10px;
    padding: 8px;
    border: 1px solid #444;
    border-radius: 4px;
    background-color: #1e1e1e; /* Fondo negro para el input */
    color: #f4f4f4; /* Texto claro */
}

/* Opciones del menú desplegable */
.dropdown-contentNuevoCategoria a, .dropdown-contentNuevoSubcategoria a {
    color: #f4f4f4; /* Texto claro para las opciones */
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.dropdown-contentNuevoCategoria a:hover, .dropdown-contentNuevoSubcategoria a:hover {
    background-color: #333; /* Fondo gris más claro al pasar el cursor */
}

/* Estilo de la barra de desplazamiento vertical */
.dropdown-contentNuevoCategoria::-webkit-scrollbar, .dropdown-contentNuevoSubcategoria::-webkit-scrollbar {
    width: 8px;
}

.dropdown-contentNuevoCategoria::-webkit-scrollbar-thumb, .dropdown-contentNuevoSubcategoria::-webkit-scrollbar-thumb {
    background-color: #444; /* Color oscuro para la barra de desplazamiento */
    border-radius: 4px;
}

.dropdown-contentNuevoCategoria::-webkit-scrollbar-thumb:hover, .dropdown-contentNuevoSubcategoria::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.dropdown-contentNuevoCategoria::-webkit-scrollbar-track, .dropdown-contentNuevoSubcategoria::-webkit-scrollbar-track {
    background: #1e1e1e; /* Fondo negro para la pista de la barra */
}

.dropbtnNuevoCategoria:hover, .dropbtnNuevoSubcategoria:hover {
    background-color: #333; /* Fondo gris claro al pasar el cursor sobre el botón */
    border-color: #666;
}
/* Botón de agregar servicio */
.add-service-container {
    display: flex;
    justify-content: flex-end; /* Coloca el botón a la derecha */
    margin-bottom: 20px;
}

/* Botón para "Agregar servicio" en color naranja */
.btn-add-service {
    background-color: #FF4500; /* Naranja Mandarina */
    color: #f4f4f4;
    padding: 7px 15px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-add-service:hover {
    background-color: #FF6347; /* Un tono más claro de naranja */
}
/* Campo de descripción */
.description-container {
    margin-top: 20px;
 
}
/* Reducir el tamaño de fuente del mensaje de archivos permitidos */
.description-container + p {
    font-size: 11px; /* Reduce el tamaño del texto */
    color: #ccc; /* Color más tenue para menor prominencia */
    margin-top: 5px; /* Ajuste de margen superior */
    text-align: left; /* Asegura alineación con el formulario */
}

.description-container label {
    color: #f4f4f4; /* Texto claro */
    font-size: 11px;
}

#descripcion-actividad {
    width: 96%;
    margin-bottom: 10px;
    height: 130px;
    padding: 10px;
font-size: 11px;
    border: 1px solid #444;
    border-radius: 4px;
    background-color: #1e1e1e; /* Fondo negro */
    color: #f4f4f4; /* Texto claro */
    resize: none; /* Desactivar el cambio de tamaño manual */
    margin-top: 10px;
word-wrap: break-word; /* Ajusta el texto dentro del contenedor sin desplazarlo */
    white-space: normal; /* Permite que el texto haga saltos de línea */
    overflow-x: hidden; /* Elimina la barra de desplazamiento horizontal */
overflow-y: hidden; /* Elimina la barra deslizadora vertical */
}

/* Contenedor de subida de archivos */
.upload-container {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

/* Para centrar los botones */
.upload-container label {
    margin-bottom: 10px;
    display: block;
}

/* Alinear correctamente los inputs de subida de archivos (ocultos) */
input[type="file"] {
    display: none; /* Ocultar el input de archivo por defecto */
}


/* Estilo de los botones de subida de archivos personalizados */
.btn-upload-custom {
    display: inline-block;
    background-color: #2a2a2a;
    color: #f4f4f4;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    margin-right: 15px;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.btn-upload-custom:hover {
    background-color: #333;
}


.preview-container {

    margin-top: 20px;
    background-color: #1e1e1e; /* Color negro */
    padding: 15px;
    border-radius: 6px;
    color: #f4f4f4; /* Color claro para el texto */
    height: 150px; /* Puedes ajustar esta altura según lo necesites */
    overflow-y: auto; /* Solo desplazamiento vertical */
}

.preview-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.preview-container ul li {
    margin-bottom: 10px;
    word-wrap: break-word;
}
.upload-section {
    display: flex;
    align-items: center;


    justify-content: flex-start; /* Alinea los elementos a la izquierda */
    margin-bottom: 8px; /* Reduce el espacio inferior */
}

.upload-btn {
    display: inline-block;
    padding: 5px 0; /* Reduce el padding */
    background-color: #2a2a2a;
    color: white;
    border-radius: 4px; /* Reduce el radio del borde */
    cursor: pointer;
    text-align: center;
    font-size: 10px; /* Reduce el tamaño del texto */
    border: none;

    transition: background-color 0.3s ease;
    width: 80px; /* Reduce el ancho del botón */
}

.upload-btn:hover {
    background-color: #3e3e3e;
}
#upload-button {
    font-size: 11px; /* Tamaño del texto */
    width: auto; /* Ajusta automáticamente el ancho según el contenido */
    padding: 15px 10px; /* Aumenta el padding vertical para incrementar la altura */
    text-align: left; /* Alinea el texto dentro del botón hacia la izquierda */
    margin-right: auto; /* Mantiene el botón pegado a la izquierda */
}

.file-name {
    color: #f4f4f4;
  font-size: 10px !important; /* Reduce el tamaño del texto y fuerza su aplicación */
    margin-left: 15px;
    word-wrap: break-word;
    max-width: 250px;
    text-align: left; /* Alinea el nombre del archivo a la izquierda */
    width: 250px; /* Asegura que todos los nombres de archivos tengan el mismo ancho */
}

/* Si el botón es un label, asegurarse de que se aplique correctamente */
.upload-section label.upload-btn {
    font-size: 11px; /* Reduce el tamaño del texto */
    
}

/* Estilos generales para los dropdowns */
.dropdownCategoria, .dropdownSubcategoria {
    position: relative;
padding-bottom: 10px; /* Añadir espacio dentro del contenedor */
    display: inline-block;
    width: 100%; /* Asegura que los dropdowns ocupen todo el ancho del contenedor */
  margin-top: 10px; /* Ajusta el margen superior para subir */
}

.dropbtnCategoria, .dropbtnSubcategoria {
    background-color: #2a2a2a; /* Fondo oscuro acorde con el diseño general */
    color: #f4f4f4;
    padding: 12px;
    font-size: 11px;
    border: none;
    cursor: pointer;
    text-align: left;

    box-sizing: border-box;
    border-radius: 6px;
    transition: background-color 0.3s ease;
    font-family: 'Arial', sans-serif;
}

.dropbtnCategoria:hover, .dropbtnSubcategoria:hover {
    background-color: #333333; /* Cambia el color al pasar el cursor */
}

.dropdown-contentCategoria, .dropdown-contentSubcategoria {
    display: none;
    position: absolute;
    background-color: #2a2a2a;
    width: 100%; /* Ajusta el ancho del menú desplegable al 100% del contenedor */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
    z-index: 1;
font-size: 11px;

    max-height: 200px;
    overflow-y: auto;
    border-radius: 6px;
}

/* Estilo de la barra de desplazamiento vertical */
.dropdown-contentCategoria::-webkit-scrollbar,
.dropdown-contentSubcategoria::-webkit-scrollbar {
    width: 8px;
}

.dropdown-contentCategoria::-webkit-scrollbar-thumb,
.dropdown-contentSubcategoria::-webkit-scrollbar-thumb {
    background-color: #555; /* Color de la barra de desplazamiento */
    border-radius: 4px;
}

.dropdown-contentCategoria::-webkit-scrollbar-track,
.dropdown-contentSubcategoria::-webkit-scrollbar-track {
    background-color: #2a2a2a; /* Fondo de la pista */
}

.dropdown-contentCategoria input, .dropdown-contentSubcategoria input {
    width: 100%;
font-size: 11px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #444444;
    border-radius: 4px;
    background-color: #1e1e1e;
    color: #f4f4f4;
    margin-bottom: 10px;
    font-family: 'Arial', sans-serif;
}

.dropdown-contentCategoria a, .dropdown-contentSubcategoria a {
    color: #f4f4f4;
    padding: 12px;
    text-decoration: none;
    display: block;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.dropdown-contentCategoria a:hover, .dropdown-contentSubcategoria a:hover {
    background-color: #444444; /* Color de fondo al pasar el cursor */
}

/* Añade un pequeño margen entre las secciones del formulario */
.form-section {
    margin-bottom: 20px;
}

/* Asegura que todo esté alineado */
.description-container, .upload-section, .form-section {
    width: 100%; /* Todos los elementos ocupan el 100% del ancho del contenedor */
}

/* Estilo para la descripción */
.description-container textarea {
    width: 100%;
    height: 120px;
    padding: 10px;
    border: 1px solid #444444;
    border-radius: 6px;
    background-color: #1e1e1e;
    color: #f4f4f4;
    font-family: 'Arial', sans-serif;
    box-sizing: border-box;
}

/* Botones de subida de archivos */
.upload-section {
    margin-bottom: 15px;
}




/* Ajusta el contenedor dinámico para que no se desborde */
.dynamic-service-container {
    background-color: #444444; /* Color de fondo */
    border: 2px solid #555555; /* Borde oscuro */
    padding: 15px;
    width: 95%; /* Ancho ajustable del contenedor */
    
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Sombra */
    border-radius: 8px; /* Bordes redondeados */
    color: #ffffff; /* Texto claro para mejor contraste */
    overflow: hidden; /* Evita el desbordamiento del contenido */
    word-wrap: break-word; /* Rompe las palabras largas si es necesario */
    word-break: break-word; /* Rompe las palabras largas en nuevas líneas */
    white-space: normal; /* Asegura que el texto se ajuste a nuevas líneas */
    display: flex;
 margin-left: -20px; /* Elimina cualquier margen izquierdo */
    flex-direction: column; /* Coloca el contenido en columna para que fluya hacia abajo */
    position: relative; /* Permite posicionar los botones y otros elementos */
}


/* Texto de descripción, categoría y subcategoría */
.dynamic-service-container p {
    margin: 20px 20px;
    color: white;
}
/* Estilos para la descripción, categoría y subcategoría */
.dynamic-service-container p {
    margin: 10px 0; /* Espaciado entre los párrafos */
    line-height: 1.6; /* Aumenta el espacio entre líneas para mejor legibilidad */
    text-align: left; /* Alineación del texto hacia la izquierda */
    word-wrap: break-word; /* Asegura que las palabras largas se rompan y no desborden */
}

/* Asegura que el texto no desborde hacia los lados */
.dynamic-service-container p {
    white-space: normal; /* Rompe líneas largas */
    overflow-wrap: break-word; /* Rompe palabras largas si es necesario */
}
.dynamic-service-item {
    margin-bottom: 20px; /* Ajusta este valor según el espacio que desees entre los contenedores */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #444444; /* Esto es opcional, pero le dará un fondo claro a los contenedores */
 font-size: 11px; /* Ajusta el tamaño de los textos dentro del contenedor */

}

.close-modal:hover, .close-fullscreen-modal:hover {
    color: #aaa;
}

#fullscreen-image, #fullscreen-video {
    width: 100%;
    height: auto;
}

.content-row {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
} 

.contenedor-datos1 {
    background-color: #333333; /* Fondo oscuro para el contenedor de datos */
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 20px; /* Espacio debajo de este contenedor */
    display: flex;
    width: 100%;
 margin-left: -9px; /* Ajusta el margen izquierdo */
    
     height: auto; /* Ajusta automáticamente según el contenido */
    justify-content: space-between;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Sombra */
    color: #f4f4f4;
}

.file-name-container {
    background-color: #333333; /* Mismo color que contenedor-datos1 */
    color: white;
    padding: 10px;
    margin-left: 0; /* Resetea el margen izquierdo */
    margin-top: 10px; /* Añade espacio superior para separarlo */
    border-radius: 5px;
    width: 60%; /* Ajusta automáticamente el ancho según el contenido */
    text-align: center;
    display: block; /* Asegura que el contenedor ocupe toda la línea */
    position: relative; /* Mantén relativa la posición para futuros ajustes */
    transform: none; /* Elimina el movimiento con transform */
}

.file-name {
    display: inline-block;
}

/* Contenedor principal */
.contenedor-principal {
    width: 99%; /* Asegura que ocupe casi todo el ancho disponible */
    padding: 10px;
    position: relative; /* Permite posicionamiento relativo para elementos hijos */
    height: auto; /* Ajusta automáticamente según el contenido */
    overflow-y: auto; /* Habilita desplazamiento vertical si es necesario */
    background-color: #333333; /* Fondo del contenedor */
    border: 1px solid #ccc; /* Borde opcional */
    border-radius: 10px; /* Bordes redondeados del contenedor */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
    margin: 0 auto; /* Centra el contenedor horizontalmente */
    margin-top: 0; /* Elimina márgenes adicionales */
/* Mover más hacia la izquierda */
   
    position: relative;
    left: -10px; /* Empuja el contenedor hacia la izquierda */

}
/* Reducir el tamaño del texto en el contenedor de mensajes de error */
#error-messages {
    font-size: 12px; /* Reduce el tamaño del texto */
    color: #ff4444; /* Mantiene el color rojo de los errores */
 
    padding: 5px; /* Reduce el espaciado interno */
    border-radius: 4px; /* Bordes redondeados */
}
.contenedor-principal::-webkit-scrollbar {
    width: 7px; /* Ancho de la barra */
}

.contenedor-principal::-webkit-scrollbar-track {
    background: #444; /* Fondo de la barra */
    border-radius: 8px; /* Bordes redondeados */
}

.contenedor-principal::-webkit-scrollbar-thumb {
    background: #888; /* Color del control deslizante */
    border-radius: 8px; /* Bordes redondeados */
}

.contenedor-principal::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color al pasar el cursor */
}


/* Contenedor dinámico */
.actividad-contenedor {
   background-color: #444444; /* Color de fondo */
    border: 2px solid #555555; /* Borde oscuro */
    padding: 15px;
    width: 88%; /* Ancho ajustable del contenedor */
    margin: 10px auto; /* Espacio entre los elementos y centrar */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Sombra */
    border-radius: 8px; /* Bordes redondeados */
    color: #ffffff; /* Texto claro para mejor contraste */
    overflow: hidden; /* Evita el desbordamiento del contenido */
    word-wrap: break-word; /* Rompe las palabras largas si es necesario */
    word-break: break-word; /* Rompe las palabras largas en nuevas líneas */
    white-space: normal; /* Asegura que el texto se ajuste a nuevas líneas */
    display: flex;
margin-top: 0px;
display: flex;              /* Activa el modelo flexbox */
    justify-content: center;    /* Centra horizontalmente */
    flex-direction: column; /* Coloca el contenido en columna para que fluya hacia abajo */
    position: relative; /* Permite posicionar los botones y otros elementos */
}






.actividad-informacion {
    flex-grow: 1;
    padding-right: 20px;
}

.actividad-botones {
    display: flex;

    gap: 10px;
}

.actividad-botones button {
    background-color: #FF4500;
    border: none;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}


.actividad-botones button:hover {
    background-color: #ff6347; /* Color más claro en hover */
}
/* Estilos del dropdown */
.dropdownCategoria, .dropdownSubcategoria {
    position: relative;
    display: inline-block;
}

.dropdown-contentCategoria, .dropdown-contentSubcategoria {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-contentCategoria a, .dropdown-contentSubcategoria a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-contentCategoria a:hover, .dropdown-contentSubcategoria a:hover {
    background-color: #f1f1f1;
}

/* Mostrar el dropdown cuando se hace clic */
.show {
    display: block;
}

/* Estilos para el input de búsqueda */
#search-categoria, #search-subcategoria {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
}
/* Ajustes generales del modal para un diseño oscuro */
.modal-mostrar-actividad {
    display: none;
    position: fixed;
    z-index: 2000; /* Aumentar el z-index para superponerse al otro modal */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Eliminar la barra de desplazamiento del modal principal */
    background-color: rgba(0, 0, 0, 0.9); /* Fondo semitransparente oscuro */
}

.modal-content2 {
    background-color: #1e1e1e; /* Fondo negro para el modal */
    margin: 3% auto;
    padding: 20px;
    border: 1px solid #444;
    width: 81%;
    max-width: 1200px; /* Ampliar el ancho máximo del modal */
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    color: #f4f4f4; /* Texto claro para destacar sobre el fondo oscuro */
    max-height: 90%; /* Limitar el tamaño del modal en altura */
    overflow: hidden; /* Eliminar la barra de desplazamiento vertical del modal */
margin-right: 20px; /* Ajusta el valor según el espacio deseado */
}

/* General para el modal */
#modalMostrarActividad .modal-content2 {
    font-size: 5px; /* Ajusta el tamaño de la letra para todo el contenido del modal */
    line-height: 1.5; /* Espaciado entre líneas para legibilidad */
}
/* Ajuste para encabezados dentro del modal */
#modalMostrarActividad h2 {
    font-size: 7px; /* Tamaño de letra más pequeño para el título principal */
    margin-bottom: 10px; /* Espacio debajo del título */
}
.fullscreen-media {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 3000; /* Asegura que esté por encima del resto */
    display: flex;
    justify-content: center;
    align-items: center;
}

.fullscreen-media img,
.fullscreen-media video {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    object-fit: contain;
}

.close-mostrar {
    position: absolute; /* Permite posicionar libremente dentro del modal */
    top: 10px; /* Mueve más hacia arriba */
    right: 30px; /* Mueve más hacia la derecha */
    color: #f4f4f4;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

/* Efecto al pasar el cursor */
.close-mostrar:hover,
.close-mostrar:focus {
    color: #ff4500; /* Resaltar el botón de cierre al pasar el ratón */
    text-decoration: none;
    cursor: pointer;
}


.contenido-actividad {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 80vh; /* Limitar el tamaño del contenedor interno para permitir el desplazamiento */
    overflow-y: auto; /* Solo este contenedor tiene la barra de desplazamiento */
    overflow-x: hidden; /* Evita el desplazamiento horizontal */
    padding-right: 10px;
   
    scrollbar-color: #00bfff #2a2a2a;
    
    width: 105%; /* Asegura que ocupe todo el ancho disponible */
    margin-left: -18px; /* Desplaza el contenedor más hacia la izquierda */
    padding-left: 5px; /* Ajusta el padding izquierdo */
}


/* Barra deslizadora personalizada para navegadores basados en Webkit */
.contenido-actividad::-webkit-scrollbar {
    width: 7px;
}

.contenido-actividad::-webkit-scrollbar-track {
    background: #2a2a2a;
    border-radius: 10px;
    border: 1px solid #444;
}

.contenido-actividad::-webkit-scrollbar-thumb {
    background: #00bfff;
    border-radius: 10px;
    border: 2px solid #1e1e1e;
}

.contenido-actividad::-webkit-scrollbar-thumb:hover {
    background: #0077b6;
}

/* Estilo para cada sección: Imágenes, Videos, Documentos, Comprobante */
.section {
    margin-bottom: 0px;
    padding: 5px;
    border: 1px solid #333;
    border-radius: 8px;
    background-color: #2a2a2a; /* Fondo ligeramente más claro para diferenciar la sección */
width: 100%; /* Hace la barra deslizadora más delgada */
}

/* Estilo del botón "Por Caducar" */
.view-activities-button {
    background-color: #00bfff; /* Azul claro */
    color: #ffffff; /* Texto blanco */
    border: none; /* Sin bordes */
    padding: 5px 8px; /* Reduce el espaciado interno */
    font-size: 10px; /* Reduce el tamaño del texto */
    font-weight: bold; /* Texto en negrita */
    border-radius: 4px; /* Bordes ligeramente redondeados */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    position: relative; /* Permite ajustar su posición */
    top: -47px; /* Mueve el botón hacia arriba */
    right: -92px; /* Mueve el botón hacia la derecha */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
    white-space: nowrap; /* Evita que el texto se corte en varias líneas */
}

/* Efecto hover para el botón */
.view-activities-button:hover {
    background-color: #0086b3; /* Azul más oscuro */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Sombra al pasar el cursor */
}

/* Contenedor de elementos multimedia: muestra dos elementos por fila */
.imagenes-container,
.videos-container,
.documentos-container,
.comprobante-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: flex-start; /* Mantener alineados los elementos */
}

/* Estilo uniforme para las imágenes y videos para que no se recorten */
.imagenes-container img,
.videos-container video,
.comprobante-container img {
    width: calc(50% - 15px); /* Dos elementos por fila con espacio entre ellos */
    max-width: 48%;
    height: 400px; /* Ampliar la altura de los elementos */
    object-fit: contain; /* Mostrar toda la imagen o video sin recortar */
    border-radius: 8px;
    border: 1px solid #444; /* Bordes claros para dar contraste sobre el fondo */
}

/* Enlaces de documentos con estilo */
.documentos-container a {
    display: inline-block;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #333;
    color: #00bfff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
    width: 48%; /* Para mantener el mismo tamaño que los otros elementos */
}

.documentos-container a:hover {
    background-color: #444;
    color: #ff4500; /* Resaltar al pasar el ratón */
}



.modal-editar {
    display: none; /* Ocultar por defecto */
    position: fixed; /* Posicionar de forma fija */
    z-index: 1; /* Asegurar que esté encima de otros elementos */
    left: 0;
    top: 0;
    width: 100%; /* Ancho completo */
    height: 100%; /* Alto completo */
    overflow: hidden; /* Habilitar desplazamiento si es necesario */
    background-color: rgba(50, 50, 50, 0.8); /* Fondo gris oscuro con transparencia */
}

.modal-content-editar {
    background-color: #1e1e1e; /* Fondo gris oscuro */
    margin: 10% auto; /* Centramos el modal */
    padding: 20px; /* Espaciado interno */
    border: 1px solid #333; /* Borde gris más oscuro */
    width: 40%; /* Ancho del modal */
height: 75%; /* Alto completo */
    border-radius: 8px; /* Bordes redondeados */
    color: #f4f4f4; /* Color del texto claro */
}

.close-editar {
    color: #f4f4f4; /* Color del botón de cerrar */
    float: right; /* Flotar a la derecha */
    font-size: 28px; /* Tamaño de fuente */
    font-weight: bold; /* Negrita */
}

.close-editar:hover,
.close-editar:focus {
    color: #ff6666; /* Color al pasar el cursor */
    text-decoration: none; /* Sin subrayado */
    cursor: pointer; /* Cursor pointer */
}

input, textarea {
    width: 97%; /* Ancho completo de los campos */
    padding: 10px; /* Espaciado interno */
    margin: 10px 0; /* Espaciado externo */
    border: 1px solid #555; /* Borde gris */
    border-radius: 4px; /* Bordes redondeados */
    background-color: #333; /* Fondo gris oscuro */
    color: #f4f4f4; /* Color del texto claro */
}

input:focus, textarea:focus {
    border-color: #ff6666; /* Borde de color al enfocar */
}

button1 {
    background-color: #555; /* Fondo gris */
    color: #f4f4f4; /* Color del texto claro */
    padding: 10px 15px; /* Espaciado interno */
    border: none; /* Sin borde */
    border-radius: 4px; /* Bordes redondeados */
    cursor: pointer; /* Cursor pointer */
    transition: background-color 0.3s; /* Transición suave */
    display: block; /* Mostrar como bloque para que ocupe todo el ancho */
    width: 23%; /* Ancho completo */
 margin: 0 auto;
}

button1:hover {
    background-color: #777; /* Color más claro al pasar el cursor */
}
.comprobante-adicional-container {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alinea los elementos a la izquierda */
    margin-bottom: 20px;


}
.form-sec select {
   padding: 10px;
    border-radius: 5px;
    border: 1px solid #333333;
    background-color: #1e1e1e;
    color: #f4f4f4;
    width: 101.2%;

    box-sizing: border-box;
    font-size: 14px;
}

/* Estilo del botón de Iniciar Sesión en el modal */
.btn-login {
    background-color: #00bfff; /* Azul celeste */
    color: #fff;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;  /* Para que ocupe el ancho completo */
    text-align: center;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 20px; /* Espacio entre el botón y el contenedor inferior */
}

.btn-login:hover {
    background-color: #009acd; /* Azul más oscuro */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Sombra en hover */
}

/* Contenedor de las acciones del login */
.login-actions {
    margin-top: 20px;
    text-align: center;
}

/* Contenedor para ajustar el campo de contraseña y el botón */
.password-container {
    position: relative;
}

.password-input-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.password-field {
    width: 100%;
    padding-right: 80px;  /* Deja espacio suficiente para el botón "Mostrar" dentro del campo */
    box-sizing: border-box;
}
/* Estilos para el modal de "Asignar Actividad" */

/* Modal general para Asignar Actividad */
.modal-asignar-actividad {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Ocultar las barras de desplazamiento del modal en general */
    background-color: rgba(0, 0, 0, 0.9); /* Fondo semitransparente oscuro */
}

/* Contenido específico del modal de Asignar Actividad */
.modal-content3 {
    background-color: #1e1e1e; /* Fondo negro del modal */
    margin: 3% auto;
    padding: 20px;
    border: 1px solid #444;
    width: 70%;
    max-width: 1000px; /* Ampliar el ancho máximo del modal */
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    color: #f4f4f4; /* Texto claro para destacar sobre el fondo oscuro */
    height: 80%; /* Limitar el tamaño del modal en altura */
    overflow-y: auto; /* Agregar barra de desplazamiento solo si el contenido es muy largo */
overflow-x: hidden; /* Evita desplazamiento horizontal */
}
/* Reducir el tamaño del título "Editar información" */
.modal-content3 h2 {
    font-size: 12px; /* Reduce el tamaño del texto del título */
    font-weight: bold; /* Mantiene el título en negrita */
    margin-bottom: 8px; /* Ajusta la separación inferior */
    text-align: center; /* Asegura que el título se mantenga centrado */
}
/* Botón de cerrar el modal */
.close-asignar {
    color: #f4f4f4;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    
    /* Posicionamiento absoluto para moverlo libremente */
    position: absolute;
    top: 15px; /* Mueve la "X" más arriba */
    right: 55px; /* Mueve la "X" más a la derecha */
}

/* Efecto hover */
.close-asignar:hover,
.close-asignar:focus {
    color: #ff4500; /* Resaltar el botón de cierre al pasar el ratón */
    text-decoration: none;
    cursor: pointer;
}


/* Contenedor de datos del modal */
.contenido-asignar {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-top: 15px; /* Espacio para separar del encabezado */
}

/* Asegurar una sola columna */
.columnas-container-asignar {
    display: flex;
    flex-direction: column; /* Forzar disposición vertical */
    gap: 20px; /* Espacio entre los elementos */
    width: 100%; /* Asegurar que ocupe todo el ancho disponible */
}

/* Columna de formulario */
.columna-asignar {
    flex: 1;
    min-width: 45%; /* Asegurar que las columnas mantengan un tamaño razonable */
    background-color: #2a2a2a; /* Fondo oscuro para destacar cada columna */
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #333;
}

/* Título del formulario */
.modal-content3 h2 {
    text-align: center;
    margin-bottom: 15px;
    color: #00bfff; /* Azul claro para el título */
}

/* Formulario de actividad */
.form-asignar-actividad {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espacio entre cada campo del formulario */
}

/* Estilo de cada grupo de formulario */
.form-group-asignar {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Espacio entre el label y el input */
}

/* Campos de texto del formulario */
.form-group-asignar label {
    font-weight: bold;
    color: #f4f4f4; /* Color claro para los textos */
}

.form-group-asignar input[type="text"],
.form-group-asignar input[type="date"],
.form-group-asignar textarea {
    padding: 10px;
    background-color: #333;
    border: 1px solid #555;
    color: #f4f4f4;
    border-radius: 5px;
}

.form-group-asignar input[type="text"]:focus,
.form-group-asignar input[type="date"]:focus,
.form-group-asignar textarea:focus {
    border-color: #00bfff; /* Resaltar campo activo con azul claro */
    outline: none;
}

/* Botón de confirmación */
.boton-container-asignar {
    text-align: center;
}

.btn-asignar {
    padding: 10px 20px;
    background-color: #00bfff; /* Azul claro */
    color: #1e1e1e; /* Texto oscuro para contraste */
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-asignar:hover {
    background-color: #ff4500; /* Cambiar a naranja al pasar el ratón */
    color: #f4f4f4; /* Cambiar el texto a claro para mejor visibilidad */
}

/* Estilo de barra de desplazamiento personalizado para el modal */
.modal-content3::-webkit-scrollbar {
    width: 10px;
}

.modal-content3::-webkit-scrollbar-thumb {
    background-color: #00bfff; /* Color de la barra de desplazamiento */
    border-radius: 5px;
    border: 2px solid #1e1e1e; /* Dejar espacio con el fondo oscuro */
}

.modal-content3::-webkit-scrollbar-thumb:hover {
    background-color: #ff4500; /* Cambiar el color al pasar el ratón */
}
.boton-guardar-cambios {
    position: absolute;
    bottom: 40px; /* Mueve el botón más arriba */
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 7px; /* Mantiene el tamaño compacto */
    background-color: #00bfff;
    color: #1e1e1e;
    border: none;
    font-size: 12px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}



.boton-guardar-cambios:hover {
    background-color: #ff4500; /* Cambiar a naranja al pasar el ratón */
    color: #f4f4f4; /* Cambiar el texto a claro para mejor visibilidad */
}

.dynamic-service-item {
    word-wrap: break-word;  /* Permite que las palabras largas se dividan en varias líneas */
    overflow-wrap: break-word;  /* Compatibilidad adicional para dividir palabras */
    white-space: normal;  /* Asegura que el texto haga saltos de línea automáticamente */
    max-width: 100%;  /* Asegura que el contenido no exceda el ancho del contenedor */
    overflow: hidden;  /* Evita que el contenido desbordado se muestre fuera del contenedor */
    box-sizing: border-box;  /* Asegura que padding y border se incluyan en el tamaño del contenedor */
    padding: 10px;  /* Espaciado interno */
    margin-bottom: 15px;  /* Espacio entre los contenedores */
    border: 1px solid #ccc;  /* Opcional: Borde para definir mejor el contenedor */
    border-radius: 8px;  /* Opcional: Bordes redondeados */

}
/* Contenedor del botón */
.add-account-button-container {
    display: flex;

    justify-content: center; /* Centra el botón horizontalmente */
    margin-top: 20px; /* Espacio superior */
}

/* Contenedor del botón */
.add-account-button-container-left {
    display: flex;
    justify-content: flex-start; /* Alinear el botón a la izquierda */
    margin-top: -15px; /* Espacio superior */
    margin-left: 15px; /* Espacio desde el borde izquierdo */
margin-bottom: 10px; /* Disminuye el margen inferior para reducir el espacio hacia abajo */
}

/* Estilo del botón "Agregar cuentas bancarias" */
.add-account-button {
    background-color: #f57c00; /* Naranja principal */
    color: #ffffff; /* Color del texto blanco */
    font-size: 11px; /* Tamaño de la fuente reducido */
    padding: 6px 14px; /* Espaciado interno reducido */
    border: none; /* Sin borde */
    border-radius: 8px; /* Borde redondeado */
    cursor: pointer; /* Cambia el cursor a una mano cuando se pasa el ratón */
    font-weight: bold; /* Texto en negrita */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transición suave para el hover */
    display: block; /* Hace que el botón sea un bloque para centrarlo */
    margin: 10px auto; /* Centra el botón horizontalmente */
    text-align: center; /* Asegura que el texto esté centrado */
    width: auto; /* Ajusta el ancho automáticamente al contenido */
}


/* Estilo al pasar el cursor */
.add-account-button:hover {
    background-color: #d35400; /* Naranja más oscuro al pasar el cursor */
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el cursor */
}

/* Estilo al hacer clic */
.add-account-button:active {
    background-color: #bf360c; /* Naranja aún más oscuro cuando se presiona el botón */
    transform: scale(0.98); /* Disminuye ligeramente el tamaño cuando se presiona */
}

/* Estilo adicional para hacer consistente el diseño */
.add-account-button:focus {
    outline: none; /* Eliminar el borde de enfoque predeterminado */
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2); /* Añadir una sombra para indicar el enfoque */
}
/* Estilo del fondo del modal */
.cuentas-bancarias-modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1000; /* Aparece encima de otros elementos */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fondo negro translúcido */
}

/* Contenido del modal */
.cuentas-bancarias-modal-content {
    position: relative;
    background-color: #1e1e1e; /* Fondo negro */
    margin: 5% auto;
    padding: 20px;
    border-radius: 8px;
    width: 60%;
    max-width: 600px; /* Ancho máximo del modal */
    color: #f4f4f4; /* Texto claro */
}

/* Encabezado del modal */
.cuentas-bancarias-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
 font-size: 11px;
    border-bottom: 1px solid #444; /* Línea divisoria */
}
/* Reducir tamaño del título */
.cuentas-bancarias-modal-header h2 {
    font-size: 12px; /* Ajusta el tamaño del título */
}
/* Botón para guardar cuentas */
.guardar-cuentas-button {
    background-color: #f57c00; /* Color naranja */
    color: #ffffff; /* Color del texto */
    font-size: 11px;
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
 margin-right: 30px; /* Mueve el botón hacia la izquierda */
    transition: background-color 0.3s ease;
}

.guardar-cuentas-button:hover {
    background-color: #d35400; /* Naranja más oscuro al pasar el cursor */
}

/* Cerrar el modal */
.cuentas-bancarias-close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #f4f4f4;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}
/* Reducir tamaño del select de "Tipo de Cuenta" */
#edit-tipo-cuenta1 {
    font-size: 11px; /* Ajusta el tamaño de las opciones */
    padding: 5px; /* Ajusta el padding para reducir el tamaño del cuadro */
}
.cuentas-bancarias-close-modal:hover {
    color: #d35400; /* Naranja más oscuro al pasar el cursor */
}
/* Estilo general del selector */
select {
    width: 102%; /* Ocupa todo el ancho del contenedor */
    padding: 12px 16px;
    margin: 10px 0;
    border: 1px solid #444;
    border-radius: 8px;
    background-color: #2a2a2a; /* Fondo gris oscuro */
    color: #f4f4f4; /* Texto claro */
    font-size: 16px;
    font-family: 'Arial', sans-serif;
    transition: all 0.3s ease;
    appearance: none; /* Eliminar estilo por defecto del navegador */
    cursor: pointer;
}

/* Icono de flecha personalizada para el selector */
select::-ms-expand {
    display: none; /* Eliminar icono por defecto en IE */
}

select::after {
    content: '\25BC'; /* Flecha hacia abajo */
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Hover y enfoque del selector */
select:hover {
    border-color: #00bfff; /* Borde azul claro al pasar el mouse */
    box-shadow: 0 0 5px rgba(0, 191, 255, 0.5);
}

select:focus {
    outline: none; /* Eliminar borde de enfoque predeterminado */
    border-color: #00bfff;
    box-shadow: 0 0 8px rgba(0, 191, 255, 0.8);
}

/* Estilo para las opciones del selector */
option {
    background-color: #1e1e1e; /* Fondo más oscuro para las opciones */
    color: #f4f4f4; /* Texto claro */
}
.cuenta-bancaria {
 
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    color: #fff;
    position: relative;
margin-left: 51px; /* Ajusta el valor según sea necesario */
}

.cuenta-bancaria h4 {
    margin: 0;
    font-weight: bold;
    color: #00bfff;
}

.cuenta-bancaria p {
    margin: 5px 0;
}

.cuenta-bancaria .btn-eliminar {
    background-color: #ff4c4c;
    border: none;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 12px;
}

.cuenta-bancaria .btn-eliminar:hover {
    background-color: #e60000;
}
/* Estilo para el contenedor task-left-inter */
.task-left-inter {
    width: 80%; /* Ocupa el 80% del ancho del contenedor padre */
    height: 10%; /* Ocupa el 80% de la altura del contenedor padre */
    margin: 0 auto; /* Centra horizontalmente el contenedor */
    padding: 20px; /* Espaciado interno */
    background-color: #2e2e2e; /* Color de fondo gris oscuro */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Sombra para darle relieve */
    overflow: hidden; /* Evita que el contenido se desborde */
}

/* Ajuste del texto dentro del contenedor */
.task-left-inter p {
    font-size: 9px; /* Tamaño de fuente */
    line-height: 1.6; /* Altura de línea para mejor legibilidad */
    color: #f0f0f0; /* Color de texto claro para contraste */
}

/* Botón de detalles */
.task-left-inter .details-button {
    display: inline-block;
font-size: 9px;
    margin-top: 10px; /* Espacio superior al botón */
    padding: 4px 8px; /* Espaciado interno del botón */
    background-color: #444444; /* Color gris oscuro para el botón */
    color: #f0f0f0; /* Color blanco claro para el texto del botón */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Indicador de puntero al pasar el mouse */
    transition: background-color 0.3s; /* Transición suave para el cambio de color */
}

.task-left-inter .details-button:hover {
    background-color: #666666; /* Color ligeramente más claro al pasar el mouse */
}
.ubicacion-container {
    background-color: #2a2a2a;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 0px;
font-size: 11px;
    margin-right: 10px; /* Añade espacio desde el filo derecho */
    width: 58%; /* Ajusta el ancho dejando espacio a la derecha */
 height: 150px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    color: #f4f4f4;
}
.ubicacion-container1 {
    background-color: #2a2a2a;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 0px;
    margin-right: 10px; /* Añade espacio desde el filo derecho */
    width: 84%; /* Ajusta el ancho dejando espacio a la derecha */
 height: 200px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    color: #f4f4f4;
}





.employee-card-updated {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.employee-header-updated {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.employee-photo-updated {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 3px solid #00bfff; /* Borde para destacar la foto */
    margin-right: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
    position: relative; /* Permite ajustar la posición con respecto al contenedor */
   
}

.employee-info-updated {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.employee-name-updated {
    margin: 0; /* Sin márgenes adicionales */
    font-size: 12px !important; /* Reduce el tamaño del texto y fuerza el cambio */
    font-weight: bold; /* Mantiene el texto en negrita */
    color: #00bfff; /* Color del texto */
    max-width: 200px; /* Ancho máximo del texto */
    white-space: normal; /* Permite saltos de línea */
    word-wrap: break-word; /* Ajusta palabras largas automáticamente */
    word-break: break-word; /* Divide palabras largas si es necesario */
    overflow-wrap: break-word; /* Asegura soporte adicional para palabras largas */
    line-height: 1.2; /* Espaciado entre líneas para mayor legibilidad */
}


.verified-section-updated {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.verified-icon-updated {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.verified-text-updated {
    color: #28a745; /* Verde para indicar que está verificado */
    font-weight: bold;
}

.employee-details-updated p {
    margin: 5px 0; /* Reduce el margen superior e inferior para acercar el texto hacia arriba */
    font-size: 10px; /* Mantiene el tamaño de la letra */
    line-height: 1.5; /* Mantiene el espaciado entre líneas */
}


.view-profile-button-updated {
    background: #00bfff;
    color: #fff;
    border: none;
    padding: 5px 10px; /* Reduce el relleno para un botón más compacto */
    border-radius: 10px; /* Reduce el radio para bordes menos redondeados */
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    font-size: 8px; /* Reduce el tamaño de la letra */
    font-weight: bold;

    position: absolute; /* Posicionar absolutamente en su contenedor padre */
    top: 5px;          /* Mantiene el espacio desde la parte superior */
    right: 10px;        /* Mantiene el espacio desde la parte derecha */
}

.view-profile-button-updated:hover {
    background: #0086b3;
    z-index: 10;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}



.rating-stars-updated {
    color: #ffc107; /* Amarillo para las estrellas */
    font-size: 8px;
}

/* Ficha del empleado (contenedor central) */
.employee-card {
    background-color: #2a2a2a;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 7px; /* Espacio reducido entre contenedores */
    top: 54px; /* Mantiene la posición del primer contenedor */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    color: #f4f4f4;
    display: flex;
    flex-direction: column;
    width: 87%;
    height: auto; /* Altura dinámica */
    max-height: 140px; /* Define un límite de altura */
    overflow-y: hidden; /* Permite scroll si el contenido excede la altura */
    position: relative; /* Necesario para que el botón use este contenedor como referencia */
}

.employee-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.7);
}

/* Imagen del perfil y nombre del empleado */
.employee-card-image {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.employee-card-image img {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin-right: 15px;
    border: 3px solid #00bfff; /* Borde celeste para resaltar */
}

.employee-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
}



.employee-card-header h3 {
    font-size: 10px; /* Tamaño del texto */
    margin: 0; /* Sin márgenes adicionales */
    color: #00bfff; /* Título con color celeste */
    max-width: 250px; /* Ancho máximo del texto */
    white-space: normal; /* Permite saltos de línea */
    word-wrap: break-word; /* Ajusta palabras largas automáticamente */
    word-break: break-word; /* Rompe palabras largas si es necesario */
    overflow-wrap: break-word; /* Soporte adicional para palabras largas */
    line-height: 1.2; /* Espaciado entre líneas para mayor legibilidad */
}


.employee-rating {
    font-size: 5px;
    color: #ffd700; /* Color dorado para la calificación */
}

.verificado-badge {
    color: #00ff00; /* Cambia la palabra "Verificado" a color verde */
    font-size: 8px; /* Ajustar el tamaño de la fuente */
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 5px; /* Espacio entre el icono y la palabra */
}

.verificado-badge img {
    width: 14px;
    height: 14px;
}

/* Sección de servicios */
.employee-card-services {
    margin-top: 10px;
    background-color: #333333;
    border-radius: 8px;
    padding: 15px;
}
.calificacion-texto {
    font-size: 8px; /* Ajusta el tamaño de la letra */
    font-weight: bold; /* Opcional: Negrita para resaltar */
    color: #f4f4f4; /* Mantiene el color acorde al diseño */
}

/* Sección de tareas y ubicación */
.employee-card-details {
    margin-top: 10px;
    font-size: 7px;
    color: #f4f4f4;
    display: flex;
    justify-content: space-between;
}

.employee-card-details1 {
    display: flex;
    justify-content: flex-end; /* Alinear país y ciudad al extremo derecho */
    gap: 20px;
    margin-top: 0px; /* Reducir o eliminar el margen superior para mover hacia arriba */
    font-size:7px;
    align-self: flex-end; /* Alinear el contenedor al final del contenedor padre */
    position: relative; /* Cambiar a relativo para ajustar la posición */
    top: -25px; /* Ajustar el valor para mover hacia arriba */
}

.employee-card-details p {
    margin-bottom: 10px; /* Añade espacio debajo de cada párrafo */
}

#employee-tasks-completed {
    margin-bottom: 15px; /* Añadir un margen inferior para separar de la ubicación */
}

.employee-card-footer {
    background-color: #333333;
    border-radius: 8px;
   padding: 0 5px; /* Elimina el padding superior */
    margin-top: -5px;
    width: 98%;
    height: 72px; /* Altura calibrable para pruebas */
verflow-y: auto; /* Habilita la barra deslizadora vertical */
    overflow-x: hidden; /* Oculta la barra horizontal si existe */
 align-items: flex-start; /* Alinea el contenido cerca del borde superior */
}

.employee-card-footer p strong {
    font-size: 8px; /* Reduce el tamaño de la letra */
    font-weight: normal; /* Opcional: ajusta el grosor de la letra si es necesario */
    color: #f4f4f4; /* Mantiene el color acorde al diseño */
}
.employee-card-footer::-webkit-scrollbar {
    width: 5px; /* Ancho de la barra */
}

.employee-card-footer::-webkit-scrollbar-track {
    background: #444; /* Fondo de la barra */
    border-radius: 8px; /* Bordes redondeados */
}

.employee-card-footer::-webkit-scrollbar-thumb {
    background: #888; /* Color del control deslizante */
    border-radius: 8px; /* Bordes redondeados */
}

.employee-card-footer::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color al pasar el cursor */
}


.employee-card-services h4 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #f4f4f4;
}

.employee-card-services ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.employee-card-services li {
    margin-bottom: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.employee-card-services li::before {
    content: '✔';
    margin-right: 10px;
    color: #00bfff; /* Icono para resaltar cada servicio */
}

/* Sección de calificación y likes */
.employee-card-rating {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.employee-card-rating span {
    font-size: 16px; /* Reducir el tamaño de la fuente para las estrellas */
    color: #ffd700; /* Mantener el color dorado */
}

.employee-card-likes {
    display: flex;
    align-items: center;
    gap: 5px;
}

.employee-card-likes span {
    font-size: 13px;
}

/* Botón para ver perfil completo */
.view-profile-button {
    text-decoration: none;
    background-color: #00bfff;
    color: #fff;
    padding: 3px 8px; /* Reduce el relleno interno del botón */
    border-radius: 15px; /* Ajusta los bordes redondeados para que sean más pequeños */
    font-size: 9px; /* Reduce el tamaño de la fuente */
    font-weight: bold;
    transition: background-color 0.3s ease;
    position: absolute; /* Mantiene la posición en la parte superior derecha */
    top: 5px; /* Ajusta la posición vertical para acercarlo más al borde superior */
    right: 5px; /* Ajusta la posición horizontal para acercarlo más al borde derecho */
}


.view-profile-button:hover {
    background-color: #007acc; /* Color más oscuro al pasar el cursor */
}


/* Estilo general para el contenedor principal */
.flex-container-inicio {
    width: 100%;
    padding: 10px 0; /* Mantén el padding superior para el espacio interno */
    box-sizing: border-box;
    overflow-y: auto; /* Barra de desplazamiento vertical */
    height: calc(100vh - 100px); /* Ajustar la altura máxima */
    min-height: calc(100vh - 40px); /* Define una altura mínima más grande */
    margin-top: -35px; /* Mantén el ajuste hacia arriba si es necesario */
 overflow-x: hidden; /* Barra de desplazamiento horizontal */

}

/* Estilo de las secciones dentro del contenedor */
.inicio-section-info {
    width: calc(100% - 5px); /* Mantén el ancho amplio */
    margin: 10px 15px 10px 0px; /* Top, Right, Bottom, Left: Elimina el margen izquierdo */
    padding: 20px;
    background-color: #2a2a2a; /* Fondo oscuro */
    color: #f4f4f4; /* Texto claro */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    text-align: justify;
    box-sizing: border-box;

    overflow-x: hidden; /* Oculta barras horizontales */
    overflow-y: hidden; /* Oculta barras verticales */
}

.fondo-hero {
    background-image: url('../images/fondo1.jpg');
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    min-height: 450px;
    width: 98%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px;
    position: relative;
}

.hero-text {
    color: #f4f4f4;
    max-width: 100%;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
}

.hero-text h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 22px !important;
    font-weight: 700;
    margin-bottom: 10px;
    color: #FF6F00;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}

.hero-text h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}

.hero-text p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
    padding: 0 5px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.btn-cta {
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
    width: 85%; /* Ocupa casi todo el ancho */
    text-align: center;
}

.btn-cta.naranja {
    background-color: #FF4500;
    color: white;
}

.btn-cta.naranja:hover {
    background-color: #e03e00;
}

.btn-cta.oscuro {
    background-color: rgba(0,0,0,0.6);
    color: #ffffff;
    border: 1px solid #f4f4f4;
}

.btn-cta.oscuro:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Estilo de las secciones dentro del contenedor seccion3*/
.how-it-works {
    text-align: center;
}

.how-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.step {
    width: 90%;              /* Más ancho en móvil */
    height: 290px;           /* Altura proporcional */
    padding: 15px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

.step::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 0;
}

.step:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.6);
}


.step * {
    position: relative;
    z-index: 1;
}

.step-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.step h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #FF6F00;
}

.step p {
    font-size: 15px;
    line-height: 1.4;
    color: #f4f4f4;
    margin: 0;
}

.step.publicar {
    background-image: url('../images/publicar.jpg');
}

.step.elegir {
    background-image: url('../images/elegir.jpg');
}

.step.pagar {
    background-image: url('../images/pagar.jpg');
}

/* Estilo de las secciones dentro del contenedor seccion4*/
.beneficios-doo {
    text-align: center;
}

.benefits-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.benefit-card {
    background: linear-gradient(to bottom right, #2a2a2a, #1e1e1e);
    padding: 18px;
    width: 90%;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.7);
}

.benefit-icon {
    font-size: 32px;
    margin-bottom: 12px;
    color: #FF6F00;
}

.benefit-card h3 {
    font-size: 16px;
    color: #FF6F00;
    margin-bottom: 8px;
}

.benefit-card p {
    font-size: 14px;
    color: #f4f4f4;
    line-height: 1.4;
}

/* Estilos para la barra de desplazamiento en navegadores Webkit (Chrome, Safari) */
.flex-container-inicio::-webkit-scrollbar {
   width: 5px; /* Ancho de la barra de desplazamiento */
}

.flex-container-inicio::-webkit-scrollbar-thumb {
  background-color: #00bfff; /* Color del scrollbar */
    border-radius: 5px;
}

.flex-container-inicio::-webkit-scrollbar-track {
  background-color: #2a2a2a; /* Color del track */
}

/* Testimonios: Comentarios en bloque */
.inicio-testimonial blockquote {
    font-size: 10px; /* Reduce el tamaño del texto */
    line-height: 1.4; /* Ajusta el espaciado entre líneas para mayor legibilidad */
    margin: 10px 0; /* Espaciado vertical entre testimonios */
    color: #666; /* Color más tenue para un diseño más discreto */
    font-style: italic; /* Mantén el estilo en cursiva para destacar los comentarios */
}

/* Título de cada sección */
.inicio-section-info h2 {
    color: #FF4500; /* Título en color naranja */
    margin-bottom: 10px;
    font-size: 10px; /* Reduce el tamaño del texto del título */
}

/* Párrafos y listas dentro de cada sección */
.inicio-section-info p, .inicio-section-info ol, .inicio-section-info ul {
    line-height: 1.6;
    margin-bottom: 10px;
    font-size: 8px; /* Reduce el tamaño del texto para párrafos y listas */
}


.inicio-section-info ol, .inicio-section-info ul {
    padding-left: 20px; /* Aumentar el sangrado de las listas */
}
/* Estilo de la sección de video */
.inicio-video-placeholder {
    margin-top: 10px;
    text-align: center;
}

.inicio-video-placeholder video {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Estilo de la galería de fotos */
.inicio-gallery {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}

.inicio-gallery-photo {
    max-width: 30%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.inicio-gallery-photo:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
}

.footer-separator {
    width: 97%; /* Mismo ancho que los contenedores */
    border: none;
    border-top: 1px solid #f4f4f4; /* Color de la línea acorde al diseño de la página */
    margin: 20px auto; /* Centrado y espacio entre el contenido y el pie de página */
    box-sizing: border-box;
}

.footer-contact {
    text-align: center;
    padding: 10px 0;
    color: #f4f4f4; /* Texto claro */
    width: 90%; /* Mismo ancho que los contenedores */
    margin: 0 auto; /* Centrado horizontalmente */
    font-size: 12px;  /* Tamaño de fuente acorde a los demás elementos */
}
/* Estilos para el modal de actividad por caducar */
.modal-caducada {
    display: none; /* Oculto por defecto */
    position: fixed; 
    z-index: 1001; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgba(0, 0, 0, 0.7); /* Fondo más oscuro con mayor transparencia */
}

.modal-caducada-content {
    background-color: #333333; /* Fondo gris oscuro para un diseño consistente */
    color: #f4f4f4; /* Texto claro para mejor visibilidad */
    position: absolute; /* Cambia a posición absoluta para mayor control */
    top: 5%; /* Mantiene la distancia desde la parte superior */
    left: 0%;/* Mueve el modal hacia el extremo izquierdo */
    padding: 10px; /* Reduce el espaciado interno */
    border: none; /* Eliminé el borde para un look más moderno */
    width: 90%;
    max-width: 700px; /* Limité el ancho máximo */
    height: auto; /* Altura dinámica según el contenido */
    max-height: 300px; /* Limita la altura superior del modal */
    border-radius: 10px; /* Bordes redondeados para suavizar el diseño */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Añadí sombra para dar efecto de profundidad */
    overflow-y: auto; /* Agrega scroll vertical si el contenido excede la altura */
}



.close-detalles-caducada {
    color: #f4f4f4; /* Aseguramos que sea visible contra el fondo oscuro */
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-detalles-caducada:hover,
.close-detalles-caducada:focus {
    color: #00bfff; /* Cambié el color al pasar el mouse para resaltar */
    text-decoration: none;
}

/* CSS para el modal */
.modal-verificacion-actividad {
  display: none; /* Inicialmente oculto */
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente */
}

.modal-contenido-verificacion-actividad {
  background-color: #3a3a3a; /* Cambiado a un gris claro */
  margin: 10% auto 5% 2%; /* Reduce el valor de margin-left para mover más a la izquierda */
  padding: 20px;
  border: 1px solid #888;
  width: 78%; /* Ajuste del ancho del modal */
  max-width: 600px;
  height: auto; /* Alto del modal */
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}


.centrado {
  transform: translateX(-15%); /* Centrar el contenido */
}

.cerrar-modal-verificacion-actividad {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.cerrar-modal-verificacion-actividad:hover,
.cerrar-modal-verificacion-actividad:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


.boton-guardar-verificacion-actividad {
  background-color: #4CAF50; /* Color de fondo */
  color: white; /* Color del texto */
  padding: 5px 10px; /* Espaciado interno */
  border: none; /* Sin borde */
  border-radius: 4px; /* Bordes redondeados */
  cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
  font-size: 10px; 
  transition: background-color 0.3s ease; /* Efecto de transición */
}
.boton-guardar-verificacion-actividad:hover {
  background-color: #45a049; /* Color al pasar el cursor */
}
.modal-contenido-verificacion-actividad label {
  font-size: 10px; /* Tamaño más pequeño para las etiquetas */
}

.modal-contenido-verificacion-actividad input {
  font-size: 10px;/* Ajusta el tamaño de la fuente en los campos de entrada */
}
.boton-guardar-verificacion-actividad:hover {
  background-color: #45a049;
}

.modal-contenido-verificacion-actividad h2 {
  font-size: 12px; /* Tamaño más pequeño para el título */
  margin-bottom: 15px; /* Separación inferior */
}

.ficha-actividad {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
    gap: 5px; /* Espaciado entre columnas */
    background-color: #2a2a2a; /* Fondo oscuro para las fichas */
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    height: auto;
    position: relative;
    min-height: 100px; /* Ajusta el alto mínimo según sea necesario */
    
    margin-bottom: 10px; /* Espacio entre fichas */
}


.ficha-actividad:hover {
    background-color: #333333; /* Fondo un poco más claro cuando se pasa el cursor */
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.7);
}

.profile-image-container1 {
    grid-column: 1 / 2; /* Mantén la imagen en la primera columna */
    align-self: center;
}

.profile-image1 {
    width: 40px; /* Ajusta el tamaño según sea necesario */
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.titulo-actividad {
    font-size: 0.7em;
    color: #00bfff; /* Azul celeste para el título de la actividad */
    margin-right: 20px;
    flex: 2;

}

.categoria, .subcategoria, .descripcion, .fecha-finalizacion, .empleado, .fechas {
    color: #f4f4f4; /* Color claro para el texto */
    margin-right: 20px;
    flex: 1;
    font-size: 0.5em;

}

.categoria span, .subcategoria span, .fecha-finalizacion span, .empleado span, .descripcion span,  .fechas span {
    font-weight: bold;
}

.acciones {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: 10px;
}

.btn-trabajo-terminado, .btn-aceptar-trabajo, .btn-ver-actividad, .btn-mensaje {
    padding: 3px 5px; /* Reduce el relleno interno */
    border: none;
    border-radius: 5px; /* Ajusta el redondeo */
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
    font-size: 0.25em; /* Reduce el tamaño de la fuente */
    white-space: nowrap; /* Evita que el texto se divida en dos líneas */
    width: 65%; /* Ajusta automáticamente al contenido */
    height: 10%; /* Ajusta automáticamente al contenido */
}


.btn-trabajo-terminado {
    background-color: #00bfff; /* Azul para marcar trabajo como terminado */
    color: #1e1e1e;
}

.btn-trabajo-terminado:hover {
    background-color: #009acd; /* Azul más oscuro al pasar el cursor */
}

.btn-aceptar-trabajo, .btn-ver-actividad, .btn-mensaje {
    background-color: #32cd32; /* Verde para mantener la consistencia con aceptar trabajo */
    color: #1e1e1e;
}

.btn-aceptar-trabajo:hover, .btn-ver-actividad:hover, .btn-mensaje:hover {
    background-color: #228b22; /* Verde más oscuro al pasar el cursor */
}

.btn-ver-perfil {
    background-color: #00bfff; /* Azul para el botón Ver Perfil */
    color: #1e1e1e;
    padding: 5px 10px; /* Ajusta el relleno interno */
    font-size: 0.7em; /* Tamaño reducido del texto */
    white-space: nowrap; /* Evitar que el texto se divida en dos líneas */
    border-radius: 5px; /* Bordes redondeados */
    position: absolute; /* Posiciona el botón dentro del contenedor */
    top: 10px; /* Separación desde la parte superior */
    right: 10px; /* Separación desde la parte derecha */
    cursor: pointer;
}

.btn-ver-perfil:hover {
    background-color: #009acd; /* Azul más oscuro al pasar el cursor */
}



.ficha-actividad h3,
.ficha-actividad p {
    margin: 5px 0;
    overflow-wrap: break-word; /* Divide palabras largas si es necesario */
    white-space: normal; /* Permite saltos de línea */
}
.ficha-actividad .acciones {
    align-self: flex-start;
}

/* Alinear todo el contenido a la misma altura */
.ficha-actividad > * {
    align-self: center;
}

.ficha-actividad .titulo-actividad, .ficha-actividad p {
    margin: 0 10px;
}



.ficha-actividad .btn-ver-perfil {
    margin-left: 20px;
}


/* Estilo para el ícono de visto */
.icono-visto {
    font-size: 1.2em; /* Tamaño grande para que sea visible */
    color: #32cd32; /* Verde brillante para resaltar el visto */
    margin-left: 10px;
    margin-right: 10px; /* Espacio entre la imagen y el título */
    align-self: center; /* Alinear verticalmente con los demás elementos */
}
.central-container {
    width: 95%;
    margin: 10px 0;
    padding: 20px;
    background-color: #2a2a2a; /* Fondo similar a los contenedores de la izquierda */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Sombra similar */
    border-radius: 8px; /* Bordes redondeados */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.verificado-text, .verificado-text-updated {
    color: green; /* Verde para verificado */
font-size: 10px;
    font-weight: bold;
}

.no-verificado-text, .no-verificado-text-updated {
    color: red; /* Rojo para no verificado */
font-size: 10px;
    font-weight: bold;
}

/* Estilos para el modal del perfil completo del empleado */
.modal-perfil-empleado {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1000; /* Alta prioridad para superponer otros elementos */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Permite el desplazamiento si el contenido es mayor que la pantalla */
    background-color: rgba(0, 0, 0, 0.8); /* Fondo semi-transparente oscuro */
}

.modal-contenido-empleado {
    background-color: #333; /* Fondo oscuro para mejorar el contraste */
    margin: 5% 0 5% 1%;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #444;
    width: 80%; /* Ancho del modal */
    max-width: 800px; /* Ancho máximo del modal */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Sombra para dar profundidad */
    color: #fff; /* Texto blanco para mayor visibilidad */
}


/* Botón de Cerrar */
.cerrar-modal-empleado {
    color: #aaa;
    float: right;
top: 20px; /* Mueve más hacia arriba */
    right: 25px; /* Mueve más hacia la derecha */
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

.cerrar-modal-empleado:hover,
.cerrar-modal-empleado:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
/* Encabezado del Modal */
.modal-encabezado-empleado {
    display: flex;
    align-items: flex-start; /* Alinea los elementos al inicio para que estén lo más arriba posible */
    position: relative; /* Asegúrate de que la posición esté alineada dentro del contenedor del modal */
    top: 20px; /* Ajusta este valor negativo para moverlo hacia el extremo superior */
}

.empleado-imagen-perfil {
    height:  70px;
    width: 70px;
    border-radius: 50%;
    margin-right: 20px;
    border: 2px solid #ccc;
    object-fit: cover;
}

.empleado-encabezado-info {
    flex: 1;
}

.empleado-encabezado-info h2 {
    font-size: 12px;
    margin: 5px 0; /* Espaciado superior e inferior */
    font-weight: bold;
}
.empleado-calificacion {
    display: flex;
    align-items: center;
    font-size: 1rem;
    margin-top: 10px;
    margin-left: 10px; /* Ajusta este valor según la cantidad de espacio que deseas mover a la derecha */
}

.calificacion-texto {
    margin-right: 10px;
}

.calificacion-estrellas {
    color: #f39c12; /* Color dorado para las estrellas */
    font-size: 10px; /* Ajusta el tamaño de las estrellas */
}


.empleado-likes {
    font-size: 10px;/* Reduce el tamaño del texto de likes */
    color: #ccc; /* Color claro para resaltar sobre el fondo oscuro */
    margin-top: 5px;
     margin-left: 10px;
}
/* Información Personal del Empleado */
.modal-seccion-empleado {
    margin-bottom: 20px;
     margin-top: 5px;
}

/* Títulos generales alineados a la izquierda */
.modal-seccion-empleado h3 {
    text-align: left; /* Alinear todos los títulos a la izquierda por defecto */
    margin-bottom: 15px;
    color: #f4f4f4; /* Color claro para mantener el contraste */
}
/* Alinear específicamente "Información Personal" al centro */
.informacion-personal-empleado h3 {
 font-size: 12px; /* Reduce el tamaño general del texto */
    text-align: center; /* Mantener el título "Información Personal" centrado */
    margin-top: 0; /* Ajuste del margen superior para alineación adecuada */
}
/* Contenedor con color de fondo */
.info-personal-contenedor {
    background-color: #2a2a2a; /* Fondo gris oscuro para hacer contraste */
    border: 1px solid #444; /* Borde más oscuro para un mayor contraste */
    border-radius: 8px; /* Bordes redondeados */
    padding: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para darle un toque profesional */
}

/* Estructura en dos columnas */
.info-personal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas de igual ancho */
    gap: 15px; /* Espacio entre los elementos */
}

/* Estilo de los elementos de información personal */
.informacion-personal-empleado p {
    margin: 5px 0;
     font-size: 10px; Ajusta el tamaño del texto dentro del grid */
    text-align: left;
    color: #f4f4f4; /* Texto claro para que resalte en el fondo oscuro */
}

.servicio-empleado p strong {
    font-size: 10px;
    color: #ffffff; /* Color blanco para el texto en negrita */
}
.servicio-empleado p {
    font-size: 10px;
    line-height: 1.4; /* Ajusta la altura de línea para mantener legibilidad */
    color: #f4f4f4; /* Color del texto acorde con el diseño */
    margin-bottom: 5px; /* Reduce la separación entre párrafos */
}

/* Estadísticas del Usuario */
.estadisticas-empleado p {
    margin: 5px 0;
    font-size: 0.95rem;
}
.modal-seccion-empleado.servicios-ofrecidos-empleado h3 {
    font-size: 12px;/* Reduce el tamaño del título */
    font-weight: bold; /* Mantén el título en negrita */
    margin-bottom: 10px; /* Ajusta el espaciado inferior */
    text-align: left; /* Alinea el título a la izquierda */
}
.servicios-ofrecidos-empleado .servicio-empleado {
    background-color: #444; /* Fondo oscuro para mejor contraste */
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #555;
    margin-bottom: 10px;
    position: relative; /* Necesario para el posicionamiento absoluto del botón */
}

.boton-ver-contenido {
 font-size: 10px;

    position: absolute; /* Permite que el botón se coloque dentro del contenedor de forma absoluta */
    top: 1px;/* Ajusta según qué tan cerca quieras el botón del borde superior */
    right: 2px; /* Ajusta según qué tan cerca quieras el botón del borde derecho */
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.boton-ver-contenido:hover {
    background-color: #0056b3;
}


/* Actividades Finalizadas */
.actividades-finalizadas-empleado .actividad-finalizada {
    background-color: #444; /* Fondo oscuro para mejor contraste */
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #555;
    margin-bottom: 10px;

}

.modal-seccion-empleado.actividades-finalizadas-empleado h3 {
    font-size: 12px;/* Reduce el tamaño del título */
    font-weight: bold; /* Mantiene el título en negrita */
    margin-bottom: 10px; /* Ajusta el espaciado inferior */
    text-align: left; /* Alinea el título a la izquierda */
}
#actividades-finalizadas-contenedor p {
    font-size: 10px;/* Reduce el tamaño del texto en los párrafos */
    margin-bottom: 5px; /* Reduce la separación entre los elementos */
}

#actividades-finalizadas-contenedor strong {
    font-size: 10px;/* Ajusta el tamaño del texto en negrita */
}

/* Sección de Comentarios */
.comentarios-empleado .comentario {
    background-color: #555; /* Fondo oscuro */
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #666;
    margin-bottom: 10px;
}
/* Reduce el tamaño del título "Comentarios" */
.comentarios-empleado h3 {
    font-size: 12px; /* Reduce el tamaño del título */
    font-weight: bold;
    margin-bottom: 8px; /* Ajusta el espacio inferior */
}
/* Reduce el tamaño del texto dentro de los comentarios */
.comentarios-empleado .comentario {
    background-color: #555; /* Fondo oscuro */
    padding: 8px; /* Reduce el padding */
    border-radius: 8px;
    border: 1px solid #666;
    margin-bottom: 8px; /* Reduce el espacio entre comentarios */
    font-size: 10px; /* Reduce el tamaño del texto */
    line-height: 1.4; /* Ajusta la altura de línea */
}
#comentario-nuevo {
    width: 90%;
    padding: 12px;
    margin-top: 10px;
    border: 1px solid #777;
    border-radius: 4px;
    font-size: 0.6rem;
    background-color: #222; /* Fondo oscuro */
    color: #fff; /* Texto blanco */
}

/* Contenedor para alinear el botón a la derecha */
.boton-comentario-contenedor {
    display: flex;
    justify-content: flex-end; /* Alinea el botón hacia la derecha */
    margin-top: 10px; /* Ajusta la separación vertical */
}

/* Botón de Enviar Comentario */
.boton-enviar-comentario {
    background-color: #28a745;
    color: #fff;
    border: none;
font-size: 9px; /* Reduce el tamaño del texto del botón */
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
margin-left: 10px; /* Mueve el botón más a la izquierda */
    margin-top: -10px; /* Mueve el botón más hacia abajo */
position: relative;
    transition: background-color 0.3s ease;
}
.boton-enviar-comentario:hover {
    background-color: #218838;
}




/* Ajuste del Botón Enviar Mensaje */
.boton-enviar-mensaje {
font-size: 9px; /* Reduce el tamaño del texto del botón */
    background-color: #17a2b8; /* Color de fondo principal (azul claro) */
    color: #fff; /* Texto en blanco */
    border: none; /* Sin borde */
    padding: 4px 7px; /* Espaciado interno */
    border-radius: 4px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor a "mano" */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave */
    position: relative; /* Relativo al contenedor del botón */
    top: -10px; /* Mueve el botón 20px hacia arriba */
    right: -155px; /* Mueve el botón 50px hacia la derecha */
}

/* Hover: Cambiar color */
.boton-enviar-mensaje:hover {
    background-color: #28a745; /* Cambia el color de fondo a verde */
    color: #ffffff; /* Mantiene el texto blanco */
}


/* Contenedor de calificación y like */
.calificacion-container-unico {
    display: flex;
    align-items: center;
    margin-top: -30px;
}

/* Etiqueta de calificación */
.calificacion-label-unico {
    color: #ffffff;
    font-size: 10px;
    margin-right: 5px;
}

/* Estrellas de calificación */
.rating-stars-unico {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.rating-stars-unico .estrella-unica {
    font-size: 12px; /* Tamaño ajustado */
    color: #ffcc00; /* Color de las estrellas sin seleccionar */
    cursor: pointer;
    transition: color 0.3s ease;
    margin-right: 2px;
}

.rating-stars-unico .estrella-unica.seleccionada,
.rating-stars-unico .estrella-unica:hover,

.rating-stars-unico .estrella-unica:hover ~ .estrella-unica {
    color: #cccccc; /* Amarillo para estrellas seleccionadas */
}

/* Botón Me gusta */
.like-button-unico {
    font-size: 10px; /* Tamaño ajustado */
    background: transparent;
    color: #ffffff; /* Blanco para el botón */
    border: none;
    cursor: pointer;
    margin-left: -135px; /* Mueve el botón más a la izquierda */
    margin-top: 40px; /* Mueve el botón más hacia abajo */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px; /* Borde redondeado */
    position: relative; /* Asegura que los márgenes afecten su posición */
}

/* Efecto al pasar el cursor */
.like-button-unico:hover {
    text-decoration: none; /* Quitar subrayado */
    background-color: #444444; /* Fondo oscuro para indicar selección */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Sombra al pasar el cursor */
}
.contenedor_mensajes {
    position: absolute;
    top: 51px; /* Mantiene el espacio desde el encabezado */
    bottom: 3px; /* Mantiene el espacio desde el pie de página */
    left: 5px; /* Ajusta el margen izquierdo */
    right: 5px; /* Reduce el margen derecho para ocupar más espacio */
    background-color: #2a2a2a; /* Color acorde al diseño de tu página */
    border-radius: 8px; /* Bordes redondeados */
    padding: 20px; /* Espaciado interno */
    overflow: hidden; /* Oculta desbordamientos */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Sombra para darle profundidad */
    display: flex; /* Activa flexbox */
    flex-direction: row; /* Organiza los hijos en una fila */
    gap: 10px; /* Espaciado entre contenedores */
}

/* Contenedor 1 */
.contenedor-1 {
    background-color: #2a2a2a;
    width: 20%; /* Ajuste de ancho del contenedor 1 */
    height: 104%; /* Ocupa todo el alto del contenedor_mensajes */
    border-radius: 0px;
    padding: 10px; /* Reduce el padding interno para acercarlo más */
    margin: 0; /* Eliminar cualquier margen */
    position: relative; /* Mantener la posición relativa */
    left: -20px; /* Desplaza hacia la izquierda para acercarse al borde */
    top: -20px; /* Desplaza hacia arriba para acercarse al encabezado */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Sombra */
    overflow-y: auto; /* Barra de desplazamiento vertical */
    overflow-x: hidden; /* Oculta barra horizontal */
    border-right: 1px solid #ffffff; /* Línea de separación blanca */
}

/* Contenedor 2 */
.contenedor-2 {
    background-color: #333333;
    width: 67%; /* Reducir el ancho */
    height: 18%; /* Ajustar altura */
    border-radius: 0px;
    padding: 15px; /* Mantener padding interno */
    margin: 0; /* Eliminar márgenes */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Sombra */
    overflow: hidden; /* No muestra barras de desplazamiento */
    display: flex; /* Alinear contenido interno si es necesario */
    align-items: center; /* Centrar contenido verticalmente */
    justify-content: center; /* Centrar contenido horizontalmente */
    position: absolute; /* Posición absoluta para fijarlo */
    top: -5px; /* Mover más hacia arriba */
    right: 0px; /* Acercar al extremo derecho */
}

/* Contenedor 3 */
.contenedor-3 {
    background-color: #2a2a2a;
    width: 67%; /* Reducir el ancho */
    height: calc(100% - 20% - 15px); /* Ajustar el espacio disponible */
    border-radius: 0px;
    padding: 15px; /* Mantener padding interno */
    margin: 0; /* Eliminar márgenes */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Sombra */
    overflow-y: hidden; /* Barra de desplazamiento vertical */
    overflow-x: hidden; /* Oculta barra horizontal */
    border-top: 1px solid #ffffff; /* Línea de separación superior */
    position: absolute; /* Posición absoluta para alinearlo correctamente */
    bottom: 0px; /* Mover más hacia arriba desde el borde inferior */
    right: 0px; /* Acercar al extremo derecho */
}



/* Personalización de la barra de desplazamiento */
.contenedor-1::-webkit-scrollbar,
.contenedor-3::-webkit-scrollbar {
    width: 5px; /* Ancho de la barra */
}

.contenedor-1::-webkit-scrollbar-thumb,
.contenedor-3::-webkit-scrollbar-thumb {
    background-color: #00bfff; /* Color del thumb */
    border-radius: 10px; /* Bordes redondeados */
}

.contenedor-1::-webkit-scrollbar-track,
.contenedor-3::-webkit-scrollbar-track {
    background-color: #2a2a2a; /* Fondo del track */
}


/* Bloque de chat */
.bloque-chat {
    display: flex;
    align-items: center; /* Alinear verticalmente */
    justify-content: flex-start; /* Imagen y texto alineados a la izquierda */
    background-color: #333333; /* Fondo más oscuro para el bloque */
    border-radius: 8px; /* Bordes redondeados */
    padding: 10px; /* Espaciado interno */
    margin-bottom: 10px; /* Espacio entre bloques */
    height: 8%; /* Ajusta el alto del bloque (aproximadamente 1/6 del contenedor) */
    width: 95%; /* Ocupa todo el ancho del contenedor */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Efecto al pasar el cursor */
    cursor: pointer; /* Indica que es interactivo */
}
/* Efecto al pasar el cursor */
.bloque-chat:hover {
    background-color: #444444; /* Fondo más claro al pasar el cursor */
    transform: scale(1.02); /* Ligeramente más grande */
}

/* Bloque perfil */
.bloque-perfil {
    display: flex;
    align-items: center; /* Alinear contenido verticalmente */
    justify-content: flex-start; /* Imagen y texto alineados a la izquierda */
    background-color: #333333; /* Fondo más oscuro para el bloque */
    border-radius: 8px; /* Bordes redondeados */
    padding: 10px; /* Espaciado interno */
    margin-bottom: 10px; /* Espacio entre bloques */
    margin-top: 0; /* Eliminar espacio adicional desde la parte superior */
    height: 27%; /* Reducir altura */
    width: 50%; /* Reducir ancho */
    position: absolute; /* Permitir moverlo dentro del contenedor principal */
    left: 1%; /* Posicionar a la izquierda del contenedor principal */
    top: 15%; /* Ajustar posición vertical */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Efecto al pasar el cursor */
    cursor: pointer; /* Indica que es interactivo */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Sombra para resaltar */
}

/* Efecto al pasar el cursor */
.bloque-perfil:hover {
    background-color: #444444; /* Fondo más claro al pasar el cursor */
    transform: scale(1.02); /* Ligeramente más grande */
}
.nombre1-chat {
    display: none;
}
/* Imagen del usuario en el bloque de chat */
.imagen-chat {
    flex: 0 0 50px; /* Tamaño fijo para la imagen */
    margin-right: 15px; /* Espacio entre la imagen y el texto */
}

.imagen-chat img {
    width: 45px; /* Ancho de la imagen */
    height:45px; /* Alto de la imagen */
    border-radius: 50%; /* Imagen circular */
    object-fit: cover; /* Asegura que la imagen se ajuste correctamente */
}

/* Imagen del usuario en el bloque de chat */
.imagen-chat1 {
    flex: 0 0 20px; /* Tamaño fijo para la imagen */
    margin-right: 15px; /* Espacio entre la imagen y el texto */
}

.imagen-chat1 img {
    width: 30px; /* Ancho de la imagen */
    height: 30px; /* Alto de la imagen */
    border-radius: 50%; /* Imagen circular */
    object-fit: cover; /* Asegura que la imagen se ajuste correctamente */
}

/* Información del chat */
.info-chat {
    flex: 1; /* Ocupa el espacio restante en el bloque */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.nombre-chat {
    font-size: 11px; /* Tamaño del texto */
    color: #ffffff; /* Texto blanco */
    margin: 0; /* Sin márgenes */
    font-weight: bold; /* Texto en negrita */
}

/* Contenedor del logo y texto */
.logo-nombre {
    display: flex; /* Habilita flexbox */
    align-items: center; /* Alinea verticalmente el logo y el texto */
    justify-content: center; /* Centra el contenido horizontalmente */
    height: 100%; /* Asegura que ocupe toda la altura disponible del contenedor */
    gap: 20px; /* Espacio más amplio entre el logo y el texto */
    transition: transform 0.3s ease; /* Transición suave para el efecto de escala */
}

/* Estilo del logo */
.logo-imagen {
    width: 90px; /* Tamaño inicial del logo */
    height: 90px; /* Tamaño inicial del logo */
    border-radius: 50%;
    object-fit: cover; /* Ajusta el logo al contenedor */
    transition: transform 0.3s ease; /* Transición suave para el efecto de escala */
}

/* Estilo del texto */
.logo-nombre-texto {
    font-size: 32px; /* Tamaño inicial del texto */
    font-weight: bold; /* Texto en negrita */
    color: #ffffff; /* Texto blanco */
    font-family: Arial, sans-serif; /* Fuente del texto */
    transition: transform 0.3s ease; /* Transición suave para el efecto de escala */
}

/* Efecto al pasar el cursor */
.logo-nombre:hover {
    transform: scale(1.2); /* Escala el contenedor completo */
}

/* Efecto individual en el logo */
.logo-nombre:hover .logo-imagen {
    transform: scale(1.2); /* Escala el logo */
}

/* Efecto individual en el texto */
.logo-nombre:hover .logo-nombre-texto {
    transform: scale(1.2); /* Escala el texto */
}


/* Contenedor del chat */
.chat-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Asegura que el área de entrada esté en la parte inferior */
    height: 100%;
    padding: 10px;
    background-color: #2a2a2a; /* Fondo oscuro para el chat */
    border-radius: 8px; /* Bordes redondeados */
}

.chat-input-container {
    display: flex;
    align-items: center; /* Alinea verticalmente todos los elementos */
    gap: 5px; /* Espaciado entre los elementos */
    padding: 10px;
    background-color: #1e1e1e; /* Fondo ligeramente más oscuro */
    border-radius: 8px; /* Bordes redondeados */
    height: 30px; /* Ajusta la altura */
    width: 100%; /* Cambia el ancho según lo que necesites */
    margin: 0 auto; /* Centra el contenedor horizontalmente */
    box-sizing: border-box; /* Incluye el padding dentro del ancho y la altura */
    position: absolute; /* Posición absoluta para un control más preciso */
    bottom: 0px; /* Ajusta el margen inferior para acercarlo a la pantalla */
    left: 0; /* Mantener alineado al borde izquierdo */
    right: 0; /* Mantener alineado al borde derecho */
}


/* Botones de iconos (adjuntar fotos, videos, archivos, enviar) */
.chat-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.chat-icon-btn:hover {
    background-color: #444; /* Fondo más claro al pasar el cursor */
}

/* Tamaño de los íconos */
.chat-icon {
    width: 16px; /* Tamaño reducido */
    height: 16px; /* Tamaño reducido */
    fill: #fff; /* Color de los íconos */
}

/* Botón de los íconos */
.chat-icon-btn {
    font-size: 9px; /* Tamaño reducido para los emojis */
    padding: 2px; /* Espaciado interno reducido */
    background: none; /* Sin fondo */
    border: none; /* Sin borde */
    cursor: pointer; /* Mano al pasar el cursor */
    transition: transform 0.2s ease, color 0.2s ease; /* Animación suave */
}

.chat-icon-btn:hover {
    transform: scale(1.1); /* Aumenta ligeramente al pasar el cursor */
}
.chat-textarea {
    flex: 0 0 50%; /* El área de texto ocupará el 70% del contenedor */
    height: 65%; /* Mantén la altura actual */
    resize: none; /* Desactiva el cambio de tamaño */
    padding: 10px;
    border: none;
    border-radius: 8px;
    background-color: #333; /* Fondo oscuro para el área de texto */
    color: #fff; /* Texto blanco */
    font-size: 10px;
    font-family: Arial, sans-serif;
}

/* Botón de enviar */
.chat-send-btn {
    font-size: 9px; /* Tamaño reducido para el emoji */
    padding: 6px; /* Espaciado interno reducido */
    background: #17a2b8; /* Fondo azul claro */
    border-radius: 6px; /* Bordes más pequeños */
    cursor: pointer; /* Mano al pasar el cursor */
    border: none; /* Sin borde */
    color: white; /* Texto blanco */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Animación suave */
}

.chat-send-btn:hover {
    background: #117a8b; /* Fondo azul más oscuro al pasar el cursor */
    transform: scale(1.05); /* Aumento ligero al pasar el cursor */
}

/* Estilo para el bloque de chat seleccionado */
.bloque-chat.selected {
    background-color:  #17a2b8;
    color: white; /* Cambia el color del texto al blanco */
    border-radius: 8px; /* Opcional: bordes redondeados */
    transition: background-color 0.3s ease; /* Transición suave al cambiar el color */
}
/* Botón "Eliminar chat" */
.btn-eliminar-chat {
    display: block; /* Asegura que esté en una nueva línea */
    margin: 5px auto; /* Centra horizontalmente dentro del contenedor */
    background-color: #ff6f61; /* Naranja oscuro */
    color: #fff;
    border: none;
    position: absolute; /* Posición absoluta para colocarlo dentro del contenedor */
    top: 5px; /* Reduce la separación desde la parte superior */
    right: 5px; /* Reduce la separación desde la parte derecha */
    padding: 3px 8px; /* Reduce el relleno interno del botón */
    border-radius: 4px; /* Mantiene bordes redondeados */
    cursor: pointer;
    font-size: 0.55rem; /* Reduce el tamaño de la fuente */
    font-weight: bold;
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Efectos al pasar el cursor */
}

.btn-eliminar-chat:hover {
    background-color: #e85c50; /* Más oscuro en hover */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}
.mensajes-container {
    width: 89%; /* Ancho del 96% del contenedor padre */
    height: 410px; /* Altura fija */
    margin: -10px 30px; /* Reducir el margen superior a 0 para acercarlo */
    background-color: #2a2a2a; /* Color de fondo oscuro */
    border-radius: 8px; /* Bordes redondeados */
    padding: 5px; /* Reducir el padding interno para acercar contenido */
    overflow-y: auto; /* Habilita la barra de desplazamiento vertical */
    overflow-x: hidden; /* Oculta la barra de desplazamiento horizontal */
    display: flex;
    flex-direction: column;

    /* Personalización de la barra de desplazamiento */
    scrollbar-width: thin; /* Ajuste para navegadores compatibles */
    scrollbar-color: #808080 #2a2a2a; /* Color de la barra y pista */
}


.mensajes-container::-webkit-scrollbar {
    width: 5px; /* Ancho de la barra de desplazamiento */
    border-radius: 10px; /* Bordes redondeados de la barra */
}

.mensajes-container::-webkit-scrollbar-thumb {
    background-color: #808080; /* Color gris de la barra */
    border-radius: 10px; /* Bordes redondeados */
}

.mensajes-container::-webkit-scrollbar-track {
    background-color: #2a2a2a; /* Color de la pista */
    border-radius: 10px; /* Bordes redondeados de la pista */
}


.mensaje {
    margin: 10px 0;
    padding: 10px;
    border-radius: 8px;
    max-width: 70%;
    font-size: 14px;
    word-wrap: break-word;
}

.mensaje.emisor {
    background-color: #17a2b8;
    margin-left: auto;
    text-align: right;
}

.mensaje.receptor {
    background-color: #444444; 
    margin-right: auto;
    text-align: left;
}

.mensaje .contenido {
    margin: 0;
    font-size: 14px;
}

.mensaje .fecha {
    font-size: 12px;
    color: #6c757d;
    display: block;
    margin-top: 5px;
    text-align: right;
}

#mensaje-error-global {
    color: red; /* Solo las letras serán rojas */
    font-weight: bold;
    font-size: 14px; /* Tamaño de letra más pequeño */
    display: none;
    position: fixed; /* Siempre visible sobre la pantalla */
    top: 20%; /* Centrado verticalmente */
    left: 50%; /* Centrado horizontalmente */
    transform: translate(-50%, -50%); /* Ajuste para centrar */
    padding: 0; /* Sin padding adicional */
    z-index: 10000; /* Por encima de otros elementos */
    text-align: center;
    max-width: 80%;
    word-wrap: break-word;
    background: none; /* Sin fondo */
    box-shadow: none; /* Sin sombras */
    border: none; /* Sin bordes */
}
.modal-visor-imagen {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro semitransparente */
}

.modal-contenido-imagen {
    margin: auto;
 margin-top: 60px; /* Ajusta el valor para bajar la imagen */
    display: block;
    max-width: 80%; /* Tamaño máximo de la imagen */
    max-height: 80%;
    border-radius: 8px; /* Bordes redondeados */
}

.cerrar-modal-visor {
    position: absolute;
    top: 15px;
    right: 35px;
    color: white;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}

.multimedia-item img {
    max-width: 100%; /* Ajustar al ancho máximo del contenedor */
    max-height: 200px; /* Ajustar una altura máxima */
    border-radius: 8px; /* Bordes redondeados */
    margin-bottom: 10px; /* Espacio entre imágenes */
    cursor: pointer; /* Cursor como puntero para indicar clic */
    object-fit: cover; /* Ajustar proporción sin distorsión */
}
.multimedia-item video {
    max-width: 100%; /* Ajustar al ancho máximo del contenedor */
    max-height: 200px; /* Ajustar una altura máxima */
    border-radius: 8px; /* Bordes redondeados */
    margin-bottom: 10px; /* Espacio entre videos */
    object-fit: cover; /* Ajustar proporción sin distorsión */
}



    .menu-item.sobre-nosotros {
        display: none; /* Oculta el botón */
    }


    /* Ocultar el contenedor estático en móviles */
    .static-container {
        display: none;
    }


.modal-container {
    position: fixed;
    top: 0px;
    left: -100%; /* Oculto fuera de la pantalla */
    width: 100%; /* Ocupa toda la pantalla */
    height: 100%; /* Altura completa */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
    z-index: 1000;
    transition: left 0.3s ease;

}

.modal-container.open {
    left: 0; /* Desliza el modal dentro de la pantalla */
}

.account-modal-content {
 top: 55px;
 position: fixed;
    width: 270px; /* Ancho del modal */
    height: 91%; /* Altura completa */
    background-color: #2a2a2a; /* Fondo del contenido */
    overflow-y: auto; /* Permite desplazamiento vertical */
}


.account-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.account-menu li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.account-menu li a {
    color: #f4f4f4; /* Texto claro */
    text-decoration: none;
    font-weight: bold;
    margin-left: 10px;
}

.account-modal-content h2 {
    color: #FF4500; /* Naranja Mandarina para el título del menú */
    margin-bottom: 10px;
    text-align: center;
    margin-top: 20px;
}
.account-menu li a:hover {
    color: #00bfff; /* Azul celeste al pasar el cursor */
}

/* Estilo general del modal */
.modal-unique {
 overflow-y: auto; /* Habilita desplazamiento si es necesario */
    display: none; /* Oculto por defecto */
    position: fixed; /* Posición fija para que esté centrado */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    z-index: 10000; /* Asegura que esté por encima de otros elementos */
}

/* Contenido del modal */
.modal-unique-content {
    background-color: #1e1e1e; /* Fondo oscuro */
    margin: 15%  1%; /* Centrado vertical y horizontal */
    padding: 20px;
    border-radius: 8px;
    width: 83%; /* Ajusta el ancho */
    max-width: 400px; /* Ancho máximo */
    color: #f4f4f4; /* Texto claro */
    text-align: center;
}

/* Botón de cerrar */
.close-activities-modal {
    color: #fff;
    float: right;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

.close-activities-modal:hover {
    color: #ff0000; /* Rojo al pasar el cursor */
}

/* Estilo para el botón de empleados */
.view-employees-btn {
    background-color: #00bfff; /* Azul brillante */
    color: #fff;
    border: none;
     padding: 5px 8px; /* Reduce el espaciado interno */

    border-radius: 8px;
    font-size: 10px;
 top: -57px; /* Mueve el botón hacia arriba */
    right: -92px; /* Mueve el botón hacia la derecha */

    font-weight: bold;
    cursor: pointer;
    text-align: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 50%; /* Ancho completo para móviles */
 
    
white-space: nowrap; /* Evita que el texto se corte en varias líneas */
}

/* Efecto hover */
.view-employees-btn:hover {
    background-color: #007acc; /* Azul más oscuro */
    transform: scale(1.05); /* Pequeño zoom */
}
/* Contenedor principal de los tutoriales */
.tutorial-videos-container {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espacio entre cada video */
    padding: 10px;
    background-color: #1e1e1e; /* Fondo oscuro */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Sombra para dar profundidad */
}

/* Contenedor individual de cada video */
.video-item {
    text-align: center; /* Centrar el título y video */
}

.video-item h3 {
    font-size: 14px; /* Ajuste del tamaño del texto */
    color: #00bfff; /* Azul celeste para los títulos */
    margin-bottom: 10px;
}

.video-item video {
    width: 100%; /* Asegura que el video ocupe todo el ancho disponible */
    max-width: 320px; /* Tamaño máximo para mantener la proporción */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Sombra para el video */
}
.btn-cta.naranja[href="#ver-guia"] {
        display: none;
    }

/* Contenedor principal de la galería */
.inicio-gallery {
    display: flex;
    flex-direction: column; /* Organización en una sola columna */
    gap: 15px; /* Espacio entre los elementos */
    padding: 10px;
    background-color: #1e1e1e; /* Fondo oscuro */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Sombra para dar profundidad */
}

/* Cada elemento de la galería */
.gallery-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #2a2a2a; /* Fondo para cada ítem */
    border-radius: 8px; /* Bordes redondeados */
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra para cada ítem */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efecto al pasar el cursor */
}

.gallery-item:hover {
    transform: scale(1.05); /* Ampliación al pasar el cursor */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); /* Sombra más intensa */
}

/* Imagen de cada categoría */
.gallery-photo {
    width: 100%; /* Ocupa todo el ancho del contenedor */
    max-width: 320px; /* Máximo ancho para pantallas pequeñas */
    height: auto; /* Ajusta la altura automáticamente */
    object-fit: cover; /* Ajusta la imagen sin distorsión */
    border-radius: 8px; /* Bordes redondeados */
    margin-bottom: 8px; /* Espacio debajo de la imagen */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Sombra para la imagen */
}

/* Título de cada categoría */
.gallery-title {
    font-size: 10px; /* Tamaño del texto más pequeño para móviles */
    font-weight: bold;
    color: #00bfff; /* Azul celeste */
    margin: 0; /* Sin margen adicional */
}


    .modal-forgot-password {
        display: none;
        position: fixed;
        z-index: 3002;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .modal-content-forgot-password {
        background-color: #2a2a2a;
        margin: 20% auto;
        padding: 20px;
        border-radius: 10px;
        width: 85%;
        max-width: 300px;
        text-align: center;
        color: #f4f4f4;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
        position: relative;
    }

    .modal-content-forgot-password h2 {
        margin-bottom: 20px;
        font-size: 14px;
        color: #00bfff;
    }

    .modal-content-forgot-password p {
        font-size: 12px;
        margin-bottom: 15px;
        color: #f4f4f4;
    }

    .modal-content-forgot-password .login-input input {
        width: calc(100% - 20px);
        padding: 10px;
        border-radius: 8px;
        border: none;
        background-color: #333333;
        color: #f4f4f4;
        font-size: 12px;
    }

    .modal-content-forgot-password .btn-login {
        background-color: #00bfff;
        color: #ffffff;
        padding: 6px 12px;
        border: none;
        border-radius: 8px;
        font-size: 12px;
        font-weight: bold;
        cursor: pointer;
        margin-top: 15px;
        width: 50%;
        transition: background-color 0.3s ease;
    }

    .modal-content-forgot-password .btn-login:hover {
        background-color: #007bbf;
    }

    
  .close-forgot-password-custom {
    color: #f4f4f4;
    float: right;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

.close-forgot-password-custom:hover {
    color: #bbb;
}

/* Estilos para el video demostrativo en móviles */
.guia-video {
    width: 100%;
    padding: 0 10px; /* Opcional: agrega espacio lateral si se ve muy justo */
    box-sizing: border-box;
    margin-bottom: 20px; /* Espacio debajo del video */
}

.guia-video video {
    width: 100%;
    height: auto; /* Mantiene proporción */
    max-height: 300px; /* 🔺 Ajusta según lo necesites */
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

}