/* Praga Vermelha · Tabletop
   Usa só as variáveis --pv-* do style.css (mesma paleta do site). */

.tt-page [hidden], .tt-lista [hidden] { display:none !important; }

/* ---------- botões .pv-btn (corrige fundo branco do <button>) ---------- */
:is(.tt-page, .tt-lista) .pv-btn { background:transparent; color:var(--pv-text); font-family:var(--fonte-titulo); }
:is(.tt-page, .tt-lista) .pv-btn--primary { background:var(--pv-red-dark); border-color:var(--pv-red-dark); color:#fff; }
:is(.tt-page, .tt-lista) .pv-btn--primary:hover { background:var(--pv-red); border-color:var(--pv-red); color:#fff; }
:is(.tt-page, .tt-lista) .pv-btn--ghost { background:transparent; border-color:var(--pv-border); color:var(--pv-text); }
:is(.tt-page, .tt-lista) .pv-btn--ghost:hover { background:var(--pv-surface-2); border-color:var(--pv-muted); color:#fff; }
:is(.tt-page, .tt-lista) .pv-btn--outline { background:transparent; border-color:var(--pv-red); color:var(--pv-red-bright); }
:is(.tt-page, .tt-lista) .pv-btn--outline:hover { background:var(--pv-red); color:#fff; }
.tt-btn-sm { padding:7px 12px !important; font-size:.76rem !important; line-height:1.2; }

/* ---------- página da mesa ---------- */
.tt-page { max-width:1600px; margin:0 auto; padding:16px 20px 32px; color:var(--pv-text); }
.tt-topbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.tt-topbar .botao-voltar { display:inline-flex; align-items:center; padding:9px 14px; border:1px solid var(--pv-border); border-radius:8px; background:var(--pv-surface); color:var(--pv-text); font-size:.9rem; }
.tt-topbar .botao-voltar:hover { border-color:var(--pv-red); color:#fff; }
.tt-nome-mesa { flex:1 1 220px; max-width:420px; font:700 1.05rem var(--fonte-titulo); }
.tt-status { font-size:.8rem; color:var(--pv-muted); padding:4px 10px; border-radius:999px; background:var(--pv-surface); border:1px solid var(--pv-border); }
.tt-status[data-estado="salvo"] { color:var(--pv-gold); }
.tt-status[data-estado="pendente"], .tt-status[data-estado="salvando"] { color:var(--pv-muted); }
.tt-status[data-estado="erro"] { color:var(--pv-red-bright); border-color:var(--pv-red-dark); }

.tt-layout { display:grid; grid-template-columns:310px minmax(0,1fr); gap:18px; align-items:start; }

/* ---------- painel lateral ---------- */
.tt-side { display:flex; flex-direction:column; gap:10px; position:sticky; top:84px; max-height:calc(100vh - 100px); overflow-y:auto; padding-right:2px; }
.tt-painel { background:var(--pv-surface); border:1px solid var(--pv-border); border-radius:var(--pv-radius); }
.tt-painel > summary { cursor:pointer; padding:11px 14px; font:700 .92rem var(--fonte-titulo); letter-spacing:.03em; list-style:none; user-select:none; display:flex; align-items:center; justify-content:space-between; }
.tt-painel > summary::-webkit-details-marker { display:none; }
.tt-painel > summary::after { content:'▾'; color:var(--pv-muted); transition:transform .15s; }
.tt-painel:not([open]) > summary::after { transform:rotate(-90deg); }
.tt-painel__corpo { padding:2px 14px 14px; display:flex; flex-direction:column; gap:10px; }

.tt-campo { display:flex; flex-direction:column; gap:4px; font-size:.78rem; color:var(--pv-muted); }
.tt-campo input[type=text], .tt-campo input[type=number], .tt-campo select { width:100%; padding:8px 10px; font-size:.9rem; }
.tt-campo select { padding-right:36px; }
.tt-page input[type=color] { width:100%; height:34px; padding:2px; cursor:pointer; }
.tt-linha2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tt-linha3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.tt-botoes { display:flex; flex-wrap:wrap; gap:6px; }
.tt-vazio { margin:0; font-size:.85rem; color:var(--pv-muted); line-height:1.45; }
.tt-vazio--grande { text-align:center; padding:40px 0; font-size:1rem; }
.tt-sel-info { margin:0; font-size:.88rem; }

/* checkboxes */
.tt-check { display:flex; align-items:center; gap:10px; font-size:.88rem; cursor:pointer; user-select:none; }
.tt-check--inline { font-size:.82rem; gap:8px; }
.tt-page input[type=checkbox] {
    -webkit-appearance:none; appearance:none;
    flex:none; width:18px; height:18px; margin:0; padding:0;
    background-color:var(--pv-surface-2);
    background-repeat:no-repeat; background-position:center; background-size:12px 12px;
    border:1px solid var(--pv-border); border-radius:4px;
    cursor:pointer;
    transition:background-color .15s, border-color .15s;
}
.tt-page input[type=checkbox]:hover { border-color:var(--pv-red); }
.tt-page input[type=checkbox]:checked {
    background-color:var(--pv-red-dark);
    border-color:var(--pv-red);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.2 6.4l2.6 2.6 5-5.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.tt-page input[type=checkbox]:focus-visible { outline:2px solid var(--pv-red-bright); outline-offset:2px; }

/* sliders (zoom da imagem, espessura do desenho) */
.tt-page input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:18px; padding:0; border:0; background:transparent; cursor:pointer; }
.tt-page input[type=range]:focus { outline:none; }
.tt-page input[type=range]::-webkit-slider-runnable-track { height:4px; border-radius:4px; background:var(--pv-border); }
.tt-page input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; margin-top:-5px; border-radius:50%; background:var(--pv-red); border:2px solid var(--pv-bg); }
.tt-page input[type=range]::-moz-range-track { height:4px; border-radius:4px; background:var(--pv-border); }
.tt-page input[type=range]::-moz-range-thumb { width:10px; height:10px; border-radius:50%; background:var(--pv-red); border:2px solid var(--pv-bg); }
.tt-page input[type=range]:hover::-webkit-slider-thumb { background:var(--pv-red-bright); }

/* peças prontas e miniaturas */
.tt-prontas { display:flex; flex-wrap:wrap; gap:6px; }
.tt-pronta { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border:1px solid var(--pv-border); border-radius:8px; background:var(--pv-surface-2); color:var(--pv-text); font:inherit; font-size:.82rem; cursor:pointer; transition:border-color .15s, background .15s; }
.tt-pronta:hover { border-color:var(--pv-red); background:var(--pv-bg-alt); }
.tt-mini { display:inline-block; width:22px; height:22px; flex:none; background:var(--pc,#a78bfa); overflow:hidden; vertical-align:middle; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); }
.tt-mini img { width:100%; height:100%; object-fit:cover; display:block; }
.tt-mini.forma-circulo { border-radius:50%; }
.tt-mini.forma-quadrado { border-radius:4px; }
.tt-mini.forma-losango { clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); box-shadow:none; }
.tt-novo-img { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#tt-novo-prev { width:34px; height:34px; }

.tt-modelos { display:flex; flex-direction:column; gap:6px; }
.tt-modelo { display:flex; gap:4px; }
.tt-modelo__usar { flex:1; display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--pv-border); border-radius:8px; background:var(--pv-surface-2); color:var(--pv-text); font:inherit; font-size:.85rem; text-align:left; cursor:pointer; transition:border-color .15s; }
.tt-modelo__usar:hover { border-color:var(--pv-red); }
.tt-modelo__usar small { color:var(--pv-muted); margin-left:auto; }
.tt-modelo__del { width:30px; border:1px solid var(--pv-border); border-radius:8px; background:var(--pv-surface-2); color:var(--pv-muted); font-size:1.1rem; cursor:pointer; transition:color .15s, border-color .15s; }
.tt-modelo__del:hover { color:var(--pv-red-bright); border-color:var(--pv-red); }

/* ---------- palco ---------- */
.tt-palco { min-width:0; display:flex; flex-direction:column; gap:10px; }
.tt-ferramentas { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:10px 12px; background:var(--pv-surface); border:1px solid var(--pv-border); border-radius:var(--pv-radius); }
.tt-ferramentas__rot { font:700 .85rem var(--fonte-titulo); color:var(--pv-muted); margin-right:2px; }
.tt-ferr { padding:7px 12px; border:1px solid var(--pv-border); border-radius:7px; background:var(--pv-surface-2); color:var(--pv-text); font:inherit; font-size:.82rem; cursor:pointer; transition:border-color .15s, background .15s; }
.tt-ferr:hover:not(:disabled) { border-color:var(--pv-red); }
.tt-ferr.ativo { background:var(--pv-red-dark); border-color:var(--pv-red); color:#fff; }
.tt-ferr:disabled { opacity:.4; cursor:default; }
.tt-sep { width:1px; height:24px; background:var(--pv-border); }
.tt-ferramentas input[type=color] { width:38px; height:32px; }
.tt-ferramentas input[type=range] { width:90px; }

.tt-cena { overflow:auto; max-height:calc(100vh - 230px); min-height:320px; padding:14px; background:var(--pv-bg); border:1px solid var(--pv-border); border-radius:var(--pv-radius); }

/* grade: o JS define width, height e --c (tamanho da casa) */
.tt-grade { position:relative; flex:none; background:var(--pv-surface); outline:none; user-select:none; -webkit-user-select:none; touch-action:pan-x pan-y; box-shadow:0 0 0 1px var(--pv-red-dark), var(--pv-shadow); }
.tt-grade:focus-visible { box-shadow:0 0 0 1px var(--pv-red), var(--pv-shadow); }
.tt-mapa { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; z-index:0; }
.tt-linhas { position:absolute; inset:0; z-index:1; pointer-events:none;
    background-image:linear-gradient(to right, rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.14) 1px, transparent 1px);
    background-size:var(--c,40px) var(--c,40px); }
.tt-grade.sem-linhas .tt-linhas { display:none; }

.tt-des { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; overflow:hidden; }
.tt-grade.desenhando { cursor:crosshair; }
.tt-grade.desenhando .tt-des { pointer-events:auto; z-index:5; touch-action:none; }
.tt-grade.desenhando .tt-pecas { pointer-events:none; }

.tt-pecas { position:absolute; inset:0; z-index:3; pointer-events:none; }
.tt-peca { position:absolute; pointer-events:auto; cursor:grab; touch-action:none; }
.tt-peca:active { cursor:grabbing; }
.tt-fig { position:absolute; inset:5%; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--pc,#a78bfa); box-shadow:0 2px 5px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.25); }
.tt-fig img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.tt-fig b { font:700 calc(var(--c,40px) * .38) var(--fonte-titulo); color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.8); pointer-events:none; }
.tt-peca.forma-circulo .tt-fig { border-radius:50%; }
.tt-peca.forma-quadrado .tt-fig { border-radius:8%; }
.tt-peca.forma-losango .tt-fig { clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); box-shadow:none; }

/* selecionada: só um contorno fino e discreto, sem brilho */
.tt-peca.sel { z-index:2; }
.tt-peca.sel::before { content:''; position:absolute; inset:0; border:1.5px solid var(--pv-gold); border-radius:6px; pointer-events:none; }

.tt-nome { position:absolute; left:50%; top:100%; transform:translateX(-50%); margin-top:-3px; padding:1px 6px; max-width:200%; background:rgba(8,5,6,.85); color:var(--pv-text); font-size:.68rem; line-height:1.3; border-radius:4px; white-space:nowrap; pointer-events:none; z-index:3; }

.tt-caixa { position:absolute; z-index:6; border:1px dashed var(--pv-gold); background:rgba(201,164,92,.10); pointer-events:none; }
.tt-dica { margin:0; font-size:.8rem; color:var(--pv-muted); line-height:1.5; }

/* ---------- lista de mesas ---------- */
.tt-lista { padding-top:24px; padding-bottom:48px; color:var(--pv-text); }
.tt-lista__head { margin-bottom:22px; }
.tt-nova-mesa { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.tt-nova-mesa input[type=text] { flex:1 1 260px; max-width:460px; padding:11px 14px; }
.tt-erro { color:var(--pv-red-bright); margin:-8px 0 14px; font-size:.9rem; }
.tt-mesas { margin-top:10px; }
.tt-mesa-card__acoes { display:flex; gap:8px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.tt-mesa-card__acoes form { margin:0; }

/* ---------- responsivo ---------- */
@media (max-width:960px) {
    .tt-layout { grid-template-columns:1fr; }
    .tt-side { position:static; max-height:none; overflow:visible; }
    .tt-cena { max-height:70vh; padding:8px; }
}