/* SILENOS 3/styles2.css */
/* --- INTERFAZ DE ESCRITURA (BOOK EDITOR) --- */

.book-editor-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #f5f5f5;
    color: #2d3748;
    font-family: 'Georgia', 'Cambria', serif;
}

/* Barra Superior */
.book-toolbar {
    flex-shrink: 0;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: #e0e5ec;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    user-select: none;
    z-index: 10;
}

.book-meta-info {
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #718096;
    display: flex;
    gap: 10px;
    align-items: center;
}

.book-stat-pill {
    background: rgba(0,0,0,0.05);
    padding: 2px 8px;
    border-radius: 12px;
}

/* Scroll Area */
.book-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 40px 10%;
    scroll-behavior: smooth;
    position: relative; /* Contexto de apilamiento base */
}

/* Estructura del Capítulo */
.chapter-block {
    margin-bottom: 60px;
    position: relative;
    border-left: 2px solid transparent; 
    transition: all 0.2s;
}

.chapter-block:hover {
    border-left-color: #cbd5e0;
    z-index: 50; /* Elevar bloque entero al hover */
}

/* Cabecera */
.chapter-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-left: 10px;
    position: relative;
    /* FIX: Asegura que el título tenga su capa pero quede bajo los botones */
    z-index: 1; 
}

.chapter-title-input {
    font-family: 'Segoe UI', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a202c;
    border: none;
    background: transparent;
    width: 100%;
    outline: none;
    padding-right: 70px; /* Hueco de seguridad para botones */
}

/* Párrafos */
.paragraph-wrapper {
    position: relative;
    margin-bottom: 15px;
    padding-left: 10px;
    /* FIX: Layer base */
    z-index: 1; 
}

/* SOLUCIÓN NUCLEAR: Al hacer hover, este párrafo se convierte en una capa GPU separada */
.paragraph-wrapper:hover,
.paragraph-wrapper:focus-within,
.chapter-header:hover {
    z-index: 1000;
    transform: translateZ(10px); /* Truco para forzar prioridad de renderizado */
}

.paragraph-text {
    width: 100%;
    min-height: 80px;
    border: none;
    background: transparent;
    font-size: 1.15rem;
    line-height: 1.8;
    color: #2d3748;
    resize: none;
    outline: none;
    overflow: hidden;
    padding-right: 70px; /* Hueco de seguridad para botones */
    position: relative;
    z-index: 2; /* Texto nivel 2 */
}

/* Controles Flotantes */
.editor-controls {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    display: flex;
    gap: 4px;
    position: absolute;
    right: 0;
    /* Posición segura dentro del contenedor */
    top: 0; 
    padding: 4px;
    
    /* FIX: Nivel DIOS (por encima del texto y del wrapper) */
    z-index: 9999; 
    
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.05);
}

/* Mostrar controles */
.chapter-block:hover .chapter-header .editor-controls,
.paragraph-wrapper:hover .editor-controls,
.paragraph-wrapper:focus-within .editor-controls {
    opacity: 1;
    visibility: visible;
}

.editor-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #a0aec0;
    cursor: pointer;
    position: relative;
    transition: all 0.1s;
}

/* FIX: Los iconos no deben bloquear el click del botón */
.editor-btn svg, .editor-btn i {
    pointer-events: none;
}

.editor-btn:hover { 
    background: #edf2f7; 
    color: #4a5568; 
    transform: scale(1.1);
}
.editor-btn.danger:hover { 
    background: #fff5f5; 
    color: #e53e3e; 
}

/* Botón Añadir Grande */
.add-chapter-btn {
    width: 100%;
    padding: 15px;
    border: 2px dashed #cbd5e0;
    border-radius: 12px;
    background: transparent;
    color: #718096;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 50px;
}
.add-chapter-btn:hover {
    border-color: #4299e1;
    color: #4299e1;
    background: #ebf8ff;
}

/* Scrollbars */
.book-scroll-area::-webkit-scrollbar { width: 6px; }
.book-scroll-area::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 3px; }
.book-scroll-area::-webkit-scrollbar-track { background: transparent; }