/* Estilos generales */
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 */
  
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
     border-radius: 50%; /* Hace que la imagen sea circular */
}

.logo img {
    height: 50px; /* 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 */
}

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;
}

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: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px;
    border: none;
    text-align: center;
    transition: background-color 0.3s ease;
}

.dropdown-content a {
    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;
}


.dropdown-content {
    display: none;
    position: absolute;
    top: 100%; /* Hace que el dropdown se alinee justo debajo del filtro */
    left: 0;
    background-color: #1e1e1e;
    min-width: 100px;
    max-height: 300px;
    overflow-y: auto; /* Habilita la barra desplazable vertical */
    overflow-x: hidden; /* Oculta la barra desplazable horizontal */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 999;
    border-radius: 5px;
}
/* Personalización de la barra de desplazamiento */
.dropdown-content::-webkit-scrollbar {
    width: 10px; /* 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% - 20px);
    padding: 5px;
    margin: 10px;
    box-sizing: border-box;
    background-color: #2a2a2a;
    color: #f4f4f4;
    border: 1px solid #333333;
    border-radius: 3px;
}

.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;
    overflow: hidden; /* Evita que la pantalla principal se amplíe */
}

.flex-container {
    display: flex;
    width: 100%;
    height: 100%;
}

.inner-flex-container {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #1e1e1e; /* Mantener el color del contenedor principal */
    position: relative; /* Posicionamiento relativo para que los elementos internos se ubiquen correctamente */
}

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

.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: calc(100vh - 100px); /* Ocupa todo el alto disponible, ajustado para alinear con el contenedor central */
    position: relative;
    overflow-x: hidden; /* Ocultar desplazamiento horizontal */
 margin-top: -35px; /* Mueve el contenedor hacia arriba */


}


/* Opciones de filtro */
/* Contenedor de las opciones */
.filter-options {
    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: 10px;
    margin-bottom: 10px;
    padding: 1px 0;
    width: 100%;
    justify-content: space-between;
    box-sizing: border-box;
    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: 8px 16px; /* 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 */
    width: 100%; /* Asegura que los contenedores tomen todo el ancho disponible */
    max-width: 250px; /* Ancho máximo para que se alinee con el dropdown */
    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 */
.static-container {
    background-color: #2a2a2a;
    padding: 20px;
    border-radius: 8px;
    flex: 1; /* Mismo tamaño que el contenedor izquierdo */
    overflow: hidden;
    position: fixed;
    right: 10px; /* Mover un poco más a la izquierda del extremo derecho */
    top: 95px; /* Alinear con la parte superior del contenedor grande */
    height: calc(100vh - 160px); /* Ajustar la altura para que coincida con la altura del contenedor desplazable */
padding-bottom: 40px; /* Aumenta el espacio interno en la parte inferior */
}

/* Menú de opciones de cuenta en el contenedor estático */
.static-container h2 {
    color: #FF4500; /* Naranja Mandarina para el título del menú */
    margin-bottom: 20px;
    text-align: center;
    margin-top: -10px;
}

.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;
}

.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: 38px; /* Tamaño aumentado de los íconos */
    height: 38px;
  border-radius: 50%; /* Hace que la imagen sea circular */
}

.account-menu li a {
    color: #f4f4f4;
    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: 20px;
    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: 40px; /* Tamaño del ícono */
    height: 40px;
  border-radius: 50%; /* Hace que la imagen sea circular */
}

.menu-item a {
    color: #f4f4f4;
    text-decoration: none;
    font-weight: bold;
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 */
}
.flex-container-equipo {
    display: flex;
margin-top: -50px; /* Ajusta el valor según lo que necesites */
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden; /* Asegura que no haya desbordamiento adicional */
}

/* 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 */

    height: calc(100vh - 160px); /* Ajustar la altura para que coincida con el espacio disponible */
    box-sizing: border-box;
    position: relative;
    margin-top: 1px; /* Alinea la barra deslizadora con el contenido */
}



/* Barra de desplazamiento personalizada para el contenedor equipo */
.scrollable-container-equipo::-webkit-scrollbar {
    width: 7px; /* 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: 20px;
    right: 20px;
    width: 300px;
    background-color: #2a2a2a;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow: hidden;
}

.chat-header {
    background-color: #00bfff;
    color: #f4f4f4;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

.close-chat-btn {
    background: none;
    border: none;
    color: #f4f4f4;
    font-size: 20px;
    cursor: pointer;
}

.chat-body {
    padding: 15px;
    height: 200px;
    overflow-y: auto;
    color: #f4f4f4;
}

.chat-footer {
    display: flex;
    padding: 10px;
    background-color: #333;
    align-items: center;
}

.chat-footer input[type="text"] {
    flex: 1;
    padding: 8px;
    border-radius: 4px;
    border: none;
    margin-right: 10px;
}

.chat-footer button {
    background-color: #00bfff;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    color: #f4f4f4;
}

.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: 100%;
    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: 350px; /* 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: 80px; /* Ancho de la imagen */
    height: 80px; /* 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 {
    width: 100%; /* O el valor que desees para que se ajuste al ancho deseado */
    max-width: 178px; /* Ajusta este valor para cambiar el ancho máximo */
    padding: 8px;
    margin-right: 10px;
    border-radius: 5px;
    background-color: #2a2a2a;
    color: #f4f4f4;
    border: 1px solid #333333;
    box-sizing: border-box;
}

/* Ajustes para el cuadro de texto dentro del contenedor */
.filter-item.input-container input[type="text"] {
    width: 100%; /* Asegura que el input ocupe todo el ancho del contenedor */
    height: 13px; /* Asegura la consistencia en la altura */
    padding: 8px;
    border-radius: 5px;
    background-color: #2a2a2a;
    color: #f4f4f4;
    border: 1px solid #333333;
    box-sizing: border-box;
}
.inner-flex-item.large.center-content.scrollable-container {
    background-color: #1e1e1e;
    padding: 20px;
    border-radius: 8px;
    flex: 2;
    overflow-y: scroll; /* Asegura que la barra deslizadora vertical esté activada */
    height: calc(100vh - 100px); /* Ajusta la altura para que coincida con el diseño */
    box-sizing: border-box;
    margin-top: -15px;
    position: relative;
    z-index: 10; /* Asegura que la barra esté por encima de otros elementos */
    margin-right: 280px;
    padding-left: 25px;
    padding-top: 0px;
}
.inner-flex-item.large.center-content.scrollable-containerindex {
    background-color: #1e1e1e;
    padding: 20px;
    border-radius: 8px;
    flex: 2;
    overflow-y: scroll; /* Asegura que la barra deslizadora vertical esté activada */
    height: calc(100vh - 100px); /* Ajusta la altura para que coincida con el diseño */
    box-sizing: border-box;
    margin-top: -15px;
    position: relative;
    z-index: 10; /* Asegura que la barra esté por encima de otros elementos */
    margin-right: 280px;
    padding-left: 25px;
    padding-top: 0px;
}
/* Personalización de la barra deslizadora */
.inner-flex-item.large.center-content.scrollable-containerindex::-webkit-scrollbar {
    width: 7px;
}

.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;
}
/* Personalización de la barra deslizadora */
.inner-flex-item.large.center-content.scrollable-container::-webkit-scrollbar {
    width: 7px;
}

.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;
}
/* Contenedor principal de la tarea */
.task-container1 {
    background-color: #2a2a2a;
    border-radius: 8px;
    padding: 15px; 
    margin-bottom: 20px;
    margin-top: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Encabezado de la tarea */
.task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.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;
}


.task-container {
    background-color: #2a2a2a;
    border-radius: 8px;
    padding: 15px; 
    margin-bottom: 20px;
    margin-top: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Encabezado de la tarea */
.task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.client-photo {
    width: 50px;
    height: 50px;
    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;
    color: #f4f4f4;
    font-size: 18px;
}

/* 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 los detalles de la tarea */
.task-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    
}

/* Contenedor izquierdo (Descripción, tipo de servicio, archivos adjuntos) */
.task-left, .task-right {
    width: 45%; /* 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;
}

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




/* Contenedor izquierdo (Descripción, tipo de servicio, archivos adjuntos) */
.task-left, .task-right {
    width: 45%; /* 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);
}

.task-left p, .task-right p {
    margin: 10px 0;
    color: #f4f4f4;
    font-size: 14px;
white-space: normal; /* Permitir saltos de línea */
    overflow-wrap: break-word; /* Dividir palabras largas si es necesario */
    word-break: break-word; /* Asegura que palabras largas no desborden */
    margin-bottom: 10px; /* Espaciado entre párrafos */
}

/* 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 p {
    margin: 5px 0;
    color: #f4f4f4;
    font-size: 14px;
}

.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: 8px 16px; /* Tamaño más pequeño */
    font-size: 12px; /* 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: 16px;
    margin-right: 6px; /* Espacio entre el icono y el texto */
}

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

/* Contenedor para la competitividad */
.task-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Alinear a la derecha */
}

.competitiveness-ranking {
    display: flex;
    align-items: center;
    margin-top: 5px; /* Espacio entre el botón y la barra */
    margin-left: 148px; /* Empuja el ranking hacia la derecha */
    margin-right:5px;
}

.competitiveness-ranking label {
    color: #f4f4f4;
    margin-right: 5px;
    font-size: 14px;
}

.ranking-bar {
    width: 100px;
    height: 10px;
    background-color: #333333;
    border-radius: 5px;
    overflow: hidden;
}

.ranking-fill {
    height: 100%;
    width: 70%; /* Cambia este valor según el nivel de competitividad */
    background-color: #00bfff;
}
/* Botón de Ver Contenidos */
.multimedia-button {
    background-color: #00bfff;
    color: #ffffff;
    padding: 10px 20px;
    font-size: 14px;
    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: 13px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-left: 10px; /* Espacio entre el texto y el botón */
}

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



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

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

.completed-activities-container,
.expiring-activities-container {
    display: flex;
    justify-content: space-between;
}

/* 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 200px; /* Ancho fijo para los contenedores */
    height: 170px; /* 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: 30%; /* Ajusta el ancho según sea necesario */
    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;
}
/* 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: 16px; /* 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: 8px; /* 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: 16px;
}

.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: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    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%;
}

.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;
}
/* Contenedor de Crear Actividad */
.crearactividad-container {
    background-color: #2a2a2a;
    border-radius: 8px;
    padding: 20px;
    margin-top: -15px; /* Ajusta esto para mover el contenedor más hacia arriba */
    margin-right: 1px;
    margin-left: -295px;
    width: 83%;
    height: 600px;
    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;
}
/* Personalización de la barra de desplazamiento */
.crearactividad-container::-webkit-scrollbar {
    width: 7px;
}

.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: 95px;           /* Mueve hacia abajo 50px desde el borde superior */
    left: 10px;          /* Mueve hacia la derecha 20px desde el borde izquierdo */
    width: 80%;          /* Ocupa el 65% del ancho disponible */
    height: 86vh;        /* 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-tareas,
.contenedor-actividades {
    background-color: #333333;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    margin-left: 10px; /* Añade espacio a la izquierda del contenedor */
    width: 96%; /* 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: 220px; /* Ajusta la altura de los contenedores según lo necesites */
    overflow-y: auto; /* Habilita la barra de desplazamiento vertical */
}

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

.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;
    justify-content: space-between;
    gap: 10px; /* Espacio entre las dos columnas */
    width: 100%; /* Ocupa todo el ancho disponible */
    box-sizing: border-box; /* Asegura que padding y border se incluyan en el ancho total */
    padding: 0; /* Elimina cualquier padding interno */
    margin: 0; /* Elimina márgenes innecesarios */
}

/* Columna individual */
.columna {
    flex: 1; /* Ambas columnas ocuparán el mismo ancho */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio entre los elementos internos de la columna */
    padding: 0; /* Elimina cualquier padding interno */
    margin: 0; /* Elimina márgenes */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho */
}


.form-group {
    display: flex;
    flex-direction: column;
 width: 90%;
    margin-bottom: 5px; /* Reducir espacio entre grupos */
}

.form-group label {
    font-size: 14px;
    margin-bottom: 5px;
    color: #00bfff; /* Color del texto */
}

.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: 14px;
}

.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: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}

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

.contenedor-subida h3 {
    margin-bottom: 15px;
    color: #00bfff;
}

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

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

.contenedor-subida p {
    font-size: 12px;
    color: #cccccc;
}
.textarea-descripcion {
    width: 100%; /* O el valor deseado */
    height: 205px; /* 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: 104%;   /* 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;
}

/* Organización del formulario en dos columnas */
.personal-info-form {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 0 auto;

    max-width: 1000px;
    margin-left: 0; /* Reducir o eliminar el margen para acercarlo al borde izquierdo */
    padding-left: 0; /* Reducir el padding para acercar más al borde izquierdo */
}
.personal-form-column {
    flex: 1;
    display: flex;
    flex-direction: column; /* Esto asegura que los elementos se alineen verticalmente */
    gap: 10px; /* Espacio entre los elementos de la columna */
    width: 100%; /* Asegúrate de que el ancho sea el adecuado */
    box-sizing: border-box; /* Asegura que padding y border se incluyan en el ancho */
}

/* Estilos para asegurar que todos los contenedores tengan el mismo ancho */
.personal-form-group {
    width: 120%; /* 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: 16px;
    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: 16px;
    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: 16px; /* 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;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 14px;
}

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

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

.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: 40%; /* Ancho razonable */
    max-width: 500px; /* 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;
}
/* 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: 40%; /* Ancho razonable */
    max-width: 500px; /* 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: 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: 120px; /* Ajusta el ancho del dropdown según sea necesario */
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.telefono-container input {
    flex: 1;
    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 {
    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: 96%;
    color: #f4f4f4; /* Texto blanco */
    text-align: left;
    font-size: 14px;
    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;
    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%;
    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: 115%;
height: 240px;
margin-left: 50px; /* Aumenta este valor para mover más hacia la derecha */
    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: 5px 10px;
    margin-left: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.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: 10px 20px;
    font-size: 16px;
    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-bottom: 50px; /* Aumenta el espacio debajo del contenedor */
    border: 1px solid #444444;
    width: 91%;
    min-height: 550px; /* Aumenta la altura mínima del contenedor */
    max-height: 700px; /* Limita la altura si es necesario */
}

/* 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: 12px 20px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    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;
 
}

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

#descripcion-actividad {
    width: 96%;
    margin-bottom: 10px;
    height: 140px;
    padding: 10px;
    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: 20px;
}

.upload-btn {
    display: inline-block;
    padding: 10px 0;
    background-color: #2a2a2a;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
    border: none;
    transition: background-color 0.3s ease;
    width: 150px; /* Ajuste del ancho fijo del botón */
}

.upload-btn:hover {
    background-color: #3e3e3e;
}

.file-name {
    color: #f4f4f4;
    font-size: 14px;
    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 */
}

/* 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: 16px;
    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;
    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%;
    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;
}

.upload-btn {
    display: inline-block;
    padding: 10px 15px;
    background-color: #333333;
    color: #f4f4f4;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-family: 'Arial', sans-serif;
    transition: background-color 0.3s ease;
}

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

.file-name {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: #f4f4f4;
}
/* 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: 90%; /* Ancho ajustable del contenedor */
    margin: 20px 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;
    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 */
}

.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;
} 

/* Estilos para el contenedor de los datos */
.contenedor-datos1 {
    
    background-color: #333333; /* Fondo oscuro para el contenedor de datos */
    padding: 20px;
    border-radius: 8px;
    margin-right: 10px; /* Espacio entre los dos contenedores */
    display: flex;
    width: 72%;
    height: 227%; /* El contenedor grande ocupa el 90% de la altura disponible */
    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: 20px;
    border-radius: 5px;
width: 30%;
   position: relative; /* Asegura que el contenedor pueda moverse desde su posición original */
    transform: translate(150px, -42px); /* Mueve el contenedor 50px hacia la derecha y 30px hacia arriba */
    text-align: center;
}

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

.contenedor-principal {
    width: 22%; /* Ajusta según sea necesario */
    padding: 10px;
    position: relative;
    height: 223%; /* Altura del contenedor */
    overflow-y: auto; /* Habilita el desplazamiento vertical */
   
    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 */
    top: -1275px; /* Ajusta según tu diseño */
    margin-right: -400px; /* Ajusta según tu diseño */
    margin-left: 915px; /* Ajusta según tu diseño */
}

.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: 160px;
    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: 2% auto;
    padding: 20px;
    border: 1px solid #444;
    width: 80%;
    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 */
}

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

.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 */
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: #00bfff #2a2a2a;
}

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

.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: 15px;
    padding: 10px;
    border: 1px solid #333;
    border-radius: 8px;
    background-color: #2a2a2a; /* Fondo ligeramente más claro para diferenciar la sección */
}

/* 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 */
    max-height: 85%; /* 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;
}

/* Botón de cerrar el modal */
.close-asignar {
    color: #f4f4f4;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.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 */
}

/* Contenedor de columnas (igual a crearactividad) */
.columnas-container-asignar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espacio entre las columnas */
}

/* 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 */
}
/* Botón de "Guardar Cambios" en el modal de Asignar Actividad */
.boton-guardar-cambios {
    position: relative;
    display: block;
  left: 800px;
    margin-right: 0;
    margin-top: 40px; /* Ajuste para colocar el botón más abajo de la "X" */
    margin-bottom: 20px;
    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, color 0.3s ease;
}

.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: 5px; /* Espacio superior */
    margin-left: 54px; /* 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: 16px; /* Tamaño de la fuente */
    padding: 12px 24px; /* Espaciado interno del botón */
    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 */
}

/* 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;
    border-bottom: 1px solid #444; /* Línea divisoria */
}

/* Botón para guardar cuentas */
.guardar-cuentas-button {
    background-color: #f57c00; /* Color naranja */
    color: #ffffff; /* Color del texto */
    font-size: 14px;
    padding: 8px 16px;
    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;
}

.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: 80%; /* 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: 16px; /* 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;
    margin-top: 20px; /* Espacio superior al botón */
    padding: 10px 20px; /* 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;
    margin-right: 10px; /* Añade espacio desde el filo derecho */
    width: 80%; /* Ajusta el ancho dejando espacio a la derecha */
 height: 200px;
    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;
}


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

.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: 55px;
    height: 55px;
    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: 20px; /* Tamaño del texto */
    font-weight: bold; /* 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: 10px 0;
    font-size: 15px;
    line-height: 1.5;
}

.view-profile-button-updated {
    background: #00bfff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    font-weight: bold;

    position: absolute;  /* Posicionar absolutamente en su contenedor padre */
    top: 15px;           /* Espacio desde la parte superior */
    right: 10px;         /* 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: 16px;
}
/* Ficha del empleado (contenedor central) */
.employee-card {
    background-color: #2a2a2a;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    color: #f4f4f4;
    display: flex;
    flex-direction: column;
    width: 95%;
     height: 300px; /* Altura calibrable para pruebas */
    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: 15px;
}

.employee-card-image img {
    border-radius: 50%;
    width: 65px;
    height: 65px;
    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: 20px; /* 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: 18px;
    color: #ffd700; /* Color dorado para la calificación */
}

.verificado-badge {
    color: #00ff00; /* Cambia la palabra "Verificado" a color verde */
    font-size: 14px; /* 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;
}

/* Sección de tareas y ubicación */
.employee-card-details {
    margin-top: 10px;
    font-size: 14px;
    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: 14px;
    align-self: flex-end; /* Alinear el contenedor al final del contenedor padre */
    position: relative; /* Cambiar a relativo para ajustar la posición */
    top: -40px; /* 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: 5px;
    margin-top: 5px;
    width: 98%;
    height: 160px; /* Altura calibrable para pruebas */
verflow-y: auto; /* Habilita la barra deslizadora vertical */
    overflow-x: hidden; /* Oculta la barra horizontal si existe */
}

.employee-card-footer::-webkit-scrollbar {
    width: 7px; /* 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: 10px 20px;
    border-radius: 20px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    position: absolute; /* Colocar el botón en la parte superior derecha */
    top: 20px; /* Ajustar para alinear con la parte superior */
    right: 20px; /* Ajustar para alinear con la parte derecha */
}

.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; /* Reducir el padding superior para mover el contenido más hacia arriba */
    box-sizing: border-box;
    overflow-y: auto; /* Barra de desplazamiento vertical */
    overflow-x: hidden;
    max-height: calc(100vh - 100px); /* Ajustar la altura máxima para que la barra de desplazamiento sea visible */
  
    margin-top: -20px; /* Mover todo el contenedor un poco hacia arriba */
}

/* Estilo de las secciones dentro del contenedor */
.inicio-section-info {
    width: calc(100% - 40px); /* Ajustar para el padding a ambos lados */
    margin: 0 auto 20px auto; /* Margen abajo para separar cada sección */
    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: left;
    box-sizing: border-box;
}
/* Estilo de las secciones dentro del contenedor seccion2 */
.fondo-hero {
    background-image: url('../images/fondo1.jpg');
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    min-height: 570px;
    width: 98%;
    display: flex;
    justify-content: center;      /* ← centra horizontalmente */
    align-items: center;          /* ← centra verticalmente */
    text-align: center;
    padding: 20px;
    position: relative;
}

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

.hero-text h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 36px; /* AUMENTADO */
    font-weight: 700;
    margin-bottom: 12px;
    color: #FF6F00;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}

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

.hero-text p {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 30px;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-cta {
    padding: 14px 28px;
    border-radius: 30px;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
}

.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;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 30px;
}

.step {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 20px;
    border-radius: 12px;
    width: 390px;         /* Aumentado desde 300px */
    height: 410px;        /* Aumentado desde 350px */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.step:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.6);
}
.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 * {
    position: relative;
    z-index: 1;
}
.step-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

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

.step p {
    font-size: 16px;
    line-height: 1.5;
    color: #f4f4f4;
}

.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*/
.benefits-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: space-around;
    margin-top: 20px;
}

.benefit-card {
    background: linear-gradient(to bottom right, #2a2a2a, #1e1e1e);
    padding: 20px;
    width: 260px;
    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: 36px;
    margin-bottom: 15px;
    color: #FF6F00;
}

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

.benefit-card p {
    color: #f4f4f4;
    font-size: 15px;
    line-height: 1.5;
}
.beneficios-doo h2 {
    text-align: center;
}

/* Estilo de las secciones dentro del contenedor seccion5*/
.guia-container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.guia-texto {
    flex: 1;
    min-width: 300px;
    max-width: 500px;
}
/* Ajuste del botón */
.guia-texto .btn-cta.naranja {
    display: inline-block;
    margin-top: 25px;          /* separa del listado */
    padding: 10px 22px;        /* menos grande */
    font-size: 15px;
    border-radius: 25px;
    background-color: #FF4500;
    color: white;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.guia-texto .btn-cta.naranja:hover {
    background-color: #e03e00;
}
.guia-texto h2 {
    color: #FF6F00;
    margin-bottom: 15px;
}

.guia-texto ul {
    list-style: none;
    padding: 0;
    margin: 15px 0 25px 0; /* más espacio abajo */
}

.guia-texto ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-size: 15px;
    color: #f4f4f4;
}
.guia-texto ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #00bfff; /* Azul celeste suave */
    box-shadow: 0 0 0 2px #1e1e1e; /* contorno oscuro */
}
.guia-texto p {
    font-size: 16px;
    line-height: 1.6;
    color: #f4f4f4;
}

.guia-video {
    flex: 1;
    min-width: 300px;
}

.guia-video video {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}


/* Estilos para la barra de desplazamiento en navegadores Webkit (Chrome, Safari) */
.flex-container-inicio::-webkit-scrollbar {
   width: 7px; /* 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 */
}



/* Título de cada sección */
.inicio-section-info h2 {
    color: #FF4500; /* Título en color naranja */
    margin-bottom: 10px;
}

/* 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;
}

.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: 1rem; /* 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 */
    margin: 5% auto; 
    padding: 20px;
    border: none; /* Eliminé el borde para un look más moderno */
    width: 60%; /* Aumenté el ancho del modal al 60% */
    max-width: 800px; /* Limité el ancho máximo */
    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 */
}

.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% 35%; /* Ajustar el margen para mover más a la izquierda */
  padding: 20px;
  border: 1px solid #888;
  width: 35%; /* 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: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.boton-guardar-verificacion-actividad:hover {
  background-color: #45a049;
}

/* Estilos para las fichas de actividad en proceso y actividades realizadas */

.contenedor-tareas, .contenedor-actividades {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ficha-actividad {
    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;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
    min-height: 80px;
}

.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 {
    margin-right: 15px;
}

.profile-image1 {
    width: 40px; /* Tamaño más pequeño que la imagen en la cuenta */
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.titulo-actividad {
    font-size: 1.2em;
    color: #00bfff; /* Azul celeste para el título de la actividad */
    margin-right: 20px;
    flex: 2;

}

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

}

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

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

.btn-trabajo-terminado, .btn-aceptar-trabajo, .btn-ver-perfil, .btn-ver-actividad, .btn-mensaje {
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
    font-size: 0.8em;
    white-space: nowrap; /* Evitar que el texto se divida en dos líneas */
}

.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;
    margin-left: auto; /* Alinear a la derecha del contenedor */
    padding: 10px 40px; /* Botón más ancho */
    white-space: nowrap; /* Evitar que el texto se divida en dos líneas */
}

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

/* Estructura horizontal de la ficha */
.ficha-actividad p {
    margin: 5px 0;
    flex: 1;
}

.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;
}

/* Botón Ver Perfil alineado a la derecha */
.ficha-actividad .empleado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

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


/* Estilo para el ícono de visto */
.icono-visto {
    font-size: 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-weight: bold;
}

.no-verificado-text, .no-verificado-text-updated {
    color: red; /* Rojo para no verificado */
    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% auto;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #444;
    width: 80%;
    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;
    font-size: 28px;
    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: 100px;
    width: 100px;
    border-radius: 50%;
    margin-right: 20px;
    border: 2px solid #ccc;
    object-fit: cover;
}

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

.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 */
}

.empleado-likes {
    font-size: 0.9rem;
    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 {
    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: 0.95rem;
    text-align: left;
    color: #f4f4f4; /* Texto claro para que resalte en el fondo oscuro */
}



/* Estadísticas del Usuario */
.estadisticas-empleado p {
    margin: 5px 0;
    font-size: 0.95rem;
}

.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 {
    position: absolute; /* Permite que el botón se coloque dentro del contenedor de forma absoluta */
    top: 10px; /* Ajusta según qué tan cerca quieras el botón del borde superior */
    right: 10px; /* Ajusta según qué tan cerca quieras el botón del borde derecho */
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 8px 12px;
    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;
}


/* Sección de Comentarios */
.comentarios-empleado .comentario {
    background-color: #555; /* Fondo oscuro */
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #666;
    margin-bottom: 10px;
}

#comentario-nuevo {
    width: 97%;
    padding: 12px;
    margin-top: 10px;
    border: 1px solid #777;
    border-radius: 4px;
    font-size: 0.95rem;
    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;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.boton-enviar-comentario:hover {
    background-color: #218838;
}




/* Ajuste del Botón Enviar Mensaje */
.boton-enviar-mensaje {
    background-color: #17a2b8; /* Color de fondo principal (azul claro) */
    color: #fff; /* Texto en blanco */
    border: none; /* Sin borde */
    padding: 10px 15px; /* 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: -50px; /* Mueve el botón 20px hacia arriba */
    right: -600px; /* 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: 14px;
    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: 18px; /* 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: 14px; /* Tamaño ajustado */
    background: transparent;
    color: #ffffff; /* Blanco para el botón */
    border: none;
    cursor: pointer;
    margin-left: 5px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px; /* Borde redondeado */
}

.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 */
}

/* Diseño bandeja de entrada */
.contenedor_mensajes {
    position: absolute;
    top: 95px; /* Ajusta este valor para acercar el contenedor al encabezado */
    bottom: 6px; /* Ajusta este valor para acercar el contenedor al pie de página */
    left: 6px; /* Margen izquierdo desde el borde de la ventana */
    right: calc(290px + 1px); /* Ajusta este valor para separar más del contenedor estático */
    background-color: #2a2a2a; /* Color acorde al diseño de tu página */
    border-radius: 8px; /* Bordes redondeados */
    padding: 20px; /* Espaciado interno */
    overflow: hidden; /* Evita cualquier barra de desplazamiento */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Sombra para darle profundidad */
}

/* Contenedor principal para crear actividad */

/* Contenedor 1 */
.contenedor-1 {
    background-color: #2a2a2a;
    width: 26%; /* Ajuste de ancho del contenedor 1 */
    height: 102%; /* Altura ajustada */
    border-radius: 0px;
    padding: 15px;
    margin-right: 10px; /* Espacio a la derecha del contenedor */
    margin-top: -18px; /* Espacio desde la parte superior */
    margin-left: -19px; /* Espacio desde el borde izquierdo del contenedor principal */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Sombra */
    overflow-y: auto; /* Solo barra de desplazamiento vertical */
    overflow-x: hidden; /* Oculta barra horizontal */
    
    /* Línea blanca en el extremo derecho */
    border-right: 1px solid #ffffff; /* Línea de 2px de grosor, color blanco */
}

/* Contenedor 2 */
.contenedor-2 {
    background-color: #333333;
    width: 72%; /* Ajuste de ancho del contenedor 2 */
    height: 8%;
    border-radius: 0px;
    padding: 15px;
    margin-right: 10px; /* Separación entre contenedores */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Sombra */
    overflow: hidden; /* No muestra barras de desplazamiento ni vertical ni horizontal */
    margin-top: -605px; /* Espacio desde la parte superior */
    margin-bottom: 0px; /* Espacio desde la parte inferior */
    margin-left: 324px; /* Espacio desde el borde izquierdo del contenedor principal */
}

/* Contenedor 3 */
.contenedor-3 {
    background-color:#2a2a2a;
    width: 72%; /* Ajuste de ancho del contenedor 3 */
    height: 88%;
    border-radius: 0px;
    padding: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Sombra */
    overflow-y: hidden; /* Solo barra de desplazamiento vertical */
    overflow-x: hidden; /* Oculta barra horizontal */
    margin-top: 0px; /* Espacio desde la parte superior */
    margin-left: 324px; /* Espacio desde el borde izquierdo del contenedor principal */
    border-top: 1px solid #ffffff;
}

/* Personalización de la barra de desplazamiento */
.contenedor-1::-webkit-scrollbar,
.contenedor-3::-webkit-scrollbar {
    width: 10px; /* 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 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: 80%; /* Ajusta el alto del bloque (aproximadamente 1/6 del contenedor) */
margin-top: -10px; /* Espacio desde la parte superior */
    width: 30%; /* 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-perfil:hover {
    background-color: #444444; /* Fondo más claro al pasar el cursor */
    transform: scale(1.02); /* Ligeramente más grande */
}

/* 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: 60px; /* Ancho de la imagen */
    height: 60px; /* 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: 50px; /* Ancho de la imagen */
    height: 50px; /* 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: 14px; /* 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 */
}

/* Contenedor de entrada de chat */
.chat-input-container {
    display: flex;
    align-items: center; /* Alinea verticalmente todos los elementos */
    gap: 10px; /* Espaciado entre los elementos */
    padding: 10px;
    background-color: #1e1e1e; /* Fondo ligeramente más oscuro */
    border-radius: 8px; /* Bordes redondeados */
    height: 50px; /* Ajusta la altura */
    margin-left: -25px; /* Espacio reducido a la izquierda */
    margin-right: -25px; /* Espacio reducido a la derecha */
    box-sizing: border-box; /* Incluye el padding dentro del ancho y la altura */
}

/* 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: 18px; /* Tamaño reducido para los emojis */
    padding: 4px; /* 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 */
}
/* Área de texto para el chat */
.chat-textarea {
    flex: 1; /* Ocupa todo el espacio restante */
    height: 70%; /* Alineado con los iconos */
    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: 14px;
    font-family: Arial, sans-serif;
}
/* Botón de enviar */
.chat-send-btn {
    font-size: 18px; /* 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: 10px 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: 10px; /* Margen desde la parte superior del contenedor */
    right: 20px; /* Margen desde la parte derecha del contenedor */
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.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: 96%; /* Ancho del 96% del contenedor padre */
    height: 427px; /* Altura fija */
    margin: 10px 20px; /* Espaciado externo */
    background-color: #2a2a2a; /* Color de fondo oscuro */
    border-radius: 8px; /* Bordes redondeados */
    padding: 10px; /* Espaciado interno */
    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: 8px; /* 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 */
}
/* Ocultar el botón "Cuenta" en computadoras */
@media (min-width: 769px) {
    .menu-item.cuenta {
        display: none;
    }
}
/* Ocultar el botón en pantallas mayores a 768px */
@media (min-width: 769px) {
    .view-activities-button {
        display: none; /* Oculta el botón en pantallas grandes */
    }
}

@media (min-width: 769px) {
        #best-employees-button {
            display: none;
        }
    }
    
/* Contenedor principal de los tutoriales (para computadoras) */
.tutorial-videos-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas para distribuir los videos */
    gap: 20px; /* Espacio entre los elementos */
    padding: 20px;
    background-color: #1e1e1e; /* Fondo oscuro */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Sombra para dar profundidad */
    max-width: 1300px; /* Limita el ancho máximo del contenedor */
    margin: 0 auto; /* Centra el contenedor en la pantalla */
}

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

.video-item h3 {
    font-size: 10px; /* Tamaño del título más grande para computadoras */
    color: #00bfff; /* Azul celeste para los títulos */
    margin-bottom: 10px; /* Espacio debajo del título */
}

.video-item video {
    width: 100%; /* Asegura que el video ocupe todo el ancho disponible */
    max-width: 400px; /* Tamaño máximo del video */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Sombra para el video */
    aspect-ratio: 16/9; /* Mantiene la proporción del video */
}

/* Ajustes responsivos */
@media (min-width: 1024px) {
    .tutorial-videos-container {
        grid-template-columns: repeat(3, 1fr); /* Tres columnas para pantallas más grandes */
        gap: 30px; /* Aumenta el espacio entre videos */
    }

    .video-item h3 {
        font-size: 18px; /* Títulos un poco más grandes */
    }
}

/* Contenedor principal de la galería */
.inicio-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Diseño en cuadrícula */
    gap: 20px; /* Espacio entre los elementos */
    padding: 20px;
    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 item */
    border-radius: 8px; /* Bordes redondeados */
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra para cada item */
    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 disponible */
    height: 200px; /* Altura fija para uniformidad */
    object-fit: cover; /* Ajusta la imagen sin deformarla */
    border-radius: 8px; /* Bordes redondeados */
    margin-bottom: 10px; /* 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 */
    font-weight: bold;
    color: #00bfff; /* Azul celeste */
    margin: 0; /* Sin margen adicional */
}

/* Modal de Olvidé mi Contraseña */
.modal-forgot-password {
    display: none;
    position: fixed;
    z-index: 3000;
    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: 10% auto;
    padding: 20px;
    border-radius: 10px;
    width: 400px;
    text-align: center;
    color: #f4f4f4;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}

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

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

/* Modal general para mostrar videos */
.modal-guia {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; /* ← Cambia esto si deseas más o menos altura general */
    background-color: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
}



/* Contenido centrado */
.modal-guia-contenido {
    width: 100vw;               /* 🔺 Ocupa todo el ancho visible */
    max-width: 100vw;           /* 🔺 Elimina limitación del ancho */
    background-color: #1e1e1e;
    border-radius: 0;           /* 🔺 Elimina bordes para pegarse a los extremos */
    padding: 20px 0px;          /* 🔺 Padding vertical sí, pero horizontal en 0 */
    position: relative;
    max-height: 98vh;           /* Mantiene altura cercana al borde */
    overflow-y: auto;
}



/* Botón cerrar */
.cerrar-modal {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    color: #ffffff;
    cursor: pointer;
}

/* Carrusel */
.slider-container {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    max-width: 95vw;  /* 🔧 Controla hasta dónde puede crecer */
    padding: 0 60px;   /* Deja espacio para las flechas sin cortar los videos */
    box-sizing: border-box;
}



.slider-videos {
    display: flex;
    gap: 20px;
    transition: transform 0.4s ease;
    max-width: 100%;
    overflow-x: auto;         /* 🔥 NECESARIO para que las flechas funcionen */
    scroll-behavior: smooth;  /* Opcional: para desplazamiento suave */
    box-sizing: border-box;
}





.slider-videos::-webkit-scrollbar {
    display: none;                /* Chrome, Safari y Edge */
}


.video-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 300px;
    max-width: 100%;
    height: auto; /* ⚠️ importante para que el alto se ajuste automáticamente */
}

.video-item video {
    width: 100%;
    height: 535px; /* 🔺 Aumenta aquí la altura deseada */
    max-height: 90vh; /* Para que no desborde en pantallas más pequeñas */
    border-radius: 10px;
    object-fit: cover;
}

/* Botones laterales */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    font-size: 32px;
    color: #FF6F00;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 50%;
    z-index: 10;
    transition: background-color 0.3s ease;
}

.slider-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
}
.slider-btn.left {
    left: 5px;  /* 🔸 Más alejado del video, prueba con -50px si quieres más */
}

.slider-btn.right {
    right: 5px; /* 🔸 Igual para el derecho */
}
.video-titulo {
    margin-bottom: 5px;
    font-size: 16px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}