/* ============================================================
   Soft4All Free — CANONICAL BACKGROUND R17
   The visual reference is the current Software / Android / Security
   surface already approved by the user.
   ============================================================ */

:root{
  /* Exact R16 surface used by the approved Software/Android/Security blocks. */
  --s4-r17-surface-bg:linear-gradient(180deg,rgba(11,29,47,.88),rgba(8,21,35,.88));
  --s4-r17-nested-bg:rgba(255,255,255,.024);
  --s4-r17-surface-border:rgba(43,148,255,.42);
  --s4-r17-nested-border:rgba(43,148,255,.25);

  /* Global canvas: canonical solid colour + the approved Soft4All image. */
  --s4-r17-page-color:#07101a;
  --s4-r17-page-overlay:linear-gradient(180deg,rgba(7,16,26,.66) 0%,rgba(7,16,26,.78) 52%,rgba(7,16,26,.90) 100%);
  --s4-r17-page-image:url("../img/fondo-soft4all.jpg");
}

/* ============================================================
   1. SAME PAGE CANVAS EVERYWHERE
   ============================================================ */
html{
  background-color:var(--s4-r17-page-color)!important;
  background-image:none!important;
}
body{
  background-color:var(--s4-r17-page-color)!important;
  background-image:var(--s4-r17-page-overlay),var(--s4-r17-page-image)!important;
  background-position:center top,center center!important;
  background-repeat:no-repeat,no-repeat!important;
  background-size:cover,cover!important;
  background-attachment:fixed,fixed!important;
}

/* Outer roots must never paint a second page background over the canvas. */
#software-center,
body[data-page="inventario"] main#contenido,
body[data-page="inventario-help"] main,
.s4-security-page,
.s4x-shell,
.s4-support-pay,
main.w,
body > main[style],
body:not([data-page="inventario"]) > main{
  background:transparent!important;
  background-image:none!important;
  background-color:transparent!important;
}

/* ============================================================
   2. ONE TOP-LEVEL SURFACE FOR ALL PAGE FAMILIES
   Software / Android / Security are the visual source of truth.
   ============================================================ */

/* Software */
#software-center .sc-hero,
#software-center .s4nl,

/* Inventario */
body[data-page="inventario"] main#contenido > :is(
  .hero,
  .trust-strip,
  .section,
  .s4-premium-suite,
  #manuales
),

/* Inventario help */
body[data-page="inventario-help"] main > :is(.hero,.section),

/* Security */
.s4-security-page > :is(section,details,nav),

/* Android */
.s4x-shell > :is(.s4x-hero,.s4x-section),

/* Support */
.s4-support-pay > .s4-support-hero,
.s4-support-pay .s4-pay-card,

/* Information / Privacy */
body:not([data-page="inventario"]):not([data-page="inventario-help"]) main > :is(.hero,.section),

/* Contact / Legal */
main.w > .card,
body > main[style] > .card{
  background:var(--s4-r17-surface-bg)!important;
  background-image:var(--s4-r17-surface-bg)!important;
  background-color:transparent!important;
  border-color:var(--s4-r17-surface-border)!important;
  box-shadow:0 9px 26px rgba(0,0,0,.07)!important;
}

/* Inventario voluntary-support block is a top-level section too. */
body[data-page="inventario"] #apoyar{
  background:var(--s4-r17-surface-bg)!important;
  background-image:var(--s4-r17-surface-bg)!important;
  background-color:transparent!important;
  border-color:var(--s4-r17-surface-border)!important;
}

/* The inner support card must inherit the top-level surface instead of
   reintroducing its old blue gradient. */
body[data-page="inventario"] #apoyar > .container.support-card{
  background:transparent!important;
  background-image:none!important;
  background-color:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}

/* ============================================================
   3. SAME NESTED-CARD BACKGROUND EVERYWHERE
   ============================================================ */

/* Software nested */
#software-center :is(.sc-card,.sc-stat),

/* Inventario nested */
body[data-page="inventario"] :is(
  .feature,
  .windows-release-card,
  .s4-pro-card,
  .s4-premium-free-tools
),

/* Security nested */
.s4-security-page :is(
  .s4-trust-card,
  .s4-security-confidence article,
  .s4-manual-grid article
),

/* Android nested */
.s4x-shell .s4x-card,

/* Support nested controls/cards that are not semantic status colours */
.s4-support-pay :is(.s4-method),

/* Generic cards */
body:not([data-page="inventario"]) .feature-grid > *{
  background:var(--s4-r17-nested-bg)!important;
  background-image:none!important;
  background-color:var(--s4-r17-nested-bg)!important;
  border-color:var(--s4-r17-nested-border)!important;
}

/* ============================================================
   4. SIDEBAR — CATEGORIES AND PAGE LINKS USE THE SAME BASE
   This is language-independent: ES/EN/FR/PT/DE/IT/PL render identically.
   ============================================================ */
.s4-global-sidebar{
  /* Sidebar is intentionally image-free and uses one solid colour. */
  background:#07111d!important;
  background-image:none!important;
  background-color:#07111d!important;
  --s4-r17-nav-base:transparent;
  --s4-r17-nav-hover:rgba(43,148,255,.07);
  --s4-r17-nav-current:rgba(43,148,255,.13);
}

.s4-global-nav-categories a,
.s4-global-nav-pages a{
  background:var(--s4-r17-nav-base)!important;
  background-image:none!important;
  background-color:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}

.s4-global-nav-categories a:hover,
.s4-global-nav-pages a:hover{
  background:var(--s4-r17-nav-hover)!important;
  background-color:var(--s4-r17-nav-hover)!important;
  border-color:rgba(43,148,255,.22)!important;
}

.s4-global-nav-categories a.is-current,
.s4-global-nav-pages a.is-current{
  background:var(--s4-r17-nav-current)!important;
  background-color:var(--s4-r17-nav-current)!important;
  border-color:rgba(43,148,255,.36)!important;
  box-shadow:inset 3px 0 0 rgba(121,231,245,.86)!important;
}

/* No visual separator or alternate background between the two nav groups. */
.s4-global-nav-pages{
  background:transparent!important;
  background-image:none!important;
  border-top:0!important;
  box-shadow:none!important;
}
.s4-global-nav-categories + .s4-global-nav-pages{
  margin-top:4px!important;
  padding-top:0!important;
}

/* ============================================================
   5. PAGE-SPECIFIC LEGACY BACKGROUNDS THAT MUST NOT RETURN
   ============================================================ */

/* Old Inventario support gradient. */
body[data-page="inventario"] .support-card{
  background-image:none!important;
}

/* Old Support page gradients. */
.s4-support-pay .s4-pay-card,
.s4-support-pay .s4-support-hero{
  background:var(--s4-r17-surface-bg)!important;
  background-image:var(--s4-r17-surface-bg)!important;
}

/* Old Android gradients. Keep them exactly on the same canonical surface. */
.s4x-shell .s4x-hero,
.s4x-shell .s4x-section{
  background:var(--s4-r17-surface-bg)!important;
  background-image:var(--s4-r17-surface-bg)!important;
}

/* Old Legal/Contact card gradients. */
main.w > .card,
body > main[style] > .card{
  background:var(--s4-r17-surface-bg)!important;
  background-image:var(--s4-r17-surface-bg)!important;
}

/* ============================================================
   6. RESPONSIVE
   Same colours; only attachment changes for mobile performance.
   ============================================================ */
@media (max-width:820px){
  body{
    background-attachment:scroll,scroll!important;
    background-size:cover,cover!important;
  }
}