/* Contenedor principal estilo "Hoja de Papel" */
.main-container-note-editor {
    /* max-width: 900px; */
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    overflow: hidden;
    animation: fadeIn 0.8s ease;
}

/* Cabecera */
.app-header-note-editor {
    background: #fff;
    padding: 20px 30px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-title {
    font-weight: 600;
    color: #2c3e50;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Botones de acción */
.btn-custom {
    border-radius: 50px;
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
}

.btn-import { background: #f1f3f5; color: #495057; }
.btn-import:hover { background: #e9ecef; transform: translateY(-2px); }

.btn-export { background: #38d39f; color: white; }
.btn-export:hover { background: #2ecc71; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3); }

/* Botón Mágico AI */
.btn-ai {
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 4px 15px rgba(118, 75, 162, 0.4);
}
.btn-ai:hover {
    background: linear-gradient(45deg, #764ba2, #667eea);
    transform: translateY(-2px) scale(1.02);
    color: white;
}

/* Personalización del Editor */
.note-editor.note-frame {
    border: none !important;
}
.note-toolbar {
    background: #fafafa !important;
    border-bottom: 1px solid #eee !important;
    padding: 10px 20px !important;
}
.note-editable {
    padding: 40px !important;
    min-height: 500px !important;
    font-family: 'Georgia', serif; /* Fuente más clásica para el documento */
    font-size: 16px;
    line-height: 1.6;
}
.note-statusbar { display: none !important; } /* Ocultar barra inferior fea */

/* Loading */
#loadingOverlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,0.8);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.spinner-ai {
    font-size: 3rem;
    background: -webkit-linear-gradient(45deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { 100% { transform: rotate(360deg); } }


/* SOLUCIÓN FINAL PARA CONFLICTO DE Z-INDEX (Bootstrap + Tailwind) */

/* * El modal principal de Bootstrap usa típicamente z-index: 1055.
    * Debemos usar un valor más alto, como 1070, para todos los elementos
    * flotantes de Summernote.
    */

.editor-container { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.toolbar-custom { margin-bottom: 15px; display: flex; gap: 10px; flex-wrap: wrap; }
/* 1. Elementos Flotantes (Dropdowns, Paletas de Color, Popovers) */
.note-editor .note-popover, 
.note-editor .note-dropdown-menu,
.note-editor .note-toolbar .note-btn-group .dropdown-menu {
    z-index: 1070 !important; 
}

/* 2. Modales Internos de Summernote (Ventanas de Imagen/Enlace) */
/* Estas son las ventanas que piden la URL de la imagen, etc. */
.note-modal {
    /* Aseguramos que la ventana en sí esté encima */
    z-index: 1070 !important; 
}

/* 3. El Backdrop (Fondo gris) del modal de Summernote (si existiera) */
/* Si Summernote crea su propio fondo, debe estar entre el modal y sus herramientas */
.note-modal-backdrop {
    z-index: 1065 !important;
}

/* 4. Posición del Popover (para que no quede detrás si se usa 'position') */
/* Esto es crucial para la barra que aparece al seleccionar texto (Bold, Underline) */
.note-editor .note-editing-area .note-editable .note-toolbar.note-popover {
    /* Fuerza a que el popover esté posicionado correctamente */
    position: absolute !important; 
    z-index: 1070 !important;
}

/* 5. Corrección de la posición de la barra de herramientas al editar */
/* A veces, la barra de herramientas principal también se ve afectada */
.note-toolbar {
    z-index: 100 !important; /* Valor bajo, solo para asegurar que no interfiera */
}

/* 6. Corrección específica para el menú de colores */
.note-color-ext {
    z-index: 1070 !important;
}

.report-viewer {
    background: #fff;
    padding: .7rem;
    border-radius: 10px;
}

.report-viewer .report-header {
    border-bottom: 2px solid #eee;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    text-align: center;
}

/* sleccpicker */
.bootstrap-select .bs-ok-default:after {
    border-style: groove !important;
}



/* Personalización del DateTimePicker para evitar conflictos de z-index */
/* Aseguramos que el DateTimePicker tenga un z-index alto para estar por encima de otros elementos, especialmente modales o dropdowns de Bootstrap. Además, mejoramos su apariencia para que se integre mejor con el diseño general. */
.dropdown-menu.bootstrap-datetimepicker-widget {
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
    background-color: #fff;
    padding: 10px;
    z-index: 1070 !important; /* Asegura que el DateTimePicker esté por encima de otros elementos */
    font: 14px 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    color: #333 !important;
     /* Agrega una transición suave para la aparición del DateTimePicker */ 
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
/* Inicialmente, el DateTimePicker estará oculto y con opacidad 0 para evitar que interfiera con otros elementos. Cuando se muestre, se aplicarán las propiedades para hacerlo visible y con opacidad completa. */
.dropdown-menu.bootstrap-datetimepicker-widget.show {
    opacity: 1;
    filter: alpha(opacity=100);
    visibility: visible;
    transform: translate3d(0, 0, 0);
}
    
/* Corrección para el botón de cierre del DateTimePicker */
.dropdown-menu.bootstrap-datetimepicker-widget .close {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 1.2rem;
    color: #aaa;
    cursor: pointer;
    z-index: 1071 !important; /* Asegura que el botón de cierre esté por encima del DateTimePicker */
}