/* =====================================================
   IDENTIDADE VISUAL - SISTEMA CHURRASCARIA
===================================================== */

:root {

  --brasa:
    #e23b2f;

  --brasa-escura:
    #a82019;

  --laranja:
    #f59a23;

  --carvao:
    #292929;

  --grafite:
    #414141;

  --cinza-area:
    #707070;

  --linha:
    #bdbdbd;
}


body.principal-page {

  background:
    var(--cinza-area);

  overflow:
    hidden;
}


.principal-page .janela {

  height:
    100vh;

  min-height:
    650px;
}


/* =====================================================
   TOPO
===================================================== */

.principal-page .barra-titulo {

  height:
    34px;

  background:
    linear-gradient(
      180deg,
      #383838,
      #292929
    );

  border-bottom:
    1px solid #555;
}


.topo-direita {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  height:
    100%;

  padding-right:
    15px;

  color:
    #eee;

  font-size:
    11px;
}


.topo-separador {

  width:
    1px;

  height:
    18px;

  background:
    #666;
}


.botao-topo {

  color:
    #eee;

  background:
    transparent;

  border:
    0;

  font-size:
    11px;
}


/* =====================================================
   MENU
===================================================== */

.menu-erp {

  height:
    35px;

  min-height:
    35px;

  padding-left:
    0;

  display:
    flex;

  align-items:
    stretch;

  background:
    #444;
}


.menu-erp a {

  min-width:
    auto;

  display:
    flex;

  align-items:
    center;

  padding:
    0 18px;

  color:
    white;

  text-decoration:
    none;

  font-size:
    11px;

  border-bottom:
    3px solid transparent;
}


.menu-erp a:hover {

  background:
    #555;
}


.menu-erp a.ativo {

  color:
    #222;

  background:
    #f2f2f2;

  border-bottom-color:
    var(--brasa);
}


.menu-pesquisa {

  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  margin-left:
    5px;

  color:
    white;
}


.menu-pesquisa input {

  width:
    130px;

  height:
    24px;

  padding:
    0 7px;

  color:
    white;

  background:
    transparent;

  border:
    0;

  outline:
    none;

  font-size:
    11px;
}


.menu-pesquisa input::placeholder {

  color:
    #ddd;
}


/* =====================================================
   RIBBON PRINCIPAL
===================================================== */

.ribbon-principal {

  min-height:
    112px;

  height:
    112px;

  display:
    flex;

  align-items:
    stretch;

  background:
    #ededed;

  color:
    #222;

  border-bottom:
    1px solid #aaa;
}


.ribbon-principal .grupo-ribbon {

  position:
    relative;

  display:
    flex;

  gap:
    0;

  padding:
    6px 8px 23px;

  border-right:
    1px solid #c2c2c2;
}


.ribbon-principal .grupo-ribbon small {

  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    4px;

  text-align:
    center;

  color:
    #888;

  font-size:
    10px;
}


.atalho-principal {

  width:
    100px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    4px;

  padding:
    4px 5px;

  color:
    #222;

  text-decoration:
    none;

  border:
    1px solid transparent;
}


.atalho-principal:hover {

  background:
    #ddd;

  border-color:
    #bbb;
}


.atalho-principal strong {

  max-width:
    95px;

  text-align:
    center;

  font-size:
    11px;

  line-height:
    1.25;

  font-weight:
    500;
}


.atalho-icone {

  width:
    42px;

  height:
    42px;

  display:
    grid;

  place-items:
    center;

  font-size:
    27px;
}


.atalho-icone.whatsapp {

  width:
    38px;

  height:
    38px;

  margin-top:
    2px;

  border-radius:
    8px;

  color:
    white;

  background:
    #20b85a;

  font-size:
    23px;

  font-weight:
    700;
}


.grupo-caixa {

  width:
    120px;
}


.grupo-pedidos {

  flex:
    0 0 auto;
}


.grupo-clientes {

  flex:
    0 0 auto;
}


/* =====================================================
   ÁREA PRINCIPAL
===================================================== */

.principal-area {

  flex:
    1;

  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  background:
    linear-gradient(
      135deg,
      #777,
      #696969
    );
}


.principal-area::before {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,.05),
      transparent 48%
    );
}


.marca-central {

  position:
    relative;

  z-index:
    1;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  color:
    rgba(
      255,
      255,
      255,
      .93
    );

  text-shadow:
    0 2px 3px
    rgba(
      0,
      0,
      0,
      .15
    );
}


.logo-central {

  width:
    100px;

  height:
    100px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    12px;

  border-radius:
    50%;

  color:
    white;

  background:
    linear-gradient(
      135deg,
      var(--brasa),
      var(--laranja)
    );

  box-shadow:
    0 8px 30px
    rgba(
      0,
      0,
      0,
      .18
    );

  font-size:
    55px;
}


.marca-central h1 {

  margin:
    0;

  font-size:
    50px;

  letter-spacing:
    -2px;
}


.marca-central p {

  margin:
    7px 0 0;

  font-size:
    14px;

  letter-spacing:
    2px;

  opacity:
    .8;
}


/* =====================================================
   STATUS
===================================================== */

.principal-status {

  min-height:
    28px;

  height:
    28px;

  padding:
    0 7px;

  gap:
    22px;

  color:
    white;

  background:
    #353535;

  border-top:
    1px solid #555;

  font-size:
    10px;
}


.status-online {

  width:
    7px;

  height:
    7px;

  display:
    inline-block;

  margin-right:
    5px;

  border-radius:
    50%;

  background:
    #48c65c;
}


/* =====================================================
   TOAST
===================================================== */

.toast-sistema {

  position:
    fixed;

  right:
    20px;

  bottom:
    45px;

  z-index:
    5000;

  min-width:
    260px;

  padding:
    12px 15px;

  color:
    white;

  background:
    #292929;

  border-left:
    4px solid
    var(--laranja);

  box-shadow:
    0 10px 30px
    rgba(
      0,
      0,
      0,
      .35
    );

  opacity:
    0;

  pointer-events:
    none;

  transform:
    translateY(
      10px
    );

  transition:
    .2s;

  font-size:
    12px;
}


.toast-sistema.visivel {

  opacity:
    1;

  transform:
    translateY(
      0
    );
}