/* ============================================================
   CLIMATIKO - VISUALIZACAO DE CATALOGOS
============================================================ */

.clm-cat-viewer{

  width:100%;

  color:#25364a;

  font-size:12px;

}


.clm-cat-head{

  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:18px;

  margin-bottom:14px;

}


.clm-cat-head h1{

  margin:0 0 7px;

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

  color:#17212b;

}


.clm-cat-head > div:first-child > div{

  display:flex;

  align-items:center;

  gap:8px;

}


.clm-cat-head strong{

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

}


.clm-cat-status{

  padding:3px 7px;

  border-radius:4px;

  background:#ecfdf3;

  border:1px solid #a6f4c5;

  color:#027a48;

  font-size:9px;

}


.clm-cat-status.inativo{

  background:#fff1f1;

  border-color:#ffc7c7;

  color:#b42318;

}


.clm-cat-head-actions{

  display:flex;

  gap:8px;

}


.clm-cat-head-actions button{

  min-height:36px;

  padding:0 14px;

  border-radius:5px;

  cursor:pointer;

  font-size:11px;

}


.clm-cat-back{

  background:#fff;

  border:1px solid #d0d7df;

  color:#344054;

}


.clm-cat-edit{

  background:#155a96;

  border:1px solid #155a96;

  color:#fff;

  font-weight:600;

}


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

.clm-cat-layout{

  display:grid;

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

  gap:20px;

  align-items:start;

}


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

.clm-cat-summary{

  padding:14px;

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

  background:#fff;

}


.clm-cat-photo{

  height:145px;

  display:flex;

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

  margin-bottom:13px;

  border:1px solid #e1e7ed;
  border-radius:5px;

  overflow:hidden;

  background:#f7f9fa;

}


.clm-cat-photo img{

  width:100%;
  height:100%;

  object-fit:contain;

}


.clm-cat-photo-empty{

  display:flex;
  flex-direction:column;

  align-items:center;

  gap:6px;

  color:#98a2b3;

}


.clm-cat-photo-empty span{

  font-size:31px;

}


.clm-cat-photo-empty small{

  font-size:9px;

}


.clm-cat-summary h2{

  margin:0;

  padding:0 3px 13px;

  border-bottom:1px solid #e5e9ee;

  text-align:center;

  font-size:14px;

  color:#101828;

}


.clm-cat-summary-data{

  display:grid;

  gap:1px;

  padding-top:10px;

}


/* ============================================================
   ABAS
============================================================ */

.clm-cat-tabs{

  display:flex;

  flex-wrap:wrap;

  gap:6px;

  margin-bottom:13px;

}


.clm-cat-tabs button{

  min-height:36px;

  padding:0 13px;

  border:1px solid transparent;
  border-radius:5px;

  background:transparent;

  color:#344054;

  cursor:pointer;

  font-size:10.5px;

}


.clm-cat-tabs button:hover{

  background:#f4f7fa;

}


.clm-cat-tabs button.active{

  background:#155a96 !important;

  border-color:#155a96 !important;

  color:#fff !important;

  font-weight:600;

}


/* ============================================================
   CARDS
============================================================ */

.clm-cat-content{

  display:grid;

  gap:13px;

}


.clm-cat-card{

  overflow:hidden;

  border:1px solid #d8e0e8;

  border-radius:6px;

  background:#fff;

}


.clm-cat-card-head{

  min-height:53px;

  padding:10px 15px;

  box-sizing:border-box;

  border-bottom:1px solid #e5e9ee;

  background:#fafbfc;

}


.clm-cat-card-head h3{

  margin:0 0 3px;

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

  color:#25364a;

}


.clm-cat-card-head small{

  color:#7b8794;

  font-size:9px;

}


.clm-cat-card-body{

  padding:15px;

}


.clm-cat-grid{

  display:grid;

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

}


.clm-cat-field{

  min-height:57px;

  display:flex;
  flex-direction:column;

  justify-content:center;

  gap:5px;

  padding:9px 12px;

  box-sizing:border-box;

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

}


.clm-cat-field small{

  color:#7b8794;

  font-size:9px;

}


.clm-cat-field strong{

  color:#1d2939;

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

  line-height:1.35;

}


.clm-cat-field.destaque strong{

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

}


.clm-cat-text{

  padding:5px;

  color:#344054;

  font-size:11px;

  line-height:1.55;

  white-space:pre-wrap;

}


.clm-cat-empty{

  min-height:110px;

  display:flex;
  flex-direction:column;

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

  gap:6px;

  text-align:center;

}


.clm-cat-empty span{

  font-size:22px;

  color:#98a2b3;

}


.clm-cat-empty strong{

  font-size:11px;

}


.clm-cat-empty small{

  color:#7b8794;

  font-size:9px;

}


.clm-cat-photos{

  display:grid;

  grid-template-columns:
    repeat(auto-fill,minmax(145px,1fr));

  gap:12px;

}


.clm-cat-photos > div{

  padding:7px;

  border:1px solid #e1e7ed;

  border-radius:5px;

}


.clm-cat-photos img{

  display:block;

  width:100%;
  height:120px;

  object-fit:contain;

}


/* ============================================================
   FORMULARIO FERRAMENTAS
============================================================ */

#page-catalogos-itens
.ic-field
input[type="date"]{

  cursor:pointer;

}


#page-catalogos-itens
#icGerarCodigoBarra{

  min-width:48px;

  font-size:15px;

}


/* ============================================================
   PROTECAO GLOBAL CONTRA FLASH DE FORMULARIO
============================================================ */

html.clm-visualizacao-preparando
:is(
  .cli-editor,
  .forn-editor,
  .trans-editor,
  .prod-editor-layout,
  .ic-editor-layout
){

  visibility:hidden !important;

}


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

@media(max-width:1100px){

  .clm-cat-layout{

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

  }


  .clm-cat-grid{

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

  }

}


@media(max-width:800px){

  .clm-cat-layout{

    display:block;

  }


  .clm-cat-summary{

    margin-bottom:14px;

  }


  .clm-cat-grid{

    grid-template-columns:1fr;

  }


  .clm-cat-head{

    flex-direction:column;

  }

}