/* ============================================================
   VISUALIZACAO GLOBAL
============================================================ */

.clm-global-viewer{

  width:100%;

  box-sizing:border-box;

  padding:4px 0 20px;

  color:#344054;

}


.clm-view-heading{

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:16px;

  margin-bottom:14px;

}


.clm-view-heading h1{

  margin:0;

  color:#101828;

  font-size:20px !important;
  font-weight:500;

}


.clm-view-heading small{

  color:#667085;

  font-size:9px;

}


.clm-view-heading-actions{

  display:flex;

  gap:7px;

}


.clm-view-edit,
.clm-view-back{

  min-height:34px;

  padding:0 11px;

  border-radius:5px;

  font-size:10.5px;
  font-weight:600;

  cursor:pointer;

}


.clm-view-edit{

  border:1px solid #155a96;

  background:#155a96;

  color:#fff;

}


.clm-view-back{

  border:1px solid #cbd5df;

  background:#fff;

  color:#475467;

}


/* ============================================================
   LAYOUT
============================================================ */

.clm-view-layout{

  display:grid;

  grid-template-columns:
    245px
    minmax(0,1fr);

  gap:14px;

}


/* ============================================================
   RESUMO
============================================================ */

.clm-view-summary{

  padding:17px;

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

  background:#fff;

  text-align:center;

}


.clm-view-avatar{

  width:76px;
  height:76px;

  display:flex;

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

  margin:0 auto 12px;

  border-radius:50%;

  background:#eef6fc;

  color:#155a96;

  font-size:30px;
  font-weight:700;

}


.clm-view-summary h2{

  margin:0 0 4px;

  color:#101828;

  font-size:12.5px !important;

  line-height:1.3;

}


.clm-view-document{

  color:#667085;

  font-size:9px;

}


.clm-view-status{

  display:inline-flex;

  margin-top:10px;

  padding:4px 8px;

  border-radius:15px;

  background:#ecfdf3;

  color:#067647;

  font-size:8.5px;
  font-weight:600;

}


.clm-view-summary-data{

  margin-top:17px;

  padding-top:14px;

  border-top:1px solid #eaecf0;

  text-align:left;

}


.clm-view-summary-data > div{

  margin-bottom:10px;

}


.clm-view-summary-data small{

  display:block;

  margin-bottom:2px;

  color:#667085;

  font-size:8px;

}


.clm-view-summary-data span{

  overflow-wrap:anywhere;

  color:#344054;

  font-size:9.5px;

}


/* ============================================================
   CONTEUDO
============================================================ */

.clm-view-main{

  min-width:0;

}


.clm-view-tabs{

  display:flex;

  align-items:center;

  gap:2px;

  min-height:43px;

  margin-bottom:10px;

  padding:0 7px;

  overflow-x:auto;

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

  background:#fff;

}


.clm-view-tabs button{

  min-height:32px;

  padding:0 10px;

  border:0;
  border-radius:4px;

  background:transparent;

  color:#475467;

  font-size:9.5px;

  white-space:nowrap;

  cursor:pointer;

}


.clm-view-tabs button.active{

  background:#0c2638;

  color:#fff;

  font-weight:600;

}


.clm-view-card{

  margin-bottom:10px;

  overflow:hidden;

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

  background:#fff;

}


.clm-view-card h3{

  margin:0;

  padding:10px 13px;

  border-bottom:1px solid #eaecf0;

  background:#fafafa;

  color:#344054;

  font-size:11px !important;

}


.clm-view-detail-grid{

  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:0;

}


.clm-view-detail-item{

  min-width:0;

  padding:11px 13px;

  border-right:1px solid #f0f2f5;
  border-bottom:1px solid #f0f2f5;

}


.clm-view-detail-item small{

  display:block;

  margin-bottom:4px;

  color:#667085;

  font-size:8px;

}


.clm-view-detail-item strong{

  display:block;

  overflow-wrap:anywhere;

  color:#344054;

  font-size:9.5px;
  font-weight:500;

}


/* ============================================================
   EMPTY STATE
============================================================ */

.clm-view-empty-state{

  min-height:220px;

  display:flex;

  flex-direction:column;

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

  gap:6px;

  padding:25px;

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

  background:#fff;

  color:#667085;

  text-align:center;

}


.clm-view-empty-icon{

  width:48px;
  height:48px;

  display:flex;

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

  border-radius:50%;

  background:#f2f4f7;

  color:#344054;

  font-size:20px;

}


.clm-view-empty-state strong{

  color:#344054;

  font-size:11px;

}


.clm-view-empty-state span{

  max-width:420px;

  font-size:9px;
  line-height:1.4;

}


.clm-view-empty{

  padding:18px;

  color:#667085;

  font-size:9px;

  text-align:center;

}


/* ============================================================
   TABELAS DO ORCAMENTO
============================================================ */

.clm-view-table-wrap{

  margin-bottom:10px;

  overflow:auto;

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

  background:#fff;

}


.clm-view-table{

  width:100%;

  border-collapse:collapse;

  font-size:9px;

}


.clm-view-table th{

  padding:9px 10px;

  border-bottom:1px solid #d5dde5;

  background:#f8fafc;

  color:#344054;

  text-align:left;

}


.clm-view-table td{

  padding:9px 10px;

  border-bottom:1px solid #eaecf0;

  color:#475467;

}


/* ============================================================
   RESPONSIVO
============================================================ */

@media(max-width:900px){

  .clm-view-layout{

    grid-template-columns:1fr;

  }


  .clm-view-summary{

    text-align:left;

  }


  .clm-view-avatar{

    margin-left:0;

  }


  .clm-view-detail-grid{

    grid-template-columns:
      repeat(2,minmax(0,1fr));

  }

}


@media(max-width:600px){

  .clm-view-heading{

    align-items:flex-start;
    flex-direction:column;

  }


  .clm-view-detail-grid{

    grid-template-columns:1fr;

  }

}



/* ============================================================
   CARREGAMENTO DA VISUALIZACAO
============================================================ */

.clm-view-loading{

  position:fixed;

  /*
    Mantém o menu lateral visível.
  */

  top:0;
  right:0;
  bottom:0;
  left:300px;

  z-index:99990;

  display:flex;

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

  background:
    #f5f7fa;

}


.clm-view-loading-box{

  min-width:190px;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:6px;

  padding:22px 26px;

  color:#475467;

  text-align:center;

}


.clm-view-loading-box strong{

  color:#344054;

  font-size:11px;

}


.clm-view-loading-box small{

  color:#98a2b3;

  font-size:8.5px;

}


.clm-view-loading-spinner{

  width:28px;
  height:28px;

  margin-bottom:5px;

  box-sizing:border-box;

  border:
    3px solid #d9e2ec;

  border-top-color:
    #155a96;

  border-radius:
    50%;

  animation:
    clmViewSpin .75s
    linear
    infinite;

}


@keyframes clmViewSpin{

  to{
    transform:
      rotate(360deg);
  }

}


/* Notebook / menu menor */

@media(max-width:1200px){

  .clm-view-loading{
    left:260px;
  }

}


/* Mobile */

@media(max-width:760px){

  .clm-view-loading{
    left:0;
  }

}