:root{
  --bg: #f3f4f6;
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;

  --dark: #0b0f17;
  --dark2: #0f172a;
  --border: rgba(17,24,39,.12);
  --shadow: 0 12px 30px rgba(0,0,0,.10);
  --radius: 16px;

  --red: #ef4444;
  --red2: #dc2626;
  --green: #22c55e;
}

*{ box-sizing: border-box; }

/* WRAP */
.wrap{
  max-width: 1180px;
  margin: 18px auto;
  padding: 0 14px 28px;
  flex: 1 1 0;
}

/* BUTTONS */
.btn{
  border: 1px solid transparent;
  cursor: pointer;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 700;
  display:inline-flex;
  gap: 10px;
  align-items:center;
  justify-content:center;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
  user-select: none;
  text-decoration: none;
}
.btn:active{ transform: scale(.98); }

.btn-danger{
  background: linear-gradient(180deg, var(--red), var(--red2));
  color: #fff;
  box-shadow: 0 10px 22px rgba(239,68,68,.25);
  width: 100%;
  display: none;
}
.btn-danger:hover{ filter: brightness(1.06); }

.btn-dark{
  background: #111827;
  color:#fff;
  border-color: rgba(255,255,255,.08);
}
.btn-dark:hover{ filter: brightness(1.08); }

/* CARD */
.card-calc-macros{
  background: rgba(255, 255, 255, .05);;
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 16px;
}

.card--result{
  padding: 16px;
  margin-top: 16px;
}

.card__title{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.card__title h2{
  margin:0;
  font-size: 1.05rem;
}
.card__actions{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.muted{ color: var(--muted); font-size: .92rem; }

/* BADGES */
.badges{ display:flex; gap: 8px; flex-wrap: wrap; justify-content:flex-end; }
.badge{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(17,24,39,.04);
  font-size: .86rem;
  font-weight: 700;
  color: #111827;
}
.badge-muted{
  background: rgba(107,114,128,.08);
  color: #374151;
}

.left-header-resultado {
  background-color: #22c55e;
  display: flex;
}


.macro-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.macro{
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 14px;
  padding: 12px;
}
.macro__label{
  font-size: .85rem;
}
.macro__value{
  font-size: 1.4rem;
  font-weight: 900;
  margin-top: 2px;
}
.macro__sub{
  font-size: .82rem;
  margin-top: 2px;
}

/* RESULT FOOTER */
.result-footer{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.mini{
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 12px;
  padding: 8px 10px;
  display:flex;
  gap: 10px;
  align-items:center;
}
.mini__k{ font-weight: 800; font-size: .85rem; }
.mini__v{ font-weight: 300; font-size: .9rem; }

/* LAYOUT */
.grid-2{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
}

/* FORM */
.form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.field{
  position: relative;
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.field--full{ grid-column: 1 / -1; }

.field label{
  font-size: .9rem;
  font-weight: 800;
  /* color: #111827; */
}

.field select,
.field input:not([type="checkbox"]):not([type="range"]) {
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.12);
  padding: 10px 12px;
  outline: none;
  background: rgba(255, 255, 255, .05);
  font-weight: 700;
  width: 100%;
}

.field select:focus,
.field input:not([type="checkbox"]):not([type="range"]):focus {
  border-color: rgba(239,68,68,.45);
  box-shadow: 0 0 0 3px rgba(239,68,68,.15);
}

/* ✅ Checkbox não herda "input grande" */
.field input[type="checkbox"]{
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 6px;
  accent-color: var(--red);
}
.row input[type="checkbox"]{
  width: 18px !important;
  height: 18px !important;
}


option {
  background: rgba(255, 255, 255, .05);
}

/* ERRO (padrão: fundo vermelho, fonte branca, arredondado em cima e “em cima do input”) */
.field__err{
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  display:none;

  background: linear-gradient(180deg, var(--red), var(--red2));
  color: #fff;
  padding: 8px 10px;
  border-radius: 12px 12px 10px 10px;
  font-weight: 900;
  font-size: .86rem;
  box-shadow: 0 10px 22px rgba(239,68,68,.18);
}
.field.is-error .field__err{ display:block; }
.field.is-error input,
.field.is-error select{
  border-color: rgba(239,68,68,.75);
}

/* RANGE */
.range-row{
  display:flex;
  gap: 10px;
  align-items:center;
}
.range-row input[type="range"]{
  width: 100%;
}
.pill{
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(17,24,39,.06);
  border: 1px solid rgba(17,24,39,.08);
  font-weight: 900;
  min-width: 70px;
  text-align:center;
}
.hint{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .9rem;
}

/* CHECK ROW */
.row{
  display:flex;
  gap: 10px;
  align-items:center;
  font-weight: 800;
  /* color: #111827; */
}
.row input{ transform: scale(1.1); }

/* OPTIONS */
.opt-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.opt{ 
  background: rgba(255, 255, 255, .05);;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 14px;
  padding: 12px;
}
.opt--full{ grid-column: 1 / -1; }
.opt__top{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items:center;
  margin-bottom: 8px;
}
.opt input[type="range"]{ width: 100%; }

/* PER MEAL */
.per-meal{
  margin-top: 12px;
  background: rgba(255, 255, 255, .05);;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 14px;
  padding: 12px;
}
.per-meal__title{
  font-weight: 900;
  display:flex;
  gap: 10px;
  align-items:center;
  margin-bottom: 10px;
}
.per-meal__grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.mini-card{
  background: rgba(255, 255, 255, .05);;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 12px;
  padding: 10px;
}
.mini-card__k{  font-weight: 900; font-size: .85rem; }
.mini-card__v{ font-weight: 1000; font-size: 1.1rem; margin-top: 2px; }

/* NOTE */
.note{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items: center;
  /* color: #374151; */
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.22);
  border-radius: 14px;
  padding: 12px;
  font-weight: 700;
}

/* RESPONSIVO */
@media (max-width: 1020px){
  .grid-2{ grid-template-columns: 1fr; }
  .macro-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn-danger {
    display: block;
  }
}
@media (max-width: 560px){
  .form-grid{ grid-template-columns: 1fr; }
  .macro-grid{ grid-template-columns: 1fr; }
  .per-meal__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand__text p{ display:none; }
}

/* ============================
   DESTAQUE TMB
============================ */
.tmb-highlight{
  margin: 10px 0 12px;
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(17,24,39,.10);
  background:
    radial-gradient(900px 280px at 10% 0%, rgba(239,68,68,.20), transparent 55%),
    radial-gradient(700px 260px at 90% 0%, rgba(59,130,246,.12), transparent 55%),
    rgba(17,24,39,.04);
  display: flex;
  gap: 14px;
  align-items: stretch;
  justify-content: space-between;
}

.tmb-highlight__main{
  min-width: 0;
  flex: 1;
}

.tmb-highlight__label{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 1000;
  /* color: #111827; */
  font-size: .95rem;
}

.tmb-highlight__value{
  margin-top: 4px;
  font-weight: 1000;
  font-size: 2rem;
  letter-spacing: .2px;
  /* color: #111827; */
}

.tmb-highlight__sub{
  margin-top: 2px;
  /* color: #4b5563; */
  font-weight: 300;
  font-size: .9rem;
}

.tmb-highlight__side{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap: wrap;
}

.tmb-mini{
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 150px;
}

.tmb-mini__k{
  font-weight: 900;
  font-size: .85rem;
}

.tmb-mini__v{
  margin-top: 2px;
  font-weight: 300;
  font-size: 1.15rem;
}

/* Responsivo */
@media (max-width: 720px){
  .tmb-highlight{
    flex-direction: column;
  }
  .tmb-mini{
    min-width: 0;
    flex: 1;
  }
}
/* Resultado começa oculto (melhora UX) */
.is-hidden{ display:none; }

/* Efeito sutil pra “chamar atenção” quando rolar pro resultado */
.result-flash{
  animation: resultFlash .8s ease;
}
@keyframes resultFlash{
  0%{ box-shadow: 0 0 0 rgba(239,68,68,0); transform: translateY(0); }
  35%{ box-shadow: 0 0 0 6px rgba(239,68,68,.18); transform: translateY(-2px); }
  100%{ box-shadow: 0 0 0 rgba(239,68,68,0); transform: translateY(0); }
}

/*estilo novos*/
/* HERO */
.calc-hero{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  background: rgba(0,0,0,.18);
  padding: 16px;
  display:grid;
  grid-template-columns: 1.4fr .8fr;
  gap: 16px;
  margin-bottom: 14px;
}
.calc-hero h1{
  margin:0 0 8px;
  font-size: 28px;
  letter-spacing: -.02em;
}
.calc-hero p{
  margin:0 0 14px;
  color: var(--muted);
  line-height: 1.45;
}

.calc-wrap{
  max-width: 1150px;
  margin: 24px auto;
  padding: 0 14px 24px;
}

.calc-card{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow);
  padding: 18px;
}

@media (max-width: 980px) {
    .calc-hero {
        grid-template-columns: 1fr;
    }
}

/* =========================
   FORM: pequenos ajustes de organização
========================= */
.field label{
  display:flex;
  align-items:center;
  gap: 8px;
  line-height: 1.15;
  margin-bottom: 2px;
}

.field input{
  width:100%;
}

/* quando for select personalizado, o botão ocupa o lugar do select */
.field .selectx{ width:100%; }

/* erro também pinta o select custom */
.field.is-error .selectx__btn{
  border-color: rgba(239,68,68,.75) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.15);
}

/* =========================
   SELECT PERSONALIZADO (SelectX)
========================= */
.selectx{ position: relative; }

/* select nativo escondido (mantém value/validação/eventos) */
.selectx select{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  height:44px;
}

/* botão */
.selectx__btn{
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  padding: 0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  cursor:pointer;
}
.selectx__btn:hover{ background: rgba(255,255,255,.10); }
.selectx__btn:focus{
  outline:none;
  border-color: rgba(239,68,68,.45);
  box-shadow: 0 0 0 3px rgba(239,68,68,.15);
}

.selectx__label{
  display:block;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:left;
  font-weight: 800;
}
.selectx__chev{ opacity:.85; }

/* dropdown */
.selectx__dropdown{
  position:absolute;
  left:0; right:0;
  top: calc(100% + 8px);
  z-index: 999;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,15,20,.98);
  box-shadow: 0 18px 70px rgba(0,0,0,.60);
  padding: 6px;
  display:none;
}
.selectx.is-open .selectx__dropdown{ display:block; }

.selectx__list{
  max-height: 260px;
  overflow:auto;
  display:grid;
  gap:6px;
  padding:2px;
}

.selectx__option{
  width:100%;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.90);
  border-radius: 12px;
  padding: 10px 10px;
  cursor:pointer;
  text-align:left;
  font-weight: 700;
}
.selectx__option:hover{ background: rgba(255,255,255,.10); }
.selectx__option[aria-selected="true"]{
  border-color: rgba(239,68,68,.45);
  background: rgba(239,68,68,.12);
}

/* =========================
   RANGE PADRONIZADO (cross-browser)
========================= */
input[type="range"]{
  --track-h: 10px;
  --thumb: 18px;
  --fill: rgba(239,68,68,.85);
  --track: rgba(255,255,255,.10);
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height: var(--thumb);
  background: transparent;
  outline:none;
}

/* WebKit track */
input[type="range"]::-webkit-slider-runnable-track{
  height: var(--track-h);
  border-radius: 999px;
  background: linear-gradient(to right, var(--fill) var(--pct, 50%), var(--track) 0);
  border: 1px solid rgba(255,255,255,.10);
}

/* WebKit thumb */
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  margin-top: calc((var(--track-h) - var(--thumb)) / 2);
  background: rgba(255,255,255,.92);
  border: 2px solid rgba(239,68,68,.75);
  box-shadow: 0 10px 18px rgba(0,0,0,.30);
}

/* Firefox track */
input[type="range"]::-moz-range-track{
  height: var(--track-h);
  border-radius: 999px;
  background: var(--track);
  border: 1px solid rgba(255,255,255,.10);
}
input[type="range"]::-moz-range-progress{
  height: var(--track-h);
  border-radius: 999px;
  background: var(--fill);
}
input[type="range"]::-moz-range-thumb{
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: 2px solid rgba(239,68,68,.75);
  box-shadow: 0 10px 18px rgba(0,0,0,.30);
}

/* =========================
   RESULT: melhora contraste no dark
========================= */
.card--result .macro,
.card--result .mini,
.card--result .tmb-mini{
  border-color: rgba(255,255,255,.10);
}

.badge{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.badge-muted{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
}

/* COLE NO SEU CSS (style-macros2.css) */

/* Card desativado (ex: Gordura quando Carbo está fixo) */
.opt.is-disabled {
  opacity: .55;
  filter: grayscale(.25);
}

.opt.is-disabled input[type="range"] {
  pointer-events: none;
  opacity: .6;
}

/* Mostra um “no resto” no título quando o card estiver desativado */
.opt.is-disabled .opt__top strong::after {
  content: " • restante";
  font-weight: 400;
  font-size: .85em;
  opacity: .85;
}

/* Opcional: deixa a pill menos chamativa quando desativado */
.opt.is-disabled .pill {
  opacity: .75;
}