/**
 * Layout Apple-like — CredVibes admin (Fase 2 shell)
 * Carrega apenas com body.layout-apple. Baseline clássico intacto.
 * Não altera IDs/hooks usados por JS (#accordionSidebar, [data-menu], DataTables, modais).
 *
 * Direção: outro produto — tipografia + chrome limpo — não recolor do SB Admin.
 */

/* -------------------------------------------------------------------------- */
/* Fontes                                                                     */
/* -------------------------------------------------------------------------- */

@font-face {
  font-family: "Geist Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.2.5/files/geist-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.2.5/files/geist-sans-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.2.5/files/geist-sans-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.2.5/files/geist-sans-latin-700-normal.woff2") format("woff2");
}

/* -------------------------------------------------------------------------- */
/* Base                                                                       */
/* -------------------------------------------------------------------------- */

body.layout-apple {
  font-family: var(--la-font);
  background-color: var(--la-bg);
  color: var(--la-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
  line-height: 1.47;
}

body.layout-apple #wrapper {
  background-color: var(--la-bg);
}

body.layout-apple #content-wrapper {
  background-color: var(--la-bg) !important;
}

body.layout-apple #content {
  background-color: transparent;
}

body.layout-apple .container-fluid {
  padding-left: var(--la-space-6);
  padding-right: var(--la-space-6);
  padding-bottom: var(--la-space-6);
  max-width: 1600px;
}

/* -------------------------------------------------------------------------- */
/* Sidebar — navegação como app nativo (Entregável 1)                         */
/* -------------------------------------------------------------------------- */

body.layout-apple .sidebar.bg-gradient-credvibes,
body.layout-apple .bg-gradient-credvibes.sidebar,
body.layout-apple #accordionSidebar.sidebar {
  background-color: var(--la-bg-elevated) !important;
  background-image: none !important;
  border-right: 1px solid var(--la-border);
  box-shadow: none !important;
  width: var(--la-sidebar-width) !important;
  min-height: 100vh;
  padding-bottom: var(--la-space-5);
}

/* Modo apple não tem sidebar contraída (rail de ícones) — só a expandida.
   .toggled ainda pode ser aplicada pelo JS compartilhado (sb-admin-2.js,
   estado de sessão persistido em menu.php), então em vez de tentar impedir
   a classe na origem, a neutralizamos visualmente aqui: no desktop ela
   fica idêntica à sidebar expandida (ver bloco @media min-width:768px mais
   abaixo, que reseta ícone/texto/flyout); no mobile (≤767.98px) o
   comportamento de esconder a sidebar inteira é preservado — não é o
   "modo contraído", é outro mecanismo (abrir/fechar o menu off-canvas). */
body.layout-apple .sidebar.toggled {
  width: var(--la-sidebar-width) !important;
}

body.layout-apple .sidebar #sidebarToggle {
  display: none !important;
}

/* Brand — sinal hero no chrome */
body.layout-apple .sidebar .sidebar-brand {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: var(--la-space-3);
  padding: var(--la-space-5) var(--la-space-5) var(--la-space-4);
  height: auto !important;
  min-height: 4.75rem;
  text-decoration: none !important;
}

body.layout-apple .sidebar .sidebar-brand:hover {
  opacity: 1;
  transform: none;
}

body.layout-apple .sidebar .sidebar-brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 9px;
  background: linear-gradient(155deg, var(--la-accent), var(--la-accent-pressed));
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.04em;
  line-height: 1;
  box-shadow: var(--la-shadow-card);
}

body.layout-apple .sidebar .sidebar-brand-text {
  color: var(--la-text) !important;
  font-weight: 650;
  font-size: 1.3rem;
  letter-spacing: -0.04em;
  text-transform: none !important;
  margin: 0 !important;
  line-height: 1.1;
}

body.layout-apple .sidebar .sidebar-brand-icon,
body.layout-apple .sidebar .sidebar-brand i {
  color: var(--la-accent);
}

body.layout-apple .sidebar hr.sidebar-divider {
  border-top: 1px solid var(--la-border) !important;
  margin: var(--la-space-2) var(--la-space-5) !important;
  opacity: 1;
}

/* Relógio — discreto, tipográfico, dígitos alinhados */
body.layout-apple .sidebar .clock-widget {
  margin: 0 var(--la-space-4) var(--la-space-2);
}

body.layout-apple .sidebar #clock,
body.layout-apple .sidebar .clock-widget #clock {
  color: var(--la-text-tertiary) !important;
  background: transparent !important;
  border-radius: 0;
  font-family: var(--la-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  backdrop-filter: none;
  padding: 0.35rem 0.5rem !important;
  margin: 0;
  text-align: center !important;
}

body.layout-apple .sidebar #clock:hover {
  background: transparent !important;
  transform: none;
}

/* Nav sections */
body.layout-apple .sidebar .nav-item {
  margin: 0.1rem 0;
}

body.layout-apple .sidebar .nav-item .nav-link {
  color: var(--la-sidebar-text) !important;
  border-radius: var(--la-radius-control);
  margin: 0.12rem var(--la-sidebar-pad-x);
  padding: 0.7rem 0.9rem !important;
  padding-right: 2.25rem !important;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: -0.015em;
  transition: background-color var(--la-duration-fast) var(--la-ease), color var(--la-duration-fast) var(--la-ease);
  position: relative;
  width: auto !important;
  text-align: left !important;
}

body.layout-apple .sidebar .nav-item .nav-link:hover,
body.layout-apple .sidebar .menu-toggle:hover {
  background-color: var(--la-bg-hover) !important;
  color: var(--la-text) !important;
  padding-left: 0.9rem !important;
}

body.layout-apple .sidebar .nav-link:focus-visible,
body.layout-apple .sidebar .menu-toggle:focus-visible,
body.layout-apple .sidebar .collapse-item:focus-visible,
body.layout-apple .sidebar .menu-item:focus-visible {
  box-shadow: var(--la-focus-ring);
  outline: none;
}

body.layout-apple .sidebar .nav-item .nav-link i.fa-fw:first-child,
body.layout-apple .sidebar .nav-item .nav-link > i:first-child {
  color: var(--la-text-tertiary) !important;
  margin-right: 0.65rem;
  width: 1.1rem;
  font-size: 0.85rem;
  opacity: 0.9;
}

body.layout-apple .sidebar .nav-item .nav-link span {
  color: inherit;
}

/* Active / seção aberta */
body.layout-apple .sidebar .nav-item.active > .nav-link,
body.layout-apple .sidebar .nav-item.active-section > .nav-link,
body.layout-apple .sidebar .nav-item .nav-link[aria-expanded="true"] {
  background-color: var(--la-bg-active) !important;
  color: var(--la-accent) !important;
  font-weight: 600;
}

body.layout-apple .sidebar .nav-item.active > .nav-link::before,
body.layout-apple .sidebar .nav-item.active-section > .nav-link::before,
body.layout-apple .sidebar .nav-item .nav-link[aria-expanded="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--la-accent);
}

body.layout-apple .sidebar .nav-item.active > .nav-link i,
body.layout-apple .sidebar .nav-item.active-section > .nav-link i,
body.layout-apple .sidebar .nav-item .nav-link[aria-expanded="true"] > i:first-child {
  color: var(--la-accent) !important;
}

/* Seta do menu — mais sutil */
body.layout-apple .sidebar .menu-arrow {
  color: var(--la-text-tertiary) !important;
  opacity: 0.55;
  font-size: 0.65rem;
  right: 0.85rem;
  transition: transform var(--la-duration-fast) var(--la-ease), opacity var(--la-duration-fast) var(--la-ease);
}

body.layout-apple .sidebar .menu-toggle[aria-expanded="true"] .menu-arrow {
  color: var(--la-accent) !important;
  opacity: 0.85;
}

/* Submenu */
body.layout-apple .sidebar .collapse-inner,
body.layout-apple .sidebar .bg-white.collapse-inner,
body.layout-apple .sidebar .collapse-inner.rounded {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0.15rem 0 0.35rem !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 var(--la-space-2) !important;
}

body.layout-apple .sidebar .collapse-item,
body.layout-apple .sidebar .collapse-inner .collapse-item,
body.layout-apple .sidebar .menu-item {
  color: var(--la-text-secondary) !important;
  border-radius: var(--la-radius-control);
  margin: 0.08rem 0.45rem;
  padding: 0.48rem 0.85rem 0.48rem 1.15rem !important;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: normal;
  border-left: none !important;
  transition: background-color var(--la-duration-fast) var(--la-ease), color var(--la-duration-fast) var(--la-ease);
}

body.layout-apple .sidebar .collapse-item:hover,
body.layout-apple .sidebar .menu-item:hover {
  background-color: var(--la-bg-hover) !important;
  color: var(--la-text) !important;
  transform: none;
  padding-left: 1.15rem !important;
}

body.layout-apple .sidebar .collapse-item.active,
body.layout-apple .sidebar .menu-item.active {
  background-color: var(--la-accent-soft) !important;
  color: var(--la-accent) !important;
  font-weight: 600;
  border-left: none !important;
}

body.layout-apple .sidebar .text-white-50 {
  color: var(--la-text-tertiary) !important;
}

body.layout-apple .sidebar #sidebarToggle {
  background-color: var(--la-bg-hover) !important;
  width: 2rem;
  height: 2rem;
  margin-top: var(--la-space-3);
  transition: background-color var(--la-duration-fast) var(--la-ease);
}

body.layout-apple .sidebar #sidebarToggle::after {
  color: var(--la-text-secondary) !important;
}

/* Sem modo contraído em apple: marca e ícones ficam iguais ao estado
   expandido mesmo se .toggled acabar sendo aplicada (ver nota acima). */

/* Override menu-enhancements “admin” no modo apple */
body.layout-apple .sidebar .menu-item::before {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Topbar — vidro real (material), não card branco raso (Entregável 1)        */
/* -------------------------------------------------------------------------- */

body.layout-apple .topbar.navbar,
body.layout-apple .navbar.topbar {
  background: var(--la-bg-overlay) !important;
  backdrop-filter: var(--la-blur-material);
  -webkit-backdrop-filter: var(--la-blur-material);
  border-bottom: 1px solid var(--la-border);
  box-shadow: none !important;
  height: var(--la-topbar-height);
  padding-left: var(--la-space-3);
  padding-right: var(--la-space-4);
}

body.layout-apple .topbar .nav-link {
  color: var(--la-text-secondary) !important;
  height: var(--la-topbar-height) !important;
  transition: color var(--la-duration-fast) var(--la-ease);
}

body.layout-apple .topbar .nav-link:hover {
  color: var(--la-text) !important;
}

body.layout-apple .topbar .nav-link:focus-visible {
  box-shadow: var(--la-focus-ring);
  outline: none;
  border-radius: var(--la-radius-control);
}

body.layout-apple .topbar .text-gray-600,
body.layout-apple .topbar .topbar-user-label {
  color: var(--la-text) !important;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: -0.015em;
}

body.layout-apple .topbar .topbar-divider {
  border-color: var(--la-border) !important;
}

body.layout-apple .topbar #alertas_icon,
body.layout-apple .topbar .fa-bell {
  font-size: 0.95rem;
  color: var(--la-text-secondary);
}

/* CAUSA RAIZ #1 (confirmada via DevTools): #alertasnavbarDropdown herdava
   height:var(--la-topbar-height) (~52px, regra genérica .topbar .nav-link).
   Corrigido com height:auto, deixando o link do tamanho natural do ícone.
   CAUSA RAIZ #2 (também confirmada, tentativa anterior): margin:auto 0 só
   centraliza verticalmente dentro de um PAI flex — o <li> que envolve esse
   link não é flex, então não tinha efeito nenhum e o ícone ficava colado no
   topo. Fix: o próprio <li> vira flex centralizado (mesma técnica já usada
   em .la-theme-toggle-item), e o link relaxa pro tamanho natural dentro
   dele — sem precisar de margin:auto. */
body.layout-apple .topbar li.nav-item.dropdown {
  display: flex !important;
  align-items: center;
}

body.layout-apple .topbar #alertasnavbarDropdown,
body.layout-apple .topbar #userDropdown {
  position: relative;
  height: auto !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center;
}

body.layout-apple .topbar .badge-counter {
  position: absolute !important;
  top: -0.3rem !important;
  right: -0.35rem !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: scale(0.7) !important;
  transform-origin: top right;
  font-size: 0.65rem;
  font-weight: 600;
  background-color: var(--la-danger-fill) !important;
}

body.layout-apple .layout-toggle-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem !important;
  margin: 0.45rem 0.25rem;
  height: auto !important;
  border-radius: var(--la-radius-control);
  border: 1px solid var(--la-border);
  background: transparent;
  color: var(--la-text-secondary) !important;
  font-size: 0.75rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  text-decoration: none !important;
  transition: background-color var(--la-duration-fast) var(--la-ease), color var(--la-duration-fast) var(--la-ease), border-color var(--la-duration-fast) var(--la-ease);
}

body.layout-apple .layout-toggle-link:hover {
  background: var(--la-bg-hover);
  border-color: var(--la-border-strong);
  color: var(--la-text) !important;
}

body.layout-apple .layout-toggle-link i {
  color: var(--la-accent);
  font-size: 0.8rem;
}

/* -------------------------------------------------------------------------- */
/* Cabeçalho de página — tipográfico, sem card roxo                           */
/* -------------------------------------------------------------------------- */

body.layout-apple .page-header-shell,
body.layout-apple .container-fluid > .card.bg-credvibes,
body.layout-apple .container-fluid > .card.mt-4.mb-2.bg-credvibes {
  background: transparent !important;
  background-image: none !important;
  color: var(--la-text) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-top: var(--la-space-5) !important;
  margin-bottom: var(--la-space-4) !important;
  padding: 0 !important;
}

body.layout-apple .page-header-shell .card-body,
body.layout-apple .container-fluid > .card.bg-credvibes .card-body {
  padding: 0 !important;
}

body.layout-apple .page-header-shell h3,
body.layout-apple .container-fluid > .card.bg-credvibes h3 {
  color: var(--la-text) !important;
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: -0.04em;
  line-height: 1.15;
  margin: 0;
}

body.layout-apple .page-header-shell h3 i,
body.layout-apple .container-fluid > .card.bg-credvibes h3 i {
  color: var(--la-accent);
  margin-right: 0.4rem;
  font-size: 0.82em;
  opacity: 0.9;
}

body.layout-apple .page-header-shell .text-white,
body.layout-apple .page-header-shell a.text-white,
body.layout-apple .container-fluid > .card.bg-credvibes .text-white,
body.layout-apple .container-fluid > .card.bg-credvibes a.text-white {
  color: var(--la-text-tertiary) !important;
}

body.layout-apple .page-header-shell a.text-white:hover {
  color: var(--la-accent) !important;
}

body.layout-apple .page-header-shell a.text-white:focus-visible {
  box-shadow: var(--la-focus-ring);
  outline: none;
  border-radius: var(--la-radius-control);
}

/* -------------------------------------------------------------------------- */
/* Content area — cards leves                                                 */
/* -------------------------------------------------------------------------- */

body.layout-apple #content .card {
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-md) !important;
  box-shadow: none !important;
  background: var(--la-bg-elevated);
}

body.layout-apple #content .card.shadow,
body.layout-apple #content .card.shadow-sm,
body.layout-apple #content .card.shadow-lg {
  box-shadow: var(--la-shadow-sm) !important;
}

body.layout-apple #content .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--la-border) !important;
  padding: var(--la-space-4) var(--la-space-5) !important;
}

body.layout-apple .sticky-footer {
  background: transparent !important;
  border-top: 1px solid var(--la-border);
  color: var(--la-text-tertiary);
  font-size: 0.75rem;
}

/* -------------------------------------------------------------------------- */
/* Dashboard / KPIs (#view) — composição mais limpa                           */
/* -------------------------------------------------------------------------- */

body.layout-apple #view {
  margin-top: var(--la-space-2);
}

body.layout-apple #view .card {
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-card) !important;
  box-shadow: none !important;
  background: var(--la-bg-elevated);
  overflow: hidden;
}

body.layout-apple #view .card.shadow,
body.layout-apple #view .card.shadow-sm {
  box-shadow: none !important;
}

body.layout-apple #view .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--la-border) !important;
  padding: var(--la-space-4) var(--la-space-5) !important;
}

body.layout-apple #view .card-header h5,
body.layout-apple #view .card-header h6,
body.layout-apple #view .card-header .font-weight-bold,
body.layout-apple #view .card-header .text-primary {
  color: var(--la-text) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem;
  letter-spacing: -0.025em;
  text-transform: none;
}

body.layout-apple #view .card-body {
  padding: var(--la-space-5) !important;
}

/* KPI strip — menos chrome colorido */
body.layout-apple #view .border-left-primary,
body.layout-apple #view .border-left-success,
body.layout-apple #view .border-left-info,
body.layout-apple #view .border-left-warning,
body.layout-apple #view .border-left-secondary,
body.layout-apple #view .border-left-danger {
  border-left: none !important;
  border-top: 2px solid var(--la-accent) !important;
}

body.layout-apple #view .border-left-success {
  border-top-color: var(--la-success) !important;
}

body.layout-apple #view .border-left-info {
  border-top-color: var(--la-info) !important;
}

body.layout-apple #view .border-left-warning {
  border-top-color: var(--la-warning) !important;
}

body.layout-apple #view .border-left-secondary {
  border-top-color: var(--la-text-tertiary) !important;
}

body.layout-apple #view .border-left-danger {
  border-top-color: var(--la-danger) !important;
}

body.layout-apple #view .text-xs.font-weight-bold.text-uppercase {
  color: var(--la-text-tertiary) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.05em;
  font-weight: 600 !important;
}

body.layout-apple #view .h5.font-weight-bold,
body.layout-apple #view .h6.font-weight-bold,
body.layout-apple #view .text-gray-800 {
  color: var(--la-text) !important;
  letter-spacing: -0.03em;
  font-weight: 700 !important;
}

body.layout-apple #view h5.text-primary {
  color: var(--la-text) !important;
  font-weight: 650;
  letter-spacing: -0.03em;
  margin-bottom: var(--la-space-4) !important;
}

body.layout-apple #view .card-kpi {
  transition: transform 0.18s ease, border-color 0.18s ease;
}

body.layout-apple #view .card-kpi:hover {
  transform: translateY(-2px);
  border-color: var(--la-border-strong) !important;
  box-shadow: var(--la-shadow-popover) !important;
}

body.layout-apple #view .list-group-item {
  border-color: var(--la-border);
  background: transparent;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
}

body.layout-apple #view .list-group-item:first-child {
  border-top-left-radius: var(--la-radius-control);
  border-top-right-radius: var(--la-radius-control);
}

body.layout-apple #view .chart-area,
body.layout-apple #view .chart-bar {
  min-height: 12rem;
}

body.layout-apple #view .col-xl-3,
body.layout-apple #view .col-md-6 {
  margin-bottom: 0.35rem;
}

/* -------------------------------------------------------------------------- */
/* Componentes leves (Bootstrap 4 ainda funciona)                             */
/* -------------------------------------------------------------------------- */

body.layout-apple .btn-primary {
  background-color: var(--la-accent) !important;
  border-color: var(--la-accent) !important;
  border-radius: var(--la-radius-sm);
  font-weight: 560;
  letter-spacing: -0.01em;
  box-shadow: none;
}

body.layout-apple .btn-primary:hover {
  background-color: var(--la-accent-hover) !important;
  border-color: var(--la-accent-hover) !important;
}

body.layout-apple .dropdown-menu {
  border: 1px solid var(--la-border);
  border-radius: var(--la-radius-md);
  box-shadow: var(--la-shadow-md);
  font-family: var(--la-font);
  padding: 0.4rem;
}

body.layout-apple .dropdown-item {
  border-radius: var(--la-radius-sm);
  font-size: 0.85rem;
  letter-spacing: -0.01em;
}

body.layout-apple .dropdown-header.bg-credvibes {
  background: transparent !important;
  color: var(--la-text-tertiary) !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
}

body.layout-apple .modal-content {
  border: none;
  border-radius: var(--la-radius-lg);
  box-shadow: var(--la-shadow-lg);
}

body.layout-apple .modal-header {
  border-bottom-color: var(--la-border);
}

body.layout-apple .modal-footer {
  border-top-color: var(--la-border);
}

body.layout-apple .form-control {
  border-radius: var(--la-radius-sm);
  border-color: var(--la-border-strong);
  font-family: var(--la-font);
  letter-spacing: -0.01em;
}

body.layout-apple .form-control:focus {
  border-color: var(--la-accent);
  box-shadow: 0 0 0 3px var(--la-accent-soft);
}

body.layout-apple .scroll-to-top {
  background: var(--la-text) !important;
  border-radius: var(--la-radius-md) !important;
}

/* Sidebar layout toggle */
body.layout-apple .sidebar .layout-toggle-sidebar {
  margin: var(--la-space-4) var(--la-space-4) var(--la-space-2);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

body.layout-apple .sidebar .layout-toggle-sidebar a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--la-radius-control);
  color: var(--la-text-secondary) !important;
  font-size: 0.75rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid var(--la-border);
  background: transparent;
  transition: background-color var(--la-duration-fast) var(--la-ease), color var(--la-duration-fast) var(--la-ease);
}

body.layout-apple .sidebar .layout-toggle-sidebar a:hover {
  color: var(--la-text) !important;
  background: var(--la-bg-hover);
}

body.layout-apple .sidebar .layout-toggle-sidebar a:focus-visible {
  box-shadow: var(--la-focus-ring);
  outline: none;
}

body.layout-apple .sidebar .layout-toggle-sidebar a i {
  color: var(--la-accent);
}

/* -------------------------------------------------------------------------- */
/* Motion sutil                                                               */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  /* Fade no #view — NÃO em #content: #modal_base é irmão do #view dentro
     de #content; opacity/animation em #content cria stacking context e prende
     .modal (z-index 1050 local) atrás do .modal-backdrop no <body> (1040). */
  body.layout-apple #view {
    animation: la-content-fade 0.32s ease both;
  }

  body.layout-apple #view .card-kpi,
  body.layout-apple #view > .row:first-of-type .card {
    animation: la-fade-up 0.4s ease both;
  }

  body.layout-apple #view > .row:first-of-type .col-xl-3:nth-child(2) .card,
  body.layout-apple #view > .row:first-of-type .col-md-6:nth-child(2) .card {
    animation-delay: 0.05s;
  }

  body.layout-apple #view > .row:first-of-type .col-xl-3:nth-child(3) .card,
  body.layout-apple #view > .row:first-of-type .col-md-6:nth-child(3) .card {
    animation-delay: 0.1s;
  }

  body.layout-apple #view > .row:first-of-type .col-xl-3:nth-child(4) .card {
    animation-delay: 0.14s;
  }

  @keyframes la-content-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes la-fade-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  body.layout-apple .topbar.navbar {
    transition: background-color 0.2s ease;
  }

  body.layout-apple .sidebar .nav-item .nav-link,
  body.layout-apple .sidebar .collapse-item {
    transition: background-color 0.18s ease, color 0.18s ease;
  }
}

/* Brand mark oculto no clássico (markup compartilhado) — ver também menu-enhancements.css */
.sidebar-brand-mark {
  display: none;
}

.auth-brand-mark,
.auth-wordmark {
  display: none;
}

.auth-layout-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: #858796;
  text-decoration: none;
}

.auth-layout-toggle:hover {
  color: #613ab5;
  text-decoration: none;
}

.auth-footer-sep {
  margin: 0 0.5rem;
  color: #d1d3e2;
}

/* -------------------------------------------------------------------------- */
/* Auth — login / 2FA / config_2fa (fora do shell adm.php) — Entregável 1     */
/* -------------------------------------------------------------------------- */

body.layout-apple.bg-gradient-credvibes {
  background: var(--la-bg) !important;
  background-image: none !important;
  min-height: 100vh;
  font-family: var(--la-font);
  color: var(--la-text);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.011em;
}

body.layout-apple .auth-shell,
body.layout-apple.bg-gradient-credvibes .login-container,
body.layout-apple.bg-gradient-credvibes .card.shadow-lg {
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-sheet) !important;
  box-shadow: var(--la-shadow-popover) !important;
  background: var(--la-bg-elevated);
  overflow: hidden;
}

body.layout-apple .auth-shell:hover,
body.layout-apple.bg-gradient-credvibes .card:hover {
  transform: none !important;
  box-shadow: var(--la-shadow-popover) !important;
}

body.layout-apple .auth-brand,
body.layout-apple.bg-gradient-credvibes .card-header.bg-credvibes {
  background: transparent !important;
  background-image: none !important;
  border-bottom: 1px solid var(--la-border) !important;
  padding: var(--la-space-6) var(--la-space-5) var(--la-space-5) !important;
}

body.layout-apple .auth-brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--la-space-3);
  border-radius: var(--la-radius-card);
  background: linear-gradient(155deg, var(--la-accent), var(--la-accent-pressed));
  color: #fff;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.04em;
  line-height: 1;
  box-shadow: var(--la-shadow-card);
}

body.layout-apple .auth-wordmark {
  display: block;
  margin: 0;
  color: var(--la-text);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.045em;
  line-height: 1.1;
}

body.layout-apple .auth-logo {
  display: none !important;
}

body.layout-apple .auth-title,
body.layout-apple .auth-brand .text-white,
body.layout-apple.bg-gradient-credvibes .card-header .text-white {
  color: var(--la-text) !important;
  font-weight: 700;
  letter-spacing: -0.03em;
}

body.layout-apple .auth-title i {
  color: var(--la-accent);
}

body.layout-apple.bg-gradient-credvibes .card-header img {
  filter: none !important;
}

body.layout-apple .auth-footer,
body.layout-apple.bg-gradient-credvibes .card-footer {
  background: transparent !important;
  border-top: 1px solid var(--la-border) !important;
}

body.layout-apple .auth-layout-toggle {
  color: var(--la-text-secondary);
  font-weight: 550;
  letter-spacing: -0.01em;
  border-radius: var(--la-radius-control);
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--la-border);
  transition: background-color var(--la-duration-fast) var(--la-ease), color var(--la-duration-fast) var(--la-ease);
}

body.layout-apple .auth-layout-toggle:hover {
  color: var(--la-text);
  background: var(--la-bg-hover);
}

body.layout-apple .auth-layout-toggle:focus-visible {
  box-shadow: var(--la-focus-ring);
  outline: none;
}

body.layout-apple .auth-layout-toggle i {
  color: var(--la-accent);
}

body.layout-apple .auth-footer-sep {
  color: var(--la-border-strong);
}

/* Campos — estado normal (não só :focus), radius/borda/fonte do design system */
body.layout-apple.bg-gradient-credvibes .form-group-icon .form-control,
body.layout-apple.bg-gradient-credvibes #backupCodeGroup .form-control {
  border-radius: var(--la-radius-control) !important;
  border-color: var(--la-border-strong) !important;
  background: var(--la-bg) !important;
  color: var(--la-text) !important;
}

body.layout-apple.bg-gradient-credvibes .code-input {
  font-family: var(--la-font-mono) !important;
  letter-spacing: 0.5rem !important;
}

body.layout-apple.bg-gradient-credvibes .form-icon {
  color: var(--la-text-tertiary) !important;
}

body.layout-apple.bg-gradient-credvibes .form-group-icon .form-control:focus,
body.layout-apple.bg-gradient-credvibes .floating-label .form-control:focus ~ label,
body.layout-apple.bg-gradient-credvibes .form-group-icon .form-control:focus ~ .form-icon,
body.layout-apple.bg-gradient-credvibes .password-toggle-btn:hover,
body.layout-apple.bg-gradient-credvibes .forgot-password-link:hover,
body.layout-apple.bg-gradient-credvibes .custom-checkbox-improved:hover label {
  color: var(--la-accent) !important;
  border-color: var(--la-accent) !important;
}

body.layout-apple.bg-gradient-credvibes .form-group-icon .form-control:focus {
  box-shadow: var(--la-focus-ring) !important;
  outline: none;
  background: var(--la-bg-elevated) !important;
}

body.layout-apple.bg-gradient-credvibes .floating-label .form-control:focus ~ label,
body.layout-apple.bg-gradient-credvibes .floating-label .form-control:not(:placeholder-shown) ~ label {
  background: var(--la-bg-elevated) !important;
}

body.layout-apple.bg-gradient-credvibes .btn-submit {
  background: var(--la-accent) !important;
  border: none !important;
  border-radius: var(--la-radius-control) !important;
  box-shadow: none !important;
}

body.layout-apple.bg-gradient-credvibes .btn-submit:hover {
  background: var(--la-accent-hover) !important;
  transform: none !important;
  box-shadow: 0 4px 14px var(--la-accent-border) !important;
}

body.layout-apple.bg-gradient-credvibes .btn-submit:active {
  background: var(--la-accent-pressed) !important;
  transform: none !important;
}

body.layout-apple.bg-gradient-credvibes .form-control:focus-visible,
body.layout-apple.bg-gradient-credvibes .btn:focus-visible {
  outline: none;
  box-shadow: var(--la-focus-ring) !important;
}

/* config_2fa.php — QR code, chave secreta, códigos de backup, instruções */
body.layout-apple.bg-gradient-credvibes .step-number {
  background: var(--la-accent) !important;
}

body.layout-apple.bg-gradient-credvibes .qr-code-container,
body.layout-apple.bg-gradient-credvibes .instruction-list li,
body.layout-apple.bg-gradient-credvibes .secret-key-display {
  background: var(--la-bg) !important;
  border-radius: var(--la-radius-control);
}

body.layout-apple.bg-gradient-credvibes .qr-code-container img {
  border-color: var(--la-border-strong) !important;
  background: var(--la-bg-elevated) !important;
}

body.layout-apple.bg-gradient-credvibes .secret-key-display code {
  color: var(--la-accent);
  font-family: var(--la-font-mono);
}

body.layout-apple.bg-gradient-credvibes .backup-codes {
  background: var(--la-warning-soft) !important;
  border: 1px solid var(--la-warning) !important;
  border-radius: var(--la-radius-control);
}

body.layout-apple.bg-gradient-credvibes .backup-codes code {
  background: var(--la-bg-elevated) !important;
  color: var(--la-text) !important;
  font-family: var(--la-font-mono);
}

body.layout-apple.bg-gradient-credvibes .alert-info {
  background: var(--la-info-soft) !important;
  border-color: var(--la-info) !important;
  color: var(--la-text) !important;
  border-radius: var(--la-radius-control);
}

/* -------------------------------------------------------------------------- */
/* Empty / loading — estados globais suaves                                   */
/* -------------------------------------------------------------------------- */

body.layout-apple .lds-facebook div {
  background: var(--la-accent) !important;
}

body.layout-apple .menu-item.loading {
  color: var(--la-text-tertiary) !important;
}

body.layout-apple .menu-item.loading::after {
  border-color: var(--la-border-strong);
  border-top-color: var(--la-accent);
}

body.layout-apple .spinner-border {
  color: var(--la-accent);
  border-width: 0.15em;
}

body.layout-apple .dataTables_processing {
  background: var(--la-bg-overlay) !important;
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-card) !important;
  box-shadow: var(--la-shadow-card) !important;
  color: var(--la-text-secondary) !important;
  font-family: var(--la-font) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
}

body.layout-apple .dataTables_processing::before {
  border-color: var(--la-border-strong);
  border-top-color: var(--la-accent);
}

body.layout-apple .dataTables_empty {
  padding: 3.25rem 1.25rem !important;
  color: var(--la-text-tertiary) !important;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}

body.layout-apple .dataTables_empty::before {
  content: "" !important;
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--la-bg);
  border: 1px solid var(--la-border);
  box-shadow: inset 0 0 0 6px var(--la-bg-elevated);
  opacity: 1;
  font-size: 0 !important;
}

body.layout-apple .text-center .fa-spinner,
body.layout-apple #view .fa-spinner {
  color: var(--la-accent);
}

/* -------------------------------------------------------------------------- */
/* Polimento fino do shell                                                    */
/* -------------------------------------------------------------------------- */

body.layout-apple .sidebar .sidebar-heading {
  color: var(--la-text-tertiary) !important;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.85rem var(--la-space-5) 0.35rem;
}

body.layout-apple .sidebar .nav-item .nav-link {
  line-height: 1.25;
}

body.layout-apple #content-wrapper {
  min-height: 100vh;
}

body.layout-apple .sticky-footer .copyright {
  color: var(--la-text-tertiary);
  letter-spacing: -0.01em;
}

body.layout-apple .topbar .img-profile {
  height: 1.85rem;
  width: 1.85rem;
  border: 1px solid var(--la-border);
}

body.layout-apple .page-header-shell + #view,
body.layout-apple .container-fluid > .card.bg-credvibes + #view {
  margin-top: 0.25rem;
}

body.layout-apple h1,
body.layout-apple h2,
body.layout-apple h3,
body.layout-apple .h1,
body.layout-apple .h2,
body.layout-apple .h3 {
  letter-spacing: -0.03em;
}

body.layout-apple .text-primary {
  color: var(--la-accent) !important;
}

body.layout-apple a:not(.btn):not(.dropdown-item):not(.nav-link):not(.collapse-item):not(.menu-item):not(.page-link):not(.paginate_button) {
  color: var(--la-accent);
}

body.layout-apple a:not(.btn):not(.dropdown-item):not(.nav-link):not(.collapse-item):not(.menu-item):not(.page-link):not(.paginate_button):hover {
  color: var(--la-accent-hover);
}

/* -------------------------------------------------------------------------- */
/* Fase 3 / Entregável 2 — Componentes globais (CSS-first sob body.layout-apple) */
/* -------------------------------------------------------------------------- */

/* Botões */
body.layout-apple .btn {
  font-family: var(--la-font);
  font-weight: 560;
  letter-spacing: -0.01em;
  border-radius: var(--la-radius-control);
  transition: background-color var(--la-duration-fast) var(--la-ease), border-color var(--la-duration-fast) var(--la-ease), color var(--la-duration-fast) var(--la-ease), box-shadow var(--la-duration-fast) var(--la-ease);
}

body.layout-apple .btn:focus-visible {
  box-shadow: var(--la-focus-ring);
  outline: none;
}

body.layout-apple .btn-primary {
  background-color: var(--la-accent) !important;
  border-color: var(--la-accent) !important;
  box-shadow: none;
}

body.layout-apple .btn-primary:hover {
  background-color: var(--la-accent-hover) !important;
  border-color: var(--la-accent-hover) !important;
}

body.layout-apple .btn-primary:active {
  background-color: var(--la-accent-pressed) !important;
  border-color: var(--la-accent-pressed) !important;
}

body.layout-apple .btn-primary:focus {
  box-shadow: var(--la-focus-ring);
}

body.layout-apple .btn-success {
  background-color: var(--la-accent) !important;
  border-color: var(--la-accent) !important;
}

body.layout-apple .btn-outline-primary {
  color: var(--la-accent) !important;
  border-color: var(--la-accent-border) !important;
  background: transparent;
}

body.layout-apple .btn-outline-primary:hover {
  background: var(--la-accent-soft) !important;
  color: var(--la-accent-hover) !important;
  border-color: var(--la-accent) !important;
}

body.layout-apple .btn-secondary,
body.layout-apple .btn-outline-secondary {
  border-radius: var(--la-radius-control);
  border-color: var(--la-border-strong) !important;
  color: var(--la-text-secondary) !important;
  background: var(--la-bg-elevated) !important;
}

body.layout-apple .btn-secondary:hover,
body.layout-apple .btn-outline-secondary:hover {
  background: var(--la-bg-hover) !important;
  color: var(--la-text) !important;
}

body.layout-apple .btn-light {
  background: var(--la-bg) !important;
  border-color: var(--la-border) !important;
  color: var(--la-text) !important;
}

body.layout-apple .btn-sm {
  border-radius: 7px;
  font-size: 0.8125rem;
}

/* Inputs / selects / forms */
body.layout-apple .form-control,
body.layout-apple .custom-select,
body.layout-apple select.form-control {
  border-radius: var(--la-radius-control);
  border: 1px solid var(--la-border-strong);
  font-family: var(--la-font);
  letter-spacing: -0.01em;
  color: var(--la-text);
  background-color: var(--la-bg-elevated);
  min-height: calc(1.5em + 0.75rem + 2px);
  transition: border-color var(--la-duration-fast) var(--la-ease), box-shadow var(--la-duration-fast) var(--la-ease);
}

body.layout-apple .form-control:focus,
body.layout-apple .custom-select:focus,
body.layout-apple select.form-control:focus {
  border-color: var(--la-accent);
  box-shadow: var(--la-focus-ring);
}

body.layout-apple .form-control.is-invalid,
body.layout-apple .was-validated .form-control:invalid {
  border-color: var(--la-danger) !important;
}

body.layout-apple .form-control.is-invalid:focus,
body.layout-apple .was-validated .form-control:invalid:focus {
  box-shadow: 0 0 0 3px var(--la-danger-soft) !important;
}

body.layout-apple .invalid-feedback {
  color: var(--la-danger-fill);
}

body.layout-apple .form-control::placeholder {
  color: var(--la-text-tertiary);
}

body.layout-apple label,
body.layout-apple .col-form-label {
  font-weight: 550;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  color: var(--la-text-secondary);
}

body.layout-apple .input-group-text {
  background: var(--la-bg);
  border-color: var(--la-border-strong);
  color: var(--la-text-secondary);
  border-radius: var(--la-radius-control);
}

body.layout-apple .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--la-accent);
  border-color: var(--la-accent);
}

body.layout-apple .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: var(--la-focus-ring);
}

body.layout-apple .form-group {
  margin-bottom: 1.1rem;
}

body.layout-apple textarea.form-control {
  min-height: 6rem;
}

/* Badges */
body.layout-apple .badge {
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 6px;
  padding: 0.35em 0.55em;
  font-size: 0.72rem;
}

body.layout-apple .badge-primary {
  background-color: var(--la-accent) !important;
}

body.layout-apple .badge-success {
  background-color: var(--la-success-fill) !important;
  color: #fff !important;
}

body.layout-apple .badge-info {
  background-color: var(--la-info-fill) !important;
  color: #fff !important;
}

body.layout-apple .badge-warning {
  background-color: var(--la-warning-fill) !important;
  color: #fff !important;
}

body.layout-apple .badge-secondary {
  background-color: var(--la-text-tertiary) !important;
  color: #fff !important;
}

body.layout-apple .badge-danger {
  background-color: var(--la-danger-fill) !important;
  color: #fff !important;
}

body.layout-apple .badge-pill {
  border-radius: 999px;
}

/* Cards / painéis */
body.layout-apple .card-header h6,
body.layout-apple .card-header .m-0.font-weight-bold {
  color: var(--la-text) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
}

body.layout-apple .card-footer {
  background: transparent !important;
  border-top: 1px solid var(--la-border) !important;
}

body.layout-apple .border-left-primary,
body.layout-apple .border-left-success,
body.layout-apple .border-left-info,
body.layout-apple .border-left-warning,
body.layout-apple .border-left-danger,
body.layout-apple .border-left-secondary {
  border-left-width: 0 !important;
}

body.layout-apple .list-group-item {
  border-color: var(--la-border);
}

body.layout-apple .list-group-item.active {
  background-color: var(--la-accent) !important;
  border-color: var(--la-accent) !important;
}

/* Alerts — bg/borda/texto vindos dos tokens semânticos (dark-mode-safe;
   antes usavam rgba() fixo, que ficava estourado sobre fundo escuro) */
body.layout-apple .alert {
  border-radius: var(--la-radius-card);
  border-width: 1px;
  border-style: solid;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  box-shadow: none;
}

body.layout-apple .alert-primary {
  background: var(--la-accent-soft);
  border-color: var(--la-accent-border);
  color: var(--la-accent-hover);
}

body.layout-apple .alert-success {
  background: var(--la-success-soft);
  border-color: var(--la-success-fill);
  color: var(--la-success-fill);
}

body.layout-apple .alert-warning {
  background: var(--la-warning-soft);
  border-color: var(--la-warning-fill);
  color: var(--la-warning-fill);
}

body.layout-apple .alert-danger {
  background: var(--la-danger-soft);
  border-color: var(--la-danger-fill);
  color: var(--la-danger-fill);
}

body.layout-apple .alert-info {
  background: var(--la-info-soft);
  border-color: var(--la-info-fill);
  color: var(--la-info-fill);
}

body.layout-apple .alert-improved {
  border-left-width: 3px;
}

/* Paginação Bootstrap */
body.layout-apple .pagination .page-link {
  border-radius: var(--la-radius-control) !important;
  margin: 0 0.15rem;
  border-color: var(--la-border) !important;
  color: var(--la-text-secondary) !important;
  font-size: 0.8125rem;
  font-weight: 550;
  letter-spacing: -0.01em;
}

body.layout-apple .pagination .page-item.active .page-link {
  background-color: var(--la-accent) !important;
  border-color: var(--la-accent) !important;
  color: #fff !important;
}

body.layout-apple .pagination .page-link:hover {
  background-color: var(--la-bg-hover) !important;
  color: var(--la-text) !important;
}

body.layout-apple .pagination .page-link:focus-visible {
  box-shadow: var(--la-focus-ring) !important;
  outline: none;
}

body.layout-apple .pagination .page-item:first-child .page-link,
body.layout-apple .pagination .page-item:last-child .page-link {
  border-radius: var(--la-radius-control) !important;
}

/* Modais Bootstrap — aprofundamento (guardrail de stacking preservado abaixo, intocado) */
body.layout-apple .modal-content {
  border: none;
  border-radius: var(--la-radius-sheet);
  box-shadow: var(--la-shadow-modal);
  font-family: var(--la-font);
}

body.layout-apple .modal-header {
  border-bottom: 1px solid var(--la-border);
  padding: 1.15rem 1.35rem;
}

body.layout-apple .modal-title {
  font-weight: 650;
  letter-spacing: -0.025em;
  color: var(--la-text);
  font-size: 1.05rem;
}

body.layout-apple .modal-body {
  padding: 1.25rem 1.35rem;
  color: var(--la-text);
}

body.layout-apple .modal-footer {
  border-top: 1px solid var(--la-border);
  padding: 0.9rem 1.35rem;
  background: transparent;
}

body.layout-apple .modal-header .close {
  opacity: 0.55;
  text-shadow: none;
}

body.layout-apple .modal-header .close:hover {
  opacity: 0.9;
}

body.layout-apple .modal-header .close:focus-visible {
  box-shadow: var(--la-focus-ring);
  outline: none;
  opacity: 0.9;
}

/* Stack Bootstrap 4: backdrop 1040, modal 1050 — reforço explícito no apple */
body.layout-apple .modal-backdrop {
  z-index: 1040;
}

body.layout-apple .modal-backdrop.show {
  opacity: 0.35;
}

body.layout-apple .modal {
  z-index: 1050;
}

body.layout-apple .modal-dialog {
  pointer-events: none;
}

body.layout-apple .modal-content {
  pointer-events: auto;
}

/*
 * Safety net: com modal aberto, neutraliza stacking contexts nos ancestrais
 * de #modal_base (#content / #content-wrapper / #wrapper) e o glass do topbar,
 * para o .modal não ficar atrás do backdrop nem sob camada compositada.
 */
body.layout-apple.modal-open #wrapper,
body.layout-apple.modal-open #content-wrapper,
body.layout-apple.modal-open #content {
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  opacity: 1 !important;
  animation: none !important;
  isolation: auto;
  will-change: auto;
}

body.layout-apple.modal-open .topbar.navbar,
body.layout-apple.modal-open .navbar.topbar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--la-bg-elevated) !important;
}

/* DataTables — overrides apple sobre datatables-enhancements.css */
body.layout-apple table.dataTable thead {
  background: var(--la-bg) !important;
  background-image: none !important;
}

body.layout-apple table.dataTable thead th {
  color: var(--la-text-tertiary) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--la-border) !important;
  padding: 0.85rem 0.75rem !important;
}

body.layout-apple table.dataTable thead th.sorting:hover,
body.layout-apple table.dataTable thead th.sorting_asc:hover,
body.layout-apple table.dataTable thead th.sorting_desc:hover {
  background-color: var(--la-bg-hover) !important;
}

body.layout-apple table.dataTable tbody tr:hover {
  background-color: var(--la-bg-hover) !important;
  transform: none;
  box-shadow: none;
}

body.layout-apple table.dataTable tbody td {
  border-bottom-color: var(--la-border) !important;
  color: var(--la-text);
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  padding: 0.85rem 0.75rem !important;
}

body.layout-apple .dataTables_info {
  color: var(--la-text-tertiary);
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
}

body.layout-apple .dataTables_length label,
body.layout-apple .dataTables_filter label {
  color: var(--la-text-secondary);
  font-weight: 500;
  font-size: 0.8125rem;
}

body.layout-apple .dataTables_length select,
body.layout-apple .dataTables_filter input {
  border: 1px solid var(--la-border-strong) !important;
  border-radius: var(--la-radius-control) !important;
  box-shadow: none !important;
}

body.layout-apple .dataTables_length select:focus,
body.layout-apple .dataTables_filter input:focus {
  border-color: var(--la-accent) !important;
  box-shadow: var(--la-focus-ring) !important;
}

body.layout-apple .dt-button,
body.layout-apple .dt-buttons .btn {
  border-radius: var(--la-radius-control) !important;
  border-color: var(--la-border) !important;
  background: var(--la-bg-elevated) !important;
  color: var(--la-text-secondary) !important;
  font-weight: 550 !important;
  letter-spacing: -0.01em;
}

body.layout-apple .dt-button:hover,
body.layout-apple .dt-buttons .btn:hover {
  background: var(--la-bg-hover) !important;
  color: var(--la-text) !important;
  border-color: var(--la-border-strong) !important;
}

body.layout-apple .card.shadow.mb-4,
body.layout-apple #view_table {
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-card) !important;
  box-shadow: none !important;
}

/* Dropdowns / toasts leves */
body.layout-apple .dropdown-item.active,
body.layout-apple .dropdown-item:active {
  background-color: var(--la-accent-soft) !important;
  color: var(--la-accent) !important;
}

body.layout-apple .dropdown-item:focus-visible {
  box-shadow: inset var(--la-focus-ring);
  outline: none;
}

body.layout-apple .toast {
  border-radius: var(--la-radius-card);
  border: 1px solid var(--la-border);
  box-shadow: var(--la-shadow-popover);
  font-family: var(--la-font);
}

/* Tabs — sublinhado deslizante seria a próxima iteração; por ora refina o Bootstrap nativo */
body.layout-apple .nav-tabs {
  border-bottom-color: var(--la-border);
}

body.layout-apple .nav-tabs .nav-link {
  border-radius: var(--la-radius-control) var(--la-radius-control) 0 0;
  color: var(--la-text-secondary);
  font-weight: 550;
  letter-spacing: -0.01em;
  transition: color var(--la-duration-fast) var(--la-ease), border-color var(--la-duration-fast) var(--la-ease);
}

body.layout-apple .nav-tabs .nav-link.active {
  color: var(--la-text);
  background-color: var(--la-bg-elevated);
  border-color: var(--la-border) var(--la-border) var(--la-bg-elevated);
  font-weight: 600;
}

body.layout-apple .nav-tabs .nav-link:focus-visible,
body.layout-apple .nav-pills .nav-link:focus-visible {
  box-shadow: var(--la-focus-ring);
  outline: none;
}

body.layout-apple .nav-pills .nav-link.active {
  background-color: var(--la-accent) !important;
}

/* -------------------------------------------------------------------------- */
/* Entregável 2 — Novos componentes reutilizáveis (.la-*)                     */
/* Prontos para uso; a marcação HTML de cada tela é ligada no Entregável 3+   */
/* (ver md/redesign-apple-checklist-implementacao.md).                        */
/* -------------------------------------------------------------------------- */

/* Segmented control — filtros em pílula */
body.layout-apple .la-segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--la-bg-hover);
  border-radius: 9px;
  gap: 2px;
}

body.layout-apple .la-segmented button {
  border: none;
  background: none;
  padding: 5px 12px;
  border-radius: 7px;
  font-family: var(--la-font);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--la-text-secondary);
  cursor: pointer;
  transition: background-color var(--la-duration-fast) var(--la-ease), color var(--la-duration-fast) var(--la-ease), box-shadow var(--la-duration-fast) var(--la-ease);
}

body.layout-apple .la-segmented button.active {
  background: var(--la-bg-elevated);
  color: var(--la-text);
  box-shadow: var(--la-shadow-card);
}

body.layout-apple .la-segmented button:hover:not(.active) {
  color: var(--la-text);
}

body.layout-apple .la-segmented button:focus-visible {
  box-shadow: var(--la-focus-ring);
  outline: none;
}

/* KPI / stat card */
body.layout-apple .la-kpi-card {
  background: var(--la-bg-elevated);
  border: 1px solid var(--la-border);
  border-radius: var(--la-radius-card);
  box-shadow: var(--la-shadow-card);
  padding: var(--la-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--la-space-3);
}

body.layout-apple .la-kpi-label {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--la-text-tertiary);
}

body.layout-apple .la-kpi-value {
  font-size: 1.5rem;
  font-weight: 680;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--la-text);
}

body.layout-apple .la-kpi-delta {
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

body.layout-apple .la-kpi-delta.up {
  color: var(--la-success-fill);
}

body.layout-apple .la-kpi-delta.down {
  color: var(--la-danger-fill);
}

body.layout-apple .la-kpi-delta.neutral {
  color: var(--la-text-tertiary);
}

/* Empty state / skeleton loading */
body.layout-apple .la-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--la-space-2);
  padding: var(--la-space-7) var(--la-space-4);
  color: var(--la-text-tertiary);
}

body.layout-apple .la-empty-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--la-bg);
  border: 1px solid var(--la-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--la-text-tertiary);
}

body.layout-apple .la-empty-title {
  font-weight: 600;
  color: var(--la-text-secondary);
  font-size: 0.9375rem;
}

body.layout-apple .la-skeleton {
  background: var(--la-bg-hover);
  border-radius: 6px;
}

@media (prefers-reduced-motion: no-preference) {
  body.layout-apple .la-skeleton {
    animation: la-skeleton-pulse 1.4s ease-in-out infinite;
  }

  @keyframes la-skeleton-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
  }
}

/* Lista — grouped-list para substituir tabela densa (padrão confirmado, ver plano §3) */
body.layout-apple .la-list {
  display: flex;
  flex-direction: column;
}

body.layout-apple .la-list-row {
  display: flex;
  align-items: center;
  gap: var(--la-space-4);
  padding: var(--la-space-3) var(--la-space-4);
  border-bottom: 1px solid var(--la-border);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background-color var(--la-duration-fast) var(--la-ease);
}

body.layout-apple .la-list-row:last-child {
  border-bottom: none;
}

body.layout-apple .la-list-row:hover {
  background-color: var(--la-bg-hover);
}

body.layout-apple .la-list-row:focus-visible {
  outline: none;
  box-shadow: inset var(--la-focus-ring);
}

body.layout-apple .la-list-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  flex: none;
  background: var(--la-accent-soft);
  color: var(--la-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 650;
}

body.layout-apple .la-list-main {
  flex: 1;
  min-width: 0;
}

body.layout-apple .la-list-name {
  font-weight: 600;
  font-size: 0.84375rem;
  color: var(--la-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.layout-apple .la-list-meta {
  font-size: 0.75rem;
  color: var(--la-text-tertiary);
  font-family: var(--la-font-mono);
  margin-top: 1px;
}

body.layout-apple .la-list-side {
  display: flex;
  align-items: center;
  gap: var(--la-space-4);
  flex: none;
}

body.layout-apple .la-list-value {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

body.layout-apple .la-list-date {
  font-size: 0.75rem;
  color: var(--la-text-tertiary);
  font-family: var(--la-font-mono);
}

/* Ordenar por — popover (usado quando a Lista/Grade não tem cabeçalho de coluna) */
body.layout-apple .la-sort-control {
  position: relative;
}

body.layout-apple .la-sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 11.25rem;
  z-index: 20;
  background: var(--la-bg-elevated);
  border: 1px solid var(--la-border);
  border-radius: var(--la-radius-card);
  box-shadow: var(--la-shadow-popover);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

body.layout-apple .la-sort-menu button {
  appearance: none;
  width: 100%;
  text-align: left;
  font-family: var(--la-font);
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 8px;
  border: none;
  background: none;
  font-weight: 550;
  color: var(--la-text-secondary);
  cursor: pointer;
  transition: background-color var(--la-duration-fast) var(--la-ease);
}

body.layout-apple .la-sort-menu button:hover {
  background: var(--la-bg-hover);
  color: var(--la-text);
}

body.layout-apple .la-sort-menu button.active {
  color: var(--la-accent);
  font-weight: 650;
}

body.layout-apple .la-sort-menu button:focus-visible {
  box-shadow: var(--la-focus-ring);
  outline: none;
}

/* Modal com abas — padrão de detalhe (Resumo/Documentos/Motor de Crédito), ver plano §3 */
body.layout-apple .la-modal-tabs {
  display: flex;
  gap: var(--la-space-5);
  padding: 0 var(--la-space-5);
  border-bottom: 1px solid var(--la-border);
}

body.layout-apple .la-modal-tab {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--la-font);
  padding: 10px 1px 11px;
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--la-text-tertiary);
  position: relative;
  transition: color var(--la-duration-fast) var(--la-ease);
}

body.layout-apple .la-modal-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--la-accent);
  transform: scaleX(0);
  transition: transform var(--la-duration) var(--la-ease);
}

body.layout-apple .la-modal-tab:hover {
  color: var(--la-text);
}

body.layout-apple .la-modal-tab.active {
  color: var(--la-text);
}

body.layout-apple .la-modal-tab.active::after {
  transform: scaleX(1);
}

body.layout-apple .la-modal-tab:focus-visible {
  box-shadow: var(--la-focus-ring);
  outline: none;
  border-radius: 6px;
}

body.layout-apple .la-modal-panel {
  display: none;
}

body.layout-apple .la-modal-panel.active {
  display: flex;
  flex-direction: column;
  gap: var(--la-space-4);
}

/* Visualizador de documento (imagem) — trilha + palco, com lightbox */
body.layout-apple .la-doc-layout {
  display: flex;
  gap: var(--la-space-4);
  min-height: 20rem;
}

body.layout-apple .la-doc-rail {
  width: 11.5rem;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

body.layout-apple .la-doc-item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border-radius: 9px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--la-font);
  width: 100%;
  color: var(--la-text-secondary);
  transition: background-color var(--la-duration-fast) var(--la-ease);
}

body.layout-apple .la-doc-item:hover {
  background: var(--la-bg-hover);
}

body.layout-apple .la-doc-item.active {
  background: var(--la-accent-soft);
  color: var(--la-accent);
}

body.layout-apple .la-doc-item:focus-visible {
  box-shadow: var(--la-focus-ring);
  outline: none;
}

body.layout-apple .la-doc-item-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--la-bg-hover);
  color: var(--la-text-tertiary);
}

body.layout-apple .la-doc-item.active .la-doc-item-icon {
  background: var(--la-bg-elevated);
  color: var(--la-accent);
}

body.layout-apple .la-doc-item-label {
  font-size: 0.71875rem;
  font-weight: 600;
}

body.layout-apple .la-doc-item-status {
  font-size: 0.65625rem;
  margin-top: 1px;
}

body.layout-apple .la-doc-item-status.ok {
  color: var(--la-success-fill);
}

body.layout-apple .la-doc-item-status.warn {
  color: var(--la-warning-fill);
}

body.layout-apple .la-doc-item-status.bad {
  color: var(--la-danger-fill);
}

body.layout-apple .la-doc-viewer {
  flex: 1;
  min-width: 0;
  background: var(--la-bg);
  border: 1px solid var(--la-border);
  border-radius: var(--la-radius-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.layout-apple .la-doc-viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--la-border);
}

body.layout-apple .la-doc-viewer-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow: auto;
  cursor: zoom-in;
}

body.layout-apple .la-doc-viewer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-top: 1px solid var(--la-border);
}

/* Visualizador de PDF — paginação + zoom, página simulada em papel branco (proposital nos dois temas) */
body.layout-apple .la-pdf-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--la-border);
  background: var(--la-bg-elevated);
}

body.layout-apple .la-pdf-toolbar .la-spacer {
  flex: 1;
}

body.layout-apple .la-pdf-tool-btn {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--la-border-strong);
  background: var(--la-bg-elevated);
  color: var(--la-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.layout-apple .la-pdf-tool-btn:hover:not(:disabled) {
  background: var(--la-bg-hover);
  color: var(--la-text);
}

body.layout-apple .la-pdf-tool-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

body.layout-apple .la-pdf-tool-btn:focus-visible {
  box-shadow: var(--la-focus-ring);
  outline: none;
}

body.layout-apple .la-pdf-page {
  width: min(100%, 280px);
  aspect-ratio: 210 / 297;
  background: #fdfdfd;
  color: #1d1d1f;
  border-radius: 3px;
  box-shadow: var(--la-shadow-popover);
  padding: 20px 18px;
  transition: transform var(--la-duration) var(--la-ease);
}

/* Lightbox — z-index acima do .modal (1050) pois abre por cima de um doc dentro de um modal;
   ao ligar numa tela real, anexar fora de qualquer ancestral com transform (mesma lição do
   guardrail de stacking do .modal, ver bloco "Safety net" acima). */
body.layout-apple .la-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1080;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--la-duration) var(--la-ease);
}

body.layout-apple .la-lightbox.open {
  opacity: 1;
  pointer-events: auto;
}

body.layout-apple .la-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.layout-apple .la-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.24);
}

@media (prefers-reduced-motion: reduce) {
  body.layout-apple .la-lightbox,
  body.layout-apple .la-modal-tab::after,
  body.layout-apple .la-pdf-page {
    transition: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Fase 2 — QA shell em seções de lista / conteúdo comum                      */
/* -------------------------------------------------------------------------- */

body.layout-apple #view .panel-body {
  padding: var(--la-space-5) var(--la-space-5) var(--la-space-4);
}

body.layout-apple #view .responsive-table {
  margin-top: 0.25rem;
}

body.layout-apple #view_table {
  margin-top: var(--la-space-4) !important;
  background: var(--la-bg-elevated) !important;
  overflow: hidden;
}

body.layout-apple #view > .row:first-child {
  margin-top: 0.15rem;
}

body.layout-apple .page-header-shell + #view {
  margin-top: var(--la-space-3);
}

/* Breadcrumb / secondary chrome se existir */
body.layout-apple .breadcrumb {
  background: transparent;
  padding: 0.35rem 0;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
}

body.layout-apple .breadcrumb-item + .breadcrumb-item::before {
  color: var(--la-text-tertiary);
}

body.layout-apple .tooltip-inner {
  border-radius: var(--la-radius-sm);
  font-family: var(--la-font);
  font-size: 0.75rem;
  letter-spacing: -0.01em;
  background: #1d1d1f;
}

/* Progress — denser / cleaner */
body.layout-apple .progress {
  height: 0.45rem;
  border-radius: 999px;
  background: var(--la-bg);
  overflow: hidden;
}

body.layout-apple .progress-bar {
  border-radius: 999px;
}

body.layout-apple .progress-bar.bg-info,
body.layout-apple .bg-info {
  background-color: var(--la-info) !important;
}

body.layout-apple .progress-bar.bg-success,
body.layout-apple .bg-success:not(.badge):not(.btn) {
  background-color: var(--la-success) !important;
}

body.layout-apple .progress-bar.bg-primary,
body.layout-apple .bg-primary:not(.badge):not(.btn) {
  background-color: var(--la-accent) !important;
}

/* -------------------------------------------------------------------------- */
/* Fase 3 — checklist visual (tabelas / forms / badges / toasts)              */
/* -------------------------------------------------------------------------- */

/* Tabelas Bootstrap genéricas (além de DataTables) */
body.layout-apple .table {
  color: var(--la-text);
  font-family: var(--la-font);
  letter-spacing: -0.01em;
}

body.layout-apple .table thead th {
  border-top: none;
  border-bottom: 1px solid var(--la-border);
  color: var(--la-text-tertiary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--la-bg);
  vertical-align: middle;
}

body.layout-apple .table-bordered,
body.layout-apple .table-bordered td,
body.layout-apple .table-bordered th {
  border-color: var(--la-border) !important;
}

body.layout-apple .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.015) !important;
}

body.layout-apple .table-hover tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.03) !important;
}

body.layout-apple table.dataTable.table-striped tbody tr.odd,
body.layout-apple table.dataTable.stripe tbody tr.odd {
  background-color: rgba(0, 0, 0, 0.015) !important;
}

body.layout-apple table.dataTable.no-footer {
  border-bottom: 1px solid var(--la-border) !important;
}

/* Toolbar DataTables — filter / length / buttons mais limpos */
body.layout-apple .dataTables_wrapper .row:first-child {
  align-items: center;
  margin-bottom: 0.65rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--la-border);
}

body.layout-apple .dataTables_wrapper .dt-buttons {
  margin-bottom: 0.35rem;
}

body.layout-apple .dataTables_filter input {
  margin-left: 0.5rem !important;
  padding: 0.4rem 0.75rem !important;
  min-width: 12rem;
  background: var(--la-bg) !important;
}

body.layout-apple .dataTables_length select {
  margin: 0 0.4rem !important;
  padding: 0.3rem 1.75rem 0.3rem 0.55rem !important;
  background: var(--la-bg) !important;
}

body.layout-apple .dataTables_wrapper .dataTables_paginate {
  padding-top: 0.75rem !important;
}

body.layout-apple .dataTables_wrapper .dataTables_info {
  padding-top: 0.85rem !important;
}

/* SearchBuilder / SearchPanes / Q se presentes */
body.layout-apple .dtsb-searchBuilder,
body.layout-apple .dtsb-group,
body.layout-apple div.dtsb-searchBuilder {
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-md) !important;
  background: var(--la-bg) !important;
  box-shadow: none !important;
  margin-bottom: var(--la-space-3) !important;
}

body.layout-apple .dtsb-button,
body.layout-apple button.dtsb-button {
  border-radius: var(--la-radius-sm) !important;
  border-color: var(--la-border-strong) !important;
  background: var(--la-bg-elevated) !important;
  color: var(--la-text-secondary) !important;
}

body.layout-apple .btn-group > .btn {
  border-radius: 0;
}

body.layout-apple .btn-group > .btn:first-child {
  border-top-left-radius: var(--la-radius-sm);
  border-bottom-left-radius: var(--la-radius-sm);
}

body.layout-apple .btn-group > .btn:last-child {
  border-top-right-radius: var(--la-radius-sm);
  border-bottom-right-radius: var(--la-radius-sm);
}

body.layout-apple .btn-danger {
  border-radius: var(--la-radius-sm);
}

body.layout-apple .btn-warning {
  border-radius: var(--la-radius-sm);
  color: #1d1d1f;
}

/* Badges em células de tabela — densidade */
body.layout-apple table.dataTable .badge,
body.layout-apple #view_table .badge {
  font-size: 0.68rem;
  padding: 0.3em 0.5em;
  vertical-align: middle;
}

/* Notificações in-page (alerts flash) */
body.layout-apple #view > .alert,
body.layout-apple .container-fluid > .alert {
  margin-top: var(--la-space-3);
  margin-bottom: var(--la-space-3);
}

/* Select2 (se carregado em alguma tela) */
body.layout-apple .select2-container--default .select2-selection--single {
  border-radius: var(--la-radius-sm) !important;
  border-color: var(--la-border-strong) !important;
  height: calc(1.5em + 0.75rem + 2px) !important;
  font-family: var(--la-font);
}

body.layout-apple .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--la-accent) !important;
  box-shadow: 0 0 0 3px var(--la-accent-soft);
}

body.layout-apple .select2-dropdown {
  border-radius: var(--la-radius-md) !important;
  border-color: var(--la-border) !important;
  box-shadow: var(--la-shadow-md);
  font-family: var(--la-font);
}

body.layout-apple .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--la-accent) !important;
}

/* -------------------------------------------------------------------------- */
/* Fase 4 — Telas piloto: composição Apple-like (não recolor)                 */
/* -------------------------------------------------------------------------- */

/* —— Dashboards Geral / KPIs —— */
body.layout-apple #view .row.mb-4 {
  margin-bottom: var(--la-space-5) !important;
}

body.layout-apple #view > .row.mt-4 {
  margin-top: var(--la-space-4) !important;
}

/* KPI strip principal — tipografia + whitespace */
body.layout-apple #view .row.mb-4 > [class*="col-"] > .card.border-left-success,
body.layout-apple #view .row.mb-4 > [class*="col-"] > .card.border-left-info,
body.layout-apple #view .row.mb-4 > [class*="col-"] > .card.border-left-warning,
body.layout-apple #view .row.mb-4 > [class*="col-"] > .card.border-left-primary,
body.layout-apple #view .row.mb-4 > [class*="col-"] > .card.border-left-danger,
body.layout-apple #view .row.mb-4 > [class*="col-"] > .card.border-left-secondary {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

body.layout-apple #view .row.mb-4 > [class*="col-"] > .card .card-body {
  padding: var(--la-space-4) var(--la-space-5) !important;
}

body.layout-apple #view .row.mb-4 .h5.mb-0.font-weight-bold {
  font-size: 1.65rem;
  letter-spacing: -0.04em;
  font-weight: 700 !important;
  line-height: 1.15;
}

body.layout-apple #view .row.mb-4 .fa-2x {
  font-size: 1.35rem !important;
  color: var(--la-text-tertiary) !important;
  opacity: 0.55;
}

/* Section titles (Estados de Automação / Fluxo) */
body.layout-apple #view h5.text-primary,
body.layout-apple #view h5.text-info,
body.layout-apple #view h5.text-success,
body.layout-apple #view h5.text-secondary {
  color: var(--la-text) !important;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  margin-top: var(--la-space-2);
  margin-bottom: var(--la-space-4) !important;
  padding-bottom: var(--la-space-2);
  border-bottom: 1px solid var(--la-border);
}

body.layout-apple #view h5.text-primary i,
body.layout-apple #view h5.text-info i,
body.layout-apple #view h5.text-success i {
  color: var(--la-text-tertiary) !important;
  font-size: 0.9em;
  margin-right: 0.4rem !important;
}

/* Grid de estados (card-kpi) — densidade Apple */
body.layout-apple #view .card-kpi {
  border-radius: var(--la-radius-md) !important;
  min-height: 4.75rem;
}

body.layout-apple #view .card-kpi .card-body {
  padding: var(--la-space-3) var(--la-space-4) !important;
}

body.layout-apple #view .card-kpi .text-xs {
  font-size: 0.62rem !important;
  line-height: 1.35;
  margin-bottom: 0.4rem !important;
  color: var(--la-text-tertiary) !important;
}

body.layout-apple #view .card-kpi .h6 {
  font-size: 1.25rem !important;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

body.layout-apple #view .col-xl-2.mb-3 {
  margin-bottom: 0.65rem !important;
}

/* Cards de gráfico / listas no Dashboard Geral */
body.layout-apple #view .card.shadow.mb-4 .card-header {
  padding: 1.1rem 1.35rem !important;
}

body.layout-apple #view .card.shadow.mb-4 .card-header h6 {
  font-size: 0.9375rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.025em;
}

body.layout-apple #view .card.shadow.mb-4 .card-body {
  padding: 1.35rem 1.5rem !important;
}

body.layout-apple #view .list-group-item {
  padding: 0.85rem 1rem;
  transition: background-color 0.15s ease;
}

body.layout-apple #view .list-group-item:hover {
  background: var(--la-bg-hover);
}

body.layout-apple #view .list-group-item.text-muted {
  color: var(--la-text-tertiary) !important;
  font-size: 0.875rem;
}

/* —— Stop Humano (lista + reaproveitado no modal #modal_90, Entregável 3) —— */
body.layout-apple #view .stop-humano-metrics,
body.layout-apple #modal_90 .stop-humano-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--la-space-4);
  align-items: stretch;
  margin: var(--la-space-2) 0 var(--la-space-5);
  padding: var(--la-space-4) var(--la-space-5);
  background: var(--la-bg-elevated);
  border: 1px solid var(--la-border);
  border-radius: var(--la-radius-card);
  box-shadow: none;
}

body.layout-apple #view .stop-humano-metric,
body.layout-apple #modal_90 .stop-humano-metric {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center;
  min-width: 0;
  padding: 0 var(--la-space-3);
  border-right: 1px solid var(--la-border);
}

body.layout-apple #view .stop-humano-metric:last-child,
body.layout-apple #modal_90 .stop-humano-metric:last-child {
  border-right: none;
}

body.layout-apple #view .stop-humano-metric--center,
body.layout-apple #modal_90 .stop-humano-metric--center {
  align-items: center !important;
  text-align: center;
}

body.layout-apple #view .stop-humano-metric-label,
body.layout-apple #view .stop-humano-metrics p.mt-2,
body.layout-apple #modal_90 .stop-humano-metric-label,
body.layout-apple #modal_90 .stop-humano-metrics p.mt-2 {
  margin: 0 0 0.35rem !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  color: var(--la-text-tertiary) !important;
}

body.layout-apple #view .stop-humano-metric-value,
body.layout-apple #view .stop-humano-metrics #saldo,
body.layout-apple #view .stop-humano-metrics #reserva,
body.layout-apple #view .stop-humano-metrics #balanco,
body.layout-apple #modal_90 .stop-humano-metric-value,
body.layout-apple #modal_90 .stop-humano-metrics #saldo_funding,
body.layout-apple #modal_90 .stop-humano-metrics #reserva_funding,
body.layout-apple #modal_90 .stop-humano-metrics #balanco_funding {
  margin: 0 !important;
  font-size: 1.35rem !important;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--la-text) !important;
  line-height: 1.2;
}

body.layout-apple #view .stop-humano-metric-value--balance,
body.layout-apple #view .stop-humano-metrics #balanco,
body.layout-apple #modal_90 .stop-humano-metric-value--balance,
body.layout-apple #modal_90 .stop-humano-metrics #balanco_funding {
  font-size: 1.75rem !important;
  color: var(--la-success-fill) !important;
}

body.layout-apple #view #tabela_stophumano {
  border: none !important;
}

body.layout-apple #view #tabela_stophumano thead th {
  background: var(--la-bg) !important;
  background-image: none !important;
}

body.layout-apple #view #tabela_stophumano tbody td {
  padding: 0.75rem 0.65rem !important;
  font-size: 0.8125rem;
  vertical-align: middle;
}

@media (max-width: 767.98px) {
  body.layout-apple #view .stop-humano-metrics {
    grid-template-columns: 1fr;
    gap: var(--la-space-3);
  }

  body.layout-apple #view .stop-humano-metric {
    border-right: none;
    border-bottom: 1px solid var(--la-border);
    padding-bottom: var(--la-space-3);
    align-items: flex-start !important;
    text-align: left !important;
  }

  body.layout-apple #view .stop-humano-metric:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* —— Pedidos (lista) ——
 * Redesign 2026-08-10: as 12 cards Bootstrap independentes (um <div class="card">
 * por métrica, cada um com sua própria borda/sombra) viravam uma "parede de
 * caixas" sem hierarquia — nenhum número se destacava e as duas taxas (Adim./
 * Inadim.) ficavam do mesmo tamanho que "Prev. Inadim." Pedido do usuário: livre
 * pra sair do card se precisar pra ter excelência.
 *
 * Solução: sem tocar HTML (pedidos.php continua com os 12 <div class="card">
 * originais, preservando 100% do que pedidos_info() em pedidos.js manipula via
 * getElementById), .pedidos-metrics vira um único strip (grid), cada card perde
 * a própria moldura e vira só uma célula desse grid, reposicionada por
 * nth-child em 3 linhas de hierarquia:
 *   linha 1 (destaque)  — Total + as 2 taxas (Adim./Inadim.), maiores
 *   linha 2 (apoio)     — Reco. Total/Ativos, Pagos, P. Prazo, P. Fora P., em Dia
 *   linha 3 (apoio)     — Inadimplentes + as 2 previsões
 * Os 2 progress bars (Adim./Inadim., cujo width é setado via JS inline style,
 * não CSS var — não dá pra virar donut/conic-gradient sem tocar pedidos.js)
 * viram meters mais grossos/arredondados abaixo do número grande.
 */
body.layout-apple #view .pedidos-metrics {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: var(--la-space-4) var(--la-space-5) !important;
  align-items: start;
  margin: var(--la-space-2) 0 var(--la-space-5) !important;
  padding: var(--la-space-4) var(--la-space-5) !important;
  background: var(--la-bg-elevated) !important;
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-card) !important;
  box-shadow: none !important;
  position: relative; /* ancora o botão de expandir (canto superior direito) */
}

body.layout-apple #view .pedidos-metrics > [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Linha 1 — destaque: Total + as duas taxas */
body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(1)  { grid-column: 1 / span 2; grid-row: 1; }
body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(9)  { grid-column: 3 / span 2; grid-row: 1; }
body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(10) { grid-column: 5 / span 2; grid-row: 1; }

/* Linha 2 — apoio, uma coluna cada */
body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(2) { grid-column: 1; grid-row: 2; }
body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(3) { grid-column: 2; grid-row: 2; }
body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(4) { grid-column: 3; grid-row: 2; }
body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(5) { grid-column: 4; grid-row: 2; }
body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(6) { grid-column: 5; grid-row: 2; }
body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(7) { grid-column: 6; grid-row: 2; }

/* Linha 3 — apoio: inadimplentes + as duas previsões */
body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(8)  { grid-column: 1 / span 2; grid-row: 3; }
body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(11) { grid-column: 3 / span 2; grid-row: 3; }
body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(12) { grid-column: 5 / span 2; grid-row: 3; }

/* Divisor único entre a linha de destaque e o restante (linha 2) */
body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(2),
body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(3),
body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(4),
body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(5),
body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(6),
body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(7) {
  padding-top: var(--la-space-4) !important;
  border-top: 1px solid var(--la-border) !important;
}

@media (max-width: 900px) {
  body.layout-apple #view .pedidos-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.layout-apple #view .pedidos-metrics > [class*="col-"] {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(1),
  body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(9),
  body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(10) {
    grid-column: 1 / span 2 !important;
  }
}

/* Cada .card vira só uma célula do strip — sem moldura própria */
body.layout-apple #view .pedidos-metrics .card {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  height: auto !important;
  transition: none !important;
}

body.layout-apple #view .pedidos-metrics .card:hover {
  transform: none !important;
  box-shadow: none !important;
}

body.layout-apple #view .pedidos-metrics .card::before {
  display: none !important;
}

body.layout-apple #view .pedidos-metrics .card-body {
  padding: 0 !important;
}

/* Neutraliza o grid Bootstrap interno (.row.no-gutters > .col/.col-auto) —
 * inclusive o aninhado dentro dos cards de taxa (Adim./Inadim.), que também
 * deve empilhar: label, número grande, meter. */
body.layout-apple #view .pedidos-metrics .card-body .row,
body.layout-apple #view .pedidos-metrics .card-body .row > div {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.layout-apple #view .pedidos-metrics .text-xs {
  color: var(--la-text-tertiary) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase;
  margin: 0 0 var(--la-space-1) !important;
  line-height: 1.3;
  white-space: nowrap;
}

body.layout-apple #view .pedidos-metrics .h6 {
  color: var(--la-text) !important;
  font-size: 1.05rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  margin: 0 !important;
}

/* Destaque (linha 1): Total ganha o número mais proeminente do strip */
body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(1) .text-xs {
  font-size: 0.75rem !important;
}

body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(1) .h6 {
  font-size: 2rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

/* Valores que sinalizam risco (Pagos Fora do Prazo, Inadimplentes) ganham tom danger */
body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(6) .h6,
body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(8) .h6 {
  color: var(--la-danger) !important;
}

/* Meters de Adim./Inadim. — número grande + barra grossa arredondada.
 * O JS (pedidos_info() em pedidos.js) seta .style.width inline no
 * .progress-bar; não dá pra trocar por conic-gradient sem editar JS, então
 * o meter reaproveita a mesma mecânica só com skin nova. */
body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(9) .h6,
body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(10) .h6 {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: var(--la-space-2) !important;
}

body.layout-apple #view .pedidos-metrics .progress {
  height: 0.5rem !important;
  border-radius: 999px !important;
  background: var(--la-bg-hover) !important;
  box-shadow: none !important;
  overflow: hidden;
  margin: 0 !important;
}

body.layout-apple #view .pedidos-metrics .progress-bar {
  border-radius: 999px !important;
}

body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(9) .progress-bar {
  background: linear-gradient(90deg, var(--la-success) 0%, var(--la-accent) 100%) !important;
}

body.layout-apple #view .pedidos-metrics > [class*="col-"]:nth-child(10) .progress-bar {
  background: var(--la-danger) !important;
}

/* -------------------------------------------------------------------------- */
/* Painel expansível de vencimentos/novos pedidos (ícone no canto do card    */
/* de métricas) — dados sob demanda via pedidos_info_extra() em pedidos.js.  */
/* -------------------------------------------------------------------------- */

body.layout-apple #view .pedidos-metrics-expand-toggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: var(--la-space-3);
  right: var(--la-space-3);
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--la-border);
  border-radius: 8px;
  background: var(--la-bg-elevated);
  color: var(--la-text-secondary);
  cursor: pointer;
  transition: background var(--la-duration-fast) var(--la-ease),
              color var(--la-duration-fast) var(--la-ease);
}

body.layout-apple #view .pedidos-metrics-expand-toggle:hover {
  background: var(--la-bg-hover);
  color: var(--la-text);
}

body.layout-apple #view .pedidos-metrics-expand-toggle:focus-visible {
  box-shadow: var(--la-focus-ring);
  outline: none;
}

body.layout-apple #view .pedidos-metrics-expand-toggle svg {
  transition: transform var(--la-duration) var(--la-ease);
}

body.layout-apple #view .pedidos-metrics-expand-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* display:none inline no HTML (default) vira block aqui; a transição de
   abrir/fechar usa max-height+opacity porque display:none não anima. */
body.layout-apple #view .pedidos-metrics-expand {
  display: block !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: calc(-1 * var(--la-space-4)) 0 var(--la-space-5);
  padding: 0 var(--la-space-5);
  background: var(--la-bg-elevated);
  border: 1px solid var(--la-border);
  border-top: none;
  border-radius: 0 0 var(--la-radius-card) var(--la-radius-card);
  transition: max-height var(--la-duration) var(--la-ease),
              opacity var(--la-duration) var(--la-ease),
              padding var(--la-duration) var(--la-ease);
}

body.layout-apple #view .pedidos-metrics-expand.is-open {
  max-height: 620px;
  opacity: 1;
  padding: var(--la-space-4) var(--la-space-5) var(--la-space-5);
}

body.layout-apple #view .pedidos-metrics-expand-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--la-space-4);
  margin-bottom: var(--la-space-4);
}

body.layout-apple #view .pedidos-metrics-expand-stat .text-xs {
  color: var(--la-text-tertiary) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
}

body.layout-apple #view .pedidos-metrics-expand-stat .h6 {
  color: var(--la-text) !important;
  font-size: 1.05rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums;
}

body.layout-apple #view .pedidos-metrics-expand-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--la-space-5);
}

body.layout-apple #view .pedidos-metrics-expand-chart-wrap {
  position: relative;
  height: 180px;
}

/* Totalizadores por estado (chips), abaixo dos gráficos */
body.layout-apple #view .pedidos-metrics-expand-totais {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--la-space-3);
  margin-top: var(--la-space-5);
  padding-top: var(--la-space-4);
  border-top: 1px solid var(--la-border);
}

body.layout-apple #view .pedidos-metrics-expand-totais-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: var(--la-space-3) var(--la-space-2);
  background: var(--la-bg);
  border: 1px solid var(--la-border);
  border-radius: var(--la-radius-card);
  text-align: center;
}

body.layout-apple #view .pedidos-metrics-expand-totais-label {
  color: var(--la-text-tertiary);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

body.layout-apple #view .pedidos-metrics-expand-totais-valor {
  color: var(--la-text);
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  body.layout-apple #view .pedidos-metrics-expand-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.layout-apple #view .pedidos-metrics-expand-charts {
    grid-template-columns: 1fr;
  }

  body.layout-apple #view .pedidos-metrics-expand-totais {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  body.layout-apple #view .pedidos-metrics-expand-totais {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  body.layout-apple #view .pedidos-metrics-expand,
  body.layout-apple #view .pedidos-metrics-expand-toggle,
  body.layout-apple #view .pedidos-metrics-expand-toggle svg {
    transition: none;
  }
}

body.layout-apple #view #tabela_pedidos {
  border: none !important;
}

body.layout-apple #view #tabela_pedidos thead,
body.layout-apple #view #tabela_pedidos thead th {
  background: var(--la-bg) !important;
  background-image: none !important;
  color: var(--la-text-tertiary) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.04em !important;
  border-bottom: 1px solid var(--la-border) !important;
  padding: 0.8rem 0.65rem !important;
}

body.layout-apple #view #tabela_pedidos tbody td {
  padding: 0.75rem 0.65rem !important;
  font-size: 0.8125rem;
  border-bottom-color: var(--la-border) !important;
  vertical-align: middle;
}

body.layout-apple #view #tabela_pedidos tbody tr:hover {
  background-color: var(--la-bg-hover) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
 * Pedidos → padrão Lista (2026-08-10, pedido explícito do usuário, aceitando
 * o risco já documentado: a tabela usa DataTables Responsive, que mede
 * largura de coluna via JS — validar ao vivo, reverter se quebrar).
 *
 * A tabela tem 24 colunas visíveis por padrão (de 35 no total). Cabem 6 no
 * cartão da Lista: Cliente, CPF, Valor, Estado, Criado, Ações — as outras 18
 * (Salário, Ocupação, Contato, Recomendação, Dias Pagto., Motivo, Nascimento,
 * Estado Civil, Sexo, CEP, Cidade, UF, Pix, Doc. Tipo, Alterado, Pix
 * Efetivado, Vencimento, Baixa) ficam ocultas — quem precisar delas abre o
 * detalhe do pedido.
 *
 * Posições (nth-child, contando só colunas já visíveis por padrão — as com
 * visible:false no JS nem geram <td>, não entram na contagem):
 *   1 cliente · 2 cpf · 9 valor_credito · 12 estado · 22 criado · 24 funcoes
 *
 * Cabeçalho (thead) é MANTIDO, não escondido — só reduzido às mesmas 6
 * colunas — porque esconder th quebraria o clique-pra-ordenar do DataTables,
 * uma funcionalidade existente que não posso remover.
 *
 * Fragilidade conhecida: o botão "Colunas Visibilidade" (colvis) do próprio
 * DataTables deixa o usuário religar qualquer uma das 18 colunas ocultas —
 * isso desloca a posição nth-child de tudo depois dela, podendo esconder ou
 * mostrar a coluna errada. É a limitação inerente de fazer isso só em CSS,
 * sem tocar no JS que define as colunas.
 * ========================================================================== */

body.layout-apple #view #tabela_pedidos thead th:nth-child(3),
body.layout-apple #view #tabela_pedidos thead th:nth-child(4),
body.layout-apple #view #tabela_pedidos thead th:nth-child(5),
body.layout-apple #view #tabela_pedidos thead th:nth-child(6),
body.layout-apple #view #tabela_pedidos thead th:nth-child(7),
body.layout-apple #view #tabela_pedidos thead th:nth-child(8),
body.layout-apple #view #tabela_pedidos thead th:nth-child(10),
body.layout-apple #view #tabela_pedidos thead th:nth-child(11),
body.layout-apple #view #tabela_pedidos thead th:nth-child(13),
body.layout-apple #view #tabela_pedidos thead th:nth-child(14),
body.layout-apple #view #tabela_pedidos thead th:nth-child(15),
body.layout-apple #view #tabela_pedidos thead th:nth-child(16),
body.layout-apple #view #tabela_pedidos thead th:nth-child(17),
body.layout-apple #view #tabela_pedidos thead th:nth-child(18),
body.layout-apple #view #tabela_pedidos thead th:nth-child(19),
body.layout-apple #view #tabela_pedidos thead th:nth-child(20),
body.layout-apple #view #tabela_pedidos thead th:nth-child(21),
body.layout-apple #view #tabela_pedidos thead th:nth-child(23),
body.layout-apple #view #tabela_pedidos tbody td:nth-child(3),
body.layout-apple #view #tabela_pedidos tbody td:nth-child(4),
body.layout-apple #view #tabela_pedidos tbody td:nth-child(5),
body.layout-apple #view #tabela_pedidos tbody td:nth-child(6),
body.layout-apple #view #tabela_pedidos tbody td:nth-child(7),
body.layout-apple #view #tabela_pedidos tbody td:nth-child(8),
body.layout-apple #view #tabela_pedidos tbody td:nth-child(10),
body.layout-apple #view #tabela_pedidos tbody td:nth-child(11),
body.layout-apple #view #tabela_pedidos tbody td:nth-child(13),
body.layout-apple #view #tabela_pedidos tbody td:nth-child(14),
body.layout-apple #view #tabela_pedidos tbody td:nth-child(15),
body.layout-apple #view #tabela_pedidos tbody td:nth-child(16),
body.layout-apple #view #tabela_pedidos tbody td:nth-child(17),
body.layout-apple #view #tabela_pedidos tbody td:nth-child(18),
body.layout-apple #view #tabela_pedidos tbody td:nth-child(19),
body.layout-apple #view #tabela_pedidos tbody td:nth-child(20),
body.layout-apple #view #tabela_pedidos tbody td:nth-child(21),
body.layout-apple #view #tabela_pedidos tbody td:nth-child(23) {
  display: none !important;
}

/*
 * Grid compartilhado (não flex) — thead e tbody usam a MESMA definição de
 * colunas, então alinham sempre, mesmo que o DataTables/Responsive tente
 * empurrar width inline nas células (neutralizado abaixo com width:auto).
 * 5 trilhas visuais: [Cliente+CPF empilhados] [Pedido Id+Estado empilhados] [Valor] [Criado] [Ações].
 * CPF não tem trilha própria — ocupa a 2ª linha da 1ª coluna, exatamente como
 * no protótipo de referência (nome em cima, meta embaixo), não como uma
 * coluna de tabela a mais. Isso é o que fecha a diferença entre "tabela com
 * menos colunas" e "Lista" de verdade.
 */
body.layout-apple #view #tabela_pedidos thead tr,
body.layout-apple #view #tabela_pedidos tbody tr {
  display: grid !important;
  /* minmax(0, 1fr), não 1fr puro: uma trilha 1fr tem mínimo automático
     baseado no conteúdo (min-content) por padrão — nome de cliente longo
     forçava a trilha a crescer além do espaço disponível (min-width:0 na
     célula não resolve isso sozinho, é a trilha do grid que precisa do
     minmax). Isso distorcia a largura real da linha — cabeçalho (só a
     palavra curta "CLIENTE") ficava com uma largura, corpo (nome real)
     com outra, "desalinhando" as colunas seguintes e cortando o início
     do nome pela largura calculada errada. */
  grid-template-columns: minmax(0, 1fr) 9rem 6.5rem 10.5rem;
  align-items: center !important;
  gap: var(--la-space-4);
  width: 100% !important;
}

body.layout-apple #view #tabela_pedidos thead tr {
  padding: 0 var(--la-space-4) var(--la-space-2) !important;
}

body.layout-apple #view #tabela_pedidos tbody tr {
  padding: var(--la-space-3) var(--la-space-4) !important;
  border-bottom: 1px solid var(--la-border) !important;
  row-gap: 2px;
}

body.layout-apple #view #tabela_pedidos thead th,
body.layout-apple #view #tabela_pedidos tbody td {
  display: block;
  border: none !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Suprime o controle "+"/child-row do DataTables Responsive — ele calcula
   largura com base nas 24 colunas originais (não sabe que 18 estão
   display:none aqui), então tenta "ajudar" escondendo coisa por conta
   própria. Isolamos o efeito visual; o cálculo interno dele continua
   rodando (limitação de não poder tocar no JS). */
body.layout-apple #view #tabela_pedidos.dtr-inline.collapsed > tbody > tr > td.dtr-control,
body.layout-apple #view #tabela_pedidos.dtr-inline.collapsed > tbody > tr > th.dtr-control,
body.layout-apple #view #tabela_pedidos td.dtr-control,
body.layout-apple #view #tabela_pedidos th.dtr-control,
body.layout-apple #view #tabela_pedidos td.control,
body.layout-apple #view #tabela_pedidos th.control {
  padding-left: 0 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.layout-apple #view #tabela_pedidos.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
body.layout-apple #view #tabela_pedidos.dtr-inline.collapsed > tbody > tr > th.dtr-control:before,
body.layout-apple #view #tabela_pedidos.dtr-inline.collapsed tbody td.dtr-control:first-child::before,
body.layout-apple #view #tabela_pedidos tbody td.dtr-control:first-child::before,
body.layout-apple #view #tabela_pedidos tbody tr.dtr-expanded td.dtr-control:first-child::before,
body.layout-apple #view #tabela_pedidos tbody td.dtr-control:hover:first-child::before {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

body.layout-apple #view #tabela_pedidos tbody tr.child,
body.layout-apple #view #tabela_pedidos tbody tr.parent + tr.child {
  display: none !important;
}

/* Reset agressivo de fundo — zera qualquer background herdado de outro lugar
   que eu não consegui rastrear por leitura estática do código. As regras
   abaixo reaplicam de propósito só o que eu quero (avatar, pill do Estado,
   hover de linha) — como vêm DEPOIS no arquivo, ganham do reset.
   Causa real encontrada: o cinza não era background — era um box-shadow
   inset (vendor/datatables/datatables.css: "table.dataTable.table-striped
   > tbody > tr.odd > * { box-shadow: inset 0 0 0 9999px rgba(0,0,0,.05); }"),
   o próprio truque de zebra-striping do DataTables. Zerado abaixo junto.
   Segunda causa (tema escuro): o próprio elemento <tbody> tem
   "#tabela_pedidos tbody { background: #fff; }" (pedidos-enhancements.css),
   que ganhava do reset acima porque este nunca cobria o <tbody> em si —
   só thead th/tbody td/tbody tr. Com td/tr transparentes, esse branco do
   tbody aparecia por trás. Adicionado abaixo. */
body.layout-apple #view #tabela_pedidos thead th,
body.layout-apple #view #tabela_pedidos tbody,
body.layout-apple #view #tabela_pedidos tbody td,
body.layout-apple #view #tabela_pedidos tbody tr {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Pedido com divergência não resolvida (pedidos.js: createdRow adiciona
   .bg-warning quando divergencia==1 && liberado==0 — sinal de negócio real,
   não decoração; preservado e redesenhado com tokens em vez do amarelo cru
   #fff3cd/#ffc107 do pedidos-enhancements.css, que o reset acima já neutraliza
   na parte de fundo). */
body.layout-apple #view #tabela_pedidos tbody tr.bg-warning {
  background: var(--la-warning-soft) !important;
  border-left: 3px solid var(--la-warning) !important;
  padding-left: calc(var(--la-space-4) - 3px) !important;
}

body.layout-apple #view #tabela_pedidos tbody tr.bg-warning:hover {
  background: var(--la-warning-soft) !important;
}

/* Cabeçalho — só 5 rótulos (CPF não tem coluna própria; some do thead).
 * grid-column/grid-row conferidos via DevTools (overlay do grid): todos os
 * 4 rótulos caem certos na linha 1, coluna certa — não é bug de grid. A
 * "2ª linha" que aparecia era diferença de padding/line-height entre as
 * células (vendor datatables.css dá padding-right:26px + pseudo-elementos
 * de seta em .sorting/.sorting_asc/.sorting_desc, que variam com o estado
 * de ordenação de cada coluna). Reset uniforme abaixo garante que as 4
 * células tenham exatamente a mesma caixa vertical, independente do estado
 * de ordenação. */
body.layout-apple #view #tabela_pedidos thead th:nth-child(1),
body.layout-apple #view #tabela_pedidos thead th:nth-child(9),
body.layout-apple #view #tabela_pedidos thead th:nth-child(12),
body.layout-apple #view #tabela_pedidos thead th:nth-child(24) {
  grid-row: 1 !important;
  align-self: center !important;
  padding: 0 1.25rem 0 0 !important;
  line-height: 1.3 !important;
  vertical-align: middle !important;
}

body.layout-apple #view #tabela_pedidos thead th:nth-child(1) {
  grid-column: 1;
}

body.layout-apple #view #tabela_pedidos thead th:nth-child(2) {
  display: none !important;
}

body.layout-apple #view #tabela_pedidos thead th:nth-child(9) {
  grid-column: 3;
  text-align: right;
}

body.layout-apple #view #tabela_pedidos thead th:nth-child(12) {
  grid-column: 2;
}

/* Criado não tem rótulo próprio no cabeçalho — vira legenda empilhada sobre
   Ações no corpo (mesma técnica do Cliente/CPF), então some do thead. */
body.layout-apple #view #tabela_pedidos thead th:nth-child(22) {
  display: none !important;
}

body.layout-apple #view #tabela_pedidos thead th:nth-child(24) {
  grid-column: 4;
  text-align: right;
}

/* Cliente — linha 1 da coluna 1. white-space/overflow/text-overflow com
 * !important: datatables-enhancements.css (não-condicional) tem uma regra
 * pra td.dtr-control com white-space:normal!important + overflow:visible
 * !important + min-width:200px!important (pensada pro "+" do Responsive) —
 * sem !important aqui ela ganhava mesmo com o Responsive desligado em
 * apple (ver responsive:false em pedidos.js), fazendo o nome quebrar em
 * várias linhas e "comer" a coluna ao lado. */
body.layout-apple #view #tabela_pedidos tbody td:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  font-weight: 600;
  color: var(--la-text);
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

/* CAUSA REAL do "come a 1ª letra do nome" (confirmada via inspeção real no
 * DevTools): o nome vem envolto num <a href="#" onclick="irParaCliente(...)">
 * (render da coluna cliente em pedidos.js). datatables-enhancements.css e
 * pedidos-enhancements.css (não-condicionais) têm uma regra genérica
 * "a[onclick]" pensada só pros ÍCONES de ação (32x32px, ícone centralizado)
 * que também casa com esse link de navegação — forçando o nome inteiro
 * (texto, não ícone) a virar um flex box de 2rem com o texto centralizado
 * dentro dele. Como o texto é muito mais largo que 2rem, metade vaza pra
 * cada lado a partir do centro — e a metade que vaza pra ESQUERDA fica por
 * trás da borda esquerda do <td> (que tem overflow:hidden), cortando as
 * primeiras letras. Reset completo pro link voltar a ser texto inline
 * normal, preservando o clique (irParaCliente). */
body.layout-apple #view #tabela_pedidos tbody td:nth-child(1) a[onclick] {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: var(--la-text) !important;
  transition: none !important;
}

body.layout-apple #view #tabela_pedidos tbody td:nth-child(1) a[onclick]:hover {
  color: var(--la-accent) !important;
  background: none !important;
  transform: none !important;
  text-decoration: underline;
}

/* CPF — linha 2 da coluna 1, alinhada com o texto do nome logo acima, meta
   secundária mono */
body.layout-apple #view #tabela_pedidos tbody td:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  font-family: var(--la-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--la-text-tertiary);
  font-size: 0.75rem;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

/* Ícones sob o CPF (sexo + recorrente + divergência + erro): não cortar por nowrap/ellipsis da célula */
body.layout-apple #view #tabela_pedidos tbody td:nth-child(2).pedidos-col-cpf,
body.layout-apple #view #tabela_pedidos tbody td.pedidos-col-cpf {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

body.layout-apple #view #tabela_pedidos tbody td .pedidos-cpf-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  max-width: 100%;
}

body.layout-apple #view #tabela_pedidos tbody td .pedidos-cpf-cell .cpf {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

body.layout-apple #view #tabela_pedidos tbody td .pedidos-cpf-icons {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem;
}

/* Badges circulares — sem accent roxo */
body.layout-apple #view #tabela_pedidos tbody td .pedidos-recorrente-icon,
body.layout-apple #view #tabela_pedidos tbody td .pedidos-sexo-icon,
body.layout-apple #view #tabela_pedidos tbody td .pedidos-divergencia-icon,
body.layout-apple #view #tabela_pedidos tbody td .pedidos-erro-icon,
body.layout-apple #view #tabela_pedidos_wrapper .pedidos-recorrente-legend .fa-redo,
body.layout-apple #view #tabela_pedidos_wrapper .pedidos-sexo-legend .fa-mars,
body.layout-apple #view #tabela_pedidos_wrapper .pedidos-sexo-legend .fa-venus,
body.layout-apple #view #tabela_pedidos_wrapper .pedidos-divergencia-legend .fa-exclamation-circle,
body.layout-apple #view #tabela_pedidos_wrapper .pedidos-divergencia-legend .fa-unlock,
body.layout-apple #view #tabela_pedidos_wrapper .pedidos-erro-legend .fa-exclamation-triangle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  font-size: 0.62rem;
  line-height: 1;
  border-radius: 50%;
  box-sizing: border-box;
  flex-shrink: 0;
  opacity: 1;
}

body.layout-apple #view #tabela_pedidos tbody td .pedidos-recorrente-icon,
body.layout-apple #view #tabela_pedidos_wrapper .pedidos-recorrente-legend .fa-redo {
  color: #198754;
  background: rgba(25, 135, 84, 0.12);
  border: 1px solid #198754;
}

body.layout-apple #view #tabela_pedidos tbody td .pedidos-sexo-icon.pedidos-sexo-m,
body.layout-apple #view #tabela_pedidos_wrapper .pedidos-sexo-legend-m .fa-mars {
  color: #0d6efd;
  background: rgba(13, 110, 253, 0.12);
  border: 1px solid #0d6efd;
}

body.layout-apple #view #tabela_pedidos tbody td .pedidos-sexo-icon.pedidos-sexo-f,
body.layout-apple #view #tabela_pedidos_wrapper .pedidos-sexo-legend-f .fa-venus {
  color: #d63384;
  background: rgba(214, 51, 132, 0.12);
  border: 1px solid #d63384;
}

body.layout-apple #view #tabela_pedidos tbody td .pedidos-divergencia-icon.pedidos-divergencia-pendente,
body.layout-apple #view #tabela_pedidos_wrapper .pedidos-divergencia-legend-pendente .fa-exclamation-circle {
  color: #ffc107;
  background: rgba(255, 193, 7, 0.14);
  border: 1px solid #ffc107;
}

body.layout-apple #view #tabela_pedidos tbody td .pedidos-divergencia-icon.pedidos-divergencia-liberada,
body.layout-apple #view #tabela_pedidos_wrapper .pedidos-divergencia-legend-liberada .fa-unlock {
  color: #0dcaf0;
  background: rgba(13, 202, 240, 0.12);
  border: 1px solid #0dcaf0;
}

body.layout-apple #view #tabela_pedidos tbody td .pedidos-erro-icon,
body.layout-apple #view #tabela_pedidos_wrapper .pedidos-erro-legend .fa-exclamation-triangle {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.12);
  border: 1px solid #dc3545;
}

body.layout-apple #view #tabela_pedidos_wrapper .pedidos-cpf-icons-legend,
body.layout-apple #view #tabela_pedidos_wrapper .pedidos-icons-legend {
  gap: 0.55rem 0.7rem;
  margin-left: 0.75rem;
}

body.layout-apple #view #tabela_pedidos_wrapper .pedidos-icons-legend-item,
body.layout-apple #view #tabela_pedidos_wrapper .pedidos-recorrente-legend,
body.layout-apple #view #tabela_pedidos_wrapper .pedidos-sexo-legend,
body.layout-apple #view #tabela_pedidos_wrapper .pedidos-divergencia-legend,
body.layout-apple #view #tabela_pedidos_wrapper .pedidos-erro-legend {
  color: var(--la-text-secondary);
  border-radius: 8px;
  font-weight: 500;
  padding: 0.35rem 0.75rem;
  gap: 0.45rem;
}

body.layout-apple #view #tabela_pedidos_wrapper .pedidos-recorrente-legend {
  border-color: rgba(25, 135, 84, 0.4);
  background: rgba(25, 135, 84, 0.08);
}

body.layout-apple #view #tabela_pedidos_wrapper .pedidos-sexo-legend-m {
  border-color: rgba(13, 110, 253, 0.4);
  background: rgba(13, 110, 253, 0.08);
}

body.layout-apple #view #tabela_pedidos_wrapper .pedidos-sexo-legend-f {
  border-color: rgba(214, 51, 132, 0.4);
  background: rgba(214, 51, 132, 0.08);
}

body.layout-apple #view #tabela_pedidos_wrapper .pedidos-divergencia-legend-pendente {
  border-color: rgba(255, 193, 7, 0.45);
  background: rgba(255, 193, 7, 0.1);
}

body.layout-apple #view #tabela_pedidos_wrapper .pedidos-divergencia-legend-liberada {
  border-color: rgba(13, 202, 240, 0.4);
  background: rgba(13, 202, 240, 0.08);
}

body.layout-apple #view #tabela_pedidos_wrapper .pedidos-erro-legend {
  border-color: rgba(220, 53, 69, 0.4);
  background: rgba(220, 53, 69, 0.08);
}

/* Valor — centralizado verticalmente, cobrindo as 2 linhas do nome+CPF */
body.layout-apple #view #tabela_pedidos tbody td:nth-child(9) {
  grid-column: 3;
  grid-row: 1 / span 2;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--la-text);
}

/* Pedido Id — acima do Estado (linha 1 da coluna 2, logo depois de
   Cliente/CPF), puxado via CSS puro do atributo id do <tr> (a tabela já usa
   rowId:'id' no DataTables, então cada <tr> já tem id="<pedido_id>" — não
   precisou tocar em JS pra isso). */
body.layout-apple #view #tabela_pedidos tbody tr::before {
  content: "Pedido #" attr(id);
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: start;
  font-family: var(--la-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  color: var(--la-text-tertiary);
}

/* Estado — pill neutro (sem cor semântica: o texto vem pronto do JS, CSS não
   sabe o valor pra colorir por status sem tocar no render da coluna) */
body.layout-apple #view #tabela_pedidos tbody td:nth-child(12) {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  justify-self: start;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--la-text-secondary);
  background: var(--la-bg-hover) !important;
  padding: 0.3rem 0.65rem !important;
  border-radius: 100px;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  max-width: 100%;
}

/* Criado — empilhado ACIMA de Ações na mesma coluna (igual Cliente/CPF):
   linha 1 = data, caption mono; linha 2 = ícones de ação. Antes as duas
   ficavam lado a lado espremidas na mesma largura e a data invadia os
   ícones — empilhar resolve porque cada uma passa a ter a largura toda
   da coluna só pra si. */
body.layout-apple #view #tabela_pedidos tbody td:nth-child(22) {
  grid-column: 4;
  grid-row: 1;
  align-self: end;
  font-family: var(--la-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--la-text-tertiary);
  font-size: 0.75rem;
  text-align: right;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

/* Ações — linha 2, ícones alinhados à direita. margin-top desloca os ícones
   um pouco pra baixo — Valor ocupa as 2 linhas centralizado verticalmente,
   então ícones colados no topo da linha 2 ficavam perto demais do número. */
body.layout-apple #view #tabela_pedidos tbody td:nth-child(24) {
  grid-column: 4;
  grid-row: 2;
  align-self: start;
  margin-top: 0.8rem;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 0.1rem;
  color: var(--la-text-secondary);
}

@media (max-width: 900px) {
  body.layout-apple #view #tabela_pedidos thead tr,
  body.layout-apple #view #tabela_pedidos tbody tr {
    grid-template-columns: minmax(0, 1fr) 11rem 4rem;
  }

  body.layout-apple #view #tabela_pedidos thead th:nth-child(9),
  body.layout-apple #view #tabela_pedidos tbody td:nth-child(9) {
    display: none !important;
  }

  body.layout-apple #view #tabela_pedidos thead th:nth-child(22) {
    display: none !important;
  }

  body.layout-apple #view #tabela_pedidos thead th:nth-child(24) {
    grid-column: 3;
  }

  body.layout-apple #view #tabela_pedidos tbody td:nth-child(24) {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
  }

  /* CPF (nth-child 2) continua visível — está empilhado sob o nome, não
     ocupa trilha própria, então não precisa sumir no mobile. Só Criado
     (nth-child 22) sai, já que a trilha "9rem" dele não existe mais aqui. */
  body.layout-apple #view #tabela_pedidos tbody td:nth-child(22) {
    display: none !important;
  }
}

body.layout-apple #view #view_table .panel-body {
  padding: var(--la-space-4) var(--la-space-5) !important;
}

/* Motion sutil nas pilotos */
@media (prefers-reduced-motion: no-preference) {
  body.layout-apple #view .stop-humano-metrics {
    animation: la-fade-up 0.35s ease both;
  }

  body.layout-apple #view .pedidos-metrics { animation: la-fade-up 0.3s ease both; }

  body.layout-apple #view .rg-validacao-admin .kpi-grid {
    animation: la-fade-up 0.35s ease both;
  }
}

/* -------------------------------------------------------------------------- */
/* Fase 3/4 — Modais: header tipográfico (não bloco roxo SB Admin)            */
/* -------------------------------------------------------------------------- */

/* Aba "Detalhes" do modal de pedido (forms/pedidos/cadastro_form.php) — vem
 * com display:none inline no HTML (default = escondida, cobre o layout
 * clássico, que não carrega este arquivo). Só reaparece em layout-apple. */
body.layout-apple .la-apple-only {
  display: list-item !important;
}

/* Cabeçalho do modal de pedido (avatar + nome + "Pedido #ID · CPF" + status +
 * fechar), acima das abas — padrão do protótipo (Claude Artifact a044058e,
 * ver md/redesign-apple-padrao-header-menu-modal-documentos.md, seção 2).
 * Vem com display:none inline no HTML (default = escondido, cobre o layout
 * clássico). Populado em pedidos.js (preencher_pedido_modal_head). É o
 * elemento mais acima visível do modal agora — a faixa genérica "Pedido
 * Cadastro" de modal_lg.php é escondida (ver regra :has() abaixo), então
 * ganhou padding-top maior pra funcionar como topo do modal, e o fechar
 * embutido (.pedido-modal-close) substitui o × que ficou escondido junto.
 * Sem cor semântica no badge de status: mesmo raciocínio da pill de Estado
 * na lista de Pedidos — o texto vem pronto do JS, CSS não sabe o valor pra
 * colorir por status sem tocar no render. */
body.layout-apple #pedido-modal-head {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--la-space-3);
  padding: var(--la-space-5) 0 var(--la-space-4) !important;
  margin-bottom: var(--la-space-3);
  border-bottom: 1px solid var(--la-border);
}

body.layout-apple .pedido-modal-head-id {
  display: flex;
  align-items: center;
  gap: var(--la-space-3);
  min-width: 0;
}

body.layout-apple .pedido-modal-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  flex: none;
  background: var(--la-accent-soft);
  color: var(--la-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 650;
}

body.layout-apple .pedido-modal-head-text {
  min-width: 0;
}

body.layout-apple .pedido-modal-head-text h3 {
  margin: 0;
  font-size: 1.03rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--la-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.layout-apple .pedido-modal-head-text p {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: var(--la-text-tertiary);
  font-family: var(--la-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.layout-apple .pedido-modal-head-right {
  display: flex;
  align-items: center;
  gap: var(--la-space-2);
  flex: none;
}

body.layout-apple .pedido-modal-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--la-text-secondary);
  background: var(--la-bg-hover);
  padding: 0.3rem 0.65rem;
  border-radius: 100px;
  white-space: nowrap;
}

body.layout-apple .pedido-modal-close {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: none;
  background: var(--la-bg-hover);
  color: var(--la-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background var(--la-duration-fast) var(--la-ease), color var(--la-duration-fast) var(--la-ease);
}

body.layout-apple .pedido-modal-close:hover {
  background: var(--la-bg-active);
  color: var(--la-accent);
}

/* Modal de pedido tem cabeçalho próprio (#pedido-modal-head, com fechar
 * embutido) — a faixa genérica "Pedido Cadastro" de templates/modal_lg.php
 * (compartilhada por outras telas que também usam esse template) fica
 * redundante aqui. :has() escopa a remoção só quando o form de pedido está
 * carregado dentro do modal, sem alterar modal_lg.php (usado por outras
 * features) nem o header genérico em si. */
body.layout-apple #modal_lg:has(#pedido-modal-head) .modal-header.bg-credvibes {
  display: none !important;
}

/* Aba "Documentos" do modal de pedido — rail de documentos + viewer embutido,
 * substitui o preview único (#uploadfile) só em layout-apple (padrão do
 * protótipo Claude Artifact a044058e, ver
 * md/redesign-apple-padrao-header-menu-modal-documentos.md, seção 3). O bloco
 * antigo continua 100% intacto/funcional pro layout clássico, só escondido
 * aqui. PDF usa <iframe> nativo (zoom/paginação do próprio visualizador do
 * navegador), sem toolbar customizado — decisão já registrada no doc de
 * referência. Populado em pedidos.js (renderPedidoDocumentosTab e afins). */
body.layout-apple #pedido-doc-upload-legacy {
  display: none !important;
}

body.layout-apple .doc-layout {
  display: flex;
  gap: var(--la-space-3);
  min-height: 20rem;
}

body.layout-apple .doc-rail {
  width: 11.5rem;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

body.layout-apple .doc-item {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem;
  border-radius: 9px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  font-size: 0.8rem;
  color: var(--la-text-secondary);
  transition: background var(--la-duration-fast) var(--la-ease);
}

body.layout-apple .doc-item:hover {
  background: var(--la-bg-hover);
}

body.layout-apple .doc-item.active {
  background: var(--la-accent-soft);
  color: var(--la-accent);
}

body.layout-apple .doc-item-icon {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 7px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--la-bg-hover);
  color: var(--la-text-tertiary);
  font-size: 0.8rem;
}

body.layout-apple .doc-item.active .doc-item-icon {
  background: var(--la-bg-elevated);
  color: var(--la-accent);
}

body.layout-apple .doc-item-text {
  flex: 1;
  min-width: 0;
}

body.layout-apple .doc-item-text .label {
  font-size: 0.73rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.layout-apple .doc-item-text .status {
  font-size: 0.66rem;
  margin-top: 0.05rem;
}

body.layout-apple .doc-item-text .status.bad {
  color: var(--la-danger);
}

body.layout-apple .doc-item-text .status.ok {
  color: var(--la-success-fill);
}

body.layout-apple .doc-item-text .status.warn {
  color: var(--la-warning-fill);
}

body.layout-apple .doc-viewer {
  flex: 1;
  min-width: 0;
  background: var(--la-bg);
  border: 1px solid var(--la-border);
  border-radius: var(--la-radius-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.layout-apple .doc-viewer-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--la-text-tertiary);
  font-size: 0.85rem;
  padding: var(--la-space-5);
  text-align: center;
}

body.layout-apple .doc-viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--la-border);
}

body.layout-apple .doc-viewer-head .title {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--la-text);
}

body.layout-apple .doc-viewer-head .caption {
  font-size: 0.68rem;
  color: var(--la-text-tertiary);
  margin-top: 0.05rem;
}

body.layout-apple .doc-viewer-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--la-space-3);
  overflow: auto;
  min-height: 16rem;
}

body.layout-apple .doc-viewer-stage img {
  max-width: 100%;
  max-height: 16rem;
  border-radius: 6px;
  box-shadow: var(--la-shadow-card);
  cursor: zoom-in;
}

body.layout-apple .doc-viewer-stage iframe {
  width: 100%;
  height: 100%;
  min-height: 16rem;
  border: none;
  border-radius: 6px;
  background: #fff;
}

body.layout-apple .doc-viewer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  border-top: 1px solid var(--la-border);
  font-size: 0.7rem;
  color: var(--la-text-tertiary);
}

body.layout-apple .doc-viewer-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

body.layout-apple #pedido_doc_lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.72);
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
}

body.layout-apple #pedido_doc_lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}

body.layout-apple #pedido_doc_lightbox_close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.layout-apple #pedido_doc_lightbox_close:hover {
  background: rgba(255, 255, 255, 0.24);
}

@media (max-width: 660px) {
  body.layout-apple .doc-layout {
    flex-direction: column;
  }

  body.layout-apple .doc-rail {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
  }

  body.layout-apple .doc-item {
    flex: none;
    width: auto;
  }

  body.layout-apple .doc-item-text .label {
    max-width: 6.5rem;
  }
}

body.layout-apple .modal-header.bg-credvibes,
body.layout-apple .modal-header.bg-gradient-credvibes {
  background: var(--la-bg-elevated) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--la-border) !important;
  padding: 1rem 1.35rem !important;
}

body.layout-apple .modal-header.bg-credvibes .modal-title,
body.layout-apple .modal-header.bg-credvibes .text-white,
body.layout-apple .modal-header.bg-gradient-credvibes .modal-title,
body.layout-apple .modal-header.bg-gradient-credvibes .text-white {
  color: var(--la-text) !important;
  font-weight: 650;
  letter-spacing: -0.03em;
  font-size: 1.05rem;
}

body.layout-apple .modal-header.bg-credvibes .close,
body.layout-apple .modal-header.bg-gradient-credvibes .close {
  color: var(--la-text) !important;
  opacity: 0.5;
  text-shadow: none;
}

body.layout-apple .modal-header.bg-credvibes .close:hover,
body.layout-apple .modal-header.bg-gradient-credvibes .close:hover {
  opacity: 0.85;
}

body.layout-apple .modal-header.bg-credvibes .close span,
body.layout-apple .modal-header.bg-gradient-credvibes .close span {
  color: inherit;
}

/* Modal 90 — respiração */
body.layout-apple #modal_90 .modal-body.p-0 {
  padding: 0 !important;
}

body.layout-apple #modal_90 .modal-content {
  border-radius: var(--la-radius-sheet);
  overflow: hidden;
}

/* Cards dentro de #modal_90 (ex.: abas Aceitar/Recusar e SCR do Stop Humano) —
   não existia nenhum .card base fora de #content/#view, então ficavam sem
   skin apple (Entregável 3). */
body.layout-apple #modal_90 .card {
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-card) !important;
  box-shadow: none !important;
  background: var(--la-bg-elevated);
}

body.layout-apple #modal_90 .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--la-border) !important;
  padding: var(--la-space-4) var(--la-space-5) !important;
  font-weight: 600;
  color: var(--la-text);
}

body.layout-apple #modal_90 .card-body {
  padding: var(--la-space-5) !important;
}

/* Rótulo/valor em linha — usados nos blocos de análise do Stop Humano
   (Tipo Persona, Nota de Crédito, Risco de Crédito, Recomendação Final etc.),
   substitui style="font-weight:bold" / style="font-size:0.8rem" inline. */
body.layout-apple .la-inline-field-label {
  font-weight: 650;
  font-size: 0.8125rem;
  color: var(--la-text-secondary);
  letter-spacing: -0.01em;
}

body.layout-apple .la-inline-field-value {
  font-size: 0.8125rem;
  color: var(--la-text);
}

/* Divergência (Stop Humano) — antes color:red inline, agora dark-mode-safe */
body.layout-apple .la-divergence-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--la-danger-fill);
}

body.layout-apple .la-divergence-alert {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  color: var(--la-danger-fill);
}

/* -------------------------------------------------------------------------- */
/* Fase 4 — Pedidos console (CSS-only; sem pedidos.js)                        */
/* -------------------------------------------------------------------------- */

/* Ampliar dialog quando o console (left/right) está presente */
body.layout-apple #modal_lg:has(#left-div) .modal-dialog,
body.layout-apple #modal_lg:has(#right-div) .modal-dialog {
  max-width: min(96vw, 1180px);
  width: 96%;
}

body.layout-apple #modal_lg #modal_body.p-0,
body.layout-apple #modal_lg .modal-body.p-0 {
  padding: 0 !important;
  background: var(--la-bg);
}

body.layout-apple #modal_lg #modal_body > .text-center,
body.layout-apple #modal_lg .modal-body > div.text-center {
  display: flex !important;
  width: 100% !important;
  min-height: min(72vh, 640px);
  text-align: left !important;
  background: var(--la-bg);
}

body.layout-apple #modal_lg #left-div {
  flex: 1 1 68% !important;
  padding: var(--la-space-5) var(--la-space-6) !important;
  background: var(--la-bg-elevated) !important;
  border-right: 1px solid var(--la-border);
  overflow: auto;
  max-height: min(78vh, 720px);
}

body.layout-apple #modal_lg #right-div {
  flex: 0 0 32% !important;
  max-width: 320px;
  padding: var(--la-space-5) var(--la-space-4) !important;
  background: var(--la-bg) !important;
  overflow: auto;
  max-height: min(78vh, 720px);
}

/* Timeline de steps do console */
body.layout-apple #modal_lg #right-div > section,
body.layout-apple #modal_lg #right-div section {
  display: grid !important;
  grid-template-columns: 48px 1fr !important;
  gap: 0 0.35rem;
  width: 100% !important;
  margin: 0 !important;
  padding: var(--la-space-3) !important;
  border-radius: var(--la-radius-card) !important;
  background: var(--la-bg-elevated) !important;
  border: 1px solid var(--la-border);
  font-family: var(--la-font);
}

body.layout-apple #modal_lg #right-div section .ml-1,
body.layout-apple #modal_lg #right-div section [style*="color: #613ab5"],
body.layout-apple #modal_lg #right-div section [style*="color:#613ab5"] {
  color: var(--la-text) !important;
  font-size: 0.8125rem !important;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  padding-top: 0.35rem;
}

body.layout-apple #modal_lg #right-div section [id^="data_"] {
  color: var(--la-text-tertiary) !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  margin-top: 0.15rem;
}

body.layout-apple #modal_lg #right-div .espacador {
  min-height: 14px !important;
}

body.layout-apple #modal_lg #left-div .form-group,
body.layout-apple #modal_lg #left-div label {
  font-family: var(--la-font);
}

body.layout-apple #modal_lg #left-div h5,
body.layout-apple #modal_lg #left-div h4,
body.layout-apple #modal_lg #left-div .h5 {
  letter-spacing: -0.03em;
  font-weight: 650;
  color: var(--la-text);
}

@media (max-width: 991.98px) {
  body.layout-apple #modal_lg:has(#left-div) .modal-dialog {
    max-width: 96vw;
  }

  body.layout-apple #modal_lg #modal_body > .text-center,
  body.layout-apple #modal_lg .modal-body > div.text-center {
    flex-direction: column !important;
    min-height: 0;
  }

  body.layout-apple #modal_lg #left-div {
    flex: 1 1 auto !important;
    max-height: 55vh;
    border-right: none;
    border-bottom: 1px solid var(--la-border);
  }

  body.layout-apple #modal_lg #right-div {
    flex: 1 1 auto !important;
    max-width: none;
    max-height: 35vh;
  }
}

/* ==========================================================================
 * Pedidos — Pesquisa Avançada (SearchBuilder) + barra de botões
 * (2026-08-10, pedido do usuário). Antes só o container e o botão genérico
 * do SearchBuilder tinham skin (regra ~2465 acima, ainda vale pras outras 31
 * telas com o mesmo dom:'QRBfrtip' — não mexi nela); as condições montadas
 * e o "Adicionar Condição" usavam o visual cru do vendor DataTables, e a
 * barra de botões vinha com roxo/verde/azul hardcoded de pedidos-
 * enhancements.css / datatables-enhancements.css (não-condicionais, então
 * não dá pra editar direto — só sobrescrever aqui com mais especificidade).
 * Escopado só a #tabela_pedidos_wrapper por decisão do usuário.
 * ========================================================================== */

/* --- Painel "Pesquisa Avançada" --- */
/* Painel — MOLDURA REMOVIDA (2026-08-10, 3ª tentativa). A borda/fundo/
   padding customizados que eu tinha colocado (virando um "card") reduziam
   o espaço interno disponível pra .dtsb-group, e o conector "E"/"OU"
   (posicionado com `position:absolute` + `rotate(90deg)`, calculado pelo
   vendor a partir desse espaço) ficava espremido/cortado contra a borda.
   Voltando ao espaçamento bem mais próximo do original — só um separador
   sutil embaixo, sem caixa fechada ao redor — deixa o vendor calcular a
   posição do conector com a folga que ele espera. */
body.layout-apple #view #tabela_pedidos_wrapper .dtsb-searchBuilder {
  border: none !important;
  border-bottom: 1px solid var(--la-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 0 var(--la-space-3) !important;
  margin-bottom: var(--la-space-3) !important;
}

/*
 * Histórico do conector "E"/"OU" (.dtsb-logic/.dtsb-logicContainer), pra
 * quem mexer aqui de novo: o vendor usa `position:absolute` + `rotate(90deg)`
 * sem "left" definido (depende do espaço sobrando à esquerda das condições).
 * Tentativas 1-2 (reset amplo, depois um "pill" com borda/fundo próprios)
 * brigaram com esse cálculo. Tentativa 3 (reservar padding-left no
 * .dtsb-group) também não resolveu. A solução que funcionou (tentativa 5,
 * ver .dtsb-logicContainer mais abaixo) foi tirar o elemento do esquema
 * absolute/rotate por completo — position:static, sem transform.
 */

body.layout-apple #view #tabela_pedidos_wrapper .dtsb-title {
  font-family: var(--la-font) !important;
  font-weight: 650 !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  color: var(--la-text-tertiary) !important;
}

body.layout-apple #view #tabela_pedidos_wrapper .dtsb-titleRow {
  margin-bottom: var(--la-space-1) !important;
  min-height: 0 !important;
}

/* Grupo de condições — sem caixa própria (o card externo já basta). Não
   precisa mais de respiro reservado à esquerda pro conector "E"/"OU" —
   ele saiu do esquema position:absolute (ver .dtsb-logicContainer abaixo,
   5ª tentativa: tirei do posicionamento calculado em vez de tentar
   compensar). */
body.layout-apple #view #tabela_pedidos_wrapper .dtsb-group {
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Conector "E"/"OU" — tirado do position:absolute + rotate(90deg) do vendor
   (4 tentativas de compensar esse posicionamento calculado não resolveram;
   ficava escondido/cortado). Agora ocupa espaço normal no fluxo, como uma
   pill horizontal pequena antes das condições — garante que apareça, mesmo
   que o encaixe visual não fique idêntico ao desenho original do vendor. */
body.layout-apple #view #tabela_pedidos_wrapper .dtsb-logicContainer {
  position: static !important;
  transform: none !important;
  -webkit-transform: none !important;
  display: inline-flex !important;
  margin: 0 0 var(--la-space-2) !important;
}

body.layout-apple #view #tabela_pedidos_wrapper .dtsb-logic {
  border-radius: var(--la-radius-control) !important;
  border: 1px solid var(--la-border-strong) !important;
  background: var(--la-bg-elevated) !important;
  color: var(--la-accent) !important;
  font-weight: 650 !important;
  padding: 0.25rem 0.6rem !important;
  font-size: 0.75rem !important;
}

/* Uma condição montada (campo / comparador / valor) — mesmos tokens de
   .form-control já usados no resto do sistema */
body.layout-apple #view #tabela_pedidos_wrapper .dtsb-criteria {
  gap: var(--la-space-2) !important;
}

body.layout-apple #view #tabela_pedidos_wrapper .dtsb-data,
body.layout-apple #view #tabela_pedidos_wrapper .dtsb-value select,
body.layout-apple #view #tabela_pedidos_wrapper .dtsb-value input,
body.layout-apple #view #tabela_pedidos_wrapper .dtsb-condition {
  border-radius: var(--la-radius-control) !important;
  border: 1px solid var(--la-border-strong) !important;
  background: var(--la-bg-elevated) !important;
  color: var(--la-text) !important;
  font-family: var(--la-font) !important;
  font-size: 0.8125rem !important;
  min-height: var(--la-control-height) !important;
}

body.layout-apple #view #tabela_pedidos_wrapper .dtsb-data:focus,
body.layout-apple #view #tabela_pedidos_wrapper .dtsb-value select:focus,
body.layout-apple #view #tabela_pedidos_wrapper .dtsb-value input:focus,
body.layout-apple #view #tabela_pedidos_wrapper .dtsb-condition:focus {
  border-color: var(--la-accent) !important;
  box-shadow: var(--la-focus-ring) !important;
  outline: none;
}

/* Adicionar Condição — CTA em tom accent-soft (não é a ação primária da
   tela — essa é "Novo Pedido" — mas precisa se destacar dos utilitários) */
body.layout-apple #view #tabela_pedidos_wrapper .dtsb-add {
  border-radius: var(--la-radius-control) !important;
  border: 1px solid var(--la-accent-border) !important;
  background: var(--la-accent-soft) !important;
  color: var(--la-accent) !important;
  font-weight: 650 !important;
  font-family: var(--la-font) !important;
  padding: 0.3rem 0.7rem !important;
  font-size: 0.75rem !important;
}

body.layout-apple #view #tabela_pedidos_wrapper .dtsb-add:hover {
  background: var(--la-accent-soft-hover) !important;
  border-color: var(--la-accent) !important;
}

/* Remover condição / limpar tudo — ghost, tom de perigo só no hover */
body.layout-apple #view #tabela_pedidos_wrapper .dtsb-delete,
body.layout-apple #view #tabela_pedidos_wrapper .dtsb-clearGroup,
body.layout-apple #view #tabela_pedidos_wrapper .dtsb-clearAll {
  border-radius: var(--la-radius-control) !important;
  border: 1px solid var(--la-border) !important;
  background: var(--la-bg-elevated) !important;
  color: var(--la-text-tertiary) !important;
}

body.layout-apple #view #tabela_pedidos_wrapper .dtsb-delete:hover,
body.layout-apple #view #tabela_pedidos_wrapper .dtsb-clearGroup:hover,
body.layout-apple #view #tabela_pedidos_wrapper .dtsb-clearAll:hover {
  border-color: var(--la-danger) !important;
  color: var(--la-danger-fill) !important;
  background: var(--la-danger-soft) !important;
}

/* Colunas Visibilidade — já suprimida na origem em pedidos.js (o próprio
   array de buttons passa "" no lugar do botão quando body.layout-apple),
   então não sobra nenhum botão nessa posição pra esconder aqui. (Havia uma
   regra nth-child(2) aqui antes tentando esconder por posição, mas como o
   ""  não ocupa slot no DOM renderizado, ela acabava escondendo o botão
   seguinte — Exportar — por engano. Removida.) */

/* --- Barra de botões (Mostrar registros / Exportar / Filtros / Novo
   Pedido) --- */
body.layout-apple #view #tabela_pedidos_wrapper .dt-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--la-space-2) !important;
  align-items: center !important;
  width: auto !important;
  float: none !important;
}

/* Legenda de ícones: ocupa a linha seguinte se a barra apertar, sem grudar nos botões */
body.layout-apple #view #tabela_pedidos_wrapper .dt-buttons .pedidos-icons-legend {
  flex: 1 1 14rem;
  min-width: min(100%, 14rem);
}

body.layout-apple #view #tabela_pedidos_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_pedidos_wrapper .dt-buttons button.dt-button {
  flex: 0 0 auto !important;
  width: auto !important;
  border-radius: var(--la-radius-control) !important;
  border: 1px solid var(--la-border-strong) !important;
  background: var(--la-bg-elevated) !important;
  color: var(--la-text-secondary) !important;
  font-family: var(--la-font) !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  letter-spacing: -0.01em;
  box-shadow: none !important;
  padding: 0.45rem 0.9rem !important;
}

body.layout-apple #view #tabela_pedidos_wrapper .dt-buttons .btn:hover,
body.layout-apple #view #tabela_pedidos_wrapper .dt-buttons button.dt-button:hover {
  background: var(--la-bg-hover) !important;
  color: var(--la-text) !important;
  border-color: var(--la-border-strong) !important;
}

/* Novo Pedido — única ação primária/CTA da barra (o resto é utilitário) */
body.layout-apple #view #tabela_pedidos_wrapper .dt-buttons .btn.btn-credvibes,
body.layout-apple #view #tabela_pedidos_wrapper .dt-buttons button.btn-credvibes {
  flex: 0 0 auto !important;
  width: auto !important;
  background: var(--la-accent) !important;
  border-color: var(--la-accent) !important;
  color: #fff !important;
}

body.layout-apple #view #tabela_pedidos_wrapper .dt-buttons .btn.btn-credvibes:hover,
body.layout-apple #view #tabela_pedidos_wrapper .dt-buttons button.btn-credvibes:hover {
  background: var(--la-accent-hover) !important;
  border-color: var(--la-accent-hover) !important;
}

/* Painel dropdown (Colunas Visibilidade / Exportar / Filtros) — popover */
body.layout-apple #view #tabela_pedidos_wrapper .dt-button-collection {
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-card) !important;
  box-shadow: var(--la-shadow-popover) !important;
  background: var(--la-bg-elevated) !important;
  padding: 0.4rem !important;
}

body.layout-apple #view #tabela_pedidos_wrapper .dt-button-collection .dt-button,
body.layout-apple #view #tabela_pedidos_wrapper .dt-button-collection button.dt-button {
  border: none !important;
  border-radius: var(--la-radius-control) !important;
  background: transparent !important;
  color: var(--la-text-secondary) !important;
  text-align: left !important;
  width: 100% !important;
  padding: 0.5rem 0.7rem !important;
}

body.layout-apple #view #tabela_pedidos_wrapper .dt-button-collection .dt-button:hover,
body.layout-apple #view #tabela_pedidos_wrapper .dt-button-collection button.dt-button:hover {
  background: var(--la-bg-hover) !important;
  color: var(--la-text) !important;
}

body.layout-apple #view #tabela_pedidos_wrapper .dt-button-collection .dt-button.active,
body.layout-apple #view #tabela_pedidos_wrapper .dt-button-collection button.dt-button.active {
  background: var(--la-accent-soft) !important;
  color: var(--la-accent) !important;
}

/* --- Pesquisar — campo compacto com ícone (CSS puro, sem trocar FontAwesome
   por outra lib), em vez de label empilhado sobre o input --- */
body.layout-apple #view #tabela_pedidos_wrapper .dataTables_filter {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  margin: var(--la-space-2) 0 0 !important;
}

body.layout-apple #view #tabela_pedidos_wrapper .dataTables_filter label {
  display: flex !important;
  align-items: center !important;
  gap: 0;
  margin: 0 !important;
  position: relative;
  font-size: 0 !important;
}

body.layout-apple #view #tabela_pedidos_wrapper .dataTables_filter input {
  border-radius: 999px !important;
  border: 1px solid var(--la-border-strong) !important;
  background: var(--la-bg) !important;
  margin: 0 !important;
  padding: 0.4rem 0.9rem 0.4rem 2.1rem !important;
  min-width: 14rem;
  font-family: var(--la-font) !important;
  font-size: 0.8125rem !important;
}

body.layout-apple #view #tabela_pedidos_wrapper .dataTables_filter input:focus {
  border-color: var(--la-accent) !important;
  box-shadow: var(--la-focus-ring) !important;
  background: var(--la-bg-elevated) !important;
  outline: none;
}

body.layout-apple #view #tabela_pedidos_wrapper .dataTables_filter label::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  width: 0.8rem;
  height: 0.8rem;
  transform: translateY(-50%);
  border: 1.5px solid var(--la-text-tertiary);
  border-radius: 50%;
  pointer-events: none;
}

body.layout-apple #view #tabela_pedidos_wrapper .dataTables_filter label::after {
  content: "";
  position: absolute;
  left: 1.45rem;
  top: 63%;
  width: 0.4rem;
  height: 1.5px;
  background: var(--la-text-tertiary);
  transform: rotate(45deg);
  pointer-events: none;
}

/* -------------------------------------------------------------------------- */
/* Fase 4 — Cliente (lista Clientes Únicos + detalhe cli_cliente)             */
/* -------------------------------------------------------------------------- */

/* Lista Clientes Únicos */
body.layout-apple #view #tabela_clientesunicos {
  border: none !important;
}

body.layout-apple #view #tabela_clientesunicos thead th {
  background: var(--la-bg) !important;
  background-image: none !important;
  color: var(--la-text-tertiary) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.04em !important;
  padding: 0.8rem 0.65rem !important;
}

body.layout-apple #view #tabela_clientesunicos tbody td {
  padding: 0.75rem 0.65rem !important;
  font-size: 0.8125rem;
  vertical-align: middle;
}

/* Detalhe Cliente — hero tipográfico */
body.layout-apple #view #profileTab ~ .tab-content,
body.layout-apple #view .container-fluid > h2.mb-4 {
  font-family: var(--la-font);
}

body.layout-apple #view > .container-fluid > h2.mb-4,
body.layout-apple #view .container-fluid > h2.mb-4 {
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--la-text);
  margin-bottom: var(--la-space-4) !important;
  padding-bottom: var(--la-space-3);
  border-bottom: 1px solid var(--la-border);
}

body.layout-apple #view .container-fluid > h2.mb-4 .cpf {
  color: var(--la-text-tertiary);
  font-weight: 500;
  font-size: 0.85em;
  letter-spacing: -0.02em;
}

/* Tabs Cliente — underline Apple */
body.layout-apple #view #profileTab.nav-tabs {
  border-bottom: 1px solid var(--la-border);
  gap: 0.15rem;
  flex-wrap: wrap;
  margin-bottom: 0;
}

body.layout-apple #view #profileTab.nav-tabs .nav-link {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--la-text-secondary);
  font-size: 0.8125rem;
  font-weight: 550;
  letter-spacing: -0.015em;
  padding: 0.65rem 0.85rem;
  margin-bottom: -1px;
  background: transparent !important;
}

body.layout-apple #view #profileTab.nav-tabs .nav-link:hover {
  color: var(--la-text);
  border-bottom-color: var(--la-border-strong) !important;
}

body.layout-apple #view #profileTab.nav-tabs .nav-link.active {
  color: var(--la-accent) !important;
  font-weight: 650;
  border-bottom-color: var(--la-accent) !important;
  background: transparent !important;
}

body.layout-apple #view #myTabContent {
  padding-top: var(--la-space-4);
}

body.layout-apple #view #myTabContent > .tab-pane > .row > .card.shadow.col-md-12,
body.layout-apple #view #resumo > .row > .card.shadow {
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-card) !important;
  box-shadow: none !important;
  background: var(--la-bg-elevated) !important;
  padding: var(--la-space-3) var(--la-space-2);
}

/* Seções de info — títulos tipográficos (não barra roxa) */
body.layout-apple #view .info-area-title {
  background: transparent !important;
  color: var(--la-text) !important;
  font-size: 0.8125rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.025em !important;
  text-transform: none;
  padding: 0.4rem 0 0.55rem !important;
  margin-bottom: 0.75rem !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--la-border);
}

body.layout-apple #view .area-secao {
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-md) !important;
  background: var(--la-bg) !important;
  margin-bottom: var(--la-space-3) !important;
  padding: var(--la-space-3) var(--la-space-3) var(--la-space-2) !important;
}

body.layout-apple #view .info-label {
  color: var(--la-text-tertiary) !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 0.3rem !important;
}

body.layout-apple #view .info-data {
  background: var(--la-bg-elevated) !important;
  color: var(--la-text) !important;
  border: 1px solid var(--la-border);
  border-radius: var(--la-radius-sm) !important;
  padding: 0.45rem 0.65rem !important;
  font-size: 0.8125rem !important;
  letter-spacing: -0.015em;
  text-transform: none !important;
}

body.layout-apple #view .info-data.validado {
  background: rgba(28, 200, 138, 0.12) !important;
  border-color: rgba(28, 200, 138, 0.28);
}

body.layout-apple #view .info-section {
  padding: 0 0.5rem 0.65rem !important;
  margin-bottom: 0 !important;
}

/* Cards destaque — tipografia; cores semânticas do JS preservadas */
body.layout-apple #view #destaques .card {
  border-radius: var(--la-radius-md) !important;
  box-shadow: none !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

body.layout-apple #view #destaques .card .card-body {
  padding: var(--la-space-4) !important;
  text-align: left !important;
}

body.layout-apple #view #destaques .title {
  display: block;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.35rem;
}

body.layout-apple #view #destaques .data {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em;
  line-height: 1.2;
}

body.layout-apple #view #destaques .icon {
  opacity: 0.25 !important;
  font-size: 1rem !important;
}

body.layout-apple #view #dados_cliente .card {
  box-shadow: none !important;
  border-radius: var(--la-radius-md);
}

body.layout-apple #view #dados_cliente .card:not(.text-white) {
  background: var(--la-bg) !important;
  border: 1px solid var(--la-border);
}

body.layout-apple #view #demais_dados .card {
  border-radius: var(--la-radius-md);
  box-shadow: none !important;
  border: 1px solid var(--la-border);
  background: var(--la-bg-elevated);
}

body.layout-apple #view #demais_dados .title {
  color: var(--la-text-tertiary) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.04em;
  font-weight: 600 !important;
}

/* -------------------------------------------------------------------------- */
/* Fase 4 — RG Validação (view admin)                                         */
/* -------------------------------------------------------------------------- */

body.layout-apple #view .rg-validacao-admin,
body.layout-apple #modal_90 .rg-validacao-admin {
  font-family: var(--la-font) !important;
  color: var(--la-text);
  letter-spacing: -0.011em;
  /*
   * Neutraliza Inter / indigo do rg_validacao.css no modo apple remapeando os
   * tokens internos DELE (--accent, --bg-primary, --radius etc., consumidos
   * pelas 2911 linhas do stylesheet base) pros nossos. Antes vários valores
   * estavam hardcoded em hex/rgba — não reagiam ao dark mode; corrigido pra
   * var(--la-*) em tudo. Esse mesmo bloco também vale dentro do modal do
   * Stop Humano (aba "Detalhe do cliente" reaproveita .rg-validacao-admin).
   */
  --accent: var(--la-accent);
  --accent-light: var(--la-accent-hover);
  --accent-subtle: var(--la-accent-soft);
  --accent-glow: var(--la-accent-soft-hover);
  --bg-primary: var(--la-bg);
  --bg-secondary: var(--la-bg-elevated);
  --bg-card: var(--la-bg-elevated);
  --bg-card-hover: var(--la-bg-hover);
  --bg-input: var(--la-bg);
  --border: var(--la-border);
  --border-light: var(--la-border);
  --text-primary: var(--la-text);
  --text-secondary: var(--la-text-secondary);
  --text-muted: var(--la-text-tertiary);
  --radius: var(--la-radius-card);
  --radius-sm: var(--la-radius-control);
  --shadow: none;
  --shadow-lg: var(--la-shadow-card);
  --shadow-xl: var(--la-shadow-popover);
  --green: var(--la-success-fill);
  --green-bg: var(--la-success-soft);
}

body.layout-apple #view .rg-validacao-admin .search-box {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--la-bg-elevated);
  border: 1px solid var(--la-border);
  border-radius: var(--la-radius-control);
  padding: 0.55rem 1rem;
  margin-bottom: var(--la-space-4) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.layout-apple #view .rg-validacao-admin .search-box:focus-within {
  border-color: var(--la-accent);
  box-shadow: var(--la-focus-ring);
}

body.layout-apple #view .rg-validacao-admin .search-box i {
  color: var(--la-text-tertiary);
  font-size: 0.85rem;
}

body.layout-apple #view .rg-validacao-admin .search-box .form-control {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0.25rem 0 !important;
  height: auto !important;
  font-size: 0.9375rem;
}

body.layout-apple #view .rg-validacao-admin .kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--la-space-3);
  margin-bottom: var(--la-space-4) !important;
}

body.layout-apple #view .rg-validacao-admin .kpi-card {
  background: var(--la-bg-elevated) !important;
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-card) !important;
  padding: var(--la-space-4) !important;
  box-shadow: none !important;
  gap: 0.2rem;
}

body.layout-apple #view .rg-validacao-admin .kpi-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--la-shadow-card) !important;
  border-color: var(--la-border-strong) !important;
}

body.layout-apple #view .rg-validacao-admin .kpi-card::before {
  height: 2px !important;
  border-radius: var(--la-radius-card) var(--la-radius-card) 0 0;
}

body.layout-apple #view .rg-validacao-admin .kpi-card.kpi-total::before {
  background: var(--la-accent) !important;
}

body.layout-apple #view .rg-validacao-admin .kpi-label {
  font-size: 0.65rem !important;
  letter-spacing: 0.05em !important;
  color: var(--la-text-tertiary) !important;
}

body.layout-apple #view .rg-validacao-admin .kpi-value {
  font-size: 1.65rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em;
  line-height: 1.15;
}

body.layout-apple #view .rg-validacao-admin .kpi-card.kpi-total .kpi-value {
  color: var(--la-accent) !important;
}

body.layout-apple #view .rg-validacao-admin .kpi-sub {
  font-size: 0.65rem;
  color: var(--la-text-tertiary);
}

/* Filters — chips retangulares (menos pill) */
body.layout-apple #view .rg-validacao-admin .filters-bar {
  gap: 0.5rem;
  margin-bottom: var(--la-space-4) !important;
  padding-bottom: var(--la-space-3);
  border-bottom: 1px solid var(--la-border);
}

body.layout-apple #view .rg-validacao-admin .filter-btn {
  border-radius: var(--la-radius-control) !important;
  border: 1px solid var(--la-border) !important;
  background: var(--la-bg-elevated) !important;
  color: var(--la-text-secondary) !important;
  font-size: 0.75rem !important;
  font-weight: 550 !important;
  letter-spacing: -0.01em;
  padding: 0.4rem 0.75rem !important;
  font-family: var(--la-font) !important;
}

body.layout-apple #view .rg-validacao-admin .filter-btn:hover {
  border-color: var(--la-border-strong) !important;
  color: var(--la-text) !important;
}

body.layout-apple #view .rg-validacao-admin .filter-btn.active {
  background: var(--la-accent-soft) !important;
  border-color: var(--la-accent) !important;
  color: var(--la-accent) !important;
  font-weight: 650 !important;
}

body.layout-apple #view .rg-validacao-admin .filter-btn .count {
  border-radius: var(--la-radius-control) !important;
  background: var(--la-bg) !important;
  font-size: 0.65rem !important;
}

body.layout-apple #view .rg-validacao-admin .filter-btn.active .count {
  background: var(--la-accent-soft-hover) !important;
  color: var(--la-accent);
}

body.layout-apple #view .rg-validacao-admin .table-container {
  background: var(--la-bg-elevated) !important;
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-card) !important;
  box-shadow: none !important;
  overflow: hidden;
}

body.layout-apple #view .rg-validacao-admin .data-table thead th {
  background: var(--la-bg) !important;
  color: var(--la-text-tertiary) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.04em !important;
  padding: 0.85rem 1rem !important;
  border-bottom: 1px solid var(--la-border) !important;
}

body.layout-apple #view .rg-validacao-admin .data-table thead th.sorted .sort-icon {
  color: var(--la-accent) !important;
}

body.layout-apple #view .rg-validacao-admin .data-table tbody tr:hover {
  background: var(--la-bg-hover) !important;
}

body.layout-apple #view .rg-validacao-admin .data-table td {
  padding: 0.8rem 1rem !important;
  font-size: 0.8125rem;
  border-bottom-color: var(--la-border) !important;
}

body.layout-apple #view .rg-validacao-admin .pagination {
  padding: var(--la-space-3) var(--la-space-4);
  font-size: 0.8125rem;
  color: var(--la-text-secondary);
}

/* Detalhe RG — também usado dentro do modal do Stop Humano (#modal_90), que
   reaproveita .rg-validacao-admin na aba "Detalhe do cliente" (Entregável 3) */
body.layout-apple #view .rg-validacao-admin .client-header,
body.layout-apple #modal_90 .rg-validacao-admin .client-header {
  margin-bottom: var(--la-space-4) !important;
  padding-bottom: var(--la-space-3);
  border-bottom: 1px solid var(--la-border);
}

body.layout-apple #view .rg-validacao-admin .client-name,
body.layout-apple #modal_90 .rg-validacao-admin .client-name {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em;
  color: var(--la-text) !important;
}

body.layout-apple #view .rg-validacao-admin .client-meta,
body.layout-apple #modal_90 .rg-validacao-admin .client-meta {
  color: var(--la-text-secondary) !important;
  font-size: 0.8125rem;
  gap: 1.1rem !important;
}

body.layout-apple #view .rg-validacao-admin .session-info-bar,
body.layout-apple #modal_90 .rg-validacao-admin .session-info-bar {
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-card) !important;
  box-shadow: none !important;
  margin-bottom: var(--la-space-4) !important;
  background: var(--la-bg-elevated) !important;
}

body.layout-apple #view .rg-validacao-admin .summary-cards,
body.layout-apple #modal_90 .rg-validacao-admin .summary-cards {
  gap: 0.65rem;
  margin-bottom: var(--la-space-4) !important;
}

body.layout-apple #view .rg-validacao-admin .summary-card,
body.layout-apple #modal_90 .rg-validacao-admin .summary-card {
  border-radius: var(--la-radius-card) !important;
  border: 1px solid var(--la-border) !important;
  box-shadow: none !important;
  background: var(--la-bg-elevated) !important;
  padding: 0.85rem 1rem !important;
}

body.layout-apple #view .rg-validacao-admin .summary-card::before,
body.layout-apple #modal_90 .rg-validacao-admin .summary-card::before {
  height: 2px !important;
}

body.layout-apple #view .rg-validacao-admin .validation-grid,
body.layout-apple #modal_90 .rg-validacao-admin .validation-grid {
  gap: var(--la-space-3) !important;
  margin-bottom: var(--la-space-5) !important;
}

body.layout-apple #view .rg-validacao-admin .val-column,
body.layout-apple #modal_90 .rg-validacao-admin .val-column {
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-card) !important;
  background: var(--la-bg-elevated) !important;
  overflow: hidden;
}

body.layout-apple #view .rg-validacao-admin .val-col-header,
body.layout-apple #modal_90 .rg-validacao-admin .val-col-header {
  background: var(--la-bg) !important;
  border-bottom: 1px solid var(--la-border) !important;
  color: var(--la-text) !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em;
  font-size: 0.875rem !important;
  padding: 0.85rem 1rem !important;
}

body.layout-apple #view .rg-validacao-admin .val-col-header i,
body.layout-apple #modal_90 .rg-validacao-admin .val-col-header i {
  color: var(--la-accent) !important;
}

body.layout-apple #view .rg-validacao-admin .support-accordion,
body.layout-apple #modal_90 .rg-validacao-admin .support-accordion {
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-card) !important;
  background: var(--la-bg-elevated) !important;
  margin-bottom: var(--la-space-2);
}

body.layout-apple #view .rg-validacao-admin .support-accordion summary,
body.layout-apple #modal_90 .rg-validacao-admin .support-accordion summary {
  background: transparent !important;
  color: var(--la-text) !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em;
  padding: 0.85rem 1rem !important;
}

body.layout-apple #view .rg-validacao-admin .support-accordion summary:hover,
body.layout-apple #modal_90 .rg-validacao-admin .support-accordion summary:hover {
  background: var(--la-bg-hover) !important;
}

body.layout-apple #view .rg-validacao-admin .support-accordion summary i,
body.layout-apple #modal_90 .rg-validacao-admin .support-accordion summary i {
  color: var(--la-text-tertiary);
}

body.layout-apple #view .rg-validacao-admin .acc-badge,
body.layout-apple #modal_90 .rg-validacao-admin .acc-badge {
  background: var(--la-accent) !important;
}

body.layout-apple #view .rg-validacao-admin .btn-secondary.btn-sm {
  border-radius: var(--la-radius-control);
}

@media (max-width: 1199.98px) {
  body.layout-apple #view .rg-validacao-admin .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  body.layout-apple #view .rg-validacao-admin .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------------------- */
/* Fase 2 residual — shell em conteúdo genérico de listagem                   */
/* -------------------------------------------------------------------------- */

body.layout-apple #view .dataTables_wrapper {
  font-family: var(--la-font);
}

body.layout-apple #view .card.shadow:not(.border-left-primary):not(.border-left-success):not(.border-left-info):not(.border-left-warning):not(.border-left-danger):not(.border-left-secondary) {
  box-shadow: none !important;
  border: 1px solid var(--la-border);
}

body.layout-apple #content .container-fluid {
  padding-top: 0.25rem;
}

/* Shell — footer sticky / sticky-footer tipográfico */
body.layout-apple .sticky-footer,
body.layout-apple footer.sticky-footer {
  background: transparent !important;
  border-top: 1px solid var(--la-border);
  color: var(--la-text-tertiary);
  font-size: 0.75rem;
  letter-spacing: -0.01em;
  padding: 1rem 0;
}

body.layout-apple .sticky-footer .copyright {
  color: var(--la-text-tertiary);
}

/* Scrollbar do content — discreta */
body.layout-apple #content-wrapper::-webkit-scrollbar,
body.layout-apple #view::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.layout-apple #content-wrapper::-webkit-scrollbar-thumb,
body.layout-apple #view::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 999px;
}

body.layout-apple #content-wrapper::-webkit-scrollbar-track,
body.layout-apple #view::-webkit-scrollbar-track {
  background: transparent;
}

/* -------------------------------------------------------------------------- */
/* Fase 3 residual — Select2 / toasts / paginação / toolbars                  */
/* -------------------------------------------------------------------------- */

/* Select2 multiple + choice chips */
body.layout-apple .select2-container--default .select2-selection--multiple {
  border-radius: var(--la-radius-sm) !important;
  border-color: var(--la-border-strong) !important;
  min-height: calc(1.5em + 0.75rem + 2px) !important;
  font-family: var(--la-font);
  background: var(--la-bg-elevated) !important;
}

body.layout-apple .select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--la-accent) !important;
  box-shadow: var(--la-focus-ring);
}

body.layout-apple .select2-container--default .select2-selection--multiple .select2-selection__choice {
  border-radius: var(--la-radius-sm) !important;
  border: 1px solid var(--la-border) !important;
  background: var(--la-bg) !important;
  color: var(--la-text) !important;
  font-size: 0.75rem;
  letter-spacing: -0.01em;
  padding: 0.15rem 0.4rem;
}

body.layout-apple .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--la-text-tertiary) !important;
  margin-right: 0.25rem;
}

body.layout-apple .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--la-text) !important;
  line-height: calc(1.5em + 0.75rem) !important;
  padding-left: 0.75rem;
  letter-spacing: -0.01em;
}

body.layout-apple .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(1.5em + 0.75rem) !important;
}

body.layout-apple .select2-results__option {
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  padding: 0.45rem 0.75rem;
}

body.layout-apple .select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--la-accent-soft) !important;
  color: var(--la-accent) !important;
}

/* Toastr (se carregado) */
body.layout-apple #toast-container > div {
  border-radius: var(--la-radius-md) !important;
  box-shadow: var(--la-shadow-md) !important;
  border: 1px solid var(--la-border);
  font-family: var(--la-font);
  letter-spacing: -0.015em;
  opacity: 1 !important;
}

body.layout-apple #toast-container > .toast-success {
  background-color: #0f7a52 !important;
}

body.layout-apple #toast-container > .toast-error {
  background-color: var(--la-danger) !important;
}

body.layout-apple #toast-container > .toast-info {
  background-color: var(--la-accent) !important;
}

body.layout-apple #toast-container > .toast-warning {
  background-color: var(--la-warning) !important;
}

/* SweetAlert2 — tipográfico, sem glow */
body.layout-apple .swal2-popup {
  border-radius: var(--la-radius-lg) !important;
  font-family: var(--la-font) !important;
  box-shadow: var(--la-shadow-lg) !important;
  border: 1px solid var(--la-border);
  letter-spacing: -0.015em;
}

body.layout-apple .swal2-title {
  font-weight: 650 !important;
  letter-spacing: -0.03em !important;
  color: var(--la-text) !important;
  font-size: 1.25rem !important;
}

body.layout-apple .swal2-html-container,
body.layout-apple .swal2-content {
  color: var(--la-text-secondary) !important;
  font-size: 0.875rem !important;
}

body.layout-apple .swal2-confirm {
  background-color: var(--la-accent) !important;
  border-radius: var(--la-radius-sm) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

body.layout-apple .swal2-confirm:hover {
  background-color: var(--la-accent-hover) !important;
}

body.layout-apple .swal2-cancel,
body.layout-apple .swal2-deny {
  border-radius: var(--la-radius-sm) !important;
  font-weight: 550 !important;
}

body.layout-apple .swal2-styled.swal2-confirm:focus,
body.layout-apple .swal2-styled.swal2-cancel:focus {
  box-shadow: var(--la-focus-ring) !important;
}

/* Paginação Bootstrap — densidade */
body.layout-apple .pagination {
  gap: 0.2rem;
}

body.layout-apple .pagination .page-link {
  min-width: 2rem;
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
}

/* DataTables paginate — pills minimalistas, sem moldura pesada por botão
   (padrão do resto do design system: fundo só aparece no hover/estado
   atual, não em repouso). Substitui os dois reskins anteriores (um aqui,
   um lá em cima perto de tbody td), que empilhados davam um visual
   "quadradinho com borda" carregado — feedback do usuário. */
/* border-top vem de pedidos-enhancements.css (não-condicional, linha cinza
   #e3e6f0 acima da paginação) — removida só em apple, arquivo original
   intocado pro layout clássico. */
body.layout-apple .dataTables_wrapper .dataTables_paginate {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  width: 100%;
  border-top: none !important;
}

body.layout-apple .dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 2rem !important;
  height: 2rem !important;
  margin: 0 !important;
  padding: 0 0.6rem !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--la-text-secondary) !important;
  font-weight: 550 !important;
  font-size: 0.8125rem !important;
  letter-spacing: -0.01em;
  box-shadow: none !important;
  transition: background var(--la-duration-fast) var(--la-ease), color var(--la-duration-fast) var(--la-ease);
}

body.layout-apple .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
  background: var(--la-bg-hover) !important;
  color: var(--la-text) !important;
  border-color: transparent !important;
}

body.layout-apple .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--la-accent) !important;
  border-color: var(--la-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.layout-apple .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.45;
  color: var(--la-text-tertiary) !important;
}

body.layout-apple .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--la-text-tertiary) !important;
}

body.layout-apple .dataTables_wrapper .dataTables_paginate .paginate_button.ellipsis {
  border: none !important;
  background: none !important;
  color: var(--la-text-tertiary) !important;
  min-width: 1.25rem !important;
  padding: 0 !important;
  cursor: default;
}

/* Modal footer — hairline tipográfica */
body.layout-apple .modal-footer {
  border-top: 1px solid var(--la-border) !important;
  background: var(--la-bg);
  padding: 0.85rem 1.25rem;
}

body.layout-apple .modal-footer .btn {
  font-weight: 550;
  letter-spacing: -0.01em;
}

/* Input-group polish */
body.layout-apple .input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

body.layout-apple .input-group > .input-group-append > .btn,
body.layout-apple .input-group > .input-group-prepend > .btn {
  border-radius: var(--la-radius-sm);
}

body.layout-apple .input-group > .input-group-append > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

body.layout-apple .input-group > .input-group-prepend > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Labels de length/filter DT mais tipográficas */
body.layout-apple .dataTables_wrapper .dataTables_length,
body.layout-apple .dataTables_wrapper .dataTables_filter {
  color: var(--la-text-secondary);
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
}

body.layout-apple .dataTables_wrapper .dataTables_info {
  color: var(--la-text-tertiary);
  font-size: 0.75rem;
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------------------------- */
/* Fase 4 — refinamentos dos 5 pilotos (composição, não recolor)              */
/* -------------------------------------------------------------------------- */

/* Stop Humano — thead flat + densidade alinhada a Pedidos */
body.layout-apple #view #tabela_stophumano thead th {
  color: var(--la-text-tertiary) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.04em !important;
  border-bottom: 1px solid var(--la-border) !important;
  padding: 0.8rem 0.65rem !important;
}

body.layout-apple #view #tabela_stophumano tbody tr:hover {
  background-color: var(--la-bg-hover) !important;
  transform: none !important;
  box-shadow: none !important;
}

body.layout-apple #view #tabela_stophumano_wrapper .dt-buttons .btn {
  border-radius: var(--la-radius-sm);
  font-size: 0.75rem;
  letter-spacing: -0.01em;
}

/* Pedidos console — ações / botões no left-div */
body.layout-apple #modal_lg #left-div .btn {
  border-radius: var(--la-radius-sm);
  font-weight: 550;
  letter-spacing: -0.01em;
}

body.layout-apple #modal_lg #left-div .btn-primary,
body.layout-apple #modal_lg #left-div .btn-success {
  background-color: var(--la-accent) !important;
  border-color: var(--la-accent) !important;
}

body.layout-apple #modal_lg #left-div .card,
body.layout-apple #modal_lg #left-div .border {
  border-color: var(--la-border) !important;
  border-radius: var(--la-radius-md);
}

body.layout-apple #modal_lg #left-div .table thead th {
  background: var(--la-bg) !important;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--la-text-tertiary);
}

body.layout-apple #modal_lg #left-div hr {
  border-top-color: var(--la-border);
  opacity: 1;
}

/* Cliente — botões de ação no detalhe */
body.layout-apple #view #myTabContent .btn-sm,
body.layout-apple #view #dados_cliente .btn-sm {
  border-radius: var(--la-radius-sm);
  letter-spacing: -0.01em;
}

body.layout-apple #view #profileTab + .tab-content,
body.layout-apple #view #myTabContent {
  background: transparent;
}

body.layout-apple #view #resumo .card .card-body {
  padding: var(--la-space-4) !important;
}

/* RG — status badges / empty / botões de ação */
body.layout-apple #view .rg-validacao-admin .status-badge,
body.layout-apple #view .rg-validacao-admin .badge-status {
  border-radius: var(--la-radius-sm) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 0.7rem;
  padding: 0.3em 0.55em;
}

body.layout-apple #view .rg-validacao-admin .empty-state,
body.layout-apple #view .rg-validacao-admin .no-results {
  color: var(--la-text-tertiary);
  font-size: 0.875rem;
  letter-spacing: -0.015em;
  padding: var(--la-space-6) var(--la-space-4);
  text-align: center;
}

body.layout-apple #view .rg-validacao-admin .btn-primary {
  background: var(--la-accent) !important;
  border-color: var(--la-accent) !important;
  border-radius: var(--la-radius-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: none !important;
}

body.layout-apple #view .rg-validacao-admin .btn-primary:hover {
  background: var(--la-accent-hover) !important;
  border-color: var(--la-accent-hover) !important;
}

/* Dashboards — list-group / chart canvas respiração */
body.layout-apple #view .card.shadow.mb-4 .chart-area,
body.layout-apple #view .card.shadow.mb-4 .chart-pie {
  padding-top: 0.35rem;
}

body.layout-apple #view .border-bottom-primary,
body.layout-apple #view .border-bottom-success,
body.layout-apple #view .border-bottom-info {
  border-bottom-width: 2px !important;
}

/* -------------------------------------------------------------------------- */
/* Fase 5 — Semana A: Solicitações restantes (CSS-first, densidade)           */
/* Pré-lançamento · Classificação · Valores · Linhas · Relatório Pedidos      */
/* -------------------------------------------------------------------------- */

/* Shared operational list tables — tipografia + thead flat */
body.layout-apple #view #tabela_prelancamento,
body.layout-apple #view #tabela_pedidosclassificacao,
body.layout-apple #view #tabela_valores,
body.layout-apple #view #tabela_linhas {
  border: none !important;
}

body.layout-apple #view #tabela_prelancamento thead th,
body.layout-apple #view #tabela_pedidosclassificacao thead th,
body.layout-apple #view #tabela_valores thead th,
body.layout-apple #view #tabela_linhas thead th {
  background: var(--la-bg) !important;
  background-image: none !important;
  color: var(--la-text-tertiary) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  border-bottom: 1px solid var(--la-border) !important;
  padding: 0.8rem 0.65rem !important;
  font-weight: 600;
}

body.layout-apple #view #tabela_prelancamento tbody td,
body.layout-apple #view #tabela_pedidosclassificacao tbody td,
body.layout-apple #view #tabela_valores tbody td,
body.layout-apple #view #tabela_linhas tbody td {
  padding: 0.75rem 0.65rem !important;
  font-size: 0.8125rem;
  border-bottom-color: var(--la-border) !important;
  vertical-align: middle;
  letter-spacing: -0.01em;
}

body.layout-apple #view #tabela_prelancamento tbody tr:hover,
body.layout-apple #view #tabela_pedidosclassificacao tbody tr:hover,
body.layout-apple #view #tabela_valores tbody tr:hover,
body.layout-apple #view #tabela_linhas tbody tr:hover {
  background-color: var(--la-bg-hover) !important;
  transform: none !important;
  box-shadow: none !important;
}

body.layout-apple #view #tabela_prelancamento_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_pedidosclassificacao_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_valores_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_linhas_wrapper .dt-buttons .btn {
  border-radius: var(--la-radius-sm);
  font-size: 0.75rem;
  letter-spacing: -0.01em;
}

/* Relatório de Pedidos (.crv-dash) — remapeia indigo/Inter → CredVibes/Geist */
body.layout-apple #view .crv-dash {
  font-family: var(--la-font) !important;
  --crv: #613ab5;
  --crv-light: rgba(97, 58, 181, 0.1);
  --crv-dark: #4d2c93;
  color: var(--la-text) !important;
  letter-spacing: -0.011em;
  padding-top: var(--la-space-2) !important;
}

body.layout-apple #view .crv-dash h1 {
  font-family: var(--la-font) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  color: var(--la-text) !important;
}

/* Barra accent do header do relatório */
body.layout-apple #view .crv-dash [style*="linear-gradient(180deg,#4f46e5"] {
  background: var(--la-accent) !important;
  background-image: none !important;
  width: 3px !important;
  border-radius: 2px !important;
}

body.layout-apple #view .crv-dash .crv-card {
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-md) !important;
  box-shadow: none !important;
  background: var(--la-bg-elevated) !important;
}

body.layout-apple #view .crv-dash .crv-card:hover {
  box-shadow: var(--la-shadow-sm) !important;
  transform: none !important;
}

body.layout-apple #view .crv-dash .crv-card-header {
  border-bottom-color: var(--la-border) !important;
  padding: 0.95rem 1.15rem !important;
}

body.layout-apple #view .crv-dash .crv-card-header h3,
body.layout-apple #view .crv-dash .crv-card-header [style*="font-weight"] {
  font-family: var(--la-font) !important;
  letter-spacing: -0.025em;
  font-weight: 650 !important;
  color: var(--la-text) !important;
}

/* Tabs do relatório — underline, sem pill indigo */
body.layout-apple #view .crv-dash .crv-tabs {
  background: var(--la-bg-elevated) !important;
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-md) !important;
  box-shadow: none !important;
  padding: 0.35rem !important;
  gap: 0.15rem !important;
}

body.layout-apple #view .crv-dash .crv-tab {
  border-radius: var(--la-radius-sm) !important;
  font-family: var(--la-font) !important;
  font-weight: 550 !important;
  letter-spacing: -0.015em;
  color: var(--la-text-secondary) !important;
  padding: 0.55rem 0.95rem !important;
}

body.layout-apple #view .crv-dash .crv-tab:hover {
  background: var(--la-bg-hover) !important;
  color: var(--la-text) !important;
}

body.layout-apple #view .crv-dash .crv-tab.active {
  background: var(--la-accent-soft) !important;
  background-image: none !important;
  color: var(--la-accent) !important;
  box-shadow: none !important;
  font-weight: 650 !important;
}

/* Stats / KPIs do relatório */
body.layout-apple #view .crv-dash .crv-stat {
  background: var(--la-bg-elevated) !important;
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-md) !important;
  padding: var(--la-space-4) !important;
}

body.layout-apple #view .crv-dash .crv-stat::before {
  opacity: 0 !important;
}

body.layout-apple #view .crv-dash .crv-stat-blue::before {
  background: var(--la-accent);
}

body.layout-apple #view .crv-dash table thead th {
  background: var(--la-bg) !important;
  color: var(--la-text-tertiary) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.04em !important;
  border-bottom: 1px solid var(--la-border) !important;
  font-family: var(--la-font) !important;
}

body.layout-apple #view .crv-dash table tbody td {
  font-size: 0.8125rem !important;
  border-bottom-color: var(--la-border) !important;
  font-family: var(--la-font) !important;
  letter-spacing: -0.01em;
}

body.layout-apple #view .crv-dash table tbody tr:hover {
  background: var(--la-bg-hover) !important;
}

body.layout-apple #view .crv-dash .crv-badge {
  border-radius: var(--la-radius-sm) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
}

body.layout-apple #view .crv-dash .crv-badge-purple,
body.layout-apple #view .crv-dash .crv-badge-blue {
  background: var(--la-accent-soft) !important;
  color: var(--la-accent) !important;
}

body.layout-apple #view .crv-dash .crv-icon-circle {
  border-radius: var(--la-radius-sm) !important;
}

body.layout-apple #view .crv-dash .crv-progress {
  background: var(--la-bg) !important;
  height: 0.35rem !important;
}

/* Botão Exportar — accent CredVibes (override inline indigo quando possível) */
body.layout-apple #view .crv-dash button[onclick="exportToCSV()"] {
  background: var(--la-accent) !important;
  background-image: none !important;
  border-radius: var(--la-radius-sm) !important;
  box-shadow: none !important;
  font-family: var(--la-font) !important;
  letter-spacing: -0.01em;
  font-weight: 600 !important;
}

body.layout-apple #view .crv-dash button[onclick="exportToCSV()"]:hover {
  background: var(--la-accent-hover) !important;
  transform: none !important;
}

/*
 * Filtros de período do DFC (aba financeiro) — o estado ativo é aplicado por
 * inline style no JS, então o indigo #4f46e5 escapava do remapeamento do
 * .crv-dash. Cobrimos as duas serializações (hex do PHP e rgb() do JS).
 */
body.layout-apple #view .crv-dash .dfc-filter-btn {
  font-family: var(--la-font) !important;
  border-radius: var(--la-radius-sm) !important;
  border: 1px solid var(--la-border-strong) !important;
  background: var(--la-bg-elevated) !important;
  color: var(--la-text-secondary) !important;
  letter-spacing: -0.01em;
}

body.layout-apple #view .crv-dash .dfc-filter-btn:hover {
  border-color: var(--la-accent-muted) !important;
  color: var(--la-text) !important;
}

body.layout-apple #view .crv-dash .dfc-filter-btn[style*="#4f46e5"],
body.layout-apple #view .crv-dash .dfc-filter-btn[style*="rgb(79, 70, 229)"] {
  border-color: var(--la-accent) !important;
  background: var(--la-accent-soft) !important;
  color: var(--la-accent) !important;
}

/* Filters / forms dentro do crv-dash */
body.layout-apple #view .crv-dash input,
body.layout-apple #view .crv-dash select {
  border-radius: var(--la-radius-sm) !important;
  border-color: var(--la-border-strong) !important;
  font-family: var(--la-font) !important;
}

body.layout-apple #view .crv-dash input:focus,
body.layout-apple #view .crv-dash select:focus {
  border-color: var(--la-accent) !important;
  box-shadow: var(--la-focus-ring) !important;
  outline: none;
}

@media (prefers-reduced-motion: no-preference) {
  body.layout-apple #view #tabela_prelancamento_wrapper,
  body.layout-apple #view #tabela_valores_wrapper,
  body.layout-apple #view #tabela_linhas_wrapper,
  body.layout-apple #view #tabela_pedidosclassificacao_wrapper {
    animation: la-fade-up 0.3s ease both;
  }

  body.layout-apple #view .crv-dash .crv-tabs {
    animation: la-fade-up 0.28s ease both;
  }
}

/* -------------------------------------------------------------------------- */
/* Fase 5 início — Cobranças (contratos / inadimplência)                      */
/* -------------------------------------------------------------------------- */

body.layout-apple #view .chart-container {
  background: var(--la-bg-elevated);
  border: 1px solid var(--la-border);
  border-radius: var(--la-radius-md);
  margin-bottom: var(--la-space-3);
  padding: var(--la-space-3) !important;
  min-height: 11rem;
}

body.layout-apple #view #tabela_contratos,
body.layout-apple #view #tabela_inadimplencias {
  border: none !important;
}

body.layout-apple #view #tabela_contratos thead th,
body.layout-apple #view #tabela_inadimplencias thead th {
  background: var(--la-bg) !important;
  background-image: none !important;
  color: var(--la-text-tertiary) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  border-bottom: 1px solid var(--la-border) !important;
  padding: 0.8rem 0.65rem !important;
}

body.layout-apple #view #tabela_contratos tbody td,
body.layout-apple #view #tabela_inadimplencias tbody td {
  padding: 0.75rem 0.65rem !important;
  font-size: 0.8125rem;
  vertical-align: middle;
  letter-spacing: -0.01em;
  border-bottom-color: var(--la-border) !important;
}

body.layout-apple #view #tabela_contratos tbody tr:hover,
body.layout-apple #view #tabela_inadimplencias tbody tr:hover {
  background-color: var(--la-bg-hover) !important;
  transform: none !important;
  box-shadow: none !important;
}

body.layout-apple #view #tabela_contratos_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_inadimplencias_wrapper .dt-buttons .btn {
  border-radius: var(--la-radius-sm);
  font-size: 0.75rem;
  letter-spacing: -0.01em;
}

/* Row de charts + tabela — espaçamento operacional */
body.layout-apple #view > .row:has(.chart-container) {
  margin-bottom: var(--la-space-2);
}

body.layout-apple #view > .row:has(.chart-container) + .row #view_table {
  margin-top: var(--la-space-2) !important;
}

/* -------------------------------------------------------------------------- */
/* Fase 5 — Semana B: Clientes restantes (CSS-first)                          */
/* Pré-cadastro · Quiz · SCR · Zoox · Convites indicadores/efetivados         */
/* -------------------------------------------------------------------------- */

body.layout-apple #view #tabela_precadastro,
body.layout-apple #view #tabela_quiz,
body.layout-apple #view #tabela_scr,
body.layout-apple #view #tabela_zoox,
body.layout-apple #view #tabela_cpfconvites,
body.layout-apple #view #tabela_convites {
  border: none !important;
}

body.layout-apple #view #tabela_precadastro thead th,
body.layout-apple #view #tabela_quiz thead th,
body.layout-apple #view #tabela_scr thead th,
body.layout-apple #view #tabela_zoox thead th,
body.layout-apple #view #tabela_cpfconvites thead th,
body.layout-apple #view #tabela_convites thead th {
  background: var(--la-bg) !important;
  background-image: none !important;
  color: var(--la-text-tertiary) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  border-bottom: 1px solid var(--la-border) !important;
  padding: 0.8rem 0.65rem !important;
  font-weight: 600;
}

body.layout-apple #view #tabela_precadastro tbody td,
body.layout-apple #view #tabela_quiz tbody td,
body.layout-apple #view #tabela_scr tbody td,
body.layout-apple #view #tabela_zoox tbody td,
body.layout-apple #view #tabela_cpfconvites tbody td,
body.layout-apple #view #tabela_convites tbody td {
  padding: 0.75rem 0.65rem !important;
  font-size: 0.8125rem;
  border-bottom-color: var(--la-border) !important;
  vertical-align: middle;
  letter-spacing: -0.01em;
}

body.layout-apple #view #tabela_precadastro tbody tr:hover,
body.layout-apple #view #tabela_quiz tbody tr:hover,
body.layout-apple #view #tabela_scr tbody tr:hover,
body.layout-apple #view #tabela_zoox tbody tr:hover,
body.layout-apple #view #tabela_cpfconvites tbody tr:hover,
body.layout-apple #view #tabela_convites tbody tr:hover {
  background-color: var(--la-bg-hover) !important;
  transform: none !important;
  box-shadow: none !important;
}

body.layout-apple #view #tabela_precadastro_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_quiz_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_scr_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_zoox_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_cpfconvites_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_convites_wrapper .dt-buttons .btn {
  border-radius: var(--la-radius-sm);
  font-size: 0.75rem;
  letter-spacing: -0.01em;
}

/* Quiz — modal tipográfico (hooks Bootstrap intactos) */
body.layout-apple #modalQuizDetalhes .modal-content {
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-md) !important;
  box-shadow: var(--la-shadow-md) !important;
  font-family: var(--la-font);
}

body.layout-apple #modalQuizDetalhes .modal-header {
  background: var(--la-bg-elevated) !important;
  border-bottom: 1px solid var(--la-border) !important;
  padding: 1rem 1.25rem !important;
}

body.layout-apple #modalQuizDetalhes .modal-title {
  font-family: var(--la-font) !important;
  font-weight: 650 !important;
  letter-spacing: -0.025em;
  color: var(--la-text) !important;
  font-size: 1.05rem;
}

body.layout-apple #modalQuizDetalhes .modal-body {
  color: var(--la-text);
  letter-spacing: -0.011em;
  font-size: 0.875rem;
}

body.layout-apple #modalQuizDetalhes #quizDetalhesConteudo table thead th {
  background: var(--la-bg) !important;
  color: var(--la-text-tertiary) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--la-border) !important;
}

/* -------------------------------------------------------------------------- */
/* Fase 5 — Semana C: Cobranças restantes + refine contratos/inadimplência    */
/* Prejuízos · Acordos · Linhas de cobrança · boletos aninhados               */
/* -------------------------------------------------------------------------- */

body.layout-apple #view #tabela_prejuizos,
body.layout-apple #view #tabela_acordos,
body.layout-apple #view #tabela_coblinhas,
body.layout-apple #view #tabela_boletos {
  border: none !important;
}

body.layout-apple #view #tabela_prejuizos thead th,
body.layout-apple #view #tabela_acordos thead th,
body.layout-apple #view #tabela_coblinhas thead th,
body.layout-apple #view #tabela_boletos thead th {
  background: var(--la-bg) !important;
  background-image: none !important;
  color: var(--la-text-tertiary) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  border-bottom: 1px solid var(--la-border) !important;
  padding: 0.8rem 0.65rem !important;
  font-weight: 600;
}

body.layout-apple #view #tabela_prejuizos tbody td,
body.layout-apple #view #tabela_acordos tbody td,
body.layout-apple #view #tabela_coblinhas tbody td,
body.layout-apple #view #tabela_boletos tbody td {
  padding: 0.75rem 0.65rem !important;
  font-size: 0.8125rem;
  border-bottom-color: var(--la-border) !important;
  vertical-align: middle;
  letter-spacing: -0.01em;
}

body.layout-apple #view #tabela_prejuizos tbody tr:hover,
body.layout-apple #view #tabela_acordos tbody tr:hover,
body.layout-apple #view #tabela_coblinhas tbody tr:hover,
body.layout-apple #view #tabela_boletos tbody tr:hover {
  background-color: var(--la-bg-hover) !important;
  transform: none !important;
  box-shadow: none !important;
}

body.layout-apple #view #tabela_prejuizos_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_acordos_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_coblinhas_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_boletos_wrapper .dt-buttons .btn {
  border-radius: var(--la-radius-sm);
  font-size: 0.75rem;
  letter-spacing: -0.01em;
}

/* Prejuízos — toolbar de filtros tipográfica */
body.layout-apple #view #btn_prejuizo_buscar,
body.layout-apple #view #btn_prejuizo_marcar,
body.layout-apple #view #btn_prejuizo_exportar_whatsapp {
  border-radius: var(--la-radius-sm) !important;
  font-family: var(--la-font) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  box-shadow: none !important;
}

body.layout-apple #view #prejuizo_data_inicio,
body.layout-apple #view #prejuizo_data_fim,
body.layout-apple #view #prejuizo_trimestre {
  border-radius: var(--la-radius-sm) !important;
  border-color: var(--la-border-strong) !important;
  font-family: var(--la-font) !important;
  height: var(--la-control-height);
}

body.layout-apple #view #prejuizo_data_inicio:focus,
body.layout-apple #view #prejuizo_data_fim:focus,
body.layout-apple #view #prejuizo_trimestre:focus {
  border-color: var(--la-accent) !important;
  box-shadow: var(--la-focus-ring) !important;
}

body.layout-apple #view label[for^="prejuizo_"] {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--la-text-tertiary);
  margin-bottom: 0.35rem;
}

body.layout-apple #view #prejuizo_select_all {
  accent-color: var(--la-accent);
}

/* Refine contratos / inadimplência — toolbar + densidade alinhada */
body.layout-apple #view #tabela_contratos_wrapper .dataTables_filter input,
body.layout-apple #view #tabela_inadimplencias_wrapper .dataTables_filter input,
body.layout-apple #view #tabela_acordos_wrapper .dataTables_filter input,
body.layout-apple #view #tabela_prejuizos_wrapper .dataTables_filter input {
  border-radius: var(--la-radius-sm) !important;
  border-color: var(--la-border-strong) !important;
  font-family: var(--la-font) !important;
}

body.layout-apple #view #tabela_contratos_wrapper .dataTables_filter input:focus,
body.layout-apple #view #tabela_inadimplencias_wrapper .dataTables_filter input:focus,
body.layout-apple #view #tabela_acordos_wrapper .dataTables_filter input:focus,
body.layout-apple #view #tabela_prejuizos_wrapper .dataTables_filter input:focus {
  border-color: var(--la-accent) !important;
  box-shadow: var(--la-focus-ring) !important;
}

/* Modal baixa contratos — indigo/azul genérico → roxo CredVibes */
body.layout-apple #modal_lg .stepper-step.active .stepper-circle {
  background: var(--la-accent) !important;
  border-color: var(--la-accent) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.layout-apple #modal_lg .stepper-step.active .stepper-label {
  color: var(--la-accent) !important;
}

body.layout-apple #modal_lg .card-selection:hover {
  border-color: var(--la-accent) !important;
  transform: none !important;
  box-shadow: var(--la-shadow-sm) !important;
}

body.layout-apple #modal_lg .card-selection.selected,
body.layout-apple #modal_lg .card-selection.card-parcial.selected {
  border-color: var(--la-accent) !important;
  background: var(--la-accent-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.layout-apple #modal_lg .card-selection.selected .card-icon {
  color: var(--la-accent) !important;
  transform: none !important;
}

body.layout-apple #modal_lg .card-selection.card-total.selected {
  border-color: var(--la-success) !important;
  background: rgba(28, 200, 138, 0.1) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.layout-apple #modal_lg i[style*="color: #3b82f6"],
body.layout-apple #modal_lg i[style*="color:#3b82f6"] {
  color: var(--la-accent) !important;
}

/* -------------------------------------------------------------------------- */
/* Fase 5 — Semana D: Sistema                                                 */
/* Usuários · Grupos · Empresas · Configs · Score · Automação · Blocklist ·   */
/* Motores · Alertas · Analista GPT · CBO · Erros · Assistentes               */
/* -------------------------------------------------------------------------- */

body.layout-apple #view #tabela_empresas,
body.layout-apple #view #tabela_usuarios_grupos,
body.layout-apple #view #tabela_usuarios,
body.layout-apple #view #tabela_assistentes,
body.layout-apple #view #tabela_alertas,
body.layout-apple #view #tabela_configuracoes,
body.layout-apple #view #tabela_cbo_mte,
body.layout-apple #view #tabela_score_configuracoes_emprestimos,
body.layout-apple #view #tabela_score_configuracoes_pagamentos,
body.layout-apple #view #tabela_score_configuracoes_dados,
body.layout-apple #view #tabela_automacao,
body.layout-apple #view #tabela_blocklist,
body.layout-apple #view #tabela_regrasmotorrestricoes,
body.layout-apple #view #tabela_consultasmotorrestricoes,
body.layout-apple #view #tabela_errostecnicos,
body.layout-apple #view #tabela_analistagpt {
  border: none !important;
}

body.layout-apple #view #tabela_empresas thead th,
body.layout-apple #view #tabela_usuarios_grupos thead th,
body.layout-apple #view #tabela_usuarios thead th,
body.layout-apple #view #tabela_assistentes thead th,
body.layout-apple #view #tabela_alertas thead th,
body.layout-apple #view #tabela_configuracoes thead th,
body.layout-apple #view #tabela_cbo_mte thead th,
body.layout-apple #view #tabela_score_configuracoes_emprestimos thead th,
body.layout-apple #view #tabela_score_configuracoes_pagamentos thead th,
body.layout-apple #view #tabela_score_configuracoes_dados thead th,
body.layout-apple #view #tabela_automacao thead th,
body.layout-apple #view #tabela_blocklist thead th,
body.layout-apple #view #tabela_regrasmotorrestricoes thead th,
body.layout-apple #view #tabela_consultasmotorrestricoes thead th,
body.layout-apple #view #tabela_errostecnicos thead th,
body.layout-apple #view #tabela_analistagpt thead th {
  background: var(--la-bg) !important;
  background-image: none !important;
  color: var(--la-text-tertiary) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  border-bottom: 1px solid var(--la-border) !important;
  padding: 0.8rem 0.65rem !important;
  font-weight: 600;
}

body.layout-apple #view #tabela_empresas tbody td,
body.layout-apple #view #tabela_usuarios_grupos tbody td,
body.layout-apple #view #tabela_usuarios tbody td,
body.layout-apple #view #tabela_assistentes tbody td,
body.layout-apple #view #tabela_alertas tbody td,
body.layout-apple #view #tabela_configuracoes tbody td,
body.layout-apple #view #tabela_cbo_mte tbody td,
body.layout-apple #view #tabela_score_configuracoes_emprestimos tbody td,
body.layout-apple #view #tabela_score_configuracoes_pagamentos tbody td,
body.layout-apple #view #tabela_score_configuracoes_dados tbody td,
body.layout-apple #view #tabela_automacao tbody td,
body.layout-apple #view #tabela_blocklist tbody td,
body.layout-apple #view #tabela_regrasmotorrestricoes tbody td,
body.layout-apple #view #tabela_consultasmotorrestricoes tbody td,
body.layout-apple #view #tabela_errostecnicos tbody td,
body.layout-apple #view #tabela_analistagpt tbody td {
  padding: 0.75rem 0.65rem !important;
  font-size: 0.8125rem;
  border-bottom-color: var(--la-border) !important;
  vertical-align: middle;
  letter-spacing: -0.01em;
}

body.layout-apple #view #tabela_empresas tbody tr:hover,
body.layout-apple #view #tabela_usuarios_grupos tbody tr:hover,
body.layout-apple #view #tabela_usuarios tbody tr:hover,
body.layout-apple #view #tabela_assistentes tbody tr:hover,
body.layout-apple #view #tabela_alertas tbody tr:hover,
body.layout-apple #view #tabela_configuracoes tbody tr:hover,
body.layout-apple #view #tabela_cbo_mte tbody tr:hover,
body.layout-apple #view #tabela_score_configuracoes_emprestimos tbody tr:hover,
body.layout-apple #view #tabela_score_configuracoes_pagamentos tbody tr:hover,
body.layout-apple #view #tabela_score_configuracoes_dados tbody tr:hover,
body.layout-apple #view #tabela_automacao tbody tr:hover,
body.layout-apple #view #tabela_blocklist tbody tr:hover,
body.layout-apple #view #tabela_regrasmotorrestricoes tbody tr:hover,
body.layout-apple #view #tabela_consultasmotorrestricoes tbody tr:hover,
body.layout-apple #view #tabela_errostecnicos tbody tr:hover,
body.layout-apple #view #tabela_analistagpt tbody tr:hover {
  background-color: var(--la-bg-hover) !important;
  transform: none !important;
  box-shadow: none !important;
}

body.layout-apple #view #tabela_empresas_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_usuarios_grupos_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_usuarios_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_assistentes_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_alertas_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_configuracoes_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_cbo_mte_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_score_configuracoes_emprestimos_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_score_configuracoes_pagamentos_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_score_configuracoes_dados_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_automacao_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_blocklist_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_regrasmotorrestricoes_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_consultasmotorrestricoes_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_errostecnicos_wrapper .dt-buttons .btn,
body.layout-apple #view #tabela_analistagpt_wrapper .dt-buttons .btn {
  border-radius: var(--la-radius-sm);
  font-size: 0.75rem;
  letter-spacing: -0.01em;
}

/* Painéis com tabs (Configurações / Score) — composição tipográfica */
body.layout-apple #view .panel.panel-default {
  background: var(--la-bg-elevated);
  border: 1px solid var(--la-border);
  border-radius: var(--la-radius-md);
  box-shadow: none;
  overflow: hidden;
}

body.layout-apple #view .panel.panel-default > .panel-heading {
  background: var(--la-bg-elevated) !important;
  border-bottom: 1px solid var(--la-border);
  padding: 0.35rem 0.5rem 0 !important;
}

body.layout-apple #view .panel.panel-default > .panel-heading .nav-tabs {
  border-bottom: none !important;
  gap: 0.15rem;
}

body.layout-apple #view .panel.panel-default > .panel-heading .nav-tabs > li > a.nav-link,
body.layout-apple #view .panel.panel-default > .panel-heading .nav-tabs .nav-link {
  font-family: var(--la-font) !important;
  font-weight: 550 !important;
  letter-spacing: -0.015em;
  color: var(--la-text-secondary) !important;
  border: none !important;
  border-radius: var(--la-radius-sm) !important;
  padding: 0.65rem 1rem !important;
  background: transparent !important;
}

body.layout-apple #view .panel.panel-default > .panel-heading .nav-tabs > li.active > a.nav-link,
body.layout-apple #view .panel.panel-default > .panel-heading .nav-tabs .nav-link.active,
body.layout-apple #view .panel.panel-default > .panel-heading .nav-tabs > li > a.nav-link.active {
  background: var(--la-accent-soft) !important;
  color: var(--la-accent) !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

body.layout-apple #view .panel.panel-default > .panel-body {
  padding: var(--la-space-4) !important;
}

/* Config extras — cards tipográficos */
body.layout-apple #view .config-extras-group .card {
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-md) !important;
  box-shadow: none !important;
  overflow: hidden;
}

body.layout-apple #view .config-extras-group-header {
  background: var(--la-bg) !important;
  color: var(--la-text) !important;
  font-family: var(--la-font) !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--la-border) !important;
}

body.layout-apple #view .config-extras-group-body {
  padding: var(--la-space-4) !important;
}

body.layout-apple #view #configuracoes-extras h4 {
  font-family: var(--la-font) !important;
  font-weight: 650 !important;
  letter-spacing: -0.03em;
  color: var(--la-text);
  font-size: 1.1rem;
}

/* Score badges — semântica preservada; tipografia alinhada */
body.layout-apple #view .badge-categoria {
  border-radius: var(--la-radius-sm) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-family: var(--la-font);
}

/* btn-credvibes — densidade Apple (accent já é #613ab5 no clássico) */
body.layout-apple #view .btn-credvibes,
body.layout-apple #modal_base .btn-credvibes,
body.layout-apple #modal_lg .btn-credvibes {
  border-radius: var(--la-radius-sm) !important;
  font-family: var(--la-font) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  box-shadow: none !important;
  background-image: none !important;
}

body.layout-apple #view .btn-credvibes:hover,
body.layout-apple #modal_base .btn-credvibes:hover,
body.layout-apple #modal_lg .btn-credvibes:hover {
  background-color: var(--la-accent-hover) !important;
  border-color: var(--la-accent-hover) !important;
}

/* CBO — botão Nova Ocupação alinhado ao content */
body.layout-apple #view > .row.mb-3 .btn-credvibes {
  padding: 0.55rem 1rem;
}

@media (prefers-reduced-motion: no-preference) {
  body.layout-apple #view #tabela_precadastro_wrapper,
  body.layout-apple #view #tabela_quiz_wrapper,
  body.layout-apple #view #tabela_scr_wrapper,
  body.layout-apple #view #tabela_zoox_wrapper,
  body.layout-apple #view #tabela_cpfconvites_wrapper,
  body.layout-apple #view #tabela_convites_wrapper,
  body.layout-apple #view #tabela_prejuizos_wrapper,
  body.layout-apple #view #tabela_acordos_wrapper,
  body.layout-apple #view #tabela_coblinhas_wrapper,
  body.layout-apple #view #tabela_empresas_wrapper,
  body.layout-apple #view #tabela_usuarios_wrapper,
  body.layout-apple #view #tabela_usuarios_grupos_wrapper,
  body.layout-apple #view #tabela_automacao_wrapper,
  body.layout-apple #view #tabela_blocklist_wrapper,
  body.layout-apple #view #tabela_analistagpt_wrapper,
  body.layout-apple #view #tabela_cbo_mte_wrapper,
  body.layout-apple #view #tabela_errostecnicos_wrapper,
  body.layout-apple #view #tabela_alertas_wrapper,
  body.layout-apple #view #tabela_assistentes_wrapper,
  body.layout-apple #view #tabela_regrasmotorrestricoes_wrapper,
  body.layout-apple #view #tabela_consultasmotorrestricoes_wrapper {
    animation: la-fade-up 0.3s ease both;
  }

  body.layout-apple #view .panel.panel-default > .panel-heading .nav-tabs {
    animation: la-fade-up 0.28s ease both;
  }
}

/* -------------------------------------------------------------------------- */
/* Forms / cadastros em modal (#modal_base → modal_padrao / modal_lg / …)      */
/* CSS-only; DOM/hooks preservados. NÃO animar #content (stacking modal).     */
/* -------------------------------------------------------------------------- */

body.layout-apple #modal_base .modal-body,
body.layout-apple #modal_padrao .modal-body,
body.layout-apple #modal_lg .modal-body,
body.layout-apple #modal_90 .modal-body {
  font-family: var(--la-font);
  letter-spacing: -0.011em;
  color: var(--la-text);
  background: var(--la-bg-elevated);
}

body.layout-apple #modal_base .setup-content,
body.layout-apple #modal_padrao .setup-content,
body.layout-apple #modal_lg .setup-content,
body.layout-apple #modal_90 .setup-content {
  margin: 0;
  padding: 1rem 1.15rem 0.35rem !important;
}

body.layout-apple #modal_base .setup-content.px-4,
body.layout-apple #modal_padrao .setup-content.px-4,
body.layout-apple #modal_lg .setup-content.px-4 {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

body.layout-apple #modal_base .form-group,
body.layout-apple #modal_padrao .form-group,
body.layout-apple #modal_lg .form-group,
body.layout-apple #modal_90 .form-group {
  margin-bottom: 0.95rem;
}

body.layout-apple #modal_base .form-group.m-2,
body.layout-apple #modal_padrao .form-group.m-2,
body.layout-apple #modal_lg .form-group.m-2 {
  margin: 0.55rem 0.35rem !important;
}

body.layout-apple #modal_base label.col-form-label,
body.layout-apple #modal_padrao label.col-form-label,
body.layout-apple #modal_lg label.col-form-label,
body.layout-apple #modal_90 label.col-form-label,
body.layout-apple #modal_base .form-group > label,
body.layout-apple #modal_padrao .form-group > label,
body.layout-apple #modal_lg .form-group > label {
  display: block;
  font-family: var(--la-font) !important;
  font-weight: 550 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--la-text-secondary) !important;
  margin-bottom: 0.3rem;
  padding-bottom: 0;
}

body.layout-apple #modal_base .form-control,
body.layout-apple #modal_padrao .form-control,
body.layout-apple #modal_lg .form-control,
body.layout-apple #modal_90 .form-control,
body.layout-apple #modal_base select.form-control,
body.layout-apple #modal_padrao select.form-control,
body.layout-apple #modal_lg select.form-control,
body.layout-apple #modal_base textarea.form-control,
body.layout-apple #modal_lg textarea.form-control {
  font-family: var(--la-font) !important;
  font-size: 0.875rem !important;
  letter-spacing: -0.01em;
  border-radius: var(--la-radius-sm) !important;
  border-color: var(--la-border-strong) !important;
  background-color: var(--la-bg-elevated) !important;
  color: var(--la-text) !important;
  min-height: 2.35rem;
}

body.layout-apple #modal_base .form-control:focus,
body.layout-apple #modal_padrao .form-control:focus,
body.layout-apple #modal_lg .form-control:focus,
body.layout-apple #modal_90 .form-control:focus,
body.layout-apple #modal_base select.form-control:focus,
body.layout-apple #modal_lg select.form-control:focus {
  border-color: var(--la-accent) !important;
  box-shadow: 0 0 0 3px var(--la-accent-soft) !important;
}

body.layout-apple #modal_base .form-control:disabled,
body.layout-apple #modal_padrao .form-control:disabled,
body.layout-apple #modal_lg .form-control:disabled,
body.layout-apple #modal_base .form-control[readonly],
body.layout-apple #modal_lg .form-control[readonly] {
  background: var(--la-bg) !important;
  color: var(--la-text-secondary) !important;
  opacity: 1;
}

body.layout-apple #modal_base .form-control::placeholder,
body.layout-apple #modal_padrao .form-control::placeholder,
body.layout-apple #modal_lg .form-control::placeholder {
  color: var(--la-text-tertiary) !important;
  font-weight: 400;
}

body.layout-apple #modal_base small.text-muted,
body.layout-apple #modal_padrao small.text-muted,
body.layout-apple #modal_lg small.text-muted,
body.layout-apple #modal_base .text-muted {
  font-size: 0.72rem !important;
  color: var(--la-text-tertiary) !important;
  letter-spacing: -0.01em;
}

/* Seções tipográficas (valores / linhas / score) — override inline #613AB5 */
body.layout-apple #modal_base .form-section-title,
body.layout-apple #modal_padrao .form-section-title,
body.layout-apple #modal_lg .form-section-title {
  font-family: var(--la-font) !important;
  font-size: 0.68rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--la-text-tertiary) !important;
  border-bottom: 1px solid var(--la-border) !important;
  margin: 1.15rem 0 0.75rem 0 !important;
  padding-bottom: 0.4rem !important;
}

body.layout-apple #modal_base .form-section-title[style*="margin-top: 0"],
body.layout-apple #modal_padrao .form-section-title[style*="margin-top: 0"],
body.layout-apple #modal_lg .form-section-title[style*="margin-top: 0"] {
  margin-top: 0 !important;
}

/* Footer interno do form (Salvar / Cancelar) — hairline, sem bloco cinza SB */
body.layout-apple #modal_base .modal-body .modal-footer,
body.layout-apple #modal_padrao .modal-body .modal-footer,
body.layout-apple #modal_lg .modal-body .modal-footer,
body.layout-apple #modal_90 .modal-body .modal-footer,
body.layout-apple #modal_base form .modal-footer,
body.layout-apple #modal_padrao form .modal-footer,
body.layout-apple #modal_lg form .modal-footer {
  background: transparent !important;
  border-top: 1px solid var(--la-border) !important;
  margin-top: 0.75rem;
  padding: 0.9rem 0.15rem 0.35rem !important;
  gap: 0.5rem;
}

body.layout-apple #modal_base form .modal-footer .btn,
body.layout-apple #modal_padrao form .modal-footer .btn,
body.layout-apple #modal_lg form .modal-footer .btn {
  border-radius: var(--la-radius-sm) !important;
  font-family: var(--la-font) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  box-shadow: none !important;
}

body.layout-apple #modal_base form .modal-footer .btn-lg,
body.layout-apple #modal_padrao form .modal-footer .btn-lg,
body.layout-apple #modal_lg form .modal-footer .btn-lg {
  font-size: 0.9375rem !important;
  padding: 0.55rem 1.15rem !important;
}

body.layout-apple #modal_base form .modal-footer .btn-secondary,
body.layout-apple #modal_padrao form .modal-footer .btn-secondary,
body.layout-apple #modal_lg form .modal-footer .btn-secondary,
body.layout-apple #modal_base form .modal-footer .btn-outline-secondary,
body.layout-apple #modal_padrao form .modal-footer .btn-outline-secondary {
  background: var(--la-bg-elevated) !important;
  border-color: var(--la-border-strong) !important;
  color: var(--la-text-secondary) !important;
}

/* Tabs internas de cadastro (Pedidos, Stop Humano) */
body.layout-apple #modal_base .nav-tabs,
body.layout-apple #modal_padrao .nav-tabs,
body.layout-apple #modal_lg .nav-tabs,
body.layout-apple #modal_90 .nav-tabs,
body.layout-apple #modal_base #pedido-cadastro-tabs,
body.layout-apple #modal_lg #pedido-cadastro-tabs {
  border-bottom: 1px solid var(--la-border) !important;
  gap: 0.1rem;
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
}

body.layout-apple #modal_base .nav-tabs .nav-link,
body.layout-apple #modal_padrao .nav-tabs .nav-link,
body.layout-apple #modal_lg .nav-tabs .nav-link,
body.layout-apple #modal_90 .nav-tabs .nav-link,
body.layout-apple #modal_base #pedido-cadastro-tabs .nav-link {
  font-family: var(--la-font) !important;
  font-weight: 550 !important;
  font-size: 0.8125rem !important;
  letter-spacing: -0.015em;
  color: var(--la-text-secondary) !important;
  border: none !important;
  border-radius: var(--la-radius-sm) var(--la-radius-sm) 0 0 !important;
  padding: 0.65rem 1rem !important;
  background: transparent !important;
}

body.layout-apple #modal_base .nav-tabs .nav-link:hover,
body.layout-apple #modal_lg .nav-tabs .nav-link:hover,
body.layout-apple #modal_base #pedido-cadastro-tabs .nav-link:hover {
  color: var(--la-text) !important;
  background: var(--la-bg-hover) !important;
}

body.layout-apple #modal_base .nav-tabs .nav-link.active,
body.layout-apple #modal_padrao .nav-tabs .nav-link.active,
body.layout-apple #modal_lg .nav-tabs .nav-link.active,
body.layout-apple #modal_90 .nav-tabs .nav-link.active,
body.layout-apple #modal_base #pedido-cadastro-tabs .nav-link.active {
  color: var(--la-accent) !important;
  font-weight: 650 !important;
  background: var(--la-accent-soft) !important;
  box-shadow: inset 0 -2px 0 var(--la-accent);
}

body.layout-apple #modal_base .tab-content,
body.layout-apple #modal_lg .tab-content,
body.layout-apple #modal_base #pedido-cadastro-tab-content {
  padding-top: 0.35rem;
}

body.layout-apple #modal_base .tab-pane,
body.layout-apple #modal_lg .tab-pane {
  font-family: var(--la-font);
}

/* Input-group / datetimepicker nos forms densos (acordos, boletos) */
body.layout-apple #modal_base .input-group-text,
body.layout-apple #modal_lg .input-group-text,
body.layout-apple #modal_padrao .input-group-text {
  background: var(--la-bg) !important;
  border-color: var(--la-border-strong) !important;
  color: var(--la-text-secondary) !important;
  border-radius: var(--la-radius-sm);
}

body.layout-apple #modal_base .input-group .form-control,
body.layout-apple #modal_lg .input-group .form-control {
  min-height: 2.35rem;
}

body.layout-apple #modal_base .bootstrap-datetimepicker-widget,
body.layout-apple #modal_lg .bootstrap-datetimepicker-widget {
  font-family: var(--la-font);
}

/* Bootstrap Toggle — accent CredVibes nos cadastros */
body.layout-apple #modal_base .toggle.btn,
body.layout-apple #modal_padrao .toggle.btn,
body.layout-apple #modal_lg .toggle.btn {
  border-radius: var(--la-radius-sm) !important;
  min-height: 1.85rem;
  font-family: var(--la-font);
}

body.layout-apple #modal_base .toggle-on.btn-credvibes,
body.layout-apple #modal_padrao .toggle-on.btn-credvibes,
body.layout-apple #modal_lg .toggle-on.btn-credvibes,
body.layout-apple #modal_base .btn-credvibes.toggle-on,
body.layout-apple #modal_lg .toggle .btn-credvibes {
  background-color: var(--la-accent) !important;
  border-color: var(--la-accent) !important;
}

body.layout-apple #modal_base .toggle-on.btn-success,
body.layout-apple #modal_padrao .toggle-on.btn-success,
body.layout-apple #modal_lg .toggle-on.btn-success {
  background-color: var(--la-success) !important;
  border-color: var(--la-success) !important;
}

/* Select2 dentro de modais de cadastro */
body.layout-apple #modal_base .select2-container--default .select2-selection--single,
body.layout-apple #modal_lg .select2-container--default .select2-selection--single,
body.layout-apple #modal_padrao .select2-container--default .select2-selection--single {
  border-radius: var(--la-radius-sm) !important;
  border-color: var(--la-border-strong) !important;
  min-height: 2.35rem;
  font-family: var(--la-font);
}

body.layout-apple #modal_base .select2-container--default.select2-container--focus .select2-selection--single,
body.layout-apple #modal_lg .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--la-accent) !important;
}

/* Assistentes — slider tipográfico */
body.layout-apple #modal_base .slider-container,
body.layout-apple #modal_lg .slider-container,
body.layout-apple #modal_padrao .slider-container {
  gap: 0.75rem;
  margin: 0.35rem 0 0.85rem;
}

body.layout-apple #modal_base .slider,
body.layout-apple #modal_lg .slider,
body.layout-apple #modal_padrao .slider {
  height: 4px !important;
  background: var(--la-border-strong) !important;
  border-radius: 999px !important;
}

body.layout-apple #modal_base .slider::-webkit-slider-thumb,
body.layout-apple #modal_lg .slider::-webkit-slider-thumb {
  width: 14px !important;
  height: 14px !important;
  background: var(--la-accent) !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 1px var(--la-accent-muted);
  border-radius: 50%;
  cursor: pointer;
}

body.layout-apple #modal_base .slider::-moz-range-thumb,
body.layout-apple #modal_lg .slider::-moz-range-thumb {
  width: 14px !important;
  height: 14px !important;
  background: var(--la-accent) !important;
  border: 2px solid #fff !important;
  border-radius: 50%;
  cursor: pointer;
}

body.layout-apple #modal_base .slider-value,
body.layout-apple #modal_lg .slider-value {
  font-family: var(--la-font);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--la-accent);
  letter-spacing: -0.02em;
  min-width: 2.5rem;
  text-align: right;
}

/* SmartWizard — permissões de grupo */
body.layout-apple #modal_base #smartwizard,
body.layout-apple #modal_lg #smartwizard,
body.layout-apple #modal_padrao #smartwizard {
  font-family: var(--la-font);
}

body.layout-apple #modal_base #smartwizard > .nav,
body.layout-apple #modal_lg #smartwizard > .nav,
body.layout-apple #modal_base #smartwizard > ul.nav,
body.layout-apple #modal_lg #smartwizard > ul.nav {
  background: var(--la-bg) !important;
  border-bottom: 1px solid var(--la-border) !important;
  padding: 0.5rem 0.35rem !important;
  gap: 0.2rem;
}

body.layout-apple #modal_base #smartwizard .nav .nav-link,
body.layout-apple #modal_lg #smartwizard .nav .nav-link {
  font-family: var(--la-font) !important;
  font-size: 0.75rem !important;
  font-weight: 550 !important;
  letter-spacing: -0.01em;
  color: var(--la-text-secondary) !important;
  border-radius: var(--la-radius-sm) !important;
  padding: 0.45rem 0.65rem !important;
}

body.layout-apple #modal_base #smartwizard .nav .nav-link.active,
body.layout-apple #modal_lg #smartwizard .nav .nav-link.active {
  background: var(--la-accent-soft) !important;
  color: var(--la-accent) !important;
  font-weight: 650 !important;
}

body.layout-apple #modal_base #smartwizard .nav .nav-link .num,
body.layout-apple #modal_lg #smartwizard .nav .nav-link .num {
  background: var(--la-accent) !important;
  color: #fff !important;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
}

body.layout-apple #modal_base #smartwizard .tab-content,
body.layout-apple #modal_lg #smartwizard .tab-content {
  padding: 0.85rem 0.5rem !important;
  background: var(--la-bg-elevated);
}

/* Grid denso Cobranças (acordos) — labels/colunas mais respiráveis */
body.layout-apple #modal_lg form .row > [class*="col-"] > .form-group,
body.layout-apple #modal_padrao form .row > [class*="col-"] > .form-group {
  margin-bottom: 0.75rem;
}

body.layout-apple #modal_lg form .table,
body.layout-apple #modal_padrao form .table {
  font-family: var(--la-font);
  font-size: 0.8125rem;
}

body.layout-apple #modal_lg form .table thead th,
body.layout-apple #modal_padrao form .table thead th {
  background: var(--la-bg) !important;
  color: var(--la-text-tertiary) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--la-border) !important;
  font-weight: 600;
}

/* -------------------------------------------------------------------------- */
/* Fase 5 residual — Relatório / Assistentes / Dashboard Boletos / densos     */
/* -------------------------------------------------------------------------- */

/* Relatório Pedidos — barra de filtros e stats com mais hierarquia */
body.layout-apple #view .crv-dash .crv-stat-label,
body.layout-apple #view .crv-dash [class*="stat"] .text-muted {
  font-size: 0.68rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--la-text-tertiary) !important;
  font-weight: 600;
}

body.layout-apple #view .crv-dash .crv-stat-value,
body.layout-apple #view .crv-dash .crv-stat strong,
body.layout-apple #view .crv-dash .crv-stat [style*="font-size"] {
  font-family: var(--la-font) !important;
  letter-spacing: -0.03em;
  color: var(--la-text) !important;
}

body.layout-apple #view .crv-dash label {
  font-size: 0.72rem !important;
  font-weight: 550;
  color: var(--la-text-secondary) !important;
  letter-spacing: 0.02em;
}

body.layout-apple #view .crv-dash .crv-card-body,
body.layout-apple #view .crv-dash [class*="card-body"] {
  padding: 1rem 1.15rem !important;
}

/* Assistentes listagem — densidade alinhada ao Sistema */
body.layout-apple #view #tabela_assistentes_wrapper .dataTables_filter input {
  border-radius: var(--la-radius-sm);
  border-color: var(--la-border-strong);
  font-family: var(--la-font);
}

body.layout-apple #view #tabela_assistentes_wrapper .dataTables_filter input:focus {
  border-color: var(--la-accent);
  box-shadow: 0 0 0 3px var(--la-accent-soft);
}

/* Dashboard Boletos — filtros + KPIs tipográficos */
body.layout-apple #view #boletos_filtro_form .form-control,
body.layout-apple #view #boletos_filtro_form select {
  border-radius: var(--la-radius-sm);
  border-color: var(--la-border-strong);
  font-family: var(--la-font);
  font-size: 0.8125rem;
  min-height: 2rem;
}

body.layout-apple #view #boletos_filtro_form .form-control:focus,
body.layout-apple #view #boletos_filtro_form select:focus {
  border-color: var(--la-accent);
  box-shadow: 0 0 0 3px var(--la-accent-soft);
}

body.layout-apple #view #boletos_filtro_form .btn-credvibes {
  border-radius: var(--la-radius-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
}

body.layout-apple #view .card-header #boletos_filtro_form + *,
body.layout-apple #view .card-header p.text-muted {
  font-size: 0.8125rem;
  color: var(--la-text-secondary) !important;
  letter-spacing: -0.01em;
}

body.layout-apple #view #boletos_filtro_form ~ *,
body.layout-apple #view .card:has(#boletos_filtro_form) > .card-body > .row > [class*="col-"] > .card {
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-md) !important;
  box-shadow: none !important;
}

body.layout-apple #view .card:has(#boletos_filtro_form) > .card-body > .row > [class*="col-"] > .card .text-xs {
  font-size: 0.65rem !important;
  letter-spacing: 0.05em;
  color: var(--la-text-tertiary) !important;
}

body.layout-apple #view .card:has(#boletos_filtro_form) > .card-body > .row > [class*="col-"] > .card .h5 {
  font-family: var(--la-font);
  letter-spacing: -0.03em;
  font-weight: 700;
}

/* Prejuízos / filtros densos — labels uppercase terciários */
body.layout-apple #view #prejuizos_filtros label,
body.layout-apple #view .prejuizos-filtros label,
body.layout-apple #view form[id*="prejuizo"] label,
body.layout-apple #view .card:has(#tabela_prejuizos) label.col-form-label,
body.layout-apple #view .card:has(#tabela_prejuizos) .form-group > label {
  font-size: 0.7rem !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--la-text-tertiary) !important;
}

body.layout-apple #view .card:has(#tabela_acordos) .form-control,
body.layout-apple #view .card:has(#tabela_prejuizos) .form-control,
body.layout-apple #view .card:has(#tabela_coblinhas) .form-control {
  border-radius: var(--la-radius-sm);
  font-family: var(--la-font);
  font-size: 0.8125rem;
}

/* Config extras / score forms densos na view */
body.layout-apple #view .config-extras-group .form-group > label,
body.layout-apple #view #configuracoes-extras label.col-form-label {
  font-size: 0.75rem !important;
  font-weight: 550;
  color: var(--la-text-secondary) !important;
  letter-spacing: -0.01em;
}

body.layout-apple #view .config-extras-group .form-control,
body.layout-apple #view #configuracoes-extras .form-control {
  border-radius: var(--la-radius-sm);
  font-family: var(--la-font);
}

/* Reforço: modal body sem stacking animado (só conteúdo tipográfico) */
body.layout-apple #modal_base .modal-content,
body.layout-apple #modal_padrao .modal-content,
body.layout-apple #modal_lg .modal-content,
body.layout-apple #modal_90 .modal-content {
  /* sem transform/filter/opacity — preserva cliques vs backdrop */
  transform: none;
  filter: none;
  opacity: 1;
}

/* -------------------------------------------------------------------------- */
/* Entrega F4~80% / F5~90% / F6~30% — refinamentos CSS                        */
/* Guardrail: fade só em #view; sem opacity/animation em #content             */
/* -------------------------------------------------------------------------- */

/* —— Fase 4: Dashboards — charts / listas menos SB Admin —— */
body.layout-apple #view .chart-area,
body.layout-apple #view .chart-bar {
  position: relative;
  padding-top: 0.25rem;
}

body.layout-apple #view .card.shadow.mb-4 .card-header.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 0.85rem !important;
}

body.layout-apple #view #youtube_top5_credvibes .list-group-item {
  border-left: none;
  border-right: none;
  padding: 0.9rem 0.15rem;
  font-family: var(--la-font);
}

body.layout-apple #view #youtube_top5_credvibes .list-group-item a {
  color: var(--la-text);
  font-weight: 550;
  letter-spacing: -0.02em;
  text-decoration: none;
}

body.layout-apple #view #youtube_top5_credvibes .list-group-item a:hover {
  color: var(--la-accent);
}

body.layout-apple #view .row.mb-4 > [class*="col-"] > .card {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.layout-apple #view .row.mb-4 > [class*="col-"] > .card:hover {
  border-color: var(--la-border-strong) !important;
  box-shadow: var(--la-shadow-sm) !important;
}

/* KPI strip — ícones mais discretos; valor dominante */
body.layout-apple #view .row.mb-4 .text-xs.font-weight-bold {
  margin-bottom: 0.45rem !important;
}

body.layout-apple #view .row.mb-4 .col.mr-2 .text-xs {
  max-width: 100%;
}

/* —— Fase 4: Stop Humano — toolbar DT + empty —— */
body.layout-apple #view #tabela_stophumano_wrapper .dataTables_length,
body.layout-apple #view #tabela_stophumano_wrapper .dataTables_filter {
  margin-bottom: 0.65rem;
}

body.layout-apple #view #tabela_stophumano_wrapper .dataTables_info {
  font-size: 0.75rem;
  color: var(--la-text-tertiary);
  letter-spacing: -0.01em;
  padding-top: 0.85rem !important;
}

body.layout-apple #view #tabela_stophumano tbody td.dataTables_empty {
  padding: 2.5rem 1rem !important;
  color: var(--la-text-tertiary);
  font-size: 0.875rem;
  letter-spacing: -0.01em;
}

body.layout-apple #view .stop-humano-metrics + .row,
body.layout-apple #view .stop-humano-metrics ~ #view_table {
  margin-top: 0.15rem;
}

body.layout-apple #view #tabela_pedidos_wrapper .dataTables_info,
body.layout-apple #view #tabela_clientesunicos_wrapper .dataTables_info {
  font-size: 0.75rem;
  color: var(--la-text-tertiary);
  letter-spacing: -0.01em;
}

body.layout-apple #view #tabela_pedidos tbody td .btn,
body.layout-apple #view #tabela_stophumano tbody td .btn,
body.layout-apple #view #tabela_clientesunicos tbody td .btn {
  border-radius: var(--la-radius-sm);
  font-weight: 550;
  letter-spacing: -0.01em;
}

body.layout-apple #view #tabela_pedidos tbody td .badge,
body.layout-apple #view #tabela_stophumano tbody td .badge,
body.layout-apple #view #tabela_clientesunicos tbody td .badge {
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--la-radius-sm);
  padding: 0.28em 0.5em;
}

/* —— Fase 4: Cliente detalhe — ações / badges densos —— */
body.layout-apple #view #myTabContent .btn-sm,
body.layout-apple #view #dados_cliente .btn-sm,
body.layout-apple #view #destaques ~ * .btn-sm {
  border-radius: var(--la-radius-sm);
  font-weight: 550;
  letter-spacing: -0.01em;
}

body.layout-apple #view #profileTab.nav-tabs .nav-link i {
  color: var(--la-text-tertiary);
  margin-right: 0.35rem;
  font-size: 0.85em;
}

body.layout-apple #view #profileTab.nav-tabs .nav-link.active i {
  color: var(--la-accent);
}

body.layout-apple #view .info-area-title i {
  color: var(--la-text-tertiary) !important;
  margin-right: 0.35rem;
  font-size: 0.9em;
}

body.layout-apple #view #myTabContent .table thead th {
  background: var(--la-bg) !important;
  color: var(--la-text-tertiary) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid var(--la-border) !important;
}

/* —— Fase 4: RG Validação — status / empty / toolbar —— */
body.layout-apple #view .rg-validacao-admin .status-badge,
body.layout-apple #view .rg-validacao-admin .badge-status,
body.layout-apple #view .rg-validacao-admin [class*="status-"] {
  font-family: var(--la-font);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--la-radius-sm);
}

body.layout-apple #view .rg-validacao-admin .empty-state,
body.layout-apple #view .rg-validacao-admin .data-table tbody td[colspan] {
  color: var(--la-text-tertiary);
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  padding: 2rem 1rem !important;
}

body.layout-apple #view .rg-validacao-admin .btn-primary,
body.layout-apple #view .rg-validacao-admin .btn-credvibes {
  border-radius: var(--la-radius-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
}

body.layout-apple #view .rg-validacao-admin .client-header .btn {
  border-radius: var(--la-radius-sm);
}

/* Pedidos console — timeline / steps um pouco mais tipográficos */
body.layout-apple #modal_lg #right-div .timeline,
body.layout-apple #modal_lg #right-div .list-group-item {
  font-family: var(--la-font);
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
}

body.layout-apple #modal_lg #right-div .badge {
  border-radius: var(--la-radius-sm);
  font-weight: 600;
}

/* —— Fase 5: forms densos restantes —— */
body.layout-apple #modal_base textarea.form-control,
body.layout-apple #modal_lg textarea.form-control,
body.layout-apple #modal_padrao textarea.form-control,
body.layout-apple #modal_90 textarea.form-control {
  min-height: 5.5rem;
  line-height: 1.45;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

body.layout-apple #modal_base .form-text,
body.layout-apple #modal_lg .form-text,
body.layout-apple #modal_padrao .form-text,
body.layout-apple #modal_base .help-block,
body.layout-apple #modal_lg small.text-muted,
body.layout-apple #modal_padrao small.text-muted {
  font-size: 0.72rem !important;
  color: var(--la-text-tertiary) !important;
  letter-spacing: -0.01em;
  margin-top: 0.25rem;
}

body.layout-apple #modal_base .form-check-label,
body.layout-apple #modal_lg .form-check-label,
body.layout-apple #modal_padrao .form-check-label,
body.layout-apple #modal_base .custom-control-label,
body.layout-apple #modal_lg .custom-control-label {
  font-family: var(--la-font);
  font-size: 0.8125rem;
  color: var(--la-text-secondary);
  letter-spacing: -0.01em;
}

body.layout-apple #modal_base .custom-file-label,
body.layout-apple #modal_lg .custom-file-label,
body.layout-apple #modal_padrao .custom-file-label {
  font-family: var(--la-font);
  font-size: 0.8125rem;
  border-radius: var(--la-radius-sm);
  border-color: var(--la-border-strong);
  color: var(--la-text-secondary);
}

body.layout-apple #modal_base .custom-file-input:focus ~ .custom-file-label,
body.layout-apple #modal_lg .custom-file-input:focus ~ .custom-file-label {
  border-color: var(--la-accent);
  box-shadow: 0 0 0 3px var(--la-accent-soft);
}

body.layout-apple #modal_base .d-flex.justify-content-between > .form-group,
body.layout-apple #modal_lg .d-flex.justify-content-between > .form-group,
body.layout-apple #modal_padrao .d-flex.justify-content-between > .form-group {
  flex: 1 1 0;
  min-width: 0;
}

body.layout-apple #modal_base .btn-xs,
body.layout-apple #modal_lg .btn-xs,
body.layout-apple #modal_padrao .btn-xs,
body.layout-apple #modal_base .btn-sm,
body.layout-apple #modal_lg .btn-sm {
  border-radius: var(--la-radius-sm);
  font-weight: 550;
  letter-spacing: -0.01em;
}

body.layout-apple #modal_base .modal-footer .btn-secondary,
body.layout-apple #modal_lg .modal-footer .btn-secondary,
body.layout-apple #modal_padrao .modal-footer .btn-secondary,
body.layout-apple #modal_base form .modal-footer .btn-secondary,
body.layout-apple #modal_lg form .modal-footer .btn-secondary {
  background: transparent !important;
  border: 1px solid var(--la-border-strong) !important;
  color: var(--la-text-secondary) !important;
  box-shadow: none !important;
}

body.layout-apple #modal_base .modal-footer .btn-secondary:hover,
body.layout-apple #modal_lg .modal-footer .btn-secondary:hover,
body.layout-apple #modal_padrao .modal-footer .btn-secondary:hover {
  background: var(--la-bg-hover) !important;
  color: var(--la-text) !important;
}

/* View densa — filtros genéricos / fieldsets / legends */
body.layout-apple #view fieldset {
  border: 1px solid var(--la-border);
  border-radius: var(--la-radius-md);
  padding: 0.85rem 1rem 0.5rem;
  margin-bottom: 1rem;
  background: var(--la-bg-elevated);
}

body.layout-apple #view fieldset legend {
  font-family: var(--la-font);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--la-text);
  width: auto;
  padding: 0 0.35rem;
  margin-bottom: 0.35rem;
}

body.layout-apple #view .card .form-row > [class*="col-"] > label,
body.layout-apple #view .card form .row > [class*="col-"] > label:not(.btn) {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--la-text-tertiary);
}

body.layout-apple #view .nav-pills .nav-link {
  border-radius: var(--la-radius-sm);
  font-family: var(--la-font);
  font-size: 0.8125rem;
  font-weight: 550;
  letter-spacing: -0.015em;
  color: var(--la-text-secondary);
}

body.layout-apple #view .nav-pills .nav-link.active {
  background: var(--la-accent-soft) !important;
  color: var(--la-accent) !important;
  font-weight: 650;
}

/* Topbar alerts dropdown — header tipográfico no apple */
body.layout-apple .dropdown-header.bg-credvibes {
  background: var(--la-bg) !important;
  color: var(--la-text-tertiary) !important;
  font-size: 0.68rem !important;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--la-border);
}

/* Dropdown user — hairline */
body.layout-apple .topbar .dropdown-menu {
  border: 1px solid var(--la-border);
  box-shadow: var(--la-shadow-md);
  border-radius: var(--la-radius-md);
  overflow: hidden;
}

/* Panel listagens genéricas — menos chrome */
body.layout-apple #view .panel.panel-default > .panel-heading {
  background: transparent !important;
  border-bottom: 1px solid var(--la-border);
  font-family: var(--la-font);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--la-text);
  padding: 0.85rem 1rem;
}

body.layout-apple #view .panel.panel-default {
  border: 1px solid var(--la-border);
  border-radius: var(--la-radius-md);
  box-shadow: none;
  background: var(--la-bg-elevated);
}

/* Boletos / Cobranças — progress bars tipográficas */
body.layout-apple #view .progress {
  height: 0.35rem;
  border-radius: 999px;
  background: var(--la-border);
  overflow: hidden;
}

body.layout-apple #view .progress-bar {
  border-radius: 999px;
}

body.layout-apple #view .progress-bar.bg-credvibes,
body.layout-apple #view .progress-bar.bg-primary {
  background-color: var(--la-accent) !important;
}

/* Safety: banner nunca cria stacking em #content */
body.layout-apple .layout-optin-banner {
  transform: none;
  filter: none;
  opacity: 1;
  animation: none;
}

/* -------------------------------------------------------------------------- */
/* Componentes residuais — tooltip / popover / scroll DT / table-responsive    */
/* CSS-only sob body.layout-apple; clássico intacto.                          */
/* -------------------------------------------------------------------------- */

body.layout-apple .tooltip {
  font-family: var(--la-font);
  font-size: 0.75rem;
  letter-spacing: -0.01em;
}

body.layout-apple .tooltip-inner {
  background-color: rgba(29, 29, 31, 0.92);
  color: #fff;
  border-radius: var(--la-radius-sm);
  padding: 0.4rem 0.65rem;
  box-shadow: var(--la-shadow-md);
  max-width: 260px;
}

body.layout-apple .bs-tooltip-top .arrow::before,
body.layout-apple .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: rgba(29, 29, 31, 0.92);
}

body.layout-apple .bs-tooltip-bottom .arrow::before,
body.layout-apple .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: rgba(29, 29, 31, 0.92);
}

body.layout-apple .bs-tooltip-left .arrow::before,
body.layout-apple .bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: rgba(29, 29, 31, 0.92);
}

body.layout-apple .bs-tooltip-right .arrow::before,
body.layout-apple .bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: rgba(29, 29, 31, 0.92);
}

body.layout-apple .popover {
  font-family: var(--la-font);
  border: 1px solid var(--la-border);
  border-radius: var(--la-radius-md);
  box-shadow: var(--la-shadow-md);
  letter-spacing: -0.011em;
}

body.layout-apple .popover-header {
  background: transparent;
  border-bottom: 1px solid var(--la-border);
  color: var(--la-text);
  font-weight: 650;
  letter-spacing: -0.02em;
  font-size: 0.875rem;
}

body.layout-apple .popover-body {
  color: var(--la-text-secondary);
  font-size: 0.8125rem;
}

/* DataTables em modo scrollX/scrollY — cabeçalho e corpo destacados */
body.layout-apple .dataTables_scrollHead,
body.layout-apple .dataTables_scrollHeadInner,
body.layout-apple .dataTables_scrollHead table.dataTable {
  background: var(--la-bg) !important;
  background-image: none !important;
  border-bottom: none !important;
}

body.layout-apple .dataTables_scrollHead table.dataTable thead th {
  border-bottom: 1px solid var(--la-border) !important;
}

body.layout-apple .dataTables_scrollBody table.dataTable thead th {
  border-bottom: none !important;
}

body.layout-apple .dataTables_scrollBody {
  border-bottom: 1px solid var(--la-border);
}

body.layout-apple .dataTables_scrollBody::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.layout-apple .dataTables_scrollBody::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 999px;
}

body.layout-apple .dataTables_scrollBody::-webkit-scrollbar-track {
  background: transparent;
}

body.layout-apple #view .table-responsive {
  border-radius: var(--la-radius-md);
}

body.layout-apple #view .table-responsive::-webkit-scrollbar {
  height: 8px;
}

body.layout-apple #view .table-responsive::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 999px;
}

body.layout-apple #view table.table-sm td,
body.layout-apple #view table.table-sm th {
  padding: 0.45rem 0.55rem;
}

body.layout-apple #view .thead-light th {
  background: var(--la-bg) !important;
  color: var(--la-text-tertiary) !important;
  border-color: var(--la-border) !important;
}

/*
 * Datetimepicker (tempusdominus) e Bootstrap Toggle fora de modal — as regras
 * anteriores só cobriam #modal_base / #modal_lg, deixando os forms densos
 * dentro de #view com o visual padrão.
 */
body.layout-apple .bootstrap-datetimepicker-widget {
  font-family: var(--la-font);
  border: 1px solid var(--la-border);
  border-radius: var(--la-radius-md);
  box-shadow: var(--la-shadow-md);
  letter-spacing: -0.01em;
  color: var(--la-text);
}

body.layout-apple .bootstrap-datetimepicker-widget table th {
  color: var(--la-text-tertiary);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.layout-apple .bootstrap-datetimepicker-widget table th.picker-switch,
body.layout-apple .bootstrap-datetimepicker-widget table th.prev,
body.layout-apple .bootstrap-datetimepicker-widget table th.next {
  text-transform: none;
  letter-spacing: -0.015em;
  font-size: 0.8125rem;
  color: var(--la-text);
}

body.layout-apple .bootstrap-datetimepicker-widget table td,
body.layout-apple .bootstrap-datetimepicker-widget table td span {
  border-radius: var(--la-radius-sm);
}

body.layout-apple .bootstrap-datetimepicker-widget table td.day:hover,
body.layout-apple .bootstrap-datetimepicker-widget table td.hour:hover,
body.layout-apple .bootstrap-datetimepicker-widget table td.minute:hover,
body.layout-apple .bootstrap-datetimepicker-widget table td.second:hover,
body.layout-apple .bootstrap-datetimepicker-widget table td span:hover {
  background: var(--la-bg-hover);
}

body.layout-apple .bootstrap-datetimepicker-widget table td.active,
body.layout-apple .bootstrap-datetimepicker-widget table td.active:hover,
body.layout-apple .bootstrap-datetimepicker-widget table td span.active {
  background: var(--la-accent) !important;
  background-image: none !important;
  color: var(--la-text-on-accent) !important;
  text-shadow: none !important;
}

body.layout-apple .bootstrap-datetimepicker-widget table td.today::before {
  border-bottom-color: var(--la-accent) !important;
}

body.layout-apple .bootstrap-datetimepicker-widget table td.old,
body.layout-apple .bootstrap-datetimepicker-widget table td.new {
  color: var(--la-text-tertiary);
}

body.layout-apple .toggle.btn {
  border-radius: var(--la-radius-sm) !important;
  font-family: var(--la-font);
  letter-spacing: -0.01em;
}

body.layout-apple .toggle-on.btn-credvibes,
body.layout-apple .toggle .btn-credvibes {
  background-color: var(--la-accent) !important;
  border-color: var(--la-accent) !important;
}

body.layout-apple .toggle-off.btn-light,
body.layout-apple .toggle-off.btn-secondary {
  background-color: var(--la-bg) !important;
  border-color: var(--la-border-strong) !important;
  color: var(--la-text-secondary) !important;
}

/*
 * Cliente detalhe — internos declarados no <style> da própria view (JSON
 * viewer, toggles, chat). Cores semânticas de status/mensagem preservadas.
 */
body.layout-apple #view .json-viewer {
  background: var(--la-bg) !important;
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-control);
  font-family: var(--la-font-mono);
  font-size: 0.75rem;
  line-height: 1.55;
  padding: 0.85rem 1rem;
}

body.layout-apple #view .json-bracket,
body.layout-apple #view .json-toggle {
  color: var(--la-text-tertiary);
}

body.layout-apple #view .json-container {
  margin: var(--la-space-4) 0;
}

body.layout-apple #view .btn-toggle {
  color: var(--la-accent);
}

body.layout-apple #view .btn-toggle:hover {
  color: var(--la-accent-hover);
}

body.layout-apple #view .risk-indicator {
  height: 0.5rem;
  width: 2.75rem;
  border-radius: 999px;
}

body.layout-apple #view .messages .message {
  border: 1px solid var(--la-border);
  border-radius: var(--la-radius-card);
  box-shadow: none;
}

body.layout-apple #view .message-time {
  color: var(--la-text-tertiary);
  font-family: var(--la-font);
}

body.layout-apple #view .my-icons {
  margin-top: var(--la-space-4);
  gap: var(--la-space-3);
}

body.layout-apple #view .my-icons a {
  font-size: 1.75rem;
  padding: 1rem;
}

body.layout-apple #view .my-icons a i {
  font-size: 2rem;
}

/* -------------------------------------------------------------------------- */
/* Responsividade do shell apple (Fase 2 residual)                            */
/* Guardrail: nada de opacity / animation / transform em #content.            */
/* -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  body.layout-apple .container-fluid {
    padding-left: var(--la-space-4);
    padding-right: var(--la-space-4);
  }

  body.layout-apple .page-header-shell h3,
  body.layout-apple .container-fluid > .card.bg-credvibes h3 {
    font-size: 1.55rem;
  }
}

@media (max-width: 767.98px) {
  /*
   * SB Admin colapsa a sidebar para width:0 abaixo de 768px. O apple fixava
   * 15.5rem / 6.5rem em qualquer viewport, deixando o menu impossível de
   * esconder pelo #sidebarToggleTop. Aqui devolvemos a semântica original.
   */
  body.layout-apple .sidebar.bg-gradient-credvibes,
  body.layout-apple .bg-gradient-credvibes.sidebar,
  body.layout-apple #accordionSidebar.sidebar {
    width: 13.5rem !important;
  }

  body.layout-apple .sidebar.toggled,
  body.layout-apple #accordionSidebar.sidebar.toggled {
    width: 0 !important;
    overflow: hidden;
    border-right: none;
    padding-bottom: 0;
  }

  body.layout-apple .container-fluid {
    padding-left: var(--la-space-3);
    padding-right: var(--la-space-3);
    padding-bottom: var(--la-space-5);
  }

  body.layout-apple .topbar.navbar,
  body.layout-apple .navbar.topbar {
    padding-left: var(--la-space-2);
    padding-right: var(--la-space-2);
  }

  body.layout-apple .page-header-shell h3,
  body.layout-apple .container-fluid > .card.bg-credvibes h3 {
    font-size: 1.35rem;
  }

  body.layout-apple #view .dataTables_wrapper .dataTables_length,
  body.layout-apple #view .dataTables_wrapper .dataTables_filter {
    float: none !important;
    width: 100%;
    text-align: left !important;
  }

  body.layout-apple #view .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
    margin-left: 0 !important;
  }

  body.layout-apple #view .dataTables_wrapper .dt-buttons {
    width: 100%;
  }

  body.layout-apple #view .rg-validacao-admin .kpi-grid {
    gap: var(--la-space-3);
  }
}

/*
 * Sem modo contraído em apple (decisão explícita — só a sidebar expandida
 * existe). `.toggled` continua podendo ser aplicada pelo JS compartilhado
 * (sb-admin-2.js, estado de sessão persistido em menu.php), então em vez de
 * estilizar um rail de ícones aqui (como antes), neutralizamos qualquer
 * efeito visual/estrutural dela no desktop — inclusive o flyout do vendor
 * (.collapse vira position:absolute fora do fluxo quando .toggled), que
 * senão ficaria "solto" sobre o conteúdo com a sidebar agora sempre larga.
 */
@media (min-width: 768px) {
  /* vendor (sb-admin-2.css) põe o <span> do texto em display:block e o
     <i> do ícone com margin-right:0 quando .toggled — sem isso o ícone
     quebra pra linha de cima e o texto pra linha de baixo, mesmo com a
     sidebar já forçada a ficar larga. */
  body.layout-apple .sidebar.toggled .nav-item .nav-link {
    display: flex !important;
    align-items: center !important;
  }

  body.layout-apple .sidebar.toggled .nav-item .nav-link i.fa-fw:first-child,
  body.layout-apple .sidebar.toggled .nav-item .nav-link > i:first-child {
    display: inline-flex !important;
    margin-right: 0.65rem !important;
    margin-bottom: 0 !important;
    width: 1.1rem !important;
    font-size: 0.85rem !important;
  }

  body.layout-apple .sidebar.toggled .nav-item .nav-link span {
    display: inline !important;
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
  }

  body.layout-apple .sidebar.toggled .nav-item .collapse,
  body.layout-apple .sidebar.toggled .nav-item .collapsing {
    position: static !important;
    left: auto !important;
    top: auto !important;
    animation: none !important;
  }
}

@media (max-width: 575.98px) {
  body.layout-apple .modal-dialog {
    margin: 0.5rem;
  }

  body.layout-apple .modal-header,
  body.layout-apple .modal-body,
  body.layout-apple .modal-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  body.layout-apple .modal-footer {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  body.layout-apple #view .rg-validacao-admin .kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------- */
/* Acessibilidade — foco visível, movimento reduzido, contraste                */
/* CSS-only sob body.layout-apple. Guardrails: fade só em #view; nada de       */
/* animation / opacity / transform em #content ou ancestrais de #modal_base.   */
/* -------------------------------------------------------------------------- */

/*
 * Atalho "pular para o conteúdo" — renderizado só no modo apple (adm.php).
 * Fica fora da tela até receber foco por teclado.
 */
body.layout-apple .la-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1060;
  padding: 0.55rem 0.95rem;
  background: var(--la-bg-elevated);
  color: var(--la-accent) !important;
  border: 1px solid var(--la-accent);
  border-radius: var(--la-radius-sm);
  font-family: var(--la-font);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: var(--la-shadow-md);
  text-decoration: none;
}

body.layout-apple .la-skip-link:focus {
  left: 0.75rem;
  top: 0.75rem;
}

/*
 * Foco visível por teclado. Antes só `.menu-toggle` e alguns inputs tinham
 * indicação de foco; botões, links, tabs, paginação e itens de menu ficavam
 * sem sinal algum (Bootstrap remove o outline nativo).
 */
body.layout-apple a:focus-visible,
body.layout-apple button:focus-visible,
body.layout-apple .btn:focus-visible,
body.layout-apple [role="button"]:focus-visible,
body.layout-apple .nav-link:focus-visible,
body.layout-apple .collapse-item:focus-visible,
body.layout-apple .menu-item:focus-visible,
body.layout-apple .dropdown-item:focus-visible,
body.layout-apple .page-link:focus-visible,
body.layout-apple .paginate_button:focus-visible,
body.layout-apple .close:focus-visible,
body.layout-apple .dt-button:focus-visible,
body.layout-apple summary:focus-visible,
body.layout-apple [tabindex]:not([tabindex="-1"]):focus-visible {
  outline: var(--la-focus-outline);
  outline-offset: var(--la-focus-outline-offset);
}

body.layout-apple .form-control:focus-visible,
body.layout-apple .custom-select:focus-visible,
body.layout-apple select.form-control:focus-visible,
body.layout-apple textarea.form-control:focus-visible,
body.layout-apple input[type="checkbox"]:focus-visible,
body.layout-apple input[type="radio"]:focus-visible {
  outline: var(--la-focus-outline);
  outline-offset: 1px;
}

/* Mouse/toque não recebem o anel (mantém o visual limpo) */
body.layout-apple .btn:focus:not(:focus-visible),
body.layout-apple .nav-link:focus:not(:focus-visible),
body.layout-apple .close:focus:not(:focus-visible),
body.layout-apple .dropdown-item:focus:not(:focus-visible) {
  outline: none;
}

/* Alvo de toque mínimo no X dos modais (era ~20px) */
body.layout-apple .modal-header .close {
  min-width: 2.25rem;
  min-height: 2.25rem;
  border-radius: var(--la-radius-sm);
}

/*
 * Movimento reduzido — desliga só as animações decorativas do apple e os
 * transforms de hover. Spinners/loading continuam animando (feedback
 * essencial) e as transições do Bootstrap (modal/collapse) não são tocadas,
 * para não interferir no ciclo de transitionend.
 */
@media (prefers-reduced-motion: reduce) {
  body.layout-apple #view,
  body.layout-apple #view .card-kpi,
  body.layout-apple #view > .row:first-of-type .card,
  body.layout-apple #view .crv-dash .crv-tabs,
  body.layout-apple #view [id$="_wrapper"] {
    animation: none !important;
  }

  body.layout-apple .card:hover,
  body.layout-apple #view .card-kpi:hover,
  body.layout-apple #view .crv-card:hover,
  body.layout-apple #view .crv-stat:hover,
  body.layout-apple table.dataTable tbody tr:hover {
    transform: none !important;
  }

  body.layout-apple .btn,
  body.layout-apple .topbar.navbar,
  body.layout-apple .sidebar .nav-item .nav-link,
  body.layout-apple .sidebar .collapse-item,
  body.layout-apple #view .crv-dash .crv-tab,
  body.layout-apple #view .crv-dash .dfc-filter-btn {
    transition: none !important;
  }
}

/* Preferência de mais contraste — bordas e textos de apoio mais firmes */
@media (prefers-contrast: more) {
  body.layout-apple {
    --la-border: rgba(0, 0, 0, 0.14);
    --la-border-strong: rgba(0, 0, 0, 0.3);
    --la-text-secondary: #4c4c52;
    --la-text-tertiary: #55555c;
  }
}

/*
 * Preenchimentos semânticos: o Bootstrap/SB Admin escreve label branco sobre
 * tons claros (#1cc88a, #36b9cc, #f6c23e, #a1a1a6) — todos abaixo de 3:1.
 * Badges solidas já usam --la-fill-* na seção de componentes; aqui cobrimos
 * botões semânticos e variantes ainda não mapeadas.
 */
body.layout-apple .badge-danger {
  background-color: var(--la-fill-danger) !important;
  color: #fff !important;
}

body.layout-apple .badge-light {
  background-color: var(--la-bg) !important;
  color: var(--la-text-secondary) !important;
  border: 1px solid var(--la-border);
}

body.layout-apple .btn-info {
  background-color: var(--la-fill-info) !important;
  border-color: var(--la-fill-info) !important;
  color: #fff !important;
  border-radius: var(--la-radius-sm);
}

body.layout-apple .btn-info:hover,
body.layout-apple .btn-info:focus {
  background-color: #0b5c73 !important;
  border-color: #0b5c73 !important;
}

body.layout-apple .btn-danger {
  background-color: var(--la-fill-danger) !important;
  border-color: var(--la-fill-danger) !important;
  color: #fff !important;
}

body.layout-apple .btn-danger:hover,
body.layout-apple .btn-danger:focus {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
}

body.layout-apple .btn-link {
  color: var(--la-accent) !important;
  font-weight: 550;
  letter-spacing: -0.01em;
}

body.layout-apple .btn-link:hover {
  color: var(--la-accent-hover) !important;
}

/* -------------------------------------------------------------------------- */
/* Consistência de estados — vazio / carregando / erro / validação            */
/* -------------------------------------------------------------------------- */

/*
 * `.text-muted` aparece ~70x nas views como texto de apoio e ficava no cinza
 * do SB Admin (#858796 → 3.56:1). No apple passa a usar o token secundário.
 */
body.layout-apple #view .text-muted,
body.layout-apple .container-fluid > .text-muted,
body.layout-apple #view small.text-muted,
body.layout-apple #view .card .text-muted {
  color: var(--la-text-secondary) !important;
}

/* Estado vazio genérico (não só o da RG Validação) */
body.layout-apple #view .empty-state,
body.layout-apple #view .no-results,
body.layout-apple #view .sem-registros {
  color: var(--la-text-secondary);
  font-family: var(--la-font);
  font-size: 0.875rem;
  letter-spacing: -0.015em;
  text-align: center;
  padding: var(--la-space-6) var(--la-space-4);
}

body.layout-apple #view .empty-state i,
body.layout-apple #view .no-results i {
  color: var(--la-text-tertiary);
  font-size: 1.5rem;
  margin-bottom: var(--la-space-3);
  display: block;
}

body.layout-apple #view .empty-state p,
body.layout-apple #view .no-results p {
  margin-bottom: 0;
}

/* Célula "nenhum registro" renderizada por JS em tabelas fora do DataTables */
body.layout-apple #view table tbody td[colspan].text-center.text-muted,
body.layout-apple #view table tbody td[colspan].text-muted {
  padding: 2.25rem 1rem !important;
  color: var(--la-text-secondary) !important;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
}

/* Carregando — spinners e placeholders com a mesma linguagem */
body.layout-apple #view .fa-spin,
body.layout-apple #modal_base .fa-spin {
  color: var(--la-accent);
}

body.layout-apple #view .loading,
body.layout-apple #view .carregando {
  color: var(--la-text-secondary);
  font-family: var(--la-font);
  letter-spacing: -0.01em;
}

/* Erro em bloco dentro da view (mesma família dos alerts) */
body.layout-apple #view .alert-secondary {
  background: var(--la-bg);
  border-color: var(--la-border-strong);
  color: var(--la-text-secondary);
}

body.layout-apple #view .error-state,
body.layout-apple #view .erro-state {
  color: #991b1b;
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: var(--la-radius-md);
  padding: var(--la-space-4);
  font-size: 0.875rem;
  letter-spacing: -0.01em;
}

/* Validação de formulário (login-custom.js / score_configuracoes.js) */
body.layout-apple .form-control.is-invalid,
body.layout-apple .custom-select.is-invalid,
body.layout-apple .was-validated .form-control:invalid {
  border-color: var(--la-fill-danger) !important;
  background-image: none !important;
  padding-right: 0.75rem;
}

body.layout-apple .form-control.is-invalid:focus,
body.layout-apple .was-validated .form-control:invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

body.layout-apple .invalid-feedback,
body.layout-apple .was-validated .form-control:invalid ~ .invalid-feedback {
  color: #991b1b;
  font-size: 0.75rem;
  letter-spacing: -0.01em;
  margin-top: 0.35rem;
}

body.layout-apple .form-control.is-valid,
body.layout-apple .was-validated .form-control:valid {
  border-color: var(--la-fill-success) !important;
  background-image: none !important;
}

body.layout-apple .valid-feedback {
  color: var(--la-success-text);
  font-size: 0.75rem;
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------------------------- */
/* Relatório Pedidos — resíduos indigo inline (abas geral/gráficos/próximos/…) */
/* Os estilos vêm por `style="…"` no PHP, então o remapeamento é por           */
/* attr-selector, sempre dentro de .crv-dash (escopo da view).                 */
/* -------------------------------------------------------------------------- */

body.layout-apple #view .crv-dash [style*="#4f46e5"],
body.layout-apple #view .crv-dash [style*="#6366f1"] {
  color: var(--la-accent) !important;
}

body.layout-apple #view .crv-dash [style*="linear-gradient(135deg,#4f46e5"],
body.layout-apple #view .crv-dash [style*="linear-gradient(135deg, #4f46e5"] {
  background: var(--la-accent) !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: none !important;
  border-radius: var(--la-radius-sm) !important;
}

body.layout-apple #view .crv-dash [style*="#eef2ff"] {
  background: var(--la-accent-soft) !important;
  color: var(--la-accent) !important;
  border-radius: var(--la-radius-sm) !important;
}

body.layout-apple #view .crv-dash [style*="#f3f4f6"] {
  background: var(--la-bg) !important;
  color: var(--la-text-secondary) !important;
  border-radius: var(--la-radius-sm) !important;
}

body.layout-apple #view .crv-dash [style*="#2563eb"],
body.layout-apple #view .crv-dash [style*="#3b82f6"] {
  color: var(--la-accent) !important;
}

/* Cinzas do Tailwind usados inline → tokens do apple (mesma hierarquia) */
body.layout-apple #view .crv-dash [style*="#111827"] {
  color: var(--la-text) !important;
}

body.layout-apple #view .crv-dash [style*="#374151"],
body.layout-apple #view .crv-dash [style*="#4b5563"] {
  color: var(--la-text-secondary) !important;
}

body.layout-apple #view .crv-dash [style*="#e5e7eb"] {
  border-color: var(--la-border-strong) !important;
}

/* -------------------------------------------------------------------------- */
/* Responsividade residual — grids inline e chrome em telas estreitas         */
/* -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  /* Grids inline do relatório (repeat(5,1fr), 1fr 2fr, …) empilham no mobile */
  body.layout-apple #view .crv-dash [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  body.layout-apple #view .crv-dash .crv-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  body.layout-apple #view .crv-dash .crv-tab {
    white-space: nowrap;
  }

  /* Dropdowns da topbar não podem estourar a viewport */
  body.layout-apple .topbar .dropdown-menu {
    max-width: calc(100vw - 1.5rem);
  }

  /* Console de pedidos (left/right) empilhado em vez de duas colunas */
  body.layout-apple #modal_lg #left-div,
  body.layout-apple #modal_lg #right-div {
    width: 100% !important;
    float: none !important;
  }

  /* Barras de filtros densas ocupam a linha inteira */
  body.layout-apple #view .form-inline .form-control,
  body.layout-apple #view .form-inline .custom-select {
    width: 100%;
    margin-bottom: var(--la-space-2);
  }
}

@media (max-width: 575.98px) {
  body.layout-apple #view .crv-dash {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.layout-apple .layout-optin-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* -------------------------------------------------------------------------- */
/* Título de página (cabecalho_page.php, .page-header-shell) — ajustes finais */
/* -------------------------------------------------------------------------- */

/* CAUSA REAL da borda (confirmada via DevTools): #content .card (regra
 * genérica de "Content area — cards leves") tem um ID no seletor
 * (especificidade 1,2,1) e vencia meu reset anterior (0,2,1 / 0,2,2, sem
 * ID) mesmo com !important e vindo depois no arquivo — ID sempre pesa mais
 * que quantidade de classes, independente de ordem. .page-header-shell
 * também é .card, então herdava a borda genérica de card "leve" por
 * engano. Repito o #content aqui pra igualar/superar a especificidade. */
body.layout-apple #content .page-header-shell,
body.layout-apple #content .card.page-header-shell,
body.layout-apple #content .page-header-shell * {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Ícone "i" (link de Documentação) no canto direito do título — remove */
body.layout-apple .page-header-shell a[data-toggle="tooltip"][title="Documentação"] {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Topbar — toggle de tema claro/escuro + avatar com iniciais                 */
/* (padrão do protótipo Claude Artifact a044058e, ver                        */
/* md/redesign-apple-padrao-header-menu-modal-documentos.md)                  */
/* -------------------------------------------------------------------------- */

body.layout-apple .la-theme-toggle-item {
  display: flex !important;
  align-items: center;
}

/* height/padding com !important: body.layout-apple .topbar .nav-link (regra
 * genérica pra todo link da topbar) tem height:var(--la-topbar-height)
 * !important (~52px, a altura da topbar inteira) e padding padrão do
 * Bootstrap .nav-link — como esse botão também tem classe nav-link, herdava
 * os dois e ficava um retângulo alto/estranho em vez de um quadrado 32px. */
body.layout-apple .la-theme-toggle-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 2rem !important;
  height: 2rem !important;
  padding: 0 !important;
  margin: auto 0;
  border-radius: 8px;
  border: none;
  background: none;
  color: var(--la-text-secondary) !important;
  cursor: pointer;
  transition: background var(--la-duration-fast) var(--la-ease), color var(--la-duration-fast) var(--la-ease);
}

body.layout-apple .la-theme-toggle-btn:hover {
  background: var(--la-bg-hover);
  color: var(--la-text) !important;
}

body.layout-apple .la-theme-toggle-btn:focus-visible {
  box-shadow: var(--la-focus-ring);
  outline: none;
}

body.layout-apple .la-theme-toggle-btn i {
  font-size: 0.95rem;
}

/* Ícone mostrado representa a ação (clique pra ir pro modo oposto) — sol
   quando o modo ativo é escuro, lua quando o modo ativo é claro. Default:
   claro (sem override manual, SO não prefere escuro) → mostra lua. */
body.layout-apple .la-theme-icon-light {
  display: none;
}

body.layout-apple .la-theme-icon-dark {
  display: inline-block;
}

@media (prefers-color-scheme: dark) {
  body.layout-apple:not([data-la-theme="light"]) .la-theme-icon-light {
    display: inline-block;
  }

  body.layout-apple:not([data-la-theme="light"]) .la-theme-icon-dark {
    display: none;
  }
}

body.layout-apple[data-la-theme="dark"] .la-theme-icon-light {
  display: inline-block;
}

body.layout-apple[data-la-theme="dark"] .la-theme-icon-dark {
  display: none;
}

body.layout-apple[data-la-theme="light"] .la-theme-icon-light {
  display: none;
}

body.layout-apple[data-la-theme="light"] .la-theme-icon-dark {
  display: inline-block;
}

/* Avatar com iniciais substitui o texto "Seja bem vindo, X!" — iniciais
   calculadas no PHP (templates/topbar.php), sem precisar de JS. */
body.layout-apple .topbar-user-label {
  display: none !important;
}

body.layout-apple .la-topbar-avatar {
  display: flex !important;
  align-items: center;
  justify-content: center;
  align-self: center !important;
  width: 1.9rem !important;
  height: 1.9rem !important;
  min-width: 1.9rem;
  min-height: 1.9rem;
  max-width: 1.9rem;
  max-height: 1.9rem;
  border-radius: 50% !important;
  background: var(--la-accent-soft);
  color: var(--la-accent);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0;
  flex: none;
}