/* ========== Reset ========== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: 'Roboto', Arial, sans-serif;
  background:#e5e7eb; /* gris claro formal */
  display:flex;align-items:center;justify-content:center;
}

/* ========== Backdrop ========== */
.backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,.08); /* leve sombreado */
}

/* ========== Contenedor principal ========== */
.wrap{
  position:relative; /* sobre el backdrop */
  width:100%;max-width:480px;padding:16px;
}

/* ========== Card ========== */
.card{
  background:#fff;border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  padding:28px 28px 24px;
}
.card__header{ text-align:center; margin-bottom:12px; }
.logo{ width:160px; height:auto; margin-bottom:14px; object-fit:contain; } /* Logo más alto */
.title{
  font-size:1.6rem;
  color:#1a3d6b;
  font-weight:700;
  line-height:1.3;
}

/* ========== Formulario ========== */
.form{ margin-top:14px; }
.field{ margin-top:16px; }
.label{ display:block; color:#374151; font-size:.9rem; margin-bottom:6px; }

.control{ position:relative; }
.input{
  width:100%;
  height:46px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  background:#f9fafb;
  font-size:1rem;
  color:#111827;
  padding:10px 44px;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.input:focus{
  outline:none;
  border-color:#1a3d6b;
  box-shadow:0 0 0 3px rgba(26,61,107,.18);
  background:#fff;
}

/* Iconos */
.icon-left,
.icon-right{
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:34px; display:grid; place-items:center;
  color:#6b7280;
}
.icon-left{ left:6px; pointer-events:none; }
.icon-right{
  right:6px; border:none; background:transparent; cursor:pointer;
  border-radius:6px;
}
.icon-right:hover{ color:#1a3d6b; }

/* ========== Botón ========== */
.btn{
  width:100%; margin-top:20px;
  height:46px; border:none; border-radius:8px;
  background:#1a3d6b; color:#fff; font-weight:600; font-size:1rem;
  cursor:pointer; transition:background .2s, transform .06s, box-shadow .2s;
  box-shadow:0 8px 18px rgba(0,0,0,.15);
}
.btn:hover{ background:#153e75; }
.btn:active{ transform:scale(.99) }

/* ========== Error ========== */
.error{ margin-top:10px; min-height:1.1rem; color:#dc2626; text-align:center; font-size:.95rem; }

/* ========== Responsive ========== */
@media (max-width:480px){
  .logo{ width:130px }
  .title{ font-size:1.3rem }
  .card{ padding:24px 20px 20px }
  .input{ height:44px }
  .btn{ height:44px }
}