@import url('https://fonts.googleapis.com/css?family=Raleway:400,700');

/* ===== PALETA AZUL + AMARILLO ===== */
:root{
  --azul-oscuro: #0D47A1;   /* base principal */
  --azul:        #1976D2;   /* acento / gradiente */
  --azul-claro:  #42A5F5;   /* brillo suave */
  --amarillo:    #FFB300;   /* dorado/amarillo principal */
  --amarillo-2:  #FFC107;   /* variante clara para hover */
}

/* ===== BASE ===== */
*{ box-sizing:border-box; margin:0; padding:0; font-family:Raleway, sans-serif; }

body{
  background: linear-gradient(90deg, var(--azul-oscuro), var(--azul));
}

.imgicon{ width:30px; }

.container{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
.panizq{ display:flex; align-items:center; height:100%; min-height:100vh; }

/* ===== CARD/SCREEN ===== */
.screen{
  background: linear-gradient(90deg, var(--azul-oscuro), var(--azul));
  position:relative; height:600px; width:360px;
  border: 2px solid var(--amarillo);
  border-radius:10px;
  box-shadow: 0 0 24px rgba(13,71,161,.45);
}

.screen__content{ z-index:1; position:relative; height:100%; }

.screen__background{ position:absolute; inset:0; z-index:0; clip-path: inset(0 0 0 0); }
.screen__background__shape{ position:absolute; transform:rotate(45deg); }

/* Fondo blanco grande */
.screen__background__shape1{
  height:520px; width:520px; background:#FFF;
  top:-50px; right:120px; border-radius:0 72px 0 0;
}

/* Bloque superior AZUL */
.screen__background__shape2{
  height:220px; width:220px; background: var(--azul-oscuro);
  top:-172px; right:0; border-radius:32px;
}

/* Franja vertical AZUL degradado */
.screen__background__shape3{
  height:540px; width:190px;
  background: linear-gradient(270deg, var(--azul), var(--azul-claro));
  top:-24px; right:0; border-radius:32px;
}

/* Bloque inferior AMARILLO (acento) */
.screen__background__shape4{
  height:400px; width:200px; background: var(--amarillo);
  top:420px; right:50px; border-radius:60px;
}

/* ===== FORM ===== */
.login{ width:320px; padding:30px; padding-top:50px; }
.login__field{ padding:20px 0; position:relative; }
.login__icon{ position:absolute; top:30px; color: var(--azul-oscuro); }

.login__input{
  border:none; border-bottom:2px solid var(--azul-oscuro);
  background:#FFF; padding:10px 10px 10px 24px;
  font-weight:700; width:75%; transition:.2s;
}
.login__input:focus,
.login__input:hover{
  outline:none;
  border-bottom-color: var(--amarillo);  /* foco/hover amarillo */
  box-shadow: 0 4px 0 -2px var(--amarillo);
}

/* Botón primario AZUL con acento AMARILLO */
.login__submit{
  background: var(--azul-oscuro);
  font-size:14px; margin-top:30px; padding:16px 20px;
  border-radius:26px; border:2px solid var(--amarillo);
  text-transform:uppercase; font-weight:700;
  display:flex; align-items:center; width:100%; color:#FFF;
  box-shadow: 0 2px 6px rgba(25,118,210,.45);
  cursor:pointer; transition:.2s;
}
.login__submit:hover{
  background: var(--azul);           /* azul más claro al pasar */
  border-color: var(--amarillo-2);
}
.login__submit:focus{
  outline:none;
  box-shadow: 0 0 0 3px rgba(255,179,0,.35); /* enfoque accesible */
}

.button__icon{ font-size:24px; margin-left:auto; color:#FFF; }

/* ===== “Social/ sello” ===== */
.social-login{ position:absolute; height:160px; width:180px; text-align:center; bottom:0; right:0; color:#fff; }
.social-icons{ display:flex; align-items:center; justify-content:center; }
.social-login__icon{
  padding:20px 10px; color:#fff; text-decoration:none;
  transform:scale(1.2);
  text-shadow:0 0 8px var(--azul);
}
.social-login__icon:hover{ transform:scale(2); color:#FFF; }