:root {
  --bg: #eef3f8;
  --panel: #ffffff;
  --panel-2: #f7f9fc;
  --line: #d8e1ee;
  --text: #10233f;
  --muted: #6b7c95;
  --blue: #3c73f1;
  --blue-soft: #e9f0ff;
  --green: #1dbb63;
  --green-soft: #e6f8ee;
  --amber: #f59f28;
  --amber-soft: #fff2df;
  --red: #ef4444;
  --red-soft: #ffe8e8;
  --shadow: 0 18px 45px rgba(16, 35, 63, 0.08);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 18px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #f2f6fb 0%, #ebf1f7 100%);
}

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }

.app-body { background: linear-gradient(180deg, #f2f6fb 0%, #ebf1f7 100%); }
.auth-body {
  background:
    radial-gradient(circle at top right, rgba(60,115,241,.16), transparent 26%),
    radial-gradient(circle at bottom left, rgba(29,187,99,.10), transparent 24%),
    linear-gradient(180deg, #eef4fb 0%, #e7eef7 100%);
}

.app-shell {
  width: min(1600px, calc(100% - 24px));
  margin: 12px auto;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 18px;
}

.sidebar {
  position: sticky;
  top: 12px;
  align-self: start;
  min-height: calc(100vh - 24px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
}

.side-card,
.panel,
.auth-card,
.auth-hero,
.user-card,
.profile-summary,
.profile-card,
.modal-panel,
.flash-message,
.alert {
  background: rgba(255,255,255,.9);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.side-card {
  border-radius: var(--radius-xl);
  padding: 20px;
}

.brand-stack { display: grid; gap: 14px; justify-items: start; }
.brand-title { font-size: 2rem; font-weight: 800; line-height: 1.02; }
.brand-copy { color: var(--muted); line-height: 1.5; }
.brand-status { display: flex; align-items: center; }
.brand-mark {
  width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blue), #79a0ff); color: #fff; font-weight: 800;
}

.menu-card { padding: 18px 14px; }
.menu-label {
  font-size: .82rem; font-weight: 800; color: #7e8da5; letter-spacing: .08em;
  text-transform: uppercase; padding: 0 8px 10px;
}
.menu-user {
  padding: 0 8px 12px;
  color: #233654;
  font-weight: 800;
  line-height: 1.35;
}
.menu-list { display: grid; gap: 8px; }
.menu-link {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 14px; border-radius: 18px; color: #334764; font-weight: 700;
  border: 1px solid transparent; transition: .18s ease;
}
.menu-link:hover { background: var(--panel-2); border-color: var(--line); transform: translateY(-1px); }
.menu-link.active {
  background: linear-gradient(180deg, #eef4ff, #f8fbff);
  border-color: #cddafd; color: #1b47b8;
}
.menu-dot {
  width: 12px; height: 12px; border-radius: 999px; background: #c3cede; flex: 0 0 auto;
}
.menu-link.active .menu-dot { background: var(--blue); box-shadow: 0 0 0 6px rgba(60,115,241,.12); }

.user-card-compact { display: grid; gap: 8px; }
.user-card-compact strong { font-size: 1rem; }
.user-card-compact span { color: var(--muted); }

.btn-primary, .btn-light, .btn-danger, .nav-pill {
  border: 0; border-radius: 16px; padding: 12px 18px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; transition: .18s ease;
}
.btn-primary, .nav-pill.primary {
  color: #fff; background: linear-gradient(135deg, var(--blue), #5a8dff);
  box-shadow: 0 14px 26px rgba(60,115,241,.24);
}
.btn-light, .nav-pill {
  color: #243757; background: #f4f7fb; border: 1px solid var(--line);
}
.btn-danger {
  width: 100%; color: #fff; background: linear-gradient(135deg, #ff4747, #ef3434);
  box-shadow: 0 14px 24px rgba(239,68,68,.20);
}
.btn-primary:hover, .btn-light:hover, .btn-danger:hover, .nav-pill:hover { transform: translateY(-1px); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-light.is-loading {
  pointer-events: none;
  opacity: .78;
  position: relative;
}
.btn-light.is-loading::after {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid #7f93b3;
  border-top-color: transparent;
  border-radius: 999px;
  animation: spin .75s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.block { width: 100%; }

.main-area { display: grid; gap: 18px; }
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 22px 26px; border-radius: 30px;
}
.page-head h1 { margin: 0; font-size: clamp(2.2rem, 3.3vw, 3.2rem); line-height: 1; }
.page-head p { margin: 10px 0 0; color: var(--muted); font-size: 1.05rem; }
.topbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.mini-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.quick-grid { display: none; }
.mini-card {
  padding: 16px 18px; border-radius: 20px; background: var(--panel-2);
  border: 1px solid var(--line); display: grid; gap: 10px;
}
.mini-card span { color: #6d7f98; font-weight: 700; font-size: .92rem; }
.mini-card strong { font-size: 1.15rem; }
.mini-card em { font-style: normal; font-size: 2rem; font-weight: 800; }

.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kpi-card {
  position: relative; overflow: hidden; padding: 16px 16px 14px 18px; border-radius: 22px;
  min-height: 154px;
}
.kpi-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 18px;
  background: var(--blue);
}
.kpi-card.green::before { background: var(--green); }
.kpi-card.amber::before { background: var(--amber); }
.kpi-card.red::before { background: var(--red); }
.kpi-card .kpi-label {
  font-size: .74rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #70829b;
}
.kpi-card .kpi-value { margin-top: 10px; font-size: 2.45rem; font-weight: 800; line-height: 1; }
.kpi-card .kpi-copy { margin-top: 8px; color: var(--muted); line-height: 1.38; font-size: .86rem; }

/* Bubble KPI cards */
.bubble-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px;
}
.bubble-kpi-grid.hidden { display: none; }
.kpi-card { transition: transform .14s, box-shadow .14s; cursor: default; }
.kpi-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16,35,63,.13); }
.bubble-kpi-card { transition: transform .14s, box-shadow .14s; cursor: default; }
.bubble-kpi-card::before { background: var(--bk-color, #3c73f1) !important; }
.bubble-kpi-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16,35,63,.13); }
.bubble-kpi-dot {
  width: 22px; height: 22px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 900;
  box-shadow: 0 3px 8px rgba(16,35,63,.22);
  margin-bottom: 4px;
}

.quick-grid { display: none; }
.quick-box { padding: 22px; border-radius: 26px; }
.quick-box h2 { margin: 0; font-size: 1.9rem; }
.quick-box p { margin: 10px 0 0; color: var(--muted); }
.quick-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.badge-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.badge-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px;
  font-weight: 800; font-size: .95rem; border: 1px solid transparent;
}
.badge-chip.blue { background: var(--blue-soft); color: #2452bf; border-color: #d5e2ff; }
.badge-chip.red { background: var(--red-soft); color: #b92f2f; border-color: #ffd2d2; }
.badge-chip.amber { background: var(--amber-soft); color: #a76500; border-color: #ffe2ba; }
.badge-chip.green { background: var(--green-soft); color: #177c46; border-color: #cfeedd; }
.badge-dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; opacity: .45; }

.section-card { padding: 24px; border-radius: 28px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.section-head h2 { margin: 0; font-size: 3rem; line-height: 1; }
.section-head p { margin: 8px 0 0; color: var(--muted); }

.hero-panel,
.timeline-panel,
.calendar-wrap,
.queue-wrap,
.profile-summary,
.profile-card,
.auth-card,
.auth-hero,
.user-card,
.users-hero { border-radius: 28px; }

.timeline-panel,
.calendar-wrap,
.queue-wrap,
.profile-summary,
.profile-card,
.auth-card,
.auth-hero,
.user-card,
.users-hero,
.panel { padding: 22px; }

.layout-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(340px, .95fr); gap: 16px; }
.panel-header, .calendar-toolbar, .calendar-nav, .queue-meta, .queue-top, .queue-bottom, .modal-head, .agenda-top, .modal-footer, .detail-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.auto-badge, .mini-stat, .chip, .status-tag, .priority {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; font-weight: 800;
}
.auto-badge { padding: 10px 14px; background: var(--blue-soft); color: #2e57b7; }
.dot, .legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.dot { background: var(--green); box-shadow: 0 0 0 4px rgba(29,187,99,.16); }
.calendar-toolbar {
  flex-wrap: wrap; margin-bottom: 14px; padding: 12px 14px; border-radius: 20px;
  background: linear-gradient(180deg, #f7faff, #fcfdff); border: 1px solid var(--line);
}
.insight-title { font-size: .72rem; font-weight: 900; letter-spacing: .08em; color: #73849b; text-transform: uppercase; }
.insight-metrics, .calendar-legend, .detail-pills, .auth-badges, .users-summary { display: flex; gap: 8px; flex-wrap: wrap; }
.mini-stat, .chip { padding: 6px 10px; background: #fff; border: 1px solid var(--line); color: #50627d; }
.calendar-status-chip {
  appearance: none;
  cursor: pointer;
  transition: .18s ease;
  font-size: .72rem;
  gap: 6px;
}
.calendar-status-chip:hover {
  transform: translateY(-1px);
  border-color: #9eb8ea;
  background: #f8fbff;
}
.calendar-status-chip.is-disabled {
  opacity: .45;
  filter: grayscale(.1);
  box-shadow: none;
}
.legend-summary { color: #5e718b; font-weight: 700; font-size: .72rem; }
.legend-dot.pendente { background: var(--amber); }
.legend-dot.concluida { background: var(--green); }
.legend-dot.custom { background: #3c73f1; }
.calendar-legend { align-items: flex-end; justify-content: space-between; width: 100%; gap: 10px; }
.calendar-legend .calendar-bubble-filter { display: none; }
.calendar-bubble-panel {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid #d7e2f1;
  background: linear-gradient(180deg, #fbfdff, #f6f9ff);
}
.calendar-bubble-filter {
  min-width: min(280px, 100%);
  margin-left: auto;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid #d7e2f1;
  background: linear-gradient(180deg, #fff, #f7faff);
}
.calendar-bubble-filter > span {
  font-size: .66rem !important;
  letter-spacing: .05em !important;
}
.calendar-bubble-filter-standalone {
  width: 100%;
  min-width: 0;
  margin-left: 0;
}
.calendar-bubble-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.calendar-bubble-option {
  border: 1px solid #d5e2f5;
  background: #fff;
  color: #284160;
  border-radius: 999px;
  padding: 4px 8px;
  font-weight: 800;
  font-size: .72rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: .18s ease;
  line-height: 1.2;
}
.calendar-bubble-option:hover {
  transform: translateY(-1px);
  border-color: #9eb8ea;
  background: #f8fbff;
}
.calendar-bubble-option.active {
  background: linear-gradient(135deg, #edf4ff, #dfeaff);
  border-color: #8fb1ee;
  color: #1b47b8;
  box-shadow: 0 8px 16px rgba(60,115,241,.12);
}
.calendar-bubble-option.is-muted {
  opacity: .45;
}
.calendar-bubble-option-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--bubble-filter-color, #3c73f1);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bubble-filter-color, #3c73f1) 18%, white);
}
.calendar-bubble-option[data-bubble-filter="all"] .calendar-bubble-option-dot {
  background: linear-gradient(135deg, #3c73f1, #34d07a);
}
.calendar-nav {
  position: relative;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.calendar-nav h3 {
  margin: 0;
  text-align: center;
}
.calendar-nav .nav-left {
  position: absolute;
  inset: 0;
  display: block;
}
.calendar-nav .nav-left .nav-btn:first-child {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.calendar-nav .nav-left .nav-btn:nth-child(2) {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.timeline-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.timeline-card {
  appearance: none;
  border: 1px solid #d8e2f0;
  background: linear-gradient(180deg, #ffffff, #f6f9fe);
  border-radius: 18px;
  padding: 14px 16px;
  text-align: left;
  color: #263754;
  box-shadow: 0 10px 24px rgba(18, 35, 67, 0.06);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

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

.timeline-card strong {
  font-size: 1rem;
  font-weight: 900;
  color: #1d2f4d;
}

.timeline-card span {
  margin-top: 6px;
  font-size: .98rem;
  font-weight: 800;
  color: #315da8;
}

.timeline-card small {
  margin-top: 6px;
  color: #667a97;
  line-height: 1.45;
}

.timeline-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(28, 55, 102, 0.11);
  border-color: #bfd1ef;
}

.timeline-card.active {
  border-color: #9ab7ff;
  background: linear-gradient(180deg, #eef4ff, #dfeaff);
  box-shadow: 0 18px 32px rgba(57, 102, 199, 0.16);
}

.timeline-card.active strong,
.timeline-card.active span {
  color: #214d9c;
}

.ritmo-page {
  display: grid;
  gap: 18px;
}
.ritmo-page-head {
  align-items: center;
}
.ritmo-page-head h1 {
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1.05;
}
.ritmo-page-head p {
  margin: 10px 0 0;
  color: var(--muted);
}
.ritmo-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ritmo-month-chip {
  font-weight: 900;
  color: #24406f;
  background: linear-gradient(180deg, #fff, #eef4ff);
  border-color: #cfddf7;
}
.ritmo-strip {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: 0;
}
.ritmo-card {
  text-decoration: none;
}
.ritmo-chart-panel {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(250,252,255,.98), rgba(243,248,255,.98));
  border: 1px solid #dbe6f6;
}
.ritmo-chart-panel h2 {
  margin: 0;
  font-size: 1.2rem;
}
.ritmo-chart-panel p {
  margin: 6px 0 0;
  color: var(--muted);
}
.ritmo-chart-chip {
  font-weight: 900;
  color: #24406f;
  background: linear-gradient(180deg, #fff, #eef4ff);
  border-color: #cfddf7;
}
.ritmo-chart-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ritmo-chart-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ritmo-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 800;
  color: #5d6f89;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 999px;
  padding: 6px 8px;
  cursor: pointer;
  transition: .18s ease;
}
.ritmo-chart-legend-item i {
  display: inline-block;
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: #3c73f1;
}
.ritmo-chart-legend-item:hover {
  background: #f5f8fe;
  border-color: #dbe6f6;
}
.ritmo-chart-legend-item:not(.is-active) {
  opacity: .45;
}
.ritmo-chart-legend-item.pending i {
  background: #ffb830;
}
.ritmo-chart-legend-item.concluded i {
  background: #34d07a;
}
.ritmo-chart-legend-item.values i {
  background: #7b8da8;
}
.ritmo-chart-wrap {
  overflow-x: auto;
  padding-bottom: 4px;
}
.ritmo-chart {
  width: 100%;
  min-width: 760px;
  height: auto;
  display: block;
}
.ritmo-chart-grid {
  stroke: #d9e4f4;
  stroke-width: 1;
}
.ritmo-chart-area {
  fill: rgba(60,115,241,.10);
  stroke: none;
}
.ritmo-chart-line {
  fill: none;
  stroke: #3c73f1;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 10px 18px rgba(60,115,241,.18));
}
.ritmo-chart-line-pending {
  stroke: #ffb830;
  stroke-width: 2.5;
  filter: drop-shadow(0 8px 14px rgba(255,184,48,.18));
}
.ritmo-chart-line-concluded {
  stroke: #34d07a;
  stroke-width: 2.5;
  filter: drop-shadow(0 8px 14px rgba(52,208,122,.16));
}
.ritmo-chart-dot {
  fill: #ffffff;
  stroke: #3c73f1;
  stroke-width: 3;
}
.ritmo-chart-dot-pending {
  fill: #fff7e8;
  stroke: #ffb830;
  stroke-width: 2.5;
}
.ritmo-chart-dot-concluded {
  fill: #ecfff3;
  stroke: #34d07a;
  stroke-width: 2.5;
}
.ritmo-chart-value {
  fill: #214d9c;
  font-size: 16px;
  font-weight: 900;
}
.ritmo-chart-value-pending {
  fill: #b6780b;
  font-size: 12px;
  font-weight: 800;
}
.ritmo-chart-value-concluded {
  fill: #1f8f55;
  font-size: 12px;
  font-weight: 800;
}
.ritmo-chart-label {
  fill: #6a7b92;
  font-size: 13px;
  font-weight: 800;
}
.ritmo-chart-label-alt {
  fill: #8a99af;
}
.ritmo-chart .is-hidden {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
  .timeline-strip {
    grid-template-columns: 1fr;
  }
  .ritmo-page-head {
    align-items: flex-start;
  }
  .ritmo-chart-panel {
    padding: 16px;
  }
  .ritmo-chart-meta {
    justify-content: flex-start;
  }
  .ritmo-chart {
    min-width: 640px;
  }
}
.nav-left { display: flex; gap: 8px; }
.nav-btn, .today-btn {
  min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px; background: #fff; border: 1px solid var(--line); font-weight: 800;
}
.today-btn { min-width: 72px; padding: 0 14px; }
.weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.weekdays { gap: 10px; margin-bottom: 10px; }
.weekdays div {
  padding: 12px 0; text-align: center; border-radius: 16px; background: #edf2f8;
  color: #556980; font-size: .88rem; font-weight: 900; text-transform: uppercase;
}
.calendar-grid { gap: 10px; }
.day {
  min-height: 148px; padding: 14px 12px; border-radius: 20px; background: linear-gradient(180deg, #fff, #f8fbff);
  border: 1px solid var(--line); transition: .18s ease;
}
.day.empty { background: rgba(219, 227, 240, .40); border-style: dashed; }
.day.today { background: linear-gradient(180deg, #fff8eb, #fffdf8); border-color: #f0d8a8; }
.day.selected { border-color: #bfd1ff; box-shadow: 0 18px 32px rgba(60,115,241,.12); }
.day-selectable, .queue-card, .agenda-item, .timeline-card, .status-bubble { cursor: pointer; }
.day-selectable:hover, .queue-card:hover, .agenda-item:hover, .status-bubble:hover, .nav-btn:hover, .today-btn:hover { transform: translateY(-2px); }
.day-head { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.day-number {
  min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; background: #eef3fb; color: #243757; font-weight: 800;
}
.day-empty-copy { margin: 0; color: #5b6d85; font-size: .9rem; }
.status-bubbles { display: flex; flex-wrap: wrap; gap: 5px; }
.status-bubble {
  width: 24px; height: 24px; border: 0; border-radius: 999px; color: #fff;
  font-size: .65rem; font-weight: 900;
  box-shadow: 0 3px 8px rgba(16,35,63,.18);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s, box-shadow .12s;
}
.status-bubble:hover {
  transform: scale(1.18) translateY(-1px);
  box-shadow: 0 6px 14px rgba(16,35,63,.22);
}
.status-bubble.pendente, .priority.media { background: linear-gradient(135deg, #ffb830, #f59500); }
.status-bubble.concluida, .priority.baixa { background: linear-gradient(135deg, #34d07a, #1aaa5c); }
.status-bubble.cancelada, .priority.alta { background: linear-gradient(135deg, #ff5a5a, #d92b2b); }
.status-bubble.outras { background: linear-gradient(135deg, #9b6cf8, #6c35e8); }
.status-bubble.custom { border: 1.5px solid rgba(255,255,255,.35); box-shadow: 0 3px 8px rgba(16,35,63,.22); }
.queue-wrap { position: sticky; top: 12px; }
.queue-total {
  min-width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 16px; background: var(--blue-soft); color: #2853b6; font-weight: 800;
}
.queue-meta { margin: 10px 0 14px; color: var(--muted); }
.queue-highlight {
  margin-bottom: 14px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(180deg, #fff7e8, #fffdf8);
  border: 1px solid #f0debb;
}
.highlight-label { display: inline-block; margin-bottom: 6px; color: #8b5d12; font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.queue-highlight p, .empty-queue, .empty-modal { margin: 0; color: #775d38; line-height: 1.55; }
.queue-filter-bar, .agenda-toolbar { margin-bottom: 14px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.filter-field { display: grid; gap: 8px; color: #31405a; font-weight: 700; }
.filter-field span { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: #5c6d85; }
.filter-field select, .auth-form input, .auth-form select, .user-edit-form input, .user-edit-form select, .detail-select {
  width: 100%; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--line); background: #fbfcff; color: var(--text); outline: none;
}
.filter-field select:focus, .auth-form input:focus, .auth-form select:focus, .user-edit-form input:focus, .user-edit-form select:focus, .detail-select:focus {
  border-color: #b7c9f6; box-shadow: 0 0 0 4px rgba(60,115,241,.08);
}
.queue-list, .agenda-content { display: grid; gap: 12px; max-height: 760px; overflow: auto; padding-right: 4px; }
.agenda-content {
  max-height: none;
  padding: 14px 18px 18px;
  gap: 14px;
  background: linear-gradient(180deg, rgba(246,250,255,.55), rgba(255,255,255,0));
}
.queue-card, .agenda-item, .detail-card, .form-preview, .modal-stat {
  padding: 14px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 22px rgba(16,35,63,.05);
}
.queue-top h4, .queue-os, .agenda-foot, .auth-foot { margin: 0; }
.agenda-top h4 {
  margin: 0;
  font-size: .96rem;
  color: #20304c;
  line-height: 1.35;
  word-break: break-word;
}
.queue-top h4 { font-size: .84rem; color: #2b3b56; text-transform: uppercase; line-height: 1.35; letter-spacing: .03em; }
.priority { padding: 6px 10px; color: #fff; font-size: .72rem; }
.queue-os { color: #71809a; font-size: .76rem; margin-top: 2px; }
.queue-desc, .agenda-desc { margin: 0; font-size: .98rem; font-weight: 700; color: #1f2d44; line-height: 1.35; }
.queue-custom-bubbles, .agenda-custom-bubbles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.custom-chip {
  display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; border: 1px solid rgba(16,35,63,.16);
}
.queue-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; color: #647389; font-size: .76rem; line-height: 1.45; margin-top: 2px; }
.queue-main-meta, .queue-side-meta { display: grid; gap: 6px; }
.queue-side-meta { text-align: right; min-width: 135px; }
.soft-panel { padding: 10px 12px; border-radius: 16px; background: linear-gradient(180deg, #f4f7fc, #edf2f9); border: 1px solid #e0e7f2; }
.status-tag { padding: 5px 9px; font-size: .74rem; }
.status-tag.pendente { background: #fff3d5; color: #9a7116; }
.status-tag.aguardando { background: #ffe9d1; color: #b25b00; }
.status-tag.concluida { background: #ddf5e9; color: #2c9469; }
.status-tag.andamento { background: #e1ebff; color: #2458a4; }
.status-tag.cancelada { background: #ffe8e8; color: #b43737; }
.status-tag.outras { background: #ece7ff; color: #5f46a6; }
.conexao-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
  font-size: .75rem; font-weight: 800;
}
.conexao-tag.online { background: #e7f7ee; color: #196846; }
.conexao-tag.offline { background: #ffe7e7; color: #8a1f1f; }
.conexao-tag.desconhecida { background: #e9edf5; color: #4d5a73; }
.conexao-uptime, .conexao-meta, .muted-help { color: var(--muted); font-size: .8rem; }

.bubble-page, .bubble-list-panel {
  border-radius: 28px;
  border: 1px solid rgba(174, 192, 224, 0.42);
  background:
    radial-gradient(circle at top right, rgba(79, 127, 255, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.98));
  box-shadow: 0 18px 42px rgba(16,35,63,.08);
}
.bubble-hero-copy { display: grid; gap: 6px; }
.bubble-hero-eyebrow {
  display: inline-flex; width: fit-content; padding: 7px 12px; border-radius: 999px;
  background: rgba(56, 104, 214, 0.08); color: #315eb7; font-size: .72rem;
  font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.bubble-page-nav { flex-wrap: wrap; justify-content: flex-end; }
.bubble-month-chip {
  background: linear-gradient(180deg, #ffffff, #eef4ff);
  border-color: #cfddf7;
  color: #29446f;
  font-weight: 800;
}
.bubble-form { display: grid; gap: 14px; margin-top: 10px; }
.bubble-form-intro {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; border-radius: 22px; border: 1px solid #dce7f8;
  background: linear-gradient(135deg, rgba(240,246,255,.95), rgba(255,255,255,.98));
}
.bubble-form-intro strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
  color: #20304c;
}
.bubble-form-intro p { margin: 0; color: #5b6d85; line-height: 1.5; }
.bubble-form-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 112px; padding: 10px 14px; border-radius: 18px;
  background: linear-gradient(135deg, #3c73f1, #6da2ff); color: #fff;
  font-size: .78rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 12px 26px rgba(60,115,241,.22);
}
.bubble-form-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.bubble-form .filter-field,
.bubble-modal .filter-field {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid #e4ebf5;
  background: rgba(255,255,255,.82);
}
.bubble-form textarea {
  width: 100%; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--line);
  background: #fbfcff; color: var(--text); outline: none; resize: vertical;
}
.bubble-form textarea:focus { border-color: #b7c9f6; box-shadow: 0 0 0 4px rgba(60,115,241,.08); }
.bubble-types-box {
  padding: 14px; border-radius: 18px; border: 1px solid var(--line);
  background: linear-gradient(180deg, #fbfdff, #f4f8ff);
}
.bubble-types-box h3 { margin: 0 0 10px; font-size: .9rem; }
.bubble-types-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 5px; }
.bubble-type-item { cursor: pointer; }
.bubble-type-item input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.bubble-type-item span {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--text); font-size: .75rem; font-weight: 600;
  line-height: 1.3; transition: background .12s, border-color .12s;
  cursor: pointer; user-select: none;
}
.bubble-type-item span::before {
  content: ''; flex-shrink: 0; width: 15px; height: 15px; border-radius: 4px;
  border: 1.5px solid #c8d3e0; background: #f5f7fa;
  transition: background .12s, border-color .12s;
}
.bubble-type-item:hover span { background: #f3f7ff; border-color: #b7c9f6; }
.bubble-type-item:hover span::before { border-color: #3c73f1; }
.bubble-type-item input[type=checkbox]:checked + span {
  background: #eef3ff; border-color: #93b4f8; color: #1a3a8a;
}
.bubble-type-item input[type=checkbox]:checked + span::before {
  background: #3c73f1; border-color: #3c73f1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 10px; background-position: center; background-repeat: no-repeat;
}
.bubble-actions { display: flex; justify-content: flex-end; gap: 8px; }
.bubble-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-danger { color: #962929 !important; border-color: #f5cece !important; }
.btn-danger:hover { background: #ffe7e7 !important; }

.bubble-modal-overlay {
  position: fixed; inset: 0; z-index: 200; padding: 20px;
  background:
    radial-gradient(circle at top, rgba(121, 162, 255, 0.22), transparent 30%),
    rgba(12,21,39,.58);
  backdrop-filter: blur(9px); align-items: center; justify-content: center;
}
.bubble-modal {
  background:
    linear-gradient(180deg, rgba(249,252,255,.98), rgba(255,255,255,.98));
  border: 1px solid rgba(208, 220, 240, 0.78);
  border-radius: 28px; padding: 0; width: min(620px, calc(100vw - 32px));
  max-height: 90vh; overflow-y: auto; box-shadow: 0 30px 70px rgba(6,19,41,.28);
  display: grid; gap: 16px; position: relative;
}
.bubble-modal-header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 24px 24px 0;
}
.bubble-modal-header h3 { margin: 4px 0 0; font-size: 1.3rem; color: #1d2c46; }
.bubble-modal-kicker {
  display: inline-flex; padding: 6px 11px; border-radius: 999px;
  background: rgba(56, 104, 214, 0.08); color: #315eb7; font-size: .7rem;
  font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.bubble-modal-body,
.bubble-modal form {
  display: grid;
  gap: 16px;
  padding: 0 24px 24px;
}
.bubble-modal-copy {
  margin: 0;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fffaf4, #fff4e8);
  border: 1px solid #f4d4b4;
  color: #6f4a13;
  line-height: 1.55;
}
.bubble-modal-compact { width: min(440px, calc(100vw - 32px)); }
.bubble-modal-danger .bubble-modal-kicker {
  background: rgba(198, 61, 61, 0.10);
  color: #a43333;
}
.bubble-modal-edit .bubble-modal-kicker {
  background: rgba(56, 104, 214, 0.08);
  color: #315eb7;
}
.modal-close-btn {
  background: rgba(239,244,251,.95); border: 1px solid #d7e1ef; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: #637691; padding: 6px 10px; border-radius: 12px;
}
.modal-close-btn:hover { background: #fff; }

.bubble-rules-list { display: grid; gap: 10px; margin-top: 10px; }
.bubble-rule-card {
  border: 1px solid rgba(193, 208, 232, 0.64); border-radius: 22px; padding: 16px 18px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rule-color) 10%, white), transparent 28%),
    linear-gradient(180deg, #fff, #f8fbff);
  box-shadow: 0 16px 30px rgba(16,35,63,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bubble-rule-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--rule-color) 34%, #bfd1ef);
  box-shadow: 0 18px 34px rgba(16,35,63,.10);
}
.bubble-rule-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bubble-rule-name { display: flex; align-items: center; gap: 8px; }
.bubble-rule-title { display: grid; gap: 3px; }
.bubble-rule-title strong { font-size: 1rem; color: #20304c; }
.bubble-rule-meta {
  color: #6a7b92;
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.bubble-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

@media (max-width: 768px) {
  .bubble-form-intro,
  .bubble-rule-top {
    grid-template-columns: 1fr;
    display: grid;
  }
  .bubble-form-badge {
    min-width: 0;
    width: 100%;
  }
  .bubble-page-nav {
    justify-content: flex-start;
  }
  .bubble-actions {
    justify-content: stretch;
    flex-direction: column-reverse;
  }
  .bubble-actions .btn-light,
  .bubble-actions .btn-primary,
  .bubble-actions .btn-danger,
  .bubble-actions form,
  .bubble-actions form button {
    width: 100%;
  }
  .bubble-modal-overlay {
    padding: 12px;
  }
  .bubble-modal-header,
  .bubble-modal-body,
  .bubble-modal form {
    padding-left: 18px;
    padding-right: 18px;
  }
}

.flash-stack {
  position: fixed; bottom: 24px; right: 24px; top: auto; left: auto; width: min(420px, calc(100vw - 48px));
  display: grid; gap: 10px; z-index: 1000;
}
.flash-message, .alert { padding: 14px 16px; border-radius: 18px; }
.flash-message.success { background: #e9f8ef; color: #176744; }
.flash-message.warning { background: #fff4de; color: #8d6516; }
.flash-message.error, .alert.error { background: #ffe7e7; color: #962929; }

.bubble-limit-alert-stack {
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 900;
  width: min(380px, calc(100vw - 36px));
  display: grid;
  gap: 10px;
}
.bubble-limit-alert-stack.hidden { display: none; }
.bubble-limit-alert-item {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #f1c38f;
  background: linear-gradient(180deg, #fff8ef, #fff2de);
  box-shadow: 0 10px 20px rgba(16,35,63,.12);
  animation: bubbleAlertFloat 2.8s ease-in-out infinite;
  transform-origin: center;
}
.bubble-limit-alert-item strong {
  display: block;
  margin-bottom: 4px;
  color: #9a5a08;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bubble-limit-alert-item p {
  margin: 0;
  color: #6f4a13;
  font-weight: 700;
  line-height: 1.35;
}
.bubble-limit-alert-item:nth-child(2n) { animation-delay: .35s; }
.bubble-limit-alert-item:nth-child(3n) { animation-delay: .7s; }

@keyframes bubbleAlertFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 10px 20px rgba(16,35,63,.12);
  }
  25% {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 14px 24px rgba(16,35,63,.16);
  }
  55% {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 18px 30px rgba(244,156,32,.22);
  }
  80% {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 14px 24px rgba(16,35,63,.16);
  }
}

/* ── Activity log ── */
.log-page, .log-list-panel { border-radius: 28px; }
.log-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 14px; }
.log-filter-actions { display: flex; gap: 8px; align-items: center; }
.log-table-wrap { overflow-x: auto; margin-top: 6px; }
.log-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.log-table th {
  padding: 9px 12px; text-align: left; font-size: .72rem; font-weight: 900;
  letter-spacing: .06em; text-transform: uppercase; color: #70829b;
  border-bottom: 2px solid var(--line);
}
.log-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.log-table tr:last-child td { border-bottom: none; }
.log-table tr:hover td { background: #f6f9ff; }
.log-id { color: #a0aec0; font-size: .72rem; }
.log-date { white-space: nowrap; color: #4a5568; }
.log-user { font-weight: 700; }
.log-role-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
}
.role-administrador { background: #eef3ff; color: #1a3a8a; }
.role-supervisor { background: #f0fdf4; color: #166534; }
.role-operador { background: #fff7ed; color: #9a3412; }
.log-action-tag {
  display: inline-block; padding: 2px 8px; border-radius: 8px;
  font-size: .72rem; font-weight: 800; background: #f1f5f9; color: #334155;
  font-family: monospace;
}
.log-action-login .log-action-tag { background: #e0fdf4; color: #065f46; }
.log-action-logout .log-action-tag { background: #fef9c3; color: #713f12; }
.log-action-acesso-negado .log-action-tag { background: #fee2e2; color: #991b1b; }
.log-detail { color: #4a5568; max-width: 340px; }
.log-ip { color: #94a3b8; font-size: .72rem; font-family: monospace; white-space: nowrap; }
.log-pagination { display: flex; align-items: center; gap: 10px; padding: 16px 0 4px; justify-content: center; }

.site-footer { padding: 0 0 24px; }
.site-footer-inner {
  width: min(1600px, calc(100% - 24px)); margin: 0 auto; padding: 16px 18px; border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.84), rgba(245,248,252,.9)); border: 1px solid var(--line);
  display: flex; justify-content: center; align-items: center; gap: 12px; color: #637691;
}
.site-footer-inner p { margin: 0; font-weight: 700; }
.site-footer-inner span { padding: 8px 12px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-weight: 800; }

.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; }
.modal.hidden { display: none; }
.modal-overlay { position: absolute; inset: 0; background: rgba(17,32,58,.52); backdrop-filter: blur(4px); }
.modal-panel {
  position: relative; width: min(960px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto;
}
.agenda-panel, .detail-panel, .user-modal { padding: 0; overflow: hidden; }
.agenda-panel { width: min(860px, calc(100vw - 24px)); display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.detail-panel { width: min(980px, calc(100vw - 24px)); display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.user-modal { width: min(560px, calc(100vw - 24px)); display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.agenda-topbar, .detail-topbar, .user-modal-topbar {
  position: sticky; top: 0; z-index: 2; padding: 18px 18px 12px; background: linear-gradient(180deg, #fff, #f7f9fd); border-bottom: 1px solid var(--line);
}
.modal-head h3 { margin: 0; font-size: 1.7rem; }
.modal-sub { margin: 6px 0 0; color: var(--muted); }
.modal-close { border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 10px 14px; font-weight: 800; }
.modal-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
.modal-stat { display: grid; gap: 6px; }
.modal-stat strong { font-size: 1.4rem; }
.agenda-item {
  display: grid;
  gap: 12px;
  border-radius: 22px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,249,255,.98));
  border: 1px solid rgba(197, 211, 235, 0.72);
  box-shadow: 0 14px 28px rgba(16,35,63,.08);
}
.agenda-top {
  align-items: flex-start;
  gap: 10px;
}
.agenda-desc {
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, #f7faff, #eef4ff);
  border: 1px solid #dde7f6;
}
.agenda-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: .88rem;
}
.agenda-foot span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f6f8fc;
  border: 1px solid #e0e7f2;
  font-weight: 700;
  line-height: 1.35;
}
.agenda-footer, .detail-footer, .user-modal .modal-footer {
  position: sticky; bottom: 0; z-index: 2; margin-top: 0; padding: 14px 18px 18px; background: linear-gradient(180deg, rgba(247,249,253,.92), #fff); border-top: 1px solid var(--line);
}
.user-modal-content, .detail-content { padding: 18px; overflow: auto; }
.detail-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; }
.detail-left, .detail-right { border: 1px solid var(--line); border-radius: 22px; padding: 18px; background: linear-gradient(180deg, #fbfcff, #f5f8fd); }
.detail-left h5 { margin: 0; font-size: 1.18rem; line-height: 1.35; }
.detail-left p { margin: 10px 0 12px; color: var(--muted); }
.detail-section-title { margin: 0 0 16px; color: #557199; text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; font-weight: 900; }
.detail-section-title:first-of-type { margin-top: 20px; }
.detail-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.detail-card strong, .form-preview label { color: #5f6f88; font-weight: 800; }
.form-preview { margin-bottom: 14px; }
.form-preview:nth-of-type(1) { margin-top: 16px; }
.detail-card span, .form-preview div { display: block; margin-top: 4px; line-height: 1.5; }
.detail-route-link { display: inline-flex; margin-top: 10px; color: #2d66bf; font-weight: 800; }
.preview-box { margin-top: 12px; padding: 14px; border-radius: 18px; background: #edf3ff; border: 1px solid #d9e3f5; }
.preview-box h6 { margin: 0 0 6px; }
.preview-box p { margin: 0; }
.preview-box small { display: block; margin-top: 6px; color: var(--muted); }

.auth-shell { min-height: 100vh; display: grid; align-items: center; width: min(1180px, calc(100% - 24px)); margin: 0 auto; padding: 24px 0; }
.auth-layout { display: grid; grid-template-columns: 1.05fr minmax(340px, 430px); gap: 24px; align-items: center; }
.auth-layout-login { grid-template-columns: minmax(340px, 480px); justify-content: center; }
.auth-hero { padding: 34px; }
.eyebrow {
  display: inline-flex; align-items: center; margin-bottom: 12px; padding: 8px 12px; border-radius: 999px;
  background: var(--blue-soft); color: #2e57b7; font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.auth-hero h1, .auth-head-login h1, .profile-summary h1, .users-hero h1 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.02; }
.auth-hero p, .profile-summary p, .users-hero p { margin: 14px 0 0; color: var(--muted); line-height: 1.65; }
.auth-badges span, .users-summary span {
  padding: 10px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: #51657f; font-weight: 700;
}
.auth-card { padding: 24px; }
.auth-head-login { margin-bottom: 18px; }
.auth-form { display: grid; gap: 14px; }
.auth-form label, .user-edit-form label { display: grid; gap: 8px; color: #31405a; font-weight: 700; }
.auth-foot { margin-top: 14px; color: var(--muted); }
.auth-foot a { color: var(--blue); font-weight: 800; }

.profile-shell { display: grid; grid-template-columns: 1fr 420px; gap: 18px; }
.profile-summary-head { display: grid; gap: 18px; }
.profile-identity { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 18px; align-items: center; }
.profile-avatar-large, .user-avatar {
  display: inline-flex; align-items: center; justify-content: center; font-weight: 900;
  background: linear-gradient(135deg, var(--blue), #7ca0ff); color: #fff;
}
.profile-avatar-large { width: 88px; height: 88px; border-radius: 28px; font-size: 2rem; }
.profile-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 22px; }
.profile-meta-card {
  display: grid; gap: 6px; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, #fff, #f5f8fe);
}
.profile-meta-card strong { color: #5d6f89; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.profile-note { margin-top: 18px; padding: 18px; border-radius: 22px; background: #edf3ff; border: 1px solid #dbe4f4; }
.profile-note strong { display: block; margin-bottom: 8px; color: #244d8c; }
.profile-note p { margin: 0; }

.users-shell { display: grid; gap: 18px; }
.users-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.user-card { display: grid; gap: 14px; min-width: 0; }
.user-card-top { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.user-card-top > div { min-width: 0; }
.user-avatar { width: 48px; height: 48px; border-radius: 16px; font-size: 1.1rem; }
.user-card-top h3 {
  margin: 0; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-card-top p {
  margin: 4px 0 0; color: var(--muted); overflow-wrap: anywhere; word-break: break-word;
}
.role-badge { padding: 8px 12px; border-radius: 999px; font-size: .78rem; font-weight: 800; }
.role-badge.admin { background: #fff2d8; color: #8b6414; }
.role-badge.supervisor { background: #e7f6f0; color: #1f6b4f; }
.role-badge.operador { background: #e0efff; color: #255ca8; }
.user-meta { display: flex; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: .88rem; }
.user-edit-form { display: grid; gap: 12px; }
.user-card-actions, .danger-form { display: flex; }

@media (max-width: 1500px) {
  .users-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.conexoes-table-wrapper { padding: 0; }
.conexoes-table-wrapper.loading { display: grid; place-items: center; min-height: 300px; }
.loading-spinner { color: var(--muted); font-size: 1rem; font-weight: 700; }
.conexoes-list { display: grid; gap: 12px; padding: 18px; }
.conexao-item { padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, #fbfcff, #f5f8fd); }
.conexao-item-header { display: grid; gap: 8px; margin-bottom: 10px; }
.conexao-data { font-weight: 800; color: #2d4a7a; font-size: .95rem; }
.conexao-duracao { color: #6b7c95; font-size: .85rem; }
.conexao-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.conexao-row.full { grid-template-columns: 1fr; }
.conexao-stat { display: grid; gap: 4px; }
.conexao-stat-label { font-size: .8rem; color: #7e8da5; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; }
.conexao-stat-value { font-size: 1rem; color: #2d4a7a; font-weight: 800; word-break: break-all; }
.btn-ver-conexoes { display: inline-block; margin-top: 8px; padding: 8px 12px; border-radius: 14px; background: #e9f0ff; color: #3c73f1; border: 1px solid #d5e2ff; font-weight: 800; font-size: .9rem; cursor: pointer; transition: .18s ease; }
.btn-ver-conexoes:hover { background: #d7e5ff; transform: translateY(-1px); }

@media (max-width: 1280px) {
  .app-shell, .profile-shell, .quick-grid, .layout-grid, .auth-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; min-height: auto; }
  .mini-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kpi-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .queue-wrap { position: static; }
}

@media (max-width: 900px) {
  .app-shell { width: calc(100% - 16px); margin: 8px auto; }
  .topbar, .panel-header, .calendar-toolbar, .calendar-nav, .queue-meta, .queue-bottom, .modal-head, .modal-footer, .agenda-top, .detail-banner, .section-head, .user-card-top {
    flex-direction: column; align-items: flex-start;
  }
  .calendar-nav {
    flex-direction: row;
    align-items: center;
  }
  .mini-grid, .kpi-grid, .profile-meta-grid, .modal-stats, .detail-grid, .detail-cards, .users-grid { grid-template-columns: 1fr; }
  .weekdays { display: none; }
  .calendar-grid { grid-template-columns: 1fr; }
  .day.empty { display: none; }
  .profile-identity { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .mini-grid, .kpi-grid { grid-template-columns: 1fr; }
  .topbar, .section-card, .timeline-panel, .calendar-wrap, .queue-wrap, .profile-summary, .profile-card, .auth-card, .auth-hero, .users-hero { padding: 18px; border-radius: 24px; }
  .section-head h2 { font-size: 2.2rem; }
  .bubble-limit-alert-stack { display: none !important; }
  .calendar-legend { align-items: stretch; }
  .calendar-bubble-filter {
    min-width: 100%;
    margin-left: 0;
  }
  .calendar-bubble-panel {
    padding: 8px 10px;
  }
  .calendar-nav {
    min-height: 88px;
    padding: 0 2px;
  }
  .modal {
    padding: 8px;
    align-items: end;
  }
  .modal-overlay {
    backdrop-filter: blur(8px);
  }
  .modal-panel,
  .agenda-panel,
  .detail-panel,
  .user-modal {
    width: 100%;
    max-width: none;
    max-height: min(100dvh - 16px, 100vh - 16px);
    border-radius: 24px;
    margin: 0;
    box-shadow: 0 24px 44px rgba(6,19,41,.24);
  }
  .agenda-panel,
  .detail-panel,
  .user-modal {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .agenda-topbar, .detail-topbar, .user-modal-topbar {
    padding: 16px 16px 10px;
  }
  .modal-head h3 {
    font-size: 1.25rem;
    line-height: 1.15;
  }
  .modal-sub {
    font-size: .9rem;
    line-height: 1.45;
  }
  .modal-close {
    width: 100%;
    text-align: center;
  }
  .agenda-content,
  .user-modal-content,
  .detail-content,
  .conexoes-list {
    padding: 14px 16px 16px;
  }
  .agenda-content {
    gap: 12px;
  }
  .detail-left,
  .detail-right,
  .conexao-item,
  .agenda-item {
    padding: 14px;
    border-radius: 18px;
  }
  .agenda-top {
    gap: 8px;
  }
  .agenda-top h4 {
    font-size: .92rem;
    line-height: 1.4;
  }
  .agenda-desc {
    padding: 11px 12px;
    font-size: .93rem;
    line-height: 1.45;
  }
  .detail-left h5 {
    font-size: 1rem;
  }
  .detail-section-title:first-of-type {
    margin-top: 14px;
  }
  .agenda-footer, .detail-footer, .user-modal .modal-footer {
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .modal-footer,
  .agenda-footer,
  .detail-footer,
  .user-modal .modal-footer,
  .agenda-foot,
  .conexao-row {
    display: grid;
    grid-template-columns: 1fr;
  }
  .modal-footer .btn-light,
  .modal-footer .btn-primary,
  .modal-footer .btn-danger,
  .agenda-footer .btn-light,
  .agenda-footer .btn-primary,
  .detail-footer .btn-light,
  .detail-footer .btn-primary,
  .detail-footer .btn-danger {
    width: 100%;
  }
  .agenda-foot span {
    width: 100%;
    justify-content: flex-start;
    min-height: 0;
    padding: 10px 12px;
    font-size: .84rem;
  }
  .modal-stats {
    grid-template-columns: 1fr;
  }
  .bubble-modal-overlay {
    padding: 8px;
    align-items: end;
  }
  .bubble-modal,
  .bubble-modal-compact {
    width: 100%;
    max-width: none;
    max-height: min(100dvh - 16px, 100vh - 16px);
    border-radius: 24px;
  }
  .bubble-modal-header,
  .bubble-modal-body,
  .bubble-modal form {
    padding-left: 16px;
    padding-right: 16px;
  }
  .bubble-modal-header {
    padding-top: 18px;
  }
  .bubble-modal-header h3 {
    font-size: 1.12rem;
    line-height: 1.2;
  }
  .bubble-modal-copy {
    padding: 14px 15px;
    font-size: .95rem;
  }
  .bubble-form .filter-field,
  .bubble-modal .filter-field {
    padding: 12px;
  }
}