/* ==========================================================================
   LUMEX — Design System
   Conceito: Graphite Platinum / Luxury Tech

   Fonte unica da identidade visual. Este arquivo deve ser carregado POR
   ULTIMO em todos os templates, para que os tokens abaixo sobrescrevam os
   temas anteriores sem precisar editar cada uma das views.

   Regra de uso: nao escreva cor fixa em view nenhuma. Use as variaveis.
   ========================================================================== */

:root {
    /* ---- Paleta oficial ---- */
    --lumex-obsidian:      #050607;
    --lumex-graphite:      #111317;
    --lumex-slate:         #282F36;
    --lumex-silver:        #C0C4CA;
    --lumex-platinum:      #E5E7EB;
    --lumex-electric-blue: #3B82F6;

    /* ---- Superficies ---- */
    --lumex-bg:            var(--lumex-obsidian);
    --lumex-surface:       var(--lumex-graphite);
    --lumex-surface-2:     #171A1F;
    --lumex-surface-3:     var(--lumex-slate);

    /* ---- Texto ---- */
    --lumex-text:          var(--lumex-platinum);
    --lumex-text-muted:    var(--lumex-silver);
    --lumex-text-dim:      #8A9099;

    /* ---- Bordas: finas e precisas ---- */
    --lumex-border:        rgba(192, 196, 202, 0.14);
    --lumex-border-strong: rgba(192, 196, 202, 0.28);
    --lumex-border-blue:   rgba(59, 130, 246, 0.45);

    /* ---- Estados financeiros (funcionais, nao decorativos) ---- */
    --lumex-positive:      #34D399;
    --lumex-negative:      #F87171;
    --lumex-warning:       #FBBF24;
    --lumex-info:          var(--lumex-electric-blue);

    /* ---- Acabamento metalico discreto ---- */
    --lumex-metal: linear-gradient(135deg, #F4F5F7 0%, var(--lumex-silver) 42%, #8E949C 68%, var(--lumex-platinum) 100%);
    --lumex-surface-sheen: linear-gradient(160deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 55%);

    /* ---- Tipografia geometrica ---- */
    --lumex-font: 'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --lumex-tracking-brand: 0.34em;

    /* ---- Ritmo, raio e elevacao ---- */
    --lumex-radius:    10px;
    --lumex-radius-lg: 16px;
    --lumex-shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --lumex-shadow-lg: 0 2px 4px rgba(0,0,0,.45), 0 24px 56px rgba(0,0,0,.5);
    --lumex-focus:     0 0 0 3px rgba(59, 130, 246, 0.35);

    /* ------------------------------------------------------------------
       Compatibilidade: os temas anteriores (neon cyan/roxo/dourado) sao
       remapeados para a paleta oficial. Isso reveste centenas de telas de
       uma so vez, sem editar view por view.
       ------------------------------------------------------------------ */
    --accent-primary:       var(--lumex-electric-blue);
    --accent-primary-glow:  rgba(59, 130, 246, 0.28);
    --accent-secondary:     var(--lumex-silver);
    --accent-success:       var(--lumex-positive);
    --accent-danger:        var(--lumex-negative);
    --accent-warning:       var(--lumex-warning);
    --bg-primary:           var(--lumex-obsidian);
    --bg-secondary:         var(--lumex-graphite);
    --bg-card:              var(--lumex-graphite);
    --bg-card-hover:        var(--lumex-surface-2);
    --bg-elevated:          var(--lumex-surface-2);
    --border-accent:        var(--lumex-border-blue);
    --text-primary:         var(--lumex-platinum);
    --grad-primary:         linear-gradient(135deg, var(--lumex-electric-blue) 0%, #1D4ED8 100%);
    --hivex-gold:           var(--lumex-silver);
    --hivex-purple:         var(--lumex-electric-blue);
    --hivex-cyan:           var(--lumex-electric-blue);
    --lumex-cyan:           var(--lumex-electric-blue);
    --lumex-orange:         var(--lumex-warning);
    --lumex-purple:         var(--lumex-electric-blue);
    --gradient-gold:        var(--lumex-metal);
    --gradient-purple:      linear-gradient(135deg, var(--lumex-slate) 0%, var(--lumex-graphite) 100%);
    --gradient-cyan:        linear-gradient(135deg, var(--lumex-electric-blue) 0%, #1D4ED8 100%);
    --gradient-main:        linear-gradient(135deg, var(--lumex-silver) 0%, var(--lumex-electric-blue) 100%);
    --dark-card:            linear-gradient(135deg, var(--lumex-graphite) 0%, var(--lumex-surface-2) 100%);
    --darker-bg:            var(--lumex-obsidian);
}

/* ==========================================================================
   Base
   ========================================================================== */

body.lumex,
body {
    background-color: var(--lumex-bg);
    color: var(--lumex-text);
    font-family: var(--lumex-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(59,130,246,.32); color: #fff; }

:focus-visible {
    outline: none;
    box-shadow: var(--lumex-focus);
    border-radius: 6px;
}

/* Barra de rolagem discreta, coerente com o grafite */
* { scrollbar-width: thin; scrollbar-color: var(--lumex-slate) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--lumex-slate);
    border-radius: 8px;
    border: 2px solid var(--lumex-bg);
}
*::-webkit-scrollbar-thumb:hover { background: #39414A; }

/* ==========================================================================
   Marca
   ========================================================================== */

.lumex-wordmark {
    font-family: var(--lumex-font);
    font-weight: 600;
    letter-spacing: var(--lumex-tracking-brand);
    text-transform: uppercase;
    background: var(--lumex-metal);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    line-height: 1.1;
}
/* Sem suporte a background-clip: mantem legivel em prata solido */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .lumex-wordmark { color: var(--lumex-silver); -webkit-text-fill-color: var(--lumex-silver); }
}

.lumex-wordmark--sm { font-size: 1.05rem; letter-spacing: .26em; }
.lumex-wordmark--md { font-size: 1.6rem; }
.lumex-wordmark--lg { font-size: clamp(2rem, 5vw, 3.25rem); }

/* ==========================================================================
   Superficies
   ========================================================================== */

.lumex-card {
    position: relative;
    background-color: var(--lumex-surface);
    background-image: var(--lumex-surface-sheen);
    border: 1px solid var(--lumex-border);
    border-radius: var(--lumex-radius-lg);
    box-shadow: var(--lumex-shadow);
    padding: 1.5rem;
}
.lumex-card--flush { padding: 0; overflow: hidden; }

.lumex-card__label {
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lumex-text-dim);
    margin-bottom: .6rem;
}
.lumex-card__value {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    color: var(--lumex-platinum);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.lumex-card__meta { margin-top: .5rem; font-size: .82rem; color: var(--lumex-text-muted); }

.lumex-divider { height: 1px; background: var(--lumex-border); border: 0; margin: 1.5rem 0; }

/* ==========================================================================
   Botoes
   ========================================================================== */

.lumex-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 44px;              /* alvo de toque confortavel */
    padding: .7rem 1.5rem;
    border-radius: var(--lumex-radius);
    border: 1px solid transparent;
    font-family: var(--lumex-font);
    font-size: .93rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.lumex-btn:disabled, .lumex-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.lumex-btn--primary {
    background: var(--lumex-platinum);
    color: var(--lumex-obsidian);
    border-color: var(--lumex-platinum);
}
.lumex-btn--primary:hover:not(:disabled) { background: #fff; border-color: #fff; transform: translateY(-1px); }

.lumex-btn--ghost {
    background: transparent;
    color: var(--lumex-platinum);
    border-color: var(--lumex-border-strong);
}
.lumex-btn--ghost:hover:not(:disabled) { border-color: var(--lumex-silver); background: rgba(192,196,202,.06); }

.lumex-btn--blue {
    background: var(--lumex-electric-blue);
    color: #fff;
    border-color: var(--lumex-electric-blue);
}
.lumex-btn--blue:hover:not(:disabled) { background: #2F74EA; }

.lumex-btn--block { width: 100%; }

/* ==========================================================================
   Formularios
   ========================================================================== */

.lumex-field { margin-bottom: 1.1rem; }
.lumex-label {
    display: block;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lumex-text-muted);
    margin-bottom: .45rem;
}
.lumex-input,
.lumex-select,
.lumex-textarea {
    width: 100%;
    min-height: 46px;
    padding: .7rem .9rem;
    background: var(--lumex-surface-2);
    border: 1px solid var(--lumex-border);
    border-radius: var(--lumex-radius);
    color: var(--lumex-platinum);
    font-family: var(--lumex-font);
    font-size: .95rem;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.lumex-input::placeholder { color: var(--lumex-text-dim); }
.lumex-input:focus,
.lumex-select:focus,
.lumex-textarea:focus {
    outline: none;
    border-color: var(--lumex-border-blue);
    box-shadow: var(--lumex-focus);
}
.lumex-input[aria-invalid="true"], .lumex-input.is-invalid { border-color: var(--lumex-negative); }
.lumex-error { margin-top: .4rem; font-size: .82rem; color: var(--lumex-negative); }
.lumex-hint  { margin-top: .4rem; font-size: .82rem; color: var(--lumex-text-dim); }

/* ==========================================================================
   Estados financeiros e distintivos
   ========================================================================== */

.lumex-pos { color: var(--lumex-positive); }
.lumex-neg { color: var(--lumex-negative); }
.lumex-num { font-variant-numeric: tabular-nums; }

.lumex-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .03em;
    border: 1px solid var(--lumex-border);
    background: rgba(192,196,202,.06);
    color: var(--lumex-text-muted);
}
.lumex-badge--pos  { color: var(--lumex-positive); border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.1); }
.lumex-badge--neg  { color: var(--lumex-negative); border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.1); }
.lumex-badge--warn { color: var(--lumex-warning);  border-color: rgba(251,191,36,.35);  background: rgba(251,191,36,.1); }
.lumex-badge--blue { color: #93B9FB; border-color: var(--lumex-border-blue); background: rgba(59,130,246,.12); }

/* ==========================================================================
   Tabelas
   ========================================================================== */

.lumex-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.lumex-table thead th {
    text-align: left;
    padding: .75rem 1rem;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lumex-text-dim);
    border-bottom: 1px solid var(--lumex-border);
    white-space: nowrap;
}
.lumex-table tbody td {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--lumex-border);
    color: var(--lumex-text);
}
.lumex-table tbody tr:hover td { background: rgba(192,196,202,.035); }
.lumex-table__num { text-align: right; font-variant-numeric: tabular-nums; }

/* Rolagem horizontal isolada na tabela, nunca na pagina */
.lumex-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   Layout do escritorio virtual
   ========================================================================== */

.lumex-shell { display: flex; min-height: 100vh; background: var(--lumex-bg); }

.lumex-sidebar {
    width: 252px;
    flex-shrink: 0;
    background: var(--lumex-surface);
    border-right: 1px solid var(--lumex-border);
    padding: 1.25rem 0;
}
.lumex-sidebar__brand { padding: .25rem 1.25rem 1.25rem; border-bottom: 1px solid var(--lumex-border); }
.lumex-nav { padding: 1rem .75rem; display: flex; flex-direction: column; gap: .15rem; }
.lumex-nav__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .8rem;
    border-radius: var(--lumex-radius);
    color: var(--lumex-text-muted);
    text-decoration: none;
    font-size: .92rem;
    border-left: 2px solid transparent;
    transition: background-color .14s ease, color .14s ease;
}
.lumex-nav__item:hover { background: rgba(192,196,202,.05); color: var(--lumex-platinum); }
.lumex-nav__item.is-active {
    background: rgba(59,130,246,.1);
    color: var(--lumex-platinum);
    border-left-color: var(--lumex-electric-blue);
}

.lumex-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lumex-topbar {
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.25rem;
    background: rgba(17,19,23,.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--lumex-border);
    position: sticky;
    top: 0;
    z-index: 30;
}
.lumex-content { padding: 1.5rem 1.25rem 3rem; max-width: 1400px; width: 100%; }

.lumex-grid { display: grid; gap: 1rem; }
.lumex-grid--kpi { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.lumex-grid--2  { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.lumex-page-title {
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    font-weight: 600;
    color: var(--lumex-platinum);
    letter-spacing: -0.01em;
    margin: 0 0 .3rem;
}
.lumex-page-sub { color: var(--lumex-text-muted); font-size: .92rem; margin: 0 0 1.5rem; }

/* ==========================================================================
   Mobile — organizacao propria, nao compressao do desktop
   ========================================================================== */

.lumex-mobile-nav { display: none; }

@media (max-width: 991px) {
    .lumex-sidebar { display: none; }
    .lumex-content { padding: 1rem 1rem 5.5rem; }
    .lumex-grid--kpi { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

    .lumex-mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 60;
        background: rgba(17,19,23,.97);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--lumex-border);
        padding: .4rem .25rem calc(.4rem + env(safe-area-inset-bottom, 0px));
    }
    .lumex-mobile-nav__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .2rem;
        min-height: 52px;
        padding: .3rem .2rem;
        color: var(--lumex-text-dim);
        text-decoration: none;
        font-size: .68rem;
        letter-spacing: .02em;
        border-radius: 8px;
    }
    .lumex-mobile-nav__item i { font-size: 1.15rem; }
    .lumex-mobile-nav__item.is-active { color: var(--lumex-electric-blue); }
}

@media (max-width: 575px) {
    .lumex-card { padding: 1.1rem; border-radius: var(--lumex-radius); }
    .lumex-card__value { font-size: 1.4rem; }
    /* Nunca reduzir o corpo do texto abaixo do legivel */
    body { font-size: 15px; }
}

/* O template publico usa body/#main-wrapper como flex column. Secoes de
   pagina sao itens flex e encolhiam ate 1px; isto as mantem no tamanho
   do proprio conteudo. */
#main-wrapper > section,
#main-wrapper > div > section,
section[class^="lx-"], section[class*=" lx-"] { flex: none; }

/* Botoes: neutraliza cor de texto herdada dos temas anteriores */
a.lumex-btn, button.lumex-btn, .lumex-btn { text-decoration: none; }
a.lumex-btn--primary, .lumex-btn--primary { color: var(--lumex-obsidian) !important; }
a.lumex-btn--ghost,   .lumex-btn--ghost   { color: var(--lumex-platinum) !important; }
a.lumex-btn--blue,    .lumex-btn--blue    { color: #fff !important; }

/* A pagina nunca rola na horizontal */
html, body { max-width: 100%; overflow-x: hidden; }

/* ==========================================================================
   Acessibilidade
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

.lumex-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--lumex-platinum);
    color: var(--lumex-obsidian);
    padding: .6rem 1rem;
    z-index: 999;
    border-radius: 0 0 8px 0;
}
.lumex-skip-link:focus { left: 0; }


/* ==========================================================================
   Compatibilidade com temas anteriores — especificidade elevada

   Alguns templates redeclaram estas variaveis num <style> inline que e
   avaliado DEPOIS deste arquivo. `:root:root` tem especificidade (0,2,0)
   contra (0,1,0) de um `:root` simples, entao vence por especificidade e
   nao por ordem — sem precisar de !important.
   ========================================================================== */

:root:root {
    --accent-primary:       var(--lumex-electric-blue);
    --accent-primary-glow:  rgba(59, 130, 246, 0.28);
    --accent-secondary:     var(--lumex-silver);
    --accent-success:       var(--lumex-positive);
    --accent-danger:        var(--lumex-negative);
    --accent-warning:       var(--lumex-warning);
    --bg-primary:           var(--lumex-obsidian);
    --bg-secondary:         var(--lumex-graphite);
    --bg-card:              var(--lumex-graphite);
    --bg-card-hover:        var(--lumex-surface-2);
    --bg-elevated:          var(--lumex-surface-2);
    --border-accent:        var(--lumex-border-blue);
    --text-primary:         var(--lumex-platinum);
    --grad-primary:         linear-gradient(135deg, var(--lumex-electric-blue) 0%, #1D4ED8 100%);
    --hivex-gold:           var(--lumex-silver);
    --hivex-purple:         var(--lumex-electric-blue);
    --hivex-cyan:           var(--lumex-electric-blue);
    --lumex-cyan:           var(--lumex-electric-blue);
    --lumex-orange:         var(--lumex-warning);
    --lumex-purple:         var(--lumex-electric-blue);
    --gradient-gold:        var(--lumex-metal);
    --gradient-purple:      linear-gradient(135deg, var(--lumex-slate) 0%, var(--lumex-graphite) 100%);
    --gradient-cyan:        linear-gradient(135deg, var(--lumex-electric-blue) 0%, #1D4ED8 100%);
    --gradient-main:        linear-gradient(135deg, var(--lumex-silver) 0%, var(--lumex-electric-blue) 100%);
    --dark-card:            linear-gradient(135deg, var(--lumex-graphite) 0%, var(--lumex-surface-2) 100%);
    --darker-bg:            var(--lumex-obsidian);
}

/* ==========================================================================
   Piso de legibilidade

   A auditoria no navegador encontrou texto renderizado a 7, 8, 9 e 10px no
   escritorio virtual, inclusive valores financeiros (.yld-lp-val a 8px).
   Abaixo de 11px o texto deixa de ser confortavel, e valor monetario precisa
   de mais corpo ainda. Estes pisos valem por especificidade, sem !important.
   ========================================================================== */

body .yld-avail-meta,
body .yld-hist-date,
body .yld-fin-label,
body .nav-badge,
body .nav-label,
body .mobile-nav-item,
body .yld-lp-label,
body .yld-stat-label {
    font-size: .72rem;   /* ~11.5px */
    line-height: 1.45;
}

/* Valores monetarios: corpo maior e numerais tabulares */
body .yld-lp-val,
body .yld-fin-val,
body .yld-stat-val,
body .yld-avail-tier-val {
    font-size: .84rem;   /* ~13.4px */
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
}

/* Distintivos: legiveis sem perder a escala */
body .yld-hist-badge,
body .yld-avail-tag {
    font-size: .69rem;   /* ~11px */
    padding: .22em .55em;
    line-height: 1.3;
}

/* Em telas pequenas o corpo sobe mais um pouco */
@media (max-width: 575px) {
    body .yld-avail-meta,
    body .yld-hist-date,
    body .yld-fin-label,
    body .nav-label { font-size: .75rem; }
    body .yld-lp-val,
    body .yld-fin-val,
    body .yld-stat-val { font-size: .88rem; }
}

/* ==========================================================================
   Semantica de cor

   Verde e vermelho sao reservados a ESTADO FINANCEIRO (valor positivo,
   negativo, confirmacao, erro). Selecao, navegacao e rotulos de novidade
   usam azul funcional ou prata — nao verde.
   ========================================================================== */

/* Abas e alternadores selecionados */
body .yld-tab.active,
body .yld-tab--active,
body .tab-btn.active,
body .nav-pill.active,
body .seg-btn.active {
    background: var(--lumex-electric-blue);
    color: #fff;
    border-color: var(--lumex-electric-blue);
}

/* Rotulos de novidade e estado ao vivo */
body .nav-badge,
body .badge-new,
body .badge-live {
    background: rgba(59, 130, 246, .14);
    color: #93B9FB;
    border: 1px solid var(--lumex-border-blue);
    font-weight: 600;
    letter-spacing: .04em;
}
body .badge-soon,
body .nav-badge--soon {
    background: rgba(192, 196, 202, .08);
    color: var(--lumex-text-dim);
    border: 1px solid var(--lumex-border);
}

/* Classes reais do escritorio, identificadas por auditoria no navegador */
body .nav-badge.success,
body .nav-badge {
    background: rgba(59, 130, 246, .14);
    color: #93B9FB;
    border: 1px solid var(--lumex-border-blue);
}
body .yld-tabitem.active,
body .yld-ftab.active {
    background: var(--lumex-electric-blue);
    color: #fff;
    border-color: var(--lumex-electric-blue);
}
body .yld-section-badge,
body .yld-slots-count {
    color: var(--lumex-silver);
    background: rgba(192, 196, 202, .07);
    border: 1px solid var(--lumex-border);
}
body .yld-upgrade-link { color: var(--lumex-silver); }
body .yld-upgrade-link:hover { color: var(--lumex-platinum); }

/* Valores financeiros mantem verde/vermelho: ali a cor E a informacao */
body .yld-hero-stat-val { font-variant-numeric: tabular-nums; }

/* Botao primario do escritorio: azul, nao gradiente */
body .btn-deposit,
body .hdr-cta {
    background: var(--lumex-electric-blue);
    border-color: var(--lumex-electric-blue);
    color: #fff;
}

/* ==========================================================================
   Rotulos que nao cabem em telas estreitas

   Em 320px o distintivo de plano e o rotulo "Indicações" da navegacao
   inferior ultrapassavam a largura util. Ajustados sem reduzir o corpo
   do texto, que ja esta no minimo legivel.
   ========================================================================== */

body .yld-plan-badge {
    /* Era item flex sem largura minima e ficava espremido a 19px.
       flex-shrink:0 com min-width garante que o rotulo caiba inteiro. */
    white-space: normal;
    line-height: 1.2;
    width: auto;
    min-width: max-content;
    flex-shrink: 0;
    /* PLANO e o nome do plano empilham, em vez de disputar a mesma linha */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    max-width: 100%;
    height: auto;
    padding: .3rem .55rem;
    text-align: center;
}

/* Navegacao inferior.

   A causa do rotulo cortado nao era o texto: a barra era uma pilula
   estreita para 6 itens, o que dava ~53px por item. Permitir quebra de
   palavra "resolvia" partindo palavras no meio (CARTEIR/A, INDICAÇ/ÕES),
   o que e pior. A barra passa a ocupar a largura util, e ai cada rotulo
   cabe inteiro em uma linha. */
/* Nao forcar largura no container: ele tem layout proprio e forcar
   left/right/width fez a barra perder itens. O que resolve e apenas
   impedir que a palavra seja partida; quando nao couber, reticencias. */
body .mobile-nav-item {
    letter-spacing: 0;
    padding-left: .15rem;
    padding-right: .15rem;
    min-width: 0;
    flex: 1 1 0;
}
body .mobile-nav-item span,
body .mobile-nav-item .nav-label {
    font-size: .7rem;   /* 11.2px: acima do piso de legibilidade */
    line-height: 1.15;
    white-space: nowrap;      /* nunca partir a palavra */
    overflow-wrap: normal;
    word-break: keep-all;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Os filhos do distintivo tambem precisam poder quebrar */
body .yld-plan-badge > *,
body .yld-plan-badge span,
body .yld-plan-badge small,
body .yld-plan-badge strong {
    white-space: normal;
    line-height: 1.15;
    max-width: 100%;
    overflow-wrap: anywhere;
}