) */
.table tbody tr {
color: #343a40; /* Gris Oscuro para el texto de las filas */
}
/* Efecto hover en las filas (clase Bootstrap: .table-hover) */
.table-hover tbody tr:hover {
background-color: #e9ecef; /* Gris Suave al pasar el ratón */
transition: background-color 0.2s ease-in-out; /* Transición suave para el efecto hover */
}
/* Celdas de la tabla (| ) */
.table tbody td {
padding: 0.85rem 0.75rem; /* Ajustar padding para más espacio vertical */
border-top: none; /* Como ya tienes .table-borderless, esto es redundante pero asegura */
vertical-align: middle; /* Alinea verticalmente el contenido de las celdas */
}
/* Estilos específicos para el botón de audio y el texto dentro de la celda */
.table .d-flex.align-items-center.gap-2 {
white-space: nowrap; /* Evita que el texto y el botón se dividan en líneas */
}
/* Botones de audio (btn-audio) */
.btn-audio {
background-color: #e9ecef; /* Gris Suave para el fondo del botón */
border-color: #e9ecef; /* Borde del mismo color */
color: #007bff; /* Azul de Interacción para el icono */
padding: 0.3rem 0.5rem; /* Ajustar padding para un botón pequeño */
font-size: 0.85rem; /* Tamaño de fuente para el icono */
border-radius: 4px; /* Bordes ligeramente redondeados */
display: flex; /* Para centrar el icono si es necesario */
align-items: center;
justify-content: center;
}
.btn-audio:hover {
background-color: #ced4da; /* Gris Neutro al pasar el ratón */
border-color: #ced4da;
color: #0056b3; /* Azul más oscuro al pasar el ratón */
}
.btn-audio:focus {
box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25); /* Sombra azul sutil al enfocar */
}
/* Estilo para el texto del verbo (span.text-nowrap) */
.table tbody td .text-nowrap {
font-weight: 500; /* Ligeramente más negrita para el texto del verbo */
}
/* Ajustes para la clase 'align-middle' en la tabla */
.table.align-middle > :not(caption) > * > * {
vertical-align: middle; /* Asegura la alineación vertical en todas las celdas */
}
/* Si quisieras una fila con "cebrado" (alternating colors), puedes añadir: */
/* .table tbody tr:nth-of-type(odd) {
background-color: #FDFDFD; /* Un blanco muy suave o incluso ligeramente diferente */
/* } */
/* Puedes añadir un margen superior a la tabla si el container no lo tiene */
.table.shadow-sm {
margin-top: 2rem; /* Ejemplo: 2rem de margen superior si no hay espacio antes */
}
/* custom.css */
/* --- Estilos para la Paginación --- */
/* Contenedor principal de la paginación */
.pagination {
/* Aquí podemos usar las variables CSS de Bootstrap 5 para una personalización más limpia */
--bs-pagination-color: #007bff; /* Azul de Interacción para el texto de los enlaces normales */
--bs-pagination-bg: #ffffff; /* Fondo blanco para los enlaces normales */
--bs-pagination-border-color: #ced4da; /* Gris Neutro para el borde de los enlaces normales */
--bs-pagination-hover-color: #0056b3; /* Azul más oscuro al pasar el ratón */
--bs-pagination-hover-bg: #e9ecef; /* Gris Suave al pasar el ratón */
--bs-pagination-hover-border-color: #ced4da; /* Borde al pasar el ratón */
--bs-pagination-focus-color: #0056b3; /* Color de texto al enfocar */
--bs-pagination-focus-bg: #e9ecef; /* Color de fondo al enfocar */
--bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25); /* Sombra azul al enfocar */
--bs-pagination-active-color: #343a40; /* Gris Oscuro para el texto del activo */
--bs-pagination-active-bg: #ffda44; /* Amarillo Principal para el fondo del activo */
--bs-pagination-active-border-color: #ffda44; /* Amarillo Principal para el borde del activo */
--bs-pagination-disabled-color: #adb5bd; /* Gris más claro para el texto deshabilitado */
--bs-pagination-disabled-bg: #ffffff; /* Fondo blanco para el deshabilitado */
--bs-pagination-disabled-border-color: #e9ecef; /* Gris Suave para el borde deshabilitado */
border-radius: 8px; /* Bordes ligeramente redondeados para la paginación completa */
overflow: hidden; /* Asegura que los bordes redondeados se apliquen bien */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Sombra sutil para la barra de paginación */
}
/* Ajustes adicionales si las variables no son suficientes o para navegadores antiguos */
.pagination .page-item .page-link {
/* General styles, mostly overridden by variables above, but good for fallback */
padding: 0.75rem 1rem; /* Aumentar el padding para un mejor toque */
min-width: 44px; /* Asegura un ancho mínimo para una mejor área de clic */
text-align: center; /* Centra el texto del número de página */
}
/* Eliminar el border-top-left-radius y border-bottom-left-radius del primer item */
.pagination .page-item:first-child .page-link {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
/* Eliminar el border-top-right-radius y border-bottom-right-radius del último item */
.pagination .page-item:last-child .page-link {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
/* custom.css */
/* --- Estilos para la Paginación --- */
/* ... tus estilos de paginación existentes ... */
.pagination .page-item .page-link {
/* ... otros estilos de page-link ... */
cursor: pointer; /* Asegura que el cursor sea un puntero de mano al pasar el ratón */
}
/* Para los elementos deshabilitados, es bueno que el cursor sea el predeterminado o "not-allowed" */
.pagination .page-item.disabled .page-link {
cursor: not-allowed; /* Indica que no se puede hacer clic */
}
/* custom.css */
/* --- Estilos para el Footer --- */
footer {
/* El border-top ya está en el HTML, pero podemos controlar su color aquí */
border-top: 1px solid #ced4da !important; /* Gris Neutro para el borde superior */
padding-top: 1.5rem; /* Ajustar padding superior */
padding-bottom: 1.5rem; /* Ajustar padding inferior */
}
footer .col-md-4.d-flex {
align-items: center; /* Asegura que el contenido esté centrado verticalmente */
}
/* Texto del copyright */
footer span.text-body-dark {
color: #343a40 !important; /* Gris Oscuro para el texto del copyright */
font-weight: 600; /* Un poco más de peso para el texto */
font-size: 0.95rem; /* Ajustar tamaño si es necesario */
}
/* Enlace dentro del copyright (Yorch Webs) */
footer span.text-body-dark a.text-dark {
color: #343a40 !important; /* Gris Oscuro para el enlace */
text-decoration: none; /* Quitamos el subrayado por defecto para controlar el hover */
font-weight: 700; /* Más negrita para el nombre */
transition:
color 0.2s ease-in-out,
text-decoration 0.2s ease-in-out; /* Transición suave */
}
footer span.text-body-dark a.text-dark:hover {
color: #007bff !important; /* Azul de Interacción al pasar el ratón */
text-decoration: underline !important; /* Subrayado al pasar el ratón */
}
/* Iconos de redes sociales */
footer .col-md-4.d-flex a i {
color: #343a40 !important; /* Gris Oscuro para los iconos */
font-size: 1.25rem; /* Tamaño de fuente para los iconos, ajusta si es necesario (fs-6 es 1rem) */
transition: color 0.2s ease-in-out; /* Transición suave para el cambio de color */
}
footer .col-md-4.d-flex a i:hover {
color: #007bff !important; /* Azul de Interacción al pasar el ratón */
}
/* Asegurar que el contenedor del footer no tenga un fondo blanco si el body tiene un gris claro */
/* Si el footer está directamente en el body, esto puede ser redundante. */
/* Si el footer tiene un fondo diferente en tu diseño, ajústalo aquí. */
footer {
background-color: #f8f9fa; /* Mismo color de fondo que el body para que se integre bien */
}
|