/* ==========================================================================
   Atentus Messaging Hub — tema "Console"
   Tokens: azul corporativo (estrutura) + cinza-azulado (neutros)
            + laranja (único acento, reservado para CTA e moldura do QR)
   ========================================================================== */

:root{
    --ink:        #101826;
    --navy:       #14304F;
    --navy-2:     #1B3E63;
    --canvas:     #F3F5F9;
    --paper:      #FFFFFF;
    --line:       #E1E5EC;
    --line-dark:  rgba(255,255,255,.10);
    --muted:      #64748B;

    --blue:       #2C5F94;
    --blue-hi:    #3C77B4;
    --blue-tint:  #EAF1F8;

    --orange:      #D9752A;
    --orange-hi:   #E88C46;
    --orange-dark: #B25E1E;
    --orange-tint: #FCEEE1;

    --ok:         #2E9E6E;
    --ok-bg:      #E7F4EE;
    --pending:    #D9A441;
    --pending-bg: #FBF1DF;
    --danger:     #C1443D;
    --danger-bg:  #FBEAE9;

    --font-display: 'Space Grotesk', 'Inter', sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

    --radius:      14px;
    --radius-sm:   8px;
}

*{ box-sizing: border-box; }

body{
    background: var(--canvas);
    font-family: var(--font-body);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .navbar-brand{
    font-family: var(--font-display);
    letter-spacing: -.01em;
}

/* ---------- Navbar ---------------------------------------------------- */

.navbar.bg-dark{
    background: linear-gradient(135deg, var(--ink) 0%, var(--navy) 65%, var(--navy-2) 100%) !important;
    border-bottom: 1px solid var(--line-dark);
    padding-top: .85rem;
    padding-bottom: .85rem;
}

.navbar-brand{
    font-weight: 600;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: .55rem;
}

.navbar-brand::after{
    content: 'CONSOLE';
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .18em;
    color: #A9C6E3;
    border: 1px solid var(--line-dark);
    padding: .2rem .45rem;
    border-radius: 100px;
    margin-left: .35rem;
}

/* ---------- Cards ------------------------------------------------------ */

.card{
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(15,23,32,.04);
}

.card-header{
    background: transparent;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    padding: .95rem 1.15rem;
}

.card-body{
    padding: 1.4rem 1.15rem;
}

/* ---------- Botão "+ Nova" ---------------------------------------------- */

#btnNewInstance{
    background: var(--blue);
    border: none;
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .35rem .85rem;
    border-radius: 100px;
    transition: background .15s ease;
}
#btnNewInstance:hover{ background: var(--navy-2); }

/* ---------- Lista de instâncias ---------------------------------------- */

#instances{ border: none; }

.list-group-item{
    cursor: pointer;
    border: none;
    border-bottom: 1px solid var(--line);
    border-left: 3px solid transparent;
    background: var(--paper);
    padding: .85rem 1.15rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    transition: background .15s ease, border-color .15s ease;
}

.list-group-item:hover{
    background: #F7F9FC;
}

.list-group-item.active-instance{
    background: var(--blue-tint);
    border-left-color: var(--blue);
}
.list-group-item.active-instance .instance-name{
    color: var(--navy);
    font-weight: 500;
}

/* dot de status à esquerda do nome */
.status-dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px transparent;
}
.list-group-item[data-status="online"]  .status-dot{ background: var(--ok); }
.list-group-item[data-status="pending"] .status-dot{ background: var(--pending); animation: pulseDot 1.6s infinite; }
.list-group-item[data-status="offline"] .status-dot{ background: var(--danger); }

.instance-name{
    font-family: var(--font-mono);
    font-size: .88rem;
    color: var(--ink);
    flex: 1;
}

.status-pill{
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .18rem .5rem;
    border-radius: 100px;
    color: var(--muted);
    background: var(--canvas);
}
.list-group-item[data-status="online"]  .status-pill{ color: var(--ok);      background: var(--ok-bg); }
.list-group-item[data-status="pending"] .status-pill{ color: var(--pending); background: var(--pending-bg); }
.list-group-item[data-status="offline"] .status-pill{ color: var(--danger);  background: var(--danger-bg); }

/* ---------- Painel de status --------------------------------------------- */

#instanceName{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.4rem;
}

#status{
    font-family: var(--font-mono);
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .15rem .55rem;
    border-radius: var(--radius-sm);
    background: var(--blue-tint);
    color: var(--navy);
}

/* ---------- Botões de ação --------------------------------------------- */

#btnStart, #btnDisconnect, #btnDelete{
    border: none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .8rem;
    padding: .45rem 1rem;
    border-radius: 100px;
    margin-right: .5rem;
    transition: all .15s ease;
}

#btnStart{
    background: var(--orange);
    color: #fff;
}
#btnStart:hover{ background: var(--orange-dark); }

#btnDisconnect{
    background: transparent;
    color: var(--navy);
    border: 1px solid var(--line);
}
#btnDisconnect:hover{ background: var(--blue-tint); border-color: var(--blue); color: var(--blue); }

#btnDelete{
    background: transparent;
    color: var(--danger);
    border: 1px solid transparent;
}
#btnDelete:hover{ background: var(--danger-bg); }

/* ---------- Moldura do QR (elemento de assinatura) ---------------------- */

.qr-frame{
    position: relative;
    display: inline-block;
    padding: 22px;
    margin-top: .5rem;
}

.qr-frame .corner{
    position: absolute;
    width: 22px;
    height: 22px;
    border: 2px solid var(--orange);
}
.qr-frame .corner.tl{ top: 0;    left: 0;   border-right: none;  border-bottom: none; border-top-left-radius: 6px; }
.qr-frame .corner.tr{ top: 0;    right: 0;  border-left: none;   border-bottom: none; border-top-right-radius: 6px; }
.qr-frame .corner.bl{ bottom: 0; left: 0;   border-right: none;  border-top: none;    border-bottom-left-radius: 6px; }
.qr-frame .corner.br{ bottom: 0; right: 0;  border-left: none;   border-top: none;    border-bottom-right-radius: 6px; }

.qr-frame.scanning .corner{ animation: cornerPulse 1.8s ease-in-out infinite; }

#qr{
    border: 8px solid white;
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(15,23,32,.12);
    display: block;
}

/* ---------- Animações (respeitam prefers-reduced-motion) ---------------- */

@keyframes pulseDot{
    0%, 100% { box-shadow: 0 0 0 0 rgba(217,164,65,.45); }
    50%      { box-shadow: 0 0 0 4px rgba(217,164,65,0); }
}

@keyframes cornerPulse{
    0%, 100% { opacity: 1;  }
    50%      { opacity: .35; }
}

@media (prefers-reduced-motion: reduce){
    .status-dot, .qr-frame .corner{ animation: none !important; }
}

/* ---------- Foco visível (acessibilidade) -------------------------------- */

button:focus-visible,
.list-group-item:focus-visible,
input:focus-visible{
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* ---------- Navegação e mensageria --------------------------------------- */

.dashboard-shell{ max-width: 1680px; padding-inline: clamp(1rem, 3vw, 2.5rem); }
.dashboard-section{ display: none; }
.dashboard-section.active{ display: block; }
.dashboard-nav{ display: flex; gap: .35rem; padding: .25rem; border: 1px solid var(--line-dark); border-radius: 100px; }
.dashboard-nav-btn{ border: 0; background: transparent; color: #BFD0E1; padding: .38rem .85rem; border-radius: 100px; font-size: .78rem; font-weight: 600; }
.dashboard-nav-btn:hover, .dashboard-nav-btn.active{ background: rgba(255,255,255,.12); color: #fff; }
.section-title{ font-size: 1.45rem; font-weight: 650; }

.metric-grid{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .85rem; }
.metric-card{ background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; min-width: 0; }
.metric-card span, .metric-card small{ display: block; color: var(--muted); }
.metric-card span{ font-family: var(--font-mono); font-size: .67rem; letter-spacing: .08em; text-transform: uppercase; }
.metric-card strong{ display: block; margin: .25rem 0; font-size: 1.65rem; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric-card small{ font-size: .72rem; }

.form-label{ color: var(--muted); font-size: .76rem; font-weight: 600; }
.consent-box{ background: var(--blue-tint); border: 1px solid #D9E6F2; border-radius: var(--radius-sm); padding: .8rem; }
.delivery-table{ font-size: .8rem; }
.delivery-table thead th{ color: var(--muted); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; border-bottom-width: 1px; white-space: nowrap; }
.delivery-table tbody td{ border-color: var(--line); }
.delivery-status{ display: inline-block; padding: .22rem .48rem; border-radius: 100px; background: var(--canvas); color: var(--muted); font-family: var(--font-mono); font-size: .62rem; font-weight: 600; white-space: nowrap; }
.status-read, .status-delivered, .status-sent, .status-ativo{ background: var(--ok-bg); color: var(--ok); }
.status-queued, .status-processing, .status-retrying, .status-provider_accepted{ background: var(--pending-bg); color: #926A18; }
.status-failed, .status-expired, .status-canceled, .status-revogado, .status-suprimido{ background: var(--danger-bg); color: var(--danger); }
.status-ready, .status-ativa{ background: var(--ok-bg); color: var(--ok); }
.status-connecting, .status-qr_received, .status-authenticated, .status-pausada, .status-suspect, .status-recovering, .status-unknown{ background: var(--pending-bg); color: #926A18; }
.status-degraded{ background: var(--danger-bg); color: var(--danger); }

.detail-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.detail-grid > div{ border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .75rem; min-width: 0; }
.detail-grid small, .detail-grid strong{ display: block; }
.detail-grid small{ color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.detail-grid strong{ margin-top: .25rem; font-family: var(--font-mono); font-size: .78rem; overflow-wrap: anywhere; }
.delivery-timeline{ position: relative; margin-left: .5rem; }
.timeline-event{ display: grid; grid-template-columns: 18px 1fr; gap: .75rem; position: relative; padding-bottom: 1rem; }
.timeline-event::before{ content: ''; position: absolute; left: 5px; top: 12px; bottom: -4px; width: 1px; background: var(--line); }
.timeline-event:last-child::before{ display: none; }
.timeline-dot{ width: 11px; height: 11px; border: 2px solid var(--paper); border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px var(--blue); margin-top: .25rem; z-index: 1; }
.timeline-event strong, .timeline-event time{ display: block; }
.timeline-event time{ color: var(--muted); font-size: .72rem; }
.timeline-event pre{ background: var(--canvas); border-radius: var(--radius-sm); padding: .6rem; margin: .35rem 0 0; font-size: .7rem; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 1200px){ .metric-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px){
    .navbar .container-fluid{ gap: .65rem; }
    .navbar-brand{ width: 100%; }
    .dashboard-nav{ order: 3; width: 100%; margin: 0 !important; }
    .dashboard-nav-btn{ flex: 1; }
    .metric-grid{ grid-template-columns: repeat(2, 1fr); }
    .detail-grid{ grid-template-columns: 1fr; }
}
.route-list { display: grid; gap: .65rem; }
.route-row { display: grid; grid-template-columns: 64px minmax(280px, 1fr) minmax(180px, .7fr); gap: .75rem; align-items: center; padding: .7rem; border: 1px solid #e4e9f1; border-radius: .5rem; background: #f8fafc; }
.route-method { font: 700 .75rem/1 monospace; text-align: center; padding: .45rem; border-radius: .35rem; color: #fff; }
.route-get { background: #198754; }.route-post { background: #0d6efd; }.route-delete { background: #dc3545; }
.webhook-url { max-width: 260px; }
.instance-scope-select { width: min(260px, 45vw); }
.integration-steps pre { margin-top: .65rem; padding: .9rem; border-radius: .5rem; background: #111827; color: #e5e7eb; white-space: pre-wrap; overflow-wrap: anywhere; }
.integration-steps li { margin-bottom: 1rem; }
.endpoint-accordion{ display: grid; gap: .65rem; }
.endpoint-item{ overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #FBFCFE; }
.endpoint-item[open]{ border-color: #C5D8E8; background: white; box-shadow: 0 5px 18px rgba(15,23,32,.05); }
.endpoint-item summary{ display: grid; grid-template-columns: 64px minmax(0,1fr) auto; align-items: center; gap: .85rem; padding: .8rem; cursor: pointer; list-style: none; }
.endpoint-item summary::-webkit-details-marker{ display:none; }
.endpoint-item summary > span:nth-child(2){ min-width: 0; }
.endpoint-item summary strong, .endpoint-item summary code{ display:block; }
.endpoint-item summary strong{ color:var(--ink); font-size:.78rem; }
.endpoint-item summary code{ margin-top:.18rem; overflow:hidden; color:var(--muted); font-size:.67rem; text-overflow:ellipsis; white-space:nowrap; }
.endpoint-item summary i{ color:var(--blue); font-size:.67rem; font-style:normal; }
.endpoint-item[open] summary i::before{ content:'Fechar '; }
.endpoint-item[open] summary i{ font-size:0; }
.endpoint-item[open] summary i::before{ font-size:.67rem; }
.endpoint-content{ padding: 0 1rem 1rem 5.75rem; border-top:1px solid var(--line); }
.endpoint-content > p{ margin:.85rem 0; color:var(--muted); font-size:.78rem; line-height:1.55; }
.endpoint-content h4{ margin:1rem 0 .4rem; color:var(--navy); font-size:.76rem; }
.endpoint-content pre,.plain-language-guide pre{ margin:0; padding:.9rem; overflow:auto; border-radius:var(--radius-sm); background:#111827; color:#DDE8F1; font-size:.7rem; white-space:pre-wrap; }
.endpoint-content > small{ display:block; margin-top:.5rem; color:var(--muted); font-size:.65rem; }
.endpoint-auth{ display:grid; gap:.15rem; padding:.7rem; border-left:3px solid var(--blue); background:var(--blue-tint); font-size:.7rem; }
.endpoint-auth span{ color:var(--muted); }
.endpoint-note{ margin-top:.55rem; padding:.55rem .7rem; border-radius:var(--radius-sm); background:var(--pending-bg); color:#785C22; font-size:.7rem; }
.plain-language-guide{ color:var(--muted); font-size:.8rem; line-height:1.6; }
.plain-language-guide h4{ margin:1.2rem 0 .25rem; color:var(--navy); font-size:.85rem; }
.plain-language-guide h4:first-child{ margin-top:0; }
@media (max-width: 767px) { .route-row { grid-template-columns: 58px 1fr; }.route-row > span:last-child { grid-column: 1 / -1; } }
@media (max-width:767px){.endpoint-item summary{grid-template-columns:58px minmax(0,1fr)}.endpoint-item summary i{display:none}.endpoint-content{padding:0 .8rem .8rem}.endpoint-content pre{font-size:.62rem}}

/* ---------- Jornada de conexão ------------------------------------------ */

.instance-hero{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    padding: .5rem 0 1.4rem;
}
.instance-hero h1{ margin: .3rem 0 .45rem; color: var(--navy); font-size: clamp(1.7rem, 3vw, 2.35rem); font-weight: 650; }
.instance-hero p{ max-width: 780px; margin: 0; color: var(--muted); }
.eyebrow, .guidance-kicker{ color: var(--blue); font-family: var(--font-mono); font-size: .65rem; font-weight: 700; letter-spacing: .12em; }

.setup-steps{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 0 0 1.4rem;
    padding: 0;
    list-style: none;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}
.setup-step{ position: relative; display: flex; align-items: center; gap: .75rem; min-width: 0; padding: .9rem 1rem; color: var(--muted); border-right: 1px solid var(--line); }
.setup-step:last-child{ border-right: 0; }
.setup-step::after{ content: ''; position: absolute; right: -1px; bottom: 0; left: 0; height: 3px; background: transparent; }
.step-number{ display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 29px; border: 1px solid var(--line-dark); border-radius: 50%; font-family: var(--font-mono); font-size: .72rem; }
.setup-step strong, .setup-step small{ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setup-step strong{ color: var(--ink); font-size: .82rem; }
.setup-step small{ margin-top: .08rem; font-size: .67rem; }
.setup-step.completed .step-number{ border-color: var(--ok); background: var(--ok); color: white; }
.setup-step.completed .step-number::before{ content: '✓'; }
.setup-step.completed .step-number{ font-size: 0; }
.setup-step.completed .step-number::before{ font-size: .76rem; }
.setup-step.current{ background: var(--blue-tint); }
.setup-step.current::after{ background: var(--blue); }
.setup-step.current .step-number{ border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 4px rgba(36,109,169,.09); }

.count-badge{ min-width: 25px; padding: .15rem .45rem; border-radius: 100px; background: var(--blue-tint); color: var(--blue); font-family: var(--font-mono); font-size: .7rem; text-align: center; }
.instance-list-card{ min-height: 550px; overflow: hidden; }
.instance-list-content{ min-width: 0; flex: 1; text-align: left; }
.instance-list-content .instance-name, .instance-list-content small{ display: block; }
.instance-list-content small{ margin-top: .12rem; color: var(--muted); font-size: .65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.instance-empty-state{ display: grid; place-items: center; align-content: center; min-height: 440px; padding: 2rem; text-align: center; }
.instance-empty-state .empty-symbol{ display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 1rem; border: 1px dashed var(--line-dark); border-radius: 18px; color: var(--blue); font-family: var(--font-mono); }
.instance-empty-state strong{ color: var(--navy); }
.instance-empty-state p{ max-width: 260px; margin: .4rem 0 1rem; color: var(--muted); font-size: .8rem; }

.instance-detail-card{ min-height: 550px; }
.instance-detail-header{ display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.instance-detail-header h2{ margin: 0; font-size: 1.5rem; }
.instance-main-status[data-tone="online"]{ color: var(--ok) !important; background: var(--ok-bg) !important; }
.instance-main-status[data-tone="pending"]{ color: #926A18 !important; background: var(--pending-bg) !important; }
.instance-main-status[data-tone="offline"]{ color: var(--danger) !important; background: var(--danger-bg) !important; }
.instance-actions{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.instance-actions #btnStart, .instance-actions #btnRecover, .instance-actions #btnDisconnect, .instance-actions #btnDelete{ margin: 0; }
.instance-meta-grid{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .65rem; padding: 1rem 0; }
.instance-meta-grid > div{ min-width: 0; padding: .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--canvas); }
.instance-meta-grid small, .instance-meta-grid strong{ display: block; }
.instance-meta-grid small{ color: var(--muted); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; }
.instance-meta-grid strong{ margin-top: .25rem; overflow: hidden; color: var(--ink); font-family: var(--font-mono); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }

.connection-workspace{ display: grid; grid-template-columns: minmax(0,1fr) minmax(240px, .72fr); gap: 1rem; min-height: 290px; }
.connection-guidance{ display: flex; flex-direction: column; justify-content: center; padding: clamp(1.2rem, 3vw, 2rem); border-radius: var(--radius); background: linear-gradient(135deg, var(--navy), #173B5C); color: #fff; }
.connection-guidance h3{ margin: .5rem 0; font-size: 1.35rem; }
.connection-guidance p{ margin: 0; color: #BDD0E0; font-size: .86rem; line-height: 1.6; }
.guidance-kicker{ color: #7EB8E7; }
.mobile-steps{ display: grid; gap: .38rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.15); font-size: .73rem; color: #DCE8F2; }
.qr-workspace{ display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 290px; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #FBFCFE; text-align: center; }
.qr-frame{ margin: 0; padding: 16px; }
.qr-frame .corner{ width: 18px; height: 18px; }
#qr{ width: min(220px, 100%); border-width: 5px; }
.qr-placeholder span{ display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto .7rem; border: 1px dashed var(--line-dark); border-radius: 18px; color: var(--muted); font-family: var(--font-mono); font-size: 1.1rem; }
.qr-placeholder small, .qr-instructions{ display: block; max-width: 240px; color: var(--muted); font-size: .68rem; }
.qr-instructions{ margin-top: .65rem; }

.connection-guide .card-body{ display: grid; grid-template-columns: minmax(190px,.5fr) minmax(0,1.5fr); gap: 2rem; padding: 1.4rem; }
.connection-guide h2{ margin: .35rem 0 0; color: var(--navy); font-size: 1.2rem; }
.guide-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.guide-grid article{ display: grid; grid-template-columns: 34px 1fr; gap: .6rem; }
.guide-grid article > span{ color: var(--orange); font-family: var(--font-mono); font-size: .7rem; }
.guide-grid strong{ display: block; color: var(--ink); font-size: .8rem; }
.guide-grid p{ margin: .25rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.modal-next-step{ display: grid; gap: .2rem; margin-top: 1.2rem; padding: .85rem; border-left: 3px solid var(--blue); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--blue-tint); font-size: .78rem; }
.modal-next-step span{ color: var(--muted); }

@media (max-width: 991px){
    .instance-list-card{ min-height: 0; }
    .instance-empty-state{ min-height: 240px; }
    .instance-meta-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px){
    .instance-hero{ align-items: stretch; flex-direction: column; gap: 1rem; }
    .instance-hero .btn{ width: 100%; }
    .setup-steps{ grid-template-columns: repeat(2, 1fr); }
    .setup-step:nth-child(2){ border-right: 0; }
    .setup-step:nth-child(-n+2){ border-bottom: 1px solid var(--line); }
    .instance-detail-header{ flex-direction: column; }
    .instance-actions{ justify-content: flex-start; }
    .connection-workspace{ grid-template-columns: 1fr; }
    .connection-guide .card-body{ grid-template-columns: 1fr; gap: 1.25rem; }
    .guide-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 480px){
    .setup-step{ padding: .75rem .6rem; }
    .setup-step small{ display: none; }
    .instance-meta-grid{ grid-template-columns: 1fr; }
    .instance-actions{ width: 100%; }
    .instance-actions button{ flex: 1; }
}

/* ---------- Linguagem visual das demais áreas --------------------------- */

.page-hero{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 1.25rem;
    padding: 1.55rem 1.7rem;
    overflow: hidden;
    border-radius: calc(var(--radius) + 2px);
    background: linear-gradient(135deg, var(--ink), var(--navy));
    color: white;
}
.page-hero::after{ content: ''; position: absolute; right: -90px; bottom: -150px; width: 320px; height: 320px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 46px rgba(255,255,255,.025), 0 0 0 92px rgba(255,255,255,.018); pointer-events: none; }
.page-hero > *{ position: relative; z-index: 1; }
.page-hero .eyebrow{ color: #8FC2E9; }
.page-hero h1{ margin: .35rem 0 .45rem; font-size: clamp(1.55rem, 3vw, 2.2rem); font-weight: 650; }
.page-hero p{ max-width: 760px; margin: 0; color: #C3D3E1; font-size: .9rem; }
.page-actions{ display: flex; flex: 0 0 auto; gap: .5rem; }
.page-actions .btn{ min-width: 110px; border-radius: 100px; font-weight: 600; }
.page-hero-integration{ background: linear-gradient(135deg, #102A43, #215B83); }
.page-hero-admin{ background: linear-gradient(135deg, #201E2A, #473044); }
.page-hero-billing{ background: linear-gradient(135deg, #16322B, #27634F); }
.billing-status-badge{ padding: .4rem .7rem; border: 1px solid rgba(255,255,255,.2); border-radius: 100px; color: #D8EEE5; font-family: var(--font-mono); font-size: .63rem; letter-spacing: .08em; }
.billing-status-badge[data-status="PAST_DUE"], .billing-status-badge[data-status="SUSPENDED"]{ border-color: #E9AC77; color: #FFD2AC; }
.billing-metrics{ display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .85rem; }
.billing-metrics article{ position: relative; min-width: 0; padding: 1rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.billing-metrics article::before{ content: ''; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: #3B8A70; }
.billing-metrics small, .billing-metrics strong, .billing-metrics span{ display: block; }
.billing-metrics small{ color: var(--muted); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; }
.billing-metrics strong{ margin: .3rem 0; overflow: hidden; color: var(--navy); font-size: 1.45rem; text-overflow: ellipsis; white-space: nowrap; }
.billing-metrics span{ color: var(--muted); font-size: .68rem; }
.executive-metrics article::before{ background: #805C76; }
.usage-track{ height: 11px; overflow: hidden; border-radius: 100px; background: #E8EDF1; }
.usage-track span{ display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#2E9E6E,#69BD91); transition: width .35s ease; }
.usage-by-instance{ display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .6rem; }
.usage-by-instance > div{ display: flex; justify-content: space-between; gap: .5rem; padding: .65rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.usage-by-instance span{ overflow: hidden; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; }
.usage-by-instance strong{ font-family: var(--font-mono); font-size: .72rem; }
.limit-list{ display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; }
.limit-list > div{ padding: .7rem; border-radius: var(--radius-sm); background: var(--canvas); }
.limit-list span, .limit-list strong{ display: block; }
.limit-list span{ color: var(--muted); font-size: .66rem; }
.limit-list strong{ margin-top: .18rem; color: var(--navy); font-family: var(--font-mono); font-size: .82rem; }
.plan-grid{ display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .85rem; }
.plan-card{ position: relative; padding: 1.15rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.plan-card.current{ border-color: #54A381; box-shadow: 0 0 0 3px rgba(46,158,110,.08); }
.plan-code{ color: var(--muted); font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.plan-card h3{ margin: .25rem 0; color: var(--navy); font-size: 1.05rem; }
.plan-card p{ min-height: 34px; color: var(--muted); font-size: .7rem; }
.plan-price{ display: block; margin: .8rem 0; color: var(--ink); font-size: 1.3rem; }
.plan-price small{ color: var(--muted); font-size: .65rem; font-weight: 400; }
.plan-card ul{ display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: .7rem; }
.plan-card li::before{ content: '✓'; margin-right: .4rem; color: var(--ok); }
.current-plan{ display: inline-block; margin-top: .85rem; padding: .2rem .45rem; border-radius: 100px; background: var(--ok-bg); color: var(--ok); font-family: var(--font-mono); font-size: .57rem; }
.customer-billing-control{ display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.2rem; padding: 1rem; border: 1px solid #D9E8E1; border-radius: var(--radius); background: #F3FAF7; }
.customer-billing-control h5{ margin: .2rem 0; color: #245A48; }
.customer-billing-control p{ margin: 0; color: var(--muted); font-size: .72rem; }
.customer-billing-actions{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.customer-billing-actions .form-select{ width: 170px; }
.plan-admin-grid{ display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .75rem; }
.plan-admin-grid article{ display: grid; gap: .45rem; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.plan-admin-grid h5{ margin: .15rem 0 0; font-size: .9rem; }
.plan-admin-grid article > strong{ color: var(--navy); font-size: 1.1rem; }
.plan-admin-grid article > small{ min-height: 32px; color: var(--muted); font-size: .65rem; }

.context-strip{ display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border: 1px solid #D7E5F2; border-radius: var(--radius-sm); background: var(--blue-tint); }
.context-strip p{ margin: 0; color: #405B73; font-size: .76rem; }
.context-icon{ display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: var(--blue); color: white; font-family: var(--font-mono); font-size: .7rem; font-weight: 700; }
.context-strip-warning{ border-color: #EED8B8; background: var(--orange-tint); }
.context-strip-warning p{ color: #715033; }
.context-strip-warning .context-icon{ background: var(--orange); }

.card-heading{ display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.card-heading > div span, .card-heading > div small{ display: block; }
.card-heading > div small{ margin-top: .18rem; color: #8997A8; font-family: var(--font-body); font-size: .66rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.header-index{ color: #A3B1C1; font-size: .75rem; }
.header-chip{ padding: .22rem .5rem; border: 1px solid #CFE0EE; border-radius: 100px; background: var(--blue-tint); color: var(--blue); font-size: .58rem; }
.feature-card{ border-top: 3px solid var(--blue); }
.composer-card{ border-top: 3px solid var(--orange); }

.section-divider{ display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin: 2rem 0 .85rem; }
.section-divider h2{ margin: .25rem 0 0; color: var(--navy); font-size: 1.2rem; }
.section-divider p{ max-width: 520px; margin: 0; color: var(--muted); font-size: .76rem; text-align: right; }

.metric-card{ position: relative; overflow: hidden; transition: transform .16s ease, box-shadow .16s ease; }
.metric-card::after{ content: ''; position: absolute; top: 0; right: 0; width: 42px; height: 3px; background: var(--blue); }
.metric-card:nth-child(3)::after, .metric-card:nth-child(4)::after{ background: var(--ok); }
.metric-card:nth-child(5)::after{ background: var(--danger); }
.metric-card:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,32,.07); }

.integration-flow{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin: 0; padding: 0; overflow: hidden; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.integration-readiness{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.75rem 1rem; border:1px solid var(--line); border-radius:var(--radius); background:white; }
.readiness-title{ display:flex; align-items:center; gap:.65rem; min-width:210px; }
.readiness-title > span{ width:9px; height:9px; flex:0 0 9px; border-radius:50%; background:var(--muted); }
.readiness-title > span[data-state="ok"]{ background:var(--ok); box-shadow:0 0 0 4px var(--ok-bg); }
.readiness-title > span[data-state="warning"]{ background:var(--pending); box-shadow:0 0 0 4px var(--pending-bg); }
.readiness-title strong,.readiness-title small{ display:block; }
.readiness-title strong{ color:var(--navy); font-size:.76rem; }
.readiness-title small{ margin-top:.1rem; color:var(--muted); font-size:.62rem; }
.readiness-items{ display:flex; justify-content:flex-end; gap:.45rem; overflow-x:auto; }
.readiness-item{ display:flex; align-items:center; gap:.4rem; min-width:max-content; padding:.42rem .55rem; border-radius:8px; background:var(--canvas); }
.readiness-item > span{ display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#E6EAF0; color:var(--muted); font-size:.6rem; font-weight:700; }
.readiness-item[data-state="ok"] > span{ background:var(--ok-bg); color:var(--ok); }
.readiness-item[data-state="missing"]{ background:var(--pending-bg); }
.readiness-item[data-state="missing"] > span{ background:#F4DDAF; color:#8A641A; }
.readiness-item strong,.readiness-item small{ display:block; }
.readiness-item strong{ color:var(--ink); font-size:.65rem; }
.readiness-item small{ color:var(--muted); font-size:.56rem; }
.integration-flow li{ display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; border-right: 1px solid var(--line); }
.integration-flow li:last-child{ border-right: 0; }
.integration-flow li > span{ display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 29px; border-radius: 9px; background: var(--blue-tint); color: var(--blue); font-family: var(--font-mono); font-size: .7rem; }
.integration-flow strong, .integration-flow small{ display: block; }
.integration-flow strong{ color: var(--ink); font-size: .78rem; }
.integration-flow small{ color: var(--muted); font-size: .64rem; }
.api-reference-card{ border-top: 3px solid var(--blue); }
.quiet-hours-card{ border-top:3px solid var(--pending); }
.quiet-toggle{ min-height:38px; display:flex; align-items:center; gap:.45rem; padding:0 .7rem 0 2.8rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--canvas); }
.quiet-toggle .form-check-label{ color:var(--ink); font-size:.74rem; }
.tenant-identity{ display: flex; align-items: center; gap: .8rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.tenant-monogram{ display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: linear-gradient(135deg, var(--navy), var(--blue)); color: white; font-family: var(--font-display); font-size: 1.15rem; font-weight: 650; }
.tenant-identity small, .tenant-identity strong, .tenant-identity code{ display: block; }
.tenant-identity small{ color: var(--muted); font-family: var(--font-mono); font-size: .56rem; letter-spacing: .09em; }
.tenant-identity strong{ margin: .12rem 0; color: var(--navy); font-size: .95rem; }
.tenant-identity code{ color: var(--muted); font-size: .68rem; }
.tenant-stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin-top: 1rem; }
.tenant-stats > div{ min-width: 0; padding: .55rem; border-radius: var(--radius-sm); background: var(--canvas); }
.tenant-stats small, .tenant-stats strong{ display: block; }
.tenant-stats small{ color: var(--muted); font-size: .6rem; }
.tenant-stats strong{ margin-top: .2rem; overflow: hidden; color: var(--ink); font-family: var(--font-mono); font-size: .72rem; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.tenant-stats strong span{ color: var(--muted); font-weight: 400; }
.api-callout{ display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-bottom: 1rem; padding: .75rem .9rem; border-radius: var(--radius-sm); background: var(--blue-tint); font-size: .74rem; }
.api-callout strong{ color: var(--navy); }
.api-callout span{ color: var(--muted); }
.api-callout code{ color: var(--blue); }
.route-row{ transition: border-color .15s ease, transform .15s ease; }
.route-row:hover{ transform: translateX(2px); border-color: #BED2E3; }

.admin-secure-label{ display: flex; align-items: center; gap: .5rem; padding: .35rem .65rem; border: 1px solid rgba(255,255,255,.15); border-radius: 100px; color: #D9C9D5; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; }
.admin-secure-label span{ width: 7px; height: 7px; border-radius: 50%; background: #E6A15B; box-shadow: 0 0 0 4px rgba(230,161,91,.12); }

/* Forms e tabelas passam a seguir o mesmo acabamento do console. */
.dashboard-section .form-control, .dashboard-section .form-select{ border-color: var(--line); border-radius: var(--radius-sm); color: var(--ink); font-size: .82rem; box-shadow: none; }
.dashboard-section .form-control:focus, .dashboard-section .form-select:focus{ border-color: var(--blue-hi); box-shadow: 0 0 0 3px rgba(44,95,148,.1); }
.dashboard-section textarea.form-control{ resize: vertical; }
.dashboard-section .table{ margin-bottom: 0; font-size: .78rem; }
.dashboard-section .table thead th{ padding: .7rem; border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--font-mono); font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.dashboard-section .table tbody td{ padding: .72rem; border-color: #EDF0F4; vertical-align: middle; }
.dashboard-section .table tbody tr{ transition: background .12s ease; }
.dashboard-section .table tbody tr:hover{ background: #F8FAFC; }
.dashboard-section .btn-sm{ border-radius: 100px; }
.dashboard-section .accordion-item{ overflow: hidden; border-color: var(--line); border-radius: var(--radius-sm); }
.dashboard-section .accordion-button{ color: var(--navy); font-size: .82rem; font-weight: 600; box-shadow: none; }
.dashboard-section .accordion-button:not(.collapsed){ background: var(--blue-tint); color: var(--blue); }

@media (max-width: 991px){
    .integration-flow{ grid-template-columns: repeat(2, 1fr); }
    .integration-flow li:nth-child(2){ border-right: 0; }
    .integration-flow li:nth-child(-n+2){ border-bottom: 1px solid var(--line); }
    .billing-metrics, .plan-grid{ grid-template-columns: repeat(2,1fr); }
    .usage-by-instance{ grid-template-columns: repeat(2,1fr); }
    .integration-readiness{ align-items:flex-start; flex-direction:column; }
    .readiness-items{ justify-content:flex-start; width:100%; }
    .plan-admin-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 767px){
    .page-hero{ align-items: stretch; flex-direction: column; gap: 1.1rem; padding: 1.25rem; }
    .page-actions{ width: 100%; }
    .page-actions .btn{ flex: 1; }
    .section-divider{ align-items: flex-start; flex-direction: column; gap: .35rem; }
    .section-divider p{ text-align: left; }
    .card-heading{ align-items: flex-start; }
    .metric-card strong{ font-size: 1.4rem; }
    .tenant-stats{ grid-template-columns: repeat(2, 1fr); }
    .customer-billing-control{ align-items: stretch; flex-direction: column; }
    .customer-billing-actions{ justify-content: flex-start; }
}
@media (max-width: 520px){
    .integration-flow{ grid-template-columns: 1fr; }
    .integration-flow li{ border-right: 0; border-bottom: 1px solid var(--line); }
    .integration-flow li:last-child{ border-bottom: 0; }
    .metric-grid{ grid-template-columns: 1fr 1fr; }
    .admin-secure-label{ align-self: flex-start; }
    .billing-metrics, .plan-grid{ grid-template-columns: 1fr; }
    .usage-by-instance{ grid-template-columns: 1fr; }
    .plan-admin-grid{ grid-template-columns: 1fr; }
}