/* ==========================================================================
   TELAS INTERNAS + ADMIN — BLOCO S4
   Padrao claro da maquete 2026-09-15
   Telas: Aulas, Roteiros, Divulgacao, Minha operacao, Comissoes, Ajuda, Perfil, Administracao
   Zero azul-marinho (#15274f, #0d1733) e zero preto absoluto (#000000)
   ========================================================================== */

/* == CONTAINER DAS TELAS INTERNAS == */
.telas-container,
.operacao-wrap,
.comissoes-wrap,
.aulas-wrap,
.scripts-wrap,
.creatives-wrap,
.admin-wrap {
  max-width: var(--de-max, 1860px);
  margin: 0 auto;
  box-sizing: border-box;
}

.help-wrap,
.profile-wrap {
  max-width: 1040px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* == CABEÇALHO PADRÃO CLARO (RÓTULO, TÍTULO, SUBTÍTULO) == */
.tela-heading,
header.heading {
  margin-bottom: 36px !important;
}
.tela-heading h1,
header.heading h1 {
  margin: 0 0 8px !important;
  font-family: var(--de-fonte-titulo, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 800 !important;
  font-size: var(--de-tamanho-titulo-tela, clamp(30px, 5vw, 46px)) !important;
  letter-spacing: -.025em !important;
  color: var(--de-grafite, #181818) !important;
  line-height: 1.15 !important;
}
.tela-heading p,
header.heading p {
  margin: 0 !important;
  font-family: var(--de-fonte-texto, 'Inter', sans-serif) !important;
  font-size: 18px !important;
  color: var(--de-texto-secundario, #5D6068) !important;
  line-height: 1.5 !important;
}

/* == CARDS PADRÃO CLARO == */
.card {
  background: var(--de-branco, #FFFFFF) !important;
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  border-radius: 22px !important;
  padding: 32px !important;
  box-shadow: none !important;
  color: var(--de-grafite, #181818) !important;
}
.card h2 {
  font-family: var(--de-fonte-titulo, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  letter-spacing: -.02em !important;
  color: var(--de-grafite, #181818) !important;
  margin: 0 0 12px !important;
}

/* == CONTROLES, INPUTS E FORMULÁRIOS == */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  height: 52px;
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  border-radius: 12px !important;
  padding: 0 14px !important;
  font-size: 15px !important;
  background: var(--de-branco, #FFFFFF) !important;
  color: var(--de-grafite, #181818) !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color .15s ease !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--de-laranja-principal, #FF7617) !important;
  outline: none !important;
}
textarea {
  height: auto !important;
  min-height: 120px !important;
  padding: 14px !important;
  resize: vertical !important;
}
label.field {
  display: grid !important;
  gap: 8px !important;
  margin-bottom: 8px;
}
label.field > span {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--de-grafite, #181818) !important;
}

/* == BOTÕES == */
button.button,
.button,
button[type="submit"],
.button-primary {
  height: 54px;
  padding: 0 26px;
  border: 0;
  border-radius: 14px;
  background: var(--de-laranja-principal, #FF7617) !important;
  color: #FFFFFF !important;
  font-family: var(--de-fonte-titulo, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  box-shadow: var(--de-sombra-botao, 0 10px 24px var(--de-laranja-principal-a30));
  transition: background .18s ease, transform .18s ease;
}
button.button:hover,
.button:hover,
button[type="submit"]:hover {
  background: var(--de-laranja-hover, #E2560B) !important;
}
.button.secondary,
button.secondary {
  background: var(--de-branco, #FFFFFF) !important;
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  color: var(--de-grafite, #181818) !important;
  box-shadow: none !important;
}
.button.secondary:hover,
button.secondary:hover {
  border-color: var(--de-laranja-principal, #FF7617) !important;
  color: var(--de-laranja-principal, #FF7617) !important;
}
.button.quiet,
button.quiet,
#logout,
#mobile-logout {
  height: 52px;
  padding: 0 24px;
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  border-radius: 999px !important;
  background: var(--de-branco, #FFFFFF) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--de-texto-secundario, #5D6068) !important;
  cursor: pointer;
  box-shadow: none !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.button.quiet:hover,
button.quiet:hover,
#logout:hover,
#mobile-logout:hover {
  border-color: var(--de-grafite, #181818) !important;
  color: var(--de-grafite, #181818) !important;
}

/* == TABELAS == */
.table-scroll {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--de-borda-interna, #E7E3DC) !important;
  border-radius: 14px !important;
  overflow: hidden;
  background: var(--de-branco, #FFFFFF) !important;
}
th {
  background: var(--de-marfim-apoio, #FBFAF8) !important;
  border-bottom: 1px solid var(--de-borda-interna, #E7E3DC) !important;
  border-top: none !important;
  color: var(--de-texto-secundario, #5D6068) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  padding: 14px 20px !important;
  text-transform: none !important;
}
td {
  padding: 18px 20px !important;
  border-top: 1px solid var(--de-divisoria, #F0EDE7) !important;
  border-bottom: none !important;
  color: var(--de-grafite, #181818) !important;
  background: var(--de-branco, #FFFFFF) !important;
  font-size: 15px !important;
  vertical-align: middle !important;
}
tr:first-child td {
  border-top: none !important;
}

/* == BADGES DE STATUS == */
.badge {
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: none !important;
  display: inline-block !important;
}
.badge.active, .badge.approved, .badge.completed {
  background: var(--de-status-contrato-fundo, #DFF1E4) !important;
  color: var(--de-status-contrato-texto, #175E34) !important;
}
.badge.pending, .badge.analysis {
  background: var(--de-status-novo-fundo, #FDE3CE) !important;
  color: var(--de-status-novo-texto, #7A3206) !important;
}
.badge.suspended {
  background: var(--de-status-frio-fundo, #FBE5E5) !important;
  color: var(--de-status-frio-texto, #8E2A26) !important;
}

/* ==========================================================================
   TELA: MINHA OPERAÇÃO
   ========================================================================== */
.operacao-score-card {
  background: var(--de-branco, #FFFFFF) !important;
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  border-radius: 22px !important;
  padding: 32px !important;
  display: grid !important;
  gap: 28px !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  align-items: center !important;
  margin-bottom: 24px !important;
}
.operacao-score-label {
  margin: 0 0 4px !important;
  font-size: 15px !important;
  color: var(--de-texto-secundario, #5D6068) !important;
}
.operacao-score-amount {
  margin: 0 !important;
  font-family: var(--de-fonte-titulo, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 800 !important;
  font-size: clamp(26px, 3.4vw, 38px) !important;
  letter-spacing: -.02em !important;
  color: var(--de-grafite, #181818) !important;
}
.operacao-score-desc {
  margin: 8px 0 0 !important;
  font-size: 14px !important;
  color: var(--de-texto-secundario, #5D6068) !important;
  max-width: 420px !important;
  line-height: 1.5 !important;
}
.operacao-stats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)) !important;
  gap: 18px !important;
}
.operacao-stat-col {
  border-left: 1px solid var(--de-borda, #DEDBD5) !important;
  padding-left: 16px !important;
}
.operacao-stat-col b {
  display: block !important;
  font-family: var(--de-fonte-titulo, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 800 !important;
  font-size: clamp(23px, 3.2vw, 30px) !important;
  color: var(--de-laranja-hover, #E2560B) !important;
}
.operacao-stat-col span {
  display: block !important;
  margin: 2px 0 0 !important;
  font-size: 14px !important;
  color: var(--de-texto-secundario, #5D6068) !important;
}
.operacao-empty-card {
  background: var(--de-branco, #FFFFFF) !important;
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  border-radius: 22px !important;
  padding: 56px 32px !important;
  text-align: center !important;
  margin-bottom: 24px !important;
}
.operacao-empty-icon {
  width: 88px !important;
  height: 88px !important;
  margin: 0 auto 22px !important;
  border-radius: 24px !important;
  background: var(--de-laranja-claro2, #FDE3CE) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ==========================================================================
   TELA: COMISSÕES
   ========================================================================== */
.comissoes-grid {
  display: grid !important;
  gap: 24px !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  margin-bottom: 24px !important;
}
/* Card Total de comissões */
.card.score:not(:has(.stats)),
.comissoes-wrap .card.score,
.comissao-total-card {
  background: var(--de-laranja-claro) !important;
  border: 1px solid #F9C79C !important;
  border-radius: 22px !important;
  padding: 32px !important;
  box-shadow: none !important;
}
.card.score:not(:has(.stats)) .meteors,
.comissoes-wrap .card.score .meteors,
.comissao-total-card .meteors {
  display: none !important;
}

/* 1. Rótulo: laranja escuro pequeno */
.comissao-total-label,
.card.score:not(:has(.stats)) .comissao-total-label,
.card.score:not(:has(.stats)) p:first-child,
.card.score:not(:has(.stats)) > div > p:first-child {
  margin: 0 0 6px !important;
  font-size: 15px !important;
  color: var(--de-laranja-escuro) !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
}

/* 2. Valor: grande em grafite (peso 800, 44px) */
.comissao-total-amount,
.card.score:not(:has(.stats)) .comissao-total-amount,
.card.score:not(:has(.stats)) .amount,
.card.score:not(:has(.stats)) p.comissao-total-amount,
.card.score:not(:has(.stats)) > div > p:nth-child(2) {
  margin: 0 !important;
  font-family: var(--de-fonte-titulo, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 800 !important;
  font-size: 44px !important;
  letter-spacing: -.02em !important;
  color: #181818 !important;
  line-height: 1.15 !important;
}

/* 3. Contagem: cinza pequeno (14px) */
.comissao-total-count,
.card.score:not(:has(.stats)) .comissao-total-count,
.card.score:not(:has(.stats)) p.comissao-total-count,
.card.score:not(:has(.stats)) > div > p:nth-child(3),
.card.score:not(:has(.stats)) small {
  margin: 8px 0 0 !important;
  font-size: 14px !important;
  color: #8A8A82 !important;
  font-weight: 400 !important;
  display: block !important;
}
.comissao-regras-card {
  background: var(--de-branco, #FFFFFF) !important;
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  border-radius: 22px !important;
  padding: 32px !important;
}
.comissao-regras-card h2 {
  margin: 0 0 10px !important;
  font-family: var(--de-fonte-titulo, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 800 !important;
  font-size: 24px !important;
  color: var(--de-grafite, #181818) !important;
}
.comissao-regras-body {
  margin: 0 0 12px !important;
  font-size: 16px !important;
  color: var(--de-grafite, #181818) !important;
  white-space: pre-wrap !important;
}
.comissao-regras-note {
  margin: 0 !important;
  font-size: 15px !important;
  color: var(--de-texto-secundario, #5D6068) !important;
}

/* ==========================================================================
   TELA: AULAS E TREINAMENTOS
   ========================================================================== */
.aulas-grid {
  display: grid !important;
  gap: 28px !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
}
.lesson-card {
  background: var(--de-branco, #FFFFFF) !important;
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}
.lesson-card .thumb {
  aspect-ratio: 16 / 9 !important;
  background: #F2EFE9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--de-texto-secundario, #5D6068) !important;
  font-size: 15px !important;
  border-bottom: 1px solid var(--de-divisoria, #F0EDE7) !important;
  position: relative !important;
}
.lesson-card .thumb-play {
  width: 64px !important;
  height: 64px !important;
  border-radius: 999px !important;
  background: var(--de-laranja-principal, #FF7617) !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  box-shadow: 0 4px 14px var(--de-laranja-principal-a30) !important;
}
.lesson-card .thumb:not(:has(.thumb-play)) {
  font-size: 0 !important;
  color: transparent !important;
}
.lesson-card .thumb:not(:has(.thumb-play))::after {
  content: '▶' !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 999px !important;
  background: var(--de-laranja-principal, #FF7617) !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  box-shadow: 0 4px 14px var(--de-laranja-principal-a30) !important;
}
/* Aula com capa (21/09): a capa cobre a miniatura inteira e o play automatico sai de cena. */
.lesson-card .thumb:has(.thumb-capa)::after {
  content: none !important;
}
.lesson-card .body {
  padding: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex: 1 !important;
}
.lesson-tag,
.lesson-card .body small:first-child {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  color: var(--de-laranja-hover, #E2560B) !important;
  text-transform: uppercase !important;
}
.lesson-card:first-child .lesson-tag,
.lesson-card:first-child .body small:first-child {
  font-size: 0 !important;
  color: transparent !important;
}
.lesson-card:first-child .lesson-tag::after,
.lesson-card:first-child .body small:first-child::after {
  content: 'COMECE POR AQUI' !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  color: var(--de-laranja-hover, #E2560B) !important;
  text-transform: uppercase !important;
  display: inline-block !important;
}
.lesson-card:nth-child(n+2) .lesson-tag,
.lesson-card:nth-child(n+2) .body small:first-child {
  font-size: 0 !important;
  color: transparent !important;
}
.lesson-card:nth-child(n+2) .lesson-tag::after,
.lesson-card:nth-child(n+2) .body small:first-child::after {
  content: 'PRÓXIMA ETAPA' !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  color: var(--de-laranja-hover, #E2560B) !important;
  text-transform: uppercase !important;
  display: inline-block !important;
}
.lesson-card h2 {
  margin: 0 !important;
  font-family: var(--de-fonte-titulo, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  color: var(--de-grafite, #181818) !important;
}
.lesson-card p.muted {
  margin: 0 0 8px !important;
  font-size: 16px !important;
  color: var(--de-texto-secundario, #5D6068) !important;
}
.lesson-card .button {
  margin-top: auto !important;
  align-self: flex-start !important;
}
.lesson-locked .button {
  background: var(--de-divisoria, #F0EDE7) !important;
  color: var(--de-texto-secundario, #5D6068) !important;
  box-shadow: none !important;
}
/* Vídeo enviado dentro do aviso segue a proporção do próprio arquivo (em pé ou deitado): popups.css cuida dele. */
.player:not(.popup-video > video), video.player:not(.popup-video > video) {
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
}
.player, video.player {
  border-radius: 16px !important;
  background: #F2EFE9 !important;
  border: 1px solid var(--de-borda, #DEDBD5) !important;
}
.video-empty {
  aspect-ratio: 16 / 9 !important;
  display: grid !important;
  place-items: center !important;
  background: #F2EFE9 !important;
  color: var(--de-texto-secundario, #5D6068) !important;
  border-radius: 16px !important;
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  padding: 25px !important;
  text-align: center !important;
  font-size: 15px !important;
}

/* ==========================================================================
   TELA: ROTEIROS
   ========================================================================== */
.scripts-grid {
  display: grid !important;
  gap: 24px !important;
}
.script-card {
  background: var(--de-branco, #FFFFFF) !important;
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  border-radius: 22px !important;
  padding: 32px !important;
}
.script-card h2 {
  margin: 0 0 4px !important;
  font-family: var(--de-fonte-titulo, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  color: var(--de-grafite, #181818) !important;
}
.script-tag {
  margin: 0 0 20px !important;
  font-size: 14px !important;
  color: var(--de-texto-terciario, #9A9A93) !important;
  display: block !important;
}
.script-body {
  margin: 0 0 22px !important;
  background: var(--de-marfim, #F7F5F1) !important;
  border-left: 3px solid var(--de-laranja-principal, #FF7617) !important;
  border-radius: 12px !important;
  padding: 22px !important;
  font-size: 16px !important;
  color: var(--de-grafite, #181818) !important;
  white-space: pre-wrap !important;
  line-height: 1.6 !important;
}

/* ==========================================================================
   TELA: MATERIAIS DE DIVULGAÇÃO
   ========================================================================== */
.creatives-grid {
  display: grid !important;
  gap: 24px !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
}
.creative-card {
  background: var(--de-branco, #FFFFFF) !important;
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  border-radius: 20px !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.creative-preview-box {
  aspect-ratio: 4 / 5 !important;
  border-radius: 14px !important;
  background: var(--de-marfim, #F7F5F1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.creative-preview-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.creative-check {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--de-grafite, #181818) !important;
}
.creative-check input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--de-laranja-principal, #FF7617) !important;
}
.creative-download-btn {
  height: 48px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--de-marfim, #F7F5F1) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--de-grafite, #181818) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .18s ease, color .18s ease !important;
}
.creative-download-btn:hover {
  background: var(--de-laranja-principal, #FF7617) !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   TELA: AJUDA
   ========================================================================== */
.help-search-card {
  background: var(--de-branco, #FFFFFF) !important;
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  border-radius: 22px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
}
.help-search-form {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}
.help-search-form input {
  flex: 1 !important;
  min-width: 240px !important;
  height: 56px !important;
  border-radius: 14px !important;
  padding: 0 18px !important;
  font-size: 16px !important;
}
.help-ticket-card {
  background: var(--de-branco, #FFFFFF) !important;
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  border-radius: 22px !important;
  padding: 32px !important;
  margin-bottom: 24px !important;
}
.help-list-card {
  background: var(--de-branco, #FFFFFF) !important;
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  border-radius: 22px !important;
  padding: 32px !important;
}
.help-ticket-item {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  border-top: 1px solid var(--de-borda-interna, #E7E3DC) !important;
  padding-top: 20px !important;
  margin-top: 16px !important;
}
.help-ticket-item b {
  display: block !important;
  font-size: 17px !important;
  color: var(--de-grafite, #181818) !important;
}
.help-ticket-item p {
  font-size: 15px !important;
  color: var(--de-texto-secundario, #5D6068) !important;
  margin: 4px 0 0 !important;
}

/* ==========================================================================
   TELA: PERFIL
   ========================================================================== */
.profile-card {
  background: var(--de-branco, #FFFFFF) !important;
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  border-radius: 22px !important;
  padding: 32px !important;
  margin-bottom: 24px !important;
}
.profile-card h2 {
  margin: 0 0 4px !important;
  font-size: 26px !important;
}
.profile-email-text {
  margin: 0 0 24px !important;
  font-size: 15px !important;
  color: var(--de-texto-secundario, #5D6068) !important;
}
.profile-form-grid {
  display: grid !important;
  gap: 18px !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
}
.profile-form-grid .wide-col {
  grid-column: 1 / -1 !important;
}

/* ==========================================================================
   TELA: ADMINISTRAÇÃO (PADRÃO CLARO DA MAQUETE - SEM AZUL-MARINHO OU PRETO)
   ========================================================================== */
.admin-theme-dark,
.admin-theme-light {
  background: transparent !important;
  color: var(--de-grafite, #181818) !important;
  box-shadow: none !important;
  border: none !important;
}
/* Aviso de espaço de arquivos (topo de toda a administração). Aparência própria, sem .card: a faixa
   pintava a cor do nível por estilo inline e o `border ... !important` do .card apagava tudo, então
   atenção e crítico saíam iguais a qualquer cartão da página. Cores já usadas no projeto: o âmbar
   de .note e .badge.analysis para atenção, e a família "frio" dos tokens para crítico. */
.aviso-espaco {
  display: block !important;
  margin: 0 0 24px !important;
  padding: 18px 22px !important;
  border: 1px solid #EAD6A6 !important;
  border-left: 6px solid #B37D08 !important;
  border-radius: 14px !important;
  background: #FFF6DF !important;
  color: #705115 !important;
  font-family: var(--de-fonte-texto, 'Inter', sans-serif) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}
.aviso-espaco b {
  color: inherit !important;
  font-weight: 800 !important;
}
.aviso-espaco--critico {
  border: 1px solid var(--de-status-frio-ponto, #B4342F) !important;
  border-left: 6px solid var(--de-status-frio-ponto, #B4342F) !important;
  background: var(--de-status-frio-fundo, #FBE5E5) !important;
  color: var(--de-status-frio-texto, #8E2A26) !important;
}

.admin-tabs {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 28px !important;
  border: none !important;
  overflow: visible !important;
}
.admin-tabs a {
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  background: var(--de-branco, #FFFFFF) !important;
  color: var(--de-texto-secundario, #5D6068) !important;
  border-radius: 999px !important;
  padding: 11px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all .15s ease !important;
  min-height: auto !important;
  box-shadow: none !important;
}
.admin-tabs a:hover {
  border-color: var(--de-laranja-principal, #FF7617) !important;
  color: var(--de-laranja-principal, #FF7617) !important;
  background: var(--de-branco, #FFFFFF) !important;
}
.admin-tabs a.current {
  background: var(--de-laranja-principal, #FF7617) !important;
  border-color: var(--de-laranja-principal, #FF7617) !important;
  color: #FFFFFF !important;
}
#admin-body .card {
  background: var(--de-branco, #FFFFFF) !important;
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  border-radius: 22px !important;
  padding: 32px !important;
  box-shadow: none !important;
  color: var(--de-grafite, #181818) !important;
}
#admin-body h2 {
  margin: 0 0 6px !important;
  font-family: var(--de-fonte-titulo, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 800 !important;
  font-size: 28px !important;
  color: var(--de-grafite, #181818) !important;
}
#admin-body p.muted {
  margin: 0 0 26px !important;
  font-size: 16px !important;
  color: var(--de-texto-secundario, #5D6068) !important;
  max-width: 780px !important;
}
#admin-body table {
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: var(--de-branco, #FFFFFF) !important;
}
#admin-body th {
  background: var(--de-marfim-apoio, #FBFAF8) !important;
  border-bottom: 1px solid var(--de-borda-interna, #E7E3DC) !important;
  color: var(--de-texto-secundario, #5D6068) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  padding: 16px 22px !important;
  text-transform: none !important;
}
#admin-body td {
  padding: 18px 22px !important;
  background: var(--de-branco, #FFFFFF) !important;
  border-top: 1px solid var(--de-divisoria, #F0EDE7) !important;
  border-bottom: none !important;
  color: var(--de-grafite, #181818) !important;
  font-size: 14px !important;
}
.admin-theme-dark tr,
.admin-theme-dark .card.table-scroll tr,
.admin-theme-light tr,
.admin-theme-light .card.table-scroll tr,
#admin-body tr,
#admin-body .card.table-scroll tr {
  background: var(--de-branco, #FFFFFF) !important;
  border-color: var(--de-borda-interna, #E7E3DC) !important;
  color: var(--de-grafite, #181818) !important;
}
.admin-theme-dark table tr:hover td,
.admin-theme-light table tr:hover td,
#admin-body table tr:hover td {
  background: var(--de-marfim-apoio, #FBFAF8) !important;
  color: var(--de-grafite, #181818) !important;
}
.admin-theme-dark .card,
.admin-theme-light .card {
  background: var(--de-branco, #FFFFFF) !important;
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  color: var(--de-grafite, #181818) !important;
}
.admin-theme-dark .card p,
.admin-theme-dark .card .muted,
.admin-theme-dark .card small,
.admin-theme-light .card p,
.admin-theme-light .card .muted,
.admin-theme-light .card small {
  color: var(--de-texto-secundario, #5D6068) !important;
}
.admin-theme-dark .list-item,
.admin-theme-light .list-item,
.admin-theme-dark .order-row,
.admin-theme-light .order-row {
  border-bottom: 1px solid var(--de-divisoria, #F0EDE7) !important;
  color: var(--de-grafite, #181818) !important;
}
.admin-theme-dark input:not([type=checkbox]),
.admin-theme-dark textarea,
.admin-theme-dark select,
.admin-theme-light input:not([type=checkbox]),
.admin-theme-light textarea,
.admin-theme-light select {
  background: var(--de-branco, #FFFFFF) !important;
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  color: var(--de-grafite, #181818) !important;
}
.admin-theme-dark input::placeholder,
.admin-theme-dark textarea::placeholder,
.admin-theme-light input::placeholder,
.admin-theme-light textarea::placeholder {
  color: var(--de-texto-secundario, #5D6068) !important;
}
.admin-theme-dark .field > span,
.admin-theme-dark .field > label,
.admin-theme-dark label.label,
.admin-theme-dark .check,
.admin-theme-light .field > span,
.admin-theme-light .field > label,
.admin-theme-light label.label,
.admin-theme-light .check {
  color: var(--de-grafite, #181818) !important;
}
.admin-theme-dark .toolbar button.secondary,
.admin-theme-dark button.secondary,
.admin-theme-light .toolbar button.secondary,
.admin-theme-light button.secondary {
  background: var(--de-branco, #FFFFFF) !important;
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  color: var(--de-grafite, #181818) !important;
}
.admin-theme-dark .toolbar button.secondary:hover,
.admin-theme-dark button.secondary:hover,
.admin-theme-light .toolbar button.secondary:hover,
.admin-theme-light button.secondary:hover {
  border-color: var(--de-laranja-principal, #FF7617) !important;
  color: var(--de-laranja-principal, #FF7617) !important;
}
.admin-theme-dark button.quiet,
.admin-theme-light button.quiet {
  background: transparent !important;
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  color: var(--de-texto-secundario, #5D6068) !important;
}
.admin-theme-dark button.quiet:hover,
.admin-theme-light button.quiet:hover {
  border-color: var(--de-grafite, #181818) !important;
  color: var(--de-grafite, #181818) !important;
}
#admin-body td button, #admin-body td .button {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
#admin-body td button.secondary,
#admin-body td button[data-user-detail] {
  background: var(--de-laranja-principal, #FF7617) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
#admin-body td button.secondary:hover,
#admin-body td button[data-user-detail]:hover {
  background: var(--de-laranja-hover, #E2560B) !important;
}
#admin-body td button:not(.secondary):not([data-user-detail]) {
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  background: var(--de-branco, #FFFFFF) !important;
  color: var(--de-grafite, #181818) !important;
  box-shadow: none !important;
}
#admin-body td button:not(.secondary):not([data-user-detail]):hover {
  border-color: var(--de-laranja-principal, #FF7617) !important;
  color: var(--de-laranja-principal, #FF7617) !important;
}

/* Celular do Admin e tabelas móveis (.crm-mobile-card antigo de style.css) */
.crm-mobile-card,
.admin-theme-dark .crm-mobile-card,
.admin-theme-light .crm-mobile-card,
#admin-body .crm-mobile-card,
.admin-wrap .crm-mobile-card {
  background: var(--de-branco, #FFFFFF) !important;
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  color: var(--de-grafite, #181818) !important;
  box-shadow: none !important;
}
.crm-mobile-card *,
.admin-theme-dark .crm-mobile-card *,
.admin-theme-light .crm-mobile-card * {
  color: var(--de-grafite, #181818);
}
.crm-mobile-card .muted,
.crm-mobile-card small,
.admin-theme-dark .crm-mobile-card .muted,
.admin-theme-dark .crm-mobile-card small {
  color: var(--de-texto-secundario, #5D6068) !important;
}

@media(max-width: 600px) {
  .card.table-scroll tr,
  .admin-theme-dark .card.table-scroll tr,
  .admin-theme-light .card.table-scroll tr,
  #admin-body .card.table-scroll tr,
  .admin-wrap .card.table-scroll tr {
    background: var(--de-branco, #FFFFFF) !important;
    border: 1px solid var(--de-borda, #DEDBD5) !important;
    box-shadow: none !important;
    color: var(--de-grafite, #181818) !important;
  }
  .card.table-scroll td,
  .admin-theme-dark .card.table-scroll td,
  .admin-theme-light .card.table-scroll td,
  #admin-body .card.table-scroll td {
    border-bottom: 1px solid var(--de-divisoria, #F0EDE7) !important;
    color: var(--de-grafite, #181818) !important;
  }
}

/* Modal / Dialog */
dialog {
  border: 1px solid var(--de-borda, #DEDBD5) !important;
  border-radius: 22px !important;
  padding: 32px !important;
  background: var(--de-branco, #FFFFFF) !important;
  color: var(--de-grafite, #181818) !important;
  box-shadow: 0 20px 60px rgba(24,24,24,.15) !important;
}
dialog::backdrop {
  background: rgba(24, 24, 24, 0.45) !important;
  backdrop-filter: blur(4px) !important;
}
/* Aviso ao entrar: diálogo mais largo que o padrão de 720px para a imagem ganhar destaque. */
dialog:has(.popup-aviso) {
  max-width: 860px;
}
dialog h2 {
  font-family: var(--de-fonte-titulo, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 800 !important;
  font-size: 24px !important;
  color: var(--de-grafite, #181818) !important;
}

/* ==========================================================================
   BLOCO SUAS SENHAS NO PERFIL (§5.4)
   ========================================================================== */
.profile-passwords-card {
  margin-top: 24px !important;
}
.profile-password-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--de-borda, #DEDBD5) !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}
.profile-password-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 220px !important;
}
.profile-password-label {
  font-family: var(--de-fonte-titulo, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--de-texto-secundario, #5D6068) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}
.profile-password-masked,
.profile-password-val {
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--de-grafite, #181818) !important;
  letter-spacing: .08em !important;
}
.profile-password-actions {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}
.profile-pwd-btn {
  font-size: 13px !important;
  padding: 6px 14px !important;
  height: 38px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}
.profile-password-note {
  margin-top: 16px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--de-texto-secundario, #5D6068) !important;
}

/* ==========================================================================
   TELA ACESSE SUA I.A DE SIMULAÇÃO (§5.6)
   ========================================================================== */
.tool-hub-single {
  max-width: 680px;
  margin: 0 auto;
}
.tool-credentials-box {
  background: #F7F5F1;
  border: 1px solid #DEDBD5;
  border-radius: 14px;
  padding: 18px;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tool-cred-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tool-cred-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tool-cred-lbl {
  font-size: 12px;
  font-weight: 700;
  color: #5D6068;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tool-cred-val {
  font-size: 16px;
  font-weight: 700;
  color: #181818;
}
.de-open-ia-btn {
  width: 100% !important;
  height: 56px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  margin-top: 12px !important;
  cursor: pointer !important;
}

/* ==========================================================================
   AUDITORIA DE TELA (fase 3): correções da faixa CSS, C-03 a C-07
   ========================================================================== */
/* C-03 (A-001, A-106): título/módulo longo sem espaço quebra dentro do cartão do afiliado, do cartão
   "Continue com a ..." e da tabela de Aulas e roteiros do admin (a aba com [data-new-content]), em vez
   de esticar a tela. */
.lesson-card h2,
.lesson-card .body small,
.de-v2-proximo-etapa,
.de-v2-proximo-etapa span,
#admin-body:has([data-new-content]) td,
#admin-body:has([data-new-content]) td small {
  overflow-wrap: anywhere;
}
.de-v2-proximo-corpo {
  min-width: 0;
}
/* C-03 (A-003, A-105): e-mail de acesso em "Suas senhas" quebra e não alarga o cartão do perfil. */
.profile-password-val {
  overflow-wrap: anywhere;
  max-width: 100%;
}
@media (max-width: 760px) {
  /* C-03 (A-002): só a tabela de Roteiro de Abordagens ganha largura mínima e rola de lado, em vez de
     espremer as colunas (.table-scroll é usado também por telas protegidas: não mexer no genérico). */
  .rot-admin .table-scroll {
    overflow-x: auto;
  }
  .rot-admin .table-scroll > table {
    min-width: 560px;
  }
  .profile-password-info {
    min-width: 0 !important;
  }
}
/* C-04 (A-010): a barra fixa Cancelar/Salvar (dialog .form-actions, ~74 px) cobria o fim do conteúdo; com
   este respiro, foco por Tab e rolagem até um botão o deixam acima da barra. */
dialog {
  scroll-padding-bottom: 96px;
}
/* C-05 (A-114, A-009): alvos de toque de 44 px no celular (links de texto, caixas de marcar e o olho da senha)
   e no link "VIP" do menu (21 px de largura). Áreas protegidas ficam de fora: cada regra tem o escopo da
   tela do achado (Afiliados = [data-user-detail]; criativos; Configurações; Termos). */
.de-shell-nav a.de-nav-link[href="#grupo-vip"] {
  min-width: 44px;
  justify-content: center;
}
@media (max-width: 760px) {
  .forgot-link,
  .aline-login-link-top,
  .aline-login-box p a,
  .de-v2-ia-link,
  .de-meet-btn,
  #admin-body:has([data-user-detail]) td a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .creative-front label.check,
  #dashboard-editor label.check,
  #terms-form label.check {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .eye-icon-btn,
  .aline-password-toggle-btn,
  #login-password-toggle,
  #registration-password-toggle {
    width: 44px !important;
    min-width: 44px !important;
    margin-right: -8px !important;
  }
}
/* C-06 (A-120): o contêiner do campo de senha já desenha o foco (borda laranja + sombra, auth.css); o input
   de dentro perdia a borda própria só no estado normal e ganhava outra ao focar. Foco por teclado segue visível no contêiner. */
.aline-input-wrapper > input.aline-input,
.aline-input-wrapper > input.aline-input:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
/* C-06 (A-119): respiro entre a legenda do material e o botão "Baixar arquivo". */
.creative-front .mobile-only {
  margin-top: 10px;
}
/* C-07 (A-012): no celular as 21 abas da Administração viram uma faixa rolável de lado (eram 9 linhas que
   tomavam a primeira tela). A aba ativa fica à vista pelo scroll-snap; sem JS. */
@media (max-width: 760px) {
  .admin-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    padding-bottom: 8px !important;
  }
  .admin-tabs a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }
}
/* C-03 (A-001, revisão da Prova): o título da página de uma aula antiga com texto longo sem espaço
   (#aulas/<id>) deixava a página com milhares de px; a faixa do título também precisa poder encolher. */
.aulas-wrap .heading h1 {
  overflow-wrap: anywhere;
}
.aulas-wrap .heading > div {
  min-width: 0;
}
@media (max-width: 600px) {
  /* C-03 (A-002, revisão da Prova): até 600 px a tabela de Roteiro de Abordagens vira um cartão por
     roteiro, como as outras tabelas do admin (style.css, .card.table-scroll): Editar/Duplicar/Apagar ficam
     à vista, sem rolar de lado. Sem o cabeçalho, cada célula se rotula pelo CSS. */
  .rot-admin .table-scroll > table {
    display: block;
    width: 100%;
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
  }
  .rot-admin .table-scroll tbody {
    display: block;
  }
  .rot-admin .table-scroll thead {
    display: none;
  }
  .rot-admin .table-scroll tr {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid var(--de-borda, #DEDBD5);
    border-radius: 14px;
    background: var(--de-branco, #FFFFFF);
  }
  .rot-admin .table-scroll td {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0 !important;
    border: 0 !important;
  }
  .rot-admin .table-scroll td:first-child {
    display: block;
  }
  .rot-admin .table-scroll td:nth-child(2)::before {
    content: "Passos";
  }
  .rot-admin .table-scroll td:nth-child(3)::before {
    content: "Ordem";
  }
  .rot-admin .table-scroll td:nth-child(4)::before {
    content: "Situação";
  }
  .rot-admin .table-scroll td:nth-child(n+2):nth-child(-n+4)::before {
    color: var(--de-texto-secundario, #5D6068);
    font-size: 13px;
    font-weight: 700;
  }
  .rot-admin .table-scroll td:last-child {
    justify-content: flex-start;
    padding-top: 10px !important;
  }
}
/* C-05 (A-114, A-009, revisão da Prova): as caixas de marcar de Criativos, Configurações e Termos tinham
   18 px (auth.css força 18 px com !important); ficam com 32 px no celular (o rótulo já tem 44 px de altura). */
@media (max-width: 760px) {
  .creative-front label.check input,
  #dashboard-editor label.check input,
  #terms-form label.check input,
  #module-editor .order-row > input[type="checkbox"] {
    flex: 0 0 auto;
    width: 32px !important;
    height: 32px !important;
  }
}
@media (max-width: 760px) {
  /* A caixa de 32 px do editor de módulos (Configurações) tem o campo "Nome do módulo" ao lado: a margem
     negativa de 7 px por lado (= (32-18)/2) devolve o espaço de antes, e o campo segue com a mesma largura. */
  #module-editor .order-row > input[type="checkbox"] {
    margin: -7px;
  }
}