:root{
  --bg:#0a0f1e;
  --card:#0f1731;
  --card2:#111c3a;
  --text:#e9eefc;
  --muted:#a9b7e6;
  --brand:#2f6bff;
  --danger:#ff4d4d;
  --warn:#ffcc33;
  --info:#4db7ff;
  --ok:#2bd673;
  --border:rgba(255,255,255,.10);
  --shadow: 0 16px 50px rgba(0,0,0,.35);
  --radius: 18px;
  --radius2: 14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Roboto,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  background: radial-gradient(1200px 600px at 20% 0%, #13225d 0%, var(--bg) 55%);
  color:var(--text);
}

.wrap{
  min-height:100%;
  display:flex;
  flex-direction:column;
  padding: 18px 14px 28px;
  max-width: 560px;
  margin:0 auto;
}

.header{
  padding: 10px 4px 14px;
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
}
.logo{
  width:48px;height:48px;
  border-radius:16px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, var(--brand), #79a6ff);
  color:#08112a;
  font-weight:900;
  box-shadow: 0 10px 30px rgba(47,107,255,.35);
}
h1{
  margin:0;
  font-size: 20px;
  letter-spacing:.2px;
}
.header p{
  margin:2px 0 0;
  color:var(--muted);
  font-size: 13px;
}

.card{
  background: linear-gradient(180deg, var(--card), var(--card2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}

/* Alertas */
.alert{
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px 12px;
  margin: 2px 0 10px;
  font-size: 13px;
  line-height: 1.35;
  background: rgba(255,255,255,.04);
}
.alert--danger{ border-color: rgba(255,77,77,.45); background: rgba(255,77,77,.10); }
.alert--warn{ border-color: rgba(255,204,51,.45); background: rgba(255,204,51,.10); }
.alert--info{ border-color: rgba(77,183,255,.45); background: rgba(77,183,255,.10); }
.alert strong{ font-weight: 900; }

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding: 10px 2px;
}
label{
  font-size: 13px;
  color: var(--muted);
  letter-spacing:.2px;
}

.req{
  color: rgba(233,238,252,.8);
  font-weight: 900;
}

.sub{
  font-size: 12px;
  color: rgba(169,183,230,.85);
}
input, select{
  width:100%;
  padding: 13px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  outline:none;
  font-size: 15px;
}
input::placeholder{color: rgba(233,238,252,.55)}
input:focus,select:focus{
  border-color: rgba(47,107,255,.6);
  box-shadow: 0 0 0 4px rgba(47,107,255,.18);
}
select option{
  background: #0b1330;
  color: var(--text);
}

.hint{
  color: rgba(169,183,230,.85);
  font-size: 12px;
  line-height: 1.35;
}

.help{
  position: relative;
  /* Más llamativo (mobile-first) */
  color: rgba(235,248,255,.98);
  font-size: 12.5px;
  line-height: 1.4;
  padding: 10px 10px 10px 38px;
  border-radius: 14px;
  border: 1px solid rgba(77,183,255,.48);
  background: linear-gradient(180deg, rgba(77,183,255,.22), rgba(77,183,255,.10));
  box-shadow: 0 10px 26px rgba(77,183,255,.12);
}
.help::before{
  content: "?";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 18px;
  height: 18px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  font-weight: 1000;
  font-size: 12px;
  color: rgba(8,17,42,.98);
  background: rgba(77,183,255,.98);
  box-shadow: 0 8px 18px rgba(77,183,255,.28);
}

.field-error{
  display:none;
  border: 1px solid rgba(255,77,77,.45);
  background: rgba(255,77,77,.10);
  color: #ffd7d7;
  font-size: 12px;
  line-height: 1.35;
  padding: 8px 10px;
  border-radius: 14px;
}

.field.invalid .field-error{ display:block; }
.field.invalid input,
.field.invalid select{
  border-color: rgba(255,77,77,.70);
  box-shadow: 0 0 0 4px rgba(255,77,77,.12);
}

.file-wrap{
  border: 1px dashed rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 10px;
}

.callout{
  border: 1px solid rgba(77,183,255,.45);
  background: rgba(77,183,255,.10);
  border-radius: 16px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.callout--success{
  border-color: rgba(43,214,115,.55);
  background: linear-gradient(180deg, rgba(43,214,115,.18), rgba(43,214,115,.08));
  box-shadow: 0 12px 28px rgba(43,214,115,.10);
}

.callout--warn{
  border-color: rgba(255,204,51,.55);
  background: linear-gradient(180deg, rgba(255,204,51,.18), rgba(255,204,51,.08));
  box-shadow: 0 12px 28px rgba(255,204,51,.10);
}
.callout-title{
  font-weight: 900;
  margin-bottom: 4px;
}
.callout-text{
  font-size: 12px;
  color: rgba(233,238,252,.9);
  line-height: 1.35;
}
.callout-actions{
  display:none !important;
}
.link-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  text-decoration:none;
  font-weight: 800;
  font-size: 13px;
}
.link-btn:active{ transform: translateY(1px); }

.inline-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.pill{
  display:flex;
  gap:8px;
  align-items:center;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
}
.pill-label{
  color: rgba(169,183,230,.8);
}
.pill-value{
  font-weight:700;
}

.btn{
  width:100%;
  border:none;
  border-radius: 16px;
  padding: 14px 16px;
  margin-top: 8px;
  background: linear-gradient(135deg, var(--brand), #79a6ff);
  color:#08112a;
  font-weight:900;
  font-size: 16px;
  letter-spacing:.2px;
  cursor:pointer;
}
.btn:active{transform: translateY(1px)}
.error{
  display:none; /* mantenido por compatibilidad; ahora usamos #formAlert y errores por campo */
}

.hidden{display:none !important}

.preview{
  display:none;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 10px;
  overflow:hidden;
}
.preview img{
  width:100%;
  display:block;
  border-radius: 12px;
}
.preview-meta{
  margin-top: 8px;
  color: rgba(169,183,230,.85);
  font-size: 12px;
}

.footer{
  margin-top:auto;
  text-align:center;
  padding: 14px 0 0;
  color: rgba(169,183,230,.7);
}

/* Overlay */
.overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.62);
  display:grid;
  place-items:center;
  padding: 16px;
  z-index: 999;
}
.overlay-card{
  width:min(520px, 100%);
  background: linear-gradient(180deg, #0f1731, #0c1230);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 16px 16px 18px;
  box-shadow: var(--shadow);
  text-align:center;
}
.overlay-card h2{
  margin: 10px 0 6px;
  font-size: 18px;
}
.overlay-card p{
  margin:0 0 12px;
  color: rgba(233,238,252,.85);
  font-size: 13px;
  line-height:1.35;
}

/* Ajustes mobile-first */
@media (max-width: 420px){
  .wrap{ padding: 14px 12px 24px; }
  .card{ padding: 12px; border-radius: 20px; }
  input, select{ padding: 14px 12px; font-size: 16px; } /* evita zoom en iOS */
  .btn{ padding: 15px 16px; }
}
.spinner{
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.15);
  border-top-color: rgba(47,107,255,.95);
  margin: 4px auto 0;
  animation: spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.progress{
  height: 10px;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.bar{
  height:100%;
  background: linear-gradient(90deg, var(--brand), #79a6ff);
  width: 10%;
  transition: width .25s ease;
}
.step{
  margin-top: 10px;
  color: rgba(169,183,230,.85);
  font-size: 12px;
}


/* Oculta botones de links (según request) */
#tarjetaLinkBtn, #folderLinkBtn{
  display:none !important;
}