:root{
    --accent:#019C18; 
    --accent-2:#0b7a14;
    --ink:#0f172a; 
    --muted:#64748b;
    --bg:#ffffff; 
    --card:#ffffff;
    --radius:16px;
    --shadow:0 10px 30px rgba(2,6,23,.08);
    --shadow-lg:0 18px 50px rgba(2,6,23,.12);
    --err:#ef4444;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  body{
    font-family:Inter,system-ui,Arial,sans-serif;
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  html, body { overflow-x: hidden; }
  .field { min-width: 0; }
  .input, .select, .file { width: 100%; }
  .wizard { overflow-x: hidden; }  

  /* ===============================
    HEADER (según tu HTML)
  ==================================*/
  .header {
    margin:28px auto 12px;
    max-width:min(1600px,95vw);
    padding:0 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .brand{display:flex;align-items:center;gap:14px}
  .dot{width:12px;height:12px;border-radius:50%;background:var(--accent)}
  .kicker{font-weight:800;color:var(--accent-2);font-size:1rem}
  .title{font-size:1.9rem;font-weight:800;line-height:1.2;color:var(--ink)}
  @media (max-width:640px){.title{font-size:1.35rem}}

  section[data-step="0"] header{position:relative;}
  section[data-step="0"] header img[src*="utbb-logo-constancias"]{
    position:absolute;
    top:0; right:0;
    width:200px; height:auto;
    object-fit:contain;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.08));
  }
  @media (max-width:640px){
    section[data-step="0"] header img[src*="utbb-logo-constancias"]{
      width:150px;
      top:6px; right:6px;
    }
  }

  /* ===============================
    Radios ocultos
  ==================================*/
  .ctrl{position:absolute;left:-9999px}

  /* ===============================
    CONTENEDOR & WIZARD
  ==================================*/
  .container{
    max-width:min(1600px,96vw);
    margin:0 auto 44px;
    padding:0 24px;
  }
  .wizard{
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:28px;
    position:relative;
    overflow:hidden;
  }
  @media (min-width:1200px){ .wizard{padding:36px} }
  .wizard:hover{box-shadow:var(--shadow-lg)}

  /* ===============================
    PROGRESO
  ==================================*/
  .progress{display:flex;align-items:center;margin-bottom:26px;gap:12px}
  .steps{display:flex;gap:8px}
  .step{
    width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
    background:#e8f7ec;color:#166534;border:1px solid #bbf7d0;
    font-weight:800;font-size:.9rem;
    transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  }
  .step.active{
    background:var(--accent);
    color:#fff;border-color:var(--accent);
    transform:scale(1.08);
    box-shadow:0 6px 16px rgba(1,156,24,.28);
  }
  .bar{
    flex:1;height:12px;background:#ecfdf5;
    border:1px solid #d1fae5;border-radius:999px;overflow:hidden;position:relative
  }
  .fill{
    height:100%;width:0%;
    background:linear-gradient(90deg,var(--accent),#42c76a);
    box-shadow:inset 0 0 8px rgba(1,156,24,.35);
    transition:width .5s ease;
  }
  .bar::after{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(255,255,255,.0) 0%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);
    transform:translateX(-100%);
    animation:shine 2.2s linear infinite;
    pointer-events:none;
    mix-blend-mode:soft-light;
  }
  @keyframes shine {
    0%{transform:translateX(-100%)}
    100%{transform:translateX(100%)}
  }

  /* ===============================
    CARDS (Secciones)
  ==================================*/
  .cards{position:relative;min-height:clamp(62vh,78vh,900px)}
  .card{
    position:absolute;inset:0;background:var(--card);border-radius:var(--radius);
    padding:24px;display:grid;grid-template-rows:auto 1fr auto;gap:18px;
    opacity:0;transform:translateX(40px) scale(.985);pointer-events:none;
    transition:opacity .45s ease, transform .45s ease;
    overflow:auto;
    scrollbar-gutter: stable;
  }
  .card.active{opacity:1;transform:none;pointer-events:auto}
  .card h3{font-size:1.45rem;font-weight:800;color:var(--accent)}
  .lead{color:var(--muted);font-size:1.02rem}

  /* ===============================
    GRID LAYOUT de campos
  ==================================*/
  .grid{display:grid;gap:16px}
  .g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  @media (min-width:1400px){ .g-3{gap:18px} }
  @media(max-width:900px){.g-2,.g-3{grid-template-columns:1fr}}

  /* ===============================
    INPUTS & SELECTS
  ==================================*/
  .field{display:grid;gap:8px}
  .label{font-weight:700;font-size:1rem}
  .input,.select,.file{
    padding:14px 16px;border-radius:12px;border:1px solid #cbd5e1;
    font-size:1.02rem;background:#fff;transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .input:focus,.select:focus{
    outline:3px solid rgba(1,156,24,.18);
    border-color:var(--accent);
    box-shadow:0 0 0 2px rgba(1,156,24,.08);
  }
  .input.error,.select.error,.file.error{border-color:var(--err)!important;outline:3px solid rgba(239,68,68,.15)!important;background:#fff7f7}
  .hint{font-size:.9rem;color:#64748b}

  .section-title{font-weight:800;color:var(--accent-2);margin:6px 0 2px;font-size:1.05rem}
  .hr{height:1px;background:#e5e7eb;margin:12px 0}

  /* Radios bonitos */
  .pills{display:flex;gap:12px;flex-wrap:wrap}
  .pill{
    display:flex;align-items:center;gap:8px;
    padding:10px 14px;border:1px solid #cbd5e1;border-radius:999px;
    cursor:pointer;user-select:none;transition:background .18s ease,border-color .18s ease
  }
  .pill:hover{background:#f3f4f6}
  .pill input{accent-color:var(--accent)}

  /* ===============================
    FILE INPUTS → Dropzone
  ==================================*/
  .file{display:none}

  .field label[for="actanac"],
  .field label[for="ccurp"],
  .field label[for="acta"],
  .field label[for="imss"],
  .field label[for="curpp"],
  .field label[for="cingles"],
  .field label[for="carta_intencion"],
  .field label[for="boleta"]{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
    border:2px dashed var(--accent);border-radius:14px;padding:22px 18px;text-align:center;
    font-weight:700;color:var(--accent);background:linear-gradient(180deg,#ffffff 0%, #f8fff8 100%);
    cursor:pointer;transition:transform .18s ease, background .18s ease, border-color .18s ease;
    min-height:88px;
  }
  .field label[for="actanac"]::before,
  .field label[for="ccurp"]::before,
  .field label[for="acta"],
  .field label[for="imss"],
  .field label[for="curpp"],
  .field label[for="cingles"],
  .field label[for="carta_intencion"],
  .field label[for="boleta"]::before{
    content:"⇧ Arrastra o haz clic para subir PDF";
    font-weight:600;font-size:.92rem;color:#116d1b;opacity:.9;margin-bottom:6px;
  }
  .field label[for="actanac"]:hover,
  .field label[for="ccurp"]:hover,
  .field label[for="acta"],
  .field label[for="imss"],
  .field label[for="curpp"],
  .field label[for="cingles"],
  .field label[for="carta_intencion"],
  .field label[for="boleta"]:hover{
    background:#e9fbea;transform:translateY(-1px);border-color:#16a34a;
  }

  section[data-step="4"] .grid{grid-template-columns:1fr}

  .file.error + .hint{color:var(--err)}

  /* ===============================
    NAVEGACIÓN (botonera pegada)
  ==================================*/
  .footer-nav{
    position:sticky;bottom:0;z-index:2;
    background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 24%);
    padding:12px 0 0;margin-top:14px;border-top:1px solid #e2e8f0;
    display:flex;justify-content:space-between;gap:14px;
  }
  .btn{
    padding:13px 20px;border-radius:12px;font-weight:800;cursor:pointer;border:0;
    transition:transform .12s ease, filter .12s ease, background .18s ease;
  }
  .btn.primary{
    background:linear-gradient(90deg,#0ea15a,var(--accent));color:#fff;
    box-shadow:0 8px 20px rgba(1,156,24,.18);
  }
  .btn.primary:hover{filter:saturate(1.08);transform:translateY(-1px)}
  .btn.secondary{background:#e2e8f0;color:#334155}
  .btn.secondary:hover{background:#d8dee6}
  .btn:disabled{opacity:.55;cursor:not-allowed}

  /* Mensaje error opcional */
  .msg{font-size:.85rem;color:var(--err);display:none}
  .msg.show{display:block}

  /* ===============================
    LINK VERDE (aviso de privacidad)
  ==================================*/
  .link-green{color:var(--accent);font-weight:600;cursor:pointer;text-decoration:none}
  .link-green:hover{text-decoration:underline}

  /* ===============================
    MODAL (logos en el encabezado)
  ==================================*/
  .modal-header .logos-container{
    display:flex;align-items:center;justify-content:space-between;width:100%;
  }
  .modal-header .logo-nay{max-height:70px;width:auto}
  .modal-header .logo-utbb{max-height:60px;width:auto}
  .logo-header {
    max-height:70px;
    width:auto;
    object-fit:contain;
  }

  /* ===============================
    FOOTER PÁGINA
  ==================================*/
  .site-footer{
    background:#f9fafb;border-top:1px solid #e5e7eb;
    text-align:center;padding:24px 16px;margin-top:40px
  }
  .site-footer .footer-logo{
    max-height:30px;margin-bottom:12px;opacity:.85;
  }
  .site-footer p{margin:4px 0;font-size:.9rem;color:#374151}
  .site-footer b{color:var(--accent)}

  /* ===============================
    MEJORAS RESPONSIVAS
  ==================================*/
  @media (min-width:1280px){
    .container{max-width:1400px}
    .cards{min-height:min(80vh,920px)}
  }
  @media (max-width:900px){
    .wizard{padding:22px}
    .card{padding:18px}
    .btn{width:100%}
    .footer-nav{flex-direction:column;gap:10px}
    .steps{gap:6px}
    .step{width:34px;height:34px;font-size:.85rem}
  }
  @media (max-width:420px){
    .kicker{font-size:.95rem}
    .title{font-size:1.2rem}
    .input,.select{font-size:1rem;padding:13px 14px}
    .field label[for="actanac"],
    .field label[for="ccurp"],
    .field label[for="boleta"]{padding:18px}
  }

  @media (max-width: 900px){
    .header{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      gap:10px;
      margin-bottom:18px;
    }

    .dot{ display:none; }

    .brand{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:6px;
    }

    .title{ display:none; }

    .kicker{
      order:2;
      font-size:1.2rem;
      line-height:1.3;
      font-weight:800;
      color: var(--accent-2);
    }
    .container .kicker::after{
      content: "Preregistro - UTBB";
    }

    .logo-header{
      order:-1;
      display:block;
      margin:0 auto;
      max-height:70px;
      width:auto;
      object-fit:contain;
    }
  }

  @media (min-width:1280px){
    .container{ max-width: 1400px; }
    .cards{ min-height: min(82vh, 980px); }
    .wizard{ padding: 38px; }
    .card{ padding: 26px; }
  }

  @media (max-width:900px){
    .wizard{ padding: 22px; }
    .card{ padding: 18px; }
    .btn{ width: 100%; }
    .footer-nav{
      flex-direction: column;
      gap: 10px;
      background: #fff;
      border-top: 1px solid #e2e8f0;
      padding-top: 12px;
    }
    .steps{ gap: 6px; flex-wrap: wrap; }
    .step{ width: 34px; height: 34px; font-size: .85rem; }

    .g-2, .g-3{ grid-template-columns: 1fr !important; }

    #notel, #notelemer, #noext{
      font-size: 1rem;
      padding: 12px 14px;
    }

    .container{ max-width: 100%; padding: 0 16px; }
  }

  @media (max-width:420px){
    .kicker{ font-size: 1.05rem; }
    .title{ display:none; }
    .input, .select{ font-size: 1rem; padding: 13px 14px; }

    .btn{ padding: 14px 16px; }

    .field label[for="actanac"],
    .field label[for="ccurp"],
    .field label[for="boleta"]{ padding: 18px; }

    .logo-utbb{ max-height: 50px; }
  }

  .footer-nav{
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 12px 0 0;
    margin-top: 14px;
    border-top: 1px solid #e2e8f0;
    z-index: 2;
  }

  .steps{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .step{
    width: 36px; height: 36px; border-radius: 50%;
    display:grid; place-items:center;
    background:#e8f7ec; color:#166534; border:1px solid #bbf7d0;
    font-weight: 800; font-size: .9rem;
    transition: transform .25s ease, background .25s ease, color .25s ease;
  }
  .step.active{
    background: var(--accent); color: #fff; border-color: var(--accent);
    transform: translateY(-1px);
  }
  .bar{
    flex:1; height: 10px; background:#ecfdf5; border:1px solid #d1fae5; border-radius:999px; overflow:hidden;
  }
  .fill{
    height:100%; width:0%;
    background: linear-gradient(90deg, var(--accent), #42c76a);
    transition: width .5s cubic-bezier(.22,.61,.36,1);
  }

  .header{
    display:flex; justify-content:space-between; align-items:center;
  }
  .logo-utbb{
    max-height:70px; width:auto; object-fit:contain;
  }

  .file-drop{
    border: 2px dashed var(--accent);
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    transition: background .25s ease, border-color .25s ease, transform .15s ease;
  }
  .file-drop:hover{
    background: #f0fff3;
    border-color: #15b057;
    transform: translateY(-1px);
  }
  .file-drop i{ opacity:.8; }
  .footer-nav {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 20px;
    z-index: 5;
  }

  .footer-nav::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    z-index: -1;
  }

  .footer-nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -40px;
    height: 40px;
    background: #ffffff;
    z-index: -1;
  }

  html, body{
    overflow-x: hidden;
    touch-action: pan-y;
    overscroll-behavior-x: none;
  }

  .container, .wizard, .cards, .card{
    max-width: 100%;
  }

  @media (min-width: 380px) and (max-width: 768px){
    .grid.g-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid.g-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 379px){
    .grid.g-2, .grid.g-3{ grid-template-columns: 1fr; }
  }

  @media (max-width: 768px){
    .cards{ min-height: 82vh; }

    .wizard{ padding: 18px; }
    .card{ padding: 14px; }
    .card h3{ font-size: 1.28rem; margin-bottom: 4px; }
    .section-title{ margin: 4px 0 0; font-size: 1rem; }
    .lead{ font-size: .96rem; }

    .grid{ gap: 12px; }
    .field{ gap: 6px; }
    .label{ font-size: .95rem; }

    .input, .select, .file{
      padding: 12px 14px;
      font-size: 1rem;
      line-height: 1.25;
    }

    .pills{ gap: 8px; }
    .pill{ padding: 7px 10px; font-size: .86rem; }

    .btn{ padding: 12px 16px; font-size: .98rem; }
    .footer-nav{ padding: 12px 18px; gap: 12px; }
  }

  @media (min-width: 769px) and (max-width: 1024px){
    .grid.g-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid.g-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid{ gap: 14px; }
  }

  .footer-nav{
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 20px;
    z-index: 5;
    backdrop-filter: saturate(110%);
  }
  .footer-nav::before{
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    z-index: -1;
  }
  .footer-nav::after{
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -56px;
    height: 56px;
    background: #fff;
    z-index: -1;
  }

  @media (max-width: 480px){
    #notel, #notelemer, #noext{
      font-variant-numeric: tabular-nums;
      letter-spacing: .02em;
    }
  }

  .cards, .card{
    overflow-x: clip;
  }

  @media (max-width: 1024px){
    .cards{
      min-height: auto;
      position: static;
    }
    .card{
      position: static;
      overflow: visible;
      height: auto;
      max-height: none;
      display: none;
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }
    .card.active{
      display: grid;
    }
  }
  .footer-nav::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -60px;
    height: 60px;
    background: #ffffff;
    z-index: -1;
  }
  .input[type="date"]{
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    line-height: 1.25;
    min-height: 48px;
    padding: 12px 40px 12px 14px;
    box-sizing: border-box;
  }

  .input[type="date"]::-webkit-calendar-picker-indicator{
    margin: 0;
    padding: 0;
    opacity: .85;
    cursor: pointer;
  }
  @media (max-width: 1024px){
    .cards{ min-height: auto; }

    .card{
      position: static;
      overflow: visible;
      height: auto;
      max-height: none;
      display: none;
    }

    .card.active{
      display: grid;
      animation: cardIn .35s cubic-bezier(.22,.61,.36,1) both;
    }
  }

  @keyframes cardIn{
    from{ opacity: 0; transform: translateY(10px); }
    to  { opacity: 1; transform: none; }
  }

  @media (max-width:1024px){
    .wizard{
        position: relative;
        padding-bottom: 72px;
        overflow: hidden;
    }
    .footer-nav{
        position: sticky;
        bottom: 0;
        z-index: 5;
        isolation: isolate;
    }
    .footer-nav::after{
        bottom: 0;
        height: 72px; 
    }
    }

    .pdf-content {
      display: none;
    }

  .file-label {
    display: block;
    margin-top: 6px;
    font-size: 0.9rem;
    color: #019C18;
    font-weight: 600;
  }