/* Loader */ #loader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(20, 20, 20, 0.95); display: flex; justify-content: center; align-items: center; z-index: 9999; transition: opacity 1s ease;}
#loader.fade-out { opacity: 0; pointer-events: none;}
#loader.fade-once { opacity: 0; display: none; transition: opacity 0.6s ease;}
#loader.fade-once.fade-in { opacity: 1; display: flex;}
#loader.fade-once.fade-out { opacity: 0;}
.dot { width: 34px; height: 34px; background: #00bfa5; border-radius: 50%; margin: 0 14px; animation: bounce 1s infinite ease-in-out;}
.dot:nth-child(2) { animation-delay: 0.2s;}
.dot:nth-child(3) { animation-delay: 0.4s;}
.dot:nth-child(4) { animation-delay: 0.6s;}
@keyframes bounce { 0%, 100% { transform: translateY(0);}
50% { transform: translateY(-24px);}
}
.fade-out { animation: fadeOut 0.4s forwards;}
.fade-in { animation: fadeIn 0.4s forwards;}
@keyframes fadeOut { from { opacity: 1;}
to { opacity: 0; visibility: hidden;}
}
@keyframes fadeIn { from { opacity: 0;}
to { opacity: 1; visibility: visible;}
}
/* Base */ body { background: #121212; color: #e0e0e0; padding: 80px 20px 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
.card-container { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;}
.anime-card { background: #1f1f1f; border: 1px solid #333; border-radius: 12px; width: 180px; cursor: pointer; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; user-select: none; color: #e0e0e0;}
.anime-card:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);}
.anime-image { width: 100%; height: 260px; object-fit: cover; border-bottom: 3px solid #444;}
.anime-title { background: #1f1f1f; padding: 10px; font-weight: 600; font-size: 1.1rem; text-align: center; color: #e0e0e0; user-select: text;}
/* Modal */ .modal-content { background: #212121; border-radius: 1rem; border: 1px solid #444; color: #ddd;}
.modal-header, .modal-footer { padding: 1rem 2rem; border: none;}
.modal-body { display: flex; flex-direction: row; gap: 30px; padding: 1rem 2rem; overflow-y: auto; background: #181818;}
.modal-left { max-width: 320px; width: 100%; display: flex; flex-direction: column; align-items: center; flex: 1;}
.modal-img { width: 100%; max-height: 420px; border-radius: 12px; box-shadow: 0 6px 25px rgba(0, 0, 0, 0.6); object-fit: cover;}
.modal-info { flex: 2; display: flex; flex-direction: column; width: 100%;}
.download-btn { margin-top: 15px; width: 100%; background: #00bfa5; border: none; border-radius: 8px; color: #fff; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 191, 165, 0.5); transition: background-color 0.3s ease, box-shadow 0.3s ease; user-select: none;}
.download-btn:hover { background: #009e87; box-shadow: 0 6px 20px rgba(0, 158, 135, 0.7);}
.modal-title { font-size: 2.4rem; font-weight: 700; margin-bottom: 1.5rem; color: #ffffff; text-align: center;}
/* Episodios */ .episodes-list { background: #292929; border-radius: 8px; padding: 10px; max-height: 320px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #00bfa5 #292929; display: grid; gap: 10px; height: 645px;}
.episode-status { cursor: default; width: 100%; padding: 10px 15px; border: none; border-radius: 8px;}
.episodes-list::-webkit-scrollbar { width: 8px;}
.episodes-list::-webkit-scrollbar-track { background: #292929; border-radius: 5px;}
.episodes-list::-webkit-scrollbar-thumb { background: #00bfa5; border-radius: 5px;}
.episode-item:not(:last-child) { margin-bottom: 8px;}
.episode-button { width: 100%; padding: 10px 15px; background: #00bfa5; color: #121212; border: none; border-radius: 8px; font-weight: 600; font-size: 1rem; cursor: pointer; box-shadow: 0 3px 10px rgba(0, 191, 165, 0.5); text-align: center; transition: background-color 0.25s ease; user-select: none;}
.episode-button:hover { background: #009e87; box-shadow: 0 5px 15px rgba(0, 158, 135, 0.7);}
/* Topbar */ .topbar { position: fixed; top: 0; left: 0; right: 0; height: 70px; background: #181818; border-bottom: 1px solid #333; display: flex; align-items: center; padding: 0 20px; gap: 20px; z-index: 1050;}
.topbar img { height: 65px; user-select: none; margin-right: auto; flex-shrink: 0;}
/* Bottom bar */ .bottom-bar { position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; background: #222; display: flex; justify-content: space-between; align-items: center; z-index: 1000; transform: translateY(100%); transition: transform 0.3s ease;}
.bottom-bar.visible { transform: translateY(0);}
.main { padding-bottom: 80px;}
.bottom-btn { background: none; border: none; color: #00bfa5; font-size: 1.6rem; cursor: pointer; margin: 0 1rem; transition: transform 0.2s ease, color 0.3s;}
.bottom-btn:hover { color: #00fff0; transform: scale(1.2);}
/* Search */ .search-form { position: relative; display: flex; align-items: center; gap: 10px;}
.search-form.mobile-search-active { position: absolute; left: 20px; right: 20px; top: 50%; transform: translateY(-50%); background: #222; padding: 5px 10px; border-radius: 8px; z-index: 1100; gap: 10px; transition: all 0.3s ease;}
.search-form.mobile-search-active input { display: block !important; flex-grow: 1; width: 100%; animation: slideInLeft 0.4s forwards; color: #eee; background: transparent; border: none; border-bottom: 2px solid #00bfa5; outline: none;}
.search-form.mobile-search-active #search-toggle-btn { display: none;}
#search-close-btn { background: none; border: none; color: white; font-size: 1.3rem; cursor: pointer; display: none;}
.search-form.mobile-search-active #search-close-btn { display: inline-block;}
@keyframes slideInLeft { from { max-width: 0; opacity: 0; transform: translateX(50px);}
to { max-width: 500px; opacity: 1; transform: translateX(0);}
}
@keyframes slideOutRight { from { max-width: 500px; opacity: 1; transform: translateX(0);}
to { max-width: 0; opacity: 0; transform: translateX(50px);}
}
.search-form.mobile-search-active input.showing { animation: slideInLeft 0.4s forwards; max-width: 500px;}
.search-form.mobile-search-active input.hiding { animation: slideOutRight 0.3s forwards; max-width: 0;}
.search-form.mobile-search-active.hiding { animation: fadeOut 0.3s forwards;}
#searchInput { background: transparent; color: #eee; border: none; border-bottom: 1px solid #555;}
#searchInput::placeholder { color: #888;}
/* Light Theme */ body.light-theme { background: #f9f9fb; color: #1a1a1a;}
body.light-theme .anime-card { background: #fff; color: #1a1a1a; border-color: #e0e0e0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);}
body.light-theme .anime-card:hover { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);}
body.light-theme .anime-image { border-bottom: 3px solid #eaeaea !important;}
body.light-theme .anime-title { background: #fff !important; color: #1a1a1a !important;}
body.light-theme .topbar { background: #fff !important; color: #1a1a1a !important; border-bottom: 1px solid #ddd !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);}
body.light-theme .modal-content { background: #fff !important; color: #1a1a1a !important; border: 1px solid #e0e0e0 !important;}
body.light-theme .modal-body { background: #f8f8f8 !important;}
body.light-theme .modal-img { box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);}
body.light-theme .modal-title { color: #00bfa5;}
body.light-theme .download-btn, body.light-theme .episode-button { background: #00bfa5; color: #fff;}
body.light-theme .download-btn:hover, body.light-theme .episode-button:hover { background: #009e87; box-shadow: 0 4px 12px rgba(0, 191, 165, 0.4);}
body.light-theme .btn-outline-light { color: #00bfa5 !important; border-color: #00bfa5 !important;}
body.light-theme .btn-outline-light:hover { background: #00bfa5 !important; color: #fff !important;}
body.light-theme .episodes-list { background: #fefefe !important; border: 1px solid #e0e0e0 !important; scrollbar-color: #00bfa5 #f1f1f1;}
body.light-theme .episodes-list::-webkit-scrollbar-track { background: #f1f1f1;}
body.light-theme .episodes-list::-webkit-scrollbar-thumb { background: #00bfa5;}
body.light-theme .bottom-bar { background: linear-gradient(90deg, #f9f9f9, #eaeaea); border-top: 1px solid #ccc;}
body.light-theme .bottom-btn { color: #222;}
body.light-theme .bottom-btn:hover { color: #000;}
body.light-theme .page-btn { background: #222; color: #fff;}
body.light-theme .page-btn:hover { background: #000;}
body.light-theme #pageIndicator { color: #222;}
body.light-theme .search-form.mobile-search-active { background: #fff; border: 1px solid #ddd;}
body.light-theme .search-form.mobile-search-active input { color: #111; border-bottom: 2px solid #00bfa5;}
body.light-theme #searchInput { color: #111; border-bottom: 1px solid #aaa;}
body.light-theme #searchInput::placeholder { color: #888;}
/* Sugerencias */ .suggestions-list { list-style: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 0; z-index: 1000; background: #1e1e1e; border: 1px solid #333;}
.suggestions-list li { display: flex; align-items: center; padding: 6px 10px; cursor: pointer; border-bottom: 1px solid #2a2a2a; color: #eee;}
.suggestions-list li img { width: 40px; height: 55px; object-fit: cover; margin-right: 10px; border-radius: 4px;}
.suggestions-list li:hover { background: #2c2c2c;}
body.light-theme .suggestions-list { background: #fff; border: 1px solid #fff;}
body.light-theme .suggestions-list li { border-bottom: 1px solid #fff; color: #141313;}
body.light-theme .suggestions-list li:hover { background: #f2f2f2;}
/* Overlay */ .policy-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); z-index: 2000; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(2px);}
.policy-modal { width: 92vw; max-width: 800px; height: 88vh; background: #1f1f1f; color: #e0e0e0; border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8);}
.policy-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: #121212; border-bottom: 1px solid #333;}
.policy-header h5 { font-weight: 600;}
.policy-iframe { flex: 1 1 auto; border: none; width: 100%;}
.policy-footer { padding: 0.75rem 1rem; background: #121212; border-top: 1px solid #333;}
body.light-theme .policy-modal { background: #fff; color: #1a1a1a;}
body.light-theme .policy-header, body.light-theme .policy-footer { background: #f8f8f8; border-color: #ddd;}
/* Ads overlay */ #adsOverlay.policy-overlay { top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); z-index: 9999; display: flex; justify-content: center; align-items: center; padding: 1rem; box-sizing: border-box;}
#adsOverlay .policy-modal { background: #111; color: #fff; border-radius: 16px; padding: 2rem; max-width: 450px; width: 100%; height: 300px; text-align: center; box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);}
#adsOverlay h3 { font-size: 1.25rem;}
#adsOverlay p { font-size: 0.95rem; margin-bottom: 1.5rem;}
#adsOverlay .btn { font-size: 0.9rem; padding: 0.6rem 1.2rem; border-radius: 8px; white-space: nowrap;}
/* Logo SVG */ .logo-svg { height: 80px; flex-shrink: 0; flex-grow: 0; width: auto;}
.logo-svg text { transition: fill 0.3s ease;}
.logo-svg .main-text, .logo-svg .subtext { fill: white;}
.logo-svg .ext-text { fill: #00bfff;}
body.light-theme .logo-svg .main-text, body.light-theme .logo-svg .subtext { fill: #111;}
body.light-theme .logo-svg .ext-text { fill: #2e94dc;}
/* Responsive */ @media (max-width: 576px) { .modal-content { height: 100vh; display: flex; flex-direction: column;}
.modal-header { padding: 0.5rem 1rem;}
.modal-body { flex: 1 1 auto; flex-direction: column; padding: 1rem; gap: 20px;}
.modal-left { width: 100%; max-width: 100%; align-items: center;}
.modal-img { width: 100%; max-height: 500px;}
.modal-info { width: 100%;}
.episodes-list { max-height: none; flex: 1 1 auto;}
#adsOverlay .policy-modal { height: 400px; width: 100%;}
}
#menuOverlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 2000; display: flex; justify-content: center; align-items: center; opacity: 0; transform: scale(0.95); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease;}
#menuOverlay.show { opacity: 1; transform: scale(1); pointer-events: auto;}
.policy-modal { transition: background-color 0.3s, color 0.3s;}
#menuOverlay .policy-modal { width: 92vw; max-width: 450px; height: auto; background: #1f1f1f; color: #e0e0e0; border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8);}
#menuOverlay .policy-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: #121212; border-bottom: 1px solid #333;}
#menuOverlay .policy-header i { font-size: 1.2rem; color: #e0e0e0;}
.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 1.2rem; padding: 1.2rem; justify-items: center;}
.menu-circle { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 70px; height: 70px; border-radius: 50%; background-color: #2b2b2b; color: #00bfa5; font-size: 1.4rem; border: 2px solid #333; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease;}
.menu-circle:hover { background-color: #333; transform: scale(1.05);}
.menu-text { margin-top: 0.4rem; font-size: 0.8rem; font-weight: 600; color: #e0e0e0; user-select: none; text-align: center;}
@media (max-width: 400px) { .menu-circle { width: 60px; height: 60px; font-size: 1.2rem;}
.menu-text { font-size: 0.7rem;}
}
/* Light Theme */ body.light-theme #menuOverlay .policy-modal { background: #fff; color: #1a1a1a;}
body.light-theme #menuOverlay .policy-header { background: #f8f8f8; border-color: #ddd;}
body.light-theme .menu-circle { background-color: #f4f4f4; border-color: #ddd; color: #00796b;}
body.light-theme .menu-circle:hover { background-color: #e0f7f4;}
body.light-theme .menu-text { color: #121212;}
/* CSS: ponlo en tu archivo de estilos o dentro de <style> en el head */ #continueWatchingModal .continue-modal-content { position: relative; /* necesario para que el botón absolute se posicione bien */ overflow: hidden;}
/* botón cerrar siempre encima */ #continueWatchingModal .continue-close { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2000; /* > 1050 (Bootstrap modal) */ background: none; border: none; color: #fff; line-height: 1; padding: 0.25rem; cursor: pointer;}
.modal-title-S { font-size: 1.8rem; font-weight: 700; margin-bottom: 1rem; color: #ffffff; text-align: center;}
/* imagen debajo del botón */ #continueWatchingModal .continue-watching-img { display: block; width: 100%; object-fit: cover; border-radius: 6px; position: relative; z-index: 1; /* baja prioridad */}
/* móviles: que no ocupe todo el alto */ @media (max-width: 576px) { .modal-md>div:nth-child(1) { background: #222; color: #fff; border-radius: 12px; overflow: hidden; height: auto !important;}
#continueWatchingModal .modal-body { padding: 1rem;}
}
#pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 24px 0 20px 0;}
.pagination-btn { padding: 6px 14px; margin: 4px; border-radius: 999px; font-weight: 600; font-size: 14px; border: 2px solid aquamarine; background-color: transparent; color: aquamarine; cursor: pointer; transition: all 0.2s ease-in-out; box-shadow: 0 0 0 transparent;}
.pagination-btn:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(127, 255, 212, 0.3);}
.pagination-btn.active { background-color: aquamarine; color: #111;}
.pagination-btn.nav { border-color: #ccc; color: #ccc;}
.pagination-btn.nav:hover { background-color: #ccc; color: black; transform: translateY(-3px);}
@media (max-width: 480px) { .pagination-btn { padding: 4px 10px; font-size: 12px; margin: 2px;}
}
.modal-description { background-color: rgba(255, 255, 255, 0.08); /* más sutil que violeta sólido */ border-radius: 12px; margin-bottom: 15px; padding: 15px 20px; /* espacio interno para que respire */ color: #eaeaea; /* texto en tono claro */ line-height: 1.6; /* más legible */}
.description-title { font-size: 1.4rem; font-weight: 600; margin-bottom: 0.8rem; color: #ffffff; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* separador */ padding-bottom: 5px;}
.description-text { font-size: 1rem; font-weight: 400; color: #fff; text-align: justify; /* para bloques largos de texto */}