/* ===== GENERAL STYLES ===== */
:root {
    --primary: #3490dc;
    --secondary: #6c757d;
    --success: #38c172;
    --danger: #e3342f;
    --warning: #ffed4a;
    --info: #6cb2eb;
    --light: #f8f9fa;
    --dark: #343a40;
    --bg-dark: #121212;
    --bg-light: #f8f9fa;
}

body {
    font-family: 'Nunito', sans-serif;
    background-color: var(--bg-light);
    color: #333;
}

/* Tema oscuro para la navegación */
.navbar-dark {
    background-color: var(--bg-dark) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ===== CARD STYLES ===== */
.card {
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 20px;
    border: none;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.card-header {
    background-color: rgba(0, 0, 0, 0.03);
    font-weight: bold;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

.card-img-top {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    object-fit: cover;
}

/* ===== BUTTON STYLES ===== */
.btn {
    border-radius: 6px;
    font-weight: 600;
    padding: 8px 16px;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover {
    background-color: #2779bd;
    border-color: #2779bd;
}

.btn-secondary {
    background-color: var(--secondary);
    border-color: var(--secondary);
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:hover {
    background-color: var(--primary);
    color: white;
}

.btn-danger {
    background-color: var(--danger);
    border-color: var(--danger);
}

.btn-danger:hover {
    background-color: #cc1f1a;
    border-color: #cc1f1a;
}

/* ===== BADGE STYLES ===== */
.badge {
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 6px;
}

/* ===== FORM STYLES ===== */
.form-control {
    border-radius: 6px;
    border: 1px solid #ddd;
    padding: 10px 15px;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.25);
}

.form-select {
    border-radius: 6px;
    border: 1px solid #ddd;
    padding: 10px 15px;
    height: auto;
}

.form-label {
    font-weight: 600;
    margin-bottom: 8px;
}

/* ===== TABLE STYLES ===== */
.table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

.table thead th {
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 2px solid #dee2e6;
    padding: 12px;
    font-weight: 600;
}

.table tbody td {
    padding: 12px;
    vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

/* ===== GAME LIST STYLES ===== */
.game-card {
    height: 100%;
}

.game-card .card-img-top {
    height: 200px;
    object-fit: cover;
}

.platform-badge {
    font-size: 0.75rem;
    margin-right: 4px;
    margin-bottom: 4px;
    display: inline-block;
}

.rating-badge {
    font-size: 0.9rem;
    padding: 6px 10px;
    font-weight: bold;
}

/* ===== GAME DETAIL STYLES ===== */
.game-cover {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 100%;
}

.game-info {
    margin-bottom: 30px;
}

.game-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.game-description {
    line-height: 1.8;
    font-size: 1.1rem;
}

.platform-card {
    transition: transform 0.3s ease;
}

.platform-card:hover {
    transform: translateY(-5px);
}

/* ===== GAME DETAILS COMPONENT STYLES ===== */
.details-grid {
    display: flex;
    flex-direction: column;
}

.detail-item {
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.detail-item:hover {
    border-color: rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.library-status-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.status-item, .stat-item {
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.status-item:hover, .stat-item:hover {
    border-color: rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* ===== TOGGLE EDIT BUTTON STYLES ===== */
.toggle-edit {
    cursor: pointer;
    border: none;
    background: transparent;
    transition: all 0.3s ease;
}

.toggle-edit:hover {
    transform: scale(1.1);
}

.toggle-edit:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* ===== FORM EDIT STYLES ===== */
.edit-form {
    display: none;
}

.edit-form.active {
    display: block;
}

/* ===== PHYSICAL CONDITION SECTION ===== */
.physical-condition-section {
    transition: opacity 0.3s ease;
}

.physical-condition-section.hidden {
    opacity: 0.5;
    pointer-events: none;
}

/* ===== PAGINATION STYLES ===== */
.pagination {
    justify-content: center;
    margin-top: 30px;
}

.page-item .page-link {
    padding: 10px 16px;
    color: var(--primary);
    border-radius: 6px;
    margin: 0 3px;
}

.page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Remover completamente los SVG de paginación */
.pagination svg {
    display: none !important;
}

/* Reemplazar con símbolos de flecha */
.page-item:first-child .page-link::after {
    content: "«";
    font-size: 18px;
}

.page-item:last-child .page-link::after {
    content: "»";
    font-size: 18px;
}

/* Asegurar que los contenedores tengan el tamaño correcto */
.page-item:first-child .page-link,
.page-item:last-child .page-link {
    padding: 7px 14px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
}

/* ===== FILTER FORM STYLES ===== */
.games-filter-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.games-filter-form .search-input,
.games-filter-form .filter-select,
.games-filter-form .format-select {
    flex: 1;
    min-width: 0;
    width: 100%;
}

.games-filter-form input,
.games-filter-form select {
    width: 100%;
}

.games-filter-form .btn-group {
    white-space: nowrap;
}

/* Asegurar que los elementos no se compriman demasiado en pantallas pequeñas */
@media (max-width: 768px) {
    .games-filter-form {
        flex-wrap: wrap;
    }
    
    .games-filter-form .search-input,
    .games-filter-form .filter-select,
    .games-filter-form .format-select,
    .games-filter-form .btn-group {
        flex-basis: 100%;
        margin-bottom: 0.5rem;
    }
}


/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 767.98px) {
    .card-title {
        font-size: 1.1rem;
    }
    
    .game-title {
        font-size: 1.8rem;
    }
    
    .btn {
        padding: 6px 12px;
        font-size: 0.9rem;
    }
}

/* ===== DARK MODE ===== */
body.dark-mode {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

/* Navbar en modo oscuro */
body.dark-mode .navbar {
    box-shadow: none !important;
    border-bottom: 1px solid #2d2d2d !important;
    background-color: #0d0d0d !important;
}

body.dark-mode .navbar-brand {
    color: #fff !important;
}

body.dark-mode .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-mode .nav-link:hover {
    color: #fff !important;
}

body.dark-mode .nav-link.active {
    color: #fff !important;
}

/* Cards en modo oscuro */
body.dark-mode .card {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border-color: #404040;
}

body.dark-mode .card-body {
    background-color: #2d2d2d;
}

body.dark-mode .card-header {
    background-color: #252525;
    border-color: #404040;
    color: #e0e0e0;
}

body.dark-mode .card-footer {
    background-color: #252525;
    border-color: #404040;
    color: #e0e0e0;
}

/* Elementos de detalles/stats en modo oscuro */
body.dark-mode .stat-item,
body.dark-mode .status-item,
body.dark-mode .detail-item {
    background-color: #3a3a3a !important;
    border-color: #505050 !important;
    color: #e0e0e0;
}

body.dark-mode .stat-item:hover,
body.dark-mode .status-item:hover,
body.dark-mode .detail-item:hover {
    background-color: #404040 !important;
    border-color: #606060 !important;
}

/* Textos en modo oscuro */
body.dark-mode .text-muted {
    color: #999 !important;
}

body.dark-mode .text-dark {
    color: #e0e0e0 !important;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: #e0e0e0;
}

/* Formularios en modo oscuro */
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #3a3a3a;
    border-color: #505050;
    color: #e0e0e0;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: #404040;
    border-color: #606060;
    color: #e0e0e0;
}

body.dark-mode .form-control::placeholder {
    color: #888;
}

/* Badges en modo oscuro */
body.dark-mode .badge.bg-secondary {
    background-color: #505050 !important;
}

body.dark-mode .badge.bg-light {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
}

/* Tablas en modo oscuro */
body.dark-mode .table {
    color: #e0e0e0;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #2d2d2d;
}

body.dark-mode .table-hover > tbody > tr:hover {
    background-color: #3a3a3a;
}

/* Modales en modo oscuro */
body.dark-mode .modal-content {
    background-color: #2d2d2d;
    border-color: #404040;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    border-color: #404040;
}

/* Dropdowns en modo oscuro */
body.dark-mode .dropdown-menu {
    background-color: #2d2d2d;
    border-color: #404040;
}

body.dark-mode .dropdown-item {
    color: #e0e0e0;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: #3a3a3a;
    color: #fff;
}

body.dark-mode .dropdown-divider {
    border-color: #404040;
}

/* Alerts en modo oscuro */
body.dark-mode .alert {
    background-color: #3a3a3a;
    border-color: #505050;
    color: #e0e0e0;
}

/* Paginación en modo oscuro */
body.dark-mode .pagination .page-link {
    background-color: #3a3a3a;
    border-color: #505050;
    color: #e0e0e0;
}

body.dark-mode .pagination .page-link:hover {
    background-color: #404040;
    border-color: #606060;
    color: #fff;
}

body.dark-mode .pagination .page-item.active .page-link {
    background-color: #505050;
    border-color: #606060;
}

body.dark-mode .pagination .page-item.disabled .page-link {
    background-color: #2d2d2d;
    color: #666;
}

/* Breadcrumb en modo oscuro */
body.dark-mode .breadcrumb {
    background-color: #2d2d2d;
}

body.dark-mode .breadcrumb-item + .breadcrumb-item::before {
    color: #888;
}

/* List groups en modo oscuro */
body.dark-mode .list-group-item {
    background-color: #3a3a3a;
    border-color: #505050;
    color: #e0e0e0;
}

body.dark-mode .list-group-item:hover {
    background-color: #404040;
}

/* Progress bars mantienen sus colores */
body.dark-mode .progress {
    background-color: #3a3a3a;
}

/* Footer en modo oscuro */
body.dark-mode footer {
    background-color: #0d0d0d;
    color: #888;
}

/* Borders generales */
body.dark-mode .border,
body.dark-mode [class*="border-"] {
    border-color: #404040 !important;
}

/* Links en modo oscuro */
body.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: #6eb4ff;
}

body.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: #9bcfff;
}

/* Shadows en modo oscuro - más sutiles */
body.dark-mode .shadow,
body.dark-mode .shadow-sm,
body.dark-mode .shadow-lg {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
}

/* Botones en modo oscuro */
body.dark-mode .btn-secondary {
    background-color: #505050;
    border-color: #505050;
    color: #fff;
}

body.dark-mode .btn-secondary:hover {
    background-color: #606060;
    border-color: #606060;
}

body.dark-mode .btn-outline-secondary {
    color: #e0e0e0;
    border-color: #505050;
}

body.dark-mode .btn-outline-secondary:hover {
    background-color: #505050;
    border-color: #505050;
    color: #fff;
}

body.dark-mode .btn-light {
    background-color: #3a3a3a;
    border-color: #505050;
    color: #e0e0e0;
}

body.dark-mode .btn-light:hover {
    background-color: #404040;
    border-color: #606060;
    color: #fff;
}

body.dark-mode .btn-outline-light {
    color: #e0e0e0;
    border-color: #505050;
}

body.dark-mode .btn-outline-light:hover {
    background-color: #3a3a3a;
    border-color: #505050;
    color: #fff;
}

/* Background utilities en modo oscuro */
body.dark-mode .bg-light {
    background-color: #2d2d2d !important;
}

body.dark-mode .bg-white {
    background-color: #2d2d2d !important;
}

body.dark-mode .bg-dark {
    background-color: #1a1a1a !important;
}

/* Text utilities en modo oscuro */
body.dark-mode .text-body {
    color: #e0e0e0 !important;
}

body.dark-mode .text-white {
    color: #fff !important;
}

body.dark-mode .text-black-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Inputs de archivos en modo oscuro */
body.dark-mode .form-control[type="file"] {
    background-color: #3a3a3a;
    border-color: #505050;
    color: #e0e0e0;
}

body.dark-mode .form-control[type="file"]::file-selector-button {
    background-color: #505050;
    border-color: #606060;
    color: #e0e0e0;
}

/* Checkboxes y radios en modo oscuro */
body.dark-mode .form-check-input {
    background-color: #3a3a3a;
    border-color: #505050;
}

body.dark-mode .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

body.dark-mode .form-check-label {
    color: #e0e0e0;
}

/* Tabs en modo oscuro */
body.dark-mode .nav-tabs {
    border-color: #404040;
}

body.dark-mode .nav-tabs .nav-link {
    color: #999;
    background-color: transparent;
    border-color: transparent;
}

body.dark-mode .nav-tabs .nav-link:hover {
    border-color: #404040;
    color: #e0e0e0;
}

body.dark-mode .nav-tabs .nav-link.active {
    background-color: #2d2d2d;
    border-color: #404040 #404040 #2d2d2d;
    color: #e0e0e0;
}

body.dark-mode .tab-content {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

/* Tooltips en modo oscuro */
body.dark-mode .tooltip-inner {
    background-color: #3a3a3a;
    color: #e0e0e0;
}

body.dark-mode .bs-tooltip-top .tooltip-arrow::before,
body.dark-mode .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: #3a3a3a;
}

body.dark-mode .bs-tooltip-bottom .tooltip-arrow::before,
body.dark-mode .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: #3a3a3a;
}

/* Popovers en modo oscuro */
body.dark-mode .popover {
    background-color: #2d2d2d;
    border-color: #404040;
}

body.dark-mode .popover-header {
    background-color: #252525;
    border-color: #404040;
    color: #e0e0e0;
}

body.dark-mode .popover-body {
    color: #e0e0e0;
}

/* Acordeones en modo oscuro */
body.dark-mode .accordion-item {
    background-color: #2d2d2d;
    border-color: #404040;
}

body.dark-mode .accordion-button {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

body.dark-mode .accordion-button:not(.collapsed) {
    background-color: #3a3a3a;
    color: #fff;
}

body.dark-mode .accordion-body {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

/* Spinner/Loading en modo oscuro */
body.dark-mode .spinner-border,
body.dark-mode .spinner-grow {
    color: #e0e0e0;
}

/* Close button en modo oscuro */
body.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Input groups en modo oscuro */
body.dark-mode .input-group-text {
    background-color: #3a3a3a;
    border-color: #505050;
    color: #e0e0e0;
}

/* HR separators en modo oscuro */
body.dark-mode hr {
    border-color: #404040;
    opacity: 1;
}

/* Code blocks en modo oscuro */
body.dark-mode code,
body.dark-mode pre {
    background-color: #252525;
    color: #e0e0e0;
    border-color: #404040;
}

/* Blockquotes en modo oscuro */
body.dark-mode blockquote {
    border-left-color: #505050;
    color: #bbb;
}

/* ===== DARK MODE - CORRECCIONES ADICIONALES ===== */

/* Alerts con colores específicos en dark mode */
body.dark-mode .alert-info {
    background-color: #1a3a4a;
    border-color: #2a5a6a;
    color: #8ecae6;
}

body.dark-mode .alert-warning {
    background-color: #3d3418;
    border-color: #5a4d20;
    color: #f0d060;
}

body.dark-mode .alert-danger {
    background-color: #3d1a1a;
    border-color: #5a2020;
    color: #f0a0a0;
}

body.dark-mode .alert-success {
    background-color: #1a3d1a;
    border-color: #205a20;
    color: #a0f0a0;
}

body.dark-mode .alert-secondary {
    background-color: #2d2d2d;
    border-color: #404040;
    color: #ccc;
}

body.dark-mode .alert-primary {
    background-color: #1a2a4a;
    border-color: #2a3a5a;
    color: #8ab4f0;
}

/* Table headers en dark mode */
body.dark-mode .table-light th,
body.dark-mode .table-light td,
body.dark-mode .table-light {
    background-color: #353535 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .table-bordered {
    border-color: #404040;
}

body.dark-mode .table-bordered th,
body.dark-mode .table-bordered td {
    border-color: #404040;
}

body.dark-mode .table th {
    color: #e0e0e0;
    border-color: #404040;
}

body.dark-mode .table td {
    border-color: #404040;
}

/* Bootstrap 5 bg utilities */
body.dark-mode .bg-body-secondary,
body.dark-mode .bg-body-tertiary {
    background-color: #252525 !important;
}

/* Text utilities exhaustivos */
body.dark-mode .text-black {
    color: #e0e0e0 !important;
}

body.dark-mode p,
body.dark-mode span:not(.badge):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-primary),
body.dark-mode label,
body.dark-mode li {
    color: #e0e0e0;
}

body.dark-mode .form-label {
    color: #e0e0e0;
}

body.dark-mode .form-text {
    color: #999 !important;
}

/* Links en alerts */
body.dark-mode .alert a {
    color: inherit;
    text-decoration: underline;
}

/* Offcanvas en dark mode */
body.dark-mode .offcanvas {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border-color: #404040;
}

body.dark-mode .offcanvas-header {
    border-color: #404040;
}

body.dark-mode .offcanvas-title {
    color: #e0e0e0;
}

/* Toast en dark mode */
body.dark-mode .toast {
    background-color: #2d2d2d;
    border-color: #404040;
    color: #e0e0e0;
}

body.dark-mode .toast-header {
    background-color: #353535;
    border-color: #404040;
    color: #e0e0e0;
}

/* Inline styles override en dark mode */
body.dark-mode [style*="background-color: #f8f9fa"],
body.dark-mode [style*="background:#f8f9fa"],
body.dark-mode [style*="background: #f8f9fa"] {
    background-color: #2d2d2d !important;
}

body.dark-mode [style*="background-color: #ffffff"],
body.dark-mode [style*="background-color: #fff"] {
    background-color: #2d2d2d !important;
}

body.dark-mode [style*="color: #333"],
body.dark-mode [style*="color:#333"] {
    color: #e0e0e0 !important;
}

body.dark-mode [style*="color: #666"],
body.dark-mode [style*="color:#666"],
body.dark-mode [style*="color: #6c757d"],
body.dark-mode [style*="color: #495057"] {
    color: #999 !important;
}

/* Badge bg-light text fix */
body.dark-mode .badge.bg-light {
    background-color: #404040 !important;
    color: #e0e0e0 !important;
}

/* Selects disabled / readonly */
body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly],
body.dark-mode .form-select:disabled {
    background-color: #2a2a2a;
    color: #999;
    border-color: #404040;
}

/* Card con bg-light o bg-white dentro de dark mode */
body.dark-mode .card .bg-light,
body.dark-mode .card .bg-white {
    background-color: #353535 !important;
}

/* Figcaption y small dentro de cards */
body.dark-mode .card small,
body.dark-mode .card .small {
    color: #999;
}

/* Strong y bold text */
body.dark-mode strong,
body.dark-mode b {
    color: #f0f0f0;
}

/* Placeholder images/divs con fondo claro */
body.dark-mode .game-cover-placeholder,
body.dark-mode .platform-cover-placeholder {
    background-color: #353535 !important;
    color: #888 !important;
}

/* Hero sections con gradientes en dark mode */
body.dark-mode .hero-section,
body.dark-mode .modern-title-container {
    border-color: #404040 !important;
}

/* Description text box en dark mode */
body.dark-mode .description-text {
    background: linear-gradient(135deg, rgba(45, 45, 45, 0.6) 0%, rgba(37, 37, 37, 0.6) 100%) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .description-text p {
    color: #ccc !important;
}

/* Specification items en dark mode */
body.dark-mode .spec-item {
    background-color: #353535 !important;
}

body.dark-mode .detail-item {
    background-color: #353535 !important;
}

/* Table responsive wrapper */
body.dark-mode .table-responsive {
    border-color: #404040;
}

/* Fix para modal labels y textos */
body.dark-mode .modal-content label,
body.dark-mode .modal-content p,
body.dark-mode .modal-content span:not(.badge) {
    color: #e0e0e0;
}

body.dark-mode .modal-title {
    color: #e0e0e0;
}

/* ===== RESPONSIVE MOBILE STYLES ===== */

/* Tablets y móviles grandes (768px y menos) */
@media (max-width: 768px) {
    /* Contenedor principal */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Títulos más pequeños en móvil */
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    h4 { font-size: 1.1rem !important; }
    h5 { font-size: 1rem !important; }

    /* Tarjetas en móvil */
    .card {
        margin-bottom: 1rem;
    }

    .card-body {
        padding: 1rem;
    }

    /* Botones en móvil */
    .btn {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }

    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .btn-group .btn {
        width: 100%;
    }

    /* Tablas responsivas */
    .table-responsive {
        border: 0;
    }

    .table thead {
        display: none;
    }

    .table tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 0.5rem;
        background-color: inherit;
    }

    body.dark-mode .table tr {
        border-color: #404040;
    }

    .table td {
        display: block;
        text-align: right;
        padding: 0.5rem;
        border: none;
    }

    .table td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
    }

    /* Navegación en móvil */
    .navbar-nav {
        padding: 1rem 0;
    }

    .navbar-nav .nav-item {
        padding: 0.5rem 0;
    }

    /* Formularios en móvil */
    .form-control,
    .form-select {
        font-size: 1rem; /* Prevenir zoom en iOS */
    }

    .row.mb-3 {
        margin-bottom: 1rem !important;
    }

    /* Modales en móvil */
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-content {
        border-radius: 12px;
    }

    /* Paginación en móvil */
    .pagination {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .pagination .page-link {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }

    /* Badges y tags */
    .badge {
        font-size: 0.75rem;
        padding: 0.35em 0.65em;
    }

    /* Dropdown menus */
    .dropdown-menu {
        max-width: calc(100vw - 2rem);
    }

    /* Hero sections */
    .hero-section,
    .modern-title-container {
        padding: 1.5rem 1rem !important;
    }

    /* Grids y columnas */
    .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    .row > [class*="col-"] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Móviles pequeños (576px y menos) */
@media (max-width: 576px) {
    /* Contenedor más estrecho */
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Títulos aún más pequeños */
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.1rem !important; }

    /* Tarjetas compactas */
    .card-body {
        padding: 0.75rem;
    }

    .card-header {
        padding: 0.75rem;
        font-size: 0.95rem;
    }

    /* Botones más pequeños */
    .btn {
        font-size: 0.875rem;
        padding: 0.4rem 0.8rem;
    }

    .btn-lg {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }

    .btn-sm {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    /* Texto más pequeño */
    body {
        font-size: 0.9rem;
    }

    .small, small {
        font-size: 0.8rem;
    }

    /* Espaciado reducido */
    .mb-3 {
        margin-bottom: 0.75rem !important;
    }

    .mb-4 {
        margin-bottom: 1rem !important;
    }

    .p-3 {
        padding: 0.75rem !important;
    }

    .p-4 {
        padding: 1rem !important;
    }

    /* Alertas */
    .alert {
        padding: 0.75rem;
        font-size: 0.875rem;
    }

    /* Formularios compactos */
    .form-label {
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
    }

    .input-group-text {
        font-size: 0.875rem;
    }

    /* Listas */
    ul, ol {
        padding-left: 1.25rem;
    }

    /* Stats cards */
    .stats-card {
        padding: 1rem !important;
    }

    .stats-number {
        font-size: 1.75rem !important;
    }

    /* Offcanvas y sidebar */
    .offcanvas {
        max-width: 85vw;
    }
}

/* Landscape en móvil */
@media (max-width: 896px) and (orientation: landscape) {
    .navbar-collapse {
        max-height: 60vh;
        overflow-y: auto;
    }

    .modal-dialog {
        max-height: 90vh;
    }

    .modal-content {
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* Prevenir zoom en inputs en iOS */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Touch-friendly tap targets */
@media (max-width: 768px) {
    button, .btn, input[type="button"], input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .nav-link {
        padding: 0.75rem 1rem;
    }

    /* Cookie banner en móvil */
    #cookie-banner .col-md-4 {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    #cookie-banner .btn {
        width: 100%;
    }

    /* Action buttons mínimo 44px */
    .action-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px;
        height: 44px;
    }
}

/* Mejoras de rendimiento móvil */
@media (max-width: 768px) {
    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }

    /* Ocultar elementos innecesarios en móvil */
    .d-none-mobile {
        display: none !important;
    }

    /* Mejoras específicas del navbar en móvil */
    .navbar-collapse {
        max-height: 70vh;
        overflow-y: auto;
        background-color: #121212;
        border-radius: 0 0 8px 8px;
        margin-top: 0.5rem;
        padding: 0.5rem;
    }

    .navbar-nav .nav-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .navbar-nav .nav-item:last-child {
        border-bottom: none;
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }

    .navbar-nav .dropdown-menu {
        background-color: #1a1a1a;
        border: none;
        padding-left: 1rem;
        margin-top: 0;
    }

    .navbar-nav .dropdown-item {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.8);
    }

    .navbar-nav .dropdown-divider {
        border-color: rgba(255, 255, 255, 0.1);
        margin: 0.25rem 0;
    }

    .navbar-nav .dropdown-header {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.5);
    }

    /* Compactar badges en móvil */
    .navbar-nav .badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }

    /* Mejorar toggler */
    .navbar-toggler {
        border: none;
        padding: 0.5rem;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }
}

/* Dark mode navbar en móvil */
body.dark-mode .navbar-collapse {
    background-color: #0d0d0d;
}

body.dark-mode .navbar-nav .dropdown-menu {
    background-color: #1a1a1a;
}

/* ===== NOTIFICATIONS ===== */

/* Notification unread highlight */
.notification-unread {
    background-color: rgba(13, 110, 253, 0.05) !important;
    border-left: 3px solid #0d6efd !important;
}

/* Notifications dropdown */
.notifications-dropdown {
    max-height: 400px;
    overflow-y: auto;
}

.notifications-dropdown .notification-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.notifications-dropdown .notification-item:last-of-type {
    border-bottom: none;
}

.notifications-dropdown .notification-item:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

/* Dark mode notifications */
body.dark-mode .notification-unread {
    background-color: rgba(13, 110, 253, 0.1) !important;
    border-left-color: #4d94ff !important;
}

body.dark-mode .notifications-dropdown {
    background-color: #2d2d2d;
    border-color: #404040;
}

body.dark-mode .notifications-dropdown .notification-item {
    border-bottom-color: #404040;
}

body.dark-mode .notifications-dropdown .notification-item:hover {
    background-color: #3a3a3a;
}

body.dark-mode .notifications-dropdown .dropdown-header {
    color: #e0e0e0;
}

body.dark-mode .list-group-item.notification-unread {
    background-color: rgba(13, 110, 253, 0.1) !important;
}

/* =====================================================
   DARK MODE - MISSING FIXES (added 2026-04)
   ===================================================== */

/* rgba(248, 249, 250, ...) - stat boxes en profile header */
body.dark-mode [style*="background: rgba(248, 249, 250"] {
    background: rgba(55, 55, 55, 0.95) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* rgba(255,255,255,0.8x) / 0.9x / 0.95 - user-welcome card y botones de perfil */
body.dark-mode [style*="background: rgba(255, 255, 255, 0.8"],
body.dark-mode [style*="background: rgba(255, 255, 255, 0.9"],
body.dark-mode [style*="background: rgba(255,255,255,0.8"],
body.dark-mode [style*="background: rgba(255,255,255,0.9"] {
    background: rgba(40, 40, 40, 0.92) !important;
    color: #e0e0e0 !important;
}

/* background: white (inline) - inputs de settings */
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background-color: white"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}

/* color: #2d3748 - nombre de usuario en home */
body.dark-mode [style*="color: #2d3748"] {
    color: #e0e0e0 !important;
}

/* border #dee2e6 inline - inputs de settings */
body.dark-mode [style*="border: 1px solid #dee2e6"],
body.dark-mode [style*="border-color: #dee2e6"] {
    border-color: #505050 !important;
}

/* stat-box hover override (overrides the white !important in <style> block) */
body.dark-mode .stat-box:hover {
    background: rgba(70, 70, 70, 0.95) !important;
    border-color: rgba(255,255,255,0.12) !important;
}
body.dark-mode .stat-box {
    background: rgba(55, 55, 55, 0.95) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* public URL input readonly - profile header */
body.dark-mode #publicCollectionUrl {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #505050 !important;
}

/* detail-item con background-color inline (overrides specificity) */
body.dark-mode .detail-item[style*="background-color"] {
    background-color: #353535 !important;
}

/* Cards con background gradient linear que contienen texto oscuro */
body.dark-mode [style*="background: linear-gradient(135deg, #f8f9fa"],
body.dark-mode [style*="background: linear-gradient(135deg, #ffffff"],
body.dark-mode [style*="background: linear-gradient(135deg, #fff "],
body.dark-mode [style*="background: linear-gradient(135deg, white"] {
    background: linear-gradient(135deg, #2d2d2d, #3a3a3a) !important;
}

/* Sección de privacidad en settings (#f0f4ff) */
body.dark-mode [style*="background-color: #f0f4ff"],
body.dark-mode [style*="background: #f0f4ff"] {
    background-color: #1e2a3a !important;
}

/* Fix textos con color oscuro sobre fondos que se vuelven oscuros en dark mode */
body.dark-mode [style*="color: #1a1a2e"],
body.dark-mode [style*="color: #2c3e50"],
body.dark-mode [style*="color: #343a40"],
body.dark-mode [style*="color: #212529"] {
    color: #e0e0e0 !important;
}

/* user-welcome card en dark mode (home page) */
body.dark-mode .user-welcome-card {
    background: rgba(40, 40, 40, 0.92) !important;
}
body.dark-mode .user-welcome-name {
    color: #e0e0e0 !important;
}

/* user-welcome-name: dark in light mode, light in dark mode */
.user-welcome-name { color: #2d3748; }

/* ── Community stats cards: keep white text in dark mode ── */
body.dark-mode .stats-card,
body.dark-mode .stats-card h1,
body.dark-mode .stats-card h2,
body.dark-mode .stats-card h3,
body.dark-mode .stats-card h4,
body.dark-mode .stats-card h5,
body.dark-mode .stats-card h6,
body.dark-mode .stats-card .h3,
body.dark-mode .stats-card small,
body.dark-mode .stats-card .small,
body.dark-mode .stats-card .stats-number,
body.dark-mode .stats-card .stats-label {
    color: white !important;
}

/* ── Navbar dark mode: más oscuro que el body (#1a1a1a) ── */
body.dark-mode nav.navbar,
body.dark-mode .navbar.bg-dark {
    background-color: #0a0a0a !important;
    border-bottom: 1px solid #2a2a2a !important;
    box-shadow: none !important;
}

/* ── Footer dark mode: caja negra bien definida ── */
body.dark-mode footer,
body.dark-mode footer.bg-dark {
    background-color: #0a0a0a !important;
    border-top: 1px solid #2a2a2a !important;
    color: #aaa !important;
}
body.dark-mode footer .text-muted {
    color: #666 !important;
}
body.dark-mode footer hr {
    border-color: #2a2a2a !important;
    opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — Página de juego (galería, precios, reviews)
   ═══════════════════════════════════════════════════════════ */

/* ── Galería: tabs inline border ── */
body.dark-mode .nav-tabs[style*="border-bottom"] {
    border-bottom-color: #404040 !important;
}
/* Área de info del trailer (#f8f9fa inline) dentro de galería */
body.dark-mode .tab-content [style*="background: #f8f9fa"],
body.dark-mode .tab-content [style*="background-color: #f8f9fa"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}
/* Card body de la galería (hereda blanco por defecto) */
body.dark-mode .tab-content {
    background-color: #242424 !important;
    color: #e0e0e0 !important;
}

/* ── Precios: edition blocks ── */
body.dark-mode .edition-header,
body.dark-mode [style*="background: linear-gradient(135deg, #e9ecef"],
body.dark-mode [style*="background: linear-gradient(135deg, #e9ecef 0%, #dee2e6"] {
    background: linear-gradient(135deg, #2a2a2a 0%, #333 100%) !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}
body.dark-mode .edition-content,
body.dark-mode [style*="background-color: #ffffff"],
body.dark-mode [style*="background-color: #fff"] {
    background-color: #242424 !important;
    color: #e0e0e0 !important;
}
body.dark-mode .detail-row,
body.dark-mode [style*="background-color: #f8f9fa"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}
body.dark-mode .details-item,
body.dark-mode [style*="background-color: #f8f9fa"] {
    background-color: #2d2d2d !important;
}
/* Ahorro positivo (#e8f5e9) / negativo (#ffebee) / neutro (#fff3cd) */
body.dark-mode [style*="background-color: #e8f5e9"] {
    background-color: #1a3326 !important;
}
body.dark-mode [style*="background-color: #ffebee"] {
    background-color: #3a1a1a !important;
}
body.dark-mode [style*="background-color: #fff3cd"] {
    background-color: #2d2a10 !important;
}

/* ── Reviews: mi review y reviews de la comunidad ── */
body.dark-mode .community-review-item {
    background: #2d2d2d !important;
    border-color: #404040 !important;
}
body.dark-mode .community-review-item [style*="background: rgba(248,249,250"],
body.dark-mode .community-review-item [style*="background: rgba(248, 249, 250"] {
    background: rgba(50,50,50,0.9) !important;
    border-color: #404040 !important;
}
body.dark-mode .community-review-item [style*="color: #444"] {
    color: #ccc !important;
}
/* Fade overlay blanco al final de reviews largas */
body.dark-mode .review-fade,
body.dark-mode [class*="review-fade"] {
    background: linear-gradient(transparent, #2d2d2d) !important;
}
/* bg-white dentro de reviews (texto de mi review) */
body.dark-mode .bg-white.p-3.rounded {
    background-color: #2d2d2d !important;
    border-color: #404040 !important;
    color: #e0e0e0 !important;
}
/* Cabecera "Mi review" y "Reviews de la comunidad" (el bloque entero) */
body.dark-mode #my-review-info-game-{{ '' }},
body.dark-mode [id^="my-review-info-"] .rounded-3,
body.dark-mode [id^="community-reviews-container-"] {
    border-color: #404040 !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — Refuerzo con !important para ganar a Bootstrap
   ═══════════════════════════════════════════════════════════ */

/* ── Galería: pestaña activa ── */
body.dark-mode .nav-tabs .nav-link.active {
    background-color: #2d2d2d !important;
    border-color: #505050 #505050 #2d2d2d !important;
    color: #e0e0e0 !important;
}
body.dark-mode .nav-tabs .nav-link {
    color: #aaa !important;
}
body.dark-mode .tab-content {
    background-color: #242424 !important;
    color: #e0e0e0 !important;
}

/* ── Card base: forzar fondo oscuro sobre Bootstrap ── */
body.dark-mode .card {
    background-color: #2d2d2d !important;
    border-color: #404040 !important;
    color: #e0e0e0 !important;
}
body.dark-mode .card-body {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}

/* ── Estado en biblioteca + precios: clases de filas ── */
body.dark-mode .status-item {
    background-color: #333 !important;
    color: #e0e0e0 !important;
}
body.dark-mode .edition-header {
    background: linear-gradient(135deg, #2a2a2a 0%, #333 100%) !important;
    color: #e0e0e0 !important;
}
body.dark-mode .edition-content {
    background-color: #242424 !important;
    color: #e0e0e0 !important;
}
body.dark-mode .detail-row {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}
body.dark-mode .details-item {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}

/* ── Reviews ── */
body.dark-mode .community-review-item {
    background: #2d2d2d !important;
    border-color: #404040 !important;
}
body.dark-mode .community-review-item p {
    color: #ccc !important;
}
body.dark-mode .review-fade {
    background: linear-gradient(transparent, #2d2d2d) !important;
}
body.dark-mode .bg-white {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}

/* ── Alert warning en dark mode (sagas-tree y otros) ── */
body.dark-mode .alert-warning,
body.dark-mode [style*="background: linear-gradient(135deg, #fff3cd"] {
    background: linear-gradient(135deg, #3a2e00 0%, #4a3a00 100%) !important;
    color: #ffd76e !important;
    border-color: #5a4800 !important;
}
body.dark-mode .alert-warning strong,
body.dark-mode [style*="background: linear-gradient(135deg, #fff3cd"] strong {
    color: #ffe49a !important;
}

/* ── btn-back: preservar texto blanco en dark mode ── */
body.dark-mode .btn-back {
    color: white !important;
}
body.dark-mode .btn-back:hover {
    color: white !important;
}

/* ── detail-item (collection/value y otros) ── */
body.dark-mode .detail-item {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}

/* ── Barra "Total para completar" y elementos con #e9ecef ── */
body.dark-mode [style*="background-color: #e9ecef"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}

/* ── Comparison game-card partial ── */
body.dark-mode .modern-game-card .card {
    background: #1e1e1e !important;
}
body.dark-mode .modern-game-card .card-body {
    background: #1e1e1e !important;
}
body.dark-mode .modern-game-card .card-title {
    color: #e0e0e0 !important;
}
body.dark-mode .modern-game-card .text-dark {
    color: #ccc !important;
}
body.dark-mode .modern-game-card [style*="#f8f9fa"],
body.dark-mode .modern-game-card [style*="f8f9fa"] {
    background: #2a2a2a !important;
}
/* Comparison hero banner (libraries/platforms) */
body.dark-mode .card[style*="f5f7fa"],
body.dark-mode .card[style*="#f5f7fa"] {
    background: #1e1e1e !important;
}

/* ── Comparison pages: libraries / platforms / stats ── */
body.dark-mode .modern-summary-card {
    background: #1e1e1e !important;
    border-color: #333 !important;
}
body.dark-mode .summary-header {
    background: rgba(255,255,255,0.05) !important;
    border-color: #333 !important;
}
body.dark-mode .summary-title { color: #e0e0e0 !important; }
body.dark-mode .summary-body { background: #1e1e1e !important; }
body.dark-mode .stat-card {
    background: #2a2a2a !important;
    box-shadow: none !important;
}
body.dark-mode .stat-number { color: #e0e0e0 !important; }
body.dark-mode .comparison-filter-tabs {
    background: #1e1e1e !important;
    border-color: #333 !important;
}
body.dark-mode .filter-tab { color: #aaa !important; }
body.dark-mode .filter-tab:hover {
    color: #e0e0e0 !important;
    background: rgba(255,255,255,0.08) !important;
}
body.dark-mode .friend-buttons-container {
    background: #1e1e1e !important;
    border-color: #333 !important;
}
body.dark-mode .friend-tab-btn {
    background: rgba(255,255,255,0.07) !important;
    color: #ccc !important;
    border-color: rgba(255,255,255,0.1) !important;
}
body.dark-mode .friend-tab-btn:hover {
    background: rgba(255,255,255,0.13) !important;
    color: #e0e0e0 !important;
}
/* Stats-specific */
body.dark-mode .modern-summary-content {
    background: #1e1e1e !important;
    backdrop-filter: none !important;
}
body.dark-mode .modern-summary-header { background: transparent !important; }
body.dark-mode .modern-table .table {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
}
body.dark-mode .modern-table .table th,
body.dark-mode .modern-table thead.table-light th,
body.dark-mode .modern-table thead.table-light tr {
    background: #2a2a2a !important;
    color: #ccc !important;
    border-color: #444 !important;
}
body.dark-mode .modern-table .table td {
    border-color: #333 !important;
    color: #e0e0e0 !important;
}
body.dark-mode .modern-table .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255,255,255,0.03) !important;
    color: #e0e0e0 !important;
}
body.dark-mode .modern-table .table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}
/* VS banner card (f5f7fa inline gradient) */
body.dark-mode .card[style*="f5f7fa"] {
    background: #1e1e1e !important;
}

/* ── Activity items & bg-light global ── */
body.dark-mode .bg-light {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
}
body.dark-mode .activity-item .card {
    background: #1e1e1e !important;
    border-color: #333 !important;
}
body.dark-mode .activity-item .card-body {
    background: #1e1e1e !important;
}
body.dark-mode .activity-item .dropdown-menu {
    background-color: #2a2a2a !important;
    border-color: #444 !important;
}
body.dark-mode .activity-item .dropdown-item {
    color: #e0e0e0 !important;
}
body.dark-mode .activity-item .dropdown-item:hover {
    background-color: #3a3a3a !important;
}
body.dark-mode .activity-item .dropdown-divider {
    border-color: #444 !important;
}
/* Activity type containers with bg-light or bg-opacity */
body.dark-mode .activity-item [class*="bg-light"],
body.dark-mode .activity-item [style*="background-color: #f8f9fa"] {
    background-color: #2a2a2a !important;
}

/* ── Admin pages global dark mode ── */
body.dark-mode .table,
body.dark-mode .table > :not(caption) > * > * {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}
body.dark-mode .table thead th,
body.dark-mode .table th {
    background-color: #2a2a2a !important;
    color: #ccc !important;
    border-color: #444 !important;
}
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255,255,255,0.03) !important;
    color: #e0e0e0 !important;
}
body.dark-mode .table-hover > tbody > tr:hover > * {
    background-color: #2a2a2a !important;
}
body.dark-mode .table-light,
body.dark-mode .table-light > th {
    background-color: #2a2a2a !important;
    color: #ccc !important;
}
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode textarea.form-control {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: #333 !important;
    color: #e0e0e0 !important;
    border-color: #666 !important;
}
body.dark-mode .input-group-text {
    background-color: #2a2a2a !important;
    color: #ccc !important;
    border-color: #444 !important;
}
body.dark-mode .card {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}
body.dark-mode .card-header {
    background-color: #2a2a2a !important;
    border-color: #333 !important;
    color: #e0e0e0 !important;
}
body.dark-mode .card-footer {
    background-color: #2a2a2a !important;
    border-color: #333 !important;
}
body.dark-mode .modal-content {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    background-color: #2a2a2a !important;
    border-color: #333 !important;
    color: #e0e0e0 !important;
}
body.dark-mode .modal-body { background-color: #1e1e1e !important; color: #e0e0e0 !important; }
body.dark-mode .modal-title { color: #e0e0e0 !important; }
body.dark-mode .dropdown-menu {
    background-color: #2a2a2a !important;
    border-color: #444 !important;
}
body.dark-mode .dropdown-item { color: #e0e0e0 !important; }
body.dark-mode .dropdown-item:hover { background-color: #3a3a3a !important; }
body.dark-mode .dropdown-divider { border-color: #444 !important; }
body.dark-mode .pagination .page-link {
    background-color: #2a2a2a !important;
    border-color: #444 !important;
    color: #ccc !important;
}
body.dark-mode .pagination .page-item.active .page-link {
    background-color: #667eea !important;
    border-color: #667eea !important;
    color: white !important;
}
body.dark-mode .pagination .page-item.disabled .page-link {
    background-color: #1e1e1e !important;
    color: #666 !important;
}
body.dark-mode label { color: #ccc !important; }
body.dark-mode .form-label { color: #ccc !important; }
body.dark-mode .text-dark { color: #e0e0e0 !important; }
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: #e0e0e0 !important;
}

/* ── Home page: uniform section spacing + visual normalization ── */
.home-container {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1rem;
}
.home-container > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-width: 0;
}
/* 1. Uniform border-radius & shadow for ALL section cards */
.home-container .card {
    border-radius: 15px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.10) !important;
}
.home-container .card .card-header:first-child {
    border-top-left-radius: 14px !important;
    border-top-right-radius: 14px !important;
}
.home-container .card .card-footer:last-child {
    border-bottom-left-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
}

/* 2. Uniform card-footer: same background & padding everywhere */
.home-container .card .card-footer {
    background: transparent !important;
    border-top: 1px solid rgba(0,0,0,.06) !important;
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
}

/* 3. Fix game-grid excess bottom space (mb-4 on columns + pb-0 card-body) */
.home-container .card-body.pb-0 > .row {
    row-gap: 1rem;
}
.home-container .card-body.pb-0 > .row > [class*="col-"] {
    margin-bottom: 0 !important;
}
.home-container .card-body.pb-0 {
    padding-bottom: 0.5rem !important;
}

/* Perception corrections for specific sections */
/* Tall cards above make 1rem look bigger → pull down */
.home-container > .home-lower-stats {
    margin-top: -1.2rem !important;
}
/* Short card (community-stats) → add breathing room */
.home-container > .home-community-stats {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

/* Mobile: pagination scrollable single line */
@media (max-width: 767px) {
    .hybrid-tabs-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .hybrid-tabs-container .nav.hybrid-tabs {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
    }
    .hybrid-tabs-container .hybrid-tab {
        padding: 0.35rem 0.6rem !important;
        font-size: 0.8rem;
        white-space: nowrap;
    }
}

/* Mobile: compact community stats (3 per row) */
@media (max-width: 767px) {
    .home-community-stats .stats-card { padding: 0.5rem !important; }
    .home-community-stats .stats-number { font-size: 1.1rem !important; margin-bottom: 0 !important; }
    .home-community-stats .stats-label { font-size: 0.6rem !important; }
}

/* Mobile: compact user stat cards (3 in one row) */
@media (max-width: 767px) {
    .user-stat-cards .card-body { padding: 0.35rem !important; }
    .user-stat-cards .card-body .position-absolute { display: none !important; }
    .user-stat-cards .card-body h3 { font-size: 1rem !important; margin-bottom: 0 !important; }
    .user-stat-cards .card-body p { font-size: 0.52rem !important; }
    .user-stat-cards .card-body > div > i.bi { font-size: 1rem !important; margin-bottom: 0 !important; }
}

/* Mobile: uniform equal spacing between ALL stacked sections */
@media (max-width: 767px) {
    .home-container { row-gap: 0.5rem; }
    /* Remove desktop perception correction — not needed when stacked */
    .home-container > .home-lower-stats { margin-top: 0 !important; }
    /* Disable d-flex flex-column on cols when stacked — prevents h-100 from
       inflating the col height beyond its content */
    .home-container > .row > [class*="col-"].d-flex.flex-column {
        display: block !important;
    }
    .home-container > .row > [class*="col-"] > .card.h-100 {
        height: auto !important;
    }
    /* Stacked columns within multi-col rows: match row-gap */
    .home-container > .row > .col-12 + .col-12,
    .home-container > .row > .col-12.col-md-4 + .col-12.col-md-4,
    .home-container > .row > .col-12.col-md-6 + .col-12.col-md-6 {
        margin-top: 0.5rem;
    }
}

/* ── Game card mobile tweaks ────────────────────────── */
@media (max-width: 575px) {
    /* Reduce image height on mobile */
    .modern-game-card .card > a {
        height: 150px !important;
    }

    /* Compact card body */
    .modern-game-card .card-body {
        padding: 0.5rem !important;
    }

    /* Title smaller */
    .modern-game-card .card-title {
        font-size: 0.8rem !important;
        margin-bottom: 0.2rem !important;
    }

    /* Platform badge smaller */
    .modern-game-card .mb-2.text-center {
        margin-bottom: 0.25rem !important;
    }
    .modern-game-card .mb-2.text-center .badge {
        font-size: 0.62rem !important;
        padding: 0.15rem 0.4rem !important;
    }

    /* Info section: compact rows */
    .modern-game-card .info-section .mb-1 {
        margin-bottom: 0.1rem !important;
        font-size: 0.7rem !important;
        line-height: 1.3 !important;
    }
    .modern-game-card .info-section small {
        font-size: 0.65rem !important;
    }
    .modern-game-card .info-section .text-dark {
        font-size: 0.7rem !important;
    }
    .modern-game-card .info-section .badge {
        font-size: 0.6rem !important;
        padding: 0.15rem 0.35rem !important;
    }

    /* Action buttons: icon-only, centered, equal size */
    .modern-game-card .mt-auto .d-flex.gap-1,
    .modern-platform-card .mt-auto .d-flex.gap-1 {
        gap: 0.2rem !important;
    }
    .modern-game-card .mt-auto .btn-sm,
    .modern-platform-card .mt-auto .btn-sm {
        padding: 0.25rem 0.3rem !important;
        font-size: 0.72rem !important;
        min-width: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
        line-height: 1 !important;
        min-height: 28px !important;
    }
    /* form y dropdown dentro de los botones de tarjeta */
    .modern-game-card .mt-auto .d-flex > form,
    .modern-game-card .mt-auto .d-flex > .dropdown {
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: stretch !important;
    }
    .modern-game-card .mt-auto .d-flex > form .btn,
    .modern-game-card .mt-auto .d-flex > .dropdown > .btn {
        width: 100% !important;
        flex: 1 !important;
        min-height: 28px !important;
    }

    /* Ranking widgets: compact list items on mobile */
    .card .list-group-item {
        padding: 0.45rem 0.75rem !important;
    }
    .card .list-group-item .rank-badge .badge {
        font-size: 0.7rem !important;
    }
    .card .list-group-item img,
    .card .list-group-item .bg-light.rounded {
        width: 28px !important;
        height: 36px !important;
    }
    .card .list-group-item .fw-bold {
        font-size: 0.8rem !important;
    }
    .card .list-group-item small {
        font-size: 0.68rem !important;
    }
    .card .card-header h5 {
        font-size: 0.9rem !important;
    }

    /* Platform card: same compact treatment */
    .modern-platform-card .card > a {
        height: 150px !important;
    }
    .modern-platform-card .card-body {
        padding: 0.5rem !important;
    }
    .modern-platform-card .card-title {
        font-size: 0.8rem !important;
        margin-bottom: 0.2rem !important;
    }
    .modern-platform-card .info-section .mb-1 {
        margin-bottom: 0.1rem !important;
        font-size: 0.7rem !important;
        line-height: 1.3 !important;
    }
    .modern-platform-card .info-section small {
        font-size: 0.65rem !important;
    }
    .modern-platform-card .info-section .text-dark {
        font-size: 0.7rem !important;
    }
    .modern-platform-card .info-section .badge {
        font-size: 0.6rem !important;
        padding: 0.15rem 0.35rem !important;
    }
}

/* ========================================
   MÓVIL: ajustes home y tarjetas
   ======================================== */
@media (max-width: 767px) {
    /* Stat boxes (juegos/consolas/valor): reducir gutter Bootstrap */
    .user-stat-cards {
        --bs-gutter-x: 0.3rem !important;
    }
    .user-stat-cards .card-body {
        padding: 0.35rem !important;
    }
    .user-stat-cards h3 {
        font-size: 1.3rem !important;
    }
    .user-stat-cards p {
        font-size: 0.6rem !important;
    }

    /* Botones de footer de secciones home: centrado vertical correcto */
    .card-footer .btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Tarjetas de juegos y plataformas: botones en móvil */
    .modern-game-card .mt-auto .d-flex,
    .modern-platform-card .mt-auto .d-flex {
        gap: 0.3rem !important;
    }
    .modern-game-card .mt-auto .btn,
    .modern-platform-card .mt-auto .btn {
        font-size: 0.8rem !important;
        padding: 0.35rem 0.5rem !important;
        min-height: 34px !important;
        min-width: unset !important;
        flex: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* form y dropdown son flex items — también deben estirarse */
    .modern-game-card .mt-auto .d-flex > form,
    .modern-game-card .mt-auto .d-flex > .dropdown {
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: stretch !important;
    }
    .modern-game-card .mt-auto .d-flex > form .btn,
    .modern-game-card .mt-auto .d-flex > .dropdown > .btn {
        width: 100% !important;
        flex: 1 !important;
    }
}

/* ============================================================
   MY-GAMES: status-nav compacto en móvil
   Usa .status-nav-container .status-nav-inverted .nav-link (3 clases)
   para ganar al <style> inline del componente (2 clases + !important)
   ============================================================ */
@media (max-width: 767px) {
    /* Quitar mb del header */
    .collection-header.mb-4 {
        margin-bottom: 0 !important;
    }
    /* Tabs row (Juegos/Ediciones/Favoritos): mismo gap que el resto */
    .collection-header .row.mb-3 {
        margin-bottom: 0.5rem !important;
    }
    .status-nav-container {
        margin-top: 0 !important;
        margin-bottom: 0.5rem !important;
        padding: 0.2rem !important;
    }
    /* Forzar exactamente 4 por fila: (100% - 3 gaps) / 4 */
    .status-nav-container .status-nav-inverted .nav-item {
        flex: 0 0 calc(25% - 0.15rem) !important;
    }
    /* 3 clases > 2 clases del componente inline → anula su padding */
    .status-nav-container .status-nav-inverted .nav-link {
        width: 100% !important;
        padding: 0.22rem 0.1rem !important;
        font-size: 0.72rem !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ============================================================
   FILTROS: aspecto unificado en móvil (todas las páginas)
   ============================================================ */
@media (max-width: 767px) {
    /* Contenedores: wrap y gap unificado */
    .modern-filters-container form,
    .game-filters-form,
    .month-selector-container,
    .search-container {
        flex-wrap: wrap !important;
        gap: 0.35rem !important;
        padding: 0.5rem !important;
    }

    /* Inputs y selects: tamaño unificado */
    .modern-filters-container .form-control,
    .modern-filters-container .form-select,
    .game-filters-form .form-control,
    .game-filters-form .form-select,
    .month-selector,
    .search-input,
    .search-container .filter-select {
        font-size: 0.82rem !important;
        padding: 0.3rem 0.5rem !important;
        border-radius: 8px !important;
        min-height: unset !important;
        height: auto !important;
    }

    /* Search input: fila completa */
    .modern-filters-container .flex-grow-1,
    .game-filters-form .filter-search,
    .search-input {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Selects de platforms: cada uno su fila */
    .modern-filters-container .flex-shrink-0 {
        width: 100% !important;
        display: flex !important;
        gap: 0.35rem !important;
    }

    /* Selects de games (2 columnas) */
    .game-filters-form .filter-select {
        width: calc(50% - 0.175rem) !important;
        flex: 0 0 calc(50% - 0.175rem) !important;
    }

    /* Selects de calendar y sagas: full width */
    .month-selector,
    .search-container .filter-select {
        flex: 1 !important;
        min-width: 0 !important;
        width: auto !important;
    }

    /* Botones: siempre en fila completa, mismo tamaño */
    .modern-filters-container .btn,
    .game-filters-form .filter-buttons .btn,
    .btn-go-month,
    .btn-search,
    .btn-clear {
        flex: 1 !important;
        width: auto !important;
        margin: 0 !important;
        font-size: 0.82rem !important;
        padding: 0.3rem 0.6rem !important;
        min-height: unset !important;
        border-radius: 8px !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Contenedor de botones: fila completa */
    .game-filters-form .filter-buttons {
        width: 100% !important;
        flex: 0 0 100% !important;
        display: flex !important;
        gap: 0.35rem !important;
    }

}

/* === Feed de actividades móvil === */
@media (max-width: 767px) {
    /* Tarjetas */
    .activity-item.card { margin-bottom: 0.4rem !important; overflow: visible !important; }
    .activity-item .card-body { padding: 0.5rem !important; }
    .activity-item .flex-shrink-0 { margin-right: 0.4rem !important; }

    /* Avatar */
    .activity-item img.rounded-circle { width: 32px !important; height: 32px !important; }
    .activity-item .rounded-circle[style*="50px"] { width: 32px !important; height: 32px !important; font-size: 0.85rem !important; }
    .activity-item .position-absolute .badge { width: 15px !important; height: 15px !important; }
    .activity-item .position-absolute .badge i { font-size: 7px !important; }

    /* Textos */
    .activity-item h6 { font-size: 0.78rem !important; margin-bottom: 0.1rem !important; line-height: 1.3 !important; }
    .activity-item small { font-size: 0.68rem !important; }
    .activity-item .d-flex.justify-content-between > span.badge { display: none !important; }
    .activity-item p.text-muted { font-size: 0.75rem !important; margin-bottom: 0.25rem !important; }

    /* Bloques de contenido */
    .activity-item .d-flex.p-3,
    .activity-item .d-flex.p-2 { padding: 0.35rem !important; }
    .activity-item .bg-light.p-3,
    .activity-item .bg-light.p-2 { padding: 0.35rem !important; }
    .activity-item .ps-3 { padding-left: 0.4rem !important; }
    .activity-item .border-start { border-left-width: 2px !important; }

    /* Imágenes de portada */
    .activity-item img[style*="width: 60px"] { width: 28px !important; height: 38px !important; margin-right: 0.4rem !important; }
    .activity-item img[style*="width: 50px"] { width: 26px !important; height: 36px !important; margin-right: 0.4rem !important; }
    .activity-item div[style*="width: 60px"] { width: 28px !important; height: 38px !important; min-width: 28px !important; margin-right: 0.4rem !important; }
    .activity-item div[style*="width: 50px"] { width: 26px !important; height: 36px !important; min-width: 26px !important; margin-right: 0.4rem !important; }
    .activity-item .rounded-circle[style*="60px"] { width: 34px !important; height: 34px !important; margin-right: 0.4rem !important; }
    .activity-item .rounded-circle[style*="40px"] { width: 28px !important; height: 28px !important; margin-right: 0.4rem !important; }

    /* Botones de acción */
    .activity-item .mt-3 { margin-top: 0.3rem !important; }
    .activity-item .gap-3 { gap: 0.4rem !important; }
    .activity-ver-btn { font-size: 0.7rem !important; padding: 0.15rem 0.4rem !important; line-height: 1.4 !important; }
    .activity-dots-btn { width: 24px !important; height: 24px !important; padding: 0 !important; font-size: 0.7rem !important; line-height: 24px !important; }
    .activity-dots-btn i { font-size: 0.7rem !important; }

    /* Stats del feed */
    .stat-number { font-size: 1rem !important; }
    .stat-label { font-size: 0.68rem !important; }
    .stat-active-name { overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; max-width: 100% !important; }
}