/* =========================================================
   Responsividade global da Área do Cliente SFIEC
   Aplica melhorias de layout para desktop e, principalmente,
   para dispositivos móveis em todas as telas /financeiro.
   Inclua este arquivo após show.css / perfil-saude.css.
   ========================================================= */

/* ---------- Base ---------- */
* {
    box-sizing: border-box;
}

/* Linha de detalhes recolhida.
   O seletor é intencionalmente MAIS específico que a regra responsiva
   ".table-contratos > tbody > tr.detalhe-row { display: block !important }".
   Como ambas usam !important, quem vence é a de maior especificidade —
   por isso repetimos toda a cadeia + a classe .detalhe-oculto. Sem isso,
   o painel abria mas não fechava no mobile. */
.detalhe-oculto,
.table-contratos > tbody > tr.detalhe-row.detalhe-oculto {
    display: none !important;
}



img {
    max-width: 100%;
}

/* Evita scroll horizontal acidental da página inteira */
html,
body {
    overflow-x: hidden;
}

/* Garante que tabelas dentro de .table-responsive realmente rolem no mobile */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   HEADER / PERFIL
   ============================================================ */
@media (max-width: 768px) {
    .header {
        padding: 12px 0 !important;
    }

    .header-flex {
        align-items: center;
        gap: 10px;
    }

    .header-flex .header-logo {
        max-width: 55% !important;
    }

    .header-flex .header-logo img {
        height: 38px !important;
        width: auto;
    }

    .header-flex .header-menu {
        max-width: 45% !important;
    }

    .perfil-nome {
        font-size: 14px !important;
        max-width: 130px !important;
    }

    .perfil-portal {
        font-size: 11px !important;
    }

    .dropdown-menu {
        min-width: 200px !important;
    }
}

@media (max-width: 420px) {
    .perfil-nome {
        max-width: 90px !important;
    }
}

/* ============================================================
   CONTAINERS / ESPAÇAMENTO
   ============================================================ */
@media (max-width: 768px) {

    .container,
    .container-fluid {
        padding-left: 14px;
        padding-right: 14px;
    }

    .breadcrumb {
        font-size: 0.8rem;
        flex-wrap: wrap;
    }
}

/* ============================================================
   TABELAS GENÉRICAS
   No mobile, permite rolagem horizontal suave em vez de quebrar.
   ============================================================ */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto;
    }

    .table-responsive>.table {
        min-width: 560px;
    }
}

/* ============================================================
   INDEX — KPIs e Ações rápidas
   ============================================================ */
@media (max-width: 768px) {
    .fin-hero {
        padding: 20px 0 24px !important;
    }

    .fin-hero h1 {
        font-size: 1.15rem !important;
    }

    .action-card {
        padding: 18px 14px !important;
    }

    .action-card .ac-icon {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 10px !important;
    }

    .action-card .ac-icon i {
        font-size: 20px !important;
    }

    .action-card h6 {
        font-size: 0.88rem !important;
    }

    .action-card p {
        font-size: 0.72rem !important;
    }

    .alert-vencido {
        flex-direction: column;
        align-items: flex-start !important;
        text-align: left;
    }

    .alert-vencido .btn {
        width: 100%;
        text-align: center;
    }
}

/* Em telas muito pequenas, KPIs em 1 coluna para não comprimir os valores */
@media (max-width: 400px) {
    .kpi-value {
        font-size: 1rem !important;
    }
}

/* ============================================================
   TÍTULOS — Dashboard de filiais e listagem
   ============================================================ */
@media (max-width: 768px) {

    /* Barra de filtros empilha */
    .filter-bar .row {
        flex-direction: column;
    }

    .filter-bar .col-md-2 {
        margin-top: 8px;
    }

    .filter-bar .col-md-2 .btn {
        flex: 1;
    }

    /* Abas de status com rolagem horizontal */
    .tab-status-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }

    .tab-status-btn {
        flex-shrink: 0;
        padding: 8px 12px;
        font-size: 0.78rem;
    }

    .summary-card {
        padding: 16px !important;
    }

    .summary-card .icon-box {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.25rem !important;
    }

    .summary-card .value {
        font-size: 1.1rem !important;
    }

    .summary-card .value.sm {
        font-size: 1.3rem !important;
    }
}

/* ============================================================
   TÍTULOS — Detalhes expandidos (tabela de parcelas)
   No mobile, transforma a tabela de títulos em "cartões",
   mostrando TODAS as colunas empilhadas (rótulo + valor),
   sem necessidade de rolagem horizontal.
   ============================================================ */
@media (max-width: 768px) {

    /* A primeira tabela agora vira cartões no mobile (não rola mais na
       horizontal), então os detalhes expandidos ocupam a largura total
       do cartão, sem o antigo alinhamento à direita. */
    .detalhe-row > td {
        padding: 0 !important;
        white-space: normal !important;
    }

    .detalhe-titulos {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .detalhe-titulos .detalhe-tabela {
        min-width: 0 !important;
        width: 100% !important;
    }

    .detalhe-tabela thead {
        display: none !important;
    }

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

    .detalhe-tabela tr.modal-titulo-row {
        background: #fff;
        border: 1px solid #e9edf2;
        border-radius: 10px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
        margin: 10px 12px;
        padding: 4px 0;
        overflow: hidden;
    }

    .detalhe-tabela tr.modal-titulo-row td {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center;
        gap: 10px;
        text-align: left !important;
        padding: 10px 14px !important;
        border: none !important;
        border-top: 1px solid #f0f2f5 !important;
        white-space: normal !important;
    }

    .detalhe-tabela tr.modal-titulo-row td:first-child {
        border-top: none !important;
    }

    .detalhe-tabela tr.modal-titulo-row td::before {
        content: attr(data-label);
        font-weight: 600 !important;
        color: #6c757d !important;
        text-align: left;
        flex: 0 0 130px;
        white-space: nowrap;
    }

    .detalhe-tabela tr.modal-titulo-row td[data-label="Ações"] {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
    }

    .detalhe-tabela tr.modal-titulo-row td[data-label="Ações"] .btn {
        margin: 0 !important;
    }

    .detalhe-tabela tr td[colspan]::before {
        content: "";
        display: none;
    }

    .detalhe-tabela tr td[colspan] {
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ============================================================
   TÍTULOS — Listagem de matrículas/contratos (primeira tabela)
   No mobile, transforma cada linha (aluno, matrícula, serviço,
   situação, valores, ações) em um "cartão" com os dados
   empilhados verticalmente (rótulo + valor), sem depender de
   rolagem horizontal — igual ao comportamento dos detalhes.
   ============================================================ */
@media (max-width: 768px) {

    /* O card externo não precisa da borda/sombra dupla no mobile:
       cada linha já vira um cartão próprio. */
    .table-contratos-wrapper {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Não força largura mínima: a tabela vira cartões */
    .contratos-responsive {
        overflow-x: hidden !important;
        border-radius: 0 !important;
    }

    .table-contratos {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: auto !important;
        background: transparent !important;
    }

    /* Esconde o cabeçalho (os rótulos vão para cada célula) */
    .table-contratos thead {
        display: none !important;
    }

    .table-contratos tbody {
        display: block !important;
        width: 100% !important;
    }

    /* Cada linha de contrato vira um cartão */
    .table-contratos > tbody > tr.contrato-row {
        display: block !important;
        width: 100% !important;
        background: #fff;
        border: 1px solid #e6eaf0;
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(17, 39, 82, 0.06);
        margin: 0 0 16px 0;
        padding: 0;
        overflow: hidden;
    }

    /* Remove o hover (fundo cinza) que não faz sentido em cartão */
    .table-contratos > tbody > tr.contrato-row:hover {
        background: #fff;
    }

    /* Cada célula (linha de dado): rótulo à esquerda, valor à direita */
    .table-contratos > tbody > tr.contrato-row > td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center;
        gap: 16px;
        text-align: right !important;
        padding: 13px 18px !important;
        border: none !important;
        border-top: 1px solid #f1f3f7 !important;
        white-space: normal !important;
        width: 100% !important;
    }

    /* Rótulo (coluna) */
    .table-contratos > tbody > tr.contrato-row > td::before {
        content: attr(data-label);
        font-weight: 600 !important;
        font-size: 0.78rem !important;
        color: #8a94a6 !important;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        text-align: left;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Valor (conteúdo) */
    .table-contratos > tbody > tr.contrato-row > td > div {
        text-align: right;
        font-weight: 600 !important;
        color: #2b3440 !important;
    }

    /* ---- Cabeçalho do cartão: linha "Aluno" em destaque azul ---- */
    .table-contratos > tbody > tr.contrato-row > td[data-label="Aluno"] {
        background: #0057b8;
        padding: 15px 18px !important;
        border-top: none !important;
    }

    .table-contratos > tbody > tr.contrato-row > td[data-label="Aluno"]::before {
        color: rgba(255, 255, 255, 0.75) !important;
    }

    .table-contratos > tbody > tr.contrato-row > td[data-label="Aluno"] > div {
        color: #fff !important;
        font-weight: 700 !important;
    }

    /* ---- Valores: total/aberto empilhados e alinhados à direita ---- */
    .table-contratos > tbody > tr.contrato-row > td[data-label="Valores"] .valores-cell {
        text-align: right;
        line-height: 1.5;
    }

    /* ---- Situação: badge encostado à direita ---- */
    .table-contratos > tbody > tr.contrato-row > td[data-label="Situação"] {
        justify-content: space-between !important;
    }

    /* ---- Ações: botão de expandir ocupa a largura toda ---- */
    .table-contratos > tbody > tr.contrato-row > td[data-label="Ações"] {
        justify-content: space-between !important;
        background: #fbfcfe;
    }

    .table-contratos > tbody > tr.contrato-row > td[data-label="Ações"] .btn-toggle-detalhes {
        border-radius: 8px;
        padding: 8px 16px;
    }

    /* ---- Linha de detalhes expandidos ---- */
    /* Usa combinador filho (> td) para NÃO afetar as células da tabela
       de detalhes que fica aninhada dentro desta linha. */
    .table-contratos > tbody > tr.detalhe-row {
        display: block !important;
        width: 100% !important;
        /* "puxa" a linha de detalhes para junto do cartão anterior */
        margin: -16px 0 16px 0 !important;
    }

    .table-contratos > tbody > tr.detalhe-row > td {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        background: #f5f7fa !important;
        border: 1px solid #e6eaf0 !important;
        border-top: none !important;
        border-radius: 0 0 14px 14px !important;
    }

    .table-contratos > tbody > tr.detalhe-row > td::before {
        content: "";
        display: none !important;
    }
}

/* ============================================================
   TÍTULOS — Dashboard de filiais (tabela resumo)
   No mobile, transforma cada linha da tabela de filiais em um
   "cartão" com os dados empilhados verticalmente (rótulo + valor),
   deixando evidente que existem várias informações — sem depender
   de rolagem horizontal que passa despercebida pelo usuário.
   ============================================================ */
@media (max-width: 768px) {

    /* Não força largura mínima nesta tabela: ela vira cartões */
    .dashboard-table .table-responsive {
        overflow-x: hidden !important;
    }

    .dashboard-table .table-filiais {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Esconde o cabeçalho da tabela (os rótulos vão para cada célula) */
    .table-filiais thead {
        display: none !important;
    }

    .table-filiais,
    .table-filiais tbody,
    .table-filiais tr,
    .table-filiais td {
        display: block !important;
        width: 100% !important;
    }

    /* Cada linha vira um cartão */
    .table-filiais tr.filial-row {
        background: #fff;
        border: 1px solid #e9edf2;
        border-radius: 12px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
        margin: 0 0 14px 0;
        padding: 4px 0;
        overflow: hidden;
    }

    .table-filiais tr.filial-row:last-child {
        margin-bottom: 0;
    }

    /* Cabeçalho do cartão: nome da filial em destaque */
    .table-filiais tr.filial-row td[data-label="Filial"] {
        background: #174195;
        padding: 14px 16px !important;
        border: none !important;
    }

    .table-filiais tr.filial-row td[data-label="Filial"] .filial-cell {
        color: #fff !important;
    }

    .table-filiais tr.filial-row td[data-label="Filial"] .filial-cell span {
        color: #fff !important;
    }

    .table-filiais tr.filial-row td[data-label="Filial"] .filial-icon {
        background: rgba(255, 255, 255, 0.18);
        color: #fff;
    }

    .table-filiais tr.filial-row td[data-label="Filial"]::before {
        content: "";
        display: none;
    }

    /* Demais células: rótulo à esquerda, valor à direita */
    .table-filiais tr.filial-row td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center;
        gap: 12px;
        text-align: right !important;
        padding: 12px 16px !important;
        border: none !important;
        border-top: 1px solid #f0f2f5 !important;
        white-space: normal !important;
    }

    .table-filiais tr.filial-row td::before {
        content: attr(data-label);
        font-weight: 600 !important;
        color: #6c757d !important;
        text-align: left;
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Célula de ação: botão ocupa toda a largura para facilitar o toque */
    .table-filiais tr.filial-row td[data-label="Ação"] {
        justify-content: center !important;
    }

    .table-filiais tr.filial-row td[data-label="Ação"]::before {
        display: none;
    }

    .table-filiais tr.filial-row td[data-label="Ação"] .btn-visualizar-filial {
        width: 100%;
        justify-content: center;
        color: #fff !important;
    }

    .table-filiais tr.filial-row td[data-label="Ação"] .btn-visualizar-filial i,
    .table-filiais tr.filial-row td[data-label="Ação"] .btn-visualizar-filial .btn-visualizar-filial-text {
        color: #fff !important;
    }


    /* Estado vazio ocupa o cartão inteiro sem rótulo */
    .table-filiais tr td[colspan]::before {
        content: "";
        display: none;
    }

    .table-filiais tr td[colspan] {
        justify-content: center !important;
        text-align: center !important;
    }
}

/* No desktop o texto do botão "Visualizar" fica oculto (só o ícone),
   como no layout original. No mobile ele aparece para dar clareza. */
.btn-visualizar-filial-text {
    display: none;
}

@media (max-width: 768px) {
    .btn-visualizar-filial-text {
        display: inline;
    }
}

/* ============================================================
   RENEGOCIAÇÃO — Wizard de etapas
   ============================================================ */

@media (max-width: 768px) {
    #wizard-renegociacao .title {
        font-size: 1.25rem;
    }

    /* Indicador de etapas compacto e com rolagem se necessário */
    #wizard-renegociacao .d-flex.justify-content-center {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }

    .step-item {
        padding: 0 6px !important;
        flex-shrink: 0;
    }

    .step-circle {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.85rem;
    }

    .step-label {
        font-size: 11px !important;
        white-space: nowrap;
    }

    .step-line {
        margin: 16px 4px 0 !important;
        max-width: 30px !important;
        min-width: 14px;
    }

    /* Resumo geral: cada bloco com respiro */
    #step-1 .row.align-items-center.text-center>[class*="col-"],
    #step-3 .row.align-items-center.text-center>[class*="col-"] {
        margin-bottom: 8px;
    }

    /* Step 4: cupom/colunas empilham (já são col-md, mas reforça gaps) */
    #step-4 .col-md-4,
    #step-4 .col-md-8 {
        margin-bottom: 12px;
    }

    /* Step 5: colunas de confirmação empilhadas com respiro */
    #step-5 .col-md-4,
    #step-5 .col-md-3,
    #step-5 .col-md-5 {
        margin-bottom: 14px;
    }

    /* Botões de navegação do wizard ocupam largura confortável */
    .wizard-step .d-flex.justify-content-between .btn {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* Rodapé fixo de resumo empilha conteúdo */
    #rodape-resumo .d-flex.justify-content-between {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
    }

    #rodape-resumo .d-flex.gap-2 {
        flex-direction: column;
        gap: 8px;
    }

    #rodape-resumo .d-flex.gap-2 .btn {
        width: 100%;
    }
}

/* ============================================================
   MODAIS (titulos / renegociação)
   ============================================================ */
@media (max-width: 768px) {

    .modal-dialog {
        margin: 0.6rem !important;
        max-width: calc(100% - 1.2rem) !important;
    }

    .modal-content {
        width: 100% !important;
    }

    /* Tabela do modal de títulos com rolagem horizontal */
    #modalTitulos .modal-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #modalTitulos .modal-body .table {
        min-width: 760px;
    }
}

/* ============================================================
   FORMULÁRIOS (meus-dados, login e demais telas de auth)
   ============================================================ */
@media (max-width: 768px) {

    .form-control,
    .form-select {
        font-size: 16px;
        /* evita zoom automático no iOS ao focar inputs */
    }

    .btn-lg {
        font-size: 0.95rem;
        padding: 10px 16px;
    }

    /* Botões agrupados horizontalmente passam a empilhar no mobile */
    .d-flex.justify-content-center.gap-3 {
        flex-direction: column;
        gap: 10px !important;
    }

    .d-flex.justify-content-center.gap-3 .btn {
        width: 100%;
    }
}