@import url('https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@400;500;600;700&family=Rubik:wght@500;600;700&display=swap');
@import url('./theme.css');
*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
}

body.form-page{
  min-height:100vh;
  font-family:'Hind Madurai',sans-serif;
  color:var(--text-main,#091A3D);
  background:
    radial-gradient(circle at 0% 22%, rgba(107,142,35,.12), transparent 28rem),
    linear-gradient(180deg,#FFFFFF 0%,#F7FBFF 100%);
}

.form-shell{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.form-watermark{
  position:fixed;
  left:-120px;
  bottom:20px;
  width:clamp(280px,34vw,500px);
  height:auto;
  object-fit:contain;
  opacity:.16;
  pointer-events:none;
  z-index:0;
}

.form-header{
  position:relative;
  z-index:2;
  padding:6px 24px 2px;
  text-align:center;
}

.form-logo{
  width:min(330px,82vw);
  max-height:120px;
  object-fit:contain;
}

.form-main {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  
  /* Cambia esto */
  align-items: flex-start; /* Alinea al inicio (arriba) */
  justify-content: center; /* Mantiene el centrado horizontal */
  
  padding: 10px 0px 30px;
}

.form-card{
  width:min(100%,500px);
  background:rgba(255,255,255,.96);
  border:1px solid rgba(220,230,242,.95);
  border-radius:28px;
  padding:30px 34px;
  box-shadow:0 24px 60px rgba(15,38,80,.10);
}

.form-card h1{
  margin:0 0 14px;
  text-align:center;
  font-family:'Rubik',sans-serif;
  color:var(--brand-secondary,var(--blue-dark));
  font-size:clamp(21px,2vw,27px);
}

.form-card p{
  color:var(--gray-text);
  line-height:1.5;
}

.form-card form{
  display:grid;
  gap:14px;
  margin-top:18px;
}

.form-card label{
  font-weight:700;
  color:#091A3D;
}

.form-card input,
.form-card select{
  width:100%;
  height:56px;
  border:1px solid #DCE6F2;
  border-radius:14px;
  padding:0 16px;
  font-size:16px;
  background:#fff;
}

.form-card input:focus,
.form-card select:focus{
  outline:none;
  border-color:var(--green-dark);
  box-shadow:0 0 0 4px rgba(107,142,35,.14);
}

.form-card button,
.form-card input[type=submit],
.form-card .boton{
  width:100%;
  height:58px;
  border:0;
  border-radius:14px;
  background:linear-gradient(180deg,#082B86 0%,#001D6F 100%);
  color:#fff;
  font-family:'Rubik',sans-serif;
  font-size:17px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 16px 28px rgba(0,29,111,.20);
}

.form-card button:hover,
.form-card input[type=submit]:hover{
  filter:brightness(1.03);
}

.error{
  background:#FEF2F2;
  border:1px solid #FECACA;
  color:#B91C1C !important;
  border-radius:14px;
  padding:12px 14px;
  font-weight:700;
}

.success{
  background:#ECFDF5;
  border:1px solid #BBF7D0;
  color:#047857 !important;
  border-radius:14px;
  padding:12px 14px;
  font-weight:700;
}

.info{
  background:#F4F8FD;
  border:1px solid #DCE6F2;
  border-radius:16px;
  padding:15px 16px;
  color:#091A3D !important;
  font-weight:600;
}

.links{
  text-align:center;
  margin-top:18px;
}

.links a,
.form-card a{
  color:#004DC9;
  text-decoration:none;
  font-weight:700;
}

.form-super{
  width:min(320px,70vw);
  display:block;
  margin:24px auto 0;
}

.form-secure{
  margin-top:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--gray-text);
  text-align:center;
  font-size:14px;
}

@media(max-width:620px){
  .form-main{
    padding:0px 16px 4px;
  }

  .form-card{
    padding:24px;
  }

  .form-watermark{
    width:360px;
    left:-160px;
  }
}


/* Tema Las Americas: verde como acento */
.form-card input:focus,
.form-card select:focus {
  border-color: var(--green-olive);
  box-shadow: 0 0 0 4px rgba(107,142,35,.14);
}

.form-card button,
.form-card input[type=submit],
.form-card .boton {
  background: var(--gradient-primary);
}

.form-secure svg {
  color: var(--green-dark);
}


/* ===== Ajuste Fondo Las Americas ===== */

.form-card button,
.form-card input[type=submit],
.form-card .boton {
  background: var(--gradient-green) !important;
  color: #fff !important;
}

.form-card button:hover,
.form-card input[type=submit]:hover,
.form-card .boton:hover {
  box-shadow: 0 18px 34px rgba(85,107,31,.28);
}

.form-footer {
  background: var(--green-dark) !important;
}