/* Replica do SoulMV PEP Web. Medidas e cores vem dos prints (1915 px de largura). */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #f9f9f9;
  font-family: Tahoma, Verdana, "Segoe UI", Geneva, sans-serif;
  font-size: 11px;
  color: #474b53;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.app {
  position: relative;
  width: 1915px;
  min-width: 1915px;
  height: 100vh;
  min-height: 937px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f9f9f9;
}

img { display: block; }
button { font-family: inherit; }

/* ---------- barra superior ---------- */
.topbar {
  position: relative;
  height: 44px;
  flex: 0 0 44px;
  background: #f0f0f0;
  border-bottom: 1px solid #c4c2c2;
  box-shadow: 0 1px 0 #cecdcc, 0 2px 0 #cfcecd, 0 3px 0 #e9e9e9;
  display: flex;
  align-items: stretch;
}
.topbar .logo { position: absolute; left: 0; top: 8px; }
.topbar .title-wrap {
  margin-left: 118px;
  display: flex;
  align-items: center;
  border-left: 1px solid #dcdcdc;
  border-right: 1px solid #dcdcdc;
  padding: 0 0 0 7px;
  height: 38px;
}
.topbar .title {
  font-size: 15px;
  color: #383b45;
  letter-spacing: 0;
  padding-right: 16px;
}
.topbar .title-caret {
  width: 24px;
  height: 38px;
  border-left: 1px solid #dcdcdc;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topbar .title-caret::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid #494c54;
  border-bottom: 2px solid #494c54;
  transform: translateY(-3px) rotate(45deg);
}
.topbar .module {
  font-size: 15px;
  color: #50779a;
  margin-left: 12px;
  align-self: center;
}
.topbar .right {
  position: absolute;
  right: 0;
  top: 0;
  height: 38px;
  display: flex;
  align-items: center;
}
.topbar .version { font-size: 11px; color: #494c54; margin-right: 8px; }
.topbar .iconbtn {
  width: 38px;
  height: 38px;
  border-left: 1px solid #dcdcdc;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- corpo ---------- */
.body { position: relative; flex: 1 1 auto; display: flex; min-height: 0; }

/* ---------- menu lateral ---------- */
.sidebar {
  width: 191px;
  flex: 0 0 191px;
  background: #f9f9f9;
  border-right: 1px solid #d8d8d8;
  box-shadow: inset -1px 0 0 #e8e8e8;
  display: flex;
  flex-direction: column;
  position: relative;
}
.sidebar .lista {
  height: 45px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e1e0e0;
  box-shadow: 0 -1px 0 #e3e3e3 inset;
  cursor: pointer;
}
.sidebar .lista img { margin-left: 1px; }
.sidebar .lista span { margin-left: 6px; color: #454951; font-size: 11px; }
.sidebar .arrowbar {
  height: 23px;
  background: #4d7498;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar .arrowbar.top { border-top: 1px solid #6787a4; }
.sidebar .items { flex: 1 1 auto; overflow: hidden; position: relative; }
.sidebar .item {
  height: 46px;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  color: #434b52;
  font-size: 11px;
}
.sidebar .item img { margin-left: 9px; margin-right: 2px; }
.sidebar .item span { margin-left: 2px; }
.sidebar .item.active { background: #dae6f3; }
.sidebar .item.active::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 6px;
  width: 14px;
  height: 34px;
  background: url("/sprites/sidebar-arrow-right.png") no-repeat right center;
}

/* ---------- conteudo ---------- */
.main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; position: relative; }

.patient-strip {
  height: 43px;
  flex: 0 0 43px;
  background: #f0f0f0;
  border-bottom: 1px solid #dfdfdf;
  box-shadow: 0 -1px 0 #e2e2e2 inset;
  display: flex;
  align-items: center;
  position: relative;
}
.patient-strip .avatar { margin-left: 10px; }
.patient-strip .ident { margin-left: 6px; line-height: 14px; }
.patient-strip .name { font-weight: bold; font-size: 14px; color: #34393d; text-transform: uppercase; }
.patient-strip .sub { font-size: 11px; color: #404448; margin-top: 1px; }
.patient-strip .sound { margin-left: 10px; }
.patient-strip .right { position: absolute; right: 0; top: 4px; }

.tabs {
  height: 32px;
  flex: 0 0 32px;
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid #dbdbdb;
  padding-left: 3px;
  position: relative;
  background: #f9f9f9;
}
.tabs .tab {
  height: 24px;
  margin-right: 4px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  font-size: 11px;
  color: #494c54;
  background: #e7e7e7;
  border: 1px solid #c7c8ca;
  border-bottom: none;
  white-space: nowrap;
  cursor: pointer;
}
.tabs .tab.active {
  height: 27px;
  background: #f9f9f9;
  color: #758999;
  border-color: #b3b5b8;
  margin-bottom: -1px;
  padding-bottom: 1px;
}

.workarea { flex: 1 1 auto; display: flex; min-height: 0; }
.content { flex: 1 1 auto; position: relative; overflow: auto; background: #f9f9f9; }

/* ---------- historico ---------- */
.historico {
  width: 282px;
  flex: 0 0 282px;
  background: #f0f0f0;
  border-left: 1px solid #f7f7f8;
  margin-top: 5px;
  position: relative;
}
.historico .hdr {
  height: 32px;
  display: flex;
  align-items: center;
  padding-left: 7px;
  color: #454a52;
  font-size: 11px;
  position: relative;
}
.historico .hdr img { position: absolute; right: 3px; top: 9px; }
.historico .search {
  margin: 0 22px 0 0;
  height: 22px;
  background: #ffffff;
  border: 1px solid #bebebe;
  border-right-color: #e3e3e3;
  border-bottom-color: #e3e3e3;
  position: relative;
}
.historico .search img { position: absolute; right: -20px; top: -1px; }
.historico .entries {
  margin-top: 12px;
  min-height: 700px;
  background: repeating-linear-gradient(to bottom, #f0f0f0 0 41px, #e9e9e9 41px 42px, #f6f6f6 42px 44px);
}
.historico .entry {
  height: 43px;
  border-bottom: 1px solid #e3e3e3;
  padding: 6px 0 0 22px;
  position: relative;
  cursor: pointer;
}
.historico .entry.selected { background: #d8e6f4; }
.historico .entry .l1 {
  font-weight: bold;
  color: #7b7a7a;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 225px;
}
.historico .entry .l2 {
  color: #434851;
  font-size: 11px;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 225px;
}
.historico .entry img { position: absolute; right: 4px; top: 5px; }
.historico .entry.copilot .l1 { color: #4d7498; }
.historico .collapse {
  position: absolute;
  left: -8px;
  top: 380px;
  width: 6px;
  height: 10px;
  color: #444;
  font-size: 8px;
}

/* ---------- barra de ferramentas ---------- */
.toolbar {
  height: 52px;
  flex: 0 0 52px;
  border-top: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
  padding-left: 6px;
  background: #f9f9f9;
}
.toolbar .tb {
  width: 44px;
  height: 48px;
  margin-right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border: none;
  cursor: default;
}
.toolbar .tb.on { background: #ebebeb; cursor: pointer; }

/* ---------- rodape ---------- */
.footer {
  height: 24px;
  flex: 0 0 24px;
  background: #f9f9f9;
  border-top: 4px solid #e0e0e0;
  box-shadow: 0 -1px 0 #d7d7d7;
  display: flex;
  align-items: center;
  padding: 0 4px;
  color: #454951;
  font-size: 11px;
  position: relative;
}
.footer .unit { text-transform: uppercase; }
.footer .clock { position: absolute; right: 6px; }
.footer .kebab { position: absolute; right: 48px; color: #6c6f75; font-size: 12px; }
.footer .status {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #164178;
  font-weight: bold;
}

/* ---------- lista de pacientes ---------- */
.panel-hdr {
  height: 20px;
  margin-top: 6px;
  background: #e3e2e1;
  border-top: 1px solid #d3d8da;
  border-bottom: 1px solid #ced3d5;
  display: flex;
  align-items: center;
  padding-left: 10px;
  color: #444851;
  font-size: 11px;
  position: relative;
}
.panel-hdr img { position: absolute; right: 8px; top: 1px; }
.filters {
  height: 46px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  color: #454a52;
  font-size: 11px;
  white-space: nowrap;
}
.filters label { margin-right: 6px; }
.filters .inp {
  height: 22px;
  background: #ffffff;
  border: 1px solid #bebebe;
  border-left-color: #c1c1c1;
  border-right-color: #e5e5e5;
  border-bottom-color: #e5e5e5;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  color: #454a52;
  position: relative;
  margin-right: 12px;
}
.filters .inp.kw { width: 248px; margin-right: 12px; }
.filters .inp.kw img { position: absolute; right: 2px; top: 1px; }
.filters .inp.code { width: 108px; }
.filters .inp.date { width: 64px; margin-right: 2px; justify-content: center; }
.filters .cal { margin-right: 10px; }
.filters .ate { margin-right: 10px; }
.filters .search { margin-left: 12px; cursor: pointer; }

.grid-wrap { margin: 0 22px 0 19px; position: relative; }
.grid {
  border: 1px solid #d3d3d3;
  border-right-color: #e0e0e0;
  background: #ffffff;
  position: relative;
  height: calc(100vh - 175px);
  min-height: 300px;
  overflow: hidden;
}
.grid table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.grid thead th {
  height: 23px;
  background: #e3e2e1;
  border-top: 1px solid #d2d6d9;
  border-bottom: 1px solid #ced2d5;
  border-right: 1px solid #dfe4e6;
  text-align: left;
  font-weight: normal;
  color: #4a4d56;
  font-size: 11px;
  padding: 0 0 0 6px;
}
.grid thead th:last-child { border-right: none; }
.grid tbody td {
  height: 30px;
  border-right: 1px solid #dfe4e6;
  padding: 0 0 0 6px;
  color: #474b53;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
}
.grid tbody td.age, .grid tbody td.date, .grid tbody td.num { text-transform: none; }
.grid tbody td:last-child { border-right: none; }
.grid tbody tr:nth-child(even) td { background: #f5f5f5; }
.grid tbody tr { cursor: pointer; }
.grid tbody tr:hover td { background: #e9f0f8; }
.grid td.star { text-align: center; padding: 0; }
.grid td.star img, .grid td.doc img { display: inline-block; }
.grid td.doc { text-align: center; padding: 0; }
.grid .scroll {
  position: absolute;
  right: 0;
  top: 24px;
  bottom: 0;
  width: 18px;
  background: #f0f0f0;
  border-left: 1px solid #ececec;
}
.grid .scroll .thumb { position: absolute; left: 1px; right: 1px; top: 17px; height: 38px; background: #cdcdcd; }
.grid .scroll img.up { position: absolute; left: -1px; top: -3px; }
.grid .scroll img.down { position: absolute; left: -1px; bottom: 0; }

.sector-tabs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20px;
  display: flex;
  gap: 6px;
  padding-left: 1px;
}
.sector-tabs .stab {
  width: 146px;
  height: 16px;
  background: #e3e2e1;
  border-top: 1px solid #ced3d5;
  border-left: 1px solid #ced3d5;
  border-right: 1px solid #ced3d5;
  display: flex;
  align-items: center;
  padding-left: 10px;
  color: #494d56;
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
}
.sector-tabs .stab.active { background: #f9f9f9; }

/* ---------- ficha (formulario padrao) ---------- */
.ficha { width: 736px; margin: 8px 0 0 22px; padding-bottom: 20px; }
.ficha .titlebox {
  height: 36px;
  border: 2px solid #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 13px;
  color: #164178;
  text-transform: uppercase;
  background: #f9f9f9;
}
.ficha .shortrow {
  display: flex;
  border: 2px solid #111111;
  border-top: none;
  height: 33px;
}
.ficha .shortrow .cell {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  padding: 0 6px;
  border-right: 2px solid #111111;
  font-weight: bold;
  color: #000000;
  font-size: 11px;
  white-space: nowrap;
}
.ficha .shortrow .cell:last-child { border-right: none; }
.ficha .shortrow .cell input,
.ficha .shortrow .cell .val {
  flex: 1 1 auto;
  margin-left: 4px;
  height: 20px;
  border: 1px solid #bcbcbc;
  border-right-color: #e6e6e6;
  border-bottom-color: #bdbdbd;
  background: #fbfbfb;
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 11px;
  color: #121212;
  font-weight: normal;
  padding: 0 4px;
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.ficha .radios {
  height: 30px;
  display: flex;
  align-items: center;
  padding-left: 6px;
  font-size: 11px;
  color: #151515;
}
.ficha .radios .lbl { margin-right: 24px; }
.ficha .radios .opt { display: inline-flex; align-items: center; margin-right: 22px; }
.ficha .radios .opt img { margin-right: 6px; }
.ficha .section {
  height: 26px;
  border: 2px solid #111111;
  display: flex;
  align-items: center;
  padding-left: 6px;
  font-weight: bold;
  font-size: 12px;
  color: #000000;
  text-transform: uppercase;
  margin-top: 6px;
  background: #f9f9f9;
}
.ficha .area {
  position: relative;
  min-height: 150px;
  max-height: 152px;
  overflow-y: auto;
  margin-top: 3px;
  border: 1px solid #bbbbbb;
  border-left-color: #bfbfbf;
  border-right-color: #e6e6e6;
  border-bottom-color: #e2e2e2;
  background: #fbfbfb;
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 11px;
  line-height: 14px;
  color: #121212;
  padding: 8px 30px 10px 8px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ficha .area .scroll { position: absolute; right: 0; top: 0; bottom: 0; width: 22px; background: #f0f0f0; }
.ficha .area .scroll img { position: absolute; right: 0; top: 0; }
.ficha .area .resize { position: absolute; right: 1px; top: 1px; }
.ficha .area .caret { display: inline-block; width: 1px; height: 12px; background: #121212; vertical-align: -2px; animation: blink 0.8s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ficha .focused { outline: 1px solid #4d7498; box-shadow: 0 0 0 2px #dae6f3; }
.ficha .hl { background: #fff4bf !important; transition: background 0.6s ease; }
.ficha .sel { margin-left: 8px; width: 160px; height: 20px; border: 1px solid #bcbcbc; background: #fbfbfb; display: inline-flex; align-items: center; padding-left: 6px; color: #7c7f85; font-size: 11px; position: relative; }
.ficha .sel::after { content: "▾"; position: absolute; right: 4px; top: 2px; font-size: 10px; color: #7c7f85; }

.empty-state {
  position: absolute;
  left: 0;
  right: 0;
  top: 352px;
  text-align: center;
  color: #474b52;
  font-size: 11px;
}
.empty-state .bold { font-weight: bold; color: #3c414a; margin-bottom: 14px; }
.empty-state img { display: inline-block; vertical-align: middle; margin: 0 14px; }

.solicitacoes { width: 736px; margin: 8px 0 0 20px; }
.solicitacoes .row { display: flex; height: 26px; align-items: center; border-bottom: 1px solid #e2e2e2; font-size: 11px; color: #121212; }
.solicitacoes .row.head { background: #e3e2e1; color: #4a4d56; font-weight: normal; }
.solicitacoes .row > div { padding-left: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.solicitacoes .c1 { width: 220px; } .solicitacoes .c2 { width: 70px; } .solicitacoes .c3 { flex: 1 1 auto; } .solicitacoes .c4 { width: 120px; }

.presenter-reset {
  position: absolute;
  right: 300px;
  bottom: 4px;
  font-size: 10px;
  color: #9fa1a4;
  background: transparent;
  border: 1px solid #d8d8d8;
  padding: 1px 6px;
  cursor: pointer;
}

.ficha .area.grow { max-height: none; overflow: visible; }
.ficha .area::-webkit-scrollbar { width: 17px; background: #f0f0f0; }
.ficha .area::-webkit-scrollbar-thumb { background: #cdcdcd; border: 1px solid #f0f0f0; }
.ficha .area::-webkit-scrollbar-button { height: 17px; background: #f0f0f0; }