:root {
  color-scheme: light;

  /* Tokens visuais AppDelta (identidade institucional moderna) */
  --app-navy: #183b56;
  --app-navy-deep: #0f2a43;
  --app-blue: #276678;
  --app-green: #1f7a4d;
  --app-bg: #eef3f7;
  --app-surface: #ffffff;
  --app-text: #172331;
  --app-text-muted: #647383;
  --app-border: #d7e0e8;
  --app-radius-sm: 6px;
  --app-radius-md: 10px;
  --app-shadow-sm: 0 1px 3px rgba(23, 35, 49, 0.08);

  /* Aliases de compatibilidade com os componentes atuais */
  --bg: var(--app-bg);
  --surface: var(--app-surface);
  --surface-2: #f6f9fb;
  --ink: var(--app-text);
  --muted: var(--app-text-muted);
  --line: var(--app-border);
  --line-strong: #bac8d4;
  --brand: var(--app-navy);
  --brand-2: var(--app-blue);
  --accent: #b8562b;
  --ok: var(--app-green);
  --danger: #b83434;
  --info: #1f65a7;
  --warn: #9a6415;
  --shadow: 0 12px 28px rgba(23, 35, 49, 0.08);
  --radius: 8px;
  --focus: 0 0 0 3px rgba(39, 102, 120, 0.24);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--bg);
}

body {
  margin: 0;
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 20;
  transform: translateY(-180%);
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  padding: 0.65rem 0.85rem;
}

.skip-link:focus {
  transform: translateY(0);
}

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-kicker {
  margin: 0 0 0.1rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0;
}

.view-tab,
.btn {
  min-height: 2.35rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  padding: 0.45rem 0.8rem;
  font-weight: 650;
}

.view-tab.is-active {
  border-color: var(--brand-2);
  background: var(--brand-2);
  color: #fff;
}

.app-main {
  flex: 1;
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 1rem clamp(1rem, 4vw, 2.5rem) 2rem;
}

.module-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: end;
  margin-bottom: 1rem;
}

.module-heading p {
  margin: 0;
  color: var(--muted);
}

.module-heading h2 {
  margin: 0 0 0.1rem;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.15;
}

.view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 23%);
  gap: 1rem;
  align-items: start;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.section-title h3 {
  margin: 0;
  font-size: 1.05rem;
}

.muted {
  color: var(--muted);
}

.quarter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.quarter,
.side-panel,
.table-panel,
.admin-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.quarter {
  overflow: hidden;
}

.quarter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.quarter-header h4 {
  margin: 0;
  font-size: 0.95rem;
}

.demo-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.responsive-table {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 0.62rem 0.7rem;
  text-align: left;
  vertical-align: top;
}

th {
  color: #405365;
  font-size: 0.76rem;
  text-transform: uppercase;
}

tr:last-child td {
  border-bottom: 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 14rem;
}

.chip,
.badge,
.period-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
}

.chip {
  min-height: 1.55rem;
  padding: 0.18rem 0.5rem;
  background: #e8eef2;
  color: #293b4a;
  font-size: 0.78rem;
}

.period-mark {
  width: 1.45rem;
  height: 1.45rem;
  color: #fff;
  font-size: 0.78rem;
}

.period-1 {
  background: var(--ok);
}

.period-2 {
  background: var(--danger);
}

.period-3 {
  background: var(--info);
}

.side-panel {
  position: sticky;
  top: 1rem;
  padding: 0.9rem;
}

.side-panel h3 {
  margin: 0 0 0.8rem;
  font-size: 1rem;
}

.summary-list {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.45rem;
}

.summary-row dt {
  color: var(--muted);
}

.summary-row dd {
  margin: 0;
  font-weight: 750;
  text-align: right;
}

.booking-list {
  display: grid;
  gap: 0.45rem;
  margin: 0 0 0.8rem;
  padding: 0;
  list-style: none;
}

.booking-item {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.55rem;
  background: var(--surface-2);
}

.booking-item strong {
  display: block;
  font-size: 0.86rem;
}

.booking-item span {
  color: var(--muted);
  font-size: 0.78rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: auto;
}

.btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.btn-ghost {
  background: transparent;
}

.full-width {
  width: 100%;
}

.period-form {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.8rem;
  border-top: 1px solid var(--line);
  padding-top: 0.8rem;
}

.period-form[hidden] {
  display: none;
}

.mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.mode-switch button {
  min-height: 2.2rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-weight: 650;
}

.mode-switch button.is-active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.field {
  display: grid;
  gap: 0.25rem;
}

.field label {
  color: #405365;
  font-size: 0.82rem;
  font-weight: 700;
}

.field input,
.field select {
  width: 100%;
  min-height: 2.35rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0.45rem 0.55rem;
  background: #fff;
  color: var(--ink);
}

.impact-box {
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  padding: 0.65rem;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.85rem;
}

.form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.table-panel,
.admin-panel {
  padding: 0.85rem;
}

.badge {
  min-height: 1.55rem;
  padding: 0.18rem 0.55rem;
  font-size: 0.76rem;
  white-space: nowrap;
}

.badge-neutral {
  background: #e9eef4;
  color: #3c4c5c;
}

.badge-ok {
  background: #dcefe5;
  color: #17643e;
}

.badge-warn {
  background: #f8ead2;
  color: #76500f;
}

.badge-info {
  background: #dcecf9;
  color: #174f83;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.metric {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.7rem;
  background: var(--surface-2);
}

.metric span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.metric strong {
  display: block;
  margin-top: 0.15rem;
  font-size: 1.1rem;
}

.access-panel {
  width: min(100%, 420px);
  margin: clamp(2rem, 8vh, 5rem) auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: clamp(1rem, 4vw, 1.4rem);
}

.access-panel h2,
.account-panel h2,
.table-panel h2 {
  margin: 0 0 0.3rem;
  font-size: 1.35rem;
}

.stack {
  display: grid;
  gap: 0.8rem;
  margin-top: 1rem;
}

.account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.account-grid .feedback,
.account-grid button {
  grid-column: 1 / -1;
}

.field input[readonly] {
  background: var(--surface-2);
  color: var(--muted);
}

.feedback:empty {
  display: none;
}

.alert {
  margin: 0.75rem 0;
  border-radius: 6px;
  padding: 0.65rem 0.75rem;
  font-weight: 650;
}

.alert-error {
  border: 1px solid #efb4b4;
  background: #fff1f1;
  color: var(--danger);
}

.alert-success {
  border: 1px solid #acd9c2;
  background: #eef8f2;
  color: var(--ok);
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.sub-section-title {
  margin-top: 1.4rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.inline-form {
  margin: 0 0 1rem;
}

@media (max-width: 1060px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .side-panel {
    position: static;
  }

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

@media (max-width: 760px) {
  .module-heading {
    grid-template-columns: 1fr;
    display: grid;
    align-items: start;
  }

  .view-tabs {
    justify-content: flex-start;
  }

  .quarter-grid,
  .admin-grid,
  .account-grid {
    grid-template-columns: 1fr;
  }

  .view-tab {
    flex: 1 1 100%;
  }

  .module-heading h2 {
    font-size: 1.4rem;
  }

  table {
    min-width: 620px;
  }
}

.pending-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #e6c58c;
  border-radius: 6px;
  background: #fff6e6;
  color: #7a5208;
  padding: 0.6rem 0.8rem;
}

.pending-banner-text {
  flex: 1 1 220px;
  font-weight: 650;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 650;
  white-space: nowrap;
  background: #e9eef4;
  color: #3c4c5c;
}

.status-badge.status-ativo {
  background: #dcefe5;
  color: #17643e;
}

.status-badge.status-pendente {
  background: #f8ead2;
  color: #76500f;
}

.status-badge.status-rejeitado {
  background: #fff1f1;
  color: #a33232;
}

/* ============================================================
   Login definitivo — Prompt 07A.1
   Ativado somente quando body.app-auth-mode esta presente.
   ============================================================ */

body.app-auth-mode {
  background: var(--app-surface);
}

body.app-auth-mode .app-shell {
  min-height: 100vh;
}

body.app-auth-mode .app-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

.login-screen {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  min-height: 100vh;
  background: var(--app-surface);
}

/* ---- Lado institucional (identidade) ---- */

.login-showcase {
  position: relative;
  display: flex;
  overflow: hidden;
  background: linear-gradient(160deg, var(--app-navy) 0%, var(--app-navy-deep) 80%);
  color: #fff;
}

.login-showcase-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.login-showcase-bg .shape {
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
}

.login-showcase-bg .shape-1 {
  width: 36rem;
  height: 36rem;
  top: -13rem;
  right: -18rem;
}

.login-showcase-bg .shape-2 {
  width: 24rem;
  height: 24rem;
  bottom: -10rem;
  left: -10rem;
  border-color: rgba(255, 255, 255, 0.09);
}

.login-showcase-bg .shape-3 {
  width: 10rem;
  height: 10rem;
  right: 10%;
  bottom: 16%;
  border: 0;
  background: rgba(255, 255, 255, 0.05);
}

.login-showcase-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 540px);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1.75rem, 5vw, 4rem);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.brand-lockup .delta-mark {
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
}

.brand-lockup strong {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.brand-lockup .brand-sub {
  display: block;
  margin-top: 0.2rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8rem;
}

.login-message-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 2.5rem 0;
}

.login-message {
  max-width: 25ch;
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.login-perks {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.login-perks li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
}

.login-perks .perk-icon {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  color: #7fd0a3;
}

/* ---- Lado do formulario ---- */

.login-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--app-surface);
}

.login-panel-inner {
  position: relative;
  top: 1.25vh;
  width: min(calc(100% - 3rem), 400px);
  margin: auto;
  padding: 3rem 0 4rem;
}

.brand-lockup--compact {
  justify-content: center;
  margin-bottom: 2.5rem;
}

.brand-lockup--compact .delta-mark {
  width: 1.7rem;
  height: 1.7rem;
  color: var(--app-navy);
}

.brand-lockup--compact strong {
  color: var(--app-text);
  font-size: 1.15rem;
}

.login-title {
  margin: 0 0 0.4rem;
  color: var(--app-text);
  font-size: 1.8rem;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
}

.login-subtitle {
  margin: 0 0 1.8rem;
  color: var(--app-text-muted);
  font-size: 0.98rem;
  text-align: center;
}

.login-panel-inner .feedback {
  margin: 0 0 0.9rem;
}

.login-google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 3.05rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: var(--app-surface);
  color: var(--app-text);
  font-size: 0.96rem;
  font-weight: 650;
  box-shadow: var(--app-shadow-sm);
  transition: background-color 120ms ease, border-color 120ms ease;
}

.login-google-btn:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.login-google-btn:focus-visible {
  outline: 2px solid var(--app-blue);
  outline-offset: 2px;
  box-shadow: var(--focus);
}

.login-google-btn .google-g {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

.login-google-btn--mock {
  border-color: var(--app-navy);
  background: var(--app-navy);
  color: #fff;
}

.login-google-btn--mock:hover {
  border-color: var(--app-navy-deep);
  background: var(--app-navy-deep);
}

.login-google-btn--mock:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(24, 59, 86, 0.35);
}

.login-help {
  margin: 1.9rem 0 0;
  color: var(--app-text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
  text-align: center;
}

.mock-callout {
  margin: 0 0 1.05rem;
  border: 1px solid #e7ddc9;
  border-radius: var(--app-radius-sm);
  background: #f8f4ea;
  color: #7d6f54;
  padding: 0.45rem 0.6rem;
  font-size: 0.78rem;
  line-height: 1.4;
}

.mock-callout strong {
  display: inline;
  font-weight: 700;
  color: #6d5f45;
}

.mock-callout span {
  display: block;
  margin-top: 0.1rem;
}

.login-footer {
  position: absolute;
  right: 0;
  bottom: 1.4rem;
  left: 0;
  color: #93a3b3;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

/* ---- Tablet ---- */

@media (min-width: 761px) and (max-width: 1023px) {
  .login-screen {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  .login-message {
    font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  }
}

/* ---- Mobile ---- */

@media (max-width: 760px) {
  .login-screen {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .login-showcase {
    min-height: auto;
  }

  .login-showcase-inner {
    width: 100%;
    display: block;
    margin: 0;
    padding: 1.15rem 1.25rem;
  }

  .login-showcase-bg .shape {
    display: none;
  }

  .login-showcase-inner .brand-lockup strong {
    font-size: 1.15rem;
  }

  .login-message-wrap,
  .login-perks {
    display: none;
  }

  .login-panel {
    min-height: 0;
  }

  .login-panel-inner {
    width: min(calc(100% - 2rem), 400px);
    padding: 2.4rem 0 3.6rem;
  }

  .brand-lockup--compact {
    margin-bottom: 2.25rem;
  }

  .login-title {
    font-size: 1.6rem;
  }

  .login-footer {
    bottom: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-google-btn {
    transition: none;
  }
}

/* ============================================================
   Primeiro acesso definitivo — Prompt 07A.2
   Reutiliza a mesma identidade visual do Login (classes .login-*).
   ============================================================ */

.auth-flow-screen .login-panel {
  flex-direction: column;
  overflow-y: auto;
}

.auth-flow-screen .login-panel-inner {
  position: static;
  top: auto;
  margin: auto;
  padding: 3rem 0 4rem;
}

.auth-flow-screen .brand-lockup--compact {
  margin-bottom: 2rem;
}

.auth-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0 0 1.7rem;
  padding: 0;
  list-style: none;
}

.auth-step {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  color: var(--app-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.auth-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: #e9eef4;
  color: var(--app-text-muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.auth-step.is-current {
  color: var(--app-navy);
}

.auth-step.is-current .auth-step-num {
  background: var(--app-navy);
  color: #fff;
}

.auth-step.is-done .auth-step-num {
  background: #e3f1e9;
  color: var(--app-green);
}

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

.auth-form .field {
  gap: 0.3rem;
}

.auth-flow-screen .field label {
  color: #405365;
  font-size: 0.84rem;
  font-weight: 700;
}

.auth-flow-screen .field input {
  min-height: 2.9rem;
  border-color: var(--app-border);
  border-radius: var(--app-radius-sm);
  background: var(--app-surface);
  color: var(--app-text);
}

.auth-flow-screen .field input::placeholder {
  color: #9aa8b5;
}

.auth-flow-screen .field input:focus-visible {
  outline: none;
  border-color: var(--app-blue);
  box-shadow: var(--focus);
}

.field-hint {
  color: var(--app-text-muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  border: 1px solid transparent;
  border-radius: var(--app-radius-sm);
  padding: 0.55rem 1rem;
  font-weight: 650;
  cursor: pointer;
}

.auth-btn:focus-visible {
  outline: 2px solid var(--app-blue);
  outline-offset: 2px;
  box-shadow: var(--focus);
}

.auth-btn--primary {
  border-color: var(--app-navy);
  background: var(--app-navy);
  color: #fff;
}

.auth-btn--primary:hover {
  border-color: var(--app-navy-deep);
  background: var(--app-navy-deep);
}

.auth-btn--primary:disabled {
  cursor: wait;
  opacity: 0.72;
}

.auth-btn--secondary {
  border-color: var(--app-border);
  background: var(--app-surface);
  color: var(--app-navy);
}

.auth-btn--secondary:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.auth-btn--full {
  width: 100%;
}

.auth-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.auth-info {
  margin: 0 0 1.1rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: var(--app-surface);
  padding: 0.15rem 0.9rem;
}

.auth-info-row {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--app-border);
}

.auth-info-row:last-child {
  border-bottom: 0;
}

.auth-info-row dt {
  color: var(--app-text-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.auth-info-row dd {
  margin: 0;
  font-weight: 650;
  text-align: right;
  overflow-wrap: break-word;
}

.auth-note {
  margin: 0 0 0.4rem;
  color: var(--app-text-muted);
  font-size: 0.9rem;
  text-align: center;
}

.auth-alert .login-subtitle {
  margin-bottom: 0.5rem;
}

.auth-readonly {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: var(--surface-2);
  padding: 0.6rem 0.75rem;
}

.auth-readonly span {
  color: var(--app-text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.auth-readonly strong {
  font-size: 0.86rem;
  font-weight: 650;
  overflow-wrap: anywhere;
  text-align: right;
}

@media (max-width: 760px) {
  .auth-flow-screen .login-panel {
    display: block;
  }

  .auth-flow-screen .login-panel-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    margin: 0 auto;
    padding: 2.4rem 0 3.6rem;
  }

  .auth-step > span:last-child {
    display: none;
  }
}

/* ============================================================
   Toolbar de cenario mock (somente modo mock / desenvolvimento)
   ============================================================ */

.mock-toolbar {
  position: fixed;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  max-width: calc(100vw - 1.5rem);
  border: 1px solid #cfdbe4;
  border-radius: var(--app-radius-sm);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--app-shadow-sm);
  padding: 0.4rem 0.55rem;
}

.mock-toolbar-title {
  margin-right: 0.15rem;
  color: var(--app-navy);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mock-toolbar button {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: #fff;
  color: var(--app-text);
  padding: 0.25rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 650;
  cursor: pointer;
}

.mock-toolbar button:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.mock-toolbar [data-mock-reset] {
  border-color: #d9b98a;
  background: #fff7e8;
  color: #7a5208;
}

.mock-toolbar [data-mock-sair] {
  border-color: #efb4b4;
  background: #fff1f1;
  color: #a33232;
}

/* ============================================================
   App Shell definitivo — Prompt 07A.3
   Topbar + Sidebar + conteúdo de rota (somente usuário ATIVO)
   ============================================================ */

body.app-internal {
  background: var(--app-bg);
}

body.app-internal .app-shell {
  min-height: 100vh;
}

body.app-internal .app-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.app-frame {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--app-bg);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.9rem;
  padding: 0.35rem 0.9rem;
  background: #1a4a75;
  color: #fff;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.topbar-brand .delta-mark {
  flex: none;
  width: 1.12rem;
  height: 1.12rem;
}

.tb-name {
  font-size: 0.98rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.tb-sub {
  margin-left: 0.3rem;
  padding-left: 0.55rem;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
}

.topbar-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--app-radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.topbar-menu-btn svg {
  width: 1.05rem;
  height: 1.05rem;
}

.topbar-user {
  position: relative;
  margin-left: auto;
}

.topbar-user-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 0;
  border-radius: var(--app-radius-sm);
  background: transparent;
  color: #fff;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.topbar-user-btn:hover,
.topbar-user-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.1);
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #1f66b4;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 750;
}

.user-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.user-meta strong {
  font-size: 0.82rem;
  font-weight: 650;
}

.user-meta small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.7rem;
}

.user-chev {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.7rem;
}

.user-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 70;
  width: 12rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-sm);
  padding: 0.3rem;
}

.user-menu[hidden] {
  display: none;
}

.user-menu-item {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--app-radius-sm);
  background: transparent;
  color: var(--app-text);
  padding: 0.5rem 0.6rem;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.user-menu-item:hover {
  background: var(--surface-2);
}

.app-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.app-sidebar {
  display: flex;
  flex: none;
  flex-direction: column;
  width: 228px;
  background: #1a4a75;
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.sidebar-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1rem 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 1rem;
  font-weight: 800;
}

.sidebar-head .delta-mark {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0.4rem 0.5rem 0.6rem;
}

.sidebar-module {
  min-height: 0;
  overflow-y: auto;
}

.sidebar-spacer {
  flex: 1 1 auto;
  min-height: 0.5rem;
}

.sidebar-global {
  flex: none;
  margin-top: 0.25rem;
  padding-top: 0.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.sidebar-group {
  margin-top: 0.2rem;
}

.sidebar-group-label {
  display: block;
  padding: 0.45rem 0.55rem 0.2rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  padding: 0.42rem 0.55rem;
  font-size: 0.84rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.sidebar-item .nav-ico {
  flex: none;
  width: 1rem;
  height: 1rem;
}

.sidebar-item:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.sidebar-item.is-active {
  background: #1f66b4;
  color: #fff;
}

.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  width: 1.7rem;
  height: 1.7rem;
  margin: 0.45rem 0.55rem 0.15rem auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 5px;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.sidebar-toggle-ico {
  width: 0.95rem;
  height: 0.95rem;
  transition: transform 150ms ease;
}

.app-sidebar.is-collapsed {
  width: 60px;
}

.app-sidebar.is-collapsed .sidebar-toggle {
  margin-right: auto;
  margin-left: auto;
}

.app-sidebar.is-collapsed .sidebar-toggle-ico {
  transform: rotate(180deg);
}

.app-sidebar.is-collapsed .sidebar-nav {
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.app-sidebar.is-collapsed .sidebar-item {
  justify-content: center;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

.app-sidebar.is-collapsed .sidebar-group-label,
.app-sidebar.is-collapsed .sidebar-item > span {
  display: none;
}

@media (max-width: 900px) {
  .sidebar-toggle {
    display: none;
  }

  .app-sidebar.is-collapsed {
    width: min(78vw, 280px);
  }

  .app-sidebar.is-collapsed .sidebar-nav {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .app-sidebar.is-collapsed .sidebar-item {
    justify-content: flex-start;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }

  .app-sidebar.is-collapsed .sidebar-group-label,
  .app-sidebar.is-collapsed .sidebar-item > span {
    display: block;
  }
}

.route-area {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--app-bg);
}

.route-banner {
  padding: 1rem 1.25rem 0;
}

.route-banner .pending-banner {
  margin-bottom: 0;
}

.route-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem 2rem;
}

.route-placeholder h1 {
  margin: 0 0 0.4rem;
  color: var(--app-text);
  font-size: 1.5rem;
  font-weight: 650;
}

.route-placeholder p {
  margin: 0;
  color: var(--app-text-muted);
}

.drawer-backdrop {
  display: none;
}

@media (max-width: 1024px) {
  .app-sidebar {
    width: 214px;
  }

  .route-banner,
  .route-content {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

@media (max-width: 900px) {
  .topbar-menu-btn {
    display: inline-flex;
  }

  .app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    width: min(78vw, 280px);
    transform: translateX(-105%);
    transition: transform 180ms ease;
  }

  .app-frame.drawer-open .app-sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 18px rgba(15, 42, 67, 0.25);
  }

  .drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(15, 42, 67, 0.45);
  }

  .app-frame.drawer-open .drawer-backdrop {
    display: block;
  }
}

@media (max-width: 560px) {
  .topbar {
    min-height: 2.7rem;
    padding: 0.4rem 0.6rem;
    gap: 0.5rem;
  }

  .tb-sub {
    display: none;
  }

  .user-meta {
    display: none;
  }

  .route-banner,
  .route-content {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar {
    transition: none;
  }
}

.topbar-modules {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 1.1rem;
  min-width: 0;
}

.topbar-module {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.85);
  padding: 0.32rem 0.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

.topbar-module.is-active {
  color: #fff;
  font-weight: 700;
}

.topbar-module.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: #7fc2f0;
}

@media (max-width: 560px) {
  .topbar-modules {
    margin-left: 0.6rem;
    gap: 0.25rem;
  }

  .topbar-module {
    font-size: 0.8rem;
    padding: 0.3rem 0.05rem;
  }
}

/* ============================================================
   Rota Marcação de Férias — Prompt 07B.1 (estrutura visual)
   ============================================================ */

.ferias-marcacao {
  max-width: 1180px;
  margin: 0 auto;
}

.ferias-page-header h1 {
  margin: 0 0 0.3rem;
  color: var(--app-text);
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.ferias-page-header p {
  margin: 0;
  color: var(--app-text-muted);
  font-size: 0.9rem;
}

.ferias-topo {
  display: grid;
  grid-template-columns: minmax(130px, 0.9fr) minmax(160px, 1.1fr) minmax(0, 3fr);
  gap: 0.6rem;
  margin: 1rem 0 1.1rem;
  align-items: stretch;
}

.ferias-topo-info,
.ferias-topo-rodada {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-sm);
}

.ferias-topo-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 58px;
  padding: 0.45rem 0.6rem;
}

.ferias-topo-label {
  color: var(--app-navy);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ferias-topo-valor {
  color: var(--app-blue);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
}

.ferias-topo-rodadas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.ferias-topo-rodada {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.4rem 0.55rem;
}

.ferias-topo-rodada--r1 {
  background: #f5fff7;
  border-color: #bfe7cd;
}

.ferias-topo-rodada--r2 {
  background: #fff7f7;
  border-color: #ffc7c7;
}

.ferias-topo-rodada--r3 {
  background: #f7faff;
  border-color: #c5d9ff;
}

.ferias-rodada-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
}

.ferias-rodada-dot--r1 {
  background: #118238;
}

.ferias-rodada-dot--r2 {
  background: #e11717;
}

.ferias-rodada-dot--r3 {
  background: #1f6eea;
}

.ferias-topo-rodada-texto {
  min-width: 0;
}

.ferias-topo-rodada-texto strong {
  display: block;
  overflow: hidden;
  color: var(--app-text);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.15;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.ferias-topo-rodada-texto span {
  display: block;
  margin-top: 0.15rem;
  color: var(--app-text-muted);
  font-size: 0.74rem;
  font-weight: 700;
}

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

  .ferias-topo-rodadas {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .ferias-topo {
    grid-template-columns: minmax(0, 1fr);
  }

  .ferias-topo-rodadas {
    grid-template-columns: minmax(0, 1fr);
  }

  .ferias-topo-valor {
    font-size: 1.35rem;
  }
}

.ferias-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 1rem;
  align-items: start;
}

.ferias-plantoes {
  min-width: 0;
  padding: 1rem 1rem 1.25rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-sm);
}

.ferias-plantoes-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.ferias-plantoes-head h2 {
  margin: 0;
  color: var(--app-text);
  font-size: 1.05rem;
  font-weight: 700;
}

.ferias-periodos-nav {
  display: flex;
  flex-wrap: nowrap;
  margin: 0 0 0.6rem;
  border: 1px solid #d7e1ec;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(23, 35, 49, 0.06);
  overflow: visible;
}

.ferias-periodos-nav--flutuante {
  position: fixed;
  display: none;
  z-index: 70;
  margin: 0;
  box-shadow: 0 10px 24px rgba(23, 35, 49, 0.16);
}

.ferias-periodos-nav--flutuante.is-visible {
  display: flex;
}

.ferias-layout,
.ferias-calendar-panel,
.ferias-marcacao {
  overflow: visible;
}

.ferias-periodo-btn {
  flex: 1 1 0;
  min-width: 128px;
  height: 36px;
  border: 0;
  border-right: 1px solid #eef1f5;
  background: transparent;
  color: #5e6f82;
  padding: 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.ferias-periodo-btn:last-child {
  border-right: 0;
}

.ferias-periodo-btn:hover {
  background: #f4f8fc;
  color: #0d2670;
}

.ferias-periodo-btn.is-active {
  background: #0f67d8;
  color: #fff;
  font-weight: 800;
}

[data-ancora-trimestre] {
  scroll-margin-top: 54px;
}

.ferias-tabela-anual {
  margin-top: 0.65rem;
}

.ferias-plantoes-table--anual thead th {
  z-index: auto;
}

.ferias-tabela-anual tbody + tbody {
  border-top: 2px solid var(--app-bg);
}

.ferias-plantoes-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.76rem;
}

.ferias-plantoes-table th {
  height: 24px;
  padding: 0.18rem 0.3rem;
  border-bottom: 1px solid var(--app-border);
  border-right: 1px solid #e9edf3;
  background: #fbfcfe;
  color: #0a1a44;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.ferias-plantoes-table th:last-child {
  border-right: 0;
}

.ferias-plantoes-table td {
  padding: 0.18rem 0.35rem;
  border-bottom: 1px solid #e5eaf2;
  border-right: 1px solid #e5eaf2;
  color: var(--app-text);
  vertical-align: middle;
}

.ferias-plantoes-table td:last-child {
  border-right: 0;
}

.ferias-plantoes-table tbody tr:last-child td {
  border-bottom: 0;
}

.ferias-plantoes-table tbody tr:nth-child(even) td:not(.ferias-plantoes-mes) {
  background: #f8fafc;
}

.ferias-plantoes-table tbody tr.ferias-mes-inicio td {
  border-top: 2px solid #b6c2d2;
}

.ferias-plantoes-table tbody tr:first-child td {
  border-top: 0;
}

.ferias-plantoes-table .is-center {
  text-align: center;
}

.ferias-plantoes-mes {
  background: #fff;
  color: var(--app-navy);
  font-size: 0.95rem;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.ferias-plantoes-mes--ext {
  background: #f7faff;
  color: #1f6eea;
}

.ferias-plantoes-data {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ferias-servidores-cell {
  min-width: 0;
  color: var(--app-text-muted);
}

.ferias-servidores-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.4rem;
}

.ferias-servidores-vazio {
  color: var(--app-text-muted);
}

.ferias-servidor-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  border: 1px solid var(--app-border);
  border-radius: 4px;
  background: #fff;
  color: var(--app-text);
  padding: 0.04rem 0.45rem 0.04rem 0.1rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.ferias-servidor-rodada {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 900;
}

.ferias-servidor-chip--r1 {
  border-color: #9dd8ae;
  background: #f7fff8;
}

.ferias-servidor-chip--r2 {
  border-color: #ffb7b7;
  background: #fff9f9;
}

.ferias-servidor-chip--r3 {
  border-color: #a9c7ff;
  background: #f8fbff;
}

.ferias-servidor-chip--r1 .ferias-servidor-rodada {
  background: #118238;
}

.ferias-servidor-chip--r2 .ferias-servidor-rodada {
  background: #e11717;
}

.ferias-servidor-chip--r3 .ferias-servidor-rodada {
  background: #1f6eea;
}

.ferias-servidor-nome {
  overflow-wrap: anywhere;
}

.ferias-plantoes-table th:nth-child(1),
.ferias-plantoes-table td:nth-child(1) {
  width: 54px;
}

.ferias-plantoes-table th:nth-child(2),
.ferias-plantoes-table td:nth-child(2) {
  width: 110px;
  white-space: nowrap;
}

.ferias-plantoes-table th:nth-child(4),
.ferias-plantoes-table td:nth-child(4) {
  width: 58px;
  white-space: nowrap;
}

.ferias-plantoes-total {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ferias-sem-plantao {
  margin: 0.9rem 0 0;
  padding: 1.1rem 1rem;
  border: 1px dashed var(--app-border);
  border-radius: var(--app-radius-sm);
  background: var(--surface-2);
  color: var(--app-text-muted);
  font-size: 0.9rem;
  text-align: center;
}

.ferias-my-vacations {
  position: sticky;
  top: 0;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-sm);
}

.ferias-my-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 1px solid var(--app-border);
  padding-bottom: 0.6rem;
}

.ferias-my-head h2 {
  margin: 0;
  color: var(--app-text);
  font-size: 1.02rem;
  font-weight: 700;
}

.ferias-my-plantao {
  color: var(--app-text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ferias-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 0.85rem;
}

.ferias-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.4rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: var(--surface-2);
  text-align: center;
}

.ferias-stat-value {
  color: var(--app-navy);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.1;
}

.ferias-stat-value span {
  font-size: 0.7rem;
  font-weight: 650;
}

.ferias-stat-label {
  color: var(--app-text-muted);
  font-size: 0.68rem;
  font-weight: 650;
}

.ferias-periods {
  margin-top: 1rem;
  border-top: 1px solid var(--app-border);
  padding-top: 0.7rem;
}

.ferias-periods h3 {
  margin: 0 0 0.4rem;
  color: var(--app-text);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ferias-periods-empty {
  margin: 0;
  color: var(--app-text-muted);
  font-size: 0.84rem;
}

.ferias-period {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--app-border);
  font-size: 0.8rem;
}

.ferias-period-name {
  font-size: 0.8rem;
}

.ferias-period-tag {
  justify-self: end;
  align-self: start;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #e9eef4;
  color: #3c4c5c;
  font-size: 0.68rem;
  font-weight: 700;
}

.ferias-period-dates {
  color: var(--app-text-muted);
  font-size: 0.78rem;
}

.ferias-period-days {
  justify-self: end;
  color: var(--app-text-muted);
  font-size: 0.78rem;
}

@media (max-width: 1100px) {
  .ferias-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ferias-my-vacations {
    position: static;
  }
}

@media (max-width: 560px) {
  .ferias-tabela-anual {
    overflow-x: auto;
  }
}

/* ============================================================
   Marcação — fechamento visual (07B.5) — banner e cards
   ============================================================ */

.ferias-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0 0 0.9rem;
  align-items: stretch;
}

.ferias-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  box-shadow: var(--app-shadow-sm);
}

.ferias-card--resumo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 66px;
  padding: 0.5rem 0.7rem;
}

.ferias-card-kicker {
  color: var(--app-text-muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ferias-card-valor {
  color: var(--app-navy);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  margin-top: 0.2rem;
}

.ferias-card-rodada {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.45rem 0.55rem;
}

.ferias-card-rodada--r1 {
  background: #f5fff7;
  border-color: #bfe7cd;
}

.ferias-card-rodada--r2 {
  background: #fff7f7;
  border-color: #ffc7c7;
}

.ferias-card-rodada--r3 {
  background: #f7faff;
  border-color: #c5d9ff;
}

.ferias-rodada-circulo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
}

.ferias-rodada-circulo--sm {
  width: 1.35rem;
  height: 1.35rem;
  font-size: 0.64rem;
}

.ferias-rodada-circulo--r1 {
  background: #118238;
}

.ferias-rodada-circulo--r2 {
  background: #e11717;
}

.ferias-rodada-circulo--r3 {
  background: #1f6eea;
}

.ferias-card-rodada-corpo {
  min-width: 0;
}

.ferias-card-rodada-corpo strong {
  display: block;
  overflow: hidden;
  color: var(--app-text);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.ferias-card-rodada-status {
  display: block;
  margin-top: 0.1rem;
  color: var(--app-text);
  font-size: 0.78rem;
  font-weight: 700;
}

.ferias-card-rodada-datas {
  display: block;
  color: var(--app-text-muted);
  font-size: 0.72rem;
}

.ferias-calendar-panel {
  min-width: 0;
}

/* Total: neutro até 3; limite 4; acima de 4 */

.ferias-plantoes-total.is-limit {
  background: #fff4d8;
  color: #9a6415;
}

.ferias-plantoes-total.is-over {
  background: #ffe1e1;
  color: #c22727;
  font-weight: 800;
}

.ferias-total-alert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9rem;
  height: 0.9rem;
  margin-left: 0.15rem;
  border-radius: 50%;
  background: #d00000;
  color: #fff;
  font-size: 0.6rem;
  line-height: 1;
}

@media (max-width: 1300px) {
  .ferias-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

@media (max-width: 560px) {
  .ferias-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   Painel lateral "Minhas férias" (07B.5)
   ============================================================ */

.ferias-minhas {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.ferias-resumo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.ferias-resumo-card {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0.3rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: var(--surface-2);
  text-align: center;
}

.ferias-resumo-card strong {
  color: var(--app-navy);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.1;
}

.ferias-resumo-card span {
  color: var(--app-text-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ferias-resumo-card--saldo {
  border-color: #bfe7cd;
  background: #e7f7ee;
}

.ferias-resumo-card--saldo strong {
  color: #087a4c;
}

.ferias-resumo-periodos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.55rem;
  color: var(--app-text-muted);
  font-size: 0.78rem;
}

.ferias-resumo-periodos strong {
  color: #0d2670;
  font-weight: 800;
}

.ferias-secao {
  background: #ffffff;
  border: 1px solid #d9e4ef;
  border-radius: 7px;
  box-shadow: 0 1px 3px rgba(23, 35, 49, 0.06);
  padding: 12px 14px;
}

.ferias-secao > h3 {
  margin: 0 0 8px;
  color: #0d2670;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Nova marcação com duas abas */

.ferias-nova-marcacao {
  display: grid;
  gap: 0.6rem;
}

.ferias-form-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ferias-form-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
  padding: 0.2rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: var(--surface-2);
}

.ferias-form-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 0.5rem;
  border-radius: 6px;
  color: #0d2670;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.ferias-form-radio:checked + .ferias-form-tab {
  background: #0f67d8;
  color: #ffffff;
  font-weight: 700;
}

.ferias-form-tab.is-active {
  background: #0f67d8;
  color: #ffffff;
  font-weight: 700;
}

.ferias-form-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.ferias-form-campos[hidden] {
  display: none;
}

.ferias-form-campos .field {
  display: grid;
  gap: 0.15rem;
}

.ferias-form-campos label {
  color: var(--app-text-muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.ferias-form-campos input {
  width: 100%;
  min-height: 42px;
  border: 1px solid #d7e1ec;
  border-radius: 6px;
  background: #ffffff;
  color: var(--app-text);
  padding: 0.4rem 0.5rem;
  font-size: 0.85rem;
}

.ferias-form-acoes {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 0.4rem;
}

.ferias-form-acoes .btn {
  width: 100%;
}

.ferias-form-acoes .btn-ghost {
  background: #ffffff;
  border: 1px solid #d7e1ec;
  color: #0a1a44;
}

.ferias-form-acoes .btn-primary {
  background: #0f67d8;
  border: 1px solid #0f67d8;
  color: #ffffff;
}

/* Listas de marcações */

.ferias-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ferias-marcacao-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0.3rem 0.5rem;
  padding: 0.45rem 0.05rem;
  border-top: 1px solid #eef1f5;
}

.ferias-marcacao-item:first-child {
  border-top: 0;
  padding-top: 0.05rem;
}

.ferias-marcacao-item > .ferias-rodada-circulo {
  align-self: center;
  margin-top: 0;
}

.ferias-marcacao-info {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.ferias-marcacao-datas {
  color: var(--app-text);
  font-size: 0.82rem;
  font-weight: 700;
}

.ferias-marcacao-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 0.3rem;
}

.ferias-icone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #d7e1ec;
  border-radius: 6px;
  background: #ffffff;
  color: #5e6f82;
  cursor: pointer;
}

.ferias-icone-btn:hover {
  background: #f4f8fc;
  color: #0d2670;
}

.ferias-icone-btn svg {
  width: 16px;
  height: 16px;
}

.ferias-icone-btn--danger {
  color: #e33434;
}

.ferias-icone-btn--danger:hover {
  background: #fdecec;
  color: #e33434;
}

.ferias-marcacao-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  margin-top: 0.1rem;
}

.ferias-marcacao-dias {
  color: var(--app-text-muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.ferias-marcacao-motivo {
  color: #c22727;
  font-size: 0.74rem;
}

.ferias-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.ferias-status--confirmado {
  background: #e9f7ef;
  color: #087a4c;
}

.ferias-status--aguardando {
  background: #fff4df;
  color: #b57600;
}

.ferias-status--recusada {
  background: #fdecec;
  color: #e33434;
}

.ferias-btn-mini {
  border: 1px solid var(--app-border);
  border-radius: 4px;
  background: var(--app-surface);
  color: var(--app-text);
  padding: 0.1rem 0.45rem;
  font-size: 0.7rem;
  cursor: pointer;
}

.ferias-btn-mini:hover {
  background: var(--surface-2);
}

.ferias-btn-mini--danger {
  border-color: #f0c9c9;
  color: #c22727;
}


/* Férias fechadas */

.ferias-lista--fechadas {
  display: grid;
  gap: 0.3rem;
}

.ferias-fechada {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.05rem;
  border-top: 1px solid #eef1f5;
}

.ferias-fechada:first-child {
  border-top: 0;
}

.ferias-fechada-ordem {
  color: var(--app-text-muted);
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
}

.ferias-fechada-periodo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.ferias-fechada-datas {
  overflow: hidden;
  color: var(--app-text);
  font-size: 0.78rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ferias-fechada-dias {
  color: var(--app-text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.ferias-fechadas-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.05rem 0.1rem;
  border-top: 1px solid var(--app-border);
  color: var(--app-text-muted);
  font-size: 0.76rem;
}

.ferias-fechadas-total strong {
  color: var(--app-navy);
  font-size: 0.86rem;
}

@media (max-width: 560px) {
  .ferias-marcacao-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ferias-marcacao-acoes {
    grid-column: 2;
  }
}

.ferias-minhas-banner {
  overflow: hidden;
  border-radius: 7px;
  box-shadow: 0 1px 3px rgba(23, 35, 49, 0.06);
}

.ferias-minhas-banner-img {
  display: block;
  width: 100%;
  height: auto;
}

.ferias-fechadas-vazio {
  display: grid;
  gap: 0.2rem;
  margin-top: 0.25rem;
  padding: 0.7rem 0.75rem;
  border: 1px dashed var(--app-border);
  border-radius: var(--app-radius-sm);
  background: var(--surface-2);
  color: var(--app-text-muted);
  font-size: 0.76rem;
}

.ferias-fechadas-vazio strong {
  color: var(--app-text);
  font-size: 0.82rem;
}

@media (max-width: 560px) {
  .ferias-form-campos {
    grid-template-columns: minmax(0, 1fr);
  }

  .ferias-form-acoes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Ajustes finais do painel (07B.6) */

.ferias-secao > h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ferias-secao-titulo-resumo {
  display: block;
}

.ferias-titulo-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.ferias-titulo-icone svg {
  width: 16px;
  height: 16px;
}

.ferias-titulo-icone--azul {
  background: #e3f0ff;
  color: #0f67d8;
}

.ferias-titulo-icone--navy {
  background: #dde4f2;
  color: #0d2670;
}

.ferias-titulo-icone--verde {
  background: #e9f7ef;
  color: #118a4e;
}

.ferias-rodada-circulo--md {
  width: 32px;
  height: 32px;
  font-size: 0.95rem;
}

.ferias-form-acoes .btn {
  min-height: 40px;
  font-size: 14px;
  font-weight: 600;
}

.ferias-btn-mais {
  font-size: 15px;
  font-weight: 800;
}

.ferias-btn-reset {
  font-size: 14px;
  line-height: 1;
}

.ferias-marcacao-info {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.ferias-marcacao-motivo {
  margin-top: 0.1rem;
  color: #e33434;
  font-size: 0.72rem;
}

.ferias-ico {
  display: block;
  width: 18px;
  height: 18px;
}

.ferias-btn-mais,
.ferias-btn-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ferias-card--controle {
  gap: 0.25rem;
  padding-top: 0.6rem;
}

.ferias-ctx-select {
  width: 100%;
  min-height: 34px;
  border: 1px solid #d7e1ec;
  border-radius: 6px;
  background: #ffffff;
  color: #0d2670;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0 0.4rem;
}










/* ============================================================
   Consolidação (rota) — visual do mockup definitivo
   ============================================================ */

.ferias-cons {
  display: grid;
  gap: 0.9rem;
}

.ferias-cons-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.9rem;
}

.ferias-cons-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: #ffffff;
  box-shadow: var(--app-shadow-sm);
}

.ferias-cons-card > div {
  min-width: 0;
}

.ferias-cons-card-label {
  display: block;
  color: var(--app-text-muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ferias-cons-card-valor {
  display: block;
  margin-top: 0.1rem;
  color: var(--app-navy);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

.ferias-cons-card-valor small {
  color: var(--app-text-muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.ferias-cons-card-icone,
.ferias-cons-icone-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.ferias-cons-card--azul .ferias-cons-card-icone,
.ferias-cons-icone-box--azul {
  background: #e3f0ff;
  color: #0f67d8;
}

.ferias-cons-card--verde .ferias-cons-card-icone {
  background: #e9f7ef;
  color: #118a4e;
}

.ferias-cons-card--ambar .ferias-cons-card-icone {
  background: #fff4df;
  color: #e79514;
}

.ferias-cons-ico {
  display: block;
  width: 17px;
  height: 17px;
}

.ferias-cons-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 0.9rem;
  align-items: start;
  margin-top: 0.9rem;
}

.ferias-cons-resultado,
.ferias-cons-situacao {
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  background: #ffffff;
  box-shadow: var(--app-shadow-sm);
}

.ferias-cons-resultado-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.ferias-cons-resultado h2,
.ferias-cons-situacao h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--app-navy);
  font-size: 1rem;
  font-weight: 750;
}

.ferias-cons-busca {
  width: 210px;
  max-width: 100%;
  min-height: 34px;
  padding: 0.3rem 0.6rem;
  border: 1px solid #d7e1ec;
  border-radius: 6px;
  background: #ffffff;
  color: var(--app-text);
  font-size: 0.8rem;
}

.ferias-cons-busca::placeholder {
  color: var(--app-text-muted);
}

.ferias-cons-tabela {
  overflow-x: auto;
}

.ferias-cons-tabela table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.ferias-cons-tabela th,
.ferias-cons-tabela td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid #e7edf3;
  text-align: left;
  vertical-align: middle;
}

.ferias-cons-tabela thead th {
  background: #fbfcfe;
  color: var(--app-navy);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ferias-cons-ordem {
  width: 34px;
  color: var(--app-text-muted);
  font-weight: 700;
}

.ferias-cons-servidor {
  font-weight: 700;
}

.ferias-cons-periodos {
  min-width: 180px;
}

.ferias-cons-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.1rem 0.3rem 0.1rem 0;
  padding: 0.12rem 0.3rem 0.12rem 0.55rem;
  border: 1px solid #dbe3ec;
  border-radius: 999px;
  background: #ffffff;
  color: var(--app-text);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.ferias-cons-rodada {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 800;
}

.ferias-cons-rodada--r1 {
  background: #118238;
}

.ferias-cons-rodada--r2 {
  background: #e11717;
}

.ferias-cons-rodada--r3 {
  background: #1f6eea;
}

.ferias-cons-situacao {
  display: grid;
  gap: 0.7rem;
}

.ferias-cons-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 30px;
  padding: 0.1rem 0.7rem;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.ferias-cons-badge .ferias-cons-ico {
  width: 15px;
  height: 15px;
}

.ferias-cons-badge--ok {
  background: #e9f7ef;
  color: #087a4c;
}

.ferias-cons-badge--aguardando {
  background: #fff4df;
  color: #b57600;
}

.ferias-cons-badge--andamento {
  background: #fff4df;
  color: #b57600;
}

.ferias-cons-dias {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  white-space: nowrap;
}

.ferias-cons-dias.ferias-cons-total--ok {
  color: #087a4c;
}

.ferias-cons-dias.ferias-cons-total--atencao {
  color: #b57600;
}

.ferias-cons-dias.ferias-cons-total--acima {
  color: #e33434;
}

.ferias-cons-texto {
  margin: 0;
  color: var(--app-text-muted);
  font-size: 0.82rem;
}

.ferias-cons-periodo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid #cfdff2;
  border-radius: var(--app-radius-sm);
  background: #eef5fc;
}

.ferias-cons-periodo > div {
  min-width: 0;
}

.ferias-cons-periodo-label {
  display: block;
  color: var(--app-text-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ferias-cons-periodo strong {
  display: block;
  margin-top: 0.1rem;
  color: var(--app-text);
  font-size: 0.84rem;
  font-weight: 700;
}

.ferias-cons-fechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 40px;
  border: 1px solid #0f67d8;
  border-radius: 6px;
  background: #0f67d8;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.ferias-cons-aviso {
  margin: 0;
  color: var(--app-text-muted);
  font-size: 0.76rem;
}

@media (max-width: 1300px) {
  .ferias-cons-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .ferias-cons-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ferias-cons-situacao {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .ferias-cons-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .ferias-cons-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .ferias-cons-resultado-topo {
    align-items: flex-start;
  }
}

/* Consolidação — hierarquia vertical e chips percentuais dos cards */

.ferias-cons-card--coluna {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.15rem;
}

.ferias-cons-card--coluna .ferias-cons-card-valor {
  font-size: 1.5rem;
}

.ferias-cons-card-valor-linha {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 0.1rem;
}

.ferias-cons-card-valor-linha .ferias-cons-card-valor {
  display: inline-block;
  margin-top: 0;
}

.ferias-cons-percent {
  display: inline-flex;
  align-items: center;
  padding: 0.06rem 0.5rem;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.ferias-cons-percent--verde {
  border-color: #bfe7cd;
  background: #e9f7ef;
  color: #087a4c;
}

.ferias-cons-percent--ambar {
  border-color: #f4d39a;
  background: #fff4df;
  color: #b57600;
}

/* ============================================================
   Gestão das Marcações (abas) + Configuração
   ============================================================ */

.ferias-gestao {
  display: grid;
  gap: 0.8rem;
}

.ferias-gestao-tabs {
  display: inline-flex;
  gap: 0.4rem;
  padding: 0.25rem;
  border: 1px solid #d7e1ec;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(23, 35, 49, 0.06);
}

.ferias-gestao-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 34px;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #0d2670;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.ferias-gestao-tab .ferias-gestao-ico {
  width: 16px;
  height: 16px;
}

.ferias-gestao-tab.is-active {
  background: #0f67d8;
  color: #ffffff;
}

.ferias-gestao-painel {
  min-width: 0;
}

.ferias-gestao-ico {
  display: block;
  width: 17px;
  height: 17px;
}

.ferias-config-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}

.ferias-config-card {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: #ffffff;
  box-shadow: var(--app-shadow-sm);
}

.ferias-config-card > span {
  display: block;
  color: var(--app-text-muted);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ferias-config-card > strong {
  display: block;
  margin-top: 0.2rem;
  color: var(--app-navy);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.15;
}

.ferias-config-card--periodo > small {
  display: block;
  margin-top: 0.1rem;
  color: var(--app-text-muted);
  font-size: 0.72rem;
}

.ferias-config-status-ok {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #087a4c !important;
  font-size: 1rem !important;
}

.ferias-config-ponto {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #118238;
}

.ferias-config-secao {
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  background: #ffffff;
  box-shadow: var(--app-shadow-sm);
}

.ferias-config-secao h3 {
  margin: 0 0 0.15rem;
  color: var(--app-navy);
  font-size: 0.9rem;
  font-weight: 800;
}

.ferias-config-aux {
  margin: 0 0 0.6rem;
  color: var(--app-text-muted);
  font-size: 0.8rem;
}

.ferias-config-linha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  max-width: 560px;
}

.ferias-config-campo {
  display: grid;
  gap: 0.2rem;
}

.ferias-config-campo label {
  color: var(--app-text-muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.ferias-config-campo input,
.ferias-config-regra input {
  min-height: 38px;
  padding: 0.35rem 0.55rem;
  border: 1px solid #d7e1ec;
  border-radius: 6px;
  background: #ffffff;
  color: var(--app-text);
  font-size: 0.85rem;
  font-weight: 700;
}

.ferias-config-msg {
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid #bfe7cd;
  border-radius: var(--app-radius-sm);
  background: #eefaf3;
  color: #087a4c;
  font-size: 0.8rem;
  font-weight: 600;
}

.ferias-config-tabela {
  overflow-x: auto;
}

.ferias-config-tabela table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.ferias-config-tabela th,
.ferias-config-tabela td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid #e7edf3;
  text-align: left;
}

.ferias-config-tabela thead th {
  background: #fbfcfe;
  color: var(--app-navy);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ferias-config-rodada-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
}

.ferias-config-rodada {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 800;
}

.ferias-config-rodada--r1 {
  background: #118238;
}

.ferias-config-rodada--r2 {
  background: #e11717;
}

.ferias-config-rodada--r3 {
  background: #1f6eea;
}

.ferias-config-status {
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
}

.ferias-config-status--1,
.ferias-config-status--3 {
  background: #eef7f1;
  color: #0d6b3f;
}

.ferias-config-status--2 {
  background: #fff4df;
  color: #b57600;
}

.ferias-config-acao {
  border: 1px solid #d7e1ec;
  border-radius: 6px;
  background: #ffffff;
  color: #0d2670;
  padding: 0.25rem 0.7rem;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}

.ferias-config-info {
  margin: 0.7rem 0 0;
  color: var(--app-text-muted);
  font-size: 0.78rem;
}

.ferias-config-regras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}

.ferias-config-regra {
  display: grid;
  align-content: start;
  gap: 0.25rem;
  padding: 0.7rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: var(--surface-2);
}

.ferias-config-regra-nome {
  color: var(--app-text);
  font-size: 0.82rem;
  font-weight: 700;
}

.ferias-config-regra > strong {
  color: var(--app-navy);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
}

.ferias-config-regra small {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--app-text-muted);
  font-size: 0.7rem;
}

.ferias-config-regra small .ferias-gestao-ico {
  width: 13px;
  height: 13px;
}

.ferias-config-regra--config {
  border-color: #cfdff2;
  background: #eef5fc;
}

.ferias-config-regra--config label {
  display: grid;
  gap: 0.15rem;
  color: var(--app-text-muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.ferias-config-regra--config input {
  width: 90px;
}

.ferias-config-acoes {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.7rem;
}

.ferias-config-salvar {
  min-height: 40px;
  padding: 0.4rem 1.3rem;
  border: 1px solid #0f67d8;
  border-radius: 6px;
  background: #0f67d8;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.ferias-config-historico {
  display: grid;
  gap: 0.3rem;
  margin: 0 0 0.6rem;
  padding: 0;
  list-style: none;
}

.ferias-config-historico li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  align-items: center;
  padding: 0.35rem 0.05rem;
  border-top: 1px solid #eef1f5;
  color: var(--app-text);
  font-size: 0.8rem;
}

.ferias-config-historico li:first-child {
  border-top: 0;
}

.ferias-config-hist-data {
  color: var(--app-text-muted);
  font-variant-numeric: tabular-nums;
}

.ferias-config-historico li strong {
  margin-left: auto;
  color: var(--app-text-muted);
  font-size: 0.72rem;
}

.ferias-config-ver-historico {
  border: 1px solid #d7e1ec;
  border-radius: 6px;
  background: #ffffff;
  color: #0d2670;
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.ferias-config-cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.ferias-config-nova {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  border: 1px solid #0d2670;
  border-radius: 6px;
  background: #0d2670;
  color: #ffffff;
  padding: 0.5rem 0.95rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.ferias-config-colunas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.ferias-config-col {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.ferias-config-card--seletor {
  position: relative;
  cursor: pointer;
  padding-right: 1.6rem;
}

.ferias-config-card--seletor::after {
  content: ">";
  position: absolute;
  top: 0.45rem;
  right: 0.7rem;
  color: #0d2670;
  font-size: 0.8rem;
  font-weight: 700;
}

.ferias-config-lista {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 6;
  min-width: 130px;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  border: 1px solid #d7e1ec;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(13, 38, 112, 0.12);
}

.ferias-config-lista li {
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  color: #1d2b44;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.ferias-config-lista li:hover {
  background: #eef3fb;
}

.ferias-config-popover {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 120;
  width: min(580px, calc(100vw - 1.5rem));
  max-height: min(90vh, 720px);
  overflow: auto;
  border: 1px solid #d7e1ec;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(8, 25, 70, 0.28);
  padding: 1.1rem 1.2rem;
}

.ferias-config-popover[hidden] {
  display: none;
}

.ferias-config-popover-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.ferias-config-popover-topo h2 {
  margin: 0;
  color: #0d2670;
  font-size: 1rem;
}

.ferias-config-popover-x {
  border: 0;
  background: transparent;
  color: #1d2b44;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.ferias-config-popover-campo {
  display: grid;
  gap: 0.3rem;
  margin: 0.8rem 0;
  color: #1d2b44;
  font-weight: 700;
  font-size: 0.82rem;
}

.ferias-config-popover-campo input,
.ferias-config-popover-plantao {
  border: 1px solid #c7d4e4;
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  font: inherit;
  background: #ffffff;
}

.ferias-config-popover-obs {
  color: var(--app-text-muted);
  font-size: 0.72rem;
  font-weight: 400;
}

.ferias-config-popover-aviso {
  margin: 0 0 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  background: #fdf0ef;
  border: 1px solid #f2c3c0;
  color: #9b231f;
  font-size: 0.8rem;
  font-weight: 600;
}

.ferias-config-criacao {
  display: grid;
  gap: 0.45rem;
  margin: 0.9rem 0;
  padding: 0.8rem;
  border: 1px solid #e2e9f3;
  border-radius: 8px;
  background: #f8fafc;
}

.ferias-config-criacao-titulo {
  color: #0d2670;
  font-weight: 700;
  font-size: 0.82rem;
}

.ferias-config-criacao-rodada {
  display: grid;
  grid-template-columns: auto auto 1fr 1fr;
  align-items: center;
  gap: 0.5rem;
}

.ferias-config-criacao-nome {
  font-size: 0.8rem;
  font-weight: 700;
  color: #1d2b44;
}

.ferias-config-criacao-rodada label {
  display: grid;
  gap: 0.15rem;
  color: #5a6b84;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}

.ferias-config-criacao-rodada input {
  border: 1px solid #c7d4e4;
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  font: inherit;
  font-size: 0.8rem;
  background: #ffffff;
}

.ferias-config-popover-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.ferias-config-cancelar {
  border: 1px solid #d7e1ec;
  border-radius: 6px;
  background: #ffffff;
  color: #0d2670;
  padding: 0.45rem 0.95rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.ferias-config-criar {
  border: 1px solid #0d2670;
  border-radius: 6px;
  background: #0d2670;
  color: #ffffff;
  padding: 0.45rem 0.95rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.ferias-over {
  display: grid;
  gap: 1rem;
}
.ferias-over-cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.ferias-over-cabeca h2 {
  margin: 0;
  color: var(--app-navy);
  font-size: 1.15rem;
}

.ferias-over-cabeca p {
  margin: 0.25rem 0 0;
  color: var(--app-text-muted);
  font-size: 0.82rem;
}

.ferias-over-contexto {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ferias-over-chip {
  border: 1px solid #d7e1ec;
  border-radius: 6px;
  background: #ffffff;
  color: #1d2b44;
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
  white-space: nowrap;
}

.ferias-over-chip strong {
  color: var(--app-navy);
}

.ferias-over-fases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.ferias-over-fase {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  min-width: 0;
  padding: 0.6rem;
  border: 1px solid #e2e9f3;
  border-radius: 8px;
  background: #ffffff;
}

.ferias-over-fase.is-atual {
  border-color: #0f67d8;
  background: #f0f6ff;
}

.ferias-over-fase.is-encerrada {
  background: #f7faf5;
}

.ferias-over-fase-num {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e3eaf5;
  color: #5a6b84;
  font-size: 0.72rem;
  font-weight: 800;
  flex: none;
}

.ferias-over-fase.is-atual .ferias-over-fase-num {
  background: #0f67d8;
  color: #ffffff;
}

.ferias-over-fase strong {
  display: block;
  color: #1d2b44;
  font-size: 0.78rem;
}

.ferias-over-fase small {
  display: block;
  margin-top: 0.15rem;
  color: var(--app-text-muted);
  font-size: 0.68rem;
  line-height: 1.3;
}

.ferias-over-rodada {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid #d7e1ec;
  border-radius: 8px;
  background: #ffffff;
}

.ferias-over-rodada-bola {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 800;
  flex: none;
}

.ferias-over-rodada-bola--1 { background: #188a42; }
.ferias-over-rodada-bola--2 { background: #cf3a35; }
.ferias-over-rodada-bola--3 { background: #2563eb; }

.ferias-over-rodada-info strong {
  display: block;
  color: var(--app-navy);
  font-size: 0.85rem;
}

.ferias-over-rodada-info small {
  color: var(--app-text-muted);
  font-size: 0.7rem;
}

.ferias-over-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 1rem;
  align-items: start;
}

.ferias-over-principal {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
}

.ferias-over-subtabs {
  display: inline-flex;
  gap: 0.3rem;
}

.ferias-over-subtab {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #5a6b84;
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.ferias-over-subtab.is-active {
  border-bottom-color: #0f67d8;
  color: #0d2670;
}

.ferias-over-toolbar {
  display: grid;
  gap: 0.6rem;
}

.ferias-over-aviso {
  margin: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid #d7e1ec;
  border-left: 3px solid #0f67d8;
  border-radius: 6px;
  background: #ffffff;
  color: #1d2b44;
  font-size: 0.78rem;
  line-height: 1.5;
}

.ferias-over-busca {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #5a6b84;
  font-size: 0.72rem;
  font-weight: 700;
}

.ferias-over-busca input {
  border: 1px solid #c7d4e4;
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  font: inherit;
  background: #ffffff;
}

.ferias-over-tabela,
.ferias-over-detalhe-tabela {
  border: 1px solid #e2e9f3;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.ferias-over-tabela table,
.ferias-over-detalhe-tabela table {
  width: 100%;
  border-collapse: collapse;
}

.ferias-over-tabela th,
.ferias-over-tabela td,
.ferias-over-detalhe-tabela th,
.ferias-over-detalhe-tabela td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid #edf1f6;
  text-align: left;
  vertical-align: middle;
}

.ferias-over-tabela thead th,
.ferias-over-detalhe-tabela thead th {
  background: #f6f8fb;
  color: #5a6b84;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ferias-over-tabela tbody tr {
  cursor: pointer;
}

.ferias-over-tabela tbody tr:hover {
  background: #f7faff;
}

.ferias-over-tabela .ferias-over-data {
  font-weight: 700;
  color: #0d2670;
  white-space: nowrap;
}

.ferias-over-total {
  display: inline-block;
  border-radius: 999px;
  background: #fdf1e4;
  color: #a4520a;
  font-weight: 800;
  font-size: 0.78rem;
  padding: 0.2rem 0.6rem;
}

.ferias-over-servidores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.ferias-over-servidor {
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.ferias-over-servidor--mantido {
  background: #e7f5ec;
  color: #14693a;
}

.ferias-over-servidor--recusado {
  background: #fdeaea;
  color: #b02a25;
}

.ferias-over-ver {
  border: 1px solid #d7e1ec;
  border-radius: 6px;
  background: #ffffff;
  color: #0d2670;
  padding: 0.25rem 0.6rem;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}
.ferias-over-detalhe {
  border: 1px solid #d7e1ec;
  border-radius: 8px;
  background: #ffffff;
}

.ferias-over-detalhe-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #eef2f7;
}

.ferias-over-detalhe-topo strong {
  color: var(--app-navy);
}

.ferias-over-detalhe-topo span {
  display: block;
  color: var(--app-text-muted);
  font-size: 0.72rem;
  margin-top: 0.15rem;
}

.ferias-over-recolher {
  border: 0;
  background: transparent;
  color: #0d2670;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}

.ferias-over-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 800;
}

.ferias-over-badge--ok {
  background: #e7f5ec;
  color: #14693a;
}

.ferias-over-badge--recusado {
  background: #fdeaea;
  color: #b02a25;
}

.ferias-over-servidor-nome strong {
  color: #0d2670;
}

.ferias-over-detalhe-acao {
  color: var(--app-text-muted);
}

.ferias-over-excecao {
  display: grid;
  gap: 0.5rem;
  padding: 0.8rem;
  border: 1px solid #e2e9f3;
  border-radius: 8px;
  background: #ffffff;
}

.ferias-over-excecao h3 {
  margin: 0;
  color: var(--app-navy);
  font-size: 0.88rem;
}

.ferias-over-excecao textarea {
  border: 1px solid #c7d4e4;
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-size: 0.8rem;
  resize: vertical;
}

.ferias-over-nota {
  margin: 0;
  color: var(--app-text-muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

.ferias-over-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ferias-over-btn {
  border: 1px solid #0d2670;
  border-radius: 6px;
  background: #0d2670;
  color: #ffffff;
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.ferias-over-btn--ghost {
  background: #ffffff;
  color: #0d2670;
}

.ferias-over-btn--confirmar {
  border-color: #188a42;
  background: #188a42;
}

.ferias-over-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.ferias-over-lateral {
  display: grid;
  gap: 0.9rem;
}

.ferias-over-card {
  display: grid;
  gap: 0.6rem;
  padding: 0.8rem;
  border: 1px solid #e2e9f3;
  border-radius: 8px;
  background: #ffffff;
}

.ferias-over-card h3 {
  margin: 0;
  color: var(--app-navy);
  font-size: 0.9rem;
}

.ferias-over-resumo,
.ferias-over-regras {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

.ferias-over-resumo div,
.ferias-over-regras div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px dashed #edf1f6;
}

.ferias-over-resumo div:last-child,
.ferias-over-regras div:last-child {
  border-bottom: 0;
}

.ferias-over-resumo dt,
.ferias-over-regras dt {
  color: #1d2b44;
  font-size: 0.76rem;
  font-weight: 600;
}

.ferias-over-resumo dd,
.ferias-over-regras dd {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 800;
}

.ferias-over-valor--alerta { color: #b8860b; }
.ferias-over-valor--ok { color: #188a42; }
.ferias-over-valor--recusado { color: #b02a25; }
.ferias-over-valor--neutro { color: #5a6b84; }

.ferias-over-card p {
  margin: 0;
  color: var(--app-text-muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

.ferias-over-nota--dised {
  margin-top: 0.2rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  background: #fdf6ea;
  color: #8a5a12;
}

.ferias-over-resumo-placeholder {
  padding: 1.2rem;
  border: 1px dashed #d7e1ec;
  border-radius: 8px;
  background: #ffffff;
}

.ferias-over-resumo-placeholder h3 {
  margin: 0 0 0.3rem;
  color: var(--app-navy);
}

.ferias-over-resumo-placeholder p {
  margin: 0 0 0.8rem;
  color: var(--app-text-muted);
  font-size: 0.8rem;
}

.ferias-over-resumo-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ferias-over-resumo-mini span {
  border: 1px solid #e2e9f3;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  color: #1d2b44;
  font-size: 0.74rem;
}

.ferias-over-resumo-mini strong {
  color: var(--app-navy);
  margin-right: 0.25rem;
}

.ferias-over-sem-resultado {
  margin: 0;
  padding: 0.7rem;
  text-align: center;
  color: var(--app-text-muted);
  font-size: 0.8rem;
}

@media (max-width: 1100px) {
  .ferias-over-layout {
    grid-template-columns: minmax(0, 1fr);
  }

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

@media (max-width: 900px) {
  .ferias-over-linha {
    grid-template-columns: minmax(0, 1fr);
  }

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

@media (max-width: 700px) {
  .ferias-over-fases,
  .ferias-over-lateral {
    grid-template-columns: minmax(0, 1fr);
  }

  .ferias-over-tabela {
    overflow-x: auto;
  }
}

@media (max-width: 1300px) {
  .ferias-config-cards,
  .ferias-config-regras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .ferias-config-cards,
  .ferias-config-regras,
  .ferias-config-linha {
    grid-template-columns: minmax(0, 1fr);
  }

  .ferias-gestao-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .ferias-config-colunas {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Ajustes visuais do Overbook (fechamento) */
.ferias-gestao-tabs {
  padding: 0.35rem;
  gap: 0.55rem;
}

.ferias-gestao-tab {
  min-height: 42px;
  padding: 0 1.1rem;
  gap: 0.55rem;
  font-size: 0.82rem;
}

.ferias-gestao-tab .ferias-gestao-ico {
  width: 18px;
  height: 18px;
}

.ferias-over-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: default;
}

.ferias-over-chip[draggable="true"] {
  cursor: grab;
}

.ferias-over-chip[draggable="true"]:hover {
  box-shadow: 0 2px 6px rgba(13, 38, 112, 0.18);
}

.ferias-over-chip--marcado {
  background: #e7f5ec;
  border: 1px solid #bfe7cd;
  color: #14693a;
}

.ferias-over-chip--recusado {
  background: #fdeaea;
  border: 1px solid #f2c3c0;
  color: #b02a25;
}

.ferias-over-vazio {
  color: #97a4b6;
  font-size: 0.8rem;
}

.ferias-over-linha {
  cursor: pointer;
}

.ferias-over-linha:hover,
.ferias-over-linha:focus-visible {
  background: #f2f7ff;
  outline: none;
}

.ferias-over-linha--alerta .ferias-over-total {
  background: #fdeaea;
  color: #b02a25;
}

.ferias-over-linha--ok .ferias-over-total {
  background: #e7f5ec;
  color: #14693a;
}

.ferias-over-cel-servidores,
.ferias-over-cel-recusados {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.ferias-over-cel-excecao {
  text-align: center;
}

.ferias-over-exc-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #c9d8ea;
  border-radius: 6px;
  background: #ffffff;
  color: #0d2670;
  cursor: pointer;
}

.ferias-over-exc-botao .ferias-gestao-ico {
  width: 15px;
  height: 15px;
}

.ferias-over-exc-botao--vazio {
  opacity: 0.35;
  cursor: default;
}

.ferias-over-exc-indicador {
  display: block;
  margin-top: 0.2rem;
  color: #1f6eea;
  font-size: 0.68rem;
  font-weight: 700;
}

.ferias-over-exc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  background: rgba(10, 28, 66, 0.42);
  padding: 1rem;
}

.ferias-over-exc-backdrop[hidden] {
  display: none;
}

.ferias-over-exc-pop {
  width: min(520px, 100%);
  display: grid;
  gap: 0.7rem;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(8, 25, 70, 0.28);
  padding: 1rem 1.1rem;
}

.ferias-over-exc-pop header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ferias-over-exc-pop h3 {
  margin: 0;
  color: #0d2670;
  font-size: 1rem;
}

.ferias-over-exc-x {
  border: 0;
  background: transparent;
  color: #1d2b44;
  font-weight: 800;
  cursor: pointer;
}

.ferias-over-exc-aux {
  margin: 0;
  color: #5a6b84;
  font-size: 0.8rem;
  line-height: 1.5;
}

.ferias-over-exc-pop textarea {
  border: 1px solid #c7d4e4;
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-size: 0.8rem;
  resize: vertical;
}

.ferias-over-exc-erro {
  margin: 0;
  border-radius: 6px;
  background: #fdeaea;
  color: #b02a25;
  padding: 0.4rem 0.55rem;
  font-size: 0.76rem;
  font-weight: 700;
}

.ferias-over-exc-pop footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

@media (max-width: 900px) {
  .ferias-over-lateral {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .ferias-over-lateral {
    grid-template-columns: minmax(0, 1fr);
  }

  .ferias-over-tabela {
    overflow-x: auto;
  }
}

/* Overbook — operação direta na tabela (sem painel filho) */
.ferias-over-chip {
  cursor: grab;
  user-select: none;
}

.ferias-over-chip.is-selecionado {
  box-shadow: 0 0 0 2px #0f67d8;
  background: #dbe9ff;
  border-color: #0f67d8;
}

td[data-over-drop] {
  min-height: 38px;
}

td[data-over-drop].is-drop-over {
  background: #eaf3ff;
  box-shadow: inset 0 0 0 2px #0f67d8;
  border-radius: 6px;
}

.ferias-over-linha--resolvida {
  opacity: 0.88;
}

.ferias-over-linha--resolvida .ferias-over-data,
.ferias-over-linha--resolvida .ferias-over-total {
  color: #14693a;
}

.ferias-over-resolvido {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-top: 0.25rem;
  color: #188a42;
  font-size: 0.68rem;
  font-weight: 800;
}

.ferias-over-resolvido .ferias-gestao-ico {
  width: 12px;
  height: 12px;
}

/* Configuração — regras e popover definitivo */
.ferias-config-regra-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.ferias-config-secao--regras .ferias-config-aux {
  margin-bottom: 0.45rem;
}

.ferias-config-regra-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  padding: 0.48rem 0.4rem;
  border: 1px solid #e2e9f3;
  border-radius: 8px;
  background: #ffffff;
  text-align: center;
}

.ferias-config-regra-card > span {
  color: #1d2b44;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.ferias-config-regra-card small {
  color: var(--app-text-muted);
  font-size: 0.66rem;
}

.ferias-config-regra-card strong {
  color: #0d2670;
  font-size: 1.6rem;
  line-height: 1;
  margin-top: 0.15rem;
}

.ferias-config-regra-card--editavel strong {
  padding-right: 1.2rem;
}

.ferias-config-limite-editar {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #0f67d8;
  cursor: pointer;
}

.ferias-config-limite-editar .ferias-gestao-ico {
  width: 14px;
  height: 14px;
}

.ferias-config-select {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  min-height: 34px;
  border: 1px solid #c7d4e4;
  border-radius: 6px;
  background: #ffffff;
  padding: 0.35rem 0.6rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1d2b44;
  cursor: pointer;
}

.ferias-config-select::after {
  content: ">";
  color: #0d2670;
  font-size: 0.75rem;
}

.ferias-config-select .ferias-config-lista {
  top: calc(100% + 4px);
}

.ferias-config-pop-fixo {
  color: #0d2670;
  font-size: 1rem;
}

.ferias-config-pop-rodadas {
  display: grid;
  gap: 0.7rem;
}

.ferias-config-pop-rodada {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0.7rem;
  border: 1px solid #e2e9f3;
  border-radius: 8px;
  background: #f8fafc;
}

.ferias-config-pop-rodada legend {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.35rem;
  color: #0d2670;
  font-size: 0.82rem;
  font-weight: 800;
}

.ferias-config-pop-rodada .ferias-config-rodada {
  width: 20px;
  height: 20px;
  font-size: 0.68rem;
}

.ferias-config-janela {
  display: grid;
  grid-template-columns: 130px 1fr 1fr 70px;
  gap: 0.45rem;
  align-items: center;
}

.ferias-config-janela-titulo {
  color: #1d2b44;
  font-size: 0.76rem;
  font-weight: 800;
}

.ferias-config-janela label {
  display: grid;
  gap: 0.15rem;
  color: #5a6b84;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
}

.ferias-config-janela input {
  border: 1px solid #c7d4e4;
  border-radius: 6px;
  background: #ffffff;
  font: inherit;
  font-size: 0.78rem;
  padding: 0.3rem 0.45rem;
}

.ferias-config-duracao {
  color: #5a6b84;
  font-size: 0.76rem;
  font-weight: 700;
}

.ferias-config-duracao.is-valido {
  color: #188a42;
}

.ferias-config-duracao.is-invalido {
  color: #b02a25;
}

.ferias-config-feedback-rodada {
  margin: 0;
  color: #b02a25;
  font-size: 0.76rem;
  font-weight: 700;
}

.ferias-config-feedback {
  margin: 0;
  border-radius: 6px;
  background: #e7f5ec;
  color: #14693a;
  padding: 0.4rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.ferias-config-limite-backdrop {
  position: fixed;
  inset: 0;
  z-index: 125;
  display: grid;
  place-items: center;
  background: rgba(10, 28, 66, 0.4);
  padding: 1rem;
}

.ferias-config-limite-backdrop[hidden] {
  display: none;
}

.ferias-config-limite-pop {
  display: grid;
  gap: 0.6rem;
  width: min(360px, 100%);
  padding: 1rem;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(8, 25, 70, 0.28);
}

.ferias-config-limite-pop h3 {
  margin: 0;
  color: #0d2670;
  font-size: 0.95rem;
}

.ferias-config-limite-pop label {
  display: grid;
  gap: 0.3rem;
  color: #1d2b44;
  font-size: 0.78rem;
  font-weight: 700;
}

.ferias-config-limite-pop input {
  border: 1px solid #c7d4e4;
  border-radius: 6px;
  padding: 0.4rem 0.55rem;
  font: inherit;
}

.ferias-config-limite-pop footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

@media (max-width: 700px) {
  .ferias-config-regra-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .ferias-config-janela {
    grid-template-columns: 1fr 1fr;
  }

  .ferias-config-janela-titulo {
    grid-column: 1 / -1;
  }
}

/* Usuários — rota administrativa (mockup definitivo) */
.usuarios-rota {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.usuarios-cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.usuarios-cabeca h1 {
  margin: 0;
  color: var(--app-navy);
  font-size: 1.2rem;
}

.usuarios-cabeca p {
  margin: 0.2rem 0 0;
  color: var(--app-text-muted);
  font-size: 0.82rem;
}

.usuarios-ico {
  width: 16px;
  height: 16px;
}

.usuarios-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.32rem 0.7rem;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.usuarios-btn--primary {
  background: #0d2670;
  border-color: #0d2670;
  color: #ffffff;
}

.usuarios-btn--ghost {
  background: #ffffff;
  border-color: #d7e1ec;
  color: #0d2670;
}

.usuarios-btn--perigo {
  background: #ffffff;
  border-color: #f0b9b6;
  color: #b02a25;
}

.usuarios-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.usuarios-toolbar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #ffffff;
}

.usuarios-filtros-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.usuarios-filtro-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid #d7e1ec;
  border-radius: 999px;
  background: #ffffff;
  color: #1d2b44;
  padding: 0.25rem 0.55rem 0.25rem 0.7rem;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}

.usuarios-filtro-status span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  border-radius: 999px;
  background: #eef3fb;
  color: #0d2670;
  font-size: 0.68rem;
}

.usuarios-filtro-status.is-active {
  background: #0f67d8;
  border-color: #0f67d8;
  color: #ffffff;
}

.usuarios-filtro-status.is-active span {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.usuarios-filtro-plantao,
.usuarios-busca {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #1d2b44;
  font-size: 0.74rem;
  font-weight: 700;
}

.usuarios-busca {
  margin-left: auto;
}

.usuarios-filtro-plantao select,
.usuarios-busca input {
  border: 1px solid #c7d4e4;
  border-radius: 6px;
  background: #ffffff;
  font: inherit;
  font-size: 0.78rem;
  padding: 0.32rem 0.5rem;
  color: #1d2b44;
}

.usuarios-tabela-regiao {
  display: grid;
  gap: 0.6rem;
}

.usuarios-tabela {
  border: 1px solid #e2e9f3;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
}

.usuarios-tabela table {
  width: 100%;
  border-collapse: collapse;
}

.usuarios-tabela th,
.usuarios-tabela td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid #edf1f6;
  text-align: left;
  vertical-align: middle;
}

.usuarios-tabela thead th {
  background: #f6f8fb;
  color: #5a6b84;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.usuarios-tabela tbody tr:hover {
  background: #f8faff;
}

.usuarios-cel-usuario {
  min-width: 190px;
}

.usuarios-usuario-alvo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.usuarios-usuario-alvo > span {
  display: grid;
  min-width: 0;
}

.usuarios-usuario-alvo strong {
  color: #0d2670;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.usuarios-usuario-alvo small {
  color: var(--app-text-muted);
  font-size: 0.7rem;
}

.usuarios-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  background: #0f67d8;
  color: #ffffff;
  font-weight: 800;
}

.usuarios-avatar--mini {
  width: 38px;
  height: 38px;
  font-size: 0.78rem;
}

.usuarios-avatar--grande {
  width: 68px;
  height: 68px;
  font-size: 1.2rem;
}

.usuarios-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.16rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 800;
}

.usuarios-badge--ativo { background: #e7f5ec; color: #14693a; }
.usuarios-badge--pendente { background: #fdf1e4; color: #a4520a; }
.usuarios-badge--inativo { background: #e9edf2; color: #5a6b84; }
.usuarios-badge--rejeitado { background: #fdeaea; color: #b02a25; }

.usuarios-row-acoes {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.usuarios-vazio {
  color: var(--app-text-muted);
  text-align: center;
  font-size: 0.82rem;
}
.usuarios-paginacao {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  color: #1d2b44;
  font-size: 0.78rem;
}

.usuarios-paginacao label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #5a6b84;
  font-weight: 700;
}

.usuarios-paginacao select {
  border: 1px solid #c7d4e4;
  border-radius: 6px;
  padding: 0.25rem 0.4rem;
  font: inherit;
  font-size: 0.76rem;
  background: #ffffff;
}

.usuarios-paginacao-controles {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

[data-usuarios-drawer-host] {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  width: min(460px, 100%);
  pointer-events: none;
}

[data-usuarios-drawer-host]:empty {
  display: none;
}

.usuarios-drawer {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  background: #ffffff;
  border-left: 1px solid #d7e1ec;
  box-shadow: -12px 0 32px rgba(8, 25, 70, 0.16);
  pointer-events: auto;
}

.usuarios-drawer-alca {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 22px;
  height: 46px;
  border: 1px solid #0d2670;
  border-radius: 6px 0 0 6px;
  background: #ffffff;
  color: #0d2670;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  z-index: 3;
}

.usuarios-drawer-alca:hover,
.usuarios-drawer-alca:focus-visible {
  background: #0f67d8;
  color: #ffffff;
  outline: none;
}

.usuarios-drawer-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #edf1f6;
}

.usuarios-drawer-topo h2 {
  margin: 0;
  color: #0d2670;
  font-size: 1rem;
}

.usuarios-drawer-fechar {
  border: 0;
  background: transparent;
  color: #1d2b44;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
}

.usuarios-drawer-scroll {
  overflow: auto;
  padding: 1rem;
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

.usuarios-drawer-perfil {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.usuarios-drawer-perfil > div {
  display: grid;
  gap: 0.2rem;
}

.usuarios-drawer-perfil strong {
  color: #0d2670;
  font-size: 1rem;
}

.usuarios-drawer-perfil span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.usuarios-drawer-perfil em {
  font-style: normal;
  color: #5a6b84;
  font-size: 0.78rem;
}

.usuarios-drawer-perfil small {
  color: var(--app-text-muted);
  font-size: 0.74rem;
}

.usuarios-drawer-tabs {
  display: inline-flex;
  gap: 0.3rem;
  border-bottom: 1px solid #edf1f6;
}

.usuarios-drawer-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #5a6b84;
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.usuarios-drawer-tab.is-active {
  border-bottom-color: #0f67d8;
  color: #0d2670;
}

.usuarios-drawer-painel {
  display: grid;
  gap: 0.8rem;
}

.usuarios-drawer-secao {
  display: grid;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid #e2e9f3;
  border-radius: 8px;
  background: #ffffff;
}

.usuarios-drawer-secao h3 {
  margin: 0;
  color: #0d2670;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.usuarios-drawer-definicoes {
  display: grid;
  gap: 0.3rem;
  margin: 0;
}

.usuarios-drawer-definicoes div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 0.5rem;
}

.usuarios-drawer-definicoes dt {
  color: #5a6b84;
  font-size: 0.74rem;
}

.usuarios-drawer-definicoes dd {
  margin: 0;
  color: #1d2b44;
  font-size: 0.78rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.usuarios-drawer-aviso {
  margin: 0;
  color: var(--app-text-muted);
  font-size: 0.8rem;
}

.usuarios-drawer-acoes {
  display: flex;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  border-top: 1px solid #edf1f6;
}

@media (max-width: 900px) {
  .usuarios-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .usuarios-busca {
    margin-left: 0;
    width: 100%;
  }

  .usuarios-busca input {
    flex: 1;
    min-width: 0;
  }
}

@media (max-width: 700px) {
  .usuarios-tabela {
    overflow-x: auto;
  }

  .usuarios-tabela table {
    min-width: 900px;
  }

  [data-usuarios-drawer-host] {
    width: 100%;
  }
}

/* Meus Dados — rota pessoal */
.meusdados {
  display: grid;
  gap: 1rem;
  max-width: 1080px;
}

.meusdados-cabeca h1 {
  margin: 0;
  color: var(--app-navy);
  font-size: 1.25rem;
}

.meusdados-cabeca p {
  margin: 0.2rem 0 0;
  color: var(--app-text-muted);
  font-size: 0.84rem;
}

.meusdados-identidade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  background: #ffffff;
  box-shadow: var(--app-shadow-sm);
}

.meusdados-identidade-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.meusdados-identidade-texto h2 {
  margin: 0;
  color: var(--app-navy);
  font-size: 1.1rem;
}

.meusdados-identidade-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.4rem 0;
}

.meusdados-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 800;
}

.meusdados-badge--papel { background: #e8eefb; color: #0d2670; }
.meusdados-badge--plantao { background: #eef3fb; color: #1d4e89; }
.meusdados-badge--ativo { background: #e7f5ec; color: #14693a; }
.meusdados-badge--pendente { background: #fdf1e4; color: #a4520a; }
.meusdados-badge--inativo { background: #e9edf2; color: #5a6b84; }
.meusdados-badge--rejeitado { background: #fdeaea; color: #b02a25; }

.meusdados-identidade-texto small {
  color: var(--app-text-muted);
  font-size: 0.8rem;
}

.meusdados-identidade-foto {
  display: grid;
  gap: 0.45rem;
  padding-left: 1rem;
  border-left: 1px solid #edf1f6;
}

.meusdados-identidade-foto h3 {
  margin: 0;
  color: #0d2670;
  font-size: 0.9rem;
}

.meusdados-identidade-foto p {
  margin: 0;
  color: var(--app-text-muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.meusdados-foto-acoes {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.meusdados-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.38rem 0.8rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.meusdados-btn--primary { background: #0d2670; border-color: #0d2670; color: #ffffff; }
.meusdados-btn--ghost { background: #ffffff; border-color: #d7e1ec; color: #0d2670; }
.meusdados-btn--perigo { background: #ffffff; border-color: #f0b9b6; color: #b02a25; }
.meusdados-btn:disabled { opacity: 0.5; cursor: default; }

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

.meusdados-card {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  background: #ffffff;
  box-shadow: var(--app-shadow-sm);
}

.meusdados-card h2 {
  margin: 0;
  color: var(--app-navy);
  font-size: 0.95rem;
}

.meusdados-card-sub,
.meusdados-card p {
  margin: 0;
  color: var(--app-text-muted);
  font-size: 0.78rem;
}

.meusdados-aviso {
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  background: #f6f8fb;
  color: #5a6b84;
  font-size: 0.74rem;
  line-height: 1.4;
}

.meusdados-aviso--azul {
  background: #eaf3ff;
  color: #1d4e89;
}

.meusdados-definicoes {
  display: grid;
  gap: 0.35rem;
  margin: 0;
}

.meusdados-definicoes div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 0.6rem;
  align-items: baseline;
}

.meusdados-definicoes dt {
  color: #5a6b84;
  font-size: 0.76rem;
}

.meusdados-definicoes dd {
  margin: 0;
  color: #172331;
  font-size: 0.82rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.meusdados-card form {
  display: grid;
  gap: 0.6rem;
}

.meusdados-campo {
  display: grid;
  gap: 0.25rem;
}

.meusdados-campo label {
  color: #1d2b44;
  font-size: 0.76rem;
  font-weight: 700;
}

.meusdados-campo input {
  border: 1px solid #c7d4e4;
  border-radius: 6px;
  background: #ffffff;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.42rem 0.55rem;
}

.meusdados-input-linha {
  position: relative;
  display: flex;
  align-items: center;
}

.meusdados-input-linha input {
  width: 100%;
}

.meusdados-campo--bloqueado input {
  background: #f2f5f9;
  color: #5a6b84;
}

.meusdados-cadeado {
  position: absolute;
  right: 0.55rem;
  font-size: 0.8rem;
  color: #5a6b84;
}

@media (max-width: 900px) {
  .meusdados-identidade {
    grid-template-columns: minmax(0, 1fr);
  }

  .meusdados-identidade-foto {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 700px) {
  .meusdados-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .meusdados-definicoes div {
    grid-template-columns: 120px minmax(0, 1fr);
  }
}

/* Papéis e privilégios */
.papeis {
  display: grid;
  gap: 1rem;
}

.papeis-cabeca h1 {
  margin: 0;
  color: var(--app-navy);
  font-size: 1.2rem;
}

.papeis-cabeca p {
  margin: 0.2rem 0 0;
  color: var(--app-text-muted);
  font-size: 0.82rem;
}

.papeis-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.papeis-card {
  display: grid;
  align-content: start;
  gap: 0.12rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  background: #ffffff;
  box-shadow: var(--app-shadow-sm);
}

.papeis-card-icone {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  margin-bottom: 0;
}

.papeis-card-icone--servidor { background: #e7f5ec; color: #188a42; }
.papeis-card-icone--gestor { background: #fdf1e4; color: #a4520a; }
.papeis-card-icone--admin { background: #e8eefb; color: #0d2670; }

.papeis-ico {
  width: 18px;
  height: 18px;
}

.papeis-card h2 {
  margin: 0;
  color: #0d2670;
  font-size: 0.95rem;
}

.papeis-card small {
  color: var(--app-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.papeis-card p {
  margin: 0.2rem 0 0;
  color: #1d2b44;
  font-size: 0.76rem;
  line-height: 1.35;
}

.papeis-card .papeis-badge {
  margin-top: 0.15rem;
}

.papeis-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 0.16rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 800;
}

.papeis-badge--escopo { background: #eef3fb; color: #1d4e89; }
.papeis-badge--ativo { background: #e7f5ec; color: #14693a; }
.papeis-badge--sem { background: #e9edf2; color: #5a6b84; }

.papeis-matriz,
.papeis-gestores {
  display: grid;
  gap: 0.6rem;
  padding: 1rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  background: #ffffff;
  box-shadow: var(--app-shadow-sm);
}

.papeis-matriz h2,
.papeis-gestores h2 {
  margin: 0;
  color: var(--app-navy);
  font-size: 0.95rem;
}

.papeis-matriz > p,
.papeis-gestores-topo p {
  margin: 0;
  color: var(--app-text-muted);
  font-size: 0.8rem;
}

.papeis-matriz-aviso {
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  background: #eaf3ff;
  color: #1d4e89;
  font-size: 0.76rem !important;
  line-height: 1.4;
}

.papeis-matriz-tabela,
.papeis-gestores-tabela {
  overflow-x: auto;
  border: 1px solid #e2e9f3;
  border-radius: 8px;
}

.papeis-matriz-tabela table,
.papeis-gestores-tabela table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.papeis-matriz-tabela th,
.papeis-matriz-tabela td,
.papeis-gestores-tabela th,
.papeis-gestores-tabela td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid #edf1f6;
  text-align: left;
}

.papeis-matriz-tabela thead th,
.papeis-gestores-tabela thead th {
  background: #f6f8fb;
  color: #5a6b84;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.papeis-check {
  color: #188a42;
  font-weight: 900;
}

.papeis-sem {
  color: #b6c0cc;
}

.papeis-escopo {
  color: #1d4e89;
  font-size: 0.76rem;
  font-weight: 700;
}

.papeis-gestores-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.papeis-btn {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.34rem 0.75rem;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.papeis-btn--primary { background: #0d2670; border-color: #0d2670; color: #ffffff; }
.papeis-btn--ghost { background: #ffffff; border-color: #d7e1ec; color: #0d2670; }
.papeis-btn--perigo { background: #ffffff; border-color: #f0b9b6; color: #b02a25; }

.papeis-acoes {
  display: flex;
  gap: 0.35rem;
}

.papeis-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 0.6rem;
  align-items: end;
  padding: 0.7rem;
  border: 1px solid #e2e9f3;
  border-radius: 8px;
  background: #f8fafc;
}

.papeis-form-campo {
  display: grid;
  gap: 0.25rem;
}

.papeis-form-campo label {
  color: #1d2b44;
  font-size: 0.72rem;
  font-weight: 700;
}

.papeis-form-campo select,
.papeis-form-campo input {
  border: 1px solid #c7d4e4;
  border-radius: 6px;
  background: #ffffff;
  font: inherit;
  font-size: 0.8rem;
  padding: 0.38rem 0.5rem;
}

.papeis-form-acoes {
  display: flex;
  gap: 0.4rem;
}

.papeis-detalhe {
  margin: 0;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  background: #f2f7ff;
  color: #1d4e89;
  font-size: 0.78rem;
}

@media (max-width: 900px) {
  .papeis-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .papeis-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Consolidação — lateral direita: Relatórios e Informações (visual) */
.ferias-cons-side {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
}

.ferias-cons-bloco {
  display: grid;
  gap: 0.7rem;
  padding: 0.9rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  background: #ffffff;
  box-shadow: var(--app-shadow-sm);
}

.ferias-cons-bloco h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--app-navy);
  font-size: 1rem;
  font-weight: 750;
}

.ferias-cons-botoes {
  display: grid;
  gap: 0.5rem;
}

.ferias-cons-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 38px;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
}

.ferias-cons-btn .ferias-cons-ico {
  width: 15px;
  height: 15px;
}

.ferias-cons-btn--primario {
  border: 1px solid #0f67d8;
  background: #0f67d8;
  color: #ffffff;
}

.ferias-cons-btn--secundario {
  border: 1px solid #d7e1ec;
  background: #ffffff;
  color: #0d2670;
}

.ferias-cons-btn:hover {
  border-color: #9db9d4;
  background: #eef4fb;
}

.ferias-cons-btn:focus-visible {
  outline: 2px solid #1f66b4;
  outline-offset: 2px;
}

.ferias-cons-info-lista {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding-left: 1.1rem;
  color: var(--app-text-muted);
  font-size: 0.8rem;
  line-height: 1.45;
}