:root { --help: #69BE45; --help-dk: #4a9a2c; --bg: #f4f6f3; --bd: #dee2e6; }
html, body { margin: 0; }
body { background: var(--bg); color: #212529; -webkit-tap-highlight-color: transparent; }
.login-box { max-width: 360px; margin: 4rem auto; padding: 0 1rem; }
.d-none { display: none !important; }
.flex-grow { flex: 1; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

/* ---------- Página inicial ---------- */
.app-header { background: var(--help); color: #fff; padding: 1rem 1rem .75rem; position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.app-header h1 { font-size: 1.25rem; margin: 0 0 .65rem; font-weight: 700; }
.seg { display: flex; background: rgba(0,0,0,.14); border-radius: .7rem; padding: 3px; gap: 3px; }
.seg button { flex: 1; border: 0; background: transparent; color: #fff; font-weight: 600; font-size: .86rem; padding: .6rem .25rem; border-radius: .55rem; line-height: 1.15; }
.seg button.active { background: #fff; color: #2b5d16; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.pill { display: inline-block; min-width: 1.35rem; padding: 0 .35rem; border-radius: 1rem; background: rgba(255,255,255,.3); font-size: .75rem; }
.seg button.active .pill { background: var(--help); color: #fff; }
.page { max-width: 720px; margin: 0 auto; padding: 1rem; }
.panel { background: #fff; border: 1px solid var(--bd); border-radius: .9rem; padding: 1.1rem; }
.card-evt { background: #fff; border: 1px solid var(--bd); border-radius: .9rem; padding: 1rem; margin-bottom: .9rem; }
.evt-head { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.card-evt h3 { font-size: 1.1rem; margin: 0 0 .15rem; font-weight: 700; }
.evt-date { color: #495057; font-size: .92rem; }
.evt-loc { color: #6c757d; font-size: .85rem; }
.tag { font-size: .72rem; font-weight: 700; padding: .25rem .55rem; border-radius: 1rem; white-space: nowrap; }
.tag.aberto { background: #e3f4da; color: #2f7d17; }
.tag.encerrado { background: #e9ecef; color: #495057; }
.evt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin: .9rem 0 .6rem; text-align: center; }
.evt-stats b { display: block; font-size: 1.2rem; }
.evt-stats span { font-size: .72rem; color: #6c757d; }
.evt-bar { height: 8px; background: #e9ecef; border-radius: 6px; overflow: hidden; display: flex; margin-bottom: .9rem; }
.evt-bar i { display: block; height: 100%; }
.evt-bar .b-pago { background: var(--help); }
.evt-bar .b-aberto { background: #ffc107; }
.evt-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.evt-actions .btn { flex: 1; min-width: 90px; }
.card-evt.compact .evt-stats { margin: .6rem 0; }
.vazio { text-align: center; padding: 2.2rem 1rem; color: #6c757d; }
.vazio h2 { font-size: 1.1rem; color: #343a40; }

/* ---------- Página do evento ---------- */
.evt-top { display: flex; align-items: center; gap: .6rem; background: #fff; border-bottom: 1px solid var(--bd); padding: .55rem .75rem; position: sticky; top: 0; z-index: 20; }
.icon-btn { border: 0; background: #eef1ec; width: 40px; height: 40px; border-radius: 50%; font-size: 1.3rem; line-height: 1; }
.evt-title { flex: 1; min-width: 0; }
.evt-nome { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evt-sub { font-size: .78rem; color: #6c757d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-banner { display: flex; align-items: center; justify-content: space-between; background: #fff3cd; color: #664d03; padding: .5rem .9rem; font-size: .88rem; }
.chips { display: flex; gap: .4rem; overflow-x: auto; padding: .6rem .75rem .2rem; }
.chip { flex: none; font-size: .78rem; font-weight: 700; padding: .3rem .7rem; border-radius: 1rem; background: #e9ecef; color: #495057; }
.chip-aberto { background: #fff0b8; color: #6b5200; }
.chip-pago { background: #dcf1d2; color: #2f7d17; }
.chip-dark { background: #343a40; color: #fff; }
.search-row { padding: .4rem .75rem; }
.evt-main { padding-bottom: 5.2rem; }
.map-tools { display: flex; gap: .4rem; padding: .3rem .75rem; align-items: center; }
.btn-group-tools { display: flex; gap: .35rem; }
.map-scroll { overflow: auto; margin: .3rem .5rem; border: 1px solid var(--bd); border-radius: .7rem; background: #fff; max-height: 72vh; -webkit-overflow-scrolling: touch; }
#mapa { display: block; width: 100%; height: auto; touch-action: pan-x pan-y pinch-zoom; }
#mapa.editando { touch-action: none; outline: 3px dashed var(--help); outline-offset: -3px; }

.mesa { cursor: pointer; }
.mesa circle { stroke-width: 3; transition: opacity .15s; }
.mesa .num { font: 700 20px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.mesa.peq .num { font-size: 15px; }
.mesa .nome { font: 600 15px system-ui, sans-serif; text-anchor: middle; fill: #212529; pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.mesa.livre circle { fill: #f1f3f5; stroke: #868e96; }
.mesa.livre .num { fill: #495057; }
.mesa.aberto circle { fill: #ffe08a; stroke: #e0a800; }
.mesa.aberto .num { fill: #664d03; }
.mesa.pago circle { fill: var(--help); stroke: var(--help-dk); }
.mesa.pago .num { fill: #fff; }
.mesa.dim { opacity: .18; }
.mesa.hit circle { stroke: #0d6efd; stroke-width: 6; }
.editando .mesa { cursor: grab; }
.area { fill: none; stroke: #6c757d; stroke-width: 2.5; }
.area-txt { font: 800 30px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; fill: #343a40; letter-spacing: 3px; }
.area-txt.sm { font-size: 20px; letter-spacing: 2px; }
.area-txt.dance { font-size: 118px; font-weight: 900; fill: #e9ecef; letter-spacing: 6px; }
.area-txt.sub { font: italic 600 26px system-ui, sans-serif; letter-spacing: 1px; fill: #868e96; }
.deco { fill: none; stroke: #adb5bd; stroke-width: 2; }
.corredor { stroke: #ced4da; stroke-width: 2; }
.legenda { display: flex; gap: 1rem; justify-content: center; padding: .5rem 0; font-size: .82rem; color: #495057; }
.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid; vertical-align: -2px; }
.dot.livre { background: #f1f3f5; border-color: #868e96; }
.dot.aberto { background: #ffe08a; border-color: #e0a800; }
.dot.pago { background: var(--help); border-color: var(--help-dk); }

/* grade de mesas */
.filtro-chips { display: flex; gap: .4rem; overflow-x: auto; padding: .3rem .75rem; }
.fchip { flex: none; border: 1px solid var(--bd); background: #fff; border-radius: 1rem; padding: .35rem .9rem; font-size: .85rem; font-weight: 600; }
.fchip.active { background: #343a40; color: #fff; border-color: #343a40; }
.grid-mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .55rem; padding: .5rem .75rem; }
.tile { border: 2px solid; border-radius: .8rem; padding: .55rem .4rem; text-align: center; min-height: 82px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.tile .t-num { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.tile .t-name { font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .t-cnt { font-size: .7rem; opacity: .8; }
.tile.livre { background: #f8f9fa; border-color: #ced4da; color: #495057; }
.tile.aberto { background: #fff3c4; border-color: #e0a800; color: #5c4600; }
.tile.pago { background: #dcf1d2; border-color: var(--help-dk); color: #1f5a0d; }

/* lista */
.lista-view { padding: .5rem .75rem; max-width: 900px; margin: 0 auto; }
.lista-tools { display: flex; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.lista-tools select { max-width: 170px; }
.lista-tools .btn:last-child { margin-left: auto; }
.mesa-col { font-weight: 800; white-space: nowrap; }
.st-pago { color: #2f7d17; font-weight: 700; }
.st-aberto { color: #8a6500; font-weight: 700; }
.print-titulo { display: none; }
.badge-resp { font-size: .65rem; background: #6c757d; color: #fff; border-radius: .3rem; padding: .1rem .35rem; vertical-align: 1px; }
.tel-line { font-size: .78rem; color: #6c757d; }

/* abas inferiores */
.bottom-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; background: #fff; border-top: 1px solid var(--bd); padding-bottom: env(safe-area-inset-bottom, 0); }
.bottom-tabs button { flex: 1; border: 0; background: transparent; padding: .85rem 0; font-weight: 700; color: #6c757d; font-size: .92rem; }
.bottom-tabs button.active { color: var(--help-dk); box-shadow: inset 0 3px 0 var(--help); }

.status-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.status-seg .btn { padding: .7rem .2rem; font-weight: 700; }
.modal-footer { gap: .5rem; flex-wrap: nowrap; }
.btn-lg, .form-control-lg { font-size: 1.05rem; }

@media (min-width: 900px) {
    .map-scroll { max-height: none; }
}
@media print {
    body { background: #fff; }
    .no-print, .bottom-tabs, .modal { display: none !important; }
    #view-mapa, #view-mesas { display: none !important; }
    #view-lista { display: block !important; max-width: none; padding: 0; }
    .print-titulo { display: block; }
    .evt-main { padding: 0; }
}