/* Ajustes da Gestão Educacional sobre o design system do XP Obras. */

/* Tabelas sem versão em cards (painéis e configurações): no celular rolam dentro do card,
   em vez de alargar a página. No desktop o xp-listas mantém overflow visível para os menus ⋯. */
@media (max-width: 991.98px) {
  .xp-listcard .xp-table-wrap:not(.xp-table-wrap--desktop) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .xp-listcard .xp-table-wrap .xp-table { min-width: 560px; }
}

/* Matriz de permissões e auditoria: células compactas. */
.xp-table td code.text-break { white-space: normal; word-break: break-all; }

/* Logo (ícone quadrado com o nome): cantos arredondados e um pouco maior na marca. */
.xp-marca__icone { border-radius: 22%; aspect-ratio: 1 / 1; }
.cp-sidebar-brand .sidebar-brand-full .xp-marca__icone,
.cp-sidebar-brand .sidebar-brand-narrow .xp-marca__icone { height: 32px; }
.xp a.xp-auth__logo .xp-marca__icone { height: 40px; }

/* Título de card de lista (mesmo peso dos painéis xp-panel). */
h2.cp-card-titulo { font-size: 1rem; font-weight: 600; margin: 0 0 .5rem; }

/* Convite "instale o app" da home (PWA, ver js/pwa.js). Destaque na cor da marca, sem roubar a tela. */
.cs-instalar { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--xp-primary) 35%, transparent);
  background: linear-gradient(135deg, var(--xp-primary-soft), var(--xp-surface) 70%); position: relative; }
.cs-instalar[hidden] { display: none; }
.cs-instalar__icone { flex: none; border-radius: 22%; box-shadow: 0 6px 16px -8px rgba(var(--cui-primary-rgb, 79, 70, 229), .6); }
.cs-instalar__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-right: 72px; }
.cs-instalar__titulo { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--xp-primary-strong-text); }
.cs-instalar__sub { margin: 0; color: var(--xp-text-2); font-size: .9rem; }
.cs-instalar__passos { margin: 0; padding-left: 1.2rem; color: var(--xp-text-2); font-size: .9rem; display: grid; gap: 4px; }
.cs-instalar__passos[hidden], .cs-instalar [data-instalar-prompt][hidden] { display: none; }
.cs-instalar__ic { width: 18px; height: 18px; vertical-align: -3px; color: var(--xp-primary); }
.cs-instalar__fechar { position: absolute; top: 12px; right: 12px; border: 0; background: transparent; color: var(--xp-text-2); font: inherit; font-size: .8125rem;
  padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.cs-instalar__fechar:hover { background: var(--xp-surface-sunken); }
.cs-instalar--destaque { animation: cs-instalar-pulso 1.2s ease-out 2; }
@keyframes cs-instalar-pulso { 0% { box-shadow: 0 0 0 0 rgba(var(--cui-primary-rgb, 79, 70, 229), .45); } 100% { box-shadow: 0 0 0 14px rgba(var(--cui-primary-rgb, 79, 70, 229), 0); } }
@media (max-width: 575.98px) {
  .cs-instalar { padding: 16px; gap: 12px; }
  .cs-instalar__icone { width: 44px; height: 44px; }
  .cs-instalar__texto { padding-right: 0; }
  .cs-instalar__titulo { padding-right: 76px; }
  .cs-instalar__fechar { top: 8px; right: 8px; }
  .cs-instalar [data-instalar-prompt] .xp-btn { width: 100%; justify-content: center; }
}

/* Marca da prefeitura: login próprio (/{slug}/entrar) e menu. O logo vai num fundo branco para brasões coloridos
   lerem bem sobre o painel escuro. */
.xp a.cs-auth-marca, .xp a.cs-auth-marca:hover { gap: 14px; font-size: 20px; }
.cs-auth-marca__logo { flex: none; width: 64px; height: 64px; border-radius: 16px; background: #fff; display: grid; place-items: center; padding: 6px; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .5); }
.cs-auth-marca__logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.cs-auth-marca__nome { line-height: 1.2; }
.cs-auth-plataforma { white-space: nowrap; opacity: .9; }
.cs-auth-plataforma img { vertical-align: -2px; border-radius: 22%; }
@media (max-width: 991.98px) {
  .cs-auth-marca__logo { width: 52px; height: 52px; border-radius: 13px; }
}
.cs-side-marca { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.cs-side-marca__logo { flex: none; width: 34px; height: 34px; border-radius: 9px; background: #fff; display: grid; place-items: center; padding: 3px; }
.cs-side-marca__logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.cs-side-marca__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-admin-logo { height: 56px; width: auto; border-radius: 8px; background: #fff; padding: 4px; border: 1px solid var(--xp-border); }

/* Auditoria: comparação campo a campo (antes × depois). */
.cs-auditoria-diff tr.cs-mudou td { background: var(--xp-warning-bg, #FFFBEB); }
.cs-auditoria-diff td:nth-child(2) { color: var(--xp-text-3); }
.cs-auditoria-dl dt { font-weight: 600; }
.cs-politica dt { font-weight: 600; margin-top: .5rem; }
.cs-politica dd { margin-bottom: 0; color: var(--xp-text-2); }
.xp-table.cs-auditoria-diff { table-layout: fixed; width: 100%; }
.xp-table.cs-auditoria-diff th, .xp-table.cs-auditoria-diff td { text-align: left !important; overflow-wrap: anywhere; vertical-align: top; }
.xp-table.cs-auditoria-diff th:nth-child(1) { width: 30%; }
.xp-table.cs-auditoria-diff th:nth-child(2), .xp-table.cs-auditoria-diff th:nth-child(3) { width: 35%; }

/* MFA e CAPTCHA (telas de entrada). */
.cs-qr-mfa { display: block; margin: 4px auto 10px; border: 1px solid var(--xp-border); border-radius: 8px; background: #fff; padding: 6px; }
.cs-segredo-mfa { word-spacing: 4px; letter-spacing: .02em; }
.cs-codigo-mfa { font-size: 22px; letter-spacing: .3em; text-align: center; }
.cs-codigos-recuperacao { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; list-style: none; padding: 0; margin: 0 0 12px; }
.cs-codigos-recuperacao code { display: block; text-align: center; padding: 6px; border: 1px dashed var(--xp-border); border-radius: 6px; font-size: 14px; }
.cs-captcha { padding: 10px 12px; border-radius: 10px; background: var(--xp-surface-sunken); border: 1px solid var(--xp-border); }
.xp-banner--sucesso { background: var(--xp-success-bg); color: var(--xp-success-text); }

/* Filtro de situação (ativas / inativas / todas). */
.cs-situacao { display: inline-flex; gap: 4px; margin-top: 8px; padding: 3px; border-radius: 10px; background: var(--xp-surface-sunken); border: 1px solid var(--xp-border); }
.cs-situacao__item { padding: 4px 12px; border-radius: 8px; font-size: 13px; color: var(--xp-text-2); text-decoration: none; }
.cs-situacao__item.is-ativo { background: var(--xp-surface); color: var(--xp-primary-strong-text); font-weight: 600; box-shadow: 0 1px 2px rgba(17,24,39,.08); }
/* Matriz de permissões: 9 ações; rola dentro do cartão em vez de alargar a página. */
.xp-table-wrap.cs-matriz-permissoes { overflow-x: auto; }
.cs-matriz-permissoes th { white-space: nowrap; font-size: 12px; }

/* Vídeo desta tela (ícone de vídeo do cabeçalho, _LinkVideos.cshtml + video-tela.js): janela modal nativa (<dialog>). */
.cs-video-tela__abrir { position: relative; color: var(--xp-primary, #4F46E5); }
.cs-video-tela__ponto { position: absolute; top: 6px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--xp-primary, #4F46E5); box-shadow: 0 0 0 2px var(--cui-body-bg, #fff); }
.cs-video-tela { width: min(960px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); padding: 0; border: 0; border-radius: 14px; background: var(--cui-body-bg, #fff); color: var(--cui-body-color, #111827); box-shadow: 0 24px 60px rgba(15, 23, 42, .45); }
.cs-video-tela::backdrop { background: rgba(15, 23, 42, .62); }
.cs-video-tela__caixa { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.cs-video-tela__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cs-video-tela__titulo { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; }
.cs-video-tela__player { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100dvh - 220px); background: #000; border-radius: 10px; }
.cs-video-tela__resumo { margin: 0; font-size: 14px; color: var(--cui-secondary-color, #4B5563); }
.cs-video-tela__outros { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cs-video-tela__rotulo { width: 100%; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cui-secondary-color, #6B7280); }
.cs-video-tela__opcao { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border: 1px solid var(--cui-border-color, #E5E7EB); border-radius: 999px; background: transparent; color: inherit; font-size: 13px; text-align: left; }
.cs-video-tela__opcao span { color: var(--cui-secondary-color, #6B7280); }
.cs-video-tela__opcao.is-atual { border-color: var(--xp-primary, #4F46E5); background: var(--xp-primary-soft, #EEF2FF); color: var(--xp-primary-soft-text, #312E81); font-weight: 600; }
.cs-video-tela__rodape { margin: 0; font-size: 13px; color: var(--cui-secondary-color, #6B7280); }
.cs-video-tela__rodape a { font-weight: 600; }
@media (max-width: 575.98px) {
    .cs-video-tela { width: calc(100vw - 12px); border-radius: 12px; }
    .cs-video-tela__caixa { padding: 12px; }
    .cs-video-tela__titulo { font-size: 15px; }
}