/* =========================================
   APP GLOBAL BACKGROUND THEME (TEAL)
   Mobile-safe + Desktop premium
   ========================================= */

/* Theme variables */
:root,
[data-bs-theme="light"]{
  --app-primary: #6bc1ae;
  --app-primary-rgb: 107, 193, 174;
  --app-primary-600: #55b3a0;

  /* Overlay tuning */
  --app-overlay-a: 0.70;
  --app-overlay-b: 0.35;

  /* Shadow tuning (theme-driven) */
  --app-shadow-a: 0.35;   /* main shadow alpha */
  --app-shadow-inset: 0.12;
}

/* Viewport + mobile quirks */
html, body{
  width: 100%;
  min-height: 100svh;
  margin: 0; /* evita scroll fantasma por márgenes */
}

/* Global background */
body{
  min-height: 100svh;

  background-color: #0e2a26; /* fallback base */
  background-image: url("/img/bg/app-login.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;

  -webkit-tap-highlight-color: transparent; /* evita highlight en móvil */
  -webkit-text-size-adjust: 100%;

  /* Evita hacks innecesarios que pueden crear stacking context raro:
     translateZ(0) puede causar blur/aliasing en iOS y problemas de fixed */
  /* -webkit-transform: translateZ(0); */
}

/* Desktop only */
@media (min-width: 992px){
  body{
    background-attachment: fixed;
  }
}

/* Overlay */
.app-bg-overlay{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(1200px circle at 50% 35%,
      rgba(var(--app-primary-rgb), var(--app-overlay-b)) 0%,
      rgba(14, 42, 38, var(--app-overlay-a)) 60%,
      rgba(10, 22, 20, 0.92) 100%),
    linear-gradient(180deg,
      rgba(10, 22, 20, 0.25) 0%,
      rgba(10, 22, 20, 0.55) 100%);

  filter: saturate(1.05) contrast(1.02);
}

.app-bg-overlay::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.020) 0px,
      rgba(255,255,255,0.020) 1px,
      rgba(0,0,0,0.020) 2px,
      rgba(0,0,0,0.020) 3px);
  opacity: 0.18;
  mix-blend-mode: overlay;
}

/* Content above overlay
   Importante: no fuerces position:relative a *todo* porque puede afectar
   dropdowns/modals/toasts (Bootstrap). Mejor limitarlo a tu wrapper. */
.app-content{
  position: relative;
  z-index: 1;
}

/* Si no tienes wrapper, puedes usar esto, pero es menos seguro que .app-content */
/* body > *{
  position: relative;
  z-index: 1;
} */

/* Hero */
.hero-section{
  min-height: 100svh;
  background: transparent !important;
  display: flex;
  align-items: center;
}

/* Glass card */
.app-glass{
  background: rgba(9, 16, 16, 0.52);
  border: 1px solid rgba(var(--app-primary-rgb), 0.18);

  /* ✅ Shadow adaptado al tema (sin negro fijo)
     - Sombra principal tintada por el color del tema
     - Inset sutil del mismo color
  */
  box-shadow:
    0 18px 60px rgba(var(--app-primary-rgb), var(--app-shadow-a)),
    0 0 0 1px rgba(var(--app-primary-rgb), var(--app-shadow-inset)) inset;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-radius: 16px; /* opcional, pero suele encajar con glass */
}