/* ============================ */ /* Reset / Layout básico */ /* ============================ */ html, body { height: 100%; margin: 0; overflow-x: hidden; scroll-behavior: smooth; font-family: var(--font-family, 'Montserrat', sans-serif); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { display: flex; flex: 1; flex-direction: column; height: 100vh; margin: 0; } /* =============================================== */ /* Variables de tema (por defecto = oscuro) */ /* =============================================== */ :root { /* background-color: ; */ --bg-color: #070807; --bg-foot: #ffffff; --bg-conf: #070807; --bg-boton: #070807; --bg-nav: #070807; /* color: ; */ --color-text: #ffffff; --color-foot: #070807; --color-link: yellow; --color-fecha: yellow; --color-boton: #ffffff; --color-border: yellow; --color-conf: #ffffff; --color-side: #ffffff; /* Menus Emergentes: ; */ --bg-menu: #1c1d1c; --text-menu: #ffffff; --link-menu: yellow; --borde-menu: #070807; /* hover */ --hover-bg: #e6e6e6; --hover-txt: #070807; /* search */ --search-bg: #ffffff; --search-text: #070807; --search-button-bg: #070807; --search-button-text: #ffffff; /* tipografía / tamaños */ --font-family: 'Montserrat', sans-serif; --font-size: 1.0rem; --fech-size: 0.6rem; --foot-size: 0.5rem; --icon-size: 0.5rem; --search-font-size: 0.8rem; --mini-font-size: 0.2rem; } /* =============================================================== */ /* Tema claro (añadir clase .tema-claro al o <:root>) */ /* =============================================================== */ :root.tema-claro { /* background-color: ; */ --bg-color: #ffffff; --bg-foot: #070807; --bg-conf: #ffffff; --bg-boton: #ffffff; --bg-nav: #ffffff; --bg-side: #ffffff; --bg-side: #ffffff; /* color: ; */ --color-text: #070807; --color-foot: #ffffff; --color-link: blue; --color-fecha: #070807; --color-boton: #070807; --color-border: #070807; --color-conf: #070807; -color-side: #070807; /* Menus Emergentes: ; */ --bg-menu: #1c1d1c; --text-menu: #ffffff; --link-menu: yellow; --borde-menu: #070807; /* hover */ --hover-bg: #070807; --hover-txt: #e6e6e6; /* search */ --search-bg: #ffffff; --search-text: #070807; --search-button-bg: darkblue; --search-button-text: #ffffff; } /* ============================================ /* /* Aplicación global de variables /* /* ============================================ */ html, body { background-color: var(--bg-color); color: var(--color-text); font-size: var(--font-size); font-family: var(--font-family); transition: background-color 0.25s ease, color 0.25s ease; } /* ============================ Ocultar barra de scroll (cross-browser) ============================ */ ::-webkit-scrollbar { display: none; /* Chrome, Safari, Edge, Opera */ } * { -ms-overflow-style: none; /* IE y Edge heredado */ scrollbar-width: none; /* Firefox */ } /* ============================ */ /* Banner */ /* ============================ */ .cabecera { height: auto; text-align: center; cursor: pointer; background-color: var(--bg-color); transition: background-color 0.25s ease; } .cabecera img { max-width: 80%; height: auto; } /* ============================ */ /* Menú superior Desk */ /* ============================ */ .linea-menu-desk { display: flex; width: 100%; position: relative; align-items: center; justify-content: space-between; /* Izquierda – Centro – Derecha */ padding: 0.5rem; gap: 0.4rem; font-size: var(--font-size); background-color: var(--bg-color); color: var(--color-text); transition: background-color 0.25s ease, color 0.25s ease; } /* ========================================== */ /* Parte Izquierda de la Linea Menu */ /* ========================================== */ .izquierda-menu { display: flex; justify-content: flex-start; align-items: center; width: 10%; gap: 3rem; margin-left: 0.2rem; } .izquierda-menu a { text-decoration: none; cursor: pointer; line-height: 0.8; color: var(--color-link); font-size: var(--font-size); transition: color 0.3s ease; } /* ============================ */ /* Panel de configuración */ /* ============================ */ #btn-config { display: flex; flex-shrink: 0; justify-content: center; width: 2.2rem; height: 2.2rem; border: none; border-radius: 50%; cursor: pointer; margin-left: 0.6rem; background-color: var(--bg-boton); color: var(--color-boton); font-size: var(--font-size); border: 0.1rem solid var(--color-border); transition: background-color 0.25s ease, color 0.25s ease; } #btn-config .icono { display: flex; justify-content: center; align-items: center; color: var(--color-text); font-size: var(--icon-size); width: 100%; height: 100%; line-height: 1; font-size: inherit; } #btn-config:hover { background-color: var(--hover-bg); color: var( --hover-txt); } #btn-config:active, #btn-config:focus { background-color: var(--bg-boton); color: var(--color-boton); outline: none; } /* ============================ */ /* Boton Menu /* ============================ */ .btnMenu { display: flex; justify-content: space-evenly; align-items: center; } .btnMenuDesk a { text-decoration: none; cursor: pointer; line-height: 0.8; color: var(--color-link); font-size: var(--font-size); transition: color 0.3s ease, transform 0.3s; } /* ============================ */ /* Parte Central de la Linea Menu */ /* ============================ */ .centro-menu { display: flex; justify-content: space-between; align-items: center; flex: 1; } .fechaSeleccionada { display: flex; width: 30%; height: auto; text-align: center; background-color: var(--bg-color); } .fechaSeleccionada a { line-height: 1.5; cursor: default; pointer-events: none; text-decoration: none; font-size: var(--font-size); color: var(--color-fecha); } /* ============================ */ /* Buscador de la Linea Menu */ /* ============================ */ .search-bar { display: flex; flex: 1; height: 1.7rem; background-color: var(--bg-color); border: none; justify-content: flex-end; align-items: center; gap: 0.2rem; } .search-bar input { flex: 2; height: 100%; outline: none; background-color: var(--search-bg); color: var(--search-text); border-radius: 0.2rem; border: 0.1rem solid var(--color-boton); font-size: var(--search-font-size); transition: background-color 0.25s ease, color 0.25s ease; } .search-bar button { display: flex; justify-content: center; align-items: center; width: 2.2rem; height: 2.2rem; background-color: var(--search-button-bg); color: var(--search-button-text); border-radius: 50%; border: 0.1rem solid var(--color-boton); cursor: pointer; margin-left: 0.6rem; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* ============================ */ /* Sistema de Lectura */ /* ============================ */ #lbarra { display: none; align-items: center; gap: 0.5rem; font-size: 1rem; } #lbarra.mostrar { display: inline-flex; } #barraProgreso { display: flex; flex: 1; height: 1.7rem; background-color: var(--bg-color); border: none; justify-content: flex-end; align-items: center; vertical-align: middle; margin-right: 2rem; } #btnIniciar, #btnPausar, #btnDetener { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem; cursor: pointer; background-color: var(--bg-boton); border: 0.1rem solid var(--color-border); color: var(--color-text); font-size: var(--font-size); height: 2.2rem; width: auto; white-space: nowrap; margin-right: 2rem; } .icono { color: var(--color-text); font-size: var(--font-size); line-height: 1; display: inline-flex; align-items: center; height: 2.2rem; width: 2.2rem; } #barraProgreso, #btnPausar, #btnDetener { display: none; } .palabra { display: inline !important; white-space: normal !important; } .palabra-activa { background-color: yellow; padding: 2px; border-radius: 3px; } #btnPausar.pausado { background-color: orange; } /* ================================== */ /* Panel de sugerencias del Buscador */ /* ================================== */ .suggestions.active { display: block; } #search-suggestions { position: absolute; top: 100%; left: 0; width: 100%; max-height: 20rem; overflow-y: auto; background-color: var(--bg-menu); color: var(--text-menu); border: 0.4rem solid var(--borde-menu); border-radius: 0.2rem; z-index: 1000; display: none; transition: background-color 0.25s ease, color 0.25s ease; } #search-suggestions.active { display: block; } /* Cada sugerencia */ #search-suggestions .item-sugerencia { padding: 0.2rem; cursor: pointer; } #search-suggestions .item-sugerencia:hover { background-color: var(--hover-bg); color: var(--hover-txt); transition: background-color 0.25s ease, color 0.25s ease; } .search-wrap { position: relative; width: 20rem; } #cont-btn-vaciar-historial { display: flex; width: 100%; justify-content: flex-end; align-items: center; padding: 0.3rem 0.5rem; border-top: 0.4rem solid var(--borde-menu); box-sizing: border-box; } #btn-vaciar-historial { cursor: pointer; padding: 0.1rem 0.3rem; background-color: var(--bg-boton); color: var(--color-boton); font-size: var(--mini-font-size); border: 0.1rem solid var(--color-border); transition: background-color 0.25s ease, color 0.25s ease; } /* ============================ */ /* Parte Derecha de la Linea Menu */ /* ============================ */ .derecha-menu { display: flex; justify-content: space-evenly; align-items: center; width: 15%; gap: 3rem; margin-right: 0.6rem; } .derecha-menu a { text-decoration: none; cursor: pointer; line-height: 0.8; color: var(--color-link); font-size: var(--font-size); transition: color 0.3s ease, transform 0.3s; } /* ===== Linea de Login Roja / Verde ===== */ .estado-sesion { position: relative; text-decoration: none; } .estado-sesion::after { content: ""; position: absolute; left: 0; bottom: auto; height: 0.1rem; background-color: red; transition: background-color 0.3s ease; } .estado-sesion.logueado::after { background-color: green; } /* ============================ */ /* Contenedor del menú desplegable */ /* ============================ */ .sidebar { position: fixed; top: 20; left: -254px; /* oculto fuera de pantalla */ width: 250px; height: auto; display: flex; flex-direction: column; z-index: 2000; border: 0.4rem solid var(--borde-menu); background-color: var(--bg-menu); color: var(--text-menu); transition: left 0.3s ease-in-out; } .sidebar.activo { left: 0; } .sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 0.1rem solid var(--color-border); } .sidebar-header h3 { margin: 0; font-size: var(--font-size); } .sidebar-header button { cursor: pointer; font-size: var(--mini-font-size); border: none; background-color: var(--bg-menu); color: var(--text-menu); transition: left 0.3s ease-in-out; } .sidebar-opciones { display: flex; flex-direction: column; padding: 0.5rem; } .sidebar-opciones button { text-align: left; padding: 0.8rem 1rem; cursor: pointer; font-size: var(--font-size); background-color: var(--bg-menu); color: var(--text-menu); border: none; } .sidebar-opciones button:hover { background-color: var(--hover-bg); color: var( --hover-txt); } .sidebar button, .sidebar a { color: var(--link-menu); } /* ============================ */ /* Menú Configuracion */ /* ============================ */ #panel-config { display: none; flex-direction: column; position: absolute; top: 1rem; left: 0.2rem; min-width: 90vw; max-width: 90vw; z-index: 9999; gap: 1.0rem; background-color: var(--bg-conf); color: var(--color-text); border: 0.1rem solid var(--color-border); border-radius: 0.2rem; padding: 0.2rem; box-shadow: 0 0.375rem 1.125rem rgba(0,0,0,0.25); transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } #panel-config1 label { margin-left: 0.2rem; } .config-close { position: absolute; top: 8px; right: 8px; background: transparent; border: none; font-size: 1rem; cursor: pointer; color: #333; padding: 5px; transition: 0.2s ease; } .config-close:hover { transform: scale(1.2); color: #ff4d4d; } #panel-config.activo { display: flex; } #tamano, #tema, #vozLectura, #modoLectura { border: 0.1rem solid var(--color-border); border-radius: 0.2rem; background-color: var(--bg-color); color: var(--color-text); font-size: var(--font-size); padding: 0.3rem; margin-left: 1rem; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } #tamano:focus, #tema:focus, #vozLectura:focus, #modoLectura:focus { border: 0.1rem solid var(--color-border); outline: none; } #tamano:hover, #tema:hover, #vozLectura:hover, #modoLectura:hover { border: 0.1rem solid var(--color-border); } #velocidad, #velocidadLectura { width: 100%; height: 8px; border-radius: 5px; background: linear-gradient(90deg, #ffd86b 0%, #ff9e27 100%); outline: none; cursor: pointer; transition: opacity 0.2s ease; } #velocidad:hover, #velocidadLectura:hover { opacity: 0.9; } #velocidad::-webkit-slider-thumb, #velocidadLectura::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid #ff9e27; box-shadow: 0 0 6px rgba(0,0,0,0.2); transition: 0.2s ease; } #velocidad::-webkit-slider-thumb:hover, #velocidadLectura::-webkit-slider-thumb:hover { transform: scale(1.1); } /* Thumb (Firefox) */ #velocidad::-moz-range-thumb, #velocidadLectura::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid #ff9e27; box-shadow: 0 0 6px rgba(0,0,0,0.2); transition: 0.2s ease; } #velocidad::-moz-range-thumb:hover, #velocidadLectura::-moz-range-thumb:hover { transform: scale(1.1); } /* Track Firefox */ #velocidad::-moz-range-track, #velocidadLectura::-moz-range-track { background: linear-gradient(90deg, #ffd86b 0%, #ff9e27 100%); height: 8px; border-radius: 5px; } /*========================================================*/ /* Contenido en columna */ /*========================================================*/ #zonaPublica, #zonaPrivada { background-color: var(--bg-color); color: var(--color-text); transition: background-color 0.25s ease, color 0.25s ease; } .contenido-publico, .contenido-privado { display: flex; flex: 1; width: 100%; align-items: flex-start; justify-content: center; flex-direction: column; overflow: auto; background-color: var(--bg-color); color: var(--color-text); transition: background-color 0.25s ease, color 0.25s ease; } /*========================================================*/ /* Subrayado Rojo o Verde del Login */ /*========================================================*/ .logueado { border-bottom: 3px solid #00ff00; /* verde */ padding-bottom: 2px; /* para que no se mueva el texto */ } .no-logueado { border-bottom: 3px solid #ff0000; /* rojo */ padding-bottom: 2px; } #btnLogin { margin-right: 1.0rem; background: none !important; } /*========================================================*/ /* Contenido Interno para Deslizar */ /*========================================================*/ .panel-wrapper { position: relative; background-color: var(--bg-color); color: var(--color-text); transition: background-color 0.25s ease, color 0.25s ease; /*Scroll Vertical */ width: 100%; height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; } /*========================================================*/ /* Footer */ /*========================================================*/ .footer { display: flex; width: 100%; background-color: var(--bg-foot); color: var(--color-foot); transition: background-color 0.25s ease, color 0.25s ease; } .footer-row { display: flex; width: 100%; flex-direction: row; } .footer-col-A { width: 45%; line-height: 1.0; padding: 0.5rem; text-align: left; font-size: var(--foot-size); background-color: var(--bg-foot); color: var(--color-foott); transition: background-color 0.25s ease, color 0.25s ease; } .footer-col-B { width: 5%; line-height: 1.0; padding: 0.5rem; text-align: center; font-size: var(--foot-size); background-color: var(--bg-foot); color: var(--color-foot); transition: background-color 0.25s ease, color 0.25s ease; } .footer-col-C { width: 50%; line-height: 1.0; padding: 0.5rem; text-align: right; gap: 0.3rem; font-size: var(--foot-size); background-color: var(--bg-foot); color: var(--color-foot); transition: background-color 0.25s ease, color 0.25s ease; } .footer-col-C a { line-height: 1.0; padding: 0.5rem; font-size: var(--foot-size); color: var(--color-foot); }