/* ============================================================
   Rede Brasil Car — Personalizaciones del tema
   Sobreescribe variables del template (app.min.css) sin
   modificar los archivos originales del template.
   ============================================================ */

/* Topbar / Navbar */
body[data-topbar=dark] #page-topbar {
    background-color: #0a1a33;
}

/* Topnav (barra de menú horizontal) */
.topnav {
    background: #0a1a33;
}

.topnav .navbar-nav .nav-link,
.topnav .navbar-nav .nav-link i {
    color: #10b981 !important;
    font-weight: 700 !important;
}

.topnav .navbar-nav .nav-link:hover,
.topnav .navbar-nav .nav-link:hover i {
    color: #fff !important;
    font-weight: 700 !important;
}

/* Logo SVG inline:
   El template define body[data-topbar=dark] .logo-light { display:block }
   y .logo { line-height:70px } — necesitamos especificidad igual o mayor
   para que nuestros estilos ganen. */
body[data-topbar=dark] .logo-light.redebrasilcar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
    text-decoration: none;
    padding: 4px 8px;
}

.redebrasilcar-text {
    line-height: 1;
}

.redebrasilcar-name {
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.redebrasilcar-name b {
    color: #5FC9B9;
    font-weight: 600;
}

.redebrasilcar-sub {
    color: #9aa0a6;
    font-size: 10px;
    letter-spacing: 2px;
    margin-top: 3px;
    font-weight: 400;
    text-transform: uppercase;
}

/* Dropdowns del topnav */
.topnav .dropdown-menu {
    background: #0a1a33;
    border: 1px solid #11284d;
}

.topnav .dropdown-menu .dropdown-item {
    color: #10b981 !important;
    font-weight: 700 !important;
}

.topnav .dropdown-menu .dropdown-item:hover,
.topnav .dropdown-menu .dropdown-item:focus,
.topnav .dropdown-menu .dropdown-item:active,
.topnav .dropdown-menu .dropdown-item.active {
    color: #fff !important;
    background: #11284d;
}

/* Login */
body.account-pages,
.login-wrapper,
.login-form-side {
    background: #0a1a33 !important;
}

.login-form-side::before,
.login-form-side::after {
    display: none !important;
    background: none !important;
}

.login-form-side h4,
.login-form-side .fw-bold {
    color: #ffffff !important;
}

.login-form-side p,
.login-form-side .text-muted,
.login-form-side label,
.login-form-side .form-label,
.login-form-side .form-check-label {
    color: #CFD4D8 !important;
}

.login-form-side .btn.btn-danger {
    background: #10b981 !important;
    border: none !important;
    color: #0a1a33 !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.35) !important;
}

.login-form-side .btn.btn-danger:hover {
    background: #059669 !important;
    color: #ffffff !important;
}

/* Login image side */
.login-image-side {
    background: url("../images/company/bg.jpg") center center / cover no-repeat !important;
    background-color: #0a0a0a !important;
}

/* Marco oscuro para error.png: la imagen tiene fondo transparente y
   glifos blancos, pensados para verse sobre fondo oscuro (no sobre
   la card blanca del template). */
.error-img-frame {
    background: radial-gradient(circle at 50% 42%, #11284d, #0a1a33);
    border-radius: 24px;
    padding: 32px;
}

/* Banner de impersonacion: debajo de topbar (70px) + topnav (~54px) */
#banner-impersonacion {
    position: fixed;
    top: 124px;
    left: 0;
    right: 0;
    z-index: 99;
    background: #5fc9b5;
    color: #1a1a1a;
    padding: 7px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Indicador "Consultas en segundo plano" — dentro de la fila del topnav
   (junto a Configuração/Financeiro/Relatórios/Consultas), pegado a la
   derecha de esa misma fila. */
#btnConsultasBgWrap {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.acc-bg-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 18px;
    border: none;
    border-radius: 10px;
    color: #1a1a1a;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: filter .18s ease;
}

.acc-bg-btn:hover {
    filter: brightness(1.07);
}

.acc-bg-btn .acc-bg-icon {
    font-size: 19px;
    line-height: 1;
}

.acc-bg-btn .acc-bg-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    color: inherit;
    font-size: 13px;
    font-weight: 800;
}

.acc-bg-btn .acc-bg-text {
    color: inherit;
    font-weight: 600;
}

.acc-bg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
}

/* Estado: hay consultas procesando — ámbar, punto pulsante */
.acc-bg-btn.is-processing {
    background: #f59e0b;
}

.acc-bg-btn.is-processing .acc-bg-dot {
    animation: acc-bg-pulse 1.6s ease-out infinite;
}

/* Estado: finalizadas sin revisar — teal de marca */
.acc-bg-btn.is-done {
    background: #10b981;
}

@keyframes acc-bg-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Compensar el espacio que ocupa el banner en el contenido */
body[data-impersonando] .page-content {
    padding-top: 92px !important;
}

/* ============================================================
   Suporte (SUP-002) — Cliente/Representante
   Paleta tomada do modal self-service real de Recarregar Saldo
   (.rso-* acima) — mesmo precedente visual, mesmo público (Cliente/
   Representante). Tudo escopado em .support-* para não vazar pra
   nenhum outro módulo.
   ============================================================ */

.support-shell {
    --sup-bg-card: #fff;
    --sup-text-body: #5b626b;
    --sup-text-heading: #11284d;
    --sup-text-muted: #8a92a6;
    --sup-border: #e9ecef;
    --sup-border-soft: #eef0f2;
    --sup-accent: #34d399;
    --sup-accent-deep: #059669;
    --sup-accent-tint: rgba(52, 211, 153, .10);

    display: flex;
    flex-direction: row;
    height: calc(100vh - 230px);
    min-height: 520px;
    overflow: hidden;
    padding: 0;
}

.support-btn-primary {
    background: var(--sup-accent, #34d399);
    border: none;
    color: #0b3b35;
    font-weight: 700;
    border-radius: 999px;
    padding: .5rem 1.1rem;
}

.support-btn-primary:hover,
.support-btn-primary:focus {
    background: var(--sup-accent-deep, #059669);
    color: #fff;
}

.support-btn-icon {
    border: none;
    background: transparent;
    color: var(--sup-text-muted, #8a92a6);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.support-btn-icon:hover {
    background: rgba(0, 0, 0, .05);
    color: var(--sup-text-heading, #11284d);
}

/* ── Coluna esquerda: Meus atendimentos ─────────────────────── */

.support-list-pane {
    flex: 0 0 30%;
    max-width: 30%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--sup-border, #e9ecef);
    min-width: 0;
    overflow: hidden;
}

.support-list-header {
    flex: 0 0 auto;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--sup-border-soft, #eef0f2);
}

.support-list-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.support-list-title {
    margin: 0 0 10px;
    font-weight: 700;
    color: var(--sup-text-heading, #11284d);
}

.support-search {
    position: relative;
    margin-bottom: 10px;
}

.support-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sup-text-muted, #8a92a6);
    font-size: .85rem;
}

.support-search-input {
    padding-left: 34px;
    border-radius: 10px;
}

.support-filters {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.support-filter-chip {
    border: 1px solid var(--sup-border, #e9ecef);
    background: #fff;
    color: var(--sup-text-body, #5b626b);
    border-radius: 999px;
    padding: 5px 13px;
    font-size: .78rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.support-filter-chip.active {
    background: var(--sup-text-heading, #11284d);
    border-color: var(--sup-text-heading, #11284d);
    color: #fff;
}

.support-chip-badge {
    background: #ec4561;
    color: #fff;
    border-radius: 999px;
    min-width: 16px;
    height: 16px;
    font-size: .66rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.support-list-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 10px 12px;
}

.support-item {
    background: #fff;
    border: 1px solid var(--sup-border, #e9ecef);
    border-radius: 12px;
    padding: 12px 13px;
    margin-bottom: 8px;
    cursor: pointer;
    min-width: 0;
    max-width: 100%;
    transition: border-color .12s ease, background-color .12s ease;
}

.support-item:hover {
    border-color: var(--sup-accent, #34d399);
}

.support-item.active {
    background: var(--sup-accent-tint, rgba(52, 211, 153, .10));
    border-color: var(--sup-accent, #34d399);
}

.support-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.support-item-main {
    min-width: 0;
    flex: 1 1 auto;
}

.support-item-assunto {
    font-weight: 700;
    font-size: .9rem;
    color: var(--sup-text-heading, #11284d);
}

.support-item-cliente {
    font-size: .74rem;
    color: var(--sup-text-muted, #8a92a6);
}

.support-item-tipo {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    color: var(--sup-text-muted, #8a92a6);
    font-size: .74rem;
    font-weight: 600;
}

.support-item-meta {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.support-item-hora {
    font-size: .72rem;
    color: var(--sup-text-muted, #8a92a6);
    white-space: nowrap;
}

.support-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sup-accent-deep, #059669);
    display: inline-block;
}

.support-item-preview {
    font-size: .8rem;
    color: var(--sup-text-body, #5b626b);
    margin-top: 7px;
}

.support-item-bottom {
    margin-top: 9px;
}

/* Truncamento seguro em flex item: min-width:auto (default) usa a largura
   total do texto sem quebra como piso do item — sem min-width:0 aqui, o
   ellipsis não funciona e a coluna pode estourar horizontalmente. */
.trunc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
}

/* ── Skeleton (carregamento inicial) ─────────────────────────── */

.support-skel-item {
    padding: 14px 13px;
    border: 1px solid var(--sup-border-soft, #eef0f2);
    border-radius: 12px;
    margin-bottom: 8px;
}

.support-skel-line {
    height: 12px;
    border-radius: 6px;
    margin-bottom: 8px;
    background: linear-gradient(90deg, #eef0f2 25%, #f6f7f8 37%, #eef0f2 63%);
    background-size: 400px 100%;
    animation: sup-shimmer 1.4s infinite linear;
}

@keyframes sup-shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}

/* ── Empty states ─────────────────────────────────────────────── */

.support-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--sup-text-muted, #8a92a6);
}

.support-empty-pane {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.support-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #f1f3f4;
    color: #b7bec7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto 16px;
}

.support-empty-title {
    font-weight: 700;
    font-size: .92rem;
    color: var(--sup-text-heading, #11284d);
    margin-bottom: 6px;
}

.support-empty-text {
    font-size: .82rem;
    max-width: 320px;
    margin: 0 auto;
}

.support-link {
    font-size: .8rem;
    font-weight: 600;
    color: var(--sup-accent-deep, #059669);
}

/* ── Coluna direita: conversa ────────────────────────────────── */

.support-conv-pane {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #fbfbfc;
}

.support-conv-loading {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--sup-text-muted, #8a92a6);
    font-size: .85rem;
    font-weight: 600;
}

.support-conv-header {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--sup-border, #e9ecef);
    background: #fff;
    min-width: 0;
}

.support-btn-voltar {
    display: none;
    flex: 0 0 auto;
}

.support-conv-header-main {
    flex: 1 1 auto;
    min-width: 0;
}

.support-conv-assunto {
    font-weight: 700;
    font-size: 1rem;
    color: var(--sup-text-heading, #11284d);
}

.support-conv-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 5px;
    font-size: .78rem;
}

.support-conv-tipo {
    color: var(--sup-text-muted, #8a92a6);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.support-conv-atendente {
    color: var(--sup-text-muted, #8a92a6);
    font-weight: 600;
    white-space: nowrap;
}

.support-conv-header-actions {
    flex: 0 0 auto;
}

.support-btn-resolver {
    border-radius: 999px;
    font-weight: 600;
    /* .btn-outline-secondary deste tema é calibrado pro sidebar escuro
       (color/border ~#e9ecef) — em cima do card branco do header da
       conversa isso dá contraste ~1.1:1, ilegível (parece desabilitado
       mesmo sem estar). Sobrescreve só aqui, sem tocar .btn-outline-secondary
       global nem nenhum outro botão do sistema. */
    color: var(--sup-text-body, #5b626b);
    border-color: var(--sup-text-muted, #8a92a6);
}

.support-btn-resolver:hover,
.support-btn-resolver:focus {
    color: #fff;
    background: var(--sup-accent-deep, #059669);
    border-color: var(--sup-accent-deep, #059669);
}

.support-conv-aviso-financeiro {
    flex: 0 0 auto;
    background: #fff7e6;
    color: #92600a;
    border-bottom: 1px solid #f4dfa8;
    padding: 9px 18px;
    font-size: .78rem;
    font-weight: 600;
}

.support-conv-poll-erro {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 18px 0;
    padding: 10px 14px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
}

.support-poll-erro-spin {
    color: #f8b425;
    animation: sup-spin 1s linear infinite;
    flex: 0 0 auto;
}

@keyframes sup-spin {
    to { transform: rotate(360deg); }
}

.support-poll-erro-titulo {
    font-size: .8rem;
    font-weight: 700;
    color: var(--sup-text-heading, #11284d);
}

.support-poll-erro-texto {
    font-size: .74rem;
    color: var(--sup-text-muted, #8a92a6);
}

.support-conv-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.support-conv-poll-indicator {
    flex: 0 0 auto;
    text-align: center;
    font-size: .74rem;
    color: var(--sup-text-muted, #8a92a6);
    padding: 2px 0 4px;
}

/* ── Mensagens ───────────────────────────────────────────────── */

.support-msg {
    max-width: 72%;
    display: flex;
    flex-direction: column;
}

.support-msg-atendente {
    align-self: flex-start;
}

.support-msg-voce {
    align-self: flex-end;
    align-items: flex-end;
}

.support-msg-autor {
    font-size: .7rem;
    font-weight: 700;
    color: var(--sup-text-muted, #8a92a6);
    margin-bottom: 3px;
}

.support-msg-bolha {
    padding: 10px 13px;
    border-radius: 12px 12px 12px 4px;
    background: #fff;
    border: 1px solid var(--sup-border, #e9ecef);
    color: var(--sup-text-heading, #11284d);
    font-size: .87rem;
    word-break: break-word;
}

.support-msg-texto {
    white-space: pre-wrap;
}

.support-msg-voce .support-msg-bolha {
    background: var(--sup-accent-tint, rgba(52, 211, 153, .10));
    border-color: rgba(52, 211, 153, .28);
    border-radius: 12px 12px 4px 12px;
}

.support-msg-pendente .support-msg-bolha {
    opacity: .55;
}

.support-msg-erro .support-msg-bolha {
    opacity: .7;
}

.support-msg-rodape {
    font-size: .7rem;
    color: var(--sup-text-muted, #8a92a6);
    margin-top: 3px;
}

.support-msg-erro-texto {
    color: #ec4561;
    font-weight: 600;
}

.support-msg-retry {
    color: var(--sup-accent-deep, #059669);
    font-weight: 700;
    margin-left: 4px;
}

/* ── Composer ────────────────────────────────────────────────── */

.support-composer {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--sup-border, #e9ecef);
    background: #fff;
}

.support-composer-input {
    flex: 1 1 auto;
    resize: none;
    border-radius: 999px;
    padding: 10px 16px;
    max-height: 120px;
}

.support-btn-enviar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: var(--sup-accent, #34d399);
    color: #0b3b35;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.support-btn-enviar:hover {
    background: var(--sup-accent-deep, #059669);
    color: #fff;
}

.support-btn-enviar:disabled {
    opacity: .6;
}

.support-composer-disabled {
    flex: 0 0 auto;
    padding: 14px 18px;
    border-top: 1px solid var(--sup-border, #e9ecef);
    background: #f7f7f8;
    color: var(--sup-text-muted, #8a92a6);
    font-size: .84rem;
    text-align: center;
}

/* ── Modal: Novo atendimento ─────────────────────────────────── */

.support-modal-title {
    font-weight: 800;
}

.support-form-label {
    font-weight: 600;
    color: var(--sup-text-body, #5b626b);
    font-size: .88rem;
}

.support-tipo-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.support-tipo-card {
    text-align: left;
    background: #fff;
    border: 1.5px solid #e9ecef;
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.support-tipo-card:hover {
    border-color: #34d399;
}

.support-tipo-card.active {
    border-color: #34d399;
    background: rgba(52, 211, 153, .08);
}

.support-tipo-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(52, 211, 153, .16);
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
}

.support-tipo-card-title {
    font-weight: 700;
    font-size: .9rem;
    color: #11284d;
}

.support-tipo-card-desc {
    font-size: .76rem;
    color: #8a92a6;
}

.support-alert-financeiro {
    background: #fff7e6;
    color: #92600a;
    border: 1px solid #f4dfa8;
    font-size: .82rem;
    font-weight: 600;
}

/* ── Responsivo (mobile: uma coluna por vez) ────────────────── */

@media (max-width: 991.98px) {
    .support-shell {
        height: calc(100vh - 190px);
    }

    .support-list-pane {
        flex: 1 1 100%;
        max-width: 100%;
        border-right: none;
    }

    .support-conv-pane {
        display: none;
    }

    .support-btn-voltar {
        display: inline-flex;
    }

    .support-shell[data-view="conv"] .support-list-pane {
        display: none;
    }

    .support-shell[data-view="conv"] .support-conv-pane {
        display: flex;
        flex: 1 1 100%;
    }

    .support-msg {
        max-width: 85%;
    }

    /* Cabeçalho da conversa: "Marcar como resolvido" some pra baixo do
       título (spec mobile), nunca disputa a mesma linha — senão o botão
       (largura fixa) espreme o assunto/tipo até sobrar quase nada e o
       texto quebra palavra a palavra (achado real em teste de browser). */
    .support-conv-header {
        flex-wrap: wrap;
    }

    .support-conv-header-actions {
        /* flex-basis desconta os 42px do margin-left — margin soma FORA da
           base no flexbox, então "0 0 100%" + margin-left:42px estourava o
           container 42px pra fora (achado real testando o botão Assumir,
           que é mais largo que "Marcar como resolvido" e deixou isso visível). */
        flex: 0 0 calc(100% - 42px);
        margin-top: 10px;
        margin-left: 42px; /* alinha com o início do título, depois do botão voltar */
    }

    .support-btn-resolver {
        width: 100%;
    }

    /* "Assumir atendimento" é o CTA principal da tela (não uma ação
       secundária como "Marcar como resolvido" do Cliente) — no mockup
       aprovado ele ocupa a largura total do header, sem o offset de
       42px que alinha o botão do Cliente com o título. */
    .support-conv-header-actions:has(#btnAssumirAtendimento) {
        flex-basis: 100%;
        margin-left: 0;
    }

    #btnAssumirAtendimento {
        width: 100%;
    }
}

/* ============================================================
   Suporte (SUP-003) — Agente (Rol 9 e demais com ACL)
   Reaproveita ao máximo as classes .support-* de SUP-002 (shell,
   list-pane, item, conv-header, mensagens, composer) — só o que é
   genuinamente novo do lado do agente entra aqui: seletor de fila
   Consultas/Financeiro, tag "Sem atendente", menu "Ações" e o
   banner informativo de conversa assumida por outro agente.
   ============================================================ */

.support-queue-tabs {
    display: flex;
    background: #f1f3f4;
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
    margin: 0 0 12px;
}

.support-queue-tab {
    border: none;
    background: transparent;
    color: var(--sup-text-muted, #8a92a6);
    font-size: .76rem;
    font-weight: 700;
    padding: 7px 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    flex: 1 1 50%;
    min-width: 0;
}

.support-queue-tab.active {
    background: #fff;
    color: var(--sup-text-heading, #11284d);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
}

.support-queue-badge {
    background: #ec4561;
    color: #fff;
    border-radius: 999px;
    min-width: 16px;
    height: 16px;
    font-size: .64rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.support-tag-sem-atendente {
    border: 1px solid var(--sup-accent-deep, #059669);
    color: var(--sup-accent-deep, #059669);
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.support-item-atendente {
    font-size: .72rem;
    color: var(--sup-text-muted, #8a92a6);
    font-weight: 600;
    white-space: nowrap;
}

/* "Meus atendimentos" abrevia pra "Meus" no mobile — mesmo padrão já usado
   pro botão Novo atendimento (par de elementos + d-none/d-lg-inline). */
.support-filtro-meus-completo { display: none; }
.support-filtro-meus-curto { display: inline; }
@media (min-width: 992px) {
    .support-filtro-meus-completo { display: inline; }
    .support-filtro-meus-curto { display: none; }
}

/* Menu "Ações" — dropdown Bootstrap nativo, só estiliza o conteúdo. */
.support-actions-btn {
    background: var(--sup-accent-tint, rgba(52, 211, 153, .12));
    border: 1px solid var(--sup-accent-deep, #059669);
    color: var(--sup-accent-deep, #059669);
    font-weight: 700;
    border-radius: 999px;
    padding: .55rem 1rem;
    font-size: .84rem;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.support-actions-btn:hover,
.support-actions-btn:focus {
    background: var(--sup-accent-deep, #059669);
    color: #fff;
}

.support-actions-menu {
    min-width: 240px;
    border: 1px solid var(--sup-border, #e9ecef);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
    padding: 6px;
}

.support-actions-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--sup-text-heading, #11284d);
    padding: .55rem .7rem;
    border-radius: 8px;
}

.support-actions-item:hover,
.support-actions-item:focus {
    background: #f5f6f7;
    color: var(--sup-text-heading, #11284d);
}

.support-actions-item-danger {
    color: #ec4561;
    font-weight: 700;
}

.support-actions-item-danger:hover,
.support-actions-item-danger:focus {
    background: rgba(236, 69, 97, .08);
    color: #ec4561;
}

.support-actions-divider {
    height: 1px;
    background: var(--sup-border, #e9ecef);
    margin: 4px 6px;
}

/* Banner "conversa assumida por outro agente" — tom informativo (azul),
   deliberadamente distinto do aviso Financeiro (amarelo) e do erro (vermelho). */
.support-info-banner {
    flex: 0 0 auto;
    padding: 10px 20px;
    background: #eef6fd;
    border-bottom: 1px solid #cfe6fa;
    color: #1a5e9e;
    font-size: .8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 9px;
}

@media (max-width: 991.98px) {
    .support-queue-tabs {
        width: 100%;
        justify-content: center;
    }
}

/* ── Notificações (SUP-005) ──────────────────────────────────── */

.support-notify-prefs {
    position: relative;
}

/* Campana: área clickeável confortável (~38px), ícone maior que o
   .support-btn-icon genérico (que também serve o botão "voltar", com
   necessidade visual diferente) — não reaproveita essa classe pra não
   afetar outros usos dela. */
.support-notify-bell-btn {
    position: relative;
    border: none;
    background: transparent;
    color: var(--sup-text-muted, #8a92a6);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem; /* ícone ~20-21px */
    line-height: 1;
}

.support-notify-bell-btn:hover,
.support-notify-bell-btn:focus-visible {
    background: rgba(0, 0, 0, .05);
    color: var(--sup-text-heading, #11284d);
}

.support-notify-bell-btn:focus-visible {
    outline: 2px solid var(--sup-accent-deep, #059669);
    outline-offset: 2px;
}

/* Ponto de estado na campana — canto superior direito, não disputa
   espaço com um eventual badge numérico de não lidos (que ficaria mais
   pro canto oposto ou sobreposto ao ícone, nunca nesse mesmo canto). */
.support-notify-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--sup-text-muted, #8a92a6);
}

.support-notify-dot.is-granted { background: #059669; }
.support-notify-dot.is-denied  { background: #ec4561; }
.support-notify-dot.is-default { background: #f2a541; }
.support-notify-dot.is-unsupported { background: var(--sup-text-muted, #8a92a6); }

.support-notify-menu {
    min-width: 260px;
    max-width: calc(100vw - 24px);
}

.support-notify-ajuda-link {
    display: block;
    text-decoration: underline;
}

/* .btn-outline-secondary deste tema é calibrado pro sidebar escuro — em
   cima do input branco do modal fica ilegível (ver nota igual em
   .support-btn-resolver). Sobrescreve só aqui. */
.support-notify-ajuda-copiar-btn {
    color: var(--sup-text-body, #5b626b);
    border-color: var(--sup-text-muted, #8a92a6);
}

.support-notify-ajuda-copiar-btn:hover,
.support-notify-ajuda-copiar-btn:focus {
    color: #fff;
    background: var(--sup-accent-deep, #059669);
    border-color: var(--sup-accent-deep, #059669);
}

.support-notify-menu .form-check.form-switch {
    padding-top: 2px;
}

/* Linha de status dentro do dropdown: pontinho + texto, mesma paleta do
   ponto da campana — nunca depende só da cor (o texto sempre acompanha). */
.support-notify-status {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .03);
}

.support-notify-status-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sup-text-muted, #8a92a6);
}

.support-notify-status.is-granted { color: #059669; }
.support-notify-status.is-granted .support-notify-status-dot { background: #059669; }

.support-notify-status.is-denied { color: #ec4561; }
.support-notify-status.is-denied .support-notify-status-dot { background: #ec4561; }

.support-notify-status.is-default { color: #a06a10; }
.support-notify-status.is-default .support-notify-status-dot { background: #f2a541; }

.support-notify-status.is-unsupported { color: var(--sup-text-muted, #8a92a6); }
.support-notify-status.is-unsupported .support-notify-status-dot { background: var(--sup-text-muted, #8a92a6); }

.support-notify-tom-label {
    font-weight: 600;
    color: var(--sup-text-body, #5b626b);
    font-size: .78rem;
    margin-bottom: 2px;
    display: block;
}

.support-notify-tom select:disabled {
    opacity: .55;
    cursor: not-allowed;
}

@media (max-width: 575.98px) {
    .support-notify-menu {
        min-width: 220px;
    }
}

/* ============================================================
   Suporte (SUP-006D) — Anexos
   Preview tray acima do composer + cards inline nas bolhas de
   mensagem. Reaproveita .support-btn-icon (botão anexar) e a
   paleta --sup-* já estabelecida — nada de cor nova.
   ============================================================ */

.support-composer-wrap {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

.support-anexos-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 18px 0;
    background: #fff;
}

.support-anexo-hint {
    padding: 0 18px 8px;
    background: #fff;
    font-size: .72rem;
    color: var(--sup-text-muted, #8a92a6);
}

.support-btn-anexar {
    flex: 0 0 auto;
}

/* Dropzone do modal Novo Atendimento — só clique-pra-selecionar +
   arrastar-e-soltar (JS próprio, ver suporte.js), nunca a lib Dropzone.js
   (carregada globalmente mas sem uso real no projeto — CLAUDE.md proíbe
   dependência nova sem aprovação, então essa área é 100% custom). */
.support-anexo-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 22px 16px;
    border: 2px dashed var(--sup-border, #e9ecef);
    border-radius: 14px;
    background: var(--sup-bg-card, #fff);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.support-anexo-dropzone:hover,
.support-anexo-dropzone:focus-visible {
    border-color: var(--sup-accent, #34d399);
    background: var(--sup-accent-tint, rgba(52, 211, 153, .10));
    outline: none;
}

.support-anexo-dropzone.is-dragover {
    border-color: var(--sup-accent-deep, #059669);
    background: var(--sup-accent-tint, rgba(52, 211, 153, .10));
}

.support-anexo-dropzone-icone {
    font-size: 1.8rem;
    color: var(--sup-accent-deep, #059669);
    margin-bottom: 6px;
}

.support-anexo-dropzone-titulo {
    font-weight: 600;
    font-size: .88rem;
    color: var(--sup-text-heading, #11284d);
}

.support-anexo-dropzone-sub {
    font-size: .76rem;
    color: var(--sup-text-muted, #8a92a6);
    margin-top: 2px;
}

.support-anexo-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 220px;
    padding: 6px 8px;
    border: 1px solid var(--sup-border, #e9ecef);
    border-radius: 10px;
    background: #f7f8f9;
    font-size: .74rem;
}

.support-anexo-chip-icone {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--sup-accent-tint, rgba(52, 211, 153, .12));
    color: var(--sup-accent-deep, #059669);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
}

.support-anexo-chip-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.support-anexo-chip-nome {
    font-weight: 600;
    color: var(--sup-text-heading, #11284d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.support-anexo-chip-tamanho {
    color: var(--sup-text-muted, #8a92a6);
    font-size: .68rem;
}

.support-anexo-chip-status {
    /* flex-direction: column pra erro (texto + link "tentar novamente")
       nunca ficar espremido numa linha só — sem isso (achado real testando
       em browser, SUP-006D.1) o texto de erro vazava pra fora da própria
       caixa (min-width:auto padrão do flexbox) e sobrepunha visualmente o
       botão de remover ao lado, deixando o link de retry impossível de
       clicar. min-width:0 é o que corrige o vazamento; column+wrap é só
       pra não ficar feio com max-width tão estreito. */
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    max-width: 140px;
}

.support-anexo-progresso {
    display: inline-block;
    width: 40px;
    height: 5px;
    border-radius: 999px;
    background: var(--sup-border, #e9ecef);
    overflow: hidden;
}

.support-anexo-progresso-barra {
    display: block;
    height: 100%;
    background: var(--sup-accent, #34d399);
    transition: width .15s linear;
}

.support-anexo-chip-ok {
    color: #059669;
}

.support-anexo-chip-na-fila {
    color: var(--sup-text-muted, #8a92a6);
    font-size: .68rem;
}

.support-anexo-chip-erro-texto {
    color: #ec4561;
    font-size: .68rem;
    white-space: normal;
    overflow-wrap: break-word;
}

.support-anexo-chip-retry {
    color: var(--sup-accent-deep, #059669);
    font-weight: 700;
    font-size: .68rem;
    white-space: nowrap;
}

.support-anexo-chip-remove {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--sup-text-muted, #8a92a6);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
}

.support-anexo-chip-remove:hover,
.support-anexo-chip-remove:focus-visible {
    background: rgba(236, 69, 97, .1);
    color: #ec4561;
}

/* ── Cards de anexo dentro da bolha de mensagem ──────────────── */

.support-anexos-msg {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.support-anexo-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--sup-border, #e9ecef);
    border-radius: 10px;
    background: rgba(0, 0, 0, .02);
    max-width: 100%;
}

.support-anexo-card-icone {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--sup-accent-tint, rgba(52, 211, 153, .12));
    color: var(--sup-accent-deep, #059669);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
}

.support-anexo-card-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.support-anexo-card-nome {
    font-weight: 600;
    font-size: .78rem;
    color: var(--sup-text-heading, #11284d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.support-anexo-card-tamanho {
    font-size: .68rem;
    color: var(--sup-text-muted, #8a92a6);
}

.support-anexo-card-baixar {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--sup-accent-deep, #059669);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.support-anexo-card-baixar:hover,
.support-anexo-card-baixar:focus-visible {
    background: var(--sup-accent-tint, rgba(52, 211, 153, .12));
}

.support-anexo-card-baixar:disabled {
    opacity: .5;
}

@media (max-width: 575.98px) {
    .support-anexo-chip {
        max-width: calc(100vw - 100px);
    }
}

/* ============================================================
   Caixa de Entrada — bandeja de correos entrantes/salientes
   (atendimento@redebrasilcar.net.br). Paleta e estrutura inspiradas no
   .support-* acima (mesmo padrão de 2 colunas), mas escopadas em
   .inbox-* — nenhuma regra daqui afeta Suporte e vice-versa.
   ============================================================ */

.inbox-shell {
    --inb-text-body: #5b626b;
    --inb-text-heading: #11284d;
    --inb-text-muted: #8a92a6;
    --inb-border: #e9ecef;
    --inb-border-soft: #eef0f2;
    --inb-accent: #1565C0;
    --inb-accent-deep: #0D47A1;
    --inb-accent-tint: rgba(21, 101, 192, .10);

    display: flex;
    flex-direction: row;
    height: calc(100vh - 260px);
    min-height: 520px;
    overflow: hidden;
    padding: 0;
}

/* ── Coluna esquerda: lista de conversas ────────────────────── */

.inbox-list-pane {
    flex: 0 0 32%;
    max-width: 32%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--inb-border);
    min-width: 0;
    overflow: hidden;
}

.inbox-list-header {
    flex: 0 0 auto;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--inb-border-soft);
}

.inbox-search {
    position: relative;
}

.inbox-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--inb-text-muted);
    font-size: .85rem;
}

.inbox-search-input {
    padding-left: 34px;
    border-radius: 10px;
}

.inbox-list-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 10px 12px;
}

.inbox-list-footer {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-top: 1px solid var(--inb-border-soft);
}

.inbox-paginacao-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.inbox-paginacao-texto {
    font-size: .78rem;
    color: var(--inb-text-muted);
}

.inbox-hilo-item {
    background: #fff;
    border: 1px solid var(--inb-border);
    border-radius: 12px;
    padding: 12px 13px;
    margin-bottom: 8px;
    cursor: pointer;
    min-width: 0;
    transition: border-color .12s ease, background-color .12s ease;
}

.inbox-hilo-item:hover {
    border-color: var(--inb-accent);
}

.inbox-hilo-item-ativo {
    background: var(--inb-accent-tint);
    border-color: var(--inb-accent);
}

.inbox-hilo-topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.inbox-hilo-nome {
    font-weight: 700;
    font-size: .88rem;
    color: var(--inb-text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-hilo-data {
    flex: 0 0 auto;
    font-size: .72rem;
    color: var(--inb-text-muted);
    white-space: nowrap;
}

.inbox-hilo-assunto {
    font-size: .8rem;
    color: var(--inb-text-body);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-hilo-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 7px;
}

.inbox-hilo-direcao {
    font-size: .72rem;
    color: var(--inb-text-muted);
    font-weight: 600;
}

.inbox-hilo-badge {
    background: #ec4561;
    color: #fff;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    font-size: .68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* ── Coluna direita: conversa ────────────────────────────────── */

.inbox-conv-pane {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #fbfbfc;
}

.inbox-conv-vazio {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--inb-text-muted);
    text-align: center;
}

.inbox-conv-vazio i {
    font-size: 2.4rem;
    margin-bottom: 12px;
    color: #c8cdd4;
}

.inbox-conv-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--inb-border);
    background: #fff;
}

.inbox-conv-voltar {
    display: none;
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--inb-text-muted);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.inbox-conv-header-nome {
    font-weight: 700;
    font-size: .95rem;
    color: var(--inb-text-heading);
}

.inbox-conv-header-email {
    font-size: .76rem;
    color: var(--inb-text-muted);
}

.inbox-conv-mensagens {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.inbox-msg {
    max-width: 74%;
    display: flex;
    flex-direction: column;
}

.inbox-msg-entrante {
    align-self: flex-start;
}

.inbox-msg-saliente {
    align-self: flex-end;
    align-items: flex-end;
}

.inbox-msg-autor {
    font-size: .7rem;
    font-weight: 700;
    color: var(--inb-text-muted);
    margin-bottom: 3px;
}

.inbox-msg-corpo {
    padding: 10px 13px;
    border-radius: 12px 12px 12px 4px;
    background: #fff;
    border: 1px solid var(--inb-border);
    color: var(--inb-text-heading);
    font-size: .87rem;
    word-break: break-word;
}

.inbox-msg-saliente .inbox-msg-corpo {
    background: var(--inb-accent-tint);
    border-color: rgba(21, 101, 192, .28);
    border-radius: 12px 12px 4px 12px;
}

.inbox-msg-corpo p:last-child {
    margin-bottom: 0;
}

.inbox-msg-rodape {
    font-size: .7rem;
    color: var(--inb-text-muted);
    margin-top: 4px;
}

/* ── Anexos em bolha de mensagem ─────────────────────────────── */

.inbox-anexos-msg {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.inbox-anexo-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--inb-border);
    border-radius: 10px;
    padding: 7px 10px;
    max-width: 280px;
}

.inbox-anexo-card-icone {
    flex: 0 0 auto;
    color: var(--inb-accent-deep);
    font-size: 1.1rem;
}

.inbox-anexo-card-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.inbox-anexo-card-nome {
    font-size: .78rem;
    font-weight: 600;
    color: var(--inb-text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-anexo-card-tamanho {
    font-size: .68rem;
    color: var(--inb-text-muted);
}

.inbox-anexo-card-baixar {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--inb-text-muted);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inbox-anexo-card-baixar:hover,
.inbox-anexo-card-baixar:focus-visible {
    background: var(--inb-accent-tint);
    color: var(--inb-accent-deep);
}

/* ── Composer ────────────────────────────────────────────────── */

.inbox-composer {
    flex: 0 0 auto;
    border-top: 1px solid var(--inb-border);
    background: #fff;
    padding: 14px 18px;
}

.inbox-composer-acoes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.inbox-anexos-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.inbox-anexo-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #f7f8fa;
    border: 1px solid var(--inb-border);
    border-radius: 10px;
    padding: 6px 9px;
    max-width: 260px;
}

.inbox-anexo-chip-icone {
    flex: 0 0 auto;
    color: var(--inb-accent-deep);
}

.inbox-anexo-chip-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.inbox-anexo-chip-nome {
    font-size: .74rem;
    font-weight: 600;
    color: var(--inb-text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.inbox-anexo-chip-tamanho {
    font-size: .66rem;
    color: var(--inb-text-muted);
}

.inbox-anexo-chip-status {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.inbox-anexo-progresso {
    width: 46px;
    height: 5px;
    background: var(--inb-border);
    border-radius: 999px;
    overflow: hidden;
    display: inline-block;
}

.inbox-anexo-progresso-barra {
    height: 100%;
    background: var(--inb-accent);
    transition: width .15s ease;
}

.inbox-anexo-chip-ok {
    color: #1a9d5c;
}

.inbox-anexo-chip-erro-texto {
    color: #ec4561;
    font-size: .68rem;
    font-weight: 600;
}

.inbox-anexo-chip-retry {
    color: var(--inb-accent-deep);
    font-weight: 700;
    font-size: .68rem;
    margin-left: 4px;
}

.inbox-anexo-chip-remove {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--inb-text-muted);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
}

.inbox-anexo-chip-remove:hover,
.inbox-anexo-chip-remove:focus-visible {
    background: rgba(236, 69, 97, .12);
    color: #ec4561;
}

@media (max-width: 767.98px) {
    .inbox-shell {
        height: calc(100vh - 220px);
    }

    .inbox-list-pane {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .inbox-conv-pane {
        display: none;
    }

    .inbox-conv-voltar {
        display: inline-flex;
    }

    .inbox-shell[data-view="conversa"] .inbox-list-pane {
        display: none;
    }

    .inbox-shell[data-view="conversa"] .inbox-conv-pane {
        display: flex;
        flex: 1 1 100%;
    }

    .inbox-msg {
        max-width: 88%;
    }
}

/* ============================================================
   Sino global de Suporte no topbar (badge + dropdown)
   Sempre visível (topbar.php, qualquer página) — paleta --sup-accent já
   estabelecida no módulo de Suporte (#34d399), coerente com o boceto
   aprovado (badge verde). Reaproveita .noti-icon do tema (mesmo tamanho/
   hover do botão de tela cheia ao lado).
   ============================================================ */

#supNotifTopbarWrap {
    height: 40px;
    align-self: center;
    margin: 0 8px 0 10px;
    padding: 0 14px 0 18px;
    border: 1.5px solid #10b981;
    border-radius: 999px;
}

.sup-notif-topbar-texto {
    font-size: .8rem;
    font-weight: 600;
    color: #525f80;
    white-space: nowrap;
    margin-right: 2px;
}

body[data-topbar="dark"] .sup-notif-topbar-texto {
    color: #e6f3fb;
}

#supNotifTopbarBtn {
    height: 32px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sup-notif-topbar-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #34d399;
    color: #0b3b35;
    font-size: .64rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}

.sup-notif-topbar-menu {
    /* largura fixa: sem ela o menu absoluto toma a largura do texto (nowrap) e estoura para fora da tela */
    width: 360px;
    min-width: 320px;
    max-width: calc(100vw - 24px);
    max-height: 420px;
    overflow-y: auto;
    padding: 8px 0;
}

.sup-notif-topbar-header {
    padding: 6px 16px 10px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--sup-text-heading, #11284d);
    text-transform: none;
}

.sup-notif-topbar-vazio {
    padding: 16px;
    text-align: center;
    font-size: .82rem;
    color: var(--sup-text-muted, #8a92a6);
}

.sup-notif-topbar-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 16px;
    white-space: normal;
}

.sup-notif-topbar-item-icone {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(52, 211, 153, .12);
    color: #059669;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-top: 2px;
}

.sup-notif-topbar-item-corpo {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.sup-notif-topbar-item-titulo {
    font-size: .84rem;
    font-weight: 700;
    color: var(--sup-text-heading, #11284d);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sup-notif-topbar-item-sub {
    font-size: .78rem;
    color: var(--sup-text-body, #5b626b);
    overflow: hidden;
    text-overflow: ellipsis;
    /* até 2 linhas, em vez de uma linha cortada */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow-wrap: anywhere;
}

.sup-notif-topbar-item-tempo {
    font-size: .7rem;
    color: var(--sup-text-muted, #8a92a6);
    margin-top: 2px;
}

.sup-notif-topbar-ver-todas {
    font-size: .8rem;
    font-weight: 700;
    color: #059669;
}

@media (max-width: 575.98px) {
    .sup-notif-topbar-menu {
        width: calc(100vw - 24px);
        min-width: 280px;
    }
}

/* ============================================================
   Operador — indicador "Tomado por X" en la fila de la tabla
   (candado de concurrencia). Ícono ti-lock, mismo tono que el header
   ti-headset text-warning del propio módulo.
   ============================================================ */
.op-tomada-indicador {
    display: inline-block;
    white-space: normal;
    font-size: .74rem;
    font-weight: 600;
    color: #8a6108;
    background: rgba(248, 180, 37, .16);
    border-radius: 4px;
    padding: 3px 7px;
    line-height: 1.3;
}

/* ============================================================
   Sino global de Operador no topbar (badge + dropdown) — mesma estrutura
   do sino de Soporte, paleta âmbar (#f8b425, --bs-warning do tema) pra
   nunca se confundir visualmente com o verde de Soporte (pedido explícito
   do usuário). Só renderiza server-side pra quem tem acesso à vista
   'operador' (ver topbar.php).
   ============================================================ */

#opNotifTopbarWrap {
    height: 40px;
    align-self: center;
    margin: 0 8px 0 10px;
    padding: 0 14px 0 18px;
    border: 1.5px solid #f8b425;
    border-radius: 999px;
}

.op-notif-topbar-texto {
    font-size: .8rem;
    font-weight: 600;
    color: #525f80;
    white-space: nowrap;
    margin-right: 2px;
}

body[data-topbar="dark"] .op-notif-topbar-texto {
    color: #e6f3fb;
}

#opNotifTopbarBtn {
    height: 32px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.op-notif-topbar-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #f8b425;
    color: #0a1a33;
    font-size: .64rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}

.op-notif-topbar-menu {
    min-width: 320px;
    max-width: calc(100vw - 24px);
    max-height: 420px;
    overflow-y: auto;
    padding: 8px 0;
}

.op-notif-topbar-header {
    padding: 6px 16px 10px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--sup-text-heading, #11284d);
    text-transform: none;
}

.op-notif-topbar-vazio {
    padding: 16px;
    text-align: center;
    font-size: .82rem;
    color: var(--sup-text-muted, #8a92a6);
}

.op-notif-topbar-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 16px;
    white-space: normal;
}

.op-notif-topbar-item-icone {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(248, 180, 37, .15);
    color: #8a6108;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-top: 2px;
}

.op-notif-topbar-item-corpo {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.op-notif-topbar-item-titulo {
    font-size: .82rem;
    font-weight: 600;
    color: var(--sup-text-heading, #11284d);
    white-space: normal;
}

.op-notif-topbar-item-tempo {
    font-size: .7rem;
    color: var(--sup-text-muted, #8a92a6);
    margin-top: 2px;
}

.op-notif-topbar-ver-todas {
    font-size: .8rem;
    font-weight: 700;
    color: #8a6108;
}

@media (max-width: 575.98px) {
    .op-notif-topbar-menu {
        min-width: 280px;
    }
}

/* ============================================================
   PWA App Shell móvil (Portal Cliente/Representante) — SOLO cuando
   SesionHelper::esPortalMobile() agrega la clase .app-shell-mobile al
   <body> (ver body.php/template.php). Cero impacto en Admin/Staff: todas
   las reglas de esta sección quedan escapadas bajo ese selector.
   Paleta tomada de los mockups aprobados, en la misma familia de tono que
   el verde de marca ya existente (#10b981) para quedar coherente con el
   resto del sistema.
   ============================================================ */

/* O app-shell (header móvel + bottom-nav) só aparece em telas de celular
   (<768px) — em desktop, um Cliente/Representante continua vendo o
   topbar/topnav normal, sem nenhuma mudança. Acima de 768px o header
   móvel e o bottom-nav ficam ocultos por padrão (regras aqui fora do
   media query); dentro do breakpoint, trocam de lugar com o chrome de
   desktop. */

.app-mobile-header,
.app-bottom-nav,
.app-home-mobile-list,
.ahm-fab,
.ahm-sync {
    display: none;
}

@media (max-width: 767.98px) {
    body.app-shell-mobile {
        padding-bottom: 76px; /* espaço reservado pro bottom-nav fixo não tapar conteúdo */
    }

    body.app-shell-mobile #page-topbar,
    body.app-shell-mobile .topnav {
        display: none;
    }

    /* .page-content reserva padding-top pro #page-topbar/.topnav fixos do
       desktop, escondidos acima — sem esse ajuste sobra um espaço vazio
       enorme no topo em toda página sem o aviso de fatura pendente (que
       tem seu próprio override pra esse padding só quando aparece). */
    body.app-shell-mobile .page-content {
        padding-top: 10px !important;
    }

    /* .container-fluid usa var(--bs-gutter-x, 3rem) — o fallback de 3rem
       é uma build customizada deste projeto (o padrão oficial do
       Bootstrap é 0.75rem), pensada pro respiro generoso do desktop; num
       viewport de celular isso sobra como margem lateral enorme. Reduz só
       aqui pro terreno de um app mobile (pedido do usuário, 2026-09-07,
       mockup como referência só de espaçamento) — os cards móveis
       (.ahm-card, .pf-mobile-dados, .cns-saldo-mobile etc.) não têm
       margem lateral própria, então herdam esse valor direto. */
    body.app-shell-mobile .page-content > .container-fluid {
        --bs-gutter-x: 1rem !important;
    }

    /* KPI cards do Início (Total/Nada Consta/Restrição/Sem Resposta) —
       col-6 col-md-3 dá 2x2 no mobile; pedido do usuário (2026-09-07,
       mockup como referência) é cada card ocupar a linha inteira. */
    body.app-shell-mobile .kpi-col {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    body.app-shell-mobile .app-mobile-header {
        display: block;
    }

    body.app-shell-mobile .app-bottom-nav {
        display: flex;
    }

    body.app-shell-mobile .app-home-desktop-list {
        display: none;
    }

    body.app-shell-mobile .app-home-mobile-list,
    body.app-shell-mobile .ahm-fab,
    body.app-shell-mobile .ahm-sync {
        display: block;
    }

    /* Aviso de fatura pendente — no desktop o padding-top:124px inline
       compensa o topbar/topnav fixos; no App Shell móvel isso sobra como
       espaço em branco enorme (header móvel já ocupa seu espaço no fluxo
       normal). !important é necessário pra vencer os estilos inline do
       partial (pedido do usuário, 2026-09-07, mockup como referência só
       de espaçamento — texto e link continuam os mesmos). */
    body.app-shell-mobile .afp-wrap {
        padding-top: 12px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: .5rem !important;
    }

    body.app-shell-mobile .afp-alert {
        padding: .75rem 1rem !important;
        gap: 10px !important;
    }

    body.app-shell-mobile .afp-alert > i {
        font-size: 1.35rem !important;
    }

    body.app-shell-mobile .afp-alert > div {
        font-size: .82rem !important;
        line-height: 1.45 !important;
    }

    body.app-shell-mobile .afp-alert > div strong {
        font-size: .95rem !important;
    }
}

/* ── Header móvel (logo + Instalar + avatar + empresa/data) ──── */

.app-mobile-header {
    background: linear-gradient(160deg, #064e3b 0%, #14584a 100%);
    color: #fff;
    padding-top: env(safe-area-inset-top, 0px);
}

.amh-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 10px;
}

.amh-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.amh-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.amh-brand-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: -.01em;
}

.amh-brand-name b {
    color: #fbbf24;
    font-weight: 800;
}

.amh-brand-sub {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .65);
}

.amh-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.amh-install-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(16, 185, 129, .18);
    border: 1px solid rgba(16, 185, 129, .55);
    color: #7fe0c0;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: .72rem;
    font-weight: 700;
}

.amh-install-btn i {
    font-size: .85rem;
}

.amh-notif-wrap {
    display: flex;
    align-items: center;
}

.amh-notif-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(16, 185, 129, .18);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    position: relative;
    flex-shrink: 0;
}

.amh-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #10b981;
    color: #064e3b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .74rem;
    font-weight: 800;
    text-decoration: none;
}

.amh-avatar:hover,
.amh-avatar:focus,
.amh-avatar:visited {
    color: #064e3b;
    text-decoration: none;
}

.amh-logout {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(220, 38, 38, .16);
    color: #f87171;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Fixo (sticky) ao rolar em todas as páginas do App Shell móvel — pedido
   do usuário (2026-09-07); antes só ficava fixo na Início. */
@media (max-width: 767.98px) {
    body.app-shell-mobile .app-mobile-header.amh-fixo {
        position: sticky;
        top: 0;
        z-index: 1020;
    }
}

/* ── Bottom navigation fija ─────────────────────────────────── */

.app-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: #ffffff;
    border-top: 1px solid #e9ecef;
    box-shadow: 0 -2px 14px rgba(15, 61, 52, .08);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}

.app-bottom-nav-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    color: #98a2b3;
    text-decoration: none;
    font-size: .66rem;
    font-weight: 600;
    position: relative;
    min-height: 44px;
}

.app-bottom-nav-item i {
    font-size: 1.35rem;
    line-height: 1;
}

.app-bottom-nav-item.active {
    color: #0f9d69;
}

.app-bottom-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #0f9d69;
}

/* ── Home móvel — busca + lista de tarjetas "Consultas recentes" ── */

.ahm-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 999px;
    padding: 10px 16px;
    margin-bottom: 16px;
    color: #98a2b3;
}

.ahm-search-box i {
    font-size: 1rem;
    flex-shrink: 0;
}

.ahm-search-box input {
    border: none;
    outline: none;
    flex: 1 1 auto;
    font-size: .85rem;
    color: #344054;
    background: transparent;
    min-width: 0;
}

.ahm-section-title {
    font-size: .8rem;
    font-weight: 700;
    color: #475467;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 10px;
}

.ahm-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 0;
    color: #98a2b3;
    font-size: .85rem;
}

.ahm-vazio i {
    font-size: 1.8rem;
}

.ahm-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ahm-card {
    display: flex;
    gap: 12px;
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 2px 10px rgba(15, 61, 52, .06);
}

.ahm-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(15, 61, 52, .07);
    color: #064e3b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.ahm-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.ahm-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ahm-card-title {
    font-size: .88rem;
    font-weight: 700;
    color: #1d2939;
}

.ahm-card-plate {
    font-size: .66rem;
    font-weight: 700;
    background: #eef2ff;
    color: #3538cd;
    border-radius: 5px;
    padding: 1px 6px;
    letter-spacing: .02em;
}

.ahm-card-cliente {
    font-size: .76rem;
    color: #667085;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ahm-card-time {
    font-size: .74rem;
    color: #98a2b3;
    margin-top: 2px;
}

.ahm-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

.ahm-pill {
    font-size: .68rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 3px 10px;
}

.ahm-pill-ok    { background: #d1fadf; color: #067647; }
.ahm-pill-alert { background: #fee4e2; color: #c01048; }
.ahm-pill-proc  { background: #fef0c7; color: #b54708; }
.ahm-pill-err   { background: #eaecf0; color: #475467; }
.ahm-pill-comp  { background: #d1e0ff; color: #1b3a5c; }

.ahm-card-link {
    font-size: .76rem;
    font-weight: 700;
    color: #0f9d69;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    /* agora é um <button> (não <a href>) — o download roda num iframe
       oculto same-window, nunca navega o app pra lugar nenhum (ver
       baixarRelatorioConsulta() em funciones-globales.js) */
    border: none;
    background: transparent;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.ahm-card-link i {
    font-size: .85rem;
}

/* ── FAB "Nova Consulta" + rodapé de sincronização ───────────── */

.ahm-fab {
    position: fixed;
    right: 16px;
    bottom: 92px;
    z-index: 1025;
    display: none;
    align-items: center;
    gap: 6px;
    background: #0f9d69;
    color: #fff;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 12px 18px;
    box-shadow: 0 8px 20px rgba(15, 157, 105, .35);
}

.ahm-fab i {
    font-size: 1rem;
}

.ahm-sync {
    text-align: center;
    font-size: .74rem;
    color: #0f9d69;
    font-weight: 600;
    margin: 4px 0 18px;
}

.ahm-sync i {
    margin-right: 3px;
}

@media (max-width: 767.98px) {
    body.app-shell-mobile .ahm-fab {
        display: flex;
    }
}

/* ============================================================
   Nova Consulta móvil (view/assets/pages/consultas.php) — reskin
   puramente visual sobre os MESMOS elementos reais (sem tocar
   consultas.js): cabeçalho do produto, radios de tipo de documento,
   input de documento, botão de envio. Duas opções do mockup original
   NÃO têm equivalente real no sistema (fotos de leilão +R$5, aviso via
   WhatsApp) — omitidas de propósito, nunca inventadas.
   ============================================================ */

.cns-saldo-mobile {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    background: #f0fdf9;
    border: 1px solid rgba(15, 157, 105, .25);
    border-radius: 16px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.cns-saldo-mobile-icone {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(15, 157, 105, .12);
    color: #0f9d69;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.cns-saldo-mobile-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 140px;
    min-width: 140px;
}

.cns-saldo-mobile-label {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #667085;
    white-space: nowrap;
}

.cns-saldo-mobile-valor {
    font-size: 1.05rem;
    font-weight: 800;
    color: #064e3b;
    white-space: nowrap;
}

.cns-saldo-mobile-pill {
    font-size: .68rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 3px 10px;
    flex-shrink: 0;
}

.cns-saldo-mobile-pill.suficiente {
    background: #d1fadf;
    color: #067647;
}

.cns-saldo-mobile-pill.insuficiente {
    background: #fee4e2;
    color: #c01048;
}

@media (max-width: 767.98px) {
    body.app-shell-mobile .cns-saldo-mobile {
        display: flex;
    }

    /* Cabeçalho do produto — cartão em vez de linha simples. flex-wrap pra
       o preço cair numa segunda linha em vez de espremer o nome (achado
       real: com os 3 na mesma linha, o nome ficava com 2-3 caracteres
       visíveis num viewport de celular). */
    body.app-shell-mobile #cnsFormPanel > .d-flex.align-items-center.gap-3.mb-4 {
        background: #fff;
        border: 1px solid #e9ecef !important;
        border-radius: 16px;
        padding: 14px;
        flex-wrap: wrap;
    }

    body.app-shell-mobile #cnsFormPanel > .d-flex.align-items-center.gap-3.mb-4 > .flex-grow-1 {
        flex-basis: calc(100% - 60px);
    }

    body.app-shell-mobile #cnsFormPanel > .d-flex.align-items-center.gap-3.mb-4 > .text-end {
        flex: 1 1 100%;
        text-align: left !important;
        margin-top: 6px;
    }

    body.app-shell-mobile .cns-pro-icono-box {
        background: rgba(15, 61, 52, .07);
        color: #064e3b;
    }

    body.app-shell-mobile #cnsProPrecio {
        background: #0f9d69 !important;
        border-radius: 999px;
    }

    /* Radios de tipo de documento — como pills/abas, não checkbox em linha */
    body.app-shell-mobile #cnsTipoDocRadios {
        gap: 8px !important;
    }

    body.app-shell-mobile #cnsTipoDocRadios .form-check {
        margin: 0;
        padding: 0;
    }

    body.app-shell-mobile #cnsTipoDocRadios .form-check-input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    body.app-shell-mobile #cnsTipoDocRadios .form-check-label {
        display: block;
        border: 1.5px solid #e9ecef;
        border-radius: 999px;
        padding: 7px 16px;
        font-size: .8rem;
        font-weight: 600;
        color: #667085;
        cursor: pointer;
    }

    body.app-shell-mobile #cnsTipoDocRadios .form-check-input:checked + .form-check-label {
        border-color: #0f9d69;
        background: #0f9d69;
        color: #fff;
    }

    /* Input de documento — mais alto/destacado (sem gráfico de placa
       específico — simplificação deliberada, funciona pra qualquer tipo
       de documento sem precisar ler o estado interno de consultas.js) */
    body.app-shell-mobile #cnsDocumento {
        height: 56px;
        font-size: 1.15rem;
        font-weight: 700;
        border-radius: 14px;
        border-color: #d0d5dd;
    }

    body.app-shell-mobile #btnConsultarProcesar {
        border-radius: 999px;
        background: #0f9d69;
        border-color: #0f9d69;
        /* precisa sobrescrever a cor do texto também — o botão original
           usa color:var(--cns-orange), que apesar do nome é um teal
           (#10b981) quase igual ao verde de fundo daqui, ficando sem
           contraste (achado real 2026-09-07: texto/ícone "desbotados"
           no fundo verde). Mesmo branco já usado no .ahm-fab. */
        color: #fff;
        padding: 14px;
        font-weight: 700;
    }

    body.app-shell-mobile #btnConsultarProcesar:hover:not(:disabled) {
        color: #fff;
    }
}

/* ============================================================
   Perfil móvel (view/assets/pages/perfil.php) — reskin visual com
   dados reais (cliente/representante/suscripcion já resolvidos em PHP).
   "Cliente VIP" e "Tempo médio de resposta" do mockup NÃO existem no
   sistema — omitidos de propósito, nunca inventados.
   ============================================================ */

.pf-mobile-dados,
.pf-mobile-suporte {
    display: none;
}

@media (max-width: 767.98px) {
    body.app-shell-mobile .pf-mobile-dados,
    body.app-shell-mobile .pf-mobile-suporte {
        display: block;
    }
}

.pf-mobile-dados {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.pf-mobile-dados-header {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #475467;
    margin-bottom: 10px;
}

.pf-mobile-dados-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid #f2f4f7;
}

.pf-mobile-dados-row:first-of-type {
    border-top: none;
}

.pf-mobile-dados-row i {
    color: #0f9d69;
    font-size: 1rem;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.pf-mobile-dados-label {
    font-size: .78rem;
    color: #667085;
    flex-shrink: 0;
    min-width: 80px;
}

.pf-mobile-dados-valor {
    font-size: .84rem;
    font-weight: 700;
    color: #1d2939;
    margin-left: auto;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-mobile-dados-pill {
    display: inline-block;
    font-size: .62rem;
    font-weight: 700;
    background: #eef2ff;
    color: #3538cd;
    border-radius: 999px;
    padding: 2px 8px;
    margin-left: 6px;
    text-transform: uppercase;
}

/* ── Canal de Suporte ─────────────────────────────────────────── */

.pf-mobile-suporte-titulo {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #475467;
    margin-bottom: 10px;
}

.pf-mobile-suporte-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(160deg, #064e3b 0%, #14584a 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 10px;
}

.pf-mobile-suporte-icone {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.pf-mobile-suporte-texto {
    flex: 1 1 auto;
    font-size: .92rem;
    font-weight: 700;
}

.pf-mobile-suporte-btn {
    display: flex;
    align-items: center;
    gap: 3px;
    background: #10b981;
    color: #064e3b;
    font-size: .74rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 6px 12px;
    flex-shrink: 0;
}

.pf-mobile-suporte-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 14px;
    padding: 12px 14px;
    text-decoration: none;
    margin-bottom: 8px;
}

.pf-mobile-suporte-item-icone {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(15, 61, 52, .07);
    color: #064e3b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.pf-mobile-suporte-item-texto {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pf-mobile-suporte-item-titulo {
    font-size: .85rem;
    font-weight: 700;
    color: #1d2939;
}

.pf-mobile-suporte-item-sub {
    font-size: .74rem;
    color: #667085;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-mobile-suporte-item > i {
    color: #98a2b3;
    flex-shrink: 0;
}

/* ============================================================
   "Consultas do Dia" embutida em Nova Consulta (consultas.php) — modo
   cartão pro App Shell móvel. Reusa o MESMO .ahm-card/.ahm-pill de
   home.php (dados/regras montados em consultas-dia.js, drawCallback do
   DataTable). #cnsConsultasDiaSecao só existe nessa página — a tela
   "Relatório"/Consultas do Dia standalone (consultas-dia.php) não tem
   esse id nem o container de cartões, então continua com a tabela
   normal, sem nenhuma mudança. Só a paginação nativa do DataTables
   (.dataTables_paginate) fica visível — pedido do usuário (2026-09-07):
   20 registros por página, com paginação, sem "parecer" datatable.
   ============================================================ */

#cnsConsultasDiaCartoes {
    display: none;
}

@media (max-width: 767.98px) {
    body.app-shell-mobile #cnsConsultasDiaCartoes {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 12px;
    }

    body.app-shell-mobile #cnsConsultasDiaSecao .dataTables_length,
    body.app-shell-mobile #cnsConsultasDiaSecao .dataTables_filter,
    body.app-shell-mobile #cnsConsultasDiaSecao .dataTables_info,
    body.app-shell-mobile #cnsConsultasDiaSecao table.dt-consultas-dia {
        display: none !important;
    }

    body.app-shell-mobile #cnsConsultasDiaSecao .dataTables_paginate {
        display: flex;
        justify-content: center;
        margin-top: 4px;
    }
}

/* ============================================================
   Informe de Consultas (view/assets/pages/informe-consultas.php) — "Relatório"
   do Cliente. Mesmo modo cartão de "Consultas do Dia" acima: filtros
   continuam visíveis (já empilham bem em telas estreitas), só a tabela de
   resultados vira cartões, com a paginação nativa do DataTables.
   ============================================================ */

#infConsultasCartoes {
    display: none;
}

@media (max-width: 767.98px) {
    body.app-shell-mobile #infConsultasCartoes {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 12px;
    }

    body.app-shell-mobile #infTabelaWrap .dataTables_length,
    body.app-shell-mobile #infTabelaWrap .dataTables_filter,
    body.app-shell-mobile #infTabelaWrap .dataTables_info,
    body.app-shell-mobile #infTabelaWrap table.dt-informe-consultas {
        display: none !important;
    }

    body.app-shell-mobile #infTabelaWrap .dataTables_paginate {
        display: flex;
        justify-content: center;
        margin-top: 4px;
    }

    /* Select2 "Cliente" — pra Cliente é sempre um único option desabilitado
       com o próprio nome (ver informe-consultas.js, cargarClientesFiltro());
       o padrão do select2 é truncar com "..." numa linha só, cortando nomes
       compridos (achado real 2026-09-07). Deixa quebrar linha, igual ao
       cartão "Cliente Selecionado" de Faturas. */
    body.app-shell-mobile #filtroClienteInf + .select2-container .select2-selection--single {
        height: auto;
        min-height: 38px;
    }

    body.app-shell-mobile #filtroClienteInf + .select2-container .select2-selection__rendered {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        word-break: break-word;
        line-height: 1.3;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    body.app-shell-mobile #filtroClienteInf + .select2-container .select2-selection__arrow {
        top: 50%;
        transform: translateY(-50%);
    }
}

/* ============================================================
   Faturas (view/assets/pages/facturas.php) — "Financeiro" do Cliente no
   App Shell móvel. Layout calcado do mockup aprovado (cartão "Cliente
   selecionado", resumo Pendente/Pago, abas, busca por N° fatura) — dados
   e ações 100% reais (fac_estado, fac_monto, botões Pagar/PDF já
   existentes em facturas.js). Textos como "Aguardando Liquidação" ou
   "Autenticado" do mockup NÃO existem no sistema — omitidos de propósito.
   ============================================================ */

#facMobileHeader {
    display: none;
}

@media (max-width: 767.98px) {
    body.app-shell-mobile #facMobileHeader {
        display: block;
    }

    body.app-shell-mobile #facFiltrosDesktop,
    body.app-shell-mobile #facTabelaWrap .dataTables_length,
    body.app-shell-mobile #facTabelaWrap .dataTables_filter,
    body.app-shell-mobile #facTabelaWrap .dataTables_info,
    body.app-shell-mobile #facTabelaWrap table.dt-facturas {
        display: none !important;
    }

    body.app-shell-mobile #facTabelaWrap .dataTables_paginate {
        display: flex;
        justify-content: center;
        margin-top: 4px;
    }
}

.afc-cliente-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.afc-cliente-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #e6f7f1;
    color: #0f9d69;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.afc-cliente-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.afc-cliente-nome {
    font-size: .92rem;
    font-weight: 700;
    color: #1d2939;
    white-space: normal;
    overflow-wrap: break-word;
}

.afc-cliente-contrato {
    font-size: .74rem;
    color: #0f9d69;
    font-weight: 600;
}

.afc-resumo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.afc-resumo-card {
    background: #fff;
    border-radius: 14px;
    padding: 12px 14px;
    border-left: 4px solid transparent;
    box-shadow: 0 2px 10px rgba(15, 61, 52, .06);
}

.afc-resumo-pendente {
    border-left-color: #f79009;
}

.afc-resumo-pago {
    border-left-color: #12b76a;
}

.afc-resumo-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #98a2b3;
    margin-bottom: 4px;
}

.afc-resumo-valor {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1d2939;
}

.afc-resumo-sub {
    font-size: .68rem;
    font-weight: 600;
    color: #98a2b3;
    margin-top: 2px;
    min-height: 1em;
}

.afc-resumo-pendente .afc-resumo-sub:not(:empty) {
    color: #b54708;
}

.afc-resumo-pago .afc-resumo-sub:not(:empty) {
    color: #0f9d69;
}

.afc-tabs {
    display: flex;
    gap: 6px;
    margin: 12px 0;
    overflow-x: auto;
}

.afc-tab {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: #667085;
    font-size: .8rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

.afc-tab.active {
    background: #064e3b;
    color: #fff;
}

.afc-card {
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: 0 2px 10px rgba(15, 61, 52, .06);
}

.afc-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.afc-card-id {
    font-size: .72rem;
    color: #98a2b3;
}

.afc-card-numero {
    font-size: .88rem;
    font-weight: 700;
    color: #1d2939;
    flex: 1 1 auto;
}

.afc-card-contrato {
    font-size: .76rem;
    color: #667085;
    margin-bottom: 8px;
}

.afc-card-mid {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
    border-top: 1px dashed #e9ecef;
    padding-top: 10px;
    margin-bottom: 10px;
}

.afc-card-periodo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.afc-card-label {
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #98a2b3;
}

.afc-card-periodo-valor {
    font-size: .86rem;
    font-weight: 700;
    color: #1d2939;
}

.afc-card-venc {
    font-size: .72rem;
    color: #667085;
}

.afc-card-valor {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    text-align: right;
}

.afc-card-valor-num {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1d2939;
}

.afc-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.afc-btn-pagar,
.afc-btn-pdf {
    border: none;
    border-radius: 10px;
    padding: 10px;
    font-size: .84rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.afc-btn-pagar {
    background: #0f9d69;
    color: #fff;
}

.afc-btn-pdf {
    background: #fff5f5;
    color: #c0392b;
    border: 1px solid #fecdd3;
}