/*FAKE BUTTONS*/
.fake_window_button,
.fake_window_button::before,
.fake_window_button::after {
    content: "";
    position: relative;
    width: 6px;
    height: 6px;

    border-radius: 50%;
    border-style: solid;
    border-width: 1px;
    border-color: white;
}

.fake_window_button{
    left: 15px;
    top: 0;
}

.fake_window_button::before {
    position: absolute;
    left: 10px;
    top: -1px;
}

.fake_window_button::after {
    left: 20px;
    top: -1px;

    position: absolute;
}

/*NAVBAR*/
.navbar{
    position: fixed;
    top: 10px; left: 10px;
    height: max-content;
    padding: 4px 0;

    left: 65%;

    width: 20%;
    

    background-color: black;
    border-color: white;
    border-style: solid;
    border-width: 1px;

    z-index: 2000;
}

.navbar *{
    z-index: 10;
    transform: translateX(-1.5px) translateY(1.5px);
}

.navbar::before{
    content: "";
    position:absolute;

    left: -5px;
    top: 5px;

    width: 100%;
    height: 100%;

    background-color: black;
    border: 1px solid #fff;
}

.navbar-toggler-icon{ /*MENU COMPACTO*/
    
    height: var(--font-sm);

    background-image: url("../elementos/navbar_icon.svg");
    background-size: contain;

    transform: rotate(-90deg) translateY(-100%);
    transform-origin: center;

    transition: transform 0.3s ease;
}

/* Ícone quando a navbar está aberta */
.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
  transform: rotate(0deg); /* volta para posição normal */
  transform: translateY(0);
}

.navbar-toggler{
    margin: 0;
    padding: 0;
    height: var(--font-sm);
}

.top_button_frame{
    margin: 0.5%;
    margin-left: 0;

    display: flex;
    justify-content: center;   /* horizontal */
    align-items: center;       /* vertical */

    height: 80%;
    width: 100%;
}

/* JANELAS */

.black-window{
    width: 80%;
    height: 50%;

    margin-left: 10%;
    margin-top: 20vh;

    background-color: black;
    border: white solid 2px;

    padding: 5%;
}

.black-window-bg{
    position: absolute;
    
    width: 78%;
    height: 50%;

    margin-left: 12%;
    margin-top: 22vh;

    background-color: white;

    transition: transform 0.1s ease;

    z-index: -1;
}

.black-window-alt{
    width: 80%;
    margin-left: 10%;

    padding: var(--font-xl);
    padding-top: var(--font-sm);

    height: fit-content;
    border: white solid 2px;
}

.white-window{
    position: relative;
    background-color: white;
    border-radius: var(--font-xs);
    padding: var(--font-xl);

    margin-top: 10dvh;

    height: fit-content;
    max-height: 80dvh;

    overflow-y: auto;
}

.white-window-alt{
    width: 70%;
    height: fit-content;

    margin-left: 15%;
    margin-top: 20vh;

    background-color: white;
    border: white solid 2px;

    padding: 2%;
}

.white-window-alt *{
    color: black;
}

.white-window-alt-bg{
    position: absolute;
    
    width: 100%;
    height: 100%;

    margin-left: -6%;
    margin-top: 0%;

    background-color: transparent;
    border: solid 2px white;

    transition: transform 0.1s ease;

    z-index: -1;
}


/* Painel de destaque */
.green_painel_frame {
  position: relative;
  width: 100%;
  height: fit-content;
}

.green_painel {
  position: relative;
  width: 100%;
}

.green_painel::before {
  content: "";
  position: absolute;
  top: -2dvh;
  left: 0;

  width: 65%;
  height: 80%;
  padding: var(--font-micro);

  border: 1px solid black;

  background-image: url("../elementos/bg_green_painel.svg");
  background-repeat: no-repeat;
  background-size: 95% auto;
  background-position: top right;

  margin-left: 6%;

  z-index: 0;
}

/* camada principal com texto */
.green_painel::after {
  content: attr(data-text);
  display: block;

  width: 65%;
  padding: var(--font-micro);

  margin-left: 7%;
  margin-top: 4dvh;
  margin-bottom: var(--font-sm);

  background-color: var(--green_1);
  border-radius: var(--font-micro);

  transition: transform 0.1s ease;

  position: relative;
  z-index: 1;
}

/* Tela inicial verticalmente centralizada */
.first_screen{
    margin-top: 10dvh;
}