/* Criado, desenvolvido, testado, abandonado, rejeitado, recuperado e testado fonte vozes da minha cabeça - William Tassi Moreira */
/* ACCTNN — Componentes reutilizáveis */

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .6rem 1.15rem; border-radius: var(--raio); border: 2px solid var(--rio); background: var(--rio); color: var(--sobre-rio); font-weight: 700; font-size: var(--t-sm); letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, color .15s; }
.btn:hover { color: var(--sobre-rio); transform: translateY(-1px); background: color-mix(in srgb, var(--rio) 86%, var(--tinta)); }
.btn--sol { background: var(--sol); border-color: var(--sol); color: var(--sobre-sol); }
.btn--sol:hover { background: color-mix(in srgb, var(--sol) 85%, var(--tinta)); color: var(--sobre-sol); }
.btn--vazado { background: transparent; color: var(--tinta); border-color: var(--linha); }
.btn--vazado:hover { background: var(--papel-2); color: var(--tinta); border-color: var(--tinta-2); }
.btn--pequeno { min-height: 36px; padding: .35rem .85rem; font-size: var(--t-xs); }
.btn--zap { background: #1E8E4E; border-color: #1E8E4E; color: #fff; }
.btn--zap:hover { background: #17733F; color: #fff; }
.btn-icone { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--papel); color: var(--tinta); cursor: pointer; }
.btn-icone:hover { background: var(--papel-2); }

/* Selos (situação) */
.selo { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: 99px; font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em; background: var(--papel-2); color: var(--tinta-2); white-space: nowrap; }
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo--ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
.selo--alerta { color: var(--alerta); background: color-mix(in srgb, var(--alerta) 15%, transparent); }
.selo--erro { color: var(--erro); background: color-mix(in srgb, var(--erro) 13%, transparent); }
.selo--norte { color: var(--rio); background: var(--rio-claro); }
.selo--nordeste { color: var(--sobre-sol); background: var(--sol-claro); }
:root[data-theme="dark"] .selo--nordeste { color: var(--sol); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .selo--nordeste { color: var(--sol); } }

/* Cartões */
.cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-g); padding: var(--e-5); min-width: 0; }
.cartao--sombra { box-shadow: var(--sombra); }

/* Formulários */
.campo { display: grid; gap: .35rem; min-width: 0; }
.campo label, .rotulo { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
.entrada, .campo input, .campo select, .campo textarea { width: 100%; min-height: 44px; padding: .55rem .8rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); color: var(--tinta); }
.campo textarea { min-height: 110px; resize: vertical; }
.entrada:focus, .campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--rio); outline-offset: 0; border-color: var(--rio); }
.ajuda { font-size: var(--t-xs); color: var(--tinta-2); }
.grade-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.grade-form .inteiro { grid-column: 1 / -1; }
@media (max-width: 620px) { .grade-form { grid-template-columns: 1fr; } }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-sm); }
.check input { width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--rio); flex: none; }

/* Tabelas */
.tabela-rolo { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio-g); background: var(--papel); }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabela th { text-align: left; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); padding: .75rem 1rem; border-bottom: 1px solid var(--linha); background: var(--papel-2); white-space: nowrap; }
.tabela td { padding: .7rem 1rem; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: color-mix(in srgb, var(--rio-claro) 45%, transparent); }
.tabela .dir { text-align: right; font-variant-numeric: tabular-nums; }

/* Faixa do Encontro */
.faixa { height: 56px; background-repeat: repeat-x; background-size: auto 100%; }
.faixa--fina { height: 22px; }
.faixa--alta { height: 88px; }

/* Abas */
.abas { display: flex; gap: .25rem; border-bottom: 1px solid var(--linha); overflow-x: auto; scrollbar-width: thin; }
.abas button { flex: none; border: 0; background: none; padding: .7rem 1rem; font-weight: 600; font-size: var(--t-sm); color: var(--tinta-2); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.abas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--urucum); }

/* Fichas (filtros) */
.fichas { display: flex; flex-wrap: wrap; gap: .4rem; }
.ficha { border: 1px solid var(--linha); background: var(--papel); color: var(--tinta-2); border-radius: 99px; padding: .35rem .85rem; font-size: var(--t-xs); font-weight: 600; cursor: pointer; }
.ficha[aria-pressed="true"] { background: var(--tinta); color: var(--chao); border-color: var(--tinta); }

/* Janela (aviso em construção, visualização) */
.janela-fundo { position: fixed; inset: 0; z-index: 80; background: rgba(10,16,13,.55); display: grid; place-items: center; padding: 16px; animation: aparece .2s ease-out; }
@keyframes aparece { from { opacity: 0; } }
.janela { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--papel); color: var(--tinta); border-radius: var(--raio-g); box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); }
.janela--larga { width: min(860px, 100%); }
.janela__faixa { height: 26px; border-radius: var(--raio-g) var(--raio-g) 0 0; }
.janela__corpo { padding: var(--e-5) var(--e-6) var(--e-6); display: grid; gap: var(--e-4); }
.janela__fechar { justify-self: end; margin-bottom: -2.4rem; position: relative; z-index: 2; }  /* v13: fica por cima do título que vem depois (antes o clique não pegava) */
.janela h3 { font-size: 2rem; text-transform: uppercase; }
.construcao-icone { width: 64px; height: 64px; }
.linha-acoes { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.numero-zap { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .6rem .8rem; border: 1px dashed var(--linha); border-radius: var(--raio); background: var(--papel-2); font-family: var(--f-mono); }

/* Aviso flutuante */
.aviso-flutuante { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; background: var(--tinta); color: var(--chao); padding: .7rem 1.1rem; border-radius: var(--raio); font-size: var(--t-sm); font-weight: 600; box-shadow: var(--sombra); max-width: calc(100% - 32px); }

/* Faixa de “dados de exemplo” */
.exemplo { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--t-xs); font-weight: 700; color: var(--urucum); text-transform: uppercase; letter-spacing: .1em; }

/* Marca d'água do desenvolvedor (somente áreas com login) */
.marca-dagua { position: fixed; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 0; pointer-events: none; display: grid; justify-items: end; gap: 0; opacity: .32; color: var(--tinta-2); text-align: right; }
.marca-dagua svg { width: 54px; height: auto; margin-bottom: 2px; }
.marca-dagua small { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.marca-dagua strong { font-size: .9rem; font-weight: 700; }
.marca-dagua span { font-size: .7rem; font-family: var(--f-mono); }
@media (max-width: 600px) { .marca-dagua { opacity: .22; } .marca-dagua svg { width: 38px; } }

/* O conteúdo das áreas com login fica por cima da marca d'água */
.painel__main > * { position: relative; z-index: 1; }