/* TTH / Brain — línea gráfica de The Team Home (app.theteamhome.com) sobre las páginas del panel */
@font-face { font-family: "Dolce vita"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/dolce_vita-webfont.woff2) format("woff2"); }
@font-face { font-family: "Dolce vita"; font-weight: 300; font-style: normal; font-display: swap; src: url(fonts/dolce_vita_light-webfont.woff2) format("woff2"); }
@font-face { font-family: "Dolce vita"; font-weight: 600 700; font-style: normal; font-display: swap; src: url(fonts/dolce_vita_heavy_bold-webfont.woff2) format("woff2"); }

:root {
  --tth-cream: #F5F0E6; --tth-sand: #EBE3D0; --tth-gold: #B8935A; --tth-gold-d: #8f6d3c; --tth-gold-l: #f3eadb; --tth-ink: #2D2D2D;
  --tth-t2: #6f6a61; --tth-t3: #a39d92; --tth-b: #e7e0d2; --tth-b2: #d4cab6;
  --tth-font: "Montserrat", system-ui, sans-serif; --tth-disp: "Dolce vita", "Montserrat", sans-serif;
  --tth-shadow: 0 1px 2px rgba(45,35,20,.04), 0 8px 24px rgba(45,35,20,.05);
}

/* Montserrat en todo (incluido el texto de los gráficos SVG); los números de código siguen en monoespaciada */
html body, html body *:not(code):not(.mono):not([class*="mono"]) { font-family: var(--tth-font) !important; }

/* Fondo crema cálido con un velo arena como en la app */
html body:not(.dark) { background-color: var(--tth-cream) !important; }

/* Marca y títulos en Dolce Vita, en mayúsculas como la app */
html body .bt, html body .bt *, html body h1, html body .tth-disp {
  font-family: var(--tth-disp) !important; text-transform: uppercase; letter-spacing: -.3px; font-weight: 600;
}
html body .bt .bs { color: var(--tth-gold) !important; }

/* Etiquetas pequeñas en versalitas espaciadas */
html body .tth-label { font-size: 9.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--tth-t2); }

/* Selector de centro (lo pinta brain.js) */
.tth-centers { display: flex; flex-direction: column; gap: 6px; align-items: center; margin-top: 6px; }
.tth-centers .lbl { font: 700 8px/1 var(--tth-font); letter-spacing: 1px; text-transform: uppercase; color: var(--tth-t3); margin-bottom: 2px; }
.tth-centers button { width: 40px; height: 30px; border-radius: 10px; border: 1.5px solid transparent; background: none; cursor: pointer; position: relative;
  font: 700 9.5px/1 var(--tth-font); letter-spacing: .8px; color: var(--tth-t2); padding: 0; }
.tth-centers button:hover { background: var(--tth-cream); color: var(--tth-ink); }
.tth-centers button.on { background: var(--tth-ink); color: var(--tth-cream); }
.tth-centers button i { position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; border-radius: 9px; transform: translateX(-50%); }
.tth-centers button.on i { display: none; }
.tth-centers button .tt { left: 50px !important; }
.tth-center-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--tth-ink); color: var(--tth-cream);
  font: 700 9.5px/1 var(--tth-font); letter-spacing: 1.1px; text-transform: uppercase; vertical-align: middle; }
.tth-center-tag i { width: 6px; height: 6px; border-radius: 9px; }
@media (max-width: 1000px) {
  body { padding-top: 46px !important; }
  .tth-centers { position: fixed; top: 8px; right: 10px; z-index: 60; flex-direction: row; background: rgba(255,255,255,.94); padding: 4px; border-radius: 14px;
    box-shadow: var(--tth-shadow); backdrop-filter: blur(12px); margin: 0; }
  .tth-centers .lbl { display: none; }
  .tth-centers button { width: auto; padding: 0 9px; height: 28px; }
}