/* ============================================================
   BYE MULTAS — Premium CSS Layer (cross-page)
   Import AFTER page-specific CSS for proper cascade
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap");

/* ── Aliases de variables (apuntan a main.css para evitar duplicados) ── */
:root {
  --gold:          var(--color-accent);
  --gold-soft:     var(--color-accent-soft);
  --navy:          var(--color-primary);
  --gold-gradient: linear-gradient(90deg, #ff006e, #ff66a8, #ff006e);
}

/* ── Animations ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes countUp {
  0%   { text-shadow: 0 0 0 rgba(255, 0, 110, 0); }
  50%  { text-shadow: 0 0 24px rgba(255, 0, 110, 0.25), 0 0 48px rgba(255, 0, 110, 0.1); }
  100% { text-shadow: 0 0 8px rgba(255, 0, 110, 0.15); }
}

.animate-up {
  animation: fadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-up-2 { animation: fadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.1s; }
.animate-up-3 { animation: fadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.2s; }
.animate-up-4 { animation: fadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.3s; }
.animate-up-5 { animation: fadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.4s; }
.animate-up-6 { animation: fadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.5s; }

/* ── Scrollbar (solo shell claro; no afecta admin ni contacto oscuro) ── */
body.page-inicio,
body.page-reporte,
body.page-servicio {
  scrollbar-width: thin;
  scrollbar-color: rgba(30, 58, 95, 0.35) #f4f4f5;
}

body.page-inicio::-webkit-scrollbar,
body.page-reporte::-webkit-scrollbar,
body.page-servicio::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.page-inicio::-webkit-scrollbar-track,
body.page-reporte::-webkit-scrollbar-track,
body.page-servicio::-webkit-scrollbar-track {
  background: #f4f4f5;
  border-radius: 999px;
}

body.page-inicio::-webkit-scrollbar-thumb,
body.page-reporte::-webkit-scrollbar-thumb,
body.page-servicio::-webkit-scrollbar-thumb {
  background: rgba(30, 58, 95, 0.28);
  border-radius: 999px;
  border: 2px solid #f4f4f5;
}

/* Focus: ver ui-global.css (carga después) */

/* ── Glass ── */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ── Badge Gold ── */
.badge-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--gold-soft);
  border: 1px solid rgba(255, 0, 110, 0.28);
  color: #b80059;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Stat Big ── */
.stat-big {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: #1e3a5f;
  letter-spacing: -0.04em;
  line-height: 1;
  animation: countUp 1.2s ease-out both;
}

/* ── Divider Gold ── */
.divider-gold {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff006e, transparent);
  margin: 1.5rem 0;
}

/* ── Button Primary (no pisar #btnEnviar en contacto) ── */
.btn-primary:not(#btnEnviar) {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s, filter 0.2s;
}

.btn-primary:not(#btnEnviar):hover:not(:disabled) {
  transform: translateY(-2px);
}

/* ── Card Hover ── */
.card-hover {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s, border-color 0.2s;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
  border-color: rgba(255, 0, 110, 0.22);
}

/* ── Sidebar / header resultado — franja magenta superior ── */
.reporte-sidebar,
body.page-reporte .site-header.site-header--navy {
  position: relative;
}

.reporte-sidebar::after,
body.page-reporte .site-header.site-header--navy::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #e60063, #ff006e, #ff66a8, #ff006e, #e60063);
}

/* ── Big Money Amounts ── */
.reporte-adeudo-monto {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 700;
}

/* ── Tablas en reporte (no tablas admin) ── */
body.page-reporte .reporte-scroll table tbody tr {
  transition: background 0.12s ease;
}

body.page-reporte .reporte-scroll table tbody tr:hover td {
  background: rgba(255, 0, 110, 0.06) !important;
}

/* ── Badges ── */
.badge-nopagada {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, 0.22);
  font-size: 0.72rem;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-weight: 700;
  display: inline-block;
}

.badge-pagada {
  background: rgba(5, 150, 105, 0.1);
  color: #047857;
  border: 1px solid rgba(5, 150, 105, 0.22);
  font-size: 0.72rem;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-weight: 700;
  display: inline-block;
}

/* ── Plate Preview ── */
.inicio-plate-preview {
  background: linear-gradient(180deg, #fff8e8 0%, #f5f0e8 100%);
  border: 2.5px solid #0a0e1a;
  box-shadow: 0 6px 24px rgba(10, 14, 26, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}