/* 
DETECTIVE APP
Ruta: public_html/assets/css/styles.css
Descripción: Estilos principales de la aplicación - Diseño profesional y responsive
*/

/* ======================= VARIABLES CSS ======================= */
:root {
    /* Colores principales */
    --primary-color: #3182ce;
    --primary-dark: #2c5282;
    --primary-light: #4299e1;
    
    /* Colores secundarios */
    --success-color: #48bb78;
    --success-dark: #38a169;
    --warning-color: #ed8936;
    --danger-color: #f56565;
    --danger-dark: #e53e3e;
    
    /* Colores neutros */
    --background-color: #f8fafc;
    --background-dark: #edf2f7;
    --white: #ffffff;
    --text-primary: #2d3748;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --border-color: #e2e8f0;
    --border-light: #f7fafc;
    
    /* Espaciado */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    /* Tipografía */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-xxl: 1.5rem;
    --font-size-title: 1.8rem;
    
    /* Sombras */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 15px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 25px rgba(0,0,0,0.1);
    --shadow-xl: 0 12px 35px rgba(0,0,0,0.15);
    
    /* Transiciones */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* Bordes */
    --border-radius-sm: 6px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 15px;
    --border-radius-full: 50%;
}

/* ======================= RESET Y BASE ======================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background: var(--background-color);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: var(--font-size-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
}

/* ======================= HEADER ======================= */
.header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--white);
    padding: var(--spacing-lg) var(--spacing-xl);
    box-shadow: var(--shadow-lg);
    position: relative;
}

.header h1 {
    font-size: var(--font-size-title);
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.header .subtitle {
    font-size: var(--font-size-sm);
    opacity: 0.9;
    font-weight: 400;
}

.connection-status {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-xl);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
}

/* ======================= LAYOUT PRINCIPAL ======================= */
.container {
    display: grid;
    grid-template-columns: 380px 1fr;
    height: calc(100vh - 100px);
    gap: 0;
}

/* ======================= SIDEBAR ======================= */
.sidebar {
    background: var(--white);
    border-right: 2px solid var(--border-color);
    overflow-y: auto;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
}

.sidebar-section {
    padding: var(--spacing-xl);
    border-bottom: 1px solid var(--border-light);
}

.sidebar-section:last-child {
    border-bottom: none;
    margin-top: auto;
}

.sidebar h2,
.sidebar h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 600;
}

.sidebar h3 {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

/* Botón nuevo caso */
.new-case-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 100%);
    color: var(--white);
    border: none;
    padding: var(--spacing-md);
    border-radius: var(--border-radius-lg);
    font-weight: 600;
    cursor: pointer;
    margin: var(--spacing-xl);
    margin-bottom: 0;
    transition: all var(--transition-normal);
    box-shadow: 0 4px 15px rgba(72, 187, 120, 0.3);
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.new-case-btn:hover {
    background: linear-gradient(135deg, var(--success-dark) 0%, #2f855a 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(72, 187, 120, 0.4);
}

/* Filtros */
.case-filters {
    margin-bottom: var(--spacing-md);
}

.case-filters select {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    background: var(--white);
    color: var(--text-primary);
}

/* Lista de casos */
.case-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.case-item {
    padding: var(--spacing-lg);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-md);
    cursor: pointer;
    transition: all var(--transition-slow);
    background: var(--white);
    position: relative;
}

.case-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 6px 25px rgba(49, 130, 206, 0.15);
    transform: translateY(-2px);
}

.case-item.active {
    border-color: var(--primary-color);
    background: #ebf8ff;
    box-shadow: var(--shadow-lg);
}

.case-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-lg);
}

.case-client {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.case-date {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.case-status {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    margin-top: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-active {
    background: #c6f6d5;
    color: #22543d;
}

.status-closed {
    background: #fed7d7;
    color: #c53030;
}

.status-confidential {
    background: #fbb6ce;
    color: #97266d;
}

.priority-indicator {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 14px;
    height: 14px;
    border-radius: var(--border-radius-full);
    border: 2px solid var(--white);
    box-shadow: var(--shadow-sm);
}

.priority-high {
    background: var(--danger-color);
}

.priority-medium {
    background: var(--warning-color);
}

.priority-low {
    background: var(--success-color);
}

/* Estadísticas */
.stats-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

.stat-item {
    text-align: center;
    padding: var(--spacing-md);
    background: var(--background-light);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
}

.stat-number {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}

.stat-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ======================= CONTENIDO PRINCIPAL ======================= */
.main-content {
    background: var(--background-color);
    padding: var(--spacing-xl);
    overflow-y: auto;
}

.empty-state {
    text-align: center;
    padding: var(--spacing-xxl) var(--spacing-xl);
    color: var(--text-muted);
    background: var(--white);
    border-radius: var(--border-radius-xl);
    border: 2px dashed var(--border-color);
    margin: var(--spacing-xl) 0;
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.empty-state h2 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    font-weight: 600;
}

/* ======================= MODALES ======================= */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.modal.show {
    opacity: 1;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--white);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-xl);
    max-width: 750px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    border: 2px solid var(--border-color);
    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
}

.modal-content.large {
    max-width: 1000px;
    width: 95%;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-light);
}

.modal-header h3 {
    margin: 0;
}

.modal-actions {
    display: flex;
    gap: var(--spacing-md);
}

.modal h3 {
    color: var(--text-primary);
    font-size: var(--font-size-xxl);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 700;
}

.close-btn {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: var(--background-light);
    border: none;
    font-size: var(--font-size-xl);
    cursor: pointer;
    color: var(--text-secondary);
    width: 35px;
    height: 35px;
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
}

.close-btn:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

/* ======================= FORMULARIOS ======================= */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    background: var(--white);
    color: var(--text-primary);
    transition: border-color var(--transition-normal);
    font-family: var(--font-family);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-light);
}

/* Subida de archivos */
.file-upload-area {
    border: 2px dashed var(--border-color);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    background: var(--background-light);
}

.file-upload-area:hover {
    border-color: var(--primary-color);
    background: #ebf8ff;
}

.file-upload-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
}

.file-upload-text {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.file-upload-hint {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.image-preview {
    margin-top: var(--spacing-md);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--spacing-sm);
}

.image-preview img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    border: 2px solid var(--border-color);
    transition: transform var(--transition-normal);
}

.image-preview img:hover {
    transform: scale(1.05);
}

/* ======================= BOTONES ======================= */
.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    font-weight: 600;
    transition: all var(--transition-normal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-base);
    text-decoration: none;
    font-family: var(--font-family);
    box-shadow: var(--shadow-sm);
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
    color: var(--white);
}

.btn-success {
    background: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 100%);
    color: var(--white);
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%);
    color: var(--white);
}

.btn-warning {
    background: linear-gradient(135deg, var(--warning-color) 0%, #dd6b20 100%);
    color: var(--white);
}

.btn-secondary {
    background: var(--background-dark);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--border-color);
}

.full-width {
    width: 100%;
    margin-bottom: var(--spacing-sm);
}

/* ======================= CONFIGURACIÓN ======================= */
.settings-section {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-light);
}

.settings-section:last-child {
    border-bottom: none;
}

.settings-section h4 {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* ======================= CONTENIDO DE CASOS ======================= */
.case-content {
    background: var(--white);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-md);
    border: 2px solid var(--border-color);
}

.case-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-light);
}

.case-info h2 {
    font-size: var(--font-size-title);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    font-weight: 700;
}

.case-details {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    background: var(--background-light);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    border-left: 4px solid var(--primary-color);
}

.action-buttons {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

/* ======================= ENTRADAS ======================= */
.entries-container {
    margin-top: var(--spacing-xl);
}

.entry-card {
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    transition: all var(--transition-slow);
    position: relative;
    box-shadow: var(--shadow-sm);
}

.entry-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--border-light);
    transform: translateY(-2px);
}

.entry-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-light);
}

.entry-date-time {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.entry-date {
    font-weight: 700;
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.entry-time {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.entry-location {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.entry-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
}

.entry-metadata {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--background-dark);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
}

.metadata-item {
    display: flex;
    flex-direction: column;
}

.metadata-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
}

.metadata-value {
    color: var(--text-primary);
    font-weight: 600;
}

.entry-content {
    line-height: 1.7;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    background: var(--background-light);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    border-left: 4px solid var(--primary-light);
    white-space: pre-line;
}

.entry-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.entry-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: var(--border-radius-lg);
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all var(--transition-slow);
}

.entry-image:hover {
    transform: scale(1.05);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-lg);
}

.add-entry-btn {
    width: 100%;
    background: var(--white);
    color: var(--text-secondary);
    border: 3px dashed var(--border-color);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-xl);
    font-size: var(--font-size-lg);
    cursor: pointer;
    transition: all var(--transition-slow);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-weight: 600;
}

.add-entry-btn:hover {
    background: var(--background-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ======================= INFORMES ======================= */
.report-content {
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--spacing-lg);
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    font-family: 'Times New Roman', serif;
    line-height: 1.6;
    color: var(--text-primary);
}

.report-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 3px solid var(--primary-color);
}

.report-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.report-subtitle {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    font-style: italic;
}

/* ======================= NOTIFICACIONES ======================= */
#notificationContainer {
    position: fixed;
    top: var(--spacing-xl);
    right: var(--spacing-xl);
    z-index: 2000;
}

.notification {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--white);
    border: 2px solid var(--success-color);
    border-radius: var(--border-radius-lg);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--spacing-sm);
    transform: translateX(400px);
    transition: transform var(--transition-slow);
    max-width: 300px;
}

.notification.show {
    transform: translateX(0);
}

.notification.error {
    border-color: var(--danger-color);
    background: #fff5f5;
}

.notification.success {
    border-color: var(--success-color);
    background: #f0fff4;
}

.notification.warning {
    border-color: var(--warning-color);
    background: #fffaf0;
}

/* ======================= LOADING ======================= */
.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.9);
    z-index: 9999;
    backdrop-filter: blur(3px);
}

.loading-overlay.show {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: var(--border-radius-full);
    animation: spin 1s linear infinite;
}

.loading-text {
    margin-top: var(--spacing-md);
    font-weight: 600;
    color: var(--text-primary);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ======================= RESPONSIVE ======================= */
@media (max-width: 1024px) {
    .container {
        grid-template-columns: 320px 1fr;
    }
}

@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    
    .sidebar {
        height: auto;
        overflow-y: visible;
    }
    
    .sidebar-section {
        padding: var(--spacing-md);
    }
    
    .new-case-btn {
        margin: var(--spacing-md);
        margin-bottom: 0;
    }
    
    .main-content {
        padding: var(--spacing-md);
    }
    
    .case-header,
    .entry-header {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: stretch;
    }
    
    .action-buttons,
    .entry-actions {
        width: 100%;
        justify-content: stretch;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        width: 95%;
        margin: var(--spacing-md);
    }
    
    .stats-summary {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .connection-status {
        position: static;
        margin-top: var(--spacing-sm);
        display: inline-block;
    }
}

@media (max-width: 480px) {
    .header {
        padding: var(--spacing-md);
    }
    
    .header h1 {
        font-size: var(--font-size-xl);
    }
    
    .sidebar-section {
        padding: var(--spacing-sm);
    }
    
    .case-item,
    .entry-card {
        padding: var(--spacing-md);
    }
    
    .btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }
    
    .stats-summary {
        grid-template-columns: 1fr;
    }
}

/* ======================= PRINT STYLES ======================= */
@media print {
    .header,
    .sidebar,
    .modal,
    .notification,
    .loading-overlay {
        display: none !important;
    }
    
    .container {
        grid-template-columns: 1fr !important;
        height: auto !important;
    }
    
    .main-content {
        padding: 0 !important;
        background: var(--white) !important;
    }
    
    .case-content,
    .entry-card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        page-break-inside: avoid;
    }
    
    .btn {
        display: none !important;
    }
}

/* ======================= SCROLLBAR PERSONALIZADO ======================= */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--background-light);
    border-radius: var(--border-radius-sm);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--border-radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ======================= UTILIDADES ======================= */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-normal { font-weight: 400; }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }

.bg-white { background: var(--white); }
.bg-light { background: var(--background-light); }

.border-radius { border-radius: var(--border-radius-md); }
.shadow { box-shadow: var(--shadow-md); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }



// ==================== CONFIGURACIÓN ====================
const API_URL = 'api.php';

// Variables globales
let currentCaseId = null;
let currentEditingEntryId = null;
let cases = [];
let entries = {};
let selectedFiles = [];
let uploadingFiles = false;

// ==================== INICIALIZACIÓN ====================
document.addEventListener('DOMContentLoaded', function() {
    initializeApp();
    initializeEventListeners();
    loadCases();
});

function initializeApp() {
    console.log('Detective App v2.0 - Iniciando...');
    
    // Configurar fecha actual en formularios
    const dateInputs = document.querySelectorAll('input[type="date"]');
    const today = new Date().toISOString().split('T')[0];
    dateInputs.forEach(input => {
        if (!input.value) {
            input.value = today;
        }
    });
}

function initializeEventListeners() {
    // Input de imágenes mejorado
    const imageInput = document.getElementById('imageInput');
    if (imageInput) {
        imageInput.addEventListener('change', (e) => {
            handleImageSelection(e.target.files);
        });
    }
    
    // Configurar zona de drag & drop
    setupImageDropZone();
    
    // Cerrar modales al hacer clic fuera
    window.onclick = function(event) {
        if (event.target.classList.contains('modal')) {
            closeModal(event.target.id);
        }
    }
}

// ==================== FUNCIONES API - CASOS ====================

async function loadCases() {
    try {
        const response = await fetch(`${API_URL}?action=getCases`);
        const data = await response.json();
        
        if (data.success) {
            cases = data.data;
            renderCases();
            if (cases.length > 0 && !currentCaseId) {
                selectCase(cases[0].id);
            } else if (cases.length === 0) {
                renderEmptyMainContent();
            }
        }
    } catch (error) {
        console.error('Error cargando casos:', error);
        showNotification('Error al cargar los casos', 'error');
    }
}

async function saveCase(caseData) {
    try {
        const response = await fetch(API_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                action: 'saveCase',
                ...caseData
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            await loadCases();
            selectCase(data.data.id);
            showNotification('Caso creado correctamente', 'success');
            return true;
        } else {
            showNotification(data.message || 'Error al crear el caso', 'error');
            return false;
        }
    } catch (error) {
        console.error('Error guardando caso:', error);
        showNotification('Error al guardar el caso', 'error');
        return false;
    }
}

async function updateCase(caseId, updates) {
    try {
        const response = await fetch(API_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                action: 'updateCase',
                id: caseId,
                ...updates
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            await loadCases();
            renderCaseContent(caseId);
            showNotification('Caso actualizado correctamente', 'success');
            return true;
        }
        return false;
    } catch (error) {
        console.error('Error actualizando caso:', error);
        showNotification('Error al actualizar el caso', 'error');
        return false;
    }
}

async function deleteCaseConfirm(caseId) {
    if (!confirm('¿Estás seguro de eliminar este caso? Se eliminarán todas las entradas e imágenes asociadas.')) {
        return;
    }
    
    try {
        const response = await fetch(API_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                action: 'deleteCase',
                id: caseId
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            currentCaseId = null;
            await loadCases();
            showNotification('Caso eliminado correctamente', 'success');
        }
    } catch (error) {
        console.error('Error eliminando caso:', error);
        showNotification('Error al eliminar el caso', 'error');
    }
}

// ==================== FUNCIONES API - ENTRADAS ====================

async function loadEntries(caseId) {
    try {
        const response = await fetch(`${API_URL}?action=getEntries&caseId=${caseId}`);
        const data = await response.json();
        
        if (data.success) {
            entries[caseId] = data.data;
            return data.data;
        }
    } catch (error) {
        console.error('Error cargando entradas:', error);
        return [];
    }
}

async function saveEntry() {
    const date = document.getElementById('entryDate').value;
    const time = document.getElementById('entryTime').value;
    const activityType = document.getElementById('activityType').value;
    const location = document.getElementById('location').value;
    const subject = document.getElementById('subject').value;
    const weather = document.getElementById('weather').value;
    const content = document.getElementById('entryContent').value;
    
    if (!content.trim()) {
        showNotification('Por favor, describe las actividades de investigación', 'error');
        return;
    }
    
    if (!activityType) {
        showNotification('Por favor, selecciona el tipo de actividad', 'error');
        return;
    }
    
    // Deshabilitar botón mientras se guarda
    const saveBtn = document.querySelector('.modal-content .btn-success');
    if (saveBtn) {
        saveBtn.disabled = true;
        saveBtn.textContent = 'Guardando...';
    }

    try {
        // Preparar FormData para enviar con imágenes
        const formData = new FormData();
        formData.append('action', 'saveEntry');
        formData.append('caseId', currentCaseId);
        formData.append('date', date);
        formData.append('time', time || 'No especificado');
        formData.append('activityType', activityType);
        formData.append('location', location || 'No especificado');
        formData.append('subject', subject || 'No especificado');
        formData.append('weather', weather || 'No especificado');
        formData.append('content', content);
        
        // Agregar imágenes seleccionadas
        if (selectedFiles && selectedFiles.length > 0) {
            showNotification(`Subiendo ${selectedFiles.length} imágenes...`, 'info');
            
            for (let i = 0; i < selectedFiles.length; i++) {
                // Comprimir si es necesario
                let fileToUpload = selectedFiles[i];
                if (selectedFiles[i].size > 2 * 1024 * 1024) {
                    try {
                        fileToUpload = await compressImage(selectedFiles[i]);
                    } catch (error) {
                        console.error('Error comprimiendo:', error);
                    }
                }
                formData.append('images[]', fileToUpload);
            }
        }
        
        const response = await fetch(API_URL, {
            method: 'POST',
            body: formData
        });
        
        const data = await response.json();
        
        if (data.success) {
            await loadEntries(currentCaseId);
            renderCaseContent(currentCaseId);
            closeModal('entryModal');
            showNotification('Entrada guardada correctamente', 'success');
            
            // Limpiar archivos seleccionados
            selectedFiles = [];
            const previewContainer = document.getElementById('imagePreviewContainer');
            if (previewContainer) {
                previewContainer.innerHTML = '';
                previewContainer.style.display = 'none';
            }
        } else {
            showNotification(data.message || 'Error al guardar la entrada', 'error');
        }
    } catch (error) {
        console.error('Error guardando entrada:', error);
        showNotification('Error al guardar la entrada', 'error');
    } finally {
        // Rehabilitar botón
        if (saveBtn) {
            saveBtn.disabled = false;
            saveBtn.textContent = '💾 Guardar Entrada';
        }
    }
}

async function updateEntry() {
    if (!currentEditingEntryId) return;
    
    const entryData = {
        date: document.getElementById('editEntryDate').value,
        time: document.getElementById('editEntryTime').value,
        activityType: document.getElementById('editActivityType').value,
        location: document.getElementById('editLocation').value,
        subject: document.getElementById('editSubject').value,
        weather: document.getElementById('editWeather').value,
        content: document.getElementById('editEntryContent').value
    };
    
    try {
        const response = await fetch(API_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                action: 'updateEntry',
                caseId: currentCaseId,
                entryId: currentEditingEntryId,
                ...entryData
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            await loadEntries(currentCaseId);
            renderCaseContent(currentCaseId);
            closeModal('editEntryModal');
            showNotification('Entrada actualizada correctamente', 'success');
        } else {
            showNotification(data.message || 'Error al actualizar', 'error');
        }
    } catch (error) {
        console.error('Error actualizando entrada:', error);
        showNotification('Error al actualizar la entrada', 'error');
    }
}

async function deleteEntry(entryId) {
    if (!confirm('¿Estás seguro de eliminar esta entrada? Se eliminarán todas las imágenes asociadas.')) {
        return;
    }
    
    try {
        const response = await fetch(API_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                action: 'deleteEntry',
                caseId: currentCaseId,
                entryId: entryId
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            await loadEntries(currentCaseId);
            renderCaseContent(currentCaseId);
            showNotification('Entrada eliminada correctamente', 'success');
        } else {
            showNotification(data.message || 'Error al eliminar', 'error');
        }
    } catch (error) {
        console.error('Error eliminando entrada:', error);
        showNotification('Error al eliminar la entrada', 'error');
    }
}

// ==================== FUNCIONES API - IMÁGENES ====================

async function uploadAdditionalImages(entryId) {
    const input = document.createElement('input');
    input.type = 'file';
    input.multiple = true;
    input.accept = 'image/*';
    
    input.onchange = async (e) => {
        const files = e.target.files;
        if (files.length === 0) return;
        
        const formData = new FormData();
        formData.append('action', 'uploadImages');
        formData.append('caseId', currentCaseId);
        formData.append('entryId', entryId);
        
        showNotification(`Subiendo ${files.length} imágenes...`, 'info');
        
        for (let i = 0; i < files.length; i++) {
            let fileToUpload = files[i];
            if (files[i].size > 2 * 1024 * 1024) {
                try {
                    fileToUpload = await compressImage(files[i]);
                } catch (error) {
                    console.error('Error comprimiendo:', error);
                }
            }
            formData.append('images[]', fileToUpload);
        }
        
        try {
            const response = await fetch(API_URL, {
                method: 'POST',
                body: formData
            });
            
            const data = await response.json();
            
            if (data.success) {
                await loadEntries(currentCaseId);
                renderCaseContent(currentCaseId);
                showNotification('Imágenes añadidas correctamente', 'success');
            } else {
                showNotification('Error al subir imágenes', 'error');
            }
        } catch (error) {
            console.error('Error:', error);
            showNotification('Error al subir imágenes', 'error');
        }
    };
    
    input.click();
}

async function deleteImage(caseId, entryId, filename) {
    if (!confirm('¿Eliminar esta imagen?')) return;
    
    try {
        const response = await fetch(API_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                action: 'deleteImage',
                caseId: caseId,
                entryId: entryId,
                filename: filename
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            await loadEntries(caseId);
            renderCaseContent(caseId);
            showNotification('Imagen eliminada', 'success');
        }
    } catch (error) {
        console.error('Error:', error);
        showNotification('Error al eliminar imagen', 'error');
    }
}

// ==================== FUNCIONES UI - RENDERIZADO ====================

function renderCases() {
    const caseList = document.getElementById('caseList');
    if (!caseList) return;
    
    caseList.innerHTML = '';

    cases.forEach(caseItem => {
        const li = document.createElement('li');
        li.className = `case-item ${currentCaseId === caseItem.id ? 'active' : ''}`;
        li.onclick = () => selectCase(caseItem.id);
        
        li.innerHTML = `
            <div class="case-title">${getCaseTypeLabel(caseItem.type)}</div>
            <div class="case-client">Cliente: ${caseItem.client}</div>
            <div class="case-date">Iniciado: ${formatDate(caseItem.date)}</div>
            <span class="case-status status-${caseItem.status}">${getStatusLabel(caseItem.status)}</span>
            <div class="priority-indicator priority-${caseItem.priority}"></div>
        `;
        
        caseList.appendChild(li);
    });
}

async function selectCase(caseId) {
    currentCaseId = caseId;
    await loadEntries(caseId);
    renderCases();
    renderCaseContent(caseId);
}

function renderCaseContent(caseId) {
    const caseData = cases.find(c => c.id == caseId);
    if (!caseData) return;
    
    const caseEntries = entries[caseId] || [];
    const mainContentArea = document.getElementById('mainContentArea');
    if (!mainContentArea) return;
    
    // Contar imágenes totales
    const totalImages = caseEntries.reduce((sum, entry) => {
        return sum + (entry.images ? entry.images.length : 0);
    }, 0);
    
    mainContentArea.innerHTML = `
        <div class="content-header">
            <div class="case-info">
                <h2 class="content-title">Caso: ${getCaseTypeLabel(caseData.type)}</h2>
                <div class="case-details">
                    <strong>Cliente:</strong> ${caseData.client}<br>
                    <strong>Contacto:</strong> ${caseData.contact}<br>
                    <strong>Fecha inicio:</strong> ${formatDate(caseData.date)}<br>
                    <strong>Estado:</strong> ${getStatusLabel(caseData.status)}<br>
                    <strong>Prioridad:</strong> ${getPriorityLabel(caseData.priority)}<br>
                    <strong>Descripción:</strong> ${caseData.description}<br>
                    <strong>Entradas:</strong> ${caseEntries.length} | <strong>Imágenes:</strong> ${totalImages}
                </div>
            </div>
            <div class="action-buttons">
                <button class="btn btn-primary" onclick="openEntryModal()">📝 Nueva Entrada</button>
                <button class="btn btn-success" onclick="generateReport()">📄 Generar Informe</button>
                <button class="btn btn-warning" onclick="exportEvidence()">📁 Exportar Evidencias</button>
                ${caseData.status !== 'closed' ? 
                    `<button class="btn btn-danger" onclick="closeCase()">🔒 Cerrar Caso</button>` : 
                    `<button class="btn btn-info" onclick="reopenCase()">🔓 Reabrir Caso</button>`
                }
                <button class="btn btn-secondary" onclick="editCase(${caseId})">✏️ Editar</button>
                <button class="btn btn-danger" onclick="deleteCaseConfirm(${caseId})">🗑️ Eliminar</button>
            </div>
        </div>

        <div class="entries-container" id="entriesContainer">
            ${caseEntries.length > 0 ? renderEntries(caseEntries) : renderEmptyState()}
            ${caseData.status !== 'closed' ? 
                '<button class="add-entry-btn" onclick="openEntryModal()">📝 Agregar nueva entrada de investigación</button>' : 
                '<div class="case-closed-notice">⚠️ Este caso está cerrado. No se pueden agregar nuevas entradas.</div>'
            }
        </div>
    `;
}

function renderEntries(caseEntries) {
    return caseEntries.map(entry => `
        <div class="entry-card" data-entry-id="${entry.id}">
            <div class="entry-header">
                <div class="entry-date-time">
                    <div class="entry-date">📅 ${formatDate(entry.date)}</div>
                    <div class="entry-time">🕐 ${entry.time}</div>
                    <div class="entry-location">📍 ${entry.location}</div>
                </div>
                <div class="entry-actions">
                    <button class="btn btn-primary btn-small" onclick="editEntry(${entry.id})">✏️ Editar</button>
                    <button class="btn btn-info btn-small" onclick="uploadAdditionalImages(${entry.id})">📷 Añadir Fotos</button>
                    <button class="btn btn-danger btn-small" onclick="deleteEntry(${entry.id})">🗑️ Eliminar</button>
                </div>
            </div>
            
            <div class="entry-metadata">
                <div class="metadata-item">
                    <div class="metadata-label">Tipo de Actividad</div>
                    <div class="metadata-value">${getActivityTypeLabel(entry.activityType)}</div>
                </div>
                <div class="metadata-item">
                    <div class="metadata-label">Sujeto Observado</div>
                    <div class="metadata-value">${entry.subject}</div>
                </div>
                <div class="metadata-item">
                    <div class="metadata-label">Clima</div>
                    <div class="metadata-value">${entry.weather}</div>
                </div>
                ${entry.images && entry.images.length > 0 ? `
                    <div class="metadata-item">
                        <div class="metadata-label">Evidencias</div>
                        <div class="metadata-value">${entry.images.length} imagen(es)</div>
                    </div>
                ` : ''}
            </div>
            
            <div class="entry-content">
                ${entry.content.replace(/\n/g, '<br>')}
            </div>
            
            ${entry.images && entry.images.length > 0 ? renderEntryImages(entry) : ''}
        </div>
    `).join('');
}

function renderEntryImages(entry) {
    const images = entry.images.map((img, index) => {
        const imageUrl = `data/uploads/case_${currentCaseId}/entry_${entry.id}/${img.filename}`;
        const thumbUrl = `data/uploads/case_${currentCaseId}/entry_${entry.id}/${img.thumbnail}`;
        
        return {
            url: imageUrl,
            thumbnail_url: thumbUrl,
            filename: img.filename,
            original_name: img.original_name,
            entryId: entry.id
        };
    });
    
    return `
        <div class="entry-images">
            <div class="images-header">
                <h4>📸 Evidencias Fotográficas (${entry.images.length})</h4>
            </div>
            <div class="images-grid">
                ${entry.images.map((img, index) => `
                    <div class="image-item">
                        <img 
                            src="data/uploads/case_${currentCaseId}/entry_${entry.id}/${img.thumbnail || img.filename}" 
                            alt="${img.original_name || 'Evidencia'}" 
                            class="entry-image" 
                            onclick='viewEntryImages(${JSON.stringify(images)}, ${index})'
                        >
                        <div class="image-actions">
                            <button onclick='viewEntryImages(${JSON.stringify(images)}, ${index})' class="btn-icon" title="Ver">🔍</button>
                            <button onclick="deleteImage(${currentCaseId}, ${entry.id}, '${img.filename}')" class="btn-icon" title="Eliminar">🗑️</button>
                        </div>
                        <div class="image-info">
                            <span class="image-name">${img.original_name || img.filename}</span>
                            <span class="image-size">${formatFileSize(img.size || 0)}</span>
                        </div>
                    </div>
                `).join('')}
            </div>
        </div>
    `;
}

function renderEmptyState() {
    return `
        <div class="empty-state">
            <div class="empty-state-icon">📋</div>
            <h3>No hay entradas para este caso</h3>
            <p>Comienza agregando la primera entrada de investigación</p>
        </div>
    `;
}

function renderEmptyMainContent() {
    const mainContentArea = document.getElementById('mainContentArea');
    if (!mainContentArea) return;
    
    mainContentArea.innerHTML = `
        <div class="empty-state">
            <div class="empty-state-icon">🕵️</div>
            <h3>Bienvenido al Sistema de Gestión de Investigaciones</h3>
            <p>No hay casos activos. Crea un nuevo caso para comenzar.</p>
            <button class="btn btn-success btn-large" onclick="openNewCaseModal()">
                🔍 Crear Primer Caso
            </button>
        </div>
    `;
}

// ==================== FUNCIONES UI - MODALES ====================

function openEntryModal() {
    if (!currentCaseId) {
        showNotification('Selecciona un caso primero', 'error');
        return;
    }
    
    const currentCase = cases.find(c => c.id == currentCaseId);
    if (currentCase && currentCase.status === 'closed') {
        showNotification('No se pueden agregar entradas a casos cerrados', 'error');
        return;
    }
    
    // Limpiar formulario
    clearEntryForm();
    
    // Configurar fecha actual
    document.getElementById('entryDate').value = new Date().toISOString().split('T')[0];
    
    // Mostrar modal
    document.getElementById('entryModal').style.display = 'block';
}

function openNewCaseModal() {
    clearCaseForm();
    document.getElementById('newCaseModal').style.display = 'block';
}

function editEntry(entryId) {
    const entry = entries[currentCaseId].find(e => e.id == entryId);
    if (!entry) return;

    currentEditingEntryId = entryId;

    // Llenar el formulario
    document.getElementById('editEntryDate').value = entry.date;
    document.getElementById('editEntryTime').value = entry.time;
    document.getElementById('editActivityType').value = entry.activityType;
    document.getElementById('editLocation').value = entry.location;
    document.getElementById('editSubject').value = entry.subject;
    document.getElementById('editWeather').value = entry.weather;
    document.getElementById('editEntryContent').value = entry.content;

    document.getElementById('editEntryModal').style.display = 'block';
}

function editCase(caseId) {
    const caseData = cases.find(c => c.id == caseId);
    if (!caseData) return;
    
    // Aquí podrías abrir un modal de edición de caso
    // Por ahora, solo cambiaremos el estado como ejemplo
    const newStatus = prompt('Cambiar estado del caso (active/closed/confidential):', caseData.status);
    if (newStatus && ['active', 'closed', 'confidential'].includes(newStatus)) {
        updateCase(caseId, { status: newStatus });
    }
}

function closeModal(modalId) {
    const modal = document.getElementById(modalId);
    if (modal) {
        modal.style.display = 'none';
    }
    
    // Limpiar formularios según el modal
    if (modalId === 'entryModal') {
        clearEntryForm();
    } else if (modalId === 'newCaseModal') {
        clearCaseForm();
    } else if (modalId === 'editEntryModal') {
        currentEditingEntryId = null;
    }
}

// ==================== FUNCIONES DE CASOS ====================

function createNewCase() {
    const type = document.getElementById('caseTitle').value;
    const priority = document.getElementById('casePriority').value;
    const clientName = document.getElementById('clientName').value;
    const clientContact = document.getElementById('clientContact').value;
    const description = document.getElementById('caseDescription').value;
    
    if (!type || !clientName.trim()) {
        showNotification('Por favor, completa los campos obligatorios', 'error');
        return;
    }

    const newCase = {
        type,
        title: getCaseTypeLabel(type),
        client: clientName,
        contact: clientContact || 'No especificado',
        priority,
        description: description || 'Sin descripción',
        date: new Date().toISOString().split('T')[0],
        status: 'active'
    };

    saveCase(newCase);
    closeModal('newCaseModal');
}

async function closeCase() {
    if (confirm('¿Cerrar este caso? No podrás agregar más entradas.')) {
        await updateCase(currentCaseId, { status: 'closed' });
        showNotification('Caso cerrado correctamente', 'success');
    }
}

async function reopenCase() {
    if (confirm('¿Reabrir este caso?')) {
        await updateCase(currentCaseId, { status: 'active' });
        showNotification('Caso reabierto correctamente', 'success');
    }
}

// ==================== FUNCIONES DE INFORMES ====================

function generateReport() {
    const currentCase = cases.find(c => c.id == currentCaseId);
    const caseEntries = entries[currentCaseId] || [];
    
    if (caseEntries.length === 0) {
        showNotification('No hay entradas para generar el informe', 'error');
        return;
    }
    
    showNotification('Generando informe PDF...', 'info');
    
    // Aquí llamarías a tu función de generación de PDF
    setTimeout(() => {
        showNotification(`Informe generado: ${currentCase.title}_${new Date().toISOString().split('T')[0]}.pdf`, 'success');
    }, 2000);
}

function exportEvidence() {
    const currentCase = cases.find(c => c.id == currentCaseId);
    const caseEntries = entries[currentCaseId] || [];
    
    const totalImages = caseEntries.reduce((sum, entry) => {
        return sum + (entry.images ? entry.images.length : 0);
    }, 0);
    
    if (totalImages === 0) {
        showNotification('No hay evidencias fotográficas para exportar', 'error');
        return;
    }
    
    if (confirm(`¿Exportar ${totalImages} evidencias del caso?`)) {
        showNotification(`Exportando ${totalImages} evidencias...`, 'info');
        
        // Aquí implementarías la exportación real
        setTimeout(() => {
            showNotification('Evidencias exportadas correctamente', 'success');
        }, 2000);
    }
}

// ==================== FUNCIONES DE IMÁGENES ====================

function setupImageDropZone() {
    const dropZone = document.getElementById('imageDropZone');
    if (!dropZone) return;
    
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, preventDefaults, false);
    });
    
    ['dragenter', 'dragover'].forEach(eventName => {
        dropZone.addEventListener(eventName, () => {
            dropZone.classList.add('drag-hover');
        }, false);
    });
    
    ['dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, () => {
            dropZone.classList.remove('drag-hover');
        }, false);
    });
    
    dropZone.addEventListener('drop', (e) => {
        const files = e.dataTransfer.files;
        handleImageSelection(files);
    }, false);
}

function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
}

function handleImageSelection(files) {
    const validFiles = [];
    const errors = [];
    
    Array.from(files).forEach(file => {
        if (!file.type.startsWith('image/')) {
            errors.push(`${file.name} no es una imagen`);
            return;
        }
        if (file.size > 10 * 1024 * 1024) {
            errors.push(`${file.name} excede 10MB`);
            return;
        }
        validFiles.push(file);
    });
    
    if (errors.length > 0) {
        errors.forEach(error => showNotification(error, 'error'));
    }
    
    if (validFiles.length > 0) {
        selectedFiles = validFiles;
        showImagePreviews(validFiles);
    }
}

function showImagePreviews(files) {
    const container = document.getElementById('imagePreviewContainer');
    if (!container) return;
    
    container.innerHTML = '';
    container.style.display = files.length > 0 ? 'grid' : 'none';
    
    files.forEach((file, index) => {
        const reader = new FileReader();
        reader.onload = (e) => {
            const preview = document.createElement('div');
            preview.className = 'image-preview-item';
            preview.innerHTML = `
                <img src="${e.target.result}" alt="${file.name}">
                <button class="remove-preview" onclick="removePreviewImage(${index})">×</button>
                <span class="preview-name">${file.name}</span>
            `;
            container.appendChild(preview);
        };
        reader.readAsDataURL(file);
    });
}

function removePreviewImage(index) {
    selectedFiles.splice(index, 1);
    showImagePreviews(selectedFiles);
}

function viewEntryImages(images, startIndex = 0) {
    if (typeof openImageGallery === 'function') {
        openImageGallery(images, startIndex);
    } else {
        // Fallback si la galería no está disponible
        window.open(images[startIndex].url, '_blank');
    }
}

// ==================== FUNCIONES AUXILIARES ====================

function formatDate(dateString) {
    const date = new Date(dateString);
    return date.toLocaleDateString('es-ES', { 
        day: '2-digit', 
        month: '2-digit', 
        year: 'numeric' 
    });
}

function formatFileSize(bytes) {
    if (!bytes || bytes === 0) return '0 KB';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
}

function getCaseTypeLabel(type) {
    const labels = {
        'infidelidad': 'Infidelidad Matrimonial',
        'fraude': 'Fraude/Estafa',
        'localizacion': 'Localización de Persona',
        'corporativo': 'Investigación Corporativa',
        'background': 'Verificación de Antecedentes',
        'seguros': 'Fraude de Seguros',
        'otros': 'Otros'
    };
    return labels[type] || type;
}

function getActivityTypeLabel(type) {
    const labels = {
        'seguimiento': 'Seguimiento',
        'vigilancia': 'Vigilancia',
        'entrevista': 'Entrevista',
        'reconocimiento': 'Reconocimiento',
        'documentacion': 'Documentación',
        'busqueda': 'Búsqueda de información'
    };
    return labels[type] || type;
}

function getStatusLabel(status) {
    const labels = {
        'active': 'En Progreso',
        'closed': 'Cerrado',
        'confidential': 'Confidencial'
    };
    return labels[status] || status;
}

function getPriorityLabel(priority) {
    const labels = {
        'alta': 'Alta',
        'media': 'Media',
        'baja': 'Baja'
    };
    return labels[priority] || priority;
}

function clearEntryForm() {
    document.getElementById('entryDate').value = new Date().toISOString().split('T')[0];
    document.getElementById('entryTime').value = '';
    document.getElementById('activityType').value = '';
    document.getElementById('location').value = '';
    document.getElementById('subject').value = '';
    document.getElementById('weather').value = '';
    document.getElementById('entryContent').value = '';
    document.getElementById('imageInput').value = '';
    
    selectedFiles = [];
    const previewContainer = document.getElementById('imagePreviewContainer');
    if (previewContainer) {
        previewContainer.innerHTML = '';
        previewContainer.style.display = 'none';
    }
}

function clearCaseForm() {
    document.getElementById('caseTitle').value = '';
    document.getElementById('casePriority').value = 'media';
    document.getElementById('clientName').value = '';
    document.getElementById('clientContact').value = '';
    document.getElementById('caseDescription').value = '';
}

function showNotification(message, type = 'success') {
    // Crear elemento de notificación
    const notification = document.createElement('div');
    notification.className = `notification ${type}`;
    notification.textContent = message;
    
    document.body.appendChild(notification);
    
    // Mostrar con animación
    setTimeout(() => {
        notification.classList.add('show');
    }, 100);
    
    // Ocultar después de 3 segundos
    setTimeout(() => {
        notification.classList.remove('show');
        setTimeout(() => {
            if (notification.parentNode) {
                notification.parentNode.removeChild(notification);
            }
        }, 300);
    }, 3000);
}

// ==================== COMPRESIÓN DE IMÁGENES ====================

async function compressImage(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        
        reader.onload = (e) => {
            const img = new Image();
            
            img.onload = () => {
                const canvas = document.createElement('canvas');
                let width = img.width;
                let height = img.height;
                
                // Redimensionar si es necesario
                const maxWidth = 1920;
                const maxHeight = 1080;
                
                if (width > maxWidth || height > maxHeight) {
                    const ratio = Math.min(maxWidth / width, maxHeight / height);
                    width *= ratio;
                    height *= ratio;
                }
                
                canvas.width = width;
                canvas.height = height;
                
                const ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0, width, height);
                
                canvas.toBlob(
                    (blob) => {
                        if (blob) {
                            const compressedFile = new File([blob], file.name, { type: file.type });
                            resolve(compressedFile);
                        } else {
                            resolve(file);
                        }
                    },
                    file.type,
                    0.85
                );
            };
            
            img.onerror = () => resolve(file);
            img.src = e.target.result;
        };
        
        reader.onerror = () => resolve(file);
        reader.readAsDataURL(file);
    });
}

// ==================== EXPORTAR FUNCIONES GLOBALES ====================
window.loadCases = loadCases;
window.selectCase = selectCase;
window.openEntryModal = openEntryModal;
window.openNewCaseModal = openNewCaseModal;
window.closeModal = closeModal;
window.saveEntry = saveEntry;
window.updateEntry = updateEntry;
window.deleteEntry = deleteEntry;
window.createNewCase = createNewCase;
window.editEntry = editEntry;
window.editCase = editCase;
window.closeCase = closeCase;
window.reopenCase = reopenCase;
window.generateReport = generateReport;
window.exportEvidence = exportEvidence;
window.deleteCaseConfirm = deleteCaseConfirm;
window.uploadAdditionalImages = uploadAdditionalImages;
window.deleteImage = deleteImage;
window.viewEntryImages = viewEntryImages;
window.removePreviewImage = removePreviewImage;
window.handleImageSelection = handleImageSelection;