/* =========================================================
   login.css — Pantalla de acceso mística (claro, no “dark”)
   Compatible con Bootstrap 5.3, AOS y Font Awesome.
   Aplica a <section class="section login-astro"> … </section>
   (Si no puedes cambiar el HTML, también actúa sobre .section)
   ========================================================= */

/* ---------- Variables ---------- */
:root{
    --ink: #2b3142;               /* Tinta principal (legible) */
    --muted: #5f6b74;            /* Texto secundario */
    --paper: #ffffff;            /* Base clara */
    --veil-1: #b48ef0;           /* Lavanda */
    --veil-2: #5b79ff;           /* Índigo suave */
    --veil-3: #6f9fb8;           /* Turquesa grisáceo */
    --gold: #ffe65a;             /* Dorado suave */
    --ring:  #c7b6ff;            /* Aro/focus */
  }
  
  /* Accesibilidad: reducir animaciones si el usuario lo pide */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:.001ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.001ms !important;
      scroll-behavior: auto !important;
    }
  }
  
  /* ---------- Lienzo general con “campo estelar” y auroras ---------- */
  .section.login-astro,
  .section{
    position: relative;
    color: var(--ink);
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(1200px 600px at 20% -10%, rgba(180,142,240,.10), transparent 65%),
                radial-gradient(1000px 500px at 110% 10%, rgba(111,159,184,.10), transparent 70%),
                linear-gradient(180deg, #f7f8ff 0%, #ffffff 40%, #f8fbff 100%);
    border-radius: 18px;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  
  /* Estrellas titilando (muy sutil, atrás del todo) */
  .section.login-astro::before,
  .section::before{
    content:"";
    position:absolute; inset:-10%;
    background:
      radial-gradient(1.8px 1.8px at 12% 22%, rgba(58,70,106,.20), transparent 60%),
      radial-gradient(1.4px 1.4px at 35% 10%, rgba(58,70,106,.18), transparent 60%),
      radial-gradient(1.6px 1.6px at 80% 28%, rgba(58,70,106,.16), transparent 60%),
      radial-gradient(1.2px 1.2px at 65% 72%, rgba(58,70,106,.22), transparent 60%),
      radial-gradient(1.5px 1.5px at 30% 85%, rgba(58,70,106,.18), transparent 60%);
    opacity:.55;
    animation: twinkle 7s ease-in-out infinite alternate;
    z-index:-2;
  }
  
  /* Auroras suaves en diagonal */
  .section.login-astro::after,
  .section::after{
    content:"";
    position:absolute; inset:-20%;
    background:
      radial-gradient(60% 40% at 0% 0%, rgba(180,142,240,.20), transparent 60%),
      radial-gradient(50% 40% at 100% 0%, rgba(91,121,255,.18), transparent 60%),
      radial-gradient(70% 50% at 100% 100%, rgba(111,159,184,.16), transparent 65%);
    filter: blur(16px) saturate(110%);
    transform: translate3d(0,0,0);
    animation: drift 22s linear infinite alternate;
    z-index:-3;
  }
  
  /* ---------- Tarjeta central (col-md-7/6) ---------- */
  .col-md-7.col-lg-6{
    position: relative;
  }
  
  /* Card “etérica” alrededor del formulario (sin cambiar tu markup) */
  .col-md-7.col-lg-6 > form,
  .col-md-7.col-lg-6 > .card-like{
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(199,182,255,.35);
    box-shadow: 0 18px 50px rgba(91,121,255,.18);
    border-radius: 16px;
    padding: 1.25rem;
  }
  
  /* Título con ornamentación sutil */
  .h4, h1.h4{
    color: var(--ink);
    letter-spacing:.2px;
    display:flex; align-items:center; gap:.45rem;
  }
  .h4::after{
    content:"";
    width: 10px; height: 10px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.2) 40%, transparent 41%),
                conic-gradient(from 180deg, rgba(91,121,255,.9), rgba(180,142,240,.9), rgba(111,159,184,.9), rgba(91,121,255,.9));
    box-shadow: 0 8px 22px rgba(91,121,255,.25);
  }
  
  /* Divider minúsculo */
  .h4 + .mini-divider{
    position:relative; height: 16px; margin-top:.25rem; margin-bottom:.75rem;
  }
  .mini-divider::before, .mini-divider::after{
    content:""; position:absolute; top:50%; width:45%; height:1px; transform:translateY(-50%);
  }
  .mini-divider::before{
    left:0; background: linear-gradient(90deg, rgba(180,142,240,0) 0%, rgba(180,142,240,.65) 100%);
  }
  .mini-divider::after{
    right:0; background: linear-gradient(90deg, rgba(111,159,184,.65) 0%, rgba(111,159,184,0) 100%);
  }
  
  /* ---------- Inputs con aro de enfoque “astrológico” ---------- */
  .form-label{ color: var(--muted); }
  
  .form-control{
    border-radius: 12px;
    border: 1px solid rgba(43,49,66,.20);
    background: #fff;
    transition: box-shadow .25s ease, border-color .25s ease, transform .05s ease;
  }
  .form-control:focus{
    border-color: rgba(199,182,255,.85);
    box-shadow:
      0 0 0 4px rgba(180,142,240,.18),
      0 10px 26px rgba(91,121,255,.16);
    outline: 0;
  }
  .input-group .btn{
    border-color: rgba(43,49,66,.20);
  }
  
  /* Validez Bootstrap */
  .was-validated .form-control:invalid, .form-control.is-invalid{
    border-color:#dc3545;
    box-shadow: 0 0 0 3px rgba(220,53,69,.08);
  }
  
  /* ---------- Botón principal con halo y destello ---------- */
  .btn-primary{
    --bs-btn-bg: linear-gradient(90deg, var(--veil-2), var(--veil-1));
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: linear-gradient(90deg, #6b88ff, #c2a0ff);
    --bs-btn-color: #fff;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(91,121,255,.28);
    transition: transform .12s ease, box-shadow .25s ease;
  }
  .btn-primary::after{
    content:"";
    position:absolute; inset:-200%;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.45), transparent 45%);
    transform: translate3d(-40%,-40%,0);
    transition: transform .45s ease;
    pointer-events:none;
  }
  .btn-primary:hover{
    transform: translateY(-1px);
    box-shadow: 0 22px 54px rgba(91,121,255,.34), 0 0 0 4px rgba(180,142,240,.12);
  }
  .btn-primary:hover::after{ transform: translate3d(0,0,0); }
  
  /* ---------- Alertas ---------- */
  #alertError{
    border-radius: 12px;
    border: 1px solid rgba(220,53,69,.35);
    box-shadow: 0 8px 22px rgba(220,53,69,.12);
  }
  
  /* ---------- Texto auxiliar ---------- */
  .form-text{ color: var(--muted); }
  
  /* ---------- “Rueda zodiacal” filigrana detrás del formulario ---------- */
  .col-md-7.col-lg-6::before{
    content:"";
    position:absolute;
    right:-120px; top:-80px;
    width: 360px; height: 360px; opacity:.10; pointer-events:none;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 32%, rgba(91,121,255,.55) 33%, transparent 34%),
      radial-gradient(circle at 50% 50%, transparent 48%, rgba(180,142,240,.55) 49%, transparent 50%),
      conic-gradient(from 0deg, rgba(91,121,255,.35), rgba(180,142,240,.35), rgba(111,159,184,.35), rgba(91,121,255,.35));
    filter: blur(.2px) saturate(120%);
    mask-image: radial-gradient(circle at 50% 50%, black 55%, transparent 66%);
  }
  
  /* ---------- Subrayado (compat con theme) ---------- */
  span.subrayado{
    position: relative; z-index: 0; font-weight: 500;
  }
  span.subrayado::before{
    content: "";
    position: absolute; left: 0; right: 0; bottom: .15em; height: .55em;
    background: linear-gradient(90deg, rgba(255,230,90,.45), rgba(180,142,240,.35));
    border-radius: 4px; z-index: -1; transition: background .3s ease;
  }
  span.subrayado:hover::before{
    background: linear-gradient(90deg, rgba(255,230,90,.65), rgba(180,142,240,.55));
  }
  
  /* ---------- Animaciones clave ---------- */
  @keyframes twinkle{
    0%,100%{ opacity:.38; transform: scale(.995); }
    50%{ opacity:.85; transform: scale(1.01); }
  }
  @keyframes drift{
    from{ transform: translate3d(0,0,0) }
    to  { transform: translate3d(3%, -3%, 0) }
  }
  
  /* ---------- Utilidades opcionales ---------- */
  .fx-ether{
    background: rgba(255,255,255,.68);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(199,182,255,.35);
    box-shadow: 0 12px 28px rgba(91,121,255,.16) inset;
    border-radius: 14px;
  }
  .fx-underline{
    position:relative; background-image: linear-gradient(90deg, rgba(255,230,90,.6), rgba(180,142,240,.45));
    background-size: 200% 2px; background-repeat:no-repeat; background-position:0 100%; padding-bottom:2px;
    animation: shimmer 5s ease-in-out infinite;
  }
  @keyframes shimmer{
    0%{ background-position: -180% 100%; }
    100%{ background-position: 180% 100%; }
  }
  
  /* ---------- Márgenes en móviles ---------- */
  @media (max-width: 575.98px){
    .section.login-astro, .section{ border-radius: 0; }
    .col-md-7.col-lg-6 > form{ padding: 1rem; }
  }