.datepickerGroup{
    max-width: 15%;
}

div#userTableContainer, div#contentTypesTable {
    border-collapse: collapse;
}

td, th {
    width: 200px; /* Ajusta este valor según el ancho que desees */
    height: 55px;
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
}

/* Si el texto es demasiado largo y ocupa más de una fila, lo cortamos */
td.multi-line {
    white-space: normal; /* Permite que el texto se divida en varias líneas */
    overflow: hidden; /* Oculta el texto fuera del área visible */
    display: -webkit-box; /* Necesario para el truncado de varias líneas */
    -webkit-line-clamp: 2; /* Limita el texto a 2 líneas */
    -webkit-box-orient: vertical; /* Orientación vertical para el truncado */
}

.card{
    min-height: 125px;
    max-width: 200px;
    border-radius: 10px;
}

.card-text{
    margin-top: 20px;
}

.tituloDiaSemana{
    margin-bottom: 0;
}

#filaDiaSemana{
    gap: 50px;
}

/* Estilo para la tabla en general */
table {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    margin: 1rem 0;
}

/* Estilo de las celdas */
th, td {
    padding: 10px;
    text-align: left;
    font-size: 14px;
    border-bottom: 1px solid #ddd;
}

/* Estilo de los encabezados */
th {
    background-color: #505c4c;
    color: white;
}

/* Efecto hover para los encabezados de la tabla */
th.datepicker-switch:hover, th.prev:hover, th.next:hover, th.today:hover {
    background-color: #505c4c !important;
    color: white;
}

/* Filas alternadas para mejorar la legibilidad */
tr:nth-child(even) {
    background-color: #ecf0f1;
}

/* Estilo para las filas vacías (placeholders) */
tr.placeholder-row {
    background-color: #f9f9f9; /* Gris claro y más suave */
    color: transparent; /* Texto invisible */
    height: 1px; /* Altura mínima para evitar colapsar */
    border-bottom: none; /* Sin borde inferior */
    text-align: center; /* Alineación central */
}

/* Aseguramos que las celdas de las filas vacías se alineen igual que las celdas de las filas con datos */
tr.placeholder-row td {
    padding: 10px; /* Mismo padding que las demás filas */
    border: none; /* Eliminamos cualquier borde adicional */
}

/* Espacio invisible en las celdas vacías para mantener el tamaño */
tr.placeholder-row td::before {
    content: '\00a0'; /* Espacio invisible */
    display: inline-block;
    width: 100%;
    height: 100%;
}

/* Estilo para el select con el id filterAyuntamiento */
select {
    padding: 8px 30px 8px 10px; /* Espaciado interno, más espacio a la derecha para la flecha */
    font-size: 14px; /* Tamaño de fuente */
    border: 1px solid #7a8b73; /* Borde de un verde más claro que el color principal */
    border-radius: 5px; /* Bordes redondeados */
    background-color: #f4f8f4; /* Fondo de un verde muy claro para contrastar */
    color: #505c4c; /* Color de texto que se adapta al color base */
    cursor: pointer; /* Cursor en forma de mano para indicar que se puede seleccionar */
    transition: border-color 0.3s ease, background-color 0.3s ease; /* Transiciones suaves */
    position: relative; /* Necesario para posicionar la flecha */
}

/* Efecto al enfocar (focus) el select */
select:focus {
    border-color: #4d6656; /* Bordes de un verde más oscuro al enfocar */
    background-color: #dfe7df; /* Cambiar el fondo a un verde muy claro al enfocar */
    outline: none; /* Eliminar el borde de enfoque predeterminado del navegador */
}

/* Efecto al pasar el ratón (hover) sobre el select */
select:hover {
    border-color: #6c7b67; /* Borde más oscuro al pasar el ratón */
}

/* Estilo de la flecha del select (esconde la flecha por defecto) */
select::-ms-expand {
    display: none; /* Eliminar la flecha en Internet Explorer */
}

/* Agregar una flecha personalizada usando background-image */
select::after {
    content: ''; /* Necesario para mostrar el pseudo-elemento */
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #505c4c; /* Flecha verde que coincide con el color base */
}

/* Estilo de los elementos del select */
select option {
    padding: 10px;
    font-size: 14px;
    background-color: #fff;
    color: #505c4c; /* Color del texto de las opciones */
}

/* Fondo alterno para opciones */
select option:nth-child(even) {
    background-color: #f4f8f4; /* Fondo de las opciones alternas */
}

/* Opción seleccionada */
select option:checked {
    background-color: #505c4c; /* Fondo verde para opción seleccionada */
    color: white; /* Texto blanco en la opción seleccionada */
}

/* Estilo para el label con el id filterLabel */
#filterLabel {
    font-size: 16px; /* Tamaño de fuente ligeramente mayor que el del select */
    font-weight: 600; /* Un poco más de peso para hacerlo destacar, pero no tan fuerte */
    display: block;
    color: #505c4c; /* Color del texto del label, que es el mismo que el color base */
    margin-bottom: 8px; /* Espaciado por debajo del label, separándolo del select */
    transition: color 0.3s ease; /* Transición suave para el color */
}

/* Efecto al enfocar (focus) el select (estilo del label cuando el select está enfocado) */
select:focus ~ #filterLabel {
    color: #4d6656; /* Cambia el color del texto a un verde más oscuro al enfocar el select */
}

/* Estilo para el span que contiene el número */
#usuariosMostradosText, #usuariosActivosText, #usuariosRegistradosText {
    font-size: 30px; /* Un tamaño mayor para que destaque sobre el label */
    font-weight: 700; /* Usamos un peso de fuente más alto para resaltar */
    color: #4d6656; /* Un verde ligeramente más claro que el color base #505c4c para el texto */
    background-color: transparent; /* Sin fondo, solo el color del texto para no recargar el diseño */
    margin-left: 10px; /* Espacio entre el número y el label */
    display: inline-block; /* Mantener el número en la misma línea que el label */
    transition: color 0.3s ease; /* Transición suave para el color */
}

/* Estilo para el día seleccionado */
td.today, 
td.active {
background-image: none !important;
color: white !important;  /* Texto blanco */
}

td.today{
    background-color: #4a5a43 !important;
}

td.active{
    background-color: #8a9b7d !important;
    border-radius: 50%;  /* Opcional: redondea el día seleccionado */
}

/* Estilo base del botón */
a.infoButton {
    display: inline-block;
    padding: 6px 12px; /* Un poco más grande, para mejor legibilidad */
    background-color: #505c4c; /* Color de fondo */
    color: white; /* Color del texto */
    text-decoration: none; /* Quitar subrayado */
    border-radius: 4px; /* Bordes redondeados */
    text-align: center;
    font-size: 14px; /* Tamaño de fuente un poco mayor */
    font-weight: normal; /* Menos negrita */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Sombra suave */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Efectos de transición */
    margin-bottom: 6px;
    margin-top: 4px;
  }
  
  /* Cambio de color y rotación al pasar el ratón */
a.infoButton:hover {
    background-color: #3c4737; /* Un color más oscuro para el hover */
    color: white;
}
  
/* Estilo para el párrafo con clase .infoP */
.infoP {
    font-size: 16px; /* Tamaño de fuente adecuado para lectura */
    line-height: 1.6; /* Espaciado entre líneas para mejor legibilidad */
    color: #333; /* Color de texto oscuro para contraste */
    font-family: 'Arial', sans-serif; /* Tipografía limpia y moderna */
    padding: 0 10px; /* Un pequeño relleno lateral para evitar que el texto toque los bordes */
    background-color: #E4F1E1; /* Fondo suave para darle un toque moderno */
    border-left: 4px solid #505c4c; /* Línea decorativa en el lado izquierdo */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera para dar profundidad */
    margin-bottom: 20px;
    margin-top: 5px;
}

.infoP strong {
    font-weight: bold; /* Resalta el texto en negrita */
    color: #4C5B3F; /* Color ligeramente diferente para destacar */
}

.infoP em {
    font-style: italic; /* Estilo en cursiva para enfatizar */
    color: #888; /* Color más suave para el texto en cursiva */
}

/* Estilo para el párrafo con clase .infoAlert */
.infoAlert {
    font-size: 16px; /* Tamaño de fuente adecuado para lectura */
    line-height: 1.6; /* Espaciado entre líneas para mejor legibilidad */
    color: #333; /* Color de texto oscuro para contraste */
    font-family: 'Arial', sans-serif; /* Tipografía limpia y moderna */
    margin: 20px 0; /* Espaciado arriba y abajo del párrafo */
    padding: 10px 15px; /* Relleno para evitar que el texto toque los bordes */
    background-color: #FFF3E0; /* Fondo suave de color cálido */
    border-left: 4px solid #FF914D; /* Línea decorativa en el lado izquierdo (naranja cálido) */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera para dar profundidad */
    transition: background-color 0.3s ease; /* Efecto de transición para el cambio de color */
}
  
.infoAlert strong {
    font-weight: bold; /* Resalta el texto en negrita */
    color: #FF914D; /* Color ligeramente diferente para destacar */
}

.infoAlert em {
    font-style: italic; /* Estilo en cursiva para enfatizar */
    color: #888; /* Color más suave para el texto en cursiva */
}

.open {
    transform: rotate(180deg);
}

.closed{
    transform: rotate(360deg);
}

/* Contenedor de los controles de paginación */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem; /* Espacio entre botones */
    margin: 1rem 0;
}

/* Estilo base para los botones de paginación */
.pagination-btn {
    background-color: #505c4c; /* Color de fondo principal */
    color: #fff; /* Texto blanco */
    border: none;
    border-radius: 4px; /* Bordes redondeados */
    padding: 0.5rem 1rem; /* Espaciado interno */
    font-size: 1rem; /* Tamaño del texto */
    cursor: pointer;
    transition: all 0.3s ease; /* Transición suave */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* Efecto hover para los botones */
.pagination-btn:hover {
    background-color: #6b7960; /* Un tono más claro */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Más sombra al pasar el cursor */
    transform: translateY(-2px); /* Efecto de elevación */
}

/* Botón activo */
.pagination-btn.active {
    background-color: #3e4639; /* Un tono más oscuro */
    color: #d4d9cf; /* Color de texto contrastante */
    font-weight: bold; /* Negrita para destacar */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra hacia dentro */
}

/* Botones deshabilitados */
.pagination-btn:disabled {
    background-color: #c7c9c4; /* Gris claro */
    color: #6d7268; /* Gris más oscuro */
    box-shadow: none;
    transform: none;
}

#tablaContenidos, #userTable{
    table-layout: fixed;
    width: 100%; /* El ancho del contenedor */
}

/* Columnas de tablaContenidos */ 
#sortByTitle{
    width: 15%;
}

#sortByAuthor{
    width: 10%;
}

#sortByCategory{
    width: 15%;
}

#sortBySubcategory{
    width: 15%;
}

#sortByPublishDate{
    width: 15%
}

#sortByType{
    width: 10%;
}

#sortByValoration{
    width: 10%;
}

#sortByComments{
    width: 10%;
}

/* Columnas tabla usuarios */
#sortByUsername{
    width: 16%;
}

#sortByFullname{
    width: 16%;
}

#sortByJoinDate{
    width: 16%;
}

#sortByLastOnline{
    width: 16%;
}

#sortBySector{
    width: 16%;
}

#sortByAyuntamiento{
    width: 16%;
}

.clearfix:before, .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical>.btn-group:before, .btn-group-vertical>.btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after {
    content: initial !important;
}