/* ==========================================================================
   CIMA · Portal Profesionales — Login
   Hoja de estilos dedicada a la pantalla de inicio de sesión.
   Cárgala DESPUÉS de bootstrap.min.css y style.css para que estas reglas
   tengan prioridad dentro de la página de login únicamente.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  /* Marca CIMA */
  --cima-navy-950:#0B1530;
  --cima-navy-800:#152452;
  --cima-navy-700:#1E3164;
  --cima-navy-600:#2A4080;

  --cima-cyan-300:#8FE3F2;
  --cima-cyan-400:#4FD1E8;
  --cima-cyan-500:#28B8D6;
  --cima-cyan-600:#1A9CB8;

  --cima-slate-50:#F5F7FB;
  --cima-slate-100:#EBEFF6;
  --cima-slate-200:#DEE4EF;
  --cima-slate-400:#8B96AC;
  --cima-slate-600:#565F76;
  --cima-slate-900:#1B2233;

  --cima-danger:#E14A54;
  --cima-danger-bg:#FDEDEE;
  --cima-success:#1FA971;
  --cima-success-bg:#EAFAF3;

  --cima-radius-lg:22px;
  --cima-radius-md:12px;
  --cima-shadow-card:0 30px 60px -20px rgba(11,21,48,0.35), 0 8px 20px -10px rgba(11,21,48,0.15);
}

/* --------------------------------------------------------------------------
   Base de página
   -------------------------------------------------------------------------- */
body.login-page{
  min-height:100vh;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 16px;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--cima-slate-900);
  background:var(--cima-slate-50);
  position:relative;
  overflow-x:hidden;
}

/* Textura de fondo: dos resplandores suaves + trama de puntos, muy sutil */
body.login-page::before,
body.login-page::after{
  content:"";
  position:fixed;
  border-radius:50%;
  filter:blur(60px);
  z-index:0;
  pointer-events:none;
}
body.login-page::before{
  width:640px;height:640px;
  top:-220px; left:-180px;
  background:radial-gradient(circle, rgba(30,49,100,0.20), transparent 70%);
}
body.login-page::after{
  width:560px;height:560px;
  bottom:-200px; right:-160px;
  background:radial-gradient(circle, rgba(40,184,214,0.16), transparent 70%);
}

.login-grid-texture{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(var(--cima-slate-200) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(circle at 50% 35%, black 0%, transparent 65%);
          mask-image:radial-gradient(circle at 50% 35%, black 0%, transparent 65%);
  opacity:.55;
}

/* --------------------------------------------------------------------------
   Contenedor / tarjeta
   -------------------------------------------------------------------------- */
.login-shell{
  position:relative;
  z-index:1;
  width:100%;
  max-width:420px;
  animation:login-rise .55s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes login-rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

.login-card{
  background:#fff;
  border-radius:var(--cima-radius-lg);
  box-shadow:var(--cima-shadow-card);
  overflow:hidden;
}

/* --------------------------------------------------------------------------
   Cabecera de marca (fondo navy para que el isologo blanco luzca)
   -------------------------------------------------------------------------- */
.login-card__header{
  position:relative;
  padding:34px 32px 30px;
  background:
    radial-gradient(120% 160% at 15% -10%, rgba(79,209,232,.20), transparent 55%),
    linear-gradient(155deg, var(--cima-navy-950) 0%, var(--cima-navy-800) 55%, var(--cima-navy-700) 100%);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  overflow:hidden;
}

.login-pulse{
  position:absolute;
  top:50%; right:-30px;
  width:150px; height:150px;
  transform:translateY(-50%);
  pointer-events:none;
}
.login-pulse span{
  position:absolute; inset:0;
  border:1.5px solid rgba(143,227,242,.55);
  border-radius:50%;
  animation:login-pulse-ring 3.6s ease-out infinite;
  opacity:0;
}
.login-pulse span:nth-child(2){ animation-delay:1.2s; }
.login-pulse span:nth-child(3){ animation-delay:2.4s; }

@keyframes login-pulse-ring{
  0%   { transform:scale(.35); opacity:0; }
  15%  { opacity:.65; }
  100% { transform:scale(1); opacity:0; }
}

.login-logo{
  position:relative;
  height:38px;
  width:auto;
  display:block;
}

.login-eyebrow{
  position:relative;
  margin:0;
  font-family:'Poppins', 'Inter', sans-serif;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cima-cyan-300);
}

/* --------------------------------------------------------------------------
   Cuerpo del formulario
   -------------------------------------------------------------------------- */
.login-card__body{
  padding:34px 32px 32px;
}

.login-title{
  margin:0 0 4px;
  font-family:'Poppins', 'Inter', sans-serif;
  font-size:22px;
  font-weight:700;
  color:var(--cima-navy-950);
}

.login-subtitle{
  margin:0 0 26px;
  font-size:14px;
  color:var(--cima-slate-600);
}

.login_result{
  margin-bottom:2px;
}
.login_result:not(:empty){
  margin-bottom:18px;
}
.login_result .alert{
  display:flex;
  align-items:flex-start;
  gap:10px;
  border:none;
  border-radius:var(--cima-radius-md);
  font-size:13.5px;
  line-height:1.45;
  padding:13px 14px;
  animation:login-alert-in .3s ease both;
}
.login_result .alert span{ flex:1 1 auto; }
.login_result .alert i:first-child{
  font-size:15px;
  margin-top:1px;
  flex:0 0 auto;
}
.login_result .alert-close{
  flex:0 0 auto;
  border:none;
  background:transparent;
  padding:0;
  margin-top:1px;
  font-size:12.5px;
  line-height:1;
  color:inherit;
  opacity:.55;
  cursor:pointer;
}
.login_result .alert-close:hover{ opacity:1; }
.login_result .alert-close:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
  border-radius:4px;
}
.login_result .alert-danger{
  background:var(--cima-danger-bg);
  color:#9A2A31;
}
.login_result .alert-danger i:first-child{
  color:var(--cima-danger);
}
.login_result .alert-success{
  background:var(--cima-success-bg);
  color:#0F7A50;
}
.login_result .alert-success i:first-child{
  color:var(--cima-success);
}

@keyframes login-alert-in{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}

.login-field{
  margin-bottom:18px;
}

.login-field label{
  display:block;
  margin-bottom:7px;
  font-size:13px;
  font-weight:600;
  color:var(--cima-slate-900);
}

.login-input-wrapper{
  position:relative;
  display:flex;
  align-items:center;
  background:var(--cima-slate-50);
  border:1.5px solid var(--cima-slate-200);
  border-radius:var(--cima-radius-md);
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.login-input-wrapper:focus-within{
  background:#fff;
  border-color:var(--cima-cyan-500);
  box-shadow:0 0 0 4px rgba(40,184,214,.14);
}

.login-input-wrapper .login-input-icon{
  width:44px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--cima-slate-400);
  font-size:14px;
  transition:color .18s ease;
}
.login-input-wrapper:focus-within .login-input-icon{
  color:var(--cima-cyan-600);
}

.login-input-wrapper .form-control{
  border:none;
  background:transparent;
  padding:14px 16px 14px 8px;
  font-size:15px;
  color:var(--cima-navy-950);
  box-shadow:none !important;
}
.login-input-wrapper .form-control:focus{
  outline:none;
  box-shadow:none;
}
.login-input-wrapper .form-control::placeholder{
  color:var(--cima-slate-400);
}

.login-toggle-clave{
  flex:0 0 auto;
  width:42px;
  height:100%;
  border:none;
  background:transparent;
  color:var(--cima-slate-400);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13.5px;
}
.login-toggle-clave:hover{ color:var(--cima-slate-600); }
.login-toggle-clave:focus-visible{
  outline:2px solid var(--cima-cyan-500);
  outline-offset:2px;
  border-radius:6px;
}

/* --------------------------------------------------------------------------
   Botón de ingreso
   -------------------------------------------------------------------------- */
.btn-login{
  width:100%;
  border:none;
  border-radius:var(--cima-radius-md);
  padding:14px 18px;
  margin-top:6px;
  font-family:'Inter', sans-serif;
  font-size:15.5px;
  font-weight:600;
  letter-spacing:.01em;
  color:#fff;
  background:linear-gradient(135deg, var(--cima-cyan-400), var(--cima-cyan-600));
  box-shadow:0 12px 24px -10px rgba(40,184,214,.55);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-login:hover{
  filter:brightness(1.04);
  transform:translateY(-1px);
  box-shadow:0 16px 28px -10px rgba(40,184,214,.6);
}
.btn-login:active{
  transform:translateY(0);
  box-shadow:0 8px 16px -8px rgba(40,184,214,.5);
}
.btn-login:focus-visible{
  outline:2px solid var(--cima-navy-700);
  outline-offset:2px;
}

.btn-login .login-spinner{
  display:none;
  width:16px; height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  animation:login-spin .7s linear infinite;
}
.btn-login.is-loading .login-spinner{ display:inline-block; }
.btn-login.is-loading .login-btn-label{ opacity:.85; }
@keyframes login-spin{ to{ transform:rotate(360deg); } }

/* --------------------------------------------------------------------------
   Pie de tarjeta / contacto
   -------------------------------------------------------------------------- */
.login-footer{
  position:relative;
  z-index:1;
  margin-top:22px;
  text-align:center;
}

.login-footer__address{
  margin:0 0 10px;
  font-size:12.5px;
  color:var(--cima-slate-600);
}
.login-footer__address strong{
  color:var(--cima-slate-900);
}

.login-footer__contact{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px 18px;
  font-size:13px;
  color:var(--cima-slate-600);
}
.login-footer__contact a{
  color:var(--cima-slate-900);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-weight:500;
  transition:color .15s ease;
}
.login-footer__contact a:hover{
  color:var(--cima-cyan-600);
}
.login-footer__contact i{
  font-size:13px;
  color:var(--cima-cyan-600);
}
.login-footer__contact .fa-whatsapp{
  color:#1FA971;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:480px){
  .login-card__header{ padding:28px 24px 24px; }
  .login-card__body{ padding:28px 24px 26px; }
  .login-pulse{ width:120px; height:120px; right:-40px; }
  .login-footer__contact{ flex-direction:column; gap:6px; }
}

/* --------------------------------------------------------------------------
   Movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .login-shell{ animation:none; }
  .login-pulse span{ animation:none; opacity:0; }
  .btn-login:hover{ transform:none; }
}