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

/* ============================================================================
   IDENTIDADE AURIA
   Preto quente + âmbar/laranja com brilho ("glow"), como a peça de marca:
   cabeçalho escuro com a logo em laranja, conteúdo em fundo creme, cartões
   brancos macios e destaques em laranja. Nomes antigos de variável (--green)
   mantidos pra não mexer nas telas que já usam.
   ========================================================================== */
:root {
  --brand-orange: #F7A00A;      /* laranja da logo */
  --brand-orange-deep: #EC7C0A; /* fim do degradê dos botões */
  --brand-amber-text: #B45F06;  /* laranja escuro pra TEXTO sobre fundo claro (contraste) */
  --brand-glow: rgba(247,160,10,.45);
  --night: #0C0B0A;             /* preto quente (cabeçalho, telas de chamada) */
  --night-2: #17130F;
  --cream: #FAF5EE;             /* fundo do app */
  --cream-2: #F3EADF;
  --line: #EDE3D6;
  --on-brand: #1B1307;          /* texto em cima do laranja */

  --green: #F29A0B;             /* (nome antigo) cor principal de UI — agora laranja Auria */
  --green-neon: #FFB534;        /* brilho nas telas escuras */
  --brand-blue: #F29A0B;        /* compat. */
  --brand-blue-dark: #B45F06;   /* compat. */
  --brand-orange-dark: #B45F06;
  --black: #000000;
  --dark-bg: #0F0D0B;           /* fundo das telas de chamada (visitante) */
  --light-bg: var(--cream);
  --card-white: #ffffff;
  --text-dark: #1A1714;
  --text-muted: #7A7067;
  --danger: #E5484D;
  --call-blue: #3b82f6;
  --radius: 18px;
  --shadow-soft: 0 1px 2px rgba(60,40,10,.05), 0 6px 20px rgba(60,40,10,.06);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { overflow-x: hidden; }
body { margin: 0; font-family: 'Plus Jakarta Sans', -apple-system, Roboto, Arial, sans-serif; overflow-x: hidden; background: var(--cream); color: var(--text-dark); }
/* 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(--cream); min-height: 100vh; padding-bottom: 150px; } /* espaço pra barra de baixo + selo Toque ai */

/* Cabeçalho escuro com brilho laranja embaixo — a "camada" da peça de marca */
.app-header {
  background: radial-gradient(120% 220% at 50% -60%, #3A2408 0%, var(--night) 55%);
  padding: calc(14px + env(safe-area-inset-top)) 20px 14px;
  display: flex; align-items: center;
  position: sticky; top: 0; z-index: 50;
}
.app-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--brand-orange) 30%, #FFC45A 50%, var(--brand-orange) 70%, transparent 100%);
  box-shadow: 0 0 14px 1px var(--brand-glow);
}
.app-header img { height: 34px; }

.app-body { max-width: 480px; margin: 0 auto; padding: 24px 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.025em; }
.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: linear-gradient(180deg, #FFB12A 0%, var(--brand-orange-deep) 100%); color: var(--on-brand); border: none; border-radius: 999px;
  padding: 9px 16px; font-size: 13px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(236,124,10,.22);
}
.pill-btn.outline { background: #fff; border: 1.5px solid #F2C27A; color: var(--brand-amber-text); box-shadow: none; }
.pill-btn.dark { background: var(--night); color: #FFC45A; box-shadow: none; }

/* 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: var(--radius); padding: 18px;
  margin-bottom: 14px; box-shadow: var(--shadow-soft);
  border: 1px solid var(--line); transition: border-color .15s ease, box-shadow .15s ease;
  position: relative; overflow: hidden;
}
/* Fio laranja à esquerda — assinatura visual dos cartões Auria */
.unit-card::before {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #FFC45A, var(--brand-orange-deep));
}
.unit-card.fulfill-active {
  border-color: var(--brand-orange); box-shadow: 0 0 0 4px rgba(247,160,10,.15), var(--shadow-soft);
}
.unit-card.fulfill-success {
  animation: fulfill-flash-green .7s ease;
}
@keyframes fulfill-flash-green {
  0% { border-color: var(--brand-orange); box-shadow: 0 0 0 6px rgba(247,160,10,.25); }
  100% { border-color: var(--line); box-shadow: var(--shadow-soft); }
}
.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; letter-spacing: -0.01em; }
.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: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.settings-item {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border-bottom: 1px solid #F3ECE2; 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: #D3C3AE; }
.settings-item.danger { color: var(--danger); }
.settings-item .ico {
  width: 34px; height: 34px; border-radius: 10px; background: #FFF4E2;
  display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 16px;
}

/* Barra inferior clara com o "+" em laranja brilhante no centro */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); padding: 10px 34px calc(16px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; z-index: 60;
}
.nav-circle {
  width: 48px; height: 48px; border-radius: 16px; background: #FFF4E2;
  display: flex; align-items: center; justify-content: center; color: #444; border: none; font-size: 19px;
}
.nav-fab {
  width: 64px; height: 64px; border-radius: 22px; background: linear-gradient(160deg, #FFB534 0%, var(--brand-orange-deep) 100%);
  display: flex; align-items: center; justify-content: center; color: var(--on-brand);
  font-size: 32px; font-weight: 500; border: 4px solid var(--cream);
  box-shadow: 0 8px 22px rgba(236,124,10,.45), 0 0 0 1px rgba(236,124,10,.2);
  margin-top: -38px; transform: rotate(0deg);
}

form.light input, form.light select, .app-shell input, .app-shell select {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid #E6DACB;
  background: #fff; color: var(--text-dark); margin-top: 6px; margin-bottom: 14px; font-size: 15px;
  font-family: inherit;
}
.app-shell input:focus, .app-shell select:focus { outline: none; border-color: var(--brand-orange); box-shadow: 0 0 0 3px rgba(247,160,10,.18); }
.app-shell label { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.app-shell .btn-primary, .btn-primary {
  background: linear-gradient(180deg, #FFB12A 0%, var(--brand-orange-deep) 100%); color: var(--on-brand); border: none; border-radius: 14px;
  padding: 15px; font-size: 15px; font-weight: 800; width: 100%; cursor: pointer; letter-spacing: .01em;
  box-shadow: 0 6px 18px rgba(236,124,10,.28);
}
.app-shell .btn-secondary, .btn-secondary {
  background: #fff; color: var(--text-dark); border: 1.5px solid #E6DACB; border-radius: 14px;
  padding: 15px; font-size: 15px; font-weight: 700; width: 100%; cursor: pointer; margin-top: 10px;
}
.app-shell .card-plain { background: #fff; border-radius: var(--radius); padding: 20px; margin-bottom: 16px; border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.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; }

/* ---------------- Início (hub) — saudação + atalhos, no estilo da peça ---------------- */
.au-hero {
  position: relative; overflow: hidden; border-radius: 22px; padding: 22px 20px 20px; margin-bottom: 18px; color: #fff;
  background: radial-gradient(140% 120% at 100% 0%, #4A2E0A 0%, #1A130C 45%, var(--night) 100%);
  box-shadow: 0 14px 30px rgba(20,12,4,.25);
}
.au-hero::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(247,160,10,.35) 0%, transparent 65%);
}
.au-hero-mark { position: absolute; right: 16px; bottom: 12px; width: 92px; opacity: .14; }
.au-hero-hello { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 0; position: relative; }
.au-hero-sub { color: #E9D8C2; font-size: 13.5px; margin: 4px 0 16px; position: relative; }
.au-hero-cta {
  position: relative; display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;
  background: linear-gradient(180deg, #FFB12A 0%, var(--brand-orange-deep) 100%); color: var(--on-brand);
  font-weight: 800; font-size: 14px; padding: 11px 16px; border-radius: 12px; font-family: inherit;
  box-shadow: 0 0 18px rgba(247,160,10,.35);
}
.au-hero-stats { display: flex; gap: 18px; margin-bottom: 16px; position: relative; }
.au-hero-stat b { display: block; font-size: 22px; font-weight: 800; color: #FFC45A; line-height: 1.1; }
.au-hero-stat span { font-size: 11.5px; color: #CDBBA4; }
.au-section-title { font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; margin: 4px 2px 10px; }
.au-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.au-tiles.two { grid-template-columns: repeat(2, 1fr); }
.au-tiles.two .au-tile { flex-direction: row; justify-content: flex-start; padding: 16px 14px; gap: 12px; font-size: 13.5px; }
/* Login: faixa de boas-vindas da marca acima do formulário */
.au-login-hero { margin: -4px 0 18px; }
.au-login-hero .au-hero-hello { font-size: 24px; line-height: 1.2; }
.au-login-hero .au-hero-hello em { font-style: normal; color: #FFB534; }
.au-tile {
  background: #FFFDFA; border: 1px solid var(--line); border-radius: 18px; padding: 16px 8px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 9px; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--text-dark); box-shadow: var(--shadow-soft); position: relative;
}
.au-tile svg { width: 28px; height: 28px; stroke: var(--brand-orange-deep); }
.au-tile:active { transform: scale(.97); }
.au-tile .au-badge {
  position: absolute; top: 8px; right: 10px; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
  background: var(--brand-orange); color: var(--on-brand); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}

/* ============ TEMA ESCURO — visitante / tela de chamada ============ */
.call-shell {
  background: radial-gradient(120% 70% at 50% 0%, #2A1B08 0%, var(--dark-bg) 60%); min-height: 100vh; color: #fff;
  display: flex; flex-direction: column; align-items: center;
}
.call-logo { margin: 34px 0 10px; height: 44px; filter: drop-shadow(0 0 14px rgba(247,160,10,.35)); }
.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: 20px; 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; }

/* Lista de unidades que o visitante vê ao escanear — "barras" escuras com
   borda âmbar acesa, como os blocos da peça de marca */
.directory-row {
  background: linear-gradient(180deg, #1F1912 0%, #15110D 100%); border: 1px solid rgba(247,160,10,.35);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.directory-row .name { color: #fff; font-weight: 700; font-size: 15px; }
.directory-row .call-ico {
  width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(180deg, #FFB12A, var(--brand-orange-deep));
  display: flex; align-items: center; justify-content: center; color: var(--on-brand); font-size: 16px; border: none;
  box-shadow: 0 0 14px rgba(247,160,10,.4);
}

.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: #5a4a36;
  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: #5a4a36; 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: #A8977F; 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 var(--brand-orange);
  box-shadow: 0 0 30px rgba(247,160,10,.35);
  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: #8A7B68; 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, var(--brand-orange-deep), #FFC45A, var(--brand-orange-deep));
  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; }
}

/* Botões vermelhos (excluir, emergência) definidos inline: texto branco */
.pill-btn[style*="background:var(--danger)"], .pill-btn[style*="background:#ff3b30"],
.btn-primary[style*="background:var(--danger)"], .btn-primary[style*="background:#ff3b30"] { color: #fff; box-shadow: none; }
.pill-btn[style*="background:transparent"], .pill-btn[style*="background:#fff"] { box-shadow: none; }

/* ---------------- Assistente "Prepare seu celular" (primeiro acesso) ---------------- */
.cs-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(120% 80% at 50% 0%, rgba(58,36,8,.85) 0%, rgba(12,11,10,.92) 60%); padding: 16px; }
@media (min-width: 560px) { .cs-overlay { align-items: center; } }
.cs-card { width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; background: #fff; border-radius: 24px; padding: 18px 20px 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(247,160,10,.25); font-family: inherit; color: var(--text-dark); }
.cs-progress { display: flex; gap: 6px; margin-bottom: 16px; }
.cs-progress span { flex: 1; height: 4px; border-radius: 2px; background: #EFE5D8; }
.cs-progress span.on { background: linear-gradient(90deg, #FFB12A, var(--brand-orange-deep)); }
.cs-icon { width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 28px;
  background: #FFF4E2; box-shadow: inset 0 0 0 1px #F6DDB4; margin-bottom: 12px; }
.cs-body h2 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; line-height: 1.25; }
.cs-body p { font-size: 14.5px; line-height: 1.5; color: #4A433C; margin: 0 0 12px; }
.cs-small { font-size: 12.5px !important; color: var(--text-muted) !important; }
.cs-steps { margin: 4px 0 12px; padding-left: 20px; font-size: 14px; line-height: 1.5; color: #2A251F; }
.cs-steps li { margin-bottom: 6px; }
.cs-steps li::marker { color: var(--brand-orange-deep); font-weight: 800; }
.cs-ok { background: #EAF8EE; color: #17663A; border-radius: 12px; padding: 12px 14px; font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.cs-warn { background: #FFF4E2; color: #8A4A05; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45; margin: 8px 0 10px; }
.cs-confirm { display: flex; align-items: center; gap: 10px; background: #FAF5EE; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; font-size: 14px; font-weight: 700; color: var(--text-dark); cursor: pointer; margin-top: 6px; }
.cs-confirm input { width: 20px; height: 20px; accent-color: var(--brand-orange-deep); margin: 0; }
.cs-summary { background: #FAF5EE; border-radius: 14px; padding: 12px 14px; font-size: 14.5px; font-weight: 600; line-height: 1.9; }
.cs-actions { display: flex; gap: 10px; margin-top: 16px; }
.cs-actions .btn-primary, .cs-actions .btn-secondary { margin-top: 0; }
.cs-actions .btn-secondary { flex: 0 0 38%; }
.cs-host { margin: 0 0 10px !important; }
.cs-skip { display: block; margin: 10px auto 2px; background: none; border: none; color: var(--text-muted); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }

/* Cadastro pelo CPF (titular / moradores) */
.cs-body .pr-label { display: block; font-size: 12.5px; font-weight: 700; color: #3A2E1E; margin: 10px 0 6px; }
.cs-body input:not([type=checkbox]) { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid #E6DACB; background: #fff;
  color: var(--text-dark); font-size: 15px; font-family: inherit; margin: 0; box-sizing: border-box; }
.cs-body input:not([type=checkbox]):focus { outline: none; border-color: var(--brand-orange); box-shadow: 0 0 0 3px rgba(247,160,10,.18); }
.cs-body .pr-actions .btn-secondary, .cs-body .pr-actions .btn-primary { flex: 1 1 0; white-space: nowrap; font-size: 14.5px; }
.cs-body .pr-how { font-size: 13px; font-weight: 600; line-height: 1.45; margin-top: 14px; }