:root{
      --c-primary:#0C89B3;  /* azul corporativo */
      --c-green:#6FBC58;    /* verde suave */
      --c-ink:#0A5672;      /* azul tinta */
      --c-sky:#1EBFDC;      /* azul cielo */
      --radius:.85rem;
      --shadow:0 .75rem 1.5rem rgba(10,86,114,.10);
      --header-h: 74px;     /* altura del header fijo */
    }
    html, body { height:100%; }
    body{
      min-height:100vh; display:flex; flex-direction:column;
      background: linear-gradient(135deg,#fff 0%,rgba(111,188,88,.15) 55%,rgba(30,191,220,.15) 100%);
      color:var(--c-ink);
      font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
      letter-spacing:.1px;
      padding-top: var(--header-h); /* evita solapamiento por header fijo */
    }

.qs-header{
  position:fixed;
  top:0; left:0; right:0;
  height:auto; /* antes 85px */
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  box-shadow:var(--shadow);
  z-index:99;
  padding: .7rem 0;
}

.qs-header .container{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;
}

.qs-header .brand
{ display:flex; align-items:center; gap:.75rem; }
.qs-header .brand img{ height:48px; }
.qs-header small{ color:#567; font-weight:500; display:block; line-height:1.1; }
.qs-badge{
      display:inline-block; padding:.35rem .6rem; border-radius:999px;
      background:rgba(12,137,179,.08); border:1px solid rgba(12,137,179,.25); color:var(--c-ink); font-size:.8rem; font-weight:600;
      white-space: nowrap;}

.qs-hero{
      background:
        radial-gradient(1200px 300px at -10% -10%, rgba(30,191,220,.15), transparent 45%),
        radial-gradient(800px 200px at 110% 0%, rgba(111,188,88,.15), transparent 40%),
        linear-gradient(135deg, rgba(12,137,179,.08), rgba(111,188,88,.08));
      border:1px solid rgba(12,137,179,.12);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 1.25rem 1.25rem !important;
    }

.section-title{ font-weight:800; letter-spacing:.2px; color:var(--c-ink); margin-bottom:.35rem; }
    .qs-hero p{ margin:0; max-width: 70ch; text-align: justify; }

    /* Card principal */
    .qs-card{
      border:1px solid rgba(10,86,114,.12); border-radius:var(--radius);
      box-shadow: var(--shadow); background:#fff; overflow:hidden;
      padding: 1.25rem 1.25rem !important;
 }


.header-left{
  display:flex;
  align-items:center;
  gap:.75rem;
  min-width:0;
}

.header-left img{
  width:65px;
  height:auto;
}
.header-title{
  font-size:.95rem;
  line-height:1.2;
  white-space:normal; /* evita desbordes */
}
.header-badge{
  white-space:nowrap;
  font-size:.78rem;
  border-radius:10px;
  padding:.45rem .75rem;
}

    /* Labels & inputs */
    .form-label{ font-weight:600; color:#294b58; margin-bottom:.2rem; }
    .form-control, .form-select{
      border-radius:.9rem; border:1px solid rgba(10,86,114,.25);
      padding:.85rem 1rem; transition: .15s box-shadow, .15s border-color;
    }
    .form-control:focus, .form-select:focus{
      box-shadow:0 0 0 .25rem rgba(12,137,179,.15); border-color:var(--c-primary);
    }
    .position-relative .input-icon{
      position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:#6b8b96;
      pointer-events:none;
    }
    .with-icon{ padding-left:2.6rem; }
    .help-text{ font-size:.86rem; color:#56727c; margin-top:.15rem; }

    /* Drop de archivos */
    .file-upload-container{
      border:2px dashed rgba(10,86,114,.25);
      border-radius:1rem; padding:1rem; text-align:center; background:#fafefe;
      transition:.2s border-color, .2s background; cursor:pointer;
    }
    .file-upload-container:hover{ border-color: rgba(12,137,179,.55); background:#f6fdff; }
    .file-upload-container.file-selected{ border-color: var(--c-green); background: #F2FCEB; }
    .file-upload-container input[type="file"]{ display:none; }
    #file-upload-text{ margin:.5rem 0 0; color:#385d69; font-size:.95rem; }

    /* Firma */
    #signature-pad{
      border:2px dashed #6c757d; border-radius:.75rem; background:#fff; cursor:crosshair;
      touch-action:none;           /* evita scroll/zoom al firmar */
      margin: 0 auto; height:170px;    /* tamaño visual, pixeles reales se ajustan con DPR en JS */
      display:block;
    }
    .sig-actions .btn{ border-radius:.7rem; }

    /* Captcha card */
    .captcha-card{
      border:1px solid rgba(10,86,114,.15); border-radius:var(--radius);
      background:#fff; padding:1rem; box-shadow:var(--shadow);
      height:100%;
    }
    .captcha-box{ display:grid; grid-template-columns:1fr; gap:.5rem; }
    .captcha-question{ font-weight:700; color:#1f5568; }
    .captcha-icon img{ height:48px; }

    /* Botón principal */
    .btn-qs{
      background:var(--c-primary); color:#fff; border:0; border-radius:1rem;
      padding:1rem 1.2rem; box-shadow: var(--shadow); font-weight:700; letter-spacing:.2px;
      width:100%;
    }
    .btn-qs:hover{ background:#0A7599; color:#fff; }

#redirectOverlay {
    position: fixed;
    inset: 0;
    background: rgba(245, 251, 253, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease-in-out;
}

.loader-pro {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 6px solid #cfeaf2;
    border-top-color: var(--c-primary);
    animation: spin 1s linear infinite, glowAnim 2s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes glowAnim {
    0%, 100% { box-shadow: 0 0 0px rgba(12,137,179,0.3); }
    50% { box-shadow: 0 0 25px rgba(12,137,179,0.6); }
}

#redirectOverlay p {
    margin-top: 1.5rem;
    font-size: 1.2rem;
    color: var(--c-ink);
    font-weight: 600;
    text-align: center;
    animation: fadeText 1.4s infinite alternate;
}

@keyframes fadeText {
    from { opacity: .5; }
    to { opacity: 1; }
}

/* Responsive fino */
    .row + .row { margin-top: .75rem; }
    @media (max-width: 576px){
      .qs-header .brand img{ height:40px; }
      .qs-header small{ font-size:.78rem; }
      .qs-hero, .qs-card{ padding:1rem !important; }
      .btn-qs{ width:100%; }
    }