:root {
  --brand:#D9048E;          /* Color principal #D9048E  rosa */
  --brand-2:#253259;        /* Color acento  #253259  azul oscuro */
  --card-bg:#ffffffcc;      /* Fondo de la tarjeta (semi) */
  --blur:14px;              /* Intensidad del blur del glass */
}
html, body {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6, .h1,.h2,.h3,.h4,.h5,.h6 { font-family: 'Montserrat', inherit; font-weight:600; }
strong, b { font-weight:600; }

/* Fondo con gradiente animado + blobs */
body {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  /* Fondo limpio sin velos ni degradados que difuminen la imagen */
  background: #ffffff url('/asistencia_v2/img/FONDO.png') center center / cover no-repeat fixed;
}

/* Si quieres que en móviles no use attachment fixed (mejor performance) */
@media (max-width: 768px){
  body { background-attachment: scroll; }
}

/* Se elimina overlay para que la imagen no se vea lavada */
body::after{ display:none !important; }
.bg-blob::before,
.bg-blob::after {
  content: "";
  position: absolute;
  inset: auto;
  width: 60vmin; height: 60vmin;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .5;
  z-index: 0;
  animation: floaty 12s ease-in-out infinite;
  transform: translateZ(0);
  will-change: transform, opacity;
}
.bg-blob::before { background: radial-gradient(circle at 30% 30%, var(--brand), transparent 60%); left:-10vmin; top: -10vmin; }
/* Ocultamos la mancha azul, dejando solo la rosa */
.bg-blob::after  { display:none !important; }

@keyframes floaty {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(2vmin, -2vmin) scale(1.05); }
}

/* Tarjeta tipo glassmorphism */
.login-card{
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 20px 60px rgba(28, 35, 56, .15);
  border-radius: 1.25rem;
  overflow: hidden;
  animation: rise .7s cubic-bezier(.2,.8,.2,1) both;
  position: relative;
  z-index: 1; /* sobre el overlay */
}
@keyframes rise { from{ opacity:0; transform: translateY(12px) scale(.98);} to{ opacity:1; transform: translateY(0) scale(1);} }

/* Logo pequeño y responsivo */
.brand-logo{
  max-height: 44px;
  width: auto;
  object-fit: contain;
}
/* Logo grande en login */
.brand-logo--lg{ max-height:96px; }
@media (max-width: 576px){
  .brand-logo--lg{ max-height:72px; }
}

/* Header combinado logo | separador | texto centrado */
.brand-header{
  display:flex;
  align-items:center;
  gap:1.25rem;
}
.brand-sep{
  display:inline-block;
  width:1px; /* grosor revertido */
  align-self:stretch;
  background:#000; /* color negro sólido */
  position:relative;
}
.brand-text{ flex:1; }

@media (max-width: 576px){
  .brand-header{ flex-direction:column; text-align:center; }
  .brand-sep{ width:60%; height:1px; background:#000; }
}

/* Inputs y botones */
.form-control, .form-select { transition: box-shadow .2s, border-color .2s, transform .1s; }
.form-control:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 .25rem rgba(108,92,231,.15);
}
.btn-brand{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: #5b4ee0;
  --bs-btn-hover-border-color: #5b4ee0;
  --bs-btn-active-bg: #4e42cf;
  --bs-btn-active-border-color: #4e42cf;
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  color: #fff;
}
.btn-ghost{
  background: transparent;
  border: 1px dashed rgba(0,0,0,.15);
}

/* Pequeñas animaciones de “apretar” */
.tap { transition: transform .06s ease; }
.tap:active { transform: translateY(1px) scale(.995); }

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =============================
 * Toggles de visibilidad (password)
 * ============================= */
#password, #regPass, #regPass2 {
  padding-right: 3rem; /* espacio para el botón */
}

#togglePass, #toggleRegPass, #toggleRegPass2 {
  position: absolute; /* solo acomodar */
  top: 50%;
  right: .85rem !important; /* un poco más de aire */
  transform: translateY(-50%);
  margin: 0 !important;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  color: #555;
  transition: color .2s;
  box-shadow: none;
}

#togglePass:hover, #toggleRegPass:hover, #toggleRegPass2:hover { color:#000; }
#togglePass:active, #toggleRegPass:active, #toggleRegPass2:active { color:#000; }
#togglePass:focus-visible, #toggleRegPass:focus-visible, #toggleRegPass2:focus-visible { outline:none; }

#togglePass i, #toggleRegPass i, #toggleRegPass2 i {
  font-size: 1rem;
}

/* =============================
 * SweetAlert2: Toast de inicio de sesión
 * ============================= */
.brand-toast.swal2-popup.swal2-toast{
  border-radius: .9rem;
  border: 1px solid #a7f3d0;             /* verde claro */
  border-left: .5rem solid #10b981;      /* acento */
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 80%);
  box-shadow: 0 12px 30px rgba(16,185,129,.15), 0 4px 10px rgba(0,0,0,.06);
  color: #065f46;                         /* verde oscuro legible */
  padding: .85rem 1rem;
  backdrop-filter: saturate(1.2) blur(2px);
}
.brand-toast .swal2-title{
  font-weight: 700;
  letter-spacing: .2px;
  font-size: .95rem;
}
.brand-toast .swal2-icon{
  box-shadow: none !important;
}
.brand-toast .swal2-timer-progress-bar{
  background: linear-gradient(90deg, #10b981, #34d399);
  height: 3px;
}