/* 1. FUENTES */
        @font-face { font-family: 'TituloFont'; src: url("TITULO.ttf") format("truetype"); }
        @font-face { font-family: 'LibrosFont'; src: url("LIBROS-CATOLICOS.ttf") format("truetype"); }
        @font-face { font-family: 'BuscarFont'; src: url("BUSCAR.ttf") format("truetype"); }
        @font-face { font-family: 'DateFont'; src: url("DATE.ttf") format("truetype"); }

        :root { --bg-border: white; --sweep-color: yellow; --angle: 0deg; }

        body, html {
            margin: 0; padding: 0; height: 100%;
            display: flex; flex-direction: column;
            font-family: sans-serif; overflow: hidden;
        }

        /* 2. HEADER */
        header {
            height: 100px; background-color: red;
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 20px; box-sizing: border-box; position: relative;
        }

        .logo-borde-reloj {
            width: 96px; height: 96px;
            display: flex; align-items: center; justify-content: center;
            background: conic-gradient(var(--sweep-color) 0deg, var(--sweep-color) var(--angle), var(--bg-border) var(--angle), var(--bg-border) 360deg);
        }
        .logo-borde-reloj img { width: 90px; height: 90px; object-fit: cover; }

        .header-title {
            font-size: 35px; color: white; font-family: 'TituloFont', sans-serif;
            text-transform: uppercase; position: absolute; left: 50%; transform: translateX(-50%);
        }

        @keyframes latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.5); } }
        .whatsapp-icon { height: 90px; width: 90px; border-radius: 50%; animation: latido 0.4s infinite ease-in-out; }

        /* 3. CONTENEDOR PRINCIPAL Y SIDEBAR */
        .main-container { display: flex; flex: 1; overflow: hidden; }

        .sidebar {
            width: 34%; background-color: rgb(48, 43, 232);
            padding: 20px; box-sizing: border-box; 
            overflow-y: scroll; /* SCROLL ACTIVO */
            overflow-x: hidden;
        }

        /* SCROLL PERSONALIZADO */
        .sidebar::-webkit-scrollbar { width: 40px; }
        .sidebar::-webkit-scrollbar-track { background: rgb(138, 245, 13); }
        .sidebar::-webkit-scrollbar-thumb {
            background: black; border-radius: 25px;
            border: 10px solid rgb(138, 245, 13); 
            min-height: 55px;
        }

        .search-box {
            width: 100%; padding: 12px; background-color: yellow;
            border: 2px solid #d4d400; font-family: 'BuscarFont', sans-serif;
            font-weight: bold; color: black; font-size: 21px; text-transform: uppercase; outline: none; margin-bottom: 20px;
        }

        .book-list { list-style: none; padding: 0; margin: 0; }
        .book-list li {
            padding: 12px 5px; border-bottom: 2px solid yellow;
            font-family: 'LibrosFont', sans-serif; color: white; font-size: 21px; cursor: pointer;
        }

        /* 4. CONTENIDO DERECHO Y TABLA (570x240) */
        .content { width: 66%; padding: 40px; background-color: white; text-align: center; }
        .titulo-estatico { font-family: 'TituloFont', sans-serif; color: rgb(207, 19, 189); font-size: 45px; margin-bottom: 15px; }
        #titulo-elegido { font-family: 'BuscarFont', sans-serif; color: black; font-size: 32px; font-weight: bold; margin-bottom: 20px; }

        #caja-info {
            display: none; width: 570px; height: 240px;
            margin: 0 auto; border: 5px solid black; background-color: #fff;
            transition: border 0.3s ease;
        }
        .tabla-contenedor { display: flex; width: 100%; height: 100%; }
        .tabla-datos { width: 60%; display: flex; flex-direction: column; }
        
        .fila-tabla {
            flex: 1; display: flex; align-items: center; padding-left: 15px;
            text-align: left; font-family: 'BuscarFont', sans-serif; 
            font-weight: bold; font-size: 19px; color: black;
        }
        
        .puntos-rojos, .parentesis-rojos { color: red; }
        .label-azul { color: rgb(48, 43, 232); }
        .valor-azul { color: rgb(48, 43, 232); margin-left: 5px; }
        .peso-numero { color: green; margin-left: 5px; }
        .peso-mb { color: rgb(194, 126, 8); margin-left: 4px; }

        .tabla-boton-area { 
            width: 40%; display: flex; flex-direction: column; 
            align-items: center; justify-content: center; gap: 15px;
        }
        
        #btn-descargar {
            display: inline-block; padding: 15px 25px; 
            font-family: 'BuscarFont', sans-serif; font-size: 24px;
            border: none !important; outline: none !important;
            cursor: pointer; text-decoration: none; border-radius: 8px;
            text-transform: uppercase; font-weight: bold;
            transition: transform 0.2s ease-in-out; 
        }

        .contenedor-peso { font-family: 'BuscarFont', sans-serif; font-weight: bold; font-size: 18px; }

        .hundido { transform: translateY(17px) !important; }

        /* 5. FOOTER */
        footer {
            min-height: 100px; background-color: black;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
        }
        .foot-line-1 { display: flex; align-items: center; gap: 10px; font-family: 'TituloFont', sans-serif; }
        .simbolo-r { font-size: 45px; color: white; }
        .firma-miep { font-size: 30px; color: #00FFFF; }
        .foot-line-2 { font-family: 'DateFont', sans-serif; font-size: 37px; color: yellow; margin-top: 5px; }
        .guion { color: white; }