/* --- Media Queries Generales y Ajustes Grid --- */
        @media (max-width: 992px) { /* Tablets y móviles grandes */
             .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .sidebar-toggle { display: block; } .main-content { margin-left: 0; }
             .top-bar > .user-info { align-self: flex-end;} .dropdown-menu { width: clamp(280px, 90vw, 400px); }
             .notifications-dropdown { width: clamp(300px, 90vw, 420px); } .user-dropdown { right: 0; left: auto; } .modal-content { max-width: 90%; }
             .banned-cards-container { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px;} /* Ajustar minmax/gap si es necesario */
        }
        @media (max-width: 767px) { /* Móviles medianos/grandes */
            .main-content { padding: 20px; } /* Menos padding general */
            .top-bar { padding-left: 60px; flex-direction: column; } .top-bar > .user-info { align-self: flex-end; } .username { display: none; }
             .banned-cards-container { grid-template-columns: 1fr; gap: 15px;} /* Forzar una columna */
             .page-title { font-size: 1.6em; } /* Título más pequeño */
             .ban-card { padding: 15px; gap: 12px; } .ban-card-header { padding-bottom: 8px; }
             .ban-card-header .username { font-size: 1.1em; } .ban-card-header .edit-ban-btn { padding: 5px 10px; font-size: 0.8em; }
             .ban-card-body { gap: 8px; } .ban-card-item { font-size: 0.9em; gap: 8px; }
             /* Modal en móvil */
            .modal-content { width: 95%; margin: 10% auto; padding: 20px 25px; } .modal-header h3 { font-size: 1.3em; }
            .modal-footer { flex-direction: column; align-items: stretch; } .modal-footer button { width: 100%; }
            .modal-footer .unban-btn { margin-left: 0; margin-top: 10px; order: 3; } .modal-footer .save-changes-btn { order: 2; } .modal-footer .cancel-btn { order: 1; }
        }
        @media (max-width: 480px) { /* Móviles pequeños */
            .main-content { padding: 15px; } .top-bar { padding-left: 55px; margin-bottom: 20px; }
            /* Ajustes Tarjetas */
             .banned-cards-container { gap: 12px; grid-template-columns: 1fr; } /* Asegurar 1 columna */
             .ban-card { padding: 12px; } .ban-card-item { font-size: 0.85em; gap: 6px; }
             .ban-card-header .edit-ban-btn { padding: 4px 8px; font-size: 0.75em; }
             /* Ajustes Modal */
            .modal-footer button { font-size: 0.9em; padding: 10px 15px; }
            .dark-mode-float-button { width: 45px; height: 45px; font-size: 1.2em; bottom: 15px; right: 15px;}
        }

/* --- Estilos Tarjeta Individual --- */
        .ban-card {
            background-color: var(--card-bg-light); border-radius: 10px; box-shadow: var(--shadow-light);
            padding: 18px; /* Ajustado padding */ border-left: 5px solid var(--danger-color);
            display: flex; flex-direction: column; gap: 12px; /* Reducido gap interno */
            transition: box-shadow 0.2s ease;
            overflow: hidden; /* Prevenir desbordes internos */
        }
        .ban-card:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.1); body.dark-mode & { box-shadow: 0 4px 15px rgba(0,0,0,0.25); } }
        body.dark-mode .ban-card { background-color: var(--card-bg-dark); box-shadow: var(--shadow-dark); }

        .ban-card-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--border-color-light); }
        body.dark-mode .ban-card-header { border-bottom-color: var(--border-color-dark); }
        .ban-card-header .username { font-size: 1.15em; /* Ajustado */ font-weight: 700; color: var(--gta-purple); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10px;}
        body.dark-mode .ban-card-header .username { color: var(--gta-orange); }
        .ban-card-header .edit-ban-btn { padding: 6px 12px; font-size: 0.85em; flex-shrink: 0; }

        .ban-card-body { display: flex; flex-direction: column; gap: 8px; /* Reducido gap */ }
        .ban-card-item { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9em; /* Ajustado */ line-height: 1.45; width: 100%; }
        .ban-card-item .label { flex-shrink: 0; width: auto; font-weight: 600; color: #555; body.dark-mode & { color: #bbb; } display: inline-flex; align-items: center; gap: 5px; }
        .ban-card-item .label i { color: var(--secondary-color); width: 15px; text-align: center; }
        body.dark-mode .ban-card-item .label i { color: var(--gta-orange); }
        .ban-card-item .value { flex-grow: 1; flex-basis: 0; min-width: 0; text-align: left; word-wrap: break-word; word-break: break-word; white-space: normal; color: var(--text-light); }
        body.dark-mode .ban-card-item .value { color: var(--text-dark); }
        .ban-card-item .value.ip-address { font-family: monospace; font-size: 0.95em; color: #666; word-break: break-all; body.dark-mode & { color: #bbb; } }
        .ban-card-item.reason-item { align-items: flex-start; }
        .ban-card-item.reason-item .label { margin-top: 1px; }

Tengo un problema con el siguiente CSS, el tema es que en teléfono, las ban cards aparecen aplastadas a la derecha en vez de centradas. Creo que el problema está en cómo se abre la navbar, que evita que aparezca por debajo. Pero eso no debe importar, si no no se mostrará correctamente. Me parece que las desplaza aún estando cerrada.