body {
            background-color: #f5f5f5;
        }

        .page-title {
            font-weight: 600;
        }

        /* BOTONES DE FILTRO EN NEGRO Y GRIS */
        .filter-btn {
            margin: 0.25rem;
            border-radius: 999px;
            padding: 8px 22px;
            font-weight: 500;
            border: none;
            background: #e5e5e5; /* gris claro por default */
            color: #000 !important; /* texto negro */
            transition: all .2s ease-in-out;
        }

        /* BOTÓN ACTIVO */
        .filter-btn.active-filter {
            background: #000 !important;
            color: #fff !important;
        }

        /* HOVER */
        .filter-btn:hover {
            background: #bfbfbf;
            color: #000;
        }


        .card-recurso {
            border-radius: 1rem;
            transition: transform .2s ease, box-shadow .2s ease;
            cursor: pointer;
            height: 100%;
            background-color: #ffffff;
        }

        .card-recurso:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0,0,0,.08);
        }

        .pdf-icon {
            width: 64px;
            margin-bottom: .5rem;
            opacity: .8;
        }

        .badge-categoria {
            font-size: .75rem;
        }

        .recurso-titulo {
            font-size: .95rem;
            font-weight: 600;
            min-height: 3rem;
        }

        .recurso-descripcion {
            font-size: .85rem;
            color: #555;
            min-height: 2.5rem;
        }

        /* MODALES MÁS VISTOSOS */
        .modal-content {
            border-radius: 1rem;
            overflow: hidden;
        }

        .modal-header {
            border-bottom: none;
        }

        .modal-footer {
            border-top: none;
            background-color: #f8f9fa;
        }

        .modal-body {
            background-color: #fafafa;
        }

        .modal-body iframe {
            border-radius: 0.5rem;
            background: #fff;
        }

        .modal-section-pill {
            font-size: 0.8rem;
            opacity: 0.9;
        }