/* VARIABLES DE COLOR (valores iniciales) */
:root {
    --color-primario: #0d6efd;
    --color-primario-rgb: 13, 110, 253;

    /* CORRECCIÓN: 
      Ahora '--color-subfondo' usa la variable '--color-primario-rgb'.
      Cuando JavaScript actualice '--color-primario-rgb', este fondo 
      cambiará automáticamente de color, manteniendo la coherencia.
    */
    --color-subfondo: rgba(var(--color-primario-rgb), 0.08);
    /* Opacidad reducida para un tono más tenue */

    /* Colores post-it (se modifican vía JS) */
    --color-postit1: rgba(var(--color-primario-rgb), 0.15);
    --color-postit2: rgba(var(--color-primario-rgb), 0.25);
    --color-postit3: rgba(var(--color-primario-rgb), 0.35);
    --color-postit4: rgba(var(--color-primario-rgb), 0.45);
    --color-postit5: rgba(var(--color-primario-rgb), 0.55);

    /* NUEVA VARIABLE PARA EL ANCHO DEL FLOWBOARD */
    --flowboard-panel-width: 380px;
}

/* RESET BÁSICO */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* BODY */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
    color: #333;
}

/************************************************************
 * SIDEBAR
 ************************************************************/
.sidebar {
    width: 250px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    padding: 20px 10px;
    background: var(--color-primario);
    color: #fff;
    overflow-y: auto;
    padding-bottom: 20px;
}


.sidebar-logo {
    display: block;
    margin: 0 auto 15px auto;
    max-width: 120px;
    border-radius: 4px;
}

.sidebar h1 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
}

.sidebar a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 5px;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
    /* Añadido para suavizar */
}

.sidebar a:hover,
.sidebar a.active {
    background-color: #fff;
    color: var(--color-primario);
}

.sidebar-links-interes {
    margin-top: 20px;
}

/* (CUARTA MODIFICACIÓN) Botones para Links de interés */
.sidebar-links-interes a {
    display: block;
    /* Usar rgba con la variable RGB para el fondo */
    background-color: rgba(var(--color-primario-rgb), 0.2);
    /* Fondo más coherente */
    color: #ffffff;
    text-decoration: none;
    margin: 5px 0;
    padding: 8px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    transition: background 0.2s ease;
}

.sidebar-links-interes a:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}


/************************************************************
 * MAIN CONTENT
 ************************************************************/
.main-content {
    margin-left: 250px;
    padding: 20px;
    transition: margin-right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* AÑADIDA TRANSICIÓN */
}

.main-header {
    margin-bottom: 20px;
}

.hidden {
    display: none !important;
}

/************************************************************
 * CARD CUSTOM
 ************************************************************/
.card-custom {
    background: #fff;
    border-radius: 8px;
    /* Un poco más redondeado */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    /* Sombra más suave */
    padding: 20px;
    /* Más padding */
    margin-bottom: 20px;
}

/************************************************************
 * COLORED SUBSECTION
 ************************************************************/
.colored-subsection {
    /* Usar rgba con la variable RGB para el fondo */
    background: rgba(var(--color-primario-rgb), 0.05);
    /* Fondo aún más sutil */
    border: 1px solid rgba(var(--color-primario-rgb), 0.1);
    /* Borde basado en primario */
    border-radius: 8px;
    padding: 20px;
}

/************************************************************
 * TABLAS
 ************************************************************/
.table {
    background: #fff;
    border-radius: 6px;
    font-size: 0.9rem;
    border: 1px solid #dee2e6;
    /* Borde general */
}

.table th,
.table td {
    vertical-align: middle;
    border-top: 1px solid #dee2e6;
    /* Separador de filas */
}

.table thead th {
    border-bottom: 2px solid #dee2e6;
    /* Borde más grueso para cabecera */
    background-color: #f8f9fa;
    /* Fondo cabecera */
}

/************************************************************
 * CALENDARIO (Vistas Mensual, Diaria, 5 Días)
 ************************************************************/

/* ======================================================= */
/* ============ INICIO SECCIÓN CALENDARIO MENSUAL REVISADA =========== */
/* ======================================================= */

/* -- Cabecera Mensual (Lun-Dom) -- */
.calendar-month-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #f8f9fa;
    /* Fondo un poco más claro */
    text-align: center;
    font-weight: 600;
    /* Un poco más bold */
    padding: 8px 0;
    /* Más padding vertical */
    border: 1px solid #e9ecef;
    /* Borde más suave */
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    /* Esquinas más redondeadas */
    font-size: 0.8rem;
    /* Ligeramente más pequeño */
    color: #495057;
}

.calendar-month-header>div {
    padding: 5px 0;
}

/* -- Grid Mensual -- */
.calendar-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* grid-template-rows es definido por JS */
    background: #fff;
    border: 1px solid #e9ecef;
    /* Borde más suave */
    border-top: none;
    border-radius: 0 0 8px 8px;
    /* Redondear esquinas inferiores */
    overflow: hidden;
    /* Asegurar que el contenido respete el borde redondeado */
}

/* -- Celda Individual Mensual -- */
.calendar-month-cell {
    min-height: 110px;
    /* Un poco más de altura si es necesario */
    border-right: 1px solid #f1f3f5;
    /* Borde interno aún más sutil */
    border-bottom: 1px solid #f1f3f5;
    /* Borde interno aún más sutil */
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    /* Sin padding general */
    transition: background-color 0.2s ease;
    /* Transición suave para hover */
}

/* Quitar bordes externos innecesarios */
.calendar-month-cell:nth-child(7n) {
    border-right: none;
}

/* Ajuste dinámico de borde inferior según filas */
.calendar-month-grid[style*="repeat(5, 1fr)"] .calendar-month-cell:nth-last-child(-n+7) {
    border-bottom: none;
}

.calendar-month-grid[style*="repeat(6, 1fr)"] .calendar-month-cell:nth-last-child(-n+7) {
    border-bottom: none;
}

/* Estilo para días fuera del mes */
.calendar-month-cell.cell-other-month {
    background-color: #fdfdfd;
    /* Fondo casi blanco */
    cursor: default;
}

.calendar-month-cell.cell-other-month .day-number {
    color: #adb5bd;
    /* Número del día más tenue */
}


/* Hover general para celdas del mes actual */
.calendar-month-cell:not(.cell-other-month):hover {
    background-color: #f8f9fa;
    /* Hover muy sutil */
}

/* -- Div Superior (Número del día) -- */
.cell-top {
    height: 28px;
    /* Un poco más de altura */
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    /* Para ir a vista diaria */
    padding: 5px 8px;
    /* Ajustar padding */
    display: flex;
    justify-content: flex-end;
    /* Número a la derecha */
    align-items: center;
    /* border-bottom: none; */
    /* Ya no se necesita, se quitó la línea fea */
    transition: background-color 0.2s ease;
}

.cell-top:hover {
    background-color: #e9ecef;
    /* Hover más notable */
}

.day-number {
    /* font-weight: 500; */
    /* Comentado o eliminado el peso anterior */
    font-weight: 600;
    /* <-- AÑADIDO: Semibold (o puedes usar 'bold' o 700) */
    font-size: 0.95em;
    /* <-- AUMENTADO: Un poco más grande */
    line-height: 1;
    /* Propiedades adicionales si son necesarias para alineación/espacio */
    padding: 1px;
    /* Añadir un pequeño padding si se ve muy pegado */
}

/* -- Estilo Día Actual -- */
.day-today {
    background-color: rgba(var(--color-primario-rgb), 0.06);
    /* Fondo MUY sutil en toda la celda */
    /* border: 1px solid rgba(var(--color-primario-rgb), 0.2); Borde opcional */
}

/* .day-today .cell-top { } */
/* No necesita fondo extra aquí */

.day-today .cell-top .day-number.today-label {
    background-color: var(--color-primario);
    color: white !important;
    /* Asegurar color blanco */
    border-radius: 50%;
    padding: 3px 6px;
    /* Ajustar padding del círculo */
    font-weight: 600;
    /* Más bold */
    min-width: 22px;
    min-height: 22px;
    display: inline-flex;
    /* Usar flex para centrar */
    align-items: center;
    justify-content: center;
    line-height: 1;
    /* margin-right: -3px; */
    /* Ajustar posición si es necesario */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Sombra sutil */
}

/* -- Div Inferior (Eventos) -- */
.cell-bottom {
    flex-grow: 1;
    position: relative;
    min-height: 75px;
    /* Altura mínima */
    display: flex;
    flex-direction: column;
    gap: 3px;
    /* Espacio entre eventos */
    padding: 5px;
    /* Padding interno */
    cursor: pointer;
    /* Clickeable para crear evento */
}

.cell-bottom.drag-over {
    background-color: rgba(var(--color-primario-rgb), 0.1);
    /* Usar color primario */
}

/* Eventos individuales */
.event-item {
    background: rgba(var(--color-primario-rgb), 0.15);
    /* Usar color primario */
    border: none;
    /* Sin borde */
    /* border-left: 3px solid var(--color-primario); */
    /* Borde izquierdo opcional */
    color: var(--color-primario);
    font-weight: 500;
    border-radius: 4px;
    /* Más redondeado */
    padding: 3px 6px;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: grab;
    z-index: 1;
    transition: background-color 0.2s ease;
}

.event-item:hover {
    background: rgba(var(--color-primario-rgb), 0.25);
    /* Hover más intenso */
}


.event-item .event-time {
    font-weight: 600;
    /* Hora un poco más marcada */
    margin-right: 4px;
    color: inherit;
    /* Heredar color del evento */
    opacity: 0.8;
}

.event-item.dragging {
    opacity: 0.4;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Estilo para eventos realizados */
.event-done {
    text-decoration: line-through;
    opacity: 0.6;
    background-color: #f1f3f5;
    /* Fondo gris más claro */
    border-color: #dee2e6;
    color: #6c757d;
}

.event-done:hover {
    background-color: #e9ecef;
    /* Hover gris */
}


/* Enlace "+X más" */
.more-link {
    font-size: 0.75rem;
    color: #495057;
    /* Color más neutro */
    cursor: pointer;
    position: absolute;
    bottom: 4px;
    left: 5px;
    background-color: rgba(233, 236, 239, 0.8);
    /* Fondo grisáceo */
    padding: 2px 5px;
    border-radius: 3px;
    z-index: 1;
    font-weight: 500;
}

.more-link:hover {
    background-color: rgba(233, 236, 239, 1);
    text-decoration: underline;
}

/* ======================================================= */
/* ============ FIN SECCIÓN CALENDARIO MENSUAL REVISADA =========== */
/* ======================================================= */


/* --- Vista Diaria --- */
.calendar-daily-container {
    border: 1px solid #e9ecef;
    /* Borde más suave */
    border-radius: 8px;
    padding: 15px;
    background-color: #fff;
}

.daily-row {
    display: flex;
    border-bottom: 1px solid #f1f3f5;
    /* Separador más sutil */
    margin-bottom: 8px;
    /* Más espacio */
    padding-bottom: 8px;
    /* Espacio después de la línea */
}

.daily-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.daily-time {
    min-width: 90px;
    /* Un poco más ancho */
    font-weight: 600;
    /* background: #f8f9fa; */
    /* Sin fondo */
    text-align: right;
    /* Alinear a la derecha */
    padding: 8px 10px 8px 0;
    /* Ajustar padding */
    /* border-right: 1px solid #e9ecef; */
    /* Sin borde derecho */
    font-size: 0.9em;
    color: #6c757d;
    /* Color gris */
    flex-shrink: 0;
}

.daily-events {
    flex: 1;
    padding: 8px 0 8px 10px;
    /* Ajustar padding */
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* Espacio entre eventos */
}

/* Reusar estilo .event-item para vista diaria */
.daily-events .event-item {
    /* margin-bottom: 5px; */
    /* Quitar, usar gap */
    white-space: normal;
    font-size: 0.85rem;
}

/* --- Vista 5 Días --- */
.calendar-5days-container {
    border: 1px solid #e9ecef;
    /* Borde más suave */
    border-radius: 8px;
    padding: 15px;
    background-color: #fff;
}

.five-days-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    /* Más espacio entre columnas */
}

.five-days-col {
    border: 1px solid #f1f3f5;
    /* Borde columna más suave */
    border-radius: 6px;
    background: #fff;
    min-height: 300px;
    /* Más alto */
    padding: 0;
    /* Sin padding general */
    position: relative;
    display: flex;
    flex-direction: column;
    /* gap: 4px; Quitar gap, usar padding en eventos */
    overflow: hidden;
    /* Para contener el header */
}

.five-days-col:hover {
    border-color: #dee2e6;
    /* Borde más visible en hover */
}

.five-days-col-header {
    text-align: center;
    font-weight: 600;
    padding: 8px 5px;
    /* Ajustar padding */
    border-bottom: 1px solid #e9ecef;
    /* Separador */
    flex-shrink: 0;
    background-color: #f8f9fa;
    /* Fondo cabecera */
    font-size: 0.85rem;
}

.five-days-col.col-today .five-days-col-header {
    background-color: var(--color-primario);
    color: white;
    border-radius: 6px 6px 0 0;
    border-bottom: none;
    /* Quitar borde inferior si es hoy */
    margin: 0;
    /* Sin márgenes negativos */
    padding: 8px 5px;
    /* Padding consistente */
}

.five-days-event {
    /* Reutilizar .event-item */
    background: rgba(var(--color-primario-rgb), 0.1);
    /* Fondo más claro */
    /* border: 1px solid rgba(var(--color-primario-rgb), 0.3); */
    /* Borde opcional */
    border: none;
    color: var(--color-primario);
    font-weight: 500;
    border-radius: 4px;
    padding: 5px 8px;
    /* Más padding */
    font-size: 0.8rem;
    cursor: grab;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    margin: 4px 8px;
    /* Margen alrededor para separar */
    transition: background-color 0.2s ease;
}

.five-days-event:hover {
    background: rgba(var(--color-primario-rgb), 0.2);
    /* Hover */
}


.five-days-event.event-done {
    text-decoration: line-through;
    opacity: 0.6;
    background-color: #f1f3f5;
    border-color: #dee2e6;
    color: #6c757d;
}

.five-days-event.event-done:hover {
    background-color: #e9ecef;
}

/* Drag over feedback para 5 días */
.five-days-col.drag-over {
    background-color: rgba(var(--color-primario-rgb), 0.05);
    border-color: rgba(var(--color-primario-rgb), 0.3);
}

/************************************************************
 * PERFIL CLIENTE
 ************************************************************/
.perfil-cliente-nombre {
    font-size: 1.4rem;
    /* Reducido en HTML, mantenemos consistencia */
    font-weight: bold;
}

/************************************************************
 * BITÁCORA / QUILL
 ************************************************************/
/* Estilo específico para la tabla de bitácora para evitar conflictos */
#tablaPerfilBitacora .ql-editor p,
#tablaPerfilBitacora td p {
    /* Añadir especificidad si es necesario */
    margin: 0 0 0.5em 0 !important;
    /* Margen inferior ligero */
    padding: 0 !important;
    line-height: 1.4 !important;
    /* Espaciado normal */
}

#tablaPerfilBitacora .ql-editor p:last-child,
#tablaPerfilBitacora td p:last-child {
    margin-bottom: 0 !important;
    /* Sin margen en el último párrafo */
}


/* Estilos para los editores Quill en general */
.ql-toolbar {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-color: #ced4da;
}

.ql-container {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-color: #ced4da;
    background-color: #fff;
    /* Fondo blanco editor */
    min-height: 120px;
    /* Altura mínima general */
}

.ql-editor {
    font-size: 0.95rem;
    /* Tamaño fuente editor */
}

.ql-editor.ql-blank::before {
    color: #adb5bd;
    /* Color placeholder */
    font-style: italic;
}


/************************************************************
 * CONTABILIDAD - NUEVOS ESTILOS REDISEÑADOS
 ************************************************************/

/* Tarjetas de Resumen */
.summary-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e9ecef;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.summary-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.summary-card-icon {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.summary-card-label {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 5px;
}

.summary-card-value {
    font-size: 2.2rem;
    font-weight: 700;
}

/* Colores específicos para las tarjetas */
.summary-card-ingresos .summary-card-icon,
.summary-card-ingresos .summary-card-value {
    color: #198754; /* Verde */
}
.summary-card-egresos .summary-card-icon,
.summary-card-egresos .summary-card-value {
    color: #dc3545; /* Rojo */
}
.summary-card-neto .summary-card-icon,
.summary-card-neto .summary-card-value {
    color: var(--color-primario); /* Color primario de la app */
}

/* Estilos para la tabla de movimientos */
#tablaMovimientos tbody tr {
    transition: background-color 0.15s ease-in-out;
}

#tablaMovimientos .tipo-ingreso {
    color: #198754;
    font-weight: 500;
}
#tablaMovimientos .tipo-ingreso .fa-arrow-up {
    margin-right: 8px;
}

#tablaMovimientos .tipo-egreso {
    color: #dc3545;
    font-weight: 500;
}
#tablaMovimientos .tipo-egreso .fa-arrow-down {
    margin-right: 8px;
}

#tablaMovimientos .monto-ingreso {
    font-weight: 600;
    color: #198754;
}
#tablaMovimientos .monto-egreso {
    font-weight: 600;
    color: #dc3545;
}

/* Botón para la boleta */
#tablaMovimientos .btn-boleta {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
}

/* Botones de acciones en la tabla */
#tablaMovimientos .btn-actions {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

#tablaMovimientos tr:hover .btn-actions {
    opacity: 1;
}

/* Estilo para el modal */
#modalAgregarMovimiento .modal-header {
    background-color: var(--color-primario);
    color: white;
}
#modalAgregarMovimiento .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/************************************************************
 * BOTONES DE PALETAS Y PERSONALIZADOS
 ************************************************************/
.btn-palette {
    /* Estilos se aplican desde JS (colorizePaletteButtons) */
    border: none;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 0;
    border-radius: 50%;
    /* Círculos */
    cursor: pointer;
    font-weight: bold;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 0.8rem;
    /* Para el checkmark */
    transition: transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-palette:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn-palette.active {
    /* Estilo para el botón activo */
    box-shadow: 0 0 0 3px rgba(var(--color-primario-rgb), 0.4);
    /* Anillo de color primario */
}

.btn-palette.active i {
    color: #fff;
    /* Color del check puede ajustarse */
}


.btn-custom-sidebar {
    /* Estilo por defecto (outline) */
    background-color: transparent;
    border: 1px solid var(--color-primario);
    color: var(--color-primario);
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-custom-sidebar:hover {
    /* Estilo al pasar el mouse (relleno) */
    background-color: var(--color-primario);
    color: #fff;
    border-color: var(--color-primario);
}

.btn-custom-sidebar.active {
    /* Estilo para el botón seleccionado (relleno) */
    background-color: var(--color-primario);
    color: #fff;
    border-color: var(--color-primario);
}

/* Botón WhatsApp */
.btn-whatsapp {
    background-color: #25D366 !important;
    border-color: #1ebe5b !important;
    /* Borde ligeramente más oscuro */
    color: #fff !important;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-whatsapp:hover {
    background-color: #1DAE56 !important;
    border-color: #179249 !important;
    color: #fff !important;
}

/* ================================================== */
/* ESTILO BOTON GUARDAR CLIENTE          */
/* ================================================== */

.btn-outline-dynamic {
    color: var(--color-primario);
    border-color: var(--color-primario);
    background-color: transparent;
    font-weight: 500;
    border-width: 2px;
    /* Borde un poco más grueso */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-outline-dynamic:hover {
    color: #fff;
    background-color: var(--color-primario);
    border-color: var(--color-primario);
}


/************************************************************
 * RESPONSIVE SIDEBAR (QUINTA MODIFICACIÓN)
 ************************************************************/
@media (max-width: 992px) {

    /* Con ancho reducido, transformamos la sidebar en una especie de barra horizontal */
    .sidebar {
        position: relative;
        /* Cambiar a relativo */
        width: 100%;
        height: auto;
        min-height: auto;
        display: flex;
        flex-wrap: wrap;
        /* Permitir que los botones se envuelvan */
        align-items: center;
        padding: 10px;
        justify-content: center;
        /* Centrar botones */
        overflow-y: hidden;
        /* Deshabilita scroll vertical */
        border-radius: 0;
        /* Quitar redondeo si lo tuviera */
    }

    .sidebar-logo {
        margin: 5px 15px 5px 5px;
        /* Espacio a la derecha */
        max-width: 80px;
        /* Más pequeño */
    }

    .sidebar h1 {
        display: none;
        /* ocultamos título grande */
    }

    .sidebar>p {
        /* Ocultar nombre de usuario en modo barra */
        display: none;
    }

    .sidebar a {
        margin: 3px;
        /* Menos margen */
        padding: 6px 10px;
        text-align: center;
        flex-grow: 1;
        /* Ocupar espacio disponible */
        min-width: 100px;
        /* Ancho mínimo */
    }

    /* Ocultar links de interés en modo barra para ahorrar espacio */
    .sidebar-links-interes {
        display: none;
    }

    .main-content {
        margin-left: 0;
        margin-top: 10px;
        /* Espacio debajo de la "barra" */
        padding: 10px;
    }
    
}


/************************************************************
 * LOGIN CONTAINER Y LOGO
 ************************************************************/
.login-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 30px;
    /* Más padding */
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* Sombra más pronunciada */
}

.login-logo {
    display: block;
    margin: 0 auto 25px auto;
    max-width: 150px;
    border-radius: 6px;
}

/************************************************************
 * PIE DE PÁGINA EN CONTRATO (Impresión)
 ************************************************************/
.footer-logo {
    position: fixed;
    bottom: -150px;
    /* Oculto fuera de pantalla */
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 0;
    /* Inicialmente invisible */
    display: none;
    /* Oculto por defecto */
}

.footer-logo img {
    max-width: 200px;
    /* Ajustar tamaño si es necesario */
}

/************************************************************
 * ESTILOS PARA IMPRESIÓN (DE EVENTOS Y OTROS)
 ************************************************************/
@media print {

    /* Estilos generales de impresión */
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        font-size: 10pt;
        /* Reducir tamaño base para más contenido */
        line-height: 1.3;
        /* Ligeramente más compacto */
        color: #000 !important;
        /* Forzar color negro */
        background-color: #fff !important;
        /* Forzar fondo blanco */
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: #000 !important;
    }

    a {
        text-decoration: none !important;
        color: #000 !important;
    }

    /* Mostrar URLs en links */
    a[href^="http"]:after {
        content: " ("attr(href) ")";
        font-size: 90%;
        color: #555;
    }

    /* No mostrar URL en links internos o JS */
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    /* Ocultar elementos no deseados */
    .sidebar,
    .main-header button,
    .main-header h2,
    .btn,
    #clientesNav,
    #perfilClienteNav,
    input,
    select,
    textarea,
    .ql-toolbar,
    .ql-container:not(#print-output),
    /* No ocultar si es salida específica */
    .swal2-container,
    .no-print,
    #btnAgregarLinkInteres,
    #btnAgregarNotaAdhesiva,
    /* Ocultar botones específicos */
    
    /* Ocultar botón borrar postit */
        {
        display: none !important;
    }

    /* Mostrar contenido principal */
    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        /* Asegurar ancho completo */
    }

    /* Ajustes para tablas en impresión */
    .table {
        font-size: 9pt;
        /* Texto tabla más pequeño */
        border: 1px solid #aaa !important;
        /* Borde más visible */
    }

    .table th,
    .table td {
        border: 1px solid #ccc !important;
        padding: 4px 6px !important;
    }

    .table thead th {
        background-color: #eee !important;
        /* Fondo cabecera claro */
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Forzar colores de fondo en filas contabilidad */
    .tr-ingreso td {
        background-color: rgba(25, 135, 84, 0.1) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .tr-egreso td {
        background-color: rgba(220, 53, 69, 0.1) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Evitar cortes de página inoportunos */
    .card-custom,
    .colored-subsection,
    .seccion,
    table,
    .postit-item {
        page-break-inside: avoid !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        page-break-after: avoid !important;
        page-break-inside: avoid !important;
    }

    thead {
        display: table-header-group;
    }

    /* Repetir cabeceras de tabla */


    /* Estilos específicos para la impresión del Contrato */
    .footer-logo {
        position: fixed !important;
        bottom: 20mm !important;
        /* Ajustar posición */
        left: 0 !important;
        width: 100% !important;
        text-align: center !important;
        opacity: 0.2 !important;
        /* Más tenue */
        display: block !important;
        z-index: -1 !important;
        /* Detrás del texto */
    }

    .footer-logo img {
        max-width: 120px !important;
        /* Logo más pequeño */
    }

    /* Estilos específicos para la impresión del Evento (nueva ventana) */
    /* Asegurar que los IDs sean únicos si se usan en múltiples contextos de impresión */
    #print-event-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 10px !important;
        /* Menos padding */
        font-size: 12pt !important;
        line-height: 1.5 !important;
    }

    #print-event-logo {
        display: block !important;
        margin: 0 auto 20px auto !important;
        max-width: 200px !important;
        max-height: 120px !important;
    }

    #print-event-intro,
    #print-event-outro {
        font-size: 1.05em !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }

    #print-event-details {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        border: 1px solid #aaa !important;
        padding: 10px !important;
        border-radius: 0 !important;
        /* Sin borde redondeado */
        font-size: 1.1em !important;
        background-color: #fdfdfd !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    #print-event-details div {
        margin-bottom: 8px !important;
        padding-bottom: 5px !important;
        border-bottom: 1px dotted #ccc !important;
    }

    #print-event-details div:last-child {
        border-bottom: none !important;
    }

    #print-event-details strong {
        font-weight: bold !important;
        display: inline-block !important;
        min-width: 100px !important;
    }

    #print-event-footer {
        font-size: 1em !important;
        margin-top: 15px !important;
        text-align: center !important;
        border-top: 1px solid #aaa !important;
        padding-top: 10px !important;
    }

    /* Forzar tamaño de página si es necesario (puede definirse por sección) */
    @page {
        size: 21.6cm 33cm;
        /* Oficio/Legal por defecto */
        margin: 1.5cm;
        /* Margen más estrecho */
    }

    /* Ejemplo: @page contrato { size: A4; margin: 2cm; } */

}

/* ============================================== */
/* == ESTILOS PARA ESTADO ASISTENCIA EVENTOS == */
/* ============================================== */

/* Iconos en general (puedes ajustar tamaño) */
.event-item .fa-check-circle,
.event-item .fa-times-circle,
.event-item .fa-question-circle {
    font-size: 0.85em;
    /* Tamaño relativo al texto del evento */
    vertical-align: middle;
    /* Alinear con el texto */
}

/* Estilos específicos para calendario MENSUAL */
.event-cancelled-monthly {
    text-decoration: line-through;
    opacity: 0.6;
    background-color: rgba(220, 53, 69, 0.1) !important;
    /* Fondo rojo muy sutil */
    color: #dc3545 !important;
    /* Texto rojo */
    border-left: 3px solid #dc3545 !important;
    /* Borde cancelado */
}

.event-cancelled-monthly:hover {
    background-color: rgba(220, 53, 69, 0.2) !important;
}

.event-confirmed-monthly {
    /* background-color: rgba(40, 167, 69, 0.1) !important; */
    /* Fondo verde sutil opcional */
    /* color: #198754 !important; */
    /* Texto verde opcional */
    font-weight: bold;
    /* Hacer el texto más prominente */
    border-left: 3px solid #28a745 !important;
    /* Borde izquierdo verde */
}

.event-confirmed-monthly:hover {
    /* background-color: rgba(40, 167, 69, 0.2) !important; */
}

/* Estilos para la tabla de Eventos Generales (dashboard.php) */
#tablaEventosGenerales .fa-lg {
    font-size: 1.15em;
    /* Iconos un poco más grandes en la tabla */
    vertical-align: middle;
}

/* Opcional: Atenuar toda la fila si la asistencia está cancelada en la tabla */
#tablaEventosGenerales tr[style*="opacity: 0.6"] td {
    color: #6c757d !important;
    /* Sobrescribir color de texto */
}

/* ============================================== */
/* == FIN ESTILOS ESTADO ASISTENCIA EVENTOS == */
/* ============================================== */

/* ============================================== */
/* == ESTILOS PARA FERIADOS NACIONALES == */
/* ============================================== */

/* Estilo para el label del día feriado en la vista MENSUAL */
.calendar-month-cell .day-number.feriado-nacional-label {
    background-color: #dc3545;
    /* Rojo (Bootstrap danger color) */
    color: white !important;
    /* Texto blanco para contraste */
    border-radius: 50%;
    /* Hacerlo circular */
    padding: 3px 6px;
    /* Ajustar padding para que el círculo se vea bien */
    font-weight: bold;
    min-width: 22px;
    /* Asegurar que sea un círculo incluso para números de 1 dígito */
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Alternativa: Si decides aplicar a toda la celda en vista MENSUAL */
.calendar-month-cell.feriado-nacional {
    background-color: rgba(220, 53, 69, 0.15);
    /* Un rojo muy suave para el fondo de la celda */
    /* border: 1px solid rgba(220, 53, 69, 0.3); */
    /* Borde opcional */
}

.calendar-month-cell.feriado-nacional .day-number {
    color: #dc3545;
    /* Color del número del día en rojo */
    font-weight: bold;
}

.calendar-month-cell.feriado-nacional .event-item {
    /* Ajustar eventos si la celda de feriado tiene fondo */
    /* background-color: rgba(220, 53, 69, 0.3); */
}


/* Estilo para el indicador de feriado en la vista DIARIA */
.daily-holiday-indicator {
    background-color: var(--bs-danger-bg-subtle, #ffe6e6);
    /* Rojo muy pálido */
    color: var(--bs-danger-text, #990000);
    /* Texto rojo oscuro */
    border: 1px solid var(--bs-danger-border-subtle, #ffcccc);
    border-radius: .375rem;
    /* Bootstrap's default border-radius */
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.daily-holiday-indicator .fa-flag {
    margin-right: 0.5em;
}


/* Estilo para la cabecera de un día feriado en la vista de 5 DÍAS */
.five-days-col-header.feriado-nacional-header {
    background-color: #dc3545 !important;
    /* Rojo fuerte */
    color: white !important;
    /* Texto blanco */
    /* font-weight: bold; */
    /* Ya es bold por .five-days-col-header */
}

.five-days-col-header.feriado-nacional-header:hover {
    background-color: #c82333 !important;
    /* Rojo un poco más oscuro en hover */
}

/* Si un día es HOY y también FERIADO en la vista MENSUAL */
/* El estilo de .today-label (primario) y .feriado-nacional-label (rojo) podrían competir.
   Podrías decidir cuál tiene precedencia o combinarlos.
   Por ejemplo, si quieres que el rojo del feriado sobreescriba el azul de "hoy": */
.calendar-month-cell.day-today .day-number.feriado-nacional-label {
    background-color: #dc3545;
    /* Feriado (rojo) gana */
    /* border: 2px solid var(--color-primario);  Añadir un borde del color primario si es hoy y feriado */
}


/* ============================================== */
/* == FIN ESTILOS PARA FERIADOS NACIONALES    == */
/* ============================================== */

/* ... (todos tus estilos existentes ANTES de este bloque) ... */

/* ============================================== */
/* == ESTILOS PARA SECCIÓN UTILIDADES Y CONTADOR == */
/* ============================================== */

#seccionUtilidades .card-custom {
    /* Puedes añadir un margen o padding específico si es necesario para esta sección */
    /* Por ejemplo: margin-top: 10px; */
}

#panelUtilidadesContador .form-label {
    font-size: 0.9rem;
    color: #495057;
    /* Un gris oscuro para buena legibilidad */
    /* margin-bottom: 0.3rem; */
    /* Menos espacio si es necesario */
}

#panelUtilidadesContador .form-control-lg,
#panelUtilidadesContador .form-select-lg {
    font-size: 1.05rem;
    /* Ajustar el tamaño de los inputs grandes si es necesario */
    /* padding: 0.6rem 1rem; */
    /* Ajustar padding si es necesario */
}

#btnCalcularFechaFinal {
    /* Puedes añadir estilos específicos si el botón btn-primary necesita ajustes aquí */
    /* Por ejemplo, asegurar que tenga buen contraste o tamaño */
    /* font-weight: 500; */
}

#contadorResultadoWrapper {
    /* Estilos para el contenedor del resultado y el detalle */
}

#contadorResultadoWrapper .alert {
    /* La clase .fs-4 ya le da un buen tamaño, aquí podrías añadir más cosas */
    /* Por ejemplo, un box-shadow más pronunciado si lo deseas */
    /* box-shadow: 0 .5rem 1rem rgba(0,0,0,.1)!important; */
}

#contadorResultadoWrapper #contadorResultadoFecha strong {
    /* Para destacar la fecha resultante dentro del alert */
    /* color: var(--bs-success-text-emphasis); Si es alert-success */
}

#contadorDetalleConteoWrapper .btn-outline-secondary {
    /* Estilo para el botón de toggle de detalle */
    font-size: 0.85rem;
}

#contadorDetalleConteo {
    /* El div que se colapsa */
    background-color: #f8f9fa;
    /* Un fondo ligeramente diferente al card-custom si está dentro */
}

#contadorDetalleConteo .list-group-item {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    /* Mejora legibilidad de fechas y logs */
    padding-top: 0.4rem;
    /* Ajustar padding vertical */
    padding-bottom: 0.4rem;
    border-color: rgba(0, 0, 0, 0.07);
    /* Borde sutil entre items */
}

/* Colores específicos para los tipos de día en el detalle */
#contadorDetalleConteo .list-group-item.list-group-item-danger {
    /* Feriado */
    background-color: rgba(220, 53, 69, 0.1) !important;
    color: #842029 !important;
    border-left: 3px solid #dc3545;
}

#contadorDetalleConteo .list-group-item.list-group-item-warning {
    /* Fin de semana no hábil */
    background-color: rgba(255, 193, 7, 0.1) !important;
    color: #664d03 !important;
    border-left: 3px solid #ffc107;
}

#contadorDetalleConteo .list-group-item.list-group-item-primary {
    /* Día contado */
    /* Usa el color primario de la aplicación */
    background-color: rgba(var(--color-primario-rgb), 0.1) !important;
    color: var(--color-primario) !important;
    border-left: 3px solid var(--color-primario);
}

#contadorDetalleConteo .list-group-item.list-group-item-info {
    /* Día inicial */
    background-color: rgba(13, 202, 240, 0.1) !important;
    /* Color info de Bootstrap */
    color: #087990 !important;
    border-left: 3px solid #0dcaf0;
}

#contadorDetalleConteo .list-group-item .badge {
    font-size: 0.75em;
    /* Hacer el badge un poco más pequeño */
}

/* Iconos en detalle de conteo */
#contadorDetalleConteo .fas {
    width: 22px;
    /* Asegurar alineación de iconos */
    text-align: center;
    margin-right: 5px;
    /* Espacio después del icono */
}

/* ============================================== */
/* == FIN ESTILOS UTILIDADES Y CONTADOR       == */
/* ============================================== */
/* ======================================================== */
/* == ESTILOS PARA CALCULADORA DE VALORES (UF/UTM)      == */
/* ======================================================== */

#panelUtilidadesCalculadoraValores .form-control-lg,
#panelUtilidadesCalculadoraValores .form-select-lg {
    font-size: 1rem;
    /* Podrías querer un tamaño ligeramente menor que el contador de días */
}

#calcValValorIndicadorActual {
    font-weight: 500;
    background-color: #e9ecef;
    /* Un gris claro para diferenciarlo de un input */
}

#calcValSwitchConversion {
    cursor: pointer;
}

#calcValResultadoConversion {
    /* Estilos para destacar el resultado */
    /* font-size: 1.4rem; */
    /* Ajustado en línea, pero podrías ponerlo aquí */
    /* font-weight: bold; */
}

#calcValApiError {
    font-size: 0.875em;
    /* Texto de error un poco más pequeño */
}

#calcValLabelSwitch {
    font-size: 0.8rem;
}

/* Ajuste para el spinner en el valor del indicador */
#calcValValorIndicadorActual .fa-spinner {
    font-size: 0.9em;
    /* Para que el spinner no sea tan grande */
    color: #6c757d;
    /* Un color gris para el spinner */
}

/* ============================================== */
/* == ESTILOS PARA FLOWBOARD                   == */
/* ============================================== */
.flowboard-icon-container {
    position: fixed;
    bottom: 25px;
    /* Ajustado para esquina inferior derecha */
    right: 25px;
    width: 55px;
    height: 55px;
    background-color: var(--color-primario);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    /* Tamaño del icono */
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1050;
    /* Por encima de la mayoría de los elementos */
    transition: transform 0.2s ease-in-out, background-color 0.2s ease;
}

.flowboard-icon-container:hover {
    transform: scale(1.1);
    background-color: rgba(var(--color-primario-rgb), 0.85);
}

.flowboard-notification-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 12px;
    height: 12px;
    background-color: #dc3545;
    /* Rojo para notificación */
    border-radius: 50%;
    border: 2px solid white;
}

.flowboard-panel {
    position: fixed;
    top: 0;
    /* MODIFICADO: Usar variable para el ancho y la posición inicial */
    width: var(--flowboard-panel-width);
    right: calc(-1 * var(--flowboard-panel-width));
    /* Inicialmente oculto */
    height: 100vh;
    background-color: #f8f9fa;
    /* Un fondo claro, no blanco puro */
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.15);
    z-index: 1040;
    /* Ligeramente por debajo del icono si se superponen al abrir */
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Animación suave */
    display: flex;
    flex-direction: column;
    border-left: 1px solid #dee2e6;
}

/* ELIMINADA LA CLASE .flowboard-panel.open, AHORA SE CONTROLA CON body.flowboard-ux-active */

.flowboard-header {
    padding: 15px 20px;
    background-color: #ffffff;
    /* Cabecera blanca */
    border-bottom: 1px solid #dee2e6;
    /* Separador sutil */
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Espacio entre elementos de la cabecera */
}

.flowboard-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #343a40;
    display: inline-block;
    /* Para alinear con botón cerrar */
}

.flowboard-close-btn {
    position: absolute;
    top: 12px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2rem;
    color: #6c757d;
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem 0.5rem;
}

.flowboard-close-btn:hover {
    color: #343a40;
}

.flowboard-quick-add input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 0.95rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
}

.flowboard-quick-add input[type="text"]::placeholder {
    color: #adb5bd;
}

.flowboard-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    /* Para que los botones se ajusten en pantallas pequeñas */
}

.btn-flowboard-filter {
    font-size: 0.8rem;
    padding: 5px 10px;
    background-color: #e9ecef;
    border-color: #e9ecef;
    color: #495057;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-flowboard-filter:hover {
    background-color: #d3d9df;
    color: #343a40;
}

.btn-flowboard-filter.active {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
    color: white;
}

.flowboard-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Espacio entre tarjetas */
}

.flowboard-item-card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    padding: 12px 15px;
    position: relative;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.flowboard-item-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    /* transform: translateY(-2px); */
    /* Sutil elevación en hover */
}

.flowboard-item-content {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #212529;
    padding-bottom: 5px;
    /* Espacio antes de los metadatos */
    white-space: pre-wrap;
    /* Para respetar saltos de línea */
    word-wrap: break-word;
    /* Para que el texto largo no rompa el layout */
}

.flowboard-item-content:focus {
    outline: none;
    background-color: #fef9e7;
    /* Un ligero resaltado al editar */
    padding: 5px;
    margin: -5px;
    /* Compensar padding para que no salte */
    border-radius: 4px;
}


.flowboard-item-meta {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flowboard-item-meta .item-color-indicator {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 8px;
    display: inline-block;
}

.flowboard-item-actions .fas {
    /* Para los tres puntos */
    color: #adb5bd;
    cursor: pointer;
    padding: 5px;
}

.flowboard-item-actions .fas:hover {
    color: #495057;
}

/* Para tareas */
.flowboard-task-header {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    /* Espacio entre checkbox y contenido */
}

.flowboard-task-header input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primario);
    /* Color del check */
}

.flowboard-item-card.completed .flowboard-item-content {
    text-decoration: line-through;
    color: #adb5bd;
    opacity: 0.7;
}

.flowboard-item-card.completed {
    background-color: #f1f3f5;
    /* Fondo más tenue para completadas */
    /* opacity: 0.8; */
}

/* Colores de las tarjetas (ejemplos) */
.flowboard-color-red {
    border-left: 5px solid #e74c3c;
}

.flowboard-color-blue {
    border-left: 5px solid #3498db;
}

.flowboard-color-green {
    border-left: 5px solid #2ecc71;
}

.flowboard-color-yellow {
    border-left: 5px solid #f1c40f;
}

.flowboard-color-purple {
    border-left: 5px solid #9b59b6;
}

.flowboard-color-grey {
    border-left: 5px solid #95a5a6;
}

.flowboard-color-default {
    border-left: 5px solid #e9ecef;
}


/* Context Menu (inicialmente oculto) */
.flowboard-context-menu {
    position: absolute;
    background-color: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    z-index: 1100;
    padding: 5px 0;
    min-width: 180px;
    display: none;
    /* Se mostrará con JS */
}

.flowboard-context-menu button {
    display: block;
    width: 100%;
    padding: 8px 15px;
    text-align: left;
    background: none;
    border: none;
    font-size: 0.85rem;
    color: #333;
    cursor: pointer;
}

.flowboard-context-menu button:hover {
    background-color: #f5f5f5;
}

.flowboard-context-menu button i {
    margin-right: 8px;
    width: 16px;
    /* Para alinear iconos */
    text-align: center;
}

.flowboard-context-menu hr {
    margin: 5px 0;
    border-top-color: #eee;
}

.flowboard-color-palette {
    display: flex;
    padding: 5px 15px;
    gap: 5px;
}

.flowboard-color-option {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Colores para las opciones de paleta */
.flowboard-color-option[data-color="default"] {
    background-color: #e9ecef;
}

.flowboard-color-option[data-color="red"] {
    background-color: #e74c3c;
}

.flowboard-color-option[data-color="blue"] {
    background-color: #3498db;
}

.flowboard-color-option[data-color="green"] {
    background-color: #2ecc71;
}

.flowboard-color-option[data-color="yellow"] {
    background-color: #f1c40f;
}

.flowboard-color-option[data-color="purple"] {
    background-color: #9b59b6;
}

.flowboard-color-option[data-color="grey"] {
    background-color: #95a5a6;
}

/* Estilos para la sección contextual dentro del FlowBoard */
.flowboard-contextual-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px dashed rgba(var(--color-primario-rgb), 0.3);
}

.flowboard-contextual-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primario);
    margin-bottom: 10px;
    padding-left: 5px;
}

.flowboard-contextual-section .flowboard-item-card {
    /* Estilos específicos para tarjetas contextuales si es necesario */
}

.flowboard-empty-message {
    /* Estilo existente para el mensaje de FlowBoard vacío */
}

/* Drag & Drop (SortableJS) placeholders */
.flowboard-item-card.sortable-ghost {
    opacity: 0.4;
    background: #cce5ff;
    /* Un color distintivo para el fantasma */
}

.flowboard-item-card.sortable-drag {
    /* Estilo mientras se arrastra si se desea */
}

.flowboard-contextual-section {
    margin-bottom: 20px;
    /* Espacio antes del resto de los ítems */
    padding-bottom: 15px;
    /* Espacio interno */
    border-bottom: 2px dashed rgba(var(--color-primario-rgb), 0.3);
    /* Un separador sutil pero claro */
}

.flowboard-contextual-section-title {
    font-size: 1rem;
    /* Un poco más pequeño que el título principal del FlowBoard */
    font-weight: 600;
    color: var(--color-primario);
    /* Usar color primario para destacar */
    margin-bottom: 10px;
    padding-left: 5px;
    /* Pequeña indentación o alineación */
}

.flowboard-contextual-section .flowboard-item-card {
    /* Podríamos aplicar un estilo ligeramente diferente a las tarjetas aquí si queremos */
    /* Por ejemplo, un fondo un poco más destacado o sin el outline general si ya están agrupadas */
    /* background-color: #f0f8ff; */
    /* AliceBlue muy claro */
}

/* Ocultar el mensaje de "FlowBoard vacío" si la sección contextual tiene items,
   incluso si el resto del FlowBoard está vacío. Esta lógica es más compleja
   y se manejará principalmente en JS. Esta regla es un extra. */
.flowboard-contextual-section+.flowboard-empty-message {
    /* Si hay una sección contextual con contenido, el mensaje de vacío general no debería aparecer
       si el único contenido son los items contextuales. Esta lógica es más compleja
       y se manejará principalmente en JS. Esta regla es un extra. */
}

/* ============================================== */
/* == ESTILOS PARA FLOWBOARD ACTIVO (UX MEJORADA) == */
/* ============================================== */

body.flowboard-ux-active .main-content {
    margin-right: var(--flowboard-panel-width);
    /* Empuja el contenido principal */
}

body.flowboard-ux-active .flowboard-panel {
    right: 0;
    /* Muestra el panel Flowboard */
}

/* Ajuste para el icono del Flowboard cuando el panel está activo */
/* Podrías querer ocultarlo o moverlo */
/*
body.flowboard-ux-active .flowboard-icon-container {
    right: calc(var(--flowboard-panel-width) + 25px); // Ejemplo: moverlo a la izquierda del panel
}
*/

/* ===================================================== */
/* == ESTILOS PARA ALERTAS DE EVENTOS PRÓXIMOS EN FLOWBOARD == */
/* ===================================================== */

#flowboardUpcomingEventsAlertsContainer {
    padding: 10px 15px;
    margin-bottom: 10px;
    /* Espacio antes del título "Mi FlowBoard" */
    background-color: rgba(var(--color-primario-rgb), 0.05);
    /* Fondo sutil */
    border-bottom: 1px solid rgba(var(--color-primario-rgb), 0.1);
    max-height: 200px;
    /* Altura máxima para evitar que ocupe mucho espacio */
    overflow-y: auto;
    /* Scroll si hay muchas alertas */
}

.flowboard-event-alert {
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 6px;
    border: 1px solid;
    position: relative;
    /* Para posibles adornos */
}

.flowboard-event-alert h6 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 0.95rem;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.flowboard-event-alert h6 .fas {
    /* Icono dentro del h6 */
    margin-right: 8px;
    font-size: 1.1em;
    /* Un poco más grande el icono */
}

.flowboard-event-alert ul {
    list-style: none;
    padding-left: 5px;
    /* Indentación ligera para los items */
    margin-bottom: 0;
}

.flowboard-event-alert ul li {
    font-size: 0.85rem;
    padding: 3px 0;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.08);
    display: flex;
    /* Para alinear hora y texto */
    justify-content: space-between;
    align-items: center;
}

.flowboard-event-alert ul li:last-child {
    border-bottom: none;
}

.flowboard-event-alert .event-time {
    font-weight: 600;
    margin-right: 8px;
    flex-shrink: 0;
    /* Evita que la hora se encoja */
    color: inherit;
    /* Hereda el color de la alerta */
}

.flowboard-event-alert .event-text {
    flex-grow: 1;
    /* El texto ocupa el espacio restante */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Evita que el texto se divida en múltiples líneas por defecto */
    /* Si quieres que el texto se envuelva, comenta la línea anterior y ajusta el diseño */
}


/* Estilos específicos para alertas de HOY */
.flowboard-event-alert.alert-today {
    border-color: #ffc107;
    /* Amarillo advertencia de Bootstrap */
    background-color: rgba(255, 193, 7, 0.1);
    color: #856404;
    /* Texto oscuro para amarillo */
}

.flowboard-event-alert.alert-today h6 .fas {
    color: #dda70c;
    /* Icono un poco más oscuro */
}

/* Estilos específicos para alertas de MAÑANA */
.flowboard-event-alert.alert-tomorrow {
    border-color: #17a2b8;
    /* Azul info de Bootstrap */
    background-color: rgba(23, 162, 184, 0.1);
    color: #0c5460;
    /* Texto oscuro para azul info */
}

.flowboard-event-alert.alert-tomorrow h6 .fas {
    color: #138496;
    /* Icono un poco más oscuro */
}

/* Mensaje cuando no hay eventos próximos */
#flowboardUpcomingEventsAlertsContainer .no-upcoming-events {
    font-size: 0.9rem;
    text-align: center;
    color: #6c757d;
    /* Color gris de Bootstrap */
    padding: 10px 0;
}

/* ============================================================ */
/* == NUEVOS ESTILOS PARA ALERTAS DE EVENTOS (TARJETAS ANIMADAS) == */
/* ============================================================ */

#flowboardUpcomingEventsAlertsContainer {
    position: relative;
    /* Para posicionar las tarjetas de alerta dentro */
    min-height: 100px;
    /* Altura para una línea de texto y buen padding */
    padding: 10px 20px;
    /* Padding interno */
    background-color: var(--color-primario);
    /* Un azul oscuro, como el de .alert-primary de Bootstrap */
    color: #cce5ff;
    /* Texto claro, complementario al azul */
    border-radius: 8px;
    /* Bordes más redondeados */
    display: flex;
    /* Para centrar contenido si es necesario (ej. mensaje "sin eventos") */
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Sombra un poco más pronunciada */
    margin-bottom: 15px;
    /* Más espacio si hay otros elementos debajo */
    overflow: hidden;
    /* CRUCIAL: oculta las tarjetas mientras se animan fuera del contenedor */
}

.flowboard-animated-alert-item {
    position: absolute;
    /* Se superponen y se controlan con JS/CSS */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 15px;
    /* Padding interno de la tarjeta */
    font-size: 1em;
    /* Tamaño de fuente principal para la alerta */
    line-height: 1.5;

    opacity: 0;
    /* Inicia invisible */
    transform: translateY(40px);
    /* Inicia deslizada hacia abajo */
    transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
    /* No interactuable cuando no está visible */
    text-align: center;
}

.flowboard-animated-alert-item.visible {
    opacity: 1;
    transform: translateY(0);
    /* Se desliza a su posición final */
    pointer-events: auto;
    /* Aplicamos la animación de brillo/pulso solo al item visible */
    animation: pulse-glow-primary 2.8s infinite ease-in-out;
}

.flowboard-animated-alert-item.exiting {
    opacity: 0;
    transform: translateY(-40px);
    /* Se desliza hacia arriba y desaparece */
    pointer-events: none;
}

/* Animación de brillo/pulso sutil para la tarjeta activa */
@keyframes pulse-glow-primary {
    0% {
        box-shadow: 0 0 4px 0px rgba(var(--color-primario-rgb), 0.4);
        /* Usamos el color primario de la app para el brillo */
    }

    50% {
        box-shadow: 0 0 12px 4px rgba(var(--color-primario-rgb), 0.65);
    }

    100% {
        box-shadow: 0 0 4px 0px rgba(var(--color-primario-rgb), 0.4);
    }
}

/* Estilo para los iconos dentro de cada alerta */
.flowboard-animated-alert-item .fas {
    margin-right: 10px;
    font-size: 1.15em;
    /* Iconos ligeramente más grandes */
    color: #f6e05e;
    /* Amarillo dorado para los iconos */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    /* Sombra sutil al icono */
}

/* Estilo para el texto "HOY:", "MAÑANA:" */
.flowboard-animated-alert-item strong {
    color: #ff5656;
    /* Un rojo-rosado más suave para el "HOY/MAÑANA" */
    font-weight: 600;
    /* Semibold */
    margin-right: 8px;
}

/* Mensaje cuando no hay eventos para mostrar */
#flowboardUpcomingEventsAlertsContainer .no-upcoming-events-animated {
    font-size: 1em;
    color: #ffffff;
}

/* ============================================== */
/* == ESTILOS PARA MODAL DE NOTAS (FLOWBOARD)  == */
/* ============================================== */

/* Aumentar el ancho del modal de SweetAlert2 para las notas */
.swal2-popup.swal2-custom-width {
    width: 700px !important;
    /* Un ancho más cómodo para el editor */
    max-width: 90vw;
    /* Asegurar que no exceda el ancho de la ventana en móviles */
}

/* Contenedor del editor Quill dentro del modal */
.swal-quill-container {
    margin-top: 1rem;
    /* Espacio sobre el editor */
    margin-bottom: 1rem;
    /* Espacio bajo el editor */
    text-align: left;
    /* Alinear contenido a la izquierda */
}

/* Editor Quill */
#swal-quill-editor {
    height: 250px;
    /* Altura generosa para el contenido de la nota */
    background-color: #fff;
}

/* Ajustes para el label del editor y título en el modal */
.swal-quill-container label,
.swal2-popup .text-start label {
    display: block;
    margin-bottom: .5rem;
    font-weight: 500;
    color: #495057;
}

.swal2-popup .swal2-input {
    margin: 0 !important;
    /* Resetear margen por defecto para controlar con nuestro div */
    width: 100% !important;
}

/* Clase para la altura del textarea que ya estaba en el JS pero no en el CSS */
/* Se mantiene por si se usa en otro lugar, aunque ya no en las notas */
.swal-textarea-custom-height {
    height: 200px !important;
}

/* ============================================== */
/* == ESTILOS PARA CALCULADORA NUMÉRICA        == */
/* ============================================== */

.calculator-container {
    max-width: 400px;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    background-color: #f8f9fa;
    padding: 15px;
}

.calculator-display {
    background-color: #212529;
    /* Negro oscuro */
    color: #fff;
    padding: 15px 20px;
    border-radius: 6px;
    text-align: right;
    margin-bottom: 15px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.calculator-display .previous-entry {
    font-size: 1rem;
    color: #adb5bd;
    /* Gris claro */
    min-height: 1.5rem;
    /* Asegura espacio aunque esté vacío */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calculator-display .current-entry {
    font-size: 2.5rem;
    font-weight: bold;
    word-wrap: break-word;
    /* Para que números largos se rompan */
    line-height: 1.2;
}

.calculator-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.calculator-keys button {
    height: 60px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    background-color: #fff;
    font-size: 1.5rem;
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
}

.calculator-keys button:hover {
    background-color: #e9ecef;
}

.calculator-keys button:active {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    transform: translateY(1px);
}

.calculator-keys .operator {
    background-color: rgba(var(--color-primario-rgb), 0.8);
    color: #fff;
    border-color: rgba(var(--color-primario-rgb), 0.9);
}

.calculator-keys .operator:hover {
    background-color: var(--color-primario);
}

.calculator-keys .all-clear {
    background-color: #ffc107;
    /* Amarillo */
    color: #333;
    border-color: #ffc107;
}

.calculator-keys .all-clear:hover {
    background-color: #e9b006;
}

.calculator-keys .equal-sign {
    background-color: #198754;
    /* Verde */
    color: #fff;
    border-color: #198754;
    grid-column: span 2;
    /* Ocupa dos columnas */
}

.calculator-keys .equal-sign:hover {
    background-color: #157347;
}

.calculator-keys .zero-key {
    grid-column: span 2;
    /* El cero ocupa dos columnas */
}

/* Cinta de Historial */
.calculator-history-container {
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.calculator-history-container h6 {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
    color: var(--color-primario);
}

.calculator-history {
    flex-grow: 1;
    height: 350px;
    /* Altura fija para la cinta */
    overflow-y: auto;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.9rem;
}

.calculator-history .history-item {
    padding: 8px 5px;
    border-bottom: 1px dotted #e9ecef;
    display: flex;
    justify-content: space-between;
    word-break: break-all;
}

.calculator-history .history-item:last-child {
    border-bottom: none;
}

.calculator-history .history-item .operation {
    color: #6c757d;
}

.calculator-history .history-item .result {
    font-weight: bold;
    color: #212529;
}

.calculator-history .initial-text {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
}

/* ============================================== */
/* == (NUEVO) ESTILO PARA CALCULADORA NUMÉRICA MEJORADA == */
/* ============================================== */

.calculator-keys .delete-key {
    background-color: #6c757d;
    /* Gris secundario de Bootstrap */
    color: #fff;
    border-color: #6c757d;
}

.calculator-keys .delete-key:hover {
    background-color: #5a6268;
}

/* Ajuste para que los operadores tengan el mismo alto que los demás botones */
.calculator-keys .operator i {
    vertical-align: middle;
}

/* ============================================== */
/* == (NUEVO) ESTILOS PARA PANEL DE EMAIL CLIENTE == */
/* ============================================== */

/* Estilo para el botón de subpanel activo dentro del panel de email */
#perfilEmail .d-flex .btn-primary {
    font-weight: bold;
}

#perfilEmail .d-flex .btn-outline-secondary {
    font-weight: normal;
}

/* Espaciado para los formularios dentro de los subpaneles */
#subPanelEnviarEmail,
#subPanelConfigEmail {
    padding-top: 1rem;
}

/* Ajuste del placeholder para el textarea del cuerpo del email */
#emailCuerpo::placeholder {
    font-style: italic;
    color: #a9a9a9;
}

/* ============================================== */
/* == (NUEVO) ESTILOS PARA MODAL EDITOR PLANTILLA CON QUILL == */
/* ============================================== */

.modal-plantilla-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-plantilla-container {
    background-color: #f0f2f5;
    width: 95vw;
    height: 95vh;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    overflow: hidden;
}

.modal-plantilla-sidebar {
    width: 280px;
    background-color: #fff;
    padding: 20px;
    overflow-y: auto;
    flex-shrink: 0;
    border-right: 1px solid #dee2e6;
}

.modal-plantilla-sidebar h5,
.modal-plantilla-sidebar h6 {
    color: var(--color-primario);
}

.modal-plantilla-main {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background-color: #e0e0e0; /* Fondo gris tipo "escritorio de Word" */
    padding: 20px; /* Espacio para que la hoja "respire" */
}

/* Contenedor del editor y su barra de herramientas */
#plantillaEditorWrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Área de scroll para el documento */
.quill-page-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    background-color: #e0e0e0;
    /* Fondo gris tipo Word */
}

/* Hoja de papel simulada para ambos editores */
#quillPlantillaEditor .ql-editor,
#quillPoderGenerado .ql-editor {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    border: 1px solid #ccc;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    font-size: 12pt;
    line-height: 1.5;
    /* Los estilos de tamaño y márgenes se aplican con JS */
}

/* Contenedor de Quill para ambos editores */
#quillPlantillaEditor,
#quillPoderGenerado {
    border: none !important;
    height: auto;
}

/* Barra de herramientas de Quill para ambos editores */
#quillPlantillaEditor .ql-toolbar.ql-snow,
#quillPoderGenerado .ql-toolbar.ql-snow {
    position: sticky;
    top: 0;
    background-color: #f0f2f5;
    z-index: 1;
    border: none;
    border-bottom: 1px solid #ccc;
    flex-shrink: 0;
    padding: 8px;
}

/* Contenedor wrapper para ambos editores */
#plantillaEditorWrapper,
#quillPoderGeneradoWrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.placeholders-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.btn-placeholder {
    font-size: 0.8rem !important;
    padding: 4px 8px !important;
    background-color: #e9ecef !important;
    color: #495057 !important;
    border-color: #ced4da !important;
}

.btn-placeholder:hover {
    background-color: #d3d9df !important;
}

/* ============================================== */
/* == (NUEVO) ESTILOS PARA SECCIÓN DE CONSULTAS  == */
/* ============================================== */

/* Estilo para cada item de consulta en el acordeón */
.consulta-item .accordion-button {
    font-size: 1rem;
    padding: 0.8rem 1.25rem;
}

/* Cuando el botón del acordeón no está colapsado (está abierto) */
.consulta-item .accordion-button:not(.collapsed) {
    background-color: rgba(var(--color-primario-rgb), 0.1);
    color: var(--color-primario);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
}

.consulta-item .accordion-button::after {
    /* Opcional: Cambiar el color del ícono de flecha de Bootstrap */
    /* filter: brightness(0) saturate(100%) invert(29%) sepia(85%) saturate(3000%) hue-rotate(218deg) brightness(98%) contrast(92%); */
}

/* Contenedor del detalle de la consulta */
.consulta-detalle {
    background-color: #f8f9fa;
    /* Un fondo muy claro para el contenido */
    padding: 1.25rem;
}

/* Estilo para las tarjetas dentro del detalle */
.consulta-detalle .card {
    border: 1px solid #dee2e6;
}

.consulta-detalle .card-header {
    background-color: #e9ecef;
    font-size: 0.9rem;
}

.consulta-detalle .card-footer {
    background-color: #f1f3f5;
}

.consulta-detalle .list-group-item {
    font-size: 0.85rem;
    background-color: transparent;
    /* Heredar fondo del card-body */
}

.consulta-detalle textarea.form-control {
    resize: vertical; /* Permite al usuario estirar el área de texto verticalmente */
    min-height: 70px; /* Una altura mínima inicial más cómoda */
}

/* ============================================== */
/* == (NUEVO) ESTILO PARA BOTÓN DE ACCIÓN DINÁMICO == */
/* ============================================== */

.btn-dynamic-action {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
    color: #fff;
    font-weight: 500;
    transition: background-color 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
}

.btn-dynamic-action:hover {
    /* Ligeramente más oscuro en hover para feedback */
    filter: brightness(90%);
    color: #fff;
}

/* ================================================== */
/* == (NUEVO) ESTILO PARA BOTÓN DE OUTLINE DINÁMICO == */
/* ================================================== */

.btn-dynamic-outline {
    color: var(--color-primario);
    border-color: var(--color-primario);
    background-color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-dynamic-outline:hover {
    color: #fff;
    background-color: var(--color-primario);
    border-color: var(--color-primario);
}

/* =================================================================== */
/* == INICIO: NUEVOS ESTILOS PARA LA LISTA DE CLIENTES ACTIVOS == */
/* =================================================================== */

/* Contenedor principal de la nueva lista de clientes */
.client-list-container {
    font-family: Arial, sans-serif;
}

/* Cabecera de la lista (reemplaza a <thead>) */
.client-list-header {
    display: grid;
    /* 5 columnas: Cliente, Tipo Caso, Materia, Solicitudes, Inactividad */
    grid-template-columns: 2.5fr 1.5fr 1.5fr 1fr 1fr;
    gap: 15px;
    padding: 10px 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid #dee2e6;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Ocultar cabecera en pantallas pequeñas */
@media (max-width: 992px) {
    .client-list-header {
        display: none;
    }
}

/* Tarjeta individual para cada cliente */
.client-card {
    display: grid;
    /* Mismas 5 columnas que la cabecera */
    grid-template-columns: 2.5fr 1.5fr 1.5fr 1fr 1fr;
    gap: 15px;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border-left: 5px solid transparent; /* Borde para estado de inactividad */
    transition: all 0.3s ease;
}

.client-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* Botón de Nombre y Apellidos (NUEVO) */
.client-name-action {
    font-weight: 600;
    color: #343a40;
    font-size: 1rem;
    background-color: transparent;
    border: none;
    padding: 5px;
    margin: -5px; /* Compensa el padding para alinear */
    border-radius: 6px;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.client-name-action:hover {
    background-color: var(--color-primario);
    color: #fff;
}

/* Contenedor para Tipo de Caso y Materia */
.client-details-cell .detail-label {
    display: block;
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 2px;
}
.client-details-cell .detail-value {
    font-size: 0.9rem;
    color: #495057;
}

/* Contenedor para los indicadores de estado */
.client-status-cell {
    text-align: center;
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Estilos para el indicador de Inactividad */
.status-indicator.inactivity-low { background-color: #e9ecef; color: #495057; }
.status-indicator.inactivity-medium { background-color: #fff3cd; color: #664d03; }
.status-indicator.inactivity-high { background-color: #f8d7da; color: #58151c; }
.status-indicator .fa-moon { color: #ffc107; }
.status-indicator .fa-exclamation-triangle { color: #dc3545; }

/* Estilos para el indicador de Solicitudes */
.status-indicator.request-new-message { background-color: #f8d7da; color: #58151c; }
.status-indicator.request-status-check { background-color: #cff4fc; color: #055160; }
.status-indicator .fa-comment-dots { color: #dc3545; }
.status-indicator .fa-file-alt { color: #0dcaf0; }

/* Adaptación para pantallas más pequeñas (tablets y móviles) */
@media (max-width: 992px) {
    .client-card {
        grid-template-columns: 1fr; /* Una sola columna */
        grid-template-rows: auto auto; /* Dos filas */
        gap: 10px;
        padding: 15px;
    }

    .client-name-action {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        width: 100%;
        text-align: center;
        padding: 8px;
        margin: 0;
    }

    /* Ocultamos las celdas de texto plano que no caben */
    .client-details-cell {
        display: none; 
    }

    .client-status-cell {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        text-align: center;
        display: flex;
        justify-content: center;
        gap: 10px;
    }
}

/* ================================================================= */
/* == FIN: NUEVOS ESTILOS PARA LA LISTA DE CLIENTES ACTIVOS == */
/* ================================================================= */

/* =================================================================== */
/* == INICIO: ESTILOS ADICIONALES PARA LISTAS UNIFICADAS        == */
/* =================================================================== */

/* Estilo para tarjetas con menos información (ej. Archivados) */
.client-card-simple {
    grid-template-columns: 3fr 1fr; /* 2 columnas: Nombre y Acciones */
}

/* Contenedor para los botones de acción en las tarjetas */
.client-actions-cell {
    text-align: right;
}

/* Adaptación responsive para la tarjeta simple */
@media (max-width: 992px) {
    .client-card-simple {
        grid-template-columns: 1fr; /* Mantiene una sola columna */
        grid-template-rows: auto auto; /* Nombre arriba, acciones abajo */
        gap: 15px;
    }

    .client-actions-cell {
        text-align: center;
        display: flex;
        justify-content: center;
        gap: 10px;
    }
}

/* Un pequeño ajuste para los detalles en las tarjetas de Causa Judicial */
.client-details-cell .detail-label-small {
    display: block;
    font-size: 0.7rem;
    color: #888;
    margin-bottom: 2px;
    font-weight: 600;
    text-transform: uppercase;
}
/* ================================================================= */
/* == FIN: ESTILOS ADICIONALES PARA LISTAS UNIFICADAS           == */
/* ================================================================= */

/* =================================================================== */
/* == INICIO: NUEVOS ESTILOS PARA LA LISTA DE EVENTOS           == */
/* =================================================================== */

.event-list-container {
    font-family: Arial, sans-serif;
}

/* Cabecera de la lista de eventos */
.event-list-header {
    display: grid;
    /* 5 columnas: Evento, Fecha, Cliente, Asistencia, Acciones */
    grid-template-columns: 2.5fr 1.5fr 2fr 1fr 1fr;
    gap: 15px;
    padding: 10px 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid #dee2e6;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tarjeta individual para cada evento */
.event-card {
    display: grid;
    grid-template-columns: 2.5fr 1.5fr 2fr 1fr 1fr;
    gap: 15px;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border-left: 5px solid var(--color-primario);
    /* Borde de color primario */
    transition: all 0.3s ease;
}

.event-card.realizado {
    border-left-color: #6c757d;
    /* Borde gris para eventos realizados */
    background-color: #f8f9fa;
    opacity: 0.7;
}

.event-card.realizado .event-description,
.event-card.realizado .event-details-cell {
    text-decoration: line-through;
    color: #6c757d;
}

.event-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* Celdas de la tarjeta de evento */
.event-description {
    font-weight: 600;
    color: #343a40;
    font-size: 0.95rem;
    cursor: pointer;
}

.event-description:hover {
    color: var(--color-primario);
}

.event-details-cell,
.event-status-cell,
.event-actions-cell {
    font-size: 0.9rem;
    color: #495057;
}

.event-client-link {
    font-weight: 500;
    color: #0d6efd;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.event-client-link:hover {
    text-decoration: underline;
    color: #0a58ca;
}

.event-actions-cell {
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.event-actions-cell .btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
}

/* Ocultar cabecera en móviles */
@media (max-width: 992px) {
    .event-list-header {
        display: none;
    }

    .event-card {
        grid-template-columns: 1fr;
        /* Una sola columna */
        gap: 12px;
        padding: 15px;
    }

    .event-card>div {
        text-align: center;
        /* Centrar todo en móvil */
    }

    .event-card::before {
        /* Usar pseudo-elementos para etiquetas en móvil */
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
        font-size: 0.75rem;
        margin-bottom: 4px;
    }

    .event-card .event-details-cell:nth-of-type(2)::before {
        content: 'Fecha y Hora';
        display: block;
    }

    .event-card .event-details-cell:nth-of-type(3)::before {
        content: 'Cliente Asociado';
        display: block;
    }

    .event-card .event-status-cell::before {
        content: 'Asistencia';
        display: block;
    }
}

Nuevo Código a Pegar (styles.css)
/* VARIABLES DE COLOR (valores iniciales) */
:root {
    --color-primario: #0d6efd;
    --color-primario-rgb: 13, 110, 253;
    --color-subfondo: rgba(var(--color-primario-rgb), 0.08);
    --color-postit1: rgba(var(--color-primario-rgb), 0.15);
    --color-postit2: rgba(var(--color-primario-rgb), 0.25);
    --color-postit3: rgba(var(--color-primario-rgb), 0.35);
    --color-postit4: rgba(var(--color-primario-rgb), 0.45);
    --color-postit5: rgba(var(--color-primario-rgb), 0.55);
    --flowboard-panel-width: 380px;
}

/* RESET BÁSICO Y BODY */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
    color: #333;
    overflow-x: hidden; /* Previene scroll horizontal indeseado */
}

/* SIDEBAR */
.sidebar {
    width: 250px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    padding: 20px 10px;
    background: var(--color-primario);
    color: #fff;
    overflow-y: auto;
    transition: all 0.3s ease;
}

.sidebar-logo {
    display: block;
    margin: 0 auto 15px auto;
    max-width: 120px;
    border-radius: 4px;
}

.sidebar h1 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
}

.sidebar a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 5px;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar a:hover,
.sidebar a.active {
    background-color: #fff;
    color: var(--color-primario);
}

.sidebar-links-interes {
    margin-top: 20px;
}

.sidebar-links-interes a {
    display: block;
    background-color: rgba(var(--color-primario-rgb), 0.2);
    color: #ffffff;
    text-decoration: none;
    margin: 5px 0;
    padding: 8px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    transition: background 0.2s ease;
}

.sidebar-links-interes a:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* MAIN CONTENT */
.main-content {
    margin-left: 250px;
    padding: 20px;
    transition: margin-right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), margin-left 0.3s ease;
}

.main-header {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    justify-content: space-between;
    align-items: center;
    gap: 10px; /* Espacio entre elementos */
}

.hidden {
    display: none !important;
}

/* COMPONENTES GENERALES (CARD, TABLAS, BOTONES) */
.card-custom {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    padding: 20px;
    margin-bottom: 20px;
}

.colored-subsection {
    background: rgba(var(--color-primario-rgb), 0.05);
    border: 1px solid rgba(var(--color-primario-rgb), 0.1);
    border-radius: 8px;
    padding: 20px;
}

.table {
    background: #fff;
    border-radius: 6px;
    font-size: 0.9rem;
    border: 1px solid #dee2e6;
}

.table th,
.table td {
    vertical-align: middle;
    border-top: 1px solid #dee2e6;
}

.table thead th {
    border-bottom: 2px solid #dee2e6;
    background-color: #f8f9fa;
}

/* NUEVO: Wrapper para tablas anchas */
.table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
    border: 1px solid #dee2e6;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.table-responsive-wrapper .table {
    margin-bottom: 0;
    border: none;
}

/* ... (Estilos de botones, calendario, etc. que no necesitan cambios drásticos) ... */
/* ... (Se omiten por brevedad, pero deben estar aquí) ... */

/* =================================================================== */
/* == INICIO: ESTILOS PARA LISTAS (CLIENTES, EVENTOS, CONSULTAS) == */
/* =================================================================== */

.client-list-container, .event-list-container {
    font-family: Arial, sans-serif;
}

.client-list-header, .event-list-header {
    display: grid;
    gap: 15px;
    padding: 10px 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid #dee2e6;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.client-list-header { grid-template-columns: 2.5fr 1.5fr 1.5fr 1fr 1fr; }
.event-list-header { grid-template-columns: 2.5fr 1.5fr 2fr 1fr 1fr; }

.client-card, .event-card {
    display: grid;
    gap: 15px;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border-left: 5px solid transparent;
    transition: all 0.3s ease;
}
.client-card { grid-template-columns: 2.5fr 1.5fr 1.5fr 1fr 1fr; }
.event-card { grid-template-columns: 2.5fr 1.5fr 2fr 1fr 1fr; border-left-color: var(--color-primario); }

.client-card:hover, .event-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.client-name-action {
    font-weight: 600;
    color: #343a40;
    font-size: 1rem;
    background-color: transparent;
    border: none;
    padding: 5px;
    margin: -5px;
    border-radius: 6px;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.client-name-action:hover {
    background-color: var(--color-primario);
    color: #fff;
}

.client-details-cell .detail-value, .event-details-cell {
    font-size: 0.9rem;
    color: #495057;
}

.client-status-cell { text-align: center; }
.status-indicator { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 500; }
.status-indicator.inactivity-medium { background-color: #fff3cd; color: #664d03; }
.status-indicator.inactivity-high { background-color: #f8d7da; color: #58151c; }
.status-indicator.request-new-message { background-color: #f8d7da; color: #58151c; }
.status-indicator.request-status-check { background-color: #cff4fc; color: #055160; }

.event-description { font-weight: 600; color: #343a40; font-size: 0.95rem; cursor: pointer; }
.event-description:hover { color: var(--color-primario); }

/* ... (Aquí irían el resto de tus estilos que no necesitan cambios) ... */

/* =================================================================== */
/* ================== MEDIA QUERIES PARA RESPONSIVE ================== */
/* =================================================================== */

/* Para tablets y móviles (992px es un buen punto de quiebre) */
@media (max-width: 992px) {
    /* --- LAYOUT GENERAL --- */
    .sidebar {
        position: relative;
        width: 100%;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding: 10px;
        overflow-y: hidden;
    }
    .sidebar-logo, .sidebar h1, .sidebar>p, .sidebar-links-interes {
        display: none;
    }
    .sidebar a {
        flex-grow: 1;
        text-align: center;
        margin: 3px;
        padding: 8px 10px;
    }
    .main-content {
        margin-left: 0;
        padding: 15px;
    }
    .card-custom, .colored-subsection {
        padding: 15px;
    }

    /* --- LISTAS DE TARJETAS (CLIENTES, EVENTOS, CONSULTAS) --- */
    .client-list-header, .event-list-header {
        display: none;
    }
    .client-card, .event-card {
        grid-template-columns: 1fr; /* Apilar todo en una columna */
        gap: 10px;
        padding: 15px;
    }
    .client-card > *, .event-card > * {
        text-align: center; /* Centrar contenido de las celdas */
    }
    .client-name-action {
        text-align: center;
        font-size: 1.1rem;
    }
    /* Ocultar celdas menos importantes en móvil */
    .client-card .client-details-cell, .event-card .event-details-cell {
        display: none;
    }
    /* Mostrar las importantes y añadirles una etiqueta */
    .event-card .event-details-cell:nth-of-type(2), /* Fecha y Hora */
    .event-card .event-details-cell:nth-of-type(3)  /* Cliente Asociado */ {
        display: block;
        padding-top: 5px;
        border-top: 1px dotted #eee;
    }
    .event-card .event-details-cell:nth-of-type(2)::before {
        content: 'Fecha: ';
        font-weight: 600;
        color: #6c757d;
    }
     .event-card .event-details-cell:nth-of-type(3)::before {
        content: 'Cliente: ';
        font-weight: 600;
        color: #6c757d;
    }
    .client-status-cell {
        display: flex;
        justify-content: center;
        gap: 15px;
        padding-top: 10px;
        border-top: 1px dotted #eee;
    }

    /* --- CALENDARIO --- */
    .calendar-month-cell {
        min-height: 80px; /* Celdas más pequeñas */
    }
    .cell-bottom {
        min-height: 50px;
    }
    .event-item {
        font-size: 0.7rem;
        padding: 2px 4px;
    }
    .event-item .event-time {
        display: none; /* Ocultar hora para ahorrar espacio */
    }
    .day-number {
        font-size: 0.85em;
    }
    .five-days-grid {
        grid-template-columns: 1fr; /* Apilar días en una columna */
    }

    /* --- PERFIL CLIENTE --- */
    #perfilClienteNav {
        justify-content: center;
    }
    #tablaPerfilBitacora td:first-child {
        min-width: 80px;
    }
    #tablaPerfilBitacora td:last-child {
        width: auto; /* Permitir que el botón de eliminar se ajuste */
    }

    /* --- CONTABILIDAD --- */
    .summary-card-value {
        font-size: 1.8rem;
    }
    .summary-card-label {
        font-size: 0.8rem;
    }

    /* --- AJUSTES Y UTILIDADES --- */
    #ajustesNav, #utilidadesNav {
        justify-content: center;
    }
    .calculator-container {
        padding: 10px;
    }
    .calculator-keys button {
        height: 50px;
        font-size: 1.2rem;
    }
    .calculator-display .current-entry {
        font-size: 2rem;
    }

    /* --- FLOWBOARD --- */
    :root {
        --flowboard-panel-width: 100%; /* Ocupar toda la pantalla */
    }
    body.flowboard-ux-active .main-content {
        margin-right: 0; /* No empujar el contenido */
    }
    .flowboard-icon-container {
        bottom: 15px;
        right: 15px;
    }
}

/* ============================================== */
/* == (NUEVO) ESTILOS PARA SALDO EN TARJETAS   == */
/* ============================================== */

.summary-card-value.saldo-positivo {
    color: #198754;
    /* Verde (Bootstrap Success) */
}

.summary-card-value.saldo-negativo {
    color: #dc3545;
    /* Rojo (Bootstrap Danger) */
}

/* ============================================== */
/* == (NUEVO) ESTILOS PARA HISTORIAL DE EMAILS   == */
/* ============================================== */

/* Estilos para la tabla del historial en el panel de Email */
#historialEmailTable {
    /* Hereda estilos de .table, no se necesita mucho más */
    margin-bottom: 0;
    /* Para que encaje bien en el wrapper */
}

#historialEmailTable tbody tr {
    cursor: pointer;
    /* Indica que las filas son clickeables */
}

/* Estilos para el modal de detalle del email */
#modalHistorialEmailDetalle .modal-header {
    background-color: var(--color-primario);
    color: white;
}

#modalHistorialEmailDetalle .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

#modalHistorialEmailDetalle .modal-body {
    font-size: 0.95rem;
}

#modalHistorialEmailDetalle .modal-body strong {
    color: #333;
}

#modalHistorialEmailDetalle .email-content-viewer {
    background-color: #ffffff;
    /* Fondo blanco para el contenido del correo */
    max-height: 400px;
    overflow-y: auto;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Estilos para los adjuntos en el modal */
#modalHistorialEmailDetalle .modal-body h6 {
    font-weight: bold;
    font-size: 0.9rem;
    color: #495057;
    margin-top: 1rem;
}

#modalHistorialEmailDetalle .modal-body ul {
    padding-left: 1.2rem;
    margin-bottom: 0;
}

#modalHistorialEmailDetalle .modal-body ul li a {
    text-decoration: none;
    color: #0d6efd;
}

#modalHistorialEmailDetalle .modal-body ul li a:hover {
    text-decoration: underline;
}

/* ============================================== */
/* == (NUEVO) ESTILOS PARA TARJETAS DE HISTORIAL DE EMAILS == */
/* ============================================== */

.email-history-card-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Espacio entre tarjetas */
}

.email-history-card {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 15px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border-left: 5px solid var(--color-primario);
    /* Borde de color distintivo */
    transition: all 0.3s ease;
    /* Transición suave para el efecto hover */
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr 2.5fr 1.5fr;
    /* 3 columnas: Fecha, Asunto, Destinatario */
    gap: 15px;
    align-items: center;
}

/* El efecto "levitar" al pasar el mouse por encima */
.email-history-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.email-history-card .email-date {
    font-size: 0.9rem;
    color: #6c757d;
}

.email-history-card .email-subject {
    font-weight: 600;
    font-size: 1rem;
    color: #343a40;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Evita que asuntos muy largos rompan el diseño */
}

.email-history-card .email-recipient {
    font-size: 0.9rem;
    color: #495057;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Adaptación para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    .email-history-card {
        grid-template-columns: 1fr;
        /* Apila todo en una sola columna */
        text-align: center;
        gap: 8px;
    }

    .email-history-card .email-recipient {
        text-align: center;
    }
}

/* ============================================== */
/* == (NUEVO) ESTILOS PARA TARJETAS DE BITÁCORA  == */
/* ============================================== */

.bitacora-card-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Espacio entre tarjetas de bitácora */
}

.bitacora-card {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 15px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    /* --- ¡ESTA ES LA LÍNEA MODIFICADA! --- */
    border-left: 5px solid var(--color-primario);
    /* Ahora usa el color primario de la paleta */
    transition: all 0.3s ease;
    display: grid;
    grid-template-columns: 120px 1fr auto;
    /* Columna fija para fecha, contenido flexible, y columna para botón */
    gap: 20px;
    align-items: start;
    /* Alinear al inicio para que el botón no estire la tarjeta */
}

.bitacora-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.bitacora-card .bitacora-date {
    font-weight: 600;
    font-size: 0.95rem;
    color: #343a40;
    padding-top: 2px;
    /* Pequeño ajuste de alineación vertical */
}

.bitacora-card .bitacora-content {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #495057;
}

/* Estilos para el contenido que viene de Quill */
.bitacora-content p {
    margin: 0 0 0.5em 0 !important;
    padding: 0 !important;
}

.bitacora-content p:last-child {
    margin-bottom: 0 !important;
}

.bitacora-card .bitacora-actions {
    text-align: right;
}

/* Adaptación para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    .bitacora-card {
        grid-template-columns: 1fr;
        /* Apilar todo */
        gap: 10px;
        text-align: center;
    }

    .bitacora-card .bitacora-date {
        font-size: 0.9rem;
        color: #6c757d;
        border-bottom: 1px dotted #eee;
        padding-bottom: 8px;
        margin-bottom: 5px;
    }

    .bitacora-card .bitacora-content {
        text-align: left;
        /* Mantener el texto del contenido alineado a la izquierda */
    }

    .bitacora-card .bitacora-actions {
        text-align: center;
        padding-top: 10px;
    }
}

/* =================================================================== */
/* == INICIO: NUEVOS ESTILOS PARA HISTORIAL DE EVENTOS (PERFIL)   == */
/* =================================================================== */

.profile-event-list-container {
    font-family: Arial, sans-serif;
}

/* Cabecera visible en escritorio */
.profile-event-list-header {
    display: grid;
    /* 5 columnas: Realizado, Fecha, Hora, Descripción, Eliminar */
    grid-template-columns: 100px 120px 100px 1fr 100px;
    gap: 15px;
    padding: 10px 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid #dee2e6;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
}

/* Tarjeta individual para cada evento */
.profile-event-card {
    display: grid;
    /* Mismas 5 columnas que la cabecera para alinear */
    grid-template-columns: 100px 120px 100px 1fr 100px;
    gap: 15px;
    align-items: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    border-left: 4px solid var(--color-primario);
    transition: all 0.2s ease;
}

.profile-event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Estilo para eventos marcados como "realizados" */
.profile-event-card.realizado {
    background-color: #f8f9fa;
    opacity: 0.7;
    text-decoration: line-through;
    color: #6c757d;
    border-left-color: #6c757d;
}

.profile-event-cell {
    font-size: 0.9rem;
    overflow-wrap: break-word;
    /* Para que textos largos no rompan el layout */
}

/* Ajustes para pantallas más pequeñas (móviles) */
@media (max-width: 768px) {
    .profile-event-list-header {
        display: none;
        /* Ocultar la cabecera en móvil */
    }

    .profile-event-card {
        grid-template-columns: 1fr;
        /* Apilar todo en una sola columna */
        gap: 12px;
        padding: 15px;
    }

    .profile-event-cell {
        display: flex;
        justify-content: space-between;
        /* Etiqueta a la izquierda, contenido a la derecha */
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #eee;
        text-align: right;
        /* Alinear contenido a la derecha */
    }

    .profile-event-card .profile-event-cell:last-child {
        border-bottom: none;
    }

    /* Usar pseudo-elementos para mostrar las etiquetas de columna */
    .profile-event-cell::before {
        content: attr(data-label);
        /* Lee el atributo data-label del HTML */
        font-weight: bold;
        color: #6c757d;
        text-align: left;
        /* Alinear etiqueta a la izquierda */
        margin-right: 10px;
    }

    /* Casos especiales para checkbox y botón que deben estar centrados */
    .profile-event-card .profile-event-cell.text-center {
        justify-content: center;
    }

    .profile-event-card .profile-event-cell.text-center::before {
        flex-grow: 1;
        /* Permite que la etiqueta ocupe espacio y centre el contenido */
    }
}

/* =================================================================== */
/* == INICIO: NUEVOS ESTILOS PARA HISTORIAL DE PAGOS (PERFIL)     == */
/* =================================================================== */

.profile-payment-list-container {
    font-family: Arial, sans-serif;
}

/* Cabecera visible en escritorio */
.profile-payment-list-header {
    display: grid;
    /* 4 columnas: Fecha, Monto, Tipo, Eliminar */
    /* --- MODIFICACIÓN: Columnas ajustadas para un layout más compacto --- */
    grid-template-columns: 120px 150px 1fr 100px;
    gap: 15px;
    padding: 10px 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid #dee2e6;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
}

/* Tarjeta individual para cada pago */
.profile-payment-card {
    display: grid;
    /* Mismas 4 columnas que la cabecera para alinear */
    /* --- MODIFICACIÓN: Columnas ajustadas para un layout más compacto --- */
    grid-template-columns: 120px 150px 1fr 100px;
    gap: 15px;
    align-items: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    /* --- MODIFICACIÓN: Color del borde ahora usa la variable del tema --- */
    border-left: 4px solid var(--color-primario);
    transition: all 0.2s ease;
}

.profile-payment-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.profile-payment-cell {
    font-size: 0.9rem;
    overflow-wrap: break-word;
}

.profile-payment-cell.monto {
    font-weight: 600;
    font-size: 1rem;
}

/* Ajustes para pantallas más pequeñas (móviles) */
@media (max-width: 768px) {
    .profile-payment-list-header {
        display: none;
    }

    .profile-payment-card {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 15px;
    }

    .profile-payment-cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #eee;
        text-align: right;
    }

    .profile-payment-card .profile-payment-cell:last-child {
        border-bottom: none;
    }

    .profile-payment-cell::before {
        content: attr(data-label);
        font-weight: bold;
        color: #6c757d;
        text-align: left;
        margin-right: 10px;
    }

    .profile-payment-card .profile-payment-cell.text-center {
        justify-content: center;
    }
}

/* =================================================================== */
/* == FIN: NUEVOS ESTILOS PARA HISTORIAL DE PAGOS (PERFIL)        == */
/* =================================================================== */

/* CÓDIGO NUEVO A PEGAR (al final del archivo) */

/* =================================================================== */
/* == INICIO: NUEVOS ESTILOS PARA HISTORIAL DE DOCUMENTOS (PERFIL) == */
/* =================================================================== */

.profile-document-list-container {
    font-family: Arial, sans-serif;
}

/* Cabecera visible en escritorio */
.profile-document-list-header {
    display: grid;
    /* 4 columnas: Fecha, Descripción, Archivo, Eliminar */
    grid-template-columns: 180px 1fr 100px 100px;
    gap: 15px;
    padding: 10px 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid #dee2e6;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
}

/* Tarjeta individual para cada documento */
.profile-document-card {
    display: grid;
    /* Mismas 4 columnas que la cabecera */
    grid-template-columns: 180px 1fr 100px 100px;
    gap: 15px;
    align-items: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    border-left: 4px solid var(--color-primario);
    transition: all 0.2s ease;
}

.profile-document-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.profile-document-cell {
    font-size: 0.9rem;
    overflow-wrap: break-word;
}

/* Ajustes para pantallas más pequeñas (móviles) */
@media (max-width: 768px) {
    .profile-document-list-header {
        display: none;
    }

    .profile-document-card {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 15px;
    }

    .profile-document-cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #eee;
        text-align: right;
    }

    .profile-document-card .profile-document-cell:last-child {
        border-bottom: none;
    }

    .profile-document-cell::before {
        content: attr(data-label);
        font-weight: bold;
        color: #6c757d;
        text-align: left;
        margin-right: 10px;
    }

    .profile-document-card .profile-document-cell.text-center {
        justify-content: center;
    }
}

/* =================================================================== */
/* == FIN: NUEVOS ESTILOS PARA HISTORIAL DE DOCUMENTOS (PERFIL)   == */
/* =================================================================== */

/* =================================================================== */
/* == INICIO: NUEVOS ESTILOS PARA DATOS DE CLIENTE DESPLEGABLES   == */
/* =================================================================== */

.info-toggle-btn {
    background-color: transparent;
    border: 2px solid var(--color-primario);
    color: var(--color-primario);
    padding: 8px 20px;
    border-radius: 50px;
    /* Botones redondeados */
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.info-toggle-btn:hover {
    background-color: var(--color-primario);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(var(--color-primario-rgb), 0.3);
}

.info-toggle-btn.active {
    background-color: var(--color-primario);
    color: #fff;
    box-shadow: 0 2px 5px rgba(var(--color-primario-rgb), 0.2);
}

.info-details-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.7s ease-in-out;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Espacio entre las tarjetas */
    padding: 0 10px;
    /* Padding lateral para que no pegue a los bordes */
}

.info-details-container.active {
    max-height: 1000px;
    /* Un valor alto para permitir que el contenido se expanda */
    padding-top: 20px;
    padding-bottom: 10px;
}

.info-card-row {
    background-color: #fff;
    border-radius: 8px;
    padding: 12px 18px;
    display: flex;
    gap: 20px;
    /* Espacio entre la etiqueta y el valor */
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    border-left: 4px solid var(--color-primario);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.info-details-container.active .info-card-row {
    opacity: 1;
    transform: translateY(0);
}

.info-card-row:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.info-card-row .info-label {
    font-weight: 600;
    color: #6c757d;
    font-size: 0.85rem;
    flex-basis: 150px;
    /* Ancho base para la etiqueta */
    flex-shrink: 0;
    /* Evita que la etiqueta se encoja */
}

.info-card-row .info-value {
    font-weight: 500;
    color: #343a40;
    font-size: 0.95rem;
    text-align: left;
    /* Alinear a la izquierda */
    flex-grow: 1;
    /* Ocupa el espacio restante */
}

/* Animación de cascada */
.info-details-container.active .info-card-row:nth-child(1) {
    transition-delay: 0.05s;
}

.info-details-container.active .info-card-row:nth-child(2) {
    transition-delay: 0.1s;
}

.info-details-container.active .info-card-row:nth-child(3) {
    transition-delay: 0.15s;
}

.info-details-container.active .info-card-row:nth-child(4) {
    transition-delay: 0.2s;
}

.info-details-container.active .info-card-row:nth-child(5) {
    transition-delay: 0.25s;
}

.info-details-container.active .info-card-row:nth-child(6) {
    transition-delay: 0.3s;
}

.info-details-container.active .info-card-row:nth-child(7) {
    transition-delay: 0.35s;
}

/* =================================================================== */
/* == FIN: NUEVOS ESTILOS PARA DATOS DE CLIENTE DESPLEGABLES      == */
/* =================================================================== */

/* =================================================================== */
/* == INICIO: NUEVOS ESTILOS PARA HEADER DE PERFIL DE CLIENTE     == */
/* =================================================================== */

.profile-header-card {
    background-color: var(--color-primario);
    color: #fff;
    border-radius: 10px;
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    /* Separación con el contenido de abajo */
    box-shadow: 0 5px 15px rgba(var(--color-primario-rgb), 0.3);
    transition: all 0.3s ease-in-out;
    animation: tiriton 5s infinite ease-in-out;
    /* Animación 'tiriton' */
}

.profile-header-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 8px 20px rgba(var(--color-primario-rgb), 0.4);
    animation-play-state: paused;
    /* Pausar el tiritón en hover */
}

/* Animación de 'tiritón' o pulso sutil */
@keyframes tiriton {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.005);
    }

    100% {
        transform: scale(1);
    }
}

.profile-header-name {
    font-size: 1.6rem;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.profile-header-actions {
    display: flex;
    gap: 10px;
    /* Espacio entre los botones de íconos */
}

.btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* Botones circulares */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    padding: 0;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.7);
}

/* Colores específicos para los botones de íconos */
.btn-icon.btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

.btn-icon.btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

.btn-icon.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-icon.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

/* =================================================================== */
/* == FIN: NUEVOS ESTILOS PARA HEADER DE PERFIL DE CLIENTE        == */
/* =================================================================== */

/* =================================================================== */
/* == INICIO: NUEVOS ESTILOS PARA EL MODAL DE DETALLE DE CONSULTA   == */
/* =================================================================== */

/* Tarjeta de cabecera para el nombre y acciones */
.consulta-header-card {
    background-color: var(--color-primario);
    /* Usa el color del tema */
    color: #fff;
    border-radius: 10px;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    /* Espacio antes de los detalles */
    box-shadow: 0 4px 12px rgba(var(--color-primario-rgb), 0.3);
}

.consulta-header-name {
    font-size: 1.2rem;
    /* Tamaño de fuente para el nombre */
    font-weight: bold;
}

.consulta-header-actions {
    display: flex;
    gap: 8px;
    /* Espacio entre los botones de ícono */
}

/* Contenedor para la información debajo de la cabecera */
.consulta-info-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Espacio entre cada fila de información */
    padding: 0 10px;
    /* Un poco de padding lateral */
}

/* Fila individual de información (reemplaza a <tr>) */
.consulta-info-row {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    /* Línea separadora muy sutil */
}

.consulta-info-row:last-child {
    border-bottom: none;
    /* Sin línea en el último elemento */
}

/* Etiqueta (ej: "Cédula", "Teléfono") */
.consulta-info-label {
    font-weight: 600;
    color: #6c757d;
    /* Gris oscuro */
    font-size: 0.9rem;
    flex-basis: 120px;
    /* Ancho fijo para la etiqueta */
    flex-shrink: 0;
}

/* Valor (ej: "12.345.678-9") */
.consulta-info-value {
    font-weight: 500;
    color: #343a40;
    /* Negro suave */
    font-size: 0.95rem;
}

/* =================================================================== */
/* == INICIO: ESTILOS PARA BOTONES DE ICONO (REUTILIZADO)         == */
/* =================================================================== */

.btn-icon {
    width: 38px;
    /* Ligeramente más pequeño para el modal */
    height: 38px;
    border-radius: 50%;
    /* Botones circulares */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    /* Icono más pequeño */
    padding: 0;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    color: #fff;
    /* Asegurar que el ícono sea blanco */
}

.btn-icon:hover {
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.7);
}

/* Colores específicos para los botones de íconos */
.btn-icon.btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

.btn-icon.btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
    /* Texto oscuro para buen contraste en amarillo */
}

.btn-icon.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

/* ============================================== */
/* == ESTILO CORREGIDO PARA BOTÓN DE ACCIÓN      == */
/* ============================================== */

/* Estilo por defecto (outline) */
.btn-dynamic-action {
    color: var(--color-primario);
    border-color: var(--color-primario);
    background-color: transparent;
    font-weight: 500;
    border-width: 2px;
    /* Borde un poco más grueso */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Estilo al pasar el mouse o al estar activo (relleno) */
.btn-dynamic-action:hover,
.btn-dynamic-action:active,
.btn-dynamic-action:focus {
    color: #fff;
    background-color: var(--color-primario);
    border-color: var(--color-primario);
}

/* =================================================================== */
/* == INICIO: NUEVOS ESTILOS PARA EL ENLACE DE CLIENTE EN EVENTOS == */
/* =================================================================== */

.event-client-link {
    /* Apariencia de botón tipo "píldora" */
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px;
    /* Esto crea la forma de píldora */
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    /* Quita el subrayado del enlace */
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Transición suave para los efectos */

    /* Estado por defecto: Transparente con borde */
    background-color: transparent;
    border: 2px solid var(--color-primario);
    /* Borde con el color del tema */
    color: var(--color-primario);
    /* Texto con el color del tema */
}

/* Efecto al pasar el mouse o hacer clic: se rellena */
.event-client-link:hover,
.event-client-link:active {
    background-color: var(--color-primario);
    /* Fondo se rellena con el color del tema */
    color: #fff;
    /* El texto se vuelve blanco para el contraste */
    transform: translateY(-2px);
    /* Un pequeño efecto de "levantarse" */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Sombra sutil */
    text-decoration: none;
    /* ¡AÑADIDO PARA QUITAR EL SUBRAYADO! */
}

/* =================================================================== */
/* == INICIO: NUEVOS ESTILOS PARA LA LISTA DE LINKS DE INTERÉS    == */
/* =================================================================== */

.link-list-container {
    font-family: Arial, sans-serif;
}

/* Cabecera de la lista (visible en escritorio) */
.link-list-header {
    display: grid;
    /* 3 columnas: Texto, URL, Acción */
    grid-template-columns: 1fr 2fr 100px;
    gap: 15px;
    padding: 10px 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid #dee2e6;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
}

/* Tarjeta individual para cada link */
.link-card {
    display: grid;
    /* Mismas 3 columnas */
    grid-template-columns: 1fr 2fr 100px;
    gap: 15px;
    align-items: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    border-left: 4px solid var(--color-primario);
    transition: all 0.2s ease;
}

.link-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.link-card .link-text {
    font-weight: 600;
    font-size: 0.95rem;
    color: #343a40;
}

.link-card .link-url a {
    font-size: 0.9rem;
    color: #0d6efd;
    text-decoration: none;
    word-break: break-all;
    /* Para que URLs largas no rompan el diseño */
}

.link-card .link-url a:hover {
    text-decoration: underline;
}

.link-card .link-actions {
    text-align: center;
}

/* Ajustes para pantallas más pequeñas (móviles) */
@media (max-width: 768px) {
    .link-list-header {
        display: none;
        /* Ocultar cabecera en móvil */
    }

    .link-card {
        grid-template-columns: 1fr;
        /* Apilar todo en una columna */
        gap: 10px;
        text-align: center;
    }

    .link-card .link-url {
        padding: 10px 0;
        border-top: 1px dotted #eee;
        border-bottom: 1px dotted #eee;
    }
}

/* =================================================================== */
/* == INICIO: NUEVOS ESTILOS PARA LA SECCIÓN DE GOOGLE DRIVE      == */
/* =================================================================== */

.drive-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.25rem;
    padding-top: 1rem;
    min-height: 400px;
    border-top: 1px solid #e9ecef;
}

.drive-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    position: relative;
    border: 1px solid transparent;
}

.drive-item:hover {
    background-color: var(--color-subfondo);
    transform: translateY(-3px);
    border-color: rgba(var(--color-primario-rgb), 0.2);
}

.drive-item-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 0.75rem;
    font-size: 2.5rem;
    /* Tamaño para FontAwesome */
    display: flex;
    align-items: center;
    justify-content: center;
}

.drive-item-icon img {
    max-width: 100%;
    max-height: 100%;
}

.drive-item-icon .fa-folder {
    color: #79a6d2;
    /* Un color azulado para carpetas */
}

.drive-item-icon .fa-file-alt {
    color: #6c757d;
    /* Gris para archivos genéricos */
}

.drive-item-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: #343a40;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.5em;
    /* Espacio para dos líneas */
}

.drive-item-actions {
    position: absolute;
    top: 5px;
    right: 5px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.drive-item:hover .drive-item-actions {
    opacity: 1;
}

.drive-item-actions .btn {
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    line-height: 1.2;
}

/* --- INICIO MODIFICACIÓN: Aplicar estilos a AMBOS navegadores de Drive --- */
#drive-breadcrumbs .breadcrumb-item a,
#client-drive-breadcrumbs .breadcrumb-item a {
    text-decoration: none;
    font-weight: 600;
    color: var(--color-primario);
}

#drive-breadcrumbs .breadcrumb-item.active,
#client-drive-breadcrumbs .breadcrumb-item.active {
    color: #6c757d;
}

/* --- FIN MODIFICACIÓN --- */

/* =================================================================== */
/* == INICIO: NUEVOS ESTILOS PARA LA SECCIÓN DE GOOGLE DRIVE      == */
/* =================================================================== */

.drive-view-controls .btn {
    border-radius: 6px;
}

.drive-view-controls .btn.active {
    background-color: var(--color-primario);
    color: white;
    border-color: var(--color-primario);
}


/* --- Vista de Cuadrícula (Grid - Actual) --- */
.drive-container {
    /* Esta clase ya existe, aseguramos que tenga grid */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    /* Ajustado minmax */
    gap: 1rem;
    /* Reducido gap */
    padding-top: 1rem;
    min-height: 400px;
    /* Mantenemos altura mínima */
    border-top: 1px solid #e9ecef;
}

.drive-item {
    /* Estilo de item en cuadrícula (mayormente existente) */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.8rem;
    /* Ligeramente menos padding */
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    position: relative;
    border: 1px solid transparent;
    background-color: #fff;
    /* Fondo blanco explícito */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.drive-item:hover {
    background-color: var(--color-subfondo);
    transform: translateY(-2px);
    border-color: rgba(var(--color-primario-rgb), 0.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.07);
}

.drive-item.selected {
    /* Estilo para item seleccionado */
    background-color: rgba(var(--color-primario-rgb), 0.15);
    border-color: rgba(var(--color-primario-rgb), 0.4);
}


.drive-item-icon {
    /* Icono en cuadrícula (existente) */
    width: 50px;
    /* Reducido */
    height: 50px;
    margin-bottom: 0.5rem;
    font-size: 2rem;
    /* Reducido */
    display: flex;
    align-items: center;
    justify-content: center;
}

.drive-item-icon img {
    /* Icono imagen (existente) */
    max-width: 100%;
    max-height: 100%;
}

.drive-item-icon .fa-folder {
    color: #79a6d2;
}

/* Icono carpeta (existente) */
.drive-item-icon .fa-file-alt {
    color: #6c757d;
}

/* Icono archivo (existente) */

.drive-item-name {
    /* Nombre en cuadrícula (existente, con ajustes) */
    font-size: 0.8rem;
    /* Reducido */
    font-weight: 500;
    color: #343a40;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.4em;
    /* Espacio para dos líneas */
    width: 100%;
    /* Asegurar que ocupe el ancho */
}

/* Acciones hover en cuadrícula (existente) */
.drive-item-actions {
    position: absolute;
    top: 5px;
    right: 5px;
    opacity: 0;
    transition: opacity 0.2s ease;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    padding: 2px;
}

.drive-item:hover .drive-item-actions {
    opacity: 1;
}

.drive-item-actions .btn {
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    line-height: 1.2;
}


/* --- Vista de Lista --- */
.drive-container-list {
    /* Contenedor para la vista de lista */
    display: flex;
    flex-direction: column;
    padding-top: 0.5rem;
    min-height: 400px;
    border-top: 1px solid #e9ecef;
}

.drive-list-header {
    /* Cabecera opcional para la lista */
    display: grid;
    grid-template-columns: 40px 1fr 150px 80px;
    /* Icono, Nombre, Modificado, Acciones */
    gap: 1rem;
    padding: 8px 15px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 5px;
}

/* Ocultar cabecera en móvil */
@media (max-width: 768px) {
    .drive-list-header {
        display: none;
    }
}


.drive-item-list {
    /* Estilo para cada fila en la lista */
    display: grid;
    grid-template-columns: 40px 1fr 150px 80px;
    /* Icono, Nombre, Modificado, Acciones */
    gap: 1rem;
    align-items: center;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f1f3f5;
    /* Separador sutil */
    position: relative;
    /* Para el menú contextual */
}

.drive-item-list:hover {
    background-color: var(--color-subfondo);
}

.drive-item-list:last-child {
    border-bottom: none;
}

.drive-item-list.selected {
    /* Estilo para fila seleccionada */
    background-color: rgba(var(--color-primario-rgb), 0.15);
}


.drive-item-list .drive-item-icon {
    /* Icono en lista */
    width: 24px;
    height: 24px;
    margin: 0;
    font-size: 1.2rem;
    /* Tamaño icono */
}

.drive-item-list .drive-item-icon img {
    max-width: 24px;
    max-height: 24px;
}

/* Imagen icono */


.drive-item-list .drive-item-name {
    /* Nombre en lista */
    font-size: 0.9rem;
    font-weight: 500;
    color: #343a40;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: auto;
    /* Reset min-height */
    -webkit-line-clamp: 1;
    /* Solo una línea */
}

.drive-item-list .drive-item-modified {
    /* Fecha de modificación */
    font-size: 0.8rem;
    color: #6c757d;
    text-align: right;
    white-space: nowrap;
}

.drive-item-list .drive-item-actions {
    /* Acciones hover en lista */
    position: static;
    /* No absoluto */
    opacity: 1;
    /* Siempre visible */
    text-align: right;
    background-color: transparent;
}

/* Ocultar acciones en móvil por defecto, mostrar en hover/seleccionado? */
@media (max-width: 768px) {
    .drive-item-list {
        grid-template-columns: 40px 1fr auto;
        /* Icono, Nombre, Acciones */
        gap: 0.8rem;
        padding: 8px 10px;
    }

    .drive-item-list .drive-item-modified {
        display: none;
    }

    /* Ocultar fecha */
    .drive-item-list .drive-item-actions .btn {
        margin-left: 5px;
    }
}


/* --- Menú Contextual --- */
.drive-context-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    /* Oculto por defecto */
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    min-width: 180px;
    padding: 5px 0;
}

.drive-context-menu button {
    display: block;
    width: 100%;
    padding: 8px 15px;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    font-size: 0.9rem;
}

.drive-context-menu button:hover {
    color: #1e2125;
    background-color: #e9ecef;
}

.drive-context-menu button:disabled {
    color: #adb5bd;
    pointer-events: none;
    background-color: transparent;
}

.drive-context-menu hr {
    border-top-color: #e9ecef;
}

/* =================================================================== */
/* == FIN: NUEVOS ESTILOS PARA LA SECCIÓN DE GOOGLE DRIVE         == */
/* =================================================================== */

/* ============================================== */
/* == ESTILOS CHATBOT IA (GEMINI)              == */
/* ============================================== */

.ai-chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    /* Ajustado para no chocar con flowboard si está a la derecha */
    width: 350px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
    z-index: 2000;
    /* Muy por encima */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #dee2e6;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.ai-chat-widget.collapsed {
    height: 50px;
    width: 200px;
    bottom: 20px;
    right: 90px;
    /* Al lado del icono de FlowBoard */
    border-radius: 25px;
    cursor: pointer;
}

.ai-chat-header {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    /* Color primario */
    color: white;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    cursor: pointer;
}

.ai-chat-widget.collapsed .ai-chat-body,
.ai-chat-widget.collapsed .ai-chat-footer {
    display: none;
}

.ai-chat-body {
    height: 300px;
    background-color: #f8f9fa;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-message {
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.9rem;
    max-width: 85%;
    line-height: 1.4;
    word-wrap: break-word;
}

.ai-message.system {
    background-color: #e9ecef;
    color: #495057;
    align-self: flex-start;
    border-bottom-left-radius: 0;
}

.ai-message.user {
    background-color: #d1e7ff;
    color: #084298;
    align-self: flex-end;
    border-bottom-right-radius: 0;
}

.ai-chat-footer {
    padding: 10px;
    background-color: #fff;
    border-top: 1px solid #dee2e6;
    display: flex;
    align-items: center;
}

/* Efecto de latido cuando está procesando voz */
.fa-beat {
    animation: fa-beat 1s infinite linear;
}

@keyframes fa-beat {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* ESTILOS PARA LA LISTA DE CUOTAS */
.cuotas-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.cuota-card {
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px;
    position: relative;
    border-left: 5px solid #ccc;
    /* Default pendiente */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cuota-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.cuota-card.pagada {
    border-left-color: #198754;
    /* Verde */
    background-color: #f8fff9;
}

.cuota-card.vencida {
    border-left-color: #dc3545;
    /* Rojo */
    background-color: #fff8f8;
}

.cuota-card.pendiente {
    border-left-color: #ffc107;
    /* Amarillo */
}

.cuota-header {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 0.9rem;
    color: #555;
}

.cuota-monto {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

.cuota-fecha {
    font-size: 0.85rem;
    color: #666;
}

.cuota-status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
}

.pagada .cuota-status-badge {
    background: #d1e7dd;
    color: #0f5132;
}

.vencida .cuota-status-badge {
    background: #f8d7da;
    color: #842029;
}

.pendiente .cuota-status-badge {
    background: #fff3cd;
    color: #664d03;
}

/* Notificación en Contabilidad Pendientes */
#panelContabPendientes .border-warning {
    border-left: 5px solid #ffc107 !important;
}

#panelContabPendientes .card-custom {
    transition: all 0.3s ease;
}