/*--------------------------------------------------------------
# Configurações gerais
--------------------------------------------------------------*/
:root {
  --primary: #005f61;
  --primary-light: #2c9a9c;
  --primary-dark: #003b3d;
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #005f61; 
  font-family: Inter, system-ui, sans-serif;
  user-select: none;
}

body::-webkit-scrollbar {
  display: none;
}


/*--------------------------------------------------------------
# Background
--------------------------------------------------------------*/
.bg-gradient {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(44,154,156,0.4), transparent 40%),
    radial-gradient(circle at 80% 10%, rgba(0,95,97,0.45), transparent 45%),
    linear-gradient(180deg, #002f30 0%, #005f61 50%, #002f30 100%);
}

/*--------------------------------------------------------------
# Neural
--------------------------------------------------------------*/
#neural {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/*--------------------------------------------------------------
# Modelo 3D
--------------------------------------------------------------*/
model-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  will-change: transform;
}

/*--------------------------------------------------------------
# Botão Start
--------------------------------------------------------------*/

#botao-container {
  position: fixed;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  z-index: 9999;
}

/* Botão base */
.btn-glass {
  position: relative;
  padding: 18px 38px;

  background: rgba(255, 255, 255, 0.08);
  color: #ffc107;

  border: none;
  border-radius: 6px;

  font-size: 0.95rem;
  letter-spacing: 0.15em;
  font-weight: 600;

  cursor: pointer;
  overflow: hidden;

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

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);

  transition:
    color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

/* Faixa de luz */
.btn-glass::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -120%;

  width: 50%;
  height: 200%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );

  transform: skewX(-25deg);
  pointer-events: none;
}

/* Hover */
.btn-glass:hover {
  color: #ffffff;
  background: rgba(248, 178, 0, 0.76);

  box-shadow:
    0 14px 40px rgba(248, 179, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25);

  transform: translateY(-2px);
}

/* Animação da luz */
.btn-glass:hover::after {
  left: 140%;
  transition: left 0.8s ease;
}

/* Clique */
.btn-glass:active {
  transform: translateY(0);
}

/*--------------------------------------------------------------
# Container do Modal
--------------------------------------------------------------*/
.modal-device .modal-content {
  background: transparent;
  border: none;
  box-shadow: none;
  margin-left: 70px;
}

/* Remove o fundo escuro atrás do modal */
.modal-backdrop {
  background-color: transparent !important;
}

/*--------------------------------------------------------------
# Corpo do Modal
--------------------------------------------------------------*/
.modal-device-body {
  position: relative;

  width: 22vw;
  aspect-ratio: 1 / 2;
  max-width: 420px;

  background-image: url('/assets/img/fc1000/facial.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  animation: modal-pulse 0.45s ease-out;
  transform: scale(1.15);
  transform-origin: center center;
}

/* camada de crossfade */
.modal-device-body::after {
  content: "";
  position: absolute;
  inset: 0;

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;

  background-image: var(--after-bg);
  opacity: var(--fade, 0);
}


/*--------------------------------------------------------------
# Tela do Modal
--------------------------------------------------------------*/
.device-screen {
  position: absolute;

  /* PROPORCIONAL À IMAGEM (NÃO MUDA COM RESOLUÇÃO) */
  top: 16.5%;
  left: 11%;

  width: 78%;
  height: 66.5%;
  overflow: hidden;


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

  pointer-events: auto;
}

/*--------------------------------------------------------------
# Animação de Pulso
--------------------------------------------------------------*/
@keyframes modal-pulse {
  0% {
    transform: scale(0.85);
  }
  60% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

/*--------------------------------------------------------------
# Configurações da tela
--------------------------------------------------------------*/

.screen {
  position: absolute;
  inset: 0;

  opacity: 0;
  transform: scale(0.98);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;

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

  background: #111;
  color: #fff;

  width: 100%;
  height: 100%;
  display: none;
  
}

/* Tela ativa */
.screen.active {
  display: flex;   /* 🔑 ESSENCIAL */
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

/* Tela saindo */
.screen.exit {
  opacity: 0;
  transform: scale(1.02);
  z-index: 1;
}

/*--------------------------------------------------------------
# Relógio
--------------------------------------------------------------*/
.clock {
  font-family: Inter, system-ui, sans-serif;
  color: #fff;
  text-align: center;
}

.clock-date {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  opacity: 0.8;
  margin-bottom: 4px;
  text-transform: lowercase;
}

.clock-time {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* painel UTC */

.utc-ajuste-container{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-bottom:10px;
}

.utc-value{
  font-size:22px;
  min-width:40px;
  text-align:right;
}

.utc-setas{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.utc-setas button{
  width:60px;
  height:34px;
}


/*--------------------------------------------------------------
# Câmera
--------------------------------------------------------------*/

/* Vídeo da câmera */
#camera-feed {
  position: relative;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  z-index: 1;
}


/*--------------------------------------------------------------
# Tela inicial
--------------------------------------------------------------*/
.screen.screen-home.active{
  display: flex;
  flex-direction: column;
  background-image: url("../../img/fc1000/background-home.jpg");
  background-size: cover;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.insigna{
  width: 100px;
}

.text-fc1000{
  font-family: Inter, system-ui, sans-serif;
  color: #fff;
  font-weight: bold;
}

/*--------------------------------------------------------------
# Tela Base
--------------------------------------------------------------*/
.screen.screen-base {
  background-image: url("../../img/fc1000/ligacamera-img.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  display: block; /* MUITO IMPORTANTE */
}

.screen-base-header {
  position: absolute; /* garante o contexto */

  top: 0;
  left: 0;

  width: 100%;
  height: 42px;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 👈 colunas iguais */
  align-items: center;

  padding: 0 8px;

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.35) 40%,
    rgba(0, 0, 0, 0) 100%
  );

  z-index: 5;
  pointer-events: none;
}


.header-left,
.header-center,
.header-right {
  display: flex;
  align-items: center;
}

.header-left {
  justify-content: flex-start;
}

.header-center {
  justify-content: center;
}

.header-right {
  justify-content: flex-end;
}

.clock-header {
  display: flex;
  flex-direction: column;  
  align-items: center;    
  justify-content: center;  
  text-align: center;
  line-height: 1.1;

}

.clock-header .clock-date {
  font-size: 0.55rem;
  opacity: 0.8;
}

.clock-header .clock-time {
  font-size: 0.9rem;
  font-weight: 600;
}
.header-center::before,
.header-right::before {
  content: "";
  width: 26px;
  height: 26px;
  /* background: rgba(255,255,255,0.25); */
  border-radius: 4px;
}

#base-btn {
  all: unset;
  cursor: pointer;
  pointer-events: auto; 
}

.base-btn-img{
  width: 2.5rem;
}

.icons-base{
  width: 3.3rem;
}

/*--------------------------------------------------------------
# Tela Autenticação
--------------------------------------------------------------*/

.screen.screen-autenticacao {
  background-color: #181a1e;
  display: flex;
  flex-direction: column;
  padding-top: 42px; /* altura do header */
   
}

.screen-base-header.autenticacao {
  background: linear-gradient(
    to bottom,
    #3a3e47 0%,
    #2e3239 40%,
    #23252c 100%
  );
}

.btn-autenticacao {
  width: 2rem;
  cursor: pointer;
  pointer-events: auto;
}

.title {
  font-family: Inter, system-ui, sans-serif;
  color: #fff;
  font-size: 0.65rem;
}

/* Login centralizado */
.autenticacao-login {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  width: 80%;
  max-width: 320px;
  margin: 0 auto;
  
}

/* Footer fixo embaixo */
.footer-autenticacao {
  padding-bottom: 30px;
  text-align: center;
  font-size: 0.55rem;
  color: #9a9a9a;
}

/* Inputs */
.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;

}

.login-field label {
  text-align: center;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.85rem;
  color: #e5e5e5;
}

.login-field input {
  height: 30px;
  padding: 0 12px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.35);
  color: #fff;
  outline: none;
}

.login-field input:focus {
  border-color: #2ecc71;
}

.password-field {
  position: relative;
  
}

.toggle-pass {
  position: absolute;
  right: 10px;
  top: 32px;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.8;
  
}

/* Botão */
.login-btn {
  border-color: white;
  margin-top: 10px;
  height: 42px;
  border-radius: 22px;
  background: #0b7a14;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
    
}

.login-btn:active {
  transform: scale(0.98);
}

.login-btn:hover{
    background: #05f819;
}

/*--------------------------------------------------------------
# Página Inicial
--------------------------------------------------------------*/

.screen-base-header .title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
}

.screen.screen-pagina-inicial{
  background-color: #181a1e;
}

.container-pagina-inicial{
  width: 100%;
  height: 100%;
}

/*--------------------------------------------------------------
# Página Inicial - Lista de Menu
--------------------------------------------------------------*/

.container-pagina-inicial {
  width: 100%;
  padding-top: 42px; /* respeita o header */
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
}

/* Item base */
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;

  height: 42px;
  padding: 0 14px;

  font-family: Inter, system-ui, sans-serif;
  font-size: 0.85rem;
  color: #e6e6e6;

  cursor: pointer;

  border-bottom: 1px solid rgba(255,255,255,0.04);

  transition: background 0.15s ease, color 0.15s ease;
}

/* Linha clara */
.menu-item:nth-child(odd) {
  background: linear-gradient(
    to bottom,
    #23262b,
    #1e2126

  );
}

/* Linha mais escura */
.menu-item:nth-child(even) {
  background: linear-gradient(
    to bottom,
    #2a2d33,
    #24272d
  );
}


/* Ícone esquerdo */
.menu-item i:first-child {
  font-size: 1rem;
  opacity: 0.9;
  width: 18px;
}

/* Texto central */
.menu-item span {
  flex: 1;
  white-space: nowrap;
}

/* Seta direita */
.menu-item i:last-child {
  font-size: 0.9rem;
  opacity: 0.6;
}

/* Hover verde (igual ao anexo) */
.menu-item:hover {
  background: #026c6c;
  color: #ffffff;
}

/* Opcional: feedback de toque */
.menu-item:active {
  background: #026c6c;
  color: #000;
}



/*--------------------------------------------------------------
# Sistema
--------------------------------------------------------------*/

.system-icon{
  width: 1.1rem;
}

.margem-icon{
  margin-left: 2px;
}

.system-text{
  font-size: 0.6rem;
}
/*--------------------------------------------------------------
# Seletor Modo do Flash 
--------------------------------------------------------------*/

.flash-selector {
  position: absolute;
  left: 50%;
  top: 120px;
  transform: translateX(-50%);

  width: 85%;
  max-height: calc(100% - 160px);

  background: #1e2126;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);

  overflow: hidden;
  display: none;
  z-index: 15;

  box-shadow: 0 10px 25px rgba(0,0,0,0.45);
}

.flash-selector.show {
  display: block;
}

/* Opções */
.flash-option {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center; /* 🔑 texto centralizado */

  font-family: Inter, system-ui, sans-serif;
  font-size: 0.85rem;
  color: #e6e6e6;

  cursor: pointer;
  user-select: none;

  transition: background 0.15s ease, color 0.15s ease;
}

/* Linha clara */
.flash-option:nth-child(odd) {
  background: linear-gradient(
    to bottom,
    #23262b,
    #1e2126
  );
}

/* Linha escura */
.flash-option:nth-child(even) {
  background: linear-gradient(
    to bottom,
    #2a2d33,
    #24272d
  );
}

/* Hover igual ao menu */
.flash-option:hover {
  background: #026c6c;
  color: #ffffff;
}

/* Feedback de toque */
.flash-option:active {
  background: #026c6c;
  color: #000;
}
/*Seletor "Modo do Flash"*/
#flash-mode-value{
  text-align: right;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.5rem;
  color: #9b9b9b;
}



/*--------------------------------------------------------------
# Data e Hora
--------------------------------------------------------------*/

.switch-container {
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* Base do switch */
.switch {
  width: 42px;
  height: 22px;
  border-radius: 22px;
  background: #3a3d42;
  position: relative;
  cursor: pointer;
  transition: background 0.25s ease;
}

/* Botão interno */
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s ease;
}

/* Estado ativo */
.switch.active {
  background: #1cff00;
}

.switch.active::after {
  transform: translateX(20px);
}

#menu-clock-time{
  font-size: 0.6rem;
}

#text-time{
  font-size: 0.8rem;
}

/* ==================================================
   ===== TELINHA DE AJUSTE DATA / HORA (KEYPAD) =====
   ================================================== */

/* Painel base */
.screen-data-e-hora .container-pagina-inicial > div {
  color: #cfd6df;
  padding-top: 10px;

}
.screen-data-e-hora .menu-item {
  flex-shrink: 0;
}


/* Display (data / hora) */
.screen-data-e-hora .display-ajuste {
  
  width: 70%;
  margin: 0 auto 12px auto;
  padding: 8px 0;

  font-size: 18px;
  letter-spacing: 1px;
  text-align: center;

  background: #0e1116;
  border: 1px solid #3a404a;
  border-radius: 4px;

  box-shadow: inset 0 0 0 1px #1c2027;
  margin-top: 5px;
}

/* Linhas de botões (setas) */
.screen-data-e-hora button.up,
.screen-data-e-hora button.down {
  width: 56px;
  height: 36px;

  font-size: 16px;
  color: #cfd6df;

  background: linear-gradient(
    to bottom,
    #2b3038,
    #1f232a
  );

  border: 1px solid #3a404a;
  border-radius: 4px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 1px 2px rgba(0,0,0,0.6);

  cursor: pointer;
  
}

/* Hover (mouse) */
.screen-data-e-hora button.up:hover,
.screen-data-e-hora button.down:hover {
  background: linear-gradient(
    to bottom,
    #343a44,
    #242a33
  );
}

/* Pressionado */
.screen-data-e-hora button.up:active,
.screen-data-e-hora button.down:active {
  background: linear-gradient(
    to bottom,
    #1f232a,
    #2b3038
  );

  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8);
}

/* Linha Cancel / Ok */
.screen-data-e-hora button.cancel,
.screen-data-e-hora button.ok {
  width: 90px;
  height: 34px;

  font-size: 14px;
  color: #cfd6df;

  background: linear-gradient(
    to bottom,
    #2a2f36,
    #1d2127
  );

  border: 1px solid #3a404a;
  border-radius: 4px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 1px 2px rgba(0,0,0,0.6);

  cursor: pointer;
}

/* Cancel mais neutro */
.screen-data-e-hora button.cancel {
  color: #b8bec7;
}

/* OK levemente destacado */
.screen-data-e-hora button.ok {
  color: #e6f0ff;
  border-color: #026c6c;
}

/* Hover OK */
.screen-data-e-hora button.ok:hover {
  background: linear-gradient(
    to bottom,
    #026c6c,
    #026c6c
  );
}

/* Active OK */
.screen-data-e-hora button.ok:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8);
}

/* Remove highlight azul mobile */
.screen-data-e-hora button {
  -webkit-tap-highlight-color: transparent;
}


/*--------------------------------------------------------------
# Modo de Operação
--------------------------------------------------------------*/

/* Texto HC / DC */
.modo-texto {
  font-size: 0.7rem;
  color: #e6e6e6;
}

/* Seletor no fundo da tela */
.modo-selector {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);

  width: 85%;
  background: #1e2126;
  border-radius: 1px;
  overflow: hidden;

  display: none;
  z-index: 10;
}

/* Opções */
.modo-option {
  padding: 14px;
  text-align: center;
  font-size: 0.85rem;
  color: #e6e6e6;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.modo-option:last-child {
  border-bottom: none;
}

.modo-option:hover {
  background: #026c6c;
  color: #fff;
}

/* Mostrar seletor */
.modo-selector.show {
  display: block;
}



/* Botão Salvar */
.operacao-btn {
  height: 32px;
  padding: 0 18px;

  border-radius: 22px;
  border-color: white;

  background: #0b7a14;
  color: #fff;

  font-size: 0.6rem;
  font-weight: 600;

  cursor: pointer;

  display: block;
  margin: 10px auto; /* centraliza sem esticar o item */
}

.operacao-btn:hover {
  background: #05f819;
}

.operacao-btn:active {
  transform: scale(0.98);
}

/* Menu-item que contém o botão */
.menu-item:has(.operacao-btn) {
  justify-content: center; /* centraliza conteúdo */
  cursor: default;
}

.ip-text{
  font-size: 10px;
}

/* ============================= */
/* # Teclado IP
/* ============================= */

#ip-keyboard {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);

  width: 75%;
  max-width: 260px;

  background: #1e2126;
  border-radius: 6px;
  padding: 12px;

  display: none;
  z-index: 50;

  pointer-events: none;
}

#ip-keyboard.show {
  display: block;
  pointer-events: auto;
}

#ip-keyboard .keyboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

#ip-keyboard .key {
  height: 44px;
  background: #2a2d33;
  color: #fff;
  border: none;
  border-radius: 6px;
}

#ip-keyboard .key:hover {
  background: #026c6c;
}

#ip-keyboard .key:active {
  background: #026c6c;
  transform: scale(0.97);
}

/*--------------------------------------------------------------
# Volume
--------------------------------------------------------------*/

.volume-center-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-circular-component {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.circular-slider {
  position: relative;
  width: 250px;
  height: 250px;
  cursor: pointer;
  user-select: none;
}

.progress-ring {
  width: 100%;
  height: 100%;
  transform: rotate(135deg); /* abertura para baixo */
}

.progress-ring circle {
  fill: transparent;
  stroke-width: 25;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s linear;
  
}

.volume-ring-bg {
  stroke: rgba(255, 255, 255, 0.25);
}

.volume-ring-fill {
  stroke: #069797;
}

.slider-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: bold;
  color: #fff;
  pointer-events: none;
}
/*--------------------------------------------------------------
# Flash Ajustador
--------------------------------------------------------------*/
.flash-ring-bg {
  stroke: rgba(255, 255, 255, 0.25);
}

.flash-ring-fill {
  stroke: #069797; /* tom de flash */
}


/*--------------------------------------------------------------
# Parâmetros de Face
--------------------------------------------------------------*/

/*Nível de Segurança */
.modo-texto-face {
  font-size: 0.7rem;
  color: #e6e6e6;
}

/* Seletor no fundo da tela */
.modo-selector-face {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);

  width: 85%;
  background: #1e2126;
  border-radius: 1px;
  overflow: hidden;

  display: none;
  z-index: 10;
}

/* Opções */
.modo-option-face {
  padding: 14px;
  text-align: center;
  font-size: 0.65rem;
  color: #e6e6e6;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.modo-option-face:last-child {
  border-bottom: none;
}

.modo-option-face:hover {
  background: #026c6c;
  color: #fff;
}

/* Mostrar seletor */
.modo-selector-face.show {
  display: block;
}


.numeric-keyboard {
  position: absolute;

  left: 50%;
  bottom: 12px; /* relativo à tela do device */

  transform: translateX(-50%);

  width: 90%;
  max-width: 320px;

  background: #1e2126;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);

  padding: 12px;

  display: none;
  z-index: 20;

  box-shadow: 0 10px 25px rgba(0,0,0,0.45);
}

.numeric-keyboard.show {
  display: block;
}

/* Caixa do valor */
.face-distance-box {
  min-width: 60px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 4px;
  text-align: center;
  color: #fff;
  cursor: pointer;
}

/* Teclado */
.numeric-keyboard {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e2126;
  padding: 12px;
  border-radius: 6px;
  display: none;
  z-index: 20;

  width: 75%;        /* antes 85% */
  max-width: 260px;  /* antes 320px */

}

.numeric-keyboard.show {
  display: block;
}

.keyboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: transparent; /* garante que não herda branco */
}

.key {
  height: 44px;
  padding: 0;
  font-size: 0.95rem;
  border-radius: 6px;

  background: #2a2d33; /* ← ISSO remove o branco */
  color: #fff;
  border: none;

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


.key:hover {
  background: #026c6c;
}

.key-enter {
  grid-column: span 1;
  background: #026c6c;
}

.key-clear {
  background: #444;
}

/*--------------------------------------------------------------
# Background
--------------------------------------------------------------*/
.screen.screen-informacoes-do-sistema, .screen-capacidade, .screen-versao-do-dispositivo
, .screen.screen-parametros-de-face, .screen.screen-intensidade-de-flash, .screen.screen-volume,
.screen.screen-modo-de-operacao, .screen.screen-sistema, .screen-autenticacao, .screen-rede, .screen-utilitarios,
.screen-tela-de-descanso, .screen-configuracoes-de-retorno, .screen-data-e-hora, .screen.screen-pagina-inicial,
.screen-acesso, .screen-metodos-de-acesso, .screen-controladora, .screen-entradas, .screen-saidas, .screen-dados,
.screen-rede-cabeada, .screen-rede-cabeada-info, .screen-rede-cabeada-config, .screen-rede-sem-fio, .screen-rede-semfio-info,
.screen-rede-semfio-config, .screen-conexao-semfio, .screen-codin, .screen-consulta, .screen-upload, .screen-portas,
.screen-usuarios, .screen-senha-mestre, .screen-lista-de-usuarios, .screen-eventos, .screen-buscar-evento, .screen-buscar-usuario,
.screen-atualizacao, .screen-atualizacao-kernel, .screen-atualizacao-firmware, .screen-atualizacao-usb, .screen-ntp, .screen-novo-usuario, .screen-cadastro-cartao, .screen-cadastro-cartao-2,
.screen-leitoras, .screen-opcoes-leitora-facial, .screen-opcoes-leitora-wiegand, .screen-opcoes-leitora-smart, .screen-cofigurador-de-chave, .screen-configuracoes-conex, .screen-configuracoes-globais-conex, .screen-conex-online,
.screen-conex-offline {
  background-color: #181a1e;
}



/*--------------------------------------------------------------
# Versão do Dispositivo
--------------------------------------------------------------*/
#nds{
  font-size: 0.5rem;
}

/*--------------------------------------------------------------
# Rede
--------------------------------------------------------------*/

.system-icon.codin{
  width: 1.4rem;
  }


/*--------------------------------------------------------------
# Parâmetros de Face - MODAL
--------------------------------------------------------------*/

.screen-parametros-de-face .modal-face-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 50;
}

.screen-parametros-de-face .modal-face {
  width: 300px;
  padding: 18px 16px;

  background: linear-gradient(
    to bottom,
    #1d2229,
    #111419
  );

  border: 1px solid #3a404a;
  border-radius: 6px;

  box-shadow:
    inset 0 0 0 1px #222832,
    0 10px 30px rgba(0,0,0,0.8);
}

/* Cabeçalho */
.screen-parametros-de-face .modal-face-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.screen-parametros-de-face .modal-face-icon {
  width: 28px;
  height: 28px;

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

  font-weight: bold;
  font-size: 16px;

  color:  #026c6c;
  background: #e6f0ff;
  border-radius: 50%;
}

/* Texto */
.screen-parametros-de-face .modal-face-text {
  font-size: 14px;
  line-height: 1.4;
  color: #d6dde6;
}

/* Rodapé */
.screen-parametros-de-face .modal-face-footer {
  display: flex;
  justify-content: center;
}

.screen-parametros-de-face .modal-face-ok {
  width: 120px;
  height: 36px;

  font-size: 14px;
  color: #e6f0ff;

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

  border: 1px solid #222832;
  border-radius: 4px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 2px 6px rgba(0,0,0,0.6);
}

.screen-parametros-de-face .modal-face-ok:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8);
}

/*--------------------------------------------------------------
# Acesso > Controladora - MODAL
--------------------------------------------------------------*/

.screen-controladora .modal-controladora-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 50;
}

.screen-controladora .modal-controladora {
  width: 300px;
  padding: 18px 16px;

  background: linear-gradient(
    to bottom,
    #1d2229,
    #111419
  );

  border: 1px solid #3a404a;
  border-radius: 6px;

  box-shadow:
    inset 0 0 0 1px #222832,
    0 10px 30px rgba(0,0,0,0.8);
}

/* Cabeçalho */
.screen-controladora .modal-controladora-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.screen-controladora .modal-controladora-icon {
  width: 28px;
  height: 28px;

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

  font-weight: bold;
  font-size: 16px;

  color:  #026c6c;
  background: #e6f0ff;
  border-radius: 50%;
}

/* Texto */
.screen-controladora .modal-controladora-text {
  font-size: 14px;
  line-height: 1.4;
  color: #d6dde6;
}

/* Rodapé */
.screen-controladora .modal-controladora-footer {
  display: flex;
  justify-content: center;
}

.screen-controladora .modal-controladora-ok {
  width: 120px;
  height: 36px;

  font-size: 14px;
  color: #e6f0ff;

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

  border: 1px solid #222832;
  border-radius: 4px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 2px 6px rgba(0,0,0,0.6);
}

.screen-controladora .modal-controladora-ok:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8);
}

/*--------------------------------------------------------------
# Acesso > Controladora > Entradas > Dropdown Entrada
--------------------------------------------------------------*/
/* Conteúdo começa fechado */
.sensor-porta-content {
  display: none;
}

/* Quando aberto */
.sensor-porta-content.show {
  display: block;
}

/* Cursor visual no header */
#sensor-porta-toggle {
  cursor: pointer;
}


/*Configuração do input de saída*/
.input-saida {
  text-align: right;
}

/*--------------------------------------------------------------
# Acesso > Controladora > Entradas > Dropdown Botoeira
--------------------------------------------------------------*/

.botoeira-content {
  display: none;
}

.botoeira-content.show {
  display: block;
}

#botoeira-toggle {
  cursor: pointer;
}
/*--------------------------------------------------------------
# Acesso > Controladora > Entradas > Dropdown Alarme
--------------------------------------------------------------*/

.alarme-content {
  display: none;
}

.alarme-content.show {
  display: block;
}

#alarme-toggle {
  cursor: pointer;
}


/*--------------------------------------------------------------
# Utilitários > Tela de Descanso - Modal
--------------------------------------------------------------*/

.screen-tela-de-descanso .modal-descanso-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 50;
}

.screen-tela-de-descanso .modal-descanso {
  width: 300px;
  padding: 18px 16px;

  background: linear-gradient(
    to bottom,
    #1d2229,
    #111419
  );

  border: 1px solid #3a404a;
  border-radius: 6px;

  box-shadow:
    inset 0 0 0 1px #222832,
    0 10px 30px rgba(0,0,0,0.8);
}

/* Cabeçalho */
.screen-tela-de-descanso .modal-descanso-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.screen-tela-de-descanso .modal-descanso-icon {
  width: 28px;
  height: 28px;

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

  font-weight: bold;
  font-size: 16px;

  color:  #026c6c;
  background: #e6f0ff;
  border-radius: 50%;
}

/* Texto */
.screen-tela-de-descanso .modal-descanso-text {
  font-size: 14px;
  line-height: 1.4;
  color: #d6dde6;
}

/* Rodapé */
.screen-tela-de-descanso .modal-descanso-footer {
  display: flex;
  justify-content: center;
}

.screen-tela-de-descanso .modal-descanso-ok {
  width: 120px;
  height: 36px;

  font-size: 14px;
  color: #e6f0ff;

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

  border: 1px solid #222832;
  border-radius: 4px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 2px 6px rgba(0,0,0,0.6);
}

.screen-tela-de-descanso .modal-descanso-ok:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8);
}

/*--------------------------------------------------------------
# Configurações de Retorno
--------------------------------------------------------------*/
.screen-configuracoes-de-retorno .retorno-imagem-wrapper {
  width: 100%;
  height: clamp(160px, 32vh, 260px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

.screen-configuracoes-de-retorno .retorno-imagem-wrapper img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* Base do switch */
.switch.imagem {
  width: 42px;
  height: 20px;
  border-radius: 22px;
  background: #3a3d42;
  position: relative;
  cursor: pointer;
  transition: background 0.25s ease;
}

.switch.imagem::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s ease;
}
.switch.imagem.active {
  background: #1cff00;
}
/*--------------------------------------------------------------
# Dados - Remover usuários
--------------------------------------------------------------*/

.screen-dados .modal-remover-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 50;
}

.screen-dados .modal-remover {
  width: 300px;
  padding: 18px 16px;

  background: linear-gradient(
    to bottom,
    #1d2229,
    #111419
  );

  border: 1px solid #3a404a;
  border-radius: 6px;

  box-shadow:
    inset 0 0 0 1px #222832,
    0 10px 30px rgba(0,0,0,0.8);
}

/* Cabeçalho */
.screen-dados .modal-remover-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.screen-dados .modal-remover-icon {
  width: 28px;
  height: 28px;

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

  font-weight: bold;
  font-size: 16px;

  color:  #026c6c;
  background: #e6f0ff;
  border-radius: 50%;
}

/* Texto */
.screen-dados .modal-remover-text {
  font-size: 14px;
  line-height: 1.4;
  color: #d6dde6;
}

/* Rodapé */
.screen-dados .modal-remover-footer {
  display: flex;
  justify-content: center;
}

.screen-dados .modal-remover-ok {
  width: 80px;
  height: 36px;

  font-size: 14px;
  color: #e6f0ff;

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

  border: 1px solid #222832;
  border-radius: 4px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 2px 6px rgba(0,0,0,0.6);
}

.screen-dados .modal-remover-ok:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8);
}

/*--------------------------------------------------------------
# Configurações de Rede Cabeadas
--------------------------------------------------------------*/

#ip-keyboard2 {
  display: none;
  transform: scale(0.8);
  transform-origin: top center;
}

#ip-keyboard2.show {
  display: block;
}

#ip-keyboard3 {
  display: none;
  transform: scale(0.8);
  transform-origin: top center;
}

#ip-keyboard3.show {
  display: block;
}

#ip-keyboard4 {
  display: none;
  transform: scale(0.8);
  transform-origin: top center; 
}

#ip-keyboard4.show {
  display: block;
}

.title.rede{
 font-size: 0.6rem;
}

/*--------------------------------------------------------------
# MODAL
--------------------------------------------------------------*/

.screen-rede-cabeada-config .modal-rede-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 50;
}

.screen-rede-cabeada-config .modal-rede {
  width: 300px;
  padding: 18px 16px;

  background: linear-gradient(
    to bottom,
    #1d2229,
    #111419
  );

  border: 1px solid #3a404a;
  border-radius: 6px;

  box-shadow:
    inset 0 0 0 1px #222832,
    0 10px 30px rgba(0,0,0,0.8);
}

/* Cabeçalho */
.screen-rede-cabeada-config .modal-rede-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.screen-rede-cabeada-config .modal-rede-icon {
  width: 28px;
  height: 28px;

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

  font-weight: bold;
  font-size: 16px;

  color:  #026c6c;
  background: #e6f0ff;
  border-radius: 50%;
}

/* Texto */
.screen-rede-cabeada-config .modal-rede-text {
  font-size: 14px;
  line-height: 1.4;
  color: #d6dde6;
}

/* Rodapé */
.screen-rede-cabeada-config .modal-rede-footer {
  display: flex;
  justify-content: center;
}

.screen-rede-cabeada-config .modal-rede-ok {
  width: 120px;
  height: 36px;

  font-size: 14px;
  color: #e6f0ff;

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

  border: 1px solid #222832;
  border-radius: 4px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 2px 6px rgba(0,0,0,0.6);
}

.screen-rede-cabeada-config .modal-rede-ok:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8);
}
/*--------------------------------------------------------------
# Configurações de Rede Sem Fio
--------------------------------------------------------------*/

#ip-keyboard2-wifi {
  display: none;
  transform: scale(0.8);
  transform-origin: top center;
}

#ip-keyboard2-wifi.show {
  display: block;
}

#ip-keyboard3-wifi {
  display: none;
  transform: scale(0.8);
  transform-origin: top center;
}

#ip-keyboard3-wifi.show {
  display: block;
}

#ip-keyboard4-wifi {
  display: none;
  transform: scale(0.8);
  transform-origin: top center;
}

#ip-keyboard4-wifi.show {
  display: block;
}

.screen-rede-semfio-config .title.rede {
  font-size: 0.6rem;
}

/*--------------------------------------------------------------
# MODAL - SEM FIO
--------------------------------------------------------------*/

.screen-rede-semfio-config .modal-rede-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 50;
}

.screen-rede-semfio-config .modal-rede {
  width: 300px;
  padding: 18px 16px;

  background: linear-gradient(
    to bottom,
    #1d2229,
    #111419
  );

  border: 1px solid #3a404a;
  border-radius: 6px;

  box-shadow:
    inset 0 0 0 1px #222832,
    0 10px 30px rgba(0,0,0,0.8);
}

/* Cabeçalho */
.screen-rede-semfio-config .modal-rede-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.screen-rede-semfio-config .modal-rede-icon {
  width: 28px;
  height: 28px;

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

  font-weight: bold;
  font-size: 16px;

  color: #026c6c;
  background: #e6f0ff;
  border-radius: 50%;
}

/* Texto */
.screen-rede-semfio-config .modal-rede-text {
  font-size: 14px;
  line-height: 1.4;
  color: #d6dde6;
}

/* Rodapé */
.screen-rede-semfio-config .modal-rede-footer {
  display: flex;
  justify-content: center;
}

.screen-rede-semfio-config .modal-rede-ok {
  width: 120px;
  height: 36px;

  font-size: 14px;
  color: #e6f0ff;

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

  border: 1px solid #222832;
  border-radius: 4px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 2px 6px rgba(0,0,0,0.6);
}

.screen-rede-semfio-config .modal-rede-ok:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8);
}
/*--------------------------------------------------------------
# Conexão sem fio
--------------------------------------------------------------*/


/* habilitado (wifi selecionado) */
.operacao-btn.wifi-connect {
  background: #0b7a14; /* mantém padrão */
}

/* conectado */
.operacao-btn.wifi-connected {
  background: #a83333;
}

/* desabilitado */
.operacao-btn.wifi-disabled {
  opacity: 0.4;
  pointer-events: none;
}
/* ===============================
   TECLADO NUMÉRICO – CODIN
   =============================== */

#codin-keyboard {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);

  width: 75%;
  max-width: 260px;

  background: #1e2126;
  border-radius: 6px;
  padding: 12px;

  display: none;
  z-index: 50;

  pointer-events: none;
}

#codin-keyboard.show {
  display: block;
  pointer-events: auto;
}

#codin-keyboard .keyboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

#codin-keyboard .key {
  height: 44px;
  background: #2a2d33;
  color: #fff;
  border: none;
  border-radius: 6px;
}

#codin-keyboard .key:hover {
  background: #026c6c;
}

#codin-keyboard .key:active {
  background: #026c6c;
  transform: scale(0.97);
}


/*--------------------------------------------------------------
# Codin - MODAL
--------------------------------------------------------------*/

.screen-codin .modal-codin-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 50;
}

.screen-codin .modal-codin {
  width: 300px;
  padding: 18px 16px;

  background: linear-gradient(
    to bottom,
    #1d2229,
    #111419
  );

  border: 1px solid #3a404a;
  border-radius: 6px;

  box-shadow:
    inset 0 0 0 1px #222832,
    0 10px 30px rgba(0,0,0,0.8);
}

/* Cabeçalho */
.screen-codin .modal-codin-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.screen-codin .modal-codin-icon {
  width: 28px;
  height: 28px;

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

  font-weight: bold;
  font-size: 16px;

  color:  #026c6c;
  background: #e6f0ff;
  border-radius: 50%;
}

/* Texto */
.screen-codin .modal-codin-text {
  font-size: 14px;
  line-height: 1.4;
  color: #d6dde6;
}

/* Rodapé */
.screen-codin .modal-codin-footer {
  display: flex;
  justify-content: center;
}

.screen-codin .modal-codin-ok {
  width: 120px;
  height: 36px;

  font-size: 14px;
  color: #e6f0ff;

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

  border: 1px solid #222832;
  border-radius: 4px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 2px 6px rgba(0,0,0,0.6);
}

.screen-codin .modal-codin-ok:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8);
}
/* ===============================
   TECLADO NUMÉRICO – CONSULTA
   =============================== */

#consulta-keyboard {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);

  width: 75%;
  max-width: 260px;

  background: #1e2126;
  border-radius: 6px;
  padding: 12px;

  display: none;
  z-index: 50;

  pointer-events: none;
}

#consulta-keyboard.show {
  display: block;
  pointer-events: auto;
}

#consulta-keyboard .keyboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

#consulta-keyboard .key {
  height: 44px;
  background: #2a2d33;
  color: #fff;
  border: none;
  border-radius: 6px;
}

#consulta-keyboard .key:hover {
  background: #026c6c;
}

#consulta-keyboard .key:active {
  background: #026c6c;
  transform: scale(0.97);
}


/*--------------------------------------------------------------
# Consulta - MODAL
--------------------------------------------------------------*/

.screen-consulta .modal-consulta-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 50;
}

.screen-consulta .modal-consulta {
  width: 300px;
  padding: 18px 16px;

  background: linear-gradient(
    to bottom,
    #1d2229,
    #111419
  );

  border: 1px solid #3a404a;
  border-radius: 6px;

  box-shadow:
    inset 0 0 0 1px #222832,
    0 10px 30px rgba(0,0,0,0.8);
}

/* Cabeçalho */
.screen-consulta .modal-consulta-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.screen-consulta .modal-consulta-icon {
  width: 28px;
  height: 28px;

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

  font-weight: bold;
  font-size: 16px;

  color:  #026c6c;
  background: #e6f0ff;
  border-radius: 50%;
}

/* Texto */
.screen-consulta .modal-consulta-text {
  font-size: 14px;
  line-height: 1.4;
  color: #d6dde6;
}

/* Rodapé */
.screen-consulta .modal-consulta-footer {
  display: flex;
  justify-content: center;
}

.screen-consulta .modal-consulta-ok {
  width: 120px;
  height: 36px;

  font-size: 14px;
  color: #e6f0ff;

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

  border: 1px solid #222832;
  border-radius: 4px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 2px 6px rgba(0,0,0,0.6);
}

.screen-consulta .modal-consulta-ok:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8);
}


/*--------------------------------------------------------------
# Consulta - CONEX SELECTOR
--------------------------------------------------------------*/

.conex-extra{
  display:none;
}

/* ===============================
   TECLADO NUMÉRICO – CONSULTA - Porta
   =============================== */

#conexao-keyboard {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);

  width: 75%;
  max-width: 260px;

  background: #1e2126;
  border-radius: 6px;
  padding: 12px;

  display: none;
  z-index: 50;

  pointer-events: none;
}

#conexao-keyboard.show {
  display: block;
  pointer-events: auto;
}

#conexao-keyboard .keyboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

#conexao-keyboard .key {
  height: 44px;
  background: #2a2d33;
  color: #fff;
  border: none;
  border-radius: 6px;
}

#conexao-keyboard .key:hover {
  background: #026c6c;
}

#conexao-keyboard .key:active {
  background: #026c6c;
  transform: scale(0.97);
}


/*--------------------------------------------------------------
# Modal Sistema (Reutilizável)
--------------------------------------------------------------*/

.screen-sistema .modal-sistema-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 50;
}

.screen-sistema .modal-sistema {
  width: 300px;
  padding: 18px 16px;

  background: linear-gradient(
    to bottom,
    #1d2229,
    #111419
  );

  border: 1px solid #3a404a;
  border-radius: 6px;

  box-shadow:
    inset 0 0 0 1px #222832,
    0 10px 30px rgba(0,0,0,0.8);
}

/* Header */
.screen-sistema .modal-sistema-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

/* Ícone */
.screen-sistema .modal-sistema-icon {
  width: 28px;
  height: 28px;

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

  font-weight: bold;
  font-size: 16px;

  color: #026c6c;
  background: #e6f0ff;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Texto */
.screen-sistema .modal-sistema-text {
  font-size: 14px;
  line-height: 1.4;
  color: #d6dde6;
}

/* Footer */
.screen-sistema .modal-sistema-footer {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* Botões */
.screen-sistema .modal-sistema-btn {
  width: 80px;
  height: 36px;

  font-size: 14px;
  color: #e6f0ff;

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

  border: 1px solid #222832;
  border-radius: 4px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 2px 6px rgba(0,0,0,0.6);
}

.screen-sistema .modal-sistema-btn:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8);
}

#idioma-atual{
  text-align: right;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.5rem;
  color: #9b9b9b;
}


/*--------------------------------------------------------------
# Upload de Usuário
--------------------------------------------------------------*/

/* Inputs */
.upload-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 6.7rem;

}

.upload-field label {
  text-align: center;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.85rem;
  color: #e5e5e5;
}

.upload-field input {
  height: 30px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.35);
  color: #fff;
  outline: none;
}

.upload-field input:focus {
  border-color: #2ecc71;
}
/*--------------------------------------------------------------
# Modal Portas
--------------------------------------------------------------*/


.screen-portas .modal-portas-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 50;
}

.screen-portas .modal-portas {
  width: 300px;
  padding: 18px 16px;

  background: linear-gradient(
    to bottom,
    #1d2229,
    #111419
  );

  border: 1px solid #3a404a;
  border-radius: 6px;

  box-shadow:
    inset 0 0 0 1px #222832,
    0 10px 30px rgba(0,0,0,0.8);
}

/* Cabeçalho */
.screen-portas .modal-portas-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.screen-portas .modal-portas-icon {
  width: 28px;
  height: 28px;

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

  font-weight: bold;
  font-size: 16px;

  color:  #026c6c;
  background: #e6f0ff;
  border-radius: 50%;
}

/* Texto */
.screen-portas .modal-portas-text {
  font-size: 14px;
  line-height: 1.4;
  color: #d6dde6;
}

/* Rodapé */
.screen-portas .modal-portas-footer {
  display: flex;
  justify-content: center;
}

.screen-portas .modal-portas-ok {
  width: 120px;
  height: 36px;

  font-size: 14px;
  color: #e6f0ff;

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

  border: 1px solid #222832;
  border-radius: 4px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 2px 6px rgba(0,0,0,0.6);
}

.screen-portas .modal-portas-ok:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8);
}

/* =========================================
   Modal QRCode
========================================= */

.screen-modo-de-operacao {
  position: relative;
}

/* Overlay */
.screen-modo-de-operacao .modal-qrcode-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.75);

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

  z-index: 999;
}

/* Caixa */
.screen-modo-de-operacao .modal-qrcode {
  width: 280px;
  padding: 20px;

  background: linear-gradient(
    to bottom,
    #2a2f36,
    #20242a
  );

  border: 1px solid #1a1d22;
  border-radius: 6px;

  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Imagem */
.qrcode-img {
  width: 100%;
  display: block;
}

/* Footer */
.modal-qrcode-footer {
  display: flex;
  justify-content: center;
}

.modal-qrcode-ok {
  width: 100%;
  height: 38px;

  font-size: 14px;
  color: #e6f0ff;

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

  border: 1px solid #222832;
  border-radius: 4px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 2px 6px rgba(0,0,0,0.6);
}

.modal-qrcode-ok:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8);
}



/* Efeito glassmorphism no modal (permanece igual) */
.glass-modal .modal-content {
  background: #003b3da9;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  color: #fff;
  overflow: hidden;
}

/*--------------------------------------------------------------
# Tutorial Base
--------------------------------------------------------------*/
.help-sidebar {
  position: fixed;
  right: 15%;
  top: 80px;
  width: 320px;
  max-height: 80vh;
  overflow-y: auto;
  background: #003b3d;
  color: #ffffff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  z-index: 9999;
  display: none;
}

.help-sidebar.active {
  display: block;
}


/*--------------------------------------------------------------
# Lista de Usuários
--------------------------------------------------------------*/

.metal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 5px;
  background: linear-gradient(
    180deg,
    #9ea7b3 0%,
    #7f8894 40%,
    #6c7682 60%,
    #8e98a5 100%
  );
  border-top: 1px solid rgba(255,255,255,0.4);
  border-bottom: 1px solid rgba(0,0,0,0.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -2px 4px rgba(0,0,0,0.2);
}

.metal-col {
  flex: 1;
  text-align: center;
  font-family: "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 300;
  color: #eaf2ff;
  letter-spacing: 0.5px;
  text-shadow:
    0 1px 1px rgba(0,0,0,0.6),
    0 0 1px rgba(255,255,255,0.3);
}

/* Linha vertical divisória opcional */
.metal-col:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,0.2);
}



.footer-lista{
  display: flex;
  flex-direction: row;
  background: linear-gradient(
    to bottom,
    #3a3e47 0%,
    #2e3239 40%,
    #23252c 100%
  );
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.arrow-img{
  width: 35px;
}

/* ================================================
   RESPONSIVO: MOBILE (telas menores que 768px)
================================================ */

/* Ajusta o container do aparelho inteiro */
@media (max-width: 768px) {
  .modal-device-body {
    width: 85vw;                  /* Ocupa mais da tela no mobile */
    max-width: 380px;             /* Limita para não ficar gigante em tablets */
    transform: scale(1);          /* Remove o scale(1.15) que distorce no mobile */
    margin: 0 auto;               /* Centraliza horizontalmente */
  }

  .modal-device .modal-content {
    margin-left: 0;               /* Remove o margin-left: 70px do desktop */
    margin: 0 10px;               /* Margem pequena nas laterais */
  }

  /* Tela interna do aparelho */
  .device-screen {
    top: 14%;                     /* Ajusta um pouco para caber melhor */
    left: 8%;
    width: 84%;
    height: 68%;
  }

  /* Headers menores */
  .screen-base-header,
  .screen-base-header.autenticacao {
    height: 36px;                 /* Header mais baixo no mobile */
    padding: 0 6px;
  }

  .clock-time {
    font-size: 1.4rem;            /* Relógio menor */
  }

  .clock-date {
    font-size: 0.6rem;
  }

  .title {
    font-size: 0.55rem;           /* Títulos menores */
  }

  /* Menu itens (Página Inicial, Sistema, etc.) */
  .menu-item {
    height: 38px;
    padding: 0 12px;
    font-size: 0.75rem;           /* Texto menor */
    gap: 10px;
  }

  .system-text {
    font-size: 0.55rem;
  }

  i.bi {
    font-size: 1.1rem;            /* Ícones um pouco menores */
  }

  /* Inputs e botões de login */
  .autenticacao-login {
    gap: 14px;
    width: 90%;
    max-width: 300px;
  }

  .login-field input,
  .login-field label {
    font-size: 0.8rem;
  }

  .login-btn {
    height: 38px;
    font-size: 0.9rem;
  }

  /* Botões operacionais (Salvar, Aplicar, etc.) */
  .operacao-btn {
    height: 30px;
    padding: 0 16px;
    font-size: 0.55rem;
  }

  /* Switches */
  .switch {
    width: 38px;
    height: 20px;
  }

  .switch::after {
    width: 16px;
    height: 16px;
  }

  .switch.active::after {
    transform: translateX(18px);
  }

  /* Teclados numéricos */
  .numeric-keyboard,
  #ip-keyboard,
  #codin-keyboard,
  #consulta-keyboard,
  #conexao-keyboard {
    width: 90%;
    max-width: 280px;
    bottom: 10px;
    padding: 10px;
  }

  .key {
    height: 40px;
    font-size: 0.9rem;
  }

  /* Circular sliders (volume, flash) */
  .circular-slider {
    width: 200px;
    height: 200px;
  }

  .progress-ring {
    width: 200px;
    height: 200px;
  }

  .slider-value {
    font-size: 2.2rem;
  }

  /* Sidebar de tutorial (se ainda usar) */
  .help-sidebar {
    width: 280px;
    right: 10px;                  /* Mais colado na borda direita do aparelho */
    top: 60px;
    font-size: 0.85rem;
    padding: 12px;
  }
}

/* Telas muito pequenas (< 480px) - ex: iPhone SE */
@media (max-width: 480px) {
  .modal-device-body {
    width: 92vw;
    max-width: 340px;
  }

  .device-screen {
    top: 13%;
    left: 6%;
    width: 88%;
    height: 70%;
  }

  .menu-item {
    height: 34px;
    font-size: 0.7rem;
    padding: 0 10px;
  }

  .clock-time {
    font-size: 1.2rem;
  }

  .login-btn,
  .operacao-btn {
    height: 36px;
    font-size: 0.85rem;
  }

  .circular-slider {
    width: 180px;
    height: 180px;
  }

  .slider-value {
    font-size: 2rem;
  }
}
/* Ajuste proporcional da tela interna em mobile */
@media (max-width: 768px) {
  .modal-device-body {
    width: 85vw;
    max-width: 380px;
    transform: scale(1); /* remove o scale(1.15) do desktop */
    margin: 20px auto;   /* centraliza melhor */
  }

  .device-screen {
    /* Mantém exatamente a mesma proporção do desktop */
    top: 16.5%;
    left: 11%;
    width: 78%;
    height: 66.5%;
    
    /* Mas escalamos a tela interna junto com o aparelho */
    transform: scale(0.92);          /* Ajuste fino: 0.9 ~ 0.95 dependendo do quanto quer reduzir */
    transform-origin: top left;      /* Escala a partir do canto superior esquerdo */
  }

  /* Corrige overflow que pode cortar o png */
  .device-screen {
    overflow: hidden;
  }
}

@media (max-width: 480px) {
  .device-screen {
    transform: scale(0.88);          /* Ainda menor em telas pequenas */
    margin-left: 3.5%;
  }
}

/* Botão de fechar na sidebar */
#tutorial-close-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: bold;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
  z-index: 10001;
  pointer-events: auto; /* Garante que cliques sejam capturados */
}

#tutorial-close-btn:hover {
  opacity: 1;
  color: #ff6b6b;
}

/*--------------------------------------------------------------
# Modal de Erro - Autenticação
--------------------------------------------------------------*/

.screen-autenticacao .modal-auth-error-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.60);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.screen-autenticacao .modal-auth-error {
  width: 300px;
  padding: 20px 16px;
  background: linear-gradient(to bottom, #1d2229, #111419);
  border: 1px solid #3a404a;
  border-radius: 6px;
  box-shadow: 
    inset 0 0 0 1px #222832,
    0 10px 30px rgba(0,0,0,0.8);
}

/* Cabeçalho com ícone vermelho */
.screen-autenticacao .modal-auth-error-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.screen-autenticacao .modal-auth-error-icon {
  width: 30px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  color: white;
  background: #c0392b;          /* vermelho erro */
  border-radius: 50%;
}

/* Texto */
.screen-autenticacao .modal-auth-error-text {
  font-size: 14px;
  line-height: 1.45;
  color: #e0e0e0;
  padding-top: 4px;
}

/* Rodapé */
.screen-autenticacao .modal-auth-error-footer {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.screen-autenticacao .modal-auth-error-ok {
  width: 110px;
  height: 38px;
  font-size: 14px;
  font-weight: 500;
  color: #e6f0ff;
  background: linear-gradient(to bottom, #2c343f, #222832);
  border: 1px solid #3a404a;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 2px 6px rgba(0,0,0,0.7);
}

.screen-authenticacao .modal-auth-error-ok:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.9);
  transform: translateY(1px);
}



/*--------------------------------------------------------------
# Atualização por USB
--------------------------------------------------------------*/

.modal-usb {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 50%;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  line-height: 1.4;
  color: #d6dde6;
  width: 100%;
  padding: 18px 16px;

  background: linear-gradient(
    to bottom,
    #1d2229,
    #111419
  );

  border: 1px solid #3a404a;
  border-radius: 6px;

  box-shadow:
    inset 0 0 0 1px #222832,
    0 10px 30px rgba(0,0,0,0.8);
}




/*--------------------------------------------------------------
# Modal NTP
--------------------------------------------------------------*/

.screen-ntp .modal-ntp-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 50;
}

.screen-ntp .modal-ntp {
  width: 300px;
  padding: 18px 16px;

  background: linear-gradient(
    to bottom,
    #1d2229,
    #111419
  );

  border: 1px solid #3a404a;
  border-radius: 6px;

  box-shadow:
    inset 0 0 0 1px #222832,
    0 10px 30px rgba(0,0,0,0.8);
}

/* Cabeçalho */
.screen-ntp .modal-ntp-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.screen-ntp .modal-ntp-icon {
  width: 28px;
  height: 28px;

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

  font-weight: bold;
  font-size: 16px;

  color:  #026c6c;
  background: #e6f0ff;
  border-radius: 50%;
}

/* Texto */
.screen-ntp .modal-ntp-text {
  font-size: 14px;
  line-height: 1.4;
  color: #d6dde6;
}

/* Rodapé */
.screen-ntp .modal-ntp-footer {
  display: flex;
  justify-content: center;
}

.screen-ntp .modal-ntp-ok {
  width: 120px;
  height: 36px;

  font-size: 14px;
  color: #e6f0ff;

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

  border: 1px solid #222832;
  border-radius: 4px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 2px 6px rgba(0,0,0,0.6);
}

.screen-ntp .modal-ntp-ok:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8);
}
/*--------------------------------------------------------------
# Novo Usuário > Face X Cartão
--------------------------------------------------------------*/


.system-text.veiculo{
  font-size: 0.5rem;
}



/* ==================== CONTAINER DOS 3 ELEMENTOS ==================== */
.face-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;           /* espaço entre o quadradinho e os botões */
}

/* ==================== INPUT PEQUENO QUADRADO (1 caractere) ==================== */
.upload-field.newuser {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.35);
  border-radius: 5px;
  /* removidos: flex-column, gap e margin-right */
}

.upload-field.newuser input {
  width: 100%;
  height: 100%;
  text-align: center;
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.15rem;
  color: #fff;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
}

.upload-field.newuser input:focus {
  border: 2px solid #2ecc71;   /* destaque verde igual ao resto do seu sistema */
}

/* ==================== BOTÕES (imagens) ==================== */
.user-buttons {
  display: flex;
  flex-direction: row;
  gap: 3px;
  /* removido: margin-right: 100% e background red */
}

.newuser-btn {
  height: 2rem;          /* mesma altura do quadradinho para alinhamento perfeito */
  width: auto;
  cursor: pointer;
}



/*--------------------------------------------------------------
# Novo Usuário - MODAL
--------------------------------------------------------------*/

.screen-novo-usuario .modal-newuser-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 50;
}

.screen-novo-usuario .modal-newuser {
  width: 300px;
  padding: 18px 16px;

  background: linear-gradient(
    to bottom,
    #1d2229,
    #111419
  );

  border: 1px solid #3a404a;
  border-radius: 6px;

  box-shadow:
    inset 0 0 0 1px #222832,
    0 10px 30px rgba(0,0,0,0.8);
}

/* Cabeçalho */
.screen-novo-usuario .modal-newuser-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.screen-novo-usuario .modal-newuser-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  color: white;
  background: #c0392b;          /* vermelho erro */
  border-radius: 50%;
}

/* Texto */
.screen-novo-usuario .modal-newuser-text {
  font-size: 14px;
  line-height: 1.4;
  color: #d6dde6;
}

/* Rodapé */
.screen-novo-usuario .modal-newuser-footer {
  display: flex;
  justify-content: center;
}

.screen-novo-usuario .modal-newuser-ok {
  width: 120px;
  height: 36px;

  font-size: 14px;
  color: #e6f0ff;

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

  border: 1px solid #222832;
  border-radius: 4px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 2px 6px rgba(0,0,0,0.6);
}

.screen-novo-usuario .modal-newuser-ok:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8);
}




/*--------------------------------------------------------------
# Cadastro Cartão
--------------------------------------------------------------*/
.iserir-manualmente{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.manual-insert-btn {
  /* Dimensões aproximadas da imagem */
  width: 10rem;              /* ajuste conforme o espaço que tiver */
  height: 52px;
  
  /* Formato */
  border-radius: 999px;      /* valor alto = cantos muito arredondados (pílula) */
  background: linear-gradient(145deg, #1a1a1a, #0f0f0f); /* fundo escuro pra destacar o glow */
  
  /* Borda + iluminação fake prateada */
  border: 2px solid transparent;
  background-clip: padding-box; /* importante pro gradiente da borda */
  box-shadow: 
    inset 0 0 12px rgba(255, 255, 255, 0.12),          /* luz interna suave */
    0 0 20px rgba(255, 255, 255, 0.25),                /* glow externo principal */
    inset 0 2px 6px rgba(255, 255, 255, 0.08);         /* highlight na parte de cima */
  
  /* Efeito de borda prateada mais realista */
  position: relative;
}

.manual-insert-btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  padding: 2px;
  background: linear-gradient(
    to right,
    rgba(180, 180, 255, 0.4),
    rgba(255, 255, 255, 0.7) 60%,
    rgba(180, 180, 255, 0.4)
  );

  /* padrão */
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);

  /* webkit */
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
}

/* Texto */
.manual-insert-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.4px;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}


#arrow-inserir{
  width: 5rem;
  
}

#text-manualmente{
  font-size: 0.7rem;
  margin-top: 10%;
  text-align: center;

}

.cadastro-estrutura{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 50%;
}

.cadastro-buttons-estrutura{
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}

.operacao-btn.cadastro{
  width: 90%;
}

#cancelar-cadastro{
  background-color: rgb(202, 19, 19);
}

#cancelar-cadastro:hover{
  background-color: rgb(255, 0, 0);
}


/*--------------------------------------------------------------
# Opções Leitora Facial - MODAL
--------------------------------------------------------------*/

.screen-opcoes-leitora-facial .modal-leitora-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 50;
}

.screen-opcoes-leitora-facial .modal-leitora {
  width: 300px;
  padding: 18px 16px;

  background: linear-gradient(
    to bottom,
    #1d2229,
    #111419
  );

  border: 1px solid #3a404a;
  border-radius: 6px;

  box-shadow:
    inset 0 0 0 1px #222832,
    0 10px 30px rgba(0,0,0,0.8);
}

/* Cabeçalho */
.screen-opcoes-leitora-facial .modal-leitora-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.screen-opcoes-leitora-facial .modal-leitora-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  color:  #026c6c;
  background: #e6f0ff;
  border-radius: 50%;
}

/* Texto */
.screen-opcoes-leitora-facial .modal-leitora-text {
  font-size: 14px;
  line-height: 1.4;
  color: #d6dde6;
}

/* Rodapé */
.screen-opcoes-leitora-facial .modal-leitora-footer {
  display: flex;
  justify-content: center;
}

.screen-opcoes-leitora-facial .modal-leitora-ok {
  width: 120px;
  height: 36px;

  font-size: 14px;
  color: #e6f0ff;

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

  border: 1px solid #222832;
  border-radius: 4px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 2px 6px rgba(0,0,0,0.6);
}

.screen-opcoes-leitora-facial .modal-leitora-ok:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8);
}

/*--------------------------------------------------------------
# Opções Leitora Wiegand - MODAL
--------------------------------------------------------------*/

.screen-opcoes-leitora-wiegand .modal-w-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 50;
}

.screen-opcoes-leitora-wiegand .modal-w {
  width: 300px;
  padding: 18px 16px;

  background: linear-gradient(
    to bottom,
    #1d2229,
    #111419
  );

  border: 1px solid #3a404a;
  border-radius: 6px;

  box-shadow:
    inset 0 0 0 1px #222832,
    0 10px 30px rgba(0,0,0,0.8);
}

/* Cabeçalho */
.screen-opcoes-leitora-wiegand .modal-w-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.screen-opcoes-leitora-wiegand .modal-w-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  color:  #026c6c;
  background: #e6f0ff;
  border-radius: 50%;
}

/* Texto */
.screen-opcoes-leitora-wiegand .modal-w-text {
  font-size: 14px;
  line-height: 1.4;
  color: #d6dde6;
}

/* Rodapé */
.screen-opcoes-leitora-wiegand .modal-w-footer {
  display: flex;
  justify-content: center;
}

.screen-opcoes-leitora-wiegand .modal-w-ok {
  width: 120px;
  height: 36px;

  font-size: 14px;
  color: #e6f0ff;

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

  border: 1px solid #222832;
  border-radius: 4px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 2px 6px rgba(0,0,0,0.6);
}

.screen-opcoes-leitora-facial .modal-s-ok:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8);
}


/*--------------------------------------------------------------
# Opções Leitora Smart - INPUT
--------------------------------------------------------------*/



.upload-field.smart {
  width: 6.7rem;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.35);
  border-radius: 5px;
  /* removidos: flex-column, gap e margin-right */
}

.upload-field.smart input {
  width: 100%;
  height: 100%;
  text-align: center;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.8rem;
  color: #fff;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
}

.upload-field.smart input:focus {
  border: 2px solid #2ecc71;   /* destaque verde igual ao resto do seu sistema */
}

#menu-s4,
#menu-s5{
display:none;
}

/*--------------------------------------------------------------
# Opções Leitora Smart - Menu itens
--------------------------------------------------------------*/
.container-pagina-inicial.smart{
  width: 100%;
  padding-top: 40px;
  padding-bottom: 10px;
  display: flex;
  flex-direction: column;

  
}

/*--------------------------------------------------------------
# Opções Leitora Smart - MODAL
--------------------------------------------------------------*/

.screen-opcoes-leitora-smart .modal-s-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 50;
}

.screen-opcoes-leitora-smart .modal-s {
  width: 300px;
  padding: 18px 16px;

  background: linear-gradient(
    to bottom,
    #1d2229,
    #111419
  );

  border: 1px solid #3a404a;
  border-radius: 6px;

  box-shadow:
    inset 0 0 0 1px #222832,
    0 10px 30px rgba(0,0,0,0.8);
}

/* Cabeçalho */
.screen-opcoes-leitora-smart .modal-s-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.screen-opcoes-leitora-smart .modal-s-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  color:  #026c6c;
  background: #e6f0ff;
  border-radius: 50%;
}

/* Texto */
.screen-opcoes-leitora-smart .modal-s-text {
  font-size: 14px;
  line-height: 1.4;
  color: #d6dde6;
}

/* Rodapé */
.screen-opcoes-leitora-smart .modal-s-footer {
  display: flex;
  justify-content: center;
}

.screen-opcoes-leitora-smart .modal-s-ok {
  width: 120px;
  height: 36px;

  font-size: 14px;
  color: #e6f0ff;

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

  border: 1px solid #222832;
  border-radius: 4px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 2px 6px rgba(0,0,0,0.6);
}

.screen-opcoes-leitora-smart .modal-s-ok:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8);
}

/*--------------------------------------------------------------
# Senha mestre - MODAL
--------------------------------------------------------------*/
/* Overlay - posicionamento relativo à tela (absolute como nos seus exemplos) */
.screen-senha-mestre .modal-senha-mestre-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

/* Container principal do modal */
.screen-senha-mestre .modal-senha-mestre {
  width: 300px;
  padding: 18px 16px;
  background: linear-gradient(to bottom, #1d2229, #111419);
  border: 1px solid #3a404a;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px #222832, 0 10px 30px rgba(0,0,0,0.8);
}

/* Cabeçalho com ícone + texto */
.screen-senha-mestre .modal-senha-mestre-header {
  display: flex;
  align-items: center;          /* alinhado verticalmente no centro */
  gap: 12px;
  margin-bottom: 16px;
}

/* Ícone de erro (X vermelho) */
.screen-senha-mestre .modal-senha-mestre.modal-error .modal-senha-mestre-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 20px;
  color: white;
  background: #c0392b;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Ícone de sucesso (✓ verde/teal) */
.screen-senha-mestre .modal-senha-mestre.modal-success .modal-senha-mestre-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 24px;
  color: #ffffff;
  background: #04c02d;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Texto do título */
.screen-senha-mestre .modal-senha-mestre-text {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.3;
  color: #d6dde6;
  flex: 1;
}

/* Corpo da mensagem */
.screen-senha-mestre .modal-senha-mestre-body {
  font-size: 14px;
  line-height: 1.45;
  color: #a0a8b5;
  margin-bottom: 20px;
  text-align: center;
}

/* Rodapé com botão OK centralizado */
.screen-senha-mestre .modal-senha-mestre-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Botão OK - agora perfeitamente centralizado */
.screen-senha-mestre .modal-senha-mestre-ok {
  width: 120px;
  height: 36px;
  font-size: 14px;
  font-weight: 500;
  color: #e6f0ff;
  background: linear-gradient(to bottom, #222832, #222832);
  border: 1px solid #222832;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 6px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.15s ease;
}

.screen-senha-mestre .modal-senha-mestre-ok:hover {
  background: linear-gradient(to bottom, #2c343f, #2c343f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 3px 8px rgba(0,0,0,0.7);
}

.screen-senha-mestre .modal-senha-mestre-ok:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
  transform: translateY(1px);
}

/*--------------------------------------------------------------
# Configurador de Chave
--------------------------------------------------------------*/
.btn-chave{  
  width: 100%;
  height: 36px;
  font-size: 14px;
  font-weight: 500;
  color: #e6f0ff;
  background: linear-gradient(to bottom, #222832, #222832);
  border: 1px solid #222832;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 6px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.15s ease;
}

/*--------------------------------------------------------------
# Configurações Conex - MODAL
--------------------------------------------------------------*/

.screen-configuracoes-conex .modal-conex-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 50;
}

.screen-configuracoes-conex .modal-conex {
  width: 300px;
  padding: 18px 16px;

  background: linear-gradient(
    to bottom,
    #1d2229,
    #111419
  );

  border: 1px solid #3a404a;
  border-radius: 6px;

  box-shadow:
    inset 0 0 0 1px #222832,
    0 10px 30px rgba(0,0,0,0.8);
}

/* Cabeçalho */
.screen-configuracoes-conex .modal-conex-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.screen-configuracoes-conex .modal-conex-icon {
  width: 28px;
  height: 28px;

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

  font-weight: bold;
  font-size: 16px;

  color:  #026c6c;
  background: #e6f0ff;
  border-radius: 50%;
}

/* Texto */
.screen-configuracoes-conex .modal-conex-text {
  font-size: 14px;
  line-height: 1.4;
  color: #d6dde6;
}

/* Rodapé */
.screen-configuracoes-conex .modal-conex-footer {
  display: flex;
  justify-content: center;
}

.screen-configuracoes-conex .modal-conex-ok {
  width: 120px;
  height: 36px;

  font-size: 14px;
  color: #e6f0ff;

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

  border: 1px solid #222832;
  border-radius: 4px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 2px 6px rgba(0,0,0,0.6);
}

.screen-configuracoes-conex .modal-conex-ok:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8);
}
/*--------------------------------------------------------------
# Configurações Globais Conex - MODAL
--------------------------------------------------------------*/

.screen-configuracoes-globais-conex .modal-conexg-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 50;
}

.screen-configuracoes-globais-conex .modal-conexg {
  width: 300px;
  padding: 18px 16px;

  background: linear-gradient(
    to bottom,
    #1d2229,
    #111419
  );

  border: 1px solid #3a404a;
  border-radius: 6px;

  box-shadow:
    inset 0 0 0 1px #222832,
    0 10px 30px rgba(0,0,0,0.8);
}

/* Cabeçalho */
.screen-configuracoes-globais-conex .modal-conexg-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.screen-configuracoes-globais-conex .modal-conexg-icon {
  width: 28px;
  height: 28px;

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

  font-weight: bold;
  font-size: 16px;

  color:  #026c6c;
  background: #e6f0ff;
  border-radius: 50%;
}

/* Texto */
.screen-configuracoes-globais-conex .modal-conexg-text {
  font-size: 14px;
  line-height: 1.4;
  color: #d6dde6;
}

/* Rodapé */
.screen-configuracoes-globais-conex .modal-conexg-footer {
  display: flex;
  justify-content: center;
}

.screen-configuracoes-globais-conex .modal-conexg-ok {
  width: 120px;
  height: 36px;

  font-size: 14px;
  color: #e6f0ff;

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

  border: 1px solid #222832;
  border-radius: 4px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 2px 6px rgba(0,0,0,0.6);
}

.screen-configuracoes-globais-conex .modal-conexg-ok:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8);
}
/*--------------------------------------------------------------
# Configurações Conex Online - MODAL
--------------------------------------------------------------*/

.screen-conex-online .modal-conexo-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 50;
}

.screen-conex-online .modal-conexo {
  width: 300px;
  padding: 18px 16px;

  background: linear-gradient(
    to bottom,
    #1d2229,
    #111419
  );

  border: 1px solid #3a404a;
  border-radius: 6px;

  box-shadow:
    inset 0 0 0 1px #222832,
    0 10px 30px rgba(0,0,0,0.8);
}

/* Cabeçalho */
.screen-conex-online .modal-conexo-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.screen-conex-online .modal-conexo-icon {
  width: 28px;
  height: 28px;

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

  font-weight: bold;
  font-size: 16px;

  color:  #026c6c;
  background: #e6f0ff;
  border-radius: 50%;
}

/* Texto */
.screen-conex-online .modal-conexo-text {
  font-size: 14px;
  line-height: 1.4;
  color: #d6dde6;
}

/* Rodapé */
.screen-conex-online .modal-conexo-footer {
  display: flex;
  justify-content: center;
}

.screen-conex-online .modal-conexo-ok {
  width: 120px;
  height: 36px;

  font-size: 14px;
  color: #e6f0ff;

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

  border: 1px solid #222832;
  border-radius: 4px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 2px 6px rgba(0,0,0,0.6);
}

.screen-conex-online .modal-conexo-ok:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8);
}

/*--------------------------------------------------------------
# Configurações Conex Offline - MODAL
--------------------------------------------------------------*/

.screen-conex-offline .modal-conexf-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 50;
}

.screen-conex-offline .modal-conexf {
  width: 300px;
  padding: 18px 16px;

  background: linear-gradient(
    to bottom,
    #1d2229,
    #111419
  );

  border: 1px solid #3a404a;
  border-radius: 6px;

  box-shadow:
    inset 0 0 0 1px #222832,
    0 10px 30px rgba(0,0,0,0.8);
}

/* Cabeçalho */
.screen-conex-offline .modal-conexf-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.screen-conex-offline .modal-conexf-icon {
  width: 28px;
  height: 28px;

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

  font-weight: bold;
  font-size: 16px;

  color:  #026c6c;
  background: #e6f0ff;
  border-radius: 50%;
}

/* Texto */
.screen-conex-offline .modal-conexf-text {
  font-size: 14px;
  line-height: 1.4;
  color: #d6dde6;
}

/* Rodapé */
.screen-conex-offline .modal-conexf-footer {
  display: flex;
  justify-content: center;
}

.screen-conex-offline .modal-conexf-ok {
  width: 120px;
  height: 36px;

  font-size: 14px;
  color: #e6f0ff;

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

  border: 1px solid #222832;
  border-radius: 4px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 2px 6px rgba(0,0,0,0.6);
}

.screen-conex-offline .modal-conexf-ok:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8);
}


/* FOOTER FIXO - CLASSES EXCLUSIVAS */
/* FOOTER SAUDER */

footer.sfi-footer-fixed {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;

  width: 100% !important;
  margin: 0 !important;


  color: #fff !important;

  z-index: 999999 !important;

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

  padding: 10px 20px !important;
  box-sizing: border-box !important;
}

footer.sfi-footer-fixed .sfi-footer-container {
  text-align: center !important;
  width: 100% !important;
}

footer.sfi-footer-fixed a {
  color: #4da3ff !important;
  text-decoration: none !important;
}