/* ============================================
   CSS: resources.css — Olemurcia
   Componente: Grids + Recursos + Modal recurso + Galeria
   ============================================ */

    .grid-galeria{

        display:grid;

        grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));

        gap:12px;

    }

    .grid-recursos{

        display:flex;

        flex-direction:column;

        gap:10px;

    }

    .recurso-tarjeta{

        background:var(--superficie);

        border:1px solid var(--borde);

        border-radius:var(--radio);

        overflow:hidden;

        display:flex;

        flex-direction:row;

        transition:transform .2s, border-color .2s;

        backdrop-filter:blur(12px);

        -webkit-backdrop-filter:blur(12px);

    }

    .recurso-tarjeta:hover{

        transform:translateY(-2px);

        border-color:rgba(125,217,255,.35);

    }

    .recurso-tarjeta-icono{

        width:76px;

        min-width:76px;

        height:76px;

        margin:12px;

        border-radius:16px;

        display:flex;

        align-items:center;

        justify-content:center;

        font-size:34px;

        overflow:hidden;

        align-self:center;

    }

    .recurso-img{

        max-width:100%;

        max-height:100%;

        object-fit:contain;

    }

    .recurso-tarjeta-icono img.recurso-img{

        width:100%;

        height:100%;

        object-fit:cover;

    }

    .recurso-tarjeta-cuerpo{

        padding:12px 14px;

        flex:1;

        min-width:0;

        display:flex;

        flex-direction:column;

    }

    .recurso-tarjeta-top{

        display:flex;

        align-items:baseline;

        gap:0;

        min-width:0;

    }

    .recurso-tarjeta-titulo{

        font-size:15px;

        font-weight:600;

        white-space:nowrap;

        overflow:hidden;

        text-overflow:ellipsis;

        min-width:0;

        flex:1;

    }

    .recurso-autor{

        font-size:12px;

        color:var(--difuso);

        font-weight:400;

        white-space:nowrap;

        margin-left:4px;

    }

    .recurso-vistas{

        font-size:12px;

        color:var(--difuso);

        white-space:nowrap;

        margin-left:10px;

    }

    .recurso-tarjeta-desc{

        font-size:12px;

        color:var(--difuso);

        line-height:1.5;

        margin-top:3px;

        overflow:hidden;

        display:-webkit-box;

        -webkit-line-clamp:2;

        -webkit-box-orient:vertical;

    }

    .recurso-tarjeta-bot{

        display:flex;

        align-items:center;

        gap:10px;

        margin-top:6px;

        flex-wrap:wrap;

    }

    .recurso-antiguedad{

        font-size:11px;

        color:var(--difuso);

        white-space:nowrap;

        margin-left:auto;

    }

    .chip-tipo{

        background:rgba(124,92,255,.14);

        color:#a78bfa;

        border:1px solid rgba(124,92,255,.3);

        border-radius:20px;

        padding:2px 9px;

        font-size:11px;

        white-space:nowrap;

    }

    .btn-descargar-ico{

        display:flex;

        align-items:center;

        justify-content:center;

        width:38px;

        height:38px;

        margin:auto 12px auto 0;

        flex:0 0 auto;

        background:rgba(124,92,255,.16);

        border:1px solid rgba(124,92,255,.4);

        border-radius:10px;

        color:#a78bfa;

        font-size:16px;

        text-decoration:none;

        transition:background .2s, color .2s;

    }

    .btn-descargar-ico:hover{

        background:rgba(124,92,255,.3);

        color:#d6c9ff;

    }

    .recursos-paginacion{

        display:flex;

        align-items:center;

        justify-content:center;

        gap:14px;

        margin-top:18px;

    }

    .btn-pagina{

        background:rgba(124,92,255,.14);

        border:1px solid rgba(124,92,255,.4);

        color:#a78bfa;

        border-radius:10px;

        width:38px;

        height:38px;

        font-size:16px;

        cursor:pointer;

        transition:background .2s;

    }

    .btn-pagina:hover:not(:disabled){

        background:rgba(124,92,255,.3);

    }

    .btn-pagina:disabled{

        opacity:.4;

        cursor:default;

    }

    .pagina-info{

        font-size:13px;

        color:var(--difuso);

    }

    .btn-descargar.grande{

        width:auto;

        margin:0;

        padding:12px 22px;

        font-size:14px;

        background:var(--violeta);

        border:none;

        color:#fff;

        border-radius:12px;

        gap:8px;

    }

    .btn-descargar.grande:hover{

        filter:brightness(1.12);

    }

    .recursos-toolbar{

        display:flex;

        flex-direction:column;

        gap:10px;

        margin-bottom:16px;

    }

    .recursos-toolbar input[type=text]{

        width:100%;

        background:var(--superficie);

        border:1px solid var(--borde);

        border-radius:var(--radio);

        color:var(--texto);

        padding:10px 14px;

        font-size:14px;

        outline:none;

        transition:border-color .2s;

    }

    .recursos-toolbar input[type=text]:focus{

        border-color:rgba(124,92,255,.5);

    }

    .recursos-filtros{

        display:flex;

        flex-wrap:wrap;

        gap:8px;

    }

    .chip-recurso{

        background:var(--superficie);

        border:1px solid var(--borde);

        border-radius:20px;

        padding:5px 13px;

        font-size:12px;

        color:var(--texto);

        cursor:pointer;

        transition:background .2s, border-color .2s;

    }

    .chip-recurso:hover{

        border-color:rgba(124,92,255,.45);

    }

    .chip-recurso.activo{

        background:rgba(124,92,255,.18);

        border-color:rgba(124,92,255,.5);

        color:#c4b5fd;

    }

    .recurso-modal{

        position:fixed;

        inset:0;

        z-index:300;

        background:rgba(0,0,0,.75);

        display:flex;

        align-items:center;

        justify-content:center;

        padding:24px;

        cursor:pointer;

    }

    .recurso-modal-caja{

        background:var(--fondo);

        border:1px solid var(--borde);

        border-radius:var(--radio);

        max-width:560px;

        width:100%;

        max-height:90vh;

        overflow-y:auto;

        padding:26px;

        position:relative;

        cursor:default;

    }

    .recurso-modal-cerrar{

        position:absolute;

        top:14px;

        right:14px;

        background:rgba(255,255,255,.08);

        border:none;

        color:var(--texto);

        width:32px;

        height:32px;

        border-radius:50%;

        font-size:14px;

        cursor:pointer;

    }

    .recurso-modal-cerrar:hover{

        background:rgba(255,255,255,.16);

    }

    .recurso-modal-icono{

        width:76px;

        height:76px;

        border-radius:16px;

        display:flex;

        align-items:center;

        justify-content:center;

        font-size:36px;

        margin-bottom:14px;

        overflow:hidden;

    }

    .recurso-modal-icono img.recurso-img{

        width:100%;

        height:100%;

        object-fit:cover;

    }

    .recurso-modal-titulo{

        font-size:22px;

        font-weight:700;

        margin-bottom:10px;

    }

    .recurso-modal-meta{

        display:flex;

        flex-wrap:wrap;

        gap:8px;

        margin-bottom:14px;

    }

    .recurso-modal-desc{

        font-size:14px;

        line-height:1.7;

        color:var(--texto);

        margin-bottom:20px;

        white-space:pre-line;

    }

    .recurso-modal-acciones{

        text-align:center;

        margin-top:6px;

    }

    .recurso-modal-acciones .btn-descargar{

        width:100%;

        margin:0;

    }

    .galeria-item{

        position:relative;

        border-radius:var(--radio);

        overflow:hidden;

        cursor:pointer;

        aspect-ratio:4/3;

        border:1px solid var(--borde);

        transition:transform .2s;

    }

    .galeria-item:hover{

        transform:translateY(-2px);

    }

    .galeria-item img{

        width:100%;

        height:100%;

        object-fit:cover;

    }

    .galeria-overlay{

        position:absolute;

        bottom:0;

        left:0;

        right:0;

        background:linear-gradient(transparent, rgba(0,0,0,.7));

        padding:24px 12px 10px;

        color:#fff;

        font-size:13px;

        font-weight:600;

    }