/* =========================================================
   NAI HUB · FOOTER
   NEURO APRENDIZAJE INFANTIL

   UBICACIÓN:
   frontend/src/components/footer/footer.css

   DISEÑO:
   - PREMIUM
   - ELEGANTE
   - MINIMALISTA
   - COMPACTO
   - NEGRO REAL EN DARK
   - CLARO LIMPIO
   - SIN LOGO
   - SIN BADGE
   - RESPONSIVE
   - SIN GLOW
   ========================================================= */


/* =========================================================
   TOKENS
   ========================================================= */

.app-footer {

  --footer-bg:
    #000000;

  --footer-surface:
    #0a0a0a;

  --footer-border:
    #202020;

  --footer-border-strong:
    #343434;

  --footer-text:
    #ffffff;

  --footer-text-secondary:
    #b5b5b5;

  --footer-text-muted:
    #777777;

  --footer-accent:
    #a89bd8;

  --footer-transition:
    120ms cubic-bezier(.2, .8, .2, 1);

}


/* =========================================================
   BASE
   ========================================================= */

.app-footer {

  position:
    relative;

  width:
    100%;

  min-width:
    0;

  min-height:
    38px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  margin-top:
    auto;

  padding:
    0 16px;

  overflow:
    hidden;

  border-top:
    1px solid var(--footer-border);

  background:
    var(--footer-bg);

  color:
    var(--footer-text);

}


/* =========================================================
   ACENTO SUPERIOR
   ========================================================= */

.app-footer::before {

  content:
    "";

  position:
    absolute;

  top:
    0;

  right:
    0;

  left:
    0;

  height:
    1px;

  pointer-events:
    none;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 20%,
      rgba(168, 155, 216, .18) 50%,
      transparent 80%,
      transparent 100%
    );

}


/* =========================================================
   BRAND
   ========================================================= */

.footer-brand {

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

}


/* =========================================================
   BRAND COPY
   ========================================================= */

.footer-brand-copy {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    2px;

}


.footer-brand-copy strong {

  max-width:
    100%;

  overflow:
    hidden;

  color:
    var(--footer-text);

  font-size:
    9px;

  font-weight:
    750;

  line-height:
    1.05;

  letter-spacing:
    -.012em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.footer-brand-copy span {

  max-width:
    100%;

  overflow:
    hidden;

  color:
    var(--footer-text-muted);

  font-size:
    7px;

  font-weight:
    550;

  line-height:
    1;

  letter-spacing:
    .01em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   RIGHT
   ========================================================= */

.footer-right {

  min-width:
    0;

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;

  color:
    var(--footer-text-secondary);

  font-size:
    7.5px;

  font-weight:
    650;

  line-height:
    1;

  white-space:
    nowrap;

}


/* =========================================================
   YEAR
   ========================================================= */

.footer-year {

  color:
    var(--footer-text-muted);

  font-weight:
    650;

}


/* =========================================================
   PRODUCT
   ========================================================= */

.footer-product {

  color:
    var(--footer-text);

  font-weight:
    750;

  letter-spacing:
    -.01em;

}


/* =========================================================
   DIVIDER
   ========================================================= */

.footer-divider {

  width:
    1px;

  height:
    12px;

  flex:
    0 0 1px;

  border-radius:
    0;

  background:
    var(--footer-border-strong);

  opacity:
    1;

}


/* =========================================================
   HOVER SUTIL
   ========================================================= */

.footer-brand-copy strong,
.footer-product {

  transition:
    color var(--footer-transition);

}


.footer-brand:hover
.footer-brand-copy strong,

.footer-right:hover
.footer-product {

  color:
    #ffffff;

}


/* =========================================================
   LIGHT MODE
   ========================================================= */

html[data-theme="light"]
.app-footer,

body.light
.app-footer {

  --footer-bg:
    #ffffff;

  --footer-surface:
    #f6f6f6;

  --footer-border:
    #e1e1e1;

  --footer-border-strong:
    #c8c8c8;

  --footer-text:
    #0a0a0a;

  --footer-text-secondary:
    #454545;

  --footer-text-muted:
    #777777;

  --footer-accent:
    #6253a2;

  background:
    #ffffff;

  border-top-color:
    #e1e1e1;

  color:
    #0a0a0a;

}


/* =========================================================
   LIGHT ACCENT
   ========================================================= */

html[data-theme="light"]
.app-footer::before,

body.light
.app-footer::before {

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 20%,
      rgba(98, 83, 162, .12) 50%,
      transparent 80%,
      transparent 100%
    );

}


/* =========================================================
   LIGHT TEXT
   ========================================================= */

html[data-theme="light"]
.footer-brand-copy strong,

html[data-theme="light"]
.footer-product,

body.light
.footer-brand-copy strong,

body.light
.footer-product {

  color:
    #0a0a0a;

}


html[data-theme="light"]
.footer-brand-copy span,

html[data-theme="light"]
.footer-year,

html[data-theme="light"]
.footer-right,

body.light
.footer-brand-copy span,

body.light
.footer-year,

body.light
.footer-right {

  color:
    #6f6f6f;

}


/* =========================================================
   LIGHT DIVIDER
   ========================================================= */

html[data-theme="light"]
.footer-divider,

body.light
.footer-divider {

  background:
    #d0d0d0;

}


/* =========================================================
   RESPONSIVE ≤ 900
   ========================================================= */

@media (max-width: 900px) {

  .app-footer {

    min-height:
      36px;

    padding:
      0 12px;

    gap:
      12px;

  }


  .footer-brand-copy strong {

    font-size:
      8.7px;

  }


  .footer-brand-copy span {

    font-size:
      6.8px;

  }


  .footer-right {

    gap:
      6px;

    font-size:
      7.2px;

  }

}


/* =========================================================
   RESPONSIVE ≤ 650
   ========================================================= */

@media (max-width: 650px) {

  .app-footer {

    min-height:
      34px;

    padding:
      0 10px;

    gap:
      10px;

  }


  .footer-brand-copy span {

    display:
      none;

  }


  .footer-brand-copy strong {

    max-width:
      220px;

  }


  .footer-right {

    gap:
      5px;

  }

}


/* =========================================================
   RESPONSIVE ≤ 460
   ========================================================= */

@media (max-width: 460px) {

  .app-footer {

    min-height:
      32px;

    padding:
      0 8px;

    gap:
      8px;

  }


  .footer-brand-copy strong {

    max-width:
      180px;

    font-size:
      8.2px;

  }


  .footer-right {

    gap:
      4px;

    font-size:
      6.8px;

  }


  .footer-divider {

    height:
      10px;

  }

}


/* =========================================================
   RESPONSIVE ≤ 380
   ========================================================= */

@media (max-width: 380px) {

  .footer-brand-copy strong {

    max-width:
      150px;

  }


  .footer-year,
  .footer-divider {

    display:
      none;

  }


  .footer-product {

    font-size:
      6.8px;

  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .footer-brand-copy strong,
  .footer-product {

    transition:
      none;

  }

}