/* ============================================================
   CLIMATIKO - REGRAS POR NCM
============================================================ */

.clm-rncm-overlay{

  position:fixed;
  inset:0;

  z-index:999999;

  display:flex;
  align-items:flex-start;
  justify-content:center;

  padding:28px 22px;

  overflow:auto;

  background:rgba(15,23,42,.55);

  box-sizing:border-box;

}


.clm-rncm-modal{

  width:min(1200px,96vw);

  min-height:390px;

  background:#fff;

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

  box-shadow:
    0 14px 40px
    rgba(0,0,0,.20);

  overflow:hidden;

}


.clm-rncm-header{

  min-height:52px;

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

  padding:0 18px;

  border-bottom:
    1px solid #d5dde5;

}


.clm-rncm-header h2{

  margin:0;

  color:#25364a;

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

}


.clm-rncm-close{

  width:34px;
  height:34px;

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

  border:0;
  background:transparent;

  color:#667085;

  font-size:20px;

  cursor:pointer;

}


.clm-rncm-body{

  padding:16px 18px 12px;

}


/* aviso amarelo igual ao modelo */

.clm-rncm-aviso{

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

  gap:12px;

  margin-bottom:18px;

  padding:13px 16px;

  background:#fff3c4;

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

  color:#8a6400;

  font-size:11px;

}


.clm-rncm-aviso strong{

  color:#544000;

}


/* ============================================================
   CAMPO NCM - MAIOR
============================================================ */

.clm-rncm-campo{

  width:100%;

  margin-bottom:16px;

}


.clm-rncm-campo label{

  display:block;

  margin-bottom:6px;

  color:#667085;

  font-size:11px;

}


.clm-rncm-campo label b{

  color:#e5484d;

}


.clm-rncm-search-wrap{

  position:relative;

  width:100%;

}


/*
   ESTE E O CAMPO QUE VOCE PEDIU MAIOR
*/

#clmRncmBusca{

  width:100% !important;

  height:44px !important;

  min-height:44px !important;

  padding:0 14px !important;

  box-sizing:border-box !important;

  border:1px solid #bfcad6 !important;
  border-radius:5px !important;

  background:#fff !important;

  color:#25364a !important;

  font-size:13px !important;

  outline:none !important;

}


#clmRncmBusca:focus{

  border-color:#155a96 !important;

  box-shadow:
    0 0 0 2px
    rgba(21,90,150,.10);

}


/* resultados da busca */

.clm-rncm-sugestoes{

  position:absolute;

  top:48px;
  left:0;
  right:0;

  z-index:1000001;

  max-height:270px;

  overflow:auto;

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

  background:#fff;

  box-shadow:
    0 8px 20px
    rgba(0,0,0,.12);

}


.clm-rncm-sugestoes.hidden{

  display:none !important;

}


.clm-rncm-sugestao{

  width:100%;

  display:block;

  padding:10px 12px;

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

  background:#fff;

  text-align:left;

  cursor:pointer;

}


.clm-rncm-sugestao:hover{

  background:#f3f8fc;

}


.clm-rncm-sugestao strong{

  display:block;

  margin-bottom:3px;

  color:#155a96;

  font-size:12px;

}


.clm-rncm-sugestao span{

  color:#667085;

  font-size:10px;

  line-height:1.3;

}


/* ============================================================
   CARD DE REGRAS
============================================================ */

.clm-rncm-card{

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

  overflow:hidden;

}


.clm-rncm-card-header{

  padding:14px 18px;

  border-bottom:
    1px solid #d5dde5;

  background:#fafafa;

}


.clm-rncm-card-header h3{

  margin:0 0 4px;

  color:#25364a;

  font-size:17px;
  font-weight:400;

}


.clm-rncm-card-header h3 strong{

  font-weight:600;

}


.clm-rncm-card-header small{

  color:#667085;

  font-size:9px;

}


.clm-rncm-card-body{

  min-height:105px;

  padding:18px 20px;

}


.clm-rncm-toolbar{

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

  gap:15px;

}


.clm-rncm-vazio{

  flex:1;

  text-align:center;

  color:#475467;

  font-size:11px;

}


/* regras existentes */

.clm-rncm-regra{

  display:grid;

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

  gap:10px;

  align-items:end;

  margin-bottom:10px;

  padding:12px;

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

  background:#fff;

}


.clm-rncm-regra label{

  display:block;

  margin-bottom:4px;

  color:#667085;

  font-size:9px;

}


.clm-rncm-regra input{

  width:100%;

  height:36px;

  padding:0 9px;

  box-sizing:border-box;

  border:1px solid #cbd5df;
  border-radius:4px;

}


.clm-rncm-remover{

  width:34px;
  height:36px;

  border:1px solid #e0e6ec;
  border-radius:4px;

  background:#fff;

  color:#e5484d;

  cursor:pointer;

}


/* ============================================================
   FOOTER
============================================================ */

.clm-rncm-footer{

  display:flex;
  justify-content:space-between;

  padding:12px 18px 18px;

}


.clm-rncm-btn{

  min-height:38px;

  padding:0 14px;

  border-radius:4px;

  cursor:pointer;

}


.clm-rncm-btn-secundario{

  border:1px solid #d5dde5;

  background:#fff;

  color:#344054;

}


.clm-rncm-btn-primary{

  border:1px solid #0e2437;

  background:#0e2437;

  color:#fff;

}


.clm-rncm-btn-add{

  border:1px solid #155a96;

  background:#155a96;

  color:#fff;

}


@media(max-width:800px){

  .clm-rncm-regra{

    grid-template-columns:1fr;

  }

}