/* assets/css/ui_login_impact.css */

/* HERO bloque con glass + gradiente */
.ui-hero{
  border-radius: 22px;
  overflow:hidden;
  position:relative;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(2,6,23,.12);
}
html[data-bs-theme="dark"] .ui-hero{
  background: rgba(15,23,42,.30);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.ui-hero::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 300px at 18% 0%, rgba(56,189,248,.22), transparent 60%),
    radial-gradient(700px 280px at 92% 10%, rgba(99,102,241,.20), transparent 55%),
    radial-gradient(900px 320px at 45% 100%, rgba(34,197,94,.14), transparent 62%);
  pointer-events:none;
  opacity: .9;
}

/* Panel login */
.ui-login-card{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(2,6,23,.12);
  overflow:hidden;
}
html[data-bs-theme="dark"] .ui-login-card{
  background: rgba(15,23,42,.30);
  border-color: rgba(255,255,255,.10);
}

.ui-login-topbar{
  height: 6px;
  width: 100%;
  background: linear-gradient(90deg, rgba(56,189,248,1), rgba(99,102,241,1), rgba(34,197,94,1));
}

/* Inputs premium */
.ui-input{
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.10) !important;
}
html[data-bs-theme="dark"] .ui-input{
  background: rgba(2,6,23,.35) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.ui-input:focus{
  box-shadow: 0 0 0 .25rem rgba(56,189,248,.22) !important;
  border-color: rgba(56,189,248,.45) !important;
}

/* Captcha */
.ui-captcha{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  padding: 14px;
}
html[data-bs-theme="dark"] .ui-captcha{
  background: rgba(15,23,42,.22);
  border-color: rgba(255,255,255,.10);
}
.ui-captcha img{
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(2,6,23,.20);
}

/* Botón principal animado */
.ui-btn-gradient{
  border: 0;
  border-radius: 16px;
  font-weight: 900;
  letter-spacing: .2px;
  color:#0b1220;
  background: linear-gradient(90deg, rgba(56,189,248,1), rgba(99,102,241,1), rgba(34,197,94,1));
  box-shadow: 0 16px 34px rgba(2,6,23,.18);
  transition: transform .15s ease, filter .15s ease;
}
.ui-btn-gradient:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.ui-btn-gradient:active{ transform: translateY(1px); }

/* Links */
.ui-link{
  font-weight: 800;
  text-decoration: none;
}
.ui-link:hover{ text-decoration: underline; }

/* Mini ayuda */
.ui-help{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding: 12px 14px;
}
html[data-bs-theme="dark"] .ui-help{
  background: rgba(15,23,42,.20);
  border-color: rgba(255,255,255,.10);
}

/* =========================================================
   HERO TRANSPARENTE (SIN “DOBLE FONDO”)
   - Mantiene borde/blur y look premium
   ========================================================= */

/* Tu .ui-hero ahora NO debe tener background sólido */
.ui-hero{
  background: transparent !important;
  border: 1px solid var(--ui-border);
  border-radius: 18px;
  overflow: hidden;
}

/* Capa glass interna (para que se vea pro sin cambiar el fondo global) */
.ui-hero > .p-4,
.ui-hero > .p-5,
.ui-hero .p-4,
.ui-hero .p-5{
  background: var(--ui-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Imagen del hero siempre dentro del marco */
.ui-img-wide{
  width: 100%;
  max-width: 100%;
  display: block;
  border-radius: 18px 18px 0 0;
  object-fit: cover;
}

/* Tipografías del hero en ambos temas */
.ui-hero h2, .ui-hero h3, .ui-hero h4{ color: var(--ui-text) !important; }
.ui-hero .text-body-secondary{ color: var(--ui-muted) !important; }

/* =========================================================
   HERO: evita “segunda capa” visible en claro
   - Mantiene glass, pero sin “panel blanco” dominante
   ========================================================= */

:root{
  --ui-hero-surface: rgba(255,255,255,.45);
}
html[data-bs-theme="dark"]{
  --ui-hero-surface: rgba(15,23,42,.28);
}

/* la capa interna del hero */
.ui-hero > .p-4,
.ui-hero > .p-5,
.ui-hero .p-4,
.ui-hero .p-5{
  background: var(--ui-hero-surface) !important;
}

/* y mejora lectura en claro */
.ui-hero .text-body-secondary{
  color: var(--ui-muted) !important;
}