/* ============================================================
   Soft4All Free — RESPONSIVE SPACE + BACKGROUND R16
   One page background, one width system, responsive use of space.
   ============================================================ */

:root{
  --s4-r16-content-max:1760px;
  --s4-r16-text-max:1040px;
  --s4-r16-gap:clamp(12px,1vw,18px);
}

/* R17 is the only owner of canvas, surfaces and visual backgrounds. */

/* ============================================================
   2. CANONICAL WIDTH / GUTTER
   ============================================================ */
#software-center.sc-shell,
.s4-security-page,
.s4x-shell,
.s4-support-pay{
  width:min(var(--s4-r16-content-max),calc(100% - (var(--s4-gutter) * 2)))!important;
  max-width:none!important;
}

body:not([data-page]) main > :is(.hero,.section){
  width:min(var(--s4-r16-content-max),calc(100% - (var(--s4-gutter) * 2)))!important;
  max-width:none!important;
}

/* Text-heavy legal/contact pages use more width than before but preserve
   a readable text measure instead of stretching prose across the screen. */
main.w,
body > main[style]{
  width:min(1100px,calc(100% - (var(--s4-gutter) * 2)))!important;
  max-width:none!important;
  margin:18px auto 42px!important;
}
main.w > .card,
body > main[style] > .card{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}

/* ============================================================
   3. SOFTWARE — use width without five cramped columns
   ============================================================ */
#software-center .sc-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:var(--s4-r16-gap)!important;
}
#software-center .sc-card{
  min-height:240px!important;
}

/* Four columns only when there is genuinely enough viewport. */
@media (min-width:1600px){
  #software-center .sc-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}
@media (max-width:1279px) and (min-width:821px){
  #software-center .sc-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* ============================================================
   4. INVENTARIO — one real page grid
   ============================================================ */
body[data-page="inventario"] main#contenido{
  width:min(var(--s4-r16-content-max),calc(100% - (var(--s4-gutter) * 2)))!important;
  max-width:none!important;
  margin:0 auto 42px!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:var(--s4-r16-gap)!important;
}

body[data-page="inventario"] main#contenido > *{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  min-width:0!important;
}
/* FAQ uses two readable columns on wide screens; if the count is odd,
   the final question uses the complete row. */
@media (min-width:1280px){
  body[data-page="inventario"] .faq{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:start!important;
  }
  body[data-page="inventario"] .faq > details:last-child:nth-child(odd){
    grid-column:1/-1!important;
  }
}

/* MANUALS + VOLUNTARY SUPPORT:
   same row when there is room, stacked everywhere else. */
@media (min-width:1280px){
  body[data-page="inventario"] main#contenido{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:stretch!important;
  }
  body[data-page="inventario"] main#contenido > :not(#manuales):not(#apoyar){
    grid-column:1/-1!important;
  }
  body[data-page="inventario"] main#contenido > #manuales{
    grid-column:1!important;
  }
  body[data-page="inventario"] main#contenido > #apoyar{
    grid-column:2!important;
  }
}

body[data-page="inventario"] #manuales,
body[data-page="inventario"] #apoyar{
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  box-sizing:border-box!important;
  align-self:stretch!important;
}

/* Support is already inside a framed top-level block: remove the second,
   redundant card background and make the QR compact. */
body[data-page="inventario"] #apoyar{
  padding:var(--s4-pad)!important;
}
body[data-page="inventario"] #apoyar > .container.support-card{
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 118px!important;
  gap:14px!important;
  align-items:start!important;
}
body[data-page="inventario"] #apoyar .qr-wrap{
  width:110px!important;
  max-width:110px!important;
  margin:0 auto!important;
  padding:8px!important;
  border-radius:12px!important;
}
body[data-page="inventario"] #apoyar .support-actions{
  gap:8px!important;
  margin-top:15px!important;
}
body[data-page="inventario"] #apoyar .button{
  min-height:40px!important;
  padding:0 13px!important;
  border-radius:10px!important;
  font-size:.82rem!important;
}
body[data-page="inventario"] #apoyar p{
  margin-top:8px!important;
  line-height:1.5!important;
}
body[data-page="inventario"] #apoyar .microcopy{
  margin-top:9px!important;
  line-height:1.4!important;
}

/* Manuals remain compact inside their half of the row. */
body[data-page="inventario"] #manuales{
  padding:var(--s4-pad)!important;
}
body[data-page="inventario"] #manuales .s4-manuals-copy > p{
  font-size:.9rem!important;
  line-height:1.5!important;
}
body[data-page="inventario"] #manuales .s4-manuals-control{
  margin-top:13px!important;
}
body[data-page="inventario"] #manuales .s4-manuals-meta{
  margin-top:10px!important;
  flex-wrap:wrap!important;
}

/* Responsive internal grids. */
@media (max-width:1199px){
  body[data-page="inventario"] .feature-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body[data-page="inventario"] .trust-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media (max-width:760px){
  body[data-page="inventario"] .feature-grid,
  body[data-page="inventario"] .trust-grid{
    grid-template-columns:1fr!important;
  }
}

/* ============================================================
   5. INVENTARIO HELP — two complementary blocks side by side
   ============================================================ */
body[data-page="inventario-help"] main{
  width:min(var(--s4-r16-content-max),calc(100% - (var(--s4-gutter) * 2)))!important;
  max-width:none!important;
  margin:0 auto 42px!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:var(--s4-r16-gap)!important;
}
body[data-page="inventario-help"] main > *{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
}
body[data-page="inventario-help"] .faq{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:12px!important;
  align-items:start!important;
}
@media (min-width:1100px){
  body[data-page="inventario-help"] .faq{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* ============================================================
   6. SECURITY — verifier full width, information paired below
   ============================================================ */
.s4-security-page{
  gap:var(--s4-r16-gap)!important;
}
.s4-security-page > :is(section,details,nav){
  min-width:0!important;
}

/* ============================================================
   7. ANDROID — hero and catalogue share wide screens
   ============================================================ */
.s4x-shell{
  gap:var(--s4-r16-gap)!important;
}
@media (min-width:1500px){
  .s4x-shell .s4x-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* ============================================================
   8. SUPPORT PAGE
   ============================================================ */
.s4-support-pay{
  width:min(var(--s4-r16-content-max),calc(100% - (var(--s4-gutter) * 2)))!important;
}
.s4-support-pay > .s4-support-layout{
  gap:var(--s4-r16-gap)!important;
}
@media (min-width:1280px){
  .s4-support-pay > .s4-support-layout.s4-donation-layout{
    grid-template-columns:minmax(0,1.55fr) minmax(280px,.45fr)!important;
  }
}

/* ============================================================
   9. INFO / PRIVACY — use wide page, readable text
   ============================================================ */
body:not([data-page]) main > .hero p,
body:not([data-page]) main > .section .section-head > p{
  max-width:var(--s4-r16-text-max)!important;
}
@media (min-width:1280px){
  body:not([data-page]) main > .section .faq{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    align-items:start!important;
  }
  body:not([data-page]) main > .section .faq > details:last-child:nth-child(odd){
    grid-column:1/-1!important;
  }
}

/* ============================================================
   10. RESPONSIVE SAFETY — real device width
   ============================================================ */
@media (max-width:1279px){
  body[data-page="inventario"] main#contenido,
  body[data-page="inventario-help"] main,
  .s4-security-page,
  .s4x-shell{
    grid-template-columns:minmax(0,1fr)!important;
  }

  body[data-page="inventario"] main#contenido > #manuales,
  body[data-page="inventario"] main#contenido > #apoyar,
  body[data-page="inventario"] main#contenido > :not(#manuales):not(#apoyar),
  body[data-page="inventario-help"] main > *{
    grid-column:1!important;
  }
}

@media (max-width:820px){
  :root{
    --s4-r16-gap:12px;
  }

  #software-center.sc-shell,
  body[data-page="inventario"] main#contenido,
  body[data-page="inventario-help"] main,
  .s4-security-page,
  .s4x-shell,
  .s4-support-pay,
  body:not([data-page]) main > :is(.hero,.section){
    width:calc(100% - 16px)!important;
  }

  #software-center .sc-grid,
  body[data-page="inventario"] .faq,
  body:not([data-page]) main > .section .faq{
    grid-template-columns:1fr!important;
  }

  body[data-page="inventario"] #apoyar > .container.support-card{
    grid-template-columns:1fr!important;
  }
  body[data-page="inventario"] #apoyar .qr-wrap{
    width:106px!important;
    max-width:106px!important;
    margin:8px 0 0!important;
  }
}

@media (max-width:520px){
  :root{
    --s4-gutter:8px;
    --s4-pad:14px;
    --s4-card-pad:13px;
    --s4-r16-gap:10px;
  }

  body[data-page="inventario"] #apoyar .support-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  body[data-page="inventario"] #apoyar .button{
    width:100%!important;
  }

  main.w,
  body > main[style]{
    width:calc(100% - 16px)!important;
  }
}