:root{
  --grad-a:#93278f; --grad-b:#9a529a; --grad-c:#00a1de;
  --bg:#f7f8fb; --card:#ffffff; --text:#212529; --muted:#6b7280;
  --primary:#7d1f66; --primary-600:#6f1b5b; --primary-700:#611751;
  --ring:rgba(0,0,0,.08); --ok:#15803d; --warn:#b45309;

  /* Tamaño de miniatura */
  --thumb-w: 168px;   /* ancho de la miniatura en desktop */
  --thumb-h: 236px;   /* alto de la miniatura en desktop */
  --thumb-h-sm: 300px;/* alto en móvil */
}
*{box-sizing:border-box}
body{margin:0;font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;color:var(--text);background:var(--bg)}

.hero{ color:#fff; text-align:center; padding:56px 16px 36px; background:linear-gradient(135deg,var(--grad-a),var(--grad-b),var(--grad-c)); }
.hero h1{font-size:clamp(1.5rem,2.5vw,2.2rem); margin:0 0 8px}
.hero p{opacity:.9; margin:0}

.toolbar{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:16px; max-width:1100px; margin:0 auto}
.controls{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.search{flex:1; min-width:260px; display:flex}
.search input{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--ring); background:#fff; outline:none}
.segmented{display:inline-flex; background:#fff; border:1px solid var(--ring); border-radius:12px; overflow:hidden}
.segmented button{padding:10px 14px; border:0; background:transparent; cursor:pointer; font-weight:600}
.segmented button[aria-pressed="true"]{background:var(--primary); color:#fff}
.segmented button:focus-visible{outline:2px solid var(--grad-c)}

.filter-chips{max-width:1100px;margin:4px auto 0; padding:0 16px 8px; display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid var(--ring); background:#fff; cursor:pointer; user-select:none}
.chip input{accent-color:var(--primary)}

.switchline{max-width:1100px; margin:0 auto 8px; padding:0 16px; display:flex; align-items:center; gap:8px}
.switch{position:relative; display:inline-block; width:44px; height:24px}
.switch input{opacity:0; width:0; height:0}
.slider{position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#e5e7eb; transition:.2s; border-radius:999px}
.slider:before{position:absolute; content:""; height:18px; width:18px; left:3px; top:3px; background:white; transition:.2s; border-radius:50%}
.switch input:checked + .slider{background:var(--primary)}
.switch input:checked + .slider:before{transform:translateX(20px)}
.switchtext{font-size:.9rem; color:var(--muted)}

.toc{max-width:1100px; margin:8px auto 0; padding:0 16px 8px; display:flex; gap:12px; flex-wrap:wrap}
.toc a{padding:8px 12px; border-radius:10px; text-decoration:none; border:1px solid var(--ring); background:#fff; color:var(--primary); font-weight:600}
.toc a:hover{filter:brightness(1.05)}

.section{max-width:1100px; margin:8px auto 40px; padding:0 16px}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:10px 0 10px}
.section h2{margin:0}
.count{color:var(--muted); font-size:.9rem}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px}
.list{display:flex; flex-direction:column; gap:10px}

.card{background:var(--card); border-radius:18px; padding:14px; box-shadow:0 10px 24px rgba(0,0,0,.06); border:1px solid var(--ring); display:flex; gap:14px}

/* >>> Miniatura más grande y sin recortes <<< */
.thumb{
  flex: 0 0 var(--thumb-w);
  height: var(--thumb-h);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  background:#fff;               /* fondo blanco para PDFs con transparencia */
  display:flex; align-items:center; justify-content:center;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit: contain;            /* se ve la página completa del PDF */
  display:block;
}

.info{display:flex; flex-direction:column; gap:8px}
.title{font-weight:700; font-size:.98rem; line-height:1.25; margin:0}
.meta{font-size:.78rem; color:var(--muted)}
.tags{display:flex; gap:8px; flex-wrap:wrap}
.tag{font-size:.72rem; padding:4px 8px; border-radius:999px; background:#f3f4f6; color:#374151; border:1px solid var(--ring)}
.tag.derogada{background:#fff7ed; color:#7c2d12; border-color:#fed7aa}

.actions{margin-top:auto; display:flex; gap:8px; flex-wrap:wrap}
.btn{appearance:none; border:1px solid var(--primary); color:#fff; background:var(--primary); padding:8px 12px; border-radius:10px; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:8px}
.btn.secondary{background:#fff; color:var(--primary); border-color:var(--primary)}
.btn:hover{filter:brightness(1.05)}

.a11y{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}

.empty{max-width:1100px; margin:24px auto; color:var(--muted); text-align:center}

@media (max-width:480px){
  .card{flex-direction:column; align-items:center; text-align:center}
  .thumb{width:100%; height: var(--thumb-h-sm);} /* más alto en móvil */
  .info{align-items:center}
}