/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Inter variável hospedada no próprio Loy (sem Google Fonts: nenhum dado do
   visitante sai para terceiros só para desenhar texto). Vale para o site e
   para a plataforma. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/inter-var-latin-5e6b0c47.woff2") format("woff2");
}

:root {
  /* Uma única cor de marca; tons funcionais continuam semânticos. */
  --loy-color-brand: #111827;
  --loy-color-brand-hover: #030712;
  --loy-color-brand-gradient-end: #1f2937;
  --loy-color-brand-rgb: 17, 24, 39;
  --loy-page-bg: #f6f7fb;
  --loy-radius-card: 18px;
  --loy-shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05);
  --loy-line: #e6e7ef;
  --loy-muted: #5d6072;
  --loy-accent: #5b3bf5;
  --loy-accent-soft: #ece8ff;

  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: #191c2b;
  --bs-secondary-color: var(--loy-muted);
  --bs-border-color: var(--loy-line);
  --bs-border-radius: 10px;
  --bs-border-radius-lg: 14px;

  --bs-primary: var(--loy-color-brand);
  --bs-primary-rgb: var(--loy-color-brand-rgb);
  --bs-primary-text-emphasis: var(--loy-color-brand);
  --bs-primary-bg-subtle: #e9edf2;
  --bs-primary-border-subtle: #cbd2dc;
  --bs-link-color: var(--loy-color-brand);
  --bs-link-color-rgb: var(--loy-color-brand-rgb);
  --bs-link-hover-color: var(--loy-color-brand-hover);
  --bs-link-hover-color-rgb: 3, 7, 18;
}

body {
  background: var(--loy-page-bg);
}

.loy-navbar {
  background: linear-gradient(135deg, var(--loy-color-brand), var(--loy-color-brand-gradient-end));
}

.loy-brand-text {
  letter-spacing: -0.03em;
  font-size: 1.15rem;
}

.loy-nav-link {
  color: rgba(255, 255, 255, .78) !important;
  font-weight: 500;
}

.loy-nav-link:hover,
.loy-nav-link:focus {
  color: #fff !important;
}

.loy-main {
  min-height: calc(100vh - 90px);
}

.loy-card {
  border: 0;
  border-radius: var(--loy-radius-card);
  box-shadow: var(--loy-shadow-card);
}

.btn-primary,
.btn-loy {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--loy-color-brand);
  --bs-btn-border-color: var(--loy-color-brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--loy-color-brand-hover);
  --bs-btn-hover-border-color: var(--loy-color-brand-hover);
  --bs-btn-focus-shadow-rgb: var(--loy-color-brand-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--loy-color-brand-hover);
  --bs-btn-active-border-color: var(--loy-color-brand-hover);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--loy-color-brand);
  --bs-btn-disabled-border-color: var(--loy-color-brand);
}

.btn-outline-primary {
  --bs-btn-color: var(--loy-color-brand);
  --bs-btn-border-color: var(--loy-color-brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--loy-color-brand);
  --bs-btn-hover-border-color: var(--loy-color-brand);
  --bs-btn-focus-shadow-rgb: var(--loy-color-brand-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--loy-color-brand);
  --bs-btn-active-border-color: var(--loy-color-brand);
  --bs-btn-disabled-color: var(--loy-color-brand);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--loy-color-brand);
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--loy-color-brand-rgb), .55);
  box-shadow: 0 0 0 .25rem rgba(var(--loy-color-brand-rgb), .2);
}

.form-check-input:focus,
.accordion-button:focus,
.page-link:focus {
  border-color: rgba(var(--loy-color-brand-rgb), .55);
  box-shadow: 0 0 0 .25rem rgba(var(--loy-color-brand-rgb), .2);
}

.form-check-input:checked,
.form-check-input:indeterminate {
  background-color: var(--loy-color-brand);
  border-color: var(--loy-color-brand);
}

.progress-bar {
  background-color: var(--loy-color-brand);
}

.page-item.active .page-link,
.dropdown-item.active,
.dropdown-item:active,
.list-group-item.active {
  color: #fff;
  background-color: var(--loy-color-brand);
  border-color: var(--loy-color-brand);
}


/* ---------- Base da plataforma (redesign fase 2, 2026-10-16) ---------- */

body { -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-5, .display-6 {
  letter-spacing: -0.025em;
  font-weight: 700;
}

.text-muted { color: var(--loy-muted) !important; }

.loy-navbar {
  background: var(--loy-color-brand);
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.loy-navbar .navbar-brand { font-weight: 800; }

.loy-nav-link {
  position: relative;
  font-size: .94rem;
  border-radius: 8px;
}

.loy-nav-link.active,
.loy-nav-link[aria-current="page"],
.loy-navbar .dropdown.is-active > .loy-nav-link {
  color: #fff !important;
  background: rgba(255, 255, 255, .1);
}

@media (min-width: 992px) {
  .loy-navbar .navbar-nav { gap: .15rem; }
  .loy-nav-link { padding: .45rem .7rem !important; }
}

.loy-card {
  border: 1px solid var(--loy-line);
  box-shadow: var(--loy-shadow-card);
}

.btn { font-weight: 600; border-radius: 10px; }
.btn-sm { border-radius: 8px; }
.btn-lg { border-radius: 12px; }

.form-control,
.form-select { border-color: #d9dae5; }

.form-label { font-weight: 600; font-size: .92rem; }

.table > thead th {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--loy-muted);
}

.table-light,
.table > thead.table-light th { --bs-table-bg: #f7f7fb; }

.badge { font-weight: 600; letter-spacing: .01em; }

.dropdown-menu {
  border: 1px solid var(--loy-line);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .12);
  padding: .4rem;
}

.dropdown-item { border-radius: 8px; padding: .5rem .75rem; }

.alert { border-radius: 14px; }

/* Ícones de traço (SiteHelper#site_icon) dentro da plataforma. */
.loy-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  background: #f1f2f7;
  color: var(--loy-color-brand);
}

.loy-icon-violet { background: #ece8ff; color: #5b3bf5; }
.loy-icon-teal { background: #dcf7f7; color: #0b8f93; }
.loy-icon-orange { background: #fff0e3; color: #c95b05; }
.loy-icon-green { background: #def6ec; color: #12a26b; }
.loy-icon-lg { width: 48px; height: 48px; border-radius: 14px; }

/* ---------- Painel da empresa ---------- */

.loy-dash-hero {
  padding: 1.75rem 2rem;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--loy-line);
  box-shadow: var(--loy-shadow-card);
}

.loy-action-tile {
  height: 100%;
  padding: 1.25rem;
  border-radius: 16px;
  border: 1px solid var(--loy-line);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

a:hover > .loy-action-tile,
a:focus-visible > .loy-action-tile {
  border-color: rgba(var(--loy-color-brand-rgb), .35);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
  transform: translateY(-1px);
}

@media (max-width: 575.98px) {
  .loy-dash-hero { padding: 1.25rem; }
  .loy-dash-actions .btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .loy-action-tile { transition: none; }
}

/* No menu recolhido do celular o sino ocupava a linha toda e o contador
   "9+" ia parar na borda direita, longe do ícone. */
.loy-bell { display: inline-flex; align-self: flex-start; width: fit-content; padding: .45rem 0; }
@media (min-width: 992px) { .loy-bell { align-self: center; padding: 0; } }

/* ---------- Identidade do Loy na plataforma (D104, 2026-10-16) ----------
   Mesma linguagem do site: tinteiro com brilho nas cores do logo, violeta
   como cor de destaque, chips suaves no lugar de badges sólidos. Ações
   primárias continuam no tinteiro (D103). */

:root {
  --loy-ink: #0d0a22;
  --loy-violet: #5b3bf5;
  --loy-violet-hover: #3a23b8;
  --loy-violet-soft: #ece8ff;
  --loy-teal: #14bfc4;
  --loy-teal-soft: #dcf7f7;
  --loy-orange: #f97a16;
  --loy-orange-soft: #fff0e3;
  --loy-page-bg: #f5f4fa;

  --bs-link-color: var(--loy-violet);
  --bs-link-color-rgb: 91, 59, 245;
  --bs-link-hover-color: var(--loy-violet-hover);
  --bs-link-hover-color-rgb: 58, 35, 184;
  --bs-focus-ring-color: rgba(91, 59, 245, .25);
}

body:not(.loy-site) {
  background:
    radial-gradient(60rem 22rem at 8% -6rem, rgba(91, 59, 245, .09), transparent 70%),
    radial-gradient(48rem 20rem at 96% -4rem, rgba(20, 191, 196, .08), transparent 70%),
    var(--loy-page-bg);
  background-repeat: no-repeat;
}

/* Barra do topo: o mesmo tinteiro com brilho do site. */
.loy-navbar {
  position: relative;
  /* Eleva o contexto inteiro, incluindo dropdowns, acima dos cards isolados.
     1000 mantém a barra abaixo de barras fixas, backdrops e modais Bootstrap. */
  z-index: 1000;
  isolation: isolate;
  background: var(--loy-ink);
}

.loy-navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(30rem 8rem at 0% 0%, rgba(91, 59, 245, .45), transparent 70%),
    radial-gradient(26rem 7rem at 100% 0%, rgba(20, 191, 196, .22), transparent 70%);
}

.loy-navbar .navbar-collapse { position: relative; }

.loy-nav-link.active,
.loy-nav-link[aria-current="page"],
.loy-navbar .dropdown.is-active > .loy-nav-link {
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 -2px 0 #a996ff;
}

/* Rótulo pequeno acima do título da página vira o "eyebrow" do site. */
main p.text-muted:has(+ h1),
main p.text-muted:has(+ .h1),
main p.text-muted:has(+ h2.h3) {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--loy-violet) !important;
}

main h1, main .h1 { letter-spacing: -0.035em; }

/* Links, foco, seleção e progresso no violeta da marca. */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.badge):not(.page-link) {
  text-underline-offset: 3px;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.page-link:focus,
.accordion-button:focus {
  border-color: rgba(91, 59, 245, .55);
  box-shadow: 0 0 0 .25rem rgba(91, 59, 245, .18);
}

.form-check-input:checked,
.form-check-input:indeterminate {
  background-color: var(--loy-violet);
  border-color: var(--loy-violet);
}

.progress { background-color: #ebe8f7; }
.progress-bar { background: linear-gradient(90deg, var(--loy-violet), #4fd6da); }

.page-item.active .page-link {
  background-color: var(--loy-violet);
  border-color: var(--loy-violet);
}

.page-link { color: var(--bs-body-color); }

.dropdown-item.active,
.dropdown-item:active,
.list-group-item.active {
  background-color: var(--loy-violet-soft);
  border-color: var(--loy-violet-soft);
  color: var(--loy-violet-hover);
}

/* Chips suaves no lugar dos badges sólidos — mesmo significado de cor. */
.badge.text-bg-success { background-color: #def6ec !important; color: #0b7a4f !important; }
.badge.text-bg-warning { background-color: #fff2d6 !important; color: #8a5a00 !important; }
.badge.text-bg-danger { background-color: #fde4e4 !important; color: #b42318 !important; }
.badge.text-bg-info { background-color: var(--loy-teal-soft) !important; color: #0b7f83 !important; }
.badge.text-bg-primary { background-color: var(--loy-violet-soft) !important; color: var(--loy-violet-hover) !important; }
.badge.text-bg-secondary { background-color: #eceef3 !important; color: #4b5064 !important; }
.badge.text-bg-dark { background-color: var(--loy-violet-soft) !important; color: var(--loy-violet-hover) !important; }
.badge.text-bg-light { background-color: #fff !important; color: var(--bs-body-color) !important; }
.badge.bg-danger.rounded-pill { background-color: #e5484d !important; color: #fff !important; }

.badge { border-radius: 999px; padding: .38em .7em; }

/* Ações secundárias pequenas das tabelas ("Ver", "Editar"). */
.btn-outline-secondary,
.btn-outline-dark {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: #d6d7e3;
  --bs-btn-hover-bg: #f1f0f8;
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-border-color: #c4c3d6;
  --bs-btn-active-bg: #e9e7f5;
  --bs-btn-active-color: var(--bs-body-color);
  background: #fff;
}

/* Cabeçalho das tabelas e cartões com o tom da marca. */
.table > thead th,
.table-light th { background-color: #f7f6fb !important; }

.loy-card { border-radius: 20px; }

.card-header {
  background: #fff;
  border-bottom-color: var(--loy-line);
}

/* Destaque escuro reaproveitável (blocos como "Sua próxima melhor ação"). */
.bg-dark,
.text-bg-dark:not(.badge) {
  background-color: var(--loy-ink) !important;
}

/* Bloco de destaque com a assinatura visual do site: tinteiro, brilho
   violeta/turquesa/laranja e grade sutil. Topo do painel e do Mapa. */
.loy-brand-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: var(--loy-ink) !important;
  border: 0 !important;
  box-shadow: 0 24px 50px rgba(13, 10, 34, .18) !important;
}

.loy-brand-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(34rem 18rem at 0% 0%, rgba(91, 59, 245, .55), transparent 70%),
    radial-gradient(26rem 16rem at 100% 20%, rgba(20, 191, 196, .28), transparent 70%),
    radial-gradient(22rem 12rem at 75% 130%, rgba(249, 122, 22, .25), transparent 70%);
}

.loy-brand-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 30% 0%, #000 15%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 0%, #000 15%, transparent 70%);
}

.loy-brand-panel h1,
.loy-brand-panel h2,
.loy-brand-panel strong { color: #fff; }

.loy-brand-panel-muted,
.loy-brand-panel .text-muted { color: rgba(255, 255, 255, .72) !important; }

.loy-brand-panel .border-top { border-color: rgba(255, 255, 255, .14) !important; }
.loy-brand-panel a:not(.btn):not(.badge) { color: #c9bdff; }
.loy-brand-panel .badge.text-bg-light { background: rgba(255, 255, 255, .12) !important; color: #fff !important; border-color: rgba(255, 255, 255, .2) !important; }

.loy-brand-panel .btn-outline-light {
  --bs-btn-border-color: rgba(255, 255, 255, .3);
  --bs-btn-hover-bg: rgba(255, 255, 255, .1);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: rgba(255, 255, 255, .6);
}

.loy-brand-panel .btn-light { --bs-btn-color: var(--loy-ink); }

.loy-chart-bar { background: linear-gradient(180deg, #8f7bff, var(--loy-violet)); }

.alert-info {
  --bs-alert-bg: var(--loy-teal-soft);
  --bs-alert-color: #0b6f73;
  --bs-alert-border-color: #bfeeee;
}

.alert-primary {
  --bs-alert-bg: var(--loy-violet-soft);
  --bs-alert-color: var(--loy-violet-hover);
  --bs-alert-border-color: #d9d1ff;
}

/* Estado vazio padrão (shared/_empty_state). */
.loy-empty-state {
  max-width: 520px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  text-align: center;
}

/* Prévia de fidelidade no novo atendimento. */
.loy-preview {
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: var(--loy-violet-soft);
  border: 1px solid #ddd5ff;
}

.loy-preview-title {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--loy-violet-hover);
  margin-bottom: .5rem;
}

.loy-preview-row + .loy-preview-row { margin-top: .85rem; padding-top: .85rem; border-top: 1px solid #ddd5ff; }
.loy-preview .progress { background: #fff; }
.loy-preview-win { color: #0b7a4f; font-weight: 600; }

/* Cartão fidelidade do cliente — o mesmo desenho do cartão da landing. */
.loy-loyalty-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 1.4rem 1.4rem 1.5rem;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(140deg, #5b3bf5, #3a23b8 60%, #241677);
  box-shadow: 0 16px 32px rgba(91, 59, 245, .3);
}

.loy-loyalty-card::after {
  content: "";
  position: absolute;
  inset: auto -30% -60% auto;
  width: 70%;
  height: 120%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(95, 224, 227, .35), transparent 65%);
}

.loy-loyalty-card .text-muted {
  color: rgba(255, 255, 255, .78) !important;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.loy-loyalty-card h2 {
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.loy-loyalty-track {
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  overflow: hidden;
}

.loy-loyalty-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5fe0e3, #fff);
}
.loy-loyalty-card-note { color: rgba(255, 255, 255, .8); }
.loy-loyalty-card-note strong { color: #fff; }

/* Barra inferior da empresa no celular (layouts/_mobile_tabbar). */
.loy-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--loy-line);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, .06);
}

.loy-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .3rem 0;
  border: 0;
  background: none;
  color: var(--loy-muted);
  font-size: .7rem;
  font-weight: 600;
  text-decoration: none;
}

.loy-tab.active { color: var(--loy-violet); }
.loy-tab:focus-visible { outline: 2px solid var(--loy-violet); outline-offset: 2px; border-radius: 10px; }

.loy-tab-primary { color: var(--loy-ink); }

.loy-tab-plus {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-top: -1.4rem;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(140deg, #5b3bf5, #3a23b8);
  box-shadow: 0 10px 22px rgba(91, 59, 245, .35);
}

@media (max-width: 991.98px) {
  body:has(.loy-tabbar) { padding-bottom: 84px; }
}