/* ==========================================================
   AUTH.CSS — Login / Registro
   Reutiliza las variables definidas en styles.css (--negro, --azul-onu, etc.)
   ========================================================== */

.auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #080C10 0%, #0D1520 45%, #0A1928 100%);
  padding: 40px 20px;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}
.auth-body::before {
  content: '';
  position: absolute; inset: 0; opacity: .06;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(0,114,185,.5) 60px),
    repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(0,114,185,.5) 60px);
  pointer-events: none;
}

.auth-back {
  position: absolute; top: 28px; left: 32px; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gris5); text-decoration: none;
  transition: color .2s;
}
.auth-back:hover { color: var(--azul-onu); }

.auth-card {
  position: relative; z-index: 2;
  width: 100%; max-width: 460px;
  background: var(--gris1);
  border: 1px solid rgba(0,114,185,.2);
  padding: 48px 44px;
  border-radius: 3px;
}
.auth-card.wide { max-width: 780px; }

.auth-logo-row {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-bottom: 32px; text-align: center;
}
.auth-logo-row img {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--azul-onu);
}
.auth-logo-row strong {
  display: block; font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 18px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blanco);
}
.auth-logo-row small {
  font-size: 10.5px; letter-spacing: 2px; color: var(--gris5); text-transform: uppercase;
}

.auth-title {
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 24px;
  text-transform: uppercase; color: var(--blanco); letter-spacing: 1px;
  margin-bottom: 6px; text-align: center;
}
.auth-subtitle {
  font-size: 13px; color: var(--gris5); text-align: center; margin-bottom: 32px; line-height: 1.6;
}

.auth-form .fg { margin-bottom: 18px; }
.auth-form .fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.auth-form label {
  display: block; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gris5); font-weight: 600; margin-bottom: 7px;
}
.auth-form label .req { color: var(--rojo); }
.auth-form input, .auth-form select, .auth-form textarea {
  width: 100%; background: var(--gris3); border: 1px solid rgba(255,255,255,.08);
  color: var(--blanco); padding: 12px 16px; font-family: 'Source Sans 3'; font-size: 14px;
  outline: none; border-radius: 2px; transition: border-color .2s;
}
.auth-form input:focus, .auth-form select:focus, .auth-form textarea:focus { border-color: var(--azul-onu); }
.auth-form textarea { min-height: 90px; resize: vertical; }
.auth-form select { appearance: none; }
.auth-hint { font-size: 11.5px; color: var(--gris5); margin-top: 6px; line-height: 1.5; }

.auth-check {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px;
  font-size: 12.5px; color: var(--gris5); line-height: 1.6;
}
.auth-check input { width: auto; margin-top: 3px; accent-color: var(--azul-onu); }

.btn-auth-submit {
  width: 100%; background: var(--azul-onu); color: #fff; padding: 14px;
  font-family: 'Oswald'; font-weight: 600; font-size: 14px; letter-spacing: 2px;
  text-transform: uppercase; border: none; cursor: pointer; border-radius: 2px;
  transition: background .2s; margin-top: 8px;
}
.btn-auth-submit:hover { background: var(--azul-osc); }
.btn-auth-submit:disabled { opacity: .6; cursor: not-allowed; }

.auth-msg {
  padding: 12px 16px; margin-bottom: 20px; font-size: 13px; line-height: 1.5;
  border-left: 3px solid var(--rojo); background: rgba(200,16,46,.08); color: var(--blanco);
  display: none;
}
.auth-msg.exito { border-color: #2e8b57; background: rgba(46,139,87,.1); }

.auth-links { text-align: center; margin-top: 22px; font-size: 13px; color: var(--gris5); }
.auth-links a { color: var(--azul-onu); text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }

.auth-tabs { display: flex; gap: 2px; margin-bottom: 28px; }
.auth-tab {
  flex: 1; text-align: center; padding: 10px; font-family: 'Oswald'; font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--gris5); cursor: pointer;
  background: var(--gris2); border-bottom: 2px solid transparent;
}
.auth-tab.active { color: var(--blanco); border-color: var(--azul-onu); }

.status-badge {
  display: inline-block; padding: 4px 12px; font-size: 10.5px; letter-spacing: 1.5px;
  text-transform: uppercase; font-weight: 600; border-radius: 2px;
}
.status-pendiente { background: rgba(201,168,76,.15); color: var(--dorado); }
.status-en_revision { background: rgba(0,114,185,.15); color: var(--azul-onu); }
.status-aprobado { background: rgba(46,139,87,.15); color: #4caf7d; }
.status-rechazado { background: rgba(200,16,46,.15); color: #e0546b; }
.status-suspendido { background: rgba(200,16,46,.15); color: #e0546b; }
.status-inactivo { background: rgba(138,155,176,.15); color: var(--gris5); }

.form-section-title {
  font-family: 'Oswald'; font-weight: 600; font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--azul-onu); margin: 30px 0 16px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.form-section-title:first-child { margin-top: 0; }

@media (max-width: 600px) {
  .auth-card { padding: 34px 24px; }
  .auth-form .fg-row { grid-template-columns: 1fr; gap: 0; }
}

.auth-body.auth-long{align-items:flex-start;min-height:100vh;height:auto;overflow-x:hidden;overflow-y:auto;padding-top:72px;padding-bottom:72px}
.auth-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}
.auth-choice{display:flex;flex-direction:column;gap:10px;min-height:180px;padding:24px 20px;background:var(--gris2);border:1px solid rgba(255,255,255,.08);border-top:3px solid transparent;text-decoration:none;color:var(--blanco);transition:.2s}
.auth-choice:hover{transform:translateY(-3px);background:var(--gris3);border-top-color:var(--azul-onu)}
.auth-choice-icon{font-size:34px}.auth-choice h3{font-family:'Oswald';font-size:18px;text-transform:uppercase;letter-spacing:1px}.auth-choice p{font-size:12.5px;color:var(--gris5);line-height:1.6}
.auth-choice-action{margin-top:auto;font-family:'Oswald';font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--azul-onu);font-weight:600}
.auth-login-box{margin-top:28px;padding-top:26px;border-top:1px solid rgba(255,255,255,.08)}
.auth-login-box-title{font-family:'Oswald';font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--azul-onu);margin-bottom:16px;text-align:center}
.auth-register-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.btn-auth-secondary{width:100%;background:var(--gris2);color:var(--blanco);padding:13px 12px;font-family:'Oswald';font-weight:600;font-size:12px;letter-spacing:1.3px;text-transform:uppercase;border:1px solid rgba(0,114,185,.35);text-decoration:none;display:flex;justify-content:center;align-items:center;text-align:center}
.btn-auth-secondary:hover{background:var(--gris3);border-color:var(--azul-onu)}
.auth-info-box{margin-top:18px;padding:14px 16px;background:rgba(0,114,185,.08);border-left:3px solid var(--azul-onu);color:var(--gris5);font-size:12px;line-height:1.65}
@media(max-width:680px){.auth-choice-grid,.auth-register-actions{grid-template-columns:1fr}.auth-body.auth-long{padding-top:78px}}


/* Modern redesign */
.auth-body{
background:
linear-gradient(rgba(4,10,18,.82),rgba(4,10,18,.92)),
url('../assets/img/hero-version-4-helicoptero.jpg') center/cover fixed;
}
.auth-card{
background:rgba(10,20,32,.88);
backdrop-filter:blur(16px);
border:1px solid rgba(120,170,255,.25);
border-radius:22px;
box-shadow:0 20px 60px rgba(0,0,0,.55);
max-width:620px;
}
.auth-option-card{
background:rgba(255,255,255,.03)!important;
border-radius:18px!important;
border:1px solid rgba(255,255,255,.12)!important;
transition:.25s;
}
.auth-option-card:first-child{border-color:#2b7cff!important;}
.auth-option-card:last-child{border-color:#d51d38!important;}
.auth-option-card:hover{transform:translateY(-6px);}
.auth-form input{
background:#07111d;
border-radius:10px;
padding:15px 18px;
}
.btn-auth-submit{
background:linear-gradient(90deg,#b70f24,#f12645);
border-radius:10px;
box-shadow:0 10px 30px rgba(220,30,60,.35);
}