/* ========================================
   INTERSENA MANAGER - ESTILOS CUSTOMIZADOS
   ======================================== */

:root {
    --brand-primary: #bcc2a0;
    --brand-secondary: #83876f;
    --brand-dark: #5a5f4d;

    --sidebar-bg: #1e2532;
    --sidebar-width: 260px;
    --sidebar-text: #9aa5b4;
    --sidebar-text-hover: #ffffff;
    --sidebar-section-color: #4a5568;
    --sidebar-active-bg: rgba(188, 194, 160, 0.12);
    --sidebar-active-text: #c8ceae;
    --sidebar-active-border: #bcc2a0;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.05);

    --topbar-bg: #ffffff;
    --topbar-height: 64px;

    --content-bg: #f4f6fa;
    --card-bg: #ffffff;
    --card-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
    --card-shadow-hover: 0 6px 16px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);

    --text-primary: #1a202c;
    --text-secondary: #718096;
    --text-muted-color: #a0aec0;

    --border-color: #e2e8f0;
    --radius: 8px;
    --radius-lg: 12px;
    --transition: all 0.2s ease;
}

* {
    font-family: 'Inter', 'Poppins', sans-serif;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--content-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* ========================================
   LAYOUT
   ======================================== */

.wrapper {
    display: flex;
    min-height: 100vh;
}

/* ========================================
   SIDEBAR
   ======================================== */

.sidebar {
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.sidebar-brand {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}

.brand-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 0.75rem;
}

.brand-link img {
    border-radius: 8px;
    flex-shrink: 0;
}

/* A marca e larga (proporcao ~7:1). Limitada pela largura util da barra
   lateral -- 260px menos 20px de cada lado --, com a altura saindo da
   proporcao para nao distorcer. */
.brand-logo {
    width: 100%;
    max-width: 210px;
    height: auto;
    border-radius: 0;
}

.brand-name {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.3px;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 0;
}

.sidebar-nav::-webkit-scrollbar {
    width: 3px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
}

/* ========================================
   NAVIGATION MENU
   ======================================== */

.navigation-menu {
    padding: 0;
}

.menu-section {
    margin-bottom: 0.25rem;
}

.menu-title {
    color: var(--sidebar-section-color);
    font-weight: 600;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 1rem 1.25rem 0.4rem;
    margin: 0;
    display: block;
}

.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-list li a {
    display: flex;
    align-items: center;
    padding: 0.575rem 1.25rem;
    color: var(--sidebar-text);
    text-decoration: none;
    transition: var(--transition);
    font-size: 0.855rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    gap: 0.625rem;
}

.menu-list li a i {
    width: 17px;
    text-align: center;
    font-size: 0.84rem;
    flex-shrink: 0;
    opacity: 0.75;
    transition: opacity 0.2s;
}

.menu-list li a:hover {
    color: var(--sidebar-text-hover);
    background-color: var(--sidebar-hover-bg);
    border-left-color: rgba(188, 194, 160, 0.35);
}

.menu-list li a:hover i {
    opacity: 1;
}

.menu-list li a.active {
    color: var(--sidebar-active-text);
    background-color: var(--sidebar-active-bg);
    border-left-color: var(--sidebar-active-border);
    font-weight: 600;
}

.menu-list li a.active i {
    opacity: 1;
}

/* ========================================
   SIDEBAR BACKDROP (mobile)
   ======================================== */

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.sidebar-backdrop.show {
    display: block;
}

/* ========================================
   MAIN WRAPPER
   ======================================== */

.main-wrapper {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   TOPBAR
   ======================================== */

.topbar {
    height: var(--topbar-height);
    background-color: var(--topbar-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    flex-shrink: 0;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sidebar-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius);
    transition: var(--transition);
    line-height: 1;
}

.sidebar-toggle:hover {
    background-color: #f1f5f9;
    color: var(--text-primary);
}

.topbar-title {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.topbar-date {
    color: var(--text-secondary);
    font-size: 0.825rem;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.7rem 0.3rem 0.3rem;
    border-radius: 999px;
    background-color: #f8fafc;
    border: 1px solid var(--border-color);
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.user-name {
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--text-primary);
}

.btn-logout {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.825rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius);
    transition: var(--transition);
    display: flex;
    align-items: center;
    line-height: 1;
}

.btn-logout:hover {
    background-color: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* ========================================
   CONTEÚDO PRINCIPAL
   ======================================== */

.main-content {
    flex: 1;
    padding: 1.75rem;
    background-color: var(--content-bg);
}

.content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
}

/* ========================================
   PAGE TITLE
   ======================================== */

.page-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.page-subtitle {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

/* ========================================
   DASHBOARD
   ======================================== */

.dashboard-header {
    margin-bottom: 1.5rem;
}

.dashboard-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}

.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.1rem;
    margin-bottom: 1.5rem;
}

.dashboard-cards .card {
    display: flex;
    /* O .card do Bootstrap define flex-direction: column. Sem sobrescrever aqui,
       o icone empilhava acima do texto e ficava centralizado, enquanto numero e
       rotulo seguiam alinhados a esquerda. */
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 1.2rem 1.4rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    transition: var(--transition);
    margin-bottom: 0;
}

/* Cards que levam a uma lista sao <a>: herdam a cor do texto e perdem o
   sublinhado, para continuarem lendo como card e nao como link. */
.dashboard-cards a.card {
    color: inherit;
    text-decoration: none;
}

.dashboard-cards a.card:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

.dashboard-cards .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}

.card-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.card-icon i {
    font-size: 1.35rem;
    color: white;
}

.card-icon.bg-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card-icon.bg-success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.card-icon.bg-warning {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
}

.card-icon.bg-danger {
    background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
}

.card-icon.bg-info {
    background: linear-gradient(135deg, #30cfd0 0%, #5f72be 100%);
}

.card-content {
    flex: 1;
    min-width: 0;
}

.card-content h3 {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.2rem 0;
    line-height: 1;
}

.card-content p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 500;
}

/* ========================================
   SEÇÕES / CARDS GENÉRICOS
   ======================================== */

.dashboard-section,
.card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.section-header,
.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border-color);
    padding: 0.9rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.section-header h4 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.section-header i {
    color: var(--brand-secondary);
    font-size: 0.875rem;
}

.section-content,
.card-body {
    padding: 1.25rem;
}

/* ========================================
   TABELAS
   ======================================== */

.table {
    margin-bottom: 0;
    font-size: 0.855rem;
}

.table thead th {
    background-color: #f8fafc;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
    padding: 0.7rem 1rem;
    white-space: nowrap;
}

.table tbody td {
    padding: 0.7rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    color: var(--text-primary);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table tbody tr {
    transition: background-color 0.15s ease;
}

.table tbody tr:hover {
    background-color: #fafbfc;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(0,0,0,0.018);
}

/* checkboxes maiores nas tabelas de pedidos */
.table .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

/* ========================================
   BOTÕES
   ======================================== */

.btn {
    border-radius: var(--radius);
    font-weight: 500;
    font-size: 0.855rem;
    padding: 0.475rem 1rem;
    transition: var(--transition);
}

.btn-primary {
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    color: white;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: white;
}

.btn-outline-primary {
    color: var(--brand-secondary);
    border-color: var(--brand-secondary);
}

.btn-outline-primary:hover {
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    color: white;
}

/* ========================================
   FORMULÁRIOS
   ======================================== */

.form-control,
.form-select {
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    font-size: 0.875rem;
    padding: 0.475rem 0.85rem;
    color: var(--text-primary);
    background-color: #fff;
    transition: var(--transition);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(188, 194, 160, 0.2);
    outline: none;
}

.form-label {
    font-weight: 500;
    font-size: 0.855rem;
    margin-bottom: 0.4rem;
    color: var(--text-primary);
}

.form-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ========================================
   BADGES
   ======================================== */

.badge {
    font-weight: 500;
    font-size: 0.72rem;
    padding: 0.35em 0.65em;
    border-radius: 6px;
}

/* ========================================
   PAGINAÇÃO
   ======================================== */

.pagination {
    margin: 0;
}

.pagination .page-link {
    color: var(--brand-secondary);
    border-color: var(--border-color);
    font-size: 0.845rem;
    padding: 0.375rem 0.7rem;
    transition: var(--transition);
}

.pagination .page-link:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-dark);
}

.pagination .page-item.active .page-link {
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    color: white;
}

.pagination .page-item.disabled .page-link {
    color: var(--text-muted-color);
    background-color: #fff;
    border-color: var(--border-color);
}

/* ========================================
   LOGIN PAGE
   ======================================== */

.login-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, #1e2532 0%, #2c3a52 50%, #3c4f6e 100%);
}

.login-marca {
    margin-bottom: 1.5rem;
}

.login-marca img {
    width: 100%;
    max-width: 320px;
    height: auto;
}

.login-card {
    width: 100%;
    max-width: 420px;
    padding: 2.5rem;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.login-title {
    text-align: center;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 0.4rem;
}

.login-subtitle {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 1.75rem;
}

/* ========================================
   ALERTAS
   ======================================== */

.alert {
    border-radius: var(--radius);
    font-size: 0.875rem;
    border: none;
    padding: 0.875rem 1rem;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */

.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    z-index: 9999;
}

.loading-overlay .spinner-border {
    width: 2.8rem;
    height: 2.8rem;
    color: #0d6efd !important;
}

.loading-overlay .loading-texto {
    margin: 0;
    font-size: .95rem;
    font-weight: 500;
    color: #333;
}

/* ========================================
   RESPONSIVIDADE
   ======================================== */

@media (max-width: 992px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-wrapper {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .main-content {
        padding: 1.25rem;
    }

    .dashboard-cards {
        grid-template-columns: 1fr 1fr;
        gap: 0.875rem;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: 1rem;
    }

    /* Dois por linha tambem no celular: em uma coluna so, os quatro cards
       ocupavam a tela inteira e era preciso rolar para ver o ultimo -- que e
       justamente o de cancelados. Para caber em meia largura, o icone e os
       espacos encolhem e o numero cede um pouco de corpo. */
    .dashboard-cards {
        grid-template-columns: 1fr 1fr;
        gap: 0.625rem;
    }

    .dashboard-cards .card {
        padding: 0.85rem 0.75rem;
        gap: 0.6rem;
    }

    .dashboard-cards .card-icon {
        width: 38px;
        height: 38px;
        border-radius: 8px;
        flex-shrink: 0;
    }

    .dashboard-cards .card-icon i { font-size: 1rem; }

    .dashboard-cards .card-content h3 { font-size: 1.35rem; }
    .dashboard-cards .card-content p  { font-size: 0.7rem; line-height: 1.2; }
    .dashboard-cards .card-valor      { font-size: 0.78rem; }

    .topbar {
        padding: 0 1rem;
    }

    .card-icon {
        width: 44px;
        height: 44px;
    }

    .card-content h3 {
        font-size: 1.4rem;
    }
}

/* Valor por grupo nos cards do dashboard */
.card-content .card-valor {
    margin: 0.15rem 0 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #1a202c);
    white-space: nowrap;
}


/* Linha marcada numa lista. Sutil de proposito: precisa se distinguir do
   zebrado e do hover sem competir com os avisos coloridos da propria linha
   (score, captura, etiquetas de loteria). O !important vence o box-shadow que
   o Bootstrap usa para pintar as linhas da tabela. */
tr.linha-marcada > td,
tr.linha-marcada > th {
    background-color: #eaf1fb !important;
}

tr.linha-marcada > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--brand-primary, #bcc2a0);
}


/* ========================================
   TABELA QUE VIRA BLOCOS NO CELULAR
   ========================================
   Uma lista de pedidos tem nove colunas. Em tela de celular nao ha largura para
   isso: ou se esconde metade -- e o operador perde pagamento, captura e ESN,
   que e o que ele precisa para decidir -- ou se empurra a tabela para uma barra
   de rolagem lateral, que ninguem usa.

   Aqui cada linha vira um bloco e cada celula vira "rotulo: valor". Nada e
   escondido e nao ha rolagem horizontal. No desktop continua tabela. */

@media (max-width: 767.98px) {
    .tabela-cartoes thead { display: none; }

    .tabela-cartoes,
    .tabela-cartoes tbody,
    .tabela-cartoes tr,
    .tabela-cartoes td {
        display: block;
        width: 100%;
    }

    .tabela-cartoes tr {
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        margin-bottom: .75rem;
        padding: .5rem .25rem;
        background: var(--card-bg);
    }

    /* Rotulo ACIMA do valor, e a celula como bloco.
       Com a celula em flex, cada filho dela virava uma coluna: a celula do
       cliente, que tem nome, e-mail, data de cadastro e origem, saia espremida
       em quatro colunas de uma palavra cada. Em bloco, o conteudo da celula se
       comporta como no desktop e so o rotulo e acrescentado. */
    .tabela-cartoes td {
        display: block;
        border: 0;
        padding: .35rem .75rem;
        text-align: left !important;
    }

    .tabela-cartoes td[data-rotulo]::before {
        content: attr(data-rotulo);
        display: block;
        font-size: .68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--text-muted-color, #6c757d);
        margin-bottom: .05rem;
    }

    /* Valores curtos nao merecem duas linhas: ficam ao lado do rotulo. */
    .tabela-cartoes td[data-rotulo].valor-curto {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: .75rem;
    }
    .tabela-cartoes td[data-rotulo].valor-curto::before { margin-bottom: 0; }

    /* Celula vazia so mostraria um rotulo solto; o script marca e ela some. */
    .tabela-cartoes td.celula-vazia { display: none !important; }

    .tabela-cartoes .text-nowrap { white-space: normal !important; }

    /* A caixa de selecao fica no alto do bloco, sem rotulo. */
    .tabela-cartoes td:not([data-rotulo]) { padding-bottom: 0; }

    /* A faixa lateral da linha marcada nao cabe num bloco; vira contorno. */
    tr.linha-marcada > td:first-child { box-shadow: none; }
    .tabela-cartoes tr.linha-marcada { border-color: var(--brand-primary, #bcc2a0); }

    /* Botoes de acao em lote: largura inteira, um por linha, sem texto cortado. */
    .acoes-lote { width: 100%; }
    .acoes-lote .btn { flex: 1 1 100%; }

    /* A area rolavel da pesquisa de grupos limitava a altura para caber na tela
       do desktop; em blocos ela vira uma janelinha apertada dentro da pagina. */
    .tabela-grupos-area { max-height: none !important; overflow: visible !important; }

    /* O cabecalho fixo nao faz sentido sem cabecalho. */
    .tabela-grupos.tabela-cartoes thead th { position: static; }

    /* Celula que so tem um botao de acao: sem rotulo, ele ocupa a linha toda.
       "Apurar Resultado" ao lado de um rotulo vazio ficava espremido. */
    .tabela-cartoes td:not([data-rotulo]) .btn { width: 100%; }
    .tabela-cartoes td:not([data-rotulo]) form { width: 100%; }

    /* O listrado do Bootstrap pinta CELULA por celula. Em bloco, cada celula e
       uma faixa de largura inteira: o cartao ficava com bandas cinzas separadas
       por frestas brancas. Aqui o fundo passa a ser da LINHA e o cartao vira
       uma peca so. */
    .tabela-cartoes > tbody > tr > td {
        border: 0;                              /* .table tbody td poe um risco embaixo */
        box-shadow: none !important;
        background-color: transparent !important;
    }
    .tabela-cartoes tr.linha-marcada { background: #eaf1fb; }


    /* ---- Pares lado a lado nas listas de pedidos ----
       Pedido|Data, Cliente|Score e Pagamento|Valor dividem a mesma faixa: sao
       valores curtos que, empilhados, dobravam a altura do cartao sem ajudar a
       ler. A ordem visual nao e a do HTML -- o score sobe para a linha do
       cliente e o valor desce para a do pagamento --, dai o 'order'. */
    .cartoes-pedidos > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    /* Quem nao for posicionado abaixo fica no fim, na ordem do HTML. */
    .cartoes-pedidos > tbody > tr > td { order: 20; width: 100%; }

    /* As larguras de cada par somam exatamente 100%: e isso que garante a
       quebra depois do segundo. Com largura automatica os tres primeiros
       cabiam na mesma faixa e o valor sumia para fora do cartao. */
    .cartoes-pedidos td:not([data-rotulo])       { order: 1; }
    .cartoes-pedidos td[data-rotulo="Pedido"]    { order: 2; flex: 0 0 50%; width: 50%; min-width: 0; }
    .cartoes-pedidos td[data-rotulo="Data"]      { order: 3; flex: 0 0 50%; width: 50%; min-width: 0; }
    .cartoes-pedidos td[data-rotulo="Cliente"]   { order: 4; flex: 0 0 70%; width: 70%; min-width: 0; }
    .cartoes-pedidos td[data-rotulo="Score"]     { order: 5; flex: 0 0 30%; width: 30%; min-width: 0; }
    .cartoes-pedidos td[data-rotulo="Pagamento"] { order: 6; flex: 0 0 60%; width: 60%; min-width: 0; }
    .cartoes-pedidos td[data-rotulo="Valor"]     { order: 7; flex: 0 0 40%; width: 40%; min-width: 0; }

    /* Aqui o rotulo fica sempre ACIMA do valor: numa coluna que e metade da
       tela, 'valor-curto' afastaria os dois para os extremos da coluna. */
    .tabela-cartoes.cartoes-pedidos td[data-rotulo].valor-curto { display: block; }

    .cartoes-pedidos td[data-rotulo="Score"],
    .cartoes-pedidos td[data-rotulo="Valor"] { text-align: right !important; }

    /* Pagamento e uma coluna estreita e centralizada no desktop, entao icone,
       nome e agencia ficam empilhados. No cartao ha largura de sobra: viram uma
       linha so, alinhada a esquerda. */
    .cartoes-pedidos td[data-rotulo="Pagamento"] .d-flex {
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center !important;
        justify-content: flex-start !important;
        column-gap: .4rem;
    }

    /* O .fa-lg do Font Awesome zera a entrelinha (line-height: .05em). Na tabela
       do desktop isso passa batido; no cartao o icone subia por cima do rotulo. */
    .cartoes-pedidos td[data-rotulo="Pagamento"] .fa-lg {
        line-height: 1;
        vertical-align: baseline;
    }

    /* Alvos de toque: a bolinha de captura e o log da operadora sao clicaveis e
       tem 14px no desktop -- com o dedo nao se acerta. */
    .cartoes-pedidos td[data-rotulo="Captura"] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .25rem 1.25rem;
    }
    .cartoes-pedidos td[data-rotulo="Captura"]::before { flex: 1 1 100%; }
    .cartoes-pedidos td[data-rotulo="Captura"] .captura-dot { width: 22px; height: 22px; }
    .cartoes-pedidos td[data-rotulo="Captura"] .btn { padding: .25rem !important; }
    .cartoes-pedidos td[data-rotulo="Captura"] .btn-log-cartao i { font-size: 1.6rem; }
}