/* =========================================================================
   LOGIN SUAVE — panel verde/blanco difuminado + fondo de playa (sol y olas)
   Se carga AL FINAL (después de responsive.css).
   Para volver al diseño anterior: quita su <link> del index.html.
   ========================================================================= */

/* ---- Fondo: cielo claro, sol suave y dos olas que se mueven despacio ---- */
.auth{
  overflow-x:hidden;
  background:
    /* disco del sol */
    radial-gradient(circle 64px at 82% 20%, #fffbe6 0%, #ffefb4 55%, rgba(255,236,170,0) 100%),
    /* resplandor del sol */
    radial-gradient(circle 380px at 82% 20%, rgba(255,226,140,.55), rgba(255,226,140,0) 70%),
    /* cielo */
    linear-gradient(180deg,#eefaf5 0%,#fbfefd 45%,#e6f5ee 100%);
}

.auth::before,
.auth::after{
  content:"";position:fixed;left:0;bottom:0;width:200%;
  pointer-events:none;z-index:0;
  background-repeat:repeat-x;background-size:50% 100%;
}
/* Ola de atrás (más clara) */
.auth::before{
  height:40vh;min-height:200px;opacity:.75;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23bfe6d7' d='M0,200 C180,120 540,280 720,200 C900,120 1260,280 1440,200 L1440,320 L0,320Z'/%3E%3C/svg%3E");
  animation:axWave 26s linear infinite;
}
/* Ola de adelante (más verde) */
.auth::after{
  height:27vh;min-height:140px;opacity:.8;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%2395d4bc' d='M0,230 C240,170 480,290 720,230 C960,170 1200,290 1440,230 L1440,320 L0,320Z'/%3E%3C/svg%3E");
  animation:axWave 18s linear infinite reverse;
}
@keyframes axWave{to{transform:translateX(-50%);}}

.ax-container{z-index:1;}

/* ---- Tarjeta de cristal ---- */
.ax-container{
  background:rgba(255,255,255,.70);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  backdrop-filter:blur(18px) saturate(1.15);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 30px 70px -24px rgba(20,112,90,.38),0 0 0 1px rgba(31,111,92,.05);
}
.ax-form-box{background:transparent;}

.ax-input input{
  background:rgba(236,244,240,.85);
  border:1px solid rgba(31,111,92,.10);
}
.ax-input input:focus{background:#fff;}

/* ---- Panel del centro: verde y blanco difuminado ----
   El panel es un elemento muy ancho que se desliza; solo se ve un pedazo.
   Por eso cada mancha de color está repetida anclada a la izquierda y a la
   derecha: se ve igual en las dos posiciones (login y registro). */
.ax-toggle-box::before{
  background:
    /* brillo blanco arriba */
    radial-gradient(circle 270px at right 40px top -30px,  rgba(255,255,255,.62), transparent 70%),
    radial-gradient(circle 270px at left  40px top -30px,  rgba(255,255,255,.62), transparent 70%),
    /* menta clara abajo */
    radial-gradient(circle 310px at right 360px bottom -70px, rgba(178,238,214,.60), transparent 70%),
    radial-gradient(circle 310px at left  360px bottom -70px, rgba(178,238,214,.60), transparent 70%),
    /* verde profundo detrás del texto (para que se lea) */
    radial-gradient(circle 250px at right 210px top 290px, rgba(8,86,66,.55), transparent 72%),
    radial-gradient(circle 250px at left  210px top 290px, rgba(8,86,66,.55), transparent 72%),
    /* base */
    linear-gradient(135deg,#34ab8d,#17725c);
}
.ax-panel h1,
.ax-panel p{text-shadow:0 1px 14px rgba(6,58,44,.38);}
.ax-panel p{color:#eafaf4;}

/* ---- Celular y pantallas bajas (diseño apilado) ---- */
@media (max-width:650px), (max-height:560px){
  .auth{
    background:
      radial-gradient(circle 54px at 80% 9%, #fffbe6 0%, #ffefb4 55%, rgba(255,236,170,0) 100%),
      radial-gradient(circle 300px at 80% 9%, rgba(255,226,140,.55), rgba(255,226,140,0) 70%),
      linear-gradient(180deg,#eefaf5 0%,#fbfefd 45%,#e6f5ee 100%);
  }
  .auth::before{height:26vh;min-height:120px;}
  .auth::after{height:18vh;min-height:90px;}

  .ax-toggle-box{
    background:
      radial-gradient(circle 190px at 92% -10%, rgba(255,255,255,.62), transparent 70%),
      radial-gradient(circle 210px at 8% 115%,  rgba(178,238,214,.60), transparent 70%),
      radial-gradient(circle 230px at 50% 50%,  rgba(8,86,66,.50), transparent 72%),
      linear-gradient(135deg,#34ab8d,#17725c);
  }
}

@media (prefers-reduced-motion:reduce){
  .auth::before,.auth::after{animation:none;}
}