/* Tema "juego" para el panel del Club de Fidelidad (fidelidad-admin.html).
   Solo apariencia: colores, tipografía, sombras y botones 3D. Se carga
   después del <style> de la página; para volver al diseño anterior alcanza
   con sacar el <link> a este archivo. */

:root {
  --f-titulo: "Baloo 2", "Poppins", "Segoe UI", sans-serif;
  --f-navy: #0f2a4d;
  --f-navy-claro: #1c3f6e;
  --f-navy-base: #081b33;
  --f-naranja: #ff7a1f;
  --f-naranja-claro: #ffa05a;
  --f-naranja-base: #b8470a;
  --f-linea: #dbe4f1;
  --f-card: 0 4px 0 #dbe4f1, 0 12px 24px rgba(15, 42, 77, 0.08);
}

body {
  font-family: "Poppins", "Segoe UI", sans-serif;
  background: radial-gradient(1200px 500px at 50% -100px, #ffffff 0%, #f2f5fa 60%) fixed, #f2f5fa;
}

/* ---------- Cabecera ---------- */
.topbar {
  background: linear-gradient(180deg, var(--f-navy-claro), var(--f-navy));
  border-bottom: 5px solid var(--f-naranja);
  box-shadow: 0 4px 0 rgba(8, 27, 51, 0.3), 0 12px 26px rgba(15, 42, 77, 0.28);
  padding: 12px 24px;
}
.brand {
  font-family: var(--f-titulo);
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
.brand em {
  color: var(--f-naranja-claro);
}
.brand span {
  color: #c9d6ea !important;
  font-family: var(--f-titulo);
}
.brand-sub {
  color: #9db3d3;
}
.nav-links a,
.nav-links .btn {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 13px;
  padding: 7px 16px;
  border: none;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, var(--f-naranja-claro), var(--f-naranja));
  box-shadow: 0 3px 0 var(--f-naranja-base), 0 7px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.nav-links .btn {
  background: linear-gradient(180deg, #fff, #eaf0f8);
  color: var(--f-navy);
  box-shadow: 0 3px 0 #9db3d3, 0 7px 14px rgba(0, 0, 0, 0.2);
}
.nav-links a:active,
.nav-links .btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--f-naranja-base);
}
.sync-bar {
  font-family: var(--f-titulo);
  font-weight: 600;
  background: #fff;
  border-bottom: 1px solid var(--f-linea);
}

/* ---------- Métricas ---------- */
.scard {
  position: relative;
  border: none;
  border-radius: 18px;
  padding: 16px 16px 12px;
  box-shadow: var(--f-card);
}
.scard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 6px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--f-naranja), var(--f-naranja-claro));
}
.scard-label {
  font-family: var(--f-titulo);
  font-weight: 600;
  margin-top: 2px;
}
.scard-val {
  font-family: var(--f-titulo);
  font-size: 28px;
  font-weight: 800;
  color: var(--f-navy);
  line-height: 1.1;
}
.scard-val.orange {
  color: var(--f-naranja);
}

/* ---------- Pestañas ---------- */
.tab {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 14px;
  padding: 8px 18px;
  border: 2px solid var(--f-linea);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #f3f6fb);
  color: var(--f-navy-claro);
  box-shadow: 0 3px 0 var(--f-linea), 0 6px 10px rgba(15, 42, 77, 0.05);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.tab:hover:not(.active) {
  background: linear-gradient(180deg, #fff, #ffeee0);
  border-color: #ffc9a0;
}
.tab:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--f-linea);
}
.tab.active {
  color: #fff;
  border-color: var(--f-naranja);
  background: linear-gradient(180deg, var(--f-naranja-claro), var(--f-naranja));
  box-shadow: 0 3px 0 var(--f-naranja-base), 0 7px 12px rgba(230, 90, 0, 0.22);
}

/* ---------- Tarjetas ---------- */
.card,
.modal {
  border: none;
  border-radius: 22px;
  box-shadow: var(--f-card);
}
.card-title,
.modal-title {
  font-family: var(--f-titulo);
  font-size: 18px;
  font-weight: 800;
  color: var(--f-navy);
  border-bottom: none;
  position: relative;
  padding-bottom: 12px;
}
.card-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--f-naranja), var(--f-naranja-claro));
}
.modal {
  box-shadow: 0 8px 0 rgba(15, 42, 77, 0.12), 0 24px 50px rgba(8, 27, 51, 0.35);
  padding: 24px;
}
.modal-bg {
  background: rgba(8, 27, 51, 0.6);
  backdrop-filter: blur(3px);
}
.modal-close {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  background: linear-gradient(180deg, #ff7a7a, #d93b3b);
  box-shadow: 0 3px 0 #8f1f1f, 0 6px 10px rgba(0, 0, 0, 0.2);
}
.modal-close:hover {
  background: linear-gradient(180deg, #ff7a7a, #d93b3b);
  filter: brightness(1.06);
}

/* ---------- Botones 3D ---------- */
.btn {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 14px;
  padding: 8px 20px;
  border: 2px solid var(--f-linea);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #f3f6fb);
  color: var(--f-navy-claro);
  box-shadow: 0 4px 0 var(--f-linea), 0 8px 12px rgba(15, 42, 77, 0.06);
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
}
.btn:hover {
  background: linear-gradient(180deg, #fff, #eaf0f8);
}
.btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--f-linea);
}
.btn.sm {
  font-size: 12px;
  padding: 4px 12px;
  box-shadow: 0 3px 0 var(--f-linea);
}
.btn.primary {
  color: #fff;
  border: none;
  background: linear-gradient(180deg, var(--f-naranja-claro), var(--f-naranja));
  box-shadow: 0 4px 0 var(--f-naranja-base), 0 8px 14px rgba(230, 90, 0, 0.22);
}
.btn.primary:hover {
  background: linear-gradient(180deg, var(--f-naranja-claro), var(--f-naranja));
  filter: brightness(1.06);
}
.btn.primary:active {
  box-shadow: 0 1px 0 var(--f-naranja-base);
}
.btn.danger {
  color: #b91c1c;
  border-color: #f4b4b4;
  background: linear-gradient(180deg, #fff, #fff1f1);
  box-shadow: 0 4px 0 #efc2c2;
}
.btn.danger:hover {
  background: linear-gradient(180deg, #fff, #ffe4e4);
}
.btn.success {
  color: #fff;
  border: none;
  background: linear-gradient(180deg, #4cc47a, #2fa35b);
  box-shadow: 0 4px 0 #1b6b3a, 0 8px 14px rgba(27, 107, 58, 0.22);
}
.login-btn {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 17px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--f-naranja-claro), var(--f-naranja));
  box-shadow: 0 5px 0 var(--f-naranja-base), 0 10px 18px rgba(230, 90, 0, 0.25);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.login-btn:hover {
  background: linear-gradient(180deg, var(--f-naranja-claro), var(--f-naranja));
  filter: brightness(1.06);
}
.login-btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--f-naranja-base);
}

/* ---------- Tablas y formularios ---------- */
.table-wrap {
  border-radius: 16px;
  box-shadow: 0 3px 0 var(--f-linea), 0 8px 18px rgba(15, 42, 77, 0.06);
}
th {
  font-family: var(--f-titulo);
  color: #fff;
  background: linear-gradient(180deg, var(--f-navy-claro), var(--f-navy));
  border-bottom: none;
}
tr:nth-child(even) td {
  background: #fafbfe;
}
tr:hover td {
  background: #fff1e6;
}
.form-label {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 12px;
  color: var(--f-navy-claro);
}
.form-input,
.search-box {
  border: 2px solid var(--f-linea);
  border-radius: 14px;
  padding: 8px 12px;
}
.form-input:focus,
.search-box:focus {
  outline: none;
  border-color: var(--f-naranja);
  box-shadow: 0 0 0 4px rgba(255, 122, 31, 0.16);
}
.badge {
  font-family: var(--f-titulo);
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
}

/* ---------- Catálogo de viajes ---------- */
.cat-card {
  border: none;
  border-radius: 20px;
  box-shadow: var(--f-card);
}
.cat-card.destacado {
  box-shadow: 0 4px 0 var(--f-naranja-base), 0 12px 24px rgba(230, 90, 0, 0.18);
}
.cat-head {
  background: linear-gradient(180deg, var(--f-naranja-claro), var(--f-naranja));
}
.cat-destino,
.cat-precio {
  font-family: var(--f-titulo);
  font-weight: 800;
}
.cat-precio {
  font-size: 24px;
}
.cat-actions {
  gap: 8px;
}

/* ---------- Ingreso ---------- */
.login-screen {
  background: radial-gradient(900px 500px at 50% 0, var(--f-navy-claro) 0%, var(--f-navy) 70%);
}
.login-card {
  border: none;
  border-radius: 26px;
  padding: 34px 28px;
  box-shadow: 0 8px 0 rgba(8, 27, 51, 0.45), 0 26px 50px rgba(0, 0, 0, 0.35);
}
.login-title {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 28px;
}
.login-sub {
  font-family: var(--f-titulo);
}
.loader {
  background: rgba(242, 245, 250, 0.95);
}
.mov-ico {
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
}

/* El cartel de error del ingreso no se muestra mientras está vacío */
.login-error:empty {
  display: none;
}