/* =========================================================================
   RBytesLinhaAmarela — adaptação para celulares e tablets
   Carregado por último em todos os layouts (interno, público e autenticação),
   depois de site.css / landing.css / autenticacao.css e dos estilos das páginas.

   Faixas usadas:
   - Toque (qualquer tamanho) .......... (hover: none) and (pointer: coarse)
   - Tablets e celulares ............... max-width: 991.98px (menu lateral recolhível)
   - Celulares e tablets em retrato .... max-width: 767.98px (tabelas viram cartões)
   - Celulares pequenos ................ max-width: 575.98px
   - Celular deitado ................... max-height: 500px e orientação paisagem
   Todas as regras de layout são restritas à tela (screen): a impressão e o PDF
   do boletim, do contrato e da OS continuam com o layout de documento.
   ========================================================================= */

/* ---------- Base (todas as telas) ---------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* A altura "100vh" dos navegadores móveis inclui a barra de endereço; "dvh" acompanha a área realmente visível. */
.app-shell,
.app-main {
    min-height: 100vh;
    min-height: 100dvh;
}

/* Textos longos (e-mails, links, nomes de obras) nunca empurram a página para os lados. */
.card-ra,
.kpi-card,
.dados-ra dd,
.pagina-titulo,
.pagina-subtitulo,
.faixa-alerta,
.alert {
    overflow-wrap: break-word;
}

/* =========================================================================
   1. TELAS DE TOQUE (celulares e tablets, inclusive iPad em paisagem)
   ========================================================================= */
@media (hover: none) and (pointer: coarse) {
    a,
    button,
    .btn,
    .nav-link,
    .page-link,
    .dropdown-item,
    .form-check-label,
    summary {
        -webkit-tap-highlight-color: rgba(255, 184, 0, .2);
        touch-action: manipulation;
    }

    /* Campos com fonte menor que 16px fazem o Safari (iPhone/iPad) dar zoom ao tocar. */
    .form-control,
    .form-select,
    .input-group-text,
    .form-control-sm,
    .form-select-sm,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    .form-control,
    .form-select {
        min-height: 44px;
    }

    textarea.form-control {
        min-height: 88px;
    }

    /* Alvos de toque de pelo menos 44px (botões pequenos das tabelas: 38px). */
    .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn.btn-sm,
    .btn-group-sm > .btn {
        min-height: 38px;
        min-width: 38px;
        padding-inline: .7rem;
    }

    .btn-close {
        width: 1.25em;
        height: 1.25em;
        padding: .75em;
    }

    .btn-icone {
        min-width: 44px;
        min-height: 44px;
    }

    .page-link {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dropdown-item {
        padding-top: .7rem;
        padding-bottom: .7rem;
    }

    .app-sidebar .nav-link {
        min-height: 46px;
    }

    .abas-ra .nav-link {
        min-height: 46px;
    }

    .breadcrumb-item a {
        display: inline-block;
        padding: .2rem 0;
    }

    .form-check {
        min-height: 1.9rem;
    }

    .form-check-input {
        width: 1.3em;
        height: 1.3em;
        margin-top: .1em;
    }

    .form-switch .form-check-input {
        width: 2.4em;
    }

    .form-check-label {
        padding-left: .2rem;
    }

    /* Efeitos de "passar o mouse" ficam presos após o toque: desligados em telas de toque. */
    .lp-pilar:hover,
    .lp-modulo:hover,
    .whatsapp-flutuante:hover {
        transform: none;
    }

    .whatsapp-flutuante:hover .whatsapp-flutuante-rotulo {
        max-width: 0;
    }

    /* Datas no iOS: altura igual à dos demais campos e valor alinhado à esquerda. */
    input[type="date"].form-control,
    input[type="datetime-local"].form-control,
    input[type="time"].form-control,
    input[type="month"].form-control {
        -webkit-appearance: none;
        appearance: none;
        display: block;
        width: 100%;
        min-width: 0;
        line-height: 1.5;
    }

    input[type="date"]::-webkit-date-and-time-value,
    input[type="datetime-local"]::-webkit-date-and-time-value,
    input[type="time"]::-webkit-date-and-time-value {
        text-align: left;
        min-height: 1.5em;
    }
}

/* =========================================================================
   2. TABLETS E CELULARES (menu lateral recolhível)
   ========================================================================= */
@media screen and (max-width: 991.98px) {
    /* Menu lateral (offcanvas): largura adequada ao celular e respeito ao entalhe do iPhone. */
    .app-sidebar.offcanvas-lg {
        --bs-offcanvas-width: min(300px, 86vw);
        padding-left: env(safe-area-inset-left);
    }

    .app-sidebar-nav {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .app-sidebar-footer {
        padding-bottom: calc(.9rem + env(safe-area-inset-bottom));
    }

    .app-topbar {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .app-conteudo {
        padding: 1.25rem max(1.25rem, env(safe-area-inset-right)) 1.5rem max(1.25rem, env(safe-area-inset-left));
    }

    /* O botão flutuante do WhatsApp não cobre o fim da página: espaço reservado no rodapé. */
    .app-rodape,
    .lp-rodape-base,
    .auth-rodape {
        padding-bottom: calc(1rem + 72px + env(safe-area-inset-bottom));
    }

    .whatsapp-flutuante {
        bottom: calc(16px + env(safe-area-inset-bottom));
        right: calc(16px + env(safe-area-inset-right));
    }

    /* Com um modal ou o menu aberto, o botão flutuante sai de cena (não cobre os botões do modal). */
    body.modal-open .whatsapp-flutuante,
    body:has(.app-sidebar.showing, .app-sidebar.show) .whatsapp-flutuante,
    body:has(.lp-navbar .navbar-collapse.show) .whatsapp-flutuante {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* Tabelas que continuam roláveis (tablets): sombra nas bordas indica que há mais colunas. */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        background:
            linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local,
            linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgba(16, 24, 40, .16), transparent) left center / 12px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(16, 24, 40, .16), transparent) right center / 12px 100% no-repeat scroll;
        background-color: #fff;
    }

    .table-responsive > .table {
        --bs-table-bg: transparent;
    }

    /* Abas roláveis com o dedo, sem barra de rolagem aparente. */
    .abas-ra {
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .abas-ra::-webkit-scrollbar {
        display: none;
    }

    .abas-ra .nav-link {
        scroll-snap-align: start;
    }

    .pagination {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: .35rem;
    }

    .dropdown-menu {
        max-width: calc(100vw - 1.5rem);
    }
}

/* =========================================================================
   3. CELULARES E TABLETS EM RETRATO
   ========================================================================= */
@media screen and (max-width: 767.98px) {
    /* ---------- Cabeçalho da página: título em cima, ações ocupando a largura ---------- */
    .pagina-cabecalho {
        flex-direction: column;
        align-items: stretch;
        gap: .85rem;
        margin-bottom: 1rem;
    }

    .pagina-titulo {
        font-size: 1.4rem;
        line-height: 1.2;
    }

    .pagina-acoes {
        width: 100%;
    }

    .pagina-acoes > .btn,
    .pagina-acoes > form,
    .pagina-acoes > .dropdown,
    .pagina-acoes > .btn-group {
        flex: 1 1 calc(50% - .25rem);
    }

    .pagina-acoes > form > .btn,
    .pagina-acoes > .dropdown > .btn,
    .pagina-acoes > .btn-group > .btn {
        width: 100%;
    }

    /* ---------- Cards ---------- */
    .card-ra > .card-header {
        flex-wrap: wrap;
        padding: .85rem 1rem;
        font-size: 1rem;
    }

    .card-ra > .card-body {
        padding: 1rem;
    }

    .card-ra > .card-footer {
        padding: .85rem 1rem;
    }

    /* Rodapés de formulário: botão principal em cima e na largura toda, "Cancelar" logo abaixo. */
    .card-footer.d-flex.justify-content-end:not(.flex-sm-row) {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .card-footer.d-flex.justify-content-end:not(.flex-sm-row) > .btn,
    .card-footer.d-flex.justify-content-end:not(.flex-sm-row) > a.btn,
    .card-footer.d-flex.justify-content-end:not(.flex-sm-row) > form > .btn {
        width: 100%;
    }

    .filtros-ra {
        padding: .9rem 1rem;
    }

    /* ---------- Indicadores (KPI) compactos ---------- */
    .kpi-card {
        padding: .85rem 1rem;
        gap: .85rem;
    }

    .kpi-icone {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        font-size: 1.15rem;
    }

    .kpi-valor {
        font-size: 1.35rem;
    }

    /* ---------- Listas de dados (telas de detalhes): duas colunas ---------- */
    .dados-ra {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: .85rem 1rem;
    }

    /* ---------- Tabelas como cartões ----------
       O site.js marca as tabelas .tabela-ra com .tabela-cartoes e grava em cada célula o nome da coluna (data-rotulo).
       Cada linha vira um cartão: a primeira coluna é o título; as demais aparecem como "rótulo ...... valor".
       Sem JavaScript, a tabela continua rolando na horizontal. */
    .table-responsive:has(> .tabela-cartoes) {
        overflow: visible;
        background: transparent;
    }

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

    .tabela-cartoes > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .tabela-cartoes > tbody > tr,
    .tabela-cartoes > tfoot > tr {
        padding: .8rem 1rem;
        border-bottom: 1px solid var(--ra-borda);
    }

    .tabela-cartoes > tbody > tr:last-child {
        border-bottom: 0;
    }

    .tabela-cartoes > tfoot {
        border-top: 2px solid var(--ra-borda);
    }

    .tabela-cartoes > tfoot > tr {
        background: #FAFBFC;
    }

    /* Cada célula: rótulo flutuando à esquerda e valor à direita. "flow-root" faz a célula crescer junto com
       rótulos de duas linhas; larguras fixas definidas nas views para a tabela larga são neutralizadas. */
    .table.tabela-cartoes > tbody > tr > *,
    .table.tabela-cartoes > tfoot > tr > * {
        display: flow-root;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: .3rem 0;
        border: 0;
        box-shadow: none;
        background: transparent;
        text-align: right;
        white-space: normal;
    }

    .table.tabela-cartoes > tbody > tr > *::before,
    .table.tabela-cartoes > tfoot > tr > *::before {
        content: attr(data-rotulo);
        float: left;
        width: 42%;
        margin: .1rem .75rem 0 0;
        text-align: left;
        font-size: .7rem;
        font-weight: 700;
        line-height: 1.35;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: var(--ra-texto-suave);
        white-space: normal;
    }

    /* Primeira coluna = título do cartão; células sem rótulo (ações, totais, "nenhum registro") ocupam a largura toda. */
    .table.tabela-cartoes > tbody > tr > :first-child,
    .table.tabela-cartoes > tbody > tr > :not([data-rotulo]),
    .table.tabela-cartoes > tfoot > tr > :not([data-rotulo]) {
        text-align: left !important;
    }

    .table.tabela-cartoes > tbody > tr > :first-child::before,
    .table.tabela-cartoes > tbody > tr > :not([data-rotulo])::before,
    .table.tabela-cartoes > tfoot > tr > :not([data-rotulo])::before {
        content: none;
    }

    /* Colunas centralizadas na tabela larga ficam alinhadas à direita, como os demais valores do cartão. */
    .table.tabela-cartoes > tbody > tr > [data-rotulo]:not(:first-child).text-center,
    .table.tabela-cartoes > tfoot > tr > [data-rotulo].text-center {
        text-align: right !important;
    }

    .table.tabela-cartoes > tbody > tr > :first-child {
        font-size: 1rem;
        padding-bottom: .45rem;
    }

    .table.tabela-cartoes > tfoot > tr > :not([data-rotulo]) {
        font-weight: 700;
        padding-bottom: .35rem;
    }

    .table.tabela-cartoes > tbody > tr > :empty,
    .table.tabela-cartoes > tfoot > tr > :empty {
        display: none;
    }

    /* Valores e badges alinhados à direita, sem estourar a largura do cartão. */
    .tabela-cartoes .numero {
        white-space: normal;
    }

    .tabela-cartoes td > .celula-secundaria {
        overflow-wrap: anywhere;
    }

    .tabela-cartoes td .form-control,
    .tabela-cartoes td .form-select,
    .tabela-cartoes td .input-group {
        width: 100%;
        margin-left: auto;
    }

    /* Ações da linha: botões alinhados à direita, com espaço para o dedo. */
    .table.tabela-cartoes > tbody > tr > td.acoes {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: .5rem;
        padding: .55rem 0 0;
        text-align: right !important;
    }

    .tabela-cartoes td.acoes > form {
        display: inline-flex;
    }

    /* Linhas clicáveis/realçadas do Bootstrap: o realce vai para o cartão inteiro. */
    .table-hover.tabela-cartoes > tbody > tr:hover {
        background: #FAFBFC;
    }

    /* ---------- Linha do tempo e faixas ---------- */
    .linha-tempo li {
        padding-left: 2rem;
    }

    .faixa-alerta {
        padding: .75rem .85rem;
    }

    /* ---------- Modais como painel inferior (padrão de aplicativo) ---------- */
    .modal-dialog,
    .modal-dialog-centered,
    .modal-dialog-scrollable {
        margin: 0;
        max-width: none;
        width: 100%;
        min-height: 100%;
        height: 100%;
        display: flex;
        align-items: flex-end;
    }

    .modal.fade .modal-dialog {
        transform: translateY(100%);
        transition: transform .28s ease-out;
    }

    .modal.show .modal-dialog {
        transform: none;
    }

    .modal-content,
    .modal-dialog-scrollable .modal-content {
        width: 100%;
        max-height: 92vh;
        max-height: 92dvh;
        border: 0;
        border-radius: 18px 18px 0 0;
        overflow: hidden;
        padding-top: .35rem;
    }

    /* "Alça" do painel. */
    .modal-content::before {
        content: "";
        position: absolute;
        top: .45rem;
        left: 50%;
        width: 40px;
        height: 4px;
        margin-left: -20px;
        border-radius: 999px;
        background: #D5DAE0;
    }

    .modal-body {
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
    }

    .modal-footer {
        padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
        flex-wrap: nowrap;
    }

    .modal-footer > .btn,
    .modal-footer > form {
        flex: 1 1 0;
    }

    .modal-footer > form > .btn {
        width: 100%;
    }

    /* Avisos (toasts/alertas) fixos não passam da largura da tela. */
    .toast {
        max-width: calc(100vw - 2rem);
    }
}

/* =========================================================================
   4. CELULARES PEQUENOS
   ========================================================================= */
@media screen and (max-width: 575.98px) {
    .app-topbar {
        height: 56px;
        gap: .5rem;
        padding-left: max(.75rem, env(safe-area-inset-left));
        padding-right: max(.75rem, env(safe-area-inset-right));
    }

    .app-topbar-titulo {
        font-size: 1rem;
    }

    .app-usuario {
        padding: .25rem .35rem;
    }

    .app-conteudo {
        padding: 1rem max(.85rem, env(safe-area-inset-right)) 1.25rem max(.85rem, env(safe-area-inset-left));
    }

    .pagina-titulo {
        font-size: 1.3rem;
    }

    .breadcrumb {
        font-size: .8rem;
    }

    .estado-vazio {
        padding: 2rem .75rem;
    }

    .horimetro-display {
        font-size: 1rem;
        letter-spacing: .5px;
    }

    .badge {
        white-space: normal;
        text-align: left;
    }

    .whatsapp-flutuante {
        height: 50px;
        min-width: 50px;
        padding: 0 13px;
    }

    .whatsapp-flutuante i {
        font-size: 1.4rem;
    }

    /* Botões de largura total em grupos que não cabem lado a lado. */
    .pagina-acoes > .btn,
    .pagina-acoes > form,
    .pagina-acoes > .dropdown,
    .pagina-acoes > .btn-group {
        flex-basis: calc(50% - .25rem);
    }
}

/* =========================================================================
   5. CELULAR DEITADO (altura pequena)
   ========================================================================= */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .app-topbar {
        height: 52px;
    }

    .modal-content,
    .modal-dialog-scrollable .modal-content {
        max-height: 96vh;
        max-height: 96dvh;
    }

    .whatsapp-flutuante {
        height: 44px;
        min-width: 44px;
        padding: 0 11px;
    }
}

/* =========================================================================
   6. MOVIMENTO REDUZIDO
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog {
        transition: none;
    }
}