:root {
  /* ── LACTALIS PALETTE ── */
  --bg:  #f0f5fb;
  --sur: #ffffff;
  --s2:  #e8f0f8;
  --brd: rgba(10,80,160,.12);
  --brs: rgba(10,80,160,.30);
  --txt: #0a1e38;
  --mut: #4a6080;
  --lt:  #8aaac8;
  --acc: #0a50a0;      /* Lactalis blue */
  --al:  #ddeeff;
  --inf: #0a50a0;
  --il:  #ddeeff;
  --wrn: #7a4a1a;
  --wl:  #f5ebe0;
  --dng: #7a1a1a;
  --dl:  #f5e0e0;
  --gld: #b8860b;
  --gl:  #fef9e7;
  --r:   10px;
  --rl:  16px;
  --f:   'DM Sans', sans-serif;
  --fh:  'Syne', sans-serif;
  /* Lactalis accent blue shades */
  --lact1: #0a50a0;
  --lact2: #1a6fcf;
  --lact3: #4d9fe0;
  --lact-light: #ddeeff;
  --lact-dark:  #073578;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--f);
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
}

/* ── WATERMARK ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='120' viewBox='0 0 340 120'%3E%3Cellipse cx='170' cy='42' rx='155' ry='38' fill='none' stroke='%230a50a0' stroke-width='5'/%3E%3Ctext x='170' y='52' font-family='Arial,sans-serif' font-size='36' font-weight='900' fill='%230a50a0' text-anchor='middle' letter-spacing='3'%3ELACTALIS%3C/text%3E%3Ctext x='170' y='75' font-family='Arial,sans-serif' font-size='13' fill='%230a50a0' text-anchor='middle' letter-spacing='6'%3EBRASIL%3C/text%3E%3Ctext x='170' y='105' font-family='Georgia,serif' font-style='italic' font-size='16' fill='%230a50a0' text-anchor='middle'%3ENutrir o Futuro%3C/text%3E%3C/svg%3E");
  background-size: 340px 120px;
  background-repeat: repeat;
  opacity: 0.035;
  pointer-events: none;
  z-index: 0;
}

/* Ensure content is above watermark */
#loginScreen,
#appShell,
#ntf,
.alertOv,
.mo {
  position: relative;
  z-index: 1;
}
#loginScreen { z-index: 1000; }
.alertOv     { z-index: 500; }
.mo          { z-index: 200; }
#ntf         { z-index: 999; }

/* ── LOGIN ── */
#loginScreen {
  position: fixed; inset: 0;
  background: linear-gradient(145deg, #0a1e38 0%, #0a50a0 60%, #1a6fcf 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  overflow: hidden;
}

/* Animated bubbles on login */
#loginScreen::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.06) 0%, transparent 35%);
  pointer-events: none;
}

.loginCard {
  background: #fff;
  border-radius: 22px;
  padding: 40px;
  width: 400px;
  max-width: 95vw;
  box-shadow: 0 24px 70px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.12);
  position: relative; z-index: 1;
}

.loginLogo {
  text-align: center;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--lact-light);
}
.loginLogo img {
  max-width: 190px;
  height: auto;
  margin-bottom: 6px;
}
.loginLogo p {
  font-size: 12px;
  color: var(--mut);
  margin-top: 4px;
  letter-spacing: .3px;
}
.loginHint {
  margin-top: 16px; padding: 12px; background: var(--s2);
  border-radius: 8px; font-size: 11px; color: var(--mut); line-height: 1.7;
  border-left: 3px solid var(--acc);
}

/* ── HEADER ── */
.hdr {
  background: linear-gradient(90deg, var(--lact-dark) 0%, var(--lact1) 100%);
  color: #fff;
  padding: 0 20px; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 12px rgba(10,40,90,.25);
}
.hdrLogo {
  display: flex; align-items: center; gap: 10px;
}
.hdrLogo img {
  height: 38px;
  filter: brightness(0) invert(1);
  opacity: 1;
}
.hdr h1 { font-family: var(--fh); font-size: 14px; font-weight: 700; opacity: .88; }
.hdrRight { display: flex; align-items: center; gap: 10px; }
.hdrUser { font-size: 12px; opacity: .65; }
.alertBadge {
  background: #e74c3c; color: #fff; border-radius: 12px;
  padding: 2px 8px; font-size: 11px; font-weight: 700; cursor: pointer;
  display: none;
}

/* ── TABS ── */
.tabs {
  background: var(--sur);
  border-bottom: 2px solid var(--lact-light);
  display: flex; padding: 0 12px; overflow-x: auto;
  position: sticky; top: 56px; z-index: 90;
  scrollbar-width: none;
  box-shadow: 0 2px 6px rgba(10,50,120,.06);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 11px 14px; font-size: 12px; font-weight: 500;
  color: var(--mut); cursor: pointer; white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: all .2s; user-select: none;
}
.tab:hover { color: var(--acc); }
.tab.active { color: var(--acc); border-bottom-color: var(--acc); background: var(--lact-light); }

/* ── LAYOUT ── */
.pg { padding: 20px; max-width: 1380px; margin: 0 auto; }
.pn { display: none; }
.pn.active { display: block; }

/* ── CARD ── */
.card {
  background: var(--sur); border-radius: var(--rl);
  border: 1px solid var(--brd); padding: 18px;
  box-shadow: 0 2px 10px rgba(10,50,130,.06);
}
.ct { font-family: var(--fh); font-size: 13px; font-weight: 600; margin-bottom: 12px; color: var(--lact1); }

/* ── GRID ── */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* ── BADGES ── */
.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 500; }
.bgG  { background: var(--lact-light); color: var(--acc); }
.bgB  { background: var(--il); color: var(--inf); }
.bgA  { background: var(--wl); color: var(--wrn); }
.bgR  { background: var(--dl); color: var(--dng); }
.bgGD { background: var(--gl); color: var(--gld); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border-radius: var(--r);
  border: 1px solid var(--brs); background: var(--sur);
  color: var(--txt); font-family: var(--f); font-size: 12px;
  font-weight: 500; cursor: pointer; transition: all .15s;
}
.btn:hover { background: var(--s2); border-color: var(--acc); }
.btnP { background: var(--acc); color: #fff; border-color: var(--acc); }
.btnP:hover { background: var(--lact-dark); border-color: var(--lact-dark); }
.btnD { background: var(--dl); color: var(--dng); border-color: var(--dng); }
.btnD:hover { background: #f0c0c0; }
.btnSm { padding: 4px 9px; font-size: 11px; }

/* ── FORM ── */
input, select, textarea {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--brs); border-radius: var(--r);
  font-family: var(--f); font-size: 12px;
  background: var(--sur); color: var(--txt);
  outline: none; transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 2px rgba(10,80,160,.12); }
label { font-size: 11px; color: var(--mut); font-weight: 500; display: block; margin-bottom: 3px; }
.fg { margin-bottom: 10px; }
.fr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.inputRO { background: var(--s2) !important; color: var(--mut) !important; }

/* ── METRIC ── */
.met {
  background: linear-gradient(135deg, var(--s2) 0%, var(--lact-light) 100%);
  border-radius: var(--r); padding: 12px;
  border: 1px solid var(--brd);
}
.mL { font-size: 10px; color: var(--mut); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.mV { font-family: var(--fh); font-size: 24px; font-weight: 700; margin-top: 2px; color: var(--acc); }
.mS { font-size: 11px; color: var(--lt); margin-top: 1px; }

/* ── PROGRESS ── */
.pb { height: 7px; background: var(--s2); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.pf { height: 100%; border-radius: 4px; transition: width .4s; }
.pG { background: linear-gradient(90deg, var(--lact1), var(--lact2)); }
.pA { background: #d4880a; }
.pR { background: #c0392b; }

/* ── TABLE ── */
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th {
  text-align: left; padding: 8px 11px; font-size: 10px;
  font-weight: 600; color: var(--acc); text-transform: uppercase;
  letter-spacing: .5px; border-bottom: 2px solid var(--lact-light);
  background: var(--s2);
}
td { padding: 10px 11px; border-bottom: 1px solid var(--brd); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--lact-light); }

/* ── MODAL ── */
.mo {
  display: none; position: fixed; inset: 0;
  background: rgba(7,30,70,.55); z-index: 200;
  align-items: center; justify-content: center;
}
.mo.open { display: flex; }
.md {
  background: var(--sur); border-radius: var(--rl);
  padding: 24px; width: 500px; max-width: 95vw;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 8px 40px rgba(10,40,100,.18);
  border-top: 4px solid var(--acc);
}
.mdTitle { font-family: var(--fh); font-size: 16px; font-weight: 700; margin-bottom: 16px; color: var(--acc); }

/* ── SECTION HEADER ── */
.sh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.stTitle { font-family: var(--fh); font-size: 18px; font-weight: 700; color: var(--txt); }
.stSub { font-size: 12px; color: var(--mut); margin-top: 1px; }

/* ── UTILS ── */
hr { border: none; border-top: 1px solid var(--brd); margin: 14px 0; }
.row { display: flex; align-items: center; gap: 8px; }
.mla { margin-left: auto; }
.fw6 { font-weight: 600; }
.tsm { font-size: 12px; }
.tm { color: var(--mut); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dG { background: var(--acc); }
.dA { background: #d4880a; }
.dR { background: #c0392b; }

/* ── AVATAR ── */
.av {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--lact1), var(--lact2));
  color: #fff;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── COLAB CARD ── */
.ccard {
  background: var(--sur); border: 1px solid var(--brd);
  border-radius: var(--rl); padding: 14px; transition: all .2s;
}
.ccard:hover { box-shadow: 0 4px 16px rgba(10,50,160,.10); border-color: var(--acc); }

/* ── STARS ── */
.star { font-size: 20px; cursor: pointer; color: #ddd; transition: color .12s; }
.star.on { color: var(--gld); }

/* ── NOTIFY ── */
.ntf {
  position: fixed; bottom: 18px; right: 18px;
  background: linear-gradient(90deg, var(--lact-dark), var(--lact1));
  color: #fff;
  padding: 10px 16px; border-radius: var(--r);
  font-size: 12px; font-weight: 500;
  z-index: 999; opacity: 0; transform: translateY(8px);
  transition: all .3s; pointer-events: none;
  box-shadow: 0 4px 16px rgba(10,50,160,.25);
}
.ntf.show { opacity: 1; transform: translateY(0); }

/* ── ALERT BARS ── */
.abar { border-radius: var(--r); padding: 9px 14px; margin-bottom: 10px; font-size: 12px; display: flex; align-items: center; gap: 7px; }
.aWarn { background: #fff3cd; border: 1px solid #ffc107; color: #7a5c00; }
.aOk   { background: var(--lact-light); border: 1px solid var(--acc); color: var(--acc); }
.aInfo { background: var(--il); border: 1px solid var(--inf); color: var(--inf); }
.aErr  { background: var(--dl); border: 1px solid var(--dng); color: var(--dng); }

/* ── ALERT OVERLAY ── */
.alertOv {
  display: none; position: fixed; inset: 0;
  background: rgba(7,30,70,.65); z-index: 500;
  align-items: center; justify-content: center;
}
.alertOv.show { display: flex; }
.alertBox {
  background: #fff; border-radius: 20px; padding: 32px;
  max-width: 480px; width: 95vw; text-align: center;
  box-shadow: 0 20px 60px rgba(10,40,100,.25);
  border-top: 5px solid var(--acc);
}
.alertBox h2 { font-family: var(--fh); font-size: 20px; margin: 10px 0; }

/* ── NINE-BOX ── */
.nbGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.nbCell { border-radius: 8px; padding: 10px; min-height: 80px; cursor: pointer; transition: filter .2s; }
.nbCell:hover { filter: brightness(.93); }

/* ── FLUX CANVAS ── */
.fbox {
  border-radius: 10px; padding: 10px 13px;
  cursor: grab; user-select: none; position: absolute;
  min-width: 130px; box-shadow: 0 2px 8px rgba(10,50,160,.08);
  transition: box-shadow .15s;
}
.fbox:hover { box-shadow: 0 4px 16px rgba(10,50,160,.14); }
.fbox.sel { box-shadow: 0 0 0 3px var(--acc); }

/* ── HEATMAP ── */
.hmCell {
  border-radius: 4px; text-align: center;
  padding: 8px 4px; font-size: 11px;
  font-weight: 700; color: #fff; cursor: default;
}

/* ── ESCALA TABLE ── */
#escTable th, #escTable td { text-align: center; }
#escTable td:first-child { text-align: left; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .fr { grid-template-columns: 1fr; }
  .pg { padding: 12px; }
  .hdr h1 { font-size: 13px; }
}

/* ── DASH FUNCAO TABLE ── */
.dfTable { width: 100%; border-collapse: collapse; font-size: 12px; }
.dfTable thead tr { border-bottom: 2px solid var(--brd); }
.dfTable th {
  text-align: left; padding: 9px 14px; font-size: 10px;
  font-weight: 700; color: var(--acc); text-transform: uppercase;
  letter-spacing: .7px; background: var(--s2);
}
.dfTable th:first-child { border-radius: 8px 0 0 0; }
.dfTable th:last-child  { border-radius: 0 8px 0 0; }
.dfTable td { padding: 12px 14px; border-bottom: 1px solid var(--brd); vertical-align: middle; }
.dfTable tr:last-child td { border-bottom: none; }
.dfTable tbody tr { cursor: pointer; transition: background .15s; }
.dfTable tbody tr:hover td { background: var(--lact-light); }

.dfTema {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 500; color: var(--txt);
}
.dfDot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  display: inline-block;
}
.dfMedia {
  font-size: 12px; font-weight: 600; color: var(--mut);
  white-space: nowrap; min-width: 52px;
}

/* Coluna da barra */
.dfBarWrap {
  display: flex; align-items: center; gap: 10px; min-width: 200px;
}
.dfBar {
  flex: 1; height: 8px; background: var(--lact-light);
  border-radius: 99px; overflow: hidden; min-width: 100px;
}
.dfBarFill {
  height: 100%; border-radius: 99px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.dfPct {
  font-size: 12px; font-weight: 700; color: var(--txt);
  white-space: nowrap; min-width: 40px; text-align: right;
}

/* Legenda rodapé */
.dfLegend {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--brd);
  font-size: 11px; color: var(--mut);
}
.dfLegendItem { display: flex; align-items: center; gap: 5px; }
.dfLegendHint { margin-left: auto; font-style: italic; font-size: 11px; color: var(--lt); }