/* ----------------------
       Reset básico y variables
       ---------------------- */
    :root{
      --bg:#f6fbff;
      --card:#ffffff;
      --muted:#6b7280;
      --accent:#0ea5e9; /* azul moderno */
      --accent-2:#10b981; /* verde secundario */
      --glass: rgba(255,255,255,0.6);
      --radius:12px;
      --max-width:1100px;
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}
    

    /* Header / Nav */
    header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
    header h1{font-size:1.1rem;margin:0}
    nav{display:flex;gap:8px}
    .nav-btn{background:transparent;border:1px solid transparent;padding:8px 12px;border-radius:10px;cursor:pointer}
    .nav-btn[aria-current='true']{background:var(--card);box-shadow:0 6px 18px rgba(14,165,233,0.12);border-color:rgba(2,6,23,0.04)}

    /* Layout */

    /* Buscador de libros */
    .search-row{display:flex;gap:8px;align-items:center}
    .search-input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid #e6eef7;font-size:0.95rem}
    .btn{padding:10px 14px;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;border:none;cursor:pointer}
    .muted{color:var(--muted);font-size:0.9rem}
    .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:12px}
    .card{background:linear-gradient(180deg,rgba(255,255,255,0.9),var(--card));padding:12px;border-radius:12px;border:1px solid rgba(2,6,23,0.04);display:flex;gap:12px}
    .cover{width:72px;height:100px;background:#f3f7fb;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:0.75rem}
    .card-body{display:flex;flex-direction:column}
    .title{font-weight:600;margin-bottom:6px}
    .meta{font-size:0.85rem;color:var(--muted);margin-bottom:8px}
    .desc{font-size:0.85rem;color:#24303f}

    /* Pagination */
    .pagination{display:flex;gap:8px;align-items:center;margin-top:12px}
    .page-btn{padding:8px 10px;border-radius:8px;border:1px solid rgba(2,6,23,0.05);background:white;cursor:pointer}

    /* Gallery */
    .controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
    .select, .filter-input{padding:8px;border-radius:8px;border:1px solid #e6eef7}
    .masonry{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:12px}
    .photo{border-radius:10px;overflow:hidden;position:relative}
    .photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
    .photo:hover img{transform:scale(1.03)}
    .caption{position:absolute;left:8px;bottom:8px;background:linear-gradient(90deg,rgba(0,0,0,0.55),rgba(0,0,0,0.25));color:white;padding:6px;border-radius:8px;font-size:0.8rem}

    /* Modal */
    .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,0.6);padding:20px}
    .modal.open{display:flex}
    .modal-content{max-width:1000px;width:100%;background:var(--card);border-radius:12px;padding:14px;display:flex;gap:12px}
    .modal-img{flex:1}
    .modal-meta{width:320px;overflow:auto}
    .close{background:transparent;border:0;font-size:1.2rem;cursor:pointer}

    /* Loading */
    .loader{display:inline-block;border:4px solid #e6eef7;border-top:4px solid var(--accent);border-radius:50%;width:20px;height:20px;animation:spin 1s linear infinite}
    @keyframes spin{to{transform:rotate(360deg)}}

    /* Responsivo */
    @media (max-width:720px){
      .card{flex-direction:row}
      .modal-content{flex-direction:column}
      .modal-meta{width:100%}
    }

    /* Tiny educational footer */
    footer{font-size:0.85rem;color:var(--muted);text-align:center;padding:8px}