:root{
  --negro:#101010; --azul-osc:#0A172F; --azul:#124154; --azul-2:#14416d;
  --teal:#328294; --menta:#87cbb9; --rojo:#e12324; --ambar:#fcaf26;
  --papel:#f4f7f6;
}
*{box-sizing:border-box}
body{
  margin:0;font-family:'IBM Plex Sans',sans-serif;color:var(--negro);
  background:var(--papel);
  background-image:
    linear-gradient(var(--papel) 39px, rgba(18,65,84,.05) 40px);
  background-size:100% 40px;
  line-height:1.5;letter-spacing:.01em;
}
*{text-transform:uppercase}
input,textarea{text-transform:uppercase}
::placeholder{text-transform:uppercase}

.topbar{
  background:var(--azul-osc);border-bottom:4px solid var(--menta);
  display:flex;align-items:center;gap:18px;padding:18px 32px;
  position:relative;overflow:hidden;
}
.topbar::after{
  content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;
  border:2px solid rgba(135,203,185,.18);border-radius:50%;
}
.logo{height:46px;max-width:180px;object-fit:contain;position:relative;z-index:1}
.topbar h1{
  margin:0;font-size:1.05rem;font-weight:600;color:#fff;letter-spacing:.08em;
  position:relative;z-index:1;
}
.topbar .sub{
  display:block;font-size:.65rem;color:var(--menta);letter-spacing:.18em;
  font-weight:400;margin-top:2px;
}

.contenedor{max-width:760px;margin:0 auto;padding:0 16px 56px}

/* --- Pasos como pestañas de carpeta --- */
.pasos{display:flex;list-style:none;margin:0;padding:28px 0 0;gap:4px}
.pasos li{
  flex:1;position:relative;padding:12px 10px 10px;font-size:.72rem;
  letter-spacing:.1em;font-weight:600;text-align:center;color:var(--azul);
  background:#d7e4e8;clip-path:polygon(10% 0,90% 0,100% 100%,0% 100%);
  border-bottom:3px solid transparent;
}
.pasos li.activo{background:var(--azul);color:#fff;border-bottom-color:var(--ambar);z-index:2}
.pasos li.hecho{background:var(--teal);color:#fff}
.pasos li.oculto{display:none}

form,.resultado{
  background:#fff;padding:36px 32px;margin-top:-1px;
  border:1px solid #d5e0e4;border-top:none;
  box-shadow:0 8px 24px -12px rgba(10,23,47,.25);
}
.pantalla{display:none}.pantalla.activa{display:block}

h2{
  font-size:1.5rem;color:var(--azul-2);margin:0 0 4px;font-weight:600;
  letter-spacing:.04em;border-left:5px solid var(--ambar);padding-left:14px;
}
.oblig{font-size:.68rem;color:#5b6b73;letter-spacing:.1em;margin:6px 0 24px 19px}
.ayuda{font-size:.68rem;color:#5b6b73;letter-spacing:.04em;text-transform:none}
.aviso{
  background:#fff6e2;border-left:4px solid var(--ambar);padding:10px 14px;
  font-size:.75rem;letter-spacing:.04em;margin:8px 0 24px;
}

.campo{margin-bottom:30px;position:relative}
.campo label,.etiqueta{
  display:block;color:var(--azul);font-size:.78rem;font-weight:600;
  letter-spacing:.08em;margin-bottom:10px;
}
.campo [type=radio]+span,.campo [type=checkbox]+span{
  color:var(--negro);font-weight:500;font-size:.82rem;letter-spacing:.03em;
  padding-left:30px;
}
.campo label:has(input[type=radio]),.campo label:has(input[type=checkbox]){margin-bottom:12px}

input[type=text]:not(.browser-default){
  border:none!important;border-bottom:2px solid var(--teal)!important;box-shadow:none!important;
  background:transparent;font-size:.95rem;letter-spacing:.03em;padding:8px 2px;
}
input[type=text]:not(.browser-default):focus{
  border-bottom:2px solid var(--azul)!important;box-shadow:0 1px 0 0 var(--azul)!important;
}
[type=radio].with-gap:checked+span:after,[type=radio].with-gap:checked+span:before{border-color:var(--azul)}
[type=radio].with-gap:checked+span:after{background:var(--azul)}
[type=checkbox].filled-in:checked+span:not(.lever):after{background:var(--azul);border-color:var(--azul)}

.campo.invalido input[type=text]{border-bottom-color:var(--rojo)!important}
.campo.invalido .etiqueta,.campo.invalido>label{color:var(--rojo)}
.error{display:none;color:var(--rojo);font-size:.68rem;letter-spacing:.06em;margin-top:6px}
.campo.invalido .error{display:block}

.btn-pri,.btn-sec{
  font-family:inherit;font-size:.78rem;font-weight:700;letter-spacing:.12em;
  border:2px solid var(--azul);padding:12px 26px;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 100%,12px 100%);
}
.btn-pri{background:var(--azul);color:#fff}
.btn-pri:hover{background:var(--azul-2);border-color:var(--azul-2)}
.btn-sec{background:#fff;color:var(--azul)}
.btn-sec:hover{background:#e8f3f6}
.btn-pri:disabled{background:#c5cfd3;border-color:#c5cfd3;cursor:not-allowed}
.btn-pri:focus-visible,.btn-sec:focus-visible{outline:3px solid var(--ambar);outline-offset:3px}
.acciones{display:flex;gap:12px;margin-top:10px;border-top:1px dashed #c9d6da;padding-top:24px}
.nombre-archivo{margin-left:10px;font-size:.72rem;letter-spacing:.04em;color:#5b6b73}

/* --- Resultado: sello de folio --- */
.resultado{text-align:center}
.resultado h2{border:none;padding:0;display:inline-block}
.sello{
  display:inline-block;margin:22px auto;padding:18px 34px;
  border:3px double var(--rojo);color:var(--rojo);font-weight:700;
  letter-spacing:.16em;font-size:.8rem;transform:rotate(-2deg);
}
.sello strong{display:block;font-size:1.5rem;letter-spacing:.06em;margin-top:6px}
.resultado p{font-size:.82rem;letter-spacing:.03em}
.resultado .btn-pri,.resultado .btn-sec{margin:8px 6px}
[hidden]{display:none!important}

@media(max-width:520px){
  form,.resultado{padding:22px 18px}
  .topbar h1{font-size:.85rem}
  .pasos li{font-size:.6rem;padding:10px 4px 8px}
}