html { overflow-y: scroll; }
.uppercase-xs { font-size: 0.65rem; letter-spacing: 0.05rem; text-transform: uppercase; font-weight: 700; }
#modalTitulo { font-size: 1.25rem; }
@media (min-width: 768px) {
    #modalPortada { width: 140px; height: 200px; }
    #modalTitulo { font-size: 1.75rem; }
    .custom-nav-link {color: #000000 !important;}
    .custom-nav-link:hover {color: #000000 !important;}
}
@media (max-width: 991.98px) {
    html, body, body.bg-light, .bg-light, .modal-dark-mobile { background-color: #121212 !important; color: #e0e0e0 !important; }
    main, .container, .container-fluid { background-color: transparent !important; }
    .bg-light-subtle { background-color: rgba(255, 255, 255, 0.05) !important; }
    .border, .border-bottom { border-color: rgba(255, 255, 255, 0.1) !important; }
    .card, .card-item-dark { background-color: #1e1e1e !important; border: 1px solid #333 !important; border-radius: 12px !important; }
    .card-title, .text-dark, .responsive-text-white, .modal-dark-mobile .modal-title, .link-entrevista, .app-logo .logo-icon, .logo-text, .logo-text-bold { color: #fff !important; }
    .text-muted, .text-muted-dark { color: #aaaaaa !important; }
    .bg-white, .input-group-text, .form-control, .custom-input-dark { background-color: #2c2c2c !important; color: #fff !important; border-color: #444 !important; }
    .form-control::placeholder, .custom-input-dark::placeholder { color: #666666 !important; }
    .btn-light, .btn-cancelar-dark, #btnEditarLugarModal, #btnEditarDesdeModal { background-color: #333 !important; border-color: #444 !important; color: #fff !important; border: none; }
    .shadow-sm { box-shadow: none !important; border: 1px solid #2d2d2d !important; }
    .btn, .card, a, [style*="cursor: pointer"], button { transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out !important; }
    .btn:active, .card:active, a:active, [style*="cursor: pointer"]:active, button:active { transform: scale(0.96) !important; opacity: 0.8 !important; }
    #modalNovela .modal-content, #modalDetalleLugar .modal-content, #modalDetallePersonaje .modal-content { background-color: #1a1a1a !important; color: #fff !important; border: 1px solid #333 !important; }
    #modalNovela .bg-light-subtle { background-color: #252525 !important; }
    #modalNovela .badge { background-color: rgba(13, 110, 253, 0.15) !important; color: #70acef !important; border: 1px solid rgba(13, 110, 253, 0.3) !important; }
    #modalDetallePersonaje .modal-content, #modalDetallePersonaje #persGaleria img { border-radius: 0 !important; }
    #persGaleria img { width: 100% !important; height: auto; min-height: 300px; object-fit: cover; margin-bottom: 2px; }
    #modalBooktrailers .modal-content, #modalEntrevista .modal-content { background-color: #121212 !important; }
    .card-form-entrevista { background-color: #1a1a1a !important; border: 1px dashed rgba(25, 135, 84, 0.4) !important; }
    .hr-dark { border-top: 1px solid #444 !important; opacity: 0.5; }
    .modal-content .btn-close, .modal-dark-mobile .btn-close, #modalNovela .btn-close, #modalDetalleLugar .btn-close, #modalDetallePersonaje .btn-close { filter: invert(1) grayscale(100) brightness(200%) !important; opacity: 0.7; }
    .custom-input-dark:focus { background-color: #252525 !important; border-color: #555555 !important; box-shadow: none !important; }
    .responsive-text-white { font-size: 0.9rem; max-width: 100%; }
    .modal-dark-mobile p { font-size: 0.95rem; text-align: justify; }
    .modal-footer .btn { font-size: 1rem; padding: 12px; }
    .bg-dark-mobile { background-color: #2a2a2a !important; color: white !important; }
    .custom-search-dark .form-control { color: white !important; }
    .custom-search-dark .form-control::placeholder { color: rgba(255, 255, 255, 0.5); }
    .custom-search-dark .form-control:focus { background-color: #333 !important; box-shadow: none; color: white !important; }
    .custom-nav-link {color: #ffffff !important;}
    .custom-nav-link:hover {color: #ffffff !important;}
}
.btn-eliminar-cuenta { background-color: #a72834; color: #ffffff; font-size: 13px; font-weight: 500; padding: 6px 14px; border: 1px solid #7c1a24; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease; }
.btn-eliminar-cuenta:hover { background-color: #bd2f3d; }
.btn-info { width: 28px; height: 28px; background-color: #0d233a; color: #ffffff; font-size: 14px; font-weight: bold; font-family: serif; border: 1px solid #1e3d59; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s; padding: 0; line-height: 1; font-style: italic; }
.btn-info:hover { background-color: #153250; }.btn-foro-pulsacion, .btn-foro-pulsacion:focus, .btn-foro-pulsacion:active {text-decoration: none !important; outline: none !important; -webkit-tap-highlight-color: transparent;}
.btn-foro-pulsacion:active .card {background-color: #252525 !important; transform: scale(0.96); transition: all 0.1s ease;}
.btn-foro-pulsacion:active .text-white {color: white !important;}
.custom-input-dark, .form-control.custom-input-dark, .custom-input-dark:focus, .form-control.custom-input-dark:focus { background-color: #2c2c2c !important; color: white !important; border: 1px solid #444 !important; box-shadow: none !important; outline: none !important; }
.custom-input-dark:-webkit-autofill, .custom-input-dark:-webkit-autofill:hover, .custom-input-dark:-webkit-autofill:focus { -webkit-text-fill-color: white !important; -webkit-box-shadow: 0 0 0px 1000px #2c2c2c inset !important; transition: background-color 5000s ease-in-out 0s; }
.custom-input-dark::placeholder { color: rgba(255, 255, 255, 0.4) !important; }
#buscador_global, #filtro_capitulo, #buscadorForo { background-color: #2c2c2c !important; color: white !important; transition: all 0.2s ease-in-out; caret-color: white; }
#buscador_global:focus, #filtro_capitulo:focus, #buscadorForo:focus { background-color: #333333 !important; color: white !important; border-color: #555 !important; box-shadow: none !important; outline: none !important; }
#buscador_global::placeholder, #buscadorForo::placeholder { color: rgba(255, 255, 255, 0.5) !important; }
.bg-dark-custom { background-color: #121212 !important; }
.modal-fullscreen .modal-content { border-radius: 0 !important; }
.object-fit-contain { object-fit: contain !important; }
.text-decoration-none { -webkit-tap-highlight-color: transparent !important; outline: none !important; }
.text-decoration-none:focus .card-seccion, .text-decoration-none:active .card-seccion, .hover-card:active, .hover-card:focus, .hover-card:hover { background-color: rgba(248, 249, 250, 0.5) !important; box-shadow: none !important; }
.card-seccion { transition: transform 0.1s ease-out !important; }
.card-seccion:active { transform: translateY(2px); }
.form-control:focus, #modalEditarIlustracion .form-control:focus { background-color: #fff !important; border-color: #333 !important; box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.1) !important; }
.foro-card { transition: transform 0.2s; border-radius: 12px; }
.foro-card:hover { background-color: #f8f9fa; transform: translateX(5px); }
.avatar-foro { width: 45px; height: 45px; object-fit: cover; border-radius: 50%; border: 2px solid #eee; }
.hover-back { transition: all 0.2s ease; }
.hover-back:hover { opacity: 0.7; transform: translateX(-3px); color: #000 !important; padding-left: 5px; }
.custom-tooltip-lugar { background-color: white !important; border-radius: 8px !important; box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important; padding: 5px 10px !important; }
.tooltip-img-lugar { width: 40px; height: 40px; object-fit: cover; border-radius: 5px; background: #f0f0f0; border: 1px solid #eee; }
.tooltip-img-placeholder { width: 40px; height: 40px; background: #f8f9fa; display: flex; align-items: center; justify-content: center; border-radius: 5px; color: #ccc; }
.form-control-color { width: 50px; height: 38px; padding: 2px; border-radius: 6px; cursor: pointer; }
.custom-div-icon i { transition: transform 0.2s ease-in-out; display: inline-block; }
.custom-div-icon:hover i { transform: scale(1.3); filter: drop-shadow(0px 0px 5px rgba(255,255,255,0.8)); }
.leaflet-interactive { outline: none !important; -webkit-tap-highlight-color: transparent !important; }
.relato-limpio { background: white !important; border-radius: 8px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important; padding: 12px !important; max-width: 250px !important; }
@keyframes pulse-icon { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.7; } }
.icono-pulsante { animation: pulse-icon 2s infinite ease-in-out; }
.rounded-4 { border-radius: 1rem !important; }
.hover-zoom img { transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); }
.hover-zoom:hover img { transform: scale(1.08); }
.leading-relaxed { line-height: 1.6; }
.gslide-image img { max-height: 92vh !important; width: auto !important; max-width: 95vw !important; object-fit: contain; }
.glightbox-container .goverlay { background: rgba(0, 0, 0, 0.95) !important; }
.nota-contenido p { font-family: 'Segoe UI', Roboto, sans-serif; color: #2d3436; white-space: pre-line; }
.hover-opacity:hover { opacity: 0.7; transition: 0.3s; }
.hover-bg-gray:hover { background-color: #e9ecef !important; transition: 0.3s; }
.custom-btn-width { min-width: 100px; display: inline-flex; align-items: center; justify-content: center; }
#buscadorNovelas { border-radius: 0 50px 50px 0; }
.input-group-text { border-radius: 50px 0 0 50px; }
.pagination + .text-muted, nav .flex-1.sm\:hidden, nav .hidden.sm\:flex-1.sm\:flex.sm\:items-center.sm\:justify-between > div:first-child { display: none !important; }
.page-link { border: 1px solid #dee2e6; padding: 5px 15px; transition: all 0.2s; }
.page-link:hover:not(.disabled) { background-color: #212529; color: white !important; }
.page-link:focus, .page-link:hover { box-shadow: none !important; background-color: transparent !important; border: none !important; }
.rounded-pill-start { border-top-left-radius: 50px !important; border-bottom-left-radius: 50px !important; padding-left: 20px; }
.rounded-pill-end { border-top-right-radius: 50px !important; border-bottom-right-radius: 50px !important; padding-right: 20px; }
.btn-card { transition: all 0.3s ease; border: 1px solid transparent !important; }
.btn-card:hover { transform: translateY(-5px); border-color: #0d6efd !important; box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; }
.btn-card:hover img { filter: brightness(1.1); }
.nav-link-custom { display: inline-flex; align-items: center; padding: 0.5rem 1.2rem; color: #6c757d; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background-color: #fff; border: 1px solid #e9ecef; border-radius: 50px; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.05); text-decoration: none; }
.nav-link-custom:hover { color: #0d6efd; background-color: #f8fbff; border-color: #0d6efd; }
#tablaNovelas tr:hover { background-color: rgba(0, 0, 0, 0.02); transition: background-color 0.2s ease; }
.app-logo { display: flex; align-items: center; text-decoration: none; gap: 8px; transition: opacity 0.2s ease; }
.logo-icon { font-size: 1.5rem; color: #0d6efd; }
.logo-text { font-size: 1.2rem; color: #212529; }
.logo-text-bold { font-weight: 800; }
.logo-text-light { font-weight: 300; color: #6c757d; }
.logo-secondary .logo-icon { color: #6f42c1; font-size: 1.3rem; }
.logo-secondary .logo-text { font-size: 1rem; border-left: 1px solid #dee2e6; padding-left: 12px; margin-left: 4px; }
.badge { text-transform: capitalize; }
.hover-card { transition: all 0.2s ease; }
.hover-card:hover { transform: scale(1.02); background-color: #fff !important; box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; }
.bg-orange { background-color: #fd7e14 !important; }
.border-dashed { border-style: dashed !important; border-width: 2px !important; border-color: #dee2e6 !important; }