/* CSS do CopyDrive v2 — e só o que o Bootstrap e o tema do CTC não dão.
   Geometria do painel (menu + topo) copiada do painel.css do CTC; cores sempre
   por var(--bs-…) para valer nos dois temas. */


/* Telas: só a ativa aparece. */
[data-view] { display: none; }
[data-view].is-active { display: block; }

/* ---- Topo: marca + abas + ações (sem barra lateral: o CopyDrive é um sistema de poucas telas) ---- */
.painel-icone { width: 2.5rem; height: 2.5rem; flex-shrink: 0; }
.ctc-foto { width: 2rem; height: 2rem; font-size: .75rem; flex-shrink: 0; }
.ctc-foto-lg { width: 3rem; height: 3rem; font-size: 1rem; }
.abas { display: flex; align-items: stretch; gap: .25rem; overflow-x: auto; scrollbar-width: none; align-self: stretch; }
.abas::-webkit-scrollbar { display: none; }
.abas .nav-link { display: inline-flex; align-items: center; gap: .45rem; padding: 0 .75rem; min-height: 3.5rem; font-size: .875rem; font-weight: 500; color: var(--bs-secondary-color); border-bottom: 2px solid transparent; white-space: nowrap; }
.abas .nav-link .bi { font-size: 1rem; }
.abas .nav-link .badge { font-size: .65rem; }
.abas .nav-link:hover { color: var(--bs-body-color); }
.abas .nav-link.active { color: var(--bs-body-color); border-bottom-color: var(--bs-primary); }
@media (max-width: 767.98px) {
  .abas { width: 100%; margin-top: -.25rem; }
  .abas .nav-link { min-height: 2.75rem; padding: 0 .6rem; font-size: .8125rem; }
}
.toast-container, .toast-container .toast { pointer-events: none; }
.toast-container .toast .btn-close { pointer-events: auto; }
.ctc-clicavel { cursor: pointer; }
.ctc-clicavel:hover { border-color: var(--bs-secondary-color); }

/* ---- Login ---- */
.login-caixa { max-width: 400px; }

/* ---- Lista de transferências: uma linha compacta por item ---- */
.tr-lista .tr-linha, .dl-linha { transition: background-color .15s ease; }
.tr-lista .tr-linha:hover, .dl-linha:hover { background-color: var(--bs-tertiary-bg); }
.tr-linha .tr-barra { height: .375rem; }
.tr-linha .tr-nome { max-width: 100%; }
/* Status na frente, largura fixa para as linhas alinharem. */
.tr-status { flex: 0 0 9.5rem; }
.tr-status .pilula, .tr-status .badge { width: 100%; justify-content: center; font-size: .8125rem; padding: .35rem .5rem; }
.tr-status .pilula b { font-weight: 700; }
.tr-status .pilula .bi { font-size: .8rem; }
/* O que precisa de cursor de clique é a linha, não os botões dentro dela. */
.tr-lista .tr-linha { cursor: pointer; }
.tr-linha .btn, .tr-linha a { cursor: pointer; }

/* Status: pílula com ponto colorido — lê-se sem depender só da cor. */
.pilula { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap; }
.pilula .ponto { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.pilula-primary { color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.pilula-success { color: var(--bs-success); background: var(--bs-success-bg-subtle); }
.pilula-warning { color: var(--bs-warning); background: var(--bs-warning-bg-subtle); }
.pilula-danger  { color: var(--bs-danger);  background: var(--bs-danger-bg-subtle); }
.pilula-info    { color: var(--bs-info);    background: var(--bs-info-bg-subtle); }
.pilula-secondary { color: var(--bs-secondary-color); background: var(--bs-secondary-bg); }
.pilula .ponto-pulsa { animation: pulsar 1.2s ease-in-out infinite; }
@keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Faixa de mensagem dentro da linha (pausa, erro). */
.tr-msg { border-left: 3px solid var(--bs-border-color); padding-left: .625rem; }
.tr-msg-warning { border-left-color: var(--bs-warning); }
.tr-msg-danger  { border-left-color: var(--bs-danger); }
.tr-msg-info    { border-left-color: var(--bs-info); }

/* ---- Gaveta de detalhes ---- */
#gaveta { --bs-offcanvas-width: min(520px, 100vw); }
.linha-tempo { position: relative; padding-left: 1.75rem; }
.linha-tempo::before { content: ''; position: absolute; left: .6rem; top: .25rem; bottom: .25rem; width: 2px; background: var(--bs-border-color); }
.linha-tempo .evento { position: relative; padding-bottom: .875rem; }
.linha-tempo .evento .marca { position: absolute; left: -1.75rem; top: .1rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .65rem; background: var(--bs-body-bg); border: 2px solid var(--bs-border-color); color: var(--bs-secondary-color); }
.linha-tempo .evento-warning .marca { border-color: var(--bs-warning); color: var(--bs-warning); }
.linha-tempo .evento-error .marca { border-color: var(--bs-danger); color: var(--bs-danger); }
.linha-tempo .evento-ok .marca { border-color: var(--bs-success); color: var(--bs-success); }
.gaveta-barra .progress { height: .5rem; }

/* ---- Assistente ---- */
.passos { display: flex; gap: .5rem; }
.passos .passo { flex: 1; display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--bs-secondary-color); }
.passos .passo .num { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; border: 2px solid var(--bs-border-color); flex-shrink: 0; }
.passos .passo.ativo { color: var(--bs-body-color); font-weight: 600; }
.passos .passo.ativo .num { border-color: var(--bs-primary); background: var(--bs-primary); color: #fff; }
.passos .passo.feito .num { border-color: var(--bs-success); color: var(--bs-success); }
.passos .passo + .passo::before { content: ''; flex: 0 0 1rem; height: 2px; background: var(--bs-border-color); }
.opcao { cursor: pointer; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); padding: .875rem; display: flex; gap: .75rem; align-items: flex-start; transition: border-color .15s ease, background-color .15s ease; height: 100%; }
.opcao:hover { border-color: var(--bs-secondary-color); }
.opcao.ativa { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.opcao.desativada { opacity: .5; cursor: not-allowed; }
.opcao .opcao-icone { width: 2.25rem; height: 2.25rem; border-radius: .5rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; background: var(--bs-secondary-bg); }
.opcao.ativa .opcao-icone { background: var(--bs-primary); color: #fff; }
.verificado { display: flex; align-items: center; gap: .5rem; font-size: .875rem; }

/* ---- Contas: cards em grade, ações no menu de três pontos ---- */
.conta-grupo + .conta-grupo { margin-top: 1.5rem; }
.conta-card { height: 100%; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.conta-card:hover { border-color: var(--bs-secondary-color); }
.conta-avatar { width: 2.75rem; height: 2.75rem; font-size: .9rem; font-weight: 700; flex-shrink: 0; }
.conta-card .cota .progress { height: .375rem; }
#conta-detalhe { --bs-offcanvas-width: min(440px, 100vw); }
.conta-pessoa { display: flex; align-items: center; gap: .6rem; }
.conta-pessoa .conta-avatar { width: 1.9rem; height: 1.9rem; font-size: .7rem; }
.conta-card .conta-menu { position: absolute; top: .5rem; right: .5rem; }
.conta-card .conta-menu .btn { --bs-btn-padding-x: .45rem; --bs-btn-padding-y: .2rem; border: 0; color: var(--bs-secondary-color); }
.conta-card .conta-menu .btn:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.conta-card .conta-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.avatar-1 { background: #dbeafe; color: #1e40af; } .avatar-2 { background: #dcfce7; color: #166534; } .avatar-3 { background: #fef3c7; color: #92400e; }
.avatar-4 { background: #fce7f3; color: #9d174d; } .avatar-5 { background: #ede9fe; color: #5b21b6; } .avatar-6 { background: #ccfbf1; color: #115e59; }
[data-bs-theme=dark] .avatar-1 { background: #1e3a8a; color: #bfdbfe; } [data-bs-theme=dark] .avatar-2 { background: #14532d; color: #bbf7d0; } [data-bs-theme=dark] .avatar-3 { background: #78350f; color: #fde68a; }
[data-bs-theme=dark] .avatar-4 { background: #831843; color: #fbcfe8; } [data-bs-theme=dark] .avatar-5 { background: #4c1d95; color: #ddd6fe; } [data-bs-theme=dark] .avatar-6 { background: #134e4a; color: #99f6e4; }
/* A trilha da barra some no tema claro quando está em 0%: dá um fundo com contraste. */
.progress { background-color: var(--bs-secondary-bg); }

/* ---- Download local (download.js preenche os data-role; a marcação vem de LocalDownloadsView) ---- */
.dl-linha .badge { display: inline-flex; align-items: center; border-radius: 999px; font-weight: 600; }
.dl-linha .badge.text-bg-primary { color: var(--bs-primary) !important; background: var(--bs-primary-bg-subtle) !important; }
.dl-linha .badge.text-bg-success { color: var(--bs-success) !important; background: var(--bs-success-bg-subtle) !important; }
.dl-linha .badge.text-bg-warning { color: var(--bs-warning) !important; background: var(--bs-warning-bg-subtle) !important; }
.dl-linha .badge.text-bg-danger  { color: var(--bs-danger) !important;  background: var(--bs-danger-bg-subtle) !important; }
.dl-linha .badge.text-bg-info    { color: var(--bs-info) !important;    background: var(--bs-info-bg-subtle) !important; }
.dl-linha .badge.text-bg-secondary { color: var(--bs-secondary-color) !important; background: var(--bs-secondary-bg) !important; }
#dl-list > .col-12 > .list-group-item { border-left: 0; border-right: 0; border-top: 0; }
.dl-linha [data-role=actions]:empty { display: none; }
.dl-linha .dl-ativos:empty { display: none; }
.dl-linha .dl-ativos .progress { height: .25rem; }
.dl-linha .text-muted { color: var(--bs-secondary-color) !important; }
.tr-msg-success { border-left-color: var(--bs-success); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; }
.log-box { max-height: 340px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; background: var(--bs-tertiary-bg); border-radius: var(--bs-border-radius); padding: .75rem; white-space: pre-wrap; }

/* Estado vazio: ilustração leve com ícone grande. */
.vazio { padding: 3rem 1rem; text-align: center; color: var(--bs-secondary-color); }
.vazio > .bi { font-size: 2.5rem; opacity: .6; }

/* Truncar com reticências em flex. */
.min-w-0 { min-width: 0; }

/* ---- Celular: ações embaixo da linha, nome quebra em vez de truncar, filtros em duas linhas ---- */
@media (max-width: 767.98px) {
  .tr-linha > .d-flex { flex-wrap: wrap; gap: .5rem .75rem !important; }
  .tr-status { flex: 0 0 auto; }
  .tr-status .pilula, .tr-status .badge { width: auto; }
  .tr-linha > .d-flex > .flex-grow-1 { flex-basis: 100%; }
  .tr-linha [data-role=acoes] { width: 100%; justify-content: flex-end; }
  .tr-linha .tr-nome { white-space: normal; }
}

/* ---- Imagens: grade de miniaturas, seleção e detalhes ---- */
.img-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.img-item { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--bs-border-radius); background: var(--bs-tertiary-bg); cursor: pointer; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .1s ease; }
.img-item img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .2s ease; }
.img-item img.pronta { opacity: 1; }
.img-item .img-sem { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); font-size: 1.5rem; }
.img-item .img-legenda { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem .5rem .4rem; font-size: .7rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .15s ease; }
.img-item:hover .img-legenda, .img-item:focus-within .img-legenda { opacity: 1; }
.img-item .img-check { position: absolute; top: .4rem; left: .4rem; width: 1.25rem; height: 1.25rem; margin: 0; cursor: pointer; opacity: 0; transition: opacity .15s ease; }
.img-item:hover .img-check, .img-item.selecionada .img-check, .img-grade.com-selecao .img-check { opacity: 1; }
.img-item.selecionada { outline-color: var(--bs-primary); }
.img-item.selecionada::after { content: ''; position: absolute; inset: 0; background: rgba(37, 99, 235, .18); pointer-events: none; }
.img-item .img-selo { position: absolute; top: .4rem; right: .4rem; display: inline-flex; align-items: center; gap: .2rem; font-size: .65rem; font-weight: 600; padding: .1rem .4rem; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; }
.img-item .img-nota { position: absolute; top: .4rem; right: .4rem; font-size: .65rem; font-weight: 700; padding: .1rem .4rem; border-radius: 999px; }
.img-selecao { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); }
body.com-selecao #conteudo { padding-bottom: 5rem !important; }
#img-detalhe { --bs-offcanvas-width: min(560px, 100vw); }
.img-previa { min-height: 12rem; max-height: 60vh; overflow: hidden; }
.img-previa img { max-width: 100%; max-height: 60vh; object-fit: contain; }
.img-pasta-linha .progress { height: .375rem; }
/* Pessoas (rostos) */
.img-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .6rem .25rem .75rem; border-radius: 999px; background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); font-size: .8rem; font-weight: 600; }
.img-chip .btn-close { font-size: .6rem; }
.pe-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .75rem; }
.pe-card { text-align: center; cursor: pointer; border-radius: var(--bs-border-radius); padding: .5rem .25rem; transition: background .1s ease; }
.pe-card:hover, .pe-card:focus-visible { background: var(--bs-tertiary-bg); outline: none; }
.pe-rosto { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: var(--bs-tertiary-bg); margin: 0 auto .4rem; display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); }
.pe-rosto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-rosto-lg { width: 64px; height: 64px; margin: 0; }
.pe-rosto-sm { width: 40px; height: 40px; margin: 0; }
.pe-card .pe-nome { font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-card .pe-nome.sem-nome { color: var(--bs-secondary-color); font-weight: 400; font-style: italic; }
.pe-card .pe-qtd { font-size: .7rem; color: var(--bs-secondary-color); }
.pe-rostos { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: .5rem; }
.pe-rosto-item { position: relative; aspect-ratio: 1; border-radius: var(--bs-border-radius); overflow: hidden; background: var(--bs-tertiary-bg); cursor: pointer; }
.pe-rosto-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-rosto-item .pe-tirar { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: .7rem; line-height: 20px; padding: 0; opacity: 0; transition: opacity .15s ease; }
.pe-rosto-item:hover .pe-tirar, .pe-rosto-item:focus-within .pe-tirar { opacity: 1; }
.pe-rosto-item.manual::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bs-primary); }
.img-quem { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .6rem .2rem .2rem; border-radius: 999px; background: var(--bs-tertiary-bg); font-size: .78rem; cursor: pointer; border: 0; color: inherit; }
.img-quem:hover { background: rgba(var(--bs-primary-rgb), .12); }
.ju-lista { max-height: 50vh; overflow: auto; }
.ju-lista .list-group-item { display: flex; align-items: center; gap: .6rem; cursor: pointer; padding: .4rem .5rem; }
.ju-lista .list-group-item.active { background: rgba(var(--bs-primary-rgb), .12); color: inherit; border-color: transparent; }
.img-pasta-linha .img-pasta-cont { width: 15rem; max-width: 100%; }
@media (max-width: 767.98px) {
  .img-grade { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .35rem; }
  .img-item .img-check { opacity: 1; }
  #img-filtros .form-select { max-width: 48%; }
}

/* ---- Multiusuário ---- */
#usuario-iniciais img { width: 100%; height: 100%; object-fit: cover; }
.autor { color: var(--bs-secondary-color); }
.dl-todos-linha .tr-status { flex: 0 0 9.5rem; }

/* ---- Assistente de indexação ---- */
.img-num { background: var(--bs-tertiary-bg); border-radius: var(--bs-border-radius); padding: .6rem .25rem; }
.img-num .v { font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.img-num .r { font-size: .7rem; color: var(--bs-secondary-color); }

/* ---- Fundo sorteado: foto de datacenter escurecida atrás de tudo ---- */
body.com-fundo { background: #0b0d12 !important; }
#fundo { position: fixed; inset: 0; z-index: -1; background-color: #0b0d12; background-size: cover; background-position: center; opacity: 0; transition: opacity .6s ease; }
#fundo.pronto { opacity: 1; }
#fundo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 8, 12, .78) 0%, rgba(6, 8, 12, .86) 100%); }
/* Topo translúcido sobre a foto. */
.com-fundo .topo { background: rgba(var(--bs-body-bg-rgb), .82) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: rgba(255, 255, 255, .08) !important; }
/* Conteúdo das telas num painel sólido, para ler bem nos dois temas. */
.com-fundo #conteudo { margin-top: 1.25rem; margin-bottom: 2.5rem; background: var(--bs-body-bg); border-radius: var(--bs-border-radius-xl); box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }
@media (max-width: 767.98px) { .com-fundo #conteudo { margin-top: .5rem; border-radius: var(--bs-border-radius-lg); } }
/* Login: marca clara sobre a foto, cartão sólido. */
.com-fundo #view-login .login-caixa > .d-flex .h4, .com-fundo #view-login .login-caixa > .d-flex .text-body-secondary { color: #f1f3f6 !important; }
.com-fundo #view-login .login-caixa > .d-flex .text-body-secondary { opacity: .75; }
.com-fundo #view-login .card { box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.fundo-credito { position: fixed; right: .5rem; bottom: .4rem; z-index: 1; font-size: .65rem; padding: .1rem .45rem; border-radius: 999px; background: rgba(0, 0, 0, .45); color: rgba(255, 255, 255, .6); text-decoration: none; max-width: 60vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fundo-credito:hover { color: rgba(255, 255, 255, .85); }
body.com-selecao .fundo-credito { display: none; }