/* ====================================================================
   /sigep/estilos/Login.css  —  Login UI (consolidado y pro)
   - Limpieza de duplicados
   - Alineación consistente del ícono "ojo" (Edge/Chrome/Firefox/Safari)
   - Accesibilidad y responsivo refinados
   - Mantiene branding y estilo original
==================================================================== */

/* ====== Reset + Tokens ====== */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root{
  --brand-50:#e8f5e9; --brand-100:#c8e6c9; --brand-200:#a5d6a7;
  --brand-400:#81c784; --brand-600:#43a047; --ink:#2f2f2f;
  --radius:16px; --shadow:0 12px 28px rgba(0,0,0,.18);
}

/* ====== Body + Fondo ====== */
body{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  /* Alto compatible y dinámico (—vh lo setea el JS del login) */
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);

  display:flex; align-items:center; justify-content:center;
  color: var(--ink);
  background-color: var(--brand-50);

  /* Gradientes + mural */
  background-image:
    radial-gradient(1200px 600px at 70% 0%,  rgba(67,160,71,0.18) 0%, transparent 60%),
    radial-gradient(900px  500px at 0% 100%, rgba(129,199,132,0.22) 0%, transparent 55%),
    url('../Recursos/foci-childfund_transp.png');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center center, center center, center 40%;
  background-size: auto, auto, clamp(900px, 90vw, 1600px) auto;
}

/* Velo/blur muy suave (por encima del fondo, debajo del contenido) */
body::before{
  content:""; position: fixed; inset: 0;
  background: rgba(232,245,233,0.12);
  backdrop-filter: blur(1px) saturate(95%);
  -webkit-backdrop-filter: blur(1px) saturate(95%);
  pointer-events: none; z-index: 0;
}

/* Logos en esquinas (sobre el velo) */
body::after{
  content:""; position: fixed; inset: 0;
  background-image:
    url('../Recursos/foci-childfund_transp.png'),
    url('../Recursos/foci-childfund_transp.png');
  background-repeat: no-repeat, no-repeat;
  background-position:
    2.4rem calc(100% - 2.4rem),
    calc(100% - 2.4rem) 2.4rem;
  background-size:
    clamp(300px, 26vw, 460px),
    clamp(280px, 24vw, 420px);
  filter: brightness(1.12) saturate(1.07);
  pointer-events: none; z-index: 1;
}

/* ====== Tarjeta/Container ====== */
.container{
  display:flex; flex-wrap:wrap;
  width: clamp(640px, 60vw, 780px);   /* ancho más angosto y elegante */
  border:1px solid var(--brand-100);
  border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow); background:white;
  animation: fadeIn .4s ease-out;
  position: relative; z-index: 2;
}
@keyframes fadeIn{ from{opacity:0; transform: translateY(6px)} to{opacity:1; transform:none} }

.half{ flex:1 1 300px; padding: clamp(18px, 3.6vw, 32px); }

/* ====== Panel verde ====== */
.green-background{
  flex: 0 0 44%;
  background: linear-gradient(135deg, var(--brand-200), #9ed1a1 60%);
  color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap: clamp(10px, 1.8vw, 18px); /* espacio coherente */
}
.green-background h1{
  margin:0; font-size: clamp(1.7rem, 2.6vw, 2.4rem); letter-spacing:.4px;
}
.green-background p{ opacity:.95; line-height:1.35 }

/* LOGOS dentro del panel verde (consolidado) */
.green-background img { width:auto !important; height:auto !important; max-width:100% !important; }

/* Logo principal (arriba) */
.logo-in-panel{
  display:block;
  max-width: min(480px, 90%) !important;
  max-height: clamp(220px, 24vh, 360px) !important;
  margin-top: clamp(4px, 0.8vw, 10px) !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.06));
}

/* Logos aliados (abajo) — detecta por no tener la clase principal */
.green-background img:not(.logo-in-panel){
  max-height: clamp(72px, 11vh, 130px) !important;
  max-width: clamp(220px, 40%, 320px) !important;
  margin-inline: clamp(6px, 1.2vw, 14px) !important;
  object-fit: contain !important;
}

/* ====== Panel blanco (formulario) ====== */
.white-background{
  flex: 1 0 56%;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(120%) blur(6px);
  border-left:1px solid var(--brand-100);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding: clamp(18px, 3.2vw, 28px);
}

/* Ancho útil del contenido */
.white-background > .login-form,
.white-background > .text-center,
.white-background > .footer{
  width: min(420px, 100%);
  margin-inline: auto;
}

/* ====== Form ====== */
.login-form{ display:flex; flex-direction:column; gap:10px; margin-top:.25rem; }
.form-group{ position:relative; display:flex; flex-direction:column; gap:6px; }

label{
  font-weight:600; font-size: clamp(.9rem, 1.02vw, .98rem);
  color: var(--brand-600);
}

/* WRAP para input + ícono: asegura alineación robusta */
.input-wrap{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Input principal */
.input-field{
  width:100%;
  display:block;
  padding:10px 48px 10px 10px; /* reserva espacio para el ojito */
  border:1px solid var(--brand-100);
  border-radius:8px;
  font-size:14px;
  line-height:1.5;            /* altura consistente entre navegadores */
  transition: border-color .2s, box-shadow .2s, background-color .2s;
  background:#fff;
}

.input-field:focus{
  border-color: var(--brand-400);
  box-shadow: 0 0 0 4px rgba(129,199,132,.25);
  outline:none;
}

/* Mejor enfoque accesible (tab) */
.input-field:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--brand-600) 60%, transparent);
  outline-offset: 2px;
}

/* ====== Ojo (mostrar/ocultar) — sólido en Edge ====== */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; } /* quita el ícono nativo de Edge */

.eye-icon{
  position:absolute;
  right:12px; top:50%;
  transform: translateY(-50%); /* centra vertical */
  width:22px; height:22px;
  cursor:pointer; opacity:.78;
  z-index: 2;
  transition: opacity .15s ease;
}
.eye-icon:hover{ opacity:1 }

/* ====== Botón ====== */
.submit-button{
  padding:10px; width:100%;
  background: linear-gradient(180deg, #66bb6a, #4caf50);
  color:#fff; border:none; border-radius:8px; font-weight:700;
  cursor:pointer; font-size:14px;
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: 0 8px 18px rgba(76,175,80,.25);
}
.submit-button:hover{ transform: translateY(-1px); filter: brightness(1.03) }
.submit-button:active{ transform:none }

/* Pie */
.footer{ text-align:center; margin-top: 12px; font-size:.92rem; color:#6d6d6d; }

/* ====== Responsivo ====== */
@media (max-width: 1200px){
  body{ background-size: auto, auto, clamp(720px, 78vw, 1200px) auto; }
  body::after{
    background-position:
      2rem calc(100% - 2rem),
      calc(100% - 2rem) 2rem;
    background-size:
      clamp(280px, 26vw, 440px),
      clamp(260px, 24vw, 400px);
    filter: brightness(1.10) saturate(1.06);
  }
}

@media (max-width: 992px){
  .container{ width: clamp(320px, 92vw, 720px); }
  .green-background, .white-background{ flex: 1 1 100%; }
  .white-background{ border-left:none; border-top:1px solid var(--brand-100) }

  body{ background-size: auto, auto, clamp(620px, 120vw, 980px) auto; }
  body::after{
    background-position:
      1rem calc(100% - 1rem),
      calc(100% - 1rem) 1rem;
    background-size:
      clamp(180px, 30vw, 260px),
      clamp(160px, 28vw, 240px);
    filter: brightness(1.08) saturate(1.05);
  }

  .white-background > .login-form,
  .white-background > .text-center,
  .white-background > .footer{
    width: min(400px, 100%);
  }
}

/* ====== Motion/Performance ====== */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}