* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  /* display: flex; ESTO HACÍA QUE EL LISTADO NO TUVIERA EL ANCHO DE TODA LA PÁGINA */
  justify-content: center;
  /* align-items: center; ESTO HACÍA QUE NO SE VIERA TODO EN VERTICAL */
  height: 100vh;
  background-color: #f3f4f6;
  color: #333;
  
}

.login-container {
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  justify-content: center;
  align-items: center;
  height: 100vh; /* Centra verticalmente */
}

/* Contenedor para páginas públicas como login y recordar contraseña */
.centered-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Centra verticalmente */
    background-color: #f3f4f6; /* Fondo suave */
}

.form-box {
    width: 100%;
    max-width: 400px; /* Ancho máximo para formularios */
    padding: 2rem;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}


h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #333;
}

.login-form label {
  font-size: 0.9rem;
  color: #555;
}

.login-form input[type="text"],
.login-form input[type="password"] {
  width: 100%;
  padding: 0.75rem;
  margin: 0.5rem 0 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.login-form button {
  width: 100%;
  padding: 0.75rem;
  background-color: #4a90e2;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.login-form button:hover {
  background-color: #357abd;
}

.forgot-password {
  display: block;
  text-align: center;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #4a90e2;
  text-decoration: none;
}

.forgot-password:hover {
  text-decoration: underline;
}

/* Responsividad */
@media (max-width: 480px) {
  .login-container {
    padding: 1.5rem;
  }
}

/* Estilos generales */
body {
  /* display: flex; ESTO HACÍA QUE EL LISTADO NO OCUPASE TODO EL ANCHO DE LA PANTALLA */
  flex-direction: row;
  margin: 0;
  font-family: Arial, sans-serif;
}

/* Estilos Generales */
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    height: 100%;
    /* display: flex; ESTO HACÍA QUE EL LISTADO NO OCUPASE TODO EL ANCHO DE LA PANTALLA */
}

/* Contenedor del menú lateral */
.sidebar {
    position: fixed; /* Fija el menú en el borde de la ventana */
    top: 0;
    left: 0;
    width: 250px; /* Ancho fijo del menú */
    height: 100vh; /* Ocupa toda la altura de la pantalla */
    background-color: #8EBCD9; /* Color de fondo */
    color: #fff;
    overflow-y: auto; /* Desplazamiento vertical si el contenido del menú es largo */
    padding-top: 1rem;
    z-index: 1000;
}

/* jsTree dentro de la barra lateral */
#jstree {
    color: #fff; /* Color de texto del menú */
}

#jstree a {
    color: #fff;
    text-decoration: none;
}

#jstree a:hover {
    color: #b3d1f2;
}

/* Personalización de los elementos de jsTree */
.jstree-default .jstree-node {
    font-size: 1.2rem;
    padding: 0.3rem 0;
}

.jstree-default .jstree-open > .jstree-ocl,
.jstree-default .jstree-closed > .jstree-ocl {
    background-position: center;
    background-size: 1rem;
}

.jstree-default .jstree-ocl {
    margin-right: 0.5rem;
}

/* Contenedor del contenido principal */
.main-content {
    margin-left: 250px; /* Se alinea justo a la derecha del menú lateral */
    padding: 1.5rem;
    background-color: #f3f4f6;
    min-height: 100vh; /* Asegura que el contenido principal ocupe toda la altura */
    width: calc(100% - 250px); /* Ajusta el ancho del contenido principal */
    overflow-y: auto;
    padding-top: 20px;
    box-sizing: border-box;
    /* background-image: url('img/fondo.jpg'); */
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 768px) {
    .sidebar {
        width: 200px;
    }

    .main-content {
        margin-left: 200px;
        width: calc(100% - 200px);
    }

    .main-content-bolsa-empleo {
      margin-left: 5px;
      width: calc(100% - 200px);
  }
}

/* Ajuste de margen para las opciones de jsTree */
#jstree .jstree-children {
    margin-left: 0 !important; /* Elimina el margen para cada nivel */
}

#jstree .jstree-node {
    padding-left: 5px; /* Añade un pequeño margen a la izquierda para que no quede pegado */
}

/**************/
/* CANDIDATOS */
/**************/

/* Contenedor de la tabla */
.table-container {
    margin: 20px 0;
    position: relative;
    overflow-x: hidden; /* Evita el desbordamiento y el scroll horizontal */
    /* overflow-y: auto; */ /* Comentado para eliminar el scroll vertical de la caja */
    /* max-height: 75vh; */ /* Comentado para que la tabla ocupe todo el alto necesario */
}

/* Estilo base de la tabla */
.candidates-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    background-color: #fff;
    border: 1px solid #ccc;
    table-layout: fixed; /* Clave para forzar el ajuste del contenido */
    word-wrap: break-word; /* Permite que las palabras largas se rompan */
}

/* Cabecera de la tabla */
.candidates-table thead th {
    background-color: #8EBCD9; /* Color en línea con el estilo de la página */
    color: #fff;
    font-weight: bold;
    padding: 5px;
    border: 1px solid #ccc;
    text-align: left;
}

/* Estilos para las filas */
.candidates-table tbody td {
    padding: 5px;
    border: 1px solid #ccc;
    color: #555;
    text-align: left;
}

/* Filas alternas con color de fondo */
.candidates-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.candidates-table tbody tr:nth-child(odd) {
    background-color: #fff;
}

/* Efecto hover en cada fila */
.candidates-table tbody tr:hover {
    background-color: #dce6f2;
    cursor: pointer;
}

/* Estilo de los iconos de acciones */
.candidates-table .actions {
    width: 45px; /* Ancho fijo y reducido para las columnas de acciones */
    text-align: center; /* Centra el contenido (el icono) */
    vertical-align:middle;
    border:0;
}

.candidates-table .actions i {
    color: #4a90e2; /*#8EBCD9;*/
    font-size: 1.5em;
    cursor: pointer;
    transition: color 0.3s;
    vertical-align: middle;
}

.candidates-table .actions i:hover {
    color: #357abd; /*#0056b3;*/
    vertical-align: middle;
}

/* Estilo para la celda de iconos de tareas en la tabla de clientes */
.candidates-table .task-icons-cell {
    text-align: left;
    vertical-align: middle;
}

.candidates-table .task-icons-cell i {
    margin-right: 8px; /* Espacio entre iconos */
    color: #555; /* Un color neutro para los iconos */
}

.candidates-table .actions-bot i {
    color: #CE0717;
    font-size: 1.5em;
    cursor: pointer;
    transition: color 0.3s;
    vertical-align: middle;
}

/* Estilo base de la tabla */
.historic-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    background-color: #fff;
    border: 1px solid #ccc;
}

/* Cabecera de la tabla */
.historic-table thead th {
    background-color: #8EBCD9; /* Color en línea con el estilo de la página */
    color: #fff;
    font-weight: bold;
    padding: 5px;
    border: 1px solid #ccc;
    text-align: left;
}

/* Estilos para las filas */
.historic-table tbody td {
    padding: 5px;
    border: 1px solid #ccc;
    color: #555;
    text-align: left;
    vertical-align: middle;
}

/* Filas alternas con color de fondo */
.historic-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.historic-table tbody tr:nth-child(odd) {
    background-color: #fff;
}

/* Efecto hover en cada fila */
.historic-table tbody tr:hover {
    background-color: #dce6f2;
    cursor: pointer;
}

/* Estilo de los iconos de acciones */
.historic-table .actions {
    display: flex;
    gap: 10px;
    vertical-align: middle;
    border:0;
}

.historic-table .actions i {
    color: #4a90e2; /*#d76785;*/
    font-size: 1.5em;
    cursor: pointer;
    transition: color 0.3s;
    vertical-align: middle;
}

.historic-table .actions i:hover {
    color: #357abd; /*#0056b3;*/
    vertical-align: middle;
}

.historic-table .actions-bot i {
    color: #CE0717;
    font-size: 1.5em;
    cursor: pointer;
    transition: color 0.3s;
    vertical-align: middle;
}

.historic-table .actions-bot i:hover {
    color: #0056b3;
    vertical-align: middle;
}

/* Estilo específico para el icono de eliminar en las acciones de tabla */
.candidates-table .actions a[title="Eliminar"] i.fa-trash-alt,
.historic-table .actions a[title="Eliminar"] i.fa-trash-alt {
    color: #dc3545; /* Rojo estándar para "peligro" */
}

.candidates-table .actions a[title="Eliminar"] i.fa-trash-alt:hover,
.historic-table .actions a[title="Eliminar"] i.fa-trash-alt:hover {
    color: #c82333; /* Tono más oscuro para hover */
}

/* Paginación en la parte inferior */
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 0.9em;
    background-color: #f0f4f8; /* Color de fondo distintivo */
    color: #333;
}

.pagination a {
    color: #4A90E2;
    text-decoration: none;
    font-weight: bold;
}

.pagination a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Responsividad para dispositivos pequeños */
@media (max-width: 600px) {
    .candidates-table thead {
        display: none;
    }

    .candidates-table tbody td {
        display: flex;
        flex-direction: column;
        padding: 10px;
    }

    .candidates-table tbody td:before {
        content: attr(data-label);
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
    }

    .candidates-table .actions {
        justify-content: center;
    }
}

/********/
/* MENÚ */
/********/

/* Color de fondo y texto para la opción seleccionada en jsTree */
#jstree .jstree-clicked {
    /*background-color: #E0B929;*/ /* Cambia este color al que prefieras */
    background-color: #E0B929; /* Cambia este color al que prefieras */
    color: #fff; /* Cambia el color del texto si es necesario */
}

#jstree .jstree-clicked:hover {
    background-color: #357ABD; /* Color cuando pasas el ratón sobre la opción seleccionada */
    color: #fff;
}

/* Resaltar al pasar el ratón por encima de una opción no seleccionada */
#jstree .jstree-anchor:hover {
    background-color: #357ABD; /* Cambia este color al que prefieras */
    color: #fff; /* Cambia el color del texto si es necesario */
}

/***************/
/* FORMULARIOS */
/***************/

/* Contenedor de formulario */
.form-container {
    /*max-width: 500px;*/
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #e8f2ff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: visible;
    position: relative;
}

/* Título */
.form-container h2 {
    text-align: center;
    color: #333;
    font-size: 1.5em;
    margin-bottom: 20px;
}

.form-container h1 {
    color: #d76785;
}

.form-container button {
  width: 100%;
  padding: 0.75rem;
  background-color: #4a90e2;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.form-container button:hover {
  background-color: #357abd;
}

.form-container .cancelar {
  width: 100%;
  padding: 0.75rem;
  background-color: #aaaaaa;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.form-container .cancelar:hover {
  background-color: #888888;
}

.form-group .GUARDAR {
  width: 50%;
  padding: 0.75rem;
  background-color: #4a90e2;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.form-group .GUARDAR:hover {
  background-color: #357abd;
}

.form-group .CANCELAR {
  width: 50%;
  padding: 0.75rem;
  background-color: #aaaaaa;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.form-group .CANCELAR:hover {
  background-color: #888888;
}

.form-group .ELIMINAR {
  width: 50%;
  padding: 0.75rem;
  background-color: #ff4444;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.form-group .ELIMINAR:hover {
  background-color: #ff0000;
}

.form-container-sn {
    /*max-width: 500px;*/
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f0d9da;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: visible;
    position: relative;
}

.form-container-historico {
    /*max-width: 500px;*/
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9ecec;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: visible;
    position: relative;
}

.form-container-historico h1 {
    color: #d76785;
}

/* Título */
.form-container-sn h2 {
    text-align: center;
    color: #333;
    font-size: 1.5em;
    margin-bottom: 20px;
}

.form-container-sn h1 {
    color: #d76785;
}

.form-container-sn button {
  width: 100%;
  padding: 0.75rem;
  background-color: #4a90e2;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.form-container-sn button:hover {
  background-color: #357abd;
}

.form-container-sn .cancelar {
  width: 100%;
  padding: 0.75rem;
  background-color: #aaaaaa;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.form-container-sn .cancelar:hover {
  background-color: #888888;
}

/* Grupos de formulario */
.form-group {
    margin-bottom: 15px;
    overflow: visible; /* Elimina cualquier contenido desbordado */
}

.form-group label {
    display: block;
    font-weight: bold;
    color: #666;
    margin-bottom: 5px;
}

/* Campos de texto y fecha */
.form-group input[type="text"],
.form-group input[type="date"] {
    width: 100%;
    padding: 8px;
    font-size: 1em;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Lista desplegable */
.form-group select {
    width: 100%;
    padding: 8px;
    font-size: 1em;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #f9f9f9;
}

/* Checkbox y Radio Button Groups */
.checkbox-group, .radio-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.checkbox-group label, .radio-group label {
    display: flex;
    align-items: center;
    font-weight: normal;
    color: #555;
}

/* Checkbox y Radio Buttons */
.checkbox-group input[type="checkbox"],
.radio-group input[type="radio"] {
    margin-right: 8px;
}

/* Efectos Hover y Focus */
.form-group input[type="text"]:focus,
.form-group input[type="date"]:focus,
.form-group select:focus {
    border-color: #4A90E2;
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.3);
    outline: none;
}

/* Efectos de checkbox y radio al pasar el ratón */
.checkbox-group label:hover, .radio-group label:hover {
    background-color: #f0f4f8;
    cursor: pointer;
    border-radius: 4px;
}

/* Estructura de cada fila con Flexbox */
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

/* Asegura que los elementos ocupen el mismo espacio */
.form-group {
    flex: 1;
}

.form-group.doble {
    flex: 2;
}

/* Adaptación para pantallas pequeñas */
@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
    }
}

.form-group        textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            box-sizing: border-box;
        }
.form-group        textarea {
            resize: vertical;
            min-height: 80px;
        }

/***********************/
/* ERROR EN FORMULARIO */
/***********************/

.error-summary {
    color: #d9534f;
    font-size: 1em;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #d9534f;
    background-color: #f2dede;
}

/***********************/
/* EXPERIENCIA LABORAL */
/***********************/

table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
}
th {
    background-color: #8EBCD9;
    color: #FFFFFF;
}
.sector {
    text-align: left;
    vertical-align: top;
}

/**********************/
/* CABECERA CANDIDATO */
/**********************/

.tabla-cabecera-candidato table {
  border-collapse: collapse;
  border:none;
}

.tabla-cabecera-candidato-izquierda {
  padding: 5px;
  border: 1px solid #ccc;
  text-align: left;
  border: none;
  vertical-align: top;
}

.tabla-cabecera-candidato-derecha {
    padding: 5px;
    border: 1px solid #ccc;
    text-align: right;
    border: none;
    vertical-align: top;
}

.tabla-cabecera-candidato .tabla-cabecera-candidato-derecha i {
    color: #4a90e2; /*#8EBCD9;*/
    font-size: 2em;
    cursor: pointer;
    transition: color 0.3s;
    vertical-align: middle;
}

.tabla-cabecera-candidato .tabla-cabecera-candidato-derecha i:hover {
  color: #357abd;
}

.tabla-cabecera-candidato .tabla-cabecera-candidato-izquierda i {
  color: #4a90e2; /*#8EBCD9;*/
  font-size: 2em;
  cursor: pointer;
  transition: color 0.3s;
  vertical-align: middle;
}

.tabla-cabecera-candidato .tabla-cabecera-candidato-izquierda i:hover {
color: #357abd;
}

/**********************/
/* CABECERA HISTÓRICO */
/**********************/

.tabla-cabecera-historico table {
  border-collapse: collapse;
  border:none;
  color:#D76785;
  display:flex;
  align-items: center;
}

.tabla-cabecera-historico-izquierda {
    padding: 5px;
    border: 1px solid #ccc;
    text-align: left;
    border: none;
    display:flex;
    align-items: center;
}

.tabla-cabecera-historico-derecha {
    padding: 5px;
    border: 1px solid #ccc;
    text-align: right;
    border: none;
    vertical-align: top;
}

.tabla-cabecera-historico .tabla-cabecera-historico-izquierda i {
    color: #D76785;
    font-size: 2.5em;
    cursor: pointer;
    transition: color 0.3s;
    vertical-align: middle;
}

.tabla-cabecera-historico-izquierda h1 {
    margin: 0; /* Elimina los márgenes predeterminados de <h1> */
    font-size: 2.5rem; /* Ajusta el tamaño del texto según sea necesario */
    color: #D76785;
}

/*************/
/* ETIQUETAS */
/*************/

#existing-tags span.tag {
    display: inline-block;
    padding: 5px 10px;
    margin: 5px;
    border-radius: 5px;
    color: white;
    font-weight: bold;
}

.tag button {
    margin-left: 5px;
    background: none;
    border: none;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.tag button:hover {
    color: #ffdddd;
}

/***********************/
/* INICIALES DE PERFIL */
/***********************/

.profile-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px; /* Tamaño del círculo */
    height: 50px;
    border-radius: 50%; /* Hace el div circular */
    /* background-color: #777777; /* Color de fondo (puedes personalizarlo) */
    color: #fff; /* Color del texto */
    font-size: 20px; /* Tamaño de las iniciales */
    font-weight: bold;
    text-transform: uppercase; /* Asegura que siempre esté en mayúsculas */
}

/* Elimina el color y subrayado del enlace */
.profile-circle a {
    color: inherit; /* Usa el color del contenedor */
    text-decoration: none;
}

.profile-circle a:visited,
.profile-circle a:hover,
.profile-circle a:active {
    color: inherit; /* Mantiene el color al hacer clic o al pasar el ratón */
    text-decoration: none; /* Evita el subrayado */
}

.profile-circle-tabla {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; /* Tamaño del círculo */
    height: 30px;*/
    border-radius: 50%; /* Hace el div circular */
    /* background-color: #777777; /* Color de fondo (puedes personalizarlo) */
    color: #fff; /* Color del texto */
    font-size: 1.1em; /*15px; /* Tamaño de las iniciales */
    font-weight: bold;
    text-transform: uppercase; /* Asegura que siempre esté en mayúsculas */
}

/****************/
/* AUTOCOMPLETE */
/****************/

/* Estilos para el autocompletado */
.autocomplete-input {
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

.autocomplete-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 25%;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  z-index: 10;
  box-sizing: border-box; /* Incluye padding y border en el ancho total */
  overflow-x: hidden; /* Evita el scroll horizontal */
}

.autocomplete-list li {
  padding: 10px;
  cursor: pointer;
}

.autocomplete-list li:hover {
  background-color: #f0f0f0;
}

/***************************/
/* PUNTUACIONES ENTREVISTA */
/***************************/

.puntuacion {
  width: 100%;
  border-collapse: collapse;
}

.puntuacion-baja {
  color: red;
  font-weight: bold;
}

.puntuacion-alta {
  color: green;
  font-weight: bold;
}

.custom-radio-group {
  display: flex; /* Asegura que los botones estén en línea */
  gap: 10px; /* Espacio entre los botones */
  align-items: center; /* Alinea los elementos verticalmente */
}

.custom-radio {
  display: inline-flex; /* Permite que los botones estén en la misma línea */
  align-items: center;
  cursor: pointer;
}

.custom-radio input {
  display: none; /* Ocultamos el radio button original */
}

.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid gray;
  transition: background 0.3s ease-in-out;
}

/* Colores según la opción seleccionada */
.custom-radio input[value="1"]:checked + .circle { background: red; border-color: red; }
.custom-radio input[value="2"]:checked + .circle { background: orange; border-color: orange; }
.custom-radio input[value="3"]:checked + .circle { background: rgb(238, 238, 0); border-color: rgb(238, 238, 0); }
.custom-radio input[value="4"]:checked + .circle { background: lightgreen; border-color: lightgreen; }
.custom-radio input[value="5"]:checked + .circle { background: green; border-color: green; }

/* Asegura que los labels y números estén alineados en una sola línea */
.puntuacion td {
  padding: 5px;
  text-align: left;
  white-space: nowrap; /* Evita saltos de línea */
}

.puntuacion-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px; /* Espaciado entre secciones */
  padding: 10px;
}

.seccion {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.seccion h3 {
  color: #b30059; /* Cambia este código de color por el que prefieras */
  font-weight: bold;
  text-align: center; /* Opcional, para centrar el título */
}

.rojo {
  color: red;
  font-weight: bold;
}

.naranja {
  color: orange;
  font-weight: bold;
}

.amarillo {
  color: #e6b800; /* Amarillo oscuro */
  font-weight: bold;
}

.verde-claro {
  color: #66cc66; /* Verde claro */
  font-weight: bold;
}

.verde {
  color: green;
  font-weight: bold;
}

/********************************/
/* BOTONES Y ENLACES PARA ALTAS */
/********************************/

.btn-entrevista {
  display: inline-flex; /* Alinea icono y texto en la misma línea */
  align-items: center;  /* Centra verticalmente */
  text-decoration: none; /* Quita el subrayado */
  font-size: 16px; /* Tamaño del texto */
  font-weight: bold; /* Hace el texto más visible */
  color: #48ca67; /* Tono verde para "añadir" */
  padding: 8px 12px; /* Espaciado interno */
  border-radius: 5px; /* Bordes redondeados */
  transition: background 0.3s ease, color 0.3s ease; /* Animación suave */
}

.btn-entrevista:hover {
  background: #419b54; /* Verde más oscuro al pasar el ratón */
  color: white; /* Color del texto al pasar el mouse */
}

/* Hacemos la regla más específica para que tenga prioridad sobre otras reglas de color de icono */
.tabla-cabecera-candidato-izquierda .btn-entrevista i {
  margin-right: 8px; /* Espacio entre el icono y el texto */
  font-size: 24px; /* Tamaño del icono */
  color: #48ca67; /* Tono verde para "añadir" */
}

/**************************/
/* SUGERENCIAS personaS */
/**************************/

#contenedor-buscador {
  position: relative;
  max-width: 300px;
  z-index: 1; /* para asegurar que se posiciona correctamente */
}

#buscador-personas {
  width: 100%;
  box-sizing: border-box;
}

#sugerencias-personas {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: white;
  border: 1px solid #ccc;
  border-top: none;
  z-index: 10000; /* asegúrate de que está por encima de todo */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: none;
  max-height: 200px;
  overflow-y: auto;
}

#buscador-clientes {
  width: 100%;
  box-sizing: border-box;
}

#sugerencias-clientes {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: white;
  border: 1px solid #ccc;
  border-top: none;
  z-index: 10000; /* asegúrate de que está por encima de todo */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: none;
  max-height: 200px;
  overflow-y: auto;
}

#buscador-contactos {
  width: 100%;
  box-sizing: border-box;
}

#sugerencias-contactos {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: white;
  border: 1px solid #ccc;
  border-top: none;
  z-index: 10000; /* asegúrate de que está por encima de todo */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: none;
  max-height: 200px;
  overflow-y: auto;
}

.sugerencia-item {
  padding: 8px 12px;
  cursor: pointer;
}

.sugerencia-item:hover {
  background-color: #f0f0f0;
}

/*******************/
/* BOLSA DE EMPLEO */
/*******************/

/* Contenedor del contenido principal */
.main-content-bolsa-empleo {
  margin-left: 5px; /* Se alinea justo a la derecha del menú lateral */
  padding: 1.5rem;
  background-color: #f3f4f6;
  min-height: 100vh; /* Asegura que el contenido principal ocupe toda la altura */
  width: calc(100% - 5px); /* Ajusta el ancho del contenido principal */
  overflow-y: auto;
  padding-top: 20px;
  box-sizing: border-box;
  /* background-image: url('img/fondo.jpg'); */
}

/*************************************/
/* OPERACIÓN REALIZADA CORRECTAMENTE */
/*************************************/

.contenedor-central {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centrado vertical */
  align-items: center;     /* Centrado horizontal */
  height: 100vh;           /* Toma toda la altura de la pantalla */
  text-align: center;
}

.mensaje-operacion-correcta {
  font-family: Arial, sans-serif;
  color: #8DBCD9;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1rem;
}

.icono-operacion-correcta {
  color: #D76785;
  font-size: 2rem;
  text-align: center;
  display: block;
}

/******************/
/* INFORMACIÓN DE */
/******************/

.informacion-de {
	display: flex;
	align-items: center; /* Centra verticalmente */
	gap: 10px; /* Espacio entre el icono y el texto */
}

.informacion-de i {
	font-size: 2em; /* Tamaño más grande */
	color: #D76785; /* Cambia este color a tu gusto */
}

/* Anulación específica para los iconos dentro de .informacion-de que estén en cabeceras de tabla */
.tabla-cabecera-candidato-izquierda .informacion-de i {
    color: #D76785; /* Forzar el color rosa */
    cursor: default; /* Evitar que el cursor cambie a puntero */
}

.tabla-cabecera-candidato-izquierda .informacion-de i:hover {
    color: #D76785; /* Asegurar que el color no cambie al pasar el ratón */
}

/* Estilo para iconos de acción de añadir (ej. nuevo contacto en ficha cliente) */
/* Hacemos la regla más específica para que tenga prioridad sobre la azul genérica */
.tabla-cabecera-candidato-derecha .icono-accion-anadir i {
    color: #48ca67; /* Tono verde para "añadir" */
    transition: color 0.3s;
}

.tabla-cabecera-candidato-derecha .icono-accion-anadir i:hover {
    color: #419b54; /* Verde más oscuro al pasar el ratón */
}


/*********/
/* INDEX */
/*********/

.main-wrapper {
  display: flex;
  height: 100vh;
}

.left-panel {
  width: 350px; /* o lo que necesites */
  background-color: #f0f0f0; /* opcional */
  display: flex;
  align-items: center;
  justify-content: center;
}

.right-panel {
  width: 60%;
  background-color: #f2f4f6; /* o un color de fondo o imagen */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/********************/
/* BOTONES DE TEXTO */
/********************/


  .btn-link {
    display: inline-block;
    padding: 6px 12px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    color: white;
    margin-right: 8px;
    font-family: sans-serif;
  }

  .btn-link.azul {
    background-color: #8EBCD9; /* azul */
  }

  .btn-link.rojo {
    background-color: #D76785; /* rojo */
  }

  .btn-link:visited {
    color: white;
  }

  .btn-link:hover {
    opacity: 0.85;
  }

  /********/
  /* MENÚ */
  /********/

  #jstree ul li.separador {
    border-top: 1px solid #EEE; /* Puedes ajustar el color (#ccc), el grosor (1px) y el estilo (solid) */
    padding-top: 5px; /* Opcional: añade un poco de espacio entre la línea y el texto */
    margin-top: 5px; /* Opcional: añade un poco de espacio entre la línea y el elemento anterior */
  }

  #jstree .jstree-anchor {
      padding-left: 0px; /* Ajusta el margen izquierdo general del texto del menú */
  }

  #jstree .jstree-level-0 > ul > li > .jstree-anchor {
      padding-left: 0px; /* Reduce el margen izquierdo para los elementos de nivel superior (CRM, RRHH) */
      font-weight: bold; /* Opcional: hacer los títulos más destacados */
  }

  #jstree .jstree-level-1 > ul > li > .jstree-anchor {
      padding-left: 0px; /* Aumenta la indentación para los elementos del segundo nivel */
  }

  /* Opcional: Ajustar el margen del icono si estás usando */
  #jstree .jstree-icon {
      margin-right: 5px; /* Ajusta el espacio entre el icono y el texto */
  }

  #jstree .jstree-level-0 > ul > li > a > .jstree-icon {
    display: none !important;
  }

#jstree .jstree-ocl {
    display: none !important;
}

/************/
/* GRÁFICOS */
/************/

.dashboard-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

.dashboard-card {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  flex: 1 1 300px; /* Mínimo 300px, se expande si hay espacio */
  box-sizing: border-box;
}

/* Si quieres forzar que una tarjeta no crezca demasiado */
.fixed-card {
  max-width: 400px;
}

/**************/
/* PAGINACIÓN */
/**************/

.pagination {
    margin-top: 20px; /* Espacio arriba de la paginación */
    text-align: center; /* Centra los elementos si prefieres */
}

.pagination a,
.pagination span {
    display: inline-block; /* Para que se comporten como bloques pero en línea */
    padding: 6px 30px;   /* Aumentado padding horizontal para más ancho */
    margin-right: 2px;   /* Espacio reducido a la derecha de cada elemento */
    margin-bottom: 4px;  /* Espacio abajo por si se envuelven en múltiples líneas */
    border: 1px solid #ddd;
    color: #007bff;      /* Color del texto, puedes cambiarlo */
    text-decoration: none;
    border-radius: 4px;  /* Bordes redondeados */
    line-height: 1.5;    /* Altura de línea para mejor espaciado vertical del texto interno */
}

.pagination a:hover {
    background-color: #f0f0f0; /* Color de fondo al pasar el ratón */
    border-color: #ccc;
}

.pagination .current-page {
    background-color: #007bff; /* Color de fondo para la página actual */
    color: white;              /* Color del texto para la página actual */
    border-color: #007bff;     /* Color del borde para la página actual */
    font-weight: bold;
}

/* Estilo para los spans que son "..." o Anterior/Siguiente deshabilitados (si los hubiera como span) */
/* Aseguramos que no se aplique al span de información de página */
.pagination span:not(.current-page):not(.pagination-info) {
    color: #777;
    /* background-color: #f8f9fa; */ /* Opcional: un fondo ligeramente diferente */
    /* border-color: #ddd; */
    /* Heredan padding, border, etc. de '.pagination span'. Si quieres que los "..." no parezcan un botón, puedes anular estilos aquí: */
    /* Ejemplo para "..." sin estilo de botón: */
    /* border: none; background-color: transparent; padding-left: 2px; padding-right: 2px; */
}

/* Para el texto de "Página X de Y (Z registros)" */
.pagination .pagination-info { /* Usamos la nueva clase */
    display: block; /* Para que ocupe su propia línea */
    width: 100%; /* Para que el text-align:center del contenedor lo centre bien */
    margin-top: 10px; /* Espacio sobre este texto */
    font-size: 0.9em;
    color: #777;
    /* Reseteamos estilos que podría heredar de .pagination span si fuera necesario */
    border: none;
    padding: 0;
    background-color: transparent; /* Asegurar que no tenga fondo de botón */
    line-height: normal; /* Resetear line-height si es necesario */
    text-align: center; /* Centra el texto dentro de este span */
}

/* Asegúrate de que esta ruta de archivo sea correcta si editas styles.css directamente */
/* c:\dev\equipo\app\styles.css */

.form-container .form-group input[type="text"],
.form-container .form-group input[type="date"], /* si usas campos de fecha */
.form-container .form-group input[type="email"], /* si usas campos de email */
.form-container .form-group input[type="number"], /* ¡Añadido para consistencia! */
.form-container .form-group select,
.form-container .form-group textarea {
    width: 100%; /* o el ancho que estés usando */
    padding: 10px; /* ajusta el padding para que coincida */
    border: 1px solid #ccc; /* ajusta el borde para que coincida */
    border-radius: 5px; /* ajusta el radio del borde si lo usas */
    box-sizing: border-box; /* muy importante para que el padding y borde no alteren el tamaño final */
    height: 40px; /* ¡Clave! Asegúrate de que esta altura coincida con los otros inputs */
    font-size: 1em; /* para que el tamaño de fuente sea consistente */
    /* Opcional: Ocultar los controles de flecha (spinners) en los campos numéricos */
    -moz-appearance: textfield; /* Para Firefox */
}

/* Opcional: Ocultar spinners en navegadores Webkit (Chrome, Safari, Edge) */
.form-container .form-group input[type="number"]::-webkit-outer-spin-button,
.form-container .form-group input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; /* Elimina cualquier margen que puedan tener los spinners */
}

/* Ajuste de altura para selectores múltiples para que no desentonen */
.form-container .form-group select[multiple] {
    height: auto; /* Permitir que crezca si es necesario */
    min-height: 150px; /* Una altura mínima razonable para ver varias opciones */
    padding: 5px; /* Un poco de padding interno */
}

/* Sidebar 
.sidebar {
  width: 250px;
  background-color: #4a90e2;
  color: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: width 0.3s;
}

.sidebar.collapsed {
  width: 60px;
}

.toggle-menu {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  padding: 1rem;
  cursor: pointer;
  text-align: left;
}

.menu ul {
  list-style-type: none;
  padding: 0;
}

.menu ul li {
  padding: 0.8rem 1.5rem;
}

.menu ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  display: block;
  transition: color 0.3s;
}

.menu ul li a:hover {
  color: #b3d1f2;
}

/* Submenu 
.submenu {
  display: none;
  padding-left: 1.5rem;
}

.submenu.open {
  display: block;
}

.sidebar.collapsed .submenu {
  display: none;
}

/* Content 
.content {
  flex: 1;
  padding: 1.5rem;
  background-color: #f3f4f6;
}

/* Responsividad 
@media (max-width: 768px) {
  .sidebar {
    position: absolute;
    z-index: 10;
    height: 100%;
    width: 250px;
    transform: translateX(-100%);
    transition: transform 0.3s;
  }

  .sidebar.collapsed {
    transform: translateX(0);
  }

  .content {
    margin-left: 0;
    padding-top: 3rem;
  }
}

/* Contenedor del menú 
#jstree {
    background-color: #4a90e2;
    color: #fff;
    padding: 1rem;
    height: 100vh;
    overflow-y: auto;
    width: 250px;
}

#jstree a {
    color: #fff;
    text-decoration: none;
}

#jstree a:hover {
    color: #b3d1f2;
}

/* Personalización del estilo de jsTree 
.jstree-default .jstree-node {
    font-size: 1rem;
    padding: 0.3rem 0;
}

.jstree-default .jstree-open > .jstree-ocl,
.jstree-default .jstree-closed > .jstree-ocl {
    background-position: center;
    background-size: 1rem;
}

.jstree-default .jstree-ocl {
    margin-right: 0.5rem;
}

/* Contenedor principal 
/* Aseguramos que el menú esté pegado al borde izquierdo 
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px; /* Ancho fijo para el menú 
    height: 100vh; /* Abarca toda la altura de la pantalla 
    background-color: #4a90e2;
    color: #fff;
    overflow-y: auto;
    padding-top: 1rem; /* Espacio superior 
    z-index: 1000; /* Asegura que el menú esté sobre el contenido principal 
}

/* Ajustamos el contenido principal para que no quede debajo del menú 
.main-content {
    margin-left: 250px; /* Alinea el contenido con el borde derecho del menú 
    padding: 1.5rem;
    background-color: #f3f4f6;
    min-height: 100vh; /* Asegura que el contenido llene el alto de la pantalla 
}