:root {
            --navy: #0f2c52;
            --ink: #0f2c52;
            --teal: #2f66b8;
            --gold: #d9a927;
            --line: #e8e9ed;
            --muted: #65758b;
            --paper: #fffcf7;
            --soft: #f7f8fa
        }

        * {
            box-sizing: border-box
        }

        body {
            margin: 0;
            background: #f8f9fb;
            color: var(--ink);
            font-family: 'Poppins', 'Roboto', Arial, sans-serif;
            font-size: 13px
        }

        button,
        input,
        select,
        textarea {
            font: inherit
        }

        button {
            cursor: pointer
        }

        button:disabled {
            opacity: .45;
            cursor: not-allowed
        }

        svg {
            width: 19px;
            height: 19px;
            stroke: currentColor;
            stroke-width: 1.8;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        .topbar {
            height: 64px;
            background: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 clamp(20px, 5vw, 90px);
            gap: 20px;
            border-bottom: 1px solid #ededed
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 12px
        }

        .logo {
            width: 47px;
            height: 42px;
            display: grid;
            place-items: center;
            color: #d9a927
        }

        .logo svg {
            width: 44px;
            height: 42px;
            stroke-width: 2.5
        }

        .brand strong {
            font: 700 22px 'Poppins', 'Roboto', Georgia, serif
        }

        .brand small {
            display: block;
            font-size: 11px
        }

        .topnav {
            display: flex;
            gap: 32px;
            font-weight: 600
        }

        .topnav a {
            color: #0f2c52;
            text-decoration: none
        }

        .login {
            border: 0;
            border-radius: 9px;
            background: #0f2c52;
            color: #fff;
            padding: 12px 27px;
            display: flex;
            align-items: center;
            gap: 10px
        }

        .topright {
            display: flex;
            gap: 14px;
            align-items: center
        }

        .round {
            border: 1px solid var(--line);
            background: white;
            border-radius: 50%;
            height: 42px;
            width: 42px;
            display: grid;
            place-items: center
        }

        .breadcrumbs {
            height: 45px;
            padding: 0 2.4%;
            display: flex;
            align-items: center;
            gap: 12px;
            color: #52657d;
            font-size: 12px
        }

        .breadcrumbs b {
            color: var(--navy)
        }

        .book-banner {
            background: white;
            border: 1px solid #edf0f3;
            border-radius: 13px;
            display: flex;
            align-items: center;
            gap: 26px;
            margin: 0 1.6% 8px;
            padding: 11px 25px;
            min-height: 127px
        }

        .cover-small {
            flex-shrink: 0;
            width: 93px;
            height: 105px;
            border-radius: 4px;
            background: linear-gradient(150deg, #0f2c52 2%, #2f66b8 53%, #d9a927 53%, #b07f1a 100%);
            box-shadow: 3px 2px 9px #0002;
            color: white;
            font: 700 10px 'Poppins', 'Roboto', Georgia, serif;
            padding: 11px 9px;
            line-height: 1.3
        }

        .book-meta {
            flex: 1
        }

        .book-meta h1 {
            font: 700 clamp(18px, 2vw, 26px) 'Poppins', 'Roboto', Georgia, serif;
            margin: 0 0 8px
        }

        .book-meta .author {
            color: #5c708a;
            font-size: 13px;
            margin-bottom: 10px
        }

        .facts {
            display: flex;
            gap: 25px;
            flex-wrap: wrap;
            color: #4e627d
        }

        .facts span {
            display: flex;
            align-items: center;
            gap: 7px
        }

        .facts svg {
            width: 17px;
            height: 17px
        }

        .outline {
            background: white;
            color: #0f2c52;
            border: 1px solid #2f66b8;
            border-radius: 6px;
            padding: 11px 17px;
            display: flex;
            align-items: center;
            gap: 9px;
            white-space: nowrap
        }

        .workspace {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
            margin: 0 1.6% 20px;
            height: calc(100vh - 265px);
            min-height: 680px
        }

        .panel {
            background: white;
            border: 1px solid #e9ebef;
            border-radius: 12px;
            min-width: 0;
            overflow: hidden
        }

        .hidden {
            display: none !important
        }

        .reader {
            display: flex;
            flex-direction: column;
            min-width: 0;
            overflow: hidden
        }

        .tools {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 13px;
            gap: 8px;
            min-height: 67px;
            flex-wrap: wrap
        }

        .toolcluster {
            display: flex;
            gap: 8px;
            align-items: center
        }

        .zoomgroup {
            display: flex;
            align-items: center;
            gap: 9px;
            border-left: 1px solid #d4dce3;
            padding-left: 16px
        }

        .zoomgroup .round {
            width: 34px;
            height: 34px
        }

        .viewgroup {
            display: flex;
            gap: 3px;
            border-left: 1px solid #d4dce3;
            padding-left: 14px
        }

        .viewgroup button {
            border: 0;
            border-radius: 8px;
            padding: 10px;
            background: #edf2f7;
            color: #1f4e8c
        }

        .viewgroup button.active {
            background: #f5e3b3;
            color: #a06c17
        }

        .book-stage {
            position: relative;
            flex: 1;
            min-height: 0;
            background: #2c3034;
            border-radius: 8px;
            margin: 0 2px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: auto;
            padding: 20px 28px
        }

        .spread-scaler {
            transform-origin: center;
            transition: transform .15s;
            flex-shrink: 0
        }

        .spread {
            width: 820px;
            height: 580px;
            display: flex;
            border-radius: 3px;
            filter: drop-shadow(0 12px 14px #0006);
            perspective: 1000px
        }

        .page {
            background: linear-gradient(90deg, #e4dfd6 0%, #fffcf7 7%, #fffdf9 85%, #e6dfd5 100%);
            width: 50%;
            height: 100%;
            padding: 46px 48px 28px;
            color: #142942;
            font: 13px/1.46 'Poppins', 'Roboto', Georgia, 'Times New Roman', serif;
            position: relative;
            box-shadow: inset 0 0 15px #8a756327;
            overflow: hidden
        }

        .page.left {
            border-radius: 5px 0 0 5px;
            box-shadow: inset -15px 0 20px #635c4b26, inset 3px 0 6px #aaa5a066
        }

        .page.right {
            border-radius: 0 5px 5px 0;
            box-shadow: inset 15px 0 20px #635c4b28, inset -3px 0 5px #aaa5a066
        }

        .page h2 {
            font-size: 24px;
            line-height: 1.12;
            margin: 7px 0 24px
        }

        .page h3 {
            font-size: 17px;
            margin: 22px 0 16px
        }

        .page p {
            margin: 0 0 11px;
            text-align: justify
        }

        .page .chapter-kicker {
            font-size: 17px;
            font-weight: 700;
            margin-top: 9px
        }

        .pagenum {
            position: absolute;
            bottom: 18px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 13px
        }

        .annotation {
            background: #e6f3ff;
            border: 1px solid #d4e7f9;
            border-radius: 9px;
            padding: 15px;
            margin: 12px 0 18px;
            font: 12px 'Poppins', 'Roboto';
            line-height: 1.5
        }

        .annotation b {
            display: block;
            margin-bottom: 7px
        }

        .pageTurn {
            position: absolute;
            z-index: 4;
            top: 50%;
            transform: translateY(-50%);
            border: 0;
            background: white;
            color: #0f2c52;
            width: 37px;
            height: 50px;
            border-radius: 40px;
            display: grid;
            place-items: center;
            box-shadow: 0 2px 7px #0003
        }

        .pageTurn.prev {
            left: 7px
        }

        .pageTurn.next {
            right: 7px
        }

        .bottomreader {
            padding: 13px 17px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 15px
        }

        .progress {
            flex: 1;
            max-width: 70%
        }

        .progress input {
            width: 100%;
            accent-color: #d9a927;
            cursor: pointer
        }

        .progress div {
            margin-top: 5px;
            color: #4d6482;
            font-size: 12px
        }

        .goto {
            display: flex;
            align-items: center;
            gap: 12px;
            color: #4d6482;
            white-space: nowrap
        }

        .goto input {
            width: 76px;
            text-align: center;
            padding: 10px;
            border: 1px solid #dbe2eb;
            border-radius: 6px;
            color: #18344d
        }

        .goldbutton {
            background: #d9a927;
            color: white;
            border: 0;
            border-radius: 7px;
            padding: 11px 17px
        }

        .toast {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100;
            background: #0f2c52;
            color: white;
            padding: 12px 20px;
            border-radius: 8px;
            box-shadow: 0 8px 25px #0002
        }

        .fullscreen {
            position: fixed !important;
            inset: 0 !important;
            margin: 0 !important;
            height: 100vh !important;
            z-index: 80;
            background: white
        }

        .reader.fullscreen .book-stage {
            min-height: 0
        }

        @media(max-width:1190px) {
            .workspace {
                grid-template-columns: 1fr;
                height: auto;
                min-height: 700px
            }

            .reader {
                height: 735px
            }

            .spread {
                width: 700px;
                height: 520px
            }

            .page {
                padding: 38px 38px 25px;
                font-size: 12px
            }
        }

        @media(max-width:780px) {
            .topnav {
                display: none
            }

            .book-banner {
                padding: 10px;
                gap: 12px
            }

            .cover-small {
                width: 65px;
                height: 86px
            }

            .book-meta h1 {
                font-size: 17px
            }

            .outline {
                display: none
            }

            .workspace {
                display: block;
                margin: 0 8px
            }

            .reader {
                height: 700px;
                margin-bottom: 10px
            }

            .tools {
                justify-content: center
            }

            .book-stage {
                padding: 15px 30px
            }

            .spread {
                width: 620px;
                height: 490px
            }

            .page {
                padding: 28px 32px;
                font-size: 11px
            }

            .page h2 {
                font-size: 19px
            }

            .page h3 {
                font-size: 14px
            }

            .progress {
                max-width: 50%
            }

            .breadcrumbs {
                font-size: 10px;
                overflow: hidden;
                white-space: nowrap
            }
        }

        .page.pdfpage {
            padding: 0;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden
        }

        .page.pdfpage canvas.pdfcanvas {
            width: 100%;
            height: auto;
            display: block
        }

        .page.pdfpage .textLayer {
            position: absolute;
            inset: 0;
            overflow: hidden;
            text-align: initial;
            line-height: 1;
            transform-origin: 0 0;
            cursor: text;
            caret-color: CanvasText
        }

        .page.pdfpage .textLayer span,
        .page.pdfpage .textLayer br {
            position: absolute;
            white-space: pre;
            color: transparent;
            transform-origin: 0% 0%
        }

        .page.pdfpage .textLayer ::selection {
            background: rgb(30 120 200 / .35)
        }

        .tools-label {
            font-size: 11px;
            margin-right: 9px
        }

        .tool {
            border: 0;
            background: #f1f5f9;
            color: #0f2c52;
            border-radius: 9px;
            min-width: 60px;
            padding: 7px 9px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            font-size: 10px
        }

        .tool svg {
            width: 19px;
            height: 19px
        }

        .tool.active {
            background: #f7e7ae;
            color: #0f2c52
        }

        .tool:hover {
            filter: brightness(.96)
        }

        /* Movido desde resources/views/libros/lector-libro.blade.php */
        footer#bd-footer { background-color: #0F2C52 !important; background-image: none !important; }

        /* Estilos para modo pantalla completa real */
        .reader:fullscreen {
            width: 100vw;
            height: 100vh;
            background: #000;
            padding: 0;
            display: flex;
            flex-direction: column;
        }

        .reader:-webkit-full-screen {
            width: 100vw;
            height: 100vh;
            background: #000;
            display: flex;
            flex-direction: column;
        }

        .reader:fullscreen .tools,
        .reader:-webkit-full-screen .tools {
            background: #1a1a1a;
            color: #fff;
            z-index: 100;
            flex-shrink: 0;
            height: 60px;
        }

        .reader:fullscreen .bottomreader,
        .reader:-webkit-full-screen .bottomreader {
            background: #1a1a1a;
            color: #fff;
            z-index: 100;
            flex-shrink: 0;
            height: 50px;
        }

        .reader:fullscreen .book-stage,
        .reader:-webkit-full-screen .book-stage {
            flex: 1;
            height: auto;
            min-height: 0;
            margin: 0;
            padding: 12px 70px;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            overflow: auto;
            background: #000;
        }

        .reader:fullscreen .spread-scaler,
        .reader:-webkit-full-screen .spread-scaler {
            margin: auto;
            height: auto;
            width: auto;
            max-width: 100%;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            transform: none !important;
        }

        .reader:fullscreen .spread,
        .reader:-webkit-full-screen .spread {
            max-width: 100%;
            filter: drop-shadow(0 12px 18px rgba(0,0,0,.6));
        }

        .reader:fullscreen .pageTurn.prev,
        .reader:-webkit-full-screen .pageTurn.prev { left: 12px; }
        .reader:fullscreen .pageTurn.next,
        .reader:-webkit-full-screen .pageTurn.next { right: 12px; }