/* Estilos de limites de gastos, permissões do compartilhamento e tutoriais. Usa as variáveis de estilo.css (cores, tema escuro, raios de 3 a 8px). */

/* ---------- Aviso de permissão (ui/permissao.js): faixa discreta no topo das telas ---------- */
.perm-aviso {
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; padding: 10px 14px;
  border: 1px solid var(--borda); border-left: 3px solid var(--ambar); border-radius: var(--r3);
  background: var(--superficie-2); color: var(--texto-2); font-size: 14px; line-height: 1.45;
}
.perm-aviso .ic { color: var(--ambar); margin-top: 2px; }
.perm-aviso strong { color: var(--texto); font-weight: 600; }
.perm-aviso-leitura { border-left-color: var(--marca); }
.perm-aviso-leitura .ic { color: var(--marca); }
.topo .perm-aviso { margin: 10px 0 2px; } /* quando o app põe o aviso no topo de todas as telas */

/* ---------- Limites de gastos (telas/limites.js) ---------- */
/* tons da barra (verde, amarelo, vermelho) nas telas de limite: o acabamento do estilo.css pinta toda .barra de azul */
.lim-cores .barra-sucesso span { background: var(--verde); }
.lim-cores .barra-aviso span { background: var(--ambar); }
.lim-cores .barra-perigo span { background: var(--vermelho); }
.lim-mes > .rotulo { color: var(--texto-2); }
.lim-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.lim-lista { min-width: 0; }
.lim-resumo-pe { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: 13px; color: var(--texto-3); }
.lim-item-editando { background: var(--marca-suave); }
.lim-item .linha-sub > span { white-space: normal; } /* "R$ 1.000,00 de R$ 1.500,00" quebra em vez de cortar no celular */
.lim-acoes { display: flex; gap: 2px; flex: none; margin: -4px -4px 0 0; }
.lim-detalhe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; font-size: 13px; color: var(--texto-3); }
.lim-pct { font-weight: 600; color: var(--verde); }
.lim-pct-alerta { color: var(--ambar); }
.lim-pct-estourado { color: var(--vermelho); }
.lim-partes { display: inline-flex; flex-wrap: wrap; gap: 2px 12px; min-width: 0; }
.lim-partes .num { color: var(--texto-2); }

.lim-form { padding: 18px 16px; }
.lim-form-titulo { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 14px; }
.lim-form-cat {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 8px 10px;
  border: 1px solid var(--borda); border-radius: var(--r3); background: var(--superficie-2);
}
.lim-pct-campo { position: relative; max-width: 160px; }
.lim-pct-campo .entrada { padding-right: 34px; }
.lim-pct-sufixo { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--texto-3); font-weight: 600; pointer-events: none; }
.lim-form-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.lim-form-acoes .botao { flex: 1 1 120px; }

.lim-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; font-size: 13px; color: var(--texto-3); }
.lim-legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.lim-cor { display: inline-block; width: 10px; height: 10px; border-radius: var(--r1); flex: none; }
.lim-cor-ok { background: var(--verde); }
.lim-cor-alerta { background: var(--ambar); }
.lim-cor-estourado { background: var(--vermelho); }

/* lado a lado (o "Novo limite" à esquerda) quando há largura: tablet sem a lateral ou computador largo */
@media (min-width: 840px) and (max-width: 1023px), (min-width: 1180px) {
  .lim-grade:not(.lim-grade-so-lista) { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); grid-template-areas: "form lista"; }
  .lim-grade:not(.lim-grade-so-lista) .lim-form { grid-area: form; }
  .lim-grade:not(.lim-grade-so-lista) .lim-lista { grid-area: lista; }
}

/* Categorias: o limite de cada uma e o caminho para Limites de gastos */
.lim-cat-link { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; }
.lim-cat-convite { display: flex; align-items: center; gap: 12px; color: var(--texto); text-decoration: none; transition: border-color var(--t1); }
.lim-cat-convite:hover { border-color: var(--borda-forte); }
.lim-cat-convite > .ic:first-child { color: var(--marca); }
.lim-cat-convite > span { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; }
.lim-cat-convite strong { font-weight: 600; }
.lim-cat-limite {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--borda); border-radius: var(--r3); background: var(--superficie-2);
}
.lim-cat-valor { font-weight: 600; }

/* ---------- Compartilhar: permissão de cada pessoa (telas/compartilhar.js) ---------- */
select.perm-select { height: 38px; padding-left: 10px; font-size: 14px; }
.perm-pessoa { flex-wrap: wrap; row-gap: 8px; }
.perm-pessoa-permissao { flex: 1 0 100%; display: flex; align-items: center; gap: 10px; min-width: 0; }
.perm-pessoa-permissao-avatar { padding-left: 46px; }
.perm-pessoa-rotulo { flex: none; font-size: 13px; color: var(--texto-3); }
.perm-pessoa-permissao select.perm-select { flex: 1; min-width: 0; max-width: 260px; }
.perm-niveis { list-style: none; margin: 0; padding: 4px 16px; }
.perm-niveis li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; font-size: 14px; }
.perm-niveis li + li { border-top: 1px solid var(--borda); }
.perm-niveis strong { font-weight: 600; }
.perm-niveis span { color: var(--texto-3); line-height: 1.45; }
/* "Só o que é dele": as contas e cartões da pessoa (resumo e a escolha por caixas de seleção) */
.perm-liberados {
  flex: 1 0 calc(100% - 46px); max-width: calc(100% - 46px); display: flex; flex-direction: column; gap: 10px; min-width: 0; margin-left: 46px;
  padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--r3); background: var(--superficie-2);
}
.perm-liberados-topo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.perm-liberados-topo > .ic { flex: none; color: var(--marca); }
.perm-liberados-titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
.perm-liberados-titulo strong { font-weight: 600; }
.perm-liberados-resumo { font-size: 13px; color: var(--texto-3); }
.perm-liberados-escolha { display: flex; flex-direction: column; gap: 12px; }
.perm-liberados-grupo { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.perm-liberados-grupo legend { margin-bottom: 4px; padding: 0; font-size: 13px; color: var(--texto-3); }
.perm-check { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; cursor: pointer; }
.perm-check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--marca); cursor: pointer; }
.perm-check span { min-width: 0; overflow-wrap: anywhere; }
.perm-liberados-acoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.perm-liberados .campo-msg { margin: 0; }
.perm-convite-nota { flex: 1 0 100%; margin: 0; }
.perm-aviso-proprio { border-left-color: var(--marca); }
.perm-aviso-proprio .ic { color: var(--marca); }
@media (max-width: 380px) { .perm-pessoa-permissao-avatar { padding-left: 0; } .perm-liberados { margin-left: 0; flex-basis: 100%; max-width: 100%; } }

/* ---------- Tutoriais (telas/tutoriais.js) ---------- */
.tut-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.tut-card {
  display: flex; flex-direction: column; width: 100%; padding: 0; overflow: hidden; text-align: left;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: var(--r4); box-shadow: var(--sombra-1);
  transition: border-color var(--t1), box-shadow var(--t1);
}
.tut-card:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-2); }
.tut-capa {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--marca-suave), var(--superficie-2)); border-bottom: 1px solid var(--borda);
}
.tut-play {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r4);
  background: var(--marca); color: var(--marca-texto); box-shadow: var(--sombra-marca); transition: transform var(--t1);
}
.tut-play .ic { margin-left: 2px; }
.tut-card:hover .tut-play { transform: scale(1.06); }
.tut-duracao {
  position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: var(--r1);
  background: var(--aviso-fundo); color: var(--aviso-texto); font-size: 12px; font-weight: 600;
}
.tut-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px 14px; }
.tut-titulo, .tut-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.tut-titulo { font-size: 15px; font-weight: 600; line-height: 1.35; }
.tut-desc { font-size: 13px; color: var(--texto-3); line-height: 1.45; }
.tut-player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r3); background: var(--bloco); }
.tut-player iframe, .tut-player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tut-player-desc { margin-top: 14px; color: var(--texto-2); font-size: 14px; line-height: 1.5; white-space: pre-line; }
.tut-fora { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 14px; }