:root {
  --reservaai-vh: 100dvh;
  --bg: #edf1f8;
  --surface: #ffffff;
  --text: #203b72;
  --muted: #5d6f95;
  --primary: #2b4f97;
  --primary-dark: #1f3f79;
  --accent: #6cd04d;
  --accent-dark: #3fae49;
  --border: #d5e0f1;
  --admin-topbar-stack-height: 4.25rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 12% 0%, #dce7fb 0%, transparent 42%),
    radial-gradient(circle at 90% 6%, #d9f0d8 0%, transparent 28%),
    linear-gradient(180deg, #eff3fa, #e7eef9);
  color: var(--text);
}

.container {
  width: min(1100px, 92%);
  margin: 0 auto;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 2500;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(214, 226, 245, 0.72);
  overflow: visible;
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  min-height: 58px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 10px 28px rgba(26, 47, 92, 0.12);
}

.topbar.scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: rgba(196, 214, 239, 0.92);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82) inset,
    0 12px 30px rgba(17, 38, 76, 0.14);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 58px;
  padding: 0;
}

.brand {
  position: relative;
  width: 236px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.admin-topbar-leading {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.admin-topbar-spacer {
  display: none;
}

.auth-topbar-nav {
  justify-content: center;
}

.admin-topbar-nav {
  position: relative;
  justify-content: center;
}

.admin-topbar-nav .admin-topbar-leading {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  justify-content: center;
  pointer-events: none;
}

.admin-topbar-nav .brand {
  pointer-events: auto;
}

.admin-topbar-nav .header-actions {
  position: relative;
  z-index: 1;
}

.header-actions .btn-ghost {
  border: 1px solid rgba(71, 141, 83, 0.22);
  color: #215f32;
  background: rgba(108, 208, 77, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.header-actions .btn-ghost:hover {
  background: rgba(108, 208, 77, 0.2);
  color: #184b27;
  box-shadow: 0 10px 20px rgba(63, 174, 73, 0.16);
}

.brand img {
  position: absolute;
  top: -50px;
  left: 50%;
  height: 192px;
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 22px 34px rgba(25, 54, 105, 0.22));
  transform: translateX(-50%);
  pointer-events: none;
}

nav {
  display: flex;
  gap: 1rem;
}

nav a {
  color: #2b4f97;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

nav a:hover {
  color: #1f3f79;
}

.btn {
  border: 0;
  border-radius: 10px;
  padding: 0.66rem 0.92rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.2s ease;
}

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

.btn-primary {
  background: linear-gradient(90deg, #1d4ed8, #2563eb 52%, #1e40af);
  color: #fff;
  box-shadow: 0 14px 26px rgba(30, 64, 175, 0.34);
}

.btn-primary:hover {
  background: linear-gradient(90deg, #1e40af, #1d4ed8 52%, #1e3a8a);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 18px 30px rgba(30, 64, 175, 0.4);
}

.btn-ghost {
  border: 1px solid rgba(201, 218, 247, 0.28);
  color: #f3f8ff;
  background: rgba(255, 255, 255, 0.06);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

.hero {
  position: relative;
  min-height: 84vh;
  padding: 3.55rem 0 3rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 18%, rgba(54, 107, 221, 0.32), transparent 25%),
    radial-gradient(circle at 84% 24%, rgba(78, 199, 133, 0.2), transparent 22%),
    linear-gradient(135deg, #071223 0%, #0d1b35 42%, #11254a 100%);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: blur(2px) saturate(1.06);
  transform: scale(1.02);
}

.hero-scenes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-scene {
  position: absolute;
  inset: -6%;
  opacity: 0;
  transition: opacity 1.4s ease;
  transform: scale(1.08);
  mix-blend-mode: normal;
}

.hero-scene.is-active {
  opacity: 0.72;
}

.hero-scene::before,
.hero-scene::after {
  content: "";
  position: absolute;
  inset: 0;
}

.hero-scene::before {
  background-size: cover;
  background-position: center;
  animation: heroSceneFloat 14s ease-in-out infinite;
  filter: saturate(1.02) contrast(0.98) brightness(0.78);
}

.hero-scene::after {
  opacity: 1;
}

.hero-scene-one::before {
  background-image: url("assets/hero-barbearia-1.jpg.jpg");
  background-position: center 28%;
}

.hero-scene-one::after {
  background:
    linear-gradient(90deg, rgba(6, 13, 26, 0.52), rgba(8, 19, 38, 0.22) 42%, rgba(8, 18, 34, 0.46)),
    radial-gradient(circle at 70% 25%, rgba(255, 210, 145, 0.12), transparent 22%);
}

.hero-scene-two::before {
  background-image: url("assets/hero-barbearia-2.jpg.jpg");
  background-position: center 36%;
}

.hero-scene-two::after {
  background:
    linear-gradient(90deg, rgba(5, 12, 24, 0.54), rgba(8, 20, 39, 0.18) 44%, rgba(6, 16, 30, 0.46)),
    radial-gradient(circle at 18% 35%, rgba(134, 194, 255, 0.1), transparent 24%);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 13, 25, 0.62) 0%, rgba(7, 18, 34, 0.34) 46%, rgba(6, 15, 29, 0.5) 100%),
    radial-gradient(circle at 80% 44%, rgba(61, 140, 255, 0.12), transparent 30%),
    rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.hero-glow {
  position: absolute;
  inset: auto auto 7% 54%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58, 132, 255, 0.2), rgba(58, 132, 255, 0));
  filter: blur(18px);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1.5rem;
  align-items: center;
}

.hero-copy {
  max-width: 650px;
  padding-top: 0.35rem;
}

.badge {
  display: inline-flex;
  margin: 0;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid #c2d3f1;
  background: rgba(237, 244, 255, 0.95);
  color: #2c4d8e;
  font-weight: 700;
  font-size: 0.8rem;
}

.hero .badge {
  border-color: rgba(162, 193, 248, 0.55);
  background: rgba(27, 72, 156, 0.34);
  color: #d8e8ff;
}

h1 {
  margin: 1rem 0;
  font-size: clamp(2.3rem, 5vw, 4rem);
  line-height: 0.98;
  letter-spacing: -1.2px;
}

.hero h1 {
  color: #ffffff;
}

.hero-text,
.section-text {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.hero .hero-text {
  color: #e5eeff;
  font-size: 1.14rem;
  max-width: 610px;
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  margin: 1rem 0 0.7rem;
}

.money-proof {
  margin: 0.55rem 0 0;
  color: #bfd6ff;
  font-weight: 600;
  line-height: 1.5;
}

.hero-value-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
}

.hero-value-strip span {
  display: inline-flex;
  align-items: center;
  padding: 0.52rem 0.82rem;
  border-radius: 999px;
  border: 1px solid rgba(168, 194, 239, 0.34);
  background: rgba(12, 28, 58, 0.56);
  color: #f2f7ff;
  font-size: 0.84rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hero .btn-primary {
  padding: 0.85rem 1.18rem;
  box-shadow: 0 20px 34px rgba(30, 64, 175, 0.34);
}

.hero .btn-ghost {
  background: rgba(255, 255, 255, 0.08);
}

.hero-urgency {
  margin: 0 0 0.65rem;
  color: #f3f7ff;
  font-size: 0.95rem;
  font-weight: 700;
}

.micro-trust {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.micro-trust span {
  border: 1px solid rgba(193, 215, 248, 0.45);
  background: rgba(15, 38, 78, 0.56);
  color: #e6efff;
  border-radius: 999px;
  padding: 0.38rem 0.65rem;
  font-size: 0.76rem;
  font-weight: 600;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 0.4rem;
}

.stats div {
  background: rgba(10, 24, 49, 0.64);
  border: 1px solid rgba(170, 195, 238, 0.24);
  border-radius: 14px;
  padding: 0.8rem;
  backdrop-filter: blur(8px);
}

.stats strong {
  display: block;
  font-size: 1.02rem;
  color: #ffffff;
}

.stats span {
  color: #d0def7;
  font-size: 0.85rem;
  line-height: 1.45;
  margin-top: 0.25rem;
  display: block;
}

.control-note {
  margin: 0.9rem 0 0;
  color: #d7e4ff;
  font-size: 0.92rem;
  font-weight: 600;
  max-width: 620px;
}

.hero-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(226, 239, 255, 0.025));
  border: 1px solid rgba(214, 228, 249, 0.1);
  border-radius: 28px;
  padding: 1.25rem 1.1rem 1rem;
  box-shadow:
    0 12px 24px rgba(8, 19, 38, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-top: 0;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
}

.card,
.step,
.compare-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(206, 221, 245, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 14px 30px rgba(31, 63, 122, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.hero-kicker,
.hero-title,
.hero-subtitle,
.hero-proof,
.hero-value-strip,
.hero-cta-group,
.hero-urgency-line,
.hero-trust {
  opacity: 0;
  transform: translateY(14px);
  animation: heroFadeIn 0.65s ease forwards;
}

.hero-title {
  animation-delay: 0.12s;
}

.hero-subtitle {
  animation-delay: 0.26s;
}

.hero-proof {
  animation-delay: 0.38s;
}

.hero-value-strip {
  animation-delay: 0.46s;
}

.hero-cta-group {
  animation-delay: 0.58s;
}

.hero-urgency-line {
  animation-delay: 0.68s;
}

.hero-trust {
  animation-delay: 0.78s;
}

@keyframes heroFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroSceneFloat {
  0% {
    transform: scale(1.02) translate3d(0, 0, 0);
  }
  50% {
    transform: scale(1.08) translate3d(-1.5%, 1%, 0);
  }
  100% {
    transform: scale(1.03) translate3d(1%, -1%, 0);
  }
}

.chat-head {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.05rem 0 0.95rem;
  background: linear-gradient(180deg, #107f64 0%, #0e6d57 100%);
  border-bottom: 1px solid rgba(5, 62, 48, 0.5);
}

.chat-head img {
  width: 200px;
  max-height: 90px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
}

.chat-head strong,
.chat-head small {
  display: none;
}

.chat-line {
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.55rem;
  font-size: 0.93rem;
  line-height: 1.45;
}

.chat-line.bot {
  background: #e7f2ff;
  color: #203d74;
}

.chat-line.client {
  background: #eaf7e7;
  color: #1d5a31;
}

.chat-note {
  color: rgba(241, 247, 255, 0.92);
  margin: 0.1rem 0.2rem 0.1rem;
  font-size: 0.9rem;
  text-align: center;
  max-width: 320px;
}

.phone-frame {
  position: relative;
  width: 268px;
  height: 582px;
  background: #0c1018;
  border-radius: 38px;
  padding: 11px;
  box-shadow:
    0 24px 42px rgba(10, 20, 38, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 -4px 10px rgba(0, 0, 0, 0.6);
  transform: rotate(0deg);
  z-index: 1;
}

.phone-frame::before,
.phone-frame::after {
  content: "";
  position: absolute;
  right: -3px;
  border-radius: 4px;
  background: linear-gradient(180deg, #617186, #364458);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.phone-frame::before {
  top: 108px;
  width: 3px;
  height: 44px;
}

.phone-frame::after {
  top: 162px;
  width: 3px;
  height: 70px;
}

.phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 118px;
  height: 25px;
  background: #05090f;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 5;
}

.notch-speaker {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2c333d, #5e6773);
}

.notch-camera {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #6784bd, #090f19 70%);
}

.phone-screen {
  position: relative;
  border-radius: 29px;
  overflow: hidden;
  background: #e8f5ec;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.phone-app {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateX(16px) scale(0.98);
  transition: opacity 0.65s ease, transform 0.75s ease;
}

.phone-app.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.phone-app-chat {
  z-index: 2;
}

.phone-app-calendar {
  z-index: 3;
  background:
    radial-gradient(circle at 18% 16%, rgba(125, 179, 255, 0.22), transparent 25%),
    linear-gradient(180deg, #eef4ff 0%, #e8f0fe 100%);
  color: #1c3568;
}

.phone-app-checkin {
  z-index: 4;
  background:
    radial-gradient(circle at 86% 10%, rgba(57, 191, 128, 0.16), transparent 24%),
    radial-gradient(circle at 14% 88%, rgba(42, 114, 255, 0.1), transparent 22%),
    linear-gradient(180deg, #f6fbf7 0%, #eef8f1 100%);
  color: #214339;
}

.phone-app-validation {
  z-index: 5;
  background:
    radial-gradient(circle at 90% 10%, rgba(70, 202, 117, 0.14), transparent 24%),
    radial-gradient(circle at 10% 88%, rgba(47, 115, 255, 0.12), transparent 22%),
    linear-gradient(180deg, #f7fcf9 0%, #eff8f2 100%);
  color: #21453a;
}

.phone-app-dashboard {
  z-index: 6;
  background:
    radial-gradient(circle at 88% 8%, rgba(82, 149, 255, 0.18), transparent 24%),
    radial-gradient(circle at 6% 92%, rgba(65, 196, 110, 0.14), transparent 22%),
    linear-gradient(180deg, #f7fbff 0%, #edf4ff 100%);
  color: #173565;
}

.phone-screen.is-calendar .phone-app-chat {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-18px) scale(0.98);
}

.phone-screen.is-calendar .phone-app-calendar {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.phone-screen.is-checkin .phone-app-chat,
.phone-screen.is-checkin .phone-app-calendar {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-22px) scale(0.97);
}

.phone-screen.is-checkin .phone-app-checkin {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.phone-screen.is-validation .phone-app-chat,
.phone-screen.is-validation .phone-app-calendar,
.phone-screen.is-validation .phone-app-checkin {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-22px) scale(0.97);
}

.phone-screen.is-validation .phone-app-validation {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.phone-screen.is-dashboard .phone-app-chat,
.phone-screen.is-dashboard .phone-app-calendar,
.phone-screen.is-dashboard .phone-app-checkin,
.phone-screen.is-dashboard .phone-app-validation {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-22px) scale(0.97);
}

.phone-screen.is-dashboard .phone-app-dashboard {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.chat-window {
  position: relative;
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.24), transparent 30%),
    radial-gradient(circle at 85% 0%, rgba(201, 255, 223, 0.2), transparent 35%),
    linear-gradient(180deg, #d8efe3 0%, #d2ebdd 100%);
  padding: 0.95rem 0.88rem 0.82rem;
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
  scroll-behavior: smooth;
}

.chat-row {
  display: flex;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
  align-items: flex-end;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.chat-row.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.client-row {
  justify-content: flex-end;
}

.bot-row {
  justify-content: flex-start;
}

.avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 0.66rem;
  font-weight: 700;
  flex: 0 0 26px;
}

.client-avatar {
  background: #dce9ff;
  color: #2a4f95;
}

.bot-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #ffffff;
  background-image: url("./Imagens/image-removebg-robo.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: transparent;
  font-size: 0;
}

.audio-bubble {
  position: relative;
  padding-right: 1rem;
}

.audio-bubble p {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.bubble {
  max-width: 78%;
  border-radius: 16px;
  padding: 0.62rem 0.78rem;
  box-shadow: 0 8px 18px rgba(15, 31, 43, 0.12);
}

.bubble p {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.35;
}

.bubble small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.68rem;
  color: #5e739d;
}

.bubble.client {
  background: #eef1f6;
  color: #223445;
}

.bubble.bot {
  background: #d8fdd2;
  color: #1f5130;
}

.success-bubble {
  border: 1px solid rgba(62, 168, 91, 0.22);
}

.option-bubble {
  width: 100%;
}

.option-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.option-buttons button {
  border: 1px solid #c0d3ef;
  background: #ffffff;
  color: #1e4178;
  border-radius: 10px;
  padding: 0.35rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.option-buttons button.is-selected {
  background: #1e4178;
  border-color: #1e4178;
  color: #ffffff;
  transform: scale(0.96);
  box-shadow: 0 8px 16px rgba(30, 65, 120, 0.22);
}

.option-buttons .audio-option {
  background: #edf7ec;
  border-color: #bde0b8;
  color: #246135;
}

.typing {
  display: inline-flex;
  gap: 4px;
  margin: 0.2rem 0 0.15rem 2rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.typing.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7d9f8a;
  animation: blink 1.2s infinite;
}

.chat-input-bar {
  border-top: 1px solid #d1e4d7;
  background: #f2f6f4;
  padding: 0.62rem 0.72rem 0.74rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.chat-input-pill {
  flex: 1;
  border-radius: 999px;
  border: 1px solid #d6e2dc;
  background: #fff;
  color: #7c8e97;
  font-size: 0.76rem;
  padding: 0.38rem 0.62rem;
}

.chat-input-send {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: #0d8f6f;
  color: #fff;
  font-size: 0.8rem;
  box-shadow: 0 6px 10px rgba(13, 143, 111, 0.32);
}

.calendar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0.85rem;
  border-bottom: 1px solid rgba(137, 168, 225, 0.28);
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(10px);
}

.calendar-head-copy {
  display: grid;
  gap: 0.16rem;
}

.calendar-label {
  margin: 0 0 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5b74ab;
}

.calendar-head strong {
  font-size: 1rem;
}

.calendar-subtitle {
  color: #6e81ab;
  font-size: 0.66rem;
  line-height: 1.35;
}

.calendar-sync {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.34rem 0.56rem;
  border-radius: 999px;
  background: rgba(32, 85, 191, 0.1);
  color: #2450a7;
  font-size: 0.7rem;
  font-weight: 700;
}

.calendar-toolbar {
  display: flex;
  gap: 0.38rem;
  padding: 0.55rem 0.9rem 0.7rem;
  background: rgba(255, 255, 255, 0.44);
  border-bottom: 1px solid rgba(174, 195, 235, 0.22);
}

.calendar-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 0.32rem 0.54rem;
  border-radius: 999px;
  background: rgba(75, 110, 187, 0.08);
  color: #5973a9;
  font-size: 0.66rem;
  font-weight: 700;
}

.calendar-chip.is-active {
  background: #2f73ff;
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(47, 115, 255, 0.2);
}

.calendar-body {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0.45rem;
  padding: 0.9rem 0.7rem 0.75rem 0.6rem;
  flex: 1;
}

.calendar-hours {
  display: grid;
  grid-template-rows: 38px repeat(16, 1fr);
  color: #6d81ae;
  font-size: 0.62rem;
  font-weight: 700;
}

.calendar-hours span {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 0.15rem;
  padding-right: 0.12rem;
}

.calendar-grid {
  position: relative;
  display: grid;
  grid-template-rows: 38px repeat(16, 1fr);
  gap: 0.18rem;
  padding: 0 0.2rem 0.2rem;
}

.calendar-grid::before {
  content: "";
  position: absolute;
  inset: 38px 0 0;
  border-radius: 18px;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(166, 190, 234, 0.14) 0,
      rgba(166, 190, 234, 0.14) 1px,
      transparent 1px,
      transparent calc((100% - 0px) / 16)
    ),
    repeating-linear-gradient(
      180deg,
      rgba(140, 166, 214, 0.08) 0,
      rgba(140, 166, 214, 0.08) calc((100% - 0px) / 16 / 2),
      transparent calc((100% - 0px) / 16 / 2),
      transparent calc((100% - 0px) / 16)
    ),
    rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(172, 195, 236, 0.4);
}

.calendar-column-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.7rem 0 0.9rem;
  color: #43609a;
  font-size: 0.72rem;
}

.calendar-column-header div {
  display: grid;
  gap: 0.1rem;
}

.calendar-column-header strong {
  font-size: 0.8rem;
}

.calendar-column-header small {
  color: #6280b9;
  font-size: 0.66rem;
  font-weight: 700;
}

.calendar-now-line {
  position: relative;
  z-index: 2;
  grid-row: var(--line-row);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0.42rem;
}

.calendar-now-line span {
  flex: 1;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(32, 100, 230, 0.9), rgba(95, 171, 255, 0.25));
  box-shadow: 0 0 0 3px rgba(47, 115, 255, 0.08);
}

.calendar-now-line span::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #2f73ff;
  box-shadow: 0 0 0 5px rgba(47, 115, 255, 0.12);
}

.calendar-now-line small {
  color: #2f73ff;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.calendar-slot {
  position: relative;
  z-index: 1;
  grid-row: var(--slot-start) / span var(--slot-size);
  margin: 0 0.35rem;
  border-radius: 16px;
  padding: 0.48rem 0.65rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.16rem;
  overflow: hidden;
  box-shadow: 0 10px 18px rgba(34, 59, 109, 0.08);
}

.calendar-slot small,
.calendar-slot strong,
.calendar-slot p,
.calendar-tag {
  position: relative;
  z-index: 1;
}

.calendar-slot small {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.78;
}

.calendar-slot strong {
  font-size: 0.83rem;
}

.calendar-slot p {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.25;
}

.slot-muted {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(243, 247, 255, 0.92));
  color: #49618f;
  border: 1px solid rgba(173, 194, 231, 0.42);
}

.slot-highlight {
  background: linear-gradient(180deg, rgba(52, 109, 229, 0.96), rgba(35, 84, 194, 0.98));
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: 0 16px 28px rgba(37, 79, 171, 0.28);
  opacity: 0;
  transform: translate3d(86px, 168px, 0) scale(0.42);
  transform-origin: right bottom;
}

.phone-screen.is-calendar .slot-highlight {
  animation: calendarEntryIn 0.95s cubic-bezier(0.18, 0.88, 0.22, 1) forwards;
  animation-delay: 0.5s;
}

.calendar-entry-glow {
  position: absolute;
  inset: auto -14% -58% auto;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(145, 203, 255, 0.55), rgba(145, 203, 255, 0));
}

.calendar-tag {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 0.18rem;
  padding: 0.22rem 0.46rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.6rem;
  font-weight: 700;
}

.calendar-transfer {
  position: absolute;
  right: 0.8rem;
  bottom: 4.35rem;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.52rem;
  width: 172px;
  padding: 0.56rem 0.66rem;
  border-radius: 16px;
  background: rgba(19, 37, 72, 0.9);
  color: #f5f8ff;
  box-shadow: 0 16px 30px rgba(10, 23, 46, 0.22);
  opacity: 0;
  transform: translate3d(18px, 26px, 0) scale(0.9);
}

.phone-screen.is-calendar .calendar-transfer {
  animation: calendarTransfer 1.15s cubic-bezier(0.18, 0.88, 0.22, 1) forwards;
}

.calendar-transfer-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(180deg, #44d46b, #28b256);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 900;
  flex: 0 0 26px;
}

.calendar-transfer strong,
.calendar-transfer small {
  display: block;
}

.calendar-transfer strong {
  font-size: 0.68rem;
  line-height: 1.2;
}

.calendar-transfer small {
  margin-top: 0.1rem;
  color: #c8d8ff;
  font-size: 0.62rem;
}

.calendar-footer {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.72rem 0.9rem 0.86rem;
  border-top: 1px solid rgba(171, 193, 231, 0.34);
  background: rgba(255, 255, 255, 0.76);
}

.calendar-footer p {
  margin: 0;
  color: #31528f;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
}

.calendar-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2f73ff;
  box-shadow: 0 0 0 5px rgba(47, 115, 255, 0.12);
}

.checkin-head,
.checkin-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.95rem 0.95rem 0.82rem;
  background: rgba(255, 255, 255, 0.76);
  border-bottom: 1px solid rgba(171, 214, 190, 0.3);
}

.checkin-label {
  margin: 0 0 0.14rem;
  color: #5d8d74;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.checkin-head strong {
  font-size: 0.94rem;
}

.checkin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.32rem 0.5rem;
  border-radius: 999px;
  background: rgba(53, 179, 92, 0.12);
  color: #2f7a4d;
  font-size: 0.62rem;
  font-weight: 800;
}

.checkin-body {
  flex: 1;
  padding: 0.82rem 0.78rem 0.72rem;
  display: grid;
  gap: 0.62rem;
}

.checkin-alert-card,
.checkin-choice,
.checkin-response-card {
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(182, 219, 196, 0.48);
  border-radius: 16px;
  box-shadow: 0 12px 22px rgba(36, 78, 54, 0.08);
}

.checkin-alert-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.56rem;
  padding: 0.74rem;
}

.checkin-alert-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(180deg, #18b86b, #109055);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 900;
}

.checkin-alert-copy strong {
  display: block;
  font-size: 0.8rem;
  margin-bottom: 0.16rem;
}

.checkin-alert-copy p,
.checkin-alert-copy small {
  margin: 0;
  color: #5c7d70;
  font-size: 0.64rem;
  line-height: 1.4;
  font-weight: 700;
}

.checkin-alert-copy small {
  display: block;
  margin-top: 0.18rem;
}

.checkin-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.52rem;
}

.checkin-choice {
  padding: 0.72rem;
  display: grid;
  gap: 0.18rem;
}

.checkin-choice small {
  color: #6c8c7d;
  font-size: 0.62rem;
  font-weight: 700;
}

.checkin-choice strong {
  font-size: 0.96rem;
}

.checkin-choice span {
  color: #618072;
  font-size: 0.64rem;
  font-weight: 700;
}

.primary-choice {
  background: linear-gradient(160deg, rgba(53, 179, 92, 0.96), rgba(41, 151, 79, 0.98));
  border-color: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

.primary-choice small,
.primary-choice span {
  color: rgba(239, 255, 244, 0.92);
}

.checkin-response-card {
  padding: 0.72rem;
}

.checkin-response-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}

.checkin-response-head strong {
  font-size: 0.74rem;
}

.checkin-response-head small {
  color: #6f8f81;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
}

.checkin-response-list {
  display: grid;
  gap: 0.42rem;
}

.checkin-response {
  border: 1px solid rgba(175, 208, 188, 0.6);
  border-radius: 12px;
  background: rgba(245, 251, 247, 0.92);
  color: #355d4c;
  padding: 0.56rem 0.62rem;
  font-size: 0.7rem;
  font-weight: 800;
  text-align: left;
}

.checkin-response.is-selected {
  background: linear-gradient(180deg, #18b86b, #109055);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 10px 18px rgba(24, 184, 107, 0.2);
}

.checkin-footer {
  justify-content: flex-start;
  padding-top: 0.74rem;
  border-top: 1px solid rgba(171, 214, 190, 0.28);
  border-bottom: 0;
}

.checkin-footer p {
  margin: 0;
  color: #4d7362;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
}

.checkin-footer-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #18b86b;
  box-shadow: 0 0 0 5px rgba(24, 184, 107, 0.14);
  flex: 0 0 9px;
}

.phone-screen.is-checkin .checkin-alert-card,
.phone-screen.is-checkin .checkin-choice,
.phone-screen.is-checkin .checkin-response-card {
  animation: checkinRise 0.7s ease forwards;
}

.phone-screen.is-checkin .checkin-choice:nth-child(1) {
  animation-delay: 0.16s;
}

.phone-screen.is-checkin .checkin-choice:nth-child(2) {
  animation-delay: 0.28s;
}

.phone-screen.is-checkin .checkin-response-card {
  animation-delay: 0.38s;
}

@keyframes checkinRise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.validation-head,
.validation-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.95rem 0.95rem 0.82rem;
  background: rgba(255, 255, 255, 0.76);
  border-bottom: 1px solid rgba(171, 214, 190, 0.32);
}

.validation-label {
  margin: 0 0 0.14rem;
  color: #5f9177;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.validation-head strong {
  font-size: 0.94rem;
}

.validation-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.32rem 0.5rem;
  border-radius: 999px;
  background: rgba(53, 179, 92, 0.12);
  color: #2f7a4d;
  font-size: 0.62rem;
  font-weight: 800;
}

.validation-body {
  flex: 1;
  padding: 0.82rem 0.78rem 0.72rem;
  display: grid;
  gap: 0.62rem;
}

.validation-client-card,
.validation-mini-card,
.validation-stepper {
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(182, 219, 196, 0.48);
  border-radius: 16px;
  box-shadow: 0 12px 22px rgba(36, 78, 54, 0.08);
}

.validation-client-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.56rem;
  align-items: center;
  padding: 0.72rem;
}

.validation-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(180deg, #2f73ff, #4ba4ff);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}

.validation-client-copy {
  display: grid;
  gap: 0.1rem;
}

.validation-client-copy strong {
  font-size: 0.83rem;
}

.validation-client-copy span,
.validation-client-copy small {
  color: #5b7d71;
  font-size: 0.64rem;
  font-weight: 700;
}

.validation-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.48rem;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 800;
}

.validation-status.is-present {
  background: rgba(53, 179, 92, 0.14);
  color: #2e7d4d;
}

.validation-stepper {
  padding: 0.72rem;
  display: grid;
  gap: 0.56rem;
}

.validation-step {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 0.52rem;
  align-items: start;
  color: #648377;
}

.validation-step span {
  width: 16px;
  height: 16px;
  margin-top: 0.12rem;
  border-radius: 50%;
  border: 2px solid rgba(113, 156, 129, 0.45);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(120, 179, 139, 0.08);
}

.validation-step strong {
  display: block;
  color: #2c5444;
  font-size: 0.72rem;
  margin-bottom: 0.08rem;
}

.validation-step small {
  color: #628174;
  font-size: 0.63rem;
  line-height: 1.35;
  font-weight: 700;
}

.validation-step.is-done span,
.validation-step.is-active span {
  border-color: transparent;
  background: linear-gradient(180deg, #35b35c, #2b934d);
}

.validation-step.is-active span {
  box-shadow: 0 0 0 5px rgba(53, 179, 92, 0.14);
}

.validation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.52rem;
}

.validation-mini-card {
  padding: 0.72rem;
  display: grid;
  gap: 0.18rem;
}

.validation-mini-card small {
  color: #6c8c7d;
  font-size: 0.62rem;
  font-weight: 700;
}

.validation-mini-card strong {
  font-size: 0.96rem;
}

.validation-mini-card span {
  color: #618072;
  font-size: 0.64rem;
  font-weight: 700;
}

.success-card {
  background: linear-gradient(160deg, rgba(53, 179, 92, 0.96), rgba(41, 151, 79, 0.98));
  border-color: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

.success-card small,
.success-card span {
  color: rgba(239, 255, 244, 0.92);
}

.validation-footer {
  justify-content: flex-start;
  padding-top: 0.74rem;
  border-top: 1px solid rgba(171, 214, 190, 0.28);
  border-bottom: 0;
}

.validation-footer p {
  margin: 0;
  color: #4d7362;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
}

.validation-footer-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #35b35c;
  box-shadow: 0 0 0 5px rgba(53, 179, 92, 0.14);
  flex: 0 0 9px;
}

.phone-screen.is-validation .validation-client-card,
.phone-screen.is-validation .validation-stepper,
.phone-screen.is-validation .validation-mini-card {
  animation: validationRise 0.7s ease forwards;
}

.phone-screen.is-validation .validation-stepper {
  animation-delay: 0.18s;
}

.phone-screen.is-validation .validation-mini-card:nth-child(1) {
  animation-delay: 0.3s;
}

.phone-screen.is-validation .validation-mini-card:nth-child(2) {
  animation-delay: 0.42s;
}

@keyframes validationRise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dashboard-head,
.dashboard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.95rem 0.95rem 0.8rem;
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(170, 195, 235, 0.28);
}

.dashboard-label {
  margin: 0 0 0.14rem;
  color: #5874aa;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-head strong {
  font-size: 0.96rem;
}

.dashboard-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.34rem 0.52rem;
  border-radius: 999px;
  background: rgba(47, 115, 255, 0.12);
  color: #2353af;
  font-size: 0.64rem;
  font-weight: 800;
}

.dashboard-body {
  flex: 1;
  padding: 0.82rem 0.78rem 0.72rem;
  display: grid;
  gap: 0.62rem;
}

.dashboard-kpis,
.dashboard-grid {
  display: grid;
  gap: 0.52rem;
}

.dashboard-kpis {
  grid-template-columns: 1fr 1fr;
}

.dashboard-grid {
  grid-template-columns: 1fr 1fr;
}

.dashboard-card,
.dashboard-panel {
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(183, 205, 240, 0.5);
  border-radius: 16px;
  box-shadow: 0 12px 22px rgba(33, 60, 112, 0.08);
}

.dashboard-card {
  padding: 0.72rem 0.74rem;
  display: grid;
  gap: 0.18rem;
}

.dashboard-card small {
  color: #6480b2;
  font-size: 0.62rem;
  font-weight: 700;
}

.dashboard-card strong {
  font-size: 1.14rem;
  line-height: 1;
}

.dashboard-card span {
  color: #5470a0;
  font-size: 0.64rem;
  font-weight: 700;
}

.primary-card {
  background: linear-gradient(160deg, rgba(47, 115, 255, 0.92), rgba(28, 86, 208, 0.96));
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.primary-card small,
.primary-card span {
  color: rgba(235, 243, 255, 0.92);
}

.highlight-card {
  grid-column: 1 / -1;
  background: linear-gradient(160deg, rgba(247, 252, 255, 0.95), rgba(233, 244, 255, 0.92));
}

.dashboard-panel {
  padding: 0.68rem 0.72rem 0.76rem;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}

.panel-head strong {
  font-size: 0.73rem;
}

.panel-head small {
  color: #6f86b1;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
}

.service-bars {
  display: grid;
  gap: 0.44rem;
}

.service-bar-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.14rem;
  color: #47618f;
  font-size: 0.65rem;
  font-weight: 700;
}

.bar-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(188, 206, 239, 0.42);
  overflow: hidden;
}

.bar-track span {
  display: block;
  width: var(--bar-size);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2f73ff, #58a6ff);
}

.payment-list,
.summary-list {
  margin: 0;
  padding: 0;
}

.payment-list {
  display: grid;
  gap: 0.38rem;
}

.payment-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  color: #4d6796;
  font-size: 0.66rem;
  font-weight: 700;
}

.compact-panel {
  min-height: 112px;
}

.summary-list {
  list-style: none;
  display: grid;
  gap: 0.34rem;
}

.summary-list li {
  position: relative;
  padding-left: 0.82rem;
  color: #326345;
  font-size: 0.63rem;
  font-weight: 700;
  line-height: 1.35;
}

.summary-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.36rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #35b35c;
}

.dashboard-footer {
  justify-content: flex-start;
  padding-top: 0.74rem;
  border-top: 1px solid rgba(170, 195, 235, 0.26);
  border-bottom: 0;
}

.dashboard-footer p {
  margin: 0;
  color: #486593;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
}

.dashboard-footer-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #35b35c;
  box-shadow: 0 0 0 5px rgba(53, 179, 92, 0.14);
  flex: 0 0 9px;
}

.phone-screen.is-dashboard .dashboard-card,
.phone-screen.is-dashboard .dashboard-panel {
  animation: dashboardRise 0.7s ease forwards;
}

.phone-screen.is-dashboard .dashboard-kpis .dashboard-card:nth-child(1) {
  animation-delay: 0.12s;
}

.phone-screen.is-dashboard .dashboard-kpis .dashboard-card:nth-child(2) {
  animation-delay: 0.22s;
}

.phone-screen.is-dashboard .dashboard-kpis .dashboard-card:nth-child(3) {
  animation-delay: 0.32s;
}

.phone-screen.is-dashboard .dashboard-panel:nth-of-type(1) {
  animation-delay: 0.42s;
}

.phone-screen.is-dashboard .dashboard-grid .dashboard-panel:nth-child(1) {
  animation-delay: 0.5s;
}

.phone-screen.is-dashboard .dashboard-grid .dashboard-panel:nth-child(2) {
  animation-delay: 0.58s;
}

@keyframes dashboardRise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes calendarEntryIn {
  0% {
    opacity: 0;
    transform: translate3d(86px, 168px, 0) scale(0.42);
    filter: saturate(1.2) brightness(1.1);
  }
  58% {
    opacity: 1;
    transform: translate3d(-2px, -6px, 0) scale(1.03);
    filter: saturate(1.05) brightness(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
}

@keyframes calendarTransfer {
  0% {
    opacity: 0;
    transform: translate3d(26px, 26px, 0) scale(0.88);
  }
  18% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  72% {
    opacity: 1;
    transform: translate3d(-56px, -118px, 0) scale(0.86);
  }
  100% {
    opacity: 0;
    transform: translate3d(-72px, -144px, 0) scale(0.74);
  }
}

.typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes blink {
  0%,
  80%,
  100% {
    opacity: 0.28;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-1px);
  }
}

.section {
  padding: 4.2rem 0;
}

.alt {
  background: rgba(255, 255, 255, 0.6);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
}

h2 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.6rem, 3.5vw, 2.3rem);
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1.4rem;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.4rem;
}

.card,
.step {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #d2def1;
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 8px 18px rgba(31, 63, 122, 0.06);
}

.icon-chip {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #1f3f79;
  background: linear-gradient(140deg, #dce8ff, #eaf3ff);
}

.card p,
.step p {
  color: var(--muted);
  line-height: 1.65;
}

.step span {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, #eaf1ff, #d8e7ff);
  color: #244582;
  font-weight: 800;
}

.chips {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.chips span {
  border: 1px solid #c9d9f2;
  border-radius: 999px;
  padding: 0.55rem 0.8rem;
  background: rgba(255, 255, 255, 0.85);
  color: #2a3557;
  font-weight: 600;
}

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.3rem;
}

.compare-card {
  background: rgba(255, 255, 255, 0.82);
  border-radius: 16px;
  border: 1px solid #d2def1;
  padding: 1.1rem 1.1rem 1rem;
}

.compare-card h3 {
  margin: 0 0 0.55rem;
}

.compare-card ul {
  margin: 0;
  padding-left: 1.05rem;
  color: #3a4d73;
  line-height: 1.7;
}

.compare-card.muted {
  background: rgba(255, 255, 255, 0.56);
}

.compare-card.highlight {
  border-color: #b8d7ab;
  background: linear-gradient(150deg, #f4fbf3, #ecf5ff);
  box-shadow: 0 10px 20px rgba(33, 83, 43, 0.08);
}

.cta-box {
  background:
    radial-gradient(circle at 88% 10%, rgba(120, 225, 108, 0.28), transparent 26%),
    linear-gradient(130deg, #1f3667 0%, #2a4d95 52%, #3fae49 130%);
  color: #fff;
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 22px 45px rgba(26, 53, 105, 0.3);
}

.cta-box p {
  color: #e2eafb;
}

.cta-form {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
}

.cta-form input {
  border: 1px solid #7098d2;
  background: rgba(24, 46, 92, 0.7);
  color: #fff;
  border-radius: 10px;
  padding: 0.8rem;
}

.cta-form input::placeholder {
  color: #abb8ec;
}

#formMessage {
  display: block;
  margin-top: 0.65rem;
  color: #c9f9be;
}

.cta-note {
  display: block;
  margin-top: 0.55rem;
  color: #e7eefb;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.footer {
  padding: 2rem 0 3rem;
  color: #5f6f93;
  background: #ffffff;
}

.how-it-works-page {
  background:
    radial-gradient(circle at 10% 0%, rgba(193, 214, 252, 0.8), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(207, 241, 213, 0.84), transparent 22%),
    linear-gradient(180deg, #eef4fb 0%, #e8f0fb 100%);
}

.how-hero {
  position: relative;
  overflow: hidden;
  padding: 5.2rem 0 3.4rem;
}

.how-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(63, 112, 229, 0.16), transparent 24%),
    radial-gradient(circle at 82% 24%, rgba(52, 184, 103, 0.14), transparent 20%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(239, 246, 255, 0.52));
  z-index: 0;
}

.how-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  align-items: center;
}

.how-hero-copy h1 {
  max-width: 720px;
  margin-bottom: 1rem;
}

.how-hero-copy {
  max-width: 860px;
}

.how-hero-text {
  max-width: 650px;
  font-size: 1.04rem;
}

.how-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin-top: 1.2rem;
}

.how-kpis div,
.how-flow-card,
.module-card,
.how-summary-card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(201, 217, 243, 0.76);
  border-radius: 20px;
  box-shadow: 0 18px 32px rgba(28, 55, 107, 0.08);
  backdrop-filter: blur(10px);
}

.how-kpis div {
  padding: 1rem;
}

.how-kpis strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.how-kpis span,
.how-flow-note,
.how-section-text,
.module-copy p,
.how-summary-card p {
  color: #5f7195;
  line-height: 1.65;
}

.how-flow-card {
  padding: 1.1rem;
}

.how-flow-label,
.module-kicker {
  margin: 0 0 0.4rem;
  color: #5f77ae;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.how-flow-steps {
  display: grid;
  gap: 0.6rem;
  margin: 0.8rem 0 1rem;
}

.how-flow-steps div {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.72rem 0.8rem;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(243, 248, 255, 0.96), rgba(231, 240, 255, 0.9));
  border: 1px solid rgba(190, 209, 241, 0.72);
}

.how-flow-steps span,
.module-index {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, #2f73ff, #58a6ff);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 800;
  flex: 0 0 34px;
}

.how-flow-steps strong {
  font-size: 0.92rem;
}

.how-carousel {
  margin-top: 1.5rem;
  margin-bottom: 2.4rem;
  display: grid;
  gap: 1rem;
}

.how-carousel-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.carousel-tab {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(190, 209, 241, 0.72);
  background: rgba(255, 255, 255, 0.86);
  color: #47649c;
  border-radius: 999px;
  padding: 0.55rem 0.85rem;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.carousel-tab:hover {
  transform: translateY(-1px);
}

.carousel-tab.is-active {
  background: linear-gradient(135deg, #2f73ff, #58a6ff);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 22px rgba(47, 115, 255, 0.2);
}

.carousel-tab.is-active::after {
  content: "";
  position: absolute;
  inset: auto 12% 6px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  transform-origin: left center;
  animation: carouselTabProgress 5.2s linear forwards;
}

.how-carousel-frame {
  position: relative;
  min-height: 0;
  height: auto;
  transition: height 0.42s ease;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  align-items: stretch;
  padding: 1.4rem;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(201, 217, 243, 0.76);
  border-radius: 28px;
  box-shadow: 0 20px 38px rgba(28, 55, 107, 0.08);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(64px) scale(0.97);
  filter: blur(10px);
  transition: opacity 0.68s ease, transform 0.68s cubic-bezier(0.22, 1, 0.36, 1), filter 0.68s ease;
}

.how-carousel[data-direction="prev"] .carousel-slide {
  transform: translateX(-64px) scale(0.97);
}

.carousel-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  filter: blur(0);
}

.how-carousel[data-direction="next"] .carousel-slide.is-exiting {
  transform: translateX(-72px) scale(0.985);
}

.how-carousel[data-direction="prev"] .carousel-slide.is-exiting {
  transform: translateX(72px) scale(0.985);
}

.carousel-copy {
  max-width: 720px;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.carousel-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2f73ff, #58a6ff);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  margin-bottom: 0.9rem;
}

.carousel-copy h3 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}

.carousel-copy p {
  margin: 0;
}

.carousel-visual {
  display: flex;
  justify-content: stretch;
}

.carousel-slide.is-active .carousel-copy {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.08s;
}

.showcase-scene {
  position: relative;
  width: 100%;
  min-height: 540px;
  border-radius: 30px;
  padding: 1.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 1rem;
  align-items: end;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(238, 245, 255, 0.78), rgba(248, 252, 255, 0.94));
  border: 1px solid rgba(204, 220, 246, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 24px 40px rgba(31, 63, 122, 0.1);
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  transition: opacity 0.6s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.showcase-scene::before {
  content: "";
  position: absolute;
  inset: auto auto -12% -10%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(84, 139, 255, 0.14), rgba(84, 139, 255, 0));
}

.showcase-scene::after {
  content: "";
  position: absolute;
  inset: 10% -8% auto auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(73, 204, 122, 0.12), rgba(73, 204, 122, 0));
}

.showcase-scene-chat {
  background: linear-gradient(135deg, rgba(229, 247, 237, 0.92), rgba(246, 251, 255, 0.94));
}

.showcase-scene-calendar {
  background: linear-gradient(135deg, rgba(235, 243, 255, 0.94), rgba(248, 251, 255, 0.96));
}

.showcase-scene-checkin,
.showcase-scene-validation {
  background: linear-gradient(135deg, rgba(236, 249, 241, 0.94), rgba(248, 252, 249, 0.96));
}

.showcase-scene-insights {
  background: linear-gradient(135deg, rgba(235, 244, 255, 0.96), rgba(248, 251, 255, 0.98));
}

.showcase-scene-split {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 1.1rem;
}

.showcase-summary-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.showcase-summary-card {
  min-height: 100%;
}

.carousel-slide.is-active .showcase-scene {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.14s;
}

.showcase-device-stack {
  position: relative;
  display: grid;
  align-items: end;
  justify-items: center;
  min-height: 100%;
  padding-top: 1rem;
  z-index: 1;
}

.showcase-device-stack-dual {
  grid-template-columns: minmax(0, 700px) minmax(240px, 284px);
  gap: 1.7rem;
  justify-items: stretch;
  align-items: center;
  padding: 0;
}

.portal-web-card {
  align-self: stretch;
  width: 100%;
  opacity: 0;
  transform: translateX(-26px) scale(0.97);
  transition: opacity 0.58s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}

.carousel-slide.is-active .portal-web-card {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition-delay: 0.18s;
}

.portal-web-shell {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(184, 205, 239, 0.72);
  background:
    radial-gradient(circle at 100% 0%, rgba(102, 153, 255, 0.18), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 255, 0.96));
  box-shadow:
    0 28px 54px rgba(27, 53, 104, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.portal-browser-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  background: linear-gradient(180deg, rgba(233, 240, 252, 0.96), rgba(225, 234, 248, 0.96));
  border-bottom: 1px solid rgba(184, 205, 239, 0.72);
}

.portal-browser-controls,
.portal-browser-actions,
.portal-web-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.portal-browser-controls span,
.portal-browser-actions span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(180deg, #c8d4ea, #aebfdf);
}

.portal-browser-actions span {
  border-radius: 4px;
}

.portal-browser-tabs {
  display: inline-flex;
  gap: 0.35rem;
  min-width: 0;
}

.portal-browser-tab {
  min-width: 0;
  padding: 0.48rem 0.75rem;
  border-radius: 12px 12px 0 0;
  background: rgba(255, 255, 255, 0.58);
  color: #6d81aa;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal-browser-tab.is-active {
  background: rgba(255, 255, 255, 0.92);
  color: #24467f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.portal-web-shell::after {
  content: "";
  position: absolute;
  inset: auto -10% -18% auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58, 176, 99, 0.12), rgba(58, 176, 99, 0));
  pointer-events: none;
}

.portal-web-topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(190, 209, 241, 0.58);
  background: rgba(245, 249, 255, 0.92);
}

.portal-web-search,
.portal-web-user {
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
}

.portal-web-nav span {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(226, 236, 251, 0.84);
  color: #5470a6;
  font-size: 0.78rem;
}

.portal-web-search {
  padding: 0.5rem 0.8rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(194, 212, 242, 0.82);
  color: #41619b;
}

.portal-web-user {
  padding: 0.45rem 0.72rem;
  background: rgba(53, 179, 92, 0.12);
  color: #2f7b4e;
}

.portal-web-body {
  display: grid;
  grid-template-columns: 128px 1fr;
  min-height: 390px;
}

.portal-web-sidebar {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 1rem 0.8rem;
  background: rgba(236, 243, 255, 0.7);
  border-right: 1px solid rgba(190, 209, 241, 0.44);
}

.portal-web-sidebar span {
  border-radius: 14px;
  padding: 0.68rem 0.72rem;
  color: #6580b2;
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.72);
}

.portal-web-sidebar .is-active {
  background: linear-gradient(135deg, #2f73ff, #58a6ff);
  color: #fff;
  box-shadow: 0 12px 20px rgba(47, 115, 255, 0.18);
}

.portal-web-main {
  display: grid;
  gap: 0.82rem;
  padding: 1rem;
}

.portal-checkin-grid,
.portal-checkin-actions {
  display: grid;
  gap: 0.75rem;
}

.portal-checkin-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(180px, 0.8fr);
}

.portal-checkin-primary,
.portal-checkin-panel,
.portal-checkin-list {
  border-radius: 20px;
  border: 1px solid rgba(188, 208, 239, 0.58);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 26px rgba(35, 60, 110, 0.08);
}

.portal-checkin-primary,
.portal-checkin-panel {
  padding: 0.95rem;
}

.portal-checkin-primary small,
.portal-checkin-panel small {
  display: block;
  color: #6980ae;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.portal-checkin-primary strong,
.portal-checkin-panel strong {
  display: block;
  margin-top: 0.18rem;
  color: #1f3768;
  font-size: 1rem;
}

.portal-checkin-primary span,
.portal-checkin-panel span {
  display: block;
  margin-top: 0.2rem;
  color: #5b739d;
  font-size: 0.73rem;
  font-weight: 700;
  line-height: 1.42;
}

.portal-checkin-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.75rem;
}

.portal-checkin-list {
  overflow: hidden;
}

.portal-web-toolbar,
.portal-agenda-layout,
.portal-validation-board,
.portal-insights-grid {
  display: grid;
  gap: 0.75rem;
}

.portal-web-toolbar {
  grid-template-columns: repeat(4, max-content);
}

.portal-toolbar-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 0.68rem;
  border-radius: 999px;
  background: rgba(228, 236, 250, 0.78);
  color: #57709f;
  font-size: 0.66rem;
  font-weight: 800;
  white-space: nowrap;
}

.portal-toolbar-chip.is-active {
  background: linear-gradient(135deg, #2f73ff, #58a6ff);
  color: #fff;
}

.portal-toolbar-chip.success-chip {
  background: rgba(53, 179, 92, 0.12);
  color: #2f7b4e;
}

.portal-web-header-card,
.portal-agenda-panel,
.portal-agenda-calendar,
.portal-validation-timeline,
.portal-validation-summary,
.portal-insights-metrics article,
.portal-insights-chart,
.portal-web-footer-strip div,
.portal-aside-card,
.portal-agenda-table,
.portal-board-card {
  border-radius: 20px;
  border: 1px solid rgba(188, 208, 239, 0.58);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 26px rgba(35, 60, 110, 0.08);
}

.portal-web-header-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
}

.portal-web-header-card small,
.portal-agenda-panel small,
.portal-validation-step small,
.portal-validation-summary small,
.portal-insights-metrics small,
.portal-insights-legend small,
.portal-web-footer-strip small {
  display: block;
  color: #6980ae;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.portal-web-header-card strong,
.portal-agenda-panel strong,
.portal-validation-step strong,
.portal-validation-summary strong,
.portal-insights-metrics strong,
.portal-insights-legend strong,
.portal-web-footer-strip strong {
  display: block;
  color: #1e3768;
}

.portal-web-header-card strong {
  margin-top: 0.18rem;
  font-size: 1rem;
}

.portal-web-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.44rem 0.7rem;
  border-radius: 999px;
  background: rgba(47, 115, 255, 0.12);
  color: #2452ad;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.portal-web-badge.success-tone {
  background: rgba(53, 179, 92, 0.14);
  color: #2d7c4d;
}

.portal-web-badge.insight-tone {
  background: rgba(42, 118, 255, 0.14);
  color: #2254b3;
}

.portal-agenda-columns,
.portal-validation-grid,
.portal-insights-metrics,
.portal-web-footer-strip {
  display: grid;
  gap: 0.75rem;
}

.portal-agenda-layout {
  grid-template-columns: minmax(0, 1fr);
}

.portal-agenda-calendar,
.portal-agenda-table {
  overflow: hidden;
}

.portal-agenda-calendar {
  padding: 1rem;
  display: grid;
  gap: 0.9rem;
}

.portal-agenda-status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.portal-agenda-status-strip span {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.62rem;
  border-radius: 999px;
  background: rgba(233, 240, 255, 0.9);
  color: #486593;
  border: 1px solid rgba(188, 208, 239, 0.64);
  font-size: 0.66rem;
  font-weight: 800;
}

.portal-agenda-calendar-head,
.portal-agenda-grid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.portal-agenda-calendar-head small,
.portal-agenda-grid-head span {
  display: block;
  color: #6980ae;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.portal-agenda-calendar-head strong,
.portal-agenda-grid-head strong {
  display: block;
  margin-top: 0.18rem;
  color: #1f3768;
  font-size: 1rem;
}

.portal-agenda-grid-head small {
  color: #6a81ae;
  font-size: 0.68rem;
  font-weight: 800;
}

.portal-agenda-mini-tabs {
  display: inline-flex;
  gap: 0.35rem;
}

.portal-agenda-mini-tabs span {
  padding: 0.4rem 0.62rem;
  border-radius: 999px;
  background: rgba(230, 237, 251, 0.82);
  color: #5b729f;
  font-size: 0.64rem;
  font-weight: 800;
}

.portal-agenda-mini-tabs .is-active {
  background: linear-gradient(135deg, #2f73ff, #58a6ff);
  color: #fff;
}

.portal-agenda-calendar-body {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 0.7rem;
  min-height: 340px;
}

.portal-agenda-hours {
  display: grid;
  grid-template-rows: 44px repeat(10, 1fr);
  color: #6b81ae;
  font-size: 0.64rem;
  font-weight: 800;
}

.portal-agenda-hours span {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 0.16rem;
}

.portal-agenda-grid {
  position: relative;
  display: grid;
  grid-template-rows: 44px repeat(10, 1fr);
  gap: 0.24rem;
  padding: 0 0.2rem 0.2rem;
}

.portal-agenda-grid::before {
  content: "";
  position: absolute;
  inset: 44px 0 0;
  border-radius: 18px;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(166, 190, 234, 0.14) 0,
      rgba(166, 190, 234, 0.14) 1px,
      transparent 1px,
      transparent calc((100% - 0px) / 10)
    ),
    rgba(246, 250, 255, 0.92);
  border: 1px solid rgba(172, 195, 236, 0.36);
}

.portal-agenda-now-line {
  position: relative;
  z-index: 1;
  grid-row: 6;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0.42rem;
}

.portal-agenda-now-line span {
  flex: 1;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(42, 118, 255, 0.9), rgba(88, 166, 255, 0.25));
  box-shadow: 0 0 0 3px rgba(47, 115, 255, 0.08);
}

.portal-agenda-now-line small {
  color: #2f73ff;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.portal-agenda-slot {
  position: relative;
  z-index: 1;
  grid-row: var(--agenda-start) / span var(--agenda-size);
  margin: 0 0.4rem;
  border-radius: 16px;
  padding: 0.55rem 0.7rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.16rem;
  box-shadow: 0 10px 18px rgba(34, 59, 109, 0.08);
}

.portal-agenda-slot small,
.portal-agenda-slot strong,
.portal-agenda-slot span,
.portal-agenda-slot em {
  position: relative;
  z-index: 1;
  font-style: normal;
}

.portal-agenda-slot small {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.8;
}

.portal-agenda-slot strong {
  font-size: 0.86rem;
  color: inherit;
}

.portal-agenda-slot span,
.portal-agenda-slot em {
  color: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.35;
}

.portal-agenda-slot.slot-soft {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(243, 247, 255, 0.92));
  color: #49618f;
  border: 1px solid rgba(173, 194, 231, 0.42);
}

.portal-agenda-slot.slot-highlighted {
  background: linear-gradient(180deg, rgba(52, 109, 229, 0.96), rgba(35, 84, 194, 0.98));
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.26);
}

.portal-agenda-aside {
  display: grid;
  gap: 0.75rem;
}

.portal-agenda-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-aside-card,
.portal-board-card {
  padding: 0.9rem;
  display: grid;
  gap: 0.2rem;
}

.portal-aside-card small,
.portal-board-card small {
  display: block;
  color: #6980ae;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.portal-aside-card strong,
.portal-board-card strong {
  display: block;
  color: #1f3768;
  font-size: 0.92rem;
}

.portal-aside-card span,
.portal-board-card span {
  color: #5b739d;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.42;
}

.portal-agenda-panel {
  padding: 0.9rem;
  display: grid;
  gap: 0.22rem;
}

.portal-agenda-panel span,
.portal-agenda-panel em {
  color: #58709a;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;
}

.portal-agenda-panel strong {
  font-size: 1rem;
}

.portal-agenda-panel.is-highlighted {
  background: linear-gradient(160deg, rgba(47, 115, 255, 0.92), rgba(29, 84, 200, 0.96));
  border-color: rgba(255, 255, 255, 0.18);
}

.portal-agenda-panel.is-highlighted small,
.portal-agenda-panel.is-highlighted strong,
.portal-agenda-panel.is-highlighted span,
.portal-agenda-panel.is-highlighted em {
  color: #fff;
}

.portal-web-footer-strip {
  grid-template-columns: 1fr 1fr;
}

.portal-web-footer-strip div {
  padding: 0.82rem 0.9rem;
}

.portal-table-row {
  display: grid;
  grid-template-columns: 74px 1fr 1.1fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.75rem 0.9rem;
  color: #55709e;
  font-size: 0.72rem;
  font-weight: 700;
  border-top: 1px solid rgba(191, 210, 241, 0.36);
}

.portal-table-row:first-child {
  border-top: 0;
}

.portal-table-row.is-head {
  background: rgba(236, 243, 255, 0.74);
  color: #6a81ae;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.portal-table-row.is-highlighted {
  background: rgba(47, 115, 255, 0.06);
}

.status-neutral,
.status-positive,
.status-pending {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.36rem 0.56rem;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 800;
}

.status-neutral {
  background: rgba(103, 130, 175, 0.12);
  color: #5f7499;
}

.status-positive {
  background: rgba(47, 115, 255, 0.12);
  color: #275dc5;
}

.status-pending {
  background: rgba(53, 179, 92, 0.12);
  color: #2f7b4e;
}

.portal-validation-grid {
  grid-template-columns: 1.3fr 0.95fr;
}

.portal-validation-board,
.portal-insights-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-insights-grid {
  grid-template-columns: 1fr 1fr;
}

.portal-validation-timeline,
.portal-validation-summary,
.portal-insights-chart {
  padding: 0.95rem;
}

.portal-validation-timeline {
  display: grid;
  gap: 0.72rem;
}

.portal-validation-step {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0.62rem;
  align-items: start;
}

.portal-validation-step span {
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  border-radius: 50%;
  border: 2px solid rgba(124, 156, 208, 0.42);
  background: #fff;
  box-shadow: 0 0 0 5px rgba(42, 118, 255, 0.08);
}

.portal-validation-step strong {
  margin-bottom: 0.14rem;
  font-size: 0.82rem;
}

.portal-validation-step small {
  color: #647b9f;
  font-size: 0.68rem;
  line-height: 1.4;
}

.portal-validation-step.is-done span,
.portal-validation-step.is-active span {
  border-color: transparent;
  background: linear-gradient(180deg, #35b35c, #29974f);
  box-shadow: 0 0 0 5px rgba(53, 179, 92, 0.14);
}

.portal-validation-summary {
  display: grid;
  align-content: start;
  gap: 0.8rem;
}

.portal-validation-summary strong {
  margin-top: 0.18rem;
  font-size: 1rem;
}

.portal-validation-summary ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.48rem;
}

.portal-validation-summary li {
  position: relative;
  padding-left: 0.9rem;
  color: #4d678f;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.45;
}

.portal-validation-summary li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #35b35c;
}

.portal-insights-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-insights-metrics article {
  padding: 0.9rem;
  display: grid;
  gap: 0.2rem;
}

.portal-insights-metrics strong {
  margin-top: 0.12rem;
  font-size: 0.96rem;
}

.portal-insights-metrics span {
  color: #567098;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
}

.portal-insights-chart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 0.9rem;
  align-items: end;
}

.portal-insights-bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 0.65rem;
  min-height: 138px;
}

.portal-insights-bars span {
  display: block;
  height: var(--portal-bar);
  min-height: 38px;
  border-radius: 18px 18px 8px 8px;
  background: linear-gradient(180deg, #58a6ff, #2f73ff);
  box-shadow: 0 14px 22px rgba(47, 115, 255, 0.18);
}

.portal-insights-legend {
  display: grid;
  gap: 0.22rem;
}

.portal-insights-legend strong {
  font-size: 0.94rem;
}

.portal-web-agenda .portal-web-shell {
  background:
    radial-gradient(circle at 100% 0%, rgba(86, 144, 255, 0.2), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 245, 255, 0.96));
}

.portal-web-validation .portal-web-shell {
  background:
    radial-gradient(circle at 100% 0%, rgba(68, 191, 112, 0.18), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 249, 244, 0.96));
}

.portal-web-checkin .portal-web-shell {
  background:
    radial-gradient(circle at 100% 0%, rgba(68, 191, 112, 0.18), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 250, 245, 0.96));
}

.portal-web-insights .portal-web-shell {
  background:
    radial-gradient(circle at 100% 0%, rgba(73, 135, 255, 0.18), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 246, 255, 0.96));
}

.how-device-shell {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  opacity: 0;
  transform: translateY(34px) scale(0.95) rotate(-4deg);
  transition: opacity 0.58s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.carousel-slide.is-active .how-device-shell {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
  transition-delay: 0.18s;
}

.how-phone-frame {
  width: 296px;
  height: 642px;
  box-shadow:
    0 36px 56px rgba(10, 20, 38, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 -4px 10px rgba(0, 0, 0, 0.6);
}

.how-phone-screen {
  background: #eef4f0;
}

.showcase-orbit-card {
  position: absolute;
  right: 0.2rem;
  bottom: 0.35rem;
  width: min(220px, 42%);
  border-radius: 22px;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(194, 212, 242, 0.82);
  box-shadow: 0 22px 34px rgba(31, 63, 122, 0.14);
  backdrop-filter: blur(10px);
  z-index: 2;
  opacity: 0;
  transform: translate(24px, 16px);
  transition: opacity 0.55s ease, transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.showcase-scene-split .showcase-orbit-card,
.showcase-scene-split .showcase-floating-card,
.showcase-scene-split .showcase-side-panel {
  position: relative;
  inset: auto;
  right: auto;
  left: auto;
  top: auto;
  bottom: auto;
  width: 100%;
  max-width: none;
  align-self: stretch;
}

.showcase-scene-split .showcase-floating-card {
  transform: translateY(18px);
}

.showcase-scene-split .showcase-orbit-card {
  transform: translateY(18px);
}

.showcase-scene-split .showcase-side-panel {
  transform: translateY(18px);
}

.carousel-slide.is-active .showcase-scene-split .showcase-floating-card,
.carousel-slide.is-active .showcase-scene-split .showcase-orbit-card,
.carousel-slide.is-active .showcase-scene-split .showcase-side-panel {
  transform: translateY(0);
}

.showcase-scene-split .how-device-shell {
  align-self: end;
}

.carousel-slide.is-active .showcase-orbit-card {
  opacity: 1;
  transform: translate(0, 0);
  transition-delay: 0.24s;
}

.showcase-orbit-card small,
.showcase-orbit-card strong,
.showcase-orbit-card span {
  display: block;
}

.showcase-orbit-card small {
  color: #6780b1;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.showcase-orbit-card strong {
  margin-top: 0.2rem;
  font-size: 1rem;
  color: #1d3562;
}

.showcase-orbit-card span {
  margin-top: 0.28rem;
  color: #577096;
  font-size: 0.72rem;
  line-height: 1.45;
  font-weight: 700;
}

.orbit-card-chat {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(238, 248, 241, 0.96));
}

.orbit-card-calendar {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(238, 244, 255, 0.98));
}

.orbit-card-checkin,
.orbit-card-validation {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(238, 249, 242, 0.98));
}

.orbit-card-insights {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(237, 244, 255, 0.98));
}

.showcase-floating-card,
.showcase-side-panel {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  padding: 0.9rem;
  box-shadow: 0 18px 28px rgba(31, 63, 122, 0.1);
}

.showcase-floating-card {
  position: absolute;
  top: 1rem;
  left: 1rem;
  max-width: 250px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(198, 214, 243, 0.74);
  opacity: 0;
  transform: translateY(-18px);
  transition: opacity 0.5s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.carousel-slide.is-active .showcase-floating-card {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.12s;
}

.showcase-floating-card small,
.showcase-side-panel strong,
.showcase-floating-card strong,
.showcase-floating-card span,
.showcase-side-panel li {
  display: block;
}

.showcase-floating-card small {
  color: #6980af;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.showcase-floating-card strong {
  margin: 0.18rem 0 0.28rem;
  font-size: 1.05rem;
}

.showcase-floating-card span {
  color: #5d7196;
  font-size: 0.72rem;
  line-height: 1.45;
  font-weight: 700;
}

.blue-card {
  background: linear-gradient(160deg, rgba(47, 115, 255, 0.95), rgba(33, 84, 194, 0.98));
  border-color: rgba(255, 255, 255, 0.16);
}

.blue-card small,
.blue-card strong,
.blue-card span,
.success-card-showcase small,
.success-card-showcase strong,
.success-card-showcase span {
  color: #fff;
}

.success-card-showcase {
  background: linear-gradient(160deg, rgba(53, 179, 92, 0.96), rgba(41, 151, 79, 0.98));
  border-color: rgba(255, 255, 255, 0.16);
}

.showcase-side-panel {
  align-self: stretch;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(198, 214, 243, 0.74);
  opacity: 0;
  transform: translateX(18px);
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.carousel-slide.is-active .showcase-side-panel {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.22s;
}

.showcase-side-panel strong {
  margin-bottom: 0.55rem;
  font-size: 0.9rem;
}

.showcase-side-panel ul {
  margin: 0;
  padding-left: 1rem;
  color: #587094;
}

.showcase-side-panel li {
  margin-bottom: 0.45rem;
  font-size: 0.74rem;
  line-height: 1.45;
  font-weight: 700;
}

.how-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.carousel-arrow {
  border: 1px solid rgba(190, 209, 241, 0.72);
  background: rgba(255, 255, 255, 0.86);
  color: #3e5d97;
  border-radius: 999px;
  padding: 0.62rem 0.88rem;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.carousel-arrow:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(31, 63, 122, 0.1);
}

.carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(154, 177, 218, 0.5);
}

.carousel-dot.is-active {
  background: #2f73ff;
  box-shadow: 0 0 0 4px rgba(47, 115, 255, 0.12);
}

.mini-screen {
  width: 100%;
  min-height: 250px;
  border-radius: 24px;
  border: 1px solid rgba(184, 205, 240, 0.78);
  box-shadow: 0 16px 28px rgba(31, 63, 122, 0.1);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
}

.mini-topbar {
  padding: 0.72rem 0.86rem;
  font-size: 0.76rem;
  font-weight: 800;
}

.whatsapp-topbar {
  background: linear-gradient(180deg, #14946f, #0e7559);
  color: #fff;
}

.chat-preview-screen {
  background: linear-gradient(180deg, #dff4e6, #d3edde);
}

.mini-chat-list {
  display: grid;
  gap: 0.5rem;
  padding: 0.8rem;
}

.detailed-chat-list {
  padding: 1rem;
}

.mini-bubble {
  max-width: 88%;
  padding: 0.5rem 0.6rem;
  border-radius: 14px;
  font-size: 0.7rem;
  line-height: 1.35;
  box-shadow: 0 8px 16px rgba(18, 40, 30, 0.08);
}

.client-bubble {
  justify-self: end;
  background: #eff2f7;
  color: #264056;
}

.bot-bubble {
  background: #d9fdd4;
  color: #24553a;
}

.highlight-bubble {
  border: 1px solid rgba(53, 179, 92, 0.24);
}

.success-bubble-mini {
  background: linear-gradient(180deg, #eff8ff, #e7f1ff);
  color: #2d4f89;
}

.mini-option-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.mini-option-row span,
.mini-checkin-actions span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.34rem 0.5rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(186, 204, 237, 0.74);
  color: #33518a;
  font-size: 0.68rem;
  font-weight: 700;
}

.selected-option,
.selected-checkin {
  background: linear-gradient(180deg, #2f73ff, #2154c3);
  color: #fff;
  border-color: transparent;
}

.calendar-preview-screen {
  background: linear-gradient(180deg, #eff5ff, #e7f0fe);
}

.calendar-topbar,
.insights-topbar {
  background: rgba(255, 255, 255, 0.86);
  color: #2b4f97;
  border-bottom: 1px solid rgba(190, 209, 241, 0.7);
}

.mini-calendar-grid {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 0.28rem 0.5rem;
  padding: 0.8rem;
  align-items: center;
}

.detailed-calendar-grid {
  display: grid;
  gap: 0.55rem;
  padding: 1rem;
}

.calendar-row {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 0.5rem;
  align-items: center;
}

.calendar-row span {
  color: #6880af;
  font-size: 0.68rem;
  font-weight: 800;
}

.featured-row {
  position: relative;
}

.featured-row::after {
  content: "Entrada do WhatsApp";
  position: absolute;
  right: 0.6rem;
  top: -0.5rem;
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  background: rgba(47, 115, 255, 0.1);
  color: #2f73ff;
  font-size: 0.58rem;
  font-weight: 800;
}

.mini-hour {
  color: #6980af;
  font-size: 0.65rem;
  font-weight: 800;
}

.mini-slot {
  padding: 0.45rem 0.56rem;
  border-radius: 12px;
  font-size: 0.68rem;
  font-weight: 700;
}

.muted-slot {
  background: rgba(255, 255, 255, 0.9);
  color: #4c6696;
  border: 1px solid rgba(188, 206, 239, 0.74);
}

.primary-slot {
  background: linear-gradient(180deg, #3a74ee, #2458cb);
  color: #fff;
}

.checkin-preview-screen,
.validation-preview-screen {
  background: linear-gradient(180deg, #f6fbf7, #edf8f1);
}

.checkin-topbar,
.validation-topbar {
  background: rgba(255, 255, 255, 0.88);
  color: #2f6f4a;
  border-bottom: 1px solid rgba(188, 224, 198, 0.74);
}

.mini-checkin-card,
.mini-status-card {
  margin: 0.8rem;
  padding: 0.72rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(190, 224, 201, 0.74);
}

.detailed-checkin-card,
.detailed-status-card {
  margin: 1rem;
}

.mini-checkin-card strong,
.mini-status-card strong {
  display: block;
  font-size: 0.76rem;
  margin-bottom: 0.18rem;
}

.mini-checkin-card p,
.mini-checkin-card small,
.mini-status-card span {
  margin: 0;
  color: #5a7d71;
  font-size: 0.66rem;
  line-height: 1.4;
  font-weight: 700;
}

.mini-checkin-actions {
  display: grid;
  gap: 0.36rem;
  padding: 0 0.8rem 0.8rem;
}

.detailed-checkin-actions {
  padding: 0 1rem 1rem;
}

.mini-step-list {
  display: grid;
  gap: 0.35rem;
  padding: 0 0.8rem 0.8rem;
}

.detailed-step-list {
  padding: 0 1rem 1rem;
}

.mini-step {
  padding: 0.48rem 0.56rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(189, 223, 200, 0.72);
  color: #55776b;
  font-size: 0.67rem;
  font-weight: 700;
}

.done-step,
.active-step {
  background: linear-gradient(180deg, #34b45c, #2b954d);
  color: #fff;
  border-color: transparent;
}

.insights-preview-screen {
  background: linear-gradient(180deg, #f5f9ff, #edf3ff);
}

.mini-metric-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.8rem 0.8rem 0.2rem;
}

.detailed-metric-row {
  padding: 1rem 1rem 0.3rem;
}

.mini-metric-row div {
  padding: 0.6rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(188, 206, 239, 0.74);
}

.mini-metric-row small {
  display: block;
  color: #6880af;
  font-size: 0.62rem;
  font-weight: 800;
  margin-bottom: 0.15rem;
}

.mini-metric-row strong {
  font-size: 0.73rem;
}

.mini-bars {
  display: grid;
  gap: 0.45rem;
  padding: 0.2rem 0.8rem 0.8rem;
}

.detailed-bars {
  padding: 0.2rem 1rem 0.75rem;
}

.insight-footer-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0 1rem 1rem;
}

.insight-footer-list span {
  display: inline-flex;
  align-items: center;
  padding: 0.34rem 0.54rem;
  border-radius: 999px;
  background: rgba(232, 240, 255, 0.9);
  color: #3d5d98;
  border: 1px solid rgba(188, 206, 239, 0.74);
  font-size: 0.68rem;
  font-weight: 700;
}

.mini-bars div {
  display: grid;
  gap: 0.18rem;
}

.mini-bars span {
  color: #4e6797;
  font-size: 0.65rem;
  font-weight: 700;
}

.mini-bars i {
  display: block;
  height: 8px;
  width: var(--mini-bar);
  max-width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f73ff, #58a6ff);
}

.module-copy h3 {
  margin: 0 0 0.45rem;
  font-size: 1.28rem;
}

.module-copy p {
  margin: 0;
}

.module-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.95rem;
}

.module-points span {
  display: inline-flex;
  align-items: center;
  padding: 0.48rem 0.74rem;
  border-radius: 999px;
  background: rgba(232, 240, 255, 0.9);
  color: #37558e;
  border: 1px solid rgba(188, 206, 239, 0.8);
  font-size: 0.78rem;
  font-weight: 700;
}

.module-data-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.module-data-card {
  padding: 0.9rem 0.95rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 248, 255, 0.9));
  border: 1px solid rgba(198, 214, 243, 0.76);
  box-shadow: 0 16px 26px rgba(31, 63, 122, 0.06);
}

.module-data-card small,
.module-data-card strong,
.module-data-card span,
.info-panel-label,
.info-panel-tags span {
  display: block;
}

.module-data-card small {
  color: #6880af;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.module-data-card strong {
  margin-top: 0.28rem;
  font-size: 0.92rem;
  color: #1e396c;
}

.module-data-card span {
  margin-top: 0.3rem;
  color: #597195;
  font-size: 0.73rem;
  line-height: 1.45;
  font-weight: 700;
}

.info-panel-block {
  margin-top: 0.85rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(198, 214, 243, 0.74);
}

.info-panel-label {
  color: #6780b1;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.info-panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.info-panel-tags span {
  display: inline-flex;
  align-items: center;
  padding: 0.36rem 0.58rem;
  border-radius: 999px;
  background: rgba(232, 240, 255, 0.92);
  color: #37568e;
  border: 1px solid rgba(188, 206, 239, 0.78);
  font-size: 0.68rem;
  font-weight: 700;
}

.module-card-chat {
  background: linear-gradient(135deg, rgba(239, 251, 244, 0.88), rgba(255, 255, 255, 0.82));
}

.module-card-calendar {
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.9), rgba(255, 255, 255, 0.82));
}

.module-card-checkin {
  background: linear-gradient(135deg, rgba(241, 252, 245, 0.92), rgba(255, 255, 255, 0.84));
}

.module-card-validation {
  background: linear-gradient(135deg, rgba(243, 252, 246, 0.94), rgba(255, 255, 255, 0.84));
}

.module-card-insights {
  background: linear-gradient(135deg, rgba(240, 246, 255, 0.94), rgba(255, 255, 255, 0.84));
}

@keyframes carouselTabProgress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.how-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 0.8rem;
}

.how-summary-card {
  padding: 1.2rem;
}

.how-summary-card h3 {
  margin: 0 0 0.45rem;
}

.how-summary-card.highlight {
  background: linear-gradient(135deg, rgba(240, 248, 255, 0.92), rgba(237, 250, 240, 0.88));
}

.how-cta-box {
  text-align: left;
}

.how-cta-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}

.auth-page {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 10% 10%, rgba(79, 135, 255, 0.14), transparent 28%),
    radial-gradient(circle at 90% 14%, rgba(109, 208, 78, 0.14), transparent 24%),
    linear-gradient(180deg, #edf2fa 0%, #e7eef9 100%);
}

.app-delayed-loader[hidden] {
  display: none;
}

.app-delayed-loader {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.app-delayed-loader-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(235, 241, 251, 0.72);
  backdrop-filter: blur(8px);
}

.app-delayed-loader-dialog {
  position: relative;
  z-index: 1;
  min-width: min(100%, 320px);
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  padding: 1.35rem 1.3rem;
  border-radius: 24px;
  border: 1px solid rgba(196, 212, 239, 0.94);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 48px rgba(25, 54, 105, 0.14);
  text-align: center;
}

.app-delayed-loader-spinner {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 4px solid rgba(43, 79, 151, 0.14);
  border-top-color: #2b4f97;
  border-right-color: #6cd04d;
  animation: appDelayedLoaderSpin 0.9s linear infinite;
}

.app-delayed-loader-dialog strong {
  color: #24406a;
  font-size: 0.98rem;
}

.app-delayed-loader-dialog p {
  margin: 0;
  color: #6880a0;
  font-size: 0.84rem;
  line-height: 1.45;
}

@keyframes appDelayedLoaderSpin {
  to {
    transform: rotate(360deg);
  }
}

.auth-main {
  padding: 2.4rem 0 4rem;
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 460px);
  gap: 1.4rem;
  align-items: stretch;
}

.auth-shell-compact {
  grid-template-columns: minmax(320px, 460px);
  justify-content: center;
}

.auth-shell-register {
  grid-template-columns: minmax(0, 1fr);
}

.auth-stage,
.auth-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(204, 219, 243, 0.92);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 22px 48px rgba(26, 53, 101, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.auth-stage {
  padding: 2.1rem;
  min-height: 680px;
  background:
    radial-gradient(circle at 16% 18%, rgba(61, 121, 255, 0.18), transparent 26%),
    radial-gradient(circle at 84% 20%, rgba(99, 206, 106, 0.14), transparent 20%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 246, 255, 0.88));
}

.auth-stage::before {
  content: "";
  position: absolute;
  inset: auto -18% -26% auto;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43, 79, 151, 0.13), rgba(43, 79, 151, 0));
  filter: blur(12px);
}

.auth-stage-copy {
  position: relative;
  z-index: 1;
  max-width: 560px;
}

.auth-stage-copy h1 {
  margin-bottom: 0.85rem;
  max-width: 12ch;
}

.auth-stage-copy p {
  max-width: 56ch;
}

.auth-stage-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 1rem;
  margin-top: 1.7rem;
}

.auth-feature-list,
.auth-info-panel {
  padding: 1.2rem;
  border-radius: 24px;
  border: 1px solid rgba(204, 219, 243, 0.9);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.auth-feature-list {
  display: grid;
  gap: 0.85rem;
}

.auth-feature-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0.8rem;
  align-items: start;
}

.auth-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(34, 77, 155, 0.12), rgba(108, 208, 77, 0.16));
  color: #21427f;
  font-size: 1.15rem;
  font-weight: 800;
}

.auth-feature-item strong,
.auth-info-panel strong,
.auth-checklist strong,
.auth-trust-card strong {
  display: block;
}

.auth-feature-item p,
.auth-info-panel p,
.auth-checklist p,
.auth-trust-card p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.auth-info-panel {
  display: grid;
  gap: 1rem;
  background: linear-gradient(160deg, rgba(250, 253, 255, 0.96), rgba(241, 249, 242, 0.92));
}

.auth-chip-row,
.auth-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.auth-chip-row span,
.auth-proof-row span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(189, 207, 235, 0.9);
  background: rgba(255, 255, 255, 0.86);
  color: #2a4c8b;
  font-size: 0.82rem;
  font-weight: 700;
}

.auth-proof-row span {
  color: #215f32;
  border-color: rgba(160, 216, 167, 0.9);
  background: rgba(236, 249, 236, 0.9);
}

.auth-phone-card {
  position: relative;
  z-index: 1;
  margin-top: 1.2rem;
  padding: 1.2rem;
  border-radius: 26px;
  border: 1px solid rgba(203, 219, 244, 0.88);
  background: linear-gradient(145deg, rgba(10, 24, 49, 0.94), rgba(18, 40, 81, 0.92));
  color: #eef4ff;
  box-shadow: 0 20px 36px rgba(17, 35, 70, 0.18);
}

.auth-phone-card::before {
  content: "";
  position: absolute;
  inset: 16px 18px auto auto;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(64, 126, 255, 0.26), rgba(64, 126, 255, 0));
}

.auth-phone-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.auth-phone-card-head p,
.auth-phone-card-head strong,
.auth-phone-card-head small {
  margin: 0;
}

.auth-online-pill {
  padding: 0.42rem 0.72rem;
  border-radius: 999px;
  background: rgba(108, 208, 77, 0.18);
  border: 1px solid rgba(108, 208, 77, 0.42);
  color: #d9ffd1;
  font-size: 0.76rem;
  font-weight: 700;
}

.auth-chat-preview {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.7rem;
}

.auth-chat-line {
  max-width: 86%;
  padding: 0.82rem 0.9rem;
  border-radius: 18px;
  font-size: 0.92rem;
  line-height: 1.45;
  box-shadow: 0 12px 26px rgba(7, 18, 38, 0.18);
}

.auth-chat-line small {
  display: block;
  margin-top: 0.28rem;
  font-size: 0.72rem;
  opacity: 0.75;
}

.auth-chat-line.bot {
  background: #d7fdd2;
  color: #1d4f2e;
}

.auth-chat-line.client {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.94);
  color: #1f3665;
}

.auth-card {
  padding: 2rem 1.7rem;
}

.auth-card-compact {
  margin: 3.5rem auto 0;
}

.auth-card::before {
  content: "";
  position: absolute;
  inset: -40% auto auto -20%;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108, 208, 77, 0.12), rgba(108, 208, 77, 0));
}

.auth-card > * {
  position: relative;
  z-index: 1;
}

.auth-card-header {
  margin-bottom: 1.2rem;
}

.auth-card-header h2 {
  margin: 0.35rem 0 0.45rem;
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  color: #173565;
}

.auth-card-header p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.auth-social-stack {
  display: grid;
  gap: 0.75rem;
}

.auth-social-stack-compact {
  margin-top: 0.2rem;
}

.auth-form {
  display: grid;
  gap: 0.9rem;
}

.auth-field {
  display: grid;
  gap: 0.42rem;
}

.auth-field span {
  color: #173565;
  font-size: 0.9rem;
  font-weight: 700;
}

.auth-field input {
  width: 100%;
  min-height: 54px;
  padding: 0.92rem 1rem;
  border: 1px solid rgba(197, 214, 239, 0.96);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  color: #173565;
  font: inherit;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.auth-field input:focus {
  border-color: rgba(43, 79, 151, 0.78);
  box-shadow: 0 0 0 4px rgba(43, 79, 151, 0.1);
}

.auth-field input::placeholder {
  color: #8a9bbb;
}

.auth-field input:disabled {
  background: rgba(237, 243, 252, 0.9);
  color: #8393b2;
  cursor: not-allowed;
}

.auth-submit-btn {
  width: 100%;
  min-height: 56px;
  margin-top: 0.15rem;
  border-radius: 16px;
  font-size: 0.98rem;
}

.auth-biometric-btn {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
}

.auth-biometric-prompt-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.44);
  backdrop-filter: blur(3px);
  padding: 1rem;
}

.auth-biometric-prompt-backdrop[hidden] {
  display: none;
}

.auth-biometric-prompt {
  position: relative;
  width: min(100%, 420px);
  border-radius: 16px;
  border: 1px solid rgba(198, 215, 241, 0.96);
  background: #fff;
  padding: 1rem;
  display: grid;
  gap: 0.75rem;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.22);
}

.auth-biometric-prompt-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(198, 215, 241, 0.96);
  border-radius: 8px;
  background: #f1f5f9;
  color: #4b6489;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.auth-biometric-prompt h3 {
  margin: 0;
  color: #173565;
  font-size: 1.05rem;
}

.auth-biometric-prompt p {
  margin: 0;
  color: #5c7497;
  font-size: 0.88rem;
  line-height: 1.45;
}

.auth-biometric-prompt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.auth-biometric-prompt-actions .btn {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
  border-color: #1d4ed8;
}

.auth-biometric-prompt-actions .btn:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  border-color: #1e40af;
}

.auth-register-section {
  margin-top: 0.3rem;
}

.auth-register-head {
  margin-bottom: 0.9rem;
}

.auth-register-head h3 {
  margin: 0;
  color: #173565;
  font-size: 1.08rem;
}

.auth-register-head p {
  margin: 0.35rem 0 0;
  color: #637ba2;
  font-size: 0.86rem;
  line-height: 1.45;
}

.auth-doc-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.auth-doc-option {
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(197, 214, 239, 0.96);
  background: rgba(255, 255, 255, 0.85);
  color: #173565;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.auth-doc-option.is-active {
  border-color: rgba(37, 99, 235, 0.5);
  color: #1d4ed8;
  background: rgba(239, 246, 255, 0.95);
}

.auth-doc-option.is-disabled,
.auth-doc-option:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.auth-grid {
  display: grid;
  gap: 0.75rem;
}

.auth-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.auth-grid-4 {
  grid-template-columns: 1.15fr 1fr 0.55fr 0.8fr;
}

.auth-password-rules {
  margin-top: -0.1rem;
  color: #5f759b;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
}

.auth-logo-preview {
  margin-top: 0.2rem;
  border: 1px solid rgba(197, 214, 239, 0.96);
  border-radius: 14px;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.92);
}

.auth-logo-preview img {
  display: block;
  width: 100%;
  max-width: 220px;
  max-height: 120px;
  object-fit: contain;
}

@media (max-width: 900px) {
  .auth-grid-2,
  .auth-grid-3,
  .auth-grid-4 {
    grid-template-columns: 1fr;
  }
}

.auth-link-row {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.95rem;
  margin-bottom: 0.2rem;
}

.auth-link-row a {
  color: #2b4f97;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.auth-link-row a:hover {
  color: #1f3f79;
  text-decoration: underline;
}

.social-auth-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.78rem;
  min-height: 58px;
  padding: 0.9rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(197, 214, 239, 0.96);
  background: rgba(255, 255, 255, 0.92);
  color: #18376a;
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.social-auth-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(133, 164, 214, 0.96);
  box-shadow: 0 16px 30px rgba(29, 58, 109, 0.12);
}

.social-auth-btn:disabled,
.social-auth-btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.56;
  transform: none;
  box-shadow: none;
}

.social-auth-btn svg {
  flex: 0 0 auto;
}

.social-auth-btn.apple {
  background: linear-gradient(135deg, #10203f, #091224);
  border-color: rgba(12, 25, 51, 0.94);
  color: #ffffff;
}

.social-auth-btn.apple:hover {
  border-color: rgba(43, 79, 151, 0.72);
  box-shadow: 0 18px 32px rgba(7, 18, 38, 0.24);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1.2rem 0;
  color: #7387af;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(205, 220, 245, 0), rgba(205, 220, 245, 1), rgba(205, 220, 245, 0));
}

.auth-checklist,
.auth-trust-card,
.auth-note {
  border-radius: 20px;
  border: 1px solid rgba(204, 219, 243, 0.9);
  background: rgba(245, 249, 255, 0.82);
}

.auth-checklist {
  padding: 1rem;
}

.auth-checklist ul {
  margin: 0.8rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
}

.auth-checklist li + li {
  margin-top: 0.45rem;
}

.auth-note {
  margin-top: 0.95rem;
  padding: 0.95rem 1rem;
  color: #37527f;
  font-size: 0.88rem;
  line-height: 1.6;
}

.auth-note strong {
  color: #173565;
}

.auth-feedback {
  min-height: 22px;
  margin-top: 0.9rem;
  color: #1f3f79;
  font-size: 0.88rem;
  font-weight: 600;
}

.auth-feedback.is-error {
  color: #a84332;
}

.auth-feedback.is-success {
  color: #246335;
}

.admin-page {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 12% 6%, rgba(79, 135, 255, 0.16), transparent 28%),
    radial-gradient(circle at 90% 12%, rgba(109, 208, 78, 0.14), transparent 24%),
    linear-gradient(180deg, #edf2fa 0%, #e7eef9 100%);
}

.admin-page[data-auth-state="checking"] .admin-shell {
  opacity: 0;
  pointer-events: none;
}

.admin-main {
  padding: 2rem 0 3rem;
}

.admin-shell {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  transition: opacity 0.2s ease;
}

.admin-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.admin-sidebar,
.admin-panel,
.admin-hero {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(204, 219, 243, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 22px 44px rgba(26, 53, 101, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.admin-sidebar {
  position: sticky;
  top: 82px;
  z-index: 12;
  isolation: isolate;
  overflow: visible;
  min-width: 0;
  padding: 1.2rem;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(12, 27, 54, 0.96), rgba(19, 43, 84, 0.96));
  border-color: rgba(35, 70, 131, 0.4);
  color: #ecf4ff;
  box-shadow:
    0 24px 48px rgba(10, 24, 49, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.admin-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
}

.admin-sidebar-toggle {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(129, 160, 221, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: #eaf3ff;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.admin-sidebar-toggle:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(155, 184, 237, 0.32);
}

.admin-sidebar-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}

.admin-sidebar-locale-wrap {
  position: relative;
  margin: 0.55rem 0 0.4rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(129, 160, 221, 0.18);
}

.admin-sidebar-locale-wrap.is-open {
  z-index: 10040;
}

.admin-sidebar-locale-trigger {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  padding: 0.42rem 0.55rem;
  border: 1px solid rgba(129, 160, 221, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: #eaf3ff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.admin-sidebar-locale-trigger:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(155, 184, 237, 0.32);
}

details.admin-sidebar-locale-wrap > summary.admin-sidebar-locale-trigger {
  list-style: none;
  display: inline-flex;
}

details.admin-sidebar-locale-wrap > summary.admin-sidebar-locale-trigger::-webkit-details-marker {
  display: none;
}

details.admin-sidebar-locale-wrap > summary.admin-sidebar-locale-trigger::marker {
  content: '';
}

.admin-sidebar-locale-flag {
  line-height: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-locale-flag-icon {
  display: block;
  width: 24px;
  height: auto;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.18);
}

.admin-locale-flag-icon--option {
  width: 22px;
  border-radius: 3px;
}

.admin-locale-option-leading {
  flex-shrink: 0;
  line-height: 0;
}

.admin-locale-option-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-sidebar-locale-code {
  min-width: 1.5rem;
  opacity: 0.95;
}

.admin-sidebar-locale-caret {
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.55;
  color: currentColor;
}

.admin-sidebar-locale-dropdown {
  /* position + inset set in JS (fixed) so the menu is not clipped by sidebar overflow */
  box-sizing: border-box;
  padding: 0.35rem;
  border-radius: 14px;
  background: rgba(11, 27, 54, 0.98);
  border: 1px solid rgba(95, 126, 183, 0.38);
  pointer-events: auto;
  box-shadow:
    0 14px 36px rgba(5, 12, 28, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.admin-sidebar-locale-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #e8f0ff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.admin-sidebar-locale-option:hover {
  background: rgba(255, 255, 255, 0.08);
}

.admin-sidebar-locale-option.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.admin-page[data-admin-sidebar="collapsed"] .admin-sidebar-locale-caret {
  display: none;
}

.admin-page[data-admin-sidebar="collapsed"] .admin-sidebar-locale-code {
  display: inline;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  opacity: 0.92;
}

.admin-page[data-admin-sidebar="collapsed"] .admin-sidebar-locale-trigger {
  justify-content: center;
  padding: 0.48rem;
}

.admin-page[data-admin-sidebar="collapsed"] .admin-sidebar-locale-wrap {
  margin-top: 0.35rem;
  padding-bottom: 0.55rem;
}

.admin-nav {
  display: grid;
  gap: 0.7rem;
  margin-top: 1rem;
}

.admin-nav-item {
  width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  border: 1px solid rgba(129, 160, 221, 0.14);
  border-radius: 16px;
  padding: 0.92rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(223, 234, 254, 0.82);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    color 0.22s ease,
    opacity 0.22s ease;
}

.admin-nav-item:not(.is-active) {
  opacity: 0.9;
}

.admin-nav-item:not(.is-active) .admin-nav-icon {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(168, 194, 239, 0.1);
  color: rgba(234, 243, 255, 0.88);
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

.admin-nav-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(168, 194, 239, 0.12);
  color: #eaf3ff;
}

.admin-nav-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.admin-nav-label {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  margin-right: auto;
  text-align: left;
  white-space: normal;
  line-height: 1.25;
}

.admin-page[data-admin-sidebar="collapsed"] .admin-shell {
  grid-template-columns: 92px minmax(0, 1fr);
}

.admin-page[data-admin-sidebar="collapsed"] .admin-sidebar-help {
  display: none;
}

.admin-page[data-admin-sidebar="collapsed"] .admin-sidebar-brand-text {
  display: none;
}

.admin-page[data-admin-sidebar="collapsed"] .admin-sidebar {
  padding: 1rem 0.8rem;
}

.admin-page[data-admin-sidebar="collapsed"] .admin-sidebar-head {
  justify-content: center;
}

.admin-page[data-admin-sidebar="collapsed"] .admin-sidebar .badge,
.admin-page[data-admin-sidebar="collapsed"] .admin-nav-label,
.admin-page[data-admin-sidebar="collapsed"] .admin-sidebar::after {
  display: none;
}

.admin-page[data-admin-sidebar="collapsed"] .admin-sidebar-toggle {
  margin-inline: auto;
}

.admin-page[data-admin-sidebar="collapsed"] .admin-sidebar-toggle svg {
  transform: rotate(180deg);
}

.admin-page[data-admin-sidebar="collapsed"] .admin-nav {
  margin-top: 0.8rem;
}

.admin-page[data-admin-sidebar="collapsed"] .admin-nav-item {
  position: relative;
  z-index: 2;
  justify-content: center;
  padding: 0.9rem;
}

.admin-page[data-admin-sidebar="collapsed"] .admin-nav-icon {
  margin: 0;
}

.admin-page[data-admin-sidebar="collapsed"] .admin-nav-item::after {
  content: attr(data-nav-hint);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  padding: 0.45rem 0.65rem;
  border-radius: 12px;
  background: rgba(11, 27, 54, 0.96);
  border: 1px solid rgba(95, 126, 183, 0.32);
  color: #eef5ff;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 40;
}

.admin-page[data-admin-sidebar="collapsed"] .admin-nav-item:hover::after,
.admin-page[data-admin-sidebar="collapsed"] .admin-nav-item:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.admin-nav-item:hover:not(:disabled):not(.is-active) {
  transform: translateY(-1px);
  opacity: 1;
  border-color: rgba(148, 180, 239, 0.32);
  background: rgba(255, 255, 255, 0.07);
  color: #f1f6ff;
  box-shadow: 0 10px 26px rgba(5, 16, 36, 0.22);
}

.admin-nav-item:hover:not(:disabled):not(.is-active) .admin-nav-icon {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(189, 218, 255, 0.16);
  color: #fff;
}

.admin-nav-item.is-active {
  transform: translateY(-1px);
  opacity: 1;
  border-color: rgba(96, 165, 250, 0.55);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.52), rgba(22, 78, 160, 0.58));
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 16px 36px rgba(5, 16, 36, 0.38);
}

.admin-nav-item.is-active .admin-nav-icon {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(191, 219, 254, 0.35);
  color: #fff;
}

.admin-nav-item.is-active:hover {
  border-color: rgba(125, 211, 252, 0.55);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 18px 40px rgba(5, 16, 36, 0.42);
}

.admin-nav-item:active:not(:disabled) {
  transform: translateY(0);
  transition-duration: 0.12s;
}

/* Operador: itens sem permissão somem do menu (hidden + classe; display do .admin-nav-item não pode vencer). */
.admin-nav-item.is-menu-access-hidden,
.admin-nav-item[hidden],
.admin-nav-group.is-menu-access-hidden,
.admin-nav-group[hidden],
.admin-nav-quick-btn.is-menu-access-hidden,
.admin-nav-quick-btn[hidden] {
  display: none !important;
  pointer-events: none !important;
}

.admin-nav-item:disabled,
.admin-nav-item.is-locked {
  opacity: 0.48;
  cursor: not-allowed;
  border-color: rgba(129, 160, 221, 0.1);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: none;
}

.admin-nav-item:disabled .admin-nav-icon,
.admin-nav-item.is-locked .admin-nav-icon {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(168, 194, 239, 0.08);
  color: rgba(234, 243, 255, 0.7);
}

.admin-sidebar .badge {
  border-color: rgba(155, 184, 237, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #eef5ff;
}

.admin-sidebar::after {
  content: none;
  display: none;
}

.admin-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.admin-sidebar-brand-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.11);
  color: #eaf3ff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 14px rgba(5, 16, 36, 0.22);
}

.admin-sidebar-brand-icon svg {
  width: 22px;
  height: 22px;
}

.admin-page[data-admin-sidebar="collapsed"] .admin-sidebar-brand-icon {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border-radius: 15px;
}

.admin-sidebar-brand-text {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f2f7ff;
}

.admin-sidebar-help {
  margin-top: 1rem;
  padding: 1rem 1.05rem;
  border-radius: 20px;
  border: 1px solid rgba(129, 160, 221, 0.22);
  background: rgba(8, 20, 44, 0.55);
}

.admin-sidebar-help strong {
  display: block;
  font-size: 0.92rem;
  color: #f2f7ff;
}

.admin-sidebar-help p {
  margin: 0.35rem 0 0.75rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(226, 236, 255, 0.78);
}

.admin-sidebar-help-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.85rem;
  border-radius: 14px;
  font-weight: 800;
  font-size: 0.82rem;
  text-decoration: none;
  border: 1px solid rgba(108, 208, 77, 0.45);
  background: linear-gradient(135deg, #4bbf5c, #2f9a48);
  color: #fff;
  box-shadow: 0 10px 22px rgba(12, 48, 22, 0.35);
}

.admin-sidebar-help-btn:hover {
  filter: brightness(1.05);
}

.admin-nav-item-soon {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

/* === Sidebar: grupos colapsáveis (Financeiro / Configurações) === */
.admin-nav-group {
  display: grid;
  gap: 0.35rem;
}

.admin-nav-group-trigger {
  position: relative;
}

.admin-nav-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: auto;
  color: rgba(206, 220, 245, 0.7);
  transition: transform 0.22s ease, color 0.22s ease;
}

.admin-nav-chevron svg {
  width: 16px;
  height: 16px;
  display: block;
}

.admin-nav-group.is-open > .admin-nav-group-trigger .admin-nav-chevron {
  transform: rotate(180deg);
  color: #fff;
}

.admin-nav-group.has-active-child > .admin-nav-group-trigger {
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(37, 99, 235, 0.18);
  color: #fff;
}

.admin-nav-group.has-active-child > .admin-nav-group-trigger .admin-nav-icon {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(191, 219, 254, 0.28);
  color: #fff;
}

.admin-nav-sublist {
  display: grid;
  gap: 0.4rem;
  margin: 0.05rem 0 0.1rem 1rem;
  padding-left: 0.75rem;
  border-left: 1px solid rgba(129, 160, 221, 0.18);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.18s ease, margin 0.18s ease;
}

.admin-nav-group.is-open > .admin-nav-sublist {
  max-height: 520px;
  opacity: 1;
  margin: 0.15rem 0 0.35rem 1rem;
}

.admin-nav-subitem {
  padding: 0.6rem 0.85rem;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 600;
  gap: 0.65rem;
  border-color: rgba(129, 160, 221, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(214, 226, 247, 0.82);
}

.admin-nav-subitem-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(168, 194, 239, 0.4);
  flex: 0 0 8px;
  transition: background 0.22s ease, transform 0.22s ease;
}

.admin-nav-subitem:hover:not(:disabled):not(.is-locked) .admin-nav-subitem-dot {
  background: rgba(125, 211, 252, 0.85);
  transform: scale(1.15);
}

.admin-nav-subitem.is-active {
  border-color: rgba(96, 165, 250, 0.45);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.42), rgba(22, 78, 160, 0.48));
  color: #fff;
}

.admin-nav-subitem.is-active .admin-nav-subitem-dot {
  background: #93c5fd;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.18);
}

/* === Sidebar: bloco de Ações rápidas === */
.admin-nav-quick-actions {
  margin-top: 0.85rem;
  padding: 0.85rem 0.9rem 0.9rem;
  border-radius: 18px;
  border: 1px solid rgba(129, 160, 221, 0.14);
  background: rgba(255, 255, 255, 0.025);
  display: grid;
  gap: 0.5rem;
}

.admin-nav-quick-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(167, 192, 229, 0.78);
  padding: 0.1rem 0.1rem 0.35rem;
}

.admin-nav-quick-title::after {
  content: "+";
  font-size: 1.05rem;
  line-height: 1;
  color: rgba(180, 204, 240, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(168, 194, 239, 0.18);
  border-radius: 8px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-nav-quick-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 0.75rem;
  border: 1px solid rgba(129, 160, 221, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(223, 234, 254, 0.86);
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.admin-nav-quick-btn:hover:not(:disabled):not(.is-locked) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(189, 218, 255, 0.22);
  color: #fff;
  transform: translateY(-1px);
}

.admin-nav-quick-btn:active:not(:disabled):not(.is-locked) {
  transform: translateY(0);
}

.admin-nav-quick-btn:disabled,
.admin-nav-quick-btn.is-locked {
  opacity: 0.46;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.015);
  border-color: rgba(129, 160, 221, 0.08);
}

.admin-nav-quick-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  background: rgba(96, 165, 250, 0.14);
  border: 1px solid rgba(125, 211, 252, 0.22);
  color: #cfe6ff;
}

.admin-nav-quick-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.admin-nav-quick-label {
  flex: 1 1 auto;
  min-width: 0;
}

/* Sidebar colapsada (modo desktop ícone-only) — esconde sublist e ações rápidas para evitar overflow visual */
.admin-page[data-admin-sidebar="collapsed"] .admin-nav-chevron,
.admin-page[data-admin-sidebar="collapsed"] .admin-nav-sublist,
.admin-page[data-admin-sidebar="collapsed"] .admin-nav-quick-actions {
  display: none;
}

/* === Submenu flyout / bottom sheet (sidebar colapsada; renderizado fora do aside) === */
.admin-nav-submenu-root {
  position: fixed;
  inset: 0;
  z-index: 10050;
  pointer-events: none;
}

.admin-nav-submenu-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 10, 24, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.admin-nav-submenu-root:not([hidden]) .admin-nav-submenu-scrim:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}

.admin-nav-submenu-panel {
  position: fixed;
  display: flex;
  flex-direction: column;
  max-height: min(72vh, 520px);
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(168deg, rgba(14, 28, 56, 0.98), rgba(8, 18, 42, 0.99));
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(120, 160, 255, 0.1) inset;
  color: #e8f0ff;
  pointer-events: auto;
}

.admin-nav-submenu-panel.admin-nav-submenu-panel--flyout {
  min-width: 260px;
  max-width: 320px;
  width: min(320px, calc(100vw - 24px));
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.admin-nav-submenu-panel.admin-nav-submenu-panel--flyout.is-open {
  opacity: 1;
  transform: translateX(0);
}

.admin-nav-submenu-panel.admin-nav-submenu-panel--sheet {
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 560px;
  min-width: 0;
  border-radius: 20px 20px 0 0;
  max-height: min(78vh, 560px);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.admin-nav-submenu-panel.admin-nav-submenu-panel--sheet.is-open {
  transform: translateY(0);
}

.admin-nav-submenu-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-nav-submenu-header-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(96, 165, 250, 0.22);
  border: 1px solid rgba(147, 197, 253, 0.28);
  color: #eaf3ff;
}

.admin-nav-submenu-header-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.admin-nav-submenu-header-text {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-nav-submenu-header-text strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.admin-nav-submenu-desc {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: rgba(198, 214, 245, 0.78);
}

.admin-nav-submenu-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #eaf3ff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-nav-submenu-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.admin-nav-submenu-list {
  padding: 0.5rem 0.65rem 0.85rem;
  display: grid;
  gap: 0.35rem;
  overflow-y: auto;
}

.admin-nav-submenu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.72rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(129, 160, 221, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(232, 240, 255, 0.92);
  font: inherit;
  font-weight: 650;
  font-size: 0.94rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.admin-nav-submenu-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(155, 184, 237, 0.22);
}

.admin-nav-submenu-item.is-active {
  border-color: rgba(96, 165, 250, 0.55);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.45), rgba(22, 78, 160, 0.5));
  color: #fff;
}

.admin-nav-submenu-item:disabled,
.admin-nav-submenu-item.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-content {
  display: grid;
  gap: 1rem;
}

.admin-hero,
.admin-panel {
  border-radius: 28px;
  padding: 1.4rem;
}

.admin-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 0.8rem;
  align-items: center;
}

.admin-hero.admin-hero-dashboard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1rem;
  flex-wrap: wrap;
}

.admin-content > .admin-hero.admin-hero-dashboard {
  padding: 0.85rem 1.1rem;
  border: 1px solid rgba(226, 232, 241, 0.85);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  box-shadow: 0 10px 28px rgba(32, 59, 114, 0.06);
  position: relative;
  z-index: 30;
  overflow: visible;
}

.admin-hero-dashboard-left {
  flex: 1 1 240px;
  min-width: 0;
}

.admin-hero-dashboard-left h1 {
  margin: 0;
  font-size: clamp(1.2rem, 2.1vw, 1.58rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #132a52;
  line-height: 1.15;
}

.admin-hero-dashboard-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
  margin: 0.32rem 0 0;
  font-size: 0.82rem;
  color: #5d6f95;
}

.admin-hero-dashboard-now {
  font-weight: 600;
  color: #4a6088;
}

.admin-hero-dashboard-shift {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(108, 208, 77, 0.16);
  color: #1f6a32;
  border: 1px solid rgba(108, 208, 77, 0.35);
}

.admin-hero-dashboard-profile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  padding: 0.12rem 0;
}

.admin-hero-dashboard-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: #1e3a5f;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  text-align: left;
}

.admin-content > .admin-hero.admin-hero-dashboard .admin-hero-dashboard-profile .admin-hero-avatar-wrap {
  order: 1;
}

.admin-content > .admin-hero.admin-hero-dashboard .admin-hero-dashboard-profile .admin-hero-dashboard-name {
  order: 2;
}

.admin-content > .admin-hero.admin-hero-dashboard .admin-hero-dashboard-profile .admin-hero-dashboard-menu {
  order: 3;
}

.admin-hero-profile-menu-wrap {
  position: relative;
  order: 3;
  z-index: 36;
}

.admin-hero-avatar-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.admin-hero-dashboard-profile .admin-hero-avatar-wrap > .admin-hero-dashboard-avatar--photo,
.admin-hero-dashboard-profile .admin-hero-avatar-wrap > .admin-hero-dashboard-avatar--initials,
.admin-hero-dashboard-profile .admin-hero-avatar-wrap > .admin-hero-dashboard-avatar--icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
  margin: 0;
}

.admin-hero-dashboard-profile .admin-hero-avatar-wrap [hidden] {
  display: none !important;
}

.admin-content > .admin-hero.admin-hero-dashboard .admin-hero-avatar-wrap {
  width: 40px;
  height: 40px;
}

.admin-hero-dashboard-avatar--photo {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(198, 215, 241, 0.95);
  box-shadow: 0 6px 14px rgba(32, 59, 114, 0.12);
}

.admin-content > .admin-hero.admin-hero-dashboard .admin-hero-dashboard-avatar--photo {
  width: 40px;
  height: 40px;
  border-width: 2px;
}

.admin-hero-dashboard-avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(145deg, #2563eb, #1d4ed8);
  border: 2px solid rgba(30, 64, 175, 0.45);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.32);
}

.admin-content > .admin-hero.admin-hero-dashboard .admin-hero-dashboard-avatar--initials {
  width: 40px;
  height: 40px;
  font-size: 0.78rem;
}

.admin-hero-dashboard-avatar--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  border: 2px solid #cbd5e1;
}

.admin-content > .admin-hero.admin-hero-dashboard .admin-hero-dashboard-avatar--icon {
  width: 40px;
  height: 40px;
}

.admin-hero-dashboard-menu {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(198, 215, 241, 0.95);
  background: rgba(255, 255, 255, 0.9);
  color: #36537c;
  cursor: pointer;
  opacity: 1;
}

.admin-content > .admin-hero.admin-hero-dashboard .admin-hero-dashboard-menu {
  width: 34px;
  height: 34px;
  border-radius: 11px;
}

.admin-hero-dashboard-menu svg {
  width: 18px;
  height: 18px;
  transition: transform 0.18s ease;
}

.admin-hero-dashboard-menu[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.admin-hero-dashboard-menu:hover {
  border-color: rgba(148, 180, 239, 0.68);
  background: #ffffff;
}

.admin-hero-profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  z-index: 120;
  min-width: 148px;
  padding: 0.35rem;
  border-radius: 12px;
  border: 1px solid rgba(198, 215, 241, 0.95);
  background: #fff;
  box-shadow: 0 14px 30px rgba(32, 59, 114, 0.14);
}

.admin-hero-profile-menu-item {
  width: 100%;
  display: block;
  padding: 0.58rem 0.62rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #1e3a5f;
  text-align: left;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

.admin-hero-profile-menu-item:hover {
  background: rgba(37, 99, 235, 0.08);
}

.admin-dashboard-panel.admin-panel {
  padding: 1.15rem 1.25rem 1.35rem;
}

.admin-dashboard-canvas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 1.15rem;
  align-items: start;
}

.admin-dashboard-main {
  display: grid;
  gap: 1.15rem;
  min-width: 0;
}

.admin-dashboard-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.admin-dashboard-kpi-card {
  padding: 0.95rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 4px 16px rgba(32, 59, 114, 0.04);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

.admin-dashboard-kpi-card:hover {
  transform: translateY(-1px);
  border-color: rgba(203, 213, 225, 0.98);
  box-shadow: 0 10px 24px rgba(32, 59, 114, 0.08);
  background: rgba(255, 255, 255, 0.96);
}

.admin-dashboard-kpi-card:active {
  transform: translateY(0);
  transition-duration: 0.12s;
}

.admin-dashboard-kpi-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6f87a5;
  margin-bottom: 0.35rem;
}

.admin-dashboard-kpi-value-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.admin-dashboard-kpi-value-row strong {
  font-size: 1.12rem;
  font-weight: 800;
  color: #1a305c;
}

.admin-dashboard-kpi-pill {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
}

.admin-dashboard-kpi-pill--up {
  background: rgba(108, 208, 77, 0.18);
  color: #1f6a32;
}

.admin-dashboard-kpi-pill--blue {
  background: rgba(43, 79, 151, 0.12);
  color: #2b4f97;
}

.admin-dashboard-status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #5d6f95;
  padding: 0.15rem 0 0.25rem;
}

.admin-dashboard-status-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.admin-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display: inline-block;
}

.admin-legend-dot[data-legend="confirmado"] {
  background: #2563eb;
}

.admin-legend-dot[data-legend="caminho"] {
  background: #e6b422;
}

.admin-legend-dot[data-legend="atrasado"] {
  background: #e05858;
}

.admin-legend-dot[data-legend="aguardando"] {
  background: #4a7bdf;
}

.admin-legend-dot[data-legend="concluido"] {
  background: #7a8aa8;
}

.admin-legend-dot[data-legend="cancelado"] {
  background: #9aa3b5;
}

.admin-dashboard-agenda {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.05rem 1.1rem;
  border-radius: 22px;
  border: 1px solid rgba(241, 245, 249, 0.9);
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 18px 40px rgba(32, 59, 114, 0.07);
  min-height: 320px;
}

.admin-dashboard-agenda-head {
  display: grid;
  gap: 0.55rem;
}

.admin-dashboard-agenda-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.admin-dashboard-agenda-title-row h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a305c;
}

.admin-sync-pill {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(198, 215, 241, 0.95);
  color: #4a6088;
  background: rgba(247, 250, 255, 0.95);
}

.admin-sync-pill[data-tone="success"] {
  border-color: rgba(108, 208, 77, 0.45);
  color: #1f6a32;
  background: rgba(108, 208, 77, 0.12);
}

.admin-sync-pill[data-tone="warn"] {
  border-color: rgba(224, 168, 68, 0.55);
  color: #8a5a12;
  background: rgba(255, 214, 140, 0.2);
}

.admin-dashboard-agenda-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.admin-dashboard-agenda-filter {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.55rem;
}

.admin-dashboard-agenda-filter span {
  font-size: 0.72rem;
  font-weight: 700;
  color: #60779f;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.admin-dashboard-agenda-filter select {
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(161, 182, 221, 0.75);
  background: rgba(247, 251, 255, 0.96);
  color: #27406f;
  padding: 0.35rem 0.7rem;
  font: inherit;
}

.admin-dashboard-agenda-date {
  flex: 1 1 auto;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: #36537c;
}

.admin-agenda-icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(198, 215, 241, 0.95);
  background: rgba(255, 255, 255, 0.95);
  color: #36537c;
  cursor: pointer;
  opacity: 1;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.admin-agenda-icon-btn:hover:not(:disabled) {
  border-color: rgba(153, 182, 230, 0.95);
  box-shadow: 0 8px 18px rgba(29, 68, 139, 0.14);
  transform: translateY(-1px);
}

.admin-agenda-icon-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.admin-agenda-icon-btn svg {
  width: 18px;
  height: 18px;
}

.admin-dashboard-agenda-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  padding: 0.2rem;
  border-radius: 14px;
  background: rgba(237, 242, 251, 0.95);
}

.admin-dashboard-agenda-tab {
  border: 0;
  border-radius: 11px;
  padding: 0.45rem 0.35rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  color: #5d6f95;
  background: transparent;
  cursor: pointer;
  transition: color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.admin-dashboard-agenda-tab:hover:not(:disabled):not(.is-active) {
  color: #36537c;
  background: rgba(255, 255, 255, 0.55);
}

.admin-dashboard-agenda-tab:active:not(:disabled) {
  transform: scale(0.98);
  transition-duration: 0.12s;
}

.admin-dashboard-agenda-tab.is-active {
  background: #fff;
  color: #2b4f97;
  box-shadow: 0 4px 12px rgba(32, 59, 114, 0.1);
}

.admin-dashboard-agenda-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-day-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: min(52vh, 420px);
  overflow: auto;
  padding-right: 0.15rem;
}

.admin-day-timeline .admin-quick-agenda-item {
  position: relative;
  z-index: 1;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 4px 12px rgba(32, 59, 114, 0.045);
  opacity: 0.88;
  filter: saturate(0.92);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    opacity 0.22s ease,
    filter 0.22s ease;
}

.admin-day-timeline .admin-quick-agenda-now-marker ~ .admin-quick-agenda-item {
  opacity: 1;
  filter: none;
  border-color: rgba(203, 213, 225, 0.95);
}

.admin-day-timeline .admin-quick-agenda-item.is-agenda-past {
  opacity: 0.68;
  filter: saturate(0.8);
}

.admin-day-timeline .admin-quick-agenda-item[data-tone="cancelled"].is-agenda-past,
.admin-day-timeline .admin-quick-agenda-item[data-tone="no-show"].is-agenda-past {
  opacity: 1;
  filter: none;
}

.admin-day-timeline .admin-quick-agenda-item.is-agenda-future {
  opacity: 0.93;
}

.admin-day-timeline .admin-quick-agenda-item.is-agenda-current {
  opacity: 1;
  filter: none;
}

.admin-day-timeline .admin-quick-agenda-item[data-tone="confirmed"] {
  border-color: rgba(78, 168, 99, 0.38);
  background: linear-gradient(135deg, rgba(242, 251, 244, 0.98), rgba(255, 255, 255, 0.98));
}

.admin-day-timeline .admin-quick-agenda-item[data-tone="pending"] {
  border-color: rgba(211, 154, 59, 0.42);
  background: linear-gradient(135deg, rgba(255, 249, 238, 0.98), rgba(255, 255, 255, 0.98));
}

.admin-day-timeline .admin-quick-agenda-item[data-tone="cancelled"] {
  border-color: rgba(200, 92, 92, 0.4);
  background: linear-gradient(135deg, rgba(255, 243, 243, 0.98), rgba(255, 255, 255, 0.98));
}

.admin-day-timeline .admin-quick-agenda-item[data-tone="no-show"] {
  border-color: rgba(15, 23, 42, 0.42);
  background: linear-gradient(135deg, rgba(241, 245, 249, 0.98), rgba(255, 255, 255, 0.98));
}

.admin-day-timeline .admin-quick-agenda-item[data-tone="em-atendimento"] {
  border-color: rgba(140, 92, 214, 0.38);
  background: linear-gradient(135deg, rgba(247, 241, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.admin-day-timeline .admin-quick-agenda-item[data-tone="atrasado"] {
  border-color: rgba(221, 134, 28, 0.4);
  background: linear-gradient(135deg, rgba(255, 245, 233, 0.98), rgba(255, 255, 255, 0.98));
}

.admin-day-timeline .admin-quick-agenda-item[data-tone="atendido"] {
  border-color: rgba(37, 99, 235, 0.45);
  background: linear-gradient(135deg, rgba(226, 239, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.admin-day-timeline .admin-quick-agenda-item[data-tone="completed"] {
  border-color: rgba(37, 99, 235, 0.45);
  background: linear-gradient(135deg, rgba(226, 239, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.admin-day-timeline .admin-quick-agenda-item[data-tone="blocked"] {
  border-color: rgba(134, 151, 173, 0.42);
  background: linear-gradient(135deg, rgba(243, 246, 250, 0.98), rgba(255, 255, 255, 0.98));
}

.admin-day-timeline .admin-quick-agenda-item:hover,
.admin-day-timeline .admin-quick-agenda-item:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(32, 59, 114, 0.1);
}

.admin-day-timeline .admin-quick-agenda-item:active {
  transform: translateY(0);
  transition-duration: 0.12s;
}

.admin-dashboard-day-timeline {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 0.45rem;
  max-height: min(58vh, 460px);
  overflow: auto;
  padding-right: 0.15rem;
}

.admin-dashboard-day-axis {
  border: 1px solid rgba(211, 222, 240, 0.95);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.98);
  overflow: hidden;
}

.admin-dashboard-day-axis-mark {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.14rem;
  border-top: 1px solid rgba(227, 234, 245, 0.92);
}

.admin-dashboard-day-axis-mark span {
  color: #7a8da8;
  font-size: 0.6rem;
  font-weight: 700;
}

.admin-dashboard-day-axis-mark.is-hour span {
  color: #23406a;
  font-size: 0.64rem;
  font-weight: 800;
}

.admin-dashboard-day-columns-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}

.admin-dashboard-day-columns {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(170px, 1fr);
  gap: 0.45rem;
}

.admin-dashboard-day-column {
  border: 1px solid rgba(205, 218, 240, 0.94);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  overflow: hidden;
}

.admin-dashboard-day-column-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 0.42rem;
  align-items: center;
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid rgba(213, 224, 241, 0.92);
  background: rgba(255, 255, 255, 0.96);
}

.admin-dashboard-day-column-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #2b4f97, #3d67b5);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  overflow: hidden;
}

.admin-dashboard-day-column-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-dashboard-day-column-head strong {
  display: block;
  color: #223d67;
  font-size: 0.74rem;
}

.admin-dashboard-day-column-head small {
  display: block;
  margin-top: 0.05rem;
  color: #6d839f;
  font-size: 0.62rem;
  font-weight: 700;
}

.admin-dashboard-day-column-grid {
  position: relative;
}

.admin-dashboard-day-slot-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid rgba(226, 233, 244, 0.94);
}

.admin-dashboard-day-slot-line.is-major {
  border-top-color: rgba(187, 206, 235, 0.94);
}

.admin-dashboard-day-card {
  position: absolute;
  left: 4px;
  right: 4px;
  border: 1px solid rgba(208, 221, 241, 0.95);
  border-left: 4px solid #2563eb;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 16px rgba(35, 63, 106, 0.09);
  padding: 0.3rem 0.35rem;
  text-align: left;
  cursor: pointer;
}

.admin-dashboard-day-card[data-tone="pending"] {
  border-left-color: #d39a3b;
}

.admin-dashboard-day-card[data-tone="cancelled"] {
  border-left-color: #dc2626;
  background: linear-gradient(180deg, #fff5f5 0%, #ffe4e6 100%);
  border-color: #fecaca;
}

.admin-dashboard-day-card[data-tone="blocked"] {
  border-left-color: #c85c5c;
  background: rgba(247, 249, 252, 0.98);
}

.admin-dashboard-day-card strong {
  display: block;
  color: #1f3c67;
  font-size: 0.62rem;
  line-height: 1.2;
}

.admin-dashboard-day-card p {
  margin: 0.12rem 0 0;
  color: #446084;
  font-size: 0.6rem;
  line-height: 1.2;
  font-weight: 700;
}

@media (max-width: 900px) {
  .admin-dashboard-day-timeline {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 0.35rem;
    max-height: min(52vh, 380px);
  }

  .admin-dashboard-day-columns {
    grid-auto-columns: minmax(150px, 1fr);
    gap: 0.35rem;
  }

  .admin-dashboard-day-column {
    border-radius: 14px;
  }

  .admin-dashboard-day-column-head {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 0.35rem;
    padding: 0.4rem 0.42rem;
  }

  .admin-dashboard-day-column-avatar {
    width: 26px;
    height: 26px;
    font-size: 0.64rem;
  }

  .admin-dashboard-day-column-head strong {
    font-size: 0.68rem;
  }

  .admin-dashboard-day-column-head small {
    font-size: 0.58rem;
  }

  .admin-dashboard-day-axis-mark span {
    font-size: 0.56rem;
  }

  .admin-dashboard-day-axis-mark.is-hour span {
    font-size: 0.58rem;
  }

  .admin-dashboard-day-card {
    left: 3px;
    right: 3px;
    border-radius: 10px;
    padding: 0.22rem 0.28rem;
  }

  .admin-dashboard-day-card strong {
    font-size: 0.56rem;
  }

  .admin-dashboard-day-card p {
    font-size: 0.55rem;
  }
}

@media (max-width: 600px) {
  .admin-dashboard-day-timeline {
    max-height: min(48vh, 320px);
  }

  .admin-dashboard-day-columns {
    grid-auto-columns: minmax(138px, 1fr);
  }
}

.admin-quick-agenda-list .admin-dashboard-day-timeline {
  max-height: min(68vh, 560px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
  .admin-quick-agenda-modal-backdrop,
  .calendar-modal-backdrop {
    place-items: start center;
    padding-top: 0.75rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }

  .admin-page[data-admin-panel-active="agenda-rapida"] .admin-panel[data-admin-panel="agenda-rapida"] {
    min-height: calc(var(--reservaai-vh, 100vh) - 170px);
    max-height: calc(var(--reservaai-vh, 100vh) - 110px);
    overflow: hidden;
  }

  .admin-page[data-admin-panel-active="agenda-rapida"] .admin-quick-agenda-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .admin-quick-agenda-list {
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-quick-agenda-list .admin-dashboard-day-timeline {
    max-height: min(62vh, 460px);
  }
}

.admin-dashboard-fullcal {
  width: 100%;
  justify-content: center;
  font-weight: 800;
}

.admin-home-next-client-card--dashboard {
  padding: 1.45rem 1.5rem;
  border: 1px solid rgba(74, 222, 128, 0.35);
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.99), rgba(236, 253, 245, 0.72));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 26px 52px rgba(22, 101, 52, 0.12),
    0 0 0 1px rgba(34, 197, 94, 0.08);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.admin-dashboard-main .admin-home-next-client-card.admin-home-next-client-card--dashboard:hover {
  transform: translateY(-2px);
  border-color: rgba(52, 211, 153, 0.45);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 32px 60px rgba(22, 101, 52, 0.16),
    0 0 0 1px rgba(16, 185, 129, 0.12);
}

.admin-dashboard-main .admin-home-next-client-card.admin-home-next-client-card--dashboard:active {
  transform: translateY(-1px);
  transition-duration: 0.14s;
}

.admin-home-next-client-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 180px);
  gap: 1rem;
  align-items: start;
}

.admin-home-next-client-dashboard-head span {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6f87a5;
}

.admin-home-next-client-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.admin-home-next-client-dashboard-head strong {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: #132a52;
}

.admin-home-next-client-card--secondary {
  margin-top: 0.7rem;
  border-color: rgba(234, 179, 8, 0.52);
  background: linear-gradient(155deg, rgba(255, 251, 235, 0.98), rgba(254, 243, 199, 0.95));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 34px rgba(180, 83, 9, 0.12),
    0 0 0 1px rgba(245, 158, 11, 0.14);
}

.admin-home-next-client-card--secondary .admin-home-next-client-metric {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(234, 179, 8, 0.24);
}

.admin-home-next-client-card--secondary .admin-home-next-client-dashboard-aside {
  border-color: rgba(234, 179, 8, 0.34);
  background: rgba(255, 251, 235, 0.8);
}

.admin-home-next-client-card--secondary .admin-home-next-client-dashboard-head span {
  color: #9a6700;
}

.admin-next-client-nav-group {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.35rem;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.42);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.95), rgba(219, 234, 254, 0.88));
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.12);
}

.admin-next-client-nav-btn {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(59, 130, 246, 0.45);
  background: #fff;
  color: #1e3a8a;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.admin-next-client-nav-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.65);
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.22);
}

.admin-next-client-reminder-btn {
  width: 100%;
  margin-top: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.admin-next-client-reminder-btn svg {
  width: 15px;
  height: 15px;
  color: #25d366;
}

.admin-next-client-reminder-btn:hover svg {
  color: #16a34a;
}

.admin-home-next-client-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}

.admin-next-client-time-sub {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6f87a5;
}

.admin-home-next-client-dashboard-aside {
  display: grid;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem;
  border-radius: 16px;
  border: 1px solid rgba(234, 238, 245, 0.95);
  background: rgba(252, 253, 255, 0.88);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.admin-next-client-aside-row {
  display: grid;
  gap: 0.12rem;
}

.admin-next-client-aside-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7a8aa8;
}

.admin-next-client-aside-value {
  font-size: 0.82rem;
  font-weight: 800;
}

.admin-next-client-aside-value.is-ok {
  color: #1f6a32;
}

.admin-next-client-aside-value.is-warn {
  color: #9a6700;
}

.admin-next-client-aside-value.is-warn::before {
  content: "⚠ ";
  font-weight: 600;
}

.admin-next-client-details-btn {
  width: 100%;
  margin-top: 0.25rem;
}

@media (max-width: 1100px) {
  .admin-dashboard-canvas {
    grid-template-columns: 1fr;
  }

  .admin-dashboard-kpi-row {
    grid-template-columns: 1fr;
  }

  .admin-home-next-client-dashboard {
    grid-template-columns: 1fr;
  }

  .admin-home-next-client-metrics-row {
    grid-template-columns: 1fr;
  }
}

.admin-hero-copy {
  min-width: 0;
}

.admin-hero h1,
.admin-panel h2 {
  margin-bottom: 0.55rem;
}

.admin-hero h1 {
  margin: 0;
  font-size: clamp(1.48rem, 1.85vw, 1.82rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-hero-now {
  display: grid;
  justify-items: end;
  gap: 0.18rem;
  padding-top: 0.12rem;
  color: #6f84a1;
}

.admin-hero-now span {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-hero-now strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: #5f7696;
}

.admin-hero-now small {
  font-size: 0.78rem;
  font-weight: 700;
  color: #7a90ad;
}

.admin-hero-text {
  max-width: 64ch;
}

.admin-token-card {
  padding: 1rem;
  border-radius: 20px;
  background: linear-gradient(140deg, rgba(12, 27, 54, 0.96), rgba(20, 44, 88, 0.94));
  color: #edf4ff;
}

.admin-token-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.admin-token-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(176, 202, 244, 0.24);
  color: #dbe9ff;
  font-size: 0.74rem;
  font-weight: 700;
}

.admin-token-caption {
  margin: 0.5rem 0 0.75rem;
  color: #cddfff;
  font-size: 0.84rem;
  line-height: 1.5;
}

.admin-token-card p {
  margin: 0.3rem 0 0.75rem;
  color: #cddfff;
}

.admin-token-card code {
  display: block;
  overflow-wrap: anywhere;
  padding: 0.85rem 0.95rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  color: #dff0ff;
  font-size: 0.8rem;
  line-height: 1.55;
}

.admin-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.admin-home-brief {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.admin-home-dashboard {
  display: grid;
  gap: 1rem;
}

.admin-home-brief-card {
  display: grid;
  gap: 0.22rem;
  padding: 0.8rem 0.88rem;
  border-radius: 18px;
  border: 1px solid rgba(204, 218, 239, 0.92);
  background: rgba(247, 250, 255, 0.94);
  box-shadow: 0 8px 18px rgba(32, 59, 114, 0.05);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

.admin-dashboard-main .admin-home-brief-card {
  border-color: rgba(234, 238, 245, 0.98);
  box-shadow: 0 3px 12px rgba(32, 59, 114, 0.035);
}

.admin-dashboard-main .admin-home-brief-card:hover {
  transform: translateY(-1px);
  border-color: rgba(214, 223, 238, 0.98);
  box-shadow: 0 10px 22px rgba(32, 59, 114, 0.06);
}

.admin-home-brief-card-primary {
  background: linear-gradient(145deg, rgba(236, 243, 255, 0.98), rgba(227, 238, 255, 0.95));
  border-color: rgba(164, 190, 233, 0.72);
  color: #264a88;
}

.admin-home-brief-card span,
.admin-quick-agenda-stat span {
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-home-brief-card strong,
.admin-quick-agenda-stat strong {
  font-size: 0.96rem;
  line-height: 1.2;
}

.admin-home-brief-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
  font-size: 0.82rem;
}

.admin-home-brief-card-primary p,
.admin-home-brief-card-primary span {
  color: #5b77a5;
}

.admin-home-brief-empty,
.admin-quick-agenda-empty {
  padding: 1rem;
  border-radius: 20px;
  border: 1px dashed rgba(191, 207, 233, 0.92);
  background: rgba(246, 249, 255, 0.9);
  color: #5d7496;
}

.admin-home-next-client {
  display: grid;
}

.admin-home-next-client-card {
  display: grid;
  gap: 1rem;
  padding: 1.28rem;
  border-radius: 26px;
  border: 1px solid rgba(132, 171, 236, 0.62);
  background: linear-gradient(145deg, rgba(252, 254, 255, 0.98), rgba(232, 242, 255, 0.96));
  box-shadow: 0 22px 44px rgba(32, 59, 114, 0.12);
}

/* Nao confirmado: manter amarelo mesmo com estilo base aplicado mais abaixo */
.admin-home-next-client-card.admin-home-next-client-card--secondary {
  border-color: rgba(234, 179, 8, 0.52);
  background: linear-gradient(155deg, rgba(255, 251, 235, 0.98), rgba(254, 243, 199, 0.95));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 34px rgba(180, 83, 9, 0.12),
    0 0 0 1px rgba(245, 158, 11, 0.14);
}

.admin-home-next-client-card.admin-home-next-client-card--secondary .admin-home-next-client-metric,
.admin-home-next-client-card.admin-home-next-client-card--secondary .admin-home-next-client-dashboard-aside {
  background: rgba(255, 255, 255, 0.88);
}

.admin-home-next-client-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.admin-home-next-client-top span {
  color: #6880a0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-home-next-client-top strong {
  display: block;
  margin-top: 0.22rem;
  font-size: 1.55rem;
  line-height: 1.15;
}

.admin-home-next-client-note {
  margin: 0.4rem 0 0;
  color: #627999;
  font-size: 0.84rem;
  font-weight: 700;
}

.admin-home-next-client-badges,
.admin-quick-agenda-copy-badges,
.admin-quick-agenda-modal-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.admin-quick-agenda-modal-summary-item {
  display: grid;
  gap: 0.18rem;
}

.admin-quick-agenda-modal-summary-item > span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-home-next-client-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.admin-home-next-client-metric {
  display: grid;
  gap: 0.2rem;
  padding: 0.95rem;
  border-radius: 18px;
  background: rgba(247, 250, 255, 0.98);
  border: 1px solid rgba(184, 206, 240, 0.92);
}

.admin-home-next-client-metric span,
.admin-quick-agenda-modal-card span {
  color: #6f87a5;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-home-next-client-metric strong,
.admin-quick-agenda-modal-card strong {
  font-size: 0.96rem;
  line-height: 1.28;
}

.admin-home-next-client-empty {
  padding: 1.1rem;
  border-radius: 22px;
  border: 1px dashed rgba(191, 207, 233, 0.92);
  background: rgba(246, 249, 255, 0.9);
  color: #5d7496;
}

.admin-operational-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.22rem 0.66rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  background: rgba(113, 129, 155, 0.12);
  color: #546a84;
}

.admin-operational-badge[data-tone="confirmado"],
.admin-operational-badge[data-tone="confirmed"],
.admin-operational-badge[data-tone="good"] {
  background: rgba(37, 99, 235, 0.16);
  color: #1e4da3;
}

.admin-operational-badge[data-tone="paid"] {
  background: rgba(16, 148, 80, 0.14);
  color: #0d5c32;
  border-color: rgba(16, 148, 80, 0.38);
}

.admin-operational-badge[data-tone="paid"]::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  margin-right: 0.28rem;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  color: #0d5c32;
}

.admin-operational-badge[data-tone="a-caminho"] {
  background: rgba(230, 180, 34, 0.22);
  color: #8a650d;
}

.admin-operational-badge[data-tone="em-atendimento"] {
  background: rgba(47, 119, 211, 0.16);
  color: #1f57a3;
}

.admin-operational-badge[data-tone="atrasado"],
.admin-operational-badge[data-tone="pending"] {
  background: rgba(245, 158, 11, 0.18);
  color: #8a5a00;
}

.admin-operational-badge[data-tone="warn"] {
  background: rgba(245, 158, 11, 0.18);
  color: #8a5a00;
}

.admin-operational-badge[data-tone="atrasado"]::before,
.admin-operational-badge[data-tone="pending"]::before,
.admin-operational-badge[data-tone="warn"]::before {
  content: "!";
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  margin-right: 0.28rem;
  border-radius: 999px;
  background: rgba(138, 90, 0, 0.16);
  color: #8a5a00;
  font-size: 0.66rem;
  line-height: 14px;
  font-weight: 700;
}

.admin-operational-badge[data-tone="cancelled"],
.admin-operational-badge[data-tone="nao-confirmado"],
.admin-operational-badge[data-tone="warn-danger"] {
  background: rgba(200, 92, 92, 0.14);
  color: #ab4444;
}

.admin-operational-badge[data-tone="no-show"] {
  box-sizing: border-box;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.admin-operational-badge[data-tone="no-show"]::before {
  content: "\2715";
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  margin-right: 0.28rem;
  border-radius: 999px;
  background: rgba(185, 28, 28, 0.12);
  color: #b91c1c;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
}

.admin-operational-badge[data-tone="atendido"] {
  background: rgba(37, 99, 235, 0.16);
  color: #1e4da3;
}

.admin-operational-badge[data-tone="completed"] {
  background: rgba(37, 99, 235, 0.16);
  color: #1e4da3;
}

.admin-operational-badge[data-tone="blocked"] {
  background: rgba(100, 116, 139, 0.14);
  color: #475569;
}

/* —— ReservaAI status badges (Stripe / Linear / Shopify) —— */
@keyframes ra-status-badge-pulse {
  0%,
  100% {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 0 0 0 rgba(13, 148, 136, 0);
  }

  50% {
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 0 0 4px rgba(13, 148, 136, 0.14);
  }
}

.ra-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background-color 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}

.ra-status-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
}

.ra-status-badge__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: currentColor;
}

.ra-status-badge__svg {
  display: block;
}

.ra-status-badge__label {
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

.ra-status-badge.is-pulse {
  animation: ra-status-badge-pulse 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ra-status-badge.is-pulse {
    animation: none;
  }

  .ra-status-badge:hover {
    transform: none;
  }
}

.ra-status-badge[data-status="confirmed"] {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #bfdbfe;
}

.ra-status-badge[data-status="completed"] {
  color: #6d28d9;
  background: #f5f3ff;
  border-color: #ddd6fe;
}

.ra-status-badge[data-status="paid"] {
  color: #047857;
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.ra-status-badge[data-status="awaiting-reply"],
.ra-status-badge[data-status="delayed"] {
  color: #c2410c;
  background: #fff7ed;
  border-color: #fed7aa;
}

.ra-status-badge[data-status="no-show"],
.ra-status-badge[data-status="cancelled"] {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
}

.ra-status-badge[data-status="in-service"] {
  color: #0f766e;
  background: #f0fdfa;
  border-color: #99f6e4;
}

.ra-status-badge[data-status="pending"] {
  color: #b45309;
  background: #fffbeb;
  border-color: #fde68a;
}

.ra-status-badge[data-status="blocked"] {
  color: #475569;
  background: #f8fafc;
  border-color: #e2e8f0;
}

.ra-status-badge[data-status="whatsapp-replied"] {
  color: #047857;
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.admin-cockpit-next-badges--premium {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.admin-operational-badge-whatsapp {
  background: rgba(71, 141, 83, 0.12);
  color: #2f7440;
}

.admin-operational-badge-checkin {
  background: rgba(52, 98, 189, 0.12);
  color: #2f5fa8;
}

.admin-quick-agenda-shell {
  display: grid;
  gap: 1rem;
}

.admin-quick-agenda-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.admin-quick-agenda-stat {
  display: grid;
  gap: 0.2rem;
  padding: 0.95rem;
  border-radius: 18px;
  border: 1px solid rgba(198, 215, 241, 0.9);
  background: rgba(245, 249, 255, 0.88);
}

.admin-quick-agenda-list {
  display: grid;
  gap: 0.75rem;
  max-height: min(74vh, 620px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 0.15rem;
}

.admin-page[data-admin-panel-active="agenda-rapida"] .admin-panel[data-admin-panel="agenda-rapida"] {
  display: flex;
  flex-direction: column;
}

.admin-page[data-admin-panel-active="agenda-rapida"] .admin-quick-agenda-shell {
  flex: 1;
  min-height: 0;
}

.admin-page[data-admin-panel-active="agenda-rapida"] .admin-quick-agenda-list {
  flex: 1;
  min-height: 0;
}

/* ==========================================================================
   Mobile Agenda Rápida (premium native-app look)
   Hidden on desktop; takes over the panel on mobile (≤900px).
   ========================================================================== */

.mobile-agenda-page {
  display: none;
}

.agenda-fab {
  display: none;
}

@media (max-width: 900px) {
  .admin-page[data-admin-panel-active="agenda-rapida"] .admin-panel[data-admin-panel="agenda-rapida"] {
    background: #f6f9fe;
    border: 0;
    box-shadow: none;
    padding: 0;
    overflow: visible;
    min-height: auto;
    max-height: none;
    -webkit-tap-highlight-color: transparent;
  }

  .admin-page[data-admin-panel-active="agenda-rapida"] .admin-panel[data-admin-panel="agenda-rapida"] > .admin-panel-head,
  .admin-page[data-admin-panel-active="agenda-rapida"] .admin-panel[data-admin-panel="agenda-rapida"] > .admin-quick-agenda-shell {
    display: none !important;
  }

  .admin-page[data-admin-panel-active="agenda-rapida"] .mobile-agenda-page {
    display: block;
    padding: 0 0 calc(120px + env(safe-area-inset-bottom, 0px));
    background: #f6f9fe;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .admin-page[data-admin-panel-active="agenda-rapida"] .agenda-fab {
    display: inline-flex;
  }

  .mobile-agenda-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 1.6rem 1.25rem 0.6rem;
    flex-wrap: wrap;
    animation: mobileAgendaFadeIn 0.32s ease both;
  }

  .mobile-agenda-header-titles {
    flex: 1 1 220px;
    min-width: 0;
  }

  .mobile-agenda-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    color: #102a56;
    letter-spacing: -0.01em;
  }

  .mobile-agenda-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.45rem 0 0;
    font-size: 0.9375rem;
    color: #64748b;
    font-weight: 500;
  }

  .mobile-agenda-subtitle-icon {
    width: 18px;
    height: 18px;
    color: #64748b;
    flex: 0 0 18px;
  }

  .mobile-agenda-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    background: #eaf8ef;
    border: 1px solid #bfe8cc;
    color: #15803d;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.15;
    max-width: 160px;
    text-align: left;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .mobile-agenda-status-pill svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  }

  .mobile-agenda-status-pill[data-tone="warn"] {
    background: #fff8eb;
    border-color: #f5d59a;
    color: #b76b09;
  }

  .mobile-agenda-status-pill[data-tone="neutral"] {
    background: #eef2f9;
    border-color: #d7e0ee;
    color: #4b5d7a;
  }

  .agenda-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.5rem 1.25rem 0.25rem;
  }

  .agenda-summary-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-height: 132px;
    padding: 1rem 0.95rem;
    background: #ffffff;
    border: 1px solid #dfe8f5;
    border-radius: 20px;
    box-shadow: 0 10px 24px rgba(15, 35, 75, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: mobileAgendaFadeIn 0.4s ease both;
  }

  .agenda-summary-card:active {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(15, 35, 75, 0.08);
  }

  .agenda-summary-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
  }

  .agenda-summary-card-icon svg {
    width: 20px;
    height: 20px;
  }

  .agenda-summary-card-icon[data-tone="blue"] {
    background: #e6efff;
    color: #2563eb;
  }

  .agenda-summary-card-icon[data-tone="purple"] {
    background: #f1ebff;
    color: #7c3aed;
  }

  .agenda-summary-card-icon[data-tone="green"] {
    background: #e6f7ec;
    color: #16a34a;
  }

  .agenda-summary-card-label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #465b7a;
  }

  .agenda-summary-card-value {
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f2a56;
    line-height: 1.05;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .agenda-summary-card-sub {
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .agenda-date-control {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 0.55rem;
    padding: 0.85rem 1.25rem 0.6rem;
    align-items: center;
  }

  .agenda-date-btn {
    height: 52px;
    border-radius: 16px;
    border: 1px solid #dfe8f5;
    background: #ffffff;
    color: #102a56;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0 0.85rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  }

  .agenda-date-btn:active {
    transform: translateY(1px);
    box-shadow: 0 8px 20px rgba(15, 35, 75, 0.08);
  }

  .agenda-date-btn svg {
    width: 18px;
    height: 18px;
    color: #102a56;
  }

  .agenda-date-btn-arrow {
    width: 52px;
    padding: 0;
  }

  .agenda-date-btn-current {
    justify-content: space-between;
    padding: 0 1rem;
  }

  .agenda-date-btn-current span {
    flex: 1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .agenda-date-btn-list {
    color: #102a56;
  }

  .agenda-timeline {
    position: relative;
    padding: 0.4rem 1.25rem 0.6rem;
  }

  .agenda-timeline::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: calc(1.25rem + 64px + 22px);
    width: 1px;
    background: #dfe8f5;
  }

  .agenda-time-row {
    position: relative;
    display: grid;
    grid-template-columns: 64px 24px minmax(0, 1fr);
    align-items: flex-start;
    gap: 0;
    margin-bottom: 0.5rem;
  }

  .agenda-time-row.is-half .agenda-time-label {
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 700;
  }

  .agenda-time-label {
    font-size: 1.05rem;
    font-weight: 800;
    color: #102a56;
    padding-top: 0.15rem;
    line-height: 1.1;
  }

  .agenda-time-dot {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
  }

  .agenda-time-dot::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #c7d6ed;
  }

  .agenda-time-row.has-event .agenda-time-dot::after {
    width: 9px;
    height: 9px;
    background: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
  }

  .agenda-event-cards {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 0;
  }

  .agenda-event-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    margin: 0;
    padding: 0.95rem 1rem 0.95rem 1.1rem;
    background: #ffffff;
    border: 1px solid #dfe8f5;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(15, 35, 75, 0.06);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
    animation: mobileAgendaFadeIn 0.4s ease both;
  }

  .agenda-event-card:active {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(15, 35, 75, 0.08);
    border-color: #c8d6ee;
  }

  .agenda-event-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    border-radius: 18px 0 0 18px;
    background: #94a3b8;
  }

  .agenda-event-card[data-tone="confirmed"]::before,
  .agenda-event-card[data-tone="completed"]::before,
  .agenda-event-card[data-tone="atendido"]::before,
  .agenda-event-card[data-tone="a-caminho"]::before {
    background: #2563eb;
  }

  .agenda-event-card[data-tone="pending"]::before,
  .agenda-event-card[data-tone="nao-confirmado"]::before,
  .agenda-event-card[data-tone="atrasado"]::before {
    background: #ef4444;
  }

  .agenda-event-card[data-tone="em-atendimento"]::before {
    background: #f59e0b;
  }

  .agenda-event-card[data-tone="completed-paid"]::before {
    background: #16a34a;
  }

  .agenda-event-card[data-tone="cancelled"]::before {
    background: #dc2626;
  }

  .agenda-event-card[data-tone="no-show"]::before {
    background: #0f172a;
  }

  .agenda-event-card[data-tone="blocked"]::before {
    background: #94a3b8;
  }

  .agenda-event-card[data-tone="cancelled"] {
    background: linear-gradient(180deg, #fff5f5 0%, #ffe4e6 100%);
    border-color: #fecaca;
  }

  .agenda-event-card[data-tone="cancelled"] .agenda-event-card-time,
  .agenda-event-card[data-tone="cancelled"] .agenda-event-card-meta {
    color: #7f1d1d;
  }

  .agenda-event-card-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .agenda-event-card-time {
    font-size: 1.02rem;
    font-weight: 800;
    color: #102a56;
    letter-spacing: -0.01em;
  }

  .agenda-event-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: #425c82;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .agenda-event-card-meta svg {
    width: 14px;
    height: 14px;
    color: #6b7e9c;
    flex: 0 0 14px;
  }

  .agenda-event-card-meta-dot {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: #94a3b8;
    display: inline-block;
    flex: 0 0 4px;
  }

  .agenda-event-card-chevron {
    color: #49658c;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .agenda-event-card-chevron svg {
    width: 18px;
    height: 18px;
  }

  .agenda-timeline-empty {
    margin: 0.6rem 0;
    padding: 1.4rem 1rem;
    background: #ffffff;
    border: 1px dashed #d8e2f1;
    border-radius: 18px;
    color: #64748b;
    font-size: 0.95rem;
    text-align: center;
  }

  .agenda-fab {
    position: fixed;
    right: 1.1rem;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    height: 64px;
    min-width: 64px;
    border: 0;
    border-radius: 999px;
    padding: 0 1.25rem 0 0.95rem;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    font-size: 0.92rem;
    line-height: 1.1;
    cursor: pointer;
    align-items: center;
    gap: 0.55rem;
    box-shadow: 0 16px 36px rgba(37, 99, 235, 0.35);
    z-index: 60;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .agenda-fab:active {
    transform: translateY(1px) scale(0.99);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.32);
  }

  .agenda-fab-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
  }

  .agenda-fab-plus svg {
    width: 22px;
    height: 22px;
    color: #ffffff;
  }

  .agenda-fab-label {
    text-align: left;
    white-space: nowrap;
  }

  @keyframes mobileAgendaFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 390px) {
  .admin-page[data-admin-panel-active="agenda-rapida"] .mobile-agenda-page {
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-agenda-title {
    font-size: 1.5rem;
  }

  .agenda-summary-grid {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .agenda-summary-card {
    flex-direction: row;
    align-items: center;
    min-height: 0;
    padding: 0.85rem 0.95rem;
  }

  .agenda-summary-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
  }

  .agenda-event-card {
    padding: 0.85rem 0.85rem 0.85rem 1rem;
  }

  .agenda-fab {
    padding: 0;
    width: 60px;
    height: 60px;
    min-width: 60px;
    justify-content: center;
  }

  .agenda-fab-label {
    display: none;
  }

  .agenda-fab-plus {
    background: transparent;
  }
}

.admin-quick-agenda-now-marker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 28px;
  margin: 0.2rem 0 0.3rem;
  padding: 0.38rem 0;
  z-index: 2;
  color: #c44444;
}

.admin-quick-agenda-now-marker::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    rgba(220, 38, 38, 0),
    rgba(220, 38, 38, 0.75) 18%,
    rgba(220, 38, 38, 0.95) 50%,
    rgba(220, 38, 38, 0.75) 82%,
    rgba(220, 38, 38, 0)
  );
  box-shadow: 0 0 18px rgba(220, 38, 38, 0.42);
}

.admin-quick-agenda-now-dot {
  position: relative;
  z-index: 1;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #dc2626;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.96),
    0 0 0 7px rgba(220, 38, 38, 0.22),
    0 0 18px rgba(220, 38, 38, 0.45);
}

.admin-quick-agenda-now-marker strong {
  position: relative;
  z-index: 1;
  margin-left: auto;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #ef4444, #dc2626);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 2px 10px rgba(220, 38, 38, 0.35),
    0 0 20px rgba(220, 38, 38, 0.2);
}

.admin-quick-agenda-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  width: 100%;
  padding: 0.95rem;
  border-radius: 20px;
  border: 1px solid rgba(198, 215, 241, 0.9);
  background: rgba(249, 252, 255, 0.94);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    opacity 0.22s ease,
    filter 0.22s ease;
}

.admin-quick-agenda-item:hover,
.admin-quick-agenda-item:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(121, 155, 214, 0.98);
  box-shadow: 0 14px 28px rgba(32, 59, 114, 0.12);
}

.admin-quick-agenda-item:active {
  transform: translateY(0);
  transition-duration: 0.12s;
}

.admin-quick-agenda-item[data-tone="confirmed"] {
  border-left: 4px solid #4ea863;
}

.admin-quick-agenda-item[data-tone="pending"] {
  border-left: 4px solid #d39a3b;
}

.admin-quick-agenda-item[data-tone="cancelled"] {
  border-left: 4px solid #dc2626;
  background: linear-gradient(180deg, #fff5f5 0%, #ffe8ea 100%);
  border-color: #fecaca;
}

.admin-quick-agenda-item[data-tone="no-show"] {
  border-left: 4px solid #0f172a;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  border-color: #cbd5e1;
}

.admin-quick-agenda-item[data-tone="em-atendimento"] {
  border-left: 4px solid #8d56d7;
}

.admin-quick-agenda-item[data-tone="atrasado"] {
  border-left: 4px solid #d4892c;
}

.admin-quick-agenda-item[data-tone="atendido"] {
  border-left: 4px solid #2563eb;
}

.admin-quick-agenda-item[data-tone="completed"] {
  border-left: 4px solid #2563eb;
}

.admin-quick-agenda-item[data-tone="blocked"] {
  border-left: 4px solid #8697ad;
}

.admin-quick-agenda-item.is-agenda-highlight {
  opacity: 1;
  filter: none;
  border-width: 2px;
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.95),
    0 0 0 3px rgba(59, 130, 246, 0.22),
    0 0 24px rgba(59, 130, 246, 0.12),
    0 16px 32px rgba(32, 59, 114, 0.12);
}

.admin-day-timeline .admin-quick-agenda-item.is-agenda-highlight {
  opacity: 1;
  filter: none;
  border-width: 2px;
  border-color: rgba(37, 99, 235, 0.55);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.99), rgba(255, 255, 255, 0.99));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.95),
    0 0 0 3px rgba(59, 130, 246, 0.22),
    0 0 24px rgba(59, 130, 246, 0.12),
    0 16px 32px rgba(32, 59, 114, 0.12);
}

.admin-day-timeline .admin-quick-agenda-item.is-agenda-highlight .admin-quick-agenda-time strong,
.admin-day-timeline .admin-quick-agenda-item.is-agenda-highlight .admin-quick-agenda-time-range {
  color: #1d4ed8;
}

.admin-day-timeline .admin-quick-agenda-item.is-agenda-highlight .admin-quick-agenda-copy strong {
  color: #0f172a;
}

.admin-quick-agenda-time {
  display: grid;
  gap: 0.12rem;
}

.admin-quick-agenda-time strong,
.admin-quick-agenda-time-range {
  font-size: 0.92rem;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: 0.01em;
}

.admin-quick-agenda-copy {
  display: grid;
  gap: 0.18rem;
}

.admin-quick-agenda-copy strong {
  font-size: 0.94rem;
}

.admin-quick-agenda-copy p,
.admin-quick-agenda-copy small {
  margin: 0;
  color: #607693;
  line-height: 1.4;
}

.admin-quick-agenda-modal-backdrop {
  position: fixed;
  top: var(--admin-topbar-stack-height, 4.25rem);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2810;
  display: grid;
  place-items: center;
  padding: 1rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(10, 22, 42, 0.44);
  backdrop-filter: blur(8px);
}

.admin-quick-agenda-modal-backdrop[hidden] {
  display: none;
}

.admin-next-payment-modal-backdrop {
  position: fixed;
  top: var(--admin-topbar-stack-height, 4.25rem);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2820;
  padding: 1rem 1.25rem 1.25rem;
  display: grid;
  place-items: start center;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.admin-next-payment-modal-backdrop[hidden] {
  display: none;
}

.admin-pos-payment-flow-backdrop {
  position: fixed;
  top: var(--admin-topbar-stack-height, 4.25rem);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2860;
  padding: 1.25rem;
  display: grid;
  place-items: center;
  align-content: center;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.admin-pos-payment-flow-backdrop[hidden] {
  display: none;
}

/* Pix gateway manual (QR + copia e cola) — acima da fila POS */
.admin-pix-gateway-modal-backdrop {
  position: fixed;
  top: var(--admin-topbar-stack-height, 4.25rem);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2890;
  padding: 1rem 1.15rem;
  padding-top: max(1rem, env(safe-area-inset-top));
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.admin-pix-gateway-modal-backdrop[hidden] {
  display: none;
}

.admin-pix-gateway-card {
  width: min(100%, 440px);
  flex-shrink: 0;
  border-radius: 20px;
  border: 1px solid rgba(208, 222, 242, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 252, 255, 0.96));
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 28px 56px -12px rgba(15, 23, 42, 0.22);
  padding: 1.35rem 1.35rem 1.25rem;
  overflow: visible;
}

/* Contraste dos botões (igual ao módulo Clientes — btn-ghost global assume fundo escuro em marketing) */
.admin-pix-gateway-card .btn.btn-ghost {
  color: #1f3e68 !important;
  border: 1px solid rgba(186, 205, 233, 0.95);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 255, 0.96));
  -webkit-text-fill-color: #1f3e68;
}

.admin-pix-gateway-card .btn.btn-ghost:hover:not(:disabled) {
  color: #16355f !important;
  border-color: rgba(120, 157, 219, 0.88);
  background: linear-gradient(180deg, rgba(245, 250, 255, 0.98), rgba(231, 241, 255, 0.96));
  -webkit-text-fill-color: #16355f;
}

.admin-pix-gateway-card .btn.btn-ghost:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
}

.admin-pix-gateway-card .btn.btn-primary,
.admin-pix-gateway-card button.btn.btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

.admin-pix-gateway-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.admin-pix-gateway-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
}

.admin-pix-gateway-sub {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.35;
}

.admin-pix-gateway-close {
  flex-shrink: 0;
  border: 0;
  background: #f1f5f9;
  color: #475569;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.admin-pix-gateway-close:hover {
  background: #e2e8f0;
}

.admin-pix-gateway-amount {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.admin-pix-gateway-panel {
  display: grid;
  gap: 0.75rem;
}

.admin-pix-gateway-panel[hidden] {
  display: none !important;
}

.admin-pix-gateway-qr-wrap {
  display: grid;
  place-items: center;
  padding: 0.85rem;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(213, 225, 243, 0.92);
  overflow: hidden;
  min-height: 0;
  aspect-ratio: 1;
  max-width: 248px;
  width: min(248px, 100%);
  margin-inline: auto;
  box-sizing: border-box;
}

.admin-pix-gateway-qr-wrap canvas {
  display: block;
  width: 220px !important;
  height: 220px !important;
  max-width: 100%;
  max-height: 100%;
}

.admin-pix-gateway-copy-label {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
}

.admin-pix-gateway-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  border-radius: 10px;
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.admin-pix-gateway-copy-btn:hover {
  background: #f8fafc;
}

.admin-pix-gateway-copy-field {
  width: 100%;
  box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.35;
  padding: 0.6rem 0.65rem;
  border-radius: 12px;
  border: 1px solid rgba(213, 225, 243, 0.92);
  background: rgba(248, 252, 255, 0.9);
  color: #0f172a;
  resize: none;
  max-height: 7.25rem;
  overflow-y: auto;
  scrollbar-gutter: stable;
  min-height: 4rem;
}

.admin-pix-gateway-status {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: #2563eb;
}

.admin-pix-gateway-countdown-wrap {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
}

.admin-pix-gateway-countdown {
  font-variant-numeric: tabular-nums;
  color: #c2410c;
}

.admin-pix-gateway-hint {
  margin: 0;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.4;
}

.admin-pix-gateway-cancel {
  width: 100%;
  margin-top: 0.35rem;
  min-height: 44px;
  font-weight: 700;
}

@media (min-width: 560px) {
  .admin-pix-gateway-cancel {
    width: auto;
    justify-self: start;
  }
}

.admin-pix-gateway-panel--success {
  text-align: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
}

.admin-pix-gateway-success-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #14532d;
}

.admin-pix-gateway-success-lead {
  margin: 0;
  font-size: 0.88rem;
  color: #166534;
}

.admin-pix-gateway-panel--error {
  text-align: center;
}

.admin-pix-gateway-error-msg {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: #b91c1c;
  line-height: 1.4;
}

.admin-pos-payment-flow-card {
  width: min(100%, 420px);
  border-radius: 18px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #ffffff;
  padding: 1.65rem 1.45rem 1.45rem;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 28px 56px -12px rgba(15, 23, 42, 0.2);
  text-align: center;
}

.admin-pos-payment-flow-state {
  display: grid;
  gap: 0.85rem;
  justify-items: center;
}

/* [hidden] perde para display: grid em alguns navegadores — um único painel por vez */
.admin-pos-payment-flow-card > .admin-pos-payment-flow-state[hidden] {
  display: none !important;
}

.admin-pos-payment-flow-anim {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto 0.25rem;
}

.admin-pos-payment-flow-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(37, 99, 235, 0.25);
  border-top-color: #2563eb;
  animation: admin-pos-flow-spin 1.1s linear infinite;
}

.admin-pos-payment-flow-ring--delay {
  inset: 10px;
  animation-duration: 1.5s;
  animation-direction: reverse;
  opacity: 0.65;
}

.admin-pos-payment-flow-terminal-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #2563eb;
}

@keyframes admin-pos-flow-spin {
  to {
    transform: rotate(360deg);
  }
}

.admin-pos-payment-flow-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.admin-pos-payment-flow-lead {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #64748b;
  font-weight: 500;
  max-width: 28ch;
}

.admin-pos-payment-flow-meta {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #2563eb;
}

.admin-pos-payment-flow-hint {
  margin: 0;
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.35;
}

.admin-pos-payment-flow-cancel {
  margin-top: 0.35rem;
  padding: 0.5rem 0.75rem;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 8px;
}

.admin-pos-payment-flow-cancel:hover {
  color: #0f172a;
}

.admin-pos-payment-flow-cancel:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.admin-pos-payment-flow-success-icon {
  margin-bottom: 0.25rem;
}

.admin-pos-payment-flow-state--error .admin-pos-payment-flow-title {
  color: #991b1b;
}

.admin-pos-payment-flow-error-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 1.5rem;
  font-weight: 900;
  display: grid;
  place-items: center;
  margin-bottom: 0.25rem;
}

.admin-pos-payment-flow-state--error .admin-pos-payment-flow-lead {
  color: #64748b;
}

.admin-pos-payment-flow-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
  margin-top: 0.35rem;
  width: 100%;
}

.admin-pos-payment-flow-error-sync,
.admin-pos-payment-flow-error-close {
  min-height: 44px;
  padding: 0 1.25rem;
  border-radius: 11px;
  flex: 1 1 9rem;
}

@media (max-width: 480px) {
  .admin-pos-payment-flow-card {
    padding: 1.35rem 1.1rem 1.2rem;
  }
}

.admin-cash-payment-modal-backdrop {
  position: fixed;
  top: var(--admin-topbar-stack-height, 4.25rem);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2840;
  padding: 1.25rem;
  display: grid;
  place-items: center;
  align-content: center;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.admin-cash-payment-modal-backdrop[hidden] {
  display: none;
}

.admin-cash-confirm-modal {
  width: min(100%, 460px);
  max-height: min(92vh, 880px);
  overflow-y: auto;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #fff;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 24px 48px -12px rgba(15, 23, 42, 0.18);
  padding: 1.35rem 1.35rem 1.15rem;
}

.admin-cash-confirm-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem 0.85rem;
  align-items: start;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
  margin-bottom: 1.15rem;
}

.admin-cash-confirm-icon-wrap {
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.admin-cash-confirm-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 100%);
  color: #047857;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.admin-cash-confirm-icon svg {
  display: block;
}

.admin-cash-confirm-head-text {
  min-width: 0;
}

.admin-cash-confirm-title {
  margin: 0;
  font-size: 1.14rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.25;
}

.admin-cash-confirm-subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;
  line-height: 1.35;
}

.admin-cash-confirm-close {
  margin: 0;
  padding: 0;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-cash-confirm-close:hover {
  background: rgba(241, 245, 249, 0.95);
  color: #0f172a;
}

.admin-cash-confirm-close:focus-visible {
  outline: 2px solid var(--admin-accent, #2563eb);
  outline-offset: 2px;
}

.admin-cash-confirm-value-card {
  text-align: center;
  padding: 1.35rem 1rem 1.45rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #ecfdf5 0%, #f0fdf4 55%, #ecfdf5 100%);
  border: 1px solid rgba(167, 243, 208, 0.65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  margin-bottom: 1rem;
}

.admin-cash-confirm-value-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #059669;
  margin-bottom: 0.45rem;
}

.admin-cash-confirm-value-amount {
  margin: 0;
  font-size: clamp(2rem, 6vw, 2.65rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #065f46;
  font-variant-numeric: tabular-nums;
}

.admin-cash-confirm-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.admin-cash-confirm-meta-cell {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.88rem 0.85rem;
  border-right: 1px solid rgba(226, 232, 240, 0.85);
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
  background: #fafbfc;
}

.admin-cash-confirm-meta-cell:nth-child(2n) {
  border-right: none;
}

.admin-cash-confirm-meta-cell-wide {
  grid-column: 1 / -1;
  border-bottom: none;
  border-right: none;
}

@media (max-width: 520px) {
  .admin-cash-confirm-meta-grid {
    grid-template-columns: 1fr;
  }

  .admin-cash-confirm-meta-cell {
    border-right: none;
  }

  .admin-cash-confirm-meta-cell:nth-child(n + 1) {
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
  }

  .admin-cash-confirm-meta-cell-wide {
    border-bottom: none;
  }
}

.admin-cash-confirm-meta-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.85);
  color: #64748b;
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.admin-cash-confirm-meta-icon svg {
  display: block;
}

.admin-cash-confirm-meta-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  margin-bottom: 0.2rem;
}

.admin-cash-confirm-meta-value {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  word-break: break-word;
}

.admin-cash-confirm-alert {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.78rem 0.85rem;
  border-radius: 11px;
  background: #fffbeb;
  border: 1px solid rgba(253, 224, 71, 0.55);
  margin-bottom: 1.1rem;
}

.admin-cash-confirm-alert-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #b45309;
}

.admin-cash-confirm-alert-icon svg {
  display: block;
}

.admin-cash-confirm-alert-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #78350f;
}

.admin-cash-confirm-alert-text strong {
  font-weight: 800;
  color: #92400e;
}

.admin-cash-confirm-footer {
  padding-top: 0.15rem;
}

.admin-cash-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: flex-end;
  align-items: center;
}

.admin-cash-confirm-btn-secondary {
  min-height: 46px;
  padding: 0 1.15rem;
  border-radius: 11px;
  font-weight: 650;
  font-size: 0.9rem;
  color: #334155;
  background: #fff;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.admin-cash-confirm-btn-secondary:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.admin-cash-confirm-btn-secondary:focus-visible {
  outline: 2px solid var(--admin-accent, #2563eb);
  outline-offset: 2px;
}

.admin-cash-confirm-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 46px;
  padding: 0 1.2rem;
  border-radius: 11px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow:
    0 1px 2px rgba(37, 99, 235, 0.12),
    0 8px 20px -6px rgba(37, 99, 235, 0.45);
}

.admin-cash-confirm-btn-primary .admin-cash-confirm-check {
  flex-shrink: 0;
  opacity: 0.98;
}

@media (max-width: 520px) {
  .admin-cash-confirm-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .admin-cash-confirm-btn-secondary,
  .admin-cash-confirm-btn-primary {
    width: 100%;
    justify-content: center;
  }
}

.admin-cash-confirm-feedback {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  line-height: 1.35;
  min-height: 0;
}

.admin-cash-confirm-feedback[data-tone='warn'] {
  color: #b45309;
  font-weight: 600;
}

.admin-cash-confirm-form[hidden],
.admin-cash-confirm-flow-state[hidden] {
  display: none !important;
}

.admin-cash-confirm-flow-state {
  display: grid;
  gap: 0.85rem;
  justify-items: center;
  text-align: center;
  padding: 0.5rem 0.25rem 0.35rem;
}

.admin-cash-confirm-modal[data-cash-flow-busy="true"] {
  overflow: hidden;
}

.admin-cash-confirm-flow-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #059669;
}

.admin-pos-payment-flow-ring--cash {
  border-color: rgba(5, 150, 105, 0.22);
  border-top-color: #059669;
}

.admin-cash-confirm-flow-elapsed {
  color: #059669;
}

.admin-cash-confirm-btn-primary:disabled,
.admin-cash-confirm-btn-secondary:disabled,
.admin-cash-confirm-close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.admin-cash-confirm-btn-primary:disabled {
  box-shadow: none;
}

.admin-ratings-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1560;
  padding: 2rem 1rem;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
}

.admin-ratings-modal-backdrop[hidden] {
  display: none;
}

.admin-next-payment-modal {
  width: min(100%, 520px);
  margin: 0 auto;
  border-radius: 18px;
  border: 1px solid rgba(226, 232, 240, 0.98);
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 24px 48px -12px rgba(15, 23, 42, 0.16);
  padding: 1.65rem 1.5rem 1.4rem;
  display: grid;
  gap: 1.35rem;
  min-height: 0;
  max-height: min(92vh, calc(var(--reservaai-vh, 100vh) - var(--admin-topbar-stack-height, 4.25rem) - 2rem));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.admin-next-payment-pending-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.65rem 1rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid #fcd34d;
  background: linear-gradient(180deg, #fffbeb 0%, #fff7ed 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.admin-next-payment-pending-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  margin-top: 0.05rem;
}

.admin-next-payment-pending-copy {
  flex: 1;
  min-width: min(100%, 12rem);
}

.admin-next-payment-pending-title {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  color: #9a3412;
  letter-spacing: 0.02em;
  margin-bottom: 0.25rem;
}

.admin-next-payment-pending-text {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  font-weight: 500;
  color: #78350f;
}

.admin-next-payment-pending-sync {
  flex-shrink: 0;
  margin-left: auto;
  align-self: center;
  min-height: 40px;
  padding: 0 1rem;
  border-radius: 11px;
  border: 1px solid #f59e0b;
  background: #ffffff;
  color: #b45309;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.admin-next-payment-pending-sync:hover:not(:disabled) {
  background: #fffbeb;
  border-color: #d97706;
}

.admin-next-payment-pending-sync:focus-visible {
  outline: 2px solid #ea580c;
  outline-offset: 2px;
}

.admin-next-payment-pending-sync:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.admin-next-payment-terminal-status {
  display: grid;
  gap: 0.3rem;
  padding: 0.72rem 0.9rem;
  border-radius: 12px;
  border: 1px solid #dbeafe;
  background: linear-gradient(180deg, #f8fbff 0%, #f1f5ff 100%);
}

.admin-next-payment-terminal-status-head {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.admin-next-payment-terminal-dot {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.admin-next-payment-terminal-dot[data-state="online"] {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
}

.admin-next-payment-terminal-dot[data-state="offline"] {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

.admin-next-payment-terminal-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: #1e293b;
}

.admin-next-payment-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.admin-next-payment-modal-head-copy {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.admin-next-payment-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2563eb;
  line-height: 1.2;
}

.admin-next-payment-kicker-icon {
  flex-shrink: 0;
  color: #2563eb;
  opacity: 0.95;
}

.admin-next-payment-modal-head strong {
  display: block;
  color: #0f172a;
  font-size: clamp(1.35rem, 3.6vw, 1.65rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin-top: 0.15rem;
}

.admin-next-payment-modal-head p {
  margin: 0;
  color: #64748b;
  font-size: 0.9rem;
  line-height: 1.45;
  font-weight: 500;
}

.admin-next-payment-modal-close {
  border: 0;
  background: rgba(248, 250, 252, 0.9);
  color: #64748b;
  font-size: 1.35rem;
  line-height: 1;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  margin-top: -0.15rem;
  margin-right: -0.15rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-next-payment-modal-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.admin-next-payment-modal-close:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.admin-next-payment-modal-actions {
  display: grid;
  gap: 0.75rem;
}

.admin-next-payment-main-step {
  display: grid;
  gap: 1.1rem;
}

/* O atributo [hidden] deve prevalecer sobre display:grid destes blocos (evita dois passos visíveis). */
#adminNextPaymentMainStep[hidden],
#adminNextPaymentPosPanel[hidden],
#adminNextPaymentPosInstallmentsPanel[hidden],
#adminNextPaymentTerminalStatus[hidden],
#adminNextPaymentSplitToggleWrap[hidden],
#adminNextPaymentSplitSection[hidden],
#adminNextPaymentSplitCompleteWrap[hidden],
#adminNextPaymentSplitAddPanel[hidden],
#adminNextPaymentSplitPixPreview[hidden],
#adminNextPaymentSplitPixQrWrap[hidden],
#adminNextPaymentSplitEmpty[hidden] {
  display: none !important;
}

/* Divisão de pagamento (split) no checkout */
.admin-next-payment-split-toggle-wrap {
  margin-top: 0.15rem;
}

.admin-next-payment-split-toggle-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.85rem 1rem;
  align-items: center;
  padding: 0.95rem 1.05rem;
  border-radius: 14px;
  border: 1.5px solid #bfdbfe;
  background: linear-gradient(165deg, #ffffff 0%, #f8fbff 55%, #ffffff 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 8px 22px rgba(37, 99, 235, 0.06);
}

.admin-next-payment-split-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
}

.admin-next-payment-split-toggle-copy strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.2rem;
}

.admin-next-payment-split-toggle-copy p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #64748b;
}

.admin-next-payment-split-toggle-switch {
  position: relative;
  display: inline-flex;
  width: 3.1rem;
  height: 1.75rem;
  flex-shrink: 0;
}

.admin-next-payment-split-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.admin-next-payment-split-toggle-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.2s ease;
  cursor: pointer;
}

.admin-next-payment-split-toggle-slider::before {
  content: '';
  position: absolute;
  width: 1.35rem;
  height: 1.35rem;
  left: 0.2rem;
  top: 0.2rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
  transition: transform 0.2s ease;
}

.admin-next-payment-split-toggle-switch input:checked + .admin-next-payment-split-toggle-slider {
  background: #2563eb;
}

.admin-next-payment-split-toggle-switch input:checked + .admin-next-payment-split-toggle-slider::before {
  transform: translateX(1.35rem);
}

.admin-next-payment-split-section {
  display: grid;
  gap: 0.9rem;
  padding: 1rem 1.05rem;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.admin-next-payment-split-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
}

.admin-next-payment-split-lead {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: #64748b;
}

.admin-next-payment-split-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.admin-next-payment-split-summary-item {
  display: grid;
  gap: 0.15rem;
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.admin-next-payment-split-summary-item span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.admin-next-payment-split-summary-item strong {
  font-size: 0.92rem;
  font-weight: 800;
  color: #0f172a;
}

.admin-next-payment-split-summary-item strong.is-paid,
#adminNextPaymentSplitPaid {
  color: #15803d;
}

#adminNextPaymentSplitRemaining[data-tone='due'] {
  color: #ea580c;
}

#adminNextPaymentSplitRemaining[data-tone='ok'] {
  color: #15803d;
}

.admin-next-payment-split-progress {
  height: 0.45rem;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.admin-next-payment-split-progress-bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
  transition: width 0.25s ease;
}

.admin-next-payment-split-progress-bar[data-complete='true'] {
  background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
}

.admin-next-payment-split-progress-hint {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
}

.admin-next-payment-split-progress-hint[data-tone='success'] {
  color: #15803d;
}

.admin-next-payment-split-empty {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 1.1rem 0.75rem;
  text-align: center;
  border-radius: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.55);
  background: #f8fafc;
}

.admin-next-payment-split-empty-icon {
  font-size: 1.35rem;
  color: #94a3b8;
}

.admin-next-payment-split-empty p {
  margin: 0;
  font-size: 0.88rem;
  color: #334155;
}

.admin-next-payment-split-empty small {
  color: #64748b;
}

.admin-next-payment-split-legs {
  display: grid;
  gap: 0.55rem;
}

.admin-next-payment-split-leg {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #fff;
}

.admin-next-payment-split-leg__icon {
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.82rem;
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
}

.admin-next-payment-split-leg__copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.admin-next-payment-split-leg__copy strong {
  font-size: 0.88rem;
  color: #0f172a;
}

.admin-next-payment-split-leg__copy span,
.admin-next-payment-split-leg__copy small {
  font-size: 0.78rem;
  color: #64748b;
}

.admin-next-payment-split-leg__status {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.admin-next-payment-split-leg__status[data-tone='success'] {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.admin-next-payment-split-leg__status[data-tone='warn'] {
  background: rgba(234, 88, 12, 0.12);
  color: #c2410c;
}

.admin-next-payment-split-leg__status[data-tone='danger'] {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}

.admin-next-payment-split-leg__remove {
  appearance: none;
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.15rem 0.35rem;
  cursor: pointer;
}

.admin-next-payment-split-methods-label {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.admin-next-payment-split-method-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.admin-next-payment-split-method-chip {
  appearance: none;
  font: inherit;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: #fff;
  color: #0f172a;
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.admin-next-payment-split-method-chip:hover {
  border-color: #93c5fd;
  background: #eff6ff;
}

.admin-next-payment-split-method-chip:active {
  transform: scale(0.98);
}

.admin-next-payment-split-add-panel {
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(37, 99, 235, 0.25);
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.admin-next-payment-split-add-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.admin-next-payment-split-add-head strong {
  font-size: 0.92rem;
  color: #0f172a;
}

.admin-next-payment-split-add-close {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  color: #64748b;
  cursor: pointer;
}

.admin-next-payment-split-add-hint {
  margin: 0;
  font-size: 0.8rem;
  color: #64748b;
}

.admin-next-payment-split-field {
  display: grid;
  gap: 0.3rem;
}

.admin-next-payment-split-field span {
  font-size: 0.75rem;
  font-weight: 700;
  color: #475569;
}

.admin-next-payment-split-field input,
.admin-next-payment-split-field select {
  width: 100%;
  font: inherit;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  background: #fff;
}

.admin-next-payment-split-fill-btn {
  appearance: none;
  font: inherit;
  border: 1px dashed rgba(37, 99, 235, 0.45);
  background: rgba(37, 99, 235, 0.06);
  color: #1d4ed8;
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.admin-next-payment-split-pix-preview {
  display: grid;
  gap: 0.5rem;
  padding: 0.65rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.admin-next-payment-split-pix-qr-wrap {
  display: flex;
  justify-content: center;
  padding: 0.55rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.admin-next-payment-split-pix-qr-wrap canvas {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
}

.admin-next-payment-split-pix-preview-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: #475569;
}

.admin-next-payment-split-pix-code {
  width: 100%;
  font: inherit;
  font-size: 0.72rem;
  line-height: 1.4;
  word-break: break-all;
  color: #0f172a;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: #fff;
  resize: vertical;
}

.admin-next-payment-split-installments-label {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #475569;
}

.admin-next-payment-split-installments-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.admin-next-payment-split-chip {
  appearance: none;
  font: inherit;
  min-width: 2.5rem;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.admin-next-payment-split-chip.is-active {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}

.admin-next-payment-split-add-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.admin-next-payment-split-add-cancel,
.admin-next-payment-split-add-confirm {
  appearance: none;
  font: inherit;
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  font-weight: 800;
  cursor: pointer;
}

.admin-next-payment-split-add-cancel {
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: #fff;
  color: #334155;
}

.admin-next-payment-split-add-confirm {
  border: 0;
  background: #2563eb;
  color: #fff;
}

.admin-next-payment-split-add-confirm.is-pix {
  background: #16a34a;
}

.admin-next-payment-split-add-confirm.is-card {
  background: #2563eb;
}

.admin-next-payment-split-add-confirm:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-next-payment-split-complete-wrap {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.admin-next-payment-split-complete-btn {
  width: 100%;
  min-height: 3rem;
  font-weight: 800;
}

.admin-next-payment-split-complete-hint {
  margin: 0;
  text-align: center;
  font-size: 0.8rem;
  color: #64748b;
}

.admin-next-payment-split-complete-hint[data-tone='success'] {
  color: #15803d;
  font-weight: 700;
}

@media (max-width: 520px) {
  .admin-next-payment-split-summary {
    grid-template-columns: 1fr;
  }
}

/* Fluxo «já pago»: sem maquininha / POS; cabeçalho e aviso alinhados ao ecrã de confirmação. */
.admin-next-payment-modal-backdrop.is-next-payment-prepaid .admin-next-payment-terminal-status {
  display: none !important;
}

.admin-next-payment-modal-backdrop.is-next-payment-prepaid .admin-next-payment-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.65rem 0.28rem 0.5rem;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.28);
  color: #15803d;
  letter-spacing: 0.06em;
}

.admin-next-payment-modal-backdrop.is-next-payment-prepaid .admin-next-payment-kicker-icon {
  display: none;
}

.admin-next-payment-kicker-prepaid-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #15803d;
}

.admin-next-payment-modal-backdrop.is-next-payment-prepaid .admin-next-payment-modal-head-copy strong {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.admin-next-payment-modal-feedback.is-next-payment-prepaid-feedback {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.45;
  color: #334155;
  white-space: pre-line;
}

.admin-next-payment-customer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, auto);
  gap: 1rem 1.25rem;
  align-items: start;
  padding: 1.1rem 1.15rem;
  border-radius: 16px;
  border: 1.5px solid #bfdbfe;
  background: linear-gradient(165deg, #f8fafc 0%, #eff6ff 48%, #f8fafc 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.admin-next-payment-quick-actions {
  display: grid;
  gap: 0.65rem;
}

.admin-next-payment-quick-actions[hidden] {
  display: none !important;
}

.admin-next-payment-quick-actions-eyebrow {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.admin-next-payment-quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

@media (min-width: 520px) {
  .admin-next-payment-quick-actions-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.admin-next-payment-quick-card {
  appearance: none;
  font: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.65rem 0.7rem;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.admin-next-payment-quick-card:hover:not(:disabled) {
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.admin-next-payment-quick-card:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-next-payment-quick-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-next-payment-quick-icon--service {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.12);
}

.admin-next-payment-quick-icon--product {
  color: #15803d;
  background: rgba(34, 197, 94, 0.12);
}

.admin-next-payment-quick-icon--tip {
  color: #7c3aed;
  background: rgba(139, 92, 246, 0.12);
}

.admin-next-payment-quick-icon--discount {
  color: #c2410c;
  background: rgba(249, 115, 22, 0.12);
}

.admin-next-payment-quick-copy strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.admin-next-payment-quick-copy small {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1.25;
}

.admin-adjust-amount-input-suffix {
  font-size: 0.9rem;
  font-weight: 800;
  color: #64748b;
  padding-right: 0.15rem;
}

.admin-next-payment-discount-feedback {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
}

.admin-next-payment-discount-feedback[data-tone='warn'] {
  color: #b91c1c;
}

.admin-next-payment-services-lead {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1.35;
}

.admin-next-payment-services-modal .admin-cockpit-products-modal-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}


.admin-next-payment-service-action {
  appearance: none;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.28rem 0.5rem;
  border-radius: 8px;
  border: 1px solid rgba(37, 99, 235, 0.35);
  background: #fff;
  color: #1d4ed8;
  cursor: pointer;
}

.admin-next-payment-service-action--primary {
  background: var(--ra-primary, #2563eb);
  border-color: var(--ra-primary, #2563eb);
  color: #fff;
}

.admin-next-payment-service-action:hover:not(:disabled) {
  filter: brightness(0.97);
}

#adminNextPaymentDiscountModalBackdrop,
#adminNextPaymentTipModalBackdrop,
#adminNextPaymentServicesModalBackdrop {
  z-index: 2940;
}

.admin-next-payment-amount-tip-badge {
  display: inline-flex;
  align-items: center;
  margin-top: 0.1rem;
  padding: 0.08rem 0.38rem;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #9a3412;
  background: rgba(249, 115, 22, 0.14);
}

.admin-next-payment-amount-tip-badge[hidden],
.admin-next-payment-checkout-breakdown[hidden] {
  display: none !important;
}

.admin-next-payment-checkout-breakdown {
  display: grid;
  gap: 0.12rem;
  margin-top: 0.2rem;
  padding: 0.32rem 0.42rem;
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.95);
  border: 1px solid rgba(226, 232, 240, 0.95);
  width: 100%;
  max-width: 11.5rem;
  margin-left: auto;
}

.admin-next-payment-checkout-breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  font-size: 0.62rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1.2;
}

.admin-next-payment-checkout-breakdown-row strong {
  font-size: 0.68rem;
  font-weight: 700;
  color: #334155;
  line-height: 1.2;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.admin-next-payment-checkout-breakdown-row--tip strong {
  color: #c2410c;
}

.admin-next-payment-tip-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.admin-next-payment-tip-preset {
  appearance: none;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  border: 1px solid rgba(249, 115, 22, 0.35);
  background: rgba(255, 247, 237, 0.95);
  color: #c2410c;
  cursor: pointer;
}

.admin-next-payment-tip-preset:hover:not(:disabled) {
  background: rgba(254, 215, 170, 0.55);
}

.admin-next-payment-tip-preset.is-active {
  background: #f97316;
  border-color: #ea580c;
  color: #fff;
}

.admin-next-payment-checkout-item--tip .admin-next-payment-checkout-item-name {
  color: #c2410c;
}

.admin-next-payment-checkout-item-remove {
  appearance: none;
  font: inherit;
  font-size: 0.64rem;
  font-weight: 700;
  padding: 0.2rem 0.45rem;
  border-radius: 8px;
  border: 1px solid rgba(248, 113, 113, 0.45);
  background: #fff;
  color: #b91c1c;
  cursor: pointer;
  white-space: nowrap;
}

.admin-next-payment-checkout-item-remove:hover:not(:disabled) {
  background: rgba(254, 226, 226, 0.65);
}

#adminCockpitProductsModalBackdrop.is-payment-checkout-stack {
  z-index: 2960;
}

.admin-next-payment-services-section {
  display: grid;
  gap: 0.45rem;
}

.admin-next-payment-services-section + .admin-next-payment-services-section {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(226, 232, 240, 0.95);
}

.admin-next-payment-services-section-title {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.admin-page .admin-cockpit-products-modal-row.admin-next-payment-services-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  cursor: default;
}

.admin-page .admin-next-payment-services-row .admin-cockpit-products-modal-row-copy strong {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
  line-height: 1.3;
}

.admin-page .admin-next-payment-services-row .admin-cockpit-products-modal-row-copy small {
  white-space: normal;
  word-break: break-word;
}

.admin-next-payment-service-action--danger {
  border-color: rgba(220, 38, 38, 0.35);
  color: #b91c1c;
}

.admin-next-payment-services-modal.inventory-editor-modal {
  width: min(720px, 100%);
}

.admin-next-payment-customer-main {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  min-width: 0;
}

.admin-next-payment-customer-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(145deg, #1d4ed8 0%, #2563eb 52%, #1e40af 100%);
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.3);
}

.admin-next-payment-customer-copy strong {
  display: block;
  color: #0f172a;
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.admin-next-payment-customer-copy p {
  margin: 0.22rem 0 0;
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}

.admin-next-payment-customer-duration {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.45rem 0 0;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
}

.admin-next-payment-duration-icon {
  flex-shrink: 0;
  color: #94a3b8;
}

.admin-next-payment-customer-amount {
  display: grid;
  justify-items: end;
  gap: 0.32rem;
  text-align: right;
  min-width: 0;
}

.admin-next-payment-customer-amount-label {
  color: #94a3b8;
  font-size: 0.65rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 800;
}

.admin-next-payment-customer-amount > .admin-next-payment-amount-row strong,
.admin-next-payment-customer-amount #adminNextPaymentAmount {
  color: #2563eb;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.admin-next-payment-detail-link {
  border: 1.5px solid #bfdbfe;
  background: #ffffff;
  color: #1d4ed8;
  border-radius: 999px;
  min-height: 38px;
  padding: 0 1rem;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  justify-self: end;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-next-payment-detail-link:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}

.admin-next-payment-detail-link:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.admin-next-payment-amount-row {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  justify-self: end;
}

.admin-next-payment-amount-edit {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1.5px solid #c7d2fe;
  background: #f5f3ff;
  color: #4338ca;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.admin-next-payment-amount-edit:hover {
  background: #eef2ff;
  border-color: #a5b4fc;
  color: #3730a3;
  transform: translateY(-1px);
}

.admin-next-payment-amount-edit:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

.admin-next-payment-amount-edit[hidden] {
  display: none;
}

.admin-next-payment-amount-edit.is-adjusted {
  background: #ecfeff;
  color: #0e7490;
  border-color: #67e8f9;
}

.admin-next-payment-amount-edit.is-adjusted:hover {
  background: #cffafe;
  border-color: #22d3ee;
  color: #0c5d6e;
}

.admin-next-payment-amount-adjusted-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: #ecfeff;
  color: #0e7490;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid #a5f3fc;
}

.admin-next-payment-amount-adjusted-badge[hidden] {
  display: none;
}

.admin-next-payment-amount-discount-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid #fed7aa;
}

.admin-next-payment-amount-discount-badge[hidden] {
  display: none;
}

.admin-next-payment-checkout-discount-note {
  margin: 0.35rem 0 0;
  width: 100%;
  color: #9a3412;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  padding: 0.45rem 0.6rem;
}

.admin-next-payment-checkout-discount-note[hidden] {
  display: none;
}

.admin-sale-details-discount-note {
  color: #9a3412;
  background: #fff7ed;
  border-color: #fed7aa;
}

.admin-sale-details-total-row strong[id='adminSaleDetailsDiscountAmount'] {
  color: #c2410c;
}

/* ===== Modal: Detalhes da venda (resumo do atendimento + override) ===== */
.admin-sale-details-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2890;
  padding: 1rem;
  backdrop-filter: blur(2px);
}

.admin-sale-details-modal-backdrop[hidden] {
  display: none;
}

.admin-sale-details-modal {
  width: min(520px, 100%);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28);
  padding: 1.35rem 1.4rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.admin-sale-details-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.admin-sale-details-modal-kicker {
  display: inline-block;
  color: #2563eb;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 0.18rem;
}

.admin-sale-details-modal-head strong {
  display: block;
  color: #0f172a;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.admin-sale-details-modal-close {
  border: none;
  background: #f1f5f9;
  color: #475569;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-sale-details-modal-close:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.admin-sale-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.admin-sale-details-cell {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.6rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.admin-sale-details-cell-label {
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-sale-details-cell strong {
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.admin-sale-details-cell-sub {
  color: #64748b;
  font-size: 0.78rem;
}

.admin-sale-details-items {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.admin-sale-details-items-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #1e293b;
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-sale-details-items-head span:last-child {
  color: #64748b;
  font-weight: 600;
  font-size: 0.76rem;
}

.admin-sale-details-items-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}

.admin-sale-details-items-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid #f1f5f9;
}

.admin-sale-details-items-list li:last-child {
  border-bottom: none;
}

.admin-sale-details-items-list li > .title {
  color: #0f172a;
  font-weight: 600;
  font-size: 0.88rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-sale-details-items-list li > .qty {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 700;
}

.admin-sale-details-items-list li > .price {
  color: #0f172a;
  font-weight: 700;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.admin-sale-details-items-empty {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  color: #64748b;
  font-size: 0.82rem;
}

.admin-sale-details-totals {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-top: 1px solid #e2e8f0;
  padding-top: 0.65rem;
}

.admin-sale-details-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  color: #475569;
  font-size: 0.88rem;
}

.admin-sale-details-total-row strong {
  color: #0f172a;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.admin-sale-details-total-row small {
  display: block;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 500;
  margin-top: 0.05rem;
}

.admin-sale-details-total-row--final {
  font-size: 0.95rem;
  color: #0f172a;
}

.admin-sale-details-total-row--final strong {
  font-size: 1.2rem;
  color: #1d4ed8;
}

.admin-sale-details-override-note {
  margin: 0.25rem 0 0;
  color: #0e7490;
  font-size: 0.8rem;
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  border-radius: 10px;
  padding: 0.45rem 0.6rem;
}

.admin-sale-details-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.25rem;
}

.admin-sale-details-actions .btn {
  min-width: 130px;
}

@media (max-width: 540px) {
  .admin-sale-details-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Modal: Alterar valor do atendimento ===== */
.admin-adjust-amount-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2900;
  padding: 1rem;
  backdrop-filter: blur(2px);
}

.admin-adjust-amount-modal-backdrop[hidden] {
  display: none;
}

.admin-adjust-amount-modal {
  width: min(440px, 100%);
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28);
  padding: 1.4rem 1.4rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

.admin-adjust-amount-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.admin-adjust-amount-modal-head strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.admin-adjust-amount-modal-sub {
  margin: 0.3rem 0 0;
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.35;
}

.admin-adjust-amount-modal-close {
  border: none;
  background: #f1f5f9;
  color: #475569;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-adjust-amount-modal-close:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.admin-adjust-amount-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.admin-adjust-amount-field {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

.admin-adjust-amount-field > label {
  color: #475569;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.admin-adjust-amount-optional {
  color: #94a3b8;
  font-weight: 500;
}

.admin-adjust-amount-field--readonly strong {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.admin-adjust-amount-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.admin-adjust-amount-input-prefix {
  position: absolute;
  left: 0.85rem;
  color: #64748b;
  font-weight: 700;
  font-size: 0.9rem;
  pointer-events: none;
}

.admin-adjust-amount-input {
  width: 100%;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.7rem 0.85rem 0.7rem 2.4rem;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-adjust-amount-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.admin-adjust-amount-select,
.admin-adjust-amount-note {
  width: 100%;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  color: #0f172a;
  background: #ffffff;
  font: inherit;
  font-size: 0.9rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-adjust-amount-note {
  resize: vertical;
  min-height: 78px;
  line-height: 1.4;
}

.admin-adjust-amount-select:focus,
.admin-adjust-amount-note:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.admin-adjust-amount-note-counter {
  align-self: flex-end;
  color: #94a3b8;
  font-size: 0.72rem;
}

.admin-adjust-amount-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  font-size: 0.8rem;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.admin-adjust-amount-banner[data-tone='warn'] {
  background: #fff7ed;
  color: #b45309;
  border-color: #fcd34d;
}

.admin-adjust-amount-banner[data-tone='info'] {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.admin-adjust-amount-banner svg {
  flex-shrink: 0;
}

.admin-adjust-amount-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.2rem;
}

.admin-adjust-amount-actions .btn {
  min-width: 120px;
}

.admin-adjust-amount-modal .btn.btn-ghost,
.admin-sale-details-modal .btn.btn-ghost {
  border-color: #cbd5e1;
  color: #1e293b;
  background: #ffffff;
  -webkit-text-fill-color: #1e293b;
}

.admin-adjust-amount-modal .btn.btn-ghost:hover:not(:disabled),
.admin-sale-details-modal .btn.btn-ghost:hover:not(:disabled) {
  border-color: #94a3b8;
  color: #0f172a;
  background: #f1f5f9;
  -webkit-text-fill-color: #0f172a;
}

.admin-next-payment-eyebrow {
  display: block;
  color: #2563eb;
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 800;
}

.admin-next-payment-lead {
  margin: 0.4rem 0 0;
  color: #64748b;
  font-size: 0.88rem;
  line-height: 1.4;
  font-weight: 500;
}

.admin-next-payment-option {
  width: 100%;
  min-height: 72px;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  padding: 0.95rem 1rem 0.95rem 0.95rem;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.85rem;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.admin-next-payment-option:hover:not(:disabled) {
  border-color: #3b82f6;
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

.admin-next-payment-option:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.admin-next-payment-option:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.admin-next-payment-option.is-recommended {
  border-color: #cbd5e1;
  background: linear-gradient(180deg, #fafcff 0%, #ffffff 100%);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1);
}

.admin-next-payment-option.is-recommended:hover:not(:disabled) {
  border-color: #3b82f6;
}

.admin-next-payment-option-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #1d4ed8;
  background: linear-gradient(160deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid rgba(191, 219, 254, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.admin-next-payment-option-icon svg {
  display: block;
}

.admin-next-payment-option-icon--pix {
  background: linear-gradient(160deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: rgba(16, 185, 129, 0.35);
  color: #059669;
}

.admin-next-payment-pix-mark {
  display: block;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.65));
}

.admin-next-payment-option-copy strong {
  display: block;
  color: #0f172a;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.admin-next-payment-option-copy small {
  display: block;
  margin-top: 0.18rem;
  color: #64748b;
  font-size: 0.84rem;
  line-height: 1.35;
  font-weight: 500;
}

.admin-next-payment-option-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0 10px;
  letter-spacing: 0.02em;
}

.admin-next-payment-option-arrow {
  color: #94a3b8;
  font-size: 1.65rem;
  font-weight: 300;
  line-height: 1;
}

.admin-next-payment-trust-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid #e0f2fe;
  background: linear-gradient(180deg, #f0f9ff 0%, #f8fafc 100%);
  margin-top: 0.15rem;
}

.admin-next-payment-trust-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.85);
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.admin-next-payment-trust-icon svg {
  display: block;
}

.admin-next-payment-trust-text {
  min-width: 0;
}

.admin-next-payment-trust-title {
  display: block;
  font-size: 0.86rem;
  font-weight: 800;
  color: #1e40af;
  line-height: 1.35;
}

.admin-next-payment-trust-sub {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: #64748b;
  line-height: 1.4;
}

.admin-next-payment-trust-banner--compact {
  margin-top: 0.75rem;
  align-items: center;
}

.admin-next-payment-trust-banner--compact .admin-next-payment-trust-sub {
  margin: 0;
  flex: 1;
}

@media (max-width: 700px) {
  .admin-next-payment-modal {
    padding: 1.35rem 1.1rem 1.2rem;
    gap: 1.1rem;
  }

  .admin-next-payment-customer {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .admin-next-payment-customer-amount {
    justify-items: start;
    text-align: left;
    width: 100%;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.45);
  }

  .admin-next-payment-detail-link {
    justify-self: start;
  }

  .admin-next-payment-option {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    min-height: 78px;
  }

  .admin-next-payment-option .admin-next-payment-option-icon {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
  }

  .admin-next-payment-option .admin-next-payment-option-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .admin-next-payment-option .admin-next-payment-option-arrow {
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: center;
  }

  .admin-next-payment-option.is-recommended .admin-next-payment-option-tag {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin-top: 0.35rem;
  }

  .admin-next-payment-option:not(.is-recommended) {
    grid-template-rows: auto;
  }

  .admin-next-payment-pos-actions .admin-next-payment-option {
    grid-template-rows: auto;
  }
}

.admin-next-payment-labels {
  display: grid;
  gap: 0;
}

.admin-next-payment-modal-feedback {
  min-height: 1.1rem;
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
}

.admin-next-payment-modal-feedback[data-tone="warn"] {
  color: #b91c1c;
}

.admin-next-payment-pos-panel {
  display: grid;
  gap: 1rem;
  margin-top: 0.15rem;
}

.admin-next-payment-pos-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.45rem 0.6rem;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: #2563eb;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease;
  width: fit-content;
}

.admin-next-payment-pos-back:hover {
  background: rgba(37, 99, 235, 0.08);
}

.admin-next-payment-pos-back:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.admin-next-payment-pos-back-row {
  display: flex;
  justify-content: center;
  margin-top: 0.15rem;
}

.admin-next-payment-pos-back-row .admin-next-payment-pos-back {
  min-height: 44px;
  padding: 0.55rem 1.15rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  color: #1e40af;
  width: 100%;
  max-width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

.admin-next-payment-pos-back-row .admin-next-payment-pos-back:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.admin-next-payment-labels--pos .admin-next-payment-lead {
  margin-top: 0.35rem;
}

.admin-next-payment-terminal-line {
  margin: 0.55rem 0 0;
  font-size: 0.88rem;
  font-weight: 800;
  color: #1d4ed8;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.admin-next-payment-terminal-prefix {
  margin-right: 0.2rem;
  font-weight: 900;
  color: #2563eb;
}

#adminNextPaymentPosTerminalHint {
  font-weight: 800;
  color: #1e40af;
}

.admin-next-payment-pos-actions {
  margin-top: 0.15rem;
}

.admin-next-payment-pos-actions .admin-next-payment-option {
  grid-template-columns: 48px minmax(0, 1fr) auto;
}

.admin-next-payment-pos-installments-panel {
  display: grid;
  gap: 1rem;
  margin-top: 0.15rem;
}

.admin-next-payment-pos-installments-actions {
  margin-top: 0.15rem;
}

.admin-next-payment-pos-installments-actions .admin-next-payment-option {
  grid-template-columns: 48px minmax(0, 1fr) auto;
}

.admin-next-payment-option-icon--installment {
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.admin-next-payment-installment-mark {
  display: block;
  line-height: 1;
}

.admin-next-payment-pos-installments-actions .admin-next-payment-option.is-active {
  border-color: #2563eb;
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.18),
    0 10px 24px rgba(37, 99, 235, 0.1);
}

.admin-next-payment-pos-installments-hint {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1.35;
}

.admin-next-payment-pos-installments-confirm {
  width: 100%;
  min-height: 46px;
  border-radius: 12px;
  font-weight: 800;
}

.admin-ratings-modal {
  width: min(95%, 1100px);
  max-height: calc(var(--reservaai-vh, 100vh) - 44px);
  overflow: auto;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  padding: 24px;
  display: grid;
  gap: 14px;
}

.admin-ratings-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.admin-ratings-modal-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.admin-ratings-modal-head strong {
  display: block;
  margin-top: 2px;
  font-size: 20px;
  font-weight: 600;
  color: #0f172a;
}

.admin-ratings-modal-head p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #64748b;
}

.admin-ratings-modal-close {
  width: 36px;
  height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f1f5f9;
  color: #334155;
  font-size: 1.1rem;
  cursor: pointer;
}

.admin-ratings-modal-close:hover {
  background: #e2e8f0;
}

.admin-ratings-modal-toolbar {
  display: flex;
  justify-content: flex-end;
}

.admin-ratings-modal-field {
  display: grid;
  gap: 0.25rem;
  min-width: min(100%, 280px);
}

.admin-ratings-modal-field span {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

.admin-ratings-modal-field select {
  appearance: none;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  padding: 0 36px 0 12px;
  background: #f8fafc;
  font-size: 14px;
  color: #0f172a;
  background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position: calc(100% - 17px) 17px, calc(100% - 12px) 17px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.admin-ratings-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 2px;
}

.admin-ratings-metric-card {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.admin-ratings-metric-card span {
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
}

.admin-ratings-metric-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-ratings-metric-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.admin-ratings-metric-icon.is-star {
  background: #dbeafe;
  color: #2563eb;
}

.admin-ratings-metric-icon.is-total {
  background: #ede9fe;
  color: #7c3aed;
}

.admin-ratings-metric-icon.is-response {
  background: #dcfce7;
  color: #16a34a;
}

.admin-ratings-metric-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-ratings-metric-card strong {
  color: #0f172a;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
}

.admin-ratings-metric-card em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.admin-ratings-table-wrap {
  margin-top: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: auto;
}

.admin-ratings-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 740px;
}

.admin-ratings-table th,
.admin-ratings-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  text-align: left;
  font-size: 13px;
  color: #1e293b;
}

.admin-ratings-table thead th {
  color: #475569;
  background: #f1f5f9;
  font-weight: 500;
}

.admin-ratings-table tbody tr:hover {
  background: #f8fafc;
}

.admin-ratings-note {
  display: inline-flex;
  min-width: 38px;
  justify-content: center;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-weight: 500;
  font-size: 13px;
}

.admin-ratings-note.is-5 {
  background: #dcfce7;
  color: #166534;
}

.admin-ratings-note.is-4 {
  background: #dbeafe;
  color: #1e40af;
}

.admin-ratings-note.is-3 {
  background: #fef9c3;
  color: #854d0e;
}

.admin-ratings-note.is-empty {
  background: #e2e8f0;
  color: #64748b;
}

.admin-ratings-empty {
  text-align: center !important;
  color: #64748b;
  font-weight: 600;
}

.admin-ratings-comment {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  vertical-align: bottom;
}

.admin-ratings-feedback {
  min-height: 16px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

.admin-kpi-detail-modal {
  width: min(95%, 920px);
}

.admin-kpi-detail-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-kpi-detail-card .admin-ratings-metric-main strong {
  font-size: 1.28rem;
}

.admin-kpi-detail-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-kpi-detail-fact {
  display: grid;
  gap: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  padding: 12px 14px;
}

.admin-kpi-detail-fact span {
  font-size: 0.76rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-kpi-detail-fact strong {
  color: #0f172a;
  font-size: 1rem;
  font-weight: 800;
}

@media (max-width: 900px) {
  .admin-ratings-modal-backdrop {
    padding: 5.4rem 0.85rem 0.85rem;
    place-items: start center;
    align-content: start;
  }

  .admin-ratings-modal {
    width: min(96%, 1100px);
    max-height: calc(var(--reservaai-vh, 100vh) - 6.4rem);
    padding: 16px;
    gap: 12px;
  }

  .admin-ratings-modal-head {
    align-items: flex-start;
  }

  .admin-ratings-metrics {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .admin-kpi-detail-facts {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .admin-ratings-modal-toolbar {
    justify-content: stretch;
  }

  .admin-ratings-modal-field {
    min-width: 100%;
  }
}

.admin-cockpit-kpi-card[data-home-action="open-ratings-modal"] {
  cursor: pointer;
}

.admin-quick-agenda-modal {
  width: min(100%, 560px);
  max-height: calc(var(--reservaai-vh, 100vh) - 32px);
  overflow: auto;
  display: grid;
  gap: 1rem;
  padding: 1.1rem;
  border-radius: 26px;
  border: 1px solid rgba(198, 215, 241, 0.95);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 28px 52px rgba(16, 30, 59, 0.24);
}

.admin-quick-agenda-modal.admin-client-detail-modal {
  width: min(100%, 920px);
  padding: 0;
  overflow: hidden;
}

.admin-client-detail-modal__mount {
  display: grid;
  gap: 0;
  max-height: calc(var(--reservaai-vh, 100vh) - 32px);
  overflow: auto;
}

.admin-client-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.2rem 0.85rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.admin-client-detail-identity {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.admin-client-detail-avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.admin-client-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-client-detail-eyebrow {
  display: block;
  color: #6f87a5;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-client-detail-name {
  margin: 0.12rem 0 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ra-text, #0f172a);
  line-height: 1.15;
}

.admin-client-detail-contact {
  margin: 0.28rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  color: var(--ra-text-soft, #64748b);
  font-size: 0.82rem;
  font-weight: 600;
}

.admin-client-detail-contact__wa::before {
  content: "·";
  margin-right: 0.35rem;
  color: #94a3b8;
}

.admin-client-detail-statuses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.85rem 1.2rem 0.25rem;
}

.admin-client-detail-status {
  display: grid;
  gap: 0.35rem;
}

.admin-client-detail-status > span {
  color: #6f87a5;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-client-detail-status .admin-operational-badge {
  justify-content: center;
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}

.admin-client-detail-feedback {
  margin: 0.35rem 1.2rem 0;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(241, 245, 249, 0.9);
  color: #475569;
}

.admin-client-detail-feedback[data-tone="warn"] {
  background: rgba(245, 158, 11, 0.14);
  color: #8a5a00;
}

.admin-client-detail-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.85rem 1.2rem 0.35rem;
}

.admin-client-detail-fact {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.7rem 0.75rem;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(248, 250, 252, 0.95);
  min-width: 0;
}

.admin-client-detail-fact__icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(239, 246, 255, 0.95);
  color: var(--ra-primary, #2563eb);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-client-detail-fact__copy {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}

.admin-client-detail-fact__label {
  color: #6f87a5;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-client-detail-fact__value {
  color: var(--ra-text, #0f172a);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
  word-break: break-word;
}

.admin-client-detail-tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.55rem 1.2rem 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
}

.admin-client-detail-tabs__btn {
  appearance: none;
  font: inherit;
  border: 0;
  background: transparent;
  color: var(--ra-text-soft, #64748b);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.55rem 0.75rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}

.admin-client-detail-tabs__btn.is-active {
  color: var(--ra-primary, #2563eb);
  border-bottom-color: var(--ra-primary, #2563eb);
}

.admin-client-detail-panel {
  padding: 1rem 1.2rem 0.35rem;
}

.admin-client-detail-notes__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.admin-client-detail-notes__head > span {
  color: #6f87a5;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-client-detail-notes__edit {
  appearance: none;
  font: inherit;
  border: 0;
  background: transparent;
  color: var(--ra-primary, #2563eb);
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  cursor: pointer;
}

.admin-client-detail-notes__edit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-client-detail-notes__box {
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 14px;
  background: #fff;
  padding: 0.85rem 0.95rem;
}

.admin-client-detail-notes__box p {
  margin: 0;
  color: var(--ra-text, #0f172a);
  font-size: 0.88rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.admin-client-detail-notes__empty {
  color: var(--ra-text-soft, #94a3b8) !important;
  font-style: italic;
}

.admin-client-detail-notes__hint {
  margin: 0.45rem 0 0;
  color: var(--ra-text-soft, #64748b);
  font-size: 0.76rem;
  font-weight: 600;
}

.admin-client-detail-notes__composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
}

.admin-client-detail-notes__field {
  display: grid;
  gap: 0.35rem;
}

.admin-client-detail-notes__field textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 1px solid rgba(203, 213, 225, 0.95);
  border-radius: 14px;
  padding: 0.75rem 0.85rem;
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ra-text, #0f172a);
  background: #fff;
  box-sizing: border-box;
}

.admin-client-detail-notes__counter {
  justify-self: end;
  color: var(--ra-text-soft, #94a3b8);
  font-size: 0.72rem;
  font-weight: 600;
}

.admin-client-detail-notes__save {
  white-space: nowrap;
  min-height: 42px;
}

.admin-client-detail-notes__cancel {
  appearance: none;
  font: inherit;
  border: 0;
  background: transparent;
  color: var(--ra-text-soft, #64748b);
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 0.55rem;
  cursor: pointer;
}

.admin-client-detail-payments__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.admin-client-detail-payments__card {
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(248, 250, 252, 0.95);
  padding: 0.85rem 0.9rem;
  min-width: 0;
}

.admin-client-detail-payments__card--highlight {
  background: rgba(239, 246, 255, 0.95);
  border-color: rgba(37, 99, 235, 0.18);
}

.admin-client-detail-payments__label {
  display: block;
  color: #6f87a5;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-client-detail-payments__total {
  display: block;
  margin-top: 0.35rem;
  color: var(--ra-text, #0f172a);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
}

.admin-client-detail-payments__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.admin-client-detail-payments__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.9);
  color: #475569;
  font-size: 0.68rem;
  font-weight: 800;
}

.admin-client-detail-payments__list {
  display: grid;
  gap: 0.45rem;
}

.admin-client-detail-payments__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
}

.admin-client-detail-payments__row--rich {
  align-items: flex-start;
  padding: 0.65rem 0;
}

.admin-client-detail-payments__row-main {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 0;
  flex: 1;
}

.admin-client-detail-payments__copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.admin-client-detail-payments__title {
  color: var(--ra-text, #0f172a);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
}

.admin-client-detail-payments__subtitle {
  color: var(--ra-text-soft, #64748b);
  font-size: 0.72rem;
  line-height: 1.35;
}

.admin-client-detail-payments__row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  flex: 0 0 auto;
}

.admin-client-detail-payments__kind {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(148, 163, 184, 0.18);
  color: #475569;
}

.admin-client-detail-payments__kind[data-tone="service"] {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}

.admin-client-detail-payments__kind[data-tone="package"] {
  background: rgba(124, 58, 237, 0.12);
  color: #6d28d9;
}

.admin-client-detail-payments__kind[data-tone="credit"] {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.admin-client-detail-payments__row:last-child {
  border-bottom: 0;
}

.admin-client-detail-payments__date {
  color: var(--ra-text-soft, #64748b);
  font-size: 0.78rem;
  font-weight: 600;
}

.admin-client-detail-payments__amount {
  color: var(--ra-text, #0f172a);
  font-size: 0.82rem;
  font-weight: 800;
}

.admin-client-detail-payments__amount--credit {
  color: #15803d;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.admin-client-detail-payments__empty {
  margin: 0;
  color: var(--ra-text-soft, #64748b);
  font-size: 0.82rem;
}

@media (max-width: 720px) {
  .admin-client-detail-payments__grid {
    grid-template-columns: 1fr;
  }
}

.admin-client-detail-haircuts {
  padding: 0.15rem 0 0.35rem;
  max-height: min(52vh, 440px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-client-detail-haircuts .clients-haircuts-list {
  gap: 0.75rem;
}

.admin-client-detail-haircuts .clients-pro-content-empty {
  padding: 1.25rem 0.5rem;
  text-align: center;
}

.admin-client-detail-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.2rem 1.1rem;
  border-top: 1px solid rgba(226, 232, 240, 0.95);
  margin-top: 0.35rem;
}

.admin-client-detail-foot__hint {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ra-text-soft, #64748b);
  font-size: 0.78rem;
  font-weight: 600;
}

.admin-client-detail-loading {
  padding: 2rem 1.2rem 2.5rem;
  text-align: center;
  color: var(--ra-text-soft, #64748b);
  font-size: 0.88rem;
  font-weight: 600;
}

.admin-client-detail-modal__mount .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .admin-client-detail-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-client-detail-statuses {
    grid-template-columns: 1fr;
  }

  .admin-client-detail-notes__composer {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .admin-quick-agenda-modal.admin-client-detail-modal {
    width: min(100%, calc(100vw - 16px));
  }

  .admin-client-detail-facts {
    grid-template-columns: 1fr;
  }

  .admin-client-detail-foot {
    flex-direction: column;
    align-items: stretch;
  }
}

.admin-quick-agenda-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.admin-quick-agenda-modal-head span {
  color: #6f87a5;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-quick-agenda-modal-head strong {
  display: block;
  margin-top: 0.18rem;
  font-size: 1.12rem;
}

.admin-quick-agenda-modal-close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 14px;
  background: rgba(237, 242, 251, 0.95);
  color: #36537c;
  font-size: 1.3rem;
  cursor: pointer;
}

.admin-quick-agenda-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.admin-quick-agenda-modal-card {
  display: grid;
  gap: 0.18rem;
  padding: 0.9rem;
  border-radius: 18px;
  border: 1px solid rgba(202, 217, 241, 0.92);
  background: rgba(246, 250, 255, 0.94);
}

.admin-quick-agenda-modal-actions {
  display: grid;
  gap: 0.9rem;
}

.admin-quick-agenda-modal-action-group {
  display: grid;
  gap: 0.45rem;
}

.admin-quick-agenda-modal-action-group > span {
  color: #6f87a5;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-quick-agenda-modal-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.admin-quick-agenda-modal-feedback {
  min-height: 20px;
  color: #617794;
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-quick-agenda-modal .btn.btn-primary {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff !important;
  border: 1px solid #1e40af;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.32);
}

.admin-quick-agenda-modal .btn.btn-primary:hover {
  background: linear-gradient(180deg, #1d4ed8 0%, #1e3a8a 100%);
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(30, 58, 138, 0.38);
}

.admin-quick-agenda-modal .btn.btn-ghost {
  border: 1px solid #cbd5e1;
  color: #0f172a;
  background: #f8fafc;
}

.admin-quick-agenda-modal .btn.btn-ghost:hover {
  border-color: #94a3b8;
  color: #0f172a;
  background: #e2e8f0;
}

.admin-quick-agenda-modal-summary .admin-operational-badge {
  border: 1px solid rgba(148, 163, 184, 0.55);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Dashboard: fundo claro — btn-ghost global usa texto claro (marketing); forçar contraste aqui */
.admin-page .admin-panel.admin-dashboard-panel .btn.btn-ghost,
.admin-page .admin-panel.admin-dashboard-panel .admin-dashboard-fullcal:not(.admin-next-client-btn--ghost-detail) {
  border: 1px solid #94a3b8 !important;
  color: #0f172a !important;
  background: #f1f5f9 !important;
  -webkit-text-fill-color: #0f172a;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    color 0.22s ease;
}

.admin-page .admin-panel.admin-dashboard-panel .btn.btn-ghost:hover,
.admin-page .admin-panel.admin-dashboard-panel .admin-dashboard-fullcal:not(.admin-next-client-btn--ghost-detail):hover {
  border-color: #64748b !important;
  color: #020617 !important;
  background: #e2e8f0 !important;
  -webkit-text-fill-color: #020617;
  transform: translateY(-1px);
}

.admin-page .admin-panel.admin-dashboard-panel .btn.btn-ghost:active,
.admin-page .admin-panel.admin-dashboard-panel .admin-dashboard-fullcal:not(.admin-next-client-btn--ghost-detail):active {
  transform: translateY(0);
  transition-duration: 0.12s;
}

.admin-page .admin-panel.admin-dashboard-panel .btn.btn-primary,
.admin-page .admin-panel.admin-dashboard-panel button.btn.btn-primary,
.admin-page .admin-home-next-client-dashboard-aside .btn.btn-primary,
.admin-page .admin-home-next-client-dashboard-aside button.btn.btn-primary,
.admin-page .admin-next-client-details-btn.btn.btn-primary {
  background-color: #2563eb !important;
  background-image: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #fff !important;
  border: 1px solid #1e40af !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.32);
  -webkit-text-fill-color: #fff;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

.admin-page .admin-panel.admin-dashboard-panel .btn.btn-primary:hover,
.admin-page .admin-panel.admin-dashboard-panel button.btn.btn-primary:hover,
.admin-page .admin-home-next-client-dashboard-aside .btn.btn-primary:hover,
.admin-page .admin-home-next-client-dashboard-aside button.btn.btn-primary:hover,
.admin-page .admin-next-client-details-btn.btn.btn-primary:hover {
  background-color: #1d4ed8 !important;
  background-image: linear-gradient(180deg, #1d4ed8 0%, #1e3a8a 100%) !important;
  color: #fff !important;
  border-color: #172554 !important;
  box-shadow: 0 12px 26px rgba(30, 58, 138, 0.38);
  -webkit-text-fill-color: #fff;
  transform: translateY(-1px);
}

.admin-page .admin-panel.admin-dashboard-panel .btn.btn-primary:active,
.admin-page .admin-panel.admin-dashboard-panel button.btn.btn-primary:active,
.admin-page .admin-home-next-client-dashboard-aside .btn.btn-primary:active,
.admin-page .admin-home-next-client-dashboard-aside button.btn.btn-primary:active,
.admin-page .admin-next-client-details-btn.btn.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(30, 58, 138, 0.28);
  transition-duration: 0.12s;
}

.admin-feature-card,
.admin-placeholder {
  padding: 1.05rem;
  border-radius: 20px;
  border: 1px solid rgba(198, 215, 241, 0.9);
  background: rgba(245, 249, 255, 0.88);
}

.admin-feature-card p,
.admin-placeholder p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.admin-inline-status {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(16, 29, 56, 0.06);
  border: 1px solid rgba(168, 188, 224, 0.7);
  color: #23406f;
  font-size: 0.78rem;
  font-weight: 700;
}

.admin-inline-status[data-tone="success"] {
  background: rgba(88, 166, 104, 0.12);
  border-color: rgba(88, 166, 104, 0.28);
  color: #28643d;
}

.admin-inline-status[data-tone="warn"] {
  background: rgba(199, 143, 57, 0.12);
  border-color: rgba(199, 143, 57, 0.24);
  color: #885617;
}

.security-admin-shell,
.audit-panel-shell {
  display: grid;
  gap: 1.25rem;
}

.security-admin-toolbar,
.audit-panel-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.2rem;
  border-radius: 22px;
  border: 1px solid rgba(213, 224, 241, 0.78);
  background: linear-gradient(135deg, rgba(252, 254, 255, 0.96), rgba(239, 245, 255, 0.9));
}

.security-admin-summary-copy,
.audit-panel-summary-copy {
  display: grid;
  gap: 0.35rem;
  max-width: 620px;
}

.security-admin-summary-copy strong,
.audit-panel-summary-copy strong {
  font-size: 1.08rem;
}

.security-admin-summary-copy span,
.audit-panel-summary-copy span {
  color: var(--muted);
  line-height: 1.5;
}

.security-admin-kpis,
.audit-panel-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem;
}

.security-admin-kpi,
.audit-panel-kpi {
  padding: 1rem 1.1rem;
  border-radius: 18px;
  border: 1px solid rgba(213, 224, 241, 0.8);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 36px rgba(29, 58, 112, 0.08);
}

.security-admin-kpi span,
.audit-panel-kpi span {
  display: block;
  color: var(--muted);
  font-size: 0.84rem;
}

.security-admin-kpi strong,
.audit-panel-kpi strong {
  display: block;
  margin-top: 0.5rem;
  font-size: 1.9rem;
}

.security-admin-kpi p,
.audit-panel-kpi p {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.security-admin-grid {
  display: grid;
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
  gap: 1rem;
}

.security-admin-card {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: 1.2rem;
  border-radius: 22px;
  border: 1px solid rgba(213, 224, 241, 0.82);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 40px rgba(31, 63, 121, 0.08);
}

.security-admin-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.security-admin-card-head span {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.security-admin-card-head strong {
  font-size: 1.02rem;
}

.security-admin-form,
.audit-panel-filters {
  display: grid;
  gap: 1rem;
}

.security-admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.security-admin-field,
.audit-panel-field {
  display: grid;
  gap: 0.35rem;
}

.security-admin-field-span-2,
.audit-panel-field-search {
  grid-column: span 2;
}

.security-admin-field span,
.audit-panel-field span {
  color: var(--muted);
  font-size: 0.84rem;
}

.security-admin-field input,
.security-admin-field select,
.audit-panel-field input,
.audit-panel-field select {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(198, 213, 238, 0.95);
  padding: 0.8rem 0.9rem;
  background: #fff;
  color: var(--text);
}

.security-admin-toolbar-actions,
.audit-panel-filter-actions,
.security-admin-form-actions,
.security-admin-inline-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

.security-admin-feedback {
  min-height: 1.25rem;
  color: var(--muted);
}

.security-admin-feedback[data-tone="warn"] {
  color: #b94b31;
}

.security-admin-feedback[data-tone="success"] {
  color: #20864c;
}

.security-admin-table-wrap,
.audit-panel-table-wrap {
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid rgba(213, 224, 241, 0.8);
}

.security-admin-table,
.audit-panel-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.96);
}

.security-admin-table th,
.security-admin-table td,
.audit-panel-table th,
.audit-panel-table td {
  padding: 0.95rem 1rem;
  border-bottom: 1px solid rgba(221, 230, 245, 0.92);
  text-align: left;
  vertical-align: top;
}

.security-admin-table th,
.audit-panel-table th {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(244, 248, 255, 0.96);
}

.security-admin-table td strong,
.audit-panel-table td strong {
  display: block;
}

.security-admin-table td span,
.audit-panel-table td span,
.security-admin-table td p {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0.25rem 0 0;
}

.security-admin-status {
  display: inline-flex;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
}

.security-admin-status.is-active {
  background: rgba(108, 208, 77, 0.16);
  color: #1f7a3d;
}

.security-admin-status.is-inactive {
  background: rgba(223, 114, 84, 0.14);
  color: #ab472b;
}

.audit-action-chip {
  display: inline-flex;
  padding: 0.36rem 0.68rem;
  border-radius: 999px;
  background: rgba(43, 79, 151, 0.12);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 700;
}

.audit-details summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 700;
}

.audit-details pre {
  margin: 0.65rem 0 0;
  padding: 0.8rem;
  border-radius: 12px;
  background: #edf3ff;
  white-space: pre-wrap;
  word-break: break-word;
  color: #1f3566;
  font-size: 0.8rem;
}

.security-admin-empty,
.audit-panel-empty {
  text-align: center;
  color: var(--muted);
}

.calendar-admin-shell {
  display: grid;
  gap: 1rem;
}

.calendar-admin-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(420px, 1.1fr);
  align-items: start;
  gap: 1rem 1.25rem;
  padding: 1.15rem 1.2rem;
  border-radius: 24px;
  border: 1px solid rgba(203, 218, 241, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 247, 255, 0.95));
  box-shadow: 0 18px 30px rgba(45, 74, 122, 0.08);
}

.calendar-admin-period {
  display: grid;
  gap: 0.34rem;
}

.calendar-admin-period strong {
  color: #22395f;
  font-size: 1.2rem;
}

.calendar-admin-period span {
  color: #617792;
  font-size: 0.9rem;
  line-height: 1.55;
}

.calendar-admin-controls {
  display: grid;
  gap: 0.9rem;
  justify-items: stretch;
  align-items: start;
  align-content: start;
  width: 100%;
  min-width: 0;
}

.calendar-admin-toolbar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem 1rem;
}

.calendar-admin-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.calendar-auto-update-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border-radius: 18px;
  border: 1px solid rgba(198, 214, 240, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 254, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  color: #29456f;
  font-size: 0.84rem;
  font-weight: 700;
}

.calendar-auto-update-toggle input {
  width: 18px;
  height: 18px;
  accent-color: #3772e6;
}

.calendar-admin-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 0.75rem;
  width: 100%;
}

.calendar-filter-field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.8rem 0.85rem 0.85rem;
  border-radius: 20px;
  border: 1px solid rgba(214, 225, 241, 0.94);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 254, 0.96));
  box-shadow: 0 10px 18px rgba(55, 80, 120, 0.05);
}

.calendar-filter-field span {
  color: #607893;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.calendar-filter-field select,
.calendar-filter-field input {
  box-sizing: border-box;
  min-height: 46px;
  width: 100%;
  padding: 0.72rem 0.9rem;
  border-radius: 16px;
  border: 1px solid rgba(192, 209, 235, 0.95);
  background: rgba(255, 255, 255, 1);
  color: #22395f;
  font: inherit;
  font-size: 0.9rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.calendar-filter-field input::placeholder {
  color: #8a9bb0;
}

.calendar-filter-field select:focus,
.calendar-filter-field input:focus,
.calendar-modal-field input:focus,
.calendar-modal-field select:focus {
  outline: none;
  border-color: rgba(69, 121, 221, 0.94);
  box-shadow: 0 0 0 4px rgba(55, 114, 230, 0.14);
}

.calendar-filter-field-phone {
  min-width: 0;
}

.calendar-admin-nav-actions,
.calendar-admin-view-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-start;
  align-items: center;
}

.calendar-admin-view-switch {
  padding: 0.35rem;
  border-radius: 999px;
  border: 1px solid rgba(196, 213, 239, 0.94);
  background: rgba(245, 249, 254, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.calendar-admin-nav-actions .btn,
.calendar-admin-view-switch .calendar-view-chip,
#adminCalendarRefresh {
  min-height: 42px;
}

#adminCalendarRefresh {
  min-width: 186px;
  min-height: 48px;
  padding-inline: 1.05rem;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.calendar-view-chip {
  min-height: 40px;
  padding: 0.58rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(188, 205, 232, 0.95);
  background: transparent;
  color: #21406f;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.calendar-view-chip:hover,
.calendar-view-chip.is-active {
  transform: translateY(-1px);
  border-color: rgba(78, 126, 214, 0.88);
  background: linear-gradient(135deg, rgba(59, 99, 183, 0.96), rgba(80, 132, 218, 0.94));
  color: #ffffff;
  box-shadow: 0 14px 24px rgba(32, 68, 132, 0.16);
}

.calendar-admin-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.calendar-metric-card {
  padding: 1rem 1.05rem;
  border-radius: 22px;
  border: 1px solid rgba(203, 218, 241, 0.95);
  background: rgba(249, 251, 254, 0.96);
  box-shadow: 0 14px 28px rgba(54, 79, 120, 0.08);
}

.calendar-metric-card span {
  display: block;
  color: #617792;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.calendar-metric-card strong {
  display: block;
  margin-top: 0.35rem;
  color: #213a63;
  font-size: 1.35rem;
}

.calendar-metric-card p {
  margin: 0.4rem 0 0;
  color: #6d8098;
  font-size: 0.85rem;
  line-height: 1.5;
}

.calendar-admin-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.calendar-admin-stage {
  min-height: 0;
  border-radius: 24px;
  border: 1px solid rgba(203, 218, 241, 0.92);
  background: rgba(248, 251, 254, 0.96);
}

.calendar-admin-support {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}

.calendar-sidebar-card {
  padding: 1rem;
  border-radius: 20px;
  border: 1px solid rgba(212, 223, 240, 0.94);
  background: rgba(255, 255, 255, 0.98);
}

.calendar-sidebar-card span,
.calendar-stage-head span {
  display: block;
  color: #6a7f9a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.calendar-sidebar-card strong,
.calendar-stage-head strong {
  display: block;
  margin-top: 0.4rem;
  color: #233a62;
}

.calendar-sidebar-card p {
  margin: 0.42rem 0 0;
  color: #697e98;
  font-size: 0.86rem;
  line-height: 1.55;
}

.calendar-sidebar-card-muted {
  background: linear-gradient(180deg, rgba(241, 246, 253, 0.98), rgba(234, 241, 249, 0.96));
}

.calendar-sidebar-list {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.85rem;
}

.calendar-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.85rem;
}

.calendar-detail-action {
  min-height: 42px;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(183, 202, 233, 0.95);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 254, 0.96));
  color: #27456f;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.16s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.calendar-detail-action:hover {
  transform: translateY(-1px);
  border-color: rgba(78, 126, 214, 0.88);
  box-shadow: 0 12px 20px rgba(32, 68, 132, 0.12);
}

.calendar-detail-action-primary {
  background: linear-gradient(135deg, rgba(33, 92, 54, 0.96), rgba(47, 136, 82, 0.94));
  border-color: rgba(40, 120, 70, 0.92);
  color: #ffffff;
}

.calendar-sidebar-item {
  padding: 0.9rem;
  border-radius: 16px;
  border: 1px solid rgba(215, 225, 240, 0.95);
  background: rgba(246, 249, 253, 0.98);
}

.calendar-sidebar-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.55rem;
}

.calendar-sidebar-item-top small {
  color: #667d97;
  font-size: 0.72rem;
  font-weight: 800;
}

.calendar-sidebar-item strong {
  display: block;
  color: #243b63;
  font-size: 0.92rem;
}

.calendar-sidebar-item span {
  display: block;
  margin-top: 0.24rem;
  color: #5f7792;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.calendar-sidebar-item p {
  margin: 0.24rem 0 0;
  color: #6e8198;
  font-size: 0.8rem;
}

.calendar-sidebar-item[data-tone="good"],
.calendar-event-card[data-tone="confirmed"],
.calendar-event-pill[data-tone="confirmed"] {
  border-color: rgba(78, 168, 99, 0.3);
}

.calendar-event-card[data-tone="completed"],
.calendar-event-pill[data-tone="completed"] {
  border-color: rgba(59, 130, 246, 0.28);
}

.calendar-sidebar-item[data-tone="warn"],
.calendar-event-card[data-tone="pending"],
.calendar-event-pill[data-tone="pending"] {
  border-color: rgba(199, 143, 57, 0.22);
}

.calendar-sidebar-item[data-tone="cancelled"],
.calendar-event-card[data-tone="cancelled"],
.calendar-event-pill[data-tone="cancelled"] {
  border-color: rgba(198, 78, 78, 0.2);
}

.calendar-sidebar-item[data-tone="blocked"],
.calendar-event-card[data-tone="blocked"],
.calendar-event-pill[data-tone="blocked"] {
  border-color: rgba(134, 151, 173, 0.35);
  background: linear-gradient(180deg, rgba(243, 246, 250, 0.98), rgba(255, 255, 255, 0.98));
}

.calendar-sidebar-item[data-tone="in-progress"],
.calendar-event-card[data-tone="in-progress"],
.calendar-event-pill[data-tone="in-progress"] {
  border-color: rgba(140, 92, 214, 0.34);
  background: linear-gradient(180deg, rgba(247, 241, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.calendar-sidebar-item[data-tone="delayed"],
.calendar-event-card[data-tone="delayed"],
.calendar-event-pill[data-tone="delayed"] {
  border-color: rgba(221, 134, 28, 0.34);
  background: linear-gradient(180deg, rgba(255, 245, 233, 0.98), rgba(255, 255, 255, 0.98));
}

.calendar-event-card[data-tone="combo-confirmed-completed"],
.calendar-mobile-event-card[data-tone="combo-confirmed-completed"] {
  border-color: rgba(59, 130, 246, 0.28) !important;
}

.calendar-event-card[data-tone="combo-confirmed-pending"],
.calendar-mobile-event-card[data-tone="combo-confirmed-pending"] {
  border-color: rgba(78, 168, 99, 0.3) !important;
}

.calendar-event-card[data-tone="combo-confirmed-no-show"],
.calendar-mobile-event-card[data-tone="combo-confirmed-no-show"] {
  border-color: rgba(15, 23, 42, 0.26) !important;
}

.calendar-event-card[data-tone="combo-confirmed-delayed"],
.calendar-mobile-event-card[data-tone="combo-confirmed-delayed"] {
  border-color: rgba(221, 134, 28, 0.34) !important;
  background: linear-gradient(180deg, rgba(255, 245, 233, 0.98), rgba(255, 255, 255, 0.98)) !important;
}

.calendar-event-card[data-tone="combo-confirmed-in-progress"],
.calendar-mobile-event-card[data-tone="combo-confirmed-in-progress"] {
  border-color: rgba(140, 92, 214, 0.34) !important;
  background: linear-gradient(180deg, rgba(247, 241, 255, 0.98), rgba(255, 255, 255, 0.98)) !important;
}

.calendar-event-card[data-tone="combo-cancelled"],
.calendar-mobile-event-card[data-tone="combo-cancelled"] {
  border-color: rgba(198, 78, 78, 0.2) !important;
}

.calendar-sidebar-empty,
.calendar-slot-empty {
  padding: 0.8rem 0.9rem;
  border-radius: 14px;
  background: rgba(241, 245, 250, 0.96);
  color: #73859b;
  font-size: 0.82rem;
  line-height: 1.5;
}

.calendar-admin-stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  /* Altura “cheia” aplicada só com data-calendar-shell-ready (calendar-admin.js) após o 1º render — evita cartão vazio gigante durante o fetch. */
  min-height: 0;
  max-height: none;
  position: relative;
}

#adminCalendarRoot[data-calendar-shell-ready="true"] > .calendar-admin-body > .calendar-admin-stage {
  min-height: calc(var(--reservaai-vh, 100vh) - 230px);
}

.calendar-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid rgba(208, 220, 239, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 254, 0.96));
}

.calendar-stage-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.9rem 1rem;
}

.calendar-stage-nav-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
}

.calendar-stage-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem;
  border-radius: 999px;
  border: 1px solid rgba(199, 214, 238, 0.92);
  background: rgba(243, 248, 254, 0.94);
}

.calendar-stage-nav-button {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(188, 205, 232, 0.95);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  color: #24406a;
  font: inherit;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.calendar-stage-nav-button:focus-visible,
.calendar-detail-action:focus-visible,
.calendar-modal-close:focus-visible,
.calendar-month-more:focus-visible,
.calendar-view-chip:focus-visible,
#adminCalendarRefresh:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(55, 114, 230, 0.16);
}

.calendar-stage-nav-button:hover {
  transform: translateY(-1px);
  border-color: rgba(78, 126, 214, 0.88);
  background: rgba(244, 248, 254, 0.98);
  box-shadow: 0 12px 20px rgba(32, 68, 132, 0.12);
}

.calendar-stage-nav-button-today {
  width: auto;
  min-width: 74px;
  padding: 0 0.95rem;
  font-size: 0.86rem;
}

.calendar-stage-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.calendar-stage-legend span,
.calendar-stage-legend-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #5b7591;
  font-size: 0.8rem;
  font-weight: 700;
}

.calendar-stage-legend-filter {
  margin: 0;
  padding: 0.18rem 0.42rem;
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  border-radius: 999px;
  opacity: 0.42;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.calendar-stage-legend-filter.is-active {
  opacity: 1;
  background: rgba(91, 117, 145, 0.1);
}

.calendar-stage-legend-filter:focus-visible {
  outline: 2px solid rgba(66, 133, 244, 0.55);
  outline-offset: 2px;
}

.calendar-stage-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.calendar-stage-legend i[data-tone="confirmed"] {
  background: #4ea863;
}

.calendar-stage-legend i[data-tone="pending"] {
  background: #d39a3b;
}

.calendar-stage-legend i[data-tone="cancelled"] {
  background: #c85c5c;
}

.calendar-stage-legend i[data-tone="blocked"] {
  background: #8697ad;
}

.calendar-admin-canvas {
  min-height: 0;
  overflow: auto;
  position: relative;
  padding: 0;
  max-height: calc(100vh - 300px);
  background: linear-gradient(180deg, rgba(249, 251, 254, 0.98), rgba(240, 245, 251, 0.96));
}

.calendar-admin-canvas[data-calendar-view="day"],
.calendar-admin-canvas[data-calendar-view="week"] {
  overflow: auto;
}

.calendar-time-shell {
  min-width: 100%;
  width: max-content;
  box-sizing: border-box;
}

.calendar-time-header {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  position: sticky;
  top: 0;
  z-index: 4;
  background: rgba(248, 251, 254, 0.98);
  border-bottom: 1px solid rgba(213, 223, 239, 0.92);
}

.calendar-time-corner {
  border-right: 1px solid rgba(213, 223, 239, 0.92);
  background: linear-gradient(180deg, rgba(248, 251, 254, 0.98), rgba(243, 248, 254, 0.96));
}

.calendar-time-days {
  display: grid;
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
}

.calendar-time-day-head {
  min-height: 78px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.2rem;
  border-right: 1px solid rgba(221, 229, 241, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 249, 254, 0.96));
}

.calendar-time-day-head span {
  color: #6a7d95;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.calendar-time-day-head strong {
  margin: 0;
  color: #243c64;
  font-size: 1.35rem;
}

.calendar-time-day-head small {
  color: #7a8ca3;
  font-size: 0.72rem;
  font-weight: 700;
}

.calendar-time-day-head.is-today strong {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #3772e6;
  color: #ffffff;
}

.calendar-time-body {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
}

.calendar-time-axis {
  position: relative;
  border-right: 1px solid rgba(213, 223, 239, 0.92);
  background: linear-gradient(180deg, rgba(249, 251, 254, 0.98), rgba(243, 248, 254, 0.96));
}

.calendar-time-axis-label {
  position: absolute;
  right: 12px;
  color: #74859a;
  font-size: 0.74rem;
  font-weight: 700;
}

.calendar-time-columns {
  display: grid;
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
}

.calendar-time-end-spacer {
  width: 32px;
  min-width: 32px;
}

.calendar-time-column {
  position: relative;
  border-right: 1px solid rgba(223, 231, 242, 0.92);
  cursor: crosshair;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 253, 0.98));
}

.calendar-time-slot {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid rgba(228, 234, 243, 0.96);
}

.calendar-time-slot.is-even {
  background: rgba(249, 251, 254, 0.78);
}

.calendar-time-event {
  position: absolute;
  display: grid;
  align-content: start;
  gap: 0.16rem;
  padding: 0.7rem 0.72rem;
  border-radius: 16px;
  border: 1px solid rgba(206, 218, 238, 0.98);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 18px rgba(50, 77, 119, 0.08);
  overflow: hidden;
  z-index: 2;
  cursor: pointer;
}

.calendar-time-event .calendar-time-event-mobile-summary {
  display: grid;
  align-content: start;
  gap: 0.1rem;
}

.calendar-time-event .calendar-time-event-mobile-meta {
  display: flex;
  align-items: center;
  gap: 0.34rem;
  margin-top: 0;
  color: #70859f;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
}

.calendar-time-event .calendar-time-event-mobile-title {
  margin: 0;
  color: #24406a;
  font-size: 0.84rem;
  line-height: 1.12;
}

.calendar-time-event .calendar-time-event-mobile-service {
  margin: 0.04rem 0 0;
  color: #36537c;
  font-size: 0.73rem;
  font-weight: 700;
  line-height: 1.1;
}

.calendar-time-event .calendar-time-event-mobile-owner,
.calendar-time-event .calendar-time-event-desktop-footer {
  margin-top: 0.04rem;
  color: #6e839d;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.08;
}

.calendar-time-event .calendar-time-event-status-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  color: #60758e;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.calendar-time-event .calendar-time-event-status-inline::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.calendar-time-event .calendar-time-event-status-inline[data-tone="confirmed"] {
  color: #2f8a47;
}

.calendar-time-event .calendar-time-event-status-inline[data-tone="completed"] {
  color: #2563eb;
}

.calendar-time-event .calendar-time-event-status-inline[data-tone="pending"] {
  color: #b57a1f;
}

.calendar-time-event .calendar-time-event-status-inline[data-tone="cancelled"] {
  color: #c45454;
}

.calendar-time-event .calendar-time-event-status-inline[data-tone="blocked"] {
  color: #72849b;
}

.calendar-time-event .calendar-time-event-status-inline[data-tone="in-progress"] {
  color: #7a3dc4;
}

.calendar-time-event .calendar-time-event-status-inline[data-tone="delayed"] {
  color: #c67017;
}

.calendar-time-event .calendar-time-event-status-inline[data-tone="combo-confirmed-completed"] {
  color: #2563eb;
}

.calendar-time-event .calendar-time-event-status-inline[data-tone="combo-confirmed-pending"] {
  color: #2f8a47;
}

.calendar-time-event .calendar-time-event-status-inline[data-tone="combo-confirmed-no-show"] {
  color: #0f172a;
}

.calendar-time-event .calendar-time-event-status-inline[data-tone="combo-confirmed-delayed"] {
  color: #c67017;
}

.calendar-time-event .calendar-time-event-status-inline[data-tone="combo-confirmed-in-progress"] {
  color: #7a3dc4;
}

.calendar-time-event .calendar-time-event-status-inline[data-tone="combo-cancelled"] {
  color: #c45454;
}

.calendar-time-event-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin-bottom: 0.18rem;
}

.calendar-time-event.calendar-time-event-compact {
  padding: 0.48rem 0.52rem;
  gap: 0.08rem;
}

.calendar-time-event.calendar-time-event-compact .calendar-time-event-top {
  margin-bottom: 0.08rem;
}

.calendar-time-event.calendar-time-event-medium {
  padding: 0.5rem 0.56rem;
  gap: 0.1rem;
}

.calendar-time-event.calendar-time-event-compact .calendar-time-event-mobile-meta,
.calendar-time-event.calendar-time-event-compact .calendar-time-event-mobile-service,
.calendar-time-event.calendar-time-event-compact .calendar-time-event-mobile-owner,
.calendar-time-event.calendar-time-event-compact .calendar-time-event-desktop-footer,
.calendar-time-event.calendar-time-event-medium .calendar-time-event-mobile-meta,
.calendar-time-event.calendar-time-event-medium .calendar-time-event-mobile-service,
.calendar-time-event.calendar-time-event-medium .calendar-time-event-mobile-owner,
.calendar-time-event.calendar-time-event-medium .calendar-time-event-desktop-footer {
  font-size: 0.64rem;
}

.calendar-time-event-top small {
  color: #5f7792;
  font-size: 0.72rem;
  font-weight: 800;
}

.calendar-time-event.calendar-time-event-medium .calendar-status-badge,
.calendar-time-event.calendar-time-event-compact .calendar-status-badge {
  min-height: 22px;
  padding: 0.08rem 0.48rem;
  font-size: 0.64rem;
  letter-spacing: 0.03em;
}

.calendar-selection-preview {
  position: absolute;
  left: 4px;
  right: 4px;
  border-radius: 16px;
  border: 1px dashed rgba(55, 114, 230, 0.75);
  background: linear-gradient(180deg, rgba(55, 114, 230, 0.18), rgba(55, 114, 230, 0.08));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  z-index: 3;
  pointer-events: none;
}

.calendar-selection-preview span {
  position: absolute;
  top: 8px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(24, 58, 116, 0.9);
  color: #f5f9ff;
  font-size: 0.72rem;
  font-weight: 700;
}

.calendar-event-pill {
  cursor: pointer;
}

.calendar-detail-list {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.8rem;
}

.calendar-detail-highlight {
  display: grid;
  gap: 0.4rem;
  padding: 0.95rem;
  border-radius: 18px;
  border: 1px solid rgba(203, 218, 241, 0.95);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 255, 0.96));
}

.calendar-detail-highlight-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.calendar-detail-highlight-row strong {
  color: #223d67;
  font-size: 0.94rem;
}

.calendar-detail-highlight p {
  margin: 0;
  color: #5f7792;
  font-size: 0.84rem;
  line-height: 1.5;
}

.calendar-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.16rem 0.68rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.calendar-status-badge[data-tone="confirmed"] {
  background: rgba(78, 168, 99, 0.16);
  color: #2f8a47;
}

.calendar-status-badge[data-tone="completed"] {
  background: rgba(37, 99, 235, 0.16);
  color: #1e4da3;
}

.calendar-status-badge[data-tone="pending"] {
  background: rgba(211, 154, 59, 0.16);
  color: #8f5d14;
}

.calendar-status-badge[data-tone="cancelled"] {
  background: rgba(200, 92, 92, 0.14);
  color: #a63f3f;
}

.calendar-status-badge[data-tone="blocked"] {
  background: rgba(113, 129, 155, 0.16);
  color: #536981;
}

.calendar-status-badge[data-tone="in-progress"] {
  background: rgba(156, 115, 218, 0.18);
  color: #6e35b6;
}

.calendar-status-badge[data-tone="delayed"] {
  background: rgba(211, 154, 59, 0.18);
  color: #9a5b12;
}

.calendar-detail-item {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0.8rem;
  border-radius: 14px;
  background: rgba(242, 247, 253, 0.96);
  border: 1px solid rgba(217, 227, 241, 0.92);
}

.calendar-detail-item span {
  color: #71849b;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.calendar-detail-item strong {
  margin: 0;
  color: #27426c;
  font-size: 0.84rem;
  line-height: 1.4;
}

.calendar-event-popover {
  position: absolute;
  width: min(320px, calc(100vw - 32px));
  padding: 0.85rem 0.9rem;
  border-radius: 18px;
  border: 1px solid rgba(195, 212, 237, 0.98);
  background: rgba(10, 24, 49, 0.97);
  color: #eff5ff;
  box-shadow: 0 18px 38px rgba(12, 24, 48, 0.28);
  z-index: 60;
  pointer-events: none;
}

.calendar-event-popover::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 14px;
  height: 14px;
  background: rgba(10, 24, 49, 0.97);
  border-right: 1px solid rgba(195, 212, 237, 0.28);
  border-bottom: 1px solid rgba(195, 212, 237, 0.28);
  transform: translateX(-50%) rotate(45deg);
}

.calendar-event-popover strong,
.calendar-event-popover span,
.calendar-event-popover p,
.calendar-event-popover small {
  display: block;
}

.calendar-event-popover strong {
  font-size: 0.86rem;
}

.calendar-event-popover span {
  margin-top: 0.22rem;
  color: #b7cbeb;
  font-size: 0.76rem;
  font-weight: 700;
}

.calendar-event-popover-list {
  display: grid;
  gap: 0.38rem;
  margin-top: 0.45rem;
}

.calendar-event-popover-item {
  display: grid;
  gap: 0.12rem;
}

.calendar-event-popover p {
  margin: 0;
  color: #e8f0fb;
  font-size: 0.78rem;
}

.calendar-event-popover small {
  margin-top: 0;
  color: #bfd0ea;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.calendar-time-event strong,
.calendar-time-event span,
.calendar-time-event p,
.calendar-time-event small {
  display: block;
}

.calendar-time-event strong {
  color: #24406a;
  font-size: 0.82rem;
  line-height: 1.35;
}

.calendar-time-event.calendar-time-event-medium strong {
  font-size: 0.78rem;
  line-height: 1.22;
}

.calendar-time-event.calendar-time-event-compact strong {
  font-size: 0.76rem;
  line-height: 1.22;
}

.calendar-time-event span {
  margin-top: 0.08rem;
  color: #577294;
  font-size: 0.74rem;
  font-weight: 700;
}

.calendar-time-event.calendar-time-event-compact span,
.calendar-time-event.calendar-time-event-compact p,
.calendar-time-event.calendar-time-event-compact small {
  font-size: 0.68rem;
  line-height: 1.18;
}

.calendar-time-event p {
  margin: 0.16rem 0 0;
  color: #6d8097;
  font-size: 0.74rem;
  line-height: 1.35;
}

.calendar-time-event.calendar-time-event-medium span,
.calendar-time-event.calendar-time-event-medium p,
.calendar-time-event.calendar-time-event-medium small {
  font-size: 0.69rem;
  line-height: 1.2;
}

.calendar-time-event small {
  margin-top: 0.14rem;
  color: #7c8fa6;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
}

.calendar-time-event-meta {
  display: grid;
  gap: 0.24rem;
  margin-top: 0.32rem;
}

.calendar-time-event-line {
  display: grid;
  gap: 0.04rem;
}

.calendar-time-event-label {
  margin: 0;
  color: #7b8ea4;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.calendar-time-event-line strong {
  margin: 0;
  color: #29456f;
  font-size: 0.76rem;
  line-height: 1.25;
}

.calendar-time-event[data-tone="confirmed"] {
  border-left: 4px solid #4ea863;
  background: linear-gradient(180deg, rgba(242, 251, 244, 0.98), rgba(255, 255, 255, 0.98));
}

.calendar-time-event[data-tone="completed"] {
  border-left: 4px solid #2563eb;
  background: linear-gradient(180deg, rgba(232, 242, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.calendar-time-event[data-tone="pending"] {
  border-left: 4px solid #d39a3b;
  background: linear-gradient(180deg, rgba(255, 249, 238, 0.98), rgba(255, 255, 255, 0.98));
}

.calendar-time-event[data-tone="cancelled"] {
  border-left: 4px solid #c85c5c;
  background: linear-gradient(180deg, rgba(255, 243, 243, 0.98), rgba(255, 255, 255, 0.98));
}

.calendar-time-event[data-tone="blocked"] {
  border-left: 4px solid #8697ad;
  background: linear-gradient(180deg, rgba(243, 246, 250, 0.98), rgba(255, 255, 255, 0.98));
}

.calendar-time-event[data-tone="in-progress"] {
  border-left: 4px solid #8d56d7;
  background: linear-gradient(180deg, rgba(247, 241, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.calendar-time-event[data-tone="delayed"] {
  border-left: 4px solid #d4892c;
  background: linear-gradient(180deg, rgba(255, 249, 238, 0.98), rgba(255, 255, 255, 0.98));
}

/* Combined status line tones (Agendamento + Atendimento) */
.calendar-time-event[data-tone="combo-confirmed-completed"],
.calendar-event-pill[data-tone="combo-confirmed-completed"] {
  border-left: 4px solid #2563eb !important;
  border-color: rgba(59, 130, 246, 0.28) !important;
}

.calendar-time-event[data-tone="combo-confirmed-pending"],
.calendar-event-pill[data-tone="combo-confirmed-pending"] {
  border-left: 4px solid #4ea863 !important;
  border-color: rgba(78, 168, 99, 0.3) !important;
}

.calendar-time-event[data-tone="combo-confirmed-no-show"],
.calendar-event-pill[data-tone="combo-confirmed-no-show"] {
  border-left: 4px solid #0f172a !important;
  border-color: rgba(15, 23, 42, 0.26) !important;
}

.calendar-time-event[data-tone="combo-confirmed-delayed"],
.calendar-event-pill[data-tone="combo-confirmed-delayed"] {
  border-left: 4px solid #d4892c !important;
  border-color: rgba(221, 134, 28, 0.34) !important;
}

.calendar-time-event[data-tone="combo-confirmed-in-progress"],
.calendar-event-pill[data-tone="combo-confirmed-in-progress"] {
  border-left: 4px solid #8d56d7 !important;
  border-color: rgba(140, 92, 214, 0.34) !important;
}

.calendar-time-event[data-tone="combo-cancelled"],
.calendar-event-pill[data-tone="combo-cancelled"] {
  border-left: 4px solid #c85c5c !important;
  border-color: rgba(198, 78, 78, 0.2) !important;
}

.calendar-time-event.is-selected,
.calendar-event-pill.is-selected {
  box-shadow: 0 0 0 2px rgba(55, 114, 230, 0.32), 0 18px 28px rgba(40, 72, 129, 0.14);
  transform: scale(1.01);
}

.calendar-now-indicator {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px solid rgba(219, 72, 72, 0.95);
  z-index: 2;
  pointer-events: none;
}

.calendar-now-indicator span {
  position: absolute;
  left: -6px;
  top: -7px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #db4848;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9);
}

.calendar-now-indicator small {
  position: absolute;
  top: -14px;
  left: calc(-72px + 6px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  min-width: 64px;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(219, 72, 72, 0.96);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 18px rgba(168, 43, 43, 0.18);
}

.calendar-current-focus-window {
  position: absolute;
  left: 6px;
  right: 6px;
  border-radius: 22px;
  border: 1px solid rgba(55, 114, 230, 0.2);
  background: linear-gradient(180deg, rgba(55, 114, 230, 0.12), rgba(55, 114, 230, 0.04));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  pointer-events: none;
  z-index: 0;
}

.calendar-current-focus-window::before,
.calendar-current-focus-window::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  border-top: 1px dashed rgba(55, 114, 230, 0.32);
}

.calendar-current-focus-window::before {
  top: 10px;
}

.calendar-current-focus-window::after {
  bottom: 10px;
}

.calendar-time-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 92px;
  text-align: center;
  color: #8ca0b7;
  font-size: 0.78rem;
  font-weight: 700;
}

.calendar-day-view,
.calendar-week-view {
  display: block;
}

.calendar-mobile-agenda {
  display: grid;
  gap: 0.85rem;
  padding: 0.8rem;
}

.calendar-mobile-day-section {
  display: grid;
  gap: 0.72rem;
  padding: 0.9rem;
  border-radius: 20px;
  border: 1px solid rgba(210, 222, 241, 0.96);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 20px rgba(55, 80, 120, 0.08);
}

.calendar-mobile-day-section.is-today {
  border-color: rgba(75, 121, 218, 0.82);
  box-shadow: 0 14px 24px rgba(49, 92, 175, 0.14);
}

.calendar-mobile-day-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.calendar-mobile-day-header span {
  display: block;
  color: #6a7f9a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.calendar-mobile-day-header strong {
  display: block;
  margin-top: 0.3rem;
  color: #223b64;
  font-size: 1rem;
}

.calendar-mobile-day-header small {
  color: #607893;
  font-size: 0.76rem;
  font-weight: 800;
  text-align: right;
}

.calendar-mobile-day-body {
  display: grid;
  gap: 0.6rem;
}

.calendar-mobile-event-card {
  border-radius: 18px;
}

.calendar-mobile-event-card header {
  align-items: center;
}

.calendar-mobile-event-card.is-compact p {
  margin-top: 0.2rem;
}

.calendar-mobile-event-card.is-compact small {
  display: none;
}

.calendar-mobile-empty {
  padding: 0.85rem 0.9rem;
  border-radius: 16px;
  border: 1px dashed rgba(200, 214, 235, 0.95);
  background: linear-gradient(180deg, rgba(245, 249, 254, 0.96), rgba(240, 245, 251, 0.94));
  color: #6f829a;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}

.calendar-mobile-resource-day {
  --resource-topbar-height: 64px;
  --resource-week-strip-height: 62px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: 100%;
  min-height: 100%;
  padding: 0.55rem 0.55rem 0.6rem;
  background: linear-gradient(180deg, rgba(247, 250, 255, 0.98), rgba(238, 245, 253, 0.98));
}

@media (max-width: 768px) {
  .calendar-mobile-resource-day {
    padding-bottom: 8.6rem;
  }
}

@media (max-width: 440px) {
  .calendar-resource-new-appt-label {
    display: none;
  }

  .calendar-resource-new-appt-btn {
    min-width: 42px;
    padding: 0.32rem 0.4rem;
  }

  .calendar-resource-new-appt-icon {
    width: 30px;
    height: 30px;
  }
}

.calendar-mobile-resource-topbar {
  position: sticky;
  top: 0;
  z-index: 14;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: var(--resource-topbar-height);
  padding: 0.55rem 0.45rem;
  border-radius: 16px;
  border: 1px solid rgba(198, 214, 240, 0.9);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
}

.calendar-mobile-resource-chrome-edge {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #1f3c67;
}

.calendar-mobile-resource-chrome-edge svg {
  display: block;
}

.calendar-mobile-resource-day-picker-chev {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.28rem;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.72;
  transform: translateY(1px);
}

.calendar-mobile-resource-title-wrap {
  display: grid;
  gap: 0.18rem;
}

.calendar-mobile-resource-day-picker {
  border: 0;
  background: transparent;
  color: #183864;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  text-align: left;
  padding: 0;
}

.calendar-mobile-resource-title-wrap small {
  color: #637a96;
  font-size: 0.74rem;
  font-weight: 700;
}

.calendar-mobile-resource-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
}

.calendar-resource-bulk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0.26rem 0.72rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(55, 114, 230, 0.22);
}

.calendar-resource-new-appt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.32rem 0.82rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #3772e6, #2958c5);
  color: #ffffff;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 8px 22px rgba(55, 114, 230, 0.3);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.calendar-resource-new-appt-btn:hover {
  box-shadow: 0 10px 26px rgba(55, 114, 230, 0.34);
}

.calendar-resource-new-appt-btn:active {
  transform: translateY(1px);
  box-shadow: 0 6px 16px rgba(55, 114, 230, 0.28);
}

.calendar-resource-new-appt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.calendar-resource-new-appt-icon svg {
  display: block;
}

.calendar-resource-new-appt-label {
  padding-right: 0.06rem;
  line-height: 1.1;
}

.calendar-mobile-icon-btn {
  min-width: 40px;
  min-height: 34px;
  border: 1px solid rgba(188, 205, 232, 0.95);
  border-radius: 12px;
  background: #fff;
  color: #355482;
  font: inherit;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 0 0.4rem;
}

.calendar-mobile-icon-btn span {
  margin-left: 0.18rem;
  color: #2c6e44;
}

.calendar-mobile-week-strip {
  position: sticky;
  top: var(--resource-topbar-height);
  z-index: 13;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(58px, 1fr);
  gap: 0.35rem;
  overflow-x: auto;
  padding: 0.25rem 0.05rem 0.25rem 0;
}

.calendar-mobile-week-day {
  border: 1px solid rgba(196, 213, 239, 0.95);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.95);
  color: #4b6488;
  min-height: var(--resource-week-strip-height);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.16rem;
  font: inherit;
}

.calendar-mobile-week-day span {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.calendar-mobile-week-day strong {
  font-size: 0.9rem;
  color: #1f3e69;
}

.calendar-mobile-week-day.is-selected {
  background: linear-gradient(160deg, rgba(43, 79, 151, 0.96), rgba(52, 101, 186, 0.95));
  border-color: rgba(28, 64, 134, 0.95);
  color: #ecf4ff;
}

.calendar-mobile-week-day.is-selected strong {
  color: #ffffff;
}

.calendar-mobile-resource-grid {
  display: block;
}

.calendar-mobile-time-axis {
  flex: 0 0 var(--calendar-resource-axis-w, 54px);
  width: var(--calendar-resource-axis-w, 54px);
  min-width: var(--calendar-resource-axis-w, 54px);
  position: relative;
  align-self: flex-start;
  z-index: 1;
  border-radius: 14px;
  border: 1px solid rgba(209, 221, 241, 0.95);
  background: rgba(248, 251, 255, 0.98);
  overflow: hidden;
  box-sizing: border-box;
}

.calendar-mobile-time-mark {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.2rem;
  border-top: 1px solid rgba(227, 234, 245, 0.92);
}

.calendar-mobile-time-mark span {
  color: #7a8da8;
  font-size: 0.62rem;
  font-weight: 700;
}

.calendar-mobile-time-mark.is-hour span {
  color: #24416b;
  font-size: 0.66rem;
  font-weight: 800;
}

.calendar-mobile-resource-now-axis-badge {
  position: absolute;
  left: 50%;
  z-index: 26;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.calendar-mobile-resource-now-axis-badge span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 0.14rem 0.42rem;
  border-radius: 999px;
  border: 1px solid rgba(219, 72, 72, 0.35);
  background: rgba(255, 255, 255, 0.98);
  color: #c03636;
  font-size: 0.62rem;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(90, 30, 30, 0.08);
}

.calendar-mobile-resource-now-line {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 0;
  border-top: 2px solid rgba(239, 68, 68, 0.92);
  pointer-events: none;
  z-index: 2;
  transform: translateY(-1px);
  box-shadow:
    0 0 10px rgba(239, 68, 68, 0.35),
    0 0 22px rgba(239, 68, 68, 0.12);
}

.calendar-mobile-resource-now-line-dot {
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 999px;
  background: #ef4444;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.98),
    0 0 10px rgba(239, 68, 68, 0.65);
}

.calendar-mobile-resource-agenda-scroll {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

.calendar-mobile-resource-agenda {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.calendar-mobile-resource-agenda-sheet {
  --calendar-resource-axis-w: 54px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

.calendar-mobile-resource-agenda-header,
.calendar-mobile-resource-agenda-body {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.45rem;
  min-width: 0;
}

.calendar-mobile-resource-agenda-header {
  position: sticky;
  top: 0;
  z-index: 60;
  overflow: visible;
  background: rgba(247, 250, 255, 0.98);
  padding-bottom: 0.35rem;
}

.calendar-mobile-resource-axis-spacer {
  flex: 0 0 var(--calendar-resource-axis-w);
  width: var(--calendar-resource-axis-w);
  min-width: var(--calendar-resource-axis-w);
  border: 1px solid rgba(209, 221, 241, 0.95);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.98);
  min-height: 52px;
  box-sizing: border-box;
}

/* Scroll horizontal só na área dos profissionais; eixo de horários fica à esquerda com largura reservada (sem overlay). */
.calendar-mobile-resource-hscroll {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline-end: 32px;
}

.calendar-mobile-resource-hscroll::before,
.calendar-mobile-resource-hscroll::after {
  display: none;
}

/* Cabeçalho sem overflow que recorte o menu (<details>); alinhamento horizontal via translateX na linha (calendar-admin.js). */
.calendar-mobile-resource-agenda-header .calendar-mobile-resource-hscroll {
  overflow: visible;
  scroll-padding-inline-end: 0;
}

.calendar-mobile-resource-agenda-body {
  position: relative;
  z-index: 1;
  flex: 1;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.calendar-mobile-operators-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(170px, 1fr);
  gap: 0.5rem;
  width: max-content;
  min-width: max(100%, max-content);
}

/* Uma coluna única (ex.: operador só vê a própria agenda): usa largura total do cartão sem faixa branca à direita. */
.calendar-mobile-operators-row-head:has(> .calendar-mobile-operator-head:only-child),
.calendar-mobile-operators-row-body:has(> .calendar-mobile-operator-column:only-child) {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  grid-auto-columns: minmax(0, 1fr);
}

.calendar-mobile-operator-column {
  border-radius: 16px;
  border: 1px solid rgba(203, 218, 241, 0.95);
  background: rgba(255, 255, 255, 0.98);
  overflow: visible;
}

.calendar-mobile-operator-column.is-off {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(236, 242, 251, 0.94),
    rgba(236, 242, 251, 0.94) 8px,
    rgba(246, 250, 255, 0.96) 8px,
    rgba(246, 250, 255, 0.96) 16px
  );
}

.calendar-mobile-operator-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem;
  border-bottom: 1px solid rgba(211, 223, 241, 0.92);
  background: rgba(255, 255, 255, 0.95);
  overflow: visible;
}

.calendar-mobile-operator-copy {
  min-width: 0;
  overflow: visible;
}

.calendar-mobile-operators-row-head {
  position: relative;
  z-index: 2;
  overflow: visible;
}

.calendar-mobile-operator-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  overflow: visible;
}

.calendar-mobile-operator-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #2b4f97, #3d67b5);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  overflow: hidden;
}

.calendar-mobile-operator-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.calendar-mobile-operator-head strong {
  display: block;
  color: #203b65;
  font-size: 0.78rem;
}

.calendar-mobile-operator-head small {
  display: block;
  margin-top: 0.06rem;
  color: #6f849f;
  font-size: 0.62rem;
  font-weight: 700;
}

.calendar-mobile-operator-menu {
  position: relative;
  z-index: 2;
}

.calendar-mobile-operator-menu[open] {
  z-index: 220;
}

.calendar-mobile-operator-menu-toggle {
  list-style: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid rgba(201, 214, 236, 0.95);
  background: #fff;
  color: #375781;
  cursor: pointer;
  user-select: none;
  font-size: 0.88rem;
  line-height: 1;
}

.calendar-mobile-operator-menu-toggle::-webkit-details-marker {
  display: none;
}

.calendar-mobile-operator-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 221;
  min-width: 185px;
  padding: 0.35rem;
  border-radius: 12px;
  border: 1px solid rgba(192, 209, 235, 0.96);
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 12px 24px rgba(23, 48, 90, 0.18);
  display: grid;
  gap: 0.2rem;
}

.calendar-mobile-operator-menu-panel button {
  border: 0;
  background: transparent;
  text-align: left;
  color: #1f3c67;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  border-radius: 8px;
  padding: 0.42rem 0.5rem;
  cursor: pointer;
}

.calendar-mobile-operator-menu-panel button:hover {
  background: rgba(229, 238, 252, 0.95);
}

/* Flutuante via JS (position: fixed) — escapa overflow da grade. */
.calendar-mobile-operator-menu-panel[data-menu-floating="true"] {
  position: fixed !important;
  z-index: 10050 !important;
  margin: 0;
}

.calendar-mobile-operator-body {
  position: relative;
  padding-top: 2px;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}

/* Arrastar compromisso na agenda recurso desktop (dia/semana, ≥768px). */
body.calendar-desktop-resource-dnd-active {
  user-select: none;
  cursor: grabbing;
}

[data-calendar-layout="desktop"] .calendar-mobile-resource-day:not(.calendar-agenda-mobile) .calendar-mobile-appointment[data-calendar-event-id] {
  cursor: grab;
  touch-action: none;
}

.calendar-mobile-appointment.is-desktop-appointment-drag-source {
  pointer-events: none;
}

/* Tablet/toque: segurar ~1s no card antes de arrastar. */
.calendar-mobile-appointment.is-desktop-appointment-hold-pending {
  z-index: 5;
}

.calendar-mobile-appointment.is-desktop-appointment-hold-pending::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.5);
  animation: cal-desktop-hold-to-drag-ring 1s linear forwards;
}

@keyframes cal-desktop-hold-to-drag-ring {
  0% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
    box-shadow: inset 0 0 0 3px rgba(37, 99, 235, 0.98);
  }
}

.calendar-mobile-appointment.is-desktop-appointment-hold-armed {
  z-index: 6;
  animation: cal-desktop-hold-armed-pop 0.38s ease-out;
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.92),
    0 10px 24px rgba(37, 99, 235, 0.28),
    0 8px 16px rgba(36, 63, 106, 0.14);
}

@keyframes cal-desktop-hold-armed-pop {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

.calendar-desktop-hold-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  max-width: calc(100% - 8px);
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(29, 78, 216, 0.94);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(29, 78, 216, 0.38);
  animation: cal-desktop-hold-hint-pulse 0.65s ease-in-out infinite;
}

.calendar-mobile-appointment.is-desktop-appointment-hold-armed .calendar-desktop-hold-hint {
  background: rgba(22, 163, 74, 0.96);
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.38);
  animation: none;
}

@keyframes cal-desktop-hold-hint-pulse {
  0%,
  100% {
    opacity: 0.88;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

#adminCalendarSyncStatus.is-calendar-hold-ready-pulse {
  animation: cal-sync-hold-ready-pulse 0.52s ease-out;
}

@keyframes cal-sync-hold-ready-pulse {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.04);
    color: #16a34a;
  }

  100% {
    transform: scale(1);
  }
}

.calendar-desktop-resource-drag-clone {
  border-radius: 14px;
  opacity: 0.94;
  box-shadow: 0 14px 36px rgba(35, 72, 132, 0.26);
}

.calendar-mobile-operator-body .calendar-desktop-agenda-drop-indicator {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.15), rgba(37, 99, 235, 0.95), rgba(37, 99, 235, 0.15));
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.88);
  pointer-events: none;
  z-index: 60;
}

.calendar-mobile-operator-body .calendar-desktop-agenda-drop-indicator.is-touch-start-anchor {
  height: 2px;
  background: rgba(22, 163, 74, 0.95);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.92),
    0 0 12px rgba(22, 163, 74, 0.45);
}

.calendar-mobile-slot-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid rgba(225, 233, 244, 0.94);
}

.calendar-mobile-slot-line.is-major {
  border-top-color: rgba(179, 199, 230, 0.94);
}

.calendar-mobile-selection-preview {
  position: absolute;
  left: 4px;
  right: 4px;
  border-radius: 12px;
  border: 1px dashed rgba(55, 114, 230, 0.82);
  background: linear-gradient(180deg, rgba(55, 114, 230, 0.2), rgba(55, 114, 230, 0.1));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  z-index: 4;
  pointer-events: none;
}

.calendar-mobile-selection-preview span {
  position: absolute;
  top: 6px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: rgba(22, 55, 111, 0.94);
  color: #f6f9ff;
  font-size: 0.62rem;
  font-weight: 700;
}

.calendar-mobile-appointment {
  position: absolute;
  left: 4px;
  right: 4px;
  z-index: 2;
  border-radius: 12px;
  border: 1px solid rgba(205, 220, 239, 0.95);
  border-left: 4px solid #2563eb;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 16px rgba(36, 63, 106, 0.1);
  padding: 5px 7px 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
}

.calendar-mobile-appointment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
  flex-shrink: 0;
}

.calendar-mobile-appointment-time {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1f3c67;
  font-size: 0.61rem;
  line-height: 1.18;
  font-weight: 700;
}

.calendar-mobile-appointment-status-trail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-width: 0;
}

.calendar-encaixe-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  max-width: 100%;
  font-size: 9px;
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 1px 6px 1px 4px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid rgba(180, 83, 9, 0.32);
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 55%, #fde68a 100%);
  color: #78350f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.calendar-encaixe-badge-icon {
  flex-shrink: 0;
  display: block;
}

.calendar-encaixe-badge-text {
  line-height: 1.2;
}

.calendar-encaixe-badge--compact {
  font-size: 8px;
  padding: 0 5px 0 3px;
  gap: 2px;
}

.calendar-encaixe-badge--compact .calendar-encaixe-badge-icon {
  width: 10px;
  height: 10px;
}

.calendar-time-event[data-calendar-overlap="true"] {
  border-color: rgba(217, 119, 6, 0.38);
}

.calendar-mobile-appointment[data-calendar-overlap="true"] {
  border-color: rgba(245, 158, 11, 0.4);
  border-left-color: #d97706;
}

.calendar-mobile-appointment-paid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.2);
  color: #15803d;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.22);
}

.calendar-mobile-appointment-paid-symbol {
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  transform: translateY(-0.5px);
}

.calendar-mobile-appointment-status {
  flex-shrink: 0;
  font-size: 9px;
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: 0.012em;
  padding: 1px 5px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.calendar-mobile-appointment-status[data-badge-tone="confirmed"] {
  background: #dcfce7;
  border-color: rgba(34, 197, 94, 0.32);
  color: #15803d;
}

.calendar-mobile-appointment-status[data-badge-tone="completed"] {
  background: #dbeafe;
  border-color: rgba(37, 99, 235, 0.28);
  color: #1d4ed8;
}

.calendar-mobile-appointment-status[data-badge-tone="cancelled"] {
  background: #fee2e2;
  border-color: rgba(220, 38, 38, 0.28);
  color: #b91c1c;
}

.calendar-mobile-appointment-status[data-badge-tone="no-show"] {
  background: #fee2e2;
  border-color: rgba(220, 38, 38, 0.28);
  color: #b91c1c;
}

.calendar-mobile-appointment-status[data-badge-tone="pending"] {
  background: #fef3c7;
  border-color: rgba(217, 119, 6, 0.3);
  color: #b45309;
}

.calendar-mobile-appointment-status[data-badge-tone="delayed"] {
  background: #ffedd5;
  border-color: rgba(234, 88, 12, 0.32);
  color: #c2410c;
}

.calendar-mobile-appointment-status[data-badge-tone="in-progress"] {
  background: #ede9fe;
  border-color: rgba(109, 40, 217, 0.28);
  color: #6d28d9;
}

.calendar-mobile-appointment-status[data-badge-tone="blocked"] {
  background: #f1f5f9;
  border-color: rgba(100, 116, 139, 0.35);
  color: #475569;
}

.calendar-mobile-appointment[data-tone="pending"] {
  border-left-color: #d39a3b;
}

.calendar-mobile-appointment[data-tone="completed"] {
  border-left-color: #2563eb;
}

.calendar-mobile-appointment[data-tone="cancelled"] {
  border-left-color: #c85c5c;
  background: rgba(246, 248, 252, 0.98);
}

.calendar-mobile-appointment[data-tone="blocked"],
.calendar-mobile-appointment.is-block {
  border-left-color: #8697ad;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(236, 241, 249, 0.94),
    rgba(236, 241, 249, 0.94) 8px,
    rgba(247, 250, 254, 0.98) 8px,
    rgba(247, 250, 254, 0.98) 16px
  );
}

.calendar-mobile-appointment[data-tone="in-progress"] {
  border-left-color: #c7d2e4;
  background: rgba(255, 255, 255, 0.99);
}

.calendar-mobile-appointment[data-tone="combo-confirmed-completed"] {
  border-left-color: #2563eb;
}

.calendar-mobile-appointment[data-tone="combo-confirmed-pending"] {
  border-left-color: #4ea863;
}

/* No-show: card preto/neutro (`data-tone` vem de `combinedStatusLineTone`); badge vermelho acima */
.calendar-mobile-appointment[data-tone="combo-confirmed-no-show"],
.calendar-mobile-appointment[data-calendar-attendance-no-show="true"] {
  border-left-color: #0f172a;
  border-color: rgba(15, 23, 42, 0.2);
  background: rgba(255, 255, 255, 0.99);
}

.calendar-mobile-appointment[data-tone="combo-confirmed-no-show"] .calendar-mobile-appointment-time,
.calendar-mobile-appointment[data-tone="combo-confirmed-no-show"] .calendar-mobile-appointment-client,
.calendar-mobile-appointment[data-tone="combo-confirmed-no-show"] .calendar-mobile-appointment-service,
.calendar-mobile-appointment[data-calendar-attendance-no-show="true"] .calendar-mobile-appointment-time,
.calendar-mobile-appointment[data-calendar-attendance-no-show="true"] .calendar-mobile-appointment-client,
.calendar-mobile-appointment[data-calendar-attendance-no-show="true"] .calendar-mobile-appointment-service {
  color: #0f172a;
}

.calendar-mobile-appointment[data-tone="combo-confirmed-delayed"] {
  border-left-color: #d4892c;
  border-color: rgba(221, 134, 28, 0.34);
  background: linear-gradient(180deg, rgba(255, 245, 233, 0.98), rgba(255, 255, 255, 0.98));
}

.calendar-mobile-appointment[data-tone="combo-confirmed-delayed"] .calendar-mobile-appointment-time {
  color: #c2410c;
  font-weight: 700;
}

.calendar-mobile-appointment[data-tone="combo-confirmed-in-progress"] {
  border-left-color: #8d56d7;
}

.calendar-mobile-appointment[data-tone="combo-cancelled"] {
  border-left-color: #c85c5c;
  background: rgba(246, 248, 252, 0.98);
}

/* overflow:hidden em filho flex com shrink padrão 1 faz a altura ir a 0; manter-shrink 0 + min-height p/ linha única legível */
.calendar-mobile-appointment-client {
  display: block;
  flex-shrink: 0;
  align-self: stretch;
  min-width: 0;
  min-height: 1em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #0f2947;
  font-size: 0.63rem;
  line-height: 1.2;
  font-weight: 800;
}

.calendar-mobile-appointment.is-compact-slot .calendar-mobile-appointment-client {
  font-size: 0.6rem;
}

.calendar-mobile-appointment-service {
  flex-shrink: 0;
  align-self: stretch;
  min-width: 0;
  min-height: 1em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #5c7393;
  font-size: 0.57rem;
  line-height: 1.18;
  font-weight: 600;
}

.calendar-mobile-indicators {
  margin-top: auto;
  padding-top: 1px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.18rem;
  flex-shrink: 0;
}

.calendar-mobile-indicators:empty {
  display: none;
  margin: 0;
  padding: 0;
}

.calendar-mobile-appointment.is-compact-slot .calendar-mobile-indicators:not(:empty) {
  margin-top: 4px;
  padding-top: 0;
}

.calendar-mobile-indicator {
  min-height: 16px;
  padding: 0 0.28rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}

.calendar-mobile-indicator.is-paid {
  color: #1d6a3c;
  background: rgba(108, 208, 77, 0.14);
  border-color: rgba(108, 208, 77, 0.35);
}

.calendar-mobile-indicator.is-favorite {
  color: #8b4f1e;
  background: rgba(255, 206, 120, 0.2);
  border-color: rgba(222, 160, 73, 0.42);
}

.calendar-mobile-operator-empty,
.calendar-mobile-empty-state {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #7c8ea7;
  font-size: 0.7rem;
  font-weight: 700;
  width: calc(100% - 0.8rem);
}

.calendar-mobile-floating-actions {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  pointer-events: none;
}

#adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-floating-actions {
  display: block;
}

#adminCalendarRoot[data-calendar-layout="desktop"] .calendar-mobile-floating-actions {
  display: none !important;
}

.calendar-mobile-fab {
  pointer-events: auto;
  position: absolute;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 14px 30px rgba(22, 44, 88, 0.24);
  font: inherit;
  font-weight: 800;
}

.calendar-mobile-fab-left {
  left: 0.7rem;
  bottom: 0;
  width: 52px;
  height: 52px;
  background: #fff;
  color: #32527d;
  font-size: 0.62rem;
}

.calendar-mobile-fab-center {
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  min-width: 86px;
  height: 44px;
  padding: 0 1rem;
  background: rgba(255, 255, 255, 0.98);
  color: #23406a;
  font-size: 0.72rem;
}

.calendar-mobile-fab-right {
  right: 0.75rem;
  bottom: 0;
  width: 58px;
  height: 58px;
  background: linear-gradient(145deg, #2b4f97, #3b67b9);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
}

.calendar-mobile-fab-plus {
  display: block;
  font-size: 1.85rem;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-1px);
}

#adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-fab-right {
  background: #12151c;
  color: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.calendar-mobile-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0.4rem 0.5rem calc(0.42rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(190, 209, 238, 0.92);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
}

.calendar-mobile-bottom-item {
  border: 0;
  background: transparent;
  color: #607896;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  min-height: 42px;
  border-radius: 10px;
}

.calendar-mobile-bottom-item.is-active {
  background: rgba(43, 79, 151, 0.14);
  color: #1f4384;
}

.calendar-mobile-resource-week {
  padding-bottom: 1rem;
}

.calendar-mobile-week-stack {
  display: grid;
  gap: 0.75rem;
}

.calendar-mobile-week-day-section {
  border: 1px solid rgba(206, 220, 241, 0.94);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  padding: 0.48rem;
}

.calendar-mobile-week-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.2rem 0.2rem 0.45rem;
}

.calendar-mobile-week-day-head strong {
  color: #203d68;
  font-size: 0.82rem;
}

.calendar-mobile-week-day-head small {
  color: #6d829e;
  font-size: 0.7rem;
  font-weight: 700;
}

@media (min-width: 769px) {
  .calendar-mobile-resource-day {
    --resource-topbar-height: 78px;
    --resource-week-strip-height: 64px;
    gap: 0.75rem;
    padding: 0.9rem 0.95rem 0.9rem;
  }

  .calendar-mobile-resource-topbar {
    top: 0;
    padding: 0.8rem 0.9rem;
  }

  .calendar-mobile-resource-day-picker {
    font-size: 1.14rem;
  }

  .calendar-mobile-resource-title-wrap small {
    font-size: 0.8rem;
  }

  .calendar-mobile-week-strip {
    top: var(--resource-topbar-height);
    grid-auto-columns: minmax(88px, 1fr);
    gap: 0.55rem;
  }

  .calendar-mobile-week-day {
    min-height: 62px;
  }

  .calendar-mobile-week-day span {
    font-size: 0.68rem;
  }

  .calendar-mobile-week-day strong {
    font-size: 1rem;
  }

  .calendar-mobile-resource-agenda-sheet {
    --calendar-resource-axis-w: 74px;
  }

  .calendar-mobile-resource-agenda-header,
  .calendar-mobile-resource-agenda-body {
    gap: 0.65rem;
  }

  .calendar-mobile-resource-agenda-header { top: 0; }

  .calendar-mobile-time-mark span {
    font-size: 0.72rem;
  }

  .calendar-mobile-operators-row {
    grid-auto-columns: minmax(220px, 1fr);
    gap: 0.7rem;
  }

  .calendar-mobile-operator-head {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 0.64rem 0.72rem;
  }

  .calendar-mobile-operator-avatar {
    width: 40px;
    height: 40px;
    font-size: 0.86rem;
  }

  .calendar-mobile-operator-head strong {
    font-size: 0.86rem;
  }

  .calendar-mobile-operator-head small {
    font-size: 0.7rem;
  }

  .calendar-mobile-appointment {
    left: 6px;
    right: 6px;
    border-radius: 14px;
    padding: 6px 8px 7px;
    gap: 2px;
  }

  .calendar-mobile-appointment-time {
    font-size: 0.64rem;
    line-height: 1.18;
  }

  .calendar-mobile-appointment-client {
    font-size: 0.67rem;
    line-height: 1.2;
  }

  .calendar-mobile-appointment.is-compact-slot .calendar-mobile-appointment-client {
    font-size: 0.62rem;
  }

  .calendar-mobile-appointment-status {
    font-size: 10px;
    padding: 1px 6px;
    line-height: 1.28;
  }

  .calendar-mobile-appointment-service {
    font-size: 0.6rem;
    line-height: 1.18;
  }

  .calendar-mobile-indicator {
    font-size: 0.54rem;
  }

  .calendar-mobile-floating-actions,
  .calendar-mobile-bottom-nav {
    display: none;
  }
}

.calendar-mobile-operator-column .calendar-mobile-slot-line,
.calendar-mobile-operator-column .calendar-mobile-appointment,
.calendar-mobile-operator-column .calendar-mobile-selection-preview,
.calendar-mobile-operator-column .calendar-mobile-operator-empty {
  transform: none;
}

.calendar-event-card {
  padding: 0.9rem 0.95rem;
  border-radius: 18px;
  border: 1px solid rgba(212, 223, 240, 0.95);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 22px rgba(55, 80, 120, 0.08);
}

.calendar-event-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.calendar-event-card strong {
  color: #243c64;
  font-size: 0.92rem;
}

.calendar-event-card span,
.calendar-event-card p,
.calendar-event-card small {
  display: block;
}

.calendar-event-card span {
  color: #5e7692;
  font-size: 0.76rem;
  font-weight: 700;
}

.calendar-event-card p {
  margin: 0.3rem 0 0;
  color: #6f829a;
  font-size: 0.82rem;
}

.calendar-event-card small {
  margin-top: 0.3rem;
  color: #4a6484;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: capitalize;
}

.calendar-week-view,
.calendar-year-view {
  display: grid;
  gap: 0.8rem;
}

.calendar-week-view {
  grid-template-columns: repeat(7, minmax(180px, 1fr));
}

.calendar-week-column,
.calendar-year-card,
.calendar-month-cell {
  border-radius: 20px;
  border: 1px solid rgba(210, 222, 241, 0.96);
  background: rgba(255, 255, 255, 0.98);
}

.calendar-week-column {
  padding: 0.85rem;
}

.calendar-week-column header,
.calendar-year-card header,
.calendar-month-cell header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.calendar-week-column header span,
.calendar-year-card header span,
.calendar-month-cell header span {
  color: #6d8198;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.calendar-week-column header strong,
.calendar-year-card header strong,
.calendar-month-cell header strong {
  color: #243c64;
}

.calendar-month-head {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 0;
  padding: 0 0.75rem;
}

.calendar-month-head span {
  color: #607893;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.85rem 0;
}

.calendar-month-shell {
  display: grid;
  gap: 0.6rem;
  padding: 0.75rem;
}

.calendar-month-view,
.calendar-year-view {
  display: grid;
  gap: 0.7rem;
}

.calendar-month-view {
  grid-template-columns: repeat(7, minmax(150px, 1fr));
  gap: 0;
  border-top: 1px solid rgba(214, 224, 239, 0.94);
  border-left: 1px solid rgba(214, 224, 239, 0.94);
}

.calendar-month-cell {
  min-height: 168px;
  padding: 0.7rem;
  border-radius: 0;
  border-top: 0;
  border-left: 0;
}

.calendar-month-cell.is-muted {
  background: rgba(244, 247, 251, 0.9);
}

.calendar-month-cell header {
  margin-bottom: 0.65rem;
}

.calendar-month-cell header strong {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.calendar-month-cell header strong.is-today {
  background: #3772e6;
  color: #ffffff;
}

.calendar-month-events {
  display: grid;
  gap: 0.42rem;
}

.calendar-event-pill {
  min-height: 38px;
  display: grid;
  gap: 0.1rem;
  padding: 0.42rem 0.6rem;
  border-radius: 14px;
  border: 1px solid rgba(210, 222, 241, 0.96);
  background: rgba(247, 250, 254, 0.98);
  color: #284064;
  line-height: 1.35;
}

.calendar-event-pill strong,
.calendar-event-pill span,
.calendar-event-pill small {
  display: block;
}

.calendar-event-pill strong {
  color: #577294;
  font-size: 0.68rem;
  font-weight: 800;
}

.calendar-event-pill span {
  font-size: 0.75rem;
  font-weight: 700;
}

.calendar-event-pill small {
  color: #6f849e;
  font-size: 0.7rem;
  font-weight: 700;
}

.calendar-month-more {
  min-height: 34px;
  border: 0;
  border-radius: 12px;
  background: rgba(229, 237, 249, 0.92);
  color: #32527c;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.calendar-year-view {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calendar-year-card {
  padding: 0.9rem;
}

.calendar-year-card-body {
  display: grid;
  gap: 0.5rem;
}

.calendar-year-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  padding: 0.65rem 0.7rem;
  border-radius: 14px;
  background: rgba(244, 248, 252, 0.98);
}

.calendar-year-row strong {
  color: #264067;
  font-size: 0.8rem;
}

.calendar-year-row span {
  color: #667d97;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.calendar-modal-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(1.1rem, env(safe-area-inset-top, 0px)) max(1.1rem, env(safe-area-inset-right, 0px))
    max(1.1rem, env(safe-area-inset-bottom, 0px)) max(1.1rem, env(safe-area-inset-left, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(55, 114, 230, 0.12), transparent 55%),
    rgba(7, 16, 34, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 80;
}

.calendar-modal-backdrop[hidden] {
  display: none;
}

.calendar-modal {
  position: relative;
  z-index: 1;
  width: min(680px, calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-height: calc(var(--reservaai-vh, 100vh) - 48px);
  overflow: auto;
  padding: 1.35rem 1.4rem 1.45rem;
  border-radius: 28px;
  border: 1px solid rgba(198, 214, 238, 0.98);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(246, 249, 254, 0.99) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 36px 72px rgba(15, 34, 68, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.45) inset;
}

.calendar-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.calendar-modal-head > div:first-child {
  min-width: 0;
}

.calendar-modal-head span {
  display: block;
  color: #70839b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.calendar-modal-head strong {
  display: block;
  margin-top: 0.35rem;
  color: #152a4a;
  font-size: clamp(1.05rem, 2.8vw, 1.28rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.calendar-modal-close {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(196, 212, 236, 0.85);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(236, 243, 253, 0.96));
  color: #2c486f;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.calendar-modal-close:hover {
  transform: translateY(-1px);
  border-color: rgba(55, 114, 230, 0.35);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(229, 240, 255, 0.98));
  box-shadow: 0 12px 24px rgba(35, 72, 132, 0.14);
}

.calendar-modal-form {
  display: grid;
  gap: 0.85rem;
}

.calendar-modal-booking.calendar-modal .calendar-modal-form {
  gap: 1rem;
}

.calendar-modal-booking .calendar-modal-summary {
  margin-bottom: 1.05rem;
}

.calendar-modal-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.calendar-modal-summary-card {
  padding: 0.85rem 0.95rem;
  border-radius: 18px;
  border: 1px solid rgba(209, 222, 242, 0.96);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.99), rgba(238, 245, 255, 0.94));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.88) inset,
    0 10px 26px rgba(26, 55, 102, 0.07);
}

.calendar-modal-summary-card span {
  display: block;
  color: #6d829a;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.calendar-modal-summary-card strong {
  display: block;
  margin-top: 0.34rem;
  color: #203a63;
  font-size: 0.92rem;
  line-height: 1.35;
}

.calendar-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.calendar-modal-field {
  display: grid;
  gap: 0.35rem;
}

.calendar-modal-field span {
  color: #6b8098;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.calendar-modal-field input,
.calendar-modal-field select {
  min-height: 46px;
  width: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: 16px;
  border: 1px solid rgba(194, 210, 234, 0.96);
  background: rgba(255, 255, 255, 0.98);
  color: #23406a;
  font-family: inherit;
  font-size: max(0.9375rem, 16px);
  line-height: 1.35;
}

.calendar-modal-field.is-readonly input {
  background: rgba(243, 247, 252, 0.96);
  color: #6b8098;
}

.calendar-modal-booking .calendar-modal-client-mode > span:first-of-type {
  margin-bottom: 0.05rem;
}

.calendar-modal-client-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 0.45rem;
  margin-top: 0.35rem;
  margin-bottom: 0.55rem;
}

.calendar-modal-client-type-card {
  position: relative;
  margin: 0;
  cursor: pointer;
  border-radius: 14px;
}

.calendar-modal-client-type-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.calendar-modal-client-type-card-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.4rem 0.5rem;
  min-height: 0;
  padding: 0.48rem 0.62rem;
  border-radius: 14px;
  border: 1px solid rgba(196, 212, 236, 0.95);
  background: rgba(252, 253, 255, 0.98);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.calendar-modal-client-type-card:hover .calendar-modal-client-type-card-inner {
  border-color: rgba(55, 114, 230, 0.45);
}

.calendar-modal-client-type-card input:focus-visible + .calendar-modal-client-type-card-inner {
  outline: 2px solid rgba(55, 114, 230, 0.55);
  outline-offset: 2px;
}

.calendar-modal-client-type-card input:checked + .calendar-modal-client-type-card-inner {
  border-color: rgba(55, 114, 230, 0.85);
  box-shadow: 0 0 0 1px rgba(55, 114, 230, 0.25);
  background: rgba(245, 249, 255, 0.98);
}

.calendar-modal-client-type-card-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.95), rgba(55, 114, 230, 0.22));
  border: 1px solid rgba(55, 114, 230, 0.35);
}

.calendar-modal-client-type-card-icon--outline {
  background: rgba(243, 247, 252, 0.96);
  border-color: rgba(196, 212, 236, 0.95);
}

.calendar-modal-client-type-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}

.calendar-modal-client-type-card-text strong {
  font-size: 0.78rem;
  color: #1a3358;
  line-height: 1.25;
}

.calendar-modal-client-type-card-text small {
  font-size: 0.62rem;
  line-height: 1.3;
  color: #5f7894;
  font-weight: 600;
}

.calendar-modal-client-type-card-radio {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(160, 178, 204, 0.95);
  background: #fff;
  justify-self: end;
  align-self: start;
  margin-top: 0.12rem;
}

.calendar-modal-client-type-card input:checked + .calendar-modal-client-type-card-inner .calendar-modal-client-type-card-radio {
  border-color: #3772e6;
  box-shadow: inset 0 0 0 3px #fff;
  background: #3772e6;
}

.calendar-modal-registered-wrap {
  margin-top: 0.2rem;
}

.calendar-modal-registered-search-panel {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}

/* display:flex vence [hidden] em alguns navegadores — ao escolher cliente o painel deve sumir por completo */
.calendar-modal-registered-search-panel[hidden] {
  display: none !important;
}

.calendar-modal-registered-picked {
  margin-top: 0.15rem;
}

.calendar-modal-registered-picked[hidden] {
  display: none !important;
}

.calendar-modal-registered-picked-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-radius: 16px;
  border: 1px solid rgba(196, 212, 236, 0.95);
  background: rgba(248, 251, 255, 0.98);
}

.calendar-modal-registered-picked-main {
  flex: 1;
  min-width: 0;
}

.calendar-modal-registered-picked-main strong {
  display: block;
  font-size: 0.95rem;
  color: #1a3358;
}

.calendar-modal-registered-picked-phone {
  margin-top: 0.12rem;
  font-size: 0.8rem;
  color: #5f7894;
  font-weight: 600;
}

.calendar-modal-registered-picked .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.calendar-modal-field--flush {
  margin-bottom: 0.15rem;
}

.calendar-modal-booking--create {
  width: min(920px, calc(100vw - 28px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
}

.calendar-modal-form-section-title {
  margin: 0 0 0.65rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5f7894;
}

.calendar-modal-details-section {
  margin-top: 1.05rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(226, 234, 246, 0.92);
}

.calendar-modal-booking .calendar-modal-client-identity {
  margin-top: 0.55rem;
  padding-top: 0.35rem;
}

.calendar-modal-details-grid {
  display: grid;
  gap: 0.75rem 1rem;
}

.calendar-modal-details-grid--top {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calendar-modal-details-grid--bottom {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.75rem;
}

.calendar-modal-grid.calendar-modal-status-row {
  grid-template-columns: 1fr;
  max-width: min(100%, 22rem);
  margin-top: 0.35rem;
}

@media (max-width: 900px) {
  .calendar-modal-details-grid--top {
    grid-template-columns: 1fr;
  }

  .calendar-modal-details-grid--bottom {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .calendar-modal-details-grid--bottom {
    grid-template-columns: 1fr;
  }
}

/* Modal agendamento: mobile — ações empilhadas, cartões cliente em coluna, tipografia tátil (16px já nos inputs). */
@media (max-width: 640px) {
  .calendar-modal {
    padding: 1.05rem 1rem 1.15rem;
    border-radius: 22px;
    max-height: calc(var(--reservaai-vh, 100vh) - max(24px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)));
  }

  .calendar-modal-summary {
    gap: 0.55rem;
  }

  .calendar-modal-client-type-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .calendar-modal-client-type-card-inner {
    padding: 0.55rem 0.72rem;
    border-radius: 16px;
  }

  .calendar-modal-details-section {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
  }

  .calendar-customer-picker-list--in-modal {
    max-height: min(240px, 38vh);
  }

  .calendar-modal-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    padding-top: 0.75rem;
    margin-top: 0.55rem;
  }

  .calendar-modal-actions .calendar-modal-feedback {
    margin-right: 0;
    text-align: center;
    order: -1;
  }

  .calendar-modal-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

.calendar-modal-field--inline-search {
  margin-bottom: 0;
}

.calendar-modal-inline-search {
  display: block;
  position: relative;
}

.calendar-modal-inline-search::before {
  content: '';
  position: absolute;
  left: 0.95rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  opacity: 0.45;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2323406a' stroke-width='1.6' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cpath d='M14 14l6 6'/%3E%3C/svg%3E");
  pointer-events: none;
}

.calendar-modal-inline-search-input {
  width: 100%;
  min-height: 46px;
  padding: 0.62rem 0.9rem 0.62rem 2.55rem;
  border-radius: 16px;
  border: 1px solid rgba(194, 210, 234, 0.96);
  background: rgba(255, 255, 255, 0.98);
  color: #23406a;
  font-family: inherit;
  font-size: max(0.9375rem, 16px);
  line-height: 1.35;
}

.calendar-modal-field--stack {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.calendar-modal-time-slot-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.calendar-modal-time-slot-wrap input[type='time'][hidden] {
  display: none !important;
}

.calendar-modal-time-empty {
  min-height: 46px;
  padding: 0.55rem 0.85rem;
  border-radius: 16px;
  border: 1px dashed rgba(194, 210, 234, 0.96);
  background: rgba(248, 251, 255, 0.96);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
}

/* display:flex acima pode vencer [hidden] em alguns navegadores — esconder de fato */
.calendar-modal-time-empty[hidden] {
  display: none !important;
  min-height: 0;
  padding: 0;
  border: none;
  margin: 0;
}

.calendar-modal-time-empty-title {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1a3358;
}

.calendar-modal-time-empty-sub {
  font-size: 0.75rem;
  color: #6b8098;
  font-weight: 600;
}

.calendar-customer-picker-list--in-modal {
  max-height: min(260px, 36vh);
}

.calendar-customer-picker-row.is-selected {
  background: rgba(230, 240, 255, 0.98);
  box-shadow: inset 3px 0 0 #3772e6;
}

.calendar-modal-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.calendar-modal-action-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  position: relative;
}

.calendar-modal-action-icon--close::before,
.calendar-modal-action-icon--close::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.78rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.calendar-modal-action-icon--close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.calendar-modal-action-icon--calendar {
  border: 2px solid currentColor;
  border-radius: 4px;
  box-sizing: border-box;
}

.calendar-modal-action-icon--calendar::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  top: 5px;
  height: 4px;
  border-bottom: 2px solid currentColor;
  opacity: 0.85;
}

.calendar-modal-action-icon--save {
  border-radius: 3px;
  border: 2px solid currentColor;
  box-sizing: border-box;
}

.calendar-modal-action-icon--save::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 5px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 2px 2px;
  opacity: 0.9;
}

/* —— Modal agendamento premium (tablet-first) —— */
.calendar-modal-backdrop--premium {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.calendar-modal-booking--premium.calendar-modal {
  width: min(920px, calc(100vw - 28px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  padding: 1.5rem 1.75rem 1.35rem;
  border-radius: 24px;
}

.calendar-modal-head--premium {
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.15rem;
}

.calendar-modal-head-premium-brand {
  flex-shrink: 0;
}

.calendar-modal-head-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(165deg, #3772e6 0%, #2456c9 100%);
  color: #f6f9ff;
  box-shadow: 0 10px 22px rgba(55, 114, 230, 0.28);
}

.calendar-modal-head-icon {
  display: block;
}

.calendar-modal-head-premium-copy {
  flex: 1;
  min-width: 0;
}

.calendar-modal-eyebrow-premium {
  display: block;
  color: #3772e6;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.calendar-modal-head--premium .calendar-modal-head-premium-copy strong {
  margin-top: 0.25rem;
  font-size: clamp(1.2rem, 3vw, 1.45rem);
}

.calendar-modal-subtitle-premium {
  margin: 0.45rem 0 0;
  color: #6b8098;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.45;
}

.calendar-modal-close--premium {
  align-self: flex-start;
}

.calendar-modal-summary--premium {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.15rem;
}

.calendar-modal-summary-card--premium {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  border-radius: 18px;
}

.calendar-modal-summary-card-visual {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(55, 114, 230, 0.1);
  color: #2c5fb8;
}

.calendar-modal-summary-card-icon {
  display: block;
}

.calendar-modal-summary-card-body {
  min-width: 0;
}

.calendar-modal-summary-card--premium[data-summary-tone="window"] .calendar-modal-summary-card-visual {
  background: rgba(55, 114, 230, 0.12);
  color: #2c5fb8;
}

.calendar-modal-summary-card--premium[data-summary-tone^="appt-confirmed"] .calendar-modal-summary-card-visual {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
}

.calendar-modal-summary-card--premium[data-summary-tone^="appt-pending"] .calendar-modal-summary-card-visual {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}

.calendar-modal-summary-card--premium[data-summary-tone^="appt-cancelled"] .calendar-modal-summary-card-visual,
.calendar-modal-summary-card--premium[data-summary-tone^="appt-blocked"] .calendar-modal-summary-card-visual {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.calendar-modal-summary-card--premium[data-summary-tone^="att-completed"] .calendar-modal-summary-card-visual {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
}

.calendar-modal-summary-card--premium[data-summary-tone^="att-delayed"] .calendar-modal-summary-card-visual,
.calendar-modal-summary-card--premium[data-summary-tone^="att-in-progress"] .calendar-modal-summary-card-visual {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.calendar-modal-summary-card--premium[data-summary-tone^="att-cancelled"] .calendar-modal-summary-card-visual {
  background: rgba(248, 113, 113, 0.18);
  color: #9f1239;
}

.calendar-modal-summary-card--premium[data-summary-tone^="att-pending"] .calendar-modal-summary-card-visual {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}

.calendar-modal-summary-card--premium[data-summary-tone="meta"] .calendar-modal-summary-card-visual {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}

.calendar-modal-form--premium {
  gap: 1.15rem;
}

.calendar-modal-body-grid-premium {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.5rem;
  align-items: start;
}

@media (max-width: 720px) {
  .calendar-modal-body-grid-premium {
    grid-template-columns: 1fr;
  }
}

/* Duas colunas alinhadas: remove o “degrau” extra da coluna de detalhes (borda/margem herdada de layout antigo). */
.calendar-modal-body-grid-premium .calendar-modal-details-section {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.calendar-modal-body-grid-premium .calendar-modal-booking .calendar-modal-client-identity,
.calendar-modal-body-grid-premium .calendar-modal-client-identity {
  margin-top: 0;
  padding-top: 0;
}

.calendar-modal-body-grid-premium .calendar-modal-client-identity {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.calendar-modal-section-head-premium {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.65rem;
  color: #3772e6;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.calendar-modal-section-head-icon {
  display: flex;
  color: #3772e6;
  opacity: 0.92;
}

.calendar-modal-readonly-slot {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0.75rem 0.95rem;
  border-radius: 16px;
  border: 1px solid rgba(194, 210, 234, 0.96);
  background: rgba(243, 247, 252, 0.96);
  color: #23406a;
  font-size: max(0.9375rem, 16px);
  font-weight: 600;
}

.calendar-modal-section-premium {
  padding: 0.15rem 0 0.1rem;
}

.calendar-modal-payment-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  border: 1px solid rgba(251, 191, 36, 0.55);
  background: linear-gradient(165deg, #fffbeb 0%, #fef3c7 100%);
}

.calendar-modal-payment-banner--paid {
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(165deg, #ecfdf5 0%, #d1fae5 100%);
  flex-direction: column;
  align-items: stretch;
}

/* display:flex vence [hidden] em alguns navegadores — só um estado de pagamento visível */
#adminCalendarModalPaymentUnpaid[hidden],
#adminCalendarModalPaymentPaid[hidden],
.calendar-modal-payment-banner[hidden] {
  display: none !important;
}

.calendar-modal-payment-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.calendar-modal-payment-banner-main {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.calendar-modal-payment-banner-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.25);
  color: #b45309;
  font-weight: 900;
  font-size: 1.1rem;
}

.calendar-modal-payment-banner-icon--ok {
  background: rgba(16, 185, 129, 0.22);
  color: #047857;
  font-size: 1rem;
}

.calendar-modal-payment-banner strong {
  display: block;
  color: #92400e;
  font-size: 0.98rem;
}

.calendar-modal-payment-banner--paid .calendar-modal-payment-banner-main strong {
  color: #065f46;
}

.calendar-modal-payment-banner p {
  margin: 0.25rem 0 0;
  color: #a16207;
  font-size: 0.84rem;
  line-height: 1.4;
}

.calendar-modal-payment-banner--paid .calendar-modal-payment-banner-main p {
  color: #047857;
}

.calendar-modal-pay-now-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  border-radius: 14px;
  border: 2px solid rgba(234, 88, 12, 0.65);
  background: rgba(255, 255, 255, 0.92);
  color: #c2410c;
  font-weight: 800;
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.calendar-modal-pay-now-btn:hover:not(:disabled) {
  background: #fff7ed;
  transform: translateY(-1px);
}

.calendar-modal-payment-paid-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(16, 185, 129, 0.22);
}

.calendar-modal-receipt-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  border-radius: 14px;
  border: 2px solid rgba(16, 185, 129, 0.55);
  background: rgba(255, 255, 255, 0.95);
  color: #047857;
  font-weight: 800;
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.calendar-modal-receipt-btn:hover:not(:disabled) {
  background: #ecfdf5;
  transform: translateY(-1px);
}

.calendar-modal-receipt-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.calendar-modal-booking--view-only .calendar-modal-field input,
.calendar-modal-booking--view-only .calendar-modal-field select {
  background: rgba(243, 247, 252, 0.96);
  color: #4b5f78;
  cursor: default;
}

.calendar-modal-booking--view-only .calendar-modal-footer-main-row .calendar-modal-delete-btn,
.calendar-modal-booking--view-only #adminCalendarModalSave {
  display: none !important;
}

.calendar-modal-view-only-only {
  display: none !important;
}

.calendar-modal-booking--view-only.calendar-modal-booking--premium {
  width: min(1080px, calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
}

.calendar-modal-booking--view-only #adminCalendarModalSummary,
.calendar-modal-booking--view-only #adminCalendarModalForm > :not(.calendar-modal-footer-premium) {
  display: none !important;
}

.calendar-modal-booking--view-only #adminCalendarModalCompletedDashboard {
  display: block !important;
}

.calendar-modal-booking--view-only .calendar-modal-footer-premium {
  margin-top: 0.35rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(226, 234, 246, 0.95);
}

.calendar-modal-booking--view-only .calendar-modal-view-only-only {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
}

.calendar-modal-booking--view-only #adminCalendarModalCancel.btn-primary {
  min-width: 8.5rem;
}

.calendar-modal-booking--view-only .calendar-modal-footer-footnote {
  display: none;
}

.calendar-modal-completed-dashboard {
  display: none;
  padding: 0 0 0.25rem;
}

.cal-cd-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  padding: 1.15rem 1.2rem;
  margin-bottom: 0.85rem;
  border-radius: 18px;
  border: 1px solid rgba(16, 185, 129, 0.35);
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 55%, #ecfdf5 100%);
  box-shadow: 0 10px 28px rgba(16, 185, 129, 0.08);
}

.cal-cd-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: min(100%, 320px);
}

.cal-cd-hero-check {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #10b981;
  color: #fff;
  font-size: 1.45rem;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
}

.cal-cd-hero-copy strong {
  display: block;
  font-size: 1.12rem;
  color: #065f46;
  line-height: 1.25;
}

.cal-cd-hero-copy p {
  margin: 0.3rem 0 0;
  color: #047857;
  font-size: 0.88rem;
  font-weight: 600;
}

.cal-cd-hero-stats {
  display: grid;
  gap: 0.45rem 1.1rem;
  grid-template-columns: repeat(3, minmax(0, max-content));
  margin-left: auto;
}

.cal-cd-hero-stat {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #065f46;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.cal-cd-hero-stat strong {
  color: #064e3b;
  font-weight: 800;
}

.cal-cd-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.9rem;
}

.cal-cd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.cal-cd-card {
  border-radius: 16px;
  border: 1px solid rgba(226, 234, 246, 0.95);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
  padding: 0.95rem 1rem;
}

.cal-cd-card-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  color: #3772e6;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cal-cd-card-head svg {
  flex-shrink: 0;
}

.cal-cd-client-profile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cal-cd-avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #dbeafe, #eff6ff);
  color: #1d4ed8;
  font-weight: 800;
  font-size: 1.1rem;
  border: 2px solid rgba(55, 114, 230, 0.25);
  overflow: hidden;
  flex-shrink: 0;
}

.cal-cd-avatar-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.cal-cd-client-name {
  font-size: 1rem;
  font-weight: 800;
  color: #1a3358;
}

.cal-cd-badge {
  display: inline-flex;
  margin-top: 0.35rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(55, 114, 230, 0.12);
  color: #1d4ed8;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.cal-cd-client-phone {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
  color: #5f7894;
  font-size: 0.84rem;
  font-weight: 600;
}

.cal-cd-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.85rem;
  padding: 0.62rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(196, 212, 236, 0.95);
  background: rgba(248, 251, 255, 0.96);
  color: #23406a;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.cal-cd-link-btn:hover {
  border-color: rgba(55, 114, 230, 0.45);
  background: #fff;
}

.cal-cd-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.85rem;
}

.cal-cd-detail {
  min-width: 0;
}

.cal-cd-detail span {
  display: block;
  color: #6b8098;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cal-cd-detail strong {
  display: block;
  margin-top: 0.2rem;
  color: #1a3358;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
}

.cal-cd-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cal-cd-timeline li {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0.65rem;
  position: relative;
  padding-bottom: 0.85rem;
}

.cal-cd-timeline li::before {
  content: '';
  position: absolute;
  left: 1.05rem;
  top: 1.35rem;
  bottom: 0;
  width: 2px;
  background: rgba(16, 185, 129, 0.25);
}

.cal-cd-timeline li:last-child::before {
  display: none;
}

.cal-cd-timeline-time {
  color: #047857;
  font-size: 0.78rem;
  font-weight: 800;
  padding-top: 0.1rem;
}

.cal-cd-timeline-body {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.cal-cd-timeline-dot {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #10b981;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  margin-top: 0.05rem;
}

.cal-cd-timeline-text {
  color: #23406a;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
}

.cal-cd-card--payments .cal-cd-card-head {
  margin-bottom: 0.55rem;
}

.cal-cd-pay-total-banner {
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.1);
  color: #065f46;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}

.cal-cd-pay-total-banner strong {
  font-size: 0.95rem;
  font-weight: 900;
}

.cal-cd-pay-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.cal-cd-pay-grid[data-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.cal-cd-pay-card {
  position: relative;
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid rgba(16, 185, 129, 0.35);
  background: linear-gradient(165deg, #f0fdf4 0%, #dcfce7 100%);
  text-align: center;
}

.cal-cd-pay-card--split {
  padding: 0.85rem 0.7rem 0.95rem;
}

.cal-cd-pay-split-label {
  display: block;
  margin-bottom: 0.35rem;
  color: #047857;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cal-cd-pay-status-title {
  margin: 0.2rem 0 0;
  color: #065f46;
  font-weight: 800;
  font-size: 0.88rem;
}

.cal-cd-pay-status-sub {
  margin: 0;
  color: #047857;
  font-size: 0.76rem;
}

.cal-cd-pay-card--split .cal-cd-pay-amount {
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
}

.cal-cd-pay-card--split .cal-cd-pay-badge {
  top: 0.55rem;
  right: 0.55rem;
  font-size: 0.58rem;
}

.cal-cd-pay-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #10b981;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.cal-cd-pay-amount {
  margin: 0.35rem 0 0.15rem;
  font-size: clamp(1.85rem, 4vw, 2.35rem);
  font-weight: 900;
  color: #047857;
  line-height: 1.1;
}

/* Pagamento via crédito de pacote: destacar com tom roxo/teal e tipografia menor
   (não é valor monetário, é uma label). */
.cal-cd-pay-card--package {
  border-color: rgba(124, 58, 237, 0.35);
  background: linear-gradient(165deg, #f5f3ff 0%, #ede9fe 100%);
}

.cal-cd-pay-card--package .cal-cd-pay-status-title,
.cal-cd-pay-card--package .cal-cd-pay-status-sub {
  color: #5b21b6;
}

.cal-cd-pay-card--package .cal-cd-pay-method {
  background: rgba(255, 255, 255, 0.85);
  color: #5b21b6;
  border: 1px solid rgba(124, 58, 237, 0.3);
}

.cal-cd-pay-card--package .cal-cd-pay-badge {
  background: #7c3aed;
}

.cal-cd-pay-amount--package {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  letter-spacing: 0.02em;
  color: #5b21b6;
  display: inline-block;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.12);
  margin: 0.5rem auto 0.25rem;
}

.cal-cd-pay-method {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: #065f46;
  font-size: 0.8rem;
  font-weight: 800;
}

.cal-cd-pay-meta {
  margin-top: 0.45rem;
  color: #047857;
  font-size: 0.76rem;
  font-weight: 600;
}

.cal-cd-pay-receipt {
  margin-top: 0.75rem;
}

.cal-cd-finance-rows {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.cal-cd-finance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.84rem;
  color: #4b5f78;
}

.cal-cd-finance-row strong {
  color: #1a3358;
  font-weight: 800;
}

.cal-cd-finance-row.is-discount strong {
  color: #b45309;
}

.cal-cd-finance-row.is-total {
  margin-top: 0.35rem;
  padding-top: 0.55rem;
  border-top: 1px dashed rgba(196, 212, 236, 0.95);
  font-size: 0.92rem;
}

.cal-cd-finance-row.is-total strong {
  color: #047857;
  font-size: 1rem;
}

.cal-cd-items {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.cal-cd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.62rem 0.72rem;
  border-radius: 12px;
  background: rgba(248, 251, 255, 0.96);
  border: 1px solid rgba(226, 234, 246, 0.9);
}

.cal-cd-item-main strong {
  display: block;
  color: #1a3358;
  font-size: 0.86rem;
}

.cal-cd-item-main span {
  display: block;
  margin-top: 0.12rem;
  color: #6b8098;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.cal-cd-item-price {
  color: #047857;
  font-weight: 800;
  font-size: 0.88rem;
  white-space: nowrap;
}

.cal-cd-notes {
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(226, 234, 246, 0.95);
  background: rgba(248, 251, 255, 0.72);
}

.cal-cd-notes p {
  margin: 0.35rem 0 0;
  color: #4b5f78;
  font-size: 0.86rem;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .cal-cd-hero-stats {
    grid-template-columns: 1fr;
    margin-left: 0;
    width: 100%;
  }

  .cal-cd-summary {
    grid-template-columns: 1fr;
  }

  .cal-cd-grid {
    grid-template-columns: 1fr;
  }

  .cal-cd-pay-grid {
    grid-template-columns: 1fr;
  }

  .cal-cd-details-grid {
    grid-template-columns: 1fr;
  }
}

.calendar-modal-payment-paid-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.65rem 1rem;
  margin: 0.75rem 0 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid rgba(16, 185, 129, 0.22);
  width: 100%;
}

.calendar-modal-payment-paid-meta--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 22rem;
}

.calendar-modal-payment-paid-meta-span {
  grid-column: 1 / -1;
}

.calendar-modal-payment-paid-meta.is-loading dd {
  opacity: 0.55;
}

.calendar-modal-payment-paid-notes {
  margin: 0.65rem 0 0;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.calendar-modal-payment-paid-notes-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #047857;
  opacity: 0.85;
}

.calendar-modal-payment-paid-notes p {
  margin: 0.35rem 0 0;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.45;
  color: #064e3b;
}

.calendar-modal-payment-paid-meta dt {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #047857;
  opacity: 0.85;
}

.calendar-modal-payment-paid-meta dd {
  margin: 0.2rem 0 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: #064e3b;
}

.calendar-modal-field--status-lg .calendar-modal-status-select-lg {
  min-height: 52px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 16px;
}

.calendar-modal-field--textarea {
  position: relative;
}

.calendar-modal-field--textarea textarea {
  min-height: 120px;
  resize: vertical;
  padding-bottom: 1.75rem;
}

.calendar-modal-notes-counter {
  position: absolute;
  right: 0.75rem;
  bottom: 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #8a9bb5;
}

.calendar-modal-optional-tag {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #8a9bb5;
}

.calendar-modal-footer-premium {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.35rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(215, 227, 245, 0.95);
}

.calendar-modal-footer-feedback-row {
  min-height: 1.25rem;
}

.calendar-modal-footer-main-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.calendar-modal-footer-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
}

.calendar-modal-footer-btn {
  min-height: 42px;
  height: 42px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  border-radius: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.calendar-modal-footer-btn--text {
  gap: 0;
}

.calendar-modal-footer-footnote {
  margin: 0;
  font-size: 0.78rem;
  color: #7b8fa8;
  line-height: 1.45;
}

.calendar-modal-form--premium[data-calendar-modal-mode="create"] .calendar-modal-edit-only {
  display: none !important;
}

.calendar-modal .btn.btn-danger-ghost {
  border: 1px solid rgba(239, 68, 68, 0.55);
  color: #b91c1c;
  background: rgba(255, 255, 255, 0.95);
  font-weight: 800;
}

.calendar-modal .btn.btn-danger-ghost:hover:not(:disabled) {
  background: #fef2f2;
  border-color: rgba(220, 38, 38, 0.65);
}

.calendar-modal-delete-btn {
  min-height: 42px;
  height: 42px;
}

.calendar-modal-booking--premium .calendar-modal-feedback {
  display: block;
  width: 100%;
  text-align: left;
}

@media (max-width: 560px) {
  .calendar-modal-footer-main-row {
    flex-direction: column;
    align-items: stretch;
  }

  .calendar-modal-footer-actions {
    margin-left: 0;
    justify-content: flex-end;
  }
}

.calendar-customer-picker-section-title {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b8098;
  margin-top: 0.35rem;
}

.calendar-customer-picker-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: min(320px, 42vh);
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(196, 212, 236, 0.95);
  background: rgba(255, 255, 255, 0.98);
}

.calendar-customer-picker-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  text-align: left;
  padding: 0.65rem 0.75rem;
  border: 0;
  border-bottom: 1px solid rgba(226, 234, 246, 0.95);
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.calendar-customer-picker-row:last-child {
  border-bottom: 0;
}

.calendar-customer-picker-row:hover,
.calendar-customer-picker-row:focus-visible {
  background: rgba(245, 249, 255, 0.96);
}

.calendar-customer-picker-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #1a3358;
  background: rgba(55, 114, 230, 0.14);
  border: 1px solid rgba(55, 114, 230, 0.28);
}

.calendar-customer-picker-avatar--lg {
  width: 44px;
  height: 44px;
  font-size: 0.78rem;
}

.calendar-customer-picker-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.calendar-customer-picker-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: #1a3358;
}

.calendar-customer-picker-phone {
  font-size: 0.78rem;
  color: #5f7894;
  font-weight: 600;
}

.calendar-customer-picker-meta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  font-size: 0.68rem;
  color: #5f7894;
  text-align: right;
}

.calendar-customer-picker-badge {
  display: inline-block;
  padding: 0.12rem 0.35rem;
  border-radius: 8px;
  background: rgba(55, 114, 230, 0.1);
  color: #2c4f8a;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.calendar-customer-picker-empty {
  margin: 0;
  padding: 0.85rem 0.75rem;
  font-size: 0.82rem;
  color: #6b8098;
  font-weight: 600;
}

.calendar-modal-client-hint {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #6b8098;
}

.calendar-modal-professional-locked {
  margin: 0;
  padding: 0.65rem 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(196, 212, 236, 0.95);
  background: rgba(243, 247, 252, 0.96);
  color: #203a63;
  font-size: 0.88rem;
  font-weight: 700;
}

#adminCalendarModalForm[data-calendar-modal-mode="create"] .calendar-modal-status-row {
  display: none;
}

#adminCalendarModalForm[data-calendar-modal-mode="edit"] .calendar-modal-create-only {
  display: none !important;
}

#adminCalendarModalForm[data-calendar-client-mode="walkin"] .calendar-modal-registered-wrap {
  display: none !important;
}

#adminCalendarModalForm[data-calendar-modal-mode="create"][data-calendar-client-mode="registered"] #adminCalendarModalClientIdentityWrap {
  display: none !important;
}

/* —— Novo agendamento: layout em fluxo único, sem coluna vazia nem seções órfãs —— */
#adminCalendarModalForm[data-calendar-modal-mode="create"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 0.85rem 1.35rem;
  align-items: start;
}

#adminCalendarModalForm[data-calendar-modal-mode="create"] > .calendar-modal-body-grid-premium {
  display: contents;
}

#adminCalendarModalForm[data-calendar-modal-mode="create"] > .calendar-modal-client-mode {
  grid-column: 1;
  margin: 0;
}

#adminCalendarModalForm[data-calendar-modal-mode="create"] .calendar-modal-column-premium--client {
  grid-column: 1;
}

#adminCalendarModalForm[data-calendar-modal-mode="create"] .calendar-modal-column-premium--details {
  grid-column: 2;
  grid-row: 1 / span 3;
}

/* Cliente cadastrado: busca em largura total; detalhes abaixo */
#adminCalendarModalForm[data-calendar-modal-mode="create"][data-calendar-client-mode="registered"] {
  grid-template-columns: 1fr;
}

#adminCalendarModalForm[data-calendar-modal-mode="create"][data-calendar-client-mode="registered"] > .calendar-modal-client-mode,
#adminCalendarModalForm[data-calendar-modal-mode="create"][data-calendar-client-mode="registered"] .calendar-modal-column-premium--details {
  grid-column: 1;
  grid-row: auto;
}

#adminCalendarModalForm[data-calendar-modal-mode="create"][data-calendar-client-mode="registered"] .calendar-modal-column-premium--client {
  display: none;
}

#adminCalendarModalForm[data-calendar-modal-mode="create"][data-calendar-client-mode="walkin"] .calendar-modal-column-premium--client > .calendar-modal-section-head-premium {
  display: none;
}

#adminCalendarModalForm[data-calendar-modal-mode="create"] #adminCalendarModalPaymentSection,
#adminCalendarModalForm[data-calendar-modal-mode="create"] #adminCalendarModalStatusSection {
  display: none !important;
}

#adminCalendarModalForm[data-calendar-modal-mode="create"] .calendar-modal-field:has(#adminCalendarModalProvider) {
  display: none;
}

#adminCalendarModalForm[data-calendar-modal-mode="create"] .calendar-modal-details-grid--top {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#adminCalendarModalForm[data-calendar-modal-mode="create"] .calendar-modal-details-grid--top .calendar-modal-field:nth-child(3) {
  grid-column: 1 / -1;
}

#adminCalendarModalForm[data-calendar-modal-mode="create"] .calendar-modal-details-grid--bottom {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.65rem;
}

.calendar-modal-booking--create .calendar-modal-summary--premium {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.9rem;
}

.calendar-modal-booking--create .calendar-modal-summary-card--premium {
  padding: 0.72rem 0.82rem;
  gap: 0.55rem;
  border-radius: 14px;
}

.calendar-modal-booking--create .calendar-modal-summary-card-visual {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.calendar-modal-booking--create .calendar-modal-summary-card--premium strong {
  font-size: 0.92rem;
}

.calendar-modal-booking--create .calendar-modal-form--premium {
  gap: 0.85rem;
}

.calendar-modal-client-mode-label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5f7898;
}

#adminCalendarModalForm[data-calendar-modal-mode="create"] .calendar-modal-client-mode {
  padding: 0.85rem 0.95rem;
  border-radius: 16px;
  border: 1px solid rgba(226, 234, 246, 0.95);
  background: rgba(248, 251, 255, 0.72);
}

#adminCalendarModalForm[data-calendar-modal-mode="create"] .calendar-modal-client-type-grid {
  gap: 0.4rem;
  margin-bottom: 0.65rem;
}

#adminCalendarModalForm[data-calendar-modal-mode="create"] .calendar-modal-client-type-card-text small {
  display: none;
}

#adminCalendarModalForm[data-calendar-modal-mode="create"] .calendar-modal-registered-search-panel {
  margin-top: 0.15rem;
}

#adminCalendarModalForm[data-calendar-modal-mode="create"] .calendar-customer-picker-list--in-modal {
  max-height: min(200px, 32vh);
}

#adminCalendarModalForm[data-calendar-modal-mode="create"] .calendar-modal-footer-premium {
  grid-column: 1 / -1;
  margin-top: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(226, 234, 246, 0.92);
}

@media (max-width: 720px) {
  #adminCalendarModalForm[data-calendar-modal-mode="create"] {
    grid-template-columns: 1fr;
  }

  #adminCalendarModalForm[data-calendar-modal-mode="create"] > .calendar-modal-client-mode,
  #adminCalendarModalForm[data-calendar-modal-mode="create"] .calendar-modal-column-premium--client,
  #adminCalendarModalForm[data-calendar-modal-mode="create"] .calendar-modal-column-premium--details {
    grid-column: 1;
    grid-row: auto;
  }

  #adminCalendarModalForm[data-calendar-modal-mode="create"][data-calendar-client-mode="registered"] .calendar-modal-column-premium--client {
    display: none;
  }

  .calendar-modal-booking--create .calendar-modal-summary--premium {
    grid-template-columns: 1fr;
  }

  #adminCalendarModalForm[data-calendar-modal-mode="create"] .calendar-modal-details-grid--top,
  #adminCalendarModalForm[data-calendar-modal-mode="create"] .calendar-modal-details-grid--bottom {
    grid-template-columns: 1fr;
  }

  #adminCalendarModalForm[data-calendar-modal-mode="create"] .calendar-modal-details-grid--top .calendar-modal-field:nth-child(3) {
    grid-column: auto;
  }
}

.calendar-modal-booking .calendar-modal-actions {
  margin-top: 0.85rem;
  padding-top: 0.65rem;
}

.calendar-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(221, 229, 241, 0.88);
}

.calendar-modal-feedback {
  margin-right: auto;
  color: #5f7894;
  font-size: 0.82rem;
  font-weight: 700;
}

.calendar-modal-actions .btn {
  min-height: 44px;
  padding-inline: 1rem;
  border-radius: 16px;
}

/* Fundo claro do modal: ghost global (marketing/hero) deixa texto branco — alinhar ao primário da agenda */
.calendar-modal .btn.btn-ghost {
  border: 1px solid rgba(55, 114, 230, 0.42);
  color: #1d4ed8;
  background: rgba(255, 255, 255, 0.98);
  -webkit-text-fill-color: #1d4ed8;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.calendar-modal .btn.btn-ghost:hover:not(:disabled) {
  border-color: #2563eb;
  color: #1e3a8a;
  background: rgba(239, 246, 255, 0.96);
  -webkit-text-fill-color: #1e3a8a;
}

.calendar-modal .btn.btn-ghost:active:not(:disabled) {
  transform: translateY(1px);
}

.calendar-modal .btn.btn-ghost:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
}

.calendar-modal-feedback[data-tone="success"] {
  color: #2c6c44;
}

.calendar-modal-feedback[data-tone="warn"] {
  color: #965f1d;
}

.calendar-modal-wide {
  width: min(920px, calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
}

.calendar-stage-bulk-fallback {
  align-self: center;
  white-space: nowrap;
  border-radius: 14px;
  padding: 0.45rem 0.95rem;
  font-size: 0.84rem;
  font-weight: 700;
}

/* Dia/semana: botão "Agenda avançada" fica na topbar ao lado de "Novo compromisso". */
.calendar-admin-stage.calendar-stage-resource-layout .calendar-stage-bulk-fallback {
  display: none !important;
}

.calendar-bulk-assistant {
  margin: 0 0 0.75rem;
  padding: 0.75rem 0.95rem;
  border-radius: 16px;
  border: 1px solid rgba(209, 222, 242, 0.96);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 255, 0.94));
  color: #3a5577;
  font-size: 0.86rem;
  line-height: 1.45;
}

.calendar-bulk-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  padding: 0.55rem 0;
}

.calendar-bulk-chips-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7a8fa8;
  width: 100%;
}

.calendar-bulk-chip {
  font-size: 0.78rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}

.calendar-bulk-preview {
  border-radius: 18px;
  border: 1px solid rgba(209, 222, 242, 0.96);
  background: rgba(248, 251, 255, 0.96);
  padding: 0.75rem 0.85rem;
  max-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.calendar-bulk-preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.calendar-bulk-preview-head strong {
  font-size: 0.88rem;
  color: #223b63;
}

.calendar-bulk-preview-head span {
  font-size: 0.78rem;
  color: #6b8098;
  font-weight: 600;
}

.calendar-bulk-preview-list {
  margin: 0;
  padding: 0 0 0 1.1rem;
  overflow: auto;
  max-height: 160px;
  font-size: 0.82rem;
  color: #2f4a6e;
}

.calendar-bulk-preview-list li[data-tone='warn'] {
  color: #8a4b12;
}

/* ============================================================
 * Agenda avançada — modal premium (série recorrente)
 * ============================================================ */

.calendar-bulk-backdrop {
  padding: 1rem;
}

.calendar-bulk-modal {
  width: min(1120px, calc(100vw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-height: min(94vh, 920px);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 250, 252, 0.97) 100%);
  box-shadow:
    0 24px 48px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  overflow: hidden;
}

.calendar-bulk-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.35rem 0.85rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
}

.calendar-bulk-kicker {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3b82f6;
}

.calendar-bulk-title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.calendar-bulk-title-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.12), rgba(59, 130, 246, 0.06));
  color: #2563eb;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
}

.calendar-bulk-title {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.2;
}

.calendar-bulk-subtitle {
  margin: 0.28rem 0 0;
  font-size: 0.86rem;
  color: #64748b;
  line-height: 1.45;
  max-width: 52ch;
}

.calendar-bulk-close {
  flex: 0 0 auto;
}

.calendar-bulk-meta-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  padding: 0.85rem 1.35rem 0;
}

.calendar-bulk-meta-cards .calendar-modal-summary-card {
  border-radius: 14px;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.calendar-bulk-meta-cards .calendar-modal-summary-card span {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.calendar-bulk-meta-cards .calendar-modal-summary-card strong {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.82rem;
  color: #0f172a;
}

.calendar-bulk-assistant-banner {
  margin: 0.75rem 1.35rem 0;
  padding: 0.72rem 0.95rem;
  border-radius: 14px;
  border: 1px solid rgba(191, 219, 254, 0.85);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.95), rgba(248, 250, 252, 0.92));
  color: #334155;
  font-size: 0.82rem;
  line-height: 1.45;
}

.calendar-bulk-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.calendar-bulk-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(260px, 1fr);
  gap: 1rem;
  padding: 1rem 1.35rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.calendar-bulk-main {
  display: grid;
  gap: 0.85rem;
  align-content: start;
}

.calendar-bulk-card {
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.calendar-bulk-card-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.72rem 0.95rem;
  border-bottom: 1px solid rgba(241, 245, 249, 0.95);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.9));
}

.calendar-bulk-card-head strong {
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a;
}

.calendar-bulk-card-icon {
  font-size: 1rem;
  line-height: 1;
}

.calendar-bulk-card-body {
  padding: 0.85rem 0.95rem 0.95rem;
  display: grid;
  gap: 0.75rem;
}

.calendar-bulk-card-body-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.calendar-bulk-field-span-2 {
  grid-column: 1 / -1;
}

.calendar-bulk-field {
  display: grid;
  gap: 0.35rem;
}

.calendar-bulk-field-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
}

.calendar-bulk-input-wrap {
  position: relative;
  display: block;
}

.calendar-bulk-input-icon {
  position: absolute;
  left: 0.78rem;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.calendar-bulk-input,
.calendar-bulk-select {
  width: 100%;
  min-height: 44px;
  padding: 0.62rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.98);
  color: #0f172a;
  font: inherit;
  font-size: 0.86rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.calendar-bulk-field--icon .calendar-bulk-input,
.calendar-bulk-field--icon .calendar-bulk-input-wrap input {
  padding-left: 2.35rem;
}

.calendar-bulk-input-wrap .calendar-bulk-input,
.calendar-bulk-input-wrap input,
.calendar-bulk-input-wrap select {
  box-sizing: border-box;
}

.calendar-bulk-input:focus,
.calendar-bulk-select:focus,
.calendar-bulk-input-wrap input:focus,
.calendar-bulk-input-wrap select:focus {
  outline: 0;
  border-color: rgba(59, 130, 246, 0.65);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}

.calendar-bulk-hint {
  margin: 0;
  font-size: 0.74rem;
  color: #64748b;
  line-height: 1.4;
}

.calendar-bulk-customer-list-title {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.calendar-bulk-customer-list {
  max-height: 168px;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: rgba(248, 250, 252, 0.65);
}

.calendar-bulk-customer-picked {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(191, 219, 254, 0.9);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.95), rgba(248, 250, 252, 0.92));
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
}

.calendar-bulk-customer-picked-main {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.28rem;
}

.calendar-bulk-customer-picked-main strong {
  font-size: 0.94rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.calendar-bulk-customer-picked-phone {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(191, 219, 254, 0.85);
  background: rgba(255, 255, 255, 0.92);
  color: #475569;
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.calendar-bulk-customer-clear {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.calendar-bulk-manual-identity {
  display: grid;
  gap: 0.55rem;
  padding-top: 0.15rem;
}

.calendar-bulk-manual-identity-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}

.calendar-bulk-manual-identity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.calendar-bulk-chips {
  padding: 0 0.95rem 0.95rem;
}

.calendar-bulk-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.calendar-bulk-chip {
  border: 1px solid rgba(191, 219, 254, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: #1d4ed8;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.38rem 0.78rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.calendar-bulk-chip:hover {
  background: rgba(239, 246, 255, 0.98);
  border-color: rgba(59, 130, 246, 0.45);
  transform: translateY(-1px);
}

.calendar-bulk-sidebar {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  position: sticky;
  top: 0;
}

.calendar-bulk-side-card {
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  padding: 0.85rem 0.95rem;
}

.calendar-bulk-preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.calendar-bulk-preview-head strong {
  font-size: 0.9rem;
  color: #0f172a;
}

.calendar-bulk-preview-head span {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 700;
}

.calendar-bulk-preview-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.42rem;
}

.calendar-bulk-preview-timeline li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  color: #334155;
  font-weight: 600;
}

.calendar-bulk-preview-timeline li::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
  flex: 0 0 auto;
}

.calendar-bulk-preview-timeline li[data-tone='warn'] {
  color: #b45309;
}

.calendar-bulk-preview-timeline li[data-tone='warn']::before {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.calendar-bulk-preview-timeline li[data-tone='empty'] {
  color: #94a3b8;
  font-weight: 500;
}

.calendar-bulk-preview-timeline li[data-tone='empty']::before {
  background: #cbd5e1;
  box-shadow: none;
}

.calendar-bulk-preview-extra {
  margin: 0.55rem 0 0;
  font-size: 0.76rem;
  font-weight: 700;
  color: #64748b;
}

.calendar-bulk-side-card-head strong {
  font-size: 0.88rem;
  color: #0f172a;
}

.calendar-bulk-summary-list {
  margin: 0.65rem 0 0;
  display: grid;
  gap: 0.45rem;
}

.calendar-bulk-summary-list div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.78rem;
}

.calendar-bulk-summary-list dt {
  margin: 0;
  color: #64748b;
  font-weight: 600;
}

.calendar-bulk-summary-list dd {
  margin: 0;
  color: #0f172a;
  font-weight: 800;
  text-align: right;
}

.calendar-bulk-tip {
  display: flex;
  gap: 0.55rem;
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(191, 219, 254, 0.75);
  background: rgba(239, 246, 255, 0.65);
  color: #475569;
  font-size: 0.76rem;
  line-height: 1.45;
}

.calendar-bulk-tip p {
  margin: 0;
}

.calendar-bulk-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.35rem 1.1rem;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.04);
}

.calendar-bulk-footer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-left: auto;
}

.calendar-bulk-submit-btn {
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
}

@media (max-width: 960px) {
  .calendar-bulk-layout {
    grid-template-columns: 1fr;
  }

  .calendar-bulk-meta-cards {
    grid-template-columns: 1fr;
  }

  .calendar-bulk-card-body-grid {
    grid-template-columns: 1fr;
  }

  .calendar-bulk-manual-identity-grid {
    grid-template-columns: 1fr;
  }

  .calendar-bulk-sidebar {
    position: static;
  }
}

.calendar-modal-actions-wrap {
  flex-direction: column;
  align-items: stretch;
}

.calendar-modal-actions-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}

.calendar-modal-actions-wrap .calendar-modal-feedback {
  margin-right: 0;
  margin-bottom: 0.25rem;
}

.operator-config-shell {
  display: grid;
  gap: 1rem;
}

.operator-config-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.15rem 1.2rem;
  border-radius: 24px;
  border: 1px solid rgba(203, 218, 241, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 247, 255, 0.95));
}

.operator-config-summary {
  display: grid;
  gap: 0.34rem;
  max-width: 58ch;
}

.operator-config-summary strong {
  color: #22395f;
  font-size: 1.15rem;
}

.operator-config-summary span {
  color: #617792;
  font-size: 0.9rem;
  line-height: 1.55;
}

.operator-config-actions {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 0.7rem;
  align-items: end;
  width: min(100%, 720px);
}

.operator-config-toolbar-buttons,
.operator-config-card-actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  align-items: center;
}

.operator-config-toolbar-buttons {
  justify-content: flex-end;
}

.operator-config-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.operator-config-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.3rem;
  border-radius: 14px;
  background: rgba(237, 242, 251, 0.9);
}

.operator-config-tab {
  border: 0;
  border-radius: 10px;
  padding: 0.48rem 0.7rem;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  color: #5d6f95;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.operator-config-tab:hover {
  color: #36537c;
  background: rgba(255, 255, 255, 0.62);
}

.operator-config-tab.is-active {
  background: #fff;
  color: #1d4ed8;
  box-shadow: 0 4px 12px rgba(32, 59, 114, 0.12);
}

.operator-config-kpi,
.operator-config-card {
  border-radius: 22px;
  border: 1px solid rgba(203, 218, 241, 0.95);
  background: rgba(249, 251, 254, 0.96);
  box-shadow: 0 14px 28px rgba(54, 79, 120, 0.08);
}

.operator-config-card[hidden],
[data-operator-tab-target][hidden] {
  display: none !important;
}

.operator-config-kpi {
  padding: 1rem 1.05rem;
}

.operator-config-kpi span,
.operator-config-card-head span,
.operator-config-field span,
.operator-config-subgroup span {
  display: block;
  color: #617792;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.operator-config-kpi strong,
.operator-config-card-head strong {
  display: block;
  margin-top: 0.35rem;
  color: #213a63;
}

.operator-config-kpi p {
  margin: 0.4rem 0 0;
  color: #6d8098;
  font-size: 0.85rem;
  line-height: 1.5;
}

.operator-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.operator-config-card {
  padding: 1rem;
  display: grid;
  gap: 0.95rem;
}

.operator-config-card-branches {
  background: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(242, 247, 255, 0.98));
}

.operator-config-card-professionals {
  background: linear-gradient(180deg, rgba(249, 252, 255, 0.98), rgba(244, 248, 255, 0.98));
}

.operator-config-card-span-2 {
  grid-column: span 2;
}

[data-operator-tab-target] {
  grid-column: 1 / -1;
}

.operator-config-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.operator-config-card-note {
  margin: -0.2rem 0 0;
  color: #6f8299;
  font-size: 0.87rem;
  line-height: 1.5;
}

.operator-config-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.operator-config-form-grid-compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.operator-config-field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.operator-config-field-span-2 {
  grid-column: span 2;
}

.operator-config-field-compact {
  max-width: 220px;
}

.operator-config-field input,
.operator-config-field select {
  box-sizing: border-box;
  min-height: 46px;
  width: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: 16px;
  border: 1px solid rgba(194, 210, 234, 0.96);
  background: rgba(255, 255, 255, 0.98);
  color: #23406a;
  font: inherit;
}

.operator-config-hint {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.7rem;
  line-height: 1.3;
  color: #6f87a5;
  font-weight: 600;
}

.operator-config-field-inline {
  align-content: start;
}

.operator-config-field-inline input {
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  accent-color: #3772e6;
}

.operator-config-days,
.operator-config-choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.operator-config-days label,
.operator-config-choice-grid label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(198, 214, 239, 0.96);
  background: rgba(255, 255, 255, 0.96);
  color: #29456f;
  font-size: 0.82rem;
  font-weight: 700;
}

.operator-config-days-compact label {
  min-height: 34px;
  padding: 0.35rem 0.6rem;
}

.operator-config-days input,
.operator-config-choice-grid input {
  width: 16px;
  height: 16px;
  accent-color: #3772e6;
}

.operator-config-list {
  display: grid;
  gap: 0.85rem;
}

.operator-config-card-branches .operator-config-list {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  align-items: start;
}

.operator-config-card-professionals .operator-config-list {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  align-items: start;
}

.operator-config-row,
.operator-config-stack {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid rgba(212, 223, 240, 0.95);
  background: rgba(255, 255, 255, 0.98);
}

.operator-config-stack-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.operator-config-stack-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(214, 228, 247, 0.92);
  color: #23406a;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.operator-config-stack-badge-muted {
  background: rgba(235, 240, 247, 0.95);
  color: #6b7d93;
}

.operator-config-branch-card {
  gap: 0.9rem;
  padding: 1.1rem;
  border-radius: 22px;
  border-color: rgba(196, 212, 238, 0.95);
  box-shadow: 0 16px 26px rgba(57, 83, 124, 0.08);
}

.operator-config-branch-top {
  display: grid;
  gap: 0.45rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(222, 232, 246, 0.92);
}

.operator-config-professional-top {
  display: grid;
  gap: 0.45rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(222, 232, 246, 0.92);
}

.operator-config-branch-title {
  color: #1f3961;
  font-size: 1rem;
  line-height: 1.35;
}

.operator-config-branch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.42fr) minmax(150px, 0.42fr);
  gap: 0.85rem;
  align-items: end;
}

.operator-config-professional-card {
  gap: 0.9rem;
  padding: 1.1rem;
  border-radius: 22px;
  border-color: rgba(196, 212, 238, 0.95);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 250, 255, 0.98));
  box-shadow: 0 18px 34px rgba(57, 83, 124, 0.09);
}

.operator-config-professional-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  align-items: end;
}

.operator-config-professional-grid-compact {
  grid-template-columns: repeat(2, minmax(150px, 0.42fr));
}

.operator-config-professional-grid-primary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.operator-config-professional-identity {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.operator-config-professional-avatar {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #ffffff;
  background: linear-gradient(135deg, #1746a2 0%, #2563eb 52%, #22a958 100%);
  box-shadow: 0 14px 26px rgba(37, 99, 235, 0.24);
}

.operator-config-professional-copy {
  min-width: 0;
  display: grid;
  gap: 0.35rem;
}

.operator-config-professional-copy .operator-config-stack-head {
  justify-content: flex-start;
}

.operator-config-professional-sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

.operator-config-professional-panel {
  display: grid;
  min-width: 0;
  gap: 0.85rem;
  padding: 0.95rem;
  border: 1px solid rgba(214, 225, 242, 0.95);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(249, 252, 255, 0.98), rgba(241, 247, 255, 0.95));
}

.operator-config-professional-meta {
  display: grid;
  gap: 0.75rem;
}

.operator-config-professional-toggle {
  justify-content: space-between;
  min-height: 54px;
}

.operator-config-professional-actions {
  padding-top: 0.7rem;
  border-top: 1px solid rgba(222, 232, 246, 0.92);
}

.operator-config-professional-grid-primary .operator-config-field-span-2 {
  grid-column: 1 / -1;
}

.operator-config-professionals-card .operator-config-list {
  grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
}

.operator-config-professional-card .operator-config-empty-inline {
  min-height: 48px;
  align-items: center;
  white-space: normal;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.operator-config-professional-card .operator-config-subgroup > span {
  font-weight: 700;
  color: #23406a;
}

.operator-config-professional-card .operator-config-choice-grid,
.operator-config-professional-card .operator-config-days {
  gap: 0.5rem;
}

.operator-config-professional-card .operator-config-choice-grid label,
.operator-config-professional-card .operator-config-days label {
  max-width: 100%;
  min-height: 36px;
  padding: 0.35rem 0.7rem;
  font-size: 0.83rem;
}

.operator-config-professional-card,
.operator-config-professional-panel,
.operator-config-professional-card .operator-config-field,
.operator-config-professional-card .operator-config-choice-grid,
.operator-config-professional-card .operator-config-days,
.operator-config-professional-card .operator-config-subgroup {
  min-width: 0;
}

.operator-config-row {
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(120px, 0.6fr)) auto;
  align-items: end;
}

.operator-config-inline-actions {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding-top: 0.1rem;
}

.operator-config-toolbar .btn,
.operator-config-card .btn,
.operator-config-inline-actions .btn {
  border-width: 1px;
  font-weight: 700;
  min-height: 44px;
}

.operator-config-toolbar .btn-primary,
.operator-config-inline-actions .btn-primary {
  color: #f8fbff;
  background: linear-gradient(135deg, #1746a2 0%, #2563eb 55%, #1d4ed8 100%);
  border-color: rgba(24, 73, 170, 0.9);
  box-shadow: 0 14px 28px rgba(29, 78, 216, 0.28);
}

.operator-config-toolbar .btn-primary:hover,
.operator-config-inline-actions .btn-primary:hover {
  background: linear-gradient(135deg, #143d8f 0%, #1f57d6 55%, #1944be 100%);
  box-shadow: 0 18px 32px rgba(29, 78, 216, 0.34);
}

.operator-config-toolbar .btn-ghost,
.operator-config-card .btn-ghost,
.operator-config-inline-actions .btn-ghost {
  color: #23406a;
  background: linear-gradient(180deg, rgba(231, 239, 252, 0.98), rgba(214, 228, 247, 0.98));
  border-color: rgba(157, 182, 222, 0.95);
  box-shadow: 0 10px 18px rgba(72, 101, 149, 0.08);
}

.operator-config-toolbar .btn-ghost:hover,
.operator-config-card .btn-ghost:hover,
.operator-config-inline-actions .btn-ghost:hover {
  color: #163257;
  background: linear-gradient(180deg, rgba(218, 230, 249, 1), rgba(198, 215, 240, 1));
  border-color: rgba(122, 154, 205, 0.95);
  box-shadow: 0 14px 24px rgba(72, 101, 149, 0.14);
}

.operator-config-inline-actions .btn-ghost[data-branch-delete],
.operator-config-inline-actions .btn-ghost[data-professional-delete],
.operator-config-row .btn-ghost[data-service-remove] {
  color: #8f2332;
  background: linear-gradient(180deg, rgba(255, 239, 242, 0.98), rgba(252, 223, 229, 0.98));
  border-color: rgba(232, 170, 182, 0.95);
  box-shadow: 0 10px 18px rgba(177, 61, 89, 0.1);
}

.operator-config-inline-actions .btn-ghost[data-branch-delete]:hover,
.operator-config-inline-actions .btn-ghost[data-professional-delete]:hover,
.operator-config-row .btn-ghost[data-service-remove]:hover {
  color: #741a29;
  background: linear-gradient(180deg, rgba(255, 228, 234, 1), rgba(248, 205, 215, 1));
  border-color: rgba(222, 140, 159, 0.98);
  box-shadow: 0 14px 24px rgba(177, 61, 89, 0.16);
}

.operator-config-subgroup {
  display: grid;
  gap: 0.5rem;
}

.operator-config-empty,
.operator-config-empty-inline {
  color: #71849b;
  font-size: 0.84rem;
}

.operator-config-empty {
  padding: 0.85rem 0.9rem;
  border-radius: 14px;
  background: rgba(241, 245, 250, 0.96);
}

.operator-config-empty-inline {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}

.bot-overview-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 0 0 1rem;
}

.bot-overview-card {
  padding: 1rem 1.05rem;
  border-radius: 22px;
  border: 1px solid rgba(212, 220, 231, 0.95);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 246, 250, 0.96));
  box-shadow: 0 14px 28px rgba(79, 93, 113, 0.08);
}

.bot-overview-card span {
  display: block;
  color: #6a788c;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bot-overview-card strong {
  display: block;
  margin-top: 0.42rem;
  color: #2c394b;
  font-size: 1rem;
}

.bot-overview-card p {
  margin: 0.45rem 0 0;
  color: #6c7a8f;
  font-size: 0.86rem;
  line-height: 1.55;
}

.bot-admin-shell {
  display: grid;
  grid-template-columns: minmax(300px, 0.34fr) minmax(0, 1fr);
  gap: 1rem;
  min-height: clamp(980px, calc(100vh + 160px), 1320px);
  height: clamp(980px, calc(100vh + 160px), 1320px);
  max-height: clamp(980px, calc(100vh + 160px), 1320px);
  overflow: hidden;
  align-items: stretch;
}

.bot-admin-sidebar,
.bot-thread-card {
  border-radius: 24px;
  border: 1px solid rgba(198, 214, 239, 0.84);
  background: rgba(246, 250, 255, 0.92);
  overflow: hidden;
  min-height: 100%;
  height: 100%;
  max-height: 100%;
}

.bot-admin-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.bot-admin-toolbar {
  display: grid;
  gap: 0.55rem;
  padding: 1rem;
  border-bottom: 1px solid rgba(205, 218, 241, 0.9);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(241, 247, 255, 0.95));
}

.bot-field-label {
  color: #49658d;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bot-select,
.bot-search,
.bot-composer-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(183, 201, 232, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  color: #17345e;
  font: inherit;
}

.bot-select,
.bot-search {
  min-height: 48px;
  padding: 0.78rem 0.95rem;
}

.bot-select:focus,
.bot-search:focus,
.bot-composer-input:focus {
  outline: none;
  border-color: rgba(75, 129, 228, 0.82);
  box-shadow: 0 0 0 4px rgba(75, 129, 228, 0.12);
}

.bot-assistant-card,
.bot-sync-card {
  margin: 0.9rem 1rem 0;
  padding: 1rem;
  border-radius: 20px;
  border: 1px solid rgba(199, 216, 242, 0.9);
}

.bot-assistant-card {
  background: linear-gradient(145deg, rgba(53, 64, 79, 0.97), rgba(71, 84, 102, 0.97));
  color: #eef3fa;
}

.bot-assistant-card p {
  margin: 0.35rem 0 0;
  color: #d3dbe7;
  font-size: 0.88rem;
  line-height: 1.5;
}

.bot-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.bot-pill {
  border: 1px solid rgba(199, 209, 223, 0.28);
  border-radius: 999px;
  min-height: 40px;
  padding: 0.5rem 0.9rem;
  background: rgba(255, 255, 255, 0.12);
  color: #eef3fb;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.bot-pill:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bot-pill.is-active,
.bot-pill:hover:not(:disabled) {
  background: #d7dee7;
  color: #ffffff;
  border-color: rgba(215, 222, 231, 0.8);
}

.bot-sync-card {
  background: rgba(242, 247, 255, 0.96);
  color: #33537f;
  font-size: 0.88rem;
  line-height: 1.5;
}

.bot-sync-card[data-tone="success"] {
  background: rgba(92, 175, 109, 0.12);
  border-color: rgba(92, 175, 109, 0.28);
  color: #2d6a40;
}

.bot-sync-card[data-tone="error"] {
  background: rgba(199, 78, 78, 0.1);
  border-color: rgba(199, 78, 78, 0.24);
  color: #8f3131;
}

.bot-chat-list {
  display: grid;
  flex: 1 1 auto;
  gap: 0.6rem;
  padding: 1rem;
  overflow: auto;
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(246, 250, 255, 0.9), rgba(238, 245, 255, 0.75));
}

.bot-chat-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  width: 100%;
  border: 1px solid rgba(199, 216, 242, 0.86);
  border-radius: 18px;
  padding: 0.8rem;
  background: rgba(255, 255, 255, 0.92);
  color: #17345e;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.bot-chat-item:hover,
.bot-chat-item.is-active {
  transform: translateY(-1px);
  border-color: rgba(132, 149, 174, 0.4);
  box-shadow: 0 16px 28px rgba(83, 96, 117, 0.12);
}

.bot-chat-item.is-active {
  background: linear-gradient(145deg, rgba(99, 114, 137, 0.96), rgba(78, 93, 115, 0.96));
  color: #f7fbff;
}

.bot-chat-item.is-active .bot-chat-row strong,
.bot-chat-item.is-active .bot-chat-row time,
.bot-chat-item.is-active .bot-chat-subtitle,
.bot-chat-item.is-active .bot-chat-meta {
  color: rgba(243, 248, 255, 0.92);
}

.bot-chat-item.is-active .bot-chat-copy,
.bot-chat-item.is-active .bot-chat-copy *,
.bot-chat-item.is-active .bot-chat-badge {
  color: #ffffff;
}

.bot-chat-item.is-active .bot-chat-badge.is-open,
.bot-chat-item.is-active .bot-chat-badge.is-closed {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.bot-chat-avatar,
.bot-thread-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.bot-chat-copy {
  min-width: 0;
}

.bot-chat-row,
.bot-chat-meta,
.bot-bubble-meta,
.bot-thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.bot-chat-row strong,
.bot-thread-header strong {
  font-size: 0.95rem;
}

.bot-chat-row time,
.bot-chat-meta,
.bot-chat-subtitle,
.bot-thread-header p,
.bot-bubble-meta {
  color: #59759f;
  font-size: 0.8rem;
}

.bot-chat-subtitle {
  display: block;
  margin-top: 0.24rem;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bot-chat-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.bot-chat-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.bot-chat-badge.is-open {
  background: rgba(91, 176, 107, 0.12);
  color: #2b6b3f;
}

.bot-chat-badge.is-closed {
  background: rgba(202, 140, 58, 0.12);
  color: #925f1a;
}

.bot-thread-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(156, 170, 191, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(238, 242, 247, 0.96));
}

.bot-thread-empty,
.bot-thread-header,
.bot-thread-error,
.bot-composer {
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}

.bot-thread-empty {
  display: grid;
  place-content: center;
  min-height: 100%;
  text-align: center;
  color: #466286;
}

.bot-thread-empty p {
  max-width: 48ch;
  margin: 0.55rem auto 0;
  line-height: 1.6;
}

.bot-thread-content {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.bot-thread-header {
  min-height: 84px;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(199, 214, 239, 0.84);
  justify-content: flex-start;
  background: rgba(249, 251, 253, 0.96);
}

.bot-thread-header p {
  margin: 0.18rem 0 0;
  line-height: 1.45;
}

.bot-thread-debug {
  margin: 0 1.1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  background: rgba(238, 243, 249, 0.96);
  border: 1px dashed rgba(184, 194, 208, 0.92);
  color: #43536b;
  font-size: 0.78rem;
  line-height: 1.45;
}

.bot-thread-messages {
  display: block;
  overflow: auto;
  min-height: 0;
  height: 100%;
  padding: 1rem 1.1rem 0.8rem;
  background:
    radial-gradient(circle at top right, rgba(171, 184, 203, 0.1), transparent 18%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(236, 241, 246, 0.94));
}

.bot-day-separator {
  width: fit-content;
  margin: 0 auto 0.8rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(99, 114, 137, 0.9);
  color: #f6faff;
  font-size: 0.75rem;
  font-weight: 700;
}

.bot-bubble-row {
  display: flex;
  margin-bottom: 0.75rem;
}

.bot-bubble-row.is-outbound {
  justify-content: flex-end;
}

.bot-bubble {
  max-width: min(78%, 720px);
  padding: 0.85rem 0.95rem;
  border-radius: 20px;
  box-shadow: 0 12px 24px rgba(28, 57, 103, 0.08);
}

.bot-bubble.is-inbound {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(211, 220, 231, 0.92);
  color: #2e3b4d;
}

.bot-bubble.is-outbound {
  background: linear-gradient(145deg, rgba(108, 123, 146, 0.96), rgba(83, 97, 118, 0.96));
  color: #ffffff;
}

.bot-bubble.is-outbound .bot-bubble-meta {
  color: rgba(244, 248, 255, 0.92);
}

.bot-bubble.is-outbound,
.bot-bubble.is-outbound *,
.bot-bubble.is-outbound p,
.bot-bubble.is-outbound span,
.bot-bubble.is-outbound time {
  color: #ffffff;
}

.bot-bubble.is-outbound p {
  opacity: 1;
}

.bot-bubble p {
  margin: 0.28rem 0 0;
  line-height: 1.55;
}

.bot-thread-error {
  margin: 0 1.1rem 0.9rem;
  padding: 0.85rem 0.95rem;
  border-radius: 16px;
  background: rgba(199, 78, 78, 0.1);
  border: 1px solid rgba(199, 78, 78, 0.22);
  color: #8f3131;
  font-size: 0.86rem;
}

.bot-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-top: 1px solid rgba(199, 214, 239, 0.84);
  background: rgba(255, 255, 255, 0.78);
}

.bot-composer-input {
  min-height: 54px;
  padding: 0.9rem 1rem;
}

.bot-composer-send {
  min-width: 112px;
}

.bot-chat-empty {
  padding: 1rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px dashed rgba(184, 202, 232, 0.9);
  color: #577399;
  text-align: center;
}

/* ===================== WhatsApp Web Pro (mensagens) ===================== */
.whats-pro-card {
  --whats-green: #25d366;
  --whats-green-deep: #128c7e;
  --whats-green-soft: #d9fdd3;
  --whats-bg: #efeae2;
  --whats-bubble-out: #d9fdd3;
  --whats-border: rgba(206, 217, 232, 0.65);
  --whats-text: #111b21;
  --whats-muted: #667781;
  --whats-row-active: #f0f2f5;
  --whats-row-hover: #f5f6f6;
  --whats-shadow: 0 1px 1px rgba(11, 20, 26, 0.06);
}

.whats-pro-shell {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) minmax(280px, 320px);
  gap: 0;
  height: 100%;
  width: 100%;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}

.whats-pro-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  background: #ffffff;
  border-right: 1px solid #e9edef;
}

.whats-pro-sidebar-head {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.75rem 0.85rem;
  background: #f0f2f5;
  border-bottom: 1px solid #e9edef;
}

.whats-pro-sidebar-head-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.whats-pro-tenant {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 0.7rem;
  border: 1px solid #d8dbdf;
  border-radius: 10px;
  background: #ffffff;
  color: var(--whats-text);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
}

.whats-pro-tenant:focus {
  outline: none;
  border-color: var(--whats-green-deep);
  box-shadow: 0 0 0 3px rgba(18, 140, 126, 0.15);
}

.whats-pro-live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(37, 211, 102, 0.12);
  color: #0a7f2e;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.whats-pro-live[data-tone="warn"] {
  background: rgba(202, 140, 58, 0.14);
  color: #8b5a13;
}

.whats-pro-live[data-tone="error"] {
  background: rgba(199, 78, 78, 0.12);
  color: #8f3131;
}

.whats-pro-live[data-tone="success"] {
  background: rgba(37, 211, 102, 0.14);
  color: #0a7f2e;
}

.whats-pro-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--whats-green);
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.18);
}

.whats-pro-live[data-tone="warn"] .whats-pro-live-dot {
  background: #d59f4a;
  box-shadow: 0 0 0 3px rgba(213, 159, 74, 0.2);
}

.whats-pro-live[data-tone="error"] .whats-pro-live-dot {
  background: #c44;
  box-shadow: 0 0 0 3px rgba(204, 68, 68, 0.18);
}

.whats-pro-sidebar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
}

.whats-pro-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #54656f;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.whats-pro-icon-btn:hover:not(:disabled) {
  background: rgba(11, 20, 26, 0.06);
  color: #111b21;
}

.whats-pro-icon-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.whats-pro-icon-btn.is-active {
  background: rgba(37, 211, 102, 0.15);
  color: var(--whats-green-deep);
}

.whats-pro-icon-btn-primary {
  background: var(--whats-green);
  color: #ffffff;
}

.whats-pro-icon-btn-primary:hover:not(:disabled) {
  background: #1ebe5d;
  color: #ffffff;
}

.whats-pro-toggle-hint {
  margin: 0;
  padding: 0.5rem 0.95rem;
  color: var(--whats-muted);
  font-size: 0.74rem;
  background: #f7f9fb;
  border-bottom: 1px solid #e9edef;
}

.whats-pro-search-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid #e9edef;
  background: #ffffff;
}

.whats-pro-search-icon {
  position: absolute;
  left: 1.05rem;
  color: #667781;
  display: inline-flex;
  pointer-events: none;
}

.whats-pro-search {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 0.85rem 0 2.1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #f0f2f5;
  color: var(--whats-text);
  font: inherit;
  font-size: 0.85rem;
}

.whats-pro-search:focus {
  outline: none;
  border-color: rgba(18, 140, 126, 0.3);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(18, 140, 126, 0.1);
}

.whats-pro-search-filter {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
}

.whats-pro-filters {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid #e9edef;
  background: #ffffff;
  overflow-x: auto;
  scrollbar-width: none;
}

.whats-pro-filters::-webkit-scrollbar {
  display: none;
}

.whats-pro-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.75rem;
  height: 28px;
  border: 1px solid #e0e3e7;
  border-radius: 999px;
  background: #ffffff;
  color: #54656f;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.whats-pro-filter:hover {
  background: #f7f9fb;
}

.whats-pro-filter.is-active {
  background: rgba(37, 211, 102, 0.15);
  border-color: rgba(18, 140, 126, 0.35);
  color: var(--whats-green-deep);
}

.whats-pro-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: #e9edef;
  color: #4a5a64;
  font-size: 0.66rem;
  font-weight: 700;
}

.whats-pro-filter.is-active .whats-pro-filter-count {
  background: var(--whats-green);
  color: #ffffff;
}

.whats-pro-line-filter {
  display: grid;
  gap: 0.35rem;
  padding: 0.55rem 0.85rem 0.65rem;
  border-bottom: 1px solid #e9edef;
  background: #f7faf9;
}

.whats-pro-line-filter[hidden] {
  display: none !important;
}

.whats-pro-line-filter-label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #54656f;
  letter-spacing: 0.02em;
}

.whats-pro-line-filter-label select {
  height: 36px;
  padding: 0 0.65rem;
  border: 1px solid #d1d7db;
  border-radius: 8px;
  background: #ffffff;
  color: var(--whats-text);
  font: inherit;
  font-size: 0.82rem;
}

.whats-pro-line-filter-hint {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.35;
  color: #667781;
}

.whats-pro-sync {
  margin: 0;
  padding: 0.45rem 0.95rem;
  font-size: 0.74rem;
  color: var(--whats-muted);
  background: #f7f9fb;
  border-bottom: 1px solid #e9edef;
}

.whats-pro-sync[data-tone="success"] {
  color: #0a7f2e;
  background: rgba(37, 211, 102, 0.08);
}

.whats-pro-sync[data-tone="error"] {
  color: #8f3131;
  background: rgba(199, 78, 78, 0.08);
}

.whats-pro-chat-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: #ffffff;
  padding: 0.15rem 0;
}

.whats-pro-chat-list::-webkit-scrollbar {
  width: 6px;
}

.whats-pro-chat-list::-webkit-scrollbar-thumb {
  background: rgba(17, 27, 33, 0.18);
  border-radius: 999px;
}

.whats-pro-chat-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--whats-muted);
  font-size: 0.85rem;
}

.whats-pro-chat-item {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: none;
  border-bottom: 1px solid #f0f2f5;
  background: transparent;
  color: var(--whats-text);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.whats-pro-chat-item:hover {
  background: var(--whats-row-hover);
}

.whats-pro-chat-item.is-active {
  background: var(--whats-row-active);
}

.whats-pro-chat-item.is-active::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--whats-green);
}

.whats-pro-chat-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}

.whats-pro-chat-avatar.is-online::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--whats-green);
  box-shadow: 0 0 0 2px #ffffff;
}

.whats-pro-chat-copy {
  min-width: 0;
  display: grid;
  gap: 0.18rem;
}

.whats-pro-chat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  min-width: 0;
}

.whats-pro-chat-row strong {
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--whats-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}

.whats-pro-chat-time {
  flex: 0 0 auto;
  color: var(--whats-muted);
  font-size: 0.7rem;
  font-weight: 500;
}

.whats-pro-chat-item.has-unread .whats-pro-chat-time {
  color: var(--whats-green-deep);
  font-weight: 700;
}

.whats-pro-chat-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-width: 0;
}

.whats-pro-chat-preview {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  min-width: 0;
  flex: 1 1 auto;
  color: var(--whats-muted);
  font-size: 0.8rem;
}

.whats-pro-chat-preview > span:last-child {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.whats-pro-chat-preview-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: #8696a0;
}

.whats-pro-chat-preview-icon.is-read {
  color: #53bdeb;
}

.whats-pro-chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  color: var(--whats-green-deep);
  font-style: italic;
  font-weight: 600;
}

.whats-pro-chat-typing-dots {
  display: inline-flex;
  gap: 2px;
}

.whats-pro-chat-typing-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--whats-green-deep);
  animation: whatsTyping 1s infinite ease-in-out;
}

.whats-pro-chat-typing-dots span:nth-child(2) {
  animation-delay: 0.18s;
}

.whats-pro-chat-typing-dots span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes whatsTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-2px); opacity: 1; }
}

.whats-pro-chat-end {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
}

.whats-pro-chat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--whats-green);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
}

.whats-pro-chat-line {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 18px;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: rgba(30, 90, 168, 0.1);
  color: #1e5aa8;
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.whats-pro-chat-tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: rgba(37, 211, 102, 0.14);
  color: var(--whats-green-deep);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Center thread */
.whats-pro-thread {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><g fill='%23d2cdc1' opacity='0.55'><circle cx='28' cy='44' r='2'/><circle cx='96' cy='80' r='1.4'/><circle cx='160' cy='30' r='1.8'/><circle cx='244' cy='52' r='1.4'/><circle cx='292' cy='110' r='2'/><circle cx='52' cy='148' r='1.6'/><circle cx='124' cy='186' r='1.4'/><circle cx='196' cy='150' r='2'/><circle cx='264' cy='210' r='1.5'/><circle cx='32' cy='240' r='1.8'/><circle cx='112' cy='268' r='2'/><circle cx='184' cy='250' r='1.4'/><circle cx='248' cy='292' r='1.8'/><path d='M62 90 q4 -3 8 0 t8 0' stroke='%23c5beb1' stroke-width='1.2' fill='none' opacity='0.6'/><path d='M212 220 q4 -3 8 0 t8 0' stroke='%23c5beb1' stroke-width='1.2' fill='none' opacity='0.6'/></g></svg>") center / 320px 320px repeat,
    var(--whats-bg);
}

.whats-pro-thread-empty[hidden],
.whats-pro-thread-content[hidden],
.whats-pro-debug[hidden],
.whats-pro-thread-error[hidden],
.whats-pro-crm[hidden] {
  display: none !important;
}

.whats-pro-thread-empty {
  display: grid;
  place-items: center;
  text-align: center;
  height: 100%;
  flex: 1 1 auto;
  padding: 2rem;
  background: var(--whats-bg);
  color: #54656f;
}

.whats-pro-thread-empty-icon {
  display: inline-flex;
  width: 96px;
  height: 96px;
  margin: 0 auto 1rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff;
  color: var(--whats-green);
  box-shadow: 0 4px 14px rgba(11, 20, 26, 0.05);
}

.whats-pro-thread-empty strong {
  display: block;
  font-size: 1.05rem;
  color: var(--whats-text);
  margin-bottom: 0.45rem;
}

.whats-pro-thread-empty p {
  margin: 0 auto;
  max-width: 32ch;
  font-size: 0.86rem;
  line-height: 1.55;
}

.whats-pro-thread-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
}

.whats-pro-thread-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  background: #f0f2f5;
  border-bottom: 1px solid #e9edef;
  min-height: 56px;
  flex: 0 0 auto;
}

.whats-pro-engage-disposition-wrap {
  flex: 0 0 auto;
}

.whats-pro-engage-disposition {
  padding: 0.65rem 0.85rem 0.75rem;
  background: linear-gradient(180deg, rgba(217, 253, 211, 0.72), rgba(217, 253, 211, 0.38));
  border-bottom: 1px solid rgba(18, 140, 126, 0.22);
  color: var(--whats-text);
}

.whats-pro-engage-disposition.is-warning {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.14), rgba(251, 191, 36, 0.08));
  border-bottom-color: rgba(251, 191, 36, 0.35);
}

.whats-pro-engage-disposition-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.6rem;
  margin-bottom: 0.35rem;
}

.whats-pro-engage-disposition-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--whats-green-deep);
}

.whats-pro-engage-disposition-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid rgba(18, 140, 126, 0.2);
  color: var(--whats-green-deep);
}

.whats-pro-engage-disposition-meta,
.whats-pro-engage-disposition-reason,
.whats-pro-engage-disposition-warning,
.whats-pro-engage-disposition-loading {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--whats-muted);
}

.whats-pro-engage-disposition-reason {
  color: var(--whats-muted);
}

.whats-pro-engage-disposition-warning {
  color: #8b5a13;
}

.whats-pro-engage-disposition-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.whats-pro-engage-disposition-btn {
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(11, 20, 26, 0.04);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.whats-pro-engage-disposition-btn.is-defer {
  border: 1px solid rgba(18, 140, 126, 0.25);
  background: #ffffff;
  color: var(--whats-green-deep);
}

.whats-pro-engage-disposition-btn.is-defer:hover:not(:disabled) {
  background: rgba(37, 211, 102, 0.1);
  border-color: var(--whats-green-deep);
  color: #0d6e63;
}

.whats-pro-engage-disposition-btn.is-lost {
  border: 1px solid rgba(199, 78, 78, 0.35);
  background: #ffffff;
  color: #8f3131;
}

.whats-pro-engage-disposition-btn.is-lost:hover:not(:disabled) {
  background: rgba(199, 78, 78, 0.08);
  border-color: rgba(199, 78, 78, 0.5);
}

.whats-pro-engage-disposition-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.whats-pro-engage-disposition-note input {
  width: 100%;
  border: 1px solid #d8dbdf;
  border-radius: 10px;
  padding: 0.42rem 0.55rem;
  font-size: 0.78rem;
  background: #ffffff;
  color: var(--whats-text);
}

.whats-pro-engage-disposition-note input::placeholder {
  color: var(--whats-muted);
}

.whats-pro-engage-disposition-note input:focus {
  outline: none;
  border-color: var(--whats-green-deep);
  box-shadow: 0 0 0 3px rgba(18, 140, 126, 0.15);
}

.whats-pro-engage-disposition-error {
  margin: 0.4rem 0 0;
  font-size: 0.74rem;
  color: #8f3131;
}

.whats-pro-thread-back {
  display: none;
}

.whats-pro-thread-id {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 1 1 auto;
  min-width: 0;
}

.whats-pro-thread-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.82rem;
  flex: 0 0 auto;
}

.whats-pro-thread-avatar.is-online::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--whats-green);
  box-shadow: 0 0 0 2px #f0f2f5;
}

.whats-pro-thread-id-copy {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.whats-pro-thread-id-copy strong {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--whats-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.whats-pro-thread-meta {
  font-size: 0.75rem;
  color: var(--whats-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.whats-pro-thread-line {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #1e5aa8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.whats-pro-thread-line[hidden] {
  display: none !important;
}

.whats-pro-thread-tags {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.whats-pro-thread-status {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  height: 24px;
  padding: 0 0.55rem;
  border-radius: 999px;
  background: rgba(37, 211, 102, 0.14);
  color: var(--whats-green-deep);
  font-size: 0.72rem;
  font-weight: 700;
}

.whats-pro-thread-status[data-tone="warn"] {
  background: rgba(202, 140, 58, 0.18);
  color: #8b5a13;
}

.whats-pro-thread-status[data-tone="error"] {
  background: rgba(199, 78, 78, 0.16);
  color: #8f3131;
}

.whats-pro-thread-window {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  height: 24px;
  padding: 0 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.whats-pro-thread-window svg {
  flex: 0 0 auto;
}

.whats-pro-thread-window[data-tone="open"] {
  background: rgba(37, 211, 102, 0.14);
  color: var(--whats-green-deep);
}

.whats-pro-thread-window[data-tone="closing"] {
  background: rgba(202, 140, 58, 0.18);
  color: #8b5a13;
}

.whats-pro-thread-window[data-tone="closed"] {
  background: rgba(199, 78, 78, 0.14);
  color: #8f3131;
}

.whats-pro-window-warning {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.85rem;
  background: linear-gradient(180deg, rgba(199, 78, 78, 0.06), rgba(199, 78, 78, 0.12));
  border-top: 1px solid rgba(199, 78, 78, 0.2);
  flex: 0 0 auto;
}

.whats-pro-window-warning[data-tone="closing"] {
  background: linear-gradient(180deg, rgba(202, 140, 58, 0.08), rgba(202, 140, 58, 0.14));
  border-top-color: rgba(202, 140, 58, 0.24);
}

.whats-pro-window-warning[hidden] {
  display: none !important;
}

.whats-pro-window-warning-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(199, 78, 78, 0.14);
  color: #8f3131;
}

.whats-pro-window-warning[data-tone="closing"] .whats-pro-window-warning-icon {
  background: rgba(202, 140, 58, 0.18);
  color: #8b5a13;
}

.whats-pro-window-warning-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.whats-pro-window-warning-copy strong {
  display: block;
  font-size: 0.82rem;
  color: #8f3131;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.whats-pro-window-warning[data-tone="closing"] .whats-pro-window-warning-copy strong {
  color: #8b5a13;
}

.whats-pro-window-warning-copy p {
  margin: 0.05rem 0 0;
  font-size: 0.74rem;
  color: #6f7e88;
  line-height: 1.4;
}

.whats-pro-window-template-btn {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 0.85rem;
  border: 1px solid rgba(199, 78, 78, 0.4);
  border-radius: 999px;
  background: #ffffff;
  color: #8f3131;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.whats-pro-window-template-btn:hover {
  background: rgba(199, 78, 78, 0.08);
}

.whats-pro-window-warning[data-tone="closing"] .whats-pro-window-template-btn {
  border-color: rgba(202, 140, 58, 0.45);
  color: #8b5a13;
}

.whats-pro-window-warning[data-tone="closing"] .whats-pro-window-template-btn:hover {
  background: rgba(202, 140, 58, 0.1);
}

.whats-pro-composer.is-locked {
  opacity: 0.85;
}

.whats-pro-composer.is-locked .whats-pro-composer-input {
  background: #e9edef;
  color: #8696a0;
  cursor: not-allowed;
}

.whats-pro-composer.is-locked .whats-pro-composer-input::placeholder {
  color: #8696a0;
}

.whats-pro-composer.is-locked .whats-pro-composer-icon,
.whats-pro-composer.is-locked .whats-pro-composer-send {
  opacity: 0.45;
  pointer-events: none;
}

.whats-pro-chat-window {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0 0.32rem;
  height: 16px;
  border-radius: 999px;
}

.whats-pro-chat-window svg {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
}

.whats-pro-chat-window[data-tone="closing"] {
  background: rgba(202, 140, 58, 0.16);
  color: #8b5a13;
}

.whats-pro-chat-window[data-tone="closed"] {
  background: rgba(199, 78, 78, 0.14);
  color: #8f3131;
}

.whats-pro-crm-window-state {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}

.whats-pro-crm-window-state[data-tone="open"] {
  color: var(--whats-green-deep);
}

.whats-pro-crm-window-state[data-tone="closing"] {
  color: #8b5a13;
}

.whats-pro-crm-window-state[data-tone="closed"] {
  color: #8f3131;
}

.whats-pro-thread-actions {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex: 0 0 auto;
}

.whats-pro-debug {
  margin: 0.5rem 0.85rem 0;
  padding: 0.45rem 0.7rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1px dashed rgba(17, 27, 33, 0.18);
  border-radius: 10px;
  color: #4a5a64;
  font-size: 0.72rem;
  line-height: 1.45;
}

.whats-pro-messages {
  position: relative;
  overflow: auto;
  padding: 0.85rem 6.5%;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  min-height: 0;
  flex: 1 1 auto;
}

.whats-pro-messages::before {
  content: "";
  display: block;
  flex: 1 1 auto;
  min-height: 0;
}

.whats-pro-messages::-webkit-scrollbar {
  width: 6px;
}

.whats-pro-messages::-webkit-scrollbar-thumb {
  background: rgba(17, 27, 33, 0.2);
  border-radius: 999px;
}

.whats-pro-day-separator {
  display: inline-flex;
  align-self: center;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #54656f;
  font-size: 0.72rem;
  font-weight: 600;
  box-shadow: var(--whats-shadow);
  margin: 0.4rem auto 0.55rem;
}

.whats-pro-bubble-row {
  display: flex;
  width: 100%;
  margin: 0;
}

.whats-pro-bubble-row.is-outbound {
  justify-content: flex-end;
}

.whats-pro-bubble-row.is-inbound {
  justify-content: flex-start;
  position: relative;
}

.whats-pro-bubble {
  position: relative;
  max-width: min(70%, 540px);
  padding: 0.4rem 0.7rem 0.5rem;
  border-radius: 8px;
  box-shadow: var(--whats-shadow);
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--whats-text);
}

.whats-pro-bubble-row.is-inbound .whats-pro-bubble {
  background: #ffffff;
  border-top-left-radius: 0;
}

.whats-pro-bubble-row.is-outbound .whats-pro-bubble {
  background: var(--whats-bubble-out);
  border-top-right-radius: 0;
}

.whats-pro-bubble-author {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--whats-green-deep);
  margin-bottom: 0.15rem;
}

.whats-pro-bubble-row.is-inbound .whats-pro-bubble-author {
  color: #6a3ad1;
}

.whats-pro-bubble-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

.whats-pro-bubble-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.18rem;
  color: var(--whats-muted);
  font-size: 0.66rem;
}

.whats-pro-bubble-row.is-outbound .whats-pro-bubble-foot {
  color: #6b8a78;
}

.whats-pro-bubble-foot svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: #8696a0;
}

.whats-pro-bubble-foot.is-read svg {
  color: #53bdeb;
}

.whats-pro-thread-error {
  margin: 0 0.85rem 0.65rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: rgba(199, 78, 78, 0.1);
  border: 1px solid rgba(199, 78, 78, 0.2);
  color: #8f3131;
  font-size: 0.82rem;
}

.whats-pro-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.55rem 0.85rem 0.55rem;
  background: rgba(255, 255, 255, 0.6);
  border-top: 1px solid #e6e9eb;
  backdrop-filter: blur(2px);
  flex: 0 0 auto;
}

.whats-pro-quick[hidden] {
  display: none !important;
}

.whats-pro-quick-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 30px;
  padding: 0 0.7rem;
  border: 1px solid rgba(18, 140, 126, 0.25);
  border-radius: 999px;
  background: #ffffff;
  color: var(--whats-green-deep);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(11, 20, 26, 0.04);
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.whats-pro-quick-pill:hover {
  background: rgba(37, 211, 102, 0.1);
  color: #0d6e63;
}

.whats-pro-composer {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.85rem 0.7rem;
  background: #f0f2f5;
  border-top: 1px solid #e9edef;
  flex: 0 0 auto;
  position: relative;
}

.whats-pro-composer.is-locked .whats-pro-composer-icon,
.whats-pro-composer.is-locked .whats-pro-composer-send {
  opacity: 0.45;
  pointer-events: none;
}

.whats-pro-composer-icon {
  width: 38px;
  height: 38px;
  color: #54656f;
  background: transparent;
}

.whats-pro-composer-icon:hover:not(:disabled) {
  background: rgba(11, 20, 26, 0.06);
  color: var(--whats-text);
}

.whats-pro-composer-input {
  width: 100%;
  height: 40px;
  padding: 0 0.95rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #ffffff;
  color: var(--whats-text);
  font: inherit;
  font-size: 0.92rem;
  box-shadow: 0 1px 1px rgba(11, 20, 26, 0.05);
}

.whats-pro-composer-input:focus {
  outline: none;
  border-color: rgba(18, 140, 126, 0.3);
  box-shadow: 0 0 0 3px rgba(18, 140, 126, 0.12);
}

.whats-pro-composer-send {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 40px;
  padding: 0 0.95rem;
  border: none;
  border-radius: 999px;
  background: var(--whats-green-deep);
  color: #ffffff;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(18, 140, 126, 0.3);
  transition: background 0.15s ease, transform 0.1s ease;
}

.whats-pro-composer-send:hover:not(:disabled) {
  background: #0e766c;
}

.whats-pro-composer-send:active:not(:disabled) {
  transform: scale(0.98);
}

.whats-pro-composer-send:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.whats-pro-composer-send svg {
  width: 16px;
  height: 16px;
}

.whats-pro-composer-icon.is-recording {
  color: #d64545;
  animation: whats-pro-pulse 1.2s ease-in-out infinite;
}

@keyframes whats-pro-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.whats-pro-emoji-panel {
  position: absolute;
  left: 0.85rem;
  bottom: calc(100% + 0.35rem);
  z-index: 12;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
  width: min(280px, calc(100% - 1.7rem));
  padding: 0.55rem;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e9edef;
  box-shadow: 0 8px 24px rgba(11, 20, 26, 0.12);
}

.whats-pro-emoji-panel[hidden] {
  display: none;
}

.whats-pro-emoji-btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 1.15rem;
  cursor: pointer;
}

.whats-pro-emoji-btn:hover {
  background: rgba(11, 20, 26, 0.06);
}

.whats-pro-attach-preview,
.whats-pro-audio-preview {
  display: grid;
  gap: 0.55rem;
  padding: 0.65rem 0.85rem;
  background: #f7f8fa;
  border-top: 1px solid #e9edef;
}

.whats-pro-attach-preview[hidden],
.whats-pro-audio-preview[hidden] {
  display: none;
}

.whats-pro-attach-preview-main,
.whats-pro-audio-preview-main {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.whats-pro-attach-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e9edef;
}

.whats-pro-attach-file-icon {
  font-size: 1.6rem;
}

.whats-pro-attach-meta {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.whats-pro-attach-meta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whats-pro-attach-meta span {
  color: #667781;
  font-size: 0.82rem;
}

.whats-pro-attach-caption {
  display: grid;
  gap: 0.25rem;
  font-size: 0.82rem;
  color: #54656f;
}

.whats-pro-attach-caption input {
  height: 36px;
  padding: 0 0.75rem;
  border: 1px solid #e9edef;
  border-radius: 8px;
  font: inherit;
}

.whats-pro-attach-preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
}

.whats-pro-attach-btn {
  height: 34px;
  padding: 0 0.85rem;
  border-radius: 999px;
  border: 1px solid #d1d7db;
  background: #ffffff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.whats-pro-attach-btn.is-primary {
  border-color: transparent;
  background: var(--whats-green-deep);
  color: #ffffff;
}

.whats-pro-attach-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.whats-pro-audio-preview-label {
  color: #54656f;
  font-size: 0.88rem;
}

.whats-pro-audio-preview-main audio {
  width: min(100%, 320px);
}

.whats-pro-bubble-media {
  margin-top: 0.15rem;
  border-radius: 8px;
  overflow: hidden;
}

.whats-pro-media-image,
.whats-pro-media-video {
  display: block;
  max-width: min(280px, 100%);
  max-height: 220px;
  border-radius: 8px;
}

.whats-pro-media-audio {
  width: min(100%, 260px);
}

.whats-pro-media-loading {
  display: block;
  font-size: 0.82rem;
  color: #667781;
}

.whats-pro-media-file-name {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: #667781;
  word-break: break-word;
}

.whats-pro-media-doc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: rgba(11, 20, 26, 0.04);
}

.whats-pro-media-doc-name {
  flex: 1 1 120px;
  font-size: 0.86rem;
  word-break: break-word;
}

.whats-pro-media-doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.whats-pro-media-doc-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: #027eb5;
  text-decoration: none;
}

.whats-pro-media-doc-link:hover {
  text-decoration: underline;
}

.whats-pro-bubble-contact {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  background: rgba(11, 20, 26, 0.04);
}

.whats-pro-bubble-contact strong {
  display: block;
}

.whats-pro-bubble-contact span {
  display: block;
  font-size: 0.82rem;
  color: #667781;
}

.whats-pro-bubble-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.whats-pro-reaction-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(11, 20, 26, 0.08);
  font-size: 0.9rem;
}

.whats-pro-react-bar {
  display: flex;
  gap: 0.15rem;
  align-self: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.whats-pro-bubble-row.is-inbound:hover .whats-pro-react-bar,
.whats-pro-bubble-row.is-inbound:focus-within .whats-pro-react-bar {
  opacity: 1;
  pointer-events: auto;
}

.whats-pro-react-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(11, 20, 26, 0.12);
  cursor: pointer;
  font-size: 0.95rem;
}

.whats-pro-react-btn:hover {
  transform: scale(1.08);
}

.whats-pro-contact-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(11, 20, 26, 0.45);
}

.whats-pro-contact-modal-backdrop[hidden] {
  display: none;
}

.whats-pro-contact-modal {
  width: min(420px, 100%);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 16px 48px rgba(11, 20, 26, 0.2);
  overflow: hidden;
}

.whats-pro-contact-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #e9edef;
}

.whats-pro-contact-form {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
}

.whats-pro-contact-form label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: #54656f;
}

.whats-pro-contact-form input,
.whats-pro-contact-form select {
  height: 38px;
  padding: 0 0.75rem;
  border: 1px solid #e9edef;
  border-radius: 8px;
  font: inherit;
  color: var(--whats-text);
}

/* Right CRM */
.whats-pro-crm {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  height: 100%;
  overflow: auto;
  background: #ffffff;
  border-left: 1px solid #e9edef;
}

.whats-pro-crm[hidden] {
  display: none;
}

.whats-pro-crm-head {
  display: grid;
  gap: 0.4rem;
  padding: 1rem 1rem 0.85rem;
  text-align: center;
  background: linear-gradient(180deg, #f7faf9, #ffffff);
  border-bottom: 1px solid #e9edef;
}

.whats-pro-crm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0.35rem auto 0.25rem;
  border-radius: 50%;
  color: #ffffff;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
}

.whats-pro-crm-head strong {
  display: block;
  font-size: 1rem;
  color: var(--whats-text);
}

.whats-pro-crm-head span {
  font-size: 0.78rem;
  color: var(--whats-muted);
}

.whats-pro-crm-section {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid #f0f2f5;
}

.whats-pro-crm-section:last-child {
  border-bottom: none;
}

.whats-pro-crm-section h4 {
  margin: 0 0 0.55rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5b6b76;
}

.whats-pro-crm-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.whats-pro-crm-kpis article {
  padding: 0.55rem 0.65rem;
  border: 1px solid #eef0f2;
  border-radius: 12px;
  background: #fbfcfd;
}

.whats-pro-crm-kpis article span {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6f7e88;
}

.whats-pro-crm-kpis article strong {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.92rem;
  color: var(--whats-text);
}

.whats-pro-crm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.whats-pro-crm-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 0.6rem;
  border-radius: 999px;
  background: #f0f2f5;
  color: #4a5a64;
  font-size: 0.72rem;
  font-weight: 700;
}

.whats-pro-crm-tag-green {
  background: rgba(37, 211, 102, 0.14);
  color: var(--whats-green-deep);
}

.whats-pro-crm-tag-blue {
  background: rgba(83, 189, 235, 0.16);
  color: #196e8c;
}

.whats-pro-crm-notes {
  margin: 0;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  background: #fbfcfd;
  border: 1px dashed #e0e3e7;
  color: var(--whats-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.whats-pro-crm-actions {
  display: grid;
  gap: 0.4rem;
}

.whats-pro-crm-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid #e0e3e7;
  border-radius: 12px;
  background: #ffffff;
  color: #1f3f79;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.whats-pro-crm-action:hover {
  background: #f7f9fb;
  border-color: rgba(18, 140, 126, 0.3);
  color: var(--whats-green-deep);
}

.whats-pro-crm-action svg {
  color: var(--whats-green-deep);
}

@media (max-width: 1180px) {
  .whats-pro-shell {
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  }
  .whats-pro-crm {
    display: none;
  }
}

@media (max-width: 820px) {
  .admin-page[data-admin-panel-active="bot-whatsapp"] .admin-panel[data-admin-panel="bot-whatsapp"] {
    min-height: calc(100vh - 72px);
    max-height: calc(100vh - 72px);
    height: calc(100vh - 72px);
  }
  .whats-pro-shell {
    grid-template-columns: 1fr;
  }
  .whats-pro-shell.is-thread-open .whats-pro-sidebar {
    display: none;
  }
  .whats-pro-shell:not(.is-thread-open) .whats-pro-thread {
    display: none;
  }
  .whats-pro-thread-back {
    display: inline-flex;
  }
  .whats-pro-thread-empty {
    display: none;
  }
}

.admin-page[data-admin-panel-active="seguranca"] .admin-hero,
.admin-page[data-admin-panel-active="auditoria"] .admin-hero {
  display: none;
}

.admin-page[data-admin-panel-active="agenda-rapida"] .admin-hero {
  display: none;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .admin-panel[data-admin-panel="configuracoes-operador"],
.admin-page[data-admin-panel-active="informacoes-adicionais"] .admin-panel[data-admin-panel="informacoes-adicionais"] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 1.15rem;
}

.admin-page[data-admin-panel-active="calendario"] .admin-panel[data-admin-panel="calendario"] {
  min-height: calc(100vh - 128px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 1.15rem;
}

/* Mesmo ritmo do Cockpit (dashboards): sem forçar altura mínima na main — evita “hero” e faixa branca esticados. */
.admin-page[data-admin-panel-active="calendario"] .admin-main {
  min-height: 0;
  padding-bottom: 0.35rem;
  overflow: hidden;
}

.admin-page[data-admin-panel-active="calendario"] .admin-panel[data-admin-panel="calendario"] {
  min-height: 0;
  height: 100%;
}

/* Enquanto a agenda ainda não renderizou: não estica o painel no viewport (evita faixa branca enorme + “resize” ao carregar API). */
.admin-page[data-admin-panel-active="calendario"] .admin-panel[data-admin-panel="calendario"]:has(#adminCalendarRoot:not([data-calendar-shell-ready="true"])) {
  grid-template-rows: auto auto;
  height: auto;
  min-height: 0;
}

.admin-page[data-admin-panel-active="calendario"] .admin-panel[data-admin-panel="calendario"]:has(#adminCalendarRoot:not([data-calendar-shell-ready="true"])) #adminCalendarRoot,
.admin-page[data-admin-panel-active="calendario"] .admin-panel[data-admin-panel="calendario"]:has(#adminCalendarRoot:not([data-calendar-shell-ready="true"])) .calendar-admin-body,
.admin-page[data-admin-panel-active="calendario"] .admin-panel[data-admin-panel="calendario"]:has(#adminCalendarRoot:not([data-calendar-shell-ready="true"])) .calendar-admin-stage {
  height: auto;
  min-height: 0;
}

.admin-page[data-admin-panel-active="calendario"] .admin-content {
  min-height: 0;
  height: 100%;
  padding-top: 0.55rem;
  align-content: start;
}

.admin-page[data-admin-panel-active="calendario"] .admin-shell {
  grid-template-columns: 272px minmax(0, 1fr);
}

.admin-page[data-admin-sidebar="collapsed"][data-admin-panel-active="calendario"] .admin-shell {
  grid-template-columns: 92px minmax(0, 1fr);
}

.admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot,
.admin-page[data-admin-panel-active="calendario"] .calendar-admin-body,
.admin-page[data-admin-panel-active="calendario"] .calendar-admin-stage {
  min-height: 0;
  height: 100%;
}

.admin-page[data-admin-panel-active="calendario"] .calendar-admin-stage {
  max-height: none;
}

.admin-page[data-admin-panel-active="calendario"] .calendar-admin-canvas {
  height: 100%;
  max-height: none;
}

/* Mantém o layout desktop original (canvas cresce com a timeline e a página rola).
   O autoscroll para a linha "agora" é feito via JS em window.scrollTo. */
.admin-page[data-admin-panel-active="calendario"] .calendar-admin-canvas[data-calendar-view="day"] {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.admin-page[data-admin-panel-active="calendario"] .calendar-admin-canvas[data-calendar-view="week"] {
  overflow-x: hidden;
  overflow-y: auto;
}

.admin-page[data-admin-panel-active="calendario"] .calendar-admin-canvas[data-calendar-view="day"] .calendar-mobile-resource-day:not(.calendar-mobile-resource-week) {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

.admin-page[data-admin-panel-active="calendario"] .calendar-admin-canvas[data-calendar-view="day"] .calendar-mobile-resource-agenda-scroll {
  flex: 1 1 auto;
  min-height: 0;
}

/* Evita barra horizontal "no meio" do body: o scroll horizontal da agenda já fica
   no rodapé do hscroll interno; o body cresce com a timeline e a página rola. */
.admin-page[data-admin-panel-active="calendario"] .calendar-mobile-resource-agenda-body {
  overflow-y: visible;
}

/* Agenda recurso em tablets (≥768 e <1200): mesma árvore que desktop largo, mas viewport mais baixo.
   Evita faixa branca / miolo cortado — canvas volta a rolar e o eixo não “alonga” a coluna à direita. */
@media (min-width: 768px) and (max-width: 1399px) {
  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot:not([data-calendar-layout="mobile"]) .calendar-admin-canvas[data-calendar-view="day"] {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot:not([data-calendar-layout="mobile"]) .calendar-mobile-resource-agenda-scroll {
    overflow-y: visible;
    flex: 1 1 auto;
    min-height: 0;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot:not([data-calendar-layout="mobile"]) .calendar-mobile-resource-agenda-body {
    align-items: flex-start;
    overflow-y: visible;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot:not([data-calendar-layout="mobile"]) .calendar-mobile-resource-agenda-body > .calendar-mobile-resource-hscroll {
    align-self: flex-start;
    overflow-y: visible;
    max-height: none;
  }
}

.admin-page[data-admin-panel-active="calendario"] .admin-panel[data-admin-panel="calendario"].card {
  padding: 0.38rem 0.8rem 0.72rem;
}

.admin-page[data-admin-panel-active="calendario"] .calendar-admin-stage > .calendar-stage-head {
  padding: 0.38rem 0.62rem;
  gap: 0.48rem;
  row-gap: 0.38rem;
}

.admin-page[data-admin-panel-active="calendario"] .calendar-admin-stage > .calendar-stage-head span {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}

.admin-page[data-admin-panel-active="calendario"] .calendar-admin-stage > .calendar-stage-head strong {
  margin-top: 0.12rem;
  font-size: clamp(0.88rem, 1vw, 1rem);
  line-height: 1.22;
}

.admin-page[data-admin-panel-active="calendario"] .calendar-admin-stage > .calendar-stage-head .calendar-stage-head-actions {
  gap: 0.45rem 0.65rem;
}

.admin-page[data-admin-panel-active="calendario"] .calendar-admin-stage > .calendar-stage-head .calendar-stage-nav-group {
  gap: 0.45rem 0.55rem;
}

.admin-page[data-admin-panel-active="calendario"] .calendar-admin-stage > .calendar-stage-head .calendar-stage-nav {
  padding: 0.22rem;
  gap: 0.38rem;
}

.admin-page[data-admin-panel-active="calendario"] .calendar-admin-stage > .calendar-stage-head .calendar-stage-nav-button {
  width: 34px;
  height: 34px;
  font-size: 1.12rem;
  border-radius: 11px;
}

.admin-page[data-admin-panel-active="calendario"] .calendar-admin-stage > .calendar-stage-head .calendar-stage-nav-button-today {
  min-width: 58px;
  padding: 0 0.62rem;
  font-size: 0.76rem;
}

.admin-page[data-admin-panel-active="calendario"] .calendar-admin-stage > .calendar-stage-head .calendar-stage-legend {
  gap: 0.42rem 0.55rem;
}

.admin-page[data-admin-panel-active="calendario"] .calendar-admin-stage > .calendar-stage-head .calendar-stage-legend span,
.admin-page[data-admin-panel-active="calendario"] .calendar-admin-stage > .calendar-stage-head .calendar-stage-legend-filter {
  font-size: 0.68rem;
  gap: 0.28rem;
}

.admin-page[data-admin-panel-active="calendario"] .calendar-admin-stage > .calendar-stage-head .calendar-stage-bulk-fallback {
  padding: 0.34rem 0.72rem;
  font-size: 0.74rem;
}

@media (min-width: 769px) {
  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-resource-day:not(.calendar-mobile-resource-week) {
    --resource-topbar-height: 52px;
    --resource-week-strip-height: 46px;
    gap: 0.38rem;
    padding: 0.38rem 0.42rem 0.48rem;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-resource-week {
    gap: 0.38rem;
    padding: 0.38rem 0.42rem 0.48rem;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-resource-topbar {
    min-height: var(--resource-topbar-height);
    padding: 0.32rem 0.4rem;
    gap: 0.45rem;
    border-radius: 12px;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-resource-day-picker {
    font-size: 0.92rem;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-resource-title-wrap {
    gap: 0.1rem;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-resource-title-wrap small {
    font-size: 0.68rem;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-resource-new-appt-btn {
    min-height: 34px;
    padding: 0.26rem 0.62rem;
    font-size: 0.68rem;
    gap: 0.32rem;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-resource-new-appt-icon {
    width: 26px;
    height: 26px;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-resource-new-appt-icon svg {
    width: 17px;
    height: 17px;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-resource-bulk-btn {
    min-height: 34px;
    padding: 0.26rem 0.62rem;
    font-size: 0.68rem;
    box-shadow: 0 6px 16px rgba(55, 114, 230, 0.22);
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-week-strip {
    gap: 0.32rem;
    padding: 0.15rem 0 0.18rem;
    grid-auto-columns: minmax(72px, 1fr);
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-week-day {
    min-height: var(--resource-week-strip-height);
    border-radius: 11px;
    gap: 0.1rem;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-week-day span {
    font-size: 0.56rem;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-week-day strong {
    font-size: 0.82rem;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-resource-agenda-sheet {
    --calendar-resource-axis-w: 66px;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-resource-agenda-header,
  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-resource-agenda-body {
    gap: 0.42rem;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-resource-agenda-header {
    padding-bottom: 0.22rem;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-resource-axis-spacer {
    min-height: 52px;
    border-radius: 11px;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-operators-row {
    gap: 0.42rem;
    grid-auto-columns: minmax(190px, 1fr);
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-operator-head {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 0.4rem;
    padding: 0.4rem 0.48rem;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-operator-avatar {
    width: 38px;
    height: 38px;
    font-size: 0.82rem;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-operator-head strong {
    font-size: 0.74rem;
    line-height: 1.18;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-operator-head small {
    font-size: 0.58rem;
    margin-top: 0.02rem;
    line-height: 1.15;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-operator-menu-toggle {
    width: 26px;
    height: 26px;
    font-size: 0.78rem;
    border-radius: 8px;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-week-day-head {
    padding: 0.35rem 0.42rem;
    gap: 0.18rem;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-week-day-head strong {
    font-size: 0.82rem;
  }

  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot .calendar-mobile-week-day-head small {
    font-size: 0.65rem;
  }
}

.admin-page[data-admin-panel-active="bot-whatsapp"] .admin-panel[data-admin-panel="bot-whatsapp"] {
  min-height: calc(100vh - 92px);
  max-height: calc(100vh - 92px);
  height: calc(100vh - 92px);
  overflow: hidden;
  display: block;
  padding: 0;
  border-radius: 18px;
  border: 1px solid rgba(206, 217, 232, 0.85);
  background: #f0f2f5;
  box-shadow: 0 18px 36px rgba(36, 65, 121, 0.08);
}

.admin-page[data-admin-panel-active="bot-whatsapp"] .admin-content {
  min-height: calc(100vh - 92px);
}

.admin-page[data-admin-panel-active="bot-whatsapp"] .admin-main {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.admin-topbar-actions {
  display: none;
  gap: 0.7rem;
}

.admin-mobile-menu-button {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(191, 208, 237, 0.95);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: #1f3f79;
  box-shadow: 0 10px 18px rgba(36, 65, 121, 0.08);
  cursor: pointer;
}

.admin-mobile-menu-button svg {
  width: 20px;
  height: 20px;
  display: block;
}

.admin-mobile-sidebar-scrim {
  display: none;
}

.admin-user-pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: rgba(245, 249, 255, 0.9);
  border: 1px solid rgba(195, 212, 240, 0.96);
  color: #1d3a6d;
  font-size: 0.84rem;
  font-weight: 700;
}

.admin-sidebar-welcome {
  display: grid;
  gap: 0.22rem;
  margin-top: 1rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(129, 160, 221, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
}

.admin-sidebar-welcome span {
  color: rgba(219, 231, 252, 0.78);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-sidebar-welcome strong {
  color: #f6f9ff;
  font-size: 1rem;
  line-height: 1.2;
}

.admin-nav-item-logout {
  margin-top: 0.45rem;
  color: #ffdede;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 160, 160, 0.16);
}

.admin-nav-item-logout:hover,
.admin-nav-item-logout:focus-visible {
  color: #fff2f2;
  background: rgba(184, 58, 58, 0.2);
  border-color: rgba(255, 160, 160, 0.28);
}

.admin-bottom-nav {
  display: none;
}

.auth-trust-card {
  margin-top: 1rem;
  padding: 1rem;
}

.auth-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.auth-trust-row span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.45rem 0.72rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(193, 210, 239, 0.92);
  color: #2b4f97;
  font-size: 0.8rem;
  font-weight: 700;
}

@media (max-width: 900px) {
  nav {
    display: none;
  }

  .nav {
    min-height: 60px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 0.6rem;
  }

  .brand {
    width: 248px;
    height: 72px;
    margin-right: 0;
  }

  .brand img {
    top: -36px;
    left: 50%;
    height: 144px;
    transform: translateX(-50%);
  }

  .header-actions {
    gap: 0.4rem;
  }

  .header-actions .btn {
    padding: 0.58rem 0.78rem;
    font-size: 0.84rem;
  }

  .auth-topbar-nav {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .admin-topbar-nav {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  .admin-topbar-nav .admin-topbar-leading {
    position: static;
    left: auto;
    transform: none;
    grid-column: 2;
    pointer-events: auto;
    justify-self: center;
  }

  .admin-topbar-nav .admin-topbar-actions {
    grid-column: 1;
  }

  .admin-topbar-nav .admin-topbar-spacer {
    display: block;
    grid-column: 3;
  }

  .hero-grid,
  .auth-shell,
  .auth-stage-grid,
  .cards,
  .steps {
    grid-template-columns: 1fr;
  }

  .how-hero-grid,
  .how-summary-grid,
  .how-kpis {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 100%;
    padding-top: 0;
  }

  .hero-card {
    width: min(100%, 380px);
    margin: 0 auto;
  }

  .compare-grid {
    grid-template-columns: 1fr;
  }

  .how-carousel-frame {
    min-height: 0;
  }

  .carousel-slide {
    grid-template-columns: 1fr;
  }

  .showcase-scene {
    grid-template-columns: 1fr;
    padding-top: 5.8rem;
  }

  .showcase-scene-split {
    padding-top: 1rem;
  }

  .showcase-summary-row {
    grid-template-columns: 1fr;
  }

   .showcase-device-stack {
    min-height: 680px;
  }

  .showcase-device-stack-dual {
    grid-template-columns: 1fr;
    justify-items: center;
    padding-bottom: 0;
  }

  .portal-web-card {
    width: min(100%, 720px);
  }

  .portal-web-body,
  .portal-agenda-layout,
  .portal-checkin-grid,
  .portal-validation-grid,
  .portal-insights-chart {
    grid-template-columns: 1fr;
  }

  .portal-agenda-columns,
  .portal-insights-metrics,
  .portal-web-footer-strip,
  .portal-validation-board,
  .portal-insights-grid {
    grid-template-columns: 1fr;
  }

  .portal-agenda-summary-grid {
    grid-template-columns: 1fr;
  }

  .portal-web-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-web-sidebar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-content: stretch;
    border-right: 0;
    border-bottom: 1px solid rgba(190, 209, 241, 0.44);
  }

  .module-data-strip {
    grid-template-columns: 1fr;
  }

  .showcase-floating-card {
    max-width: calc(100% - 2rem);
  }

  .showcase-scene-split .showcase-floating-card {
    max-width: 100%;
  }

  .showcase-orbit-card {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 360px;
    order: 2;
    margin-top: -1.5rem;
  }

  .how-carousel-nav {
    flex-wrap: wrap;
    justify-content: center;
  }

  .stats {
    grid-template-columns: 1fr 1fr;
  }

  .hero-value-strip {
    gap: 0.45rem;
  }

  .hero-value-strip span {
    font-size: 0.8rem;
  }

  .cta-form {
    grid-template-columns: 1fr;
  }

  .phone-frame {
    width: 248px;
    height: 540px;
  }

  .phone-screen {
    height: 100%;
  }

  .auth-stage {
    min-height: unset;
    padding: 1.6rem;
  }

  .auth-card {
    padding: 1.6rem 1.25rem;
  }

  .auth-shell-compact {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 560px);
    margin-inline: auto;
  }

  .auth-card-compact {
    margin-top: 1.2rem;
  }

  .admin-shell,
  .admin-grid {
    grid-template-columns: 1fr;
  }

  /* Calendário: o drawer fica `position: fixed` neste breakpoint, mas o grid ainda
     reservava 272px para a coluna do aside — no Safari iOS isso vira faixa vazia à direita. */
  .admin-page[data-admin-panel-active="calendario"] .admin-shell {
    grid-template-columns: 1fr;
  }

  .admin-home-brief,
  .admin-quick-agenda-summary {
    grid-template-columns: 1fr 1fr;
  }

  /* Visão geral (mobile): próximo cliente no topo; antes KPI/legenda (order 0) passavam na frente */
  .admin-dashboard-main .admin-home-next-client {
    order: -2;
  }

  .admin-dashboard-main .admin-home-brief {
    order: 0;
  }

  .admin-dashboard-main .admin-dashboard-kpi-row {
    order: 1;
  }

  .admin-dashboard-main .admin-dashboard-status-legend {
    order: 2;
  }

  .admin-home-next-client-grid,
  .admin-quick-agenda-modal-grid {
    grid-template-columns: 1fr;
  }

  .admin-quick-agenda-item {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 0.75rem;
  }

  .calendar-admin-toolbar,
  .calendar-admin-body {
    grid-template-columns: 1fr;
    display: grid;
  }

  .operator-config-actions,
  .operator-config-grid,
  .operator-config-form-grid,
  .operator-config-form-grid-compact,
  .operator-config-kpis,
  .operator-config-row,
  .operator-config-branch-grid,
  .operator-config-professional-sections,
  .operator-config-professional-grid,
  .operator-config-professional-grid-compact {
    grid-template-columns: 1fr;
  }

  .operator-config-field-span-2,
  .operator-config-field-compact {
    grid-column: auto;
    max-width: none;
  }

  .operator-config-card-branches .operator-config-list {
    grid-template-columns: 1fr;
  }

  .operator-config-card-professionals .operator-config-list {
    grid-template-columns: 1fr;
  }

  .operator-config-toolbar-buttons,
  .operator-config-card-actions,
  .operator-config-inline-actions {
    width: 100%;
    justify-content: stretch;
  }

  .operator-config-toolbar-buttons .btn,
  .operator-config-card-actions .btn,
  .operator-config-inline-actions .btn {
    flex: 1 1 100%;
  }

  .calendar-admin-support {
    grid-template-columns: 1fr 1fr;
  }

  .calendar-admin-controls {
    justify-items: stretch;
  }

  .calendar-admin-filters {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .calendar-admin-toolbar-footer,
  .calendar-admin-actions-row {
    align-items: stretch;
  }

  #adminCalendarRefresh {
    min-width: 0;
    width: 100%;
  }

  .calendar-modal-grid {
    grid-template-columns: 1fr;
  }

  .calendar-modal-summary {
    grid-template-columns: 1fr;
  }

  .calendar-admin-stage {
    max-height: none;
  }

  .calendar-admin-canvas {
    max-height: calc(100vh - 340px);
  }

  .calendar-detail-actions {
    flex-direction: column;
  }

  .calendar-detail-action {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .calendar-admin-nav-actions,
  .calendar-admin-view-switch {
    justify-content: flex-start;
  }

  .calendar-admin-metrics,
  .calendar-year-view {
    grid-template-columns: 1fr 1fr;
  }

  .calendar-time-header,
  .calendar-time-body {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .calendar-month-view {
    grid-template-columns: repeat(7, minmax(120px, 1fr));
  }

  .bot-admin-shell {
    grid-template-columns: 1fr;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .bot-overview-strip {
    grid-template-columns: 1fr;
  }

  .admin-hero {
    grid-template-columns: 1fr;
  }

  .admin-hero-now {
    justify-items: start;
  }

  .admin-hero,
  .admin-panel {
    padding: 1.15rem;
  }

  .admin-main {
    padding-top: 1.2rem;
    padding-bottom: calc(6.4rem + env(safe-area-inset-bottom, 0px));
  }

  .admin-topbar-actions {
    display: flex;
    width: 44px;
    margin-left: 0;
    justify-self: start;
  }

  .admin-mobile-menu-button {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .admin-topbar-leading {
    justify-self: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    pointer-events: auto;
  }

  .admin-topbar-spacer {
    display: block;
    width: 44px;
    height: 44px;
    justify-self: end;
  }

  .admin-user-pill {
    display: none;
  }

  .admin-shell {
    position: relative;
  }

  .admin-sidebar {
    position: fixed;
    top: 74px;
    left: 0.9rem;
    bottom: calc(5.9rem + env(safe-area-inset-bottom, 0px));
    width: min(320px, calc(100vw - 1.8rem));
    max-width: calc(100vw - 1.8rem);
    z-index: 60;
    overflow: auto;
    padding: 1rem;
    border-radius: 26px;
    transform: translateX(calc(-100% - 1.2rem));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.22s ease, opacity 0.22s ease;
  }

  .admin-mobile-sidebar-scrim {
    display: block;
    position: fixed;
    inset: 58px 0 0;
    z-index: 55;
    border: 0;
    background: rgba(7, 17, 33, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }

  .admin-page[data-admin-mobile-nav="open"] .admin-sidebar {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  .admin-page[data-admin-mobile-nav="open"] .admin-mobile-sidebar-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .admin-sidebar-toggle {
    display: none;
  }

  .admin-nav {
    grid-template-columns: 1fr;
  }

  .admin-nav-item {
    padding: 0.95rem 0.9rem;
  }

  .admin-page[data-admin-sidebar="collapsed"] .admin-sidebar {
    position: fixed;
    top: 74px;
    left: 0.9rem;
    bottom: calc(5.9rem + env(safe-area-inset-bottom, 0px));
    width: min(320px, calc(100vw - 1.8rem));
    max-width: calc(100vw - 1.8rem);
    display: block;
    z-index: 60;
    overflow: auto;
    padding: 1rem;
    border-radius: 26px;
    color: #ecf4ff;
    background: linear-gradient(180deg, rgba(12, 27, 54, 0.96), rgba(19, 43, 84, 0.96));
    border: 1px solid rgba(35, 70, 131, 0.4);
    box-shadow: 0 24px 48px rgba(10, 24, 49, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateX(calc(-100% - 1.2rem));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.22s ease, opacity 0.22s ease;
  }

  .admin-page[data-admin-mobile-nav="open"][data-admin-sidebar="collapsed"] .admin-sidebar {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  .admin-page[data-admin-sidebar="collapsed"] .admin-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .admin-page[data-admin-sidebar="collapsed"] .admin-sidebar .badge,
  .admin-page[data-admin-sidebar="collapsed"] .admin-nav-label,
  .admin-page[data-admin-sidebar="collapsed"] .admin-sidebar::after {
    display: initial;
  }

  .admin-page[data-admin-sidebar="collapsed"] .admin-nav {
    display: grid;
    gap: 0.7rem;
    margin-top: 1rem;
  }

  .admin-page[data-admin-sidebar="collapsed"] .admin-nav-item {
    position: relative;
    width: 100%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 0.9rem;
    border: 1px solid rgba(129, 160, 221, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    color: #dfeafe;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }

  .admin-page[data-admin-sidebar="collapsed"] .admin-nav-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }

  .admin-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    align-items: stretch;
    padding: 0.45rem 0.55rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(192, 209, 238, 0.92);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 -10px 28px rgba(23, 43, 83, 0.12);
  }

  .admin-bottom-nav-item {
    display: grid;
    justify-items: center;
    gap: 0.22rem;
    min-height: 54px;
    padding: 0.55rem 0.4rem;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #5e7597;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  }

  .admin-bottom-nav-item.is-active {
    background: linear-gradient(180deg, rgba(43, 79, 151, 0.14), rgba(43, 79, 151, 0.08));
    color: #21478b;
  }

  .admin-bottom-nav-item--cockpit {
    border-radius: 16px;
    border: 1px solid rgba(59, 130, 246, 0.32);
    background: linear-gradient(165deg, rgba(239, 246, 255, 0.98) 0%, rgba(219, 234, 254, 0.55) 48%, rgba(255, 255, 255, 0.25) 100%);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.75);
    color: #1d4ed8;
    min-height: 56px;
    transform: translateY(-3px);
  }

  .admin-bottom-nav-item--cockpit .admin-bottom-nav-icon {
    width: 24px;
    height: 24px;
    color: #1d4ed8;
  }

  .admin-bottom-nav-item--cockpit .admin-bottom-nav-icon svg {
    width: 24px;
    height: 24px;
  }

  .admin-bottom-nav-item--cockpit.is-active {
    background: linear-gradient(165deg, rgba(219, 234, 254, 0.95) 0%, rgba(191, 219, 254, 0.75) 50%, rgba(147, 197, 253, 0.45) 100%);
    border-color: rgba(37, 99, 235, 0.45);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    color: #1e3a8a;
  }

  .admin-bottom-nav-item:active {
    transform: translateY(1px);
  }

  .admin-bottom-nav-item--cockpit:active {
    transform: translateY(-2px);
  }

  .admin-bottom-nav-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .admin-bottom-nav-icon svg {
    width: 22px;
    height: 22px;
    display: block;
  }

  .admin-page[data-admin-sidebar="collapsed"] .admin-nav-item::after {
    display: none;
  }

  .admin-page[data-admin-sidebar="collapsed"] .admin-shell,
  .admin-page[data-admin-sidebar="collapsed"][data-admin-panel-active="calendario"] .admin-shell {
    grid-template-columns: 1fr;
  }

  .admin-page[data-admin-sidebar="collapsed"] .admin-sidebar .badge,
  .admin-page[data-admin-sidebar="collapsed"] .admin-nav-label,
  .admin-page[data-admin-sidebar="collapsed"] .admin-sidebar::after {
    display: initial;
  }

  .admin-page[data-admin-sidebar="collapsed"] .admin-nav-item::after {
    display: none;
  }

}

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: 3.35rem 0 2.5rem;
  }

  .hero-video,
  .hero-scenes {
    opacity: 1;
  }

  .hero-overlay {
    background:
      linear-gradient(180deg, rgba(7, 17, 33, 0.62) 0%, rgba(8, 20, 39, 0.4) 42%, rgba(6, 16, 30, 0.56) 100%),
      radial-gradient(circle at 80% 22%, rgba(61, 140, 255, 0.12), transparent 28%),
      rgba(0, 0, 0, 0.08);
  }

  .hero-grid {
    gap: 1.25rem;
  }

  h1 {
    font-size: clamp(2rem, 10vw, 2.8rem);
    line-height: 1;
  }

  .hero .hero-text {
    font-size: 1rem;
  }

  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero-actions .btn {
    flex: 1 1 220px;
    text-align: center;
  }

  .hero-value-strip,
  .micro-trust {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .hero-value-strip span,
  .micro-trust span {
    justify-content: center;
  }

  .stats {
    grid-template-columns: 1fr 1fr;
  }

  .phone-frame {
    transform: rotate(0deg);
    width: 240px;
    height: 520px;
  }

  .calendar-body {
    grid-template-columns: 38px 1fr;
    padding-left: 0.45rem;
  }

  .calendar-toolbar {
    padding: 0.5rem 0.7rem 0.62rem;
  }

  .calendar-slot {
    margin: 0 0.2rem;
  }

  .calendar-transfer {
    width: 156px;
    right: 0.55rem;
    bottom: 4.05rem;
  }

  .checkin-body,
  .validation-body,
  .dashboard-body {
    padding: 0.72rem 0.64rem 0.62rem;
  }

  .checkin-choice-grid,
  .validation-grid,
  .dashboard-kpis,
  .dashboard-grid {
    gap: 0.44rem;
  }

  .hero-card {
    width: min(100%, 340px);
    padding: 0.9rem 0.75rem 0.8rem;
  }

  .how-hero {
    padding: 4.2rem 0 2.8rem;
  }

  .how-phone-frame {
    width: 276px;
    height: 600px;
  }

  .portal-web-topbar {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .portal-browser-bar {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .portal-browser-tabs {
    width: 100%;
  }

  .portal-browser-tab {
    flex: 1 1 0;
  }

  .portal-web-search,
  .portal-web-user {
    width: 100%;
    text-align: center;
  }

  .auth-main {
    padding: 1.1rem 0 2.4rem;
  }

  .auth-page .nav {
    flex-wrap: wrap;
    justify-content: center;
  }

  .auth-page .header-actions {
    width: 100%;
    justify-content: center;
  }

  .auth-page .header-actions .btn {
    width: min(100%, 280px);
    text-align: center;
  }

  .auth-shell,
  .auth-shell-compact {
    width: 100%;
  }

  .auth-card,
  .auth-card-compact {
    width: 100%;
  }

  .auth-card-compact {
    margin-top: 0;
  }

  .auth-card-header {
    margin-bottom: 1rem;
  }

  .auth-card-header p {
    font-size: 0.94rem;
  }

  .auth-form {
    gap: 0.8rem;
  }

  .auth-field input,
  .auth-submit-btn,
  .social-auth-btn {
    min-height: 52px;
  }

  .auth-stage-copy h1,
  .auth-card-header h2 {
    max-width: none;
  }

  .social-auth-btn {
    min-height: 54px;
    font-size: 0.92rem;
  }

  .auth-link-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
  }

  .auth-link-row a {
    width: 100%;
  }

  .auth-divider {
    margin: 1rem 0;
  }

  .auth-feedback {
    min-height: 20px;
    margin-top: 0.75rem;
  }

  .admin-main {
    padding-top: 1.2rem;
  }

  .admin-topbar-actions {
    gap: 0.5rem;
  }

  .admin-user-pill {
    min-height: 38px;
    max-width: 116px;
    padding: 0.42rem 0.72rem;
    font-size: 0.78rem;
  }

  #adminLogoutButton {
    min-height: 38px;
    padding: 0.56rem 0.78rem;
    font-size: 0.8rem;
  }

  .admin-sidebar {
    top: 68px;
    left: 0.75rem;
    bottom: calc(5.8rem + env(safe-area-inset-bottom, 0px));
    width: min(300px, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.5rem);
    padding: 0.92rem;
    border-radius: 22px;
  }

  .admin-mobile-sidebar-scrim {
    inset: 58px 0 0;
  }

  .admin-sidebar-head {
    align-items: center;
  }

  .admin-sidebar .badge {
    font-size: 0.7rem;
  }

  .admin-nav-item {
    gap: 0.72rem;
    padding: 0.82rem 0.8rem;
    border-radius: 16px;
  }

  .admin-nav-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .admin-nav-label {
    font-size: 0.86rem;
    text-align: left;
  }

  .calendar-modal-backdrop {
    place-items: start center;
    overflow-y: auto;
    padding: 4.5rem 0.9rem 1rem;
  }

  .calendar-modal {
    width: min(100%, 620px);
    max-height: none;
    margin: 0 auto;
  }

  .bot-composer {
    grid-template-columns: 1fr;
  }

  .calendar-admin-metrics,
  .calendar-year-view {
    grid-template-columns: 1fr;
  }

  .calendar-admin-filters {
    grid-template-columns: 1fr;
  }

  .calendar-admin-toolbar {
    grid-template-columns: 1fr;
    padding: 1rem 0.95rem;
    border-radius: 20px;
  }

  .calendar-admin-toolbar-footer,
  .calendar-admin-actions-row,
  .calendar-stage-nav-group {
    flex-direction: column;
    align-items: stretch;
  }

  .calendar-auto-update-toggle,
  .calendar-admin-view-switch,
  .calendar-stage-nav,
  .calendar-stage-legend,
  #adminCalendarRefresh {
    width: 100%;
  }

  .calendar-auto-update-toggle {
    min-height: 0;
    padding: 0.8rem 0.9rem;
    border-radius: 16px;
  }

  .calendar-admin-view-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.45rem;
    border-radius: 20px;
  }

  .calendar-view-chip {
    width: 100%;
    min-height: 44px;
    padding-inline: 0.75rem;
  }

  .calendar-stage-head {
    padding: 0.9rem;
    align-items: stretch;
  }

  .calendar-stage-head-actions {
    width: 100%;
    justify-content: stretch;
  }

  .calendar-stage-nav {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    align-items: center;
    justify-content: stretch;
    padding: 0.3rem;
  }

  .calendar-stage-nav-button {
    width: 46px;
    height: 46px;
  }

  .calendar-stage-nav-button-today {
    width: 100%;
    min-width: 0;
  }

  .calendar-stage-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 0.7rem;
    padding: 0.2rem 0.1rem 0;
  }

  .calendar-stage-legend span,
  .calendar-stage-legend-filter {
    font-size: 0.76rem;
  }

  .calendar-admin-view-switch,
  .calendar-stage-nav {
    justify-content: center;
  }

  .calendar-admin-canvas {
    max-height: none;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .calendar-admin-support {
    grid-template-columns: 1fr;
  }

  .calendar-time-shell {
    min-width: 720px;
  }

  .calendar-time-header,
  .calendar-time-body {
    grid-template-columns: 60px minmax(660px, 1fr);
  }

  .calendar-time-day-head {
    min-height: 64px;
    padding: 0.35rem 0.25rem;
  }

  .calendar-time-day-head strong {
    font-size: 1.12rem;
  }

  .calendar-time-day-head small,
  .calendar-time-day-head span {
    font-size: 0.68rem;
  }

  .calendar-time-event {
    min-width: 0;
    padding: 0.58rem 0.56rem;
    border-radius: 14px;
  }

  .calendar-time-event strong {
    font-size: 0.76rem;
  }

  .calendar-time-event span,
  .calendar-time-event p,
  .calendar-time-event small {
    font-size: 0.68rem;
  }

  .calendar-month-shell {
    min-width: 720px;
  }

  .calendar-month-view {
    grid-template-columns: repeat(7, minmax(102px, 1fr));
  }

  .calendar-month-cell {
    min-height: 138px;
    padding: 0.55rem;
  }

  .calendar-event-pill {
    padding: 0.38rem 0.48rem;
    border-radius: 12px;
  }

  .calendar-detail-highlight-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .bot-bubble {
    max-width: 92%;
  }

  .security-admin-grid,
  .security-admin-form-grid,
  .audit-panel-filters {
    grid-template-columns: 1fr;
  }

  .security-admin-field-span-2,
  .audit-panel-field-search {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .brand {
    width: 202px;
    height: 64px;
  }

  .brand img {
    top: -26px;
    left: 50%;
    height: 116px;
    transform: translateX(-50%);
  }

  .auth-page .nav {
    gap: 0.55rem;
  }

  .auth-main {
    padding: 0.9rem 0 1.9rem;
  }

  .auth-shell-compact {
    width: min(100%, 100%);
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .phone-frame {
    width: 228px;
    height: 496px;
  }

  .how-flow-steps div,
  .how-summary-card {
    padding: 1rem;
  }

  .how-carousel-frame {
    min-height: 0;
  }

  .module-data-card {
    padding: 0.82rem 0.86rem;
  }

  .showcase-scene {
    padding: 5.6rem 0.9rem 1rem;
  }

  .how-phone-frame {
    width: 248px;
    height: 540px;
  }

  .showcase-floating-card,
  .showcase-orbit-card,
  .showcase-side-panel {
    max-width: 100%;
  }

  .portal-web-main,
  .portal-web-sidebar {
    padding: 0.82rem;
  }

  .admin-main {
    padding-top: 0.9rem;
  }

  .nav {
    gap: 0.7rem;
  }

  .admin-topbar-actions {
    gap: 0.42rem;
  }

  .admin-mobile-menu-button,
  .admin-user-pill,
  #adminLogoutButton {
    min-height: 36px;
  }

  .admin-user-pill {
    max-width: 92px;
    padding: 0.38rem 0.62rem;
    font-size: 0.74rem;
  }

  #adminLogoutButton {
    padding: 0.52rem 0.68rem;
    font-size: 0.76rem;
  }

  .admin-sidebar {
    top: 64px;
    left: 0.55rem;
    bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 1.1rem);
    max-width: calc(100vw - 1.1rem);
    padding: 0.82rem;
    border-radius: 20px;
  }

  .admin-sidebar::after {
    height: 120px;
  }

  .admin-nav-item {
    padding: 0.76rem;
  }

  .admin-nav-label {
    font-size: 0.82rem;
    line-height: 1.2;
  }

  .admin-shell {
    gap: 0.85rem;
  }

  .calendar-admin-toolbar,
  .calendar-admin-stage,
  .calendar-sidebar-card,
  .calendar-metric-card {
    border-radius: 18px;
  }

  .calendar-admin-period strong {
    font-size: 1.06rem;
  }

  .calendar-admin-period span {
    font-size: 0.84rem;
  }

  .calendar-filter-field {
    padding: 0.72rem 0.74rem 0.76rem;
    border-radius: 16px;
  }

  .calendar-filter-field select,
  .calendar-filter-field input,
  #adminCalendarRefresh,
  .calendar-view-chip,
  .calendar-stage-nav-button,
  .calendar-detail-action,
  .calendar-modal-actions .btn {
    min-height: 46px;
  }

  .calendar-stage-head {
    padding: 0.82rem;
  }

  .calendar-stage-legend {
    grid-template-columns: 1fr;
  }

  .calendar-admin-canvas {
    border-top: 1px solid rgba(214, 224, 239, 0.92);
  }

  .calendar-time-shell {
    min-width: 640px;
  }

  .calendar-time-shell.calendar-time-shell-mobile.calendar-time-shell-day {
    min-width: 100%;
  }

  .calendar-time-shell.calendar-time-shell-mobile.calendar-time-shell-week {
    min-width: 976px;
  }

  .calendar-time-header,
  .calendar-time-body {
    grid-template-columns: 52px minmax(588px, 1fr);
  }

  .calendar-time-shell.calendar-time-shell-mobile.calendar-time-shell-day .calendar-time-header,
  .calendar-time-shell.calendar-time-shell-mobile.calendar-time-shell-day .calendar-time-body {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .calendar-time-axis-label {
    right: 8px;
    font-size: 0.68rem;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-day-head {
    min-height: 60px;
    padding: 0.35rem 0.2rem;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-day-head strong {
    font-size: 1rem;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event {
    padding: 0.42rem 0.5rem 0.46rem;
    border-radius: 14px;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event strong {
    font-size: 0.82rem;
    line-height: 1.12;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event span,
  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event p,
  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event small {
    font-size: 0.66rem;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-top {
    display: none;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-top small {
    font-size: 0.6rem;
    color: #8ca0b9;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-label {
    font-size: 0.54rem;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-line strong {
    font-size: 0.72rem;
    line-height: 1.16;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile small:last-child {
    margin-top: 0.38rem;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    box-shadow: 0 14px 24px rgba(40, 72, 129, 0.12);
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile .calendar-status-badge {
    min-height: 24px;
    padding: 0.12rem 0.52rem;
    font-size: 0.64rem;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile .calendar-time-event-meta {
    gap: 0.18rem;
    margin-top: 0.2rem;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile .calendar-time-event-line {
    gap: 0.02rem;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile .calendar-time-event-mobile-summary {
    display: grid;
    align-content: start;
    gap: 0.08rem;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile .calendar-time-event-mobile-meta {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    margin-top: 0;
    color: #70859f;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile .calendar-time-event-mobile-title {
    margin: 0;
    color: #24406a;
    font-size: 0.82rem;
    line-height: 1.08;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile .calendar-time-event-mobile-service {
    margin: 0.04rem 0 0;
    color: #36537c;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.06;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile .calendar-time-event-mobile-owner {
    margin-top: 0.02rem;
    color: #6e839d;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.04;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile .calendar-time-event-status-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    color: #60758e;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile .calendar-time-event-status-inline::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile .calendar-time-event-status-inline[data-tone="confirmed"] {
    color: #2563eb;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile .calendar-time-event-status-inline[data-tone="completed"] {
    color: #2563eb;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile .calendar-time-event-status-inline[data-tone="pending"] {
    color: #a96c19;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile .calendar-time-event-status-inline[data-tone="cancelled"] {
    color: #b04b4b;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile .calendar-time-event-status-inline[data-tone="blocked"] {
    color: #667b93;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile[data-tone="combo-confirmed-completed"] {
    border-left: 4px solid #2563eb !important;
    border-color: rgba(59, 130, 246, 0.28) !important;
    background: linear-gradient(180deg, rgba(232, 242, 255, 0.98), rgba(255, 255, 255, 0.98)) !important;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile[data-tone="combo-confirmed-pending"] {
    border-left: 4px solid #4ea863 !important;
    border-color: rgba(78, 168, 99, 0.3) !important;
    background: linear-gradient(180deg, rgba(242, 251, 244, 0.98), rgba(255, 255, 255, 0.98)) !important;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile[data-tone="combo-confirmed-no-show"] {
    border-left: 4px solid #0f172a !important;
    border-color: rgba(15, 23, 42, 0.26) !important;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.98)) !important;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile[data-tone="combo-confirmed-delayed"] {
    border-left: 4px solid #d4892c !important;
    border-color: rgba(221, 134, 28, 0.34) !important;
    background: linear-gradient(180deg, rgba(255, 249, 238, 0.98), rgba(255, 255, 255, 0.98)) !important;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile[data-tone="combo-confirmed-in-progress"] {
    border-left: 4px solid #8d56d7 !important;
    border-color: rgba(140, 92, 214, 0.34) !important;
    background: linear-gradient(180deg, rgba(247, 241, 255, 0.98), rgba(255, 255, 255, 0.98)) !important;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile[data-tone="combo-cancelled"] {
    border-left: 4px solid #c85c5c !important;
    border-color: rgba(198, 78, 78, 0.2) !important;
    background: linear-gradient(180deg, rgba(255, 243, 243, 0.98), rgba(255, 255, 255, 0.98)) !important;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile .calendar-time-event-status-inline[data-tone="combo-confirmed-completed"] {
    color: #2563eb !important;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile .calendar-time-event-status-inline[data-tone="combo-confirmed-pending"] {
    color: #2f7f43 !important;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile .calendar-time-event-status-inline[data-tone="combo-confirmed-no-show"] {
    color: #0f172a !important;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile .calendar-time-event-status-inline[data-tone="combo-confirmed-delayed"] {
    color: #a96c19 !important;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile .calendar-time-event-status-inline[data-tone="combo-confirmed-in-progress"] {
    color: #6f3fb3 !important;
  }

  .calendar-time-shell.calendar-time-shell-mobile .calendar-time-event-mobile .calendar-time-event-status-inline[data-tone="combo-cancelled"] {
    color: #b04b4b !important;
  }

  .calendar-month-shell {
    min-width: 640px;
    padding: 0.55rem;
  }

  .calendar-month-view {
    grid-template-columns: repeat(7, minmax(92px, 1fr));
  }

  .calendar-month-cell {
    min-height: 124px;
    padding: 0.45rem;
  }

  .calendar-month-cell header strong {
    width: 30px;
    height: 30px;
    font-size: 0.88rem;
  }

  .calendar-event-pill strong,
  .calendar-event-pill span,
  .calendar-event-pill small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .calendar-detail-item {
    padding: 0.7rem;
  }

  .calendar-modal-actions {
    grid-template-columns: 1fr;
  }

  .portal-web-toolbar,
  .portal-web-sidebar {
    grid-template-columns: 1fr 1fr;
  }

  .portal-web-header-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .portal-table-row {
    grid-template-columns: 62px 1fr;
  }

  .portal-table-row span:nth-child(3),
  .portal-table-row span:nth-child(4) {
    justify-self: start;
  }

  .portal-web-badge {
    white-space: normal;
  }

  .carousel-slide {
    padding: 1rem;
  }

  .showcase-side-panel {
    order: 3;
  }

  .how-cta-actions .btn {
    width: 100%;
    text-align: center;
  }

  .how-carousel-tabs {
    gap: 0.4rem;
  }

  .carousel-tab {
    flex: 1 1 140px;
    text-align: center;
  }

  .showcase-scene {
    min-height: 480px;
  }

  .calendar-head {
    padding: 0.9rem 0.8rem 0.75rem;
  }

  .calendar-subtitle {
    font-size: 0.62rem;
  }

  .calendar-body {
    gap: 0.3rem;
    grid-template-columns: 34px 1fr;
    padding: 0.8rem 0.45rem 0.6rem 0.3rem;
  }

  .calendar-toolbar {
    padding: 0.45rem 0.6rem 0.55rem;
    gap: 0.24rem;
  }

  .calendar-chip {
    min-width: 46px;
    padding: 0.28rem 0.42rem;
    font-size: 0.62rem;
  }

  .calendar-column-header {
    padding: 0 0.5rem 0 0.65rem;
  }

  .calendar-slot {
    padding: 0.42rem 0.5rem;
  }

  .calendar-tag {
    font-size: 0.56rem;
  }

  .calendar-transfer {
    width: 146px;
    right: 0.45rem;
    bottom: 3.8rem;
    padding: 0.48rem 0.54rem;
  }

  .checkin-head,
  .checkin-footer,
  .validation-head,
  .validation-footer,
  .dashboard-head,
  .dashboard-footer {
    padding: 0.82rem 0.78rem 0.7rem;
  }

  .checkin-badge,
  .validation-badge,
  .dashboard-badge {
    font-size: 0.58rem;
    padding: 0.28rem 0.44rem;
  }

  .checkin-body,
  .validation-body,
  .dashboard-body {
    padding: 0.62rem 0.56rem 0.56rem;
  }

  .checkin-alert-card,
  .checkin-choice,
  .checkin-response-card,
  .validation-client-card,
  .validation-stepper,
  .validation-mini-card,
  .dashboard-card,
  .dashboard-panel {
    border-radius: 14px;
  }

  .checkin-choice-grid,
  .validation-grid,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .compact-panel {
    min-height: auto;
  }

  .auth-stage,
  .auth-card,
  .auth-feature-list,
  .auth-info-panel,
  .auth-phone-card,
  .auth-checklist,
  .auth-trust-card,
  .auth-note {
    border-radius: 22px;
  }

  .auth-card {
    padding: 1.15rem 0.92rem;
  }

  .auth-stage {
    padding: 1.25rem 1rem;
  }

  .auth-card-header {
    margin-bottom: 1rem;
  }

  .auth-card-header h2 {
    font-size: clamp(1.5rem, 8vw, 1.9rem);
  }

  .auth-card-header p,
  .auth-field span,
  .auth-feedback {
    font-size: 0.84rem;
  }

  .auth-field {
    gap: 0.35rem;
  }

  .auth-field input,
  .auth-submit-btn,
  .social-auth-btn {
    min-height: 48px;
  }

  .auth-field input {
    padding: 0.82rem 0.88rem;
    border-radius: 14px;
  }

  .auth-submit-btn {
    border-radius: 14px;
    font-size: 0.92rem;
  }

  .social-auth-btn {
    padding: 0.8rem 0.9rem;
    font-size: 0.86rem;
    border-radius: 16px;
  }

  .auth-link-row a {
    font-size: 0.84rem;
  }

  .auth-divider {
    font-size: 0.74rem;
    gap: 0.6rem;
  }

  .auth-feedback {
    margin-top: 0.65rem;
  }

  .auth-feature-item {
    grid-template-columns: 38px 1fr;
  }

  .auth-feature-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 1rem;
  }

  .admin-sidebar,
  .admin-hero,
  .admin-panel,
  .admin-feature-card,
  .admin-placeholder,
  .calendar-admin-toolbar,
  .calendar-admin-sidebar,
  .calendar-admin-stage,
  .calendar-sidebar-card,
  .calendar-metric-card,
  .calendar-week-column,
  .calendar-month-cell,
  .calendar-year-card {
    border-radius: 20px;
  }
}

@media (max-width: 420px) {
  .auth-page .header-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .auth-page .header-actions .btn {
    width: 100%;
    min-width: 0;
  }

  .auth-main {
    padding: 0.8rem 0 1.6rem;
  }

  .auth-stage,
  .auth-card,
  .auth-feature-list,
  .auth-info-panel,
  .auth-phone-card,
  .auth-checklist,
  .auth-trust-card,
  .auth-note {
    border-radius: 18px;
  }

  .auth-stage,
  .auth-card {
    padding: 1rem 0.82rem;
  }

  .auth-card-header h2 {
    font-size: clamp(1.35rem, 8vw, 1.72rem);
  }

  .auth-card-header p {
    font-size: 0.82rem;
  }

  .auth-field input,
  .auth-submit-btn,
  .social-auth-btn {
    min-height: 46px;
  }

  .auth-link-row {
    gap: 0.45rem;
  }

  .admin-topbar-actions {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }

  .admin-user-pill {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  .admin-sidebar {
    top: 60px;
    left: 0.45rem;
    bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 0.9rem);
    max-width: calc(100vw - 0.9rem);
    padding: 0.74rem;
    border-radius: 18px;
  }

  .admin-nav {
    gap: 0.5rem;
  }

  .admin-nav-item {
    gap: 0.62rem;
    padding: 0.72rem;
  }

  .admin-nav-label {
    text-align: left;
  }

  .admin-nav-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .calendar-admin-toolbar {
    padding: 0.85rem 0.75rem;
  }

  .calendar-admin-view-switch {
    grid-template-columns: 1fr;
  }

  .calendar-stage-legend {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .calendar-filter-field {
    padding: 0.66rem 0.68rem 0.7rem;
  }

  .calendar-time-shell {
    min-width: 560px;
  }

  .calendar-time-header,
  .calendar-time-body {
    grid-template-columns: 48px minmax(512px, 1fr);
  }

  .calendar-month-shell {
    min-width: 560px;
  }

  .calendar-modal-backdrop {
    padding: 4.1rem 0.65rem 0.8rem;
  }

  .calendar-modal {
    width: 100%;
    padding: 0.95rem;
    border-radius: 18px;
  }
}

@media (max-width: 390px) {
  .brand {
    width: 178px;
    height: 60px;
  }

  .brand img {
    top: -24px;
    height: 102px;
  }

  .auth-main {
    padding: 0.72rem 0 1.35rem;
  }

  .auth-stage,
  .auth-card {
    padding: 0.92rem 0.75rem;
    border-radius: 16px;
  }

  .auth-card-header h2 {
    font-size: clamp(1.28rem, 8vw, 1.58rem);
  }

  .social-auth-btn {
    padding: 0.74rem 0.8rem;
    font-size: 0.82rem;
  }

  .admin-topbar-actions {
    gap: 0.35rem;
  }

  .admin-mobile-menu-button {
    width: 36px;
    min-width: 36px;
    padding: 0;
    justify-content: center;
  }

  .admin-user-pill {
    max-width: 100px;
    padding: 0.35rem 0.5rem;
    font-size: 0.72rem;
  }

  .admin-nav-label {
    font-size: 0.8rem;
    text-align: left;
  }

  #adminLogoutButton {
    padding: 0.48rem 0.58rem;
    font-size: 0.72rem;
  }

  .admin-sidebar {
    top: 58px;
    left: 0.35rem;
    bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 0.7rem);
    max-width: calc(100vw - 0.7rem);
    border-radius: 16px;
  }

  .calendar-admin-toolbar,
  .calendar-admin-stage,
  .calendar-sidebar-card,
  .calendar-metric-card {
    border-radius: 16px;
  }

  .calendar-admin-period strong {
    font-size: 0.98rem;
  }

  .calendar-stage-head {
    padding: 0.72rem;
  }

  .calendar-view-chip,
  .calendar-stage-nav-button,
  #adminCalendarRefresh {
    min-height: 42px;
  }

  .calendar-time-shell {
    min-width: 520px;
  }

  .calendar-month-shell {
    min-width: 520px;
  }

  .calendar-modal-backdrop {
    padding: 3.9rem 0.45rem 0.6rem;
  }

  .calendar-modal {
    padding: 0.88rem;
    border-radius: 16px;
  }
}

@media (max-width: 360px) {
  .auth-main {
    padding: 0.62rem 0 1.1rem;
  }

  .auth-stage,
  .auth-card {
    padding: 0.82rem 0.66rem;
    border-radius: 14px;
  }

  .auth-card-header h2 {
    font-size: clamp(1.16rem, 7.8vw, 1.46rem);
  }

  .auth-card-header p,
  .auth-field span,
  .auth-feedback,
  .auth-link-row a {
    font-size: 0.78rem;
  }

  .auth-field input,
  .auth-submit-btn,
  .social-auth-btn {
    min-height: 44px;
  }

  .admin-topbar-actions {
    gap: 0.28rem;
  }

  .admin-user-pill {
    max-width: 88px;
    padding: 0.32rem 0.42rem;
    font-size: 0.68rem;
  }

  #adminLogoutButton {
    padding: 0.44rem 0.5rem;
    font-size: 0.68rem;
  }

  .admin-sidebar {
    top: 56px;
    left: 0.25rem;
    bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 0.5rem);
    max-width: calc(100vw - 0.5rem);
    padding: 0.62rem;
    border-radius: 14px;
  }

  .admin-nav-item {
    padding: 0.66rem;
    gap: 0.55rem;
  }

  .admin-nav-label {
    font-size: 0.76rem;
  }

  .calendar-admin-toolbar,
  .calendar-admin-stage,
  .calendar-sidebar-card,
  .calendar-metric-card,
  .calendar-modal {
    border-radius: 14px;
  }

  .calendar-modal-backdrop {
    padding: 3.7rem 0.35rem 0.45rem;
  }

  .calendar-modal {
    padding: 0.8rem;
  }

  .calendar-modal-head strong {
    font-size: 1.02rem;
  }

  .calendar-time-shell,
  .calendar-month-shell {
    min-width: 500px;
  }
}

/* Override final: agenda rapida mobile deve rolar internamente */
@media (max-width: 900px) {
  .admin-page[data-admin-panel-active="agenda-rapida"] .admin-panel[data-admin-panel="agenda-rapida"] {
    height: calc(100vh - 120px) !important;
    max-height: calc(100vh - 120px) !important;
    min-height: calc(100vh - 120px) !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  .admin-page[data-admin-panel-active="agenda-rapida"] .admin-quick-agenda-shell {
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .admin-page[data-admin-panel-active="agenda-rapida"] .admin-quick-agenda-list {
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  /* Evita conflito de scroll aninhado na Agenda Rapida mobile:
     a lista vira o unico scroller vertical. */
  .admin-page[data-admin-panel-active="agenda-rapida"] .admin-quick-agenda-list .admin-dashboard-day-timeline {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Override final: modais mobile sempre roláveis */
@media (max-width: 900px) {
  /*
   * Agenda: o backdrop do compromisso fica dentro de main.admin-main, que no calendário usa overflow:hidden.
   * Isso recorta position:fixed na base (botões Salvar/Cancelar). A classe é ligada em calendar-admin.js.
   */
  body.admin-calendar-booking-modal-open .admin-main {
    overflow: visible !important;
  }

  body.admin-calendar-booking-modal-open #adminCalendarModalBackdrop.calendar-modal-backdrop {
    z-index: 120;
  }

  .admin-quick-agenda-modal-backdrop,
  .calendar-modal-backdrop,
  .admin-next-payment-modal-backdrop,
  .admin-pos-payment-flow-backdrop {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    place-items: start center !important;
  }

  .calendar-modal-backdrop {
    padding: 0.65rem 0.75rem calc(0.85rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .admin-quick-agenda-modal,
  .calendar-modal,
  .admin-next-payment-modal {
    width: min(100%, 540px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }

  .admin-quick-agenda-modal,
  .admin-next-payment-modal {
    max-height: min(92vh, calc(var(--reservaai-vh, 100vh) - var(--admin-topbar-stack-height, 4.25rem) - 1.75rem)) !important;
  }

  /*
   * Calendário: modais genéricos — folga no rodapé.
   */
  .calendar-modal {
    max-height: min(
      90dvh,
      calc(
        var(--reservaai-vh, 100vh) - var(--admin-topbar-stack-height, 4.25rem) - 7rem - env(safe-area-inset-bottom, 0px)
      )
    ) !important;
  }

  /*
   * Novo/editar compromisso: cartão mais baixo no mobile (rodapé do modal ~na faixa acima da bottom bar),
   * conteúdo continua só no scroll interno do .calendar-modal.
   */
  .calendar-modal-booking.calendar-modal {
    max-height: min(
      78dvh,
      calc(
        var(--reservaai-vh, 100vh) - var(--admin-topbar-stack-height, 4.25rem) - 9.5rem - env(safe-area-inset-bottom, 0px)
      )
    ) !important;
  }
}

@media (max-width: 768px) {
  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-admin-support,
  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-admin-metrics,
  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-stage-legend {
    display: none;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"]:not([data-calendar-shell-ready="true"]) .calendar-admin-stage {
    min-height: 0;
    max-height: none;
    height: auto;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"][data-calendar-shell-ready="true"] .calendar-admin-stage {
    min-height: calc(var(--reservaai-vh, 100vh) - 132px);
    max-height: calc(var(--reservaai-vh, 100vh) - 52px);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
  }

  /* AgendaMobile: chrome próprio no canvas; barra desktop da stage some no telefone. */
  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-stage-head {
    display: none !important;
  }

  /* Remove ações NTF/FLT/... no full calendário mobile */
  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-resource-actions {
    display: none;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-resource-chrome-edge {
    display: inline-flex;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-resource-topbar {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 0.35rem 0.45rem;
    justify-content: unset;
    padding: 0.55rem 0.5rem;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-resource-title-wrap {
    width: auto;
    justify-items: center;
    text-align: center;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-resource-day-picker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-admin-canvas {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    background: #eef4fc;
  }

  /* Corrente flex: o dia ocupa a altura do canvas e só o miolo da agenda rola (evita sticky/layout quebrando no iOS). */
  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-admin-canvas[data-calendar-view="day"] .calendar-mobile-resource-day:not(.calendar-mobile-resource-week) {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-resource-agenda-scroll {
    flex: 1 1 auto;
    min-height: 0;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-resource-agenda {
    min-height: 0;
  }

  /* Faixa DOM–SEX: sem sticky no mobile — evita sobreposição com o grid quando o viewport ou o pai não fecha altura. */
  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-week-strip {
    position: relative;
    top: auto;
    z-index: 1;
    flex-shrink: 0;
    scroll-snap-type: x proximity;
    gap: 0.42rem;
    padding: 0.35rem 0.1rem 0.4rem;
    grid-auto-columns: minmax(52px, 1fr);
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-week-day {
    min-height: 60px;
    padding: 0.4rem 0.28rem 0.46rem;
    border-radius: 16px;
    border: 1px solid rgba(199, 214, 236, 0.92);
    background: linear-gradient(180deg, #ffffff 0%, #f6f9fe 100%);
    gap: 0.26rem;
    box-shadow: 0 1px 2px rgba(23, 48, 90, 0.05);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-week-day:active {
    transform: scale(0.98);
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-week-day span {
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #6b829e;
    text-transform: uppercase;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-week-day strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.15rem;
    min-height: 2.15rem;
    padding: 0 0.22rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 800;
    color: #1e3a5f;
    background: rgba(229, 238, 252, 0.98);
    border: 1px solid rgba(186, 206, 236, 0.88);
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-week-day.is-selected {
    background: linear-gradient(165deg, rgba(239, 246, 255, 0.98) 0%, rgba(219, 234, 254, 0.55) 100%);
    border-color: rgba(59, 130, 246, 0.42);
    box-shadow:
      0 6px 18px rgba(37, 99, 235, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.75);
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-week-day.is-selected span {
    color: #1d4ed8;
    font-weight: 800;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-week-day.is-selected strong {
    background: linear-gradient(145deg, #3b82f6, #2563eb);
    border: 0;
    color: #fff;
    box-shadow:
      0 4px 14px rgba(37, 99, 235, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }

  /* AgendaMobile: faixa de dias — cartões mais compactos; selecionado = bloco azul + texto branco (referência UI). */
  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-week-strip.calendar-mobile-week-strip {
    gap: 0.38rem;
    padding: 0.2rem 0.05rem 0.28rem;
    grid-auto-columns: minmax(46px, 1fr);
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-week-strip .calendar-mobile-week-day {
    min-height: 50px;
    padding: 0.28rem 0.16rem 0.32rem;
    border-radius: 12px;
    border: 1px solid rgba(212, 224, 242, 0.95);
    background: #fff;
    gap: 0.14rem;
    box-shadow: 0 1px 2px rgba(23, 48, 90, 0.04);
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-week-strip .calendar-mobile-week-day span {
    font-size: 0.5rem;
    letter-spacing: 0.07em;
    color: #7389a8;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-week-strip .calendar-mobile-week-day:not(.is-selected) strong {
    min-width: 0;
    min-height: 0;
    padding: 0;
    font-size: 0.82rem;
    font-weight: 800;
    border-radius: 0;
    border: 0;
    background: transparent;
    color: #1e3a5f;
    box-shadow: none;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-week-strip .calendar-mobile-week-day.is-selected strong {
    min-width: 1.62rem;
    min-height: 1.62rem;
    padding: 0;
    font-size: 0.78rem;
    border-radius: 10px;
    border: 0;
    background: transparent;
    color: #fff;
    box-shadow: none;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-week-strip .calendar-mobile-week-day.is-selected {
    background: linear-gradient(165deg, #3b82f6, #2563eb);
    border-color: rgba(29, 78, 216, 0.45);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.2);
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-week-strip .calendar-mobile-week-day.is-selected span,
  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-week-strip .calendar-mobile-week-day.is-selected strong {
    color: #fff;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-scroll {
    padding-bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px));
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-floating-actions {
    bottom: calc(5.1rem + env(safe-area-inset-bottom, 0px));
  }

  /* AgendaMobile — timeline única; carrossel só na faixa de profissionais */
  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    max-width: 100vw;
    width: 100%;
    min-width: 0;
    gap: 0.28rem;
    padding: 0.4rem 0.45rem 0;
    box-sizing: border-box;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-date-row {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    flex-shrink: 0;
    min-width: 0;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-date-nav-btn--chev {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(200, 216, 238, 0.95);
    background: #fff;
    color: #1d4ed8;
    font: inherit;
    font-weight: 800;
    font-size: 1.12rem;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 2px rgba(23, 48, 90, 0.06);
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-date-pill {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    padding: 0.36rem 0.5rem;
    border-radius: 14px;
    border: 1px solid rgba(200, 216, 238, 0.95);
    background: linear-gradient(180deg, #fff, #f4f8fd);
    color: #132f52;
    font: inherit;
    font-weight: 800;
    font-size: 0.76rem;
    line-height: 1.2;
    cursor: pointer;
    text-transform: capitalize;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 8px rgba(23, 48, 90, 0.06);
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-date-pill-icon {
    flex-shrink: 0;
    color: #2563eb;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-date-pill-text {
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-date-pill-chev {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.1rem;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.45;
    flex-shrink: 0;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-today-row {
    display: flex;
    justify-content: center;
    margin: -0.05rem 0 0.08rem;
    flex-shrink: 0;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-today-link {
    border: 0;
    background: transparent;
    padding: 0.12rem 0.35rem;
    font: inherit;
    font-size: 0.66rem;
    font-weight: 800;
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-bulk {
    align-self: center;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    padding: 0.25rem 0.5rem !important;
    min-height: 0 !important;
    border-radius: 999px !important;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-prof-strip-outer {
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
    margin: 0 -0.45rem;
    padding: 0 0.45rem 0.15rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
    max-width: 100vw;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-prof-strip-outer::-webkit-scrollbar {
    display: none;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-prof-strip {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.42rem;
    min-width: min-content;
    padding-bottom: 2px;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-prof-chip {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.22rem;
    min-width: 64px;
    max-width: 88px;
    padding: 0.38rem 0.35rem 0.42rem;
    border-radius: 14px;
    border: 1px solid rgba(196, 213, 239, 0.95);
    background: rgba(255, 255, 255, 0.96);
    color: #375781;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-prof-chip.is-selected {
    border-color: rgba(37, 99, 235, 0.55);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.98));
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.15);
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-prof-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(229, 238, 252, 0.96);
    font-size: 0.82rem;
    font-weight: 800;
    color: #21478b;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-prof-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-prof-avatar--all {
    background: rgba(15, 39, 68, 0.92);
    color: #fff;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-prof-label {
    font-size: 0.58rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-scroll {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    max-width: 100%;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-agenda-root {
    min-height: 0;
    min-width: 0;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-week-scroll .calendar-agenda-mobile-week-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 0.25rem;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-week-head {
    padding-bottom: 0.35rem;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-sheet {
    --calendar-resource-axis-w: 44px;
    max-width: 100%;
    min-width: 0;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-agenda-body {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.35rem;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-axis {
    flex-shrink: 0;
    width: var(--calendar-resource-axis-w, 44px);
    min-width: var(--calendar-resource-axis-w, 44px);
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-track-col {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-track {
    max-width: 100%;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-card {
    left: 6px;
    right: 6px;
    min-height: 56px;
    padding: 7px 9px 8px;
    border-radius: 14px;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-card-service {
    font-size: 0.66rem;
    font-weight: 700;
    color: #4b6488;
    line-height: 1.25;
    min-width: 0;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    font-size: 0.6rem;
    font-weight: 700;
    color: #637a96;
    margin-top: 1px;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-empty {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 14px;
    padding: 1rem 0.75rem;
    border-radius: 14px;
    border: 1px dashed rgba(186, 202, 228, 0.95);
    background: rgba(255, 255, 255, 0.92);
    color: #6d829e;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    pointer-events: none;
    z-index: 1;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-card[data-summary-tone="confirmed"] {
    border-left-color: #16a34a;
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.96), rgba(255, 255, 255, 0.99));
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-card[data-summary-tone="pending"] {
    border-left-color: #ca8a04;
    background: linear-gradient(180deg, rgba(254, 252, 232, 0.96), rgba(255, 255, 255, 0.99));
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-card[data-summary-tone="cancelled"] {
    border-left-color: #dc2626;
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.96), rgba(255, 255, 255, 0.99));
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-card[data-summary-tone="completed"] {
    border-left-color: #2563eb;
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.99));
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-card[data-summary-tone="no-show"] {
    border-left-color: #fb923c;
    background: linear-gradient(180deg, rgba(255, 247, 237, 0.96), rgba(255, 255, 255, 0.99));
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-card[data-summary-tone="blocked"] {
    border-left-color: #94a3b8;
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.96), rgba(255, 255, 255, 0.99));
  }

  /* Full agenda mobile: eixo mais estreito + colunas que cabem melhor na largura útil (scroll horizontal só quando precisar). */
  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-resource-agenda-sheet {
    --calendar-resource-axis-w: 44px;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-resource-agenda-header,
  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-resource-agenda-body {
    gap: 0.3rem;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-resource-hscroll {
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-operators-row {
    grid-auto-columns: minmax(136px, calc(100vw - 64px));
    gap: 0.35rem;
    width: max-content;
    min-width: 100%;
    scroll-snap-type: x proximity;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-operators-row-head:has(> .calendar-mobile-operator-head:only-child),
  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-operators-row-body:has(> .calendar-mobile-operator-column:only-child) {
    scroll-snap-type: none;
    grid-auto-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-operator-column {
    scroll-snap-align: start;
    min-width: 0;
  }
}

@media (max-width: 380px) {
  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-resource-agenda-sheet {
    --calendar-resource-axis-w: 40px;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-agenda-mobile-sheet {
    --calendar-resource-axis-w: 40px;
  }

  #adminCalendarRoot[data-calendar-layout="mobile"] .calendar-mobile-operators-row {
    grid-auto-columns: minmax(124px, calc(100vw - 56px));
  }
}

@media (max-width: 900px) {
  .admin-page[data-admin-panel-active="calendario"] .admin-main {
    min-height: 0;
    height: auto;
    overflow: visible;
    padding-bottom: calc(6.2rem + env(safe-area-inset-bottom, 0px));
  }

  .admin-page[data-admin-panel-active="calendario"] .admin-content,
  .admin-page[data-admin-panel-active="calendario"] .admin-panel[data-admin-panel="calendario"],
  .admin-page[data-admin-panel-active="calendario"] #adminCalendarRoot,
  .admin-page[data-admin-panel-active="calendario"] .calendar-admin-body {
    min-height: 0;
    height: auto;
  }

  .admin-page[data-admin-panel-active="calendario"] .admin-content {
    padding-top: 0;
  }

  .admin-page[data-admin-panel-active="calendario"] .calendar-admin-stage {
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .admin-page[data-admin-panel-active="calendario"] .calendar-admin-canvas[data-calendar-view="day"] {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(var(--reservaai-vh, 100vh) - 260px);
  }

  .admin-page[data-admin-panel-active="calendario"] .calendar-admin-canvas[data-calendar-view="week"] {
    height: auto;
    max-height: calc(var(--reservaai-vh, 100vh) - 260px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-page[data-admin-panel-active="calendario"] .calendar-admin-canvas:not([data-calendar-view="day"]):not([data-calendar-view="week"]) {
    height: auto;
    max-height: calc(var(--reservaai-vh, 100vh) - 260px);
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

}

/* Cockpit do Dia */
.admin-hero-dashboard-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-hero-search-wrap {
  position: relative;
  min-width: 240px;
}

.admin-hero-search {
  display: block;
  min-width: 0;
}

.admin-hero-search input {
  width: 100%;
  min-height: 40px;
  border-radius: 14px;
  border: 1px solid #e5eaf2;
  background: #fff;
  padding: 0.45rem 0.85rem;
  color: #1d355d;
  font: inherit;
}

.admin-hero-search-dropdown {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 120;
  width: min(420px, calc(100vw - 2rem));
  max-height: min(70vh, 520px);
  overflow: auto;
  padding: 0.75rem;
  border: 1px solid #e5eaf2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(29, 53, 93, 0.14);
}

.admin-hero-search-dropdown[hidden] {
  display: none !important;
}

.admin-hero-search-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.65rem;
}

.admin-hero-search-suggestion {
  min-height: 32px;
  padding: 0.35rem 0.7rem;
  border: 1px solid #e5eaf2;
  border-radius: 999px;
  background: #f7f9fc;
  color: #35527e;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.admin-hero-search-suggestion:hover {
  border-color: #c8d8f0;
  background: #fff;
}

.admin-hero-search-results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.admin-hero-search-results-head span {
  color: #1d355d;
  font-size: 0.82rem;
  font-weight: 800;
}

.admin-hero-search-results-head small {
  color: #6d829f;
  font-size: 0.72rem;
  font-weight: 700;
}

.admin-hero-search-results {
  display: grid;
  gap: 0.45rem;
}

.admin-hero-search-result {
  display: grid;
  gap: 0.2rem;
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid #e8edf5;
  border-radius: 12px;
  background: #fbfcfe;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.admin-hero-search-result:hover,
.admin-hero-search-result:focus-visible {
  border-color: #c8d8f0;
  background: #fff;
  outline: 0;
}

.admin-hero-search-result-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: #6d829f;
}

.admin-hero-search-result-meta span {
  color: #3d6ea8;
}

.admin-hero-search-result strong {
  color: #1d355d;
  font-size: 0.88rem;
}

.admin-hero-search-result p {
  margin: 0;
  color: #617a98;
  font-size: 0.78rem;
  line-height: 1.35;
}

.admin-hero-search-empty {
  padding: 0.65rem 0.75rem;
  color: #617a98;
  font-size: 0.82rem;
  line-height: 1.45;
}

.admin-hero-search-empty strong {
  display: block;
  margin-bottom: 0.25rem;
  color: #1d355d;
}

.admin-hero-notify {
  width: 40px;
  height: 40px;
  border: 1px solid #e5eaf2;
  border-radius: 14px;
  background: #fff;
  color: #35527e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.admin-hero-notify svg {
  width: 18px;
  height: 18px;
}

.admin-hero-notify-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-hero-notify-badge[hidden] {
  display: none !important;
}

.admin-hero-notify-wrap {
  position: relative;
  z-index: 37;
}

.admin-hero-notify-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  z-index: 120;
  min-width: min(380px, calc(100vw - 2rem));
  max-width: min(520px, calc(100vw - 1.25rem));
  max-height: min(72vh, 520px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(198, 215, 241, 0.95);
  background: #fff;
  box-shadow: 0 14px 34px rgba(32, 59, 114, 0.16);
}

.admin-hero-notify-menu[hidden] {
  display: none !important;
}

/* Mobile: painel fixo à largura da viewport (evita corte quando o sino fica à esquerda). --admin-notify-top é definido em admin.js ao abrir. */
@media (max-width: 640px) {
  .admin-hero-notify-wrap {
    z-index: 200;
  }

  .admin-hero-notify-menu {
    position: fixed;
    left: max(0.65rem, env(safe-area-inset-left, 0px));
    right: max(0.65rem, env(safe-area-inset-right, 0px));
    top: var(--admin-notify-top, clamp(6.5rem, 28vw, 11rem));
    width: auto;
    min-width: 0;
    max-width: none;
    transform: none;
    z-index: 200;
    box-sizing: border-box;
  }
}

.admin-hero-notify-menu .admin-cockpit-attention-popover {
  padding: 14px 16px;
  display: grid;
  gap: 12px;
}

.admin-hero-notify-menu .admin-cockpit-attention-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.admin-hero-notify-menu .admin-cockpit-attention-head strong {
  color: var(--ra-text);
  font-size: 0.95rem;
  font-weight: 800;
}

.admin-hero-notify-menu .admin-cockpit-attention-head span {
  color: #dc2626;
  font-size: 0.74rem;
  font-weight: 700;
}

.admin-hero-notify-menu .admin-cockpit-attention-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.admin-hero-notify-menu .admin-cockpit-attention-item {
  border: 1px solid #e9eef7;
  border-radius: 14px;
  background: #fafcff;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.admin-hero-notify-menu .admin-cockpit-attention-item strong {
  display: block;
  color: var(--ra-text);
  font-size: 0.82rem;
  line-height: 1.2;
}

.admin-hero-notify-menu .admin-cockpit-attention-item small {
  display: block;
  margin-top: 3px;
  color: var(--ra-text-soft);
  font-size: 0.72rem;
  line-height: 1.3;
}

.admin-hero-notify-menu .admin-cockpit-attention-item button {
  border: 0;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #fff;
  background: var(--ra-primary);
  cursor: pointer;
}

.admin-hero-notify-menu .admin-cockpit-attention-item[data-tone="danger"] {
  background: #fff7f7;
  border-color: #fcd6d6;
}

.admin-hero-notify-menu .admin-cockpit-attention-item[data-tone="danger"] button {
  background: #ef4444;
}

.admin-hero-notify-menu .admin-cockpit-attention-item[data-tone="warn"] {
  background: #fffaf0;
  border-color: #f8e4b8;
}

.admin-hero-notify-menu .admin-cockpit-attention-item[data-tone="warn"] button {
  background: #f59e0b;
}

.admin-hero-notify-menu .admin-cockpit-attention-item[data-tone="info"] button {
  background: #2563eb;
}

.admin-hero-notify-menu .admin-cockpit-attention-item.is-empty {
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
}

@media (max-width: 420px) {
  .admin-hero-notify-menu .admin-cockpit-attention-item:not(.is-empty) {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .admin-hero-notify-menu .admin-cockpit-attention-item:not(.is-empty) button {
    justify-self: stretch;
    width: 100%;
    text-align: center;
  }
}

.admin-hero-dashboard-user {
  display: grid;
  gap: 0.08rem;
}

.admin-hero-dashboard-user span {
  color: #61799e;
  font-size: 0.73rem;
  font-weight: 600;
}

.admin-cockpit-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.admin-cockpit-grid > * {
  min-width: 0;
}

.admin-cockpit-kpi-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.admin-cockpit-kpi-card {
  border: 1px solid #e5eaf2;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(26, 48, 92, 0.06);
  padding: 0.95rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.admin-cockpit-kpi-card small {
  display: block;
  font-size: 0.74rem;
  color: #647c9f;
  font-weight: 600;
}

.admin-cockpit-kpi-card strong {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.34rem;
  color: #142f58;
}

.admin-cockpit-kpi-card p {
  margin: 0.18rem 0 0;
  color: #1f8f4f;
  font-size: 0.72rem;
  font-weight: 700;
}

.admin-cockpit-kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: #eef4ff;
}

.admin-cockpit-kpi-icon[data-tone="green"] { background: #ebfaef; }
.admin-cockpit-kpi-icon[data-tone="violet"] { background: #f0edff; }
.admin-cockpit-kpi-icon[data-tone="amber"] { background: #fff7e5; }

.admin-cockpit-card {
  border: 1px solid #e5eaf2;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(26, 48, 92, 0.06);
  padding: 1rem;
  display: grid;
  gap: 0.8rem;
}

.admin-cockpit-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.admin-cockpit-card-head h2 {
  margin: 0;
  color: #183864;
  font-size: 0.96rem;
  font-weight: 800;
}

/* Cockpit só existe no dashboard; selectors legados ficam DESLIGADOS no painel dashboards
   para não perder contra .admin-cockpit-grid > .admin-cockpit-card:not(...){ span 3 }. */
.admin-page:not([data-admin-panel-active="dashboards"]) .admin-cockpit-card-next { grid-column: span 5; }
.admin-page:not([data-admin-panel-active="dashboards"]) .admin-cockpit-card-week { grid-column: span 8; }
.admin-page:not([data-admin-panel-active="dashboards"]) .admin-cockpit-card-performance { grid-column: span 4; }
.admin-page:not([data-admin-panel-active="dashboards"]) .admin-cockpit-grid > .admin-cockpit-card:not(.admin-cockpit-card-next):not(.admin-cockpit-card-week):not(.admin-cockpit-card-performance) { grid-column: span 3; }

.admin-cockpit-next-layout {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 0.8rem;
}

.admin-cockpit-next-avatar {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(140deg, #2b4f97, #3b82f6);
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-cockpit-next-main strong {
  color: #132f58;
}

.admin-cockpit-next-main p {
  margin: 0.18rem 0;
  color: #4d658a;
}

.admin-cockpit-next-main small {
  color: #647c9f;
  font-weight: 600;
}

.admin-cockpit-next-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.32rem;
}

.admin-cockpit-next-actions {
  grid-column: 1 / -1;
  margin-top: 0.75rem;
  width: 100%;
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

.admin-cockpit-next-actions > .btn {
  flex: 1 1 140px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

.admin-cockpit-next-actions .admin-next-client-action-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-cockpit-agenda-list {
  display: grid;
  gap: 0.5rem;
}

.admin-cockpit-agenda-item {
  border: 1px solid #e5eaf2;
  border-radius: 14px;
  padding: 0.58rem 0.65rem;
  background: #fbfdff;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
}

.admin-cockpit-agenda-item strong {
  color: #132f58;
  font-size: 0.85rem;
}

.admin-cockpit-agenda-item span {
  display: block;
  color: #1d3f6f;
  font-weight: 700;
}

.admin-cockpit-agenda-item small {
  color: #647c9f;
}

.admin-cockpit-list {
  display: grid;
  gap: 0.5rem;
}

.admin-cockpit-list-item {
  border: 1px solid #e8edf6;
  border-radius: 14px;
  padding: 0.58rem 0.65rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.admin-cockpit-list-item span {
  color: #274a79;
  font-size: 0.84rem;
  display: grid;
  gap: 0.12rem;
}

.admin-cockpit-list-item small {
  color: #6b83a5;
  font-size: 0.72rem;
}

.admin-cockpit-list-item button,
.admin-cockpit-list-item strong {
  color: #2563eb;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
}

.admin-cockpit-week-chart {
  min-height: 180px;
  display: grid;
  align-items: end;
}

.admin-cockpit-week-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 0.45rem;
  min-height: 180px;
}

.admin-cockpit-week-bar-wrap {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
}

.admin-cockpit-week-bar {
  width: 100%;
  max-width: 32px;
  border-radius: 12px 12px 8px 8px;
  background: linear-gradient(180deg, #8cc0ff, #3f8cff);
  box-shadow: 0 8px 18px rgba(63, 140, 255, 0.2);
}

.admin-cockpit-week-bar-wrap small {
  color: #6e85a8;
  font-size: 0.68rem;
  font-weight: 700;
}

.admin-cockpit-week-line-chart {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 0.65rem;
  min-height: 180px;
}

.admin-cockpit-week-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.admin-cockpit-week-chart-head strong {
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 800;
}

.admin-cockpit-week-chart-head span {
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 700;
}

.admin-cockpit-week-line-chart svg {
  width: 100%;
  height: 170px;
  overflow: visible;
}

.admin-cockpit-week-grid-line {
  stroke: rgba(148, 163, 184, 0.28);
  stroke-width: 0.35;
}

.admin-cockpit-week-grid-line.is-mid {
  stroke-dasharray: 1.4 1;
}

.admin-cockpit-week-line-area {
  fill: url(#adminCockpitWeekLineAreaGradient);
}

.admin-cockpit-week-line-path {
  fill: none;
  stroke: #2563eb;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 4px 10px rgba(37, 99, 235, 0.22));
}

.admin-cockpit-week-line-dot {
  fill: #2563eb;
  stroke: #ffffff;
  stroke-width: 1.1;
}

.admin-cockpit-week-line-value {
  fill: #2f4e82;
  font-size: 4.2px;
  font-weight: 700;
}

.admin-cockpit-week-line-labels {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

.admin-cockpit-week-line-labels small {
  text-align: center;
  color: #6e85a8;
  font-size: 0.68rem;
  font-weight: 700;
}

@media (max-width: 1200px) {
  .admin-cockpit-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-cockpit-card-next,
  .admin-cockpit-card-week,
  .admin-cockpit-card-performance,
  .admin-cockpit-grid > .admin-cockpit-card:not(.admin-cockpit-card-next):not(.admin-cockpit-card-week):not(.admin-cockpit-card-performance) {
    grid-column: span 6;
  }
}

/*
 * Header do cockpit em tablet (641–900px): mantém "Olá, …" + busca + perfil em uma única linha.
 * Antes a busca ganhava `min-width: 100%` em ≤900px, quebrando o header em 2 linhas no tablet
 * Samsung (queixa em 15/05/2026 — "deixando o header gordo").
 */
@media (min-width: 641px) and (max-width: 900px) {
  .admin-hero-search {
    min-width: 180px;
    flex: 1 1 200px;
  }

  .admin-hero-search input {
    min-height: 36px;
  }

  .admin-hero.admin-hero-dashboard {
    flex-wrap: nowrap;
    align-items: center;
  }

  .admin-hero-dashboard-actions {
    flex-wrap: nowrap;
  }

  .admin-hero-dashboard-left h1 {
    font-size: clamp(18px, 2.2vw, 22px) !important;
  }

  .admin-hero-dashboard-meta,
  .admin-hero-dashboard-now {
    font-size: 12px !important;
  }

  .admin-hero-dashboard-name {
    display: none;
  }

  .admin-hero-dashboard-user > span[data-i18n="hero.role"] {
    display: none;
  }
}

@media (max-width: 640px) {
  .admin-hero-search {
    min-width: 100%;
    order: 3;
  }
}

@media (max-width: 900px) {
  .admin-cockpit-grid {
    grid-template-columns: 1fr;
  }

  .admin-cockpit-card-next,
  .admin-cockpit-card-week,
  .admin-cockpit-card-performance,
  .admin-cockpit-grid > .admin-cockpit-card:not(.admin-cockpit-card-next):not(.admin-cockpit-card-week):not(.admin-cockpit-card-performance) {
    grid-column: 1 / -1;
  }

  .admin-cockpit-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* Cockpit premium layout overrides */
.admin-dashboard-panel.admin-panel {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.admin-cockpit-page {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 32px 40px;
}

.admin-cockpit-grid {
  gap: 22px;
  align-items: stretch;
}

.admin-cockpit-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.admin-cockpit-kpi-card {
  min-height: 120px;
  padding: 24px;
  border-radius: 22px;
}

.admin-cockpit-kpi-icon {
  width: 48px;
  height: 48px;
  font-size: 1.2rem;
  border-radius: 14px;
}

.admin-cockpit-kpi-card small {
  font-size: 14px;
}

.admin-cockpit-kpi-card strong {
  font-size: 28px;
  line-height: 1.05;
}

.admin-cockpit-kpi-card p {
  font-size: 14px;
}

.admin-hero-dashboard-left h1 {
  font-size: clamp(28px, 2.4vw, 32px);
}

.admin-hero-dashboard-meta,
.admin-hero-dashboard-now,
.admin-hero-dashboard-user span {
  font-size: 14px;
}

.admin-cockpit-card {
  border-radius: 24px;
  padding: 22px 24px;
  gap: 14px;
}

.admin-cockpit-card-head h2 {
  font-size: 16px;
}

.admin-cockpit-card-next {
  grid-column: span 5;
}

.admin-cockpit-card-agenda,
.admin-cockpit-card-pendings {
  grid-column: span 3;
}

.admin-cockpit-card-highlights {
  grid-column: span 4;
}

.admin-cockpit-card-week {
  grid-column: span 8;
}

.admin-cockpit-card-performance {
  grid-column: span 4;
}

.admin-cockpit-next-layout {
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 14px;
}

.admin-cockpit-next-avatar {
  width: 80px;
  height: 80px;
  border-radius: 22px;
  font-size: 26px;
}

.admin-cockpit-next-main strong {
  font-size: 24px;
  line-height: 1.15;
}

.admin-cockpit-next-main p {
  font-size: 15px;
  margin: 0.22rem 0;
}

.admin-cockpit-next-main small {
  font-size: 14px;
}

.admin-operational-badge {
  font-size: 13px;
  line-height: 1.2;
  padding: 0.32rem 0.62rem;
}

.admin-cockpit-next-actions {
  margin-top: 12px;
  gap: 10px;
}

.admin-cockpit-card .btn,
.admin-cockpit-card button {
  min-height: 44px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 14px;
}

.admin-cockpit-next-actions .btn-primary {
  min-width: 180px;
  font-weight: 700;
}

.admin-cockpit-agenda-list {
  gap: 10px;
}

.admin-cockpit-agenda-item {
  min-height: 64px;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.admin-cockpit-agenda-item strong,
.admin-cockpit-agenda-item span,
.admin-cockpit-agenda-item small {
  font-size: 14px;
}

.admin-cockpit-agenda-item span {
  line-height: 1.25;
}

.admin-cockpit-list {
  gap: 10px;
}

.admin-cockpit-list-item {
  min-height: 56px;
  padding: 10px 14px;
  border-radius: 16px;
  gap: 12px;
}

.admin-cockpit-list-item span,
.admin-cockpit-list-item small,
.admin-cockpit-list-item button,
.admin-cockpit-list-item strong {
  font-size: 14px;
}

.admin-cockpit-week-chart {
  min-height: 260px;
}

.admin-cockpit-week-bars {
  min-height: 240px;
}

.admin-cockpit-week-bar {
  max-width: 42px;
}

.admin-cockpit-week-bar-wrap small {
  font-size: 13px;
}

#adminCockpitPerformanceList .admin-cockpit-list-item {
  min-height: 62px;
  padding-block: 12px;
}

@media (max-width: 1200px) {
  .admin-cockpit-page {
    max-width: 1280px;
    padding: 28px 28px;
  }

  .admin-cockpit-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-cockpit-card-next,
  .admin-cockpit-card-agenda,
  .admin-cockpit-card-pendings {
    grid-column: span 4;
  }

  .admin-cockpit-card-highlights,
  .admin-cockpit-card-week {
    grid-column: span 8;
  }

  .admin-cockpit-card-performance {
    grid-column: span 4;
  }
}

@media (max-width: 980px) {
  .admin-cockpit-page {
    padding: 20px 18px;
  }

  .admin-cockpit-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .admin-cockpit-card-next,
  .admin-cockpit-card-agenda,
  .admin-cockpit-card-pendings,
  .admin-cockpit-card-highlights,
  .admin-cockpit-card-week,
  .admin-cockpit-card-performance {
    grid-column: 1 / -1;
  }

  .admin-cockpit-next-layout {
    grid-template-columns: 72px minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .admin-cockpit-page {
    padding: 14px 12px;
  }

  .admin-cockpit-kpi-grid {
    grid-template-columns: 1fr;
  }

  .admin-cockpit-card {
    padding: 16px;
    border-radius: 20px;
  }

  .admin-cockpit-next-layout {
    grid-template-columns: 1fr;
  }

  .admin-cockpit-next-avatar {
    width: 72px;
    height: 72px;
  }

  .admin-cockpit-next-main strong {
    font-size: 22px;
  }
}

/* Cockpit premium polish v2 */
.admin-cockpit-page {
  max-width: 1440px;
  padding: 32px 24px;
}

.admin-cockpit-grid {
  gap: 24px;
}

.admin-cockpit-kpi-grid {
  gap: 24px;
  margin-bottom: 24px;
}

.admin-cockpit-kpi-card {
  min-height: 124px;
  padding: 24px;
}

.admin-cockpit-kpi-icon {
  width: 52px;
  height: 52px;
  font-size: 1.3rem;
}

.admin-cockpit-kpi-card small {
  font-size: 14px;
}

.admin-cockpit-kpi-card strong {
  font-size: 28px;
}

.admin-cockpit-kpi-card p {
  font-size: 14px;
}

.admin-cockpit-card {
  gap: 16px;
  padding: 24px;
}

.admin-cockpit-card-head h2 {
  font-size: 18px;
}

.admin-cockpit-card-next {
  grid-column: span 6;
  min-height: 260px;
  padding: 28px;
  border-radius: 24px;
}

.admin-cockpit-card-agenda,
.admin-cockpit-card-pendings {
  grid-column: span 3;
}

.admin-cockpit-card-highlights {
  grid-column: span 4;
}

.admin-cockpit-card-week {
  grid-column: span 8;
}

.admin-cockpit-card-performance {
  grid-column: span 4;
}

.admin-cockpit-next-layout {
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 16px;
}

.admin-cockpit-next-avatar {
  width: 84px;
  height: 84px;
}

.admin-cockpit-next-main strong {
  font-size: 24px;
}

.admin-cockpit-next-main p,
.admin-cockpit-next-main small {
  font-size: 14px;
}

.admin-cockpit-next-actions {
  margin-top: 14px;
  gap: 12px;
}

.admin-cockpit-card .btn,
.admin-cockpit-card button {
  min-height: 46px;
  font-size: 14px;
  white-space: nowrap;
}

.admin-cockpit-next-actions .btn-primary {
  min-width: 210px;
  font-size: 15px;
}

.admin-operational-badge,
.admin-sync-pill {
  font-size: 14px;
}

.admin-cockpit-agenda-list,
.admin-cockpit-list {
  gap: 12px;
}

.admin-cockpit-agenda-item {
  min-height: 60px;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  padding: 12px 14px;
}

.admin-cockpit-agenda-item strong,
.admin-cockpit-agenda-item span,
.admin-cockpit-agenda-item small {
  font-size: 14px;
}

.admin-cockpit-list-item {
  min-height: 60px;
  padding: 12px 14px;
}

.admin-cockpit-list-item span,
.admin-cockpit-list-item small,
.admin-cockpit-list-item button,
.admin-cockpit-list-item strong {
  font-size: 14px;
}

.admin-cockpit-week-chart {
  min-height: 290px;
}

.admin-cockpit-week-bars {
  min-height: 260px;
}

#adminCockpitPerformanceList .admin-cockpit-list-item {
  min-height: 64px;
}

@media (max-width: 1200px) {
  .admin-cockpit-page {
    padding: 28px 20px;
  }

  .admin-cockpit-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-cockpit-card-next,
  .admin-cockpit-card-agenda,
  .admin-cockpit-card-pendings {
    grid-column: span 4;
  }

  .admin-cockpit-card-highlights,
  .admin-cockpit-card-week {
    grid-column: span 8;
  }

  .admin-cockpit-card-performance {
    grid-column: span 4;
  }
}

@media (max-width: 980px) {
  .admin-cockpit-grid {
    gap: 18px;
  }

  .admin-cockpit-kpi-grid {
    gap: 16px;
    margin-bottom: 8px;
  }

  .admin-cockpit-card-next,
  .admin-cockpit-card-agenda,
  .admin-cockpit-card-pendings,
  .admin-cockpit-card-highlights,
  .admin-cockpit-card-week,
  .admin-cockpit-card-performance {
    grid-column: 1 / -1;
  }
}

/* Cockpit target match (reference image) */
.admin-main .container.admin-shell {
  width: min(100%, 1480px);
  max-width: 1480px;
}

.admin-content {
  gap: 20px;
}

.admin-cockpit-page {
  max-width: 1440px;
  padding: 24px 20px 30px;
}

.admin-cockpit-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}

.admin-cockpit-kpi-grid {
  gap: 20px;
  margin-bottom: 0;
}

.admin-cockpit-kpi-card {
  min-height: 120px;
  border-radius: 20px;
  padding: 24px;
}

.admin-cockpit-card {
  border-radius: 20px;
  padding: 22px;
  gap: 14px;
  align-content: start;
}

.admin-cockpit-card-head h2 {
  font-size: 20px;
  color: #1b3762;
  margin: 0;
  line-height: 1.15;
}

.admin-cockpit-card-next {
  grid-column: span 6;
  min-height: 272px;
  padding: 28px;
}

.admin-cockpit-card-agenda,
.admin-cockpit-card-pendings {
  grid-column: span 3;
}

.admin-cockpit-card-highlights {
  grid-column: span 3;
}

.admin-cockpit-card-week {
  grid-column: span 6;
}

.admin-cockpit-card-performance {
  grid-column: span 3;
}

.admin-cockpit-next-layout {
  grid-template-columns: 76px minmax(0, 1fr);
}

.admin-cockpit-next-avatar {
  width: 76px;
  height: 76px;
  border-radius: 20px;
  font-size: 28px;
}

.admin-cockpit-next-main strong {
  font-size: 24px;
}

.admin-cockpit-next-main p,
.admin-cockpit-next-main small,
.admin-cockpit-kpi-card small,
.admin-cockpit-kpi-card p,
.admin-cockpit-agenda-item strong,
.admin-cockpit-agenda-item span,
.admin-cockpit-agenda-item small,
.admin-cockpit-list-item span,
.admin-cockpit-list-item small,
.admin-cockpit-list-item button,
.admin-cockpit-list-item strong {
  font-size: 14px;
}

.admin-cockpit-card .btn,
.admin-cockpit-card button {
  min-height: 44px;
  white-space: nowrap;
}

.admin-cockpit-next-actions .btn-primary {
  min-width: 200px;
  background: linear-gradient(135deg, #1e56db, #2b6cff);
  border-color: #1b4fd0;
}

.admin-cockpit-next-actions .btn-primary,
.admin-cockpit-next-actions .btn-ghost {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-cockpit-next-actions > .btn-ghost:not(:disabled),
.admin-cockpit-next-actions > .btn-primary:not(:disabled) {
  min-width: min(160px, 100%);
}

.admin-cockpit-next-actions .btn-ghost {
  min-width: 0;
}

.admin-cockpit-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
}

.admin-cockpit-agenda-item {
  min-height: 60px;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  max-width: 100%;
  overflow: hidden;
}

.admin-cockpit-list-item {
  min-height: 58px;
}

.admin-cockpit-week-chart {
  min-height: 250px;
}

.admin-cockpit-agenda-item > div {
  min-width: 0;
  overflow: hidden;
}

.admin-cockpit-agenda-item span,
.admin-cockpit-agenda-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-cockpit-agenda-client {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

.admin-cockpit-agenda-client-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ra-primary), var(--ra-primary-dark));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.admin-cockpit-agenda-client-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-cockpit-agenda-client-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-cockpit-agenda-item .admin-operational-badge {
  max-width: 100%;
  white-space: nowrap;
  flex-shrink: 0;
}

.admin-cockpit-card-agenda {
  overflow: hidden;
}

/* Members management SaaS layout */
.members-page {
  width: min(1200px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

.members-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.members-page-head h2 {
  margin: 0;
  font-size: 1.9rem;
  color: #132f58;
}

.members-page-head p {
  margin: 4px 0 0;
  color: #597296;
}

.members-page-head-actions {
  display: flex;
  align-items: end;
  gap: 10px;
}

.members-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px auto;
  gap: 10px;
}

.members-search input,
.members-role-filter select {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(181, 197, 222, 0.9);
  background: #fff;
  color: #173764;
  font: inherit;
  padding: 0.55rem 0.75rem;
}

.members-table-card {
  border: 1px solid rgba(204, 219, 243, 0.9);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 30px rgba(18, 43, 86, 0.08);
  overflow: hidden;
}

.members-table-wrap {
  overflow: auto;
}

.members-table {
  width: 100%;
  border-collapse: collapse;
}

.members-table th,
.members-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(226, 234, 246, 0.92);
  font-size: 14px;
  text-align: left;
  vertical-align: middle;
}

.members-table th {
  font-size: 12px;
  color: #5f789d;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.members-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.members-user-cell p {
  margin: 0;
  color: #6380aa;
  font-size: 13px;
}

.members-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, #2b5cd6, #3c7df2);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}

.members-user-cell img.members-avatar {
  object-fit: cover;
  background: #e7eefb;
}

.members-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.members-badge.is-admin {
  background: rgba(132, 94, 247, 0.15);
  color: #5f3cc9;
}

.members-badge.is-operator {
  background: rgba(59, 130, 246, 0.16);
  color: #1f54b8;
}

.members-badge.is-active {
  background: rgba(34, 197, 94, 0.16);
  color: #1e7d45;
}

.members-badge.is-inactive {
  background: rgba(239, 68, 68, 0.14);
  color: #b42323;
}

.members-actions {
  display: inline-flex;
  gap: 8px;
}

.members-actions .btn.btn-ghost {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(189, 204, 229, 0.95) !important;
  background: #ffffff !important;
  color: #1f3f6d !important;
  font-size: 13px;
  font-weight: 700;
}

.members-actions .btn.btn-ghost:hover {
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(124, 158, 218, 0.95) !important;
  color: #1b4fb9 !important;
}

.members-actions .members-action-btn {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(189, 204, 229, 0.95) !important;
  background: #ffffff !important;
  color: #1f3f6d !important;
  font-size: 13px;
  font-weight: 700;
}

.members-actions .members-action-btn:hover {
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(124, 158, 218, 0.95) !important;
  color: #1b4fb9 !important;
}

.admin-panel[data-admin-panel="usuarios"] .btn.btn-ghost[data-users-action] {
  border: 1px solid rgba(189, 204, 229, 0.95) !important;
  background: #ffffff !important;
  color: #1f3f6d !important;
}

.admin-panel[data-admin-panel="usuarios"] .btn.btn-ghost[data-users-action]:disabled {
  opacity: 0.55;
  color: #6d84a7 !important;
}

.members-mobile-list {
  display: none;
}

.members-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(9, 20, 40, 0.45);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  padding: 20px;
}

.members-modal-backdrop[hidden] {
  display: none !important;
}

.members-modal {
  width: min(520px, 100%);
  border-radius: 20px;
  border: 1px solid rgba(204, 219, 243, 0.9);
  background: #fff;
  box-shadow: 0 26px 50px rgba(10, 27, 56, 0.25);
  padding: 18px;
  display: grid;
  gap: 14px;
  max-height: min(90vh, 900px);
  overflow: auto;
}

.members-modal-wide {
  width: min(1040px, 100%);
  max-height: min(88vh, 920px);
  overflow: hidden;
}

.members-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.members-modal-head span {
  display: block;
  color: #6a83a8;
  font-size: 12px;
  font-weight: 700;
}

.members-modal-head strong {
  color: #173764;
  font-size: 1.25rem;
}

.members-modal-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(191, 208, 232, 0.9);
  background: #fff;
  color: #385784;
  font-size: 22px;
  line-height: 1;
}

.members-modal-form {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.members-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.members-modal .members-modal-actions .btn.btn-ghost,
.members-modal-wide .members-modal-actions .btn.btn-ghost {
  color: #35527e;
  background: #fff;
  border: 1px solid #e5eaf2;
}

.members-modal .members-modal-actions .btn.btn-ghost:hover:not(:disabled),
.members-modal-wide .members-modal-actions .btn.btn-ghost:hover:not(:disabled) {
  color: #1d355d;
  background: #f7f9fc;
  border-color: #c8d8f0;
}

.members-modal .members-modal-actions .btn.btn-ghost:focus-visible,
.members-modal-wide .members-modal-actions .btn.btn-ghost:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.45);
  outline-offset: 2px;
}

.members-modal-biometric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(200, 215, 237, 0.95);
  background: rgba(245, 249, 255, 0.8);
}

.members-modal-biometric-copy {
  display: grid;
  gap: 2px;
}

.members-modal-biometric-copy span {
  color: #21406d;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.members-modal-biometric-copy small {
  color: #5f7798;
  font-size: 12px;
  font-weight: 600;
}

.members-edit-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  max-height: calc(min(88vh, 920px) - 160px);
}

.members-edit-tabs {
  display: grid;
  gap: 8px;
  align-content: start;
}

.members-edit-tabs button {
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(208, 219, 237, 0.9);
  background: rgba(248, 251, 255, 0.85);
  color: #2c4f7d;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  padding: 0 12px;
}

.members-edit-tabs button.is-active {
  border-color: rgba(88, 126, 212, 0.55);
  background: rgba(59, 130, 246, 0.12);
  color: #1d4db4;
}

.members-edit-form {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
  padding-right: 0;
}

.members-edit-tab {
  display: none;
}

.members-edit-tab.is-active {
  display: block;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  padding-bottom: 8px;
}

.members-modal-wide .members-modal-actions {
  position: static;
  background: transparent;
  padding-top: 12px;
  margin-top: 0;
  border-top: 1px solid rgba(226, 234, 246, 0.95);
}

@media (max-width: 980px) {
  .members-page-head {
    flex-direction: column;
  }

  .members-page-head-actions {
    width: 100%;
    align-items: stretch;
  }

  .members-filters {
    grid-template-columns: 1fr;
  }

  .members-table-wrap {
    display: none;
  }

  .members-mobile-list {
    display: grid;
    gap: 10px;
    padding: 12px;
  }

  .members-mobile-card {
    border: 1px solid rgba(224, 232, 245, 0.95);
    border-radius: 14px;
    background: #fff;
    padding: 12px;
    display: grid;
    gap: 10px;
  }

  .members-mobile-card header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
  }

  .members-mobile-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .members-edit-layout {
    grid-template-columns: 1fr;
    max-height: none;
  }

  .members-edit-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .members-edit-form {
    overflow: hidden;
    padding-right: 0;
  }

  .members-edit-tab.is-active {
    overflow: visible;
    padding-right: 0;
  }
}

/* Tenant users extended profile form */
.tenant-users-form {
  gap: 16px;
}

.tenant-users-section {
  border: 1px solid rgba(223, 231, 245, 0.9);
  border-radius: 16px;
  padding: 14px;
  background: rgba(248, 251, 255, 0.7);
}

.tenant-users-section h3 {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: #24436f;
  font-weight: 800;
}

.tenant-users-form textarea {
  width: 100%;
  min-height: 84px;
  border-radius: 12px;
  border: 1px solid rgba(181, 197, 222, 0.9);
  background: rgba(248, 251, 255, 0.98);
  padding: 0.55rem 0.7rem;
  font: inherit;
  color: #173764;
  resize: vertical;
}

/* Financeiro mock dashboard */
.admin-financeiro-panel {
  display: grid;
  gap: 16px;
}

.admin-page .admin-panel[data-admin-panel="financeiro"] {
  display: none;
}

.admin-page[data-admin-panel-active="financeiro"] .admin-panel[data-admin-panel="financeiro"] {
  display: grid;
}

.admin-financeiro-inner {
  width: 100%;
  max-width: 100%;
  border-radius: 16px;
  border: 1px solid #e5eaf3;
  background: #f7f9fc;
  overflow-x: hidden;
}

.admin-financeiro-panel .page.admin-financeiro-page {
  margin-left: 0;
  min-height: min-content;
  padding: 28px 36px 80px;
}

.admin-financeiro-panel .filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
  position: relative;
}

.admin-financeiro-panel .finance-date-range-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 280px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e5eaf3;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

.admin-financeiro-panel .finance-date-range-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-financeiro-panel .finance-date-range-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.admin-financeiro-panel .finance-date-range-row input[type="date"] {
  height: 40px;
  padding: 0 10px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  color: #0f172a;
  background: #fff;
}

.admin-financeiro-panel .finance-date-range-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.admin-financeiro-panel .finance-date-apply.btn-primary-like {
  height: 40px;
  padding: 0 18px;
  border: none;
  border-radius: 9px;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.admin-financeiro-panel .finance-date-apply.btn-primary-like:hover {
  background: #1d4ed8;
}

/* Mesmo padrão dos outros painéis: scroll global — sem overflow:hidden nos ancestrais, para a sidebar sticky não travar. */

.admin-insights-panel {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.admin-insights-panel .analytics-content {
  padding: 32px;
  background: #f4f7fb;
  min-height: 100%;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  max-width: 1600px;
  margin: 0 auto;
}

.admin-insights-panel .analytics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 20px;
  flex-wrap: wrap;
}

.admin-insights-panel .analytics-header h1 {
  font-size: 34px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 6px;
}

.admin-insights-panel .analytics-header p {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
}

.admin-insights-panel .analytics-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-insights-panel .date-filter,
.admin-insights-panel .secondary-btn,
.admin-insights-panel .primary-btn {
  height: 42px;
  border-radius: 12px;
  padding: 0 18px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  font: inherit;
}

.admin-insights-panel .date-filter,
.admin-insights-panel .secondary-btn {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #111827;
}

.admin-insights-panel .primary-btn {
  background: #2563eb;
  color: #fff;
}

.admin-insights-panel .insights-filter-panel {
  margin-bottom: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

.admin-insights-panel .insights-filter-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}

.admin-insights-panel .insights-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.admin-insights-panel .insights-filter-field input,
.admin-insights-panel .insights-filter-field select {
  min-height: 40px;
  min-width: 160px;
  padding: 0 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  color: #111827;
}

.admin-insights-panel .insights-filter-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

.admin-insights-panel .insights-compare-hint {
  margin: 14px 0 0;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.45;
}

.admin-insights-panel .insights-banner.analytics-banner {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
}

.admin-insights-panel .insights-banner[data-tone="bad"] {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.admin-insights-panel .insights-banner[data-tone="warn"] {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

/* KPI */
.admin-insights-panel .kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.admin-insights-panel .kpi-card {
  background: #fff;
  border-radius: 22px;
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

.admin-insights-panel .kpi-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.admin-insights-panel .success .kpi-icon { background: #dcfce7; }
.admin-insights-panel .warning .kpi-icon { background: #fef3c7; }
.admin-insights-panel .danger .kpi-icon { background: #fee2e2; }
.admin-insights-panel .purple .kpi-icon { background: #ede9fe; }
.admin-insights-panel .teal .kpi-icon { background: #ccfbf1; }

.admin-insights-panel .kpi-content { min-width: 0; }

.admin-insights-panel .kpi-label {
  font-size: 13px;
  color: #6b7280;
}

.admin-insights-panel .kpi-card h3 {
  font-size: 28px;
  margin: 4px 0 0;
  color: #111827;
  font-weight: 700;
  line-height: 1.15;
}

.admin-insights-panel .kpi-card p {
  margin: 6px 0 0;
  font-size: 13px;
  color: #16a34a;
}

.admin-insights-panel .kpi-card p.is-bad { color: #ef4444; }
.admin-insights-panel .kpi-card p.is-neutral { color: #6b7280; }

.admin-insights-panel .analytics-grid {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.admin-insights-panel .analytics-grid .analytics-card.large {
  grid-column: span 1;
}

.admin-insights-panel .bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.admin-insights-panel .bottom-grid .analytics-card {
  overflow-x: auto;
}

.admin-insights-panel .insights-table-empty {
  text-align: center;
  color: #9ca3af;
  padding: 20px !important;
}

.admin-insights-panel .insights-subgrid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
  align-items: stretch;
}

.admin-insights-panel .analytics-card {
  background: #fff;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

.admin-insights-panel .card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}

.admin-insights-panel .card-header-row {
  align-items: flex-start;
}

.admin-insights-panel .card-header h3 {
  font-size: 18px;
  color: #111827;
  margin: 0 0 4px;
  font-weight: 600;
}

.admin-insights-panel .card-header span {
  font-size: 13px;
  color: #6b7280;
}

.admin-insights-panel .metric-big {
  font-size: 42px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 20px;
  line-height: 1;
}

.admin-insights-panel .chart-placeholder {
  height: 220px;
  border-radius: 18px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 14px;
  overflow: hidden;
}

.admin-insights-panel .chart-placeholder.small {
  height: 140px;
}

.admin-insights-panel .chart-placeholder svg {
  width: 100%;
  height: 100%;
  display: block;
}

.admin-insights-panel .insights-chart-empty {
  padding: 12px;
  text-align: center;
}

.admin-insights-panel .donut-placeholder {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  margin: 0 auto 12px;
  border: 16px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 700;
  color: #111827;
  background: #fff;
  box-sizing: border-box;
}

.admin-insights-panel .insights-donut-wrap.insights-donut-svg {
  border: none;
  background: transparent;
}

.admin-insights-panel .insights-donut-wrap .admin-insights-gauge {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto;
}

.admin-insights-panel .insights-donut-wrap .admin-insights-gauge svg {
  width: 100%;
  height: 100%;
}

.admin-insights-panel .insights-donut-wrap .admin-insights-gauge-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 800;
  color: #111827;
}

.admin-insights-panel .insights-noshow-foot {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
}

.admin-insights-panel .analytics-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-insights-panel .analytics-table th {
  text-align: left;
  padding-bottom: 14px;
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
}

.admin-insights-panel .analytics-table td {
  padding: 14px 0;
  border-top: 1px solid #f1f5f9;
  color: #111827;
  font-size: 14px;
}

.admin-insights-panel .insights-link-btn {
  border: none;
  background: transparent;
  color: #2563eb;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  flex-shrink: 0;
  font: inherit;
}

.admin-insights-panel .insights-summary-card {
  background: linear-gradient(90deg, #eff6ff 0%, #fff 55%);
  border: 1px solid #dbeafe;
}

.admin-insights-panel .insights-summary-inner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.admin-insights-panel .insights-summary-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #dbeafe;
  color: #2563eb;
  font-size: 22px;
  font-weight: 800;
  flex-shrink: 0;
}

.admin-insights-panel .insights-summary-card h3 {
  margin: 0 0 8px;
  color: #2563eb;
  font-size: 18px;
  font-weight: 700;
}

.admin-insights-panel .insights-summary-card p {
  margin: 4px 0;
  color: #334155;
  font-size: 14px;
  line-height: 1.45;
}

/* Week list (reuso) */
.admin-insights-panel .admin-insights-week-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-insights-panel .admin-insights-week-row {
  display: grid;
  grid-template-columns: 88px 1fr 40px;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #374151;
}

.admin-insights-panel .admin-insights-week-row.is-total {
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
  margin-top: 4px;
}

.admin-insights-panel .admin-insights-track {
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}

.admin-insights-panel .admin-insights-track span {
  display: block;
  height: 100%;
  background: #2563eb;
  border-radius: 999px;
}

.admin-insights-panel .admin-insights-quality-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-insights-panel .admin-insights-quality-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
}

.admin-insights-panel .admin-insights-quality-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.admin-insights-panel .admin-insights-quality-list span { color: #6b7280; }
.admin-insights-panel .admin-insights-quality-list strong { color: #111827; }

.admin-insights-panel .insights-week-card .card-header { margin-bottom: 12px; }

@media (max-width: 1400px) {
  .admin-insights-panel .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .admin-insights-panel .analytics-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .admin-insights-panel .analytics-content { padding: 20px 16px 48px; }
  .admin-insights-panel .kpi-grid,
  .admin-insights-panel .analytics-grid,
  .admin-insights-panel .bottom-grid,
  .admin-insights-panel .insights-subgrid {
    grid-template-columns: 1fr;
  }
  .admin-insights-panel .analytics-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.admin-nav-section-title {
  margin: 0.9rem 0.45rem 0.25rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: rgba(167, 192, 229, 0.78);
}

.admin-page[data-admin-sidebar="collapsed"] .admin-nav-section-title {
  display: none;
}

.financeiro-period-filter {
  display: flex;
  gap: 8px;
  align-items: center;
}

.financeiro-period-filter input {
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(196, 211, 236, 0.95);
  background: #fff;
  padding: 0 10px;
  font: inherit;
  color: #1d3c68;
}

.financeiro-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.financeiro-card {
  border: 1px solid rgba(218, 229, 245, 0.95);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(12, 36, 74, 0.08);
  padding: 14px;
}

.financeiro-kpi-card {
  display: grid;
  gap: 8px;
}

.financeiro-kpi-card h4 {
  margin: 0;
  font-size: 12px;
  color: #6a83a8;
  font-weight: 700;
}

.financeiro-kpi-value {
  margin: 0;
  font-size: 1.45rem;
  color: #163862;
  font-weight: 800;
}

.financeiro-kpi-trend {
  margin: 0;
  font-size: 12px;
  color: #1d9f63;
  font-weight: 700;
}

.financeiro-kpi-spark {
  height: 30px;
}

.financeiro-kpi-spark svg,
.financeiro-revenue-chart svg {
  width: 100%;
  height: 100%;
  display: block;
}

.financeiro-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 14px;
}

.financeiro-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.financeiro-card-head h3 {
  margin: 0;
  color: #173764;
  font-size: 1.02rem;
}

.financeiro-card-head select {
  min-height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(199, 214, 238, 0.96);
  padding: 0 8px;
  font: inherit;
  color: #254572;
}

.financeiro-revenue-chart {
  min-height: 230px;
}

.financeiro-prof-grid {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.financeiro-donut {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
}

.financeiro-donut-center {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  color: #173764;
  font-size: 12px;
}

.financeiro-donut-center strong {
  font-size: 1rem;
}

.financeiro-pro-list,
.financeiro-side-list {
  display: grid;
  gap: 8px;
}

.financeiro-pro-item,
.financeiro-side-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #2e4f7c;
}

.financeiro-pro-item small,
.financeiro-side-item small {
  color: #6c85a8;
}

.financeiro-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 14px;
}

.financeiro-table-head {
  align-items: flex-start;
}

.financeiro-tabs {
  display: inline-flex;
  border: 1px solid rgba(215, 227, 245, 0.98);
  border-radius: 10px;
  padding: 2px;
  gap: 2px;
  margin-top: 8px;
}

.financeiro-tabs button {
  border: 0;
  background: transparent;
  min-height: 30px;
  border-radius: 8px;
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #5f79a1;
}

.financeiro-tabs button.is-active {
  background: rgba(59, 130, 246, 0.12);
  color: #1f4fb6;
}

.financeiro-table-tools {
  display: flex;
  gap: 8px;
  align-items: center;
}

.financeiro-table-tools input {
  min-width: 260px;
  min-height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(196, 212, 236, 0.96);
  padding: 0 10px;
  font: inherit;
}

.financeiro-table-wrap {
  overflow: auto;
  border: 1px solid rgba(226, 236, 248, 0.95);
  border-radius: 12px;
}

.financeiro-table {
  width: 100%;
  border-collapse: collapse;
}

.financeiro-table th,
.financeiro-table td {
  font-size: 12px;
  padding: 10px;
  border-bottom: 1px solid rgba(233, 239, 248, 0.95);
  text-align: left;
  color: #27466f;
  white-space: nowrap;
}

.financeiro-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(59, 130, 246, 0.12);
  color: #1f4fb6;
}

.financeiro-pagination {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: #6682a8;
  font-size: 12px;
}

.financeiro-pages {
  display: inline-flex;
  gap: 4px;
}

.financeiro-pages button {
  min-width: 30px;
  min-height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(206, 220, 241, 0.96);
  background: #fff;
  color: #2d4c78;
  font: inherit;
  font-size: 12px;
}

.financeiro-pages button.is-active {
  background: rgba(59, 130, 246, 0.14);
  color: #174bb2;
}

.financeiro-side-cards {
  display: grid;
  gap: 14px;
}

.financeiro-progress {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(222, 232, 247, 0.9);
  overflow: hidden;
  margin-top: 4px;
}

.financeiro-progress > span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
}

.financeiro-new-entry-btn {
  position: fixed;
  right: 24px;
  bottom: 28px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(135deg, #2e63d8, #1e4ebc);
  color: #fff;
  font: inherit;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(24, 75, 177, 0.35);
  z-index: 50;
}

@media (max-width: 1200px) {
  .financeiro-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .financeiro-main-grid,
  .financeiro-bottom-grid {
    grid-template-columns: 1fr;
  }
  .financeiro-table-tools {
    width: 100%;
    flex-wrap: wrap;
  }
  .financeiro-table-tools input {
    min-width: 0;
    flex: 1;
  }
}

@media (max-width: 640px) {
  .financeiro-kpi-grid {
    grid-template-columns: 1fr;
  }
  .financeiro-period-filter {
    width: 100%;
    flex-wrap: wrap;
  }
  .financeiro-prof-grid {
    grid-template-columns: 1fr;
  }
}

/* Financeiro panel with standalone page style */
.admin-financeiro-panel {
  background: #f7f9fc;
  border-color: #e5eaf3;
  box-shadow: none;
}

.admin-financeiro-panel .financeiro-page-header,
.admin-financeiro-panel .page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
}

.admin-financeiro-panel h1 {
  margin: 0;
  font-size: 34px;
  color: #0f172a;
}

.admin-financeiro-panel .financeiro-page-header p,
.admin-financeiro-panel .page-header p {
  margin: 8px 0 0;
  color: #64748b;
}

.admin-financeiro-panel .date-filter,
.admin-financeiro-panel .filter-btn,
.admin-financeiro-panel .table-actions button {
  height: 44px;
  padding: 0 18px;
  border: 1px solid #dbe3ef;
  background: #fff;
  border-radius: 9px;
  color: #0f172a;
  font-weight: 500;
}

.admin-financeiro-panel .kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

.admin-financeiro-panel .card {
  background: #fff;
  border: 1px solid #e5eaf3;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.admin-financeiro-panel .kpi-card {
  padding: 20px;
  min-height: 150px;
  overflow: hidden;
}

.admin-financeiro-panel .kpi-card small { color: #64748b; font-size: 14px; }
.admin-financeiro-panel .kpi-card strong { display: block; margin-top: 8px; font-size: 25px; color: #0f172a; }
.admin-financeiro-panel .kpi-card .growth { display: block; margin-top: 8px; color: #16a34a; font-size: 13px; }
.admin-financeiro-panel .sparkline { height: 42px; margin-top: 12px; border-radius: 10px; }
.admin-financeiro-panel .sparkline svg { width: 100%; height: 100%; display: block; }

.admin-financeiro-panel .dashboard-grid {
  display: grid;
  grid-template-columns: 1.45fr 0.95fr;
  gap: 18px;
  margin-bottom: 18px;
}

.admin-financeiro-panel .revenue-card,
.admin-financeiro-panel .professional-card,
.admin-financeiro-panel .table-card { padding: 22px; }

.admin-financeiro-panel .card-header,
.admin-financeiro-panel .table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-financeiro-panel h2 { margin: 0; font-size: 18px; color: #0f172a; }

.admin-financeiro-panel .card-header select {
  height: 38px;
  border: 1px solid #dbe3ef;
  background: #fff;
  border-radius: 9px;
  padding: 0 12px;
}

.admin-financeiro-panel .chart-legend { margin-top: 18px; color: #64748b; font-size: 13px; }
.admin-financeiro-panel .chart-legend span {
  display: inline-block;
  width: 20px;
  height: 5px;
  border-radius: 999px;
  background: #2563eb;
  margin-right: 8px;
}

.admin-financeiro-panel .line-chart {
  height: 230px;
  margin-top: 18px;
  background:
    linear-gradient(#e5eaf3 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(180deg, rgba(37, 99, 235, 0.18), rgba(37, 99, 235, 0));
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.admin-financeiro-panel .line-chart::before {
  content: "";
  position: absolute;
  inset: 20px 20px 35px 20px;
  background: #2563eb;
  clip-path: polygon(0 82%, 8% 38%, 16% 68%, 24% 22%, 32% 60%, 40% 70%, 48% 18%, 56% 52%, 64% 57%, 72% 76%, 80% 40%, 88% 26%, 96% 55%, 100% 14%);
  height: 4px;
  top: 80px;
}

.admin-financeiro-panel .line-chart::after {
  content: "01/05   02/05   03/05   04/05   05/05   06/05   07/05   08/05   09/05   10/05   11/05   12/05   13/05   14/05";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 8px;
  color: #64748b;
  font-size: 12px;
  word-spacing: 13px;
}

.admin-financeiro-panel .professional-content { display: flex; align-items: center; gap: 32px; margin-top: 28px; }
.admin-financeiro-panel .donut {
  width: 210px;
  height: 210px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.admin-financeiro-panel .donut > div {
  width: 122px;
  height: 122px;
  background: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
}
.admin-financeiro-panel .donut span { color: #64748b; }
.admin-financeiro-panel .donut strong { display: block; font-size: 17px; }

.admin-financeiro-panel .professional-row,
.admin-financeiro-panel .payment-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
}

.admin-financeiro-panel .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 8px;
}

.admin-financeiro-panel .content-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.65fr;
  gap: 18px;
}

.admin-financeiro-panel .table-actions { display: flex; gap: 10px; }
.admin-financeiro-panel .table-actions input {
  width: 360px;
  height: 40px;
  border: 1px solid #dbe3ef;
  border-radius: 9px;
  padding: 0 14px;
}

.admin-financeiro-panel .tabs {
  display: flex;
  gap: 4px;
  margin: 18px 0;
  border: 1px solid #e5eaf3;
  border-radius: 10px;
  width: max-content;
  padding: 4px;
}

.admin-financeiro-panel .tabs button {
  border: 0;
  background: transparent;
  padding: 8px 18px;
  border-radius: 8px;
}

.admin-financeiro-panel .tabs .selected,
.admin-financeiro-panel .tabs .is-active {
  background: #eef4ff;
  color: #2563eb;
}

.admin-financeiro-panel table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-financeiro-panel th { text-align: left; color: #64748b; font-weight: 600; padding: 14px 10px; border-bottom: 1px solid #e5eaf3; }
.admin-financeiro-panel td { padding: 16px 10px; border-bottom: 1px solid #eef2f7; color: #0f172a; }

.admin-financeiro-panel .badge { padding: 5px 10px; border-radius: 999px; font-size: 12px; }
.admin-financeiro-panel .badge.service { color: #2563eb; background: #dbeafe; }
.admin-financeiro-panel .badge.product { color: #16a34a; background: #dcfce7; }
.admin-financeiro-panel .badge.pix { color: #16a34a; background: #dcfce7; }
.admin-financeiro-panel .badge.cardpay { color: #7c3aed; background: #ede9fe; }
.admin-financeiro-panel .badge.cash { color: #d97706; background: #fef3c7; }

.admin-financeiro-panel .admin-financeiro-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  margin: 6px 0 0;
}

.admin-financeiro-panel .admin-financeiro-table-scroll table {
  min-width: 680px;
}

.admin-financeiro-panel .pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  color: #64748b;
  font-size: 14px;
}

.admin-financeiro-panel .pagination button {
  min-width: 34px;
  height: 34px;
  border: 1px solid #dbe3ef;
  background: #fff;
  border-radius: 8px;
}

.admin-financeiro-panel .pagination .current {
  border-color: #2563eb;
  color: #2563eb;
}

.admin-financeiro-panel .right-column { display: flex; flex-direction: column; gap: 18px; }
.admin-financeiro-panel .right-column .card { padding: 22px; }
.admin-financeiro-panel .progress-item { margin-top: 18px; }
.admin-financeiro-panel .progress-top { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.admin-financeiro-panel .progress-bar { height: 8px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.admin-financeiro-panel .progress-bar span { display: block; height: 100%; border-radius: 999px; }

.admin-financeiro-panel .floating-btn {
  position: fixed;
  right: 36px;
  bottom: 28px;
  height: 54px;
  padding: 0 28px;
  border: 0;
  background: #2563eb;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.32);
  font-weight: 700;
  font-size: 15px;
  z-index: 60;
}

/* === Financeiro — overrides premium (KPIs com tom, tabs em pill, badges) === */
.admin-financeiro-panel .kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.admin-financeiro-panel .kpi-card {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #ffffff;
  padding: 18px 20px 16px;
  min-height: 132px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
}

.admin-financeiro-panel .kpi-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: transparent;
  transition: background 0.18s ease;
}

.admin-financeiro-panel .kpi-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

.admin-financeiro-panel .kpi-card small {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  position: relative;
  z-index: 1;
}

.admin-financeiro-panel .kpi-card strong {
  margin-top: 4px;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #0f1f3d;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}

.admin-financeiro-panel .kpi-card .growth {
  font-size: 0.74rem;
  color: #16a34a;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.admin-financeiro-panel .kpi-card .kpi-hint {
  display: block;
  font-size: 0.68rem;
  color: #94a3b8;
  margin-top: 2px;
  font-weight: 500;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
}

.admin-financeiro-panel .kpi-card[data-tone="primary"] {
  background: linear-gradient(135deg, var(--ra-primary, #2563EB), var(--ra-primary-dark, #1D4ED8));
  border-color: transparent;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
}

.admin-financeiro-panel .kpi-card[data-tone="primary"] small,
.admin-financeiro-panel .kpi-card[data-tone="primary"] strong,
.admin-financeiro-panel .kpi-card[data-tone="primary"] .growth,
.admin-financeiro-panel .kpi-card[data-tone="primary"] .kpi-hint {
  color: #ffffff;
}

.admin-financeiro-panel .kpi-card[data-tone="primary"] .growth {
  opacity: 0.92;
}

.admin-financeiro-panel .kpi-card[data-tone="primary"] .kpi-hint {
  opacity: 0.78;
}

.admin-financeiro-panel .kpi-card[data-tone="indigo"] {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(59, 130, 246, 0.06));
  border-color: rgba(99, 102, 241, 0.22);
}

.admin-financeiro-panel .kpi-card[data-tone="indigo"] strong {
  color: #312e81;
}

.admin-financeiro-panel .kpi-card[data-tone="amber"] {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(217, 119, 6, 0.05));
  border-color: rgba(217, 119, 6, 0.20);
}

.admin-financeiro-panel .kpi-card[data-tone="amber"] strong {
  color: #92400e;
}

/* Tabs em pill, com gradiente azul no item selecionado */
.admin-financeiro-panel .tabs {
  gap: 6px;
  padding: 5px;
  background: #f8fafc;
  border-color: #e2e8f0;
}

.admin-financeiro-panel .tabs button {
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
  border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.admin-financeiro-panel .tabs button:hover {
  background: rgba(37, 99, 235, 0.06);
  color: #1d4ed8;
}

.admin-financeiro-panel .tabs .selected,
.admin-financeiro-panel .tabs .is-active {
  background: linear-gradient(135deg, var(--ra-primary, #2563EB), var(--ra-primary-dark, #1D4ED8));
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
}

.admin-financeiro-panel .tabs .selected:hover,
.admin-financeiro-panel .tabs .is-active:hover {
  background: linear-gradient(135deg, var(--ra-primary, #2563EB), var(--ra-primary-dark, #1D4ED8));
  color: #ffffff;
}

/* Badges de categoria */
.admin-financeiro-panel .badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 0.6rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.admin-financeiro-panel .badge.service {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.12);
}

.admin-financeiro-panel .badge.product {
  color: #166534;
  background: rgba(34, 197, 94, 0.14);
}

.admin-financeiro-panel .badge.mixed {
  color: #0c4a6e;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(34, 197, 94, 0.12));
  border: 1px solid rgba(14, 165, 233, 0.20);
}

.admin-financeiro-panel .badge.package {
  color: #5b21b6;
  background: rgba(139, 92, 246, 0.14);
}

/* ===== Crédito de pacote no Financeiro ===== */

.admin-financeiro-panel .badge.package-credit {
  color: #047857;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(5, 150, 105, 0.28);
}

.admin-financeiro-panel tr[data-is-package-credit="1"] {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.05), transparent 60%);
}

.admin-financeiro-panel .admin-financeiro-amount-credit {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #047857;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(5, 150, 105, 0.28);
  letter-spacing: 0.01em;
}

.admin-financeiro-panel .progress-item.is-package .progress-top span:first-child::before {
  content: "🎟️ ";
}

.admin-financeiro-panel .category-row-credit-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: #047857;
  font-weight: 600;
}

.admin-financeiro-panel .payment-row.is-credit {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(20, 184, 166, 0.08));
  border-radius: 10px;
  padding-inline: 8px;
}

.admin-financeiro-panel .payment-row.is-credit > span:first-child {
  color: #047857;
  font-weight: 700;
}

.admin-financeiro-panel .payment-row .payment-row-credit {
  color: #047857;
}

.admin-financeiro-panel .payment-row .payment-row-credit-hint {
  color: #047857;
  font-size: 0.72rem;
  font-weight: 600;
}

/* Tipografia da tabela um pouco mais editorial */
.admin-financeiro-panel th {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  background: rgba(248, 250, 252, 0.7);
}

.admin-financeiro-panel tbody tr {
  transition: background 0.15s ease;
}

.admin-financeiro-panel tbody tr:hover {
  background: rgba(248, 250, 252, 0.85);
}

.admin-financeiro-panel tbody td strong {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

.admin-financeiro-panel .table-card,
.admin-financeiro-panel .revenue-card,
.admin-financeiro-panel .professional-card,
.admin-financeiro-panel .right-column .card {
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.admin-financeiro-panel .revenue-card h2,
.admin-financeiro-panel .professional-card h2,
.admin-financeiro-panel .table-card h2,
.admin-financeiro-panel .right-column .card h2 {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f1f3d;
  letter-spacing: -0.005em;
}

.admin-financeiro-panel .chart-legend {
  font-size: 0.74rem;
  color: #64748b;
}

.admin-financeiro-panel .professional-row strong,
.admin-financeiro-panel .payment-row strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

@media (max-width: 1200px) {
  .admin-insights-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .admin-insights-main-grid,
  .admin-insights-bottom-grid {
    grid-template-columns: 1fr;
  }

  .admin-financeiro-panel .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .admin-financeiro-panel .dashboard-grid,
  .admin-financeiro-panel .content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .admin-insights-page { padding: 20px; }
  .admin-insights-header,
  .admin-insights-summary-card { flex-direction: column; align-items: stretch; }
  .admin-insights-kpi-grid { grid-template-columns: 1fr; }
  .admin-insights-filters { flex-direction: column; }
  .admin-insights-bar-chart { gap: 12px; overflow-x: auto; }
  .admin-insights-service-row { grid-template-columns: 28px 1fr; }
  .admin-insights-service-bar,
  .admin-insights-service-value,
  .admin-insights-service-percent { display: none; }
  .admin-insights-client-row { grid-template-columns: 34px 1fr; }
  .admin-insights-client-row .admin-insights-muted { display: none; }
  .admin-insights-item { grid-template-columns: 42px 1fr; }
  .admin-insights-item .admin-insights-mini-btn { grid-column: 2; width: max-content; }

  .admin-financeiro-panel .financeiro-page-header,
  .admin-financeiro-panel .page-header,
  .admin-financeiro-panel .filters,
  .admin-financeiro-panel .table-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .admin-financeiro-panel .kpi-grid { grid-template-columns: 1fr; }
  .admin-financeiro-panel .table-actions input { width: 100%; }
  .admin-financeiro-panel .floating-btn { right: 20px; bottom: 90px; }
}

/* Financeiro embutido — telemóvel / tablet estreito: scroll vertical da página e tabela com scroll horizontal */
@media (max-width: 900px) {
  .admin-page[data-admin-panel-active="financeiro"] {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .admin-page[data-admin-panel-active="financeiro"] .admin-main {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: calc(6.4rem + env(safe-area-inset-bottom, 0px));
    padding-top: 0.5rem;
  }

  .admin-page[data-admin-panel-active="financeiro"] .admin-shell {
    height: auto;
    min-height: 0;
  }

  .admin-page[data-admin-panel-active="financeiro"] .admin-content {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .admin-page[data-admin-panel-active="financeiro"] .admin-panel[data-admin-panel="financeiro"] {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 0.65rem;
  }

  .admin-financeiro-inner {
    height: auto;
    max-height: none;
    overflow: visible;
    border-radius: 14px;
  }

  .admin-financeiro-panel .page.admin-financeiro-page {
    padding: 10px 10px 28px;
  }

  .admin-financeiro-panel .page-header h1 {
    font-size: clamp(1.25rem, 5vw, 1.65rem);
    line-height: 1.2;
  }

  .admin-financeiro-panel .page-header p {
    font-size: 0.875rem;
    margin-top: 6px;
  }

  .admin-financeiro-panel .filters {
    width: 100%;
  }

  .admin-financeiro-panel .filters .date-filter,
  .admin-financeiro-panel .filters .filter-btn {
    flex: 1 1 calc(50% - 6px);
    min-height: 44px;
    box-sizing: border-box;
  }

  .admin-financeiro-panel .finance-date-range-popover {
    left: 0;
    right: auto;
    min-width: min(100%, 320px);
    max-width: calc(100vw - 24px);
  }

  .admin-financeiro-panel .kpi-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .admin-financeiro-panel .revenue-card .card-header {
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
  }

  .admin-financeiro-panel .card-header select {
    width: 100%;
    max-width: 280px;
  }

  .admin-financeiro-panel .line-chart {
    height: 180px;
  }

  .admin-financeiro-panel .professional-content {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    margin-top: 18px;
  }

  .admin-financeiro-panel .donut {
    width: min(200px, 72vw);
    height: min(200px, 72vw);
    align-self: center;
    flex-shrink: 0;
  }

  .admin-financeiro-panel .professional-list {
    width: 100%;
    min-width: 0;
  }

  .admin-financeiro-panel .table-card {
    padding: 16px;
    min-width: 0;
  }

  .admin-financeiro-panel .table-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .admin-financeiro-panel .table-actions input {
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
  }

  .admin-financeiro-panel .table-actions button {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
  }

  .admin-financeiro-panel .tabs {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 6px;
    padding: 6px;
    margin: 12px 0;
  }

  .admin-financeiro-panel .tabs button {
    flex: 0 0 auto;
    padding: 10px 14px;
    white-space: nowrap;
    font-size: 13px;
    min-height: 40px;
  }

  .admin-financeiro-panel .admin-financeiro-table-scroll {
    margin-left: -6px;
    margin-right: -6px;
    padding: 0 6px 6px;
  }

  .admin-financeiro-panel .admin-financeiro-table-scroll table {
    min-width: 720px;
    font-size: 13px;
  }

  .admin-financeiro-panel .admin-financeiro-table-scroll th,
  .admin-financeiro-panel .admin-financeiro-table-scroll td {
    padding: 10px 8px;
    white-space: nowrap;
  }

  .admin-financeiro-panel .admin-financeiro-table-scroll td:nth-child(3) {
    white-space: normal;
    max-width: 160px;
  }

  .admin-financeiro-panel .pagination {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    text-align: center;
  }

  .admin-financeiro-panel .pagination span {
    flex: 1 1 100%;
    font-size: 13px;
    order: -1;
  }

  .admin-financeiro-panel .pagination button {
    min-width: 40px;
    min-height: 40px;
  }

  .admin-financeiro-panel .floating-btn {
    right: 14px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    height: 48px;
    padding: 0 20px;
    font-size: 14px;
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.26);
  }

  .admin-financeiro-panel .right-column .card {
    padding: 16px;
  }

  .admin-financeiro-panel .kpi-card {
    padding: 16px;
    min-height: 0;
  }

  .admin-financeiro-panel .kpi-card strong {
    font-size: 1.35rem;
  }
}

/* Desktop rebalance legado — NÃO aplica ao Cockpit real (painel dashboards), onde spans são definidos em [data-admin-panel-active="dashboards"]. */
@media (min-width: 901px) {
  .admin-page:not([data-admin-panel-active="dashboards"]) .admin-cockpit-card-next {
    grid-column: span 5;
  }

  .admin-page:not([data-admin-panel-active="dashboards"]) .admin-cockpit-card-agenda {
    grid-column: span 4;
  }

  .admin-page:not([data-admin-panel-active="dashboards"]) .admin-cockpit-card-pendings {
    grid-column: span 3;
  }

  .admin-page:not([data-admin-panel-active="dashboards"]) .admin-cockpit-card-agenda .admin-cockpit-agenda-item {
    grid-template-columns: 78px minmax(0, 1fr) auto;
  }

  .admin-page:not([data-admin-panel-active="dashboards"]) .admin-cockpit-card-agenda .admin-cockpit-agenda-item span {
    white-space: normal;
    line-height: 1.2;
  }
}

@media (min-width: 901px) {
  .admin-page:not([data-admin-panel-active="dashboards"]) .admin-cockpit-card-next {
    grid-column: span 4 !important;
  }

  .admin-page:not([data-admin-panel-active="dashboards"]) .admin-cockpit-card-agenda {
    grid-column: span 5 !important;
  }

  .admin-page:not([data-admin-panel-active="dashboards"]) .admin-cockpit-card-pendings {
    grid-column: span 3 !important;
  }

  .admin-page:not([data-admin-panel-active="dashboards"]) .admin-cockpit-card-agenda .admin-cockpit-agenda-list {
    width: 100%;
  }

  .admin-page:not([data-admin-panel-active="dashboards"]) .admin-cockpit-card-agenda .admin-cockpit-agenda-item {
    width: 100%;
    grid-template-columns: 86px minmax(0, 1fr) auto !important;
    align-items: center;
  }

  .admin-page:not([data-admin-panel-active="dashboards"]) .admin-cockpit-card-agenda .admin-cockpit-agenda-item strong {
    text-align: left;
  }

  .admin-page:not([data-admin-panel-active="dashboards"]) .admin-cockpit-card-agenda .admin-cockpit-agenda-item .admin-operational-badge {
    justify-self: end;
    white-space: nowrap;
  }
}

/* Final mobile ordering + next-client stability */
@media (max-width: 980px) {
  .admin-cockpit-card-next { order: 1; }
  .admin-cockpit-card-cockpit-upsell { order: 2; }
  .admin-cockpit-card-agenda { order: 3; }
  .admin-cockpit-kpi-grid { order: 4; }
  .admin-cockpit-card-highlights { order: 5; }
  .admin-cockpit-card-week { order: 6; }
  .admin-cockpit-card-performance { order: 7; }
}

@media (max-width: 640px) {
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-cockpit-card-head {
    gap: 0.35rem;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-cockpit-card-head h2 {
    min-width: 0;
    flex: 1;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-cockpit-card-next-head-trailing {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-cockpit-fit-in-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    flex: 0 0 36px;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-cockpit-fit-in-btn svg {
    width: 18px;
    height: 18px;
  }

  .admin-page[data-admin-panel-active="dashboards"] #adminNextClientDelayBadge {
    font-size: 0.62rem;
    font-weight: 700;
    min-height: 0;
    padding: 0.18rem 0.42rem;
    line-height: 1.2;
    flex-shrink: 0;
  }

  .admin-cockpit-card-next {
    min-height: 0;
    padding: 20px 18px;
  }

  .admin-cockpit-next-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .admin-cockpit-next-main {
    min-width: 0;
  }

  .admin-cockpit-next-main p {
    margin: 0.1rem 0 0.35rem;
  }

  .admin-cockpit-next-main small {
    display: block;
    white-space: normal;
    line-height: 1.35;
  }

  .admin-cockpit-next-badges {
    gap: 8px;
    margin-bottom: 8px;
  }

  .admin-cockpit-next-badges .admin-operational-badge {
    max-width: 100%;
    white-space: normal;
    line-height: 1.25;
  }

  .admin-cockpit-next-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .admin-cockpit-next-actions .btn-primary,
  .admin-cockpit-next-actions .btn-ghost {
    width: 100%;
    min-width: 0;
  }
}

/* Hard-fix mobile cards layout */
@media (max-width: 900px) {
  .admin-cockpit-page {
    padding: 14px 12px !important;
  }

  .admin-cockpit-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .admin-cockpit-grid > * {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .admin-cockpit-card-next,
  .admin-cockpit-card-agenda,
  .admin-cockpit-card-highlights,
  .admin-cockpit-card-week,
  .admin-cockpit-card-performance {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 0 !important;
  }

  .admin-cockpit-card-next {
    order: 1 !important;
    padding: 18px !important;
  }

  .admin-cockpit-card-agenda {
    order: 2 !important;
  }

  .admin-cockpit-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    order: 3 !important;
  }

  .admin-cockpit-kpi-card {
    min-height: 96px !important;
    padding: 14px !important;
  }

  .admin-cockpit-next-layout {
    grid-template-columns: 68px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .admin-cockpit-next-avatar {
    width: 68px !important;
    height: 68px !important;
  }
}

@media (max-width: 560px) {
  .admin-cockpit-kpi-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-cockpit-next-layout {
    grid-template-columns: 1fr !important;
  }
}

/* Clientes panel (mock) */
.clients-page {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 1rem;
  min-height: calc(var(--reservaai-vh, 100vh) - 240px);
}

.clients-list-panel,
.clients-detail-panel {
  border: 1px solid rgba(208, 222, 242, 0.94);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.97);
}

.clients-list-panel {
  position: relative;
  padding: 0.9rem;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 0.65rem;
}

.clients-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.clients-list-head h2 {
  margin: 0;
  font-size: 1.25rem;
  color: #1f3c67;
}

.clients-list-segments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: rgba(236, 243, 252, 0.92);
}

.clients-list-segments button {
  border: 0;
  min-height: 34px;
  border-radius: 999px;
  background: transparent;
  color: #5a7296;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
}

.clients-list-segments button.is-active {
  background: #fff;
  color: #23416f;
  box-shadow: 0 8px 14px rgba(49, 88, 148, 0.12);
}

.clients-search input {
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(196, 211, 234, 0.95);
  background: #fff;
  color: #223b64;
  font: inherit;
}

.clients-list {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  overflow: auto;
  padding-right: 0.2rem;
}

.clients-list-item {
  border: 1px solid rgba(217, 228, 243, 0.96);
  border-radius: 14px;
  background: rgba(247, 250, 255, 0.85);
  padding: 0.55rem;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  text-align: left;
}

.clients-list-item.is-active {
  border-color: rgba(92, 129, 205, 0.6);
  background: rgba(227, 237, 255, 0.78);
}

.clients-list-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #2b4f97, #3d67b5);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}

.clients-list-copy strong {
  display: block;
  color: #243d66;
  font-size: 0.82rem;
}

.clients-list-copy small {
  color: #6f84a0;
  font-size: 0.7rem;
}

.clients-add-button {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(145deg, #2c4f98, #3f69b8);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
}

.clients-detail-panel {
  padding: 1rem;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  gap: 0.8rem;
}

.clients-detail-head {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.clients-avatar {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #2b4f97, #3d67b5);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
}

.clients-detail-head strong {
  color: #1f3d66;
  font-size: 1.5rem;
}

.clients-detail-head small {
  color: #607894;
  font-size: 0.92rem;
}

.clients-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.clients-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.clients-kpis article {
  border-radius: 14px;
  border: 1px solid rgba(216, 228, 244, 0.95);
  background: rgba(247, 251, 255, 0.92);
  padding: 0.58rem 0.62rem;
}

.clients-kpis span {
  display: block;
  color: #6b829f;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.clients-kpis strong {
  display: block;
  margin-top: 0.22rem;
  color: #1f3e69;
  font-size: 0.92rem;
}

.clients-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  border-bottom: 1px solid rgba(215, 227, 243, 0.9);
  padding-bottom: 0.45rem;
}

.clients-tabs button {
  border: 0;
  background: transparent;
  color: #5f7693;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.35rem 0.5rem;
  border-radius: 9px;
}

.clients-tabs button.is-active {
  color: #214271;
  background: rgba(231, 240, 255, 0.8);
}

.clients-tab-content {
  min-height: 140px;
  border-radius: 14px;
  border: 1px dashed rgba(196, 214, 238, 0.95);
  background: rgba(249, 252, 255, 0.94);
  padding: 0.85rem;
}

.clients-appointment-item {
  display: grid;
  gap: 0.2rem;
  padding: 0.55rem 0.6rem;
  border-radius: 10px;
  border: 1px solid rgba(208, 222, 242, 0.95);
  background: #fff;
}

.clients-appointment-item + .clients-appointment-item {
  margin-top: 0.5rem;
}

.clients-appointment-item strong {
  color: #1f3e68;
  font-size: 0.82rem;
}

.clients-appointment-item span,
.clients-empty-state,
.clients-empty {
  color: #6b82a0;
  font-size: 0.78rem;
}

@media (max-width: 1100px) {
  .clients-page {
    grid-template-columns: 1fr;
  }

  .clients-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Estoque */
.inventory-page {
  display: grid;
  gap: 1rem;
}

.inventory-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.inventory-page-head h2 {
  margin: 0;
  color: #1f3c67;
  font-size: 1.5rem;
}

.inventory-page-head p {
  margin: 0.2rem 0 0;
  color: #6a83a8;
  font-size: 0.86rem;
}

.inventory-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  border-bottom: 1px solid rgba(214, 227, 243, 0.95);
  padding-bottom: 0.42rem;
}

.inventory-tabs button {
  border: 0;
  background: transparent;
  color: #607894;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 9px;
  padding: 0.4rem 0.55rem;
}

.inventory-tabs button.is-active {
  color: #1f3e69;
  background: rgba(228, 238, 255, 0.88);
}

.inventory-panel {
  display: none;
  gap: 0.8rem;
}

.inventory-panel.is-active {
  display: grid;
}

.inventory-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.inventory-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.inventory-filters select,
.inventory-actions input {
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(192, 209, 235, 0.95);
  background: #fff;
  color: #22395f;
  font: inherit;
  font-size: 0.84rem;
  padding: 0 0.7rem;
}

.inventory-filters select {
  min-width: 160px;
}

.inventory-actions input {
  width: min(280px, 100%);
}

.inventory-table-wrap {
  border: 1px solid rgba(208, 222, 242, 0.95);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  overflow: auto;
}

.inventory-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.inventory-table th,
.inventory-table td {
  padding: 0.78rem 0.72rem;
  border-bottom: 1px solid rgba(229, 236, 247, 0.9);
  text-align: left;
  color: #24406a;
  font-size: 0.8rem;
}

.inventory-table th {
  color: #6c84a4;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.inventory-table td strong {
  color: #1d3a63;
}

.inventory-qty {
  display: inline-flex;
  min-width: 24px;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  padding: 0.08rem 0.45rem;
  background: rgba(214, 236, 222, 0.85);
  color: #186239;
  font-weight: 700;
}

.inventory-qty.is-low {
  background: rgba(253, 226, 226, 0.9);
  color: #9f1239;
}

.inventory-empty {
  text-align: center;
  color: #7087a3;
}

.inventory-empty-state {
  border: 1px solid rgba(208, 222, 242, 0.95);
  border-radius: 16px;
  background: rgba(247, 251, 255, 0.95);
  padding: 1rem;
}

.inventory-empty-state h3 {
  margin: 0;
  color: #1d3a63;
  font-size: 1rem;
}

.inventory-empty-state p {
  margin: 0.4rem 0 0;
  color: #607894;
  font-size: 0.84rem;
}

.inventory-feedback {
  min-height: 18px;
  color: #607894;
  font-size: 0.79rem;
  font-weight: 700;
}

.inventory-feedback[data-tone="warn"] {
  color: #b04444;
}

.inventory-note {
  color: #7087a3;
  font-size: 0.75rem;
}

.inventory-table-actions {
  display: inline-flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.inventory-table-actions .btn {
  min-height: 30px;
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
}

.inventory-editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2800;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(8, 21, 43, 0.56);
  backdrop-filter: blur(2px);
}

.inventory-editor-backdrop[hidden] {
  display: none;
}

.inventory-editor-modal {
  width: min(680px, 100%);
  max-height: min(90vh, 820px);
  overflow: auto;
  border-radius: 20px;
  border: 1px solid rgba(197, 214, 238, 0.92);
  background: #f8fbff;
  box-shadow: 0 24px 48px rgba(15, 35, 66, 0.3);
  padding: 1rem;
  display: grid;
  gap: 0.8rem;
}

.inventory-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.inventory-editor-head span {
  display: block;
  color: #6b82a0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.inventory-editor-head strong {
  color: #1d3a63;
  font-size: 1.1rem;
}

.inventory-editor-close {
  border: 0;
  border-radius: 10px;
  width: 34px;
  height: 34px;
  font-size: 1.2rem;
  line-height: 1;
  color: #395885;
  background: rgba(230, 239, 253, 0.96);
}

.inventory-editor-form {
  display: grid;
  gap: 0.7rem;
}

.inventory-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.inventory-editor-field {
  display: grid;
  gap: 0.32rem;
}

.inventory-editor-field-full {
  grid-column: 1 / -1;
}

.inventory-editor-field span {
  color: #607894;
  font-size: 0.76rem;
  font-weight: 700;
}

.inventory-editor-field input {
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(192, 209, 235, 0.95);
  background: #fff;
  color: #22395f;
  font: inherit;
  font-size: 0.84rem;
  padding: 0 0.75rem;
}

.inventory-editor-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #315179;
  font-size: 0.8rem;
  font-weight: 700;
}

.inventory-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.inventory-editor-feedback {
  margin-right: auto;
  color: #607894;
  font-size: 0.78rem;
  font-weight: 700;
}

.inventory-editor-feedback[data-tone="warn"] {
  color: #b04444;
}

.inventory-editor-feedback[data-tone="success"] {
  color: #186239;
}

.inventory-editor-image {
  display: grid;
  gap: 0.5rem;
}

.inventory-editor-image-label {
  color: #607894;
  font-size: 0.76rem;
  font-weight: 700;
}

.inventory-editor-image-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.inventory-editor-image-preview {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  background: #f5f8fd;
  border: 1px dashed rgba(120, 157, 219, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b85a8;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.inventory-editor-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.inventory-editor-image-placeholder {
  padding: 0.5rem;
}

.inventory-editor-image-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  flex: 1 1 220px;
  min-width: 0;
}

.inventory-editor-image-upload {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.inventory-editor-image-clear {
  font-size: 0.78rem;
}

.inventory-editor-image-hint {
  color: #6b85a8;
  font-size: 0.74rem;
  line-height: 1.45;
}

/* Modal de estoque: fundo claro — sobrepor btn-ghost global (que assume fundo escuro do marketing) */
.inventory-editor-modal .btn.btn-ghost,
.inventory-editor-modal .btn.btn-ghost:focus-visible {
  border: 1px solid rgba(186, 205, 233, 0.95) !important;
  color: #1f3e68 !important;
  background: linear-gradient(180deg, #ffffff, #f3f8ff) !important;
  -webkit-text-fill-color: #1f3e68;
  font-weight: 700;
}

.inventory-editor-modal .btn.btn-ghost:hover:not(:disabled) {
  border-color: rgba(120, 157, 219, 0.95) !important;
  color: #16355f !important;
  background: linear-gradient(180deg, #f5faff, #e7f1ff) !important;
  -webkit-text-fill-color: #16355f;
}

.inventory-editor-modal .btn.btn-ghost:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.inventory-editor-modal .btn.btn-primary {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
  color: #ffffff !important;
  border: 1px solid #1e3a8a;
  box-shadow: 0 12px 26px rgba(30, 58, 138, 0.32);
}

.inventory-editor-modal .btn.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #1e40af 0%, #15306c 100%);
}

.inventory-editor-image-hint code {
  font-size: 0.72rem;
  padding: 0.05rem 0.3rem;
  border-radius: 5px;
  background: #eef3fa;
  color: #335276;
}

/* Modal premium de cadastro de produto (alinhado ao inventory-pro) */
.inventory-pro-editor-modal {
  width: min(760px, 100%);
  /* Altura adapta à viewport, com fallback para telas curtas (laptops 13"). */
  max-height: min(92vh, 900px);
  padding: 0;
  border-radius: 22px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow:
    0 28px 64px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.65) inset;
  overflow: hidden;
  /* Flex column: header e footer fixos, form rola no meio. */
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.inventory-pro-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.95) 0%, rgba(255, 255, 255, 0.98) 55%);
  /* Nunca encolhe — garante que header sempre apareça por inteiro. */
  flex-shrink: 0;
}

.inventory-pro-editor-kicker {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2563eb;
  margin-bottom: 6px;
}

.inventory-pro-editor-head-copy strong {
  display: block;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 700;
  color: var(--ra-text, #0f172a);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.inventory-pro-editor-lead {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ra-text-muted, #64748b);
  max-width: 52ch;
}

.inventory-pro-editor-close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(203, 213, 225, 0.95);
  border-radius: 12px;
  background: #ffffff;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.inventory-pro-editor-close:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.inventory-pro-editor-form {
  /* O form passa a ser o trilho que rola — herda o `display: grid` do
     `.inventory-editor-form` base, com `min-height: 0` para que o flex
     pai possa calcular a sobra corretamente. */
  padding: 20px 24px 0;
  gap: 18px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.inventory-pro-editor-section {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.inventory-pro-editor-section--compact {
  padding: 12px 16px;
}

.inventory-pro-editor-section-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.inventory-pro-editor-photo {
  padding: 14px;
  border-radius: 16px;
  border: 1px dashed rgba(148, 163, 184, 0.55);
  background: linear-gradient(180deg, #f8fafc, #ffffff);
}

.inventory-pro-editor-description textarea {
  min-height: 108px;
  resize: vertical;
  padding: 0.65rem 0.75rem;
  line-height: 1.5;
  border-radius: 12px;
  border: 1px solid rgba(192, 209, 235, 0.95);
  background: #fff;
  color: #22395f;
  font: inherit;
  font-size: 0.84rem;
}

.inventory-pro-editor-description textarea:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.65);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.inventory-pro-editor-optional {
  font-style: normal;
  font-weight: 600;
  color: #94a3b8;
}

.inventory-pro-editor-char-count {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
  text-align: right;
}

.inventory-pro-editor-char-count[data-near-limit="true"] {
  color: #d97706;
}

.inventory-pro-editor-grid-3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inventory-pro-editor-grid-3 .inventory-editor-field-full {
  grid-column: 1 / -1;
}

.inventory-pro-editor-toggle {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid rgba(226, 232, 240, 0.95);
}

.inventory-pro-editor-actions {
  /* Footer sticky dentro do form rolável: estende até as bordas laterais
     usando margens negativas (compensando o padding 24px do form) e cobre
     o conteúdo abaixo com um fundo sólido para os botões nunca sumirem. */
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 4px -24px 0;
  padding: 16px 24px;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.92) 0%, rgba(248, 250, 252, 1) 35%);
  backdrop-filter: blur(6px);
}

.inventory-pro-editor-modal .inventory-editor-field input::placeholder,
.inventory-pro-editor-modal .inventory-editor-field textarea::placeholder {
  color: #94a3b8;
  opacity: 1;
}

.inventory-pro-editor-modal.inventory-editor-modal,
.inventory-pro-editor-modal .inventory-editor-modal {
  /* garante herança dos botões ghost/primary já definidos */
}

@media (max-width: 640px) {
  .inventory-pro-editor-head {
    padding: 18px 16px 14px;
  }

  .inventory-pro-editor-form {
    padding: 16px 16px 0;
  }

  .inventory-pro-editor-actions {
    /* Compensa o novo padding 16px do form em mobile. */
    margin: 4px -16px 0;
    padding: 14px 16px;
  }

  .inventory-pro-editor-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Laptops com viewport curta (1366×768 e similares): aproveita mais a tela
   para reduzir a chance do conteúdo ficar com scroll desnecessário. */
@media (max-height: 760px) {
  .inventory-pro-editor-modal {
    max-height: 96vh;
  }

  .inventory-pro-editor-head {
    padding: 16px 24px 12px;
  }

  .inventory-pro-editor-lead {
    margin-top: 4px;
    font-size: 12.5px;
  }

  .inventory-pro-editor-form {
    padding-top: 14px;
    gap: 14px;
  }

  .inventory-pro-editor-section {
    padding: 12px;
  }
}

/* Contraste local dos botões no módulo Clientes */
.admin-panel[data-admin-panel="clientes"] .btn.btn-ghost {
  color: #1f3e68;
  border-color: rgba(186, 205, 233, 0.95);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 255, 0.96));
}

.admin-panel[data-admin-panel="clientes"] .btn.btn-ghost:hover {
  color: #16355f;
  border-color: rgba(120, 157, 219, 0.88);
  background: linear-gradient(180deg, rgba(245, 250, 255, 0.98), rgba(231, 241, 255, 0.96));
}

.admin-panel[data-admin-panel="clientes"] .btn.btn-primary {
  color: #ffffff;
}

/* Profissionais v2 layout */
.operator-pro-directory {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}

.operator-pro-directory-list {
  border: 1px solid rgba(208, 222, 242, 0.92);
  border-radius: 16px;
  background: rgba(248, 252, 255, 0.94);
  padding: 0.55rem;
  display: grid;
  gap: 0.55rem;
}

.operator-pro-search-field {
  padding: 0.55rem 0.6rem;
  border-radius: 12px;
}

.operator-pro-items {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  max-height: 520px;
  overflow: auto;
}

.operator-pro-item {
  border: 1px solid rgba(213, 225, 243, 0.92);
  border-radius: 12px;
  background: #fff;
  padding: 0.45rem;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0.5rem;
  text-align: left;
}

.operator-pro-item.is-active {
  border-color: rgba(89, 129, 210, 0.7);
  background: rgba(229, 239, 255, 0.78);
}

.operator-pro-avatar,
.operator-pro-detail-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #2b4f97, #3d67b5);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  overflow: hidden;
}

.operator-pro-avatar img,
.operator-pro-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.operator-pro-copy strong {
  display: block;
  color: #1f3e68;
  font-size: 0.82rem;
}

.operator-pro-copy small {
  color: #6a83a5;
  font-size: 0.72rem;
}

.operator-pro-detail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.operator-pro-detail-id {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
}

.operator-pro-detail-id strong {
  color: #1e3d67;
  font-size: 1.1rem;
}

.operator-pro-detail-id small {
  color: #6a83a8;
  font-size: 0.74rem;
}

.operator-pro-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  border-bottom: 1px solid rgba(216, 228, 244, 0.94);
  padding-bottom: 0.4rem;
}

.operator-pro-tabs button {
  border: 0;
  background: transparent;
  color: #5f7895;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 9px;
  padding: 0.35rem 0.55rem;
}

.operator-pro-tabs button.is-active {
  color: #1f3f6c;
  background: rgba(229, 239, 255, 0.86);
}

.operator-pro-tab-panel {
  display: none;
}

.operator-pro-tab-panel.is-active {
  display: block;
}

@media (max-width: 1100px) {
  .operator-pro-directory {
    grid-template-columns: 1fr;
  }

  .operator-pro-items {
    max-height: 260px;
  }
}

/* Clientes (API real) */
.clients-page {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0.85rem;
  min-height: calc(var(--reservaai-vh, 100vh) - 220px);
}

.clients-toolbar {
  display: none;
}

.clients-field {
  display: grid;
  gap: 0.35rem;
}

.clients-field span {
  color: #607893;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.clients-field input,
.clients-field select {
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(192, 209, 235, 0.95);
  background: #fff;
  color: #22395f;
  font: inherit;
  font-size: 0.86rem;
  padding: 0.45rem 0.7rem;
}

.clients-field-search {
  grid-column: span 3;
}

.clients-field-actions {
  align-content: end;
  justify-self: start;
}

.clients-field-actions .btn {
  min-height: 42px;
  min-width: 132px;
}

.clients-feedback {
  display: none;
  border-radius: 12px;
  border: 1px solid rgba(203, 218, 241, 0.94);
  background: rgba(245, 249, 255, 0.92);
  color: #3d5d86;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.58rem 0.75rem;
}

.clients-feedback[data-tone="warn"] {
  color: #9b3d3d;
  background: rgba(250, 235, 235, 0.9);
  border-color: rgba(231, 182, 182, 0.9);
}

.clients-feedback[data-tone="success"] {
  color: #1f6a47;
  background: rgba(231, 245, 236, 0.9);
  border-color: rgba(177, 220, 191, 0.9);
}

.clients-content {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 0.75rem;
  min-height: 0;
  align-items: stretch;
  height: 100%;
}

.clients-list-wrap-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.5rem;
}

.clients-list-headbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.clients-list-headbar strong {
  color: #1f3c66;
  font-size: 0.95rem;
}

.clients-list-wrap {
  border: 1px solid rgba(208, 222, 242, 0.94);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  padding: 0.45rem;
  overflow: auto;
  min-height: 420px;
  max-height: calc(var(--reservaai-vh, 100vh) - 360px);
}

.clients-list-wrap .clients-empty-state {
  border: 1px dashed rgba(196, 214, 236, 0.95);
  border-radius: 12px;
  background: rgba(247, 251, 255, 0.94);
  color: #6880a0;
  font-size: 0.82rem;
  padding: 0.75rem;
}

.clients-list-item {
  width: 100%;
  border: 1px solid transparent;
  background: #fff;
  border-radius: 12px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  text-align: left;
  padding: 0.5rem;
}

.clients-list-item + .clients-list-item {
  margin-top: 0.4rem;
}

.clients-list-item:hover {
  background: rgba(245, 250, 255, 0.94);
}

.clients-list-item.is-active {
  border-color: rgba(89, 129, 210, 0.65);
  background: rgba(229, 239, 255, 0.78);
}

.clients-list-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(223, 233, 249, 0.9);
  color: #345785;
  font-size: 0.78rem;
  font-weight: 800;
}

.clients-list-avatar img,
.clients-dashboard-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.clients-list-copy {
  display: grid;
  gap: 0.08rem;
}

.clients-list-copy strong {
  color: #1e3a63;
  font-size: 0.84rem;
}

.clients-list-copy small {
  color: #6a83a8;
  font-size: 0.74rem;
}

.clients-source-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.35rem;
  color: #188a42;
  font-weight: 700;
}

.clients-source-whatsapp-icon {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #25d366;
  position: relative;
  flex-shrink: 0;
}

.clients-source-whatsapp-icon::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 2px;
  width: 5px;
  height: 7px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 2px;
  transform: rotate(35deg);
}

.clients-dashboard-panel {
  border: 1px solid rgba(208, 222, 242, 0.94);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  padding: 1rem;
  display: grid;
  gap: 0.9rem;
  min-height: 420px;
}

.clients-dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.clients-dashboard-identity {
  display: flex;
  align-items: center;
  gap: 0.62rem;
}

.clients-dashboard-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(223, 233, 249, 0.9);
  color: #345785;
  font-size: 0.88rem;
  font-weight: 800;
}

.clients-dashboard-head strong {
  color: #1f3c66;
  font-size: 1rem;
}

.clients-dashboard-head small {
  display: block;
  margin-top: 0.15rem;
  color: #647c9f;
  font-size: 0.8rem;
}

.clients-dashboard-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.clients-dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.clients-dashboard-kpis article {
  border-radius: 12px;
  border: 1px solid rgba(216, 228, 244, 0.95);
  background: rgba(247, 251, 255, 0.92);
  padding: 0.62rem 0.7rem;
  min-height: 68px;
}

.clients-dashboard-kpis span {
  color: #6b829f;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.clients-dashboard-kpis strong {
  display: block;
  margin-top: 0.24rem;
  color: #1f3e69;
  font-size: 0.95rem;
}

.clients-dashboard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  border-bottom: 1px solid rgba(215, 228, 245, 0.94);
  padding-bottom: 0.45rem;
}

.clients-dashboard-tabs button {
  border: 0;
  background: transparent;
  color: #5f7895;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 9px;
  padding: 0.35rem 0.55rem;
}

.clients-dashboard-tabs button.is-active {
  color: #1f3f6c;
  background: rgba(229, 239, 255, 0.86);
}

.clients-dashboard-content {
  min-height: 140px;
}

.clients-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.clients-dashboard-grid article {
  border: 1px solid rgba(217, 228, 243, 0.95);
  border-radius: 12px;
  background: rgba(249, 252, 255, 0.9);
  padding: 0.55rem;
}

.clients-dashboard-grid article strong {
  color: #1f3d68;
  font-size: 0.82rem;
}

.clients-dashboard-grid article p {
  margin: 0.25rem 0 0;
  color: #617b9a;
  font-size: 0.77rem;
}

.clients-dashboard-empty {
  border: 1px dashed rgba(196, 214, 236, 0.95);
  border-radius: 12px;
  background: rgba(247, 251, 255, 0.94);
  color: #6880a0;
  font-size: 0.82rem;
  padding: 0.75rem;
}

@media (max-width: 1100px) {
  .clients-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clients-field-search {
    grid-column: span 2;
  }

  .clients-dashboard-kpis,
  .clients-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .clients-content {
    grid-template-columns: 1fr;
  }

  .clients-list-headbar {
    flex-direction: column;
    align-items: stretch;
  }

  .clients-list-wrap {
    min-height: 220px;
    max-height: 280px;
  }
}

/* Clientes desktop refinado (estilo Booksy) */
@media (min-width: 1180px) {
  .admin-panel[data-admin-panel="clientes"] {
    padding: 0.8rem;
  }

  .admin-panel[data-admin-panel="clientes"] .clients-page {
    min-height: calc(var(--reservaai-vh, 100vh) - 200px);
    gap: 0.6rem;
  }

  .admin-panel[data-admin-panel="clientes"] .clients-content {
    grid-template-columns: 320px minmax(780px, 1fr);
    gap: 0.9rem;
    align-items: start;
  }

  .admin-panel[data-admin-panel="clientes"] .clients-list-wrap {
    min-height: calc(var(--reservaai-vh, 100vh) - 300px);
    max-height: calc(var(--reservaai-vh, 100vh) - 300px);
  }

  .admin-panel[data-admin-panel="clientes"] .clients-dashboard-panel {
    min-height: calc(var(--reservaai-vh, 100vh) - 300px);
    padding: 1.1rem 1.2rem;
    gap: 1rem;
  }

  .admin-panel[data-admin-panel="clientes"] .clients-dashboard-head {
    justify-content: space-between;
  }

  .admin-panel[data-admin-panel="clientes"] .clients-dashboard-identity {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    text-align: left;
    gap: 0.6rem;
  }

  .admin-panel[data-admin-panel="clientes"] .clients-dashboard-avatar {
    width: 64px;
    height: 64px;
    font-size: 1.15rem;
  }

  .admin-panel[data-admin-panel="clientes"] .clients-dashboard-head strong {
    font-size: 1.95rem;
    line-height: 1.05;
  }

  .admin-panel[data-admin-panel="clientes"] .clients-dashboard-head small {
    font-size: 0.9rem;
  }

  .admin-panel[data-admin-panel="clientes"] .clients-dashboard-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .admin-panel[data-admin-panel="clientes"] .clients-dashboard-kpis article {
    min-height: 84px;
  }

  .admin-panel[data-admin-panel="clientes"] .clients-dashboard-tabs {
    justify-content: center;
    gap: 0.5rem;
  }

  .admin-panel[data-admin-panel="clientes"] .clients-dashboard-tabs button {
    padding: 0.45rem 0.75rem;
  }

  .admin-panel[data-admin-panel="clientes"] .clients-dashboard-content {
    border: 1px solid rgba(217, 228, 243, 0.95);
    border-radius: 14px;
    background: rgba(249, 252, 255, 0.9);
    padding: 0.7rem;
  }

  .admin-panel[data-admin-panel="clientes"] .clients-dashboard-grid-appointments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.clients-editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(15, 23, 42, 0.4);
  display: grid;
  place-items: center;
  padding: 1rem;
}

.clients-editor-backdrop[hidden] {
  display: none !important;
}

.clients-editor-modal {
  width: min(760px, calc(100vw - 2rem));
  max-height: calc(var(--reservaai-vh, 100vh) - 3rem);
  overflow: auto;
  border-radius: 16px;
  border: 1px solid rgba(205, 219, 240, 0.95);
  background: #fff;
  padding: 0.9rem;
  display: grid;
  gap: 0.75rem;
}

.clients-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.clients-editor-head strong {
  color: #1f3d66;
  font-size: 1.05rem;
}

.clients-editor-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.clients-editor-field {
  display: grid;
  gap: 0.3rem;
}

.clients-editor-field span {
  color: #607893;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.clients-editor-field input,
.clients-editor-field textarea {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(192, 209, 235, 0.95);
  background: #fff;
  color: #22395f;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.45rem 0.65rem;
}

.clients-editor-field-span-2 {
  grid-column: span 2;
}

.clients-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.clients-appointments-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.6rem;
}

.clients-appointments-switch button {
  min-height: 38px;
  border: 1px solid rgba(208, 222, 242, 0.95);
  border-radius: 10px;
  background: #fff;
  color: #5f7895;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
}

.clients-appointments-switch button.is-active {
  background: rgba(229, 239, 255, 0.86);
  color: #1f3f6c;
}

.clients-dashboard-list-row {
  margin: 0;
  padding: 0.5rem 0.55rem;
  border-radius: 9px;
  border: 1px solid rgba(221, 231, 245, 0.9);
  background: #fff;
  display: grid;
  gap: 0.15rem;
}

.clients-dashboard-list-row + .clients-dashboard-list-row {
  margin-top: 0.4rem;
}

.clients-dashboard-list-row span {
  color: #6f84a0;
  font-size: 0.74rem;
}

.clients-dashboard-list-row strong {
  color: #24446f;
  font-size: 0.8rem;
}

.clients-dashboard-list {
  margin-top: 0.45rem;
  max-height: 240px;
  overflow: auto;
  padding-right: 0.25rem;
}

/* Override final: Agenda Rápida mobile usa o novo layout .mobile-agenda-page.
   Precisa anular os !important antigos que constrangem altura/overflow. */
@media (max-width: 900px) {
  .admin-page[data-admin-panel-active="agenda-rapida"] .admin-panel[data-admin-panel="agenda-rapida"] {
    display: block !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: #f6f9fe !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    grid-template-rows: none !important;
  }

  .admin-page[data-admin-panel-active="agenda-rapida"] .admin-panel[data-admin-panel="agenda-rapida"] > .admin-panel-head,
  .admin-page[data-admin-panel-active="agenda-rapida"] .admin-panel[data-admin-panel="agenda-rapida"] > .admin-quick-agenda-shell {
    display: none !important;
  }
}

/* ==========================================================================
   Profissionais — layout SaaS premium v3
   Aplicado dentro de #operatorConfigProfessionals (panel data-admin-panel="profissionais")
   ========================================================================== */

:root {
  --ra-primary: #2563EB;
  --ra-primary-dark: #1D4ED8;
  --ra-primary-soft: #EEF4FF;
  --ra-bg: #F8FAFC;
  --ra-surface: #FFFFFF;
  --ra-border: #E5EAF3;
  --ra-text: #0F172A;
  --ra-text-soft: #64748B;
  --ra-success: #16A34A;
  --ra-warning: #F59E0B;
  --ra-danger: #EF4444;
  --ra-radius-sm: 10px;
  --ra-radius-md: 14px;
  --ra-radius-lg: 20px;
  --ra-shadow-sm: 0 8px 20px rgba(15, 35, 75, 0.06);
  --ra-shadow-md: 0 16px 36px rgba(15, 35, 75, 0.10);
}

/* Painel Profissionais com layout SaaS: oculta cabeçalho legado e compacta a toolbar
   (mantemos o seletor de empresa e o "Atualizar dados" funcionando). */
.admin-page[data-admin-panel-active="profissionais"] .admin-panel[data-admin-panel="profissionais"] {
  background: var(--ra-bg);
  padding: 18px;
}

.admin-page[data-admin-panel-active="profissionais"] .admin-panel[data-admin-panel="profissionais"] > .admin-panel-head {
  display: none;
}

.admin-page[data-admin-panel-active="profissionais"] .admin-panel[data-admin-panel="profissionais"] .operator-config-toolbar {
  background: var(--ra-surface);
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  padding: 12px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  box-shadow: var(--ra-shadow-sm);
}

.admin-page[data-admin-panel-active="profissionais"] .admin-panel[data-admin-panel="profissionais"] .operator-config-toolbar .operator-config-summary {
  display: none;
}

.admin-page[data-admin-panel-active="profissionais"] .admin-panel[data-admin-panel="profissionais"] .operator-config-toolbar .operator-config-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: 100%;
  justify-content: space-between;
}

.admin-page[data-admin-panel-active="profissionais"] .admin-panel[data-admin-panel="profissionais"] .operator-config-toolbar .operator-config-field {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.admin-page[data-admin-panel-active="profissionais"] .admin-panel[data-admin-panel="profissionais"] .operator-config-toolbar .operator-config-field > span {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ra-text-soft);
  font-weight: 700;
}

.admin-page[data-admin-panel-active="profissionais"] .admin-panel[data-admin-panel="profissionais"] .operator-config-toolbar select {
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--ra-border);
  padding: 0 12px;
  background: #F8FAFC;
  font-weight: 600;
  color: var(--ra-text);
  min-width: 200px;
}

.admin-page[data-admin-panel-active="profissionais"] .admin-panel[data-admin-panel="profissionais"] .operator-config-card-professionals {
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.admin-page[data-admin-panel-active="profissionais"] .admin-panel[data-admin-panel="profissionais"] .operator-config-card-professionals > .operator-config-card-head {
  display: none;
}

.admin-page[data-admin-panel-active="profissionais"] .operator-config-shell.operator-config-professionals-module {
  padding: 0;
  background: transparent;
}

.pro-page {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ra-text);
}

.pro-page-empty {
  grid-template-columns: 1fr;
}

.pro-empty {
  background: var(--ra-surface);
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-lg);
  padding: 32px;
  text-align: center;
  display: grid;
  gap: 10px;
  justify-items: center;
  box-shadow: var(--ra-shadow-sm);
}

.pro-empty strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ra-text);
}

.pro-empty p {
  margin: 0;
  color: var(--ra-text-soft);
  font-size: 0.95rem;
}

/* Lista de profissionais */
.pro-list-panel {
  background: var(--ra-surface);
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 18px;
  -webkit-overflow-scrolling: touch;
}

.pro-list-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  gap: 10px;
}

.pro-list-search {
  height: 52px;
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  background: var(--ra-surface);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  color: var(--ra-text-soft);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.pro-list-search svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.pro-list-search input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ra-text);
  min-width: 0;
}

.pro-list-search:focus-within {
  border-color: #BFD4FF;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.pro-list-add-mini {
  width: 52px;
  height: 52px;
  border-radius: var(--ra-radius-md);
  border: 1px solid var(--ra-border);
  background: var(--ra-surface);
  color: var(--ra-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.pro-list-add-mini:hover { background: var(--ra-primary-soft); border-color: #BFDBFE; }
.pro-list-add-mini:active { transform: translateY(1px); }
.pro-list-add-mini svg { width: 22px; height: 22px; }

.pro-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow: auto;
  padding-right: 4px;
}

.pro-list::-webkit-scrollbar { width: 6px; }
.pro-list::-webkit-scrollbar-thumb { background: #d8e0ee; border-radius: 6px; }

.pro-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  border: 1px solid transparent;
  text-align: left;
  font: inherit;
  color: var(--ra-text);
  position: relative;
}

.pro-item:hover {
  background: #F1F5FB;
  border-color: var(--ra-border);
}

.pro-item.is-active {
  background: var(--ra-primary-soft);
  border-color: #BFDBFE;
  box-shadow: var(--ra-shadow-sm);
}

.pro-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  background: var(--ra-primary);
  border-radius: 999px;
}

.pro-item-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pro-item-avatar > .operator-pro-avatar {
  width: 48px;
  height: 48px;
  font-size: 1rem;
  border-radius: 999px;
}

.pro-item-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pro-item-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ra-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pro-item-role {
  font-size: 0.82rem;
  color: var(--ra-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pro-status-badge {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pro-status-on { background: #DCFCE7; color: #15803D; }
.pro-status-off { background: #E2E8F0; color: #475569; }
.pro-status-busy { background: #FFEDD5; color: #C2410C; }

.pro-list-empty {
  padding: 18px;
  border: 1px dashed var(--ra-border);
  border-radius: var(--ra-radius-md);
  color: var(--ra-text-soft);
  background: #FAFCFF;
  text-align: center;
  font-size: 0.9rem;
}

.pro-list-add {
  margin-top: auto;
  width: 100%;
  height: 52px;
  border-radius: var(--ra-radius-md);
  border: 1px dashed #BFD4FF;
  background: #FFFFFF;
  color: var(--ra-primary);
  font-weight: 800;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.pro-list-add svg { width: 18px; height: 18px; }
.pro-list-add:hover { background: var(--ra-primary-soft); border-color: var(--ra-primary); }
.pro-list-add:active { transform: translateY(1px); }

/* Detalhe + perfil */
.pro-detail-panel {
  min-width: 0;
}

.pro-profile-card {
  background: var(--ra-surface);
  border: 1px solid var(--ra-border);
  border-radius: 24px;
  box-shadow: var(--ra-shadow-sm);
  overflow: hidden;
}

.pro-hero {
  padding: 28px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  border-bottom: 1px solid var(--ra-border);
  background: linear-gradient(180deg, #FFFFFF, #F8FBFF);
}

.pro-hero-id {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.pro-hero-avatar-wrap {
  position: relative;
  display: inline-flex;
}

.pro-hero-avatar-wrap > .pro-hero-avatar {
  width: 92px;
  height: 92px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #2b4f97, #3d67b5);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 800;
  border: 4px solid #FFFFFF;
  box-shadow: var(--ra-shadow-sm);
  overflow: hidden;
}

.pro-hero-avatar-wrap > .pro-hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pro-online-dot {
  position: absolute;
  right: 4px;
  bottom: 6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--ra-success);
  border: 3px solid #FFFFFF;
}

.pro-hero-headlines {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pro-hero-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pro-hero-title {
  font-size: 2rem;
  line-height: 1.05;
  font-weight: 800;
  color: var(--ra-text);
  margin: 0;
  letter-spacing: -0.01em;
  word-break: break-word;
}

.pro-verified {
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: var(--ra-primary);
}

.pro-verified svg { width: 22px; height: 22px; }

.pro-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pro-badge {
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}

.pro-badge-role {
  background: var(--ra-primary-soft);
  color: var(--ra-primary);
}

.pro-badge-branch {
  background: #FEF3C7;
  color: #B45309;
}

.pro-badge-status.is-on {
  background: #DCFCE7;
  color: #15803D;
}

.pro-badge-status.is-off {
  background: #E2E8F0;
  color: #475569;
}

.pro-hero-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  color: var(--ra-text-soft);
  font-size: 0.9rem;
}

.pro-hero-contacts span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  word-break: break-word;
}

.pro-hero-contacts svg { width: 16px; height: 16px; flex: 0 0 16px; }

.pro-hero-action {
  height: 52px;
  padding: 0 22px;
  border-radius: var(--ra-radius-md);
  border: 0;
  background: linear-gradient(135deg, var(--ra-primary), var(--ra-primary-dark));
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}

.pro-hero-action:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(37,99,235,.32); }
.pro-hero-action:active { transform: translateY(1px); }
.pro-hero-action svg { width: 18px; height: 18px; }

.pro-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--ra-border);
  background: var(--ra-surface);
}

.pro-tab {
  height: 42px;
  padding: 0 18px;
  border-radius: var(--ra-radius-md);
  border: 0;
  background: transparent;
  color: var(--ra-text-soft);
  font: inherit;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.pro-tab:hover { background: #F1F5FB; color: var(--ra-text); }

.pro-tab.is-active {
  background: var(--ra-primary-soft);
  color: var(--ra-primary);
}

.pro-tab-content {
  padding: 22px 28px 28px;
  display: none;
}

.pro-tab-content.is-active {
  display: block;
  animation: proFade 0.22s ease both;
}

@keyframes proFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Toolbar de serviços */
.pro-services-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  margin-bottom: 16px;
}

.pro-search {
  height: 48px;
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  background: var(--ra-surface);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  color: var(--ra-text-soft);
  min-width: 0;
}

.pro-search svg { width: 18px; height: 18px; flex: 0 0 18px; }

.pro-search input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ra-text);
  min-width: 0;
}

.pro-search:focus-within {
  border-color: #BFD4FF;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.pro-btn-ghost {
  height: 48px;
  padding: 0 18px;
  border-radius: var(--ra-radius-md);
  border: 1px solid var(--ra-border);
  background: var(--ra-surface);
  color: var(--ra-text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}

.pro-btn-ghost:hover { background: var(--ra-primary-soft); border-color: #BFDBFE; color: var(--ra-primary); }
.pro-btn-ghost[aria-pressed="true"] { background: var(--ra-primary-soft); color: var(--ra-primary); border-color: #BFDBFE; }

.pro-btn-primary {
  height: 48px;
  padding: 0 22px;
  border-radius: var(--ra-radius-md);
  border: 0;
  background: var(--ra-primary);
  color: #FFFFFF;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(37,99,235,.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.pro-btn-primary:hover { background: var(--ra-primary-dark); }
.pro-btn-primary:active { transform: translateY(1px); }

.pro-btn-danger {
  height: 48px;
  padding: 0 18px;
  border-radius: var(--ra-radius-md);
  border: 1px solid #FCD2D2;
  background: #FFFFFF;
  color: var(--ra-danger);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.pro-btn-danger:hover { background: #FEF2F2; border-color: #F8B8B8; }

/* Cards de serviços */
.pro-services-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pro-service-card {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto 32px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 14px 22px;
  border-radius: 16px;
  border: 1px solid var(--ra-border);
  background: #FFFFFF;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  overflow: hidden;
}

.pro-service-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--ra-shadow-sm);
  border-color: #C7D7F2;
}

.pro-service-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 999px;
  background: #F97316;
}

.pro-service-card[data-color-tone="purple"]::before { background: #8B5CF6; }
.pro-service-card[data-color-tone="blue"]::before { background: #2563EB; }
.pro-service-card[data-color-tone="green"]::before { background: #16A34A; }
.pro-service-card[data-color-tone="pink"]::before { background: #EC4899; }
.pro-service-card[data-color-tone="teal"]::before { background: #0EA5E9; }
.pro-service-card[data-color-tone="red"]::before { background: #EF4444; }
.pro-service-card[data-color-tone="amber"]::before { background: #F59E0B; }

.pro-service-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #F1F5F9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
}

.pro-service-icon svg { width: 22px; height: 22px; }

.pro-service-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pro-service-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ra-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pro-service-duration {
  font-size: 0.82rem;
  color: var(--ra-text-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pro-service-duration svg { width: 14px; height: 14px; }

.pro-service-price {
  font-size: 1.25rem;
  font-weight: 800;
  color: #06143A;
  white-space: nowrap;
}

.pro-service-menu {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--ra-text-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.pro-service-menu:hover { background: #F1F5FB; color: var(--ra-text); }
.pro-service-menu svg { width: 16px; height: 16px; }

.pro-services-empty {
  padding: 24px;
  border-radius: 14px;
  background: #F8FAFC;
  border: 1px dashed var(--ra-border);
  color: var(--ra-text-soft);
  font-size: 0.95rem;
  text-align: center;
}

/* Editor de serviços (toggle) */
.pro-services-editor {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #F8FAFC;
  border: 1px solid var(--ra-border);
  display: grid;
  gap: 12px;
}

.pro-services-editor[hidden] { display: none; }

.pro-services-editor-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.pro-services-editor-head strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ra-text);
}

.pro-services-editor-head small {
  font-size: 0.78rem;
  color: var(--ra-text-soft);
}

.pro-services-editor-hint {
  margin: 0;
  color: var(--ra-text-soft);
  font-size: 0.85rem;
}

.pro-services-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.pro-services-editor-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--ra-border);
  background: #FFFFFF;
  font-size: 0.9rem;
  color: var(--ra-text);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.pro-services-editor-option:hover { border-color: #BFD4FF; background: var(--ra-primary-soft); }
.pro-services-editor-option.is-checked { border-color: #BFD4FF; background: var(--ra-primary-soft); color: var(--ra-primary); }

.pro-services-editor-empty {
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed var(--ra-border);
  background: #FFFFFF;
  color: var(--ra-text-soft);
  font-size: 0.9rem;
}

/* Schedule */
.pro-schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.pro-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ra-text-soft);
}

.pro-field > span:first-child {
  font-weight: 700;
  color: var(--ra-text-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pro-field input,
.pro-field select {
  height: 48px;
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  background: var(--ra-surface);
  padding: 0 14px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ra-text);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.pro-field input:focus,
.pro-field select:focus {
  border-color: #BFD4FF;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.pro-field-toggle {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 14px;
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  background: var(--ra-surface);
}

.pro-field-toggle > span:first-child {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.92rem;
  color: var(--ra-text);
  font-weight: 700;
}

.pro-field-toggle input { width: 20px; height: 20px; }

.pro-field-readonly {
  height: 48px;
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  background: #F8FAFC;
  padding: 0 14px;
  display: flex;
  align-items: center;
  color: var(--ra-text);
  font-weight: 600;
}

.pro-field-label {
  font-weight: 700;
  color: var(--ra-text-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  display: block;
}

.pro-day-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pro-day-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--ra-border);
  background: var(--ra-surface);
  color: var(--ra-text);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.pro-day-pill input { display: none; }
.pro-day-pill.is-checked,
.pro-day-pill:has(input:checked) {
  background: var(--ra-primary-soft);
  border-color: #BFDBFE;
  color: var(--ra-primary);
}

.pro-schedule-days {
  display: grid;
  gap: 8px;
}

.pro-schedule-breaks {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.pro-schedule-breaks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pro-schedule-breaks-head .pro-field-label {
  margin-bottom: 0;
}

.pro-break-add {
  height: 38px;
  padding: 0 14px;
}

.pro-schedule-breaks-list {
  display: grid;
  gap: 12px;
}

.pro-break-card {
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  background: #FFFFFF;
  padding: 12px;
  display: grid;
  gap: 12px;
}

.pro-break-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.pro-break-card-actions {
  display: flex;
  justify-content: flex-end;
}

.pro-break-remove {
  min-height: 38px;
}

/* Profile editor */
.pro-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.pro-field-span-2 { grid-column: span 2; }

.pro-field-readout {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1px solid var(--ra-border);
  margin-bottom: 14px;
}

.pro-field-readout span {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ra-text-soft);
  font-weight: 700;
}

.pro-field-readout strong {
  color: var(--ra-text);
  font-size: 0.95rem;
  font-weight: 700;
}

.pro-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--ra-border);
}

.pro-schedule-save-actions {
  justify-content: flex-end;
  margin-top: 10px;
  padding-top: 16px;
}

/* Responsivo */
@media (max-width: 1100px) {
  .pro-page {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 14px;
  }

  .pro-hero {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .pro-hero-action {
    justify-self: flex-start;
  }

  .pro-services-toolbar {
    grid-template-columns: 1fr;
  }

  .pro-break-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .admin-page[data-admin-panel-active="profissionais"] .admin-panel[data-admin-panel="profissionais"] {
    padding: 8px;
  }

  .pro-page {
    grid-template-columns: 1fr;
  }

  .pro-list-panel {
    position: static;
    padding: 14px;
  }

  .pro-list {
    max-height: 320px;
  }

  .pro-hero {
    padding: 22px;
  }

  .pro-hero-id {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .pro-hero-avatar-wrap > .pro-hero-avatar {
    width: 80px;
    height: 80px;
    font-size: 1.4rem;
  }

  .pro-hero-title {
    font-size: 1.6rem;
  }

  .pro-hero-action {
    width: 100%;
    justify-content: center;
  }

  .pro-tab-content {
    padding: 18px 18px 22px;
  }

  .pro-services-list .pro-service-card {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 12px 14px 12px 18px;
  }

  .pro-service-price {
    grid-column: 2;
    font-size: 1.1rem;
  }

  .pro-service-menu {
    position: absolute;
    right: 8px;
    top: 8px;
  }

  .pro-schedule-grid,
  .pro-profile-grid {
    grid-template-columns: 1fr;
  }

  .pro-field-span-2 {
    grid-column: span 1;
  }
}

/* Compatibilidade com WebView/Capacitor */
.admin-page[data-admin-panel-active="profissionais"] .pro-list-panel,
.admin-page[data-admin-panel-active="profissionais"] .pro-detail-panel {
  -webkit-overflow-scrolling: touch;
}

/* =====================================================================
   Tela "Usuários" — Premium SaaS (padrão pro-*)
   Reaproveita os tokens --ra-* e os componentes .pro-* da tela
   Profissionais, com pequenas adições específicas (toolbar, role filter,
   KPIs e fact grid). Não altera campos, dados ou chamadas de API.
   ===================================================================== */

.admin-page[data-admin-panel-active="usuarios"] .admin-panel[data-admin-panel="usuarios"] {
  background: var(--ra-bg);
  padding: 18px;
}

.admin-page[data-admin-panel-active="usuarios"] .admin-panel[data-admin-panel="usuarios"] > .admin-panel-head {
  display: none;
}

.users-pro-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ra-text);
}

.users-pro-toolbar {
  background: var(--ra-surface);
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  box-shadow: var(--ra-shadow-sm);
}

.users-pro-toolbar-main {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  min-width: 0;
}

.users-pro-tenant {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ra-text-soft);
}

.users-pro-tenant > span {
  color: var(--ra-text-soft);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.users-pro-tenant select {
  height: 40px;
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  background: var(--ra-surface);
  padding: 0 12px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ra-text);
  min-width: 220px;
}

.users-pro-tenant select:focus {
  outline: none;
  border-color: #BFD4FF;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.users-pro-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.users-pro-refresh {
  height: 40px;
  padding: 0 14px;
  border-radius: var(--ra-radius-md);
  border: 1px solid var(--ra-border);
  background: var(--ra-surface);
  color: var(--ra-text);
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.users-pro-refresh:hover {
  background: var(--ra-primary-soft);
  border-color: #BFDBFE;
  color: var(--ra-primary);
}

.users-pro-refresh svg { width: 16px; height: 16px; }

.users-pro-page {
  align-items: start;
}

.users-pro-list-panel .pro-list-search-row {
  margin-bottom: 4px;
}

.users-pro-role-row {
  display: block;
}

.users-pro-role {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  background: #F8FBFF;
  font-size: 0.85rem;
  color: var(--ra-text-soft);
}

.users-pro-role > span {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ra-text-soft);
}

.users-pro-role select {
  flex: 1;
  height: 36px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ra-text);
  outline: none;
  font-weight: 700;
}

.users-pro-list {
  max-height: 56vh;
}

.users-pro-item {
  /* herda de .pro-item, mas adiciona um pouco de respiro */
  padding: 10px 12px;
}

.users-pro-item-avatar.has-image {
  padding: 0;
  overflow: hidden;
}

.users-pro-item-avatar.has-image img,
.users-pro-item-avatar img.pro-item-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
  display: block;
}

.users-pro-table-hidden {
  display: none !important;
}

.users-pro-detail-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.users-pro-empty {
  margin: 0;
}

.users-pro-card {
  display: flex;
  flex-direction: column;
}

.users-pro-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
}

.users-pro-hero .pro-hero-avatar {
  background: linear-gradient(145deg, #2b4f97, #3d67b5);
}

.users-pro-hero .pro-hero-avatar.has-image {
  padding: 0;
}

.users-pro-hero .pro-hero-avatar.has-image img,
.users-pro-hero .pro-hero-avatar img.pro-hero-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
  display: block;
}

.users-pro-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  white-space: nowrap;
}

.users-pro-secondary-action {
  height: 40px;
  padding: 0 16px;
  border-radius: var(--ra-radius-md);
  border: 1px solid var(--ra-border);
  background: var(--ra-surface);
  color: var(--ra-text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.users-pro-secondary-action:hover {
  background: var(--ra-primary-soft);
  border-color: #BFDBFE;
  color: var(--ra-primary);
}

.users-pro-secondary-action.is-deactivate {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #B91C1C;
}

.users-pro-secondary-action.is-deactivate:hover {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #991B1B;
}

.users-pro-detail-body {
  padding: 22px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.users-pro-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.users-pro-kpi {
  background: #F8FBFF;
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.users-pro-kpi-label {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ra-text-soft);
  font-weight: 700;
}

.users-pro-kpi-value {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ra-text);
}

.users-pro-fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.users-pro-fact {
  background: var(--ra-surface);
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.users-pro-fact-label {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ra-text-soft);
  font-weight: 700;
}

.users-pro-fact-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ra-text);
  word-break: break-word;
}

.users-pro-muted {
  color: var(--ra-text-soft);
  font-style: italic;
}

@media (max-width: 1100px) {
  .users-pro-page {
    grid-template-columns: 1fr;
  }

  .users-pro-list-panel {
    position: static;
    top: auto;
  }

  .users-pro-list {
    max-height: 50vh;
  }

  .users-pro-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .users-pro-hero {
    grid-template-columns: 1fr;
  }

  .users-pro-hero-actions {
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .users-pro-fact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .admin-page[data-admin-panel-active="usuarios"] .admin-panel[data-admin-panel="usuarios"] {
    padding: 12px;
  }

  .users-pro-toolbar {
    padding: 10px 12px;
  }

  .users-pro-tenant select {
    min-width: 160px;
  }

  .users-pro-detail-body {
    padding: 16px 18px 22px;
  }

  .users-pro-kpis {
    grid-template-columns: 1fr;
  }
}

/* Compatibilidade com WebView/Capacitor */
.admin-page[data-admin-panel-active="usuarios"] .pro-list-panel,
.admin-page[data-admin-panel-active="usuarios"] .pro-detail-panel {
  -webkit-overflow-scrolling: touch;
}

/* =====================================================================
   Tela "Clientes" — Premium SaaS (padrão pro-*)
   Reaproveita os tokens --ra-* e os componentes .pro-* (lista, hero,
   tabs, etc.) com adições próprias para a toolbar de filtros, KPIs
   e cards de conteúdo. Mantém todos os IDs/data-attrs do JS legado.
   ===================================================================== */

.admin-page[data-admin-panel-active="clientes"] .admin-panel[data-admin-panel="clientes"] {
  background: var(--ra-bg);
  padding: 18px;
}

.admin-page[data-admin-panel-active="clientes"] .admin-panel[data-admin-panel="clientes"] > .admin-panel-head {
  display: none;
}

.clients-pro-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ra-text);
}

/* Toolbar superior com filtros (tenant, datas e botão de limpar) */
.clients-pro-toolbar {
  background: var(--ra-surface);
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  box-shadow: var(--ra-shadow-sm);
}

.clients-pro-toolbar-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.clients-pro-tenant,
.clients-pro-date-field,
.clients-pro-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  background: #F8FBFF;
  font-size: 0.85rem;
  color: var(--ra-text-soft);
}

.clients-pro-tenant > span,
.clients-pro-date-field > span,
.clients-pro-date > span {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ra-text-soft);
}

.clients-pro-tenant select,
.clients-pro-date-field select,
.clients-pro-date input {
  height: 36px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ra-text);
  outline: none;
  font-weight: 700;
  min-width: 0;
}

.clients-pro-tenant select { min-width: 200px; }
.clients-pro-date-field select { min-width: 150px; }
.clients-pro-date input { min-width: 130px; }

.clients-pro-clear {
  height: 40px;
  padding: 0 14px;
  border-radius: var(--ra-radius-md);
  border: 1px solid var(--ra-border);
  background: var(--ra-surface);
  color: var(--ra-text);
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.clients-pro-clear:hover {
  background: var(--ra-primary-soft);
  border-color: #BFDBFE;
  color: var(--ra-primary);
}

/* Garante que a toolbar do clientes apareça (substitui o display:none antigo) */
.admin-page[data-admin-panel-active="clientes"] .clients-pro-toolbar {
  display: flex;
}

/* Mensagens (feedback) */
.admin-page[data-admin-panel-active="clientes"] .clients-feedback {
  display: block;
  border-radius: var(--ra-radius-md);
  border: 1px solid var(--ra-border);
  background: #F8FBFF;
  color: var(--ra-text-soft);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 14px;
}

.admin-page[data-admin-panel-active="clientes"] .clients-feedback[hidden] {
  display: none !important;
}

.admin-page[data-admin-panel-active="clientes"] .clients-feedback[data-tone="warn"] {
  color: #9b3d3d;
  background: #FEF2F2;
  border-color: #FECACA;
}

.admin-page[data-admin-panel-active="clientes"] .clients-feedback[data-tone="success"] {
  color: #15803D;
  background: #ECFDF5;
  border-color: #BBF7D0;
}

/* Abas Clientes / Grupos (acima da busca; lista inalterada abaixo) */
.clients-pro-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.clients-pro-shell-tablist {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: #e8edf5;
  border: 1px solid var(--ra-border);
  align-self: flex-start;
}

.clients-pro-shell-tab {
  border: 0;
  background: transparent;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  color: var(--ra-text-soft);
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.clients-pro-shell-tab.is-active {
  background: #fff;
  color: var(--ra-text);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.clients-pro-clients-view[hidden] {
  display: none !important;
}

.clients-pro-groups-layout[hidden] {
  display: none !important;
}

.clients-pro-groups-layout {
  display: flex;
  flex-direction: column;
  background: var(--ra-surface);
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  box-shadow: var(--ra-shadow-sm);
  overflow: hidden;
  min-height: min(520px, 62vh);
}

.clients-pro-groups-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ra-border);
}

.clients-pro-groups-head-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ra-text);
}

.clients-pro-groups-more {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 12px;
}

.clients-pro-groups-create {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--ra-border);
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.clients-pro-groups-create:hover {
  background: #f8fbff;
}

.clients-pro-groups-create-icon {
  display: flex;
  color: var(--ra-text-soft);
}

.clients-pro-groups-create-text {
  flex: 1;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ra-text);
}

.clients-pro-groups-create-plus {
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ra-text-soft);
}

.clients-pro-groups-list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.clients-pro-group-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid #eef2f7;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
  font: inherit;
}

.clients-pro-group-row:hover {
  background: #f4f8ff;
}

.clients-pro-group-row-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ra-text);
}

.clients-pro-group-row-title {
  flex: 1;
  min-width: 0;
}

.clients-pro-group-row-desc {
  font-size: 0.8rem;
  color: var(--ra-text-soft);
  font-weight: 600;
  line-height: 1.35;
  padding-right: 1.5rem;
}

.clients-pro-group-row-chevron {
  margin-left: auto;
  font-size: 1rem;
  font-weight: 700;
  color: #94a3b8;
  flex-shrink: 0;
}

/* Layout pro-page para clientes */
.clients-pro-page {
  align-items: start;
}

/* Lista (esquerda) */
.clients-pro-list-panel .pro-list-search-row {
  margin-bottom: 4px;
}

.clients-pro-list {
  max-height: 60vh;
}

.clients-pro-load-more {
  padding: 10px 12px;
  border-style: solid;
  background: transparent;
  font-size: 0.82rem;
  color: var(--ra-text-soft);
}

.clients-pro-load-more-hint {
  opacity: 0.75;
}

/* Últimos cortes — Clientes + modais cockpit */
.clients-haircuts-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.clients-haircut-card {
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-lg);
  background: linear-gradient(180deg, #fafcff 0%, #fff 100%);
  padding: 16px 18px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.clients-haircut-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.clients-haircut-card__date {
  font-size: 1rem;
  color: var(--ra-text);
}

.clients-haircut-card__meta {
  margin: 4px 0 0;
  font-size: 0.88rem;
  color: var(--ra-text-soft);
}

.clients-haircut-card__branch {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--ra-text-soft);
}

.clients-haircut-card__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.clients-haircut-thumb {
  aspect-ratio: 1;
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  overflow: hidden;
  padding: 0;
  background: #f1f5fb;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.clients-haircut-thumb:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.12);
}

.clients-haircut-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.clients-haircut-card__notes {
  margin: 10px 0 0;
  font-size: 0.86rem;
  color: var(--ra-text-soft);
}

.clients-haircuts-empty {
  padding: 28px 20px;
}

.haircut-modal-backdrop[hidden],
.haircut-carousel-backdrop[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.haircut-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
}

.haircut-modal {
  width: min(100%, 480px);
  max-height: min(92vh, 720px);
  overflow: auto;
  border-radius: 20px;
  border: 1px solid var(--ra-border);
  background: var(--ra-surface);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.haircut-modal--capture {
  width: min(100%, 640px);
  padding: 0;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid #e8eef8;
  box-shadow: 0 28px 64px rgba(37, 99, 255, 0.12), 0 12px 32px rgba(15, 23, 42, 0.08);
}

.haircut-capture-premium {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: min(92vh, 820px);
  overflow: auto;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}

.haircut-modal__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.haircut-modal__kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ra-primary);
}

.haircut-modal__head strong {
  font-size: 1.25rem;
  color: var(--ra-text);
}

.haircut-modal__lead {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ra-text-soft);
  line-height: 1.45;
}

.haircut-modal__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: #f1f5fb;
  color: var(--ra-text-soft);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.haircut-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.haircut-modal__actions--stack {
  flex-direction: column;
}

.haircut-modal__actions--stack .pro-btn-primary,
.haircut-modal__actions--stack .clients-pro-secondary-action {
  width: 100%;
  justify-content: center;
}

.haircut-modal__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--ra-text-soft);
  cursor: pointer;
}

.haircut-modal__field span {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ra-text-soft);
  margin-bottom: 6px;
}

.haircut-modal__field input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  padding: 0 12px;
  font: inherit;
}

.haircut-modal__feedback {
  font-size: 0.86rem;
  margin: 0;
}

.haircut-modal__feedback[data-tone="warn"] {
  color: #b45309;
}

.haircut-capture-premium > :not(.haircut-capture-webcam) {
  padding-left: 24px;
  padding-right: 24px;
}

.haircut-capture-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  padding-bottom: 8px;
}

.haircut-capture-head__brand {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.haircut-capture-head__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(145deg, #3b7dff 0%, #2563ff 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(37, 99, 255, 0.28);
}

.haircut-capture-head__copy strong {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.2;
}

.haircut-capture-head__subtitle {
  margin: 6px 0 0;
  font-size: 0.92rem;
  color: #64748b;
  line-height: 1.45;
}

.haircut-capture-head__close {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.haircut-capture-head__close:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.haircut-capture-info-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 8px 0 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff 0%, #f1f6ff 100%);
  border: 1px solid #dbeafe;
}

.haircut-capture-info-card__icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff;
  color: #2563ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(37, 99, 255, 0.12);
}

.haircut-capture-info-card__copy {
  font-size: 0.86rem;
  color: #475569;
  line-height: 1.5;
}

.haircut-capture-info-card__copy p {
  margin: 0;
}

.haircut-capture-info-card__copy p + p {
  margin-top: 4px;
}

.haircut-capture-info-card__copy strong {
  color: #0f172a;
}

.haircut-capture-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 28px 20px;
  margin-bottom: 16px;
  border: 2px dashed #93c5fd;
  border-radius: 20px;
  background: #f8fbff;
}

.haircut-capture-dropzone[hidden] {
  display: none !important;
}

.haircut-capture-dropzone__icon {
  color: #2563ff;
  opacity: 0.85;
}

.haircut-capture-dropzone__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
}

.haircut-capture-dropzone__lead {
  margin: 0;
  font-size: 0.88rem;
  color: #64748b;
}

.haircut-capture-dropzone__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
  width: 100%;
}

.haircut-capture-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.haircut-capture-toolbar-row[hidden] {
  display: none !important;
}

.haircut-capture-counter {
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563ff;
  font-size: 0.8rem;
  font-weight: 800;
}

.haircut-capture-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.haircut-capture-btn--compact {
  min-height: 40px;
  padding: 0 14px;
  font-size: 0.86rem;
}

.haircut-capture-btn--primary {
  border: 0;
  background: #2563ff;
  color: #fff;
  box-shadow: 0 10px 24px rgba(37, 99, 255, 0.28);
}

.haircut-capture-btn--primary:hover:not(:disabled) {
  background: #1d4fd8;
  transform: translateY(-1px);
}

.haircut-capture-btn--outline {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #2563ff;
}

.haircut-capture-btn--outline:hover:not(:disabled) {
  border-color: #93c5fd;
  background: #f8fbff;
}

.haircut-capture-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.haircut-capture-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.haircut-capture-gallery[hidden] {
  display: none !important;
}

.haircut-capture-photo-card {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #e2e8f0;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.haircut-capture-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.haircut-capture-photo-card__remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.haircut-capture-photo-card--add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px dashed #93c5fd;
  background: #f8fbff;
  color: #2563ff;
  cursor: pointer;
  box-shadow: none;
}

.haircut-capture-photo-card__plus {
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1;
}

.haircut-capture-photo-card__add-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  padding: 0 8px;
  line-height: 1.3;
}

.haircut-capture-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.haircut-capture-notes__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #334155;
}

.haircut-capture-notes input {
  width: 100%;
  min-height: 52px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 0 16px;
  font: inherit;
  font-size: 0.95rem;
  color: #0f172a;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.haircut-capture-notes input:focus {
  outline: none;
  border-color: #2563ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 255, 0.15);
}

.haircut-capture-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.haircut-capture-chip {
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #2563ff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.haircut-capture-chip:hover,
.haircut-capture-chip.is-active {
  background: #2563ff;
  border-color: #2563ff;
  color: #fff;
}

.haircut-capture-feedback {
  margin: 0 0 12px;
}

.haircut-capture-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: stretch;
  padding: 16px 24px 24px;
  margin-top: 4px;
  border-top: 1px solid #eef2f8;
  background: #fafcff;
}

.haircut-capture-save-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 18px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #3b7dff 0%, #2563ff 100%);
  color: #fff;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 14px 32px rgba(37, 99, 255, 0.32);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.haircut-capture-save-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(37, 99, 255, 0.36);
}

.haircut-capture-save-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.haircut-capture-save-btn__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.haircut-capture-save-btn__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.haircut-capture-save-btn__copy strong {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.haircut-capture-save-btn__copy small {
  font-size: 0.78rem;
  font-weight: 500;
  opacity: 0.9;
}

.haircut-capture-skip-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  min-height: 64px;
  padding: 10px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
}

.haircut-capture-skip-btn__title {
  font-size: 0.92rem;
  font-weight: 800;
}

.haircut-capture-skip-btn small {
  font-size: 0.76rem;
  color: #64748b;
}

.haircut-capture-webcam {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: #0f172a;
  border-radius: 24px;
  overflow: hidden;
}

.haircut-capture-webcam[hidden] {
  display: none !important;
}

.haircut-capture-webcam__video {
  flex: 1;
  width: 100%;
  object-fit: cover;
  background: #000;
}

.haircut-capture-webcam__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.35) 0%, transparent 28%, transparent 62%, rgba(15, 23, 42, 0.55) 100%);
  pointer-events: none;
}

.haircut-capture-webcam__hint {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
}

.haircut-capture-webcam__actions {
  display: flex;
  gap: 10px;
  padding: 16px 20px 20px;
  background: rgba(15, 23, 42, 0.92);
}

.haircut-capture-webcam__snap {
  flex: 1;
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  background: #2563ff;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
}

.haircut-capture-webcam__cancel {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  background: transparent;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.haircut-capture-premium {
  position: relative;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-toolbar-icons {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  margin-inline-start: 2px;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-toolbar-btn {
  appearance: none;
  font: inherit;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
  transition: color 0.15s ease, opacity 0.15s ease, transform 0.12s ease, background 0.15s ease;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-toolbar-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-haircut-icon-btn {
  color: var(--ra-primary-dark, #1d4ed8);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-haircut-icon-btn:hover {
  color: var(--ra-primary, #2563eb);
  background: rgba(37, 99, 235, 0.08);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-haircut-icon-btn:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.42);
  outline-offset: 2px;
}

.haircut-carousel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 15, 30, 0.88);
  padding: 24px;
}

.haircut-carousel {
  position: relative;
  width: min(100%, 920px);
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: 12px;
}

.haircut-carousel__figure {
  margin: 0;
  text-align: center;
}

.haircut-carousel__figure img {
  max-width: 100%;
  max-height: min(72vh, 640px);
  border-radius: 16px;
  object-fit: contain;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.haircut-carousel__figure figcaption {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
}

.haircut-carousel__close {
  position: absolute;
  top: -8px;
  right: 0;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}

.haircut-carousel__nav {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
}

@media (max-width: 720px) {
  .clients-haircut-card__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .haircut-capture-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .haircut-capture-footer {
    grid-template-columns: 1fr;
  }

  .haircut-capture-skip-btn {
    min-width: 0;
    width: 100%;
  }

  .haircut-capture-dropzone__actions {
    flex-direction: column;
  }

  .haircut-capture-btn {
    width: 100%;
  }
}

.clients-pro-item {
  padding: 10px 12px;
}

.clients-pro-item-avatar.has-image {
  padding: 0;
  overflow: hidden;
}

.clients-pro-item-avatar.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
  display: block;
}

.clients-pro-item-tag {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Detalhe (direita) */
.clients-pro-detail-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.clients-pro-card {
  display: flex;
  flex-direction: column;
}

.clients-pro-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
}

.clients-pro-hero .pro-hero-avatar {
  background: linear-gradient(145deg, #6366F1, #8B5CF6);
}

.clients-pro-hero .pro-hero-avatar.has-image {
  padding: 0;
}

.clients-pro-hero .pro-hero-avatar.has-image img,
.clients-pro-hero .pro-hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
  display: block;
}

.clients-pro-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  white-space: nowrap;
}

.clients-pro-secondary-action {
  height: 40px;
  padding: 0 16px;
  border-radius: var(--ra-radius-md);
  border: 1px solid var(--ra-border);
  background: var(--ra-surface);
  color: var(--ra-text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.clients-pro-secondary-action:hover {
  background: var(--ra-primary-soft);
  border-color: #BFDBFE;
  color: var(--ra-primary);
}

.clients-pro-secondary-action.is-danger {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #B91C1C;
}

.clients-pro-secondary-action.is-danger:hover {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #991B1B;
}

.clients-pro-secondary-action[disabled],
.pro-hero-action[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* Faixa de KPIs */
.clients-pro-kpi-strip {
  padding: 20px 28px 6px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.clients-pro-kpi {
  background: #F8FBFF;
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 64px;
}

.clients-pro-kpi-label {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ra-text-soft);
  font-weight: 700;
}

.clients-pro-kpi-value {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ra-text);
  word-break: break-word;
}

/* Tabs do dashboard reutilizam .pro-tabs/.pro-tab via classes nos botões */
.clients-pro-tabs {
  border-bottom: 1px solid var(--ra-border);
}

/* Conteúdo do dashboard */
.clients-pro-content {
  padding: 22px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 200px;
}

.clients-pro-content-empty {
  background: #FAFCFF;
  border: 1px dashed var(--ra-border);
  border-radius: var(--ra-radius-md);
  padding: 18px;
  color: var(--ra-text-soft);
  font-size: 0.9rem;
  text-align: center;
}

.clients-pro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.clients-pro-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.clients-pro-section {
  background: var(--ra-surface);
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.clients-pro-section-highlight {
  background: linear-gradient(135deg, var(--ra-primary-soft), #FFFFFF);
  border-color: #BFDBFE;
}

.clients-pro-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.clients-pro-section-head strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ra-text);
}

.clients-pro-section-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--ra-primary-soft);
  color: var(--ra-primary);
  font-size: 0.78rem;
  font-weight: 800;
}

.clients-pro-section-value {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ra-text);
  letter-spacing: -0.01em;
}

.clients-pro-list-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.clients-pro-list-row {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  background: #FAFCFF;
}

.clients-pro-list-row-date {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ra-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.clients-pro-list-row-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ra-text);
  word-break: break-word;
}

.clients-pro-payment-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.clients-pro-payment-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  background: #FAFCFF;
}

.clients-pro-payment-row-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.clients-pro-payment-row-date {
  flex: 0 0 auto;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ra-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.35;
  max-width: 110px;
}

.clients-pro-payment-row-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.clients-pro-payment-row-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ra-text);
  line-height: 1.35;
  word-break: break-word;
}

.clients-pro-payment-row-subtitle {
  font-size: 0.78rem;
  color: var(--ra-text-muted, #64748b);
  line-height: 1.35;
}

.clients-pro-payment-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}

.clients-pro-payment-row-kind {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(148, 163, 184, 0.18);
  color: #475569;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.clients-pro-payment-row-kind[data-tone="service"] {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
  border-color: rgba(59, 130, 246, 0.28);
}

.clients-pro-payment-row-kind[data-tone="package"] {
  background: rgba(124, 58, 237, 0.12);
  color: #6d28d9;
  border-color: rgba(124, 58, 237, 0.28);
}

.clients-pro-payment-row-kind[data-tone="credit"] {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  border-color: rgba(34, 197, 94, 0.28);
}

.clients-pro-payment-row-kind[data-tone="product"] {
  background: rgba(234, 88, 12, 0.12);
  color: #c2410c;
  border-color: rgba(234, 88, 12, 0.28);
}

.clients-pro-payment-row-amount {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ra-text);
  white-space: nowrap;
}

.clients-pro-payment-row-amount--credit {
  font-size: 0.78rem;
  font-weight: 800;
  color: #15803d;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.clients-pro-payment-total-hint {
  margin-top: 6px;
  font-size: 0.76rem;
}

.clients-pro-fact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.clients-pro-fact {
  background: var(--ra-surface);
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.clients-pro-fact-label {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ra-text-soft);
  font-weight: 700;
}

.clients-pro-fact-value {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ra-text);
  word-break: break-word;
}

.clients-pro-note {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ra-text);
  line-height: 1.5;
}

.clients-pro-muted {
  color: var(--ra-text-soft);
  font-style: italic;
}

/* Mantém o ícone WhatsApp no hero/list compatível com o estilo legado */
.clients-pro-hero .clients-source-whatsapp,
.clients-pro-item .clients-source-whatsapp {
  margin-left: 0;
}

/* Responsividade */
@media (max-width: 1280px) {
  .clients-pro-kpi-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .clients-pro-page {
    grid-template-columns: 1fr;
  }

  .clients-pro-list-panel {
    position: static;
    top: auto;
  }

  .clients-pro-list {
    max-height: 50vh;
  }

  .clients-pro-tenant select { min-width: 160px; }
  .clients-pro-date-field select { min-width: 130px; }
  .clients-pro-date input { min-width: 120px; }

  .clients-pro-fact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .clients-pro-hero {
    grid-template-columns: 1fr;
  }

  .clients-pro-hero-actions {
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .clients-pro-grid-2 {
    grid-template-columns: 1fr;
  }

  .clients-pro-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 16px 20px 4px;
  }

  .clients-pro-content {
    padding: 18px 20px 24px;
  }
}

@media (max-width: 640px) {
  .admin-page[data-admin-panel-active="clientes"] .admin-panel[data-admin-panel="clientes"] {
    padding: 12px;
  }

  .clients-pro-toolbar {
    padding: 10px 12px;
  }

  .clients-pro-toolbar-main {
    width: 100%;
  }

  .clients-pro-tenant,
  .clients-pro-date-field,
  .clients-pro-date {
    flex: 1 1 140px;
  }

  .clients-pro-kpi-strip {
    grid-template-columns: 1fr;
  }

  .clients-pro-fact-grid {
    grid-template-columns: 1fr;
  }

  .clients-pro-list-row {
    grid-template-columns: 1fr;
  }
}

/* Compatibilidade com WebView/Capacitor */
.admin-page[data-admin-panel-active="clientes"] .pro-list-panel,
.admin-page[data-admin-panel-active="clientes"] .pro-detail-panel {
  -webkit-overflow-scrolling: touch;
}

/* =====================================================================
   Tela "Cockpit" (Dashboard) — Premium SaaS (padrão pro-*)
   Aplica os tokens --ra-* nos cards, KPIs, listas e gráficos do
   cockpit, mantendo a estrutura HTML/JS existente. Usa especificidade
   via data-admin-panel="dashboards" para sobrescrever as regras antigas.
   ===================================================================== */

.admin-page[data-admin-panel-active="dashboards"] .admin-dashboard-panel {
  background: transparent;
  padding: 0.9rem;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-content {
  padding-top: 0.55rem;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-page {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ra-text);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-page[data-admin-cockpit-refreshing="true"] {
  position: relative;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-page[data-admin-cockpit-refreshing="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(37, 99, 235, 0.06) 42%,
    rgba(37, 99, 235, 0.1) 50%,
    rgba(37, 99, 235, 0.06) 58%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: admin-cockpit-refresh-shimmer 1.1s ease-in-out infinite;
}

@keyframes admin-cockpit-refresh-shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-grid {
  gap: 20px;
}

/* Desktop web (≥981): ordem = Situação Atual → … (alinha ao DOM). Em ≤980, regras globais / max-width 900 invertem para Situação primeiro. */
@media (min-width: 981px) {
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-grid > .admin-cockpit-card-next {
    order: 1;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-grid > .admin-cockpit-card-cockpit-upsell {
    order: 2;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-grid > .admin-cockpit-card-agenda {
    order: 3;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-grid > .admin-cockpit-kpi-grid {
    order: 4;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-grid > .admin-cockpit-card-week {
    order: 5;
  }
}

/* KPIs (Atendimentos hoje, Clientes únicos, Ocupação, Faturamento, Ticket, Avaliação) */
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-kpi-card {
  background: var(--ra-surface);
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-lg);
  box-shadow: var(--ra-shadow-sm);
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: flex-start;
  min-height: 110px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-kpi-card[data-home-action]:hover {
  transform: translateY(-1px);
  border-color: #BFD4FF;
  box-shadow: 0 14px 32px rgba(15, 35, 75, 0.08);
  cursor: pointer;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-kpi-card[data-home-action]:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--ra-radius-md);
  font-size: 20px;
  background: var(--ra-primary-soft);
  color: var(--ra-primary);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-kpi-icon[data-tone="green"] {
  background: #DCFCE7;
  color: #15803D;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-kpi-icon[data-tone="violet"] {
  background: #EDE9FE;
  color: #6D28D9;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-kpi-icon[data-tone="amber"] {
  background: #FEF3C7;
  color: #B45309;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-kpi-icon[data-tone="success"] {
  background: #DCFCE7;
  color: #15803D;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-kpi-icon[data-tone="pink"] {
  background: #FCE7F3;
  color: #BE185D;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-kpi-card small {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ra-text-soft);
  font-weight: 600;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-kpi-card strong {
  font-size: 1.6rem;
  line-height: 1.05;
  color: var(--ra-text);
  font-weight: 800;
  margin-top: 4px;
  letter-spacing: -0.01em;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-kpi-card p {
  margin: 4px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ra-success);
  letter-spacing: 0.01em;
}

/* Cards (Situação atual, Próximos, semana, etc.) */
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card {
  background: var(--ra-surface);
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-lg);
  box-shadow: var(--ra-shadow-sm);
  padding: 22px 24px;
  gap: 14px;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-head h2 {
  color: var(--ra-text);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.005em;
}

/*
 * Layout do cockpit: Situação Atual é o card principal e ocupa a linha inteira em todas as
 * larguras. Próximos Atendimentos, KPIs e Resumo da semana ficam empilhados embaixo, em ordem.
 * (Tentamos lado-a-lado em ≥1100px no commit 466bfae, mas o cliente preferiu manter Situação Atual
 *  full width — reversão em 15/05/2026.)
 */
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next {
  grid-column: 1 / -1;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda {
  grid-column: 1 / -1;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-cockpit-upsell {
  grid-column: 1 / -1;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-cockpit-upsell:not([hidden]) {
  gap: 0;
  overflow: visible;
  padding: 12px 14px 20px;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-kpi-grid {
  grid-column: 1 / -1;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-highlights {
  grid-column: span 3;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-week {
  grid-column: span 6;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-performance {
  grid-column: span 3;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-cockpit-card-head {
  align-items: center;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-cockpit-card-next-head-trailing {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next #adminNextClientDelayBadge {
  margin-left: 0;
  white-space: nowrap;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-cockpit-fit-in-btn {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  flex: 0 0 40px;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #0f172a;
  background: #0f172a;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 0;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-cockpit-fit-in-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-cockpit-fit-in-btn:hover:not(:disabled) {
  background: #1e293b;
  border-color: #1e293b;
  color: #fff;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-cockpit-fit-in-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.admin-page[data-admin-panel-active="dashboards"] #adminNextClientDelayBadge[hidden] {
  display: none !important;
}

/* Badge de atraso no cartão Situação Atual: sem ícone "!" (evita largura extra + clip no mobile). */
.admin-page[data-admin-panel-active="dashboards"] #adminNextClientDelayBadge[data-tone="warn"]::before {
  content: none;
  display: none;
  margin: 0;
  width: 0;
  height: 0;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-sync-pill {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  background: #DCFCE7;
  color: #15803D;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-sync-pill[data-tone="warn"],
.admin-page[data-admin-panel-active="dashboards"] .admin-inline-status[data-tone="warn"] {
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.34);
  color: #8a5a00;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-sync-pill[data-tone="warn"]::before,
.admin-page[data-admin-panel-active="dashboards"] .admin-inline-status[data-tone="warn"]::before {
  content: "!";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  margin-right: 0.32rem;
  background: rgba(138, 90, 0, 0.16);
  color: #8a5a00;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 14px;
  vertical-align: middle;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-next-client-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-next-client-btn-icon {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
  opacity: 0.94;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-next-client-btn-icon svg {
  display: block;
}

/* Próximo atendimento — ações em camadas (hierarquia SaaS) */
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-top: clamp(16px, 2.5vw, 20px);
  padding-top: clamp(16px, 2.5vw, 20px);
  border-top: 1px solid rgba(226, 232, 240, 0.95);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions-main {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions-foot {
  width: 100%;
  margin-top: 12px;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions-foot .admin-next-client-details-btn {
  margin-top: 0;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions .admin-next-client-btn,
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda > .admin-next-client-btn {
  box-sizing: border-box;
  margin: 0;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-height: 44px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease,
    opacity 0.2s ease,
    filter 0.2s ease;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions .admin-next-client-btn:focus-visible,
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda > .admin-next-client-btn:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions .admin-next-client-btn--primary {
  background: linear-gradient(135deg, var(--ra-primary), var(--ra-primary-dark));
  color: #fff;
  border: none;
  padding: 12px 18px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions .admin-next-client-btn--primary:hover:not(:disabled) {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions .admin-next-client-btn--primary:active:not(:disabled) {
  transform: scale(0.98);
  filter: brightness(1.02);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions .admin-next-client-btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions .admin-next-client-btn--secondary {
  background: #fff;
  border: 1px solid #dbeafe;
  color: var(--ra-primary);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions .admin-next-client-btn--secondary:hover:not(:disabled) {
  background: var(--ra-primary-soft);
  border-color: #bfdbfe;
  transform: translateY(-1px);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions .admin-next-client-btn--secondary:active:not(:disabled) {
  transform: scale(0.98);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions .admin-next-client-btn--secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f8fafc;
  border-color: #e5e7eb;
  color: #9ca3af;
  transform: none;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions .admin-next-client-btn--danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions .admin-next-client-btn--danger:hover:not(:disabled) {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
  transform: translateY(-1px);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions .admin-next-client-btn--danger:active:not(:disabled) {
  transform: scale(0.98);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions .admin-next-client-btn--danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions .admin-next-client-btn--ghost-detail,
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda > .admin-next-client-btn--ghost-detail {
  width: 100%;
  min-height: 44px;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  color: var(--ra-text);
  font-weight: 600;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions .admin-next-client-btn--ghost-detail:hover:not(:disabled),
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda > .admin-next-client-btn--ghost-detail:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: var(--ra-text);
  transform: translateY(-1px);
}

.admin-page[data-admin-panel-active="dashboards"]
  .admin-cockpit-next-actions
  .admin-next-client-btn--ghost-detail
  .admin-next-client-btn-icon,
.admin-page[data-admin-panel-active="dashboards"]
  .admin-cockpit-card-agenda
  > .admin-next-client-btn--ghost-detail
  .admin-next-client-btn-icon {
  opacity: 1;
  color: inherit;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions .admin-next-client-btn--ghost-detail:active:not(:disabled),
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda > .admin-next-client-btn--ghost-detail:active:not(:disabled) {
  transform: scale(0.99);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda > .admin-dashboard-fullcal.admin-next-client-btn--ghost-detail {
  margin-top: 12px;
}

@media (max-width: 720px) {
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions .admin-next-client-btn,
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda > .admin-next-client-btn {
    white-space: normal;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions-main .admin-next-client-btn--primary {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions-main .admin-next-client-btn--secondary,
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions-main .admin-next-client-btn--danger {
    grid-row: 2;
  }
}

/* Próximo atendimento — avatar maior; borda inferior alinhada ao quadrado ~52px original (cresce para cima). */
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-avatar {
  --cockpit-next-avatar-size: 104px;
  --cockpit-next-avatar-anchor: 52px;
  width: var(--cockpit-next-avatar-size) !important;
  height: var(--cockpit-next-avatar-size) !important;
  border-radius: 24px;
  background: linear-gradient(140deg, var(--ra-primary), var(--ra-primary-dark));
  box-shadow: 0 14px 36px rgba(37, 99, 235, 0.28);
  font-size: 2.05rem !important;
  font-weight: 800;
  margin-top: calc(var(--cockpit-next-avatar-anchor) - var(--cockpit-next-avatar-size)) !important;
  overflow: hidden;
}

@media (max-width: 640px) {
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-avatar {
    --cockpit-next-avatar-size: 92px;
    font-size: 1.75rem !important;
  }
}

/* Mobile (≤640px): layout do “próximo atendimento” como antes — grid centrado; wrapper de painel não altera o fluxo. */
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-layout {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-main {
  display: grid;
  justify-items: center;
  text-align: center;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-main strong {
  color: var(--ra-text);
  font-weight: 800;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-name-inline {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: center;
  width: auto;
  max-width: min(36rem, 100%);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-name-inline strong {
  width: auto;
  max-width: 100%;
  min-width: 0;
  flex: 0 1 auto;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-details-icon-btn {
  appearance: none;
  font: inherit;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ra-primary-dark, #1d4ed8);
  cursor: pointer;
  vertical-align: middle;
  transition: color 0.15s ease, opacity 0.15s ease, transform 0.12s ease;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-details-icon-btn:hover {
  color: var(--ra-primary, #2563eb);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-details-icon-btn:active:not(:disabled) {
  opacity: 0.88;
  transform: translateY(0.5px);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-details-icon-btn:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.42);
  outline-offset: 2px;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-details-icon-wrap {
  display: flex;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-next-client-details-btn.admin-cockpit-next-details-icon-btn {
  width: 34px;
  height: 34px;
  max-width: none;
  margin-top: 0;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-main p {
  color: var(--ra-text);
  font-weight: 500;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-main small {
  color: var(--ra-text);
  font-weight: 600;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-main .admin-next-client-time-sub {
  color: var(--ra-text);
  font-weight: 600;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-main .admin-inline-status[data-tone="warn"] {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.35rem;
}

/* Hero: avatar + bloco (dados + cartão Produtos). Base = coluna (mobile); ≥641 vira linha. */
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: min(36rem, 100%);
  margin: 0 auto;
  gap: 0.65rem;
  box-sizing: border-box;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  width: 100%;
  min-width: 0;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-hero-text {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  width: 100%;
  min-width: 0;
}

/* ≤640px: painel vira `display: contents` no grid; hero em coluna com avatar centrado; remove margin-top negativo do avatar (evita sobrepor o título «Situação Atual»). Este bloco fica DEPOIS das regras base do .next-hero para vencer `align-items: stretch`. */
@media (max-width: 640px) {
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-panel--situation {
    display: contents;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-hero {
    flex-direction: column;
    align-items: center;
    max-width: 22rem;
    margin-inline: auto;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-avatar {
    align-self: center;
    margin-inline: auto;
    margin-top: 0 !important;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-hero-copy {
    width: 100%;
    max-width: 22rem;
    align-items: stretch;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-hero-copy .admin-cockpit-cart-summary {
    width: 100%;
    max-width: none;
  }
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-cart-summary {
  appearance: none;
  font: inherit;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  padding: 0.48rem 0.6rem 0.48rem 0.52rem;
  border-radius: 12px;
  border: 1px solid rgba(37, 99, 235, 0.42);
  background: #fff;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.08);
  cursor: pointer;
  color: var(--ra-text);
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.15s ease;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-cart-summary:hover {
  border-color: rgba(37, 99, 235, 0.72);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.14);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-cart-summary:active {
  transform: scale(0.99);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-cart-summary__icon-wrap {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ra-primary);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-cart-summary__body {
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
  min-width: 0;
  flex: 1;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-cart-summary__title {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--ra-text-soft);
  line-height: 1.15;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-cart-summary__total {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ra-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-cart-summary__chev {
  flex-shrink: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #94a3b8;
  line-height: 1;
  margin-left: 0.05rem;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-cart-summary .admin-cockpit-cart-icon-badge {
  top: -5px;
  right: -6px;
}

/* Cronómetro «Tempo decorrido» do card Situação Atual: aparece só quando execution_status = in_progress.
   Visual de cartão branco com pílula verde no topo + display monoespaçado grande (mm:ss). */
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  padding: 0.55rem 0.7rem 0.6rem;
  border-radius: 14px;
  border: 1px solid rgba(22, 163, 74, 0.32);
  background:
    linear-gradient(180deg, rgba(220, 252, 231, 0.85) 0%, #fff 70%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 10px rgba(22, 163, 74, 0.1);
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.4rem;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-timer__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-timer__dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
  animation: ra-cockpit-pulse 1.6s ease-in-out infinite;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-timer__value {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--ra-text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin-top: 0.15rem;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-timer__label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ra-text-soft);
  letter-spacing: 0.02em;
}

/* Tom do cronómetro vs duração do serviço (não vs fim do slot na agenda). */
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-timer[data-service-time-tone="warn"] {
  border-color: rgba(245, 158, 11, 0.45);
  background: linear-gradient(180deg, rgba(254, 243, 199, 0.92) 0%, #fff 72%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 2px 10px rgba(245, 158, 11, 0.14);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-timer[data-service-time-tone="warn"] .admin-cockpit-situation-timer__badge {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-timer[data-service-time-tone="warn"] .admin-cockpit-situation-timer__dot {
  background: #f59e0b;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55);
  animation: ra-cockpit-pulse-warn 1.6s ease-in-out infinite;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-timer[data-service-time-tone="danger"] {
  border-color: rgba(239, 68, 68, 0.45);
  background: linear-gradient(180deg, rgba(254, 226, 226, 0.95) 0%, #fff 72%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 2px 10px rgba(239, 68, 68, 0.14);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-timer[data-service-time-tone="danger"] .admin-cockpit-situation-timer__badge {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-timer[data-service-time-tone="danger"] .admin-cockpit-situation-timer__dot {
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55);
  animation: ra-cockpit-pulse-danger 1.6s ease-in-out infinite;
}

@keyframes ra-cockpit-pulse-warn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
  50% { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0); }
}

@keyframes ra-cockpit-pulse-danger {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
}

@keyframes ra-cockpit-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55); }
  50% { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-timer__dot {
    animation: none;
  }
}

/* Mobile (até 640px): cronómetro ocupa toda a largura, antes do cart. */
@media (max-width: 640px) {
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-hero-copy .admin-cockpit-situation-timer {
    max-width: none;
    margin-bottom: 0.55rem;
  }
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45rem;
  width: 100%;
  max-width: 22rem;
  margin-top: 0.4rem;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-metric {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ra-text-soft);
  text-align: left;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-metric__icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--ra-primary);
  opacity: 0.9;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-metric__text {
  min-width: 0;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-metrics-note {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ra-text-soft);
  text-align: center;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-badges {
  justify-content: center;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-badges--premium {
  justify-content: flex-start;
  gap: 0.5rem;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-badges--premium .ra-status-badge {
  min-height: 40px;
}

/* Boas-vindas do Cockpit: só tablet (768–1199 em admin-tablet.css). Desktop e mobile mantêm layout clássico. */
@media (max-width: 767px), (min-width: 1200px) {
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-welcome-intro,
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-welcome-foot,
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-welcome-started,
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-welcome-schedule-row,
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-welcome-stats,
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-welcome-status,
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-timer--inline {
    display: none !important;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-cart-summary--welcome-slot,
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-cart-summary--welcome-corner,
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-welcome-top,
  .admin-page[data-admin-panel-active="dashboards"] #adminCockpitCartMount,
  .admin-page[data-admin-panel-active="dashboards"] #adminCockpitTabletPaidMount {
    display: none !important;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-welcome-avatar-stage {
    display: contents;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-avatar--welcome {
    border: 0;
  }
}

@media (min-width: 1200px) {
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next > .admin-cockpit-card-head h2 {
    display: block;
  }
}

/* Desktop / tablet ≥641px: dois painéis, hero em duas colunas, sugestões de produtos. */
@media (min-width: 641px) {
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next #adminHomeNextClient {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-panel--situation {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(0.65rem, 1.5vw, 1rem);
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ra-border);
    border-radius: var(--ra-radius-lg, 16px);
    background: var(--ra-surface);
    padding: clamp(12px, 1.6vw, 20px);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-panel--upsell,
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-cockpit-upsell .admin-cockpit-cockpit-upsell-mount {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: var(--ra-radius-lg, 16px);
    /* visible: carrossel coverflow amplia o card ativo — overflow hidden cortava sombras */
    overflow: visible;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-panel--upsell:not([hidden]),
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-cockpit-upsell:not([hidden]) {
    border: 1px solid rgba(129, 140, 248, 0.38);
    background: linear-gradient(180deg, rgba(245, 247, 255, 0.98) 0%, rgba(252, 252, 255, 1) 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-panel--upsell .admin-cockpit-upsell,
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-cockpit-upsell .admin-cockpit-upsell {
    /* Altura fixa do card hero (~mockup) e slot da foto — ajuste fino no DevTools */
    --cockpit-upsell-hero-height: clamp(19rem, 40vh, 23.5rem);
    --cockpit-upsell-photo-max-height: 18rem;
    --cockpit-upsell-photo-aspect: 4 / 5;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0.2rem 0 0.35rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-panel--upsell:not([hidden]) {
    padding: 12px 14px 20px;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(0.85rem, 2vw, 1.35rem);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    text-align: initial;
    overflow: visible;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-after-detail {
    grid-column: auto;
    max-width: none;
    margin-top: 0.35rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-hero {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    column-gap: clamp(1.15rem, 2.8vw, 2.25rem);
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-hero-copy {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.55rem 1rem;
    flex: 1;
    min-width: 0;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-hero-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-hero-copy .admin-cockpit-cart-summary {
    width: auto;
    max-width: min(14rem, 42%);
    flex: 0 1 auto;
    align-self: flex-start;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-avatar {
    --cockpit-next-avatar-size: clamp(140px, 20vw, 210px);
    --cockpit-next-avatar-anchor: var(--cockpit-next-avatar-size);
    margin-top: 0 !important;
    margin-bottom: 0;
    flex-shrink: 0;
    align-self: center;
    border-radius: clamp(22px, 2.8vw, 34px);
    font-size: clamp(2rem, 3.2vw, 2.85rem) !important;
    transform: none;
    z-index: 1;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    justify-items: unset;
    flex: 1 1 58%;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding-top: 0;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-main p,
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-main small {
    text-align: left;
    width: 100%;
    max-width: 28rem;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-name-inline {
    justify-content: flex-start;
    width: 100%;
    max-width: 28rem;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-name-inline strong {
    flex: 0 1 auto;
    width: auto;
    max-width: calc(100% - 34px);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-badges {
    justify-content: flex-start;
    width: 100%;
    max-width: 28rem;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 28rem;
    margin-top: 0.45rem;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-metrics-note {
    text-align: left;
    grid-column: 1 / -1;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-delay-warning--full {
    align-self: stretch;
    width: 100%;
    max-width: none;
    margin: 0;
    text-align: left;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-top: clamp(0.85rem, 2vw, 1.15rem);
    position: relative;
    z-index: 1;
    align-self: stretch;
    box-sizing: border-box;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-suggestions,
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-cockpit-upsell-mount {
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    overflow: visible;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: clamp(16.5rem, 36vh, 19.5rem);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-cockpit-upsell-mount:not([hidden]) .admin-cockpit-upsell {
    flex: 1 1 auto;
    min-height: 0;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.35rem 1rem;
    margin-bottom: 0.35rem;
    flex-shrink: 0;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ra-text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-sub {
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ra-text-soft);
    line-height: 1.35;
    max-width: 36rem;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-all {
    appearance: none;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ra-primary-dark, #1d4ed8);
    background: transparent;
    border: 0;
    padding: 0.2rem 0;
    cursor: pointer;
    white-space: nowrap;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-all:hover {
    text-decoration: underline;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-carousel {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.28rem;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    min-height: var(--cockpit-upsell-hero-height, clamp(19rem, 40vh, 23.5rem));
    height: var(--cockpit-upsell-hero-height, clamp(19rem, 40vh, 23.5rem));
    max-height: var(--cockpit-upsell-hero-height, clamp(19rem, 40vh, 23.5rem));
    box-sizing: border-box;
    overflow: visible;
    padding-inline: 0.15rem;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-stage {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-stage.is-updating .admin-cockpit-upsell-peek {
    opacity: 0.22;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-spotlight {
    position: relative;
    display: grid;
    grid-template-columns: minmax(3.85rem, 7.25%) minmax(0, 1fr) minmax(3.85rem, 7.25%);
    align-items: stretch;
    gap: 0.28rem;
    width: 100%;
    height: var(--cockpit-upsell-hero-height, clamp(19rem, 40vh, 23.5rem));
    min-height: var(--cockpit-upsell-hero-height, clamp(19rem, 40vh, 23.5rem));
    max-height: var(--cockpit-upsell-hero-height, clamp(19rem, 40vh, 23.5rem));
    overflow: visible;
    padding-inline: 0;
    box-sizing: border-box;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-spotlight--single {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 0;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-spotlight--single .admin-cockpit-upsell-peek {
    display: none;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-peek {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.18rem;
    width: 100%;
    max-width: 5.15rem;
    min-width: 0;
    padding: 0.36rem 0.32rem 0.34rem;
    border-radius: 11px;
    border: 1px solid rgba(226, 232, 240, 0.92);
    background: #fff;
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.06);
    transform: scale(0.74);
    transform-origin: center center;
    opacity: 0.44;
    filter: blur(0.65px) saturate(0.92);
    pointer-events: none;
    user-select: none;
    align-self: center;
    justify-self: center;
    min-height: 9.25rem;
    max-height: 11.25rem;
    overflow: hidden;
    transition:
      transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
      filter 0.42s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-peek--prev {
    grid-column: 1;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-peek--next {
    grid-column: 3;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-peek--empty {
    visibility: hidden;
    opacity: 0;
    border-color: transparent;
    box-shadow: none;
    background: transparent;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-peek__media {
    width: 100%;
    height: 3.65rem;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-peek .admin-cockpit-upsell-card-stock {
    font-size: 0.58rem;
    padding: 0.1rem 0.3rem;
    align-self: flex-start;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-peek__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-peek__name {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--ra-text);
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-peek__category {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--ra-text-soft);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-peek__price {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--ra-text);
    font-variant-numeric: tabular-nums;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-peek__add {
    display: none;
  }

  @keyframes admin-cockpit-upsell-hero-enter {
    from {
      transform: scale(0.9);
      opacity: 0.62;
      box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.08),
        0 0 0 1px rgba(37, 99, 235, 0.06);
    }
    to {
      transform: scale(1);
      opacity: 1;
      box-shadow:
        0 16px 38px rgba(15, 23, 42, 0.12),
        0 0 0 2px rgba(37, 99, 235, 0.14),
        0 0 0 1px rgba(37, 99, 235, 0.08);
    }
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero {
    grid-column: 2;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(7.75rem, 27%) minmax(0, 1fr) minmax(9.5rem, 25%);
    align-items: stretch;
    gap: 0;
    width: 100%;
    min-width: 0;
    min-height: var(--cockpit-upsell-hero-height, clamp(19rem, 40vh, 23.5rem));
    height: var(--cockpit-upsell-hero-height, clamp(19rem, 40vh, 23.5rem));
    max-height: var(--cockpit-upsell-hero-height, clamp(19rem, 40vh, 23.5rem));
    align-self: stretch;
    padding: 0;
    border-radius: 16px;
    border: 1px solid rgba(37, 99, 235, 0.34);
    background: #fff;
    box-shadow:
      0 16px 38px rgba(15, 23, 42, 0.12),
      0 0 0 2px rgba(37, 99, 235, 0.12),
      0 0 0 1px rgba(37, 99, 235, 0.08);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    transform: scale(1);
    transform-origin: center center;
    transition:
      border-color 0.38s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero.is-spotlight-enter {
    animation: admin-cockpit-upsell-hero-enter 0.48s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.5rem;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%);
    border-right: 1px solid rgba(226, 232, 240, 0.9);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__media-inner {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: var(--cockpit-upsell-photo-max-height, 18rem);
    aspect-ratio: var(--cockpit-upsell-photo-aspect, 4 / 5);
    min-height: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__media-inner img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: var(--cockpit-upsell-photo-max-height, 18rem);
    object-fit: contain;
    object-position: center center;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__media-inner--ph {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--ra-primary);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__main {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
    padding: 0.68rem 0.78rem 0.58rem;
    border-right: 1px solid rgba(226, 232, 240, 0.85);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__head {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__name {
    margin: 0;
    font-size: clamp(1.65rem, 2.4vw, 2.25rem);
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.03em;
    line-height: 1.05;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__category {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    line-height: 1.15;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__stock {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: fit-content;
    max-width: 100%;
    padding: 0.1rem 0.46rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    border: 1px solid transparent;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__stock-dot {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
    opacity: 0.9;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__stock--ok {
    color: #166534;
    background: #f0fdf4;
    border-color: rgba(34, 197, 94, 0.28);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__stock--low {
    color: #92400e;
    background: #fffbeb;
    border-color: rgba(251, 191, 36, 0.35);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__stock--out {
    color: #991b1b;
    background: #fef2f2;
    border-color: rgba(248, 113, 113, 0.35);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__desc {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: #475569;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.55rem 0.72rem;
    min-height: 0;
    flex: 1 1 auto;
    margin-top: 0.12rem;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__detail-block {
    min-width: 0;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__detail-title {
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    color: #1e3a8a;
    margin: 0 0 0.32rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.15;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__detail-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    font-weight: 500;
    color: #475569;
    line-height: 1.4;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__detail-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.38rem;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__detail-list li + li {
    margin-top: 0.28rem;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__check {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 800;
    color: #2563eb;
    line-height: 1.35;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__aside {
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    padding: 0.72rem 0.68rem 0.65rem;
    background: linear-gradient(180deg, #eff6ff 0%, #f8fafc 100%);
    min-width: 0;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__reco {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    min-height: 0;
    flex: 0 1 auto;
    padding: 0.78rem 0.72rem;
    border-radius: 12px;
    background: linear-gradient(180deg, #dbeafe 0%, #eff6ff 55%, #f8fafc 100%);
    border: 1px solid rgba(37, 99, 235, 0.2);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.08);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__reco-icon {
    color: var(--ra-primary, #2563eb);
    line-height: 0;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__reco-title {
    font-size: 0.72rem;
    font-weight: 800;
    color: #1e3a8a;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__reco-text {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: #475569;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__price-wrap {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.08rem 0.12rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    padding: 0.08rem 0 0.12rem;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__price-currency {
    font-size: 1.05rem;
    font-weight: 800;
    color: #2563eb;
    letter-spacing: -0.02em;
    margin-right: 0.06rem;
    align-self: flex-end;
    padding-bottom: 0.22rem;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__price-whole {
    font-size: clamp(2.25rem, 3.2vw, 2.625rem);
    font-weight: 900;
    color: #2563eb;
    letter-spacing: -0.04em;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__price-cents {
    font-size: 1.05rem;
    font-weight: 700;
    color: #3b82f6;
    letter-spacing: -0.02em;
    align-self: flex-end;
    padding-bottom: 0.38rem;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__add {
    margin-top: auto;
    width: 100%;
    min-height: 2.85rem;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.28);
    transition:
      box-shadow 0.22s ease,
      transform 0.18s ease,
      background-color 0.18s ease;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__add:hover:not(:disabled) {
    box-shadow:
      0 10px 28px rgba(37, 99, 235, 0.38),
      0 0 0 3px rgba(37, 99, 235, 0.14);
    transform: translateY(-1px);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-dots {
    display: none !important;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-scroll {
    position: relative;
    top: auto;
    flex-shrink: 0;
    align-self: center;
    transform: none;
    z-index: 5;
  }

  @media (max-width: 720px) {
    .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-spotlight {
      grid-template-columns: minmax(0, 1fr);
      padding-inline: 0;
    }

    .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-peek {
      display: none;
    }

    .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero {
      grid-column: 1;
    }

    .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto auto;
    }

    .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero {
      height: auto;
      max-height: none;
      min-height: 0;
    }

    .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-carousel,
    .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-spotlight {
      height: auto;
      max-height: none;
      min-height: 0;
    }

    .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__visual {
      border-right: 0;
      border-bottom: 1px solid rgba(226, 232, 240, 0.9);
      min-height: 7.75rem;
      max-height: none;
    }

    .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero__main {
      border-right: 0;
      border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-peek {
      filter: none;
      transition-duration: 0.01ms;
    }

    .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-hero.is-spotlight-enter {
      animation: none;
    }
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-viewport {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-block: 0.1rem;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-viewport::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    width: max-content;
    gap: 0.65rem;
    padding: 0.25rem 0 0.5rem;
    box-sizing: border-box;
  }

  /* =======================================================================
   * PADRAO CARROSSEL DE VENDA (referencia visual)
   * -----------------------------------------------------------------------
   * Documentacao em contexto.md → "Padrao de carrossel de venda (sugestoes
   * de produto)". Resumo aplicado aqui:
   *
   *   .admin-cockpit-upsell-card                  → card COLUNA alta (~300px),
   *     hierarquia: mídia + nome/categoria + apresentação + meta + CTA
   *   .admin-cockpit-upsell-card__head            → grid 64px | 1fr
   *     (.media + .head-text: nome + categoria)
   *   .admin-cockpit-upsell-card__presentation    → bloco de texto (placeholder
   *     até o backend enviar description)
   *   .admin-cockpit-upsell-card__meta            → flex row entre PILL de
   *     estoque (esquerda) e PRECO (direita, tabular-nums)
   *   .admin-cockpit-upsell-card-stock--ok|low|out → pill colorida
   *     (verde / amarelo / vermelho) com bolinha
   *     - ok: estoque >= 4    - low: 1-3    - out: 0
   *   .admin-cockpit-upsell-card__add             → CTA primária compacta (alinhada à direita)
   *     (azul primary + svg "+" + texto). Disabled quando sem estoque.
   *
   * NUNCA usar botao ghost/outlined nessa CTA — quebra contraste em fundo
   * claro e a hierarquia da grelha. Para "Ver tudo" / acoes secundarias,
   * link/ghost ficam fora do card, no header do carrossel.
   * =======================================================================
   */
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-card {
    flex: 0 0 min(220px, 78vw);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.68rem 0.72rem 0.63rem;
    border-radius: 14px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    min-height: 16.65rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-card:hover {
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.09);
    transform: translateY(-1px);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-card__head {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 0.54rem;
    align-items: start;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-card__head-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    padding-top: 0.05rem;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-card__media {
    width: 58px;
    height: 58px;
    align-self: start;
    border-radius: 12px;
    overflow: hidden;
    background: var(--ra-primary-soft, #eff6ff);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-card__ph {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ra-primary);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-card__name {
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--ra-text);
    line-height: 1.18;
    margin: 0;
    letter-spacing: -0.015em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-card__category {
    display: block;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ra-text-soft);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-card__presentation {
    flex: 1 1 auto;
    margin: 0;
    min-height: 3.82rem;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--ra-text-soft);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: auto;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-card-stock {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.14rem 0.38rem;
    border-radius: 999px;
    font-size: 0.63rem;
    font-weight: 700;
    background: rgba(241, 245, 249, 0.95);
    color: var(--ra-text-soft);
    border: 1px solid rgba(226, 232, 240, 0.95);
    line-height: 1;
    white-space: nowrap;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-card-stock-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-card-stock--ok {
    color: #166534;
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.4);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-card-stock--low {
    color: #92400e;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.4);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-card-stock--out {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.4);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-card__price {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--ra-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.005em;
    margin-left: auto;
    white-space: nowrap;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-card__add {
    margin-top: 0.15rem;
    margin-bottom: 0;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    appearance: none;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.4rem 0.58rem;
    min-height: 2.12rem;
    border-radius: 10px;
    border: 1px solid rgba(37, 99, 235, 0.4);
    background: var(--ra-primary, #2563eb);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-card__add svg {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-card__add:hover:not(:disabled) {
    background: var(--ra-primary-dark, #1d4ed8);
    border-color: var(--ra-primary-dark, #1d4ed8);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-card__add:active:not(:disabled) {
    transform: translateY(1px);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-card__add:disabled {
    background: #f1f5f9;
    border-color: rgba(148, 163, 184, 0.45);
    color: var(--ra-text-soft);
    cursor: not-allowed;
    opacity: 0.85;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-scroll {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ra-text);
    z-index: 2;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-scroll:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    box-shadow: none;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-scroll:hover:not(:disabled) {
    border-color: rgba(37, 99, 235, 0.35);
    color: var(--ra-primary);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-loading {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ra-text-soft);
    text-align: center;
    padding: 0.75rem 0;
  }

  /* -------------------------------------------------------------------------
   * Carrossel “coverflow” / center-mode — Sugestões (scroll-snap + escala)
   * ------------------------------------------------------------------------- */
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-viewport.admin-cockpit-upsell-viewport--coverflow {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    touch-action: pan-x pinch-zoom;
    /* folga para scale do card ativo + sombra do botão sem cortar */
    padding-block: 1.85rem;
    -webkit-overflow-scrolling: touch;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-viewport--coverflow .admin-cockpit-upsell-track {
    padding-inline: var(--cockpit-upsell-coverflow-pad, 0px);
    align-items: center;
    padding-block: 0.4rem;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-viewport--coverflow .admin-cockpit-upsell-card {
    scroll-snap-align: center;
    scroll-snap-stop: normal;
    flex-shrink: 0;
    transform-origin: 50% 50%;
    transform: scale(1.008);
    opacity: 0.76;
    z-index: 0;
    position: relative;
    transition:
      border-color 0.38s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      filter 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07);
    filter: none;
  }

  .admin-page[data-admin-panel-active="dashboards"]
    .admin-cockpit-upsell-viewport--coverflow
    .admin-cockpit-upsell-card[data-cockpit-upsell-active='true'] {
    transform: scale(1.26);
    opacity: 1;
    z-index: 2;
    border-color: rgba(37, 99, 235, 0.42);
    box-shadow:
      0 16px 36px rgba(15, 23, 42, 0.13),
      0 0 0 2px rgba(37, 99, 235, 0.14),
      0 0 0 1px rgba(37, 99, 235, 0.08);
  }

  .admin-page[data-admin-panel-active="dashboards"]
    .admin-cockpit-upsell-viewport--coverflow
    .admin-cockpit-upsell-card:hover:not([data-cockpit-upsell-active='true']) {
    transform: scale(1.062);
    opacity: 0.84;
    border-color: rgba(37, 99, 235, 0.22);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
  }

  .admin-page[data-admin-panel-active="dashboards"]
    .admin-cockpit-upsell-viewport--coverflow
    .admin-cockpit-upsell-card[data-cockpit-upsell-active='true']:hover {
    transform: scale(1.26);
    box-shadow:
      0 18px 40px rgba(15, 23, 42, 0.15),
      0 0 0 2px rgba(37, 99, 235, 0.16),
      0 0 0 1px rgba(37, 99, 235, 0.1);
  }

  @media (hover: hover) and (pointer: fine) {
    .admin-page[data-admin-panel-active="dashboards"]
      .admin-cockpit-upsell-viewport--coverflow
      .admin-cockpit-upsell-card:not([data-cockpit-upsell-active='true']) {
      filter: blur(0.45px);
    }

    .admin-page[data-admin-panel-active="dashboards"]
      .admin-cockpit-upsell-viewport--coverflow
      .admin-cockpit-upsell-card[data-cockpit-upsell-active='true'] {
      filter: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-viewport--coverflow {
      scroll-behavior: auto;
    }

    .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-viewport--coverflow .admin-cockpit-upsell-card {
      transition-duration: 0.01ms;
      transition-delay: 0ms;
    }

    .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upsell-viewport--coverflow .admin-cockpit-upsell-card,
    .admin-page[data-admin-panel-active="dashboards"]
      .admin-cockpit-upsell-viewport--coverflow
      .admin-cockpit-upsell-card[data-cockpit-upsell-active='true'] {
      transform: none;
      opacity: 1;
      filter: none;
    }
  }
}

/* 641–767px: alinhado a MOBILE_NAV_BREAKPOINT (767) — manter cartão do painel (regra ≥641) mas hero em coluna com avatar centrado; evita linha avatar|texto em telemóveis largos. */
@media (min-width: 641px) and (max-width: 767px) {
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-hero {
    flex-direction: column;
    align-items: center;
    max-width: 22rem;
    margin-inline: auto;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-avatar {
    align-self: center;
    margin-inline: auto;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-hero-copy {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.55rem 1rem;
    width: 100%;
    max-width: 22rem;
    margin-inline: auto;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-hero-text {
    flex: 1 1 auto;
    min-width: 0;
    align-items: stretch;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-hero-copy .admin-cockpit-cart-summary {
    width: auto;
    max-width: min(14rem, 46%);
    flex: 0 0 auto;
    align-self: flex-start;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-main {
    align-items: center;
    text-align: center;
    flex: none;
    width: 100%;
    max-width: 22rem;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-main p,
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-main small {
    text-align: center;
    max-width: none;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-name-inline {
    justify-content: center;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-badges {
    justify-content: center;
    max-width: none;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-metrics {
    max-width: 22rem;
    margin-inline: auto;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-metrics-note {
    text-align: center;
  }
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-earlier-hint {
  margin: 0 0 0.55rem;
  max-width: 28rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ra-warning-text, #92400e);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 10px;
  padding: 0.45rem 0.62rem;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-bottom: 0.62rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.85));
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(15, 23, 42, 0.04);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions-foot--after-detail .admin-cockpit-situation-earlier-hint {
  margin: 0;
  align-self: stretch;
  width: 100%;
  max-width: 36rem;
  text-align: left;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions-foot--after-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.45rem, 1.6vw, 0.62rem);
  width: 100%;
  max-width: min(28rem, 100%);
  margin-inline: auto;
  padding-top: clamp(0.45rem, 1.4vw, 0.72rem);
  margin-top: 0.06rem;
  border-top: 1px solid rgba(226, 232, 240, 0.92);
  box-sizing: border-box;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions-foot--after-detail > .admin-next-client-details-btn {
  width: auto;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions-foot--after-detail .admin-cockpit-situation-nav {
  margin: 0;
  justify-content: center;
  width: 100%;
  max-width: 28rem;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-nav--segmented {
  gap: 0.12rem;
  padding: 0.18rem 0.18rem;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-nav-current {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.06rem;
  min-height: 2.05rem;
  padding: 0.35rem clamp(0.65rem, 2vw, 1rem);
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.75);
  color: var(--ra-text);
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.admin-page[data-admin-panel-active="dashboards"] button.admin-cockpit-situation-nav-current--btn {
  appearance: none;
  font: inherit;
  border: none;
  margin: 0;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
}

.admin-page[data-admin-panel-active="dashboards"] button.admin-cockpit-situation-nav-current--btn:not(:disabled):hover {
  background: rgba(226, 232, 240, 0.95);
  color: var(--ra-text);
}

.admin-page[data-admin-panel-active="dashboards"] button.admin-cockpit-situation-nav-current--btn:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
}

.admin-page[data-admin-panel-active="dashboards"] button.admin-cockpit-situation-nav-current--btn:disabled {
  cursor: default;
  opacity: 1;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-nav-current-pos {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ra-text-soft, #64748b);
  opacity: 0.88;
  line-height: 1;
}



.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-after-detail {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  margin: 0.25rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(226, 232, 240, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  box-sizing: border-box;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-after-detail .admin-cockpit-situation-earlier-hint {
  margin: 0;
  width: 100%;
  max-width: 36rem;
  text-align: left;
  align-self: center;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-after-detail .admin-cockpit-situation-nav {
  margin: 0;
  justify-content: center;
  width: 100%;
  max-width: 28rem;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-cart-icon-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ra-primary), var(--ra-primary-dark));
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.15rem;
  text-align: center;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

/* =========================================================================
 * PADRAO MODAL PREMIUM (referencia visual)
 * -------------------------------------------------------------------------
 * Documentacao completa em contexto.md → "Padrao de modais premium
 * (cockpit/vendas)". Resumo aplicado aqui:
 *
 *   1) admin-cockpit-cart-modal-section          → card branco + sombra leve
 *      .admin-cockpit-cart-modal-section-head    → header com icone + titulo
 *        .-section-icon (--service indigo)       → quadrado 30x30 radius 9
 *        .admin-cockpit-cart-modal-h             → titulo 0.82rem peso 800
 *        .-section-count / .-status--<tone>      → pill direita (contagem/status)
 *      pills status: --progress | --done | --danger | --neutral
 *   2) .admin-cockpit-cart-modal-service-card    → highlight INTERNO em
 *      gradiente indigo soft (info-chave / referencia)
 *   3) .admin-cockpit-cart-modal-line            → linhas de item: media 44x44
 *      + nome + meta (qty pill azul) + side (subtotal tabular + remove pill)
 *   4) .admin-cockpit-cart-modal-total-card      → CARD TOTAL: gradiente
 *      azul cheio, branco, valor 1.4rem peso 900 (uma vez por modal)
 *   5) .admin-cockpit-cart-modal-note            → orientacao curta tracejada
 *
 * REGRAS DE OURO:
 *   - Cards brancos para conteudo normal; gradiente soft (indigo) so para
 *     destacar info-chave dentro de um card; gradiente cheio (azul primary)
 *     apenas para o TOTAL/CTA final.
 *   - Numeros (preco, total, qtd) sempre com font-variant-numeric: tabular-nums.
 *   - Botoes de remover/destrutivos = PILL outlined vermelho com SVG lixeira.
 *   - Esses tokens visuais sao reaproveitaveis em outros modais "premium"
 *     (checkout, detalhe de evento, etc.); copiar as classes e renomear o
 *     prefixo de acordo com o dominio.
 * =========================================================================
 */
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-cart-modal {
  max-width: min(560px, 96vw);
  max-height: min(88vh, 780px);
  display: flex;
  flex-direction: column;
}

.admin-page .admin-cockpit-cart-modal-body {
  padding: 0.15rem 1.1rem 0.85rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.admin-page .admin-cockpit-cart-modal-foot {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.admin-page .admin-cockpit-cart-modal-section {
  margin: 0;
  padding: 0.85rem 0.9rem;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.admin-page .admin-cockpit-cart-modal-section-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.admin-page .admin-cockpit-cart-modal-section-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--ra-primary-soft, #eff6ff);
  color: var(--ra-primary-dark, #1d4ed8);
}

.admin-page .admin-cockpit-cart-modal-section-icon--service {
  background: rgba(99, 102, 241, 0.12);
  color: #4338ca;
}

.admin-page .admin-cockpit-cart-modal-h {
  flex: 1;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ra-text);
}

.admin-page .admin-cockpit-cart-modal-section-count {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ra-text-soft);
  padding: 0.18rem 0.5rem;
  background: rgba(241, 245, 249, 0.95);
  border-radius: 999px;
  border: 1px solid rgba(226, 232, 240, 0.95);
}

.admin-page .admin-cockpit-cart-modal-status {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.admin-page .admin-cockpit-cart-modal-status--progress {
  color: #0369a1;
  background: rgba(14, 165, 233, 0.1);
  border-color: rgba(14, 165, 233, 0.4);
}

.admin-page .admin-cockpit-cart-modal-status--done {
  color: #166534;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.4);
}

.admin-page .admin-cockpit-cart-modal-status--danger {
  color: #991b1b;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.4);
}

.admin-page .admin-cockpit-cart-modal-status--neutral {
  color: #475569;
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.45);
}

.admin-page .admin-cockpit-cart-modal-section--service .admin-cockpit-cart-modal-service-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.07), rgba(59, 130, 246, 0.06));
  border: 1px solid rgba(99, 102, 241, 0.16);
}

.admin-page .admin-cockpit-cart-modal-service-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.admin-page .admin-cockpit-cart-modal-service-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ra-text);
  line-height: 1.2;
}

.admin-page .admin-cockpit-cart-modal-service-client {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ra-text-soft);
}

.admin-page .admin-cockpit-cart-modal-service-client strong {
  color: var(--ra-text);
  font-weight: 700;
}

.admin-page .admin-cockpit-cart-modal-service-amount-wrap {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.admin-page .admin-cockpit-cart-modal-service-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ra-text-soft);
}

.admin-page .admin-cockpit-cart-modal-service-amount {
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ra-text);
}

.admin-page .admin-cockpit-cart-modal-service-amount--empty {
  color: var(--ra-text-soft);
  font-weight: 700;
}

.admin-page .admin-cockpit-cart-modal-section--empty {
  text-align: center;
  padding: 1.25rem 1rem;
}

.admin-page .admin-cockpit-cart-modal-empty-art {
  width: 56px;
  height: 56px;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(241, 245, 249, 0.95);
  color: var(--ra-text-soft);
}

.admin-page .admin-cockpit-cart-modal-muted {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ra-text-soft);
  line-height: 1.45;
}

.admin-page .admin-cockpit-cart-modal-muted strong {
  color: var(--ra-text);
}

.admin-page .admin-cockpit-cart-modal-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.65rem 0 0;
  padding: 0.4rem 0.55rem;
  background: rgba(241, 245, 249, 0.8);
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ra-text-soft);
}

.admin-page .admin-cockpit-cart-modal-sub strong {
  color: var(--ra-text);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.admin-page .admin-cockpit-cart-modal-total-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ra-primary, #2563eb), var(--ra-primary-dark, #1d4ed8));
  color: #fff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
}

.admin-page .admin-cockpit-cart-modal-total-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.admin-page .admin-cockpit-cart-modal-total-label small {
  font-size: 0.66rem;
  font-weight: 600;
  opacity: 0.85;
  text-transform: none;
  letter-spacing: 0;
}

.admin-page .admin-cockpit-cart-modal-total-value {
  font-size: 1.4rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.admin-page .admin-cockpit-cart-modal-note {
  margin: 0;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  background: rgba(241, 245, 249, 0.9);
  border: 1px dashed rgba(148, 163, 184, 0.55);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ra-text-soft);
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.admin-page .admin-cockpit-cart-modal-empty {
  margin: 0;
  padding: 1rem 0;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ra-text-soft);
}

.admin-page .admin-cockpit-cart-modal-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.admin-page .admin-cockpit-cart-modal-line {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #fff;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.admin-page .admin-cockpit-cart-modal-line:hover {
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(239, 246, 255, 0.55);
}

.admin-page .admin-cockpit-cart-modal-line-media {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--ra-primary-soft, #eff6ff);
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-page .admin-cockpit-cart-modal-line-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-page .admin-cockpit-cart-line-ph {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ra-primary);
}

.admin-page .admin-cockpit-cart-modal-line-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.admin-page .admin-cockpit-cart-modal-line-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ra-text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-page .admin-cockpit-cart-modal-line-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ra-text-soft);
}

.admin-page .admin-cockpit-cart-modal-line-qty {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--ra-primary-soft, #eff6ff);
  color: var(--ra-primary-dark, #1d4ed8);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.admin-page .admin-cockpit-cart-modal-line-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  flex-shrink: 0;
}

.admin-page .admin-cockpit-cart-modal-line-total {
  font-size: 0.92rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ra-text);
}

.admin-page .admin-cockpit-cart-modal-remove {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(220, 38, 38, 0.35);
  background: #fff;
  color: #b91c1c;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.admin-page .admin-cockpit-cart-modal-remove:hover {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.55);
  color: #991b1b;
}

.admin-page .admin-cockpit-cart-modal-remove svg {
  flex-shrink: 0;
}

/* Carrinho cockpit: btn-ghost global assume fundo escuro (marketing); modal é claro */
.admin-page .inventory-editor-modal.admin-cockpit-cart-modal .btn.btn-ghost,
.admin-page .inventory-editor-modal.admin-cockpit-cart-modal .btn.btn-ghost:focus-visible {
  border: 1px solid #94a3b8 !important;
  color: #0f172a !important;
  background: #f1f5f9 !important;
  -webkit-text-fill-color: #0f172a;
}

.admin-page .inventory-editor-modal.admin-cockpit-cart-modal .btn.btn-ghost:hover:not(:disabled) {
  border-color: #64748b !important;
  color: #020617 !important;
  background: #e2e8f0 !important;
  -webkit-text-fill-color: #020617;
}

@media (max-width: 480px) {
  .admin-page .admin-cockpit-cart-modal-section--service .admin-cockpit-cart-modal-service-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
  }

  .admin-page .admin-cockpit-cart-modal-service-amount-wrap {
    text-align: left;
    width: 100%;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }

  .admin-page .admin-cockpit-cart-modal-line {
    flex-wrap: wrap;
  }

  .admin-page .admin-cockpit-cart-modal-line-side {
    align-items: flex-end;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
  }
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-products-modal {
  max-width: min(560px, 96vw);
  max-height: min(86vh, 720px);
  display: flex;
  flex-direction: column;
}

.admin-page .admin-cockpit-products-modal-body {
  padding: 0 1.1rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 0;
  flex: 1;
}

.admin-page .admin-cockpit-products-modal-list {
  flex: 1;
  min-height: 180px;
  max-height: 48vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-right: 0.15rem;
}

.admin-page .admin-cockpit-products-modal-empty {
  margin: 0;
  padding: 1rem 0;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ra-text-soft);
}

.admin-page .admin-cockpit-products-modal-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto minmax(6.5rem, auto) auto;
  align-items: center;
  gap: 0.5rem 0.65rem;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.5rem;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #fff;
  cursor: pointer;
  font: inherit;
  color: inherit;
  box-sizing: border-box;
}

.admin-page .admin-cockpit-products-modal-row:hover {
  border-color: rgba(37, 99, 235, 0.28);
  background: rgba(239, 246, 255, 0.65);
}

.admin-page .admin-cockpit-products-modal-thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ra-primary-soft, #eff6ff);
}

.admin-page .admin-cockpit-products-modal-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-page .admin-cockpit-products-modal-thumb--ph {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ra-primary);
}

.admin-page .admin-cockpit-products-modal-row-copy {
  min-width: 0;
}

.admin-page .admin-cockpit-products-modal-row-copy strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-page .admin-cockpit-products-modal-row-copy small {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ra-text-soft);
}

.admin-page .admin-cockpit-products-modal-row-price {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--ra-text);
  white-space: nowrap;
}

.admin-page .admin-cockpit-products-modal-row-stock {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ra-text-soft);
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.admin-page .admin-cockpit-products-modal-row-action {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ra-primary-dark, #1d4ed8);
  white-space: nowrap;
}

.admin-page .admin-cockpit-products-modal-feedback {
  margin: 0;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-nav-pos {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ra-text-soft);
  font-variant-numeric: tabular-nums;
  min-width: 3.2rem;
  padding: 0 0.35rem;
  text-align: center;
  letter-spacing: 0.02em;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-nav-btn {
  appearance: none;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid var(--ra-border);
  background: var(--ra-surface);
  color: var(--ra-text);
  padding: 0.5rem 1rem;
  min-width: 6.25rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-nav-btn:hover:not(:disabled) {
  border-color: rgba(37, 99, 235, 0.45);
  color: var(--ra-primary-dark, #1d4ed8);
  background: rgba(37, 99, 235, 0.04);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-nav-btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-nav-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-nav--segmented .admin-cockpit-situation-nav-btn {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  min-height: 2.05rem;
  padding: 0.5rem clamp(0.45rem, 1.8vw, 0.92rem);
  font-size: 0.74rem;
  font-weight: 700;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-nav--segmented .admin-cockpit-situation-nav-btn:hover:not(:disabled) {
  border-color: transparent;
  color: var(--ra-primary-dark, #1d4ed8);
  background: rgba(255, 255, 255, 0.98);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-situation-nav--segmented .admin-cockpit-situation-nav-btn:active:not(:disabled) {
  transform: translateY(0);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-delay-warning {
  margin-top: 0.45rem;
  padding: 0.5rem 0.62rem;
  border-radius: 10px;
  border: 1px solid rgba(245, 158, 11, 0.32);
  background: rgba(245, 158, 11, 0.1);
  color: #8a5a00;
  display: grid;
  gap: 2px;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-delay-warning strong {
  color: #8a5a00;
  font-size: 0.78rem;
  font-weight: 700;
  margin: 0;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-delay-warning--full {
  grid-column: 1 / -1;
  margin-top: 0.1rem;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-cockpit-delay-warning--full {
  display: none;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-delay-warning small {
  color: #9a6700;
  font-size: 0.72rem;
  font-weight: 500;
  margin: 0;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card .btn-primary {
  background: linear-gradient(135deg, var(--ra-primary), var(--ra-primary-dark));
  border: 0;
  color: #FFFFFF;
  border-radius: var(--ra-radius-md);
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.28);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card .btn-ghost {
  background: var(--ra-surface);
  border: 1px solid var(--ra-border);
  color: var(--ra-text);
  border-radius: var(--ra-radius-md);
  font-weight: 700;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card .btn-ghost:hover {
  background: var(--ra-primary-soft);
  border-color: #BFDBFE;
  color: var(--ra-primary);
}

/* Próximos atendimentos — carousel */
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda .admin-cockpit-upcoming-head {
  align-items: flex-start;
  gap: 12px;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-head-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-sync {
  font-size: 12px;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-calendar-link {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--ra-primary);
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s ease;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-calendar-link:hover {
  color: var(--ra-primary-dark);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-carousel {
  position: relative;
  margin-top: 4px;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-carousel-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 2px 8px;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-carousel-viewport::-webkit-scrollbar {
  display: none;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-carousel-track {
  display: flex;
  gap: 12px;
  min-height: 148px;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-empty {
  width: 100%;
  min-height: 120px;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  border-radius: 14px;
  border: 1px dashed var(--ra-border);
  background: #FAFCFF;
  color: var(--ra-text-soft);
  font-size: 14px;
  text-align: center;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-card {
  flex: 0 0 min(240px, calc(50% - 6px));
  min-width: 220px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--ra-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-card:hover {
  border-color: #BFDBFE;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ra-primary), var(--ra-primary-dark));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-card-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-card-name {
  color: var(--ra-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-card-service,
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-card-when {
  color: var(--ra-text-soft);
  font-size: 13px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-card-status {
  display: flex;
  justify-content: center;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-card-status .admin-operational-badge {
  min-width: 112px;
  justify-content: center;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-carousel-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 1px solid var(--ra-border);
  border-radius: 999px;
  background: #fff;
  color: var(--ra-text-soft);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
  display: inline-grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-carousel-nav:hover:not(:disabled) {
  border-color: #BFDBFE;
  color: var(--ra-primary);
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.14);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-carousel-nav:disabled {
  opacity: 0.45;
  cursor: default;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-carousel-nav.is-prev {
  left: -6px;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-carousel-nav.is-next {
  right: -6px;
}

@media (min-width: 1100px) {
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-card {
    flex-basis: 240px;
  }
}

@media (max-width: 720px) {
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-head {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-calendar-link {
    margin-left: 0;
    align-self: flex-start;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-card {
    flex-basis: min(78vw, 260px);
    min-width: 200px;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-carousel-nav.is-prev {
    left: 0;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-upcoming-carousel-nav.is-next {
    right: 0;
  }
}

/* Cockpit: atraso sempre em alerta amarelo (próximo cliente + agenda do dia) */
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-operational-badge[data-tone="atrasado"],
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-operational-badge[data-tone="pending"],
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-operational-badge[data-tone="warn"],
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-operational-badge[data-tone="late"],
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-operational-badge[data-tone="delayed"],
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-operational-badge[data-tone="overdue"],
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda .admin-cockpit-upcoming-card .admin-operational-badge[data-tone="atrasado"],
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda .admin-operational-badge[data-tone="atrasado"],
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda .admin-operational-badge[data-tone="pending"],
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda .admin-operational-badge[data-tone="warn"],
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda .admin-operational-badge[data-tone="late"],
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda .admin-operational-badge[data-tone="delayed"],
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda .admin-operational-badge[data-tone="overdue"] {
  background: rgba(245, 158, 11, 0.18);
  color: #8a5a00;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-operational-badge[data-tone="atrasado"]::before,
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-operational-badge[data-tone="pending"]::before,
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-operational-badge[data-tone="warn"]::before,
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-operational-badge[data-tone="late"]::before,
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-operational-badge[data-tone="delayed"]::before,
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-operational-badge[data-tone="overdue"]::before,
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda .admin-operational-badge[data-tone="atrasado"]::before,
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda .admin-operational-badge[data-tone="pending"]::before,
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda .admin-operational-badge[data-tone="warn"]::before,
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda .admin-operational-badge[data-tone="late"]::before,
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda .admin-operational-badge[data-tone="delayed"]::before,
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda .admin-operational-badge[data-tone="overdue"]::before {
  content: "!";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  margin-right: 0.28rem;
  background: rgba(138, 90, 0, 0.16);
  color: #8a5a00;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 14px;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-next-client-aside-value.is-warn,
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-inline-status[data-tone="warn"],
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next .admin-sync-pill[data-tone="warn"] {
  color: #8a5a00;
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(245, 158, 11, 0.16);
}

/* Listas (Pendentes, Destaque, Desempenho) */
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-list-item {
  background: #FAFCFF;
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  padding: 12px 14px;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-list-item:hover {
  background: var(--ra-primary-soft);
  border-color: #BFDBFE;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-list-item span {
  color: var(--ra-text);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-list-item small {
  color: var(--ra-text-soft);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-list-item strong {
  color: var(--ra-primary);
  font-weight: 800;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-list-item button {
  color: var(--ra-primary);
  background: transparent;
  border: 0;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.18s ease;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-list-item button:hover {
  background: var(--ra-primary-soft);
}

/* Resumo da semana — gráfico */
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-week-bar {
  background: linear-gradient(180deg, #93C5FD, var(--ra-primary));
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-week-bar-wrap small,
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-week-line-labels small {
  color: var(--ra-text-soft);
  font-weight: 700;
}

/* Estado vazio */
.admin-page[data-admin-panel-active="dashboards"] .admin-home-brief-empty {
  background: var(--ra-surface);
  border: 1px dashed var(--ra-border);
  border-radius: var(--ra-radius-md);
  padding: 18px;
  color: var(--ra-text-soft);
  font-size: 0.9rem;
  text-align: center;
  grid-column: 1 / -1;
}

/* Compatibilidade com WebView/Capacitor */
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card,
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-kpi-card {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1200px) {
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-page {
    padding: 0;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-week {
    grid-column: span 6;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-highlights,
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-performance {
    grid-column: span 6;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-kpi-card strong {
    font-size: 1.4rem;
  }
}

@media (max-width: 900px) {
  .admin-page[data-admin-panel-active="dashboards"] .admin-content {
    padding-top: 0;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-dashboard-panel {
    padding: 0.78rem;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-page {
    padding: 0;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card {
    padding: 18px 18px;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next,
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-cockpit-upsell,
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda,
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-highlights,
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-week,
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-performance {
    grid-column: 1 / -1;
  }

  /* Mobile ordering: situação → sugestões (desktop/tablet só) → próximos → KPIs */
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next { order: 1; }
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-cockpit-upsell { order: 2; }
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-agenda { order: 3; }
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-kpi-grid { order: 4; }
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-highlights { order: 5; }
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-week { order: 6; }
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-performance { order: 7; }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-kpi-card {
    padding: 16px 18px;
  }
}

/* Mobile web: modais abaixo do header (top stack); agenda rápido usa padding extra */
@media (max-width: 900px) {
  :root {
    --admin-mobile-modal-top-offset: 5.4rem;
  }

  .admin-quick-agenda-modal-backdrop,
  .admin-ratings-modal-backdrop,
  .calendar-modal-backdrop,
  .members-modal-backdrop,
  .inventory-editor-backdrop,
  .clients-editor-backdrop {
    padding: var(--admin-mobile-modal-top-offset) 0.85rem 0.85rem !important;
    place-items: start center !important;
    align-content: start !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }

  /* Pagamento / POS / caixa: já usam top: --admin-topbar-stack-height (evita duplo offset) */
  .admin-next-payment-modal-backdrop,
  .admin-pos-payment-flow-backdrop,
  .admin-cash-payment-modal-backdrop {
    padding: 1rem 0.85rem 0.85rem !important;
    place-items: start center !important;
    align-content: start !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }

  .admin-quick-agenda-modal,
  .admin-ratings-modal,
  .calendar-modal,
  .members-modal,
  .inventory-editor-modal,
  .clients-editor-modal {
    max-height: calc(var(--reservaai-vh, 100vh) - 6.4rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .admin-next-payment-modal {
    max-height: min(92vh, calc(var(--reservaai-vh, 100vh) - var(--admin-topbar-stack-height, 4.25rem) - 1.75rem)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ============================================================
   Estoque / Produtos - Premium SaaS pro-* design
   ============================================================ */
.admin-page[data-admin-panel-active="estoque"] .admin-panel[data-admin-panel="estoque"] {
  background: var(--ra-bg, #f5f7fb);
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

.inventory-pro-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px clamp(16px, 3vw, 32px) 32px;
  background: var(--ra-bg, #f5f7fb);
  min-height: 100%;
  font-family: var(--ra-font, 'Inter', system-ui, sans-serif);
}

.inventory-pro-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.inventory-pro-head-copy h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  color: var(--ra-text, #0f172a);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.inventory-pro-head-copy p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ra-text-muted, #64748b);
}

.inventory-pro-add {
  height: 44px;
  padding: 0 18px;
  font-size: 13px;
}

.inventory-pro-add svg {
  width: 16px;
  height: 16px;
}

.inventory-pro-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: #ffffff;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: var(--ra-radius-md, 14px);
  padding: 8px 10px;
  box-shadow: var(--ra-shadow-sm, 0 1px 2px rgba(15,23,42,.04));
}

.inventory-pro-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.inventory-pro-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ra-text-muted, #64748b);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.inventory-pro-tab:hover {
  color: var(--ra-text, #0f172a);
  background: #f1f5f9;
}

.inventory-pro-tab.is-active {
  color: var(--ra-primary, #2563eb);
  background: rgba(37, 99, 235, 0.08);
}

.inventory-pro-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  justify-content: flex-end;
}

.inventory-pro-search {
  width: clamp(220px, 30vw, 340px);
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
}

.inventory-pro-search svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.inventory-pro-search input {
  font-size: 13px;
}

.inventory-pro-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: 10px;
  background: #ffffff;
  font-size: 12.5px;
  color: var(--ra-text-muted, #64748b);
  min-width: 200px;
  transition: border-color 120ms ease;
}

.inventory-pro-sort:hover {
  border-color: rgba(37, 99, 235, 0.45);
}

.inventory-pro-sort > span {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
}

.inventory-pro-sort select {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--ra-text, #0f172a);
  outline: none;
  cursor: pointer;
  flex: 1;
}

.inventory-pro-view-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: 10px;
  background: #ffffff;
  color: var(--ra-text-muted, #64748b);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.inventory-pro-view-toggle:hover {
  color: var(--ra-primary, #2563eb);
  border-color: rgba(37, 99, 235, 0.4);
  background: rgba(37, 99, 235, 0.05);
}

.inventory-pro-view-toggle svg {
  width: 16px;
  height: 16px;
}

.inventory-pro-panel {
  display: none;
  flex-direction: column;
  gap: 14px;
}

.inventory-pro-panel.is-active {
  display: flex;
}

.inventory-pro-filter-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background: #ffffff;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: var(--ra-radius-md, 14px);
  padding: 12px;
  box-shadow: var(--ra-shadow-sm, 0 1px 2px rgba(15,23,42,.04));
}

.inventory-pro-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: 10px;
  background: #f8fafc;
  transition: border-color 120ms ease, background 120ms ease;
}

.inventory-pro-filter:hover,
.inventory-pro-filter:focus-within {
  border-color: rgba(37, 99, 235, 0.45);
  background: #ffffff;
}

.inventory-pro-filter > span {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.inventory-pro-filter select {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ra-text, #0f172a);
  outline: none;
  cursor: pointer;
  padding: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 18px;
}

.inventory-pro-table-card {
  background: #ffffff;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: var(--ra-radius-md, 14px);
  box-shadow: var(--ra-shadow-sm, 0 1px 2px rgba(15,23,42,.04));
  overflow: hidden;
}

.inventory-pro-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.inventory-pro-table thead {
  background: #f8fafc;
}

.inventory-pro-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ra-border, #e5e7eb);
  white-space: nowrap;
}

.inventory-pro-table th.inventory-pro-th-check {
  width: 36px;
  padding-right: 0;
}

.inventory-pro-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  color: var(--ra-text, #0f172a);
  vertical-align: middle;
}

.inventory-pro-table tbody tr:last-child td {
  border-bottom: 0;
}

.inventory-pro-table tbody tr {
  transition: background 120ms ease;
}

.inventory-pro-table tbody tr:hover {
  background: #f8fafc;
}

.inventory-pro-td-check {
  padding-right: 0 !important;
}

.inventory-pro-td-check input[type="checkbox"],
.inventory-pro-th-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--ra-primary, #2563eb);
  cursor: pointer;
}

.inventory-pro-product-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}

.inventory-pro-product-avatar {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.18);
}

.inventory-pro-product-avatar[data-tone="blue"]   { background: linear-gradient(135deg, #2563eb, #4f46e5); box-shadow: 0 4px 10px rgba(37,99,235,.18); }
.inventory-pro-product-avatar[data-tone="green"]  { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 4px 10px rgba(16,185,129,.18); }
.inventory-pro-product-avatar[data-tone="violet"] { background: linear-gradient(135deg, #8b5cf6, #6d28d9); box-shadow: 0 4px 10px rgba(139,92,246,.18); }
.inventory-pro-product-avatar[data-tone="amber"]  { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 4px 10px rgba(245,158,11,.18); }
.inventory-pro-product-avatar[data-tone="rose"]   { background: linear-gradient(135deg, #f43f5e, #e11d48); box-shadow: 0 4px 10px rgba(244,63,94,.18); }
.inventory-pro-product-avatar[data-tone="teal"]   { background: linear-gradient(135deg, #14b8a6, #0d9488); box-shadow: 0 4px 10px rgba(20,184,166,.18); }
.inventory-pro-product-avatar[data-tone="pink"]   { background: linear-gradient(135deg, #ec4899, #be185d); box-shadow: 0 4px 10px rgba(236,72,153,.18); }
.inventory-pro-product-avatar[data-tone="slate"]  { background: linear-gradient(135deg, #64748b, #475569); box-shadow: 0 4px 10px rgba(100,116,139,.18); }

.inventory-pro-product-avatar--image {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  padding: 0;
}

.inventory-pro-product-avatar--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.inventory-pro-product-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.inventory-pro-product-text strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ra-text, #0f172a);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.inventory-pro-product-text span {
  font-size: 12px;
  color: var(--ra-text-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.inventory-pro-td-brand,
.inventory-pro-td-resale {
  color: var(--ra-text-muted, #64748b);
  font-size: 13px;
}

.inventory-pro-td-price {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ra-text, #0f172a);
  white-space: nowrap;
}

.inventory-pro-category-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.inventory-pro-category-badge[data-tone="blue"]   { background: rgba(37,99,235,.10); color: #2563eb; }
.inventory-pro-category-badge[data-tone="green"]  { background: rgba(16,185,129,.10); color: #059669; }
.inventory-pro-category-badge[data-tone="violet"] { background: rgba(139,92,246,.10); color: #6d28d9; }
.inventory-pro-category-badge[data-tone="amber"]  { background: rgba(245,158,11,.12); color: #b45309; }
.inventory-pro-category-badge[data-tone="rose"]   { background: rgba(244,63,94,.10); color: #e11d48; }
.inventory-pro-category-badge[data-tone="teal"]   { background: rgba(20,184,166,.10); color: #0d9488; }
.inventory-pro-category-badge[data-tone="pink"]   { background: rgba(236,72,153,.10); color: #be185d; }
.inventory-pro-category-badge[data-tone="slate"]  { background: rgba(100,116,139,.10); color: #475569; }

.inventory-pro-qty-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  background: #f1f5f9;
  color: var(--ra-text, #0f172a);
}

.inventory-pro-qty-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.inventory-pro-qty-pill[data-tone="red"]   { background: rgba(244,63,94,.12); color: #dc2626; }
.inventory-pro-qty-pill[data-tone="blue"]  { background: rgba(37,99,235,.10); color: #2563eb; }
.inventory-pro-qty-pill[data-tone="green"] { background: rgba(16,185,129,.12); color: #059669; }

.inventory-pro-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.inventory-pro-row-edit {
  appearance: none;
  border: 1px solid var(--ra-border, #e5e7eb);
  background: #ffffff;
  color: var(--ra-text, #0f172a);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 120ms ease;
}

.inventory-pro-row-edit:hover {
  border-color: rgba(37, 99, 235, 0.45);
  color: var(--ra-primary, #2563eb);
  background: rgba(37, 99, 235, 0.05);
}

.inventory-pro-row-icon {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ra-text-muted, #94a3b8);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 120ms ease;
}

.inventory-pro-row-icon:hover {
  color: var(--ra-text, #0f172a);
  background: #f1f5f9;
}

.inventory-pro-row-icon[data-inventory-action="delete"]:hover {
  color: #dc2626;
  background: rgba(244,63,94,.08);
}

.inventory-pro-row-icon svg {
  width: 16px;
  height: 16px;
}

.inventory-pro-empty-row {
  text-align: center;
  padding: 40px 16px !important;
  color: var(--ra-text-muted, #94a3b8);
  font-size: 13px;
  font-style: italic;
}

.inventory-pro-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 4px 4px 0;
}

.inventory-pro-pagination-info {
  font-size: 12.5px;
  color: var(--ra-text-muted, #64748b);
}

.inventory-pro-pagination-pages {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.inventory-pro-pagination-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ra-text-muted, #64748b);
  font-size: 13px;
  font-weight: 600;
  min-width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  padding: 0 8px;
  transition: all 120ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.inventory-pro-pagination-btn:hover:not([disabled]) {
  background: #f1f5f9;
  color: var(--ra-text, #0f172a);
}

.inventory-pro-pagination-btn.is-active {
  background: var(--ra-primary, #2563eb);
  color: #ffffff;
}

.inventory-pro-pagination-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.inventory-pro-pagination-btn.is-icon svg {
  width: 14px;
  height: 14px;
}

.inventory-pro-pagination-dots {
  padding: 0 4px;
  color: var(--ra-text-muted, #94a3b8);
  font-size: 13px;
}

.inventory-pro-pagination-perpage {
  display: inline-flex;
}

.inventory-pro-pagination-perpage select {
  appearance: none;
  border: 1px solid var(--ra-border, #e5e7eb);
  background: #ffffff;
  border-radius: 8px;
  padding: 7px 28px 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ra-text, #0f172a);
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.inventory-pro-empty {
  background: #ffffff;
  border: 1px dashed var(--ra-border, #e5e7eb);
  border-radius: var(--ra-radius-md, 14px);
  padding: 32px 24px;
  text-align: center;
  color: var(--ra-text-muted, #64748b);
}

.inventory-pro-empty strong {
  display: block;
  font-size: 15px;
  color: var(--ra-text, #0f172a);
  margin-bottom: 6px;
}

.inventory-pro-empty p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.inventory-pro-empty code {
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.admin-page[data-admin-panel-active="estoque"] .inventory-feedback {
  margin: 4px 4px 0;
  font-size: 12.5px;
  color: var(--ra-text-muted, #64748b);
  min-height: 0;
}

.admin-page[data-admin-panel-active="estoque"] .inventory-feedback[data-tone="warn"] {
  color: #dc2626;
}

@media (max-width: 1100px) {
  .inventory-pro-filter-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .inventory-pro-product-text strong,
  .inventory-pro-product-text span {
    max-width: 200px;
  }
}

@media (max-width: 900px) {
  .inventory-pro-shell {
    padding: 16px 12px 24px;
  }
  .inventory-pro-toolbar {
    padding: 8px;
  }
  .inventory-pro-toolbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .inventory-pro-search {
    width: 100%;
  }
  .inventory-pro-sort {
    flex: 1;
    min-width: 0;
  }
  .inventory-pro-table-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .inventory-pro-table {
    min-width: 720px;
  }
  .inventory-pro-pagination {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .inventory-pro-pagination-pages {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .inventory-pro-filter-row {
    grid-template-columns: 1fr;
  }
  .inventory-pro-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding-bottom: 4px;
  }
  .inventory-pro-tab {
    flex-shrink: 0;
  }
}

/* ============================================================
   Servicos - Premium SaaS pro-* design
   ============================================================ */
.admin-page[data-admin-panel-active="servicos"] .admin-panel[data-admin-panel="servicos"] {
  background: var(--ra-bg, #f5f7fb);
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

.admin-page[data-admin-panel-active="servicos"] .admin-panel[data-admin-panel="servicos"] > .admin-panel-head {
  display: none;
}

.services-pro-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px clamp(16px, 3vw, 32px) 32px;
  background: var(--ra-bg, #f5f7fb);
  min-height: 100%;
  font-family: var(--ra-font, 'Inter', system-ui, sans-serif);
}

.services-pro-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.services-pro-head-copy h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  color: var(--ra-text, #0f172a);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.services-pro-head-copy p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ra-text-muted, #64748b);
}

.services-pro-head-actions {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.services-pro-tenant {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 14px;
  background: #ffffff;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: 10px;
  min-width: 200px;
  margin: 0 !important;
}

.services-pro-tenant span {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.services-pro-tenant select {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ra-text, #0f172a);
  outline: none;
  cursor: pointer;
}

.services-pro-secondary-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--ra-border, #e5e7eb);
  background: #ffffff;
  color: var(--ra-text, #0f172a);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 120ms ease;
}

.services-pro-secondary-action:hover {
  color: var(--ra-primary, #2563eb);
  border-color: rgba(37, 99, 235, 0.4);
  background: rgba(37, 99, 235, 0.05);
}

.services-pro-secondary-action svg {
  width: 14px;
  height: 14px;
}

.services-pro-add {
  height: 44px;
  padding: 0 18px;
  font-size: 13px;
}

.services-pro-add svg { width: 16px; height: 16px; }

.services-pro-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 4px;
}

.services-pro-status {
  font-size: 12.5px;
  color: var(--ra-text-muted, #64748b);
  background: #ffffff;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: 999px;
  padding: 6px 14px;
}

.services-pro-save {
  height: 38px;
  border-radius: 10px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 600;
}

.services-pro-card {
  background: #ffffff !important;
  border: 1px solid var(--ra-border, #e5e7eb) !important;
  border-radius: var(--ra-radius-md, 14px) !important;
  box-shadow: var(--ra-shadow-sm, 0 1px 2px rgba(15,23,42,.04)) !important;
  padding: 20px 22px !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.services-pro-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.services-pro-card-head strong {
  display: block;
  font-size: 15px;
  color: var(--ra-text, #0f172a);
  font-weight: 700;
  margin-bottom: 2px;
}

.services-pro-card-head span {
  display: block;
  font-size: 12.5px;
  color: var(--ra-text-muted, #64748b);
}

.services-pro-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-page[data-admin-panel-active="servicos"] .services-pro-module-tabs {
  display: flex;
  margin: 0 4px 12px;
  flex-shrink: 0;
}

.admin-page[data-admin-panel-active="servicos"] .services-pro-module-tabs .pro-tab.is-disabled,
.admin-page[data-admin-panel-active="servicos"] .services-pro-module-tabs .pro-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.service-packages-admin-root {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 200px;
  width: 100%;
}

.admin-page[data-admin-panel-active="servicos"] #servicesProPackagesPane[hidden] {
  display: none !important;
}

.admin-page[data-admin-panel-active="servicos"] #servicesProPackagesPane:not([hidden]) {
  display: block;
}

[data-services-catalog-only][hidden],
[data-services-packages-only][hidden] {
  display: none !important;
}

.service-packages-list-status {
  margin: 0 4px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ra-text-muted, #64748b);
}

.service-packages-list-status[data-tone="ok"] {
  color: #186239;
}

.service-packages-list-status[data-tone="error"] {
  color: #b04444;
}

.service-packages-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.service-packages-plan-card.services-pro-card {
  padding: 18px 20px;
  background: #ffffff;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: var(--ra-radius-md, 14px);
  box-shadow: var(--ra-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
}

.service-packages-plan-card .services-pro-card-head span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ra-text-muted, #64748b);
}

.service-packages-plan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--ra-text-muted, #64748b);
}

.service-packages-credits-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--ra-text, #0f172a);
}

.service-packages-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.service-packages-customer-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-packages-customer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.service-packages-customer-head-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.service-packages-customer-head strong {
  font-size: 15px;
  color: var(--ra-text, #0f172a);
}

.service-packages-customer-head .clients-pro-section-tag[data-tone="ok"] {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.35);
}
.service-packages-customer-head .clients-pro-section-tag[data-tone="warn"] {
  background: rgba(234, 179, 8, 0.14);
  color: #a16207;
  border: 1px solid rgba(234, 179, 8, 0.35);
}
.service-packages-customer-head .clients-pro-section-tag[data-tone="danger"] {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.service-packages-customer-head .clients-pro-section-tag[data-tone="muted"] {
  background: rgba(148, 163, 184, 0.18);
  color: #475569;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.service-packages-customer-substatus {
  font-size: 12px;
  color: var(--ra-text-muted, #64748b);
}

.service-packages-renewal-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(234, 88, 12, 0.12);
  color: #c2410c;
  border: 1px solid rgba(234, 88, 12, 0.4);
  font-size: 12px;
  font-weight: 700;
}

.service-packages-customer-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  background: rgba(241, 245, 249, 0.6);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 10px;
  padding: 10px 12px;
}

.service-packages-customer-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.service-packages-customer-meta-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ra-text-muted, #64748b);
}

.service-packages-customer-meta-value {
  font-size: 13px;
  color: var(--ra-text, #0f172a);
}

.service-packages-credit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(226, 232, 240, 0.8);
  list-style: none;
}

.service-packages-credit-row:last-child {
  border-bottom: none;
}

.service-packages-credit-row strong {
  font-size: 13px;
  color: var(--ra-text, #0f172a);
  margin-right: 4px;
}

.service-packages-credit-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(241, 245, 249, 0.95);
  color: #334155;
  border: 1px solid rgba(203, 213, 225, 0.8);
}

.service-packages-credit-badge-available {
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
  border-color: rgba(34, 197, 94, 0.35);
}

.service-packages-credit-badge-muted {
  background: rgba(148, 163, 184, 0.14);
  color: #475569;
  border-color: rgba(148, 163, 184, 0.3);
}

.service-packages-customer-card ul.service-packages-credits-list {
  padding-left: 0;
}

.service-packages-customer-reservations {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.service-packages-customer-reservations-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ra-text-muted, #64748b);
}

.service-packages-customer-reservations-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.service-packages-customer-reservation {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(248, 250, 252, 0.7);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
}

.service-packages-customer-reservation-date {
  font-size: 12px;
  color: var(--ra-text-muted, #64748b);
}

.service-packages-customer-reservation-svc {
  font-size: 13px;
  color: var(--ra-text, #0f172a);
}

.service-packages-customer-reservation-status {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  color: #475569;
}

.service-packages-customer-reservation-status[data-tone="active"] {
  background: rgba(59, 130, 246, 0.14);
  color: #1d4ed8;
}

.service-packages-customer-reservation-status[data-tone="consumed"] {
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
}

.service-packages-customer-reservation-status[data-tone="released"] {
  background: rgba(234, 179, 8, 0.14);
  color: #a16207;
}

/* Botões no painel serviços / pacotes — fundo claro (evita btn-ghost “em branco”) */
.admin-page[data-admin-panel-active="servicos"] .services-pro-shell .btn.btn-ghost,
.admin-page[data-admin-panel-active="servicos"] .service-packages-edit-btn,
.admin-page[data-admin-panel-active="servicos"] .service-packages-credit-remove {
  border: 1px solid rgba(186, 205, 233, 0.95) !important;
  color: #1f3e68 !important;
  background: linear-gradient(180deg, #ffffff, #f3f8ff) !important;
  -webkit-text-fill-color: #1f3e68;
  font-weight: 700;
}

.admin-page[data-admin-panel-active="servicos"] .service-packages-delete-btn {
  border: 1px solid rgba(248, 113, 113, 0.55) !important;
  color: #b91c1c !important;
  background: linear-gradient(180deg, #ffffff, #fff5f5) !important;
  -webkit-text-fill-color: #b91c1c;
  font-weight: 700;
}

.admin-page[data-admin-panel-active="servicos"] .service-packages-delete-btn:hover:not(:disabled) {
  border-color: rgba(220, 38, 38, 0.85) !important;
  color: #991b1b !important;
  background: linear-gradient(180deg, #fff5f5, #fee2e2) !important;
  -webkit-text-fill-color: #991b1b;
}

.admin-page[data-admin-panel-active="servicos"] .services-pro-shell .btn.btn-ghost:hover:not(:disabled),
.admin-page[data-admin-panel-active="servicos"] .service-packages-edit-btn:hover:not(:disabled) {
  border-color: rgba(120, 157, 219, 0.95) !important;
  color: #16355f !important;
  background: linear-gradient(180deg, #f5faff, #e7f1ff) !important;
}

.admin-page[data-admin-panel-active="servicos"] .services-pro-shell .pro-hero-action,
.admin-page[data-admin-panel-active="servicos"] .services-pro-shell [data-services-packages-only].pro-hero-action {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

.admin-page[data-admin-panel-active="servicos"] .services-pro-secondary-action {
  color: var(--ra-text, #0f172a);
}

.service-packages-editor-modal {
  width: min(720px, 100%);
  max-height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.service-packages-editor-modal .inventory-pro-editor-head {
  flex: 0 0 auto;
}

.service-packages-editor-modal .inventory-pro-editor-form {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 16px;
}

.service-packages-editor-modal .service-packages-editor-footer {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 14px 24px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, #f8fafc 100%);
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.service-packages-editor-modal .service-packages-editor-footer .inventory-editor-feedback {
  margin-right: auto;
}

@media (max-width: 640px) {
  .service-packages-editor-modal .service-packages-editor-footer {
    padding: 12px 16px 16px;
  }
}

.service-packages-credits-hint {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ra-text-muted, #64748b);
  line-height: 1.45;
}

.service-packages-catalog-empty-hint {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.28);
  color: #b91c1c;
  font-size: 13px;
  line-height: 1.45;
}

.service-packages-catalog-empty-hint[data-tone="warn"] {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.32);
  color: #92400e;
}

.service-packages-catalog-empty-hint[hidden] {
  display: none;
}

.service-packages-credits-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-packages-credit-line {
  display: grid;
  grid-template-columns: 1fr 100px auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #f8fafc;
}

.service-packages-credit-line .inventory-editor-field {
  margin: 0;
}

.service-packages-credit-qty-field input {
  text-align: center;
}

body.service-packages-modal-open {
  overflow: hidden;
}

/* =============================================================================
   WhatsApp API — perfil Business premium (Configurações → WhatsApp API)
   ============================================================================= */

.admin-page[data-admin-panel-active="whatsapp-api"] .admin-panel[data-admin-panel="whatsapp-api"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.admin-page[data-admin-panel-active="whatsapp-api"] .admin-content {
  background: linear-gradient(180deg, #f6f9fc 0%, #eef2f7 100%);
}

.wa-api-pro-page {
  --wa-api-radius: 18px;
  --wa-api-radius-sm: 14px;
  --wa-api-blue: #2563eb;
  --wa-api-blue-deep: #1d4ed8;
  --wa-api-green: #22c55e;
  --wa-api-text: #0f172a;
  --wa-api-muted: #64748b;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.5rem 1.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.wa-api-pro-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.wa-api-pro-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--wa-api-muted);
}

.wa-api-pro-breadcrumb-current {
  color: var(--wa-api-blue);
  font-weight: 600;
}

.wa-api-pro-breadcrumb-sep {
  opacity: 0.45;
}

.wa-api-pro-title {
  margin: 0;
  font-size: clamp(1.65rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--wa-api-text);
  line-height: 1.15;
}

.wa-api-pro-lead {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--wa-api-muted);
  line-height: 1.5;
}

.wa-api-pro-page-head-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  min-width: min(100%, 280px);
}

.wa-api-pro-status-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.wa-api-pro-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #15803d;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.35);
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.12);
}

.wa-api-pro-status-pill[data-tone="warn"] {
  color: #b45309;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.35);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.1);
}

.wa-api-pro-status-pill::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.wa-api-pro-sync-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wa-api-pro-sync {
  font-size: 12px;
  color: var(--wa-api-muted);
}

.wa-api-pro-refresh-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: #ffffff;
  color: var(--wa-api-blue);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.wa-api-pro-refresh-btn:hover {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

.wa-api-pro-refresh-btn svg {
  width: 16px;
  height: 16px;
}

.wa-api-pro-tenant-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(226, 232, 240, 0.95);
  backdrop-filter: blur(8px);
}

.wa-api-pro-tenant-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wa-api-muted);
}

.wa-api-pro-tenant-pill select {
  min-width: 160px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--wa-api-text);
  padding: 0;
  outline: none;
}

.wa-api-pro-inline-status,
.wa-api-pro-readonly-note,
.wa-api-pro-empty {
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--wa-api-radius-sm);
  font-size: 13px;
  line-height: 1.45;
}

.wa-api-pro-readonly-note {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #92400e;
}

.wa-api-pro-empty {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #b91c1c;
}

.wa-api-pro-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.wa-api-pro-surface {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--wa-api-radius);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 40px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(12px);
}

.wa-api-pro-connection {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  padding: 1.35rem 1.5rem;
}

.wa-api-pro-connection-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(37, 211, 102, 0.22), rgba(37, 211, 102, 0.08));
  color: #25d366;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.18);
}

.wa-api-pro-connection-icon svg {
  width: 30px;
  height: 30px;
}

.wa-api-pro-connection-cols {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.wa-api-pro-connection-col {
  padding: 0 1.25rem;
  border-left: 1px solid rgba(226, 232, 240, 0.95);
}

.wa-api-pro-connection-col:first-child {
  padding-left: 0;
  border-left: none;
}

.wa-api-pro-kicker {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wa-api-muted);
  margin-bottom: 6px;
}

.wa-api-pro-connection-value {
  margin: 0;
  font-size: 1.05rem;
  color: var(--wa-api-text);
}

.wa-api-pro-connection-value strong {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.wa-api-pro-verified-badge {
  display: inline-flex;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(37, 99, 235, 0.12);
  color: var(--wa-api-blue-deep);
  vertical-align: middle;
}

.wa-api-pro-connection-status {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: rgba(34, 197, 94, 0.16);
  color: #15803d;
}

.wa-api-pro-connection-status[data-tone="warn"] {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}

.wa-api-pro-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 1.25rem 1.5rem 0;
}

.wa-api-pro-section-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}

.wa-api-pro-section-icon svg {
  width: 20px;
  height: 20px;
}

.wa-api-pro-section-icon--photo {
  background: rgba(168, 85, 247, 0.12);
  color: #7c3aed;
}

.wa-api-pro-section-icon--info {
  background: rgba(37, 99, 235, 0.12);
  color: var(--wa-api-blue);
}

.wa-api-pro-section-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--wa-api-text);
  letter-spacing: -0.02em;
}

.wa-api-pro-section-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--wa-api-muted);
  line-height: 1.45;
}

.wa-api-pro-photo-block {
  padding-bottom: 1.5rem;
}

.wa-api-pro-photo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 1.5rem;
  padding: 0 1.5rem 0;
  align-items: start;
}

.wa-api-pro-dropzone {
  min-height: 200px;
  border: 2px dashed rgba(148, 163, 184, 0.55);
  border-radius: var(--wa-api-radius-sm);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(37, 99, 235, 0.06), transparent 55%),
    rgba(248, 250, 252, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.wa-api-pro-dropzone strong {
  font-size: 14px;
  color: var(--wa-api-text);
}

.wa-api-pro-dropzone span:last-child {
  font-size: 13px;
  color: var(--wa-api-muted);
}

.wa-api-pro-dropzone:hover:not(.is-disabled),
.wa-api-pro-dropzone.is-dragover {
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1), 0 12px 32px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

.wa-api-pro-dropzone.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wa-api-pro-dropzone-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--wa-api-blue);
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}

.wa-api-pro-dropzone-icon svg {
  width: 24px;
  height: 24px;
}

.wa-api-pro-preview-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.wa-api-pro-preview-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wa-api-muted);
}

.wa-api-pro-preview-ring {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgba(37, 211, 102, 0.45);
  background: #f1f5f9;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.1);
  display: grid;
  place-items: center;
}

.wa-api-pro-preview-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wa-api-pro-preview-placeholder {
  font-size: 12px;
  color: #94a3b8;
}

.wa-api-pro-preview-placeholder.is-hidden {
  display: none;
}

.wa-api-pro-upload-btn {
  width: 100%;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1.5px solid rgba(37, 99, 235, 0.45);
  background: #ffffff;
  color: var(--wa-api-blue-deep);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.wa-api-pro-upload-btn:hover:not(:disabled) {
  background: rgba(239, 246, 255, 0.95);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.14);
}

.wa-api-pro-upload-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wa-api-pro-micro-hint {
  margin: 0;
  font-size: 11px;
  color: var(--wa-api-muted);
  text-align: center;
  line-height: 1.4;
}

.wa-api-pro-company-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 1.25rem;
  align-items: start;
}

.wa-api-pro-company-block {
  padding-bottom: 1.5rem;
}

.wa-api-pro-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "cat desc"
    "about desc"
    "addr site1"
    "email site2";
  gap: 16px 20px;
  padding: 0 1.5rem;
}

.wa-api-field--cat { grid-area: cat; }
.wa-api-field--desc { grid-area: desc; }
.wa-api-field--about { grid-area: about; }
.wa-api-field--addr { grid-area: addr; }
.wa-api-field--email { grid-area: email; }
.wa-api-field--site1 { grid-area: site1; }
.wa-api-field--site2 { grid-area: site2; }

.wa-api-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wa-api-field-label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.wa-api-field input,
.wa-api-field select,
.wa-api-field textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(203, 213, 225, 0.95);
  background: #ffffff;
  color: var(--wa-api-text);
  font: inherit;
  font-size: 14px;
  padding: 11px 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wa-api-field textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.45;
}

.wa-api-field--desc textarea {
  min-height: 168px;
}

.wa-api-field input:focus,
.wa-api-field select:focus,
.wa-api-field textarea:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.wa-api-field-hint {
  font-size: 11px;
  color: var(--wa-api-muted);
  line-height: 1.35;
}

.wa-api-char-counter {
  font-size: 11px;
  color: #94a3b8;
  text-align: right;
}

.wa-api-pro-save-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0.5rem 1.5rem 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
}

.wa-api-pro-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 200px;
  padding: 13px 28px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 48%, #1d4ed8 100%);
  box-shadow:
    0 10px 28px rgba(37, 99, 235, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
  transition: transform 0.15s ease, box-shadow 0.18s ease;
}

.wa-api-pro-save-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(37, 99, 235, 0.42);
}

.wa-api-pro-save-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.wa-api-pro-save-hint {
  margin: 0;
  font-size: 13px;
  color: var(--wa-api-muted);
}

.wa-api-pro-limits-card {
  padding: 1.25rem 1.2rem;
  border-radius: var(--wa-api-radius);
  border: 1px solid rgba(191, 219, 254, 0.85);
  background: linear-gradient(165deg, rgba(239, 246, 255, 0.98) 0%, #ffffff 100%);
  box-shadow: 0 8px 28px rgba(37, 99, 235, 0.08);
}

.wa-api-pro-limits-card h3 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  color: #1e3a5f;
}

.wa-api-pro-limits-card ul {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wa-api-pro-limits-card li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #475569;
}

.wa-api-pro-limits-card li strong {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--wa-api-blue-deep);
  background: rgba(37, 99, 235, 0.1);
  white-space: nowrap;
}

.wa-api-pro-limits-card p {
  margin: 0;
  font-size: 12px;
  color: var(--wa-api-muted);
  line-height: 1.45;
}

.wa-api-pro-info-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.wa-api-pro-info-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 1.15rem 1.2rem;
  border-radius: var(--wa-api-radius-sm);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(8px);
}

.wa-api-pro-info-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
}

.wa-api-pro-info-icon svg {
  width: 18px;
  height: 18px;
}

.wa-api-pro-info-icon--sync {
  background: rgba(34, 197, 94, 0.14);
  color: #16a34a;
}

.wa-api-pro-info-icon--tips {
  background: rgba(245, 158, 11, 0.16);
  color: #d97706;
}

.wa-api-pro-info-icon--help {
  background: rgba(37, 99, 235, 0.12);
  color: var(--wa-api-blue);
}

.wa-api-pro-info-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--wa-api-text);
}

.wa-api-pro-info-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--wa-api-muted);
}

.wa-api-pro-info-list {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  color: var(--wa-api-muted);
  line-height: 1.5;
}

.wa-api-pro-info-list code {
  font-size: 11px;
  background: rgba(15, 23, 42, 0.06);
  padding: 1px 4px;
  border-radius: 4px;
}

.wa-api-pro-help-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(37, 99, 235, 0.35);
  background: #ffffff;
  color: var(--wa-api-blue-deep);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.wa-api-pro-help-link:hover {
  background: rgba(239, 246, 255, 0.95);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
}

@media (max-width: 1024px) {
  .wa-api-pro-connection-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wa-api-pro-connection-col:nth-child(odd) {
    border-left: none;
  }

  .wa-api-pro-connection-col {
    padding: 0.75rem 0;
    border-left: none;
  }

  .wa-api-pro-company-layout {
    grid-template-columns: 1fr;
  }

  .wa-api-pro-form-grid {
    grid-template-areas:
      "cat"
      "desc"
      "about"
      "addr"
      "email"
      "site1"
      "site2";
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .wa-api-pro-page-head {
    flex-direction: column;
  }

  .wa-api-pro-page-head-aside {
    align-items: flex-start;
    width: 100%;
  }

  .wa-api-pro-status-stack {
    align-items: flex-start;
  }

  .wa-api-pro-connection {
    flex-direction: column;
  }

  .wa-api-pro-connection-cols {
    grid-template-columns: 1fr;
  }

  .wa-api-pro-photo-row,
  .wa-api-pro-info-strip {
    grid-template-columns: 1fr;
  }
}

.inventory-editor-field textarea {
  min-height: 88px;
  border-radius: 12px;
  border: 1px solid rgba(192, 209, 235, 0.95);
  background: #fff;
  color: #22395f;
  font: inherit;
  font-size: 0.84rem;
  padding: 0.65rem 0.75rem;
  resize: vertical;
}

.inventory-editor-field select {
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(192, 209, 235, 0.95);
  background: #fff;
  color: #22395f;
  font: inherit;
  font-size: 0.84rem;
  padding: 0 0.75rem;
}

.clients-pro-grid-1 {
  grid-template-columns: 1fr;
}

.admin-page[data-admin-panel-active="servicos"] .operator-config-row {
  background: #f8fafc;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: 12px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(110px, 1fr) minmax(120px, 1fr) auto;
  gap: 12px;
  align-items: end;
  transition: border-color 120ms ease, background 120ms ease;
}

.admin-page[data-admin-panel-active="servicos"] .operator-config-row:hover,
.admin-page[data-admin-panel-active="servicos"] .operator-config-row:focus-within {
  background: #ffffff;
  border-color: rgba(37, 99, 235, 0.45);
}

.admin-page[data-admin-panel-active="servicos"] .operator-config-row .operator-config-field {
  margin: 0;
}

.admin-page[data-admin-panel-active="servicos"] .operator-config-row .operator-config-field span {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.admin-page[data-admin-panel-active="servicos"] .operator-config-row .operator-config-field input {
  appearance: none;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ra-text, #0f172a);
  background: #ffffff;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.admin-page[data-admin-panel-active="servicos"] .operator-config-row .operator-config-field input:focus {
  border-color: rgba(37, 99, 235, 0.6);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.admin-page[data-admin-panel-active="servicos"] .operator-config-row .btn.btn-ghost {
  height: 38px;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid var(--ra-border, #e5e7eb);
  background: #ffffff;
  color: #dc2626;
  cursor: pointer;
  transition: all 120ms ease;
}

.admin-page[data-admin-panel-active="servicos"] .operator-config-row .btn.btn-ghost:hover {
  background: rgba(244,63,94,.08);
  border-color: rgba(244,63,94,.4);
}

@media (max-width: 1100px) {
  .admin-page[data-admin-panel-active="servicos"] .operator-config-row {
    grid-template-columns: 1fr 1fr;
  }
  .admin-page[data-admin-panel-active="servicos"] .operator-config-row .operator-config-field:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .services-pro-shell {
    padding: 16px 12px 24px;
  }
  .services-pro-head-actions {
    width: 100%;
  }
  .services-pro-tenant {
    flex: 1;
  }
  .services-pro-secondary-action,
  .services-pro-add {
    flex: 1;
    justify-content: center;
  }
  .admin-page[data-admin-panel-active="servicos"] .operator-config-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .admin-page[data-admin-panel-active="servicos"] .operator-config-row .btn.btn-ghost {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .admin-page[data-admin-panel-active="servicos"] .operator-config-row {
    grid-template-columns: 1fr;
  }
  .admin-page[data-admin-panel-active="servicos"] .operator-config-row .operator-config-field:first-child {
    grid-column: 1;
  }
}

/* ============================================================
   Configurações do operador — Premium SaaS pro-*
   ============================================================ */
.admin-page[data-admin-panel-active="configuracoes-operador"] .admin-panel[data-admin-panel="configuracoes-operador"] {
  background: var(--ra-bg, #f5f7fb);
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .config-operador-pro-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px clamp(16px, 3vw, 32px) 32px;
  background: var(--ra-bg, #f5f7fb);
  min-height: 100%;
  font-family: var(--ra-font, 'Inter', system-ui, sans-serif);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-page-title {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  color: var(--ra-text, #0f172a);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-page-lead {
  margin: 0;
  font-size: 13.5px;
  color: var(--ra-text-muted, #64748b);
  max-width: 56ch;
  line-height: 1.5;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-head-actions {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-tenant {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 14px;
  background: #ffffff;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: 10px;
  min-width: 200px;
  margin: 0 !important;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-tenant span {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-tenant select {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ra-text, #0f172a);
  outline: none;
  cursor: pointer;
  min-height: auto;
  padding: 0;
  border-radius: 0;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-save-main {
  height: 44px;
  padding: 0 20px;
  font-size: 13px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-status-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 2px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-status-pill {
  font-size: 12.5px;
  color: var(--ra-text-muted, #64748b);
  background: #ffffff;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: 999px;
  padding: 6px 14px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-kpi-strip .operator-config-kpi {
  background: #ffffff;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: var(--ra-radius-md, 14px);
  box-shadow: var(--ra-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
  padding: 16px 18px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-kpi-strip .operator-config-kpi strong {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ra-text, #0f172a);
  margin-top: 0.25rem;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-kpi-strip .operator-config-kpi span {
  color: #94a3b8;
  font-size: 11px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-kpi-strip .operator-config-kpi p {
  color: var(--ra-text-muted, #64748b);
  font-size: 12.5px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-segmented-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: var(--ra-radius-md, 14px);
  box-shadow: var(--ra-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-segmented-tabs .operator-config-tab {
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ra-text-muted, #64748b);
  background: transparent;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-segmented-tabs .operator-config-tab:hover {
  color: var(--ra-text, #0f172a);
  background: #f1f5f9;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-segmented-tabs .operator-config-tab.is-active {
  color: var(--ra-primary, #2563eb);
  background: rgba(37, 99, 235, 0.08);
  box-shadow: none;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-grid {
  gap: 16px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-card {
  background: #ffffff;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: var(--ra-radius-md, 14px);
  box-shadow: var(--ra-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
  padding: 20px 22px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-card-branches {
  background: #ffffff;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-card-head span {
  font-size: 11px;
  color: #94a3b8;
  letter-spacing: 0.06em;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-card-head strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--ra-text, #0f172a);
  margin-top: 2px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-form-grid {
  gap: 10px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-field input:not([type="checkbox"]),
.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-field select {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid var(--ra-border, #e5e7eb);
  background: #ffffff;
  color: var(--ra-text, #0f172a);
  font-size: 13.5px;
  font-weight: 600;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-field input:not([type="checkbox"]):focus,
.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-field select:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-crm-lead {
  margin: 0 0 1rem;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ra-text-muted, #64748b);
  max-width: 72ch;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-crm-lead strong {
  color: var(--ra-text, #0f172a);
  font-weight: 700;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-crm-master {
  margin-bottom: 0.85rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(191, 219, 254, 0.75);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(248, 250, 252, 0.98));
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-crm-global-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 1rem;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-crm-global.is-muted,
.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-crm-fields.is-muted {
  opacity: 0.55;
  pointer-events: none;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-crm-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-crm-field-card {
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fafbfc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-crm-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-crm-field-head strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--ra-text, #0f172a);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-crm-field-active {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 12px;
  font-weight: 700;
  color: var(--ra-text-muted, #64748b);
  white-space: nowrap;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-crm-field-grid {
  display: grid;
  grid-template-columns: 1fr minmax(110px, 0.55fr);
  gap: 10px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-crm-field-hint {
  margin: 0.55rem 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: #64748b;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-crm-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 0.25rem;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-crm-badge--live {
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-crm-badge--soon {
  background: rgba(251, 191, 36, 0.18);
  color: #b45309;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-crm-footnote {
  margin: 1rem 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-special-dates-lead {
  margin: 0 0 1rem;
  font-size: 13px;
  line-height: 1.55;
  color: #64748b;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-special-dates-readonly-note {
  margin: 0 0 1rem;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(251, 191, 36, 0.12);
  color: #b45309;
  font-size: 13px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-special-dates-form-card {
  padding: 1rem 1.1rem;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: 14px;
  background: #f8fafc;
  margin-bottom: 1.25rem;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-special-dates-form-card.is-readonly {
  opacity: 0.72;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-special-dates-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-special-dates-window-fields {
  display: contents;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-special-dates-window-fields.is-hidden {
  display: none;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-special-dates-recurring {
  grid-column: 1 / -1;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-special-dates-form-actions {
  margin-top: 1rem;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-special-dates-toolbar {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 12px 16px;
  margin-bottom: 1rem;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-special-dates-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-special-dates-empty {
  margin: 0;
  padding: 1.25rem;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  border: 1px dashed var(--ra-border, #e5e7eb);
  border-radius: 12px;
  background: #fff;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-special-dates-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 16px;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: 12px;
  background: #fff;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-special-dates-item-date {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 6px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-special-dates-item-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-special-dates-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-special-dates-badge.is-recurring {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-special-dates-badge.is-type {
  background: rgba(15, 23, 42, 0.06);
  color: #334155;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-special-dates-item-reason {
  margin: 6px 0 0;
  font-size: 13px;
  color: #64748b;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-special-dates-item-actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

/* Informações adicionais (KB complementar) */
.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-pro-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px clamp(16px, 3vw, 32px) 32px;
  background: var(--ra-bg, #f5f7fb);
  min-height: 100%;
  font-family: var(--ra-font, 'Inter', system-ui, sans-serif);
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-pro-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-pro-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-status-row {
  margin-top: -6px;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-readonly-note {
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(251, 191, 36, 0.12);
  color: #b45309;
  font-size: 13px;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-operational-banner {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  box-shadow: 0 2px 8px rgba(185, 28, 28, 0.08);
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-operational-banner strong {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-operational-banner p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-legacy-card {
  border: 1px solid #fecaca;
  background: #fffafb;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-legacy-lead {
  margin: 0 0 12px;
  font-size: 13px;
  color: #b91c1c;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-item.is-operational-legacy {
  border: 1px solid #fecaca;
  background: #fff5f5;
  opacity: 1;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-item.is-operational-legacy .tenant-kb-item-status {
  background: #fee2e2;
  color: #b91c1c;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-item-warning {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: #b91c1c;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-org-box {
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(37, 99, 235, 0.2);
  background: rgba(37, 99, 235, 0.06);
  color: #1e3a5f;
  font-size: 13px;
  line-height: 1.55;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-form-card.is-readonly {
  opacity: 0.72;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-field-span-2 {
  grid-column: 1 / -1;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-form-grid textarea {
  min-height: 110px;
  resize: vertical;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-char-counter {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
  text-align: right;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-char-counter.is-limit {
  color: #b45309;
  font-weight: 600;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-examples {
  margin: 0 0 1rem;
  padding: 12px 14px;
  border: 1px dashed var(--ra-border, #e5e7eb);
  border-radius: 12px;
  background: #fff;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-examples summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  list-style: none;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-examples summary::-webkit-details-marker {
  display: none;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-examples-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-example-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--ra-border, #e5e7eb);
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-example-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-example-copy strong {
  display: block;
  font-size: 13px;
  color: #0f172a;
  margin-bottom: 4px;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-example-copy p {
  margin: 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-empty {
  margin: 0;
  padding: 1.25rem;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  border: 1px dashed var(--ra-border, #e5e7eb);
  border-radius: 12px;
  background: #fff;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 16px;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: 12px;
  background: #fff;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-item.is-inactive {
  opacity: 0.78;
  background: #f8fafc;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-item-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-item-status {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #15803d;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-item.is-inactive .tenant-kb-item-status {
  background: #f1f5f9;
  color: #64748b;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-badge {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-item-preview {
  margin: 6px 0 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.45;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-item-actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .operator-config-card {
  background: #ffffff;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: var(--ra-radius-md, 14px);
  box-shadow: var(--ra-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
  padding: 20px 22px;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .operator-config-card-head span {
  font-size: 11px;
  color: #94a3b8;
  letter-spacing: 0.06em;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .operator-config-card-head strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--ra-text, #0f172a);
  margin-top: 2px;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .operator-config-form-grid {
  gap: 10px;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .operator-config-field input:not([type="checkbox"]),
.admin-page[data-admin-panel-active="informacoes-adicionais"] .operator-config-field select,
.admin-page[data-admin-panel-active="informacoes-adicionais"] .operator-config-field textarea {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid var(--ra-border, #e5e7eb);
  padding: 10px 12px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .operator-config-field textarea {
  min-height: 110px;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .config-pro-page-title {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  font-weight: 800;
  color: var(--ra-text, #0f172a);
  letter-spacing: -0.02em;
}

.admin-page[data-admin-panel-active="informacoes-adicionais"] .config-pro-page-lead {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #64748b;
  max-width: 52rem;
}

@media (max-width: 640px) {
  .admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-item {
    flex-direction: column;
  }
  .admin-page[data-admin-panel-active="informacoes-adicionais"] .tenant-kb-pro-head-actions {
    width: 100%;
  }
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-field span {
  font-size: 11px;
  color: #94a3b8;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-field-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: 12px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-field-inline:hover {
  border-color: rgba(37, 99, 235, 0.35);
  background: #ffffff;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-field-inline > span:first-of-type {
  flex: 1 1 180px;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ra-text, #0f172a);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.35;
  align-self: center;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-field-inline > input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin-top: 2px;
  accent-color: var(--ra-primary, #2563eb);
  align-self: center;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-field-inline > .operator-config-hint {
  flex: 1 1 100%;
  margin: 0;
  font-size: 12px;
  color: var(--ra-text-muted, #64748b);
  font-weight: 500;
  line-height: 1.4;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] [data-operator-tab-target="gerais"] .operator-config-field:not(.operator-config-field-inline) {
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: 12px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-days {
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: 12px;
  gap: 8px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-days label {
  border-radius: 999px;
  border: 1px solid var(--ra-border, #e5e7eb);
  background: #ffffff;
  font-size: 12.5px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-form-grid-compact {
  gap: 10px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-inline-actions .btn-primary {
  height: 42px;
  border-radius: 10px;
  padding: 0 20px;
  font-weight: 700;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-card .operator-config-stack,
.admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-card .operator-config-row {
  border-radius: 12px;
  border: 1px solid var(--ra-border, #e5e7eb);
  box-shadow: none;
}

@media (max-width: 1100px) {
  .admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .admin-page[data-admin-panel-active="configuracoes-operador"] .config-operador-pro-shell {
    padding: 16px 12px max(24px, env(safe-area-inset-bottom, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-head-copy {
    min-width: 0;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-head-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-tenant {
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: none;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .services-pro-secondary-action,
  .admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-save-main {
    width: 100%;
    flex: none;
    min-height: 46px;
    justify-content: center;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-segmented-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    gap: 6px;
    padding: 8px 10px 10px;
    scrollbar-width: thin;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-segmented-tabs .operator-config-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    min-height: 44px;
    padding: 10px 16px;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .admin-page[data-admin-panel-active="configuracoes-operador"] .config-pro-kpi-strip {
    grid-template-columns: 1fr;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-form-grid,
  .admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-form-grid-compact {
    grid-template-columns: 1fr;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-card[data-operator-tab-target="pagamentos"],
  .admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-card[data-operator-tab-target="crm"] {
    padding: 16px 14px;
  }

  .admin-page[data-admin-panel-active="configuracoes-operador"] .operator-crm-global-grid,
  .admin-page[data-admin-panel-active="configuracoes-operador"] .operator-crm-fields {
    grid-template-columns: 1fr;
  }

  .admin-page[data-admin-panel-active="configuracoes-operador"] .operator-crm-field-grid {
    grid-template-columns: 1fr;
  }

  .admin-page[data-admin-panel-active="configuracoes-operador"] .operator-special-dates-form-grid,
  .admin-page[data-admin-panel-active="configuracoes-operador"] .operator-special-dates-toolbar {
    grid-template-columns: 1fr;
  }

  .admin-page[data-admin-panel-active="configuracoes-operador"] .operator-special-dates-item {
    flex-direction: column;
  }

  .admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-inline-actions {
    margin-top: 8px;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-inline-actions .btn-primary {
    width: 100%;
    min-height: 46px;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-field-inline {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-field-inline > span:first-of-type {
    flex: none;
    align-self: stretch;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .operator-config-field-inline > input[type="checkbox"] {
    align-self: flex-start;
    width: 22px;
    height: 22px;
    min-height: 22px;
    margin-top: 0;
  }
}

/* =============================================================================
   Empresa → Geral — cadastro da empresa (premium)
   ============================================================================= */

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-lead {
  margin: 0 0 1rem;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ra-text-muted, #64748b);
  max-width: 72ch;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-api-pending-note {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.45;
  color: #92400e;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.28);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-editable code {
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.06);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-readonly-note {
  margin: 0 0 1rem;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: #92400e;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 16px;
  align-items: start;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-surface {
  padding: 1.1rem 1.2rem;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.65) 0%, #ffffff 100%);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-platform {
  border-color: rgba(203, 213, 225, 0.85);
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.9) 0%, #ffffff 100%);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-surface-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-surface-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-surface-icon svg {
  width: 18px;
  height: 18px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-surface-icon--lock {
  background: rgba(100, 116, 139, 0.12);
  color: #64748b;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-surface-icon--edit {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-surface-icon--logo {
  background: rgba(168, 85, 247, 0.12);
  color: #7c3aed;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-surface-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ra-text, #0f172a);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-surface-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ra-text-muted, #64748b);
  line-height: 1.45;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-field--span-2 {
  grid-column: 1 / -1;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-field-label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-field input {
  width: 100%;
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid var(--ra-border, #e5e7eb);
  background: #ffffff;
  color: var(--ra-text, #0f172a);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-form-grid--readonly .company-geral-field input {
  background: rgba(248, 250, 252, 0.95);
  color: #64748b;
  cursor: not-allowed;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-field input:focus:not(:read-only) {
  outline: none;
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-logo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 16px;
  align-items: start;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-dropzone {
  min-height: 160px;
  border: 2px dashed rgba(148, 163, 184, 0.55);
  border-radius: 12px;
  background: radial-gradient(120% 80% at 50% 0%, rgba(37, 99, 235, 0.05), transparent 55%), #f8fafc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 1.25rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-dropzone strong {
  font-size: 13px;
  color: var(--ra-text, #0f172a);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-dropzone span:last-child {
  font-size: 12px;
  color: var(--ra-text-muted, #64748b);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-dropzone:hover:not(.is-disabled),
.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-dropzone.is-dragover {
  border-color: rgba(37, 99, 235, 0.5);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-dropzone.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-dropzone-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-dropzone-icon svg {
  width: 22px;
  height: 22px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-logo-preview-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-preview-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ra-text-muted, #64748b);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-logo-ring {
  width: 112px;
  height: 112px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(226, 232, 240, 0.95);
  background: #f1f5f9;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-logo-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-logo-placeholder {
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  padding: 8px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-logo-remove {
  border: none;
  background: transparent;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-save-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  padding: 12px 22px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.28);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-save-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-save-hint {
  margin: 0;
  font-size: 12px;
  color: var(--ra-text-muted, #64748b);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-aside {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-tip-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-tip-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-tip-icon svg {
  width: 16px;
  height: 16px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-tip-icon--info {
  background: rgba(100, 116, 139, 0.12);
  color: #64748b;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-tip-icon--check {
  background: rgba(34, 197, 94, 0.14);
  color: #16a34a;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-tip-icon--help {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-tip-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--ra-text, #0f172a);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-tip-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ra-text-muted, #64748b);
}

@media (max-width: 1024px) {
  .admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-form-grid,
  .admin-page[data-admin-panel-active="configuracoes-operador"] .company-geral-pro-logo-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Login ReservaAI — mock fiel (imagem hero + formulário)
   ============================================================ */
.auth-page.auth-login-v2 {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #0f172a;
  --auth-login-input-fill: #ffffff;
  background: #eef2f7;
  overflow-x: hidden;
}

.auth-login-v2-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 32px) clamp(12px, 2.5vw, 24px);
  box-sizing: border-box;
  gap: 20px;
}

.auth-login-v2-stage {
  width: 100%;
  max-width: 1180px;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-login-v2-card {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
  width: 100%;
  min-height: min(720px, calc(100dvh - 120px));
  border-radius: 28px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow:
    0 4px 6px rgba(15, 23, 42, 0.03),
    0 28px 80px rgba(15, 23, 42, 0.1);
}

.auth-login-v2-visual {
  position: relative;
  min-height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  background: linear-gradient(145deg, #e8f2ff 0%, #f0fdf9 50%, #f5f3ff 100%);
  overflow: hidden;
}

.auth-login-v2-visual-img {
  width: 100%;
  max-width: 768px;
  height: auto;
  max-height: 100%;
  display: block;
  object-fit: contain;
  object-position: left top;
}

.auth-login-v2-form-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: clamp(32px, 4vw, 52px) clamp(28px, 4.5vw, 56px);
  background: #ffffff;
  box-sizing: border-box;
}

.auth-login-v2-mobile-brand {
  display: none;
  margin: 0 auto 20px;
  text-decoration: none;
}

.auth-login-v2-mobile-brand img {
  display: block;
  max-height: 48px;
  width: auto;
  max-width: 200px;
  margin: 0 auto;
}

.auth-login-v2 .auth-card-header h2 {
  margin: 0 0 10px;
  font-size: clamp(1.65rem, 2.8vw, 2.05rem);
  font-weight: 800;
  color: #0c1a3a;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.auth-login-v2 .auth-card-header p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #64748b;
  max-width: 36ch;
}

.auth-login-v2-form {
  margin-top: 1.35rem;
}

.auth-login-v2-credentials {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-login-v2 .auth-field span:first-child {
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}

.auth-login-v2 .auth-input-affix {
  display: flex;
  align-items: stretch;
  min-height: 52px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.auth-login-v2 .auth-input-affix:focus-within {
  border-color: #93c5fd;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.auth-login-v2 .auth-input-affix-lead,
.auth-login-v2 .auth-input-affix-trail {
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  background: #fff;
}

.auth-login-v2 .auth-input-affix-lead {
  border-right: 1px solid #f1f5f9;
}

.auth-login-v2 .auth-input-affix-trail {
  border-left: 1px solid #f1f5f9;
}

.auth-login-v2 .auth-input-affix-icon {
  width: 20px;
  height: 20px;
  color: #94a3b8;
}

.auth-login-v2 .auth-input-affix-input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 14px;
  border: 0;
  background: var(--auth-login-input-fill);
  font-size: 0.95rem;
  color: #0f172a;
  outline: none;
}

.auth-login-v2 .auth-input-affix-input::placeholder {
  color: #94a3b8;
}

.auth-login-v2 .auth-password-toggle {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 48px;
  border: 0;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}

.auth-login-v2 .auth-password-toggle:hover {
  color: #2563eb;
}

.auth-login-v2 .auth-password-toggle-icon {
  width: 20px;
  height: 20px;
}

.auth-login-v2 .auth-password-toggle-icon[hidden] {
  display: none !important;
}

.auth-login-v2-tenant {
  margin-top: 0.85rem;
  padding: 0.85rem 0.95rem;
  border-radius: 12px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  background: #f8fbff;
}

.auth-login-v2-tenant[hidden] {
  display: none !important;
}

.auth-login-v2-tenant-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.auth-login-v2-tenant-field > span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.auth-login-v2-tenant-field select {
  width: 100%;
  min-height: 44px;
  padding: 0.45rem 2.25rem 0.45rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.85rem center;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  appearance: none;
  cursor: pointer;
}

.auth-login-v2-tenant-hint {
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
  color: #64748b;
}

.auth-login-v2-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

.auth-login-v2-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
}

.auth-login-v2-remember input {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
}

.auth-login-v2-forgot {
  font-size: 0.88rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
}

.auth-login-v2-forgot:hover {
  text-decoration: underline;
}

.auth-login-v2-submit {
  position: relative;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 0.65rem;
  min-height: 54px;
  padding: 0 20px;
  border: 0;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 45%, #1d4ed8 100%);
  box-shadow:
    0 4px 14px rgba(37, 99, 235, 0.4),
    0 0 0 1px rgba(37, 99, 235, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.auth-login-v2-submit:hover {
  transform: translateY(-1px);
  box-shadow:
    0 10px 32px rgba(37, 99, 235, 0.45),
    0 0 0 1px rgba(37, 99, 235, 0.1);
}

.auth-login-v2-submit-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.auth-login-v2-submit-sparkle {
  position: absolute;
  right: 18px;
  width: 22px;
  height: 22px;
  opacity: 0.85;
  color: rgba(255, 255, 255, 0.95);
  pointer-events: none;
}

.auth-login-v2-biometric {
  margin-top: 0.35rem;
}

.auth-login-v2-divider {
  margin: 1.35rem 0 1.1rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: #94a3b8;
}

.auth-login-v2 .social-auth-btn {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  min-height: 50px;
  font-weight: 600;
  font-size: 0.92rem;
  color: #334155;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.auth-login-v2 .social-auth-btn:hover {
  border-color: #cbd5e1;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.auth-login-v2 .social-auth-btn.apple {
  border-color: #e2e8f0;
}

.auth-login-v2-register {
  margin: 1.2rem 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: #64748b;
}

.auth-login-v2-register a {
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
}

.auth-login-v2-register a:hover {
  text-decoration: underline;
}

.auth-login-v2-trust-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 1.15rem;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
  border: 1px solid #dbeafe;
}

.auth-login-v2-trust-card-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}

.auth-login-v2-trust-card-icon svg {
  width: 18px;
  height: 18px;
}

.auth-login-v2-trust-card p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  font-weight: 600;
  color: #475569;
}

.auth-login-v2-feedback {
  margin-top: 0.85rem;
  text-align: center;
  font-size: 0.88rem;
}

.auth-login-v2-page-footer {
  width: 100%;
  max-width: 1180px;
  text-align: center;
  padding: 0 12px 8px;
}

.auth-login-v2-legal {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: #94a3b8;
}

.auth-login-v2-legal a {
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
}

.auth-login-v2-legal a:hover {
  text-decoration: underline;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1024px) {
  .auth-login-v2-card {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.95fr);
    min-height: min(680px, calc(100dvh - 100px));
  }
}

@media (max-width: 900px) {
  .auth-login-v2-wrap {
    justify-content: flex-start;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
  }

  .auth-login-v2-card {
    grid-template-columns: 1fr;
    min-height: auto;
    border-radius: 20px;
  }

  .auth-login-v2-visual {
    display: none;
  }

  .auth-login-v2-mobile-brand {
    display: block;
  }

  .auth-login-v2-form-col {
    padding: clamp(24px, 5vw, 36px) clamp(20px, 4vw, 28px);
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }

  .auth-login-v2 .auth-input-affix-input {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .auth-login-v2-card {
    border-radius: 16px;
  }

  .auth-login-v2-submit-sparkle {
    right: 14px;
    width: 18px;
    height: 18px;
  }
}

/* Pagamentos e Webhooks */
.payments-webhooks-shell {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.payments-webhooks-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.payments-webhooks-head h2 {
  margin: 0;
  color: #16345b;
}

.payments-webhooks-head p {
  margin: 0.35rem 0 0;
  color: #5f7895;
}

.payments-webhooks-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.payments-webhooks-kpi {
  border: 1px solid rgba(205, 219, 240, 0.95);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.96));
  padding: 0.85rem;
}

.payments-webhooks-kpi span {
  display: block;
  color: #69809c;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.payments-webhooks-kpi strong {
  display: block;
  margin-top: 0.32rem;
  color: #1f3d66;
  font-size: 1.28rem;
  overflow-wrap: anywhere;
}

.payments-webhooks-kpi-count {
  display: block;
  margin-top: 0.28rem;
  font-style: normal;
  font-size: 0.74rem;
  font-weight: 600;
  color: #69809c;
}

.payments-webhooks-kpi[data-tone="green"] strong {
  color: #157d5e;
}

.payments-webhooks-kpi[data-tone="amber"] strong {
  color: #b45309;
}

.payments-webhooks-kpi[data-tone="orange"] strong {
  color: #c2410c;
}

.payments-webhooks-kpi[data-tone="red"] strong {
  color: #b91c1c;
}

.payments-webhooks-filter-card {
  border: 1px solid rgba(205, 219, 240, 0.95);
  border-radius: 16px;
  padding: 0.9rem;
  background: rgba(247, 250, 255, 0.98);
}

.payments-webhooks-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.payments-webhooks-kpi-grid > .payments-webhooks-kpi {
  min-width: 0;
}

.payments-webhooks-filters label span {
  display: block;
  margin-bottom: 0.3rem;
  color: #5f7895;
  font-size: 0.74rem;
  font-weight: 700;
}

.payments-webhooks-filters input,
.payments-webhooks-filters select {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(181, 202, 233, 0.92);
  border-radius: 10px;
  background: #fff;
  padding: 0 0.65rem;
  color: #1f3d66;
}

.payments-webhooks-filters select[multiple] {
  min-height: 84px;
  padding: 0.4rem;
}

.payments-webhooks-filter-actions {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.payments-webhooks-filter-actions .btn.btn-ghost {
  color: #294d78;
  border-color: rgba(157, 181, 220, 0.95);
  background: #f6f9ff;
  font-weight: 700;
}

.payments-webhooks-filter-actions .btn.btn-ghost:hover,
.payments-webhooks-filter-actions .btn.btn-ghost:focus-visible {
  color: #1f3f66;
  border-color: rgba(105, 144, 210, 0.95);
  background: #eef4ff;
}

.payments-webhooks-table-card {
  border: 1px solid rgba(205, 219, 240, 0.95);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.payments-webhooks-table {
  width: 100%;
  border-collapse: collapse;
}

.payments-webhooks-table th,
.payments-webhooks-table td {
  border-bottom: 1px solid rgba(227, 236, 248, 0.95);
  padding: 0.65rem 0.5rem;
  text-align: left;
  vertical-align: top;
  font-size: 0.78rem;
  color: #26456e;
}

.payments-webhooks-table th {
  background: rgba(245, 249, 255, 0.98);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #637d9a;
}

.payments-webhooks-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payments-webhooks-stack > div {
  line-height: 1.35;
}

.payments-webhooks-muted {
  font-size: 0.7rem;
  font-weight: 600;
  color: #69809c;
  text-transform: none;
  letter-spacing: 0;
}

.payments-webhooks-service-package-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #ede9fe, #fae8ff);
  color: #6d28d9;
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px solid rgba(124, 58, 237, 0.2);
  max-width: 100%;
}

.payments-webhooks-service-package-badge svg {
  flex-shrink: 0;
}

.payments-webhooks-service-package-badge span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payments-webhooks-detail-service-package h4 {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.payments-webhooks-detail-service-package p {
  font-weight: 700;
  color: #5b21b6;
}

.payments-webhooks-detail-service-package {
  background: linear-gradient(135deg, rgba(237, 233, 254, 0.55), rgba(250, 232, 255, 0.55));
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 12px;
}

.payments-webhooks-receipt-premium-package {
  grid-column: 1 / -1;
}

.payments-webhooks-receipt-premium-package span {
  color: #6d28d9 !important;
}

.payments-webhooks-receipt-premium-package strong {
  color: #5b21b6;
}

/* ===== Crédito de pacote (paymentOrigin: service_package_credit) ===== */

.payments-webhooks-service-package-credit-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #047857;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid rgba(5, 150, 105, 0.32);
  margin-top: 4px;
  white-space: nowrap;
}

.payments-webhooks-service-package-credit-badge svg {
  color: #059669;
}

.payments-webhooks-amount-credit-hint {
  display: inline-flex;
  align-items: center;
  margin-top: 2px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #047857;
  background: rgba(16, 185, 129, 0.12);
  border-radius: 999px;
  letter-spacing: 0.01em;
}

.payments-webhooks-amount-total.is-credit {
  color: #047857;
  font-size: 13px;
  font-weight: 700;
}

.payments-webhooks-detail-service-package-credit {
  background: linear-gradient(135deg, rgba(220, 252, 231, 0.7), rgba(204, 251, 241, 0.7));
  border: 1px solid rgba(16, 185, 129, 0.32);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.payments-webhooks-detail-service-package-credit h4 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #047857;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.payments-webhooks-detail-service-package-credit h4 svg {
  color: #059669;
}

.payments-webhooks-credit-lead {
  margin: 0;
  font-size: 13px;
  color: #064e3b;
  line-height: 1.4;
}

.payments-webhooks-credit-lead strong {
  color: #047857;
}

.payments-webhooks-credit-package-name {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #1e293b;
}

.payments-webhooks-credit-package-name span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #047857;
}

.payments-webhooks-credit-balance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.payments-webhooks-credit-balance-cell {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

.payments-webhooks-credit-balance-cell span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #047857;
}

.payments-webhooks-credit-balance-cell strong {
  font-size: 18px;
  color: #064e3b;
  font-weight: 800;
}

.payments-webhooks-credit-balance-cell.is-available {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #047857;
}

.payments-webhooks-credit-balance-cell.is-available span,
.payments-webhooks-credit-balance-cell.is-available strong {
  color: #fff;
}

.payments-webhooks-credit-balance-meta {
  margin: 0;
  font-size: 12px;
  color: #065f46;
}

.payments-webhooks-credit-balance-meta strong {
  color: #064e3b;
}

.payments-webhooks-receipt-premium-summary-row.is-total.is-credit strong {
  color: #047857;
}

.payments-webhooks-receipt-premium-credit-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.32);
  color: #065f46;
  font-size: 12px;
  line-height: 1.4;
}

.payments-webhooks-receipt-premium-credit-note svg {
  color: #059669;
  flex-shrink: 0;
  margin-top: 2px;
}

.payments-webhooks-receipt-premium-pay.is-credit strong {
  color: #047857;
}

.payments-webhooks-kpi[data-tone="package-credit"] {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(20, 184, 166, 0.12));
  border-color: rgba(16, 185, 129, 0.32);
}

.payments-webhooks-kpi[data-tone="package-credit"] span {
  color: #047857;
}

.payments-webhooks-kpi[data-tone="package-credit"] strong {
  color: #064e3b;
}

.payments-webhooks-row {
  cursor: pointer;
}

.payments-webhooks-row:hover {
  background: rgba(245, 249, 255, 0.98);
}

.payments-webhooks-estado-principal .payments-webhooks-status {
  font-weight: 800;
}

.payments-webhooks-mp-id {
  font-size: 0.76rem;
  font-weight: 700;
  color: #2f7cc9;
}

.payments-webhooks-gateway-note {
  font-size: 0.68rem;
  line-height: 1.4;
  color: #6d829b;
}

.payments-webhooks-gateway-cell {
  max-width: 280px;
}

.payments-webhooks-detail-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.85rem;
}

.payments-webhooks-detail-mp-sync {
  font-weight: 700;
}

.payments-webhooks-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 0 0.52rem;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.payments-webhooks-status[data-tone="delivered"] { background: rgba(74, 172, 103, 0.16); color: #1f6b38; }
.payments-webhooks-status[data-tone="failed"],
.payments-webhooks-status[data-tone="cancelled"] { background: rgba(205, 91, 91, 0.16); color: #8a2f2f; }
.payments-webhooks-status[data-tone="retrying"] { background: rgba(138, 99, 208, 0.16); color: #5c3497; }
.payments-webhooks-status[data-tone="pending"] { background: rgba(214, 154, 55, 0.18); color: #8b5b17; }
.payments-webhooks-status[data-tone="approved"] { background: rgba(74, 172, 103, 0.16); color: #1f6b38; }
.payments-webhooks-status[data-tone="expired"] { background: rgba(234, 150, 62, 0.2); color: #9a5410; }

.payments-webhooks-payment-method {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.payments-webhooks-payment-method svg {
  display: block;
  flex-shrink: 0;
}

.payments-webhooks-payment-method.is-pix {
  background: rgba(16, 185, 129, 0.14);
  color: #0f766e;
}

.payments-webhooks-payment-method.is-card {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

.payments-webhooks-payment-method.is-neutral {
  background: #f1f5f9;
  color: #64748b;
}

.payments-webhooks-action {
  min-height: 28px;
  border: 1px solid rgba(169, 190, 223, 0.95);
  border-radius: 8px;
  background: #f9fbff;
  color: #2f5280;
  font-size: 0.72rem;
  font-weight: 700;
  margin-right: 0.35rem;
  padding: 0 0.5rem;
  cursor: pointer;
}

.payments-webhooks-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.payments-webhooks-empty {
  text-align: center;
  color: #6d829b;
}

/* === Coluna "Valor / partilha" — layout premium (venda + partilha) === */
.payments-webhooks-amount-cell {
  min-width: 200px;
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
}

.payments-webhooks-amount-total {
  font-size: 1rem;
  font-weight: 800;
  color: #0f1f3d;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  margin-bottom: 0.4rem;
}

.payments-webhooks-amount-empty {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.12);
  border-radius: 999px;
  padding: 2px 0.55rem;
}

/* --- Badge de "Valor ajustado" (priceOverride) na coluna Valor / partilha --- */
.payments-webhooks-amount-override {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 0.55rem;
  border-radius: 999px;
  border: 1px solid #a5f3fc;
  background: #ecfeff;
  color: #0e7490;
  cursor: help;
}

.payments-webhooks-amount-override[data-tone="surcharge"] {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #b45309;
}

.payments-webhooks-amount-override svg {
  flex-shrink: 0;
}

/* --- Bloco "Ajuste de valor" no modal de detalhe --- */
.payments-webhooks-detail-override {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.payments-webhooks-override-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem;
}

.payments-webhooks-override-cell {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.payments-webhooks-override-cell > span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.payments-webhooks-override-cell > strong {
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  color: #0f172a;
}

.payments-webhooks-override-cell.is-final {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.payments-webhooks-override-cell.is-final > strong {
  color: #1d4ed8;
}

.payments-webhooks-override-cell[data-tone="discount"] {
  background: #ecfeff;
  border-color: #a5f3fc;
}

.payments-webhooks-override-cell[data-tone="discount"] > strong {
  color: #0e7490;
}

.payments-webhooks-override-cell[data-tone="surcharge"] {
  background: #fff7ed;
  border-color: #fed7aa;
}

.payments-webhooks-override-cell[data-tone="surcharge"] > strong {
  color: #b45309;
}

.payments-webhooks-override-meta {
  margin: 0;
  font-size: 0.78rem;
  color: #64748b;
}

.payments-webhooks-override-note {
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  font-size: 0.85rem;
  line-height: 1.4;
}

/* --- Track de comissão (Serviço ou Produto) na célula da tabela --- */
.payments-webhooks-split-track {
  margin-top: 0.45rem;
  padding: 0.35rem 0.4rem 0.4rem;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(248, 250, 252, 0.65);
}

.payments-webhooks-split-track[data-track="service"] {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(59, 130, 246, 0.04));
  border-color: rgba(99, 102, 241, 0.18);
}

.payments-webhooks-split-track[data-track="product"] {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(20, 184, 166, 0.04));
  border-color: rgba(16, 185, 129, 0.20);
}

.payments-webhooks-split-track-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
  padding: 0 0.15rem;
}

.payments-webhooks-split-track-label {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #334155;
}

.payments-webhooks-split-track[data-track="service"] .payments-webhooks-split-track-label {
  color: #3730a3;
}

.payments-webhooks-split-track[data-track="product"] .payments-webhooks-split-track-label {
  color: #047857;
}

.payments-webhooks-split-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.35rem;
  margin-top: 4px;
  padding: 3px 0.5rem;
  border-radius: 8px;
  font-size: 0.74rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.payments-webhooks-split-row[data-tone="prof"] {
  background: rgba(99, 102, 241, 0.10);
  color: #3730a3;
}

.payments-webhooks-split-row[data-tone="house"] {
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
}

.payments-webhooks-split-track[data-track="product"] .payments-webhooks-split-row[data-tone="prof"] {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.payments-webhooks-split-track[data-track="product"] .payments-webhooks-split-row[data-tone="house"] {
  background: rgba(15, 118, 110, 0.10);
  color: #0f766e;
}

.payments-webhooks-split-label {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.payments-webhooks-split-pct {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.22);
  color: #3730a3;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.payments-webhooks-split-track[data-track="product"] .payments-webhooks-split-pct {
  background: rgba(16, 185, 129, 0.20);
  color: #047857;
}

.payments-webhooks-split-value {
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: -0.01em;
  color: inherit;
}

/* === Bloco "Valor da venda / partilha" no modal de detalhe === */
.payments-webhooks-detail-split {
  grid-column: 1 / -1;
}

.payments-webhooks-detail-split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.6rem;
  margin-top: 0.35rem;
}

.payments-webhooks-detail-split-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.payments-webhooks-detail-split-cell span {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.payments-webhooks-detail-split-cell span em {
  font-style: normal;
  font-size: 0.62rem;
  padding: 1px 0.4rem;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.18);
  color: #3730a3;
  letter-spacing: 0.02em;
}

.payments-webhooks-detail-split-cell strong {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f1f3d;
  font-variant-numeric: tabular-nums;
}

.payments-webhooks-detail-split-cell.is-total {
  background: linear-gradient(135deg, var(--ra-primary, #2b4f97), var(--ra-primary-dark, #1f3b7a));
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
}

.payments-webhooks-detail-split-cell.is-total span,
.payments-webhooks-detail-split-cell.is-total strong {
  color: #ffffff;
}

.payments-webhooks-detail-split-cell.is-prof {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(59, 130, 246, 0.06));
  border-color: rgba(99, 102, 241, 0.20);
}

.payments-webhooks-detail-split-cell.is-house {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(37, 99, 235, 0.05));
  border-color: rgba(37, 99, 235, 0.18);
}

.payments-webhooks-detail-split-summary {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f1f3d;
  margin: 0.3rem 0 0.2rem;
  font-variant-numeric: tabular-nums;
}

.payments-webhooks-detail-split-empty {
  font-size: 0.78rem;
  color: #64748b;
  margin: 0;
}

.payments-webhooks-detail-split-empty code {
  background: rgba(148, 163, 184, 0.14);
  border-radius: 4px;
  padding: 0 0.3rem;
  font-size: 0.74rem;
}

.payments-webhooks-detail-split-meta {
  font-size: 0.7rem;
  color: #64748b;
  margin: 0.6rem 0 0;
  letter-spacing: 0.01em;
}

/* --- Modal: cabeçalho com total + lista de checkout --- */
.payments-webhooks-detail-split-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.85rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(15, 31, 61, 0.04), rgba(43, 79, 151, 0.02));
  border: 1px solid rgba(226, 232, 240, 0.95);
  margin-bottom: 0.65rem;
}

.payments-webhooks-detail-split-header > div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.payments-webhooks-detail-split-header > div span {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}

.payments-webhooks-detail-split-header > div strong {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0f1f3d;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.payments-webhooks-detail-split-header small {
  font-size: 0.72rem;
  color: #475569;
  max-width: 60%;
  text-align: right;
  line-height: 1.4;
}

/* --- Modal: containers dos dois tracks --- */
.payments-webhooks-detail-tracks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.7rem;
}

.payments-webhooks-detail-track {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.75rem 0.9rem 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.payments-webhooks-detail-track[data-accent="service"] {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(59, 130, 246, 0.03));
  border-color: rgba(99, 102, 241, 0.22);
}

.payments-webhooks-detail-track[data-accent="product"] {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(20, 184, 166, 0.03));
  border-color: rgba(16, 185, 129, 0.24);
}

.payments-webhooks-detail-track-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.payments-webhooks-detail-track-head h5 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 800;
  color: #0f1f3d;
  letter-spacing: -0.01em;
}

.payments-webhooks-detail-track-pct {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 3px 0.6rem;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.18);
  color: #3730a3;
  font-variant-numeric: tabular-nums;
}

.payments-webhooks-detail-track[data-accent="product"] .payments-webhooks-detail-track-pct {
  background: rgba(16, 185, 129, 0.20);
  color: #047857;
}

.payments-webhooks-detail-track[data-accent="product"] .payments-webhooks-detail-split-cell.is-total {
  background: linear-gradient(135deg, #047857, #065f46);
  box-shadow: 0 10px 24px rgba(5, 95, 70, 0.22);
}

.payments-webhooks-detail-track[data-accent="product"] .payments-webhooks-detail-split-cell.is-prof {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.10), rgba(20, 184, 166, 0.06));
  border-color: rgba(16, 185, 129, 0.22);
}

.payments-webhooks-detail-track[data-accent="product"] .payments-webhooks-detail-split-cell.is-house {
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.08), rgba(13, 148, 136, 0.05));
  border-color: rgba(15, 118, 110, 0.20);
}

.payments-webhooks-detail-track[data-accent="product"] .payments-webhooks-detail-split-cell span em {
  background: rgba(16, 185, 129, 0.22);
  color: #047857;
}

/* --- Gorjeta + composição do checkout (ledger V1) --- */
.payments-webhooks-amount-financial {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.35rem;
}

.payments-webhooks-amount-meta {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.payments-webhooks-amount-meta[data-kind="operational"] {
  color: #475569;
}

.payments-webhooks-amount-meta[data-kind="tip"] {
  color: #b45309;
}

.payments-webhooks-amount-composition-hint {
  font-size: 0.66rem;
  color: #64748b;
  margin-bottom: 0.35rem;
  line-height: 1.3;
}

.payments-webhooks-checkout-lines {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.payments-webhooks-checkout-lines.is-compact {
  gap: 0.3rem;
}

.payments-webhooks-checkout-group {
  padding: 0.4rem 0.5rem;
  border-radius: 10px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(248, 250, 252, 0.8);
}

.payments-webhooks-checkout-group[data-tone="service"] {
  border-color: rgba(99, 102, 241, 0.2);
  background: rgba(99, 102, 241, 0.05);
}

.payments-webhooks-checkout-group[data-tone="product"] {
  border-color: rgba(16, 185, 129, 0.22);
  background: rgba(16, 185, 129, 0.05);
}

.payments-webhooks-checkout-group[data-tone="tip"] {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(251, 191, 36, 0.08);
}

.payments-webhooks-checkout-group-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 0.25rem;
}

.payments-webhooks-checkout-group-list {
  margin: 0;
  padding: 0 0 0 1rem;
  font-size: 0.74rem;
  color: #0f1f3d;
  line-height: 1.35;
}

.payments-webhooks-checkout-group-list.is-compact {
  font-size: 0.7rem;
}

.payments-webhooks-checkout-fallback {
  font-size: 0.74rem;
  color: #475569;
  margin: 0;
  line-height: 1.4;
}

.payments-webhooks-detail-composition h5 {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

.payments-webhooks-detail-span {
  grid-column: 1 / -1;
}

.payments-webhooks-detail-financial-summary {
  margin-bottom: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.payments-webhooks-detail-discount {
  margin: 0.65rem 0;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  border: 1px solid rgba(14, 165, 233, 0.28);
  background: rgba(236, 254, 255, 0.55);
}

.payments-webhooks-detail-discount h5 {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0e7490;
}

.payments-webhooks-breakdown-meta {
  margin: 0.5rem 0 0;
  font-size: 0.72rem;
  color: #64748b;
}

.payments-webhooks-breakdown-meta.is-warn {
  color: #b45309;
}

.payments-webhooks-breakdown-item {
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(248, 250, 252, 0.85);
  margin-bottom: 0.45rem;
}

.payments-webhooks-breakdown-item-head {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}

.payments-webhooks-breakdown-qty {
  font-size: 0.75rem;
  color: #64748b;
}

.payments-webhooks-breakdown-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.25rem 0.65rem;
  font-size: 0.74rem;
  color: #475569;
}

.payments-webhooks-breakdown-item-grid strong {
  color: #0f172a;
}

.payments-webhooks-receipt-panel {
  margin: 0.75rem 0 1rem;
  padding: 0.85rem;
  border-radius: 12px;
  border: 1px dashed rgba(100, 116, 139, 0.45);
  background: #fff;
}

.payments-webhooks-receipt-note {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  color: #64748b;
}

.payments-webhooks-receipt h6 {
  margin: 0.65rem 0 0.35rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
}

.payments-webhooks-receipt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.payments-webhooks-receipt-table th,
.payments-webhooks-receipt-table td {
  padding: 0.35rem 0.45rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  text-align: left;
}

.payments-webhooks-receipt-num {
  text-align: right;
  white-space: nowrap;
}

.payments-webhooks-receipt-totals {
  margin-top: 0.5rem;
  display: grid;
  gap: 0.35rem;
  max-width: 280px;
  margin-left: auto;
}

.payments-webhooks-receipt-totals > div {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
}

.payments-webhooks-receipt-totals .is-final {
  font-weight: 800;
  font-size: 0.95rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
}

.payments-webhooks-receipt-pay {
  margin: 0.65rem 0 0;
  font-size: 0.78rem;
  color: #475569;
}

.payments-webhooks-th-receipt {
  width: 3.25rem;
  text-align: center;
}

.payments-webhooks-receipt-col {
  text-align: center;
  vertical-align: middle;
}

.payments-webhooks-receipt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(157, 181, 220, 0.95);
  background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
  color: #2f6fad;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.payments-webhooks-receipt-btn:hover,
.payments-webhooks-receipt-btn:focus-visible {
  border-color: rgba(47, 111, 173, 0.85);
  background: #e8f1ff;
  color: #1d4f86;
}

.payments-webhooks-receipt-btn:active {
  transform: translateY(1px);
}

.payments-webhooks-receipt-backdrop {
  position: fixed;
  top: calc(74px + env(safe-area-inset-top, 0px));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 32010;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(11, 28, 54, 0.5);
  backdrop-filter: blur(4px);
}

.payments-webhooks-receipt-backdrop[hidden] {
  display: none !important;
}

.payments-webhooks-receipt-modal {
  width: min(480px, 94vw);
  max-height: calc(100vh - 94px - env(safe-area-inset-top, 0px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(184, 205, 235, 0.96);
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 42%);
  box-shadow: 0 24px 60px rgba(15, 38, 71, 0.22);
}

.payments-webhooks-receipt-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0.65rem;
  border-bottom: 1px solid rgba(205, 219, 240, 0.9);
}

.payments-webhooks-receipt-modal-head-copy h3 {
  margin: 0;
  font-size: 1.05rem;
  color: #1f3d66;
}

.payments-webhooks-receipt-modal-head-copy p {
  margin: 0.25rem 0 0;
  font-size: 0.76rem;
  color: #64748b;
}

.payments-webhooks-receipt-modal-close {
  border: 1px solid rgba(157, 181, 220, 0.9);
  border-radius: 10px;
  background: #fff;
  color: #294d78;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}

.payments-webhooks-receipt-modal-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
}

.payments-webhooks-receipt-modal-toolbar .pro-btn-ghost,
.payments-webhooks-receipt-modal-toolbar .pro-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 42px;
  min-height: 42px;
  padding: 0 18px;
  font-size: 0.82rem;
  font-weight: 800;
  border-radius: var(--ra-radius-md, 12px);
  white-space: nowrap;
}

.payments-webhooks-receipt-modal-toolbar .pro-btn-ghost {
  border: 1px solid rgba(157, 181, 220, 0.95);
  background: #fff;
  color: #294d78;
  box-shadow: 0 1px 2px rgba(15, 38, 71, 0.06);
}

.payments-webhooks-receipt-modal-toolbar .pro-btn-ghost:hover:not(:disabled) {
  background: var(--ra-primary-soft, #eff6ff);
  border-color: #bfdbfe;
  color: var(--ra-primary, #2563eb);
}

.payments-webhooks-receipt-modal-toolbar .pro-btn-primary {
  padding: 0 20px;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);
}

.payments-webhooks-receipt-modal-body {
  overflow: auto;
  padding: 0 1rem 1rem;
}

.payments-webhooks-receipt-email-backdrop {
  position: fixed;
  top: calc(74px + env(safe-area-inset-top, 0px));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 32020;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(11, 28, 54, 0.55);
  backdrop-filter: blur(5px);
}

.payments-webhooks-receipt-email-backdrop[hidden] {
  display: none !important;
}

.payments-webhooks-receipt-email-dialog {
  width: min(420px, 94vw);
  border-radius: 16px;
  border: 1px solid rgba(184, 205, 235, 0.96);
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 48%);
  box-shadow: 0 24px 60px rgba(15, 38, 71, 0.24);
  overflow: hidden;
}

.payments-webhooks-receipt-email-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid rgba(205, 219, 240, 0.9);
}

.payments-webhooks-receipt-email-head h4 {
  margin: 0;
  font-size: 1rem;
  color: #1f3d66;
}

.payments-webhooks-receipt-email-head p {
  margin: 0.3rem 0 0;
  font-size: 0.76rem;
  color: #64748b;
  line-height: 1.4;
}

.payments-webhooks-receipt-email-close {
  border: 1px solid rgba(157, 181, 220, 0.9);
  border-radius: 10px;
  background: #fff;
  color: #294d78;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  flex-shrink: 0;
}

.payments-webhooks-receipt-email-form {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
}

.payments-webhooks-receipt-email-field {
  display: grid;
  gap: 0.35rem;
}

.payments-webhooks-receipt-email-field span {
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
}

.payments-webhooks-receipt-email-field input {
  width: 100%;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(157, 181, 220, 0.95);
  padding: 0 0.75rem;
  font-size: 0.9rem;
  color: #0f2747;
  background: #fff;
}

.payments-webhooks-receipt-email-field input:focus {
  outline: 2px solid rgba(37, 99, 235, 0.35);
  border-color: #60a5fa;
}

.payments-webhooks-receipt-email-feedback {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #b91c1c;
}

.payments-webhooks-receipt-email-feedback.is-success {
  color: #047857;
}

.payments-webhooks-receipt-email-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.payments-webhooks-receipt-email-actions .pro-btn-ghost,
.payments-webhooks-receipt-email-actions .pro-btn-primary {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.82rem;
  font-weight: 800;
}

.payments-webhooks-receipt-loading,
.payments-webhooks-receipt-empty {
  margin: 1rem 0;
  text-align: center;
  font-size: 0.85rem;
  color: #64748b;
}

.payments-webhooks-receipt-premium {
  border-radius: 14px;
  border: 1px solid rgba(205, 219, 240, 0.95);
  background: #fff;
  padding: 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.payments-webhooks-receipt-premium-brand {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(226, 232, 240, 0.95);
}

.payments-webhooks-receipt-premium-logo {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
}

.payments-webhooks-receipt-premium-brand h2 {
  margin: 0;
  font-size: 1.02rem;
  color: #0f172a;
}

.payments-webhooks-receipt-premium-brand p {
  margin: 0.2rem 0 0;
  font-size: 0.74rem;
  color: #64748b;
}

.payments-webhooks-receipt-premium-status {
  margin-left: auto;
  align-self: flex-start;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.payments-webhooks-receipt-premium-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 0.75rem;
  margin-bottom: 0.75rem;
}

.payments-webhooks-receipt-premium-meta span {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  font-weight: 700;
}

.payments-webhooks-receipt-premium-meta strong {
  font-size: 0.8rem;
  color: #1e293b;
}

.payments-webhooks-receipt-premium-block h4 {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  font-weight: 800;
}

.payments-webhooks-receipt-premium-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin-bottom: 0.5rem;
}

.payments-webhooks-receipt-premium-table th,
.payments-webhooks-receipt-premium-table td {
  padding: 0.38rem 0.3rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
}

.payments-webhooks-receipt-premium-table th {
  font-size: 0.68rem;
  text-transform: uppercase;
  color: #94a3b8;
  font-weight: 700;
}

.payments-webhooks-receipt-premium-num,
.payments-webhooks-receipt-premium-qty {
  text-align: right;
  white-space: nowrap;
}

.payments-webhooks-receipt-premium-summary {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(248, 250, 252, 0.98));
  border: 1px solid rgba(191, 219, 254, 0.65);
}

/* Bloco premium da gorjeta no recibo (modal e impressão) */
.payments-webhooks-receipt-tip {
  margin: 0.75rem 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid rgba(217, 119, 6, 0.28);
  position: relative;
  overflow: hidden;
}

.payments-webhooks-receipt-tip::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 130px;
  height: 130px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.3), transparent 60%);
  filter: blur(8px);
  pointer-events: none;
}

.payments-webhooks-receipt-tip-head {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.payments-webhooks-receipt-tip-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.payments-webhooks-receipt-tip-icon svg {
  width: 16px;
  height: 16px;
}

.payments-webhooks-receipt-tip-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.payments-webhooks-receipt-tip-copy strong {
  font-size: 0.82rem;
  font-weight: 700;
  color: #78350f;
  letter-spacing: -0.005em;
}

.payments-webhooks-receipt-tip-copy span {
  font-size: 0.72rem;
  color: #92400e;
}

.payments-webhooks-receipt-tip-pill {
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #b45309, #f59e0b);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 3px 10px -3px rgba(180, 83, 9, 0.5);
}

.payments-webhooks-receipt-tip-amount {
  font-size: 1.65rem;
  font-weight: 800;
  color: #b45309;
  letter-spacing: -0.022em;
  margin: 10px 0 6px;
  position: relative;
  z-index: 1;
}

.payments-webhooks-receipt-tip-list {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px dashed rgba(217, 119, 6, 0.32);
  position: relative;
  z-index: 1;
}

.payments-webhooks-receipt-tip-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #78350f;
}

.payments-webhooks-receipt-tip-list li strong {
  font-weight: 700;
  color: #92400e;
}

.payments-webhooks-receipt-premium-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: #475569;
  margin-bottom: 0.25rem;
}

.payments-webhooks-receipt-premium-summary-row.is-tip strong {
  color: #b45309;
}

.payments-webhooks-receipt-premium-summary-row.is-total {
  margin: 0.35rem 0 0;
  padding-top: 0.4rem;
  border-top: 1px dashed rgba(148, 163, 184, 0.5);
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
}

.payments-webhooks-receipt-premium-pay {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(226, 232, 240, 0.95);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.76rem;
}

.payments-webhooks-receipt-premium-pay span {
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.65rem;
  font-weight: 700;
}

.payments-webhooks-receipt-premium-thanks {
  margin: 0.85rem 0 0;
  text-align: center;
  font-size: 0.82rem;
  color: #64748b;
  font-style: italic;
}

.payments-webhooks-receipt-premium-adjustment {
  margin: 0.65rem 0 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(14, 165, 233, 0.35);
  background: rgba(240, 249, 255, 0.75);
}

.payments-webhooks-receipt-premium-adjustment h4 {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0e7490;
}

.payments-webhooks-receipt-premium-adjustment-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
  color: #475569;
}

.payments-webhooks-receipt-premium-adjustment-row.is-charged strong {
  color: #0f172a;
  font-size: 0.92rem;
}

.payments-webhooks-receipt-premium-adjustment-row .is-struck {
  text-decoration: line-through;
  color: #94a3b8;
}

.payments-webhooks-receipt-premium-adjustment-reason,
.payments-webhooks-receipt-premium-adjustment-note {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #334155;
}

.payments-webhooks-receipt-premium-adjustment-reason span,
.payments-webhooks-receipt-premium-adjustment-note span {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 0.1rem;
}

.payments-webhooks-receipt-premium-adjustment-note {
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

@media (max-width: 520px) {
  .payments-webhooks-receipt-premium-meta {
    grid-template-columns: 1fr;
  }
}

.payments-webhooks-detail-split-cell.is-operational {
  background: linear-gradient(135deg, rgba(71, 85, 105, 0.08), rgba(100, 116, 139, 0.05));
  border-color: rgba(100, 116, 139, 0.22);
}

.payments-webhooks-detail-split-cell.is-tip {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(245, 158, 11, 0.08));
  border-color: rgba(245, 158, 11, 0.28);
}

.payments-webhooks-detail-split-cell.is-tip strong {
  color: #b45309;
}

.payments-webhooks-detail-track[data-accent="tip"] {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(245, 158, 11, 0.04));
  border-color: rgba(245, 158, 11, 0.3);
}

.payments-webhooks-detail-track[data-accent="tip"] .payments-webhooks-detail-track-pct {
  background: rgba(251, 191, 36, 0.25);
  color: #b45309;
}

.payments-webhooks-detail-track[data-accent="tip"] .payments-webhooks-detail-split-cell.is-total {
  background: linear-gradient(135deg, #d97706, #b45309);
  box-shadow: 0 10px 24px rgba(217, 119, 6, 0.2);
}

.payments-webhooks-tip-prof-list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.payments-webhooks-tip-prof-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  background: rgba(251, 191, 36, 0.12);
  font-size: 0.78rem;
}

.payments-webhooks-tip-prof-list li strong {
  font-variant-numeric: tabular-nums;
  color: #b45309;
}

.payments-webhooks-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.7rem;
  background: rgba(248, 251, 255, 0.96);
}

.payments-webhooks-page {
  min-width: 30px;
  min-height: 30px;
  border: 1px solid rgba(176, 197, 229, 0.95);
  border-radius: 8px;
  background: #fff;
  color: #33557f;
  margin-right: 0.3rem;
  cursor: pointer;
}

.payments-webhooks-page.is-active {
  background: #2f66d3;
  border-color: #2f66d3;
  color: #fff;
}

.payments-webhooks-detail-backdrop {
  position: fixed;
  top: calc(74px + env(safe-area-inset-top, 0px));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 32000;
  background: rgba(11, 28, 54, 0.46);
  padding: 1rem;
  display: grid;
  place-items: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.payments-webhooks-detail-backdrop[hidden] {
  display: none !important;
}

.payments-webhooks-detail-modal {
  width: min(1180px, 96vw);
  max-height: calc(100vh - 94px - env(safe-area-inset-top, 0px));
  overflow: auto;
  border-radius: 24px;
  border: 1px solid rgba(184, 205, 235, 0.96);
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(99, 102, 241, 0.06), transparent 60%),
    radial-gradient(900px 500px at 110% -10%, rgba(16, 185, 129, 0.05), transparent 60%),
    linear-gradient(180deg, #fbfdff 0%, #ffffff 60%);
  padding: 1.25rem 1.5rem;
  margin: 0;
  box-shadow:
    0 30px 80px -30px rgba(15, 23, 42, 0.28),
    0 18px 36px -18px rgba(99, 102, 241, 0.12);
}

.payments-webhooks-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 2;
  margin: -0.25rem -0.5rem 0.5rem;
  padding: 0.65rem 0.5rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 70%, rgba(255, 255, 255, 0.0));
  backdrop-filter: blur(8px);
}

.payments-webhooks-detail-head h3 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.018em;
  color: #0f172a;
  font-weight: 700;
}

.payments-webhooks-detail-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(203, 213, 225, 0.95);
  background: #fff;
  color: #475569;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.payments-webhooks-detail-close:hover {
  color: #0f172a;
  border-color: rgba(99, 102, 241, 0.6);
  transform: rotate(90deg);
}

.payments-webhooks-detail-close svg { width: 18px; height: 18px; }

.payments-webhooks-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.payments-webhooks-detail-content pre {
  border: 1px solid rgba(209, 224, 244, 0.95);
  border-radius: 12px;
  background: #f8fbff;
  padding: 0.75rem;
  overflow: auto;
  color: #1f3d66;
  font-size: 0.72rem;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .payments-webhooks-detail-backdrop {
    top: calc(64px + env(safe-area-inset-top, 0px));
    place-items: center;
    padding-top: 0.75rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  }

  .payments-webhooks-detail-modal {
    width: min(96vw, 900px);
    max-height: calc(100vh - 80px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================ */
/* Premium payment detail modal (redesign Stripe / Linear / Wallet) */
/* Namespace: .phx-                                              */
/* ============================================================ */

.phx-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  color: #0f172a;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.phx-detail h4 {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: #0f172a;
  font-weight: 700;
}

.phx-detail h5 {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  font-weight: 700;
}

.phx-detail strong { font-weight: 700; }

/* ---------------- avatar with initials ---------------- */
.phx-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--phx-avatar-size, 48px);
  height: var(--phx-avatar-size, 48px);
  border-radius: 999px;
  font-size: calc(var(--phx-avatar-size, 48px) * 0.36);
  font-weight: 700;
  color: #fff;
  background:
    linear-gradient(135deg,
      hsl(var(--phx-avatar-hue, 220deg) 70% 56%) 0%,
      hsl(calc(var(--phx-avatar-hue, 220deg) + 28deg) 75% 42%) 100%);
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.35);
  flex-shrink: 0;
  overflow: hidden;
  isolation: isolate;
}

.phx-avatar.has-ring {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 5px hsl(var(--phx-avatar-hue, 220deg) 75% 56% / 0.5),
    0 6px 16px -8px rgba(15, 23, 42, 0.35);
}

.phx-avatar-initials {
  position: relative;
  z-index: 1;
}

/* Foto real do cliente/profissional (fica por cima das iniciais; se a imagem
 * falhar, o `onerror` esconde o <img> e as iniciais voltam a aparecer). */
.phx-avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 2;
  background: transparent;
}

.phx-avatar-online {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 28%;
  height: 28%;
  min-width: 8px;
  min-height: 8px;
  border-radius: 999px;
  background: #10b981;
  box-shadow: 0 0 0 2px #fff;
  z-index: 3;
}

/* ---------------- pills ---------------- */
.phx-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(203, 213, 225, 0.7);
  font-size: 0.8rem;
  font-weight: 600;
  color: #1e293b;
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.phx-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.phx-pill-icon svg {
  width: 100%;
  height: 100%;
}

.phx-pill-method[data-tone="pix"] {
  background: linear-gradient(135deg, rgba(50, 188, 173, 0.12), rgba(20, 184, 166, 0.10));
  border-color: rgba(50, 188, 173, 0.32);
  color: #0e7f6a;
}

.phx-pill-method[data-tone="card"] {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(59, 130, 246, 0.10));
  border-color: rgba(99, 102, 241, 0.32);
  color: #4338ca;
}

.phx-pill-method[data-tone="cash"] {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(217, 119, 6, 0.10));
  border-color: rgba(217, 119, 6, 0.32);
  color: #92400e;
}

.phx-pill-provider {
  background: linear-gradient(135deg, rgba(0, 158, 227, 0.10), rgba(0, 158, 227, 0.05));
  border-color: rgba(0, 158, 227, 0.32);
  color: #006fa1;
}

.phx-pill-credit {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(20, 184, 166, 0.10));
  border-color: rgba(5, 150, 105, 0.34);
  color: #065f46;
}

/* ---------------- status pill ---------------- */
.phx-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
}

.phx-status-pill[data-tone="approved"] {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  border-color: rgba(5, 150, 105, 0.34);
  color: #065f46;
}

.phx-status-pill[data-tone="pending"] {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-color: rgba(217, 119, 6, 0.34);
  color: #92400e;
}

.phx-status-pill[data-tone="expired"],
.phx-status-pill[data-tone="cancelled"] {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  border-color: rgba(220, 38, 38, 0.34);
  color: #991b1b;
}

.phx-status-pill[data-tone="neutral"] {
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  border-color: rgba(100, 116, 139, 0.34);
  color: #334155;
}

.phx-status-pill-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
}

.phx-status-pill-icon svg {
  width: 100%;
  height: 100%;
}

/* ---------------- hero ---------------- */
.phx-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr) minmax(88px, auto) minmax(0, 1fr);
  gap: 0.75rem 1rem;
  padding: 1.25rem 1.35rem;
  padding-top: 1.5rem;
  border-radius: 20px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background:
    radial-gradient(600px 280px at 0% 0%, rgba(99, 102, 241, 0.08), transparent 60%),
    radial-gradient(560px 280px at 100% 100%, rgba(16, 185, 129, 0.06), transparent 60%),
    rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow:
    0 10px 28px -16px rgba(99, 102, 241, 0.16),
    0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: visible;
}

.phx-hero[data-no-seal="1"] {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
}

/* Selo de status (pago / pendente / cancelado) — coluna entre pagamento e profissional. */
.phx-hero-seal-col {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: 0;
  padding: 0 0.15rem;
}

.phx-hero-status-seal {
  position: relative;
  z-index: 2;
  margin: 0;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.12));
}

.phx-hero-status-seal img {
  display: block;
  width: auto;
  height: auto;
  max-width: 104px;
  max-height: 104px;
  object-fit: contain;
}

.phx-hero-status-seal[data-tone="approved"] img,
.phx-hero-status-seal[data-tone="credit"] img {
  max-width: 96px;
  max-height: 96px;
  transform: rotate(-6deg);
}

.phx-hero-status-seal[data-tone="pending"] img {
  max-width: 118px;
  max-height: 88px;
  transform: rotate(-4deg);
}

.phx-hero-status-seal[data-tone="cancelled"] img,
.phx-hero-status-seal[data-tone="expired"] img {
  max-width: 128px;
  max-height: 58px;
  transform: rotate(-14deg);
  opacity: 0.94;
}

@media (max-width: 900px) {
  .phx-hero-seal-col {
    justify-content: flex-start;
    padding: 0;
  }

  .phx-hero-status-seal img {
    max-width: 96px;
    max-height: 96px;
  }

  .phx-hero-status-seal[data-tone="pending"] img {
    max-width: 110px;
    max-height: 84px;
  }

  .phx-hero-status-seal[data-tone="cancelled"] img,
  .phx-hero-status-seal[data-tone="expired"] img {
    max-width: 120px;
    max-height: 56px;
  }
}

.phx-hero-customer {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.phx-hero-customer-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.phx-hero-customer-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.phx-hero-customer-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #0f172a;
}

.phx-hero-customer-verified {
  display: inline-flex;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  padding: 2px;
}

.phx-hero-customer-verified svg {
  width: 100%;
  height: 100%;
}

.phx-hero-customer-sub {
  font-size: 0.78rem;
  color: #64748b;
}

.phx-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: center;
}

.phx-hero-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #334155;
  font-weight: 500;
}

.phx-hero-meta-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: #64748b;
}

.phx-hero-meta-icon svg {
  width: 100%;
  height: 100%;
}

.phx-hero-professional {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right;
  align-items: flex-end;
}

.phx-hero-prof-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  font-weight: 700;
}

.phx-hero-prof-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  color: #0f172a;
  font-weight: 700;
}

.phx-hero-prof-unit {
  font-size: 0.85rem;
  color: #334155;
  font-weight: 600;
}

.phx-hero-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  min-width: 160px;
}

.phx-hero-total[data-tone="approved"],
.phx-hero-total:not([data-tone]) {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border-color: rgba(16, 185, 129, 0.32);
}

.phx-hero-total[data-tone="approved"] span,
.phx-hero-total:not([data-tone]) span {
  color: #047857;
}

.phx-hero-total[data-tone="approved"] strong,
.phx-hero-total:not([data-tone]) strong {
  color: #065f46;
}

.phx-hero-total[data-tone="pending"] {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border-color: rgba(217, 119, 6, 0.38);
}

.phx-hero-total[data-tone="pending"] span {
  color: #b45309;
}

.phx-hero-total[data-tone="pending"] strong {
  color: #92400e;
}

.phx-hero-total[data-tone="expired"],
.phx-hero-total[data-tone="cancelled"] {
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  border-color: rgba(220, 38, 38, 0.32);
}

.phx-hero-total[data-tone="expired"] span,
.phx-hero-total[data-tone="cancelled"] span {
  color: #b91c1c;
}

.phx-hero-total[data-tone="expired"] strong,
.phx-hero-total[data-tone="cancelled"] strong {
  color: #991b1b;
}

.phx-hero-total[data-tone="neutral"] {
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  border-color: rgba(100, 116, 139, 0.32);
}

.phx-hero-total[data-tone="neutral"] span {
  color: #475569;
}

.phx-hero-total[data-tone="neutral"] strong {
  color: #334155;
}

.phx-hero-total[data-credit="1"] {
  background: linear-gradient(135deg, #ecfdf5, #a7f3d0);
  border-color: rgba(16, 185, 129, 0.32);
}

.phx-hero-total[data-credit="1"] span {
  color: #047857;
}

.phx-hero-total[data-credit="1"] strong {
  color: #065f46;
}

.phx-hero-total span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.phx-hero-total strong {
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* ---------------- KPI grid ---------------- */
.phx-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.65rem;
}

.phx-kpi-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
}

.phx-kpi-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.12);
}

.phx-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(226, 232, 240, 0.6);
  color: #64748b;
  flex-shrink: 0;
}

.phx-kpi-icon svg {
  width: 18px;
  height: 18px;
}

.phx-kpi-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.phx-kpi-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #64748b;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phx-kpi-value {
  font-size: 1.05rem;
  letter-spacing: -0.018em;
  color: #0f172a;
  font-weight: 700;
}

.phx-kpi-sub {
  font-size: 0.66rem;
  color: #94a3b8;
  font-style: normal;
}

/* Tones */
.phx-kpi-card[data-tone="sky"] .phx-kpi-icon { background: rgba(56, 189, 248, 0.14); color: #0284c7; }
.phx-kpi-card[data-tone="sky"] .phx-kpi-value { color: #0c4a6e; }

.phx-kpi-card[data-tone="emerald"] .phx-kpi-icon { background: rgba(16, 185, 129, 0.14); color: #047857; }
.phx-kpi-card[data-tone="emerald"] .phx-kpi-value { color: #064e3b; }

.phx-kpi-card[data-tone="violet"] .phx-kpi-icon { background: rgba(139, 92, 246, 0.14); color: #6d28d9; }
.phx-kpi-card[data-tone="violet"] .phx-kpi-value { color: #4c1d95; }

.phx-kpi-card[data-tone="amber"] .phx-kpi-icon { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.phx-kpi-card[data-tone="amber"] .phx-kpi-value { color: #78350f; }

.phx-kpi-card[data-tone="orange"] .phx-kpi-icon { background: rgba(249, 115, 22, 0.16); color: #c2410c; }
.phx-kpi-card[data-tone="orange"] .phx-kpi-value { color: #7c2d12; }

.phx-kpi-card[data-tone="slate"] .phx-kpi-icon { background: rgba(100, 116, 139, 0.16); color: #475569; }
.phx-kpi-card[data-tone="slate"] .phx-kpi-value { color: #1e293b; }

/* ---------------- main grid (content + sidebar) ---------------- */
.phx-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  gap: 1rem;
}

.phx-main-col,
.phx-side-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* ---------------- generic card ---------------- */
.phx-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 18px;
  padding: 1rem 1.05rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.phx-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.65rem;
}

.phx-card-head h4 {
  flex: 1;
  font-size: 0.95rem;
}

/* ---------------- checkout table ---------------- */
.phx-checkout-table-wrap {
  overflow-x: auto;
}

.phx-checkout-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.phx-checkout-table thead th {
  text-align: left;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #94a3b8;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
}

.phx-checkout-table thead th.phx-checkout-num,
.phx-checkout-num { text-align: right; }

.phx-checkout-section-head th {
  padding: 14px 8px 6px !important;
  font-size: 0.7rem !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #475569 !important;
  border-bottom: none !important;
}

.phx-checkout-section-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  color: #6366f1;
  vertical-align: middle;
}

.phx-checkout-section-icon svg {
  width: 100%;
  height: 100%;
}

.phx-checkout-table tbody td {
  padding: 8px;
  border-bottom: 1px dashed rgba(226, 232, 240, 0.7);
  color: #1e293b;
}

.phx-checkout-name { font-weight: 600; color: #0f172a; }
.phx-checkout-qty { color: #64748b; }
.phx-checkout-num.is-total { font-weight: 700; color: #0f172a; }

.phx-checkout-subtotal td {
  padding: 12px 8px 4px;
  font-weight: 700;
  color: #0f172a;
  border-top: 1px solid rgba(226, 232, 240, 0.95);
}

.phx-checkout-subtotal td:first-child {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: #64748b;
}

/* ---------------- tip (golden) ---------------- */
.phx-tip-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(380px 200px at 0% 0%, rgba(251, 191, 36, 0.18), transparent 60%),
    linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid rgba(217, 119, 6, 0.28);
}

.phx-tip-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.35), transparent 60%);
  filter: blur(10px);
  pointer-events: none;
}

.phx-tip-head {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.phx-tip-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.phx-tip-icon svg {
  width: 20px;
  height: 20px;
}

.phx-tip-head h4 {
  color: #78350f;
  font-size: 0.95rem;
}

.phx-tip-head p {
  margin: 0;
  font-size: 0.75rem;
  color: #92400e;
  font-weight: 500;
}

.phx-tip-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #b45309, #f59e0b);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px -4px rgba(180, 83, 9, 0.5);
}

.phx-tip-amount {
  font-size: 1.9rem;
  font-weight: 800;
  color: #b45309;
  letter-spacing: -0.025em;
  margin: 12px 0 8px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.phx-tip-list {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px dashed rgba(217, 119, 6, 0.32);
}

.phx-tip-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #78350f;
}

.phx-tip-prof-name { font-weight: 500; }

/* ---------------- commission ---------------- */
.phx-commission-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.phx-commission-card[data-accent="service"] .phx-commission-head-icon { color: #2563eb; }
.phx-commission-card[data-accent="product"] .phx-commission-head-icon { color: #16a34a; }

.phx-commission-head-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
}

.phx-commission-head-icon svg { width: 100%; height: 100%; }

.phx-commission-item {
  padding: 10px 0;
  border-bottom: 1px dashed rgba(226, 232, 240, 0.95);
}

.phx-commission-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.phx-commission-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: #0f172a;
}

.phx-commission-item-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: #94a3b8;
}

.phx-commission-item-icon svg { width: 100%; height: 100%; }

.phx-commission-item-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
  margin: 0;
  font-size: 0.8rem;
}

.phx-commission-item-grid > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.phx-commission-item-grid dt {
  color: #64748b;
  font-weight: 500;
}

.phx-commission-item-grid dt em {
  color: #94a3b8;
  font-style: normal;
}

.phx-commission-item-grid dd {
  margin: 0;
  color: #0f172a;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------------- summary sidebar ---------------- */
.phx-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.phx-summary-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  font-size: 0.85rem;
  color: #1e293b;
}

.phx-summary-list li span { color: #475569; font-weight: 500; }
.phx-summary-list li strong { color: #0f172a; font-weight: 700; white-space: nowrap; }

.phx-summary-deduction { color: #b91c1c !important; }
.phx-summary-deduction span,
.phx-summary-deduction strong { color: #b91c1c; }

.phx-summary-final {
  padding-top: 10px;
  border-top: 1px dashed rgba(226, 232, 240, 0.95);
  font-weight: 700;
}

.phx-summary-final span { color: #047857 !important; font-weight: 700; }
.phx-summary-final strong { color: #047857; font-size: 0.95rem; }

.phx-summary-tip span,
.phx-summary-tip strong { color: #b45309; }

/* ---------------- timeline ---------------- */
.phx-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-reset: phx-tl;
}

.phx-timeline-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  position: relative;
}

.phx-timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 22px;
  bottom: -14px;
  width: 2px;
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.4), rgba(226, 232, 240, 0.6));
}

.phx-timeline-dot {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px #fff;
}

.phx-timeline-item.is-done .phx-timeline-dot {
  background: linear-gradient(135deg, #10b981, #047857);
}

.phx-timeline-dot svg {
  width: 12px;
  height: 12px;
}

.phx-timeline-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.phx-timeline-time {
  font-size: 0.7rem;
  text-transform: none;
  color: #94a3b8;
  font-weight: 500;
}

.phx-timeline-body strong {
  font-size: 0.85rem;
  color: #0f172a;
}

/* ---------------- footer ---------------- */
.phx-detail-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 0.25rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.85);
  border: 1px solid rgba(226, 232, 240, 0.95);
}

.phx-detail-footer-trust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #475569;
}

.phx-detail-footer-trust-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: #047857;
}

.phx-detail-footer-trust-icon svg { width: 100%; height: 100%; }

.phx-detail-footer-actions {
  display: flex;
  gap: 8px;
}

.phx-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid rgba(203, 213, 225, 0.95);
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.phx-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -6px rgba(15, 23, 42, 0.15);
  border-color: rgba(99, 102, 241, 0.6);
}

.phx-btn svg { width: 14px; height: 14px; }

.phx-btn-ghost { background: #fff; }

/* ---------------- technical (collapsible) ---------------- */
.phx-technical {
  margin-top: 0.25rem;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.85);
}

.phx-technical > summary {
  cursor: pointer;
  padding: 12px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.phx-technical > summary::-webkit-details-marker { display: none; }

.phx-technical > summary::before {
  content: '▸';
  font-size: 10px;
  color: #94a3b8;
  transition: transform 0.2s ease;
}

.phx-technical[open] > summary::before { transform: rotate(90deg); }

.phx-technical-body {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.phx-technical-body h5 {
  margin: 0;
  font-size: 0.72rem;
  color: #94a3b8;
}

.phx-technical-body pre {
  margin: 0;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  font-size: 0.7rem;
  color: #1e293b;
  max-height: 220px;
  overflow: auto;
}

/* ---------------- responsive ---------------- */
@media (max-width: 980px) {
  .phx-hero { grid-template-columns: 1fr; gap: 0.8rem; }
  .phx-hero-seal-col { justify-content: center; padding: 0.15rem 0; }
  .phx-hero-professional { text-align: left; align-items: flex-start; }
  .phx-hero-total { align-items: flex-start; }
  .phx-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .phx-main-grid { grid-template-columns: 1fr; }
  .phx-commission-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .phx-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phx-commission-item-grid { grid-template-columns: 1fr; }
  .phx-detail-footer { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Pagamentos e webhooks — layout responsivo (mobile / telas estreitas) */
@media (max-width: 900px) {
  .admin-page[data-admin-panel-active="pagamentos-webhooks"] .admin-panel[data-admin-panel="pagamentos-webhooks"] {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .payments-webhooks-shell {
    padding: max(0.75rem, env(safe-area-inset-left, 0px)) max(0.75rem, env(safe-area-inset-right, 0px)) 1rem;
    padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
    gap: 0.85rem;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .payments-webhooks-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .payments-webhooks-head > div:first-child {
    min-width: 0;
  }

  .payments-webhooks-head h2 {
    font-size: clamp(1.15rem, 4.5vw, 1.35rem);
    line-height: 1.25;
  }

  .payments-webhooks-head .admin-inline-status {
    align-self: stretch;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.4;
    padding: 0.55rem 0.75rem;
    min-height: auto;
    box-sizing: border-box;
    word-break: break-word;
  }

  .payments-webhooks-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }

  .payments-webhooks-filter-card {
    padding: 0.75rem;
  }

  .payments-webhooks-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payments-webhooks-detail-grid {
    grid-template-columns: 1fr;
  }

  .payments-webhooks-pagination {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .payments-webhooks-pagination > div {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    padding-bottom: 4px;
    max-width: 100%;
    justify-content: flex-start;
  }

  .payments-webhooks-table-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }

  .payments-webhooks-table {
    min-width: 840px;
  }

  .payments-webhooks-mono {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .payments-webhooks-kpi-grid {
    grid-template-columns: 1fr;
  }

  .payments-webhooks-filters {
    grid-template-columns: 1fr;
  }

  .payments-webhooks-filters select[multiple] {
    min-height: 120px;
    font-size: 16px;
  }

  .payments-webhooks-filters input,
  .payments-webhooks-filters select:not([multiple]) {
    font-size: 16px;
  }

  .payments-webhooks-filter-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .payments-webhooks-filter-actions .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .payments-webhooks-pagination {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .payments-webhooks-pagination label select {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }
}

/* ——— POS / Maquininhas (config operador → Pagamentos) ——— */
.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-section {
  position: relative;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-hero-copy strong {
  display: block;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (min-width: 769px) and (max-width: 1200px) {
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-table-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-table {
    min-width: 1120px;
  }
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ra-primary, #2563eb), #22c55e 55%, rgba(37, 99, 235, 0.35));
  opacity: 0.85;
  pointer-events: none;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px 24px;
  padding-bottom: 4px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-hero-copy {
  flex: 1 1 280px;
  min-width: 0;
  max-width: 100%;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ra-primary, #2563eb);
  margin-bottom: 4px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-lead {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
  max-width: 54ch;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-field-compact {
  min-width: 200px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-hero-actions .pos-terminal-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--ra-radius-md, 14px);
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  color: #f8fbff;
  background: linear-gradient(135deg, #1746a2 0%, #2563eb 55%, #1d4ed8 100%);
  border: 1px solid rgba(24, 73, 170, 0.9);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-hero-actions .pos-terminal-add-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #143d8f 0%, #1f57d6 55%, #1944be 100%);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.28);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-hero-actions .pos-terminal-add-btn:active:not(:disabled) {
  transform: translateY(0);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-hero-actions .pos-terminal-add-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-subtabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  margin-top: 14px;
  margin-bottom: 0;
  background: #f8fafc;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: 999px;
  box-shadow: var(--ra-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-subtab {
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ra-text-muted, #64748b);
  background: transparent;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-subtab:hover {
  color: var(--ra-text, #0f172a);
  background: #ffffff;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-subtab.is-active {
  color: var(--ra-primary, #2563eb);
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-shell {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 4px 0 8px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-page-title {
  margin: 4px 0 8px;
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-zone {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-zone-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 20px;
  align-items: start;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-split--single {
  grid-template-columns: 1fr;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-config-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 4px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-config-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-card {
  background: #fff;
  border: none;
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-card--elevated {
  border: none;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-zone-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-zone-card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.08);
  color: var(--ra-primary, #2563eb);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-zone-card-icon--unit {
  background: rgba(99, 102, 241, 0.1);
  color: #4f46e5;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-zone-card-desc {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #64748b;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-col-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-card.is-dimmed {
  opacity: 0.55;
  pointer-events: none;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-card--mp {
  border: 2px dashed rgba(0, 158, 227, 0.28);
  background: linear-gradient(165deg, rgba(0, 158, 227, 0.07) 0%, #fff 42%);
  padding: 26px 28px;
  min-height: 100%;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-mp-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-mp-head-copy {
  flex: 1;
  min-width: 0;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-mp-logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 158, 227, 0.25);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-mp-learn-more {
  flex-shrink: 0;
  align-self: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ra-primary, #2563eb);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-mp-block {
  padding: 16px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-mp-block:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-mp-block--alert {
  margin: 8px 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 0;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-mp-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-mp-block-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-mp-block-head .pos-mp-block-title {
  margin-bottom: 0;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-mp-field-label,
.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-mp-toggle-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 10px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-mp-toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-pos-inner.is-hidden,
.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-card.is-hidden,
.admin-page[data-admin-panel-active="configuracoes-operador"] #posConfigInstallmentsBlock.is-hidden {
  display: none !important;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-mode-fieldset {
  border: 0;
  padding: 0;
  margin: 16px 0;
  display: grid;
  gap: 10px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-mode-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-mode-card:has(input:checked) {
  background: rgba(37, 99, 235, 0.08);
  box-shadow: inset 0 0 0 2px var(--ra-primary, #2563eb);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-mode-copy strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-mode-copy small {
  color: #64748b;
  line-height: 1.45;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-installment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 0;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-installment-chip {
  min-width: 52px;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: none;
  background: #f1f5f9;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  color: #475569;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-installment-chip:hover:not(:disabled) {
  background: #e2e8f0;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-installment-chip.is-active {
  background: var(--ra-primary, #2563eb);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-segmented {
  display: inline-flex;
  padding: 4px;
  border-radius: 12px;
  background: #f1f5f9;
  gap: 4px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-segmented-item {
  position: relative;
  margin: 0;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-segmented-item input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-segmented-item span {
  display: block;
  min-width: 110px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: #64748b;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-segmented-item:has(input:checked) span {
  background: #fff;
  color: var(--ra-primary, #2563eb);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-unit-field-span {
  grid-column: 1 / -1;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-config-hints {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(251, 191, 36, 0.12);
  font-size: 13px;
  color: #92400e;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-config-hints p {
  margin: 0 0 6px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-head-copy strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0 18px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-kpi-card {
  padding: 14px 16px;
  border-radius: 14px;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-kpi-card--blue { background: rgba(37, 99, 235, 0.06); }
.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-kpi-card--green { background: rgba(22, 163, 74, 0.08); }
.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-kpi-card--amber { background: rgba(245, 158, 11, 0.1); }
.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-kpi-card--purple { background: rgba(124, 58, 237, 0.08); }

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-kpi-card-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-kpi-card-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  margin-top: 2px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 24px;
  color: #64748b;
  border: none;
  border-radius: 18px;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 22px 20px;
  border: none;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 6px 28px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-card:hover {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-card-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-card-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-card-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #475569;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-card-head {
  flex: 1;
  min-width: 0;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-card-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-card-sub {
  margin: 0 0 2px;
  font-size: 13px;
  color: #64748b;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-card-id {
  margin: 0;
  font-size: 11px;
  color: #94a3b8;
  font-family: ui-monospace, monospace;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-status-badge {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-status-badge--lg {
  padding: 8px 14px;
  font-size: 12px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-status-badge--green {
  background: #dcfce7;
  color: #15803d;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-status-badge--neutral {
  background: #f1f5f9;
  color: #64748b;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-status-badge--amber {
  background: #fef3c7;
  color: #b45309;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-status-badge--muted {
  background: #f1f5f9;
  color: #94a3b8;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-card-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f8fafc;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-stat-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin-bottom: 4px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-stat-value {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-stat-sub {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-stat--sync.pos-terminal-stat--ok .pos-terminal-stat-value { color: #15803d; }
.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-stat--sync.pos-terminal-stat--pending .pos-terminal-stat-value { color: #b45309; }
.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-stat--sync.pos-terminal-stat--error .pos-terminal-stat-value { color: #b91c1c; }

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-action {
  padding: 11px 14px;
  border-radius: 12px;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-action--online {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-action--offline {
  background: #f1f5f9;
  color: #475569;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-menu-trigger {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: #f1f5f9;
  color: #475569;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-card-menu--icon {
  position: relative;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-card-menu summary {
  list-style: none;
  cursor: pointer;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-card-menu summary::-webkit-details-marker {
  display: none;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-card-menu-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--ra-shadow-md, 0 8px 20px rgba(15, 23, 42, 0.1));
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-card-menu-panel button {
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-card-menu-panel button:hover {
  background: #f1f5f9;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminal-card-menu-panel button.is-danger {
  color: #b91c1c;
}

@media (max-width: 1100px) {
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-split:not(.pos-premium-split--single) {
    grid-template-columns: 1fr;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-grid-2 {
    grid-template-columns: 1fr;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-grid {
    grid-template-columns: 1fr;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-kpi-strip {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-premium-card--mp {
    padding: 22px 20px;
  }
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-panel {
  margin-top: 14px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-table-card {
  border: 1px solid var(--ra-border, #e5e7eb);
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: var(--ra-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 12px 14px;
  background: #f8fafc;
  border-bottom: 1px solid var(--ra-border, #e5e7eb);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-table tbody td {
  padding: 14px;
  border-bottom: 1px solid #f1f5f9;
  color: var(--ra-text, #0f172a);
  vertical-align: middle;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-table-mono {
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--ra-text-muted, #64748b);
  word-break: break-all;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-stack {
  line-height: 1.4;
  font-size: 13px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-table-empty {
  padding: 28px 16px !important;
  text-align: center;
  color: var(--ra-text-muted, #64748b);
  font-size: 13px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-actions {
  white-space: nowrap;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-actions .btn {
  padding: 6px 10px;
  font-size: 12px;
  min-height: 32px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-btn-danger {
  color: #b91c1c !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-btn-danger:hover {
  background: #fef2f2 !important;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-readonly {
  font-size: 12px;
  color: var(--ra-text-muted, #64748b);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-pill--green {
  color: #166534;
  background: #dcfce7;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-pill--amber {
  color: #9a3412;
  background: #ffedd5;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-pill--red {
  color: #991b1b;
  background: #fee2e2;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-pill--neutral {
  color: #475569;
  background: #f1f5f9;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-pill--muted {
  color: #64748b;
  background: #f8fafc;
  font-weight: 600;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-req {
  color: #dc2626;
  font-weight: 700;
}

.pos-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 38000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  align-content: start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(0.75rem, env(safe-area-inset-top, 0px)) max(0.75rem, env(safe-area-inset-right, 0px)) max(0.75rem, env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px));
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.pos-modal-backdrop--premium {
  padding: 1rem 1.25rem 1.25rem;
}

.pos-modal-backdrop[hidden] {
  display: none !important;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal {
  width: min(520px, 100%);
  max-height: min(90vh, 720px);
  overflow: auto;
  margin: 0;
  padding: 0;
  border-radius: 16px;
  border: 1px solid var(--ra-border, #e5e7eb);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal.pos-modal--add,
.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal.pos-modal--premium {
  width: min(760px, 100%);
  max-height: min(92vh, calc(var(--reservaai-vh, 100vh) - var(--admin-topbar-stack-height, 4.25rem) - 2rem));
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal--premium {
  background: var(--ra-bg, #f8fafc);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.16);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-head--premium {
  background: #fff;
  border-bottom: 1px solid var(--ra-border, #e5e7eb);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-head-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ra-primary, #2563eb);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-body--premium {
  padding: 16px 20px 12px;
  gap: 14px;
  background: var(--ra-bg, #f8fafc);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-foot--premium {
  background: #fff;
  border-top: 1px solid var(--ra-border, #e5e7eb);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-section {
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: var(--ra-radius-md, 14px);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  padding: 14px 16px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 12px;
  margin-bottom: 10px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex: 0 0 30px;
  color: var(--ra-primary, #2563eb);
  background: var(--ra-primary-soft, rgba(37, 99, 235, 0.1));
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-section-icon--mp {
  color: #4f46e5;
  background: rgba(99, 102, 241, 0.12);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-section-head-copy {
  flex: 1 1 200px;
  min-width: 0;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-section-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ra-text, #0f172a);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-section-sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ra-text-soft, #64748b);
  max-width: 52ch;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-mp-summary {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ra-primary, #2563eb);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-mp-table-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: auto;
  max-height: 220px;
  background: #fff;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-mp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-mp-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 10px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-mp-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-mp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-mp-muted {
  font-size: 12px;
  color: var(--ra-text-muted, #64748b);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-mp-status {
  margin-top: 10px;
  font-size: 12.5px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 4px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-divider::before,
.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-manual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-field-span-2 {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-manual-grid {
    grid-template-columns: 1fr;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-field-span-2 {
    grid-column: auto;
  }
}

/* POS premium — botões com contraste em fundo claro (ghost global assume texto branco) */
.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-section .pro-btn-ghost,
.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal .pro-btn-ghost,
.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-section .btn.btn-ghost,
.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal .btn.btn-ghost {
  color: var(--ra-text, #0f172a);
  background: var(--ra-surface, #fff);
  border: 1px solid var(--ra-border, #e5e7eb);
  -webkit-text-fill-color: var(--ra-text, #0f172a);
  box-shadow: var(--ra-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-section .pro-btn-ghost:hover:not(:disabled),
.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal .pro-btn-ghost:hover:not(:disabled),
.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-section .btn.btn-ghost:hover:not(:disabled),
.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal .btn.btn-ghost:hover:not(:disabled) {
  color: var(--ra-primary, #2563eb);
  background: var(--ra-primary-soft, rgba(37, 99, 235, 0.1));
  border-color: #bfdbfe;
  -webkit-text-fill-color: var(--ra-primary, #2563eb);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-section .pro-btn-primary,
.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal .pro-btn-primary {
  background: linear-gradient(135deg, var(--ra-primary, #2563eb), var(--ra-primary-dark, #1d4ed8));
  color: #fff;
  -webkit-text-fill-color: #fff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-section .pro-btn-danger,
.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal .pro-btn-danger {
  color: var(--ra-danger, #dc2626);
  background: #fff;
  border: 1px solid rgba(220, 38, 38, 0.35);
  -webkit-text-fill-color: var(--ra-danger, #dc2626);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-section .pro-btn-danger:hover:not(:disabled),
.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal .pro-btn-danger:hover:not(:disabled) {
  background: rgba(254, 226, 226, 0.9);
  border-color: rgba(220, 38, 38, 0.5);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-btn-compact {
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.78rem;
  font-weight: 800;
  border-radius: var(--ra-radius-sm, 10px);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-foot--premium .pro-btn-ghost {
  height: 44px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 0.88rem;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-foot--premium .pro-btn-primary {
  height: 44px;
  min-height: 44px;
  padding: 0 22px;
  font-size: 0.88rem;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-section .operator-config-field input,
.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-section .operator-config-field select {
  background: #fff;
  border-color: var(--ra-border, #e5e7eb);
  color: var(--ra-text, #0f172a);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-section .operator-config-field input:focus,
.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-section .operator-config-field select:focus {
  border-color: var(--ra-primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #f1f5f9;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-head h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ra-text, #0f172a);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-close {
  border: 0;
  background: #f1f5f9;
  color: var(--ra-text-muted, #64748b);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-close:hover {
  background: #e2e8f0;
  color: var(--ra-text, #0f172a);
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-body {
  padding: 18px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px 18px;
  border-top: 1px solid #f1f5f9;
  background: #fafbfc;
}

@media (max-width: 900px) {
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-section {
    padding: 16px 14px;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-field-compact {
    min-width: 0;
    width: 100%;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-field-compact select {
    width: 100%;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-hero-actions .pos-terminal-add-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-lead {
    max-width: none;
    font-size: 13px;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-subtabs {
    display: flex;
    width: 100%;
    border-radius: 14px;
    padding: 6px;
    gap: 4px;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-subtab {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 11px 10px;
    font-size: 12.5px;
    min-height: 44px;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-toolbar .btn {
    width: 100%;
    min-height: 44px;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-operator-toolbar .config-pro-status-pill {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-table-card {
    border-radius: 12px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-table {
    display: block;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-table thead {
    display: none;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-table tbody {
    display: block;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-table tbody tr.pos-table-data-row {
    display: block;
    border: 1px solid var(--ra-border, #e5e7eb);
    border-radius: 14px;
    margin-bottom: 12px;
    padding: 4px 14px;
    background: #ffffff;
    box-shadow: var(--ra-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-table tbody tr.pos-table-data-row:last-child {
    margin-bottom: 0;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-table tbody td.pos-table-empty {
    display: block;
    text-align: center;
    padding: 28px 16px !important;
    border: 1px dashed var(--ra-border, #e5e7eb);
    border-radius: 14px;
    background: #f8fafc;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-table tbody td[data-label] {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    gap: 6px 12px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    text-align: right;
    word-break: break-word;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-table tbody td[data-label]:last-child {
    border-bottom: 0;
    padding-bottom: 12px;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-table tbody td[data-label]::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
    text-align: left;
    line-height: 1.35;
    padding-top: 3px;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-table tbody td.pos-actions {
    display: block;
    padding-top: 12px;
    border-bottom: 0;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-table tbody td.pos-actions::before {
    display: block;
    margin-bottom: 10px;
    text-align: left;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-actions {
    justify-content: flex-start;
    white-space: normal;
    gap: 8px;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-actions .btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    min-height: 42px;
    justify-content: center;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-body input:not([type="checkbox"]),
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-body select {
    font-size: 16px;
  }
}

@media (max-width: 420px) {
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-actions .btn {
    flex: 1 1 100%;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-terminals-table tbody td[data-label] {
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
    gap: 4px 8px;
  }
}

@media (max-width: 640px) {
  .pos-modal-backdrop {
    align-items: flex-end;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal {
    width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    margin-bottom: 0;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-foot {
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-foot .btn {
    width: 100%;
    min-height: 46px;
  }
  .admin-page[data-admin-panel-active="configuracoes-operador"] .pos-modal-close {
    min-width: 44px;
    min-height: 44px;
    border-radius: 12px;
  }
}

/* ==========================================================================
   Cockpit - Resumo da semana premium (week + desempenho unificados)
   ========================================================================== */
.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-week {
  grid-column: 1 / -1 !important;
  border-radius: 24px;
  padding: 0;
  overflow: hidden;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-week #adminCockpitPerformanceList {
  display: none;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-shell {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
  --chart-primary: #2563eb;
  --chart-primary-light: #dbeafe;
  --chart-success: #16a34a;
  --chart-warning: #f59e0b;
  --chart-purple: #8b5cf6;
  --chart-green: #10b981;
  --chart-bg: #f8fafc;
  --chart-border: #e2e8f0;
  --chart-text: #0f172a;
  --chart-text-muted: #64748b;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.8rem;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 2rem;
  line-height: 1.05;
  font-weight: 800;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-head p {
  margin: 0.28rem 0 0;
  color: #64748b;
  font-size: 0.92rem;
  font-weight: 500;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-total {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 34px;
  padding: 0 0.9rem;
  border-radius: 999px;
  background: #edf3ff;
  border: 1px solid #d9e5ff;
  color: #1d4ed8;
  font-weight: 800;
  white-space: nowrap;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-body {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 0.95rem;
  align-items: stretch;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-chart-card.admin-week-chart-card {
  border: 1px solid var(--chart-border, #e2e8f0);
  border-radius: 20px;
  background: var(--ra-surface, #ffffff);
  padding: 24px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  min-height: 280px;
  display: grid;
  gap: 0.5rem;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-chart-header-mock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  margin-bottom: 16px;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-chart-title-mock {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--chart-text, #0f172a);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-week-line-chart.admin-week-chart-stack {
  min-height: 0;
  gap: 0.5rem;
  padding: 0;
  grid-template-rows: auto auto auto;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-chart-plot {
  border-radius: 18px;
  background: var(--chart-bg, #f8fafc);
  border: 1px solid var(--chart-border, #e2e8f0);
  padding: 8px 4px 4px;
  overflow: visible;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-chart-plot svg {
  display: block;
  width: 100%;
  height: 240px;
  overflow: visible;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-chart-grid-line {
  stroke: var(--chart-border, #e2e8f0);
  stroke-width: 0.35;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1.35 1.35;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-chart-y-tick {
  fill: var(--chart-text-muted, #64748b);
  font-size: 3.15px;
  font-weight: 600;
  font-family: Inter, system-ui, sans-serif;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-chart-line-curve {
  fill: none;
  stroke: var(--chart-primary, #2563eb);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-chart-dot.is-active {
  fill: var(--chart-primary, #2563eb);
  stroke: #ffffff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-chart-dot.is-quiet {
  fill: #cbd5e1;
  stroke: #ffffff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-chart-axis-x.admin-cockpit-week-line-labels {
  gap: 0.35rem;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-chart-axis-x small {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--chart-text-muted, #64748b);
  line-height: 1.2;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-chart-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.35rem;
  padding: 12px 4px 0;
  border-top: 1px solid var(--chart-border, #e2e8f0);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-chart-foot-msg {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--chart-text-muted, #64748b);
  flex: 1;
  min-width: 0;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-chart-foot-avg {
  text-align: right;
  flex-shrink: 0;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-chart-foot-avg span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--chart-text-muted, #64748b);
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-chart-foot-avg strong {
  display: block;
  margin-top: 2px;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--chart-text, #0f172a);
  font-variant-numeric: tabular-nums;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.55rem;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-chart-head strong {
  color: #1e293b;
  font-size: 1rem;
  font-weight: 800;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-peak {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 0.75rem;
  border-radius: 999px;
  background: #f1f5ff;
  border: 1px solid #dbe5ff;
  color: #1d4ed8;
  font-size: 0.8rem;
  font-weight: 700;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-metric-spark {
  justify-self: end;
  width: 100%;
  max-width: 64px;
  height: 40px;
  opacity: 1;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-metric-spark[data-empty="true"] {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(148, 163, 184, 0.22) 50%,
    transparent 100%
  );
  background-size: 100% 2px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.45;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-spark-svg {
  display: block;
  width: 100%;
  height: 40px;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-week-line-chart:not(.admin-week-chart-stack) {
  min-height: 290px;
  gap: 0.45rem;
  padding: 0.25rem 0.35rem 0.15rem;
  grid-template-rows: minmax(210px, auto) auto auto;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-week-line-chart:not(.admin-week-chart-stack) svg {
  height: 240px;
  overflow: visible;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-week-grid-line {
  stroke: rgba(148, 163, 184, 0.2);
  stroke-width: 0.34;
  stroke-dasharray: 1.25 1.7;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-week-grid-line.is-mid {
  stroke: rgba(148, 163, 184, 0.18);
}

/* Área do gráfico: fill=`url(#id)` definido inline no SVG (gradiente único por renderização). */

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-week-line-path {
  fill: none;
  stroke: #2563eb;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 2px 6px rgba(37, 99, 235, 0.2));
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-week-line-dot.is-active {
  fill: #1d4ed8;
  stroke: #ffffff;
  stroke-width: 1.15;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-week-line-dot.is-quiet {
  fill: #cbd5e1;
  stroke: #ffffff;
  stroke-width: 0.9;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-value-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.45rem;
  padding: 0 0.2rem;
  margin-top: 0.05rem;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-value-cell {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 500;
  color: #475569;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-value-cell.is-muted {
  font-weight: 400;
  color: #94a3b8;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-week-line-labels {
  gap: 0.45rem;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-week-line-labels small {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 600;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-tooltip {
  justify-self: end;
  display: grid;
  gap: 0.1rem;
  border: 1px solid #e5eaf3;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  padding: 0.42rem 0.64rem;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-tooltip strong {
  color: #334155;
  font-size: 0.72rem;
  font-weight: 700;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-tooltip span {
  color: #0f172a;
  font-size: 0.88rem;
  font-weight: 800;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-metric-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 12px;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #f8fafc;
  padding: 20px;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-metric-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-metric-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: inline-grid;
  place-items: center;
  font-size: 1rem;
  margin-bottom: 0;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-metric-card small {
  color: #475569;
  font-size: 0.74rem;
  font-weight: 700;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-metric-card strong {
  color: #0f172a;
  font-size: 1.95rem;
  line-height: 1;
  font-weight: 800;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-metric-card em {
  color: #16a34a;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 700;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-metric-card.is-blue { background: #eef4ff; }
.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-metric-card.is-blue .admin-week-summary-metric-icon { background: #dbe9ff; color: #1d4ed8; }
.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-metric-card.is-amber { background: #fffaf0; }
.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-metric-card.is-amber .admin-week-summary-metric-icon { background: #fff1cc; color: #ca8a04; }
.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-metric-card.is-green { background: #eefaf3; }
.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-metric-card.is-green .admin-week-summary-metric-icon { background: #d8f5e4; color: #16a34a; }
.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-metric-card.is-violet { background: #f4f2ff; }
.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-metric-card.is-violet .admin-week-summary-metric-icon { background: #e6e1ff; color: #6d28d9; }

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-insight {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.6rem;
  border: 1px solid #dbe7ff;
  border-radius: 14px;
  background: linear-gradient(180deg, #edf4ff 0%, #f8fbff 100%);
  padding: 0.75rem;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-insight-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.95rem;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-insight strong {
  display: block;
  color: #1d4ed8;
  font-size: 1.12rem;
  font-weight: 800;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-insight p {
  margin: 0.2rem 0 0;
  color: #334155;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.35;
}

.admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1200px) {
  .admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-head h2 {
    font-size: 1.55rem;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-week-summary-metrics {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.95rem;
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next {
    border-color: #d6e4ff;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 40px rgba(37, 99, 235, 0.12);
  }

  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-next-actions-main {
    gap: 10px;
  }
}

@media (min-width: 1201px) {
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next {
    min-height: 280px;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  .admin-page[data-admin-panel-active="dashboards"] .admin-cockpit-card-next {
    min-height: 260px;
  }
}

/* --- Nova venda (Vendas / NeuraFlow) — premium POS --- */
.admin-sales-shell {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0.25rem 0.1rem 1.5rem;
}

.admin-sales-shell--premium {
  --sales-premium-bg: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 42%, #eef4ff 100%);
  --sales-premium-card: rgba(255, 255, 255, 0.92);
  --sales-premium-border: rgba(148, 163, 184, 0.28);
  --sales-premium-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -18px rgba(37, 99, 235, 0.18);
  --sales-premium-glow: 0 0 0 1px rgba(37, 99, 235, 0.08), 0 8px 24px -12px rgba(37, 99, 235, 0.35);
  padding: 0.35rem 0.15rem 1.75rem;
  border-radius: 18px;
  background: var(--sales-premium-bg);
}

.admin-sales-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.admin-sales-head-copy {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: min(720px, 100%);
}

.admin-sales-head-copy .badge {
  align-self: flex-start;
}

.admin-sales-shell--premium .admin-sales-head-copy .badge {
  background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
  color: #1d4ed8;
  border: 1px solid rgba(37, 99, 235, 0.15);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.68rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
}

.admin-sales-title {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.admin-sales-shell--premium .admin-sales-title {
  font-size: clamp(1.45rem, 2.2vw, 1.75rem);
  letter-spacing: -0.03em;
}

.admin-sales-sub {
  margin: 0;
  color: #64748b;
  font-size: 0.92rem;
  line-height: 1.45;
}

.admin-sales-sub code {
  font-size: 0.82rem;
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  background: #f1f5f9;
  color: #334155;
}

.admin-sales-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.admin-sales-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 14px;
  width: max-content;
  max-width: 100%;
  flex-wrap: wrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.admin-sales-shell--premium .admin-sales-tabs {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--sales-premium-border);
  box-shadow: var(--sales-premium-shadow);
  padding: 0.4rem;
  border-radius: 16px;
}

.admin-sales-tab {
  appearance: none;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.admin-sales-tab:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.04);
}

.admin-sales-tab.is-active {
  background: #ffffff;
  color: #2563eb;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 6px 14px -10px rgba(37, 99, 235, 0.35);
}

.admin-sales-shell--premium .admin-sales-tab.is-active {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: var(--sales-premium-glow);
  color: #1d4ed8;
}

.admin-sales-tab-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.admin-sales-tabpanel {
  display: none;
  flex-direction: column;
  gap: 1.25rem;
}

.admin-sales-tabpanel.is-active {
  display: flex;
}

.admin-sales-inventory-host {
  display: contents;
}

.admin-sales-movements-shell {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}

.admin-sales-movements-filters-card .admin-sales-movements-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.85rem 1rem;
  margin-top: 0.35rem;
}

.admin-sales-movements-field-wide {
  grid-column: 1 / -1;
}

.admin-sales-movements-filter-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.admin-sales-movements-table-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1rem 1.1rem 1.1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  min-width: 0;
}

.admin-sales-movements-table-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.admin-sales-movements-table-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.admin-sales-movements-table-sub {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
}

.admin-sales-movements-status {
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
}

.admin-sales-movements-feedback {
  margin: 0 0 0.65rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: #b91c1c;
}

.admin-sales-movements-feedback[hidden] {
  display: none !important;
}

.admin-sales-movements-feedback[data-tone="neutral"] {
  color: #64748b;
}

.admin-sales-movements-table-scroll {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid #e8edf5;
  background: #fff;
}

.admin-sales-movements-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  font-size: 0.86rem;
  color: #0f172a;
}

.admin-sales-movements-table thead th {
  text-align: left;
  padding: 0.55rem 0.65rem;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  background: #f8fafc;
  border-bottom: 1px solid #eef2f7;
  white-space: nowrap;
}

.admin-sales-movements-table tbody td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid #eef2f7;
  vertical-align: middle;
}

.admin-sales-movements-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-sales-movements-table tbody tr:hover td {
  background: #f8fafc;
}

.admin-sales-movements-empty {
  text-align: center;
  color: #64748b;
  padding: 1.5rem 0.75rem !important;
}

.admin-sales-mv-origin span {
  font-variant-numeric: tabular-nums;
  cursor: default;
  color: #334155;
}

.admin-sales-mv-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.22rem 0.55rem;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.admin-sales-mv-badge--sale {
  background: #ffe4e6;
  color: #9f1239;
}

.admin-sales-mv-badge--adjustment {
  background: #fef3c7;
  color: #92400e;
}

.admin-sales-mv-badge--loss {
  background: #f3e8ff;
  color: #6b21a8;
}

.admin-sales-mv-badge--return {
  background: #dcfce7;
  color: #166534;
}

.admin-sales-mv-badge--initial {
  background: #dbeafe;
  color: #1e40af;
}

.admin-sales-mv-badge--other {
  background: #f1f5f9;
  color: #475569;
}

.admin-sales-branch {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
}

.admin-sales-branch select {
  min-width: 200px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  padding: 0.45rem 0.65rem;
  font: inherit;
  background: #fff;
}

.admin-sales-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.admin-sales-feedback {
  margin: 0;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  font-size: 0.88rem;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #334155;
}

.admin-sales-feedback[data-tone="warn"] {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.admin-sales-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.admin-sales-grid--checkout {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(280px, 0.88fr);
  gap: 1.1rem;
}

.admin-sales-col-main,
.admin-sales-col-aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.admin-sales-col-aside {
  position: relative;
}

.admin-sales-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Permite encolher quando a sidebar ocupa mais largura (evita overflow do subgrid). */
  min-width: 0;
}

.admin-sales-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1rem 1.1rem 1.1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.admin-sales-shell--premium .admin-sales-card {
  background: var(--sales-premium-card);
  border-color: var(--sales-premium-border);
  border-radius: 16px;
  padding: 1.1rem 1.15rem 1.15rem;
  box-shadow: var(--sales-premium-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.admin-sales-shell--premium .admin-sales-card:hover {
  border-color: rgba(37, 99, 235, 0.22);
}

.admin-sales-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.admin-sales-card-head h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: #0f172a;
}

.admin-sales-card-head small {
  font-weight: 500;
  color: #64748b;
}

.admin-sales-card-hint {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: #64748b;
}

.admin-sales-step {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--ra-primary-soft, #eef4ff);
  color: var(--ra-primary, #2563eb);
  font-weight: 800;
  font-size: 0.82rem;
}

.admin-sales-shell--premium .admin-sales-step {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(145deg, #dbeafe 0%, #e0e7ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.admin-sales-step--muted {
  background: #f1f5f9;
  color: #64748b;
  font-weight: 700;
}

.admin-sales-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.admin-sales-search {
  flex: 1 1 220px;
}

.admin-sales-field-compact select {
  min-width: 180px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  padding: 0.5rem 0.65rem;
  font: inherit;
  background: #fff;
}

.admin-sales-product-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: min(52vh, 640px);
  overflow-y: auto;
  padding-right: 0.15rem;
}

.admin-sales-shell--premium .admin-sales-product-list {
  max-height: min(58vh, 720px);
  gap: 0.65rem;
  padding-right: 0.35rem;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.admin-sales-product-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.55rem 0.6rem;
  border: 1px solid #e8edf5;
  border-radius: 12px;
  background: #fafbff;
}

.admin-sales-shell--premium .admin-sales-product-card {
  grid-template-columns: 64px 1fr auto;
  padding: 0.7rem 0.75rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-color: rgba(226, 232, 240, 0.95);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.admin-sales-shell--premium .admin-sales-product-card:not(.is-disabled):hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 10px 22px -16px rgba(37, 99, 235, 0.45);
}

.admin-sales-shell--premium .admin-sales-product-card.is-in-cart {
  border-color: rgba(37, 99, 235, 0.42);
  box-shadow: var(--sales-premium-glow);
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
}

.admin-sales-product-card.is-disabled {
  opacity: 0.55;
}

.admin-sales-product-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: #e8edf5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-sales-shell--premium .admin-sales-product-thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  box-shadow: 0 4px 12px -8px rgba(15, 23, 42, 0.35);
}

.admin-sales-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-sales-product-thumb-fallback {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #cbd5e1, #e2e8f0);
}

.admin-sales-product-body strong {
  display: block;
  font-size: 0.92rem;
  color: #0f172a;
}

.admin-sales-product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: #64748b;
}

.admin-sales-warn {
  display: block;
  color: #b45309;
  margin-top: 0.15rem;
}

.admin-sales-qty {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid #dbe4f3;
  border-radius: 10px;
  padding: 0.15rem;
  background: #fff;
}

.admin-sales-shell--premium .admin-sales-qty {
  border-radius: 12px;
  padding: 0.2rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.admin-sales-qty-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: #f1f5f9;
  color: #0f172a;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}

.admin-sales-shell--premium .admin-sales-qty-btn:not(:disabled):hover {
  background: #dbeafe;
  color: #1d4ed8;
}

.admin-sales-qty-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.admin-sales-qty-val {
  min-width: 1.5rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: #0f172a;
}

.admin-sales-catalog-foot {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid #eef2f7;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.admin-sales-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  background: linear-gradient(90deg, #eff6ff 0%, #f8fafc 100%);
  border: 1px solid rgba(37, 99, 235, 0.12);
  font-size: 0.84rem;
  color: #334155;
}

.admin-sales-selection-bar strong {
  color: #1d4ed8;
  font-weight: 800;
}

.admin-sales-selection-clear {
  appearance: none;
  border: 0;
  background: transparent;
  color: #dc2626;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.2rem 0.35rem;
  border-radius: 8px;
}

.admin-sales-selection-clear:hover {
  background: #fef2f2;
}

.admin-sales-clear {
  width: 100%;
  justify-content: center;
  gap: 0.5rem;
}

.admin-sales-muted {
  margin: 0;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.4;
}

.admin-sales-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid #e8edf5;
}

.admin-sales-shell--premium .admin-sales-table-wrap {
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.65);
}

.admin-sales-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.admin-sales-table th,
.admin-sales-table td {
  padding: 0.55rem 0.65rem;
  text-align: left;
  border-bottom: 1px solid #eef2f7;
}

.admin-sales-table th {
  background: #f8fafc;
  font-weight: 700;
  color: #475569;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-sales-cart-empty {
  text-align: center;
  color: #64748b;
  padding: 1rem !important;
}

.admin-sales-icon-btn {
  border: 0;
  padding: 0.35rem;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
}

.admin-sales-icon-btn:hover {
  color: #dc2626;
  background: #fef2f2;
}

.admin-sales-totals {
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.admin-sales-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: #475569;
}

.admin-sales-discount-row input {
  width: 120px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  padding: 0.35rem 0.5rem;
  font: inherit;
  text-align: right;
}

.admin-sales-total-main {
  padding-top: 0.45rem;
  margin-top: 0.15rem;
  border-top: 1px dashed #e2e8f0;
  font-size: 1rem;
}

.admin-sales-total-main strong {
  font-size: 1.15rem;
  color: var(--ra-primary, #2563eb);
}

.admin-sales-shell--premium .admin-sales-total-main {
  padding: 0.65rem 0.75rem;
  margin-top: 0.35rem;
  border-radius: 12px;
  border: 1px dashed rgba(37, 99, 235, 0.2);
  background: linear-gradient(90deg, rgba(239, 246, 255, 0.9) 0%, rgba(255, 255, 255, 0.5) 100%);
}

.admin-sales-shell--premium .admin-sales-total-main strong {
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

.admin-sales-checkout-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.15rem 1.1rem 1.1rem;
  border-radius: 18px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  background: linear-gradient(165deg, #ffffff 0%, #f8fbff 55%, #eff6ff 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 18px 40px -24px rgba(37, 99, 235, 0.45);
  position: sticky;
  top: 0.5rem;
}

.admin-sales-checkout-lines {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.admin-sales-checkout-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: #64748b;
}

.admin-sales-checkout-line strong {
  color: #0f172a;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.admin-sales-checkout-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 48%, #3b82f6 100%);
  color: #fff;
  box-shadow: 0 12px 28px -14px rgba(37, 99, 235, 0.75);
}

.admin-sales-checkout-total span {
  font-size: 0.92rem;
  font-weight: 600;
  opacity: 0.92;
}

.admin-sales-checkout-total strong {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.admin-sales-stock-ok {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  border: 1px solid #bbf7d0;
  background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
}

.admin-sales-stock-ok-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #22c55e;
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(34, 197, 94, 0.8);
}

.admin-sales-stock-ok strong {
  display: block;
  font-size: 0.88rem;
  color: #166534;
}

.admin-sales-stock-ok p {
  margin: 0.15rem 0 0;
  font-size: 0.76rem;
  color: #15803d;
  line-height: 1.35;
}

.admin-sales-shell--premium .admin-sales-submit {
  width: 100%;
  justify-content: center;
  padding: 0.85rem 1.25rem;
  font-size: 1rem;
  border-radius: 14px;
  box-shadow: 0 14px 28px -14px rgba(37, 99, 235, 0.65);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.admin-sales-shell--premium .admin-sales-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px -12px rgba(37, 99, 235, 0.7);
}

.admin-sales-checkout-trust {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.4;
}

.admin-sales-checkout-trust svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: #94a3b8;
}

.admin-sales-info-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 0.35rem;
}

.admin-sales-info-card {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px -18px rgba(15, 23, 42, 0.35);
}

.admin-sales-info-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #dbeafe 0%, #e0e7ff 100%);
  color: #2563eb;
}

.admin-sales-info-card strong {
  display: block;
  font-size: 0.86rem;
  color: #0f172a;
  margin-bottom: 0.12rem;
}

.admin-sales-info-card p {
  margin: 0;
  font-size: 0.76rem;
  color: #64748b;
  line-height: 1.4;
}

.admin-sales-shell--premium .admin-sales-search input,
.admin-sales-shell--premium .admin-sales-field-compact select,
.admin-sales-shell--premium .admin-sales-field select,
.admin-sales-shell--premium .admin-sales-field textarea,
.admin-sales-shell--premium .admin-sales-field input {
  border-radius: 12px;
  border-color: rgba(203, 213, 225, 0.95);
  background: rgba(255, 255, 255, 0.95);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-sales-shell--premium .admin-sales-search input:focus,
.admin-sales-shell--premium .admin-sales-field-compact select:focus,
.admin-sales-shell--premium .admin-sales-field select:focus,
.admin-sales-shell--premium .admin-sales-field textarea:focus,
.admin-sales-shell--premium .admin-sales-field input:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.admin-sales-shell--premium .admin-sales-branch select {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
}

.admin-sales-subgrid {
  display: grid;
  /* minmax(0, 1fr): sem isto, `min-width: auto` das células impede encolher e o 2.º card “sai” do alinhamento. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  min-width: 0;
}

.admin-sales-subgrid > .admin-sales-card {
  min-width: 0;
}

.admin-sales-fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-sales-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
}

.admin-sales-field select,
.admin-sales-field textarea,
.admin-sales-field input {
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  padding: 0.45rem 0.6rem;
  font: inherit;
  font-weight: 500;
  color: #0f172a;
  background: #fff;
}

.admin-sales-field textarea {
  resize: vertical;
  min-height: 72px;
}

.admin-sales-char {
  font-weight: 500;
  color: #94a3b8;
  font-size: 0.72rem;
  text-align: right;
}

.admin-sales-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
}

.admin-sales-field-row .admin-sales-field {
  flex: 1 1 200px;
}

.admin-sales-mini {
  white-space: nowrap;
  align-self: flex-end;
}

.admin-sales-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.55rem;
}

.admin-sales-inline-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.5rem;
  min-width: 0;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-sales-info-icon {
  flex: 0 0 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  font-size: 0.65rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  margin-top: 0.1rem;
}

.admin-sales-pay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
}

.admin-sales-troco strong {
  font-size: 1.05rem;
  color: #0f172a;
}

.admin-sales-actions {
  display: flex;
  justify-content: flex-end;
}

.admin-sales-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.35rem;
  font-weight: 700;
  border-radius: 12px;
}

.admin-sales-field--customer {
  flex: 1 1 240px;
  min-width: 0;
}

.admin-sales-customer-wrap {
  position: relative;
}

.admin-sales-search--block {
  width: 100%;
}

.admin-sales-search--block input {
  width: 100%;
}

.admin-sales-customer-picked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 0.88rem;
  color: #0f172a;
}

.admin-sales-customer-picked strong {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-sales-customer-results {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  z-index: 3;
}

.admin-sales-customer-results[hidden] {
  display: none !important;
}

.admin-sales-customer-results li {
  border-bottom: 1px solid #f1f5f9;
}

.admin-sales-customer-results li:last-child {
  border-bottom: 0;
}

.admin-sales-customer-results button {
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.65rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  color: #0f172a;
  cursor: pointer;
  border-radius: 0;
}

.admin-sales-customer-results button:hover {
  background: #f1f5f9;
}

@media (max-width: 1280px) {
  .admin-sales-grid--checkout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .admin-sales-col-aside {
    grid-column: 1 / -1;
  }

  .admin-sales-checkout-card {
    position: static;
  }
}

@media (max-width: 1100px) {
  .admin-sales-grid,
  .admin-sales-grid--checkout {
    grid-template-columns: 1fr;
  }

  .admin-sales-col-aside {
    grid-column: auto;
  }

  .admin-sales-subgrid {
    grid-template-columns: 1fr;
  }

  .admin-sales-pay-grid {
    grid-template-columns: 1fr;
  }

  .admin-sales-info-bar {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Sales · Pacotes / Assinaturas (data-sales-tabpanel="pacotes")
   ========================================================================== */

.admin-sales-package-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.85rem;
  padding-top: 0.25rem;
}

.admin-sales-plan-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.95rem 1rem 1rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.admin-sales-plan-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 6px 18px rgba(67, 56, 202, 0.08);
  transform: translateY(-1px);
}

.admin-sales-plan-card.is-selected {
  border-color: #6366f1;
  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.18);
  background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 100%);
}

.admin-sales-plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.admin-sales-plan-head strong {
  font-size: 1.02rem;
  color: #0f172a;
  display: block;
}

.admin-sales-plan-kind {
  display: inline-block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
  font-weight: 600;
}

.admin-sales-plan-price {
  font-size: 1.05rem;
  color: #4338ca;
  white-space: nowrap;
}

.admin-sales-plan-desc {
  margin: 0;
  color: #475569;
  font-size: 0.86rem;
  line-height: 1.35;
}

.admin-sales-plan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.admin-sales-plan-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.admin-sales-plan-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
  color: #1f2937;
}

.admin-sales-plan-items li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.admin-sales-plan-items-more {
  color: #64748b;
  font-style: italic;
}

.admin-sales-plan-select {
  align-self: stretch;
  margin-top: 0.2rem;
}

/* Botões dentro da tab de pacotes — fundo claro, texto escuro -------- */
[data-sales-tabpanel="pacotes"] .btn.btn-ghost,
[data-sales-tabpanel="pacotes"] .admin-sales-plan-select.btn-ghost {
  background: #ffffff;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

[data-sales-tabpanel="pacotes"] .btn.btn-ghost:hover,
[data-sales-tabpanel="pacotes"] .admin-sales-plan-select.btn-ghost:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

[data-sales-tabpanel="pacotes"] .admin-sales-plan-card.is-selected .admin-sales-plan-select.btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
  color: #ffffff;
  border: 1px solid #4338ca;
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.28);
}

[data-sales-tabpanel="pacotes"] .admin-sales-mini.btn-secondary {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #1e293b;
}
[data-sales-tabpanel="pacotes"] .admin-sales-mini.btn-secondary:hover {
  background: #eef2ff;
  border-color: #6366f1;
  color: #3730a3;
}

/* Botão "Finalizar venda" atenuado quando faltam dados --------------- */
.admin-sales-submit.is-blocked {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.15);
}
.admin-sales-submit.is-blocked:hover {
  transform: none;
  box-shadow: none;
}

.admin-sales-empty {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem 1rem;
  border-radius: 14px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  color: #475569;
}
.admin-sales-empty strong {
  color: #0f172a;
}

.admin-sales-package-summary-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0.5rem;
}

.admin-sales-package-summary-empty {
  margin: 0.4rem 0 0;
}

.admin-sales-package-summary-head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed #e2e8f0;
}

.admin-sales-package-summary-head strong {
  font-size: 1.05rem;
  color: #0f172a;
}
.admin-sales-package-summary-head span {
  color: #6366f1;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.admin-sales-package-summary-desc {
  margin: 0;
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.4;
}

.admin-sales-package-summary-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.9rem;
  color: #1e293b;
}

.admin-sales-package-summary-items li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.18rem 0;
  border-bottom: 1px dashed #f1f5f9;
}
.admin-sales-package-summary-items li:last-child {
  border-bottom: 0;
}

.admin-sales-package-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #334155;
}

.admin-sales-field--checkbox {
  flex-direction: row;
  gap: 0.4rem;
  align-items: center;
}

.admin-sales-package-next-hint {
  margin: 0 0 0.5rem;
  line-height: 1.45;
}

.admin-sales-package-feedback {
  margin-top: 0.4rem;
}

/* Modal de pagamento do pacote ---------------------------------------- */

/* Backdrop e modal — reaproveitam as classes do modal premium de produto
   (admin-next-payment-modal*). Os overrides abaixo são só ajustes finos
   para o contexto de pacote. ----------------------------------------- */

.admin-sales-package-pay-backdrop {
  /* Herda o z-index alto (2820) de `.admin-next-payment-modal-backdrop` —
     valores baixos faziam o modal aparecer atrás de sidebar/topbar. */
}

/* O modal base usa `max-height: min(92vh, …)` e `width: min(100%, 520px)`.
   Para o pacote queremos paridade com o modal de produto: ocupar SEMPRE
   a altura útil inteira (sem scrollbar externo) e dar +80px de largura
   para os 3 cards de pagamento (Pix / Maquininha / Manual) respirarem.
   - `min-height === max-height` esticam o modal até o limite da tela;
   - `overflow-y: auto` mantém o scroll INTERNO quando o conteúdo passa;
   - largura sobe para 600px (vs. 520px do produto puro). */
.admin-sales-package-pay-modal {
  width: min(100%, 600px);
  min-height: calc(var(--reservaai-vh, 100vh) - var(--admin-topbar-stack-height, 4.25rem) - 2.25rem);
  max-height: calc(var(--reservaai-vh, 100vh) - var(--admin-topbar-stack-height, 4.25rem) - 2.25rem);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Crítico: `display: flex/grid` quebra o atributo `hidden`. */
.admin-sales-package-pay-backdrop[hidden],
.admin-sales-package-pay-step[hidden],
.admin-sales-package-pay-pix[hidden],
.admin-sales-package-pay-link[hidden],
.admin-sales-package-pay-success[hidden],
.admin-sales-package-pay-foot [hidden],
.admin-sales-package-pay-back[hidden] {
  display: none !important;
}

/* Footer próprio do modal de pacote (modal premium não tem footer fixo) */
.admin-sales-package-pay-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  padding: 0.95rem 1.35rem 1.15rem;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  flex-wrap: wrap;
}

.admin-sales-package-pay-back {
  margin-right: auto;
}

/* Pix / Link / Status blocos do passo "aguardando" ----------------- */
.admin-sales-package-pay-pix,
.admin-sales-package-pay-link {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  margin-top: 0.6rem;
}

.admin-sales-package-pay-hint {
  margin: 0;
  font-size: 0.85rem;
  color: #475569;
}

.admin-sales-package-pay-pix-code {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  padding: 0.6rem;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #0f172a;
  resize: vertical;
  min-height: 4.5rem;
}

.admin-sales-package-pay-copy,
.admin-sales-package-pay-link-btn {
  align-self: flex-start;
}

.admin-sales-package-pay-status {
  margin: 0.7rem 0 0;
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
}
.admin-sales-package-pay-status[data-tone="pending"] {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
.admin-sales-package-pay-status[data-tone="ok"] {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.admin-sales-package-pay-status[data-tone="warn"] {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Sucesso ---------------------------------------------------------- */
.admin-sales-package-pay-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  text-align: center;
  padding: 1.25rem 1.25rem 0.5rem;
}

.admin-sales-package-pay-success-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(34, 197, 94, 0.25);
}

.admin-sales-package-pay-success strong {
  font-size: 1.1rem;
  color: #0f172a;
}

.admin-sales-package-pay-success p {
  margin: 0;
  color: #475569;
}

/* Passo POS (maquininha) — reusa estrutura do .admin-next-payment-pos-panel
   do modal de produto, com pequenos ajustes específicos do modal de pacotes. */
.admin-sales-package-pos-panel {
  /* o painel é mostrado/escondido pelo atributo hidden controlado no JS */
}

.admin-sales-package-pos-panel .admin-next-payment-pos-actions {
  margin: 0.4rem 1rem 0;
}

.admin-sales-package-pos-panel .admin-next-payment-pos-back-row {
  margin: 0.9rem 1rem 0;
}

.admin-sales-package-pay-pos-status {
  margin: 0.65rem 1rem 0;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.35;
  border: 1px solid transparent;
}

.admin-sales-package-pay-pos-status[hidden] {
  display: none !important;
}

.admin-sales-package-pay-pos-status[data-tone="pending"] {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}

.admin-sales-package-pay-pos-status[data-tone="warn"] {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}

.admin-sales-package-pay-pos-status[data-tone="ok"] {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}

.admin-sales-package-pay-modal .admin-next-payment-option[disabled],
.admin-sales-package-pay-modal .admin-next-payment-option[aria-disabled="true"] {
  opacity: 0.62;
  cursor: not-allowed;
}

/* Espaçamento dos novos blocos do modal (ITENS / Maquininha online) ----- */
.admin-sales-package-pay-items {
  margin: 0.85rem 1rem 0;
  display: grid;
  gap: 0.55rem;
}

.admin-sales-package-pay-items .admin-sale-details-items-head {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #475569;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-sales-package-pay-item-sub {
  display: block;
  font-size: 0.74rem;
  font-weight: 500;
  color: #64748b;
  margin-top: 0.18rem;
}

/* Feedback inline para Ações Rápidas / Edit Amount (avisos "em breve"). ----- */
.admin-sales-package-pay-feedback {
  margin: 0.5rem 1rem 0;
  padding: 0.55rem 0.8rem;
  border-radius: 0.65rem;
  background: rgba(255, 159, 67, 0.12);
  color: #b45309;
  border: 1px solid rgba(255, 159, 67, 0.32);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.35;
}

.admin-sales-package-pay-feedback[data-tone="success"] {
  background: rgba(22, 199, 132, 0.12);
  color: #047857;
  border-color: rgba(22, 199, 132, 0.32);
}

.admin-sales-package-pay-feedback[data-tone="neutral"] {
  background: rgba(53, 109, 255, 0.08);
  color: #1d4ed8;
  border-color: rgba(53, 109, 255, 0.24);
}

/* Ações Rápidas e botão de edit-amount já herdam de
   `.admin-next-payment-quick-actions` e `.admin-next-payment-amount-edit`.
   Adicionamos só o espaçamento contextual dentro do modal de pacotes. */
.admin-sales-package-pay-modal .admin-next-payment-quick-actions {
  margin: 0.55rem 1rem 0;
}

.admin-sales-package-pay-modal .admin-next-payment-amount-edit {
  display: inline-flex;
}

.admin-sales-package-pay-modal .admin-next-payment-detail-link {
  display: inline-flex;
}

.admin-sales-package-pay-terminal {
  margin: 0.85rem 1rem 0;
}

.admin-sales-package-pay-manual-hint {
  margin: 0.85rem 1rem 0;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  font-size: 0.82rem;
  line-height: 1.4;
}

/* Botões "ghost/secondary" no fundo claro do modal ---------------- */
.admin-sales-package-pay-modal .btn.btn-ghost {
  background: #ffffff;
  color: #1e293b;
  border: 1px solid #cbd5e1;
}
.admin-sales-package-pay-modal .btn.btn-ghost:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}
.admin-sales-package-pay-modal .btn.btn-secondary {
  background: #ffffff;
  color: #1e293b;
  border: 1px solid #cbd5e1;
}
.admin-sales-package-pay-modal .btn.btn-secondary:hover {
  background: #eef2ff;
  border-color: #6366f1;
  color: #3730a3;
}

@media (max-width: 720px) {
  .admin-sales-package-list {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Admin modais: sempre abaixo do topo fixo
   ============================================================ */
.admin-page .admin-quick-agenda-modal-backdrop,
.admin-page .admin-ratings-modal-backdrop,
.admin-page .calendar-modal-backdrop,
.admin-page .members-modal-backdrop,
.admin-page .inventory-editor-backdrop,
.admin-page .clients-editor-backdrop,
.admin-page .admin-next-payment-modal-backdrop,
.admin-page .admin-pos-payment-flow-backdrop,
.admin-page .admin-pix-gateway-modal-backdrop,
.admin-page .admin-cash-payment-modal-backdrop,
.admin-page .admin-sales-package-pay-backdrop,
.admin-page .payments-webhooks-detail-backdrop,
.admin-page .payments-webhooks-receipt-backdrop,
.admin-page .pos-modal-backdrop {
  top: var(--admin-topbar-stack-height, 4.25rem);
  left: 0;
  right: 0;
  bottom: 0;
}

/* Avaliações segue o mesmo espaçamento visual do modal de pagamento */
.admin-page .admin-ratings-modal-backdrop {
  padding: 1rem 1.25rem 1.25rem;
  place-items: start center;
  align-content: start;
}

.admin-page .admin-ratings-modal {
  max-height: min(92vh, calc(var(--reservaai-vh, 100vh) - var(--admin-topbar-stack-height, 4.25rem) - 2rem));
}

/* ==========================================================================
   Tela "Plano e Uso" (data-admin-panel="plano-uso")
   Visualização premium da assinatura, consumo do período e histórico.
   ========================================================================== */

.admin-page[data-admin-panel-active="plano-uso"] .admin-panel[data-admin-panel="plano-uso"] {
  background: var(--ra-bg);
  border: 0;
  box-shadow: none;
  padding: 0;
}

.plano-uso-shell {
  padding: 24px clamp(16px, 3vw, 32px) 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--ra-text);
}

.plano-uso-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.plano-uso-head-copy h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ra-text);
}
.plano-uso-head-copy p {
  margin: 4px 0 0;
  color: var(--ra-text-soft);
  font-size: 0.95rem;
}
.plano-uso-head-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.plano-uso-help-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--ra-border);
  background: var(--ra-surface);
  color: var(--ra-text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.plano-uso-help-btn:hover {
  border-color: var(--ra-primary);
  color: var(--ra-primary);
  background: var(--ra-primary-soft);
}
.plano-uso-help-btn svg {
  width: 18px;
  height: 18px;
}

.plano-uso-feedback {
  border-radius: var(--ra-radius-md);
  padding: 12px 16px;
  font-size: 0.9rem;
  background: rgba(239, 246, 255, 0.95);
  border: 1px solid rgba(37, 99, 235, 0.18);
  color: var(--ra-primary-dark);
}
.plano-uso-feedback[data-tone="warn"] {
  background: rgba(254, 243, 199, 0.6);
  border-color: rgba(217, 119, 6, 0.35);
  color: #92400e;
}
.plano-uso-feedback[data-tone="danger"] {
  background: rgba(254, 226, 226, 0.7);
  border-color: rgba(220, 38, 38, 0.35);
  color: #991b1b;
}
.plano-uso-feedback[data-tone="success"] {
  background: rgba(220, 252, 231, 0.85);
  border-color: rgba(34, 197, 94, 0.35);
  color: #166534;
}
.plano-uso-feedback[data-tone="info"] {
  background: rgba(239, 246, 255, 0.95);
  border-color: rgba(37, 99, 235, 0.18);
  color: var(--ra-primary-dark);
}

/* Skeleton de carregamento */
.plano-uso-skeleton {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.plano-uso-skeleton[hidden],
.plano-uso-content[hidden],
.plano-uso-card[hidden],
.plano-uso-feedback[hidden],
.plano-uso-empty[hidden] {
  display: none !important;
}
.plano-uso-skeleton-row,
.plano-uso-skeleton-card {
  background: linear-gradient(90deg, #eef2f8 0%, #f7f9fc 50%, #eef2f8 100%);
  background-size: 200% 100%;
  animation: planoUsoShimmer 1.4s linear infinite;
  border-radius: var(--ra-radius-md);
}
.plano-uso-skeleton-row {
  height: 92px;
}
.plano-uso-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.plano-uso-skeleton-card {
  height: 138px;
}
@keyframes planoUsoShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.plano-uso-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Grid superior: plano + assinatura + trial */
.plano-uso-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 16px;
}

/* Tokens IA, health score e lista de features */
.plano-uso-insights-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1.2fr);
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .plano-uso-insights-grid {
    grid-template-columns: 1fr;
  }
}
.plano-uso-card--tokens .plano-uso-tokens-total {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ra-text);
  line-height: 1.15;
}
.plano-uso-tokens-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 2.5rem;
}
.plano-uso-tokens-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.82rem;
}
.plano-uso-tokens-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--ra-text-soft);
  word-break: break-all;
}
.plano-uso-tokens-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ra-text);
  flex-shrink: 0;
}
.plano-uso-tokens-meta {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--ra-text-soft);
}
.plano-uso-health-score-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.plano-uso-health-score {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.plano-uso-health-score[data-tone="success"] { color: #15803d; }
.plano-uso-health-score[data-tone="warn"] { color: #b45309; }
.plano-uso-health-score[data-tone="danger"] { color: #b91c1c; }
.plano-uso-health-score[data-tone="neutral"] { color: var(--ra-text-soft); }
.plano-uso-health-denom {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ra-text-soft);
}
.plano-uso-health-hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ra-text-soft);
}
.plano-uso-card--feature-detail .plano-uso-section-head {
  margin-bottom: 0;
}
.plano-uso-card--feature-detail .plano-uso-section-head h3 {
  font-size: 1rem;
  margin: 0 0 4px;
}
.plano-uso-card--feature-detail .plano-uso-section-head p {
  margin: 0;
  font-size: 0.78rem;
}
.plano-uso-feature-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}
.plano-uso-feature-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--ra-radius-md);
  border: 1px solid var(--ra-border);
  background: rgba(148, 163, 184, 0.06);
}
.plano-uso-feature-check {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(34, 197, 94, 0.18);
  color: #15803d;
}
.plano-uso-feature-check svg {
  width: 12px;
  height: 12px;
}
.plano-uso-feature-line {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  font-size: 0.82rem;
}
.plano-uso-feature-line code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--ra-text);
  word-break: break-all;
}
.plano-uso-feature-hint {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ra-text-soft);
}
.plano-uso-feature-detail-empty {
  list-style: none;
  padding: 10px 0;
}

.plano-uso-card {
  background: var(--ra-surface);
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-lg);
  padding: 20px;
  box-shadow: var(--ra-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.plano-uso-card-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.plano-uso-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
  background: linear-gradient(135deg, var(--ra-primary), var(--ra-primary-dark));
  color: #fff;
}
.plano-uso-card-icon svg {
  width: 26px;
  height: 26px;
}
.plano-uso-card-icon--plan {
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
}

.plano-uso-card-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.plano-uso-card-label {
  color: var(--ra-text-soft);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.plano-uso-card-title-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.plano-uso-card-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ra-text);
  letter-spacing: -0.01em;
}
.plano-uso-card-price {
  color: var(--ra-text-soft);
  font-size: 0.95rem;
  font-weight: 600;
}
.plano-uso-card-value {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ra-text);
}

.plano-uso-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  background: rgba(148, 163, 184, 0.12);
  color: #475569;
}
.plano-uso-status-badge[data-tone="success"] {
  background: rgba(34, 197, 94, 0.14);
  color: #166534;
}
.plano-uso-status-badge[data-tone="warn"] {
  background: rgba(245, 158, 11, 0.16);
  color: #92400e;
}
.plano-uso-status-badge[data-tone="danger"] {
  background: rgba(239, 68, 68, 0.14);
  color: #991b1b;
}
.plano-uso-status-badge[data-tone="info"] {
  background: rgba(14, 165, 233, 0.14);
  color: #0369a1;
}

.plano-uso-feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.plano-uso-feature-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.18);
  color: #4338ca;
  font-size: 0.8rem;
  font-weight: 600;
}
.plano-uso-feature-empty {
  color: var(--ra-text-soft);
  font-size: 0.85rem;
  font-style: italic;
}

.plano-uso-card-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.plano-uso-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ra-primary);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.18s ease;
}
.plano-uso-link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.18s ease;
}
.plano-uso-link:hover {
  color: var(--ra-primary-dark);
}
.plano-uso-link:hover svg {
  transform: translateX(2px);
}
.plano-uso-link--soft {
  color: var(--ra-text-soft);
}
.plano-uso-link--soft:hover {
  color: var(--ra-primary);
}

.plano-uso-meta-list {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.plano-uso-meta-list div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.plano-uso-meta-list dt {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ra-text-soft);
  font-weight: 700;
}
.plano-uso-meta-list dd {
  margin: 0;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--ra-text);
}

/* Trial card */
.plano-uso-card--trial {
  background: linear-gradient(140deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.05));
  border-color: rgba(99, 102, 241, 0.22);
}
.plano-uso-trial-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.plano-uso-trial-days {
  display: block;
  font-size: 1.45rem;
  font-weight: 800;
  color: #4338ca;
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.plano-uso-trial-text {
  margin: 0;
  color: #475569;
  font-size: 0.9rem;
}
.plano-uso-trial-bar {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.22);
  overflow: hidden;
}
.plano-uso-trial-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #6366F1, #8B5CF6);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.plano-uso-trial-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.plano-uso-trial-amount {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ra-text);
  margin-top: 2px;
}
.plano-uso-trial-date {
  display: block;
  color: var(--ra-text-soft);
  font-size: 0.8rem;
  margin-top: 2px;
}

/* Section "Uso no período" */
.plano-uso-section {
  background: var(--ra-surface);
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-lg);
  padding: 22px;
  box-shadow: var(--ra-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.plano-uso-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.plano-uso-section-head h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ra-text);
}
.plano-uso-section-head p,
.plano-uso-section-period {
  margin: 4px 0 0;
  color: var(--ra-text-soft);
  font-size: 0.85rem;
}
.plano-uso-section-period {
  margin: 0;
}

.plano-uso-usage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.plano-uso-usage-card {
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  background: var(--ra-surface);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.plano-uso-usage-card:hover {
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 8px 22px rgba(15, 35, 75, 0.06);
}
.plano-uso-usage-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.plano-uso-usage-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--ra-primary-soft);
  color: var(--ra-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.plano-uso-usage-icon svg {
  width: 18px;
  height: 18px;
}
.plano-uso-usage-icon--professionals { background: rgba(34, 197, 94, 0.12); color: #166534; }
.plano-uso-usage-icon--units { background: rgba(245, 158, 11, 0.16); color: #92400e; }
.plano-uso-usage-icon--whatsapp { background: rgba(34, 197, 94, 0.14); color: #15803d; }
.plano-uso-usage-icon--bots { background: rgba(99, 102, 241, 0.14); color: #4338ca; }
.plano-uso-usage-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ra-text-soft);
}
.plano-uso-usage-numbers {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}
.plano-uso-usage-numbers strong {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--ra-text);
  letter-spacing: -0.01em;
}
.plano-uso-usage-divider {
  font-size: 0.95rem;
  color: var(--ra-text-soft);
  font-weight: 600;
}
.plano-uso-usage-percent {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--ra-success);
}
.plano-uso-usage-card[data-tone="warn"] .plano-uso-usage-percent { color: #b45309; }
.plano-uso-usage-card[data-tone="danger"] .plano-uso-usage-percent { color: #b91c1c; }
.plano-uso-usage-card[data-tone="muted"] .plano-uso-usage-percent { color: var(--ra-text-soft); }
.plano-uso-usage-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.22);
  overflow: hidden;
}
.plano-uso-usage-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.plano-uso-usage-card[data-tone="warn"] .plano-uso-usage-bar-fill {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}
.plano-uso-usage-card[data-tone="danger"] .plano-uso-usage-bar-fill {
  background: linear-gradient(90deg, #ef4444, #b91c1c);
}
.plano-uso-usage-card[data-tone="muted"] .plano-uso-usage-bar-fill {
  background: linear-gradient(90deg, #cbd5f5, #94a3b8);
}
.plano-uso-usage-remaining {
  color: var(--ra-text-soft);
  font-size: 0.78rem;
}

/* Histórico + Alertas */
.plano-uso-double-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
}
.plano-uso-card--history,
.plano-uso-card--alerts {
  padding: 20px 22px;
}
.plano-uso-select {
  display: inline-flex;
  align-items: center;
}
.plano-uso-select select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--ra-border);
  border-radius: 10px;
  padding: 8px 30px 8px 12px;
  background: var(--ra-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ra-text);
  cursor: pointer;
}
.plano-uso-select select:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.35);
  outline-offset: 1px;
}
.plano-uso-history-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.plano-uso-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--ra-radius-md);
  background: #f8fafc;
  border: 1px solid var(--ra-border);
}
.plano-uso-history-item div { display: flex; flex-direction: column; gap: 2px; }
.plano-uso-history-label {
  font-size: 0.78rem;
  color: var(--ra-text-soft);
  font-weight: 600;
}
.plano-uso-history-item strong {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ra-text);
  font-variant-numeric: tabular-nums;
}
.plano-uso-history-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ra-primary);
}
.plano-uso-history-item[data-tone="appointments"] .plano-uso-history-dot { background: var(--ra-success); }
.plano-uso-history-chart {
  height: 0;
}
.plano-uso-muted {
  color: var(--ra-text-soft);
  font-size: 0.85rem;
  font-style: italic;
}

/* Alertas */
.plano-uso-alerts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plano-uso-alert {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px;
  border-radius: var(--ra-radius-md);
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: #f8fafc;
}
.plano-uso-alert[data-tone="warn"] {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(254, 243, 199, 0.5);
}
.plano-uso-alert[data-tone="info"] {
  border-color: rgba(99, 102, 241, 0.25);
  background: rgba(238, 242, 255, 0.7);
}
.plano-uso-alert[data-tone="success"] {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(220, 252, 231, 0.55);
}
.plano-uso-alert-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(148, 163, 184, 0.18);
  color: #475569;
}
.plano-uso-alert-icon svg { width: 20px; height: 20px; }
.plano-uso-alert[data-tone="warn"] .plano-uso-alert-icon { background: rgba(245, 158, 11, 0.22); color: #b45309; }
.plano-uso-alert[data-tone="info"] .plano-uso-alert-icon { background: rgba(99, 102, 241, 0.18); color: #4338ca; }
.plano-uso-alert[data-tone="success"] .plano-uso-alert-icon { background: rgba(34, 197, 94, 0.22); color: #166534; }
.plano-uso-alert-body strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ra-text);
  margin-bottom: 2px;
}
.plano-uso-alert-body p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ra-text-soft);
  line-height: 1.45;
}

/* Histórico de faturamento (tabela) */
.plano-uso-card--invoices {
  padding: 22px;
  gap: 16px;
}
.plano-uso-invoices-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
}
.plano-uso-invoices-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.plano-uso-invoices-table thead th {
  text-align: left;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--ra-text-soft);
  background: #f8fafc;
  padding: 12px 14px;
  font-weight: 700;
  border-bottom: 1px solid var(--ra-border);
}
.plano-uso-invoices-table tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--ra-border);
  color: var(--ra-text);
  font-weight: 600;
  vertical-align: middle;
}
.plano-uso-invoices-table tbody tr:last-child td {
  border-bottom: 0;
}
.plano-uso-invoices-table tbody tr:hover td {
  background: #f8fafc;
}
.plano-uso-invoice-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: capitalize;
}
.plano-uso-invoice-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.plano-uso-invoice-status[data-tone="success"] { background: rgba(34, 197, 94, 0.14); color: #166534; }
.plano-uso-invoice-status[data-tone="warn"] { background: rgba(245, 158, 11, 0.16); color: #92400e; }
.plano-uso-invoice-status[data-tone="danger"] { background: rgba(239, 68, 68, 0.14); color: #991b1b; }
.plano-uso-invoice-status[data-tone="neutral"] { background: rgba(148, 163, 184, 0.18); color: #475569; }
.plano-uso-invoice-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.plano-uso-invoice-action {
  text-align: right;
  width: 1%;
}
.plano-uso-invoice-download {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ra-border);
  background: var(--ra-surface);
  color: var(--ra-text-soft);
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.plano-uso-invoice-download:hover {
  background: var(--ra-primary-soft);
  color: var(--ra-primary);
  border-color: rgba(37, 99, 235, 0.35);
}
.plano-uso-invoice-download.is-disabled {
  border-style: dashed;
  cursor: default;
  pointer-events: none;
  color: rgba(148, 163, 184, 0.7);
}
.plano-uso-invoice-download svg { width: 16px; height: 16px; }

.plano-uso-empty {
  border: 1px dashed var(--ra-border);
  border-radius: var(--ra-radius-md);
  padding: 24px;
  text-align: center;
  color: var(--ra-text-soft);
  font-size: 0.9rem;
  background: #f8fafc;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Responsivo: tablet */
@media (max-width: 1180px) {
  .plano-uso-summary-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .plano-uso-card--trial {
    grid-column: 1 / -1;
  }
  .plano-uso-double-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .plano-uso-shell {
    padding: 18px clamp(12px, 4vw, 22px) 36px;
    gap: 16px;
  }
  .plano-uso-summary-grid {
    grid-template-columns: 1fr;
  }
  .plano-uso-card--trial {
    grid-column: auto;
  }
  .plano-uso-usage-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .plano-uso-skeleton-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .plano-uso-meta-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .plano-uso-usage-grid {
    grid-template-columns: 1fr;
  }
  .plano-uso-skeleton-grid {
    grid-template-columns: 1fr;
  }
  .plano-uso-history-totals {
    grid-template-columns: 1fr;
  }
  .plano-uso-card-title-row {
    flex-direction: row;
    align-items: center;
  }
  .plano-uso-card-title {
    font-size: 1.3rem;
  }
}

/* Plano e Uso — dashboard premium v2 */
.plano-uso-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.plano-uso-eyebrow {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ra-text-soft);
}
.plano-uso-topbar-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.plano-uso-topbar-title-row h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.plano-uso-topbar-sub {
  margin: 6px 0 0;
  color: var(--ra-text-soft);
  font-size: 0.9rem;
  max-width: 52ch;
}
.plano-uso-plan-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(37, 99, 235, 0.1));
  color: #3730a3;
  border: 1px solid rgba(99, 102, 241, 0.22);
}
.plano-uso-topbar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.plano-uso-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.plano-uso-btn:disabled { opacity: 0.65; cursor: not-allowed; }
.plano-uso-btn--ghost {
  background: var(--ra-surface);
  border-color: var(--ra-border);
  color: var(--ra-text);
}
.plano-uso-btn--ghost:hover:not(:disabled) {
  border-color: var(--ra-primary);
  color: var(--ra-primary);
  background: var(--ra-primary-soft);
}
.plano-uso-btn--outline {
  background: var(--ra-surface);
  border-color: rgba(37, 99, 235, 0.35);
  color: var(--ra-primary);
  box-shadow: var(--ra-shadow-sm);
}
.plano-uso-btn--primary {
  background: linear-gradient(135deg, var(--ra-primary), var(--ra-primary-dark));
  color: #fff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
}
.plano-uso-btn--primary:hover:not(:disabled) { transform: translateY(-1px); }
.plano-uso-btn--lg { min-height: 48px; padding: 0 22px; font-size: 0.95rem; }

.plano-uso-skeleton-hero {
  height: 220px;
  border-radius: var(--ra-radius-lg);
  background: linear-gradient(90deg, #eef2f8 0%, #f7f9fc 50%, #eef2f8 100%);
  background-size: 200% 100%;
  animation: planoUsoShimmer 1.4s linear infinite;
}

.plano-uso-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
  gap: 24px;
  padding: 24px;
  border-radius: var(--ra-radius-lg);
  border: 1px solid var(--ra-border);
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 55%, rgba(239, 246, 255, 0.9) 100%);
  box-shadow: 0 14px 40px rgba(15, 35, 75, 0.07);
}
.plano-uso-hero-plan-name {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.plano-uso-hero-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.plano-uso-hero-price {
  margin: 6px 0 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ra-primary-dark);
}
.plano-uso-hero-meta {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--ra-text-soft);
  line-height: 1.45;
}
.plano-uso-cycle-pill {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(148, 163, 184, 0.16);
  color: var(--ra-text-soft);
}
.plano-uso-hero-features {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 14px;
}
.plano-uso-hero-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ra-text);
}
.plano-uso-hero-check {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(34, 197, 94, 0.16);
  color: #15803d;
  flex-shrink: 0;
}
.plano-uso-hero-check svg { width: 11px; height: 11px; }
.plano-uso-hero-trial {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--ra-radius-md);
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.18);
}
.plano-uso-hero-trial-text { margin: 0; font-size: 0.84rem; color: #1e40af; }

.plano-uso-hero-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.plano-uso-gauge {
  position: relative;
  width: 148px;
  height: 148px;
}
.plano-uso-gauge-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.plano-uso-gauge-track {
  stroke: rgba(148, 163, 184, 0.28);
}
.plano-uso-gauge-fill {
  stroke: #22c55e;
  stroke-dasharray: 326.73;
  transition: stroke-dashoffset 0.35s ease, stroke 0.2s ease;
}
.plano-uso-gauge[data-tone="warn"] .plano-uso-gauge-fill { stroke: #f59e0b; }
.plano-uso-gauge[data-tone="danger"] .plano-uso-gauge-fill { stroke: #ef4444; }
.plano-uso-gauge[data-tone="muted"] .plano-uso-gauge-fill { stroke: #94a3b8; }
.plano-uso-gauge-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--ra-text);
}
.plano-uso-health-pill {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}
.plano-uso-health-pill[data-tone="success"] { background: rgba(34, 197, 94, 0.14); color: #166534; }
.plano-uso-health-pill[data-tone="warn"] { background: rgba(245, 158, 11, 0.16); color: #92400e; }
.plano-uso-health-pill[data-tone="danger"] { background: rgba(239, 68, 68, 0.12); color: #991b1b; }
.plano-uso-hero-mini-bars {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plano-uso-mini-bar {
  display: grid;
  grid-template-columns: 1fr 1.2fr auto;
  gap: 8px;
  align-items: center;
  font-size: 0.76rem;
  color: var(--ra-text-soft);
}
.plano-uso-mini-bar-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.22);
  overflow: hidden;
}
.plano-uso-mini-bar-track span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #16a34a);
}
.plano-uso-mini-bar[data-tone="warn"] .plano-uso-mini-bar-track span {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}
.plano-uso-mini-bar[data-tone="danger"] .plano-uso-mini-bar-track span {
  background: linear-gradient(90deg, #ef4444, #b91c1c);
}

.plano-uso-usage-primary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.plano-uso-alerts-section .plano-uso-alerts-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.plano-uso-payment-block {
  padding: 20px;
  border-radius: var(--ra-radius-lg);
  border: 1px solid var(--ra-border);
  background: var(--ra-surface);
  box-shadow: var(--ra-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.plano-uso-pay-summary,
.plano-uso-pay-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.plano-uso-pay-card {
  padding: 14px 16px;
  border-radius: var(--ra-radius-md);
  border: 1px solid var(--ra-border);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.plano-uso-pay-card--static { cursor: default; }
.plano-uso-pay-card:not(.plano-uso-pay-card--static):hover {
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 8px 20px rgba(15, 35, 75, 0.06);
}
.plano-uso-pay-card-kicker {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ra-text-soft);
  margin-bottom: 4px;
}
.plano-uso-pay-card strong {
  display: block;
  font-size: 0.95rem;
  color: var(--ra-text);
}
.plano-uso-pay-card small {
  display: block;
  margin-top: 4px;
  font-size: 0.76rem;
  color: var(--ra-text-soft);
  line-height: 1.35;
}
.plano-uso-pay-email-val {
  word-break: break-all;
  font-size: 0.88rem !important;
}
.plano-uso-recurring-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: var(--ra-radius-md);
  background: linear-gradient(90deg, rgba(239, 246, 255, 0.95), rgba(219, 234, 254, 0.65));
  border: 1px solid rgba(37, 99, 235, 0.2);
}
.plano-uso-recurring-banner p {
  margin: 0;
  flex: 1;
  font-size: 0.86rem;
  color: #1e3a5f;
  min-width: 200px;
}
.plano-uso-payment-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.plano-uso-structure-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.plano-uso-structure-card {
  padding: 18px 16px;
  border-radius: var(--ra-radius-md);
  border: 1px solid var(--ra-border);
  background: var(--ra-surface);
  box-shadow: var(--ra-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plano-uso-structure-card strong {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ra-text);
}
.plano-uso-structure-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ra-text);
}
.plano-uso-structure-card small {
  font-size: 0.76rem;
  color: var(--ra-text-soft);
}
.plano-uso-support-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-radius: var(--ra-radius-md);
  background: rgba(239, 246, 255, 0.7);
  border: 1px solid rgba(37, 99, 235, 0.16);
}

.plano-uso-payment-modal {
  position: fixed;
  inset: 0;
  z-index: 10120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 24px);
  pointer-events: auto;
}
.plano-uso-payment-modal[hidden] { display: none !important; }
body.plano-uso-modal-open { overflow: hidden; }
.plano-uso-payment-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.plano-uso-payment-modal-panel {
  position: relative;
  z-index: 1;
  width: min(640px, 100%);
  max-height: min(90vh, 880px);
  overflow: auto;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 28px 80px rgba(15, 35, 75, 0.22);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.plano-uso-payment-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.plano-uso-payment-modal-head h3 {
  margin: 0 0 4px;
  font-size: 1.2rem;
}
.plano-uso-modal-eyebrow {
  margin: 0 0 4px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ra-primary);
}
.plano-uso-modal-lead {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ra-text-soft);
  line-height: 1.45;
  max-width: 42ch;
}
.plano-uso-modal-close {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--ra-border);
  background: var(--ra-surface);
  color: var(--ra-text-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.plano-uso-modal-close:hover {
  background: var(--ra-primary-soft);
  color: var(--ra-primary);
  border-color: rgba(37, 99, 235, 0.35);
}
.plano-uso-modal-close svg { width: 18px; height: 18px; }
.plano-uso-modal-section { display: flex; flex-direction: column; gap: 10px; }
.plano-uso-modal-section-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ra-text-soft);
}
.plano-uso-pay-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.plano-uso-pay-options--methods {
  grid-template-columns: repeat(3, 1fr);
}
.plano-uso-pay-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 2px solid var(--ra-border);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  font: inherit;
  color: inherit;
}
.plano-uso-pay-option--compact {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 12px 10px;
}
.plano-uso-pay-option:hover:not(:disabled) {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 8px 22px rgba(15, 35, 75, 0.08);
}
.plano-uso-pay-option[data-selected="1"] {
  border-color: var(--ra-primary);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.95), #fff);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
}
.plano-uso-pay-option:disabled,
.plano-uso-pay-option[hidden] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.plano-uso-pay-option-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ra-primary-soft);
  color: var(--ra-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.plano-uso-pay-option-text strong {
  display: block;
  font-size: 0.92rem;
  margin-bottom: 2px;
}
.plano-uso-pay-option-text small {
  display: block;
  font-size: 0.76rem;
  color: var(--ra-text-soft);
  line-height: 1.35;
  font-weight: 500;
}
.plano-uso-pay-card--psp {
  background: linear-gradient(135deg, rgba(0, 158, 227, 0.06), rgba(37, 99, 235, 0.04));
  border-color: rgba(0, 158, 227, 0.22);
}
.plano-uso-field--email small {
  font-size: 0.76rem;
  color: var(--ra-text-soft);
  font-weight: 500;
}
.plano-uso-method-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ra-text-soft);
}
.plano-uso-modal-recurring {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--ra-radius-md);
  background: rgba(239, 246, 255, 0.95);
  border: 1px solid rgba(37, 99, 235, 0.2);
}
.plano-uso-modal-recurring p { margin: 0; font-size: 0.84rem; color: #1e3a5f; line-height: 1.45; }
.plano-uso-modal-secure {
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--ra-text-soft);
}
.plano-uso-payment-modal-foot {
  justify-content: space-between;
}
@media (max-width: 640px) {
  .plano-uso-pay-options { grid-template-columns: 1fr; }
  .plano-uso-pay-options--methods { grid-template-columns: 1fr; }
}
.plano-uso-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
}
.plano-uso-field input {
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--ra-border);
  padding: 0 12px;
  font: inherit;
}
.plano-uso-modal-recurring {
  padding: 12px 14px;
  border-radius: var(--ra-radius-md);
  background: rgba(239, 246, 255, 0.9);
  border: 1px solid rgba(37, 99, 235, 0.18);
}
.plano-uso-checkout-error {
  margin: 0;
  color: #b91c1c;
  font-size: 0.86rem;
  font-weight: 600;
}
.plano-uso-payment-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.plano-uso-psp-env {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ra-text-soft);
}
.plano-uso-select--compact select {
  min-height: 36px;
  font-size: 0.82rem;
}

/* Modal Gerenciar assinatura (premium) */
.plano-uso-manage-panel {
  width: min(960px, 100%);
  max-height: min(92vh, 920px);
  padding: clamp(20px, 2.5vw, 28px);
  gap: 20px;
}
.plano-uso-manage-head h3 {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.plano-uso-manage-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.plano-uso-manage-section-title {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ra-text);
}
.plano-uso-manage-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}
.plano-uso-manage-section-head .plano-uso-manage-section-title { margin: 0; }
.plano-uso-manage-section-sub {
  margin: 0;
  font-size: 0.84rem;
  color: var(--ra-text-soft);
}
.plano-uso-manage-current-card {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.9), #fff);
  box-shadow: 0 10px 28px rgba(15, 35, 75, 0.06);
}
.plano-uso-manage-current-main {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.plano-uso-manage-plan-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.28);
  flex-shrink: 0;
}
.plano-uso-manage-current-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.plano-uso-manage-current-title-row h5 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}
.plano-uso-manage-price {
  margin: 0 0 4px;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ra-primary);
}
.plano-uso-manage-next {
  margin: 0 0 10px;
  font-size: 0.84rem;
  color: var(--ra-text-soft);
}
.plano-uso-manage-features {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--ra-text-soft);
}
.plano-uso-manage-features li,
.plano-uso-manage-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.plano-uso-manage-check {
  color: var(--ra-primary);
  font-weight: 800;
  line-height: 1.2;
}
.plano-uso-manage-current-usage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.plano-uso-manage-usage-row[data-tone="success"] .plano-uso-manage-usage-track span { background: #22c55e; }
.plano-uso-manage-usage-row[data-tone="warn"] .plano-uso-manage-usage-track span { background: #f59e0b; }
.plano-uso-manage-usage-row[data-tone="danger"] .plano-uso-manage-usage-track span { background: #ef4444; }
.plano-uso-manage-usage-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.82rem;
  margin-bottom: 6px;
}
.plano-uso-manage-usage-head strong { font-size: 0.84rem; }
.plano-uso-manage-usage-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.9);
  overflow: hidden;
}
.plano-uso-manage-usage-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ra-primary);
  transition: width 0.25s ease;
}
.plano-uso-manage-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.plano-uso-manage-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--ra-border);
  background: #fff;
  min-height: 100%;
}
.plano-uso-manage-plan-card.is-featured {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.12);
}
.plano-uso-manage-plan-card.is-current {
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.7), #fff);
}
.plano-uso-manage-plan-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ra-primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.plano-uso-manage-plan-card h5 {
  margin: 8px 0 0;
  font-size: 0.95rem;
  font-weight: 800;
}
.plano-uso-manage-plan-price {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ra-primary);
}
.plano-uso-manage-plan-price small {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ra-text-soft);
}
.plano-uso-manage-plan-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  flex: 1;
  font-size: 0.8rem;
  color: var(--ra-text-soft);
}
.plano-uso-manage-plan-card .plano-uso-btn { width: 100%; margin-top: auto; }
.plano-uso-manage-pay-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 14px;
  align-items: start;
}
.plano-uso-manage-pay-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plano-uso-manage-mp-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #fff;
}
.plano-uso-manage-mp-brand {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}
.plano-uso-manage-mp-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #00b1ea, #009ee3);
  color: #fff;
  font-weight: 900;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.plano-uso-manage-mp-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.plano-uso-manage-mp-pill {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ra-primary-soft);
  color: var(--ra-primary);
  font-size: 0.68rem;
  font-weight: 800;
}
.plano-uso-manage-mp-brand small {
  display: block;
  font-size: 0.78rem;
  color: var(--ra-text-soft);
}
.plano-uso-manage-mp-sub { margin-top: 2px; }
.plano-uso-manage-env-card {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), #fff);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plano-uso-manage-env-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
}
.plano-uso-manage-env-dot[data-tone="warn"] {
  background: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
}
.plano-uso-manage-env-dot[data-tone="neutral"] {
  background: #94a3b8;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.15);
}
.plano-uso-manage-env-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
}
.plano-uso-manage-env-text {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ra-text-soft);
  line-height: 1.45;
  flex: 1;
}
.plano-uso-manage-foot {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  border-top: 1px solid var(--ra-border);
  padding-top: 14px;
}
.plano-uso-manage-foot-note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ra-text-soft);
}
.plano-uso-manage-foot-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.plano-uso-manage-help-link {
  align-self: flex-end;
  border: 0;
  background: none;
  color: var(--ra-primary);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.plano-uso-manage-help-link:hover { text-decoration: underline; }
.plano-uso-btn--sm {
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.82rem;
}

@media (max-width: 900px) {
  .plano-uso-manage-current-card,
  .plano-uso-manage-pay-grid,
  .plano-uso-manage-plans { grid-template-columns: 1fr; }
  .plano-uso-manage-mp-card { flex-direction: column; align-items: stretch; }
}

@media (max-width: 1100px) {
  .plano-uso-hero { grid-template-columns: 1fr; }
  .plano-uso-structure-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .plano-uso-usage-primary { grid-template-columns: 1fr; }
  .plano-uso-pay-summary,
  .plano-uso-pay-cards { grid-template-columns: 1fr; }
  .plano-uso-structure-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * Cockpit — modal foto do cliente (Situação atual)
 * --------------------------------------------------------------------------- */
.admin-cockpit-next-avatar[data-cockpit-client-avatar-trigger] {
  cursor: pointer;
  border: none;
  padding: 0;
  font: inherit;
  flex-shrink: 0;
}

.admin-cockpit-next-avatar[data-cockpit-client-avatar-trigger]:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.admin-cockpit-client-avatar-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 78;
  background: rgba(15, 23, 42, 0.45);
  display: grid;
  place-items: center;
  padding: 1rem;
}

.admin-cockpit-client-avatar-modal-backdrop[hidden] {
  display: none !important;
}

.admin-cockpit-client-avatar-modal {
  width: min(440px, calc(100vw - 2rem));
  max-height: calc(var(--reservaai-vh, 100vh) - 2rem);
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(205, 219, 240, 0.98);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 1.25rem 1.35rem 1.15rem;
  display: grid;
  gap: 1rem;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.75) inset,
    0 22px 56px rgba(15, 23, 42, 0.14),
    0 10px 28px rgba(37, 99, 235, 0.07);
}

.admin-cockpit-client-avatar-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
}

.admin-cockpit-client-avatar-modal-kicker {
  margin: 0 0 0.15rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.admin-cockpit-client-avatar-modal-head strong {
  font-size: 1.08rem;
  letter-spacing: -0.02em;
  color: #132f58;
}

.admin-cockpit-client-avatar-modal-preview-wrap {
  display: grid;
  place-items: center;
  min-height: 200px;
  border-radius: 14px;
  background: linear-gradient(145deg, #f1f5f9, #e2e8f0);
  border: 1px solid rgba(148, 163, 184, 0.35);
  overflow: hidden;
}

.admin-cockpit-client-avatar-modal-preview {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  display: block;
}

.admin-cockpit-client-avatar-modal-placeholder {
  width: 120px;
  height: 120px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(140deg, #2b4f97, #3b82f6);
}

.admin-cockpit-client-avatar-modal-hint {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: #64748b;
  padding: 0 0.1rem;
}

.admin-cockpit-client-avatar-modal-body-actions {
  display: grid;
  gap: 0.65rem;
}

.admin-cockpit-client-avatar-modal-phase[hidden] {
  display: none !important;
}

.admin-cockpit-client-avatar-modal-btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

/*
 * Quando o botão "Remover foto" está visível (cliente já tem foto salva), o phase idle
 * passa a ter 3 botões: Escolher imagem / Tirar foto / Remover foto. Manter Remover ocupando
 * a linha inteira embaixo para destacar a ação destrutiva.
 */
.admin-cockpit-client-avatar-modal-btn-row:has(> .admin-cockpit-client-avatar-modal-btn-remove:not([hidden])) {
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
}

.admin-cockpit-client-avatar-modal-btn-row > .admin-cockpit-client-avatar-modal-btn-remove:not([hidden]) {
  grid-column: 1 / -1;
}

.admin-cockpit-client-avatar-modal-btn-row--camera {
  grid-template-columns: 1.35fr 1fr;
  align-items: stretch;
}

@media (max-width: 380px) {
  .admin-cockpit-client-avatar-modal-btn-row,
  .admin-cockpit-client-avatar-modal-btn-row--camera {
    grid-template-columns: 1fr;
  }
}

.admin-cockpit-client-avatar-modal .btn.btn-ghost.admin-cockpit-client-avatar-modal-btn-remove {
  border-color: rgba(220, 38, 38, 0.45) !important;
  color: #b91c1c !important;
  -webkit-text-fill-color: #b91c1c;
  background: linear-gradient(180deg, #fff5f5 0%, #fee2e2 100%) !important;
}

.admin-cockpit-client-avatar-modal .btn.btn-ghost.admin-cockpit-client-avatar-modal-btn-remove:hover:not(:disabled) {
  border-color: rgba(220, 38, 38, 0.75) !important;
  color: #991b1b !important;
  -webkit-text-fill-color: #991b1b;
  background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%) !important;
}

.admin-cockpit-client-avatar-modal-footer {
  margin-top: 0.1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(226, 232, 240, 0.95);
}

.admin-cockpit-client-avatar-modal-save {
  width: 100%;
  min-height: 46px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 12px !important;
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.28);
}

.admin-cockpit-client-avatar-modal-btn-capture {
  min-height: 44px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 12px !important;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.25);
}

/* Modal fundo claro: btn-ghost global assume texto claro (marketing) — forçar contraste */
.admin-cockpit-client-avatar-modal .btn.btn-ghost {
  border: 1px solid #94a3b8 !important;
  color: #0f172a !important;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
  -webkit-text-fill-color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  min-height: 44px;
  font-weight: 600;
  border-radius: 12px !important;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.admin-cockpit-client-avatar-modal .btn.btn-ghost:hover:not(:disabled) {
  border-color: #64748b !important;
  color: #020617 !important;
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important;
  -webkit-text-fill-color: #020617;
}

.admin-cockpit-client-avatar-modal .btn.btn-ghost:active:not(:disabled) {
  transform: translateY(0);
}

.admin-cockpit-client-avatar-modal .btn.btn-ghost:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.admin-cockpit-client-avatar-modal-preview-wrap [hidden],
.admin-cockpit-client-avatar-modal-webcam-wrap[hidden] {
  display: none !important;
}

.admin-cockpit-client-avatar-modal-webcam-wrap {
  width: 100%;
  max-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f172a;
}

.admin-cockpit-client-avatar-modal-video {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  vertical-align: middle;
}

.admin-cockpit-client-avatar-modal-feedback {
  margin: 0;
  font-size: 0.82rem;
  min-height: 1.25em;
}

.admin-cockpit-client-avatar-modal-feedback[data-tone='success'] {
  color: #15803d;
}

.admin-cockpit-client-avatar-modal-feedback[data-tone='warn'] {
  color: #b45309;
}

.admin-cockpit-client-avatar-modal-feedback[data-tone='neutral'] {
  color: #475569;
}

/* Home — KPIs e resumo semanal (conteúdo extraído do Cockpit operacional) */
.admin-home-panel.admin-panel {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.admin-page[data-admin-panel-active="home"] .admin-content {
  padding-top: 0.55rem;
}

/* Home premium layout — alinhado ao theme_reservaai (contexto.md) */
.admin-page[data-admin-panel-active="home"] {
  --admin-home-accent: var(--ra-primary);
  --admin-home-accent-soft: var(--ra-primary-soft);
  --admin-home-accent-mid: #bfdbfe;
}

.admin-page[data-admin-panel-active="home"] .admin-home-premium {
  background: transparent;
}

.admin-page[data-admin-panel-active="home"] .admin-home-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.admin-page[data-admin-panel-active="home"] .admin-home-premium {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero,
.admin-page[data-admin-panel-active="home"] .admin-home-panel-card:not(.ra-chart-card),
.admin-page[data-admin-panel-active="home"] .admin-home-kpi-card {
  background: var(--ra-surface);
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-xl);
  box-shadow: var(--ra-shadow-sm);
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(min-content, max-content) minmax(250px, 300px);
  align-items: center;
  gap: 20px 24px;
  padding: 24px 28px;
  overflow: hidden;
  background: #ffffff;
  border-color: var(--ra-border);
  min-height: 0;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__summary {
  min-width: 0;
  justify-self: start;
  width: 100%;
  max-width: min(100%, 40rem);
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__profile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  min-width: 0;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__ratings-slot.admin-home-ratings-row {
  display: block;
  min-width: 0;
  max-width: 200px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__ratings-slot[hidden] {
  display: none !important;
}

.admin-page[data-admin-panel-active="home"] .admin-home-ratings-card--hero-inline {
  border-radius: var(--ra-radius-lg);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.admin-page[data-admin-panel-active="home"] .admin-home-ratings-card--hero-inline .admin-home-ratings-overview-btn {
  padding: 14px 14px 12px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-ratings-card--hero-inline .admin-home-ratings-overview-head {
  margin-bottom: 8px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-ratings-card--hero-inline .admin-home-ratings-overview-head h3 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ra-text-soft);
}

.admin-page[data-admin-panel-active="home"] .admin-home-ratings-card--hero-inline .admin-home-ratings-overview__score {
  font-size: 1.65rem;
}

.admin-page[data-admin-panel-active="home"] .admin-home-ratings-card--hero-inline .admin-home-stars__star {
  font-size: 1.05rem;
}

.admin-page[data-admin-panel-active="home"] .admin-home-ratings-card--hero-inline .admin-home-ratings-overview__count {
  font-size: 0.75rem;
}

.admin-page[data-admin-panel-active="home"] .admin-home-ratings-card--hero-inline .admin-home-ratings-overview__trend {
  font-size: 0.72rem;
  line-height: 1.25;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ra-text-soft);
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__eyebrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #eff6ff;
  color: #2563eb;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__title {
  margin: 0 0 18px;
  font-size: clamp(1.2rem, 2.1vw, 1.65rem);
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.025em;
  line-height: 1.2;
  max-width: 22ch;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(min-content, max-content));
  gap: 0;
  align-items: start;
  justify-content: start;
  width: fit-content;
  max-width: 100%;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 16px;
  margin: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  min-width: 0;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__stat:first-child {
  padding-left: 0;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__stat:not(:last-child) {
  border-right: 1px solid #e2e8f0;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__stat strong {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__stat span {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ra-text-soft);
  line-height: 1.25;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__stat:hover strong,
.admin-page[data-admin-panel-active="home"] .admin-home-hero__stat:focus-visible strong {
  color: var(--ra-primary);
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__stat:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.35);
  outline-offset: 2px;
  border-radius: 8px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__avatar-col {
  position: relative;
  width: 148px;
  height: 148px;
  flex-shrink: 0;
  margin: 0;
  align-self: center;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  background: #fff;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__avatar-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 4px solid #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__avatar-img[hidden],
.admin-page[data-admin-panel-active="home"] .admin-home-hero__avatar-col.has-avatar-initials .admin-home-hero__avatar-img {
  display: none !important;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__avatar-initials[hidden],
.admin-page[data-admin-panel-active="home"] .admin-home-hero__avatar-col.has-avatar-photo .admin-home-hero__avatar-initials {
  display: none !important;
}

.admin-page[data-admin-panel-active="home"] .admin-home-kpi-grid#adminHomeBrief {
  display: none;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__goal {
  margin-top: 4px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__goal-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--ra-text-soft);
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__goal-meta strong {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ra-primary);
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__goal-progress {
  margin-top: 6px;
  height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__goal-bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #4f46e5);
  transition: width 0.35s ease;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__revenue {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 18px 18px 16px;
  margin: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  min-height: 0;
  position: relative;
  align-self: stretch;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__revenue[data-home-data-source="partial"]::after {
  display: none;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__revenue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__revenue-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ra-text-soft);
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__revenue-tag {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #2563eb;
  background: #eff6ff;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__revenue-value {
  margin: 0;
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  font-weight: 800;
  color: var(--ra-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__revenue-updated {
  margin: 0 0 6px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ra-text-faint);
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__revenue-visual {
  position: relative;
  min-height: 72px;
  margin-top: 2px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__spark {
  width: 100%;
  height: 72px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__spark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.admin-page[data-admin-panel-active="home"] .admin-home-hero__revenue-badge {
  position: absolute;
  right: 0;
  bottom: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ra-success);
  background: var(--ra-success-bg);
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

.admin-page[data-admin-panel-active="home"] [data-home-data-source="demo"] {
  position: relative;
}

.admin-page[data-admin-panel-active="home"] [data-home-data-source="partial"]::after {
  content: "Parcial";
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ra-info-text, #1d4ed8);
  background: var(--ra-info-bg);
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
}

.admin-page[data-admin-panel-active="home"] [data-home-data-source="partial"] {
  position: relative;
}

.admin-page[data-admin-panel-active="home"] [data-home-data-source="demo"]::after {
  content: "Estimativa";
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ra-warning-text);
  background: var(--ra-warning-bg);
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
}


.admin-page[data-admin-panel-active="home"] .admin-home-premium-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 20px;
  align-items: start;
}

.admin-page[data-admin-panel-active="home"] .admin-home-premium-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.admin-page[data-admin-panel-active="home"] .admin-home-kpi-grid.ra-kpi-grid--5 {
  gap: 14px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-page[data-admin-panel-active="home"] .admin-home-kpi-card.ra-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 14px;
  min-height: 118px;
  cursor: pointer;
  border-radius: var(--ra-radius-xl);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.admin-page[data-admin-panel-active="home"] .admin-home-kpi-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.admin-page[data-admin-panel-active="home"] .admin-home-kpi-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-page[data-admin-panel-active="home"] .admin-home-kpi-card__icon svg {
  width: 20px;
  height: 20px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-kpi-card--violet .admin-home-kpi-card__icon {
  background: #ede9fe;
  color: #6d28d9;
}

.admin-page[data-admin-panel-active="home"] .admin-home-kpi-card--blue .admin-home-kpi-card__icon {
  background: #dbeafe;
  color: #2563eb;
}

.admin-page[data-admin-panel-active="home"] .admin-home-kpi-card--teal .admin-home-kpi-card__icon {
  background: #ccfbf1;
  color: #0d9488;
}

.admin-page[data-admin-panel-active="home"] .admin-home-kpi-card--amber .admin-home-kpi-card__icon {
  background: #fef3c7;
  color: #d97706;
}

.admin-page[data-admin-panel-active="home"] .admin-home-kpi-card--green .admin-home-kpi-card__icon {
  background: #dcfce7;
  color: #16a34a;
}

.admin-page[data-admin-panel-active="home"] .admin-home-kpi-card.ra-kpi-card:hover {
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: var(--ra-shadow-md);
  transform: translateY(-1px);
}

.admin-page[data-admin-panel-active="home"] .admin-home-kpi-card:focus-visible {
  outline: 2px solid var(--admin-home-accent);
  outline-offset: 2px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-kpi-card__label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ra-text-soft);
  line-height: 1.25;
}

.admin-page[data-admin-panel-active="home"] .admin-home-kpi-card__value {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--ra-text);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.admin-page[data-admin-panel-active="home"] .admin-home-kpi-card__sub {
  font-size: 0.72rem;
  color: var(--ra-text-faint);
  margin: 0;
}

.admin-page[data-admin-panel-active="home"] .admin-home-kpi-card__delta {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
}

.admin-page[data-admin-panel-active="home"] .admin-home-kpi-card__delta.is-up {
  color: var(--ra-success);
}

.admin-page[data-admin-panel-active="home"] .admin-home-kpi-card__delta.is-down {
  color: var(--ra-danger);
}

.admin-page[data-admin-panel-active="home"] .admin-home-kpi-card__delta.is-warn {
  color: var(--ra-warning);
}

.admin-page[data-admin-panel-active="home"] .admin-home-charts-row {
  display: grid;
  grid-template-columns: 1.35fr 0.95fr 0.95fr;
  gap: 16px;
  align-items: stretch;
}

.admin-page[data-admin-panel-active="home"] .admin-home-ratings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-ratings-card {
  padding: 0;
  overflow: hidden;
}

.admin-page[data-admin-panel-active="home"] .admin-home-ratings-overview-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 20px 22px 18px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border-radius: inherit;
  transition: background 0.18s ease;
}

.admin-page[data-admin-panel-active="home"] .admin-home-ratings-overview-btn:hover {
  background: rgba(37, 99, 235, 0.04);
}

.admin-page[data-admin-panel-active="home"] .admin-home-ratings-overview-btn:focus-visible {
  outline: 2px solid var(--ra-primary);
  outline-offset: -2px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-ratings-overview-head {
  margin-bottom: 10px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-ratings-overview__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-ratings-overview__score {
  margin: 0;
  font-size: 2.35rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ra-text);
}

.admin-page[data-admin-panel-active="home"] .admin-home-stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

.admin-page[data-admin-panel-active="home"] .admin-home-stars__star {
  font-size: 1.35rem;
  color: #e2e8f0;
  text-shadow: none;
}

.admin-page[data-admin-panel-active="home"] .admin-home-stars__star.is-full {
  color: #f59e0b;
}

.admin-page[data-admin-panel-active="home"] .admin-home-stars__star.is-half {
  background: linear-gradient(90deg, #f59e0b 50%, #e2e8f0 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.admin-page[data-admin-panel-active="home"] .admin-home-ratings-overview__count {
  margin: 2px 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ra-text-soft);
}

.admin-page[data-admin-panel-active="home"] .admin-home-ratings-overview__trend {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: #16a34a;
}

.admin-page[data-admin-panel-active="home"] .admin-home-featured-pros {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-featured-pro-row {
  display: grid;
  grid-template-columns: 22px 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px 10px;
  margin: 0;
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-md);
  background: #fafcff;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.admin-page[data-admin-panel-active="home"] .admin-home-featured-pro-row:hover {
  border-color: #bfdbfe;
  background: var(--ra-primary-soft);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08);
}

.admin-page[data-admin-panel-active="home"] .admin-home-featured-pro-row:focus-visible {
  outline: 2px solid var(--ra-primary);
  outline-offset: 2px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-featured-pro-rank {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ra-text-faint);
  text-align: center;
}

.admin-page[data-admin-panel-active="home"] .admin-home-featured-pro-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ra-primary);
  background: var(--ra-primary-soft);
  overflow: hidden;
  flex-shrink: 0;
}

.admin-page[data-admin-panel-active="home"] .admin-home-featured-pro-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-page[data-admin-panel-active="home"] .admin-home-featured-pro-avatar.has-avatar-photo {
  padding: 0;
  background: #fff;
  color: inherit;
  font-size: 0;
}

.admin-page[data-admin-panel-active="home"] .admin-home-featured-pro-main {
  min-width: 0;
}

.admin-page[data-admin-panel-active="home"] .admin-home-featured-pro-name {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ra-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-page[data-admin-panel-active="home"] .admin-home-featured-pro-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--ra-text-soft);
}

.admin-page[data-admin-panel-active="home"] .admin-home-featured-pro-meta .admin-home-stars__star {
  font-size: 0.82rem;
}

.admin-page[data-admin-panel-active="home"] .admin-home-featured-pro-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
}

.admin-page[data-admin-panel-active="home"] .admin-home-featured-pro-trend {
  font-size: 0.72rem;
  font-weight: 700;
  color: #16a34a;
  white-space: nowrap;
}

.admin-page[data-admin-panel-active="home"] .admin-home-featured-pros-all.ra-btn {
  height: 42px;
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.85);
}

.admin-page[data-admin-panel-active="home"] .admin-home-finance-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-panel-card {
  padding: 18px 18px 16px;
  min-width: 0;
}

.admin-page[data-admin-panel-active="home"] .admin-home-panel-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-panel-card-head h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ra-text);
}

.admin-page[data-admin-panel-active="home"] .admin-home-panel-card-sub {
  font-size: 0.72rem;
  color: var(--ra-text-faint);
}

.admin-page[data-admin-panel-active="home"] .admin-home-week-chart .admin-week-summary-metrics,
.admin-page[data-admin-panel-active="home"] .admin-home-week-chart .admin-week-summary-head p,
.admin-page[data-admin-panel-active="home"] .admin-home-week-chart .admin-week-summary-total {
  display: none;
}

.admin-page[data-admin-panel-active="home"] .admin-home-week-chart .admin-week-summary-shell {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.admin-page[data-admin-panel-active="home"] .admin-home-week-chart .admin-week-summary-head h2 {
  display: none;
}

.admin-page[data-admin-panel-active="home"] .admin-home-week-chart .admin-week-summary-chart-card {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.admin-page[data-admin-panel-active="home"] .admin-home-week-revenue-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.admin-page[data-admin-panel-active="home"] .admin-home-week-revenue-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-week-revenue-head strong {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ra-text);
}

.admin-page[data-admin-panel-active="home"] .admin-home-week-revenue-head span {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ra-primary);
}

.admin-page[data-admin-panel-active="home"] .admin-home-week-chart .admin-cockpit-week-line-chart.admin-week-chart-stack {
  min-height: 0;
  gap: 0.5rem;
  padding: 0;
  display: grid;
  grid-template-rows: auto auto auto;
}

.admin-page[data-admin-panel-active="home"] .admin-home-week-chart .admin-week-chart-plot {
  border-radius: 18px;
  background: var(--chart-bg, #f8fafc);
  border: 1px solid var(--chart-border, #e2e8f0);
  padding: 8px 6px 4px;
  overflow: visible;
}

.admin-page[data-admin-panel-active="home"] .admin-home-week-chart .admin-week-chart-plot svg {
  display: block;
  width: 100%;
  height: 220px;
  overflow: visible;
}

.admin-page[data-admin-panel-active="home"] .admin-home-week-chart .admin-week-chart-grid-line {
  stroke: var(--chart-border, #e2e8f0);
  stroke-width: 0.35;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1.35 1.35;
}

.admin-page[data-admin-panel-active="home"] .admin-home-week-chart .admin-week-chart-y-tick {
  fill: var(--chart-text-muted, #64748b);
  font-size: 3.15px;
  font-weight: 600;
  font-family: Inter, system-ui, sans-serif;
}

.admin-page[data-admin-panel-active="home"] .admin-home-week-chart .admin-week-chart-line-curve {
  fill: none;
  stroke: var(--ra-primary, #2563eb);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.admin-page[data-admin-panel-active="home"] .admin-home-week-chart .admin-week-chart-dot.is-active {
  fill: var(--ra-primary, #2563eb);
  stroke: #ffffff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.admin-page[data-admin-panel-active="home"] .admin-home-week-chart .admin-week-chart-dot.is-quiet {
  fill: #cbd5e1;
  stroke: #ffffff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.admin-page[data-admin-panel-active="home"] .admin-home-week-chart .admin-week-chart-axis-x.admin-cockpit-week-line-labels {
  gap: 0.35rem;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.admin-page[data-admin-panel-active="home"] .admin-home-week-chart .admin-week-chart-axis-x small {
  display: block;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ra-text-faint);
  line-height: 1.2;
}

.admin-page[data-admin-panel-active="home"] .admin-home-week-chart .admin-week-chart-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.35rem;
  padding: 10px 4px 0;
  border-top: 1px solid var(--chart-border, #e2e8f0);
}

.admin-page[data-admin-panel-active="home"] .admin-home-week-chart .admin-week-chart-foot-msg {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ra-text-soft);
  flex: 1;
  min-width: 0;
}

.admin-page[data-admin-panel-active="home"] .admin-home-week-chart .admin-week-chart-foot-avg {
  text-align: right;
  flex-shrink: 0;
}

.admin-page[data-admin-panel-active="home"] .admin-home-week-chart .admin-week-chart-foot-avg span {
  display: block;
  font-size: 0.68rem;
  color: var(--ra-text-faint);
}

.admin-page[data-admin-panel-active="home"] .admin-home-week-chart .admin-week-chart-foot-avg strong {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ra-text);
}

.admin-page[data-admin-panel-active="home"] .admin-home-heatmap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-heatmap-row {
  display: grid;
  grid-template-columns: 32px repeat(7, 1fr);
  gap: 3px;
  align-items: center;
}

.admin-page[data-admin-panel-active="home"] .admin-home-heatmap-row--head {
  margin-bottom: 2px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-heatmap-row span {
  font-size: 0.68rem;
  color: var(--ra-text-faint);
  text-align: center;
}

.admin-page[data-admin-panel-active="home"] .admin-home-heatmap-row span:first-child {
  text-align: right;
  padding-right: 4px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-heatmap-cell {
  height: 18px;
  border-radius: 4px;
  background: #ede9fe;
}

.admin-page[data-admin-panel-active="home"] .admin-home-services-rank {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-service-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: start;
}

.admin-page[data-admin-panel-active="home"] .admin-home-service-row__rank {
  font-size: 0.72rem;
  color: var(--ra-text-faint);
  padding-top: 2px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-service-row__bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-service-row__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
}

.admin-page[data-admin-panel-active="home"] .admin-home-service-row__meta strong {
  font-weight: 600;
  color: var(--ra-text);
}

.admin-page[data-admin-panel-active="home"] .admin-home-service-row__track {
  height: 6px;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
}

.admin-page[data-admin-panel-active="home"] .admin-home-service-row__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--ra-primary);
}

.admin-page[data-admin-panel-active="home"] .admin-home-payments-donut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-donut-svg {
  width: 120px;
  height: 120px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-payments-legend {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-payments-legend li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  list-style: none;
}

.admin-page[data-admin-panel-active="home"] .admin-home-payments-legend .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  display: inline-block;
}

.admin-page[data-admin-panel-active="home"] .admin-home-commission-value {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 4px 0;
  color: var(--ra-text);
}

.admin-page[data-admin-panel-active="home"] .admin-home-bills-list,
.admin-page[data-admin-panel-active="home"] .admin-home-payments-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-bill-row,
.admin-page[data-admin-panel-active="home"] .admin-home-pay-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
}

.admin-page[data-admin-panel-active="home"] .admin-home-bill-row small {
  display: block;
  color: var(--ra-text-faint);
  font-size: 0.72rem;
}

.admin-page[data-admin-panel-active="home"] .admin-home-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 16px;
  background: var(--ra-surface);
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-xl);
  box-shadow: var(--ra-shadow-sm);
}

.admin-page[data-admin-panel-active="home"] .admin-home-quick-btn.ra-btn {
  height: 42px;
  padding: 0 1rem;
  font-size: 0.82rem;
  white-space: nowrap;
}

.admin-page[data-admin-panel-active="home"] .admin-home-quick-btn.ra-btn:first-child {
  background: linear-gradient(135deg, var(--ra-primary), #4f46e5);
  color: #fff;
  border: none;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

.admin-page[data-admin-panel-active="home"] .admin-home-premium-aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-insight-card {
  border-radius: var(--ra-radius-lg);
  padding: 16px 18px;
  border: 1px solid transparent;
}

.admin-page[data-admin-panel-active="home"] .admin-home-insight-card h3 {
  margin: 0 0 8px;
  font-size: 0.88rem;
  font-weight: 700;
}

.admin-page[data-admin-panel-active="home"] .admin-home-insight-card--warn {
  background: #fff7ed;
  border-color: #fed7aa;
}

.admin-page[data-admin-panel-active="home"] .admin-home-insight-card--accent {
  background: var(--ra-primary-soft);
  border-color: #bfdbfe;
}

.admin-page[data-admin-panel-active="home"] .admin-home-insight-card--info {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.admin-page[data-admin-panel-active="home"] .admin-home-insight-card--success {
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.admin-page[data-admin-panel-active="home"] .admin-home-insight-text {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: var(--ra-text-soft);
  line-height: 1.45;
}

.admin-page[data-admin-panel-active="home"] .admin-home-insight-btn.ra-btn {
  margin-top: 4px;
  height: 42px;
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.72);
}

.admin-page[data-admin-panel-active="home"] .admin-home-insight-stock-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  padding: 4px 0;
}

.admin-page[data-admin-panel-active="home"] .admin-home-insight-stock-row strong {
  color: var(--ra-warning);
}

.admin-page[data-admin-panel-active="home"] .admin-home-top-clients {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-page[data-admin-panel-active="home"] .admin-home-top-client-row {
  display: grid;
  grid-template-columns: 20px 32px 1fr auto;
  gap: 10px;
  align-items: center;
}

.admin-page[data-admin-panel-active="home"] .admin-home-top-client-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--admin-home-accent-soft);
  color: var(--admin-home-accent);
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 700;
}

.admin-page[data-admin-panel-active="home"] .admin-home-top-client-rank {
  font-size: 0.72rem;
  color: var(--ra-text-faint);
}

.admin-page[data-admin-panel-active="home"] .admin-home-empty-hint {
  font-size: 0.8rem;
  color: var(--ra-text-faint);
  margin: 0;
  line-height: 1.35;
  word-break: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 1280px) {
  .admin-page[data-admin-panel-active="home"] .admin-home-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .admin-page[data-admin-panel-active="home"] .admin-home-charts-row {
    grid-template-columns: 1fr;
  }
  .admin-page[data-admin-panel-active="home"] .admin-home-finance-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .admin-page[data-admin-panel-active="home"] .admin-home-premium-body {
    grid-template-columns: 1fr;
  }
  .admin-page[data-admin-panel-active="home"] .admin-home-hero {
    grid-template-columns: 1fr;
    padding: 20px 18px;
    gap: 16px;
  }
  .admin-page[data-admin-panel-active="home"] .admin-home-hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 14px;
  }
  .admin-page[data-admin-panel-active="home"] .admin-home-hero__stat:nth-child(2) {
    border-right: 0;
  }
  .admin-page[data-admin-panel-active="home"] .admin-home-hero__stat:nth-child(odd) {
    border-right: 1px solid #e2e8f0;
  }
  .admin-page[data-admin-panel-active="home"] .admin-home-hero__avatar-col {
    display: none;
  }
  .admin-page[data-admin-panel-active="home"] .admin-home-hero__profile {
    justify-content: center;
    width: 100%;
    max-width: 100%;
  }
  .admin-page[data-admin-panel-active="home"] .admin-home-hero__ratings-slot.admin-home-ratings-row {
    max-width: min(100%, 280px);
  }
}

@media (max-width: 720px) {
  .admin-page[data-admin-panel-active="home"] .admin-home-kpi-grid {
    grid-template-columns: 1fr;
  }
  .admin-page[data-admin-panel-active="home"] .admin-home-finance-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
 * CALENDÁRIO PREMIUM (cal-pro) — soft blue, glassmorphism light
 * Inspirado em Google/Cron/Notion Calendar.
 * ============================================================ */

.cal-pro-shell {
  --cal-pro-bg: #f7f9fc;
  --cal-pro-surface: #ffffff;
  --cal-pro-surface-soft: rgba(247, 249, 252, 0.78);
  --cal-pro-border: rgba(15, 23, 42, 0.07);
  --cal-pro-border-strong: rgba(15, 23, 42, 0.1);
  --cal-pro-text: #0f172a;
  --cal-pro-text-soft: #475569;
  --cal-pro-text-muted: #94a3b8;
  --cal-pro-accent: #2563eb;
  --cal-pro-accent-soft: rgba(37, 99, 235, 0.08);
  --cal-pro-accent-grad: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --cal-pro-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --cal-pro-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
  --cal-pro-shadow-lg: 0 12px 36px rgba(15, 23, 42, 0.08);
  --cal-pro-radius-sm: 8px;
  --cal-pro-radius-md: 12px;
  --cal-pro-radius-lg: 16px;
  background: var(--cal-pro-bg);
  border-radius: 20px;
  border: 1px solid var(--cal-pro-border);
  overflow: hidden;
  box-shadow: var(--cal-pro-shadow-sm);
}

.admin-page[data-admin-panel-active="calendario"] .admin-panel[data-admin-panel="calendario"] {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.cal-pro-body {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 0;
  height: 100%;
  min-height: 0;
  background: var(--cal-pro-bg);
}

.cal-pro-body[data-cal-pro-sidebar="collapsed"],
.cal-pro-shell[data-cal-pro-sidebar="collapsed"] .cal-pro-body {
  grid-template-columns: 56px minmax(0, 1fr);
}

/* ----- Sidebar interna ----- */

.cal-pro-sidebar {
  position: relative;
  background: var(--cal-pro-surface);
  border-right: 1px solid var(--cal-pro-border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: width 0.18s ease;
}

.cal-pro-sidebar[data-collapsed="true"] {
  width: 56px;
}

.cal-pro-sidebar[data-collapsed="true"] .cal-pro-sidebar-scroll {
  display: none;
}

.cal-pro-sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cal-pro-sidebar-scroll::-webkit-scrollbar {
  width: 6px;
}
.cal-pro-sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
  border-radius: 999px;
}

.cal-pro-sidebar-collapse {
  position: absolute;
  top: 12px;
  right: -12px;
  z-index: 4;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cal-pro-surface);
  border: 1px solid var(--cal-pro-border-strong);
  color: var(--cal-pro-text-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--cal-pro-shadow-sm);
  transition: transform 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.cal-pro-sidebar-collapse:hover {
  color: var(--cal-pro-accent);
  background: var(--cal-pro-accent-soft);
}
.cal-pro-sidebar[data-collapsed="true"] .cal-pro-sidebar-collapse svg {
  transform: rotate(180deg);
}

.cal-pro-mini {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 4px 14px;
  border-bottom: 1px solid var(--cal-pro-border);
}

.cal-pro-mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 4px;
}
.cal-pro-mini-head strong {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--cal-pro-text);
  letter-spacing: -0.01em;
}
.cal-pro-mini-nav {
  display: inline-flex;
  gap: 2px;
}
.cal-pro-mini-nav-btn {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  color: var(--cal-pro-text-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.cal-pro-mini-nav-btn:hover {
  background: var(--cal-pro-accent-soft);
  color: var(--cal-pro-accent);
}

.cal-pro-mini-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 0 2px;
}
.cal-pro-mini-dow {
  font-size: 10px;
  text-align: center;
  color: var(--cal-pro-text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 0 6px;
}
.cal-pro-mini-cell {
  height: 28px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--cal-pro-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease, transform 0.1s ease;
  padding: 0;
}
.cal-pro-mini-cell:hover {
  background: var(--cal-pro-accent-soft);
}
.cal-pro-mini-cell.is-today {
  color: var(--cal-pro-accent);
  font-weight: 700;
}
.cal-pro-mini-cell.is-selected {
  background: var(--cal-pro-accent-grad);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.28);
}
.cal-pro-mini-cell.is-selected.is-today {
  color: #fff;
}
.cal-pro-mini-cell-blank {
  pointer-events: none;
}

.cal-pro-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 0;
}
.cal-pro-block-head {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--cal-pro-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 6px;
}
.cal-pro-block-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cal-pro-block-more {
  margin-top: 4px;
  align-self: flex-start;
  background: transparent;
  border: 0;
  color: var(--cal-pro-accent);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.cal-pro-block-more:hover {
  background: var(--cal-pro-accent-soft);
}

.cal-pro-filter-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--cal-pro-text);
  transition: background 0.12s ease, color 0.12s ease;
}
.cal-pro-filter-row:hover {
  background: rgba(241, 245, 249, 0.85);
}
.cal-pro-filter-row.is-active {
  background: rgba(241, 245, 252, 1);
  color: var(--cal-pro-text);
}
.cal-pro-filter-row.is-active.cal-pro-filter-row-all {
  background: var(--cal-pro-accent-soft);
  color: var(--cal-pro-accent);
}

.cal-pro-filter-row-leading {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(226, 232, 240, 0.6);
  color: var(--cal-pro-text-soft);
  overflow: hidden;
}
.cal-pro-filter-row-icon {
  background: var(--cal-pro-accent-soft);
  color: var(--cal-pro-accent);
}
.cal-pro-filter-row-avatar {
  background: rgba(226, 232, 240, 0.7);
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}
.cal-pro-filter-row-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cal-pro-filter-row-avatar-fallback {
  font-size: 11px;
  font-weight: 700;
}
.cal-pro-filter-row-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cal-pro-accent);
  flex: 0 0 auto;
  margin-left: 6px;
  margin-right: 6px;
}
.cal-pro-filter-row-svc .cal-pro-filter-row-leading {
  width: 16px;
  height: 16px;
  background: transparent;
  margin-left: 4px;
  margin-right: 4px;
}

.cal-pro-filter-row-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-pro-filter-row-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid rgba(148, 163, 184, 0.55);
  position: relative;
  background: #fff;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.cal-pro-filter-row.is-active .cal-pro-filter-row-check {
  background: var(--cal-pro-accent);
  border-color: var(--cal-pro-accent);
}
.cal-pro-filter-row.is-active .cal-pro-filter-row-check::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.cal-pro-filter-empty {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: var(--cal-pro-text-muted);
  padding: 6px 10px;
}

/* ----- Stage / Sub-barra ----- */

.cal-pro-stage {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--cal-pro-bg);
  border-radius: 0;
  min-height: 0;
}

.cal-pro-subbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 20px !important;
  background: var(--cal-pro-surface) !important;
  border-bottom: 1px solid var(--cal-pro-border) !important;
  border-radius: 0 !important;
  border: 0;
  border-bottom: 1px solid var(--cal-pro-border) !important;
  flex-wrap: wrap;
}
.cal-pro-subbar::before,
.cal-pro-subbar::after {
  display: none !important;
}
.cal-pro-subbar > div {
  margin: 0 !important;
}

/* Reset do estilo herdado de .calendar-stage-head span (que aplicava
   uppercase, font-weight 800, letter-spacing 0.07em) em todos os spans
   da sub-barra premium. */
.cal-pro-subbar span {
  display: inline !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: inherit !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
.cal-pro-subbar strong {
  display: inline-flex !important;
  margin: 0 !important;
  color: var(--cal-pro-text) !important;
}
/* Range fica capitalizado (estilo Google Calendar). */
.cal-pro-range {
  text-transform: capitalize !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}

.cal-pro-subbar-left,
.cal-pro-subbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cal-pro-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--cal-pro-surface);
  border: 1px solid var(--cal-pro-border-strong);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--cal-pro-text);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.cal-pro-pill:hover {
  border-color: rgba(37, 99, 235, 0.4);
  color: var(--cal-pro-accent);
  background: var(--cal-pro-accent-soft);
}

.cal-pro-arrow-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--cal-pro-surface);
  border: 1px solid var(--cal-pro-border-strong);
  border-radius: 10px;
  padding: 2px;
}
.cal-pro-arrow {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--cal-pro-text-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.cal-pro-arrow:hover {
  background: var(--cal-pro-accent-soft);
  color: var(--cal-pro-accent);
}

.cal-pro-range {
  display: inline-flex;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--cal-pro-text);
  letter-spacing: -0.01em;
  padding: 0 4px;
  text-transform: capitalize;
}

.cal-pro-segmented {
  display: inline-flex;
  background: rgba(241, 245, 249, 0.85);
  border: 1px solid var(--cal-pro-border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.cal-pro-segmented button {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  border-radius: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--cal-pro-text-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.cal-pro-segmented button:hover {
  color: var(--cal-pro-text);
}
.cal-pro-segmented button.is-active {
  background: var(--cal-pro-accent-grad);
  color: #fff;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}

.cal-pro-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--cal-pro-surface);
  border: 1px solid var(--cal-pro-border-strong);
  border-radius: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--cal-pro-text);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.cal-pro-icon-btn:hover {
  border-color: rgba(37, 99, 235, 0.4);
  color: var(--cal-pro-accent);
  background: var(--cal-pro-accent-soft);
}
.cal-pro-icon-btn.is-active {
  border-color: var(--cal-pro-accent);
  color: var(--cal-pro-accent);
  background: var(--cal-pro-accent-soft);
}
.cal-pro-icon-btn-square {
  padding: 0;
  width: 36px;
  height: 36px;
  justify-content: center;
}

/* Botões de ação da sub-barra (primário "Novo compromisso" e secundário "Agenda avançada"). */

.cal-pro-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 10px;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.cal-pro-action svg {
  flex: 0 0 auto;
}
.cal-pro-action span {
  text-transform: none !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  font-size: 13.5px !important;
  color: inherit !important;
  display: inline !important;
  margin: 0 !important;
}

.cal-pro-action-primary {
  background: var(--cal-pro-accent);
  color: #fff;
  border: 1px solid var(--cal-pro-accent);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(37, 99, 235, 0.22);
}
.cal-pro-action-primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 18px rgba(37, 99, 235, 0.28);
}
.cal-pro-action-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.cal-pro-action-secondary {
  background: var(--cal-pro-surface);
  color: var(--cal-pro-text);
  border: 1px solid var(--cal-pro-border-strong);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.cal-pro-action-secondary:hover {
  border-color: rgba(37, 99, 235, 0.4);
  color: var(--cal-pro-accent);
  background: var(--cal-pro-accent-soft);
}

/* Mantemos cal-pro-cta como alias para compatibilidade — alias do primário. */
.cal-pro-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--cal-pro-accent);
  color: #fff;
  border: 1px solid var(--cal-pro-accent);
  border-radius: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(37, 99, 235, 0.22);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.cal-pro-cta:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 18px rgba(37, 99, 235, 0.28);
}

/* ----- Filtros drawer ----- */

.cal-pro-filtros-drawer {
  position: absolute;
  top: 64px;
  right: 20px;
  width: 320px;
  background: var(--cal-pro-surface);
  border-radius: 16px;
  border: 1px solid var(--cal-pro-border-strong);
  box-shadow: var(--cal-pro-shadow-lg);
  padding: 0;
  z-index: 120;
  overflow: hidden;
  animation: cal-pro-drawer-pop 0.18s ease-out;
}
@keyframes cal-pro-drawer-pop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.cal-pro-filtros-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cal-pro-border);
}
.cal-pro-filtros-drawer-head strong {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--cal-pro-text);
}
.cal-pro-filtros-drawer-close {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--cal-pro-text-soft);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cal-pro-filtros-drawer-close:hover {
  background: rgba(241, 245, 249, 0.9);
  color: var(--cal-pro-text);
}
.cal-pro-filtros-drawer-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cal-pro-filtros-drawer-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal-pro-filtros-drawer-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--cal-pro-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cal-pro-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cal-pro-legend .calendar-stage-legend-filter {
  background: rgba(241, 245, 249, 0.5);
  border-radius: 999px;
  padding: 6px 12px;
  border: 1px solid var(--cal-pro-border);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.9;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.cal-pro-legend .calendar-stage-legend-filter.is-active {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(37, 99, 235, 0.32);
  opacity: 1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.cal-pro-filtros-drawer-hint {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: var(--cal-pro-text-muted);
}

/* ----- Canvas / FAB ----- */

.cal-pro-canvas {
  background: var(--cal-pro-bg);
  padding: 0 !important;
  border-radius: 0;
  overflow: auto;
}

.cal-pro-stage > .cal-pro-canvas {
  border-top: 0;
}

.cal-pro-fab {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--cal-pro-accent-grad);
  color: #fff;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.35);
  z-index: 20;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.cal-pro-fab:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 18px 32px rgba(37, 99, 235, 0.42);
  filter: brightness(1.05);
}
.cal-pro-fab:active {
  transform: translateY(0) scale(0.98);
}

/* ----- Cards: tinta sutil por serviço (só confirmado + no horário; status manda no resto) ----- */

.calendar-mobile-appointment[data-cal-pro-svc="true"][data-tone="combo-confirmed-pending"] {
  background: linear-gradient(180deg, var(--cal-pro-svc-tint, rgba(91, 154, 242, 0.1)) 0%, rgba(255, 255, 255, 0.94) 70%) !important;
  border-left-color: var(--cal-pro-svc-dot, #2563eb) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 14px rgba(15, 23, 42, 0.05) !important;
}
.calendar-mobile-appointment[data-cal-pro-svc="true"][data-tone="combo-confirmed-pending"]:hover {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 24px rgba(15, 23, 42, 0.1) !important;
  transform: translateY(-1px);
}
.calendar-mobile-appointment[data-cal-pro-svc="true"][data-tone="combo-confirmed-pending"] .calendar-mobile-appointment-time {
  color: var(--cal-pro-svc-text, #1d4ed8) !important;
  font-weight: 700;
}
.calendar-mobile-appointment[data-cal-pro-svc="true"][data-tone="combo-confirmed-pending"] .calendar-mobile-appointment-client {
  color: #0f172a;
  font-weight: 600;
}

/* ----- Quando o calendário pro está ativo, rebaixar a sub-barra antiga sobreposta. ----- */

.admin-page[data-admin-panel-active="calendario"] .calendar-admin-stage > .cal-pro-subbar {
  padding: 14px 20px !important;
  gap: 12px !important;
  background: var(--cal-pro-surface) !important;
  border-bottom: 1px solid var(--cal-pro-border) !important;
  border-radius: 0 !important;
}

.admin-page[data-admin-panel-active="calendario"] .calendar-admin-stage > .cal-pro-subbar .calendar-stage-bulk-fallback {
  display: none !important;
}

/* Esconde a barra de status hidden / mantém somente a11y */
#adminCalendarSyncStatus.admin-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ----- Compact / no sidebar (≤ 1024px desktop): sidebar oculta. Mobile já usa layout antigo. ----- */

@media (max-width: 1180px) {
  .cal-pro-body {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  .cal-pro-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .cal-pro-sidebar {
    display: none;
  }
}

@media (max-width: 720px) {
  .cal-pro-fab {
    right: 18px;
    bottom: 18px;
    width: 48px;
    height: 48px;
  }
}

/* Em mobile (handheld), o calendar-mf já tem seu próprio FAB e timeline própria.
   Mantemos a sub-barra para nav (prev/next/today/segmentado) mas escondemos sidebar/FAB. */

.cal-pro-shell[data-calendar-layout="mobile"] .cal-pro-sidebar,
.cal-pro-shell[data-calendar-layout="mobile"] .cal-pro-fab {
  display: none !important;
}
.cal-pro-shell[data-calendar-layout="mobile"] .cal-pro-body {
  grid-template-columns: minmax(0, 1fr);
}

/* Em desktop com cal-pro, o canvas (timeline dia/semana) renderiza um topbar
   próprio com day-picker e botões "Novo compromisso" / "Agenda avançada".
   Como esses controles agora vivem na cal-pro-subbar, escondemos o topbar
   interno pra evitar duplicação visual. */

.cal-pro-shell[data-calendar-layout="desktop"] .calendar-mobile-resource-topbar {
  display: none !important;
}
.cal-pro-shell[data-calendar-layout="desktop"] .calendar-mobile-floating-actions {
  display: none !important;
}

/* Em desktop com cal-pro, a tira de dias da semana embutida na visão "dia"
   ("DOM 24 / SEG 25 / TER 26 ..." atrás dos profissionais) fica redundante
   com o mini-calendário da sidebar interna. Ocultamos só na visão dia
   (week-strip pertence ao renderDesktopResourceTimelineDay). */

.cal-pro-shell[data-calendar-layout="desktop"]
  .calendar-admin-canvas[data-calendar-view="day"]
  .calendar-mobile-week-strip {
  display: none !important;
}

/* Desktop cal-pro: colunas esticam na largura da página (sem scroll horizontal). */
.cal-pro-shell[data-calendar-layout="desktop"] .cal-pro-canvas,
.cal-pro-shell[data-calendar-layout="desktop"] .calendar-mobile-resource-agenda-scroll {
  overflow-x: hidden !important;
}

.cal-pro-shell[data-calendar-layout="desktop"] .calendar-mobile-resource-hscroll {
  overflow-x: hidden !important;
  overflow-y: visible;
  width: 100%;
  max-width: 100%;
}

.cal-pro-shell[data-calendar-layout="desktop"] .calendar-mobile-operators-row {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  grid-auto-columns: minmax(0, 1fr) !important;
}

.cal-pro-shell[data-calendar-layout="desktop"] .calendar-mobile-operator-column {
  min-width: 0;
  width: auto;
}

.cal-pro-shell[data-calendar-layout="desktop"] .calendar-mobile-operators-row-head {
  transform: none !important;
}

/* ============================================================
 * CAL-PRO v2 — polish premium (layout only; status/cores intactos)
 * ============================================================ */

.cal-pro-shell .cal-pro-body {
  flex: 1 1 auto;
  min-height: 0;
}

.cal-pro-shell {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 420px at 12% -8%, rgba(59, 130, 246, 0.07), transparent 58%),
    radial-gradient(900px 360px at 88% 0%, rgba(99, 102, 241, 0.05), transparent 55%),
    var(--cal-pro-bg);
  box-shadow:
    var(--cal-pro-shadow-sm),
    0 24px 48px rgba(15, 23, 42, 0.06);
}

.cal-pro-sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.94) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset -1px 0 0 rgba(15, 23, 42, 0.04);
}

.cal-pro-block {
  padding: 12px;
  border-radius: var(--cal-pro-radius-md);
  border: 1px solid var(--cal-pro-border);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--cal-pro-shadow-sm);
}

.cal-pro-filter-row {
  border-radius: 10px;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.cal-pro-filter-row:hover {
  background: rgba(241, 245, 249, 0.9);
}
.cal-pro-filter-row.is-active {
  background: var(--cal-pro-accent-soft);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.cal-pro-subbar {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--cal-pro-border), 0 8px 24px rgba(15, 23, 42, 0.04) !important;
}

.cal-pro-action-primary {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 8px 20px rgba(37, 99, 235, 0.28),
    0 0 0 1px rgba(37, 99, 235, 0.08);
}
.cal-pro-action-primary:hover {
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.08),
    0 12px 28px rgba(37, 99, 235, 0.34);
  filter: brightness(1.03);
}

.cal-pro-canvas {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(247, 249, 252, 0.35) 100%);
}

/* Grade mais suave (identidade Google Calendar) */
.cal-pro-shell .calendar-mobile-slot-line {
  border-top-color: rgba(226, 232, 240, 0.72);
}
.cal-pro-shell .calendar-mobile-slot-line.is-major {
  border-top-color: rgba(203, 213, 225, 0.88);
}

.cal-pro-shell .calendar-mobile-time-axis {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(226, 232, 240, 0.9);
  box-shadow: var(--cal-pro-shadow-sm);
}

.cal-pro-shell .calendar-mobile-operator-column {
  border-radius: 18px;
  border-color: rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 24px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.cal-pro-shell .calendar-mobile-operator-head {
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
  border-bottom-color: rgba(226, 232, 240, 0.95);
}

.cal-pro-shell .calendar-mobile-operator-avatar {
  width: 40px;
  height: 40px;
  font-size: 0.82rem;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.95);
}

.cal-pro-shell .calendar-mobile-operator-column:not(.is-off) .calendar-mobile-operator-avatar::after {
  content: '';
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35);
}

.cal-pro-shell .calendar-mobile-operator-avatar {
  position: relative;
}

.cal-pro-shell .calendar-mobile-operator-head strong {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cal-pro-text);
}

.cal-pro-shell .calendar-mobile-operator-head small {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--cal-pro-text-muted);
}

.cal-pro-shell .calendar-mobile-operator-menu-toggle {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  box-shadow: var(--cal-pro-shadow-sm);
}

.cal-pro-shell .calendar-mobile-resource-agenda-header {
  z-index: 80;
  overflow: visible;
}

.cal-pro-shell .calendar-mobile-resource-agenda-header .calendar-mobile-resource-hscroll,
.cal-pro-shell .calendar-mobile-operators-row-head,
.cal-pro-shell .calendar-mobile-operator-head,
.cal-pro-shell .calendar-mobile-operator-copy,
.cal-pro-shell .calendar-mobile-operator-title-row {
  overflow: visible;
}

.cal-pro-shell .calendar-mobile-resource-agenda-body {
  z-index: 1;
}

.cal-pro-shell .calendar-mobile-resource-agenda-body > .calendar-mobile-resource-hscroll {
  position: relative;
  z-index: 0;
}

.cal-pro-shell .calendar-mobile-operator-menu[open] {
  z-index: 240;
}

.cal-pro-shell .calendar-mobile-operator-menu[open] .calendar-mobile-operator-menu-panel {
  z-index: 241;
}

.cal-pro-shell .calendar-mobile-operator-body {
  background: rgba(255, 255, 255, 0.72);
}

.cal-pro-shell .calendar-mobile-appointment {
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 6px 16px rgba(15, 23, 42, 0.06);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.cal-pro-shell .calendar-mobile-appointment:hover {
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 12px 24px rgba(15, 23, 42, 0.1);
}

.cal-pro-shell .calendar-mobile-appointment-client {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.cal-pro-shell .calendar-mobile-appointment-status {
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.cal-pro-shell .calendar-mobile-operator-column.is-off {
  opacity: 0.92;
}

.cal-pro-shell .calendar-mobile-resource-now-axis-badge {
  z-index: 30;
}

.cal-pro-shell .calendar-mobile-resource-now-axis-badge span {
  border-color: rgba(239, 68, 68, 0.4);
  color: #dc2626;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9),
    0 0 14px rgba(239, 68, 68, 0.2);
}

/* Métricas inferiores — glass cards */
.cal-pro-metrics-bar {
  flex-shrink: 0;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--cal-pro-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(248, 250, 252, 0.92) 100%);
  backdrop-filter: blur(10px);
}

.cal-pro-shell .cal-pro-metrics.calendar-admin-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.cal-pro-metric-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.78) 100%) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 28px rgba(15, 23, 42, 0.06) !important;
  backdrop-filter: blur(8px);
}

.cal-pro-metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(37, 99, 235, 0.08));
  color: #2563eb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.cal-pro-metric-label {
  display: block;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--cal-pro-text-muted) !important;
}

.cal-pro-metric-value {
  display: block;
  margin-top: 4px !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--cal-pro-text) !important;
  line-height: 1.1 !important;
}

.cal-pro-metric-meta {
  margin: 6px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: var(--cal-pro-text-soft) !important;
}

@media (max-width: 1100px) {
  .cal-pro-shell .cal-pro-metrics.calendar-admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cal-pro-metrics-bar {
    display: none;
  }
}

/* ============================================================
 * Modal "Usar pacote?" — confirmação ao criar agendamento quando
 * o cliente tem crédito disponível para o serviço.
 * O elemento é injetado em <body> direto via JS para escapar de
 * qualquer stacking context interno do calendário/admin-main.
 * ============================================================ */

.cal-pkg-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2147483000 !important; /* topo absoluto: cobre booking modal, drawer, popovers */
  padding: 24px !important;
  margin: 0 !important;
  animation: cal-pkg-backdrop-fade 0.18s ease-out;
}
.cal-pkg-backdrop[hidden] {
  display: none !important;
}
@keyframes cal-pkg-backdrop-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cal-pkg-panel {
  position: relative;
  width: min(440px, 100%);
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 18px 48px rgba(15, 23, 42, 0.18);
  padding: 28px 28px 24px;
  text-align: center;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  animation: cal-pkg-panel-pop 0.22s cubic-bezier(0.2, 0.9, 0.32, 1);
}
@keyframes cal-pkg-panel-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.cal-pkg-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #475569;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.cal-pkg-close:hover {
  background: rgba(241, 245, 249, 0.9);
  color: #0f172a;
}

.cal-pkg-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cal-pkg-title {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.cal-pkg-subtitle {
  margin: 0 0 22px;
  color: #475569;
  font-size: 14px;
  line-height: 1.55;
}

.cal-pkg-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.cal-pkg-actions .cal-pro-action {
  flex: 1 1 auto;
  min-width: 140px;
  justify-content: center;
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.cal-pkg-actions .cal-pro-action-primary {
  background: #2563eb !important;
  border: 1px solid #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(37, 99, 235, 0.22);
}
.cal-pkg-actions .cal-pro-action-primary:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}
.cal-pkg-actions .cal-pro-action-secondary {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
}
.cal-pkg-actions .cal-pro-action-secondary:hover {
  background: rgba(241, 245, 249, 0.95) !important;
  border-color: rgba(15, 23, 42, 0.2) !important;
}

/* =========================================================================
 * Premium Payments & Webhooks Dashboard — Stripe / Linear / Mercury feeling
 * Mantém estrutura/IDs originais; apenas eleva hierarquia visual e densidade.
 * Namespace: .phx-pay-*  ·  cores: paleta fornecida pelo usuário.
 * ========================================================================= */

.admin-panel[data-admin-panel="pagamentos-webhooks"] {
  --phx-bg: #F6F8FC;
  --phx-card: #FFFFFF;
  --phx-border: rgba(226, 232, 245, 0.6);
  --phx-border-strong: rgba(199, 211, 232, 0.85);
  --phx-line: rgba(228, 234, 246, 0.55);
  --phx-text: #0B1230;
  --phx-text-2: #4A5878;
  --phx-text-3: #8A98B5;
  --phx-success: #16C784;
  --phx-warning: #FF9F43;
  --phx-danger: #FF5A5F;
  --phx-primary: #356DFF;
  --phx-prof: #7C4DFF;
  --phx-house: #00C2A8;
  --phx-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --phx-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(40, 75, 145, 0.04);
  --phx-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(40, 75, 145, 0.14);
  --phx-shadow-lg: 0 2px 4px rgba(15, 23, 42, 0.04), 0 18px 42px -20px rgba(40, 75, 145, 0.18);
  --phx-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.04), 0 14px 32px -16px rgba(53, 109, 255, 0.18);
  background: var(--phx-bg);
  font-feature-settings: "ss01", "cv02", "cv03";
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-shell {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.35rem 0.1rem 0;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-head h2 {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--phx-text);
  margin: 0 0 0.22rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-head p {
  margin: 0;
  color: var(--phx-text-2);
  font-size: 0.88rem;
  line-height: 1.45;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .admin-inline-status {
  background: rgba(22, 199, 132, 0.1);
  color: #0e9268;
  border: none;
  border-radius: 999px;
  padding: 0.42rem 0.95rem;
  font-weight: 600;
  font-size: 0.78rem;
  box-shadow: 0 0 0 1px rgba(22, 199, 132, 0.18) inset;
}

/* Header actions (Atualizar / Exportar) deslocados para o topo */
.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-head-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-head-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  height: 36px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0 0.85rem;
  letter-spacing: -0.005em;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-btn-primary {
  background: var(--phx-primary);
  border: none;
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 14px -8px rgba(53, 109, 255, 0.55);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-btn-primary:hover {
  background: #2459DE;
  transform: translateY(-1px);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-btn-ghost {
  background: transparent;
  color: var(--phx-text-2);
  border: none;
  box-shadow: inset 0 0 0 1px rgba(207, 218, 238, 0.7);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-btn-ghost:hover {
  background: #F4F6FB;
  color: var(--phx-text);
}

/* ---------- KPI cards ---------- */
.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-kpi {
  position: relative;
  background: var(--phx-card);
  border: none;
  border-radius: 20px;
  padding: 1.25rem 1.35rem 1.2rem 1.35rem;
  box-shadow: var(--phx-shadow-sm), 0 0 0 1px var(--phx-border);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 118px;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-kpi::before {
  content: '';
  position: absolute;
  top: 1.2rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(53, 109, 255, 0.08);
  background-image: var(--phx-kpi-icon, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  box-shadow: inset 0 0 0 1px rgba(53, 109, 255, 0.06);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-kpi[data-tone="green"]::before {
  --phx-kpi-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316C784' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5 10 17l9-10'/></svg>");
  background-color: rgba(22, 199, 132, 0.14);
}
.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-kpi[data-tone="amber"]::before {
  --phx-kpi-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF9F43' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>");
  background-color: rgba(255, 159, 67, 0.14);
}
.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-kpi[data-tone="orange"]::before {
  --phx-kpi-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23356DFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h12M6 21h12M7 3v3a5 5 0 0 0 10 0V3M7 21v-3a5 5 0 0 1 10 0v3'/></svg>");
  background-color: rgba(53, 109, 255, 0.12);
}
.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-kpi[data-tone="red"]::before {
  --phx-kpi-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5A5F' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M8 8l8 8M16 8l-8 8'/></svg>");
  background-color: rgba(255, 90, 95, 0.14);
}
.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-kpi[data-tone="purple"]::before,
.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-kpi[data-tone="indigo"]::before,
.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-kpi[data-tone="package"]::before,
.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-kpi[data-tone="package-credit"]::before {
  --phx-kpi-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316C784' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12v9H4v-9'/><path d='M22 7H2v5h20V7Z'/><path d='M12 22V7'/><path d='M12 7H7a2.5 2.5 0 1 1 0-5c4 0 5 5 5 5'/><path d='M12 7h5a2.5 2.5 0 1 0 0-5c-4 0-5 5-5 5'/></svg>");
  background-color: rgba(22, 199, 132, 0.12);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-kpi[data-tone="package-credit"] strong {
  color: #0e9268;
  font-size: 1.18rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--phx-shadow), 0 0 0 1px var(--phx-border-strong);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-kpi span {
  color: var(--phx-text-3);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-kpi strong {
  display: block;
  font-size: 1.58rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--phx-text);
  font-variant-numeric: tabular-nums;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-kpi[data-tone="green"] strong { color: #0e9268; }
.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-kpi[data-tone="amber"] strong { color: #b86b0a; }
.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-kpi[data-tone="orange"] strong { color: #1f4dbd; }
.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-kpi[data-tone="red"] strong { color: #d23a3f; }

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-kpi-count {
  color: var(--phx-text-3);
  font-size: 0.76rem;
  font-weight: 500;
  margin: 0;
  letter-spacing: 0;
}

/* ---------- Filter card ---------- */
.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-filter-card {
  background: var(--phx-card);
  border: none;
  border-radius: 20px;
  padding: 1.15rem 1.35rem;
  box-shadow: var(--phx-shadow-sm), 0 0 0 1px var(--phx-border);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem 1rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-filters label span {
  color: var(--phx-text-3);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-filters input,
.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-filters select {
  height: 44px;
  border-radius: 12px;
  border: none;
  background: #F4F6FB;
  color: var(--phx-text);
  font-size: 0.88rem;
  padding: 0 0.85rem;
  transition: box-shadow 0.18s ease, background 0.18s ease;
  box-shadow: inset 0 0 0 1px rgba(207, 218, 238, 0.55);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-filters input:hover,
.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-filters select:hover {
  background: #EEF1F8;
  box-shadow: inset 0 0 0 1px rgba(180, 196, 224, 0.7);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-filters input:focus,
.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-filters select:focus {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(53, 109, 255, 0.55), 0 0 0 3px rgba(53, 109, 255, 0.12);
  outline: none;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-filter-actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-filter-actions .btn {
  height: 42px;
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0 1.05rem;
  letter-spacing: 0;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-filter-actions .btn.btn-ghost {
  background: transparent;
  color: var(--phx-text-2);
  border: none;
  box-shadow: inset 0 0 0 1px rgba(207, 218, 238, 0.7);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-filter-actions .btn.btn-ghost:hover,
.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-filter-actions .btn.btn-ghost:focus-visible {
  background: #F4F6FB;
  box-shadow: inset 0 0 0 1px rgba(180, 196, 224, 0.85);
  color: var(--phx-text);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-filter-actions .btn.btn-primary {
  background: var(--phx-primary);
  border: none;
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 18px -8px rgba(53, 109, 255, 0.55);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-filter-actions .btn.btn-primary:hover {
  background: #2459DE;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 12px 24px -10px rgba(53, 109, 255, 0.6);
}

/* ------- Filter bar layout (Período · Status · Fornecedor · Unidade · Busca · Limpar) ------- */
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-filter-card {
  padding: 1.1rem 1.35rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-filters {
  display: grid;
  grid-template-columns: minmax(280px, 1.5fr) minmax(140px, 0.9fr) minmax(150px, 1fr) minmax(140px, 1fr) minmax(200px, 1.4fr) auto;
  align-items: end;
  gap: 0.5rem 0.95rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-filter {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-filter > span {
  color: var(--phx-text-3);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.085em;
  margin-bottom: 0.42rem;
}

/* Container "Período" agrupa 2 inputs + separador num único pill */
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-period {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 44px;
  background: #F4F6FB;
  border-radius: 12px;
  padding: 0 0.85rem 0 0.95rem;
  box-shadow: inset 0 0 0 1px rgba(207, 218, 238, 0.55);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-period:hover {
  background: #EEF1F8;
  box-shadow: inset 0 0 0 1px rgba(180, 196, 224, 0.7);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-period:focus-within {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(53, 109, 255, 0.55), 0 0 0 3px rgba(53, 109, 255, 0.12);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-period-icon {
  display: inline-flex;
  color: var(--phx-text-3);
  flex-shrink: 0;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-period input[type="date"] {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--phx-text);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-period input[type="date"]:focus {
  outline: none;
  background: transparent;
  box-shadow: none;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-period-sep {
  color: var(--phx-text-3);
  font-size: 0.78rem;
  font-weight: 500;
  flex-shrink: 0;
}

/* Select com chevron customizado */
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-select {
  height: 44px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  border-radius: 12px;
  background-color: #F4F6FB;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A98B5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding: 0 2rem 0 0.95rem;
  color: var(--phx-text);
  font-size: 0.88rem;
  box-shadow: inset 0 0 0 1px rgba(207, 218, 238, 0.55);
  cursor: pointer;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-select:hover {
  background-color: #EEF1F8;
  box-shadow: inset 0 0 0 1px rgba(180, 196, 224, 0.7);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-select:focus {
  background-color: #fff;
  box-shadow: inset 0 0 0 1px rgba(53, 109, 255, 0.55), 0 0 0 3px rgba(53, 109, 255, 0.12);
  outline: none;
}

/* Search wrap com ícone */
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  background: #F4F6FB;
  border-radius: 12px;
  padding: 0 0.95rem 0 2.3rem;
  box-shadow: inset 0 0 0 1px rgba(207, 218, 238, 0.55);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-search-wrap:hover {
  background: #EEF1F8;
  box-shadow: inset 0 0 0 1px rgba(180, 196, 224, 0.7);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-search-wrap:focus-within {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(53, 109, 255, 0.55), 0 0 0 3px rgba(53, 109, 255, 0.12);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-search-icon {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--phx-text-3);
  pointer-events: none;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-search-wrap input {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--phx-text);
  font-size: 0.88rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-search-wrap input:focus {
  outline: none;
  background: transparent;
  box-shadow: none;
}

/* Filtros tradicionais (Fornecedor, Unidade) compartilham o estilo soft */
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-filter input[type="text"],
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-filter input[type="search"]:not(.phx-pay-search-wrap input) {
  height: 44px;
  border-radius: 12px;
  border: none;
  background: #F4F6FB;
  padding: 0 0.95rem;
  color: var(--phx-text);
  font-size: 0.88rem;
  box-shadow: inset 0 0 0 1px rgba(207, 218, 238, 0.55);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-filter input[type="text"]:hover,
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-filter input[type="search"]:not(.phx-pay-search-wrap input):hover {
  background: #EEF1F8;
  box-shadow: inset 0 0 0 1px rgba(180, 196, 224, 0.7);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-filter input[type="text"]:focus,
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-filter input[type="search"]:not(.phx-pay-search-wrap input):focus {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(53, 109, 255, 0.55), 0 0 0 3px rgba(53, 109, 255, 0.12);
  outline: none;
}

/* Botão "Limpar filtros" no final da linha de filtros */
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-filter-clear-wrap {
  display: flex;
  align-items: flex-end;
  padding-bottom: 0;
  height: 100%;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 44px;
  padding: 0 1rem;
  border-radius: 12px;
  background: transparent;
  color: var(--phx-text-2);
  border: none;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(207, 218, 238, 0.85);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-clear-btn svg {
  color: var(--phx-text-3);
  transition: color 0.15s ease;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-clear-btn:hover,
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-clear-btn:focus-visible {
  background: rgba(255, 90, 95, 0.06);
  color: #d23a3f;
  box-shadow: inset 0 0 0 1px rgba(255, 90, 95, 0.3);
  outline: none;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-clear-btn:hover svg,
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-clear-btn:focus-visible svg {
  color: #d23a3f;
}

/* Esconde a antiga toolbar de ações dos filtros (foi movida para o head) */
.admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-filter-card .payments-webhooks-filter-actions {
  display: none;
}

/* Responsivo dos filtros */
@media (max-width: 1280px) {
  .admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-filters {
    grid-template-columns: minmax(280px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr);
  }
  .admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-filter-period {
    grid-column: 1 / -1;
  }
  .admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-filter-search {
    grid-column: 1 / -1;
  }
  .admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-filter-clear-wrap {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media (max-width: 720px) {
  .admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-filters {
    grid-template-columns: 1fr;
  }
  .admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-filter-period {
    grid-column: auto;
  }
  .admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-filter-search {
    grid-column: auto;
  }
  .admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-period {
    flex-wrap: wrap;
    height: auto;
    padding: 0.5rem 0.85rem;
  }
}

/* ---------- Lista de transações (cards flutuantes) ---------- */
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-list-card {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-list-head {
  display: grid;
  grid-template-columns: minmax(230px, 1.15fr) minmax(290px, 1.45fr) minmax(180px, 0.95fr) minmax(200px, 1.1fr) minmax(170px, 0.95fr) minmax(150px, 0.6fr);
  gap: 1.25rem;
  padding: 0.55rem 1.6rem 0.4rem;
  background: transparent;
  border: none;
  color: var(--phx-text-3);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 0.1rem 0 -0.1rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-card {
  display: grid;
  grid-template-columns: minmax(230px, 1.15fr) minmax(290px, 1.45fr) minmax(180px, 0.95fr) minmax(200px, 1.1fr) minmax(170px, 0.95fr) minmax(150px, 0.6fr);
  gap: 1.25rem;
  align-items: stretch;
  padding: 1.35rem 1.5rem;
  cursor: pointer;
  position: relative;
  background: var(--phx-card);
  border: none;
  border-radius: 20px;
  box-shadow: var(--phx-shadow-sm), 0 0 0 1px var(--phx-border);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-card::before {
  content: '';
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--phx-primary);
  opacity: 0.85;
  transition: opacity 0.2s ease, width 0.2s ease;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-card[data-tone="green"]::before,
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-card[data-tone="approved"]::before { background: var(--phx-success); }
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-card[data-tone="amber"]::before,
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-card[data-tone="pending"]::before { background: var(--phx-warning); }
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-card[data-tone="red"]::before,
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-card[data-tone="cancelled"]::before,
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-card[data-tone="canceled"]::before { background: var(--phx-danger); }
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-card[data-tone="orange"]::before,
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-card[data-tone="expired"]::before { background: var(--phx-primary); }

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--phx-shadow-hover), 0 0 0 1px rgba(53, 109, 255, 0.22);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-card:hover::before {
  width: 4px;
  opacity: 1;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-card-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  font-size: 0.84rem;
  color: var(--phx-text);
  justify-content: center;
}

/* Coluna 1 — Pagamento (ícone + when + ID + agenda) */
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-col-payment {
  flex-direction: row;
  gap: 0.85rem;
  align-items: flex-start;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-method-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(53, 109, 255, 0.08);
  color: var(--phx-primary);
  box-shadow: inset 0 0 0 1px rgba(53, 109, 255, 0.08);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-method-icon[data-tone="success"],
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-method-icon[data-tone="pix"] {
  background: rgba(0, 194, 168, 0.1);
  color: var(--phx-house);
  box-shadow: inset 0 0 0 1px rgba(0, 194, 168, 0.1);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-method-icon[data-tone="warning"],
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-method-icon[data-tone="cash"] {
  background: rgba(255, 159, 67, 0.12);
  color: var(--phx-warning);
  box-shadow: inset 0 0 0 1px rgba(255, 159, 67, 0.12);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-method-icon[data-tone="card"] {
  background: rgba(53, 109, 255, 0.1);
  color: var(--phx-primary);
  box-shadow: inset 0 0 0 1px rgba(53, 109, 255, 0.1);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-method-icon[data-tone="danger"] {
  background: rgba(255, 90, 95, 0.12);
  color: var(--phx-danger);
  box-shadow: inset 0 0 0 1px rgba(255, 90, 95, 0.12);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-method-icon[data-tone="neutral"] {
  background: rgba(127, 141, 170, 0.1);
  color: var(--phx-text-2);
  box-shadow: inset 0 0 0 1px rgba(127, 141, 170, 0.1);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-method-icon svg {
  width: 22px;
  height: 22px;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-payment-body {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  min-width: 0;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-when {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--phx-text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-id {
  font-size: 0.74rem;
  color: var(--phx-text-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-agenda {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 0.55rem;
  border-top: none;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  position: relative;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-agenda::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 1px;
  background: rgba(207, 218, 238, 0.7);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-agenda-label {
  color: var(--phx-text-3);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-agenda-value {
  color: var(--phx-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-agenda-prof {
  color: var(--phx-text-2);
  font-size: 0.78rem;
  margin-top: 0.05rem;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-agenda-prof > span:not(.phx-pay-prof-avatar) {
  color: var(--phx-text-3);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-agenda-prof strong {
  color: var(--phx-text);
  font-weight: 600;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-prof-avatar {
  position: relative;
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.18), rgba(124, 77, 255, 0.08));
  color: #7C4DFF;
  font-size: 0.62rem;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(124, 77, 255, 0.22);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-prof-avatar-initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-prof-avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  border-radius: 50%;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-prof-avatar[data-has-photo="1"] {
  border-color: rgba(124, 77, 255, 0.35);
}

/* Variante "Operador" — usado como fallback quando o ledger não traz
   profissional (venda de produto sem agendamento / venda de pacote). Visual
   distinto (tom petroleo) para o usuário saber que NÃO é o "profissional que
   atendeu", mas sim "quem encerrou o pagamento" (closed_by_display_name). */
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-prof-avatar--operator {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(14, 165, 233, 0.06));
  color: #0369a1;
  border-color: rgba(14, 165, 233, 0.28);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-agenda-operator strong {
  color: var(--phx-text);
}

/* Coluna 2 — Valor e Split */
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-col-value {
  gap: 0.55rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-total {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--phx-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-total[data-credit="1"] {
  color: var(--phx-house);
  font-size: 1.1rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-value-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.4rem;
  margin: 0;
  padding: 0;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-value-mini-row {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.8rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-value-mini-row dt {
  color: var(--phx-text-3);
  font-weight: 500;
  margin: 0;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-value-mini-row dd {
  margin: 0;
  color: var(--phx-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-value-mini-row.is-tip dd {
  color: var(--phx-warning);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-composition {
  font-size: 0.74rem;
  color: var(--phx-text-3);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-split-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-top: 0.25rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-split-card {
  border-radius: 14px;
  padding: 0.7rem 0.85rem;
  border: none;
  background: rgba(124, 77, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: background 0.18s ease;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-split-card.is-prof {
  background: rgba(124, 77, 255, 0.05);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-split-card.is-house {
  background: rgba(0, 194, 168, 0.06);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-card:hover .phx-pay-split-card.is-prof {
  background: rgba(124, 77, 255, 0.09);
}
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-card:hover .phx-pay-split-card.is-house {
  background: rgba(0, 194, 168, 0.1);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-split-mini-head {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.66rem;
  color: var(--phx-text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-split-card.is-prof .phx-pay-split-mini-head { color: #6539d9; }
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-split-card.is-house .phx-pay-split-mini-head { color: #098f7c; }

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-split-mini-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-split-mini-head svg {
  flex-shrink: 0;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-split-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-split-mini-pct {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  color: var(--phx-text-2);
  letter-spacing: 0.02em;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-split-card.is-prof .phx-pay-split-mini-pct {
  color: #6539d9;
  background: rgba(255, 255, 255, 0.78);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-split-card.is-house .phx-pay-split-mini-pct {
  color: #098f7c;
  background: rgba(255, 255, 255, 0.78);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-split-mini-row strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.96rem;
  letter-spacing: -0.012em;
  color: var(--phx-text);
}

/* Coluna 3 — Status */
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-col-status {
  gap: 0.45rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  padding: 0.36rem 0.78rem 0.36rem 0.6rem;
  font-size: 0.81rem;
  font-weight: 600;
  width: fit-content;
  border: none;
  letter-spacing: -0.005em;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-status-pill[data-tone="green"],
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-status-pill[data-tone="approved"] {
  background: rgba(22, 199, 132, 0.1);
  color: #0e9268;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-status-pill[data-tone="amber"],
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-status-pill[data-tone="pending"] {
  background: rgba(255, 159, 67, 0.1);
  color: #b86b0a;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-status-pill[data-tone="red"],
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-status-pill[data-tone="cancelled"],
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-status-pill[data-tone="canceled"] {
  background: rgba(255, 90, 95, 0.1);
  color: #d23a3f;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-status-pill[data-tone="orange"],
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-status-pill[data-tone="expired"] {
  background: rgba(53, 109, 255, 0.08);
  color: #1e55e0;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-status-pill svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-status-sub {
  font-size: 0.78rem;
  color: var(--phx-text-2);
  font-weight: 500;
  line-height: 1.4;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-status-sub + .phx-pay-status-sub {
  color: var(--phx-text-3);
  font-size: 0.74rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-status-credit {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: #0e9268;
  background: rgba(22, 199, 132, 0.1);
  border: none;
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  font-weight: 600;
  width: fit-content;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-status-package {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: #6539d9;
  background: rgba(124, 77, 255, 0.08);
  border: none;
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  font-weight: 600;
  width: fit-content;
}

/* Coluna 4 — Cliente */
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-col-client {
  flex-direction: row;
  gap: 0.8rem;
  align-items: center;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-col-client .phx-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  font-size: 0.85rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), inset 0 0 0 2px #fff;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-client-body {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-client-body strong {
  color: var(--phx-text);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-client-phone {
  font-size: 0.76rem;
  color: var(--phx-text-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-client-service {
  font-size: 0.78rem;
  color: var(--phx-text-2);
  font-weight: 500;
  margin-top: 0.08rem;
}

/* Coluna 5 — Unidade / Método */
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-col-unit {
  gap: 0.5rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-unit-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--phx-text);
  letter-spacing: -0.005em;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-muted {
  color: var(--phx-text-3);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-method-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.78rem;
  font-weight: 600;
  background: #F4F6FB;
  border: none;
  border-radius: 999px;
  padding: 0.32rem 0.72rem 0.32rem 0.58rem;
  color: var(--phx-text);
  width: fit-content;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-method-pill[data-tone="success"],
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-method-pill[data-tone="pix"] {
  background: rgba(0, 194, 168, 0.1);
  color: #098f7c;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-method-pill[data-tone="warning"],
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-method-pill[data-tone="cash"] {
  background: rgba(255, 159, 67, 0.1);
  color: #b86b0a;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-method-pill[data-tone="card"] {
  background: rgba(53, 109, 255, 0.08);
  color: #1e55e0;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-method-pill[data-tone="info"] {
  background: rgba(53, 109, 255, 0.08);
  color: #1e55e0;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-method-pill svg {
  width: 16px;
  height: 16px;
}

/* Coluna 6 — Ações */
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-col-actions {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.4rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-action-menu {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: var(--phx-text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-action-menu:hover {
  background: #F4F6FB;
  color: var(--phx-text);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-action-receipt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 38px;
  padding: 0 1rem;
  border-radius: 11px;
  background: #F4F6FB;
  border: none;
  color: var(--phx-text);
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  letter-spacing: -0.005em;
}

/* Variante icon-only: quadrado compacto sem rótulo */
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-action-receipt-icon {
  width: 38px;
  padding: 0;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-action-receipt:hover,
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-action-receipt:focus-visible {
  background: rgba(53, 109, 255, 0.1);
  color: var(--phx-primary);
  box-shadow: 0 0 0 3px rgba(53, 109, 255, 0.06);
  transform: translateY(-1px);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-action-receipt svg {
  width: 18px;
  height: 18px;
}

/* Empty / loading */
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-empty {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--phx-text-3);
  font-size: 0.92rem;
  background: var(--phx-card);
  border-radius: 20px;
  box-shadow: var(--phx-shadow-sm), 0 0 0 1px var(--phx-border);
}

/* Paginação */
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding: 1rem 1.4rem;
  background: var(--phx-card);
  border: none;
  border-radius: 16px;
  box-shadow: var(--phx-shadow-sm), 0 0 0 1px var(--phx-border);
  color: var(--phx-text-2);
  font-size: 0.84rem;
  margin-top: 0.3rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-pagination #adminWebhooksPaginationPages {
  display: flex;
  gap: 0.35rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-pagination .payments-webhooks-page {
  min-width: 36px;
  height: 36px;
  padding: 0 0.6rem;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: var(--phx-text-2);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-pagination .payments-webhooks-page:hover {
  background: #F4F6FB;
  color: var(--phx-text);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-pagination .payments-webhooks-page.is-active {
  background: var(--phx-primary);
  color: #fff;
  box-shadow: 0 4px 10px -6px rgba(53, 109, 255, 0.55);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-pagination select {
  height: 36px;
  border-radius: 10px;
  border: none;
  background: #F4F6FB;
  padding: 0 0.7rem;
  color: var(--phx-text);
  font-size: 0.84rem;
  box-shadow: inset 0 0 0 1px rgba(207, 218, 238, 0.6);
}

/* Integration bar */
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-integration-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: var(--phx-card);
  border: none;
  border-radius: 16px;
  box-shadow: var(--phx-shadow-sm), 0 0 0 1px var(--phx-border);
  margin-top: 0.3rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-integration-info {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-integration-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #356DFF, #7C4DFF);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(53, 109, 255, 0.6);
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-integration-info strong {
  display: block;
  font-size: 0.94rem;
  color: var(--phx-text);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-integration-info span {
  display: block;
  font-size: 0.8rem;
  color: var(--phx-text-3);
  font-weight: 500;
  margin-top: 0.1rem;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-integration-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 40px;
  padding: 0 1.05rem;
  border-radius: 12px;
  background: #F4F6FB;
  border: none;
  color: var(--phx-text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-integration-cta:hover,
.admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-integration-cta:focus-visible {
  background: rgba(53, 109, 255, 0.1);
  color: var(--phx-primary);
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(53, 109, 255, 0.06);
}

/* Responsivo */
@media (max-width: 1280px) {
  .admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-list-head {
    display: none;
  }
  .admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
  }
  .admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-col-value {
    grid-column: 1 / -1;
  }
  .admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-col-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-end;
  }
}

@media (max-width: 720px) {
  .admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-panel[data-admin-panel="pagamentos-webhooks"] .payments-webhooks-filters {
    grid-template-columns: 1fr;
  }
  .admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-card {
    grid-template-columns: 1fr;
    padding: 1.15rem 1.2rem;
  }
  .admin-panel[data-admin-panel="pagamentos-webhooks"] .phx-pay-integration-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- Tela "Engage Config" ---- */
.admin-page[data-admin-panel-active="engage-config"] .admin-panel[data-admin-panel="engage-config"].card {
  background: var(--ra-bg, #f0f6ff);
  border: 0;
  box-shadow: none;
  padding: 0;
}

.admin-page[data-admin-panel-active="engage-config"] .admin-content {
  padding-top: 0.55rem;
}

.engage-config-shell {
  padding: 24px clamp(16px, 3vw, 32px) 32px;
  background: var(--ra-bg, #f0f6ff);
  min-height: 100%;
}

.engage-config-head {
  margin-bottom: 20px;
}

.engage-config-eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ra-primary, #2563eb);
}

.engage-config-title {
  margin: 0;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: var(--ra-text, #0f172a);
}

.engage-config-lead {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--ra-text-soft, #64748b);
}

.engage-config-tabs-wrap {
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.engage-config-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: min-content;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--ra-border, #e2e8f0);
  border-radius: var(--ra-radius-md, 14px);
  box-shadow: var(--ra-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
}

.engage-config-tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ra-text-soft, #64748b);
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.engage-config-tab:hover {
  color: var(--ra-text, #0f172a);
  background: #f8fafc;
}

.engage-config-tab.is-active {
  color: var(--ra-text, #0f172a);
  background: #f1f5f9;
  border-color: rgba(148, 163, 184, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

.engage-config-tab-panels {
  display: block;
}

.engage-config-tab-panel {
  display: none;
}

.engage-config-tab-panel.is-active {
  display: block;
}

.engage-config-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.engage-config-section-head h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ra-text, #0f172a);
}

.engage-config-section-sub {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--ra-text-soft, #64748b);
}

.engage-config-context {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ra-text-soft, #64748b);
}

.engage-config-btn {
  appearance: none;
  border: 1px solid var(--ra-border, #e2e8f0);
  background: #fff;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.engage-config-btn--primary {
  background: var(--ra-primary, #2563eb);
  border-color: var(--ra-primary, #2563eb);
  color: #fff;
}

.engage-config-btn--primary:hover:not(:disabled) {
  background: var(--ra-primary-dark, #1d4ed8);
}

.engage-config-btn--primary:disabled,
.engage-config-btn--primary.is-loading {
  opacity: 0.65;
  cursor: not-allowed;
}

.engage-config-feedback {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}

.engage-config-feedback[data-tone="ok"] {
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
}

.engage-config-feedback[data-tone="warn"] {
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
}

.engage-config-feedback[data-tone="danger"] {
  background: rgba(239, 68, 68, 0.1);
  color: #991b1b;
}

.engage-config-error {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(239, 68, 68, 0.1);
  color: #991b1b;
}

.engage-config-skeleton {
  display: grid;
  gap: 10px;
}

.engage-config-skeleton-row {
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
  background-size: 200% 100%;
  animation: engageConfigShimmer 1.2s ease infinite;
}

@keyframes engageConfigShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.engage-config-table-card {
  background: #fff;
  border: 1px solid var(--ra-border, #e2e8f0);
  border-radius: var(--ra-radius-lg, 20px);
  box-shadow: var(--ra-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
  overflow: hidden;
}

.engage-config-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.engage-config-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.engage-config-table th {
  text-align: left;
  padding: 12px 14px;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ra-text-soft, #64748b);
  white-space: nowrap;
}

.engage-config-table td {
  padding: 14px;
  border-top: 1px solid var(--ra-border, #e2e8f0);
  color: var(--ra-text, #0f172a);
  vertical-align: middle;
}

.engage-config-table tr:hover td {
  background: #f8fafc;
}

.engage-config-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}

.engage-config-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.engage-config-chip[data-tone="ok"] {
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
}

.engage-config-chip[data-tone="warn"] {
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
}

.engage-config-chip[data-tone="danger"] {
  background: rgba(239, 68, 68, 0.1);
  color: #991b1b;
}

.engage-config-chip[data-tone="neutral"] {
  background: rgba(148, 163, 184, 0.15);
  color: #475569;
}

.engage-config-empty,
.engage-config-soon {
  padding: 48px 24px;
  text-align: center;
  background: #fff;
  border: 1px dashed var(--ra-border, #e2e8f0);
  border-radius: var(--ra-radius-lg, 20px);
}

.engage-config-empty h4,
.engage-config-soon h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ra-text, #0f172a);
}

.engage-config-empty p,
.engage-config-soon p {
  margin: 0;
  font-size: 14px;
  color: var(--ra-text-soft, #64748b);
}

@media (max-width: 720px) {
  .engage-config-section-head-actions {
    width: 100%;
  }

  .engage-config-btn--primary {
    width: 100%;
  }
}

/* ---- Engage — Dashboard de campanhas ---- */
.admin-page[data-admin-panel-active="engage-campaigns"] .admin-panel[data-admin-panel="engage-campaigns"].card {
  background: var(--ra-bg, #f0f6ff);
  border: 0;
  box-shadow: none;
  padding: 0;
}

.admin-page[data-admin-panel-active="engage-campaigns"] .admin-content {
  padding-top: 0.55rem;
}

.engage-campaign-shell {
  padding: 24px clamp(16px, 3vw, 32px) 32px;
  background: var(--ra-bg, #f0f6ff);
  min-height: 100%;
}

.engage-campaign-content {
  display: grid;
  gap: 20px;
}

.engage-campaign-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px 16px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--ra-border, #e2e8f0);
  border-radius: var(--ra-radius-lg, 20px);
}

.engage-campaign-field {
  display: grid;
  gap: 6px;
  min-width: min(100%, 240px);
  font-size: 12px;
  font-weight: 700;
  color: var(--ra-text-soft, #64748b);
}

.engage-campaign-field select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ra-border, #e2e8f0);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  color: var(--ra-text, #0f172a);
}

.engage-campaign-window-hint,
.engage-campaign-muted,
.engage-campaign-help {
  margin: 0;
  font-size: 13px;
  color: var(--ra-text-soft, #64748b);
}

.engage-campaign-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.engage-campaign-kpi {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--ra-border, #e2e8f0);
  border-radius: var(--ra-radius-lg, 20px);
}

.engage-campaign-kpi span {
  font-size: 12px;
  color: var(--ra-text-soft, #64748b);
}

.engage-campaign-kpi strong {
  font-size: 1.35rem;
  color: var(--ra-text, #0f172a);
}

.engage-campaign-kpi small {
  font-size: 11px;
  color: var(--ra-text-soft, #64748b);
}

.engage-campaign-section {
  display: grid;
  gap: 12px;
}

.engage-campaign-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.engage-campaign-section-head h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--ra-text, #0f172a);
}

.engage-campaign-detail-head h3 {
  margin: 0 0 4px;
}

.engage-campaign-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.engage-campaign-breakdown {
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--ra-border, #e2e8f0);
  border-radius: var(--ra-radius-lg, 20px);
}

.engage-campaign-breakdown h4 {
  margin: 0 0 10px;
  font-size: 0.92rem;
}

.engage-campaign-breakdown-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
}

.engage-campaign-breakdown-bar {
  height: 8px;
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
}

.engage-campaign-breakdown-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #1e5aa8, #f7b500);
}

.engage-campaign-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.engage-campaign-chip[data-tone="ok"] {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.engage-campaign-chip[data-tone="warn"] {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.engage-campaign-chip[data-tone="danger"] {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.engage-campaign-chip[data-tone="neutral"] {
  background: rgba(148, 163, 184, 0.15);
  color: #475569;
}

.engage-campaign-link {
  border: none;
  background: none;
  padding: 0;
  color: #1e5aa8;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.engage-campaign-list {
  margin: 0;
  padding-left: 18px;
  color: var(--ra-text-soft, #64748b);
}

.engage-campaign-list.is-info {
  color: #1e5aa8;
}

.engage-campaign-footer {
  font-size: 12px;
  color: var(--ra-text-soft, #64748b);
}