*{box-sizing:border-box}body{margin:0;padding:22px;min-height:100vh;color:#eee;font-family:Arial;background:radial-gradient(circle,#252525,#0c0c0c 70%)}.app{width:min(1450px,97vw);margin:auto}header{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px}h1{margin:0;color:#d9bd91;letter-spacing:3px}header p{margin:6px 0 0;color:#aaa}button,select{padding:9px;border:1px solid #806d57;border-radius:8px;color:#fff;background:#383028}button{cursor:pointer}.filtros{display:grid;grid-template-columns:repeat(3,minmax(170px,1fr)) auto;gap:14px;align-items:end;margin-bottom:20px;padding:15px;border:1px solid #5b4b3b;border-radius:12px;background:#171411}label{display:flex;flex-direction:column;gap:5px;color:#d5c6b5;font-size:13px}#contador{padding:10px;color:#8dffad;font-family:monospace;text-align:right}#galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}.tarjeta{overflow:hidden;border:1px solid #574838;border-radius:12px;background:#171411;box-shadow:0 7px 20px #0008;cursor:pointer}.tarjeta:hover{transform:translateY(-2px);border-color:#a98a67}.miniatura{aspect-ratio:16/10;background:#000}.miniatura img{width:100%;height:100%;object-fit:cover;display:block}.info{padding:11px}.tipo{display:inline-block;margin-bottom:7px;padding:3px 7px;border-radius:999px;color:#9dffb3;background:#0b2412;font-size:11px}.titulo{margin:0 0 6px;color:#f0d3a5;font-size:14px}.meta{color:#bbb;font:12px/1.5 monospace}.score{color:#ffd375;font-weight:bold}#vacio{padding:50px;text-align:center;color:#aaa}#modal{position:fixed;z-index:1000;inset:0;padding:30px;background:#000d;overflow:auto}.modal-contenido{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;width:min(1350px,96vw);margin:30px auto;padding:18px;border:1px solid #6a5744;border-radius:14px;background:#15120f}.imagen-grande{display:flex;align-items:center;justify-content:center;min-height:65vh;background:#000}.imagen-grande img{max-width:100%;max-height:78vh;object-fit:contain}.modal-contenido aside{padding:10px}.modal-contenido h2{color:#d9bd91}.modal-contenido dl{margin:0}.modal-contenido dt{margin-top:10px;color:#8dffad;font-size:12px}.modal-contenido dd{margin:3px 0;color:#ddd;font-family:monospace;word-break:break-word}.modal-contenido a{display:block;margin-top:8px;padding:9px;border-radius:7px;color:#fff;background:#40362d;text-decoration:none;text-align:center}#cerrar{position:fixed;top:15px;right:22px;z-index:1001;width:44px;height:44px;border-radius:50%;font-size:25px}@media(max-width:800px){.filtros{grid-template-columns:1fr}.modal-contenido{grid-template-columns:1fr}#contador{text-align:left}}
.visor-navegacion{
    display:grid;
    grid-template-columns:58px minmax(0,1fr) 58px;
    gap:10px;
    align-items:center;
}
.nav-flecha{
    width:52px;
    height:78px;
    border-radius:12px;
    font-size:30px;
    line-height:1;
    background:#2d2721;
    border:1px solid #806d57;
    color:#f5d7aa;
    opacity:.9;
}
.nav-flecha:hover:not(:disabled){
    background:#4b4035;
    transform:scale(1.04);
}
.nav-flecha:disabled{
    opacity:.25;
    cursor:not-allowed;
}
.imagen-grande{
    position:relative;
}
.contador-modal{
    position:absolute;
    left:50%;
    bottom:12px;
    transform:translateX(-50%);
    padding:6px 11px;
    border-radius:999px;
    color:#dfffe5;
    background:rgba(0,0,0,.72);
    font:12px monospace;
    border:1px solid rgba(255,255,255,.14);
}
@media(max-width:800px){
    .visor-navegacion{
        grid-template-columns:42px minmax(0,1fr) 42px;
        gap:5px;
    }
    .nav-flecha{
        width:38px;
        height:64px;
        font-size:22px;
    }
}

.visor-navegacion{display:grid;grid-template-columns:58px minmax(0,1fr) 58px;gap:10px;align-items:center}
.nav-flecha{width:52px;height:78px;border-radius:12px;font-size:30px;line-height:1;background:#2d2721;border:1px solid #806d57;color:#f5d7aa}.nav-flecha:disabled{opacity:.25;cursor:not-allowed}
.imagen-grande{position:relative;overflow:auto}.imagen-grande canvas{display:block;max-width:100%;max-height:78vh;width:auto;height:auto;margin:auto;background:#000}
.contador-modal,.resolucion-modal{position:absolute;bottom:12px;padding:6px 11px;border-radius:999px;color:#dfffe5;background:#000b;font:12px monospace;border:1px solid #ffffff24}.contador-modal{left:50%;transform:translateX(-50%)}.resolucion-modal{right:12px}
@media(max-width:800px){.visor-navegacion{grid-template-columns:40px minmax(0,1fr) 40px;gap:4px}.nav-flecha{width:38px;height:62px;font-size:22px}}