#btnInstall {
              display: none;
              padding: 10px 20px;
              font-size: 1.6rem;
              background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
              border: none;
              border-radius: 5px;
              cursor: pointer;
              align-items: center;
              justify-items: center;
              position: absolute;
              z-index: 9999;
              width: 98dvw;
    }

.btnInstall_Acao{display: grid;
                  }

.Tela_Principal{display: grid;
                position: relative;
                  grid-auto-rows: 90dvh 10dvh;
                  width: 98dvw;
                  height: 98dvh;
                  overflow: hidden;
                  align-items: center;
                  justify-items: center;
                  margin: 0;
                  padding: 0;
}

.Tela_Principal_Prof{
                  grid-auto-rows: 90dvh;
                  width: 98dvw;
                  height: 98dvh;
                  overflow: hidden;
                  align-items: center;
                  justify-items: center;
                  margin: 0;
                  padding: 0;
}


.Controle_menur{display: flex;
              width: 95dvw;
              height: 8dvh;
              background-color: rgba(199, 247, 247, 0.4);
              overflow: hidden;
              align-items: center;
              margin: 0;
              padding: 0;
              margin-left: 0dvw;
              margin-right: 0dvw;
              justify-content: space-evenly;

            & figure {margin: 0;
                        padding: 0;
                        text-align: center;}

            & .Menu_Click {width: 6dvw;
                              height: 5dvh;
                              margin: 0;
                              padding: 0;}

            & .Menu_Click:hover {width: 7dvw;
                                    height: 6dvh;
                                    margin: 0;
                                    padding: 0;}

            }

.Menu_select {width: 7dvw;
                  height: 6dvh;
                  margin: 0;
                  padding: 0;}

.Menu_Selec_Bord{background-color: rgb(208, 169, 169,0.5);}

.Img_Menur {width: 10dvw;
            text-align: center;
            justify-self: center;
            margin: 0;
            padding: 0;
            height: 8dvh;
            display: grid;
            justify-items: center;
            align-items: center;}

.btt_Padrão {
            background-color: #4ca5af; /* verde */
            color: white;
            margin-top: 0.5rem;
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            width: 80dvw;
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

            & a {color: white;   
                    }

          }

.btt_Padrão:hover {transform: translateY(2%);
                }

.btn-fechar {
    position: absolute; 
    top: 0; 
    right: 0;
    color: #032b22; 
    border: none; 
    border-radius: 50%;
    width: 10dvw;
    height: 4dvh;
    font-size: 3.5rem;
    font-weight: bold; 
    text-align: center;
    Cursor: pointer;
    transition: 0.2s;
    background-color:  rgb(255, 255, 25, 0);
}

.Secao_Inicial {display: grid;
                  justify-items: center;
                  height: 85dvh;
                  grid-template-rows: 1fr 1fr 4fr 2fr 2fr;
                  justify-content: center;
                  align-items: start;
                  text-align: center;
                  margin-left: 4%;
                  margin-right: 4%;
                  margin: 2%;
                  width: 90dvw;
          }

.Secao_Botao_log{display: grid;
                  justify-items: center;}

.Centro_pag img{width: 60dvw;
                height: 20dvh;
                }

.Secao_Perfil {display: grid;
                justify-items: center;
                justify-content: center;
                height: 85dvh;
                grid-template-rows: 10dvh 18dvh 45dvh 15dvh;
                align-items: start;
                text-align: center;
                margin: 0%;
                width: 90dvw;
                width: 90dvw;

                & A:visited {
                    color: white;
                    text-decoration: none;}
                  
                & A {
                    color: white;
                    text-decoration: none;}

                  & h2 {font-size: 3rem;}

                  & p {font-size: 1.8rem;
                        text-align: center;
                        width: 100%;
                        margin-bottom: 0;
                        margin-top: 1dvh;}

                  & .Telefone{height: 6dvh;
                            aspect-ratio: 4 / 3;
                            width: 10dvw;
                            object-fit: contain;}

                  & img{height: 15dvh;
                        aspect-ratio: 4 / 3;
                        width: 18dvw;
                        object-fit: contain;}

                  & .Diario{height: 8dvh;
                            aspect-ratio: 4 / 3;
                            width: 14dvw;
                            object-fit: contain;}   
                        
                  & .Chamada{height: 4.5dvh;
                            aspect-ratio: 4 / 3;
                            width: auto;
                            object-fit: contain;}
          }

.DadosClientes{display: block;
               ;width: 80dvw;

              & input {width: 80dvw;
                      text-align: center;
                      border: 0.05dvh solid;
                      padding: 0.5dvh;
                      margin-top: 0.5dvh;
                      background: cornsilk;
                      border-radius: 1dvh;
                      }
              
              }

.Top_Menu{display: grid;
          grid-template-columns: 1fr 1fr;
          justify-items: center;
          align-items: center;
        
        & div{display: grid;
              justify-items: center;
              gap: 2dvh;
              align-items: center;}
      }

.Secao_Galeria {display: grid;
                  grid-template-rows: 10dvh 70dvh 5dvh;
                  justify-items: center;
                  height: 85dvh;
                  min-height: 85dvh;
                  max-height: 85dvh;
                  justify-content: center;
                  align-items: start;
                  text-align: center;
                  margin: 0%;
                  width: 90dvw;
                  gap: 1dvh;

                  & h2 {font-size: 3rem;}

                  & p {font-size: 1.8rem;}

                  & img{width: 40dvw;}
          }

.Linha_Galeria{display: grid;
              grid-template-columns: 20% 60% 20%;
              align-items: center;
              justify-items: center;
              height: 9.5dvh;
              width: 90dvw;
              background-color: rgb(249, 222, 214, 0.3);
              border: 0.01rem solid black;

            & img {width: 7dvh;
                  max-width: 7dvh;
                  min-width: 4dvh;
                  height: 8dvh;
                  min-height: 8dvh;
                  max-height: 8dvh;
                  object-fit: contain;}

            & .Seta{width: 3dvh;
                  max-width: 3dvh;
                  min-width: 3dvh;
                  }

            & P {margin: 0;
                padding-top: 0.7dvh;
                font-size: 1.4rem;}

            & .Button_Seta{display: grid;
                            gap: 2dvh;}
            
            }

.Linha_Agenda{display: grid;
              grid-template-columns: 20% 70% 10%;
              align-items: center;
              justify-items: start;
              height: 9.5dvh;
              width: 90dvw;
              background-color: rgb(249, 222, 214, 0.3);
              border: 0.01rem solid black;
              padding: 0;
              margin: 0;
              padding-left: 2dvw;
              padding-right: 2dvw;
              margin-bottom: 0.2dvh;


            & img {width: 7dvh;
                  max-width: 7dvh;
                  min-width: 4dvh;
                  height: 8dvh;
                  min-height: 8dvh;
                  max-height: 8dvh;
                  object-fit: contain;}

            & .Seta{width: 3dvh;
                  max-width: 3dvh;
                  min-width: 3dvh;
                  }

            & P {margin: 0;
                padding-top: 0.2dvh;
                text-align: start;
                font-size: 1.4rem;}

            & .Button_Seta{display: grid;
                            gap: 2dvh;}
            
            }

.Geleria_Clientes{display: grid;
                  gap: 0.2dvh;
                }

.Geleria_Clientes_Prof{display: grid;
                  gap: 0.2dvh;
                }

.Geleria_Clientes_Att { 
  
                  & .Linha_Galeria{height: 11.5dvh;}
                  
                      }

.Secao_Galeria_Prof {display: grid;
                  grid-template-rows: 7dvh 75dvh 5dvh;
                  justify-items: center;
                  height: 85dvh;
                  min-height: 85dvh;
                  max-height: 85dvh;
                  justify-content: center;
                  align-items: start;
                  text-align: center;
                  margin: 0%;
                  width: 90dvw;
                  gap: 1dvh;

                  & h2 {font-size: 3rem;}

                  & p {font-size: 1.4rem;}

                  & img{width: 40dvw;}
          }

.Linha_Galeria_Prof{display: grid;
              grid-template-columns: 15dvw 65dvw 10dvw;
              align-items: center;
              justify-items: center;
              height: 15dvh;
              width: 90dvw;
              background-color: rgb(249, 222, 214, 0.3);
              border: 0.1rem solid black;

            & img {width: 7dvh;
                  max-width: 7dvh;
                  min-width: 4dvh;
                  height: 8dvh;
                  min-height: 8dvh;
                  max-height: 8dvh;
                  object-fit: contain;}

            & .Seta{width: 3dvh;
                  max-width: 3dvh;
                  min-width: 3dvh;
                  }

            & P {margin: 0;
                padding-top: 0.7dvh;
                font-size: 1.4rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 65dvw;
                text-align: start;
                padding-left: 1dvw; }

            & .Button_Seta{display: grid;
                            gap: 2dvh;}
            
            }

.Paginacao{display: flex;
           align-items: flex-end;

          & .btt_Padrão_Pag {
            display: flex;
            width: auto;
            height: 4dvh;
            border: none;
            background-color: rgb(255, 255, 255, 0);
            font-size: 3rem;
            text-align: center;
            align-items: center;
          }

          & P {display: flex;
              padding-left:  5dvw;
              padding-right: 5dvw;
              text-align: center;
              align-items: center;
              margin: 0;
              font-size: 2rem;}
        }   

.Tela_agenda {display: grid;
                  justify-items: center;
                  height: 85dvh;
                  grid-template-rows: 5% 95%;
                  justify-content: center;
                  align-items: start;
                  text-align: center;
                  margin: 0%;
                  width: 90dvw;

                  & h2 {font-size: 3rem;}

                  & p {font-size: 1.8rem;}

                  & img{width: 40dvw;}

                  & .Diario{width: 18dvw;
                            padding-left: 5dvw;}
          }

/* Estilo geral */
.Agendamento {
  font-family: Arial, sans-serif;
  padding: 0;
  max-width: 90dvw;
  margin: auto;
}

/* Cabeçalho do mês */
#month-year {
  text-align: center;
  font-size: 2.4rem;
  margin: 2%;
}

/* Navegação de meses */
.month-nav {display: flex;
            justify-content: space-evenly;
            gap: 2dvw;
            margin-bottom: 2rem;
            width: 100%;
            align-items: center;

          & .btt_Padrão{ display: flex;
                        height: 4dvh;
                        max-height: 4dvh;
                        min-height: 4dvh;
                        width: 100%;
                        padding: 0;
                        align-items: center;
                        justify-content: center;}
                  
          & .btt_Padrão_Pag {
                    display: flex;
                    width: auto;
                    height: 4dvh;
                    max-height: 4dvh;
                    min-height: 4dvh;
                    border: none;
                    background-color: rgb(255, 255, 255, 0);
                    font-size:2dvh;
                    text-align: center;
                    align-items: center;
                  }
}

.day.tem-agenda {
  background: #ffeaa7;
  position: relative;
}

.day .badge {
  position: absolute;
  top: 2px;
  right: 4px;
  background: #e67e22;
  color: white;
  font-size: 0.7em;
  border-radius: 50%;
  padding: 2px 5px;
}

.month-btn {
  padding: 1rem 3rem;
  background-color: #0077cc;
  color: white;
  border: none;
  border-radius: 4%;
  cursor: pointer;
}

.month-btn:hover {
  background-color: #005fa3;
}

/* Calendário */
.calendar { display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 0.5dvh;
            margin-bottom: 20px;
            height: 40dvh;
            max-height: 40dvh;
            min-height: 40dvh;   
          }

.header {
    text-align: center;
    font-weight: bold;
    padding: 2%;
    background-color: #f0f0f0;
}

/* Tabela de agendamentos */
.tabela-container {
  margin-top: 2dvh;
  background-color: #fafafa;
  padding: 2%;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  min-height: 20dvh;
  height: 20dvh;
  max-height: 20dvh;
  overflow-y: auto;
  display: block;
  width: 90dvw;
  min-width: 90dvw;
  max-width: 90dvw;
}

/* Modal lateral */
.modal1 {
  position: fixed;
  top: 0;
  right: -400px;
  width: 350px;
  height: 100%;
  background-color: #ffffff;
  box-shadow: -2px 0 5px rgba(0,0,0,0.2);
  padding: 20px;
  transition: right 0.3s ease-in-out;
  z-index: 1000;
  overflow-y: auto;
}

.modal1.open {
  right: 0;
}

/* Formulário */
.form-group {
  margin-bottom: 15px;
}

.form-group-img{
  text-align: center;
}

label {
  display: block;
  font-weight: bold;
}

input,
select,
textarea {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

.agendar-btn {
            background-color: #4ca5af; /* verde */
            color: white;
            margin-top: 0.5rem;
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 100%;
}

.agendar-btn:hover {
  background-color: #4ca5af;
}

.close-btn {
            background-color: #dc3545;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            height: 5dvh;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 100%;
}

.close-btn:hover {
  background-color: #c82333;
}

.day {
  display: grid;
  grid-template-rows: 2fr 1fr;
  justify-items: center;
  align-items: center;
  text-align: center;
  align-content: center;
  padding: 0.5dvh;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 0 3px rgba(0,0,0,0.1);
  height: 6dvh;
}

.event-count {
  background: #2ecc71; /* verde */
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  margin-left: 5px;
  display: inline-block;
}

.day-has-event {
  background-color: #99e4ba !important; /* verde suave */
  color: white !important;
  border-radius: 6px;
}

.day.today {
  background-color: #4ca5af !important;
  color: white;
  font-weight: bold;
}

.selected-day {
  background-color: #55d9e7 !important;
  color: white !important;
}



.Detalhe_Agendamento{ text-align: center;
                      align-items: start;

            & button {background-color: #a9eaf1; /* verde */
                      color: white;
                      padding: 0.3dvh 1dvw;
                      border: none;
                      border-radius: 1dvh;
                      cursor: pointer;
                      width: 10dvw;
                      transition: background-color 0.3s ease, transform 0.2s ease;
                      box-shadow: 0 1dvw 1.5dvw rgba(0, 0, 0, 0.1);
            }

          }

.Tela_Diario{position: absolute;
              width: 100%;
              z-index: 99;
              top:2%;
              top: -10dvh;
            }

#editor { 
      height: 55dvh;
      background: #fff;
      margin-top: 3dvh;
      font-size: 1.5dvh;
    }

.Tela_Diario {
      position: absolute;
      z-index: 9999;
    }

.hidden {top: 9dvh;
          padding: 0dvh;
          padding-left: 0.5dvw;
          padding-right: 0.5dvw;
          margin: 0;
          margin: 0.5dvh;
          height: 98dvh;
          background: linear-gradient(rgba(266, 266, 266, 0.4)), url(../imagens/Fundo_Sup/designer-vitaminac.png) center / cover no-repeat;
          position: absolute;
          width: auto;
    }

.actions {
            justify-items: center;
    }

.actions h2 {
                cursor: pointer;
                color: white;
                display: inline;
                font-size: 1.2rem;
                justify-content: center;
                align-items: center;
                justify-items: center;
                margin: 0%;
                padding: 0.2dvh;
                padding-left: 5dvw;
                padding-right: 5dvw;
                border-radius: 10px;
                max-width: 40dvw;
                text-align: center;
                background-color: rgba(3, 38, 38, 0.74);
                transition: background-color 0.3s 
                      ease, transform 0.2s 
                      ease;}

.actions h2:hover {
      background-color: #064249;
      box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.1);
    }

#toolbar {
      background-color: white;
      border-radius: 10px 10px 0 0;
      border-bottom: 1px solid #ccc;
    }

.SalaAtendimento {top: 9dvh;
                  padding: 0dvh;
                  padding-left: auto;
                  padding-right: 1dvw;
                  margin: 0;
                  height: 100dvh;
                  background: linear-gradient(rgba(266, 266, 266, 0.8)), url(../imagens/Fundo_Sup/designer-azul.png) center / cover no-repeat;
                  position: absolute;
                  width: 99dvw;

                  & .ql-editor{
                            height: 100% !important;
                            background-color: #fdfdfd !important;
                            margin-left: 2%!important;
                            margin-right: 2%!important;

                          }

                  & .ql-container{
                            height: 20dvh !important;
                          }

                  & .ql-toolbar.ql-snow {
                                            border: 0px solid #ccc !important;
                                            }

                  & .ql-container.ql-snow {
                                                border: 0px solid #ccc!important;
                                              }
            }


.Sala_Video{display: grid;
            justify-items: center;       
      }

.TelaVideo{height: 69dvh;
            width: 90dvw;
            background: linear-gradient(rgba(100, 100, 100, 0.5));
            border-radius: 10px;
            text-align: center;
          }

.TelaComentario{display: grid;
                grid-template-rows: 34dvh 34dvh;
                height: 69dvh;
                width: 90dvw;
                background: linear-gradient(rgba(100, 100, 100, 0.5));
                border-radius: 10px;
                text-align: center;
              }

.Class_Atendimento{
                  justify-items: center;

                  & .btt_Padrão{ height: 3dvh;
                     margin-bottom: 0.1dvh;
                     padding: 0.8dvh;}

                  & h2 {font-size: 1.4rem;}
                  }

.Secao_Cadastro{position: absolute;
                top: 0;
                padding-top: 3%;
                z-index: 999;
                width: 100%;
                height: 100dvh;
                justify-items: center;
                background-color: rgb(85, 85, 85, 0.3);}

.Dados_Cadastro {display: grid;
                  grid-template-columns: 1fr 1fr;
                  gap: 1dvh;
                  width: 40dvh;
                  margin: 0;
                  padding: 0;
                  padding-right: 2dvh;
                  padding-left: 2dvh;
                  padding-bottom: 3dvh;
                  border-radius: 5dvh;
                  border: 0.1dvh rgb(27, 26, 26) solid;
                  background-color: rgb(221, 215, 250);

                & label {font-weight: bold;
                  }

                 & h2 {
                grid-column: 1 / span 2;   /* ocupa as 2 colunas */
                text-align: center; 
                padding: 0;
                margin: 2dvh;
              }

              & button {
                grid-column: 2 / span 1;   /* ocupa as 2 colunas */
                text-align: center;
                width: 20dvh;
                padding: 2%;
                margin: 0dvh;

              & input {margin-bottom: 0.7dvh;
                      display: block;
                      width: 100%;}
              }
  }

.toggle {
        position: relative;
        display: inline-flex;
        background: #899ee4;
        padding: 0.5dvh;
        border-radius: 2dvh;
        gap: 0;
      }

.toggle button {
                all: unset;
                text-align: center;
                cursor: pointer;
                font-weight: 600;
                font-size: 1.4rem;
                color: #f1f2f5;
                z-index: 2;
                transition: color .25s;
                width: 26dvw;
                padding-bottom: 1dvh;
                padding-top: 1dvh;
              }

.toggle button.active {
                      color: #2563eb;
                    }

.slider {
        position: absolute;
        top: 0.5dvh;
        left: 0dvw;
        width: 25dvw;           
        height: calc(100% - 1dvh);
        background: white;
        border-radius: 40px;
        box-shadow: 0 2px 6px rgba(37,99,235,0.25);
        transition: transform .25s ease;
        z-index: 1; 
      }

.Seletor_Atendimento{ justify-items: center;
                      display: grid;
                      margin-bottom: 0.5dvh;
                  }
            
.Base{display: flex;
        align-items: center;
        gap: 3dvw;
      }

.popup{display: grid;
        justify-items: center;
      }

.Hra_Atendimento{display: grid;
                  width: 90dvw;
                  grid-template-columns: 1fr 1fr;
                  gap: 5dvw;
                  justify-items: center;
                  align-items: baseline;
                  margin-top: 0.5dvh;

                  & input {margin: 0;
                          padding: 0;}
        }
  
.campo-hora {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: Arial, sans-serif;
}

.campo-hora label {
  font-size: 14px;
  color: #444;
}

.campo-hora input[type="time"] {
  padding:0.3dvh 2dvw;
  border: 1px solid #d0d0d0;
  border-radius: 10px;
  background: #fafafa;
  font-size: 1.4rem;
  color: #333;
  outline: none;
  transition: all 0.25s ease;
}

/* Deixa mais suave ao passar e focar */
.campo-hora input[type="time"]:hover {
  background: #f0f0f0;
  border-color: #bcbcbc;
}

.campo-hora input[type="time"]:focus {
  background: #fff;
  border-color: #6a9cff;
  box-shadow: 0 0 6px rgba(106, 156, 255, 0.4);
}

#meet {
    width:100%; 
    height:100%;
    background:black; 
    border-radius:10px;
  }

iframe {height:100% !important;}

.links{display: none;}

#avatarPerfil,
#avatarCliente{cursor: pointer;
              width: 30dvw;
              height: 15dvh;
              border-radius: 15%;
              object-fit:contain; 
              background:#f0f0f0
            }
    
.Img_Tb{width: 7dvw !important;
        min-width: 7dvw !important;
        max-width: 7dvw !important;
        min-height: 5dvh !important;
        max-height: 5dvh !important;
        height: 5dvh !important;
        border-radius: 50%;
        }
  
.editor4{ background-color: #e2e2e2;
          width: 100%;
          height: 90%;
          border-radius: 10px;
          border: 0.1dvw solid #726e6e;
        }

.Cont_Not{
  display: none;
  position: fixed;
  z-index: 9999;
}

.Cont_Not figure{
  margin: 0;
  cursor: grab;
  user-select: none;
  touch-action: none; /* essencial */
}

.Cont_Not.dragging figure{
  cursor: grabbing;
}

#btt_Alerta{width: 40dvw;
            }