/* ============================================================ ZIKPIC - TEMA OSCURO Activo cuando Sobrescribe variables de main.css + fixes hardcodeados ============================================================ */ /* ============================================================ 1. OVERRIDE DE VARIABLES CSS (main.css + comments.css) NOTA: Se usa html[data-theme="dark"] (especificidad 0-1-1) para superar a :root (0-1-0) de main.css aunque cargue después. ============================================================ */ html[data-theme="dark"] { /* Fondos principales */ --white: #1e1e2e; --light: #2d2d40; --bg-light: #1a2a1e; --light-bg: #1a2a1e; --card-bg: #252538; --card-hover: #2e2e45; /* Texto */ --dark: #e2e8f0; --dark-light: #cbd5e1; --text-dark: #e2e8f0; --text-light: #a7f3d0; --text-gray: #94a3b8; --text-muted: #94a3b8; --gray: #94a3b8; --gray-light: #475569; /* Bordes */ --border: #3a3a52; /* Colores brand - sin cambios */ --primary: #81d742; --primary-dark: #3ac403; --primary-light: #4a7a30; --zikpic-primary: #81d742; --zikpic-secondary: #3ac403; --zikpic-green: #81d742; --zikpic-green-dark: #2e9c02; --zikpic-dark-green: #6bb536; --zikpic-light-green: #9de45a; --zikpic-white: #1e1e2e; --zikpic-dark: #e2e8f0; --zikpic-light: #2d2d40; /* Sombras */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5), 0 10px 10px rgba(0, 0, 0, 0.3); --zikpic-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Variables de comentarios (comments.css tiene su propio :root) */ --comment-bg: #252538; --comment-border: #3a3a52; --comment-text: #e2e8f0; --comment-text-light: #94a3b8; --comment-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } /* ============================================================ 2. BODY Y BASE ============================================================ */ [data-theme="dark"] body { background-color: #1e1e2e !important; color: #e2e8f0 !important; } /* ============================================================ 3. HEADER (mainh.css) ============================================================ */ [data-theme="dark"] .zikpic-header { background: #16161e; border-bottom-color: #2d2d40; } [data-theme="dark"] .header { background: #16161e; } /* Logo: mostrar versión oscura en dark mode */ .header-logo-dark, .footer-logo-dark { display: none; } [data-theme="dark"] .header-logo-light, [data-theme="dark"] .footer-logo-light { display: none !important; } [data-theme="dark"] .header-logo-dark, [data-theme="dark"] .footer-logo-dark { display: inline-block !important; } /* Búsqueda en header */ [data-theme="dark"] .header-search input, [data-theme="dark"] .search-field, [data-theme="dark"] input[type="search"], [data-theme="dark"] .zikpic-search { background: #252538; border-color: #3a3a52; color: #e2e8f0; } [data-theme="dark"] .zikpic-search input { color: #e2e8f0; } [data-theme="dark"] .zikpic-search input::placeholder, [data-theme="dark"] .search-field::placeholder { color: #64748b; } /* Links de navegación */ [data-theme="dark"] .nav-link, [data-theme="dark"] .header-nav a { color: #cbd5e1 !important; } [data-theme="dark"] .nav-link:hover { background: var(--zikpic-green) !important; color: #1e1e2e !important; /* texto oscuro sobre verde */ } /* Estado activo en el header */ [data-theme="dark"] .nav-link.activeh, [data-theme="dark"] .activeh { background: rgba(129, 215, 66, 0.15) !important; color: #81d742 !important; } /* Botones del header (notificaciones, mensajes) */ [data-theme="dark"] .notification-trigger i, [data-theme="dark"] .messages-trigger i { color: #cbd5e1 !important; } /* Dropdown avatar menu */ [data-theme="dark"] .avatar-menu, [data-theme="dark"] .avatar-dropdown .avatar-menu { background: #252538; border-color: #3a3a52; box-shadow: 0 8px 24px rgba(0,0,0,0.5); } [data-theme="dark"] .dropdown-item { color: #e2e8f0; border-bottom-color: rgba(255,255,255,0.05) !important; } [data-theme="dark"] .dropdown-item:hover { background: #2d2d40; color: var(--primary); } /* Menú de notificaciones */ [data-theme="dark"] .notification-dropdown-menu, [data-theme="dark"] #userNotificationMenu { background: #252538 !important; border-color: #3a3a52 !important; box-shadow: 0 8px 30px rgba(0,0,0,0.5) !important; } [data-theme="dark"] .notification-dropdown-menu h6, [data-theme="dark"] #userNotificationMenu h6 { color: #e2e8f0 !important; } [data-theme="dark"] #userNotificationMenu [style*="border-bottom"], [data-theme="dark"] #userNotificationMenu [style*="border-top"] { border-color: #3a3a52 !important; } [data-theme="dark"] #userNotificationsContent::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); } [data-theme="dark"] #userNotificationsContent::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.34); } /* Items de notificación generados por JS */ [data-theme="dark"] .notification-item { background: #252538 !important; border-bottom-color: rgba(255,255,255,0.07) !important; color: #e2e8f0 !important; } [data-theme="dark"] .notification-item:hover { background: #2d2d40 !important; } [data-theme="dark"] .notification-item .notification-title { color: #e2e8f0 !important; } /* Hamburger menu */ [data-theme="dark"] .hamburger-button rect { fill: #e2e8f0; } /* ============================================================ 4. CARDS (main.css + components.css) ============================================================ */ [data-theme="dark"] .series-card, [data-theme="dark"] .category-card, [data-theme="dark"] .modal-content { background: var(--card-bg) !important; } /* Series card generado por PostCard.php — inline styles hardcodeados */ [data-theme="dark"] .series-card { border-color: #3a3a52 !important; } [data-theme="dark"] .series-card [style*="color: #2d3748"], [data-theme="dark"] .series-card [style*="color:#2d3748"] { color: #e2e8f0 !important; } [data-theme="dark"] .series-card [style*="color: #718096"], [data-theme="dark"] .series-card [style*="color:#718096"] { color: #94a3b8 !important; } [data-theme="dark"] .series-card [style*="color: #a0aec0"], [data-theme="dark"] .series-card [style*="color:#a0aec0"] { color: #64748b !important; } /* Series card generado por profile.php — clases CSS (sin inline styles) */ [data-theme="dark"] .series-card .series-title { color: #e2e8f0 !important; } [data-theme="dark"] .series-card .series-description { color: #94a3b8 !important; } [data-theme="dark"] .series-card .series-author { color: #64748b !important; } /* Divisor entre contenido del post y acciones (likes/comentarios) */ [data-theme="dark"] .post-actions { border-top-color: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] .card-content { background: var(--card-bg); } /* Borde claro entre cards y fondo */ [data-theme="dark"] .series-card { border: 1px solid #2e2e45; } /* ============================================================ 5. FORMULARIOS E INPUTS ============================================================ */ [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: #252538; border-color: #3a3a52; color: #e2e8f0; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #64748b; } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { /* background-color: #2d2d40; */ border-color: var(--primary); color: #e2e8f0; } [data-theme="dark"] .search-input { background: #252538; border-color: #3a3a52; color: #e2e8f0; } /* SweetAlert2 (modales JS como editar imagen) */ [data-theme="dark"] .swal2-popup { background: #252538 !important; color: #e2e8f0 !important; border: 1px solid #3a3a52 !important; } [data-theme="dark"] .swal2-title, [data-theme="dark"] .swal2-html-container, [data-theme="dark"] .swal2-content { color: #e2e8f0 !important; } [data-theme="dark"] .swal2-input, [data-theme="dark"] .swal2-textarea, [data-theme="dark"] .swal2-select { background: #1e1e2e !important; color: #e2e8f0 !important; border: 1px solid #3a3a52 !important; } [data-theme="dark"] .swal2-input::placeholder, [data-theme="dark"] .swal2-textarea::placeholder { color: #64748b !important; } [data-theme="dark"] .swal2-styled.swal2-cancel { background: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] .swal2-validation-message { background: #2d2d40 !important; color: #fbbf24 !important; } /* ============================================================ 6. SECCIONES DE CONTENIDO (featured, etc.) ============================================================ */ [data-theme="dark"] .featured { background: #191926; } [data-theme="dark"] section { background-color: transparent; } [data-theme="dark"] .text-muted { --bs-text-opacity: 1; color: var(--zikpic-dark) !important; } /* ============================================================ 7. FOOTER (mainh.css — hardcodeados #f8f9fa, #e9ecef) ============================================================ */ [data-theme="dark"] .zikpic-footer { background: #16161e !important; border-top-color: #2d2d40 !important; } [data-theme="dark"] .footer-link { color: #94a3b8 !important; } [data-theme="dark"] .footer-link:hover { color: var(--primary) !important; } [data-theme="dark"] .footer-copyright { border-top-color: #2d2d40 !important; } [data-theme="dark"] .footer-copyright p { color: #94a3b8 !important; } [data-theme="dark"] .footer-tagline { color: #94a3b8 !important; } [data-theme="dark"] .social-icon { background: #2d2d40 !important; color: #94a3b8; } /* ============================================================ 8. MODALES (components.css usa var(--white) — ya cubierto) ============================================================ */ [data-theme="dark"] .modal-header { border-bottom-color: #3a3a52; } [data-theme="dark"] .modal-header h3 { color: #e2e8f0; } [data-theme="dark"] .modal-close { color: #94a3b8; } [data-theme="dark"] .modal-close:hover { background: #2d2d40; } /* ============================================================ 9. COMENTARIOS — fixes hardcodeados en comments.css ============================================================ */ [data-theme="dark"] .comment-input { background: #1e1e2e !important; color: #e2e8f0 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .comment-input:focus { background: #252538 !important; } [data-theme="dark"] .tool-btn:hover { background: #2d2d40 !important; } [data-theme="dark"] .comment-sort { background: #252538; color: #e2e8f0; border-color: #3a3a52; } [data-theme="dark"] .comment-item { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important; } /* Modal de informacion del episodio (reader paginado) */ [data-theme="dark"] .episode-info-modal { background: linear-gradient(135deg, #252538 0%, #1e1e2e 100%) !important; border: 1px solid #3a3a52; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important; } [data-theme="dark"] .info-modal-close { background: rgba(255, 255, 255, 0.08) !important; color: #cbd5e1 !important; } [data-theme="dark"] .modal-title { color: #e2e8f0 !important; } [data-theme="dark"] .episode-details { background: #1b1b2a !important; border-left-color: var(--primary) !important; color: #cbd5e1 !important; } [data-theme="dark"] .detail-label { color: #94a3b8 !important; } [data-theme="dark"] .detail-value, [data-theme="dark"] .author-name { color: #e2e8f0 !important; } [data-theme="dark"] .reactions-label { color: #94a3b8 !important; } [data-theme="dark"] .reaction-btn { background: #2d2d40 !important; border-color: #3a3a52 !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important; } [data-theme="dark"] .reply-item { background: #1e1e2e !important; border-left-color: #3a3a52 !important; } /* Fondo hardcodeado #f8f9fa en scrollbar comments */ [data-theme="dark"] .comments-scroll-inner::-webkit-scrollbar-track { background: #2d2d40 !important; } [data-theme="dark"] .loading-skeleton, [data-theme="dark"] .skeleton-line { background: #2d2d40 !important; } /* Picker de emojis/stickers/GIFs */ [data-theme="dark"] .zik-unified-picker, [data-theme="dark"] .zik-picker-isolation-container .zik-unified-picker, [data-theme="dark"] .zik-emoji-picker { background: #1e1e2e !important; border: 1px solid #3a3a52 !important; color: #e2e8f0 !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55) !important; } [data-theme="dark"] .zik-picker-header, [data-theme="dark"] .zik-emoji-nav, [data-theme="dark"] .zik-emoji-tabs { background: #252538 !important; border-bottom-color: #3a3a52 !important; } [data-theme="dark"] .zik-picker-content, [data-theme="dark"] .zik-emoji-content, [data-theme="dark"] .zik-emoji-category { background: #1e1e2e !important; } [data-theme="dark"] .zik-picker-tab, [data-theme="dark"] .zik-emoji-tab, [data-theme="dark"] .zik-emoji-arrow { color: #cbd5e1 !important; background: transparent !important; border-color: #3a3a52 !important; } [data-theme="dark"] .zik-picker-tab:hover:not(.active), [data-theme="dark"] .zik-emoji-tab:hover, [data-theme="dark"] .zik-emoji-arrow:hover:not(:disabled) { background: #2d2d40 !important; color: #e2e8f0 !important; } [data-theme="dark"] .zik-picker-tab.active, [data-theme="dark"] .zik-emoji-tab.active { background: rgba(129, 215, 66, 0.18) !important; color: #81d742 !important; } [data-theme="dark"] .zik-emote-item, [data-theme="dark"] .zik-emoji-item { background: #252538 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .zik-emote-item:hover, [data-theme="dark"] .zik-emoji-item:hover { background: #2d2d40 !important; } [data-theme="dark"] .zik-picker-loading, [data-theme="dark"] .zik-picker-empty, [data-theme="dark"] .zik-picker-error { color: #cbd5e1 !important; } /* Spoiler (texto y modal) */ [data-theme="dark"] .zik-spoiler { background: #2d2d40 !important; color: #2d2d40 !important; border: 1px dashed #3a3a52; } [data-theme="dark"] .zik-spoiler::before { color: #94a3b8 !important; } [data-theme="dark"] .zik-spoiler.revealed { background: #252538 !important; border-color: #475569 !important; color: #e2e8f0 !important; } [data-theme="dark"] .zik-spoiler-modal { background: rgba(8, 10, 15, 0.72) !important; backdrop-filter: blur(3px); } [data-theme="dark"] .zik-spoiler-modal-content { background: #1e1e2e !important; border: 1px solid #3a3a52 !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important; } [data-theme="dark"] .zik-spoiler-modal h3, [data-theme="dark"] .zik-spoiler-modal p { color: #e2e8f0 !important; } [data-theme="dark"] .zik-spoiler-modal input { background: #252538 !important; border-color: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] .zik-spoiler-modal input::placeholder { color: #94a3b8 !important; } [data-theme="dark"] .zik-spoiler-modal-btn.secondary { background: #2d2d40 !important; color: #cbd5e1 !important; border: 1px solid #3a3a52 !important; } [data-theme="dark"] .zik-spoiler-modal-btn.secondary:hover { background: #35354a !important; color: #e2e8f0 !important; } /* Modal reportar comentario */ [data-theme="dark"] .zik-report-modal { background: rgba(8, 10, 15, 0.72) !important; } [data-theme="dark"] .zik-report-modal-content { background: #1e1e2e !important; border: 1px solid #3a3a52 !important; color: #e2e8f0 !important; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55) !important; } [data-theme="dark"] .zik-report-modal-content h3, [data-theme="dark"] .zik-report-modal-content p, [data-theme="dark"] .zik-report-modal-content label, [data-theme="dark"] .zik-report-modal-content span { color: #e2e8f0 !important; } [data-theme="dark"] .zik-report-modal-content .report-reasons label:hover { background: #252538; border-radius: 8px; } [data-theme="dark"] .zik-report-modal-content input[type="radio"] { accent-color: #81d742; } [data-theme="dark"] .zik-report-modal-content .cancel-btn { background: #2d2d40 !important; border-color: #3a3a52 !important; color: #cbd5e1 !important; } [data-theme="dark"] .zik-report-modal-content .cancel-btn:hover { background: #35354a !important; color: #e2e8f0 !important; } [data-theme="dark"] .zik-report-modal-content .report-btn { background: #b91c1c !important; color: #ffffff !important; } [data-theme="dark"] .zik-report-modal-content .report-btn:disabled { background: #7f1d1d !important; opacity: 0.7 !important; } /* ============================================================ 10. ZIKPIC-CORE — fixes (tab-scroll-btn hardcodeado) ============================================================ */ [data-theme="dark"] .tab-scroll-btn { background: rgba(30, 30, 46, 0.97) !important; color: #e2e8f0 !important; } [data-theme="dark"] .tab-scroll-btn.right { background: rgba(30, 30, 46, 0.9) !important; } /* ============================================================ 11. TABS Y FILTROS ============================================================ */ /* series-tab-btn (series.css tiene #f5f5f5 hardcodeado en active) */ [data-theme="dark"] .series-tab-btn { color: #94a3b8 !important; } [data-theme="dark"] .series-tab-btn:hover { background: #2d2d40 !important; color: #e2e8f0 !important; } [data-theme="dark"] .series-tab-btn.active { background: #2d2d40 !important; color: #e2e8f0 !important; border-bottom-color: var(--primary) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .filter-btn { border-color: #3a3a52; color: #94a3b8; } [data-theme="dark"] .filter-btn:hover, [data-theme="dark"] .filter-btn.active { border-color: var(--primary); color: var(--primary); background: rgba(129, 215, 66, 0.1); } [data-theme="dark"] .series-tabs-scrollable, [data-theme="dark"] .content-filter-tabs { background: transparent; } /* Tabs estilo Bootstrap-like */ [data-theme="dark"] .nav-tabs { border-color: #3a3a52; } [data-theme="dark"] .nav-tabs .nav-link { color: #94a3b8; } [data-theme="dark"] .nav-tabs .nav-link.active, [data-theme="dark"] .nav-tabs .nav-link:hover { color: #e2e8f0; background: #252538; border-color: #3a3a52 #3a3a52 #252538; } /* ============================================================ 12. ZPMEDIA — banner de serie (zpmedia.css tiene #fff hardcodeado) ============================================================ */ [data-theme="dark"] .series-banner { background: #252538 !important; } /* ============================================================ 13. COMPONENTES VARIOS ============================================================ */ /* Badges y alertas */ [data-theme="dark"] .alert { border-color: #3a3a52; } [data-theme="dark"] .alert-success { background: rgba(46, 204, 113, 0.15); color: #a7f3d0; border-color: rgba(46, 204, 113, 0.3); } [data-theme="dark"] .alert-error, [data-theme="dark"] .alert-danger { background: rgba(231, 76, 60, 0.15); color: #fca5a5; border-color: rgba(231, 76, 60, 0.3); } /* Separadores */ [data-theme="dark"] hr, [data-theme="dark"] .divider { border-color: #3a3a52; } /* Tables */ [data-theme="dark"] table { color: #e2e8f0; } [data-theme="dark"] th { background: #252538; color: #94a3b8; border-color: #3a3a52; } [data-theme="dark"] td { border-color: #3a3a52; } [data-theme="dark"] tr:hover td { background: #2d2d40; } /* Scrollbar global */ [data-theme="dark"] ::-webkit-scrollbar-track { background: #1e1e2e; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3a52; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a4a65; } /* ============================================================ 14. DASHBOARD (userconfig, etc.) ============================================================ */ [data-theme="dark"] .character-upload-zone { border: 2px dashed #9eaff0; background: #252538 !important; } [data-theme="dark"] .character-upload-zone:hover, [data-theme="dark"] .character-upload-zone.drag-over, [data-theme="dark"] .character-upload-zone:focus-visible { background: #1e1e2e !important; box-shadow: 0 0 0 3px rgba(129, 215, 66, .14) !important; } [data-theme="dark"] .character-upload-card { border: 1px solid #4b4b66; background: linear-gradient(180deg, #252538 0%, #1e1e2e 100%)!important; } [data-theme="dark"] .upload-card-missing .character-upload-zone { background: #252538!important; } [data-theme="dark"] .character-form-title { color: #e2e8f0; } [data-theme="dark"] .characters-action-bar { background: #252538; border: 1px solid #3a3a52; } [data-theme="dark"] .characters-action-info h2 { color: #e2e8f0; } [data-theme="dark"] .characters-action-bar:hover{background:var(--card-hover)} [data-theme="dark"] .sched-bar-header:hover{background:var(--card-hover)} [data-theme="dark"] .userconfig-container, [data-theme="dark"] .dashboard-card, [data-theme="dark"] .config-section { background: transparent; } [data-theme="dark"] .config-section { border-bottom-color: #3a3a52; } [data-theme="dark"] .config-section h3 { color: #e2e8f0; } [data-theme="dark"] .config-section-description { color: #94a3b8; } [data-theme="dark"] .user-info-card { background: #252538; } [data-theme="dark"] .user-info-row { border-bottom-color: #3a3a52; } [data-theme="dark"] .user-info-label { color: #94a3b8; } [data-theme="dark"] .user-info-value { color: #e2e8f0; } /* Acordeones */ [data-theme="dark"] .accordion-section { background: #252538; border-color: #3a3a52; } [data-theme="dark"] .accordion-header { background: #252538; color: #e2e8f0; } [data-theme="dark"] .accordion-header:hover, [data-theme="dark"] .accordion-header.active { background: #2d2d40; } /* Cols picker (botones de columnas) */ [data-theme="dark"] .col-opt-btn { background: #2d2d40; border-color: #3a3a52; color: #e2e8f0; } [data-theme="dark"] .col-opt-btn:hover { border-color: var(--primary); } [data-theme="dark"] .col-opt-btn.active { background: rgba(129,215,66,0.15); border-color: var(--primary); color: var(--primary); } [data-theme="dark"] .privacy-control-header h4, .privacy-control-header i { color: #94a3b8 !important; } [data-theme="dark"] .zp-orange { background: #5f461a; color: #ffa700; } [data-theme="dark"] .zp-orange:hover { background: #5f4037; } [data-theme="dark"] .body-approved { background: #2e2e43; border-radius: 6px; border-color: #474759 !important; color: #e2e8f0; } [data-theme="dark"] .za-hr{ background: var(--zikpic-dark); } /* ============================================================ 15. GALERÍAS Y MASONRY ============================================================ */ [data-theme="dark"] .gal-masonry, [data-theme="dark"] .gal-grid { background: transparent; } [data-theme="dark"] .gal-item-inner { background: #252538; } /* Creator cards (FeaturedCreatorsModule.php — background: white hardcodeado) */ [data-theme="dark"] .gal-creator-card, [data-theme="dark"] .creator-card { background: #252538 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .gal-creator-card:hover, [data-theme="dark"] .creator-card:hover { box-shadow: 0 12px 24px rgba(0,0,0,0.5) !important; } [data-theme="dark"] .gal-creator-name, [data-theme="dark"] .creator-name { color: #e2e8f0 !important; } [data-theme="dark"] .gal-creator-stat, [data-theme="dark"] .creator-stat, [data-theme="dark"] .gal-creator-role { color: #94a3b8 !important; } [data-theme="dark"] .zik-report-modal-content { background-color: #1e1e2e !important; } [data-theme="dark"] .report-cancel-btn { background: unset; color: #e2e8f0 !important; } [data-theme="dark"] .report-cancel-btn:hover { background: #2f2f43 !important; } [data-theme="dark"] .report-description-label { color: #e2e8f0 !important; } [data-theme="dark"] .report-reason-label span { color: #e2e8f0 !important; } [data-theme="dark"] .report-reason-label:hover { background: #252538 !important; } [data-theme="dark"] .masonry-report-modal-description { color: #e2e8f0 !important; } [data-theme="dark"] .masonry-report-modal-header h3 { margin: 0; color: #e2e8f0 !important; } [data-theme="dark"] .likes-text { color: unset !important; } /* ============================================================ 16. PROFILE ============================================================ */ [data-theme="dark"] .profile-header { background: #16161e; } [data-theme="dark"] .profile-stats-bar { background: #252538; border-color: #3a3a52; } /* ============================================================ 17. SOCIAL / POSTS ============================================================ */ [data-theme="dark"] .post-card, [data-theme="dark"] .social-post { background: #252538; border-color: #3a3a52; } /* ============================================================ 18. TOGGLE SWITCH — UI del tema en userconfig.php ============================================================ */ .theme-toggle-wrapper { display: flex; align-items: center; gap: 14px; } .theme-toggle-label { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 600; color: var(--text-dark, #2c3e50); cursor: pointer; user-select: none; } .theme-toggle-switch { position: relative; width: 58px; height: 30px; flex-shrink: 0; } .theme-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .theme-toggle-track { position: absolute; inset: 0; background: #c0c7d0; border-radius: 30px; cursor: pointer; transition: background 0.3s ease; display: flex; align-items: center; padding: 0 4px; } .theme-toggle-track::after { content: ''; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: transform 0.3s ease; } .theme-toggle-switch input:checked + .theme-toggle-track { background: var(--primary, #81d742); } .theme-toggle-switch input:checked + .theme-toggle-track::after { transform: translateX(28px); } .theme-toggle-icon { font-size: 1.1rem; line-height: 1; } [data-theme="dark"] .theme-toggle-label { color: #e2e8f0; } /* ============================================================ 19. BOTONES "VER TODOS..." (series-view-more) ============================================================ */ [data-theme="dark"] .series-view-more a { background: #2d2d40 !important; color: #e2e8f0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } [data-theme="dark"] .series-view-more a:hover { background: #3a3a52 !important; color: #e2e8f0 !important; } /* ============================================================ 20. MÓDULO AUTORES DESTACADOS — Avatar Stack (fcm-h3-card) ============================================================ */ [data-theme="dark"] .fcm-h3-card { background: #252538 !important; box-shadow: 0 2px 12px rgba(0,0,0,0.35) !important; } [data-theme="dark"] .fcm-h3-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important; } [data-theme="dark"] .fcm-h3-link:hover { background: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .fcm-h3-names { color: #94a3b8 !important; } [data-theme="dark"] .fcm-h3-name-link { color: #94a3b8 !important; } [data-theme="dark"] .fcm-h3-name-link:hover { color: #e2e8f0 !important; } /* Border del avatar en dark mode */ [data-theme="dark"] .fcm-h3-stack .av { border-color: #252538 !important; } /* ============================================================ 20b. BOTÓN "CARGAR MÁS" del masonry (series-view-more-btn) ============================================================ */ [data-theme="dark"] .series-view-more-btn { background: #2d2d40 !important; color: #e2e8f0 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important; } [data-theme="dark"] .series-view-more-btn:hover { background: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] .masonry-load-more-loading { color: #aaa !important; } /* ============================================================ 21. BOTONES "VER MÁS" DEL INDEX (header-zp-end, carousel-mobile-more) y BOTÓN "VER TODOS/MÁS" del módulo de creadores (gal-load-more, fcm-more-btn) ============================================================ */ [data-theme="dark"] .header-zp-end a, [data-theme="dark"] .carousel-mobile-more a, [data-theme="dark"] .gal-load-more, [data-theme="dark"] .gal-load-more-btn, [data-theme="dark"] a.gal-load-more, [data-theme="dark"] .fcm-more-btn, [data-theme="dark"] a.fcm-more-btn { background: #2d2d40 !important; color: #e2e8f0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } [data-theme="dark"] .header-zp-end a:hover, [data-theme="dark"] .carousel-mobile-more a:hover, [data-theme="dark"] .gal-load-more:hover, [data-theme="dark"] .gal-load-more-btn:hover, [data-theme="dark"] .fcm-more-btn:hover { background: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] .series-grid-placeholder-card .comic-card-epic-placeholder-frame { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.26) !important; } [data-theme="dark"] .series-grid-placeholder-card .comic-card-epic-cover { border-color: rgba(148, 163, 184, 0.18) !important; background: linear-gradient(145deg, rgba(45, 45, 64, 0.98) 0%, rgba(31, 41, 55, 0.98) 100%) !important; } [data-theme="dark"] .series-grid-placeholder-card .comic-card-epic-cover::before { background-image: var(--series-grid-placeholder-image-dark), radial-gradient(circle at 18% 18%, rgba(148, 163, 184, 0.24), transparent 30%), linear-gradient(160deg, rgba(67, 233, 123, 0.08), rgba(56, 249, 215, 0.04)) !important; } [data-theme="dark"] .series-grid-placeholder-chip, [data-theme="dark"] .series-grid-placeholder-label { color: #e2e8f0 !important; text-shadow: 0 1px 2px rgba(15, 23, 42, 0.6) !important; } [data-theme="dark"] .series-grid-placeholder-chip { background: rgba(15, 23, 42, 0.55) !important; } @media (max-width: 640px) { [data-theme="dark"] .gal-load-more-btn { border-radius: 12px !important; padding: 0.5em 1.4em !important; font-size: .85em !important; } } /* ============================================================ 22. BANNER HERO — texto claro en dark mode .hero-content usa color: var(--white) y en dark --white = #1e1e2e ============================================================ */ [data-theme="dark"] .hero-content { color: #ffffff !important; } [data-theme="dark"] .hero-content h1, [data-theme="dark"] .hero-content h2, [data-theme="dark"] .hero-content p { color: #ffffff !important; text-shadow: none !important; } [data-theme="dark"] .text-invitation-zikpic h2, [data-theme="dark"] .text-invitation-zikpic p { text-shadow: none !important; } [data-theme="dark"] .app-section { box-shadow: none !important; } [data-theme="dark"] .hero-carousel { box-shadow: none !important; } [data-theme="dark"] .carousel-arrow { background: none !important; border: none !important; } [data-theme="dark"] .carousel-arrow:hover { background: none !important; border: none !important; box-shadow: none !important; } [data-theme="dark"] .carousel-arrow i { color: #e2e8e4 !important; } [data-theme="dark"] .comic-card-epic:hover { box-shadow: none !important; } [data-theme="dark"] .btn-secondary-home:hover { background: #7931cb !important; color: #eef0f4 !important; } /* ============================================================ 23. CREATORS.PHP — stats box y botón de orden ============================================================ */ [data-theme="dark"] .creator-stats { background: #2d2d40 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .creator-card:hover .creator-stats { background: #3a3a52 !important; border-color: #4a4a62 !important; } [data-theme="dark"] .order-toggle-btn { background: #2d2d40 !important; color: var(--primary) !important; } [data-theme="dark"] .order-toggle-btn:hover { background: var(--primary) !important; color: #1e1e2e !important; } /* ============================================================ 24. MODAL DE GALERÍA / VIÑETA (gallery-modal.css) ============================================================ */ /* Override variables del :root de gallery-modal.css */ html[data-theme="dark"] { --modal-content-bg: #252538; --modal-border: #3a3a52; --text-dark: #e2e8f0; --text-light: #94a3b8; } /* Borde visible para distinguir el modal del fondo oscuro */ [data-theme="dark"] .modal-container { background: #252538 !important; box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08) !important; } [data-theme="dark"] .modal-sidebar { background: #252538 !important; border-left-color: #3a3a52 !important; } [data-theme="dark"] .modal-header { background: #252538 !important; border-bottom-color: #3a3a52 !important; } [data-theme="dark"] .modal-actions { background: #252538 !important; border-bottom-color: #3a3a52 !important; border-top-color: #3a3a52 !important; } [data-theme="dark"] span#mediaModal-descubre-masonrySeriesText { color: #e2e8f0 !important; } [data-theme="dark"] .modal-title { color: #e2e8f0 !important; } [data-theme="dark"] .modal-description { color: #94a3b8 !important; } [data-theme="dark"] .modal-author-info h3 { color: #e2e8f0 !important; } [data-theme="dark"] .modal-author-info p { color: #94a3b8 !important; } [data-theme="dark"] .action-item { color: #94a3b8 !important; } [data-theme="dark"] .action-item.liked { color: #e74c3c !important; } [data-theme="dark"] .action-item.liked i, [data-theme="dark"] .action-item.liked .fa-heart, [data-theme="dark"] #postModal .action-item.like-item.liked i, [data-theme="dark"] #postModalCompact .action-item.like-item.liked i { color: #e74c3c !important; } [data-theme="dark"] .action-item:hover { color: var(--primary) !important; background: rgba(129,215,66,0.12) !important; } [data-theme="dark"] .action-item.liked:hover { color: #e74c3c !important; background: rgba(231, 76, 60, 0.15) !important; } /* Flechas de navegación del modal */ [data-theme="dark"] .modal-nav-arrow { background: rgba(45,45,64,0.92) !important; color: #e2e8f0 !important; box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important; } [data-theme="dark"] .modal-nav-arrow:hover { background: var(--primary) !important; color: #1e1e2e !important; } /* ============================================================ 25. COMIC-F — BARRA DEL AUTOR Y SEPARADORES DE EPISODIOS ============================================================ */ /* Franja blanca del autor en comic-f.php → oscurecer el gradiente */ [data-theme="dark"] .user-header-container-zp { background: linear-gradient(90deg, #1e1e2e 30%, transparent 100%) !important; } /* Lista de capítulos/episodios (series.php) */ [data-theme="dark"] .chapters-list { background: #252538 !important; box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important; } /* Separadores entre episodios — muy atenuados */ [data-theme="dark"] .chapter-item{ background:#1f243045 !important; border-color:rgba(255,255,255,.08) !important; box-shadow:none !important; } [data-theme="dark"] .chapter-item:hover{ background:#262c38 !important; border-color:rgba(255,255,255,.12) !important; box-shadow:0 8px 22px rgba(0,0,0,.25) !important; } [data-theme="dark"] .chapter-item.chapter-locale-item { border: 1px dashed #68727b !important; } [data-theme="dark"] .chapter-item.chapter-item-oneshot-3a { border: 1px solid rgba(255, 255, 255, 0.14) !important; --oneshot-banner-brightness: 0.42; --oneshot-banner-opacity: 0.30; } [data-theme="dark"] .chapter-item.chapter-item-oneshot-3a .chapter-title { color: #f5f7fb !important; } [data-theme="dark"] .chapter-item.chapter-item-oneshot-3a .chapter-stats-inline { color: #c3cad6 !important; } [data-theme="dark"] .chapter-item.chapter-item-oneshot-3a .chapter-number { color: #d8e3ff !important; } [data-theme="dark"] .chapter-divider{ background:rgba(255,255,255,.10)!important; } [data-theme="dark"] .switch-group small, [data-theme="dark"] .action-group small{ color:#aab5c6!important; } [data-theme="dark"] .action-icon{ background:#2b3242; border-color:rgba(255,255,255,.08); } [data-theme="dark"] .action-icon:hover{ background:#3a4355; border-color:rgba(255,255,255,.18); } [data-theme="dark"] .empty-state{ color:#b6c2d3; } [data-theme="dark"] .chapter-locale-item{ background:#252b36; border:1px dashed rgba(255,255,255,.08); border-left:3px solid #5f708b; border-radius:14px; } /* ============================================================ 26. MASONRY TABS (gal.php / vinetas.php) + SOCIAL MODAL ============================================================ */ /* Tabs de galería y viñetas: botón activo visible en dark mode */ [data-theme="dark"] .masonry-tab-btn { color: #94a3b8 !important; } [data-theme="dark"] .masonry-tab-btn:hover { background: #2d2d40 !important; color: #e2e8f0 !important; } [data-theme="dark"] .masonry-tab-btn.active { background: #2d2d40 !important; color: #e2e8f0 !important; border-bottom-color: var(--primary) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important; } /* Borde inferior del bloque autor en modales (gal-masonry.css) */ [data-theme="dark"] .modal-author-info { border-bottom-color: #3a3a52 !important; gap: 0px !important; flex-direction: column !important; align-items: flex-start !important; } /* Texto de descripción del post en modal social (color visible) */ [data-theme="dark"] .modal-post-text { color: #94a3b8 !important; } /* Profile sidebar y card en comic-f.php / series.php */ [data-theme="dark"] .profile-sidebar { background: none !important; } [data-theme="dark"] .profile-card { background: none !important; } [data-theme="dark"] .btn-profile-btn { box-shadow: none !important; } /* ============================================================ 27. PÁGINAS DE EVENTOS (eventos.php, evento-f.php, social.php carrusel) ============================================================ */ /* --- Carrusel de eventos en social.php --- */ [data-theme="dark"] .event-carousel-card { background: #252538 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .event-carousel-card h3 { color: #e2e8f0 !important; } /* Overrides para los colores inline hardcodeados en las tarjetas del carrusel */ [data-theme="dark"] .event-carousel-card [style*="color: #333"], [data-theme="dark"] .event-carousel-card [style*="color:#333"] { color: #e2e8f0 !important; } [data-theme="dark"] .event-carousel-card [style*="color: #666"], [data-theme="dark"] .event-carousel-card [style*="color:#666"] { color: #94a3b8 !important; } [data-theme="dark"] .event-carousel-card [style*="border-top: 1px solid #eee"], [data-theme="dark"] .event-carousel-card [style*="border-top:1px solid #eee"] { border-top-color: #3a3a52 !important; } /* Badge de categoría en carrusel social.php */ [data-theme="dark"] .event-carousel-card [style*="background: rgba(255,255,255,0.95)"], [data-theme="dark"] .event-carousel-card [style*="background:rgba(255,255,255,0.95)"] { background: rgba(45,45,64,0.95) !important; color: #e2e8f0 !important; } /* --- Cards de eventos.php --- */ [data-theme="dark"] .event-card { background: #252538 !important; color: #e2e8f0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .event-card-title { color: #e2e8f0 !important; } [data-theme="dark"] .event-card-description { color: #94a3b8 !important; } [data-theme="dark"] .event-card-hashtag { background: #2d2d40 !important; } [data-theme="dark"] .event-card-footer { border-top-color: #3a3a52 !important; } [data-theme="dark"] .event-card-creator, [data-theme="dark"] .event-card-stats { color: #94a3b8 !important; } [data-theme="dark"] .badge-category { background: #1a3356 !important; color: #7ec8e3 !important; } [data-theme="dark"] .badge-type { background: #2d1b4e !important; color: #c084fc !important; } /* Stat badges del encabezado de eventos.php */ [data-theme="dark"] .stat-badge { background: #252538 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important; } [data-theme="dark"] .stat-badge span { color: #e2e8f0 !important; } [data-theme="dark"] .stat-number { color: #e2e8f0 !important; } /* Título y subtítulo del header de autor en comic-f / gal-f / eventos */ [data-theme="dark"] .header-zp-title, [data-theme="dark"] .h1-title-autor { color: #e2e8f0 !important; text-shadow: none !important; } [data-theme="dark"] .header-zp-subtitle, [data-theme="dark"] .header-zp-p-subtitle, [data-theme="dark"] .subtitle-gal-autor-banner { color: #94a3b8 !important; text-shadow: none !important; } /* Empty state y paginación de eventos.php */ [data-theme="dark"] .empty-state { background: #252538 !important; } [data-theme="dark"] .empty-state h3 { color: #94a3b8 !important; } [data-theme="dark"] .pagination a, [data-theme="dark"] .pagination span { background: #252538 !important; color: #e2e8f0 !important; } [data-theme="dark"] .pagination a:hover { background: #667eea !important; color: #fff !important; } /* --- evento-f.php: tarjeta de información principal --- */ [data-theme="dark"] .event-info-card { background: #252538 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .event-detail-label { color: #94a3b8 !important; } [data-theme="dark"] .event-detail-value { color: #e2e8f0 !important; } [data-theme="dark"] .event-description h3 { color: #e2e8f0 !important; } [data-theme="dark"] .event-hashtag { background: #2d2d40 !important; } /* Título de sección "Participaciones" */ [data-theme="dark"] .section-title { color: #e2e8f0 !important; } /* Botones sociales Me gusta / Compartir (borde) */ [data-theme="dark"] .social-buttons-container { border-top-color: #3a3a52 !important; border-bottom-color: #3a3a52 !important; } /* Botón Compartir: estado normal más legible en dark */ [data-theme="dark"] .share-btn { border-color: #a78bfa !important; color: #a78bfa !important; } [data-theme="dark"] .share-btn:hover { color: #ffffff !important; } /* Empty state de participaciones */ [data-theme="dark"] .empty-participations { background: #252538 !important; } [data-theme="dark"] .empty-participations h3 { color: #94a3b8 !important; } /* Attachments border */ [data-theme="dark"] .event-attachments { border-top-color: #3a3a52 !important; } /* post-card-masonry: sombra clara en móvil → oscura en dark */ @media (max-width: 480px) { [data-theme="dark"] .post-card-masonry { box-shadow: var(--shadow-md) !important; } } /* ============================================================ 28. READER WIDGETS (reader.php / reader-novel.php) Sección social, info card, navegación, sidebar ============================================================ */ /* Tarjeta de información del episodio */ [data-theme="dark"] .episode-details-card { background: #252538 !important; box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important; border-left-color: var(--primary) !important; } [data-theme="dark"] .episode-title-card { color: #e2e8f0 !important; } [data-theme="dark"] .info-label { color: #64748b !important; } [data-theme="dark"] .info-value { color: #e2e8f0 !important; } [data-theme="dark"] .author-name-card { color: #e2e8f0 !important; } [data-theme="dark"] .genre-tag-card { background: #1a3356 !important; color: #7ec8e3 !important; border-color: #2a4a6e !important; } /* Columna derecha: botones coloridos y reacciones */ [data-theme="dark"] .colorful-actions { background: #252538 !important; box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .reactions-label { color: #94a3b8 !important; } [data-theme="dark"] .reaction-btn-colorful { background: #2d2d40 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .reaction-btn-colorful:hover { background: #353550 !important; border-color: var(--primary) !important; } [data-theme="dark"] .reaction-btn-colorful .count { background: #3a3a52 !important; color: #94a3b8 !important; } [data-theme="dark"] .reaction-btn-colorful.active { background: #1e1e2e !important; border-color: #36833a !important; box-shadow: unset !important; } /* Separador de navegación */ [data-theme="dark"] .episode-navigation { border-top-color: #3a3a52 !important; } /* Widgets del sidebar */ [data-theme="dark"] .widget { background: #252538 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .widget h3 { color: #e2e8f0 !important; } [data-theme="dark"] .series-info h4, [data-theme="dark"] .original-info h4 { color: #e2e8f0 !important; } [data-theme="dark"] .series-info .author, [data-theme="dark"] .series-info .category, [data-theme="dark"] .original-info .author { color: #94a3b8 !important; } @media (max-width: 768px) { [data-theme="dark"] .episode-details-card { background: unset!important; box-shadow: unset!important; } [data-theme="dark"] .colorful-actions { background: unset!important; box-shadow: unset!important; } } /* ======================================== SECTION 29 - HOME WIDGET CARDS (index) ======================================== */ [data-theme="dark"] .widget-card { background: #252538 !important; box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .widget-card h3 { color: #e2e8f0 !important; } [data-theme="dark"] .widget-card a { color: #e2e8f0 !important; } [data-theme="dark"] .widget-trend-item a, [data-theme="dark"] .widget-trend-link { color: #e2e8f0 !important; } [data-theme="dark"] .widget-trend-item a:hover, [data-theme="dark"] .widget-trend-link:hover { color: #81d742 !important; } [data-theme="dark"] .widget-trend-item:hover { background: rgba(255,255,255,0.06) !important; } /* ======================================== SECTION 30 - BLOG MODULE (blog-module-hero) ======================================== */ [data-theme="dark"] .blog-module-hero .blog-card { background: #252538 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .blog-module-hero .blog-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.5) !important; } [data-theme="dark"] .blog-module-hero .blog-card-title { color: #e2e8f0 !important; } [data-theme="dark"] .blog-module-hero .blog-card-excerpt { color: #94a3b8 !important; } [data-theme="dark"] .blog-module-hero .blog-card-meta { color: #64748b !important; } [data-theme="dark"] .blog-module-hero .blog-view-more-btn { background: #2d2d40 !important; color: #e2e8f0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } [data-theme="dark"] .blog-module-hero .blog-view-more-btn:hover { background: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] .blog-module-hero .blog-module-title { color: #e2e8f0 !important; } /* ======================================== SECTION 31 - BLOG PAGE (blog.php) ======================================== */ [data-theme="dark"] .blog-card { background: #252538 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .blog-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important; } [data-theme="dark"] .blog-card-title { color: #e2e8f0 !important; } [data-theme="dark"] .blog-card:hover .blog-card-title { color: var(--zikpic-dark-green) !important; } [data-theme="dark"] .blog-card-excerpt { color: #94a3b8 !important; } [data-theme="dark"] .blog-card-meta { color: #64748b !important; border-top-color: #3a3a52 !important; } /* ======================================== SECTION 32 - BLOG POST CONTENT TABLES ======================================== */ [data-theme="dark"] .content-section table { background: #252538 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .content-section table td, [data-theme="dark"] .content-section table th { border-color: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] .content-section table th { background: #2d2d40 !important; color: #c8d6e5 !important; } [data-theme="dark"] .content-section table tr:nth-child(even) { background: rgba(255,255,255,0.03) !important; } /* ======================================== SECTION 33 - GLOBAL HEADER SEARCH RESULTS ======================================== */ [data-theme="dark"] .result-info h4 { color: #e2e8f0 !important; } [data-theme="dark"] .result-author, [data-theme="dark"] .result-genre, [data-theme="dark"] .result-count { color: #94a3b8 !important; } [data-theme="dark"] .search-result-item { border-bottom-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .search-result-item:hover { background: #2d2d40 !important; } [data-theme="dark"] .search-section { border-bottom-color: rgba(255,255,255,0.07) !important; } /* Separador de episodio en móvil */ @media (max-width: 768px) { [data-theme="dark"] .episode-details-card { border-bottom-color: #3a3a52 !important; } } /* ======================================== SECTION 34 - DASHBOARD NOTIFICATIONS PAGE ======================================== */ [data-theme="dark"] .notification-card { background: #252538 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } [data-theme="dark"] .notification-card:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.45) !important; } [data-theme="dark"] .notification-card.unread { background: #2a2a40 !important; } [data-theme="dark"] .notification-content h5 { color: #e2e8f0 !important; } [data-theme="dark"] .notification-content p { color: #94a3b8 !important; } [data-theme="dark"] .notification-time { color: #64748b !important; } [data-theme="dark"] .btn-mark-read { background: #2d2d40 !important; color: #e2e8f0 !important; } [data-theme="dark"] .btn-mark-read:hover { background: #3a3a52 !important; } [data-theme="dark"] .bulk-actions { background: #252538 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .pagination-controls { background: #252538 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } [data-theme="dark"] .pagination-controls button:disabled { background: #2d2d40 !important; color: #64748b !important; } /* ======================================== SECTION 35 - MENSAJES PAGE ======================================== */ /* Ocultar imagen de fondo del banner en dark */ [data-theme="dark"] .messages-header { background-image: none !important; } /* Título y subtítulo del banner */ [data-theme="dark"] .messages-header h1 { text-shadow: none !important; } [data-theme="dark"] .messages-header p { text-shadow: none !important; } /* Textos del card de mensaje */ [data-theme="dark"] .message-from { color: #e2e8f0 !important; } [data-theme="dark"] .message-subject { color: #e2e8f0 !important; } [data-theme="dark"] .message-preview { color: #94a3b8 !important; } [data-theme="dark"] .message-date { color: #94a3b8 !important; } [data-theme="dark"] .message-card { background: #252538 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } [data-theme="dark"] .message-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.45) !important; } [data-theme="dark"] .message-card.unread { background: #2a2a40 !important; } [data-theme="dark"] .thread-message-content { background: #2d2d40 !important; border-color: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] .thread-message-me .thread-message-content { background: #27433b !important; } /* Stat cards (mensajes y favoritos) — los no activos (gris claro) */ [data-theme="dark"] .messages-stats .stat-card, [data-theme="dark"] .favorites-stats .stat-card { background: #2d2d40 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .messages-stats .stat-card .stat-label, [data-theme="dark"] .favorites-stats .stat-card .stat-label { color: #94a3b8 !important; } [data-theme="dark"] #viewMessageBody { background: none !important; } /* ======================================== SECTION 36 - FAVORITES PAGE ======================================== */ /* Ocultar imagen de fondo del banner en dark */ [data-theme="dark"] .favorites-header { background-image: none !important; } /* Título y subtítulo del banner */ [data-theme="dark"] .favorites-header h1 { text-shadow: none !important; } [data-theme="dark"] .favorites-header p { text-shadow: none !important; } [data-theme="dark"] .section-header { border-bottom-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .empty-favorites { background: #252538 !important; } [data-theme="dark"] .empty-favorites h3 { color: #94a3b8 !important; } [data-theme="dark"] .empty-favorites p { color: #64748b !important; } /* ======================================== SECTION 37 - USERCONFIG ACCORDION ======================================== */ [data-theme="dark"] .accordion-section { background: #252538 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } [data-theme="dark"] .accordion-section:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.45) !important; } [data-theme="dark"] .accordion-header { background: linear-gradient(135deg, #2d2d40 0%, #252538 100%) !important; border-bottom-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .accordion-header:hover { background: linear-gradient(135deg, #3a3a52 0%, #2d2d40 100%) !important; } [data-theme="dark"] .accordion-header.active { background: linear-gradient(135deg, #2a3a2a 0%, #252538 100%) !important; border-bottom-color: rgba(113,234,102,0.2) !important; } [data-theme="dark"] .accordion-title { color: #e2e8f0 !important; } [data-theme="dark"] .accordion-content { background: #1e1e2e !important; } [data-theme="dark"] .resend-modal-content { background: #252538 !important; } [data-theme="dark"] .resend-modal-header { border-bottom-color: #3a3a52 !important; } [data-theme="dark"] .resend-modal-btn-cancel { background: #2d2d40 !important; color: #e2e8f0 !important; } /* ======================================== SECTION 38 - DASHBOARD PANEL TITLES + USERCONFIG INNER SECTIONS ======================================== */ /* Títulos h1 en el panel creador (todas las páginas del dashboard) */ [data-theme="dark"] .creator-panel-title h1 { color: #e2e8f0 !important; } [data-theme="dark"] .creator-panel-title > div > p { color: #94a3b8 !important; } /* Contenedor principal userconfig */ [data-theme="dark"] .userconfig-container { background: #1e1e2e !important; } [data-theme="dark"] .config-section { border-bottom-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .config-section h3 { color: #e2e8f0 !important; } [data-theme="dark"] .config-section-description { color: #94a3b8 !important; } [data-theme="dark"] .user-info-card { background: #252538 !important; } [data-theme="dark"] .user-info-row { color: #e2e8f0 !important; } /* Caja de sesión persistente (fondo verde claro) */ [data-theme="dark"] .session-info-box { background: linear-gradient(135deg, #1a2e1a 0%, #1e3a1e 100%) !important; border-color: rgba(129,199,132,0.25) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } [data-theme="dark"] .session-info-box h4 { color: #81c784 !important; } [data-theme="dark"] .session-info-item { background: rgba(255,255,255,0.05) !important; border-color: rgba(129,199,132,0.1) !important; } [data-theme="dark"] .session-info-item strong { color: #94a3b8 !important; } [data-theme="dark"] .session-info-item span { color: #e2e8f0 !important; } /* Alertas de sesiones múltiples */ [data-theme="dark"] [style*="background: #fff3cd"], [data-theme="dark"] [style*="background:#fff3cd"] { background: rgba(255, 193, 7, 0.1) !important; color: #ffd54f !important; border-color: rgba(255,193,7,0.2) !important; } /* ======================================== SECTION 39 - DEVICES PANEL ======================================== */ [data-theme="dark"] .devices-panel { background: #252538 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } [data-theme="dark"] .devices-panel h3 { color: #e2e8f0 !important; } [data-theme="dark"] .device-item { background: #2d2d40 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .device-item:hover { background: #3a3a52 !important; } [data-theme="dark"] .device-item.current { background: #1a2e1a !important; border-color: rgba(129,215,66,0.35) !important; } [data-theme="dark"] .device-name { color: #e2e8f0 !important; } [data-theme="dark"] .device-details { color: #94a3b8 !important; } [data-theme="dark"] .device-modal { background: #252538 !important; } [data-theme="dark"] .device-modal-header { border-bottom-color: #3a3a52 !important; } [data-theme="dark"] .device-modal-header h3 { color: #e2e8f0 !important; } /* Etiquetas de subsección dentro de acordeones (userconfig) */ [data-theme="dark"] .display-pref-label { color: #e2e8f0 !important; } [data-theme="dark"] .display-pref-desc { color: #94a3b8 !important; } /* ======================================== SECTION 40 - PROFILE EDIT PAGE ======================================== */ [data-theme="dark"] .profile-edit-container { background: #1e1e2e !important; } [data-theme="dark"] .modal-cropper { background: #252538 !important; } [data-theme="dark"] .modal-cropper-header, [data-theme="dark"] .modal-cropper-footer { background: #2d2d40 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .modal-cropper-header span { color: #e2e8f0 !important; } [data-theme="dark"] .modal-cropper-body { background: #252538 !important; } [data-theme="dark"] .social-input-prefix { background: #2d2d40 !important; color: #94a3b8 !important; border-right-color: #3a3a52 !important; } [data-theme="dark"] .social-input-field { background: #252538 !important; } [data-theme="dark"] .form-control:focus { background-color: #2d2d40 !important; } [data-theme="dark"] .profile-security-card { background: linear-gradient(135deg, #252538 0%, #202032 100%) !important; border-color: #3a3a52 !important; box-shadow: 0 8px 24px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.03) !important; } [data-theme="dark"] .profile-security-title { color: #e2e8f0 !important; } [data-theme="dark"] .profile-security-subtitle { color: #94a3b8 !important; } [data-theme="dark"] .security-badge.safe { background: rgba(34, 197, 94, 0.14) !important; color: #86efac !important; } [data-theme="dark"] .security-badge.warning { background: rgba(245, 158, 11, 0.16) !important; color: #fdba74 !important; } [data-theme="dark"] .security-fact { background: #2b2b3f !important; border-color: #3a3a52 !important; } [data-theme="dark"] .security-fact strong { color: #e2e8f0 !important; } [data-theme="dark"] .security-fact span { color: #94a3b8 !important; } [data-theme="dark"] .password-modal-note { background: rgba(129, 215, 66, 0.08) !important; border-color: rgba(129, 215, 66, 0.22) !important; color: #cbd5e1 !important; } [data-theme="dark"] .password-modal-note strong { color: #e2e8f0 !important; } [data-theme="dark"] .password-step-card { background: #2b2b3f !important; border-color: #3a3a52 !important; } [data-theme="dark"] .password-step-card h6 { color: #e2e8f0 !important; } [data-theme="dark"] .password-step-card p { color: #94a3b8 !important; } [data-theme="dark"] .password-provider-chip { background: #2d2d40 !important; color: #cbd5e1 !important; border: 1px solid #3a3a52 !important; } [data-theme="dark"] .btn-password-primary { color: #1e1e2e !important; box-shadow: 0 8px 18px rgba(58, 196, 3, 0.2) !important; } [data-theme="dark"] .btn-password-primary:hover, [data-theme="dark"] .btn-password-primary:focus { color: #16161e !important; box-shadow: 0 10px 22px rgba(58, 196, 3, 0.28) !important; } [data-theme="dark"] .btn-password-secondary { background: #2b2b3f !important; border-color: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] .btn-password-secondary:hover, [data-theme="dark"] .btn-password-secondary:focus { background: #34344b !important; border-color: #4a4a65 !important; color: #ffffff !important; } [data-theme="dark"] #passwordSecurityModal .modal-content { background: #252538 !important; border: 1px solid #3a3a52 !important; box-shadow: 0 24px 60px rgba(0,0,0,0.55) !important; } [data-theme="dark"] #passwordSecurityModal .modal-header, [data-theme="dark"] #passwordSecurityModal .modal-footer { background: #252538 !important; border-color: #3a3a52 !important; } [data-theme="dark"] #passwordSecurityModal .modal-title, [data-theme="dark"] #passwordModalTitle { color: #e2e8f0 !important; } [data-theme="dark"] #passwordModalSubtitle { color: #94a3b8 !important; } [data-theme="dark"] #passwordSecurityModal .btn-close { filter: invert(1) grayscale(1) brightness(1.4); } [data-theme="dark"] #passwordSecurityModal .form-label, [data-theme="dark"] #passwordSecurityModal .form-text, [data-theme="dark"] #passwordSecurityModal .text-muted { color: #94a3b8 !important; } [data-theme="dark"] #passwordSecurityModal .form-label { color: #e2e8f0 !important; } /* ======================================== SECTION 41 - INFO BOXES AZULES (inline #e3f2fd / #f0f8ff) ======================================== */ /* "Sesiones persistentes" box en userconfig */ [data-theme="dark"] [style*="background: #e3f2fd"] { background: rgba(33,150,243,0.08) !important; } [data-theme="dark"] [style*="background: #e3f2fd"] strong, [data-theme="dark"] [style*="background: #e3f2fd"] a { color: #60a5fa !important; } [data-theme="dark"] [style*="background: #e3f2fd"] p, [data-theme="dark"] [style*="background: #e3f2fd"] span { color: #94a3b8 !important; } /* "Información de Seguridad" box en devices-panel */ [data-theme="dark"] [style*="background: #f0f8ff"] { background: rgba(33,150,243,0.08) !important; } [data-theme="dark"] [style*="background: #f0f8ff"] strong { color: #e2e8f0 !important; } [data-theme="dark"] [style*="background: #f0f8ff"] li { color: #94a3b8 !important; } /* Badge reader (badge-reader usa #e3f2fd como clase) */ [data-theme="dark"] .badge-reader { background: rgba(33,150,243,0.12) !important; color: #60a5fa !important; border-color: rgba(33,150,243,0.25) !important; } [data-theme="dark"] .badge-creator { background: rgba(123,31,162,0.15) !important; color: #ce93d8 !important; border-color: rgba(123,31,162,0.3) !important; } /* ============================================================ */ /* SECCIÓN 42 — Dashboard index: modales, cards, badges, boxes */ /* ============================================================ */ /* Degradado del banner de series cards: blanco → dark en dark mode */ [data-theme="dark"] .mini-image-with-gradient::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 45%; background: linear-gradient(transparent, #252538); pointer-events: none; border-radius: 0 0 0 0; } /* --- Modales de creación/edición (fondo blanco → dark) --- */ [data-theme="dark"] .modal-content { background: #252538 !important; color: #e2e8f0 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .modal-header { background: #252538 !important; /* border-bottom: 1px solid rgba(255,255,255,0.07) !important; */ } [data-theme="dark"] .modal-body { background: #252538 !important; } [data-theme="dark"] .modal-footer { background: #252538 !important; border-top: 1px solid rgba(255,255,255,0.07) !important; } [data-theme="dark"] .modal-title { color: inherit !important; } [data-theme="dark"] .modal-content .form-label, [data-theme="dark"] .modal-content .form-group label, [data-theme="dark"] .modal-content label { color: #e2e8f0 !important; } [data-theme="dark"] .modal-content .genre-option, [data-theme="dark"] .modal-content .comic-genre-option { color: #cbd5e1 !important; } [data-theme="dark"] .modal-content small, [data-theme="dark"] .modal-content .text-muted { color: #94a3b8 !important; } [data-theme="dark"] .modal-content [style*="color: #6c757d"], [data-theme="dark"] .modal-content [style*="color:#6c757d"] { color: #94a3b8 !important; } [data-theme="dark"] .modal-content p, [data-theme="dark"] .modal-content > span:not(.badge){ color: #cbd5e1 !important; } [data-theme="dark"] .modal-content .form-control, [data-theme="dark"] .modal-content .form-select, [data-theme="dark"] .modal-content select, [data-theme="dark"] .modal-content textarea, [data-theme="dark"] .modal-content input[type="text"], [data-theme="dark"] .modal-content input[type="number"], [data-theme="dark"] .modal-content input[type="url"] { background: #2d2d40 !important; color: #e2e8f0 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .modal-content .form-control::placeholder, [data-theme="dark"] .modal-content textarea::placeholder { color: #64748b !important; } /* Inputs file del modal de subida (Imágenes, Videos, Procesos) */ [data-theme="dark"] #uploadGalleryImageModal input[type="file"].form-control { background: #2a2a3c !important; color: #e2e8f0 !important; border-color: #3a3a52 !important; } [data-theme="dark"] #uploadGalleryImageModal input[type="file"].form-control::file-selector-button { background: #3a3a52 !important; color: #e2e8f0 !important; border: 0 !important; border-right: 1px solid #4a4a65 !important; margin-right: 0.75rem; } [data-theme="dark"] #uploadGalleryImageModal input[type="file"].form-control:hover::file-selector-button { background: #4a4a65 !important; } /* Fallback para motores WebKit antiguos */ [data-theme="dark"] #uploadGalleryImageModal input[type="file"].form-control::-webkit-file-upload-button { background: #3a3a52 !important; color: #e2e8f0 !important; border: 0 !important; border-right: 1px solid #4a4a65 !important; margin-right: 0.75rem; } [data-theme="dark"] .modal-content .close-modal { background: rgba(255,255,255,0.1) !important; color: #e2e8f0 !important; } /* --- Alertas dentro de modales --- */ [data-theme="dark"] .alert-danger { background-color: rgba(220,53,69,0.12) !important; color: #f1aeb5 !important; border-color: rgba(220,53,69,0.3) !important; } [data-theme="dark"] .alert-warning { background-color: rgba(255,193,7,0.12) !important; color: #ffd54f !important; border-color: rgba(255,193,7,0.3) !important; } [data-theme="dark"] .alert-info { background-color: rgba(13,202,240,0.1) !important; color: #67e8f9 !important; border-color: rgba(13,202,240,0.25) !important; } /* Aviso de orden manual en manage-series.php */ [data-theme="dark"] #mainOrderHint { background: rgba(13, 202, 240, 0.14) !important; border-color: rgba(13, 202, 240, 0.6) !important; color: #e2e8f0 !important; } [data-theme="dark"] #mainOrderHint i { color: #7dd3fc !important; text-shadow: 0 0 8px rgba(125, 211, 252, 0.35); } [data-theme="dark"] #mainOrderHint .order-hint-main { color: #e2e8f0 !important; } [data-theme="dark"] #mainOrderHint .order-hint-sub { color: #cbd5e1 !important; } /* Nota de "Procesos" en modal de galería */ [data-theme="dark"] #uploadGalleryImageModal #process-panel .alert.alert-secondary { background: rgba(59, 130, 246, 0.12) !important; color: #dbeafe !important; border-color: rgba(59, 130, 246, 0.35) !important; } [data-theme="dark"] #uploadGalleryImageModal #process-panel .alert.alert-secondary i { color: #93c5fd !important; } /* --- Botones sutiles (.btn-subtle) en cards del dashboard --- */ [data-theme="dark"] .btn-subtle { background: #2d2d40 !important; border-color: #3a3a52 !important; color: #94a3b8 !important; } [data-theme="dark"] .btn-subtle.gestionar:hover { background: #1e2d3d !important; border-color: #3182ce !important; color: #60a5fa !important; } [data-theme="dark"] .btn-subtle.colecciones:hover { background: #1e2d3d !important; border-color: #31ce52 !important; color: #6dc34b !important; } [data-theme="dark"] .btn-subtle.editar:hover { background: #2a2515 !important; border-color: #d69e2e !important; color: #f6d860 !important; } [data-theme="dark"] .btn-subtle.imagen:hover { background: #252538 !important; border-color: #6b7280 !important; color: #e2e8f0 !important; } [data-theme="dark"] .btn-subtle.revisar:hover { background: #1a2e24 !important; border-color: #38a169 !important; color: #68d391 !important; } [data-theme="dark"] .btn-subtle.ver:hover { background: #0d2535 !important; border-color: #0891b2 !important; color: #38bdf8 !important; } [data-theme="dark"] .btn-subtle.comentarios:hover { background: #1f2340 !important; border-color: #6366f1 !important; color: #a5b4fc !important; } [data-theme="dark"] .btn-subtle.eliminar:hover { background: #2d1515 !important; border-color: #e53e3e !important; color: #fc8181 !important; } /* Refuerzo para botones-enlace () del dashboard */ [data-theme="dark"] .btn-tooltip-wrapper a.btn-subtle.imagen:hover { background: #252538 !important; border-color: #6b7280 !important; color: #e2e8f0 !important; } [data-theme="dark"] .btn-tooltip-wrapper a.btn-subtle.comentarios:hover { background: #1f2340 !important; border-color: #6366f1 !important; color: #a5b4fc !important; } /* --- Portada por defecto (sin imagen) --- */ [data-theme="dark"] .series-cover { background: linear-gradient(135deg, #2d2d40 0%, #252538 100%) !important; } /* --- Box estado: "Serie aprobada y publicada" (#f0fff4) --- */ [data-theme="dark"] [style*="background: #f0fff4"], [data-theme="dark"] [style*="background:#f0fff4"] { background: rgba(39,174,96,0.1) !important; border-color: rgba(39,174,96,0.25) !important; } [data-theme="dark"] [style*="background: #f0fff4"] div, [data-theme="dark"] [style*="background: #f0fff4"] strong, [data-theme="dark"] [style*="background: #f0fff4"] small, [data-theme="dark"] [style*="background:#f0fff4"] div, [data-theme="dark"] [style*="background:#f0fff4"] strong, [data-theme="dark"] [style*="background:#f0fff4"] small { color: #68d391 !important; } /* --- Box estado: "pendiente/enviada" (#fff3cd) — ya cubierto en sección 38 pero reforzamos --- */ [data-theme="dark"] [style*="background: #fff3cd"] div, [data-theme="dark"] [style*="background: #fff3cd"] strong, [data-theme="dark"] [style*="background: #fff3cd"] small { color: #ffd54f !important; } /* --- Box estado: rechazada (#f8d7da) --- */ [data-theme="dark"] [style*="background-color: #f8d7da"], [data-theme="dark"] [style*="background: #f8d7da"] { background: rgba(220,53,69,0.1) !important; border-color: rgba(220,53,69,0.25) !important; color: #f1aeb5 !important; } /* --- Box estado: advertencia amarilla (#fff3cd con background-color) --- */ [data-theme="dark"] [style*="background-color: #fff3cd"] { background-color: rgba(255,193,7,0.1) !important; border-color: rgba(255,193,7,0.25) !important; color: #ffd54f !important; } /* --- Control de Visibilidad: opciones de privacidad (.privacy-option) --- */ [data-theme="dark"] .privacy-option { background: #2d2d40 !important; border-color: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] .privacy-option span { color: inherit !important; } [data-theme="dark"] .privacy-info { color: #60a5fa !important; } /* ============================================================ */ /* SECCIÓN 43 — Página about.php (nosotros) */ /* ============================================================ */ /* --- Hero section (fondo blanco) --- */ [data-theme="dark"] .hero-section h1 { color: #e2e8f0 !important; } [data-theme="dark"] .hero-section .subtitle { color: #94a3b8 !important; } [data-theme="dark"] .hero-section { background: unset !important; } /* --- Highlight box (#f8fdf4 verde muy claro) --- */ [data-theme="dark"] .highlight-box { background: rgba(129,215,66,0.07) !important; border-left-color: var(--zikpic-primary, #81d742) !important; } [data-theme="dark"] .highlight-box p, [data-theme="dark"] .highlight-box strong { color: #cbd5e1 !important; } /* --- Feature cards (fondo blanco/gris claro) --- */ [data-theme="dark"] .feature-card { background: linear-gradient(135deg, #2d2d40 0%, #252538 100%) !important; } [data-theme="dark"] .feature-title { color: #e2e8f0 !important; } [data-theme="dark"] .feature-description { color: #94a3b8 !important; } /* --- Círculos de icono en feature cards (.box-zp-feature-bg) --- */ [data-theme="dark"] .box-zp-feature-bg { background: #3a3a52 !important; } /* --- Cards Zik/Pic (gradiente con #ececec abajo) --- */ [data-theme="dark"] .box-zikpic-z { background: linear-gradient(0deg, #2d2d40 0%, rgba(45,45,64,0) 60%) !important; } /* --- Tarjetas divisiones ZikStart / ZikPro (inline background: white) --- */ [data-theme="dark"] .about-main [style*="background: white"] { background: #252538 !important; } [data-theme="dark"] .about-main [style*="background: white"] h3[style*="color: #19547b"] { color: #60a5fa !important; } [data-theme="dark"] .about-main [style*="background: white"] li, [data-theme="dark"] .about-main [style*="background: white"] p { color: #94a3b8 !important; } /* --- Botón CTA (fondo blanco con texto verde) --- */ [data-theme="dark"] .cta-btn { background: rgba(255,255,255,0.1) !important; color: white !important; } [data-theme="dark"] .cta-btn:hover { background: rgba(255,255,255,0.2) !important; } /* ============================================================ */ /* SECCIÓN 44 — manage-series-images.php */ /* ============================================================ */ /* --- Tarjetas de imagen (Portada / Banner / Miniatura) --- */ [data-theme="dark"] .image-card { background: #252538 !important; box-shadow: 0 4px 24px rgba(0,0,0,0.35) !important; } [data-theme="dark"] .image-card .img-label { color: #e2e8f0 !important; } [data-theme="dark"] .image-card .img-size { color: #94a3b8 !important; } [data-theme="dark"] .image-card .img-desc { color: #94a3b8 !important; } /* --- Zona de subida (upload-zone) --- */ [data-theme="dark"] .upload-zone { background: #2d2d40 !important; border-color: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] .upload-zone:hover, [data-theme="dark"] .upload-zone.drag-over { background: rgba(129,215,66,0.08) !important; border-color: var(--zikpic-green, #81d742) !important; } [data-theme="dark"] .upload-zone i { color: #94a3b8 !important; } /* --- Sección colores y sus tarjetas internas --- */ [data-theme="dark"] .color-section { background: #1e1e2e !important; } [data-theme="dark"] .color-card, [data-theme="dark"] .color-controls { background: #252538 !important; box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important; } /* --- Contenedor vista previa real --- */ [data-theme="dark"] .real-preview-container { background: #1e1e2e !important; } /* --- Títulos y etiquetas de sección --- */ [data-theme="dark"] .preview-section-title { color: #e2e8f0 !important; border-bottom-color: #3a3a52 !important; } [data-theme="dark"] .color-section .form-group label { color: #e2e8f0 !important; } [data-theme="dark"] .color-section h2, [data-theme="dark"] .color-section h3, [data-theme="dark"] .color-section h4, [data-theme="dark"] .color-section p { color: #cbd5e1 !important; } /* --- Inputs de texto de color --- */ [data-theme="dark"] .color-text { background: #2d2d40 !important; color: #e2e8f0 !important; border-color: #3a3a52 !important; } /* ============================================================ */ /* SECCIÓN 45 — edit-comic-episode.php */ /* ============================================================ */ /* --- Upload zone: textos (fondo ya cubierto en sección 44) --- */ [data-theme="dark"] .upload-zone h3 { color: #e2e8f0 !important; } [data-theme="dark"] .upload-zone p { color: #94a3b8 !important; } [data-theme="dark"] .upload-zone small, [data-theme="dark"] .upload-zone .text-muted { color: #94a3b8 !important; } [data-theme="dark"] .upload-zone small strong { color: #b8c8e0 !important; } /* --- Barra de acción (Páginas del Episodio) --- */ [data-theme="dark"] .action-buttons { background: #252538 !important; box-shadow: none !important; } [data-theme="dark"] .action-buttons h5 { color: #e2e8f0 !important; } [data-theme="dark"] .action-buttons .text-muted { color: #94a3b8 !important; } [data-theme="dark"] .action-buttons .form-check-label { color: #e2e8f0 !important; } [data-theme="dark"] .upload-progress { background: rgba(30,30,46,0.95) !important; color: #e2e8f0 !important; } /* --- Progreso de subida (manage-series.php: #uploadProgress) --- */ [data-theme="dark"] #uploadProgress { background-color: #1e1e2e !important; border: 1px solid #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] #uploadProgress * { color: inherit; } [data-theme="dark"] #uploadProgress .progress { background-color: #2d2d40 !important; border: 1px solid #3a3a52; } [data-theme="dark"] #uploadProgress .progress-bar { background: linear-gradient(90deg, #6bb536 0%, #4a9a2a 50%, #6bb536 100%) !important; color: #f8fafc !important; } [data-theme="dark"] #uploadProgress #progressText { color: #cbd5e1 !important; } [data-theme="dark"] #uploadProgress .motivational-msg { color: #a7f3d0 !important; } [data-theme="dark"] #uploadProgress .text-warning { color: #fde68a !important; background-color: rgba(245, 158, 11, 0.12) !important; border-left-color: #f59e0b !important; } /* --- Sección de páginas --- */ [data-theme="dark"] .pages-section { background: #252538 !important; } [data-theme="dark"] .pages-section h2 { color: #e2e8f0 !important; } [data-theme="dark"] .pages-preview-section { border-top-color: #3a3a52 !important; } [data-theme="dark"] .pages-preview-section h6 { color: #e2e8f0 !important; } /* --- Tarjeta de página individual (.page-card) --- */ [data-theme="dark"] .page-card { background: #2d2d40 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .page-card.sortable-ghost { background: rgba(13,110,253,0.1) !important; } [data-theme="dark"] .page-thumb { background: #1e1e2e !important; } [data-theme="dark"] .page-meta { background: #1e1e2e !important; border-top-color: #3a3a52 !important; } [data-theme="dark"] .page-name { color: #cbd5e1 !important; } [data-theme="dark"] .page-date { color: #64748b !important; } /* --- Elemento de página en vista compacta (.page-item) --- */ [data-theme="dark"] .page-item { background: #2d2d40 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .page-item:hover { background: #3a3a52 !important; } [data-theme="dark"] .page-item.sortable-chosen { background: rgba(39,174,96,0.12) !important; border-color: var(--zikpic-green, #81d742) !important; } /* --- Vista previa doble página --- */ [data-theme="dark"] .preview-double-page { background: #252538 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .preview-double-page.is-cover { background: rgba(13,110,253,0.08) !important; } /* --- Handle de arrastre --- */ [data-theme="dark"] .drag-handle { background: rgba(45,45,64,0.9) !important; color: #94a3b8 !important; } [data-theme="dark"] .drag-handle:hover { background: rgba(129,215,66,0.15) !important; } /* --- Empty state --- */ [data-theme="dark"] .empty-state { color: #94a3b8 !important; } [data-theme="dark"] .empty-state h4 { color: #cbd5e1 !important; } [data-theme="dark"] .empty-state i { color: #3a3a52 !important; } [data-theme="dark"] .form-text { color: #e2e8f0 !important; } [data-theme="dark"] .editor-content-section { background: #2d2d40 !important; } /* --- Sección de composer de novelas --- */ [data-theme="dark"] .editor-form-footer { background: #2d2d40; border-top: 1px solid #3a3a52; } [data-theme="dark"] .editor-word-count { background: #2d2d40 !important; } [data-theme="dark"] .editor-form-footer.is-floating { background: rgb(45 45 64); } [data-theme="dark"] .ck.ck-dialog{ background: #2d2d40 !important; border: 1px solid #2d2d40 !important; } [data-theme="dark"] mark:not([class]) { background: var(--mark-bg); color: var(--mark-text); } [data-theme="dark"] .ck-reset_all :not(.ck-reset_all-excluded *), .ck.ck-reset_all { color: unset!important; } [data-theme="dark"] .ck.ck-labeled-field-view>.ck.ck-labeled-field-view__input-wrapper>.ck.ck-label { background: #2d2d40; } /* ============================================== SECCIÓN 46 — Modal: Reader Config Card + Créditos Tom Select (dashboard/index.php — modales crear/editar serie) ============================================== */ /* Tarjeta "Configuración del Lector" dentro de modales */ [data-theme="dark"] .modal-content .card, [data-theme="dark"] .modal-content .card-body { background-color: #2d2d40 !important; border-color: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] .modal-content .card .form-label, [data-theme="dark"] .modal-content .card label { color: #e2e8f0 !important; } [data-theme="dark"] .modal-content .card .form-select, [data-theme="dark"] .modal-content .card .form-control, [data-theme="dark"] .modal-content .card input, [data-theme="dark"] .modal-content .card select { background-color: #252538 !important; color: #e2e8f0 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .modal-content .card small, [data-theme="dark"] .modal-content .card .text-muted { color: #94a3b8 !important; } /* Botones de toggle (dirección, página doble, zoom, swipe, tema, 3D) dentro de modal */ [data-theme="dark"] .modal-content .card .btn-group .btn, [data-theme="dark"] .modal-content .card .btn-outline-secondary { color: #e2e8f0 !important; border-color: #3a3a52 !important; background-color: #252538 !important; } [data-theme="dark"] .modal-content .card .btn-group .btn.active, [data-theme="dark"] .modal-content .card .btn-group .btn:active { background-color: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] .policy-edit-notice { border: 1px solid #35729d; background: #264b65; color: #e2e8f0; } [data-theme="dark"] .policy-edit-notice .btn-link { color: #d0d6df; } /* Tom Select (inputs de créditos / autor) dentro de modales */ [data-theme="dark"] .modal-content .ts-wrapper .ts-control, [data-theme="dark"] .modal-content .ts-wrapper .ts-control input { background-color: #252538 !important; color: #e2e8f0 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .modal-content .ts-wrapper .ts-control .item { color: #e2e8f0 !important; background-color: #3a3a52 !important; } [data-theme="dark"] .modal-content .ts-wrapper .ts-dropdown { background-color: #2d2d40 !important; border-color: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] .modal-content .ts-wrapper .ts-dropdown .option, [data-theme="dark"] .modal-content .ts-wrapper .ts-dropdown .optgroup-header { color: #e2e8f0 !important; } [data-theme="dark"] .modal-content .ts-wrapper .ts-dropdown .option:hover, [data-theme="dark"] .modal-content .ts-wrapper .ts-dropdown .active { background-color: #3a3a52 !important; color: #e2e8f0 !important; } /* Botón quitar crédito */ [data-theme="dark"] .modal-content .remove-credito-btn { background: #252538 !important; border-color: #e74c3c !important; color: #e74c3c !important; } [data-theme="dark"] .modal-content .remove-credito-btn:hover { background: #3a3a52 !important; } /* Tom Select fuera de modal (manage-series.php standalone) */ [data-theme="dark"] .creditos-block .ts-wrapper .ts-control, [data-theme="dark"] .creditos-block .ts-wrapper .ts-control input { background-color: #252538 !important; color: #e2e8f0 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .creditos-block .ts-wrapper .ts-control .item { color: #e2e8f0 !important; background-color: #3a3a52 !important; } [data-theme="dark"] .creditos-block .ts-wrapper .ts-dropdown { background-color: #2d2d40 !important; border-color: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] .creditos-block .ts-wrapper .ts-dropdown .option { color: #e2e8f0 !important; } [data-theme="dark"] .creditos-block .ts-wrapper .ts-dropdown .option:hover, [data-theme="dark"] .creditos-block .ts-wrapper .ts-dropdown .active { background-color: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] .creditos-block .remove-credito-btn { background: #252538 !important; color: #e74c3c !important; } /* Tarjetas de tiras comicas (manage-series.php) */ [data-theme="dark"] .strip-card { background: #252538 !important; border-color: #3a3a52 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important; } [data-theme="dark"] .strip-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important; } [data-theme="dark"] .strip-card-header { background: #252538 !important; } [data-theme="dark"] .strip-card-header:hover { background: #2d2d40 !important; } [data-theme="dark"] .strip-card-header strong { color: #e2e8f0 !important; } [data-theme="dark"] .strip-card-header small, [data-theme="dark"] .strip-card-header .text-muted { color: #94a3b8 !important; } [data-theme="dark"] .strip-cover-placeholder { background: #2d2d40 !important; color: #94a3b8 !important; } [data-theme="dark"] .strip-chevron { color: #94a3b8 !important; } [data-theme="dark"] .strip-panels-container { background: #1e1e2e !important; border-top-color: #3a3a52 !important; } [data-theme="dark"] .strip-panel-thumb { border-color: transparent !important; } [data-theme="dark"] .strip-panel-thumb:hover { border-color: var(--zikpic-green, #81d742) !important; } [data-theme="dark"] .strip-panel-thumb.dragging { border-color: #60a5fa !important; } [data-theme="dark"] .strip-panel-thumb.drag-over { border-color: var(--zikpic-green, #81d742) !important; } [data-theme="dark"] .panel-order-badge { background: rgba(15, 23, 42, 0.82) !important; color: #e2e8f0 !important; } [data-theme="dark"] .strip-panels-footer small, [data-theme="dark"] .strip-panels-footer .text-muted { color: #94a3b8 !important; } [data-theme="dark"] .strip-card .btn-outline-primary { color: #93c5fd !important; border-color: #2563eb !important; background: transparent !important; } [data-theme="dark"] .strip-card .btn-outline-primary:hover { color: #e2e8f0 !important; background: rgba(37, 99, 235, 0.2) !important; } [data-theme="dark"] .strip-card .btn-outline-secondary { color: #cbd5e1 !important; border-color: #475569 !important; background: transparent !important; } [data-theme="dark"] .strip-card .btn-outline-secondary:hover { color: #e2e8f0 !important; background: rgba(71, 85, 105, 0.25) !important; } [data-theme="dark"] .strip-card .btn-outline-danger { color: #fca5a5 !important; border-color: #ef4444 !important; background: transparent !important; } [data-theme="dark"] .strip-card .btn-outline-danger:hover { color: #fee2e2 !important; background: rgba(239, 68, 68, 0.2) !important; } [data-theme="dark"] .strip-card .btn-success { background: linear-gradient(90deg, #65a30d 0%, #16a34a 100%) !important; border-color: #65a30d !important; color: #f8fafc !important; } [data-theme="dark"] .strip-card .btn-success:hover { filter: brightness(1.08); } /* ============================================== SECCIÓN 47 — Modal Guía del Creador (dashboard/index.php — .guide-modal) ============================================== */ [data-theme="dark"] .guide-modal-content { background: #1e1e2e !important; box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important; } /* Botón cerrar */ [data-theme="dark"] .guide-close { background: #2d2d40 !important; color: #e2e8f0 !important; } [data-theme="dark"] .guide-close:hover { background: #3a3a52 !important; } /* Barra de tabs */ [data-theme="dark"] .guide-tabs { background: #252538 !important; border-bottom-color: #3a3a52 !important; } [data-theme="dark"] .guide-tab { color: #94a3b8 !important; } [data-theme="dark"] .guide-tab:hover { background: rgba(58,58,82,0.4) !important; color: #e2e8f0 !important; } [data-theme="dark"] .guide-tab.active { color: #e2e8f0 !important; background: #1e1e2e !important; } /* Cuerpo del contenido */ [data-theme="dark"] .guide-content { background: #1e1e2e !important; } [data-theme="dark"] .guide-tab-content h3 { color: #e2e8f0 !important; } [data-theme="dark"] .guide-step { border-bottom-color: #3a3a52 !important; } [data-theme="dark"] .step-content h4 { color: #e2e8f0 !important; } [data-theme="dark"] .step-content p, [data-theme="dark"] .step-content ul, [data-theme="dark"] .step-content li { color: #94a3b8 !important; } /* Nota informativa */ [data-theme="dark"] .guide-note { background: rgba(33,150,243,0.1) !important; border-left-color: #2196F3 !important; } [data-theme="dark"] .guide-note p, [data-theme="dark"] .guide-note span { color: #94a3b8 !important; } [data-theme="dark"] .guide-note strong { color: #90caf9 !important; } /* Tips */ [data-theme="dark"] .guide-tips { background: rgba(230,81,0,0.12) !important; } [data-theme="dark"] .guide-tips h4 { color: #ffb74d !important; } [data-theme="dark"] .guide-tips li { color: #94a3b8 !important; } /* Footer */ [data-theme="dark"] .guide-footer { background: #252538 !important; color: #94a3b8 !important; border-top: 1px solid #3a3a52 !important; } /* ============================================== SECCIÓN 48 — Imágenes duales dark/light (SeriesRenderer.php créditos + series.css episodios) ============================================== */ /* Manga Team logo: mostrar versión correcta según tema */ .credits-team-logo--dark { display: none; } [data-theme="dark"] .credits-team-logo--light { display: none !important; } [data-theme="dark"] .credits-team-logo--dark { display: inline-block !important; } /* Imagen episodios (zp-epi-mirada): misma versión para todos los temas */ [data-theme="dark"] .chapters-img-subtitle { background-image: linear-gradient(rgb(30 30 46 / 36%), rgb(30 30 46 / 36%)), url(/assets/img/zp-epi-mirada-dark.webp) !important; background-blend-mode: hard-light; } [data-theme="dark"] .chapters-img-subtitle-extras { background-image: linear-gradient(rgb(30 30 46 / 36%), rgb(30 30 46 / 36%)), url(/assets/img/zp-epi-mirada-extras.webp) !important; background-blend-mode: hard-light; } /* Imagen episodios (zp-epi-mirada): versión light */ [data-theme="dark"] .chapter-item:hover { background: #303949 !important; } /* ============================================== SECCIÓN 49 — social.php: modal "Nueva publicación" (.composer-modal y .post-modal) ============================================== */ /* Contenedor principal */ [data-theme="dark"] .composer-modal { background: #252538 !important; box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important; } /* Header */ [data-theme="dark"] .composer-modal-header { border-bottom-color: #3a3a52 !important; } [data-theme="dark"] .composer-modal-title { color: #e2e8f0 !important; } [data-theme="dark"] .composer-modal-close { color: #94a3b8 !important; } [data-theme="dark"] .composer-modal-close:hover { background: #3a3a52 !important; color: #e2e8f0 !important; } /* Body / textarea */ [data-theme="dark"] .composer-modal-body { background: #252538 !important; } [data-theme="dark"] .modal-composer-textarea { /* background: #2d2d40 !important; */ color: #e2e8f0 !important; } [data-theme="dark"] .modal-composer-textarea::placeholder { color: #64748b !important; } /* Footer */ [data-theme="dark"] .composer-modal-footer { border-top-color: #3a3a52 !important; background: #252538 !important; } /* Preview serie adjunta */ [data-theme="dark"] .modal-series-preview-card { background: #2d2d40 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .modal-series-preview-title { color: #e2e8f0 !important; } [data-theme="dark"] .modal-series-preview-description { color: #94a3b8 !important; } [data-theme="dark"] .modal-series-preview-author { color: #64748b !important; } [data-theme="dark"] .modal-image-preview img { border-color: #3a3a52 !important; } /* post-modal-container (modal de lectura de post) */ [data-theme="dark"] .post-modal-container { background: #252538 !important; } [data-theme="dark"] .post-modal-header { border-bottom-color: #3a3a52 !important; } [data-theme="dark"] .post-modal-user-details h4 { color: #e2e8f0 !important; } [data-theme="dark"] .post-modal-user-details span { color: #94a3b8 !important; } [data-theme="dark"] .post-modal-close:hover { background: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] .post-modal-content { color: #e2e8f0 !important; } [data-theme="dark"] .post-modal-actions, [data-theme="dark"] .post-modal-footer { border-color: #3a3a52 !important; background: #252538 !important; } [data-theme="dark"] .modal-comments-section .comment-composer, .comment-composer { background: none !important; } @media (max-width: 768px){ [data-theme="dark"] .modal-comments-section .comment-composer, .comment-composer { border-top-color: #41454b !important; background: none !important; } } [data-theme="dark"] .modal-image-controls { background: none !important; } [data-theme="dark"] .modal-control-btn { background: #252538 !important; border: 1px solid #686885 !important; color: #e2e8f0 !important; } [data-theme="dark"] .modal-atmos-btn-mobile { background: #252538 !important; border: 1px solid #686885 !important; color: #e2e8f0 !important; } [data-theme="dark"] .compact-author-name { color: unset !important; } [data-theme="dark"] .compact-post-content { color: unset !important; } [data-theme="dark"] .post-report-modal-header h3 { color: #e2e8f0 !important; } [data-theme="dark"] .post-report-description { color: #e2e8f0 !important; } [data-theme="dark"] .post-report-cancel-btn { background: unset !important; color: #e2e8f0 !important; } [data-theme="dark"] .post-report-cancel-btn:hover { background: #2f2f43 !important; } [data-theme="dark"] .atmos-section-title { color: #e2e8f0; } [data-theme="dark"] .atmos-explorer-item:hover{ background:#3a3d58; } [data-theme="dark"] .atmos-explorer-item.active{ color:#ffffff; } [data-theme="dark"] .atmos-column-title { color: #c7cad8; background: #26273b; border-bottom: 1px solid rgba(255, 255, 255, .06); } [data-theme="dark"] .atmos-column { background: #2f3047; border: 1px solid rgb(152 156 178 / 30%); } [data-theme="dark"] #atmosSearch{ border:1px solid rgba(255,255,255,.08); color:#ffffff; background:#30324a; } [data-theme="dark"] .atmos-explorer-item{ color:#cfd3e6; } [data-theme="dark"] .atmos-divider{ border-top:1px solid rgba(255,255,255,.08); } [data-theme="dark"] .atmos-details:hover { color: #94a3b8; } [data-theme="dark"] .atmos-details-panel{ background:#23273d; border:1px solid rgba(255,255,255,.08); color:#d8d8d8; } [data-theme="dark"] .atmos-resource-details h6{ color:#fff; } [data-theme="dark"] .atmos-resource-details strong{ color:#fff; } [data-theme="dark"] .atmos-resource-details hr{ border-color:rgba(255,255,255,.08); } [data-theme="dark"] .za-guide-card{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); } [data-theme="dark"] #atmosSearch:focus{ background:#343651; } [data-theme="dark"] .atmos-empty-state .title{ color:#dfe5f7; } [data-theme="dark"] .atmos-library-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); } [data-theme="dark"] .atmos-column>div:last-child::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); } [data-theme="dark"] .atmos-column>div:last-child::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.32); } /* ============================================== SECCIÓN 50 — dashboard/crear-evento.php ============================================== */ /* Contenedor principal */ [data-theme="dark"] .create-event-container { background: #1e1e2e !important; } /* Cabecera del formulario */ [data-theme="dark"] .form-header h1 { color: #e2e8f0 !important; } [data-theme="dark"] .form-header p { color: #94a3b8 !important; } /* Etiquetas y ayudas */ [data-theme="dark"] .form-label { color: #e2e8f0 !important; } [data-theme="dark"] .form-help { color: #64748b !important; } /* Inputs, textarea, select */ [data-theme="dark"] .form-input, [data-theme="dark"] .form-textarea, [data-theme="dark"] .form-select { background: #2d2d40 !important; border-color: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] .form-input:focus, [data-theme="dark"] .form-textarea:focus, [data-theme="dark"] .form-select:focus { border-color: #667eea !important; } /* Zona de upload del banner */ [data-theme="dark"] .banner-upload, [data-theme="dark"] .upload-zone { background: #2d2d40 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .banner-upload:hover, [data-theme="dark"] .upload-zone:hover, [data-theme="dark"] .upload-zone.drag-over { background: #3a3a52 !important; border-color: #667eea !important; } /* Slots de archivos adjuntos */ [data-theme="dark"] .attachment-slot { background: #2d2d40 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .attachment-slot:hover { background: #3a3a52 !important; } [data-theme="dark"] .attachment-slot .upload-text { color: #94a3b8 !important; } /* Separador inferior + botón cancelar */ [data-theme="dark"] .form-actions { border-top-color: #3a3a52 !important; } [data-theme="dark"] .btn-secondary { background: #2d2d40 !important; color: #e2e8f0 !important; } [data-theme="dark"] .btn-secondary:hover { background: #3a3a52 !important; } /* Alertas */ [data-theme="dark"] .alert-success { background: #1a2e1a !important; color: #86efac !important; border-color: #166534 !important; } [data-theme="dark"] .alert-error { background: #2e1a1a !important; color: #fca5a5 !important; border-color: #991b1b !important; } /* Contenedor del cropper */ [data-theme="dark"] #cropperContainer { background: #2d2d40 !important; } /* CKEditor 5 — área de texto de descripción en crear-evento.php */ [data-theme="dark"] .ck.ck-editor__main > .ck-editor__editable, [data-theme="dark"] .ck.ck-editor__editable:not(.ck-editor__nested-editable) { background: #2d2d40 !important; color: #e2e8f0 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .ck.ck-editor__editable.ck-focused, [data-theme="dark"] .ck.ck-editor__editable:focus { border-color: #667eea !important; box-shadow: none !important; } [data-theme="dark"] .ck.ck-toolbar { background: #252538 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .ck.ck-toolbar .ck-toolbar__items .ck-button, [data-theme="dark"] .ck.ck-button { color: #e2e8f0 !important; /* background: transparent !important; */ } [data-theme="dark"] .ck.ck-button:hover, [data-theme="dark"] .ck.ck-button.ck-on { background: #3a3a52 !important; } [data-theme="dark"] .ck.ck-editor { border-color: #3a3a52 !important; } [data-theme="dark"] .ck-reset_all :not(.ck-reset_all-excluded *).ck.ck-list__item .ck-button { background: #2d2d40 !important; color: #e2e8f0 !important; } [data-theme="dark"] .ck.ck-dropdown__panel, [data-theme="dark"] .ck.ck-list { background: #252538 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .ck.ck-list__item .ck-button:hover { background: #3a3a52 !important; } /* composer de novelas */ [data-theme="dark"] .ck-content h1, [data-theme="dark"] .ck-content h2, [data-theme="dark"] .ck-content h3 { color: unset !important; } /* ============================================== SECCIÓN 52 — blog.php: cabecera hero ============================================== */ /* Ocultar imagen de fondo del banner en dark */ [data-theme="dark"] .blog-hero { background-image: none !important; } /* Quitar text-shadow del título y subtítulo */ [data-theme="dark"] .blog-hero h1, [data-theme="dark"] .blog-hero p { text-shadow: none !important; } /* ============================================== SECCIÓN 51 — 404.php dark mode ============================================== */ [data-theme="dark"] .error-container, [data-theme="dark"] body { background: #1e1e2e !important; } [data-theme="dark"] .error-content { background: #252538 !important; box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .error-title { color: #e2e8f0 !important; } [data-theme="dark"] .error-message { color: #94a3b8 !important; } [data-theme="dark"] .error-image-placeholder { background: #2d2d40 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .suggestions { border-top-color: #3a3a52 !important; } [data-theme="dark"] .suggestions h3 { color: #e2e8f0 !important; } [data-theme="dark"] .btn-back { background: #252538 !important; border-color: var(--zikpic-green) !important; color: var(--zikpic-green) !important; } [data-theme="dark"] .btn-back:hover { background: rgba(129,215,66,0.1) !important; } /* ============================================================ SECCIÓN 53 — profile.php: modal de visualización de post ============================================================ */ /* Contenedor principal del modal */ [data-theme="dark"] #postModal .modal-container, [data-theme="dark"] #postModalCompact .modal-container { background: #252538 !important; color: #e2e8f0 !important; } /* Header y separadores de bordes hardcodeados */ [data-theme="dark"] .post-modal-header { border-bottom-color: #3a3a52 !important; } [data-theme="dark"] .post-modal-close:hover { background: #2d2d40 !important; color: #e2e8f0 !important; } /* Acciones (likes, comentarios) */ [data-theme="dark"] .post-modal-actions { border-top-color: #3a3a52 !important; border-bottom-color: #3a3a52 !important; } /* Footer del modal */ [data-theme="dark"] .post-modal-footer { background: #252538 !important; border-top-color: #3a3a52 !important; } /* Cuerpo del modal */ [data-theme="dark"] .post-modal-body { background: #252538 !important; } [data-theme="dark"] .post-modal-content { color: #e2e8f0 !important; } /* Sección de comentarios dentro del modal */ [data-theme="dark"] .post-comments-section .zik-comment { background: #2d2d40 !important; color: #e2e8f0 !important; } [data-theme="dark"] .post-comments-section .comment-composer textarea { background: #1e1e2e !important; border-color: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] .post-comments-section .comment-meta { color: #94a3b8 !important; } [data-theme="dark"] .modal-comments-section { background: #252538 !important; } /* ================== Section 54: Modal búsqueda de series ================== */ [data-theme="dark"] .series-search-result { border-color: #3a3a52 !important; background: #2d2d40 !important; } [data-theme="dark"] .series-search-result:hover { background: #3a3a52 !important; border-color: #81d742 !important; } [data-theme="dark"] .series-result-title { color: #e2e8f0 !important; } [data-theme="dark"] .series-result-meta { color: #94a3b8 !important; } /* Input de búsqueda del modal */ [data-theme="dark"] #series-search-input { background: #2d2d40 !important; border-color: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] #series-search-input::placeholder { color: #64748b !important; } [data-theme="dark"] .empty-timeline { background: #2f2e43 !important; color: #e2e8f0 !important; } /* ============================================================ SECCIÓN 55 — reader.php mobile controls ============================================================ */ [data-theme="dark"] .mobile-bottom-bar, [data-theme="dark"] #mobileBottomBar { background: #121221 !important; border-top: 1px solid #2f2f45 !important; } [data-theme="dark"] .mobile-controls, [data-theme="dark"] #mobileControls { background: #121221 !important; } [data-theme="dark"] #mobileBottomBar .mobile-control-btn, [data-theme="dark"] .mobile-bottom-bar .mobile-control-btn { background: #2b2b3f !important; border: 1px solid #3a3a52 !important; color: #e2e8f0 !important; box-shadow: none !important; } [data-theme="dark"] #mobileBottomBar .mobile-control-btn i, [data-theme="dark"] .mobile-bottom-bar .mobile-control-btn i { color: #cbd5e1 !important; } [data-theme="dark"] #mobileBottomBar .mobile-control-btn:hover, [data-theme="dark"] #mobileBottomBar .mobile-control-btn:active, [data-theme="dark"] .mobile-bottom-bar .mobile-control-btn:hover, [data-theme="dark"] .mobile-bottom-bar .mobile-control-btn:active { background: #34344b !important; border-color: #4a4a65 !important; color: #ffffff !important; } [data-theme="dark"] #mobileBottomBar .mobile-control-btn:disabled, [data-theme="dark"] #mobileBottomBar .mobile-control-btn.disabled, [data-theme="dark"] .mobile-bottom-bar .mobile-control-btn:disabled, [data-theme="dark"] .mobile-bottom-bar .mobile-control-btn.disabled { opacity: 0.45 !important; background: #262638 !important; border-color: #34344a !important; } [data-theme="dark"] #mobileBottomBar .mobile-page-counter, [data-theme="dark"] .mobile-bottom-bar .mobile-page-counter { background: rgba(129, 215, 66, 0.14) !important; border: 1px solid rgba(129, 215, 66, 0.4) !important; color: #d9f99d !important; } /* ============================================================ SECCIÓN 56 — Extras: modal dashboard + bloque en serie ============================================================ */ /* --- Modal Extras (dashboard) -------------------------------- */ [data-theme="dark"] #extrasModal > div { background: #1e1e2e !important; border: 1px solid #2f2f45 !important; color: #e2e8f0 !important; } /* Cabecera del modal */ [data-theme="dark"] #extrasModal > div > div:first-child { border-bottom-color: #2f2f45 !important; } [data-theme="dark"] #extrasModal h3 { color: #e2e8f0 !important; } [data-theme="dark"] #extrasModal #extrasModalSubtitle { color: #94a3b8 !important; } [data-theme="dark"] #extrasModal > div > div:first-child button { color: #94a3b8 !important; } [data-theme="dark"] #extrasModal > div > div:first-child button:hover { color: #e2e8f0 !important; } /* Buscador */ [data-theme="dark"] #extrasModal #extrasSearchInput { background: #2b2b3f !important; border-color: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] #extrasModal #extrasSearchInput::placeholder { color: #64748b !important; } [data-theme="dark"] #extrasModal > div > div:nth-child(2) { border-bottom-color: #2f2f45 !important; background: #1e1e2e !important; } /* Resultados de búsqueda */ [data-theme="dark"] #extrasSearchResults > div { border-color: #2f2f45 !important; border-radius: 8px; overflow: hidden; } [data-theme="dark"] #extrasSearchResults > div > div { background: #252535 !important; border-bottom-color: #2f2f45 !important; color: #e2e8f0 !important; } [data-theme="dark"] #extrasSearchResults > div > div div:last-child > div:last-child { color: #94a3b8 !important; } /* Lista de vinculados */ [data-theme="dark"] #extrasModal > div > div:last-child { background: #1e1e2e !important; } [data-theme="dark"] #extrasModal > div > div:last-child > p { color: #64748b !important; } [data-theme="dark"] #extrasLinkedList > div { border-bottom-color: #2f2f45 !important; color: #e2e8f0 !important; } [data-theme="dark"] #extrasLinkedList > div > div > div:last-child { color: #94a3b8 !important; } /* Botón quitar */ [data-theme="dark"] #extrasLinkedList button { background: transparent !important; border-color: #7f1d1d !important; color: #fca5a5 !important; } [data-theme="dark"] #extrasLinkedList button:hover { background: #3b1515 !important; } /* Botón vincular (resultados búsqueda) */ [data-theme="dark"] #extrasSearchResults button { background: #5b21b6 !important; } [data-theme="dark"] #extrasSearchResults button:hover { background: #7c3aed !important; } /* Botón del icono extras en tarjetas del dashboard */ [data-theme="dark"] .btn-subtle.extras-link:hover { background: #2d1f5e !important; border-color: #7c3aed !important; color: #c4b5fd !important; } /* ============================================================ SECCIÓN 57 — Empty state de pestañas (series) ============================================================ */ [data-theme="dark"] .empty-section-message { background: linear-gradient(135deg, #242438 0%, #1e1e2e 100%) !important; border: 1px solid #33334a !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important; } [data-theme="dark"] .series-grid-full-width .empty-section-message { max-width: 680px; } [data-theme="dark"] .empty-section-message h3 { color: #e2e8f0 !important; } [data-theme="dark"] .empty-section-message p { color: #a8b5c7 !important; } [data-theme="dark"] .empty-section-message .empty-icon { filter: none; } /* ============================================== SECCION 56.0 - Modal Ruta de Mejora Creativa ============================================== */ [data-theme="dark"] #improvementGuideModal .modal-content { background: #25273a !important; color: #eef2ff !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } [data-theme="dark"] #improvementGuideModal .modal-header { background: inherit !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } [data-theme="dark"] #improvementGuideModal .modal-title, [data-theme="dark"] #improvementGuideModal .modal-header strong { color: #eef2ff !important; } [data-theme="dark"] #improvementGuideModal .modal-header > div > div { color: #cbd5e1 !important; } [data-theme="dark"] #improvementGuideModal .modal-body, [data-theme="dark"] #improvementGuideModal .modal-body p, [data-theme="dark"] #improvementGuideModal .modal-body li, [data-theme="dark"] #improvementGuideModal .modal-body small, [data-theme="dark"] #improvementGuideModal .modal-body strong, [data-theme="dark"] #improvementGuideModal .modal-body label, [data-theme="dark"] #improvementGuideModal #improvementGuideMessage, [data-theme="dark"] #improvementGuideModal #improvementGuideFocus, [data-theme="dark"] #improvementGuideModal #improvementGuideSeriesTitle, [data-theme="dark"] #improvementGuideModal #improvementDiscordStatus { color: #eef2ff !important; } [data-theme="dark"] #improvementGuideModal .alert { background: rgba(255, 183, 3, 0.12) !important; border-color: rgba(255, 183, 3, 0.3) !important; color: #ffe7a3 !important; } [data-theme="dark"] #improvementGuideModal .card { background: #2f3146 !important; color: #eef2ff !important; border-color: rgba(255, 255, 255, 0.08) !important; } [data-theme="dark"] #improvementGuideModal .card h4 { color: #f8fafc !important; } [data-theme="dark"] #improvementGuideModal #improvementDiscordUsername { background: #f8fafc !important; color: #111827 !important; border-color: rgba(255, 255, 255, 0.12) !important; } [data-theme="dark"] #improvementGuideModal #improvementDiscordUsername::placeholder { color: #94a3b8 !important; } [data-theme="dark"] #improvementGuideModal .btn-secondary { background: #3b3f5c !important; color: #f8fafc !important; border-color: #3b3f5c !important; } [data-theme="dark"] #improvementGuideModal .btn-improvement-discord { background: #5865f2 !important; color: #ffffff !important; } [data-theme="dark"] #improvementGuideModal .btn-improvement-save { background: #ffb703 !important; color: #2f2200 !important; } /* --- Bloque Extras en la vista pública de serie -------------- */ [data-theme="dark"] .extras-section { background: transparent !important; } [data-theme="dark"] .extras-section .chapters-header-subtitle { background: transparent !important; } [data-theme="dark"] .chapters-title-subtitle-zp h3 { color: var(--text-gray) !important; } [data-theme="dark"] .extras-section .chapters-title-subtitle-zp h3 { color: var(--text-gray) !important; } [data-theme="dark"] .extras-section .chapters-list-ajax-wrap { background: #859cad14 !important; overflow: hidden !important; } [data-theme="dark"] .extras-section .chapter-item { background: transparent !important; border-bottom-color: rgba(255,255,255,0.06) !important; color: inherit !important; } [data-theme="dark"] .extras-section .chapter-item:hover { background: #303949 !important; } /* ============================================================ SECCION 56.1 — Modal Tutorial de Visibilidad (dashboard) ============================================================ */ [data-theme="dark"] #visibilityTutorialModal .modal-content { background: #1e1e2e !important; border: 1px solid #2f2f45 !important; color: #e2e8f0 !important; } [data-theme="dark"] #visibilityTutorialModal .modal-body, [data-theme="dark"] #visibilityTutorialModal .modal-footer { background: #1e1e2e !important; } [data-theme="dark"] #visibilityTutorialModal .modal-footer { border-top-color: #2f2f45 !important; } [data-theme="dark"] #visibilityTutorialModal [style*="color: #495057"], [data-theme="dark"] #visibilityTutorialModal [style*="color:#495057"] { color: #cbd5e1 !important; } [data-theme="dark"] #visibilityTutorialModal [style*="color: #6c757d"], [data-theme="dark"] #visibilityTutorialModal [style*="color:#6c757d"] { color: #94a3b8 !important; } [data-theme="dark"] #visibilityTutorialModal [style*="background: #f8f9fa"], [data-theme="dark"] #visibilityTutorialModal [style*="background:#f8f9fa"] { background: #252538 !important; border-color: #3a3a52 !important; } [data-theme="dark"] #visibilityTutorialModal [style*="border-top: 2px solid #e9ecef"], [data-theme="dark"] #visibilityTutorialModal [style*="border-top:2px solid #e9ecef"] { border-top-color: #2f2f45 !important; } /* ============================================================ SECCION 56.2 — Welcome Modal (home) ============================================================ */ [data-theme="dark"] .welcome-modal-overlay { background: rgba(3, 7, 18, 0.84) !important; } [data-theme="dark"] .welcome-modal-container { background: #1e1e2e !important; border: 1px solid #2f2f45 !important; box-shadow: 0 25px 70px rgba(0, 0, 0, 0.65) !important; } [data-theme="dark"] .welcome-modal-left::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.35)); pointer-events: none; z-index: 1; } [data-theme="dark"] .welcome-header, [data-theme="dark"] .character-illustration { position: relative; z-index: 2; } [data-theme="dark"] .welcome-modal-right { background: #1e1e2e !important; } [data-theme="dark"] .welcome-modal-right h3, [data-theme="dark"] .welcome-content h4 { color: #e2e8f0 !important; } [data-theme="dark"] #dashboardWelcomeModalOverlay .welcome-modal-right .m-subtitle { color: #d7e3f7 !important; } [data-theme="dark"] #dashboardWelcomeModalOverlay .welcome-modal-right .welcome-intro { color: #cfdcf2 !important; } [data-theme="dark"] #dashboardNewsModalOverlay .welcome-modal-right.mode-news .m-subtitle { color: #d7e3f7 !important; } [data-theme="dark"] .welcome-list li { color: #cbd5e1 !important; } [data-theme="dark"] .welcome-modal-right.mode-news .anuncio-box { color: #e2e8f0 !important; background: rgba(58, 196, 3, 0.2) !important; border-color: rgba(129, 215, 66, 0.5) !important; } [data-theme="dark"] .welcome-modal-right.mode-news .anuncio-box.is-latest { border-width: 2px !important; border-color: rgba(167, 243, 208, 0.95) !important; background: linear-gradient(180deg, rgba(110, 231, 183, 0.22), rgba(58, 196, 3, 0.18)) !important; box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.14), 0 0 20px rgba(125, 211, 252, 0.12), 0 10px 26px rgba(0, 0, 0, 0.28) !important; will-change: auto; } [data-theme="dark"] .welcome-modal-right.mode-news .anuncio-box.is-latest .anuncio-meta { background-color: #14532d !important; color: #ffffff !important; border: 1px solid rgba(167, 243, 208, 0.95) !important; display: inline-flex !important; align-items: center !important; animation: announcementBadgeShiftDark 1.2s ease-in-out infinite alternate !important; will-change: background-color, color, border-color, box-shadow; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); } @keyframes announcementBadgeShiftDark { from { background-color: #14532d; color: #ffffff; border-color: rgba(167, 243, 208, 0.95); box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.7), 0 0 12px rgba(34, 197, 94, 0.38); } to { background-color: #f59e0b; color: #1f1300; border-color: rgba(253, 224, 71, 1) !important; box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.95), 0 0 20px rgba(245, 158, 11, 0.6); } } [data-theme="dark"] .welcome-modal-right.mode-news .anuncio-box div { color: #e2e8f0 !important; } [data-theme="dark"] .welcome-modal-right.mode-news .anuncio-meta { color: #d1fae5 !important; background: rgba(16, 185, 129, 0.25) !important; } [data-theme="dark"] .welcome-modal-right.mode-news .anuncio-date { color: #94a3b8 !important; } [data-theme="dark"] .welcome-tab { background: #2b2b3f !important; border-color: #3a3a52 !important; color: #94a3b8 !important; } [data-theme="dark"] .welcome-tab:hover:not(.active) { background: #35354c !important; border-color: #4a4a65 !important; color: #e2e8f0 !important; } [data-theme="dark"] .welcome-tab.active { border-color: #81d742 !important; color: #ffffff !important; } [data-theme="dark"] .welcome-btn-skip { color: #94a3b8 !important; } [data-theme="dark"] .welcome-btn-skip:hover { color: #e2e8f0 !important; } [data-theme="dark"] .welcome-modal-close { background: rgba(15, 23, 42, 0.48) !important; color: #e2e8f0 !important; } [data-theme="dark"] .welcome-modal-close:hover { background: rgba(51, 65, 85, 0.75) !important; } /* ============================================================ SECCION 57 — series-comments.php (Centro de Comentarios) ============================================================ */ [data-theme="dark"] .sch-series-select, [data-theme="dark"] .sch-ep-select, [data-theme="dark"] .sch-ep-thumb, [data-theme="dark"] .sch-comment-card { background: #252538 !important; border-color: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] .sch-episode-bar > label, [data-theme="dark"] .sch-comment-author, [data-theme="dark"] .sch-comment-body { color: #e2e8f0 !important; } [data-theme="dark"] .sch-comment-date, [data-theme="dark"] .sch-comment-footer, [data-theme="dark"] .sch-empty, [data-theme="dark"] .sch-wrap p { color: #94a3b8 !important; } [data-theme="dark"] .sch-comment-ep-tag { background: #334155 !important; color: #e2e8f0 !important; border: 1px solid #475569 !important; } [data-theme="dark"] .sch-comment-ep-tag:hover { color: #81d742 !important; background: #1f2937 !important; border-color: #81d742 !important; } [data-theme="dark"] .sch-comment-avatar-placeholder { background: #334155 !important; color: #cbd5e1 !important; } [data-theme="dark"] .social-series-carousel-module .header-zp-title { color: #f4f7ff !important; } [data-theme="dark"] .social-series-carousel-module .header-zp-subtitle { color: #b9c5e4 !important; } [data-theme="dark"] .social-series-carousel-module .ssc-thumb { border-color: rgba(255, 255, 255, 0.85) !important; background: #13182f !important; } [data-theme="dark"] .social-series-carousel-module .ssc-series-name { color: #edf3ff !important; } [data-theme="dark"] .social-series-carousel-module .ssc-empty { color: #b0c0de !important; } /* Botón X flotante sticky en modales mobile */ [data-theme="dark"] .modal-sticky-close { background: #2d2d2d !important; color: #eee !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5) !important; } [data-theme="dark"] .modal-sticky-close:hover { background: #81d742 !important; color: white !important; } [data-theme="dark"] .atmos-title { color: #ffffff; } [data-theme="dark"] .atmos-meta { color: rgba(255,255,255,.55); } [data-theme="dark"] .atmos-tooltip { background: #25253a; border-color: rgba(255,255,255,.08); } [data-theme="dark"] .atmos-tooltip-title { color: #ffffff; } [data-theme="dark"] .atmos-tooltip-buttons button { color: #dddddd!important; } [data-theme="dark"] .atmos-row { border-color: rgba(255,255,255,.08); } [data-theme="dark"] .zikatmos-modal .modal-content { background: #25253a !important; color: #e2e8f0 !important; } [data-theme="dark"] .zikatmos-modal .modal-header, [data-theme="dark"] .zikatmos-modal .modal-body, [data-theme="dark"] .zikatmos-modal .modal-footer { background: #25253a !important; } [data-theme="dark"] .zikatmos-modal .atmos-title { color: #ffffff !important; } [data-theme="dark"] .zikatmos-modal .atmos-meta { color: rgba(255,255,255,.60) !important; } [data-theme="dark"] .zikatmos-modal .favorite-toggle { color: #7b7b7b !important; } [data-theme="dark"] .zikatmos-modal .favorite-toggle.active { color: #ffca00 !important; } [data-theme="dark"] .preview-atmos { color: #a1a1aa; } [data-theme="dark"] .atmos-type-btn { color: #a1a1aa; } [data-theme="dark"] .preview-atmos .btn:hover { color: #25253a; } [data-theme="dark"] .atmos-trigger svg{ color: #d9d9d9; } /* ========================================================== ZIKATMOS POPUP ========================================================== */ [data-theme="dark"] .atmos-panel, [data-theme="dark"] .atmos-panel-main, [data-theme="dark"] .atmos-panel-config, [data-theme="dark"] #atmosTooltip{ background:#2f3047; border-color:rgba(255,255,255,.08); color:#e5e7eb; } [data-theme="dark"] .atmos-tooltip-title{ color:#ffffff; border-bottom:1px solid rgba(255,255,255,.08); } [data-theme="dark"] .atmos-tooltip-category, [data-theme="dark"] .atmos-tooltip-meta{ color:#b7bfd5; } [data-theme="dark"] .atmos-tooltip-buttons button{ color:#e5e7eb; } [data-theme="dark"] .atmos-tooltip-buttons button:hover{ background:rgba(255,255,255,.08); color:#ffffff; } [data-theme="dark"] .atmos-menu-divider{ border-top:1px solid rgba(255,255,255,.08); } /* ---------- Configuración ---------- */ [data-theme="dark"] .config-label{ color:#e5e7eb; } [data-theme="dark"] .config-label i{ color:#aeb7cb; } [data-theme="dark"] .config-pill{ background:#252538; color:#ffbf5e; } [data-theme="dark"] .atmos-panel-config .form-select{ background:#383b57; color:#ffffff; border-color:#4b4f71; } [data-theme="dark"] .atmos-panel-config .form-select:focus{ border-color:#5cd126; box-shadow:0 0 0 .18rem rgba(92,209,38,.18); } /* ---------- Sliders ---------- */ [data-theme="dark"] .atmos-panel-config .form-range::-webkit-slider-runnable-track{ background:#555b78; } [data-theme="dark"] .atmos-panel-config .form-range::-moz-range-track{ background:#555b78; } [data-theme="dark"] .atmos-panel-config .form-range::-webkit-slider-thumb{ border-color:#2f3047; } [data-theme="dark"] .atmos-panel-config .form-range::-moz-range-thumb{ border:3px solid #2f3047; } /* ---------- Switch ---------- */ [data-theme="dark"] .atmos-panel-config .form-check-input{ background-color:#555b78; border-color:#555b78; } [data-theme="dark"] .atmos-panel-config .form-check-input:checked{ background-color: #0d6efd; border-color: #2f3047; } /* ============================================================ ZIKPIC - DARK THEME ADMINISTRADOR DE COLECCIONES ============================================================ */ [data-theme="dark"] .collections-page { color: #e2e8f0; } [data-theme="dark"] .collections-header { color: #e2e8f0; } /* ============================================================ COLLECTION CARDS ============================================================ */ [data-theme="dark"] .collection-card { background: #252538 !important; border-color: #3a3a52 !important; box-shadow: 0 5px 20px rgba(0,0,0,.25); } [data-theme="dark"] .collection-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.45); } [data-theme="dark"] .collection-cover { background: #2d2d40 !important; } [data-theme="dark"] .collection-cover-placeholder { color: #94a3b8 !important; } [data-theme="dark"] .collection-body { background: #252538; } [data-theme="dark"] .collection-title { color: #e2e8f0 !important; } [data-theme="dark"] .collection-description { color: #94a3b8 !important; } [data-theme="dark"] .collection-meta { color: #94a3b8; } [data-theme="dark"] .collection-meta .text-muted { color: #94a3b8 !important; } /* ============================================================ DRAG & DROP ============================================================ */ [data-theme="dark"] .collection-drag-handle { color: #94a3b8; } [data-theme="dark"] .collection-drag-handle:hover { color: var(--primary) !important; } [data-theme="dark"] .collection-sort-item.dragging { opacity: .5; } [data-theme="dark"] .collection-sort-item.drag-over { filter: brightness(1.08); } /* ============================================================ ESTADOS ============================================================ */ [data-theme="dark"] .collection-status-public { background: rgba(46,204,113,.18) !important; color: #86efac !important; } [data-theme="dark"] .collection-status-private { background: rgba(148,163,184,.16) !important; color: #cbd5e1 !important; } /* ============================================================ EMPTY STATE ============================================================ */ [data-theme="dark"] .empty-collections { background: #252538 !important; border-color: #475569 !important; color: #e2e8f0; } [data-theme="dark"] .empty-collections h3, [data-theme="dark"] .empty-collections h4 { color: #e2e8f0 !important; } [data-theme="dark"] .empty-collections p, [data-theme="dark"] .empty-collections .text-muted { color: #94a3b8 !important; } [data-theme="dark"] .empty-collections i { color: #64748b !important; } [data-theme="dark"] .empty-collections .btn-empty-create { background: #2d2d40 !important; border-color: #475569 !important; color: #cbd5e1 !important; } [data-theme="dark"] .empty-collections .btn-empty-create:hover { background: #3a3a52 !important; border-color: #64748b !important; color: #e2e8f0 !important; } /* ============================================================ COLLECTION ACTIONS ============================================================ */ [data-theme="dark"] .collection-actions button.btn { background-color: transparent; } [data-theme="dark"] .collection-actions .btn-outline-info { color: #67e8f9 !important; border-color: #0891b2 !important; } [data-theme="dark"] .collection-actions .btn-outline-info:hover { background: #0891b2 !important; color: #ffffff !important; } [data-theme="dark"] .collection-actions .btn-outline-primary { color: #93c5fd !important; border-color: #3b82f6 !important; } [data-theme="dark"] .collection-actions .btn-outline-primary:hover { background: #2563eb !important; color: #ffffff !important; } [data-theme="dark"] .collection-actions .btn-outline-danger { color: #fca5a5 !important; border-color: #dc3545 !important; } [data-theme="dark"] .collection-actions .btn-outline-danger:hover { background: #b91c1c !important; color: #ffffff !important; } /* ============================================================ EPISODIOS DE LA COLECCIÓN ============================================================ */ [data-theme="dark"] .collection-episodes-list { color: #e2e8f0; } [data-theme="dark"] .collection-episode-item { background: #252538 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .collection-episode-item:hover { background: #2d2d40 !important; } [data-theme="dark"] .collection-episode-thumb { background: #2d2d40 !important; color: #64748b !important; } [data-theme="dark"] .collection-episode-info { color: #e2e8f0; } [data-theme="dark"] .collection-episode-title { color: #e2e8f0 !important; } [data-theme="dark"] .collection-episode-number { color: #94a3b8 !important; } /* ============================================================ SELECTOR DE EPISODIOS ============================================================ */ [data-theme="dark"] .collection-episode-selector-card { background: #252538 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .collection-episode-selector-card:hover { background: #2d2d40 !important; box-shadow: 0 8px 20px rgba(0,0,0,.4) !important; } [data-theme="dark"] .collection-episode-selector-card.selected { border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59,130,246,.18) !important; } [data-theme="dark"] .collection-episode-selector-card.in-current, [data-theme="dark"] .collection-episode-selector-card.current-collection { border-color: var(--primary) !important; } [data-theme="dark"] .collection-episode-selector-thumb { background: #2d2d40 !important; } [data-theme="dark"] .collection-episode-selector-placeholder { color: #64748b !important; } [data-theme="dark"] .collection-episode-selector-info { background: #252538; } [data-theme="dark"] .collection-episode-selector-number { color: #81d742 !important; } [data-theme="dark"] .collection-episode-selector-title { color: #e2e8f0 !important; } [data-theme="dark"] .collection-episode-selector-status { color: #94a3b8; } [data-theme="dark"] .collection-episode-selector-check { background: #1e1e2e !important; border-color: #64748b !important; } [data-theme="dark"] .collection-episode-selector-card.selected .collection-episode-selector-check { background: #2563eb !important; border-color: #3b82f6 !important; color: #ffffff !important; } [data-theme="dark"] .collection-episode-selector-card.disabled { opacity: .55; } [data-theme="dark"] .collection-episode-selector-card.disabled .collection-episode-selector-check { background: var(--primary) !important; border-color: var(--primary) !important; color: #1e1e2e !important; } /* ============================================================ BADGE DE COLECCIÓN ============================================================ */ [data-theme="dark"] .collection-episode-collection-badge { color: #ffffff !important; } /* ============================================================ MODAL DE COLECCIÓN ============================================================ */ [data-theme="dark"] #collectionModal .modal-content, [data-theme="dark"] #collectionCoverCropModal .modal-content { background: #252538 !important; border-color: #3a3a52 !important; color: #e2e8f0; } [data-theme="dark"] #collectionModal .modal-header, [data-theme="dark"] #collectionCoverCropModal .modal-header { border-bottom-color: #3a3a52 !important; } [data-theme="dark"] #collectionModal .modal-footer, [data-theme="dark"] #collectionCoverCropModal .modal-footer { border-top-color: #3a3a52 !important; } [data-theme="dark"] #collectionModal .modal-title, [data-theme="dark"] #collectionCoverCropModal .modal-title { color: #e2e8f0 !important; } [data-theme="dark"] #collectionModal .modal-title i, [data-theme="dark"] #collectionCoverCropModal .modal-title i { color: var(--primary) !important; } [data-theme="dark"] #collectionModal .form-label { color: #cbd5e1 !important; } [data-theme="dark"] #collectionModal .form-control, [data-theme="dark"] #collectionModal .form-select { background-color: #1e1e2e !important; border-color: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] #collectionModal .form-control::placeholder { color: #64748b !important; } [data-theme="dark"] #collectionModal .form-control:focus, [data-theme="dark"] #collectionModal .form-select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 .2rem rgba(129,215,66,.12) !important; } [data-theme="dark"] #collectionModal .form-control-color { background: #1e1e2e !important; border-color: #3a3a52 !important; } [data-theme="dark"] #collectionModal .alert-info, [data-theme="dark"] #collectionCoverCropModal .alert-info { background: rgba(14,202,240,.12) !important; border-color: rgba(14,202,240,.3) !important; color: #67e8f9 !important; } /* ============================================================ MODAL DE PORTADA ============================================================ */ [data-theme="dark"] .collection-cover-upload-zone { background: #1e1e2e !important; border-color: #475569 !important; color: #e2e8f0; } [data-theme="dark"] .collection-cover-upload-zone:hover, [data-theme="dark"] .collection-cover-upload-zone.drag-over { background: rgba(129,215,66,.08) !important; border-color: var(--primary) !important; box-shadow: 0 4px 18px rgba(0,0,0,.35); } [data-theme="dark"] .collection-cover-upload-zone i { color: #64748b; } [data-theme="dark"] .collection-cover-upload-zone:hover i, [data-theme="dark"] .collection-cover-upload-zone.drag-over i { color: var(--primary); } [data-theme="dark"] .collection-cover-upload-title { color: #e2e8f0 !important; } [data-theme="dark"] .collection-cover-upload-info { color: #94a3b8 !important; } [data-theme="dark"] .collection-cover-upload-recommendation { background: rgba(14,202,240,.12) !important; border-color: rgba(14,202,240,.3) !important; color: #67e8f9 !important; } /* ============================================================ STATUS DISPLAY / TOGGLE ============================================================ */ [data-theme="dark"] .collection-status-display { background: #1e1e2e !important; border-color: #3a3a52 !important; color: #cbd5e1 !important; } [data-theme="dark"] .collection-status-display i { color: #94a3b8 !important; } [data-theme="dark"] .collection-status-display.is-public { background: rgba(46,204,113,.12) !important; border-color: rgba(46,204,113,.3) !important; color: #86efac !important; } [data-theme="dark"] .collection-status-display.is-public i { color: #4ade80 !important; } [data-theme="dark"] .collection-status-control { color: #cbd5e1; } [data-theme="dark"] .collection-status-toggle { background: #475569 !important; } [data-theme="dark"] .collection-status-toggle::after { background: #e2e8f0 !important; box-shadow: 0 1px 4px rgba(0,0,0,.45); } [data-theme="dark"] .collection-status-toggle.active { background: var(--primary) !important; } [data-theme="dark"] .collection-status-toggle.active::after { background: #ffffff !important; } [data-theme="dark"] .collection-status-toggle:focus-visible { outline-color: var(--primary) !important; } /* ============================================================ BOTONES DE MODALES ============================================================ */ [data-theme="dark"] #collectionModal .btn-outline-secondary, [data-theme="dark"] #collectionCoverCropModal .btn-outline-secondary { color: #cbd5e1 !important; border-color: #64748b !important; } [data-theme="dark"] #collectionModal .btn-outline-secondary:hover, [data-theme="dark"] #collectionCoverCropModal .btn-outline-secondary:hover { background: #2d2d40 !important; color: #e2e8f0 !important; } [data-theme="dark"] #collectionModal .btn-primary, [data-theme="dark"] #collectionCoverCropModal .btn-success { background: var(--primary) !important; border-color: var(--primary) !important; color: #1e1e2e !important; } [data-theme="dark"] #collectionModal .btn-primary:hover, [data-theme="dark"] #collectionCoverCropModal .btn-success:hover { background: var(--primary-light) !important; border-color: var(--primary-light) !important; } /* ============================================================ BADGES BOOTSTRAP USADOS EN EL MODAL DE PORTADA ============================================================ */ [data-theme="dark"] #collectionCoverCropModal .badge.bg-info { background: rgba(14,202,240,.18) !important; color: #67e8f9 !important; } [data-theme="dark"] #collectionCoverCropModal .badge.bg-light { background: #2d2d40 !important; border-color: #475569 !important; color: #cbd5e1 !important; } /* ============================================================ BOTÓN CERRAR DE BOOTSTRAP ============================================================ */ [data-theme="dark"] #collectionModal .btn-close, [data-theme="dark"] #collectionCoverCropModal .btn-close { filter: invert(1) grayscale(100%) brightness(1.5); } [data-theme="dark"] .input-group-text { color: #e2e8f0; background-color: #252538; border-color: #3a3a52; } /* ============================================================ COLECCIONES — DARK THEME ============================================================ */ [data-theme="dark"] .zp-collection { background: #252538 !important; border-color: #3a3a52 !important; box-shadow: 0 5px 20px rgba(0,0,0,.35) !important; } /* Cabecera de la colección */ [data-theme="dark"] .zp-collection-header { background: #252538 !important; color: #e2e8f0 !important; } [data-theme="dark"] .zp-collection-header:hover { background: color-mix( in srgb, var(--collection-accent) 7%, #252538 ) !important; } [data-theme="dark"] .zp-collection-cover { background: #1e1e2e !important; } [data-theme="dark"] .zp-collection-main { color: #e2e8f0 !important; } [data-theme="dark"] .zp-collection-series { color: #94a3b8 !important; } [data-theme="dark"] .zp-collection-title, [data-theme="dark"] .zp-collection-title strong { color: #e2e8f0 !important; } [data-theme="dark"] .zp-collection-description { color: #94a3b8 !important; } [data-theme="dark"] .zp-collection-meta { color: #94a3b8 !important; } [data-theme="dark"] .zp-collection-chevron { background: color-mix( in srgb, var(--collection-accent) 14%, #252538 ) !important; color: var(--collection-accent) !important; } [data-theme="dark"] .zp-collection-episodes { border-top-color: #3a3a52 !important; } [data-theme="dark"] .zp-collection-episodes-inner { background: #1e1e2e !important; } /* ============================================================ EPISODIOS DENTRO DE LA COLECCIÓN ============================================================ */ [data-theme="dark"] .zp-collection-episodes .chapter-item { background: #252538 !important; border-color: #3a3a52 !important; color: #e2e8f0 !important; box-shadow: none !important; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease !important; } [data-theme="dark"] .zp-collection-episodes .chapter-item:hover { background: color-mix( in srgb, var(--collection-accent) 7%, #252538 ) !important; border-color: color-mix( in srgb, var(--collection-accent) 30%, #3a3a52 ) !important; box-shadow: 0 4px 14px rgba(0,0,0,.22) !important; } /* ============================================================ TEXTO DE LOS EPISODIOS ============================================================ */ [data-theme="dark"] .zp-collection-episodes .chapter-number { color: #94a3b8 !important; } [data-theme="dark"] .zp-collection-episodes .chapter-title { color: #e2e8f0 !important; } /* ============================================================ ESTADÍSTICAS Los iconos heredan el color del número ============================================================ */ [data-theme="dark"] .zp-collection-episodes .chapter-stats { color: #94a3b8 !important; } [data-theme="dark"] .zp-collection-episodes .chapter-stat { color: inherit !important; } [data-theme="dark"] .zp-collection-episodes .chapter-stat i { color: inherit !important; } /* ============================================================ CHEVRON DEL EPISODIO Usa el color de la serie ============================================================ */ [data-theme="dark"] .zp-collection-episodes .chapter-stats > .fa-chevron-right { color: var(--collection-accent) !important; } [data-theme="dark"] .zp-collection-episodes .chapter-item:hover .chapter-stats > .fa-chevron-right { color: var(--collection-accent) !important; } /* ============================================================ BADGES ============================================================ */ /* ============================================================ ESTADO VACÍO ============================================================ */ /* PERSONAJES */ [data-theme="dark"] .zp-collection-empty { color: #94a3b8 !important; background: #1e1e2e !important; } [data-theme="dark"] .zp-collection-empty i { color: var(--collection-accent) !important; } [data-theme="dark"] .character-series-label { color: #e2e8f0 !important; } [data-theme="dark"] .character-description { color: #e2e8f0 !important; } [data-theme="dark"] .character-preview-dialog { background: #1e1e2e !important; } [data-theme="dark"] .character-preview-description { color: #e2e8f0 !important; } [data-theme="dark"] .character-preview-physical span { color: #e2e8f0 !important; } [data-theme="dark"] .character-preview-actions .character-action { border: 1px solid #5f5f79; background: #1e1e2e; color: #e2e8f0 !important; } [data-theme="dark"] .characters-view-btn { background: rgb(30 30 46); } [data-theme="dark"] .characters-view-btn:hover { background: #1e1e2e !important; } /* ============================================================ MANAGE CHARACTERS — FORMULARIO EN DARK THEME Página: dashboard/manage-characters.php ============================================================ */ /* ------------------------------------------------------------ 1. CONTENEDOR PRINCIPAL DEL FORMULARIO ------------------------------------------------------------ */ [data-theme="dark"] .panel { background: #252538 !important; border-color: #3a3a52 !important; color: #e2e8f0; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35); } [data-theme="dark"] .panel h2 { color: #e2e8f0 !important; } /* ------------------------------------------------------------ 2. ETIQUETAS DEL FORMULARIO ------------------------------------------------------------ */ [data-theme="dark"] .panel .field > label, [data-theme="dark"] .panel .field label { color: #e2e8f0 !important; } [data-theme="dark"] .panel .field label small, [data-theme="dark"] .panel .character-physical-field label small { color: #94a3b8 !important; } /* ------------------------------------------------------------ 3. INPUTS, SELECTS Y TEXTAREA ------------------------------------------------------------ */ [data-theme="dark"] .panel .field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), [data-theme="dark"] .panel .field select, [data-theme="dark"] .panel .field textarea, [data-theme="dark"] .panel .stat-row input, [data-theme="dark"] .panel .stat-row select, [data-theme="dark"] .panel .physical-item input, [data-theme="dark"] .panel .physical-item select { background-color: #252538 !important; color: #e2e8f0 !important; border-color: #3a3a52 !important; } /* ------------------------------------------------------------ 4. PLACEHOLDERS ------------------------------------------------------------ */ [data-theme="dark"] .panel .field input::placeholder, [data-theme="dark"] .panel .field textarea::placeholder, [data-theme="dark"] .panel .stat-row input::placeholder, [data-theme="dark"] .panel .physical-item input::placeholder { color: #64748b !important; opacity: 1; } /* ------------------------------------------------------------ 5. FOCUS ------------------------------------------------------------ */ [data-theme="dark"] .panel .field input:focus, [data-theme="dark"] .panel .field select:focus, [data-theme="dark"] .panel .field textarea:focus, [data-theme="dark"] .panel .stat-row input:focus, [data-theme="dark"] .panel .stat-row select:focus, [data-theme="dark"] .panel .physical-item input:focus, [data-theme="dark"] .panel .physical-item select:focus { background-color: #2d2d40 !important; color: #e2e8f0 !important; border-color: #81d742 !important; box-shadow: 0 0 0 0.2rem rgba(129, 215, 66, 0.12) !important; outline: none; } /* ------------------------------------------------------------ 6. OPCIONES DE LOS SELECT ------------------------------------------------------------ */ [data-theme="dark"] .panel select option { background-color: #252538; color: #e2e8f0; } [data-theme="dark"] .panel select option:disabled, [data-theme="dark"] .panel select option[hidden] { color: #64748b; } /* ------------------------------------------------------------ 7. CAMPOS DE COLOR ------------------------------------------------------------ */ [data-theme="dark"] .panel input[type="color"] { background-color: #252538 !important; border-color: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] .panel #color_hex { background-color: #252538 !important; color: #e2e8f0 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .panel #color_hex:focus { background-color: #2d2d40 !important; border-color: #81d742 !important; } /* ------------------------------------------------------------ 8. TEXTOS DE AYUDA ------------------------------------------------------------ */ [data-theme="dark"] .panel .field > small, [data-theme="dark"] .panel .physical-item span { color: #94a3b8 !important; } /* ------------------------------------------------------------ 9. CARACTERÍSTICAS FÍSICAS ------------------------------------------------------------ */ [data-theme="dark"] .panel .character-physical-field { background-color: #1e1e2e !important; border-color: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] .panel .character-physical-field > label { color: #e2e8f0 !important; } [data-theme="dark"] .panel .character-physical-field .physical-item span { color: #94a3b8 !important; } /* ------------------------------------------------------------ 10. PERSONALIDAD / CAPACIDADES ------------------------------------------------------------ */ [data-theme="dark"] .panel .character-personality-field { background-color: #1e1e2e !important; border-color: #3a3a52 !important; color: #e2e8f0 !important; } [data-theme="dark"] .panel .character-personality-field > label { color: #e2e8f0 !important; } /* ------------------------------------------------------------ 11. FILAS DE ATRIBUTOS ------------------------------------------------------------ */ [data-theme="dark"] .panel .stat-row { background: transparent; } [data-theme="dark"] .panel .stat-row .btn { background-color: #252538 !important; color: #cbd5e1 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .panel .stat-row .btn:hover { background-color: #2d2d40 !important; color: #e2e8f0 !important; border-color: #475569 !important; } /* ------------------------------------------------------------ 12. BOTONES "AÑADIR ATRIBUTO" ------------------------------------------------------------ */ [data-theme="dark"] .panel #addStat, [data-theme="dark"] .panel #addPhysical { background-color: #252538 !important; color: #81d742 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .panel #addStat:hover, [data-theme="dark"] .panel #addPhysical:hover { background-color: #2d2d40 !important; color: #9de45a !important; border-color: #81d742 !important; } /* ------------------------------------------------------------ 13. BOTONES GENERALES DEL FORMULARIO ------------------------------------------------------------ */ [data-theme="dark"] .panel .btn { background-color: #252538; color: #e2e8f0; border-color: #3a3a52; } [data-theme="dark"] .panel .btn:hover { background-color: #2d2d40; color: #ffffff; border-color: #475569; } /* ------------------------------------------------------------ 14. BOTÓN PRINCIPAL — GUARDAR / CREAR ------------------------------------------------------------ */ [data-theme="dark"] .panel .btn-primary { background-color: #81d742 !important; border-color: #81d742 !important; color: #1e1e2e !important; } [data-theme="dark"] .panel .btn-primary:hover { background-color: #9de45a !important; border-color: #9de45a !important; color: #1e1e2e !important; } /* ------------------------------------------------------------ 15. BOTÓN CANCELAR ------------------------------------------------------------ */ [data-theme="dark"] .panel .form-actions .btn:not(.btn-primary) { background-color: #2d2d40 !important; color: #cbd5e1 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .panel .form-actions .btn:not(.btn-primary):hover { background-color: #35354a !important; color: #e2e8f0 !important; border-color: #475569 !important; } /* ------------------------------------------------------------ 16. INPUTS DE ARCHIVO ------------------------------------------------------------ */ [data-theme="dark"] .panel input[type="file"] { background-color: #252538 !important; color: #cbd5e1 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .panel input[type="file"]::file-selector-button { background-color: #2d2d40; color: #e2e8f0; border: 0; border-right: 1px solid #3a3a52; padding: 8px 12px; margin-right: 10px; cursor: pointer; } [data-theme="dark"] .panel input[type="file"]::file-selector-button:hover { background-color: #35354a; } /* ------------------------------------------------------------ 17. AVISOS DEL FORMULARIO ------------------------------------------------------------ */ [data-theme="dark"] .notice { background-color: rgba(46, 204, 113, 0.15) !important; color: #a7f3d0 !important; border: 1px solid rgba(46, 204, 113, 0.30); } [data-theme="dark"] .notice.danger { background-color: rgba(231, 76, 60, 0.15) !important; color: #fca5a5 !important; border-color: rgba(231, 76, 60, 0.30); } /* ------------------------------------------------------------ 18. TARJETAS DE PERSONAJES ------------------------------------------------------------ */ [data-theme="dark"] .panel .character { background-color: #252538 !important; border-color: #3a3a52 !important; } [data-theme="dark"] .panel .character-body { color: #e2e8f0; } [data-theme="dark"] .panel .character h3 { color: #e2e8f0 !important; } [data-theme="dark"] .panel .character small { color: #94a3b8 !important; } /* ------------------------------------------------------------ 19. BOTÓN ELIMINAR ------------------------------------------------------------ */ [data-theme="dark"] .panel .btn-danger { background-color: transparent !important; color: #fca5a5 !important; border-color: rgba(231, 76, 60, 0.35) !important; } [data-theme="dark"] .panel .btn-danger:hover { background-color: rgba(231, 76, 60, 0.12) !important; color: #fecaca !important; border-color: rgba(231, 76, 60, 0.55) !important; } /* ------------------------------------------------------------ 20. ESTADO VACÍO ------------------------------------------------------------ */ [data-theme="dark"] .panel .empty { color: #94a3b8 !important; } /* ------------------------------------------------------------ 21. ACCESIBILIDAD — FOCUS DE BOTONES ------------------------------------------------------------ */ [data-theme="dark"] .panel .btn:focus-visible { outline: 2px solid #81d742; outline-offset: 2px; } [data-theme="dark"] .character-modal-controls-mobile { background: #252538 !important; border-bottom-color: #3a3a52 !important; color: #e2e8f0; } [data-theme="dark"] .character-modal-controls-mobile .controls-left, [data-theme="dark"] .character-modal-controls-mobile .controls-right { color: #e2e8f0; } [data-theme="dark"] .character-control-btn { background: #252538 !important; border: 1px solid #3a3a52 !important; color: #cbd5e1 !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); } [data-theme="dark"] .character-control-btn:hover { background: var(--character-color, #81d742) !important; color: #fff !important; border-color: var(--character-color, #81d742) !important; box-shadow: 0 3px 8px rgba(129, 215, 66, 0.25); } [data-theme="dark"] .character-control-btn:active { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); } [data-theme="dark"] .character-modal-nav { background: rgba(37, 37, 56, 0.94) !important; color: #e2e8f0 !important; border: 1px solid #3a3a52 !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); } [data-theme="dark"] .character-modal-nav:hover { background: #2d2d40 !important; color: #81d742 !important; border-color: #81d742 !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55); }