:root {
  --fondo: #001a38;
  --fondo-2: #00336a;
  --panel: rgba(255, 255, 255, 0.045);
  --panel-borde: rgba(255, 255, 255, 0.09);
  --texto: #eef1fb;
  --suave: #a9bfdc;
  --oro: #fcb710;
  --oro-claro: #ffd25e;
  --asoprovipas: #fcb710;
  --asoprovipas-claro: #ffd25e;
  --central: #1a8ad0;
  --central-claro: #74cbf3;
  --peligro: #ff6b6b;
  --radio: 18px;
  --azul-ipuc: #00519a;
  --azul-texto: #062b57;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  min-height: 100dvh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

.cielo {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(1200px 700px at 78% 40%, rgba(26, 128, 190, 0.35), transparent 60%),
    radial-gradient(900px 600px at 10% 90%, rgba(62, 195, 239, 0.14), transparent 60%),
    radial-gradient(700px 500px at 20% 0%, rgba(252, 183, 16, 0.10), transparent 60%),
    linear-gradient(180deg, var(--fondo-2), var(--fondo));
}
.cielo::after {
  content: ''; position: absolute; inset: 0; opacity: 0.35;
  background-image: radial-gradient(rgba(255,255,255,0.55) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at center, #000 10%, transparent 75%);
}

.etiqueta { display: inline-flex; align-items: center; gap: 8px; color: var(--oro-claro); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.etiqueta::before { content: ''; width: 28px; height: 1px; background: currentColor; }

/* ---------- marca ---------- */
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.marca .sello { width: 54px; height: 54px; flex: none; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px -6px rgba(0,0,0,0.5); }
.marca .sello img { width: 86%; height: auto; }
.marca .divisor { width: 1px; align-self: stretch; margin: 4px 4px; background: linear-gradient(transparent, #3ec3ef, transparent); }
.marca b { display: block; font-family: var(--sans); font-weight: 800; font-size: 1.5rem; letter-spacing: 0.04em; line-height: 1; }
.marca small { display: block; color: var(--suave); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 4px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 14px; padding: 15px 26px; font-weight: 700; letter-spacing: 0.01em; text-decoration: none;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro));
  color: var(--azul-texto); box-shadow: 0 10px 30px -10px rgba(252, 183, 16, 0.7), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -10px rgba(252, 183, 16, 0.85), inset 0 1px 0 rgba(255,255,255,0.6); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.btn.fantasma { background: var(--panel); color: var(--texto); box-shadow: inset 0 0 0 1px var(--panel-borde); }
.btn.peligro { background: rgba(255,107,107,0.12); color: var(--peligro); box-shadow: inset 0 0 0 1px rgba(255,107,107,0.35); }
.btn.chico { padding: 9px 14px; border-radius: 10px; font-size: 0.88rem; }

.campo { display: grid; gap: 7px; }
.campo label { font-size: 0.8rem; color: var(--suave); font-weight: 600; letter-spacing: 0.04em; }
.entrada {
  width: 100%; border-radius: 14px; border: 1px solid var(--panel-borde);
  background: rgba(0, 16, 38, 0.55); padding: 14px 16px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.entrada:focus { border-color: var(--oro); box-shadow: 0 0 0 4px rgba(252, 183, 16, 0.18); }
select.entrada { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--suave) 50%), linear-gradient(135deg, var(--suave) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
select.entrada option { background: var(--fondo-2); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.asoprovipas { color: var(--asoprovipas-claro); background: rgba(252, 183, 16, 0.15); }
.chip.central { color: var(--central-claro); background: rgba(26, 138, 208, 0.2); }
.chip.pendiente { color: var(--suave); background: rgba(154, 164, 196, 0.12); }

.aviso {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
  background: #0a3770; border: 1px solid var(--panel-borde); padding: 12px 18px; border-radius: 12px;
  box-shadow: 0 20px 40px -15px #000; transition: 0.3s ease; z-index: 80; max-width: calc(100vw - 32px);
}
.aviso.ver { opacity: 1; transform: translate(-50%, 0); }
.aviso.error { border-color: rgba(255,107,107,0.4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}