/* =========================================================
   EMC CALCULADORA (ESCOPADO) — CSS COMPLETO
   - Não mexe em body/html do site
   - Resolve o “Montador de prato” (inputs colados / botão desalinhado)
   - Mantém tudo dentro de .emc-calculadora
   ========================================================= */

/* ---------- GRID BASE ---------- */
.emc-calculadora .emc-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.emc-calculadora .emc-col-12{ grid-column: 1 / -1; }
.emc-calculadora .emc-col-8{ grid-column: span 8; }
.emc-calculadora .emc-col-7{ grid-column: span 7; }
.emc-calculadora .emc-col-6{ grid-column: span 6; }
.emc-calculadora .emc-col-4{ grid-column: span 4; }
.emc-calculadora .emc-col-3{ grid-column: span 3; }
.emc-calculadora .emc-col-2{ grid-column: span 2; }

@media (max-width: 980px){
  .emc-calculadora .emc-col-8,
  .emc-calculadora .emc-col-7,
  .emc-calculadora .emc-col-6,
  .emc-calculadora .emc-col-4,
  .emc-calculadora .emc-col-3,
  .emc-calculadora .emc-col-2{
    grid-column: 1 / -1;
  }
}

/* ---------- TIPOGRAFIA LOCAL (leve) ---------- */
.emc-calculadora .emc-title{
  margin: 0 0 6px 0;
  font-size: 20px;
  font-weight: 800;
}

.emc-calculadora .emc-subtitle{
  margin: 0;
  font-size: 13px;
  opacity: .8;
}

.emc-calculadora .emc-header{
  margin-bottom: 10px;
}

/* ---------- CAMPOS ---------- */
.emc-calculadora .emc-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.emc-calculadora .emc-label{
  font-size: 12px;
  opacity: .75;
  line-height: 1.2;
}

/* Força consistência visual e impede “encolhimento” estranho */
.emc-calculadora .emc-input,
.emc-calculadora .emc-select{
  width: 100%;
  min-width: 0;
  height: 42px;                 /* <<< altura consistente */
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.18);
  background: transparent;
  color: inherit;
  outline: none;
}

.emc-calculadora .emc-input:focus,
.emc-calculadora .emc-select:focus{
  border-color: rgba(0,0,0,.35);
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}

/* ---------- AÇÕES / BOTÕES ---------- */
.emc-calculadora .emc-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.emc-calculadora .emc-btn{
  height: 42px;                 /* <<< alinhado com inputs */
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(0,0,0,.04);
  color: inherit;
  cursor: pointer;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.emc-calculadora .emc-btn:hover{ background: rgba(0,0,0,.06); }
.emc-calculadora .emc-btn:active{ transform: translateY(1px); }

.emc-calculadora .emc-btn.primary{
  background: rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.26);
  font-weight: 800;
}

/* ---------- PÍLULA ---------- */
.emc-calculadora .emc-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.03);
  font-size: 12px;
  opacity: .85;
}

/* ---------- KPIs ---------- */
.emc-calculadora .emc-kpis{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 680px){
  .emc-calculadora .emc-kpis{
    grid-template-columns: 1fr;
  }
}

.emc-calculadora .emc-kpi{
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 12px;
  padding: 12px;
  background: rgba(0,0,0,.02);
}

.emc-calculadora .emc-kpi .t{
  font-size: 12px;
  opacity: .75;
}

.emc-calculadora .emc-kpi .v{
  margin-top: 4px;
  font-size: 20px;
  font-weight: 900;
}

.emc-calculadora .emc-kpi .s{
  margin-top: 4px;
  font-size: 12px;
  opacity: .80;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ---------- TABS ---------- */
.emc-calculadora .emc-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.emc-calculadora .emc-tab{
  height: 36px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.03);
  padding: 0 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  opacity: .85;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.emc-calculadora .emc-tab.active{
  background: rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.26);
  font-weight: 800;
  opacity: 1;
}

/* ---------- ALERTAS ---------- */
.emc-calculadora .emc-alert{
  margin-top: 12px;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(0,0,0,.03);
  display: none;
  font-size: 13px;
}

.emc-calculadora .emc-alert.warn{
  border-color: rgba(255, 107, 107, .55);
  background: rgba(255, 107, 107, .10);
}

.emc-calculadora .emc-alert.ok{
  border-color: rgba(70, 200, 140, .45);
  background: rgba(70, 200, 140, .10);
}

/* ---------- SEPARADOR ---------- */
.emc-calculadora .emc-hr{
  height: 1px;
  background: rgba(0,0,0,.10);
  margin: 14px 0;
}

/* ---------- TABELA ---------- */
.emc-calculadora .emc-tablewrap{
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
}

.emc-calculadora .emc-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.emc-calculadora .emc-table thead th{
  text-align: left;
  font-size: 12px;
  opacity: .75;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  white-space: nowrap;
}

.emc-calculadora .emc-table tbody td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  vertical-align: top;
}

.emc-calculadora .emc-table tbody tr:hover{
  background: rgba(0,0,0,.03);
}

.emc-calculadora .emc-right{
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* botão “Adicionar” dentro da tabela */
.emc-calculadora .emc-table .emc-btn{
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
}

/* ---------- MONTADOR DE PRATO (O QUE ESTAVA QUEBRANDO) ---------- */
/*
  O seu print mostra os campos “quebrando/colando”.
  A causa mais comum é:
  - o .emc-grid não estar no container do montador
  OU
  - o tema do site aplicar estilos em inputs/selects que bagunçam o layout.
  Aqui forçamos um “layout de linha” robusto com flex apenas no montador,
  sem depender do grid.
*/

/* O container do montador */
.emc-calculadora .emc-plate{
  margin-top: 6px;
}

/* Força a linha do formulário do montador ficar alinhada */
.emc-calculadora .emc-plate-form{
  display: flex;
  gap: 14px;
  align-items: flex-end;   /* <<< botão alinhado ao fundo dos inputs */
  flex-wrap: wrap;
}

/* Cada field do montador vira um bloco com largura controlada */
.emc-calculadora .emc-plate-form .emc-field{
  margin: 0;
}

/* Campo alimento: ocupa mais */
.emc-calculadora .emc-plate-form .emc-field.food{
  flex: 1 1 360px;         /* cresce, mas tem mínimo */
}

/* Campo gramas: menor */
.emc-calculadora .emc-plate-form .emc-field.qty{
  flex: 0 0 140px;
}

/* Botão: tamanho médio, sem esmagar */
.emc-calculadora .emc-plate-form .emc-field.action{
  flex: 0 0 140px;
}

/* garante largura total dos controles dentro dos fields do montador */
.emc-calculadora .emc-plate-form .emc-input,
.emc-calculadora .emc-plate-form .emc-select,
.emc-calculadora .emc-plate-form .emc-btn{
  width: 100%;
}

/* Mobile: empilha */
@media (max-width: 680px){
  .emc-calculadora .emc-plate-form{
    gap: 12px;
  }
  .emc-calculadora .emc-plate-form .emc-field.food,
  .emc-calculadora .emc-plate-form .emc-field.qty,
  .emc-calculadora .emc-plate-form .emc-field.action{
    flex: 1 1 100%;
  }
}

/* Lista/Resumo do montador (se você estiver usando) */
.emc-calculadora .emc-plate-list,
.emc-calculadora .emc-plate-summary{
  padding: 16px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  background: rgba(0,0,0,.01);
}

/* ---------- UTILITÁRIOS ---------- */
.emc-calculadora .emc-muted{ opacity: .75; }
.emc-calculadora .emc-small{ font-size: 12px; }

/* =========================
   Montador: Lista de itens
   ========================= */

.emc-calculadora .emc-plate-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.emc-calculadora .emc-plate-title{
  font-weight: 800;
  margin-bottom: 2px;
}

/* container dos itens */
.emc-calculadora .emc-plate-items{
  display: flex;
  flex-direction: column;
  gap: 10px;                 /* <<< espaço entre itens */
  margin-top: 10px;
}

/* cada item vira uma “linha-card” */
.emc-calculadora .emc-plate-item{
  display: grid;
  grid-template-columns: 1fr 110px 200px; /* info | kcal | macros+acao */
  gap: 10px 14px;
  align-items: center;

  padding: 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: rgba(0,0,0,.01);
}

/* Coluna 1: nome + meta */
.emc-calculadora .emc-plate-item .name{
  font-weight: 800;
  line-height: 1.15;
}

.emc-calculadora .emc-plate-item .meta{
  margin-top: 4px;
  font-size: 12px;
  opacity: .75;
}

/* Coluna 2: kcal */
.emc-calculadora .emc-plate-item .kcal{
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.emc-calculadora .emc-plate-item .kcal .v{
  font-weight: 900;
}

.emc-calculadora .emc-plate-item .kcal .u{
  font-size: 12px;
  opacity: .75;
  margin-left: 6px;
}

/* Coluna 3: macros + botão */
.emc-calculadora .emc-plate-item .right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.emc-calculadora .emc-plate-item .pcg{
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: .9;
}

.emc-calculadora .emc-plate-item .pcg b{
  font-weight: 900;
}

/* botão remover menor e discreto */
.emc-calculadora .emc-plate-item .btn-remove{
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.15);
  background: rgba(0,0,0,.03);
  cursor: pointer;
}

.emc-calculadora .emc-plate-item .btn-remove:hover{
  background: rgba(0,0,0,.06);
}

/* Mobile: empilha sem ficar gigante */
@media (max-width: 680px){
  .emc-calculadora .emc-plate-item{
    grid-template-columns: 1fr;
  }

  .emc-calculadora .emc-plate-item .kcal{
    text-align: left;
  }

  .emc-calculadora .emc-plate-item .right{
    justify-content: space-between;
  }
}