/* ============================================================
   Maestro Trello - design inspirado no Linear.app
   Tema escuro near-black, hairlines, acento indigo, tipografia Inter,
   micro-animacoes suaves. Classes seguem o padrao nome-da-classe.
   ============================================================ */

:root {
    --bg: #08090a;
    --bg-elev: #0f1011;
    --surface: #141517;
    --surface-2: #1a1b1e;
    --surface-hover: #1f2023;
    --linha: rgba(255, 255, 255, 0.08);
    --linha-forte: rgba(255, 255, 255, 0.13);
    --texto: #f7f8f8;
    --texto-2: #8a8f98;
    --texto-3: #62666d;
    --acento: #5e6ad2;
    --acento-claro: #6e79de;
    --acento-bg: rgba(94, 106, 210, 0.14);
    --perigo: #eb5757;
    --ok: #4cb782;
    --raio: 10px;
    --raio-sm: 8px;
    --raio-lg: 14px;
    --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --sombra: 0 2px 4px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.35);
    --sombra-flutua: 0 12px 32px rgba(0,0,0,0.45);
    /* altura reservada para a barra de navegacao inferior do celular: 0 no desktop e
       sobrescrita na media query <=560px — fonte unica das compensacoes de altura */
    --espaco-barra-inferior: 0px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0; height: 100%;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px; line-height: 1.5;
    color: var(--texto);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.006em;
}

body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(900px 500px at 78% -8%, rgba(94,106,210,0.10), transparent 60%),
        radial-gradient(700px 500px at 6% 4%, rgba(120,80,200,0.06), transparent 55%);
}

#app { height: 100%; }
a { color: var(--acento-claro); text-decoration: none; }
h1, h2, h3, h4 { letter-spacing: -0.02em; font-weight: 600; }

/* superficie translucida sutil (mantida para painéis/modais) */
.glass {
    background: rgba(20, 21, 23, 0.72);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid var(--linha);
}

/* ---------------- Botoes ---------------- */
.trello-btn-primary {
    display: inline-flex; align-items: center; gap: 7px;
    background: linear-gradient(180deg, var(--acento-claro), var(--acento));
    color: #fff; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--raio-sm);
    padding: 8px 14px; font-size: 13px; font-weight: 500; cursor: pointer;
    box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 4px 14px rgba(94,106,210,0.32);
    transition: filter .14s var(--ease), transform .14s var(--ease), box-shadow .14s var(--ease);
}
.trello-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 6px 18px rgba(94,106,210,0.42); }
.trello-btn-primary:active { transform: translateY(0); }
.trello-btn-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.trello-btn-primary.pequeno { padding: 6px 11px; font-size: 12.5px; }

.trello-btn-ghost {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--surface); color: var(--texto);
    border: 1px solid var(--linha-forte); border-radius: var(--raio-sm);
    padding: 7px 13px; font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background .14s var(--ease), border-color .14s var(--ease), transform .14s var(--ease);
}
.trello-btn-ghost:hover { background: var(--surface-hover); border-color: rgba(255,255,255,0.2); }
.trello-btn-ghost.pequeno { padding: 5px 9px; font-size: 12.5px; }

.trello-btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: var(--texto-2);
    cursor: pointer; border-radius: 6px; width: 28px; height: 28px; font-size: 13px;
    transition: background .12s var(--ease), color .12s var(--ease);
}
.trello-btn-icon:hover { background: var(--surface-hover); color: var(--texto); }
.trello-btn-icon.perigo:hover { background: rgba(235,87,87,0.14); color: #ff8585; }

/* ---------------- Shell / topbar ---------------- */
.trello-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

/* z-index acima da .quadro-barra (50): o painel do sino nasce aqui dentro e ficava atras dela.
   O blur mora no ::before porque backdrop-filter no proprio header faria dele o bloco de
   contencao dos filhos position:fixed — o overlay de clique-fora ficaria preso na faixa. */
.trello-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; margin: 0;
    /* safe-area do notch (so tem efeito instalado/standalone com viewport-fit=cover);
       os lados importam em paisagem, quando o recorte fica a esquerda/direita */
    padding-top: env(safe-area-inset-top, 0px); height: calc(52px + env(safe-area-inset-top, 0px));
    padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px));
    border: none; border-bottom: 1px solid var(--linha); border-radius: 0;
    background: transparent;
    /* anula o backdrop-filter herdado de .glass — e nao so o daqui — senao o header continua
       sendo o bloco de contencao dos filhos position:fixed */
    backdrop-filter: none; -webkit-backdrop-filter: none;
    position: sticky; top: 0; z-index: 60;
}
.trello-topbar::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgba(8,9,10,0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.trello-topbar-brand { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--texto); }
.trello-topbar-brand i { color: var(--acento-claro); font-size: 15px; }
.trello-topbar-brand strong { font-weight: 600; }
.trello-topbar-user { display: flex; align-items: center; gap: 12px; }
.trello-user-nome { color: var(--texto-2); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }

.trello-main { flex: 1; padding: 26px 28px 40px; margin: 0 auto; width: 100%;
    padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); }

/* ---------------- Titulos ---------------- */
.pagina-titulo { font-size: 20px; margin: 0; display: flex; align-items: center; gap: 11px; font-weight: 600; }
.pagina-titulo i { color: var(--acento-claro); font-size: 17px; }
.texto-suave { color: var(--texto-2); }
.texto-suave.pequeno { font-size: 12.5px; }

/* ---------------- Login ---------------- */
.login-wrap { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { width: 100%; max-width: 380px; padding: 38px 32px; border-radius: 16px; text-align: center; box-shadow: var(--sombra-flutua); }
.login-logo { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff;
    background: linear-gradient(180deg, var(--acento-claro), var(--acento));
    box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 8px 24px rgba(94,106,210,0.4); }
.login-titulo { margin: 0; font-size: 22px; font-weight: 600; }
.login-titulo span { color: var(--acento-claro); }
.login-sub { color: var(--texto-2); margin: 7px 0 26px; font-size: 13px; }
.login-campo { display: flex; align-items: center; gap: 9px; margin-bottom: 11px;
    background: var(--bg-elev); border: 1px solid var(--linha-forte); border-radius: var(--raio-sm); padding: 0 12px;
    transition: border-color .14s var(--ease), box-shadow .14s var(--ease); }
.login-campo:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-bg); }
.login-campo i { color: var(--texto-3); font-size: 13px; }
.login-input { flex: 1; background: transparent; border: none; outline: none; color: var(--texto); padding: 11px 0; font-size: 14px; font-family: inherit; }
.login-input::placeholder { color: var(--texto-3); }
.login-btn { width: 100%; justify-content: center; margin-top: 8px; padding: 11px; }
.login-erro { background: rgba(235,87,87,0.12); color: #ff9a9a; border: 1px solid rgba(235,87,87,0.3);
    border-radius: var(--raio-sm); padding: 9px; margin-bottom: 11px; font-size: 12.5px; }

/* ---------------- Quadros (grid) ---------------- */
.quadros-header { display: flex; align-items: center; justify-content: space-between; margin: 0 0 24px; }
.quadros-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; }

.quadro-card { position: relative; background: var(--surface); border: 1px solid var(--linha);
    border-radius: var(--raio); padding: 16px; cursor: pointer; overflow: hidden;
    display: flex; flex-direction: column; gap: 10px;
    transition: background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease); }
.quadro-card:hover { background: var(--surface-2); border-color: var(--linha-forte); transform: translateY(-2px); box-shadow: var(--sombra); }
.quadro-card-faixa { position: absolute; top: 0; left: 0; right: 0; height: 3px; opacity: .9; }
.quadro-card-topo { display: flex; align-items: center; justify-content: space-between; }
.quadro-card-icone { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 14px; box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset; }
.quadro-card-acoes { display: flex; gap: 2px; opacity: 0; transition: opacity .14s var(--ease); }
.quadro-card:hover .quadro-card-acoes { opacity: 1; }
/* confirmacao de exclusao em andamento nao pode sumir quando o mouse sai do card */
.quadro-card-acoes.confirmando { opacity: 1; align-items: center; gap: 6px; }

/* A estrela mora fora de .quadro-card-acoes porque aquele bloco fica opacity:0 fora do hover, e
   opacity do pai nao se anula no filho: o favorito precisa ser visivel sem passar o mouse.
   O margin-left:auto encosta a estrela nas acoes, a direita do card. */
.quadro-card-favorito { margin-left: auto; margin-right: 2px; opacity: 0; transition: opacity .14s var(--ease), color .12s var(--ease); }
.quadro-card:hover .quadro-card-favorito { opacity: 1; }
.quadro-card-favorito.ativo { opacity: 1; color: #f5b400; }
.quadro-card-favorito.ativo:hover { background: rgba(245,180,0,0.14); color: #f5b400; }
.quadro-card-nome { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.quadro-card-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-3); font-size: 12px; }
.quadro-card-meta i { font-size: 11px; }

/* ---------------- Estado vazio ---------------- */
.estado-vazio { text-align: center; padding: 56px 24px; border-radius: var(--raio-lg); color: var(--texto-2);
    margin-top: 16px; background: var(--surface); border: 1px solid var(--linha); }
.estado-vazio i { font-size: 30px; color: var(--texto-3); display: block; margin-bottom: 14px; }
.estado-vazio p { margin: 0 0 18px; font-size: 14px; }

/* ---------------- Quadro: barra ---------------- */
.quadro-barra { display: flex; align-items: center; gap: 12px; padding: 10px 16px; margin: 0 0 18px;
    border-radius: var(--raio); border: 1px solid var(--linha); position: relative; z-index: 50;
    /* o vidro vem do ::after, nao do elemento: backdrop-filter aqui faria da barra o bloco de
       contencao dos popovers position:fixed dela (gotcha .glass) — e no celular eles precisam
       ancorar na viewport para nao escapar pela lateral. Mesma tecnica da .trello-topbar. */
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.quadro-barra::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: rgba(20, 21, 23, 0.72); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); }
.quadro-barra::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--quadro-cor); border-radius: var(--raio) 0 0 var(--raio); }
.quadro-nome { font-size: 16px; margin: 0; flex: 1; font-weight: 600; }
.quadro-nome-input { flex: 1; min-width: 160px; }
.sync-indicador { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-2); font-size: 12.5px;
    background: var(--surface); border: 1px solid var(--linha); border-radius: 20px; padding: 4px 11px; }
.sync-indicador .fa-cloud-check { color: var(--ok); }

/* ---------------- Quadro: corpo (board + tags) ---------------- */
.quadro-corpo { display: flex; gap: 18px; align-items: flex-start; }
/* 190px = topbar(52) + main-pad-top(26) + barra+margin(~74) + main-pad-bottom(40).
   As compensacoes variaveis (barra inferior do celular e notch) entram por token/env
   para nao re-deduzir o numero magico em cada breakpoint. */
.board-scroll { flex: 1; overflow-x: auto; overflow-y: hidden; padding-bottom: 14px; overscroll-behavior-x: contain;
    height: calc(100vh - 190px - var(--espaco-barra-inferior) - env(safe-area-inset-top, 0px));
    height: calc(100dvh - 190px - var(--espaco-barra-inferior) - env(safe-area-inset-top, 0px)); }
.trello-board { display: flex; gap: 14px; align-items: flex-start; height: 100%; }

/* ---------------- Listas ---------------- */
.lista { width: 296px; min-width: 296px; border-radius: var(--raio); padding: 10px;
    background: var(--bg-elev); border: 1px solid var(--linha); display: flex; flex-direction: column;
    max-height: calc(100vh - 260px - var(--espaco-barra-inferior) - env(safe-area-inset-top, 0px));
    max-height: calc(100dvh - 260px - var(--espaco-barra-inferior) - env(safe-area-inset-top, 0px)); }
.lista-header { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; padding: 2px 4px; cursor: grab; flex-wrap: wrap; }
/* a confirmacao ocupa a largura inteira do header: "Excluir lista e arquivar N cards?" nao cabe
   ao lado do titulo e, como o texto e nowrap, vazava para fora da lista por cima da vizinha */
.lista-confirmacao { flex: 1 0 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin-top: 6px; padding-top: 7px; border-top: 1px solid var(--linha); cursor: default; }
.lista-confirmacao .confirmar-exclusao-texto { flex: 1; min-width: 0; white-space: normal; line-height: 1.35; }
.lista-header:active { cursor: grabbing; }
.lista-titulo { font-weight: 600; font-size: 13px; flex: 1; padding: 3px 6px; border-radius: 6px; color: var(--texto);
    transition: background .12s var(--ease); }
.lista-titulo:hover { background: var(--surface-hover); }
.lista-titulo-input { flex: 1; background: var(--bg); border: 1px solid var(--acento); border-radius: 6px;
    color: var(--texto); padding: 4px 7px; font-weight: 600; font-size: 13px; outline: none; box-shadow: 0 0 0 3px var(--acento-bg); }
.lista-excluir { opacity: 0; transition: opacity .14s var(--ease); }
.lista:hover .lista-excluir { opacity: 1; }

.lista-cards { display: flex; flex-direction: column; gap: 7px; overflow-y: auto; flex: 1; min-height: 18px; padding: 2px; }

/* ---------------- Cards ---------------- */
.card-mini { background: var(--surface); border: 1px solid var(--linha); border-radius: var(--raio-sm);
    padding: 10px 11px; cursor: pointer;
    transition: background .13s var(--ease), border-color .13s var(--ease), transform .12s var(--ease), box-shadow .13s var(--ease); }
.card-mini:hover { background: var(--surface-2); border-color: var(--linha-forte); transform: translateY(-1px); box-shadow: var(--sombra); }
.card-mini-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }
.card-tag-chip { height: 18px; min-width: 24px; padding: 0 6px; border-radius: 5px; display: inline-flex; align-items: center; gap: 4px;
    font-size: 9.5px; font-weight: 500; color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset; white-space: nowrap; }
.card-mini-texto { display: block; line-height: 1.4; font-size: 13px; color: var(--texto); }
/* uma unica linha para todos os indicadores do card; os avatares vao para a direita */
.card-mini-rodape { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.card-mini-obs { color: var(--texto-3); font-size: 11px; display: inline-block; }
.card-mini-comentarios { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-3); font-size: 11px; }
.card-mini-lembrete { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-3); font-size: 11px; }
/* sinal do relato de origem (snapshot do roteamento); a cor vem inline da severidade */
.card-sinal-chip { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px;
    border-radius: 5px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.card-modal-sinal { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
/* chip de alerta: card exige acao no deploy (script de banco / arquivos estaticos) — so icone */
.card-deploy-chip { display: inline-flex; align-items: center; color: #f76808; font-size: 11px; }

/* estados de arraste (SortableJS) */
/* buraco que acompanha o dedo: silhueta do item, sem conteudo */
.arrastando-ghost { opacity: 1; background: var(--acento-bg) !important; border: 1px dashed var(--acento) !important; }
.arrastando-ghost > * { visibility: hidden; }
/* item escolhido (toque longo cumprido, antes de mover): levanta e destaca. No touch nao ha
   cursor, entao ESTE e o sinal de que o arraste foi ativado — junto do tique de vibracao. */
.arrastando-escolhido { cursor: grabbing; transform: scale(1.03); border-color: var(--acento) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.45), 0 0 0 2px var(--acento);
    transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
/* item colado no dedo/cursor: inclinacao leve e sombra alta dao a sensacao de "na mao" */
.arrastando-drag { box-shadow: var(--sombra-flutua); transform: rotate(2deg) scale(1.02); border-color: var(--acento) !important; opacity: .95; }
/* enquanto o dedo arrasta, o gesto e do Sortable: sem isto o toque continua rolando a lista
   e o card parece "escapar" da mao. Vale so durante o arraste, por classe no body. */
body.arrastando-em-curso .lista-cards,
body.arrastando-em-curso .board-scroll { touch-action: none; }
body.arrastando-em-curso { -webkit-user-select: none; user-select: none; }

/* ---------------- Add lista / card ---------------- */
.lista-add { margin-top: 7px; }
.lista-add-btn { width: 100%; background: transparent; border: none; color: var(--texto-3); text-align: left;
    padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500;
    display: flex; align-items: center; gap: 7px; transition: background .12s var(--ease), color .12s var(--ease); }
.lista-add-btn:hover { background: var(--surface-hover); color: var(--texto); }
.card-add-input { width: 100%; background: var(--bg); border: 1px solid var(--linha-forte); border-radius: var(--raio-sm);
    color: var(--texto); padding: 9px; resize: vertical; min-height: 58px; outline: none; font-family: inherit; font-size: 13px; }
.card-add-input:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-bg); }
.card-add-acoes { display: flex; gap: 7px; margin-top: 7px; }

.lista-nova { width: 296px; min-width: 296px; }
.lista-nova-btn { width: 100%; border: 1px dashed var(--linha-forte); border-radius: var(--raio); color: var(--texto-2);
    background: transparent; padding: 12px; cursor: pointer; text-align: left; font-size: 13px; font-weight: 500;
    display: flex; align-items: center; gap: 8px; transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease); }
.lista-nova-btn:hover { background: var(--bg-elev); color: var(--texto); border-color: var(--acento); }

/* ---------------- Painel de Tags (popover na barra) ---------------- */
.tags-popover-wrap { position: relative; display: inline-flex; }
.tags-toggle-btn.ativo { background: var(--surface-hover); border-color: var(--linha-forte); color: var(--texto); }
.tags-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 284px;
    border-radius: var(--raio); padding: 16px; background: var(--bg-elev); border: 1px solid var(--linha);
    box-shadow: var(--sombra-flutua); animation-duration: .16s; }
.tags-popover-lista { max-height: calc(100vh - 220px - var(--espaco-barra-inferior)); max-height: calc(100dvh - 220px - var(--espaco-barra-inferior)); overflow-y: auto; margin: 0 -6px 12px; padding: 0 6px; }
.tags-coluna { margin-bottom: 18px; }
.tags-coluna:last-of-type { margin-bottom: 4px; }
.tags-subtitulo { margin: 0 0 9px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3);
    display: flex; align-items: center; gap: 6px; font-weight: 600; }
.tag-item { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 7px; margin-bottom: 5px; cursor: grab;
    background: var(--surface); border: 1px solid var(--linha); transition: background .12s var(--ease), border-color .12s var(--ease); }
.tag-item:hover { background: var(--surface-hover); border-color: var(--linha-forte); }
.tag-item-chip { width: 24px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset; }
.tag-item-nome { flex: 1; font-size: 13px; }
.tags-criar-btn { width: 100%; justify-content: center; margin-top: 2px; }

/* ---------------- Painel de arquivados (popover na barra) ---------------- */
.arquivados-popover { width: 340px; }
.arquivados-lista { max-height: calc(100vh - 220px - var(--espaco-barra-inferior)); max-height: calc(100dvh - 220px - var(--espaco-barra-inferior)); overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.arquivados-secao { margin-bottom: 18px; }
.arquivados-secao:last-child { margin-bottom: 2px; }
.arquivado-item { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; border-radius: 7px; margin-bottom: 6px;
    background: var(--surface); border: 1px solid var(--linha); transition: border-color .12s var(--ease); }
.arquivado-item:hover { border-color: var(--linha-forte); }
/* o texto do card pode ser longo: duas linhas bastam para reconhecer qual e */
.arquivado-texto { font-size: 13px; line-height: 1.35; color: var(--texto);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.arquivado-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 11px; color: var(--texto-3); }
.arquivado-acoes { display: flex; align-items: center; gap: 6px; }
.arquivado-destino { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--linha-forte); border-radius: 6px;
    color: var(--texto); padding: 5px 7px; font-size: 12px; font-family: inherit; outline: none; }
.arquivado-destino:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-bg); }
.arquivados-erro { margin-bottom: 10px; padding: 7px 9px; border-radius: 6px; font-size: 12px;
    color: #ff8585; background: rgba(235,87,87,0.12); border: 1px solid rgba(235,87,87,0.35); }

/* ---------------- Painel de filtros de cards (popover na barra) ---------------- */
.filtros-popover { width: 300px; }
.filtros-busca { margin-top: 0; }
.filtros-subtitulo { margin-top: 14px; }
.filtros-badge { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--acento);
    color: #fff; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.filtros-limpar-btn { width: 100%; justify-content: center; margin-top: 10px; }
/* aviso de cards escondidos: fica no lugar deles para ninguem achar que os cards sumiram */
.lista-ocultos { display: flex; align-items: center; gap: 7px; padding: 8px 10px; font-size: 12px;
    color: var(--texto-3); border: 1px dashed var(--linha-forte); border-radius: var(--raio-sm); }
/* realce de "solte aqui": a cor e SOLIDA (acento misturado a superficie), nunca um rgba
   translucido — o modal do card tambem recebe esta classe e nao pode deixar o quadro aparecer atras */
.card-drop-ativo { border-color: var(--acento) !important;
    background: color-mix(in srgb, var(--acento) 16%, var(--surface)) !important;
    transform: translateY(-1px); box-shadow: 0 0 0 2px var(--acento); }
/* no modal o aviso e so borda e um tom de fundo: deslocar um painel deste tamanho vira ruido */
.modal-card.card-drop-ativo {
    background: color-mix(in srgb, var(--acento) 8%, var(--bg-elev)) !important;
    transform: none; box-shadow: var(--sombra-flutua), inset 0 0 0 2px var(--acento); }

/* ---------------- Modais ---------------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
    animation: backdrop-surgir .18s var(--ease); }
@keyframes backdrop-surgir { from { opacity: 0; } }
/* fundo solido (sobrepoe o .glass do markup): conteudo denso sobre board colorido precisa de opacidade total */
.modal-card { width: 100%; max-width: 420px; border-radius: 14px; padding: 24px; box-shadow: var(--sombra-flutua); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto;
    background: var(--bg-elev); backdrop-filter: none; -webkit-backdrop-filter: none; animation-duration: .22s; }
@media (prefers-reduced-motion: reduce) { .modal-backdrop { animation: none; } }
.modal-card.modal-largo { max-width: 720px; }
.modal-card-header { display: flex; align-items: center; justify-content: space-between; }
.modal-titulo { font-size: 16px; margin: 0 0 16px; display: flex; align-items: center; gap: 9px; font-weight: 600; }
.modal-titulo i { color: var(--acento-claro); font-size: 14px; }
.modal-label { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--texto-3); margin: 16px 0 7px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.modal-input, .modal-textarea { width: 100%; background: var(--bg); border: 1px solid var(--linha-forte);
    border-radius: var(--raio-sm); color: var(--texto); padding: 10px 12px; outline: none; font-size: 14px; font-family: inherit;
    transition: border-color .14s var(--ease), box-shadow .14s var(--ease); }
.modal-input:focus, .modal-textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-bg); }
.modal-textarea { resize: vertical; line-height: 1.5; }

/* Observacoes em modo leitura: texto renderizado com anexos inline no fluxo (clique entra em edicao) */
.observacoes-leitura { min-height: 46px; padding: 8px 2px; font-size: 14px; line-height: 1.5;
    color: var(--texto); white-space: pre-wrap; overflow-wrap: anywhere; }
.observacoes-leitura.editavel { cursor: text; border-radius: var(--raio-sm); padding: 8px 10px; margin: 0 -10px;
    transition: background .12s var(--ease); }
.observacoes-leitura.editavel:hover { background: var(--surface-hover); }
.modal-acoes { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.modal-busca { display: flex; align-items: center; gap: 8px; margin-top: 14px;
    background: var(--bg); border: 1px solid var(--linha-forte); border-radius: var(--raio-sm); padding: 0 12px;
    transition: border-color .14s var(--ease), box-shadow .14s var(--ease); }
.modal-busca:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-bg); }
.modal-busca i { color: var(--texto-3); }
.modal-busca .modal-input { background: transparent; border: none; box-shadow: none; }

/* Acoes do header do modal (trash + X fechar) */
.modal-header-acoes { display: flex; align-items: center; gap: 4px; }
.modal-fechar-btn { margin-left: 10px; }

/* Texto e botao destrutivo para confirmacoes inline */
.confirmar-exclusao-texto { font-size: 11.5px; color: var(--perigo); font-weight: 500; white-space: nowrap; margin-right: 3px; }
.trello-btn-perigo {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(180deg, #f05555, var(--perigo));
    color: #fff; border: 1px solid rgba(255,255,255,0.1); border-radius: var(--raio-sm);
    padding: 7px 13px; font-size: 13px; font-weight: 500; cursor: pointer;
    transition: filter .14s var(--ease), transform .14s var(--ease);
}
.trello-btn-perigo:hover { filter: brightness(1.1); transform: translateY(-1px); }
.trello-btn-perigo.pequeno { padding: 5px 9px; font-size: 12px; }

/* ---------------- Cores / icones (seletor) ---------------- */
.cores-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.cor-opcao { width: 28px; height: 28px; border-radius: 8px; cursor: pointer; border: 2px solid transparent;
    box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset; transition: transform .12s var(--ease); }
.cor-opcao:hover { transform: scale(1.1); }
.cor-opcao.selecionada { border-color: var(--texto); box-shadow: 0 0 0 2px var(--acento); }
.icones-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.icone-opcao { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); border: 1px solid var(--linha-forte); cursor: pointer; color: var(--texto-2); transition: all .12s var(--ease); }
.icone-opcao:hover { color: var(--texto); transform: scale(1.06); border-color: var(--linha-forte); }
.icone-opcao.selecionada { background: var(--acento); color: #fff; border-color: var(--acento); }

/* seletor "Lista" do modal do card: mover sem arrastar (fallback universal do drag) */
.mover-card-select { appearance: none; cursor: pointer; width: 100%; background: var(--bg);
    border: 1px solid var(--linha-forte); border-radius: var(--raio-sm); color: var(--texto);
    padding: 8px 10px; font-size: 13px; font-family: inherit; outline: none; }
.mover-card-select:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-bg); }

/* ---------------- Lembrete do card (alarme pessoal) ---------------- */
.lembrete-grupo { margin-top: 4px; }
.lembrete-editor { display: flex; flex-direction: column; gap: 8px; }
.lembrete-atual { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 8px 10px; }
.lembrete-atual-texto { font-size: 12.5px; color: var(--texto-2); display: inline-flex; align-items: center; gap: 6px; }
.lembrete-atual-texto i { color: var(--acento-claro); }
.lembrete-atual-texto strong { color: var(--texto); }
.lembrete-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* avatar do sino para lembrete: icone de relogio no lugar das iniciais de quem mencionou */
.lembrete-avatar { background: var(--surface-hover); color: var(--texto-2); font-size: 12px; }

.visibilidade-toggle { display: flex; gap: 8px; }
.vis-opcao { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    background: var(--surface); border: 1px solid var(--linha-forte); border-radius: var(--raio-sm);
    color: var(--texto-2); padding: 9px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all .14s var(--ease); }
.vis-opcao.ativa { background: var(--acento-bg); color: var(--texto); border-color: var(--acento); }

/* ---------------- Modal de card: 2 colunas + fullscreen ---------------- */
/* o modal vira flex-column: header e footer fixos e as duas colunas rolando por conta propria */
/* 80rem = 1120px na raiz de 14px: multiplo de 8 e escala com a fonte do usuario; o clamp em vw garante a responsividade */
.modal-card.modal-card-detalhe {
    max-width: min(80rem, calc(100vw - 4rem)); height: min(64rem, calc(100vh - 3rem)); height: min(64rem, calc(100dvh - 3rem));
    display: flex; flex-direction: column; overflow: hidden; padding: 20px 22px;
}
/* header em grid com as mesmas colunas do corpo: o titulo ocupa so o painel esquerdo
   e as acoes alinham sobre o painel de comentarios */
.modal-card-detalhe .modal-card-header { flex: 0 0 auto; display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 22px; align-items: start; }
.modal-card-detalhe .modal-header-acoes { justify-content: flex-end; }
.modal-card-detalhe .modal-titulo { margin-bottom: 12px; }

/* titulo do card no lugar do antigo header "Editar Card": clicar abre a edicao inline */
.modal-titulo-card { font-size: 19px; line-height: 1.35; margin-bottom: 12px; flex: 1; min-width: 0;
    display: block; overflow-wrap: anywhere; }
.modal-titulo-card.editavel { cursor: text; border-radius: var(--raio-sm); padding: 2px 6px; margin-left: -6px;
    transition: background .12s var(--ease); }
.modal-titulo-card.editavel:hover { background: var(--surface-hover); }
/* titulo em edicao: a textarea cresce com o conteudo porque o ::after do wrapper espelha o valor
   na mesma celula do grid (o Blazor sincroniza data-replicated-value a cada tecla, sem JS) */
/* o scroll e o realce ficam no wrapper: uma barra dentro da textarea estreitaria so ela,
   quebrando o texto em mais linhas que o ::after e escondendo a ultima */
.titulo-crescivel { display: grid; flex: 1; min-width: 0; margin: 0 10px 12px 0;
    max-height: 30vh; overflow-y: auto; border-radius: var(--raio-sm);
    box-shadow: 0 0 0 3px var(--acento-bg); }
.titulo-crescivel > .modal-titulo-input, .titulo-crescivel::after {
    grid-area: 1 / 1; padding: 6px 10px; border: 1px solid transparent; border-radius: var(--raio-sm);
    font-size: 19px; font-weight: 600; line-height: 1.35; font-family: inherit;
    white-space: pre-wrap; overflow-wrap: anywhere; }
.titulo-crescivel::after { content: attr(data-replicated-value) " "; visibility: hidden; }
.modal-titulo-input { width: 100%; background: var(--bg); border-color: var(--acento);
    color: var(--texto); outline: none; resize: none; overflow: hidden; }

.modal-backdrop-cheio { padding: 0; background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
.modal-card.modal-fullscreen { max-width: 100%; width: 100%; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; padding: 20px 28px; }

.card-modal-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    gap: 22px; flex: 1; min-height: 0; }
.modal-fullscreen .card-modal-corpo { grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); gap: 32px; }
.modal-fullscreen .modal-card-header { grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); gap: 32px; }
.card-modal-principal { overflow-y: auto; padding-right: 6px; min-height: 0; }
.card-modal-lateral { display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
    border-left: 1px solid var(--linha); padding-left: 20px; }

/* footer fixo do modal do card: Salvar/Fechar fora da area de scroll das colunas */
.modal-card-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 9px;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha); }

/* ---------------- Feed de comentarios e atividade ---------------- */
.feed-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.feed-titulo { margin: 0; font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.feed-titulo i { color: var(--acento-claro); font-size: 13px; }

.comentario-novo { min-height: 46px; }
.comentario-edicao { min-height: 60px; margin-top: 6px; }
.comentario-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.comentario-erro { color: #ff9a9a; font-size: 11.5px; line-height: 1.4; margin-right: auto; display: inline-flex; align-items: flex-start; gap: 6px; }

.feed-lista { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.feed-vazio { margin: 18px 0 0; }
.feed-item { display: flex; gap: 10px; }
.feed-avatar { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--acento); color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
    box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset; }
.feed-avatar.mini { width: 21px; height: 21px; font-size: 8.5px; background: var(--surface-hover); color: var(--texto-2); }
.feed-corpo { flex: 1; min-width: 0; }
.feed-linha-topo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.feed-linha-topo strong { font-size: 13px; font-weight: 600; }
.feed-data { color: var(--texto-3); font-size: 11px; }
.feed-editado { color: var(--texto-3); font-size: 11px; font-style: italic; }
.feed-comentario-texto { display: inline-block; max-width: 88%; margin: 6px 0 0; padding: 10px 12px;
    background: var(--surface); border: 1px solid var(--linha);
    border-radius: var(--raio-sm); line-height: 1.55; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.feed-item-acoes { display: flex; align-items: center; gap: 4px; margin-top: 4px; opacity: 0; transition: opacity .14s var(--ease); }
.feed-item:hover .feed-item-acoes { opacity: 1; }

/* Conversa: os comentarios do usuario logado ficam a esquerda e os dos outros a direita,
   como um chat. O balao encolhe ate o conteudo (max 88%) para os dois lados coexistirem. */
.feed-item.proprio .feed-comentario-texto { background: var(--acento-bg); border-color: rgba(94, 106, 210, 0.32);
    border-top-left-radius: 4px; }

.feed-item.alheio { flex-direction: row-reverse; }
.feed-item.alheio .feed-corpo { text-align: right; }
.feed-item.alheio .feed-linha-topo { justify-content: flex-end; }
.feed-item.alheio .feed-comentario-texto { text-align: left; border-top-right-radius: 4px; }
.feed-item.alheio .feed-avatar { background: var(--surface-hover); color: var(--texto); border: 1px solid var(--linha-forte); }

/* atividade: linha discreta, sem balao, para nao competir com os comentarios */
.feed-atividade { display: flex; align-items: flex-start; gap: 10px; }
.feed-atividade-texto { color: var(--texto-2); font-size: 12px; line-height: 1.5; }
.feed-atividade-texto strong { color: var(--texto); font-weight: 600; }
.feed-mais { align-self: center; margin-top: 4px; }

.feed-erro { margin-top: 18px; background: var(--surface); border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 14px; }
.feed-erro p { margin: 0 0 10px; color: var(--texto-2); font-size: 12.5px; }
.feed-erro i { color: var(--perigo); }

/* skeleton loading do feed */
.feed-skeleton { display: flex; gap: 10px; }
.skeleton-corpo { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.skeleton-bloco { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--surface) 25%, var(--surface-hover) 37%, var(--surface) 63%);
    background-size: 400% 100%; animation: skeleton-brilho 1.4s var(--ease) infinite; }
.skeleton-avatar { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; }
.skeleton-linha { height: 11px; width: 100%; }
.skeleton-linha.curta { width: 42%; }
.skeleton-linha.media { width: 72%; }
@keyframes skeleton-brilho { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------------- Tags no modal de card ---------------- */
.card-tags-grupo { margin-top: 4px; }
.card-modal-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 7px;
    background: var(--surface); border: 1px solid var(--linha-forte); color: var(--texto); cursor: pointer;
    font-size: 12.5px; font-weight: 500; transition: transform .12s var(--ease), background .12s var(--ease), border-color .12s var(--ease); }
.tag-toggle:hover { transform: translateY(-1px); background: var(--surface-hover); border-color: var(--linha-forte); }
.tag-toggle.ativa { color: #fff; }
.tag-toggle.ativa .tag-toggle-ponto { display: none; }
.tag-toggle-ponto { width: 9px; height: 9px; border-radius: 3px; box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset; }
.tag-toggle-check { font-size: 10px; }

/* ---------------- Deploy no modal de card (reusa .tag-toggle; nome proprio evita colisao com .ativa) ---------------- */
.deploy-toggle-ligado { color: #f76808; border-color: #f76808; background: color-mix(in srgb, #f76808 14%, transparent); }

/* ---------------- Compartilhamento e membros do quadro ---------------- */
.compartilhados-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.compartilhado-item { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: var(--surface); border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 8px 11px; font-size: 13px; }
.compartilhado-item > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.membro-perfil-select { background: var(--surface); border: 1px solid var(--linha-forte); border-radius: var(--raio-sm);
    color: var(--texto); padding: 5px 8px; font-size: 12.5px; cursor: pointer; }
.membro-perfil-fixo { color: var(--texto-3); font-size: 12.5px; font-weight: 500; }
.quadro-perfil-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--linha-forte); color: var(--texto-2); font-size: 12.5px; font-weight: 500; }
.busca-resultados { display: flex; flex-direction: column; gap: 5px; max-height: 220px; overflow-y: auto; margin-top: 9px; }
.busca-item { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--linha); border-radius: var(--raio-sm);
    padding: 9px 11px; cursor: pointer; transition: background .13s var(--ease), border-color .13s var(--ease); }
.busca-item:hover { background: var(--acento-bg); border-color: var(--acento); }
.busca-item small { color: var(--texto-3); font-size: 12px; }

/* ---------------- Inicio: quadros + reunioes ---------------- */
.inicio-colunas { display: flex; flex-direction: column; gap: 34px; }
.inicio-secao { width: 100%; }
.reuniao-card .quadro-card-meta { margin-top: -2px; }
.reuniao-faixa { background: #4cb782; }
.reuniao-icone { background: #4cb782; }

/* ---------------- Reuniao ---------------- */
.reuniao-pagina { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: flex-start; }
.reuniao-lateral { position: sticky; top: 70px; border-radius: var(--raio); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.reuniao-status { display: flex; flex-direction: column; gap: 5px; padding: 14px; background: var(--surface); border: 1px solid var(--linha); border-radius: var(--raio-sm); }
.reuniao-status-icone { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--ok); margin-bottom: 4px; }
.reuniao-status strong { font-size: 14px; line-height: 1.3; }
.reuniao-status small { color: var(--texto-2); font-size: 12px; }
.reuniao-acao-principal { justify-content: center; width: 100%; }
.reuniao-mensagem { background: var(--surface); border: 1px solid var(--linha); color: var(--texto-2); border-radius: var(--raio-sm); padding: 10px 12px; font-size: 12.5px; line-height: 1.4; }
.reuniao-conteudo { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.reuniao-bloco { background: var(--bg-elev); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; }
.reuniao-bloco h2 { margin: 0 0 14px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.reuniao-bloco h2 i { color: var(--acento-claro); font-size: 13px; }
.reuniao-bloco-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.reuniao-bloco-topo h2 { margin: 0; }
.participantes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.participante-campo { display: flex; align-items: center; gap: 9px; }
.participante-campo span { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--linha); color: var(--texto-2); font-weight: 600; }
.transcricao-lista { display: flex; flex-direction: column; gap: 10px; }
.transcricao-linha { background: var(--surface); border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 12px; }
.transcricao-linha strong { display: block; margin-bottom: 5px; font-size: 12.5px; color: var(--acento-claro); }
.transcricao-linha p { margin: 0; color: var(--texto); line-height: 1.55; }
.reuniao-vazio { margin-top: 0; }

/* ---------------- Scrollbars ---------------- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------- Erro Blazor ---------------- */
#blazor-error-ui { background: var(--surface); color: var(--texto); bottom: 0; border-top: 1px solid var(--linha-forte);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.5); display: none; left: 0; padding: 0.8rem 1.4rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: 0.6rem; }

/* ---------------- Loading inicial ---------------- */
.loading-progress { position: relative; display: block; width: 6rem; height: 6rem; margin: 22vh auto 1rem; }
.loading-progress circle { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 0.4rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--acento); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-weight: 500; inset: calc(22vh + 2.5rem) 0 auto 0; color: var(--texto-2); font-size: 13px; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Carregando"); }

/* As media queries deste arquivo ficam TODAS no fim, depois das regras base — CSS resolve
   empate de especificidade por ordem, e regra mobile declarada antes da base simplesmente
   perde. Foi o que quebrou o Inbox e o board no celular. Não trazer MQ para o meio do arquivo. */

/* ============================================================
   Inbox de Relatos (triagem do Secretário)
   ============================================================ */

/* nav da topbar */
.trello-nav { display: flex; align-items: center; gap: 4px; margin-left: 22px; flex: 1; }
.trello-nav-link { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 6px;
    color: var(--texto-2); font-size: 13px; font-weight: 500; transition: background .12s var(--ease), color .12s var(--ease); }
.trello-nav-link:hover { background: var(--surface-hover); color: var(--texto); }
.trello-nav-link.active { background: var(--acento-bg); color: var(--texto); }
.trello-nav-link i { font-size: 13px; }

/* cartões de métrica */
.inbox-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0 0 18px; }
.metrica-card { background: var(--surface); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; }
.metrica-valor { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.metrica-rotulo { color: var(--texto-2); font-size: 12.5px; margin-top: 2px; }
.metrica-sub { color: var(--texto-3); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; }

/* abas de filtro */
.inbox-filtros { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.filtro-grupo { display: flex; flex-wrap: wrap; gap: 7px; }
.filtro-tab { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 20px;
    background: var(--surface); border: 1px solid var(--linha-forte); color: var(--texto-2);
    font-size: 12.5px; font-weight: 500; cursor: pointer; transition: all .14s var(--ease); }
.filtro-tab:hover { background: var(--surface-hover); color: var(--texto); }
.filtro-tab.ativa { background: var(--acento-bg); color: var(--texto); border-color: var(--acento); }
.filtro-tab-count { color: var(--texto-3); font-size: 11px; }

.inbox-busca { flex: 0 0 auto; align-self: flex-start; width: 100%; max-width: 320px; margin-top: 0; }
.inbox-busca-limpar { background: none; border: none; color: var(--texto-3); cursor: pointer; padding: 4px; display: flex; }
.inbox-busca-limpar:hover { color: var(--texto); }

/* master-detail */
/* altura = viewport - topbar(52) - padding vertical do main(26+40); só as colunas rolam (sem scroll de página) */
.inbox-page { display: flex; flex-direction: column; min-height: 0;
    height: calc(100vh - 118px - var(--espaco-barra-inferior) - env(safe-area-inset-top, 0px));
    height: calc(100dvh - 118px - var(--espaco-barra-inferior) - env(safe-area-inset-top, 0px)); }
.inbox-layout { display: grid; grid-template-columns: minmax(360px, 430px) minmax(0, 1fr); gap: 18px;
    align-items: stretch; flex: 1; min-height: 0; }
.inbox-lista { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding-right: 3px; min-height: 0; }
.inbox-detalhe { border-radius: var(--raio); padding: 20px; overflow-y: auto; min-height: 0; }

/* linha do master */
.relato-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
    color: var(--texto); font-family: inherit; font-size: 13px;
    background: var(--surface); border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 11px 13px;
    transition: background .13s var(--ease), border-color .13s var(--ease), transform .12s var(--ease); }
.relato-row:hover { background: var(--surface-2); border-color: var(--linha-forte); transform: translateY(-1px); }
.relato-row.selecionado { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-bg); background: var(--surface-2); }
.relato-score { font-size: 22px; font-weight: 600; min-width: 36px; text-align: center; letter-spacing: -0.02em; }
.relato-row-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.relato-row-titulo { color: var(--texto); font-size: 13.5px; font-weight: 500; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.relato-row-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.relato-row-autor { color: var(--texto-3); font-size: 11.5px; }
.relato-row-data { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-3); font-size: 11.5px; margin-left: auto; }

/* badges */
.sev-badge, .status-badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px;
    border-radius: 6px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.tipo-badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 6px;
    font-size: 10.5px; font-weight: 600; color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.12) inset; white-space: nowrap; }
.origem-badge { display: inline-flex; align-items: center; gap: 5px; color: var(--texto-2); font-size: 11px;
    background: var(--surface); border: 1px solid var(--linha); border-radius: 20px; padding: 2px 9px; white-space: nowrap; }
.dup-badge { display: inline-flex; align-items: center; gap: 5px; color: var(--texto-3); font-size: 11px; }

/* detalhe */
.relato-detalhe-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.relato-detalhe-id { color: var(--texto-3); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.relato-detalhe-titulo { font-size: 17px; margin: 4px 0 0; line-height: 1.35; }
.relato-detalhe-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 4px; }
.relato-secao { margin-top: 18px; }
.relato-secao-label { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--texto-3);
    text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin: 0 0 9px; }
.relato-enriquecido-tag { color: var(--acento-claro); background: var(--acento-bg); border: 1px solid var(--acento);
    border-radius: 5px; padding: 1px 6px; font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.relato-campo { margin-bottom: 11px; }
.relato-campo strong { display: block; color: var(--texto-2); font-size: 11.5px; margin-bottom: 3px; font-weight: 600; }
.relato-campo p { margin: 0; line-height: 1.55; white-space: pre-wrap; }
.relato-imagens { display: flex; flex-wrap: wrap; gap: 8px; }
.relato-imagem-thumb { width: 120px; height: 120px; object-fit: cover; border-radius: var(--raio-sm); border: 1px solid var(--linha); background: var(--surface); cursor: zoom-in; transition: border-color .15s ease; }
.relato-imagem-thumb:hover { border-color: var(--acento); }
.sinal-grande { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.sinal-grande span { color: var(--texto-2); font-size: 13px; font-weight: 400; margin-left: 8px; }

/* nota manual, que convive com a da IA */
.nota-manual { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px;
    padding-top: 12px; border-top: 1px dashed var(--linha); }
.nota-manual label { font-size: 11px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.nota-manual-input { width: 78px; background: var(--bg); border: 1px solid var(--linha-forte); border-radius: var(--raio-sm);
    color: var(--texto); padding: 7px 9px; font-size: 14px; font-family: inherit; font-weight: 600; outline: none; text-align: center; }
.nota-manual-input:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-bg); }
.nota-manual-ativa { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
    color: var(--acento-claro); background: var(--acento-bg); border: 1px solid var(--acento); border-radius: 20px; padding: 2px 9px; }
/* as duas notas na linha: a da IA grande, a manual como chip logo abaixo */
.relato-score-bloco { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 40px; }
.relato-score-manual { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
    border: 1px solid currentColor; border-radius: 5px; padding: 0 4px; }

/* assunto rejeitado que voltou a ser pedido */
.reincidencia-badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 6px;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
    color: #f76808; border: 1px solid #f76808; background: color-mix(in srgb, #f76808 16%, transparent); }
.relato-alerta { margin-top: 16px; border: 1px solid #f76808; border-left-width: 3px; border-radius: var(--raio-sm);
    background: color-mix(in srgb, #f76808 10%, transparent); padding: 12px 14px; }
.relato-alerta-titulo { display: flex; align-items: center; gap: 8px; color: #f76808; font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.relato-alerta p { margin: 0 0 6px; line-height: 1.55; font-size: 12.5px; }
.relato-alerta p:last-child { margin-bottom: 0; }
.relato-alerta strong { color: var(--texto); font-weight: 600; }

/* título editável no detalhe */
.relato-detalhe-titulo .trello-btn-icon { margin-left: 6px; vertical-align: middle; }
.titulo-edicao { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.titulo-edicao .modal-input { flex: 1; min-width: 200px; }

/* explicação curta no topo dos modais de duplicata/mesclagem */
.modal-ajuda { color: var(--texto-2); font-size: 12.5px; line-height: 1.55; margin: 0 0 12px; }
.modal-ajuda strong { color: var(--texto); font-weight: 600; }

/* barras da pontuação */
.score-breakdown { display: flex; flex-direction: column; gap: 9px; }
.score-bar-linha { display: grid; grid-template-columns: 96px 1fr 30px; align-items: center; gap: 10px; }
.score-bar-rotulo { color: var(--texto-2); font-size: 11.5px; }
.score-bar-track { height: 6px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.score-bar-fill { height: 100%; border-radius: 4px; transition: width .3s var(--ease); }
.score-bar-valor { color: var(--texto-2); font-size: 11.5px; text-align: right; }

/* raciocínio */
.raciocinio-lista { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.raciocinio-lista li { color: var(--texto); line-height: 1.5; }

/* seletores tipo/severidade */
.relato-selects { display: flex; gap: 10px; flex-wrap: wrap; }
.relato-select-grupo { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 130px; }
.relato-select-grupo label { font-size: 11px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.relato-select { appearance: none; cursor: pointer; background: var(--bg); border: 1px solid var(--linha-forte);
    border-radius: var(--raio-sm); color: var(--texto); padding: 8px 10px; font-size: 13px; font-family: inherit; outline: none; }
.relato-select:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-bg); }

/* grupo de botoes do header do inbox (antes era estilo inline; quebra linha no celular) */
.inbox-header-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* botao Voltar do master-detail: so existe no celular (a media query <=860px o exibe) */
.inbox-voltar { display: none; margin-bottom: 12px; }

/* rodapé de ações */
.relato-acoes { display: flex; align-items: center; gap: 9px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linha); flex-wrap: wrap; }
.relato-acoes .reuniao-acao-principal { flex: 1; min-width: 150px; }

/* lista de duplicatas no detalhe */
.relato-dups { display: flex; flex-direction: column; gap: 6px; }
.relato-dup-item { background: var(--surface); border: 1px solid var(--linha); border-radius: var(--raio-sm);
    padding: 8px 11px; font-size: 12.5px; color: var(--texto-2); }

/* modal "Colar relatos" */
.colar-bloco { border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; margin-bottom: 12px; background: var(--surface); }
.colar-bloco-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.colar-contador { text-align: right; color: var(--texto-3); font-size: 11.5px; margin-top: 6px; }
.colar-contador .colar-obrigatorio { color: var(--perigo); }
.colar-add-btn { width: 100%; border: 1px dashed var(--linha-forte); border-radius: var(--raio); color: var(--texto-2);
    background: transparent; padding: 11px; cursor: pointer; text-align: center; font-size: 13px; font-weight: 500;
    display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease); }
.colar-add-btn:hover { background: var(--bg-elev); color: var(--texto); border-color: var(--acento); }
.colar-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px;
    padding-top: 14px; border-top: 1px solid var(--linha); flex-wrap: wrap; }
.colar-anexos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
.colar-anexo-add { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; font-weight: 500;
    color: var(--texto-2); border: 1px dashed var(--linha-forte); border-radius: var(--raio); padding: 7px 12px;
    transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease); }
.colar-anexo-add:hover { background: var(--bg-elev); color: var(--texto); border-color: var(--acento); }
.colar-anexo-lista { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.colar-anexo-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto);
    background: var(--bg-elev); border: 1px solid var(--linha); border-radius: 999px; padding: 4px 6px 4px 10px; max-width: 100%; }
.colar-anexo-chip > i { color: var(--acento); }

/* ============================================================
   Guia "Como funciona" (explicação da pontuação)
   ============================================================ */
.guia-page { max-width: 900px; margin: 0 auto; padding-bottom: 40px; }
.guia-intro { color: var(--texto-2); line-height: 1.65; font-size: 14px; max-width: 760px; margin: 4px 0 8px; }
.guia-intro strong { color: var(--texto); font-weight: 600; }

.guia-secao { margin-top: 28px; }
.guia-secao-label { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--texto-3);
    text-transform: uppercase; letter-spacing: .07em; font-weight: 600; margin-bottom: 12px; }
.guia-peso-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: none;
    padding: 2px 8px; border-radius: 20px; background: var(--surface-2); color: var(--texto-2); border: 1px solid var(--linha); }
.guia-nota { color: var(--texto-3); font-size: 12.5px; line-height: 1.6; margin: 10px 2px 0; }

/* fórmula */
.guia-formula { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--surface);
    border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px; }
.guia-formula-res { font-size: 17px; font-weight: 600; color: var(--texto); letter-spacing: -0.01em; }
.guia-formula-eq { color: var(--texto-3); font-size: 14px; }
.guia-formula-op { color: var(--texto-3); font-size: 16px; }
.guia-termo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto);
    padding: 4px 11px; border-radius: 6px; background: color-mix(in srgb, var(--c) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.guia-termo b { color: var(--c); font-weight: 700; }

/* severidade */
.guia-sev { border-radius: var(--raio-lg); padding: 20px; border-color: color-mix(in srgb, var(--perigo) 32%, var(--linha)); }
.guia-sev-sub { color: var(--texto-2); font-size: 13px; margin: 0 0 14px; }
.guia-guia-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 18px; }
.guia-guia-card { background: var(--bg-elev); border: 1px solid var(--linha); border-radius: var(--raio-sm);
    padding: 11px; font-size: 12px; color: var(--texto-2); line-height: 1.45; }
.guia-guia-num { display: block; font-size: 10.5px; font-weight: 800; color: var(--acento-claro); margin-bottom: 4px; }

.guia-niveis { display: flex; flex-direction: column; gap: 9px; }
.guia-nivel { display: flex; gap: 12px; background: var(--bg-elev); border: 1px solid var(--linha);
    border-radius: var(--raio-sm); overflow: hidden; }
.guia-nivel-faixa { width: 5px; flex-shrink: 0; background: var(--c); }
.guia-nivel-body { padding: 11px 14px 11px 4px; flex: 1; }
.guia-nivel-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.guia-nivel-nome { font-size: 13.5px; font-weight: 700; color: var(--c); }
.guia-nivel-score { font-size: 11px; font-weight: 700; color: var(--texto-2); background: var(--surface-2);
    border-radius: 20px; padding: 1px 9px; }
.guia-nivel-body p { margin: 0; font-size: 12.5px; color: var(--texto-2); line-height: 1.5; }
.guia-nivel-body p strong { color: var(--texto); font-weight: 600; }

.guia-regras { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.guia-regra { display: flex; align-items: flex-start; gap: 10px; background: var(--bg-elev);
    border-left: 3px solid #f76808; border-radius: var(--raio-sm); padding: 11px 13px; }
.guia-regra i { color: #f76808; margin-top: 2px; }
.guia-regra span { font-size: 12.5px; color: var(--texto-2); line-height: 1.55; }
.guia-regra strong { color: var(--texto); font-weight: 600; }
.guia-regra em { font-style: normal; color: var(--texto); font-weight: 600; }

/* cards de componentes */
.guia-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.guia-card { border-radius: var(--raio); padding: 16px; }
.guia-card-top { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600;
    color: var(--texto); margin-bottom: 6px; }
.guia-card-top .guia-peso-tag { margin-left: auto; }
.guia-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.guia-card-fonte { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); margin-bottom: 9px; }
.guia-card-txt { font-size: 12.5px; color: var(--texto-2); line-height: 1.55; margin: 0; }
.guia-card-txt strong { color: var(--texto); font-weight: 600; }
.guia-card-txt em { font-style: normal; color: var(--texto); }
.guia-mini { margin-top: 10px; display: flex; flex-direction: column; gap: 3px; }
.guia-mini div { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; }
.guia-mini span { color: var(--texto-2); }
.guia-mini b { color: var(--texto); font-weight: 700; }
.guia-reemergencia { margin-top: 10px; padding: 8px 10px; background: color-mix(in srgb, var(--ok) 12%, transparent);
    border-radius: var(--raio-sm); font-size: 11px; color: var(--ok); line-height: 1.45; }

/* ordenação */
.guia-ordem { border-radius: var(--raio); padding: 16px 18px; }
.guia-ordem p { margin: 0; font-size: 13px; color: var(--texto-2); line-height: 1.6; }
.guia-ordem strong { color: var(--texto); font-weight: 600; }

/* ---------------- Anexos de cards ---------------- */
.card-mini-anexos { color: var(--texto-3); font-size: 11px; display: inline-flex; align-items: center; gap: 4px; }
.anexos-grupo { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.anexos-dropzone { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px;
    border: 1.5px dashed var(--borda); border-radius: var(--raio-sm); color: var(--texto-2); font-size: 12.5px;
    cursor: pointer; transition: border-color .15s, background .15s; }
.anexos-dropzone:hover { border-color: var(--acento); background: var(--acento-bg); }
.anexos-dropzone-input { display: none; }
.anexos-progresso { display: flex; align-items: center; gap: 6px; }
.anexo-erro { color: var(--perigo, #e5484d); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.anexos-selecao { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.anexos-selecao-todos { display: inline-flex; align-items: center; gap: 7px; margin-right: auto;
    font-size: 12.5px; color: var(--texto-2); cursor: pointer; }
.anexos-selecao input[type=checkbox], .anexo-check { width: 15px; height: 15px; accent-color: var(--acento); cursor: pointer; flex-shrink: 0; }
.anexos-lista { display: flex; flex-direction: column; gap: 6px; }
.anexo-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--borda);
    border-radius: var(--raio-sm); }
.anexo-item.selecionado { border-color: var(--acento); background: var(--acento-bg); }
.anexo-abrir { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.anexo-thumb { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.anexo-icone { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--texto-2); background: var(--acento-bg); border-radius: 6px; flex-shrink: 0; }
.anexo-info { display: flex; flex-direction: column; min-width: 0; }
.anexo-nome { font-size: 13px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anexo-meta { font-size: 11px; color: var(--texto-3); }

/* Anexo colado (Ctrl+V) inline no texto de observacoes/comentario — token [anexo:ID] renderizado */
.anexo-inline { max-width: 100%; max-height: 260px; display: block; margin: 6px 0; border-radius: var(--raio-sm);
    object-fit: contain; cursor: pointer; }
.anexo-chip-inline { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0; padding: 4px 10px;
    background: var(--acento-bg); border: 1px solid var(--linha); border-radius: 999px; font-size: 12.5px;
    color: var(--texto); cursor: pointer; vertical-align: middle; }
.anexo-token-removido { display: inline-flex; align-items: center; gap: 5px; color: var(--texto-3);
    font-size: 12px; font-style: italic; }
.colar-anexo-indicador { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--texto-2); margin-top: 4px; }
.anexos-toast { position: fixed; bottom: calc(18px + max(var(--espaco-barra-inferior), env(safe-area-inset-bottom, 0px))); right: 18px; z-index: 1100; padding: 12px 14px; border-radius: var(--raio);
    display: flex; flex-direction: column; gap: 6px; max-width: min(360px, calc(100vw - 24px)); box-shadow: var(--sombra-flutua); }

/* ---------------- Links do GitHub em cards ---------------- */
.card-mini-links { color: var(--texto-3); font-size: 11px; display: inline-flex; align-items: center; gap: 4px; }
.github-grupo { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.github-add { display: flex; gap: 8px; }
.github-add .modal-input { flex: 1; min-width: 0; }
.github-lista { display: flex; flex-direction: column; gap: 6px; }
.github-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--borda);
    border-radius: var(--raio-sm); }
.github-abrir { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: var(--texto); text-decoration: none; }
.github-abrir:hover .github-texto { text-decoration: underline; }
.github-abrir i { width: 20px; text-align: center; color: var(--texto-2); flex-shrink: 0; }
.github-texto { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- Visualizador de anexo ---------------- */
.visualizador-backdrop { position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, .82);
    display: flex; align-items: center; justify-content: center; outline: none; }
.visualizador-controles { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center;
    gap: 10px; padding: 12px 16px; background: linear-gradient(rgba(0, 0, 0, .55), transparent); z-index: 1; }
.visualizador-controles a { text-decoration: none; }
.visualizador-nome { color: #fff; font-size: 13.5px; font-weight: 600; margin-right: auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visualizador-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
    background: rgba(255, 255, 255, .12); color: #fff; border: none; border-radius: 50%;
    width: 42px; height: 42px; font-size: 16px; cursor: pointer; transition: background .15s; }
.visualizador-nav:hover { background: rgba(255, 255, 255, .28); }
.visualizador-nav.anterior { left: 16px; }
.visualizador-nav.proximo { right: 16px; }
.visualizador-conteudo { max-width: calc(100vw - 130px); max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); margin-top: 40px;
    display: flex; align-items: center; justify-content: center; }
.visualizador-imagem { max-width: 100%; max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); object-fit: contain; border-radius: 6px; }
.visualizador-frame { width: min(920px, calc(100vw - 130px)); height: calc(100vh - 110px); height: calc(100dvh - 110px); border: none;
    border-radius: 6px; background: #fff; }
.visualizador-placeholder { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 44px;
    background: var(--fundo-2, #1c1e26); border-radius: var(--raio); color: var(--texto); }
.visualizador-placeholder > i { font-size: 44px; color: var(--texto-2); }
.visualizador-placeholder .trello-btn-primary { text-decoration: none; }

/* ---------------- Responsáveis de cards ---------------- */
.avatar-responsavel { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; color: #fff; font-size: 10.5px; font-weight: 600;
    letter-spacing: .02em; box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset; }
.avatar-responsavel.mini { width: 24px; height: 24px; font-size: 9px; border: 2px solid var(--surface); }
.avatar-responsavel.extra { background: var(--surface-hover); color: var(--texto-2); }
/* avatar interativo no modal (botao): hover sinaliza que o clique abre o popover do membro */
.avatar-responsavel.clicavel { border: none; padding: 0; font-family: inherit; cursor: pointer;
    transition: transform .12s var(--ease), box-shadow .12s var(--ease); }
.avatar-responsavel.clicavel:hover { transform: scale(1.1); box-shadow: 0 0 0 2px var(--acento); }
.card-mini-responsaveis { display: flex; margin-left: auto; }
.card-mini-responsaveis .avatar-responsavel.mini + .avatar-responsavel.mini { margin-left: -7px; }
.responsaveis-grupo { margin-top: 14px; }
.responsaveis-linha { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.responsaveis-add, .responsavel-chip-wrap { position: relative; }
.responsavel-add-btn { width: 28px; height: 28px; border-radius: 50%; border: 1.5px dashed var(--linha-forte);
    background: var(--surface); color: var(--texto-2); cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center; font-size: 12px;
    transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease); }
.responsavel-add-btn:hover, .responsavel-add-btn.ativo { background: var(--surface-2); border-color: var(--acento); color: var(--acento); }
/* nenhum popover ancorado pode ser mais largo que a viewport (celular estreito) */
.responsaveis-popover, .membro-popover, .mencao-popover, .arquivados-popover, .tags-popover { max-width: calc(100vw - 24px); }
.responsaveis-popover { position: absolute; top: 34px; left: 0; z-index: 30; width: 260px; padding: 10px;
    border-radius: var(--raio-sm); border: 1px solid var(--linha-forte); box-shadow: var(--sombra);
    background: var(--bg-elev); animation-duration: .14s;
    display: flex; flex-direction: column; gap: 8px; }
/* camada invisivel que fecha popovers no clique fora, sem acionar o que esta por baixo */
.popover-overlay { position: fixed; inset: 0; z-index: 25; background: transparent; }
/* overlay do painel de tags: fica acima da topbar (40) e abaixo da .quadro-barra (50), que abriga o popover */
.popover-overlay-barra { z-index: 45; }
/* popover do membro clicado: nome completo + remover do cartao */
.membro-popover { position: absolute; top: 34px; left: 0; z-index: 30; width: 230px; padding: 12px;
    border-radius: var(--raio-sm); border: 1px solid var(--linha-forte); box-shadow: var(--sombra);
    background: var(--bg-elev); animation-duration: .14s;
    display: flex; flex-direction: column; gap: 10px; }
.membro-popover-info { display: flex; align-items: center; gap: 9px; min-width: 0; }
.membro-popover-nome { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.membro-remover-btn { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--surface);
    border: 1px solid var(--linha); border-radius: 7px; color: var(--texto-2); padding: 7px 10px;
    font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: inherit;
    transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease); }
.membro-remover-btn:hover { background: rgba(235,87,87,0.14); border-color: rgba(235,87,87,0.4); color: #ff8585; }
.responsaveis-popover-lista { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.responsavel-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px;
    cursor: pointer; font-size: 13px; color: var(--texto); }
.responsavel-item:hover { background: var(--surface-hover); }
.responsavel-item .fa-check { margin-left: auto; color: var(--acento); font-size: 11px; }
.responsavel-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- Mencoes (@) no comentario ---------------- */
/* o editor ancora o popover de mencao logo acima do textarea */
.comentario-editor { position: relative; }
/* abre para baixo: acima do textarea a lista era cortada pelo topo do painel de comentarios */
.mencao-popover { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 260px; padding: 8px;
    background: var(--bg-elev); border: 1px solid var(--linha-forte); border-radius: var(--raio-sm);
    box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 2px;
    max-height: 240px; overflow-y: auto; animation-duration: .14s; }
.mencao-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px;
    cursor: pointer; font-size: 13px; color: var(--texto); }
.mencao-item:hover, .mencao-item.ativo { background: var(--surface-hover); }
.mencao-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comentario-mencao { color: var(--acento-claro); background: var(--acento-bg); border-radius: 4px;
    padding: 0 3px; font-weight: 500; }

/* ---------------- Sino de notificacoes ---------------- */
/* overlay e painel vivem no contexto da topbar (60), que ja passa por cima da .quadro-barra */
.popover-overlay-sino { z-index: 95; }

.sino-wrapper { position: relative; display: inline-flex; }
/* ponto de convite: aparece quando o push esta disponivel e ainda nao foi ativado neste navegador.
   Nao pedimos permissao sozinhos (o navegador penaliza e o Brave bloqueia) — isto so torna a opcao visivel. */
.sino-convite { position: absolute; top: 1px; right: 1px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--acento-claro); box-shadow: 0 0 0 2px var(--bg); }
.sino-btn { position: relative; width: 32px; height: 32px; border-radius: var(--raio-sm);
    background: transparent; border: 1px solid transparent; color: var(--texto-2); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
    transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease); }
.sino-btn:hover, .sino-btn.ativo { background: var(--surface-hover); color: var(--texto); border-color: var(--linha); }
.sino-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: var(--perigo); color: #fff; font-size: 9.5px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; }

.sino-painel { position: absolute; top: 40px; right: 0; z-index: 100; width: 380px; max-width: calc(100vw - 24px);
    background: var(--bg-elev); border: 1px solid var(--linha-forte); border-radius: var(--raio);
    box-shadow: var(--sombra-flutua); display: flex; flex-direction: column; overflow: hidden;
    animation-duration: .14s; }
.sino-painel-header { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 14px; border-bottom: 1px solid var(--linha); }
.sino-painel-titulo { margin: 0; font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.sino-painel-titulo i { color: var(--acento-claro); font-size: 13px; }
.sino-painel-lista { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; }
.sino-vazio { margin: 0; padding: 22px 14px; text-align: center; }

.sino-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px;
    border-bottom: 1px solid var(--linha); cursor: pointer;
    transition: background .12s var(--ease); }
.sino-item:last-child { border-bottom: none; }
.sino-item:hover { background: var(--surface-hover); }
/* nao lida ganha barra de acento a esquerda: destaque sem gritar */
.sino-item.nao-lida { background: var(--acento-bg); box-shadow: inset 2px 0 0 var(--acento); }
.sino-item-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sino-item-titulo { margin: 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.sino-item-card { color: var(--texto-2); }
.sino-item-trecho { margin: 0; font-size: 12px; color: var(--texto-2); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sino-item-toggle { flex: 0 0 auto; opacity: 0; transition: opacity .14s var(--ease); }
.sino-item:hover .sino-item-toggle { opacity: 1; }
.sino-item.nao-lida .sino-item-toggle { opacity: .7; }

.sino-painel-rodape { padding: 11px 14px; border-top: 1px solid var(--linha); background: var(--bg-elev);
    display: flex; flex-direction: column; gap: 7px; }
.sino-rodape-label { font-size: 10.5px; color: var(--texto-3); text-transform: uppercase;
    letter-spacing: .06em; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.sino-rodape-linha { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sino-rodape-ok { font-size: 12.5px; color: var(--ok); display: inline-flex; align-items: center; gap: 6px; }
.sino-rodape-texto { margin: 0; line-height: 1.45; }
.sino-rodape-erro { margin: 0; color: #ff9a9a; font-size: 11.5px; line-height: 1.4;
    display: inline-flex; align-items: flex-start; gap: 6px; }

/* ============================================================
   Breakpoints — TODOS aqui no fim, em ordem decrescente de largura, para vencerem as
   regras base por ordem na cascata (ver aviso no meio do arquivo).
   ============================================================ */

/* abaixo de 900px as colunas do card empilham: conteudo primeiro, comentarios depois */
@media (max-width: 900px) {
    .modal-card.modal-card-detalhe { height: calc(100vh - 40px); height: calc(100dvh - 40px); padding: 16px; }
    .modal-card-detalhe .modal-card-header, .modal-fullscreen .modal-card-header { display: flex; align-items: flex-start; justify-content: space-between; }
    /* Empilhado vira FLEX, nao grid de uma coluna. Motivo: o corpo herda altura fixa do flex do modal
       e trilhas de grid "auto" sao dimensionadas contra essa altura — a trilha do conteudo ficava menor
       que o texto (429px para 517px) e, com overflow visible, o excedente vazava da celula e desenhava
       por cima do painel de comentarios. align-content nao corrige isso: ele so distribui espaco que
       sobra. Em flex column com flex-shrink 0 cada painel guarda a altura do seu conteudo e o excedente
       vira scroll do proprio corpo. */
    .card-modal-corpo, .modal-fullscreen .card-modal-corpo {
        display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
    .card-modal-principal, .card-modal-lateral { flex: 0 0 auto; }
    .card-modal-principal { overflow-y: visible; padding-right: 0; }
    .card-modal-lateral { overflow-y: visible; border-left: none; border-top: 1px solid var(--linha); padding-left: 0; padding-top: 16px; }
    .modal-card-footer { margin-top: 12px; padding-top: 12px; }
}

@media (max-width: 860px) {
    /* o board empilha sob a barra; 'stretch' e essencial: com align-items:flex-start herdado,
       o .board-scroll ficava com a largura do CONTEUDO (todas as listas somadas), o overflow-x
       interno nunca ativava e a pagina inteira rolava de lado. */
    .quadro-corpo { flex-direction: column; align-items: stretch; }
    .board-scroll { width: 100%; min-width: 0; }
    .quadro-barra { flex-wrap: wrap; }
    .trello-main { padding: 20px 16px 32px;
        padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
    .reuniao-pagina { grid-template-columns: 1fr; }
    .reuniao-lateral { position: static; }
    .reuniao-bloco-topo { align-items: flex-start; flex-direction: column; }

    /* Inbox: uma coluna e altura livre. A grid de duas colunas (minmax(360px,...)) nao cabe em
       375px — era o que estourava a largura e empurrava a lista para fora da tela. */
    .inbox-page { height: auto; }
    .inbox-layout { grid-template-columns: minmax(0, 1fr); flex: none; }
    .inbox-lista { overflow-y: visible; }
    .inbox-detalhe { overflow-y: visible; }

    /* master-detail vira navegacao de app: sem selecao so a lista aparece; com selecao so o
       detalhe, e o botao Voltar devolve a lista. No desktop os dois convivem lado a lado. */
    .inbox-layout.detalhe-aberto .inbox-lista { display: none; }
    .inbox-layout:not(.detalhe-aberto) .inbox-detalhe { display: none; }
    .inbox-detalhe .inbox-voltar { display: inline-flex; }
}

@media (max-width: 760px) {
    .guia-guia-grid { grid-template-columns: repeat(2, 1fr); }
    .guia-cards { grid-template-columns: 1fr; }
    .guia-formula { font-size: 13px; }
}

@media (max-width: 560px) {
    /* a barra inferior passa a existir: todas as alturas calc() descontam este token */
    :root { --espaco-barra-inferior: calc(56px + env(safe-area-inset-bottom, 0px)); }

    /* nada na pagina rola de lado: o scroll horizontal e privilegio do board */
    html, body { overflow-x: hidden; }
    .trello-main { max-width: 100%; overflow-x: hidden; }

    .sino-painel { position: fixed; top: calc(56px + env(safe-area-inset-top, 0px)); right: 12px; left: 12px; width: auto; }

    /* topbar compacta: o nome do usuario e informacao nao critica no celular */
    .trello-topbar { padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); }
    .trello-user-nome { display: none; }

    /* a nav da topbar vira tab bar fixa na base (mesmo markup; os NavLink ja tem icone + rotulo).
       Nasce fora de qualquer backdrop-filter (a topbar guarda o blur no ::before), entao o fixed
       ancora na viewport — gotcha .glass respeitado. */
    .trello-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; margin: 0;
        height: calc(56px + env(safe-area-inset-bottom, 0px)); padding: 0 8px env(safe-area-inset-bottom, 0px);
        padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px));
        background: var(--bg-elev); border-top: 1px solid var(--linha);
        display: flex; align-items: center; justify-content: space-around; gap: 0; }
    .trello-nav-link { flex: 1; flex-direction: column; justify-content: center; gap: 3px;
        font-size: 10.5px; padding: 5px 8px; text-align: center; }
    .trello-nav-link i { font-size: 17px; }
    .trello-main { padding-bottom: calc(32px + var(--espaco-barra-inferior)); }

    /* board: uma lista dominante com espiada da proxima + snap suave por lista.
       O snap e "proximity" (nunca prende o scroll livre) e a classe .sem-snap o suspende
       durante o arraste para nao brigar com o auto-scroll do Sortable. */
    .lista, .lista-nova { width: min(296px, calc(100vw - 56px)); min-width: min(296px, calc(100vw - 56px)); }
    .board-scroll { scroll-snap-type: x proximity; }
    .board-scroll.sem-snap { scroll-snap-type: none; }
    .lista, .lista-nova { scroll-snap-align: start; }

    /* modal de detalhe do card e "Colar relatos" em tela cheia (visual do .modal-fullscreen) */
    .modal-card.modal-card-detalhe, .modal-card.modal-largo {
        max-width: 100%; width: 100%; height: 100vh; height: 100dvh;
        max-height: 100vh; max-height: 100dvh; border-radius: 0; }

    /* header do card empilhado, como no app do Trello: a fileira de acoes em cima e o titulo
       em largura total embaixo. Disputando a mesma linha, os 5 botoes (44px cada, alvo de toque)
       comiam ~250px dos 375px e sobrava uma coluna de ~80px que quebrava o titulo letra por letra. */
    .modal-card-detalhe .modal-card-header {
        flex-direction: column; align-items: stretch; gap: 6px; }
    .modal-card-detalhe .modal-header-acoes { order: -1; justify-content: flex-end; }
    .modal-card-detalhe .modal-titulo-card { font-size: 17px; margin-bottom: 6px; }
    .modal-card-detalhe .titulo-crescivel { margin-right: 0; }
    /* o campo de comentario e o conteudo do card ficam claramente separados no empilhamento */
    .card-modal-lateral { padding-top: 14px; margin-top: 2px; }
    /* sem :has o backdrop mantem os 20px de moldura — degradacao aceitavel */
    .modal-backdrop:has(.modal-card-detalhe), .modal-backdrop:has(.modal-largo) { padding: 0; }

    /* Todos os popovers promovidos ao padrao do sino (fixed com margens): ancorados ao botao
       eles escapavam pela lateral e ficavam inalcancaveis — o clamp de largura nao resolve
       posicao. Os da barra do quadro so podem ser fixed porque a .quadro-barra passou a guardar
       o vidro no ::after (senao o backdrop-filter dela os prenderia). */
    .responsaveis-popover, .membro-popover, .mencao-popover,
    .tags-popover, .arquivados-popover {
        position: fixed; top: calc(64px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; width: auto; }
    .mencao-popover { max-height: 34vh; max-height: 34dvh; }
    /* dentro do fixed a lista rola: o teto e a tela, nao mais a altura ancorada ao botao */
    .tags-popover-lista, .arquivados-lista {
        max-height: calc(100dvh - 190px - var(--espaco-barra-inferior)); }
    .tags-popover-lista { max-height: calc(100dvh - 250px - var(--espaco-barra-inferior)); }

    /* visualizador: as setas sobrepoem as bordas em vez de reservar 130px de tela */
    .visualizador-conteudo { max-width: calc(100vw - 24px); }
    .visualizador-frame { width: calc(100vw - 24px); }
    .visualizador-nav.anterior { left: 8px; }
    .visualizador-nav.proximo { right: 8px; }
}

/* ============================================================
   Toque (media queries de interacao — valem por dispositivo, nao por largura)
   ============================================================ */

/* sem double-tap-zoom acidental e sem flash cinza de tap nos controles recorrentes */
.trello-btn-primary, .trello-btn-ghost, .trello-btn-icon, .trello-btn-perigo, .sino-btn,
.card-mini, .relato-row, .quadro-card, .trello-nav-link, .filtro-tab, .tag-toggle,
.lista-add-btn, .lista-nova-btn, .colar-add-btn, .colar-anexo-add,
.cor-opcao, .icone-opcao, .inbox-busca-limpar, .responsavel-add-btn, .responsavel-item,
.anexos-selecao input[type=checkbox], .anexo-check,
.observacoes-leitura.editavel, .anexo-inline, .anexo-chip-inline {
    touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

@media (hover: none) {
    /* nenhuma acao pode existir so atras de hover: no touch elas ficam sempre visiveis */
    .quadro-card-acoes, .quadro-card-favorito, .lista-excluir, .feed-item-acoes, .sino-item-toggle { opacity: 1; }

    /* feedback imediato de toque (:active espelha o efeito do :hover de cada classe) */
    .card-mini:active, .relato-row:active, .quadro-card:active { background: var(--surface-2); border-color: var(--linha-forte); }
    .trello-btn-icon:active { background: var(--surface-hover); color: var(--texto); }
    .trello-btn-ghost:active, .filtro-tab:active, .trello-nav-link:active { background: var(--surface-hover); color: var(--texto); }
    .tag-toggle:active { background: var(--surface-hover); }
    .sino-btn:active { background: var(--surface-hover); color: var(--texto); }
    .trello-btn-primary:active, .trello-btn-perigo:active { filter: brightness(1.15); }
    .inbox-busca-limpar:active { color: var(--texto); }
    .responsavel-item:active { background: var(--surface-hover); }
}

@media (pointer: coarse) {
    /* o toque longo arrasta: nao pode selecionar texto nem abrir o menu do sistema */
    .card-mini, .lista-header { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

    /* alvos de toque ~44px: o icone continua pequeno, o alvo e que cresce */
    .trello-btn-icon { width: 44px; height: 44px; }
    .sino-btn { width: 44px; height: 44px; }
    .cor-opcao { width: 44px; height: 44px; }
    .icone-opcao { width: 44px; height: 44px; }
    /* checkbox nativo nao cresce por padding: 28px de caixa + o rotulo/linha completam o alvo */
    .anexos-selecao input[type=checkbox], .anexo-check { width: 28px; height: 28px; }
    .inbox-busca-limpar { padding: 14px; }
    .responsavel-add-btn { width: 40px; height: 40px; }
    /* itens da multiselecao de responsaveis (filtro do quadro e popover do modal) com alvo de ~44px */
    .responsavel-item { min-height: 44px; }
    /* toggles do grupo Deploy no modal do card: alvo de ~44px sem alterar o .tag-toggle das tags de verdade */
    .deploy-toggle { min-height: 44px; }

    /* fonte de 16px em campos de texto elimina o auto-zoom do iOS no foco.
       As classes entram junto do seletor de elemento porque as regras base delas (.modal-input 14px,
       .relato-select 13px...) venceriam o elemento por especificidade; classe contra classe, esta
       regra vence por vir depois no arquivo. */
    input, select, textarea,
    .modal-input, .modal-textarea, .login-input, .card-add-input, .lista-titulo-input,
    .membro-perfil-select, .nota-manual-input, .relato-select, .mover-card-select, .arquivado-destino { font-size: 16px; }
}