/* my/avant/css/style.css */
:root {
    /* Paleta con Navbar Teal y Fondos Suaves */
    --theme-bg-body: #F4F8F9;          /* Gris azulado muy, muy pálido para el fondo general */
    --theme-bg-section: #FFFFFF;        /* Blanco para las secciones principales (tabla clientes, informes) */
    --theme-bg-controls: #E9ECEF;       /* Gris claro para áreas de control (filtros, controles de informe) */

    --theme-text-dark: #2c3e50;         /* Azul pizarra oscuro profundo para texto principal */
    --theme-text-medium: #7f8c8d;       /* Gris pizarra medio para texto secundario */
    --theme-text-light: #95a5a6;        /* Gris pizarra claro */
    --theme-black: #000000 !important;             /* Negro puro */

    --theme-navbar-bg: #61bdb0;         /* Teal para la barra de navegación */
    --theme-navbar-text: #FFFFFF;       /* Texto blanco para la navbar */
    --theme-navbar-hover-bg: #52a397;   /* Teal más oscuro para hover en navbar */
    --theme-navbar-active-text: #FFFFFF; /* Texto blanco para enlace activo en navbar, con un fondo sutil */
    --theme-navbar-active-bg: rgba(0, 0, 0, 0.1); /* Fondo sutil para enlace activo */

    --theme-primary-purple: #8e67a5;    /* Morado principal para botones primarios */
    --theme-primary-purple-darker: #7a5293;
    --theme-secondary-teal-alt: #76D7C4; /* Un teal alternativo más claro para botones secundarios si es necesario */
    --theme-secondary-teal-alt-darker: #5FBCAC;

    --theme-border: #DDE2E6;             /* Borde gris claro */
    --theme-white: #FFFFFF;

    --theme-table-header-bg: #F8F9FA;
    --theme-table-footer-bg: #4A5568;   /* Gris pizarra oscuro */
    --theme-text-footer-contrast: black !important; /* Texto blanco para contraste por defecto */

    --theme-menu-hover-bg-dropdown: #f1f1f1; /* Gris muy claro para hover en dropdown */


    /* Colores para badges más tenues */
    --theme-badge-success-bg: #D1FAE5;
    --theme-badge-success-text: #065F46;
    --theme-badge-danger-bg: #FEE2E2;
    --theme-badge-danger-text: #991B1B;

    /* Colores de Bootstrap estándar para otros botones si se usan directamente */
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;

    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.4rem;
    --box-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06);
    --box-shadow-lifted: 0 4px 12px rgba(0, 0, 0, 0.09);
}

body {
    font-family: var(--font-secondary);
    background-color: var(--theme-bg-body);
    color: var(--theme-text-dark);
    line-height: 1.6;
    padding-bottom: 60px; /* Para que el footer fijo no oculte contenido */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--theme-text-dark);
    margin-top: 1.25rem;
    margin-bottom: 0.85rem;
    line-height: 1.3;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.65rem; }
h3 { font-size: 1.35rem; }
h3.report-main-title {
    font-size: 1.5em;
    color: var(--theme-text-dark);
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

.navbar {
    background-color: var(--theme-navbar-bg) !important;
    box-shadow: var(--box-shadow-soft);
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}
.navbar-logo {
    height: 34px;
    width: auto;
}
.navbar-brand {
    font-family: var(--font-primary);
    font-weight: 700;
    color: #026a6a !important;
    font-size: 1.3rem;
}
.navbar-brand span {
    vertical-align: middle;
}
.navbar-nav .nav-link {
    font-family: var(--font-primary);
    font-weight: 500;
    color: var(--theme-navbar-text) !important;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius-sm);
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--theme-navbar-text) !important;
    background-color: var(--theme-navbar-hover-bg);
}
.navbar-nav .nav-link.active {
    color: var(--theme-navbar-text) !important;
    font-weight: 700;
    background-color: var(--theme-navbar-active-bg);
}
.navbar-toggler {
    border-color: rgba(255,255,255,0.2);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-nav .dropdown-menu {
    background-color: var(--theme-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-lifted);
    border-color: var(--theme-border);
    margin-top: 0.25rem;
}
.navbar-nav .dropdown-item {
     font-family: var(--font-primary);
     font-weight: 500;
     color: var(--theme-black) !important;
}
.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
    background-color: var(--theme-menu-hover-bg-dropdown);
    color: var(--theme-black) !important;
}
 .navbar-nav .dropdown-item.active, .navbar-nav .dropdown-item:active {
    color: var(--theme-white) !important;
    background-color: var(--theme-primary-purple) !important;
    font-weight: 500;
}

/* CAMBIO 2: Se añaden #grupsSection y #facturacionSection para que tengan el mismo estilo que las otras secciones. */
#clientsSection,
#reportsSection,
#grupsSection,
#facturacionSection {
    background-color: var(--theme-bg-section);
    padding: 1.5rem;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--theme-border);
    box-shadow: var(--box-shadow-soft);
    margin-bottom: 1.5rem;
}

.btn {
    font-family: var(--font-primary);
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius-md);
    text-transform: none;
    letter-spacing: 0.3px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.07);
}

.btn-primary {
    background-color: var(--theme-primary-purple);
    border-color: var(--theme-primary-purple);
    color: var(--theme-white);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--theme-primary-purple-darker);
    border-color: var(--theme-primary-purple-darker);
    color: var(--theme-white);
}

.btn-success { /* Este btn-success es usado para "Añadir Pago" y era teal antes */
    background-color: var(--bs-green); /* Cambiado a un verde estándar de Bootstrap */
    border-color: var(--bs-green);
    color: var(--theme-white);
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
    background-color: #147543; /* Un verde más oscuro para hover */
    border-color: #136c3e;
    color: var(--theme-white);
}


.btn-info { /* Estilo para botones de información general, si se necesitan */
    background-color: var(--bs-cyan);
    border-color: var(--bs-cyan);
    color: var(--theme-white);
}
.btn-info:hover, .btn-info:focus, .btn-info:active {
    background-color: #0aaAd1;
    border-color: #0a9cb9;
    color: var(--theme-white);
}

.btn-warning {
    background-color: var(--bs-yellow);
    border-color: var(--bs-yellow);
    color: var(--theme-text-dark);
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
    background-color: #FFDA6A; /* Ligeramente más claro y saturado */
    border-color: #FFD45A;
    color: var(--theme-text-dark);
}

.btn-danger {
    background-color: var(--bs-red);
    border-color: var(--bs-red);
    color: var(--theme-white);
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    background-color: #C82333; /* Rojo más oscuro de Bootstrap */
    border-color: #BD2130;
    color: var(--theme-white);
}

.btn-outline-primary {
    color: var(--theme-primary-purple);
    border-color: var(--theme-primary-purple);
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
    background-color: var(--theme-primary-purple);
    color: var(--theme-white);
}
.btn-outline-secondary { /* Generalmente gris */
    color: var(--theme-text-medium);
    border-color: var(--theme-text-medium);
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active {
    background-color: var(--theme-text-medium);
    color: var(--theme-white);
}
.btn-outline-dark {
    color: var(--theme-text-dark);
    border-color: var(--theme-text-dark);
}
.btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark:active {
    background-color: var(--theme-text-dark);
    color: var(--theme-white);
}
.btn-outline-success {
    color: var(--bs-green);
    border-color: var(--bs-green);
}
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active {
    background-color: var(--bs-green);
    color: var(--theme-white);
}
.btn-outline-danger {
    color: var(--bs-red);
    border-color: var(--bs-red);
}
.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active {
    background-color: var(--bs-red);
    color: var(--theme-white);
}
.btn-outline-info {
    color: var(--bs-cyan);
    border-color: var(--bs-cyan);
}
.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active {
    background-color: var(--bs-cyan);
    color: var(--theme-white);
}


.btn-sm, .btn-group-sm > .btn {
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: .25rem;
}
.btn-xs { /* Clase personalizada para botones extra pequeños */
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
}

.table {
    border-collapse: collapse; /* Asegura que los bordes de las celdas se fusionen */
    margin-top: 1rem;
    box-shadow: none; /* Sin sombra para tablas por defecto */
    border-radius: 0; /* Sin bordes redondeados para tablas por defecto */
    overflow: visible; /* Evita problemas con sombras o elementos que sobresalen */
    color: var(--theme-text-dark); /* Color de texto por defecto para tablas */
}

.table th,
.table td {
    vertical-align: top; /* Alineación vertical por defecto para celdas */
    padding: 0.6rem 0.75rem; /* Padding ajustado para más compresión */
    border-top: 1px solid var(--theme-border); /* Borde superior para todas las celdas excepto la primera fila */
}
.table thead th {
    font-family: var(--font-primary);
    background-color: transparent; /* Fondo transparente para encabezados de tabla */
    color: var(--theme-text-dark); /* Color de texto oscuro para encabezados */
    font-weight: 600; /* Texto en negrita para encabezados */
    text-transform: none; /* Sin transformación de texto */
    letter-spacing: normal; /* Espaciado normal entre letras */
    border-top: none; /* Sin borde superior para encabezados */
    border-bottom: 2px solid var(--theme-border); /* Borde inferior más grueso para encabezados */
    vertical-align: bottom; /* Alineación vertical inferior para encabezados */
}
.table-hover tbody tr:hover {
    background-color: var(--theme-bg-controls); /* Un gris claro de fondo para hover */
    color: var(--theme-text-dark);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,.02); /* Color de fondo para filas impares en tablas rayadas */
}

.table tfoot tr.table-active,
.report-table-detailed tfoot tr.table-primary,
#viewClientModalBodyContent table tfoot tr.table-active {
    background-color: var(--theme-table-footer-bg) !important;
    /* color: var(--theme-text-footer-contrast) !important; El color se define más específicamente abajo */
    border-top: 2px solid var(--theme-border) !important;
}
.table tfoot tr.table-active th,
.table tfoot tr.table-active td,
.report-table-detailed tfoot tr.table-primary th,
.report-table-detailed tfoot tr.table-primary td,
#viewClientModalBodyContent table tfoot tr.table-active th,
#viewClientModalBodyContent table tfoot tr.table-active td {
    color: var(--theme-text-footer-contrast) !important; /* Usa la variable, pero puede ser sobreescrita */
    font-weight: bold;
}

/* Forzar texto negro en el pie de la tabla del modal Ver Cliente */
#viewClientModalBodyContent table tfoot tr.table-active th,
#viewClientModalBodyContent table tfoot tr.table-active td {
    color: var(--theme-black) !important;
}


.form-control, .form-select {
    border-radius: var(--border-radius-md);
    border: 1px solid var(--theme-border);
    padding: 0.45rem 0.85rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    background-color: var(--theme-white);
    color: var(--theme-text-dark);
}
.form-control:focus, .form-select:focus {
    border-color: var(--theme-primary-purple); /* Morado para foco */
    box-shadow: 0 0 0 0.25rem rgba(142, 103, 165, 0.25); /* Sombra morada para foco */
    background-color: var(--theme-white);
}

.form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--theme-text-dark);
}

.modal-content {
    border-radius: var(--border-radius-md);
    border: 1px solid var(--theme-border);
    box-shadow: var(--box-shadow-lifted);
    background-color: var(--theme-white);
}
.modal-header {
    background-color: #61bdb0; /* MODIFICADO: Color de fondo de cabecera de modal */
    color: var(--theme-white); /* MODIFICADO: Texto blanco para contraste */
    border-bottom: 1px solid var(--theme-border);
    padding: 1rem 1rem;
}
.modal-header .btn-close {
    filter: brightness(0) invert(1); /* Para que la X de cerrar sea blanca */
}
.modal-title {
    font-family: var(--font-primary);
    font-weight: 500;
    color: white; /* MODIFICADO: Color del texto del título del modal */
    font-size: 1.25rem;
}
.modal-body {
    padding: 1.5rem; /* Padding estándar, ajustado en #viewClientModal si es necesario */
    background-color: var(--theme-white);
    color: var(--theme-text-dark);
}
/* Ajustes específicos para el modal de Ver Cliente */
#viewClientModal .modal-body {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
#viewClientModal #viewClientDetails h4 {
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
}
#viewClientModal #viewClientDetails .row p.mb-1 { /* p dentro de las filas de datos personales */
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0.2rem !important; /* Aún más pequeño para máxima compresión */
    line-height: 1.4;
}
#viewClientModal #viewClientPagosSection h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
}

.modal-footer {
    padding: 0.75rem;
    background-color: var(--theme-bg-controls); /* Fondo gris claro para pie de modal */
    border-top: 1px solid var(--theme-border);
    display: flex;
    justify-content: flex-end; /* Alinea botones a la derecha */
}
.modal-footer > :not(:last-child) { /* Espacio entre botones en el footer */
    margin-right: 0.5rem;
}


.badge {
    font-family: var(--font-primary);
    font-weight: 600;
    padding: 0.4em 0.65em;
    border-radius: var(--border-radius-sm);
    font-size: .8em;
}
.badge.bg-success {
    background-color: var(--theme-badge-success-bg) !important;
    color: var(--theme-badge-success-text) !important;
}
.badge.bg-danger {
    background-color: var(--theme-badge-danger-bg) !important;
    color: var(--theme-badge-danger-text) !important;
}


.report-controls-area { /* Para la sección de controles de informes */
    background-color: var(--theme-bg-controls); /* Fondo gris claro */
    border: 1px solid var(--theme-border);
    border-radius: var(--border-radius-md);
}
.bg-light-custom { /* Clase auxiliar si necesitas un fondo gris claro específico */
    background-color: var(--theme-bg-controls) !important;
}

.report-render-area { /* Donde se muestra el contenido del informe */
    background-color: var(--theme-white);
    padding: 1.5rem;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--theme-border);
    box-shadow: none;
    margin-top: 1.5rem;
}

.report-header-logo img {
    max-height: 40px;
    margin-bottom: 1rem;
}
.client-details-section, .group-details-section {
    background-color: var(--theme-bg-controls);
    font-size: 0.9rem;
    padding: 1rem;
    border: 1px solid var(--theme-border);
    border-radius: var(--border-radius-md);
}
.client-details-section p, .group-details-section p {
    margin-bottom: 0.25rem;
}
.client-details-section h5, .group-details-section h5 {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    color: var(--theme-text-dark); /* Usar el color de texto oscuro principal */
}
.report-table-detailed { /* Para tablas detalladas en informes */
    font-size: 0.875rem;
}
.report-table-detailed th, .report-table-detailed td {
    padding: 0.4rem 0.5rem;
}

.fixed-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--theme-bg-controls); /* Fondo gris claro */
    color: var(--theme-text-medium);
    border-top: 1px solid var(--theme-border);
    text-align: center;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    z-index: 1030;
}
.main-content { /* Para añadir padding inferior y que el footer no tape */
    padding-bottom: 70px;
}

.sortable-header {
    cursor: pointer;
    position: relative;
    padding-right: 1.5em; /* Espacio para el ícono de ordenación */
}
.sortable-header .sort-icon {
    font-size: 0.9em;
    position: absolute;
    right: 0.3em;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-text-light);
    opacity: 0.6;
    transition: opacity 0.2s ease, color 0.2s ease;
}
.sortable-header:hover .sort-icon {
    opacity: 1;
    color: var(--theme-text-medium);
}
.sortable-header.sorted .sort-icon { /* Cuando la columna está ordenada */
    opacity: 1;
    color: var(--theme-primary-purple); /* Color primario para ícono ordenado */
}

.pagination .page-item .page-link {
    color: var(--theme-primary-purple);
    border-color: var(--theme-border);
    margin: 0 2px;
    border-radius: var(--border-radius-sm);
}
.pagination .page-item.active .page-link {
    background-color: var(--theme-primary-purple);
    border-color: var(--theme-primary-purple);
    color: var(--theme-white);
    z-index: 3; /* Para que esté por encima de otros elementos */
}
.pagination .page-item.disabled .page-link {
    color: var(--theme-text-light);
    border-color: var(--theme-border);
    background-color: var(--theme-bg-controls); /* Fondo gris claro para deshabilitado */
}
.pagination .page-item .page-link:hover {
    background-color: var(--theme-menu-hover-bg-dropdown); /* Fondo de hover de dropdown */
    border-color: var(--theme-border);
    color: var(--theme-primary-purple-darker); /* Morado más oscuro al pasar el ratón */
}
.pagination .page-item.active .page-link:hover {
    background-color: var(--theme-primary-purple-darker);
    border-color: var(--theme-primary-purple-darker);
}

@media print {
    /* Estilos generales de impresión (aplicables a informes en nueva pestaña) */
    @page {
        size: A4;
        margin: 10mm; /* Reducido para más espacio útil */
    }
    body:not(.printing-view-client-modal) {
        background-color: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 9pt !important; /* Tamaño base más pequeño para informes impresos */
        color: #000 !important;
        line-height: 1.3; /* Altura de línea ajustada para impresión */
    }
    .no-print,
    body:not(.printing-view-client-modal) .navbar,
    body:not(.printing-view-client-modal) .report-controls-area,
    body:not(.printing-view-client-modal) #clientsSection,
    .modal:not(#viewClientModal):not(.printing-active-modal), /* Modificado para permitir otros modales si tienen una clase específica */
    #searchClientInput, #addClientBtn,
    body:not(.printing-view-client-modal) h1,
    body:not(.printing-view-client-modal) h2#reportTitle,
    .fixed-footer, #paginationControls, #clientListControls {
        display: none !important;
    }

    /* --- ESTILOS ESPECÍFICOS PARA LA IMPRESIÓN DEL MODAL viewClientModal --- */
    body.printing-view-client-modal {
        font-size: 10pt !important; /* Tamaño base para la impresión de este modal */
        /* ANTES: margin: 15mm !important; */
        /* MODIFICADO: Reducir el margen superior de la página */
        margin-top: 5mm !important; /* Ajusta este valor para subir/bajar el contenido general */
        margin-left: 10mm !important; /* Márgenes laterales ajustados */
        margin-right: 10mm !important;
        margin-bottom: 10mm !important;
        background-color: #fff !important;
        color: #000 !important;
    }
    body.printing-view-client-modal .no-print,
    body.printing-view-client-modal .navbar,
    body.printing-view-client-modal .fixed-footer,
    body.printing-view-client-modal #clientsSection,
    body.printing-view-client-modal #reportsSection,
    body.printing-view-client-modal .modal-backdrop {
        display: none !important;
    }

    body.printing-view-client-modal #viewClientModal {
        position: static !important;
        overflow: visible !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        box-shadow: none !important;
        border: none !important;
    }
    body.printing-view-client-modal .modal-dialog {
        margin: 0 !important;
        max-width: none !important;
        width: 100% !important;
        box-shadow: none !important;
    }
    body.printing-view-client-modal .modal-content {
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background-color: var(--theme-white) !important;
    }

    /* Cabecera y Pie del modal no se imprimen */
    body.printing-view-client-modal .modal-header,
    body.printing-view-client-modal .modal-footer {
        display: none !important;
    }

    /* Título del modal "Detalls del Client: Nombre Apellidos" como encabezado del documento */
    body.printing-view-client-modal #viewClientModalLabel {
        display: block !important;
        text-align: center;
        font-size: 16pt !important; /* Tamaño del título principal */
        font-family: var(--font-primary) !important;
        font-weight: bold !important; /* Asegura negrita */
        color: #000000 !important;
        margin-top: 0 !important; /* Sin margen superior, el body ya tiene */
        margin-bottom: 8mm !important; /* Espacio después del título */
        padding: 0 !important; /* Sin padding extra */
    }

    /* Ocultar el ícono del título en la impresión si lo tiene */
    body.printing-view-client-modal #viewClientModalLabel .bi {
        display: none !important;
    }

    body.printing-view-client-modal #viewClientModalBodyContent {
        padding: 0 !important;
    }

    /* Títulos de sección "Dades Personals" y "Historial de Pagaments" */
    body.printing-view-client-modal #viewClientModalBodyContent h4 {
        font-family: var(--font-primary) !important;
        font-size: 12pt !important;
        margin-top: 5mm !important; /* Reducido el margen superior de los H4 */
        margin-bottom: 3mm !important; /* Reducido el margen inferior */
        color: #333333 !important;
        font-weight: 600 !important;
        border-bottom: 1px solid #cccccc;
        padding-bottom: 1.5mm;
    }
    /* El primer h4 ("Dades Personals") no necesita margen superior adicional después del título de página */
    body.printing-view-client-modal #viewClientModalBodyContent #viewClientDetails h4 {
        margin-top: 0 !important;
    }

    /* Estructura para los datos personales */
    body.printing-view-client-modal #viewClientDetails .row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-left: -5px;
        margin-right: -5px;
        margin-bottom: 0 !important;
    }
    body.printing-view-client-modal #viewClientDetails .row > div[class*="col-"] {
        padding-right: 5px;
        padding-left: 5px;
        width: 50% !important;
        box-sizing: border-box !important;
        margin-bottom: 1.5mm !important;
    }
     body.printing-view-client-modal #viewClientDetails .row > div.col-md-12 {
        width: 100% !important;
    }

    body.printing-view-client-modal #viewClientModalBodyContent p {
        font-family: var(--font-secondary) !important;
        font-size: 10pt !important;
        margin-bottom: 0 !important;
        line-height: 1.4 !important;
        color: #000 !important;
    }
    body.printing-view-client-modal #viewClientModalBodyContent p strong {
        font-weight: 600 !important;
        color: #000 !important;
    }

    /* Ajustes para la tabla de pagos en impresión */
    body.printing-view-client-modal #viewClientModalBodyContent table {
        font-size: 9pt !important;
        width: 100% !important;
        margin-top: 5mm !important;
        border-collapse: collapse !important;
    }
    body.printing-view-client-modal #viewClientModalBodyContent table th,
    body.printing-view-client-modal #viewClientModalBodyContent table td {
        padding: 1.5mm 2mm !important;
        border: 1px solid #999999 !important;
        text-align: left;
    }
    body.printing-view-client-modal #viewClientModalBodyContent table th.text-end,
    body.printing-view-client-modal #viewClientModalBodyContent table td.text-end {
        text-align: right !important;
    }

    body.printing-view-client-modal #viewClientModalBodyContent table thead th {
        background-color: #EAEAEA !important;
        font-weight: bold !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    body.printing-view-client-modal #viewClientModalBodyContent table tfoot tr.table-active,
    body.printing-view-client-modal #viewClientModalBodyContent table tfoot tr.table-active th,
    body.printing-view-client-modal #viewClientModalBodyContent table tfoot tr.table-active td {
        background-color: #DFDFDF !important;
        color: #000000 !important;
        font-weight: bold !important;
        font-size: 9.5pt !important;
        border-top: 2px solid #666666 !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }

    body.printing-view-client-modal script,
    body.printing-view-client-modal style {
        display: none !important;
    }

    /* Estilos de impresión generales para informes en nueva pestaña (si no es el modal Ver Cliente) */
    body:not(.printing-view-client-modal) #reportsSection,
    body:not(.printing-view-client-modal) #reportContent,
    body:not(.printing-view-client-modal) #reportContent * {
        visibility: visible !important;
        display: block !important;
    }
    body:not(.printing-view-client-modal) #reportsSection {
        box-shadow: none !important; margin: 0 !important; padding: 0 !important; border: none !important; width: 100% !important;
    }
    body:not(.printing-view-client-modal) #reportContent {
        width: 100% !important; margin: 0 auto !important; padding: 0 !important; border: none !important;
        box-shadow: none !important; font-size: 9pt; background-color: #fff !important;
    }
    body:not(.printing-view-client-modal) .report-header-logo img {
        display: block !important; max-height: 50px !important; margin-bottom: 15px !important; opacity: 1 !important;
    }
    body:not(.printing-view-client-modal) .table,
    body:not(.printing-view-client-modal) .table-bordered,
    body:not(.printing-view-client-modal) .report-table-detailed,
    body:not(.printing-view-client-modal) .report-table-cobros-mensuals,
    body:not(.printing-view-client-modal) .report-table-pagos-anuales-quotes {
        width: 100% !important; border: 1px solid #666 !important;
        font-size: 8.5pt !important;
        margin-top: 1rem !important;
        border-collapse: collapse !important;
    }
    body:not(.printing-view-client-modal) .table th,
    body:not(.printing-view-client-modal) .table td,
    body:not(.printing-view-client-modal) .report-table-detailed th,
    body:not(.printing-view-client-modal) .report-table-detailed td,
    body:not(.printing-view-client-modal) .report-table-cobros-mensuals th,
    body:not(.printing-view-client-modal) .report-table-cobros-mensuals td,
    body:not(.printing-view-client-modal) .report-table-pagos-anuales-quotes th,
    body:not(.printing-view-client-modal) .report-table-pagos-anuales-quotes td {
        border: 1px solid #999 !important; padding: 3px 5px !important;
        color: #000 !important; background-color: #fff !important;
    }
    body:not(.printing-view-client-modal) .table thead.table-light th,
    body:not(.printing-view-client-modal) .report-table-detailed thead.table-light th,
    body:not(.printing-view-client-modal) .report-table-cobros-mensuals thead th,
    body:not(.printing-view-client-modal) .report-table-pagos-anuales-quotes thead th {
        background-color: #EAEAEA !important; color: #000 !important;
        font-weight: bold !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
    }
    body:not(.printing-view-client-modal) .table tfoot tr.table-active,
    body:not(.printing-view-client-modal) .report-table-detailed tfoot tr.table-primary,
    body:not(.printing-view-client-modal) .report-table-cobros-mensuals tfoot tr.table-active,
    body:not(.printing-view-client-modal) .report-table-pagos-anuales-quotes tfoot tr.table-active {
         background-color: var(--theme-table-footer-bg) !important;
        color: var(--theme-text-footer-contrast) !important;
        font-weight: bold !important; -webkit-print-color-adjust: exact; print-color-adjust: exact !important;
    }
     body:not(.printing-view-client-modal) .table tfoot tr.table-active th,
     body:not(.printing-view-client-modal) .table tfoot tr.table-active td,
     body:not(.printing-view-client-modal) .report-table-detailed tfoot tr.table-primary th,
     body:not(.printing-view-client-modal) .report-table-detailed tfoot tr.table-primary td,
     body:not(.printing-view-client-modal) .report-table-cobros-mensuals tfoot tr.table-active th,
     body:not(.printing-view-client-modal) .report-table-cobros-mensuals tfoot tr.table-active td,
     body:not(.printing-view-client-modal) .report-table-pagos-anuales-quotes tfoot tr.table-active th,
     body:not(.printing-view-client-modal) .report-table-pagos-anuales-quotes tfoot tr.table-active td {
        color: var(--theme-text-footer-contrast) !important;
    }

    a { text-decoration: none !important; color: inherit !important; }
    table { page-break-inside: auto !important; }
    tr    { page-break-inside: avoid !important; page-break-after: auto !important; }
    thead { display: table-header-group !important; }
    tfoot { display: table-footer-group !important; }
    .client-details-section, .report-header { page-break-after: avoid !important; }
}

/* ---
    INICIO DE ESTILOS AÑADIDOS/MODIFICADOS
    Aquí se incluyen los cambios para el modo oscuro y los nuevos elementos.
--- */

/* Estilos para el interruptor de tema (MODIFICADO) */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
}
.theme-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}
.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #718096; /* Color de fondo para modo claro */
    transition: .4s;
    border-radius: 26px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0,0,0,0.2);
}
input:checked + .slider {
    background-color: var(--theme-primary-purple);
}
input:checked + .slider:before {
    transform: translateX(24px);
}

/* CAMBIO 1 (anterior): Iconos Sol/Luna para el conmutador de tema */
.theme-icons {
    color: var(--theme-text-dark);
    font-size: 1.2rem;
}
.theme-icon-sun, .theme-icon-moon {
    transition: color 0.3s ease;
}
html[data-theme="light"] .theme-icon-sun {
    display: none;
}
html[data-theme="dark"] .theme-icon-moon {
    display: none;
}
html[data-theme="dark"] .theme-icons {
    color: #f1c40f; /* Color amarillo para los iconos en modo oscuro */
}

/* CAMBIO 2: Estilo para el nombre del cliente en la cabecera del modal */
.client-name-in-header {
    font-weight: 700; /* Negrita */
    color: var(--theme-primary-purple-darker); /* Morado oscuro en tema claro */
}


/* --- INICIO DE ESTILOS PARA MODO OSCURO --- */
html[data-theme="dark"] body {
    background-color: #1a202c;
    color: #edf2f7;
}

html[data-theme="dark"] #clientsSection,
html[data-theme="dark"] #reportsSection,
html[data-theme="dark"] #grupsSection,
html[data-theme="dark"] #facturacionSection,
html[data-theme="dark"] .report-render-area,
html[data-theme="dark"] .navbar-nav .dropdown-menu {
    background-color: #2d3748;
    border-color: #4a5568;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .form-label {
    color: #edf2f7;
}

/* CAMBIO 5: Aclarar texto de los items del menú desplegable en modo noche */
html[data-theme="dark"] .navbar-nav .dropdown-item {
    color: #edf2f7 !important; /* Añadido !important para sobreescribir la regla base */
}
html[data-theme="dark"] .navbar-nav .dropdown-item:hover,
html[data-theme="dark"] .navbar-nav .dropdown-item:focus {
    background-color: #4a5568; /* Un fondo gris más oscuro para el hover */
    color: #ffffff !important; /* Texto blanco en hover */
}

/* CAMBIO 1 (anterior): Oscurecer título en "Canviar Contrasenya" en modo noche */
html[data-theme="dark"] .form-container h1 {
    color: #e2e8f0;
}

html[data-theme="dark"] .report-controls-area,
html[data-theme="dark"] .bg-light-custom,
html[data-theme="dark"] .client-details-section,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .fixed-footer {
    background-color: #4a5568 !important;
    border-color: #718096 !important;
}

html[data-theme="dark"] .table {
    color: #edf2f7;
}

html[data-theme="dark"] .table thead th {
    background-color: #1a202c;
    color: #edf2f7;
    border-bottom-color: #4a5568;
}

html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td {
    border-top-color: #4a5568;
}

html[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: #4a5568;
    color: #edf2f7;
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, .03);
}

html[data-theme="dark"] .table tfoot tr.table-active,
html[data-theme="dark"] .table tfoot tr.table-active th {
    background-color: #171923 !important;
    color: #edf2f7 !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .ts-control {
    background-color: #4a5568;
    border-color: #718096;
    color: #edf2f7;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] .ts-control.focus {
    background-color: #4a5568;
    border-color: var(--theme-primary-purple);
    box-shadow: 0 0 0 0.25rem rgba(142, 103, 165, 0.35);
    color: #edf2f7;
}

html[data-theme="dark"] .modal-content {
    background-color: #2d3748;
    border-color: #4a5568;
}

html[data-theme="dark"] .modal-header {
    background-color: #52a397;
}

html[data-theme="dark"] .modal-body {
    background-color: #2d3748;
    color: #edf2f7;
}

html[data-theme="dark"] .pagination .page-item .page-link {
    background-color: #2d3748;
    border-color: #4a5568;
}

html[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: #4a5568;
    border-color: #718096;
}

html[data-theme="dark"] .pagination .page-item .page-link:hover {
    background-color: #4a5568;
}

/* CAMBIO 2: Estilo para el nombre del cliente en la cabecera del modal en modo oscuro */
html[data-theme="dark"] .client-name-in-header {
    color: #f1c40f; /* Color dorado para destacar sobre el fondo teal oscuro */
}


/* CAMBIO 3 (anterior): Corrección de visibilidad de textos y botones en modo oscuro */

/* Para el texto "Mostrant X de X clients trobats" y otros textos 'muted' */
html[data-theme="dark"] .text-muted {
    color: #a0aec0 !important; /* Un gris más claro y legible sobre fondo oscuro */
}

/* Para el botón "Tancar Vista Informe" y otros .btn-outline-dark */
html[data-theme="dark"] .btn-outline-dark {
    color: #e2e8f0;
    border-color: #e2e8f0;
}
html[data-theme="dark"] .btn-outline-dark:hover {
    background-color: #e2e8f0;
    color: #1a202c;
}

/* Para los enlaces de "Filtre Avançat per Data" y otros enlaces genéricos */
html[data-theme="dark"] a:not(.nav-link):not(.dropdown-item):not(.btn) {
    color: #90cdf4; /* Un azul claro para que destaque como enlace */
}
html[data-theme="dark"] a:not(.nav-link):not(.dropdown-item):not(.btn):hover {
    color: #bee3f8; /* Un azul un poco más claro al pasar el ratón */
}

/* CORRECCIÓN FINAL: Legibilidad en "Detalls del Grup" en modo noche */
html[data-theme="dark"] .group-details-section {
    background-color: #2d3748 !important; /* Fondo oscuro consistente */
    border-color: #4a5568 !important;
}
html[data-theme="dark"] .group-details-section h5,
html[data-theme="dark"] .group-details-section p {
    color: #edf2f7; /* Texto claro */
}

/* --- NUEVAS CORRECCIONES 04/08/2025 --- */

/* 1. Oscurecer título en modal "Canviar Contrasenya" en modo noche */
html[data-theme="dark"] .form-container h1.h3 {
    color: #cbd5e0; /* Un gris un poco más oscuro que el texto normal para mejorar contraste */
}

/* 2. Corregir fondo y texto en modal "Detalls del Client" en modo noche */
html[data-theme="dark"] #viewClientModalBodyContent .view-client-details-table {
    background-color: transparent;
}
html[data-theme="dark"] #viewClientModalBodyContent #viewClientObservaciones.bg-light {
    background-color: transparent !important;
    border-color: #4a5568 !important;
}