/* Fotografa Aê — componentes compartilhados (D30, Câmera limpa) */



*, *::before, *::after {

  box-sizing: border-box;

}



html, body {

  margin: 0;

  padding: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

  background-color: var(--bg, #faf7f2);

  color: var(--fg, #2a241d);

  font-family: var(--fonte-sans, system-ui, -apple-system, sans-serif);

  -webkit-font-smoothing: antialiased;

}



body.camera-body {

  height: 100dvh;

  touch-action: manipulation;

  user-select: none;

  -webkit-user-select: none;

}



/* Container Principal da Câmera */

.app-camera {

  display: flex;

  flex-direction: column;

  width: 100%;

  height: 100dvh;

  position: relative;

  background: var(--bg-deep, #f2ede4);

  justify-content: space-between;

  overflow: hidden;

}



/* -------------------------------------------------- Header Superior HUD */

.camera-header {

  position: relative;

  flex-shrink: 0;

  z-index: 20;

  display: grid;

  grid-template-columns: minmax(0, 1fr) auto;

  align-items: center;

  gap: 10px;

  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px;

  background: var(--card-glass-heavy);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border-bottom: 1px solid var(--card-border-cyan);

}



.camera-header .marca-evento {

  display: flex;

  align-items: center;

  gap: 12px;

  min-width: 0;

}



.camera-header .nome-evento {

  margin: 0;

  min-width: 0;

  font-family: var(--fonte-display);

  font-size: 16px;

  font-weight: 600;

  letter-spacing: -0.02em;

  line-height: 1.2;

  color: var(--fg);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.camera-header #btnSair { justify-self: end; }



.header-left, .header-right {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-shrink: 0;

}



.header-center {

  display: flex;

  justify-content: center;

  flex: 1;

}



/* Badge de Evento HUD */

.badge-evento {

  display: flex;

  align-items: center;

  gap: 8px;

  background: var(--card-glass);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border: 1px solid var(--card-border);

  padding: 6px 12px;

  border-radius: 999px;

  box-shadow: 0 4px 12px rgba(42, 36, 29, 0.08);

  max-width: 140px;

  min-height: 40px;

}



.live-beacon {

  position: relative;

  width: 8px;

  height: 8px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.beacon-core {

  position: absolute;

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: var(--acento);

  box-shadow: 0 4px 12px rgba(42, 36, 29, 0.05);

}



.beacon-pulse {

  position: absolute;

  width: 12px;

  height: 12px;

  border-radius: 50%;

  background: rgba(168, 73, 58, 0.5);

  animation: beaconPulse 1.6s cubic-bezier(0.24, 0, 0.38, 1) infinite;

}



@keyframes beaconPulse {

  0% { transform: scale(0.6); opacity: 0.9; }

  100% { transform: scale(2.4); opacity: 0; }

}



.evento-info {

  display: flex;

  flex-direction: column;

  overflow: hidden;

  line-height: 1.1;

}



.evento-tag {

  font-family: var(--fonte-sans);

  font-size: 11px;

  font-weight: 600;

  color: var(--fg-dim);

}



.evento-nome {

  font-family: var(--fonte-display);

  font-size: 12.5px;

  font-weight: 600;

  color: var(--fg);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.pill-btn {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  background: var(--card-glass);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border: 1px solid var(--card-border);

  color: var(--fg);

  padding: 8px 14px;

  min-height: 44px;

  border-radius: 999px;

  font-size: 12px;

  font-family: var(--fonte-display);

  font-weight: 600;

  letter-spacing: 0.03em;

  cursor: pointer;

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  max-width: 160px;

}



.pill-icon-wrap {

  display: flex;

  align-items: center;

  color: var(--fg-dim);

}



.pill-label {

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.pill-btn:active {

  transform: scale(0.95);

  border-color: var(--fg-dim);

  background: rgba(168, 73, 58, 0.15);

}



/* Botões de Ícone HUD (Touch Target 44px+) */

.btn-icon-top {

  width: 44px;

  height: 44px;

  min-width: 44px;

  min-height: 44px;

  border-radius: 50%;

  background: var(--card-glass);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  border: 1px solid var(--card-border);

  color: var(--fg);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.2s;

  box-shadow: 0 4px 12px rgba(42, 36, 29, 0.08);

}



.btn-icon-top:active {

  transform: scale(0.92);

  border-color: var(--fg-dim);

  color: var(--fg-dim);

}



.btn-icon-top.active {

  border-color: var(--fg-dim);

  color: var(--fg-dim);

  box-shadow: 0 4px 12px rgba(42, 36, 29, 0.05);

}



/* -------------------------------------------------- Toast de envio */

.toast-upload[hidden] {

  display: none !important;

}



.toast-upload {

  position: absolute;

  top: calc(88px + env(safe-area-inset-top, 10px));

  left: 50%;

  transform: translateX(-50%);

  z-index: 25;

  display: flex;

  align-items: center;

  gap: 10px;

  background: var(--card-glass-heavy);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  border: 1px solid var(--card-border);

  box-shadow: 0 8px 24px rgba(42, 36, 29, 0.12);

  color: var(--fg);

  padding: 8px 16px;

  border-radius: 12px;

  animation: slideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  pointer-events: none;

  max-width: 90vw;

}



.toast-icon {

  display: flex;

  align-items: center;

  justify-content: center;

}



.spinner {

  width: 14px;

  height: 14px;

  border: 2px solid rgba(168, 73, 58, 0.25);

  border-top-color: var(--fg-dim);

  border-right-color: var(--acento);

  border-radius: 50%;

  animation: girar 0.7s linear infinite;

}



.toast-body {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.toast-title {

  font-family: var(--fonte-sans);

  font-size: 13px;

  font-weight: 600;

  color: var(--fg);

}



.toast-bar {

  width: 140px;

  height: 3px;

  background: rgba(42, 36, 29, 0.08);

  border-radius: 999px;

  overflow: hidden;

}



.toast-bar-fill {

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, var(--acento), var(--fg-dim));

  animation: uploadProgress 1.4s ease-in-out infinite;

}



@keyframes uploadProgress {

  0% { transform: translateX(-100%); }

  100% { transform: translateX(100%); }

}



@keyframes girar {

  to { transform: rotate(360deg); }

}



@keyframes slideDown {

  from { opacity: 0; transform: translate(-50%, -15px) scale(0.95); }

  to { opacity: 1; transform: translate(-50%, 0) scale(1); }

}



/* -------------------------------------------------- Aviso In-App */

.aviso-inapp[hidden] {

  display: none !important;

}



.aviso-inapp {

  position: absolute;

  top: calc(64px + env(safe-area-inset-top, 10px));

  left: 14px;

  right: 14px;

  z-index: 24;

  background: var(--card-glass-heavy);

  border: 1px solid var(--card-border);

  border-radius: 12px;

  padding: 12px 14px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  box-shadow: 0 8px 24px rgba(42, 36, 29, 0.12);

  gap: 10px;

}



.aviso-text {

  display: flex;

  flex-direction: column;

  gap: 2px;

  font-size: 13px;

  color: var(--fg);

}



.aviso-text strong {

  font-family: var(--fonte-display);

  font-size: 14px;

  color: var(--acento);

}



.btn-fechar-aviso {

  background: transparent;

  border: 0;

  color: var(--fg-dim);

  font-size: 24px;

  min-width: 44px;

  min-height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  padding: 0;

}



/* -------------------------------------------------- Viewfinder & Video */

.viewfinder-container {

  flex: 1;

  position: relative;

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  background: var(--bg-deep);

  cursor: default;

}



.viewfinder-frame {

  position: relative;

  width: 100%;

  height: 100%;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

}



#videoPreview {

  width: 100%;

  height: auto;
  object-fit: contain;

  display: block;

}



#videoPreview.selfie-mode {

  transform: scaleX(-1);

}



/* Matriz de Grade Rule of Thirds */

.grid-matrix {

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.45;

  transition: opacity 0.3s;

}



.grid-matrix.hidden {

  display: none;

}



.grid-line {

  position: absolute;

  background: var(--grid-line);

}



.grid-line.h-1 { top: 33.333%; left: 0; right: 0; height: 1px; }

.grid-line.h-2 { top: 66.666%; left: 0; right: 0; height: 1px; }

.grid-line.v-1 { left: 33.333%; top: 0; bottom: 0; width: 1px; }

.grid-line.v-2 { left: 66.666%; top: 0; bottom: 0; width: 1px; }



/* Nível do Horizonte Artificial */

.horizon-level {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  display: flex;

  align-items: center;

  justify-content: center;

  pointer-events: none;

  opacity: 0.65;

  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;

  z-index: 10;

}



.horizon-level.hidden {

  display: none;

}



.horizon-bar {

  width: 44px;

  height: 2px;

  background: var(--fg-dim);

  box-shadow: 0 4px 12px rgba(42, 36, 29, 0.05);

  transition: background-color 0.2s;

}



.horizon-center-pip {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  border: 1.5px solid var(--fg-dim);

  margin: 0 8px;

  transition: border-color 0.2s, background-color 0.2s;

}



.horizon-level.leveled .horizon-bar {

  background: var(--ok);

}



.horizon-level.leveled .horizon-center-pip {

  border-color: var(--ok);

  background: var(--ok);

}



/* -------------------------------------------------- Anel de Foco Interativo */

.focus-ring {

  position: absolute;

  width: 68px;

  height: 68px;

  transform: translate(-50%, -50%);

  pointer-events: none;

  z-index: 12;

  display: flex;

  align-items: center;

  justify-content: center;

  animation: focusLock 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}



.focus-square {

  position: absolute;

  inset: 0;

  border: 1.5px solid #fff;

  border-radius: 8px;

  box-shadow: 0 0 0 1px rgba(42, 36, 29, 0.2);

  animation: focusSquareContract 0.35s ease-out forwards;

}



@keyframes focusSquareContract {

  0% { transform: scale(1.6); opacity: 0; }

  100% { transform: scale(1); opacity: 1; }

}



@keyframes focusLock {

  0% { transform: translate(-50%, -50%) scale(1.4); }

  100% { transform: translate(-50%, -50%) scale(1); }

}



/* Flash Visual Effect */

.flash-overlay {

  position: absolute;

  inset: 0;

  background: #fff;

  opacity: 0;

  pointer-events: none;

  z-index: 35;

  transition: opacity 0.05s ease-out;

}



.flash-overlay.flash-active {

  opacity: 0.95;

  transition: none;

}



/* -------------------------------------------------- Fallback da câmera */

.camera-fallback[hidden] {

  display: none !important;

}



.camera-fallback {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background: radial-gradient(circle at center, #fdfbf7 0%, #f0e9dd 100%);

  text-align: center;

  padding: 24px;

  z-index: 10;

}



.fallback-content {

  max-width: 320px;

  display: flex;

  flex-direction: column;

  align-items: center;

}



.fallback-icon {

  font-size: 40px;

  z-index: 2;

}



.fallback-content h3 {

  font-family: var(--fonte-display);

  font-size: 19px;

  font-weight: 700;

  letter-spacing: 0.02em;

  margin: 0 0 8px;

  color: var(--fg);

}



.fallback-content p {

  color: var(--fg-dim);

  font-size: 13.5px;

  line-height: 1.45;

  margin-bottom: 24px;

}



/* -------------------------------------------------- Botões do Design System */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  min-height: 44px;

  padding: 11px 20px;

  border-radius: 12px;

  font-family: var(--fonte-display);

  font-size: 14px;

  font-weight: 600;

  letter-spacing: 0.02em;

  border: 0;

  cursor: pointer;

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  text-decoration: none;

  touch-action: manipulation;

}



.btn:active {

  transform: scale(0.96);

}



.btn.btn-primario,

.btn-primario {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  min-height: 44px;

  padding: 12px 24px;

  background: var(--acento);

  color: #fff;

  font-family: var(--fonte-display);

  font-weight: 700;

  font-size: 14px;

  letter-spacing: 0.04em;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.25);

  cursor: pointer;

  box-shadow: 0 4px 12px rgba(42, 36, 29, 0.05);

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  text-decoration: none;

  touch-action: manipulation;

}



.btn-primario:active {

  transform: scale(0.96);

  box-shadow: 0 4px 12px rgba(42, 36, 29, 0.05);

}



.btn.btn-sec,

.btn-sec {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 44px;

  padding: 12px 20px;

  background: var(--card-glass-heavy);

  color: var(--fg);

  font-family: var(--fonte-display);

  font-weight: 600;

  font-size: 14px;

  letter-spacing: 0.03em;

  border-radius: 12px;

  border: 1px solid var(--card-border);

  cursor: pointer;

  transition: all 0.2s;

  touch-action: manipulation;

}



.btn-sec:active {

  background: var(--bg-deep);

  transform: scale(0.96);

}



.btn.full {

  width: 100%;

}



/* -------------------------------------------------- Barra Inferior de Disparo */

.camera-bottom-bar {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  z-index: 20;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 12px 24px calc(16px + env(safe-area-inset-bottom, 14px));

  background: linear-gradient(0deg, rgba(42, 36, 29, 0.5) 0%, rgba(42, 36, 29, 0.12) 65%, transparent 100%);

}



.bar-col {

  display: flex;

  align-items: center;

}



.bar-col.left {

  flex: 1;

  justify-content: flex-start;

}



.bar-col.center {

  flex: 1;

  justify-content: center;

}



.bar-col.right {

  flex: 1;

  justify-content: flex-end;

  gap: 14px;

}



/* Quick Gallery Thumbnail */

.btn-galeria-rolo {

  position: relative;

  width: 48px;

  height: 48px;

  min-width: 48px;

  min-height: 48px;

  border-radius: 14px;

  background: var(--card-glass);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  border: 1.5px solid var(--card-border);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  overflow: visible;

  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);

  box-shadow: 0 4px 12px rgba(42, 36, 29, 0.12);

}



.btn-galeria-rolo:active {

  transform: scale(0.92);

  border-color: var(--fg-dim);

}



.thumb-container {

  width: 100%;

  height: 100%;

  border-radius: 12px;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

}



.thumb-container img {

  width: 100%;

  height: auto;
  object-fit: contain;

}



.btn-galeria-rolo svg {

  color: var(--fg-dim);

}



.badge-count {

  position: absolute;

  top: -6px;

  right: -6px;

  background: var(--acento);

  color: #fff;

  font-family: var(--fonte-mono);

  font-size: 10.5px;

  font-weight: 700;

  min-width: 20px;

  height: 20px;

  border-radius: 999px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0 4px;

  border: 2px solid #fff;

  box-shadow: 0 2px 8px rgba(42, 36, 29, 0.12);

}



/* -------------------------------------------------- Obturador */

.btn-shutter {

  position: relative;

  width: 82px;

  height: 82px;

  min-width: 82px;

  min-height: 82px;

  border-radius: 50%;

  background: transparent;

  border: 0;

  padding: 0;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  outline: none;

  -webkit-tap-highlight-color: transparent;

  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);

}



.shutter-orbit-ring { display: none; }



.shutter-ring {

  position: absolute;

  inset: 4px;

  border-radius: 50%;

  border: 3px solid rgba(255, 255, 255, 0.92);

  box-shadow: 0 2px 10px rgba(42, 36, 29, 0.18);

  transition: transform 0.15s ease;

}



.shutter-core {

  position: relative;

  width: 58px;

  height: 58px;

  border-radius: 50%;

  background: #fff;

  box-shadow: inset 0 0 0 3px var(--acento);

  transition: transform 0.15s ease;

}



.core-pip { display: none; }



.btn-shutter:active {

  transform: scale(0.94);

}



.btn-shutter:active .shutter-core {

  transform: scale(0.88);

  background: var(--bg-deep);

}



.btn-shutter:active .shutter-ring {

  border-color: #fff;

}



/* Botões da Direita */

.btn-icon-bar {

  width: 46px;

  height: 46px;

  min-width: 46px;

  min-height: 46px;

  border-radius: 50%;

  background: var(--card-glass);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  border: 1px solid var(--card-border);

  color: var(--fg);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  text-decoration: none;

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  box-shadow: 0 4px 12px rgba(42, 36, 29, 0.12);

}



.btn-icon-bar:active {

  transform: scale(0.92);

  border-color: var(--fg-dim);

  color: var(--fg-dim);

}



.btn-icon-bar.link-galeria {

  background: rgba(168, 73, 58, 0.12);

  border-color: var(--card-border-cyan);

  color: var(--fg-dim);

}



.btn-icon-bar.link-galeria:hover {

  box-shadow: 0 4px 12px rgba(42, 36, 29, 0.05);

}



.modal-dialog {

  border: 0;

  padding: 16px;

  background: transparent;

  width: 100%;

  max-width: 440px;

  margin: auto;

}



.modal-dialog::backdrop {

  background: rgba(42, 36, 29, 0.45);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

}



.modal-card.modal-cyber {

  position: relative;

  background: var(--card-glass-heavy);

  border: 1px solid var(--card-border);

  border-radius: 20px;

  padding: 24px;

  color: var(--fg);

  box-shadow: 0 16px 40px rgba(42, 36, 29, 0.16);

  animation: cyberModalUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  overflow: hidden;

}



.modal-cyber-glow {

  position: absolute;

  top: -50px;

  right: -50px;

  width: 150px;

  height: 150px;

  border-radius: 50%;

  background: radial-gradient(circle, var(--cyan-glow) 0%, transparent 70%);

  pointer-events: none;

}



@keyframes cyberModalUp {

  from { opacity: 0; transform: translateY(24px) scale(0.95); }

  to { opacity: 1; transform: translateY(0) scale(1); }

}



.modal-cyber-badge {

  display: inline-block;

  font-family: var(--fonte-mono);

  font-size: 9.5px;

  font-weight: 700;

  color: var(--fg-dim);

  letter-spacing: 0.08em;

  margin-bottom: 6px;

}



.modal-header h3 {

  font-family: var(--fonte-display);

  font-size: 20px;

  font-weight: 700;

  margin: 0 0 6px;

  color: var(--fg);

}



.modal-header p {

  color: var(--fg-dim);

  font-size: 13.5px;

  margin: 0 0 20px;

  line-height: 1.45;

}



.input-grupo-cyber {

  display: flex;

  align-items: center;

  background: rgba(42, 36, 29, 0.04);

  border: 1px solid rgba(168, 73, 58, 0.3);

  border-radius: 12px;

  padding: 4px 14px;

  transition: all 0.2s;

}



.input-grupo-cyber:focus-within {

  border-color: var(--acento);

  box-shadow: 0 4px 12px rgba(42, 36, 29, 0.05);

  background: rgba(168, 73, 58, 0.06);

}



.input-grupo-cyber .input-tag {

  font-family: var(--fonte-mono);

  font-size: 11px;

  font-weight: 700;

  color: var(--fg-dim);

  margin-right: 8px;

}



.input-grupo-cyber input {

  flex: 1;

  background: transparent;

  border: 0;

  padding: 12px 0;

  color: var(--fg);

  font-family: var(--fonte-sans);

  font-size: 15px;

  outline: none;

}



.modal-acoes {

  display: flex;

  gap: 10px;

  margin-top: 20px;

}



/* Modal de Histórico Holográfico */

.historico-card {

  max-height: 82vh;

  display: flex;

  flex-direction: column;

}



.badge-status-fila-cyber {

  font-family: var(--fonte-mono);

  font-size: 11px;

  background: rgba(168, 73, 58, 0.12);

  border: 1px solid rgba(168, 73, 58, 0.3);

  color: var(--fg-dim);

  padding: 3px 10px;

  border-radius: 999px;

  margin-left: auto;

  margin-right: 28px;

}



.btn-fechar-modal {

  position: absolute;

  top: 20px;

  right: 20px;

  background: transparent;

  border: 0;

  color: var(--fg-dim);

  font-size: 24px;

  min-width: 44px;

  min-height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: color 0.2s;

}



.btn-fechar-modal:hover {

  color: var(--fg);

}



.grade-minhas-fotos {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 8px;

  margin: 16px 0;

  overflow-y: auto;

  max-height: 45vh;

  padding-right: 4px;

}



.item-minha-foto {

  position: relative;

  aspect-ratio: 1;

  border-radius: 10px;

  overflow: hidden;

  background: var(--bg-deep);

  border: 1px solid var(--card-border);

}



.item-minha-foto img {

  width: 100%;

  height: 100%;
  object-fit: contain;
  object-position: center;

}



.item-status-tag {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  font-family: var(--fonte-mono);

  font-size: 9px;

  font-weight: 700;

  padding: 2px 4px;

  text-align: center;

  color: #fff;

  letter-spacing: 0.04em;

}



.btn-apagar-minha-foto {

  position: absolute;

  top: 4px;

  right: 4px;

  width: 26px;

  height: 26px;

  border-radius: 50%;

  background: rgba(42, 36, 29, 0.75);

  border: 1px solid rgba(168, 73, 58, 0.6);

  color: #a8493a;

  font-size: 16px;

  line-height: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  z-index: 5;

  transition: all 0.2s;

  backdrop-filter: blur(4px);

}



.btn-apagar-minha-foto:hover {

  background: var(--acento);

  color: #fff;

  border-color: #fff;

  transform: scale(1.1);

}



.item-status-tag.enviado { background: var(--ok); }

.item-status-tag.enviando { background: #3b82f6; }

.item-status-tag.pendente { background: #eab308; }

.item-status-tag.erro { background: var(--acento); }



.modal-footer-historico {

  margin-top: 8px;

}



/* -------------------------------------------------- Avisos Gerais */

.aviso {

  padding: 12px 16px;

  border-radius: 12px;

  font-size: 13.5px;

  margin-bottom: 20px;

  animation: cyberFadeIn 0.25s ease-out;

}



.aviso.alerta {

  background: rgba(168, 73, 58, 0.1);

  border: 1px solid var(--acento);

  color: #8a3626;

}



.aviso.sucesso {

  background: rgba(61, 107, 79, 0.1);

  border: 1px solid var(--ok);

  color: #2c5a3f;

}



/* -------------------------------------------------- Zona de risco (exclusão de evento) */

.config-box-perigo {

  border: 1px solid var(--acento);

  background: rgba(168, 73, 58, 0.06);

  border-radius: 16px;

  padding: 20px;

}



.config-box-perigo h3 {

  color: #8a3626;

}



.btn-perigo {

  border-color: var(--acento);

  color: #8a3626;

}



.btn-perigo:hover {

  background: rgba(168, 73, 58, 0.12);

}



/* -------------------------------------------------- Overlays da Câmera (login / evento / termos) */

.overlay-bloqueio {

  position: fixed;

  inset: 0;

  z-index: 80;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 24px;

  background: var(--bg);

}

.overlay-bloqueio.overlay-meio { z-index: 85; }

.overlay-bloqueio.overlay-acima { z-index: 90; }

.splash-abertura { z-index: 120; }

.splash-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  max-width: 280px;
}

.splash-marca img { border-radius: 22px; }

.splash-marca p {
  margin: 0;
  font-family: var(--fonte-display);
  font-size: 22px;
  line-height: 1.35;
  color: var(--fg);
}

.overlay-bloqueio[hidden] { display: none !important; }

.overlay-bloqueio .login-card {

  background: #fff;

  border: 1px solid var(--card-border);

  border-radius: 20px;

  padding: 28px 24px;

  max-width: 360px;

  text-align: center;

  box-shadow: 0 12px 36px rgba(42, 36, 29, 0.08);

}

.overlay-bloqueio h2 {

  margin: 0 0 8px;

  font-family: var(--fonte-display);

  font-size: 18px;

}

.overlay-bloqueio p {

  margin: 0 0 16px;

  font-size: 14px;

  color: var(--fg-dim);

  line-height: 1.4;

}

.overlay-bloqueio .google-slot {

  display: flex;

  justify-content: center;

  min-height: 44px;

}

.overlay-bloqueio.overlay-termos .login-card { text-align: left; }

.overlay-bloqueio.overlay-termos h2 { text-align: center; }

.overlay-bloqueio.overlay-termos p { margin: 0 0 16px; }

.overlay-bloqueio.overlay-termos label {

  display: flex;

  gap: 10px;

  align-items: flex-start;

  font-size: 14px;

  line-height: 1.4;

  margin-bottom: 16px;

}

.overlay-bloqueio.overlay-termos input[type="checkbox"] {

  width: 20px;

  height: 20px;

  margin-top: 2px;

  flex-shrink: 0;

}

.overlay-bloqueio.overlay-termos .aviso { margin-bottom: 12px; }

.overlay-bloqueio.overlay-termos .google-slot { min-height: 0; }



.evento-capa {

  width: 40px;

  height: 40px;

  border-radius: 8px;

  flex-shrink: 0;

  object-fit: contain; height: auto;

  background: var(--card-glass);

}



/* -------------------------------------------------- Utilitários (saem do style="" do HTML — D30) */

.is-oculto { display: none; }



.icone-marca {

  width: 28px;

  height: 28px;

  border-radius: 7px;

  flex-shrink: 0;

  object-fit: cover;

}



.icone-btn { margin-right: 4px; }

.icone-btn-md { margin-right: 6px; }



.sentinela-scroll { height: 1px; }



body.pagina {

  overflow: auto;

  height: auto;

  min-height: 100%;

  padding: 0;

  background: var(--bg);

}



.texto-aviso-fino {

  font-size: 11px;

  color: var(--fg-dim);

  margin: 10px 0 14px;

  line-height: 1.4;

}

.texto-aviso-fino a,

.link-acento {

  color: var(--acento);

  text-decoration: underline;

}



.marca-acento { color: var(--acento); }



.relativo { position: relative; }



.texto-ajuda {

  font-size: 13px;

  color: var(--fg-dim);

  margin: 0 0 14px;

}



.espaco-topo { margin-top: 24px; }

.espaco-baixo { margin-bottom: 24px; }

.espaco-baixo-sm { margin-bottom: 12px; }

.espaco-baixo-md { margin-bottom: 20px; }



.caixa-estreita { max-width: 640px; }



.qr-evento-box {

  width: 168px;

  height: 168px;

  /* Fundo claro de propósito: QR precisa de contraste para escanear. */

  background: #fff;

  border-radius: 12px;

  padding: 8px;

  flex: 0 0 auto;

}



.t-card-value-sm { font-size: 20px; }



.lista-mono-col {

  display: flex;

  flex-direction: column;

  gap: 8px;

  font-family: var(--fonte-mono);

  font-size: 13px;

}



.preview-capa {

  width: 64px;

  height: 64px;

  object-fit: cover;

  border-radius: 8px;

}



.preenche { width: 100%; height: 100%; }



.lightbox-acoes {

  position: fixed;

  bottom: calc(20px + env(safe-area-inset-bottom));

  left: 50%;

  transform: translateX(-50%);

  z-index: 30;

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

  justify-content: center;

  width: 100%;

}



.caixa-resultado {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 24px;

  background: var(--card-glass);

  border: 1px dashed var(--card-border);

  border-radius: 12px;

  margin-top: 16px;

  gap: 8px;

}



.campo-check {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 16px;

}

.campo-check input { width: 20px; height: 20px; }

.campo-check label { margin: 0; font-weight: 600; cursor: pointer; }



.opcoes-recuadas {

  border-left: 2px solid var(--card-border);

  padding-left: 16px;

  margin-bottom: 16px;

}



.texto-ajuda-sm {

  font-size: 12px;

  color: var(--fg-dim);

}



.campo-lado-a-lado {

  display: flex;

  gap: 16px;

}

.campo-lado-a-lado > * { flex: 1; }



.cabecalho-com-marca {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  margin-bottom: 6px;

}

.cabecalho-com-marca.cabecalho-com-marca-inicio {

  justify-content: flex-start;

  gap: 12px;

  margin-bottom: 8px;

}

.icone-marca-lg {

  width: 32px;

  height: 32px;

  border-radius: 8px;

  flex-shrink: 0;

  object-fit: cover;

}

.titulo-pagina { margin: 0; }

.rodape-legal {

  font-family: var(--fonte-mono);

  font-size: 12px;

  color: var(--fg-dim);

}



.form-com-divisor {

  margin-bottom: 24px;

  padding-bottom: 24px;

  border-bottom: 1px solid var(--card-border);

}

.campo-com-acao {

  display: flex;

  gap: 12px;

  align-items: flex-end;

}

.campo-cresce { flex: 1; margin: 0; }

.campo-cresce label { margin-bottom: 6px; display: block; }

.campo-cresce input { margin: 0; }

.btn-altura-campo { margin: 0; height: 44px; }

.status-suave { color: var(--fg-dim); font-size: 14px; }

.grade-lista { display: grid; gap: 12px; }



.telao-melhor-foto {

  display: none;

  position: absolute;

  inset: 0;

  background: rgba(42, 36, 29, 0.85);

  z-index: 50;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  backdrop-filter: blur(20px);

}

.telao-melhor-foto.is-visivel { display: flex; }

.telao-melhor-titulo {

  font-family: var(--fonte-display);

  font-size: 48px;

  font-weight: 700;

  color: var(--neon-primary);

  margin-bottom: 8px;

}

.telao-melhor-premio {

  font-size: 20px;

  color: var(--fg);

  margin-bottom: 40px;

  font-family: var(--fonte-mono);

}

.telao-melhor-img {

  max-height: 60vh;

  max-width: 80vw;

  border-radius: 16px;

  box-shadow: 0 20px 60px rgba(42, 36, 29, 0.8);

  border: 2px solid var(--neon-primary);

}

.telao-melhor-autor {

  margin-top: 24px;

  font-size: 24px;

  font-family: var(--fonte-display);

  font-weight: 600;

}

.telao-melhor-foto {

  display: none;

  position: absolute;

  inset: 0;

  background: rgba(42, 36, 29, 0.85);

  z-index: 50;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  backdrop-filter: blur(20px);

}

.telao-melhor-foto.is-visivel { display: flex; }

.telao-melhor-titulo {

  font-family: var(--fonte-display);

  font-size: 48px;

  font-weight: 700;

  color: var(--neon-primary);

  margin-bottom: 8px;

}

.telao-melhor-premio {

  font-size: 20px;

  color: var(--fg);

  margin-bottom: 40px;

  font-family: var(--fonte-mono);

}

.telao-melhor-img {

  max-height: 60vh;

  max-width: 80vw;

  border-radius: 16px;

  box-shadow: 0 20px 60px rgba(42, 36, 29, 0.8);

  border: 2px solid var(--neon-primary);

}

.telao-melhor-autor {

  margin-top: 24px;

  font-size: 24px;

  font-family: var(--fonte-display);

  font-weight: 600;

}









/* === POLAROID STYLE (Galeria e Admin) === */

.item-foto, .card-midia {

  position: relative;

  background: #ffffff; /* Fundo branco do papel polaroid */

  padding: 8px 8px 12px 8px;

  border-radius: 4px;

  box-shadow: 0 4px 12px rgba(42, 36, 29, 0.08), 0 1px 3px rgba(42, 36, 29, 0.05);

  transition: transform 0.2s ease, box-shadow 0.2s ease;

  display: flex;

  flex-direction: column;

  cursor: pointer;

  border: 1px solid rgba(42, 36, 29, 0.06);

}



.item-foto:hover, .card-midia:hover {

  transform: translateY(-4px) rotate(1deg);

  box-shadow: 0 8px 24px rgba(42, 36, 29, 0.12), 0 2px 6px rgba(42, 36, 29, 0.08);

  border-color: rgba(168, 73, 58, 0.15); /* Acento suave no hover */

}



/* Área da foto */

.polaroid-img-wrap, .midia-preview-wrap {
  width: 100%;
  aspect-ratio: 1; /* Quadrada ou 4/3 */
  background: transparent; /* Combina com o fundo branco do card polaroid */
  overflow: hidden;
  position: relative;
  border-radius: 2px;
}
.card-midia .midia-preview-wrap { aspect-ratio: 4/3; }



.item-foto img, .midia-preview-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.3s;
}

.item-foto img.carregada, .midia-preview-wrap img { opacity: 1; } /* Admin carrega logo, galeria tem lazy-load */



/* Área do texto na base: quem enviou, data e hora, lugar */

.polaroid-caption {

  position: static;

  margin-top: 10px;

  padding: 0 4px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 2px;

  text-align: center;

  font-family: var(--fonte-display);

  font-size: 13px;

  line-height: 1.25;

  color: var(--fg);

  white-space: normal;

  overflow: visible;

  font-style: italic;

}



.polaroid-caption .polaroid-autor {

  font-style: italic;

  font-weight: 600;

}



.polaroid-caption .polaroid-quando,

.polaroid-caption .polaroid-local {

  font-style: normal;

  font-size: 11px;

  color: var(--fg-dim);

}



.card-midia .midia-info {

  display: flex;

  flex-direction: column;

  gap: 8px;

  margin-top: 8px;

  padding: 0 4px 4px;

}

/* -------------------------------------------------- Toaster (sucesso some; alerta fica) */

.toaster[hidden] { display: none !important; }

.toaster {
  position: fixed;
  top: calc(76px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 420px);
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--card-glass-heavy);
  border: 1px solid var(--card-border);
  color: var(--fg);
  font-family: var(--fonte-sans);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(42, 36, 29, 0.12);
  animation: slideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.toaster.sucesso { border-color: var(--ok); }
.toaster.alerta { border-color: var(--acento); }

.toaster-texto { margin: 0; }

.toaster-fechar {
  border: 0;
  background: transparent;
  color: var(--fg-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.confirma-foto {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 12px;
  margin-bottom: 14px;
  background: var(--bg-deep);
}

.confirma-foto[hidden] { display: none !important; }

.confirma-titulo {
  margin: 0 0 8px;
  font-family: var(--fonte-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--fg);
}

.confirma-texto {
  margin: 0 0 18px;
  color: var(--fg-dim);
  font-size: 14px;
  line-height: 1.45;
}

.btn-excluir {
  background: var(--acento);
  color: var(--bg);
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  font-family: var(--fonte-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}