body,
        html {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: 'Poppins', sans-serif; 
            font-weight: 400; /* Peso de fuente normal por defecto */
        }
        button, .btn {
            font-family: 'Poppins', sans-serif;    
            font-weight: normal; /* Asegura que todos los botones no tengan negrita */
        }

        .container-fluid {
            height: 100%;
            display: flex;
            flex-direction: column;
            padding: 0;
        }

        .main-content {
            display: flex;
            flex-grow: 1;
            height: 100%;
        }

        .header .nav-pills .nav-link {
            display: flex;
            flex-direction: row; 
            align-items: center; 
            justify-content: center; 
            padding: 0.4rem 0.8rem; 
            color: #6c757d;
            font-size: 0.75rem; 
        }
        
        .header .nav-pills img {
            height: 20px; 
            object-fit: cover;
            border-radius: 5px;
            margin-bottom: 0; 
            margin-right: 5px; 
        }

        .header .nav-pills .nav-link.active {
            background-color: #e9ecef;
            color: #000;
            border-radius: 0.375rem; /* MODIFICACIÓN AÑADIDA */
        }

        #preview-tab-btn {
            padding: 0.44rem 0.68rem; 
        }

        #preview-tab-btn img {
            height: 18px; 
            width: auto; 
            object-fit: contain; 
        }

        .tab-content {
            flex-grow: 1;
            height: calc(100vh - 84px); 
            overflow-y: auto;
        }

        .tab-pane {
            height: 100%;
        }


        #left-column {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        #editor-wrapper {
            flex-grow: 1;
            position: relative;
            min-height: 200px;
        }

        #footnotes-container {
            height: 200px;
            min-height: 100px;
            max-height: 500px;
            background-color: #f8f9fa;
            border-top: 2px solid #dee2e6;
            display: flex;
            flex-direction: column;
            resize: vertical;
            overflow: hidden;
        }

        #footnotes-header {
            padding: 8px 15px;
            font-weight: normal; /* Quitar negrita */
            border-bottom: 1px solid #dee2e6;
            background-color: #e9ecef;
            cursor: ns-resize;
            text-align: left;
        }

        #footnotes-panel {
            flex-grow: 1;
            overflow-y: auto;
            padding: 15px;
        }

        .footnote-entry {
            display: flex;
            align-items: flex-start;
            margin-bottom: 10px;
        }

        .footnote-entry-number {
            margin-right: 8px;
            color: #0047bb;
        }

        .footnote-entry-number a {
            text-decoration: none;
            color: inherit;
        }

        .footnote-entry-content {
            flex-grow: 1;
            border: 1px solid #ced4da;
            padding: 5px 8px;
            border-radius: 4px;
            background-color: #fff;
            min-height: 22px; 
            font-size: 0.875rem; 
            text-align: left;
        }

        #sidebar {
            width: 280px; 
            flex-shrink: 0;
            padding: 15px;
            background-color: #f8f9fa;
            border-left: 1px solid #dee2e6;
            display: flex;
            flex-direction: column;
        }

        #sidebar .nav-tabs {
            margin-bottom: 15px;
        }

        #sidebar .nav-tabs .nav-link {
            padding: 0.5rem 0.6rem; 
            font-size: 0.85rem; 
        }

        #sidebar .tab-content {
            flex-grow: 1;
            overflow-y: auto;
        }
        
        #sidebar .btn-block {
            width: 100%;
            text-align: left;
            margin-bottom: 5px;
            border-radius: 50rem;
            font-size: 0.8rem; 
            font-weight: normal; 
            border-width: 1px; 
        }

        #sidebar .btn {
            font-size: 0.8rem;
            padding: 0.25rem 0.5rem;
        }

        /* --- INICIO DE LA MODIFICACIÓN SOLICITADA --- */
        .template-img {
            width: 100%;
            height: auto;
            border-radius: 8px; /* Borde más redondeado */
            margin-bottom: 15px;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra inicial muy sutil */
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Transición suave */
        }

        .template-img:hover {
            transform: translateY(-3px); /* Levantar la imagen ligeramente */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada al pasar el mouse */
        }
        /* --- FIN DE LA MODIFICACIÓN SOLICITADA --- */

        #file-input {
            display: none;
        }

        #editor-container {
            flex-grow: 1;
            position: relative;
        }

        .note-editor {
            height: 100% !important;
            margin: 10px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .note-editing-area {
            height: calc(100% - 40px);
        }

        .note-editable {
            height: 100% !important;
        }

        .footnote-ref {
            position: relative;
            vertical-align: baseline;
            top: -0.3em; 
            font-size: smaller;
            text-decoration: none;
        }

        .note-toolbar {
            position: relative;
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
            padding: 10px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            display: flex;
        }

        .header {
            padding: 10px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
        }

        .header .logo {
            justify-self: start;
        }

        .header .nav-pills {
        }


        .logo {
            max-height: 40px;
            width: auto;
        }

        .note-editor .dropdown-toggle::after {
            display: none;
        }
        
        .btn {
            border-width: 1px; 
        }

        #import-btn,
        #save-btn {
            border-radius: 100px;
            padding: 8px 20px;
            border-width: 1px;
        }

        #save-btn {
            background-color: #0047BB !important;
            border-color: #0047BB !important;
        }

        #save-btn:hover,
        #save-btn:active,
        #save-btn:focus {
            background-color: #003a95 !important;
            border-color: #003a95 !important;
        }

        .form-control-pill {
            border-radius: 50rem;
        }

        .form-control-rounded {
            border-radius: 1rem;
            padding-top: 40px; 
        }

        .datos-sub-pills .nav-link {
            border-radius: 50rem;
            margin: 0 5px;
            padding: 6px 18px; 
            border: 1px solid #dee2e6;
            background-color: #e9ecef;
            color: #495057;
            transition: background-color 0.2s, color 0.2s;
            font-size: 0.8rem; 
        }

        .datos-sub-pills .nav-link.active {
            background-color: #cce5ff;
            color: #004085;
            border-color: #b8daff;
        }
        
        .rich-text-container {
            position: relative; 
        }
        .format-toolbar {
            position: absolute;
            top: 8px;   
            left: 8px; 
            z-index: 10;
        }
        .format-toolbar .btn {
            background-color: transparent;
            border: none;
            color: #888; 
            padding: 0.2rem 0.5rem;
            font-size: 0.85rem;
        }
        .format-toolbar .btn:hover {
            background-color: #e9ecef; 
            color: #000;
        }
        
        .keywords-container {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            padding: 0.375rem 0.75rem;
            min-height: calc(1.5em + 0.75rem + 2px);
            cursor: text;
        }

        .keyword-tag {
            display: inline-flex;
            align-items: center;
            background-color: #e9ecef;
            border: 1px solid #ced4da;
            border-radius: 50rem;
            padding: 0.25em 0.75em;
            margin-right: 5px;
            margin-bottom: 5px;
            font-size: 0.9em;
        }

        .remove-tag {
            margin-left: 8px;
            cursor: pointer;
            font-weight: normal; /* Quitar negrita */
        }

        .keywords-container input {
            border: none;
            outline: none;
            flex-grow: 1;
            padding: 0;
            background-color: transparent;
        }

        #welcome-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2000;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
        
        .remove-collaborator-btn {
            width: 32px;
            height: 32px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0; 
            border-radius: 50%; 
            background-color: #0047BB; 
            border-color: #0047BB; 
            transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
        }
        .remove-collaborator-btn:hover {
            background-color: #003a9e; 
            border-color: #003a9e; 
        }

        .btn-siguiente {
            background-color: #0047BB !important; 
            border-color: #0047BB !important; 
            transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
        }
        .btn-siguiente:hover {
            background-color: #003a9e !important; 
            border-color: #003a9e !important; 
        }

        .tooltip-inner {
            max-width: 400px; 
            padding: 8px 12px;
            color: #000;
            text-align: left;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: .25rem;
        }
        .tooltip.bs-tooltip-top .tooltip-arrow::before {
            border-top-color: #ccc; 
        }

        #index-sidebar {
            width: 240px;
            flex-shrink: 0;
            background-color: #f8f9fa;
            border-right: 1px solid #dee2e6;
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow-y: auto;
            position: relative; 
            padding-top: 1rem; 
        }

        #index-sidebar .accordion-button {
            font-size: 0.9rem;
            font-weight: normal; /* Quitar semi-negrita */
            padding: 0.8rem 1.25rem;
            background-color: #f8f9fa;
            color: #495057;
        }
        #index-sidebar .accordion-button:not(.collapsed) {
             box-shadow: none;
             background-color: #e9ecef;
        }
        #index-sidebar .accordion-button:focus {
            box-shadow: none;
            border-color: rgba(0,0,0,.125);
        }

        #index-sidebar .accordion-body {
            padding: 0 1rem 1rem 1rem;
        }
        
        #index-sidebar .accordion-body .btn {
            border-radius: 50rem;
        }

        .index-list {
             padding-left: 0.5rem;
             max-height: 250px;
             overflow-y: auto;
        }

        .index-list li a {
            display: block;
            padding: 0.4rem 0.75rem;
            text-decoration: none;
            color: #212529;
            border-radius: 4px;
            font-size: 0.85rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left; 
        }

        .index-list li a:hover {
            background-color: #e0e0e0;
        }

        .chapter-controls {
            opacity: 0; 
            transition: opacity 0.2s ease-in-out;
            margin-left: 8px;
        }
        .index-list li:hover .chapter-controls {
            opacity: 1; 
        }
        .move-chapter-btn {
            background: none;
            border: none;
            padding: 0 4px;
            cursor: pointer;
            color: #6c757d;
            font-size: 0.8rem;
        }
        .move-chapter-btn:hover {
            color: #000;
        }
        
        .note-btn-group.note-stats {
            margin-left: auto;
        }
        
        .btn-primary {
            background-color: #0047BB !important;
            border-color: #0047BB !important;
        }

        .btn-primary:hover,
        .btn-primary:active,
        .btn-primary:focus {
            background-color: #003a9e !important;
            border-color: #003a9e !important;
        }
        
        .datos-sub-pills .nav-link:hover {
            background-color: #0047BB;
            color: #ffffff;
            border-color: #0047BB;
        }

        .header .nav-pills .nav-link:not(.active):hover {
            background-color: #e9ecef; 
            color: #0047BB; 
            border-radius: 0.375rem; 
        }

        #save-book-btn,
        #reset-btn,
        #approve-and-download-btn,
        #import-btn,
        #download-interior-btn {
            font-size: 0.75rem; 
            padding: 0.3rem 0.8rem; 
            font-weight: normal; 
            text-transform: none; 
        }

        #apply-h1, #apply-h2, #apply-h3, #apply-h4 {
            text-transform: none;
        }
        
        #index-depth-selector.btn-group-vertical {
            border-radius: 0.375rem; 
            overflow: hidden;      
            border: 1px solid #dee2e6; /* Borde único y sutil para todo el grupo */
        }

        #index-depth-selector.btn-group-vertical .btn {
            text-transform: none; 
            font-size: 0.8rem;    
            text-align: center;
            border-radius: 0;
            border: none; /* Se quitan los bordes individuales entre botones */
            background-color: white; /* Fondo base blanco */
            color: #6c757d; /* Color de texto gris por defecto */
        }

        #index-depth-selector.btn-group-vertical .btn:not(.active):hover {
            background-color: #e9ecef; /* Color gris claro para el hover */
            color: #0047BB; /* Texto azul en hover */
        }

        #index-depth-selector .btn.active {
            background-color: #e0f0ff; /* Fondo celeste claro para el botón activo */
            border-color: transparent;
            color: #0047BB; /* Texto azul para el botón activo */
        }
        
        #styles-panel .btn-block {
            background-color: transparent;
            border-color: transparent;
            color: #495057;
            padding-left: 0.8rem;
            padding-right: 0.8rem;
            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        }
        
        #styles-panel .btn-block:hover {
            background-color: #e9ecef !important;
            color: #0047BB !important;
            border-color: transparent !important;
        }
        
/* --- INICIO CÓDIGO AÑADIDO PARA EL MODAL DE APROBACIÓN --- */
.approval-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none; /* Oculto por defecto */
    align-items: center;
    justify-content: center;
    z-index: 3000; 
    font-family: 'Poppins', sans-serif;
}

.approval-modal-content {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 0.5rem; /* Bordes redondeados sutiles */
    text-align: center;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.approval-modal-content p {
    font-family: 'Poppins', sans-serif;
    margin: 0 0 1.5rem 0; /* Espacio debajo del párrafo */
    color: #333;
}

.approval-modal-content p strong {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; /* Asegura la negrita */
}

.approval-modal-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem; /* Espacio entre los botones */
}

.approval-modal-buttons .btn {
    border: 1px solid #0047BB;
    color: #0047BB;
    background-color: transparent;
    border-radius: 50rem; /* Bordes redondeados al 50% */
    padding: 0.5rem 1.5rem;
    font-family: 'Poppins', sans-serif;
    font-weight: normal;
    transition: all 0.2s ease-in-out;
}

.approval-modal-buttons .btn:hover,
.approval-modal-buttons .btn:focus {
    background-color: #0047BB;
    color: #ffffff;
}
/* --- FIN CÓDIGO AÑADIDO PARA EL MODAL DE APROBACIÓN --- */
/* --- TEXTO ALTERNATIVO: CHAPITA SOBRE LA IMAGEN EN EL EDITOR ---------------
   Aparece al pasar el mouse (o al hacer clic) sobre una imagen del interior y
   dice cómo está su texto alternativo. Al tocarla se abre el cuadro para
   corregirlo.

   Vive FUERA de .note-editable, colgada del <body> y posicionada a mano sobre
   la imagen: si estuviera adentro del área editable viajaría al HTML de
   imprenta, al PDF y al EPUB. No tocar eso. */

.alt-chip {
    position: absolute;
    z-index: 1035; /* arriba del editor, abajo de los modales de Bootstrap */
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 22rem;
    padding: 0.2rem 0.6rem;
    border: none;
    border-radius: 50rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    line-height: 1.5;
    white-space: nowrap;
    color: #fff;
    background-color: #495057;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity 0.12s ease-out, transform 0.12s ease-out;
    pointer-events: none;
}

.alt-chip.alt-chip-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.alt-chip:hover,
.alt-chip:focus {
    filter: brightness(1.12);
    outline: none;
}

.alt-chip .alt-chip-texto {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Falta el texto alternativo: hay que escribirlo. */
.alt-chip.alt-chip-falta { background-color: #dc3545; }

/* Lo escribió la máquina y todavía no lo revisó nadie. */
.alt-chip.alt-chip-ia { background-color: #b3801a; }

/* Revisado, o decorativa a propósito. */
.alt-chip.alt-chip-ok { background-color: #2f7d4f; }
/* --- FIN TEXTO ALTERNATIVO ------------------------------------------------ */

/* Contador del botón "Textos alternativos" de la barra del editor: cuántas
   imágenes siguen sin describir. Va prendido en la esquina del ícono, no al
   lado, para no estirar el alto de la fila de botones. */
.note-toolbar .alt-text-btn { position: relative; }

.alt-pendientes {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 0.95rem;
    padding: 0 0.2rem;
    border-radius: 50rem;
    background-color: #dc3545;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 600;
    line-height: 0.95rem;
    text-align: center;
    pointer-events: none;
}

.alt-pendientes.d-none { display: none !important; }

/* =============================================================================
   CAPTURA DE LA TAPA PARA LA PORTADA DEL E-BOOK
   El maquetador de tapas sólo puede rasterizar la tapa si tiene tamaño en
   pantalla, y Bootstrap le pone display:none al panel de la pestaña cuando
   está inactiva. Mientras dura la captura, el panel se muestra fuera de la
   pantalla: tiene layout real -y por lo tanto el iframe también- pero el
   usuario no lo ve ni lo puede tocar.
   ============================================================================= */
#tapa-panel.tapa-panel-midiendo {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: -20000px !important;
    width: 1700px !important;
    height: 900px !important;
    opacity: 1 !important;
    z-index: -1 !important;
    pointer-events: none !important;
}