/**
 * ============================================================================
 * REPORT SYSTEM STYLES - ColabLLM
 * ============================================================================
 * 
 * Propósito:
 * Estilos para el sistema de reportes de mensajes
 * Incluye menú contextual y modal de reporte
 * 
 * Dependencias:
 * - main.css: Estilos base del sistema
 * - modal.css: Estilos base de modales
 * 
 * Relación con otros módulos:
 * - Usado por: MessageContextMenu, ReportModal
 * - Usa: Variables CSS de main.css
 * - Se integra: Con sistema de temas del aplicativo
 * 
 * Características principales:
 * - Menú contextual con animaciones
 * - Modal de reporte responsive
 * - Validación visual de formularios
 * - Integración con sistema de temas
 * 
 * ============================================================================
 */

/* ============================================================================
   MENÚ CONTEXTUAL DE MENSAJES
   ============================================================================ */

.message-context-menu {
    position: fixed;
    z-index: 10000;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    min-width: 200px;
    max-width: 250px;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.2s ease;
}

.message-context-menu:not(.hidden) {
    opacity: 1;
    transform: scale(1);
}

.context-menu-content {
    padding: 0;
}

.context-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    border-radius: 8px 8px 0 0;
}

.context-menu-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.context-menu-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.context-menu-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.context-menu-options {
    padding: 8px 0;
}

.context-menu-option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    text-align: left;
}

.context-menu-option:hover {
    background: var(--bg-hover);
}

.context-menu-option i {
    margin-right: 12px;
    width: 16px;
    text-align: center;
    color: var(--text-secondary);
}

.context-menu-option:hover i {
    color: var(--text-primary);
}

.context-menu-option#reportMessage i {
    color: var(--warning-color);
}

.context-menu-option#reportMessage:hover i {
    color: var(--warning-color-dark);
}

.context-menu-option#copyMessage i {
    color: var(--info-color);
}

.context-menu-option#copyMessage:hover i {
    color: var(--info-color-dark);
}

/* ============================================================================
   MODAL DE REPORTE
   ============================================================================ */

/* Modal overlay */
#reportModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

#reportModal:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

#reportModal.hidden {
    opacity: 0;
    visibility: hidden;
}

.report-modal-content {
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    background: #1f2937 !important;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 10000;
    color: #f9fafb !important;
}

.modal-header .modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--warning-color);
}

.modal-header .modal-title i {
    font-size: 20px;
}

/* Botón de cerrar del modal */
.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.modal-close i {
    font-size: 18px;
}

.report-info {
    margin-bottom: 24px;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border-left: 4px solid var(--warning-color);
}

.report-message-preview {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    background-color: #374151 !important;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #4b5563 !important;
}

.report-message-preview strong {
    color: #f9fafb !important;
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.report-message-preview span {
    color: #f9fafb !important;
    font-style: italic;
    background: #374151 !important;
    padding: 8px 12px;
    border-radius: 4px;
    display: block;
    word-break: break-word;
    border: 1px solid #4b5563 !important;
}

/* Estilos específicos para el modal de reportes */
#reportModal .modal-body {
    background-color: #1f2937 !important;
    color: #f9fafb !important;
}

#reportModal .modal-body * {
    color: #f9fafb !important;
}

#reportModal .form-label {
    color: #f9fafb !important;
}

#reportModal .form-select {
    background-color: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}

#reportModal .form-select option {
    background-color: #374151 !important;
    color: #f9fafb !important;
}

#reportModal .form-textarea {
    background-color: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}

#reportModal .form-textarea::placeholder {
    color: #9ca3af !important;
}

#reportModal .btn {
    background-color: #3b82f6 !important;
    color: white !important;
    border-color: #3b82f6 !important;
}

#reportModal .btn:hover {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

#reportModal .btn-secondary {
    background-color: #6b7280 !important;
    color: white !important;
    border-color: #6b7280 !important;
}

#reportModal .btn-secondary:hover {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
}

/* ============================================================================
   FORMULARIO DE REPORTE
   ============================================================================ */

.report-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.required {
    color: var(--error-color);
    font-weight: 700;
}

.form-select,
.form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.2s ease;
    font-family: inherit;
}

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

.form-select.error,
.form-textarea.error {
    border-color: var(--error-color);
    box-shadow: 0 0 0 3px rgba(var(--error-color-rgb), 0.1);
}

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

.form-help {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.form-help.error {
    color: var(--error-color);
}

.field-error {
    font-size: 12px;
    color: var(--error-color);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.field-error::before {
    content: '⚠️';
    font-size: 10px;
}

/* ============================================================================
   UPLOAD DE ARCHIVOS
   ============================================================================ */

.file-upload-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.file-input {
    display: none;
}

.file-upload-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.file-upload-label:hover {
    border-color: var(--primary-color);
    background: var(--bg-hover);
    color: var(--text-primary);
}

.file-upload-label i {
    font-size: 16px;
}

.file-upload-info {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* ============================================================================
   CHECKBOX PERSONALIZADO
   ============================================================================ */

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    color: #f9fafb !important;
}

.form-checkbox input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #6b7280 !important;
    border-radius: 4px !important;
    background: #374151 !important;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.form-checkbox input[type="checkbox"]:checked + .checkmark {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

.form-checkbox input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white !important;
    font-size: 14px !important;
    font-weight: bold;
}

.form-checkbox:hover .checkmark {
    border-color: #3b82f6 !important;
}

/* ============================================================================
   BOTONES DEL MODAL
   ============================================================================ */

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    min-width: 120px;
    justify-content: center;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

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

.btn-secondary:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--text-secondary);
}

.btn-primary {
    background: var(--warning-color);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: var(--warning-color-dark);
    transform: translateY(-1px);
}

.btn-primary:disabled {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 2px solid var(--border-color);
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 768px) {
    .report-modal-content {
        width: 95%;
        margin: 20px;
    }
    
    .modal-footer {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
    }
    
    .context-menu-option {
        padding: 16px;
        font-size: 16px;
    }
    
    .context-menu-option i {
        font-size: 18px;
        margin-right: 16px;
    }
}

@media (max-width: 480px) {
    .report-modal-content {
        width: 100%;
        height: 100%;
        border-radius: 0;
        margin: 0;
    }
    
    .modal-header {
        padding: 16px;
    }
    
    .modal-body {
        padding: 16px;
    }
    
    .modal-footer {
        padding: 16px;
    }
}

/* ============================================================================
   ANIMACIONES
   ============================================================================ */

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-context-menu:not(.hidden) {
    animation: slideInFromTop 0.2s ease;
}

.report-modal-content:not(.hidden) {
    animation: slideInFromBottom 0.3s ease;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 480px) {
    .report-modal-content {
        width: 100vw;
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
        margin: 0;
    }
    
    #reportModal {
        align-items: flex-start;
        padding: 0;
    }
    
    .modal-header {
        padding: 16px;
    }
    
    .modal-body {
        padding: 16px;
    }
    
    .modal-footer {
        padding: 16px;
    }
}

/* ============================================================================
   TEMA OSCURO
   ============================================================================ */

[data-theme="dark"] .message-context-menu {
    background: rgba(30, 30, 30, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .context-menu-header {
    background: rgba(40, 40, 40, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .report-info {
    background: rgba(40, 40, 40, 0.95);
    border-left-color: var(--warning-color);
}

[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
    background: rgba(40, 40, 40, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .file-upload-label {
    background: rgba(40, 40, 40, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .checkmark {
    background: rgba(40, 40, 40, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ============================================================================
   LIMITACIONES CONOCIDAS Y POSIBLES MEJORAS
   ============================================================================
   
   Limitaciones actuales:
   1. No tiene animaciones de entrada/salida del menú contextual
   2. No tiene efectos de hover en todos los elementos
   3. No tiene soporte para temas personalizados
   4. No tiene animaciones de carga en botones
   5. No tiene efectos de focus visible en todos los elementos
   6. No tiene soporte para modo de alto contraste
   7. No tiene animaciones de transición entre estados
   8. No tiene efectos de sombra personalizables
   9. No tiene soporte para fuentes personalizadas
   10. No tiene animaciones de validación en tiempo real
   11. No tiene efectos de parallax en elementos
   12. No tiene soporte para modo de reducción de movimiento
   13. No tiene animaciones de micro-interacciones
   14. No tiene efectos de glassmorphism personalizables
   15. No tiene soporte para modo de lectura
   
   Posibles mejoras:
   1. Añadir animaciones de entrada/salida del menú contextual
   2. Implementar efectos de hover en todos los elementos
   3. Añadir soporte para temas personalizados
   4. Implementar animaciones de carga en botones
   5. Añadir efectos de focus visible en todos los elementos
   6. Implementar soporte para modo de alto contraste
   7. Añadir animaciones de transición entre estados
   8. Implementar efectos de sombra personalizables
   9. Añadir soporte para fuentes personalizadas
   10. Implementar animaciones de validación en tiempo real
   11. Añadir efectos de parallax en elementos
   12. Implementar soporte para modo de reducción de movimiento
   13. Añadir animaciones de micro-interacciones
   14. Implementar efectos de glassmorphism personalizables
   15. Añadir soporte para modo de lectura
   
   ============================================================================ */