:root {
  --color-background-primary:   #ffffff;
  --color-background-secondary: #f4f4f4;
  --color-text-primary:         #1a1a1a;
  --color-text-secondary:       #6b6b6b;
  --color-border-primary:       #aaaaaa;
  --color-border-secondary:     #dedede;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: 'Figtree', sans-serif; }

/* Página responsiva; apenas o mapa (arena) escala no mobile */
.wrap {
  max-width: 680px;
  width: 100%;
  padding: 12px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Wrapper do mapa: em mobile, se o viewport não encolher (ex.: Firefox), permite rolar em vez de cortar */
.scale-viewport-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Container só do mapa: escala aplicada via JS no mobile */
.scale-viewport {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.arena {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

@media (max-width: 680px) {
  .scale-viewport .arena {
    transform-origin: top left;
  }
}

/* Mobile: restante da página legível e clicável */
@media (max-width: 680px) {
  .wrap { padding: 14px 16px; overflow-x: hidden; }
  .top-bar { gap: 10px; margin-bottom: 14px; }
  .top-bar h1 { font-size: 17px; }
  .top-bar-actions { gap: 8px; flex-wrap: wrap; }
  .top-bar-actions button {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
    font-size: 13px;
  }
  .stats { gap: 10px; margin-bottom: 14px; }
  .stat { padding: 10px 12px; }
  .stat-label { font-size: 12px; }
  .stat-num { font-size: 22px; }
  .legend { font-size: 13px; gap: 14px; margin-bottom: 12px; }
  .legend .dot { width: 14px; height: 14px; }
}

.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; flex-wrap: wrap; gap: 8px;
}
.top-bar h1 { font-size: 15px; font-weight: 500; color: var(--color-text-primary); }
.top-bar-actions { display: flex; gap: 6px; }

.connection-hint {
  font-size: 12px; color: #a32d2d; background: #fcebeb;
  padding: 8px 10px; border-radius: 6px; margin-bottom: 12px;
}
.connection-hint code { font-size: 11px; background: rgba(0,0,0,0.06); padding: 2px 5px; border-radius: 4px; }

.stats { display: flex; gap: 8px; margin-bottom: 12px; }
.stat { flex: 1; background: var(--color-background-secondary); border-radius: 8px; padding: 8px 10px; }
.stat-label { font-size: 11px; color: var(--color-text-secondary); margin-bottom: 2px; }
.stat-num { font-size: 20px; font-weight: 500; color: var(--color-text-primary); }
.stat-num--sold { color: #639922; }
.stat-num--free { color: #E24B4A; }
.stat-num--pista { color: #EF9F27; }

.legend { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.legend--spaced { margin-bottom: 10px; }
.leg { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--color-text-secondary); }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot-free { background: #E24B4A; }
.dot-sold { background: #3B6D11; }

.btn-reset {
  font-size: 12px; padding: 5px 10px; border: 0.5px solid var(--color-border-secondary);
  border-radius: 6px; background: transparent; color: var(--color-text-secondary);
  cursor: pointer;
}
.btn-reset:hover { background: var(--color-background-secondary); }
.btn-reset:focus-visible { outline: 2px solid var(--color-border-primary); outline-offset: 2px; }

.btn-logout {
  font-size: 12px; padding: 5px 10px; border: 0.5px solid var(--color-border-primary);
  border-radius: 6px; background: transparent; color: var(--color-text-secondary); cursor: pointer;
}
.btn-logout:hover { background: var(--color-background-secondary); }
.btn-logout:focus-visible { outline: 2px solid var(--color-border-primary); outline-offset: 2px; }

.btn-export {
  font-size: 12px; padding: 5px 12px; border: 0.5px solid #639922;
  border-radius: 6px; background: transparent; color: #639922;
  cursor: pointer; font-weight: 500;
}
.btn-export:hover { background: #EAF3DE; }
.btn-export:focus-visible { outline: 2px solid #639922; outline-offset: 2px; }

.btn-pista {
  font-size: 12px; padding: 5px 12px; border: 0.5px solid #EF9F27;
  border-radius: 6px; background: transparent; color: #412402;
  cursor: pointer; font-weight: 500;
}
.btn-pista:hover { background: #FDF0DE; }
.btn-pista:focus-visible { outline: 2px solid #EF9F27; outline-offset: 2px; }

.arena { background: #444441; border-radius: 10px; padding: 10px; position: relative; }

.palco {
  background: #378ADD; border-radius: 6px; text-align: center;
  font-weight: 500; font-size: 13px; color: #E6F1FB;
  padding: 14px; margin: 0 0 28px 0; width: 100%;
  letter-spacing: 0.05em;
  box-sizing: border-box;
}

.main-area { display: flex; gap: 8px; margin-bottom: 8px; }
.main-area-left { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.main-area-fill { flex: 1; }
.main-area-right { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.col-left { display: flex; flex-direction: column; gap: 4px; }
.col-right-inner { display: flex; flex-direction: column; gap: 4px; }
.col-lower-left { display: flex; flex-direction: column; gap: 4px; }
.lower-area { display: flex; gap: 6px; align-items: flex-start; }
.lower-area-fill { flex: 1; }
.bar-labels-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.entrada-label--below {
  margin-top: 6px; align-self: flex-start;
  writing-mode: horizontal-tb; padding: 14px 16px; font-size: 11px;
  min-height: 170px; display: flex; align-items: center; justify-content: center; margin-top: 100px;
}
.saida-label--inline { align-self: flex-end; margin: 2px 0; }
.caixa-label--inline { align-self: flex-end; height: 50px; margin-top: 4px; }
.row { display: flex; gap: 4px; align-items: center; }

.mesa {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500;
  cursor: pointer; transition: transform 0.1s;
  user-select: none; flex-shrink: 0; color: #fff;
}
.mesa:hover { transform: scale(1.1); }
.mesa:active { transform: scale(0.95); }
.mesa.free { background: #E24B4A; }
.mesa.sold { background: #3B6D11; }
.mesa:focus-visible { outline: 2px solid #378ADD; outline-offset: 2px; }
.mesa-amarela.free { background: #BA7517 !important; color: #FAEEDA !important; }
.mesa-amarela.sold { background: #3B6D11 !important; color: #C0DD97 !important; }

.badge-label {
  font-size: 9px; font-weight: 500; letter-spacing: 0.06em;
  writing-mode: vertical-rl; text-align: center;
  padding: 6px 4px; border-radius: 4px; flex-shrink: 0;
}
.entrada-label { background: #639922; color: #EAF3DE; }
.saida-label   { background: #EF9F27; color: #412402; }
.caixa-label   { background: #EF9F27; color: #412402; }
.bar-label     { background: #EF9F27; color: #412402; font-size: 10px; font-weight: 500; padding: 4px 8px; border-radius: 5px; white-space: nowrap; }
.divider-line  { border-top: 0.5px solid #888780; margin: 6px 0; }
.section-title { font-size: 10px; color: #D3D1C7; letter-spacing: 0.04em; margin-bottom: 4px; }

/* MODAL */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  align-items: center; justify-content: center;
  z-index: 100;
}
.modal-overlay.active { display: flex; }
.modal {
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-secondary);
  border-radius: 12px;
  padding: 20px;
  width: 320px;
  max-width: 90vw;
}
.modal-title { font-size: 14px; font-weight: 500; color: var(--color-text-primary); margin-bottom: 4px; }
.modal .modal-title { margin: 0; }
.modal-sub   { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 14px; }
.modal label { font-size: 12px; color: var(--color-text-secondary); display: block; margin-bottom: 4px; }
.modal .label-required { font-size: 11px; color: var(--color-text-secondary); font-weight: 400; }
.modal .modal-label-optional { margin-top: 12px; }
.modal input[type=text],
.modal input[type=tel] {
  width: 100%; padding: 7px 10px; font-size: 13px;
  border: 0.5px solid var(--color-border-secondary);
  border-radius: 6px; background: var(--color-background-secondary);
  color: var(--color-text-primary); margin-bottom: 10px;
  outline: none;
}
.modal input[type=text]:focus,
.modal input[type=tel]:focus { border-color: var(--color-border-primary); background: var(--color-background-primary); }
.modal-actions { display: flex; gap: 8px; margin-top: 4px; }
.btn-cancel {
  flex: 1; padding: 8px; font-size: 13px;
  border: 0.5px solid var(--color-border-secondary);
  border-radius: 6px; background: transparent;
  color: var(--color-text-secondary); cursor: pointer;
}
.btn-cancel:hover { background: var(--color-background-secondary); }
.btn-save {
  flex: 2; padding: 8px; font-size: 13px; font-weight: 500;
  border: none; border-radius: 6px;
  background: #3B6D11; color: #C0DD97; cursor: pointer;
}
.btn-save:hover { background: #27500A; }
.btn-unsell {
  flex: 1; padding: 8px; font-size: 12px;
  border: 0.5px solid #A32D2D;
  border-radius: 6px; background: transparent;
  color: #A32D2D; cursor: pointer;
}
.btn-unsell:hover { background: #FCEBEB; }
.btn-cancel:focus-visible,
.btn-save:focus-visible,
.btn-unsell:focus-visible { outline: 2px solid var(--color-border-primary); outline-offset: 2px; }

/* ---------- Página de login ---------- */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-background-secondary); padding: 20px; }
.login-wrap { width: 100%; max-width: 320px; background: var(--color-background-primary); border-radius: 12px; padding: 28px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.login-title { font-size: 20px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 6px; }
.login-sub { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 20px; }
.login-form label { display: block; font-size: 12px; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 4px; }
.login-form input { width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit; border: 1px solid var(--color-border-secondary); border-radius: 8px; margin-bottom: 14px; box-sizing: border-box; }
.login-form input:focus { outline: 2px solid #378ADD; outline-offset: 0; }
.login-error { font-size: 12px; color: #a32d2d; background: #fcebeb; padding: 8px 10px; border-radius: 6px; margin-bottom: 12px; }
.login-btn { width: 100%; padding: 12px; font-size: 14px; font-weight: 500; font-family: inherit; border: none; border-radius: 8px; background: #378ADD; color: #fff; cursor: pointer; }
.login-btn:hover { background: #2a6fc2; }
.login-btn:focus-visible { outline: 2px solid #378ADD; outline-offset: 2px; }