/* Prancha de comunicação iClinic (CAA) - sempre gratuita.
   Paleta do iClinic Kids; cor de cada figura pela chave de Fitzgerald (tipo de palavra).
   Regras: figuras grandes, poucos elementos, nada de propaganda, funciona sem login. */
:root{
  --p-petroleo:#126A69; --p-menta:#73D6BE; --p-azul:#72BDEB; --p-amarelo:#F4C95D; --p-coral:#F47D72;
  --p-off:#FFF9EF; --p-bege:#F2EFE9; --p-cinza:#E4E7EB; --p-cinza-medio:#B7C1C7; --p-texto:#263638;
  --p-raio:22px; --p-cols:3;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--p-off);color:var(--p-texto);font-family:Figtree,system-ui,sans-serif;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button,input,select{font:inherit;color:inherit}
.p-app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}

/* Barra da frase */
.p-sentence{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;padding:max(10px,env(safe-area-inset-top)) 12px 10px;background:#fff;box-shadow:0 6px 20px rgba(38,54,56,.08)}
.p-words{flex:1;display:flex;gap:6px;min-height:64px;overflow-x:auto;align-items:center;padding:4px;border-radius:16px;background:var(--p-bege);scrollbar-width:none}
.p-words::-webkit-scrollbar{display:none}
.p-words:empty::before{content:attr(data-vazio);padding:0 10px;color:#7b8b8d;font-size:.95rem}
.p-word{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:58px;height:58px;border-radius:12px;background:#fff;border-top:4px solid var(--cor,#B7C1C7);font-size:.62rem;font-weight:700;line-height:1;text-align:center;overflow:hidden}
.p-word .p-sym{width:30px;height:30px;font-size:24px}
.p-word span{display:block;max-width:54px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.p-act{display:grid;place-items:center;width:52px;height:52px;flex:none;border:0;border-radius:16px;background:var(--p-bege);color:var(--p-petroleo);cursor:pointer}
.p-act svg{width:26px;height:26px}
.p-speak{width:auto;padding:0 16px;gap:6px;display:inline-flex;align-items:center;background:var(--p-petroleo);color:#fff;font:800 1rem/1 Outfit,sans-serif;box-shadow:0 4px 0 #0c4e4d}
.p-speak:active{transform:translateY(3px);box-shadow:0 1px 0 #0c4e4d}
.p-act:focus-visible,.p-tile:focus-visible,.p-tool:focus-visible{outline:4px solid var(--p-azul);outline-offset:3px}

/* Cabeçalho da pasta */
.p-head{display:flex;align-items:center;gap:10px;padding:12px 14px 4px}
.p-back{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border:0;border-radius:999px;background:#fff;color:var(--p-petroleo);font:800 1rem/1 Outfit,sans-serif;cursor:pointer;box-shadow:0 3px 0 rgba(38,54,56,.08)}
.p-back[hidden]{display:none}
.p-head h1{flex:1;margin:0;font:800 1.35rem/1.1 Outfit,sans-serif;color:var(--p-petroleo)}

/* Grade de figuras */
.p-grid{display:grid;grid-template-columns:repeat(var(--p-cols),minmax(0,1fr));gap:10px;padding:10px 12px 28px;align-content:start}
.p-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;aspect-ratio:1;padding:8px 6px;border:0;border-radius:var(--p-raio);background:#fff;border-top:7px solid var(--cor,#B7C1C7);cursor:pointer;box-shadow:0 5px 0 rgba(38,54,56,.07),0 10px 22px rgba(38,54,56,.07);transition:transform .1s}
.p-tile:active{transform:scale(.95)}
.p-tile .p-sym{width:62%;height:auto;aspect-ratio:1;display:grid;place-items:center;font-size:clamp(34px,11vw,64px);line-height:1}
.p-sym img{width:100%;height:100%;object-fit:contain}
.p-tile b{font:800 clamp(.85rem,3.6vw,1.1rem)/1.1 Outfit,sans-serif;text-align:center}
.p-tile.is-folder{background:color-mix(in srgb,var(--cor) 14%,#fff)}
.p-tile.is-folder::after{content:"";position:absolute;top:10px;right:10px;width:10px;height:10px;border-right:3px solid var(--p-petroleo);border-top:3px solid var(--p-petroleo);transform:rotate(45deg);opacity:.55}
.p-tile.is-said{animation:p-said .35s ease}
.p-tile.is-hidden{opacity:.35;border-style:dashed}
.p-edit-badge{position:absolute;top:6px;left:6px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--p-texto);color:#fff;font-size:.95rem}
.p-tile.is-new{border:3px dashed var(--p-cinza-medio);border-top-width:3px;background:var(--p-bege);color:var(--p-petroleo)}
.p-tile.is-new .p-sym{font-size:44px}
@keyframes p-said{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}

/* Faixas: modo edição e convite para conta */
.p-banner{margin:6px 12px 0;padding:12px 14px;border-radius:16px;background:#fff7e0;border:1px solid #f1d98f;font-size:.95rem;line-height:1.4}
.p-banner[hidden]{display:none}
.p-banner a,.p-banner button{color:var(--p-petroleo);font-weight:800}
.p-banner button{border:0;background:none;padding:0;cursor:pointer;text-decoration:underline}
.p-editbar{margin:6px 12px 0;padding:10px 14px;border-radius:16px;background:var(--p-texto);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:700}
.p-editbar[hidden]{display:none}
.p-editbar button{border:0;border-radius:999px;padding:8px 14px;background:var(--p-menta);color:var(--p-texto);font-weight:800;cursor:pointer}

/* Painel do adulto e janela de nova figura */
.p-sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;padding:12px;background:rgba(38,54,56,.35)}
.p-sheet[hidden]{display:none}
.p-card{width:100%;max-width:520px;max-height:90vh;overflow:auto;padding:20px 18px max(20px,env(safe-area-inset-bottom));border-radius:26px;background:#fff}
.p-card h2{margin:0 0 4px;font:800 1.35rem/1.2 Outfit,sans-serif;color:var(--p-petroleo)}
.p-card p{margin:0 0 14px;color:#4f6366;font-size:.95rem}
.p-field{display:grid;gap:6px;margin:0 0 14px;font-weight:700}
.p-field input[type=text],.p-field select{min-height:48px;padding:10px 12px;border:1px solid var(--p-cinza-medio);border-radius:12px;background:#fff}
.p-seg{display:flex;gap:6px;flex-wrap:wrap}
.p-seg button{flex:1;min-height:44px;border:2px solid var(--p-cinza);border-radius:12px;background:#fff;font-weight:700;cursor:pointer}
.p-seg button[aria-pressed=true]{border-color:var(--p-petroleo);background:#eaf7f5;color:var(--p-petroleo)}
.p-row{display:flex;gap:10px;margin-top:6px}
.p-row button{flex:1;min-height:50px;border:0;border-radius:999px;font:800 1rem/1 Outfit,sans-serif;cursor:pointer}
.p-primary{background:var(--p-petroleo);color:#fff}
.p-ghost{background:var(--p-bege);color:var(--p-petroleo)}
.p-photo-preview{width:96px;height:96px;border-radius:16px;object-fit:cover;background:var(--p-bege)}
.p-photo-preview[hidden]{display:none}
.p-note{margin:16px 0 0;font-size:.82rem;color:#6a7a7c}

/* Aviso de segurar */
.p-toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));z-index:30;transform:translateX(-50%);padding:12px 16px;border-radius:14px;background:var(--p-texto);color:#fff;font-weight:700;font-size:.95rem;opacity:0;pointer-events:none;transition:opacity .2s}
.p-toast.is-visible{opacity:1}

body.p-big{--p-cols:2}body.p-small{--p-cols:4}
@media(min-width:700px){:root{--p-cols:5}body.p-big{--p-cols:4}body.p-small{--p-cols:7}.p-tile .p-sym{font-size:56px}}
@media(min-width:1100px){:root{--p-cols:7}body.p-big{--p-cols:5}body.p-small{--p-cols:9}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.p-grid{width:100%;max-width:1200px;margin:0 auto}
.p-tile .p-sym:has(img){width:80%}
/* Tom de pele das pessoas: círculos de cor (inclusão). */
.p-skin{display:flex;gap:8px;flex-wrap:wrap}
.p-skin button{display:grid;place-items:center;width:48px;height:48px;padding:0;border:3px solid var(--p-cinza);border-radius:50%;background:#fff;cursor:pointer}
.p-skin button span{width:32px;height:32px;border-radius:50%;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.p-skin button[aria-pressed=true]{border-color:var(--p-petroleo);box-shadow:0 0 0 3px #eaf7f5}
/* Cabeçalho padrão: Sair sempre no canto esquerdo, ajustes no canto direito. No celular, o título vai para a linha de baixo. */
.p-head{flex-wrap:wrap}
.p-head>.k-hold-wrap:last-child{margin-left:auto}
.p-head h1{order:5;flex:1 0 100%}
@media(min-width:600px){.p-head h1{order:0;flex:1 1 auto}.p-head>.k-hold-wrap:last-child{margin-left:0}}