/* ── Palette ──
   #005D97  azul corporativo (primario)
   #003E66  azul profundo (hover / footer)
   #00AEEF  cian digital (acento)
   #333333  gris carbón (texto)
   #E6E7E8  gris claro (divisores)
   #FFFFFF  blanco (fondo)
─────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; font-family:'Montserrat',sans-serif; background:#F3F4F6; }
body { display:flex; flex-direction:column; overflow:hidden; }

/* ── NAVBAR ─────────────────────────────── */
nav {
  background:#005D97; padding:0 40px; height:64px; flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:100;
  box-shadow:0 2px 12px rgba(0,0,0,.35);
}
.nav-left { display:flex; align-items:center; gap:16px; }
.nav-right { display:flex; align-items:center; gap:14px; }
.logo-img {
  height:40px; width:40px; object-fit:contain;
  border-radius:12px; background:#fff; padding:4px; display:block;
}
.nav-title {
  color:rgba(255,255,255,.75); font-size:13px; font-weight:700; letter-spacing:.4px;
}
.btn-nav {
  background:transparent; border:2px solid rgba(255,255,255,.45); color:white;
  padding:6px 16px; border-radius:30px; font-family:'Montserrat',sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.4px; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:6px;
  transition:border-color .15s, background .15s;
}
.btn-nav:hover { border-color:white; background:rgba(255,255,255,.12); }

/* ── PAGE HEADER ─────────────────────────── */
.page-header {
  background:linear-gradient(135deg, #003E66 0%, #003E66 45%, #005D97 100%);
  padding:18px 40px 14px; color:white; flex-shrink:0;
}
.page-header h1 {
  font-size:22px; font-weight:900; letter-spacing:-.5px;
  display:inline-flex; align-items:center; gap:8px;
}
.page-header h1 svg { width:1em; height:1em; flex-shrink:0; }
.page-header p  { margin-top:4px; font-size:12px; color:rgba(255,255,255,.65); font-weight:600; }
.header-stripe  { height:3px; background:linear-gradient(90deg,#00AEEF,#005D97); flex-shrink:0; }

/* ── MAIN ────────────────────────────────── */
main {
  flex:1 1 auto; min-height:0; overflow-y:auto;
  padding:16px 20px;
  display:flex; align-items:center; justify-content:center;
}

/* ── FORM CARD ───────────────────────────── */
.form-card {
  background:white; border-radius:20px; width:100%; max-width:900px;
  max-height:100%; box-shadow:0 4px 24px rgba(0,0,0,.10);
  overflow:hidden; display:flex; flex-direction:column;
}
@media (prefers-reduced-motion: no-preference) {
  .form-card { animation:form-card-in .4s ease-out; }
  @keyframes form-card-in {
    from { opacity:0; transform:translateY(14px); }
    to   { opacity:1; transform:translateY(0); }
  }
}
.form-card-header {
  background:linear-gradient(135deg, #003E66 0%, #005D97 100%);
  padding:18px 32px 16px; flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap;
}
.form-card-header-left { display:flex; align-items:center; gap:12px; }
.form-card-icon {
  width:40px; height:40px; border-radius:12px;
  background:rgba(255,255,255,.15); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.form-card-icon svg { width:20px; height:20px; }
.form-card-header h2 {
  font-size:17px; font-weight:900; color:#fff; letter-spacing:-.3px;
}
.form-card-header p {
  font-size:11px; color:rgba(255,255,255,.65); font-weight:600; margin-top:2px;
}
.form-card-stripe {
  height:3px; background:linear-gradient(90deg,#00AEEF,transparent); flex-shrink:0;
}

.form-body {
  padding:20px 28px; display:flex; flex-direction:column; gap:16px;
  overflow-y:auto; min-height:0;
}

/* ── SECTION TITLES ──────────────────────── */
.section-title {
  font-size:11px; font-weight:800; color:#9CA3AF;
  text-transform:uppercase; letter-spacing:1px;
}

/* ── ALERT ───────────────────────────────── */
.alert { display:none; padding:10px 14px; border-radius:8px; font-size:13px; font-weight:600; }
.alert.error   { display:block; background:#FEE2E2; color:#B91C1C; border:1px solid #FECACA; }
.alert.success { display:block; background:#D1FAE5; color:#065F46; border:1px solid #6EE7B7; }

/* ── FIELDS ──────────────────────────────── */
.form-columns {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  align-items:start;
  gap:16px 40px;
}
.form-col { display:flex; flex-direction:column; gap:10px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label {
  font-size:11px; font-weight:800; color:#374151;
  text-transform:uppercase; letter-spacing:.8px;
}
.form-group input[type="text"] {
  padding:10px 16px; border:2px solid #E5E7EB; border-radius:10px;
  font-family:'Montserrat',sans-serif; font-size:14px; color:#1A1A1A;
  background:#FAFAFA; outline:none;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.form-group input[type="text"]:focus {
  border-color:#005D97; background:#fff;
  box-shadow:0 0 0 4px rgba(0,93,151,.1);
}
.form-group input[type="text"]::placeholder { color:#9CA3AF; }

/* ── FILE UPLOAD ─────────────────────────── */
.upload-zone {
  border:2px dashed #D1D5DB; border-radius:12px;
  padding:22px 20px; text-align:center; cursor:pointer;
  background:#FAFAFA;
  transition:border-color .2s, background .2s, box-shadow .2s;
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.upload-zone:hover {
  border-color:#005D97; background:#EFF6FF;
  box-shadow:0 0 0 4px rgba(0,93,151,.08);
}
.upload-zone.has-file { border-color:#005D97; background:#EFF6FF; }
.upload-zone input[type="file"] {
  position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;
}
.upload-icon { font-size:26px; margin-bottom:6px; display:block; }
.upload-label {
  font-size:13px; font-weight:700; color:#374151; display:block;
}
.upload-sub {
  font-size:11px; color:#9CA3AF; font-weight:600; margin-top:3px; display:block;
}
.upload-btn {
  display:inline-block; margin-top:10px; padding:6px 18px; border-radius:20px;
  background:#EFF6FF; color:#1D4ED8; font-size:11px; font-weight:800; letter-spacing:.3px;
}
.upload-filename {
  margin-top:8px; font-size:12px; font-weight:700;
  color:#005D97; display:none;
}

/* ── SESSION INFO (header) ───────────────── */
.session-badge {
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  border-radius:12px; padding:7px 14px; flex-shrink:0;
}
.session-badge-icon {
  width:26px; height:26px; border-radius:8px;
  background:rgba(255,255,255,.15); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.session-badge-icon svg { width:14px; height:14px; }
.session-badge-text { display:flex; flex-direction:column; line-height:1.25; }
.session-badge-label {
  font-size:9px; font-weight:700; color:rgba(255,255,255,.65);
  text-transform:uppercase; letter-spacing:.6px;
}
.session-badge-text strong { font-size:15px; font-weight:900; color:#fff; }

/* ── ACTIONS ─────────────────────────────── */
.form-actions {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px; padding-top:14px; border-top:1px solid #E5E7EB;
}
.form-actions-hint { font-size:12px; font-weight:600; color:#9CA3AF; }

/* ── SUBMIT ──────────────────────────────── */
.btn-submit {
  padding:12px 40px; background:#005D97; color:#fff; border:none;
  border-radius:10px; font-family:'Montserrat',sans-serif; font-size:14px;
  font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  cursor:pointer;
  transition:background .15s, transform .1s, box-shadow .15s;
  box-shadow:0 4px 16px rgba(0,93,151,.35);
}
.btn-submit:hover  { background:#003E66; box-shadow:0 6px 20px rgba(0,93,151,.45); }
.btn-submit:active { transform:scale(.98); }
.btn-submit:disabled { background:#93C5FD; box-shadow:none; cursor:not-allowed; }

/* ── RESPONSIVE ──────────────────────────── */
@media(max-width:600px) {
  nav { padding:0 16px; }
  .page-header { padding:14px 20px 12px; }
  main { padding:12px 16px; }
  .form-body { padding:16px 20px; }
  .form-card-header { padding:16px 20px 14px; }
  .form-actions-hint { width:100%; }
  .btn-submit { width:100%; }
}