/* =========================================================
   IMPERIAL CARCINICULTURA
   DESIGN SYSTEM V2
   ========================================================= */

:root{
  --v2-orange:#f58214;
  --v2-orange-dark:#d96800;
  --v2-orange-light:#fff1e3;

  --v2-black:#151719;
  --v2-dark:#222629;
  --v2-dark-2:#303438;

  --v2-text:#172126;
  --v2-muted:#536168;

  --v2-bg:#f3f5f6;
  --v2-white:#fff;

  --v2-border:#cbd3d7;
  --v2-border-light:#e0e5e8;

  --v2-green:#13734a;
  --v2-red:#b52b2b;
}


/* =========================================================
   PÁGINA
   ========================================================= */

body{
  background:#f3f5f6 !important;
  color:var(--v2-text) !important;
}

main{
  color:var(--v2-text) !important;
}


/* =========================================================
   TÍTULOS
   ========================================================= */

h1{
  color:#111 !important;

  font-size:34px !important;
  font-weight:900 !important;

  letter-spacing:-.5px !important;
}

h1::after{
  width:52px !important;
  height:4px !important;

  background:var(--v2-orange) !important;

  margin-top:10px !important;
}


h2{
  color:#151719 !important;

  font-size:25px !important;
  font-weight:900 !important;
}


h3{
  color:#1a1d1f !important;
  font-weight:850 !important;
}


/* =========================================================
   TEXTO
   ========================================================= */

p,
div,
span{
  color:inherit;
}

small,
.muted,
.text-muted{
  color:var(--v2-muted) !important;
}


/* =========================================================
   PAINÉIS
   ========================================================= */

.painel,
.card,
.panel,
.box,
.summary-card,
.resumo-card{

  background:#fff !important;

  border:
    1px solid
    #d9dfe2 !important;

  border-radius:
    13px !important;

  border-top:
    0 !important;

  box-shadow:
    0 4px 14px
    rgba(25,35,40,.08) !important;
}


/*
 * Seções grandes ficam com uma faixa
 * discreta de identidade no lado esquerdo.
 */
.painel{
  position:relative;
}

.painel::before{
  content:"";

  position:absolute;

  left:0;
  top:20px;
  bottom:20px;

  width:4px;

  border-radius:0 6px 6px 0;

  background:
    var(--v2-orange);
}


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

.tabs,
.abas,
.tab-bar{
  background:#e8ecee !important;

  border:
    1px solid
    #d5dde1 !important;

  border-radius:
    11px !important;

  padding:5px !important;

  display:inline-flex;

  gap:4px !important;
}


.tabs button,
.tab-btn,
.aba{

  min-height:42px !important;

  padding:
    0 20px !important;

  border:
    0 !important;

  border-radius:
    8px !important;

  background:
    transparent !important;

  color:
    #3e4b51 !important;

  font-weight:
    800 !important;

  box-shadow:
    none !important;
}


.tabs button.active,
.tab-btn.active,
.aba.ativa{

  background:
    var(--v2-black) !important;

  color:
    #fff !important;

  border:
    0 !important;

  box-shadow:
    inset 0 -4px 0
    var(--v2-orange) !important;
}


/* Compatibilidade com páginas que usam
   classe "ativo" em vez de active */
.tabs button.ativo,
.tab-btn.ativo,
.aba.ativo{

  background:
    var(--v2-black) !important;

  color:#fff !important;

  box-shadow:
    inset 0 -4px 0
    var(--v2-orange) !important;
}


/* =========================================================
   FORMULÁRIOS
   ========================================================= */

label{

  color:#36454c !important;

  font-size:12px !important;
  font-weight:900 !important;

  letter-spacing:.02em !important;
}


input,
select,
textarea{

  background:#fff !important;

  color:#111 !important;

  border:
    1.5px solid
    #b9c5ca !important;

  border-radius:
    8px !important;

  min-height:
    43px !important;

  font-size:
    15px !important;

  font-weight:
    750 !important;

  box-shadow:
    inset 0 1px 2px
    rgba(0,0,0,.025) !important;
}


input:hover,
select:hover,
textarea:hover{
  border-color:
    #87999f !important;
}


input:focus,
select:focus,
textarea:focus{

  border-color:
    var(--v2-orange) !important;

  box-shadow:
    0 0 0 3px
    rgba(245,130,20,.17) !important;

  outline:none !important;
}


input::placeholder,
textarea::placeholder{

  color:#849096 !important;

  font-weight:500 !important;
}


input[type="number"]{
  font-size:
    16px !important;

  font-weight:
    850 !important;
}


/* =========================================================
   BOTÃO PRINCIPAL
   ========================================================= */

.btn:not(.btn-secundario),
button.primary,
.op-btn.primary{

  background:
    var(--v2-orange) !important;

  color:
    #171717 !important;

  border:
    1px solid
    var(--v2-orange-dark) !important;

  border-radius:
    8px !important;

  font-weight:
    900 !important;

  min-height:
    42px;

  box-shadow:
    0 3px 9px
    rgba(245,130,20,.22) !important;
}


.btn:not(.btn-secundario):hover,
button.primary:hover,
.op-btn.primary:hover{

  background:
    var(--v2-orange-dark) !important;

  color:
    #fff !important;
}


/* elimina azul/turquesa antigo */
button[type="submit"],
.btn-salvar,
.salvar{

  background:
    var(--v2-orange) !important;

  color:
    #151515 !important;

  border-color:
    var(--v2-orange-dark) !important;

  font-weight:
    900 !important;
}


/* =========================================================
   BOTÃO SECUNDÁRIO
   ========================================================= */

.btn-secundario,
.op-btn:not(.primary){

  background:#fff !important;

  color:
    #222 !important;

  border:
    1.5px solid
    #abb7bc !important;

  border-radius:
    8px !important;

  font-weight:
    800 !important;
}


.btn-secundario:hover,
.op-btn:not(.primary):hover{

  border-color:
    var(--v2-orange) !important;

  background:
    #fff7ef !important;
}


/* =========================================================
   TABELAS
   ========================================================= */

table{

  background:
    #fff !important;

  border-collapse:
    separate !important;

  border-spacing:
    0 !important;
}


thead th{

  background:
    #24282b !important;

  color:
    #fff !important;

  border-bottom:
    4px solid
    var(--v2-orange) !important;

  padding:
    13px 11px !important;

  font-size:
    11px !important;

  font-weight:
    900 !important;

  letter-spacing:
    .045em !important;
}


tbody td{

  color:
    #1d282d !important;

  font-size:
    14px !important;

  font-weight:
    700 !important;

  padding:
    12px 11px !important;

  border-bottom:
    1px solid
    #dbe2e5 !important;

  font-variant-numeric:
    tabular-nums;
}


tbody tr:nth-child(even){

  background:
    #f7f8f9 !important;
}


tbody tr:hover{

  background:
    #fff3e7 !important;
}


tbody td strong{

  color:
    #111 !important;

  font-weight:
    900 !important;
}


/* inputs dentro de tabela */
table input,
table select{

  min-height:
    42px !important;

  background:
    #fff !important;

  color:
    #111 !important;

  font-weight:
    800 !important;

  border:
    1.5px solid
    #c1ccd1 !important;
}


/* =========================================================
   CHECKBOX
   ========================================================= */

input[type="checkbox"]{

  width:22px !important;
  height:22px !important;

  min-height:22px !important;

  accent-color:
    var(--v2-orange);
}


/* =========================================================
   RESUMOS / KPIs
   ========================================================= */

.kpi,
.metric,
.summary-card,
.resumo-card{

  border-top:
    3px solid
    var(--v2-orange) !important;

  border-radius:
    11px !important;

  background:
    #fff !important;
}


.kpi span,
.metric span,
.summary-card span,
.resumo-card span{

  color:
    #59666c !important;

  font-size:
    12px !important;

  font-weight:
    700 !important;
}


.kpi strong,
.metric strong,
.summary-card strong,
.resumo-card strong,
.kpi .valor,
.metric .valor{

  color:
    #101010 !important;

  font-size:
    25px !important;

  font-weight:
    950 !important;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   RELATÓRIOS
   ========================================================= */

.relatorio h2,
.report h2,
.modal-relatorio h2{

  padding-left:
    11px !important;

  border-left:
    5px solid
    var(--v2-orange) !important;
}


.relatorio h3,
.report h3{

  color:
    #171717 !important;

  font-weight:
    900 !important;
}


.kv,
.info-row,
.detail-row{

  color:
    #46545a !important;
}


.kv strong,
.info-row strong,
.detail-row strong{

  color:
    #111 !important;

  font-size:
    15px !important;

  font-weight:
    900 !important;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   TOTALIZADORES
   ========================================================= */

.total{

  border-radius:
    10px !important;

  font-weight:
    900 !important;
}


.total.navy{

  background:
    #202326 !important;

  color:
    #fff !important;

  border:
    1px solid
    #111 !important;
}


.total.navy strong{

  color:
    var(--v2-orange) !important;
}


.total.green,
.total.positive{

  background:
    #e4f5eb !important;

  color:
    var(--v2-green) !important;
}


.total.red,
.total.negative{

  background:
    #fde7e7 !important;

  color:
    var(--v2-red) !important;
}


/* =========================================================
   MODAIS
   ========================================================= */

.modal-conteudo,
.modal-box,
.imp-despesca-box,
.imperial-confirm-box{

  background:#fff !important;

  border:
    1px solid
    #cfd6d9 !important;

  border-top:
    5px solid
    var(--v2-orange) !important;

  border-radius:
    14px !important;

  box-shadow:
    0 30px 80px
    rgba(0,0,0,.28) !important;
}


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

.status,
.status-operacional{

  font-weight:
    900 !important;

  border-radius:
    999px !important;

  padding:
    6px 10px !important;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar{

  width:
    10px;

  height:
    10px;
}


::-webkit-scrollbar-track{

  background:
    #e7e9ea;
}


::-webkit-scrollbar-thumb{

  background:
    #929a9e;

  border-radius:
    10px;
}


::-webkit-scrollbar-thumb:hover{

  background:
    var(--v2-orange);
}


/* =========================================================
   QUALIDADE DA ÁGUA
   Ajustes específicos vistos na tela
   ========================================================= */

/*
 * Evita azul/turquesa nos controles
 */
body button.active,
body button.ativo{

  background:
    var(--v2-black) !important;

  color:
    #fff !important;

  border-color:
    var(--v2-black) !important;

  box-shadow:
    inset 0 -4px 0
    var(--v2-orange) !important;
}


/*
 * Linha de viveiro mais destacada
 */
tbody td:nth-child(2) strong{

  font-size:
    15px !important;
}


/*
 * Cards inferiores
 */
.painel + .painel,
.painel ~ .painel{
  color:
    var(--v2-text);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:720px){

  h1{
    font-size:
      27px !important;
  }

  h2{
    font-size:
      21px !important;
  }

  input,
  select,
  textarea{
    font-size:
      16px !important;
  }

  tbody td{
    font-size:
      13px !important;
  }

}



/* =========================================================
   IMPERIAL V2.2
   CABEÇALHOS DE TABELA - CONTRASTE DEFINITIVO
   ========================================================= */

/*
 * Força todas as barras das tabelas para o mesmo padrão,
 * mesmo quando alguma página possui CSS próprio.
 */

html body table thead,
html body table thead tr{
  background:#1f2224 !important;
}


html body table thead th{

  background:#1f2224 !important;

  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;

  opacity:1 !important;

  font-size:12.5px !important;
  font-weight:900 !important;

  letter-spacing:.045em !important;

  line-height:1.25 !important;

  padding:13px 12px !important;

  border-top:0 !important;
  border-left:0 !important;
  border-right:0 !important;

  border-bottom:
    4px solid #f58214 !important;

  text-shadow:
    0 1px 1px rgba(0,0,0,.18) !important;

  filter:none !important;
}


/*
 * Alguns cabeçalhos possuem SPAN, STRONG, DIV etc.
 * Todos passam a ficar brancos.
 */
html body table thead th *,
html body table thead th span,
html body table thead th strong,
html body table thead th div,
html body table thead th label,
html body table thead th a{

  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;

  opacity:1 !important;

  font-weight:900 !important;

  filter:none !important;
}


/*
 * Remove qualquer variável/cor azul de cabeçalhos antigos.
 */
html body .painel table thead th,
html body .card table thead th,
html body .panel table thead th,
html body .relatorio table thead th,
html body .report table thead th{

  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;

  background:#1f2224 !important;
}


/*
 * Melhor leitura em telas grandes.
 */
@media(min-width:1200px){

  html body table thead th{
    font-size:13px !important;
  }

}



/* =========================================================
   IMPERIAL V2.3
   CARDS / KPIs - TÍTULOS MAIS VISÍVEIS
   ========================================================= */

/* Cards do dashboard */
.kpi,
.metric,
.summary-card,
.resumo-card,
.dashboard-card,
.card-indicador,
.card-kpi{
  position:relative;
}


/* Título pequeno no topo do card */
.kpi > span:first-child,
.metric > span:first-child,
.summary-card > span:first-child,
.resumo-card > span:first-child,
.dashboard-card > span:first-child,
.card-indicador > span:first-child,
.card-kpi > span:first-child,

.kpi .titulo,
.metric .titulo,
.summary-card .titulo,
.resumo-card .titulo,
.dashboard-card .titulo,
.card-indicador .titulo,
.card-kpi .titulo,

.kpi .label,
.metric .label,
.summary-card .label,
.resumo-card .label,
.dashboard-card .label,
.card-indicador .label,
.card-kpi .label{

  font-size:15px !important;
  font-weight:900 !important;
  line-height:1.2 !important;
  letter-spacing:.01em !important;

  color:#ffffff !important;
  opacity:1 !important;

  text-shadow:
    0 1px 1px rgba(0,0,0,.18) !important;
}


/* Valor principal */
.kpi strong,
.metric strong,
.summary-card strong,
.resumo-card strong,
.dashboard-card strong,
.card-indicador strong,
.card-kpi strong,

.kpi .valor,
.metric .valor,
.summary-card .valor,
.resumo-card .valor,
.dashboard-card .valor,
.card-indicador .valor,
.card-kpi .valor,

.kpi .value,
.metric .value,
.summary-card .value,
.resumo-card .value,
.dashboard-card .value,
.card-indicador .value,
.card-kpi .value{

  font-size:19px !important;
  font-weight:950 !important;
  line-height:1.15 !important;

  color:#111 !important;
}


/* Texto inferior do card */
.kpi small,
.metric small,
.summary-card small,
.resumo-card small,
.dashboard-card small,
.card-indicador small,
.card-kpi small,

.kpi .subtitulo,
.metric .subtitulo,
.summary-card .subtitulo,
.resumo-card .subtitulo,
.dashboard-card .subtitulo,
.card-indicador .subtitulo,
.card-kpi .subtitulo,

.kpi .descricao,
.metric .descricao,
.summary-card .descricao,
.resumo-card .descricao,
.dashboard-card .descricao,
.card-indicador .descricao,
.card-kpi .descricao{

  font-size:13px !important;
  font-weight:700 !important;
  line-height:1.25 !important;

  color:rgba(255,255,255,.92) !important;
  opacity:1 !important;
}


/* Se algum card estiver usando div ao invés de span/small */
.kpi div,
.metric div,
.summary-card div,
.resumo-card div,
.dashboard-card div,
.card-indicador div,
.card-kpi div{
  text-rendering:optimizeLegibility;
}


/* Em telas grandes, sobe um pouco mais */
@media(min-width:1200px){

  .kpi > span:first-child,
  .metric > span:first-child,
  .summary-card > span:first-child,
  .resumo-card > span:first-child,
  .dashboard-card > span:first-child,
  .card-indicador > span:first-child,
  .card-kpi > span:first-child,

  .kpi .titulo,
  .metric .titulo,
  .summary-card .titulo,
  .resumo-card .titulo,
  .dashboard-card .titulo,
  .card-indicador .titulo,
  .card-kpi .titulo,

  .kpi .label,
  .metric .label,
  .summary-card .label,
  .resumo-card .label,
  .dashboard-card .label,
  .card-indicador .label,
  .card-kpi .label{
    font-size:16px !important;
  }

  .kpi small,
  .metric small,
  .summary-card small,
  .resumo-card small,
  .dashboard-card small,
  .card-indicador small,
  .card-kpi small,

  .kpi .subtitulo,
  .metric .subtitulo,
  .summary-card .subtitulo,
  .resumo-card .subtitulo,
  .dashboard-card .subtitulo,
  .card-indicador .subtitulo,
  .card-kpi .subtitulo,

  .kpi .descricao,
  .metric .descricao,
  .summary-card .descricao,
  .resumo-card .descricao,
  .dashboard-card .descricao,
  .card-indicador .descricao,
  .card-kpi .descricao{
    font-size:13.5px !important;
  }
}