:root{
  --bg:#0f0f0f; --panel:#1b1b1b; --muted:#9ea3a8;
  --accent:#e53935; --accent-2:#2ecc71; --text:#ffffff;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
.container{max-width:960px;margin:0 auto;padding:24px 16px}
h1,h2{margin:0 0 16px;font-weight:800;letter-spacing:.5px}
h1{font-size:clamp(22px,4.5vw,34px)}
h2{font-size:clamp(18px,3.8vw,26px);color:var(--muted)}
.card{
  background:linear-gradient(180deg,#1b1b1b, #161616);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.04);
  border:1px solid #262626;
}
.row{display:flex;gap:12px;flex-wrap:wrap}
.field{flex:1 1 260px;display:flex;flex-direction:column;gap:8px}
label{font-size:.9rem;color:var(--muted)}
input[type="text"],input[type="email"],input[type="tel"]{
  width:100%;padding:14px 12px;border-radius:12px;border:1px solid #303030;
  background:#121212;color:var(--text);font-size:1rem;outline:none;
}
input:focus{border-color:#474747}
input::placeholder{color:#6b6f74}
input[type="file"]{color:var(--muted)}
.help{font-size:.85rem;color:var(--muted)}
.preview{margin-top:8px;border-radius:12px;max-width:100%;height:auto;display:none;border:1px solid #2a2a2a}
.btn{
  appearance:none;border:0;border-radius:14px;
  background:var(--accent);color:#fff;font-weight:800;
  padding:14px 18px;font-size:1.05rem;cursor:pointer;
  box-shadow:0 10px 24px rgba(229,57,53,.35);
  transition:transform .06s ease, filter .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:#2d2d2d;box-shadow:none}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.notice{margin-top:14px;color:var(--muted)}
.center{text-align:center}
a.btn-link{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 14px;border-radius:12px;background:#232323;color:#fff;text-decoration:none;border:1px solid #303030
}
a.btn-link:hover{filter:brightness(1.05)}
.status-ok{color:var(--accent-2);font-weight:700}
.status-warn{color:#ffb74d;font-weight:700}

.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  gap: 6px;
}

.loader span {
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  animation: bounce 0.6s infinite alternate;
}

.loader span:nth-child(2) {
  animation-delay: 0.15s;
}
.loader span:nth-child(3) {
  animation-delay: 0.3s;
}
.loader span:nth-child(4) {
  animation-delay: 0.45s;
}

@keyframes bounce {
  to {
    opacity: 0.3;
    transform: translateY(-6px);
  }
}
/* Modal de login */
.login-modal{
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
  backdrop-filter: blur(2px);
}
.login-card{
  width: 90%; max-width: 420px; background: #191919; color:#fff;
  border-radius: 16px; padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.login-card h2{ margin: 0 0 8px 0; }
.login-card p{ margin: 0 0 12px 0; opacity: .85; }
.login-card input{
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid #333;
  background:#101010; color:#fff; outline: none; margin-bottom: 12px;
}
.login-card .btn{
  width: 100%; padding: 12px; border:0; border-radius: 10px; cursor:pointer;
  background:#e54545; color:#fff; font-weight:600;
}
.notice{ margin-top:10px; font-size:.95rem; color:#ffb4b4; }

/* pequeños utilitarios ya usados por admin.js */
.pill{ background:#2a2a2a; color:#ddd; padding:6px 10px; border-radius:999px; }
.table-wrap{ overflow-x:auto; }
.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ padding:10px 12px; border-bottom:1px solid #2a2a2a; }
.tag{ background:#262626; padding:4px 8px; border-radius:8px; font-variant-numeric: tabular-nums; }
.status{ background:#1b1b1b; color:#fff; border:1px solid #333; border-radius:8px; padding:6px 10px; }
.hide-sm{ display:table-cell; }
@media (max-width:720px){ .hide-sm{ display:none; } }
/* ===== Elegancia general ===== */
:root{
  --bg: #0b0d10;
  --bg-soft: #111418;
  --card: #13171d;
  --glow: #ff4740;
  --glow-2: #ff8a65;
  --text: #e9eef4;
  --muted: #9aa4b2;
  --border: #1f2530;
  --ok: #22c55e;
  --warn: #f59e0b;
  --err: #ef4444;
  --link: #6ab7ff;
}

body{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,71,64,.12) 0, transparent 60%),
    radial-gradient(1200px 600px at 110% 10%, rgba(106,183,255,.10) 0, transparent 60%),
    linear-gradient(180deg, #0a0c10 0%, #0b0d10 100%);
  color: var(--text);
}

.container{ max-width: 980px; }

/* ===== Encabezado con acento ===== */
.hero-title{
  font-size: clamp(28px, 4.6vw, 44px);
  line-height: 1.1;
  letter-spacing: .4px;
  margin: 14px 0 6px;
  background: linear-gradient(90deg, #fff 0, #cfe7ff 50%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(255,255,255,.06);
}
.hero-sub{
  margin: 0 0 18px;
  color: var(--muted);
}

/* ===== Tarjetas “glass” ===== */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border: 1px solid var(--border);
  box-shadow:
    0 8px 24px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.02) inset;
  border-radius: 16px;
  backdrop-filter: blur(6px);
}

/* Inputs más limpios */
.field input{
  background: #0e1217;
  border: 1px solid #1b2230;
  color: var(--text);
  border-radius: 12px;
}
.field input:focus{
  border-color: #2d3b52;
  box-shadow: 0 0 0 3px rgba(106,183,255,.15);
}

/* Botón con glow */
.btn{
  background: linear-gradient(180deg, var(--glow) 0%, #ff675f 100%);
  border: none;
  color: #fff;
  border-radius: 14px;
  padding: 12px 20px;
  font-weight: 700;
  letter-spacing: .3px;
  box-shadow: 0 10px 24px rgba(255,71,64,.26), 0 2px 0 rgba(255,71,64,.5) inset;
  transition: transform .06s ease, filter .2s ease;
}
.btn:hover{ filter: brightness(1.05); }
.btn:active{ transform: translateY(1px); }

/* Link del comprobante */
.readonly a{
  color: var(--link);
  text-decoration: underline;
}
.readonly a:hover{ opacity: .9; }

/* ===== Resultado en dos columnas responsivas ===== */
#resultado .row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
@media (max-width: 720px){
  #resultado .row{ grid-template-columns: 1fr; }
}

/* Konami como monoespaciado */
#r-kid{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .6px;
}

/* ===== Badge de estatus ===== */
.badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .92rem;
  border: 1px solid #233042;
  background: #0e141b;
}
.badge::before{
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 12px var(--warn);
}
.badge.is-ok::before   { background: var(--ok);   box-shadow: 0 0 12px var(--ok); }
.badge.is-err::before  { background: var(--err);  box-shadow: 0 0 12px var(--err); }

/* ===== Loader de puntos reutilizable ===== */
.loader-inline{
  display: inline-flex; gap: 6px; align-items: center;
}
.loader-inline span{
  width: 6px; height: 6px; border-radius: 50%;
  background: #cfe7ff;
  opacity: .65;
  animation: b 1.1s infinite ease-in-out;
}
.loader-inline span:nth-child(2){ animation-delay: .12s; }
.loader-inline span:nth-child(3){ animation-delay: .24s; }
@keyframes b{
  0%, 80%, 100%{ transform: translateY(0); opacity: .38; }
  40%            { transform: translateY(-5px); opacity: 1; }
}
/* Animación de puntos */
.dots::after {
  content: " .";
  animation: dots 1s steps(4, end) infinite;
}
@keyframes dots {
  0%, 20% { content: " ."; }
  40% { content: " .."; }
  60% { content: " ..."; }
  80%, 100% { content: " ...."; }
}

/* Overlay centrado */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.overlay-content {
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  background: rgba(255,255,255,0.1);
  padding: 2rem 3rem;
  border-radius: 1rem;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
/* ===== LCG · Tema de formulario (solo estética) ===== */

/* Tarjeta contenedora (si tu formulario está dentro de un card/div) */
#preFormCard, .pre-card, .form-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  padding: 18px;
}

/* Layout base del formulario */
#preForm, form.preregistro, form#preForm {
  display: grid;
  gap: 14px;
}

/* Etiquetas */
#preForm label,
form.preregistro label {
  font-weight: 700;
  letter-spacing: .2px;
  color: #e8e8ea;
  display: block;
  margin: 2px 0 6px;
}

/* Inputs/Select/Textarea */
#preForm input,
#preForm select,
#preForm textarea,
form.preregistro input,
form.preregistro select,
form.preregistro textarea {
  width: 100%;
  background: #121316;
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  padding: 12px 14px;
  border-radius: 12px;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

#preForm input::placeholder,
#preForm textarea::placeholder {
  color: #a0a4ad;
}

#preForm input:focus,
#preForm select:focus,
#preForm textarea:focus {
  border-color: #e53935;
  box-shadow: 0 0 0 3px rgba(229,57,53,.25);
}

/* File input moderno (sin cambiar HTML) */
#preForm input[type="file"] {
  padding: 10px 12px;
  cursor: pointer;
}

#preForm input[type="file"]::file-selector-button {
  background: linear-gradient(180deg, #e00119, #a80012);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 800;
  margin-right: 10px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  transition: transform .15s ease, filter .2s ease;
}

#preForm input[type="file"]::file-selector-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* Mensajes de ayuda / tips bajo campos */
#preForm .help, .form-help, .hint {
  font-size: .9rem;
  color: #9aa0a6;
  margin-top: 6px;
}

/* Vista previa de imagen de pago */
#preForm .img-preview, .preview, #imgPreview {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  background: #0d0e11;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 8px;
}

/* Botón enviar con estilo LCG */
#preForm button[type="submit"],
form.preregistro button[type="submit"] {
  background: linear-gradient(180deg, #e00119, #a80012);
  color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(224,1,25,.28);
  transition: transform .15s ease, filter .2s ease;
}

#preForm button[type="submit"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* Agrupaciones en tarjeta (si usas “fieldset” o bloques) */
#preForm fieldset {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,.03);
}
#preForm fieldset legend {
  padding: 0 6px;
  font-weight: 800;
  color: #e8e8ea;
}

/* Responsive: 2 columnas en pantallas medianas si usas contenedores .field */
@media (min-width: 760px) {
  #preForm {
    grid-template-columns: 1fr 1fr;
  }
  /* Los bloques que deban ocupar todo el ancho (por ej. file/preview) */
  #preForm .full,
  #preForm .row-full,
  #preForm .preview,
  #preForm .img-preview,
  #preForm .actions {
    grid-column: 1 / -1;
  }
}
/* Compensación específica para esta vista */
body.consulta-page{
  /* margen para que no tape el header fijo ni el nav inferior */
  padding-top: 100px;    /* header + respiro */
  padding-bottom: 128px; /* bottom-nav + respiro */
}

/* Por si el wrapper también necesita margen extra en pantallas chicas */
.consulta-wrap{
  padding-top: 8px;
  padding-bottom: 8px;
}
@media (max-width:480px){
  body.consulta-page{
    padding-top: 108px;
    padding-bottom: 136px;
  }
}
/* Pill de tipo de evento */
.evt-pill{
  display:inline-block;
  padding:.28rem .5rem;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.2px;
  font-size:.85rem;
  color:#dfe7ff;
  background:rgba(59,130,246,.12);
  border:1px solid rgba(59,130,246,.35);
  white-space:nowrap;
}
/* Nunca ocultar la columna de acciones en móvil */
th.actions-col,
td.actions-col {
  display: table-cell !important;
}

/* Ajustes de cabida en pantallas pequeñas */
@media (max-width: 720px){
  td.actions-col {
    white-space: nowrap;
  }
  td.actions-col .row-actions {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    vertical-align: middle;
  }
  td.actions-col select.status {
    max-width: 140px;
  }
  td.actions-col button.btn-del {
    padding: .35rem .6rem;
    font-size: .9rem;
  }
}