/* Exceline/GENTE — tema para ThingsBoard CE 4.3.1.3.
   Overrides sobre Angular Material compilado; !important donde el tema base lo exige.
   Colores de marca (muestreados del logo): naranja #ED701E, gris #73757A. */
:root { --ex-orange:#ED701E; --ex-orange-600:#D5641A; --ex-gray:#73757A; }

/* ---- Toolbar principal ---- */
.mat-toolbar.mat-primary,
mat-toolbar.mat-primary { background:var(--ex-orange) !important; color:#fff !important; }

/* ---- Botones primary / raised / FAB ---- */
.mat-mdc-raised-button.mat-primary,
.mat-mdc-unelevated-button.mat-primary,
.mat-mdc-fab.mat-primary,
.mat-mdc-mini-fab.mat-primary { background-color:var(--ex-orange) !important; color:#fff !important; }
.mat-mdc-button.mat-primary,
.mat-mdc-icon-button.mat-primary { color:var(--ex-orange) !important; }

/* ---- Links y acentos de texto ---- */
a, .tb-primary { color:var(--ex-orange); }

/* ---- Menú lateral: item activo ---- */
.tb-nav-item.active, .mat-mdc-list-item.tb-active, .activated { color:var(--ex-orange) !important; }
.tb-nav-item.active .mat-icon { color:var(--ex-orange) !important; }

/* ---- Foco de inputs / form-field ---- */
.mdc-text-field--focused .mdc-floating-label,
.mat-mdc-form-field.mat-focused .mat-mdc-form-field-focus-overlay { color:var(--ex-orange) !important; }
.mdc-line-ripple::after { border-bottom-color:var(--ex-orange) !important; }

/* ---- Tabs, slide-toggle, checkbox, radio, slider, progress -> naranja ---- */
.mat-mdc-tab .mdc-tab-indicator__content--underline { border-color:var(--ex-orange) !important; }
.mdc-switch--selected .mdc-switch__handle::after { background:var(--ex-orange) !important; }
.mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,
.mdc-checkbox__background { border-color:var(--ex-orange) !important; background-color:var(--ex-orange) !important; }
.mat-mdc-progress-bar .mdc-linear-progress__bar-inner { border-color:var(--ex-orange) !important; }
.mat-mdc-progress-spinner circle, .mdc-circular-progress__indeterminate-circle-graphic { stroke:var(--ex-orange) !important; }

/* ============ Login page ============ */
/* El logo de TB es BLANCO (logo_white/logo_title_white) -> el login DEBE tener fondo oscuro
   para que el logo se vea. Fondo de marca: gris oscuro con acento naranja. */
.tb-login-content,
mat-sidenav-container.tb-login,
.tb-login-container,
section.tb-login { background:linear-gradient(160deg,#2b2b2e 0%, #1c1c1e 100%) !important; }

/* Tarjeta del login: el default de TB es azul (#305680) -> superficie oscura de marca
   con acento naranja arriba. */
.tb-login-content mat-card.mat-mdc-card,
.tb-login-content .mat-mdc-card.mdc-card {
  background:#2e2f34 !important; border-top:3px solid var(--ex-orange) !important;
}

/* Botón de login en naranja pleno */
.tb-login-content .mat-mdc-raised-button.mat-primary,
.tb-login .mat-mdc-unelevated-button.mat-primary { background:var(--ex-orange) !important; color:#fff !important; }

/* Firma GENTE al pie del login (::after sobre el form; width:100% para no colapsar en flex).
   gente_white.png es blanco -> legible sobre el fondo oscuro. */
form.tb-login-form::after {
  content:""; display:block; width:100%; height:36px; margin:22px 0 0;
  background:url("assets/gente_white.png") no-repeat center / contain; opacity:.9;
}