/*
 *   CSS FILE HEADER #
 *
 *   File:         [som-painel.css]
 *   Author(s):    ['Pedro H.F Matias']
 *   Date:         ['20.10.2026']
 *   Version:      ['0.1.0']
 *   Description:  ['Sound panel and volume button (som-painel.js), shared by the grimoire, the sheet and the Mesa: the fallbacks of the colors keep it readable where grimorio.css is not loaded.']
 */

/* ---------- sound panel ---------- */
.painel-som { display: grid; gap: .35em; }
.som-linha { display: flex; align-items: center; gap: .7em; margin: 0; padding: .4em 0; border-bottom: 1px solid var(--borda, rgba(110, 82, 50, .35)); cursor: pointer; }
.som-linha:last-of-type { border-bottom: 0; }
.som-nome { flex: 0 0 13.5em; display: flex; flex-direction: column; font-weight: 600; }
.som-nome small { font-weight: 400; font-style: italic; color: var(--texto-3, #6e5232); font-size: .85em; }
.som-geral .som-nome { flex-basis: calc(13.5em + 1.6em); }
.som-linha input[type="range"] { flex: 1; min-width: 0; accent-color: var(--ouro, #8a5a12); }
.som-linha input[type="checkbox"] { accent-color: var(--ouro, #8a5a12); width: 1.1em; height: 1.1em; margin: 0; }
.btn-som.mudo { opacity: .6; }
.btn-som .ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }