.navbar {background-color: #FFF;}
.navbar a, .navbar .navbar-brand, .navbar-inverse .navbar-nav>li>a, 
.navbar h1, 
.navbar h2, 
.navbar h3,
.navbar h4,
p {
  color: #333;
}
/*.navbar, .navbar-inverse {
    border-color: #ee272f;
}*/
.navbar-inverse .navbar-toggle .icon-bar {
background-color: #333;
}
.navbar-brand img {
	max-height: 40px;
}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
    background-color: #FFF;
}
.navbar-top-links li a:focus,
.navbar-top-links li a:hover { 
background-color:#e4e4e4;
}
.navbar-top-links li a:hover, .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus, .nav .open>a, .nav .open>a:focus, .nav .open>a:hover { background-color:#e4e4e4; }
.navbar-top-links .dropdown-user { color:#333;}
.navbar label {color: #333;}



/* Typography */
/* Typography: self-hosted fonts and design tokens */
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit/static/Outfit-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit/static/Outfit-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit/static/Outfit-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit/static/Outfit-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit/static/Outfit-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 2) Helvetica Neue - exemplo de @font-face para self-hosting
   - Atenção: 'Helvetica Neue' costuma ser uma fonte comercial. Verifique
     a licença antes de hospedar os arquivos no servidor.
   - Coloque os arquivos em `app/fonts/` (ajuste os caminhos conforme necessário).
*/
/* Exemplo para weights 400 e 700. Ajuste nomes/paths conforme seus arquivos. */
@font-face {
  font-family: 'HelveticaNeueWeb';
  src: local('Helvetica Neue'), local('HelveticaNeue'),
       url('../fonts/helvetica-newe-5/HelveticaNeueLightItalic.otf') format('opentype'),
       url('../fonts/HelveticaNeue-Regular.woff2') format('woff2'),
       url('../fonts/HelveticaNeue-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HelveticaNeueWeb';
  src: local('Helvetica Neue Medium'), local('HelveticaNeue-Medium'),
       url('../fonts/helvetica-neue-5/HelveticaNeueMedium.otf') format('opentype'),
       url('../fonts/helvetica-neue-5/HelveticaNeueMedium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HelveticaNeueWeb';
  src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'),
       url('../fonts/helvetica-newe-5/HelveticaNeueLightItalic.otf') format('opentype'),
       url('../fonts/HelveticaNeue-Bold.woff2') format('woff2'),
       url('../fonts/HelveticaNeue-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* End of font declarations */

/* Root variables: tipografia, escala e espaçamentos */
:root{
  /* Typography tokens */
  --font-base: 'HelveticaNeueWeb', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-secondary: 'Outfit', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-h1: 4rem;
  --fs-h2: 3.25rem;
  --fs-h3: 2rem;
  --fs-hat: 1.125rem;
  /* Corpo de texto grande (24px) */
  --fs-body-large: 1.5rem;
    /* Corpo de texto médio (16px) - PADRÃO do site (desktop) */
    /* previous values (kept commented for easy revert):
      --fs-body-medium: 1.125rem;  — 18px
      --fs-body-medium: 1.25rem;   — 20px
    */
    --fs-body-medium: 1rem;
    /* Corpo de texto pequeno (14px) — was 16px */
    /* previous: --fs-body-small: 1rem;  — 16px */
    --fs-body-small: 0.875rem;
  --fs-button: 1rem;

  --lh-hat: 1;
  --lh-h1: 1.1;
  --lh-body: 1.3;
  --lh-h2: 1.1;
  --lh-body-medium: 1.3;
  --lh-button: 1;
  --lh-h3: 1.1;

  --ls-hat: 0.10em;
  --ls-h1: 0em;
  --ls-body: 0em;
  --ls-h2: 0em;
  --ls-body-medium: 0em;
  --ls-button: 0em;
  --ls-h3: 0em;

  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide: 0.02em;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;

  --text-color: #222;
  --muted: #666;
  --accent: #FE4802;
  --accent-soft: #FFF5EC;
  
  /* RGB components for accent color so we can create translucent variants */
  --accent-rgb: 254, 72, 2;
  /* Bootstrap v3.3.5 default brand colors — keep as defaults, you can replace later */
  --bs-primary: var(--accent); /* $brand-primary 337ab7 */
  --bs-success: #23a642; /* $brand-success */
  --bs-info:    #5bc0de; /* $brand-info */
  --bs-warning: #ec971f; /* $brand-warning */
  --bs-danger:  #a6237c; /* $brand-danger */

  --bs-success-bg: #EDF7EE; /* $brand-success-bg */
  --bs-info-bg:    #F0F9FC; /* $brand-info-bg */
  --bs-warning-bg: #FDF5ED; /* $brand-warning-bg */
  --bs-danger-bg:  #F7ECF2; /* $brand-danger-bg */
}

/* Base */
html { font-size: 100%; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body {
  font-family: var(--font-base);
  /* Use o corpo médio como padrão no site */
  font-size: var(--fs-body-medium);
  line-height: var(--lh-body);
  color: var(--text-color);
  margin: 0;
  background: #fff;
}

/* Headings (Outfit) */
h1, .h1 {
  font-family: var(--font-secondary);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: var(--ls-h1);
}
h2, .h2 {
  font-family: var(--font-secondary);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: var(--ls-h2);
}
h3, .h3 {
  font-family: var(--font-secondary);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin: 0 0 0.5em;
  font-weight: 600;
  letter-spacing: var(--ls-h3);
}
h4, .h4 { font-family: var(--font-secondary); font-size: var(--fs-body-medium); line-height: 1.25; margin: 0 0 0.5em; font-weight:600; }
h5, .h5 { font-family: var(--font-secondary); font-size: var(--fs-body-small); font-weight:600; }
h6, .h6 { font-family: var(--font-secondary); font-size: var(--fs-xs); font-weight:600; color: var(--muted); }

/* Hat (label) */
.hat {
  font-family: var(--font-secondary);
  font-size: var(--fs-hat);
  line-height: var(--lh-hat);
  letter-spacing: var(--ls-hat);
  font-weight: 400;
}

/* Body variations */
.body-medium { font-size: var(--fs-body-medium); line-height: var(--lh-body-medium); }
.body-small { font-size: var(--fs-body-small); line-height: var(--lh-body); }


p { margin: 0 0 1em; font-size: var(--fs-body-medium); line-height: var(--lh-body); font-family: var(--font-base); letter-spacing: var(--ls-body); }

/* Adjacent-heading rules
   - Any element immediately after an H1 uses 'Corpo de texto grande' (24px)
   - Any element immediately after an H2 uses 'Corpo de texto médio' (20px)
   - Any element immediately after H3..H6 uses 'Corpo de texto pequeno' (16px)
   Notes: these are adjacent-sibling selectors (e.g. `h1 + p`). Placed after
   the generic `p` rules so they override the base paragraph sizing when needed.
*/
/*h1 + * {
  font-size: var(--fs-body-large);
  line-height: var(--lh-body);
}*/

h2 + * {
  font-size: var(--fs-body-medium);
  line-height: var(--lh-body);
}

h3 + *, h4 + *, h5 + *, h6 + * {
  font-size: var(--fs-body-small);
  line-height: var(--lh-body);
}
.body-medium { font-size: var(--fs-body-medium); line-height: var(--lh-body-medium); }
.body-small { font-size: var(--fs-body-small); line-height: var(--lh-body); }

/* Button text */
.btn-text,
button, input[type="submit"], input[type="button"] {
  font-family: var(--font-base);
  font-size: var(--fs-button);
  line-height: var(--lh-button);
  letter-spacing: var(--ls-button);
  font-weight: 500;
}

/* Paragraphs and helpers */
.lead { font-size: var(--fs-hat); line-height: var(--lh-hat); color: var(--text-color); }
.small { font-size: var(--fs-sm); color: var(--muted); }

/* Utility classes */
.uppercase { text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.bold { font-weight: 700; }
.text-muted { color: var(--muted); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-left { text-align: left; }

/* Forms use same type */
input, textarea, select, button { font-family: var(--font-base); font-size: var(--fs-body-medium); }

/* Lists: melhor legibilidade */
ul, ol { margin: 0 0 1em 0; } /* was 0 0 1em 1.25em;*/

/* Small responsive adjustments */
@media (max-width: 768px) {
  :root {
    --fs-h1: 2.5rem;    /* ~40px */
    --fs-h2: 2rem;      /* ~32px */
    --fs-h3: 1.5rem;    /* ~24px */
    /* reduzir o corpo médio em telas pequenas */
    --fs-body-medium: 1rem;    /* 16px on smaller screens */
  }
  body { font-size: var(--fs-body-medium); }
}

/* Accessibility helper */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Links (use brand primary variable) */
a { color: var(--accent); }
a:focus, a:hover { color: var(--muted); text-decoration: underline; }
footer a {
    text-decoration: underline;
    color: #FFF;
}

/* Buttons: apply to .btn-primary and provide utility .btn-accent
   - Buttons use white text on accent background; on hover they invert
     to white background and accented text/border. Works with Bootstrap v3.3.5
*/
.btn-primary, .btn-accent {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.btn-primary:hover, .btn-accent:hover,
.btn-primary:focus, .btn-accent:focus,
.btn-primary:active, .btn-accent:active,
.btn-primary.active, .btn-accent.active {
  background-color: #fff;
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.btn-primary-invertido {
  background-color: #fff;
  color: var(--bs-primary);
  border: 1px solid var(--bs-primary);
  transition: background-color .12s, color .12s, border-color .12s;
}
.btn-primary-invertido:hover,
.btn-primary-invertido:focus,
.btn-primary-invertido:active,
.btn-primary-invertido.active {
  background-color: var(--bs-primary);
  color: #fff;
  border-color: var(--bs-primary);
}

/* Map other Bootstrap button variants to theme variables */
.btn-success {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
  color: #fff;
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active {
  background-color: #fff;
  color: var(--bs-success);
  border-color: var(--bs-success);
}

.btn-info {
  background-color: var(--bs-info);
  border-color: var(--bs-info);
  color: #fff;
}
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active {
  background-color: #fff;
  color: var(--bs-info);
  border-color: var(--bs-info);
}

.btn-warning {
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
  color: #fff;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active {
  background-color: #fff;
  color: var(--bs-warning);
  border-color: var(--bs-warning);
}

.btn-danger {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
  color: #fff;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active {
  background-color: #fff;
  color: var(--bs-danger);
  border-color: var(--bs-danger);
}

/* Ensure all interactive combinations use theme vars (covers :hover + :active combos that may be defined in Bootstrap) */
/* Primary */
.btn-primary:hover, a.btn-primary:hover,
.btn-primary:focus, a.btn-primary:focus,
.btn-primary:active, a.btn-primary:active,
.btn-primary.active, a.btn-primary.active,
.btn-primary:active:hover, .btn-primary.active:hover,
a.btn-primary:active:hover {
  background-color: #fff;
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Success */
.btn-success:hover, a.btn-success:hover,
.btn-success:focus, a.btn-success:focus,
.btn-success:active, a.btn-success:active,
.btn-success.active, a.btn-success.active,
.btn-success:active:hover, .btn-success.active:hover,
a.btn-success:active:hover {
  background-color: #fff;
  color: var(--bs-success);
  border-color: var(--bs-success);
}

/* Info */
.btn-info:hover, a.btn-info:hover,
.btn-info:focus, a.btn-info:focus,
.btn-info:active, a.btn-info:active,
.btn-info.active, a.btn-info.active,
.btn-info:active:hover, .btn-info.active:hover,
a.btn-info:active:hover {
  background-color: #fff;
  color: var(--bs-info);
  border-color: var(--bs-info);
}

/* Warning */
.btn-warning:hover, a.btn-warning:hover,
.btn-warning:focus, a.btn-warning:focus,
.btn-warning:active, a.btn-warning:active,
.btn-warning.active, a.btn-warning.active,
.btn-warning:active:hover, .btn-warning.active:hover,
a.btn-warning:active:hover {
  background-color: #fff;
  color: var(--bs-warning);
  border-color: var(--bs-warning);
}

/* Danger */
.btn-danger:hover, a.btn-danger:hover,
.btn-danger:focus, a.btn-danger:focus,
.btn-danger:active, a.btn-danger:active,
.btn-danger.active, a.btn-danger.active,
.btn-danger:active:hover, .btn-danger.active:hover,
a.btn-danger:active:hover {
  background-color: #fff;
  color: var(--bs-danger);
  border-color: var(--bs-danger);
}

/* Text utility overrides (map Bootstrap text utilities to theme variables) */
.text-primary { color: var(--bs-primary); }
a.text-primary, a.text-primary:focus, a.text-primary:hover { color: var(--bs-primary); }

.text-success { color: var(--bs-success); }
a.text-success, a.text-success:focus, a.text-success:hover { color: var(--bs-success); }

.text-info { color: var(--bs-info); }
a.text-info, a.text-info:focus, a.text-info:hover { color: var(--bs-info); }

.text-warning { color: var(--bs-warning); }
a.text-warning, a.text-warning:focus, a.text-warning:hover { color: var(--bs-warning); }

.text-danger { color: var(--bs-danger); }
a.text-danger, a.text-danger:focus, a.text-danger:hover { color: var(--bs-danger); }

/* Nav pills */
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    background-color: var(--accent);
    color: #fff;
}

/* Navbar / brand mapping (optional) */
.navbar-brand { font-size: var(--fs-h3); font-family: var(--font-secondary); font-weight:700; }

/* Example status badges (use as utility) */
.badge { display:inline-block; padding:.2em .5em; border-radius:4px; font-size:.5em; font-weight:600; }
.badge--success { background: var(--bs-success); color: #fff; }
.badge--info    { background: var(--bs-info);    color: #fff; }
.badge--warning { background: var(--bs-warning); color: #fff; }
.badge--danger  { background: var(--bs-danger);  color: #fff; }

/* Badge polish: subtle border and hover state to match theme */
.badge {
  display: inline-block;
  padding: .25em .5em;
  border-radius: 0.25rem;
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform .08s ease, opacity .12s ease, box-shadow .12s ease;
}
.badge:hover,
.badge:focus {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.navbar .badge { background-color: var(--accent) !important;  font-family: var(--font-base); color: #fff; }
.navbar, .navbar-inverse {  border-color: var(--accent); }

/* Labels (Bootstrap .label*) mapped to brand variables */
.label, .label-default { background: #777; color: #fff; }
.label-primary { background: var(--bs-primary); color: #fff; }
.label-success { background: var(--bs-success); color: #fff; }
.label-info    { background: var(--bs-info);    color: #fff; }
.label-warning { background: var(--bs-warning); color: #fff; }
.label-danger  { background: var(--bs-danger);  color: #fff; }

/* Alerts: use brand variables for colored alerts; keep slight border for separation */
.alert { border: 1px solid rgba(0,0,0,0.06); border-radius: 4px; padding: 12px 15px; }
.alert-success { background-color: var(--bs-success-bg); color: var(--bs-success); border-color: rgba(0,0,0,0.06); }
.alert-info    { background-color: var(--bs-info-bg);    color: var(--bs-info); border-color: rgba(0,0,0,0.06); }
.alert-warning { background-color: var(--bs-warning-bg); color: var(--bs-warning); border-color: rgba(0,0,0,0.06); }
.alert-danger  { background-color: var(--bs-danger-bg);  color: var(--bs-danger); border-color: rgba(0,0,0,0.06); }

/*.alert-warning a {
    color: #fff;
}*/

/* Progress bars: use brand colors for different variants */
.progress { background-color: #f5f5f5; height: 1rem; border-radius: 3px; overflow: hidden; }
.progress-bar { float: left; height: 100%; transition: width .35s ease; background-color: var(--bs-primary); }
.progress-bar-success { background-color: var(--bs-success); }
.progress-bar-info    { background-color: var(--bs-info); }
.progress-bar-warning { background-color: var(--bs-warning); }
.progress-bar-danger  { background-color: var(--bs-danger); }

/* Bootstrap typography mapping (v3.3.5)
   Map common Bootstrap selectors that use fixed sizes to the project's
   typography variables. Keep this file loaded after bootstrap.css so
   these rules take precedence.
*/
.panel-heading,
.panel .panel-title,
.panel-title,
.panel-heading .panel-title {
  font-family: var(--font-secondary);
  font-size: var(--fs-body-medium);
  line-height: var(--lh-body);
  font-weight: 600;
}

.panel-body,
.list-group-item,
.list-group-item .list-group-item-heading,
.list-group-item-heading {
  font-family: var(--font-base);
  font-size: var(--fs-body-medium);
  line-height: var(--lh-body);
}

.modal-title,
.modal-header .modal-title {
  font-family: var(--font-secondary);
  font-size: var(--fs-body-medium);
  line-height: var(--lh-body);
  font-weight: 600;
}

.navbar-nav > li > a,
.navbar-text {
  font-size: var(--fs-body-medium);
}

.breadcrumb,
.breadcrumb > li > a {
  font-size: var(--fs-body-small);
}

.dropdown-menu > li > a {
  font-size: var(--fs-body-medium);
}

.table > thead > tr > th,
.table { font-size: var(--fs-body-medium); }

/* Background utilities (apply to any element: div, li, span, etc.)
  - Use .bg-{name} to set background + readable text color
  - Use .bg-inline for inline elements (adds padding and inline-block)
  - Use .bg-block for block-level elements with comfortable padding
*/
.bg-primary { background-color: var(--bs-primary); color: #fff; }
.bg-success { background-color: var(--bs-success); color: #fff; }
.bg-info    { background-color: var(--bs-info);    color: #fff; }
.bg-warning { background-color: var(--bs-warning); color: #fff; }
.bg-danger  { background-color: var(--bs-danger);  color: #fff; }
.bg-accent  { background-color: var(--accent);     color: #fff; }

/* Helpers for inline / block usage */
.bg-inline { display: inline-block; padding: .15em .45em; border-radius: 3px; }
.bg-block  { display: block; padding: .5em .75em; border-radius: 4px; }

/* Optional subtle border for emphasized backgrounds */
.bg-bordered { border: 1px solid rgba(0,0,0,0.06); }

/* Plan page */
.checked {
    border: 1px solid var(--accent) !important;
}
.list-group-item.orange {
    background-color: var(--accent-soft) !important;
    /*border: 1px solid var(--accent);*/
    color: var(--accent) !important;
}
.disccount.two,.disccount.three {
    background-color: #bababa !important;
    font-size: 12px;
}
.disccount.one {
    background-color: #FEC16B !important;
}

/* Box */
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.my {
    background-color: var(--accent-soft) !important;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.my:after {
    border-color: transparent var(--accent-soft) transparent transparent !important;
}