/* ============================================================================
 * SELETOR DE EMOJI EDITAVEL do mapa (03/10/2026) — folha do core/mapa_presenca.js.
 * Mock aprovado: techterra-online-backend/docs/mock-emoji-seletor-editavel.html
 * (decisoes D1-D9 de 02/10). A base do seletor (.pp-emo-ctl/.pp-emo-pop/.pp-emo-grade/
 * .pp-emo-op) continua no style.css; aqui so' o que e' novo: o lapis, o modo de
 * edicao (.pp-emo-ed-*) e as peles do balao (.pp-emo--<estilo>).
 * ========================================================================== */

.pp-emo-rod-acoes { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.pp-emo-lapis {
    display: grid; place-items: center; width: 28px; height: 26px; padding: 0;
    font-size: 14px; line-height: 1; cursor: pointer;
    color: #f3da9c; background: none; border: 1px solid rgba(201, 168, 76, .5); border-radius: 6px;
}
.pp-emo-lapis:hover { border-color: #f1d27a; color: #fff; background: rgba(201, 168, 76, .15); }
.pp-emo-vazio { font-size: .76rem; color: #a89878; font-style: italic; padding: 2px 0 10px; }
.pp-emo-op img { width: 24px; height: 24px; object-fit: contain; display: block; }
.pp-emo-pop { overflow-y: auto; }

/* ---- modo lapis ---- */
.pp-emo-pop.editando { width: 340px; }
.pp-emo-ed-topo { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.pp-emo-ed-topo b { font: 700 .9rem 'Cinzel', serif; color: #f3da9c; letter-spacing: .04em; }
.pp-emo-ed-topo small { font-size: .72rem; color: #a89878; }
/* grupos: uma fileira de icones, como a barra de categorias de um teclado de emoji */
.pp-emo-ed-grupos { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid rgba(201, 168, 76, .22); margin-bottom: 10px; }
.pp-emo-ed-grupo {
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0 6px; margin-bottom: -1px; cursor: pointer;
    background: none; border: none; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0;
}
.pp-emo-ed-grupo .ic { font-size: 20px; line-height: 1; filter: grayscale(.75); opacity: .55; transition: opacity .15s, filter .15s; }
.pp-emo-ed-grupo i { font: 700 9.5px 'Cinzel', serif; font-style: normal; letter-spacing: .03em; color: #7d705a; }
.pp-emo-ed-grupo:hover { background: rgba(201, 168, 76, .08); }
.pp-emo-ed-grupo:hover .ic { opacity: .9; filter: none; }
.pp-emo-ed-grupo.on { border-bottom-color: #c9a84c; background: rgba(201, 168, 76, .12); }
.pp-emo-ed-grupo.on .ic { opacity: 1; filter: none; }
.pp-emo-ed-grupo.on i { color: #f3da9c; }
.pp-emo-ed-grupo.cheia i { color: #9be3a6; }
.pp-emo-ed-nome { font: 700 .82rem 'Cinzel', serif; color: #f3da9c; letter-spacing: .04em; margin: 0 0 6px; }
.pp-emo-ed-rot {
    display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 4px;
    font: 700 10.5px 'Cinzel', serif; letter-spacing: .06em; color: #a89878; text-transform: uppercase;
}
.pp-emo-ed-rot span { font-family: 'Lora', serif; text-transform: none; letter-spacing: 0; font-weight: 400; }
.pp-emo-ed-linha { padding: 4px; border-radius: 8px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(201, 168, 76, .25); }
.pp-emo-ed-linha .pp-emo-grade { margin: 0; }
.pp-emo-ed-vaga {
    display: grid; place-items: center; min-height: 34px; border-radius: 6px; border: 1px dashed rgba(201, 168, 76, .25);
    color: rgba(201, 168, 76, .35); font: 12px/1 'Cinzel', serif;
}
.pp-emo-ed-linha .pp-emo-op { position: relative; }
.pp-emo-ed-linha .pp-emo-op::after {
    content: '✕'; position: absolute; top: -4px; right: -3px; width: 13px; height: 13px; border-radius: 50%;
    display: none; place-items: center; font: 700 8px/1 system-ui, sans-serif; color: #fff; background: #b0453a;
}
.pp-emo-ed-linha .pp-emo-op:hover::after { display: grid; }
.pp-emo-ed-cat { max-height: 188px; overflow-y: auto; padding-right: 2px; margin-bottom: 6px; }
.pp-emo-ed-cat .pp-emo-grade { margin: 0; }
.pp-emo-ed-cat .pp-emo-op { position: relative; }
.pp-emo-ed-cat .pp-emo-op.on::after {
    content: '✓'; position: absolute; top: -3px; right: -2px; width: 13px; height: 13px; border-radius: 50%;
    display: grid; place-items: center; font: 700 9px/1 system-ui, sans-serif; color: #10240f; background: #7fd08e;
}
.pp-emo-ed-cat .pp-emo-op:disabled { opacity: .28; cursor: not-allowed; }
.pp-emo-ed-cat .pp-emo-op:disabled:hover { background: none; border-color: transparent; }
.pp-emo-ed-dica { min-height: 1.2em; font-size: .72rem; color: #a89878; font-style: italic; margin: 0 0 8px; }
.pp-emo-ed-dica.cheia { color: #f3da9c; }
.pp-emo-ed-dica.erro { color: #ff9f8f; font-style: normal; }
.pp-emo-ed-rod { display: flex; align-items: center; gap: 6px; border-top: 1px solid rgba(201, 168, 76, .18); padding-top: 8px; }
.pp-emo-ed-rod .esp { flex: 1; }
.pp-emo-ed-btn {
    font: 700 11px 'Cinzel', serif; color: #cdbf9f; background: none;
    border: 1px solid rgba(201, 168, 76, .4); border-radius: 6px; padding: 4px 10px; cursor: pointer;
}
.pp-emo-ed-btn:hover { border-color: #c9a84c; color: #f1e2b4; }
.pp-emo-ed-btn:disabled { opacity: .5; cursor: wait; }
.pp-emo-ed-btn.salvar { color: #1a130a; background: linear-gradient(180deg, #e8d38a, #c9a84c); border-color: #e8d38a; }
.pp-emo-ed-btn.salvar:hover { filter: brightness(1.08); color: #1a130a; }

/* ---- estilos do balao: a mesma caixa .pp-emo, so' a pele muda ---- */
.pp-emo-ed-baloes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 8px; }
.pp-emo-ed-balao {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 15px; min-height: 72px;
    padding: 8px 2px 5px; cursor: pointer; background: rgba(0, 0, 0, .3); border: 1px solid rgba(201, 168, 76, .2); border-radius: 8px;
}
.pp-emo-ed-balao:hover { border-color: rgba(201, 168, 76, .55); }
.pp-emo-ed-balao.on { border-color: #c9a84c; background: rgba(201, 168, 76, .18); box-shadow: 0 0 0 1px #c9a84c inset; }
.pp-emo-ed-balao small { font: 700 9px 'Cinzel', serif; letter-spacing: .03em; color: #a89878; }
.pp-emo-ed-balao.on small { color: #f3da9c; }
.pp-emo-amostra {
    position: relative; display: inline-block; font-size: 20px; line-height: 1; padding: 3px 6px; background: #f4ecd8;
    border: 1.5px solid #c9a84c; border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
.pp-emo-amostra::after {
    content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #c9a84c; border-bottom: 0;
}
.pp-emo-amostra .pp-emo-img, .pp-emo-amostra img { width: 1em; height: 1em; display: block; }
.pp-emo.pp-emo--noite, .pp-emo-amostra.pp-emo--noite {
    background: #1c2530; border-color: #c9a84c; box-shadow: 0 2px 6px rgba(0, 0, 0, .6), inset 0 0 6px rgba(201, 168, 76, .25);
}
.pp-emo.pp-emo--pergaminho, .pp-emo-amostra.pp-emo--pergaminho {
    background: linear-gradient(180deg, #f3e3b9, #d6ba7e); border-color: #7a5a22; border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.pp-emo.pp-emo--pergaminho::after, .pp-emo-amostra.pp-emo--pergaminho::after { border-top-color: #7a5a22; }
.pp-emo.pp-emo--pensamento, .pp-emo-amostra.pp-emo--pensamento { background: #fbfaf6; border-color: #d4cdbd; border-radius: 999px; padding: 4px 8px; }
.pp-emo.pp-emo--pensamento::after, .pp-emo-amostra.pp-emo--pensamento::after {
    width: 7px; height: 7px; bottom: -10px; left: 40%; transform: none;
    border: 1.5px solid #d4cdbd; border-radius: 50%; background: #fbfaf6;
}
.pp-emo.pp-emo--pensamento::before, .pp-emo-amostra.pp-emo--pensamento::before {
    content: ""; position: absolute; width: 4px; height: 4px; bottom: -16px; left: 30%;
    border: 1.5px solid #d4cdbd; border-radius: 50%; background: #fbfaf6;
}
.pp-emo.pp-emo--livre, .pp-emo-amostra.pp-emo--livre {
    background: none; border-color: transparent; box-shadow: none; padding: 0; font-size: 24px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .85));
}
.pp-emo.pp-emo--livre::after, .pp-emo-amostra.pp-emo--livre::after { display: none; }

/* celular: o quadro ocupa a largura da tela */
html[data-viewport="mobile"] .pp-emo-pop,
html[data-viewport="mobile"] .pp-emo-pop.editando { width: calc(100vw - 24px); max-width: 360px; }