:root{
  --navy: #12181f;
  --navy-soft: #1c2632;
  --gold: #96702a;
  --gold-light: #e0b45c;
  --line: #dde2ea;
  --text: #12181f;
  --muted: #4a5568;
  --ok: #0f7a52;
  --ok-bg: #eaf7f2;
  --danger: #b3261e;
  --danger-bg: #fdecea;
  --serif: 'Georgia', 'Times New Roman', serif;
  --sans: 'Segoe UI', Arial, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body {
  min-height: 100vh;
  font-family: var(--sans);
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-soft) 320px, #f4f6f9 320px);
  color: var(--text);
  display:flex;
  flex-direction:column;
}

.band{ height:6px; background: var(--gold); }

header{ padding: 22px 24px 8px; display:flex; align-items:center; gap:12px; }

.seal{
  width:34px; height:34px; border: 1.5px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--serif); font-size:14px; color: var(--gold-light); flex-shrink:0;
}

.brand-text{ font-family: var(--serif); font-size: 14px; letter-spacing: 0.04em; color: #eef1f6; }

.container {
  flex:1; max-width: 560px; width:100%; margin: 0 auto; padding: 24px 20px 60px;
  display:flex; align-items:flex-start; justify-content:center;
}

.card {
  width:100%; background: #ffffff; padding: 34px 30px; border-radius: 10px;
  box-shadow: 0 20px 45px rgba(18,24,31,0.18); border-top: 3px solid var(--gold);
}

.kicker{
  text-align:center; font-size: 11px; font-weight:700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
}

.titulo-principal{ text-align: center; font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--navy); margin-bottom: 6px; }
.subtitulo{ text-align:center; font-size: 13px; color: var(--muted); margin-bottom: 26px; }

label{ font-weight: 600; font-size: 13px; display: block; margin-top: 4px; color: var(--text); }

.input-group{ margin-top: 8px; }
.input-group input{
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px;
  outline: none; font-size: 15px; font-family: var(--sans); transition: 0.2s;
}
.input-group input:focus{ border-color: var(--gold); box-shadow: 0 0 0 3px rgba(150,112,42,0.14); }

.buttons{ margin-top: 22px; }

.btn-primary{
  width:100%; border: none; padding: 12px; border-radius: 8px; cursor: pointer;
  font-weight: 700; font-size: 14px; font-family: var(--sans); background: var(--navy); color: #fff;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition: background 0.2s ease;
}
.btn-primary:hover:not(:disabled){ background: var(--navy-soft); }
.btn-primary:disabled{ opacity:0.6; cursor:not-allowed; }

.spinner{
  width:15px; height:15px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  border-radius:50%; animation: spin 0.7s linear infinite; display:none;
}
.btn-primary.loading .spinner{ display:inline-block; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.resultado{ margin-top: 26px; text-align:center; animation: fadeIn 0.25s ease; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(4px);} to{ opacity:1; transform: translateY(0);} }

/* SELLO */
.sello{
  width: 84px; height: 84px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
  margin: 0 auto 14px; font-size: 34px;
}
.sello.ok{ background: var(--ok-bg); color: var(--ok); border: 2px solid var(--ok); }
.sello.err{ background: var(--danger-bg); color: var(--danger); border: 2px solid var(--danger); }

.resultado h3{ font-family: var(--serif); font-size: 19px; margin-bottom: 4px; }
.resultado h3.ok{ color: var(--ok); }
.resultado h3.err{ color: var(--danger); }

.resultado p.detalle{ color: var(--muted); font-size: 13px; margin-bottom: 18px; }

.datos{
  text-align:left; border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; margin-top: 10px;
}
.datos .fila{ display:flex; justify-content:space-between; gap: 12px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.datos .fila:last-child{ border-bottom:none; }
.datos .fila .k{ color: var(--muted); font-weight:600; }
.datos .fila .v{ color: var(--text); text-align:right; }

footer{ text-align:center; font-size: 11px; color: var(--muted); padding: 16px; }

@media (max-width: 480px){
  .card{ padding: 26px 20px; }
  .titulo-principal{ font-size: 19px; }
}

.btn-volver{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 18px;
  padding: 12px;
  border-radius: 8px;
  background: #eef1f6;
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--sans);
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.2s ease, transform 0.1s ease;
}
.btn-volver:hover{ background: #e2e7ee; }
.btn-volver:active{ transform: translateY(1px); }