/* =========================================================
   SIMULADOR DE TREINAMENTO - ELEIÇÕES 2026
   ESTILO PRINCIPAL
========================================================= */


/* =========================================================
   CONFIGURAÇÕES GERAIS
========================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  min-height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background: #d7d7d7;
  color: #111;
}

body {
  -webkit-tap-highlight-color: transparent;
}

button {
  font-family: Arial, Helvetica, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.oculto {
  display: none !important;
}


/* =========================================================
   AVISO DE ORIENTAÇÃO
========================================================= */

#aviso-orientacao {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;

  background:
    linear-gradient(
      145deg,
      #f4f4f4,
      #d7d7d7
    );

  align-items: center;
  justify-content: center;
  flex-direction: column;

  text-align: center;

  padding: 30px;
}

#aviso-orientacao h2 {
  font-size: 28px;
  margin-bottom: 12px;
}

#aviso-orientacao p {
  font-size: 17px;
  max-width: 320px;
  line-height: 1.4;
}

.icone-girar {
  font-size: 70px;
  margin-bottom: 15px;
}


/* =========================================================
   PÁGINA
========================================================= */

.pagina {
  min-height: 100vh;
  width: 100%;

  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  padding: 14px;
}

.identificacao {
  width: min(1180px, 98vw);

  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 9px;
  padding: 0 6px;

  font-size: 12px;

  color: #333;
}

.identificacao strong {
  font-size: 13px;
  letter-spacing: 0.4px;
}


/* =========================================================
   CORPO PRINCIPAL DA URNA
========================================================= */

.urna {
  width: min(1180px, 98vw);
  min-height: 620px;

  display: grid;

  grid-template-columns:
    1.55fr
    0.85fr;

  background:
    linear-gradient(
      145deg,
      #faf9f3 0%,
      #e1e0d8 48%,
      #c7c6be 100%
    );

  border: 2px solid #aaa;

  border-radius: 8px;

  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.32),
    inset 0 2px 0 rgba(255,255,255,0.9);

  overflow: hidden;
}


/* =========================================================
   LADO DA TELA
========================================================= */

.lado-tela {
  padding:
    36px
    28px
    36px
    36px;

  display: flex;

  align-items: center;
  justify-content: center;
}


/* =========================================================
   MOLDURA DA TELA
========================================================= */

.moldura-tela {
  width: 100%;
  height: 100%;

  min-height: 500px;

  background:
    linear-gradient(
      145deg,
      #454545,
      #1d1d1d
    );

  border-radius: 9px;

  border: 7px solid #343434;

  padding: 12px;

  box-shadow:
    inset 0 0 14px rgba(0,0,0,0.95),
    0 3px 4px rgba(255,255,255,0.5),
    0 3px 7px rgba(0,0,0,0.4);
}


/* =========================================================
   TELA DE VOTAÇÃO
========================================================= */

.tela-votacao,
.tela-fim {
  width: 100%;
  height: 100%;

  min-height: 470px;

  background: #f5f4ea;

  border: 2px solid #111;

  position: relative;

  overflow: hidden;
}


/* =========================================================
   CABEÇALHO DA TELA
========================================================= */

.cabecalho-tela {
  padding:
    22px
    25px
    5px
    25px;

  font-size: 21px;
}

#cargo {
  padding:
    4px
    25px
    18px
    25px;

  font-size:
    clamp(
      25px,
      3vw,
      42px
    );

  font-weight: 700;
}


/* =========================================================
   CONTEÚDO PRINCIPAL DA TELA
========================================================= */

.area-conteudo {
  padding:
    8px
    25px;

  display: grid;

  grid-template-columns:
    1fr
    180px;

  gap: 20px;
}

.dados-voto {
  min-width: 0;
}

.linha-numero {
  display: flex;

  align-items: center;

  gap: 15px;

  min-height: 67px;
}

.rotulo {
  font-size: 22px;
}

.numero-voto {
  display: flex;

  align-items: center;

  gap: 4px;
}


/* =========================================================
   DÍGITOS NA TELA
========================================================= */

.digito {
  width: 40px;
  height: 54px;

  border:
    2px
    solid
    #222;

  background:
    #fafafa;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 36px;

  font-weight: 600;
}

.digito.ativo {
  animation:
    piscar
    0.9s
    infinite;
}

@keyframes piscar {

  0%,
  49% {

    background:
      #111;

    color:
      #fff;

  }

  50%,
  100% {

    background:
      #fafafa;

    color:
      #111;

  }

}


/* =========================================================
   DADOS DO CANDIDATO
========================================================= */

.dados-candidato {
  margin-top: 25px;

  font-size: 21px;

  line-height: 1.65;
}

.dados-candidato strong {
  font-weight: 500;
}

.mensagem-voto {
  margin-top: 15px;

  font-size: 28px;

  font-weight: 700;
}


/* =========================================================
   FOTO DO CANDIDATO
========================================================= */

.area-foto {
  align-self: start;

  border:
    1px
    solid
    #333;

  background:
    #fff;

  text-align: center;

  box-shadow:
    0
    2px
    5px
    rgba(0,0,0,0.15);
}

.area-foto img {
  display: block;

  width: 100%;

  height: 205px;

  object-fit: cover;

  object-position:
    center
    top;
}

#legenda-foto {
  display: block;

  padding: 5px;

  font-size: 12px;

  font-weight: bold;

  border-top:
    1px
    solid
    #333;
}


/* =========================================================
   INSTRUÇÕES
========================================================= */

.instrucoes {
  position: absolute;

  left: 25px;
  right: 25px;
  bottom: 18px;

  border-top:
    2px
    solid
    #555;

  padding-top: 10px;

  font-size: 14px;

  line-height: 1.45;
}


/* =========================================================
   LADO DO TECLADO
========================================================= */

.lado-teclado {
  background:
    linear-gradient(
      155deg,
      #e4e3db 0%,
      #c5c4bc 52%,
      #aaa9a2 100%
    );

  border-left:
    2px
    solid
    #aaa;

  padding:
    26px
    30px
    30px;

  display: flex;

  flex-direction: column;

  align-items: center;
}


/* =========================================================
   PAINEL SUPERIOR
========================================================= */

.painel-superior {
  width: 100%;

  text-align: center;

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #e7e7e2
    );

  border:
    1px
    solid
    #a7a7a2;

  border-radius: 5px;

  padding:
    15px
    10px;

  margin-bottom: 18px;

  box-shadow:
    inset
    0
    1px
    2px
    #fff,

    0
    2px
    3px
    rgba(0,0,0,0.15);
}

.titulo-equipamento {
  font-size: 27px;

  font-weight: bold;

  letter-spacing: 1px;
}

.subtitulo-equipamento {
  margin-top: 5px;

  font-size: 15px;

  letter-spacing: 1px;
}


/* =========================================================
   BASE DO TECLADO NUMÉRICO
========================================================= */

.teclado-numerico {
  width: 100%;

  max-width: 330px;

  background:
    linear-gradient(
      145deg,
      #313131 0%,
      #151515 100%
    );

  display: grid;

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

  gap: 10px;

  padding: 18px;

  border-radius: 6px;

  border:
    1px
    solid
    #080808;

  box-shadow:

    inset
    0
    0
    14px
    rgba(0,0,0,0.9),

    inset
    0
    1px
    0
    rgba(255,255,255,0.1),

    0
    5px
    8px
    rgba(0,0,0,0.35);
}


/* =========================================================
   TECLAS NUMÉRICAS - VISUAL 3D
========================================================= */

.tecla-numero {
  height: 68px;

  border:
    1px
    solid
    #080808;

  border-radius: 5px;

  background:
    linear-gradient(
      to bottom,
      #555555 0%,
      #343434 17%,
      #222222 55%,
      #101010 100%
    );

  color:
    #fff;

  cursor: pointer;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 2px;

  position: relative;

  box-shadow:

    0
    6px
    0
    #050505,

    0
    8px
    8px
    rgba(0,0,0,0.35),

    inset
    0
    2px
    1px
    rgba(255,255,255,0.16),

    inset
    0
    -3px
    4px
    rgba(0,0,0,0.4);

  transition:
    transform
    0.06s,

    box-shadow
    0.06s,

    filter
    0.06s;
}

.tecla-numero:hover {
  filter:
    brightness(1.12);
}

.tecla-numero:active {
  transform:
    translateY(5px);

  box-shadow:

    0
    1px
    0
    #050505,

    0
    2px
    3px
    rgba(0,0,0,0.35),

    inset
    0
    2px
    2px
    rgba(0,0,0,0.45);
}


/* =========================================================
   NÚMERO DA TECLA
========================================================= */

.numero-label {
  font-size: 30px;

  line-height: 1;

  font-weight: 800;

  color:
    #fff;

  text-shadow:
    0
    1px
    2px
    rgba(0,0,0,0.9);
}


/* =========================================================
   BRAILLE
========================================================= */

.braille {
  font-size: 14px;

  line-height: 1;

  color:
    #dedede;

  font-weight: normal;

  letter-spacing: 1px;

  text-shadow:
    0
    1px
    1px
    #000;

  opacity:
    0.96;
}


/* =========================================================
   ÁREA DOS BOTÕES DE AÇÃO
========================================================= */

.teclas-acao {
  width: 100%;

  max-width: 365px;

  display: grid;

  grid-template-columns:
    1fr
    1fr
    1.15fr;

  gap: 8px;

  margin-top: 19px;

  align-items: end;
}


/* =========================================================
   BOTÕES DE AÇÃO 3D
========================================================= */

.tecla-acao {
  border:
    1px
    solid
    rgba(0,0,0,0.7);

  border-radius: 5px;

  cursor: pointer;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  padding:
    4px
    5px;

  line-height: 1;

  box-shadow:

    0
    6px
    0
    rgba(0,0,0,0.55),

    0
    8px
    8px
    rgba(0,0,0,0.20),

    inset
    0
    2px
    1px
    rgba(255,255,255,0.35),

    inset
    0
    -2px
    4px
    rgba(0,0,0,0.20);

  transition:
    transform
    0.06s,

    box-shadow
    0.06s,

    filter
    0.06s;
}

.tecla-acao:hover {
  filter:
    brightness(1.08);
}

.tecla-acao:active {
  transform:
    translateY(5px);

  box-shadow:

    0
    1px
    0
    rgba(0,0,0,0.55),

    0
    2px
    3px
    rgba(0,0,0,0.2),

    inset
    0
    2px
    3px
    rgba(0,0,0,0.25);
}


/* =========================================================
   TEXTO DOS BOTÕES
========================================================= */

.acao-texto {
  font-size: 14px;

  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.2px;
}

.braille-acao {
  display: block;

  margin-top: 4px;

  font-size: 9px;

  line-height: 1;

  letter-spacing: 0.3px;

  font-weight: normal;

  opacity: 0.9;
}


/* =========================================================
   BOTÃO BRANCO
========================================================= */

.branco {
  height: 53px;

  background:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #ffffff 30%,
      #e8e8e8 72%,
      #d2d2d2 100%
    );

  color:
    #090909;
}


/* =========================================================
   BOTÃO CORRIGE
========================================================= */

.corrige {
  height: 53px;

  background:
    linear-gradient(
      to bottom,
      #ff9b36 0%,
      #f78016 30%,
      #e66600 75%,
      #c95200 100%
    );

  color:
    #050505;
}


/* =========================================================
   BOTÃO CONFIRMA
========================================================= */

.confirma {
  height: 65px;

  background:
    linear-gradient(
      to bottom,
      #58d788 0%,
      #39bd70 35%,
      #249d59 75%,
      #178148 100%
    );

  color:
    #050505;
}


/* =========================================================
   FOCO PELO TECLADO
========================================================= */

.tecla-numero:focus-visible,
.tecla-acao:focus-visible,
.btn-nova-simulacao:focus-visible {
  outline:
    3px
    solid
    #2678ff;

  outline-offset:
    3px;
}


/* =========================================================
   TELA FINAL
========================================================= */

.tela-fim {
  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;
}

.fim-texto {
  font-size:
    clamp(
      65px,
      10vw,
      125px
    );

  font-weight: bold;

  letter-spacing: 4px;
}

.btn-nova-simulacao {
  margin-top: 45px;

  padding:
    13px
    25px;

  border:
    1px
    solid
    #444;

  border-radius: 5px;

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #d8d8d8
    );

  font-size: 15px;

  font-weight: bold;

  cursor: pointer;

  box-shadow:
    0
    4px
    0
    #777;
}

.btn-nova-simulacao:active {
  transform:
    translateY(3px);

  box-shadow:
    0
    1px
    0
    #777;
}


/* =========================================================
   NOTEBOOKS MENORES E TABLETS
========================================================= */

@media
(max-width: 1000px)
and
(orientation: landscape) {

  .pagina {
    padding: 7px;
  }

  .identificacao {
    margin-bottom: 5px;
  }

  .urna {
    min-height:
      calc(
        100vh
        -
        50px
      );

    grid-template-columns:
      1.45fr
      0.85fr;
  }

  .lado-tela {
    padding:
      18px
      15px
      18px
      20px;
  }

  .lado-teclado {
    padding:
      15px
      20px;
  }

  .moldura-tela {
    min-height: 390px;
  }

  .tela-votacao,
  .tela-fim {
    min-height: 365px;
  }

  .cabecalho-tela {
    padding-top: 15px;

    font-size: 16px;
  }

  #cargo {
    font-size: 27px;

    padding-bottom: 7px;
  }

  .area-conteudo {
    grid-template-columns:
      1fr
      135px;
  }

  .area-foto img {
    height: 155px;
  }

  .rotulo {
    font-size: 17px;
  }

  .digito {
    width: 31px;

    height: 42px;

    font-size: 28px;
  }

  .dados-candidato {
    font-size: 16px;

    margin-top: 13px;
  }

  .teclado-numerico {
    max-width: 275px;

    padding: 13px;

    gap: 7px;
  }

  .tecla-numero {
    height: 53px;

    box-shadow:

      0
      4px
      0
      #050505,

      0
      6px
      6px
      rgba(0,0,0,0.30),

      inset
      0
      2px
      1px
      rgba(255,255,255,0.16);
  }

  .numero-label {
    font-size: 24px;
  }

  .braille {
    font-size: 10px;
  }

  .teclas-acao {
    max-width: 300px;

    margin-top: 13px;

    gap: 6px;
  }

  .acao-texto {
    font-size: 11px;
  }

  .braille-acao {
    font-size: 7px;
  }

  .branco,
  .corrige {
    height: 43px;
  }

  .confirma {
    height: 52px;
  }

  .instrucoes {
    font-size: 11px;

    bottom: 10px;
  }

}


/* =========================================================
   CELULAR HORIZONTAL
========================================================= */

@media
(max-width: 780px)
and
(orientation: landscape) {

  body {
    overflow: hidden;
  }

  .pagina {
    padding: 3px;
  }

  .identificacao {
    display: none;
  }

  .urna {
    width: 100vw;

    height: 100vh;

    min-height: 0;

    border: none;

    border-radius: 0;

    grid-template-columns:
      1.45fr
      0.75fr;
  }

  .lado-tela {
    padding: 9px;
  }

  .lado-teclado {
    padding:
      8px
      11px;
  }

  .moldura-tela {
    min-height: 0;

    height: 100%;

    padding: 6px;

    border-width: 5px;
  }

  .tela-votacao,
  .tela-fim {
    min-height: 0;

    height: 100%;
  }

  .cabecalho-tela {
    padding:
      9px
      12px
      2px;

    font-size: 12px;
  }

  #cargo {
    padding:
      2px
      12px
      5px;

    font-size: 19px;
  }

  .area-conteudo {
    padding:
      3px
      12px;

    grid-template-columns:
      1fr
      90px;

    gap: 7px;
  }

  .linha-numero {
    min-height: 36px;

    gap: 7px;
  }

  .rotulo {
    font-size: 13px;
  }

  .digito {
    width: 23px;

    height: 31px;

    font-size: 20px;

    border-width: 1px;
  }

  .dados-candidato {
    margin-top: 5px;

    font-size: 12px;

    line-height: 1.3;
  }

  .mensagem-voto {
    font-size: 17px;

    margin-top: 5px;
  }

  .area-foto img {
    height: 100px;
  }

  #legenda-foto {
    font-size: 8px;

    padding: 2px;
  }

  .instrucoes {
    left: 12px;

    right: 12px;

    bottom: 5px;

    padding-top: 4px;

    font-size: 8px;

    line-height: 1.25;
  }

  .painel-superior {
    padding: 6px;

    margin-bottom: 5px;
  }

  .titulo-equipamento {
    font-size: 15px;
  }

  .subtitulo-equipamento {
    font-size: 8px;

    margin-top: 1px;
  }

  .teclado-numerico {
    padding: 6px;

    gap: 4px;

    max-width: 205px;

    border-radius: 4px;
  }

  .tecla-numero {
    height: 37px;

    gap: 0;

    border-radius: 3px;

    box-shadow:

      0
      3px
      0
      #050505,

      inset
      0
      1px
      0
      rgba(255,255,255,0.16);
  }

  .numero-label {
    font-size: 17px;
  }

  .braille {
    font-size: 7px;
  }

  .teclas-acao {
    max-width: 220px;

    gap: 4px;

    margin-top: 7px;
  }

  .tecla-acao {
    padding:
      2px
      2px;

    border-radius: 3px;

    box-shadow:

      0
      3px
      0
      rgba(0,0,0,0.55),

      inset
      0
      1px
      0
      rgba(255,255,255,0.20);
  }

  .acao-texto {
    font-size: 8px;
  }

  .braille-acao {
    font-size: 5px;

    margin-top: 2px;

    letter-spacing: 0;
  }

  .branco,
  .corrige {
    height: 30px;
  }

  .confirma {
    height: 37px;
  }

  .fim-texto {
    font-size: 60px;
  }

  .btn-nova-simulacao {
    margin-top: 18px;

    padding:
      7px
      12px;

    font-size: 10px;
  }

}

/* =========================================================
   CELULAR EM PÉ COM ROTAÇÃO BLOQUEADA
   Mantém a urna visualmente na horizontal.
   Se o aparelho girar de verdade, o bloco landscape assume.
========================================================= */

/* =========================================================
   CELULAR EM PÉ COM ROTAÇÃO BLOQUEADA
   Mantém a MESMA proporção da urna horizontal
========================================================= */

@media
(max-width: 700px)
and
(orientation: portrait) {

  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #d7d7d7;
  }

  #aviso-orientacao {
    display: none;
  }

  .pagina {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    width: 100dvw;
    height: 100dvh;

    min-height: 0;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
  }

  .identificacao {
    display: none;
  }


  /* =====================================================
     CORPO DA URNA
     Mantém a proporção e gira mesmo com rotação bloqueada
  ===================================================== */

  .urna {
    width: min(
      100vh,
      calc(100vw * 1.92)
    );

    width: min(
      100dvh,
      calc(100dvw * 1.92)
    );

    height: auto;

    aspect-ratio: 1.92 / 1;

    min-height: 0;
    max-width: none;

    display: grid;

    /*
      Tela continua maior,
      mas o teclado ganha um pouco mais de espaço.
    */
    grid-template-columns:
      1.40fr
      0.95fr;

    border: none;
    border-radius: 0;

    transform: rotate(90deg);
    transform-origin: center center;

    overflow: hidden;
  }


  /* =====================================================
     LADO DA TELA
  ===================================================== */

  .lado-tela {
    padding: 4px;

    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .moldura-tela {
    width: 100%;
    height: 100%;

    min-height: 0;

    padding: 4px;

    border-width: 4px;
    border-radius: 5px;
  }

  .tela-votacao,
  .tela-fim {
    width: 100%;
    height: 100%;

    min-height: 0;
  }


  /* =====================================================
     CABEÇALHO
  ===================================================== */

  .cabecalho-tela {
    padding:
      8px
      9px
      1px;

    font-size: 13px;
  }

  #cargo {
    padding:
      2px
      9px
      4px;

    font-size: 21px;

    line-height: 1.05;
  }


  /* =====================================================
     CONTEÚDO DO VOTO
  ===================================================== */

  .area-conteudo {
    padding:
      3px
      9px;

    display: grid;

    grid-template-columns:
      1fr
      145px;

    gap: 8px;
  }

  .linha-numero {
    min-height: 45px;

    gap: 6px;
  }

  .rotulo {
    font-size: 14px;
  }

  .numero-voto {
    gap: 3px;
  }


  /* =====================================================
     NÚMEROS DIGITADOS
  ===================================================== */

  .digito {
    width: 29px;
    height: 39px;

    font-size: 25px;

    border-width: 1px;
  }


  /* =====================================================
     DADOS DO CANDIDATO
  ===================================================== */

  .dados-candidato {
    margin-top: 6px;

    font-size: 14px;

    line-height: 1.3;
  }

  .mensagem-voto {
    margin-top: 6px;

    font-size: 18px;
  }


  /* =====================================================
     FOTO DO CANDIDATO
     Aumentada para aproveitar melhor a tela
  ===================================================== */

  .area-foto {
    width: 145px;

    align-self: start;
  }

  .area-foto img {
    width: 100%;

    height: 175px;

    object-fit: cover;

    object-position:
      center
      top;
  }

  #legenda-foto {
    padding: 3px;

    font-size: 9px;
  }


  /* =====================================================
     INSTRUÇÕES
  ===================================================== */

  .instrucoes {
    left: 9px;
    right: 9px;
    bottom: 5px;

    padding-top: 4px;

    font-size: 8px;

    line-height: 1.25;
  }


  /* =====================================================
     LADO DO TECLADO
  ===================================================== */

  .lado-teclado {
    min-width: 0;

    padding:
      5px
      6px;

    border-left:
      2px
      solid
      #aaa;

    border-top: none;

    justify-content: center;
  }


  /* =====================================================
     IDENTIFICAÇÃO DO SIMULADOR
  ===================================================== */

  .painel-superior {
    width: 98%;

    padding: 5px;

    margin-bottom: 6px;
  }

  .titulo-equipamento {
    font-size: 18px;
  }

  .subtitulo-equipamento {
    margin-top: 1px;

    font-size: 9px;
  }


  /* =====================================================
     TECLADO NUMÉRICO
     Maior e ocupando praticamente toda a área disponível
  ===================================================== */

  .teclado-numerico {
    width: 98%;

    max-width: none;

    padding: 7px;

    gap: 5px;

    border-radius: 5px;
  }

  .tecla-numero {
    height: 53px;

    gap: 1px;

    border-radius: 4px;

    box-shadow:
      0 3px 0 #050505,
      inset 0 1px 0 rgba(255,255,255,0.16);
  }

  .tecla-numero:active {
    transform: translateY(2px);

    box-shadow:
      0 1px 0 #050505;
  }

  .numero-label {
    font-size: 28px;
  }

  .braille {
    font-size: 9px;
  }


  /* =====================================================
     BRANCO / CORRIGE / CONFIRMA
  ===================================================== */

  .teclas-acao {
    width: 99%;

    max-width: none;

    gap: 5px;

    margin-top: 8px;
  }

  .tecla-acao {
    padding:
      2px
      2px;

    border-radius: 4px;

    box-shadow:
      0 3px 0 rgba(0,0,0,0.55),
      inset 0 1px 0 rgba(255,255,255,0.20);
  }

  .acao-texto {
    font-size: 10px;
  }

  .braille-acao {
    margin-top: 2px;

    font-size: 5px;

    letter-spacing: 0;
  }

  .branco,
  .corrige {
    height: 41px;
  }

  .confirma {
    height: 51px;
  }


  /* =====================================================
     TELA FINAL
  ===================================================== */

  .fim-texto {
    font-size: 65px;
  }

  .btn-nova-simulacao {
    margin-top: 18px;

    padding:
      7px
      12px;

    font-size: 10px;
  }

}

/* =========================================================
   BOTÃO FLUTUANTE - INSTALAR APP
   Não interfere no tamanho da urna
========================================================= */

.btn-instalar-flutuante {
  position: fixed;

  top: 6px;
  left: 50%;

  transform: translateX(-50%);

  z-index: 9998;

  height: 27px;

  padding:
    3px
    10px
    3px
    4px;

  border:
    1px solid
    rgba(0,0,0,0.12);

  border-radius: 20px;

  background:
    rgba(255,255,255,0.96);

  color: #333;

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 10px;
  font-weight: 700;

  cursor: pointer;

  box-shadow:
    0 2px 7px
    rgba(0,0,0,0.16);
}

.btn-instalar-icone {
  width: 19px;
  height: 19px;

  border-radius: 50%;

  background: #39bd70;

  color: #fff;

  display: flex;

  align-items: center;
  justify-content: center;

  font-size: 13px;
  font-weight: bold;
}


/* CELULAR HORIZONTAL */

@media
(max-width: 780px)
and
(orientation: landscape) {

  .btn-instalar-flutuante {
    top: 2px;

    height: 22px;

    padding:
      2px
      7px
      2px
      3px;

    gap: 4px;

    font-size: 8px;
  }

  .btn-instalar-icone {
    width: 16px;
    height: 16px;

    font-size: 10px;
  }

}


/* CELULAR COM ROTAÇÃO BLOQUEADA */

@media
(max-width: 700px)
and
(orientation: portrait) {

  .btn-instalar-flutuante {
    top: 50%;
    left: 3px;

    transform:
      translateY(-50%)
      rotate(90deg);

    height: 22px;

    padding:
      2px
      7px
      2px
      3px;

    gap: 4px;

    font-size: 8px;
  }

  .btn-instalar-icone {
    width: 16px;
    height: 16px;

    font-size: 10px;
  }

}