:root {
    --bg-dark: #050607;
    --bg-sidebar: #0a0b0e;
    --bg-card: rgba(18, 20, 24, 0.7);
    --bg-input: #15171b;
    --primary-color: #00f2ea; /* Neon Cyan */
    --primary-glow: rgba(0, 242, 234, 0.5);
    --text-main: #ffffff;
    --text-secondary: #94a3b8;
    --border-color: #1f2937;
    --card-border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Ratio 2x3 for Comic Cards */
.ratio-2x3 {
    --bs-aspect-ratio: 150%; /* 3/2 = 1.5 */
}

/* Comic Card Styling */
.comic-card {
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.comic-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
    border-color: var(--primary-color) !important;
}
.comic-card .card-img-top img {
    transition: transform 0.3s ease;
}
.comic-card:hover .card-img-top img {
    transform: scale(1.05);
}

/* Light Mode Card Overrides */
body.light-mode .comic-card {
    background-color: #ffffff !important;
    border-color: #e5e7eb;
}
body.light-mode .comic-card:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
}

body {
    background-color: var(--bg-dark);
    background-image: radial-gradient(circle at 50% 0%, rgba(0, 242, 234, 0.05) 0%, transparent 50%);
    color: var(--text-main);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
}

/* Light Mode Variables Override */
body.light-mode {
    --bg-dark: #f0f2f5; /* Softer gray background */
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --bg-input: #ffffff; /* White inputs */
    --primary-color: #00838f; /* Cyan 800 - Professional Dark Cyan */
    --text-main: #1f2937; /* Gray-900 */
    --text-secondary: #6b7280; /* Gray-500 */
    --border-color: #e5e7eb; /* Gray-200 */
}

.sidebar-logo {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
}

/* Navbar Links in Light Mode */
body.light-mode .navbar-dark .navbar-nav .nav-link {
    color: var(--text-secondary);
}
body.light-mode .navbar-dark .navbar-nav .nav-link:hover, 
body.light-mode .navbar-dark .navbar-nav .nav-link:focus {
    color: var(--primary-color);
}

/* Fix for specific dark mode classes used in HTML */
body.light-mode .bg-dark-navbar {
    background-color: var(--bg-sidebar) !important;
    border-bottom-color: var(--border-color) !important;
}
body.light-mode .bg-dark-sidebar {
    background-color: var(--bg-sidebar) !important;
    border-right-color: var(--border-color) !important;
}
body.light-mode .bg-dark-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) !important; /* Soft shadow */
}
body.light-mode .bg-dark-input {
    background-color: #f9fafb !important; /* Very light gray for inputs */
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}
body.light-mode .bg-dark-input:focus {
    background-color: #ffffff !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(5, 150, 105, 0.25) !important;
}
body.light-mode .bg-dark-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 131, 143, 0.25) !important;
    border-color: var(--primary-color) !important;
}
body.light-mode .text-light {
    color: var(--text-main) !important;
}
body.light-mode .text-muted {
    color: var(--text-secondary) !important;
}

/* Dropdown Menu Light Mode */
body.light-mode .dropdown-menu-dark {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
body.light-mode .dropdown-menu-dark .dropdown-item {
    color: var(--text-main);
}
body.light-mode .dropdown-menu-dark .dropdown-item:hover {
    background-color: #f3f4f6;
    color: var(--primary-color);
}
body.light-mode .dropdown-divider {
    border-top-color: var(--border-color);
}

/* Fix Dropdown bg-dark in Light Mode */
body.light-mode .dropdown-menu.bg-dark {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

/* Modal Close Button */
body.light-mode .btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Modal Headers/Body Borders in Light Mode */
body.light-mode .modal-header.border-secondary,
body.light-mode .modal-content.border-secondary {
    border-color: var(--border-color) !important;
}

/* User Avatar */
.user-avatar-circle {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color), #00b8d4);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    box-shadow: 0 0 15px rgba(0, 242, 234, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.welcome-avatar {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
}

@media (max-width: 767.98px) {
    .welcome-avatar {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
}

/* Sidebar */
/* Estilos para Laptop (Ajuste de Grid y Escalamiento) */
@media (min-width: 1200px) and (max-width: 1400px) {
    /* Ajuste de columnas: Forzamos 4 o 5 columnas en vez de 6 */
    #series-grid-view .col-xl-2 {
        flex: 0 0 auto !important;
        width: 20% !important; /* 5 columnas (100/20) */
    }

    /* Reducción del Título "Comics" */
    #series-content h3 {
        font-size: 1.25rem !important;
        margin-bottom: 0 !important;
    }

    /* Reducción de botones de vista y Nuevo Comic */
    #series-content .btn-group .btn,
    #series-content .btn-primary-custom {
        padding: 0.35rem 0.75rem !important;
        font-size: 0.8rem !important;
    }

    #series-content .btn-primary-custom i {
        font-size: 0.75rem !important;
    }

    /* Reducción de Filtros */
    #series-content .bg-dark-card.rounded.p-4.shadow-sm {
        padding: 0.8rem !important; /* Reducimos padding del contenedor de filtros */
    }

    #series-content .d-flex.align-items-center.mb-2 {
        margin-bottom: 0.5rem !important;
    }

    #series-content .form-control,
    #series-content .form-select,
    #series-content .input-group-text,
    #series-content .btn-icon {
        font-size: 0.75rem !important;
        padding: 0.3rem 0.6rem !important;
        min-height: auto !important;
    }

    /* Barra de selección */
    #series-selection-bar {
        font-size: 0.7rem !important;
        padding: 0.4rem 0.8rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Texto de resultados (Mostrando X de X) */
    [id$="-pagination-info"] {
        font-size: 0.75rem !important;
        opacity: 0.8;
    }

    /* Ajuste de anchos máximos para filtros en laptop */
    #series-content .input-group {
        max-width: 240px !important;
    }

    #series-content .ms-2 {
        max-width: 110px !important;
        margin-left: 0.4rem !important;
    }

    /* Reducción proporcional de textos y elementos internos de las cards */
    .comic-card .card-title {
        font-size: 0.85rem !important;
        max-height: 2.8rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.5rem !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .comic-card .card-body .badge.rounded-pill {
        font-size: 0.65rem !important;
        padding: 0.4em 0.8em !important;
    }

    .comic-card .text-white.small, 
    .comic-card .text-muted.small {
        font-size: 0.72rem !important;
    }

    .comic-card .card-body .text-white.small i {
        font-size: 0.65rem !important;
    }

    .comic-card .btn-sm {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* Ajuste del botón de visibilidad en laptop */
    .comic-card .position-absolute.top-0.end-0 .badge {
        font-size: 0.65rem !important;
        padding: 0.45em 0.7em !important;
    }
}

.skeleton {
    background: linear-gradient(90deg, var(--bg-input) 25%, var(--border-color) 50%, var(--bg-input) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
    opacity: 0.7;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}

.skeleton-circle {
    border-radius: 50%;
}

/* Truncate Multiline for Titles */
.text-truncate-multiline {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.4 !important;
    max-height: 2.8em !important; /* 2 lines * 1.4 line-height */
}

#wrapper {
    overflow-x: hidden;
}

/* Sidebar */
#sidebar-wrapper {
    min-height: 100vh;
    margin-left: -15rem;
    transition: margin 0.25s ease-out;
    background-color: var(--bg-sidebar);
    width: 15rem;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

#sidebar-wrapper .sidebar-heading {
    padding: 0.875rem 1.25rem;
    font-size: 1.2rem;
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(0, 242, 234, 0.5);
}

#sidebar-wrapper .list-group {
    width: 15rem;
}

#page-content-wrapper {
    min-width: 100vw;
    transition: all 0.25s ease-out; /* Smooth transition */
}

#wrapper.toggled #sidebar-wrapper {
    margin-left: 0;
}

@media (min-width: 768px) {
    #sidebar-wrapper {
        margin-left: 0;
    }

    #page-content-wrapper {
        min-width: 0;
        width: 100%;
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: -15rem;
    }
}

/* Links & Text */
.primary-text {
    color: var(--primary-color) !important;
}

.second-text {
    color: var(--text-secondary);
}

/* Optimize transitions */
.list-group-item {
    border: none;
    padding: 14px 24px;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
    position: relative;
    overflow: hidden;
}

.list-group-item:hover {
    background-color: rgba(0, 242, 234, 0.05) !important;
    color: var(--primary-color);
    padding-left: 35px; /* Slide effect */
}

body.light-mode .list-group-item:hover {
    background-color: rgba(5, 150, 105, 0.1) !important;
}

.list-group-item.active {
    background: linear-gradient(90deg, rgba(0, 242, 234, 0.1), transparent) !important;
    color: var(--primary-color);
    font-weight: bold;
    border-right: none;
    border-left: 3px solid var(--primary-color);
    box-shadow: inset 10px 0 20px -10px rgba(0, 242, 234, 0.3);
}

body.light-mode .list-group-item.active {
    background: rgba(0, 131, 143, 0.1) !important;
    color: var(--primary-color) !important;
    border-left-color: var(--primary-color) !important;
    box-shadow: none;
}

/* Navbar */
.bg-dark-navbar {
    background-color: rgba(10, 11, 14, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    position: sticky;
    top: 0;
    z-index: 1050; /* Ensure dropdowns appear above content */
}

/* Improve rendering speed by avoiding complex filters on small elements */
.badge {
    border-radius: 50rem !important;
    padding: 0.4em 0.7em;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: none; /* Removed shadow from badges */
}

.badge.bg-success {
    background-color: rgba(0, 220, 130, 0.1) !important;
    color: #00dc82 !important;
    border: 1px solid rgba(0, 220, 130, 0.3);
    box-shadow: 0 0 5px rgba(0, 220, 130, 0.2);
}

.badge.bg-primary {
    background-color: rgba(0, 242, 234, 0.1) !important;
    color: var(--primary-color) !important;
    border: 1px solid rgba(0, 242, 234, 0.3);
    box-shadow: 0 0 5px rgba(0, 242, 234, 0.2);
}

body.light-mode .badge.bg-primary {
    background-color: rgba(0, 131, 143, 0.1) !important;
    color: var(--primary-color) !important;
    border-color: rgba(0, 131, 143, 0.3);
    box-shadow: none;
}

.badge.bg-warning {
    background-color: rgba(255, 193, 7, 0.1) !important;
    color: #ffc107 !important;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.badge.bg-danger {
    background-color: rgba(220, 53, 69, 0.1) !important;
    color: #dc3545 !important;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

/* Glassmorphism & Tech Cards - Optimized for performance */
.bg-dark-card {
    background-color: var(--bg-card);
    backdrop-filter: blur(8px); /* Reduced blur for better performance */
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 242, 234, 0.2); /* Softer border */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Static shadow is cheaper than glowing blur */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}

.bg-dark-card:hover {
    border-color: rgba(0, 242, 234, 0.5);
    box-shadow: 0 8px 24px rgba(0, 242, 234, 0.15);
    transform: translateY(-2px); /* Simpler transform */
}

.bg-dark-input {
    background-color: var(--bg-input);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    transition: all 0.3s ease;
}

.bg-dark-input:focus {
    background-color: var(--bg-input);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 242, 234, 0.15);
}

/* Buttons */
.btn-primary-custom {
    background: linear-gradient(135deg, var(--primary-color), #00b8d4);
    color: #000;
    border: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem 1.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    z-index: 1;
}

.btn-primary-custom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #00b8d4, var(--primary-color));
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.btn-primary-custom:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(0, 242, 234, 0.4);
    color: #000;
}

.btn-primary-custom:hover::before {
    opacity: 1;
}
body.light-mode .btn-primary-custom:hover {
    background-color: #047857; /* Darker emerald */
    color: #fff;
    box-shadow: 0 4px 6px rgba(5, 150, 105, 0.3);
}

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border-color);
    background-color: rgba(255,255,255,0.05);
    color: var(--text-main);
    padding: 6px 10px;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: .2px;
    transition: transform .15s ease, border-color .15s ease, background-color .15s ease, color .15s ease;
    box-shadow: none;
}
.btn-action .fas,
.btn-action .fa {
    font-size: .9rem;
}
.btn-action:hover {
    transform: translateY(-1px);
    border-color: var(--primary-color);
    background-color: rgba(0, 242, 234, 0.08);
    color: var(--text-main);
}
.btn-action:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 242, 234, 0.18);
}
.btn-action.btn-sm {
    padding: 5px 10px;
    border-radius: 9px;
}
.btn-action--primary { background-color: rgba(0, 242, 234, 0.12); border-color: rgba(0, 242, 234, 0.25); color: var(--text-main); }
.btn-action--warning { background-color: rgba(255, 193, 7, 0.12); border-color: rgba(255, 193, 7, 0.25); color: #ffc107; }
.btn-action--success { background-color: rgba(0, 220, 130, 0.12); border-color: rgba(0, 220, 130, 0.25); color: #00dc82; }
.btn-action--info { background-color: rgba(100, 181, 246, 0.12); border-color: rgba(100, 181, 246, 0.28); color: #4cc9f0; }
.btn-action--blue { background-color: rgba(76, 201, 240, 0.12); border-color: rgba(76, 201, 240, 0.28); color: #4cc9f0; }
.btn-action--primary:hover { background-color: rgba(0, 242, 234, 0.18); }
.btn-action--warning:hover { background-color: rgba(255, 193, 7, 0.18); }
.btn-action--success:hover { background-color: rgba(0, 220, 130, 0.18); }
.btn-action--info:hover { background-color: rgba(100, 181, 246, 0.18); }
.btn-action--blue:hover { background-color: rgba(76, 201, 240, 0.18); }
body.light-mode .btn-action {
    background-color: #f8fafc;
    color: var(--text-main);
}
body.light-mode .btn-action:hover {
    background-color: #eef2f7;
}

.modal-pro .modal-content {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 12px 24px rgba(0,0,0,0.35);
}
.modal-pro .modal-header {
    background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
    border-bottom: 1px solid var(--border-color) !important;
}
.modal-pro .modal-footer {
    border-top: 1px solid var(--border-color) !important;
}
.modal-pro .modal-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}
.modal-pro .form-text {
    color: var(--text-secondary) !important;
}
.modal-pro .progress {
    background-color: rgba(255,255,255,0.06);
}
.modal-pro .progress .progress-bar {
    background-color: var(--primary-color);
}
body.light-mode .modal-pro .modal-content {
    background-color: #ffffff;
    border-color: var(--border-color);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
.modal-pro .modal-header { padding: 0.75rem 1.5rem; }
.modal-pro .modal-body { padding: 1.25rem 1.5rem; }
.modal-pro .modal-footer { padding: 0.75rem 1.5rem; }
.modal-pro .modal-dialog.modal-xl { max-width: 1100px; }

/* Distinct themes per modal */
.modal-pro .modal-title i {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
}
.modal-bulk-folders .modal-title i {
    color: #4cc9f0;
    border-color: rgba(76,201,240,0.35);
    background: rgba(76,201,240,0.12);
}
.modal-cloudinary-adv .modal-title i {
    color: #6c5ce7;
    border-color: rgba(108,92,231,0.35);
    background: rgba(108,92,231,0.12);
}
.modal-imagekit-bulk .modal-title i {
    color: #00dc82;
    border-color: rgba(0,220,130,0.35);
    background: rgba(0,220,130,0.12);
}
.modal-bulk-folders .bg-dark-input:focus,
.modal-bulk-folders .form-select:focus {
    border-color: #4cc9f0 !important;
    box-shadow: 0 0 0 0.25rem rgba(76, 201, 240, 0.2) !important;
}
.modal-cloudinary-adv .bg-dark-input:focus,
.modal-cloudinary-adv .form-select:focus {
    border-color: #6c5ce7 !important;
    box-shadow: 0 0 0 0.25rem rgba(108, 92, 231, 0.2) !important;
}
.modal-imagekit-bulk .bg-dark-input:focus,
.modal-imagekit-bulk .form-select:focus {
    border-color: #00dc82 !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 220, 130, 0.22) !important;
}
.modal-bulk-folders .form-check-input:checked {
    background-color: #4cc9f0;
    border-color: #4cc9f0;
}
.modal-cloudinary-adv .form-check-input:checked {
    background-color: #6c5ce7;
    border-color: #6c5ce7;
}
.modal-imagekit-bulk .form-check-input:checked {
    background-color: #00dc82;
    border-color: #00dc82;
}
.modal-bulk-folders .btn-primary-custom {
    background: linear-gradient(135deg, #4cc9f0, #00b8d4) !important;
    box-shadow: 0 0 16px rgba(76,201,240,0.35) !important;
}
.modal-cloudinary-adv .btn-primary-custom {
    background: linear-gradient(135deg, #6c5ce7, #8b5cf6) !important;
    box-shadow: 0 0 16px rgba(108,92,231,0.35) !important;
}
.modal-imagekit-bulk .btn-primary-custom {
    background: linear-gradient(135deg, #00dc82, #16a34a) !important;
    box-shadow: 0 0 16px rgba(0,220,130,0.35) !important;
}
.modal-bulk-folders .progress .progress-bar {
    background-color: #4cc9f0 !important;
}
.modal-cloudinary-adv .progress .progress-bar {
    background-color: #6c5ce7 !important;
}
.modal-imagekit-bulk .progress .progress-bar {
    background-color: #00dc82 !important;
}

/* Dropzone visual */
.file-drop {
    position: relative;
    border: 1px dashed var(--border-color);
    border-radius: 14px;
    min-height: 340px;
    background: rgba(255,255,255,0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.file-drop:hover {
    border-color: var(--primary-color);
    background: rgba(0, 242, 234, 0.06);
    transform: translateY(-1px);
}
.file-drop-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.file-drop-content { pointer-events: none; }
.drop-icon {
    font-size: 3.2rem;
    margin-bottom: 8px;
    color: var(--text-secondary);
}
.drop-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-main);
}
.modal-bulk-folders .drop-icon { color: #4cc9f0; }
.modal-cloudinary-adv .drop-icon { color: #6c5ce7; }
.modal-imagekit-bulk .drop-icon { color: #00dc82; }
/* Custom Neon Buttons for Tables (Badge Style) */
.btn-neon-success {
    background-color: rgba(0, 220, 130, 0.1) !important;
    border: 1px solid rgba(0, 220, 130, 0.3) !important;
    color: #00dc82 !important;
    box-shadow: 0 0 5px rgba(0, 220, 130, 0.2);
    transition: all 0.3s ease;
}
.btn-neon-success:hover {
    background-color: rgba(0, 220, 130, 0.2) !important;
    box-shadow: 0 0 10px rgba(0, 220, 130, 0.4);
    color: #00dc82 !important;
    transform: translateY(-1px);
}

.btn-neon-danger-outline {
    background-color: rgba(220, 53, 69, 0.1) !important;
    border: 1px solid rgba(220, 53, 69, 0.3) !important;
    color: #dc3545 !important;
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.2);
    transition: all 0.3s ease;
}
.btn-neon-danger-outline:hover {
    background-color: rgba(220, 53, 69, 0.2) !important;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.4);
    color: #dc3545 !important;
    transform: translateY(-1px);
}

/* Tables */
.table-dark {
    --bs-table-bg: var(--bg-card);
    --bs-table-hover-bg: #22262b;
    border-color: var(--border-color);
}

/* Light Mode Table Overrides */
body.light-mode .table-dark {
    --bs-table-color: var(--text-main);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: #f9fafb;
    --bs-table-striped-color: var(--text-main);
    --bs-table-active-bg: #f3f4f6;
    --bs-table-active-color: var(--text-main);
    --bs-table-hover-bg: #f3f4f6;
    --bs-table-hover-color: var(--text-main);
    color: var(--text-main) !important;
    background-color: transparent !important;
}

.table-dark th {
    border-bottom-color: var(--primary-color);
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.85rem;
}
body.light-mode .table-dark th {
    color: var(--text-secondary);
    border-bottom-color: var(--primary-color);
}

.table-cover-img {
    width: 40px;
    height: 55px;
    object-fit: cover;
    border-radius: 4px;
    background-color: #333;
}

/* Animations */
.section-view {
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}
body.light-mode ::-webkit-scrollbar-thumb {
    background: #d1d5db;
}
body.light-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* Utilities */
.rounded-full {
    border-radius: 50%;
}
.fs-7 {
    font-size: 0.75rem;
}
.cursor-pointer {
    cursor: pointer;
}

.chevron {
    transition: transform 0.2s;
}
[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}

/* Toggle Switch (Custom) */
.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Tech Status Colors */
.text-success {
    color: #00dc82 !important;
    text-shadow: 0 0 10px rgba(0, 220, 130, 0.4);
}

.text-danger {
    color: #ff4d4f !important;
    text-shadow: 0 0 10px rgba(255, 77, 79, 0.4);
}

.text-warning {
    color: #ffc107 !important;
    text-shadow: 0 0 10px rgba(255, 193, 7, 0.4);
}

.text-primary {
    color: var(--primary-color) !important;
    text-shadow: 0 0 10px rgba(0, 242, 234, 0.4);
}

/* Backend Console Log */
#backend-console-log {
    background-color: #050505 !important;
    border: 1px solid rgba(0, 242, 234, 0.2);
    color: #00f2ea;
    font-family: 'Consolas', 'Monaco', monospace;
    text-shadow: 0 0 5px rgba(0, 242, 234, 0.3);
    padding: 1rem !important;
}

body.light-mode #backend-console-log {
    background-color: #f8fafc !important; /* Slate 50 */
    border-color: #cbd5e1;
    color: #334155; /* Slate 700 */
    text-shadow: none;
}

/* Backend Status Icons */
#backend-status-container .fas {
    filter: drop-shadow(0 0 5px currentColor);
}

/* Pagination theme */
.pagination .page-link {
    background-color: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.pagination .page-link:hover {
    color: var(--primary-color);
    background-color: #22262b;
    border-color: var(--primary-color);
}
body.light-mode .pagination .page-link:hover {
    background-color: #f3f4f6;
}
.pagination .page-item.active .page-link {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
body:not(.light-mode) .pagination .page-item.active .page-link {
    color: #000;
}
.pagination .page-item.disabled .page-link {
    color: #666;
    background-color: #1a1d21;
    border-color: var(--border-color);
}
body.light-mode .pagination .page-item.disabled .page-link {
    background-color: #f3f4f6;
    color: #9ca3af;
}

/* Minimal icon button for bulk actions */
.btn-icon {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 6px;
    border-radius: 999px;
}
.btn-icon:hover {
    color: var(--primary-color);
    background: rgba(0, 220, 130, 0.08);
}
.btn-icon:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 220, 130, 0.25);
}

/* Sidebar Submenu Chevron Rotation */
.list-group-item[data-bs-toggle="collapse"] .fa-chevron-down {
    transition: transform 0.3s ease;
}

.list-group-item[data-bs-toggle="collapse"][aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

/* Custom Neon Buttons for Tables (Badge Style) */
.btn-neon-success {
    background-color: rgba(0, 220, 130, 0.1) !important;
    border: 1px solid rgba(0, 220, 130, 0.3) !important;
    color: #00dc82 !important;
    box-shadow: 0 0 5px rgba(0, 220, 130, 0.2);
    transition: all 0.3s ease;
}
.btn-neon-success:hover {
    background-color: rgba(0, 220, 130, 0.2) !important;
    box-shadow: 0 0 10px rgba(0, 220, 130, 0.4);
    color: #00dc82 !important;
    transform: translateY(-1px);
}

.btn-neon-danger-outline {
    background-color: rgba(220, 53, 69, 0.1) !important;
    border: 1px solid rgba(220, 53, 69, 0.3) !important;
    color: #dc3545 !important;
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.2);
    transition: all 0.3s ease;
}
.btn-neon-danger-outline:hover {
    background-color: rgba(220, 53, 69, 0.2) !important;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.4);
    color: #dc3545 !important;
    transform: translateY(-1px);
}
/* Genres table checkbox alignment */
.checkbox-cell {
    width: 40px;
    text-align: center;
}
.genre-checkbox {
    width: 18px;
    height: 18px;
}
.table-fixed {
    table-layout: fixed;
    width: 100%;
}

.chip {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 220, 130, 0.12);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 4px 10px;
    font-size: 0.85rem;
}
body.light-mode .chip {
    background: rgba(5, 150, 105, 0.1);
}
.chip .chip-remove {
    margin-left: 8px;
    color: #ccc;
    cursor: pointer;
}
.chip .chip-remove:hover {
    color: var(--primary-color);
}
.col-checkbox {
    width: 40px;
}
.col-equal {
    width: calc((100% - 40px) / 3);
}
.col-cover {
    width: 110px;
}
.col-equal-6 {
    width: calc((100% - 40px - 50px) / 6);
}
.table-series {
    table-layout: fixed;
    width: 100%;
}
.col-name {
    width: auto;
}
.col-small {
    width: 110px;
}
.col-medium {
    width: 140px;
}
.col-actions {
    width: 180px;
}
.col-date {
    width: 1%;
    white-space: nowrap;
}
.table-series td.cover-cell,
.table-series th.cover-cell {
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
}
.table-series td.checkbox-cell,
.table-series th.checkbox-cell {
    padding-right: 12px;
}
.cell-center {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
/* Global Loading Overlay */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

/* Upload: mini thumbnails */
#pages-preview-mini .card {
    border-color: var(--border-color);
}
#pages-preview-mini .mini-thumb-img {
    width: 100%;
    height: 110px;
    object-fit: cover;
}
@media (min-width: 992px) {
    #pages-preview-mini .mini-thumb-img {
        height: 130px;
    }
}

/* Full Preview Modal reader layout */
#fullPreviewModal .modal-body {
    display: block;
}
#full-preview-modal-body {
    max-width: 20rem;
    padding: 16px 24px;
    margin: 0 auto;
}
@media (min-width: 1400px) {
    #full-preview-modal-body {
        max-width: 900px;
    }
}
.reader-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin-bottom: 18px;
}

/* Modal transparency adjustments */
.modal-backdrop.show {
    background-color: #000;
    opacity: 0.25;
}
#fullPreviewModal .modal-content {
    background: rgba(0, 0, 0, 0.429);
    border: 1px solid #2a2e34;
}
body.light-mode #fullPreviewModal .modal-content {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--border-color);
    color: var(--text-main);
}
#pagesCurrentModal .modal-dialog {
    max-width: 100rem;
    margin: auto;
}
#pagesCurrentModal.show {
    display: flex !important;
    align-items: center;
}
#pagesCurrentModal .modal-content {
    background: rgba(0, 0, 0, 0.849);
    border: 1px solid #2a2e34;
    border-radius: 8px;
    height: auto;
    max-height: calc(100vh - 12vh);
    display: flex;
    flex-direction: column;
}
body.light-mode #pagesCurrentModal .modal-content {
    background: #ffffff;
    border-color: var(--border-color);
    color: var(--text-main);
}

#pagesCurrentModal .modal-header {
    padding: 0.5rem 0.75rem;
}
#pagesCurrentModal .modal-body {
    padding: 0.5rem 0.75rem;
    max-height: 75vh;
    overflow: auto;
    flex: 1 1 auto;
}
#pagesCurrentModal .pagination {
    margin-top: 0.5rem;
    margin-bottom: 0.15rem;
}

/* Fix for Series Edit Cover Image width */
#edit-cover-large {
    width: auto;
    max-width: 100px;
    height: auto;
    object-fit: cover;
    display: block;
    margin: 10px auto;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

@media (min-width: 992px) {
    #edit-cover-large {
        max-width: 300px;
    }
}

/* Hover Text Danger */
.hover-text-danger {
    transition: color 0.2s;
}
.hover-text-danger:hover {
    color: #dc3545 !important;
}

/* --- Custom Toasts --- */
.custom-toast {
    background-color: #1e2126;
    color: #fff;
    border-radius: 12px;
    padding: 16px 20px;
    min-width: 300px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    animation: slideInRight 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    border: 1px solid #2d3238;
    position: relative;
    overflow: hidden;
}

body.light-mode .custom-toast {
    background-color: #ffffff;
    color: #1f2937;
    border-color: #e5e7eb;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

.custom-toast.hiding {
    animation: slideOutRight 0.3s forwards;
}

.custom-toast .toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 0%;
    background-color: #00dc82; /* default success */
    transition: width linear;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.toast-deleted .toast-progress,
.toast-error .toast-progress {
    background-color: #ff4d4f;
}
.toast-success .toast-progress {
    background-color: #00dc82;
}

.toast-icon-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toast-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

/* Success / Saved / Created */
.toast-success .toast-icon {
    background-color: transparent;
    border: 2px solid #00dc82;
    color: #00dc82;
}

/* Deleted */
.toast-deleted .toast-icon {
    background-color: transparent;
    border: 2px solid #ff4d4f;
    color: #ff4d4f;
}

/* Error */
.toast-error .toast-icon {
    background-color: transparent;
    border: 2px solid #ff4d4f;
    color: #ff4d4f;
}

.toast-message {
    font-weight: 600;
    font-size: 1rem;
}

.toast-close {
    background: transparent;
    border: none;
    color: #6c757d;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    margin-left: 15px;
    line-height: 1;
}

/* Custom Input Dark Theme */
.bg-dark-input {
    background-color: var(--bg-input);
    color: var(--text-main);
    border-color: var(--border-color);
}
.bg-dark-input:focus {
    background-color: var(--bg-input);
    color: var(--text-main);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(0, 220, 130, 0.25);
}

.toast-close:hover {
    color: #fff;
}
body.light-mode .toast-close:hover {
    color: #000;
}

/* --- Custom Confirm Modal --- */
.custom-modal-content {
    background-color: #1a1d21;
    border-radius: 16px;
    border: 1px solid #2d3238;
}
body.light-mode .custom-modal-content {
    background-color: #ffffff;
    border-color: #e5e7eb;
}

.btn-custom-cancel {
    background: transparent;
    border: 2px solid #00dc82;
    color: #00dc82;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s;
}
.btn-custom-cancel:hover {
    background: rgba(0, 220, 130, 0.1);
    color: #00dc82;
}

.btn-custom-confirm {
    background-color: #e91e63; /* Pinkish red */
    border: 2px solid #e91e63;
    color: white;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s;
}
.btn-custom-confirm:hover {
    background-color: #d81b60;
    border-color: #d81b60;
    color: white;
}

/* Report Modal (reutilizado del sitio principal) */
.report-modal {
    background: #0b0b0e !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5) !important;
    position: relative;
    overflow: hidden;
    min-height: 380px;
}
.report-modal::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    padding: 2px;
    background: conic-gradient(from 180deg, rgba(245,65,65,0.55), rgba(245,65,65,0.15), rgba(245,65,65,0.55));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: urgentPulse 3s linear infinite;
}

.report-modal .modal-body > .mb-3,
.report-modal .modal-body > .mb-2 {
    margin-bottom: 1rem !important;
}
#reportPreviewModal .modal-dialog {
    max-width: 640px;
}
@media (min-width: 992px) {
    #reportPreviewModal .modal-dialog {
        max-width: 720px;
    }
}
.report-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(34,10,14,1);
    border: 1px solid rgba(245,65,65,0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f54242;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
    font-size: 16px;
}
.report-modal .form-select,
.report-modal .form-control {
    background-color: #0f1115 !important;
    border: 1px solid rgba(245,65,65,0.25) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
}
.report-modal .form-select:focus,
.report-modal .form-control:focus {
    border-color: rgba(245,65,65,0.7) !important;
    box-shadow: 0 0 0 3px rgba(245,65,65,0.18) !important;
    background-color: #121317 !important;
}
#report-preview-description.report-textarea {
    min-height: 160px;
}
#report-preview-count {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
}
.report-badge {
    display: inline-block;
    background: rgba(245,65,65,0.12);
    border: 1px solid rgba(245,65,65,0.35);
    color: #f54242;
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 600;
    font-size: 0.85rem;
}

.extra-small2 {
    font-size: 0.75rem;
}

#section-reports table thead th:nth-child(5),
#section-reports table tbody td:nth-child(5) {
    display: none !important;
}
#section-reports .table-series th,
#section-reports .table-series td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    padding: 8px 12px;
}
#section-reports .table-series td:nth-child(2) span {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#section-reports .table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-bg-type: var(--bs-table-bg) !important;
    --bs-table-striped-bg: transparent !important;
    background-color: var(--bs-table-bg) !important;
}
#section-reports .table-series tbody tr {
    height: 64px;
}
.report-row.is-selected {
    background-color: rgba(0, 220, 130, 0.06);
}
.report-row.select-anim {
    animation: rowSelect 400ms ease-out;
}
@keyframes rowSelect {
    0% { background-color: transparent; }
    50% { background-color: rgba(0, 220, 130, 0.12); }
    100% { background-color: rgba(0, 220, 130, 0.06); }
}
#section-reports .report-row.is-selected td {
    background-color: rgba(0, 220, 130, 0.06);
}
#section-reports .report-row.select-anim td {
    animation: rowCellSelect 400ms ease-out;
}
@keyframes rowCellSelect {
    0% { background-color: transparent; }
    50% { background-color: rgba(0, 220, 130, 0.12); }
    100% { background-color: rgba(0, 220, 130, 0.06); }
}
#section-reports .report-row.is-selected td:first-child {
    box-shadow: inset 3px 0 0 rgba(0, 220, 130, 0.6);
}
#section-reports .table-series th:nth-child(1),
#section-reports .table-series td:nth-child(1) {
    width: 6%;
}
#section-reports .table-series th:nth-child(2),
#section-reports .table-series td:nth-child(2) {
    width: 40%;
}
#section-reports .table-series th:nth-child(4),
#section-reports .table-series td:nth-child(4) {
    width: 17%;
}
#section-reports .table-series th:nth-child(6),
#section-reports .table-series td:nth-child(6) {
    width: 17%;
}
#section-reports .table-series th:nth-child(7),
#section-reports .table-series td:nth-child(7) {
    width: 10%;
    white-space: nowrap;
}
.report-tip .report-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(0, 220, 130, 0.08);
    border: 1px solid rgba(0, 220, 130, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 14px;
}
.report-preview-card {
    background: linear-gradient(180deg, rgba(26,29,33,1), rgba(18,19,23,1));
    border: 1px solid rgba(0, 220, 130, 0.18);
}
.report-cover {
    width:80px;
    height:120px;
    background:#111;
    border:1px solid var(--border-color);
    flex-shrink:0;
    background-size:cover;
    background-position:center;
}
.badge-report-type {
    background: rgba(0, 220, 130, 0.12);
    border: 1px solid rgba(0, 220, 130, 0.35);
    color: var(--primary-color);
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 0.75rem;
}
.badge-report-date {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: #ddd;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 0.75rem;
}
.badge-report-label {
    background: rgba(0, 220, 130, 0.12);
    border: 1px solid rgba(0, 220, 130, 0.35);
    color: var(--primary-color);
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 600;
    font-size: 0.8rem;
}
.btn-report-send {
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
    color: #000;
    border-radius: 8px;
    font-weight: 600;
}
.btn-report-send:hover {
    background-color: #00b36b;
    border-color: #00b36b;
    color: #fff;
}
#section-reports .report-preview-card .fw-bold {
    margin-bottom: 8px;
}
#section-reports .report-preview-card .d-flex.align-items-center.gap-2.mt-1 {
    gap: 10px !important;
    margin-top: 6px !important;
    margin-bottom: 8px !important;
}
#section-reports .report-preview-card textarea#reply-admin-text {
    margin-top: 8px;
}
#section-reports .report-preview-card .d-flex.gap-2 {
    margin-top: 10px;
}
#section-reports .bg-dark-card {
    overflow-x: hidden;
}
/* Reports table: hide Date column and avoid horizontal scroll */
#section-reports .table-responsive {
    overflow-x: hidden !important;
}
#section-reports table thead th:nth-child(5),
#section-reports table tbody td:nth-child(5) {
    display: none !important;
}
#section-reports .table-series td:nth-child(2) span {
    white-space: normal;
    word-break: break-word;
}
body.loading-overlay-active {
    overflow: hidden;
}

/* Neon Gauges for Dashboard */
.neon-gauge-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(0, 242, 234, 0.3); /* Default Tech Border */
    box-shadow: 0 0 10px rgba(0, 242, 234, 0.05); /* Slight glow default */
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.neon-gauge-card:hover {
    border-color: rgba(0, 242, 234, 0.6);
    box-shadow: 0 0 20px rgba(0, 242, 234, 0.2);
    transform: scale(1.02);
}
.neon-gauge-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at top right, rgba(0, 242, 234, 0.05), transparent 40%);
    pointer-events: none;
}

/* Light Mode Overrides for Neon Gauges */
body.light-mode .neon-gauge-card {
    background: #ffffff !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}
body.light-mode .neon-gauge-card::before {
    display: none;
}

/* Light Mode Dropdown Hover Fix */
body.light-mode .dropdown-item:hover,
body.light-mode .dropdown-item:focus {
    background-color: #f1f5f9 !important; /* Slate 100 */
    color: var(--primary-color) !important;
}
.progress-ring__circle {
    transition: stroke-dashoffset 0.8s ease-in-out;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}
.metric-value {
    font-family: 'Courier New', monospace;
    letter-spacing: -1px;
}

/* Sidebar Submenu Transition */
.list-group-item[data-bs-toggle="collapse"] .fa-chevron-down {
    transition: transform 0.3s ease;
}
.list-group-item[data-bs-toggle="collapse"][aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

/* --- Mobile Adaptation for Comics Section --- */
@media (max-width: 768px) {
        /* --- Series Detail (Edit & Chapters) --- */
        #section-series-detail > #series-detail-content > .d-flex.justify-content-between.align-items-center.mb-4 {
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 8px !important;
        }
        #section-series-detail > #series-detail-content > .d-flex h3 {
            font-size: 1.25rem !important;
            text-align: center !important;
            margin: 0 !important;
        }
        #section-series-detail > #series-detail-content > .d-flex .btn.btn-secondary {
            width: 100% !important;
        }

        /* Top buttons under "Capítulos" */
        #section-series-detail .d-flex.gap-2.flex-wrap.justify-content-end {
            gap: 6px !important;
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
            justify-content: flex-start !important;
        }
        #section-series-detail .d-flex.gap-2.flex-wrap.justify-content-end .btn-action.btn-sm {
            font-size: 0.75rem !important;
            padding: 0 !important;
            min-width: 40px !important;
            width: 40px !important;
            height: 36px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        #section-series-detail .d-flex.gap-2.flex-wrap.justify-content-end .btn-action.btn-sm span {
            display: none !important;
        }

        /* Card paddings */
        #section-series-detail .bg-dark-card.rounded.p-4.shadow-sm {
            padding: 0.85rem !important;
        }

        /* Filters: bulk + search */
        #section-series-detail .bg-dark-card .d-flex.align-items-center.mb-2 {
            flex-wrap: wrap !important;
            gap: 8px !important;
        }
        #section-series-detail #detail-chapters-bulk-menu {
            order: 2;
        }
        #section-series-detail .input-group.ms-auto {
            order: 1;
            margin-left: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
        }
        #section-series-detail .input-group .form-control,
        #section-series-detail .input-group .input-group-text {
            font-size: 0.85rem !important;
            padding: 0.4rem 0.5rem !important;
            height: auto !important;
        }

        /* Chapters table -> stacked cards */
        #section-series-detail .table-responsive {
            overflow-x: visible !important;
        }
        #section-series-detail table.table {
            width: 100% !important;
        }
        #section-series-detail table.table thead {
            display: none !important;
        }
        #section-series-detail table.table,
        #section-series-detail table.table tbody,
        #section-series-detail table.table tr {
            width: 100% !important;
        }
        #section-series-detail colgroup { 
            display: none !important; 
        }
        #section-series-detail table.table tbody tr {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            grid-auto-rows: auto !important;
            column-gap: 8px !important;
            row-gap: 6px !important;
            border: 1px solid var(--border-color) !important;
            border-radius: 10px !important;
            background: var(--bg-card) !important;
            padding: 8px !important;
            margin-bottom: 10px !important;
        }
        #section-series-detail table.table td {
            border: none !important;
            padding: 4px 6px !important;
            font-size: 0.9rem !important;
            display: block !important; /* still flex item */
            width: 100% !important;
        }
        #section-series-detail table.table td::before {
            display: none !important;
        }
        #section-series-detail table.table td.checkbox-cell {
            grid-column: 1 / 2 !important;
            grid-row: 1 !important;
            padding-top: 2px !important;
        }
        #section-series-detail table.table td:nth-child(2) {
            grid-column: 1 / 2 !important;
            grid-row: 1 !important;
            font-weight: 700;
            background: rgba(255,255,255,0.06);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 4px 8px !important;
            margin-right: 6px !important;
        }
        #section-series-detail table.table td:nth-child(3) {
            grid-column: 1 / 2 !important;
            grid-row: 2 !important;
            min-width: 0;
        }
        #section-series-detail table.table td:nth-child(4),
        #section-series-detail table.table td:nth-child(5),
        #section-series-detail table.table td:nth-child(6) {
            grid-column: 2 / 3 !important;
            min-width: 0;
            background: rgba(255,255,255,0.04);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 6px 8px !important;
            margin-right: 6px !important;
            color: var(--text-main);
        }
        #section-series-detail table.table td:nth-child(4) { grid-row: 1 !important; }
        #section-series-detail table.table td:nth-child(5) { grid-row: 2 !important; }
        #section-series-detail table.table td:nth-child(6) { grid-row: 3 !important; }
        #section-series-detail table.table td:nth-child(4)::before { content: "Visitas: "; display: inline !important; color: var(--text-secondary) !important; font-size: 0.75rem !important; margin-right: 4px !important; }
        #section-series-detail table.table td:nth-child(5)::before { content: "Visible: "; display: inline !important; color: var(--text-secondary) !important; font-size: 0.75rem !important; margin-right: 4px !important; }
        #section-series-detail table.table td:nth-child(6)::before { content: "Publicado: "; display: inline !important; color: var(--text-secondary) !important; font-size: 0.75rem !important; margin-right: 4px !important; }
        #section-series-detail table.table td:last-child {
            grid-column: 2 / 3 !important;
            grid-row: 4 !important;
            display: flex !important;
            justify-content: flex-end !important;
            align-items: center !important;
            gap: 6px !important;
            padding-top: 4px !important;
            text-align: right !important;
        }
        #section-series-detail table.table td:last-child::before {
            content: "Acciones";
            margin-right: auto !important;
            color: var(--text-secondary) !important;
            font-size: 0.75rem !important;
        }
        #section-series-detail table.table .btn.btn-sm {
            padding: 4px 8px !important;
            font-size: 0.8rem !important;
        }

        /* Selection bar + pagination compact */
        #section-series-detail #detail-chapters-selection-bar {
            font-size: 0.85rem !important;
            padding: 6px 8px !important;
        }
        #section-series-detail .row.align-items-center.mt-2 {
            flex-direction: column !important;
            gap: 6px !important;
        }
        #section-series-detail .row.align-items-center.mt-2 > div {
            width: 100% !important;
            justify-content: center !important;
            text-align: center !important;
        }
        #section-series-detail .pagination .page-link {
            padding: 0.35rem 0.6rem !important;
            font-size: 0.8rem !important;
        }

    /* 0. Header & Top Controls Adaptation */
    #section-series > .d-flex.justify-content-between.align-items-center.mb-4 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        margin-bottom: 0.8rem !important;
    }
    
    #section-series h3 {
        font-size: 1.25rem !important;
        text-align: center;
        margin-bottom: 0.5rem !important;
    }

    #section-series > .d-flex.justify-content-between.align-items-center.mb-4 > .d-flex.gap-2 {
        width: 100%;
        justify-content: space-between;
    }
    
    #section-series .btn-primary-custom {
        padding: 0.4rem 0.5rem !important;
        font-size: 0.7rem !important;
        flex: 1;
    }
    
    #section-series .btn-group .btn {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.7rem !important;
    }

    /* 1. Stack & Compact Filters Toolbar */
    #section-series .bg-dark-card > .d-flex.align-items-center.mb-2 {
        flex-direction: row !important; /* Allow wrapping */
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px !important;
    }

    /* Wrappers Layout */
    
    /* Search: Full Width (Row 1) */
    #section-series .input-group.ms-auto {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-bottom: 2px !important;
    }

    /* Filter Wrappers (Type, Status, Visibility, Owner): 2 per row */
    #section-series .bg-dark-card > .d-flex.align-items-center.mb-2 > .ms-2,
    #section-series #series-owner-filter-wrap {
        width: calc(50% - 4px) !important; /* 50% - half gap */
        max-width: 100% !important;
        margin-left: 0 !important;
    }
    
    /* Ensure select elements fill their wrappers */
    #section-series select[id$="-filter"] {
        width: 100% !important;
    }
    
    #section-series .form-select,
    #section-series .form-control {
        font-size: 0.75rem !important; /* Smaller text */
        padding: 0.25rem 0.4rem !important; /* Smaller padding */
        height: auto !important;
    }

    /* 2. Optimize Table View */
    /* Ensure table scrolls horizontally */
    #section-series .table-series {
        min-width: 1000px; /* Increased from 800px to avoid column overlap */
        table-layout: auto !important; /* Change to auto on mobile to allow content-based width */
    }

    /* Compact Table Cells */
    #section-series .table-series td,
    #section-series .table-series th {
        padding: 8px 4px !important; /* Increased from 1px 3px for better readability */
        font-size: 0.75rem !important; /* Slightly larger text */
    }

    #section-series .table-series td:nth-child(3) {
        min-width: 200px; /* Ensure name column has space */
    }

    #section-series .table-series td:nth-child(3) .text-truncate-multiline {
        max-width: none !important; /* Allow it to take min-width of parent */
        -webkit-line-clamp: 2;
    }

    /* Compact Action Buttons */
    #section-series .table-series .btn-icon {
        width: 22px !important;
        height: 22px !important;
        padding: 0 !important;
        font-size: 0.65rem !important;
    }
    
    /* 3. Stack & Compact Pagination Controls */
    .row.align-items-center.mt-2 {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 1rem !important;
    }

    .row.align-items-center.mt-2 > div {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 0 !important;
    }
    
    /* 3.1 Results Info - VISIBLE on Mobile with smaller font */
    [id$="-pagination-info"] {
        display: block !important;
        font-size: 0.7rem !important;
        margin-bottom: 2px !important;
    }

    /* 3.3 Pagination Buttons - KEEP Visible */
    .pagination {
        justify-content: center !important;
        margin-bottom: 0 !important;
    }
    
    .pagination .page-link {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* 4. Optimize Grid View for Mobile */
    #series-grid-view {
        --bs-gutter-x: 0.35rem !important; /* Even tighter gap (between g-1 and g-2) */
        --bs-gutter-y: 0.5rem !important;
    }

    /* Card Content Adaptation */
    .comic-card {
        border-radius: 6px !important;
    }

    .comic-card .card-body {
        padding: 0.5rem !important;
    }

    .comic-card .card-title {
        font-size: 0.68rem !important;
        margin-bottom: 0.4rem !important;
        max-height: 2.8em !important;
        line-height: 1.4 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Visibility Badge (Top Right) */
    .comic-card .position-absolute.top-0.end-0 .badge {
        font-size: 0.55rem !important;
        padding: 0.35em 0.5em !important;
    }

    /* Stats (Caps/Views) */
    .comic-card .card-body .px-1.mb-2 {
        margin-bottom: 0.3rem !important;
    }

    .comic-card .card-body .text-white.small {
        font-size: 0.6rem !important;
    }

    .comic-card .card-body .text-white.small i {
        font-size: 0.55rem !important;
    }

    /* Status and Date */
    .comic-card .card-body .badge.rounded-pill {
        font-size: 0.5rem !important;
        padding: 0.25em 0.5em !important;
    }

    .comic-card .card-body .text-muted.small {
        font-size: 0.55rem !important;
    }

    /* Action Buttons */
    .comic-card .card-body .btn-sm {
        padding: 0.2rem 0 !important;
        font-size: 0.65rem !important;
    }
}