/* ==========================================================================
   Ritoo — Bootstrap Theme Override
   --------------------------------------------------------------------------
   This file defines Ritoo's own design tokens (--xbyte-*) and remaps the
   official Bootstrap CSS variables (--bs-*) onto them, re-theming the whole
   framework. Load AFTER the official bootstrap.min.css so these win.
   Shared by: institucional / dashboard / whm.
   ========================================================================== */

@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

/* --------------------------------------------------------------------------
   1. Ritoo design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces & ink */
  --xbyte-bg:           #F6F3EE;   /* warm off-white page background     */
  --xbyte-bg-2:         #FBFAF7;   /* slightly lighter panel background  */
  --xbyte-surface:      #FFFFFF;   /* cards                              */
  --xbyte-ink:          #15191E;   /* primary text (warm near-black)     */
  --xbyte-ink-soft:     #3A4047;   /* secondary text                     */
  --xbyte-muted:        #6B7178;   /* tertiary / captions                */

  /* Brand */
  --xbyte-navy:         #0F2233;   /* deep navy — primary                */
  --xbyte-navy-700:     #14304A;
  --xbyte-navy-deep:    #0A1825;   /* darkest navy for dark sections     */
  --xbyte-graphite:     #272D35;   /* graphite                           */

  /* Accent — discreet champagne gold (low chroma, sober) */
  --xbyte-gold:         #BFA269;
  --xbyte-gold-bright:  #D2BA85;   /* gold on dark backgrounds           */
  --xbyte-gold-ink:     #8A6E36;   /* gold text on light backgrounds     */
  --xbyte-gold-soft:    rgba(191,162,105,0.14);

  /* Support — deep evergreen (used very sparingly) */
  --xbyte-green:        #1F4438;

  /* Lines */
  --xbyte-line:         rgba(15,34,51,0.10);
  --xbyte-line-strong:  rgba(15,34,51,0.18);
  --xbyte-line-on-dark: rgba(255,255,255,0.12);

  /* Shadows — soft, premium */
  --xbyte-shadow-sm: 0 1px 2px rgba(15,34,51,0.04), 0 1px 3px rgba(15,34,51,0.05);
  --xbyte-shadow:    0 4px 16px rgba(15,34,51,0.06), 0 1px 4px rgba(15,34,51,0.05);
  --xbyte-shadow-lg: 0 24px 60px rgba(10,24,37,0.14), 0 6px 18px rgba(10,24,37,0.08);

  /* Type */
  --xbyte-font-serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --xbyte-font-sans:  'Manrope', system-ui, -apple-system, sans-serif;

  /* Easing */
  --xbyte-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Remap Bootstrap core variables onto Ritoo tokens
   -------------------------------------------------------------------------- */
:root {
  --bs-body-bg:        var(--xbyte-bg);
  --bs-body-color:     var(--xbyte-ink);
  --bs-body-font-family: var(--xbyte-font-sans);
  --bs-body-font-size: 1.0625rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.6;

  --bs-emphasis-color: var(--xbyte-ink);
  --bs-secondary-color: var(--xbyte-muted);
  --bs-tertiary-color:  var(--xbyte-muted);

  --bs-primary:        var(--xbyte-navy);
  --bs-primary-rgb:    15, 34, 51;
  --bs-secondary:      #5b6168;
  --bs-secondary-rgb:  91, 97, 104;
  --bs-success:        var(--xbyte-green);
  --bs-success-rgb:    31, 68, 56;
  --bs-light:          var(--xbyte-bg-2);
  --bs-light-rgb:      251, 250, 247;
  --bs-dark:           var(--xbyte-navy-deep);
  --bs-dark-rgb:       10, 24, 37;

  --bs-border-color:   var(--xbyte-line);
  --bs-border-radius:        .55rem;
  --bs-border-radius-sm:     .4rem;
  --bs-border-radius-lg:     .85rem;
  --bs-border-radius-xl:     1.1rem;
  --bs-border-radius-pill:   50rem;

  --bs-link-color:       var(--xbyte-navy);
  --bs-link-color-rgb:   15, 34, 51;
  --bs-link-hover-color: var(--xbyte-gold-ink);

  --bs-heading-color:  var(--xbyte-navy);
  --bs-heading-font-family: var(--xbyte-font-serif);

  --bs-font-sans-serif: var(--xbyte-font-sans);

  --bs-focus-ring-color: rgba(191,162,105,0.35);
}

/* --------------------------------------------------------------------------
   3. Base typography
   -------------------------------------------------------------------------- */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.002em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--xbyte-font-serif);
  color: var(--xbyte-navy);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.12;
  text-wrap: balance;
}

p { text-wrap: pretty; }

.fw-medium { font-weight: 500 !important; }

/* Display heading helper — large premium serif */
.ritoo-display {
  font-family: var(--xbyte-font-serif);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--xbyte-navy);
}

/* Eyebrow / kicker label */
.ritoo-eyebrow {
  font-family: var(--xbyte-font-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--xbyte-gold-ink);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.ritoo-eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--xbyte-gold);
  display: inline-block;
}
.ritoo-eyebrow.is-center::after {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--xbyte-gold);
  display: inline-block;
}
.ritoo-eyebrow.on-dark { color: var(--xbyte-gold-bright); }

.ritoo-serif-italic { font-style: italic; font-weight: 400; }

/* Lead text */
.lead {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--xbyte-ink-soft);
  line-height: 1.62;
}

.text-muted-2 { color: var(--xbyte-muted) !important; }
.text-gold { color: var(--xbyte-gold-ink) !important; }

/* --------------------------------------------------------------------------
   4. Buttons — premium, restrained radius
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-font-family: var(--xbyte-font-sans);
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: .95rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: .72rem;
  --bs-btn-border-radius: .5rem;
  letter-spacing: .005em;
  transition: background-color .25s var(--xbyte-ease), color .25s var(--xbyte-ease),
              border-color .25s var(--xbyte-ease), transform .25s var(--xbyte-ease),
              box-shadow .25s var(--xbyte-ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  --bs-btn-bg: var(--xbyte-navy);
  --bs-btn-border-color: var(--xbyte-navy);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--xbyte-navy-deep);
  --bs-btn-hover-border-color: var(--xbyte-navy-deep);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--xbyte-navy-deep);
  --bs-btn-active-border-color: var(--xbyte-navy-deep);
  --bs-btn-disabled-bg: var(--xbyte-navy);
  --bs-btn-disabled-border-color: var(--xbyte-navy);
  box-shadow: 0 1px 2px rgba(10,24,37,.18);
}
.btn-primary:hover { box-shadow: 0 10px 24px rgba(10,24,37,.20); }

.btn-outline-primary {
  --bs-btn-color: var(--xbyte-navy);
  --bs-btn-border-color: var(--xbyte-line-strong);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--xbyte-navy);
  --bs-btn-hover-border-color: var(--xbyte-navy);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--xbyte-navy);
  --bs-btn-active-border-color: var(--xbyte-navy);
}

/* Gold accent button — used sparingly for the key CTA */
.btn-gold {
  --bs-btn-color: var(--xbyte-navy-deep);
  --bs-btn-bg: var(--xbyte-gold);
  --bs-btn-border-color: var(--xbyte-gold);
  --bs-btn-hover-bg: var(--xbyte-gold-bright);
  --bs-btn-hover-border-color: var(--xbyte-gold-bright);
  --bs-btn-hover-color: var(--xbyte-navy-deep);
  --bs-btn-active-bg: var(--xbyte-gold-bright);
  --bs-btn-active-border-color: var(--xbyte-gold-bright);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(138,110,54,.25);
}
.btn-gold:hover { box-shadow: 0 12px 26px rgba(138,110,54,.28); }

/* Ghost button on dark surfaces */
.btn-light-outline {
  --bs-btn-color: #fff;
  --bs-btn-border-color: var(--xbyte-line-on-dark);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: rgba(255,255,255,.08);
  --bs-btn-hover-border-color: rgba(255,255,255,.4);
  --bs-btn-hover-color: #fff;
  border-width: 1px;
}

.btn-lg {
  --bs-btn-padding-x: 1.85rem;
  --bs-btn-padding-y: .9rem;
  --bs-btn-font-size: 1rem;
}

/* Quiet text link with arrow */
.ritoo-link {
  font-family: var(--xbyte-font-sans);
  font-weight: 600;
  font-size: .95rem;
  color: var(--xbyte-navy);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: gap .25s var(--xbyte-ease), color .25s var(--xbyte-ease);
}
.ritoo-link:hover { color: var(--xbyte-gold-ink); gap: .75rem; }
.ritoo-link .bi { font-size: .85em; }

/* --------------------------------------------------------------------------
   5. Cards
   -------------------------------------------------------------------------- */
.card {
  --bs-card-bg: var(--xbyte-surface);
  --bs-card-border-color: var(--xbyte-line);
  --bs-card-border-radius: 1rem;
  --bs-card-inner-border-radius: 1rem;
  --bs-card-spacer-x: 1.85rem;
  --bs-card-spacer-y: 1.85rem;
  --bs-card-cap-bg: transparent;
  box-shadow: var(--xbyte-shadow-sm);
  transition: transform .35s var(--xbyte-ease), box-shadow .35s var(--xbyte-ease),
              border-color .35s var(--xbyte-ease);
}
.card-title { font-family: var(--xbyte-font-serif); color: var(--xbyte-navy); }

/* --------------------------------------------------------------------------
   6. Forms
   -------------------------------------------------------------------------- */
.form-control, .form-select {
  --bs-border-color: var(--xbyte-line-strong);
  font-family: var(--xbyte-font-sans);
  border-radius: .5rem;
  padding: .72rem .9rem;
  background-color: var(--xbyte-surface);
  color: var(--xbyte-ink);
  transition: border-color .2s var(--xbyte-ease), box-shadow .2s var(--xbyte-ease);
}
.form-control:focus, .form-select:focus {
  border-color: var(--xbyte-gold);
  box-shadow: 0 0 0 .2rem rgba(191,162,105,.18);
}
.form-label {
  font-family: var(--xbyte-font-sans);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--xbyte-ink-soft);
  margin-bottom: .4rem;
}

/* --------------------------------------------------------------------------
   7. Badges & pills
   -------------------------------------------------------------------------- */
.badge { font-family: var(--xbyte-font-sans); font-weight: 600; letter-spacing: .02em; }

.ritoo-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--xbyte-font-sans);
  font-size: .82rem;
  font-weight: 600;
  padding: .34rem .8rem;
  border-radius: 50rem;
  border: 1px solid var(--xbyte-line-strong);
  color: var(--xbyte-ink-soft);
  background: var(--xbyte-surface);
}
.ritoo-chip .bi { font-size: .9em; color: var(--xbyte-gold-ink); }
.ritoo-chip.is-active { background: var(--xbyte-navy); color:#fff; border-color: var(--xbyte-navy); }
.ritoo-chip.is-active .bi { color: var(--xbyte-gold-bright); }

/* --------------------------------------------------------------------------
   8. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--xbyte-line);
  --bs-accordion-border-radius: .85rem;
  --bs-accordion-btn-color: var(--xbyte-navy);
  --bs-accordion-active-color: var(--xbyte-navy);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-padding-y: 1.35rem;
}
.accordion-button {
  font-family: var(--xbyte-font-serif);
  font-size: 1.15rem;
  font-weight: 500;
}
.accordion-button:not(.collapsed) { box-shadow: none; }

/* --------------------------------------------------------------------------
   9. Section scaffolding + scroll reveal
   -------------------------------------------------------------------------- */
.section { padding-top: 7rem; padding-bottom: 7rem; }
.section-sm { padding-top: 4.5rem; padding-bottom: 4.5rem; }

.bg-cream  { background-color: var(--xbyte-bg); }
.bg-surface{ background-color: var(--xbyte-surface); }
.bg-navy   { background-color: var(--xbyte-navy); color: #EAF0F6; }
.bg-navy-deep { background-color: var(--xbyte-navy-deep); color: #EAF0F6; }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4,
.bg-navy-deep h1, .bg-navy-deep h2, .bg-navy-deep h3, .bg-navy-deep h4 { color: #fff; }

.hairline { height: 1px; background: var(--xbyte-line); border: 0; }

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--xbyte-ease), transform .7s var(--xbyte-ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }

/* Motion off (Tweaks/reduced) */
.motion-off .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* Number ticker / index */
.ritoo-index {
  font-family: var(--xbyte-font-serif);
  font-size: .9rem;
  color: var(--xbyte-gold-ink);
  font-weight: 500;
}

/* Selection */
::selection { background: var(--xbyte-gold-soft); color: var(--xbyte-navy-deep); }

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(15,34,51,.18); border-radius: 8px; border: 3px solid var(--xbyte-bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(15,34,51,.30); }


.demo-form-modal .modal-content { border:0; border-radius:16px; box-shadow:var(--xbyte-shadow-lg); }
.demo-form-modal .modal-header { border-bottom:1px solid var(--xbyte-line); padding:1.2rem 1.5rem; }
.demo-form-modal .modal-title { font-family:var(--xbyte-font-serif); }
.demo-form-modal .modal-footer { border-top:1px solid var(--xbyte-line); }

/* ==========================================================================
   Identidade visual do projeto — variáveis globais e componentes comuns a
   TODAS as áreas (dashboards e institucionais). Antes em jatix.css.
   ========================================================================== */
/* ---- Ponte: tokens do preset (--xbyte-*) → paleta Jatix ---- */
:root{
  --xbyte-bg:#0C0C10;
  --xbyte-bg-2:#0F0F14;
  --xbyte-surface:#16161D;
  --xbyte-ink:#E6E3DB;
  --xbyte-ink-soft:#C4C1B9;
  --xbyte-muted:#9A9AA4;
  --xbyte-navy:#1C1C25;
  --xbyte-navy-700:#23232E;
  --xbyte-navy-deep:#0A0A0E;
  --xbyte-graphite:#16161D;
  --xbyte-gold:#C49A41;
  --xbyte-gold-bright:#E3C277;
  --xbyte-gold-ink:#D8B466;
  --xbyte-gold-soft:rgba(196,154,65,0.14);
  --xbyte-green:#73B98A;
  --xbyte-line:rgba(255,255,255,0.07);
  --xbyte-line-strong:rgba(196,154,65,0.20);
  --xbyte-line-on-dark:rgba(255,255,255,0.12);
  --xbyte-shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --xbyte-shadow:0 8px 24px rgba(0,0,0,.35);
  --xbyte-shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --xbyte-font-serif:'Cormorant Garamond',Georgia,serif;
  --xbyte-font-sans:'Jost',system-ui,sans-serif;
}

/* ---- Identity tokens ---- */
:root{
  --jatix-onyx:#0C0C10;
  --jatix-onyx-2:#0F0F14;
  --jatix-surface:#16161D;
  --jatix-elevated:#1C1C25;
  --jatix-gold:#C49A41;
  --jatix-gold-soft:#D8B466;
  --jatix-gold-bright:#E3C277;
  --jatix-gold-grad:linear-gradient(150deg,#F6EBC4 0%,#E3C277 38%,#C49A41 72%,#9C7A2E 100%);
  --jatix-ivory:#F5F2EA;
  --jatix-smoke:#9A9AA4;
  --jatix-line:rgba(196,154,65,0.20);
  --jatix-line-soft:rgba(255,255,255,0.07);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
}

/* ---- Bootstrap variable remap (dark luxury) ---- */
:root,[data-bs-theme="dark"]{
  --bs-primary:#C49A41;
  --bs-primary-rgb:196,154,65;
  --bs-primary-text-emphasis:#E3C277;
  --bs-body-bg:#0C0C10;
  --bs-body-bg-rgb:12,12,16;
  --bs-body-color:#E6E3DB;
  --bs-body-color-rgb:230,227,219;
  --bs-emphasis-color:#F5F2EA;
  --bs-emphasis-color-rgb:245,242,234;
  --bs-secondary-color:rgba(154,154,164,0.9);
  --bs-tertiary-color:rgba(154,154,164,0.65);
  --bs-tertiary-bg:#16161D;
  --bs-secondary-bg:#1C1C25;
  --bs-border-color:rgba(255,255,255,0.08);
  --bs-border-color-translucent:rgba(255,255,255,0.08);
  --bs-body-font-family:var(--sans);
  --bs-body-font-weight:300;
  --bs-link-color:#D8B466;
  --bs-link-color-rgb:216,180,102;
  --bs-link-hover-color:#C49A41;
  --bs-heading-color:#F5F2EA;
  --bs-success:#73B98A;--bs-success-rgb:115,185,138;
  --bs-danger:#D98A8A;--bs-danger-rgb:217,138,138;
  --bs-warning:#E0B25A;--bs-warning-rgb:224,178,90;
  --bs-info:#7FA9C9;--bs-info-rgb:127,169,201;
  --bs-code-color:#D8B466;
  --bs-border-radius:4px;
  --bs-border-radius-lg:6px;
}

/* ---- Base ---- */
html,body{min-height:100%;}
body{font-family:var(--sans);font-weight:300;letter-spacing:.005em;-webkit-font-smoothing:antialiased;background:var(--jatix-onyx);}
h1,h2,h3,h4,h5,h6,.font-serif{font-family:var(--serif);letter-spacing:.01em;color:var(--jatix-ivory);}
a{text-decoration:none;}
.text-gold{color:var(--jatix-gold)!important;}
.text-gold-soft{color:var(--jatix-gold-soft)!important;}
.text-soft{color:var(--jatix-smoke)!important;}
.font-serif{font-family:var(--serif)!important;}
.font-sans{font-family:var(--sans)!important;}
.eyebrow{font-family:var(--sans);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--jatix-gold);font-weight:500;}
.gold-grad-text{background:var(--jatix-gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.tracking{letter-spacing:.18em;}
.fw-medium{font-weight:500!important;}
::selection{background:rgba(196,154,65,.28);}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#262630;border-radius:6px;border:3px solid var(--jatix-onyx);}
::-webkit-scrollbar-thumb:hover{background:#34343f;}

/* ---- Buttons ---- */
.btn{--bs-btn-font-family:var(--sans);font-weight:500;letter-spacing:.05em;border-radius:3px;}
.btn-lg{padding:.85rem 2rem;font-size:.95rem;}
.btn-primary{
  --bs-btn-color:#1A1206;--bs-btn-hover-color:#1A1206;--bs-btn-active-color:#1A1206;
  --bs-btn-bg:#C49A41;--bs-btn-border-color:transparent;--bs-btn-hover-border-color:transparent;--bs-btn-active-border-color:transparent;
  background-image:var(--jatix-gold-grad);border:none;box-shadow:0 8px 26px rgba(196,154,65,.22);
}
.btn-primary:hover{box-shadow:0 12px 34px rgba(196,154,65,.34);transform:translateY(-1px);}
.btn-outline-primary{--bs-btn-color:var(--jatix-gold-soft);--bs-btn-border-color:rgba(196,154,65,.45);--bs-btn-hover-bg:rgba(196,154,65,.12);--bs-btn-hover-color:var(--jatix-gold-bright);--bs-btn-hover-border-color:var(--jatix-gold);--bs-btn-active-bg:rgba(196,154,65,.2);}
.btn-ghost{color:var(--jatix-smoke);border:1px solid var(--jatix-line-soft);background:transparent;}
.btn-ghost:hover{color:var(--jatix-ivory);border-color:var(--jatix-line);background:rgba(255,255,255,.03);}
.btn-dark{--bs-btn-bg:#1C1C25;--bs-btn-border-color:var(--jatix-line-soft);--bs-btn-hover-bg:#23232e;--bs-btn-color:var(--jatix-ivory);--bs-btn-hover-color:var(--jatix-ivory);}

/* ---- Cards & surfaces ---- */
.card{--bs-card-bg:var(--jatix-surface);--bs-card-border-color:var(--jatix-line-soft);--bs-card-border-radius:6px;border-radius:6px;background:linear-gradient(165deg,#17171F,#121218);}
.card.elevated{background:linear-gradient(165deg,#1C1C25,#141419);border-color:var(--jatix-line);}
.surface{background:var(--jatix-surface);border:1px solid var(--jatix-line-soft);border-radius:6px;}
.surface-2{background:var(--jatix-elevated);border:1px solid var(--jatix-line-soft);border-radius:6px;}
.hairline{height:1px;background:linear-gradient(90deg,transparent,var(--jatix-line),transparent);border:0;margin:0;}
.ring-gold{border:1px solid var(--jatix-line)!important;}
.glow-gold{box-shadow:0 0 0 1px var(--jatix-line),0 20px 60px rgba(196,154,65,.12);}

/* ---- Tables ---- */
.table{--bs-table-bg:transparent;--bs-table-color:#D9D6CE;--bs-table-border-color:rgba(255,255,255,.06);--bs-table-hover-bg:rgba(196,154,65,.05);--bs-table-hover-color:var(--jatix-ivory);vertical-align:middle;margin:0;}
.table thead th{font-family:var(--sans);font-weight:500;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--jatix-smoke);border-bottom:1px solid var(--jatix-line)!important;padding:.85rem 1rem;white-space:nowrap;}
.table td{padding:.9rem 1rem;border-color:rgba(255,255,255,.05);}
.table-hover>tbody>tr{transition:background .15s;}

/* ---- Badges ---- */
.badge{font-family:var(--sans);font-weight:500;letter-spacing:.06em;border-radius:3px;padding:.42em .72em;font-size:.7rem;}
.badge-soft{background:rgba(255,255,255,.06);color:var(--jatix-smoke);}
.badge-gold{background:rgba(196,154,65,.15);color:var(--jatix-gold-soft);}
.badge-success{background:rgba(115,185,138,.15);color:#8FCBA3;}
.badge-danger{background:rgba(217,138,138,.16);color:#E2A0A0;}
.badge-warn{background:rgba(224,178,90,.16);color:#E8C77E;}
.badge-info{background:rgba(127,169,201,.15);color:#9CBFDA;}
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;}

/* ---- Forms ---- */
.form-control,.form-select{background:var(--jatix-onyx-2);border-color:rgba(255,255,255,.1);color:var(--jatix-ivory);border-radius:3px;font-weight:300;padding:.6rem .85rem;}
.form-control:focus,.form-select:focus{background:var(--jatix-onyx-2);border-color:var(--jatix-gold);box-shadow:0 0 0 3px rgba(196,154,65,.12);color:var(--jatix-ivory);}
.form-control::placeholder{color:#56565F;}
.form-label{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--jatix-smoke);margin-bottom:.5rem;font-weight:400;}
.input-group-text{background:var(--jatix-surface);border-color:rgba(255,255,255,.1);color:var(--jatix-gold);}
.form-check-input{background-color:var(--jatix-onyx-2);border-color:rgba(255,255,255,.2);}
.form-check-input:checked{background-color:var(--jatix-gold);border-color:var(--jatix-gold);}
.form-switch .form-check-input:checked{background-color:var(--jatix-gold);}

/* ---- Progress ---- */
.progress{background:rgba(255,255,255,.06);border-radius:20px;height:7px;}
.progress-bar{background:var(--jatix-gold-grad);border-radius:20px;}

/* ---- Modal ---- */
.modal-content{background:linear-gradient(170deg,#17171F,#101015);border:1px solid var(--jatix-line);border-radius:8px;}
.modal-header,.modal-footer{border-color:var(--jatix-line-soft);}
.modal-backdrop.show{opacity:.72;}

/* ---- Login screen ---- */
.jx-login{position:fixed;inset:0;z-index:1200;display:grid;grid-template-columns:1.05fr 1fr;background:var(--jatix-onyx);}
.jx-login-brand{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:50px 54px;border-right:1px solid var(--jatix-line);
  background:radial-gradient(120% 90% at 20% 10%,rgba(196,154,65,.14),transparent 55%),radial-gradient(90% 70% at 90% 100%,rgba(196,154,65,.1),transparent 60%),linear-gradient(160deg,#141019,#0A0A0E 70%);}
.jx-login-brand.whm{background:radial-gradient(120% 90% at 20% 10%,rgba(127,169,201,.1),transparent 55%),radial-gradient(90% 70% at 90% 100%,rgba(196,154,65,.12),transparent 60%),linear-gradient(160deg,#10131A,#0A0A0E 70%);}
.jx-login-brand::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:26px 26px;opacity:.5;-webkit-mask-image:radial-gradient(80% 80% at 50% 40%,#000,transparent 78%);mask-image:radial-gradient(80% 80% at 50% 40%,#000,transparent 78%);}
.jx-login-top{display:flex;align-items:center;gap:12px;position:relative;z-index:2;}
.jx-login-top img{width:38px;}
.jx-login-top .bn{font-family:var(--serif);font-size:1.4rem;letter-spacing:.3em;font-weight:500;color:var(--jatix-ivory);}
.jx-login-center{position:relative;z-index:2;max-width:440px;}
.jx-login-emblem{width:96px;margin-bottom:30px;filter:drop-shadow(0 18px 50px rgba(0,0,0,.6));}
.jx-login-center h1{font-family:var(--serif);font-weight:500;font-size:3.2rem;line-height:1.05;}
.jx-login-center p{margin-top:20px;font-size:1.05rem;color:#C4C1B9;line-height:1.7;max-width:380px;}
.jx-login-foot{position:relative;z-index:2;display:flex;gap:28px;color:var(--jatix-smoke);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;}
.jx-login-foot span{display:flex;align-items:center;gap:9px;}
.jx-login-foot .status-dot{background:var(--jatix-gold);}
.jx-login-form{display:flex;align-items:center;justify-content:center;padding:50px;}
.jx-login-card{width:100%;max-width:380px;}
.jx-login-card h2{font-size:2.4rem;font-weight:500;margin-top:6px;}
@media(max-width:860px){
  .jx-login{grid-template-columns:1fr;}
  .jx-login-brand{display:none;}
}

/* ---- KPI ---- */
.kpi{position:relative;overflow:hidden;padding:22px 24px;}
.kpi .kpi-label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--jatix-smoke);}
.kpi .kpi-value{font-family:var(--serif);font-size:2.4rem;font-weight:500;line-height:1.05;color:var(--jatix-ivory);margin-top:6px;}
.kpi .kpi-ic{position:absolute;top:20px;right:22px;font-size:1.15rem;color:var(--jatix-gold);opacity:.85;}
.kpi .kpi-foot{font-size:.78rem;margin-top:10px;color:var(--jatix-smoke);}

/* ---- Misc helpers ---- */
.page{padding:30px 34px 60px;max-width:1320px;}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap;}
.page-title{font-family:var(--serif);font-size:2.1rem;font-weight:500;line-height:1.05;}
.muted-cap{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--jatix-smoke);}
.dim{color:var(--jatix-smoke);}
.divider-v{width:1px;align-self:stretch;background:var(--jatix-line-soft);}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
.uuid{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.74rem;color:var(--jatix-smoke);letter-spacing:.02em;}
.avatar-sm{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:500;font-size:.9rem;flex:none;}
.tier-bar{height:3px;border-radius:2px;background:var(--jatix-gold-grad);}
.fade-up{opacity:1;}

/* ---- Toast ---- */
.jx-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);z-index:2000;background:#1C1C25;border:1px solid var(--jatix-line);border-radius:10px;padding:13px 20px;display:flex;align-items:center;gap:11px;box-shadow:0 18px 50px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.25s;font-size:.9rem;color:var(--jatix-ivory);}
.jx-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.jx-toast i{color:var(--jatix-gold);font-size:1.1rem;}
.jx-toast .undo{background:none;border:none;color:var(--jatix-gold-soft);font-family:var(--sans);font-size:.86rem;cursor:pointer;text-decoration:underline;margin-left:6px;}

/* ---- Login (shared) ---- */
.jx-login{display:grid;grid-template-columns:1.05fr 1fr;min-height:100vh;width:100%;}
.jx-login-brand{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:48px 52px;background:radial-gradient(120% 90% at 20% 10%,rgba(196,154,65,.14),transparent 55%),linear-gradient(160deg,#141019,#0A0A0E 70%);border-right:1px solid var(--jatix-line);}
.jx-login-top{display:flex;align-items:center;gap:12px;}
.jx-login-top img{width:38px;}
.jx-login-top .bn{font-family:var(--serif);font-size:1.4rem;letter-spacing:.3em;font-weight:500;}
.jx-login-center{max-width:430px;}
.jx-login-emblem{width:96px;margin-bottom:28px;}
.jx-login-center h1{font-family:var(--serif);font-weight:500;font-size:3rem;line-height:1.06;}
.jx-login-center p{margin-top:18px;color:#C4C1B9;font-size:1.05rem;line-height:1.7;font-weight:300;}
.jx-login-foot{display:flex;gap:26px;color:var(--jatix-smoke);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;}
.jx-login-foot span{display:flex;align-items:center;gap:8px;}
.jx-login-foot .status-dot{background:var(--jatix-gold);}
.jx-login-form{display:flex;align-items:center;justify-content:center;padding:40px;}
.jx-login-card{width:100%;max-width:380px;}
.jx-login-card h2{font-size:2.3rem;margin-top:6px;}
@media(max-width:860px){.jx-login{grid-template-columns:1fr;}.jx-login-brand{display:none;}}

/* ==========================================================================
   Faixa e aviso do ambiente de demonstração (antes em shared.css)
   ========================================================================== */
.demo-banner { background: linear-gradient(90deg, var(--xbyte-navy-deep), var(--xbyte-navy)); color:#fff; position: relative; z-index: 1031; }
body:has(.demo-banner) .ritoo-navbar.fixed-top,
body:has(.demo-banner) .app-topbar { top: 2.4rem; }
.demo-banner .bar { display:flex; align-items:center; gap:.75rem; padding:.5rem 1.4rem; flex-wrap:wrap; }
.demo-banner strong { color: var(--xbyte-gold-bright); letter-spacing:.08em; text-transform:uppercase; font-size:.7rem; }
.demo-banner .demo-host { font-family:ui-monospace,monospace; background:rgba(255,255,255,.1); padding:.12rem .55rem; border-radius:50rem; font-size:.74rem; }
.demo-banner .demo-note { color:rgba(255,255,255,.78); font-size:.8rem; }
.demo-banner .demo-note b { color:#fff; font-weight:700; }
.demo-banner .demo-reset { margin-left:auto; background:transparent; border:1px solid rgba(255,255,255,.3); color:#fff; font-size:.76rem; font-weight:600; padding:.28rem .8rem; border-radius:50rem; cursor:pointer; transition:background-color .2s; }
.demo-banner .demo-reset:hover { background:rgba(255,255,255,.12); }
.demo-dot { width:8px; height:8px; border-radius:50%; background:#34c759; box-shadow:0 0 0 3px rgba(52,199,89,.3); flex:0 0 auto; }

.demo-toast { position:fixed; bottom:1.6rem; left:50%; transform:translateX(-50%) translateY(20px); background:var(--xbyte-navy-deep); color:#fff; padding:.75rem 1.3rem; border-radius:50rem; font-size:.88rem; font-weight:600; z-index:2200; opacity:0; transition:opacity .3s, transform .3s; pointer-events:none; box-shadow:var(--xbyte-shadow-lg); display:flex; align-items:center; }
.demo-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.demo-toast .bi { color: var(--xbyte-gold-bright); }