@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --green: #64d403;       /* verde de UI (botões, pills) */
  --green-neon: #77fe02;  /* verde do logo (glow, dark theme) */
  --black: #000000;
  --dark-bg: #242321;     /* fundo das telas de chamada (visitante) */
  --light-bg: #f4f5f7;    /* fundo do app/portal */
  --card-white: #ffffff;
  --text-dark: #111214;
  --text-muted: #6b7280;
  --danger: #ff3b30;
  --call-blue: #3b82f6;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { overflow-x: hidden; }
body { margin: 0; font-family: 'Inter', -apple-system, Roboto, Arial, sans-serif; overflow-x: hidden; }
/* Imagens/vídeos soltos (sem largura própria definida por outro estilo)
   nunca devem ultrapassar a largura da tela — evita scroll lateral quando
   algum conteúdo (ex: foto de encomenda, mapa) vem maior que o esperado. */
img, video, canvas, svg { max-width: 100%; }

/* ============ TEMA CLARO — app / portal do morador e síndico ============ */
.app-shell { background: var(--light-bg); min-height: 100vh; padding-bottom: 90px; }

.app-header {
  background: var(--black);
  padding: calc(18px + env(safe-area-inset-top)) 20px 18px;
  display: flex; align-items: center;
  position: sticky; top: 0; z-index: 50;
}
.app-header img { height: 30px; }

.app-body { max-width: 480px; margin: 0 auto; padding: 22px 18px; }
/* Telas mais densas (cards, tabelas de ação) — Painel Administrativo e Painel
   do Parceiro — ficam sufocadas no mesmo limite de largura do app do morador.
   Libera mais espaço horizontal só nelas, pra caber cards lado a lado em
   telas grandes. Em celular o viewport já é menor que isso, então não muda
   nada aí. */
.app-body.wide-view { max-width: 1200px; }

.page-title { font-size: 26px; font-weight: 800; color: var(--text-dark); margin: 0 0 18px 0; letter-spacing: -0.02em; }
.page-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.page-title-row .page-title { margin: 0; }

.pill-btn {
  background: var(--green); color: #06210a; border: none; border-radius: 20px;
  padding: 9px 16px; font-size: 13px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.pill-btn.outline { background: transparent; border: 1.5px solid var(--green); color: #3f8a02; }
.pill-btn.dark { background: #1a3d02; color: var(--green); }

/* Usada em telas por toda a base (abas, linha de ação com input+botão, etc)
   pra alinhar itens lado a lado com espaçamento — sem essa regra os filhos
   (divs/botões em bloco) empilhavam verticalmente em vez de ficar em linha,
   e o `gap` inline que várias telas já passavam (ex: style="gap:8px") não
   tinha efeito nenhum por faltar o display:flex. */
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Grid de cards do Painel Administrativo (Propriedades, Pessoas, etc) — uma
   coluna no celular, várias colunas lado a lado à medida que a tela cresce. */
.admin-card-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
@media (min-width: 640px) { .admin-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .admin-card-grid { grid-template-columns: repeat(3, 1fr); } }
.admin-card-grid > .unit-card { margin-bottom: 0; }

.unit-card {
  background: var(--card-white); border-radius: 16px; padding: 18px;
  margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.08);
  border: 2px solid transparent; transition: border-color .15s ease, box-shadow .15s ease;
}
.unit-card.fulfill-active {
  border-color: #f0b429; box-shadow: 0 0 0 4px rgba(240,180,41,.15), 0 1px 3px rgba(0,0,0,.06);
}
.unit-card.fulfill-success {
  animation: fulfill-flash-green .7s ease;
}
@keyframes fulfill-flash-green {
  0% { border-color: #3f8a02; box-shadow: 0 0 0 6px rgba(63,138,2,.18); }
  100% { border-color: transparent; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.08); }
}
.unit-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.unit-card-title { font-size: 18px; font-weight: 800; color: var(--text-dark); display: flex; align-items: center; gap: 8px; }
.unit-card-sub { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.unit-card-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.unit-card-actions .pill-btn { flex: 1; justify-content: center; }

.settings-list { background: var(--card-white); border-radius: 16px; overflow: hidden; }
.settings-item {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border-bottom: 1px solid #eef0f2; font-size: 15px; font-weight: 600; color: var(--text-dark);
  cursor: pointer;
}
.settings-item:last-child { border-bottom: none; }
.settings-item .chev { margin-left: auto; color: #c6cad0; }
.settings-item.danger { color: var(--danger); }
.settings-item .ico { width: 22px; text-align: center; }

.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; background: #fff;
  border-top: 1px solid #eceef1; padding: 12px 30px 22px;
  display: flex; align-items: center; justify-content: space-between; z-index: 60;
}
.nav-circle {
  width: 46px; height: 46px; border-radius: 50%; background: #eef0f3;
  display: flex; align-items: center; justify-content: center; color: #444; border: none;
}
.nav-fab {
  width: 62px; height: 62px; border-radius: 50%; background: var(--green);
  display: flex; align-items: center; justify-content: center; color: #06210a;
  font-size: 30px; font-weight: 400; border: none; box-shadow: 0 6px 16px rgba(100,212,3,.45);
  margin-top: -34px;
}

form.light input, form.light select, .app-shell input, .app-shell select {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid #e2e4e8;
  background: #fff; color: var(--text-dark); margin-top: 6px; margin-bottom: 14px; font-size: 15px;
  font-family: inherit;
}
.app-shell label { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.app-shell .btn-primary {
  background: var(--green); color: #06210a; border: none; border-radius: 12px;
  padding: 15px; font-size: 15px; font-weight: 700; width: 100%; cursor: pointer;
}
.app-shell .btn-secondary {
  background: #fff; color: var(--text-dark); border: 1.5px solid #e2e4e8; border-radius: 12px;
  padding: 15px; font-size: 15px; font-weight: 700; width: 100%; cursor: pointer; margin-top: 10px;
}
.app-shell .card-plain { background: #fff; border-radius: 16px; padding: 20px; margin-bottom: 16px; }
.app-shell .error { background: #fdeaea; color: #b42318; padding: 12px; border-radius: 10px; margin: 10px 0; font-size: 13px; }
.app-shell .success-box { background: #eafce0; color: #1c6b02; padding: 12px; border-radius: 10px; margin: 10px 0; font-size: 13px; }
.app-shell .muted-text { color: var(--text-muted); font-size: 13px; }

/* ============ TEMA ESCURO — visitante / tela de chamada ============ */
.call-shell {
  background: var(--dark-bg); min-height: 100vh; color: #fff;
  display: flex; flex-direction: column; align-items: center;
}
.call-logo { margin: 34px 0 10px; height: 46px; }
.call-content { flex: 1; width: 100%; max-width: 480px; padding: 0 20px; display: flex; flex-direction: column; align-items: center; }

.white-card {
  background: #fff; color: var(--text-dark); border-radius: 18px; padding: 26px 22px;
  width: 100%; text-align: center; box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.white-card h2 { font-size: 21px; font-weight: 800; margin: 0 0 10px; }
.white-card p { color: var(--text-muted); font-size: 14px; line-height: 1.5; margin: 0 0 18px; }

.directory-row {
  background: var(--green); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between; width: 100%;
}
.directory-row .name { color: #06210a; font-weight: 700; font-size: 15px; }
.directory-row .call-ico {
  width: 40px; height: 40px; border-radius: 10px; background: rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center; color: #06210a; font-size: 16px; border: none;
}

.ring-status { text-align: center; margin-top: 60px; }
.ring-status h2 { font-size: 24px; font-weight: 700; margin-bottom: 22px; }
.dots-loader { display: flex; gap: 10px; justify-content: center; margin-bottom: 26px; }
.dots-loader span {
  width: 14px; height: 14px; border-radius: 50%; background: #6b6a63;
  animation: dot-pulse 1.2s infinite ease-in-out;
}
.dots-loader span:nth-child(1) { animation-delay: 0s; }
.dots-loader span:nth-child(2) { animation-delay: 0.2s; }
.dots-loader span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-pulse {
  0%, 80%, 100% { background: #6b6a63; box-shadow: none; transform: scale(1) translateY(0); }
  40% { background: var(--green-neon); box-shadow: 0 0 14px var(--green-neon); transform: scale(1.6) translateY(-8px); }
}
.ring-hint { color: #9a9990; font-size: 13px; margin-bottom: 26px; }

.call-control {
  width: 58px; height: 58px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff;
}
.call-control.blue { background: var(--call-blue); }
.call-control.red { background: var(--danger); }
.call-controls-row { display: flex; gap: 22px; justify-content: center; margin: 30px 0; }

.avatar-circle {
  width: 190px; height: 190px; border-radius: 50%; border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center; margin: 50px auto 20px; font-size: 90px;
}
.timer-pill {
  background: #000; color: #fff; border-radius: 20px; padding: 8px 16px; font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 0px;
}

.call-footer { text-align: center; color: #7d7c74; font-size: 11.5px; line-height: 1.6; padding: 20px 0; }

/* ---------------- Tela de descanso do terminal de elevador ---------------- */
.elevador-rest-screen {
  /* position:fixed escapa do max-width/padding do .app-body e da bottom-nav
     (que nem é renderizada nessa tela) — cobre o viewport inteiro de verdade,
     não só a coluna central do app. */
  position: fixed; inset: 0; z-index: 50; overflow: hidden;
  background: var(--dark-bg); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; padding: 24px; text-align: center;
}
.elevador-fullscreen-btn {
  position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,.08);
  color: #cfcfcf; border: 1px solid rgba(255,255,255,.18); border-radius: 20px;
  padding: 7px 14px; font-size: 12px; cursor: pointer;
}
.elevador-icon { font-size: 56px; opacity: .85; }
.elevador-emergency-btn {
  width: min(320px, 80vw); aspect-ratio: 1; border-radius: 50%; border: none;
  background: var(--danger); color: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 20px; box-shadow: 0 0 0 10px rgba(220,38,38,.18), 0 10px 40px rgba(0,0,0,.5);
  animation: elevador-pulse 2.2s infinite ease-in-out;
}
.elevador-emergency-btn:disabled { opacity: .45; cursor: not-allowed; animation: none; box-shadow: none; }
.elevador-emergency-title { font-size: 26px; font-weight: 800; letter-spacing: .5px; }
.elevador-emergency-sub { font-size: 14px; font-weight: 600; line-height: 1.4; max-width: 220px; }
@keyframes elevador-pulse {
  0%, 100% { box-shadow: 0 0 0 10px rgba(220,38,38,.18), 0 10px 40px rgba(0,0,0,.5); }
  50% { box-shadow: 0 0 0 20px rgba(220,38,38,.08), 0 10px 40px rgba(0,0,0,.5); }
}
/* Botão irmão do de emergência — liga direto pra empresa de manutenção do
   elevador, não pra portaria. Deliberadamente mais discreto (retangular,
   sem pulsar, cor neutra) — o de emergência continua sendo o principal. */
.elevador-maintenance-btn {
  width: min(280px, 72vw); border-radius: 16px; border: none;
  background: var(--call-blue); color: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 16px 20px;
}
.elevador-maintenance-btn:disabled { opacity: .4; cursor: not-allowed; }
.elevador-maintenance-title { font-size: 16px; font-weight: 800; letter-spacing: .3px; }
.elevador-maintenance-sub { font-size: 12px; font-weight: 600; line-height: 1.3; max-width: 220px; }
.elevador-footer { color: #9a9990; font-size: 13px; }

.call-video-frame {
  width: 100%; aspect-ratio: 4/5; background: #000; border-radius: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: #444; position: relative;
}
.call-map-frame { width: 100%; aspect-ratio: 5/4; background: #dfe6dc; position: relative; overflow: hidden; }

/* ---------------- Feedback de carregamento em ações (spinner de botão) ---------------- */
.btn-spinner {
  display: inline-block; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: btn-spin .7s linear infinite; vertical-align: -2px; margin-right: 2px;
}
button[data-loading="true"] { opacity: .85; cursor: wait; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------------- Barra global de carregamento (qualquer fetch em andamento) ---------------- */
.global-loading-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10000;
  background: linear-gradient(90deg, #3f8a02, #7ed321, #3f8a02);
  background-size: 200% 100%; animation: global-loading-sweep 1.1s linear infinite;
  pointer-events: none;
}
@keyframes global-loading-sweep { from { background-position: 0% 0; } to { background-position: -200% 0; } }

/* ---------------- Tela do Elevador (rica) — anúncios/conteúdo ----------------
   Prefixo "elevtv-" deliberadamente separado de "elevador-" (tela simples
   acima): nenhuma regra dali é reaproveitada/alterada aqui — condomínio sem
   o serviço ativo continua vendo a tela de sempre, intocada. Proporções
   pensadas sobre a referência 1080x1920 (retrato), mas responsivas via
   clamp()/vh, sem media queries pro caso comum. */
.elevtv-screen {
  position: fixed; inset: 0; z-index: 50; overflow: hidden;
  background: var(--dark-bg); color: #fff;
  display: grid; grid-template-rows: auto 2.25fr auto 1fr auto;
  height: 100%; width: 100%;
  /* Container query, não viewport: todo tamanho/espaçamento aqui dentro usa
     cqh/cqw (abaixo), medido contra ESTA caixa — não contra a janela do
     navegador. Sem isso, a prévia do Admin Master (uma moldura pequena
     dentro da tela do admin) herdaria tamanhos calculados pro viewport
     inteiro e ficaria estourada/cortada, mesmo a caixa sendo pequena. */
  container-type: size; container-name: elevtv;
}
.elevtv-topbar {
  display: flex; align-items: center; gap: clamp(10px, 2vw, 24px);
  padding: clamp(8px, 1.5vh, 18px) clamp(14px, 3vw, 32px);
  background: rgba(255,255,255,.03); position: relative;
}
.elevtv-logo { font-weight: 800; font-size: clamp(14px, 2vh, 22px); letter-spacing: .3px; }
.elevtv-clock { display: flex; flex-direction: column; line-height: 1.15; }
.elevtv-clock-time { font-size: clamp(16px, 3vh, 30px); font-weight: 800; }
.elevtv-clock-weekday { font-size: clamp(9px, 1.3vh, 13px); color: #cfcfcf; text-transform: capitalize; }
.elevtv-clock-date { font-size: clamp(9px, 1.3vh, 13px); color: #cfcfcf; }
.elevtv-weather { display: flex; flex-direction: column; line-height: 1.15; margin-left: auto; text-align: right; }
.elevtv-weather-temp { font-size: clamp(14px, 2.4vh, 24px); font-weight: 800; }
.elevtv-weather-cond { font-size: clamp(9px, 1.3vh, 13px); color: #cfcfcf; }
.elevtv-fullscreen-btn {
  background: rgba(255,255,255,.08); color: #cfcfcf; border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px; padding: 5px 10px; font-size: 11px; cursor: pointer;
}

.elevtv-stage { position: relative; background: #000; overflow: hidden; }
.elevtv-stage-empty { position: absolute; inset: 0; background: #0a0a0a; }
.elevtv-media { width: 100%; height: 100%; object-fit: contain; display: block; }

.elevtv-strip {
  display: flex; gap: clamp(6px, 1cqw, 14px); align-items: stretch;
  padding: clamp(6px, 1cqh, 14px) clamp(14px, 3cqw, 32px);
  background: rgba(255,255,255,.02);
}
.elevtv-strip-empty { padding: 0; }
.elevtv-tile {
  flex: 1; background: rgba(255,255,255,.06); border-radius: 10px;
  padding: clamp(6px, 1cqh, 12px) clamp(8px, 1.5cqw, 16px);
  font-size: clamp(10px, 1.5cqh, 15px); display: flex; align-items: center; gap: 6px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

.elevtv-connected { display: flex; flex-direction: column; overflow: hidden; }
.elevtv-section-title {
  font-size: clamp(10px, 1.4cqh, 14px); font-weight: 700; color: #cfcfcf;
  padding: clamp(4px, 0.8cqh, 8px) clamp(14px, 3cqw, 32px) 0;
}

.elevtv-footer { padding: clamp(8px, 1.2cqh, 16px) clamp(14px, 3cqw, 32px); background: rgba(255,255,255,.03); }
/* Emergência e assistência técnica lado a lado — MUITO mais barato em
   altura do que empilhado (importante numa caixa pequena, como a moldura
   da prévia do admin, onde a altura mínima em px dos dois botões some com
   boa parte do espaço se ficarem um em cima do outro). */
.elevtv-footer-buttons { display: flex; gap: clamp(6px, 1.5cqw, 14px); align-items: stretch; }
.elevtv-emergency-bar {
  flex: 1 1 0; min-width: 0; min-height: clamp(48px, 6cqh, 100px); border: none; border-radius: 12px;
  background: var(--danger); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 0 clamp(10px, 2.5cqw, 32px); font-weight: 800; letter-spacing: .2px;
  font-size: clamp(11px, 1.8cqh, 18px);
  animation: elevtv-pulse 2.4s infinite ease-in-out;
}
.elevtv-emergency-bar:disabled { opacity: .45; cursor: not-allowed; animation: none; }
/* Botão irmão do de emergência — assistência técnica do elevador. Mesmo
   tamanho/proporção do de emergência (só a cor distingue urgência) — a
   emergência continua sendo a única com o pulso de destaque. */
.elevtv-maintenance-bar {
  flex: 1 1 0; min-width: 0; min-height: clamp(48px, 6cqh, 100px); border: none; border-radius: 12px;
  background: yellow; color: #000; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0 clamp(10px, 2.5cqw, 32px); font-weight: 800; letter-spacing: .2px;
  font-size: clamp(11px, 1.8cqh, 18px);
}
.elevtv-maintenance-bar:disabled { opacity: .4; cursor: not-allowed; }
/* text-overflow:ellipsis não funciona direto num container flex com vários
   filhos (só trunca texto de UM box só) — por isso a truncagem vai no
   próprio texto do botão, não no botão inteiro. Sem isso, um rótulo comprido
   simplesmente vazava pra fora do botão (e da própria moldura da prévia,
   que só corta na borda externa da tela inteira, não em cada botão). */
.elevtv-bar-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.elevtv-bar-arrow { flex-shrink: 0; }
.elevtv-footer-note { color: #9a9990; font-size: clamp(9px, 1.2cqh, 12px); text-align: center; margin-top: 6px; }
@keyframes elevtv-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,59,48,.35); }
  50% { box-shadow: 0 0 0 10px rgba(255,59,48,0); }
}

@media (orientation: landscape) {
  .elevtv-screen {
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: 2fr 1fr;
  }
  .elevtv-topbar { grid-column: 2; grid-row: 1; }
  .elevtv-stage-hero { grid-column: 1; grid-row: 1 / span 3; }
  .elevtv-strip { grid-column: 2; grid-row: 2; flex-direction: column; }
  .elevtv-connected { grid-column: 2; grid-row: 3; }
  .elevtv-footer { grid-column: 1 / span 2; grid-row: 4; }
}