/* Centro de descargas. Monta sobre inicio.css (barra, menú, pie, botones, .wrap)
   y soluciones.css (.shero, .tabs, .cierre). */

.tabs__cuenta{
  margin-left:auto;
  align-self:center;
  font-size:var(--fs-xs);
  color:var(--g-500);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ---------- Grupo de documentos ---------- */

.grupo{padding-top:clamp(32px,5vh,52px);scroll-margin-top:96px}
.grupo:last-of-type{padding-bottom:clamp(24px,4vh,36px)}

.grupo__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:var(--sp-4);
  margin-bottom:clamp(16px,2.4vh,24px);
}

.grupo__h{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  font-size:clamp(19px,2.1vw,25px);
  letter-spacing:-.02em;
}
.grupo__h::before{
  content:'';
  width:22px;
  height:1px;
  background:var(--g-500);
  flex:none;
}

.grupo__sub{
  margin-top:5px;
  padding-left:34px;
  font-size:var(--fs-sm);
  color:var(--g-500);
}

.grupo__cuenta{
  font-size:var(--fs-xs);
  color:var(--g-500);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.docs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px);
  align-items:start;
}
.docs--fichas{grid-template-columns:repeat(5,minmax(0,1fr))}

/* ---------- Documento disponible ---------- */

.doc--listo{
  display:grid;
  gap:var(--sp-3);
  align-content:start;
  padding:clamp(12px,1.4vw,16px);
  background:var(--white);
  border:1px solid var(--g-200);
  transition:border-color var(--tr-fast),box-shadow var(--tr-fast);
}
.doc--listo:hover{border-color:var(--g-300);box-shadow:0 4px 18px rgba(5,5,5,.06)}

.doc__vista{
  position:relative;
  aspect-ratio:3/3.4;
  overflow:hidden;
  background:var(--white);
  border:1px solid var(--g-200);
}
.doc__vista img{
  width:100%;
  height:auto;
  display:block;
}

.doc__pdf{
  position:absolute;
  right:8px;
  bottom:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:36px;
  background:var(--blue);
  color:var(--white);
  border-radius:3px;
  font-family:var(--font-display);
  font-size:9px;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:0 2px 8px rgba(5,5,5,.2);
}

.doc__n{
  font-size:var(--fs-sm);
  font-weight:600;
  line-height:1.3;
}
.doc__kb{
  font-size:var(--fs-xs);
  color:var(--g-500);
  font-variant-numeric:tabular-nums;
  margin-top:-6px;
}

.doc__bajar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  height:38px;
  padding-inline:var(--sp-3);
  background:var(--blue);
  color:var(--white);
  border-radius:3px;
  font-size:13px;
  font-weight:600;
  transition:background var(--tr-fast);
}
.doc__bajar:hover{background:var(--blue-dark)}

/* ---------- Documento en preparación ---------- */

.doc--pronto{
  display:grid;
  grid-template-columns:74px minmax(0,1fr);
  grid-template-areas:"tapa texto" "aviso aviso";
  align-items:start;
  gap:var(--sp-4);
  padding:clamp(12px,1.4vw,16px);
  background:var(--g-050);
  border:1px solid var(--g-200);
}

.doc__tapa{
  grid-area:tapa;
  display:grid;
  align-content:end;
  justify-items:center;
  aspect-ratio:3/4;
  padding-bottom:9px;
  background:linear-gradient(150deg,#dcdfe2,#c3c7cb 58%,#d6d9dc);
  border:1px solid var(--g-300);
}
.doc__tapa img{width:40px;height:auto;opacity:.5}

.doc__cuerpo{
  grid-area:texto;
  display:grid;
  gap:var(--sp-3);
  align-content:start;
  justify-items:start;
}
.doc__cuerpo .doc__n{color:var(--g-700)}

.pronto{
  display:inline-block;
  padding:3px 9px;
  background:var(--g-200);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--g-700);
}

.doc__aviso{
  grid-area:aviso;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  height:38px;
  margin-top:var(--sp-2);
  background:var(--white);
  border:1px solid var(--g-300);
  border-radius:3px;
  font-size:13px;
  font-weight:500;
  color:var(--g-700);
  transition:border-color var(--tr-fast),color var(--tr-fast);
}
.doc__aviso:hover{border-color:var(--black);color:var(--black)}
.doc__aviso svg{opacity:.7}

.doc--libro{
  display:grid;
  grid-template-columns:74px minmax(0,1fr);
  grid-template-areas:"tapa texto" "aviso aviso";
  align-items:start;
  gap:var(--sp-4);
  padding:clamp(12px,1.4vw,16px);
  background:var(--white);
  border:1px solid var(--g-200);
}
.doc--libro .doc__tapa{padding:0;background:var(--white);overflow:hidden}
.doc--libro .doc__tapa img{width:100%;height:100%;object-fit:cover;opacity:1}
.doc--libro .doc__kb{margin-top:0}
.doc--libro .doc__bajar{grid-area:aviso;margin-top:var(--sp-2)}

/* ---------- Nota ---------- */

.nota-docs{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:var(--sp-3);
  margin-top:clamp(24px,4vh,40px);
  padding-top:var(--sp-5);
  border-top:1px solid var(--g-200);
  font-size:var(--fs-xs);
  color:var(--g-500);
  line-height:1.6;
}
.nota-docs svg{color:var(--blue);opacity:.8;margin-top:1px}
.nota-docs p{max-width:82ch}

/* ---------- Responsive ---------- */

@media (max-width:1100px){
  .docs--fichas{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:1024px){
  .tabs__cuenta{display:none}
  .docs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .docs--fichas{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .docs,.docs--fichas{grid-template-columns:1fr;gap:var(--sp-3)}

  /* en celular las fichas tambien pasan a fila: la vista previa se achica */
  .doc--listo{
    grid-template-columns:74px minmax(0,1fr) auto;
    align-items:center;
    gap:var(--sp-4);
  }
  .doc__vista{aspect-ratio:3/4}
  .doc__pdf{width:22px;height:26px;font-size:8px;right:5px;bottom:5px}
  .doc__kb{margin-top:2px}
  .doc__bajar{
    width:38px;
    padding-inline:0;
    background:transparent;
    color:var(--blue);
  }
  .doc__bajar span{display:none}
  .doc__bajar:hover{background:transparent;color:var(--blue-dark)}

  .grupo__sub{padding-left:0}
  .grupo__head{grid-template-columns:minmax(0,1fr) auto}
}

@media (max-width:420px){
  .doc--pronto,.doc--libro{grid-template-columns:64px minmax(0,1fr)}
}