/* Cores da app à escolha de cada membro (Definições). O azul é a cor por omissão. */
html[data-tema="verde"] { --azul: #0f766e; --azul-esc: #115e59; --azul-claro: #14b8a6; --azul-50: #f0fdfa; --azul-100: #ccfbf1; --azul-200: #99f6e4; }
html[data-tema="roxo"] { --azul: #6d28d9; --azul-esc: #5b21b6; --azul-claro: #8b5cf6; --azul-50: #f5f3ff; --azul-100: #ede9fe; --azul-200: #ddd6fe; }
html[data-tema="rosa"] { --azul: #db2777; --azul-esc: #be185d; --azul-claro: #ec4899; --azul-50: #fdf2f8; --azul-100: #fce7f3; --azul-200: #fbcfe8; }
html[data-tema="laranja"] { --azul: #c2410c; --azul-esc: #9a3412; --azul-claro: #f97316; --azul-50: #fff7ed; --azul-100: #ffedd5; --azul-200: #fed7aa; }
html[data-tema="bordo"] { --azul: #9f1239; --azul-esc: #881337; --azul-claro: #e11d48; --azul-50: #fff1f2; --azul-100: #ffe4e6; --azul-200: #fecdd3; }
html[data-tema="grafite"] { --azul: #334155; --azul-esc: #1e293b; --azul-claro: #64748b; --azul-50: #f8fafc; --azul-100: #f1f5f9; --azul-200: #e2e8f0; }

.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin: 8px 0 14px; }
.tema { position: relative; display: grid; justify-items: center; gap: 6px; padding: 10px 6px; border: 2px solid var(--g200); border-radius: 14px; cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--g700); }
.tema input { position: absolute; opacity: 0; pointer-events: none; }
.tema-cor { width: 34px; height: 34px; border-radius: 50%; }
.tema:has(input:checked) { border-color: var(--g900); background: var(--g50); }
.tema:has(input:focus-visible) { outline: 2px solid var(--g900); outline-offset: 2px; }