/* Formulario publico del sistema de CV.
   Identidad tomada del flyer de Nadia: violeta, tipografia limpia.
   Sin framework de CSS: son 300 lineas y no hay build que mantener. */

:root{
  --ink:#1B1733; --ink2:#4A4463; --ink3:#7C7594;
  --violet:#6B34B8; --violet-d:#4A2085; --violet-l:#EFE8FB;
  --paper:#F7F4FC; --card:#FFFFFF;
  --line:#E7DFF4; --line2:#CFC2E6;
  --ok-bg:#E1F3EB; --ok:#136B4D;
  --warn-bg:#FAEED7; --warn:#875709;
  --bad-bg:#FBE5E3; --bad:#A5251B;
  --r:10px;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Public Sans',system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:4px}

/* --- cabecera --- */
.cab{background:var(--card);border-bottom:1px solid var(--line)}
.cab__in{max-width:640px;margin:0 auto;padding:14px 20px}
.cab__marca{display:flex;align-items:center;gap:11px}
.cab__av{
  width:34px;height:34px;border-radius:50%;background:var(--violet);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:15px;flex-shrink:0;
}
.cab__t{font-size:14.5px;font-weight:600;line-height:1.3}
.cab__s{font-size:12.5px;color:var(--ink3)}

.wrap{max-width:640px;margin:0 auto;padding:24px 20px 40px}

/* --- progreso --- */
.pasos{display:flex;gap:5px;margin-bottom:7px}
.pasos__b{flex:1;height:3px;border-radius:2px;background:var(--line2)}
.pasos__b.on{background:var(--violet)}
.pasos__t{
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 22px;
}

/* --- titulos --- */
h1{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:0 0 6px;line-height:1.25}
h2{font-size:16px;font-weight:600;margin:0 0 4px}
.sub{color:var(--ink2);margin:0 0 24px;font-size:14.5px}

/* --- campos --- */
.campo{margin-bottom:18px}
label{display:block;font-size:13.5px;font-weight:500;margin-bottom:6px}
.opt{font-weight:400;color:var(--ink3)}
input[type=text],input[type=email],input[type=url],select,textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  background:var(--card);border:1px solid var(--line2);
  border-radius:8px;padding:10px 12px;
}
/* 16px en movil: abajo de eso, iOS hace zoom al enfocar el campo */
@media (max-width:480px){
  input[type=text],input[type=email],input[type=url],select,textarea{font-size:16px}
}
input:focus,select:focus,textarea:focus{border-color:var(--violet);outline:none;
  box-shadow:0 0 0 3px rgba(107,52,184,.12)}
input::placeholder,textarea::placeholder{color:#A9A2BC}
textarea{resize:vertical;line-height:1.55}
.ayuda{font-size:12.5px;color:var(--ink3);margin:6px 0 0;line-height:1.5}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:480px){.fila{grid-template-columns:1fr}}

/* --- tarjetas repetibles --- */
.tarjeta{
  background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:16px 18px;margin-bottom:12px;
}
.tarjeta__cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.tarjeta__n{font-size:14px;font-weight:600}

/* --- botones --- */
.btn{
  font-family:inherit;font-size:14px;font-weight:500;
  padding:10px 18px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line2);background:var(--card);color:var(--ink);
}
.btn:hover{background:var(--paper)}
.btn--p{background:var(--violet);color:#fff;border-color:var(--violet)}
.btn--p:hover{background:var(--violet-d)}
.btn--sm{font-size:13px;padding:6px 12px}
.btn--del{color:var(--bad);border-color:var(--line2)}
.acciones{display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;margin-top:26px}

/* --- avisos --- */
.aviso{border-radius:var(--r);padding:12px 15px;font-size:13px;line-height:1.55;margin:16px 0}
.aviso--v{background:var(--violet-l);color:var(--violet-d)}
.aviso--w{background:var(--warn-bg);color:var(--warn)}
.aviso--ok{background:var(--ok-bg);color:var(--ok)}
.aviso--e{background:var(--bad-bg);color:var(--bad)}
.err{color:var(--bad);font-size:12.5px;margin:5px 0 0}
.err ul{margin:0;padding-left:16px}

/* --- subida de archivo --- */
.drop{
  border:1px dashed var(--line2);border-radius:var(--r);
  padding:20px;text-align:center;background:var(--paper);
}
.drop input[type=file]{width:100%;font-size:13.5px;margin-top:8px}
.drop__t{font-size:13.5px;color:var(--ink2)}

/* --- pago --- */
.pago{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:18px;margin-bottom:20px}
.pago__m{font-size:26px;font-weight:600;letter-spacing:-.02em}
.pago__a{font-family:ui-monospace,monospace;font-size:16px;
  background:var(--violet-l);color:var(--violet-d);
  padding:8px 12px;border-radius:8px;display:inline-block;margin-top:6px}
.pago__l{font-size:13px;color:var(--ink3)}

/* --- final --- */
.ok-box{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:28px 24px;text-align:center}
.ok-box__i{width:52px;height:52px;border-radius:50%;background:var(--ok-bg);
  color:var(--ok);display:flex;align-items:center;justify-content:center;
  font-size:26px;margin:0 auto 14px}

.pie{max-width:640px;margin:0 auto;padding:0 20px 32px;
  font-size:12.5px;color:var(--ink3);text-align:center}
.pie p{margin:0}