/* indexFondo.css
   - Fondo con degradado radial anclado al login (centro blanco → bordes violeta)
   - Sin scroll por fondos
   - Card de login más opaco y limpio
*/

/* Layout base y fondo degradado (valores se calculan por JS) */
html, body { height: 100%; }
body{
  overflow: hidden;               /* sin scroll por el fondo */
  /* Degradado radial con centro en el login */
  background:
    radial-gradient(
      circle at var(--cx, 50%) var(--cy, 50%),
      #F5F7FA 0 var(--r-white, 280px),
      #F3EEFF var(--r-white, 280px),
      #A78BFA var(--r-mid, 55vw),
      #7C3AED var(--r-max, 100vw)
    );
  background-attachment: fixed;
}

html.dark body{
  background:
    radial-gradient(
      circle at var(--cx, 50%) var(--cy, 50%),
      #0F1117 0 var(--r-white, 280px),
      #1A1F2B var(--r-white, 280px),
      #8B5CF6 var(--r-mid, 55vw),
      #4C1D95 var(--r-max, 100vw)
    );
  background-attachment: fixed;
}

/* Contenido centrado */
.page{
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px;
  position: relative;
  z-index: 1;
}

/* Botón de tema arriba a la derecha */
.theme-toggle{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2;
}

/* Pila vertical */
.stack > * + *{ margin-top: 12px; }
.field{ display: grid; gap: 6px; }

/* Card de login (opaco + sombra violeta leve) */
.login-card{
  background: rgba(255,255,255,0,1);
  border: 1px solid rgba(124,58,237,.18);
  border-radius: 16px;
  padding: 20px;
  box-shadow:
    0 18px 44px rgba(76,29,149,.18),
    0 2px 10px rgba(0,0,0,.05);
  backdrop-filter: blur(6px);
}
html.dark .login-card{
  background: rgba(255,255,255,0.1);
  border-color: rgba(139,92,246,.22);
}

/* Títulos/labels del login en violeta (por si basics no cargó antes) */
.login-title{ color: var(--primary-strong); font-weight: 800; }
.login-label{ color: var(--primary-strong); font-weight: 700; }

/* Autofill (Chrome) prolijo, sin amarillo chillón */
input.input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
}

/* Tamaño fijo del cuadro de login (más grande) */
.login-card{
  width: 320px;      /* ajustá este valor si querés más/menos */
  max-width: 92vw;   /* para no romper en pantallas chicas */
  padding: 28px 26px;
}

/* Asegura que el contenido use el ancho del card */
.login-card .stack{ width: 100%; }
*, *::before, *::after { box-sizing: border-box; }

.login-card { overflow: hidden; }           /* recorte de cualquier píxel suelto */
.field > * { min-width: 0; }                /* evita overflow en contenedores grid */