:root { 
  --bg:#0f172a; 
  --panel:#111827; 
  --muted:#9ca3af; 
  --accent:#22c55e; 
  --text:#e5e7eb; 
  --z-map:1000; 
  --z-aside:1100; 
  --z-modal:2000;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
#app{display:grid;grid-template-columns:1fr 380px;grid-auto-rows:minmax(0,1fr);height:100vh}
#map{width:100%;height:100vh;z-index:var(--z-map)}
aside{background:var(--panel);border-left:1px solid #1f2937;display:flex;flex-direction:column;z-index:var(--z-aside)}
aside > header {
  padding:12px 14px;
  border-bottom:1px solid #1f2937;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:space-between;
}

/* ========== USER INFO ========== */
.user-info {
  display:flex;
  align-items:center;
  gap:10px;
  background:#111827;
  padding:6px 10px;
  border-radius:10px;
  flex:1;
  justify-content:center;
}

.user-info .left {
  display:flex;
  align-items:center;
  gap:8px;
  overflow:hidden;
}

.user-avatar {
  width:36px;
  height:36px;
  border-radius:50%;
  background-color:#3b82f6;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  color:#fff;
  font-size:16px;
  flex-shrink:0;
  cursor:pointer;
}

.user-name {
  font-weight:600;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--text);
}

.user-info button {
  padding:6px 12px;
  border-radius:8px;
  border:0;
  background:#1ea1a8;
  color:#052e16;
  font-weight:700;
  cursor:pointer;
  flex-shrink:0;
}

.user-info button:hover {
  background:#35c0c6;
}

/* ========== FILTROS ========== */
header input, header select{flex:1;padding:10px;border-radius:10px;border:1px solid #374151;background:#111827;color:var(--text)}
header button{padding:10px 14px;border-radius:10px;border:0;background:var(--accent);color:#052e16;font-weight:700;cursor:pointer}

/* ========== FEED ========== */
.list{overflow:auto;padding:10px}
.card{background:#0b1220;border:1px solid #1f2937;border-radius:14px;margin-bottom:10px;overflow:hidden}
.card img{width:100%;display:block}
.card .meta{padding:10px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between}
.card .caption{padding:0 10px 10px}
.pill{display:inline-flex;gap:4px;align-items:center;padding:2px 8px;border-radius:999px;background:#0e182a;border:1px solid #21304a;color:#cbd5e1;font-size:12px}
.actions{display:flex;gap:8px;padding:10px;border-top:1px solid #1f2937}
.actions button, .actions select{padding:8px 10px;border-radius:10px;border:1px solid #374151;background:#111827;color:var(--text);cursor:pointer}
.hidden{display:none}

/* ========== MODAIS ========== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: var(--z-modal);
}

.modal.open {
  display: flex;
}

.modal .box {
  width: min(900px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: #0b1220;
  border: 1px solid #1f2937;
  border-radius: 14px;
}

.box header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box header h3 {
  margin: 0;
  font-size: 16px;
}

.comment {
  padding: 8px 12px;
  border-top: 1px solid #1f2937;
}

.comment small {
  color: var(--muted);
}

.company-form, .upload-form {
  padding: 10px;
  border-bottom: 1px solid #1f2937;
}

.upload-form input,
.upload-form textarea,
.company-form input,
.company-form textarea,
.upload-form select,
.company-form select {
  width: 100%;
  margin: 6px 0;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #374151;
  background: #111827;
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
}

.upload-form label,
.company-form label {
  font-size: 12px;
  color: var(--muted);
}

/* ========== POPUP MAPA ========== */
.map-popup-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 6px 0;
}
.map-popup-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 20px;
  transition: transform 0.15s, box-shadow 0.2s;
}
.map-popup-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.btn-company { background-color: #1E90FF; color: #fff; }
.btn-photo   { background-color: #FF4500; color: #fff; }

/* ========== RESPONSIVO MOBILE SHEET ========== */
.sheet-handle{display:none}
@media (max-width: 768px) {
  #app{display:block}
  #map{width:100%;height:100vh}
  aside{
    position:fixed;bottom:0;left:0;right:0;
    height:60px;
    border-left:none;border-top:1px solid #1f2937;
    border-radius:16px 16px 0 0;
    transition:height .3s ease;overflow:hidden;
    -webkit-overflow-scrolling:touch;
    background:var(--panel);
    z-index:var(--z-aside);
  }
  aside.open{height:70%}
  .sheet-handle{display:block;height:24px;position:relative;cursor:pointer}
  .sheet-handle::before{
    content:"";display:block;width:44px;height:4px;background:#555;border-radius:2px;margin:8px auto
  }
  aside:not(.open) > :not(.sheet-handle){display:none}
}

/* LOGO TOPO */
.aside-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #1f2937;
  background: #111827;
}

.aside-logo img {
  max-width: 120px;
  height: auto;
  object-fit: contain;
}

/* USER INFO AJUSTADO PARA FICAR DEBAIXO DO LOGO */
aside header {
  padding: 12px 14px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  background: #111827;
  border-bottom: 1px solid #1f2937;
}

/* Garante responsivo: logo não some */
@media (max-width: 768px) {
  .aside-logo { display: flex; }
}

@keyframes starPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.6); }
  100% { transform: scale(1); }
}

.star-pop {
  animation: starPop 0.3s ease forwards;
}

.swal2-popup-above-modal {
    z-index: 999999 !important; /* maior que o z-index do modal da foto */
}

/* Botões de navegação de fotos */
.photo-nav-btn {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #2563EB; /* azul chamativo */
  border: none;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: all 0.2s ease;
}
.photo-nav-btn.prev { left: 10px; transform: translateY(-50%); }
.photo-nav-btn.next { right: 10px; transform: translateY(-50%); }
.photo-nav-btn svg { width: 24px; height: 24px; stroke: white; }

/* Botão denunciar */
.btn-denounce {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #B91C1C;
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 10;
}

.btn-delete {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #B91C1C;
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 10;
}

/* Overlay de estrelas */
.star-overlay {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: rgba(0,0,0,0.4);
  padding: 6px 12px;
  border-radius: 8px;
}

.avg-rating {
  margin-top: 4px;
  font-weight: bold;
  color: #FFD700;
  background: rgba(0,0,0,0.6);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 14px;
  display: inline-block; /* garante que o padding funcione corretamente */
}

.btn-add-photo {
  display: none;          /* será ativado via JS quando necessário */
  padding: 8px 14px;
  border-radius: 8px;
  background: #B91C1C;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s ease; /* opcional: efeito hover */
}

.btn-add-photo:hover {
  background: #991b1b; /* tom ligeiramente mais escuro no hover */
}


.comment-input {
  flex: 2;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #374151;
  background: #1f2937;
  color: #e5e7eb;
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
}

.comment-input:focus {
  border-color: #60A5FA;
  background: #111827;
}

.btn-comment {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #2563EB; /* azul vibrante */
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-comment:hover {
  background: #1e40af; /* azul mais escuro no hover */
}

.auth-only {
  display: none;
}

#photoModal .box {
  max-height: 90vh; /* limita altura do modal */
  overflow-y: auto; /* permite rolar o conteúdo */
  position: relative;
}

#photoModal header {
  position: sticky;
  top: 0; /* fixa no topo da área rolável */
  background: #111827; /* fundo igual ao atual */
  z-index: 20; /* acima do conteúdo */
  border-bottom: 1px solid #1f2937;
  padding: 10px 14px;
}

.login-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #374151;
  background: #1f2937;
  color: #e5e7eb;
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
}

.login-input:focus {
  border-color: #60A5FA;
  background: #111827;
}


.login-btn {
  padding: 8px;
  border-radius: 6px;
  border: none;
  background: #1ea1a8;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}

.login-btn:hover {
  background: #35c0c6;
}

.common-btn {
  padding: 8px;
  border-radius: 6px;
  border: none;
  background: #1ea1a8;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}

.common-btn:hover {
  background: #35c0c6;
}