/* Fundação responsiva compartilhada dos portais CLEAL. */
html, body { max-width: 100%; }

.nf-detail-row { display: none; }
.nf-detail-row.is-open { display: table-row; }
.nf-detail-row > td { padding-top: 0 !important; }
.nf-detail-list { border-top: 1px solid #e9e5ef; }
.nf-detail-item { display: grid; grid-template-columns: 1fr 1fr 1.35fr 1fr auto; gap: .8rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid #eeeaf2; }
.nf-detail-item:last-child { border-bottom: 0; }
.nf-detail-label { display: block; color: #64748b; font-size: .64rem; font-weight: 800; letter-spacing: .04em; margin-bottom: .2rem; text-transform: uppercase; }
.nf-expand { border: 0; background: transparent; color: #482363; font: inherit; font-weight: 800; padding: .2rem 0; text-decoration: underline; }
.nf-expand.nf-expand-button { align-items: center; background: #482363; border-radius: 7px; color: #fff; display: inline-flex; gap: .35rem; min-height: 34px; padding: .45rem .7rem; text-decoration: none; }
.nf-expand.nf-expand-button:hover { background: #361a4a; color: #fff; }

/* Rótulo visível nos botões de documento (DANFE, XML, Boleto). */
.doc-buttons .btn { display: inline-flex; align-items: center; gap: .3rem; }
.doc-buttons .doc-label { font-size: .72rem; font-weight: 700; }

/* Linha de pedido abre o detalhe; o pedido encontrado na busca fica destacado. */
#ordersTable tr.order-row { cursor: pointer; }
#ordersTable tr.order-row:focus-visible { outline: 3px solid rgba(72, 35, 99, .32); outline-offset: -3px; }
#ordersTable tr.busca-encontrado > td { background: #f3f0f7 !important; }
#ordersTable tr.busca-encontrado > td:first-child { box-shadow: inset 4px 0 0 #482363; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid rgba(72, 35, 99, .32);
    outline-offset: 2px;
}

.mobile-nav-trigger {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767.98px) {
    body { overflow-x: hidden; }

    .cleal-global-header .container-fluid,
    .cliente-global-header .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .cleal-global-header .navbar-brand,
    .cliente-global-header .navbar-brand { margin-right: .5rem; min-height: 44px; align-items: center; }

    .cleal-global-header .header-logo,
    .cliente-global-header .header-logo { height: 32px !important; max-width: 132px; object-fit: contain; }

    .cleal-global-header .profile-avatar,
    .cliente-global-header .profile-avatar { width: 40px; height: 40px; }
    .cleal-global-header [data-bs-toggle="dropdown"],
    .cliente-global-header [data-bs-toggle="dropdown"] { min-height: 44px; }

    .mobile-nav-menu .dropdown-menu { min-width: min(290px, calc(100vw - 2rem)); }
    .mobile-nav-menu .dropdown-item,
    .mobile-nav-menu .dropdown-item-text { min-height: 44px; display: flex; align-items: center; }

    /* Tela inteira menos o cabeçalho: o gradiente (.hero-bg-img) cobre 100% do
       hero e terminava no meio da tela quando a altura era "auto". */
    #heroView {
        min-height: calc(100vh - 61px) !important;
        min-height: calc(100dvh - 61px) !important;
        align-items: flex-start;
        padding: clamp(1.5rem, 6vw, 2.25rem) 1rem 2rem;
    }

    #heroView > .container { width: 100%; padding: 0; }
    #heroView .main-logo { height: 44px; margin-bottom: 1.5rem; }

    .search-tabs {
        margin-bottom: 1rem;
        padding: 4px;
        border-radius: 14px;
        width: 100%;
    }

    .search-tab {
        min-width: 0;
        min-height: 48px;
        padding: .7rem .4rem;
        gap: .4rem;
        font-size: clamp(.68rem, 3.3vw, .8rem);
        letter-spacing: 0;
    }

    .search-container-box { padding: 1.25rem; border-radius: 20px; }
    .search-container-box h5 { font-size: 1.15rem; }
    .search-container-box p { margin-bottom: 1.25rem !important; line-height: 1.5; }

    .input-group-custom {
        flex-direction: column;
        gap: .65rem;
        padding: 0;
        background: transparent;
        border: 0;
    }

    .input-group-custom:focus-within { box-shadow: none; background: transparent; }

    .search-select,
    .search-input-field {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        margin: 0 !important;
        border: 1px solid #dbe2ea;
        border-radius: 12px;
        background: #f8fafc;
        padding: .75rem 1rem;
        font-size: 1rem;
    }

    .search-select { padding-right: 2.5rem; }

    .btn-search-main {
        width: 100%;
        min-height: 48px;
        padding: .75rem 1rem;
        border-radius: 12px;
    }

    #content-financeiro .input-group-custom > .d-flex { display: none !important; }
    #heroView .btn-link { min-height: 44px; white-space: normal; line-height: 1.4; }

    #resultsView { padding-top: 76px; padding-bottom: 2rem; }
    #resultsView > .container-fluid,
    main.container-fluid,
    .page-hero .container-fluid { padding-left: 1rem !important; padding-right: 1rem !important; }

    #fixedHeader { height: 58px !important; }
    #fixedHeader .container-fluid { padding-left: 1rem !important; padding-right: 1rem !important; }
    .results-toolbar { gap: .6rem !important; }
    .results-toolbar small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .btn-new-search { min-height: 40px !important; padding: .5rem .72rem !important; white-space: nowrap; }
    .financeiro-search-bar { align-items: stretch !important; flex-direction: column; gap: .85rem !important; margin-bottom: 1.25rem !important; padding: 1rem !important; }
    .financeiro-search-copy { line-height: 1.4; }
    .financeiro-search-bar .btn-new-search { width: 100%; }

    #resultsView .row.align-items-end > [class*="col-"] { width: 100%; text-align: left !important; }
    #resultsView .d-flex.align-items-center.gap-3 { align-items: flex-start !important; flex-wrap: wrap; gap: .65rem !important; }
    #viewClientName { font-size: 1.35rem; overflow-wrap: anywhere; }
    #periodoPedidosConsulta, #periodoPedidosCliente { display: inline-flex; margin-top: .75rem; white-space: normal; line-height: 1.35; }

    .card-stats { border-radius: 16px; }
    .card-stats.p-3 { padding: .85rem !important; }
    .card-stats .d-flex.gap-3 { gap: .65rem !important; }
    .card-stats .rounded-circle, .card-stats .icon-box { width: 38px !important; height: 38px !important; flex: 0 0 38px; }
    .card-stats .extra-small { font-size: .61rem; }
    .card-stats .h4 { font-size: 1.15rem; }

    .table-responsive { overflow: visible; }
    .table-custom { min-width: 0 !important; display: block; border-spacing: 0; }
    .table-custom thead { display: none; }
    .table-custom tbody { display: grid; gap: 1rem; }
    .table-custom tbody tr {
        display: block;
        padding: .35rem 1rem;
        border: 1px solid rgba(72, 35, 99, .08);
        border-radius: 16px;
        box-shadow: 0 6px 20px rgba(15, 23, 42, .06);
    }
    .table-custom tbody tr:hover { transform: none; }
    .table-custom tbody td {
        display: grid;
        grid-template-columns: minmax(88px, 34%) minmax(0, 1fr);
        gap: .75rem;
        align-items: start;
        padding: .65rem 0;
        border-bottom: 1px solid #eef2f7;
        text-align: left !important;
        overflow-wrap: anywhere;
    }
    .table-custom tbody td:last-child { border-bottom: 0; }
    .table-custom tbody td[colspan] {
        display: block;
        text-align: center !important;
    }
    .table-custom tbody td[colspan]::before { display: none; }
    .table-custom tbody td::before {
        content: attr(data-label);
        color: #64748b;
        font-size: .68rem;
        line-height: 1.35;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .03em;
    }
    .table-custom tbody td .mobile-value-stack { min-width: 0; }
    .table-custom tbody td details {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: .35rem !important;
        overflow-wrap: anywhere;
    }
    .table-custom tbody td details ul { padding-left: 1.15rem !important; }
    .table-custom tbody td:first-child,
    .table-custom tbody td:last-child { border-radius: 0; }
    .table-custom .btn-group { flex-wrap: wrap; justify-content: flex-start; }
    .table-custom .btn { min-width: 42px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }
    .table-custom .status-badge { white-space: normal; line-height: 1.35; }
    .table-custom .nf-detail-row { display: none; margin-top: -1rem; padding: .35rem 1rem 1rem; border-top: 0; border-radius: 0 0 16px 16px; }
    .table-custom .nf-detail-row.is-open { display: block; }
    .table-custom .nf-detail-row td { display: block; padding: 0; border: 0; }
    .table-custom .nf-detail-row td::before { display: none; }
    .nf-detail-list { border-top: 1px solid #e9e5ef; }
    .nf-detail-item { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem .65rem; padding: .9rem 0; border-bottom: 1px solid #eeeaf2; }
    .nf-detail-item > div:last-child { grid-column: 1 / -1; }
    .nf-detail-label { display: block; color: #64748b; font-size: .64rem; font-weight: 800; letter-spacing: .04em; margin-bottom: .2rem; text-transform: uppercase; }
    .nf-expand { min-height: 44px; text-align: left; }

    .page-hero { padding: 1.5rem 0 1.25rem !important; }
    .page-hero h1 { font-size: clamp(1.45rem, 7vw, 2rem); overflow-wrap: anywhere; }
    .page-hero .btn { width: 100%; min-height: 46px; margin-top: .25rem; }

    .invoice-header,
    .parcela-item,
    .invoice-body-row {
        flex-direction: column;
        align-items: stretch !important;
        gap: 1rem;
    }
    .invoice-header { padding: 1rem; }
    .parcela-item, .invoice-body-row { padding: 1rem; }
    .invoice-header .text-end { text-align: left !important; }
    .invoice-header > .text-end {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }
    .invoice-header > .text-end .btn {
        min-height: 44px;
        margin: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .invoice-body > .d-flex { flex-wrap: wrap; gap: .4rem .75rem; }
    .invoice-actions,
    .parcela-item > .d-flex:last-child,
    .invoice-body-row > .invoice-actions { width: 100%; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .invoice-actions .btn,
    .parcela-item .btn-action { min-height: 44px; margin: 0 !important; display: inline-flex; align-items: center; justify-content: center; }

    .modal-dialog { margin: .75rem; }
    .modal-content { max-height: calc(100dvh - 1.5rem); overflow: hidden; }
    .modal-body { overflow-y: auto; padding: 1rem !important; }
    .modal-header { padding: 1rem 1rem 0 !important; }
    .dias-entrega-card { padding: 1rem !important; }
    .dias-entrega-header { margin-bottom: 1rem; padding-bottom: 1rem; }
    .dias-entrega-icon { width: 42px; height: 42px; flex: 0 0 42px; }
    .dias-entrega-cidade { font-size: 1.05rem; overflow-wrap: anywhere; }
    .dias-entrega-badges { padding: .85rem !important; }
    .dias-semana-badge { width: 42px !important; height: 42px !important; border-radius: 10px !important; font-size: .7rem !important; }
    .dias-entrega-legenda { gap: .75rem !important; flex-wrap: wrap; }

    .login-card { border-radius: 18px !important; }
    .login-header { padding: 1.5rem 1rem !important; }
    .login-header img { max-width: 145px !important; }
    .login-body { padding: 1.25rem !important; }
    .login-body button,
    .login-body .btn-main,
    .login-body .btn-alt { min-height: 44px; }
    .login-tabs, .tabs { gap: .4rem !important; }
    .login-tabs .tab-btn, .tabs .tab-btn { min-width: 0; padding: .7rem .4rem; font-size: .76rem; }
    .otp-box { gap: 5px !important; }
    .otp-input { width: min(42px, 13vw) !important; height: 52px !important; }
}

@supports (padding: max(0px)) {
    @media (max-width: 767.98px) {
        .cleal-global-header .container-fluid,
        .cliente-global-header .container-fluid {
            padding-left: max(1rem, env(safe-area-inset-left)) !important;
            padding-right: max(1rem, env(safe-area-inset-right)) !important;
        }
        #heroView,
        #resultsView > .container-fluid,
        main.container-fluid,
        .page-hero .container-fluid {
            padding-left: max(1rem, env(safe-area-inset-left)) !important;
            padding-right: max(1rem, env(safe-area-inset-right)) !important;
        }
        body { padding-bottom: env(safe-area-inset-bottom); }
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    /* Tela inteira menos o cabeçalho: o gradiente (.hero-bg-img) cobre 100% do
       hero e terminava no meio da tela quando a altura era "auto". */
    #heroView {
        min-height: calc(100vh - 61px) !important;
        min-height: calc(100dvh - 61px) !important;
        align-items: flex-start;
        padding: 3rem 1.5rem;
    }
    #heroView .main-logo { height: 58px; margin-bottom: 2rem; }
}

@media (max-width: 359.98px) {
    .search-tab { font-size: .64rem; }
    .search-container-box { padding: 1rem; }
    .table-custom tbody td { grid-template-columns: 78px minmax(0, 1fr); }
    .invoice-actions { grid-template-columns: 1fr !important; }
}

@media (orientation: landscape) and (max-height: 520px) {
    #heroView { padding-top: 1rem; }
    #heroView .main-logo { display: none; }
    .modal-content { max-height: calc(100dvh - 1rem); }
}