/* ============================================================
   LifeTracer Server · Fogo skin (GLOBAL)
   ------------------------------------------------------------
   Tema global aplicado em CIMA de bootstrap + app.css + dashboard.css.
   Sobrescreve cores/tipografia/superfícies via cascata, sem reescrever os
   legados. Classes Bootstrap continuam funcionando — só mudam de pele.

   Foundations: /css/colors_and_type.css (Fogo Design System v1)
   ============================================================ */

/* ----- Self-hosted Fogo brand fonts ----- */
@font-face {
    font-family: "Archivo";
    src: url("/fonts/Archivo-VariableFont_wdth_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Archivo";
    src: url("/fonts/Archivo-Italic-VariableFont_wdth_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Hanken Grotesk";
    src: url("/fonts/HankenGrotesk-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Hanken Grotesk";
    src: url("/fonts/HankenGrotesk-Italic-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ============================================================
   TOKENS — sobrescrevem as variáveis legadas
   ============================================================ */
:root {
    /* Fogo palette */
    --fogo-bg:        #0A0908;
    --fogo-bg-2:      #100E0B;
    --fogo-surface:   #15130F;
    --fogo-surface-2: #1B1813;
    --fogo-elevated:  #221E18;

    --fogo-tx:   rgba(255, 255, 255, .96);
    --fogo-tx-2: rgba(255, 255, 255, .66);
    --fogo-tx-3: rgba(255, 255, 255, .42);
    --fogo-tx-4: rgba(255, 255, 255, .26);

    --fogo-line:   rgba(255, 255, 255, .08);
    --fogo-line-2: rgba(255, 255, 255, .14);

    --fogo-amber:    #FF7A1A;
    --fogo-amber-2:  #FFB060;
    --fogo-gold:     #FFC93C;
    --fogo-ember:    #E4452B;
    --fogo-jade:     #1FBE93;
    --fogo-azure:    #2E86DE;

    --fogo-amber-wash: rgba(255, 122, 26, .10);
    --fogo-amber-line: rgba(255, 122, 26, .28);

    --fogo-grad-fire:  linear-gradient(100deg, var(--fogo-gold), var(--fogo-amber) 45%, var(--fogo-ember));
    --fogo-grad-amber: linear-gradient(180deg, var(--fogo-amber-2), var(--fogo-amber));

    --fogo-sh-sm: 0 2px 8px -2px rgba(0, 0, 0, .5);
    --fogo-sh-md: 0 12px 30px -12px rgba(0, 0, 0, .6);
    --fogo-sh-lg: 0 30px 60px -20px rgba(0, 0, 0, .7);
    --fogo-glow-amber: 0 8px 30px -8px rgba(255, 122, 26, .6);
    --fogo-glow-amber-hi: 0 14px 40px -8px rgba(255, 122, 26, .7);

    --fogo-display: "Archivo", system-ui, sans-serif;
    --fogo-body: "Hanken Grotesk", system-ui, sans-serif;
    --fogo-mono: "SFMono-Regular", ui-monospace, "SF Mono", Consolas, monospace;

    --fogo-ease: cubic-bezier(.22, 1, .36, 1);
    --fogo-ease-std: cubic-bezier(.65, 0, .35, 1);
    --fogo-t-fast: 180ms;
    --fogo-t-base: 300ms;
    --fogo-t-slow: 450ms;

    --fogo-r-sm: 8px;
    --fogo-r-md: 14px;
    --fogo-r-lg: 22px;
    --fogo-r-xl: 30px;
    --fogo-r-pill: 999px;

    /* ----- Remap legacy variables to Fogo ----- */
    --primary-color: var(--fogo-amber);
    --primary-dark: var(--fogo-ember);
    --secondary-color: var(--fogo-saffron, #FF9F2E);
    --success-color: var(--fogo-jade);
    --warning-color: var(--fogo-gold);
    --error-color: var(--fogo-ember);
    --danger-color: var(--fogo-ember);
    --info-color: var(--fogo-azure);

    --bg-primary: var(--fogo-bg);
    --bg-secondary: var(--fogo-bg-2);
    --bg-tertiary: var(--fogo-surface-2);
    --bg-card: var(--fogo-surface);
    --bg-hover: var(--fogo-surface-2);

    --text-primary: var(--fogo-tx);
    --text-secondary: var(--fogo-tx-2);
    --text-muted: var(--fogo-tx-3);
    --text-on-white: #1a1a1a;

    --border-color: var(--fogo-line);

    /* Bootstrap CSS vars */
    --bs-body-bg: var(--fogo-bg);
    --bs-body-color: var(--fogo-tx-2);
    --bs-primary: var(--fogo-amber);
    --bs-primary-rgb: 255, 122, 26;
    --bs-danger: var(--fogo-ember);
    --bs-danger-rgb: 228, 69, 43;
    --bs-success: var(--fogo-jade);
    --bs-success-rgb: 31, 190, 147;
    --bs-warning: var(--fogo-gold);
    --bs-warning-rgb: 255, 201, 60;
    --bs-info: var(--fogo-azure);
    --bs-info-rgb: 46, 134, 222;
    --bs-border-color: var(--fogo-line);
    --bs-border-color-translucent: var(--fogo-line);
    --bs-link-color: var(--fogo-amber-2);
    --bs-link-hover-color: var(--fogo-amber);
}

/* ============================================================
   BASE — body, html, typography
   ============================================================ */
html, body {
    background: var(--fogo-bg) !important;
    color: var(--fogo-tx-2) !important;
    font-family: var(--fogo-body) !important;
    font-weight: 300 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ambient amber glow that bleeds from the top */
body::after {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 56vh;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(110% 80% at 22% -8%, rgba(255, 122, 26, .14), rgba(228, 69, 43, .05) 42%, transparent 70%);
}

.dashboard-layout {
    background: var(--fogo-bg);
    position: relative;
    z-index: 1;
}

.main-content {
    background: var(--fogo-bg) !important;
}

/* Typography overrides — keep priority since legacy used !important everywhere */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--fogo-display) !important;
    color: var(--fogo-tx) !important;
    letter-spacing: -.02em;
    font-weight: 700 !important;
}

p, .lead, label, span, div, a, li {
    font-family: inherit;
}

p {
    color: var(--fogo-tx-2) !important;
}

small, .small {
    color: var(--fogo-tx-3) !important;
}

.text-muted {
    color: var(--fogo-tx-3) !important;
}

.text-primary { color: var(--fogo-amber-2) !important; }
.text-success { color: var(--fogo-jade) !important; }
.text-info    { color: var(--fogo-azure) !important; }
.text-warning { color: var(--fogo-gold) !important; }
.text-danger  { color: var(--fogo-ember) !important; }
.text-white   { color: var(--fogo-tx) !important; }

/* Scrollbars (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--fogo-bg); }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .08); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 122, 26, .35); }

/* ============================================================
   SIDEBAR (Fogo)
   ============================================================ */
.sidebar {
    /* SÓLIDO e SEM backdrop-filter: no drawer mobile (iOS WKWebView) o
       backdrop-filter da sidebar aninhava com o blur do .sidebar-overlay
       e renderizava como vidro fosco escuro, lavando o menu. Fundo opaco
       resolve em todas as plataformas. */
    background: #100E0B !important;
    background-image: none !important;
    border-right: 1px solid var(--fogo-line) !important;
    backdrop-filter: none !important;
    width: 264px;
}

.sidebar-header {
    padding: 22px 18px 18px !important;
    border-bottom: 1px solid var(--fogo-line) !important;
    background: transparent !important;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--fogo-display);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.02em;
    color: var(--fogo-tx) !important;
    text-decoration: none;
}

/* The brain icon container becomes the Fire-coin SVG mount */
.sidebar-logo-icon {
    width: 34px !important;
    height: 34px !important;
    background: url('/assets/fogo/lifetracer-mark.svg') center/contain no-repeat !important;
    border-radius: 0 !important;
    display: inline-block !important;
    filter: drop-shadow(0 6px 18px rgba(255, 122, 26, .45));
}

.sidebar-logo-icon i {
    display: none !important;
}

.sidebar-logo span {
    font-family: var(--fogo-display);
    font-weight: 800;
    background: linear-gradient(90deg, var(--fogo-tx), var(--fogo-amber-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* User card */
.user-info-top {
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-line) !important;
    border-radius: var(--fogo-r-md) !important;
    margin: 12px 14px 12px !important;
    padding: 14px !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.user-avatar-large {
    width: 40px !important;
    height: 40px !important;
    background: var(--fogo-grad-fire) !important;
    color: #231100 !important;
    font-family: var(--fogo-display);
    font-weight: 800 !important;
    box-shadow: 0 6px 18px rgba(255, 122, 26, .35) !important;
    margin: 0 !important;
    font-size: 14px !important;
    flex-shrink: 0;
}

.user-avatar-large i {
    color: #231100 !important;
}

.user-details-large {
    text-align: left !important;
    min-width: 0;
    flex: 1;
}

.user-name-large {
    color: var(--fogo-tx) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    margin: 0 0 2px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-crp {
    color: var(--fogo-tx-3) !important;
    font-size: 10.5px !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 !important;
}

/* Nav sections */
.sidebar-nav {
    padding: 12px 12px !important;
}

.nav-section {
    margin-bottom: 18px !important;
}

.nav-section-title {
    font-family: var(--fogo-body) !important;
    font-size: 10.5px !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: var(--fogo-tx-4) !important;
    font-weight: 600 !important;
    padding: 8px 10px 8px !important;
    margin: 0 !important;
}

.nav-item {
    color: var(--fogo-tx-2) !important;
    font-family: var(--fogo-body) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    border-radius: var(--fogo-r-md) !important;
    padding: 10px 12px !important;
    margin-bottom: 3px !important;
    transition: background var(--fogo-t-base) var(--fogo-ease),
                color var(--fogo-t-base) var(--fogo-ease),
                border-color var(--fogo-t-base) var(--fogo-ease) !important;
    background: transparent !important;
    border: 1px solid transparent;
}

.nav-item:hover {
    background: rgba(255, 255, 255, .04) !important;
    color: var(--fogo-tx) !important;
}

.nav-item.active {
    background: var(--fogo-amber-wash) !important;
    border-color: var(--fogo-amber-line) !important;
    color: var(--fogo-tx) !important;
}

.nav-item.active .nav-item-icon,
.nav-item.active i {
    color: var(--fogo-amber-2) !important;
    opacity: 1 !important;
}

.nav-item-icon {
    color: var(--fogo-tx-3) !important;
    font-size: 16px !important;
    width: 18px !important;
    text-align: center;
}

/* Sidebar footer */
.sidebar-footer {
    padding: 14px !important;
    border-top: 1px solid var(--fogo-line) !important;
    background: transparent !important;
}

.sidebar-footer-link {
    color: var(--fogo-tx-3) !important;
    font-size: 13px !important;
    padding: 9px 12px !important;
    border-radius: var(--fogo-r-md) !important;
}

.sidebar-footer-link:hover {
    background: rgba(255, 255, 255, .04) !important;
    color: var(--fogo-tx) !important;
}

.sidebar-footer-link.text-danger {
    color: var(--fogo-ember) !important;
}

.sidebar-footer-link.text-danger:hover {
    background: rgba(228, 69, 43, .10) !important;
    color: var(--fogo-ember) !important;
}

.mensagens-badge {
    background: var(--fogo-ember) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(228, 69, 43, .4);
    font-family: var(--fogo-body) !important;
    font-weight: 700 !important;
}

/* ============================================================
   MAIN AREA
   ============================================================ */
.main-content {
    margin-left: 264px !important;
    padding: 28px 32px !important;
}

@media (max-width: 768px) {
    .main-content {
        margin-left: 0 !important;
        padding: 16px !important;
    }
}

.page-title {
    font-family: var(--fogo-display) !important;
    font-weight: 800 !important;
    font-size: 38px !important;
    letter-spacing: -.035em !important;
    text-transform: uppercase !important;
    color: var(--fogo-tx) !important;
    line-height: 1;
}

.page-subtitle {
    color: var(--fogo-tx-3) !important;
    font-size: 15px !important;
}

/* ============================================================
   CARDS — Fogo surface, hairline, hover lift
   ============================================================ */
.card {
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-line) !important;
    border-radius: var(--fogo-r-lg) !important;
    color: var(--fogo-tx) !important;
    box-shadow: none !important;
    transition: transform var(--fogo-t-slow) var(--fogo-ease),
                border-color var(--fogo-t-slow) var(--fogo-ease),
                background var(--fogo-t-slow) var(--fogo-ease) !important;
}

.card:hover {
    border-color: var(--fogo-line-2) !important;
    box-shadow: var(--fogo-sh-md) !important;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--fogo-line) !important;
    color: var(--fogo-tx) !important;
    padding: 18px 22px !important;
}

.card-body {
    color: var(--fogo-tx-2) !important;
    padding: 22px !important;
}

.card-title {
    color: var(--fogo-tx) !important;
    font-family: var(--fogo-display) !important;
    font-weight: 600 !important;
    letter-spacing: -.01em !important;
}

.card.bg-white,
.card.bg-light {
    background: var(--fogo-surface) !important;
    color: var(--fogo-tx) !important;
}

.card.bg-white .card-title,
.card.bg-white .card-header { color: var(--fogo-tx) !important; }
.card.bg-white .text-muted,
.card.bg-white small { color: var(--fogo-tx-3) !important; }

/* "Hover-card" used in dashboards */
.hover-card {
    cursor: pointer;
}
.hover-card:hover {
    transform: translateY(-4px);
    border-color: var(--fogo-amber-line) !important;
    background: var(--fogo-surface-2) !important;
}

/* Principal-specific cards (legacy class) — match the new global */
.principal-card,
.principal-card:not(:hover) {
    background: var(--fogo-surface) !important;
    color: var(--fogo-tx) !important;
    border: 1px solid var(--fogo-line) !important;
    border-radius: var(--fogo-r-lg) !important;
}

.principal-card:hover {
    background: var(--fogo-surface-2) !important;
    border: 1px solid var(--fogo-amber-line) !important;
}

/* Metric cards (dashboard) */
.metric-card {
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-line) !important;
    border-radius: var(--fogo-r-lg) !important;
}

.metric-card::before {
    background: var(--fogo-grad-fire) !important;
    height: 3px !important;
}

.metric-icon { border-radius: var(--fogo-r-md) !important; }
.metric-icon.primary { background: var(--fogo-amber-wash) !important; color: var(--fogo-amber-2) !important; }
.metric-icon.success { background: rgba(31, 190, 147, .12) !important; color: var(--fogo-jade) !important; }
.metric-icon.warning { background: rgba(255, 201, 60, .12) !important; color: var(--fogo-gold) !important; }
.metric-icon.error,
.metric-icon.danger  { background: rgba(228, 69, 43, .10) !important; color: var(--fogo-ember) !important; }

.metric-value {
    color: var(--fogo-tx) !important;
    font-family: var(--fogo-display) !important;
    font-weight: 800 !important;
    letter-spacing: -.03em !important;
}

.metric-label {
    color: var(--fogo-tx-3) !important;
    font-size: 12px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
}

.metric-change.positive { color: var(--fogo-jade) !important; }
.metric-change.negative { color: var(--fogo-ember) !important; }

/* ============================================================
   BUTTONS — Bootstrap reskinned in Fogo
   ============================================================ */
.btn {
    font-family: var(--fogo-body) !important;
    font-weight: 500 !important;
    border-radius: var(--fogo-r-pill) !important;
    padding: 10px 22px !important;
    transition: transform var(--fogo-t-slow) var(--fogo-ease),
                box-shadow var(--fogo-t-slow) var(--fogo-ease),
                background var(--fogo-t-slow) var(--fogo-ease) !important;
    border: 1px solid transparent !important;
}

.btn:active { transform: translateY(0) scale(.98); }

.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    background: var(--fogo-grad-amber) !important;
    color: #231100 !important;
    border: none !important;
    box-shadow: var(--fogo-glow-amber);
    font-weight: 600 !important;
}

.btn-primary:hover {
    background: var(--fogo-grad-amber) !important;
    color: #231100 !important;
    transform: translateY(-2px);
    box-shadow: var(--fogo-glow-amber-hi);
}

.btn-primary:disabled,
.btn-primary.disabled {
    background: rgba(255, 122, 26, .25) !important;
    color: rgba(35, 17, 0, .5) !important;
    box-shadow: none !important;
}

.btn-secondary {
    background: rgba(255, 255, 255, .04) !important;
    color: var(--fogo-tx) !important;
    border: 1px solid var(--fogo-line-2) !important;
}
.btn-secondary:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: var(--fogo-tx) !important;
    transform: translateY(-2px);
}

.btn-success {
    background: var(--fogo-jade) !important;
    color: #062b21 !important;
    border: none !important;
}
.btn-success:hover { background: #2cd9a9 !important; color: #062b21 !important; }

.btn-danger {
    background: var(--fogo-ember) !important;
    color: #fff !important;
    border: none !important;
}
.btn-danger:hover { background: #f15a44 !important; color: #fff !important; }

.btn-warning {
    background: var(--fogo-gold) !important;
    color: #2c1e00 !important;
    border: none !important;
}

.btn-info {
    background: var(--fogo-azure) !important;
    color: #fff !important;
    border: none !important;
}

.btn-outline-primary {
    border: 1px solid var(--fogo-amber-line) !important;
    color: var(--fogo-amber-2) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: var(--fogo-amber-wash) !important;
    color: var(--fogo-amber-2) !important;
}

.btn-outline-secondary {
    border: 1px solid var(--fogo-line-2) !important;
    color: var(--fogo-tx-2) !important;
    background: transparent !important;
}
.btn-outline-secondary:hover {
    background: rgba(255, 255, 255, .06) !important;
    color: var(--fogo-tx) !important;
}

/* Blazor.Bootstrap Button primary variant uses bootstrap classes — caught above */

/* ============================================================
   FORMS
   ============================================================ */
.form-control,
.form-select,
input[type="text"]:not(.no-fogo),
input[type="email"]:not(.no-fogo),
input[type="password"]:not(.no-fogo),
input[type="number"]:not(.no-fogo),
input[type="search"]:not(.no-fogo),
input[type="tel"]:not(.no-fogo),
textarea:not(.no-fogo) {
    background: var(--fogo-bg-2) !important;
    border: 1px solid var(--fogo-line-2) !important;
    color: var(--fogo-tx) !important;
    border-radius: var(--fogo-r-md) !important;
    padding: 11px 14px !important;
    font-family: var(--fogo-body) !important;
    font-size: 14px !important;
    transition: border-color var(--fogo-t-base) var(--fogo-ease),
                background var(--fogo-t-base) var(--fogo-ease) !important;
}

.form-control:focus,
.form-select:focus,
input:focus:not(.no-fogo),
textarea:focus:not(.no-fogo) {
    background: var(--fogo-bg) !important;
    border-color: var(--fogo-amber-line) !important;
    color: var(--fogo-tx) !important;
    box-shadow: 0 0 0 3px rgba(255, 122, 26, .15) !important;
    outline: none;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--fogo-tx-4) !important;
}

.form-label,
label {
    color: var(--fogo-tx-2) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

.invalid-feedback {
    color: var(--fogo-ember) !important;
    font-size: 12px !important;
}

/* iCheck-style checkboxes / radios — basic dark adaptation */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--fogo-amber);
}

/* ============================================================
   TABLES
   ============================================================ */
.table {
    color: var(--fogo-tx-2) !important;
    background: transparent !important;
    --bs-table-bg: transparent;
}

.table > :not(caption) > * > * {
    background: transparent !important;
    color: var(--fogo-tx-2) !important;
    border-bottom: 1px solid var(--fogo-line) !important;
    padding: 12px 14px !important;
}

.table thead tr,
.table thead th {
    background: var(--fogo-surface-2) !important;
    color: var(--fogo-tx) !important;
    font-family: var(--fogo-body) !important;
    font-size: 11.5px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: rgba(255, 255, 255, .015) !important;
}

.table tbody tr:hover > * {
    background: rgba(255, 122, 26, .04) !important;
}

.table-container,
.table-responsive {
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-line) !important;
    border-radius: var(--fogo-r-lg) !important;
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
    border-radius: var(--fogo-r-md) !important;
    padding: 14px 16px !important;
    border: 1px solid var(--fogo-line-2) !important;
    font-size: 14px !important;
}

.alert-primary,
.alert-info {
    background: rgba(46, 134, 222, .10) !important;
    border-color: rgba(46, 134, 222, .32) !important;
    color: #bfdcff !important;
}

.alert-warning {
    background: rgba(255, 201, 60, .10) !important;
    border-color: rgba(255, 201, 60, .34) !important;
    color: #ffe49a !important;
}

.alert-success {
    background: rgba(31, 190, 147, .10) !important;
    border-color: rgba(31, 190, 147, .32) !important;
    color: #8feccf !important;
}

.alert-danger {
    background: rgba(228, 69, 43, .10) !important;
    border-color: rgba(228, 69, 43, .34) !important;
    color: #ffb3a3 !important;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
    font-family: var(--fogo-body) !important;
    font-weight: 700 !important;
    border-radius: var(--fogo-r-pill) !important;
    padding: 4px 9px !important;
    font-size: 11px !important;
    letter-spacing: .02em;
}

.badge.bg-primary { background: var(--fogo-amber) !important; color: #231100 !important; }
.badge.bg-danger  { background: var(--fogo-ember) !important; color: #fff !important; }
.badge.bg-success { background: var(--fogo-jade) !important; color: #062b21 !important; }
.badge.bg-warning { background: var(--fogo-gold) !important; color: #2c1e00 !important; }
.badge.bg-info    { background: var(--fogo-azure) !important; color: #fff !important; }
.badge.bg-secondary { background: rgba(255, 255, 255, .08) !important; color: var(--fogo-tx) !important; }

/* ============================================================
   LINKS
   ============================================================ */
a {
    color: var(--fogo-amber-2);
    text-decoration: none;
    transition: color var(--fogo-t-base) var(--fogo-ease);
}

a:hover {
    color: var(--fogo-amber);
}

/* ============================================================
   MODALS
   ============================================================ */
.modal-content {
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-line-2) !important;
    border-radius: var(--fogo-r-lg) !important;
    color: var(--fogo-tx) !important;
    box-shadow: var(--fogo-sh-lg) !important;
}

.modal-header {
    border-bottom: 1px solid var(--fogo-line) !important;
    background: transparent !important;
    padding: 22px 26px !important;
}

.modal-title {
    font-family: var(--fogo-display) !important;
    color: var(--fogo-tx) !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
}

.modal-body {
    color: var(--fogo-tx-2) !important;
    padding: 22px 26px !important;
}

.modal-footer {
    border-top: 1px solid var(--fogo-line) !important;
    padding: 18px 26px !important;
}

.btn-close {
    filter: invert(1) opacity(.6);
}
.btn-close:hover { filter: invert(1) opacity(1); }

/* Modal "bg-*" header gradients used by Alerta.razor */
.modal-overlay .modal-header.bg-danger {
    background: linear-gradient(135deg, var(--fogo-ember) 0%, #b9351d 100%) !important;
}
.modal-overlay .modal-header.bg-warning {
    background: linear-gradient(135deg, var(--fogo-gold) 0%, #d6a721 100%) !important;
}
.modal-overlay .modal-header.bg-success {
    background: linear-gradient(135deg, var(--fogo-jade) 0%, #169974 100%) !important;
}
.modal-overlay .modal-header.bg-info {
    background: linear-gradient(135deg, var(--fogo-amber) 0%, var(--fogo-ember) 100%) !important;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
    background: var(--fogo-surface) !important;
    border: 1px dashed var(--fogo-line-2) !important;
    border-radius: var(--fogo-r-lg) !important;
}

.empty-state i {
    color: var(--fogo-amber-2) !important;
}

.empty-state h5 {
    color: var(--fogo-tx) !important;
}

.empty-state p {
    color: var(--fogo-tx-3) !important;
}

/* ============================================================
   LOGIN PAGE (legacy .login-container / .login-card)
   ============================================================ */
.login-container {
    background:
        radial-gradient(60% 60% at 30% 20%, rgba(255, 122, 26, .22), transparent 60%),
        radial-gradient(70% 70% at 70% 80%, rgba(228, 69, 43, .14), transparent 65%),
        var(--fogo-bg) !important;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.login-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(50% 70% at 50% 10%, rgba(255, 122, 26, .25), transparent 60%);
    filter: blur(40px);
    pointer-events: none;
    animation: fogoDrift 9s ease-in-out infinite;
}

@keyframes fogoDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(14px, -22px) scale(1.06); }
}

.login-card {
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-line-2) !important;
    border-radius: var(--fogo-r-xl) !important;
    padding: 40px !important;
    box-shadow: var(--fogo-sh-lg) !important;
    backdrop-filter: blur(20px);
    position: relative;
    z-index: 1;
}

.login-card h2 {
    color: var(--fogo-tx) !important;
    font-family: var(--fogo-display) !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
    background: linear-gradient(90deg, var(--fogo-tx), var(--fogo-amber-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.login-card p {
    color: var(--fogo-tx-3) !important;
}

.login-header {
    text-align: center;
    margin-bottom: 24px;
}

/* The login "logo-circle" with brain icon becomes the Fire-coin */
.logo-circle {
    width: 72px !important;
    height: 72px !important;
    background: url('/assets/fogo/lifetracer-mark.svg') center/contain no-repeat !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 auto 18px !important;
    filter: drop-shadow(0 14px 34px rgba(255, 122, 26, .55));
    display: block;
}

.logo-circle i {
    display: none !important;
}

.form-login {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.login-footer a {
    color: var(--fogo-amber-2) !important;
}

/* Modals on login page (server unavailable / psicólogo) */
.modal-dark .modal-content,
.modal-psicologo-dark .modal-content {
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-line-2) !important;
    color: var(--fogo-tx) !important;
}

/* ============================================================
   SPINNERS / SPINNER-BORDER
   ============================================================ */
.spinner-border {
    color: var(--fogo-amber) !important;
}

/* ============================================================
   CHIPS / PILLS — preserve rounded-pill class behaviour
   ============================================================ */
.rounded-pill {
    border-radius: var(--fogo-r-pill) !important;
}

/* ============================================================
   FONT AWESOME — used heavily — keep currentColor + tint amber
   ============================================================ */
.fa, .fas, .far, .fab,
.bi {
    line-height: 1;
}

/* ============================================================
   FOOTER / FOGO BRAND HELPERS (utility classes)
   ============================================================ */
.fogo-eyebrow {
    font-family: var(--fogo-body);
    font-size: 11.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--fogo-amber-2);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.fogo-eyebrow .spark { color: var(--fogo-amber); }

.fogo-title {
    font-family: var(--fogo-display);
    font-weight: 800;
    color: var(--fogo-tx);
    letter-spacing: -.035em;
    line-height: 1;
    text-transform: uppercase;
}

.fogo-title .grad {
    background: var(--fogo-grad-fire);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================================
   FEEDBACK widget (FeedbackLibrary floating) — neutralize colors
   ============================================================ */
.feedback-wrapper { z-index: 999 !important; }

/* ============================================================
   PRINCIPAL PAGE — global skin (no .principal-fogo scope needed)
   ============================================================ */
.principal-page {
    padding: 12px 4px 24px !important;
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
}

.principal-page .principal-fogo-inner {
    position: relative;
    z-index: 1;
}

.principal-page .pf-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    padding: 8px 4px 28px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--fogo-line);
}

.principal-page .pf-eyebrow {
    font-family: var(--fogo-body);
    font-size: 11.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--fogo-amber-2);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.principal-page .pf-eyebrow .spark { color: var(--fogo-amber); }

.principal-page .pf-title {
    font-family: var(--fogo-display);
    font-weight: 800;
    color: var(--fogo-tx);
    letter-spacing: -.035em;
    font-size: clamp(34px, 4.6vw, 50px);
    line-height: 1;
    text-transform: uppercase;
    margin: 12px 0 10px;
}

.principal-page .pf-title .grad {
    background: var(--fogo-grad-fire);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.principal-page .pf-sub {
    font-size: 15px;
    color: var(--fogo-tx-2);
    max-width: 58ch;
    line-height: 1.55;
    margin: 0;
}

.principal-page .pf-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: var(--fogo-surface);
    border: 1px solid var(--fogo-line);
    border-radius: var(--fogo-r-pill);
    flex-shrink: 0;
}

.principal-page .pf-brand img {
    width: 32px;
    height: 32px;
    display: block;
    filter: drop-shadow(0 6px 18px rgba(255, 122, 26, .35));
}

.principal-page .pf-brand .name {
    font-family: var(--fogo-display);
    font-weight: 800;
    color: var(--fogo-tx);
    font-size: 15px;
    letter-spacing: -.02em;
}

.principal-page .pf-brand .name b {
    background: var(--fogo-grad-fire);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
}

.principal-page .pf-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 0 !important;
}

@media (min-width: 600px)  { .principal-page .pf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .principal-page .pf-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .principal-page .pf-grid { grid-template-columns: repeat(4, 1fr); } }

.principal-page .pf-col {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font-weight: inherit !important;
    text-align: inherit !important;
    min-width: 0;
}

.principal-page .pf-card {
    position: relative;
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-line) !important;
    border-radius: var(--fogo-r-lg) !important;
    padding: 24px 22px 22px !important;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 160px;
    color: var(--fogo-tx) !important;
    transition: transform var(--fogo-t-slow) var(--fogo-ease),
                border-color var(--fogo-t-slow) var(--fogo-ease),
                background var(--fogo-t-slow) var(--fogo-ease);
}

.principal-page .pf-card:hover {
    transform: translateY(-4px);
    border-color: var(--fogo-amber-line) !important;
    background: var(--fogo-surface-2) !important;
}

.principal-page .pf-card .pf-ic {
    width: 48px;
    height: 48px;
    border-radius: var(--fogo-r-md);
    display: grid;
    place-items: center;
    background: var(--fogo-amber-wash);
    border: 1px solid var(--fogo-amber-line);
    color: var(--fogo-amber-2);
    transition: background var(--fogo-t-base) var(--fogo-ease),
                color var(--fogo-t-base) var(--fogo-ease),
                border-color var(--fogo-t-base) var(--fogo-ease);
}

.principal-page .pf-card .pf-ic i {
    font-size: 22px;
    line-height: 1;
    color: inherit !important;
}

.principal-page .pf-card:hover .pf-ic {
    background: var(--fogo-grad-amber);
    color: #231100;
    border-color: transparent;
}

.principal-page .pf-card .pf-ic i { color: var(--fogo-amber-2) !important; }
.principal-page .pf-card:hover .pf-ic i { color: #231100 !important; }

.principal-page .pf-card .pf-title-3 {
    font-family: var(--fogo-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--fogo-tx);
    letter-spacing: -.01em;
    line-height: 1.2;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.principal-page .pf-card .pf-desc {
    font-size: 13px;
    color: var(--fogo-tx-3) !important;
    line-height: 1.5;
    margin: 0;
}

.principal-page .pf-card .pf-arrow {
    position: absolute;
    top: 24px;
    right: 22px;
    color: var(--fogo-tx-4);
    font-size: 14px;
    transition: color var(--fogo-t-base) var(--fogo-ease),
                transform var(--fogo-t-base) var(--fogo-ease);
}

.principal-page .pf-card:hover .pf-arrow {
    color: var(--fogo-amber-2);
    transform: translateX(3px);
}

.principal-page .pf-card .pf-badge {
    background: var(--fogo-ember);
    color: #fff;
    font-family: var(--fogo-body);
    font-weight: 700;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: var(--fogo-r-pill);
    box-shadow: 0 4px 12px rgba(228, 69, 43, .4);
    letter-spacing: .02em;
    line-height: 1.4;
    margin-left: 6px;
}

.principal-page .pf-card.pf-danger:hover {
    border-color: rgba(228, 69, 43, .42) !important;
}

.principal-page .pf-card.pf-danger .pf-ic {
    background: rgba(228, 69, 43, .10);
    border-color: rgba(228, 69, 43, .32);
    color: var(--fogo-ember);
}

.principal-page .pf-card.pf-danger .pf-ic i { color: var(--fogo-ember) !important; }

.principal-page .pf-card.pf-danger:hover .pf-ic {
    background: linear-gradient(180deg, #ff8870, var(--fogo-ember));
    color: #2c0900;
    border-color: transparent;
}

.principal-page .pf-card.pf-danger:hover .pf-ic i { color: #2c0900 !important; }

.principal-page .pf-card .pf-pill {
    position: absolute;
    top: 18px;
    right: 18px;
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    background: var(--fogo-grad-amber);
    color: #231100;
    padding: 4px 9px;
    border-radius: var(--fogo-r-pill);
}

@media (max-width: 600px) {
    .principal-page {
        padding: 14px 12px 28px !important;
    }
    .principal-page .pf-head { gap: 16px; padding: 4px 0 22px; }
    .principal-page .pf-brand { order: -1; }
    .principal-page .pf-title { font-size: 32px; }
}

/* ============================================================
   Edge: Bootstrap default link color in white-card override
   ============================================================ */
.text-dark { color: var(--fogo-tx) !important; }


/* ============================================================
   ============================================================
   PAGES: ComportamentoListar (/comportamentolistar/{id})
          AvaliacaoListar       (/avaliacaolistar)
   ------------------------------------------------------------
   Sobrepoe os blues hardcoded das inline <style> dessas paginas.
   Selecionadores usam classes nativas da pagina + !important
   onde o cascade inline ganha por ordem de DOM.
   ============================================================
   ============================================================ */

/* ---------- Wrapper geral ---------- */
.comportamento-page-container {
    padding: 4px 4px 28px !important;
    max-width: 1180px;
    margin: 0 auto !important;
    position: relative;
}

/* ---------- Menu horizontal de categorias ---------- */
.menu-container-categorias {
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-line) !important;
    border-radius: var(--fogo-r-lg) !important;
    box-shadow: none !important;
    padding: 14px 8px !important;
    margin-bottom: 22px !important;
    gap: 8px;
}

.scroll-btn-categorias {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid var(--fogo-line-2) !important;
    color: var(--fogo-tx-2) !important;
    border-radius: var(--fogo-r-pill) !important;
    padding: 9px 14px !important;
    transition: background var(--fogo-t-base) var(--fogo-ease),
                color var(--fogo-t-base) var(--fogo-ease),
                border-color var(--fogo-t-base) var(--fogo-ease) !important;
    font-size: 14px;
    flex-shrink: 0;
    cursor: pointer;
}

.scroll-btn-categorias:hover {
    background: var(--fogo-amber-wash) !important;
    border-color: var(--fogo-amber-line) !important;
    color: var(--fogo-amber-2) !important;
}

.menu-scroll-area-categorias {
    gap: 10px !important;
    padding: 0 6px !important;
}

.menu-item-categoria {
    background: var(--fogo-surface-2) !important;
    border: 1px solid var(--fogo-line) !important;
    color: var(--fogo-tx-2) !important;
    border-radius: var(--fogo-r-md) !important;
    padding: 12px 10px !important;
    min-width: 96px;
    transition: transform var(--fogo-t-base) var(--fogo-ease),
                border-color var(--fogo-t-base) var(--fogo-ease),
                background var(--fogo-t-base) var(--fogo-ease) !important;
}

.menu-item-categoria:hover {
    transform: translateY(-3px) !important;
    background: var(--fogo-elevated) !important;
    border-color: var(--fogo-line-2) !important;
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .55) !important;
}

.menu-item-categoria.ativo {
    background: var(--fogo-amber-wash) !important;
    border-color: var(--fogo-amber-line) !important;
    box-shadow: 0 0 0 1px var(--fogo-amber-line), 0 12px 26px -14px rgba(255, 122, 26, .55) !important;
}

.menu-item-categoria.ativo .categoria-nome,
.menu-item-categoria.ativo {
    color: var(--fogo-tx) !important;
}

.menu-item-categoria .categoria-nome {
    color: var(--fogo-tx-2) !important;
    font-family: var(--fogo-body) !important;
    font-size: 12px !important;
    letter-spacing: .02em;
    font-weight: 500 !important;
}

.menu-item-categoria.ativo .categoria-nome {
    font-weight: 700 !important;
}

/* ícones das categorias: ja vem com brightness(0) invert(1) inline = ficam brancos.
   No item ativo, deixamos âmbar via tint. */
.menu-item-categoria.ativo img {
    filter: brightness(0) invert(1) sepia(1) saturate(8) hue-rotate(-12deg) !important;
}

/* ---------- Header central da categoria ---------- */
.categoria-info-central {
    text-align: center;
    padding: 18px 0 22px !important;
    margin-bottom: 6px;
}

.categoria-info-central img {
    height: 60px !important;
    max-height: 60px !important;
    max-width: 100px !important;
    margin: 6px auto 14px !important;
    filter: brightness(0) invert(1) drop-shadow(0 8px 18px rgba(255, 122, 26, .35)) !important;
}

.categoria-info-central > span:nth-of-type(1) {
    display: block;
    font-family: var(--fogo-display) !important;
    font-weight: 800 !important;
    font-size: 28px !important;
    letter-spacing: -.025em !important;
    color: var(--fogo-tx) !important;
    text-transform: none !important;
    line-height: 1.1;
    margin-bottom: 6px;
}

.categoria-info-central > span:nth-of-type(2) {
    display: block;
    color: var(--fogo-tx-3) !important;
    font-size: 14px !important;
    font-family: var(--fogo-body) !important;
    max-width: 56ch;
    margin: 0 auto;
    line-height: 1.5;
}

/* Hide the inline <br> separators so flex stacking handles spacing */
.categoria-info-central br { display: none; }

/* ---------- Tabela de comportamentos ---------- */
.comportamento-page-container .table-responsive {
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-line) !important;
    border-radius: var(--fogo-r-lg) !important;
    overflow: hidden;
    margin-top: 6px !important;
}

.comportamento-page-container .table,
.comportamento-page-container .table.table-dark {
    background: transparent !important;
    color: var(--fogo-tx) !important;
    margin: 0 !important;
}

.comportamento-page-container .table tbody tr {
    border-bottom: 1px solid var(--fogo-line) !important;
    transition: background var(--fogo-t-base) var(--fogo-ease) !important;
}

.comportamento-page-container .table tbody tr:last-child {
    border-bottom: none !important;
}

.comportamento-page-container .table tbody tr:hover > * {
    background: rgba(255, 122, 26, .04) !important;
}

.comportamento-page-container .table > :not(caption) > * > * {
    --bs-table-accent-bg: transparent !important;
    --bs-table-bg-type: initial !important;
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
    color: var(--fogo-tx) !important;
}

/* Linhas uniformes: sem alternancia clara/escura no mosaico de comportamentos */
.comportamento-page-container .table-striped > tbody > tr > *,
.comportamento-page-container .table-striped > tbody > tr:nth-of-type(odd) > * {
    background: transparent !important;
    box-shadow: none !important;
}

.comportamento-page-container .table > tbody > tr {
    background: transparent !important;
}

/* Conteúdo dentro do swipe — labels e ícones do tipo */
.swipe-item-content-comportamento a.custom-link,
.swipe-item-content-comportamento a.custom-link:visited,
.swipe-item-content-comportamento span {
    color: var(--fogo-tx) !important;
    font-family: var(--fogo-body) !important;
    font-weight: 500 !important;
    font-size: 14.5px;
    text-decoration: none;
    transition: color var(--fogo-t-base) var(--fogo-ease);
}

.swipe-item-content-comportamento a.custom-link:hover {
    color: var(--fogo-amber-2) !important;
}

/* Ícones de tipo (S/E/A/O) — tintar âmbar em vez de branco frio */
.swipe-item-content-comportamento td:last-child i.bi {
    color: var(--fogo-amber-2) !important;
    filter: drop-shadow(0 4px 10px rgba(255, 122, 26, .25));
}

/* Swipe delete (botão revelado ao arrastar pra esquerda no mobile) */
.swipe-action-button-comportamento {
    background: linear-gradient(180deg, #ff8870, var(--fogo-ember)) !important;
    color: #2c0900 !important;
}

.swipe-action-button-comportamento i {
    color: #2c0900 !important;
}

/* Switch (Blazor.Bootstrap) — força tom Fogo */
.switch-container-table .form-check-input {
    background-color: rgba(255, 255, 255, .08) !important;
    border-color: var(--fogo-line-2) !important;
    transition: background var(--fogo-t-base) var(--fogo-ease), border-color var(--fogo-t-base) var(--fogo-ease) !important;
}

.switch-container-table .form-check-input:checked {
    background-color: var(--fogo-amber) !important;
    border-color: var(--fogo-amber) !important;
    box-shadow: 0 0 0 0 transparent, 0 4px 14px -4px rgba(255, 122, 26, .55) !important;
}

.switch-container-table .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(255, 122, 26, .25) !important;
}

/* ---------- Linha de botões de ação (Novo/Voltar/Continuar/Finalizar) ---------- */
.botoes-acao {
    gap: 12px !important;
    margin-top: 24px !important;
    margin-bottom: 36px !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
    display: flex !important;
    flex-wrap: wrap;
}

.botoes-acao .btn {
    flex: 0 1 auto;
    min-width: 140px;
}

/* ============================================================
   AVALIACAO LISTAR
   ============================================================ */

/* ---------- Welcome card "Meus primeiros Comportamentos" ---------- */
/* Classes da legacy main.css/skins.css que escapam: .grid .grid-header .grid-body .bg-blue */
.grid.bg-blue,
.grid.no-border.bg-blue {
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-amber-line) !important;
    border-radius: var(--fogo-r-lg) !important;
    box-shadow: 0 0 0 1px rgba(255, 122, 26, .12), var(--fogo-glow-amber) !important;
    color: var(--fogo-tx) !important;
    overflow: hidden;
    margin: 0 0 28px !important;
}

.grid.bg-blue .grid-header,
.grid.no-border.bg-blue .grid-header {
    background: transparent !important;
    padding: 18px 24px !important;
    border-bottom: 1px solid var(--fogo-line) !important;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--fogo-tx) !important;
}

.grid.bg-blue .grid-header i.fa,
.grid.no-border.bg-blue .grid-header i.fa {
    color: var(--fogo-amber-2) !important;
    font-size: 18px !important;
}

.grid.bg-blue .grid-title,
.grid.no-border.bg-blue .grid-title {
    font-family: var(--fogo-display) !important;
    font-weight: 700 !important;
    color: var(--fogo-tx) !important;
    letter-spacing: -.01em;
    font-size: 17px !important;
}

.grid.bg-blue .grid-tools,
.grid.no-border.bg-blue .grid-tools {
    margin-left: auto;
    display: flex;
    gap: 10px;
}

.grid.bg-blue .grid-tools a,
.grid.no-border.bg-blue .grid-tools a {
    color: var(--fogo-tx-4) !important;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--fogo-t-base) var(--fogo-ease);
}

.grid.bg-blue .grid-tools a:hover,
.grid.no-border.bg-blue .grid-tools a:hover {
    color: var(--fogo-amber-2) !important;
}

.grid.bg-blue .grid-body,
.grid.no-border.bg-blue .grid-body {
    padding: 28px 26px 32px !important;
    color: var(--fogo-tx-2) !important;
    cursor: pointer;
}

.grid.bg-blue a,
.grid.no-border.bg-blue a {
    text-decoration: none;
}

.grid.bg-blue .grid-body p,
.grid.no-border.bg-blue .grid-body p {
    color: var(--fogo-tx-2) !important;
    font-size: 15px;
    margin: 0 0 8px;
    line-height: 1.55;
}

.grid.bg-blue .grid-body p:last-of-type,
.grid.no-border.bg-blue .grid-body p:last-of-type {
    margin-bottom: 0;
    color: var(--fogo-amber-2) !important;
    font-weight: 600;
}

/* ---------- Header da categoria (icon + nome + datepicker) ---------- */
/* Quando estamos em CategoriaID <= 12: estrutura .row.align-items-center
   com img + h3 + InputDate. Aplicar uma "barra" Fogo. */
form#formulario {
    background: transparent;
}

.row.align-items-center:has(img[alt="Categoria Imagem"]) {
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-line) !important;
    border-radius: var(--fogo-r-lg) !important;
    padding: 16px 22px !important;
    margin: 4px 0 22px !important;
    box-shadow: var(--fogo-sh-sm);
}

.row.align-items-center:has(img[alt="Categoria Imagem"]) img {
    filter: brightness(0) invert(1) drop-shadow(0 6px 16px rgba(255, 122, 26, .45)) !important;
    margin: 0 !important;
    height: 48px !important;
}

.row.align-items-center:has(img[alt="Categoria Imagem"]) h3 {
    font-family: var(--fogo-display) !important;
    font-weight: 800 !important;
    font-size: 26px !important;
    color: var(--fogo-tx) !important;
    letter-spacing: -.025em !important;
    margin: 0 !important;
    text-transform: uppercase;
}

.row.align-items-center:has(img[alt="Categoria Imagem"]) input[type="date"] {
    background: var(--fogo-bg-2) !important;
    border: 1px solid var(--fogo-line-2) !important;
    color: var(--fogo-tx) !important;
    border-radius: var(--fogo-r-pill) !important;
    padding: 9px 16px !important;
    font-family: var(--fogo-body);
    font-size: 13px;
    color-scheme: dark;
}

/* ---------- Tabela do formulario de avaliação ---------- */
form#formulario .table {
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-line) !important;
    border-radius: var(--fogo-r-lg) !important;
    overflow: hidden;
}

form#formulario .table > :not(caption) > * > * {
    background: transparent !important;
    border-bottom: 1px solid var(--fogo-line) !important;
    color: var(--fogo-tx) !important;
    padding: 14px 18px !important;
}

form#formulario .table tr:last-child td {
    border-bottom: none !important;
}

/* Nome do comportamento + ícone tipo */
form#formulario .table tbody td:first-child {
    font-family: var(--fogo-body);
    font-weight: 500;
    font-size: 15px;
}

form#formulario .table tbody td:first-child i.bi {
    color: var(--fogo-amber-2) !important;
    filter: drop-shadow(0 4px 10px rgba(255, 122, 26, .25));
}

/* Progress bar à direita */
form#formulario .progress {
    background: rgba(255, 255, 255, .06) !important;
    border-radius: var(--fogo-r-pill) !important;
    height: 6px !important;
    overflow: hidden;
}

form#formulario .progress-bar {
    border-radius: var(--fogo-r-pill) !important;
}

/* ----------------------------------------------------------
   SINAIS SEMÂNTICOS (Colorir.Aplicar):
     "red"   → ProgressColor.Danger  → bg-danger  → VERMELHO ember
     "yellow"→ ProgressColor.Warning → bg-warning → AMARELO gold
     "green" → ProgressColor.Primary → bg-primary → AZUL azure
       ("green" semanticamente significa "melhorou" no código)
   Restauradas em tons Fogo para preservar a leitura azul/vermelho/amarelo
   que o global --bs-primary engoliu ao virar âmbar.
   ---------------------------------------------------------- */
form#formulario .progress .progress-bar.bg-primary {
    background-color: var(--fogo-azure) !important;
    background-image: linear-gradient(90deg, #5aa6f5, var(--fogo-azure)) !important;
    box-shadow: 0 0 8px rgba(46, 134, 222, .55) !important;
}

form#formulario .progress .progress-bar.bg-danger {
    background-color: var(--fogo-ember) !important;
    background-image: linear-gradient(90deg, #ff8870, var(--fogo-ember)) !important;
    box-shadow: 0 0 8px rgba(228, 69, 43, .55) !important;
}

form#formulario .progress .progress-bar.bg-warning {
    background-color: var(--fogo-gold) !important;
    background-image: linear-gradient(90deg, #ffe49a, var(--fogo-gold)) !important;
    box-shadow: 0 0 8px rgba(255, 201, 60, .55) !important;
}

form#formulario .progress .progress-bar.bg-success {
    background-color: var(--fogo-jade) !important;
    background-image: linear-gradient(90deg, #59e6bd, var(--fogo-jade)) !important;
    box-shadow: 0 0 8px rgba(31, 190, 147, .55) !important;
}

/* Estado inicial (ProgressColor.None → sem classe bg-*) — neutro discreto */
form#formulario .progress .progress-bar:not(.bg-primary):not(.bg-danger):not(.bg-warning):not(.bg-success):not(.bg-info) {
    background-color: rgba(255, 255, 255, .22) !important;
}

/* Slider (RangeInput) — wrapper TR colspan=4 */
form#formulario .table tbody tr td[colspan="4"] {
    padding: 10px 20px 22px !important;
    border-bottom: 1px solid var(--fogo-line) !important;
}

/* HTML range track + thumb (Fogo) */
form#formulario input[type="range"],
form#formulario .e-slider input[type="range"],
input[type="range"].form-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, .10);
    border-radius: var(--fogo-r-pill);
    outline: none;
    cursor: pointer;
    margin: 16px 0;
}

form#formulario input[type="range"]::-webkit-slider-thumb,
input[type="range"].form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff, var(--fogo-amber-2));
    border: 2px solid var(--fogo-amber);
    box-shadow: 0 6px 16px -4px rgba(255, 122, 26, .55);
    cursor: pointer;
    transition: transform var(--fogo-t-base) var(--fogo-ease);
}

form#formulario input[type="range"]::-webkit-slider-thumb:hover,
input[type="range"].form-range::-webkit-slider-thumb:hover {
    transform: scale(1.08);
}

form#formulario input[type="range"]::-moz-range-thumb,
input[type="range"].form-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff, var(--fogo-amber-2));
    border: 2px solid var(--fogo-amber);
    box-shadow: 0 6px 16px -4px rgba(255, 122, 26, .55);
    cursor: pointer;
}

form#formulario input[type="range"]::-moz-range-track,
input[type="range"].form-range::-moz-range-track {
    background: transparent;
    height: 6px;
    border-radius: var(--fogo-r-pill);
}

/* ---------- Tabela de Resultado (CategoriaID > 12) ---------- */
/* ----------------------------------------------------------------
   Dashboard stat cards (legacy AdminLTE .grid.widget.bg-light-blue,
   .bg-green, .bg-red, etc.). Re-skin para Fogo: superfície espresso
   + barra de acento "fogo". Remove os blocos azuis/saturados antigos.
   ---------------------------------------------------------------- */
.grid.widget[class*="bg-"] {
    position: relative;
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-line) !important;
    border-radius: var(--fogo-r-lg) !important;
    overflow: hidden;
    box-shadow: none !important;
    margin-bottom: 24px;
}

.grid.widget[class*="bg-"]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--fogo-grad-fire);
}

.grid.widget[class*="bg-"] .grid-body {
    background: transparent !important;
    color: var(--fogo-tx) !important;
}

.grid.widget[class*="bg-"] .grid-body .title {
    color: var(--fogo-tx-3) !important;
    font-size: 12px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    font-weight: 600 !important;
}

.grid.widget[class*="bg-"] .grid-body .value {
    color: var(--fogo-tx) !important;
    font-family: var(--fogo-display) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
}

.grid.widget[class*="bg-"] .grid-body i.fa,
.grid.widget[class*="bg-"] .grid-body > i {
    color: var(--fogo-amber-2) !important;
}

/* Pista de cor por categoria (sem o azul antigo) */
.grid.widget.bg-green .grid-body i,
.grid.widget.bg-teal .grid-body i,
.grid.widget.bg-light-blue .grid-body i { color: var(--fogo-jade) !important; }
.grid.widget.bg-red .grid-body i,
.grid.widget.bg-maroon .grid-body i,
.grid.widget.bg-fuchsia .grid-body i,
.grid.widget.bg-purple .grid-body i { color: var(--fogo-ember) !important; }
.grid.widget.bg-orange .grid-body i,
.grid.widget.bg-yellow .grid-body i { color: var(--fogo-gold) !important; }
.grid.widget.bg-gray .grid-body i { color: var(--fogo-tx-2) !important; }

/* Texto vermelho/verde nas tabelas (CorCategoria → text-red/text-green) */
.text-red, span.text-red, .text-red i { color: var(--fogo-ember) !important; }
.text-green, span.text-green, .text-green i { color: var(--fogo-jade) !important; }


.grid.work-progress {
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-line) !important;
    border-radius: var(--fogo-r-lg) !important;
    overflow: hidden;
    margin-bottom: 24px;
}

.grid.work-progress .grid-header {
    padding: 18px 22px !important;
    border-bottom: 1px solid var(--fogo-line) !important;
}

.grid.work-progress .grid-header .title {
    font-family: var(--fogo-display) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: var(--fogo-tx) !important;
    letter-spacing: -.01em;
}

.grid.work-progress .grid-header .title .pull-right {
    color: var(--fogo-amber-2) !important;
    font-family: var(--fogo-mono) !important;
    font-size: 12px !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 2px;
    float: right;
}

.grid.work-progress .sub-title.text-blue {
    color: var(--fogo-tx-3) !important;
    font-size: 13px !important;
    display: block;
    margin-top: 4px;
}

.grid.work-progress .grid-body {
    padding: 8px 16px 16px !important;
}

.grid.work-progress .table tr:first-child td {
    font-family: var(--fogo-body);
    font-size: 11.5px !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fogo-tx-3) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--fogo-line-2) !important;
}

/* Linhas coloridas (className=item.Cor → green/red/yellow) */
.grid.work-progress .table tr.green > td { color: var(--fogo-jade) !important; }
.grid.work-progress .table tr.red > td { color: var(--fogo-ember) !important; }
.grid.work-progress .table tr.yellow > td { color: var(--fogo-gold) !important; }

.grid.work-progress .table tr.green > td:nth-child(2),
.grid.work-progress .table tr.red > td:nth-child(2),
.grid.work-progress .table tr.yellow > td:nth-child(2) {
    color: var(--fogo-tx) !important;
    font-weight: 500;
}

.grid.work-progress .table img {
    filter: brightness(0) invert(1);
    opacity: .85;
}

/* Linha total (última) */
.grid.work-progress .table tbody tr:last-child > td {
    border-top: 1px solid var(--fogo-line-2) !important;
    padding-top: 14px !important;
    font-family: var(--fogo-display) !important;
    font-weight: 700 !important;
    color: var(--fogo-tx) !important;
}

/* Container do gráfico ApexCharts */
#divGraficoAvaliacao {
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-line) !important;
    border-radius: var(--fogo-r-lg) !important;
    padding: 20px !important;
    margin: 0 0 24px !important;
}

/* ApexCharts: tem prioridade interna alta — apenas neutralizamos texto branco */
#divGraficoAvaliacao .apexcharts-text,
#divGraficoAvaliacao .apexcharts-xaxis text,
#divGraficoAvaliacao .apexcharts-yaxis text {
    fill: rgba(255, 255, 255, .7) !important;
    font-family: var(--fogo-body) !important;
}

#divGraficoAvaliacao .apexcharts-gridline {
    stroke: rgba(255, 255, 255, .06) !important;
}

/* ---------- Botão final (continue/finalizar) — d-grid gap-2 ---------- */
.d-grid.gap-2 .btn {
    padding: 14px 28px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* ---------- Mobile tuning específico das páginas ---------- */
@media (max-width: 768px) {
    .comportamento-page-container {
        padding: 0 6px 24px !important;
    }
    .menu-item-categoria { min-width: 78px; }
    .categoria-info-central > span:nth-of-type(1) { font-size: 22px !important; }
    .row.align-items-center:has(img[alt="Categoria Imagem"]) h3 { font-size: 20px !important; }
    .grid.work-progress .grid-header .title { font-size: 15px !important; }
    .botoes-acao .btn { min-width: 0; flex: 1 1 calc(50% - 6px); }
}


/* ============================================================
   ============================================================
   PAGE: Respostas (/respostas/{id})
   ------------------------------------------------------------
   Pagina pesada em CSS inline (~450 linhas de <style>) + style=""
   por todo markup. Selecionadores especificos + !important para
   vencer o cascade interno + inline.
   ============================================================
   ============================================================ */

/* ---------- Wrapper ---------- */
.container-respostas {
    background: transparent !important;
    padding: 8px 4px 32px !important;
    max-width: 1180px;
    margin: 0 auto !important;
    min-height: auto !important;
}

/* ---------- Menu horizontal de perguntas ---------- */
.menu-container-perguntas {
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-line) !important;
    border-radius: var(--fogo-r-lg) !important;
    box-shadow: none !important;
    padding: 14px 8px !important;
    margin-bottom: 24px !important;
    gap: 8px;
}

.scroll-btn-perguntas {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid var(--fogo-line-2) !important;
    color: var(--fogo-tx-2) !important;
    border-radius: var(--fogo-r-pill) !important;
    padding: 9px 14px !important;
    transition: background var(--fogo-t-base) var(--fogo-ease),
                color var(--fogo-t-base) var(--fogo-ease),
                border-color var(--fogo-t-base) var(--fogo-ease) !important;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: none !important;
}

.scroll-btn-perguntas:hover {
    background: var(--fogo-amber-wash) !important;
    border-color: var(--fogo-amber-line) !important;
    color: var(--fogo-amber-2) !important;
    transform: none !important;
}

.menu-scroll-area-perguntas {
    gap: 10px !important;
    padding: 0 6px !important;
}

.menu-item-pergunta {
    background: var(--fogo-surface-2) !important;
    border: 1px solid var(--fogo-line) !important;
    color: var(--fogo-tx-2) !important;
    border-radius: var(--fogo-r-md) !important;
    padding: 14px 12px !important;
    min-width: 110px;
    max-width: 160px;
    transition: transform var(--fogo-t-base) var(--fogo-ease),
                border-color var(--fogo-t-base) var(--fogo-ease),
                background var(--fogo-t-base) var(--fogo-ease) !important;
    box-shadow: none !important;
}

.menu-item-pergunta:hover {
    transform: translateY(-3px) !important;
    background: var(--fogo-elevated) !important;
    border-color: var(--fogo-line-2) !important;
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .55) !important;
}

.menu-item-pergunta.ativo {
    background: var(--fogo-amber-wash) !important;
    border-color: var(--fogo-amber-line) !important;
    box-shadow: 0 0 0 1px var(--fogo-amber-line), 0 12px 26px -14px rgba(255, 122, 26, .55) !important;
}

.menu-item-pergunta i.bi {
    color: var(--fogo-tx-2) !important;
}

.menu-item-pergunta.ativo i.bi {
    color: var(--fogo-amber-2) !important;
}

.menu-item-pergunta div {
    color: var(--fogo-tx-2) !important;
    font-family: var(--fogo-body) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    letter-spacing: .02em;
    margin-top: 4px;
}

.menu-item-pergunta.ativo div {
    color: var(--fogo-tx) !important;
    font-weight: 700 !important;
}

/* ---------- Pergunta card (com textarea + transcrição) ---------- */
/* Vence o inline style="background-color: #1e293b; border: 1px solid #334155;" */
.container-respostas .card[style*="#1e293b"],
.container-respostas .card[style*="1e293b"],
.container-respostas .card {
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-line) !important;
    border-radius: var(--fogo-r-lg) !important;
    color: var(--fogo-tx) !important;
    box-shadow: none !important;
    margin-bottom: 18px !important;
}

.container-respostas .card-body {
    color: var(--fogo-tx-2) !important;
    padding: 22px !important;
}

.container-respostas .card h5 {
    color: var(--fogo-tx) !important;
    font-family: var(--fogo-display) !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    font-size: 17px !important;
}

.container-respostas .card h5 i.bi {
    color: var(--fogo-amber-2) !important;
    filter: drop-shadow(0 4px 10px rgba(255, 122, 26, .25));
}

/* ---------- Modern textarea ---------- */
.modern-textarea {
    background: var(--fogo-bg-2) !important;
    border: 1px solid var(--fogo-line-2) !important;
    border-radius: var(--fogo-r-lg) !important;
    color: var(--fogo-tx) !important;
    padding: 16px !important;
    font-family: var(--fogo-body) !important;
    font-size: 15px !important;
    line-height: 1.55;
    transition: border-color var(--fogo-t-base) var(--fogo-ease),
                background var(--fogo-t-base) var(--fogo-ease),
                box-shadow var(--fogo-t-base) var(--fogo-ease) !important;
    resize: vertical;
}

.modern-textarea:focus {
    border-color: var(--fogo-amber-line) !important;
    background: var(--fogo-bg) !important;
    box-shadow: 0 0 0 3px rgba(255, 122, 26, .15) !important;
    outline: none;
}

.modern-textarea::placeholder {
    color: var(--fogo-tx-4) !important;
}

/* ---------- Action buttons (Salvar / Exemplos / Voltar) ---------- */
.action-buttons-container { gap: 10px !important; flex-wrap: wrap; }

.btn-action {
    border-radius: var(--fogo-r-pill) !important;
    padding: 11px 20px !important;
    font-family: var(--fogo-body) !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    border: 1px solid transparent !important;
    transition: transform var(--fogo-t-slow) var(--fogo-ease),
                background var(--fogo-t-slow) var(--fogo-ease),
                box-shadow var(--fogo-t-slow) var(--fogo-ease) !important;
    color: var(--fogo-tx) !important;
}

.btn-action i.bi { font-size: 14px; }

/* Save (era verde Bootstrap-success #10b981) → âmbar Fogo */
.btn-action.btn-primary-custom,
.btn-primary-custom {
    background: var(--fogo-grad-amber) !important;
    color: #231100 !important;
    box-shadow: var(--fogo-glow-amber) !important;
    font-weight: 600 !important;
}
.btn-action.btn-primary-custom:hover,
.btn-primary-custom:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--fogo-glow-amber-hi) !important;
    filter: none !important;
    color: #231100 !important;
}

/* Exemplos (era azul #3b82f6) → ghost Fogo */
.btn-action.btn-secondary-custom,
.btn-secondary-custom {
    background: rgba(255, 255, 255, .04) !important;
    color: var(--fogo-tx) !important;
    border: 1px solid var(--fogo-line-2) !important;
}
.btn-action.btn-secondary-custom:hover,
.btn-secondary-custom:hover {
    background: rgba(255, 255, 255, .08) !important;
    transform: translateY(-2px) !important;
    filter: none !important;
}

/* IA (era violet+magenta #8b5cf6 → #d946ef) → fire gradient Fogo */
.btn-action.btn-ai-custom,
.btn-ai-custom {
    background: var(--fogo-grad-fire) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px -8px rgba(228, 69, 43, .55) !important;
    font-weight: 600 !important;
}
.btn-action.btn-ai-custom:hover,
.btn-ai-custom:hover {
    transform: translateY(-2px) !important;
    filter: none !important;
}

/* Voltar (era cinza #475569) → ghost suave */
.btn-action.btn-back-custom,
.btn-back-custom {
    background: rgba(255, 255, 255, .03) !important;
    color: var(--fogo-tx-3) !important;
    border: 1px solid var(--fogo-line) !important;
}
.btn-action.btn-back-custom:hover,
.btn-back-custom:hover {
    background: rgba(255, 255, 255, .06) !important;
    color: var(--fogo-tx-2) !important;
    transform: translateY(-2px) !important;
}

/* ---------- Progress gamification (era gradient azul+violet) ---------- */
.progress-gamification,
.progress-gamification[style*="1e293b"],
.progress-gamification[style*="0f172a"] {
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-line) !important;
    border-radius: var(--fogo-r-lg) !important;
    padding: 18px 20px !important;
    margin-bottom: 18px !important;
}

.progress-gamification .text-white {
    color: var(--fogo-tx) !important;
    font-family: var(--fogo-body) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    letter-spacing: .02em;
}

.progress-gamification i.bi-lock-fill,
.progress-gamification i.bi.text-warning { color: var(--fogo-gold) !important; }
.progress-gamification i.bi-unlock-fill,
.progress-gamification i.bi.text-success { color: var(--fogo-jade) !important; }

.progress-gamification .badge { font-size: 11px !important; padding: 4px 10px !important; }
.progress-gamification .badge.bg-primary { background: var(--fogo-amber) !important; color: #231100 !important; }
.progress-gamification .badge.bg-success { background: var(--fogo-jade) !important; color: #062b21 !important; }

.progress-gamification .progress,
.progress-gamification .progress[style*="334155"] {
    background: rgba(255, 255, 255, .06) !important;
    height: 6px !important;
    border-radius: var(--fogo-r-pill) !important;
    overflow: hidden;
}

.progress-gamification .progress-bar,
.progress-gamification .progress-bar[style*="linear-gradient"] {
    background: var(--fogo-grad-fire) !important;
    border-radius: var(--fogo-r-pill) !important;
}

.progress-gamification .progress-bar.bg-success {
    background: linear-gradient(90deg, var(--fogo-jade), #2cd9a9) !important;
}

.progress-gamification .text-muted { color: var(--fogo-tx-3) !important; }

/* ---------- Quick chips (resposta rápida) ---------- */
.quick-chips-container,
.quick-chips-container[style*="1e293b"],
.quick-chips-container[style*="475569"] {
    background: var(--fogo-surface) !important;
    border: 1px dashed var(--fogo-line-2) !important;
    border-radius: var(--fogo-r-lg) !important;
    padding: 14px 18px !important;
    margin-bottom: 18px !important;
}

.quick-chips-container p.text-muted { color: var(--fogo-tx-3) !important; font-size: 12px !important; letter-spacing: .04em; }
.quick-chips-container i.bi-lightning-charge { color: var(--fogo-amber-2) !important; }

.quick-chip,
button.quick-chip,
button.quick-chip[style*="linear-gradient"] {
    background: rgba(255, 122, 26, .10) !important;
    color: var(--fogo-amber-2) !important;
    border: 1px solid var(--fogo-amber-line) !important;
    border-radius: var(--fogo-r-pill) !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: background var(--fogo-t-base) var(--fogo-ease),
                color var(--fogo-t-base) var(--fogo-ease),
                transform var(--fogo-t-base) var(--fogo-ease) !important;
}

.quick-chip:hover,
button.quick-chip:hover {
    background: var(--fogo-grad-amber) !important;
    color: #231100 !important;
    transform: translateY(-1px);
    border-color: transparent !important;
}

/* ---------- "Suas Respostas" header ---------- */
.container-respostas > h6[style*="94a3b8"],
.container-respostas h6.mb-2 {
    color: var(--fogo-tx-3) !important;
    font-family: var(--fogo-body) !important;
    font-size: 11.5px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    margin: 24px 0 14px !important;
}

/* ---------- Cards de Resposta (cada resposta dada) ---------- */
.container-respostas .card .card-body h5.text-white,
.container-respostas .card h5.text-white {
    color: var(--fogo-tx) !important;
    font-family: var(--fogo-body) !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    letter-spacing: 0;
    text-transform: none;
}

/* Botão excluir resposta (era #dc2626 sólido) → ember outline */
.container-respostas button.btn.btn-outline-danger[style*="dc2626"],
.container-respostas button.btn.btn-outline-danger {
    background: rgba(228, 69, 43, .10) !important;
    border: 1px solid rgba(228, 69, 43, .32) !important;
    color: var(--fogo-ember) !important;
    border-radius: var(--fogo-r-pill) !important;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.container-respostas button.btn.btn-outline-danger:hover {
    background: var(--fogo-ember) !important;
    color: #fff !important;
    border-color: var(--fogo-ember) !important;
}

/* Categoria icon row */
.container-respostas .d-flex.align-items-center.mb-4 small.text-muted {
    color: var(--fogo-tx-3) !important;
    font-size: 12.5px !important;
}

/* "Comportamentos Associados" header */
.container-respostas h6.text-primary {
    color: var(--fogo-amber-2) !important;
    font-family: var(--fogo-body) !important;
    font-size: 12px !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600 !important;
}
.container-respostas h6.text-primary i.bi { color: var(--fogo-amber-2) !important; }

/* "Ações de Comportamento" header */
.container-respostas h6.fs-7.text-uppercase {
    color: var(--fogo-tx-4) !important;
    font-family: var(--fogo-body) !important;
    font-size: 10.5px !important;
    letter-spacing: .18em !important;
    font-weight: 700 !important;
}

/* Border-top dentro do card de resposta */
.container-respostas .border-top {
    border-top: 1px solid var(--fogo-line) !important;
}

/* ---------- Behavior item (comportamento associado) ---------- */
.behavior-item,
.behavior-item[style] {
    background: var(--fogo-bg-2) !important;
    border: 1px solid var(--fogo-line) !important;
    border-radius: var(--fogo-r-md) !important;
    padding: 12px 14px !important;
    transition: background var(--fogo-t-base) var(--fogo-ease),
                border-color var(--fogo-t-base) var(--fogo-ease) !important;
}

.behavior-item:hover {
    background: var(--fogo-surface-2) !important;
    border-color: var(--fogo-amber-line) !important;
}

.behavior-item .behavior-icon-container {
    width: 36px;
    height: 36px;
    background: var(--fogo-amber-wash) !important;
    border: 1px solid var(--fogo-amber-line) !important;
    border-radius: var(--fogo-r-md);
}

.behavior-item .fw-medium.text-white {
    color: var(--fogo-tx) !important;
    font-family: var(--fogo-body) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

.behavior-item .text-muted { color: var(--fogo-tx-3) !important; }

.behavior-item button.btn.text-danger {
    color: var(--fogo-ember) !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--fogo-r-pill) !important;
    width: 30px;
    height: 30px;
    padding: 0 !important;
    transition: background var(--fogo-t-base) var(--fogo-ease) !important;
}
.behavior-item button.btn.text-danger:hover {
    background: rgba(228, 69, 43, .12) !important;
}

/* ---------- Manual / Sugerir IA buttons (sob cada resposta) ---------- */
/* Manual (era green #059669) → amber sólido */
.btn-manual-custom {
    background: var(--fogo-grad-amber) !important;
    color: #231100 !important;
    border: none !important;
    border-radius: var(--fogo-r-pill) !important;
    font-weight: 600 !important;
    padding: 11px 18px !important;
    box-shadow: var(--fogo-glow-amber) !important;
    transition: transform var(--fogo-t-slow) var(--fogo-ease),
                box-shadow var(--fogo-t-slow) var(--fogo-ease) !important;
}
.btn-manual-custom:hover {
    background: var(--fogo-grad-amber) !important;
    color: #231100 !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--fogo-glow-amber-hi) !important;
}
.btn-manual-custom i.bi { color: #231100 !important; }

/* Sugerir IA (era purple outline #a855f7) → fire gradient outline */
.btn-ai-outline-custom {
    background: transparent !important;
    color: var(--fogo-amber-2) !important;
    border: 1px solid var(--fogo-amber-line) !important;
    border-radius: var(--fogo-r-pill) !important;
    font-weight: 600 !important;
    padding: 11px 18px !important;
    transition: background var(--fogo-t-base) var(--fogo-ease),
                color var(--fogo-t-base) var(--fogo-ease),
                border-color var(--fogo-t-base) var(--fogo-ease) !important;
}
.btn-ai-outline-custom:hover {
    background: var(--fogo-amber-wash) !important;
    color: var(--fogo-amber) !important;
    border-color: var(--fogo-amber) !important;
}
.btn-ai-outline-custom i.bi { color: var(--fogo-amber-2) !important; }

/* ---------- TODOS os modals da página (Respostas) ---------- */
/* Vence o inline style="background-color: #1e293b; border: 1px solid #334155;" */
.modal.fade.show .modal-content,
.modal.show .modal-content,
#sugestoesModal .modal-content,
#goalPromptModal .modal-content {
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-line-2) !important;
    border-radius: var(--fogo-r-lg) !important;
    color: var(--fogo-tx) !important;
    box-shadow: var(--fogo-sh-lg) !important;
}

.modal.fade.show .modal-header,
.modal.show .modal-header {
    background: transparent !important;
    border-bottom: 1px solid var(--fogo-line) !important;
    padding: 20px 24px !important;
}

.modal.fade.show .modal-title,
.modal.show .modal-title {
    color: var(--fogo-tx) !important;
    font-family: var(--fogo-display) !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
}

.modal.fade.show .modal-body,
.modal.show .modal-body {
    color: var(--fogo-tx-2) !important;
    padding: 20px 24px !important;
}

.modal.fade.show .modal-footer,
.modal.show .modal-footer {
    border-top: 1px solid var(--fogo-line) !important;
    padding: 16px 24px !important;
}

/* Inner cards inside modals (lista de opcoes/sugestoes) — vence style="background-color: #0f172a;" */
.modal .card[style*="0f172a"],
.modal .modal-body .card {
    background: var(--fogo-bg-2) !important;
    border: 1px solid var(--fogo-line) !important;
    border-radius: var(--fogo-r-md) !important;
    padding: 12px 14px !important;
    color: var(--fogo-tx) !important;
}

.modal .form-check-label {
    color: var(--fogo-tx) !important;
}

/* Modal alerts (info/warning) — vence inline styles */
.modal .alert.alert-info,
.modal .alert.alert-info[style*="1e3a8a"] {
    background: var(--fogo-amber-wash) !important;
    border: 1px solid var(--fogo-amber-line) !important;
    color: var(--fogo-amber-2) !important;
    border-radius: var(--fogo-r-md) !important;
}

.modal .alert.alert-warning,
.modal .alert.alert-warning[style*="854d0e"] {
    background: rgba(255, 201, 60, .12) !important;
    border: 1px solid rgba(255, 201, 60, .34) !important;
    color: var(--fogo-gold) !important;
    border-radius: var(--fogo-r-md) !important;
}

/* Botões dentro de modais — vence todos os style="background-color: #3b82f6" inline */
.modal .btn.btn-primary,
.modal .btn.btn-primary[style*="3b82f6"] {
    background: var(--fogo-grad-amber) !important;
    color: #231100 !important;
    border: none !important;
    box-shadow: var(--fogo-glow-amber) !important;
    border-radius: var(--fogo-r-pill) !important;
    font-weight: 600 !important;
}
.modal .btn.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--fogo-glow-amber-hi) !important;
}

.modal .btn.btn-secondary,
.modal .btn.btn-secondary[style*="475569"] {
    background: rgba(255, 255, 255, .04) !important;
    color: var(--fogo-tx) !important;
    border: 1px solid var(--fogo-line-2) !important;
    border-radius: var(--fogo-r-pill) !important;
}
.modal .btn.btn-secondary:hover {
    background: rgba(255, 255, 255, .08) !important;
}

.modal .btn.btn-success,
.modal .btn.btn-success[style*="10b981"] {
    background: var(--fogo-grad-amber) !important;
    color: #231100 !important;
    border: none !important;
    border-radius: var(--fogo-r-pill) !important;
    font-weight: 600 !important;
}

.modal .btn.btn-outline-secondary,
.modal .btn.btn-outline-secondary[style*="94a3b8"] {
    background: transparent !important;
    color: var(--fogo-tx-2) !important;
    border: 1px solid var(--fogo-line-2) !important;
    border-radius: var(--fogo-r-pill) !important;
}
.modal .btn.btn-outline-secondary:hover {
    background: rgba(255, 255, 255, .04) !important;
    color: var(--fogo-tx) !important;
}

.modal .btn.btn-outline-info {
    background: transparent !important;
    color: var(--fogo-amber-2) !important;
    border: 1px dashed var(--fogo-amber-line) !important;
    border-radius: var(--fogo-r-pill) !important;
}
.modal .btn.btn-outline-info:hover {
    background: var(--fogo-amber-wash) !important;
}

/* Suggestion cards (modal sugestões IA) — left border colorida → ring */
.suggestion-card {
    background: var(--fogo-bg-2) !important;
    border: 1px solid var(--fogo-line) !important;
    border-left: 3px solid var(--fogo-amber) !important;
    border-radius: var(--fogo-r-md) !important;
    transition: transform var(--fogo-t-base) var(--fogo-ease),
                border-color var(--fogo-t-base) var(--fogo-ease) !important;
}
.suggestion-card:hover {
    transform: translateY(-2px);
    border-color: var(--fogo-amber-line) !important;
    border-left-color: var(--fogo-amber) !important;
    box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .55) !important;
}

.suggestion-card label.form-check-label { color: var(--fogo-tx) !important; }
.suggestion-card .badge { background: var(--fogo-amber-wash) !important; color: var(--fogo-amber-2) !important; }

/* List group items (modal multi-objetivo) */
.modal .list-group-item.list-group-item-action,
.modal .list-group-item.list-group-item-action[style*="0f172a"] {
    background: var(--fogo-bg-2) !important;
    border: 1px solid var(--fogo-line) !important;
    color: var(--fogo-tx) !important;
    border-radius: var(--fogo-r-md) !important;
    transition: background var(--fogo-t-base) var(--fogo-ease),
                border-color var(--fogo-t-base) var(--fogo-ease) !important;
}
.modal .list-group-item.list-group-item-action:hover {
    background: var(--fogo-surface) !important;
    border-color: var(--fogo-amber-line) !important;
}

.modal .list-group-item.list-group-item-action i.bi.text-success { color: var(--fogo-jade) !important; }
.modal .list-group-item.list-group-item-action i.bi.text-success.bi-arrow-right { color: var(--fogo-amber-2) !important; }

/* Modal: Goal prompt — display-4 icon */
.modal i.display-4.text-success { color: var(--fogo-jade) !important; }
.modal h5 i.bi-bullseye.text-success { color: var(--fogo-jade) !important; }
.modal h5 i.bi-pencil-square.text-success { color: var(--fogo-jade) !important; }
.modal .small.text-muted { color: var(--fogo-tx-3) !important; }

/* Modal: Cadastro Manual — form-label + form-control */
.modal .form-label.small.text-muted {
    color: var(--fogo-tx-3) !important;
    font-size: 11px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

.modern-input,
.modern-select {
    background: var(--fogo-bg-2) !important;
    border: 1px solid var(--fogo-line-2) !important;
    color: var(--fogo-tx) !important;
    border-radius: var(--fogo-r-md) !important;
    padding: 11px 14px !important;
    font-family: var(--fogo-body) !important;
    font-size: 14px !important;
}

.modern-input:focus,
.modern-select:focus {
    background: var(--fogo-bg) !important;
    border-color: var(--fogo-amber-line) !important;
    box-shadow: 0 0 0 3px rgba(255, 122, 26, .15) !important;
    outline: none;
}

/* btn-close (X dos modais) */
.modal .btn-close {
    filter: invert(1) opacity(.65) !important;
    transition: filter var(--fogo-t-base) var(--fogo-ease) !important;
}
.modal .btn-close:hover {
    filter: invert(1) opacity(1) !important;
}

/* ---------- Loading overlay (sugestões IA) ---------- */
.loading-overlay {
    background: rgba(10, 9, 8, .82) !important;
    backdrop-filter: blur(10px) !important;
}

.loading-content {
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-amber-line) !important;
    border-radius: var(--fogo-r-lg) !important;
    box-shadow: var(--fogo-sh-lg), 0 0 0 1px rgba(255, 122, 26, .15) !important;
    backdrop-filter: blur(20px) !important;
}

.loading-content .spinner-border.text-primary {
    color: var(--fogo-amber) !important;
    border-color: rgba(255, 122, 26, .25) !important;
    border-top-color: var(--fogo-amber) !important;
}

.loading-content i.bi-stars.text-warning {
    color: var(--fogo-gold) !important;
    filter: drop-shadow(0 4px 12px rgba(255, 201, 60, .55));
}

.loading-content h5.text-white {
    color: var(--fogo-tx) !important;
    font-family: var(--fogo-display) !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
}

.loading-content .border-start.border-primary {
    border-color: var(--fogo-amber) !important;
}

.loading-content .text-success { color: var(--fogo-jade) !important; }
.loading-content .text-muted { color: var(--fogo-tx-4) !important; }
.loading-content .text-white.fw-bold { color: var(--fogo-amber-2) !important; }

.loading-content i.bi-check-circle-fill { color: var(--fogo-jade) !important; }
.loading-content i.bi-circle-half { color: var(--fogo-amber) !important; }

/* ---------- "Nenhuma resposta ainda" placeholder ---------- */
.container-respostas > p.mt-4[style*="94a3b8"],
.container-respostas > p[style*="94a3b8"] {
    color: var(--fogo-tx-3) !important;
    font-family: var(--fogo-body) !important;
    font-size: 14px !important;
    text-align: center;
    padding: 36px 18px !important;
    background: var(--fogo-surface) !important;
    border: 1px dashed var(--fogo-line-2) !important;
    border-radius: var(--fogo-r-lg) !important;
}

/* "Carregando pergunta..." */
.container-respostas > p[style*="f1f5f9"] {
    color: var(--fogo-tx-3) !important;
    font-family: var(--fogo-body) !important;
}

/* ---------- Switches dentro de modais (selecionar opção / sugestão) ---------- */
.modal .form-check.form-switch .form-check-input {
    background-color: rgba(255, 255, 255, .08) !important;
    border-color: var(--fogo-line-2) !important;
}
.modal .form-check.form-switch .form-check-input:checked {
    background-color: var(--fogo-amber) !important;
    border-color: var(--fogo-amber) !important;
}
.modal .form-check.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(255, 122, 26, .25) !important;
}

/* ---------- Tipo icons + labels nas sugestoes ---------- */
.suggestion-card .badge.rounded-pill {
    background: var(--fogo-amber-wash) !important;
    color: var(--fogo-amber-2) !important;
    border: 1px solid var(--fogo-amber-line);
    font-size: 10px !important;
    font-weight: 700 !important;
}

/* ---------- Mobile tuning ---------- */
@media (max-width: 768px) {
    .container-respostas { padding: 6px 8px 24px !important; }
    .menu-item-pergunta { min-width: 90px; padding: 11px 8px !important; }
    .action-buttons-container { flex-wrap: wrap; }
    .action-buttons-container .btn-action { flex: 1 1 calc(50% - 6px); min-width: 0; font-size: 12.5px !important; }
    .modern-textarea { padding: 12px !important; font-size: 14px !important; }
}


/* ============================================================
   ============================================================
   PAGE: Mensagens psicólogo (/mensagens-psicologo/{id})
   ------------------------------------------------------------
   Chat: bubble paciente (sent · direita) + bubble psicólogo
   (received · esquerda). Sobrepõe os blues hardcoded inline.
   ============================================================
   ============================================================ */

/* ---------- Header do card ---------- */
.mensagens-header {
    background: transparent !important;
    border-bottom: 1px solid var(--fogo-line) !important;
    padding: 18px 22px !important;
}

.mensagens-header-container {
    gap: 14px !important;
    align-items: center !important;
}

.mensagens-header-title {
    font-family: var(--fogo-display) !important;
    font-weight: 700 !important;
    color: var(--fogo-tx) !important;
    letter-spacing: -.01em !important;
    font-size: 18px !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.mensagens-header-title i.fas { color: var(--fogo-amber-2) !important; font-size: 16px; }

.btn-voltar-header {
    background: rgba(255, 255, 255, .04) !important;
    color: var(--fogo-tx) !important;
    border: 1px solid var(--fogo-line-2) !important;
    border-radius: var(--fogo-r-pill) !important;
    padding: 9px 18px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}
.btn-voltar-header:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: var(--fogo-tx) !important;
    transform: translateY(-1px);
}

/* ---------- Área scrollable de mensagens ---------- */
.mensagens-container {
    background: var(--fogo-bg-2) !important;
    border: 1px solid var(--fogo-line) !important;
    border-radius: var(--fogo-r-lg) !important;
    padding: 18px !important;
    max-height: 540px !important;
    overflow-y: auto;
    scroll-behavior: smooth;
    background-image:
        radial-gradient(80% 60% at 50% 100%, rgba(255, 122, 26, .04), transparent 70%);
}

.mensagens-container::-webkit-scrollbar { width: 6px; }
.mensagens-container::-webkit-scrollbar-track { background: transparent; }
.mensagens-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .06); border-radius: 3px; }
.mensagens-container::-webkit-scrollbar-thumb:hover { background: rgba(255, 122, 26, .35); }

/* ---------- Message bubbles ---------- */
.message-wrapper {
    display: flex !important;
    margin-bottom: 14px !important;
    animation: fogoMsgIn .35s var(--fogo-ease);
}

@keyframes fogoMsgIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.message-bubble {
    max-width: 72% !important;
    padding: 12px 16px !important;
    border-radius: 18px !important;
    color: var(--fogo-tx) !important;
    font-family: var(--fogo-body) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    word-wrap: break-word;
    position: relative;
}

.message-bubble p { color: inherit !important; margin: 0 0 4px !important; }

/* Bubble do PACIENTE (enviada, à direita) — era #3b82f6 azul */
.message-wrapper.message-sent .message-bubble,
.message-bubble.bg-primary,
.message-bubble.bg-primary[style] {
    background: var(--fogo-grad-amber) !important;
    color: #231100 !important;
    border-bottom-right-radius: 4px !important;
    box-shadow: 0 6px 18px -6px rgba(255, 122, 26, .45);
}

.message-wrapper.message-sent .message-bubble p,
.message-bubble.bg-primary p { color: #231100 !important; }

.message-wrapper.message-sent .message-bubble small,
.message-bubble.bg-primary small,
.message-bubble.bg-primary small.text-white-50 {
    color: rgba(35, 17, 0, .65) !important;
    font-family: var(--fogo-mono) !important;
    font-size: 10.5px !important;
    letter-spacing: .04em;
    display: block;
    margin-top: 4px;
}

/* Bubble do PSICÓLOGO (recebida, à esquerda) — era #64748b cinza */
.message-wrapper.message-received .message-bubble,
.message-bubble.bg-secondary,
.message-bubble.bg-secondary[style] {
    background: var(--fogo-surface) !important;
    color: var(--fogo-tx) !important;
    border: 1px solid var(--fogo-line-2) !important;
    border-bottom-left-radius: 4px !important;
}

.message-wrapper.message-received .message-bubble p,
.message-bubble.bg-secondary p { color: var(--fogo-tx) !important; }

.message-wrapper.message-received .message-bubble small,
.message-bubble.bg-secondary small,
.message-bubble.bg-secondary small.text-white-50 {
    color: var(--fogo-tx-3) !important;
    font-family: var(--fogo-mono) !important;
    font-size: 10.5px !important;
    letter-spacing: .04em;
    display: block;
    margin-top: 4px;
}

/* ---------- Empty state ---------- */
.mensagens-container > .text-center.text-muted {
    color: var(--fogo-tx-3) !important;
    padding: 48px 24px !important;
}

.mensagens-container > .text-center.text-muted i.fas {
    color: var(--fogo-amber-2) !important;
    opacity: .6;
    font-size: 42px !important;
    filter: drop-shadow(0 8px 18px rgba(255, 122, 26, .3));
}

.mensagens-container > .text-center.text-muted p {
    color: var(--fogo-tx-2) !important;
    font-family: var(--fogo-body) !important;
    margin-bottom: 4px;
}

.mensagens-container > .text-center.text-muted p.small {
    color: var(--fogo-tx-4) !important;
    font-size: 12.5px !important;
}

/* ---------- Input container + form ---------- */
.input-mensagem-container {
    border-top: 1px solid var(--fogo-line) !important;
    padding-top: 18px !important;
    margin-top: 4px !important;
}

.input-group-mensagem {
    display: flex !important;
    gap: 10px !important;
    align-items: stretch;
}

.input-group-mensagem .input-mensagem,
.input-group-mensagem .form-control.input-mensagem {
    flex: 1;
    background: var(--fogo-bg-2) !important;
    border: 1px solid var(--fogo-line-2) !important;
    color: var(--fogo-tx) !important;
    border-radius: var(--fogo-r-pill) !important;
    padding: 12px 20px !important;
    font-family: var(--fogo-body) !important;
    font-size: 14px !important;
    transition: border-color var(--fogo-t-base) var(--fogo-ease),
                background var(--fogo-t-base) var(--fogo-ease),
                box-shadow var(--fogo-t-base) var(--fogo-ease) !important;
}

.input-group-mensagem .input-mensagem:focus,
.input-group-mensagem .form-control.input-mensagem:focus {
    background: var(--fogo-bg) !important;
    border-color: var(--fogo-amber-line) !important;
    box-shadow: 0 0 0 3px rgba(255, 122, 26, .15) !important;
    outline: none;
}

.input-mensagem::placeholder,
.input-group-mensagem .input-mensagem::placeholder {
    color: var(--fogo-tx-4) !important;
    opacity: 1 !important;
}

/* Botão Enviar */
.btn-enviar {
    background: var(--fogo-grad-amber) !important;
    color: #231100 !important;
    border: none !important;
    border-radius: var(--fogo-r-pill) !important;
    padding: 12px 24px !important;
    font-family: var(--fogo-body) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    box-shadow: var(--fogo-glow-amber) !important;
    transition: transform var(--fogo-t-slow) var(--fogo-ease),
                box-shadow var(--fogo-t-slow) var(--fogo-ease) !important;
    margin-left: 0 !important;
    flex-shrink: 0;
}

.btn-enviar:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--fogo-glow-amber-hi) !important;
    color: #231100 !important;
}

.btn-enviar:disabled {
    background: rgba(255, 122, 26, .25) !important;
    color: rgba(35, 17, 0, .5) !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

.btn-enviar i.fas { color: inherit !important; }

/* "Mensagens criptografadas ponta-a-ponta" */
.input-mensagem-container > small.text-muted,
.input-mensagem-container > small[style*="d1d5db"] {
    color: var(--fogo-tx-4) !important;
    font-family: var(--fogo-mono) !important;
    font-size: 11px !important;
    letter-spacing: .06em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.input-mensagem-container > small.text-muted i.fas.fa-lock {
    color: var(--fogo-jade) !important;
}

/* ---------- Loading spinner ---------- */
.grid-body .spinner-border.text-primary {
    color: var(--fogo-amber) !important;
    border-color: rgba(255, 122, 26, .25) !important;
    border-top-color: var(--fogo-amber) !important;
}

.grid-body .text-center.py-5 p.text-muted {
    color: var(--fogo-tx-3) !important;
}

/* ---------- "Não autorizado" alert ---------- */
.grid-body .alert.alert-danger {
    background: rgba(228, 69, 43, .10) !important;
    border: 1px solid rgba(228, 69, 43, .34) !important;
    color: var(--fogo-ember) !important;
    border-radius: var(--fogo-r-md) !important;
    padding: 16px 18px !important;
}

.grid-body .alert.alert-danger i.fas {
    color: var(--fogo-ember) !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .message-bubble { max-width: 85% !important; padding: 10px 14px !important; }
    .mensagens-container { padding: 14px !important; max-height: 60vh !important; }
    .input-group-mensagem { flex-direction: column; gap: 8px !important; }
    .btn-enviar { width: 100%; justify-content: center; display: flex; }
    .mensagens-header-container { flex-wrap: wrap; }
    .mensagens-header-title { font-size: 16px !important; }
}


/* ============================================================
   ============================================================
   PAGE: Perguntas (/perguntas)
   ------------------------------------------------------------
   Grid de 15 cards de perguntas. 3 estados:
   - card-vazio       (0 respostas) → surface Fogo
   - card-preenchido  (1-5 respostas, em progresso) → amber wash
   - card-complete    (6+ respostas, desbloqueado) → jade glow
   ============================================================
   ============================================================ */

/* Container fica neutro — o body já tem o glow Fogo global */
.container.py-4:has(.card-vazio),
.container.py-4:has(.card-preenchido),
.container.py-4:has(.card-complete) {
    max-width: 1240px !important;
}

/* ---------- Cards de pergunta ---------- */
.card-vazio,
.card.card-vazio,
.card-preenchido,
.card.card-preenchido,
.card-complete,
.card.card-complete {
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-line) !important;
    border-radius: var(--fogo-r-lg) !important;
    color: var(--fogo-tx) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: transform var(--fogo-t-slow) var(--fogo-ease),
                border-color var(--fogo-t-slow) var(--fogo-ease),
                background var(--fogo-t-slow) var(--fogo-ease),
                box-shadow var(--fogo-t-slow) var(--fogo-ease) !important;
    min-height: 150px;
    padding: 20px 16px !important;
}

/* Vazio: hover lift simples */
.card-vazio:hover,
.card.card-vazio:hover {
    transform: translateY(-4px) !important;
    border-color: var(--fogo-line-2) !important;
    background: var(--fogo-surface-2) !important;
    box-shadow: var(--fogo-sh-md) !important;
}

/* Preenchido (em progresso): wash âmbar + amber-line */
.card-preenchido,
.card.card-preenchido {
    background: var(--fogo-amber-wash) !important;
    border: 1px solid var(--fogo-amber-line) !important;
    box-shadow: 0 0 0 1px rgba(255, 122, 26, .08), 0 12px 28px -14px rgba(255, 122, 26, .35) !important;
}

.card-preenchido:hover,
.card.card-preenchido:hover {
    transform: translateY(-4px) !important;
    background: rgba(255, 122, 26, .16) !important;
    border-color: var(--fogo-amber) !important;
    box-shadow: 0 0 0 1px var(--fogo-amber-line), 0 18px 36px -16px rgba(255, 122, 26, .55) !important;
}

/* Complete (desbloqueado): jade glow — semânticamente "feito" */
.card-complete,
.card.card-complete {
    background: linear-gradient(145deg, rgba(31, 190, 147, .12), rgba(31, 190, 147, .04)) !important;
    border: 1px solid rgba(31, 190, 147, .42) !important;
    box-shadow: 0 0 0 1px rgba(31, 190, 147, .15), 0 10px 24px -10px rgba(31, 190, 147, .45) !important;
}

.card-complete:hover,
.card.card-complete:hover {
    transform: translateY(-4px) !important;
    background: linear-gradient(145deg, rgba(31, 190, 147, .18), rgba(31, 190, 147, .06)) !important;
    border-color: var(--fogo-jade) !important;
    box-shadow: 0 0 0 1px rgba(31, 190, 147, .25), 0 18px 36px -16px rgba(31, 190, 147, .55) !important;
}

/* Ícone + título dentro dos cards de pergunta */
.card-vazio .card-body i.bi,
.card-preenchido .card-body i.bi,
.card-complete .card-body i.bi,
.card-vazio .card-body i,
.card-preenchido .card-body i,
.card-complete .card-body i {
    font-size: 2.2rem !important;
    transition: transform var(--fogo-t-base) var(--fogo-ease),
                color var(--fogo-t-base) var(--fogo-ease) !important;
    margin-bottom: 4px;
}

.card-vazio .card-body i.bi,
.card-vazio .card-body i {
    color: var(--fogo-tx-2) !important;
}

.card-preenchido .card-body i.bi,
.card-preenchido .card-body i {
    color: var(--fogo-amber-2) !important;
    filter: drop-shadow(0 6px 14px rgba(255, 122, 26, .35));
}

.card-complete .card-body i.bi,
.card-complete .card-body i {
    color: var(--fogo-jade) !important;
    filter: drop-shadow(0 6px 14px rgba(31, 190, 147, .4));
}

.card-vazio:hover .card-body i,
.card-preenchido:hover .card-body i,
.card-complete:hover .card-body i {
    transform: scale(1.08);
}

/* Título do card */
.card-vazio .card-body > .fw-semibold,
.card-vazio .card-body div[style*="color: #f1f5f9"],
.card-preenchido .card-body > .fw-semibold,
.card-preenchido .card-body div[style*="color: #f1f5f9"],
.card-complete .card-body > .fw-semibold,
.card-complete .card-body div[style*="color: #f1f5f9"] {
    color: var(--fogo-tx) !important;
    font-family: var(--fogo-display) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: -.01em;
    margin-top: 8px !important;
}

/* ---------- Badges de contagem (0/6, 6/6) ---------- */
.badge.badge-resposta,
.badge.rounded-pill.badge-resposta {
    background: rgba(255, 122, 26, .22) !important;
    color: var(--fogo-amber-2) !important;
    border: 1px solid var(--fogo-amber-line) !important;
    font-family: var(--fogo-mono) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: .04em;
    padding: 4px 10px !important;
    border-radius: var(--fogo-r-pill) !important;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px -4px rgba(255, 122, 26, .35);
}

.badge.badge-resposta i.bi {
    color: var(--fogo-amber-2) !important;
}

.badge.badge-complete,
.badge.rounded-pill.badge-complete {
    background: var(--fogo-jade) !important;
    color: #062b21 !important;
    border: 1px solid #2cd9a9 !important;
    font-family: var(--fogo-mono) !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    letter-spacing: .04em;
    padding: 4px 10px !important;
    border-radius: var(--fogo-r-pill) !important;
    box-shadow: 0 4px 14px -4px rgba(31, 190, 147, .55);
}

.badge.badge-complete i.bi {
    color: #062b21 !important;
}

/* Cards vazios também precisam de badge (0/6 com cadeado) */
.card-vazio .badge.badge-resposta,
.card-vazio .badge.rounded-pill.badge-resposta {
    background: rgba(255, 255, 255, .06) !important;
    color: var(--fogo-tx-4) !important;
    border: 1px solid var(--fogo-line-2) !important;
    box-shadow: none;
}
.card-vazio .badge.badge-resposta i.bi {
    color: var(--fogo-tx-4) !important;
}

/* ---------- Progress bar mini (rodapé dos cards) ---------- */
.progress-mini,
.progress.progress-mini,
div.progress-mini[style*="334155"] {
    background: rgba(255, 255, 255, .06) !important;
    height: 4px !important;
    border-radius: var(--fogo-r-pill) !important;
    overflow: hidden;
    margin-top: 14px !important;
}

.progress-bar-mini,
div.progress-bar-mini[style*="linear-gradient"] {
    background: var(--fogo-grad-fire) !important;
    border-radius: var(--fogo-r-pill) !important;
    transition: width var(--fogo-t-slow) var(--fogo-ease) !important;
    box-shadow: 0 0 8px rgba(255, 122, 26, .35);
}

.progress-bar-mini.complete,
div.progress-bar-mini.complete[style*="linear-gradient"] {
    background: linear-gradient(90deg, var(--fogo-jade), #2cd9a9) !important;
    box-shadow: 0 0 8px rgba(31, 190, 147, .45);
}

/* Card vazio: progresso opaco / quase invisível */
.card-vazio .progress-bar-mini {
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: none;
}

/* ---------- Spacing geral do grid ---------- */
.container.py-4 .row.row-cols-1 {
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.25rem;
}

/* Container Bootstrap default já é centralizado; só pula altura */
.container.py-4 {
    padding-top: 24px !important;
    padding-bottom: 40px !important;
    max-width: 1240px !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
    .card-vazio, .card-preenchido, .card-complete { min-height: 130px; padding: 16px 12px !important; }
    .card-vazio .card-body i, .card-preenchido .card-body i, .card-complete .card-body i { font-size: 1.8rem !important; }
    .card-vazio .card-body > .fw-semibold,
    .card-preenchido .card-body > .fw-semibold,
    .card-complete .card-body > .fw-semibold { font-size: 13px !important; }
}






/* ============================================================
   ============================================================
   LifeTracerB2B — overrides especificos (discovery multi-agente)
   ------------------------------------------------------------
   O chrome base (.sidebar, .user-info-top, .user-avatar-large,
   .login-container, .login-card, .logo-circle, .message-bubble,
   .nav-item, .card, .btn-*, .form-control, .modal, .table, .badge)
   ja e coberto pelas regras globais acima. Esta secao cobre o que
   e EXCLUSIVO do B2B: modais dark proprios, tabelas modernas,
   menus destacados, cards de consulta/metrica, dropzones, etc.
   Tokens reais: --fogo-bg/-2, --fogo-surface/-2, --fogo-elevated,
   --fogo-tx/-2/-3/-4, --fogo-line/-2, --fogo-amber/-2/-wash/-line,
   --fogo-gold/ember/jade/azure, --fogo-grad-fire/-amber, glows.
   ============================================================
   ============================================================ */

/* ---------- Sidebar gradiente violeta→roxo (MainLayout.razor.css scoped) ---------- */
/* O .sidebar global ja vence, mas garantimos kill do background-image scoped */
.sidebar { background-image: none !important; }

/* top-row legado claro (#f7f7f7) → surface Fogo */
.top-row {
    background: var(--fogo-bg-2) !important;
    border-bottom: 1px solid var(--fogo-line) !important;
}

/* ---------- Mobile sidebar toggle + overlay ---------- */
.sidebar-toggle,
#sidebar-toggle-btn {
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-line) !important;
    box-shadow: var(--fogo-sh-sm) !important;
    border-radius: var(--fogo-r-md) !important;
}
.sidebar-toggle:hover,
#sidebar-toggle-btn:hover {
    background: var(--fogo-elevated) !important;
    border-color: var(--fogo-amber-line) !important;
}
.sidebar-toggle span,
#sidebar-toggle-btn span { background: var(--fogo-amber) !important; }
.sidebar-overlay { background: rgba(10, 9, 8, .7) !important; backdrop-filter: blur(4px); }

/* clinic chip no topo da sidebar */
.user-clinic {
    color: var(--fogo-amber-2) !important;
    background: var(--fogo-amber-wash) !important;
    border: 1px solid var(--fogo-amber-line) !important;
    border-radius: var(--fogo-r-pill) !important;
    font-weight: 500;
}
.user-clinic-independent { color: var(--fogo-tx-4) !important; }

/* highlighted menu (Relatorios) — gradient azul→indigo → fire */
.highlighted-menu {
    background: var(--fogo-grad-fire) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: var(--fogo-glow-amber) !important;
}
.highlighted-menu:hover { box-shadow: var(--fogo-glow-amber-hi) !important; opacity: 1 !important; }

/* legacy NavMenu top-row toggler */
.navbar-toggler {
    background: var(--fogo-surface-2) !important;
    border: 1px solid var(--fogo-line) !important;
}
.nav-item ::deep a.active {
    background: var(--fogo-amber-wash) !important;
    color: var(--fogo-amber-2) !important;
}

/* Blazor error UI — warning Fogo */
#blazor-error-ui {
    background: #2a1f0a !important;
    color: var(--fogo-amber-2) !important;
    border-top: 1px solid var(--fogo-amber-line) !important;
    box-shadow: none !important;
}
#blazor-error-ui a, #blazor-error-ui .reload, #blazor-error-ui .dismiss { color: var(--fogo-amber-2) !important; }

/* ============================================================
   MODAIS DARK PROPRIOS DO B2B (modals-dark.css)
   ============================================================ */
.modal-overlay-dark,
.modal-overlay { background: rgba(10, 9, 8, .82) !important; backdrop-filter: blur(8px) !important; }

.modal-content-dark,
.modal-dark,
.modal-body-dark,
.modal-footer-dark,
.modal-header-dark {
    background: var(--fogo-elevated) !important;
    border-color: var(--fogo-line-2) !important;
    color: var(--fogo-tx) !important;
}
.modal-content-dark { border: 1px solid var(--fogo-line-2) !important; border-radius: var(--fogo-r-lg) !important; box-shadow: var(--fogo-sh-lg) !important; }
.modal-header-dark { border-bottom: 1px solid var(--fogo-line) !important; }
.modal-footer-dark { border-top: 1px solid var(--fogo-line) !important; }
.modal-header-dark .modal-title { color: var(--fogo-tx) !important; font-family: var(--fogo-display) !important; font-weight: 700 !important; letter-spacing: -.01em; }
.modal-body-dark .text-muted, .modal-body-dark .text-white-50 { color: var(--fogo-tx-2) !important; }
.modal-message-text { color: var(--fogo-tx) !important; font-family: var(--fogo-body) !important; }

/* form controls dentro de modais dark */
.modal-body-dark .form-control,
.modal-body-dark .form-select,
.modal-body-dark textarea.form-control,
.modal-body-dark input[type="date"],
.modal-body-dark input[type="time"],
.modal-content-dark .form-control,
.modal-content-dark .form-select {
    background: var(--fogo-bg-2) !important;
    border: 1px solid var(--fogo-line-2) !important;
    color: var(--fogo-tx) !important;
}
.modal-body-dark .form-control:focus,
.modal-body-dark .form-select:focus,
.modal-body-dark input[type="date"]:focus,
.modal-body-dark input[type="time"]:focus,
.modal-content-dark .form-control:focus,
.modal-content-dark .form-select:focus {
    border-color: var(--fogo-amber-line) !important;
    box-shadow: 0 0 0 3px rgba(255, 122, 26, .15) !important;
}
.modal-body-dark input[type="date"]::-webkit-calendar-picker-indicator,
.modal-body-dark input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.7); }
.modal-content-dark .nav-link.active {
    background: var(--fogo-amber-wash) !important;
    border-color: var(--fogo-amber-line) !important;
    color: var(--fogo-tx) !important;
}

/* header tints semanticos (era gradients Bootstrap) → Fogo */
.modal-header-danger,  .modal-header.bg-danger  { background: linear-gradient(135deg, var(--fogo-ember), #9a2c1c) !important; color: #fff !important; }
.modal-header-success, .modal-header.bg-success { background: linear-gradient(135deg, var(--fogo-jade), #128a6a) !important; color: #fff !important; }
.modal-header-warning, .modal-header.bg-warning { background: linear-gradient(135deg, var(--fogo-gold), var(--fogo-amber)) !important; color: var(--fogo-bg) !important; }
.modal-header-info,    .modal-header.bg-info    { background: linear-gradient(135deg, var(--fogo-azure), #1f5fa1) !important; color: #fff !important; }
.modal-header-primary, .modal-header.bg-primary { background: var(--fogo-grad-fire) !important; color: #fff !important; }

/* botoes dentro dos modais dark */
.modal-btn-secondary-dark,
.modal-footer-dark .btn-secondary {
    background: var(--fogo-surface-2) !important;
    border: 1px solid var(--fogo-line-2) !important;
    color: var(--fogo-tx) !important;
}
.modal-btn-secondary-dark:hover,
.modal-footer-dark .btn-secondary:hover {
    background: var(--fogo-amber-wash) !important;
    border-color: var(--fogo-amber-line) !important;
    color: var(--fogo-tx) !important;
}
.modal-footer-dark .modal-btn-primary, .btn.modal-btn-primary { background: var(--fogo-grad-fire) !important; border: none !important; color: #fff !important; }
.modal-footer-dark .modal-btn-primary:hover, .btn.modal-btn-primary:hover { box-shadow: var(--fogo-glow-amber) !important; }
.modal-footer-dark .modal-btn-success, .btn.modal-btn-success { background: var(--fogo-jade) !important; border: none !important; color: #062b21 !important; }
.modal-footer-dark .modal-btn-danger,  .btn.modal-btn-danger  { background: var(--fogo-ember) !important; border: none !important; color: #fff !important; }
.modal-footer-dark .modal-btn-warning, .btn.modal-btn-warning { background: var(--fogo-gold) !important; border: none !important; color: var(--fogo-bg) !important; }
.modal-footer-dark .modal-btn-info,    .btn.modal-btn-info    { background: var(--fogo-azure) !important; border: none !important; color: #fff !important; }

/* prontuario field content box */
.prontuario-field-content {
    background: var(--fogo-bg-2) !important;
    border: 1px solid var(--fogo-line-2) !important;
    color: var(--fogo-tx) !important;
    border-radius: var(--fogo-r-md) !important;
}
.prontuario-row:hover { background: var(--fogo-amber-wash) !important; }

/* voice recording dropzone (NovoProntuario) — azul/indigo → ambar */
.voice-recording-area {
    background: linear-gradient(135deg, var(--fogo-amber-wash) 0%, rgba(255, 159, 46, .06) 100%) !important;
    border: 2px dashed var(--fogo-amber-line) !important;
}

/* alert-warning-dark (PsicologoDetalhes) */
.alert-warning-dark {
    background: rgba(255, 201, 60, .14) !important;
    border: 1px solid rgba(255, 201, 60, .4) !important;
    color: var(--fogo-tx) !important;
}

/* ============================================================
   TABELAS MODERNAS (ComparativoGeral, RelatoriosClinica/Evolucao)
   ============================================================ */
.table-modern { background: transparent !important; }
.table-modern thead tr {
    background: var(--fogo-surface-2) !important;
    border-bottom: 1px solid var(--fogo-line-2) !important;
}
.table-modern thead th {
    color: var(--fogo-tx-3) !important;
    font-family: var(--fogo-body) !important;
    font-size: 11.5px !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600 !important;
}
.table-modern tbody tr {
    background: var(--fogo-surface) !important;
    border-bottom: 1px solid var(--fogo-line) !important;
}
.table-modern tbody tr:hover {
    background: var(--fogo-surface-2) !important;
    box-shadow: 0 4px 12px rgba(255, 122, 26, .12) !important;
}
.table-modern tbody td { color: var(--fogo-tx) !important; }

/* tabelas base — hover/active/sortable azul → ambar */
.table tbody tr:hover { background: var(--fogo-amber-wash) !important; }
.table tbody tr.active, .table tbody tr.table-active {
    background: var(--fogo-amber-wash) !important;
    box-shadow: inset 3px 0 0 var(--fogo-amber) !important;
}
.table th.sortable:hover { background: var(--fogo-amber-wash) !important; }
.table tbody tr.empty-state-row td { color: var(--fogo-tx-3) !important; font-style: italic; }
.table-primary { --bs-table-bg: rgba(255, 122, 26, .10); --bs-table-border-color: var(--fogo-amber-line); --bs-table-color: var(--fogo-tx); }
.table-info { --bs-table-bg: rgba(46, 134, 222, .15); --bs-table-border-color: rgba(46, 134, 222, .32); --bs-table-color: var(--fogo-tx); }
.table-dark { --bs-table-bg: var(--fogo-bg-2); --bs-table-color: var(--fogo-tx); --bs-table-border-color: var(--fogo-line); }

/* badges modernos (RelatoriosClinica) */
.badge-modern.badge-success { background: rgba(31, 190, 147, .16) !important; border: 1px solid rgba(31, 190, 147, .3) !important; color: #6ed6b3 !important; }
.badge-modern.badge-danger  { background: rgba(228, 69, 43, .18) !important; border: 1px solid rgba(228, 69, 43, .32) !important; color: #ff8585 !important; }
.badge-modern.badge-neutral { background: var(--fogo-surface-2) !important; border: 1px solid var(--fogo-line-2) !important; color: var(--fogo-tx-2) !important; }
.badge-count { background: var(--fogo-amber-wash) !important; border: 1px solid var(--fogo-amber-line) !important; color: var(--fogo-tx-2) !important; }
.badge-count.badge-info-custom { background: rgba(46, 134, 222, .15) !important; border-color: rgba(46, 134, 222, .32) !important; color: var(--fogo-azure) !important; }

/* botao de acao (era violeta #667eea→#764ba2) → ambar */
.btn-action {
    background: var(--fogo-amber-wash) !important;
    border: 1px solid var(--fogo-amber-line) !important;
    color: var(--fogo-amber-2) !important;
    border-radius: var(--fogo-r-pill) !important;
    transition: background var(--fogo-t-base) var(--fogo-ease), color var(--fogo-t-base) var(--fogo-ease), box-shadow var(--fogo-t-base) var(--fogo-ease) !important;
}
.btn-action:hover {
    background: var(--fogo-grad-amber) !important;
    color: #231100 !important;
    border-color: transparent !important;
    box-shadow: var(--fogo-glow-amber) !important;
}

/* ranking + icon badges + progress modernos */
.ranking-item { background: var(--fogo-surface) !important; border-radius: var(--fogo-r-md); }
.ranking-item:hover { background: var(--fogo-surface-2) !important; }
.icon-badge { border: 1px solid var(--fogo-line) !important; }
.progress-modern { background: var(--fogo-surface-2) !important; border-radius: var(--fogo-r-pill); }
.progress-bar-modern { box-shadow: none !important; }

/* text utils inline usados nas tabelas modernas */
.text-light-grey { color: var(--fogo-tx-3) !important; }

/* ============================================================
   DASHBOARD / PACIENTES / AGENDA
   ============================================================ */
.metric-icon { background: var(--fogo-surface-2) !important; }
.metric-icon.bg-success-subtle { color: var(--fogo-jade) !important; }
.metric-icon.bg-warning-subtle { color: var(--fogo-gold) !important; }
.metric-icon.bg-info-subtle { color: var(--fogo-azure) !important; }
.metric-icon.bg-primary-subtle { color: var(--fogo-amber-2) !important; }

.avatar-circle {
    background: var(--fogo-surface-2) !important;
    color: var(--fogo-amber-2) !important;
    border: 1px solid var(--fogo-line);
}
.avatar-circle.bg-primary-subtle { background: var(--fogo-amber-wash) !important; }
.avatar-circle.text-primary { color: var(--fogo-amber-2) !important; }

.card-clickable:hover { box-shadow: 0 8px 16px rgba(255, 122, 26, .18) !important; }
.list-group-item:hover, .consulta-item:hover { background: var(--fogo-amber-wash) !important; }
.consulta-item { border-bottom: 1px solid var(--fogo-line) !important; }
.consulta-card:hover { box-shadow: 0 8px 16px rgba(255, 122, 26, .2) !important; }
.consulta-card.hoje { border-left: 4px solid var(--fogo-jade) !important; }
.consulta-card.proxima { border-left: 4px solid var(--fogo-amber) !important; }
.consulta-hora .text-primary { color: var(--fogo-amber-2) !important; }
.card-header.bg-white, .card-footer.bg-white { background: transparent !important; border-color: var(--fogo-line) !important; }

/* busca de pacientes */
.search-input-group {
    border: 1px solid var(--fogo-line-2) !important;
    background: var(--fogo-bg-2) !important;
    border-radius: var(--fogo-r-pill) !important;
}
.search-input-group .input-group-text { background: transparent !important; border: none !important; }
.search-input-group .input-group-text i { color: var(--fogo-tx-3) !important; }
.search-input-group:focus-within {
    border-color: var(--fogo-amber-line) !important;
    box-shadow: 0 0 0 3px rgba(255, 122, 26, .15) !important;
}
.search-input-group .form-control { background: transparent !important; border: none !important; }

/* ============================================================
   LOGIN / BEMVINDO — branding B2B (era indigo #667eea→#764ba2)
   ============================================================ */
.info-card {
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-line) !important;
    box-shadow: var(--fogo-sh-lg) !important;
}
.feature-item i, .clinic-badge i, .login-footer a:hover { color: var(--fogo-amber-2) !important; }
.bemvindo-hero, .bemvindo-cta { background: var(--fogo-grad-fire) !important; }
.bemvindo-check, .bemvindo .text-success { color: var(--fogo-jade) !important; }

/* ============================================================
   APEXCHARTS — eixos lavanda (#dce4ff) + tooltip slate
   ============================================================ */
:root {
    --LifeTracer-eixo-grafico: rgba(255, 255, 255, .66);
    --LifeTracer-grade-grafico: rgba(255, 255, 255, .08);
}
.apexcharts-tooltip {
    background: var(--fogo-elevated) !important;
    color: var(--fogo-tx) !important;
    border: 1px solid var(--fogo-line-2) !important;
    box-shadow: var(--fogo-sh-md) !important;
}
.apexcharts-tooltip-title {
    background: var(--fogo-surface-2) !important;
    border-bottom: 1px solid var(--fogo-line) !important;
    color: var(--fogo-tx) !important;
}
.apexcharts-text, .apexcharts-xaxis text, .apexcharts-yaxis text { fill: rgba(255, 255, 255, .66) !important; }
.apexcharts-gridline { stroke: rgba(255, 255, 255, .08) !important; }

/* status washes residuais B2B */
.bg-primary-subtle { background: var(--fogo-amber-wash) !important; border: 1px solid var(--fogo-amber-line) !important; }


/* ============================================================
   MAUI drawer mobile — correções de opacidade/contraste
   ------------------------------------------------------------
   O drawer (.sidebar-wrapper + .sidebar-overlay) é mobile-only.
   - sidebar já sólida (acima) evita backdrop-filter aninhado
   - botão hamburger/X (.mobile-menu-toggle) era azul #3b82f6
   - scrim do overlay: manter dim mas sem blur pesado no iOS
   ============================================================ */
.mobile-menu-toggle {
    background: var(--fogo-surface) !important;
    border: 1px solid var(--fogo-line-2) !important;
    border-radius: var(--fogo-r-md) !important;
    box-shadow: var(--fogo-sh-sm) !important;
}
.mobile-menu-toggle:hover { background: var(--fogo-elevated) !important; }
.mobile-menu-toggle.active {
    background: var(--fogo-grad-amber) !important;
    border-color: transparent !important;
}
.mobile-menu-toggle .hamburger-line { background: var(--fogo-tx) !important; }
.mobile-menu-toggle.active .hamburger-line { background: #231100 !important; }

/* Scrim do drawer: dim suficiente sem blur pesado (iOS WKWebView) */
.sidebar-overlay {
    background: rgba(10, 9, 8, .58) !important;
    backdrop-filter: none !important;
}

/* Labels de seção da sidebar um pouco mais legíveis no mobile */
.nav-section-title { color: var(--fogo-tx-3) !important; }

/* Remove o anel de foco AZUL do heading auto-focado (FocusOnNavigate Selector="h1") */
h1:focus, h1[tabindex]:focus, [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}