@import url("https://fonts.googleapis.com/css2?family=Alyamama:wght@300..900&family=Archivo+Black&family=Archivo:ital,wght@0,100..900;1,100..900&family=Bebas+Neue&family=Fira+Code:wght@300..700&family=Montserrat+Underline:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@1,500&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playwrite+IE:wght@100..400&family=Quicksand:wght@300..700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Cores padrão */
:root {
  --bg-gradient: linear-gradient(135deg, #dbeafe 0%, #fae8ff 50%, #fce7f3 100%);
  --primary-color: #13577c;
  --secondary-color: #ffffff;
  --accent-color1: #b963b9;
  --accent-color2: #cd91f0;
  --accent-color3: #d386da;
  --slogan-color: rgb(0, 0, 0);
  --nav-btn-color: linear-gradient(
    135deg,
    #dbeafe 0%,
    #fae8ff 50%,
    #fce7f3 100%
  );
  --svg-btn-color: black;
  --hover-color: #006eeb;
  --img-color: brightness(1) invert(0);
  --bg-reflexivecard: #f1f7ff 100%;
  --input-color: black;
  --svg-expand-color: white;
}

/* TEMA PRETO */
body.theme-preto {
  --bg-gradient: linear-gradient(
    135deg,
    rgb(25, 25, 25) 0%,
    rgb(31, 31, 31) 50%,
    rgb(26, 26, 26) 100%
  );
  --primary-color: #dde3eb;
  --secondary-color: #181616;
  --accent-color1: #444444;
  --accent-color2: #3b3636;
  --accent-color3: #302929;
  --slogan-color: white;
  --svg-edit-color: brightness(0) saturate(100%) invert(95%) sepia(8%)
    saturate(270%) hue-rotate(182deg) brightness(96%) contrast(92%);
  --nav-btn-color: linear-gradient(
    135deg,
    rgb(25, 25, 25) 0%,
    rgb(31, 31, 31) 50%,
    rgb(26, 26, 26) 100%
  );
  --svg-btn-color: #dde3eb;
  --hover-color: #464646;
  --label-hover-color: #dde3eb;
  --img-color: brightness(0) invert(1);
  --bg-reflexivecard: rgb(23, 23, 23, 1);
  --input-color: white;
  --svg-expand-color: black;
}

/* TEMA VERDE */
body.theme-verde {
  --bg-gradient: linear-gradient(
    135deg,
    rgba(6, 102, 43, 1) 0%,
    rgba(9, 143, 60, 1) 50%,
    rgba(5, 115, 47, 1) 100%
  );
  --primary-color: #b4ebc9;
  --secondary-color: black;
  --accent-color: #86efac;
  --accent-color1: #275331;
  --accent-color2: #036911;
  --accent-color3: #2a7e43;
  --slogan-color: rgb(255, 255, 255);
  --svg-edit-color: brightness(0) saturate(100%) invert(94%) sepia(9%)
    saturate(171%) hue-rotate(176deg) brightness(95%) contrast(94%);
  --nav-btn-color: linear-gradient(
    135deg,
    rgba(6, 102, 43, 1) 0%,
    rgba(9, 143, 60, 1) 50%,
    rgba(5, 115, 47, 1) 100%
  );
  --svg-btn-color: #dde3eb;
  --hover-color: #a9ffa9;
  --label-hover-color: #000000;
  --img-color: brightness(0) invert(1);
  --bg-reflexivecard: #275331 100%;
  --input-color: white;
  --svg-expand-color: black;
}

/* TEMA-AZUL */
body.theme-azul {
  --bg-gradient: linear-gradient(
    135deg,
    rgba(12, 43, 78, 1) 0%,
    rgba(26, 65, 115, 1) 50%,
    rgba(12, 43, 78, 1) 100%
  );
  --primary-color: #408fb4;
  --secondary-color: black;
  --accent-color1: #0e57c5;
  --accent-color2: #1965a3;
  --accent-color3: #283db3;
  --slogan-color: white;
  --svg-edit-color: brightness(0) saturate(100%) invert(95%) sepia(8%)
    saturate(270%) hue-rotate(182deg) brightness(96%) contrast(92%);
  --nav-btn-color: linear-gradient(
    135deg,
    rgba(12, 43, 78, 1) 0%,
    rgba(26, 65, 115, 1) 50%,
    rgba(12, 43, 78, 1) 100%
  );
  --svg-btn-color: #dde3eb;
  --hover-color: #0059be;
  --label-hover-color: #dde3eb;
  --img-color: brightness(0) invert(1);
  --bg-reflexivecard: rgba(12, 43, 78, 1) 100%;
  --input-color: white;
  --svg-expand-color: black;
}

/* TEMA VERMELHO */
body.theme-vermelho {
  --bg-gradient: linear-gradient(
    135deg,
    rgb(169 49 49) 0%,
    rgb(243 45 45) 50%,
    rgb(137 13 13) 100%
  );
  --primary-color: linear-gradient(
    135deg,
    rgb(25, 25, 25) 0%,
    rgb(31, 31, 31) 50%,
    rgb(26, 26, 26) 100%
  );
  --secondary-color: white;
  --accent-color1: #790a13;
  --accent-color2: #a11e3a;
  --accent-color3: #b83a3a;
  --slogan-color: white;
  --svg-edit-color: brightness(0) saturate(100%) invert(95%) sepia(8%)
    saturate(270%) hue-rotate(182deg) brightness(96%) contrast(92%);
  --nav-btn-color: linear-gradient(
    135deg,
    rgb(161, 8, 8) 0%,
    rgb(191, 25, 25) 50%,
    rgb(148, 4, 4) 100%
  );
  --svg-btn-color: #dde3eb;
  --hover-color: #c54040;
  --bg-reflexivecard: rgb(191, 25, 25, 0.5);
  --input-color: black;
  --svg-expand-color: black;
}

/* TEMA ROXO */
body.theme-roxo {
  --bg-gradient: linear-gradient(
    135deg,
    rgb(99 21 117 / 91%) 0%,
    rgb(114 17 179 / 96%) 50%,
    rgb(63 8 123 / 91%) 100%
  );
  --primary-color: linear-gradient(
    135deg,
    rgb(25, 25, 25) 0%,
    rgb(31, 31, 31) 50%,
    rgb(26, 26, 26) 100%
  );
  --secondary-color: white;
  --accent-color1: #7d34c2;
  --accent-color2: #5f2892;
  --accent-color3: #954ed8;
  --slogan-color: white;
  --svg-edit-color: brightness(0) saturate(100%) invert(95%) sepia(8%)
    saturate(270%) hue-rotate(182deg) brightness(96%) contrast(92%);
  --nav-btn-color: linear-gradient(
    135deg,
    rgba(125, 2, 153, 0.91) 0%,
    rgba(103, 2, 171, 0.96) 50%,
    rgba(63, 0, 130, 0.91) 100%
  );
  --svg-btn-color: black;
  --hover-color: #954ed8;
  --bg-reflexivecard: rgba(63, 0, 130, 0.2);
  --input-color: black;
  --svg-expand-color: black;
}

/* TEMA AMARELO */
body.theme-amarelo {
  --bg-gradient: linear-gradient(
    135deg,
    rgba(242, 235, 31, 1) 0%,
    rgba(252, 246, 58, 1) 50%,
    rgba(232, 225, 19, 1) 100%
  );
  --primary-color: linear-gradient(
    135deg,
    rgb(25, 25, 25) 0%,
    rgb(31, 31, 31) 50%,
    rgb(26, 26, 26) 100%
  );
  --secondary-color: white;
  --accent-color1: #ddff45;
  --accent-color2: #ebf74f;
  --accent-color3: #ecff40;
  --slogan-color: rgb(0, 0, 0);
  --nav-btn-color: linear-gradient(
    135deg,
    rgba(242, 235, 31, 1) 0%,
    rgba(252, 246, 58, 1) 50%,
    rgba(232, 225, 19, 1) 100%
  );
  --svg-btn-color: black;
  --hover-color: #ffee91;
  --bg-reflexivecard: rgba(232, 225, 19, 0.9);
  --input-color: black;
  --svg-expand-color: white;
}


/* TEMA CREME */
body.theme-creme {
  --bg-gradient: linear-gradient(135deg,rgba(255, 250, 250, 1) 0%, rgba(255, 250, 250, 0.91) 50%, rgba(255, 250, 250, 1) 100%);
  --primary-color: linear-gradient(
    135deg,
    rgb(167, 167, 167) 0%,
    rgb(167, 167, 167) 50%,
    rgb(167, 167, 167) 100%
  );
  --secondary-color: white;
  --accent-color1: #e2e1df;
  --accent-color2: #e9e2d8;
  --accent-color3: #dfd8cf;
  --slogan-color: rgb(0, 0, 0);
  --nav-btn-color: linear-gradient(135deg,rgba(255, 250, 250, 1) 0%, rgba(255, 250, 250, 0.91) 50%, rgba(255, 250, 250, 1) 100%);
  --svg-btn-color: black;
  --hover-color: #f0e9e0;
  --bg-reflexivecard: #ececec;
  --input-color: black;
  --svg-expand-color: white;
}
body.theme-rosa {
  --bg-gradient: linear-gradient(135deg,rgba(251, 239, 245, 1) 0%, rgba(255, 214, 237, 0.91) 50%, rgba(227, 227, 227, 1) 100%);
  --primary-color: linear-gradient(135deg,rgb(255, 190, 222) 0%, rgb(255, 190, 222) 50%, rgb(255, 190, 222) 100%);
  --secondary-color: white;
  --accent-color1: #FFD6ED;
  --accent-color2: #f3bbda;
  --accent-color3: #e8d8e1;
  --slogan-color: rgb(0, 0, 0);
  --nav-btn-color: linear-gradient(135deg,rgb(238, 180, 209) 0%, rgb(238, 180, 209) 50%, rgb(238, 180, 209) 100%);
  --svg-btn-color: black;
  --hover-color: #f3bbda;
  --bg-reflexivecard: #FFD6ED;
  --input-color: black;
  --svg-expand-color: white;
}

body.theme-marrom{
    --bg-gradient: linear-gradient(135deg,rgba(153, 98, 30, 1) 0%, rgba(117, 88, 50, 0.91) 50%, rgba(128, 91, 46, 1) 100%);
  --primary-color: linear-gradient(135deg,rgb(105, 63, 12) 0%, rgb(92, 56, 12) 50%, rgb(85, 53, 14) 100%);
  --secondary-color: #fff;
  --accent-color1: #e49e73;
  --accent-color2: #c98f6b;
  --accent-color3: #9b6c4f;
  --slogan-color: rgb(255, 255, 255);
  --nav-btn-color: linear-gradient(135deg,rgb(105, 63, 12) 0%, rgb(92, 56, 12) 50%, rgb(85, 53, 14) 100%);
  --svg-btn-color: black;
  --hover-color: #754f37;
  --bg-reflexivecard: #754f37;
  --input-color: black;
  --svg-expand-color: black;
}

/* AMBIENTE OCEANO */
body.bgp-ocean {
  --bg-gradient: linear-gradient(180deg, #eff6ff 0%, #dbeafe 60%, #ede9fe 100%);
  --primary-color: #1e3a8a;
  --secondary-color: #ffffff;
  --accent-color1: #3b82f6;
  --accent-color2: #60a5fa;
  --accent-color3: #93c5fd;
  --slogan-color: #1e3a8a;
  --nav-btn-color: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 50%, #ddd6fe 100%);
  --svg-btn-color: #1e3a8a;
  --hover-color: #2563eb;
  --label-hover-color: #ffffff;
  --img-color: brightness(1) invert(0);
  --bg-reflexivecard: rgba(219, 234, 254, 0.85);
  --input-color: #0c2461;
  --svg-expand-color: #ffffff;
}

/* AMBIENTE FLORESTA */
body.bgp-forest {
  --bg-gradient: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 60%, #fefce8 100%);
  --primary-color: #166534;
  --secondary-color: #ffffff;
  --accent-color1: #22c55e;
  --accent-color2: #4ade80;
  --accent-color3: #facc15;
  --slogan-color: #14532d;
  --nav-btn-color: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 50%, #fef9c3 100%);
  --svg-btn-color: #166534;
  --hover-color: #16a34a;
  --label-hover-color: #ffffff;
  --img-color: brightness(1) invert(0);
  --bg-reflexivecard: rgba(220, 252, 231, 0.85);
  --input-color: #14532d;
  --svg-expand-color: #ffffff;
}

/* AMBIENTE PÔR-DO-SOL */
body.bgp-sunset {
  --bg-gradient: linear-gradient(180deg, #fff7ed 0%, #fdf2f8 50%, #faf5ff 100%);
  --primary-color: #9d174d;
  --secondary-color: #ffffff;
  --accent-color1: #f97316;
  --accent-color2: #ec4899;
  --accent-color3: #8b5cf6;
  --slogan-color: #831843;
  --nav-btn-color: linear-gradient(135deg, #ffedd5 0%, #fce7f3 50%, #ede9fe 100%);
  --svg-btn-color: #831843;
  --hover-color: #db2777;
  --label-hover-color: #ffffff;
  --img-color: brightness(1) invert(0);
  --bg-reflexivecard: rgba(253, 242, 248, 0.88);
  --input-color: #500724;
  --svg-expand-color: #ffffff;
}

/* AMBIENTE AREIA */
body.bgp-sand {
  --bg-gradient: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  --primary-color: #92400e;
  --secondary-color: #ffffff;
  --accent-color1: #d97706;
  --accent-color2: #fbbf24;
  --accent-color3: #f59e0b;
  --slogan-color: #78350f;
  --nav-btn-color: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
  --svg-btn-color: #78350f;
  --hover-color: #b45309;
  --label-hover-color: #ffffff;
  --img-color: brightness(1) invert(0);
  --bg-reflexivecard: rgba(254, 243, 199, 0.9);
  --input-color: #451a03;
  --svg-expand-color: #ffffff;
}

/* AMBIENTE NOITE */
body.bgp-night {
  --bg-gradient: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  --primary-color: #c7d2fe;
  --secondary-color: #0f172a;
  --accent-color1: #6366f1;
  --accent-color2: #4f46e5;
  --accent-color3: #6d28d9;
  --slogan-color: #e0e7ff;
  --svg-edit-color: brightness(0) saturate(100%) invert(95%) sepia(8%) saturate(270%) hue-rotate(182deg) brightness(96%) contrast(92%);
  --nav-btn-color: linear-gradient(135deg, #1e293b 0%, #312e81 50%, #4338ca 100%);
  --svg-btn-color: #e0e7ff;
  --hover-color: #818cf8;
  --label-hover-color: #ffffff;
  --img-color: brightness(0) invert(1);
  --bg-reflexivecard: rgba(30, 41, 59, 0.85);
  --input-color: #f8fafc;
  --svg-expand-color: #0f172a;
}

/* AMBIENTE MEIA-NOITE (roxo escuro) */
body.bgp-midnight {
  --bg-gradient: linear-gradient(180deg, #1a1033 0%, #2d1b4e 100%);
  --primary-color: #ddd6fe;
  --secondary-color: #1a1033;
  --accent-color1: #7c3aed;
  --accent-color2: #8b5cf6;
  --accent-color3: #a78bfa;
  --slogan-color: #ede9fe;
  --svg-edit-color: brightness(0) saturate(100%) invert(89%) sepia(12%) saturate(900%) hue-rotate(213deg) brightness(101%) contrast(96%);
  --nav-btn-color: linear-gradient(135deg, #2d1b4e 0%, #4c1d95 50%, #6d28d9 100%);
  --svg-btn-color: #ede9fe;
  --hover-color: #a78bfa;
  --label-hover-color: #ffffff;
  --img-color: brightness(0) invert(1);
  --bg-reflexivecard: rgba(45, 27, 78, 0.85);
  --input-color: #f8fafc;
  --svg-expand-color: #1a1033;
}

/* AMBIENTE GRAFITE (cinza escuro neutro) */
body.bgp-charcoal {
  --bg-gradient: linear-gradient(180deg, #18181b 0%, #27272a 100%);
  --primary-color: #e4e4e7;
  --secondary-color: #18181b;
  --accent-color1: #71717a;
  --accent-color2: #a1a1aa;
  --accent-color3: #52525b;
  --slogan-color: #f4f4f5;
  --svg-edit-color: brightness(0) invert(1);
  --nav-btn-color: linear-gradient(135deg, #27272a 0%, #3f3f46 50%, #52525b 100%);
  --svg-btn-color: #f4f4f5;
  --hover-color: #a1a1aa;
  --label-hover-color: #ffffff;
  --img-color: brightness(0) invert(1);
  --bg-reflexivecard: rgba(39, 39, 42, 0.85);
  --input-color: #fafafa;
  --svg-expand-color: #18181b;
}

/* AMBIENTE ESMERALDA (verde escuro) */
body.bgp-emerald-dark {
  --bg-gradient: linear-gradient(180deg, #022c22 0%, #064e3b 100%);
  --primary-color: #a7f3d0;
  --secondary-color: #022c22;
  --accent-color1: #10b981;
  --accent-color2: #34d399;
  --accent-color3: #059669;
  --slogan-color: #d1fae5;
  --svg-edit-color: brightness(0) saturate(100%) invert(86%) sepia(20%) saturate(560%) hue-rotate(96deg) brightness(95%) contrast(92%);
  --nav-btn-color: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #047857 100%);
  --svg-btn-color: #d1fae5;
  --hover-color: #34d399;
  --label-hover-color: #ffffff;
  --img-color: brightness(0) invert(1);
  --bg-reflexivecard: rgba(6, 78, 59, 0.85);
  --input-color: #f0fdf4;
  --svg-expand-color: #022c22;
}

/* AMBIENTE VINHO (vermelho escuro) */
body.bgp-wine {
  --bg-gradient: linear-gradient(180deg, #1f0a0f 0%, #4c0519 100%);
  --primary-color: #fecdd3;
  --secondary-color: #1f0a0f;
  --accent-color1: #e11d48;
  --accent-color2: #f43f5e;
  --accent-color3: #be123c;
  --slogan-color: #ffe4e6;
  --svg-edit-color: brightness(0) saturate(100%) invert(82%) sepia(18%) saturate(900%) hue-rotate(300deg) brightness(101%) contrast(96%);
  --nav-btn-color: linear-gradient(135deg, #4c0519 0%, #881337 50%, #9f1239 100%);
  --svg-btn-color: #ffe4e6;
  --hover-color: #fb7185;
  --label-hover-color: #ffffff;
  --img-color: brightness(0) invert(1);
  --bg-reflexivecard: rgba(76, 5, 25, 0.85);
  --input-color: #fff1f2;
  --svg-expand-color: #1f0a0f;
}

body {
  background: var(--bg-gradient) !important;
  transition: background 0.5s ease;
}

footer {
  color: var(--slogan-color) !important;
}

.footerline {
  border: 1px solid var(--slogan-color);
}

.footerline-card {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 1px !important;
  background: color-mix(in srgb, var(--slogan-color) 45%, transparent);
  margin: 14px auto;
  opacity: 0.7;
}

.editsvg {
  filter: var(--svg-edit-color) !important;
}

.blob-1 {
  background-color: var(--accent-color1);
}
.blob-2 {
  background-color: var(--accent-color2);
}
.blob-3 {
  background-color: var(--accent-color3);
}

.navigation-panel,
.user-button,
.user-dropdown-header {
  background: var(--primary-color) !important;
  transition: background 0.5s ease;
  font-family: "Fira Code", sans-serif;
}

.slogan {
  color: var(--slogan-color) !important;
}

.userbtncolor {
  stroke: var(--secondary-color);
}

.user-dropdown-status {
  color: var(--secondary-color) !important;
}

.user-dropdown-header {
  color: var(--secondary-color) !important;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

.blob-container {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  width: 288px;
  height: 288px;
  border-radius: 50%;
  mix-blend-mode: multiply;
  filter: blur(64px);
  opacity: 0.3;
  animation: blob 7s infinite;
}

.blob-1 {
  top: 80px;
  left: 80px;
}

.blob-2 {
  top: 160px;
  right: 80px;
  animation-delay: 2s;
}

.blob-3 {
  bottom: 80px;
  left: 33%;
  animation-delay: 4s;
}

@keyframes blob {
  0%,
  100% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}

header {
  position: fixed;
  z-index: 1;
  width: 100%;
  padding: 24px 32px;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
}

.user-button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #2e93c9;
  background: linear-gradient(
    156deg,
    rgba(46, 147, 201, 1) 0%,
    rgba(18, 114, 166, 1) 50%,
    rgba(19, 87, 124, 1) 100%
  );
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
}

.user-button:hover {
  background: #2e93c9;
  background: linear-gradient(
    156deg,
    rgb(25, 132, 190) 0%,
    rgb(2, 57, 87) 50%,
    rgba(19, 87, 124, 1) 100%
  );
  transition: all 0.5s ease;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

.user-button svg {
  width: 24px;
  height: 24px;
  color: white;
}

.user-dropdown {
  position: absolute;
  right: 0;
  width: 520px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  pointer-events: none;
  transition: all 0.2s ease;
}

.user-dropdown.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

@media (max-width: 480px) {
  .user-dropdown {
    width: calc(100% - 40px); /* Garante 20px de respiro de cada lado */
    top: 60px; /* Pode diminuir um pouco o topo em celulares */
  }

  /* Opcional: Ajustar o grid interno para economizar espaço */
  .user-dropdown-body {
    padding: 12px;
  }
}

.user-dropdown-overlay {
  position: fixed;
  inset: 0;
  display: none;
}

.user-dropdown-overlay.active {
  display: block;
}

.user-dropdown-header {
  background: #2e93c9;
  background: linear-gradient(
    156deg,
    rgba(46, 147, 201, 1) 0%,
    rgba(18, 114, 166, 1) 50%,
    rgba(19, 87, 124, 1) 100%
  );
  padding: 24px;
  color: white;
}

.user-dropdown-header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-dropdown-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-dropdown-avatar svg {
  width: 32px;
  height: 32px;
}

.user-dropdown-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 4px;
  width: 270px;
}

.user-dropdown-status {
  font-size: 14px;
  color: #bfbeee;
}

.user-dropdown-body {
  padding: 24px;
}

.user-info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: #374151;
}

.user-info-item:last-child {
  margin-bottom: 0;
}

.user-info-icon {
  width: 20px;
  height: 20px;
}

.user-info-icon.mail {
  color: #3b82f6;
}
.user-info-icon.phone {
  color: #9333ea;
}
.user-info-icon.location {
  color: #10b981;
}
.user-info-icon.calendar {
  color: #f59e0b;
}

.user-info-text {
  font-size: 14px;
}

.user-dropdown-footer {
  padding: 0 24px 24px;
}

main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
  padding: 30px 16px 80px;
  width: 100%;
}

.navigation-panel {
  width: 100%;
  max-width: 768px;
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding: 32px;
  /* border: 4px solid white; */
  position: relative;
  animation: panelFadeIn 0.5s ease;
  z-index: 1;
  margin: 0;
  box-sizing: border-box;
}

@keyframes panelFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.panel-corner-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  background: linear-gradient(
    135deg,
    rgba(96, 165, 250, 0.2) 0%,
    transparent 100%
  );
  border-radius: 24px 0 0 0;
}

.panel-corner-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: linear-gradient(
    -45deg,
    rgba(192, 132, 252, 0.2) 0%,
    transparent 100%
  );
  border-radius: 0 0 24px 0;
}

.navigation-buttons {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nav-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon label actions";
  align-items: center;
  column-gap: clamp(8px, 2.5vw, 16px);
  row-gap: 2px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: clamp(10px, 2.5vw, 16px) clamp(12px, 4vw, 24px);
  background: #ffffff;
  background: linear-gradient(
    156deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(247, 253, 255, 1) 50%,
    rgba(237, 250, 255, 1) 100%
  );
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
  /* Estado inicial — botão "escondido" até o .nav-group entrar na viewport.
     A revelação é disparada por JS adicionando .is-revealed em .nav-group
     (IntersectionObserver, análogo ao AOS). */
  opacity: 0;
  will-change: transform, opacity;
  transform: translateY(40px) scale(0.85);
}

.nav-group.is-revealed .nav-button {
  animation: buttonFadeIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: var(--button-enter-delay, 80ms);
}

.nav-button-icon {
  svg {
    color: var(--svg-btn-color) !important;
  }
}

.nav-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
  transform: scale(1.15) translateY(-4px) !important;
  transition: all 0.5s ease !important;
  background: var(--hover-color) !important;
  color: var(--label-hover-color) !important;
  opacity: 0;
  z-index: -1;
}

.nav-button:hover::before {
  opacity: 1;
}

/* Stagger leve para os sub-botões dentro de um grupo expandido */
.child-buttons-container > .nav-button:nth-child(2) { animation-delay: 100ms; }
.child-buttons-container > .nav-button:nth-child(3) { animation-delay: 170ms; }
.child-buttons-container > .nav-button:nth-child(4) { animation-delay: 240ms; }
.child-buttons-container > .nav-button:nth-child(n+5) { animation-delay: 310ms; }

/* Animação de entrada zoom-in-up — aplicada individualmente a cada botão */
@keyframes buttonFadeIn {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Stagger entre os botões principais (cada .nav-group é um botão pai).
   Cada .nav-button herda --button-enter-delay do .nav-group ancestral. */
.nav-group:nth-child(1) { --button-enter-delay: 80ms; }
.nav-group:nth-child(2) { --button-enter-delay: 150ms; }
.nav-group:nth-child(3) { --button-enter-delay: 220ms; }
.nav-group:nth-child(4) { --button-enter-delay: 290ms; }
.nav-group:nth-child(5) { --button-enter-delay: 360ms; }
.nav-group:nth-child(6) { --button-enter-delay: 430ms; }
.nav-group:nth-child(7) { --button-enter-delay: 500ms; }
.nav-group:nth-child(8) { --button-enter-delay: 570ms; }
.nav-group:nth-child(n+9) { --button-enter-delay: 640ms; }

.nav-button:active {
  transform: scale(0.95) translateY(0);
  transition: transform 0.15s ease;
}

.nav-button-icon {
  grid-area: icon;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease !important;
  border-radius: 12px;
  flex-shrink: 0;
}



.nav-button:hover .nav-button-icon svg {
  /* background: #2e93c9;
    background: linear-gradient(156deg, rgb(25, 132, 190) 0%, rgb(2, 57, 87) 50%, rgba(19, 87, 124, 1) 100%); */
  color: black;
}

.nav-button:hover .nav-button-label {
  color: var(--slogan-color) !important;
}

.nav-button-icon svg {
  width: 24px;
  height: 24px;
  color: rgb(255, 255, 255);
}


.nav-button-label {
  grid-area: label;
  font-size: clamp(0.875rem, 3.6vw, 1.125rem);
  line-height: 1.25;
  font-weight: 500;
  color: linear-gradient(
    156deg,
    rgb(25, 132, 190) 0%,
    rgb(2, 57, 87) 50%,
    rgba(19, 87, 124, 1) 100%
  );
  transition: color 0.3s ease;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.nav-button:has(.nav-button-subtitle:not([hidden])) {
  grid-template-areas:
    "icon label    actions"
    "icon subtitle actions";
}

.nav-button:has(.nav-button-subtitle:not([hidden])) .nav-button-label {
  align-self: end;
}
#header {
  position: absolute;
  z-index: 10;
  width: 100%;
  padding: 24px 32px;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  header {
    padding: 16px;
  }

  .navigation-panel {
    padding: 24px;
  }

  .nav-button {
    padding: 10px 14px;
  }

  .nav-button-icon {
    width: 40px;
    height: 40px;
  }

  .nav-button-icon svg {
    width: 20px;
    height: 20px;
  }

  .user-dropdown {
    width: calc(95vw - 32px);
    top: 5vh;
    right: 0vh;
  }
}

@media (max-width: 480px) {
  .nav-button {
    padding: 8px 12px;
  }

  .nav-button-icon {
    width: 36px;
    height: 36px;
  }

  .nav-button-icon svg {
    width: 18px;
    height: 18px;
  }
}

@media (min-width: 800px) {
  .user-dropdown {
    top: 4vh;
    right: 10vh;
  }
}

.tooltip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tooltip-wrapper::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);

  background: rgba(30, 41, 59, 0.95);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  white-space: nowrap;
  color: white;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.tooltip-wrapper:hover::after,
.tooltip-wrapper:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.tooltip-wrapper.bottom::after {
  top: 100%;
  bottom: auto;
  margin-top: 10px;
  margin-bottom: 0;
}

.tooltip-wrapper.bottom::before {
  top: 100%;
  bottom: auto;
  margin-top: 4px;
  margin-bottom: 0;
  border-color: transparent transparent #13577c transparent;
}

.tooltip-wrapper.bottom:hover::after {
  margin-top: 15px;
}
.tooltip-wrapper.bottom:hover::before {
  margin-top: 9px;
}

footer {
  text-align: center;
  padding-bottom: 20px;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 350;
  font-style: italic;
  width: 100%;
  padding-top: 3.5vh;
}

.footerdiv{
  width: 80%;
  background: color-mix(in srgb, var(--slogan-color) 30%, transparent);
  border-radius: 24px;
  height: 0.2vh;
}

.slogan {
  font-family: "Fira Code", monospace;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  text-transform: uppercase;
  text-shadow: 0 1px 1.5px var(--slogan-color) !important;
  font-size: clamp(14px, 1.2vw, 20px) !important;
  letter-spacing: 2px;
}

.footerline {
  display: inline-block;
  margin: 10px 0;
  width: 100%;
  height: 10%;
}

.video-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 140px;
  border: 0;
}

.wppbtn {
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 0 30px 30px 0;
  z-index: 1;
  cursor: pointer;
}

.swal2-popup {
  border-radius: 20px !important;
  backdrop-filter: blur(6px);
  background: var(--bg-gradient) !important;
  color: var(--secondary-color) !important;
  border: 1px solid rgba(38, 155, 218, 0.37);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
  text-align: center;
  color: var(--slogan-color) !important;
}

.swal2-title {
  color: var(--slogan-color) !important;
  font-weight: 600;
}

.swal2-input {
  border-radius: 10px !important;
  border: 1px solid #ddd !important;
  box-shadow: none !important;
  transition: border-color 0.3s;
  background: var(--secondary-color) !important;
  color: var(--input-color) !important;
}

.swal2-input:focus {
  border-color: #13577c !important;
}

.swal2-input-label {
  color: var(--input-color) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block !important;
  text-align: left !important;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.swal2-select {
  background: var(--secondary-color) !important;
  color: var(--input-color) !important;
}

.swal2-icon.no-border {
  border: none !important;
}
.swal2-cancel {
  background: rgba(214, 1, 1, 0.781);
}

.swal2-confirm {
  background: #005a56 !important;
}

.swal2-radio{
  background: none !important;
}

#changeLogo {
  cursor: pointer;
  color: var(--slogan-color) !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  display: none !important;
}

.select2-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  opacity: 0 !important;
}

.select2-container--default .select2-selection--single {
  height: 20px !important;
  width: 130px;
  max-width: 200px;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
  border: 1px solid #ced4da !important;
  border-radius: 0.375rem !important;
  display: flex !important;
  align-items: center !important;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
  font-size: 14px;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  padding-left: 0 !important;
  color: #212529 !important;
}

.select2-results__options {
  overflow-x: hidden !important;
  scrollbar-width: thin;
}

.select2-results__options::-webkit-scrollbar {
  width: 6px; /* Largura da barra */
}

.select2-results__options::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.select2-results__options::-webkit-scrollbar-thumb {
  background: #13577c; /* Seu azul MaxMaker */
  border-radius: 10px;
}

/* .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: transparent !important;
    color: #13577c !important;            
    font-weight: bold;                         
} */

.select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: #f8f9fa !important;
  color: #13577c !important;
}

.select2-results__option[aria-label*="Preto"] {
  color: #ffffff !important;
  border-left: 3px solid #000;
  background-color: rgb(255, 0, 0) !important;
}

.select2-results__option[aria-label*="Azul"] {
  color: #13577c;
  border-left: 3px solid #13577c;
}

.select2-results__option {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select2-results__option.pr {
  color: white !important;
  background: rgb(0, 0, 0) !important;
}
.select2-results__option.br {
  color: black;
  background: rgb(255, 255, 255);
}
.select2-results__option.az {
  color: white;
  background: rgba(0, 195, 255, 0.4);
}

.select2-results__option.ve {
  color: white;
  background: rgb(0, 165, 55);
}

.select2-results__option.vm {
  color: rgb(0, 0, 0);
  background: rgb(255, 0, 0);
}

.select2-results__option.rx {
  color: white;
  background: rgba(132, 0, 255, 0.4);
}

.select2-results__option.am {
  color: rgb(0, 0, 0);
  background: rgba(227, 252, 0, 0.904);
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.nav-button {
  position: relative;
  padding-right: 60px !important;
}

.expand-toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 5;
}

.expand-toggle:hover {
  background: var(--slogan-color) !important;
}

.expand-toggle:hover svg{

  color: var(--svg-expand-color) !important; 

}

.share-button:hover{
  background: var(--slogan-color) !important;
}

.share-button:hover svg{
  color: var(--svg-expand-color) !important;
}



.expand-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
  fill: none;
  stroke: currentColor;
}

#wppshare svg {
  width: 25px;
  height: 25px;
}

#share-facebook svg,
#share-instagram svg,
#copy-link svg {
  width: 23px;
  height: 23px;
}

.reflexion-soft-share button {
  color: var(--svg-btn-color);
}

.reflexion-soft-share button svg {
  color: currentColor;
  fill: currentColor;
  stroke: currentColor;
  transition: color 0.2s ease, transform 0.2s ease;
}

#share-facebook svg,
#share-instagram svg,
#copy-link svg {
  fill: none;
  stroke: currentColor;
}

#wppshare svg {
  fill: currentColor;
  stroke: none;
}

/* WhatsApp */
#wppshare:hover {
  color: color-mix(in srgb, #25d366 75%, #0b7a3b 25%);
}

/* Facebook */
#share-facebook:hover {
  color: color-mix(in srgb, #1877f2 75%, #0b3d91 25%);
}

/* Instagram */
#share-instagram:hover {
  color: color-mix(
    in srgb,
    color-mix(in srgb, #feda75 35%, #d62976 65%) 55%,
    #4f5bd5 45%
  );
}

/* Copiar link */
#copy-link:hover {
  color: color-mix(in srgb, var(--primary-color) 65%, var(--accent-color1) 35%);
}

.reflexion-soft-share button:hover svg {
  transform: scale(1.08);
}

.child-buttons-container {
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 30px;
  opacity: 0;
}

.nav-group.expanded .child-buttons-container {
  max-height: 500px;
  opacity: 1;
  padding-bottom: 10px;
}

.nav-group.expanded .expand-toggle svg {
  transform: rotate(180deg);
}

/* Subtítulo abaixo do label do botão pai */
.nav-button-subtitle {
  grid-area: subtitle;
  align-self: start;
  display: block;
  font-size: clamp(0.65rem, 2.4vw, 0.78rem);
  font-weight: 400;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.2;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.nav-button-subtitle[hidden] { display: none; }

/* Bandeira: container revelado ao expandir (visualmente colado ao botão pai) */
.bandeira-container {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.3s ease;
  padding: 0 clamp(12px, 4vw, 24px);
  /* Apenas cantos inferiores arredondados — topo se "encaixa" no botão acima */
  border-radius: 0 0 12px 12px;
  margin: 0;
}
.bandeira-container[hidden] { display: none; }
.nav-group.expanded .bandeira-container {
  max-height: 600px;
  opacity: 1;
  padding: 12px clamp(12px, 4vw, 24px) clamp(10px, 2.5vw, 16px);
  /* Mesmo gradiente do .nav-button para parecer extensão dele */
  background: linear-gradient(
    156deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(247, 253, 255, 1) 50%,
    rgba(237, 250, 255, 1) 100%
  );
  /* Sombra apenas embaixo/laterais — sem sombra no topo para não criar linha entre botão e bandeira */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
/* Quando há bandeira visível, o botão perde os cantos inferiores para se fundir com ela */
.nav-group.expanded > .nav-button-wrapper:has(> .bandeira-container:not([hidden])) > .nav-button {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  /* Remove a sombra inferior do botão para não desenhar uma linha entre as duas peças */
  box-shadow: 0 -1px 4px -1px rgba(0, 0, 0, 0.08);
}
.bandeira-container iframe,
.bandeira-container img.bandeira-img {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
}
.bandeira-html { font-size: 0.9rem; line-height: 1.45; color: inherit; }
.bandeira-html img { max-width: 100%; height: auto; border-radius: 8px; }

.bandeira-container img.bandeira-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: clamp(220px, 45vw, 360px);
  height: auto;
  object-fit: contain;
  background: linear-gradient(156deg, rgb(255, 255, 255) 0%, rgb(247, 253, 255) 50%, rgb(237, 250, 255) 100%);
  border-radius: 10px;
  display: block;
}

/* ════════════════════════════════════════════════════════════════════
   Seletor de Ícone (modal de edição de botão pai)
   - .iconpicker-trigger-*  → linha "preview + botão" no modal principal
   - .iconpicker / .iconpicker-grid / .iconpicker-item → modal aninhado
     que mostra biblioteca de ícones prontos + upload
   ════════════════════════════════════════════════════════════════════ */
.iconpicker-trigger-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 6px;
}
.iconpicker-trigger-preview {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #94a3b8;
}
.iconpicker-trigger-preview img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}
.iconpicker-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid rgba(13, 138, 181, 0.32);
  background: rgba(13, 138, 181, 0.06);
  color: #0d8ab5;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.iconpicker-trigger-btn:hover {
  background: rgba(13, 138, 181, 0.12);
  box-shadow: 0 4px 10px rgba(13, 138, 181, 0.18);
}
.iconpicker-trigger-btn:active {
  transform: translateY(1px);
}

/* Overlay vanilla por cima do SweetAlert do modal de edição.
   SweetAlert usa z-index ~1060; fixamos acima para garantir empilhamento.
*/
.iconpicker-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: iconpickerFadeIn 0.18s ease-out;
}
@keyframes iconpickerFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.iconpicker-popup {
  background: #ffffff;
  border-radius: 18px;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  animation: iconpickerSlideUp 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes iconpickerSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.iconpicker-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.iconpicker-popup-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.iconpicker-close {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(15, 23, 42, 0.06);
  color: #475569;
  border-radius: 10px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.iconpicker-close:hover { background: rgba(15, 23, 42, 0.12); color: #0f172a; }
.iconpicker-popup-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.iconpicker {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.iconpicker-upload {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2px dashed rgba(13, 138, 181, 0.45);
  background: rgba(13, 138, 181, 0.04);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.iconpicker-upload:hover {
  background: rgba(13, 138, 181, 0.10);
  border-color: rgba(13, 138, 181, 0.7);
}
.iconpicker-upload input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.iconpicker-upload-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(13, 138, 181, 0.14);
  color: #0d8ab5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.iconpicker-upload-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.iconpicker-upload-text strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}
.iconpicker-upload-text small {
  font-size: 0.75rem;
  color: #64748b;
}

.iconpicker-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-size: 0.78rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.iconpicker-divider::before,
.iconpicker-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(15, 23, 42, 0.12);
}

.iconpicker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px;
  min-height: 120px;
}
/* Loading / empty state — ocupam toda a largura do grid */
.iconpicker-grid[data-state="loading"],
.iconpicker-grid[data-state="empty"] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.iconpicker-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 16px;
  text-align: center;
  color: #64748b;
  font-size: 0.84rem;
}
.iconpicker-status strong {
  font-size: 0.92rem;
  color: #0f172a;
  font-weight: 700;
}
.iconpicker-status small {
  font-size: 0.78rem;
  color: #64748b;
  max-width: 340px;
  line-height: 1.45;
}
.iconpicker-status code {
  background: rgba(13, 138, 181, 0.10);
  color: #0d8ab5;
  padding: 1px 6px;
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
}
.iconpicker-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid rgba(13, 138, 181, 0.22);
  border-top-color: #0d8ab5;
  border-radius: 50%;
  animation: iconpickerSpin 0.9s linear infinite;
}
@keyframes iconpickerSpin { to { transform: rotate(360deg); } }
.iconpicker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 8px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  color: #0f172a;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.iconpicker-item:hover {
  background: rgba(13, 138, 181, 0.06);
  border-color: rgba(13, 138, 181, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(13, 138, 181, 0.16);
}
.iconpicker-item:active { transform: translateY(0); }
.iconpicker-item.is-loading {
  opacity: 0.5;
  cursor: progress;
}
.iconpicker-item-img {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border-radius: 10px;
  flex-shrink: 0;
}
.iconpicker-item-img img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}
.iconpicker-item-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 520px) {
  .iconpicker-grid {
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    max-height: 300px;
  }
  .iconpicker-item-img { width: 36px; height: 36px; }
  .iconpicker-item-img img { width: 22px; height: 22px; }
  .iconpicker-item-label { font-size: 0.68rem; }
}

/* Carrossel próprio da bandeira (não depende de Bootstrap CSS) */
.bandeira-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: clamp(220px, 45vw, 360px);
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(156deg, rgb(255, 255, 255) 0%, rgb(247, 253, 255) 50%, rgb(237, 250, 255) 100%);;
}
.bandeira-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.bandeira-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bandeira-carousel-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.bandeira-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
  transition: background 0.2s ease;
}
.bandeira-carousel-btn:hover { background: rgba(0, 0, 0, 0.75); }
.bandeira-carousel-prev { left: 10px; }
.bandeira-carousel-next { right: 10px; }
.bandeira-carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.bandeira-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.bandeira-carousel-dot:hover { background: rgba(255, 255, 255, 0.75); }
.bandeira-carousel-dot.is-active {
  background: #fff;
  transform: scale(1.25);
}

/* Indicador "1/N" — pill no canto superior direito do carrossel */
.bandeira-carousel-counter {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  user-select: none;
}
.bandeira-carousel-counter .bcc-now { font-variant-numeric: tabular-nums; }
.bandeira-carousel-counter .bcc-total {
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .bandeira-carousel,
  .bandeira-container img.bandeira-img {
    aspect-ratio: 4 / 3;
    max-height: clamp(180px, 60vw, 260px);
  }
  .bandeira-carousel-btn {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }
}

.bandeira-produtos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  font-family: inherit;
}

.bandeira-produtos-loading,
.bandeira-produtos-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 14px;
  font-size: 0.84rem;
  color: var(--slogan-color, #475569);
  opacity: 0.85;
  text-align: center;
}
.bandeira-produtos-empty a {
  color: var(--hover-color, #0d8ab5);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
.bp-spinner {
  width: 18px; height: 18px;
  border: 2px solid color-mix(in srgb, var(--accent-color1, #b963b9) 25%, transparent);
  border-top-color: var(--hover-color, #0d8ab5);
  border-radius: 50%;
  animation: bpSpin 0.9s linear infinite;
}
@keyframes bpSpin { to { transform: rotate(360deg); } }

.bandeira-produtos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}
.bandeira-produtos-titulo {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.bandeira-produtos-nav {
  display: inline-flex;
  gap: 6px;
}
.bp-nav-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent-color1, #b963b9) 28%, transparent);
  background: var(--secondary-color, #ffffff);
  color: var(--slogan-color, #0f172a);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, opacity .15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.bp-nav-btn:hover:not(:disabled) {
  background: var(--accent-color1, #0d8ab5);
  border-color: var(--accent-color1, #0d8ab5);
  color: #fff;
  transform: scale(1.05);
}
.bp-nav-btn:disabled { opacity: 0.35; cursor: default; }

/* Track horizontal com scroll-snap */
.bandeira-produtos-track {
  display: flex;
  gap: 12px;
  padding: 4px 4px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent-color1, #b963b9) 35%, transparent) transparent;
}
.bandeira-produtos-track::-webkit-scrollbar { height: 6px; }
.bandeira-produtos-track::-webkit-scrollbar-track { background: transparent; }
.bandeira-produtos-track::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent-color1, #b963b9) 35%, transparent);
  border-radius: 999px;
}

/* Card do produto — usa --secondary-color opaco para garantir contraste contra
   o fundo da página em qualquer tema (claro/escuro). Borda e media tingidas com
   --accent-color1/2 fazem o card "respirar" a paleta do tema. */
.bp-card {
  flex: 0 0 auto;
  width: 200px;
  display: flex;
  flex-direction: column;
  background: var(--bg-gradient, #ffffff);
  border: 1px solid color-mix(in srgb, var(--accent-color1, #b963b9) 22%, transparent);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: var(--slogan-color, #0f172a);
  scroll-snap-align: start;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08),
              0 1px 2px rgba(0, 0, 0, 0.04);
}
.bp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-color1, #0f172a) 22%, rgba(0,0,0,0.08)),
              0 2px 6px rgba(0, 0, 0, 0.06);
  border-color: color-mix(in srgb, var(--accent-color1, #b963b9) 55%, transparent);
}

/* Media (foto/badge) — gradiente suave usando os accent colors do tema. */
.bp-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 28% 25%,
      color-mix(in srgb, var(--accent-color2, #cd91f0) 24%, transparent) 0%,
      transparent 55%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent-color2, #cd91f0) 10%, var(--secondary-color, #ffffff)) 0%,
      color-mix(in srgb, var(--accent-color1, #b963b9) 14%, var(--secondary-color, #ffffff)) 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-color1, #b963b9) 10%, transparent);
}
.bp-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.bp-card-foto-vazia {
  color: color-mix(in srgb, var(--slogan-color, #475569) 35%, transparent);
}

/* Badge (PROMO/TOP/HOT/INFO) */
.bp-card-badge {
  position: absolute;
  top: 10px;
  left: -6px;
  padding: 3px 11px 3px 14px;
  border-radius: 0 999px 999px 0;
  background: #0ea5e9;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
  z-index: 1;
}
.bp-card-badge[data-cor="promo"] { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); }
.bp-card-badge[data-cor="top"]   { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.bp-card-badge[data-cor="hot"]   { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); }
.bp-card-badge[data-cor="info"]  { background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%); }

/* Body do card */
.bp-card-body {
  padding: 10px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.bp-card-cat {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--slogan-color, #475569) 60%, transparent);
  text-transform: uppercase;
}
.bp-card-nome {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--slogan-color, #0f172a);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bp-card-desc {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--slogan-color, #475569) 72%, transparent);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bp-card-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}
.bp-card-precos {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.bp-card-preco-de {
  font-size: 0.66rem;
  text-decoration: line-through;
  color: color-mix(in srgb, var(--slogan-color, #475569) 45%, transparent);
  font-variant-numeric: tabular-nums;
}
.bp-card-preco {
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--slogan-color, #0f172a);
  font-variant-numeric: tabular-nums;
}
/* CTA seta — usa --accent-color1 que é sempre saturado em todos os temas
   (evita o caso onde --slogan-color e --secondary-color coincidem, fazendo
   o botão sumir). Ícone fixo em branco para contraste consistente. */
.bp-card-cta {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-color1, #0f172a);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent-color1, #0f172a) 35%, transparent);
}
.bp-card:hover .bp-card-cta {
  transform: translateX(2px);
  background: var(--hover-color, var(--accent-color1, #0f172a));
}

/* Footer "Abrir loja" */
.bandeira-produtos-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid color-mix(in srgb, var(--accent-color1, #b963b9) 18%, transparent);
  margin-top: 4px;
}
.bp-footer-text { display: flex; flex-direction: column; min-width: 0; }
.bp-footer-text strong {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
}
.bp-footer-text span {
  font-size: 0.72rem;
  color: #475569;
}
.bp-footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--accent-color1, #0f172a);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  white-space: nowrap;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent-color1, #0f172a) 30%, transparent);
}
.bp-footer-cta:hover {
  transform: translateY(-1px);
  background: var(--hover-color, var(--accent-color1, #0f172a));
  box-shadow: 0 5px 14px color-mix(in srgb, var(--accent-color1, #0f172a) 45%, transparent);
}

@media (max-width: 480px) {
  .bp-card { width: 160px; }
  .bp-card-nome { font-size: 0.82rem; }
  .bp-card-preco { font-size: 0.9rem; }
  .bandeira-produtos-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .bp-footer-cta { justify-content: center; }
}

/* Preço "Sob consulta" (substitui o valor numérico no card) */
.bp-card-preco-consulta {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0;
}

/* Botão de lupa: amplia o produto (foto + descrição) num modal */
.bp-card-zoom {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--accent-color1, #0f172a);
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform .15s ease, background .15s ease;
}
.bp-card-zoom:hover {
  transform: scale(1.08);
  background: #fff;
}

/* ── Modal de detalhe do produto ─────────────────────────────────── */
body.bp-modal-aberto { overflow: hidden; }
.bp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(3px);
  animation: bpFade .18s ease;
}
.bp-modal-overlay[hidden] { display: none; }
@keyframes bpFade { from { opacity: 0; } to { opacity: 1; } }
.bp-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 92vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: bpPop .2s ease;
}
@keyframes bpPop { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.bp-modal-fechar {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #0f172a;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.bp-modal-fechar:hover { background: #fff; }
.bp-modal-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 28% 25%,
      color-mix(in srgb, var(--accent-color2, #cd91f0) 24%, transparent) 0%, transparent 55%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent-color2, #cd91f0) 10%, #ffffff) 0%,
      color-mix(in srgb, var(--accent-color1, #b963b9) 14%, #ffffff) 100%);
  border-radius: 18px 18px 0 0;
  overflow: hidden;
}
.bp-modal-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bp-modal-img-vazia { color: rgba(71, 85, 105, 0.4); }
.bp-modal-badge {
  position: absolute;
  top: 14px;
  left: -6px;
  padding: 4px 13px 4px 16px;
  border-radius: 0 999px 999px 0;
  background: #0ea5e9;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
}
.bp-modal-badge[data-cor="promo"] { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); }
.bp-modal-badge[data-cor="top"]   { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.bp-modal-badge[data-cor="hot"]   { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); }
.bp-modal-badge[data-cor="info"]  { background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%); }
.bp-modal-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.bp-modal-cat {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(71, 85, 105, 0.75);
}
.bp-modal-nome { margin: 0; font-size: 1.18rem; font-weight: 800; line-height: 1.25; color: #0f172a; }
.bp-modal-desc { margin: 2px 0 0; font-size: 0.9rem; line-height: 1.5; color: #475569; white-space: pre-wrap; }
.bp-modal-precos { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.bp-modal-preco-de {
  font-size: 0.9rem;
  text-decoration: line-through;
  color: rgba(71, 85, 105, 0.6);
  font-variant-numeric: tabular-nums;
}
.bp-modal-preco {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.bp-modal-preco-consulta { font-size: 1.2rem; }
.bp-modal-cta {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--accent-color1, #0f172a);
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-color1, #0f172a) 32%, transparent);
}
.bp-modal-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-color1, #0f172a) 45%, transparent);
}

/* ── Google Review (avaliação cacheada do Google) ─────────────── */
.google-review-edit {
    max-width: 600px;
    width: 92%;
    margin: 4px auto 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.google-review-edit-row {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
}
.google-review-edit-row input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(13, 138, 181, 0.2);
    background: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--ink-900, #2a3f3c);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.google-review-edit-row input[type="text"]:focus {
    border-color: var(--secondary-color, #0d8ab5);
    box-shadow: 0 0 0 3px rgba(13, 138, 181, 0.12);
}
.google-review-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--accent-color1);
    background: var(--primary-color);
    color: var(--secondary-color);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
    flex-shrink: 0;
}
.google-review-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    background: var(--hover-color);
    box-shadow: 0 4px 12px var(--accent-color3);
}
.google-review-btn:disabled { opacity: .65; cursor: wait; }
.google-review-btn svg { width: 14px; height: 14px; }

.google-review-manual {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.google-review-manual .grm-field {
    flex: 1;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.google-review-manual .grm-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink-500, #56706c);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.google-review-manual input[type="number"] {
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid rgba(13, 138, 181, 0.2);
    background: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--ink-900, #2a3f3c);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
    box-sizing: border-box;
}
.google-review-manual input[type="number"]:focus {
    border-color: var(--secondary-color, #0d8ab5);
    box-shadow: 0 0 0 3px rgba(13, 138, 181, 0.12);
}
.google-review-fallback-hint {
    margin: 0;
    font-size: 0.74rem;
    color: var(--ink-500, #56706c);
    line-height: 1.4;
    font-style: italic;
}

.google-review-preview {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    color: var(--ink-900, #2a3f3c);
    padding: 8px 12px;
    background: rgba(255, 250, 230, 0.55);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 10px;
}
.google-review-preview.is-on { display: inline-flex; }
.google-review-preview .grp-stars { color: #fbbf24; letter-spacing: 1px; font-size: 1.05rem; }
.google-review-preview .grp-stars .star.empty { color: #d4d4d8; }
.google-review-preview .grp-stars .star.half {
    background: linear-gradient(90deg, #fbbf24 50%, #d4d4d8 50%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.google-review-preview .grp-rating { font-weight: 700; }
.google-review-preview .grp-count  { color: var(--ink-500, #56706c); font-size: 0.82rem; }

.google-review-view {
    max-width: 600px;
    width: 92%;
    margin: -8px auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 16px;
    box-sizing: border-box;
    background: var(--bg-reflexivecard) !important;
    backdrop-filter: blur(8px);
    border: 1px solid var(--accent-color);
    border-radius: 100px;
    box-shadow: 0 4px 14px rgba(10, 58, 54, 0.08);
    font-size: 0.92rem;
    color: var(--ink-900, #2a3f3c);
    text-align: center;
}
.google-review-view .gr-stars { color: #fbbf24; letter-spacing: 1.5px; font-size: 1.05rem; line-height: 1; }
.google-review-view .gr-stars .star.empty { color: #d4d4d8; }
.google-review-view .gr-stars .star.half {
    background: linear-gradient(90deg, #fbbf24 50%, #d4d4d8 50%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.google-review-view .gr-rating { font-weight: 700; }
.google-review-view .gr-count  { color: var(--ink-500, #56706c); font-size: 0.82rem; }
@media (max-width: 480px) {
    .google-review-view { font-size: 0.85rem; padding: 8px 12px; gap: 6px; }
    .google-review-view .gr-count { font-size: 0.76rem; flex-basis: 100%; }
    .google-review-edit-row { flex-wrap: wrap; }
    .google-review-edit-row input[type="text"] { flex-basis: 100%; }
}

/* ── Ações Rápidas (Rotas, Ligar, Salvar Contato, Compartilhar) ───── */
.acoes-rapidas-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    max-width: 600px;
    width: 92%;
    margin: 8px auto 14px;
}
.acoes-rapidas-wrap > .hint-bubble { margin-top: 6px; flex-shrink: 0; }
.acoes-rapidas-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
}
.acao-rapida-btn {
    position: relative;
    background: var(--bg-reflexivecard);
    backdrop-filter: blur(10px);
    border: 1px solid var(--accent-color3);
    border-radius: 18px;
    padding: 12px 8px;
    min-height: 84px;
    cursor: pointer;
    box-shadow: 0 2px 8px var(--primary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--slogan-color);
    font-family: inherit;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.acao-rapida-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(13, 138, 181, 0.15);
    border-color: var(--secondary-color, #0d8ab5);
}
.acao-rapida-btn svg {
    width: 22px;
    height: 22px;
    color: var(--slogan-color);
}
.acao-rapida-btn > span:not(.acao-rapida-status) {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink-700, #56706c);
    line-height: 1.1;
    text-align: center;
}
.acao-rapida-status {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: background .2s ease;
}
.acao-rapida-btn.is-configured .acao-rapida-status {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}
@media (max-width: 480px) {
    .acoes-rapidas-grid { gap: 8px; }
    .acao-rapida-btn { min-height: 72px; padding: 10px 6px; }
    .acao-rapida-btn svg { width: 20px; height: 20px; }
    .acao-rapida-btn > span:not(.acao-rapida-status) { font-size: 0.66rem; }
}

/* Versão na página de visualização */
.acoes-rapidas-view {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 10px;
    max-width: 600px;
    width: 92%;
    margin: 4px auto 18px;
}
.acoes-rapidas-view .acao-view-btn {
    position: relative;
    background: var(--bg-reflexivecard);
    backdrop-filter: blur(10px);
    border: 1px solid var(--accent-color3);
    border-radius: 18px;
    padding: 12px 8px;
    min-height: 84px;
    cursor: pointer;
    box-shadow: 0 2px 8px var(--primary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--slogan-color);
    font-family: inherit;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    text-decoration: none;
}
.acoes-rapidas-view .acao-view-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(13, 138, 181, 0.18);
}
.acoes-rapidas-view .acao-view-btn svg {
    width: 22px;
    height: 22px;
    color: var(--slogan-color) !important;
}
.acoes-rapidas-view .acao-view-btn span {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--slogan-color);
    line-height: 1.1;
    text-decoration: none;
}

.child-button {
  transform: scale(0.95) !important;
  animation: none !important;
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

.nav-group .child-button:hover {
  transform: scale(1) translateY(-2px) !important;
  background: var(--hover-color) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  color: var(--label-hover-color) !important;
}

.nav-group .child-button:hover {
  transform: scale(1) !important;
}

.access-modes {
  text-align: center;
  padding: 40px 20px;
  width: 100%;
}

.modes-title {
  font-family: "Montserrat", "Times New Roman", serif;
  color: var(--slogan-color) !important;
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modes-subtitle {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: var(--slogan-color) !important;
  margin-bottom: 40px;
  opacity: 0.9;
}

.cards-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.access-card {
  background: white;
  border-radius: 16px;
  width: 350px;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  border-top: 5px solid transparent;
}

.blue-theme {
  background-color: var(--bg-gradient) !important;
  border: 3px solid !important ;
  border-color: var(--hover-color) !important;
  color: var(--primary-color);
  box-shadow: 2px 2px 6px var(--primary-color) !important;
}
.green-theme {
  background-color: var(--bg-gradient) !important;
  border: 3px solid !important ;
  border-color: var(--hover-color) !important;
  color: var(--primary-color);
  box-shadow: 2px 2px 6px var(--primary-color) !important;
}
.orange-theme {
  background-color: var(--bg-gradient) !important;
  border: 3px solid !important ;
  border-color: var(--hover-color) !important;
  color: var(--primary-color);
  box-shadow: 2px 2px 6px var(--primary-color) !important;
}

.card-icon i {
  font-size: 40px;
  margin-bottom: 20px;
}

.card-header h3 {
  font-family: "Montserrat", "Times New Roman", serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 20px;
  margin-top: 20px;
}

.input-group {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  display: flex;
  padding: 8px 12px;
  width: 100%;
  align-items: center;
}

.input-group input {
  font-family: "Fira Code", "Times New Roman", serif;
  color: linear-gradient(
    135deg,
    rgb(25, 25, 25) 0%,
    rgb(31, 31, 31) 50%,
    rgb(26, 26, 26) 100%
  ) !important;
  border: none;
  background: transparent;
  width: 100%;
  font-size: 0.9rem;
  outline: none;
}

.copy-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #006aff;
  padding: 5px;
}

.card-footer {
  margin-top: 15px;
  font-size: 0.85rem;
  opacity: 0.7;
}

.qr-container {
  background: white;
  padding: 10px;
  border-radius: 12px;
}

.qr-container img {
  width: 180px;
  height: 180px;
}

@keyframes scaleUp {
  0%,
  100% {
    transform: scale(1);
  }
  33% {
    transform: scale(1.1);
  }
  66% {
    transform: scale(1.05);
  }
}

.copied {
  filter: brightness(0) saturate(100%) invert(62%) sepia(63%) saturate(3560%)
    hue-rotate(78deg) brightness(106%) contrast(87%);
  animation: scaleUp 2s forwards;
  transition: all 1s ease;
}

.linktitle {
  font-family: "Fira Code", "Times New Roman", serif;
  border: none;
  border-bottom: 2px solid var(--slogan-color) !important;
  outline: none;
  background: none;
  color: var(--slogan-color) !important;
  margin-bottom: 12px;
  padding: 8px;
  text-align: center;
  overflow: visible;
  max-width: 60vh;
}

#video-input {
  background: none;
  border: none;
  outline: none;
}

.card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo-clickable {
  color: var(--slogan-color) !important;
  cursor: pointer;
  transition:
    transform 0.2s,
    opacity 0.2s;
  display: inline-block;
}

.logo-clickable:hover {
  transform: scale(1.02); /* Dá um leve zoom ao passar o mouse */
  opacity: 0.8;
}

@keyframes shadowPulse {
  0%,
  100% {
    box-shadow: 0 0 15px 1px var(--primary-color);
  }
  50% {
    box-shadow: 0 0 30px 2.5px var(--primary-color);
  }
}

.videocontainer {
  animation: shadowPulse 4s ease-in-out infinite alternate;
  transition: box-shadow 0.3s ease;
  will-change: box-shadow, transform;
}

.urlcopied {
  color: var(--slogan-color) !important;
  display: none;
  font-size: 16px;
  position: absolute;
  padding-top: 48px;
  padding-left: 16pxç;
}

.reflexivemsg-main {
  width: 100%;
  padding: 18px 20px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-reflexivecard) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--slogan-color) 14%, transparent);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.reflexive-sidebar {
  position: fixed;
  right: 24px;
  top: 110px;
  width: 320px;
  z-index: 20;
}

@media (max-width: 1100px) {
  .reflexive-sidebar {
    position: static;
    width: 100%;
    margin: 16px auto;
  }
}

.reflexivemsg-main h2 {
  padding: 14px 0 12px !important;
  margin: 0;
  font-size: 1.28rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.02em;
}
.reflexivemsg-main h2 svg {
  width: 17px;
  height: 17px;
}

.reflexivemsg-main h3 {
  padding: 16px 12px 10px !important;
  margin: 0;
  font-size: 0.96rem;
  font-weight: 500;
  font-style: italic;
  opacity: 0.88;
}

/* Ícones de compartilhamento */
.reflexivemsg-main button[aria-label] {
  padding: 2px;
  opacity: 0.78;
}

.reflexivemsg-main button[aria-label]:hover {
  opacity: 1;
}
.reflexion-header {
  gap: 18px !important;
  margin: 6px 0 10px !important;
}

#msgreflexao {
  max-width: 500px;
  margin: 14px auto 24px !important;
  font-size: 1rem !important;
  line-height: 1.85 !important;
  font-weight: 500;
  font-style: italic;
  opacity: 0.92;
}

.card-icon img {
  filter: var(--img-color);
}

textarea.form-control {
  width: 100%;
  max-width: 100%;
  resize: none;
  min-height: 20vh;
  max-height: 20vh;
  outline: none;
  border: none;
}
.qrcodecont {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

#carouseltitle {
  font-size: 1.22rem !important;
  font-weight: 600 !important;
  font-style: italic;
  opacity: 0.95;
}

.carousel-item {
  display: none;
  width: 100%;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.carousel-item.active {
  display: block;
  opacity: 1;
}

.controles-carrossel {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 10px;
}

.controles-carrossel button {
  background: #00e676;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
}

.btn-seta {
  background: transparent;
  border: none;
  color: var(--slogan-color);
  opacity: 0.45;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: 0.2s ease;
}

.btn-seta:hover {
  opacity: 0.85;
  transform: scale(1.08);
}

.btn-seta:active {
  transform: scale(0.96);
}

#data-simples {
  margin: 0 0 14px 0 !important;
  font-size: 1.12rem !important;
  font-weight: 600 !important;
  font-style: italic;
  color: var(--slogan-color) !important;
  opacity: 0.92;
}


.emergfields {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.btn-ativar-gps {
  background-color: var(--primary-color) !important;
  color: var(--secondary-color);
  border: none;
  padding: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: background 0.5s;
}

.btn-ativar-gps:active {
  transform: scale(0.98);
}

/* ===== VARIÁVEIS ===== */
:root {
  --bg: #f7f8fc;
  --primary: linear-gradient(135deg, #13577c, #04324b);
  --secondary: linear-gradient(135deg, #000000, #555555);
  --purple: #000000;
  --pink: #f107a3;
  --card: #ffffff;
  --radius: 16px;
  --shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* ===== AUTH ===== */
.auth-container {
  min-height: calc(100vh - 70px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 16px;
  gap: 0;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 32px;
}

.auth-header {
  text-align: center;
  margin-bottom: 24px;
}

.auth-header h1 {
  font-size: 24px;
  margin-bottom: 6px;
}

.auth-header p {
  font-size: 14px;
  color: #6b7280;
}

/* ===== TABS ===== */
.auth-tabs {
  display: flex;
  background: #f1f5f9;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 24px;
}

.tab-btn {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  color: #374151;
}

.tab-btn.active {
  background: white;
  box-shadow: var(--shadow);
  color: #7e1b1b;
}

/* ===== FORMS ===== */
.auth-form {
  display: none;
}

.auth-form.active {
  display: block;
}

form .input-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}

.form-field label {
  display: block !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 8px !important;
  font-size: 0.98rem !important;
}

.input-group label {
  font-size: 13px !important;
  margin-bottom: 6px !important;
  font-weight: 600 !important;
}

.input-group input {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  outline: none;
  font-size: 14px;
}

.input-group input:focus {
  border-color: #7e1b1b;
}

/* ===== OPTIONS ===== */
.auth-options {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin: 10px 0 18px;
}

.auth-options a {
  text-decoration: none;
  color: #7e1b1b;
}

/* ===== BUTTON ===== */
.btn-auth {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
}

.btn-auth.primary {
  background: var(--primary);
  color: white;
}

#loginbtn {
  cursor: pointer;
  background: var(--secondary-color);
  color: var(--slogan-color);
  padding: 4px 8px;
  border-radius: 8px;
  border: none;
  margin-left: 10px;
}

#logoutbtn {
  cursor: pointer;
  background: rgb(255, 57, 57);
  color: var(--secondary-color);
  padding: 6px 14px;
  border-radius: 8px;
  border: none;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  text-align: center;
  margin-top: 24px;
}

#savechanges {
  position: fixed;
  bottom: 4vh;
  left: 4vw;
  padding: 16px;
  z-index: 1;
  text-align: center;
  background-color: #b4ebc9;
  cursor: pointer;
  border: none;
  box-shadow: 2px 2px 18px var(--primary-color);
  border-radius: 20px;
  transition: all 0.5s ease;
}

.savehint{  
  position: fixed;
  bottom: 2vh;
  left: 2vw;
  padding: 16px;
  z-index: 1;}

#savechanges:hover {
  transition: all 0.3s ease;
  transform: scale(1.05);
  background-color: #0a8c1c;
  box-shadow: 2px 2px 18px -4px;
}

.admin-controls {
  display: flex;
  gap: 20px;
  background: none;
  padding: 4px 8px;
  border-radius: 20px;
  margin-left: 10px;
}

.btn-edit,
.btn-delete-parent,
.btn-add-child,
.btn-delete-child {
  cursor: pointer;
  font-size: 14px;
  border: none;
  background: none;
  transition: 0.2s;
}

.btn-edit:hover {
  filter: drop-shadow(0 0 5px #fff);
}
.btn-delete-parent:hover,
.btn-delete-child:hover {
  filter: drop-shadow(0 0 5px #f53b3b);
}
.btn-add-child:hover {
  filter: drop-shadow(0 0 5px #50fc56);
}

#btn-create-new-parent {
  background: var(--hover-color) !important;
  color: var(--slogan-color) !important;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.5s ease;
  cursor: pointer;
  border: none;
  margin-top: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
#btn-create-new-parent:hover {
  box-shadow: var(--accent-color);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

.instagramicon {
  background-image: url("./assets/img/instagram.svg") !important;
  background-size: contain;
  background-repeat: no-repeat;
  border: none !important;
  filter: var(--img-color) !important;
}

#closereflexion {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px;
  opacity: 0.75;
  transition: 0.2s ease;
}

#closereflexion:hover {
  opacity: 1;
  transform: scale(1.04);
}

#closereflexion svg {
  width: 24px;
  height: 24px;
}


#closeengajamento{
    position: absolute;
  right: 2.5vw;
  top: 2.5vh;
  border: none;
  background: none;
  cursor: pointer;
}

#closeempresas{
    position: absolute;
  right: 2.5vw;
  top: 2.5vh;
  border: none;
  background: none;
  cursor: pointer;
}

/* Fontes para o slogan */
[font-]{
    font-optical-sizing: auto;
    font-weight: 450;
    font-style: normal;
    text-transform: uppercase;
    text-shadow: 0 2px 8px var(--slogan-color) !important;
    font-size: clamp(14px, 1.2vw, 20px) !important;
    letter-spacing: 2px;
}

.font-padrao {
  font-family: "Fira Code", sans-serif;
}
.font-elegante {
  font-family: "Playfair Display", serif;
}
.font-moderna {
  font-family: "Roboto", sans-serif;
}
.font-cursiva {
  font-family: "Dancing Script", cursive;
}
.font-courier {
  font-family: "Courier New", Courier, monospace;
}
.font-arial {
  font-family: Arial, Helvetica, sans-serif;
}
.font-verdana {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.font-montserrat {
  font-family: "Montserrat", sans-serif;
}
.font-playwrite {
  font-family: "Playwrite IE", sans-serif;
  font-weight: 400;
}

.homediv {
  display: block;
  flex-direction: row;
}

.user-bottom-btns {
  display: flex;
  flex-direction: row;
  align-items: end;
  gap: 10px;
}

.myurls {
  background: var(--bg-gradient);
  color: var(--slogan-color);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 14px;
}

.homebtn {
  background: var(--bg-reflexivecard) !important;
  cursor: pointer;
  z-index: 10;
  border-radius: 0.375rem;
  padding: 2px 4px;
  border: none;
  transition: all 0.8s ease;
}

.homebtn:hover{
  transform: scale(1.05);
  transition: all 0.5s ease;
  background: var(--hover-color) !important;
}

.homebtn svg{
  color: var(--svg-btn-color) !important;
}

#sidebar-paginas {
        position: fixed;
        left: -300px;
        top: 0;
        width: 300px;
        height: 100vh;
        background-color: #ffffff;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        z-index: 10000;
        transition: left 0.3s ease;
        padding-top: 80px;
        overflow-y: auto;
    }

    #sidebar-paginas.aberta {
        left: 0;
    }

    #btn-toggle-sidebar {
        position: fixed;
        left: 2vw;
        top: 10vh;
        z-index: 10;
        background: var(--bg-reflexivecard) !important;
        color: var(--slogan-color) !important;
        border: none;
        border-radius: 8px;
        width: 40px;
        height: 40px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.8s ease, left 0.3s ease;
    }

    #btn-toggle-sidebar.aberta {
        left: 310px;
        z-index: 10000;
    }

    .item-pagina {
        padding: 15px 20px;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        transition: background 0.2s;
        font-family: 'Montserrat', sans-serif;
        color: #333;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .item-pagina:hover {
        background-color: #f8f9fa;
        color: #4dd432;
    }

#btnNovaPagina{
  background: var(--nav-btn-color) !important;
  color: var(--slogan-color) !important;
  border: none;
  border-radius: 16px;
  padding: 6px 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  margin-top: 5vh;
  margin-left: 5%;
  cursor: pointer;
  transition: all 0.3s ease;
}

#btnNovaPagina:hover{
  transition: all 0.3s ease;
  transform: scale(1.05);
}

.controls-header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: 3vh;
}

.carousel-indicators button{
  width: 15px;
  background: var(--secondary-color) !important;
}

.eng-minicard-carousel{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3vh;
}
.eng-minicard{
  display: flex;
  flex-direction: column;
  gap: 2vh;
}

.carousel-inner{
  padding-top: 4vh;
}

/* Customizando os indicadores para parecerem bolinhas */
.carousel-indicators button {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important; /* Faz virar círculo */
    background-color: #ccc !important; /* Cor desativada */
    border: none !important;
    margin: 0 4px !important;
    transition: all 0.3s ease;
}

.carousel-indicators .active {
    background-color: var(--slogan-color) !important; /* Cor da bolinha ativa */
    width: 12px !important; /* Dá um leve destaque no tamanho */
    height: 12px !important;
}

.carousel-indicators {
    position: relative !important;
    bottom: 0 !important;
    margin-top: 0 !important;
}

#eng-frase-personalizada{
      height: 100%;
    width: 100%;
    max-width: 800px;
    resize: none;
    min-height: 80px;
    max-height: 80px;
}

.eng-minicard-header{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top-bar-actions {
    position: fixed;
    top: 2vh;
    left: 2vw;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 15px; /* Espaço entre o botão home e o input */
    max-width: 90vw; /* Garante que não saia da tela na direita */
}

/* Reset básico para o link do home */
.home-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.domain-input-group {
    display: flex;
    background: var(--glass); /* Usando sua variável de fundo transparente */
    backdrop-filter: blur(10px);
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    overflow: hidden;
    z-index: -1;
}

.form-control-custom {
    background: transparent;
    border: none;
    color: var(--text-hi);
    padding: 8px 12px;
    font-size: 0.9rem;
    outline: none;
    min-width: 150px;
    width: 20vw;
    color: var(--slogan-color);
}

.btn-save {
    background: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    padding: 0 15px;
    font-weight: bold;
    font-size: 0.75rem;
    cursor: pointer;
    transition: opacity 0.2s;
    text-transform: uppercase;
}

.btn-save:hover {
    opacity: 0.8;
}

/* --- RESPONSIVIDADE (MOBILE) --- */
@media (max-width: 600px) {
    .top-bar-actions {
        gap: 8px;
    }
    
    .form-control-custom {
        width: 120px; /* Largura fixa menor para celulares */
        font-size: 0.8rem;
    }

    .btn-save {
        padding: 0 10px;
        font-size: 0.7rem;
    }

    .homebtn svg {
        width: 26px; /* Diminui um pouco o ícone home no celular */
        height: 26px;
    }
}

#logo-container2{
  width: 300px;  /* Tamanho fixo desejado */
    height: 159px; /* Tamanho fixo desejado */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Garante que nada saia da borda */
    margin: 20px 10px;
}

#logo-preview{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Mantém a proporção sem cortar a imagem */
    display: block;

}
.videocontainer {
    position: relative;
}

/* Estilo do Overlay de Áudio (específico pelo ID para não conflitar com o placeholder) */
#overlay-play {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    z-index: 20; /* Garante que fique acima do iframe */
    cursor: pointer;
    
    /* Estado inicial: escondido */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Quando passar o mouse na videocontainer, mostra o overlay do ID overlay-play */
.videocontainer:hover #overlay-play {
    opacity: 1;
    pointer-events: auto;
}

/* Estilo do Botão */
.btn-audio {
    padding: 15px 25px;
    font-size: 18px;
    background: #00c9a7;
    border: none;
    border-radius: 10px;
    color: white;
    font-family: sans-serif;
    font-weight: bold;
    cursor: pointer;
}

/* Alça de arrastar */
.drag-handle {
    cursor: grab;
    background: none;
    border: none;
    padding: 4px 6px;
    border-radius: 4px;
    color: var(--secondary-color) !important;
    display: flex;
    align-items: center;
    transition: color 0.2s, background 0.2s;
}
.drag-handle:hover {
    color: #555;
    background: rgba(0, 0, 0, 0.06);
}
.drag-handle:active {
    cursor: grabbing;
}

/* Estados do SortableJS */
.sortable-ghost {
    opacity: 0.35;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
}
.sortable-chosen {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
}
.sortable-drag {
    opacity: 1 !important;
}



/* Overlay que cobre o site todo */
#sidebar-overlay {
    position: fixed;
    inset: 0; /* Cobre tudo */
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none; /* Escondido por padrão */
    backdrop-filter: blur(2px);
}

/* Classes de ativação */
.sidebar-active #sidebar-paginas {
    transform: translateX(0);
}

.sidebar-active #sidebar-overlay {
    display: block;
}

/* Escondido por padrão */
#sidebar-overlay {
    position: fixed;
    inset: 0; /* Cobre tudo */
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none; /* Escondido por padrão */
    backdrop-filter: blur(2px);
}

/* Quando o body tiver a classe, exibe o overlay */
.sidebar-active #sidebar-paginas {
    transform: translateX(0);
}

.sidebar-active #sidebar-overlay {
    display: block;
    z-index: 10000;
}

#btn-toggle-sidebar svg path {
    transition: all 0.3s ease-in-out;
    transform-origin: center;
    transform-box: fill-box; /* Fundamental para SVGs no Chrome/Edge */
}

/* Quando o botão está aberto */

/* A linha que estava em y=12 (top) sobe 4px para o meio e gira */
#btn-toggle-sidebar.aberta .line-top {
    transform: translateY(-4px) rotate(45deg);
}

/* A linha do meio some */
#btn-toggle-sidebar.aberta .line-mid {
    opacity: 0;
}

/* A linha que estava em y=4 (bot) desce 4px para o meio e gira */
#btn-toggle-sidebar.aberta .line-bot {
    transform: translateY(4px) rotate(-45deg);
}

.mxmklink{
  text-decoration: none;
  background-image: linear-gradient(to right, #9bd0ff, #a74cf1); /* Defina as cores */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}

.nexlink{
    text-decoration: none;
  background-image: linear-gradient(to right, #02dd9b, #0d9779); /* Defina as cores */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}

/* [id^="img-pai-"] {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain;
} */

.nav-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 8px; /* Espaço entre a seta e o compartilhar */
}

.share-button {
    background: transparent;
    border: none;
    color: currentColor;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10; /* Garante que fique acima do link */
    margin-left: 150%;
}

.share-button:hover {
    opacity: 0.7;
    background: var(--slogan-color) !important;
    border-radius: 14px;
    color: var(--bg-gradient) !important;
}

.share-button svg {
    width: 18px;
    height: 18px;
}

.shortcut-icons-section {
    background: transparent;
    padding: 20px;
    max-width: 672px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-flow: column;
}

.shortcut-icons-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    width: 100%;
    max-width: 100%; /* Ajuste para alinhar com o fluxo dos ícones */
}

.shortcut-icons-header h5 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--slogan-color) !important;
    margin: 0;
}

#shortcut-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    min-height: 50px;
    /* ESTA LINHA RESOLVE O PROBLEMA: */
    justify-content: center; 
    /* Garante que o container use todo o espaço da seção */
    width: 100%; 
}

.shortcut-item {
    position: relative;
    width: 60px;
    height: 60px;
    background: transparent;
    border: none;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.shortcut-item:hover {
    transform: translateY(-3px);

    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.1);
}

.shortcut-item img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.shortcut-item:hover img {
    transform: scale(1.1);
}


.shortcut-actions {
    position: absolute;
    top: -10px;
    right: -10px;
    display: flex;
    gap: 5px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 5;
}

.shortcut-item:hover .shortcut-actions {
    opacity: 1;
    pointer-events: auto;
    top: -8px;
}

.edit-shortcut, 
.delete-shortcut-local {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    color: var(--secondary-color) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    background: var(--primary-color) !important;
}

.edit-shortcut svg{
  width: 14px;  
}

.delete-shortcut-local svg{
    width: 14px;  
}

.edit-shortcut:hover, 
.delete-shortcut-local:hover {
    transform: scale(1.15);
}


#btn-add-shortcut {
    background-color: #10b981;
    color: white;
    border: none;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

#btn-add-shortcut:hover {
    background-color: #059669;
}

.shortcut-empty-msg {
    color: #94a3b8;
    font-size: 13px;
    font-style: italic;
    padding: 10px;
}

.dynamic-icon {
    width: clamp(40px, 10vw, 60px);
    aspect-ratio: 1 / 1;
    background-color: var(--slogan-color, #000); 

    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: background-color 0.3s ease;
}

#diaryphrases,
#diaryphrases-add {
  background: transparent;
  color: var(--slogan-color);
  border: 1px solid color-mix(in srgb, var(--slogan-color) 45%, transparent);
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: 0.2s ease;
}

#diaryphrases:hover,
#diaryphrases-add:hover {
  background: color-mix(in srgb, var(--slogan-color) 10%, transparent);
}

.reflex_top_actions{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 18px;
}

.reflex_top_actions_add {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 12px 0 18px;
}

#addreflexion {
  background: transparent;
  border: none;
  color: var(--slogan-color);
  cursor: pointer;
  opacity: 0.75;
  transition: 0.2s ease;
}

#addreflexion:hover {
  opacity: 1;
  transform: scale(1.06);
}
/* ─── RESPONSIVE ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .chart-row-main  { grid-template-columns: 1fr; }
    .chart-row-three { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .chart-row-three, .chart-row-two { grid-template-columns: 1fr; }
    .page { padding: 16px 14px 48px; }
    .topbar { padding: 0 16px; }
    .filters { flex-direction: column; align-items: flex-start; }
    .heatmap-wrap { grid-template-columns: repeat(12,1fr); }
    .hm-col:nth-child(n+13) { display: none; }
    .log-search input { width: 140px; }
}

/* ── Responsive & Fixes ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .topbar-actions .btn-top span { display: none; } /* Esconde texto dos botões no topo */
    .topbar-actions { gap: 8px; }
    .shortcut-actions{
      opacity: 1;
    }
}

@media (max-width: 900px) {
    .sidebar { 
        transform: translateX(-100%); 
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sidebar.active { 
        transform: translateX(0); 
        box-shadow: 20px 0 50px rgba(0,0,0,0.5);
    }
    .page { margin-left: 0; width: 100%; }
    .charts-row { grid-template-columns: 1fr !important; }
    .content { padding: 16px; }
    .topbar { padding: 0 16px; }
    
    /* Menu Toggle Button */
    .menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 38px; height: 38px;
        background: var(--bg2);
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--text);
        cursor: pointer;
    }

    /* Ajuste para tabelas não quebrarem o container pai */
    .data-card { width: 100%; overflow: hidden; }
    .data-toolbar { flex-direction: column; align-items: stretch; }
    
    /* KPI Grid em telas pequenas */
    .kpi-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

@media (max-width: 480px) {
    .topbar-actions { 
        position: fixed; 
        bottom: 0; left: 0; right: 0; 
        background: var(--bg1); 
        padding: 10px; 
        justify-content: space-around;
        border-top: 1px solid var(--border);
        z-index: 1000;
    }
    .time-display { display: none; }
    .content { padding-bottom: 80px; } /* Espaço para a barra inferior */
    .sys-grid { grid-template-columns: 1fr; }
}

/* Esconder o botão de toggle por padrão em telas grandes */
.menu-toggle { display: none; }

.sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--bg1);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 100;
    transition: transform 0.3s;
}

.sidebar-logo {
    padding: 28px 20px 20px;
    border-bottom: 1px solid var(--border);
}
.sidebar-logo .logo-mark {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .15em;
    color: var(--brand);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sidebar-logo .logo-mark::before {
    content:'';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: pulse 2s infinite;
}
.topbar-brand {
    display: flex; align-items: center; gap: 12px; padding-left: 2vw; padding-top: 2vh;
}

.brand-mark {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--amber-dk), var(--amber));
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.brand-mark svg { color: #0e1117; }
.brand-label {
    font-size: 15px; font-weight: 700;
    letter-spacing: -.02em;
}
.brand-label span { color: var(--amber); }
@keyframes pulse {
    0%,100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.sidebar-logo small {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    color: var(--text-dim);
    font-family: var(--mono);
}

.nav-section {
    padding: 18px 12px 6px;
}
.nav-label {
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-dim);
    font-family: var(--mono);
    padding: 0 8px;
    margin-bottom: 6px;
}
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    border: 1px solid transparent;
}
.nav-item:hover {
    background: var(--bg2);
    color: var(--text);
    border-color: var(--border);
}
.nav-item.active {
    background: rgba(19,196,245,0.08);
    color: var(--brand);
    border-color: rgba(19,196,245,0.2);
}
.nav-item svg { flex-shrink: 0; opacity: .8; }

.sidebar-footer {
    margin-top: auto;
    padding: 16px 12px;
    border-top: 1px solid var(--border);
}
.admin-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg2);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.admin-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-dk), var(--brand));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono);
    font-size: 12px; font-weight: 700;
    color: var(--bg);
    flex-shrink: 0;
}
.admin-info { min-width: 0; }
.admin-name {
    font-size: 12px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-role {
    font-size: 10px; color: var(--text-dim); font-family: var(--mono);
    text-transform: uppercase; letter-spacing: .08em;
}

.topbar {
    height: 60px;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    background: rgba(11,22,35,0.8);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar-title {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: .04em;
}
.topbar-title span { color: var(--brand); }
.topbar-actions { display: flex; align-items: center; gap: 12px; }

.time-display {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-dim);
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 10px;
}
.btn-top {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    font-size: 12px; font-weight: 600;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
}
.btn-top:hover { background: var(--bg3); color: var(--text); border-color: var(--border-hi); }
.btn-top.danger:hover { border-color: rgba(240,80,80,0.4); color: var(--red); }

/* Container lateral */
.reflexion-sidebar {
  position: fixed;
  right: 24px;
  top: 112px;
  width: 310px;
  z-index: 40;
}

/* Card principal */
.reflexion-card {
  width: 100%;
  color: var(--slogan-color);
  background: color-mix(in srgb, var(--bg-reflexivecard) 74%, transparent);
  border: 1px solid color-mix(in srgb, var(--slogan-color) 14%, transparent);
  border-radius: 18px;
  padding: 16px 18px 18px;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.10);
  font-family: "Archivo", sans-serif;
  transition: 0.25s ease;
}

/* Topo */
.reflexion-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.reflexion-kicker {
  display: block;
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.58;
}

.reflexion-title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--slogan-color);
}

/* Botão fechar */
.reflexion-close {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--slogan-color) 14%, transparent);
  border-radius: 9px;
  color: var(--slogan-color);
  opacity: 0.55;
  cursor: pointer;
  transition: 0.2s ease;
}

.reflexion-close:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--slogan-color) 9%, transparent);
}

/* Cabeçalho pequeno com data e setas */
.reflexion-carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0 4px;
  border-top: 1px solid color-mix(in srgb, var(--slogan-color) 12%, transparent);
}

.reflexion-date {
  font-size: 0.78rem;
  font-weight: 500;
  opacity: 0.58;
  font-style: italic;
}

/* Setas */
.btn-seta {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--slogan-color);
  opacity: 0.45;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: 0.2s ease;
}

.btn-seta:hover {
  opacity: 0.9;
  transform: scale(1.08);
}

/* Texto da frase */
.reflexion-text,
#msgreflexao {
  margin: 10px 0 14px !important;
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  font-weight: 500;
  font-style: italic;
  opacity: 0.86;
}

/* Botão de expandir opções */
.reflexion-toggle {
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--slogan-color) 13%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--slogan-color) 6%, transparent);
  color: var(--slogan-color);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.78;
  transition: 0.2s ease;
}

.reflexion-toggle:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--slogan-color) 10%, transparent);
}

/* Detalhes ficam escondidos por padrão */
.reflexion-details {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--slogan-color) 12%, transparent);
}

.reflexion-card.is-expanded .reflexion-details {
  display: block;
}

/* Gerenciar frases */
.reflexion-manage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 12px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--slogan-color) 14%, transparent);
  color: var(--slogan-color);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.75;
  transition: 0.2s ease;
}

.reflexion-manage:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--slogan-color) 8%, transparent);
}

/* Compartilhamento */
.reflexion-share-label {
  margin-bottom: 8px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.5;
}

.reflexion-share-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

.reflexion-share-actions button {
  background: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.2s ease;
}

.reflexion-share-actions button:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* Área de adicionar */
.reflexion-add-area {
    position: static;
    width: min(92%, 560px);
    margin: 16px auto 22px;
}

.reflexion-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--slogan-color) 15%, transparent);
  background: color-mix(in srgb, var(--bg-reflexivecard) 68%, transparent);
  color: var(--slogan-color);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.08);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.82;
  transition: 0.2s ease;
}

.reflexion-add-btn:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* Bootstrap carousel interno */
.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-item {
  display: none;
  width: 100%;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.carousel-item.active {
  display: block;
  opacity: 1;
}

/* Responsividade */
@media (max-width: 1180px) {
  .reflexion-sidebar,
  .reflexion-add-area {
    position: static;
    width: min(92%, 560px);
    margin: 16px auto 22px;
  }

  .reflexion-card {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .reflexion-sidebar,
  .reflexion-add-area {
    width: 94%;
    margin: 12px auto 18px;
  }

  .reflexion-card {
    padding: 14px 15px 16px;
    border-radius: 16px;
  }

  .reflexion-title {
    font-size: 1rem;
  }

  .reflexion-text,
  #msgreflexao {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
  }
}

.reflexion-sidebar-view {
  .reflexion-sidebar-view {
    position: static;
    width: min(92%, 560px);
    margin: 16px auto 22px;
  }
}

.reflexion-card-view {
  width: 100%;
  color: var(--slogan-color);
  background: color-mix(in srgb, var(--bg-reflexivecard) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--slogan-color) 14%, transparent);
  border-radius: 18px;
  padding: 16px 18px 18px;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.10);
  font-family: "Archivo", sans-serif;
}

.reflexion-card-view-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.reflexion-kicker-view {
  display: block;
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.55;
}

.reflexion-title-view {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--slogan-color);
}

.reflexion-icon-view {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: color-mix(in srgb, var(--slogan-color) 8%, transparent);
  color: var(--slogan-color);
  opacity: 0.62;
}

.reflexion-date-view {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--slogan-color) 12%, transparent);
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 500;
  opacity: 0.58;
}

.reflexion-text-view,
#msgreflexao {
  margin: 10px 0 14px !important;
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  font-weight: 500;
  font-style: italic;
  opacity: 0.86;
}

.reflexion-toggle-view {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--slogan-color) 13%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--slogan-color) 6%, transparent);
  color: var(--slogan-color);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.78;
  transition: 0.2s ease;
}

.reflexion-toggle-view:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--slogan-color) 10%, transparent);
}

.reflexion-share-view {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--slogan-color) 12%, transparent);
}

.reflexion-card-view.is-expanded .reflexion-share-view {
  display: flex;
}

.reflexion-share-view button {
  background: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  opacity: 0.72;
  transition: 0.2s ease;
}

.reflexion-share-view button:hover {
  opacity: 1;
  transform: translateY(-1px);
}

@media (max-width: 1180px) {
  .reflexion-sidebar-view {
    position: static;
    width: min(92%, 560px);
    margin: 16px auto 22px;
  }
}

@media (max-width: 640px) {
  .reflexion-sidebar-view {
    width: 94%;
    margin: 12px auto 18px;
  }

  .reflexion-card-view {
    padding: 14px 15px 16px;
    border-radius: 16px;
  }

  .reflexion-title-view {
    font-size: 1rem;
  }

  .reflexion-text-view,
  #msgreflexao {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
  }
}

.reflexion-soft-card {
  width: min(92%, 520px);
  margin: 22px auto 34px;
  padding: 26px 28px 28px;
  border-radius: 26px;

  background: var(--bg-reflexivecard);
  color: var(--slogan-color);

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
  border-top: 4px solid var(--primary-color);

  font-family: "Archivo", sans-serif;
  position: relative;
}

/* Topo */
.reflexion-soft-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.reflexion-soft-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 14px;
  border-radius: 999px;

  background: color-mix(in srgb, var(--primary-color) 14%, var(--secondary-color));
  color: var(--slogan-color);

  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.reflexion-soft-badge svg {
  color: var(--slogan-color);
}

.reflexao-titulo-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 2px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--slogan-color) 12%, transparent);
  color: var(--slogan-color);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.reflexao-titulo-edit:hover {
  background: color-mix(in srgb, var(--slogan-color) 22%, transparent);
  transform: scale(1.08);
}
.reflexao-titulo-edit svg { width: 12px; height: 12px; }

.reflexion-soft-date,
#data-simples {
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: color-mix(in srgb, var(--slogan-color) 68%, transparent) !important;
  margin: 0 !important;
  white-space: nowrap;
}

/* Categoria */
.reflexion-soft-category,
#carouseltitle {
  margin: 0 0 12px !important;
  color: var(--primary-color);
  font-size: 1rem !important;
  font-weight: 700 !important;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  text-align: left !important;
}

/* Frase */
.reflexion-soft-text,
#msgreflexao {
  margin: 0 !important;
  color: var(--slogan-color);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem !important;
  line-height: 1.45 !important;
  font-weight: 500;
  text-align: left;
  position: relative;
  padding-left: 0;
}

.reflexion-soft-text::before,
#msgreflexao::before {
  content: "“";
  color: var(--primary-color);
  font-size: 2.4rem;
  line-height: 0;
  font-weight: 800;
  margin-right: 6px;
  vertical-align: -0.28em;
}

/* Linha */
.reflexion-soft-divider {
  width: 100%;
  height: 1px;
  margin: 24px 0 18px;
  background: color-mix(in srgb, var(--slogan-color) 14%, transparent);
}

/* Card único Reflexão + Conto: linha NÍTIDA separando os dois blocos. */
.reflexion-merged-divider {
  width: 100%;
  height: 0;
  border: 0;
  border-top: 2px solid color-mix(in srgb, var(--slogan-color) 30%, transparent);
  margin: 22px 0;
}

/* Bloco interno (reflexão/conto) dentro do card único — sem moldura própria. */
.reflexion-edit-inner {
  width: 100%;
}

/* Rodapé */
.reflexion-soft-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.reflexion-soft-footer span {
  color: color-mix(in srgb, var(--slogan-color) 68%, transparent);
  font-size: 0.9rem;
  font-weight: 500;
}

/* Compartilhamento */
.reflexion-soft-share {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reflexion-soft-share button {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  background: var(--secondary-color);
  border: none;
  border-radius: 50%;

  color: var(--primary-color);
  cursor: pointer;

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  transition: 0.2s ease;
}

.reflexion-soft-share button svg {
  stroke: var(--svg-btn-color);
  color: var(--svg-btn-color);
}

.reflexion-soft-share button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.13);
  background: color-mix(in srgb, var(--hover-color) 10%, var(--secondary-color));
}

/* Responsivo */
@media (max-width: 640px) {
  .reflexion-soft-card {
    width: 92%;
    padding: 22px 20px 24px;
    border-radius: 22px;
    margin: 18px auto 28px;
  }

  .reflexion-soft-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .reflexion-soft-date,
  #data-simples {
    font-size: 0.82rem !important;
  }

  .reflexion-soft-text,
  #msgreflexao {
    font-size: 1.15rem !important;
    line-height: 1.5 !important;
  }

  .reflexion-soft-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .reflexion-soft-share {
    width: 100%;
    justify-content: flex-start;
  }
}

.reflexion-edit-card {
  position: relative;
}

/* Ações superiores da editpage */
.reflexion-edit-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.reflexion-manage-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 7px 12px;
  border-radius: 999px;

  background: color-mix(in srgb, var(--primary-color) 14%, var(--secondary-color));
  color: var(--slogan-color);

  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;

  transition: 0.2s ease;
}

.reflexion-manage-link:hover {
  background: color-mix(in srgb, var(--hover-color) 14%, var(--secondary-color));
  color: var(--hover-color);
  transform: translateY(-1px);
}

/* Botão remover */
.reflexion-remove-btn {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border: none;
  border-radius: 50%;

  background: var(--secondary-color);
  color: color-mix(in srgb, var(--slogan-color) 65%, transparent);

  cursor: pointer;

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  transition: 0.2s ease;
}

.reflexion-remove-btn svg {
  color: inherit;
}

.reflexion-remove-btn:hover {
  color: var(--primary-color);
  background: color-mix(in srgb, var(--accent-color1) 10%, var(--secondary-color));
  transform: translateY(-1px);
}

/* Carrossel da editpage */
.reflexion-edit-carousel {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.reflexion-arrow {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  border: none;
  border-radius: 50%;

  background: var(--bg-gradient);
  color: var(--slogan-color);

  font-size: 1.4rem;
  line-height: 1;

  cursor: pointer;

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  transition: 0.2s ease;
}

.reflexion-arrow:hover {
  transform: translateY(-1px);
  color: var(--hover-color);
  background: color-mix(in srgb, var(--hover-color) 10%, var(--secondary-color));
}

/* Área quando o card está removido */
.reflexion-add-area {
  width: min(92%, 520px);
  margin: 18px auto 24px;

  justify-content: center;
  align-items: center;
  gap: 12px;
}

.reflexion-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 9px 14px;

  border: none;
  border-radius: 999px;

  background: var(--bg-reflexivecard);
  color: var(--primary-color);

  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;

  cursor: pointer;

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  transition: 0.2s ease;
}

.reflexion-add-btn svg {
  color: var(--primary-color);
}

.reflexion-add-btn:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--hover-color) 10%, var(--bg-reflexivecard));
  color: var(--hover-color);
}

.reflexion-add-btn:hover svg {
  color: var(--hover-color);
}

/* Estado padrão dos botões de compartilhamento */
.reflexion-soft-share button {
  color: var(--svg-btn-color) !important;
}

/* Remove conflito geral */
.reflexion-soft-share button svg {
  transition: transform 0.2s ease;
}

/* WhatsApp - ícone preenchido */
#wppshare svg,
#wppshare svg path {
  fill: currentColor !important;
  stroke: none !important;
}

/* Facebook, Instagram e Copiar Link - ícones de linha */
#share-facebook svg,
#share-facebook svg path,
#share-instagram svg,
#share-instagram svg path,
#share-instagram svg rect,
#share-instagram svg line,
#copy-link svg,
#copy-link svg path {
  fill: none !important;
  stroke: currentColor !important;
}

/* Hover WhatsApp – gradiente da marca */
#wppshare:hover svg,
#wppshare:hover svg path {
  fill: url(#grad-wpp) !important;
  stroke: none !important;
}

/* Hover Facebook – gradiente da marca */
#share-facebook:hover svg,
#share-facebook:hover svg path {
  stroke: url(#grad-fb) !important;
  fill: none !important;
}

/* Hover Instagram – gradiente clássico amarelo→laranja→rosa→roxo→azul */
#share-instagram:hover svg,
#share-instagram:hover svg path,
#share-instagram:hover svg rect,
#share-instagram:hover svg line {
  stroke: url(#grad-ig) !important;
  fill: none !important;
}

/* Hover Copiar Link – gradiente neutro */
#copy-link:hover svg,
#copy-link:hover svg path {
  stroke: url(#grad-copy) !important;
  fill: none !important;
}

.rotas-trigger-wrap {
  display: flex;
  justify-content: center;
  margin: -10vh 0 4vh;
  position: relative;
  z-index: 2;
}
.rotas-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--accent-color);
  border-radius: 999px;
  background: var(--primary-color);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--secondary-color);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.rotas-trigger:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
  background: var(--hover-color);
}
.rotas-trigger:active { transform: translateY(0); }
.rotas-trigger svg { color: var(--svg-edit-color); flex-shrink: 0; }
.rotas-trigger-label { white-space: nowrap; }

/* ── Backdrop ── */
.rotas-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1500;
}
.rotas-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Modal ── */
.rotas-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(0.96);
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1600;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}
.rotas-modal.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.rotas-modal-view { width: min(460px, calc(100vw - 24px)); }

.rotas-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #f1f5f9;
}
.rotas-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.rotas-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.rotas-modal-close:hover { background: #f1f5f9; color: #0f172a; }

.rotas-modal-body {
  padding: 18px 22px;
  overflow-y: auto;
}
.rotas-modal-label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #64748b;
  margin-bottom: 10px;
}

.rotas-modal-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rotas-modal-input-wrap:focus-within {
  border-color: #14b8a6;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}
.rotas-modal-input-wrap input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: #0f172a;
  background: transparent;
  font-family: inherit;
}
.rotas-modal-input-wrap input::placeholder { color: #94a3b8; }

.rotas-geo-btn {
  background: #14b8a6;
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.1s ease;
}
.rotas-geo-btn:hover  { background: #0d9488; }
.rotas-geo-btn:active { transform: scale(0.94); }
.rotas-geo-btn:disabled { opacity: 0.5; cursor: wait; }

.rotas-modal-hint {
  margin: 10px 2px 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

.rotas-destino-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13.5px;
  color: #0f172a;
}
.rotas-destino-card svg { flex-shrink: 0; }

.rotas-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px 18px;
  border-top: 1px solid #f1f5f9;
}
.rotas-modal-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.rotas-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.rotas-btn:active { transform: scale(0.98); }
.rotas-btn:disabled { opacity: 0.6; cursor: wait; }

.rotas-btn-primary {
  background: #14b8a6;
  color: #fff;
}
.rotas-btn-primary:hover { background: #0d9488; }

.rotas-btn-secondary {
  background: #f1f5f9;
  color: #334155;
}
.rotas-btn-secondary:hover { background: #e2e8f0; }

.rotas-btn-dark {
  background: #0f172a;
  color: #fff;
}
.rotas-btn-dark:hover { background: #1e293b; }

.rotas-mapa-wrap {
  margin-top: 16px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  aspect-ratio: 16 / 11;
  background: #f1f5f9;
}
.rotas-mapa-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ── Modal de edição: layout maior (cabe os campos) ── */
.rotas-modal-edit {
  width: min(560px, calc(100vw - 32px));
}

/* ── Layout em linhas/colunas ── */
.rotas-field-row {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}
.rotas-field-row-2     { grid-template-columns: 100px 1fr; }
.rotas-field-row-rua   { grid-template-columns: 1fr 100px; }
.rotas-field           { display: flex; flex-direction: column; }
.rotas-field input {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: #0f172a;
  background: #fff;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rotas-field input::placeholder { color: #94a3b8; }
.rotas-field input:focus {
  border-color: #14b8a6;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}
.rotas-field-uf input  { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }

/* ── Toggle Local x Logradouro ── */
.rotas-tipo-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 4px;
  margin: 4px 0 14px;
}
.rotas-tipo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: transparent;
  border: none;
  padding: 9px 10px;
  border-radius: 7px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.rotas-tipo-btn:hover { color: #0f172a; }
.rotas-tipo-btn.is-active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.rotas-tipo-btn svg { flex-shrink: 0; }

/* ── Painel por tipo ── */
.rotas-tipo-painel[hidden] { display: none; }
.rotas-tipo-painel         { display: flex; flex-direction: column; gap: 12px; }

/* ── Autocomplete (UF, cidade, local, rua) ── */
.rotas-ac-wrap { position: relative; }
.rotas-ac-wrap input {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 36px 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: #0f172a;
  background: #fff;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rotas-ac-wrap input::placeholder { color: #94a3b8; }
.rotas-ac-wrap input:focus {
  border-color: #14b8a6;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

.rotas-ac-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
  max-height: 240px;
  overflow-y: auto;
  z-index: 10;
  display: none;
}
.rotas-ac-list.open { display: block; }
.rotas-ac-item {
  padding: 9px 12px;
  font-size: 13.5px;
  color: #0f172a;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid #f1f5f9;
}
.rotas-ac-item:last-child { border-bottom: none; }
.rotas-ac-item:hover      { background: #f8fafc; }
.rotas-ac-sub {
  font-size: 11.5px;
  color: #64748b;
}

/* Spinner para autocompletes que fazem fetch */
.rotas-ac-spinner {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid #e2e8f0;
  border-top-color: #14b8a6;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.rotas-ac-spinner.show { opacity: 1; animation: rotas-spin 0.7s linear infinite; }
@keyframes rotas-spin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
  .rotas-modal           { width: calc(100vw - 16px); }
  .rotas-modal-edit      { width: calc(100vw - 16px); }
  .rotas-modal-header, .rotas-modal-body, .rotas-modal-actions { padding-left: 16px; padding-right: 16px; }
  .rotas-field-row-2     { grid-template-columns: 90px 1fr; }
  .rotas-field-row-rua   { grid-template-columns: 1fr 90px; }
}

.hint-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0 0 0 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--primary-color) !important;
  color: var(--secondary-color);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
  z-index: 5;
}
.hint-bubble:hover {
  background: rgba(20, 184, 166, 0.3);
  transform: scale(1.1);
}
.hint-bubble:active { transform: scale(0.92); }
.hint-bubble.is-floating {
  position: absolute;
  margin: 0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.3);
}

.hint-popover {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 280px;
  max-width: calc(100vw - 24px);
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.18);
  border: 1px solid #e2e8f0;
  padding: 14px 32px 12px 16px;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  color: #0f172a;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px) scale(0.97);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.hint-popover.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.hint-popover-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: #0d9488;
  margin: 0 0 6px;
}
.hint-popover-title svg { flex-shrink: 0; }
.hint-popover-body {
  font-size: 12.5px;
  line-height: 1.5;
  color: #334155;
}
.hint-popover-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.hint-popover-close:hover { background: #f1f5f9; color: #0f172a; }
.hint-popover::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  border-left: 1px solid #e2e8f0;
  transform: rotate(45deg);
  top: -6px;
  left: var(--hint-caret-x, 20px);
}
.hint-popover.bottom-up::before {
  top: auto;
  bottom: -6px;
  border-top: none;
  border-left: none;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}
.hint-anchor { position: relative; }
.with-hint   { display: inline-flex; align-items: center; gap: 6px; }

/* Animação */
.reflexion-soft-share button:hover svg {
  transform: scale(1.08);
}

/* ── Botão flutuante de personalizar fundo ─────────────────── */
.bg-control-btn {
  position: fixed;
  top: 92px;
  right: 36px;
  z-index: 90;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--secondary-color, #333);
  border: 1px solid rgba(0,0,0,.10);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
  display: grid;
  place-items: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.bg-control-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 22px rgba(0,0,0,.22);
}
.bg-control-btn svg { width: 20px; height: 20px; pointer-events: none; }

/* ── Backdrop ──────────────────────────────────────────────── */
.bg-panel-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  z-index: 1100;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.bg-panel-backdrop.open { opacity: 1; pointer-events: auto; }

/* ── Painel lateral ────────────────────────────────────────── */
.bg-side-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%; max-width: 360px;
  background: #fff;
  box-shadow: -10px 0 40px rgba(0,0,0,.18);
  z-index: 1200;
  transform: translateX(110%);
  transition: transform .38s cubic-bezier(.34,1.4,.64,1);
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: 16px 0 0 16px;
}
.bg-side-panel.open { transform: translateX(0); }

/* Cabeçalho */
.bgp-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}
.bgp-head h3 {
  flex: 1; margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem; font-weight: 700;
  color: #1a1a1a;
}
.bgp-close {
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: #f4f4f4; cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s;
}
.bgp-close:hover { background: #e8e8e8; }
.bgp-close svg { width: 16px; height: 16px; }

/* Corpo com scroll */
.bgp-body {
  flex: 1; overflow-y: auto;
  padding: 18px;
  display: flex; flex-direction: column; gap: 22px;
}
.bgp-body::-webkit-scrollbar { width: 4px; }
.bgp-body::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* Seção */
.bgp-section h4 {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #999; margin-bottom: 10px;
}

/* Grade de presets */
.bgp-preset-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 8px;
}
.bgp-preset {
  position: relative; aspect-ratio: 1;
  border-radius: 12px; border: 2.5px solid transparent;
  cursor: pointer; overflow: hidden;
  transition: transform .2s ease, border-color .2s ease;
  background: #f5f5f5;
}
.bgp-preset:hover { transform: translateY(-2px); }
.bgp-preset.active { border-color: var(--secondary-color, #0d8ab5); }
.bgp-preset .bgp-preview { position: absolute; inset: 0; }
.bgp-preset .bgp-label {
  position: absolute; bottom: 5px; left: 4px; right: 4px;
  font-size: .6rem; font-weight: 700;
  color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.7);
  text-align: center; line-height: 1.1;
}
.bgp-preset .bgp-check {
  position: absolute; top: 5px; right: 5px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--secondary-color, #0d8ab5); color: white;
  display: none; place-items: center;
}
.bgp-preset.active .bgp-check { display: grid; }
.bgp-preset .bgp-check svg { width: 10px; height: 10px; }

/* Slider */
.bgp-slider-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.bgp-slider-row label { flex: 1; font-size: .82rem; color: #555; font-weight: 500; }
.bgp-slider-row .bgp-val {
  font-size: .72rem; color: #888; font-weight: 600;
  min-width: 34px; text-align: right;
}
.bgp-slider {
  width: 100%; height: 5px; border-radius: 100px;
  background: #e8e8e8; appearance: none; outline: none; cursor: pointer;
}
.bgp-slider::-webkit-slider-thumb {
  appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--secondary-color, #0d8ab5);
  cursor: grab; box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.bgp-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.15); }

/* Toggle */
.bgp-toggle-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0;
}
.bgp-toggle-row > div:first-child { flex: 1; }
.bgp-toggle-label { font-size: .88rem; font-weight: 500; color: #333; }
.bgp-toggle-desc { font-size: .75rem; color: #999; margin-top: 2px; }
.bgp-toggle {
  position: relative; width: 42px; height: 23px;
  background: #ddd; border-radius: 100px;
  cursor: pointer; transition: background .25s ease;
  flex-shrink: 0; margin-top: 2px;
}
.bgp-toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 19px; height: 19px; border-radius: 50%;
  background: white; box-shadow: 0 2px 4px rgba(0,0,0,.2);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.bgp-toggle.on { background: var(--secondary-color, #0d8ab5); }
.bgp-toggle.on::after { transform: translateX(19px); }

/* Upload de imagem */
.bgp-upload-box {
  display: block;            /* <label> é inline por padrão: borda tracejada
                                fragmentava ao redor dos filhos block */
  border: 2px dashed #ddd; border-radius: 12px;
  padding: 18px; text-align: center;
  cursor: pointer; transition: border-color .2s, background .2s;
  position: relative;
}
.bgp-upload-box:hover { border-color: var(--secondary-color, #0d8ab5); background: #f8fdff; }
.bgp-upload-box svg { width: 26px; height: 26px; color: #aaa; margin-bottom: 8px; }
.bgp-upload-box .bgp-upload-title { font-size: .85rem; font-weight: 600; color: #333; margin-bottom: 3px; }
.bgp-upload-box .bgp-upload-hint { font-size: .72rem; color: #aaa; }
.bgp-upload-box input[type=file] { display: none; }

/* Preview da imagem carregada */
.bgp-img-preview {
  display: none; position: relative;
  border-radius: 10px; overflow: hidden;
  aspect-ratio: 16/7; margin-top: 10px;
}
.bgp-img-preview img { width: 100%; height: 100%; object-fit: cover; }
.bgp-img-remove {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: white; border: none;
  cursor: pointer; display: grid; place-items: center;
}
.bgp-img-remove svg { width: 12px; height: 12px; }
.bgp-img-preview.has-img { display: block; }

/* Rodapé */
.bgp-footer {
  padding: 14px 18px;
  border-top: 1px solid #eee;
  display: flex; gap: 8px;
  flex-shrink: 0;
}
.bgp-footer button {
  flex: 1; padding: 11px; border-radius: 100px;
  font-family: inherit; font-size: .85rem; font-weight: 700;
  cursor: pointer; border: none; transition: transform .15s;
}
.bgp-footer button:hover { transform: translateY(-1px); }
.bgp-btn-reset { background: #f4f4f4; color: #555; }
.bgp-btn-reset:hover { background: #e8e8e8; }
.bgp-btn-save {
  background: var(--bg-gradient);
  color: var(--slogan-color) !important; box-shadow: 0 4px 12px rgba(13,138,181,.3);
}

/* ── Aplicação do fundo na .bg-base da página ──────────────── */
body { transition: background .4s ease; }

/* ── Cards colapsáveis (Google Review + Horário de Funcionamento) ─── */
.card-colapsavel {
    overflow: hidden;
    padding: 0 !important;
    background: color-mix(in srgb, var(--bg-reflexivecard) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color1, #b963b9) 28%, transparent);
    border-radius: 14px;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.card-colapsavel-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--slogan-color, #0f172a);
    text-align: left;
    transition: background .15s ease;
}
.card-colapsavel-header:hover {
    background: color-mix(in srgb, var(--hover-color, #0d8ab5) 8%, transparent);
}
.card-colapsavel-titulo {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.95rem; font-weight: 700;
    color: var(--slogan-color, #0f172a);
}
.card-colapsavel-titulo svg { color: var(--slogan-color, #0f172a); opacity: 0.85; }
.card-colapsavel-acoes {
    display: inline-flex; align-items: center; gap: 8px;
}
.card-colapsavel-chevron {
    color: var(--slogan-color, #0f172a);
    opacity: 0.7;
    transition: transform .25s ease;
    flex-shrink: 0;
}
.card-colapsavel.is-open .card-colapsavel-chevron {
    transform: rotate(180deg);
}
.card-colapsavel-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 16px;
    transition: max-height .35s cubic-bezier(.4, 0, .2, 1),
                opacity .2s ease,
                padding .3s ease;
}
.card-colapsavel.is-open .card-colapsavel-body {
    max-height: 2000px;
    opacity: 1;
    padding: 6px 16px 16px;
}

/* ── Horário de funcionamento (editor) ──────────────────────── */
.horarios-edit {
    max-width: 600px;
    width: 92%;
    margin: 4px auto 14px;
}
.horario-dia {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--secondary-color, #ffffff) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color1, #b963b9) 18%, transparent);
    border-radius: 10px;
    color: var(--slogan-color, #0f172a);
}
.horario-dia-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer; user-select: none;
}
.horario-dia-check {
    width: 16px; height: 16px;
    accent-color: var(--hover-color, #0d8ab5);
    cursor: pointer;
}
.horario-dia-rotulo {
    font-size: 0.86rem; font-weight: 600;
    color: var(--slogan-color, #0f172a);
}
.horario-dia-intervalos {
    display: flex; flex-direction: column; gap: 6px;
    min-width: 0;
}
.horario-intervalo {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.horario-intervalo input[type="time"] {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--accent-color1, #b963b9) 28%, transparent);
    background: color-mix(in srgb, var(--secondary-color, #ffffff) 35%, transparent);
    font-family: inherit; font-size: 0.85rem;
    color: var(--input-color, #0f172a);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    color-scheme: light dark;
}
.horario-intervalo input[type="time"]:focus {
    border-color: var(--hover-color, #0d8ab5);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hover-color, #0d8ab5) 18%, transparent);
}
.horario-sep {
    font-size: 0.78rem;
    color: var(--slogan-color, #0f172a);
    opacity: 0.7;
}
.horario-intervalo-remover {
    width: 22px; height: 22px;
    border: none;
    background: rgba(220, 38, 38, 0.18);
    color: #ef4444;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease;
}
.horario-intervalo-remover:hover { background: rgba(220, 38, 38, 0.32); }
.horario-intervalo-adicionar {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--hover-color, #0d8ab5) 45%, transparent);
    border-radius: 8px;
    color: var(--slogan-color, #0f172a);
    font-family: inherit; font-size: 0.78rem; font-weight: 600;
    cursor: pointer;
    align-self: flex-start;
    transition: background .15s ease, border-color .15s ease;
}
.horario-intervalo-adicionar:hover {
    background: color-mix(in srgb, var(--hover-color, #0d8ab5) 12%, transparent);
    border-color: var(--hover-color, #0d8ab5);
}
.horario-dia-fechado {
    font-size: 0.85rem; font-style: italic;
    color: var(--slogan-color, #0f172a);
    opacity: 0.55;
}
.horarios-edit-footer {
    margin-top: 12px;
    display: flex; justify-content: flex-end;
}
.horarios-btn-aplicar-todos {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    background: color-mix(in srgb, var(--hover-color, #0d8ab5) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--hover-color, #0d8ab5) 32%, transparent);
    color: var(--slogan-color, #0f172a);
    border-radius: 8px;
    font-family: inherit; font-size: 0.78rem; font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.horarios-btn-aplicar-todos:hover {
    background: color-mix(in srgb, var(--hover-color, #0d8ab5) 22%, transparent);
    transform: translateY(-1px);
}
@media (max-width: 520px) {
    .horario-dia {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .horario-intervalo input[type="time"] { font-size: 0.8rem; }
}

/* ── Status de funcionamento (viewpage) ─────────────────────── */
.status-funcionamento {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    font-family: inherit; font-size: 0.88rem; font-weight: 600;
    width: fit-content;
    margin: 8px auto 0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    background: color-mix(in srgb, var(--secondary-color, #ffffff) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color1, #b963b9) 25%, transparent);
    color: var(--slogan-color, #0f172a);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .2s ease, border-color .2s ease;
}
.status-funcionamento.is-aberto {
    border-color: color-mix(in srgb, #10b981 55%, var(--accent-color1, #b963b9));
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08),
                inset 0 0 0 1px color-mix(in srgb, #10b981 30%, transparent);
}
.status-funcionamento.is-fechado {
    border-color: color-mix(in srgb, #ef4444 55%, var(--accent-color1, #b963b9));
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08),
                inset 0 0 0 1px color-mix(in srgb, #ef4444 28%, transparent);
}
.status-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
}
.status-funcionamento.is-aberto .status-dot {
    background: #10b981;
    animation: statusPulseGreen 1.8s ease-in-out infinite;
}
.status-funcionamento.is-fechado .status-dot {
    background: #ef4444;
}
@keyframes statusPulseGreen {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.status-label { line-height: 1; }
.status-sub {
    font-size: 0.78rem; font-weight: 500; opacity: 0.85;
}
.status-ver-horarios {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 6px;
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border-left: 1px solid rgba(15, 23, 42, 0.18);
    opacity: 0.85;
    transition: opacity .15s ease;
}
.status-ver-horarios:hover { opacity: 1; }
.status-ver-horarios svg { transition: transform .2s ease; }
.status-ver-horarios.is-open svg { transform: rotate(180deg); }

.status-detalhes {
    width: 90%;
    max-width: 460px;
    margin: 8px auto 0;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    font-size: 0.84rem;
}
.status-detalhe-linha {
    display: flex; justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px dashed rgba(15, 23, 42, 0.06);
    color: var(--slogan-color, #475569);
}
.status-detalhe-linha:last-child { border-bottom: none; }
.status-detalhe-linha.is-hoje {
    font-weight: 700;
    color: var(--primary-color, #0d8ab5);
}
.status-detalhe-fechado { color: #94a3b8; font-style: italic; }

/* ── Datas Especiais (editor) ───────────────────────────────────────── */
.datas-especiais-edit {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed color-mix(in srgb, var(--accent-color1, #b963b9) 22%, transparent);
}
.datas-especiais-cabecalho {
    margin-bottom: 10px;
}
.datas-especiais-titulo-wrap {
    display: flex; align-items: center; gap: 6px;
}
.datas-especiais-titulo {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--slogan-color, #0f172a);
}
.datas-especiais-descr {
    margin: 4px 0 0;
    font-size: 0.78rem;
    color: var(--slogan-color, #475569);
    opacity: 0.75;
}
.datas-especiais-lista {
    display: flex; flex-direction: column; gap: 10px;
}
.datas-especiais-lista:empty { display: none; }
.data-especial-item {
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--secondary-color, #ffffff) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color1, #b963b9) 18%, transparent);
    border-radius: 10px;
}
.data-especial-linha {
    display: flex; flex-wrap: wrap; gap: 10px;
    align-items: flex-end;
}
.data-especial-datas .data-especial-campo { flex: 1 1 130px; }
.data-especial-campo {
    display: flex; flex-direction: column; gap: 4px;
    flex: 1 1 100%;
    min-width: 0;
}
.data-especial-campo > span {
    font-size: 0.72rem; font-weight: 600;
    color: var(--slogan-color, #0f172a);
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.data-especial-campo input[type="text"],
.data-especial-campo input[type="date"] {
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--accent-color1, #b963b9) 28%, transparent);
    background: color-mix(in srgb, var(--secondary-color, #ffffff) 35%, transparent);
    font-family: inherit; font-size: 0.85rem;
    color: var(--input-color, #0f172a);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    color-scheme: light dark;
    width: 100%;
    box-sizing: border-box;
}
.data-especial-campo input[type="text"]:focus,
.data-especial-campo input[type="date"]:focus {
    border-color: var(--hover-color, #0d8ab5);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hover-color, #0d8ab5) 18%, transparent);
}
.data-especial-rodape {
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.data-especial-fechado-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.82rem; font-weight: 600;
    color: var(--slogan-color, #0f172a);
    cursor: pointer; user-select: none;
}
.data-especial-fechado-toggle input[type="checkbox"] {
    width: 15px; height: 15px;
    accent-color: var(--hover-color, #0d8ab5);
    cursor: pointer;
}
.data-especial-remover {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px;
    background: rgba(220, 38, 38, 0.10);
    border: 1px solid rgba(220, 38, 38, 0.25);
    color: #ef4444;
    border-radius: 8px;
    font-family: inherit; font-size: 0.75rem; font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
.data-especial-remover:hover { background: rgba(220, 38, 38, 0.18); }
.datas-especiais-rodape {
    margin-top: 10px;
    display: flex; justify-content: flex-start;
}
.datas-especiais-adicionar {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--hover-color, #0d8ab5) 45%, transparent);
    border-radius: 8px;
    color: var(--slogan-color, #0f172a);
    font-family: inherit; font-size: 0.78rem; font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.datas-especiais-adicionar:hover {
    background: color-mix(in srgb, var(--hover-color, #0d8ab5) 12%, transparent);
    border-color: var(--hover-color, #0d8ab5);
}
@media (max-width: 520px) {
    .data-especial-datas .data-especial-campo { flex: 1 1 100%; }
    .data-especial-rodape { flex-direction: column; align-items: stretch; }
    .data-especial-remover { align-self: flex-end; }
}

/* ── Aviso de Data Especial (viewpage) ──────────────────────────────── */
.data-especial-aviso {
    display: flex; align-items: flex-start; gap: 10px;
    width: 92%; max-width: 600px;
    margin: 10px auto 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--secondary-color, #ffffff) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color1, #b963b9) 25%, transparent);
    border-left: 3px solid #d97706;
    color: var(--slogan-color, #0f172a);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-family: inherit;
}
.data-especial-aviso.is-fechado {
    border-left-color: #ef4444;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08),
                inset 0 0 0 1px color-mix(in srgb, #ef4444 22%, transparent);
}
.data-especial-aviso-icone {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: color-mix(in srgb, #d97706 16%, transparent);
    color: #d97706;
}
.data-especial-aviso.is-fechado .data-especial-aviso-icone {
    background: color-mix(in srgb, #ef4444 16%, transparent);
    color: #ef4444;
}
.data-especial-aviso-texto {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.data-especial-aviso-titulo {
    font-size: 0.9rem; font-weight: 700;
    line-height: 1.25;
}
.data-especial-aviso-sub {
    font-size: 0.8rem; font-weight: 500;
    line-height: 1.35;
    opacity: 0.85;
}

/* ─── Leitor de Reflexão (IA TTS) ──────────────────────────────────── */
.reflexion-voice-actions {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px;
  font-family: inherit;
}

/* Segmented control de voz (Feminina / Masculina) */
.voz-toggle {
  position: relative;
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--secondary-color) 65%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-color1, #b963b9) 28%, transparent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
.voz-toggle input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.voz-toggle-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem; font-weight: 600;
  color: color-mix(in srgb, var(--slogan-color, #0f172a) 60%, transparent);
  cursor: pointer;
  user-select: none;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.voz-toggle-opt svg { opacity: 0.7; transition: opacity .2s ease; }
.voz-toggle-opt:hover { color: var(--slogan-color, #0f172a); }
.voz-toggle input[type="radio"]:checked + .voz-toggle-opt {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--hover-color, #0d8ab5) 90%, white) 0%,
    color-mix(in srgb, var(--hover-color, #0d8ab5) 70%, var(--accent-color1, #b963b9)) 100%);
  color: #fff;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--hover-color, #0d8ab5) 40%, transparent);
}
.voz-toggle input[type="radio"]:checked + .voz-toggle-opt svg { opacity: 1; }
.voz-toggle input[type="radio"]:focus-visible + .voz-toggle-opt {
  outline: 2px solid color-mix(in srgb, var(--hover-color, #0d8ab5) 70%, transparent);
  outline-offset: 2px;
}

/* Botão de play/stop */
.btn-ouvir-reflexao {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px 9px 14px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg,
    var(--hover-color, #0d8ab5) 0%,
    color-mix(in srgb, var(--hover-color, #0d8ab5) 60%, var(--accent-color1, #b963b9)) 100%);
  color: #fff;
  font-family: inherit; font-size: 0.85rem; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--hover-color, #0d8ab5) 35%, transparent);
  transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
.btn-ouvir-reflexao:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--hover-color, #0d8ab5) 45%, transparent);
  filter: brightness(1.05);
}
.btn-ouvir-reflexao:active { transform: translateY(0); filter: brightness(0.95); }
.btn-ouvir-reflexao:disabled { opacity: 0.7; cursor: progress; }

.btn-ouvir-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  position: relative;
  flex-shrink: 0;
}
.btn-ouvir-icone .ico-play,
.btn-ouvir-icone .ico-stop,
.btn-ouvir-icone .ico-load { position: absolute; transition: opacity .2s ease, transform .2s ease; }
.btn-ouvir-icone .ico-stop,
.btn-ouvir-icone .ico-load { opacity: 0; transform: scale(0.7); }

.btn-ouvir-reflexao[data-state="idle"]    .ico-play { opacity: 1; transform: scale(1); }
.btn-ouvir-reflexao[data-state="loading"] .ico-play { opacity: 0; transform: scale(0.7); }
.btn-ouvir-reflexao[data-state="loading"] .ico-load { opacity: 1; transform: scale(1); animation: ouvirSpin 1s linear infinite; }
.btn-ouvir-reflexao[data-state="playing"] .ico-play { opacity: 0; transform: scale(0.7); }
.btn-ouvir-reflexao[data-state="playing"] .ico-stop { opacity: 1; transform: scale(1); }

/* Pulso suave enquanto reproduz */
.btn-ouvir-reflexao[data-state="playing"] {
  animation: ouvirPulse 1.6s ease-in-out infinite;
}
@keyframes ouvirPulse {
  0%, 100% { box-shadow: 0 4px 12px color-mix(in srgb, var(--hover-color, #0d8ab5) 35%, transparent); }
  50%      { box-shadow: 0 6px 18px color-mix(in srgb, var(--hover-color, #0d8ab5) 60%, transparent); }
}
@keyframes ouvirSpin {
  to { transform: rotate(360deg) scale(1); }
}

/* Bloqueia interação do toggle enquanto está gerando */
.reflexion-voice-actions[data-state="loading"] .voz-toggle {
  opacity: 0.6; pointer-events: none;
}

@media (max-width: 480px) {
  .reflexion-voice-actions { flex-direction: column; gap: 10px; }
  .voz-toggle { width: 100%; justify-content: center; }
  .voz-toggle-opt { flex: 1; justify-content: center; }
  .btn-ouvir-reflexao { width: 100%; justify-content: center; }
}

/* Legado: estilos antigos do botão simples (mantidos para fallback) */
.btn-recitar-reflexao {
  margin-top: 14px;
  padding: 9px 14px;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-color) 14%, var(--secondary-color));
  color: var(--slogan-color);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s ease;
}

.btn-recitar-reflexao:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--hover-color) 16%, var(--secondary-color));
}

.btn-recitar-reflexao.recitando {
  opacity: 0.75;
}

/* ───────── Seletor de produtos da bandeira (modal Editar Botão) ───────── */
.prod-pick-selected {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 44px;
  padding: 6px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: var(--bg-gradient);
}
.prod-pick-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--primary-color);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.86rem;
}
.prod-pick-chip-ghost { opacity: 0.4; }
.prod-pick-drag {
  cursor: grab;
  color: #94a3b8;
  letter-spacing: -2px;
  user-select: none;
}
.prod-pick-chip-nome {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--secondary-color);
}
.prod-pick-chip-x {
  border: 0;
  background: transparent;
  color: #ef4444;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.prod-pick-list {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px;
}
.prod-pick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.prod-pick-item:hover { background: var(--hover-color); }
.prod-pick-item.is-checked { background: var(--bg-gradient) }
.prod-pick-item .prod-pick-cb { width: 16px; height: 16px; flex: none; }
.prod-pick-foto {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--secondary-color);
}
.prod-pick-foto img { width: 100%; height: 100%; object-fit: cover; }
.prod-pick-foto-vazia { font-size: 1.1rem; }
.prod-pick-info { display: flex; flex-direction: column; min-width: 0; }
.prod-pick-nome {
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prod-pick-meta { font-size: 0.76rem; color: #64748b; }
.prod-pick-empty {
  padding: 10px;
  font-size: 0.82rem;
  color: #94a3b8;
  text-align: center;
}

/* Ações do QR Code (Modos de Origem de Acesso) */
.qr-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}
.qr-logo-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--slogan-color) !important;
  cursor: pointer;
}
.qr-logo-toggle input {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: #0d8ab5;
}
.qr-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #444;
  background: #fff;
  border: 1px solid #d4dce3;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.qr-action-btn:hover {
  background: #f4f6f8;
  border-color: #0d8ab5;
  color: #0d8ab5;
}