/* ============================================================================
   TELAS INTERNAS DO VENDA ONLINE - topo azul + conteudo claro

   Servido por ServerModule.CustomFiles: editar e dar F5 ja vale.
   Classes aplicadas pelo telas-cajueiro.js.

   Por que aqui NAO tem o cenario completo do login: estas sao telas de ler e
   digitar (CPF, e-mail, codigo PIX, valores). Bolhas subindo atras de um campo
   atrapalham a leitura, a animacao continua gasta bateria numa tela onde a
   pessoa fica parada, e texto claro sobre azul perde contraste em dado
   financeiro. O tema entra no topo; o conteudo fica claro.
   ========================================================================== */

@keyframes cjOndaT { to { transform: translateX(-50%); } }

/* ---------- barra do topo ---------- */
.cj-vo-barra {
  background: linear-gradient(135deg, #01579b, #0288d1 55%, #26c6da) !important;
  position: relative;
  overflow: hidden;
}
/* o TUnimPanel pinta o clWhite do DFM nas camadas internas */
.cj-vo-barra > .x-body-wrap-el,
.cj-vo-barra > .x-body-wrap-el > .x-body-el,
.cj-vo-barra > .x-body-el,
.cj-vo-barra .x-body-wrap-el > .x-body-el { background: transparent !important; }

.cj-vo-barra-ondas {
  position: absolute; bottom: -6px; left: 0;
  width: 200%; height: 34px; display: flex;
  opacity: .45; pointer-events: none;
  animation: cjOndaT 9s linear infinite;
}
.cj-vo-barra-ondas svg { width: 50%; height: 100%; flex-shrink: 0; }

/* mascote + titulo dentro da barra */
.cj-vo-barra-tit {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 9px;
  pointer-events: none; z-index: 2;
}
.cj-vo-barra-tit img {
  width: 38px; height: auto;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
}
.cj-vo-barra-tit span {
  color: #ffffff; font-weight: 800; font-size: 16px; letter-spacing: .4px;
  text-shadow: 0 1px 6px rgba(1,40,80,.5);
}

/* rotulos que ficam sobre a barra azul precisam clarear */
.cj-vo-barra .x-innerhtml { color: #ffffff !important; }

/* ---------- corpo claro ---------- */
.cj-vo-corpo {
  background: #eef4f8 !important;
}
.cj-vo-corpo > .x-body-wrap-el,
.cj-vo-corpo > .x-body-wrap-el > .x-body-el,
.cj-vo-corpo > .x-body-el { background: transparent !important; }

/* ---------- cartoes de conteudo ---------- */
.cj-vo-bloco {
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid #e3edf4 !important;
  box-shadow: 0 4px 14px rgba(1, 40, 80, .10) !important;
}
.cj-vo-bloco > .x-body-wrap-el,
.cj-vo-bloco > .x-body-wrap-el > .x-body-el,
.cj-vo-bloco > .x-body-el { background: transparent !important; }

/* ---------- campos: mesmo desenho do login, em versao clara ---------- */
.cj-vo-bloco .x-field .x-input-el,
.cj-vo-corpo .x-field .x-input-el {
  height: 46px !important;
  border-radius: 14px !important;
  border: 1.5px solid #cfe3f5 !important;
  background: #f7fbfe !important;
  color: #26404f !important;
  font-size: 15px !important;
  padding: 0 15px !important;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.cj-vo-bloco .x-field .x-input-el::placeholder,
.cj-vo-corpo .x-field .x-input-el::placeholder { color: #90a9bb !important; opacity: 1; }
.cj-vo-bloco .x-field .x-input-el:focus,
.cj-vo-corpo .x-field .x-input-el:focus {
  border-color: #0288d1 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(2, 136, 209, .16) !important;
}

/* A borda arredondada acima e desenhada no input. O Ext desenha OUTRA, quadrada,
   no invólucro do campo - e as duas apareciam juntas. Esta regra apaga a do
   Ext; no login ela ja existia, e por isso so as telas internas mostravam a
   borda dupla. */
.cj-vo-bloco .x-field .x-input-wrap-el,
.cj-vo-bloco .x-field .x-body-el,
.cj-vo-corpo .x-field .x-input-wrap-el,
.cj-vo-corpo .x-field .x-body-el {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ancora do olho de ver a senha (o icone e posicionado dentro do campo) */
.cj-vo-bloco .x-field,
.cj-vo-corpo .x-field { position: relative; }

/* ---------- bloco fluido ----------
   O Delphi desenha os campos numa grade fixa de 400px (esquerda 20, largura
   360). Em tela estreita o Ext encolhe o BLOCO, mas nao os campos: eles ficam
   para fora. Tentar corrigir pelo JS nao para de pe - o Ext reescreve largura
   e posicao na proxima passada de layout.
   Em CSS resolve: declaracao com !important vence o estilo inline dele. Os
   filhos passam a acompanhar a largura real do bloco, em qualquer tela. */
.cj-vo-fluido {
  width: calc(100% - 20px) !important;
  left: 10px !important;
  box-sizing: border-box;
}
.cj-vo-fluido .x-field,
.cj-vo-fluido .x-button {
  left: 5% !important;
  width: 90% !important;
  box-sizing: border-box;
}
.cj-vo-fluido .x-label {
  left: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* foto do perfil: redonda, com anel claro e sombra suave */
.cj-vo-fluido .cj-foto {
  left: 50% !important;
  margin-left: -50px;
  width: 100px !important;
  box-sizing: border-box;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 14px rgba(1, 40, 80, .22);
  background: #eef4f8;
}
/* o uniGUI envolve a imagem num div que cresce com a foto (211px de altura
   dentro de um circulo de 100), e o excedente virava recorte torto - os dois
   niveis precisam caber no circulo */
.cj-vo-fluido .cj-foto .x-innerhtml {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.cj-vo-fluido .cj-foto img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  /* Center=True do TUnimImage emite hspace/vspace=50 no <img> */
  margin: 0 !important;
  display: block;
}

/* dois campos na mesma linha (ex.: nascimento e sexo). Aplicado por
   LayoutConfig.Cls no DFM; precisa vir DEPOIS da regra de 90% acima para
   ganhar dela na ordem da folha. */
.cj-vo-fluido .cj-meia-esq { left: 5%  !important; width: 43% !important; }
.cj-vo-fluido .cj-meia-dir { left: 52% !important; width: 43% !important; }

/* os checks de consentimento: texto que quebra em duas linhas sem cortar */
.cj-vo-fluido .x-checkboxfield,
.cj-vo-fluido .x-field.cj-check {
  left: 5% !important;
  width: 90% !important;
}
/* O uniGUI reserva 120px para o rotulo do check e deixa 198px para o corpo -
   sendo que no corpo so existe a caixinha de 22px. O texto entao quebrava em
   tres linhas e um check invadia o outro. Aqui as proporcoes se invertem: o
   texto fica com tudo, menos o espaco da caixa. */
.cj-vo-fluido .cj-check .x-label-el {
  width: calc(100% - 44px) !important;
  white-space: normal !important;
  line-height: 1.3;
  font-size: 13.5px;
}
.cj-vo-fluido .cj-check .x-body-wrap-el,
.cj-vo-fluido .cj-check .x-body-el {
  width: 34px !important;
  min-width: 34px !important;
  flex: 0 0 34px !important;
}

/* ---------- botao principal: mesmo do login ---------- */
.cj-vo-btn {
  height: 48px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #1565c0, #0a337a) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  box-shadow: 0 8px 20px rgba(1, 30, 70, .34), inset 0 1px 0 rgba(255,255,255,.20);
  transition: transform .12s ease, filter .2s ease;
}
.cj-vo-btn .x-text-el,
.cj-vo-btn .x-inner-el,
.cj-vo-btn .x-innerhtml {
  color: #ffffff !important; font-weight: 800; font-size: 15.5px; letter-spacing: .8px;
}
.cj-vo-btn .x-inner-el,
.cj-vo-btn .x-button-el,
.cj-vo-btn .x-body-el { background: transparent !important; border: 0 !important; }
.cj-vo-btn:hover  { filter: brightness(1.10); }
.cj-vo-btn:active { transform: scale(.98); }

/* variante secundaria (ciano) para acoes alternativas, ex.: Cartao */
.cj-vo-btn.alt { background: linear-gradient(180deg, #26c6da, #0288d1) !important; }

/* ---------- titulos de secao ---------- */
.cj-vo-secao, .cj-vo-secao .x-innerhtml {
  color: #0d3c61 !important;
  font-weight: 700 !important;
}

/* ============================================================================
   TELA DE VENDA (Mainm) - menu lateral e rodape fixo
   ========================================================================== */

/* ---------- menu lateral ---------- */
.cj-vo-dr-ov {
  position: fixed; inset: 0; background: rgba(2, 20, 45, .52);
  z-index: 9998; opacity: 0; transition: opacity .3s;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.cj-vo-dr-ov.on { opacity: 1; }

.cj-vo-dr {
  position: fixed; top: 0; left: -300px; width: 290px; height: 100%;
  background: #ffffff; z-index: 9999;
  transition: left .3s cubic-bezier(.2,.8,.3,1);
  box-shadow: 6px 0 24px rgba(1, 30, 70, .35);
  display: flex; flex-direction: column;
  font-family: 'Segoe UI', Arial, sans-serif;
}
.cj-vo-dr.on { left: 0; }

.cj-vo-dr-top {
  background: linear-gradient(135deg, #01579b, #0288d1 60%, #26c6da);
  padding: 22px 18px 20px; display: flex; align-items: center; gap: 12px;
}
.cj-vo-dr-top img { width: 52px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.cj-vo-dr-top b { display: block; color: #fff; font-size: 16px; font-weight: 800;
                  text-shadow: 0 1px 6px rgba(1,40,80,.45); }
.cj-vo-dr-top span { display: block; color: #d6f0fb; font-size: 11.5px; margin-top: 2px; }

.cj-vo-dr-itens { flex: 1 1 auto; padding: 12px 10px; overflow-y: auto; }
.cj-vo-dr-it {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px; border-radius: 14px; cursor: pointer;
  transition: background .16s ease, transform .12s ease;
}
.cj-vo-dr-it:hover  { background: #f1f7fb; }
.cj-vo-dr-it:active { transform: scale(.98); }
.cj-vo-dr-it i {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 19px;
}
.cj-vo-dr-it i.i1 { background: #e3f2fd; }
.cj-vo-dr-it i.i2 { background: #e0f7fa; }
.cj-vo-dr-it i.i3 { background: #ffebee; }
.cj-vo-dr-it div { flex: 1 1 auto; min-width: 0; }
.cj-vo-dr-it b { display: block; font-size: 14.5px; color: #14364f; font-weight: 700; }
.cj-vo-dr-it span { display: block; font-size: 11px; color: #8ba2b3; margin-top: 1px; }
.cj-vo-dr-it u { text-decoration: none; color: #c3d3de; font-size: 20px; }
.cj-vo-dr-it.sair b { color: #c62828; }

.cj-vo-dr-rod { border-top: 1px solid #eef3f7; padding: 10px; }
.cj-vo-dr-ver { text-align: center; font-size: 10.5px; color: #b0c2ce; padding: 8px 0 2px; }

/* ---------- rodape fixo com o total ---------- */
.cj-vo-rod {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
  background: #ffffff;
  border-top: 1px solid #e3edf4;
  box-shadow: 0 -6px 20px rgba(1, 40, 80, .16);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  transform: translateY(130%);
  transition: transform .32s cubic-bezier(.2,.8,.3,1);
  font-family: 'Segoe UI', Arial, sans-serif;
}
.cj-vo-rod.on { transform: none; }
.cj-vo-rod-inf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.cj-vo-rod-inf span { font-size: 12.5px; color: #607d8b; }
.cj-vo-rod-inf b { font-size: 18px; color: #0d3c61; font-weight: 800; }
.cj-vo-rod-btn {
  width: 100%; height: 46px; border: none; border-radius: 16px;
  background: linear-gradient(180deg, #1565c0, #0a337a);
  color: #fff; font-family: inherit; font-weight: 800; font-size: 14.5px; letter-spacing: .8px;
  box-shadow: 0 6px 18px rgba(1, 30, 70, .34);
  cursor: pointer; transition: transform .12s ease, filter .2s ease;
}
.cj-vo-rod-btn:hover  { filter: brightness(1.10); }
.cj-vo-rod-btn:active { transform: scale(.98); }

/* ---------- lista de ingressos (Mainm) ---------- */
.cj-vo-lista {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #eef4f8;
  width: 100%; height: 100%;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  /* o rodape fixo do total cobre ~90px: sem esta folga o ultimo
     ingresso ficaria escondido atras dele */
  padding: 10px 10px 110px;
}
.cj-ing {
  background: #fff; border-radius: 16px; padding: 13px 15px; margin-bottom: 11px;
  border: 1px solid #e3edf4; box-shadow: 0 4px 14px rgba(1, 40, 80, .10);
  display: flex; gap: 12px;
  transition: border-color .2s, box-shadow .2s;
}
/* destaque de quem ja tem quantidade escolhida */
.cj-ing.sel { border-color: #4dd0e1; box-shadow: 0 6px 18px rgba(2, 136, 209, .20); }

.cj-ing-esq { flex: 1; min-width: 0; }
.cj-ing-tit { font-size: 16px; font-weight: 700; color: #14364f; }
.cj-ing-desc { color: #8ba2b3; font-size: 13px; margin-top: 4px; overflow: hidden; max-height: 38px; }
.cj-ing-mais { display: inline-block; margin-top: 6px; color: #0288d1;
               font-size: 13px; font-weight: 700; text-decoration: none; }

.cj-ing-dir { text-align: right; flex-shrink: 0; }
.cj-ing-preco { font-size: 18px; font-weight: 800; color: #0d3c61; white-space: nowrap; }
.cj-ing-parc { display: inline-block; background: #e8f0fe; color: #1565c0; font-size: 11px;
               padding: 3px 8px; border-radius: 12px; margin-top: 4px; white-space: nowrap; }

.cj-ing-step { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.cj-ing-b {
  width: 36px; height: 36px; border-radius: 12px;
  background: linear-gradient(180deg, #1565c0, #0a337a); color: #fff;
  font-size: 21px; line-height: 36px; text-align: center; cursor: pointer;
  box-shadow: 0 3px 9px rgba(1, 30, 70, .28);
  transition: transform .12s ease, filter .2s ease; user-select: none;
}
.cj-ing-b:active { transform: scale(.92); }
.cj-ing-b:hover  { filter: brightness(1.12); }
.cj-ing-q { min-width: 24px; text-align: center; font-size: 18px; font-weight: 800; color: #0d3c61; }

/* ---------- calendario compacto em cartao ---------- */
.cj-vo-cal {
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid #e3edf4 !important;
  box-shadow: 0 4px 14px rgba(1, 40, 80, .10) !important;
  margin: 8px 10px !important;
  overflow: hidden;
}
.cj-vo-cal > .x-body-wrap-el,
.cj-vo-cal > .x-body-wrap-el > .x-body-el,
.cj-vo-cal > .x-body-el { background: transparent !important; }
/* celulas menores: o calendario precisa caber junto com a lista */
.cj-vo-cal .x-calendar-weeks-cell-inner { min-height: 30px !important; }
.cj-vo-cal .x-calendar-weeks-day-text { font-size: 14px !important; }

/* a barra da tela principal tem o botao do menu na esquerda */
.cj-vo-barra.com-menu .cj-vo-barra-tit { left: 62px; }

/* faixa de mensagem logo abaixo da barra */
.cj-vo-msg {
  background: #dff1fb !important;
}
.cj-vo-msg > .x-body-wrap-el,
.cj-vo-msg > .x-body-wrap-el > .x-body-el,
.cj-vo-msg > .x-body-el { background: transparent !important; }
.cj-vo-msg .x-innerhtml { color: #0d3c61 !important; font-size: 12px !important; }

/* botao do menu (hamburguer) sobre o azul */
.cj-vo-barra .x-button .x-text-el,
.cj-vo-barra .x-button .x-inner-el { color: #ffffff !important; }

/* ---------- calendario compacto (depois de escolher a data) ----------
   Nao basta baixar a altura do painel: o Ext mantem o tamanho das linhas por
   dentro e o mes fica cortado. Encolhemos cada parte para o conjunto caber:
   38 (barra do mes) + 22 (dias da semana) + 6x26 (linhas) + folga ~= 236px. */
.cj-vo-cal.compacto { height: 236px !important; min-height: 0 !important; }

.cj-vo-cal.compacto .x-toolbar,
.cj-vo-cal.compacto .x-calendar-panel-header { height: 38px !important; min-height: 38px !important; }
.cj-vo-cal.compacto .x-calendar-panel-title,
.cj-vo-cal.compacto .x-title-text-el { font-size: 14px !important; }

.cj-vo-cal.compacto .x-calendar-weeksheader { height: 22px !important; min-height: 22px !important; }
.cj-vo-cal.compacto .x-calendar-weeksheader * { font-size: 10.5px !important; }

.cj-vo-cal.compacto .x-calendar-weeks-cell-inner { min-height: 26px !important; height: 26px !important; }
.cj-vo-cal.compacto .x-calendar-weeks-day-text { font-size: 12.5px !important; }

.cj-vo-cal.compacto .x-calendar-multiview,
.cj-vo-cal.compacto .x-calendar-monthview,
.cj-vo-cal.compacto .x-calendar-month { height: auto !important; min-height: 0 !important; }

/* faixa com a data escolhida */
.cj-vo-data {
  background: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid #e3edf4 !important;
  box-shadow: 0 3px 10px rgba(1, 40, 80, .08) !important;
  margin: 8px 10px 0 !important;
}
.cj-vo-data > .x-body-wrap-el,
.cj-vo-data > .x-body-wrap-el > .x-body-el,
.cj-vo-data > .x-body-el { background: transparent !important; }
.cj-vo-data .x-innerhtml { color: #0d3c61 !important; font-size: 13.5px !important; }

/* ---------- faixa da data escolhida (no lugar do calendario) ---------- */
.cj-vo-dt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px;
  font-family: 'Segoe UI', Arial, sans-serif;
}
.cj-vo-dt-txt { font-size: 14px; color: #37474f; text-transform: capitalize; }
.cj-vo-dt-txt b { color: #0d3c61; font-weight: 700; }
.cj-vo-dt-btn {
  flex-shrink: 0; cursor: pointer; user-select: none;
  background: #e3f2fd; color: #1565c0;
  border: 1px solid #bbdefb; border-radius: 20px;
  padding: 5px 13px; font-size: 12.5px; font-weight: 700;
  transition: background .15s ease, transform .12s ease;
}
.cj-vo-dt-btn:hover  { background: #d0e8fb; }
.cj-vo-dt-btn:active { transform: scale(.96); }

/* ---------- icone de acao no canto direito da barra ---------- */
.cj-vo-barra-acao {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 12px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .32);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px; cursor: pointer; z-index: 3;
  transition: background .15s ease, transform .12s ease;
}
.cj-vo-barra-acao:hover  { background: rgba(255, 255, 255, .30); }
.cj-vo-barra-acao:active { transform: translateY(-50%) scale(.92); }

/* ---------- mensagem do topo mais presente ---------- */
.cj-vo-msg .x-innerhtml {
  color: #0d3c61 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
  text-transform: none;
}

/* ---------- respiro entre a faixa da data e os ingressos ---------- */
.cj-vo-lista { padding-top: 16px !important; }

/* ---------- cartao do ingresso: mais bonito e no tema ----------
   Faixa azul na lateral esquerda, fundo com leve degrade e a coluna do preco
   destacada num bloco proprio. Escolhido = borda e faixa em ciano. */
.cj-ing {
  position: relative;
  background: linear-gradient(180deg, #ffffff, #f7fbfe) !important;
  border-radius: 18px;
  padding: 15px 16px 15px 20px;
  margin-bottom: 12px;
  border: 1px solid #dfeaf3;
  box-shadow: 0 5px 16px rgba(1, 40, 80, .09);
  display: flex; gap: 12px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.cj-ing::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, #4fc3f7, #0288d1);
}
.cj-ing.sel { border-color: #4dd0e1; box-shadow: 0 8px 22px rgba(2, 136, 209, .22); }
.cj-ing.sel::before { background: linear-gradient(180deg, #26c6da, #00897b); }

.cj-ing-tit { font-size: 16.5px; font-weight: 800; color: #10344e; letter-spacing: .2px; }
.cj-ing-desc { color: #8ba2b3; font-size: 12.5px; margin-top: 5px; line-height: 1.4;
               overflow: hidden; max-height: 38px; }
.cj-ing-mais { display: inline-block; margin-top: 7px; color: #0288d1;
               font-size: 12.5px; font-weight: 700; text-decoration: none; }

.cj-ing-dir {
  text-align: center; flex-shrink: 0; align-self: flex-start;
  background: #f2f8fd; border: 1px solid #e1eef8; border-radius: 14px;
  padding: 10px 12px;
}
.cj-ing-preco { font-size: 19px; font-weight: 800; color: #0d3c61; white-space: nowrap; }
.cj-ing-parc { display: block; background: transparent; color: #6b8ca3;
               font-size: 10.5px; padding: 2px 0 0; border-radius: 0; white-space: nowrap; }
.cj-ing-step { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 11px; }
.cj-ing-q { min-width: 26px; text-align: center; font-size: 19px; font-weight: 800; color: #0d3c61; }

/* fundo da lista no tom do tema */
.cj-vo-lista { background: #e9f2f8 !important; }

/* =========================== AJUSTES DA LISTA =========================== */

/* a lista nao pinta fundo proprio: quem da a cor e a tela, e so o card
   do ingresso fica branco */
.cj-vo-lista {
  background: transparent !important;
  padding-top: 6px !important;
}
/* fundo da tela de venda, no tom do tema */
.cj-vo-tela, .cj-vo-tela > .x-body-el { background: #e9f2f8 !important; }

/* mais respiro entre a faixa da data e o primeiro ingresso */
.cj-vo-data { margin-bottom: 14px !important; }

/* ---------- calendario: o corte da direita ----------
   O painel ganhou margem lateral, mas a tabela do Ext manteve a largura
   calculada antes disso e vazava para fora do cartao (que tem overflow
   hidden). Fixando a tabela em 100% com layout fixo, as colunas se
   redistribuem dentro da largura nova. */
.cj-vo-cal table,
.cj-vo-cal .x-calendar-weeks,
.cj-vo-cal .x-calendar-weeksheader,
.cj-vo-cal .x-calendar-monthview,
.cj-vo-cal .x-calendar-month {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.cj-vo-cal table { table-layout: fixed !important; }
.cj-vo-cal .x-calendar-weeks-cell,
.cj-vo-cal .x-calendar-weeks-cell-inner { max-width: none !important; }

/* ======================= CORTE NA DIREITA =======================
   O uniGUI da largura cheia ao componente. Uma margem lateral empurra o
   bloco para fora (left 10 + width 375 = right 385 numa tela de 375), e o
   que passa da borda some. A largura precisa descontar a margem. */
.cj-vo-cal,
.cj-vo-data,
.cj-vo-bloco {
  box-sizing: border-box !important;
  width: calc(100% - 20px) !important;
  max-width: calc(100% - 20px) !important;
  margin-left: 10px !important;
  margin-right: 10px !important;
}

/* respiro maior entre a data escolhida e o primeiro ingresso */
.cj-vo-data { margin-top: 8px !important; margin-bottom: 22px !important; }
.cj-vo-lista { padding-top: 10px !important; }

/* a lista ocupa a largura toda: quem afasta das bordas e o padding dela */
.cj-vo-lista { padding-left: 10px !important; padding-right: 10px !important; }
.cj-ing { box-sizing: border-box; width: 100%; }

/* ---------- fundo da tela no azul do tema ----------
   Os cartoes e o calendario ficam brancos por cima; o texto solto que sobra
   sobre o azul (legendas do calendario) precisa clarear junto. */
.cj-vo-tela,
.cj-vo-tela > .x-body-el,
.cj-vo-tela > .x-body-wrap-el,
.cj-vo-tela > .x-body-wrap-el > .x-body-el {
  background: linear-gradient(160deg, #01579b 0%, #0288d1 55%, #26c6da 100%) !important;
}
.cj-vo-cal, .cj-vo-cal.compacto { background: #ffffff !important; }
.cj-vo-data { background: #ffffff !important; }

/* ---------- faixa "Selecione a data de sua visita" ----------
   Sem fundo proprio: deixa o azul da tela passar, com o texto em branco. */
.cj-vo-msg,
.cj-vo-msg > .x-body-wrap-el,
.cj-vo-msg > .x-body-wrap-el > .x-body-el,
.cj-vo-msg > .x-body-el { background: transparent !important; }
.cj-vo-msg .x-innerhtml {
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: .4px;
  text-shadow: 0 1px 6px rgba(1, 40, 80, .45);
}

/* varios icones na barra: empilham da direita para a esquerda */
.cj-vo-barra-acao ~ .cj-vo-barra-acao { right: 66px; }
.cj-vo-barra-acao ~ .cj-vo-barra-acao ~ .cj-vo-barra-acao { right: 120px; }

/* ---------- faixa "Selecione a data" um pouco mais abaixo ---------- */
.cj-vo-msg .x-innerhtml { padding-top: 8px !important; display: block; }

/* ---------- PIX / Cartao como botoes azuis ---------- */
.cj-vo-opc {
  background: linear-gradient(180deg, #1565c0, #0a337a) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 6px 16px rgba(1, 30, 70, .30);
  cursor: pointer;
  transition: filter .2s ease, transform .12s ease, box-shadow .2s ease;
}
.cj-vo-opc > .x-body-wrap-el,
.cj-vo-opc > .x-body-wrap-el > .x-body-el,
.cj-vo-opc > .x-body-el { background: transparent !important; }
.cj-vo-opc .x-innerhtml { color: #ffffff !important; font-weight: 700 !important; }
.cj-vo-opc:hover  { filter: brightness(1.10); }
.cj-vo-opc:active { transform: scale(.98); }

/* opcao escolhida: ciano e um pouco maior */
.cj-vo-opc.sel {
  background: linear-gradient(180deg, #26c6da, #0288d1) !important;
  border-color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(2, 136, 209, .40);
}

/* ---------- toast do tema (independe do form ativo) ---------- */
.cj-vo-toast {
  position: fixed; left: 12px; right: 12px; top: 12px; z-index: 100001;
  background: #0d47a1; color: #fff;
  border-radius: 14px; padding: 12px 16px;
  box-shadow: 0 10px 28px rgba(1, 30, 70, .40);
  font-family: 'Segoe UI', Arial, sans-serif;
  transform: translateY(-140%); opacity: 0;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), opacity .3s ease;
}
.cj-vo-toast.on { transform: none; opacity: 1; }
.cj-vo-toast b { display: block; font-size: 14px; font-weight: 800; }
.cj-vo-toast span { display: block; font-size: 12.5px; margin-top: 3px; opacity: .92; line-height: 1.35; }
.cj-vo-toast.ok   { background: #1f9d55; }
.cj-vo-toast.erro { background: #c62828; }
.cj-vo-toast.aviso{ background: #ef6c00; }

/* ---------- toast de "aguarde" ----------
   O tipo 'info' caia no azul escuro padrao e sumia sobre o fundo azul do
   login. Aqui ele vira cartao branco com spinner: impossivel de nao ver. */
@keyframes cjGira { to { transform: rotate(360deg); } }

.cj-vo-toast.info {
  background: #ffffff;
  color: #0d3c61;
  border-left: 5px solid #0288d1;
  box-shadow: 0 12px 32px rgba(1, 30, 70, .45);
  padding-left: 46px;
}
.cj-vo-toast.info::before {
  content: '';
  position: absolute; left: 16px; top: 50%; margin-top: -9px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid #cfe3f5; border-top-color: #0288d1;
  animation: cjGira .8s linear infinite;
}
.cj-vo-toast.info b { color: #0d3c61; }
.cj-vo-toast.info span { color: #5b7a90; opacity: 1; }

/* painel que rola quando o cartao nao cabe na altura da tela (iPhone SE).
   A classe entra e sai pelo cjVoAjustaBloco, conforme a medida real. */
/* seletor repetido de proposito: o Ext marca o painel com
   x-overflow-y-hidden (tambem !important) e so a especificidade maior vence */
.cj-vo-rola.cj-vo-rola.cj-vo-rola {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================================
   AJUSTES DE 01/09
   ========================================================================== */

/* ---------- icones de acao da barra ----------
   O quadro volta ao tamanho original (38px). O que faltava nao era tamanho e
   sim peso: o icone agora e negrito, com fundo e borda de mais contraste. */
.cj-vo-barra-acao {
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1;
  background: rgba(255, 255, 255, .26) !important;
  border: 1.5px solid rgba(255, 255, 255, .55) !important;
  box-shadow: 0 3px 10px rgba(1, 30, 70, .25);
  text-shadow: 0 1px 3px rgba(1, 30, 70, .35);
  -webkit-text-stroke: 0.6px currentColor;
}

/* ---------- a faixa "Selecione a data" nao pode ficar por baixo ----------
   O cartao do calendario tem z-index 16 e cobria a faixa quando o Ext
   recalculava a altura da tela. */
.cj-vo-msg { z-index: 22 !important; }

/* ---------- balao de fala do mascote ---------- */
.cj-vo-mascote { overflow: visible !important; }
.cj-vo-balao {
  position: absolute;
  left: 10px;
  top: 4px;
  width: 50%;
  max-width: 200px;
  background: #ffffff;
  color: #0d3c61;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  padding: 11px 13px;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(1, 40, 80, .22);
  opacity: 0;
  transform: translateY(6px) scale(.96);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
  z-index: 5;
}
.cj-vo-balao.on { opacity: 1; transform: translateY(0) scale(1); }
/* rabinho apontando para a boca do mascote (canto inferior direito) */
.cj-vo-balao::after {
  content: '';
  position: absolute;
  right: 10px;
  bottom: -9px;
  transform: skewX(-14deg);
  width: 0; height: 0;
  border: 10px solid transparent;
  border-top-color: #ffffff;
  border-bottom: 0;
  filter: drop-shadow(0 3px 2px rgba(1, 40, 80, .10));
}

/* ---------- folha de opcoes (bottom sheet) ---------- */
.cj-vo-folha-ov {
  position: fixed; inset: 0;
  background: rgba(3, 26, 48, .45);
  opacity: 0; transition: opacity .28s ease;
  z-index: 9998;
}
.cj-vo-folha-ov.on { opacity: 1; }
.cj-vo-folha {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #ffffff;
  border-radius: 22px 22px 0 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 30px rgba(1, 30, 70, .30);
  transform: translateY(102%);
  transition: transform .3s cubic-bezier(.22, .9, .3, 1);
  z-index: 9999;
}
.cj-vo-folha.on { transform: translateY(0); }
.cj-vo-folha-tit {
  text-align: center; color: #0d3c61;
  font-weight: 800; font-size: 16px; margin-bottom: 14px;
}
.cj-vo-folha-op {
  display: flex; align-items: center; gap: 12px;
  width: 100%; margin-bottom: 10px;
  padding: 14px 16px;
  border: 0; border-radius: 16px;
  background: linear-gradient(180deg, #1565c0, #0a337a);
  color: #fff; font-size: 15.5px; font-weight: 700;
  cursor: pointer; text-align: left;
}
.cj-vo-folha-op i { font-style: normal; font-size: 21px; }
.cj-vo-folha-op.cancelar {
  background: #eef4f8; color: #4d6b80; justify-content: center;
  font-weight: 600; margin-bottom: 0;
}

/* ---------- termo LGPD em tela cheia ---------- */
.cj-vo-termo {
  position: fixed; inset: 0;
  background: #ffffff;
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity .28s ease;
  z-index: 10000;
}
.cj-vo-termo.on { opacity: 1; }
.cj-vo-termo-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, #01579b, #0288d1 55%, #26c6da);
  color: #fff; font-weight: 800; font-size: 16px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
.cj-vo-termo-bar button {
  background: rgba(255,255,255,.22); border: 1.5px solid rgba(255,255,255,.5);
  color: #fff; width: 38px; height: 38px; border-radius: 12px;
  font-size: 18px; cursor: pointer;
}
.cj-vo-termo iframe { flex: 1; width: 100%; border: 0; }

/* ---------- botao verde (Ativar cadastro) ---------- */
.cj-vo-verde,
.cj-vo-btn.cj-vo-verde {
  background: linear-gradient(180deg, #2e9e4f, #14712f) !important;
  border-color: rgba(255, 255, 255, .28) !important;
  box-shadow: 0 8px 20px rgba(10, 70, 30, .34), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* link do termo, dentro do rotulo do check da LGPD */
.cj-vo-termo-lnk {
  color: #1565c0;
  font-weight: 800;
  text-decoration: underline;
  white-space: nowrap;
}

/* Rotulos que sao NOTA de um campo (CPF, aviso do aceite): a regra geral dos
   rotulos usa a largura toda do bloco, e eles nasciam encostados na borda
   enquanto os campos comecam em 5%. Aqui acompanham os campos. */
.cj-vo-fluido .cj-campo-nota {
  left: 5% !important;
  width: 90% !important;
  box-sizing: border-box;
}
.cj-vo-fluido .cj-campo-nota .x-innerhtml {
  color: #56707f;
  font-size: 13px;
  line-height: 1.35;
}

/* Estes elementos vivem no <body>, fora do escopo do Ext: sem isto herdam a
   fonte serifada do navegador e destoam do resto do app. */
.cj-vo-folha,
.cj-vo-folha-tit,
.cj-vo-folha-op,
.cj-vo-termo-bar,
.cj-vo-toast {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}