/* Fonte única de verdade dos tokens de cor da Intranet Brazilian. */

:root {
  /* --- Tipografia --- */
  --heading-font: 'Manrope', system-ui, sans-serif;
  --body-font: 'IBM Plex Sans', system-ui, sans-serif;
  --mono-font: 'IBM Plex Mono', ui-monospace, monospace;

  /* --- Marca (idêntica nos dois temas) --- */
  --brand: #fff200;
  --brand-hover: #e6da00;
  --ink: #111214;

  /* --- Superfícies e texto (tema claro) --- */
  --surface: #f4f2ee;        /* fundo dinâmico (área de conteúdo) */
  --surface-2: #ffffff;      /* card sobre --surface */
  --border: #ddd8cc;
  --texto-1: #111214;
  --texto-2: #8a8478;
  --alerta: #c81e24;
  --alerta-texto: #ffffff;

  /* --- Chrome de navegação (tema claro) --- */
  --navbar: #fff200;
  /* Navbar de sistema WEB (legado, fora deste portal). Azul, nao amarelo: a
     troca precisa ser obvia a um olhar, e amarelo escurecido pareceria bug. */
  --navbar-web: #1f3a5f;
  --navbar-web-texto: #f2efe8;
  --navbar-web-divider: #fff200;
  --navbar-divider: #c81e24;
  --sidebar: #d9d7d3;
  --sidebar-active: #b3afa8;
  --sidebar-texto: #111214;
  --sidebar-rotulo: #5c5750;
  --sidebar-active-texto: #111214;

  --auth-page-bg: #f4f2ee;

  --texto-muted: #6b6459;

  --focus-ring: #111214;

  /* --- Campos de formulário (tema claro) --- */
  --field-bg: #ffffff;
  --field-border: #8a8478;
  --field-placeholder: #6b6459;

  --navbar-texto: #111214;
  --navbar-texto-dim: rgba(17, 18, 20, 0.72);
  --icon-btn-bg: rgba(17, 18, 20, 0.06);
  --icon-btn-bg-hover: rgba(17, 18, 20, 0.12);
  --avatar-ink: #111214;

  /* --- Layout --- */
  --radius: 8px;
  --radius-card: 14px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #282828;
    --surface-2: #161616;
    --border: #262624;
    --texto-1: #f2efe8;
    --texto-2: #a8a49a;
    --texto-muted: #a8a49a;
    --focus-ring: #fff200;
    --alerta: #ff5b5f;
    --alerta-texto: #1c1c1e;

    --navbar: #0a0a0a;
    --navbar-web: #13273f;
    --navbar-web-texto: #f2efe8;
    --navbar-web-divider: #fff200;
    --navbar-divider: #fff200;
    --sidebar: #161616;
    --sidebar-active: #1c1a10;
    --sidebar-texto: #c9c6bf;
    --sidebar-rotulo: #8a8478;
    --sidebar-active-texto: #fff200;
    --auth-page-bg: #0a0a0a;

    --field-bg: #0f0f0f;
    --field-border: #6b6459;
    --field-placeholder: #8a8478;

    /* Navbar escura é quase preta (#0a0a0a) — texto precisa ser claro. */
    --navbar-texto: #f2efe8;
    --navbar-texto-dim: rgba(242, 239, 232, 0.72);
    --icon-btn-bg: rgba(255, 255, 255, 0.06);
    --icon-btn-bg-hover: rgba(255, 255, 255, 0.12);
    --avatar-ink: #111214;
  }
}

:root[data-theme="dark"] {
  --surface: #282828;
  --surface-2: #161616;
  --border: #262624;
  --texto-1: #f2efe8;
  --texto-2: #a8a49a;
  --texto-muted: #a8a49a;
  --focus-ring: #fff200;
  --alerta: #ff5b5f;
  --alerta-texto: #1c1c1e;

  --navbar: #0a0a0a;
  --navbar-web: #13273f;
  --navbar-web-texto: #f2efe8;
  --navbar-web-divider: #fff200;
  --navbar-divider: #fff200;
  --sidebar: #161616;
  --sidebar-active: #1c1a10;
  --sidebar-texto: #c9c6bf;
  --sidebar-rotulo: #8a8478;
  --sidebar-active-texto: #fff200;
  --auth-page-bg: #0a0a0a;

  --field-bg: #0f0f0f;
  --field-border: #6b6459;
  --field-placeholder: #8a8478;

  --navbar-texto: #f2efe8;
  --navbar-texto-dim: rgba(242, 239, 232, 0.72);
  --icon-btn-bg: rgba(255, 255, 255, 0.06);
  --icon-btn-bg-hover: rgba(255, 255, 255, 0.12);
  --avatar-ink: #111214;
}

/* Base */

body {
  background: var(--surface);
  color: var(--texto-1);
  font-family: var(--body-font);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  color: var(--texto-1);
  text-wrap: balance;
}

.text-mono {
  font-family: var(--mono-font);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

::selection {
  background: var(--brand);
  color: var(--ink);
}

/* Tela de acesso (login e afins) */

.auth-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background: var(--auth-page-bg);
}

.theme-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 1.1rem;
  color: var(--texto-1);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.theme-toggle:hover {
  background: var(--surface);
}

.theme-toggle:active {
  transform: scale(0.94);
}

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

  .theme-toggle:active {
    transform: none;
  }
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.auth-card__header {
  background: #0f0f0f;
  color: #f2efe8;
  border-bottom: 2px solid var(--brand);
  padding: 2rem 1.75rem 1.5rem;
  text-align: center;
}

.auth-brand__logo {
  display: block;
  width: 100%;
  max-width: 232px;
  height: auto;
  margin: 0 auto;
}

.auth-brand__logo--emblema {
  max-width: 72px;
}

.auth-brand__eyebrow {
  margin: 0.85rem 0 0;
  font-family: var(--mono-font);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-indent: 0.34em; /* compensa o letter-spacing do último caractere */
  text-transform: uppercase;
  color: var(--brand);
}

.auth-card__body {
  padding: 1.75rem;
}

.auth-field + .auth-field {
  margin-top: 1rem;
}

.auth-field__label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--texto-1);
}

.auth-field__input {
  display: block;
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-family: var(--body-font);
  font-size: 0.95rem;
  color: var(--texto-1);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-field__input::placeholder {
  color: var(--field-placeholder);
  opacity: 1; /* Firefox aplica opacidade própria em placeholder */
}

.auth-field__input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255, 242, 0, 0.22);
}

.auth-field__input[aria-invalid="true"] {
  border-color: var(--alerta);
}

.auth-field__error {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--alerta);
}

.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
  padding: 0.7rem 0.85rem;
  font-size: 0.85rem;
  color: var(--texto-1);
  background: var(--surface);
  border: 1px solid var(--alerta);
  border-radius: var(--radius);
}

.auth-alert--sucesso {
  border-color: var(--brand);
}

.auth-alert--sucesso .bi {
  color: var(--texto-1);
}

.auth-alert .bi {
  flex: none;
  color: var(--alerta);
  line-height: 1.4;
}

.auth-alert__list {
  margin: 0;
  padding-left: 1.1rem;
}

.auth-alert__list:not(:first-child) {
  margin-top: 0.3rem;
}

.auth-submit {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.8rem 1rem;
  font-family: var(--body-font);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--brand);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.auth-submit:hover {
  background: var(--brand-hover);
}

.auth-submit:active {
  transform: translateY(1px);
}

.auth-card__footer {
  margin: 1.4rem 0 0;
  font-family: var(--mono-font);
  font-size: 0.72rem;
  text-align: center;
  color: var(--texto-muted);
}

@media (prefers-reduced-motion: reduce) {
  .auth-field__input,
  .auth-submit {
    transition: none;
  }

  .auth-submit:active {
    transform: none;
  }
}

/* Shell da aplicação (navbar, sidebar, breadcrumb, cards, tabelas) */

.eyebrow {
  font-family: var(--mono-font);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-muted);
}

/* --- Navbar --- */
.navbar-shell {
  background: var(--navbar);
  border-bottom: 2px solid var(--navbar-divider);
  min-height: 58px;
}

.navbar-shell .navbar-brand {
  font-family: var(--heading-font);
  font-weight: 800;
  color: var(--navbar-texto);
  letter-spacing: 0.01em;
}

.navbar-shell .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 3px;
  border-radius: 8px;
  background: #0f0f0f;
  margin-right: 0.55rem;
  flex: none;
}

.navbar-shell .brand-mark img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.navbar-shell .nav-link {
  color: var(--navbar-texto) !important;
  font-weight: 600;
  font-size: 0.92rem;
}

.navbar-shell .nav-link:hover,
.navbar-shell .nav-link:focus {
  color: var(--navbar-texto) !important;
  text-decoration: underline;
}

.navbar-shell .navbar-toggler {
  color: var(--navbar-texto);
}

.navbar-shell .dropdown-menu {
  background: var(--surface-2);
  border-color: var(--border);
}

.navbar-shell .dropdown-item {
  color: var(--texto-1);
  font-size: 0.9rem;
}

.navbar-shell .dropdown-item:hover {
  background: var(--surface);
}

.avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--avatar-ink);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navbar-texto);
  position: relative;
  background: var(--icon-btn-bg);
  border: 1px solid transparent;
}

.icon-btn:hover {
  background: var(--icon-btn-bg-hover);
}

.notif-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--ink);
  color: var(--brand);
  font-size: 0.62rem;
  font-weight: 800;
  border-radius: 10px;
  padding: 0 5px;
  line-height: 1.3;
}

/* Sistema WEB: o portal muda de cor para avisar que a tela e de outro sistema.
   Ligado por data-sistema="web" no <body> — ver layouts/app.blade.php. */
body[data-sistema="web"] .navbar-shell {
  background: var(--navbar-web);
  border-bottom-color: var(--navbar-web-divider);
}

body[data-sistema="web"] .navbar-shell,
body[data-sistema="web"] .navbar-shell a,
body[data-sistema="web"] .navbar-shell .navbar-brand {
  color: var(--navbar-web-texto);
}

/* Marca do sistema externo na sidebar. */
.sb-externo {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--navbar-web);
  border-radius: 999px;
  background: var(--navbar-web);
  color: var(--navbar-web-texto);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* --- Sidebar --- */
.sb {
  background: var(--sidebar);
  color: var(--sidebar-texto);
  width: 272px;
}

.sb .sb-section-label {
  font-family: var(--mono-font);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sidebar-rotulo);
  padding: 1rem 1rem 0.35rem;
}

.sb .accordion-item {
  background: transparent;
  border: none;
}

.sb .accordion-button {
  background: transparent;
  color: var(--sidebar-texto);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.55rem 1rem;
  box-shadow: none !important;
}

.sb .accordion-button:not(.collapsed) {
  background: var(--sidebar-active);
  color: var(--sidebar-active-texto);
}

.sb .accordion-button::after {
  filter: invert(0.5);
}

/* Cada camada de tema na sua regra: seletor e `@media` na mesma lista é CSS
   inválido e a seta do acordeão ficava escura no tema escuro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sb .accordion-button::after {
    filter: invert(1);
  }
}

:root[data-theme="dark"] .sb .accordion-button::after {
  filter: invert(1);
}

.sb .accordion-body {
  padding: 0.25rem 0 0.5rem 0;
}

.sb .simple-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--sidebar-texto);
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  border-left: 3px solid transparent;
}

.sb .simple-link:hover {
  background: var(--sidebar-active);
}

.sb .simple-link.active {
  border-left-color: var(--brand);
  background: var(--sidebar-active);
  color: var(--sidebar-active-texto);
}

.sb .module-block {
  padding: 0.15rem 0 0.5rem 0;
}

.sb .module-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--sidebar-texto);
  padding: 0.35rem 1rem 0.1rem 2.1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sb .routine-link {
  display: block;
  color: var(--sidebar-rotulo);
  text-decoration: none;
  font-size: 0.83rem;
  padding: 0.28rem 0.8rem 0.28rem 2.6rem;
}

.sb .routine-link:hover {
  color: var(--sidebar-texto);
  background: var(--sidebar-active);
}

/* Rotina da página atual: destacada, com uma barra na marca. */
.sb .routine-link.active {
  color: var(--sidebar-texto);
  background: var(--sidebar-active);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand);
}

/* Sistema (acordeão) em uso: título destacado. */
.sb-sistema-ativo .accordion-button {
  color: var(--sidebar-texto);
}

.sb-sistema-ativo .accordion-button .bi {
  color: var(--brand);
}

.sb-aviso {
  margin: 0.25rem 0.75rem 0.5rem;
  padding: 0.5rem 0.65rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--sidebar-rotulo);
  font-size: 0.8rem;
  line-height: 1.35;
}

/* --- Breadcrumb --- */
.breadcrumb-shell {
  background: transparent;
  padding: 0.65rem 0;
  margin-bottom: 0;
}

.breadcrumb-shell .breadcrumb-item + .breadcrumb-item::before {
  content: "\F285";
  font-family: "bootstrap-icons";
  font-size: 0.65rem;
  color: var(--texto-muted);
}

.breadcrumb-shell a {
  color: var(--texto-2);
  text-decoration: none;
}

.breadcrumb-shell a:hover {
  color: var(--texto-1);
}

.breadcrumb-shell .active {
  color: var(--texto-1);
  font-weight: 600;
}

/* --- KPI cards --- */
.kpi-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}

.kpi-value {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 1.9rem;
  color: var(--texto-1);
  line-height: 1;
}

.kpi-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background: var(--surface);
  color: var(--texto-1);
}

/* --- System cards --- */
.sys-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: box-shadow 0.15s, transform 0.15s;
  height: 100%;
}

.sys-card:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
}

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

  .sys-card:hover {
    transform: none;
  }
}

.sys-card .sys-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--texto-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

/* --- Cartão de seção genérico --- */
.section-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
}

/* Cartão clicável de módulo (hub do LD ADM e afins). */
.module-tile {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.module-tile:hover,
.module-tile:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
  color: inherit;
  outline: none;
}

.module-tile .bi {
  color: var(--texto-1);
  transition: transform 0.15s ease;
}

.module-tile:hover .bi {
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .module-tile,
  .module-tile .bi {
    transition: none;
  }
  .module-tile:hover,
  .module-tile:hover .bi {
    transform: none;
  }
}

.section-title {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-title .bi {
  color: var(--texto-muted);
}

/* --- Diagrama de arquitetura --- */
.arch-wrap {
  overflow-x: auto;
}

.arch-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 0.9rem;
  min-width: 760px;
}

.arch-node {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 0.75rem;
  text-align: center;
  position: relative;
}

.arch-node .lbl {
  font-weight: 700;
  font-size: 0.86rem;
  font-family: var(--heading-font);
}

.arch-node .sub {
  font-size: 0.72rem;
  color: var(--texto-muted);
}

.arch-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-muted);
}

.arch-connector .bi {
  font-size: 1.3rem;
  color: var(--texto-2);
}

/* --- Tabela --- */
/* O Bootstrap pinta cada célula com --bs-table-bg (= fundo do body, branco) e
   não sabe do nosso tema escuro: texto claro sobre célula branca. As variáveis
   dele passam a seguir os tokens da intranet. */
.table-shell {
  --bs-table-bg: transparent;
  --bs-table-color: var(--texto-1);
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg: var(--surface);
}

.table-shell thead th {
  font-family: var(--mono-font);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-muted);
  border-bottom-width: 1px;
  background: var(--surface);
}

.table-shell td,
.table-shell th {
  border-color: var(--border);
  vertical-align: middle;
  color: var(--texto-1);
}

.table-shell tbody tr:hover {
  background: var(--surface);
}

/* Modo "tabela com scroll": rolagem vertical com o cabeçalho fixo no topo.
   Alternativa à paginação para listas longas (padrão de tabela do LD ADM). */
.table-scroll {
  max-height: 60vh;
  overflow-y: auto;
}

.table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* --- Árvore de permissões --- */
.perm-tree .form-check {
  margin-bottom: 0.15rem;
}

.perm-sys {
  font-weight: 800;
  font-family: var(--heading-font);
  font-size: 1rem;
  margin-top: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.perm-mod {
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0.5rem 0 0.2rem 1.4rem;
  color: var(--texto-2);
}

.perm-actions {
  margin-left: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.2rem;
}

.perm-actions .form-check-label {
  font-size: 0.85rem;
}

/* --- Rodapé --- */
.footer-shell {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--texto-muted);
}

.footer-shell a {
  color: var(--texto-2);
  text-decoration: none;
}

.footer-shell a:hover {
  color: var(--texto-1);
  text-decoration: underline;
}

/* --- Selos de situação ---
   Uma paleta só para os selos de estado de toda a intranet, agrupada por COR e
   não por módulo: verde = está valendo, âmbar = atenção/temporário, azul =
   novidade/informação. Assim "publicado" e "online" não repetem o mesmo hex em
   dois lugares. */
.badge-status-online,
.badge-rec-publicado,
.badge-rec-rh,
.badge-nps-ativa,
.badge-nps-promotor {
  background: rgba(47, 122, 79, 0.15);
  color: #2f7a4f;
  border: 1px solid rgba(47, 122, 79, 0.35);
}

/* As três camadas de tema, cada uma na sua regra. Juntar um seletor e um
   `@media` numa lista separada por vírgula é CSS inválido — a regra inteira é
   descartada e o tema escuro fica sem efeito (era o caso destes selos até
   2026-09-10). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-status-online,
  :root:not([data-theme="light"]) .badge-rec-publicado,
  :root:not([data-theme="light"]) .badge-rec-rh,
  :root:not([data-theme="light"]) .badge-nps-ativa,
  :root:not([data-theme="light"]) .badge-nps-promotor {
    color: #5fbf85;
  }
}

:root[data-theme="dark"] .badge-status-online,
:root[data-theme="dark"] .badge-rec-publicado,
:root[data-theme="dark"] .badge-rec-rh,
:root[data-theme="dark"] .badge-nps-ativa,
:root[data-theme="dark"] .badge-nps-promotor {
  color: #5fbf85;
}

.badge-status-maint,
.badge-rec-vencido,
.badge-nps-neutro {
  background: rgba(166, 121, 31, 0.15);
  color: #a6791f;
  border: 1px solid rgba(166, 121, 31, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-status-maint,
  :root:not([data-theme="light"]) .badge-rec-vencido,
  :root:not([data-theme="light"]) .badge-nps-neutro {
    color: #e0b558;
  }
}

:root[data-theme="dark"] .badge-status-maint,
:root[data-theme="dark"] .badge-rec-vencido,
:root[data-theme="dark"] .badge-nps-neutro {
  color: #e0b558;
}

.badge-status-new,
.badge-rec-marketing {
  background: rgba(58, 111, 143, 0.15);
  color: #3a6f8f;
  border: 1px solid rgba(58, 111, 143, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-status-new,
  :root:not([data-theme="light"]) .badge-rec-marketing {
    color: #7cb8dd;
  }
}

:root[data-theme="dark"] .badge-status-new,
:root[data-theme="dark"] .badge-rec-marketing {
  color: #7cb8dd;
}

/* Neutros: comunicado geral e recado fora do mural. */
.badge-rec-geral,
.badge-rec-arquivado,
.badge-nps-rascunho,
.badge-nps-encerrada {
  background: var(--surface);
  color: var(--texto-2);
  border: 1px solid var(--border);
}

/* --- Outras primitivas reaproveitadas do protótipo --- */
.list-group-item {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--texto-1);
}

/* Aviso de destaque com o filete amarelo da marca: mensagem de sucesso de
   módulo (partials/flash), lembrete no perfil, dica na tela de exemplo. */
.alert-corp {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  color: var(--texto-1);
}

@media (min-width: 992px) {
  .layout-shell {
    display: flex;
  }

  .content-col {
    flex: 1;
    min-width: 0;
  }
}

/* Tela "Meu perfil" */

.profile-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem 1.5rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  border-left: 4px solid var(--brand);
}

.profile-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--ink);
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 1.5rem;
  box-shadow: 0 0 0 2px var(--border);
}

/* Botão na cor da marca. `.profile-btn-brand` é o nome antigo, mantido. */
.btn-brand,
.profile-btn-brand {
  background: var(--brand);
  color: var(--ink);
  border: 1px solid transparent;
  font-weight: 600;
}

.btn-brand:hover,
.btn-brand:focus,
.profile-btn-brand:hover,
.profile-btn-brand:focus {
  background: var(--brand-hover);
  color: var(--ink);
}

.profile-dl {
  display: grid;
  gap: 0;
}

.profile-dl__item {
  display: grid;
  grid-template-columns: minmax(140px, 34%) 1fr;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--border);
}

.profile-dl__item:first-child {
  border-top: none;
  padding-top: 0;
}

.profile-dl dt {
  margin: 0;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--texto-2);
}

.profile-dl dd {
  margin: 0;
  font-size: 0.9rem;
  color: var(--texto-1);
  word-break: break-word;
}

@media (max-width: 480px) {
  .profile-dl__item {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* Cartão de sistema com acesso */
.profile-access {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.profile-access__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--texto-1);
  font-size: 1.05rem;
}

.auth-field__dica {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--texto-muted);
}

/* Reserva de salas */

/* Situação da reserva. Mesmo desenho dos badges de status do dashboard; a
   cor do texto clareia no tema escuro para manter contraste. */
.badge-rsv-pendente,
.badge-mov-pendente {
  background: rgba(166, 121, 31, 0.15);
  color: #a6791f;
  border: 1px solid rgba(166, 121, 31, 0.35);
}

.badge-rsv-aprovada,
.badge-mov-aprovado {
  background: rgba(47, 122, 79, 0.15);
  color: #2f7a4f;
  border: 1px solid rgba(47, 122, 79, 0.35);
}

.badge-rsv-recusada,
.badge-nps-detrator,
.badge-mov-reprovado {
  background: rgba(200, 30, 36, 0.12);
  color: var(--alerta);
  border: 1px solid rgba(200, 30, 36, 0.35);
}

.badge-rsv-cancelada {
  background: rgba(138, 132, 120, 0.15);
  color: var(--texto-2);
  border: 1px solid rgba(138, 132, 120, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-rsv-pendente,
  :root:not([data-theme="light"]) .badge-mov-pendente {
    color: #e0b558;
  }

  :root:not([data-theme="light"]) .badge-rsv-aprovada,
  :root:not([data-theme="light"]) .badge-mov-aprovado {
    color: #5fbf85;
  }
}

:root[data-theme="dark"] .badge-rsv-pendente,
:root[data-theme="dark"] .badge-mov-pendente {
  color: #e0b558;
}

:root[data-theme="dark"] .badge-rsv-aprovada,
:root[data-theme="dark"] .badge-mov-aprovado {
  color: #5fbf85;
}

/* Movimentações de ponto (cartões do dashboard). Cada item é um cartão sobre o
   fundo da seção; ações do gestor empilham no mobile. */
.mov-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.mov-item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.mov-item:hover {
  border-color: var(--texto-2);
}

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

/* Barra de acento à esquerda, pela situação (tons médios que leem nos dois
   temas; o vermelho é o token --alerta). */
.mov-item--pendente {
  box-shadow: inset 3px 0 0 #b8862b;
}

.mov-item--aprovado {
  box-shadow: inset 3px 0 0 #388a5a;
}

.mov-item--reprovado {
  box-shadow: inset 3px 0 0 var(--alerta);
}

.mov-item__icone {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: var(--surface-2);
  color: var(--texto-1);
}

.mov-item__corpo {
  min-width: 0;
  flex: 1;
}

.mov-item__topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.mov-item__titulo {
  font-weight: 700;
  color: var(--texto-1);
}

.mov-item__meta {
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: var(--texto-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.9rem;
}

.mov-item__motivo {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  color: var(--texto-2);
}

.mov-item__obs {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--texto-muted);
}

.mov-item__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.mov-item__acoes form {
  margin: 0;
}

.mov-item__acoes .btn {
  flex-shrink: 0;
}

.mov-reprovar {
  display: flex;
  gap: 0.4rem;
  flex: 1 1 13rem;
}

.mov-reprovar .auth-field__input {
  flex: 1;
  min-width: 0;
}

/* Campo compacto dentro de tabela (motivo da recusa). */
.auth-field__input--sm {
  width: auto;
  min-width: 11rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
}

/* Lista sem nada para mostrar. `.lista-vazia` é o nome novo, sem prefixo de
   módulo (o mural de recados usa o mesmo desenho); `.rsv-vazio` continua
   valendo para as telas de reserva. */
.rsv-vazio,
.lista-vazia {
  padding: 0.9rem 1rem;
  font-size: 0.9rem;
  color: var(--texto-muted);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* Selo "TI" do item Administrar sistema: mesma forma do selo web, cor da
   marca — é aviso de "só para administrador", não de link externo. */
.sb-ti {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--brand);
  border-radius: 999px;
  background: var(--brand);
  color: var(--ink);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Rotina ativa dentro do acordeão (a sidebar só marcava .simple-link). */
.sb .routine-link.active {
  color: var(--sidebar-active-texto);
  background: var(--sidebar-active);
  font-weight: 600;
}

/* Linha de edição da sala (administrar): fundo levemente destacado. */
.rsv-linha-edicao > td {
  background: var(--surface);
}

/* --- Botão neutro do shell --- */
/* Mesma métrica do campo de formulário (.auth-field__input) e cores do tema:
   o Bootstrap `btn-outline-secondary` é cinza fixo e some no tema escuro. */
.btn-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.7rem 0.9rem;
  font-family: var(--body-font);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--texto-1);
  background: var(--surface-2);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-shell:hover,
.btn-shell:focus,
.btn-shell:active {
  color: var(--texto-1);
  background: var(--sidebar-active);
  border-color: var(--texto-2);
}

.btn-shell.btn-sm {
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
}

/* Botão destrutivo: o vermelho é o token --alerta, não o do Bootstrap. */
.btn-outline-danger {
  --bs-btn-color: var(--alerta);
  --bs-btn-border-color: var(--alerta);
  --bs-btn-hover-color: var(--alerta-texto);
  --bs-btn-hover-bg: var(--alerta);
  --bs-btn-hover-border-color: var(--alerta);
  --bs-btn-active-color: var(--alerta-texto);
  --bs-btn-active-bg: var(--alerta);
  --bs-btn-active-border-color: var(--alerta);
}

/* --- Rodapé sempre no fim da tela --- */
/* body em coluna flex com a altura da janela; o .layout-shell cresce; dentro
   dele a coluna de conteúdo também é coluna flex e o main cresce, empurrando o
   footer para baixo. Sem número mágico de altura da navbar (ela tem 66px reais,
   não os 58px do min-height — um calc() fixo deixava 8px sobrando). */
.layout-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.layout-body .layout-shell {
  display: flex;
  flex: 1 1 auto;
}

.layout-body .content-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.layout-body .content-col > main {
  flex: 1 0 auto;
}

/* --- Ações empilhadas de mesma largura (tabela de salas) --- */
.rsv-acoes {
  display: inline-grid;
  gap: 0.3rem;
  min-width: 7.5rem;
}

.rsv-acoes .btn {
  width: 100%;
}

/* Fila do gestor: Aprovar, motivo e Recusar na mesma largura. O campo de motivo
   dita o mínimo, senão o placeholder não cabe. */
.rsv-acoes--revisar {
  min-width: 11.5rem;
}

.rsv-acoes .auth-field__input {
  width: 100%;
  min-width: 0;
}

/* Um <div> vazio (sem permissão) não ocupa espaço. */
.rsv-acoes:empty {
  display: none;
}

/* Formulário de edição da sala, dentro da linha da tabela. minmax(0, …)
   impede o campo de crescer além da coluna (o min-width do campo compacto
   fazia Capacidade invadir Descrição). */
.rsv-form-edicao {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 5fr);
  gap: 0.5rem 0.75rem;
  align-items: end;
  min-width: 0;
}

.rsv-form-edicao .auth-field__input,
.rec-form-edicao .auth-field__input {
  width: 100%;
  min-width: 0;
}

.rsv-form-edicao__acoes {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

@media (max-width: 767.98px) {
  .rsv-form-edicao {
    grid-template-columns: 1fr;
  }
}

/* Data em foco no navegador de dias da agenda: parece botão para fechar o
   grupo, mas não é clicável. */
.rsv-dia-atual {
  pointer-events: none;
  font-weight: 700;
}

/* --- Calendário do mês (reserva de salas) --- */
/* Tabela de verdade (cabeçalho com scope, caption) porque é uma grade de dados,
   não desenho. min-width faz o mês inteiro caber sem apertar as colunas: quem
   estiver no celular rola na horizontal dentro do .table-responsive. 640px
   cabe na coluna da agenda (col-lg-8) a partir de 1366px de tela. */
.rsv-cal {
  width: 100%;
  min-width: 640px;
  table-layout: fixed;
  border-collapse: collapse;
}

.rsv-cal th {
  padding: 0.4rem 0.5rem;
  font-family: var(--mono-font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: var(--texto-muted);
  background: var(--surface);
  border: 1px solid var(--border);
}

.rsv-cal__cel {
  height: 6.5rem;
  padding: 0.35rem;
  vertical-align: top;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

/* Dia de outro mês: fica na grade para a semana não quebrar, mas apagado. */
.rsv-cal__cel--fora {
  background: var(--surface);
}

.rsv-cal__cel--fora .rsv-cal__num {
  color: var(--texto-muted);
  font-weight: 500;
}

.rsv-cal__cel--hoje {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.rsv-cal__num {
  display: inline-block;
  margin-bottom: 0.25rem;
  font-family: var(--heading-font);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--texto-1);
  text-decoration: none;
}

.rsv-cal__num:hover,
.rsv-cal__num:focus-visible {
  color: var(--texto-1);
  text-decoration: underline;
}

.rsv-cal__item {
  display: block;
  margin-bottom: 0.15rem;
  padding: 0.15rem 0.3rem;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--texto-1);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 3px solid transparent;
  border-radius: 4px;
}

.rsv-cal__item:hover,
.rsv-cal__item:focus-visible {
  color: var(--texto-1);
  text-decoration: underline;
}

.rsv-cal__item--aprovada {
  background: rgba(47, 122, 79, 0.15);
  border-left-color: #2f7a4f;
}

.rsv-cal__item--aguardando {
  background: rgba(166, 121, 31, 0.15);
  border-left-color: #a6791f;
}

.rsv-cal__mais {
  display: block;
  font-size: 0.7rem;
  color: var(--texto-muted);
  text-decoration: none;
}

.rsv-cal__mais:hover {
  color: var(--texto-1);
  text-decoration: underline;
}

/* Alternador Dia | Mês da agenda: pills do Bootstrap com as cores do tema
   (o azul padrão do .nav-pills não é da paleta). */
.rsv-tabs {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.rsv-tabs .nav-link {
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texto-2);
  border: 0;
  border-radius: 6px;
}

.rsv-tabs .nav-link:hover,
.rsv-tabs .nav-link:focus-visible {
  color: var(--texto-1);
  background: var(--sidebar-active);
}

.rsv-tabs .nav-link.active {
  color: var(--ink);
  background: var(--brand);
}

/* Abas do LD ADM — o "page control" do Delphi (FoF, PasF): uma faixa de abas
   onde a atual fica sublinhada no amarelo da marca. Cada aba é um link para a
   tela, por isso .nav simples (não .nav-tabs do Bootstrap, cujo contorno não é
   da paleta). */
.ld-abas .nav {
  flex-wrap: wrap;
  gap: 0.15rem;
  border-bottom: 1px solid var(--border);
}

.ld-abas .nav-link {
  padding: 0.5rem 0.95rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texto-2);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  margin-bottom: -1px;
}

.ld-abas .nav-link:hover,
.ld-abas .nav-link:focus-visible {
  color: var(--texto-1);
  background: var(--sidebar-active);
}

.ld-abas .nav-link.active {
  color: var(--texto-1);
  background: var(--surface);
  border-bottom-color: var(--brand);
}

/* Dia em foco na aba Dia, marcado também na grade do mês. */
.rsv-cal__cel--foco .rsv-cal__num {
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 2px;
}

/* O .table-responsive vira overflow-y:auto por tabela, e a altura fracionária
   das células (rem) fazia aparecer uma barra vertical de 1px de "sobra". Só
   o eixo horizontal precisa rolar aqui. */
.rsv-cal-wrap {
  overflow-y: hidden;
}

/* --- Dashboard --- */
/* KPI que leva a algum lugar: mesmo cartão, só ganha borda no hover. */
.kpi-card--link {
  color: inherit;
  text-decoration: none;
}

.kpi-card--link:hover,
.kpi-card--link:focus-visible {
  color: inherit;
  border-color: var(--texto-2);
}

/* O .stretched-link do Bootstrap precisa do cartão posicionado para cobrir
   o cartão inteiro. */
.sys-card {
  position: relative;
}

.sys-card__link {
  color: inherit;
  text-decoration: none;
}

.sys-card__link:hover,
.sys-card__link:focus-visible {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 2px;
}

.dash-clima {
  min-width: 240px;
}

.dash-clima__icone {
  font-size: 2.75rem;
  line-height: 1;
  color: var(--texto-1);
}

.dash-clima__temp {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--texto-1);
}

.dash-frase {
  border-left: 4px solid var(--brand);
}

.dash-frase__texto {
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.5;
}

.dash-frase cite {
  font-style: normal;
}

/* --- Sidebar que some (só no desktop; no mobile ela é um offcanvas) ---
   `data-sidebar="mini"` no <html> esconde a barra e devolve a largura inteira
   ao conteúdo. Quem a traz de volta é o botão da navbar, ao lado da logo — e
   só ele: um botão dentro da barra sumiria junto com ela.

   O estado é aplicado antes do CSS pelo script inline de layouts/app.blade.php
   (para a barra não aparecer e sumir na frente da pessoa) e alternado por
   public/js/sidebar-toggle.js. */
.sb-desktop {
  transition: width 0.18s ease;
}

/* O menu fica na largura cheia enquanto a barra fecha: sem isto ele se espreme
   e as linhas quebram no meio da animação, em vez de deslizar para fora. */
.sb-conteudo {
  min-width: 272px;
}

:root[data-sidebar="mini"] .sb-desktop {
  width: 0;
  overflow: hidden;
  /* `visibility` tira os links do caminho do teclado — sem ela dá para tabular
     dentro de um menu invisível. Só no fim da animação, para não piscar. */
  visibility: hidden;
  transition: width 0.18s ease, visibility 0s 0.18s;
}

@media (prefers-reduced-motion: reduce) {
  .sb-desktop,
  :root[data-sidebar="mini"] .sb-desktop {
    transition: none;
  }
}

/* --- Recados --- */
.rec-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Fixado no topo: o mesmo filete amarelo do .alert-corp, que já é o sinal de
   "leia isto" na intranet. */
.rec-card--fixado {
  border-left: 4px solid var(--brand);
}

.rec-card__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.rec-card__titulo {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.35;
  margin: 0;
  color: var(--texto-1);
}

.rec-card__texto {
  flex-grow: 1;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--texto-2);
  overflow-wrap: anywhere;
}

.rec-card__pe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--texto-muted);
}

.rec-card__pe .bi {
  margin-right: 0.3rem;
}

.rec-fixado {
  color: var(--texto-muted);
  font-size: 0.9rem;
  line-height: 1;
}

/* Edição na própria linha da tabela, como na tela de salas: grid próprio, não
   .row (dentro de <td> as margens negativas do .row estouram a célula). */
.rec-form-edicao {
  display: grid;
  gap: 0.6rem;
  padding: 0.35rem 0 0.75rem;
}

.rec-form-edicao__linha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
}


/* --- Pesquisa NPS --- */
/* Zona de excelência (NPS 76 a 100): a cor da marca, o único selo que a usa. */
.badge-nps-excelencia {
  background: var(--brand);
  color: var(--ink);
  border: 1px solid var(--brand);
}

/* Barra no pé da tela (sticky dentro da coluna de conteúdo): fica à vista
   enquanto a pessoa navega e, no fim da página, assenta em cima do rodapé.
   Some quando ela responde ou adia. */
.nps-bar {
  position: sticky;
  bottom: 0;
  z-index: 1020;
  padding: 0.7rem 0;
  background: var(--surface-2);
  border-top: 3px solid var(--brand);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08);
  color: var(--texto-1);
  font-size: 0.9rem;
}

.nps-bar--obrigado {
  font-weight: 600;
}

.nps-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
}

.nps-form {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
}

.nps-form__pergunta {
  flex: 1 1 260px;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
}

.nps-form__escala {
  flex: 0 0 auto;
}

.nps-escala {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* Cada nota é um radio escondido (.btn-check do Bootstrap) com o rótulo
   parecendo botão. A marcada fica amarela com texto preto — a regra da marca. */
.nps-escala__nota {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  margin: 0;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--field-bg);
  color: var(--texto-1);
  font-family: var(--mono-font);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.nps-escala__nota:hover {
  border-color: var(--texto-2);
  background: var(--surface);
}

/* Nota escolhida assume a cor padrão do NPS: 0-6 vermelho (detrator), 7-8
   âmbar (neutro), 9-10 verde (promotor) — as mesmas famílias dos selos e das
   barras da tela de resultados. Texto claro no vermelho/verde e escuro no
   âmbar, para o contraste. */
.nps-escala .btn-check:checked + .nps-escala__nota--detrator {
  background: #c62f2f;
  border-color: #c62f2f;
  color: #fff;
}

.nps-escala .btn-check:checked + .nps-escala__nota--neutro {
  background: #d99a1c;
  border-color: #d99a1c;
  color: #111214;
}

.nps-escala .btn-check:checked + .nps-escala__nota--promotor {
  background: #2b7a4b;
  border-color: #2b7a4b;
  color: #fff;
}

.nps-escala .btn-check:focus-visible + .nps-escala__nota {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.nps-escala__legenda {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--texto-muted);
}

/* Comentário e envio ocupam a linha de baixo, inteira. */
.nps-form__detalhe {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
}

.nps-form__comentario {
  flex: 1 1 240px;
  width: auto;
  min-width: 0;
  resize: vertical;
}

.nps-form__erro {
  flex: 1 1 100%;
}

.nps-adiar {
  flex: 0 0 auto;
  margin-left: auto;
}

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

/* Resultados */
.nps-score {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--texto-1);
}

.nps-dist {
  display: grid;
  gap: 0.35rem;
}

.nps-dist__linha {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) 2.6rem;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
}

.nps-dist__nota,
.nps-dist__qtd {
  font-family: var(--mono-font);
  font-weight: 600;
  text-align: right;
}

.nps-dist__qtd {
  color: var(--texto-2);
}

.nps-dist__trilho {
  height: 1.1rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.nps-dist__barra {
  height: 100%;
  border-radius: 999px;
}

/* As mesmas três cores dos selos: verde promotor, âmbar neutro e o vermelho
   do token --alerta para detrator (que já muda de tom por tema). */
.nps-dist__barra--promotor {
  background: #2f7a4f;
}

.nps-dist__barra--neutro {
  background: #a6791f;
}

.nps-dist__barra--detrator {
  background: var(--alerta);
}

.nps-comentario {
  max-width: 36rem;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Gráfico de rosca da composição (tela de resultados do NPS). */
.nps-donut {
  display: block;
  width: 168px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 0.85rem;
}

.nps-donut__valor {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 30px;
  fill: var(--texto-1);
}

.nps-donut__rotulo {
  font-family: var(--mono-font);
  font-size: 11px;
  letter-spacing: 0.12em;
  fill: var(--texto-2);
}

.nps-legenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--texto-1);
}

.nps-legenda li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nps-legenda__cor {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 3px;
  flex: none;
}

/* Mini barra de composição na lista de pesquisas NPS. */
.nps-mini {
  display: flex;
  width: 120px;
  max-width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border);
}

.nps-mini__parte {
  flex-shrink: 0;
  flex-basis: 0;
  min-width: 0;
}


/* --- Benefícios --- */

/* Cartão da lista: o cartão inteiro é o link para o detalhe. */
.ben-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  height: 100%;
  padding: 1.25rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  color: var(--texto-1);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ben-card:hover,
.ben-card:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--texto-1);
}

.ben-card__titulo {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.3;
  margin: 0;
  color: var(--texto-1);
}

.ben-card__texto {
  flex-grow: 1;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--texto-2);
  overflow-wrap: anywhere;
}

.ben-card__link {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--texto-1);
}

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

  .ben-card:hover,
  .ben-card:focus-visible {
    transform: none;
  }
}

/* Tile de ícone: quadrado arredondado com o ícone no centro. A cor vem das
   classes .ben-icone--* abaixo. Três tamanhos: card, detalhe e mini (tabela e
   prévia). */
.ben-icone {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  font-size: 1.6rem;
  line-height: 1;
}

.ben-icone--grande {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  font-size: 2.1rem;
}

.ben-icone--mini {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 1.05rem;
}

/* Paleta dos tiles. Mesmo desenho dos selos de situação: fundo suave (rgba de
   baixa opacidade, que funciona nos dois temas) e ícone na cor forte, que
   clareia no escuro. As três camadas de tema, cada uma na sua regra — juntar
   seletor e @media numa lista por vírgula é CSS inválido (mata o override). */
.ben-icone--azul {
  background: rgba(58, 111, 143, 0.15);
  color: #3a6f8f;
}

.ben-icone--verde {
  background: rgba(47, 122, 79, 0.15);
  color: #2f7a4f;
}

.ben-icone--ambar {
  background: rgba(166, 121, 31, 0.15);
  color: #a6791f;
}

.ben-icone--roxo {
  background: rgba(112, 72, 166, 0.15);
  color: #7048a6;
}

.ben-icone--ciano {
  background: rgba(31, 138, 138, 0.15);
  color: #1f8a8a;
}

.ben-icone--rosa {
  background: rgba(176, 58, 118, 0.15);
  color: #b03a76;
}

.ben-icone--cinza {
  background: var(--surface);
  color: var(--texto-2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ben-icone--azul {
    color: #7cb8dd;
  }

  :root:not([data-theme="light"]) .ben-icone--verde {
    color: #5fbf85;
  }

  :root:not([data-theme="light"]) .ben-icone--ambar {
    color: #e0b558;
  }

  :root:not([data-theme="light"]) .ben-icone--roxo {
    color: #b79ae0;
  }

  :root:not([data-theme="light"]) .ben-icone--ciano {
    color: #58c5c5;
  }

  :root:not([data-theme="light"]) .ben-icone--rosa {
    color: #e089b8;
  }
}

:root[data-theme="dark"] .ben-icone--azul {
  color: #7cb8dd;
}

:root[data-theme="dark"] .ben-icone--verde {
  color: #5fbf85;
}

:root[data-theme="dark"] .ben-icone--ambar {
  color: #e0b558;
}

:root[data-theme="dark"] .ben-icone--roxo {
  color: #b79ae0;
}

:root[data-theme="dark"] .ben-icone--ciano {
  color: #58c5c5;
}

:root[data-theme="dark"] .ben-icone--rosa {
  color: #e089b8;
}

/* Detalhe do benefício. */
.ben-detalhe {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.ben-detalhe__topo {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.ben-detalhe__imagem {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
}

.ben-detalhe__texto {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--texto-1);
  overflow-wrap: anywhere;
}

/* Miniatura da imagem atual no formulário de edição. */
.ben-thumb {
  display: block;
  max-width: 160px;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
}

/* --- Documentos (biblioteca corporativa) ---
   Reaproveita os cards e tiles dos benefícios (.ben-card / .ben-icone) e os
   selos de situação (.badge-rec-*). O que é próprio do módulo: as "chips" de
   tag, a lista do histórico e o selo vermelho de "vencido". */

/* Linha de selos/tags do card e do detalhe. */
.doc-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.15rem 0;
}

/* Chip de tag livre: pílula neutra; como link, acende no amarelo da marca. */
.doc-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1.4;
  background: var(--surface);
  color: var(--texto-2);
  border: 1px solid var(--border);
  text-decoration: none;
}

a.doc-chip:hover,
a.doc-chip:focus-visible {
  border-color: var(--brand);
  color: var(--texto-1);
  text-decoration: none;
}

/* Selo de documento vencido: o vermelho de atenção da marca (--alerta), nas
   três camadas de tema, cada uma na sua regra (juntar seletor e @media numa
   lista por vírgula é CSS inválido e mata o override). */
.badge-doc-vencido {
  background: rgba(200, 30, 36, 0.15);
  color: #c81e24;
  border: 1px solid rgba(200, 30, 36, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-doc-vencido {
    color: #ff8a8d;
  }
}

:root[data-theme="dark"] .badge-doc-vencido {
  color: #ff8a8d;
}

/* Histórico de alterações: lista simples com ícone por ação. */
.doc-historico {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.doc-historico__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.doc-historico__icone {
  flex: none;
  margin-top: 0.15rem;
  color: var(--texto-2);
}

/* Documento que mora na rede: caixa com o caminho e o botão de copiar. */
.doc-rede {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.doc-rede__topo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--texto-1);
}

.doc-rede__caminho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* O caminho em si: fonte mono, quebra em telas estreitas, selecionável. */
.doc-rede__path {
  flex: 1 1 240px;
  min-width: 0;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--texto-1);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
  user-select: all;
}

/* --- Aniversariantes ---
   Tabela simples reaproveitando .table-shell; só o cabeçalho de mês e a linha
   de quem faz aniversário hoje são próprios. */
.ani-mes th {
  background: var(--surface);
  color: var(--texto-2);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Hoje: filete amarelo da marca na borda, como o .alert-corp. */
.ani-hoje td {
  font-weight: 600;
  box-shadow: inset 4px 0 0 var(--brand);
}

/* --- Organograma ---
   Reaproveita .section-card (cada empresa) e .doc-chip (a navegação entre
   empresas). O que é próprio: os tiles de número, o departamento recolhível
   (<details>), a "chefia/equipe" e a chip de pessoa com avatar. Só tokens de
   cor, que já viram com o tema — sem valor literal, sem as três camadas. */

/* Painel de números no topo. */
.org-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}

.org-stat {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* O tile de "sem departamento" ganha o filete âmbar da marca enquanto houver
   gente sem lotação — o mesmo sinal do .alert-corp. */
.org-stat--pendente {
  border-left: 4px solid var(--brand);
}

.org-stat__num {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--texto-1);
}

.org-stat__label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--texto-2);
}

.org-stat__label .bi {
  color: var(--texto-muted);
}

/* Atalhos para cada empresa. */
.org-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Um departamento dentro da empresa: recolhível (<details>). */
.org-depto {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.org-depto + .org-depto {
  margin-top: 0.75rem;
}

/* "Sem departamento": borda tracejada, para sinalizar que é o balde de quem
   ainda não foi lotado no ERP. */
.org-depto--sem {
  border-style: dashed;
}

/* O cabeçalho é o <summary> clicável: sem o marcador nativo, no formato de linha. */
.org-depto__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  color: var(--texto-1);
  list-style: none;
}

.org-depto__head::-webkit-details-marker {
  display: none;
}

.org-depto__head:hover .org-depto__nome {
  color: var(--link);
}

.org-depto__icone {
  color: var(--texto-muted);
}

.org-depto__nome {
  font-weight: 700;
}

.org-depto__aviso {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--texto-muted);
}

/* Seta que gira ao abrir o <details>. */
.org-depto__chevron {
  margin-left: auto;
  color: var(--texto-muted);
  transition: transform 0.15s ease;
}

.org-depto[open] .org-depto__chevron {
  transform: rotate(180deg);
}

.org-depto__corpo {
  padding: 0 1rem 1rem;
}

/* Chefia: o(s) gestor(es) no topo do departamento. */
.org-chefia {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Equipe: quando há gestor, um filete tracejado separa a chefia dos demais,
   com o rótulo por cima — a "descida" do organograma. */
.org-depto__corpo--comchefia .org-equipe {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--border);
}

.org-equipe__rotulo {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-muted);
}

/* Grade de pessoas: acompanha a largura, quebra sozinha no mobile. */
.org-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.6rem;
}

/* Uma pessoa: avatar de iniciais + nome + cargo. */
.org-pessoa {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  min-width: 0;
  transition: border-color 0.15s ease;
}

.org-pessoa:hover {
  border-color: var(--brand);
}

/* Gestor no topo: card maior, sobre a superfície de baixo, com o filete da marca. */
.org-pessoa--head {
  padding: 0.65rem 0.8rem;
  background: var(--surface);
}

/* Gestor: filete amarelo da marca à esquerda, como o .doc-rede e o .alert-corp. */
.org-pessoa--gestor {
  border-left: 4px solid var(--brand);
}

/* Avatar de iniciais: neutro para a equipe, amarelo da marca para o gestor. */
.org-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.8rem;
  background: var(--surface);
  color: var(--texto-1);
  border: 1px solid var(--border);
}

.org-avatar--gestor {
  background: var(--brand);
  color: var(--avatar-ink);
  border-color: var(--brand);
}

.org-pessoa--head .org-avatar {
  width: 44px;
  height: 44px;
  font-size: 0.95rem;
}

.org-pessoa__dados {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.org-pessoa__nome {
  font-weight: 600;
  color: var(--texto-1);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.org-pessoa__cargo {
  font-size: 0.8rem;
  color: var(--texto-2);
  overflow-wrap: anywhere;
}

/* Selo "Gestor" ao lado do nome: pílula amarela da marca, com a estrela. */
.org-selo-gestor {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  vertical-align: middle;
  background: var(--brand);
  color: var(--avatar-ink);
}

.org-selo-gestor .bi {
  font-size: 0.62rem;
}

/* ============================================================================
   Outdoor — formulário de novo outdoor (seletor de arquivo + escolha de TVs)
   ============================================================================ */

/* Seletor de arquivo customizado: o input nativo fica escondido e a área
   clicável vira um "botão" limpo, com ícone e o nome do arquivo escolhido. */
.od-upload {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.85rem 1rem;
  background: var(--field-bg);
  border: 1px dashed var(--field-border);
  border-radius: calc(var(--radius) + 2px);
  color: var(--texto-2);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.od-upload:hover {
  border-color: var(--brand);
  color: var(--texto-1);
}
.od-upload:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--brand);
}
.od-upload .bi {
  font-size: 1.1rem;
  color: var(--brand);
  flex: none;
}
.od-upload__texto {
  min-width: 0;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* input nativo escondido, mas ainda focável pelo teclado */
.od-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Cada TV é uma linha clicável: marque para o outdoor passar nela. */
.od-tvs {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.od-tv {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.75rem 0.9rem;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: calc(var(--radius) + 2px);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.od-tv:hover {
  border-color: var(--brand);
}
.od-tv:has(input:checked) {
  border-color: var(--brand);
  background: rgba(255, 242, 0, 0.08);
}
.od-tv__nome {
  min-width: 0;
  font-size: 0.95rem;
  color: var(--texto-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Campos do form do outdoor: confortáveis, arredondados e responsivos.
   Antes usavam o modificador --sm (campo compacto de tabela), que os deixava
   pequenos e estreitos. */
.od-form .auth-field + .auth-field {
  margin-top: 1.15rem;
}
.od-form .auth-field__label {
  margin-bottom: 0.45rem;
}
.od-form .auth-field__input {
  padding: 0.8rem 1rem;
  font-size: 1rem;
  border-radius: calc(var(--radius) + 2px);
}
.od-form textarea.auth-field__input {
  min-height: 7rem;
  line-height: 1.5;
  resize: vertical;
}
/* Seta própria no select (o nativo destoa do tema). O cinza lê nos dois temas. */
.od-form select.auth-field__input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239aa0a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 1rem;
}